@safe-stars/components/dist/index-B5kxjjR3.cjs

React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.

"use strict";const t=require("./index-CtZaCMo8.cjs"),r=require("./if-defined-MmHKu2JE.cjs");require("./index-BXulAD-4.cjs");const x=t.i`
  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 m=function(i,o,a,l){var n=arguments.length,e=n<3?o:l===null?l=Object.getOwnPropertyDescriptor(o,a):l,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(i,o,a,l);else for(var u=i.length-1;u>=0;u--)(c=i[u])&&(e=(n<3?c(e):n>3?c(o,a,e):c(o,a))||e);return n>3&&e&&Object.defineProperty(o,a,e),e};let s=class extends t.i$1{constructor(){super(...arguments),this.tokenName="",this.tokenImageUrl="",this.tokenValue=0,this.tokenAmount="0.0",this.tokenCurrency="",this.clickable=!1}render(){return t.x`
      <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">
              ${r.UiHelperUtil.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?t.x`<wui-image alt=${this.tokenName} src=${this.tokenImageUrl}></wui-image>`:t.x`<wui-icon name="coinPlaceholder" color="fg-100"></wui-icon>`}};s.styles=[t.resetStyles,t.elementStyles,x];m([r.n()],s.prototype,"tokenName",void 0);m([r.n()],s.prototype,"tokenImageUrl",void 0);m([r.n({type:Number})],s.prototype,"tokenValue",void 0);m([r.n()],s.prototype,"tokenAmount",void 0);m([r.n()],s.prototype,"tokenCurrency",void 0);m([r.n({type:Boolean})],s.prototype,"clickable",void 0);s=m([r.customElement("wui-list-token")],s);const h=t.i`
  :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(i,o,a,l){var n=arguments.length,e=n<3?o:l===null?l=Object.getOwnPropertyDescriptor(o,a):l,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(i,o,a,l);else for(var u=i.length-1;u>=0;u--)(c=i[u])&&(e=(n<3?c(e):n>3?c(o,a,e):c(o,a))||e);return n>3&&e&&Object.defineProperty(o,a,e),e};let d=class extends t.i$1{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});
    `,t.x`${this.visualTemplate()}`}visualTemplate(){if(this.imageSrc)return this.dataset.variant="image",t.x`<wui-image src=${this.imageSrc} alt=${this.alt??"avatar"}></wui-image>`;if(this.address){this.dataset.variant="generated";const o=r.UiHelperUtil.generateAvatarColors(this.address);return this.style.cssText+=`
 ${o}`,null}return this.dataset.variant="default",null}};d.styles=[t.resetStyles,h];v([r.n()],d.prototype,"imageSrc",void 0);v([r.n()],d.prototype,"alt",void 0);v([r.n()],d.prototype,"address",void 0);v([r.n()],d.prototype,"size",void 0);d=v([r.customElement("wui-avatar")],d);
//# sourceMappingURL=index-B5kxjjR3.cjs.map