@joydle/ui 0.1.3 → 0.1.5
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/dist/core/GameShell.d.ts +12 -4
- package/dist/core/GameShell.d.ts.map +1 -1
- package/dist/core/GameShell.js +9 -3
- package/dist/core/GameShell.js.map +1 -1
- package/dist/hud/HUD.d.ts +16 -8
- package/dist/hud/HUD.d.ts.map +1 -1
- package/dist/hud/HUD.js +61 -23
- package/dist/hud/HUD.js.map +1 -1
- package/dist/theme/ThemeProvider.js +1 -1
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/package.json +1 -1
package/dist/core/GameShell.d.ts
CHANGED
|
@@ -5,9 +5,9 @@ import { GameState } from './GameState';
|
|
|
5
5
|
import type { BridgeInstance, ThemeConfig, GameStateShape } from './types';
|
|
6
6
|
export interface GameContextValue {
|
|
7
7
|
inputManager: InputManager;
|
|
8
|
-
scaleManager: ScaleManager;
|
|
8
|
+
scaleManager: ScaleManager | null;
|
|
9
9
|
gameState: GameState<GameStateShape>;
|
|
10
|
-
bridge: BridgeInstance;
|
|
10
|
+
bridge: BridgeInstance | null;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
13
|
* Context shared with all descendant components.
|
|
@@ -19,8 +19,12 @@ export interface GameShellProps {
|
|
|
19
19
|
width: number;
|
|
20
20
|
/** Logical game height in pixels. */
|
|
21
21
|
height: number;
|
|
22
|
-
/**
|
|
23
|
-
|
|
22
|
+
/**
|
|
23
|
+
* The renderer bridge instance.
|
|
24
|
+
* May be `null` for bridges that initialise asynchronously (e.g. usePhaser).
|
|
25
|
+
* GameShell renders the overlay immediately; canvas mounts once ready.
|
|
26
|
+
*/
|
|
27
|
+
renderer: BridgeInstance | null;
|
|
24
28
|
/** Optional theme configuration. */
|
|
25
29
|
theme?: ThemeConfig;
|
|
26
30
|
/** Canvas scale mode (default: `"letterbox"`). */
|
|
@@ -33,6 +37,10 @@ export interface GameShellProps {
|
|
|
33
37
|
* manager. Renders an overlay `<div>` on top of the canvas for HUD /
|
|
34
38
|
* screen components.
|
|
35
39
|
*
|
|
40
|
+
* Accepts `renderer={null}` for bridges that init asynchronously — the
|
|
41
|
+
* overlay (HUD, screens) renders immediately; the canvas mounts once the
|
|
42
|
+
* bridge becomes non-null.
|
|
43
|
+
*
|
|
36
44
|
* ```tsx
|
|
37
45
|
* <GameShell width={800} height={600} renderer={bridge}>
|
|
38
46
|
* <HUD />
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GameShell.d.ts","sourceRoot":"","sources":["../../src/core/GameShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI3E,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"GameShell.d.ts","sourceRoot":"","sources":["../../src/core/GameShell.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI3E,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IACrC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;CAC/B;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,mDAA+C,CAAC;AAIxE,MAAM,WAAW,cAAc;IAC7B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,oCAAoC;IACpC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,kDAAkD;IAClD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAsBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,SAAuB,EACvB,QAAQ,GACT,EAAE,cAAc,gCAkFhB"}
|
package/dist/core/GameShell.js
CHANGED
|
@@ -33,6 +33,10 @@ const OVERLAY_STYLE = {
|
|
|
33
33
|
* manager. Renders an overlay `<div>` on top of the canvas for HUD /
|
|
34
34
|
* screen components.
|
|
35
35
|
*
|
|
36
|
+
* Accepts `renderer={null}` for bridges that init asynchronously — the
|
|
37
|
+
* overlay (HUD, screens) renders immediately; the canvas mounts once the
|
|
38
|
+
* bridge becomes non-null.
|
|
39
|
+
*
|
|
36
40
|
* ```tsx
|
|
37
41
|
* <GameShell width={800} height={600} renderer={bridge}>
|
|
38
42
|
* <HUD />
|
|
@@ -43,7 +47,7 @@ export function GameShell({ width, height, renderer, theme, scaleMode = 'letterb
|
|
|
43
47
|
const containerRef = useRef(null);
|
|
44
48
|
// Stable managers created once per mount.
|
|
45
49
|
const inputManager = useMemo(() => new InputManager(), []);
|
|
46
|
-
const scaleManager = useMemo(() => new ScaleManager(renderer.canvas, width, height, scaleMode),
|
|
50
|
+
const scaleManager = useMemo(() => renderer ? new ScaleManager(renderer.canvas, width, height, scaleMode) : null,
|
|
47
51
|
// Intentionally only depends on renderer identity.
|
|
48
52
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
49
53
|
[renderer]);
|
|
@@ -51,7 +55,7 @@ export function GameShell({ width, height, renderer, theme, scaleMode = 'letterb
|
|
|
51
55
|
// Mount the renderer canvas into our container.
|
|
52
56
|
useEffect(() => {
|
|
53
57
|
const container = containerRef.current;
|
|
54
|
-
if (!container)
|
|
58
|
+
if (!container || !renderer)
|
|
55
59
|
return;
|
|
56
60
|
renderer.mount(container);
|
|
57
61
|
// Attach the renderer's input adapter to our InputManager.
|
|
@@ -59,6 +63,8 @@ export function GameShell({ width, height, renderer, theme, scaleMode = 'letterb
|
|
|
59
63
|
adapter.attach(inputManager, renderer.canvas);
|
|
60
64
|
// Notify the renderer of the logical size.
|
|
61
65
|
renderer.resize(width, height);
|
|
66
|
+
// Now that canvas is in the DOM, trigger initial scale.
|
|
67
|
+
scaleManager?.resize();
|
|
62
68
|
return () => {
|
|
63
69
|
adapter.detach();
|
|
64
70
|
renderer.dispose();
|
|
@@ -69,7 +75,7 @@ export function GameShell({ width, height, renderer, theme, scaleMode = 'letterb
|
|
|
69
75
|
useEffect(() => {
|
|
70
76
|
return () => {
|
|
71
77
|
inputManager.destroy();
|
|
72
|
-
scaleManager
|
|
78
|
+
scaleManager?.destroy();
|
|
73
79
|
};
|
|
74
80
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
75
81
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GameShell.js","sourceRoot":"","sources":["../../src/core/GameShell.tsx"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,kDAAkD;AAClD,8EAA8E;AAE9E,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAkB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAYxC;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"GameShell.js","sourceRoot":"","sources":["../../src/core/GameShell.tsx"],"names":[],"mappings":"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"}
|
package/dist/hud/HUD.d.ts
CHANGED
|
@@ -2,18 +2,26 @@ import type { ComponentChildren, FunctionComponent } from 'preact';
|
|
|
2
2
|
interface SlotProps {
|
|
3
3
|
children?: ComponentChildren;
|
|
4
4
|
}
|
|
5
|
-
declare const
|
|
6
|
-
declare const
|
|
7
|
-
declare const
|
|
8
|
-
declare const
|
|
5
|
+
declare const TopLeft: FunctionComponent<SlotProps>;
|
|
6
|
+
declare const TopCenter: FunctionComponent<SlotProps>;
|
|
7
|
+
declare const TopRight: FunctionComponent<SlotProps>;
|
|
8
|
+
declare const BottomLeft: FunctionComponent<SlotProps>;
|
|
9
|
+
declare const BottomCenter: FunctionComponent<SlotProps>;
|
|
10
|
+
declare const BottomRight: FunctionComponent<SlotProps>;
|
|
9
11
|
export interface HUDProps {
|
|
10
12
|
children?: ComponentChildren;
|
|
11
13
|
}
|
|
12
14
|
interface HUDComponent extends FunctionComponent<HUDProps> {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
TopLeft: typeof TopLeft;
|
|
16
|
+
TopCenter: typeof TopCenter;
|
|
17
|
+
TopRight: typeof TopRight;
|
|
18
|
+
BottomLeft: typeof BottomLeft;
|
|
19
|
+
BottomCenter: typeof BottomCenter;
|
|
20
|
+
BottomRight: typeof BottomRight;
|
|
21
|
+
Left: typeof TopLeft;
|
|
22
|
+
Center: typeof TopCenter;
|
|
23
|
+
Right: typeof TopRight;
|
|
24
|
+
Bottom: typeof BottomCenter;
|
|
17
25
|
}
|
|
18
26
|
export declare const HUD: HUDComponent;
|
|
19
27
|
export {};
|
package/dist/hud/HUD.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HUD.d.ts","sourceRoot":"","sources":["../../src/hud/HUD.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"HUD.d.ts","sourceRoot":"","sources":["../../src/hud/HUD.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAInE,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAmFD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAEzC,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,SAAS,CAE3C,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,SAAS,CAE1C,CAAC;AAEF,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,SAAS,CAE5C,CAAC;AAEF,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,SAAS,CAE9C,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,SAAS,CAE7C,CAAC;AAIF,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAID,UAAU,YAAa,SAAQ,iBAAiB,CAAC,QAAQ,CAAC;IAExD,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,SAAS,EAAE,OAAO,SAAS,CAAC;IAC5B,QAAQ,EAAE,OAAO,QAAQ,CAAC;IAC1B,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,YAAY,EAAE,OAAO,YAAY,CAAC;IAClC,WAAW,EAAE,OAAO,WAAW,CAAC;IAEhC,IAAI,EAAE,OAAO,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,SAAS,CAAC;IACzB,KAAK,EAAE,OAAO,QAAQ,CAAC;IACvB,MAAM,EAAE,OAAO,YAAY,CAAC;CAC7B;AAoCD,eAAO,MAAM,GAAG,EAAE,YAahB,CAAC"}
|
package/dist/hud/HUD.js
CHANGED
|
@@ -15,7 +15,8 @@ const HUD_STYLE = {
|
|
|
15
15
|
boxSizing: 'border-box',
|
|
16
16
|
fontFamily: 'var(--joydle-font, sans-serif)',
|
|
17
17
|
};
|
|
18
|
-
|
|
18
|
+
// -- Row 1 (top) --
|
|
19
|
+
const TOP_LEFT_STYLE = {
|
|
19
20
|
gridColumn: '1',
|
|
20
21
|
gridRow: '1',
|
|
21
22
|
display: 'flex',
|
|
@@ -23,7 +24,7 @@ const LEFT_STYLE = {
|
|
|
23
24
|
alignItems: 'flex-start',
|
|
24
25
|
gap: 8,
|
|
25
26
|
};
|
|
26
|
-
const
|
|
27
|
+
const TOP_CENTER_STYLE = {
|
|
27
28
|
gridColumn: '2',
|
|
28
29
|
gridRow: '1',
|
|
29
30
|
display: 'flex',
|
|
@@ -31,7 +32,7 @@ const CENTER_STYLE = {
|
|
|
31
32
|
alignItems: 'center',
|
|
32
33
|
gap: 8,
|
|
33
34
|
};
|
|
34
|
-
const
|
|
35
|
+
const TOP_RIGHT_STYLE = {
|
|
35
36
|
gridColumn: '3',
|
|
36
37
|
gridRow: '1',
|
|
37
38
|
display: 'flex',
|
|
@@ -39,8 +40,18 @@ const RIGHT_STYLE = {
|
|
|
39
40
|
alignItems: 'flex-end',
|
|
40
41
|
gap: 8,
|
|
41
42
|
};
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
// -- Row 3 (bottom) --
|
|
44
|
+
const BOTTOM_LEFT_STYLE = {
|
|
45
|
+
gridColumn: '1',
|
|
46
|
+
gridRow: '3',
|
|
47
|
+
display: 'flex',
|
|
48
|
+
flexDirection: 'column',
|
|
49
|
+
alignItems: 'flex-start',
|
|
50
|
+
justifyContent: 'flex-end',
|
|
51
|
+
gap: 8,
|
|
52
|
+
};
|
|
53
|
+
const BOTTOM_CENTER_STYLE = {
|
|
54
|
+
gridColumn: '2',
|
|
44
55
|
gridRow: '3',
|
|
45
56
|
display: 'flex',
|
|
46
57
|
flexDirection: 'row',
|
|
@@ -48,36 +59,63 @@ const BOTTOM_STYLE = {
|
|
|
48
59
|
justifyContent: 'center',
|
|
49
60
|
gap: 16,
|
|
50
61
|
};
|
|
62
|
+
const BOTTOM_RIGHT_STYLE = {
|
|
63
|
+
gridColumn: '3',
|
|
64
|
+
gridRow: '3',
|
|
65
|
+
display: 'flex',
|
|
66
|
+
flexDirection: 'column',
|
|
67
|
+
alignItems: 'flex-end',
|
|
68
|
+
justifyContent: 'flex-end',
|
|
69
|
+
gap: 8,
|
|
70
|
+
};
|
|
51
71
|
// ---- Sub-components -------------------------------------------------------
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
const
|
|
55
|
-
const
|
|
72
|
+
const TopLeft = ({ children }) => (_jsx("div", { class: "joydle-hud-top-left", style: TOP_LEFT_STYLE, children: children }));
|
|
73
|
+
const TopCenter = ({ children }) => (_jsx("div", { class: "joydle-hud-top-center", style: TOP_CENTER_STYLE, children: children }));
|
|
74
|
+
const TopRight = ({ children }) => (_jsx("div", { class: "joydle-hud-top-right", style: TOP_RIGHT_STYLE, children: children }));
|
|
75
|
+
const BottomLeft = ({ children }) => (_jsx("div", { class: "joydle-hud-bottom-left", style: BOTTOM_LEFT_STYLE, children: children }));
|
|
76
|
+
const BottomCenter = ({ children }) => (_jsx("div", { class: "joydle-hud-bottom-center", style: BOTTOM_CENTER_STYLE, children: children }));
|
|
77
|
+
const BottomRight = ({ children }) => (_jsx("div", { class: "joydle-hud-bottom-right", style: BOTTOM_RIGHT_STYLE, children: children }));
|
|
56
78
|
/**
|
|
57
|
-
* HUD layout
|
|
58
|
-
*
|
|
59
|
-
* Renders as an absolute-positioned overlay (z-index: 10) with pointer-events
|
|
60
|
-
* disabled. Individual HUD widgets opt in to pointer-events as needed.
|
|
79
|
+
* HUD layout — 3×3 grid overlay with 6 named edge slots.
|
|
61
80
|
*
|
|
62
81
|
* ```tsx
|
|
63
82
|
* <HUD>
|
|
64
|
-
* <HUD.
|
|
83
|
+
* <HUD.TopLeft>
|
|
65
84
|
* <Lives current={3} max={5} />
|
|
66
|
-
* </HUD.
|
|
67
|
-
* <HUD.
|
|
85
|
+
* </HUD.TopLeft>
|
|
86
|
+
* <HUD.TopCenter>
|
|
68
87
|
* <Score value={12500} />
|
|
69
|
-
* </HUD.
|
|
70
|
-
* <HUD.
|
|
88
|
+
* </HUD.TopCenter>
|
|
89
|
+
* <HUD.TopRight>
|
|
71
90
|
* <Timer seconds={90} />
|
|
72
|
-
* </HUD.
|
|
91
|
+
* </HUD.TopRight>
|
|
92
|
+
* <HUD.BottomLeft>
|
|
93
|
+
* <MiniMap ... />
|
|
94
|
+
* </HUD.BottomLeft>
|
|
95
|
+
* <HUD.BottomCenter>
|
|
96
|
+
* <BottomHint>WASD to move</BottomHint>
|
|
97
|
+
* </HUD.BottomCenter>
|
|
98
|
+
* <HUD.BottomRight>
|
|
99
|
+
* <ResourceDisplay current={12} max={30} label="Ammo" />
|
|
100
|
+
* </HUD.BottomRight>
|
|
73
101
|
* </HUD>
|
|
74
102
|
* ```
|
|
103
|
+
*
|
|
104
|
+
* Legacy aliases `Left`, `Center`, `Right`, `Bottom` still work.
|
|
75
105
|
*/
|
|
76
106
|
const HUDBase = ({ children }) => (_jsx("div", { class: "joydle-hud", style: HUD_STYLE, children: children }));
|
|
77
107
|
export const HUD = Object.assign(HUDBase, {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
108
|
+
// Canonical
|
|
109
|
+
TopLeft,
|
|
110
|
+
TopCenter,
|
|
111
|
+
TopRight,
|
|
112
|
+
BottomLeft,
|
|
113
|
+
BottomCenter,
|
|
114
|
+
BottomRight,
|
|
115
|
+
// Legacy aliases
|
|
116
|
+
Left: TopLeft,
|
|
117
|
+
Center: TopCenter,
|
|
118
|
+
Right: TopRight,
|
|
119
|
+
Bottom: BottomCenter,
|
|
82
120
|
});
|
|
83
121
|
//# sourceMappingURL=HUD.js.map
|
package/dist/hud/HUD.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HUD.js","sourceRoot":"","sources":["../../src/hud/HUD.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"HUD.js","sourceRoot":"","sources":["../../src/hud/HUD.tsx"],"names":[],"mappings":"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"}
|
|
@@ -46,6 +46,6 @@ export function ThemeProvider({ theme, children }) {
|
|
|
46
46
|
'--joydle-glow-spread': glow.spread,
|
|
47
47
|
};
|
|
48
48
|
}, [theme]);
|
|
49
|
-
return (_jsx("div", { class: "joydle-theme", style: style, children: children }));
|
|
49
|
+
return (_jsx("div", { class: "joydle-theme", style: { ...style, width: '100%', height: '100%' }, children: children }));
|
|
50
50
|
}
|
|
51
51
|
//# sourceMappingURL=ThemeProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,uCAAuC;AACvC,8EAA8E;AAE9E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAIvC,8EAA8E;AAE9E,uDAAuD;AACvD,MAAM,QAAQ,GAA2D;IACvE,IAAI,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IAChC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;IACtC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;IACtC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE;CACxC,CAAC;AAWF,8EAA8E;AAE9E;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAsB;IACnE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC1C,OAAO;YACL,aAAa,EAAE,KAAK,CAAC,EAAE;YACvB,kBAAkB,EAAE,KAAK,CAAC,OAAO;YACjC,iBAAiB,EAAE,KAAK,CAAC,MAAM;YAC/B,oBAAoB,EAAE,KAAK,CAAC,SAAS;YACrC,eAAe,EAAE,KAAK,CAAC,IAAI;YAC3B,kBAAkB,EAAE,KAAK,CAAC,OAAO;YACjC,iBAAiB,EAAE,KAAK,CAAC,MAAM;YAC/B,eAAe,EAAE,KAAK,CAAC,IAAI;YAC3B,mBAAmB,EAAE,KAAK,CAAC,OAAO;YAClC,eAAe,EAAE,KAAK,CAAC,IAAI;YAC3B,wBAAwB,EAAE,GAAG,KAAK,CAAC,YAAY,IAAI;YACnD,oBAAoB,EAAE,IAAI,CAAC,IAAI;YAC/B,sBAAsB,EAAE,IAAI,CAAC,MAAM;SACV,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,cAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,uCAAuC;AACvC,8EAA8E;AAE9E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAIvC,8EAA8E;AAE9E,uDAAuD;AACvD,MAAM,QAAQ,GAA2D;IACvE,IAAI,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;IAChC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;IACtC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE;IACtC,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE;CACxC,CAAC;AAWF,8EAA8E;AAE9E;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAsB;IACnE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAC1C,OAAO;YACL,aAAa,EAAE,KAAK,CAAC,EAAE;YACvB,kBAAkB,EAAE,KAAK,CAAC,OAAO;YACjC,iBAAiB,EAAE,KAAK,CAAC,MAAM;YAC/B,oBAAoB,EAAE,KAAK,CAAC,SAAS;YACrC,eAAe,EAAE,KAAK,CAAC,IAAI;YAC3B,kBAAkB,EAAE,KAAK,CAAC,OAAO;YACjC,iBAAiB,EAAE,KAAK,CAAC,MAAM;YAC/B,eAAe,EAAE,KAAK,CAAC,IAAI;YAC3B,mBAAmB,EAAE,KAAK,CAAC,OAAO;YAClC,eAAe,EAAE,KAAK,CAAC,IAAI;YAC3B,wBAAwB,EAAE,GAAG,KAAK,CAAC,YAAY,IAAI;YACnD,oBAAoB,EAAE,IAAI,CAAC,IAAI;YAC/B,sBAAsB,EAAE,IAAI,CAAC,MAAM;SACV,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,cAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YACzE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}
|