0xtrails 0.0.1 → 0.0.2

package/dist/widget/index-DU2HcCis.js

@@ -0,0 +1,200 @@
+import { i as h, r as p, j as w, a as x } from "./index-CK94R-H7.js";
+import { x as m } from "./lit-html-BRjl1r6K.js";
+import { n as t, c as g, U as f } from "./if-defined-DRXJEhv7.js";
+import "./index-CDlhy529.js";
+const b = h`
+  button {
+    padding: 6.5px var(--wui-spacing-l) 6.5px var(--wui-spacing-xs);
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    border-radius: var(--wui-border-radius-xs);
+    background-color: var(--wui-color-gray-glass-002);
+  }
+
+  button[data-clickable='false'] {
+    pointer-events: none;
+    background-color: transparent;
+  }
+
+  wui-image,
+  wui-icon {
+    width: var(--wui-spacing-3xl);
+    height: var(--wui-spacing-3xl);
+  }
+
+  wui-image {
+    border-radius: var(--wui-border-radius-3xl);
+  }
+`;
+var u = function(a, e, r, i) {
+  var l = arguments.length, o = l < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, r) : i, c;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") o = Reflect.decorate(a, e, r, i);
+  else for (var s = a.length - 1; s >= 0; s--) (c = a[s]) && (o = (l < 3 ? c(o) : l > 3 ? c(e, r, o) : c(e, r)) || o);
+  return l > 3 && o && Object.defineProperty(e, r, o), o;
+};
+let n = class extends x {
+  constructor() {
+    super(...arguments), this.tokenName = "", this.tokenImageUrl = "", this.tokenValue = 0, this.tokenAmount = "0.0", this.tokenCurrency = "", this.clickable = !1;
+  }
+  render() {
+    return m`
+      <button data-clickable=${String(this.clickable)}>
+        <wui-flex gap="s" alignItems="center">
+          ${this.visualTemplate()}
+          <wui-flex flexDirection="column" justifyContent="spaceBetween">
+            <wui-text variant="paragraph-500" color="fg-100">${this.tokenName}</wui-text>
+            <wui-text variant="small-400" color="fg-200">
+              ${f.formatNumberToLocalString(this.tokenAmount, 4)} ${this.tokenCurrency}
+            </wui-text>
+          </wui-flex>
+        </wui-flex>
+        <wui-text variant="paragraph-500" color="fg-100">$${this.tokenValue.toFixed(2)}</wui-text>
+      </button>
+    `;
+  }
+  visualTemplate() {
+    return this.tokenName && this.tokenImageUrl ? m`<wui-image alt=${this.tokenName} src=${this.tokenImageUrl}></wui-image>` : m`<wui-icon name="coinPlaceholder" color="fg-100"></wui-icon>`;
+  }
+};
+n.styles = [p, w, b];
+u([
+  t()
+], n.prototype, "tokenName", void 0);
+u([
+  t()
+], n.prototype, "tokenImageUrl", void 0);
+u([
+  t({ type: Number })
+], n.prototype, "tokenValue", void 0);
+u([
+  t()
+], n.prototype, "tokenAmount", void 0);
+u([
+  t()
+], n.prototype, "tokenCurrency", void 0);
+u([
+  t({ type: Boolean })
+], n.prototype, "clickable", void 0);
+n = u([
+  g("wui-list-token")
+], n);
+const y = h`
+  :host {
+    display: block;
+    width: var(--local-width);
+    height: var(--local-height);
+    border-radius: var(--wui-border-radius-3xl);
+    box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
+    overflow: hidden;
+    position: relative;
+  }
+
+  :host([data-variant='generated']) {
+    --mixed-local-color-1: var(--local-color-1);
+    --mixed-local-color-2: var(--local-color-2);
+    --mixed-local-color-3: var(--local-color-3);
+    --mixed-local-color-4: var(--local-color-4);
+    --mixed-local-color-5: var(--local-color-5);
+  }
+
+  @supports (background: color-mix(in srgb, white 50%, black)) {
+    :host([data-variant='generated']) {
+      --mixed-local-color-1: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-1)
+      );
+      --mixed-local-color-2: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-2)
+      );
+      --mixed-local-color-3: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-3)
+      );
+      --mixed-local-color-4: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-4)
+      );
+      --mixed-local-color-5: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-5)
+      );
+    }
+  }
+
+  :host([data-variant='generated']) {
+    box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
+    background: radial-gradient(
+      var(--local-radial-circle),
+      #fff 0.52%,
+      var(--mixed-local-color-5) 31.25%,
+      var(--mixed-local-color-3) 51.56%,
+      var(--mixed-local-color-2) 65.63%,
+      var(--mixed-local-color-1) 82.29%,
+      var(--mixed-local-color-4) 100%
+    );
+  }
+
+  :host([data-variant='default']) {
+    box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
+    background: radial-gradient(
+      75.29% 75.29% at 64.96% 24.36%,
+      #fff 0.52%,
+      #f5ccfc 31.25%,
+      #dba4f5 51.56%,
+      #9a8ee8 65.63%,
+      #6493da 82.29%,
+      #6ebdea 100%
+    );
+  }
+`;
+var v = function(a, e, r, i) {
+  var l = arguments.length, o = l < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, r) : i, c;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") o = Reflect.decorate(a, e, r, i);
+  else for (var s = a.length - 1; s >= 0; s--) (c = a[s]) && (o = (l < 3 ? c(o) : l > 3 ? c(e, r, o) : c(e, r)) || o);
+  return l > 3 && o && Object.defineProperty(e, r, o), o;
+};
+let d = class extends x {
+  constructor() {
+    super(...arguments), this.imageSrc = void 0, this.alt = void 0, this.address = void 0, this.size = "xl";
+  }
+  render() {
+    return this.style.cssText = `
+    --local-width: var(--wui-icon-box-size-${this.size});
+    --local-height: var(--wui-icon-box-size-${this.size});
+    `, m`${this.visualTemplate()}`;
+  }
+  visualTemplate() {
+    if (this.imageSrc)
+      return this.dataset.variant = "image", m`<wui-image src=${this.imageSrc} alt=${this.alt ?? "avatar"}></wui-image>`;
+    if (this.address) {
+      this.dataset.variant = "generated";
+      const e = f.generateAvatarColors(this.address);
+      return this.style.cssText += `
+ ${e}`, null;
+    }
+    return this.dataset.variant = "default", null;
+  }
+};
+d.styles = [p, y];
+v([
+  t()
+], d.prototype, "imageSrc", void 0);
+v([
+  t()
+], d.prototype, "alt", void 0);
+v([
+  t()
+], d.prototype, "address", void 0);
+v([
+  t()
+], d.prototype, "size", void 0);
+d = v([
+  g("wui-avatar")
+], d);

package/dist/widget/index-DutZGWNW.js

@@ -0,0 +1,321 @@
+import { i as g, r as v, j as y, a as f } from "./index-CK94R-H7.js";
+import { x as d, b as m } from "./lit-html-BRjl1r6K.js";
+import { n, c as b } from "./if-defined-DRXJEhv7.js";
+import "./index-CDlhy529.js";
+import "./index-CD6dBcRj.js";
+const z = g`
+  :host {
+    position: relative;
+  }
+
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    width: 100%;
+    background-color: var(--wui-color-accent-glass-010);
+    border-radius: var(--wui-border-radius-xs);
+    border: 1px solid var(--wui-color-accent-glass-010);
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);
+    will-change: background-color;
+  }
+
+  wui-tooltip {
+    padding: 7px var(--wui-spacing-s) 8px var(--wui-spacing-s);
+    position: absolute;
+    top: -8px;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    opacity: 0;
+    display: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    button:hover:enabled {
+      background-color: var(--wui-color-accent-glass-015);
+    }
+
+    button:active:enabled {
+      background-color: var(--wui-color-accent-glass-020);
+    }
+  }
+`;
+var x = function(o, t, i, r) {
+  var a = arguments.length, e = a < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, i) : r, s;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") e = Reflect.decorate(o, t, i, r);
+  else for (var l = o.length - 1; l >= 0; l--) (s = o[l]) && (e = (a < 3 ? s(e) : a > 3 ? s(t, i, e) : s(t, i)) || e);
+  return a > 3 && e && Object.defineProperty(t, i, e), e;
+};
+let w = class extends f {
+  constructor() {
+    super(...arguments), this.text = "", this.icon = "card";
+  }
+  render() {
+    return d`<button>
+      <wui-icon color="accent-100" name=${this.icon} size="lg"></wui-icon>
+    </button>`;
+  }
+};
+w.styles = [v, y, z];
+x([
+  n()
+], w.prototype, "text", void 0);
+x([
+  n()
+], w.prototype, "icon", void 0);
+w = x([
+  b("wui-icon-button")
+], w);
+const $ = m`<svg width="86" height="96" fill="none">
+  <path
+    d="M78.3244 18.926L50.1808 2.45078C45.7376 -0.150261 40.2624 -0.150262 35.8192 2.45078L7.6756 18.926C3.23322 21.5266 0.5 26.3301 0.5 31.5248V64.4752C0.5 69.6699 3.23322 74.4734 7.6756 77.074L35.8192 93.5492C40.2624 96.1503 45.7376 96.1503 50.1808 93.5492L78.3244 77.074C82.7668 74.4734 85.5 69.6699 85.5 64.4752V31.5248C85.5 26.3301 82.7668 21.5266 78.3244 18.926Z"
+  />
+</svg>`, S = m`<svg  viewBox="0 0 48 54" fill="none">
+  <path
+    d="M43.4605 10.7248L28.0485 1.61089C25.5438 0.129705 22.4562 0.129705 19.9515 1.61088L4.53951 10.7248C2.03626 12.2051 0.5 14.9365 0.5 17.886V36.1139C0.5 39.0635 2.03626 41.7949 4.53951 43.2752L19.9515 52.3891C22.4562 53.8703 25.5438 53.8703 28.0485 52.3891L43.4605 43.2752C45.9637 41.7949 47.5 39.0635 47.5 36.114V17.8861C47.5 14.9365 45.9637 12.2051 43.4605 10.7248Z"
+  />
+</svg>`, I = m`
+  <svg fill="none" viewBox="0 0 36 40">
+    <path
+      d="M15.4 2.1a5.21 5.21 0 0 1 5.2 0l11.61 6.7a5.21 5.21 0 0 1 2.61 4.52v13.4c0 1.87-1 3.59-2.6 4.52l-11.61 6.7c-1.62.93-3.6.93-5.22 0l-11.6-6.7a5.21 5.21 0 0 1-2.61-4.51v-13.4c0-1.87 1-3.6 2.6-4.52L15.4 2.1Z"
+    />
+  </svg>
+`, j = g`
+  :host {
+    position: relative;
+    border-radius: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--local-width);
+    height: var(--local-height);
+  }
+
+  :host([data-round='true']) {
+    background: var(--wui-color-gray-glass-002);
+    border-radius: 100%;
+    outline: 1px solid var(--wui-color-gray-glass-005);
+  }
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    fill: var(--wui-color-gray-glass-002);
+  }
+
+  svg > path {
+    stroke: var(--local-stroke);
+  }
+
+  wui-image {
+    width: 100%;
+    height: 100%;
+    -webkit-clip-path: var(--local-path);
+    clip-path: var(--local-path);
+    background: var(--wui-color-gray-glass-002);
+  }
+
+  wui-icon {
+    transform: translateY(-5%);
+    width: var(--local-icon-size);
+    height: var(--local-icon-size);
+  }
+`;
+var h = function(o, t, i, r) {
+  var a = arguments.length, e = a < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, i) : r, s;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") e = Reflect.decorate(o, t, i, r);
+  else for (var l = o.length - 1; l >= 0; l--) (s = o[l]) && (e = (a < 3 ? s(e) : a > 3 ? s(t, i, e) : s(t, i)) || e);
+  return a > 3 && e && Object.defineProperty(t, i, e), e;
+};
+let c = class extends f {
+  constructor() {
+    super(...arguments), this.size = "md", this.name = "uknown", this.networkImagesBySize = {
+      sm: I,
+      md: S,
+      lg: $
+    }, this.selected = !1, this.round = !1;
+  }
+  render() {
+    return this.round ? (this.dataset.round = "true", this.style.cssText = `
+      --local-width: var(--wui-spacing-3xl);
+      --local-height: var(--wui-spacing-3xl);
+      --local-icon-size: var(--wui-spacing-l);
+    `) : this.style.cssText = `
+
+      --local-path: var(--wui-path-network-${this.size});
+      --local-width:  var(--wui-width-network-${this.size});
+      --local-height:  var(--wui-height-network-${this.size});
+      --local-icon-size:  var(--wui-icon-size-network-${this.size});
+    `, d`${this.templateVisual()} ${this.svgTemplate()} `;
+  }
+  svgTemplate() {
+    return this.round ? null : this.networkImagesBySize[this.size];
+  }
+  templateVisual() {
+    return this.imageSrc ? d`<wui-image src=${this.imageSrc} alt=${this.name}></wui-image>` : d`<wui-icon size="inherit" color="fg-200" name="networkPlaceholder"></wui-icon>`;
+  }
+};
+c.styles = [v, j];
+h([
+  n()
+], c.prototype, "size", void 0);
+h([
+  n()
+], c.prototype, "name", void 0);
+h([
+  n({ type: Object })
+], c.prototype, "networkImagesBySize", void 0);
+h([
+  n()
+], c.prototype, "imageSrc", void 0);
+h([
+  n({ type: Boolean })
+], c.prototype, "selected", void 0);
+h([
+  n({ type: Boolean })
+], c.prototype, "round", void 0);
+c = h([
+  b("wui-network-image")
+], c);
+const k = g`
+  :host {
+    position: relative;
+    background-color: var(--wui-color-gray-glass-002);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--local-size);
+    height: var(--local-size);
+    border-radius: inherit;
+    border-radius: var(--local-border-radius);
+  }
+
+  :host > wui-flex {
+    overflow: hidden;
+    border-radius: inherit;
+    border-radius: var(--local-border-radius);
+  }
+
+  :host::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-radius: inherit;
+    border: 1px solid var(--wui-color-gray-glass-010);
+    pointer-events: none;
+  }
+
+  :host([name='Extension'])::after {
+    border: 1px solid var(--wui-color-accent-glass-010);
+  }
+
+  :host([data-wallet-icon='allWallets']) {
+    background-color: var(--wui-all-wallets-bg-100);
+  }
+
+  :host([data-wallet-icon='allWallets'])::after {
+    border: 1px solid var(--wui-color-accent-glass-010);
+  }
+
+  wui-icon[data-parent-size='inherit'] {
+    width: 75%;
+    height: 75%;
+    align-items: center;
+  }
+
+  wui-icon[data-parent-size='sm'] {
+    width: 18px;
+    height: 18px;
+  }
+
+  wui-icon[data-parent-size='md'] {
+    width: 24px;
+    height: 24px;
+  }
+
+  wui-icon[data-parent-size='lg'] {
+    width: 42px;
+    height: 42px;
+  }
+
+  wui-icon[data-parent-size='full'] {
+    width: 100%;
+    height: 100%;
+  }
+
+  :host > wui-icon-box {
+    position: absolute;
+    overflow: hidden;
+    right: -1px;
+    bottom: -2px;
+    z-index: 1;
+    border: 2px solid var(--wui-color-bg-150, #1e1f1f);
+    padding: 1px;
+  }
+`;
+var p = function(o, t, i, r) {
+  var a = arguments.length, e = a < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, i) : r, s;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") e = Reflect.decorate(o, t, i, r);
+  else for (var l = o.length - 1; l >= 0; l--) (s = o[l]) && (e = (a < 3 ? s(e) : a > 3 ? s(t, i, e) : s(t, i)) || e);
+  return a > 3 && e && Object.defineProperty(t, i, e), e;
+};
+let u = class extends f {
+  constructor() {
+    super(...arguments), this.size = "md", this.name = "", this.installed = !1, this.badgeSize = "xs";
+  }
+  render() {
+    let t = "xxs";
+    return this.size === "lg" ? t = "m" : this.size === "md" ? t = "xs" : t = "xxs", this.style.cssText = `
+       --local-border-radius: var(--wui-border-radius-${t});
+       --local-size: var(--wui-wallet-image-size-${this.size});
+   `, this.walletIcon && (this.dataset.walletIcon = this.walletIcon), d`
+      <wui-flex justifyContent="center" alignItems="center"> ${this.templateVisual()} </wui-flex>
+    `;
+  }
+  templateVisual() {
+    return this.imageSrc ? d`<wui-image src=${this.imageSrc} alt=${this.name}></wui-image>` : this.walletIcon ? d`<wui-icon
+        data-parent-size="md"
+        size="md"
+        color="inherit"
+        name=${this.walletIcon}
+      ></wui-icon>` : d`<wui-icon
+      data-parent-size=${this.size}
+      size="inherit"
+      color="inherit"
+      name="walletPlaceholder"
+    ></wui-icon>`;
+  }
+};
+u.styles = [y, v, k];
+p([
+  n()
+], u.prototype, "size", void 0);
+p([
+  n()
+], u.prototype, "name", void 0);
+p([
+  n()
+], u.prototype, "imageSrc", void 0);
+p([
+  n()
+], u.prototype, "walletIcon", void 0);
+p([
+  n({ type: Boolean })
+], u.prototype, "installed", void 0);
+p([
+  n()
+], u.prototype, "badgeSize", void 0);
+u = p([
+  b("wui-wallet-image")
+], u);
+export {
+  S as n
+};

package/dist/widget/index-O0glArmc.js

@@ -0,0 +1,182 @@
+import { A as d, h as w, e as _, R as p, C as m, S as v, d as c, q as E, c as $, i as y, r as b, a as x, j as R } from "./index-CK94R-H7.js";
+import { x as h } from "./lit-html-BRjl1r6K.js";
+import { n as u, c as C, o as j } from "./if-defined-DRXJEhv7.js";
+function O() {
+  try {
+    return c.returnOpenHref(`${$.SECURE_SITE_SDK_ORIGIN}/loading`, "popupWindow", "width=600,height=800,scrollbars=yes");
+  } catch {
+    throw new Error("Could not open social popup");
+  }
+}
+async function T() {
+  p.push("ConnectingFarcaster");
+  const t = m.getAuthConnector();
+  if (t && !d.state.farcasterUrl)
+    try {
+      const { url: o } = await t.provider.getFarcasterUri();
+      d.setFarcasterUrl(o, w.state.activeChain);
+    } catch (o) {
+      p.goBack(), v.showError(o);
+    }
+}
+async function U(t) {
+  p.push("ConnectingSocial");
+  const o = m.getAuthConnector();
+  let e = null;
+  try {
+    const i = setTimeout(() => {
+      throw new Error("Social login timed out. Please try again.");
+    }, 45e3);
+    if (o && t) {
+      if (c.isTelegram() || (e = O()), e)
+        d.setSocialWindow(e, w.state.activeChain);
+      else if (!c.isTelegram())
+        throw new Error("Could not create social popup");
+      const { uri: n } = await o.provider.getSocialRedirectUri({
+        provider: t
+      });
+      if (!n)
+        throw e == null || e.close(), new Error("Could not fetch the social redirect uri");
+      if (e && (e.location.href = n), c.isTelegram()) {
+        E.setTelegramSocialProvider(t);
+        const r = c.formatTelegramSocialLoginUrl(n);
+        c.openHref(r, "_top");
+      }
+      clearTimeout(i);
+    }
+  } catch (i) {
+    e == null || e.close(), v.showError(i == null ? void 0 : i.message);
+  }
+}
+async function F(t) {
+  d.setSocialProvider(t, w.state.activeChain), _.sendEvent({
+    type: "track",
+    event: "SOCIAL_LOGIN_STARTED",
+    properties: { provider: t }
+  }), t === "farcaster" ? await T() : await U(t);
+}
+const L = y`
+  :host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--wui-border-radius-3xl);
+    border: 1px solid var(--wui-color-gray-glass-005);
+    overflow: hidden;
+  }
+
+  wui-icon {
+    width: 100%;
+    height: 100%;
+  }
+`;
+var S = function(t, o, e, i) {
+  var n = arguments.length, r = n < 3 ? o : i === null ? i = Object.getOwnPropertyDescriptor(o, e) : i, a;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") r = Reflect.decorate(t, o, e, i);
+  else for (var s = t.length - 1; s >= 0; s--) (a = t[s]) && (r = (n < 3 ? a(r) : n > 3 ? a(o, e, r) : a(o, e)) || r);
+  return n > 3 && r && Object.defineProperty(o, e, r), r;
+};
+let f = class extends x {
+  constructor() {
+    super(...arguments), this.logo = "google";
+  }
+  render() {
+    return h`<wui-icon color="inherit" size="inherit" name=${this.logo}></wui-icon> `;
+  }
+};
+f.styles = [b, L];
+S([
+  u()
+], f.prototype, "logo", void 0);
+f = S([
+  C("wui-logo")
+], f);
+const I = y`
+  button {
+    column-gap: var(--wui-spacing-s);
+    padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs);
+    width: 100%;
+    justify-content: flex-start;
+    background-color: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-xs);
+    color: var(--wui-color-fg-100);
+  }
+
+  wui-text {
+    text-transform: capitalize;
+  }
+
+  wui-text[data-align='left'] {
+    display: flex;
+    flex: 1;
+  }
+
+  wui-text[data-align='center'] {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+  }
+
+  .invisible {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  button:disabled {
+    background-color: var(--wui-color-gray-glass-015);
+    color: var(--wui-color-gray-glass-015);
+  }
+`;
+var g = function(t, o, e, i) {
+  var n = arguments.length, r = n < 3 ? o : i === null ? i = Object.getOwnPropertyDescriptor(o, e) : i, a;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") r = Reflect.decorate(t, o, e, i);
+  else for (var s = t.length - 1; s >= 0; s--) (a = t[s]) && (r = (n < 3 ? a(r) : n > 3 ? a(o, e, r) : a(o, e)) || r);
+  return n > 3 && r && Object.defineProperty(o, e, r), r;
+};
+let l = class extends x {
+  constructor() {
+    super(...arguments), this.logo = "google", this.name = "Continue with google", this.align = "left", this.disabled = !1;
+  }
+  render() {
+    return h`
+      <button ?disabled=${this.disabled} tabindex=${j(this.tabIdx)}>
+        <wui-logo logo=${this.logo}></wui-logo>
+        <wui-text
+          data-align=${this.align}
+          variant="paragraph-500"
+          color="inherit"
+          align=${this.align}
+          >${this.name}</wui-text
+        >
+        ${this.templatePlacement()}
+      </button>
+    `;
+  }
+  templatePlacement() {
+    return this.align === "center" ? h` <wui-logo class="invisible" logo=${this.logo}></wui-logo>` : null;
+  }
+};
+l.styles = [b, R, I];
+g([
+  u()
+], l.prototype, "logo", void 0);
+g([
+  u()
+], l.prototype, "name", void 0);
+g([
+  u()
+], l.prototype, "align", void 0);
+g([
+  u()
+], l.prototype, "tabIdx", void 0);
+g([
+  u({ type: Boolean })
+], l.prototype, "disabled", void 0);
+l = g([
+  C("wui-list-social")
+], l);
+export {
+  F as e
+};