@reown/appkit-ui 1.8.15-viem-upgrade.0 → 1.8.15-wc-linking-reset-headless.0

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

@@ -0,0 +1,84 @@
+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 { LitElement, html } 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';
+const TEXT_VARIANT_BY_SIZE = {
+    lg: 'lg-regular-mono',
+    md: 'md-regular-mono',
+    sm: 'sm-regular-mono'
+};
+const SPINNER_SIZE_BY_SIZE = {
+    lg: 'md',
+    md: 'md',
+    sm: 'sm'
+};
+let WuiButton = class WuiButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = 'lg';
+        this.disabled = false;
+        this.fullWidth = false;
+        this.loading = false;
+        this.variant = 'accent-primary';
+    }
+    render() {
+        this.style.cssText = `
+    --local-width: ${this.fullWidth ? '100%' : 'auto'};
+     `;
+        const textVariant = this.textVariant ?? TEXT_VARIANT_BY_SIZE[this.size];
+        return html `
+      <button data-variant=${this.variant} data-size=${this.size} ?disabled=${this.disabled}>
+        ${this.loadingTemplate()}
+        <slot name="iconLeft"></slot>
+        <wui-text variant=${textVariant} color="inherit">
+          <slot></slot>
+        </wui-text>
+        <slot name="iconRight"></slot>
+      </button>
+    `;
+    }
+    loadingTemplate() {
+        if (this.loading) {
+            const size = SPINNER_SIZE_BY_SIZE[this.size];
+            const color = this.variant === 'neutral-primary' || this.variant === 'accent-primary'
+                ? 'invert'
+                : 'primary';
+            return html `<wui-loading-spinner color=${color} size=${size}></wui-loading-spinner>`;
+        }
+        return null;
+    }
+};
+WuiButton.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property()
+], WuiButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiButton.prototype, "fullWidth", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiButton.prototype, "loading", void 0);
+__decorate([
+    property()
+], WuiButton.prototype, "variant", void 0);
+__decorate([
+    property()
+], WuiButton.prototype, "textVariant", void 0);
+WuiButton = __decorate([
+    customElement('wui-button')
+], WuiButton);
+export { WuiButton };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-button/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,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;AAIhC,MAAM,oBAAoB,GAAG;IAC3B,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,iBAAiB;IACrB,EAAE,EAAE,iBAAiB;CACtB,CAAA;AAED,MAAM,oBAAoB,GAAG;IAC3B,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACT,CAAA;AAIM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAKc,SAAI,GAAe,IAAI,CAAA;QAEN,aAAQ,GAAG,KAAK,CAAA;QAEhB,cAAS,GAAG,KAAK,CAAA;QAEjB,YAAO,GAAG,KAAK,CAAA;QAEhC,YAAO,GAAkB,gBAAgB,CAAA;IAqC9D,CAAC;IAhCiB,MAAM;QACpB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG;qBACJ,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MAC/C,CAAA;QAEF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAK,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAc,CAAA;QAErF,OAAO,IAAI,CAAA;6BACc,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,QAAQ;UACjF,IAAI,CAAC,eAAe,EAAE;;4BAEJ,WAAW;;;;;KAKlC,CAAA;IACH,CAAC;IAEM,eAAe;QACpB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,IAAI,GAAG,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YAC5C,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,KAAK,iBAAiB,IAAI,IAAI,CAAC,OAAO,KAAK,gBAAgB;gBACrE,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,SAAS,CAAA;YAEf,OAAO,IAAI,CAAA,8BAA8B,KAAK,SAAS,IAAI,yBAAyB,CAAA;QACtF,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC;;AAhDsB,gBAAM,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,AAAvC,CAAuC;AAIjD;IAAlB,QAAQ,EAAE;uCAA+B;AAEN;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAwB;AAEhB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAyB;AAEjB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAuB;AAEhC;IAAlB,QAAQ,EAAE;0CAAiD;AAEzC;IAAlB,QAAQ,EAAE;8CAA8B;AAf9B,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAkDrB"}

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

@@ -0,0 +1,143 @@
+import { css } from '../../utils/ThemeHelperUtil.js';
+export default css `
+  :host {
+    width: var(--local-width);
+  }
+
+  button {
+    width: var(--local-width);
+    white-space: nowrap;
+    column-gap: ${({ spacing }) => spacing[2]};
+    transition:
+      scale ${({ durations }) => durations['lg']} ${({ easings }) => easings['ease-out-power-1']},
+      background-color ${({ durations }) => durations['lg']}
+        ${({ easings }) => easings['ease-out-power-2']},
+      border-radius ${({ durations }) => durations['lg']}
+        ${({ easings }) => easings['ease-out-power-1']};
+    will-change: scale, background-color, border-radius;
+    cursor: pointer;
+  }
+
+  /* -- Sizes --------------------------------------------------- */
+  button[data-size='sm'] {
+    border-radius: ${({ borderRadius }) => borderRadius[2]};
+    padding: 0 ${({ spacing }) => spacing[2]};
+    height: 28px;
+  }
+
+  button[data-size='md'] {
+    border-radius: ${({ borderRadius }) => borderRadius[3]};
+    padding: 0 ${({ spacing }) => spacing[4]};
+    height: 38px;
+  }
+
+  button[data-size='lg'] {
+    border-radius: ${({ borderRadius }) => borderRadius[4]};
+    padding: 0 ${({ spacing }) => spacing[5]};
+    height: 48px;
+  }
+
+  /* -- Variants --------------------------------------------------------- */
+  button[data-variant='accent-primary'] {
+    background-color: ${({ tokens }) => tokens.core.backgroundAccentPrimary};
+    color: ${({ tokens }) => tokens.theme.textInvert};
+  }
+
+  button[data-variant='accent-secondary'] {
+    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
+    color: ${({ tokens }) => tokens.core.textAccentPrimary};
+  }
+
+  button[data-variant='neutral-primary'] {
+    background-color: ${({ tokens }) => tokens.theme.backgroundInvert};
+    color: ${({ tokens }) => tokens.theme.textInvert};
+  }
+
+  button[data-variant='neutral-secondary'] {
+    background-color: transparent;
+    border: 1px solid ${({ tokens }) => tokens.theme.borderSecondary};
+    color: ${({ tokens }) => tokens.theme.textPrimary};
+  }
+
+  button[data-variant='neutral-tertiary'] {
+    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
+    color: ${({ tokens }) => tokens.theme.textPrimary};
+  }
+
+  button[data-variant='error-primary'] {
+    background-color: ${({ tokens }) => tokens.core.textError};
+    color: ${({ tokens }) => tokens.theme.textInvert};
+  }
+
+  button[data-variant='error-secondary'] {
+    background-color: ${({ tokens }) => tokens.core.backgroundError};
+    color: ${({ tokens }) => tokens.core.textError};
+  }
+
+  button[data-variant='shade'] {
+    background: var(--wui-color-gray-glass-002);
+    color: var(--wui-color-fg-200);
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  /* -- Focus states --------------------------------------------------- */
+  button[data-size='sm']:focus-visible:enabled {
+    border-radius: 28px;
+  }
+
+  button[data-size='md']:focus-visible:enabled {
+    border-radius: 38px;
+  }
+
+  button[data-size='lg']:focus-visible:enabled {
+    border-radius: 48px;
+  }
+  button[data-variant='shade']:focus-visible:enabled {
+    background: var(--wui-color-gray-glass-005);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-gray-glass-010),
+      0 0 0 4px var(--wui-color-gray-glass-002);
+  }
+
+  /* -- Hover & Active states ----------------------------------------------------------- */
+  @media (hover: hover) {
+    button[data-size='sm']:hover:enabled {
+      border-radius: 28px;
+    }
+
+    button[data-size='md']:hover:enabled {
+      border-radius: 38px;
+    }
+
+    button[data-size='lg']:hover:enabled {
+      border-radius: 48px;
+    }
+
+    button[data-variant='shade']:hover:enabled {
+      background: var(--wui-color-gray-glass-002);
+    }
+
+    button[data-variant='shade']:active:enabled {
+      background: var(--wui-color-gray-glass-005);
+    }
+  }
+
+  button[data-size='sm']:active:enabled {
+    border-radius: 28px;
+  }
+
+  button[data-size='md']:active:enabled {
+    border-radius: 38px;
+  }
+
+  button[data-size='lg']:active:enabled {
+    border-radius: 48px;
+  }
+
+  /* -- Disabled states --------------------------------------------------- */
+  button:disabled {
+    opacity: 0.3;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAA;AAEpD,eAAe,GAAG,CAAA;;;;;;;;kBAQA,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;;cAE/B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC;yBACvE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;UACjD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC;sBAChC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;UAC9C,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;;qBAOjC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;iBACzC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;;;;;qBAKvB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;iBACzC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;;;;;qBAKvB,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;iBACzC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;;;;;;wBAMpB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,uBAAuB;aAC9D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU;;;;wBAI5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,mBAAmB;aAC1D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB;;;;wBAIlC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB;aACxD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU;;;;;wBAK5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,eAAe;aACvD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW;;;;wBAI7B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB;aACzD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW;;;;wBAI7B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;aAChD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU;;;;wBAI5B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe;aACtD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEjD,CAAA"}

package/dist/esm/src/composites/wui-card-select/index.js

@@ -0,0 +1,77 @@
+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 { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../../components/wui-text/index.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import '../wui-network-image/index.js';
+import '../wui-wallet-image/index.js';
+import styles from './styles.js';
+let WuiCardSelect = class WuiCardSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = 'Unknown';
+        this.type = 'wallet';
+        this.imageSrc = undefined;
+        this.disabled = false;
+        this.selected = false;
+    }
+    render() {
+        return html `
+      <button data-selected=${ifDefined(this.selected)} ?disabled=${this.disabled}>
+        ${this.imageTemplate()}
+        <wui-text variant="md-regular" color=${this.selected ? 'accent-primary' : 'inherit'}>
+          ${this.name}
+        </wui-text>
+      </button>
+    `;
+    }
+    imageTemplate() {
+        if (this.type === 'network') {
+            return html `
+        <wui-network-image
+          .selected=${this.selected}
+          imageSrc=${ifDefined(this.imageSrc)}
+          name=${this.name}
+        >
+        </wui-network-image>
+      `;
+        }
+        return html `
+      <wui-wallet-image
+        size="lg"
+        imageSrc=${ifDefined(this.imageSrc)}
+        name=${this.name}
+        badgeSize="sm"
+      >
+      </wui-wallet-image>
+    `;
+    }
+};
+WuiCardSelect.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property()
+], WuiCardSelect.prototype, "name", void 0);
+__decorate([
+    property()
+], WuiCardSelect.prototype, "type", void 0);
+__decorate([
+    property()
+], WuiCardSelect.prototype, "imageSrc", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiCardSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiCardSelect.prototype, "selected", void 0);
+WuiCardSelect = __decorate([
+    customElement('wui-card-select')
+], WuiCardSelect);
+export { WuiCardSelect };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-card-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-card-select/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAExD,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAErE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,+BAA+B,CAAA;AACtC,OAAO,8BAA8B,CAAA;AACrC,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAKc,SAAI,GAAG,SAAS,CAAA;QAEhB,SAAI,GAAmB,QAAQ,CAAA;QAE/B,aAAQ,GAAY,SAAS,CAAA;QAEZ,aAAQ,GAAa,KAAK,CAAA;QAE1B,aAAQ,GAAa,KAAK,CAAA;IAoChE,CAAC;IAjCiB,MAAM;QACpB,OAAO,IAAI,CAAA;8BACe,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,cAAc,IAAI,CAAC,QAAQ;UACvE,IAAI,CAAC,aAAa,EAAE;+CACiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;YAC/E,IAAI,CAAC,IAAI;;;KAGhB,CAAA;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAA;;sBAEK,IAAI,CAAC,QAAQ;qBACd,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;iBAC5B,IAAI,CAAC,IAAI;;;OAGnB,CAAA;QACH,CAAC;QAED,OAAO,IAAI,CAAA;;;mBAGI,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;eAC5B,IAAI,CAAC,IAAI;;;;KAInB,CAAA;IACH,CAAC;;AA/CsB,oBAAM,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,AAAvC,CAAuC;AAIjD;IAAlB,QAAQ,EAAE;2CAAwB;AAEhB;IAAlB,QAAQ,EAAE;2CAAuC;AAE/B;IAAlB,QAAQ,EAAE;+CAAqC;AAEZ;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkC;AAE1B;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkC;AAbnD,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAiDzB"}

package/dist/esm/src/composites/wui-card-select/styles.js

@@ -0,0 +1,40 @@
+import { css } from '../../utils/ThemeHelperUtil.js';
+export default css `
+  button {
+    flex-direction: column;
+    width: 76px;
+    row-gap: ${({ spacing }) => spacing[1]};
+    padding: ${({ spacing }) => spacing[3]};
+    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
+    border-radius: ${({ borderRadius }) => borderRadius[5]};
+  }
+
+  button > wui-text {
+    color: ${({ tokens }) => tokens.theme.textPrimary};
+    max-width: 64px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    justify-content: center;
+  }
+
+  button:disabled {
+    opacity: 0.2;
+    cursor: not-allowed;
+  }
+
+  [data-selected='true'] {
+    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    button:hover:enabled {
+      background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    }
+
+    button[data-selected='true']:hover:enabled {
+      background-color: ${({ tokens }) => tokens.core.foregroundAccent020};
+    }
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-card-select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAA;AAEpD,eAAe,GAAG,CAAA;;;;eAIH,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;eAC3B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;wBAClB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB;qBACjD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;;;;aAI7C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW;;;;;;;;;;;;;;wBAc7B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,mBAAmB;;;;;0BAK7C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,mBAAmB;;;;0BAIhD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,mBAAmB;;;CAGxE,CAAA"}

package/dist/esm/src/composites/wui-card-select-loader/index.js

@@ -0,0 +1,41 @@
+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 { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { networkSvgMd } from '../../assets/svg/networkMd.js';
+import '../../components/wui-shimmer/index.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import styles from './styles.js';
+let WuiCardSelectLoader = class WuiCardSelectLoader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'wallet';
+    }
+    render() {
+        return html `
+      ${this.shimmerTemplate()}
+      <wui-shimmer width="80px" height="20px"></wui-shimmer>
+    `;
+    }
+    shimmerTemplate() {
+        if (this.type === 'network') {
+            return html ` <wui-shimmer data-type=${this.type} width="48px" height="54px"></wui-shimmer>
+        ${networkSvgMd}`;
+        }
+        return html `<wui-shimmer width="56px" height="56px"></wui-shimmer>`;
+    }
+};
+WuiCardSelectLoader.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property()
+], WuiCardSelectLoader.prototype, "type", void 0);
+WuiCardSelectLoader = __decorate([
+    customElement('wui-card-select-loader')
+], WuiCardSelectLoader);
+export { WuiCardSelectLoader };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-card-select-loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-card-select-loader/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,uCAAuC,CAAA;AAC9C,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,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAIc,SAAI,GAAmB,QAAQ,CAAA;IAkBpD,CAAC;IAfiB,MAAM;QACpB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,EAAE;;KAEzB,CAAA;IACH,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,IAAI;UAC3C,YAAY,EAAE,CAAA;QACpB,CAAC;QAED,OAAO,IAAI,CAAA,wDAAwD,CAAA;IACrE,CAAC;;AApBsB,0BAAM,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,AAAvC,CAAuC;AAGjD;IAAlB,QAAQ,EAAE;iDAAuC;AAJvC,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAsB/B"}

package/dist/esm/src/composites/wui-card-select-loader/styles.js

@@ -0,0 +1,40 @@
+import { css } from '../../utils/ThemeHelperUtil.js';
+export default css `
+  :host {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 104px;
+    width: 104px;
+    row-gap: ${({ spacing }) => spacing[2]};
+    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
+    border-radius: ${({ borderRadius }) => borderRadius[5]};
+    position: relative;
+  }
+
+  wui-shimmer[data-type='network'] {
+    border: none;
+    -webkit-clip-path: var(--apkt-path-network);
+    clip-path: var(--apkt-path-network);
+  }
+
+  svg {
+    position: absolute;
+    width: 48px;
+    height: 54px;
+    z-index: 1;
+  }
+
+  svg > path {
+    stroke: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    stroke-width: 1px;
+  }
+
+  @media (max-width: 350px) {
+    :host {
+      width: 100%;
+    }
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/composites/wui-card-select-loader/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-card-select-loader/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAA;AAEpD,eAAe,GAAG,CAAA;;;;;;;;eAQH,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;wBAClB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB;qBACjD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;cAkB5C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,mBAAmB;;;;;;;;;CAS7D,CAAA"}

package/dist/esm/src/composites/wui-certified-switch/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 { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import '../wui-toggle/index.js';
+import styles from './styles.js';
+let WuiCertifiedSwitch = class WuiCertifiedSwitch extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+    }
+    render() {
+        return html `
+      <wui-flex>
+        <wui-icon size="xl" name="walletConnectBrown"></wui-icon>
+        <wui-toggle
+          ?checked=${this.checked}
+          size="sm"
+          @switchChange=${this.handleToggleChange.bind(this)}
+        ></wui-toggle>
+      </wui-flex>
+    `;
+    }
+    handleToggleChange(event) {
+        event.stopPropagation();
+        this.checked = event.detail;
+        this.dispatchSwitchEvent();
+    }
+    dispatchSwitchEvent() {
+        this.dispatchEvent(new CustomEvent('certifiedSwitchChange', {
+            detail: this.checked,
+            bubbles: true,
+            composed: true
+        }));
+    }
+};
+WuiCertifiedSwitch.styles = [resetStyles, elementStyles, styles];
+__decorate([
+    property({ type: Boolean })
+], WuiCertifiedSwitch.prototype, "checked", void 0);
+WuiCertifiedSwitch = __decorate([
+    customElement('wui-certified-switch')
+], WuiCertifiedSwitch);
+export { WuiCertifiedSwitch };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/composites/wui-certified-switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-certified-switch/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,wBAAwB,CAAA;AAC/B,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAI+B,YAAO,GAAa,KAAK,CAAA;IAgC/D,CAAC;IA7BiB,MAAM;QACpB,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,CAAC,OAAO;;0BAEP,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;;;KAGvD,CAAA;IACH,CAAC;IAGO,kBAAkB,CAAC,KAAkB;QAC3C,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAA;QAC3B,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,uBAAuB,EAAE;YACvC,MAAM,EAAE,IAAI,CAAC,OAAO;YACpB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AAlCsB,yBAAM,GAAG,CAAC,WAAW,EAAE,aAAa,EAAE,MAAM,CAAC,AAAvC,CAAuC;AAGhC;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAiC;AAJlD,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAoC9B"}

package/dist/esm/src/composites/wui-certified-switch/styles.js

@@ -0,0 +1,27 @@
+import { css } from '../../utils/ThemeHelperUtil.js';
+export default css `
+  :host {
+    height: auto;
+  }
+
+  :host > wui-flex {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: ${({ spacing }) => spacing['2']};
+    padding: ${({ spacing }) => spacing['2']} ${({ spacing }) => spacing['3']};
+    background-color: ${({ tokens }) => tokens.theme.foregroundPrimary};
+    border-radius: ${({ borderRadius }) => borderRadius['4']};
+    box-shadow: inset 0 0 0 1px ${({ tokens }) => tokens.theme.foregroundPrimary};
+    transition: background-color ${({ durations }) => durations['lg']}
+      ${({ easings }) => easings['ease-out-power-2']};
+    will-change: background-color;
+    cursor: pointer;
+  }
+
+  wui-switch {
+    pointer-events: none;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/composites/wui-certified-switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAA;AAEpD,eAAe,GAAG,CAAA;;;;;;;;;;kBAUA,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC;eAChC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC;wBACrD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB;qBACjD,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC;kCAC1B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,iBAAiB;mCAC7C,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;QAC7D,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;;;CAQnD,CAAA"}

package/dist/esm/src/composites/wui-checkbox/index.js

@@ -0,0 +1,70 @@
+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 { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import '../../components/wui-icon/index.js';
+import '../../components/wui-text/index.js';
+import { resetStyles } from '../../utils/ThemeUtil.js';
+import { customElement } from '../../utils/WebComponentsUtil.js';
+import './index.js';
+import styles from './styles.js';
+const ICON_SIZE = {
+    lg: 'md',
+    md: 'sm',
+    sm: 'sm'
+};
+let WuiCheckBox = class WuiCheckBox extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.inputElementRef = createRef();
+        this.checked = undefined;
+        this.disabled = false;
+        this.size = 'md';
+    }
+    render() {
+        const iconSize = ICON_SIZE[this.size];
+        return html `
+      <label data-size=${this.size}>
+        <input
+          ${ref(this.inputElementRef)}
+          ?checked=${ifDefined(this.checked)}
+          ?disabled=${this.disabled}
+          type="checkbox"
+          @change=${this.dispatchChangeEvent}
+        />
+        <span>
+          <wui-icon name="checkmarkBold" size=${iconSize}></wui-icon>
+        </span>
+        <slot></slot>
+      </label>
+    `;
+    }
+    dispatchChangeEvent() {
+        this.dispatchEvent(new CustomEvent('checkboxChange', {
+            detail: this.inputElementRef.value?.checked,
+            bubbles: true,
+            composed: true
+        }));
+    }
+};
+WuiCheckBox.styles = [resetStyles, styles];
+__decorate([
+    property({ type: Boolean })
+], WuiCheckBox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], WuiCheckBox.prototype, "disabled", void 0);
+__decorate([
+    property()
+], WuiCheckBox.prototype, "size", void 0);
+WuiCheckBox = __decorate([
+    customElement('wui-checkbox')
+], WuiCheckBox);
+export { WuiCheckBox };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/composites/wui-checkbox/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAY,SAAS,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAA;AAEhE,OAAO,oCAAoC,CAAA;AAC3C,OAAO,oCAAoC,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAChE,OAAO,YAAY,CAAA;AACnB,OAAO,MAAM,MAAM,aAAa,CAAA;AAIhC,MAAM,SAAS,GAAG;IAChB,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CAC6B,CAAA;AAGhC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIE,oBAAe,GAA0B,SAAS,EAAoB,CAAA;QAGzC,YAAO,GAAa,SAAS,CAAA;QAE7B,aAAQ,GAAG,KAAK,CAAA;QAEjC,SAAI,GAAiB,IAAI,CAAA;IAkC9C,CAAC;IA/BiB,MAAM;QACpB,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAErC,OAAO,IAAI,CAAA;yBACU,IAAI,CAAC,IAAI;;YAEtB,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;qBAChB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;sBACtB,IAAI,CAAC,QAAQ;;oBAEf,IAAI,CAAC,mBAAmB;;;gDAGI,QAAQ;;;;KAInD,CAAA;IACH,CAAC;IAIO,mBAAmB;QACzB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,OAAO;YAC3C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AA3CsB,kBAAM,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,AAAxB,CAAwB;AAMjB;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAqC;AAE7B;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAwB;AAEjC;IAAlB,QAAQ,EAAE;yCAAiC;AAXjC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA6CvB"}