@neptune.fintech/web-ui 2.1.0 → 2.2.0

package/dist/components/wallet-pay.js

@@ -0,0 +1,633 @@
+// © 2026 Neptune.Fintech (neptune.ly) · Neptune Odyssey Community License v1.0
+// Neptune Odyssey — wallet & pay surfaces
+// <npt-quick-actions>/<npt-quick-action>, <npt-merchant-row>, <npt-voucher-card>,
+// <npt-qr-pay>, <npt-topup-row>, <npt-tier-badge>.
+// Custom-property driven only; money uses tabular figures; 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-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 class NptQuickActions extends NptElement {
+    constructor() {
+        super(...arguments);
+        this.onClick = (e) => this.activate(e.target);
+        this.onKey = (e) => {
+            if (e.key !== " " && e.key !== "Enter")
+                return;
+            if (!e.target?.closest("npt-quick-action"))
+                return;
+            e.preventDefault();
+            this.activate(e.target);
+        };
+    }
+    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(target) {
+        const tile = target?.closest("npt-quick-action");
+        if (!tile || tile.hasAttribute("disabled"))
+            return;
+        const label = tile.getAttribute("label") ?? "";
+        this.dispatchEvent(new CustomEvent("select", { detail: { label }, bubbles: true }));
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(var(--npt-quick-actions-cols, 4), minmax(0, 1fr));
+        gap: var(--npt-space-3, 12px);
+      }
+    `;
+    }
+    render() {
+        return html `<div class="grid" part="grid" role="group"><slot></slot></div>`;
+    }
+}
+/**
+ * <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 class NptQuickAction extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .tile {
+        inline-size: 100%;
+        min-block-size: 88px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--npt-space-2, 8px);
+        padding-block: var(--npt-space-3, 12px);
+        padding-inline: var(--npt-space-2, 8px);
+        border: none;
+        border-radius: var(--npt-corner-md, 16px);
+        background: var(--md-sys-color-surface-container);
+        color: var(--md-sys-color-on-surface);
+        cursor: pointer;
+        font-family: var(--npt-font-text);
+        box-sizing: border-box;
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease),
+          transform var(--npt-dur-fast, 200ms) var(--npt-ease-spring, ease);
+      }
+      .tile:hover {
+        background: var(--md-sys-color-surface-container-high);
+      }
+      .tile:active {
+        transform: scale(0.97);
+      }
+      :host([disabled]) .tile {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      .glyph {
+        inline-size: 44px;
+        block-size: 44px;
+        border-radius: var(--npt-corner-full, 999px);
+        display: grid;
+        place-items: center;
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+      }
+      .label {
+        font-size: var(--npt-text-label, 14px);
+        line-height: var(--npt-leading-label, 20px);
+        text-align: center;
+        color: var(--md-sys-color-on-surface);
+      }
+      ::slotted([slot="icon"]) {
+        inline-size: 24px;
+        block-size: 24px;
+        display: block;
+      }
+    `;
+    }
+    render() {
+        const label = esc(this.getAttribute("label"));
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        return html `<button class="tile" part="tile" type="button" aria-label="${label}" ${disabled}>
+      <span class="glyph" aria-hidden="true"><slot name="icon"></slot></span>
+      <span class="label">${label}</span>
+    </button>`;
+    }
+}
+NptQuickAction.observedAttributes = ["label", "disabled"];
+/**
+ * <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 class NptMerchantRow extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-4, 16px);
+        min-height: 56px;
+        padding-block: var(--npt-space-3, 12px);
+        padding-inline: var(--npt-space-2, 8px);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant);
+      }
+      .logo {
+        inline-size: 44px;
+        block-size: 44px;
+        flex: 0 0 auto;
+        border-radius: var(--npt-corner-full, 999px);
+        overflow: hidden;
+        display: grid;
+        place-items: center;
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        font-family: var(--npt-font-display);
+        font-weight: 700;
+        font-size: var(--npt-text-label, 14px);
+      }
+      ::slotted([slot="logo"]) {
+        inline-size: 100%;
+        block-size: 100%;
+        object-fit: cover;
+      }
+      .body {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+      }
+      .name {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body-lg, 16px);
+        color: var(--md-sys-color-on-surface);
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .category {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+        color: var(--md-sys-color-on-surface-variant);
+        margin: 2px 0 0;
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-2, 8px);
+      }
+      .pending {
+        display: inline-flex;
+        align-items: center;
+        padding-inline: var(--npt-space-2, 8px);
+        padding-block: 1px;
+        border-radius: var(--npt-corner-full, 999px);
+        background: var(--md-sys-color-tertiary-container);
+        color: var(--md-sys-color-on-tertiary-container);
+        font-size: var(--npt-text-caption, 12px);
+        font-weight: 600;
+      }
+      .trailing {
+        text-align: end;
+        flex: 0 0 auto;
+      }
+      .amount {
+        font-family: var(--npt-font-num);
+        font-feature-settings: "tnum" 1;
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-body-lg, 16px);
+        font-weight: 600;
+        color: var(--md-sys-color-on-surface);
+        white-space: nowrap;
+        margin: 0;
+      }
+      :host([pending]) .amount {
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .time {
+        font-family: var(--npt-font-num);
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-caption, 12px);
+        color: var(--md-sys-color-on-surface-variant);
+        margin: 2px 0 0;
+      }
+    `;
+    }
+    render() {
+        const name = esc(this.getAttribute("name"));
+        const category = esc(this.getAttribute("category"));
+        const amount = esc(this.getAttribute("amount"));
+        const currency = esc(this.getAttribute("currency"));
+        const time = esc(this.getAttribute("time"));
+        const pending = this.hasAttribute("pending");
+        const initial = name.trim().charAt(0).toUpperCase() || "•";
+        return html `<div class="row" part="row" role="group" aria-label="${name} ${amount} ${currency}">
+      <span class="logo" part="logo">
+        <slot name="logo"><span aria-hidden="true">${initial}</span></slot>
+      </span>
+      <div class="body">
+        <p class="name">${name}</p>
+        <p class="category">
+          ${category ? html `<span>${category}</span>` : ""}
+          ${pending ? html `<span class="pending">pending</span>` : ""}
+        </p>
+      </div>
+      <div class="trailing">
+        <p class="amount">${amount} ${currency}</p>
+        ${time ? html `<p class="time">${time}</p>` : ""}
+      </div>
+    </div>`;
+    }
+}
+NptMerchantRow.observedAttributes = ["name", "category", "amount", "currency", "time", "pending"];
+/**
+ * <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 class NptVoucherCard extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .voucher {
+        position: relative;
+        display: flex;
+        align-items: stretch;
+        gap: var(--npt-space-4, 16px);
+        padding: var(--npt-space-5, 20px);
+        border-radius: var(--npt-corner-lg, 24px);
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        box-shadow: var(--npt-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.2));
+        box-sizing: border-box;
+        overflow: hidden;
+        /* Punch a notch out of each inline edge with a radial-gradient mask.
+           Mask colour is alpha-only — currentColor supplies the opaque stop. */
+        --_notch: 16px;
+        -webkit-mask:
+          radial-gradient(var(--_notch) at left 50%, transparent 98%, currentColor) left / 51% 100% no-repeat,
+          radial-gradient(var(--_notch) at right 50%, transparent 98%, currentColor) right / 51% 100% no-repeat;
+        -webkit-mask-composite: source-over;
+        mask:
+          radial-gradient(var(--_notch) at left 50%, transparent 98%, currentColor) left / 51% 100% no-repeat,
+          radial-gradient(var(--_notch) at right 50%, transparent 98%, currentColor) right / 51% 100% no-repeat;
+        mask-composite: add;
+      }
+      .value {
+        flex: 0 0 auto;
+        align-self: center;
+        font-family: var(--npt-font-num);
+        font-feature-settings: "tnum" 1;
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-headline, 28px);
+        font-weight: 700;
+        letter-spacing: -0.01em;
+        padding-inline-end: var(--npt-space-4, 16px);
+        /* dashed tear line between the value stub and the body */
+        border-inline-end: 2px dashed var(--md-sys-color-outline);
+      }
+      .body {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--npt-space-1, 4px);
+        justify-content: center;
+      }
+      .title {
+        font-family: var(--npt-font-display);
+        font-size: var(--npt-text-title, 18px);
+        font-weight: 600;
+        margin: 0;
+      }
+      .detail {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+        opacity: 0.86;
+      }
+      .meta {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--npt-space-3, 12px);
+        margin-block-start: var(--npt-space-1, 4px);
+      }
+      .code {
+        display: inline-flex;
+        align-items: center;
+        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-surface);
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--npt-font-num);
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-label, 14px);
+        font-weight: 600;
+        letter-spacing: 0.08em;
+      }
+      .expiry {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-caption, 12px);
+        opacity: 0.78;
+      }
+    `;
+    }
+    render() {
+        const title = esc(this.getAttribute("title"));
+        const value = esc(this.getAttribute("value"));
+        const code = esc(this.getAttribute("code"));
+        const expiry = esc(this.getAttribute("expiry"));
+        return html `<div class="voucher" part="voucher" role="group" aria-label="${title} ${value}">
+      ${value ? html `<div class="value" part="value">${value}</div>` : ""}
+      <div class="body">
+        ${title ? html `<p class="title">${title}</p>` : ""}
+        <div class="detail"><slot></slot></div>
+        <div class="meta">
+          ${code ? html `<span class="code" part="code">${code}</span>` : ""}
+          ${expiry ? html `<span class="expiry">${expiry}</span>` : ""}
+        </div>
+      </div>
+    </div>`;
+    }
+}
+NptVoucherCard.observedAttributes = ["title", "value", "code", "expiry"];
+/**
+ * <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 class NptQrPay extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .panel {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--npt-space-5, 20px);
+        padding: var(--npt-space-6, 24px);
+        border-radius: var(--npt-corner-xl, 32px);
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-on-surface);
+        box-sizing: border-box;
+      }
+      .qr {
+        inline-size: 200px;
+        block-size: 200px;
+        max-inline-size: 100%;
+        aspect-ratio: 1;
+        display: grid;
+        place-items: center;
+        border-radius: var(--npt-corner-md, 16px);
+        border: 2px solid var(--md-sys-color-outline-variant);
+        background: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface-variant);
+        overflow: hidden;
+      }
+      ::slotted([slot="qr"]) {
+        inline-size: 100%;
+        block-size: 100%;
+        object-fit: contain;
+      }
+      .merchant {
+        font-family: var(--npt-font-text);
+        font-size: var(--npt-text-body, 14px);
+        color: var(--md-sys-color-on-surface-variant);
+        margin: 0;
+        text-align: center;
+      }
+      .amount {
+        font-family: var(--npt-font-num);
+        font-feature-settings: "tnum" 1;
+        font-variant-numeric: tabular-nums;
+        font-size: var(--npt-text-display-sm, 36px);
+        font-weight: 700;
+        letter-spacing: -0.02em;
+        margin: 0;
+        display: flex;
+        align-items: baseline;
+        gap: var(--npt-space-2, 8px);
+      }
+      .currency {
+        font-size: var(--npt-text-title, 18px);
+        opacity: 0.85;
+      }
+      .action {
+        inline-size: 100%;
+        display: flex;
+        justify-content: center;
+      }
+      ::slotted([slot="action"]) {
+        inline-size: 100%;
+      }
+    `;
+    }
+    render() {
+        const amount = esc(this.getAttribute("amount"));
+        const currency = esc(this.getAttribute("currency"));
+        const merchant = esc(this.getAttribute("merchant"));
+        return html `<div class="panel" part="panel" role="group" aria-label="Pay ${amount} ${currency} ${merchant}">
+      <div class="qr" part="qr">
+        <slot name="qr"><span aria-hidden="true">QR</span></slot>
+      </div>
+      ${merchant ? html `<p class="merchant">${merchant}</p>` : ""}
+      <p class="amount"><span class="currency">${currency}</span>${amount}</p>
+      <div class="action"><slot name="action"></slot></div>
+    </div>`;
+    }
+}
+NptQrPay.observedAttributes = ["amount", "currency", "merchant"];
+/**
+ * <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 class NptTopupRow extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      ${A11Y}
+      :host {
+        display: block;
+      }
+      .row {
+        inline-size: 100%;
+        display: flex;
+        align-items: center;
+        gap: var(--npt-space-4, 16px);
+        min-height: 56px;
+        padding-block: var(--npt-space-3, 12px);
+        padding-inline: var(--npt-space-4, 16px);
+        border: none;
+        border-radius: var(--npt-corner-md, 16px);
+        background: var(--md-sys-color-surface-container-low);
+        color: var(--md-sys-color-on-surface);
+        text-align: start;
+        cursor: pointer;
+        font-family: var(--npt-font-text);
+        box-sizing: border-box;
+        transition: background-color var(--npt-dur-fast, 200ms) var(--npt-ease-standard, ease);
+      }
+      .row:hover {
+        background: var(--md-sys-color-surface-container-high);
+      }
+      :host([disabled]) .row {
+        cursor: not-allowed;
+        opacity: 0.38;
+      }
+      .icon {
+        inline-size: 40px;
+        block-size: 40px;
+        flex: 0 0 auto;
+        border-radius: var(--npt-corner-sm, 12px);
+        display: grid;
+        place-items: center;
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+      }
+      ::slotted([slot="icon"]) {
+        inline-size: 24px;
+        block-size: 24px;
+        display: block;
+      }
+      .provider {
+        flex: 1 1 auto;
+        min-inline-size: 0;
+        font-size: var(--npt-text-body-lg, 16px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .chevron {
+        flex: 0 0 auto;
+        color: var(--md-sys-color-on-surface-variant);
+        /* point toward the inline-end; flips automatically in RTL */
+        transform: scaleX(1);
+      }
+      :host(:dir(rtl)) .chevron {
+        transform: scaleX(-1);
+      }
+    `;
+    }
+    render() {
+        const provider = esc(this.getAttribute("provider"));
+        const disabled = this.hasAttribute("disabled") ? "disabled" : "";
+        return html `<button class="row" part="row" type="button" aria-label="${provider}" ${disabled}>
+      <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
+      <span class="provider">${provider}</span>
+      <span class="chevron" aria-hidden="true">›</span>
+    </button>`;
+    }
+}
+NptTopupRow.observedAttributes = ["provider", "disabled"];
+/**
+ * <npt-tier-badge tier="Gold" tone="gold|silver|primary|neutral"></npt-tier-badge>
+ * A small premium membership pill.
+ */
+export class NptTierBadge extends NptElement {
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.update();
+    }
+    styles() {
+        return css `
+      :host {
+        display: inline-flex;
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--npt-space-1, 4px);
+        min-height: 24px;
+        padding-inline: var(--npt-space-3, 12px);
+        padding-block: 2px;
+        border-radius: var(--npt-corner-full, 999px);
+        font-family: var(--npt-font-display);
+        font-size: var(--npt-text-label, 14px);
+        line-height: var(--npt-leading-label, 20px);
+        font-weight: 700;
+        letter-spacing: 0.02em;
+        /* default / neutral tone */
+        background: var(--md-sys-color-surface-container-highest);
+        color: var(--md-sys-color-on-surface);
+        border: 1px solid var(--md-sys-color-outline-variant);
+        box-sizing: border-box;
+      }
+      :host([tone="primary"]) .badge {
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+        border-color: transparent;
+      }
+      :host([tone="gold"]) .badge {
+        background: var(--md-sys-color-tertiary-container);
+        color: var(--md-sys-color-on-tertiary-container);
+        border-color: transparent;
+      }
+      :host([tone="silver"]) .badge {
+        background: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+        border-color: transparent;
+      }
+      .dot {
+        inline-size: 6px;
+        block-size: 6px;
+        border-radius: var(--npt-corner-full, 999px);
+        background: currentColor;
+      }
+    `;
+    }
+    render() {
+        const tier = esc(this.getAttribute("tier"));
+        return html `<span class="badge" part="badge" role="status" aria-label="${tier} tier">
+      <span class="dot" aria-hidden="true"></span>${tier}
+    </span>`;
+    }
+}
+NptTierBadge.observedAttributes = ["tier", "tone"];
+//# sourceMappingURL=wallet-pay.js.map

package/dist/components/wallet-pay.js.map

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

package/dist/index.d.ts

@@ -11,8 +11,16 @@ export { NptProgress, NptSnackbar, NptTooltip, NptBanner } from "./components/fe
 export { NptDialog, NptBottomSheet, NptMenu, NptMenuItem } from "./components/containers.js";
 export { NptList, NptListItem, NptDivider, NptTabs, NptTab, NptAccordion, NptAccordionItem, NptAvatar, } from "./components/layout.js";
 export { NptNavRail, NptTopAppBar } from "./components/nav-rail.js";
+export { NptAmountInput, NptCurrencyField, NptIbanField, NptOtpInput, NptPinInput, NptAmountKeypad, } from "./components/money-inputs.js";
+export { NptCardArt, NptCardRow, NptAddCard, NptCardControls } from "./components/cards.js";
+export { NptStep, NptStepper, NptTransferReview, NptSuccess, NptReceipt, NptBeneficiaryTile, NptMethodRow, } from "./components/money-movement.js";
+export { NptDataTable, NptStatCard, NptSparkline, NptDonut, NptLimitMeter, NptTrend, } from "./components/data-viz.js";
+export { NptSkeleton, NptEmptyState, NptAlert, NptStatusChip, NptToast, NptToastHost, } from "./components/feedback-status.js";
+export { NptApprovalItem, NptBatchCard, NptAuditRow, NptUserRow, NptPermissionToggle, NptWorkflowStatus, } from "./components/corporate.js";
+export { NptAppShell, NptPageHeader, NptSection, NptSideNav, NptSideNavItem, NptSearchField, NptToolbar, } from "./components/shell-layout.js";
+export { NptQuickActions, NptQuickAction, NptMerchantRow, NptVoucherCard, NptQrPay, NptTopupRow, NptTierBadge, } from "./components/wallet-pay.js";
 export { registerAll } from "./register.js";
 export type { Brand, Mode, Direction, NeptuneTheme, ThemeInput, BrandprintConfig, } from "@neptune.fintech/tokens";
 export { buildTheme, encode, decode, brandprintFor } from "@neptune.fintech/tokens";
-export declare const WEB_UI_VERSION = "2.1.0";
+export declare const WEB_UI_VERSION = "2.2.0";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EACL,aAAa,EACb,MAAM,EACN,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,OAAO,EACP,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,SAAS,GACV,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,YAAY,EACV,KAAK,EACL,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,UAAU,EACV,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEpF,eAAO,MAAM,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EACL,aAAa,EACb,MAAM,EACN,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC7F,OAAO,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,OAAO,EACP,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,SAAS,GACV,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,eAAe,GAChB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC5F,OAAO,EACL,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,YAAY,GACb,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,QAAQ,GACT,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,WAAW,EACX,aAAa,EACb,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,GACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,eAAe,EACf,YAAY,EACZ,WAAW,EACX,UAAU,EACV,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,WAAW,EACX,aAAa,EACb,UAAU,EACV,UAAU,EACV,cAAc,EACd,cAAc,EACd,UAAU,GACX,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,eAAe,EACf,cAAc,EACd,cAAc,EACd,cAAc,EACd,QAAQ,EACR,WAAW,EACX,YAAY,GACb,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,YAAY,EACV,KAAK,EACL,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,UAAU,EACV,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEpF,eAAO,MAAM,cAAc,UAAU,CAAC"}