@redvars/peacock 3.8.1 → 3.8.2

package/dist/button-group.js

@@ -1,15 +1,21 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { e } from './class-map-YU7g0o3B.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
 import { Button } from './button.js';
-import { I as IconButton } from './icon-button-CAzYr_qr.js';
+import { IconButton } from './icon-button.js';
+import './query-CHb9Ft_d.js';
+import './base-Cl6v8-BZ.js';
+import './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';
-import './ButtonConstants-D06bY4uy.js';
-import './button-colors-D7sJyPy8.js';
-import './NativeHyperlinkMixin-DrYXyfMQ.js';
-import './observe-slot-change-D8Xg-kSS.js';
+import './if-defined-BXZpRQ4P.js';
+import './when-DEJm_QN9.js';
+import './is-link-Dk2OV3PM.js';
+import './observe-slot-change-DPxaZrZF.js';
 import './dispatch-event-utils-CuEqjlPT.js';
-import './query-QBcUV-L_.js';
+import './ButtonConstants-CahP2_NA.js';
+import './element-internals-2CMts_0M.js';
+import './form-associated-BXADnjOB.js';
+import './hyperlink-DLvb6MXE.js';
+import './throttle-C7ZAPqtu.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
@@ -19,50 +25,69 @@ var css_248z = i`* {
   display: none !important;
 }
 
-.button-group {
-  display: flex;
-  gap: var(--_button-group-gap);
+[hidden] {
+  display: none !important;
 }
 
-.button-group.size-xs,
-.button-group.size-extra-small {
-  --_button-group-gap: 0.125rem;
+:host {
+  --button-group-spacing: unset;
+  display: flex;
+  gap: var(--button-group-spacing, var(--private-button-group-spacing));
 }
 
-.button-group.size-sm,
-.button-group.size-small {
-  --_button-group-gap: 0.125rem;
-  --button-container-padding: 1.5rem;
+:host([size=xs]),
+:host([size=extra-small]) {
+  --private-button-group-spacing: var(--spacing-200);
 }
 
-.button-group.size-md,
-.button-group.size-medium {
-  --_button-group-gap: 0.125rem;
+:host([size=sm]),
+:host([size=small]) {
+  --private-button-group-spacing: var(--spacing-150);
 }
 
-.button-group.size-lg,
-.button-group.size-large {
-  --_button-group-gap: 0.125rem;
+:host([size=md]),
+:host([size=medium]),
+:host([size=lg]),
+:host([size=large]),
+:host([size=xl]),
+:host([size=extra-large]) {
+  --private-button-group-spacing: var(--spacing-100);
 }
 
-.button-group.size-xl {
-  --_button-group-gap: 0.125rem;
+:host([connected]) {
+  --private-button-group-spacing: var(--spacing-025);
 }
 
-.button-group.variant-standard {
-  --_button-group-gap: 0.5rem;
+:host([connected]) slot::slotted(*) {
+  --button-container-shape-start-start: var(--shape-corner-medium);
+  --button-container-shape-end-start: var(--shape-corner-medium);
+  --button-container-shape-start-end: var(--shape-corner-medium);
+  --button-container-shape-end-end: var(--shape-corner-medium);
+  --button-container-shape-variant: round;
 }
 
-.button-group.variant-connected {
-  --_button-group-gap: 0.125rem;
+:host([connected]) slot::slotted(:first-child:not([selected])) {
+  --button-container-shape-start-start: calc(var(--button-height) / 2);
+  --button-container-shape-end-start: calc(var(--button-height) / 2);
+  --button-container-shape-start-end: var(--shape-corner-medium);
+  --button-container-shape-end-end: var(--shape-corner-medium);
+  --button-container-shape-variant: round;
 }
 
-.button-group.orientation-horizontal {
-  flex-direction: row;
+:host([connected]) slot::slotted(:last-child:not([selected])) {
+  --button-container-shape-start-start: var(--shape-corner-medium);
+  --button-container-shape-end-start: var(--shape-corner-medium);
+  --button-container-shape-start-end: calc(var(--button-height) / 2);
+  --button-container-shape-end-end: calc(var(--button-height) / 2);
+  --button-container-shape-variant: round;
 }
 
-.button-group.orientation-vertical {
-  flex-direction: column;
+:host([connected]) slot::slotted(:only-child:not([selected])) {
+  --button-container-shape-start-start: var(--shape-corner-medium);
+  --button-container-shape-end-start: var(--shape-corner-medium);
+  --button-container-shape-start-end: var(--shape-corner-medium);
+  --button-container-shape-end-end: var(--shape-corner-medium);
+  --button-container-shape-variant: round;
 }`;
 
 /**
@@ -74,9 +99,16 @@ var css_248z = i`* {
 
  * @example
  * ```html
- * <wc-button-group variant="connected">
- *  <wc-icon-button toggle selected><wc-icon name="home"></wc-icon></wc-icon-button>
- *  <wc-icon-button toggle><wc-icon name="alarm"></wc-icon></wc-icon-button>
+ * <wc-button-group connected="true">
+ *  <wc-icon-button toggle="true" shaped="wide">
+ *    <wc-icon name="format_bold"></wc-icon>
+ *  </wc-icon-button>
+ *  <wc-icon-button toggle="true" shaped="wide">
+ *    <wc-icon name="format_italic"></wc-icon>
+ *  </wc-icon-button>
+ *  <wc-icon-button toggle="true" shaped="wide">
+ *    <wc-icon name="format_underlined"></wc-icon>
+ *  </wc-icon-button>
  * </wc-button-group>
  * ```
  *
@@ -93,113 +125,34 @@ let ButtonGroup = class ButtonGroup extends i$1 {
         /**
          * Layout variant of the button group.
          * `"standard"` shows buttons with a small gap between them.
-         * `"connected"` places buttons with a 2px gap; in horizontal orientation outer buttons have fully
-         * rounded outer corners and middle buttons keep standard rounded corners. In vertical orientation
-         * all buttons keep their default corner shape.
+         * `"connected"` places buttons with a 2px gap;
+         * rounded outer corners and middle buttons keep standard rounded corners.
          * Defaults to `"standard"`.
          */
-        this.variant = 'standard';
-        /**
-         * Orientation of the button group.
-         * `"horizontal"` lays buttons out in a row.
-         * `"vertical"` stacks buttons in a column.
-         * Defaults to `"horizontal"`.
-         */
-        this.orientation = 'horizontal';
+        this.connected = false;
     }
     updated() {
-        this._syncChildren();
+        this._syncButtonProperties();
     }
     _getSlottedElements() {
         const slot = this.shadowRoot?.querySelector('slot');
         return (slot?.assignedElements({ flatten: true }) ?? []);
     }
-    _syncChildren() {
+    _syncButtonProperties() {
         const children = this._getSlottedElements();
-        const isVertical = this.orientation === 'vertical';
         children.forEach((child, index) => {
-            const isFirst = index === 0;
-            const isLast = index === children.length - 1;
-            const isOnly = children.length === 1;
-            if (this.color && 'color' in child) {
-                child.color = this.color;
-            }
-            if (this.buttonVariant && 'variant' in child) {
-                child.variant = this.buttonVariant;
-            }
-            if (this.variant === 'connected') {
-                child.style.setProperty('--button-container-shape-variant', 'round');
-                if (isOnly) {
-                    child.style.setProperty('--button-container-shape', 'var(--shape-corner-full)');
-                    child.style.removeProperty('--button-container-shape-start-start');
-                    child.style.removeProperty('--button-container-shape-end-start');
-                    child.style.removeProperty('--button-container-shape-start-end');
-                    child.style.removeProperty('--button-container-shape-end-end');
-                }
-                else if (isFirst) {
-                    child.style.removeProperty('--button-container-shape');
-                    if (isVertical) {
-                        // Top button in vertical group: leave default corner shape
-                        child.style.removeProperty('--button-container-shape-start-start');
-                        child.style.removeProperty('--button-container-shape-start-end');
-                        child.style.removeProperty('--button-container-shape-end-start');
-                        child.style.removeProperty('--button-container-shape-end-end');
-                    }
-                    else {
-                        // Left button in horizontal group: round left corners, standard right corners
-                        child.style.setProperty('--button-container-shape-start-start', 'calc(var(--button-height) / 2)');
-                        child.style.setProperty('--button-container-shape-end-start', 'calc(var(--button-height) / 2)');
-                        child.style.setProperty('--button-container-shape-start-end', 'var(--shape-corner-medium)');
-                        child.style.setProperty('--button-container-shape-end-end', 'var(--shape-corner-medium)');
-                    }
-                }
-                else if (isLast) {
-                    child.style.removeProperty('--button-container-shape');
-                    if (isVertical) {
-                        // Bottom button in vertical group: leave default corner shape
-                        child.style.removeProperty('--button-container-shape-start-start');
-                        child.style.removeProperty('--button-container-shape-start-end');
-                        child.style.removeProperty('--button-container-shape-end-start');
-                        child.style.removeProperty('--button-container-shape-end-end');
-                    }
-                    else {
-                        // Right button in horizontal group: standard left corners, round right corners
-                        child.style.setProperty('--button-container-shape-start-start', 'var(--shape-corner-medium)');
-                        child.style.setProperty('--button-container-shape-end-start', 'var(--shape-corner-medium)');
-                        child.style.setProperty('--button-container-shape-start-end', 'calc(var(--button-height) / 2)');
-                        child.style.setProperty('--button-container-shape-end-end', 'calc(var(--button-height) / 2)');
-                    }
+            ['color', 'variant', 'toggle', 'size'].forEach(prop => {
+                // @ts-ignore
+                if (this[prop] && prop in child) {
+                    // @ts-ignore
+                    child[prop] = this[prop];
                 }
-                else {
-                    // Middle buttons: standard rounded corners on all sides
-                    child.style.setProperty('--button-container-shape', 'var(--shape-corner-medium)');
-                    child.style.removeProperty('--button-container-shape-start-start');
-                    child.style.removeProperty('--button-container-shape-end-start');
-                    child.style.removeProperty('--button-container-shape-start-end');
-                    child.style.removeProperty('--button-container-shape-end-end');
-                }
-            }
-            else {
-                child.style.removeProperty('--button-container-shape');
-                child.style.removeProperty('--button-container-shape-start-start');
-                child.style.removeProperty('--button-container-shape-end-start');
-                child.style.removeProperty('--button-container-shape-start-end');
-                child.style.removeProperty('--button-container-shape-end-end');
-                child.style.removeProperty('--button-container-shape-variant');
-            }
+            });
         });
     }
     render() {
-        const cssClasses = {
-            'button-group': true,
-            [`size-${this.size}`]: true,
-            [`variant-${this.variant}`]: true,
-            [`orientation-${this.orientation}`]: true,
-        };
         return b `
-      <div class=${e(cssClasses)}>
-        <slot @slotchange=${() => this._syncChildren()}></slot>
-      </div>
+      <slot @slotchange=${() => this._syncButtonProperties()}></slot>
     `;
     }
 };
@@ -209,21 +162,18 @@ let ButtonGroup = class ButtonGroup extends i$1 {
 ButtonGroup.styles = [css_248z];
 ButtonGroup.Button = Button;
 ButtonGroup.IconButton = IconButton;
-__decorate([
-    n()
-], ButtonGroup.prototype, "size", void 0);
 __decorate([
     n({ reflect: true })
-], ButtonGroup.prototype, "variant", void 0);
+], ButtonGroup.prototype, "size", void 0);
 __decorate([
-    n({ reflect: true })
-], ButtonGroup.prototype, "orientation", void 0);
+    n({ type: Boolean, reflect: true })
+], ButtonGroup.prototype, "connected", void 0);
 __decorate([
     n({ reflect: true })
 ], ButtonGroup.prototype, "color", void 0);
 __decorate([
-    n({ attribute: 'button-variant', reflect: true })
-], ButtonGroup.prototype, "buttonVariant", void 0);
+    n({ attribute: 'variant', reflect: true })
+], ButtonGroup.prototype, "variant", void 0);
 ButtonGroup = __decorate([
     IndividualComponent
 ], ButtonGroup);

package/dist/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../src/button/button-group/button-group.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button-group.scss';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../icon-button/icon-button.js';\nimport type { GroupButtonInterface } from '@/button/GroupButtonInterface.js';\n\n/**\n * @label Button Group\n * @tag wc-button-group\n * @rawTag button-group\n *\n * @summary Group a series of buttons together on a single line with the button group, and super-power.\n\n * @example\n * ```html\n * <wc-button-group variant=\"connected\">\n *  <wc-icon-button toggle selected><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *  <wc-icon-button toggle><wc-icon name=\"alarm\"></wc-icon></wc-icon-button>\n * </wc-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nclass ButtonGroup extends LitElement {\n  // Lit prefers CSS-in-JS for better performance and scoping.\n  // If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)\n  // that can import .scss files as lit-css.\n  static styles = [styles];\n\n  static Button = Button;\n\n  static IconButton = IconButton;\n\n  /**\n   * Button size.\n   * Possible values are `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Layout variant of the button group.\n   * `\"standard\"` shows buttons with a small gap between them.\n   * `\"connected\"` places buttons with a 2px gap; in horizontal orientation outer buttons have fully\n   * rounded outer corners and middle buttons keep standard rounded corners. In vertical orientation\n   * all buttons keep their default corner shape.\n   * Defaults to `\"standard\"`.\n   */\n  @property({ reflect: true }) variant: 'standard' | 'connected' = 'standard';\n\n  /**\n   * Orientation of the button group.\n   * `\"horizontal\"` lays buttons out in a row.\n   * `\"vertical\"` stacks buttons in a column.\n   * Defaults to `\"horizontal\"`.\n   */\n  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' =\n    'horizontal';\n\n  /**\n   * Color applied to all buttons in the group.\n   * Possible values are `\"primary\"`, `\"success\"`, `\"danger\"`, `\"warning\"`, `\"surface\"`, `\"on-surface\"`.\n   */\n  @property({ reflect: true }) color?:\n    | 'primary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface';\n\n  /**\n   * Visual style applied to all buttons in the group.\n   * Possible values are `\"filled\"`, `\"tonal\"`, `\"outlined\"`.\n   */\n  @property({ attribute: 'button-variant', reflect: true }) buttonVariant?:\n    | 'filled'\n    | 'tonal'\n    | 'outlined';\n\n  override updated() {\n    this._syncChildren();\n  }\n\n  private _getSlottedElements(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    return (slot?.assignedElements({ flatten: true }) ?? []) as HTMLElement[];\n  }\n\n  private _syncChildren() {\n    const children = this._getSlottedElements();\n    const isVertical = this.orientation === 'vertical';\n\n    children.forEach((child, index) => {\n      const isFirst = index === 0;\n      const isLast = index === children.length - 1;\n      const isOnly = children.length === 1;\n\n      if (this.color && 'color' in child) {\n        (child as GroupButtonInterface).color = this.color;\n      }\n\n      if (this.buttonVariant && 'variant' in child) {\n        (child as GroupButtonInterface).variant = this.buttonVariant;\n      }\n\n      if (this.variant === 'connected') {\n        child.style.setProperty('--button-container-shape-variant', 'round');\n\n        if (isOnly) {\n          child.style.setProperty(\n            '--button-container-shape',\n            'var(--shape-corner-full)',\n          );\n          child.style.removeProperty('--button-container-shape-start-start');\n          child.style.removeProperty('--button-container-shape-end-start');\n          child.style.removeProperty('--button-container-shape-start-end');\n          child.style.removeProperty('--button-container-shape-end-end');\n        } else if (isFirst) {\n          child.style.removeProperty('--button-container-shape');\n          if (isVertical) {\n            // Top button in vertical group: leave default corner shape\n            child.style.removeProperty('--button-container-shape-start-start');\n            child.style.removeProperty('--button-container-shape-start-end');\n            child.style.removeProperty('--button-container-shape-end-start');\n            child.style.removeProperty('--button-container-shape-end-end');\n          } else {\n            // Left button in horizontal group: round left corners, standard right corners\n            child.style.setProperty(\n              '--button-container-shape-start-start',\n              'calc(var(--button-height) / 2)',\n            );\n            child.style.setProperty(\n              '--button-container-shape-end-start',\n              'calc(var(--button-height) / 2)',\n            );\n            child.style.setProperty(\n              '--button-container-shape-start-end',\n              'var(--shape-corner-medium)',\n            );\n            child.style.setProperty(\n              '--button-container-shape-end-end',\n              'var(--shape-corner-medium)',\n            );\n          }\n        } else if (isLast) {\n          child.style.removeProperty('--button-container-shape');\n          if (isVertical) {\n            // Bottom button in vertical group: leave default corner shape\n            child.style.removeProperty('--button-container-shape-start-start');\n            child.style.removeProperty('--button-container-shape-start-end');\n            child.style.removeProperty('--button-container-shape-end-start');\n            child.style.removeProperty('--button-container-shape-end-end');\n          } else {\n            // Right button in horizontal group: standard left corners, round right corners\n            child.style.setProperty(\n              '--button-container-shape-start-start',\n              'var(--shape-corner-medium)',\n            );\n            child.style.setProperty(\n              '--button-container-shape-end-start',\n              'var(--shape-corner-medium)',\n            );\n            child.style.setProperty(\n              '--button-container-shape-start-end',\n              'calc(var(--button-height) / 2)',\n            );\n            child.style.setProperty(\n              '--button-container-shape-end-end',\n              'calc(var(--button-height) / 2)',\n            );\n          }\n        } else {\n          // Middle buttons: standard rounded corners on all sides\n          child.style.setProperty(\n            '--button-container-shape',\n            'var(--shape-corner-medium)',\n          );\n          child.style.removeProperty('--button-container-shape-start-start');\n          child.style.removeProperty('--button-container-shape-end-start');\n          child.style.removeProperty('--button-container-shape-start-end');\n          child.style.removeProperty('--button-container-shape-end-end');\n        }\n      } else {\n        child.style.removeProperty('--button-container-shape');\n        child.style.removeProperty('--button-container-shape-start-start');\n        child.style.removeProperty('--button-container-shape-end-start');\n        child.style.removeProperty('--button-container-shape-start-end');\n        child.style.removeProperty('--button-container-shape-end-end');\n        child.style.removeProperty('--button-container-shape-variant');\n      }\n    });\n  }\n\n  render() {\n    const cssClasses = {\n      'button-group': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`orientation-${this.orientation}`]: true,\n    };\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <slot @slotchange=${() => this._syncChildren()}></slot>\n      </div>\n    `;\n  }\n}\n\nexport default ButtonGroup;\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":"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"}
+{"version":3,"file":"button-group.js","sources":["../../src/button/button-group/button-group.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button-group.scss';\nimport { Button, ButtonColor } from '../button/button.js';\nimport { IconButton } from '../icon-button/icon-button.js';\n\n/**\n * @label Button Group\n * @tag wc-button-group\n * @rawTag button-group\n *\n * @summary Group a series of buttons together on a single line with the button group, and super-power.\n\n * @example\n * ```html\n * <wc-button-group connected=\"true\">\n *  <wc-icon-button toggle=\"true\" shaped=\"wide\">\n *    <wc-icon name=\"format_bold\"></wc-icon>\n *  </wc-icon-button>\n *  <wc-icon-button toggle=\"true\" shaped=\"wide\">\n *    <wc-icon name=\"format_italic\"></wc-icon>\n *  </wc-icon-button>\n *  <wc-icon-button toggle=\"true\" shaped=\"wide\">\n *    <wc-icon name=\"format_underlined\"></wc-icon>\n *  </wc-icon-button>\n * </wc-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nclass ButtonGroup extends LitElement {\n  // Lit prefers CSS-in-JS for better performance and scoping.\n  // If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)\n  // that can import .scss files as lit-css.\n  static styles = [styles];\n\n  static Button = Button;\n\n  static IconButton = IconButton;\n\n  /**\n   * Button size.\n   * Possible values are `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Layout variant of the button group.\n   * `\"standard\"` shows buttons with a small gap between them.\n   * `\"connected\"` places buttons with a 2px gap;\n   * rounded outer corners and middle buttons keep standard rounded corners.\n   * Defaults to `\"standard\"`.\n   */\n  @property({ type: Boolean, reflect: true }) connected = false;\n\n  /**\n   * Color applied to all buttons in the group.\n   * Possible values are `\"primary\"`, `\"success\"`, `\"danger\"`, `\"warning\"`, `\"surface\"`, `\"on-surface\"`.\n   */\n  @property({ reflect: true }) color?: ButtonColor;\n\n  /**\n   * Visual style applied to all buttons in the group.\n   * Possible values are `\"filled\"`, `\"tonal\"`, `\"outlined\"`.\n   */\n  @property({ attribute: 'variant', reflect: true }) variant?:\n    | 'filled'\n    | 'tonal'\n    | 'outlined';\n\n  override updated() {\n    this._syncButtonProperties();\n  }\n\n  private _getSlottedElements(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    return (slot?.assignedElements({ flatten: true }) ?? []) as HTMLElement[];\n  }\n\n  private _syncButtonProperties() {\n    const children = this._getSlottedElements();\n    children.forEach((child, index) => {\n      ['color', 'variant', 'toggle', 'size'].forEach(prop => {\n        // @ts-ignore\n        if (this[prop] && prop in child) {\n          // @ts-ignore\n          (child as any)[prop] = this[prop];\n        }\n      });\n    });\n  }\n\n  render() {\n    return html`\n      <slot @slotchange=${() => this._syncButtonProperties()}></slot>\n    `;\n  }\n}\n\nexport default ButtonGroup;\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEH,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQA,GAAU,CAAA;AAApC,IAAA,WAAA,GAAA;;AAUE;;;AAGG;QAC0B,IAAA,CAAA,IAAI,GAAqC,IAAI;AAE1E;;;;;;AAMG;QACyC,IAAA,CAAA,SAAS,GAAG,KAAK;IA4C/D;IA3BW,OAAO,GAAA;QACd,IAAI,CAAC,qBAAqB,EAAE;IAC9B;IAEQ,mBAAmB,GAAA;QACzB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC;AACnD,QAAA,QAAQ,IAAI,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE;IACzD;IAEQ,qBAAqB,GAAA;AAC3B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,EAAE;QAC3C,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAI;AAChC,YAAA,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;;gBAEpD,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,EAAE;;oBAE9B,KAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;gBACnC;AACF,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;AACW,wBAAA,EAAA,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAA;KACvD;IACH;;AAjEA;AACA;AACA;AACO,WAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEjB,WAAA,CAAA,MAAM,GAAG,MAAH;AAEN,WAAA,CAAA,UAAU,GAAG,UAAH;AAMY,UAAA,CAAA;AAA5B,IAAAC,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAgD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAS/B,UAAA,CAAA;IAA3CA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAMjC,UAAA,CAAA;AAA5B,IAAAA,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAsB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAME,UAAA,CAAA;IAAlDA,CAAQ,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE;AAGlC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAtCX,WAAW,GAAA,UAAA,CAAA;IADhB;AACK,CAAA,EAAA,WAAW,CAmEhB;AAED,oBAAe,WAAW;;;;"}