@reown/appkit-ui 0.0.3

package/dist/esm/src/composites/wui-chip/styles.js

@@ -0,0 +1,184 @@
+import { css } from 'lit';
+export default css `
+  a {
+    border: 1px solid var(--wui-color-gray-glass-010);
+    border-radius: var(--wui-border-radius-3xl);
+  }
+
+  wui-image {
+    border-radius: var(--wui-border-radius-3xl);
+    overflow: hidden;
+  }
+
+  a.disabled > wui-icon,
+  a.disabled > wui-image {
+    filter: grayscale(1);
+  }
+
+  a[data-variant='fill'] {
+    color: var(--wui-color-inverse-100);
+    background-color: var(--wui-color-accent-100);
+  }
+
+  a[data-variant='shade'],
+  a[data-variant='shadeSmall'] {
+    background-color: transparent;
+    background-color: var(--wui-color-gray-glass-010);
+    color: var(--wui-color-fg-200);
+  }
+
+  a[data-variant='success'] {
+    column-gap: var(--wui-spacing-xxs);
+    border: 1px solid var(--wui-color-success-glass-010);
+    background-color: var(--wui-color-success-glass-010);
+    color: var(--wui-color-success-100);
+  }
+
+  a[data-variant='error'] {
+    column-gap: var(--wui-spacing-xxs);
+    border: 1px solid var(--wui-color-error-glass-010);
+    background-color: var(--wui-color-error-glass-010);
+    color: var(--wui-color-error-100);
+  }
+
+  a[data-variant='transparent'] {
+    column-gap: var(--wui-spacing-xxs);
+    background-color: transparent;
+    color: var(--wui-color-fg-150);
+  }
+
+  a[data-variant='transparent'],
+  a[data-variant='success'],
+  a[data-variant='shadeSmall'],
+  a[data-variant='error'] {
+    padding: 7px var(--wui-spacing-s) 7px 10px;
+  }
+
+  a[data-variant='transparent']:has(wui-text:first-child),
+  a[data-variant='success']:has(wui-text:first-child),
+  a[data-variant='shadeSmall']:has(wui-text:first-child),
+  a[data-variant='error']:has(wui-text:first-child) {
+    padding: 7px var(--wui-spacing-s);
+  }
+
+  a[data-variant='fill'],
+  a[data-variant='shade'] {
+    column-gap: var(--wui-spacing-xs);
+    padding: var(--wui-spacing-xxs) var(--wui-spacing-m) var(--wui-spacing-xxs)
+      var(--wui-spacing-xs);
+  }
+
+  a[data-variant='fill']:has(wui-text:first-child),
+  a[data-variant='shade']:has(wui-text:first-child) {
+    padding: 9px var(--wui-spacing-m) 9px var(--wui-spacing-m);
+  }
+
+  a[data-variant='fill'] > wui-image,
+  a[data-variant='shade'] > wui-image {
+    width: 24px;
+    height: 24px;
+  }
+
+  a[data-variant='fill'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
+  }
+
+  a[data-variant='shade'] > wui-image,
+  a[data-variant='shadeSmall'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  a[data-variant='fill'] > wui-icon,
+  a[data-variant='shade'] > wui-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  a[data-variant='transparent'] > wui-image,
+  a[data-variant='success'] > wui-image,
+  a[data-variant='shadeSmall'] > wui-image,
+  a[data-variant='error'] > wui-image {
+    width: 14px;
+    height: 14px;
+  }
+
+  a[data-variant='transparent'] > wui-icon,
+  a[data-variant='success'] > wui-icon,
+  a[data-variant='shadeSmall'] > wui-icon,
+  a[data-variant='error'] > wui-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  a[data-variant='fill']:focus-visible {
+    background-color: var(--wui-color-accent-090);
+  }
+
+  a[data-variant='shade']:focus-visible,
+  a[data-variant='shadeSmall']:focus-visible {
+    background-color: var(--wui-color-gray-glass-015);
+  }
+
+  a[data-variant='transparent']:focus-visible {
+    background-color: var(--wui-color-gray-glass-005);
+  }
+
+  a[data-variant='success']:focus-visible {
+    background-color: var(--wui-color-success-glass-015);
+  }
+
+  a[data-variant='error']:focus-visible {
+    background-color: var(--wui-color-error-glass-015);
+  }
+
+  a.disabled {
+    color: var(--wui-color-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
+    pointer-events: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    a[data-variant='fill']:hover {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    a[data-variant='shade']:hover,
+    a[data-variant='shadeSmall']:hover {
+      background-color: var(--wui-color-gray-glass-015);
+    }
+
+    a[data-variant='transparent']:hover {
+      background-color: var(--wui-color-gray-glass-005);
+    }
+
+    a[data-variant='success']:hover {
+      background-color: var(--wui-color-success-glass-015);
+    }
+
+    a[data-variant='error']:hover {
+      background-color: var(--wui-color-error-glass-015);
+    }
+  }
+
+  a[data-variant='fill']:active {
+    background-color: var(--wui-color-accent-080);
+  }
+
+  a[data-variant='shade']:active,
+  a[data-variant='shadeSmall']:active {
+    background-color: var(--wui-color-gray-glass-020);
+  }
+
+  a[data-variant='transparent']:active {
+    background-color: var(--wui-color-gray-glass-010);
+  }
+
+  a[data-variant='success']:active {
+    background-color: var(--wui-color-success-glass-020);
+  }
+
+  a[data-variant='error']:active {
+    background-color: var(--wui-color-error-glass-020);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-chip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-chip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLjB,CAAA"}

package/dist/esm/src/composites/wui-chip-button/index.js

@@ -0,0 +1,63 @@
+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 '../../components/wui-icon/index.js';
+import '../../components/wui-image/index.js';
+import '../../components/wui-text/index.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+let WuiChipButton = class WuiChipButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'accent';
+        this.imageSrc = '';
+        this.disabled = false;
+        this.icon = 'externalLink';
+        this.size = 'md';
+        this.text = '';
+    }
+    render() {
+        const textVariant = this.size === 'sm' ? 'small-600' : 'paragraph-600';
+        return html `
+      <button
+        class=${this.disabled ? 'disabled' : ''}
+        data-variant=${this.variant}
+        data-size=${this.size}
+      >
+        ${this.imageSrc ? html `<wui-image src=${this.imageSrc}></wui-image>` : null}
+        <wui-text variant=${textVariant} color="inherit"> ${this.text} </wui-text>
+        <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
+      </button>
+    `;
+    }
+};
+WuiChipButton.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property()
+], WuiChipButton.prototype, "variant", void 0);
+__decorate([
+    property()
+], WuiChipButton.prototype, "imageSrc", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiChipButton.prototype, "disabled", void 0);
+__decorate([
+    property()
+], WuiChipButton.prototype, "icon", void 0);
+__decorate([
+    property()
+], WuiChipButton.prototype, "size", void 0);
+__decorate([
+    property()
+], WuiChipButton.prototype, "text", void 0);
+WuiChipButton = __decorate([
+    customElement('wui-chip-button')
+], WuiChipButton);
+export { WuiChipButton };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-chip-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-chip-button/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAIc,YAAO,GAAsB,QAAQ,CAAA;QAErC,aAAQ,GAAG,EAAE,CAAA;QAEI,aAAQ,GAAG,KAAK,CAAA;QAEjC,SAAI,GAAa,cAAc,CAAA;QAE/B,SAAI,GAAgB,IAAI,CAAA;QAExB,SAAI,GAAG,EAAE,CAAA;IAkB9B,CAAC;IAfiB,MAAM;QACpB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,CAAA;QAEtE,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;uBACxB,IAAI,CAAC,OAAO;oBACf,IAAI,CAAC,IAAI;;UAEnB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,kBAAkB,IAAI,CAAC,QAAQ,eAAe,CAAC,CAAC,CAAC,IAAI;4BACvD,WAAW,qBAAqB,IAAI,CAAC,IAAI;yBAC5C,IAAI,CAAC,IAAI;;KAE7B,CAAA;IACH,CAAC;;AA9BsB,oBAAM,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,AAAvC,CAAuC;AAGjD;IAAlB,QAAQ,EAAE;8CAA6C;AAErC;IAAlB,QAAQ,EAAE;+CAAqB;AAEI;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAwB;AAEjC;IAAlB,QAAQ,EAAE;2CAAuC;AAE/B;IAAlB,QAAQ,EAAE;2CAAgC;AAExB;IAAlB,QAAQ,EAAE;2CAAiB;AAdjB,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAgCzB"}

package/dist/esm/src/composites/wui-chip-button/styles.js

@@ -0,0 +1,122 @@
+import { css } from 'lit';
+export default css `
+  button {
+    border: none;
+    border-radius: var(--wui-border-radius-3xl);
+  }
+
+  button[data-variant='main'] {
+    background-color: var(--wui-color-accent-100);
+    color: var(--wui-color-inverse-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='accent'] {
+    background-color: var(--wui-color-accent-glass-010);
+    color: var(--wui-color-accent-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  button[data-variant='gray'] {
+    background-color: transparent;
+    color: var(--wui-color-fg-200);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='shade'] {
+    background-color: transparent;
+    color: var(--wui-color-accent-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-size='sm'] {
+    height: 32px;
+    padding: 0 var(--wui-spacing-s);
+  }
+
+  button[data-size='md'] {
+    height: 40px;
+    padding: 0 var(--wui-spacing-l);
+  }
+
+  button[data-size='sm'] > wui-image {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='md'] > wui-image {
+    width: 24px;
+    height: 24px;
+  }
+
+  button[data-size='sm'] > wui-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  button[data-size='md'] > wui-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  wui-image {
+    border-radius: var(--wui-border-radius-3xl);
+    overflow: hidden;
+  }
+
+  button.disabled > wui-icon,
+  button.disabled > wui-image {
+    filter: grayscale(1);
+  }
+
+  button[data-variant='main'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
+  }
+
+  button[data-variant='shade'] > wui-image,
+  button[data-variant='gray'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    button[data-variant='main']:focus-visible {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:hover:enabled {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:active:enabled {
+      background-color: var(--wui-color-accent-080);
+    }
+
+    button[data-variant='accent']:hover:enabled {
+      background-color: var(--wui-color-accent-glass-015);
+    }
+
+    button[data-variant='accent']:active:enabled {
+      background-color: var(--wui-color-accent-glass-020);
+    }
+
+    button[data-variant='shade']:focus-visible,
+    button[data-variant='gray']:focus-visible,
+    button[data-variant='shade']:hover,
+    button[data-variant='gray']:hover {
+      background-color: var(--wui-color-gray-glass-002);
+    }
+
+    button[data-variant='gray']:active,
+    button[data-variant='shade']:active {
+      background-color: var(--wui-color-gray-glass-005);
+    }
+  }
+
+  button.disabled {
+    color: var(--wui-color-gray-glass-020);
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    pointer-events: none;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-chip-button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-chip-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHjB,CAAA"}

package/dist/esm/src/composites/wui-compatible-network/index.js

@@ -0,0 +1,51 @@
+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 '../../components/wui-icon/index.js';
+import '../../components/wui-text/index.js';
+import '../../components/wui-image/index.js';
+import '../../layout/wui-flex/index.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+let WuiCompatibleNetwork = class WuiCompatibleNetwork extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.networkImages = [''];
+        this.text = '';
+    }
+    render() {
+        return html `
+      <button ontouchstart>
+        <wui-text variant="small-400" color="fg-200">${this.text}</wui-text>
+        <wui-flex gap="3xs" alignItems="center">
+          ${this.networksTemplate()}
+          <wui-icon name="chevronRight" size="sm" color="fg-200"></wui-icon>
+        </wui-flex>
+      </button>
+    `;
+    }
+    networksTemplate() {
+        const slicedNetworks = this.networkImages.slice(0, 5);
+        return html ` <wui-flex class="networks">
+      ${slicedNetworks?.map(network => html ` <wui-flex class="network-icon"> <wui-image src=${network}></wui-image> </wui-flex>`)}
+    </wui-flex>`;
+    }
+};
+WuiCompatibleNetwork.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property({ type: Array })
+], WuiCompatibleNetwork.prototype, "networkImages", void 0);
+__decorate([
+    property()
+], WuiCompatibleNetwork.prototype, "text", void 0);
+WuiCompatibleNetwork = __decorate([
+    customElement('wui-compatible-network')
+], WuiCompatibleNetwork);
+export { WuiCompatibleNetwork };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-compatible-network/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-compatible-network/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,qCAAqC,CAAA;AAC5C,OAAO,gCAAgC,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QAIsB,kBAAa,GAAa,CAAC,EAAE,CAAC,CAAA;QAEtC,SAAI,GAAG,EAAE,CAAA;IA0B9B,CAAC;IAvBiB,MAAM;QACpB,OAAO,IAAI,CAAA;;uDAEwC,IAAI,CAAC,IAAI;;YAEpD,IAAI,CAAC,gBAAgB,EAAE;;;;KAI9B,CAAA;IACH,CAAC;IAGO,gBAAgB;QACtB,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAErD,OAAO,IAAI,CAAA;QACP,cAAc,EAAE,GAAG,CACnB,OAAO,CAAC,EAAE,CACR,IAAI,CAAA,mDAAmD,OAAO,2BAA2B,CAC5F;gBACS,CAAA;IACd,CAAC;;AA9BsB,2BAAM,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,AAAvC,CAAuC;AAGzC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2DAA+B;AAEtC;IAAlB,QAAQ,EAAE;kDAAiB;AANjB,oBAAoB;IADhC,aAAa,CAAC,wBAAwB,CAAC;GAC3B,oBAAoB,CAgChC"}

package/dist/esm/src/composites/wui-compatible-network/styles.js

@@ -0,0 +1,30 @@
+import { css } from 'lit';
+export default css `
+  button {
+    display: flex;
+    gap: var(--wui-spacing-xl);
+    width: 100%;
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-xxs);
+    padding: var(--wui-spacing-m) var(--wui-spacing-s);
+  }
+
+  wui-text {
+    width: 100%;
+  }
+
+  wui-flex {
+    width: auto;
+  }
+
+  .network-icon {
+    width: var(--wui-spacing-2l);
+    height: var(--wui-spacing-2l);
+    border-radius: calc(var(--wui-spacing-2l) / 2);
+    overflow: hidden;
+    box-shadow:
+      0 0 0 3px var(--wui-color-gray-glass-002),
+      0 0 0 3px var(--wui-color-modal-bg);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-compatible-network/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-compatible-network/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BjB,CAAA"}

package/dist/esm/src/composites/wui-connect-button/index.js

@@ -0,0 +1,50 @@
+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 '../../components/wui-icon/index.js';
+import '../../components/wui-loading-spinner/index.js';
+import '../../components/wui-text/index.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+let WuiConnectButton = class WuiConnectButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = 'md';
+        this.loading = false;
+    }
+    render() {
+        const textVariant = this.size === 'md' ? 'paragraph-600' : 'small-600';
+        return html `
+      <button data-size=${this.size} ?disabled=${this.loading} ontouchstart>
+        ${this.loadingTemplate()}
+        <wui-text variant=${textVariant} color=${this.loading ? 'accent-100' : 'inherit'}>
+          <slot></slot>
+        </wui-text>
+      </button>
+    `;
+    }
+    loadingTemplate() {
+        if (!this.loading) {
+            return null;
+        }
+        return html `<wui-loading-spinner size=${this.size} color="accent-100"></wui-loading-spinner>`;
+    }
+};
+WuiConnectButton.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property()
+], WuiConnectButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiConnectButton.prototype, "loading", void 0);
+WuiConnectButton = __decorate([
+    customElement('wui-connect-button')
+], WuiConnectButton);
+export { WuiConnectButton };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-connect-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-connect-button/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,+CAA+C,CAAA;AACtD,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAIc,SAAI,GAA8D,IAAI,CAAA;QAErD,YAAO,GAAG,KAAK,CAAA;IAuBrD,CAAC;IApBiB,MAAM;QACpB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAA;QAEtE,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO;UACnD,IAAI,CAAC,eAAe,EAAE;4BACJ,WAAW,UAAU,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;;;;KAInF,CAAA;IACH,CAAC;IAEM,eAAe;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA;QACb,CAAC;QAED,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,IAAI,4CAA4C,CAAA;IAC/F,CAAC;;AA3BsB,uBAAM,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,AAAvC,CAAuC;AAGjD;IAAlB,QAAQ,EAAE;8CAA8E;AAErD;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAuB;AANxC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA6B5B"}

package/dist/esm/src/composites/wui-connect-button/styles.js

@@ -0,0 +1,99 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    position: relative;
+    display: block;
+  }
+
+  button {
+    background: var(--wui-color-accent-100);
+    border: 1px solid var(--wui-color-gray-glass-010);
+    border-radius: var(--wui-border-radius-m);
+    gap: var(--wui-spacing-xs);
+  }
+
+  button.loading {
+    background: var(--wui-color-gray-glass-010);
+    border: 1px solid var(--wui-color-gray-glass-010);
+    pointer-events: none;
+  }
+
+  button:disabled {
+    background-color: var(--wui-color-gray-glass-015);
+    border: 1px solid var(--wui-color-gray-glass-010);
+  }
+
+  button:disabled > wui-text {
+    color: var(--wui-color-gray-glass-015);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    button:hover:enabled {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button:active:enabled {
+      background-color: var(--wui-color-accent-080);
+    }
+  }
+
+  button:focus-visible {
+    border: 1px solid var(--wui-color-gray-glass-010);
+    background-color: var(--wui-color-accent-090);
+    -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
+    -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
+    box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
+  }
+
+  button[data-size='sm'] {
+    padding: 6.75px 10px 7.25px;
+  }
+
+  ::slotted(*) {
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
+    opacity: var(--local-opacity-100);
+  }
+
+  button > wui-text {
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: opacity;
+    opacity: var(--local-opacity-100);
+    color: var(--wui-color-inverse-100);
+  }
+
+  button[data-size='md'] {
+    padding: 9px var(--wui-spacing-l) 9px var(--wui-spacing-l);
+  }
+
+  button[data-size='md'] + wui-text {
+    padding-left: var(--wui-spacing-3xs);
+  }
+
+  @media (max-width: 500px) {
+    button[data-size='md'] {
+      height: 32px;
+      padding: 5px 12px;
+    }
+
+    button[data-size='md'] > wui-text > slot {
+      font-size: 14px !important;
+    }
+  }
+
+  wui-loading-spinner {
+    width: 14px;
+    height: 14px;
+  }
+
+  wui-loading-spinner::slotted(svg) {
+    width: 10px !important;
+    height: 10px !important;
+  }
+
+  button[data-size='sm'] > wui-loading-spinner {
+    width: 12px;
+    height: 12px;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-connect-button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-connect-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGjB,CAAA"}

package/dist/esm/src/composites/wui-cta-button/index.js

@@ -0,0 +1,51 @@
+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 '../../components/wui-icon/index.js';
+import '../../components/wui-text/index.js';
+import '../../composites/wui-button/index.js';
+import '../../layout/wui-flex/index.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+let WuiCtaButton = class WuiCtaButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.label = '';
+        this.buttonLabel = '';
+    }
+    render() {
+        return html `
+      <wui-flex
+        justifyContent="space-between"
+        alignItems="center"
+        .padding=${['1xs', '2l', '1xs', '2l']}
+      >
+        <wui-text variant="paragraph-500" color="fg-200">${this.label}</wui-text>
+        <wui-chip-button size="sm" variant="shade" text=${this.buttonLabel} icon="chevronRight">
+        </wui-chip-button>
+      </wui-flex>
+    `;
+    }
+};
+WuiCtaButton.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property({ type: Boolean })
+], WuiCtaButton.prototype, "disabled", void 0);
+__decorate([
+    property()
+], WuiCtaButton.prototype, "label", void 0);
+__decorate([
+    property()
+], WuiCtaButton.prototype, "buttonLabel", void 0);
+WuiCtaButton = __decorate([
+    customElement('wui-cta-button')
+], WuiCtaButton);
+export { WuiCtaButton };
+//# sourceMappingURL=index.js.map