@neptune.fintech/web-ui 1.0.0 → 2.1.0

package/LICENSE

@@ -64,7 +64,7 @@ obtain a commercial license or cease production use.
 (c) No trademark use. This license grants no rights in the Licensor's names,
     logos, or brand names beyond the attribution required above.
 (d) The brands, names, and visual identities of example tenants in this
-    repository (e.g. "Andalus Bank", "Nuran", "First Gulf Libyan") are reference
+    repository (e.g. "Triton Bank", "Nereid", "Proteus") are reference
     illustrations only and convey no rights.
 
 ------------------------------------------------------------------------------

package/README.md

@@ -24,7 +24,7 @@ import "@neptune.fintech/web-ui/styles.css"; // ships themes.css + system.css
 import { applyTheme, registerAll } from "@neptune.fintech/web-ui";
 
 registerAll();                                       // define the custom elements
-applyTheme(document.documentElement, "andalus", { mode: "system", dir: "auto" });
+applyTheme(document.documentElement, "triton", { mode: "system", dir: "auto" });
 ```
 
 ```html
@@ -51,8 +51,30 @@ a brand is zero JavaScript. Custom configs and brandprints resolve through
 
 ## Components
 
-`npt-button` · `npt-card` (incl. `glass`) · `npt-balance-card` · `npt-transaction-row` ·
-`npt-text-field` · `npt-chip` · `npt-badge` · `npt-app-bar` · `npt-nav-bar` / `npt-nav-item`.
+A standards-based **Material 3** kit. Every element is themed only by CSS variables.
+
+**Core & financial:** `npt-button` (filled / elevated / tonal / outlined / text) ·
+`npt-card` (incl. `glass`) · `npt-balance-card` · `npt-transaction-row` · `npt-text-field` ·
+`npt-badge`.
+
+**Buttons & actions:** `npt-icon-button` (standard / filled / tonal / outlined, `[selected]`) ·
+`npt-fab` (`sm`/`md`/`lg`, `[extended]`) · `npt-segmented-button` + `npt-segmented-option`.
+
+**Selection controls:** `npt-checkbox` (`[indeterminate]`) · `npt-radio` (name/value group) ·
+`npt-switch` · `npt-slider` (output bubble).
+
+**Chips:** `npt-chip` with `variant="assist|filter|input|suggestion"` (filter check, input ✕).
+
+**Communication & feedback:** `npt-progress` (linear / circular, `[indeterminate]`) ·
+`npt-snackbar` · `npt-tooltip` · `npt-banner`.
+
+**Containers & layout:** `npt-dialog` (scrim, ESC / backdrop close, focus-trap) ·
+`npt-bottom-sheet` · `npt-list` + `npt-list-item` · `npt-divider` (`[inset]`) ·
+`npt-tabs` + `npt-tab` · `npt-accordion` + `npt-accordion-item` · `npt-avatar` ·
+`npt-menu` + `npt-menu-item`.
+
+**Navigation:** `npt-app-bar` · `npt-top-app-bar` (`small`/`center`/`medium`/`large`) ·
+`npt-nav-bar` · `npt-nav-rail` · `npt-nav-item`.
 
 Every component reads **only** `var(--md-sys-color-*)` / `var(--npt-*)` — no literal color,
 radius, or font anywhere (principle P2). Layout is logical (`*-inline-*`) so it mirrors in

package/dist/components/actions.d.ts

@@ -0,0 +1,43 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-icon-button variant="standard|filled|tonal|outlined" [selected] [disabled]
+ *   label="Favourite">★</npt-icon-button>
+ * 48dp circular target. `selected` toggles the active treatment.
+ */
+export declare class NptIconButton extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-fab size="sm|md|lg" [extended] label="Compose" [disabled]>＋</npt-fab>
+ * Primary-container floating action. `extended` reveals the text label.
+ */
+export declare class NptFab extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-segmented-button [multi]> with <npt-segmented-option> children.
+ * Connected single- or multi-select group. Single-select is the default.
+ */
+export declare class NptSegmentedButton extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onClick;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-segmented-option value="day" [selected] [disabled]>Day</npt-segmented-option> */
+export declare class NptSegmentedOption extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=actions.d.ts.map

package/dist/components/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/components/actions.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,kBAAkB,WAAgD;IAEzE,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA0D1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAW3B;AAED;;;GAGG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,kBAAkB,WAA6C;IAEtE,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAwD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAQ3B;AAED;;;GAGG;AACH,qBAAa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,kBAAkB,WAAa;IAEtC,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,OAAO,CAWb;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAe1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAM3B;AAED,yFAAyF;AACzF,qBAAa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,kBAAkB,WAAqC;IAE9D,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA0C1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAc3B"}

package/dist/components/actions.js

@@ -0,0 +1,279 @@
+// © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
+// Neptune Odyssey — action components
+// <npt-icon-button>, <npt-fab>, <npt-segmented-button> + <npt-segmented-option>.
+// Logical layout → mirrors in RTL. Custom-property driven only.
+import { NptElement, css, html, A11Y } from "./base.js";
+const esc = (v) => (v ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+/**
+ * <npt-icon-button variant="standard|filled|tonal|outlined" [selected] [disabled]
+ *   label="Favourite">★</npt-icon-button>
+ * 48dp circular target. `selected` toggles the active treatment.
+ */
+export class NptIconButton extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-block;
+      }
+      button {
+        inline-size: 48px;
+        block-size: 48px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        border-radius: var(--npt-corner-full, 999px);
+        cursor: pointer;
+        background: transparent;
+        color: var(--md-sys-color-on-surface-variant);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-title, 18px);
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease),
+          color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      button:disabled {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      :host([variant="filled"]) button {
+        background: var(--md-sys-color-surface-container-highest);
+        color: var(--md-sys-color-primary);
+      }
+      :host([variant="filled"][selected]) button {
+        background: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
+      }
+      :host([variant="tonal"]) button {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      :host([variant="tonal"][selected]) button {
+        background: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
+      }
+      :host([variant="outlined"]) button {
+        border: 1px solid var(--md-sys-color-outline);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      :host([variant="outlined"][selected]) button {
+        background: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        border-color: transparent;
+      }
+      :host(:not([variant])[selected]) button,
+      :host([variant="standard"][selected]) button {
+        color: var(--md-sys-color-primary);
+      }
+    `;
+    }
+    render() {
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        const pressed = this.hasAttribute("selected") ? "true" : "false";
+        const label = esc(this.getAttribute("label"));
+        return html `<button
+      part="button"
+      ${disabled}
+      aria-pressed="${pressed}"
+      aria-label="${label}"
+    ><slot></slot></button>`;
+    }
+}
+NptIconButton.observedAttributes = ["variant", "selected", "disabled", "label"];
+/**
+ * <npt-fab size="sm|md|lg" [extended] label="Compose" [disabled]>＋</npt-fab>
+ * Primary-container floating action. `extended` reveals the text label.
+ */
+export class NptFab extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-block;
+      }
+      button {
+        min-inline-size: 56px;
+        min-block-size: 56px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--npt-space-3, 12px);
+        border: none;
+        border-radius: var(--npt-corner-lg, 24px);
+        cursor: pointer;
+        padding-inline: var(--npt-space-4, 16px);
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        font-weight: 600;
+        box-shadow: var(--npt-elevation-3, 0 8px 20px rgba(0, 0, 0, 0.2));
+        transition: box-shadow var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      button:disabled {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      :host([size="sm"]) button {
+        min-inline-size: 40px;
+        min-block-size: 40px;
+        border-radius: var(--npt-corner-md, 16px);
+      }
+      :host([size="lg"]) button {
+        min-inline-size: 96px;
+        min-block-size: 96px;
+        border-radius: var(--npt-corner-xl, 32px);
+        font-size: var(--npt-text-title, 18px);
+      }
+      .icon {
+        display: inline-flex;
+        font-size: var(--npt-text-title, 18px);
+      }
+      .label {
+        display: none;
+      }
+      :host([extended]) .label {
+        display: inline;
+      }
+      :host([extended]) button {
+        padding-inline: var(--npt-space-5, 20px);
+      }
+    `;
+    }
+    render() {
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        const label = esc(this.getAttribute("label"));
+        return html `<button part="button" ${disabled} aria-label="${label}">
+      <span class="icon"><slot></slot></span>
+      ${label ? html `<span class="label">${label}</span>` : ""}
+    </button>`;
+    }
+}
+NptFab.observedAttributes = ["size", "extended", "label", "disabled"];
+/**
+ * <npt-segmented-button [multi]> with <npt-segmented-option> children.
+ * Connected single- or multi-select group. Single-select is the default.
+ */
+export class NptSegmentedButton extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = (e) => {
+            const target = e.target?.closest("npt-segmented-option");
+            if (!target || target.hasAttribute("disabled"))
+                return;
+            if (this.hasAttribute("multi")) {
+                target.toggleAttribute("selected");
+            }
+            else {
+                for (const opt of this.querySelectorAll("npt-segmented-option")) {
+                    opt.toggleAttribute("selected", opt === target);
+                }
+            }
+            this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
+        };
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.onClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.onClick);
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-flex;
+      }
+      .group {
+        display: inline-flex;
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--npt-corner-full, 999px);
+        overflow: hidden;
+      }
+    `;
+    }
+    render() {
+        const multi = this.hasAttribute("multi");
+        return html `<div class="group" part="group" role="group" aria-multiselectable="${multi}">
+      <slot></slot>
+    </div>`;
+    }
+}
+NptSegmentedButton.observedAttributes = ["multi"];
+/** <npt-segmented-option value="day" [selected] [disabled]>Day</npt-segmented-option> */
+export class NptSegmentedOption extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-flex;
+      }
+      .opt {
+        min-height: 48px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--npt-space-2, 8px);
+        padding-inline: var(--npt-space-4, 16px);
+        border: none;
+        border-inline-start: 1px solid var(--md-sys-color-outline);
+        background: transparent;
+        color: var(--md-sys-color-on-surface);
+        cursor: pointer;
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-label, 14px);
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host(:first-of-type) .opt {
+        border-inline-start: none;
+      }
+      :host([selected]) .opt {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      .opt:disabled {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      .check {
+        display: none;
+      }
+      :host([selected]) .check {
+        display: inline;
+      }
+    `;
+    }
+    render() {
+        const selected = this.hasAttribute("selected");
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        return html `<button
+      class="opt"
+      part="option"
+      role="button"
+      aria-pressed="${selected}"
+      ${disabled}
+    >
+      <span class="check" aria-hidden="true">✓</span>
+      <slot></slot>
+    </button>`;
+    }
+}
+NptSegmentedOption.observedAttributes = ["selected", "disabled", "value"];
+//# sourceMappingURL=actions.js.map

package/dist/components/actions.js.map

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

package/dist/components/button.d.ts

@@ -1,6 +1,6 @@
 import { NptElement } from "./base.js";
 /**
- * <npt-button variant="filled|tonal|outlined|text" [disabled]>Label</npt-button>
+ * <npt-button variant="filled|elevated|tonal|outlined|text" [disabled]>Label</npt-button>
  * M3 Expressive button. Pill shape, brand-tinted, 48dp min target.
  */
 export declare class NptButton extends NptElement {

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAExD;;;GAGG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,kBAAkB,WAA2B;IAEpD,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAqD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAI3B"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAExD;;;GAGG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,kBAAkB,WAA2B;IAEpD,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA6D1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAI3B"}

package/dist/components/button.js

@@ -1,7 +1,7 @@
 // Neptune Odyssey — <npt-button> · © 2026 Neptune.Fintech (neptune.ly)
 import { NptElement, css, html, A11Y } from "./base.js";
 /**
- * <npt-button variant="filled|tonal|outlined|text" [disabled]>Label</npt-button>
+ * <npt-button variant="filled|elevated|tonal|outlined|text" [disabled]>Label</npt-button>
  * M3 Expressive button. Pill shape, brand-tinted, 48dp min target.
  */
 export class NptButton extends NptElement {
@@ -45,6 +45,14 @@ export class NptButton extends NptElement {
       :host(:not([variant])) button:hover:not(:disabled) {
         box-shadow: var(--npt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.2));
       }
+      :host([variant="elevated"]) button {
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-primary);
+        box-shadow: var(--npt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.2));
+      }
+      :host([variant="elevated"]) button:hover:not(:disabled) {
+        box-shadow: var(--npt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.18));
+      }
       :host([variant="tonal"]) button {
         background: var(--md-sys-color-secondary-container);
         color: var(--md-sys-color-on-secondary-container);

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAExD;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAGvC,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAES,MAAM;QACd,OAAO,GAAG,CAAA;QACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDP,CAAC;IACJ,CAAC;IAES,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjE,OAAO,IAAI,CAAA,yBAAyB,QAAQ,yBAAyB,CAAC;IACxE,CAAC;;AA9DM,4BAAkB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAExD;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAGvC,wBAAwB;QACtB,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAES,MAAM;QACd,OAAO,GAAG,CAAA;QACN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwDP,CAAC;IACJ,CAAC;IAES,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QACjE,OAAO,IAAI,CAAA,yBAAyB,QAAQ,yBAAyB,CAAC;IACxE,CAAC;;AAtEM,4BAAkB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/containers.d.ts

@@ -0,0 +1,54 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-dialog [open] headline="Confirm">
+ *   …content… <span slot="actions">…</span>
+ * </npt-dialog>
+ * Scrim + centred surface. ESC and backdrop close; focus-trap-lite.
+ */
+export declare class NptDialog extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(name: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Close the overlay and emit a `close` event. */
+    close(): void;
+    private focusFirst;
+    private onClick;
+    private onKey;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-bottom-sheet [open]>…content…</npt-bottom-sheet>
+ * Bottom-anchored sheet with a drag affordance + scrim. Backdrop/ESC close.
+ */
+export declare class NptBottomSheet extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Close the sheet and emit a `close` event. */
+    close(): void;
+    private onClick;
+    private onKey;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-menu [open]> with <npt-menu-item> children.
+ * Anchored popover. Place inside a positioned ancestor for anchoring.
+ */
+export declare class NptMenu extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/** <npt-menu-item [disabled]>Settings</npt-menu-item> */
+export declare class NptMenuItem extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=containers.d.ts.map

package/dist/components/containers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers.d.ts","sourceRoot":"","sources":["../../src/components/containers.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,kBAAkB,WAAwB;IAEjD,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAKnC,iBAAiB,IAAI,IAAI;IAMlC,oBAAoB,IAAI,IAAI;IAK5B,kDAAkD;IAClD,KAAK,IAAI,IAAI;IAKb,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,KAAK,CAoBX;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAiD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAU3B;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,kBAAkB,WAAY;IAErC,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAMlC,oBAAoB,IAAI,IAAI;IAK5B,gDAAgD;IAChD,KAAK,IAAI,IAAI;IAKb,OAAO,CAAC,OAAO,CAGb;IAEF,OAAO,CAAC,KAAK,CAKX;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAwC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAQ3B;AAED;;;GAGG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,kBAAkB,WAAY;IAErC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAwB1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B;AAED,yDAAyD;AACzD,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,kBAAkB,WAAgB;IAEzC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAgC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAM3B"}