@jalvin/ui 2.0.43 → 2.0.44
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/annotated-string.d.ts +2 -4
- package/dist/annotated-string.d.ts.map +1 -1
- package/dist/annotated-string.js +19 -17
- package/dist/annotated-string.js.map +1 -1
- package/dist/button.d.ts +2 -3
- package/dist/button.d.ts.map +1 -1
- package/dist/button.js +8 -12
- package/dist/button.js.map +1 -1
- package/dist/canvas.d.ts +3 -3
- package/dist/canvas.d.ts.map +1 -1
- package/dist/canvas.js +31 -40
- package/dist/canvas.js.map +1 -1
- package/dist/checkbox.d.ts +1 -2
- package/dist/checkbox.d.ts.map +1 -1
- package/dist/checkbox.js +18 -11
- package/dist/checkbox.js.map +1 -1
- package/dist/image.d.ts +4 -6
- package/dist/image.d.ts.map +1 -1
- package/dist/image.js +32 -21
- package/dist/image.js.map +1 -1
- package/dist/index.d.ts +15 -14
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +17 -19
- package/dist/index.js.map +1 -1
- package/dist/input.d.ts +1 -3
- package/dist/input.d.ts.map +1 -1
- package/dist/input.js +20 -13
- package/dist/input.js.map +1 -1
- package/dist/interaction.d.ts.map +1 -1
- package/dist/interaction.js +9 -27
- package/dist/interaction.js.map +1 -1
- package/dist/layout.d.ts +3 -7
- package/dist/layout.d.ts.map +1 -1
- package/dist/layout.js +10 -10
- package/dist/layout.js.map +1 -1
- package/dist/spacer.d.ts +2 -3
- package/dist/spacer.d.ts.map +1 -1
- package/dist/spacer.js +5 -5
- package/dist/spacer.js.map +1 -1
- package/dist/surface.d.ts +9 -10
- package/dist/surface.d.ts.map +1 -1
- package/dist/surface.js +30 -13
- package/dist/surface.js.map +1 -1
- package/dist/text.d.ts +3 -5
- package/dist/text.d.ts.map +1 -1
- package/dist/text.js +23 -12
- package/dist/text.js.map +1 -1
- package/dist/textarea.d.ts +1 -3
- package/dist/textarea.d.ts.map +1 -1
- package/dist/textarea.js +20 -13
- package/dist/textarea.js.map +1 -1
- package/dist/typography.d.ts +101 -129
- package/dist/typography.d.ts.map +1 -1
- package/dist/typography.js +29 -25
- package/dist/typography.js.map +1 -1
- package/package.json +2 -2
package/dist/surface.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jalvinCreateElement } from "@jalvin/runtime";
|
|
2
2
|
const SHADOWS = [
|
|
3
3
|
"none",
|
|
4
4
|
"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)",
|
|
@@ -8,7 +8,7 @@ const SHADOWS = [
|
|
|
8
8
|
/** Card container. */
|
|
9
9
|
export function Card({ modifier, onClick, elevation = 1, outlined = false, }, children) {
|
|
10
10
|
const modProps = modifier?.toProps() ?? {};
|
|
11
|
-
return
|
|
11
|
+
return jalvinCreateElement("div", {
|
|
12
12
|
...modProps,
|
|
13
13
|
onClick,
|
|
14
14
|
role: onClick ? "button" : undefined,
|
|
@@ -22,14 +22,28 @@ export function Card({ modifier, onClick, elevation = 1, outlined = false, }, ch
|
|
|
22
22
|
cursor: onClick ? "pointer" : "default",
|
|
23
23
|
...modProps.style,
|
|
24
24
|
},
|
|
25
|
-
},
|
|
25
|
+
}, children ?? []);
|
|
26
26
|
}
|
|
27
27
|
/**
|
|
28
28
|
* Full-page layout scaffold. Stacks topBar, scrollable content, and bottomBar.
|
|
29
29
|
*/
|
|
30
30
|
export function Scaffold({ topBar, bottomBar, floatingActionButton, modifier, }, children) {
|
|
31
31
|
const modProps = modifier?.toProps() ?? {};
|
|
32
|
-
|
|
32
|
+
const main = jalvinCreateElement("main", {
|
|
33
|
+
style: { flex: 1, overflow: "auto", WebkitOverflowScrolling: "touch" },
|
|
34
|
+
}, children ?? []);
|
|
35
|
+
const scaffoldChildren = [];
|
|
36
|
+
if (topBar)
|
|
37
|
+
scaffoldChildren.push(topBar);
|
|
38
|
+
scaffoldChildren.push(main);
|
|
39
|
+
if (bottomBar)
|
|
40
|
+
scaffoldChildren.push(bottomBar);
|
|
41
|
+
if (floatingActionButton) {
|
|
42
|
+
scaffoldChildren.push(jalvinCreateElement("div", {
|
|
43
|
+
style: { position: "absolute", bottom: "16px", right: "16px" },
|
|
44
|
+
}, [floatingActionButton]));
|
|
45
|
+
}
|
|
46
|
+
return jalvinCreateElement("div", {
|
|
33
47
|
...modProps,
|
|
34
48
|
style: {
|
|
35
49
|
display: "flex",
|
|
@@ -39,16 +53,21 @@ export function Scaffold({ topBar, bottomBar, floatingActionButton, modifier, },
|
|
|
39
53
|
position: "relative",
|
|
40
54
|
...modProps.style,
|
|
41
55
|
},
|
|
42
|
-
},
|
|
43
|
-
style: { flex: 1, overflow: "auto", WebkitOverflowScrolling: "touch" },
|
|
44
|
-
}, ...(children ?? [])), bottomBar, floatingActionButton && React.createElement("div", {
|
|
45
|
-
style: { position: "absolute", bottom: "16px", right: "16px" },
|
|
46
|
-
}, floatingActionButton));
|
|
56
|
+
}, scaffoldChildren);
|
|
47
57
|
}
|
|
48
58
|
/** App top bar. */
|
|
49
59
|
export function TopBar({ title, navigationIcon, actions, modifier, }) {
|
|
50
60
|
const modProps = modifier?.toProps() ?? {};
|
|
51
|
-
|
|
61
|
+
const titleNode = title;
|
|
62
|
+
const barChildren = [];
|
|
63
|
+
if (navigationIcon)
|
|
64
|
+
barChildren.push(navigationIcon);
|
|
65
|
+
barChildren.push(jalvinCreateElement("span", {
|
|
66
|
+
style: { flex: 1, fontSize: "1.375rem", fontWeight: 500 },
|
|
67
|
+
}, [titleNode]));
|
|
68
|
+
if (actions)
|
|
69
|
+
barChildren.push(actions);
|
|
70
|
+
return jalvinCreateElement("header", {
|
|
52
71
|
...modProps,
|
|
53
72
|
style: {
|
|
54
73
|
display: "flex",
|
|
@@ -61,8 +80,6 @@ export function TopBar({ title, navigationIcon, actions, modifier, }) {
|
|
|
61
80
|
flexShrink: 0,
|
|
62
81
|
...modProps.style,
|
|
63
82
|
},
|
|
64
|
-
},
|
|
65
|
-
style: { flex: 1, fontSize: "1.375rem", fontWeight: 500 },
|
|
66
|
-
}, title), actions);
|
|
83
|
+
}, barChildren);
|
|
67
84
|
}
|
|
68
85
|
//# sourceMappingURL=surface.js.map
|
package/dist/surface.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"surface.js","sourceRoot":"","sources":["../src/surface.
|
|
1
|
+
{"version":3,"file":"surface.js","sourceRoot":"","sources":["../src/surface.ts"],"names":[],"mappings":"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"}
|
package/dist/text.d.ts
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
import React from "react";
|
|
2
1
|
import { Modifier } from "./modifier.js";
|
|
3
2
|
import { type TextStyleDef } from "./typography.js";
|
|
4
|
-
import type { CSSProperties } from "react";
|
|
5
3
|
import { type AnnotatedString } from "./annotated-string.js";
|
|
6
4
|
export interface TextProps {
|
|
7
|
-
children?:
|
|
5
|
+
children?: Node[];
|
|
8
6
|
/** Plain string content or an AnnotatedString (for inline links / spans). */
|
|
9
7
|
text?: string | AnnotatedString;
|
|
10
8
|
modifier?: Modifier;
|
|
11
9
|
/** Typography style — use TextStyle tokens (e.g. TextStyle.headlineLarge) */
|
|
12
|
-
style?: TextStyleDef |
|
|
10
|
+
style?: TextStyleDef | Record<string, any>;
|
|
13
11
|
color?: string;
|
|
14
12
|
maxLines?: number;
|
|
15
13
|
}
|
|
16
14
|
/** Text element. Accepts plain strings or AnnotatedStrings with inline links and spans. */
|
|
17
|
-
export declare function Text({ children, text, modifier, style, color, maxLines, }: TextProps):
|
|
15
|
+
export declare function Text({ children, text, modifier, style, color, maxLines, }: TextProps): HTMLElement;
|
|
18
16
|
//# sourceMappingURL=text.d.ts.map
|
package/dist/text.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../src/text.
|
|
1
|
+
{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../src/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,KAAK,YAAY,EAAkB,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,KAAK,eAAe,EAAyB,MAAM,uBAAuB,CAAC;AAGpF,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC;IAClB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,2FAA2F;AAC3F,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,SAAS,GAAG,WAAW,CAiCzB"}
|
package/dist/text.js
CHANGED
|
@@ -1,27 +1,38 @@
|
|
|
1
|
-
import React from "react";
|
|
2
1
|
import { textStyleToCSS } from "./typography.js";
|
|
3
2
|
import { renderAnnotatedString } from "./annotated-string.js";
|
|
3
|
+
import { jalvinCreateElement } from "@jalvin/runtime";
|
|
4
4
|
/** Text element. Accepts plain strings or AnnotatedStrings with inline links and spans. */
|
|
5
5
|
export function Text({ children, text, modifier, style, color, maxLines, }) {
|
|
6
6
|
const modProps = modifier?.toProps() ?? {};
|
|
7
|
-
const textStyle = style ? textStyleToCSS(style) : {};
|
|
7
|
+
const textStyle = style && style.fontSize ? textStyleToCSS(style) : (style ?? {});
|
|
8
8
|
const clampStyle = maxLines !== undefined ? {
|
|
9
9
|
display: "-webkit-box",
|
|
10
10
|
WebkitLineClamp: maxLines,
|
|
11
11
|
WebkitBoxOrient: "vertical",
|
|
12
12
|
overflow: "hidden",
|
|
13
13
|
} : {};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
let content;
|
|
15
|
+
if (typeof text === "object" && text !== null && "spanStyles" in text) {
|
|
16
|
+
content = renderAnnotatedString(text);
|
|
17
|
+
}
|
|
18
|
+
else if (text !== undefined) {
|
|
19
|
+
content = [String(text)];
|
|
20
|
+
}
|
|
21
|
+
else {
|
|
22
|
+
content = children ?? [];
|
|
23
|
+
}
|
|
24
|
+
const finalStyle = {
|
|
25
|
+
...textStyle,
|
|
26
|
+
...clampStyle,
|
|
27
|
+
...modProps.style,
|
|
28
|
+
};
|
|
29
|
+
if (color)
|
|
30
|
+
finalStyle.color = color;
|
|
31
|
+
else if (textStyle.color)
|
|
32
|
+
finalStyle.color = textStyle.color;
|
|
33
|
+
return jalvinCreateElement("span", {
|
|
18
34
|
...modProps,
|
|
19
|
-
style:
|
|
20
|
-
...textStyle,
|
|
21
|
-
color: color ?? textStyle.color,
|
|
22
|
-
...clampStyle,
|
|
23
|
-
...modProps.style,
|
|
24
|
-
},
|
|
35
|
+
style: finalStyle,
|
|
25
36
|
}, content);
|
|
26
37
|
}
|
|
27
38
|
//# sourceMappingURL=text.js.map
|
package/dist/text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text.js","sourceRoot":"","sources":["../src/text.
|
|
1
|
+
{"version":3,"file":"text.js","sourceRoot":"","sources":["../src/text.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAwB,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAatD,2FAA2F;AAC3F,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,GACE;IACV,MAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC3C,MAAM,SAAS,GAAG,KAAK,IAAK,KAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,KAAqB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;IAE3G,MAAM,UAAU,GAAwB,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC;QAC/D,OAAO,EAAE,aAAa;QACtB,eAAe,EAAE,QAAQ;QACzB,eAAe,EAAE,UAAU;QAC3B,QAAQ,EAAE,QAAQ;KACnB,CAAC,CAAC,CAAC,EAAE,CAAC;IAEP,IAAI,OAA6B,CAAC;IAClC,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,IAAI,IAAI,YAAY,IAAI,IAAI,EAAE,CAAC;QACtE,OAAO,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;SAAM,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3B,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,QAAQ,IAAI,EAAE,CAAC;IAC3B,CAAC;IAED,MAAM,UAAU,GAAkB;QAChC,GAAG,SAAS;QACZ,GAAG,UAAU;QACb,GAAG,QAAQ,CAAC,KAAK;KAClB,CAAC;IAEF,IAAI,KAAK;QAAE,UAAU,CAAC,KAAK,GAAG,KAAK,CAAC;SAC/B,IAAI,SAAS,CAAC,KAAK;QAAE,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;IAE7D,OAAO,mBAAmB,CAAC,MAAM,EAAE;QACjC,GAAG,QAAQ;QACX,KAAK,EAAE,UAAU;KAClB,EAAE,OAAO,CAAC,CAAC;AACd,CAAC"}
|
package/dist/textarea.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import React from "react";
|
|
2
1
|
import { Modifier } from "./modifier.js";
|
|
3
2
|
export interface TextAreaProps {
|
|
4
3
|
value?: string;
|
|
@@ -14,9 +13,8 @@ export interface TextAreaProps {
|
|
|
14
13
|
rows?: number;
|
|
15
14
|
onFocus?: () => void;
|
|
16
15
|
onBlur?: () => void;
|
|
17
|
-
onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
18
16
|
autoFocus?: boolean;
|
|
19
17
|
}
|
|
20
18
|
/** Multiline text input. */
|
|
21
|
-
export declare function TextArea({ value, onValueChange, placeholder, modifier, enabled, readOnly, label, supportingText, isError, maxLength, rows, onFocus, onBlur,
|
|
19
|
+
export declare function TextArea({ value, onValueChange, placeholder, modifier, enabled, readOnly, label, supportingText, isError, maxLength, rows, onFocus, onBlur, autoFocus, }: TextAreaProps): HTMLElement;
|
|
22
20
|
//# sourceMappingURL=textarea.d.ts.map
|
package/dist/textarea.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../src/textarea.
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../src/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGzC,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,4BAA4B;AAC5B,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAc,EACd,QAAgB,EAChB,KAAK,EACL,cAAc,EACd,OAAe,EACf,SAAS,EACT,IAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,GACV,EAAE,aAAa,GAAG,WAAW,CAoD7B"}
|
package/dist/textarea.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jalvinCreateElement } from "@jalvin/runtime";
|
|
2
2
|
/** Multiline text input. */
|
|
3
|
-
export function TextArea({ value, onValueChange, placeholder, modifier, enabled = true, readOnly = false, label, supportingText, isError = false, maxLength, rows = 4, onFocus, onBlur,
|
|
3
|
+
export function TextArea({ value, onValueChange, placeholder, modifier, enabled = true, readOnly = false, label, supportingText, isError = false, maxLength, rows = 4, onFocus, onBlur, autoFocus, }) {
|
|
4
4
|
const modProps = modifier?.toProps() ?? {};
|
|
5
5
|
const borderColor = isError ? "#b00020" : "#c4c4c4";
|
|
6
|
-
const textArea =
|
|
6
|
+
const textArea = jalvinCreateElement("textarea", {
|
|
7
7
|
value,
|
|
8
|
-
|
|
8
|
+
onInput: (e) => onValueChange?.(e.target.value),
|
|
9
9
|
placeholder,
|
|
10
10
|
disabled: !enabled,
|
|
11
11
|
readOnly,
|
|
@@ -13,7 +13,6 @@ export function TextArea({ value, onValueChange, placeholder, modifier, enabled
|
|
|
13
13
|
rows,
|
|
14
14
|
onFocus,
|
|
15
15
|
onBlur,
|
|
16
|
-
onKeyDown,
|
|
17
16
|
autoFocus,
|
|
18
17
|
style: {
|
|
19
18
|
width: "100%",
|
|
@@ -29,17 +28,25 @@ export function TextArea({ value, onValueChange, placeholder, modifier, enabled
|
|
|
29
28
|
resize: "vertical",
|
|
30
29
|
lineHeight: 1.4,
|
|
31
30
|
},
|
|
32
|
-
});
|
|
31
|
+
}, []);
|
|
33
32
|
if (!label && !supportingText) {
|
|
34
|
-
return
|
|
33
|
+
return jalvinCreateElement("div", { ...modProps }, [textArea]);
|
|
35
34
|
}
|
|
36
|
-
|
|
35
|
+
const containerChildren = [];
|
|
36
|
+
if (label) {
|
|
37
|
+
containerChildren.push(jalvinCreateElement("label", {
|
|
38
|
+
style: { fontSize: "0.875rem", fontWeight: 500, color: isError ? "#b00020" : "#5c5c5c" },
|
|
39
|
+
}, [document.createTextNode(label)]));
|
|
40
|
+
}
|
|
41
|
+
containerChildren.push(textArea);
|
|
42
|
+
if (supportingText) {
|
|
43
|
+
containerChildren.push(jalvinCreateElement("span", {
|
|
44
|
+
style: { fontSize: "0.75rem", color: isError ? "#b00020" : "#5c5c5c" },
|
|
45
|
+
}, [document.createTextNode(supportingText)]));
|
|
46
|
+
}
|
|
47
|
+
return jalvinCreateElement("div", {
|
|
37
48
|
...modProps,
|
|
38
49
|
style: { display: "flex", flexDirection: "column", gap: "4px", ...modProps.style },
|
|
39
|
-
},
|
|
40
|
-
style: { fontSize: "0.875rem", fontWeight: 500, color: isError ? "#b00020" : "#5c5c5c" },
|
|
41
|
-
}, label), textArea, supportingText && React.createElement("span", {
|
|
42
|
-
style: { fontSize: "0.75rem", color: isError ? "#b00020" : "#5c5c5c" },
|
|
43
|
-
}, supportingText));
|
|
50
|
+
}, containerChildren);
|
|
44
51
|
}
|
|
45
52
|
//# sourceMappingURL=textarea.js.map
|
package/dist/textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../src/textarea.
|
|
1
|
+
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../src/textarea.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAmBtD,4BAA4B;AAC5B,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,aAAa,EACb,WAAW,EACX,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,cAAc,EACd,OAAO,GAAG,KAAK,EACf,SAAS,EACT,IAAI,GAAG,CAAC,EACR,OAAO,EACP,MAAM,EACN,SAAS,GACK;IACd,MAAM,QAAQ,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC3C,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpD,MAAM,QAAQ,GAAG,mBAAmB,CAAC,UAAU,EAAE;QAC/C,KAAK;QACL,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QACpD,WAAW;QACX,QAAQ,EAAE,CAAC,OAAO;QAClB,QAAQ;QACR,SAAS;QACT,IAAI;QACJ,OAAO;QACP,MAAM;QACN,SAAS;QACT,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,UAAU;YACnB,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,SAAS;YACrB,MAAM,EAAE,aAAa,WAAW,EAAE;YAClC,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,MAAM;YACf,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC7C,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE,YAAY;YACvB,MAAM,EAAE,UAAU;YAClB,UAAU,EAAE,GAAG;SAChB;KACF,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;QAC9B,OAAO,mBAAmB,CAAC,KAAK,EAAE,EAAE,GAAG,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjE,CAAC;IAED,MAAM,iBAAiB,GAAW,EAAE,CAAC;IACrC,IAAI,KAAK,EAAE,CAAC;QACV,iBAAiB,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE;YAClD,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;SACzF,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACxC,CAAC;IACD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,cAAc,EAAE,CAAC;QACnB,iBAAiB,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE;YACjD,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;SACvE,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC;IAED,OAAO,mBAAmB,CAAC,KAAK,EAAE;QAChC,GAAG,QAAQ;QACX,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAE;KACnF,EAAE,iBAAiB,CAAC,CAAC;AACxB,CAAC"}
|
package/dist/typography.d.ts
CHANGED
|
@@ -1,137 +1,109 @@
|
|
|
1
|
-
|
|
1
|
+
/** Local definition for standard CSS properties. */
|
|
2
|
+
export type CSSProperties = {
|
|
3
|
+
[key: string]: string | number | undefined;
|
|
4
|
+
};
|
|
2
5
|
export interface TextStyleDef {
|
|
3
|
-
fontSize:
|
|
6
|
+
fontSize: number;
|
|
7
|
+
lineHeight: number;
|
|
4
8
|
fontWeight: number | "bold" | "normal";
|
|
5
|
-
|
|
6
|
-
|
|
9
|
+
letterSpacing: number;
|
|
10
|
+
fontFamily?: string;
|
|
11
|
+
color?: string;
|
|
7
12
|
}
|
|
8
13
|
export declare const TextStyle: {
|
|
9
|
-
displayLarge: {
|
|
10
|
-
fontSize:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
lineHeight:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
fontWeight:
|
|
37
|
-
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
fontSize:
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
lineHeight:
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
lineHeight:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
lineHeight:
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
lineHeight:
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
lineHeight:
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
lineHeight:
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
lineHeight:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
lineHeight:
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
lineHeight:
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
fontSize: string;
|
|
99
|
-
fontWeight: "bold";
|
|
100
|
-
lineHeight: string;
|
|
101
|
-
};
|
|
102
|
-
h3: {
|
|
103
|
-
fontSize: string;
|
|
104
|
-
fontWeight: "bold";
|
|
105
|
-
lineHeight: string;
|
|
106
|
-
};
|
|
107
|
-
h4: {
|
|
108
|
-
fontSize: string;
|
|
109
|
-
fontWeight: "bold";
|
|
110
|
-
lineHeight: string;
|
|
111
|
-
};
|
|
112
|
-
body: {
|
|
113
|
-
fontSize: string;
|
|
114
|
-
fontWeight: "normal";
|
|
115
|
-
lineHeight: string;
|
|
116
|
-
};
|
|
117
|
-
caption: {
|
|
118
|
-
fontSize: string;
|
|
119
|
-
fontWeight: "normal";
|
|
120
|
-
lineHeight: string;
|
|
121
|
-
};
|
|
122
|
-
button: {
|
|
123
|
-
fontSize: string;
|
|
124
|
-
fontWeight: number;
|
|
125
|
-
lineHeight: string;
|
|
126
|
-
letterSpacing: string;
|
|
127
|
-
};
|
|
128
|
-
code: {
|
|
129
|
-
fontSize: string;
|
|
130
|
-
fontWeight: "normal";
|
|
131
|
-
lineHeight: string;
|
|
132
|
-
letterSpacing: string;
|
|
14
|
+
readonly displayLarge: {
|
|
15
|
+
readonly fontSize: 57;
|
|
16
|
+
readonly lineHeight: 64;
|
|
17
|
+
readonly fontWeight: 400;
|
|
18
|
+
readonly letterSpacing: -0.25;
|
|
19
|
+
};
|
|
20
|
+
readonly displayMedium: {
|
|
21
|
+
readonly fontSize: 45;
|
|
22
|
+
readonly lineHeight: 52;
|
|
23
|
+
readonly fontWeight: 400;
|
|
24
|
+
readonly letterSpacing: 0;
|
|
25
|
+
};
|
|
26
|
+
readonly displaySmall: {
|
|
27
|
+
readonly fontSize: 36;
|
|
28
|
+
readonly lineHeight: 44;
|
|
29
|
+
readonly fontWeight: 400;
|
|
30
|
+
readonly letterSpacing: 0;
|
|
31
|
+
};
|
|
32
|
+
readonly headlineLarge: {
|
|
33
|
+
readonly fontSize: 32;
|
|
34
|
+
readonly lineHeight: 40;
|
|
35
|
+
readonly fontWeight: 400;
|
|
36
|
+
readonly letterSpacing: 0;
|
|
37
|
+
};
|
|
38
|
+
readonly headlineMedium: {
|
|
39
|
+
readonly fontSize: 28;
|
|
40
|
+
readonly lineHeight: 36;
|
|
41
|
+
readonly fontWeight: 400;
|
|
42
|
+
readonly letterSpacing: 0;
|
|
43
|
+
};
|
|
44
|
+
readonly headlineSmall: {
|
|
45
|
+
readonly fontSize: 24;
|
|
46
|
+
readonly lineHeight: 32;
|
|
47
|
+
readonly fontWeight: 400;
|
|
48
|
+
readonly letterSpacing: 0;
|
|
49
|
+
};
|
|
50
|
+
readonly titleLarge: {
|
|
51
|
+
readonly fontSize: 22;
|
|
52
|
+
readonly lineHeight: 28;
|
|
53
|
+
readonly fontWeight: 400;
|
|
54
|
+
readonly letterSpacing: 0;
|
|
55
|
+
};
|
|
56
|
+
readonly titleMedium: {
|
|
57
|
+
readonly fontSize: 16;
|
|
58
|
+
readonly lineHeight: 24;
|
|
59
|
+
readonly fontWeight: 500;
|
|
60
|
+
readonly letterSpacing: 0.15;
|
|
61
|
+
};
|
|
62
|
+
readonly titleSmall: {
|
|
63
|
+
readonly fontSize: 14;
|
|
64
|
+
readonly lineHeight: 20;
|
|
65
|
+
readonly fontWeight: 500;
|
|
66
|
+
readonly letterSpacing: 0.1;
|
|
67
|
+
};
|
|
68
|
+
readonly labelLarge: {
|
|
69
|
+
readonly fontSize: 14;
|
|
70
|
+
readonly lineHeight: 20;
|
|
71
|
+
readonly fontWeight: 500;
|
|
72
|
+
readonly letterSpacing: 0.1;
|
|
73
|
+
};
|
|
74
|
+
readonly labelMedium: {
|
|
75
|
+
readonly fontSize: 12;
|
|
76
|
+
readonly lineHeight: 16;
|
|
77
|
+
readonly fontWeight: 500;
|
|
78
|
+
readonly letterSpacing: 0.5;
|
|
79
|
+
};
|
|
80
|
+
readonly labelSmall: {
|
|
81
|
+
readonly fontSize: 11;
|
|
82
|
+
readonly lineHeight: 16;
|
|
83
|
+
readonly fontWeight: 500;
|
|
84
|
+
readonly letterSpacing: 0.5;
|
|
85
|
+
};
|
|
86
|
+
readonly bodyLarge: {
|
|
87
|
+
readonly fontSize: 16;
|
|
88
|
+
readonly lineHeight: 24;
|
|
89
|
+
readonly fontWeight: 400;
|
|
90
|
+
readonly letterSpacing: 0.5;
|
|
91
|
+
};
|
|
92
|
+
readonly bodyMedium: {
|
|
93
|
+
readonly fontSize: 14;
|
|
94
|
+
readonly lineHeight: 20;
|
|
95
|
+
readonly fontWeight: 400;
|
|
96
|
+
readonly letterSpacing: 0.25;
|
|
97
|
+
};
|
|
98
|
+
readonly bodySmall: {
|
|
99
|
+
readonly fontSize: 12;
|
|
100
|
+
readonly lineHeight: 16;
|
|
101
|
+
readonly fontWeight: 400;
|
|
102
|
+
readonly letterSpacing: 0.4;
|
|
133
103
|
};
|
|
134
104
|
};
|
|
135
|
-
|
|
105
|
+
/**
|
|
106
|
+
* Converts a TextStyle token to standard CSS properties.
|
|
107
|
+
*/
|
|
136
108
|
export declare function textStyleToCSS(style: TextStyleDef): CSSProperties;
|
|
137
109
|
//# sourceMappingURL=typography.d.ts.map
|
package/dist/typography.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,MAAM,MAAM,aAAa,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;CAAE,CAAC;AAE3E,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IACvC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBZ,CAAC;AAEX;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,GAAG,aAAa,CAUjE"}
|
package/dist/typography.js
CHANGED
|
@@ -1,30 +1,34 @@
|
|
|
1
1
|
export const TextStyle = {
|
|
2
|
-
displayLarge: { fontSize:
|
|
3
|
-
displayMedium: { fontSize:
|
|
4
|
-
displaySmall: { fontSize:
|
|
5
|
-
headlineLarge: { fontSize:
|
|
6
|
-
headlineMedium: { fontSize:
|
|
7
|
-
headlineSmall: { fontSize:
|
|
8
|
-
titleLarge: { fontSize:
|
|
9
|
-
titleMedium: { fontSize:
|
|
10
|
-
titleSmall: { fontSize:
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
// Shortcuts
|
|
18
|
-
h1: { fontSize: "2rem", fontWeight: "bold", lineHeight: "2.5rem" },
|
|
19
|
-
h2: { fontSize: "1.5rem", fontWeight: "bold", lineHeight: "2rem" },
|
|
20
|
-
h3: { fontSize: "1.25rem", fontWeight: "bold", lineHeight: "1.75rem" },
|
|
21
|
-
h4: { fontSize: "1.125rem", fontWeight: "bold", lineHeight: "1.5rem" },
|
|
22
|
-
body: { fontSize: "1rem", fontWeight: "normal", lineHeight: "1.5rem" },
|
|
23
|
-
caption: { fontSize: "0.75rem", fontWeight: "normal", lineHeight: "1rem" },
|
|
24
|
-
button: { fontSize: "0.875rem", fontWeight: 500, lineHeight: "1rem", letterSpacing: "0.031em" },
|
|
25
|
-
code: { fontSize: "0.875rem", fontWeight: "normal", lineHeight: "1.4rem", letterSpacing: "-0.01em" },
|
|
2
|
+
displayLarge: { fontSize: 57, lineHeight: 64, fontWeight: 400, letterSpacing: -0.25 },
|
|
3
|
+
displayMedium: { fontSize: 45, lineHeight: 52, fontWeight: 400, letterSpacing: 0 },
|
|
4
|
+
displaySmall: { fontSize: 36, lineHeight: 44, fontWeight: 400, letterSpacing: 0 },
|
|
5
|
+
headlineLarge: { fontSize: 32, lineHeight: 40, fontWeight: 400, letterSpacing: 0 },
|
|
6
|
+
headlineMedium: { fontSize: 28, lineHeight: 36, fontWeight: 400, letterSpacing: 0 },
|
|
7
|
+
headlineSmall: { fontSize: 24, lineHeight: 32, fontWeight: 400, letterSpacing: 0 },
|
|
8
|
+
titleLarge: { fontSize: 22, lineHeight: 28, fontWeight: 400, letterSpacing: 0 },
|
|
9
|
+
titleMedium: { fontSize: 16, lineHeight: 24, fontWeight: 500, letterSpacing: 0.15 },
|
|
10
|
+
titleSmall: { fontSize: 14, lineHeight: 20, fontWeight: 500, letterSpacing: 0.1 },
|
|
11
|
+
labelLarge: { fontSize: 14, lineHeight: 20, fontWeight: 500, letterSpacing: 0.1 },
|
|
12
|
+
labelMedium: { fontSize: 12, lineHeight: 16, fontWeight: 500, letterSpacing: 0.5 },
|
|
13
|
+
labelSmall: { fontSize: 11, lineHeight: 16, fontWeight: 500, letterSpacing: 0.5 },
|
|
14
|
+
bodyLarge: { fontSize: 16, lineHeight: 24, fontWeight: 400, letterSpacing: 0.5 },
|
|
15
|
+
bodyMedium: { fontSize: 14, lineHeight: 20, fontWeight: 400, letterSpacing: 0.25 },
|
|
16
|
+
bodySmall: { fontSize: 12, lineHeight: 16, fontWeight: 400, letterSpacing: 0.4 },
|
|
26
17
|
};
|
|
18
|
+
/**
|
|
19
|
+
* Converts a TextStyle token to standard CSS properties.
|
|
20
|
+
*/
|
|
27
21
|
export function textStyleToCSS(style) {
|
|
28
|
-
|
|
22
|
+
const css = {
|
|
23
|
+
fontSize: `${style.fontSize}px`,
|
|
24
|
+
lineHeight: `${style.lineHeight}px`,
|
|
25
|
+
fontWeight: style.fontWeight,
|
|
26
|
+
letterSpacing: `${style.letterSpacing}px`,
|
|
27
|
+
};
|
|
28
|
+
if (style.fontFamily)
|
|
29
|
+
css.fontFamily = style.fontFamily;
|
|
30
|
+
if (style.color)
|
|
31
|
+
css.color = style.color;
|
|
32
|
+
return css;
|
|
29
33
|
}
|
|
30
34
|
//# sourceMappingURL=typography.js.map
|
package/dist/typography.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"typography.js","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,YAAY,EAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,IAAI,EAAE;IACxF,aAAa,EAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE;IACpF,YAAY,EAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE;IACpF,aAAa,EAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE;IACpF,cAAc,EAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE;IACpF,aAAa,EAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE;IACpF,UAAU,EAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE;IACpF,WAAW,EAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE;IACvF,UAAU,EAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE;IACtF,UAAU,EAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE;IACtF,WAAW,EAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE;IACtF,UAAU,EAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE;IACtF,SAAS,EAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE;IACtF,UAAU,EAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE;IACvF,SAAS,EAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE;CAC9E,CAAC;AAEX;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,KAAmB;IAChD,MAAM,GAAG,GAAQ;QACf,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,IAAI;QAC/B,UAAU,EAAE,GAAG,KAAK,CAAC,UAAU,IAAI;QACnC,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,aAAa,EAAE,GAAG,KAAK,CAAC,aAAa,IAAI;KAC1C,CAAC;IACF,IAAI,KAAK,CAAC,UAAU;QAAE,GAAG,CAAC,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC;IACxD,IAAI,KAAK,CAAC,KAAK;QAAE,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IACzC,OAAO,GAAG,CAAC;AACb,CAAC"}
|