@neptune.fintech/web-ui 1.0.0 → 2.1.0

package/dist/components/containers.js

@@ -0,0 +1,298 @@
+// © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
+// Neptune Odyssey — overlay containers
+// <npt-dialog>, <npt-bottom-sheet>, <npt-menu> + <npt-menu-item>.
+// Custom-property driven only; logical layout → mirrors in RTL.
+import { NptElement, css, html, A11Y } from "./base.js";
+const FOCUSABLE = 'a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"]),npt-button,npt-icon-button';
+/**
+ * <npt-dialog [open] headline="Confirm">
+ *   …content… <span slot="actions">…</span>
+ * </npt-dialog>
+ * Scrim + centred surface. ESC and backdrop close; focus-trap-lite.
+ */
+export class NptDialog extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = (e) => {
+            const t = e.target;
+            if (t.classList.contains("scrim") || t.closest("[data-close]"))
+                this.close();
+        };
+        this.onKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                this.close();
+            }
+            else if (e.key === "Tab") {
+                const items = Array.from(this.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null || el === document.activeElement);
+                if (items.length === 0)
+                    return;
+                const first = items[0];
+                const last = items[items.length - 1];
+                const active = this.getRootNode().activeElement;
+                if (e.shiftKey && active === first) {
+                    e.preventDefault();
+                    last?.focus();
+                }
+                else if (!e.shiftKey && active === last) {
+                    e.preventDefault();
+                    first?.focus();
+                }
+            }
+        };
+    }
+    attributeChangedCallback(name) {
+        if (this.isConnected)
+            this.update();
+        if (name === "open" && this.hasAttribute("open"))
+            this.focusFirst();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.root.addEventListener("click", this.onClick);
+        this.addEventListener("keydown", this.onKey);
+    }
+    disconnectedCallback() {
+        this.root.removeEventListener("click", this.onClick);
+        this.removeEventListener("keydown", this.onKey);
+    }
+    /** Close the overlay and emit a `close` event. */
+    close() {
+        this.removeAttribute("open");
+        this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
+    }
+    focusFirst() {
+        queueMicrotask(() => {
+            const el = this.querySelector(FOCUSABLE) ?? this.root.querySelector(".surface");
+            el?.focus?.();
+        });
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: none;
+      }
+      :host([open]) {
+        display: block;
+      }
+      .scrim {
+        position: fixed;
+        inset: 0;
+        z-index: var(--npt-z-modal, 70);
+        background: color-mix(in oklab, var(--md-sys-color-scrim) 40%, transparent);
+        display: grid;
+        place-items: center;
+        padding: var(--npt-space-4, 16px);
+      }
+      .surface {
+        inline-size: min(560px, 100%);
+        max-block-size: 90vh;
+        overflow: auto;
+        background: var(--md-sys-color-surface-container-high);
+        color: var(--md-sys-color-on-surface);
+        border-radius: var(--npt-corner-xl, 32px);
+        padding: var(--npt-space-6, 24px);
+        box-shadow: var(--npt-elevation-5, 0 28px 60px rgba(0, 0, 0, 0.3));
+        box-sizing: border-box;
+      }
+      .headline {
+        font-family: var(--npt-font-display);
+        font-size: var(--npt-text-headline, 28px);
+        font-weight: var(--npt-display-weight, 700);
+        margin: 0 0 var(--npt-space-4, 16px);
+      }
+      .content {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body-lg, 16px);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--npt-space-2, 8px);
+        margin-block-start: var(--npt-space-6, 24px);
+      }
+    `;
+    }
+    render() {
+        const headline = (this.getAttribute("headline") ?? "").replace(/[<>]/g, "");
+        return html `<div class="scrim" part="scrim">
+      <div class="surface" part="surface" role="dialog" aria-modal="true" aria-label="${headline}" tabindex="-1">
+        ${headline ? html `<h2 class="headline">${headline}</h2>` : ""}
+        <div class="content"><slot></slot></div>
+        <div class="actions"><slot name="actions"></slot></div>
+      </div>
+    </div>`;
+    }
+}
+NptDialog.observedAttributes = ["open", "headline"];
+/**
+ * <npt-bottom-sheet [open]>…content…</npt-bottom-sheet>
+ * Bottom-anchored sheet with a drag affordance + scrim. Backdrop/ESC close.
+ */
+export class NptBottomSheet extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = (e) => {
+            const t = e.target;
+            if (t.classList.contains("scrim") || t.closest("[data-close]"))
+                this.close();
+        };
+        this.onKey = (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                this.close();
+            }
+        };
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.root.addEventListener("click", this.onClick);
+        this.addEventListener("keydown", this.onKey);
+    }
+    disconnectedCallback() {
+        this.root.removeEventListener("click", this.onClick);
+        this.removeEventListener("keydown", this.onKey);
+    }
+    /** Close the sheet and emit a `close` event. */
+    close() {
+        this.removeAttribute("open");
+        this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: none;
+      }
+      :host([open]) {
+        display: block;
+      }
+      .scrim {
+        position: fixed;
+        inset: 0;
+        z-index: var(--npt-z-modal, 70);
+        background: color-mix(in oklab, var(--md-sys-color-scrim) 40%, transparent);
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+      }
+      .sheet {
+        inline-size: min(640px, 100%);
+        max-block-size: 90vh;
+        overflow: auto;
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-on-surface);
+        border-start-start-radius: var(--npt-corner-xl, 32px);
+        border-start-end-radius: var(--npt-corner-xl, 32px);
+        padding: var(--npt-space-4, 16px) var(--npt-space-6, 24px) var(--npt-space-6, 24px);
+        box-shadow: var(--npt-elevation-5, 0 28px 60px rgba(0, 0, 0, 0.3));
+        box-sizing: border-box;
+      }
+      .grip {
+        inline-size: 32px;
+        block-size: 4px;
+        border-radius: var(--npt-corner-full, 999px);
+        background: var(--md-sys-color-outline-variant);
+        margin: 0 auto var(--npt-space-4, 16px);
+      }
+    `;
+    }
+    render() {
+        return html `<div class="scrim" part="scrim">
+      <div class="sheet" part="sheet" role="dialog" aria-modal="true">
+        <div class="grip" part="grip" aria-hidden="true"></div>
+        <slot></slot>
+      </div>
+    </div>`;
+    }
+}
+NptBottomSheet.observedAttributes = ["open"];
+/**
+ * <npt-menu [open]> with <npt-menu-item> children.
+ * Anchored popover. Place inside a positioned ancestor for anchoring.
+ */
+export class NptMenu extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: none;
+        position: absolute;
+        inset-block-start: 100%;
+        inset-inline-start: 0;
+        z-index: var(--npt-z-overlay, 60);
+      }
+      :host([open]) {
+        display: block;
+      }
+      .menu {
+        min-inline-size: 180px;
+        padding-block: var(--npt-space-2, 8px);
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface);
+        border-radius: var(--npt-corner-sm, 12px);
+        box-shadow: var(--npt-elevation-3, 0 8px 20px rgba(0, 0, 0, 0.2));
+      }
+    `;
+    }
+    render() {
+        return html `<div class="menu" part="menu" role="menu"><slot></slot></div>`;
+    }
+}
+NptMenu.observedAttributes = ["open"];
+/** <npt-menu-item [disabled]>Settings</npt-menu-item> */
+export class NptMenuItem extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .item {
+        inline-size: 100%;
+        min-height: 48px;
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-3, 12px);
+        padding-inline: var(--npt-space-4, 16px);
+        border: none;
+        background: transparent;
+        color: inherit;
+        text-align: start;
+        cursor: pointer;
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body-lg, 16px);
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      .item:hover:not(:disabled) {
+        background: var(--md-sys-color-surface-container-highest);
+      }
+      .item:disabled {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+    `;
+    }
+    render() {
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        return html `<button class="item" part="item" role="menuitem" ${disabled}>
+      <slot name="leading"></slot><slot></slot>
+    </button>`;
+    }
+}
+NptMenuItem.observedAttributes = ["disabled"];
+//# sourceMappingURL=containers.js.map

package/dist/components/containers.js.map

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

package/dist/components/feedback.d.ts

@@ -0,0 +1,42 @@
+import { NptElement } from "./base.js";
+/**
+ * <npt-progress variant="linear|circular" value="60" [indeterminate]></npt-progress>
+ * Omit value (or set [indeterminate]) for the indeterminate state.
+ */
+export declare class NptProgress extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-snackbar message="Saved" [open]>…optional action slot…</npt-snackbar>
+ * Inverse-surface toast. Provide an action via the default slot.
+ */
+export declare class NptSnackbar extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-tooltip label="Copy"><npt-icon-button>⧉</npt-icon-button></npt-tooltip>
+ * Wraps a trigger; reveals the label on hover/focus.
+ */
+export declare class NptTooltip extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+/**
+ * <npt-banner text="Update available">…actions slot…</npt-banner>
+ * Surface-level inline message with an actions slot.
+ */
+export declare class NptBanner extends NptElement {
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    protected styles(): string;
+    protected render(): string;
+}
+//# sourceMappingURL=feedback.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../src/components/feedback.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;GAGG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,kBAAkB,WAAkD;IAE3E,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAsD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAuB3B;AAED;;;GAGG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,kBAAkB,WAAuB;IAEhD,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAgC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAO3B;AAED;;;GAGG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,kBAAkB,WAAa;IAEtC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAgC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAK3B;AAED;;;GAGG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,kBAAkB,WAAY;IAErC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAiC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAQ3B"}

package/dist/components/feedback.js

@@ -0,0 +1,241 @@
+// © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
+// Neptune Odyssey — communication & feedback
+// <npt-progress>, <npt-snackbar>, <npt-tooltip>, <npt-banner>.
+// 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-progress variant="linear|circular" value="60" [indeterminate]></npt-progress>
+ * Omit value (or set [indeterminate]) for the indeterminate state.
+ */
+export class NptProgress extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .track {
+        block-size: 4px;
+        inline-size: 100%;
+        border-radius: var(--npt-corner-full, 999px);
+        background: var(--md-sys-color-surface-container-highest);
+        overflow: hidden;
+      }
+      .bar {
+        block-size: 100%;
+        background: var(--md-sys-color-primary);
+        border-radius: var(--npt-corner-full, 999px);
+        transition: inline-size var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host([indeterminate]) .bar,
+      :host(:not([value])) .bar {
+        inline-size: 40%;
+        animation: slide 1.4s var(--npt-ease-standard, ease) infinite;
+      }
+      @keyframes slide {
+        0% { transform: translateX(-120%); }
+        100% { transform: translateX(320%); }
+      }
+      .ring {
+        inline-size: 48px;
+        block-size: 48px;
+        transform: rotate(-90deg);
+      }
+      .ring circle {
+        fill: none;
+        stroke-width: 4;
+      }
+      .ring .bg {
+        stroke: var(--md-sys-color-surface-container-highest);
+      }
+      .ring .fg {
+        stroke: var(--md-sys-color-primary);
+        stroke-linecap: round;
+        transition: stroke-dashoffset var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      :host([indeterminate]) .ring {
+        animation: spin 1.2s linear infinite;
+      }
+      @keyframes spin {
+        to { transform: rotate(270deg); }
+      }
+    `;
+    }
+    render() {
+        const variant = this.getAttribute("variant") || "linear";
+        const indeterminate = this.hasAttribute("indeterminate") || !this.hasAttribute("value");
+        const value = Math.max(0, Math.min(100, Number(this.getAttribute("value") ?? 0)));
+        const label = esc(this.getAttribute("label")) || "progress";
+        const aria = indeterminate
+            ? html `role="progressbar" aria-label="${label}"`
+            : html `role="progressbar" aria-label="${label}" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100"`;
+        if (variant === "circular") {
+            const r = 20;
+            const circ = 2 * Math.PI * r;
+            const offset = indeterminate ? circ * 0.7 : circ * (1 - value / 100);
+            return html `<svg class="ring" part="ring" viewBox="0 0 48 48" ${aria}>
+        <circle class="bg" cx="24" cy="24" r="${r}"></circle>
+        <circle class="fg" cx="24" cy="24" r="${r}"
+          stroke-dasharray="${circ}" stroke-dashoffset="${offset}"></circle>
+      </svg>`;
+        }
+        const width = indeterminate ? "40%" : `${value}%`;
+        return html `<div class="track" part="track" ${aria}>
+      <div class="bar" style="inline-size:${width}"></div>
+    </div>`;
+    }
+}
+NptProgress.observedAttributes = ["variant", "value", "indeterminate", "label"];
+/**
+ * <npt-snackbar message="Saved" [open]>…optional action slot…</npt-snackbar>
+ * Inverse-surface toast. Provide an action via the default slot.
+ */
+export class NptSnackbar extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: none;
+      }
+      :host([open]) {
+        display: block;
+      }
+      .bar {
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-4, 16px);
+        min-height: 48px;
+        padding-inline: var(--npt-space-4, 16px);
+        padding-block: var(--npt-space-3, 12px);
+        border-radius: var(--npt-corner-xs, 8px);
+        background: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        box-shadow: var(--npt-elevation-3, 0 8px 20px rgba(0, 0, 0, 0.2));
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+      }
+      .msg {
+        flex: 1 1 auto;
+      }
+      ::slotted(*) {
+        color: var(--md-sys-color-inverse-primary);
+      }
+    `;
+    }
+    render() {
+        const message = esc(this.getAttribute("message"));
+        return html `<div class="bar" part="bar" role="status" aria-live="polite">
+      <span class="msg">${message}</span>
+      <slot></slot>
+    </div>`;
+    }
+}
+NptSnackbar.observedAttributes = ["message", "open"];
+/**
+ * <npt-tooltip label="Copy"><npt-icon-button>⧉</npt-icon-button></npt-tooltip>
+ * Wraps a trigger; reveals the label on hover/focus.
+ */
+export class NptTooltip extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+      .tip {
+        position: absolute;
+        inset-block-end: calc(100% + var(--npt-space-2, 8px));
+        inset-inline-start: 50%;
+        transform: translateX(-50%);
+        white-space: nowrap;
+        padding-inline: var(--npt-space-3, 12px);
+        padding-block: var(--npt-space-1, 4px);
+        border-radius: var(--npt-corner-xs, 8px);
+        background: var(--md-sys-color-inverse-surface);
+        color: var(--md-sys-color-inverse-on-surface);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-caption, 12px);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+        z-index: var(--npt-z-toast, 80);
+      }
+      :host(:hover) .tip,
+      :host(:focus-within) .tip {
+        opacity: 1;
+      }
+    `;
+    }
+    render() {
+        const label = esc(this.getAttribute("label"));
+        return html `<slot></slot>
+      <span class="tip" part="tip" role="tooltip">${label}</span>`;
+    }
+}
+NptTooltip.observedAttributes = ["label"];
+/**
+ * <npt-banner text="Update available">…actions slot…</npt-banner>
+ * Surface-level inline message with an actions slot.
+ */
+export class NptBanner extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .banner {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--npt-space-4, 16px);
+        padding-inline: var(--npt-space-4, 16px);
+        padding-block: var(--npt-space-3, 12px);
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+      }
+      .leading {
+        display: inline-flex;
+      }
+      .text {
+        flex: 1 1 200px;
+      }
+      .actions {
+        display: inline-flex;
+        gap: var(--npt-space-2, 8px);
+        margin-inline-start: auto;
+      }
+    `;
+    }
+    render() {
+        const text = esc(this.getAttribute("text"));
+        return html `<div class="banner" part="banner" role="status">
+      <span class="leading"><slot name="leading"></slot></span>
+      <span class="text">${text}</span>
+      <span class="actions"><slot></slot></span>
+    </div>`;
+    }
+}
+NptBanner.observedAttributes = ["text"];
+//# sourceMappingURL=feedback.js.map

package/dist/components/feedback.js.map

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

package/dist/components/inputs.d.ts

@@ -10,10 +10,17 @@ export declare class NptTextField extends NptElement {
     protected styles(): string;
     protected render(): string;
 }
-/** <npt-chip [selected]>Label</npt-chip> */
+/**
+ * <npt-chip variant="assist|filter|input|suggestion" [selected]>Label</npt-chip>
+ * `filter` shows a leading ✓ when [selected]; `input` shows a removable ✕ that
+ * dispatches a `remove` event. Defaults to the assist/filter treatment.
+ */
 export declare class NptChip extends NptElement {
     static observedAttributes: string[];
     attributeChangedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onClick;
     protected styles(): string;
     protected render(): string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/components/inputs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;GAGG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,kBAAkB,WAAsD;IAE/E,wBAAwB,IAAI,IAAI;IAIhC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,SAAS,CAAC,MAAM,IAAI,MAAM;IAgD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAkB3B;AAED,4CAA4C;AAC5C,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,kBAAkB,WAAgB;IAEzC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IA2B1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAI3B;AAED,oEAAoE;AACpE,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,kBAAkB,WAAY;IAErC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAmC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B"}
+{"version":3,"file":"inputs.d.ts","sourceRoot":"","sources":["../../src/components/inputs.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAmB,MAAM,WAAW,CAAC;AAKxD;;;GAGG;AACH,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,kBAAkB,WAAsD;IAE/E,wBAAwB,IAAI,IAAI;IAIhC,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,SAAS,CAAC,MAAM,IAAI,MAAM;IAgD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAkB3B;AAED;;;;GAIG;AACH,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,kBAAkB,WAAuC;IAEhE,wBAAwB,IAAI,IAAI;IAIvB,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAI5B,OAAO,CAAC,OAAO,CAKb;IAEF,SAAS,CAAC,MAAM,IAAI,MAAM;IAqD1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAY3B;AAED,oEAAoE;AACpE,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,kBAAkB,WAAY;IAErC,wBAAwB,IAAI,IAAI;IAIhC,SAAS,CAAC,MAAM,IAAI,MAAM;IAmC1B,SAAS,CAAC,MAAM,IAAI,MAAM;CAG3B"}