@xsolla/xui-core 0.113.0 → 0.114.0-pr183.1773207405
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/index.d.mts +57 -4
- package/index.d.ts +57 -4
- package/index.js +283 -10
- package/index.js.flow +62 -11
- package/index.js.map +1 -1
- package/index.mjs +279 -10
- package/index.mjs.map +1 -1
- package/package.json +5 -2
package/index.d.mts
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
+
type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
|
|
4
|
+
interface TypographyVariant {
|
|
5
|
+
fontSize: number;
|
|
6
|
+
lineHeight: string;
|
|
7
|
+
fontWeight: number;
|
|
8
|
+
}
|
|
9
|
+
interface TypographyBodyVariant extends TypographyVariant {
|
|
10
|
+
accent?: {
|
|
11
|
+
fontWeight: number;
|
|
12
|
+
};
|
|
13
|
+
paragraph?: {
|
|
14
|
+
lineHeight: string;
|
|
15
|
+
spacing?: number;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
interface TypographyTokens {
|
|
19
|
+
heading: {
|
|
20
|
+
h1: TypographyVariant;
|
|
21
|
+
h2: TypographyVariant;
|
|
22
|
+
h3: TypographyVariant;
|
|
23
|
+
h4: TypographyVariant;
|
|
24
|
+
h5: TypographyVariant;
|
|
25
|
+
};
|
|
26
|
+
basic: {
|
|
27
|
+
display: TypographyVariant;
|
|
28
|
+
"body-lg": TypographyBodyVariant;
|
|
29
|
+
"body-md": TypographyBodyVariant;
|
|
30
|
+
"body-sm": TypographyBodyVariant;
|
|
31
|
+
"body-xs": TypographyBodyVariant;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
declare const typographyTokens: Record<ProductContext, TypographyTokens>;
|
|
35
|
+
declare const defaultProductContext: ProductContext;
|
|
36
|
+
declare const getTypographyTokens: (productContext?: ProductContext) => TypographyTokens;
|
|
37
|
+
declare const getTypographyVariant: (productContext: ProductContext, variant: string) => TypographyVariant | TypographyBodyVariant | undefined;
|
|
38
|
+
|
|
3
39
|
var background = {
|
|
4
40
|
primary: "#1b2628",
|
|
5
41
|
secondary: "#141d1f",
|
|
@@ -3532,15 +3568,20 @@ declare const FontLoader: React.FC;
|
|
|
3532
3568
|
/**
|
|
3533
3569
|
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
3534
3570
|
*
|
|
3535
|
-
* Pilat Wide — heading/display font, registered at weights 600
|
|
3571
|
+
* Pilat Wide — heading/display font, registered at weights 400, 600, 700, 800.
|
|
3572
|
+
* - 400: Medium (for B2B mode headings)
|
|
3573
|
+
* - 600: Semi-Bold
|
|
3574
|
+
* - 700: Bold
|
|
3575
|
+
* - 800: Black/Heavy (for display text)
|
|
3536
3576
|
*
|
|
3537
3577
|
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
3538
3578
|
* which are the same typeface under a legacy name.
|
|
3579
|
+
* Registered at weights 300, 400, 500, 600, 700.
|
|
3539
3580
|
*/
|
|
3540
|
-
declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
|
|
3581
|
+
declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
|
|
3541
3582
|
|
|
3542
3583
|
type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "xsolla-dark" | "xsolla-light" | "xsollaDark" | "xsollaLight" | "ltg-dark";
|
|
3543
|
-
declare const themeConfig: (mode?: ThemeMode) => {
|
|
3584
|
+
declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
|
|
3544
3585
|
colors: {
|
|
3545
3586
|
background: {
|
|
3546
3587
|
primary: string;
|
|
@@ -5304,6 +5345,8 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5304
5345
|
heading: string;
|
|
5305
5346
|
body: string;
|
|
5306
5347
|
};
|
|
5348
|
+
typographyTokens: TypographyTokens;
|
|
5349
|
+
productContext: ProductContext;
|
|
5307
5350
|
sizing: {
|
|
5308
5351
|
button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
5309
5352
|
height: number;
|
|
@@ -5530,30 +5573,35 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5530
5573
|
fontSize: number;
|
|
5531
5574
|
radius: number;
|
|
5532
5575
|
borderWidth: number;
|
|
5576
|
+
fieldGap: number;
|
|
5533
5577
|
} | {
|
|
5534
5578
|
size: number;
|
|
5535
5579
|
gap: number;
|
|
5536
5580
|
fontSize: number;
|
|
5537
5581
|
radius: number;
|
|
5538
5582
|
borderWidth: number;
|
|
5583
|
+
fieldGap: number;
|
|
5539
5584
|
} | {
|
|
5540
5585
|
size: number;
|
|
5541
5586
|
gap: number;
|
|
5542
5587
|
fontSize: number;
|
|
5543
5588
|
radius: number;
|
|
5544
5589
|
borderWidth: number;
|
|
5590
|
+
fieldGap: number;
|
|
5545
5591
|
} | {
|
|
5546
5592
|
size: number;
|
|
5547
5593
|
gap: number;
|
|
5548
5594
|
fontSize: number;
|
|
5549
5595
|
radius: number;
|
|
5550
5596
|
borderWidth: number;
|
|
5597
|
+
fieldGap: number;
|
|
5551
5598
|
} | {
|
|
5552
5599
|
size: number;
|
|
5553
5600
|
gap: number;
|
|
5554
5601
|
fontSize: number;
|
|
5555
5602
|
radius: number;
|
|
5556
5603
|
borderWidth: number;
|
|
5604
|
+
fieldGap: number;
|
|
5557
5605
|
};
|
|
5558
5606
|
textarea: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
5559
5607
|
height: number;
|
|
@@ -6228,11 +6276,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
6228
6276
|
interface DesignSystemContextType {
|
|
6229
6277
|
mode: ThemeMode;
|
|
6230
6278
|
setMode: (mode: ThemeMode) => void;
|
|
6279
|
+
productContext: ProductContext;
|
|
6280
|
+
setProductContext: (productContext: ProductContext) => void;
|
|
6231
6281
|
theme: ReturnType<typeof themeConfig>;
|
|
6232
6282
|
}
|
|
6233
6283
|
declare const XUIProvider: React.FC<{
|
|
6234
6284
|
children: React.ReactNode;
|
|
6235
6285
|
initialMode?: ThemeMode;
|
|
6286
|
+
initialProductContext?: ProductContext;
|
|
6287
|
+
/** Use `initialProductContext` instead. */
|
|
6288
|
+
productContext?: never;
|
|
6236
6289
|
/** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
|
|
6237
6290
|
loadFonts?: boolean;
|
|
6238
6291
|
}>;
|
|
@@ -6251,4 +6304,4 @@ declare const ModalIdContext: React.Context<string | null>;
|
|
|
6251
6304
|
*/
|
|
6252
6305
|
declare const useModalId: () => string | null;
|
|
6253
6306
|
|
|
6254
|
-
export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
|
6307
|
+
export { FontLoader, ModalIdContext, type ProductContext, type ThemeColors, type ThemeMode, type TypographyBodyVariant, type TypographyTokens, type TypographyVariant, XUIProvider, colors, defaultProductContext, fontFacesCSS, fonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId };
|
package/index.d.ts
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
|
+
type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
|
|
4
|
+
interface TypographyVariant {
|
|
5
|
+
fontSize: number;
|
|
6
|
+
lineHeight: string;
|
|
7
|
+
fontWeight: number;
|
|
8
|
+
}
|
|
9
|
+
interface TypographyBodyVariant extends TypographyVariant {
|
|
10
|
+
accent?: {
|
|
11
|
+
fontWeight: number;
|
|
12
|
+
};
|
|
13
|
+
paragraph?: {
|
|
14
|
+
lineHeight: string;
|
|
15
|
+
spacing?: number;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
interface TypographyTokens {
|
|
19
|
+
heading: {
|
|
20
|
+
h1: TypographyVariant;
|
|
21
|
+
h2: TypographyVariant;
|
|
22
|
+
h3: TypographyVariant;
|
|
23
|
+
h4: TypographyVariant;
|
|
24
|
+
h5: TypographyVariant;
|
|
25
|
+
};
|
|
26
|
+
basic: {
|
|
27
|
+
display: TypographyVariant;
|
|
28
|
+
"body-lg": TypographyBodyVariant;
|
|
29
|
+
"body-md": TypographyBodyVariant;
|
|
30
|
+
"body-sm": TypographyBodyVariant;
|
|
31
|
+
"body-xs": TypographyBodyVariant;
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
declare const typographyTokens: Record<ProductContext, TypographyTokens>;
|
|
35
|
+
declare const defaultProductContext: ProductContext;
|
|
36
|
+
declare const getTypographyTokens: (productContext?: ProductContext) => TypographyTokens;
|
|
37
|
+
declare const getTypographyVariant: (productContext: ProductContext, variant: string) => TypographyVariant | TypographyBodyVariant | undefined;
|
|
38
|
+
|
|
3
39
|
var background = {
|
|
4
40
|
primary: "#1b2628",
|
|
5
41
|
secondary: "#141d1f",
|
|
@@ -3532,15 +3568,20 @@ declare const FontLoader: React.FC;
|
|
|
3532
3568
|
/**
|
|
3533
3569
|
* @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
|
|
3534
3570
|
*
|
|
3535
|
-
* Pilat Wide — heading/display font, registered at weights 600
|
|
3571
|
+
* Pilat Wide — heading/display font, registered at weights 400, 600, 700, 800.
|
|
3572
|
+
* - 400: Medium (for B2B mode headings)
|
|
3573
|
+
* - 600: Semi-Bold
|
|
3574
|
+
* - 700: Bold
|
|
3575
|
+
* - 800: Black/Heavy (for display text)
|
|
3536
3576
|
*
|
|
3537
3577
|
* Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
|
|
3538
3578
|
* which are the same typeface under a legacy name.
|
|
3579
|
+
* Registered at weights 300, 400, 500, 600, 700.
|
|
3539
3580
|
*/
|
|
3540
|
-
declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
|
|
3581
|
+
declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
|
|
3541
3582
|
|
|
3542
3583
|
type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "xsolla-dark" | "xsolla-light" | "xsollaDark" | "xsollaLight" | "ltg-dark";
|
|
3543
|
-
declare const themeConfig: (mode?: ThemeMode) => {
|
|
3584
|
+
declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
|
|
3544
3585
|
colors: {
|
|
3545
3586
|
background: {
|
|
3546
3587
|
primary: string;
|
|
@@ -5304,6 +5345,8 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5304
5345
|
heading: string;
|
|
5305
5346
|
body: string;
|
|
5306
5347
|
};
|
|
5348
|
+
typographyTokens: TypographyTokens;
|
|
5349
|
+
productContext: ProductContext;
|
|
5307
5350
|
sizing: {
|
|
5308
5351
|
button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
5309
5352
|
height: number;
|
|
@@ -5530,30 +5573,35 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
5530
5573
|
fontSize: number;
|
|
5531
5574
|
radius: number;
|
|
5532
5575
|
borderWidth: number;
|
|
5576
|
+
fieldGap: number;
|
|
5533
5577
|
} | {
|
|
5534
5578
|
size: number;
|
|
5535
5579
|
gap: number;
|
|
5536
5580
|
fontSize: number;
|
|
5537
5581
|
radius: number;
|
|
5538
5582
|
borderWidth: number;
|
|
5583
|
+
fieldGap: number;
|
|
5539
5584
|
} | {
|
|
5540
5585
|
size: number;
|
|
5541
5586
|
gap: number;
|
|
5542
5587
|
fontSize: number;
|
|
5543
5588
|
radius: number;
|
|
5544
5589
|
borderWidth: number;
|
|
5590
|
+
fieldGap: number;
|
|
5545
5591
|
} | {
|
|
5546
5592
|
size: number;
|
|
5547
5593
|
gap: number;
|
|
5548
5594
|
fontSize: number;
|
|
5549
5595
|
radius: number;
|
|
5550
5596
|
borderWidth: number;
|
|
5597
|
+
fieldGap: number;
|
|
5551
5598
|
} | {
|
|
5552
5599
|
size: number;
|
|
5553
5600
|
gap: number;
|
|
5554
5601
|
fontSize: number;
|
|
5555
5602
|
radius: number;
|
|
5556
5603
|
borderWidth: number;
|
|
5604
|
+
fieldGap: number;
|
|
5557
5605
|
};
|
|
5558
5606
|
textarea: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
|
|
5559
5607
|
height: number;
|
|
@@ -6228,11 +6276,16 @@ declare const themeConfig: (mode?: ThemeMode) => {
|
|
|
6228
6276
|
interface DesignSystemContextType {
|
|
6229
6277
|
mode: ThemeMode;
|
|
6230
6278
|
setMode: (mode: ThemeMode) => void;
|
|
6279
|
+
productContext: ProductContext;
|
|
6280
|
+
setProductContext: (productContext: ProductContext) => void;
|
|
6231
6281
|
theme: ReturnType<typeof themeConfig>;
|
|
6232
6282
|
}
|
|
6233
6283
|
declare const XUIProvider: React.FC<{
|
|
6234
6284
|
children: React.ReactNode;
|
|
6235
6285
|
initialMode?: ThemeMode;
|
|
6286
|
+
initialProductContext?: ProductContext;
|
|
6287
|
+
/** Use `initialProductContext` instead. */
|
|
6288
|
+
productContext?: never;
|
|
6236
6289
|
/** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
|
|
6237
6290
|
loadFonts?: boolean;
|
|
6238
6291
|
}>;
|
|
@@ -6251,4 +6304,4 @@ declare const ModalIdContext: React.Context<string | null>;
|
|
|
6251
6304
|
*/
|
|
6252
6305
|
declare const useModalId: () => string | null;
|
|
6253
6306
|
|
|
6254
|
-
export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
|
|
6307
|
+
export { FontLoader, ModalIdContext, type ProductContext, type ThemeColors, type ThemeMode, type TypographyBodyVariant, type TypographyTokens, type TypographyVariant, XUIProvider, colors, defaultProductContext, fontFacesCSS, fonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId };
|
package/index.js
CHANGED
|
@@ -34,8 +34,11 @@ __export(index_exports, {
|
|
|
34
34
|
ModalIdContext: () => ModalIdContext,
|
|
35
35
|
XUIProvider: () => XUIProvider,
|
|
36
36
|
colors: () => colors,
|
|
37
|
+
defaultProductContext: () => defaultProductContext,
|
|
37
38
|
fontFacesCSS: () => fontFacesCSS,
|
|
38
39
|
fonts: () => fonts,
|
|
40
|
+
getTypographyTokens: () => getTypographyTokens,
|
|
41
|
+
getTypographyVariant: () => getTypographyVariant,
|
|
39
42
|
isAndroid: () => isAndroid,
|
|
40
43
|
isIOS: () => isIOS,
|
|
41
44
|
isNative: () => isNative,
|
|
@@ -45,6 +48,7 @@ __export(index_exports, {
|
|
|
45
48
|
spacing: () => spacing,
|
|
46
49
|
themeConfig: () => themeConfig,
|
|
47
50
|
typography: () => typography,
|
|
51
|
+
typographyTokens: () => typographyTokens,
|
|
48
52
|
useDesignSystem: () => useDesignSystem,
|
|
49
53
|
useId: () => useId,
|
|
50
54
|
useModalId: () => useModalId
|
|
@@ -1854,6 +1858,207 @@ var typography = {
|
|
|
1854
1858
|
}
|
|
1855
1859
|
};
|
|
1856
1860
|
|
|
1861
|
+
// src/tokens/typography.ts
|
|
1862
|
+
var typographyTokens = {
|
|
1863
|
+
b2c: {
|
|
1864
|
+
heading: {
|
|
1865
|
+
h1: { fontSize: 40, lineHeight: "48px", fontWeight: 700 },
|
|
1866
|
+
h2: { fontSize: 32, lineHeight: "38px", fontWeight: 700 },
|
|
1867
|
+
h3: { fontSize: 28, lineHeight: "34px", fontWeight: 700 },
|
|
1868
|
+
h4: { fontSize: 24, lineHeight: "28px", fontWeight: 700 },
|
|
1869
|
+
h5: { fontSize: 20, lineHeight: "24px", fontWeight: 700 }
|
|
1870
|
+
},
|
|
1871
|
+
basic: {
|
|
1872
|
+
display: { fontSize: 48, lineHeight: "58px", fontWeight: 800 },
|
|
1873
|
+
"body-lg": {
|
|
1874
|
+
fontSize: 18,
|
|
1875
|
+
lineHeight: "24px",
|
|
1876
|
+
fontWeight: 400,
|
|
1877
|
+
accent: { fontWeight: 500 },
|
|
1878
|
+
paragraph: { lineHeight: "26px", spacing: 20 }
|
|
1879
|
+
},
|
|
1880
|
+
"body-md": {
|
|
1881
|
+
fontSize: 16,
|
|
1882
|
+
lineHeight: "20px",
|
|
1883
|
+
fontWeight: 400,
|
|
1884
|
+
accent: { fontWeight: 500 },
|
|
1885
|
+
paragraph: { lineHeight: "22px", spacing: 16 }
|
|
1886
|
+
},
|
|
1887
|
+
"body-sm": {
|
|
1888
|
+
fontSize: 14,
|
|
1889
|
+
lineHeight: "18px",
|
|
1890
|
+
fontWeight: 400,
|
|
1891
|
+
accent: { fontWeight: 500 },
|
|
1892
|
+
paragraph: { lineHeight: "20px", spacing: 12 }
|
|
1893
|
+
},
|
|
1894
|
+
"body-xs": {
|
|
1895
|
+
fontSize: 12,
|
|
1896
|
+
lineHeight: "16px",
|
|
1897
|
+
fontWeight: 400,
|
|
1898
|
+
accent: { fontWeight: 500 },
|
|
1899
|
+
paragraph: { lineHeight: "18px", spacing: 8 }
|
|
1900
|
+
}
|
|
1901
|
+
}
|
|
1902
|
+
},
|
|
1903
|
+
b2b: {
|
|
1904
|
+
heading: {
|
|
1905
|
+
h1: { fontSize: 56, lineHeight: "68px", fontWeight: 400 },
|
|
1906
|
+
h2: { fontSize: 48, lineHeight: "58px", fontWeight: 400 },
|
|
1907
|
+
h3: { fontSize: 32, lineHeight: "38px", fontWeight: 400 },
|
|
1908
|
+
h4: { fontSize: 24, lineHeight: "28px", fontWeight: 400 },
|
|
1909
|
+
h5: { fontSize: 20, lineHeight: "24px", fontWeight: 600 }
|
|
1910
|
+
},
|
|
1911
|
+
basic: {
|
|
1912
|
+
display: { fontSize: 64, lineHeight: "78px", fontWeight: 400 },
|
|
1913
|
+
"body-lg": {
|
|
1914
|
+
fontSize: 18,
|
|
1915
|
+
lineHeight: "24px",
|
|
1916
|
+
fontWeight: 400,
|
|
1917
|
+
accent: { fontWeight: 500 },
|
|
1918
|
+
paragraph: { lineHeight: "26px", spacing: 20 }
|
|
1919
|
+
},
|
|
1920
|
+
"body-md": {
|
|
1921
|
+
fontSize: 16,
|
|
1922
|
+
lineHeight: "20px",
|
|
1923
|
+
fontWeight: 400,
|
|
1924
|
+
accent: { fontWeight: 500 },
|
|
1925
|
+
paragraph: { lineHeight: "22px", spacing: 16 }
|
|
1926
|
+
},
|
|
1927
|
+
"body-sm": {
|
|
1928
|
+
fontSize: 14,
|
|
1929
|
+
lineHeight: "18px",
|
|
1930
|
+
fontWeight: 400,
|
|
1931
|
+
accent: { fontWeight: 500 },
|
|
1932
|
+
paragraph: { lineHeight: "20px", spacing: 12 }
|
|
1933
|
+
},
|
|
1934
|
+
"body-xs": {
|
|
1935
|
+
fontSize: 12,
|
|
1936
|
+
lineHeight: "16px",
|
|
1937
|
+
fontWeight: 400,
|
|
1938
|
+
accent: { fontWeight: 500 },
|
|
1939
|
+
paragraph: { lineHeight: "18px", spacing: 8 }
|
|
1940
|
+
}
|
|
1941
|
+
}
|
|
1942
|
+
},
|
|
1943
|
+
paystation: {
|
|
1944
|
+
heading: {
|
|
1945
|
+
h1: { fontSize: 28, lineHeight: "34px", fontWeight: 700 },
|
|
1946
|
+
h2: { fontSize: 24, lineHeight: "28px", fontWeight: 700 },
|
|
1947
|
+
h3: { fontSize: 20, lineHeight: "24px", fontWeight: 700 },
|
|
1948
|
+
h4: { fontSize: 18, lineHeight: "22px", fontWeight: 700 },
|
|
1949
|
+
h5: { fontSize: 16, lineHeight: "20px", fontWeight: 700 }
|
|
1950
|
+
},
|
|
1951
|
+
basic: {
|
|
1952
|
+
display: { fontSize: 40, lineHeight: "48px", fontWeight: 800 },
|
|
1953
|
+
"body-lg": {
|
|
1954
|
+
fontSize: 16,
|
|
1955
|
+
lineHeight: "20px",
|
|
1956
|
+
fontWeight: 400,
|
|
1957
|
+
accent: { fontWeight: 500 },
|
|
1958
|
+
paragraph: { lineHeight: "22px", spacing: 16 }
|
|
1959
|
+
},
|
|
1960
|
+
"body-md": {
|
|
1961
|
+
fontSize: 14,
|
|
1962
|
+
lineHeight: "18px",
|
|
1963
|
+
fontWeight: 400,
|
|
1964
|
+
accent: { fontWeight: 500 },
|
|
1965
|
+
paragraph: { lineHeight: "20px", spacing: 12 }
|
|
1966
|
+
},
|
|
1967
|
+
"body-sm": {
|
|
1968
|
+
fontSize: 12,
|
|
1969
|
+
lineHeight: "16px",
|
|
1970
|
+
fontWeight: 400,
|
|
1971
|
+
accent: { fontWeight: 500 },
|
|
1972
|
+
paragraph: { lineHeight: "18px", spacing: 8 }
|
|
1973
|
+
},
|
|
1974
|
+
"body-xs": {
|
|
1975
|
+
fontSize: 10,
|
|
1976
|
+
lineHeight: "14px",
|
|
1977
|
+
fontWeight: 400,
|
|
1978
|
+
accent: { fontWeight: 500 },
|
|
1979
|
+
paragraph: { lineHeight: "14px", spacing: 6 }
|
|
1980
|
+
}
|
|
1981
|
+
}
|
|
1982
|
+
},
|
|
1983
|
+
presentation: {
|
|
1984
|
+
heading: {
|
|
1985
|
+
h1: { fontSize: 56, lineHeight: "68px", fontWeight: 700 },
|
|
1986
|
+
h2: { fontSize: 48, lineHeight: "58px", fontWeight: 700 },
|
|
1987
|
+
h3: { fontSize: 40, lineHeight: "48px", fontWeight: 700 },
|
|
1988
|
+
h4: { fontSize: 32, lineHeight: "38px", fontWeight: 700 },
|
|
1989
|
+
h5: { fontSize: 28, lineHeight: "34px", fontWeight: 700 }
|
|
1990
|
+
},
|
|
1991
|
+
basic: {
|
|
1992
|
+
display: { fontSize: 64, lineHeight: "78px", fontWeight: 800 },
|
|
1993
|
+
"body-lg": {
|
|
1994
|
+
fontSize: 24,
|
|
1995
|
+
lineHeight: "30px",
|
|
1996
|
+
fontWeight: 400,
|
|
1997
|
+
accent: { fontWeight: 500 },
|
|
1998
|
+
paragraph: { lineHeight: "34px", spacing: 24 }
|
|
1999
|
+
},
|
|
2000
|
+
"body-md": {
|
|
2001
|
+
fontSize: 20,
|
|
2002
|
+
lineHeight: "26px",
|
|
2003
|
+
fontWeight: 400,
|
|
2004
|
+
accent: { fontWeight: 500 },
|
|
2005
|
+
paragraph: { lineHeight: "28px", spacing: 20 }
|
|
2006
|
+
},
|
|
2007
|
+
"body-sm": {
|
|
2008
|
+
fontSize: 18,
|
|
2009
|
+
lineHeight: "24px",
|
|
2010
|
+
fontWeight: 400,
|
|
2011
|
+
accent: { fontWeight: 500 },
|
|
2012
|
+
paragraph: { lineHeight: "26px", spacing: 16 }
|
|
2013
|
+
},
|
|
2014
|
+
"body-xs": {
|
|
2015
|
+
fontSize: 16,
|
|
2016
|
+
lineHeight: "20px",
|
|
2017
|
+
fontWeight: 400,
|
|
2018
|
+
accent: { fontWeight: 500 },
|
|
2019
|
+
paragraph: { lineHeight: "22px", spacing: 12 }
|
|
2020
|
+
}
|
|
2021
|
+
}
|
|
2022
|
+
}
|
|
2023
|
+
};
|
|
2024
|
+
var defaultProductContext = "b2b";
|
|
2025
|
+
var getTypographyTokens = (productContext = defaultProductContext) => {
|
|
2026
|
+
return typographyTokens[productContext] || typographyTokens[defaultProductContext];
|
|
2027
|
+
};
|
|
2028
|
+
var getTypographyVariant = (productContext, variant) => {
|
|
2029
|
+
const tokens = getTypographyTokens(productContext);
|
|
2030
|
+
if (variant in tokens.heading) {
|
|
2031
|
+
return tokens.heading[variant];
|
|
2032
|
+
}
|
|
2033
|
+
if (variant === "display") {
|
|
2034
|
+
return tokens.basic.display;
|
|
2035
|
+
}
|
|
2036
|
+
const bodyVariantMap = {
|
|
2037
|
+
bodyLg: "body-lg",
|
|
2038
|
+
bodyMd: "body-md",
|
|
2039
|
+
bodySm: "body-sm",
|
|
2040
|
+
bodyXs: "body-xs"
|
|
2041
|
+
};
|
|
2042
|
+
const bodyKey = bodyVariantMap[variant.replace("Accent", "").replace("Paragraph", "")];
|
|
2043
|
+
if (bodyKey && bodyKey in tokens.basic) {
|
|
2044
|
+
const baseVariant = tokens.basic[bodyKey];
|
|
2045
|
+
if (variant.includes("Accent") && baseVariant.accent) {
|
|
2046
|
+
return {
|
|
2047
|
+
...baseVariant,
|
|
2048
|
+
fontWeight: baseVariant.accent.fontWeight
|
|
2049
|
+
};
|
|
2050
|
+
}
|
|
2051
|
+
if (variant.includes("Paragraph") && baseVariant.paragraph) {
|
|
2052
|
+
return {
|
|
2053
|
+
...baseVariant,
|
|
2054
|
+
lineHeight: baseVariant.paragraph.lineHeight
|
|
2055
|
+
};
|
|
2056
|
+
}
|
|
2057
|
+
return baseVariant;
|
|
2058
|
+
}
|
|
2059
|
+
return void 0;
|
|
2060
|
+
};
|
|
2061
|
+
|
|
1857
2062
|
// src/fonts/FontLoader.tsx
|
|
1858
2063
|
var import_react = require("react");
|
|
1859
2064
|
|
|
@@ -1868,6 +2073,13 @@ var CDN_BASE = "https://cdn.xsolla.net/strapi-v2-bucket-prod";
|
|
|
1868
2073
|
var fontFacesCSS = `
|
|
1869
2074
|
/* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */
|
|
1870
2075
|
|
|
2076
|
+
@font-face {
|
|
2077
|
+
font-family: 'Pilat Wide';
|
|
2078
|
+
src: url('${CDN_BASE}/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');
|
|
2079
|
+
font-weight: 400;
|
|
2080
|
+
font-style: normal;
|
|
2081
|
+
font-display: swap;
|
|
2082
|
+
}
|
|
1871
2083
|
@font-face {
|
|
1872
2084
|
font-family: 'Pilat Wide';
|
|
1873
2085
|
src: url('${CDN_BASE}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
|
|
@@ -1913,6 +2125,13 @@ var fontFacesCSS = `
|
|
|
1913
2125
|
font-style: normal;
|
|
1914
2126
|
font-display: swap;
|
|
1915
2127
|
}
|
|
2128
|
+
@font-face {
|
|
2129
|
+
font-family: 'Aktiv Grotesk';
|
|
2130
|
+
src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
|
|
2131
|
+
font-weight: 600;
|
|
2132
|
+
font-style: normal;
|
|
2133
|
+
font-display: swap;
|
|
2134
|
+
}
|
|
1916
2135
|
@font-face {
|
|
1917
2136
|
font-family: 'Aktiv Grotesk';
|
|
1918
2137
|
src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
|
|
@@ -1946,7 +2165,7 @@ FontLoader.displayName = "FontLoader";
|
|
|
1946
2165
|
|
|
1947
2166
|
// src/index.tsx
|
|
1948
2167
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
1949
|
-
var themeConfig = (mode = "dark") => ({
|
|
2168
|
+
var themeConfig = (mode = "dark", productContext = defaultProductContext) => ({
|
|
1950
2169
|
colors: colors[mode],
|
|
1951
2170
|
spacing,
|
|
1952
2171
|
radius,
|
|
@@ -1957,6 +2176,8 @@ var themeConfig = (mode = "dark") => ({
|
|
|
1957
2176
|
heading: fonts.heading,
|
|
1958
2177
|
body: fonts.body
|
|
1959
2178
|
},
|
|
2179
|
+
typographyTokens: getTypographyTokens(productContext),
|
|
2180
|
+
productContext,
|
|
1960
2181
|
sizing: {
|
|
1961
2182
|
button: (size) => {
|
|
1962
2183
|
const configs = {
|
|
@@ -2222,11 +2443,46 @@ var themeConfig = (mode = "dark") => ({
|
|
|
2222
2443
|
},
|
|
2223
2444
|
inputPin: (size) => {
|
|
2224
2445
|
const configs = {
|
|
2225
|
-
xl: {
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2446
|
+
xl: {
|
|
2447
|
+
size: 64,
|
|
2448
|
+
gap: 10,
|
|
2449
|
+
fontSize: 20,
|
|
2450
|
+
radius: 8,
|
|
2451
|
+
borderWidth: 1,
|
|
2452
|
+
fieldGap: 8
|
|
2453
|
+
},
|
|
2454
|
+
lg: {
|
|
2455
|
+
size: 56,
|
|
2456
|
+
gap: 8,
|
|
2457
|
+
fontSize: 18,
|
|
2458
|
+
radius: 8,
|
|
2459
|
+
borderWidth: 1,
|
|
2460
|
+
fieldGap: 6
|
|
2461
|
+
},
|
|
2462
|
+
md: {
|
|
2463
|
+
size: 48,
|
|
2464
|
+
gap: 6,
|
|
2465
|
+
fontSize: 16,
|
|
2466
|
+
radius: 8,
|
|
2467
|
+
borderWidth: 1,
|
|
2468
|
+
fieldGap: 4
|
|
2469
|
+
},
|
|
2470
|
+
sm: {
|
|
2471
|
+
size: 40,
|
|
2472
|
+
gap: 4,
|
|
2473
|
+
fontSize: 14,
|
|
2474
|
+
radius: 4,
|
|
2475
|
+
borderWidth: 1,
|
|
2476
|
+
fieldGap: 4
|
|
2477
|
+
},
|
|
2478
|
+
xs: {
|
|
2479
|
+
size: 32,
|
|
2480
|
+
gap: 4,
|
|
2481
|
+
fontSize: 12,
|
|
2482
|
+
radius: 4,
|
|
2483
|
+
borderWidth: 1,
|
|
2484
|
+
fieldGap: 4
|
|
2485
|
+
}
|
|
2230
2486
|
};
|
|
2231
2487
|
return configs[size];
|
|
2232
2488
|
},
|
|
@@ -2905,15 +3161,25 @@ var themeConfig = (mode = "dark") => ({
|
|
|
2905
3161
|
var DesignSystemContext = (0, import_react2.createContext)(
|
|
2906
3162
|
void 0
|
|
2907
3163
|
);
|
|
2908
|
-
var XUIProvider = ({
|
|
3164
|
+
var XUIProvider = ({
|
|
3165
|
+
children,
|
|
3166
|
+
initialMode = "dark",
|
|
3167
|
+
initialProductContext = defaultProductContext,
|
|
3168
|
+
loadFonts = true
|
|
3169
|
+
}) => {
|
|
2909
3170
|
const [mode, setMode] = (0, import_react2.useState)(initialMode);
|
|
3171
|
+
const [productContext, setProductContext] = (0, import_react2.useState)(
|
|
3172
|
+
initialProductContext
|
|
3173
|
+
);
|
|
2910
3174
|
const value = (0, import_react2.useMemo)(
|
|
2911
3175
|
() => ({
|
|
2912
3176
|
mode,
|
|
2913
3177
|
setMode,
|
|
2914
|
-
|
|
3178
|
+
productContext,
|
|
3179
|
+
setProductContext,
|
|
3180
|
+
theme: themeConfig(mode, productContext)
|
|
2915
3181
|
}),
|
|
2916
|
-
[mode]
|
|
3182
|
+
[mode, productContext]
|
|
2917
3183
|
);
|
|
2918
3184
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DesignSystemContext.Provider, { value, children: [
|
|
2919
3185
|
loadFonts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontLoader, {}),
|
|
@@ -2927,7 +3193,10 @@ var useDesignSystem = () => {
|
|
|
2927
3193
|
mode: "dark",
|
|
2928
3194
|
setMode: () => {
|
|
2929
3195
|
},
|
|
2930
|
-
|
|
3196
|
+
productContext: defaultProductContext,
|
|
3197
|
+
setProductContext: () => {
|
|
3198
|
+
},
|
|
3199
|
+
theme: themeConfig("dark", defaultProductContext)
|
|
2931
3200
|
};
|
|
2932
3201
|
}
|
|
2933
3202
|
return context;
|
|
@@ -2947,8 +3216,11 @@ var useModalId = () => (0, import_react2.useContext)(ModalIdContext);
|
|
|
2947
3216
|
ModalIdContext,
|
|
2948
3217
|
XUIProvider,
|
|
2949
3218
|
colors,
|
|
3219
|
+
defaultProductContext,
|
|
2950
3220
|
fontFacesCSS,
|
|
2951
3221
|
fonts,
|
|
3222
|
+
getTypographyTokens,
|
|
3223
|
+
getTypographyVariant,
|
|
2952
3224
|
isAndroid,
|
|
2953
3225
|
isIOS,
|
|
2954
3226
|
isNative,
|
|
@@ -2958,6 +3230,7 @@ var useModalId = () => (0, import_react2.useContext)(ModalIdContext);
|
|
|
2958
3230
|
spacing,
|
|
2959
3231
|
themeConfig,
|
|
2960
3232
|
typography,
|
|
3233
|
+
typographyTokens,
|
|
2961
3234
|
useDesignSystem,
|
|
2962
3235
|
useId,
|
|
2963
3236
|
useModalId
|