"use strict";(self.webpackChunkfrog=self.webpackChunkfrog||[]).push([[1147],{65694:(a,o,r)=>{var e=r(12618),t=r(25707),i=r(60031),s=(r(90067),r(36701),r(50587),r(30729)),n=r(47824),l=r(19770);r(22847),r(67935);const c=e.AH`
  :host {
    display: block;
  }

  button {
    border-radius: var(--wui-border-radius-3xl);
    background: var(--wui-color-gray-glass-002);
    display: flex;
    gap: var(--wui-spacing-xs);
    padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) var(--wui-spacing-3xs)
      var(--wui-spacing-xs);
    border: 1px solid var(--wui-color-gray-glass-005);
  }

  button:disabled {
    background: var(--wui-color-gray-glass-015);
  }

  button:disabled > wui-text {
    color: var(--wui-color-gray-glass-015);
  }

  button:disabled > wui-flex > wui-text {
    color: var(--wui-color-gray-glass-015);
  }

  button:disabled > wui-image,
  button:disabled > wui-flex > wui-avatar {
    filter: grayscale(1);
  }

  button:has(wui-image) {
    padding: var(--wui-spacing-3xs) var(--wui-spacing-3xs) var(--wui-spacing-3xs)
      var(--wui-spacing-xs);
  }

  wui-text {
    color: var(--wui-color-fg-100);
  }

  wui-flex > wui-text {
    color: var(--wui-color-fg-200);
  }

  wui-image,
  wui-icon-box {
    border-radius: var(--wui-border-radius-3xl);
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
  }

  wui-flex {
    border-radius: var(--wui-border-radius-3xl);
    border: 1px solid var(--wui-color-gray-glass-005);
    background: var(--wui-color-gray-glass-005);
    padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
  }

  button.local-no-balance {
    border-radius: 0px;
    border: none;
    background: transparent;
  }

  wui-avatar {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 2px var(--wui-color-accent-glass-010);
  }

  @media (max-width: 500px) {
    button {
      gap: 0px;
      padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) !important;
      height: 32px;
    }
    wui-image,
    wui-icon-box,
    button > wui-text {
      visibility: hidden;
      width: 0px;
      height: 0px;
    }
    button {
      border-radius: 0px;
      border: none;
      background: transparent;
      padding: 0px;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    button:hover:enabled > wui-flex > wui-text {
      color: var(--wui-color-fg-175);
    }

    button:active:enabled > wui-flex > wui-text {
      color: var(--wui-color-fg-175);
    }
  }
`;var d=function(a,o,r,e){var t,i=arguments.length,s=i<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(a,o,r,e);else for(var n=a.length-1;n>=0;n--)(t=a[n])&&(s=(i<3?t(s):i>3?t(o,r,s):t(o,r))||s);return i>3&&s&&Object.defineProperty(o,r,s),s};let u=class extends e.WF{constructor(){super(...arguments),this.networkSrc=void 0,this.avatarSrc=void 0,this.balance=void 0,this.isUnsupportedChain=void 0,this.disabled=!1,this.loading=!1,this.address="",this.profileName="",this.charsStart=4,this.charsEnd=6}render(){return e.qy`
      <button
        ?disabled=${this.disabled}
        class=${(0,i.J)(this.balance?void 0:"local-no-balance")}
      >
        ${this.balanceTemplate()}
        <wui-flex gap="xxs" alignItems="center">
          <wui-avatar
            .imageSrc=${this.avatarSrc}
            alt=${this.address}
            address=${this.address}
          ></wui-avatar>
          <wui-text variant="paragraph-600" color="inherit">
            ${this.address?n.Z.getTruncateString({string:this.profileName||this.address,charsStart:this.profileName?18:this.charsStart,charsEnd:this.profileName?0:this.charsEnd,truncate:this.profileName?"end":"middle"}):null}
          </wui-text>
        </wui-flex>
      </button>
    `}balanceTemplate(){if(this.isUnsupportedChain)return e.qy` <wui-icon-box
          size="sm"
          iconColor="error-100"
          backgroundColor="error-100"
          icon="warningCircle"
        ></wui-icon-box>
        <wui-text variant="paragraph-600" color="inherit"> Switch Network</wui-text>`;if(this.balance){const a=this.networkSrc?e.qy`<wui-image src=${this.networkSrc}></wui-image>`:e.qy`
            <wui-icon-box
              size="sm"
              iconColor="fg-200"
              backgroundColor="fg-300"
              icon="networkPlaceholder"
            ></wui-icon-box>
          `,o=this.loading?e.qy`<wui-loading-spinner size="md" color="fg-200"></wui-loading-spinner>`:e.qy`<wui-text variant="paragraph-600" color="inherit"> ${this.balance}</wui-text>`;return e.qy`${a} ${o}`}return null}};u.styles=[s.W5,s.fD,c],d([(0,t.MZ)()],u.prototype,"networkSrc",void 0),d([(0,t.MZ)()],u.prototype,"avatarSrc",void 0),d([(0,t.MZ)()],u.prototype,"balance",void 0),d([(0,t.MZ)({type:Boolean})],u.prototype,"isUnsupportedChain",void 0),d([(0,t.MZ)({type:Boolean})],u.prototype,"disabled",void 0),d([(0,t.MZ)({type:Boolean})],u.prototype,"loading",void 0),d([(0,t.MZ)()],u.prototype,"address",void 0),d([(0,t.MZ)()],u.prototype,"profileName",void 0),d([(0,t.MZ)()],u.prototype,"charsStart",void 0),d([(0,t.MZ)()],u.prototype,"charsEnd",void 0),u=d([(0,l.E)("wui-account-button")],u)},47737:(a,o,r)=>{var e=r(12618),t=r(25707),i=r(67881),s=r(30729),n=r(19770);const l=e.AH`
  :host {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--wui-spacing-s);
    border-radius: var(--wui-border-radius-s);
    border: 1px solid var(--wui-color-dark-glass-100);
    box-sizing: border-box;
    background-color: var(--wui-color-bg-325);
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.25);
  }

  wui-flex {
    width: 100%;
  }

  wui-text {
    word-break: break-word;
    flex: 1;
  }

  .close {
    cursor: pointer;
  }

  .icon-box {
    height: 40px;
    width: 40px;
    border-radius: var(--wui-border-radius-3xs);
    background-color: var(--local-icon-bg-value);
  }
`;var c=function(a,o,r,e){var t,i=arguments.length,s=i<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(a,o,r,e);else for(var n=a.length-1;n>=0;n--)(t=a[n])&&(s=(i<3?t(s):i>3?t(o,r,s):t(o,r))||s);return i>3&&s&&Object.defineProperty(o,r,s),s};let d=class extends e.WF{constructor(){super(...arguments),this.message="",this.backgroundColor="accent-100",this.iconColor="accent-100",this.icon="info"}render(){return this.style.cssText=`\n      --local-icon-bg-value: var(--wui-color-${this.backgroundColor});\n   `,e.qy`
      <wui-flex flexDirection="row" justifyContent="space-between" alignItems="center">
        <wui-flex columnGap="xs" flexDirection="row" alignItems="center">
          <wui-flex
            flexDirection="row"
            alignItems="center"
            justifyContent="center"
            class="icon-box"
          >
            <wui-icon color=${this.iconColor} size="md" name=${this.icon}></wui-icon>
          </wui-flex>
          <wui-text variant="small-500" color="bg-350" data-testid="wui-alertbar-text"
            >${this.message}</wui-text
          >
        </wui-flex>
        <wui-icon
          class="close"
          color="bg-350"
          size="sm"
          name="close"
          @click=${this.onClose}
        ></wui-icon>
      </wui-flex>
    `}onClose(){i.hG.close()}};d.styles=[s.W5,l],c([(0,t.MZ)()],d.prototype,"message",void 0),c([(0,t.MZ)()],d.prototype,"backgroundColor",void 0),c([(0,t.MZ)()],d.prototype,"iconColor",void 0),c([(0,t.MZ)()],d.prototype,"icon",void 0),d=c([(0,n.E)("wui-alertbar")],d)},15992:(a,o,r)=>{var e=r(12618),t=r(25707),i=r(60031),s=r(30729),n=r(19770);r(67935),r(26347);const l=e.AH`
  :host {
    position: relative;
    border-radius: var(--wui-border-radius-xxs);
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: var(--wui-color-gray-glass-002);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--wui-spacing-4xs);
    padding: 3.75px !important;
  }

  :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 > wui-wallet-image {
    width: 14px;
    height: 14px;
    border-radius: var(--wui-border-radius-5xs);
  }

  :host > wui-flex {
    padding: 2px;
    position: fixed;
    overflow: hidden;
    left: 34px;
    bottom: 8px;
    background: var(--dark-background-150, #1e1f1f);
    border-radius: 50%;
    z-index: 2;
    display: flex;
  }
`;var c=function(a,o,r,e){var t,i=arguments.length,s=i<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(a,o,r,e);else for(var n=a.length-1;n>=0;n--)(t=a[n])&&(s=(i<3?t(s):i>3?t(o,r,s):t(o,r))||s);return i>3&&s&&Object.defineProperty(o,r,s),s};let d=class extends e.WF{constructor(){super(...arguments),this.walletImages=[]}render(){const a=this.walletImages.length<4;return e.qy`${this.walletImages.slice(0,4).map((({src:a,walletName:o})=>e.qy`
            <wui-wallet-image
              size="inherit"
              imageSrc=${a}
              name=${(0,i.J)(o)}
            ></wui-wallet-image>
          `))}
      ${a?[...Array(4-this.walletImages.length)].map((()=>e.qy` <wui-wallet-image size="inherit" name=""></wui-wallet-image>`)):null}
      <wui-flex>
        <wui-icon-box
          size="xxs"
          iconSize="xxs"
          iconcolor="success-100"
          backgroundcolor="success-100"
          icon="checkmark"
          background="opaque"
        ></wui-icon-box>
      </wui-flex>`}};d.styles=[s.W5,l],c([(0,t.MZ)({type:Array})],d.prototype,"walletImages",void 0),d=c([(0,n.E)("wui-all-wallets-image")],d)},22847:(a,o,r)=>{var e=r(12618),t=r(25707),i=(r(90067),r(30729)),s=r(47824),n=r(19770);const l=e.AH`
  :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 c=function(a,o,r,e){var t,i=arguments.length,s=i<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(a,o,r,e);else for(var n=a.length-1;n>=0;n--)(t=a[n])&&(s=(i<3?t(s):i>3?t(o,r,s):t(o,r))||s);return i>3&&s&&Object.defineProperty(o,r,s),s};let d=class extends e.WF{constructor(){super(...arguments),this.imageSrc=void 0,this.alt=void 0,this.address=void 0,this.size="xl"}render(){return this.style.cssText=`\n    --local-width: var(--wui-icon-box-size-${this.size});\n    --local-height: var(--wui-icon-box-size-${this.size});\n    `,e.qy`${this.visualTemplate()}`}visualTemplate(){if(this.imageSrc)return this.dataset.variant="image",e.qy`<wui-image src=${this.imageSrc} alt=${this.alt??"avatar"}></wui-image>`;if(this.address){this.dataset.variant="generated";const a=s.Z.generateAvatarColors(this.address);return this.style.cssText+=`\n ${a}`,null}return this.dataset.variant="default",null}};d.styles=[i.W5,l],c([(0,t.MZ)()],d.prototype,"imageSrc",void 0),c([(0,t.MZ)()],d.prototype,"alt",void 0),c([(0,t.MZ)()],d.prototype,"address",void 0),c([(0,t.MZ)()],d.prototype,"size",void 0),d=c([(0,n.E)("wui-avatar")],d)},25584:(a,o,r)=>{var e=r(12618),t=r(25707),i=r(30729),s=r(19770);const n=e.AH`
  span {
    font-weight: 500;
    font-size: 40px;
    color: var(--wui-color-fg-100);
    line-height: 130%; /* 52px */
    letter-spacing: -1.6px;
    text-align: center;
  }

  .pennies {
    color: var(--wui-color-fg-200);
  }
`;var l=function(a,o,r,e){var t,i=arguments.length,s=i<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(a,o,r,e);else for(var n=a.length-1;n>=0;n--)(t=a[n])&&(s=(i<3?t(s):i>3?t(o,r,s):t(o,r))||s);return i>3&&s&&Object.defineProperty(o,r,s),s};let c=class extends e.WF{constructor(){super(...arguments),this.dollars="0",this.pennies="00"}render(){return e.qy`<span>$${this.dollars}<span class="pennies">.${this.pennies}</span></span>`}};c.styles=[i.W5,n],l([(0,t.MZ)()],c.prototype,"dollars",void 0),l([(0,t.MZ)()],c.prototype,"pennies",void 0),c=l([(0,s.E)("wui-balance")],c)},51384:(a,o,r)=>{var e=r(12618),t=r(25707),i=(r(36701),r(30729)),s=r(19770);r(67935);const n=e.AH`
  wui-flex {
    width: 100%;
    background-color: var(--wui-color-gray-glass-005);
    border-radius: var(--wui-border-radius-m);
    padding: var(--wui-spacing-1xs) var(--wui-spacing-s) var(--wui-spacing-1xs)
      var(--wui-spacing-1xs);
  }
`;var l=function(a,o,r,e){var t,i=arguments.length,s=i<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(a,o,r,e);else for(var n=a.length-1;n>=0;n--)(t=a[n])&&(s=(i<3?t(s):i>3?t(o,r,s):t(o,r))||s);return i>3&&s&&Object.defineProperty(o,r,s),s};let c=class extends e.WF{constructor(){super(...arguments),this.imageSrc="",this.text="",this.size=""}render(){return e.qy`
      <wui-flex gap="1xs" alignItems="center">
        <wui-avatar size=${this.size} imageSrc=${this.imageSrc}></wui-avatar>
        <wui-text variant="small-400" color="fg-200">${this.text}</wui-text>
      </wui-flex>
    `}};c.styles=[i.W5,i.fD,n],l([(0,t.MZ)()],c.prototype,"imageSrc",void 0),l([(0,t.MZ)()],c.prototype,"text",void 0),l([(0,t.MZ)()],c.prototype,"size",void 0),c=l([(0,s.E)("wui-banner-img")],c)},60474:(a,o,r)=>{var e=r(12618),t=r(25707),i=(r(36701),r(30729)),s=r(19770);r(67935);const n=e.AH`
  wui-flex {
    width: 100%;
    background-color: var(--wui-color-gray-glass-005);
    border-radius: var(--wui-border-radius-s);
    padding: var(--wui-spacing-1xs) var(--wui-spacing-s) var(--wui-spacing-1xs)
      var(--wui-spacing-1xs);
  }
`;var l=function(a,o,r,e){var t,i=arguments.length,s=i<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(a,o,r,e);else for(var n=a.length-1;n>=0;n--)(t=a[n])&&(s=(i<3?t(s):i>3?t(o,r,s):t(o,r))||s);return i>3&&s&&Object.defineProperty(o,r,s),s};let c=class extends e.WF{constructor(){super(...arguments),this.icon="externalLink",this.text=""}render(){return e.qy`
      <wui-flex gap="1xs" alignItems="center">
        <wui-icon-box
          size="sm"
          iconcolor="fg-200"
          backgroundcolor="fg-200"
          icon=${this.icon}
          background="transparent"
        ></wui-icon-box>
        <wui-text variant="small-400" color="fg-200">${this.text}</wui-text>
      </wui-flex>
    `}};c.styles=[i.W5,i.fD,n],l([(0,t.MZ)()],c.prototype,"icon",void 0),l([(0,t.MZ)()],c.prototype,"text",void 0),c=l([(0,s.E)("wui-banner")],c)},53788:(a,o,r)=>{var e=r(12618),t=r(25707),i=(r(47227),r(66508),r(36701),r(30729)),s=r(19770);const n=e.AH`
  :host {
    width: var(--local-width);
    position: relative;
  }

  button {
    border: none;
    border-radius: var(--local-border-radius);
    width: var(--local-width);
    white-space: nowrap;
  }

  /* -- Sizes --------------------------------------------------- */
  button[data-size='md'] {
    padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-l);
    height: 36px;
  }

  button[data-size='md'][data-icon-left='true'][data-icon-right='false'] {
    padding: 8.2px var(--wui-spacing-l) 9px var(--wui-spacing-s);
  }

  button[data-size='md'][data-icon-right='true'][data-icon-left='false'] {
    padding: 8.2px var(--wui-spacing-s) 9px var(--wui-spacing-l);
  }

  button[data-size='lg'] {
    padding: var(--wui-spacing-m) var(--wui-spacing-2l);
    height: 48px;
  }

  /* -- Variants --------------------------------------------------------- */
  button[data-variant='main'] {
    background-color: var(--wui-color-accent-100);
    color: var(--wui-color-inverse-100);
    border: none;
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
  }

  button[data-variant='inverse'] {
    background-color: var(--wui-color-inverse-100);
    color: var(--wui-color-inverse-000);
    border: none;
    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);
    border: none;
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
  }

  button[data-variant='accent-error'] {
    background: var(--wui-color-error-glass-015);
    color: var(--wui-color-error-100);
    border: none;
    box-shadow: inset 0 0 0 1px var(--wui-color-error-glass-010);
  }

  button[data-variant='accent-success'] {
    background: var(--wui-color-success-glass-015);
    color: var(--wui-color-success-100);
    border: none;
    box-shadow: inset 0 0 0 1px var(--wui-color-success-glass-010);
  }

  button[data-variant='neutral'] {
    background: transparent;
    color: var(--wui-color-fg-100);
    border: none;
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
  }

  /* -- Focus states --------------------------------------------------- */
  button[data-variant='main']:focus-visible:enabled {
    background-color: var(--wui-color-accent-090);
    box-shadow:
      inset 0 0 0 1px var(--wui-color-accent-100),
      0 0 0 4px var(--wui-color-accent-glass-020);
  }
  button[data-variant='inverse']:focus-visible:enabled {
    background-color: var(--wui-color-inverse-100);
    box-shadow:
      inset 0 0 0 1px var(--wui-color-gray-glass-010),
      0 0 0 4px var(--wui-color-accent-glass-020);
  }
  button[data-variant='accent']:focus-visible:enabled {
    background-color: var(--wui-color-accent-glass-010);
    box-shadow:
      inset 0 0 0 1px var(--wui-color-accent-100),
      0 0 0 4px var(--wui-color-accent-glass-020);
  }
  button[data-variant='accent-error']:focus-visible:enabled {
    background: var(--wui-color-error-glass-015);
    box-shadow:
      inset 0 0 0 1px var(--wui-color-error-100),
      0 0 0 4px var(--wui-color-error-glass-020);
  }
  button[data-variant='accent-success']:focus-visible:enabled {
    background: var(--wui-color-success-glass-015);
    box-shadow:
      inset 0 0 0 1px var(--wui-color-success-100),
      0 0 0 4px var(--wui-color-success-glass-020);
  }
  button[data-variant='neutral']: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) and (pointer: fine) {
    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='accent-error']:hover:enabled {
      background: var(--wui-color-error-glass-020);
      color: var(--wui-color-error-100);
    }

    button[data-variant='accent-error']:active:enabled {
      background: var(--wui-color-error-glass-030);
      color: var(--wui-color-error-100);
    }

    button[data-variant='accent-success']:hover:enabled {
      background: var(--wui-color-success-glass-020);
      color: var(--wui-color-success-100);
    }

    button[data-variant='accent-success']:active:enabled {
      background: var(--wui-color-success-glass-030);
      color: var(--wui-color-success-100);
    }

    button[data-variant='neutral']:hover:enabled {
      background: var(--wui-color-gray-glass-002);
    }

    button[data-variant='neutral']:active:enabled {
      background: var(--wui-color-gray-glass-005);
    }

    button[data-size='lg'][data-icon-left='true'][data-icon-right='false'] {
      padding-left: var(--wui-spacing-m);
    }

    button[data-size='lg'][data-icon-right='true'][data-icon-left='false'] {
      padding-right: var(--wui-spacing-m);
    }
  }

  /* -- Disabled state --------------------------------------------------- */
  button:disabled {
    background-color: var(--wui-color-gray-glass-002);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
    color: var(--wui-color-gray-glass-020);
    cursor: not-allowed;
  }

  button > wui-text {
    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: opacity;
    opacity: var(--local-opacity-100);
  }

  ::slotted(*) {
    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: opacity;
    opacity: var(--local-opacity-100);
  }

  wui-loading-spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: var(--local-opacity-000);
  }
`;var l=function(a,o,r,e){var t,i=arguments.length,s=i<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,r):e;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(a,o,r,e);else for(var n=a.length-1;n>=0;n--)(t=a[n])&&(s=(i<3?t(s):i>3?t(o,r,s):t(o,r))||s);return i>3&&s&&Object.defineProperty(o,r,s),s};const c={main:"inverse-100",inverse:"inverse-000",accent:"accent-100","accent-error":"error-100","accent-success":"success-100",neutral:"fg-100",disabled:"gray-glass-020"},d={lg:"paragraph-600",md:"small-600"},u={lg:"md",md:"md"};let g=class extends e.WF{constructor(){super(...arguments),this.size="lg",this.disabled=!1,this.fullWidth=!1,this.loading=!1,this.variant="main",this.hasIconLeft=!1,this.hasIconRight=!1,this.borderRadius="m"}render(){this.style.cssText=`\n    --local-width: ${this.fullWidth?"100%":"auto"};\n    --local-opacity-100: ${this.loading?0:1};\n    --local-opacity-000: ${this.loading?1:0};\n    --local-border-radius: var(--wui-border-radius-${this.borderRadius});\n    `;const a=this.textVariant??d[this.size];return e.qy`
      <button
        data-variant=${this.variant}
        data-icon-left=${this.hasIconLeft}
        data-icon-right=${this.hasIconRight}
        data-size=${this.size}
        ?disabled=${this.disabled}
        ontouchstart
      >
        ${this.loadingTemplate()}
        <slot name="iconLeft" @slotchange=${()=>this.handleSlotLeftChange()}></slot>
        <wui-text variant=${a} color="inherit">
          <slot></slot>
        </wui-text>
        <slot name="iconRight" @slotchange=${()=>this.handleSlotRightChange()}></slot>
      </button>
    `}handleSlotLeftChange(){this.hasIconLeft=!0}handleSlotRightChange(){this.hasIconRight=!0}loadingTemplate(){if(this.loading){const a=u[this.size],o=this.disabled?c.disabled:c[this.variant];return e.qy`<wui-loading-spinner color=${o} size=${a}></wui-loading-spinner>`}return e.qy``}};g.styles=[i.W5,i.fD,n],l([(0,t.MZ)()],g.prototype,"size",void 0),l([(0,t.MZ)({type:Boolean})],g.prototype,"disabled",void 0),l([(0,t.MZ)({type:Boolean})],g.prototype,"fullWidth",void 0),l([(0,t.MZ)({type:Boolean})],g.prototype,"loading",void 0),l([(0,t.MZ)()],g.prototype,"variant",void 0),l([(0,t.MZ)({type:Boolean})],g.prototype,"hasIconLeft",void 0),l([(0,t.MZ)({type:Boolean})],g.prototype,"hasIconRight",void 0),l([(0,t.MZ)()],g.prototype,"borderRadius",void 0),l([(0,t.MZ)()],g.prototype,"textVariant",void 0),g=l([(0,s.E)("wui-button")],g)}}]);