@redvars/peacock 3.6.1 → 3.6.2
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/assets/styles.css +1 -1
- package/dist/assets/styles.css.map +1 -1
- package/dist/assets/tokens.css +1 -1
- package/dist/assets/tokens.css.map +1 -1
- package/dist/{button-colors-Ccys3hvS.js → button-colors-AvGh22Zn.js} +18 -18
- package/dist/{button-colors-Ccys3hvS.js.map → button-colors-AvGh22Zn.js.map} +1 -1
- package/dist/button-group.js +2 -2
- package/dist/button.js +2 -3
- package/dist/button.js.map +1 -1
- package/dist/card.js +1 -1
- package/dist/card.js.map +1 -1
- package/dist/code-highlighter.js +34 -9
- package/dist/code-highlighter.js.map +1 -1
- package/dist/custom-elements-jsdocs.json +661 -73
- package/dist/custom-elements.json +718 -80
- package/dist/flow-designer.js +1402 -8
- package/dist/flow-designer.js.map +1 -1
- package/dist/icon-CueRR7wx.js +260 -0
- package/dist/icon-CueRR7wx.js.map +1 -0
- package/dist/{icon-button-CK1ZuE-2.js → icon-button-ohxHhy4t.js} +2 -2
- package/dist/{icon-button-CK1ZuE-2.js.map → icon-button-ohxHhy4t.js.map} +1 -1
- package/dist/index.js +9 -8
- package/dist/index.js.map +1 -1
- package/dist/modal.js +11 -11
- package/dist/modal.js.map +1 -1
- package/dist/{navigation-rail-DTTkqohi.js → navigation-rail-CD7IrqbN.js} +247 -123
- package/dist/navigation-rail-CD7IrqbN.js.map +1 -0
- package/dist/peacock-loader.js +30 -30
- package/dist/peacock-loader.js.map +1 -1
- package/dist/{popover-NC7b1lTq.js → popover-DUPmMVWS.js} +9 -4
- package/dist/{popover-NC7b1lTq.js.map → popover-DUPmMVWS.js.map} +1 -1
- package/dist/popover.js +1 -1
- package/dist/src/__controllers/floating-controller.d.ts +1 -0
- package/dist/src/avatar/avatar.d.ts +1 -1
- package/dist/src/breadcrumb/breadcrumb/breadcrumb.d.ts +0 -1
- package/dist/src/chip/chip/chip.d.ts +14 -11
- package/dist/src/chip/chip-set/chip-set.d.ts +20 -0
- package/dist/src/chip/chip-set/index.d.ts +1 -0
- package/dist/src/code-highlighter/code-highlighter.d.ts +4 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/menu/menu/menu.d.ts +1 -0
- package/dist/src/modal/modal.d.ts +1 -1
- package/dist/test/chip.test.d.ts +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/readme.md +2 -2
- package/scss/styles.scss +3 -3
- package/scss/tokens.css +1 -1
- package/src/__controllers/floating-controller.ts +9 -3
- package/src/avatar/avatar.scss +4 -4
- package/src/avatar/avatar.ts +1 -1
- package/src/breadcrumb/breadcrumb/breadcrumb.ts +0 -1
- package/src/button/button/button.scss +17 -17
- package/src/button/button/button.ts +1 -2
- package/src/card/card.ts +1 -1
- package/src/chip/chip/chip.scss +119 -45
- package/src/chip/chip/chip.ts +97 -38
- package/src/chip/chip-set/chip-set.scss +13 -0
- package/src/chip/chip-set/chip-set.ts +25 -0
- package/src/chip/chip-set/index.ts +1 -0
- package/src/code-highlighter/code-highlighter.ts +33 -6
- package/src/field/field.scss +1 -1
- package/src/index.ts +1 -0
- package/src/menu/menu/menu.ts +11 -0
- package/src/modal/modal.scss +10 -10
- package/src/modal/modal.ts +1 -1
- package/src/peacock-loader.ts +24 -22
- package/dist/flow-designer-DvTUrDp5.js +0 -1656
- package/dist/flow-designer-DvTUrDp5.js.map +0 -1
- package/dist/navigation-rail-DTTkqohi.js.map +0 -1
- package/src/chip/chip/chip-colors.scss +0 -31
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/modal.js
CHANGED
|
@@ -15,19 +15,19 @@ var css_248z = i`@charset "UTF-8";
|
|
|
15
15
|
|
|
16
16
|
:host {
|
|
17
17
|
display: contents;
|
|
18
|
-
--modal-container-color: var(--color-surface-container-high
|
|
19
|
-
--modal-scrim-color:
|
|
20
|
-
--modal-shape: var(--shape-corner-extra-large
|
|
18
|
+
--modal-container-color: var(--color-surface-container-high);
|
|
19
|
+
--modal-scrim-color: color-mix(in srgb, var(--color-scrim), transparent 32%);
|
|
20
|
+
--modal-shape: var(--shape-corner-extra-large);
|
|
21
21
|
--modal-min-width: 280px;
|
|
22
22
|
--modal-max-width: 560px;
|
|
23
23
|
--modal-max-height: 90dvh;
|
|
24
|
-
--modal-transition-duration: var(--duration-medium2
|
|
25
|
-
--modal-transition-easing: var(--easing-emphasized
|
|
26
|
-
--modal-heading-color: var(--color-on-surface
|
|
27
|
-
--modal-subheading-color: var(--color-on-surface-variant
|
|
28
|
-
--modal-content-color: var(--color-on-surface-variant
|
|
29
|
-
--modal-divider-color: var(--color-outline-variant
|
|
30
|
-
--modal-elevation: var(--elevation-level3
|
|
24
|
+
--modal-transition-duration: var(--duration-medium2);
|
|
25
|
+
--modal-transition-easing: var(--easing-emphasized);
|
|
26
|
+
--modal-heading-color: var(--color-on-surface);
|
|
27
|
+
--modal-subheading-color: var(--color-on-surface-variant);
|
|
28
|
+
--modal-content-color: var(--color-on-surface-variant);
|
|
29
|
+
--modal-divider-color: var(--color-outline-variant);
|
|
30
|
+
--modal-elevation: var(--elevation-level3);
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
/* Scrim backdrop */
|
|
@@ -215,7 +215,7 @@ var css_248z = i`@charset "UTF-8";
|
|
|
215
215
|
/**
|
|
216
216
|
* @label Modal
|
|
217
217
|
* @tag wc-modal
|
|
218
|
-
* @rawTag modal
|
|
218
|
+
* @rawTag modal
|
|
219
219
|
* @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
|
|
220
220
|
*
|
|
221
221
|
* @cssprop --modal-container-color - Background color of the dialog container.
|
package/dist/modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal-wc\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n static styles = [styles];\n\n /** Whether the modal is open. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Heading text shown in the modal header. */\n @property({ type: String, reflect: true }) heading = '';\n\n /** Optional subheading / label text shown above the heading. */\n @property({ type: String, reflect: true }) subheading = '';\n\n /**\n * Size of the modal dialog.\n * - `\"xs\"`: Extra-small.\n * - `\"sm\"`: Small.\n * - `\"md\"`: Medium (default).\n * - `\"lg\"`: Large.\n * - `\"fullscreen\"`: Full-screen dialog.\n */\n @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n /** When true, hides the close button in the header. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n hideClose = false;\n\n /** When true, renders a loading overlay inside the modal. */\n @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n showLoader = false;\n\n /** When true, clicking the scrim will not close the modal. */\n @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n @state() private _visible = false;\n\n show() {\n this.open = true;\n }\n\n hide() {\n this._close('programmatic');\n }\n\n private _close(reason: string) {\n if (!this.open) return;\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('modal-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleScrimClick() {\n if (!this.noScrimClose) {\n this._close('scrim');\n }\n }\n\n private _handleCloseClick() {\n this._close('close-button');\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this._close('escape');\n }\n };\n\n protected updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('open')) {\n if (this.open) {\n this._visible = true;\n document.body.style.overflow = 'hidden';\n document.addEventListener('keydown', this._handleKeydown);\n } else {\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n\n private _handleAnimationEnd(e: AnimationEvent) {\n if (e.animationName === 'modal-exit') {\n this._visible = false;\n }\n }\n\n render() {\n if (!this.open && !this._visible) return nothing;\n\n const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n return html`\n <div\n class=${classMap({ scrim: true, visible: this.open })}\n @click=${this._handleScrimClick}\n aria-hidden=\"true\"\n ></div>\n\n <div class=\"dialog-wrapper\" role=\"presentation\">\n <div\n class=${classMap({\n dialog: true,\n open: this.open,\n [`size-${this.size}`]: true,\n 'show-loader': this.showLoader,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n @animationend=${this._handleAnimationEnd}\n >\n ${hasHeader\n ? html`\n <div class=\"dialog-header\">\n <div class=\"dialog-heading-section\">\n ${this.subheading\n ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n : nothing}\n ${this.heading\n ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n ${this.heading}\n </h2>`\n : nothing}\n </div>\n ${!this.hideClose\n ? html`<wc-icon-button\n class=\"dialog-close\"\n variant=\"text\"\n aria-label=\"Close dialog\"\n @click=${this._handleCloseClick}\n >\n <wc-icon name=\"close\"></wc-icon>\n </wc-icon-button>`\n : nothing}\n </div>\n `\n : nothing}\n\n <div class=\"dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"dialog-footer\">\n <slot name=\"footer\"></slot>\n </div>\n\n ${this.showLoader\n ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n <div class=\"dialog-loader-scrim\"></div>\n <wc-spinner></wc-spinner>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n static styles = [styles];\n\n /** Whether the modal is open. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Heading text shown in the modal header. */\n @property({ type: String, reflect: true }) heading = '';\n\n /** Optional subheading / label text shown above the heading. */\n @property({ type: String, reflect: true }) subheading = '';\n\n /**\n * Size of the modal dialog.\n * - `\"xs\"`: Extra-small.\n * - `\"sm\"`: Small.\n * - `\"md\"`: Medium (default).\n * - `\"lg\"`: Large.\n * - `\"fullscreen\"`: Full-screen dialog.\n */\n @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n /** When true, hides the close button in the header. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n hideClose = false;\n\n /** When true, renders a loading overlay inside the modal. */\n @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n showLoader = false;\n\n /** When true, clicking the scrim will not close the modal. */\n @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n @state() private _visible = false;\n\n show() {\n this.open = true;\n }\n\n hide() {\n this._close('programmatic');\n }\n\n private _close(reason: string) {\n if (!this.open) return;\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('modal-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleScrimClick() {\n if (!this.noScrimClose) {\n this._close('scrim');\n }\n }\n\n private _handleCloseClick() {\n this._close('close-button');\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this._close('escape');\n }\n };\n\n protected updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('open')) {\n if (this.open) {\n this._visible = true;\n document.body.style.overflow = 'hidden';\n document.addEventListener('keydown', this._handleKeydown);\n } else {\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n\n private _handleAnimationEnd(e: AnimationEvent) {\n if (e.animationName === 'modal-exit') {\n this._visible = false;\n }\n }\n\n render() {\n if (!this.open && !this._visible) return nothing;\n\n const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n return html`\n <div\n class=${classMap({ scrim: true, visible: this.open })}\n @click=${this._handleScrimClick}\n aria-hidden=\"true\"\n ></div>\n\n <div class=\"dialog-wrapper\" role=\"presentation\">\n <div\n class=${classMap({\n dialog: true,\n open: this.open,\n [`size-${this.size}`]: true,\n 'show-loader': this.showLoader,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n @animationend=${this._handleAnimationEnd}\n >\n ${hasHeader\n ? html`\n <div class=\"dialog-header\">\n <div class=\"dialog-heading-section\">\n ${this.subheading\n ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n : nothing}\n ${this.heading\n ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n ${this.heading}\n </h2>`\n : nothing}\n </div>\n ${!this.hideClose\n ? html`<wc-icon-button\n class=\"dialog-close\"\n variant=\"text\"\n aria-label=\"Close dialog\"\n @click=${this._handleCloseClick}\n >\n <wc-icon name=\"close\"></wc-icon>\n </wc-icon-button>`\n : nothing}\n </div>\n `\n : nothing}\n\n <div class=\"dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"dialog-footer\">\n <slot name=\"footer\"></slot>\n </div>\n\n ${this.showLoader\n ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n <div class=\"dialog-loader-scrim\"></div>\n <wc-spinner></wc-spinner>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA;;;;;;;;;;;;;;;;;;AAkBG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;;QAIuC,IAAA,CAAA,IAAI,GAAG,KAAK;;QAGb,IAAA,CAAA,OAAO,GAAG,EAAE;;QAGZ,IAAA,CAAA,UAAU,GAAG,EAAE;AAE1D;;;;;;;AAOG;QACwC,IAAA,CAAA,IAAI,GAAc,IAAI;;QAIjE,IAAA,CAAA,SAAS,GAAG,KAAK;;QAIjB,IAAA,CAAA,UAAU,GAAG,KAAK;;QAGwC,IAAA,CAAA,YAAY,GAAG,KAAK;QAE7D,IAAA,CAAA,QAAQ,GAAG,KAAK;AAgChB,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,CAAgB,KAAI;AACrD,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AACtB,gBAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;YACvB;AACF,QAAA,CAAC;IAiGH;IAnIE,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;IAClB;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;IAC7B;AAEQ,IAAA,MAAM,CAAC,MAAc,EAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;AAChB,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,MAAM,EAAE,EAAE,MAAM,EAAE;AAClB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH;IACH;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;QACtB;IACF;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;IAC7B;AAQU,IAAA,OAAO,CAAC,iBAAuC,EAAA;AACvD,QAAA,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;AACjC,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;gBACpB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;gBACvC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC;YAC3D;iBAAO;gBACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;gBACjC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC;YAC9D;QACF;IACF;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;QAC5B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE;QACjC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC;IAC9D;AAEQ,IAAA,mBAAmB,CAAC,CAAiB,EAAA;AAC3C,QAAA,IAAI,CAAC,CAAC,aAAa,KAAK,YAAY,EAAE;AACpC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;QACvB;IACF;IAEA,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAOC,CAAO;AAEhD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS;AAEpE,QAAA,OAAOC,CAAI,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AAC5C,eAAA,EAAA,IAAI,CAAC,iBAAiB;;;;;;AAMrB,gBAAA,EAAAA,CAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;YACZ,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;YAC3B,aAAa,EAAE,IAAI,CAAC,UAAU;SAC/B,CAAC;;;4BAGgB,IAAI,CAAC,OAAO,GAAG,eAAe,GAAGF,CAAO;AAC1C,wBAAA,EAAA,IAAI,CAAC,mBAAmB;;YAEtC;cACEC,CAAI,CAAA;;;AAGI,oBAAA,EAAA,IAAI,CAAC;AACL,kBAAEA,CAAI,CAAA,gCAAgC,IAAI,CAAC,UAAU,CAAA,IAAA;AACrD,kBAAED,CAAO;AACT,oBAAA,EAAA,IAAI,CAAC;kBACHC,CAAI,CAAA,CAAA;AACA,0BAAA,EAAA,IAAI,CAAC,OAAO;AACV,6BAAA;AACR,kBAAED,CAAO;;oBAEX,CAAC,IAAI,CAAC;kBACJC,CAAI,CAAA,CAAA;;;;AAIO,+BAAA,EAAA,IAAI,CAAC,iBAAiB;;;AAGf,uCAAA;AACpB,kBAAED,CAAO;;AAEd,cAAA;AACH,cAAEA,CAAO;;;;;;;;;;AAUT,UAAA,EAAA,IAAI,CAAC;cACHC,CAAI,CAAA,CAAA;;;AAGG,oBAAA;AACT,cAAED,CAAO;;;KAGhB;IACH;;AApKO,KAAA,CAAA,MAAM,GAAG,CAACG,QAAM,CAAC;AAGoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAGd,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAGb,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAkB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAUhB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAyB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAIlE,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE;AACjD,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAIlB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE;AACjD,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAGuC,UAAA,CAAA;IAAzDA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE;AAAuB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAE9D,UAAA,CAAA;AAAhB,IAAAC,CAAK;AAA4B,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAjCvB,KAAK,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CAsKjB;;;;"}
|