https://lotterytoken.net/assets/wui-button-DjT4bqL9.js

1import{a as e,n as t,s as n,u as r}from"./wui-text-I1ZBsytF.js";import{a as i,t as a}from"./lit-CpnwSwGp.js";import{o}from"./class-map-BquNO_PN.js";import"./wui-loading-spinner-CASXp9bh.js";var s=r`
2  :host {
3    width: var(--local-width);
4  }
5
6  button {
7    width: var(--local-width);
8    white-space: nowrap;
9    column-gap: ${({spacing:e})=>e[2]};
10    transition:
11      scale ${({durations:e})=>e.lg} ${({easings:e})=>e[`ease-out-power-1`]},
12      background-color ${({durations:e})=>e.lg}
13        ${({easings:e})=>e[`ease-out-power-2`]},
14      border-radius ${({durations:e})=>e.lg}
15        ${({easings:e})=>e[`ease-out-power-1`]};
16    will-change: scale, background-color, border-radius;
17    cursor: pointer;
18  }
19
20  /* -- Sizes --------------------------------------------------- */
21  button[data-size='sm'] {
22    border-radius: ${({borderRadius:e})=>e[2]};
23    padding: 0 ${({spacing:e})=>e[2]};
24    height: 28px;
25  }
26
27  button[data-size='md'] {
28    border-radius: ${({borderRadius:e})=>e[3]};
29    padding: 0 ${({spacing:e})=>e[4]};
30    height: 38px;
31  }
32
33  button[data-size='lg'] {
34    border-radius: ${({borderRadius:e})=>e[4]};
35    padding: 0 ${({spacing:e})=>e[5]};
36    height: 48px;
37  }
38
39  /* -- Variants --------------------------------------------------------- */
40  button[data-variant='accent-primary'] {
41    background-color: ${({tokens:e})=>e.core.backgroundAccentPrimary};
42    color: ${({tokens:e})=>e.theme.textInvert};
43  }
44
45  button[data-variant='accent-secondary'] {
46    background-color: ${({tokens:e})=>e.core.foregroundAccent010};
47    color: ${({tokens:e})=>e.core.textAccentPrimary};
48  }
49
50  button[data-variant='neutral-primary'] {
51    background-color: ${({tokens:e})=>e.theme.backgroundInvert};
52    color: ${({tokens:e})=>e.theme.textInvert};
53  }
54
55  button[data-variant='neutral-secondary'] {
56    background-color: transparent;
57    border: 1px solid ${({tokens:e})=>e.theme.borderSecondary};
58    color: ${({tokens:e})=>e.theme.textPrimary};
59  }
60
61  button[data-variant='neutral-tertiary'] {
62    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
63    color: ${({tokens:e})=>e.theme.textPrimary};
64  }
65
66  button[data-variant='error-primary'] {
67    background-color: ${({tokens:e})=>e.core.textError};
68    color: ${({tokens:e})=>e.theme.textInvert};
69  }
70
71  button[data-variant='error-secondary'] {
72    background-color: ${({tokens:e})=>e.core.backgroundError};
73    color: ${({tokens:e})=>e.core.textError};
74  }
75
76  button[data-variant='shade'] {
77    background: var(--wui-color-gray-glass-002);
78    color: var(--wui-color-fg-200);
79    border: none;
80    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
81  }
82
83  /* -- Focus states --------------------------------------------------- */
84  button[data-size='sm']:focus-visible:enabled {
85    border-radius: 28px;
86  }
87
88  button[data-size='md']:focus-visible:enabled {
89    border-radius: 38px;
90  }
91
92  button[data-size='lg']:focus-visible:enabled {
93    border-radius: 48px;
94  }
95  button[data-variant='shade']:focus-visible:enabled {
96    background: var(--wui-color-gray-glass-005);
97    box-shadow:
98      inset 0 0 0 1px var(--wui-color-gray-glass-010),
99      0 0 0 4px var(--wui-color-gray-glass-002);
100  }
101
102  /* -- Hover & Active states ----------------------------------------------------------- */
103  @media (hover: hover) {
104    button[data-size='sm']:hover:enabled {
105      border-radius: 28px;
106    }
107
108    button[data-size='md']:hover:enabled {
109      border-radius: 38px;
110    }
111
112    button[data-size='lg']:hover:enabled {
113      border-radius: 48px;
114    }
115
116    button[data-variant='shade']:hover:enabled {
117      background: var(--wui-color-gray-glass-002);
118    }
119
120    button[data-variant='shade']:active:enabled {
121      background: var(--wui-color-gray-glass-005);
122    }
123  }
124
125  button[data-size='sm']:active:enabled {
126    border-radius: 28px;
127  }
128
129  button[data-size='md']:active:enabled {
130    border-radius: 38px;
131  }
132
133  button[data-size='lg']:active:enabled {
134    border-radius: 48px;
135  }
136
137  /* -- Disabled states --------------------------------------------------- */
138  button:disabled {
139    opacity: 0.3;
140  }
141`,c=function(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a},l={lg:`lg-regular-mono`,md:`md-regular-mono`,sm:`sm-regular-mono`},u={lg:`md`,md:`md`,sm:`sm`},d=class extends a{constructor(){super(...arguments),this.size=`lg`,this.disabled=!1,this.fullWidth=!1,this.loading=!1,this.variant=`accent-primary`}render(){this.style.cssText=`
142    --local-width: ${this.fullWidth?`100%`:`auto`};
143     `;let e=this.textVariant??l[this.size];return i`
144      <button data-variant=${this.variant} data-size=${this.size} ?disabled=${this.disabled}>
145        ${this.loadingTemplate()}
146        <slot name="iconLeft"></slot>
147        <wui-text variant=${e} color="inherit">
148          <slot></slot>
149        </wui-text>
150        <slot name="iconRight"></slot>
151      </button>
152    `}loadingTemplate(){if(this.loading){let e=u[this.size];return i`<wui-loading-spinner color=${this.variant===`neutral-primary`||this.variant===`accent-primary`?`invert`:`primary`} size=${e}></wui-loading-spinner>`}return null}};d.styles=[n,e,s],c([o()],d.prototype,`size`,void 0),c([o({type:Boolean})],d.prototype,`disabled`,void 0),c([o({type:Boolean})],d.prototype,`fullWidth`,void 0),c([o({type:Boolean})],d.prototype,`loading`,void 0),c([o()],d.prototype,`variant`,void 0),c([o()],d.prototype,`textVariant`,void 0),d=c([t(`wui-button`)],d);