@dcl/governance-site 2.0.0 → 2.0.1-20995780683.commit-d6baf5e

package/assets/index-42ce7246.js

@@ -0,0 +1,63 @@
+import{j as u,r as p,l as g,m as c}from"./index-48bd3fca.js";import{n as r,c as m}from"./index-84e8ecf6.js";import{o as f}from"./if-defined-0a35f675.js";const b=u`
+  :host {
+    display: block;
+    width: var(--local-width);
+    height: var(--local-height);
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center center;
+    border-radius: inherit;
+    user-select: none;
+    user-drag: none;
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+  }
+
+  :host([data-boxed='true']) {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    border-radius: ${({borderRadius:e})=>e[2]};
+  }
+
+  :host([data-boxed='true']) img {
+    width: 20px;
+    height: 20px;
+    border-radius: ${({borderRadius:e})=>e[16]};
+  }
+
+  :host([data-full='true']) img {
+    width: 100%;
+    height: 100%;
+  }
+
+  :host([data-boxed='true']) wui-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  :host([data-icon='error']) {
+    background-color: ${({tokens:e})=>e.core.backgroundError};
+  }
+
+  :host([data-rounded='true']) {
+    border-radius: ${({borderRadius:e})=>e[16]};
+  }
+`;var o=globalThis&&globalThis.__decorate||function(e,i,a,n){var l=arguments.length,s=l<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,a):n,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(e,i,a,n);else for(var h=e.length-1;h>=0;h--)(d=e[h])&&(s=(l<3?d(s):l>3?d(i,a,s):d(i,a))||s);return l>3&&s&&Object.defineProperty(i,a,s),s};let t=class extends g{constructor(){super(...arguments),this.src="./path/to/image.jpg",this.alt="Image",this.size=void 0,this.boxed=!1,this.rounded=!1,this.fullSize=!1}render(){const i={inherit:"inherit",xxs:"2",xs:"3",sm:"4",md:"4",mdl:"5",lg:"5",xl:"6",xxl:"7","3xl":"8","4xl":"9","5xl":"10"};return this.style.cssText=`
+      --local-width: ${this.size?`var(--apkt-spacing-${i[this.size]});`:"100%"};
+      --local-height: ${this.size?`var(--apkt-spacing-${i[this.size]});`:"100%"};
+      `,this.dataset.boxed=this.boxed?"true":"false",this.dataset.rounded=this.rounded?"true":"false",this.dataset.full=this.fullSize?"true":"false",this.dataset.icon=this.iconColor||"inherit",this.icon?c`<wui-icon
+        color=${this.iconColor||"inherit"}
+        name=${this.icon}
+        size="lg"
+      ></wui-icon> `:this.logo?c`<wui-icon size="lg" color="inherit" name=${this.logo}></wui-icon> `:c`<img src=${f(this.src)} alt=${this.alt} @error=${this.handleImageError} />`}handleImageError(){this.dispatchEvent(new CustomEvent("onLoadError",{bubbles:!0,composed:!0}))}};t.styles=[p,b];o([r()],t.prototype,"src",void 0);o([r()],t.prototype,"logo",void 0);o([r()],t.prototype,"icon",void 0);o([r()],t.prototype,"iconColor",void 0);o([r()],t.prototype,"alt",void 0);o([r()],t.prototype,"size",void 0);o([r({type:Boolean})],t.prototype,"boxed",void 0);o([r({type:Boolean})],t.prototype,"rounded",void 0);o([r({type:Boolean})],t.prototype,"fullSize",void 0);t=o([m("wui-image")],t);

package/assets/index-47e87339.js

@@ -0,0 +1,152 @@
+import{j as b,r as g,k as p,l as h,m as u}from"./index-48bd3fca.js";import{n,c as v}from"./index-84e8ecf6.js";import"./index-07a61b45.js";const m=b`
+  :host {
+    width: var(--local-width);
+  }
+
+  button {
+    width: var(--local-width);
+    white-space: nowrap;
+    column-gap: ${({spacing:t})=>t[2]};
+    transition:
+      scale ${({durations:t})=>t.lg} ${({easings:t})=>t["ease-out-power-1"]},
+      background-color ${({durations:t})=>t.lg}
+        ${({easings:t})=>t["ease-out-power-2"]},
+      border-radius ${({durations:t})=>t.lg}
+        ${({easings:t})=>t["ease-out-power-1"]};
+    will-change: scale, background-color, border-radius;
+    cursor: pointer;
+  }
+
+  /* -- Sizes --------------------------------------------------- */
+  button[data-size='sm'] {
+    border-radius: ${({borderRadius:t})=>t[2]};
+    padding: 0 ${({spacing:t})=>t[2]};
+    height: 28px;
+  }
+
+  button[data-size='md'] {
+    border-radius: ${({borderRadius:t})=>t[3]};
+    padding: 0 ${({spacing:t})=>t[4]};
+    height: 38px;
+  }
+
+  button[data-size='lg'] {
+    border-radius: ${({borderRadius:t})=>t[4]};
+    padding: 0 ${({spacing:t})=>t[5]};
+    height: 48px;
+  }
+
+  /* -- Variants --------------------------------------------------------- */
+  button[data-variant='accent-primary'] {
+    background-color: ${({tokens:t})=>t.core.backgroundAccentPrimary};
+    color: ${({tokens:t})=>t.theme.textInvert};
+  }
+
+  button[data-variant='accent-secondary'] {
+    background-color: ${({tokens:t})=>t.core.foregroundAccent010};
+    color: ${({tokens:t})=>t.core.textAccentPrimary};
+  }
+
+  button[data-variant='neutral-primary'] {
+    background-color: ${({tokens:t})=>t.theme.backgroundInvert};
+    color: ${({tokens:t})=>t.theme.textInvert};
+  }
+
+  button[data-variant='neutral-secondary'] {
+    background-color: transparent;
+    border: 1px solid ${({tokens:t})=>t.theme.borderSecondary};
+    color: ${({tokens:t})=>t.theme.textPrimary};
+  }
+
+  button[data-variant='neutral-tertiary'] {
+    background-color: ${({tokens:t})=>t.theme.foregroundPrimary};
+    color: ${({tokens:t})=>t.theme.textPrimary};
+  }
+
+  button[data-variant='error-primary'] {
+    background-color: ${({tokens:t})=>t.core.textError};
+    color: ${({tokens:t})=>t.theme.textInvert};
+  }
+
+  button[data-variant='error-secondary'] {
+    background-color: ${({tokens:t})=>t.core.backgroundError};
+    color: ${({tokens:t})=>t.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;
+  }
+`;var i=globalThis&&globalThis.__decorate||function(t,a,e,s){var d=arguments.length,o=d<3?a:s===null?s=Object.getOwnPropertyDescriptor(a,e):s,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(t,a,e,s);else for(var c=t.length-1;c>=0;c--)(l=t[c])&&(o=(d<3?l(o):d>3?l(a,e,o):l(a,e))||o);return d>3&&o&&Object.defineProperty(a,e,o),o};const y={lg:"lg-regular-mono",md:"md-regular-mono",sm:"sm-regular-mono"},$={lg:"md",md:"md",sm:"sm"};let r=class extends h{constructor(){super(...arguments),this.size="lg",this.disabled=!1,this.fullWidth=!1,this.loading=!1,this.variant="accent-primary"}render(){this.style.cssText=`
+    --local-width: ${this.fullWidth?"100%":"auto"};
+     `;const a=this.textVariant??y[this.size];return u`
+      <button data-variant=${this.variant} data-size=${this.size} ?disabled=${this.disabled}>
+        ${this.loadingTemplate()}
+        <slot name="iconLeft"></slot>
+        <wui-text variant=${a} color="inherit">
+          <slot></slot>
+        </wui-text>
+        <slot name="iconRight"></slot>
+      </button>
+    `}loadingTemplate(){if(this.loading){const a=$[this.size],e=this.variant==="neutral-primary"||this.variant==="accent-primary"?"invert":"primary";return u`<wui-loading-spinner color=${e} size=${a}></wui-loading-spinner>`}return null}};r.styles=[g,p,m];i([n()],r.prototype,"size",void 0);i([n({type:Boolean})],r.prototype,"disabled",void 0);i([n({type:Boolean})],r.prototype,"fullWidth",void 0);i([n({type:Boolean})],r.prototype,"loading",void 0);i([n()],r.prototype,"variant",void 0);i([n()],r.prototype,"textVariant",void 0);r=i([v("wui-button")],r);