@xsolla/xui-logos-xsolla 0.97.0 → 0.98.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/native/index.d.mts +7 -3
- package/native/index.d.ts +7 -3
- package/native/index.js +28 -4
- package/native/index.js.flow +5 -3
- package/native/index.js.map +1 -1
- package/native/index.mjs +28 -4
- package/native/index.mjs.map +1 -1
- package/package.json +1 -1
- package/web/index.d.mts +7 -3
- package/web/index.d.ts +7 -3
- package/web/index.js +28 -4
- package/web/index.js.flow +5 -3
- package/web/index.js.map +1 -1
- package/web/index.mjs +28 -4
- package/web/index.mjs.map +1 -1
package/native/index.d.mts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Logo variant - full logo with text or just the icon
|
|
4
|
+
* Logo variant - full logo with icon and text, text only, or just the icon
|
|
5
5
|
*/
|
|
6
|
-
type LogoVariant = "full" | "icon";
|
|
6
|
+
type LogoVariant = "full" | "text" | "icon";
|
|
7
7
|
/**
|
|
8
8
|
* Logo color variants matching brand guidelines
|
|
9
9
|
*/
|
|
@@ -28,7 +28,7 @@ declare const LOGO_COLORS: Record<LogoColor, string>;
|
|
|
28
28
|
*/
|
|
29
29
|
interface XsollaLogoProps {
|
|
30
30
|
/**
|
|
31
|
-
* Logo variant - 'full' shows icon + text, 'icon' shows only the icon
|
|
31
|
+
* Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon
|
|
32
32
|
* @default 'full'
|
|
33
33
|
*/
|
|
34
34
|
variant?: LogoVariant;
|
|
@@ -76,6 +76,10 @@ interface XsollaLogoProps {
|
|
|
76
76
|
* <Xsolla />
|
|
77
77
|
*
|
|
78
78
|
* @example
|
|
79
|
+
* // Text only
|
|
80
|
+
* <Xsolla variant="text" />
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
79
83
|
* // Icon only
|
|
80
84
|
* <Xsolla variant="icon" />
|
|
81
85
|
*
|
package/native/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Logo variant - full logo with text or just the icon
|
|
4
|
+
* Logo variant - full logo with icon and text, text only, or just the icon
|
|
5
5
|
*/
|
|
6
|
-
type LogoVariant = "full" | "icon";
|
|
6
|
+
type LogoVariant = "full" | "text" | "icon";
|
|
7
7
|
/**
|
|
8
8
|
* Logo color variants matching brand guidelines
|
|
9
9
|
*/
|
|
@@ -28,7 +28,7 @@ declare const LOGO_COLORS: Record<LogoColor, string>;
|
|
|
28
28
|
*/
|
|
29
29
|
interface XsollaLogoProps {
|
|
30
30
|
/**
|
|
31
|
-
* Logo variant - 'full' shows icon + text, 'icon' shows only the icon
|
|
31
|
+
* Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon
|
|
32
32
|
* @default 'full'
|
|
33
33
|
*/
|
|
34
34
|
variant?: LogoVariant;
|
|
@@ -76,6 +76,10 @@ interface XsollaLogoProps {
|
|
|
76
76
|
* <Xsolla />
|
|
77
77
|
*
|
|
78
78
|
* @example
|
|
79
|
+
* // Text only
|
|
80
|
+
* <Xsolla variant="text" />
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
79
83
|
* // Icon only
|
|
80
84
|
* <Xsolla variant="icon" />
|
|
81
85
|
*
|
package/native/index.js
CHANGED
|
@@ -46,12 +46,14 @@ var LOGO_COLORS = {
|
|
|
46
46
|
// src/XsollaLogo.native.tsx
|
|
47
47
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
48
48
|
var FULL_LOGO_ASPECT_RATIO = 116 / 24;
|
|
49
|
+
var TEXT_LOGO_ASPECT_RATIO = 119 / 26;
|
|
49
50
|
var ICON_ASPECT_RATIO = 1;
|
|
50
51
|
var XsollaLogo = ({
|
|
51
52
|
variant = "full",
|
|
52
53
|
color = "brand",
|
|
53
54
|
size = "sm",
|
|
54
55
|
fullContent: fullContent2,
|
|
56
|
+
textContent: textContent2,
|
|
55
57
|
iconContent: iconContent2,
|
|
56
58
|
style,
|
|
57
59
|
"aria-label": ariaLabel,
|
|
@@ -59,11 +61,27 @@ var XsollaLogo = ({
|
|
|
59
61
|
accessibilityLabel
|
|
60
62
|
}) => {
|
|
61
63
|
const height = typeof size === "number" ? size : LOGO_SIZES[size];
|
|
62
|
-
const aspectRatio = variant === "full" ? FULL_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;
|
|
64
|
+
const aspectRatio = variant === "full" ? FULL_LOGO_ASPECT_RATIO : variant === "text" ? TEXT_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;
|
|
63
65
|
const width = Math.round(height * aspectRatio);
|
|
64
|
-
const content = variant === "full" ? fullContent2 : iconContent2;
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
const content = variant === "full" ? fullContent2 : variant === "text" ? textContent2 : iconContent2;
|
|
67
|
+
let svgContent = content[color];
|
|
68
|
+
if (!svgContent && color !== "brand") {
|
|
69
|
+
svgContent = content.brand;
|
|
70
|
+
if (typeof console !== "undefined" && console.warn) {
|
|
71
|
+
console.warn(
|
|
72
|
+
`XsollaLogo: missing SVG content for variant='${variant}' color='${color}', falling back to brand color`
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
if (!svgContent) {
|
|
77
|
+
if (typeof console !== "undefined" && console.error) {
|
|
78
|
+
console.error(
|
|
79
|
+
`XsollaLogo: missing SVG content for variant='${variant}' color='${color}'`
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
const defaultAriaLabel = variant === "full" ? "Xsolla logo" : variant === "text" ? "Xsolla text" : "Xsolla icon";
|
|
67
85
|
const label = accessibilityLabel || ariaLabel || defaultAriaLabel;
|
|
68
86
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
69
87
|
import_react_native.View,
|
|
@@ -84,6 +102,11 @@ var fullContent = {
|
|
|
84
102
|
brand: `<svg viewBox="0 0 155 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z" fill="#80EAFF"/><path d="M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z" fill="#80EAFF"/><path d="M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z" fill="#80EAFF"/><path d="M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z" fill="#80EAFF"/><path d="M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z" fill="#80EAFF"/><path d="M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z" fill="#80EAFF"/><path d="M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z" fill="#80EAFF"/><path d="M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z" fill="#80EAFF"/></svg>`,
|
|
85
103
|
white: `<svg viewBox="0 0 155 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z" fill="white"/><path d="M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z" fill="white"/><path d="M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z" fill="white"/><path d="M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z" fill="white"/><path d="M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z" fill="white"/><path d="M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z" fill="white"/><path d="M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z" fill="white"/><path d="M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z" fill="white"/></svg>`
|
|
86
104
|
};
|
|
105
|
+
var textContent = {
|
|
106
|
+
black: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="black" style="fill:black;fill-opacity:1;"/></g></svg>`,
|
|
107
|
+
brand: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/></g></svg>`,
|
|
108
|
+
white: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="white" style="fill:white;fill-opacity:1;"/></g></svg>`
|
|
109
|
+
};
|
|
87
110
|
var iconContent = {
|
|
88
111
|
black: `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z" fill="black"/><path d="M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z" fill="black"/><path d="M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z" fill="black"/></svg>`,
|
|
89
112
|
brand: `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Colour=Blue, Size=M [32], Icon=None"><g id="Vector"><path d="M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z" fill="#80EAFF"/><path d="M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z" fill="#80EAFF"/><path d="M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z" fill="#80EAFF"/></g></g></svg>`,
|
|
@@ -94,6 +117,7 @@ var Xsolla = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
|
94
117
|
{
|
|
95
118
|
...props,
|
|
96
119
|
fullContent,
|
|
120
|
+
textContent,
|
|
97
121
|
iconContent
|
|
98
122
|
}
|
|
99
123
|
);
|
package/native/index.js.flow
CHANGED
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
import React, { CSSProperties } from "react";
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
* Logo variant - full logo with text or just the icon
|
|
11
|
+
* Logo variant - full logo with icon and text, text only, or just the icon
|
|
12
12
|
*/
|
|
13
|
-
declare type LogoVariant = "full" | "icon";
|
|
13
|
+
declare type LogoVariant = "full" | "text" | "icon";
|
|
14
14
|
/**
|
|
15
15
|
* Logo color variants matching brand guidelines
|
|
16
16
|
*/
|
|
@@ -35,7 +35,7 @@ declare var LOGO_COLORS: { [key: LogoColor]: string, ... };
|
|
|
35
35
|
*/
|
|
36
36
|
declare interface XsollaLogoProps {
|
|
37
37
|
/**
|
|
38
|
-
* Logo variant - 'full' shows icon + text, 'icon' shows only the icon
|
|
38
|
+
* Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon
|
|
39
39
|
* @default 'full'
|
|
40
40
|
*/
|
|
41
41
|
variant?: LogoVariant;
|
|
@@ -86,6 +86,8 @@ declare interface XsollaLogoProps {
|
|
|
86
86
|
* Xsolla brand logo component
|
|
87
87
|
* @example // Full logo in brand color (default)
|
|
88
88
|
* <Xsolla />
|
|
89
|
+
* @example // Text only
|
|
90
|
+
* <Xsolla variant="text" />
|
|
89
91
|
* @example // Icon only
|
|
90
92
|
* <Xsolla variant="icon" />
|
|
91
93
|
* @example // Black color, medium size
|
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/XsollaLogo.native.tsx","../../src/types.ts"],"sourcesContent":["// Auto-generated - do not edit manually\nimport React from \"react\";\nimport { XsollaLogo as XsollaLogoBase } from \"./XsollaLogo\";\nimport type {\n XsollaLogoProps,\n LogoVariant,\n LogoColor,\n LogoSize,\n} from \"./types\";\nexport { LOGO_SIZES, LOGO_COLORS } from \"./types\";\nexport type { XsollaLogoProps, LogoVariant, LogoColor, LogoSize };\n\n// Full logo SVG content by color\nconst fullContent = {\n black: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Black, Size=M [32], Icon=Left\"><g id=\"Vector\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"black\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"black\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"black\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"black\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"black\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"black\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"black\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"black\"/></g></g></svg>`,\n brand: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"#80EAFF\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"#80EAFF\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"#80EAFF\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"#80EAFF\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"#80EAFF\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"#80EAFF\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"#80EAFF\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"#80EAFF\"/></svg>`,\n white: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"white\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"white\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"white\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"white\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"white\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"white\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"white\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"white\"/></svg>`,\n};\n\n// Icon SVG content by color\nconst iconContent = {\n black: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"black\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"black\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"black\"/></svg>`,\n brand: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Blue, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"#80EAFF\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"#80EAFF\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"#80EAFF\"/></g></g></svg>`,\n white: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=White, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"white\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"white\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"white\"/></g></g></svg>`,\n};\n\n/**\n * Xsolla brand logo component\n *\n * @example\n * // Full logo in brand color (default)\n * <Xsolla />\n *\n * @example\n * // Icon only\n * <Xsolla variant=\"icon\" />\n *\n * @example\n * // Black color, medium size\n * <Xsolla color=\"black\" size=\"md\" />\n */\nexport const Xsolla: React.FC<XsollaLogoProps> = (props) => (\n <XsollaLogoBase\n {...props}\n fullContent={fullContent}\n iconContent={iconContent}\n />\n);\n\n// Default export for convenience\nexport default Xsolla;\n","import React from \"react\";\nimport { View } from \"react-native\";\nimport { SvgXml } from \"react-native-svg\";\nimport {\n LOGO_SIZES,\n type XsollaLogoInternalProps,\n type LogoSize,\n} from \"./types\";\n\n// Full logo aspect ratio (approximately 4.84:1 based on Figma - 116x24)\nconst FULL_LOGO_ASPECT_RATIO = 116 / 24;\n\n// Icon aspect ratio (1:1)\nconst ICON_ASPECT_RATIO = 1;\n\nexport const XsollaLogo: React.FC<XsollaLogoInternalProps> = ({\n variant = \"full\",\n color = \"brand\",\n size = \"sm\",\n fullContent,\n iconContent,\n style,\n \"aria-label\": ariaLabel,\n \"aria-hidden\": ariaHidden,\n accessibilityLabel,\n}) => {\n // Resolve size to pixels\n const height = typeof size === \"number\" ? size : LOGO_SIZES[size as LogoSize];\n\n // Calculate width based on variant\n const aspectRatio =\n variant === \"full\" ? FULL_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;\n const width = Math.round(height * aspectRatio);\n\n // Get the appropriate SVG content\n const content = variant === \"full\" ? fullContent : iconContent;\n const svgContent = content[color];\n\n // Default aria-label based on variant\n const defaultAriaLabel = variant === \"full\" ? \"Xsolla logo\" : \"Xsolla icon\";\n const label = accessibilityLabel || ariaLabel || defaultAriaLabel;\n\n return (\n <View\n // @ts-expect-error - TODO: resolve type error\n style={[{ width, height }, style]}\n accessible={!ariaHidden}\n accessibilityRole=\"image\"\n accessibilityLabel={ariaHidden ? undefined : label}\n >\n <SvgXml xml={svgContent} width=\"100%\" height=\"100%\" />\n </View>\n );\n};\n","import type { CSSProperties } from \"react\";\n\n/**\n * Logo variant - full logo with text or just the icon\n */\nexport type LogoVariant = \"full\" | \"icon\";\n\n/**\n * Logo color variants matching brand guidelines\n */\nexport type LogoColor = \"black\" | \"brand\" | \"white\";\n\n/**\n * Logo size presets\n * - xs: 18px height\n * - sm: 24px height (default)\n * - md: 32px height\n */\nexport type LogoSize = \"xs\" | \"sm\" | \"md\";\n\n/**\n * Size values in pixels for each preset\n */\nexport const LOGO_SIZES: Record<LogoSize, number> = {\n xs: 18,\n sm: 24,\n md: 32,\n};\n\n/**\n * Brand colors in hex values\n */\nexport const LOGO_COLORS: Record<LogoColor, string> = {\n black: \"#000000\",\n brand: \"#80EAFF\",\n white: \"#FFFFFF\",\n};\n\n/**\n * Props for the XsollaLogo component\n */\nexport interface XsollaLogoProps {\n /**\n * Logo variant - 'full' shows icon + text, 'icon' shows only the icon\n * @default 'full'\n */\n variant?: LogoVariant;\n\n /**\n * Logo color\n * @default 'brand'\n */\n color?: LogoColor;\n\n /**\n * Logo size - preset name or custom pixel height\n * @default 'sm' (24px)\n */\n size?: LogoSize | number;\n\n /**\n * Additional CSS class name\n */\n className?: string;\n\n /**\n * Additional inline styles\n */\n style?: CSSProperties;\n\n /**\n * Test ID for testing purposes\n */\n \"data-testid\"?: string;\n\n /**\n * Accessible label for screen readers\n */\n \"aria-label\"?: string;\n\n /**\n * Whether to hide from screen readers\n */\n \"aria-hidden\"?: boolean;\n\n /**\n * React Native accessibility label\n */\n accessibilityLabel?: string;\n}\n\n/**\n * Internal props passed to the logo component including SVG content\n */\nexport interface XsollaLogoInternalProps extends XsollaLogoProps {\n /**\n * SVG content for full logo variants (keyed by color)\n */\n fullContent: Record<LogoColor, string>;\n\n /**\n * SVG content for icon-only variants (keyed by color)\n */\n iconContent: Record<LogoColor, string>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,0BAAqB;AACrB,8BAAuB;;;ACqBhB,IAAM,aAAuC;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,IAAM,cAAyC;AAAA,EACpD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;;;ADcM;AAxCN,IAAM,yBAAyB,MAAM;AAGrC,IAAM,oBAAoB;AAEnB,IAAM,aAAgD,CAAC;AAAA,EAC5D,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAAA;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf;AACF,MAAM;AAEJ,QAAM,SAAS,OAAO,SAAS,WAAW,OAAO,WAAW,IAAgB;AAG5E,QAAM,cACJ,YAAY,SAAS,yBAAyB;AAChD,QAAM,QAAQ,KAAK,MAAM,SAAS,WAAW;AAG7C,QAAM,UAAU,YAAY,SAASD,eAAcC;AACnD,QAAM,aAAa,QAAQ,KAAK;AAGhC,QAAM,mBAAmB,YAAY,SAAS,gBAAgB;AAC9D,QAAM,QAAQ,sBAAsB,aAAa;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,CAAC,EAAE,OAAO,OAAO,GAAG,KAAK;AAAA,MAChC,YAAY,CAAC;AAAA,MACb,mBAAkB;AAAA,MAClB,oBAAoB,aAAa,SAAY;AAAA,MAE7C,sDAAC,kCAAO,KAAK,YAAY,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,EACtD;AAEJ;;;ADXE,IAAAC,sBAAA;AA7BF,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAiBO,IAAM,SAAoC,CAAC,UAChD;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA;AACF;AAIF,IAAO,gBAAQ;","names":["fullContent","iconContent","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/XsollaLogo.native.tsx","../../src/types.ts"],"sourcesContent":["// Auto-generated - do not edit manually\nimport React from \"react\";\nimport { XsollaLogo as XsollaLogoBase } from \"./XsollaLogo\";\nimport type {\n XsollaLogoProps,\n LogoVariant,\n LogoColor,\n LogoSize,\n} from \"./types\";\nexport { LOGO_SIZES, LOGO_COLORS } from \"./types\";\nexport type { XsollaLogoProps, LogoVariant, LogoColor, LogoSize };\n\n// Full logo SVG content by color\nconst fullContent = {\n black: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Black, Size=M [32], Icon=Left\"><g id=\"Vector\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"black\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"black\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"black\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"black\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"black\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"black\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"black\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"black\"/></g></g></svg>`,\n brand: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"#80EAFF\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"#80EAFF\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"#80EAFF\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"#80EAFF\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"#80EAFF\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"#80EAFF\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"#80EAFF\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"#80EAFF\"/></svg>`,\n white: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"white\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"white\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"white\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"white\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"white\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"white\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"white\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"white\"/></svg>`,\n};\n\n// Text logo SVG content by color\nconst textContent = {\n black: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/></g></svg>`,\n brand: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/></g></svg>`,\n white: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/></g></svg>`,\n};\n\n// Icon SVG content by color\nconst iconContent = {\n black: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"black\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"black\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"black\"/></svg>`,\n brand: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Blue, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"#80EAFF\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"#80EAFF\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"#80EAFF\"/></g></g></svg>`,\n white: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=White, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"white\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"white\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"white\"/></g></g></svg>`,\n};\n\n/**\n * Xsolla brand logo component\n *\n * @example\n * // Full logo in brand color (default)\n * <Xsolla />\n *\n * @example\n * // Text only\n * <Xsolla variant=\"text\" />\n *\n * @example\n * // Icon only\n * <Xsolla variant=\"icon\" />\n *\n * @example\n * // Black color, medium size\n * <Xsolla color=\"black\" size=\"md\" />\n */\nexport const Xsolla: React.FC<XsollaLogoProps> = (props) => (\n <XsollaLogoBase\n {...props}\n fullContent={fullContent}\n textContent={textContent}\n iconContent={iconContent}\n />\n);\n\n// Default export for convenience\nexport default Xsolla;\n","import React from \"react\";\nimport { View } from \"react-native\";\nimport { SvgXml } from \"react-native-svg\";\nimport {\n LOGO_SIZES,\n type XsollaLogoInternalProps,\n type LogoSize,\n} from \"./types\";\n\n// Full logo aspect ratio (approximately 4.84:1 based on Figma - 116x24)\nconst FULL_LOGO_ASPECT_RATIO = 116 / 24;\n\n// Text logo aspect ratio (approximately 4.58:1 based on viewBox - 119x26)\nconst TEXT_LOGO_ASPECT_RATIO = 119 / 26;\n\n// Icon aspect ratio (1:1)\nconst ICON_ASPECT_RATIO = 1;\n\nexport const XsollaLogo: React.FC<XsollaLogoInternalProps> = ({\n variant = \"full\",\n color = \"brand\",\n size = \"sm\",\n fullContent,\n textContent,\n iconContent,\n style,\n \"aria-label\": ariaLabel,\n \"aria-hidden\": ariaHidden,\n accessibilityLabel,\n}) => {\n // Resolve size to pixels\n const height = typeof size === \"number\" ? size : LOGO_SIZES[size as LogoSize];\n\n // Calculate width based on variant\n const aspectRatio =\n variant === \"full\"\n ? FULL_LOGO_ASPECT_RATIO\n : variant === \"text\"\n ? TEXT_LOGO_ASPECT_RATIO\n : ICON_ASPECT_RATIO;\n const width = Math.round(height * aspectRatio);\n\n // Get the appropriate SVG content\n const content =\n variant === \"full\"\n ? fullContent\n : variant === \"text\"\n ? textContent\n : iconContent;\n let svgContent = content[color];\n\n // Fallback to brand color if requested color is missing\n if (!svgContent && color !== \"brand\") {\n svgContent = content.brand;\n if (typeof console !== \"undefined\" && console.warn) {\n console.warn(\n `XsollaLogo: missing SVG content for variant='${variant}' color='${color}', falling back to brand color`\n );\n }\n }\n\n // If still no content, return null\n if (!svgContent) {\n if (typeof console !== \"undefined\" && console.error) {\n console.error(\n `XsollaLogo: missing SVG content for variant='${variant}' color='${color}'`\n );\n }\n return null;\n }\n\n // Default aria-label based on variant\n const defaultAriaLabel =\n variant === \"full\"\n ? \"Xsolla logo\"\n : variant === \"text\"\n ? \"Xsolla text\"\n : \"Xsolla icon\";\n const label = accessibilityLabel || ariaLabel || defaultAriaLabel;\n\n return (\n <View\n // @ts-expect-error - TODO: resolve type error\n style={[{ width, height }, style]}\n accessible={!ariaHidden}\n accessibilityRole=\"image\"\n accessibilityLabel={ariaHidden ? undefined : label}\n >\n <SvgXml xml={svgContent} width=\"100%\" height=\"100%\" />\n </View>\n );\n};\n","import type { CSSProperties } from \"react\";\n\n/**\n * Logo variant - full logo with icon and text, text only, or just the icon\n */\nexport type LogoVariant = \"full\" | \"text\" | \"icon\";\n\n/**\n * Logo color variants matching brand guidelines\n */\nexport type LogoColor = \"black\" | \"brand\" | \"white\";\n\n/**\n * Logo size presets\n * - xs: 18px height\n * - sm: 24px height (default)\n * - md: 32px height\n */\nexport type LogoSize = \"xs\" | \"sm\" | \"md\";\n\n/**\n * Size values in pixels for each preset\n */\nexport const LOGO_SIZES: Record<LogoSize, number> = {\n xs: 18,\n sm: 24,\n md: 32,\n};\n\n/**\n * Brand colors in hex values\n */\nexport const LOGO_COLORS: Record<LogoColor, string> = {\n black: \"#000000\",\n brand: \"#80EAFF\",\n white: \"#FFFFFF\",\n};\n\n/**\n * Props for the XsollaLogo component\n */\nexport interface XsollaLogoProps {\n /**\n * Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon\n * @default 'full'\n */\n variant?: LogoVariant;\n\n /**\n * Logo color\n * @default 'brand'\n */\n color?: LogoColor;\n\n /**\n * Logo size - preset name or custom pixel height\n * @default 'sm' (24px)\n */\n size?: LogoSize | number;\n\n /**\n * Additional CSS class name\n */\n className?: string;\n\n /**\n * Additional inline styles\n */\n style?: CSSProperties;\n\n /**\n * Test ID for testing purposes\n */\n \"data-testid\"?: string;\n\n /**\n * Accessible label for screen readers\n */\n \"aria-label\"?: string;\n\n /**\n * Whether to hide from screen readers\n */\n \"aria-hidden\"?: boolean;\n\n /**\n * React Native accessibility label\n */\n accessibilityLabel?: string;\n}\n\n/**\n * Internal props passed to the logo component including SVG content\n */\nexport interface XsollaLogoInternalProps extends XsollaLogoProps {\n /**\n * SVG content for full logo variants (keyed by color)\n */\n fullContent: Record<LogoColor, string>;\n\n /**\n * SVG content for text-only variants (keyed by color)\n */\n textContent: Record<LogoColor, string>;\n\n /**\n * SVG content for icon-only variants (keyed by color)\n */\n iconContent: Record<LogoColor, string>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,0BAAqB;AACrB,8BAAuB;;;ACqBhB,IAAM,aAAuC;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,IAAM,cAAyC;AAAA,EACpD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;;;ADoDM;AA9EN,IAAM,yBAAyB,MAAM;AAGrC,IAAM,yBAAyB,MAAM;AAGrC,IAAM,oBAAoB;AAEnB,IAAM,aAAgD,CAAC;AAAA,EAC5D,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAAA;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf;AACF,MAAM;AAEJ,QAAM,SAAS,OAAO,SAAS,WAAW,OAAO,WAAW,IAAgB;AAG5E,QAAM,cACJ,YAAY,SACR,yBACA,YAAY,SACV,yBACA;AACR,QAAM,QAAQ,KAAK,MAAM,SAAS,WAAW;AAG7C,QAAM,UACJ,YAAY,SACRF,eACA,YAAY,SACVC,eACAC;AACR,MAAI,aAAa,QAAQ,KAAK;AAG9B,MAAI,CAAC,cAAc,UAAU,SAAS;AACpC,iBAAa,QAAQ;AACrB,QAAI,OAAO,YAAY,eAAe,QAAQ,MAAM;AAClD,cAAQ;AAAA,QACN,gDAAgD,OAAO,YAAY,KAAK;AAAA,MAC1E;AAAA,IACF;AAAA,EACF;AAGA,MAAI,CAAC,YAAY;AACf,QAAI,OAAO,YAAY,eAAe,QAAQ,OAAO;AACnD,cAAQ;AAAA,QACN,gDAAgD,OAAO,YAAY,KAAK;AAAA,MAC1E;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAGA,QAAM,mBACJ,YAAY,SACR,gBACA,YAAY,SACV,gBACA;AACR,QAAM,QAAQ,sBAAsB,aAAa;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,CAAC,EAAE,OAAO,OAAO,GAAG,KAAK;AAAA,MAChC,YAAY,CAAC;AAAA,MACb,mBAAkB;AAAA,MAClB,oBAAoB,aAAa,SAAY;AAAA,MAE7C,sDAAC,kCAAO,KAAK,YAAY,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,EACtD;AAEJ;;;ADtCE,IAAAC,sBAAA;AAxCF,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAqBO,IAAM,SAAoC,CAAC,UAChD;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA;AACF;AAIF,IAAO,gBAAQ;","names":["fullContent","textContent","iconContent","import_jsx_runtime"]}
|
package/native/index.mjs
CHANGED
|
@@ -17,12 +17,14 @@ var LOGO_COLORS = {
|
|
|
17
17
|
// src/XsollaLogo.native.tsx
|
|
18
18
|
import { jsx } from "react/jsx-runtime";
|
|
19
19
|
var FULL_LOGO_ASPECT_RATIO = 116 / 24;
|
|
20
|
+
var TEXT_LOGO_ASPECT_RATIO = 119 / 26;
|
|
20
21
|
var ICON_ASPECT_RATIO = 1;
|
|
21
22
|
var XsollaLogo = ({
|
|
22
23
|
variant = "full",
|
|
23
24
|
color = "brand",
|
|
24
25
|
size = "sm",
|
|
25
26
|
fullContent: fullContent2,
|
|
27
|
+
textContent: textContent2,
|
|
26
28
|
iconContent: iconContent2,
|
|
27
29
|
style,
|
|
28
30
|
"aria-label": ariaLabel,
|
|
@@ -30,11 +32,27 @@ var XsollaLogo = ({
|
|
|
30
32
|
accessibilityLabel
|
|
31
33
|
}) => {
|
|
32
34
|
const height = typeof size === "number" ? size : LOGO_SIZES[size];
|
|
33
|
-
const aspectRatio = variant === "full" ? FULL_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;
|
|
35
|
+
const aspectRatio = variant === "full" ? FULL_LOGO_ASPECT_RATIO : variant === "text" ? TEXT_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;
|
|
34
36
|
const width = Math.round(height * aspectRatio);
|
|
35
|
-
const content = variant === "full" ? fullContent2 : iconContent2;
|
|
36
|
-
|
|
37
|
-
|
|
37
|
+
const content = variant === "full" ? fullContent2 : variant === "text" ? textContent2 : iconContent2;
|
|
38
|
+
let svgContent = content[color];
|
|
39
|
+
if (!svgContent && color !== "brand") {
|
|
40
|
+
svgContent = content.brand;
|
|
41
|
+
if (typeof console !== "undefined" && console.warn) {
|
|
42
|
+
console.warn(
|
|
43
|
+
`XsollaLogo: missing SVG content for variant='${variant}' color='${color}', falling back to brand color`
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
if (!svgContent) {
|
|
48
|
+
if (typeof console !== "undefined" && console.error) {
|
|
49
|
+
console.error(
|
|
50
|
+
`XsollaLogo: missing SVG content for variant='${variant}' color='${color}'`
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
return null;
|
|
54
|
+
}
|
|
55
|
+
const defaultAriaLabel = variant === "full" ? "Xsolla logo" : variant === "text" ? "Xsolla text" : "Xsolla icon";
|
|
38
56
|
const label = accessibilityLabel || ariaLabel || defaultAriaLabel;
|
|
39
57
|
return /* @__PURE__ */ jsx(
|
|
40
58
|
View,
|
|
@@ -55,6 +73,11 @@ var fullContent = {
|
|
|
55
73
|
brand: `<svg viewBox="0 0 155 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z" fill="#80EAFF"/><path d="M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z" fill="#80EAFF"/><path d="M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z" fill="#80EAFF"/><path d="M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z" fill="#80EAFF"/><path d="M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z" fill="#80EAFF"/><path d="M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z" fill="#80EAFF"/><path d="M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z" fill="#80EAFF"/><path d="M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z" fill="#80EAFF"/></svg>`,
|
|
56
74
|
white: `<svg viewBox="0 0 155 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z" fill="white"/><path d="M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z" fill="white"/><path d="M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z" fill="white"/><path d="M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z" fill="white"/><path d="M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z" fill="white"/><path d="M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z" fill="white"/><path d="M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z" fill="white"/><path d="M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z" fill="white"/></svg>`
|
|
57
75
|
};
|
|
76
|
+
var textContent = {
|
|
77
|
+
black: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="black" style="fill:black;fill-opacity:1;"/></g></svg>`,
|
|
78
|
+
brand: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/></g></svg>`,
|
|
79
|
+
white: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="white" style="fill:white;fill-opacity:1;"/></g></svg>`
|
|
80
|
+
};
|
|
58
81
|
var iconContent = {
|
|
59
82
|
black: `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z" fill="black"/><path d="M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z" fill="black"/><path d="M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z" fill="black"/></svg>`,
|
|
60
83
|
brand: `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Colour=Blue, Size=M [32], Icon=None"><g id="Vector"><path d="M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z" fill="#80EAFF"/><path d="M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z" fill="#80EAFF"/><path d="M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z" fill="#80EAFF"/></g></g></svg>`,
|
|
@@ -65,6 +88,7 @@ var Xsolla = (props) => /* @__PURE__ */ jsx2(
|
|
|
65
88
|
{
|
|
66
89
|
...props,
|
|
67
90
|
fullContent,
|
|
91
|
+
textContent,
|
|
68
92
|
iconContent
|
|
69
93
|
}
|
|
70
94
|
);
|
package/native/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/XsollaLogo.native.tsx","../../src/types.ts","../../src/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { View } from \"react-native\";\nimport { SvgXml } from \"react-native-svg\";\nimport {\n LOGO_SIZES,\n type XsollaLogoInternalProps,\n type LogoSize,\n} from \"./types\";\n\n// Full logo aspect ratio (approximately 4.84:1 based on Figma - 116x24)\nconst FULL_LOGO_ASPECT_RATIO = 116 / 24;\n\n// Icon aspect ratio (1:1)\nconst ICON_ASPECT_RATIO = 1;\n\nexport const XsollaLogo: React.FC<XsollaLogoInternalProps> = ({\n variant = \"full\",\n color = \"brand\",\n size = \"sm\",\n fullContent,\n iconContent,\n style,\n \"aria-label\": ariaLabel,\n \"aria-hidden\": ariaHidden,\n accessibilityLabel,\n}) => {\n // Resolve size to pixels\n const height = typeof size === \"number\" ? size : LOGO_SIZES[size as LogoSize];\n\n // Calculate width based on variant\n const aspectRatio =\n variant === \"full\" ? FULL_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;\n const width = Math.round(height * aspectRatio);\n\n // Get the appropriate SVG content\n const content = variant === \"full\" ? fullContent : iconContent;\n const svgContent = content[color];\n\n // Default aria-label based on variant\n const defaultAriaLabel = variant === \"full\" ? \"Xsolla logo\" : \"Xsolla icon\";\n const label = accessibilityLabel || ariaLabel || defaultAriaLabel;\n\n return (\n <View\n // @ts-expect-error - TODO: resolve type error\n style={[{ width, height }, style]}\n accessible={!ariaHidden}\n accessibilityRole=\"image\"\n accessibilityLabel={ariaHidden ? undefined : label}\n >\n <SvgXml xml={svgContent} width=\"100%\" height=\"100%\" />\n </View>\n );\n};\n","import type { CSSProperties } from \"react\";\n\n/**\n * Logo variant - full logo with text or just the icon\n */\nexport type LogoVariant = \"full\" | \"icon\";\n\n/**\n * Logo color variants matching brand guidelines\n */\nexport type LogoColor = \"black\" | \"brand\" | \"white\";\n\n/**\n * Logo size presets\n * - xs: 18px height\n * - sm: 24px height (default)\n * - md: 32px height\n */\nexport type LogoSize = \"xs\" | \"sm\" | \"md\";\n\n/**\n * Size values in pixels for each preset\n */\nexport const LOGO_SIZES: Record<LogoSize, number> = {\n xs: 18,\n sm: 24,\n md: 32,\n};\n\n/**\n * Brand colors in hex values\n */\nexport const LOGO_COLORS: Record<LogoColor, string> = {\n black: \"#000000\",\n brand: \"#80EAFF\",\n white: \"#FFFFFF\",\n};\n\n/**\n * Props for the XsollaLogo component\n */\nexport interface XsollaLogoProps {\n /**\n * Logo variant - 'full' shows icon + text, 'icon' shows only the icon\n * @default 'full'\n */\n variant?: LogoVariant;\n\n /**\n * Logo color\n * @default 'brand'\n */\n color?: LogoColor;\n\n /**\n * Logo size - preset name or custom pixel height\n * @default 'sm' (24px)\n */\n size?: LogoSize | number;\n\n /**\n * Additional CSS class name\n */\n className?: string;\n\n /**\n * Additional inline styles\n */\n style?: CSSProperties;\n\n /**\n * Test ID for testing purposes\n */\n \"data-testid\"?: string;\n\n /**\n * Accessible label for screen readers\n */\n \"aria-label\"?: string;\n\n /**\n * Whether to hide from screen readers\n */\n \"aria-hidden\"?: boolean;\n\n /**\n * React Native accessibility label\n */\n accessibilityLabel?: string;\n}\n\n/**\n * Internal props passed to the logo component including SVG content\n */\nexport interface XsollaLogoInternalProps extends XsollaLogoProps {\n /**\n * SVG content for full logo variants (keyed by color)\n */\n fullContent: Record<LogoColor, string>;\n\n /**\n * SVG content for icon-only variants (keyed by color)\n */\n iconContent: Record<LogoColor, string>;\n}\n","// Auto-generated - do not edit manually\nimport React from \"react\";\nimport { XsollaLogo as XsollaLogoBase } from \"./XsollaLogo\";\nimport type {\n XsollaLogoProps,\n LogoVariant,\n LogoColor,\n LogoSize,\n} from \"./types\";\nexport { LOGO_SIZES, LOGO_COLORS } from \"./types\";\nexport type { XsollaLogoProps, LogoVariant, LogoColor, LogoSize };\n\n// Full logo SVG content by color\nconst fullContent = {\n black: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Black, Size=M [32], Icon=Left\"><g id=\"Vector\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"black\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"black\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"black\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"black\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"black\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"black\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"black\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"black\"/></g></g></svg>`,\n brand: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"#80EAFF\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"#80EAFF\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"#80EAFF\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"#80EAFF\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"#80EAFF\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"#80EAFF\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"#80EAFF\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"#80EAFF\"/></svg>`,\n white: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"white\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"white\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"white\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"white\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"white\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"white\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"white\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"white\"/></svg>`,\n};\n\n// Icon SVG content by color\nconst iconContent = {\n black: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"black\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"black\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"black\"/></svg>`,\n brand: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Blue, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"#80EAFF\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"#80EAFF\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"#80EAFF\"/></g></g></svg>`,\n white: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=White, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"white\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"white\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"white\"/></g></g></svg>`,\n};\n\n/**\n * Xsolla brand logo component\n *\n * @example\n * // Full logo in brand color (default)\n * <Xsolla />\n *\n * @example\n * // Icon only\n * <Xsolla variant=\"icon\" />\n *\n * @example\n * // Black color, medium size\n * <Xsolla color=\"black\" size=\"md\" />\n */\nexport const Xsolla: React.FC<XsollaLogoProps> = (props) => (\n <XsollaLogoBase\n {...props}\n fullContent={fullContent}\n iconContent={iconContent}\n />\n);\n\n// Default export for convenience\nexport default Xsolla;\n"],"mappings":";AACA,SAAS,YAAY;AACrB,SAAS,cAAc;;;ACqBhB,IAAM,aAAuC;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,IAAM,cAAyC;AAAA,EACpD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;;;ADcM;AAxCN,IAAM,yBAAyB,MAAM;AAGrC,IAAM,oBAAoB;AAEnB,IAAM,aAAgD,CAAC;AAAA,EAC5D,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAAA;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf;AACF,MAAM;AAEJ,QAAM,SAAS,OAAO,SAAS,WAAW,OAAO,WAAW,IAAgB;AAG5E,QAAM,cACJ,YAAY,SAAS,yBAAyB;AAChD,QAAM,QAAQ,KAAK,MAAM,SAAS,WAAW;AAG7C,QAAM,UAAU,YAAY,SAASD,eAAcC;AACnD,QAAM,aAAa,QAAQ,KAAK;AAGhC,QAAM,mBAAmB,YAAY,SAAS,gBAAgB;AAC9D,QAAM,QAAQ,sBAAsB,aAAa;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,CAAC,EAAE,OAAO,OAAO,GAAG,KAAK;AAAA,MAChC,YAAY,CAAC;AAAA,MACb,mBAAkB;AAAA,MAClB,oBAAoB,aAAa,SAAY;AAAA,MAE7C,8BAAC,UAAO,KAAK,YAAY,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,EACtD;AAEJ;;;AEXE,gBAAAC,YAAA;AA7BF,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAiBO,IAAM,SAAoC,CAAC,UAChD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA;AACF;AAIF,IAAO,gBAAQ;","names":["fullContent","iconContent","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../src/XsollaLogo.native.tsx","../../src/types.ts","../../src/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { View } from \"react-native\";\nimport { SvgXml } from \"react-native-svg\";\nimport {\n LOGO_SIZES,\n type XsollaLogoInternalProps,\n type LogoSize,\n} from \"./types\";\n\n// Full logo aspect ratio (approximately 4.84:1 based on Figma - 116x24)\nconst FULL_LOGO_ASPECT_RATIO = 116 / 24;\n\n// Text logo aspect ratio (approximately 4.58:1 based on viewBox - 119x26)\nconst TEXT_LOGO_ASPECT_RATIO = 119 / 26;\n\n// Icon aspect ratio (1:1)\nconst ICON_ASPECT_RATIO = 1;\n\nexport const XsollaLogo: React.FC<XsollaLogoInternalProps> = ({\n variant = \"full\",\n color = \"brand\",\n size = \"sm\",\n fullContent,\n textContent,\n iconContent,\n style,\n \"aria-label\": ariaLabel,\n \"aria-hidden\": ariaHidden,\n accessibilityLabel,\n}) => {\n // Resolve size to pixels\n const height = typeof size === \"number\" ? size : LOGO_SIZES[size as LogoSize];\n\n // Calculate width based on variant\n const aspectRatio =\n variant === \"full\"\n ? FULL_LOGO_ASPECT_RATIO\n : variant === \"text\"\n ? TEXT_LOGO_ASPECT_RATIO\n : ICON_ASPECT_RATIO;\n const width = Math.round(height * aspectRatio);\n\n // Get the appropriate SVG content\n const content =\n variant === \"full\"\n ? fullContent\n : variant === \"text\"\n ? textContent\n : iconContent;\n let svgContent = content[color];\n\n // Fallback to brand color if requested color is missing\n if (!svgContent && color !== \"brand\") {\n svgContent = content.brand;\n if (typeof console !== \"undefined\" && console.warn) {\n console.warn(\n `XsollaLogo: missing SVG content for variant='${variant}' color='${color}', falling back to brand color`\n );\n }\n }\n\n // If still no content, return null\n if (!svgContent) {\n if (typeof console !== \"undefined\" && console.error) {\n console.error(\n `XsollaLogo: missing SVG content for variant='${variant}' color='${color}'`\n );\n }\n return null;\n }\n\n // Default aria-label based on variant\n const defaultAriaLabel =\n variant === \"full\"\n ? \"Xsolla logo\"\n : variant === \"text\"\n ? \"Xsolla text\"\n : \"Xsolla icon\";\n const label = accessibilityLabel || ariaLabel || defaultAriaLabel;\n\n return (\n <View\n // @ts-expect-error - TODO: resolve type error\n style={[{ width, height }, style]}\n accessible={!ariaHidden}\n accessibilityRole=\"image\"\n accessibilityLabel={ariaHidden ? undefined : label}\n >\n <SvgXml xml={svgContent} width=\"100%\" height=\"100%\" />\n </View>\n );\n};\n","import type { CSSProperties } from \"react\";\n\n/**\n * Logo variant - full logo with icon and text, text only, or just the icon\n */\nexport type LogoVariant = \"full\" | \"text\" | \"icon\";\n\n/**\n * Logo color variants matching brand guidelines\n */\nexport type LogoColor = \"black\" | \"brand\" | \"white\";\n\n/**\n * Logo size presets\n * - xs: 18px height\n * - sm: 24px height (default)\n * - md: 32px height\n */\nexport type LogoSize = \"xs\" | \"sm\" | \"md\";\n\n/**\n * Size values in pixels for each preset\n */\nexport const LOGO_SIZES: Record<LogoSize, number> = {\n xs: 18,\n sm: 24,\n md: 32,\n};\n\n/**\n * Brand colors in hex values\n */\nexport const LOGO_COLORS: Record<LogoColor, string> = {\n black: \"#000000\",\n brand: \"#80EAFF\",\n white: \"#FFFFFF\",\n};\n\n/**\n * Props for the XsollaLogo component\n */\nexport interface XsollaLogoProps {\n /**\n * Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon\n * @default 'full'\n */\n variant?: LogoVariant;\n\n /**\n * Logo color\n * @default 'brand'\n */\n color?: LogoColor;\n\n /**\n * Logo size - preset name or custom pixel height\n * @default 'sm' (24px)\n */\n size?: LogoSize | number;\n\n /**\n * Additional CSS class name\n */\n className?: string;\n\n /**\n * Additional inline styles\n */\n style?: CSSProperties;\n\n /**\n * Test ID for testing purposes\n */\n \"data-testid\"?: string;\n\n /**\n * Accessible label for screen readers\n */\n \"aria-label\"?: string;\n\n /**\n * Whether to hide from screen readers\n */\n \"aria-hidden\"?: boolean;\n\n /**\n * React Native accessibility label\n */\n accessibilityLabel?: string;\n}\n\n/**\n * Internal props passed to the logo component including SVG content\n */\nexport interface XsollaLogoInternalProps extends XsollaLogoProps {\n /**\n * SVG content for full logo variants (keyed by color)\n */\n fullContent: Record<LogoColor, string>;\n\n /**\n * SVG content for text-only variants (keyed by color)\n */\n textContent: Record<LogoColor, string>;\n\n /**\n * SVG content for icon-only variants (keyed by color)\n */\n iconContent: Record<LogoColor, string>;\n}\n","// Auto-generated - do not edit manually\nimport React from \"react\";\nimport { XsollaLogo as XsollaLogoBase } from \"./XsollaLogo\";\nimport type {\n XsollaLogoProps,\n LogoVariant,\n LogoColor,\n LogoSize,\n} from \"./types\";\nexport { LOGO_SIZES, LOGO_COLORS } from \"./types\";\nexport type { XsollaLogoProps, LogoVariant, LogoColor, LogoSize };\n\n// Full logo SVG content by color\nconst fullContent = {\n black: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Black, Size=M [32], Icon=Left\"><g id=\"Vector\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"black\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"black\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"black\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"black\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"black\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"black\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"black\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"black\"/></g></g></svg>`,\n brand: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"#80EAFF\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"#80EAFF\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"#80EAFF\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"#80EAFF\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"#80EAFF\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"#80EAFF\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"#80EAFF\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"#80EAFF\"/></svg>`,\n white: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"white\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"white\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"white\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"white\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"white\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"white\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"white\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"white\"/></svg>`,\n};\n\n// Text logo SVG content by color\nconst textContent = {\n black: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/></g></svg>`,\n brand: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/></g></svg>`,\n white: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/></g></svg>`,\n};\n\n// Icon SVG content by color\nconst iconContent = {\n black: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"black\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"black\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"black\"/></svg>`,\n brand: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Blue, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"#80EAFF\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"#80EAFF\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"#80EAFF\"/></g></g></svg>`,\n white: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=White, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"white\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"white\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"white\"/></g></g></svg>`,\n};\n\n/**\n * Xsolla brand logo component\n *\n * @example\n * // Full logo in brand color (default)\n * <Xsolla />\n *\n * @example\n * // Text only\n * <Xsolla variant=\"text\" />\n *\n * @example\n * // Icon only\n * <Xsolla variant=\"icon\" />\n *\n * @example\n * // Black color, medium size\n * <Xsolla color=\"black\" size=\"md\" />\n */\nexport const Xsolla: React.FC<XsollaLogoProps> = (props) => (\n <XsollaLogoBase\n {...props}\n fullContent={fullContent}\n textContent={textContent}\n iconContent={iconContent}\n />\n);\n\n// Default export for convenience\nexport default Xsolla;\n"],"mappings":";AACA,SAAS,YAAY;AACrB,SAAS,cAAc;;;ACqBhB,IAAM,aAAuC;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,IAAM,cAAyC;AAAA,EACpD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;;;ADoDM;AA9EN,IAAM,yBAAyB,MAAM;AAGrC,IAAM,yBAAyB,MAAM;AAGrC,IAAM,oBAAoB;AAEnB,IAAM,aAAgD,CAAC;AAAA,EAC5D,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAAA;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf;AACF,MAAM;AAEJ,QAAM,SAAS,OAAO,SAAS,WAAW,OAAO,WAAW,IAAgB;AAG5E,QAAM,cACJ,YAAY,SACR,yBACA,YAAY,SACV,yBACA;AACR,QAAM,QAAQ,KAAK,MAAM,SAAS,WAAW;AAG7C,QAAM,UACJ,YAAY,SACRF,eACA,YAAY,SACVC,eACAC;AACR,MAAI,aAAa,QAAQ,KAAK;AAG9B,MAAI,CAAC,cAAc,UAAU,SAAS;AACpC,iBAAa,QAAQ;AACrB,QAAI,OAAO,YAAY,eAAe,QAAQ,MAAM;AAClD,cAAQ;AAAA,QACN,gDAAgD,OAAO,YAAY,KAAK;AAAA,MAC1E;AAAA,IACF;AAAA,EACF;AAGA,MAAI,CAAC,YAAY;AACf,QAAI,OAAO,YAAY,eAAe,QAAQ,OAAO;AACnD,cAAQ;AAAA,QACN,gDAAgD,OAAO,YAAY,KAAK;AAAA,MAC1E;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAGA,QAAM,mBACJ,YAAY,SACR,gBACA,YAAY,SACV,gBACA;AACR,QAAM,QAAQ,sBAAsB,aAAa;AAEjD,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,CAAC,EAAE,OAAO,OAAO,GAAG,KAAK;AAAA,MAChC,YAAY,CAAC;AAAA,MACb,mBAAkB;AAAA,MAClB,oBAAoB,aAAa,SAAY;AAAA,MAE7C,8BAAC,UAAO,KAAK,YAAY,OAAM,QAAO,QAAO,QAAO;AAAA;AAAA,EACtD;AAEJ;;;AEtCE,gBAAAC,YAAA;AAxCF,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAqBO,IAAM,SAAoC,CAAC,UAChD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA;AACF;AAIF,IAAO,gBAAQ;","names":["fullContent","textContent","iconContent","jsx"]}
|
package/package.json
CHANGED
package/web/index.d.mts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Logo variant - full logo with text or just the icon
|
|
4
|
+
* Logo variant - full logo with icon and text, text only, or just the icon
|
|
5
5
|
*/
|
|
6
|
-
type LogoVariant = "full" | "icon";
|
|
6
|
+
type LogoVariant = "full" | "text" | "icon";
|
|
7
7
|
/**
|
|
8
8
|
* Logo color variants matching brand guidelines
|
|
9
9
|
*/
|
|
@@ -28,7 +28,7 @@ declare const LOGO_COLORS: Record<LogoColor, string>;
|
|
|
28
28
|
*/
|
|
29
29
|
interface XsollaLogoProps {
|
|
30
30
|
/**
|
|
31
|
-
* Logo variant - 'full' shows icon + text, 'icon' shows only the icon
|
|
31
|
+
* Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon
|
|
32
32
|
* @default 'full'
|
|
33
33
|
*/
|
|
34
34
|
variant?: LogoVariant;
|
|
@@ -76,6 +76,10 @@ interface XsollaLogoProps {
|
|
|
76
76
|
* <Xsolla />
|
|
77
77
|
*
|
|
78
78
|
* @example
|
|
79
|
+
* // Text only
|
|
80
|
+
* <Xsolla variant="text" />
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
79
83
|
* // Icon only
|
|
80
84
|
* <Xsolla variant="icon" />
|
|
81
85
|
*
|
package/web/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Logo variant - full logo with text or just the icon
|
|
4
|
+
* Logo variant - full logo with icon and text, text only, or just the icon
|
|
5
5
|
*/
|
|
6
|
-
type LogoVariant = "full" | "icon";
|
|
6
|
+
type LogoVariant = "full" | "text" | "icon";
|
|
7
7
|
/**
|
|
8
8
|
* Logo color variants matching brand guidelines
|
|
9
9
|
*/
|
|
@@ -28,7 +28,7 @@ declare const LOGO_COLORS: Record<LogoColor, string>;
|
|
|
28
28
|
*/
|
|
29
29
|
interface XsollaLogoProps {
|
|
30
30
|
/**
|
|
31
|
-
* Logo variant - 'full' shows icon + text, 'icon' shows only the icon
|
|
31
|
+
* Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon
|
|
32
32
|
* @default 'full'
|
|
33
33
|
*/
|
|
34
34
|
variant?: LogoVariant;
|
|
@@ -76,6 +76,10 @@ interface XsollaLogoProps {
|
|
|
76
76
|
* <Xsolla />
|
|
77
77
|
*
|
|
78
78
|
* @example
|
|
79
|
+
* // Text only
|
|
80
|
+
* <Xsolla variant="text" />
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
79
83
|
* // Icon only
|
|
80
84
|
* <Xsolla variant="icon" />
|
|
81
85
|
*
|
package/web/index.js
CHANGED
|
@@ -67,12 +67,14 @@ var StyledLogo = import_styled_components.default.div`
|
|
|
67
67
|
}
|
|
68
68
|
`;
|
|
69
69
|
var FULL_LOGO_ASPECT_RATIO = 116 / 24;
|
|
70
|
+
var TEXT_LOGO_ASPECT_RATIO = 119 / 26;
|
|
70
71
|
var ICON_ASPECT_RATIO = 1;
|
|
71
72
|
var XsollaLogo = ({
|
|
72
73
|
variant = "full",
|
|
73
74
|
color = "brand",
|
|
74
75
|
size = "sm",
|
|
75
76
|
fullContent: fullContent2,
|
|
77
|
+
textContent: textContent2,
|
|
76
78
|
iconContent: iconContent2,
|
|
77
79
|
className,
|
|
78
80
|
style,
|
|
@@ -81,11 +83,27 @@ var XsollaLogo = ({
|
|
|
81
83
|
"aria-hidden": ariaHidden
|
|
82
84
|
}) => {
|
|
83
85
|
const height = typeof size === "number" ? size : LOGO_SIZES[size];
|
|
84
|
-
const aspectRatio = variant === "full" ? FULL_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;
|
|
86
|
+
const aspectRatio = variant === "full" ? FULL_LOGO_ASPECT_RATIO : variant === "text" ? TEXT_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;
|
|
85
87
|
const width = Math.round(height * aspectRatio);
|
|
86
|
-
const content = variant === "full" ? fullContent2 : iconContent2;
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
const content = variant === "full" ? fullContent2 : variant === "text" ? textContent2 : iconContent2;
|
|
89
|
+
let svgContent = content[color];
|
|
90
|
+
if (!svgContent && color !== "brand") {
|
|
91
|
+
svgContent = content.brand;
|
|
92
|
+
if (typeof console !== "undefined" && console.warn) {
|
|
93
|
+
console.warn(
|
|
94
|
+
`XsollaLogo: missing SVG content for variant='${variant}' color='${color}', falling back to brand color`
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
if (!svgContent) {
|
|
99
|
+
if (typeof console !== "undefined" && console.error) {
|
|
100
|
+
console.error(
|
|
101
|
+
`XsollaLogo: missing SVG content for variant='${variant}' color='${color}'`
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
return null;
|
|
105
|
+
}
|
|
106
|
+
const defaultAriaLabel = variant === "full" ? "Xsolla logo" : variant === "text" ? "Xsolla text" : "Xsolla icon";
|
|
89
107
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
108
|
StyledLogo,
|
|
91
109
|
{
|
|
@@ -109,6 +127,11 @@ var fullContent = {
|
|
|
109
127
|
brand: `<svg viewBox="0 0 155 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z" fill="#80EAFF"/><path d="M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z" fill="#80EAFF"/><path d="M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z" fill="#80EAFF"/><path d="M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z" fill="#80EAFF"/><path d="M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z" fill="#80EAFF"/><path d="M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z" fill="#80EAFF"/><path d="M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z" fill="#80EAFF"/><path d="M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z" fill="#80EAFF"/></svg>`,
|
|
110
128
|
white: `<svg viewBox="0 0 155 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z" fill="white"/><path d="M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z" fill="white"/><path d="M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z" fill="white"/><path d="M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z" fill="white"/><path d="M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z" fill="white"/><path d="M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z" fill="white"/><path d="M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z" fill="white"/><path d="M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z" fill="white"/></svg>`
|
|
111
129
|
};
|
|
130
|
+
var textContent = {
|
|
131
|
+
black: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="black" style="fill:black;fill-opacity:1;"/></g></svg>`,
|
|
132
|
+
brand: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/></g></svg>`,
|
|
133
|
+
white: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="white" style="fill:white;fill-opacity:1;"/></g></svg>`
|
|
134
|
+
};
|
|
112
135
|
var iconContent = {
|
|
113
136
|
black: `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z" fill="black"/><path d="M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z" fill="black"/><path d="M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z" fill="black"/></svg>`,
|
|
114
137
|
brand: `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Colour=Blue, Size=M [32], Icon=None"><g id="Vector"><path d="M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z" fill="#80EAFF"/><path d="M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z" fill="#80EAFF"/><path d="M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z" fill="#80EAFF"/></g></g></svg>`,
|
|
@@ -119,6 +142,7 @@ var Xsolla = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
|
119
142
|
{
|
|
120
143
|
...props,
|
|
121
144
|
fullContent,
|
|
145
|
+
textContent,
|
|
122
146
|
iconContent
|
|
123
147
|
}
|
|
124
148
|
);
|
package/web/index.js.flow
CHANGED
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
import React, { CSSProperties } from "react";
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
|
-
* Logo variant - full logo with text or just the icon
|
|
11
|
+
* Logo variant - full logo with icon and text, text only, or just the icon
|
|
12
12
|
*/
|
|
13
|
-
declare type LogoVariant = "full" | "icon";
|
|
13
|
+
declare type LogoVariant = "full" | "text" | "icon";
|
|
14
14
|
/**
|
|
15
15
|
* Logo color variants matching brand guidelines
|
|
16
16
|
*/
|
|
@@ -35,7 +35,7 @@ declare var LOGO_COLORS: { [key: LogoColor]: string, ... };
|
|
|
35
35
|
*/
|
|
36
36
|
declare interface XsollaLogoProps {
|
|
37
37
|
/**
|
|
38
|
-
* Logo variant - 'full' shows icon + text, 'icon' shows only the icon
|
|
38
|
+
* Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon
|
|
39
39
|
* @default 'full'
|
|
40
40
|
*/
|
|
41
41
|
variant?: LogoVariant;
|
|
@@ -86,6 +86,8 @@ declare interface XsollaLogoProps {
|
|
|
86
86
|
* Xsolla brand logo component
|
|
87
87
|
* @example // Full logo in brand color (default)
|
|
88
88
|
* <Xsolla />
|
|
89
|
+
* @example // Text only
|
|
90
|
+
* <Xsolla variant="text" />
|
|
89
91
|
* @example // Icon only
|
|
90
92
|
* <Xsolla variant="icon" />
|
|
91
93
|
* @example // Black color, medium size
|
package/web/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/XsollaLogo.tsx","../../src/types.ts"],"sourcesContent":["// Auto-generated - do not edit manually\nimport React from \"react\";\nimport { XsollaLogo as XsollaLogoBase } from \"./XsollaLogo\";\nimport type {\n XsollaLogoProps,\n LogoVariant,\n LogoColor,\n LogoSize,\n} from \"./types\";\nexport { LOGO_SIZES, LOGO_COLORS } from \"./types\";\nexport type { XsollaLogoProps, LogoVariant, LogoColor, LogoSize };\n\n// Full logo SVG content by color\nconst fullContent = {\n black: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Black, Size=M [32], Icon=Left\"><g id=\"Vector\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"black\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"black\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"black\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"black\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"black\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"black\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"black\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"black\"/></g></g></svg>`,\n brand: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"#80EAFF\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"#80EAFF\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"#80EAFF\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"#80EAFF\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"#80EAFF\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"#80EAFF\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"#80EAFF\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"#80EAFF\"/></svg>`,\n white: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"white\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"white\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"white\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"white\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"white\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"white\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"white\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"white\"/></svg>`,\n};\n\n// Icon SVG content by color\nconst iconContent = {\n black: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"black\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"black\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"black\"/></svg>`,\n brand: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Blue, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"#80EAFF\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"#80EAFF\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"#80EAFF\"/></g></g></svg>`,\n white: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=White, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"white\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"white\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"white\"/></g></g></svg>`,\n};\n\n/**\n * Xsolla brand logo component\n *\n * @example\n * // Full logo in brand color (default)\n * <Xsolla />\n *\n * @example\n * // Icon only\n * <Xsolla variant=\"icon\" />\n *\n * @example\n * // Black color, medium size\n * <Xsolla color=\"black\" size=\"md\" />\n */\nexport const Xsolla: React.FC<XsollaLogoProps> = (props) => (\n <XsollaLogoBase\n {...props}\n fullContent={fullContent}\n iconContent={iconContent}\n />\n);\n\n// Default export for convenience\nexport default Xsolla;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport {\n LOGO_SIZES,\n type XsollaLogoInternalProps,\n type LogoSize,\n} from \"./types\";\n\nconst StyledLogo = styled.div<{ $height: number; $width: number }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ${(props) => props.$height}px;\n width: ${(props) => props.$width}px;\n\n svg {\n width: 100%;\n height: 100%;\n }\n`;\n\n// Full logo aspect ratio (approximately 4.84:1 based on Figma - 116x24)\nconst FULL_LOGO_ASPECT_RATIO = 116 / 24;\n\n// Icon aspect ratio (1:1)\nconst ICON_ASPECT_RATIO = 1;\n\nexport const XsollaLogo: React.FC<XsollaLogoInternalProps> = ({\n variant = \"full\",\n color = \"brand\",\n size = \"sm\",\n fullContent,\n iconContent,\n className,\n style,\n \"data-testid\": testId,\n \"aria-label\": ariaLabel,\n \"aria-hidden\": ariaHidden,\n}) => {\n // Resolve size to pixels\n const height = typeof size === \"number\" ? size : LOGO_SIZES[size as LogoSize];\n\n // Calculate width based on variant\n const aspectRatio =\n variant === \"full\" ? FULL_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;\n const width = Math.round(height * aspectRatio);\n\n // Get the appropriate SVG content\n const content = variant === \"full\" ? fullContent : iconContent;\n const svgContent = content[color];\n\n // Default aria-label based on variant\n const defaultAriaLabel = variant === \"full\" ? \"Xsolla logo\" : \"Xsolla icon\";\n\n return (\n <StyledLogo\n $height={height}\n $width={width}\n className={className}\n style={style}\n data-testid={testId}\n role={ariaLabel || !ariaHidden ? \"img\" : undefined}\n aria-label={ariaLabel || defaultAriaLabel}\n aria-hidden={ariaHidden}\n dangerouslySetInnerHTML={{ __html: svgContent }}\n />\n );\n};\n","import type { CSSProperties } from \"react\";\n\n/**\n * Logo variant - full logo with text or just the icon\n */\nexport type LogoVariant = \"full\" | \"icon\";\n\n/**\n * Logo color variants matching brand guidelines\n */\nexport type LogoColor = \"black\" | \"brand\" | \"white\";\n\n/**\n * Logo size presets\n * - xs: 18px height\n * - sm: 24px height (default)\n * - md: 32px height\n */\nexport type LogoSize = \"xs\" | \"sm\" | \"md\";\n\n/**\n * Size values in pixels for each preset\n */\nexport const LOGO_SIZES: Record<LogoSize, number> = {\n xs: 18,\n sm: 24,\n md: 32,\n};\n\n/**\n * Brand colors in hex values\n */\nexport const LOGO_COLORS: Record<LogoColor, string> = {\n black: \"#000000\",\n brand: \"#80EAFF\",\n white: \"#FFFFFF\",\n};\n\n/**\n * Props for the XsollaLogo component\n */\nexport interface XsollaLogoProps {\n /**\n * Logo variant - 'full' shows icon + text, 'icon' shows only the icon\n * @default 'full'\n */\n variant?: LogoVariant;\n\n /**\n * Logo color\n * @default 'brand'\n */\n color?: LogoColor;\n\n /**\n * Logo size - preset name or custom pixel height\n * @default 'sm' (24px)\n */\n size?: LogoSize | number;\n\n /**\n * Additional CSS class name\n */\n className?: string;\n\n /**\n * Additional inline styles\n */\n style?: CSSProperties;\n\n /**\n * Test ID for testing purposes\n */\n \"data-testid\"?: string;\n\n /**\n * Accessible label for screen readers\n */\n \"aria-label\"?: string;\n\n /**\n * Whether to hide from screen readers\n */\n \"aria-hidden\"?: boolean;\n\n /**\n * React Native accessibility label\n */\n accessibilityLabel?: string;\n}\n\n/**\n * Internal props passed to the logo component including SVG content\n */\nexport interface XsollaLogoInternalProps extends XsollaLogoProps {\n /**\n * SVG content for full logo variants (keyed by color)\n */\n fullContent: Record<LogoColor, string>;\n\n /**\n * SVG content for icon-only variants (keyed by color)\n */\n iconContent: Record<LogoColor, string>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,+BAAmB;;;ACsBZ,IAAM,aAAuC;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,IAAM,cAAyC;AAAA,EACpD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;;;ADmBI;AA/CJ,IAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,YAId,CAAC,UAAU,MAAM,OAAO;AAAA,WACzB,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlC,IAAM,yBAAyB,MAAM;AAGrC,IAAM,oBAAoB;AAEnB,IAAM,aAAgD,CAAC;AAAA,EAC5D,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd,eAAe;AACjB,MAAM;AAEJ,QAAM,SAAS,OAAO,SAAS,WAAW,OAAO,WAAW,IAAgB;AAG5E,QAAM,cACJ,YAAY,SAAS,yBAAyB;AAChD,QAAM,QAAQ,KAAK,MAAM,SAAS,WAAW;AAG7C,QAAM,UAAU,YAAY,SAASD,eAAcC;AACnD,QAAM,aAAa,QAAQ,KAAK;AAGhC,QAAM,mBAAmB,YAAY,SAAS,gBAAgB;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,MAAM,aAAa,CAAC,aAAa,QAAQ;AAAA,MACzC,cAAY,aAAa;AAAA,MACzB,eAAa;AAAA,MACb,yBAAyB,EAAE,QAAQ,WAAW;AAAA;AAAA,EAChD;AAEJ;;;ADzBE,IAAAC,sBAAA;AA7BF,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAiBO,IAAM,SAAoC,CAAC,UAChD;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA;AACF;AAIF,IAAO,gBAAQ;","names":["styled","fullContent","iconContent","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/XsollaLogo.tsx","../../src/types.ts"],"sourcesContent":["// Auto-generated - do not edit manually\nimport React from \"react\";\nimport { XsollaLogo as XsollaLogoBase } from \"./XsollaLogo\";\nimport type {\n XsollaLogoProps,\n LogoVariant,\n LogoColor,\n LogoSize,\n} from \"./types\";\nexport { LOGO_SIZES, LOGO_COLORS } from \"./types\";\nexport type { XsollaLogoProps, LogoVariant, LogoColor, LogoSize };\n\n// Full logo SVG content by color\nconst fullContent = {\n black: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Black, Size=M [32], Icon=Left\"><g id=\"Vector\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"black\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"black\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"black\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"black\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"black\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"black\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"black\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"black\"/></g></g></svg>`,\n brand: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"#80EAFF\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"#80EAFF\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"#80EAFF\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"#80EAFF\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"#80EAFF\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"#80EAFF\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"#80EAFF\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"#80EAFF\"/></svg>`,\n white: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"white\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"white\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"white\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"white\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"white\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"white\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"white\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"white\"/></svg>`,\n};\n\n// Text logo SVG content by color\nconst textContent = {\n black: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/></g></svg>`,\n brand: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/></g></svg>`,\n white: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/></g></svg>`,\n};\n\n// Icon SVG content by color\nconst iconContent = {\n black: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"black\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"black\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"black\"/></svg>`,\n brand: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Blue, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"#80EAFF\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"#80EAFF\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"#80EAFF\"/></g></g></svg>`,\n white: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=White, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"white\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"white\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"white\"/></g></g></svg>`,\n};\n\n/**\n * Xsolla brand logo component\n *\n * @example\n * // Full logo in brand color (default)\n * <Xsolla />\n *\n * @example\n * // Text only\n * <Xsolla variant=\"text\" />\n *\n * @example\n * // Icon only\n * <Xsolla variant=\"icon\" />\n *\n * @example\n * // Black color, medium size\n * <Xsolla color=\"black\" size=\"md\" />\n */\nexport const Xsolla: React.FC<XsollaLogoProps> = (props) => (\n <XsollaLogoBase\n {...props}\n fullContent={fullContent}\n textContent={textContent}\n iconContent={iconContent}\n />\n);\n\n// Default export for convenience\nexport default Xsolla;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport {\n LOGO_SIZES,\n type XsollaLogoInternalProps,\n type LogoSize,\n} from \"./types\";\n\nconst StyledLogo = styled.div<{ $height: number; $width: number }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ${(props) => props.$height}px;\n width: ${(props) => props.$width}px;\n\n svg {\n width: 100%;\n height: 100%;\n }\n`;\n\n// Full logo aspect ratio (approximately 4.84:1 based on Figma - 116x24)\nconst FULL_LOGO_ASPECT_RATIO = 116 / 24;\n\n// Text logo aspect ratio (approximately 4.58:1 based on viewBox - 119x26)\nconst TEXT_LOGO_ASPECT_RATIO = 119 / 26;\n\n// Icon aspect ratio (1:1)\nconst ICON_ASPECT_RATIO = 1;\n\nexport const XsollaLogo: React.FC<XsollaLogoInternalProps> = ({\n variant = \"full\",\n color = \"brand\",\n size = \"sm\",\n fullContent,\n textContent,\n iconContent,\n className,\n style,\n \"data-testid\": testId,\n \"aria-label\": ariaLabel,\n \"aria-hidden\": ariaHidden,\n}) => {\n // Resolve size to pixels\n const height = typeof size === \"number\" ? size : LOGO_SIZES[size as LogoSize];\n\n // Calculate width based on variant\n const aspectRatio =\n variant === \"full\"\n ? FULL_LOGO_ASPECT_RATIO\n : variant === \"text\"\n ? TEXT_LOGO_ASPECT_RATIO\n : ICON_ASPECT_RATIO;\n const width = Math.round(height * aspectRatio);\n\n // Get the appropriate SVG content\n const content =\n variant === \"full\"\n ? fullContent\n : variant === \"text\"\n ? textContent\n : iconContent;\n let svgContent = content[color];\n\n // Fallback to brand color if requested color is missing\n if (!svgContent && color !== \"brand\") {\n svgContent = content.brand;\n if (typeof console !== \"undefined\" && console.warn) {\n console.warn(\n `XsollaLogo: missing SVG content for variant='${variant}' color='${color}', falling back to brand color`\n );\n }\n }\n\n // If still no content, return null\n if (!svgContent) {\n if (typeof console !== \"undefined\" && console.error) {\n console.error(\n `XsollaLogo: missing SVG content for variant='${variant}' color='${color}'`\n );\n }\n return null;\n }\n\n // Default aria-label based on variant\n const defaultAriaLabel =\n variant === \"full\"\n ? \"Xsolla logo\"\n : variant === \"text\"\n ? \"Xsolla text\"\n : \"Xsolla icon\";\n\n return (\n <StyledLogo\n $height={height}\n $width={width}\n className={className}\n style={style}\n data-testid={testId}\n role={ariaLabel || !ariaHidden ? \"img\" : undefined}\n aria-label={ariaLabel || defaultAriaLabel}\n aria-hidden={ariaHidden}\n dangerouslySetInnerHTML={{ __html: svgContent }}\n />\n );\n};\n","import type { CSSProperties } from \"react\";\n\n/**\n * Logo variant - full logo with icon and text, text only, or just the icon\n */\nexport type LogoVariant = \"full\" | \"text\" | \"icon\";\n\n/**\n * Logo color variants matching brand guidelines\n */\nexport type LogoColor = \"black\" | \"brand\" | \"white\";\n\n/**\n * Logo size presets\n * - xs: 18px height\n * - sm: 24px height (default)\n * - md: 32px height\n */\nexport type LogoSize = \"xs\" | \"sm\" | \"md\";\n\n/**\n * Size values in pixels for each preset\n */\nexport const LOGO_SIZES: Record<LogoSize, number> = {\n xs: 18,\n sm: 24,\n md: 32,\n};\n\n/**\n * Brand colors in hex values\n */\nexport const LOGO_COLORS: Record<LogoColor, string> = {\n black: \"#000000\",\n brand: \"#80EAFF\",\n white: \"#FFFFFF\",\n};\n\n/**\n * Props for the XsollaLogo component\n */\nexport interface XsollaLogoProps {\n /**\n * Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon\n * @default 'full'\n */\n variant?: LogoVariant;\n\n /**\n * Logo color\n * @default 'brand'\n */\n color?: LogoColor;\n\n /**\n * Logo size - preset name or custom pixel height\n * @default 'sm' (24px)\n */\n size?: LogoSize | number;\n\n /**\n * Additional CSS class name\n */\n className?: string;\n\n /**\n * Additional inline styles\n */\n style?: CSSProperties;\n\n /**\n * Test ID for testing purposes\n */\n \"data-testid\"?: string;\n\n /**\n * Accessible label for screen readers\n */\n \"aria-label\"?: string;\n\n /**\n * Whether to hide from screen readers\n */\n \"aria-hidden\"?: boolean;\n\n /**\n * React Native accessibility label\n */\n accessibilityLabel?: string;\n}\n\n/**\n * Internal props passed to the logo component including SVG content\n */\nexport interface XsollaLogoInternalProps extends XsollaLogoProps {\n /**\n * SVG content for full logo variants (keyed by color)\n */\n fullContent: Record<LogoColor, string>;\n\n /**\n * SVG content for text-only variants (keyed by color)\n */\n textContent: Record<LogoColor, string>;\n\n /**\n * SVG content for icon-only variants (keyed by color)\n */\n iconContent: Record<LogoColor, string>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,+BAAmB;;;ACsBZ,IAAM,aAAuC;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,IAAM,cAAyC;AAAA,EACpD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;;;ADyDI;AArFJ,IAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,YAId,CAAC,UAAU,MAAM,OAAO;AAAA,WACzB,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlC,IAAM,yBAAyB,MAAM;AAGrC,IAAM,yBAAyB,MAAM;AAGrC,IAAM,oBAAoB;AAEnB,IAAM,aAAgD,CAAC;AAAA,EAC5D,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd,eAAe;AACjB,MAAM;AAEJ,QAAM,SAAS,OAAO,SAAS,WAAW,OAAO,WAAW,IAAgB;AAG5E,QAAM,cACJ,YAAY,SACR,yBACA,YAAY,SACV,yBACA;AACR,QAAM,QAAQ,KAAK,MAAM,SAAS,WAAW;AAG7C,QAAM,UACJ,YAAY,SACRF,eACA,YAAY,SACVC,eACAC;AACR,MAAI,aAAa,QAAQ,KAAK;AAG9B,MAAI,CAAC,cAAc,UAAU,SAAS;AACpC,iBAAa,QAAQ;AACrB,QAAI,OAAO,YAAY,eAAe,QAAQ,MAAM;AAClD,cAAQ;AAAA,QACN,gDAAgD,OAAO,YAAY,KAAK;AAAA,MAC1E;AAAA,IACF;AAAA,EACF;AAGA,MAAI,CAAC,YAAY;AACf,QAAI,OAAO,YAAY,eAAe,QAAQ,OAAO;AACnD,cAAQ;AAAA,QACN,gDAAgD,OAAO,YAAY,KAAK;AAAA,MAC1E;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAGA,QAAM,mBACJ,YAAY,SACR,gBACA,YAAY,SACV,gBACA;AAER,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,MAAM,aAAa,CAAC,aAAa,QAAQ;AAAA,MACzC,cAAY,aAAa;AAAA,MACzB,eAAa;AAAA,MACb,yBAAyB,EAAE,QAAQ,WAAW;AAAA;AAAA,EAChD;AAEJ;;;ADpDE,IAAAC,sBAAA;AAxCF,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAqBO,IAAM,SAAoC,CAAC,UAChD;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA;AACF;AAIF,IAAO,gBAAQ;","names":["styled","fullContent","textContent","iconContent","import_jsx_runtime"]}
|
package/web/index.mjs
CHANGED
|
@@ -28,12 +28,14 @@ var StyledLogo = styled.div`
|
|
|
28
28
|
}
|
|
29
29
|
`;
|
|
30
30
|
var FULL_LOGO_ASPECT_RATIO = 116 / 24;
|
|
31
|
+
var TEXT_LOGO_ASPECT_RATIO = 119 / 26;
|
|
31
32
|
var ICON_ASPECT_RATIO = 1;
|
|
32
33
|
var XsollaLogo = ({
|
|
33
34
|
variant = "full",
|
|
34
35
|
color = "brand",
|
|
35
36
|
size = "sm",
|
|
36
37
|
fullContent: fullContent2,
|
|
38
|
+
textContent: textContent2,
|
|
37
39
|
iconContent: iconContent2,
|
|
38
40
|
className,
|
|
39
41
|
style,
|
|
@@ -42,11 +44,27 @@ var XsollaLogo = ({
|
|
|
42
44
|
"aria-hidden": ariaHidden
|
|
43
45
|
}) => {
|
|
44
46
|
const height = typeof size === "number" ? size : LOGO_SIZES[size];
|
|
45
|
-
const aspectRatio = variant === "full" ? FULL_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;
|
|
47
|
+
const aspectRatio = variant === "full" ? FULL_LOGO_ASPECT_RATIO : variant === "text" ? TEXT_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;
|
|
46
48
|
const width = Math.round(height * aspectRatio);
|
|
47
|
-
const content = variant === "full" ? fullContent2 : iconContent2;
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
const content = variant === "full" ? fullContent2 : variant === "text" ? textContent2 : iconContent2;
|
|
50
|
+
let svgContent = content[color];
|
|
51
|
+
if (!svgContent && color !== "brand") {
|
|
52
|
+
svgContent = content.brand;
|
|
53
|
+
if (typeof console !== "undefined" && console.warn) {
|
|
54
|
+
console.warn(
|
|
55
|
+
`XsollaLogo: missing SVG content for variant='${variant}' color='${color}', falling back to brand color`
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
if (!svgContent) {
|
|
60
|
+
if (typeof console !== "undefined" && console.error) {
|
|
61
|
+
console.error(
|
|
62
|
+
`XsollaLogo: missing SVG content for variant='${variant}' color='${color}'`
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
return null;
|
|
66
|
+
}
|
|
67
|
+
const defaultAriaLabel = variant === "full" ? "Xsolla logo" : variant === "text" ? "Xsolla text" : "Xsolla icon";
|
|
50
68
|
return /* @__PURE__ */ jsx(
|
|
51
69
|
StyledLogo,
|
|
52
70
|
{
|
|
@@ -70,6 +88,11 @@ var fullContent = {
|
|
|
70
88
|
brand: `<svg viewBox="0 0 155 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z" fill="#80EAFF"/><path d="M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z" fill="#80EAFF"/><path d="M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z" fill="#80EAFF"/><path d="M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z" fill="#80EAFF"/><path d="M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z" fill="#80EAFF"/><path d="M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z" fill="#80EAFF"/><path d="M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z" fill="#80EAFF"/><path d="M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z" fill="#80EAFF"/></svg>`,
|
|
71
89
|
white: `<svg viewBox="0 0 155 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z" fill="white"/><path d="M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z" fill="white"/><path d="M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z" fill="white"/><path d="M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z" fill="white"/><path d="M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z" fill="white"/><path d="M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z" fill="white"/><path d="M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z" fill="white"/><path d="M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z" fill="white"/></svg>`
|
|
72
90
|
};
|
|
91
|
+
var textContent = {
|
|
92
|
+
black: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="black" style="fill:black;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="black" style="fill:black;fill-opacity:1;"/></g></svg>`,
|
|
93
|
+
brand: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="#80EAFF" style="fill:#80EAFF;fill-opacity:1;"/></g></svg>`,
|
|
94
|
+
white: `<svg viewBox="0 0 119 26" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Vector"><path d="M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z" fill="white" style="fill:white;fill-opacity:1;"/><path d="M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z" fill="white" style="fill:white;fill-opacity:1;"/></g></svg>`
|
|
95
|
+
};
|
|
73
96
|
var iconContent = {
|
|
74
97
|
black: `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><path d="M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z" fill="black"/><path d="M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z" fill="black"/><path d="M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z" fill="black"/></svg>`,
|
|
75
98
|
brand: `<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><g id="Colour=Blue, Size=M [32], Icon=None"><g id="Vector"><path d="M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z" fill="#80EAFF"/><path d="M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z" fill="#80EAFF"/><path d="M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z" fill="#80EAFF"/></g></g></svg>`,
|
|
@@ -80,6 +103,7 @@ var Xsolla = (props) => /* @__PURE__ */ jsx2(
|
|
|
80
103
|
{
|
|
81
104
|
...props,
|
|
82
105
|
fullContent,
|
|
106
|
+
textContent,
|
|
83
107
|
iconContent
|
|
84
108
|
}
|
|
85
109
|
);
|
package/web/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/XsollaLogo.tsx","../../src/types.ts","../../src/index.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport {\n LOGO_SIZES,\n type XsollaLogoInternalProps,\n type LogoSize,\n} from \"./types\";\n\nconst StyledLogo = styled.div<{ $height: number; $width: number }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ${(props) => props.$height}px;\n width: ${(props) => props.$width}px;\n\n svg {\n width: 100%;\n height: 100%;\n }\n`;\n\n// Full logo aspect ratio (approximately 4.84:1 based on Figma - 116x24)\nconst FULL_LOGO_ASPECT_RATIO = 116 / 24;\n\n// Icon aspect ratio (1:1)\nconst ICON_ASPECT_RATIO = 1;\n\nexport const XsollaLogo: React.FC<XsollaLogoInternalProps> = ({\n variant = \"full\",\n color = \"brand\",\n size = \"sm\",\n fullContent,\n iconContent,\n className,\n style,\n \"data-testid\": testId,\n \"aria-label\": ariaLabel,\n \"aria-hidden\": ariaHidden,\n}) => {\n // Resolve size to pixels\n const height = typeof size === \"number\" ? size : LOGO_SIZES[size as LogoSize];\n\n // Calculate width based on variant\n const aspectRatio =\n variant === \"full\" ? FULL_LOGO_ASPECT_RATIO : ICON_ASPECT_RATIO;\n const width = Math.round(height * aspectRatio);\n\n // Get the appropriate SVG content\n const content = variant === \"full\" ? fullContent : iconContent;\n const svgContent = content[color];\n\n // Default aria-label based on variant\n const defaultAriaLabel = variant === \"full\" ? \"Xsolla logo\" : \"Xsolla icon\";\n\n return (\n <StyledLogo\n $height={height}\n $width={width}\n className={className}\n style={style}\n data-testid={testId}\n role={ariaLabel || !ariaHidden ? \"img\" : undefined}\n aria-label={ariaLabel || defaultAriaLabel}\n aria-hidden={ariaHidden}\n dangerouslySetInnerHTML={{ __html: svgContent }}\n />\n );\n};\n","import type { CSSProperties } from \"react\";\n\n/**\n * Logo variant - full logo with text or just the icon\n */\nexport type LogoVariant = \"full\" | \"icon\";\n\n/**\n * Logo color variants matching brand guidelines\n */\nexport type LogoColor = \"black\" | \"brand\" | \"white\";\n\n/**\n * Logo size presets\n * - xs: 18px height\n * - sm: 24px height (default)\n * - md: 32px height\n */\nexport type LogoSize = \"xs\" | \"sm\" | \"md\";\n\n/**\n * Size values in pixels for each preset\n */\nexport const LOGO_SIZES: Record<LogoSize, number> = {\n xs: 18,\n sm: 24,\n md: 32,\n};\n\n/**\n * Brand colors in hex values\n */\nexport const LOGO_COLORS: Record<LogoColor, string> = {\n black: \"#000000\",\n brand: \"#80EAFF\",\n white: \"#FFFFFF\",\n};\n\n/**\n * Props for the XsollaLogo component\n */\nexport interface XsollaLogoProps {\n /**\n * Logo variant - 'full' shows icon + text, 'icon' shows only the icon\n * @default 'full'\n */\n variant?: LogoVariant;\n\n /**\n * Logo color\n * @default 'brand'\n */\n color?: LogoColor;\n\n /**\n * Logo size - preset name or custom pixel height\n * @default 'sm' (24px)\n */\n size?: LogoSize | number;\n\n /**\n * Additional CSS class name\n */\n className?: string;\n\n /**\n * Additional inline styles\n */\n style?: CSSProperties;\n\n /**\n * Test ID for testing purposes\n */\n \"data-testid\"?: string;\n\n /**\n * Accessible label for screen readers\n */\n \"aria-label\"?: string;\n\n /**\n * Whether to hide from screen readers\n */\n \"aria-hidden\"?: boolean;\n\n /**\n * React Native accessibility label\n */\n accessibilityLabel?: string;\n}\n\n/**\n * Internal props passed to the logo component including SVG content\n */\nexport interface XsollaLogoInternalProps extends XsollaLogoProps {\n /**\n * SVG content for full logo variants (keyed by color)\n */\n fullContent: Record<LogoColor, string>;\n\n /**\n * SVG content for icon-only variants (keyed by color)\n */\n iconContent: Record<LogoColor, string>;\n}\n","// Auto-generated - do not edit manually\nimport React from \"react\";\nimport { XsollaLogo as XsollaLogoBase } from \"./XsollaLogo\";\nimport type {\n XsollaLogoProps,\n LogoVariant,\n LogoColor,\n LogoSize,\n} from \"./types\";\nexport { LOGO_SIZES, LOGO_COLORS } from \"./types\";\nexport type { XsollaLogoProps, LogoVariant, LogoColor, LogoSize };\n\n// Full logo SVG content by color\nconst fullContent = {\n black: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Black, Size=M [32], Icon=Left\"><g id=\"Vector\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"black\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"black\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"black\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"black\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"black\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"black\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"black\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"black\"/></g></g></svg>`,\n brand: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"#80EAFF\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"#80EAFF\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"#80EAFF\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"#80EAFF\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"#80EAFF\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"#80EAFF\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"#80EAFF\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"#80EAFF\"/></svg>`,\n white: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"white\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"white\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"white\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"white\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"white\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"white\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"white\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"white\"/></svg>`,\n};\n\n// Icon SVG content by color\nconst iconContent = {\n black: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"black\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"black\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"black\"/></svg>`,\n brand: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Blue, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"#80EAFF\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"#80EAFF\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"#80EAFF\"/></g></g></svg>`,\n white: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=White, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"white\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"white\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"white\"/></g></g></svg>`,\n};\n\n/**\n * Xsolla brand logo component\n *\n * @example\n * // Full logo in brand color (default)\n * <Xsolla />\n *\n * @example\n * // Icon only\n * <Xsolla variant=\"icon\" />\n *\n * @example\n * // Black color, medium size\n * <Xsolla color=\"black\" size=\"md\" />\n */\nexport const Xsolla: React.FC<XsollaLogoProps> = (props) => (\n <XsollaLogoBase\n {...props}\n fullContent={fullContent}\n iconContent={iconContent}\n />\n);\n\n// Default export for convenience\nexport default Xsolla;\n"],"mappings":";AACA,OAAO,YAAY;;;ACsBZ,IAAM,aAAuC;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,IAAM,cAAyC;AAAA,EACpD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;;;ADmBI;AA/CJ,IAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,YAId,CAAC,UAAU,MAAM,OAAO;AAAA,WACzB,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlC,IAAM,yBAAyB,MAAM;AAGrC,IAAM,oBAAoB;AAEnB,IAAM,aAAgD,CAAC;AAAA,EAC5D,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAAA;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd,eAAe;AACjB,MAAM;AAEJ,QAAM,SAAS,OAAO,SAAS,WAAW,OAAO,WAAW,IAAgB;AAG5E,QAAM,cACJ,YAAY,SAAS,yBAAyB;AAChD,QAAM,QAAQ,KAAK,MAAM,SAAS,WAAW;AAG7C,QAAM,UAAU,YAAY,SAASD,eAAcC;AACnD,QAAM,aAAa,QAAQ,KAAK;AAGhC,QAAM,mBAAmB,YAAY,SAAS,gBAAgB;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,MAAM,aAAa,CAAC,aAAa,QAAQ;AAAA,MACzC,cAAY,aAAa;AAAA,MACzB,eAAa;AAAA,MACb,yBAAyB,EAAE,QAAQ,WAAW;AAAA;AAAA,EAChD;AAEJ;;;AEzBE,gBAAAC,YAAA;AA7BF,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAiBO,IAAM,SAAoC,CAAC,UAChD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA;AACF;AAIF,IAAO,gBAAQ;","names":["fullContent","iconContent","jsx"]}
|
|
1
|
+
{"version":3,"sources":["../../src/XsollaLogo.tsx","../../src/types.ts","../../src/index.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport {\n LOGO_SIZES,\n type XsollaLogoInternalProps,\n type LogoSize,\n} from \"./types\";\n\nconst StyledLogo = styled.div<{ $height: number; $width: number }>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ${(props) => props.$height}px;\n width: ${(props) => props.$width}px;\n\n svg {\n width: 100%;\n height: 100%;\n }\n`;\n\n// Full logo aspect ratio (approximately 4.84:1 based on Figma - 116x24)\nconst FULL_LOGO_ASPECT_RATIO = 116 / 24;\n\n// Text logo aspect ratio (approximately 4.58:1 based on viewBox - 119x26)\nconst TEXT_LOGO_ASPECT_RATIO = 119 / 26;\n\n// Icon aspect ratio (1:1)\nconst ICON_ASPECT_RATIO = 1;\n\nexport const XsollaLogo: React.FC<XsollaLogoInternalProps> = ({\n variant = \"full\",\n color = \"brand\",\n size = \"sm\",\n fullContent,\n textContent,\n iconContent,\n className,\n style,\n \"data-testid\": testId,\n \"aria-label\": ariaLabel,\n \"aria-hidden\": ariaHidden,\n}) => {\n // Resolve size to pixels\n const height = typeof size === \"number\" ? size : LOGO_SIZES[size as LogoSize];\n\n // Calculate width based on variant\n const aspectRatio =\n variant === \"full\"\n ? FULL_LOGO_ASPECT_RATIO\n : variant === \"text\"\n ? TEXT_LOGO_ASPECT_RATIO\n : ICON_ASPECT_RATIO;\n const width = Math.round(height * aspectRatio);\n\n // Get the appropriate SVG content\n const content =\n variant === \"full\"\n ? fullContent\n : variant === \"text\"\n ? textContent\n : iconContent;\n let svgContent = content[color];\n\n // Fallback to brand color if requested color is missing\n if (!svgContent && color !== \"brand\") {\n svgContent = content.brand;\n if (typeof console !== \"undefined\" && console.warn) {\n console.warn(\n `XsollaLogo: missing SVG content for variant='${variant}' color='${color}', falling back to brand color`\n );\n }\n }\n\n // If still no content, return null\n if (!svgContent) {\n if (typeof console !== \"undefined\" && console.error) {\n console.error(\n `XsollaLogo: missing SVG content for variant='${variant}' color='${color}'`\n );\n }\n return null;\n }\n\n // Default aria-label based on variant\n const defaultAriaLabel =\n variant === \"full\"\n ? \"Xsolla logo\"\n : variant === \"text\"\n ? \"Xsolla text\"\n : \"Xsolla icon\";\n\n return (\n <StyledLogo\n $height={height}\n $width={width}\n className={className}\n style={style}\n data-testid={testId}\n role={ariaLabel || !ariaHidden ? \"img\" : undefined}\n aria-label={ariaLabel || defaultAriaLabel}\n aria-hidden={ariaHidden}\n dangerouslySetInnerHTML={{ __html: svgContent }}\n />\n );\n};\n","import type { CSSProperties } from \"react\";\n\n/**\n * Logo variant - full logo with icon and text, text only, or just the icon\n */\nexport type LogoVariant = \"full\" | \"text\" | \"icon\";\n\n/**\n * Logo color variants matching brand guidelines\n */\nexport type LogoColor = \"black\" | \"brand\" | \"white\";\n\n/**\n * Logo size presets\n * - xs: 18px height\n * - sm: 24px height (default)\n * - md: 32px height\n */\nexport type LogoSize = \"xs\" | \"sm\" | \"md\";\n\n/**\n * Size values in pixels for each preset\n */\nexport const LOGO_SIZES: Record<LogoSize, number> = {\n xs: 18,\n sm: 24,\n md: 32,\n};\n\n/**\n * Brand colors in hex values\n */\nexport const LOGO_COLORS: Record<LogoColor, string> = {\n black: \"#000000\",\n brand: \"#80EAFF\",\n white: \"#FFFFFF\",\n};\n\n/**\n * Props for the XsollaLogo component\n */\nexport interface XsollaLogoProps {\n /**\n * Logo variant - 'full' shows icon + text, 'text' shows text only, 'icon' shows only the icon\n * @default 'full'\n */\n variant?: LogoVariant;\n\n /**\n * Logo color\n * @default 'brand'\n */\n color?: LogoColor;\n\n /**\n * Logo size - preset name or custom pixel height\n * @default 'sm' (24px)\n */\n size?: LogoSize | number;\n\n /**\n * Additional CSS class name\n */\n className?: string;\n\n /**\n * Additional inline styles\n */\n style?: CSSProperties;\n\n /**\n * Test ID for testing purposes\n */\n \"data-testid\"?: string;\n\n /**\n * Accessible label for screen readers\n */\n \"aria-label\"?: string;\n\n /**\n * Whether to hide from screen readers\n */\n \"aria-hidden\"?: boolean;\n\n /**\n * React Native accessibility label\n */\n accessibilityLabel?: string;\n}\n\n/**\n * Internal props passed to the logo component including SVG content\n */\nexport interface XsollaLogoInternalProps extends XsollaLogoProps {\n /**\n * SVG content for full logo variants (keyed by color)\n */\n fullContent: Record<LogoColor, string>;\n\n /**\n * SVG content for text-only variants (keyed by color)\n */\n textContent: Record<LogoColor, string>;\n\n /**\n * SVG content for icon-only variants (keyed by color)\n */\n iconContent: Record<LogoColor, string>;\n}\n","// Auto-generated - do not edit manually\nimport React from \"react\";\nimport { XsollaLogo as XsollaLogoBase } from \"./XsollaLogo\";\nimport type {\n XsollaLogoProps,\n LogoVariant,\n LogoColor,\n LogoSize,\n} from \"./types\";\nexport { LOGO_SIZES, LOGO_COLORS } from \"./types\";\nexport type { XsollaLogoProps, LogoVariant, LogoColor, LogoSize };\n\n// Full logo SVG content by color\nconst fullContent = {\n black: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Black, Size=M [32], Icon=Left\"><g id=\"Vector\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"black\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"black\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"black\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"black\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"black\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"black\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"black\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"black\"/></g></g></svg>`,\n brand: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"#80EAFF\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"#80EAFF\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"#80EAFF\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"#80EAFF\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"#80EAFF\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"#80EAFF\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"#80EAFF\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"#80EAFF\"/></svg>`,\n white: `<svg viewBox=\"0 0 155 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M28.5308 8.91228C26.2721 8.35088 25.5663 7.75439 24.9311 5.78947C23.7276 2 21.2925 0 17.8693 0C14.446 0 12.0109 2 10.811 5.78947C10.1757 7.75439 9.46992 8.35088 7.21128 8.91228C3.36452 9.85965 1 12.4912 1 16C1 19.5088 3.36452 22.1404 7.21128 23.0877C9.46992 23.6491 10.1757 24.2456 10.811 26.2105C12.0109 30 14.446 32 17.8693 32C21.2925 32 23.7276 30 24.9275 26.2105C25.5628 24.2456 26.2686 23.6491 28.5273 23.0877C32.374 22.1404 34.7385 19.5088 34.7385 16C34.7385 12.4912 32.374 9.85965 28.5273 8.91228H28.5308ZM23.41 21.4035C21.0808 21.4035 19.0339 19.7193 18.5398 17.6491H17.2693C16.7399 19.6842 14.693 21.4035 12.3638 21.4035C9.5758 21.4035 7.31715 19.1228 7.31715 16.3509C7.31715 13.5789 9.5758 11.3333 12.3638 11.3333C14.6578 11.3333 16.7399 13.0175 17.2693 15.0526H18.5398C19.0692 12.9825 21.1161 11.3333 23.41 11.3333C26.198 11.3333 28.492 13.5789 28.492 16.3509C28.492 19.1228 26.198 21.4035 23.41 21.4035Z\" fill=\"white\"/><path d=\"M25.4572 14.351H21.3987V18.3861H25.4572V14.351Z\" fill=\"white\"/><path d=\"M14.4107 14.351H10.3522V18.3861H14.4107V14.351Z\" fill=\"white\"/><path d=\"M58.5461 3.71916H52.476L46.6847 11.5788L40.8299 3.71916H34.4774L43.5402 15.7858L34.0539 28.2806H40.1593L46.4765 19.7121L52.8642 28.2806H59.2519L49.6245 15.4981L58.5461 3.71916Z\" fill=\"white\"/><path d=\"M64.1361 10.7718L70.1003 3.71916H63.9596L60.7834 7.43846C59.7599 8.66653 59.2659 9.8946 59.2659 11.2279C59.2659 12.5613 59.7599 13.7542 60.7834 15.0174L65.6183 21.0525L59.9364 28.2806H66.2183L69.0063 24.7718C70.065 23.4385 70.5591 22.1753 70.5591 20.8069C70.5591 19.4385 70.065 18.1753 69.0063 16.842L64.1361 10.7718Z\" fill=\"white\"/><path d=\"M85.6001 3.15789C78.3654 3.15789 72.6835 8.80702 72.6835 16C72.6835 23.193 78.3654 28.8421 85.6001 28.8421C92.8348 28.8421 98.5168 23.193 98.5168 16C98.5168 8.80702 92.8348 3.15789 85.6001 3.15789ZM85.6001 23.9298C81.2593 23.9298 77.9772 20.5263 77.9772 16C77.9772 11.4737 81.2593 8.07018 85.6001 8.07018C89.9409 8.07018 93.223 11.4737 93.223 16C93.223 20.5263 89.9409 23.9298 85.6001 23.9298Z\" fill=\"white\"/><path d=\"M97.4019 3.71916L110.675 28.2806H116.886L103.617 3.71916H97.4019Z\" fill=\"white\"/><path d=\"M140.193 3.71916H136.487L126.376 23.1051L115.902 3.71916H109.69L122.96 28.2841H153L140.189 3.71916H140.193ZM131.561 23.7192L138.227 10.5297L144.883 23.7192H131.561Z\" fill=\"white\"/></svg>`,\n};\n\n// Text logo SVG content by color\nconst textContent = {\n black: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"black\" style=\"fill:black;fill-opacity:1;\"/></g></svg>`,\n brand: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"#80EAFF\" style=\"fill:#80EAFF;fill-opacity:1;\"/></g></svg>`,\n white: `<svg viewBox=\"0 0 119 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Vector\"><path d=\"M24.4922 0.561266H18.4221L12.6308 8.42092L6.77594 0.561266H0.423492L9.48631 12.6279L0 25.1227H6.1054L12.4226 16.5543L18.8103 25.1227H25.198L15.5705 12.3402L24.4922 0.561266Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M30.0821 7.6139L36.0464 0.561266H29.9057L26.7295 4.28056C25.706 5.50863 25.2119 6.7367 25.2119 8.07004C25.2119 9.40337 25.706 10.5964 26.7295 11.8595L31.5644 17.8946L25.8825 25.1227H32.1643L34.9524 21.6139C36.0111 20.2806 36.5052 19.0174 36.5052 17.649C36.5052 16.2806 36.0111 15.0174 34.9524 13.6841L30.0821 7.6139Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M51.5462 0C44.3115 0 38.6295 5.64912 38.6295 12.8421C38.6295 20.0351 44.3115 25.6842 51.5462 25.6842C58.7809 25.6842 64.4628 20.0351 64.4628 12.8421C64.4628 5.64912 58.7809 0 51.5462 0ZM51.5462 20.7719C47.2053 20.7719 43.9232 17.3684 43.9232 12.8421C43.9232 8.31579 47.2053 4.91228 51.5462 4.91228C55.887 4.91228 59.1691 8.31579 59.1691 12.8421C59.1691 17.3684 55.887 20.7719 51.5462 20.7719Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M63.348 0.561266L76.621 25.1227H82.8323L69.5628 0.561266H63.348Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/><path d=\"M106.139 0.561266H102.433L92.3223 19.9472L81.8478 0.561266H75.6365L88.9061 25.1262H118.946L106.135 0.561266H106.139ZM97.5066 20.5613L104.173 7.37179L110.829 20.5613H97.5066Z\" fill=\"white\" style=\"fill:white;fill-opacity:1;\"/></g></svg>`,\n};\n\n// Icon SVG content by color\nconst iconContent = {\n black: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"black\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"black\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"black\"/></svg>`,\n brand: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=Blue, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"#80EAFF\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"#80EAFF\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"#80EAFF\"/></g></g></svg>`,\n white: `<svg viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g id=\"Colour=White, Size=M [32], Icon=None\"><g id=\"Vector\"><path d=\"M26.1121 9.23909C23.9699 8.70353 23.3004 8.13449 22.6979 6.26001C21.5565 2.64495 19.2469 0.737 16 0.737C12.7531 0.737 10.4435 2.64495 9.30544 6.26001C8.70293 8.13449 8.03347 8.70353 5.89121 9.23909C2.24268 10.1429 0 12.6533 0 16.0006C0 19.3479 2.24268 21.8583 5.89121 22.7621C8.03347 23.2977 8.70293 23.8667 9.30544 25.7412C10.4435 29.3562 12.7531 31.2642 16 31.2642C19.2469 31.2642 21.5565 29.3562 22.6946 25.7412C23.2971 23.8667 23.9665 23.2977 26.1088 22.7621C29.7573 21.8583 32 19.3479 32 16.0006C32 12.6533 29.7573 10.1429 26.1088 9.23909H26.1121ZM21.2552 21.1554C19.046 21.1554 17.1046 19.5487 16.636 17.5738H15.431C14.9289 19.5152 12.9874 21.1554 10.7782 21.1554C8.13389 21.1554 5.99163 18.9797 5.99163 16.3353C5.99163 13.691 8.13389 11.5487 10.7782 11.5487C12.954 11.5487 14.9289 13.1554 15.431 15.0968H16.636C17.1381 13.1219 19.0795 11.5487 21.2552 11.5487C23.8996 11.5487 26.0753 13.691 26.0753 16.3353C26.0753 18.9797 23.8996 21.1554 21.2552 21.1554Z\" fill=\"white\"/><path d=\"M23.1969 14.4275H19.3475V18.2769H23.1969V14.4275Z\" fill=\"white\"/><path d=\"M12.7197 14.4275H8.87029V18.2769H12.7197V14.4275Z\" fill=\"white\"/></g></g></svg>`,\n};\n\n/**\n * Xsolla brand logo component\n *\n * @example\n * // Full logo in brand color (default)\n * <Xsolla />\n *\n * @example\n * // Text only\n * <Xsolla variant=\"text\" />\n *\n * @example\n * // Icon only\n * <Xsolla variant=\"icon\" />\n *\n * @example\n * // Black color, medium size\n * <Xsolla color=\"black\" size=\"md\" />\n */\nexport const Xsolla: React.FC<XsollaLogoProps> = (props) => (\n <XsollaLogoBase\n {...props}\n fullContent={fullContent}\n textContent={textContent}\n iconContent={iconContent}\n />\n);\n\n// Default export for convenience\nexport default Xsolla;\n"],"mappings":";AACA,OAAO,YAAY;;;ACsBZ,IAAM,aAAuC;AAAA,EAClD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAKO,IAAM,cAAyC;AAAA,EACpD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;;;ADyDI;AArFJ,IAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA,YAId,CAAC,UAAU,MAAM,OAAO;AAAA,WACzB,CAAC,UAAU,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlC,IAAM,yBAAyB,MAAM;AAGrC,IAAM,yBAAyB,MAAM;AAGrC,IAAM,oBAAoB;AAEnB,IAAM,aAAgD,CAAC;AAAA,EAC5D,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAAA;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd,eAAe;AACjB,MAAM;AAEJ,QAAM,SAAS,OAAO,SAAS,WAAW,OAAO,WAAW,IAAgB;AAG5E,QAAM,cACJ,YAAY,SACR,yBACA,YAAY,SACV,yBACA;AACR,QAAM,QAAQ,KAAK,MAAM,SAAS,WAAW;AAG7C,QAAM,UACJ,YAAY,SACRF,eACA,YAAY,SACVC,eACAC;AACR,MAAI,aAAa,QAAQ,KAAK;AAG9B,MAAI,CAAC,cAAc,UAAU,SAAS;AACpC,iBAAa,QAAQ;AACrB,QAAI,OAAO,YAAY,eAAe,QAAQ,MAAM;AAClD,cAAQ;AAAA,QACN,gDAAgD,OAAO,YAAY,KAAK;AAAA,MAC1E;AAAA,IACF;AAAA,EACF;AAGA,MAAI,CAAC,YAAY;AACf,QAAI,OAAO,YAAY,eAAe,QAAQ,OAAO;AACnD,cAAQ;AAAA,QACN,gDAAgD,OAAO,YAAY,KAAK;AAAA,MAC1E;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAGA,QAAM,mBACJ,YAAY,SACR,gBACA,YAAY,SACV,gBACA;AAER,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,MAAM,aAAa,CAAC,aAAa,QAAQ;AAAA,MACzC,cAAY,aAAa;AAAA,MACzB,eAAa;AAAA,MACb,yBAAyB,EAAE,QAAQ,WAAW;AAAA;AAAA,EAChD;AAEJ;;;AEpDE,gBAAAC,YAAA;AAxCF,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAGA,IAAM,cAAc;AAAA,EAClB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAqBO,IAAM,SAAoC,CAAC,UAChD,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA;AACF;AAIF,IAAO,gBAAQ;","names":["fullContent","textContent","iconContent","jsx"]}
|