@everymatrix/casino-engagement-suite-tournament 1.46.0 → 1.47.0

package/dist/cjs/casino-engagement-suite-tournament.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-16d5d7c3.js');
+const index = require('./index-6f030cde.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_3.cjs",[[1,"casino-engagement-suite-tournament",{"language":[1],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isActionJoinPending":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32]},[[8,"message","handleEvent"]]],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_3.cjs",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isActionJoinPending":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32],"newIdList":[32]},[[8,"message","handleEvent"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/{index-16d5d7c3.js → index-6f030cde.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'casino-engagement-suite-tournament';
-const BUILD = /* casino-engagement-suite-tournament */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: false };
+const BUILD = /* casino-engagement-suite-tournament */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: true, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
  Stencil Client Platform v4.20.0 | MIT Licensed | https://stenciljs.com
@@ -286,13 +286,6 @@ var h = (nodeName, vnodeData, ...children) => {
       }
     }
   }
-  if (typeof nodeName === "function") {
-    return nodeName(
-      vnodeData === null ? {} : vnodeData,
-      vNodeChildren,
-      vdomFnUtils
-    );
-  }
   const vnode = newVNode(nodeName, null);
   vnode.$attrs$ = vnodeData;
   if (vNodeChildren.length > 0) {
@@ -327,36 +320,6 @@ var newVNode = (tag, text) => {
 };
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
-var vdomFnUtils = {
-  forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
-  map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate)
-};
-var convertToPublic = (node) => ({
-  vattrs: node.$attrs$,
-  vchildren: node.$children$,
-  vkey: node.$key$,
-  vname: node.$name$,
-  vtag: node.$tag$,
-  vtext: node.$text$
-});
-var convertToPrivate = (node) => {
-  if (typeof node.vtag === "function") {
-    const vnodeData = { ...node.vattrs };
-    if (node.vkey) {
-      vnodeData.key = node.vkey;
-    }
-    if (node.vname) {
-      vnodeData.name = node.vname;
-    }
-    return h(node.vtag, vnodeData, ...node.vchildren || []);
-  }
-  const vnode = newVNode(node.vtag, node.vtext);
-  vnode.$attrs$ = node.vattrs;
-  vnode.$children$ = node.vchildren;
-  vnode.$key$ = node.vkey;
-  vnode.$name$ = node.vname;
-  return vnode;
-};
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
@@ -1245,6 +1208,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
     );
   }
+  const elm = hostRef.$hostElement$ ;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
@@ -1254,6 +1218,18 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
     if (instance) {
+      if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
+        const watchMethods = cmpMeta.$watchers$[propName];
+        if (watchMethods) {
+          watchMethods.map((watchMethodName) => {
+            try {
+              instance[watchMethodName](newVal, oldVal, propName);
+            } catch (e) {
+              consoleError(e, elm);
+            }
+          });
+        }
+      }
       if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
         scheduleUpdate(hostRef, false);
       }
@@ -1265,7 +1241,10 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || BUILD.watchCallback ) {
+  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
+    if (Cstr.watchers && !cmpMeta.$watchers$) {
+      cmpMeta.$watchers$ = Cstr.watchers;
+    }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -1348,6 +1327,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
       }
       if (!Cstr.isProxied) {
+        {
+          cmpMeta.$watchers$ = Cstr.watchers;
+        }
         proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
         Cstr.isProxied = true;
       }
@@ -1363,6 +1345,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       {
         hostRef.$flags$ &= ~8 /* isConstructingInstance */;
       }
+      {
+        hostRef.$flags$ |= 128 /* isWatchReady */;
+      }
       endNewInstance();
       fireConnectedCallback(hostRef.$lazyInstance$);
     } else {
@@ -1490,6 +1475,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
+      var _a2;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -1508,6 +1494,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$attrsToReflect$ = [];
       }
+      {
+        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
+      }
       const tagName = cmpMeta.$tagName$;
       const HostElement = class extends HTMLElement {
         // StencilLazyHost
@@ -1591,9 +1580,6 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   }
   endBootstrap();
 };
-
-// src/runtime/fragment.ts
-var Fragment = (_, children) => children;
 var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
   if (listeners) {
     listeners.map(([flags, name, method]) => {
@@ -1631,7 +1617,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-exports.Fragment = Fragment;
 exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.createEvent = createEvent;

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const casinoEngagementSuiteTournament = require('./casino-engagement-suite-tournament-1b738bb2.js');
-require('./index-16d5d7c3.js');
+const casinoEngagementSuiteTournament = require('./casino-engagement-suite-tournament-81cbca40.js');
+require('./index-6f030cde.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-16d5d7c3.js');
+const index = require('./index-6f030cde.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_3.cjs",[[1,"casino-engagement-suite-tournament",{"language":[1],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isActionJoinPending":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32]},[[8,"message","handleEvent"]]],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
+  return index.bootstrapLazy([["casino-engagement-suite-progress-bar_3.cjs",[[1,"casino-engagement-suite-tournament",{"language":[1],"show":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"device":[1],"leaderboardsInit":[16],"tab":[32],"locale":[32],"tournamentItem":[32],"tournamentList":[32],"leaderboards":[32],"isActionJoinPending":[32],"isDialogOpen":[32],"isShowInfo":[32],"page":[32],"tournamentInDialog":[32],"dialog":[32],"time":[32],"newIdList":[32]},[[8,"message","handleEvent"]],{"newIdList":["checkNewIdList"],"tournamentList":["syncBarState"],"show":["showPropWatcher"]}],[1,"casino-engagement-suite-progress-bar",{"value":[2],"disabled":[4],"hidePercent":[4,"hide-percent"],"indeterminate":[4],"clientStyling":[513,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"limitStylingAppends":[32]}],[4,"general-styling-wrapper",{"clientStyling":[1,"client-styling"],"clientStylingUrl":[1,"client-styling-url"],"translationUrl":[1,"translation-url"],"targetTranslations":[16]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/casino-engagement-suite-tournament/casino-engagement-suite-tournament.css

@@ -1,59 +1,3 @@
-.GradientRounded {
-  display: block;
-  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
-  color: rgba(30, 22, 56, 1);
-  
-  position: relative;
-  border-radius: 16px;
-
-  &.Hollow {
-    background: rgba(30, 22, 56, 1);
-    color: #FFFFFF;
-    &::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      border-radius: 15px;
-      border: 1px solid transparent;
-      background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;
-      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-      mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: destination-out;
-      mask-composite: exclude;
-    }
-
-  }
-}
-
-.GradientRoundedButton {
-  border: none;
-  padding: 7px;
-  
-  height: 32px;
-  width: 100%;
-  
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 17.07px;
-  text-align: center;
-  
-  transition: .5s opacity;
-
-  cursor: pointer;
-  &.Pending {
-    cursor: not-allowed;
-    opacity: .3;
-  }
-
-  &.Hollow {
-    
-    span {
-      background: -webkit-linear-gradient(98.25deg, rgb(255, 148, 0) 22.48%, rgb(254, 247, 70) 131.02%, rgb(255, 226, 74) 131.9%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-  }
-}
 .Wrapper {
   height: 100%;
   position: relative;
@@ -61,8 +5,11 @@
   display: flex;
   background-color: var(--emw--color-background, hsl(254, 44%, 15%));
   flex-direction: column;
-  border-radius: 8px;
-  overflow: hidden;
+  border-radius: 24px;
+  overflow-y: auto;
+}
+.Wrapper.Mobile {
+  border-radius: 16px;
 }
 
 .WrapperContent {
@@ -73,20 +20,25 @@
   filter: brightness(53.3333333333%);
 }
 
+.Wrapper.Mobile .WrapperBar {
+  padding: 20px 8px 8px;
+}
+
 .WrapperBar {
   display: flex;
   width: 100%;
-  padding: 12px 8px 8px;
+  padding: 32px 20px 20px;
 }
 
 .WrapperBarLeft, .WrapperBarRight {
   cursor: pointer;
+  z-index: 1;
 }
 
 .WrapperBarMiddle {
   flex-grow: 1;
   text-align: center;
-  font-size: 16px;
+  font-size: var(--emw--font-size-medium, 16px);
   line-height: 16px;
   font-weight: 500;
   color: var(--emw--color-secondary, rgb(187, 185, 195));
@@ -94,7 +46,7 @@
 
 :host {
   display: block;
-  font-size: 12px;
+  font-size: var(--emw--font-size-x-small, 12px);
   font-family: Inter;
 }
 
@@ -102,8 +54,12 @@
   margin: 24px 0;
   padding: 0 20px;
 }
+.Row:first-child {
+  margin: 0;
+}
 
 .LeaderboardsItem {
+  position: relative;
   margin: 10px 0;
   border: 1px solid rgb(64, 57, 86);
   border-radius: 16px;
@@ -111,6 +67,9 @@
 .LeaderboardsItem.Hollow {
   border-color: transparent;
 }
+.LeaderboardsItem:first-child {
+  margin-top: 0;
+}
 
 .LeaderboardsItemContainer {
   padding-top: 16px;
@@ -128,12 +87,12 @@
 .TimeContainer .Time {
   display: flex;
   justify-content: space-between;
-  font-size: 11px;
+  font-size: var(--emw--font-size-x-small, 12px);
   align-items: center;
   color: var(--emw--color-secondary, rgb(187, 185, 195));
 }
 .TimeContainer .Time button {
-  font-size: 12px;
+  font-size: var(--emw--font-size-x-small, 12px);
   height: 20px;
   padding: 0;
 }
@@ -178,7 +137,7 @@
   display: flex;
   justify-content: space-between;
   justify-content: start;
-  font-size: 12px;
+  font-size: var(--emw--font-size-x-small, 12px);
   margin-bottom: -1px;
 }
 .Tabs > div {
@@ -192,7 +151,7 @@
 }
 
 .Title {
-  font-size: 16px;
+  font-size: var(--emw--font-size-medium, 16px);
   font-weight: 700;
   line-height: 19.5px;
   text-align: left;
@@ -282,6 +241,34 @@
   color: var(--emw--color-primary, rgb(255, 214, 47));
 }
 
+.LeaderboardLabels {
+  position: absolute;
+  top: -6px;
+  right: 18px;
+  display: flex;
+  gap: 4px;
+}
+
+.LeaderboardLabel {
+  width: 30px;
+  height: 15px;
+  background: var(--emw--engagement-suite-gradient-golden, linear-gradient(180deg, #FFB801 15.86%, #FEF746 31.36%, #FBFFE0 36.86%, #FFFA60 47.86%, #FF9400 87.36%));
+  border-radius: var(--emw--border-radius-x-small, 2px);
+  display: inline-flex;
+  padding: 0 2px;
+  align-items: center;
+  justify-content: center;
+}
+.LeaderboardLabel span {
+  display: inline-block;
+  text-transform: uppercase;
+  font-size: var(--emw--font-size-3x-small, 7px);
+  line-height: 7px;
+  font-weight: var(--emw--font-weight-bold, 700);
+  font-family: var(--emw--font-family-secondary, "Montserrat", sans-serif);
+  color: var(--emw--color-background, #1E1638);
+}
+
 .Games {
   margin: 24px 0;
   padding: 0 20px;
@@ -322,7 +309,7 @@ dialog > div {
 
 .DialogContentUnjoinTitle {
   font-family: Montserrat;
-  font-size: 20px;
+  font-size: var(--emw--font-size-large, 20px);
   font-weight: 600;
   line-height: 24.38px;
   text-align: center;
@@ -337,7 +324,7 @@ dialog > div {
   padding: 32px;
   padding-top: 10px;
   color: var(--emw--color-secondary, rgb(187, 185, 195));
-  font-size: 14px;
+  font-size: var(--emw--font-size-small, 14px);
 }
 
 .PageConfirmContainer {
@@ -353,7 +340,7 @@ dialog > div {
   gap: 20px;
 }
 .PageConfirm .Title {
-  font-size: 20px;
+  font-size: var(--emw--font-size-large, 20px);
   text-align: center;
 }
 .PageConfirm .Description {
@@ -371,4 +358,50 @@ dialog > div {
   display: flex;
   flex-direction: column;
   gap: 10px;
+}
+
+.GradientRounded {
+  display: block;
+  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%);
+  color: rgb(30, 22, 56);
+  position: relative;
+  border-radius: 16px;
+}
+.GradientRounded.Hollow {
+  background: rgb(30, 22, 56);
+  color: #FFFFFF;
+}
+.GradientRounded.Hollow::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 15px;
+  border: 1px solid transparent;
+  background: linear-gradient(98.25deg, #FF9400 22.48%, #FEF746 131.02%, #FFE24A 131.9%) border-box;
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+}
+
+.GradientRoundedButton {
+  border: none;
+  padding: 7px;
+  height: 32px;
+  width: 100%;
+  font-size: var(--emw--font-size-small, 14px);
+  font-weight: 700;
+  line-height: 17.07px;
+  text-align: center;
+  transition: 0.5s opacity;
+  cursor: pointer;
+}
+.GradientRoundedButton.Pending {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
+.GradientRoundedButton.Hollow span {
+  background: -webkit-linear-gradient(98.25deg, rgb(255, 148, 0) 22.48%, rgb(254, 247, 70) 131.02%, rgb(255, 226, 74) 131.9%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }