@moni-labs/moni-ui 0.2.0

package/dist/components/moni-file-field.js

@@ -0,0 +1,189 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Visual-only file field. Renders a hidden `<input type="file">` over a
+ * read-only text input that shows the chosen file names.
+ *
+ * The DOM order is `input[type=text], label, input[type=file], output` so
+ * that the floating label CSS selector `input + label` lifts correctly even
+ * though the visible field is the read-only text input.
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, disabled, helper, error,
+ *    error-text, placeholder — see moni-text-field.
+ *  - accept:  forwarded to input.accept
+ *  - multiple: present → input.multiple
+ *  - button-label: text on the picker button (visual only, default: "Choose file")
+ *  - icon:           leading Material Symbols name
+ *  - trailing-icon:  trailing Material Symbols name
+ */
+let MoniFileField = class MoniFileField extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.label = '';
+        this.variant = 'outlined';
+        this.size = 'medium';
+        this.shape = 'no-round';
+        this.accept = '';
+        this.multiple = false;
+        this.buttonLabel = 'Choose file';
+        this.disabled = false;
+        this.helper = '';
+        this.errorText = '';
+        this.error = false;
+        this.value = '';
+        this.icon = '';
+        this.trailingIcon = 'folder_open';
+    }
+    updated(changed) {
+        if (this._fileInput) {
+            if (changed.has('disabled'))
+                this._fileInput.disabled = this.disabled;
+        }
+    }
+    static { this.styles = [
+        sharedStyles,
+        fieldStyles,
+        css `
+			input[type='file'] {
+				position: absolute;
+				inset: 0;
+				opacity: 0;
+				z-index: 2;
+				cursor: pointer;
+			}
+			input[type='text'] {
+				cursor: pointer;
+			}
+		`
+    ]; }
+    render() {
+        const isActive = Boolean(this.value);
+        const hasLeading = Boolean(this.icon);
+        const hasTrailing = Boolean(this.trailingIcon);
+        const fieldClasses = {
+            field: true,
+            label: Boolean(this.label),
+            fill: this.variant === 'filled',
+            border: this.variant === 'outlined',
+            small: this.size === 'small',
+            large: this.size === 'large',
+            extra: this.size === 'extra',
+            prefix: hasLeading,
+            suffix: hasTrailing,
+            invalid: this.error,
+            round: this.shape === 'round',
+            square: this.shape === 'no-round'
+        };
+        const leading = this.icon
+            ? html `<i class="leading-icon" part="leading-icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></i>`
+            : nothing;
+        const trailing = this.trailingIcon
+            ? html `<i class="trailing-icon" part="trailing-icon"
+					><moni-icon name="${this.trailingIcon}"></moni-icon
+				></i>`
+            : nothing;
+        return html `<div class=${classMap(fieldClasses)} part="field">
+			${leading}
+			<input
+				type="text"
+				part="display"
+				readonly
+				placeholder=${this.buttonLabel}
+				.value=${this.value}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name ? `${this.name}-display` : undefined)}
+				class=${isActive ? 'active' : ''}
+			/>
+			${this.label
+            ? html `<label
+						part="label"
+						class=${classMap({ active: isActive })}
+						>${this.label}</label
+					>`
+            : nothing}
+			<input
+				type="file"
+				part="file"
+				?disabled=${this.disabled}
+				accept=${ifDefined(this.accept || undefined)}
+				?multiple=${this.multiple}
+				name=${ifDefined(this.name || undefined)}
+			/>
+			${trailing}
+			${this.error
+            ? html `<output part="helper" class="invalid"
+						>${this.errorText || this.helper}</output
+					>`
+            : this.helper
+                ? html `<output part="helper">${this.helper}</output>`
+                : nothing}
+		</div>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniFileField.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniFileField.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniFileField.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniFileField.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniFileField.prototype, "shape", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniFileField.prototype, "accept", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniFileField.prototype, "multiple", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'button-label' })
+], MoniFileField.prototype, "buttonLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniFileField.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniFileField.prototype, "helper", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'error-text' })
+], MoniFileField.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniFileField.prototype, "error", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniFileField.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniFileField.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'trailing-icon' })
+], MoniFileField.prototype, "trailingIcon", void 0);
+__decorate([
+    query('input[type="file"]')
+], MoniFileField.prototype, "_fileInput", void 0);
+MoniFileField = __decorate([
+    customElement('moni-file-field')
+], MoniFileField);
+export { MoniFileField };
+export default MoniFileField;

package/dist/components/moni-icon.d.ts

@@ -0,0 +1,30 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only icon.
+ *
+ * Renders a Material Symbols glyph by name. The font must be loaded
+ * globally in the host document (see `@moni-labs/moni-ui/styles`).
+ *
+ * Attributes:
+ *  - name:   icon name from https://fonts.google.com/icons
+ *  - size:   tiny | small | medium (default) | large | extra
+ *  - filled: present → switches to the filled variant (font-variation-settings)
+ *
+ * Slots:
+ *  - default: fallback text if no name is given
+ *  - (also accepts slotted <svg> or <img> as override)
+ */
+export declare class MoniIcon extends MoniElement {
+    name: string;
+    size: 'tiny' | 'small' | 'medium' | 'large' | 'extra';
+    filled: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-icon': MoniIcon;
+    }
+}
+export default MoniIcon;
+//# sourceMappingURL=moni-icon.d.ts.map

package/dist/components/moni-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-icon.d.ts","sourceRoot":"","sources":["../../src/components/moni-icon.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;GAcG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,IAAI,SAAM;IAEvC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IACrB,MAAM,UAAS;IAE3D,OAAgB,MAAM,4BAyDpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-icon.js

@@ -0,0 +1,107 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+/**
+ * Visual-only icon.
+ *
+ * Renders a Material Symbols glyph by name. The font must be loaded
+ * globally in the host document (see `@moni-labs/moni-ui/styles`).
+ *
+ * Attributes:
+ *  - name:   icon name from https://fonts.google.com/icons
+ *  - size:   tiny | small | medium (default) | large | extra
+ *  - filled: present → switches to the filled variant (font-variation-settings)
+ *
+ * Slots:
+ *  - default: fallback text if no name is given
+ *  - (also accepts slotted <svg> or <img> as override)
+ */
+let MoniIcon = class MoniIcon extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.size = 'medium';
+        this.filled = false;
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				--_size: 1.5rem;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				vertical-align: middle;
+				font-family: var(--font-icon);
+				font-weight: normal;
+				font-style: normal;
+				font-size: var(--_size);
+				letter-spacing: normal;
+				text-transform: none;
+				white-space: nowrap;
+				word-wrap: normal;
+				direction: ltr;
+				font-feature-settings: 'liga';
+				font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+				-webkit-font-smoothing: antialiased;
+				line-height: 1;
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				/* Explicit inherit so the icon glyph picks up color from
+				   whatever consumer wraps it (button variants, chip selected
+				   state, list-item active, etc.). */
+				color: inherit;
+			}
+
+			:host([size='tiny']) {
+				--_size: 1rem;
+			}
+			:host([size='small']) {
+				--_size: 1.25rem;
+			}
+			:host([size='medium']) {
+				--_size: 1.5rem;
+			}
+			:host([size='large']) {
+				--_size: 1.75rem;
+			}
+			:host([size='extra']) {
+				--_size: 2rem;
+			}
+
+			:host([filled]) {
+				font-variation-settings: 'FILL' 1;
+			}
+
+			::slotted(svg),
+			::slotted(img) {
+				inline-size: 100%;
+				block-size: 100%;
+				object-fit: contain;
+			}
+		`
+    ]; }
+    render() {
+        return html `<slot>${this.name}</slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniIcon.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniIcon.prototype, "filled", void 0);
+MoniIcon = __decorate([
+    customElement('moni-icon')
+], MoniIcon);
+export { MoniIcon };
+export default MoniIcon;

package/dist/components/moni-list-item.d.ts

@@ -0,0 +1,51 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Material 3 List Item (`m3-docs/components/lists/specs.md`).
+ *
+ * One row in a `<moni-list>`. Supports up to 3 lines of text:
+ *  - line 1: headline (required).
+ *  - line 2: supporting text (optional).
+ *  - line 3: trailing meta text (optional).
+ *
+ * Plus optional leading/trailing icons or avatars.
+ *
+ * M3 measurements:
+ *  - Min height: 56dp (1-line), 72dp (2-line), 88dp (3-line).
+ *  - Horizontal padding: 16dp.
+ *  - Vertical padding: 8dp top/bottom (so 1-line is 56dp tall).
+ *  - Leading icon/avatar size: 24dp.
+ *
+ * Attributes:
+ *  - lines: 1 (default) | 2 | 3
+ *  - icon:   Material Symbols name (leading icon)
+ *  - avatar: URL for a leading image
+ *  - trailing-icon: Material Symbols name (trailing icon)
+ *  - active:   present → background uses secondary-container
+ *  - disabled: present → opacity 38%, cursor not-allowed
+ *  - href:     present → renders as <a>; otherwise <button>
+ *
+ * Slots:
+ *  - default:   headline (line 1)
+ *  - supporting:line 2 text
+ *  - meta:      line 3 text
+ *  - trailing-meta: trailing small text (right side)
+ */
+export declare class MoniListItem extends MoniElement {
+    lines: 1 | 2 | 3;
+    icon: string;
+    avatar: string;
+    trailingIcon: string;
+    active: boolean;
+    disabled: boolean;
+    href: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-list-item': MoniListItem;
+    }
+}
+export default MoniListItem;
+//# sourceMappingURL=moni-list-item.d.ts.map

package/dist/components/moni-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-list-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-list-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,YAAa,SAAQ,WAAW;IAE5C,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IACQ,IAAI,SAAM;IACV,MAAM,SAAM;IAEzC,YAAY,SAAM;IAC0B,MAAM,UAAS;IACf,QAAQ,UAAS;IAChC,IAAI,SAAM;IAEvC,OAAgB,MAAM,4BAoHpB;IAEO,MAAM;CA+Cf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD;AAED,eAAe,YAAY,CAAC"}

package/dist/components/moni-list-item.js

@@ -0,0 +1,239 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Material 3 List Item (`m3-docs/components/lists/specs.md`).
+ *
+ * One row in a `<moni-list>`. Supports up to 3 lines of text:
+ *  - line 1: headline (required).
+ *  - line 2: supporting text (optional).
+ *  - line 3: trailing meta text (optional).
+ *
+ * Plus optional leading/trailing icons or avatars.
+ *
+ * M3 measurements:
+ *  - Min height: 56dp (1-line), 72dp (2-line), 88dp (3-line).
+ *  - Horizontal padding: 16dp.
+ *  - Vertical padding: 8dp top/bottom (so 1-line is 56dp tall).
+ *  - Leading icon/avatar size: 24dp.
+ *
+ * Attributes:
+ *  - lines: 1 (default) | 2 | 3
+ *  - icon:   Material Symbols name (leading icon)
+ *  - avatar: URL for a leading image
+ *  - trailing-icon: Material Symbols name (trailing icon)
+ *  - active:   present → background uses secondary-container
+ *  - disabled: present → opacity 38%, cursor not-allowed
+ *  - href:     present → renders as <a>; otherwise <button>
+ *
+ * Slots:
+ *  - default:   headline (line 1)
+ *  - supporting:line 2 text
+ *  - meta:      line 3 text
+ *  - trailing-meta: trailing small text (right side)
+ */
+let MoniListItem = class MoniListItem extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.lines = 1;
+        this.icon = '';
+        this.avatar = '';
+        this.trailingIcon = '';
+        this.active = false;
+        this.disabled = false;
+        this.href = '';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: flex;
+				align-items: center;
+				gap: 1rem;
+				padding: 0.5rem 1rem;
+				min-block-size: 3.5rem;
+				color: var(--on-surface);
+				background-color: transparent;
+				text-decoration: none;
+				cursor: pointer;
+				position: relative;
+				font-family: var(--font);
+				transition: background-color var(--speed2);
+			}
+
+			:host([active]) {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+
+			:host([disabled]) {
+				opacity: 0.38;
+				pointer-events: none;
+				cursor: not-allowed;
+			}
+
+			:host(:not(:last-child)) {
+				border-block-end: 0.0625rem solid var(--outline-variant);
+			}
+
+			:host([lines='2']) {
+				min-block-size: 4.5rem;
+			}
+			:host([lines='3']) {
+				min-block-size: 5.5rem;
+			}
+
+			.leading,
+			.trailing {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				flex: none;
+			}
+
+			.leading-icon {
+				font-size: 1.5rem;
+				color: var(--on-surface-variant);
+			}
+			:host([active]) .leading-icon {
+				color: var(--on-secondary-container);
+			}
+
+			.avatar {
+				inline-size: 2.5rem;
+				block-size: 2.5rem;
+				border-radius: 50%;
+				background-color: var(--surface-container);
+				background-size: cover;
+				background-position: center;
+			}
+
+			.text {
+				flex: auto;
+				min-inline-size: 0;
+				display: flex;
+				flex-direction: column;
+				gap: 0.125rem;
+			}
+
+			.headline {
+				font-size: 1rem;
+				line-height: 1.5rem;
+				font-weight: 500;
+				color: inherit;
+				margin: 0;
+				padding: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.supporting,
+			.meta {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 400;
+				color: var(--on-surface-variant);
+				margin: 0;
+				padding: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			:host([active]) .supporting,
+			:host([active]) .meta {
+				color: var(--on-secondary-container);
+			}
+
+			.trailing-meta {
+				font-size: 0.75rem;
+				color: var(--on-surface-variant);
+				white-space: nowrap;
+			}
+
+			.trailing-icon {
+				font-size: 1.5rem;
+				color: var(--on-surface-variant);
+			}
+			:host([active]) .trailing-icon {
+				color: var(--on-secondary-container);
+			}
+		`
+    ]; }
+    render() {
+        const leading = this.avatar
+            ? html `<span
+					class="avatar"
+					part="avatar"
+					style="background-image: url('${this.avatar}');"
+				></span>`
+            : this.icon
+                ? html `<span class="leading leading-icon" part="leading">
+						<moni-icon name="${this.icon}"></moni-icon>
+					</span>`
+                : html `<slot name="leading"></slot>`;
+        const trailing = this.trailingIcon
+            ? html `<span class="trailing trailing-icon" part="trailing">
+					<moni-icon name="${this.trailingIcon}"></moni-icon>
+				</span>`
+            : html `<slot name="trailing"></slot>`;
+        const supporting = this.lines >= 2
+            ? html `<span class="supporting" part="supporting"
+					><slot name="supporting"></slot
+				></span>`
+            : nothing;
+        const meta = this.lines >= 3
+            ? html `<span class="meta" part="meta"><slot name="meta"></slot></span>`
+            : nothing;
+        const inner = html `
+			${leading}
+			<div class="text" part="text">
+				<span class="headline" part="headline"><slot></slot></span>
+				${supporting} ${meta}
+			</div>
+			${trailing}
+			<slot name="trailing-meta"></slot>
+		`;
+        return this.href
+            ? html `<a
+					class="row"
+					part="row"
+					href=${this.href}
+					>${inner}</a
+				>`
+            : inner;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniListItem.prototype, "lines", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniListItem.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniListItem.prototype, "avatar", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'trailing-icon' })
+], MoniListItem.prototype, "trailingIcon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniListItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniListItem.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniListItem.prototype, "href", void 0);
+MoniListItem = __decorate([
+    customElement('moni-list-item')
+], MoniListItem);
+export { MoniListItem };
+export default MoniListItem;

package/dist/components/moni-list.d.ts

@@ -0,0 +1,32 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Material 3 List (`m3-docs/components/lists/specs.md`).
+ *
+ * A list is a continuous vertical index of text and images. The
+ * container itself is purely structural (no padding); spacing and
+ * dividers are controlled by `<moni-list-item>` children.
+ *
+ * Two visual variants:
+ *  - **default**: 8dp top/bottom padding between items (handled by items).
+ *  - **border**:  dividers drawn between items.
+ *
+ * Attributes:
+ *  - variant: '' (default) | border
+ *  - rounded: when set, items use a 4dp corner radius.
+ *
+ * Slots:
+ *  - default: <moni-list-item> children.
+ */
+export declare class MoniList extends MoniElement {
+    variant: '' | 'border';
+    rounded: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-list': MoniList;
+    }
+}
+export default MoniList;
+//# sourceMappingURL=moni-list.d.ts.map

package/dist/components/moni-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-list.d.ts","sourceRoot":"","sources":["../../src/components/moni-list.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,OAAO,EAAE,EAAE,GAAG,QAAQ,CAAM;IACb,OAAO,UAAS;IAE5D,OAAgB,MAAM,4BAkBpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}