@alegendstale/holly-components 0.2.2

package/dist/components/color-palette/color-palette.js

@@ -0,0 +1,346 @@
+import { css as S, LitElement as b, nothing as x, html as d } from "lit";
+import { query as C, property as h, state as $, customElement as N } from "lit/decorators.js";
+import { styleMap as w } from "lit/directives/style-map.js";
+import { repeat as _ } from "lit/directives/repeat.js";
+import { defaultSettings as f, Status as n, PaletteError as I, parseColors as D, Direction as P } from "./color-palette-utils.js";
+import { ColorPaletteItem as A } from "./item/color-palette-item.js";
+import { copyToClipboard as y } from "../../utils/basicUtils.js";
+import { EventEmitter as M } from "../../utils/EventEmitter.js";
+import { CanvasGradient as E } from "../canvas/canvas-gradient.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import { ColorPaletteItemEdit as O } from "./item/color-palette-item-edit.js";
+import { ref as m, createRef as k } from "lit/directives/ref.js";
+var T = Object.defineProperty, V = Object.getOwnPropertyDescriptor, a = (t, e, i, l) => {
+  for (var r = l > 1 ? void 0 : l ? V(e, i) : e, p = t.length - 1, o; p >= 0; p--)
+    (o = t[p]) && (r = (l ? o(e, i, r) : o(r)) || r);
+  return l && r && T(e, i, r), r;
+};
+let s = class extends b {
+  constructor() {
+    super(...arguments), this._editMode = !1, this.colors = [], this.height = f.height, this.width = f.width, this.direction = f.direction, this.gradient = !1, this.preventHover = !1, this.override = !1, this.aliases = [], this.maxWidth = 0, this.status = n.VALID, this.pulse = !1, this.emitter = new M(), this.pluginSettings = f, this.createPalette = () => {
+      try {
+        if (this.status === n.VALID)
+          return this.gradient ? this.createGradient() : this.createColors();
+        throw new I(this.status);
+      } catch (t) {
+        return t instanceof I ? (this.emitter.emit("notice", t.message), this.createInvalidPalette(t.status, t.message)) : x;
+      }
+    };
+  }
+  set editMode(t) {
+    this._editMode = t, this.emitter.emit("editMode", t);
+  }
+  get editMode() {
+    return this._editMode;
+  }
+  /**
+   * Helper accessor for settings
+   */
+  set settings({ height: t, width: e, direction: i, gradient: l, preventHover: r, override: p, aliases: o }) {
+    this.height = t, this.width = e, this.direction = i, this.gradient = l, this.preventHover = r, this.override = p, this.aliases = o;
+  }
+  get settings() {
+    return {
+      height: this.height,
+      width: this.width,
+      direction: this.direction,
+      gradient: this.gradient,
+      preventHover: this.preventHover,
+      override: this.override,
+      aliases: this.aliases
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.pluginSettings.errorPulse && (this.pulse = !0, setTimeout(() => {
+      this.pulse = !1;
+    }, this.pluginSettings.noticeDuration));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  willUpdate(t) {
+    super.willUpdate(t), this.setStatusAndColors();
+  }
+  /**
+   * Sets the current status and parses colors
+   */
+  setStatusAndColors() {
+    const t = () => !isNaN(this.height) && !isNaN(this.width) && Object.values(P).includes(this.direction) && this.gradient != null && this.preventHover != null && this.override != null && (this.aliases instanceof Array || typeof this.aliases > "u"), e = D(this.colors);
+    t() || (this.status = n.INVALID_SETTINGS), (typeof e == "string" || typeof e == "object" && e.length === 0) && (this.status = this.status === n.INVALID_SETTINGS ? n.INVALID_COLORS_AND_SETTINGS : n.INVALID_COLORS), typeof e == "object" && (this.colors = e), this.colors.length <= 1 && this.gradient && (this.status = n.INVALID_GRADIENT);
+  }
+  render() {
+    const t = {
+      // Set default corner style
+      "--palette-corners": this.pluginSettings.corners ? "5px" : "0px",
+      "--palette-height": `${this.height}px`,
+      "--palette-width": `${this.getPaletteWidth()}px`,
+      "--palette-column-flex-basis": `${this.height / this.colors.length / 2}px`
+    }, e = {
+      animation: this.pulse ? `pulse ${this.pluginSettings.noticeDuration / 1e3 / 2}s infinite` : ""
+    }, i = {
+      "palette-scroll": this.width > f.width
+    };
+    return d`
+			<div 
+				id="palette" 
+				class=${L(i)}
+				style=${this.status === n.VALID ? w(t) : w(e)}
+			>
+				${this.createPalette()}
+			</div>
+		`;
+  }
+  /**
+  * @returns `user` OR `auto` width based on which is more appropriate
+  */
+  getPaletteWidth() {
+    return this.maxWidth < this.settings.width && this.maxWidth > 0 ? this.maxWidth : this.settings.width;
+  }
+  createColors() {
+    return d`
+			${_(
+      this.colors,
+      (t, e) => {
+        var r, p;
+        let i = (o) => {
+          o instanceof A && (o.emitter.clear(), o.emitter.on("click", async (u) => await y(t.toUpperCase(), this.pluginSettings.copyFormat)));
+        }, l = (o) => {
+          o instanceof O && (o.emitter.clear(), o.emitter.on("click", async (u) => await y(t.toUpperCase(), this.pluginSettings.copyFormat)), o.emitter.on("trash", (u) => {
+            u.stopPropagation();
+            const g = this.colors.indexOf(t);
+            this.colors = this.colors.filter((c, v) => v !== g), this.aliases = this.aliases.filter((c, v) => v !== g), this.emitter.emit("changed", this.colors, this.settings);
+          }), o.emitter.on("alias", (u) => {
+            const g = this.colors.findIndex((c) => c === t);
+            for (let c = 0; c < g; c++)
+              this.aliases[c] || (this.aliases[c] = "");
+            this.aliases[g] = u, this.emitter.emit("changed", this.colors, this.settings);
+          }));
+        };
+        return this.editMode ? d`
+							<color-palette-item-edit
+								draggable=${!0}
+								color=${t}
+								alias=${((p = this.aliases) == null ? void 0 : p[e]) || ""}
+								aliasMode=${this.pluginSettings.aliasMode}
+								direction=${this.direction}
+								?editMode=${this.editMode}
+								height=${this.height}
+								?preventHover=${this.preventHover}
+								?hoverWhileEditing=${this.pluginSettings.hoverWhileEditing}
+								colorCount=${this.colors.length}
+								${m(l)}
+							>
+							</color-palette-item-edit>
+						` : d`
+							<color-palette-item
+								color=${t}
+								alias=${((r = this.aliases) == null ? void 0 : r[e]) || ""}
+								aliasMode=${this.pluginSettings.aliasMode}
+								direction=${this.direction}
+								?editMode=${this.editMode}
+								height=${this.height}
+								?preventHover=${this.preventHover}
+								?hoverWhileEditing=${this.pluginSettings.hoverWhileEditing}
+								colorCount=${this.colors.length}
+								${m(i)}
+							>
+							</color-palette-item>
+						`;
+      }
+    )}
+		`;
+  }
+  createGradient() {
+    let t = k(), e = (i) => {
+      i instanceof E && (i.emitter.clear(), i.emitter.on("click", async (l) => await y(l.toUpperCase(), this.pluginSettings.copyFormat)), i.emitter.on("move", (l) => {
+        if (!t.value) return;
+        let r = t.value;
+        r.text = i.getCanvasHex(l.x, l.y).toUpperCase(), r.setClampedPosition(l, this.getBoundingClientRect());
+      }));
+    };
+    return d`
+			<tool-tip 
+				id="tooltip" 
+				?display=${!this.preventHover}
+				${m(t)}
+			>
+				<canvas-gradient
+					.colors=${this.colors}
+					height=${this.height}
+					width=${this.getPaletteWidth()}
+					direction=${this.direction}
+					id="canvas"
+					${m(e)}
+				>
+				</canvas-gradient>
+			</tool-tip>
+		`;
+  }
+  /**
+   * Create invalid palette based on palette status
+   * @param type Palette status type
+   */
+  createInvalidPalette(t, e = "") {
+    let i = "Invalid palette";
+    switch (t) {
+      case n.INVALID_COLORS:
+        i = "Colors are defined incorrectly";
+        break;
+      case n.INVALID_SETTINGS:
+        i = "Issues parsing settings";
+        break;
+      case n.INVALID_COLORS_AND_SETTINGS:
+        i = "Colors and settings are defined incorrectly";
+        break;
+      case n.INVALID_GRADIENT:
+        i = "Gradients require more than 1 color to display";
+        break;
+    }
+    return this.emitter.emit("notice", `Palette:
+${e || i}`), d`
+			<section id="invalid">
+				<span>${t}</span>
+			</section>
+		`;
+  }
+};
+s.styles = [
+  S`
+			:host {
+				display: block;
+				width: fit-content;
+			}
+
+			:host([direction='row']) #palette {
+				flex-direction: column;
+			}
+			
+			/* Edit Mode */
+			:host([editMode]) #palette {
+				overflow-x: auto;
+			}
+
+			// Invalid Palette
+			:host(:not([status='Valid'])) #palette {
+				
+			}
+			
+			/* Palette Container */
+
+			#container {
+				cursor: pointer;
+				position: relative;
+				background-color: #000;
+				contain: paint;
+			}
+
+			#container.palette-scroll {
+				overflow-x: auto;
+			}
+
+			/* Palette */
+
+			#palette {
+				/* fallback vars */
+				--palette-height: 150px;
+				--palette-width: 700px;
+				--palette-background-color: transparent;
+				--palette-color: #000;
+				--palette-column-flex-basis: 80px;
+				--palette-corners: 5px;
+
+				display: flex;
+				flex-direction: row;
+				border-radius: var(--palette-corners);
+				overflow: hidden;
+				cursor: pointer;
+				height: var(--palette-height);
+				width: var(--palette-width);
+				position: relative;
+				scrollbar-width: thin;
+
+				/* Drag & Drop */
+
+				& > .is-dragging {
+					opacity: 0;
+				}
+
+				& > #invalid {
+					position: absolute;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					height: var(--palette-height);
+					width: var(--palette-width);
+					background-color: #000000c0;
+					border-radius: var(--palette-corners);
+
+					& > span {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						color: white;
+						background-color: #000;
+						width: 100%;
+						height: 30%;
+						text-align: center;
+						user-select: none;
+					}
+				}
+			}
+
+			@keyframes pulse {
+				50% {
+					background-color: #FFFF0080;
+				}
+			}
+		`
+];
+a([
+  C("#palette")
+], s.prototype, "palette", 2);
+a([
+  h({ type: Boolean })
+], s.prototype, "editMode", 1);
+a([
+  h({ type: Array, reflect: !0 })
+], s.prototype, "colors", 2);
+a([
+  h({ type: Number, reflect: !0 })
+], s.prototype, "height", 2);
+a([
+  h({ type: Number, reflect: !0 })
+], s.prototype, "width", 2);
+a([
+  h({ type: String, reflect: !0 })
+], s.prototype, "direction", 2);
+a([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "gradient", 2);
+a([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "preventHover", 2);
+a([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "override", 2);
+a([
+  h({ type: Array, reflect: !0 })
+], s.prototype, "aliases", 2);
+a([
+  h({ type: Number })
+], s.prototype, "maxWidth", 2);
+a([
+  $()
+], s.prototype, "status", 2);
+a([
+  $()
+], s.prototype, "pulse", 2);
+a([
+  h({ type: Object })
+], s.prototype, "pluginSettings", 2);
+s = a([
+  N("color-palette")
+], s);
+export {
+  s as ColorPalette
+};

package/dist/components/color-palette/component/color-palette-component.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, PropertyValues } from 'lit';
+import { ColorPalette } from '../color-palette';
+import { PaletteSettings } from '../color-palette-utils';
+import { AbsoluteContainer } from '../../absolute-container/absolute-container';
+export declare class ColorPaletteComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    palette: ColorPalette;
+    absolute: AbsoluteContainer;
+    colors: string[];
+    settings: PaletteSettings;
+    editMode: boolean;
+    isMobile: boolean;
+    edit: boolean;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'color-palette-component': ColorPaletteComponent;
+    }
+}
+//# sourceMappingURL=color-palette-component.d.ts.map

package/dist/components/color-palette/component/color-palette-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-component.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/color-palette-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,OAAO,EAAmB,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AAEhF,qBACa,qBAAsB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,4BAUX;IAGF,OAAO,EAAG,YAAY,CAAC;IAGvB,QAAQ,EAAG,iBAAiB,CAAC;IAG7B,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,QAAQ,EAAE,eAAe,CAQvB;IAGF,QAAQ,EAAE,OAAO,CAAS;IAG1B,QAAQ,EAAE,OAAO,CAAS;IAG1B,IAAI,EAAE,OAAO,CAAS;IAEtB,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAYhE,MAAM;CAqHN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}

package/dist/components/color-palette/component/color-palette-component.js

@@ -0,0 +1,148 @@
+import { css as $, LitElement as v, html as g } from "lit";
+import { query as u, property as f, state as b, customElement as y } from "lit/decorators.js";
+import { createRef as M, ref as p } from "lit/directives/ref.js";
+import { ColorPalette as P } from "../color-palette.js";
+import { ColorPaletteMenu as m } from "../menu/color-palette-menu.js";
+import { defaultSettings as c } from "../color-palette-utils.js";
+import { ColorPaletteEditor as w } from "../editor/color-palette-editor.js";
+var O = Object.defineProperty, R = Object.getOwnPropertyDescriptor, a = (n, s, i, r) => {
+  for (var l = r > 1 ? void 0 : r ? R(s, i) : s, h = n.length - 1, t; h >= 0; h--)
+    (t = n[h]) && (l = (r ? t(s, i, l) : t(l)) || l);
+  return r && l && O(s, i, l), l;
+};
+let o = class extends v {
+  constructor() {
+    super(...arguments), this.colors = [], this.settings = {
+      height: c.height,
+      width: c.width,
+      direction: c.direction,
+      gradient: c.gradient,
+      preventHover: c.preventHover,
+      override: c.override,
+      aliases: []
+    }, this.editMode = !1, this.isMobile = !1, this.edit = !1;
+  }
+  firstUpdated(n) {
+    super.firstUpdated(n), new ResizeObserver((i) => {
+      for (const r of i)
+        this.isMobile = r.contentRect.width < 1400;
+    }).observe(this);
+  }
+  render() {
+    let n = M(), s, i;
+    const r = (t) => {
+      t instanceof m && (s = t, t.emitter.clear(), t.emitter.on("change", (e) => {
+        e && (this.colors = e);
+      }), t.emitter.on("editMode", (e) => this.editMode = e), t.emitter.on("openEditor", () => {
+        this.absolute.toggle(), i.colors = this.colors, i.settings = this.settings;
+      }));
+    }, l = (t) => {
+      t instanceof P && (t.emitter.clear(), t.emitter.on("changed", (e, d) => {
+        this.colors = e, this.settings = d;
+      }));
+    }, h = (t) => {
+      t instanceof w && (i = t, t.emitter.clear(), t.emitter.on("submit", (e, d) => {
+        this.colors = e, this.settings = d, this.absolute.setOpen(!1);
+      }));
+    };
+    return g`
+			<color-palette
+				.colors=${this.colors}
+				height=${this.settings.height}
+				width=${this.settings.width}
+				direction=${this.settings.direction}
+				?gradient=${this.settings.gradient}
+				?preventHover=${this.settings.preventHover}
+				?override=${this.settings.override}
+				.aliases=${this.settings.aliases}
+				?editMode=${this.editMode}
+				@contextmenu=${(t) => {
+      t.preventDefault();
+      let e = n.value;
+      this.isMobile ? e && e.toggleSheet() : (s.absolute.toggle(), s.absolute.setPosition(t.clientX + 16, t.clientY));
+    }}
+				${p(l)}
+			>
+			</color-palette>
+
+			${this.isMobile ? g`
+					<bottom-sheet
+						.snapPoints=${[0, 50]}
+						${p(n)}
+					>
+						<color-palette-menu
+							.palette=${this}
+							.colors=${this.colors}
+							.settings=${this.settings}
+							?editMode=${this.editMode}
+							@click=${() => {
+      let t = n.value;
+      t && t.toggleSheet();
+    }}
+							${p(r)}
+						>
+						</color-palette-menu>
+					</bottom-sheet>
+				` : g`
+					<color-palette-menu
+						.palette=${this}
+						.colors=${this.colors}
+						.settings=${this.settings}
+						?editMode=${this.editMode}
+						@click=${(t) => {
+      t.target instanceof m && t.target.absolute.toggle();
+    }}
+						${p(r)}
+					>
+					</color-palette-menu>
+				`}
+			
+			<absolute-container>
+				<color-palette-editor
+					.colors=${this.colors}
+					.settings=${this.settings}
+					${p(h)}
+				>
+				</color-palette-editor>
+			</absolute-container>
+		`;
+  }
+};
+o.styles = [
+  $`
+			:host {
+				display: block;
+			}
+
+			absolute-container::part(dialog)::backdrop {
+				background-color: rgba(0, 0, 0, .8);
+			}
+		`
+];
+a([
+  u("color-palette")
+], o.prototype, "palette", 2);
+a([
+  u("absolute-container")
+], o.prototype, "absolute", 2);
+a([
+  f({ type: Array })
+], o.prototype, "colors", 2);
+a([
+  f({ type: Object })
+], o.prototype, "settings", 2);
+a([
+  f({ type: Boolean })
+], o.prototype, "editMode", 2);
+a([
+  b()
+], o.prototype, "isMobile", 2);
+a([
+  b()
+], o.prototype, "edit", 2);
+o = a([
+  y("color-palette-component")
+], o);
+export {
+  o as ColorPaletteComponent
+};

package/dist/components/color-palette/component/color-palette-component.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { PaletteSettings } from '../color-palette-utils';
+declare const meta: Meta;
+export default meta;
+type Props = {
+    colors: string[];
+} & PaletteSettings;
+type Story = StoryObj<Props>;
+export declare const ManyItems: Story;
+export declare const Gradient: Story;
+//# sourceMappingURL=color-palette-component.stories.d.ts.map

package/dist/components/color-palette/component/color-palette-component.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-component.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/color-palette-component.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAa,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEpE,QAAA,MAAM,IAAI,EAAE,IAiBX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,GAAG,eAAe,CAAC;AAEpD,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAgC7B,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAYtB,CAAC"}

package/dist/components/color-palette/component/index.d.ts

@@ -0,0 +1,2 @@
+import './color-palette-component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/color-palette/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/component/index.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

package/dist/components/color-palette/editor/color-palette-editor.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import { PaletteSettings } from '../color-palette-utils';
+import { Combination } from '../../../utils/generateUtils';
+import colorsea from 'colorsea';
+import { EventEmitter } from '../../../utils/EventEmitter';
+declare enum SelectedInput {
+    Color_Picker = "Color Picker",
+    Generate = "Generate",
+    Image = "Image",
+    URL = "URL"
+}
+type EventMap = {
+    submit: [colors: string[], settings: PaletteSettings];
+};
+export declare class ColorPaletteEditor extends LitElement {
+    static styles: import("lit").CSSResult[];
+    palette: HTMLDivElement;
+    colors: string[];
+    settings: PaletteSettings;
+    selectedInput: SelectedInput;
+    combination: Combination;
+    baseColor?: ReturnType<typeof colorsea>;
+    colorPickerDisabled: boolean;
+    emitter: EventEmitter<EventMap>;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    renderSettings(): import("lit-html").TemplateResult<1>;
+    pickerOption(): import("lit-html").TemplateResult<1>;
+    generateOption(): import("lit-html").TemplateResult<1>;
+    imageOption(): import("lit-html").TemplateResult<1>;
+    urlOption(): import("lit-html").TemplateResult<1>;
+}
+export declare class SettingItem extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name: string;
+    description: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'color-palette-editor': ColorPaletteEditor;
+        'setting-item': SettingItem;
+    }
+}
+export {};
+//# sourceMappingURL=color-palette-editor.d.ts.map

package/dist/components/color-palette/editor/color-palette-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette-editor.d.ts","sourceRoot":"","sources":["../../../../src/components/color-palette/editor/color-palette-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAA8B,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAkB,MAAM,8BAA8B,CAAC;AAC3E,OAAO,QAAQ,MAAM,UAAU,CAAC;AAKhC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAI3D,aAAK,aAAa;IACjB,YAAY,iBAAiB;IAC7B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,GAAG,QAAQ;CACX;AAED,KAAK,QAAQ,GAAG;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC;CACtD,CAAC;AAEF,qBACa,kBAAmB,SAAQ,UAAU;IACjD,MAAM,CAAC,MAAM,4BAmJX;IAGF,OAAO,EAAG,cAAc,CAAC;IAGzB,MAAM,EAAE,MAAM,EAAE,CAAM;IAGtB,QAAQ,EAAE,eAAe,CAQvB;IAGF,aAAa,EAAE,aAAa,CAA8B;IAG1D,WAAW,EAAE,WAAW,CAAsB;IAG9C,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;IAGxC,mBAAmB,EAAE,OAAO,CAAS;IAE9B,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAI5B,MAAM;IAiGN,cAAc;IAsFd,YAAY;IAkBZ,cAAc;IAiDd,WAAW;IA0JX,SAAS;CAsCT;AAED,qBACa,WAAY,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BAkCX;IAGF,IAAI,EAAE,MAAM,CAAM;IAGlB,WAAW,EAAE,MAAM,CAAM;IAEzB,MAAM;CASN;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,kBAAkB,CAAC;QAC3C,cAAc,EAAE,WAAW,CAAA;KAC3B;CACD"}