@neptune.fintech/web-ui 2.1.0 → 2.3.0

package/dist/components/shell-layout.js

@@ -0,0 +1,582 @@
+// © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
+// Neptune Odyssey — application shell & layout
+// <npt-app-shell>, <npt-page-header>, <npt-section>, <npt-side-nav>,
+// <npt-side-nav-item>, <npt-search-field>, <npt-toolbar>.
+// Custom-property driven only; logical layout → mirrors in RTL.
+import { NptElement, css, html, A11Y } from "./base.js";
+const esc = (v) => (v ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+/**
+ * <npt-app-shell [rail]>
+ *   <header slot="header">…</header>
+ *   <npt-side-nav slot="nav">…</npt-side-nav>
+ *   …content…
+ * </npt-app-shell>
+ * The application frame: a sticky `header` row, an inline-start `nav` sidebar
+ * (collapses to a narrow rail via [rail]), and the default content region. The
+ * nav hides under a compact breakpoint so the content takes the full width.
+ */
+export class NptAppShell extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+        block-size: 100%;
+        background: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+      .shell {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        grid-template-rows: auto 1fr;
+        grid-template-areas:
+          "header header"
+          "nav main";
+        min-block-size: 100%;
+        box-sizing: border-box;
+      }
+      .header {
+        grid-area: header;
+        position: sticky;
+        inset-block-start: 0;
+        z-index: 2;
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface);
+      }
+      .nav {
+        grid-area: nav;
+        inline-size: 280px;
+        min-inline-size: 0;
+        background: var(--md-sys-color-surface-container-low);
+        border-inline-end: 1px solid var(--md-sys-color-outline-variant);
+        overflow: auto;
+        transition: inline-size var(--npt-dur-standard, 250ms) var(--npt-ease-emphasized, ease);
+      }
+      :host([rail]) .nav {
+        inline-size: 88px;
+      }
+      .main {
+        grid-area: main;
+        min-inline-size: 0;
+        padding: var(--npt-space-6, 24px);
+        background: var(--md-sys-color-surface);
+        box-sizing: border-box;
+      }
+      @media (max-width: 768px) {
+        .shell {
+          grid-template-columns: 1fr;
+          grid-template-areas:
+            "header"
+            "main";
+        }
+        .nav {
+          display: none;
+        }
+      }
+    `;
+    }
+    render() {
+        return html `<div class="shell" part="shell">
+      <div class="header" part="header"><slot name="header"></slot></div>
+      <aside class="nav" part="nav"><slot name="nav"></slot></aside>
+      <main class="main" part="main"><slot></slot></main>
+    </div>`;
+    }
+}
+NptAppShell.observedAttributes = ["rail"];
+/**
+ * <npt-page-header title="Accounts" subtitle="All your balances">
+ *   <npt-breadcrumbs slot="breadcrumb">…</npt-breadcrumbs>
+ *   <npt-button slot="actions">New</npt-button>
+ * </npt-page-header>
+ * The page-level masthead. Display font; optional breadcrumb above, actions
+ * inline-end of the title row, optional supporting subtitle below.
+ */
+export class NptPageHeader extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      .header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--npt-space-2, 8px);
+        padding-block-end: var(--npt-space-5, 20px);
+      }
+      .crumbs {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-4, 16px);
+        flex-wrap: wrap;
+      }
+      .title {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        font-family: var(--npt-font-display);
+        font-size: var(--npt-text-display-md, 45px);
+        line-height: var(--npt-leading-display-md, 52px);
+        font-weight: var(--npt-display-weight, 700);
+        letter-spacing: var(--npt-display-tracking, -0.02em);
+        color: var(--md-sys-color-on-surface);
+        margin: 0;
+      }
+      .actions {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--npt-space-2, 8px);
+        flex: 0 0 auto;
+      }
+      .subtitle {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-title, 18px);
+        line-height: var(--npt-leading-title, 24px);
+        color: var(--md-sys-color-on-surface-variant);
+        margin: 0;
+      }
+    `;
+    }
+    render() {
+        const title = esc(this.getAttribute("title"));
+        const subtitle = esc(this.getAttribute("subtitle"));
+        return html `<header class="header" part="header">
+      <div class="crumbs" part="breadcrumb"><slot name="breadcrumb"></slot></div>
+      <div class="row">
+        <h1 class="title" part="title">${title}</h1>
+        <div class="actions" part="actions"><slot name="actions"></slot></div>
+      </div>
+      ${subtitle ? html `<p class="subtitle" part="subtitle">${subtitle}</p>` : ""}
+    </header>`;
+    }
+}
+NptPageHeader.observedAttributes = ["title", "subtitle"];
+/**
+ * <npt-section title="Recent activity" description="Last 30 days">…</npt-section>
+ * A titled content section with an optional supporting description and a default
+ * slot for the section body.
+ */
+export class NptSection extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      :host {
+        display: block;
+      }
+      .section {
+        display: block;
+        margin-block-end: var(--npt-space-8, 40px);
+      }
+      .head {
+        margin-block-end: var(--npt-space-4, 16px);
+      }
+      .title {
+        font-family: var(--npt-font-display);
+        font-size: var(--npt-text-headline, 28px);
+        line-height: var(--npt-leading-headline, 36px);
+        font-weight: var(--npt-display-weight, 700);
+        letter-spacing: var(--npt-display-tracking, -0.02em);
+        color: var(--md-sys-color-on-surface);
+        margin: 0;
+      }
+      .description {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+        line-height: var(--npt-leading-body, 20px);
+        color: var(--md-sys-color-on-surface-variant);
+        margin: var(--npt-space-1, 4px) 0 0;
+      }
+      .body {
+        display: block;
+      }
+    `;
+    }
+    render() {
+        const title = esc(this.getAttribute("title"));
+        const description = esc(this.getAttribute("description"));
+        return html `<section class="section" part="section">
+      ${title || description
+            ? html `<div class="head" part="head">
+            ${title ? html `<h2 class="title" part="title">${title}</h2>` : ""}
+            ${description ? html `<p class="description" part="description">${description}</p>` : ""}
+          </div>`
+            : ""}
+      <div class="body" part="body"><slot></slot></div>
+    </section>`;
+    }
+}
+NptSection.observedAttributes = ["title", "description"];
+/**
+ * <npt-side-nav> with <npt-side-nav-item> children — the vertical sidebar nav.
+ * Clicking an item activates it (sets [active] exclusively) and re-emits the
+ * item's `select` event from the container.
+ */
+export class NptSideNav extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onSelect = (e) => {
+            const item = e.target?.closest("npt-side-nav-item");
+            if (!item || item === this)
+                return;
+            for (const i of this.querySelectorAll("npt-side-nav-item")) {
+                i.toggleAttribute("active", i === item);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("select", this.onSelect);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("select", this.onSelect);
+    }
+    styles() {
+        return css `
+      :host {
+        display: block;
+        block-size: 100%;
+      }
+      .nav {
+        display: flex;
+        flex-direction: column;
+        gap: var(--npt-space-1, 4px);
+        padding-block: var(--npt-space-3, 12px);
+        padding-inline: var(--npt-space-3, 12px);
+        block-size: 100%;
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface-variant);
+        box-sizing: border-box;
+      }
+    `;
+    }
+    render() {
+        return html `<nav class="nav" part="nav" role="navigation"><slot></slot></nav>`;
+    }
+}
+/**
+ * <npt-side-nav-item label="Dashboard" [active]>
+ *   <span slot="icon">▦</span><npt-badge slot="leading">3</npt-badge>
+ * </npt-side-nav-item>
+ * One row of <npt-side-nav>. Emits `select` on activation. `icon` slots before
+ * the label; `leading` slots inline-end (counts/badges).
+ */
+export class NptSideNavItem extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = () => this.activate();
+        this.onKey = (e) => {
+            if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                this.activate();
+            }
+        };
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.onClick);
+        this.addEventListener("keydown", this.onKey);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.onClick);
+        this.removeEventListener("keydown", this.onKey);
+    }
+    activate() {
+        if (this.hasAttribute("disabled"))
+            return;
+        this.dispatchEvent(new CustomEvent("select", { bubbles: true }));
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      .item {
+        inline-size: 100%;
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-3, 12px);
+        min-height: 48px;
+        padding-inline: var(--npt-space-4, 16px);
+        padding-block: var(--npt-space-2, 8px);
+        border: none;
+        border-radius: var(--npt-corner-full, 999px);
+        background: transparent;
+        color: inherit;
+        text-align: start;
+        cursor: pointer;
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        font-weight: 600;
+        box-sizing: border-box;
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease),
+          color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      .item:hover {
+        background: var(--md-sys-color-surface-container-high);
+        color: var(--md-sys-color-on-surface);
+      }
+      :host([active]) .item {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      :host([disabled]) .item {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      .icon {
+        display: inline-flex;
+        flex: 0 0 auto;
+      }
+      .label {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      ::slotted([slot="leading"]) {
+        margin-inline-start: auto;
+        flex: 0 0 auto;
+      }
+    `;
+    }
+    render() {
+        const label = esc(this.getAttribute("label"));
+        const active = this.hasAttribute("active");
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        return html `<button
+      class="item"
+      part="item"
+      type="button"
+      aria-current="${active ? "page" : "false"}"
+      ${disabled}
+    >
+      <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
+      <span class="label">${label}</span>
+      <slot name="leading"></slot>
+    </button>`;
+    }
+}
+NptSideNavItem.observedAttributes = ["label", "active", "disabled"];
+/**
+ * <npt-search-field placeholder="Search accounts" value=""></npt-search-field>
+ * A search input with a leading magnifier and a clear control. Emits a `search`
+ * event (detail.value) on input, lightly debounced, and on clear.
+ */
+export class NptSearchField extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.timer = 0;
+        this.onInput = (e) => {
+            const input = e.target;
+            this.setAttribute("value", input.value);
+            this.syncClear(input.value);
+            if (this.timer)
+                clearTimeout(this.timer);
+            this.timer = setTimeout(() => this.emit(input.value), 180);
+        };
+        this.onClick = (e) => {
+            if (!e.target?.closest(".clear"))
+                return;
+            const input = this.root.querySelector("input");
+            if (input) {
+                input.value = "";
+                input.focus();
+            }
+            this.setAttribute("value", "");
+            this.syncClear("");
+            if (this.timer)
+                clearTimeout(this.timer);
+            this.emit("");
+        };
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    get value() {
+        return this.root.querySelector("input")?.value ?? this.getAttribute("value") ?? "";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.root.addEventListener("input", this.onInput);
+        this.root.addEventListener("click", this.onClick);
+    }
+    disconnectedCallback() {
+        this.root.removeEventListener("input", this.onInput);
+        this.root.removeEventListener("click", this.onClick);
+        if (this.timer)
+            clearTimeout(this.timer);
+    }
+    emit(value) {
+        this.dispatchEvent(new CustomEvent("search", { detail: { value }, bubbles: true }));
+    }
+    syncClear(value) {
+        const clear = this.root.querySelector(".clear");
+        if (clear)
+            clear.hidden = value.length === 0;
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .field {
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-2, 8px);
+        min-height: 48px;
+        padding-inline: var(--npt-space-4, 16px);
+        border-radius: var(--npt-corner-full, 999px);
+        background: var(--md-sys-color-surface-container-high);
+        color: var(--md-sys-color-on-surface);
+        border: 1px solid transparent;
+        box-sizing: border-box;
+        transition: border-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      .field:focus-within {
+        border-color: var(--md-sys-color-primary);
+      }
+      :host([disabled]) .field {
+        opacity: 0.38;
+        pointer-events: none;
+      }
+      .glyph {
+        flex: 0 0 auto;
+        display: inline-flex;
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: var(--npt-text-body-lg, 16px);
+        line-height: 1;
+      }
+      input {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        border: none;
+        background: transparent;
+        outline: none;
+        color: inherit;
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body-lg, 16px);
+      }
+      input::placeholder {
+        color: var(--md-sys-color-on-surface-variant);
+        opacity: 0.7;
+      }
+      input::-webkit-search-cancel-button {
+        display: none;
+      }
+      .clear {
+        flex: 0 0 auto;
+        inline-size: 28px;
+        block-size: 28px;
+        display: inline-grid;
+        place-items: center;
+        border: none;
+        border-radius: var(--npt-corner-full, 999px);
+        background: transparent;
+        color: var(--md-sys-color-on-surface-variant);
+        cursor: pointer;
+        font-size: var(--npt-text-body, 14px);
+        line-height: 1;
+      }
+      .clear:hover {
+        background: var(--md-sys-color-surface-container-highest);
+        color: var(--md-sys-color-on-surface);
+      }
+    `;
+    }
+    render() {
+        const placeholder = esc(this.getAttribute("placeholder")) || "Search";
+        const value = esc(this.getAttribute("value"));
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        const hideClear = value.length === 0 ? "hidden" : "";
+        return html `<div class="field" part="field" role="search">
+      <span class="glyph" aria-hidden="true">⌕</span>
+      <input
+        type="search"
+        value="${value}"
+        placeholder="${placeholder}"
+        aria-label="${placeholder}"
+        ${disabled}
+      />
+      <button class="clear" part="clear" type="button" aria-label="Clear search" ${hideClear}>✕</button>
+    </div>`;
+    }
+}
+NptSearchField.observedAttributes = ["placeholder", "value", "disabled"];
+/**
+ * <npt-toolbar>
+ *   <…slot="start"></…><…slot="center"></…><…slot="end"></…>
+ * </npt-toolbar>
+ * A horizontal toolbar surface with start / center / end regions. `start` and
+ * `end` mirror in RTL via logical layout; `center` stays centred.
+ */
+export class NptToolbar extends NptElement {
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .bar {
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-3, 12px);
+        min-height: 56px;
+        padding-inline: var(--npt-space-4, 16px);
+        padding-block: var(--npt-space-2, 8px);
+        border-radius: var(--npt-corner-lg, 24px);
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface);
+        box-sizing: border-box;
+      }
+      .start,
+      .end {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--npt-space-2, 8px);
+        flex: 0 0 auto;
+      }
+      .center {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--npt-space-2, 8px);
+        flex: 1 1 auto;
+        min-inline-size: 0;
+      }
+    `;
+    }
+    render() {
+        return html `<div class="bar" part="bar" role="toolbar">
+      <div class="start" part="start"><slot name="start"></slot></div>
+      <div class="center" part="center"><slot name="center"></slot></div>
+      <div class="end" part="end"><slot name="end"></slot></div>
+    </div>`;
+    }
+}
+//# sourceMappingURL=shell-layout.js.map

package/dist/components/shell-layout.js.map

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

package/dist/components/wallet-pay.d.ts

@@ -0,0 +1,85 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-quick-actions> with <npt-quick-action> children.
+ * A responsive grid of action tiles. Clicking a child emits a bubbling `select`
+ * event from the grid carrying the chosen tile's label.
+ */
+export declare class NptQuickActions extends NptElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private activate;
+    private onClick;
+    private onKey;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-quick-action label="Send"><svg slot="icon">…</svg></npt-quick-action>
+ * A single tile inside <npt-quick-actions>. Provide the glyph via the `icon` slot.
+ */
+export declare class NptQuickAction extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-merchant-row name="Acme" category="Groceries" amount="-42.00" currency="LYD"
+ *   time="14:32" [pending]>
+ *   <img slot="logo" src="…" alt="" />
+ * </npt-merchant-row>
+ * Provide a logo via the `logo` slot; falls back to the name's initials.
+ */
+export declare class NptMerchantRow extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-voucher-card title="20% off" value="−20%" code="NEPTUNE20" expiry="Exp 31 Dec">
+ *   …optional default-slot detail…
+ * </npt-voucher-card>
+ * A coupon visual with punched dashed-notch edges (radial-gradient masks).
+ */
+export declare class NptVoucherCard extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-qr-pay amount="42.00" currency="LYD" merchant="Acme Store">
+ *   <img slot="qr" src="…" alt="QR code" />
+ *   <npt-button slot="action">Pay</npt-button>
+ * </npt-qr-pay>
+ * Payment panel: a bordered QR area (`qr` slot), the amount + merchant, and a
+ * primary action slot.
+ */
+export declare class NptQrPay extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-topup-row provider="Vodafone Cash"><svg slot="icon">…</svg></npt-topup-row>
+ * A selectable top-up option: icon slot + provider label + trailing chevron.
+ */
+export declare class NptTopupRow extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-tier-badge tier="Gold" tone="gold|silver|primary|neutral"></npt-tier-badge>
+ * A small premium membership pill.
+ */
+export declare class NptTierBadge extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=wallet-pay.d.ts.map

package/dist/components/wallet-pay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wallet-pay.d.ts","sourceRoot":"","sources":["../../src/components/wallet-pay.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;;GAIG;AACH,qBAAa,eAAgB,SAAQ,UAAU;IACpC,iBAAiB,IAAI,IAAI;IAMlC,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,OAAO,CAA+C;IAC9D,OAAO,CAAC,KAAK,CAKX;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAc1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,kBAAkB,WAAyB;IAElD,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA2D1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAQ3B;AAED;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,kBAAkB,WAAiE;IAE1F,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA8F1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAyB3B;AAED;;;;;GAKG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,kBAAkB,WAAwC;IAEjE,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA2F1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAiB3B;AAED;;;;;;;GAOG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,kBAAkB,WAAsC;IAE/D,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAqE1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAa3B;AAED;;;GAGG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,kBAAkB,WAA4B;IAErD,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAkE1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAS3B;AAED;;;GAGG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,kBAAkB,WAAoB;IAE7C,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAgD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAM3B"}