@mirohq/design-system-typography 0.1.6
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/main.js +119 -0
- package/dist/main.js.map +1 -0
- package/dist/module.js +109 -0
- package/dist/module.js.map +1 -0
- package/dist/types.d.ts +1799 -0
- package/package.json +37 -0
package/dist/main.js
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
7
|
+
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
+
|
|
13
|
+
const styles = {
|
|
14
|
+
all: "unset",
|
|
15
|
+
display: "block",
|
|
16
|
+
fontFamily: "Formular, sans-serif",
|
|
17
|
+
margin: 0,
|
|
18
|
+
color: "$font-primary",
|
|
19
|
+
fontWeight: 500,
|
|
20
|
+
variants: {
|
|
21
|
+
level: {
|
|
22
|
+
1: {
|
|
23
|
+
lineHeight: 1.2,
|
|
24
|
+
fontSize: "$400"
|
|
25
|
+
},
|
|
26
|
+
2: {
|
|
27
|
+
lineHeight: 1.35,
|
|
28
|
+
fontSize: "$300"
|
|
29
|
+
},
|
|
30
|
+
3: {
|
|
31
|
+
lineHeight: 1.4,
|
|
32
|
+
fontSize: "$250"
|
|
33
|
+
},
|
|
34
|
+
4: {
|
|
35
|
+
lineHeight: 1.5,
|
|
36
|
+
fontSize: "$200"
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const H1 = designSystemStitches.styled(designSystemPrimitive.Primitive.h1, styles);
|
|
42
|
+
const H2 = designSystemStitches.styled(designSystemPrimitive.Primitive.h2, styles);
|
|
43
|
+
const H3 = designSystemStitches.styled(designSystemPrimitive.Primitive.h3, styles);
|
|
44
|
+
const H4 = designSystemStitches.styled(designSystemPrimitive.Primitive.h4, styles);
|
|
45
|
+
|
|
46
|
+
var Styled = /*#__PURE__*/Object.freeze({
|
|
47
|
+
__proto__: null,
|
|
48
|
+
H1: H1,
|
|
49
|
+
H2: H2,
|
|
50
|
+
H3: H3,
|
|
51
|
+
H4: H4
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
const Heading = React__default["default"].forwardRef(
|
|
55
|
+
({ level, styledAs, children, ...props }, forwardRef) => {
|
|
56
|
+
const HeadingLevel = Styled[`H${level}`];
|
|
57
|
+
const styledAsLevel = styledAs !== void 0 ? +styledAs.replace("h", "") : styledAs;
|
|
58
|
+
return /* @__PURE__ */ React__default["default"].createElement(HeadingLevel, {
|
|
59
|
+
...props,
|
|
60
|
+
level: styledAsLevel != null ? styledAsLevel : level,
|
|
61
|
+
ref: forwardRef
|
|
62
|
+
}, children);
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
const StyledText = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
|
|
67
|
+
lineHeight: 1.5,
|
|
68
|
+
color: "$font-primary",
|
|
69
|
+
variants: {
|
|
70
|
+
size: {
|
|
71
|
+
normal: {
|
|
72
|
+
fontSize: "$200"
|
|
73
|
+
},
|
|
74
|
+
small: {
|
|
75
|
+
fontSize: "$175"
|
|
76
|
+
},
|
|
77
|
+
mini: {
|
|
78
|
+
fontSize: "$150"
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
weight: {
|
|
82
|
+
normal: {
|
|
83
|
+
fontWeight: 400
|
|
84
|
+
},
|
|
85
|
+
bold: {
|
|
86
|
+
fontWeight: 650
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
const Text = React__default["default"].forwardRef(
|
|
93
|
+
({ size, weight, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledText, {
|
|
94
|
+
ref: forwardRef,
|
|
95
|
+
size,
|
|
96
|
+
weight,
|
|
97
|
+
...restProps
|
|
98
|
+
})
|
|
99
|
+
);
|
|
100
|
+
|
|
101
|
+
const StyledParagraph = designSystemStitches.styled(StyledText, {
|
|
102
|
+
margin: 0,
|
|
103
|
+
"&:not(:last-child)": {
|
|
104
|
+
marginBottom: "$200"
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
const Paragraph = React__default["default"].forwardRef(({ size, weight, children, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledParagraph, {
|
|
109
|
+
ref: forwardRef,
|
|
110
|
+
size,
|
|
111
|
+
weight,
|
|
112
|
+
asChild: true,
|
|
113
|
+
...restProps
|
|
114
|
+
}, /* @__PURE__ */ React__default["default"].createElement("p", null, children)));
|
|
115
|
+
|
|
116
|
+
exports.Heading = Heading;
|
|
117
|
+
exports.Paragraph = Paragraph;
|
|
118
|
+
exports.Text = Text;
|
|
119
|
+
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$font-primary',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n color: '$font-primary',\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * Change the text font-size\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n\nexport type StyledParagraphProps = ComponentPropsWithRef<typeof StyledParagraph>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { StyledParagraphProps } from './paragraph.styled'\n\nexport interface ParagraphProps extends StyledParagraphProps {\n /**\n * Change the paragraph font-size\n */\n size?: StyledParagraphProps['size']\n\n /**\n * Change the paragraph font-weight\n */\n weight?: StyledParagraphProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":["styled","Primitive","React"],"mappings":"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"}
|
package/dist/module.js
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { styled } from '@mirohq/design-system-stitches';
|
|
3
|
+
import { Primitive } from '@mirohq/design-system-primitive';
|
|
4
|
+
|
|
5
|
+
const styles = {
|
|
6
|
+
all: "unset",
|
|
7
|
+
display: "block",
|
|
8
|
+
fontFamily: "Formular, sans-serif",
|
|
9
|
+
margin: 0,
|
|
10
|
+
color: "$font-primary",
|
|
11
|
+
fontWeight: 500,
|
|
12
|
+
variants: {
|
|
13
|
+
level: {
|
|
14
|
+
1: {
|
|
15
|
+
lineHeight: 1.2,
|
|
16
|
+
fontSize: "$400"
|
|
17
|
+
},
|
|
18
|
+
2: {
|
|
19
|
+
lineHeight: 1.35,
|
|
20
|
+
fontSize: "$300"
|
|
21
|
+
},
|
|
22
|
+
3: {
|
|
23
|
+
lineHeight: 1.4,
|
|
24
|
+
fontSize: "$250"
|
|
25
|
+
},
|
|
26
|
+
4: {
|
|
27
|
+
lineHeight: 1.5,
|
|
28
|
+
fontSize: "$200"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const H1 = styled(Primitive.h1, styles);
|
|
34
|
+
const H2 = styled(Primitive.h2, styles);
|
|
35
|
+
const H3 = styled(Primitive.h3, styles);
|
|
36
|
+
const H4 = styled(Primitive.h4, styles);
|
|
37
|
+
|
|
38
|
+
var Styled = /*#__PURE__*/Object.freeze({
|
|
39
|
+
__proto__: null,
|
|
40
|
+
H1: H1,
|
|
41
|
+
H2: H2,
|
|
42
|
+
H3: H3,
|
|
43
|
+
H4: H4
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
const Heading = React.forwardRef(
|
|
47
|
+
({ level, styledAs, children, ...props }, forwardRef) => {
|
|
48
|
+
const HeadingLevel = Styled[`H${level}`];
|
|
49
|
+
const styledAsLevel = styledAs !== void 0 ? +styledAs.replace("h", "") : styledAs;
|
|
50
|
+
return /* @__PURE__ */ React.createElement(HeadingLevel, {
|
|
51
|
+
...props,
|
|
52
|
+
level: styledAsLevel != null ? styledAsLevel : level,
|
|
53
|
+
ref: forwardRef
|
|
54
|
+
}, children);
|
|
55
|
+
}
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
const StyledText = styled(Primitive.span, {
|
|
59
|
+
lineHeight: 1.5,
|
|
60
|
+
color: "$font-primary",
|
|
61
|
+
variants: {
|
|
62
|
+
size: {
|
|
63
|
+
normal: {
|
|
64
|
+
fontSize: "$200"
|
|
65
|
+
},
|
|
66
|
+
small: {
|
|
67
|
+
fontSize: "$175"
|
|
68
|
+
},
|
|
69
|
+
mini: {
|
|
70
|
+
fontSize: "$150"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
weight: {
|
|
74
|
+
normal: {
|
|
75
|
+
fontWeight: 400
|
|
76
|
+
},
|
|
77
|
+
bold: {
|
|
78
|
+
fontWeight: 650
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
const Text = React.forwardRef(
|
|
85
|
+
({ size, weight, ...restProps }, forwardRef) => /* @__PURE__ */ React.createElement(StyledText, {
|
|
86
|
+
ref: forwardRef,
|
|
87
|
+
size,
|
|
88
|
+
weight,
|
|
89
|
+
...restProps
|
|
90
|
+
})
|
|
91
|
+
);
|
|
92
|
+
|
|
93
|
+
const StyledParagraph = styled(StyledText, {
|
|
94
|
+
margin: 0,
|
|
95
|
+
"&:not(:last-child)": {
|
|
96
|
+
marginBottom: "$200"
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
const Paragraph = React.forwardRef(({ size, weight, children, ...restProps }, forwardRef) => /* @__PURE__ */ React.createElement(StyledParagraph, {
|
|
101
|
+
ref: forwardRef,
|
|
102
|
+
size,
|
|
103
|
+
weight,
|
|
104
|
+
asChild: true,
|
|
105
|
+
...restProps
|
|
106
|
+
}, /* @__PURE__ */ React.createElement("p", null, children)));
|
|
107
|
+
|
|
108
|
+
export { Heading, Paragraph, Text };
|
|
109
|
+
//# sourceMappingURL=module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/heading.styled.tsx","../src/heading.tsx","../src/text.styled.ts","../src/text.tsx","../src/paragraph.styled.ts","../src/paragraph.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst styles = {\n all: 'unset',\n display: 'block',\n fontFamily: 'Formular, sans-serif',\n margin: 0,\n color: '$font-primary',\n fontWeight: 500,\n variants: {\n level: {\n 1: {\n lineHeight: 1.2,\n fontSize: '$400',\n },\n 2: {\n lineHeight: 1.35,\n fontSize: '$300',\n },\n 3: {\n lineHeight: 1.4,\n fontSize: '$250',\n },\n 4: {\n lineHeight: 1.5,\n fontSize: '$200',\n },\n },\n },\n}\n\nexport const H1 = styled(Primitive.h1, styles)\nexport const H2 = styled(Primitive.h2, styles)\nexport const H3 = styled(Primitive.h3, styles)\nexport const H4 = styled(Primitive.h4, styles)\n\nexport type StyledHeadingProps = ComponentPropsWithRef<typeof H1>\n","import type { ElementRef } from 'react'\nimport React from 'react'\n\nimport * as Styled from './heading.styled'\nimport type { StyledHeadingProps } from './heading.styled'\n\ntype Level = 1 | 2 | 3 | 4\ntype Tags = 'h1' | 'h2' | 'h3' | 'h4'\n\nexport interface HeadingProps extends StyledHeadingProps {\n /**\n * The sematic heading level used in the HTML markup.\n */\n level: Level\n\n /**\n * The way the sematic tag looks, it changes the styling of the heading.\n */\n styledAs?: Tags\n}\n\nexport const Heading = React.forwardRef<ElementRef<Tags>, HeadingProps>(\n ({ level, styledAs, children, ...props }, forwardRef) => {\n const HeadingLevel = Styled[`H${level}`]\n const styledAsLevel =\n styledAs !== undefined ? (+styledAs.replace('h', '') as Level) : styledAs\n return (\n <HeadingLevel {...props} level={styledAsLevel ?? level} ref={forwardRef}>\n {children}\n </HeadingLevel>\n )\n }\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const StyledText = styled(Primitive.span, {\n lineHeight: 1.5,\n color: '$font-primary',\n variants: {\n size: {\n normal: {\n fontSize: '$200',\n },\n small: {\n fontSize: '$175',\n },\n mini: {\n fontSize: '$150',\n },\n },\n weight: {\n normal: {\n fontWeight: 400,\n },\n bold: {\n fontWeight: 650,\n },\n },\n },\n})\n\nexport type StyledTextProps = ComponentPropsWithRef<typeof StyledText>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledText } from './text.styled'\nimport type { StyledTextProps } from './text.styled'\n\nexport interface TextProps extends StyledTextProps {\n /**\n * Change the text font-size\n */\n size?: StyledTextProps['size']\n\n /**\n * Change the text font-weight\n */\n weight?: StyledTextProps['weight']\n}\n\nexport const Text = React.forwardRef<ElementRef<typeof StyledText>, TextProps>(\n ({ size, weight, ...restProps }, forwardRef) => (\n <StyledText ref={forwardRef} size={size} weight={weight} {...restProps} />\n )\n)\n","import type { ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\n\nimport { StyledText } from './text.styled'\n\nexport const StyledParagraph = styled(StyledText, {\n margin: 0,\n\n '&:not(:last-child)': {\n marginBottom: '$200',\n },\n})\n\nexport type StyledParagraphProps = ComponentPropsWithRef<typeof StyledParagraph>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledParagraph } from './paragraph.styled'\nimport type { StyledParagraphProps } from './paragraph.styled'\n\nexport interface ParagraphProps extends StyledParagraphProps {\n /**\n * Change the paragraph font-size\n */\n size?: StyledParagraphProps['size']\n\n /**\n * Change the paragraph font-weight\n */\n weight?: StyledParagraphProps['weight']\n}\n\nexport const Paragraph = React.forwardRef<\n ElementRef<typeof StyledParagraph>,\n ParagraphProps\n>(({ size, weight, children, ...restProps }, forwardRef) => (\n <StyledParagraph\n ref={forwardRef}\n size={size}\n weight={weight}\n asChild\n {...restProps}\n >\n <p>{children}</p>\n </StyledParagraph>\n))\n"],"names":[],"mappings":";;;;AAIA,MAAM,MAAS,GAAA;AAAA,EACb,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,OAAA;AAAA,EACT,UAAY,EAAA,sBAAA;AAAA,EACZ,MAAQ,EAAA,CAAA;AAAA,EACR,KAAO,EAAA,eAAA;AAAA,EACP,UAAY,EAAA,GAAA;AAAA,EACZ,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,IAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,CAAG,EAAA;AAAA,QACD,UAAY,EAAA,GAAA;AAAA,QACZ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAA,CAAA;AAEO,MAAM,EAAK,GAAA,MAAA,CAAO,SAAU,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AACtC,MAAM,EAAK,GAAA,MAAA,CAAO,SAAU,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AACtC,MAAM,EAAK,GAAA,MAAA,CAAO,SAAU,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AACtC,MAAM,EAAK,GAAA,MAAA,CAAO,SAAU,CAAA,EAAA,EAAI,MAAM,CAAA;;;;;;;;;;ACftC,MAAM,UAAU,KAAM,CAAA,UAAA;AAAA,EAC3B,CAAC,EAAE,KAAA,EAAO,UAAU,QAAa,EAAA,GAAA,KAAA,IAAS,UAAe,KAAA;AACvD,IAAM,MAAA,YAAA,GAAe,OAAO,CAAI,CAAA,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAChC,IAAM,MAAA,aAAA,GACJ,aAAa,KAAa,CAAA,GAAA,CAAC,SAAS,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAc,GAAA,QAAA,CAAA;AACnE,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAA,MAAc,GAAG,KAAA;AAAA,MAAO,OAAO,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,KAAA;AAAA,MAAO,GAAK,EAAA,UAAA;AAAA,KAAA,EAC1D,QACH,CAAA,CAAA;AAAA,GAEJ;AACF;;AC5Ba,MAAA,UAAA,GAAa,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA;AAAA,EAC/C,UAAY,EAAA,GAAA;AAAA,EACZ,KAAO,EAAA,eAAA;AAAA,EACP,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,KACF;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,MAAQ,EAAA;AAAA,QACN,UAAY,EAAA,GAAA;AAAA,OACd;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,UAAY,EAAA,GAAA;AAAA,OACd;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACVM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,IAAA,EAAM,WAAW,SAAU,EAAA,EAAG,+BAC9B,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAW,GAAK,EAAA,UAAA;AAAA,IAAY,IAAA;AAAA,IAAY,MAAA;AAAA,IAAiB,GAAG,SAAA;AAAA,GAAW,CAAA;AAE5E;;ACjBa,MAAA,eAAA,GAAkB,OAAO,UAAY,EAAA;AAAA,EAChD,MAAQ,EAAA,CAAA;AAAA,EAER,oBAAsB,EAAA;AAAA,IACpB,YAAc,EAAA,MAAA;AAAA,GAChB;AACF,CAAC,CAAA;;ACOY,MAAA,SAAA,GAAY,KAAM,CAAA,UAAA,CAG7B,CAAC,EAAE,IAAM,EAAA,MAAA,EAAQ,QAAa,EAAA,GAAA,SAAA,EAAa,EAAA,UAAA,qBAC1C,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,EACC,GAAK,EAAA,UAAA;AAAA,EACL,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAO,EAAA,IAAA;AAAA,EACN,GAAG,SAAA;AAAA,CAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAG,QAAS,CACf,CACD;;;;"}
|