@moni-labs/moni-ui 0.2.0

package/dist/components/moni-switch.js

@@ -0,0 +1,258 @@
+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, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Switch styled per Material Design 3 specs.
+ *
+ * M3 measurements (`m3-docs/components/switch/specs.md`):
+ *  - Track: 52dp × 32dp, 2dp outline, full corner radius
+ *  - Handle (thumb): 16dp unselected, 24dp selected, 28dp pressed
+ *  - State layer: 40dp circular ripple on hover/focus/pressed
+ *  - Icon (optional): 16dp on selected and/or unselected handle
+ *
+ * Attributes:
+ *  - label:    text label (displayed to the right of the switch)
+ *  - checked:  present
+ *  - disabled: present
+ *  - icon:     present → renders check/close icons inside the thumb
+ *  - name:     forwarded to input.name
+ *  - value:    forwarded to input.value
+ */
+let MoniSwitch = class MoniSwitch extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.checked = false;
+        this.disabled = false;
+        this.icon = false;
+        this.name = '';
+        this.value = '';
+    }
+    updated(changed) {
+        if (this._input) {
+            if (changed.has('checked'))
+                this._input.checked = this.checked;
+            if (changed.has('disabled'))
+                this._input.disabled = this.disabled;
+        }
+    }
+    _onChange(e) {
+        this.checked = e.target.checked;
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: inline-flex;
+				font-family: var(--font);
+			}
+
+			.switch {
+				--_thumb: 1rem; /* 16dp unselected (M3) */
+				--_track-w: 3.25rem; /* 52dp */
+				--_track-h: 2rem; /* 32dp */
+				inline-size: auto;
+				block-size: auto;
+				line-height: normal;
+				white-space: nowrap;
+				cursor: pointer;
+				display: inline-flex;
+				align-items: center;
+				direction: ltr;
+			}
+
+			/* Input hit area: 52dp × 32dp track */
+			.switch > input {
+				inline-size: var(--_track-w);
+				block-size: var(--_track-h);
+				opacity: 0;
+				cursor: pointer;
+				flex: none;
+			}
+
+			/* Text label span */
+			.switch > span {
+				display: inline-flex;
+				align-items: center;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				position: relative;
+			}
+
+			/* Track */
+			.switch > span::after {
+				content: "";
+				position: absolute;
+				inset: 50% auto auto 0;
+				background-color: var(--surface-container-highest);
+				border: 0.125rem solid var(--outline);
+				box-sizing: border-box;
+				inline-size: var(--_track-w);
+				block-size: var(--_track-h);
+				border-radius: var(--_track-h);
+				/* Shift the track to sit behind the input (input is to the left) */
+				transform: translate(calc(-1 * var(--_track-w)), -50%);
+				pointer-events: none;
+				transition: background-color var(--speed2), border-color var(--speed2);
+			}
+
+			/* Thumb (handle) */
+			.switch > span::before,
+			.switch.icon > span > i {
+				position: absolute;
+				inset: 50% auto auto 0;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 50%;
+				transition: all var(--speed2);
+				font-size: calc(var(--_thumb) - 0.25rem);
+				user-select: none;
+				min-inline-size: var(--_thumb);
+				min-block-size: var(--_thumb);
+				content: "";
+				color: var(--on-surface-variant);
+				background-color: var(--outline);
+				/* Unchecked: 16dp thumb sits 2dp from track start */
+				transform: translate(calc(-1 * var(--_track-w) + 0.25rem), -50%);
+				z-index: 2;
+				pointer-events: none;
+			}
+
+			/* Icon mode uses a 24dp thumb at rest */
+			.switch.icon > span > i {
+				--_thumb: 1.5rem;
+				transform: translate(calc(-1 * var(--_track-w) + 0.25rem), -50%);
+				font-family: var(--font-icon);
+			}
+
+			/* 40dp circular state layer behind the thumb on hover/focus */
+			.switch > span::before,
+			.switch.icon > span > i {
+				box-shadow: 0 0 0 0 transparent;
+			}
+			.switch > input:not(:disabled):is(:focus, :hover) + span::before,
+			.switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
+				box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--on-surface) 8%, transparent);
+			}
+			.switch > input:not(:disabled):is(:focus, :hover):checked + span::before,
+			.switch.icon > input:not(:disabled):is(:focus, :hover):checked + span > i {
+				box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--primary) 12%, transparent);
+			}
+
+			/* Checked: track fills with primary */
+			.switch > input:checked + span::after {
+				border: none;
+				background-color: var(--primary);
+			}
+
+			/* Checked: thumb grows to 24dp and slides right */
+			.switch > input:checked + span::before {
+				--_thumb: 1.5rem;
+				content: "";
+				color: var(--primary);
+				background-color: var(--on-primary);
+				transform: translate(calc(-1.75rem), -50%);
+			}
+
+			/* Checked icon mode: show check icon */
+			.switch.icon > input:checked + span > i {
+				content: "check";
+				color: var(--primary);
+				background-color: var(--on-primary);
+				transform: translate(-1.75rem, -50%);
+				font-family: var(--font-icon);
+			}
+
+			/* Active (pressed) states: 28dp thumb */
+			.switch > input:active:not(:disabled) + span::before,
+			.switch.icon > input:active:not(:disabled) + span > i {
+				--_thumb: 1.75rem;
+				transform: translate(calc(-1 * var(--_track-w) + 0.25rem), -50%);
+			}
+
+			.switch > input:active:checked:not(:disabled) + span::before,
+			.switch.icon > input:active:checked:not(:disabled) + span > i {
+				--_thumb: 1.75rem;
+				transform: translate(-1.625rem, -50%);
+			}
+
+			/* Icon mode: toggle visibility of close/check icons */
+			.icon > input:checked + span > i:first-child,
+			.icon > span > i:last-child {
+				opacity: 0;
+			}
+
+			.icon > input:checked + span > i:last-child,
+			.icon > span > i:first-child {
+				opacity: 1;
+			}
+
+			/* Disabled */
+			.switch > input:disabled + span {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
+			/* Focus outline on the track */
+			.switch > :focus-visible + span::after {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.25rem;
+			}
+		`
+    ]; }
+    render() {
+        return html `<label class=${this.icon ? 'switch icon' : 'switch'} part="switch">
+			<input
+				type="checkbox"
+				role="switch"
+				.checked=${this.checked}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name || undefined)}
+				value=${ifDefined(this.value || undefined)}
+				@change=${this._onChange}
+			/>
+			<span>
+				${this.icon ? html `<i>close</i><i>check</i>` : ''}
+				${this.label
+            ? html `<span class="label" part="label">&nbsp;${this.label}</span>`
+            : html `<slot></slot>`}
+			</span>
+		</label>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniSwitch.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSwitch.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSwitch.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniSwitch.prototype, "value", void 0);
+__decorate([
+    query('input')
+], MoniSwitch.prototype, "_input", void 0);
+MoniSwitch = __decorate([
+    customElement('moni-switch')
+], MoniSwitch);
+export { MoniSwitch };
+export default MoniSwitch;

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

@@ -0,0 +1,27 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+/**
+ * Visual-only tab. Renders an `<a>` styled with the BeerCSS `.tabs > a`
+ * helper.
+ *
+ * Attributes:
+ *  - active: present → active style
+ *  - icon:   Material Symbols name
+ *  - label:  tab text
+ *  - href:   link target
+ */
+export declare class MoniTab extends MoniElement {
+    active: boolean;
+    icon: string;
+    label: string;
+    href: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-tab': MoniTab;
+    }
+}
+export default MoniTab;
+//# sourceMappingURL=moni-tab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-tab.d.ts","sourceRoot":"","sources":["../../src/components/moni-tab.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;GASG;AACH,qBACa,OAAQ,SAAQ,WAAW;IACK,MAAM,UAAS;IAC9B,IAAI,SAAM;IACV,KAAK,SAAM;IACX,IAAI,SAAO;IAExC,OAAgB,MAAM,4BAuFpB;IAEO,MAAM;CAaf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD;AAED,eAAe,OAAO,CAAC"}

package/dist/components/moni-tab.js

@@ -0,0 +1,147 @@
+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';
+import './moni-icon.js';
+/**
+ * Visual-only tab. Renders an `<a>` styled with the BeerCSS `.tabs > a`
+ * helper.
+ *
+ * Attributes:
+ *  - active: present → active style
+ *  - icon:   Material Symbols name
+ *  - label:  tab text
+ *  - href:   link target
+ */
+let MoniTab = class MoniTab extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+        this.icon = '';
+        this.label = '';
+        this.href = '#';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: inline-flex;
+				font-family: var(--font);
+			}
+
+			:host-context(moni-tabs[vertical]) {
+				display: flex;
+				inline-size: 100%;
+			}
+
+			a {
+				position: relative;
+				display: flex;
+				font-size: 0.875rem;
+				font-weight: 500;
+				color: var(--on-surface-variant);
+				padding: 0.5rem 1rem;
+				text-align: center;
+				min-block-size: 3rem;
+				inline-size: 100%;
+				gap: 0.25rem;
+				text-decoration: none;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+				transition: color var(--speed2);
+			}
+
+			:host-context(moni-tabs[vertical]) a {
+				flex-direction: column;
+				gap: 0.25rem;
+				min-block-size: 4.5rem;
+				border-inline-end: 0.125rem solid transparent;
+				border-block-end: none;
+			}
+
+			a:hover {
+				color: var(--primary);
+			}
+
+			a.active,
+			a.active > * {
+				color: var(--primary);
+			}
+
+			a.active::before {
+				content: '';
+				position: absolute;
+				inset: auto 0 0 0;
+				/* M3 Expressive: indicator thickness 3dp. */
+				block-size: 0.1875rem;
+				/* M3 Expressive default: full tab width. */
+				border-radius: 0.75rem;
+				background-color: var(--primary);
+			}
+
+			:host-context(moni-tabs[vertical]) a.active::before {
+				inset: 0 0 0 auto;
+				inline-size: 0.1875rem;
+				block-size: auto;
+			}
+
+			/* M3 indicator-size='min': 24dp tall (centered on tab) with
+			   8dp top/bottom radius — matches M3 spec § Indicator anatomy. */
+			:host-context(moni-tabs[indicator-size='min']) a.active::before {
+				margin: 0 auto;
+				max-inline-size: min(100%, 4rem);
+				block-size: 1.5rem;
+				border-radius: 0.5rem;
+			}
+
+			:host-context(moni-tabs[vertical][indicator-size='min'])
+				a.active::before {
+				margin: auto 0;
+				max-block-size: 4rem;
+				max-inline-size: 0.1875rem;
+				border-radius: 0.5rem;
+			}
+
+			/* M3 indicator-size='max': full tab height, no rounding. */
+			:host-context(moni-tabs[indicator-size='max']) a.active::before {
+				border-radius: 0;
+			}
+		`
+    ]; }
+    render() {
+        return html `<a
+			href=${this.href || '#'}
+			class=${this.active ? 'active' : ''}
+			part="tab"
+			aria-selected=${this.active}
+		>
+			${this.icon
+            ? html `<moni-icon name="${this.icon}" part="icon"></moni-icon>`
+            : html `<slot name="icon"></slot>`}
+			<span part="label"><slot>${this.label}</slot></span>
+		</a>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTab.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTab.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTab.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTab.prototype, "href", void 0);
+MoniTab = __decorate([
+    customElement('moni-tab')
+], MoniTab);
+export { MoniTab };
+export default MoniTab;

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

@@ -0,0 +1,31 @@
+import { MoniElement } from './_base/index.js';
+/**
+ * Visual-only tab bar. Renders a `<nav>` styled with the BeerCSS `.tabs`
+ * helper.
+ *
+ * Attributes:
+ *  - mode:      primary (default) | secondary
+ *  - scrollable: present → overflow-x: auto
+ *  - align:     default (space-around) | left | center | right
+ *  - indicator: default (full) | min | max
+ *  - vertical:  present → icon above label
+ *
+ * Slots:
+ *  - default: <moni-tab> children
+ */
+export declare class MoniTabs extends MoniElement {
+    mode: 'primary' | 'secondary';
+    scrollable: boolean;
+    vertical: boolean;
+    align: 'default' | 'left' | 'center' | 'right';
+    indicatorSize: 'default' | 'min' | 'max';
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-tabs': MoniTabs;
+    }
+}
+export default MoniTabs;
+//# sourceMappingURL=moni-tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"moni-tabs.d.ts","sourceRoot":"","sources":["../../src/components/moni-tabs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;GAaG;AACH,qBACa,QAAS,SAAQ,WAAW;IAExC,IAAI,EAAE,SAAS,GAAG,WAAW,CAAa;IACE,UAAU,UAAS;IACnB,QAAQ,UAAS;IAE7D,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAa;IAE3D,aAAa,EAAE,SAAS,GAAG,KAAK,GAAG,KAAK,CAAa;IAErD,OAAgB,MAAM,4BAsCpB;IAEO,MAAM;CAcf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-tabs.js

@@ -0,0 +1,106 @@
+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 tab bar. Renders a `<nav>` styled with the BeerCSS `.tabs`
+ * helper.
+ *
+ * Attributes:
+ *  - mode:      primary (default) | secondary
+ *  - scrollable: present → overflow-x: auto
+ *  - align:     default (space-around) | left | center | right
+ *  - indicator: default (full) | min | max
+ *  - vertical:  present → icon above label
+ *
+ * Slots:
+ *  - default: <moni-tab> children
+ */
+let MoniTabs = class MoniTabs extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.mode = 'primary';
+        this.scrollable = false;
+        this.vertical = false;
+        this.align = 'default';
+        this.indicatorSize = 'default';
+    }
+    static { this.styles = [
+        sharedStyles,
+        css `
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			nav {
+				display: flex;
+				white-space: nowrap;
+				border-block-end: 0.0625rem solid var(--surface-variant);
+				border-radius: 0;
+				overflow-x: auto;
+			}
+
+			nav.left-align {
+				justify-content: flex-start;
+			}
+			nav.center-align {
+				justify-content: center;
+			}
+			nav.right-align {
+				justify-content: flex-end;
+			}
+			:host(:not([align])) nav,
+			nav:not(.left-align):not(.center-align):not(.right-align) {
+				justify-content: space-around;
+			}
+
+			:host([vertical]) nav {
+				flex-direction: column;
+				border-block-end: none;
+				border-inline-end: 0.0625rem solid var(--surface-variant);
+				overflow-x: visible;
+				overflow-y: auto;
+			}
+		`
+    ]; }
+    render() {
+        const classes = [
+            'tabs',
+            this.align === 'default' ? '' : `${this.align}-align`,
+            this.indicatorSize === 'default' ? '' : this.indicatorSize,
+            this.mode,
+            this.vertical ? 'vertical' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return html `<nav class=${classes} part="tabs">
+			<slot></slot>
+		</nav>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MoniTabs.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTabs.prototype, "scrollable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTabs.prototype, "vertical", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTabs.prototype, "align", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'indicator-size' })
+], MoniTabs.prototype, "indicatorSize", void 0);
+MoniTabs = __decorate([
+    customElement('moni-tabs')
+], MoniTabs);
+export { MoniTabs };
+export default MoniTabs;

package/dist/components/moni-text-field.d.ts

@@ -0,0 +1,46 @@
+import { MoniElement } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+/**
+ * Visual-only text field. Renders the `.field` family of BeerCSS helpers
+ * with a native `<input>`.
+ *
+ * This component is **visual-only**: it does NOT listen to `@input` to
+ * sync the `value` attribute back from the underlying input. Consumers
+ * either use form submission or wire their own change handling.
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, type, icon, trailing-icon,
+ *    prefix, suffix, helper, error, error-text, disabled, placeholder — see below.
+ *  - loading:   present → shows indeterminate circular progress
+ */
+export declare class MoniTextField extends MoniElement {
+    name: string;
+    label: string;
+    variant: 'filled' | 'outlined';
+    size: 'small' | 'medium' | 'large' | 'extra';
+    shape: 'round' | 'square' | 'no-round';
+    type: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+    icon: string;
+    trailingIcon: string;
+    prefix: string;
+    suffix: string;
+    helper: string;
+    errorText: string;
+    error: boolean;
+    loading: boolean;
+    disabled: boolean;
+    value: string;
+    placeholder: string;
+    private _input;
+    updated(changed: Map<string, unknown>): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'moni-text-field': MoniTextField;
+    }
+}
+export default MoniTextField;
+//# sourceMappingURL=moni-text-field.d.ts.map

package/dist/components/moni-text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moni-text-field.d.ts","sourceRoot":"","sources":["../../src/components/moni-text-field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;GAYG;AACH,qBACa,aAAc,SAAQ,WAAW;IAChB,IAAI,SAAM;IACV,KAAK,SAAM;IACX,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvE,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAc;IAEpD,IAAI,EACD,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAU;IACQ,IAAI,SAAM;IACkB,YAAY,SAAM;IAC9C,MAAM,SAAM;IACZ,MAAM,SAAM;IACZ,MAAM,SAAM;IACa,SAAS,SAAM;IACzB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,QAAQ,UAAS;IAChC,KAAK,SAAM;IACX,WAAW,SAAM;IAE9B,OAAO,CAAC,MAAM,CAAoB;IAEzC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAgB,MAAM,4BAA+B;IAE5C,MAAM;CA8Ef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD;AAED,eAAe,aAAa,CAAC"}