@ixfx/components 0.2.3 → 0.2.4

package/dist/button/split-button.js

@@ -0,0 +1,480 @@
+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 { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { buttonStyles } from './button-styles.js';
+import { ButtonElement } from './button.js';
+import { prominenceStyles } from '../styles/prominence.js';
+import '../menu/menu-trigger.js';
+import '../menu/menu-container.js';
+import '../menu/menu-item.js';
+import '../icons/icon.js';
+let SplitButton = class SplitButton extends ButtonElement {
+    constructor() {
+        super(...arguments);
+        this.mode = `default`;
+        this.defaultValue = ``;
+        this._compact = false;
+        this._selectedCommand = ``;
+        this._selectedLabel = ``;
+        this._selectedIcon = ``;
+        this._switcherItems = [];
+        this._dynamicItems = [];
+        this._loadingItems = false;
+        this._menuHasItems = false;
+        this._widthNeeded = 0;
+        // ── Default-mode slot ──────────────────────────────────────────────────
+        this._onDefaultMenuSlotChange = (e) => {
+            const slot = e.target;
+            this._menuHasItems = slot.assignedElements({ flatten: true }).length > 0;
+        };
+        // ── Switcher helpers ───────────────────────────────────────────────────
+        this._onSwitcherSlotChange = (e) => {
+            // When itemsProvider is set, declarative items are ignored
+            if (this.itemsProvider)
+                return;
+            const slot = e.target;
+            this._applySwitcherItems(slot.assignedElements({ flatten: true })
+                .filter(el => el.tagName === `IXFX-MENU-ITEM`)
+                .map(el => ({
+                command: el.getAttribute(`command`) ?? ``,
+                label: el.getAttribute(`label`) ?? el.textContent?.trim() ?? ``,
+                icon: el.getAttribute(`icon-name`) ?? ``,
+            })));
+        };
+        this._handleSwitcherMenuCommand = (e) => {
+            if (this.mode !== `switcher`)
+                return;
+            e.stopPropagation();
+            const { command } = e.detail;
+            const item = this._switcherItems.find(i => i.command === command);
+            if (!item)
+                return;
+            this._selectedCommand = item.command;
+            this._selectedLabel = item.label;
+            this._selectedIcon = item.icon;
+            // Fire immediately
+            this.dispatchEvent(new CustomEvent(`menu-command`, {
+                detail: e.detail,
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._handleSwitcherPrimaryClick = () => {
+            if (!this._selectedCommand)
+                return;
+            this.dispatchEvent(new CustomEvent(`menu-command`, {
+                detail: { command: this._selectedCommand },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        // ── Caret / menu open ──────────────────────────────────────────────────
+        this._handleCaretClick = async (e) => {
+            e.stopPropagation();
+            if (this._menuTrigger?.isOpen) {
+                this._menuTrigger.closeMenu();
+                return;
+            }
+            if (this.itemsProvider) {
+                this._loadingItems = true;
+                try {
+                    const result = this.itemsProvider();
+                    const items = result instanceof Promise ? await result : result;
+                    if (this.mode === `switcher`) {
+                        this._applySwitcherItems(items.map(i => ({ command: i.command, label: i.label, icon: i.icon ?? `` })));
+                    }
+                    else {
+                        this._dynamicItems = items;
+                    }
+                }
+                finally {
+                    this._loadingItems = false;
+                }
+                // Let Lit render the new items before the popup opens
+                await this.updateComplete;
+            }
+            this._menuTrigger?.openMenu();
+        };
+        this._handlePrimaryKeyDown = (e) => {
+            if (e.key === `ArrowDown`) {
+                e.preventDefault();
+                this._menuTrigger?.openMenu();
+            }
+        };
+        this._handleCaretKeyDown = (e) => {
+            if (e.key === `ArrowDown`) {
+                e.preventDefault();
+                this._menuTrigger?.openMenu();
+            }
+        };
+    }
+    // ── Lifecycle ──────────────────────────────────────────────────────────
+    connectedCallback() {
+        super.connectedCallback();
+        this._resizeObserver = new ResizeObserver(([entry]) => {
+            if (this._compact) {
+                if (this._widthNeeded > 0 && entry.contentRect.width >= this._widthNeeded) {
+                    this._compact = false;
+                }
+            }
+            else {
+                this._checkOverflow();
+            }
+        });
+        this._resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+        this._menuTrigger?.removeEventListener(`menu-command`, this._handleSwitcherMenuCommand);
+    }
+    firstUpdated() {
+        this.updateComplete.then(() => {
+            this._menuTrigger?.addEventListener(`menu-command`, this._handleSwitcherMenuCommand);
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this._checkOverflow();
+        if ((changedProperties.has(`items`) || changedProperties.has(`mode`)) && this.items && !this.itemsProvider) {
+            this._applyItems(this.items);
+        }
+    }
+    // ── Responsive ─────────────────────────────────────────────────────────
+    _checkOverflow() {
+        if (this._compact)
+            return;
+        const primary = this.shadowRoot?.querySelector(`button.primary`);
+        if (!primary)
+            return;
+        if (primary.scrollWidth > primary.offsetWidth + 1) {
+            const caret = this.shadowRoot?.querySelector(`button.caret`);
+            this._widthNeeded = primary.scrollWidth + (caret?.offsetWidth ?? 32) + 4;
+            this._compact = true;
+        }
+    }
+    // ── Programmatic API ───────────────────────────────────────────────────
+    _applyItems(items) {
+        if (this.mode === `switcher`) {
+            this._applySwitcherItems(items.map(i => ({ command: i.command, label: i.label, icon: i.icon ?? `` })));
+        }
+        else {
+            this._dynamicItems = [...items];
+            this._menuHasItems = items.length > 0;
+        }
+    }
+    /** In switcher mode, programmatically select the active command. Returns false if not found. */
+    selectCommand(command) {
+        const item = this._switcherItems.find(i => i.command === command);
+        if (!item)
+            return false;
+        this._selectedCommand = item.command;
+        this._selectedLabel = item.label;
+        this._selectedIcon = item.icon;
+        return true;
+    }
+    // ── Caret state ────────────────────────────────────────────────────────
+    /** True when there is (or will be) popup content. Used to dim the caret visually. */
+    get _caretHasContent() {
+        if (this.itemsProvider)
+            return true;
+        if (this.items && this.items.length > 0)
+            return true;
+        if (this.mode === `switcher`)
+            return this._switcherItems.length > 1;
+        return this._menuHasItems;
+    }
+    _applySwitcherItems(items) {
+        this._switcherItems = items;
+        if (!this._selectedCommand && items.length > 0) {
+            const picked = this.defaultValue
+                ? (items.find(i => i.command === this.defaultValue) ?? items[0])
+                : items[0];
+            this._selectedCommand = picked.command;
+            this._selectedLabel = picked.label;
+            this._selectedIcon = picked.icon;
+        }
+    }
+    // ── Render ─────────────────────────────────────────────────────────────
+    render() {
+        return this.mode === `switcher`
+            ? this._renderSwitcher()
+            : this._renderDefault();
+    }
+    _renderCaret(iconName, ariaLabel) {
+        const empty = !this._caretHasContent;
+        return html `
+      <button
+        slot="trigger"
+        class="caret"
+        part="caret"
+        ?disabled=${this.disabled}
+        ?data-empty=${empty}
+        aria-haspopup="true"
+        aria-label=${ariaLabel}
+        @click=${this._handleCaretClick}
+        @keydown=${this._handleCaretKeyDown}
+      >
+        <ixfx-icon name="${iconName}"></ixfx-icon>
+      </button>
+    `;
+    }
+    _renderLoadingOrItems(items) {
+        if (this._loadingItems) {
+            return html `<ixfx-menu-item label="Loading…" disabled></ixfx-menu-item>`;
+        }
+        return items.map(i => html `
+      <ixfx-menu-item
+        command=${i.command}
+        label=${i.label}
+        icon-name=${i.icon || nothing}
+        ?disabled=${i.disabled ?? false}
+      ></ixfx-menu-item>
+    `);
+    }
+    _renderDefault() {
+        const showLabel = !this.hideLabel && !this._compact;
+        const label = showLabel
+            ? html `<span class="button-label"><slot></slot></span>`
+            : nothing;
+        const menuContent = this.itemsProvider
+            ? html `
+          <ixfx-menu-container slot="menu">
+            ${this._renderLoadingOrItems(this._dynamicItems)}
+          </ixfx-menu-container>
+        `
+            : html `<slot name="menu" slot="menu" @slotchange=${this._onDefaultMenuSlotChange}></slot>`;
+        return html `
+      <div class="split">
+        <button
+          class="primary"
+          part="primary"
+          ?disabled=${this.disabled}
+          @keydown=${this._handlePrimaryKeyDown}
+        >
+          ${this._renderIcon()}${label}
+        </button>
+        <ixfx-menu-trigger .registry=${this.registry} .keyboardManager=${this.keyboardManager}>
+          ${this._renderCaret(`chevron-down`, `Open menu`)}
+          ${menuContent}
+        </ixfx-menu-trigger>
+      </div>
+    `;
+    }
+    _renderSwitcher() {
+        const showLabel = !this.hideLabel && !this._compact;
+        const primaryIcon = this._selectedIcon
+            ? html `<ixfx-icon class="button-icon" name="${this._selectedIcon}"></ixfx-icon>`
+            : nothing;
+        const primaryLabel = showLabel
+            ? html `<span class="button-label">${this._selectedLabel}</span>`
+            : nothing;
+        const popupItems = this.itemsProvider
+            ? this._renderLoadingOrItems(this._dynamicItems)
+            : this._switcherItems
+                .filter(i => i.command !== this._selectedCommand)
+                .map(i => html `
+            <ixfx-menu-item
+              command=${i.command}
+              label=${i.label}
+              icon-name=${i.icon || nothing}
+            ></ixfx-menu-item>
+          `);
+        return html `
+      <!-- Hidden data-capture slot reads light-DOM items as the data source -->
+      <slot name="menu" class="switcher-data" @slotchange=${this._onSwitcherSlotChange}></slot>
+      <div class="split switcher">
+        <button
+          class="primary"
+          part="primary"
+          ?disabled=${this.disabled}
+          @keydown=${this._handlePrimaryKeyDown}
+          @click=${this._handleSwitcherPrimaryClick}
+        >
+          ${primaryIcon}${primaryLabel}
+        </button>
+        <ixfx-menu-trigger .registry=${this.registry} .keyboardManager=${this.keyboardManager}>
+          ${this._renderCaret(`chevron-right`, `Choose action`)}
+          <ixfx-menu-container slot="menu">
+            ${popupItems}
+          </ixfx-menu-container>
+        </ixfx-menu-trigger>
+      </div>
+    `;
+    }
+    // ── Styles ─────────────────────────────────────────────────────────────
+    static { this.styles = [
+        prominenceStyles,
+        buttonStyles,
+        css `
+      :host {
+        display: inline-flex;
+        max-width: 100%;
+        vertical-align: middle;
+      }
+
+      slot.switcher-data {
+        display: none;
+      }
+
+      .split {
+        display: inline-flex;
+        width: 100%;
+        background: var(--surface-3, #ccc);
+        color: var(--surface-3-text, #000);
+        border: var(--border, 1px solid #999);
+        border-radius: var(--radius-xl, 8px);
+        corner-shape: superellipse(1);
+        box-shadow:
+          inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent),
+          inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),
+          2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);
+        overflow: hidden;
+        transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s);
+      }
+
+      /* Switcher: accent the caret separator to signal "this changes the default" */
+      .split.switcher button.caret {
+        border-inline-start-color: var(--accent, #666);
+        opacity: 0.7;
+      }
+
+      .split.switcher button.caret:hover:not(:disabled) {
+        opacity: 1;
+      }
+
+      /* Caret is dimmed when there is no popup content */
+      button.caret[data-empty] {
+        opacity: 0.3;
+        pointer-events: none;
+      }
+
+      .split:has(button:hover:not(:disabled)) {
+        border-color: var(--accent, #666);
+        box-shadow:
+          inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-5) 70%, transparent),
+          inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 60%, transparent),
+          2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 90%, transparent);
+      }
+
+      .split:has(button:active:not(:disabled)) {
+        transform: translateY(1px);
+        box-shadow: inset 1px 1px 0px 0.5px color-mix(in oklch, var(--surface-1), transparent);
+      }
+
+      button.primary,
+      button.caret {
+        border: none;
+        border-radius: 0;
+        background: none;
+        box-shadow: none;
+        color: inherit;
+        margin: 0;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: background var(--transition, 0.2s), opacity var(--transition, 0.2s);
+      }
+
+      button.primary {
+        flex: 1;
+        padding: var(--space-m, 8px) var(--space-l, 12px);
+        gap: 0.5em;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+
+      button.caret {
+        padding: var(--space-m, 8px) var(--space-s, 6px);
+        border-inline-start: var(--border, 1px solid #999);
+        flex-shrink: 0;
+      }
+
+      button.primary:hover:not(:disabled),
+      button.caret:hover:not(:disabled) {
+        background: color-mix(in oklch, var(--surface-4) 80%, transparent);
+      }
+
+      button.primary:active:not(:disabled),
+      button.caret:active:not(:disabled) {
+        background: var(--surface-2, #aaa);
+        transform: none;
+        box-shadow: none;
+      }
+
+      button.primary:disabled,
+      button.caret:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      button.primary:focus-visible,
+      button.caret:focus-visible {
+        outline: 2px solid var(--accent, #666);
+        outline-offset: -2px;
+      }
+
+      ixfx-menu-trigger {
+        display: inline-flex;
+        align-items: stretch;
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property({ attribute: false })
+], SplitButton.prototype, "registry", void 0);
+__decorate([
+    property({ attribute: false })
+], SplitButton.prototype, "keyboardManager", void 0);
+__decorate([
+    property({ type: String })
+], SplitButton.prototype, "mode", void 0);
+__decorate([
+    property({ type: String, attribute: `default-value` })
+], SplitButton.prototype, "defaultValue", void 0);
+__decorate([
+    property({ attribute: false })
+], SplitButton.prototype, "itemsProvider", void 0);
+__decorate([
+    property({ attribute: false })
+], SplitButton.prototype, "items", void 0);
+__decorate([
+    query(`ixfx-menu-trigger`)
+], SplitButton.prototype, "_menuTrigger", void 0);
+__decorate([
+    state()
+], SplitButton.prototype, "_compact", void 0);
+__decorate([
+    state()
+], SplitButton.prototype, "_selectedCommand", void 0);
+__decorate([
+    state()
+], SplitButton.prototype, "_selectedLabel", void 0);
+__decorate([
+    state()
+], SplitButton.prototype, "_selectedIcon", void 0);
+__decorate([
+    state()
+], SplitButton.prototype, "_switcherItems", void 0);
+__decorate([
+    state()
+], SplitButton.prototype, "_dynamicItems", void 0);
+__decorate([
+    state()
+], SplitButton.prototype, "_loadingItems", void 0);
+__decorate([
+    state()
+], SplitButton.prototype, "_menuHasItems", void 0);
+SplitButton = __decorate([
+    customElement(`ixfx-split-button`)
+], SplitButton);
+export { SplitButton };
+//# sourceMappingURL=split-button.js.map

package/dist/button/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","sourceRoot":"","sources":["../../src/button/split-button.ts"],"names":[],"mappings":"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"}

package/dist/button/types.d.ts

@@ -0,0 +1,18 @@
+export type SplitButtonSelectDetail = {
+    readonly value: string;
+    readonly label: string;
+};
+export type SplitButtonSelectEvent = CustomEvent<SplitButtonSelectDetail>;
+export type SwitcherItem = {
+    readonly command: string;
+    readonly label: string;
+    readonly icon: string;
+};
+export type PopupItem = {
+    readonly command: string;
+    readonly label: string;
+    readonly icon?: string;
+    readonly disabled?: boolean;
+};
+export type ItemsProvider = () => PopupItem[] | Promise<PopupItem[]>;
+//# sourceMappingURL=types.d.ts.map

package/dist/button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/button/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;AAE1E,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,MAAM,SAAS,EAAE,GAAG,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC"}

package/dist/button/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/button/types.ts"],"names":[],"mappings":""}

package/dist/checkbox.d.ts

@@ -0,0 +1,64 @@
+/**
+ * <x-checkbox> — Custom checkbox with diagonal line indicator.
+ *
+ * A brutalist checkbox component featuring a thick diagonal line
+ * (top-left to bottom-right) when checked. Uses shadow DOM with
+ * CSS variables for appearance customization.
+ *
+ * Properties
+ *   checked   – checkbox state (default: false)
+ *   disabled  – disabled state (default: false)
+ *   label     – label text
+ *   name      – form field name
+ *   value     – form field value
+ *
+ * Events
+ *   change – CustomEvent { detail: { checked: boolean } }, bubbles + composed
+ *
+ * CSS Variables
+ *   --box-size               – box size (default: 18px)
+ *   --box-border-width       – border width (default: 2px)
+ *   --box-border-color       – border color
+ *   --box-bg-unchecked       – background when unchecked
+ *   --box-bg-checked         – background when checked
+ *   --check-line-color         – diagonal line color
+ *   --check-line-width         – diagonal line thickness (default: 6px)
+ *   --box-opacity-unchecked  – opacity when unchecked (default: 0.5)
+ *   --box-opacity-checked    – opacity when checked (default: 1)
+ *   --box-opacity-hover      – opacity on hover (default: 1)
+ *   --box-opacity-disabled   – opacity when disabled (default: 0.3)
+ *   --box-label-gap          – gap between box and label (default: 8px)
+ *   --label-font-size    – label font size (default: 14px)
+ *   --label-opacity      – label opacity (default: 1)
+ *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)
+ *   --transition-duration – animation duration (default: 0.2s)
+ */
+import { html, LitElement } from 'lit';
+export declare class Checkbox extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    checked: boolean;
+    disabled: boolean;
+    indeterminate: boolean;
+    label: string;
+    name: string;
+    value: string;
+    render(): ReturnType<typeof html>;
+}
+export type CheckboxChangeDetail = {
+    readonly checked: boolean;
+};
+export type CheckboxChangeEvent = CustomEvent<CheckboxChangeDetail>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-checkbox': Checkbox;
+    }
+}
+export interface CheckboxEventMap {
+    'change': CheckboxChangeEvent;
+}
+export interface Checkbox {
+    addEventListener<K extends keyof CheckboxEventMap>(type: K, listener: (this: Checkbox, event: CheckboxEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+}
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../src/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,QAAS,SAAQ,UAAU;;IACtC,MAAM,CAAC,MAAM,0BA+JX;IAE2B,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,aAAa,UAAS;IACvB,KAAK,SAAM;IACX,IAAI,SAAM;IACV,KAAK,SAAM;IAa9B,MAAM,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC;CAkB3C;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;AAEpE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,QAAQ,CAAC;KAC3B;CACF;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,CAAC,CAAC,SAAS,MAAM,gBAAgB,EAC/C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC9D,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;CACT"}