@reown/appkit-scaffold-ui 0.0.3

package/dist/esm/src/partials/w3m-swap-details/index.js

@@ -0,0 +1,217 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import styles from './styles.js';
+import { UiHelperUtil, customElement } from '@reown/appkit-ui';
+import { NumberUtil } from '@reown/appkit-common';
+import { ConstantsUtil, NetworkController, SwapController } from '@reown/appkit-core';
+const slippageRate = ConstantsUtil.CONVERT_SLIPPAGE_TOLERANCE;
+let WuiSwapDetails = class WuiSwapDetails extends LitElement {
+    constructor() {
+        super();
+        this.unsubscribe = [];
+        this.networkName = NetworkController.state.caipNetwork?.name;
+        this.detailsOpen = false;
+        this.sourceToken = SwapController.state.sourceToken;
+        this.toToken = SwapController.state.toToken;
+        this.toTokenAmount = SwapController.state.toTokenAmount;
+        this.sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;
+        this.toTokenPriceInUSD = SwapController.state.toTokenPriceInUSD;
+        this.gasPriceInUSD = SwapController.state.gasPriceInUSD;
+        this.priceImpact = SwapController.state.priceImpact;
+        this.maxSlippage = SwapController.state.maxSlippage;
+        this.networkTokenSymbol = SwapController.state.networkTokenSymbol;
+        this.inputError = SwapController.state.inputError;
+        this.unsubscribe.push(...[
+            SwapController.subscribe(newState => {
+                this.sourceToken = newState.sourceToken;
+                this.toToken = newState.toToken;
+                this.toTokenAmount = newState.toTokenAmount;
+                this.gasPriceInUSD = newState.gasPriceInUSD;
+                this.priceImpact = newState.priceImpact;
+                this.maxSlippage = newState.maxSlippage;
+                this.sourceTokenPriceInUSD = newState.sourceTokenPriceInUSD;
+                this.toTokenPriceInUSD = newState.toTokenPriceInUSD;
+                this.inputError = newState.inputError;
+            })
+        ]);
+    }
+    render() {
+        const minReceivedAmount = this.toTokenAmount && this.maxSlippage
+            ? NumberUtil.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString()
+            : null;
+        if (!this.sourceToken || !this.toToken || this.inputError) {
+            return null;
+        }
+        const toTokenSwappedAmount = this.sourceTokenPriceInUSD && this.toTokenPriceInUSD
+            ? (1 / this.toTokenPriceInUSD) * this.sourceTokenPriceInUSD
+            : 0;
+        return html `
+      <wui-flex flexDirection="column" alignItems="center" gap="1xs" class="details-container">
+        <wui-flex flexDirection="column">
+          <button @click=${this.toggleDetails.bind(this)}>
+            <wui-flex justifyContent="space-between" .padding=${['0', 'xs', '0', 'xs']}>
+              <wui-flex justifyContent="flex-start" flexGrow="1" gap="xs">
+                <wui-text variant="small-400" color="fg-100">
+                  1 ${this.sourceToken.symbol} =
+                  ${UiHelperUtil.formatNumberToLocalString(toTokenSwappedAmount, 3)}
+                  ${this.toToken.symbol}
+                </wui-text>
+                <wui-text variant="small-400" color="fg-200">
+                  $${UiHelperUtil.formatNumberToLocalString(this.sourceTokenPriceInUSD)}
+                </wui-text>
+              </wui-flex>
+              <wui-icon name="chevronBottom"></wui-icon>
+            </wui-flex>
+          </button>
+          ${this.detailsOpen
+            ? html `
+                <wui-flex flexDirection="column" gap="xs" class="details-content-container">
+                  <wui-flex flexDirection="column" gap="xs">
+                    <wui-flex
+                      justifyContent="space-between"
+                      alignItems="center"
+                      class="details-row"
+                    >
+                      <wui-flex alignItems="center" gap="xs">
+                        <wui-text class="details-row-title" variant="small-400" color="fg-150">
+                          Network cost
+                        </wui-text>
+                        <w3m-tooltip-trigger
+                          text=${`Network cost is paid in ${this.networkTokenSymbol} on the ${this.networkName} network in order to execute transaction.`}
+                        >
+                          <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon>
+                        </w3m-tooltip-trigger>
+                      </wui-flex>
+                      <wui-text variant="small-400" color="fg-100">
+                        $${UiHelperUtil.formatNumberToLocalString(this.gasPriceInUSD, 3)}
+                      </wui-text>
+                    </wui-flex>
+                  </wui-flex>
+                  ${this.priceImpact
+                ? html ` <wui-flex flexDirection="column" gap="xs">
+                        <wui-flex
+                          justifyContent="space-between"
+                          alignItems="center"
+                          class="details-row"
+                        >
+                          <wui-flex alignItems="center" gap="xs">
+                            <wui-text class="details-row-title" variant="small-400" color="fg-150">
+                              Price impact
+                            </wui-text>
+                            <w3m-tooltip-trigger
+                              text="Price impact reflects the change in market price due to your trade"
+                            >
+                              <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon>
+                            </w3m-tooltip-trigger>
+                          </wui-flex>
+                          <wui-flex>
+                            <wui-text variant="small-400" color="fg-200">
+                              ${UiHelperUtil.formatNumberToLocalString(this.priceImpact, 3)}%
+                            </wui-text>
+                          </wui-flex>
+                        </wui-flex>
+                      </wui-flex>`
+                : null}
+                  ${this.maxSlippage && this.sourceToken.symbol
+                ? html `<wui-flex flexDirection="column" gap="xs">
+                        <wui-flex
+                          justifyContent="space-between"
+                          alignItems="center"
+                          class="details-row"
+                        >
+                          <wui-flex alignItems="center" gap="xs">
+                            <wui-text class="details-row-title" variant="small-400" color="fg-150">
+                              Max. slippage
+                            </wui-text>
+                            <w3m-tooltip-trigger
+                              text=${`Max slippage sets the minimum amount you must receive for the transaction to proceed. ${minReceivedAmount
+                    ? `Transaction will be reversed if you receive less than ${UiHelperUtil.formatNumberToLocalString(minReceivedAmount, 6)} ${this.toToken.symbol} due to price changes.`
+                    : ''}`}
+                            >
+                              <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon>
+                            </w3m-tooltip-trigger>
+                          </wui-flex>
+                          <wui-flex>
+                            <wui-text variant="small-400" color="fg-200">
+                              ${UiHelperUtil.formatNumberToLocalString(this.maxSlippage, 6)}
+                              ${this.toToken.symbol} ${slippageRate}%
+                            </wui-text>
+                          </wui-flex>
+                        </wui-flex>
+                      </wui-flex>`
+                : null}
+                  <wui-flex flexDirection="column" gap="xs">
+                    <wui-flex
+                      justifyContent="space-between"
+                      alignItems="center"
+                      class="details-row provider-free-row"
+                    >
+                      <wui-flex alignItems="center" gap="xs">
+                        <wui-text class="details-row-title" variant="small-400" color="fg-150">
+                          Provider fee
+                        </wui-text>
+                      </wui-flex>
+                      <wui-flex>
+                        <wui-text variant="small-400" color="fg-200">0.85%</wui-text>
+                      </wui-flex>
+                    </wui-flex>
+                  </wui-flex>
+                </wui-flex>
+              `
+            : null}
+        </wui-flex>
+      </wui-flex>
+    `;
+    }
+    toggleDetails() {
+        this.detailsOpen = !this.detailsOpen;
+    }
+};
+WuiSwapDetails.styles = [styles];
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "networkName", void 0);
+__decorate([
+    property()
+], WuiSwapDetails.prototype, "detailsOpen", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "sourceToken", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "toToken", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "toTokenAmount", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "sourceTokenPriceInUSD", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "toTokenPriceInUSD", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "gasPriceInUSD", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "priceImpact", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "maxSlippage", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "networkTokenSymbol", void 0);
+__decorate([
+    state()
+], WuiSwapDetails.prototype, "inputError", void 0);
+WuiSwapDetails = __decorate([
+    customElement('w3m-swap-details')
+], WuiSwapDetails);
+export { WuiSwapDetails };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/partials/w3m-swap-details/index.js.map

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

package/dist/esm/src/partials/w3m-swap-details/styles.js

@@ -0,0 +1,50 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    width: 100%;
+  }
+
+  .details-container > wui-flex {
+    background: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-xxs);
+    width: 100%;
+  }
+
+  .details-container > wui-flex > button {
+    border: none;
+    background: none;
+    padding: var(--wui-spacing-s);
+    border-radius: var(--wui-border-radius-xxs);
+    cursor: pointer;
+  }
+
+  .details-content-container {
+    padding: var(--wui-spacing-1xs);
+    padding-top: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .details-content-container > wui-flex {
+    width: 100%;
+  }
+
+  .details-row {
+    width: 100%;
+    padding: var(--wui-spacing-s);
+    padding-left: var(--wui-spacing-s);
+    padding-right: var(--wui-spacing-1xs);
+    border-radius: calc(var(--wui-border-radius-5xs) + var(--wui-border-radius-4xs));
+    background: var(--wui-color-gray-glass-002);
+  }
+
+  .details-row-title {
+    white-space: nowrap;
+  }
+
+  .details-row.provider-free-row {
+    padding-right: var(--wui-spacing-xs);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/partials/w3m-swap-details/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/partials/w3m-swap-details/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CjB,CAAA"}

package/dist/esm/src/partials/w3m-swap-input/index.js

@@ -0,0 +1,181 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EventsController, RouterController } from '@reown/appkit-core';
+import { InputUtil, NumberUtil } from '@reown/appkit-common';
+import { UiHelperUtil, customElement } from '@reown/appkit-ui';
+import styles from './styles.js';
+const MINIMUM_USD_VALUE_TO_CONVERT = 0.00005;
+let W3mSwapInput = class W3mSwapInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.focused = false;
+        this.price = 0;
+        this.target = 'sourceToken';
+        this.onSetAmount = null;
+        this.onSetMaxValue = null;
+    }
+    render() {
+        const marketValue = this.marketValue || '0';
+        const isMarketValueGreaterThanZero = NumberUtil.bigNumber(marketValue).isGreaterThan('0');
+        return html `
+      <wui-flex class="${this.focused ? 'focus' : ''}" justifyContent="space-between">
+        <wui-flex
+          flex="1"
+          flexDirection="column"
+          alignItems="flex-start"
+          justifyContent="center"
+          class="swap-input"
+        >
+          <input
+            data-testid="swap-input-${this.target}"
+            @focusin=${() => this.onFocusChange(true)}
+            @focusout=${() => this.onFocusChange(false)}
+            ?disabled=${this.disabled}
+            .value=${this.value}
+            @input=${this.dispatchInputChangeEvent}
+            @keydown=${this.handleKeydown}
+            placeholder="0"
+            type="text"
+            inputmode="decimal"
+          />
+          <wui-text class="market-value" variant="small-400" color="fg-200">
+            ${isMarketValueGreaterThanZero
+            ? `$${UiHelperUtil.formatNumberToLocalString(this.marketValue, 3)}`
+            : null}
+          </wui-text>
+        </wui-flex>
+        ${this.templateTokenSelectButton()}
+      </wui-flex>
+    `;
+    }
+    handleKeydown(event) {
+        return InputUtil.numericInputKeyDown(event, this.value, (value) => this.onSetAmount?.(this.target, value));
+    }
+    dispatchInputChangeEvent(event) {
+        if (!this.onSetAmount) {
+            return;
+        }
+        const value = event.target.value.replace(/[^0-9.]/gu, '');
+        if (value === ',' || value === '.') {
+            this.onSetAmount(this.target, '0.');
+        }
+        else if (value.endsWith(',')) {
+            this.onSetAmount(this.target, value.replace(',', '.'));
+        }
+        else {
+            this.onSetAmount(this.target, value);
+        }
+    }
+    setMaxValueToInput() {
+        this.onSetMaxValue?.(this.target, this.balance);
+    }
+    templateTokenSelectButton() {
+        if (!this.token) {
+            return html ` <wui-button
+        data-testid="swap-select-token-button-${this.target}"
+        class="swap-token-button"
+        size="md"
+        variant="accent"
+        @click=${this.onSelectToken.bind(this)}
+      >
+        Select token
+      </wui-button>`;
+        }
+        return html `
+      <wui-flex
+        class="swap-token-button"
+        flexDirection="column"
+        alignItems="flex-end"
+        justifyContent="center"
+        gap="xxs"
+      >
+        <wui-token-button
+          data-testid="swap-input-token-${this.target}"
+          text=${this.token.symbol}
+          imageSrc=${this.token.logoUri}
+          @click=${this.onSelectToken.bind(this)}
+        >
+        </wui-token-button>
+        <wui-flex alignItems="center" gap="xxs"> ${this.tokenBalanceTemplate()} </wui-flex>
+      </wui-flex>
+    `;
+    }
+    tokenBalanceTemplate() {
+        const balanceValueInUSD = NumberUtil.multiply(this.balance, this.price);
+        const haveBalance = balanceValueInUSD
+            ? balanceValueInUSD?.isGreaterThan(MINIMUM_USD_VALUE_TO_CONVERT)
+            : false;
+        return html `
+      ${haveBalance
+            ? html `<wui-text variant="small-400" color="fg-200">
+            ${UiHelperUtil.formatNumberToLocalString(this.balance, 3)}
+          </wui-text>`
+            : null}
+      ${this.target === 'sourceToken' ? this.tokenActionButtonTemplate(haveBalance) : null}
+    `;
+    }
+    tokenActionButtonTemplate(haveBalance) {
+        if (haveBalance) {
+            return html ` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}>
+        <wui-text color="accent-100" variant="small-600">Max</wui-text>
+      </button>`;
+        }
+        return html ` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}>
+      <wui-text color="accent-100" variant="small-600">Buy</wui-text>
+    </button>`;
+    }
+    onFocusChange(state) {
+        this.focused = state;
+    }
+    onSelectToken() {
+        EventsController.sendEvent({ type: 'track', event: 'CLICK_SELECT_TOKEN_TO_SWAP' });
+        RouterController.push('SwapSelectToken', {
+            target: this.target
+        });
+    }
+    onBuyToken() {
+        RouterController.push('OnRampProviders');
+    }
+};
+W3mSwapInput.styles = [styles];
+__decorate([
+    property()
+], W3mSwapInput.prototype, "focused", void 0);
+__decorate([
+    property()
+], W3mSwapInput.prototype, "balance", void 0);
+__decorate([
+    property()
+], W3mSwapInput.prototype, "value", void 0);
+__decorate([
+    property()
+], W3mSwapInput.prototype, "price", void 0);
+__decorate([
+    property()
+], W3mSwapInput.prototype, "marketValue", void 0);
+__decorate([
+    property()
+], W3mSwapInput.prototype, "disabled", void 0);
+__decorate([
+    property()
+], W3mSwapInput.prototype, "target", void 0);
+__decorate([
+    property()
+], W3mSwapInput.prototype, "token", void 0);
+__decorate([
+    property()
+], W3mSwapInput.prototype, "onSetAmount", void 0);
+__decorate([
+    property()
+], W3mSwapInput.prototype, "onSetMaxValue", void 0);
+W3mSwapInput = __decorate([
+    customElement('w3m-swap-input')
+], W3mSwapInput);
+export { W3mSwapInput };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/partials/w3m-swap-input/index.js.map

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

package/dist/esm/src/partials/w3m-swap-input/styles.js

@@ -0,0 +1,89 @@
+import { css } from 'lit';
+export default css `
+  :host > wui-flex {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: var(--wui-border-radius-s);
+    background-color: var(--wui-color-gray-glass-002);
+    padding: var(--wui-spacing-xl);
+    padding-right: var(--wui-spacing-s);
+    width: 100%;
+    height: 100px;
+    box-sizing: border-box;
+    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);
+    position: relative;
+    transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    will-change: background-color;
+  }
+
+  :host wui-flex.focus {
+    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-005);
+  }
+
+  :host > wui-flex .swap-input,
+  :host > wui-flex .swap-token-button {
+    z-index: 10;
+  }
+
+  :host > wui-flex .swap-input {
+    -webkit-mask-image: linear-gradient(
+      270deg,
+      transparent 0px,
+      transparent 8px,
+      black 24px,
+      black 25px,
+      black 32px,
+      black 100%
+    );
+    mask-image: linear-gradient(
+      270deg,
+      transparent 0px,
+      transparent 8px,
+      black 24px,
+      black 25px,
+      black 32px,
+      black 100%
+    );
+  }
+
+  :host > wui-flex .swap-input input {
+    background: none;
+    border: none;
+    height: 42px;
+    width: 100%;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 130%;
+    letter-spacing: -1.28px;
+    outline: none;
+    caret-color: var(--wui-color-accent-100);
+    color: var(--wui-color-fg-100);
+    padding: 0px;
+  }
+
+  :host > wui-flex .swap-input input:focus-visible {
+    outline: none;
+  }
+
+  :host > wui-flex .swap-input input::-webkit-outer-spin-button,
+  :host > wui-flex .swap-input input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .max-value-button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--wui-color-gray-glass-020);
+    padding-left: 0px;
+  }
+
+  .market-value {
+    min-height: 18px;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/partials/w3m-swap-input/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/partials/w3m-swap-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFjB,CAAA"}

package/dist/esm/src/partials/w3m-swap-input-skeleton/index.js

@@ -0,0 +1,56 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import {} from '@reown/appkit-core';
+import { customElement } from '@reown/appkit-ui';
+import styles from './styles.js';
+let W3mSwapInputSkeleton = class W3mSwapInputSkeleton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.target = 'sourceToken';
+    }
+    render() {
+        return html `
+      <wui-flex class justifyContent="space-between">
+        <wui-flex
+          flex="1"
+          flexDirection="column"
+          alignItems="flex-start"
+          justifyContent="center"
+          class="swap-input"
+          gap="xxs"
+        >
+          <wui-shimmer width="80px" height="40px" borderRadius="xxs" variant="light"></wui-shimmer>
+        </wui-flex>
+        ${this.templateTokenSelectButton()}
+      </wui-flex>
+    `;
+    }
+    templateTokenSelectButton() {
+        return html `
+      <wui-flex
+        class="swap-token-button"
+        flexDirection="column"
+        alignItems="flex-end"
+        justifyContent="center"
+        gap="xxs"
+      >
+        <wui-shimmer width="80px" height="40px" borderRadius="3xl" variant="light"></wui-shimmer>
+      </wui-flex>
+    `;
+    }
+};
+W3mSwapInputSkeleton.styles = [styles];
+__decorate([
+    property()
+], W3mSwapInputSkeleton.prototype, "target", void 0);
+W3mSwapInputSkeleton = __decorate([
+    customElement('w3m-swap-input-skeleton')
+], W3mSwapInputSkeleton);
+export { W3mSwapInputSkeleton };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/partials/w3m-swap-input-skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/partials/w3m-swap-input-skeleton/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAwB,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAIc,WAAM,GAAoB,aAAa,CAAA;IAmC5D,CAAC;IAhCiB,MAAM;QACpB,OAAO,IAAI,CAAA;;;;;;;;;;;;UAYL,IAAI,CAAC,yBAAyB,EAAE;;KAErC,CAAA;IACH,CAAC;IAGO,yBAAyB;QAC/B,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAA;IACH,CAAC;;AArCsB,2BAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAW;AAGrB;IAAlB,QAAQ,EAAE;oDAA+C;AAJ/C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAuChC"}

package/dist/esm/src/partials/w3m-swap-input-skeleton/styles.js

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    width: 100%;
+  }
+
+  :host > wui-flex {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: var(--wui-border-radius-s);
+    padding: var(--wui-spacing-xl);
+    padding-right: var(--wui-spacing-s);
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);
+    width: 100%;
+    height: 100px;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  wui-shimmer.market-value {
+    opacity: 0;
+  }
+
+  :host > wui-flex > svg.input_mask {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+  }
+
+  :host wui-flex .input_mask__border,
+  :host wui-flex .input_mask__background {
+    transition: fill var(--wui-duration-md) var(--wui-ease-out-power-1);
+    will-change: fill;
+  }
+
+  :host wui-flex .input_mask__border {
+    fill: var(--wui-color-gray-glass-020);
+  }
+
+  :host wui-flex .input_mask__background {
+    fill: var(--wui-color-gray-glass-002);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/partials/w3m-swap-input-skeleton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/partials/w3m-swap-input-skeleton/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CjB,CAAA"}