container-css 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,319 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { css, LitElement } from 'lit';
8
+ import { customElement, property } from 'lit/decorators.js';
9
+ import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
10
+ const breakpoints = {
11
+ sm: '30rem',
12
+ md: '48rem',
13
+ lg: '62rem',
14
+ xl: '80rem',
15
+ '2xl': '96rem',
16
+ };
17
+ let ContainerFlexCol = class ContainerFlexCol extends LitElement {
18
+ formatWidth(value) {
19
+ const keywords = ['auto', 'full', 'min-content', 'max-content'];
20
+ if (keywords.includes(value)) {
21
+ return value === 'full' ? '100%' : value;
22
+ }
23
+ return `${value}rem`;
24
+ }
25
+ buildWrapperStyles() {
26
+ const styles = [];
27
+ if (this.gap)
28
+ styles.push(`gap: ${this.gap}rem;`);
29
+ if (this.justifyContent)
30
+ styles.push(`justify-content: ${this.justifyContent};`);
31
+ if (this.alignItems)
32
+ styles.push(`align-items: ${this.alignItems};`);
33
+ return styles.join(' ');
34
+ }
35
+ buildHostStyles() {
36
+ const styles = [];
37
+ if (this.flex)
38
+ styles.push(`flex: ${this.flex};`);
39
+ if (this.w)
40
+ styles.push(`width: ${this.formatWidth(this.w)};`);
41
+ if (this.minW)
42
+ styles.push(`min-width: ${this.formatWidth(this.minW)};`);
43
+ if (this.maxW)
44
+ styles.push(`max-width: ${this.formatWidth(this.maxW)};`);
45
+ return styles.join(' ');
46
+ }
47
+ buildMediaQueries() {
48
+ let mediaStyles = '';
49
+ const breakpointProps = [
50
+ {
51
+ breakpoint: 'sm',
52
+ minWidth: breakpoints.sm,
53
+ props: {
54
+ gap: this.smGap,
55
+ justifyContent: this.smJustifyContent,
56
+ alignItems: this.smAlignItems,
57
+ flex: this.smFlex,
58
+ w: this.smW,
59
+ minW: this.smMinW,
60
+ maxW: this.smMaxW,
61
+ },
62
+ },
63
+ {
64
+ breakpoint: 'md',
65
+ minWidth: breakpoints.md,
66
+ props: {
67
+ gap: this.mdGap,
68
+ justifyContent: this.mdJustifyContent,
69
+ alignItems: this.mdAlignItems,
70
+ flex: this.mdFlex,
71
+ w: this.mdW,
72
+ minW: this.mdMinW,
73
+ maxW: this.mdMaxW,
74
+ },
75
+ },
76
+ {
77
+ breakpoint: 'lg',
78
+ minWidth: breakpoints.lg,
79
+ props: {
80
+ gap: this.lgGap,
81
+ justifyContent: this.lgJustifyContent,
82
+ alignItems: this.lgAlignItems,
83
+ flex: this.lgFlex,
84
+ w: this.lgW,
85
+ minW: this.lgMinW,
86
+ maxW: this.lgMaxW,
87
+ },
88
+ },
89
+ {
90
+ breakpoint: 'xl',
91
+ minWidth: breakpoints.xl,
92
+ props: {
93
+ gap: this.xlGap,
94
+ justifyContent: this.xlJustifyContent,
95
+ alignItems: this.xlAlignItems,
96
+ flex: this.xlFlex,
97
+ w: this.xlW,
98
+ minW: this.xlMinW,
99
+ maxW: this.xlMaxW,
100
+ },
101
+ },
102
+ {
103
+ breakpoint: '2xl',
104
+ minWidth: breakpoints['2xl'],
105
+ props: {
106
+ gap: this.xxlGap,
107
+ justifyContent: this.xxlJustifyContent,
108
+ alignItems: this.xxlAlignItems,
109
+ flex: this.xxlFlex,
110
+ w: this.xxlW,
111
+ minW: this.xxlMinW,
112
+ maxW: this.xxlMaxW,
113
+ },
114
+ },
115
+ ];
116
+ for (const { minWidth, props } of breakpointProps) {
117
+ const styles = [];
118
+ if (props.gap)
119
+ styles.push(`gap: ${props.gap}rem;`);
120
+ if (props.justifyContent)
121
+ styles.push(`justify-content: ${props.justifyContent};`);
122
+ if (props.alignItems)
123
+ styles.push(`align-items: ${props.alignItems};`);
124
+ if (styles.length > 0) {
125
+ mediaStyles += `
126
+ @media (min-width: ${minWidth}) {
127
+ .wrapper {
128
+ ${styles.join(' ')}
129
+ }
130
+ }
131
+ `;
132
+ }
133
+ const hostStyles = [];
134
+ if (props.flex)
135
+ hostStyles.push(`flex: ${props.flex};`);
136
+ if (props.w)
137
+ hostStyles.push(`width: ${this.formatWidth(props.w)};`);
138
+ if (props.minW)
139
+ hostStyles.push(`min-width: ${this.formatWidth(props.minW)};`);
140
+ if (props.maxW)
141
+ hostStyles.push(`max-width: ${this.formatWidth(props.maxW)};`);
142
+ if (hostStyles.length > 0) {
143
+ mediaStyles += `
144
+ @media (min-width: ${minWidth}) {
145
+ :host {
146
+ ${hostStyles.join(' ')}
147
+ }
148
+ }
149
+ `;
150
+ }
151
+ }
152
+ return mediaStyles;
153
+ }
154
+ render() {
155
+ const wrapperStyles = this.buildWrapperStyles();
156
+ const hostStyles = this.buildHostStyles();
157
+ const mediaQueries = this.buildMediaQueries();
158
+ const tag = unsafeStatic(this.as || 'div');
159
+ return staticHtml `
160
+ <style>
161
+ :host {
162
+ ${hostStyles}
163
+ }
164
+ .wrapper {
165
+ display: flex;
166
+ flex-direction: column;
167
+ width: 100%;
168
+ box-sizing: border-box;
169
+ ${wrapperStyles}
170
+ }
171
+ ${mediaQueries}
172
+ </style>
173
+ <${tag} class="wrapper">
174
+ <slot></slot>
175
+ </${tag}>
176
+ `;
177
+ }
178
+ };
179
+ ContainerFlexCol.styles = css `
180
+ :host {
181
+ display: flex;
182
+ flex-direction: column;
183
+ box-sizing: border-box;
184
+ }
185
+ `;
186
+ __decorate([
187
+ property()
188
+ ], ContainerFlexCol.prototype, "as", void 0);
189
+ __decorate([
190
+ property({ attribute: 'align-items' })
191
+ ], ContainerFlexCol.prototype, "alignItems", void 0);
192
+ __decorate([
193
+ property()
194
+ ], ContainerFlexCol.prototype, "flex", void 0);
195
+ __decorate([
196
+ property()
197
+ ], ContainerFlexCol.prototype, "gap", void 0);
198
+ __decorate([
199
+ property({ attribute: 'justify-content' })
200
+ ], ContainerFlexCol.prototype, "justifyContent", void 0);
201
+ __decorate([
202
+ property()
203
+ ], ContainerFlexCol.prototype, "w", void 0);
204
+ __decorate([
205
+ property({ attribute: 'min-w' })
206
+ ], ContainerFlexCol.prototype, "minW", void 0);
207
+ __decorate([
208
+ property({ attribute: 'max-w' })
209
+ ], ContainerFlexCol.prototype, "maxW", void 0);
210
+ __decorate([
211
+ property({ attribute: 'sm-align-items' })
212
+ ], ContainerFlexCol.prototype, "smAlignItems", void 0);
213
+ __decorate([
214
+ property({ attribute: 'sm-flex' })
215
+ ], ContainerFlexCol.prototype, "smFlex", void 0);
216
+ __decorate([
217
+ property({ attribute: 'sm-gap' })
218
+ ], ContainerFlexCol.prototype, "smGap", void 0);
219
+ __decorate([
220
+ property({ attribute: 'sm-justify-content' })
221
+ ], ContainerFlexCol.prototype, "smJustifyContent", void 0);
222
+ __decorate([
223
+ property({ attribute: 'sm-w' })
224
+ ], ContainerFlexCol.prototype, "smW", void 0);
225
+ __decorate([
226
+ property({ attribute: 'sm-min-w' })
227
+ ], ContainerFlexCol.prototype, "smMinW", void 0);
228
+ __decorate([
229
+ property({ attribute: 'sm-max-w' })
230
+ ], ContainerFlexCol.prototype, "smMaxW", void 0);
231
+ __decorate([
232
+ property({ attribute: 'md-align-items' })
233
+ ], ContainerFlexCol.prototype, "mdAlignItems", void 0);
234
+ __decorate([
235
+ property({ attribute: 'md-flex' })
236
+ ], ContainerFlexCol.prototype, "mdFlex", void 0);
237
+ __decorate([
238
+ property({ attribute: 'md-gap' })
239
+ ], ContainerFlexCol.prototype, "mdGap", void 0);
240
+ __decorate([
241
+ property({ attribute: 'md-justify-content' })
242
+ ], ContainerFlexCol.prototype, "mdJustifyContent", void 0);
243
+ __decorate([
244
+ property({ attribute: 'md-w' })
245
+ ], ContainerFlexCol.prototype, "mdW", void 0);
246
+ __decorate([
247
+ property({ attribute: 'md-min-w' })
248
+ ], ContainerFlexCol.prototype, "mdMinW", void 0);
249
+ __decorate([
250
+ property({ attribute: 'md-max-w' })
251
+ ], ContainerFlexCol.prototype, "mdMaxW", void 0);
252
+ __decorate([
253
+ property({ attribute: 'lg-align-items' })
254
+ ], ContainerFlexCol.prototype, "lgAlignItems", void 0);
255
+ __decorate([
256
+ property({ attribute: 'lg-flex' })
257
+ ], ContainerFlexCol.prototype, "lgFlex", void 0);
258
+ __decorate([
259
+ property({ attribute: 'lg-gap' })
260
+ ], ContainerFlexCol.prototype, "lgGap", void 0);
261
+ __decorate([
262
+ property({ attribute: 'lg-justify-content' })
263
+ ], ContainerFlexCol.prototype, "lgJustifyContent", void 0);
264
+ __decorate([
265
+ property({ attribute: 'lg-w' })
266
+ ], ContainerFlexCol.prototype, "lgW", void 0);
267
+ __decorate([
268
+ property({ attribute: 'lg-min-w' })
269
+ ], ContainerFlexCol.prototype, "lgMinW", void 0);
270
+ __decorate([
271
+ property({ attribute: 'lg-max-w' })
272
+ ], ContainerFlexCol.prototype, "lgMaxW", void 0);
273
+ __decorate([
274
+ property({ attribute: 'xl-align-items' })
275
+ ], ContainerFlexCol.prototype, "xlAlignItems", void 0);
276
+ __decorate([
277
+ property({ attribute: 'xl-flex' })
278
+ ], ContainerFlexCol.prototype, "xlFlex", void 0);
279
+ __decorate([
280
+ property({ attribute: 'xl-gap' })
281
+ ], ContainerFlexCol.prototype, "xlGap", void 0);
282
+ __decorate([
283
+ property({ attribute: 'xl-justify-content' })
284
+ ], ContainerFlexCol.prototype, "xlJustifyContent", void 0);
285
+ __decorate([
286
+ property({ attribute: 'xl-w' })
287
+ ], ContainerFlexCol.prototype, "xlW", void 0);
288
+ __decorate([
289
+ property({ attribute: 'xl-min-w' })
290
+ ], ContainerFlexCol.prototype, "xlMinW", void 0);
291
+ __decorate([
292
+ property({ attribute: 'xl-max-w' })
293
+ ], ContainerFlexCol.prototype, "xlMaxW", void 0);
294
+ __decorate([
295
+ property({ attribute: '2xl-align-items' })
296
+ ], ContainerFlexCol.prototype, "xxlAlignItems", void 0);
297
+ __decorate([
298
+ property({ attribute: '2xl-flex' })
299
+ ], ContainerFlexCol.prototype, "xxlFlex", void 0);
300
+ __decorate([
301
+ property({ attribute: '2xl-gap' })
302
+ ], ContainerFlexCol.prototype, "xxlGap", void 0);
303
+ __decorate([
304
+ property({ attribute: '2xl-justify-content' })
305
+ ], ContainerFlexCol.prototype, "xxlJustifyContent", void 0);
306
+ __decorate([
307
+ property({ attribute: '2xl-w' })
308
+ ], ContainerFlexCol.prototype, "xxlW", void 0);
309
+ __decorate([
310
+ property({ attribute: '2xl-min-w' })
311
+ ], ContainerFlexCol.prototype, "xxlMinW", void 0);
312
+ __decorate([
313
+ property({ attribute: '2xl-max-w' })
314
+ ], ContainerFlexCol.prototype, "xxlMaxW", void 0);
315
+ ContainerFlexCol = __decorate([
316
+ customElement('container-flexcol')
317
+ ], ContainerFlexCol);
318
+ export { ContainerFlexCol };
319
+ //# sourceMappingURL=container-flexcol.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"container-flexcol.js","sourceRoot":"","sources":["src/container-flexcol.ts"],"names":[],"mappings":"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","sourcesContent":["import {css, LitElement} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {html as staticHtml, unsafeStatic} from 'lit/static-html.js';\n\nconst breakpoints = {\n sm: '30rem',\n md: '48rem',\n lg: '62rem',\n xl: '80rem',\n '2xl': '96rem',\n};\n\n@customElement('container-flexcol')\nexport class ContainerFlexCol extends LitElement {\n static override styles = css`\n :host {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n }\n `;\n\n @property() as?:\n | 'main'\n | 'div'\n | 'footer'\n | 'header'\n | 'aside'\n | 'section'\n | 'article'\n | 'nav';\n @property({attribute: 'align-items'}) alignItems?: string;\n @property() flex?: string;\n @property() gap?: string;\n @property({attribute: 'justify-content'}) justifyContent?: string;\n @property() w?: string;\n @property({attribute: 'min-w'}) minW?: string;\n @property({attribute: 'max-w'}) maxW?: string;\n\n @property({attribute: 'sm-align-items'}) smAlignItems?: string;\n @property({attribute: 'sm-flex'}) smFlex?: string;\n @property({attribute: 'sm-gap'}) smGap?: string;\n @property({attribute: 'sm-justify-content'}) smJustifyContent?: string;\n @property({attribute: 'sm-w'}) smW?: string;\n @property({attribute: 'sm-min-w'}) smMinW?: string;\n @property({attribute: 'sm-max-w'}) smMaxW?: string;\n\n @property({attribute: 'md-align-items'}) mdAlignItems?: string;\n @property({attribute: 'md-flex'}) mdFlex?: string;\n @property({attribute: 'md-gap'}) mdGap?: string;\n @property({attribute: 'md-justify-content'}) mdJustifyContent?: string;\n @property({attribute: 'md-w'}) mdW?: string;\n @property({attribute: 'md-min-w'}) mdMinW?: string;\n @property({attribute: 'md-max-w'}) mdMaxW?: string;\n\n @property({attribute: 'lg-align-items'}) lgAlignItems?: string;\n @property({attribute: 'lg-flex'}) lgFlex?: string;\n @property({attribute: 'lg-gap'}) lgGap?: string;\n @property({attribute: 'lg-justify-content'}) lgJustifyContent?: string;\n @property({attribute: 'lg-w'}) lgW?: string;\n @property({attribute: 'lg-min-w'}) lgMinW?: string;\n @property({attribute: 'lg-max-w'}) lgMaxW?: string;\n\n @property({attribute: 'xl-align-items'}) xlAlignItems?: string;\n @property({attribute: 'xl-flex'}) xlFlex?: string;\n @property({attribute: 'xl-gap'}) xlGap?: string;\n @property({attribute: 'xl-justify-content'}) xlJustifyContent?: string;\n @property({attribute: 'xl-w'}) xlW?: string;\n @property({attribute: 'xl-min-w'}) xlMinW?: string;\n @property({attribute: 'xl-max-w'}) xlMaxW?: string;\n\n @property({attribute: '2xl-align-items'}) xxlAlignItems?: string;\n @property({attribute: '2xl-flex'}) xxlFlex?: string;\n @property({attribute: '2xl-gap'}) xxlGap?: string;\n @property({attribute: '2xl-justify-content'}) xxlJustifyContent?: string;\n @property({attribute: '2xl-w'}) xxlW?: string;\n @property({attribute: '2xl-min-w'}) xxlMinW?: string;\n @property({attribute: '2xl-max-w'}) xxlMaxW?: string;\n\n private formatWidth(value: string): string {\n const keywords = ['auto', 'full', 'min-content', 'max-content'];\n if (keywords.includes(value)) {\n return value === 'full' ? '100%' : value;\n }\n return `${value}rem`;\n }\n\n private buildWrapperStyles(): string {\n const styles: string[] = [];\n\n if (this.gap) styles.push(`gap: ${this.gap}rem;`);\n if (this.justifyContent)\n styles.push(`justify-content: ${this.justifyContent};`);\n if (this.alignItems) styles.push(`align-items: ${this.alignItems};`);\n\n return styles.join(' ');\n }\n\n private buildHostStyles(): string {\n const styles: string[] = [];\n\n if (this.flex) styles.push(`flex: ${this.flex};`);\n if (this.w) styles.push(`width: ${this.formatWidth(this.w)};`);\n if (this.minW) styles.push(`min-width: ${this.formatWidth(this.minW)};`);\n if (this.maxW) styles.push(`max-width: ${this.formatWidth(this.maxW)};`);\n\n return styles.join(' ');\n }\n\n private buildMediaQueries(): string {\n let mediaStyles = '';\n\n const breakpointProps = [\n {\n breakpoint: 'sm',\n minWidth: breakpoints.sm,\n props: {\n gap: this.smGap,\n justifyContent: this.smJustifyContent,\n alignItems: this.smAlignItems,\n flex: this.smFlex,\n w: this.smW,\n minW: this.smMinW,\n maxW: this.smMaxW,\n },\n },\n {\n breakpoint: 'md',\n minWidth: breakpoints.md,\n props: {\n gap: this.mdGap,\n justifyContent: this.mdJustifyContent,\n alignItems: this.mdAlignItems,\n flex: this.mdFlex,\n w: this.mdW,\n minW: this.mdMinW,\n maxW: this.mdMaxW,\n },\n },\n {\n breakpoint: 'lg',\n minWidth: breakpoints.lg,\n props: {\n gap: this.lgGap,\n justifyContent: this.lgJustifyContent,\n alignItems: this.lgAlignItems,\n flex: this.lgFlex,\n w: this.lgW,\n minW: this.lgMinW,\n maxW: this.lgMaxW,\n },\n },\n {\n breakpoint: 'xl',\n minWidth: breakpoints.xl,\n props: {\n gap: this.xlGap,\n justifyContent: this.xlJustifyContent,\n alignItems: this.xlAlignItems,\n flex: this.xlFlex,\n w: this.xlW,\n minW: this.xlMinW,\n maxW: this.xlMaxW,\n },\n },\n {\n breakpoint: '2xl',\n minWidth: breakpoints['2xl'],\n props: {\n gap: this.xxlGap,\n justifyContent: this.xxlJustifyContent,\n alignItems: this.xxlAlignItems,\n flex: this.xxlFlex,\n w: this.xxlW,\n minW: this.xxlMinW,\n maxW: this.xxlMaxW,\n },\n },\n ];\n\n for (const {minWidth, props} of breakpointProps) {\n const styles: string[] = [];\n\n if (props.gap) styles.push(`gap: ${props.gap}rem;`);\n if (props.justifyContent)\n styles.push(`justify-content: ${props.justifyContent};`);\n if (props.alignItems) styles.push(`align-items: ${props.alignItems};`);\n\n if (styles.length > 0) {\n mediaStyles += `\n @media (min-width: ${minWidth}) {\n .wrapper {\n ${styles.join(' ')}\n }\n }\n `;\n }\n\n const hostStyles: string[] = [];\n if (props.flex) hostStyles.push(`flex: ${props.flex};`);\n if (props.w) hostStyles.push(`width: ${this.formatWidth(props.w)};`);\n if (props.minW)\n hostStyles.push(`min-width: ${this.formatWidth(props.minW)};`);\n if (props.maxW)\n hostStyles.push(`max-width: ${this.formatWidth(props.maxW)};`);\n\n if (hostStyles.length > 0) {\n mediaStyles += `\n @media (min-width: ${minWidth}) {\n :host {\n ${hostStyles.join(' ')}\n }\n }\n `;\n }\n }\n\n return mediaStyles;\n }\n\n override render() {\n const wrapperStyles = this.buildWrapperStyles();\n const hostStyles = this.buildHostStyles();\n const mediaQueries = this.buildMediaQueries();\n const tag = unsafeStatic(this.as || 'div');\n\n return staticHtml`\n <style>\n :host {\n ${hostStyles}\n }\n .wrapper {\n display: flex;\n flex-direction: column;\n width: 100%;\n box-sizing: border-box;\n ${wrapperStyles}\n }\n ${mediaQueries}\n </style>\n <${tag} class=\"wrapper\">\n <slot></slot>\n </${tag}>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'container-flexcol': ContainerFlexCol;\n }\n}\n"]}
@@ -0,0 +1,58 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class ContainerFlexRow extends LitElement {
3
+ static styles: import("lit").CSSResult;
4
+ as?: 'main' | 'div' | 'footer' | 'header' | 'aside' | 'section' | 'article' | 'nav';
5
+ alignItems?: string;
6
+ flex?: string;
7
+ gap?: string;
8
+ justifyContent?: string;
9
+ w?: string;
10
+ minW?: string;
11
+ maxW?: string;
12
+ smAlignItems?: string;
13
+ smFlex?: string;
14
+ smGap?: string;
15
+ smJustifyContent?: string;
16
+ smW?: string;
17
+ smMinW?: string;
18
+ smMaxW?: string;
19
+ mdAlignItems?: string;
20
+ mdFlex?: string;
21
+ mdGap?: string;
22
+ mdJustifyContent?: string;
23
+ mdW?: string;
24
+ mdMinW?: string;
25
+ mdMaxW?: string;
26
+ lgAlignItems?: string;
27
+ lgFlex?: string;
28
+ lgGap?: string;
29
+ lgJustifyContent?: string;
30
+ lgW?: string;
31
+ lgMinW?: string;
32
+ lgMaxW?: string;
33
+ xlAlignItems?: string;
34
+ xlFlex?: string;
35
+ xlGap?: string;
36
+ xlJustifyContent?: string;
37
+ xlW?: string;
38
+ xlMinW?: string;
39
+ xlMaxW?: string;
40
+ xxlAlignItems?: string;
41
+ xxlFlex?: string;
42
+ xxlGap?: string;
43
+ xxlJustifyContent?: string;
44
+ xxlW?: string;
45
+ xxlMinW?: string;
46
+ xxlMaxW?: string;
47
+ private formatWidth;
48
+ private buildWrapperStyles;
49
+ private buildHostStyles;
50
+ private buildMediaQueries;
51
+ render(): import("lit-html").TemplateResult;
52
+ }
53
+ declare global {
54
+ interface HTMLElementTagNameMap {
55
+ 'container-flexrow': ContainerFlexRow;
56
+ }
57
+ }
58
+ //# sourceMappingURL=container-flexrow.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"container-flexrow.d.ts","sourceRoot":"","sources":["src/container-flexrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,UAAU,EAAC,MAAM,KAAK,CAAC;AAYpC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAMpB;IAEU,EAAE,CAAC,EACX,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,SAAS,GACT,SAAS,GACT,KAAK,CAAC;IAC4B,UAAU,CAAC,EAAE,MAAM,CAAC;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACiB,cAAc,CAAC,EAAE,MAAM,CAAC;IACtD,CAAC,CAAC,EAAE,MAAM,CAAC;IACS,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IAEL,YAAY,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACT,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEV,YAAY,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACT,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEV,YAAY,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACT,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEV,YAAY,CAAC,EAAE,MAAM,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;IACT,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAET,aAAa,CAAC,EAAE,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IACJ,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAErD,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,iBAAiB;IA6GhB,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}