@yoobic/yobi 8.5.0-60 → 8.5.0-62

package/dist/cjs/yoo-battle-count-down.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-7790c794.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const index$1 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./index-a1bbe627.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const battleCountDownCss = "svg:not(:root){overflow:hidden}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}.text-extra-small{font-size:var(--font-size-12, 0.75rem) !important}.text-small{font-size:var(--font-size-14, 0.875rem) !important}.text-medium{font-size:var(--font-size-16, 1rem) !important}.text-large{font-size:var(--font-size-18, 1.125rem) !important}.text-extra-large{font-size:var(--font-size-36, 2.25rem) !important}.text-extra-extra-large{font-size:var(--font-size-54, 3.375rem) !important}:host{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .top-container,:host .bottom-container{-ms-flex:1;flex:1}:host .top-container .user-container,:host .bottom-container .user-container{padding:var(--spacing-48, 3rem) var(--spacing-32, 2rem)}:host .top-container .user-container .profile-container,:host .top-container .user-container .stats-container,:host .bottom-container .user-container .profile-container,:host .bottom-container .user-container .stats-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:var(--spacing-16, 1rem) 0}:host .top-container .user-container .profile-container,:host .bottom-container .user-container .profile-container{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}:host .top-container .user-container .profile-container .user-name,:host .bottom-container .user-container .profile-container .user-name{padding:0 var(--spacing-16, 1rem);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem)}:host .top-container .user-container .profile-container .user-name.small-phone,:host .bottom-container .user-container .profile-container .user-name.small-phone{font-size:var(--font-size-16, 1rem)}:host .top-container .user-container .stats-container,:host .bottom-container .user-container .stats-container{text-align:center}:host .top-container .user-container .stats-container .inner-container .stat,:host .bottom-container .user-container .stats-container .inner-container .stat{font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .top-container .user-container .stats-container .inner-container .stat.small-phone,:host .bottom-container .user-container .stats-container .inner-container .stat.small-phone{font-size:var(--font-size-18, 1.125rem)}:host .top-container .user-container .stats-container .inner-container .title,:host .bottom-container .user-container .stats-container .inner-container .title{font-size:var(--font-size-18, 1.125rem)}:host .top-container .user-container .stats-container .inner-container .title.small-phone,:host .bottom-container .user-container .stats-container .inner-container .title.small-phone{font-size:var(--font-size-16, 1rem)}:host .top-container{position:absolute;width:100%;height:100%;background-color:var(--app-color, #5a30f4);-webkit-box-shadow:0 -16px 17px 0 rgba(0, 0, 0, 0.05);box-shadow:0 -16px 17px 0 rgba(0, 0, 0, 0.05);-webkit-clip-path:polygon(0 0, 100% 0, 100% 30%, 0 70%);clip-path:polygon(0 0, 100% 0, 100% 30%, 0 70%)}:host .top-container .user-container .profile-container,:host .top-container .user-container .stats-container{color:var(--light, #ffffff)}:host .top-container .user-container .profile-container{border-bottom:solid 0.4px var(--light-40, rgba(255, 255, 255, 0.4))}:host .top-container .user-container .stats-container .inner-container .title{color:var(--light-60, rgba(255, 255, 255, 0.6))}:host .top-container .user-container .stats-container .inner-container.battles{padding-right:var(--spacing-48, 3rem)}:host .top-container .countdown{position:absolute;top:var(--spacing-32, 2rem);right:0;width:var(--spacing-64, 4rem);padding-right:var(--spacing-32, 2rem)}:host .top-container .countdown yoo-progress-bar{--progress-value-font-size:var(--font-size-18, 1.125rem);--progress-bar-color:var(--light, #ffffff);--trail-bar-color:var(--light-20, rgba(255, 255, 255, 0.2))}:host .top-container .countdown div{position:absolute;top:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:inherit;height:100%}:host .middle-container{position:absolute;top:calc(50% - 2.8125rem);left:calc(50% - 2.8125rem);z-index:1;width:5.625rem;height:5.625rem;color:var(--text-color, #807f83);font-size:var(--font-size-28, 1.75rem);line-height:5.625rem;text-align:center;background-color:var(--light, #ffffff);border-radius:50%;-webkit-box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1))}:host .middle-container.small-phone{top:calc(50% - 2.1875rem);left:calc(50% - 2.1875rem);width:4.375rem;height:4.375rem;font-size:var(--font-size-18, 1.125rem);line-height:4.375rem}:host .bottom-container{background-color:var(--dark, #000000);-webkit-clip-path:polygon(0 70%, 100% 30%, 100% 100%, 0 100%);clip-path:polygon(0 70%, 100% 30%, 100% 100%, 0 100%)}:host .bottom-container .user-container{position:absolute;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host .bottom-container .user-container .profile-container,:host .bottom-container .user-container .stats-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row-reverse;flex-direction:row-reverse;color:var(--light, #ffffff)}:host .bottom-container .user-container .profile-container{border-top:solid 0.025rem var(--light-40, rgba(255, 255, 255, 0.4))}:host .bottom-container .user-container .profile-container .user-name{text-align:end}:host .bottom-container .user-container .stats-container .inner-container .title{color:var(--light-60, rgba(255, 255, 255, 0.6))}:host .bottom-container .user-container .stats-container .inner-container.battles{padding-left:var(--spacing-48, 3rem)}:host(.rtl){direction:ltr}";
@@ -31,16 +31,16 @@ const YooBattleCountDownComponent = class {
   }
   componentDidLoad() {
     if (this.animations && !index.Build.isServer) {
-      return overlays.gsapTimeline().then((timeline) => {
+      return index$1.gsapTimeline().then((timeline) => {
         if (!timeline) {
           return;
         }
         const tl = timeline({ onComplete: () => { } });
         tl.delay(0.5);
-        tl.from(this.getContainer('.middle-container'), 1.5, { scale: 2, opacity: 0, repeat: 0, ease: overlays.Elastic.easeOut.config(1, 0.3) }, 0);
-        tl.fromTo(this.getContainer('.top-container .profile-container'), 0.5, { xPercent: -100, opacity: 0 }, { ease: overlays.Back.easeOut, xPercent: 0, opacity: 1 }, 0.5);
+        tl.from(this.getContainer('.middle-container'), 1.5, { scale: 2, opacity: 0, repeat: 0, ease: index$1.Elastic.easeOut.config(1, 0.3) }, 0);
+        tl.fromTo(this.getContainer('.top-container .profile-container'), 0.5, { xPercent: -100, opacity: 0 }, { ease: index$1.Back.easeOut, xPercent: 0, opacity: 1 }, 0.5);
         tl.fromTo(this.getContainer('.top-container .stats-container'), 0.3, { opacity: 0 }, { opacity: 1 }, 0.6);
-        tl.fromTo(this.getContainer('.bottom-container .profile-container'), 0.5, { xPercent: 100, opacity: 0 }, { ease: overlays.Back.easeOut, xPercent: 0, opacity: 1 }, 0.7);
+        tl.fromTo(this.getContainer('.bottom-container .profile-container'), 0.5, { xPercent: 100, opacity: 0 }, { ease: index$1.Back.easeOut, xPercent: 0, opacity: 1 }, 0.7);
         tl.fromTo(this.getContainer('.bottom-container .stats-container'), 0.3, { opacity: 0 }, { opacity: 1 }, 0.8);
         tl.fromTo(this.getContainer('.countdown'), 0.5, { opacity: 0 }, { opacity: 1 }, 0);
       });
@@ -55,7 +55,7 @@ const YooBattleCountDownComponent = class {
       return;
     }
     try {
-      overlays.gsapTimeline().then((timeline) => {
+      index$1.gsapTimeline().then((timeline) => {
         const tl = timeline({ onComplete: () => this.finish.emit() });
         tl.to(this.getContainer('.top-container'), 0.5, { yPercent: -100 }, 0);
         tl.to(this.getContainer('.bottom-container'), 0.5, { yPercent: 100 }, 0);
@@ -68,19 +68,19 @@ const YooBattleCountDownComponent = class {
   }
   setCountDownTimer() {
     const ONE_SECOND_MILISECOND = 1000;
-    const requestIntervalID = overlays.requestInterval(() => {
+    const requestIntervalID = index$1.requestInterval(() => {
       this.innerTimer--;
       this.timerElement.value = (this.innerTimer / this.start) * 100;
-      this.timerElement.nextElementSibling.textContent = overlays.getFormattedCountDownToDisplay(this.innerTimer, false);
+      this.timerElement.nextElementSibling.textContent = index$1.getFormattedCountDownToDisplay(this.innerTimer, false);
       if (this.innerTimer < 0) {
-        overlays.cancelRequestInterval(requestIntervalID['value']);
+        index$1.cancelRequestInterval(requestIntervalID['value']);
         requestIntervalID['value'] = null;
         this.onTimeFinished();
       }
     }, ONE_SECOND_MILISECOND);
   }
   renderTimer() {
-    const countStartDownDisplay = overlays.getFormattedCountDownToDisplay(this.start, false);
+    const countStartDownDisplay = index$1.getFormattedCountDownToDisplay(this.start, false);
     const onCountingDown = (ev) => {
       if (ev && ev.detail && ev.detail === 100 && this.timerElement && this.timerElement.progressAnimationDuration === 0) {
         this.timerElement.progressAnimationDuration = 1.25;
@@ -98,8 +98,8 @@ const YooBattleCountDownComponent = class {
     }
   }
   renderUser(user) {
-    const avatarSize = overlays.isIphone5() || overlays.isIphoneSE() ? 'large' : 'extra-large';
-    const extraClass = overlays.isIphone5() || overlays.isIphoneSE() ? ' small-phone' : '';
+    const avatarSize = index$1.isIphone5() || index$1.isIphoneSE() ? 'large' : 'extra-large';
+    const extraClass = index$1.isIphone5() || index$1.isIphoneSE() ? ' small-phone' : '';
     return (index.h("div", { class: "user-container" }, index.h("div", { class: "profile-container" }, index.h("yoo-avatar", { user: user.user, size: avatarSize }), this.renderUserName(user, extraClass)), index.h("div", { class: "stats-container" }, this.renderUserStats(user, 'BATTLES', extraClass), this.renderUserStats(user, 'WINRATE', extraClass))));
   }
   getTotal(stats) {
@@ -110,10 +110,10 @@ const YooBattleCountDownComponent = class {
     return total ? (stats.won / total) * 100 : 0;
   }
   renderUserStats(user, title, extraClass) {
-    return (index.h("div", { class: 'inner-container ' + title.toLowerCase() }, index.h("div", { class: 'stat' + extraClass }, title === 'BATTLES' ? this.getTotal(user.stats) : this.getWinRate(user.stats).toFixed(1) + ' %'), index.h("div", { class: 'title' + extraClass }, overlays.translate(title))));
+    return (index.h("div", { class: 'inner-container ' + title.toLowerCase() }, index.h("div", { class: 'stat' + extraClass }, title === 'BATTLES' ? this.getTotal(user.stats) : this.getWinRate(user.stats).toFixed(1) + ' %'), index.h("div", { class: 'title' + extraClass }, index$1.translate(title))));
   }
   render() {
-    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: "top-container" }, this.renderTimer(), this.renderUser(this.user)), index.h("div", { class: { 'middle-container': true, 'small-phone': overlays.isIphone5() || overlays.isIphoneSE() } }, overlays.translate('VS')), index.h("div", { class: "bottom-container" }, this.renderUser(this.opponent))));
+    return (index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index.h("div", { class: "top-container" }, this.renderTimer(), this.renderUser(this.user)), index.h("div", { class: { 'middle-container': true, 'small-phone': index$1.isIphone5() || index$1.isIphoneSE() } }, index$1.translate('VS')), index.h("div", { class: "bottom-container" }, this.renderUser(this.opponent))));
   }
   get host() { return index.getElement(this); }
 };

package/dist/cjs/yoo-battle-result.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-7790c794.js');
+const index$1 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./index-a1bbe627.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const battleResultCss = "svg:not(:root){overflow:hidden}:host .top-container{display:-ms-flexbox;display:flex;padding:0 1rem;background-repeat:repeat-x}:host .top-container.lost .image-container{-ms-flex-align:end;align-items:flex-end}:host .top-container.lost .image-container .image-shadow{margin-top:0.78125rem}:host .top-container.waiting .image-container .image-shadow{margin-top:-0.78125rem}:host .top-container .result-container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end;padding-top:11.5rem}:host .top-container .result-container .result-title{font-size:var(--font-size-36, 2.25rem)}:host .top-container .result-container .result-message{overflow:hidden;color:var(--stable, #adadad);font-size:var(--font-size-18, 1.125rem);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host .top-container .image-container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding-right:0.7rem}:host .top-container .image-container yoo-img,:host .top-container .image-container yoo-empty-state{width:75%;height:75%}:host .top-container .image-container .image-shadow{width:63.5%;height:1.125rem;border-radius:50%;-webkit-box-shadow:0 -25px 7px 0 rgba(0, 0, 0, 0.13);box-shadow:0 -25px 7px 0 rgba(0, 0, 0, 0.13)}:host .bottom-container{padding:0 1rem 1rem 1rem}:host .bottom-container .users-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-top:1.25rem}:host .bottom-container .users-container .user-name,:host .bottom-container .users-container .opponent-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-ms-flex:1;flex:1;padding-right:var(--spacing-08, 0.5rem);font-size:var(--font-size-16, 1rem)}:host .bottom-container .users-container .user-name{padding-left:var(--spacing-08, 0.5rem)}:host .bottom-container .users-container .opponent-name{text-align:right}:host .bottom-container .inner-container{padding-top:1.25rem}:host .bottom-container .inner-container .title-container{padding-bottom:0.5rem;color:var(--text-color, #807f83);font-size:var(--font-size-16, 1rem)}:host .bottom-container .inner-container .score-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .bottom-container .inner-container .score-container .score{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;width:100%;height:1.5625rem;padding:0 0.5rem;line-height:1.5rem;border-radius:1rem}:host .bottom-container .inner-container .score-container .score yoo-icon,:host .bottom-container .inner-container .score-container .score div{color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host .bottom-container .inner-container .score-container .score yoo-icon{margin-right:5px}:host .bottom-container .inner-container .score-container .score.user{margin-right:var(--spacing-12, 0.75rem);text-align:flex-start;background-color:var(--app-color, #5a30f4)}:host .bottom-container .inner-container .score-container .score.opponent{text-align:end;background-color:var(--dark, #000000)}:host .bottom-container .inner-container .score-container .score.waiting{padding:0 0.78rem;background-color:var(--stable-light, #f1f1f1)}:host(.rtl) .bottom-container .users-container .opponent-name{padding-right:0;padding-left:var(--spacing-08, 0.5rem);text-align:left}:host(.rtl) .bottom-container .inner-container .score-container .score.user{margin-right:0;margin-left:var(--spacing-12, 0.75rem)}";
@@ -60,9 +60,9 @@ const YooBattleResultComponent = class {
       return {
         title: 'TIMETAKEN',
         userIcon: null,
-        userScore: overlays.translate('YOOBICSECS', { sec: this.getDurationInSec(this.entry.userDuration) }),
+        userScore: index$1.translate('YOOBICSECS', { sec: this.getDurationInSec(this.entry.userDuration) }),
         opponentIcon: null,
-        opponentScore: this.entry.opponentDuration !== undefined ? overlays.translate('YOOBICSECS', { sec: this.getDurationInSec(this.entry.opponentDuration) }) : undefined
+        opponentScore: this.entry.opponentDuration !== undefined ? index$1.translate('YOOBICSECS', { sec: this.getDurationInSec(this.entry.opponentDuration) }) : undefined
       };
     }
   }
@@ -79,7 +79,7 @@ const YooBattleResultComponent = class {
   }
   componentDidLoad() {
     if (!index.Build.isServer) {
-      return overlays.gsapTimeline().then((timeline) => {
+      return index$1.gsapTimeline().then((timeline) => {
         var _a;
         const tl = timeline();
         const userBars = Array.from(this.host.shadowRoot.querySelectorAll('.score.user'));
@@ -92,7 +92,7 @@ const YooBattleResultComponent = class {
           tl.staggerFromTo(userBars, 0.5, { xPercent: -200 }, { xPercent: 0 }, 0.1, 0);
           tl.staggerFromTo(opponentBars, 0.5, { xPercent: 200 }, { xPercent: 0 }, 0.1, 0.2);
           if (this.imageElement) {
-            tl.fromTo([this.imageElement, this.emptyStateElement], 0.8, { opacity: 0, scale: 0.5 }, { opacity: 1, scale: 1, ease: overlays.Elastic.easeOut.config(1, 0.5) }, 0);
+            tl.fromTo([this.imageElement, this.emptyStateElement], 0.8, { opacity: 0, scale: 0.5 }, { opacity: 1, scale: 1, ease: index$1.Elastic.easeOut.config(1, 0.5) }, 0);
           }
           tl.fromTo(this.host.shadowRoot.querySelectorAll('.result-container'), 0.4, { y: -10, opacity: 0 }, { y: 0, opacity: 1 }, 0.3);
         }
@@ -139,15 +139,15 @@ const YooBattleResultComponent = class {
     return (index.h("div", { class: "users-container" }, index.h("yoo-avatar", { class: "user", user: this.entry.user }), index.h("div", { class: "user-name" }, this.getUserName(this.entry.user)), index.h("div", { class: "opponent-name" }, this.getUserName(this.entry.opponent)), index.h("yoo-avatar", { class: "opponent", user: this.entry.opponent })));
   }
   renderInnerContainer(content) {
-    return (index.h("div", { class: "inner-container" }, index.h("div", { class: "title-container" }, overlays.translate(content.title)), index.h("div", { class: "score-container" }, this.renderScore('user', content), this.renderScore('opponent', content))));
+    return (index.h("div", { class: "inner-container" }, index.h("div", { class: "title-container" }, index$1.translate(content.title)), index.h("div", { class: "score-container" }, this.renderScore('user', content), this.renderScore('opponent', content))));
   }
   renderCourse() {
-    return (index.h("div", { class: "inner-container" }, index.h("div", { class: "title-container" }, overlays.translate('YOOBICPLAN')), index.h("yoo-card-course-row", { class: "no-border-bottom", entry: this.entry.plan })));
+    return (index.h("div", { class: "inner-container" }, index.h("div", { class: "title-container" }, index$1.translate('YOOBICPLAN')), index.h("yoo-card-course-row", { class: "no-border-bottom", entry: this.entry.plan })));
   }
   render() {
     var _a;
     const style = { 'background-image': `url(${this.isWon ? this.yellowBackground : this.greyBackground})` };
-    return (index.h(index.Host, { class: { rtl: overlays.isRTL() } }, index.h("div", { class: { 'top-container': true, [this.entry.battleStatus]: true }, style: style }, index.h("div", { class: "result-container" }, index.h("div", { class: "result-title" }, overlays.translate(this.resultState.title)), index.h("div", { class: "result-message" }, overlays.translate(this.resultState.message))), index.h("div", { class: "image-container" }, this.resultState.emptyState ? (index.h("yoo-empty-state", { ref: (el) => (this.emptyStateElement = el), type: this.resultState.image })) : (index.h("yoo-img", { ref: (el) => (this.imageElement = el), src: this.resultState.image })), index.h("div", { class: "image-shadow" }))), index.h("div", { class: "bottom-container" }, this.renderUsers(), this.scoreContent && this.renderInnerContainer(this.scoreContent), this.timeContent && this.renderInnerContainer(this.timeContent), this.starContent && this.renderInnerContainer(this.starContent), ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.plan) && this.renderCourse()), index.h("div", { class: "scroll-spacer" })));
+    return (index.h(index.Host, { class: { rtl: index$1.isRTL() } }, index.h("div", { class: { 'top-container': true, [this.entry.battleStatus]: true }, style: style }, index.h("div", { class: "result-container" }, index.h("div", { class: "result-title" }, index$1.translate(this.resultState.title)), index.h("div", { class: "result-message" }, index$1.translate(this.resultState.message))), index.h("div", { class: "image-container" }, this.resultState.emptyState ? (index.h("yoo-empty-state", { ref: (el) => (this.emptyStateElement = el), type: this.resultState.image })) : (index.h("yoo-img", { ref: (el) => (this.imageElement = el), src: this.resultState.image })), index.h("div", { class: "image-shadow" }))), index.h("div", { class: "bottom-container" }, this.renderUsers(), this.scoreContent && this.renderInnerContainer(this.scoreContent), this.timeContent && this.renderInnerContainer(this.timeContent), this.starContent && this.renderInnerContainer(this.starContent), ((_a = this.entry) === null || _a === void 0 ? void 0 : _a.plan) && this.renderCourse()), index.h("div", { class: "scroll-spacer" })));
   }
   static get assetsDirs() { return ["assets/battle-result"]; }
   get host() { return index.getElement(this); }

package/dist/cjs/yoo-battle-user-stats.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-7790c794.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const index$1 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./index-a1bbe627.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const battleUserStatsCss = "svg:not(:root){overflow:hidden}:host .outer-container{display:-ms-flexbox;display:flex;padding:0 var(--spacing-16, 1rem);background-color:var(--light, #ffffff)}:host .outer-container .user-details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding-left:var(--spacing-16, 1rem)}:host .outer-container .user-details span+yoo-tag{margin-top:var(--spacing-04, 0.25rem)}:host .outer-container .flex{display:-ms-flexbox;display:flex}:host .outer-container .stats-container{margin:auto;padding:var(--spacing-04, 0.25rem);text-align:center}:host .outer-container .stats-container .stat-count{color:var(--dark, #000000);font-weight:bold;font-size:var(--font-size-24, 1.5rem);line-height:1}:host .outer-container .stats-container .stat-name{color:var(--stable, #adadad);font-size:var(--font-size-14, 0.875rem)}:host(.battle-page) .outer-container{padding:1.5rem 1rem}:host(.web) .outer-container{height:10rem;padding:0;overflow:hidden;background-color:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host(.web) .outer-container .avatar-container{position:relative;min-width:115px;padding:var(--spacing-16, 1rem)}:host(.web) .outer-container .avatar-container .avatar-blob{width:111px;height:114px}:host(.web) .outer-container .avatar-container yoo-avatar{position:absolute;top:2.25rem;left:2.25rem}:host(.web) .outer-container .user-details{padding:var(--spacing-04, 0.25rem)}:host(.web) .outer-container .user-details .user-name{color:var(--dark, #000000);font-weight:bold;font-size:var(--font-size-20, 1.25rem)}:host(.web) .outer-container .user-details .battle-count{line-height:var(--spacing-32, 2rem)}:host(.web) .outer-container .stats-container .stat-count{color:var(--app-color, #5a30f4);font-weight:900;font-size:var(--font-size-36, 2.25rem);line-height:1.33}:host(.web) .outer-container .stats-container .stat-name{color:var(--dark, #000000);font-size:var(--font-size-16, 1rem)}:host(.web) .outer-container .blob-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:50%;flex-basis:50%;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}@media (max-width: 1439px){:host(.web) .outer-container .blob-container{display:none}}:host(.web) .outer-container .blob-container .blob-image{position:absolute;width:100%;height:13rem}:host(.web) .outer-container .blob-container .description-container{z-index:1;display:-ms-flexbox;display:flex}:host(.web) .outer-container .blob-container .description-container .text-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:var(--light, #ffffff);font-size:var(--font-size-16, 1rem);text-align:right}:host(.web) .outer-container .blob-container .description-container .text-container p{margin:0;font-weight:var(--font-weight-300, 300)}:host(.web) .outer-container .blob-container .description-container yoo-icon{position:relative;margin:0 var(--spacing-24, 1.5rem)}:host(.rtl) .outer-container .user-details{padding-right:var(--spacing-16, 1rem);padding-left:0}";
@@ -34,7 +34,7 @@ const YooBattleUserStatsComponent = class {
     if (index.Build.isServer) {
       return;
     }
-    return overlays.gsapTimeline().then((timeline) => {
+    return index$1.gsapTimeline().then((timeline) => {
       if (!timeline) {
         return;
       }
@@ -49,21 +49,21 @@ const YooBattleUserStatsComponent = class {
   }
   renderStatsContainers() {
     return [
-      index.h("div", { class: "stats-container" }, index.h("div", { class: "stat-count" }, this.victories || 0), index.h("div", { class: "stat-name" }, this.victories > 1 || !this.victories ? overlays.translate('YOOBICWINS') : overlays.translate('VICTORY'))),
-      index.h("div", { class: "stats-container" }, index.h("div", { class: "stat-count" }, this.defeats || 0), index.h("div", { class: "stat-name" }, this.defeats > 1 || !this.victories ? overlays.translate('DEFEATS') : overlays.translate('DEFEAT')))
+      index.h("div", { class: "stats-container" }, index.h("div", { class: "stat-count" }, this.victories || 0), index.h("div", { class: "stat-name" }, this.victories > 1 || !this.victories ? index$1.translate('YOOBICWINS') : index$1.translate('VICTORY'))),
+      index.h("div", { class: "stats-container" }, index.h("div", { class: "stat-count" }, this.defeats || 0), index.h("div", { class: "stat-name" }, this.defeats > 1 || !this.victories ? index$1.translate('DEFEATS') : index$1.translate('DEFEAT')))
     ];
   }
   renderPointsTag(iconColor, tagColor) {
     return (index.h("yoo-tag", { color: tagColor }, index.h("yoo-icon", { name: "star", color: iconColor, size: "small", slot: "start" }), (this.points || 0).toString()));
   }
   renderMobile() {
-    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "flex" }, index.h("yoo-avatar", { size: "extra-large", user: this.user }), index.h("div", { class: "user-details" }, index.h("span", null, this.victories + this.defeats, " ", overlays.translate('BATTLES')), this.renderPointsTag('app-color', 'app-color-10'))), this.renderStatsContainers()));
+    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "flex" }, index.h("yoo-avatar", { size: "extra-large", user: this.user }), index.h("div", { class: "user-details" }, index.h("span", null, this.victories + this.defeats, " ", index$1.translate('BATTLES')), this.renderPointsTag('app-color', 'app-color-10'))), this.renderStatsContainers()));
   }
   renderWeb() {
-    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "avatar-container" }, index.h("yoo-img", { class: "avatar-blob", src: this.avatarBlogSvg, svgOptions: { beforeInject: (_, svg) => commonHelpers.setColorSVG(svg, 'app-color') } }), index.h("yoo-avatar", { size: "extra-extra-large", user: this.user })), index.h("div", { class: "user-details" }, index.h("div", { class: "user-name" }, index.h("span", null, this.user.firstName || '', " ", this.user.lastName || '')), index.h("div", { class: "battle-count" }, index.h("span", null, this.victories + this.defeats, " ", overlays.translate('BATTLES'))), index.h("div", { class: "point-count" }, this.renderPointsTag('energized', 'energized-10'))), this.renderStatsContainers(), index.h("div", { class: "blob-container" }, index.h("yoo-img", { class: "blob-image", src: this.blobSvg, svgOptions: { beforeInject: (_, svg) => commonHelpers.setColorSVG(svg, 'app-color') } }), index.h("div", { class: "description-container" }, index.h("div", { class: "text-container" }, index.h("p", null, overlays.translate('BATTLEDESCRIPTION1')), index.h("p", null, overlays.translate('BATTLEDESCRIPTION2'))), index.h("yoo-icon", { size: "extra-extra-large", name: "battle", color: "light" })))));
+    return (index.h("div", { class: "outer-container" }, index.h("div", { class: "avatar-container" }, index.h("yoo-img", { class: "avatar-blob", src: this.avatarBlogSvg, svgOptions: { beforeInject: (_, svg) => commonHelpers.setColorSVG(svg, 'app-color') } }), index.h("yoo-avatar", { size: "extra-extra-large", user: this.user })), index.h("div", { class: "user-details" }, index.h("div", { class: "user-name" }, index.h("span", null, this.user.firstName || '', " ", this.user.lastName || '')), index.h("div", { class: "battle-count" }, index.h("span", null, this.victories + this.defeats, " ", index$1.translate('BATTLES'))), index.h("div", { class: "point-count" }, this.renderPointsTag('energized', 'energized-10'))), this.renderStatsContainers(), index.h("div", { class: "blob-container" }, index.h("yoo-img", { class: "blob-image", src: this.blobSvg, svgOptions: { beforeInject: (_, svg) => commonHelpers.setColorSVG(svg, 'app-color') } }), index.h("div", { class: "description-container" }, index.h("div", { class: "text-container" }, index.h("p", null, index$1.translate('BATTLEDESCRIPTION1')), index.h("p", null, index$1.translate('BATTLEDESCRIPTION2'))), index.h("yoo-icon", { size: "extra-extra-large", name: "battle", color: "light" })))));
   }
   render() {
-    return index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, overlays.isWeb(this.host) ? this.renderWeb() : this.renderMobile());
+    return index.h(index.Host, { class: commonHelpers.getAppContext(this.host) }, index$1.isWeb(this.host) ? this.renderWeb() : this.renderMobile());
   }
   static get assetsDirs() { return ["assets/battle-user-stats"]; }
   get host() { return index.getElement(this); }

package/dist/cjs/yoo-breadcrumbs.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
+require('./index-7790c794.js');
 const lodash = require('./lodash-a9050d79.js');
-const overlays = require('./overlays-e5d2ff76.js');
-require('./index-a1bbe627.js');
+const index$1 = require('./index-4cdf7949.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const breadcrumbsCss = "svg:not(:root){overflow:hidden}:host{overflow:hidden}:host .breadcrumb{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;font-size:var(--font-size-16, 1rem);line-height:2}:host .breadcrumb .breadcrumb-item{display:inherit;-ms-flex-item-align:center;align-self:center;color:var(--text-color, #807f83);white-space:nowrap}:host .breadcrumb .breadcrumb-item:hover{color:var(--dark, #000000);text-decoration:underline;cursor:pointer}:host .breadcrumb .breadcrumb-item:last-of-type{overflow:hidden}:host .breadcrumb .breadcrumb-item:last-of-type>*{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .breadcrumb .breadcrumb-item.active{color:var(--dark, #000000)}:host .breadcrumb .separator{padding:0 var(--spacing-08, 0.5rem);color:var(--text-color, #807f83)}";
@@ -41,8 +41,8 @@ const YooBreadcrumbsComponent = class {
     index.forceUpdate(this);
   }
   componentWillLoad() {
-    if (overlays.isNullOrUndefined(this.maxLengthItems)) {
-      this.maxLengthItems = overlays.isWeb(this.host) ? 50 : 20;
+    if (index$1.isNullOrUndefined(this.maxLengthItems)) {
+      this.maxLengthItems = index$1.isWeb(this.host) ? 50 : 20;
     }
   }
   selectItem(item, index) {
@@ -58,7 +58,7 @@ const YooBreadcrumbsComponent = class {
     return index < this.maxVisibleItems - 2 || this.isLastItem(index) || this.items.length === this.maxVisibleItems;
   }
   getItemText(item) {
-    return overlays.translateMulti(lodash.isString(item) ? item : (item === null || item === void 0 ? void 0 : item.name) || '');
+    return index$1.translateMulti(lodash.isString(item) ? item : (item === null || item === void 0 ? void 0 : item.name) || '');
   }
   truncateText(input, len, endText) {
     if (!this.truncate) {
@@ -69,16 +69,16 @@ const YooBreadcrumbsComponent = class {
   renderBreadcrumbHome() {
     const itemSeparator = this.items.length > 0 ? index.h("span", { class: "separator" }, this.separator) : '';
     return (this.showHome && [
-      index.h("div", { class: "breadcrumb-item", onClick: this.selectHome.bind(this) }, this.homeName ? index.h("span", { innerHTML: overlays.translate(this.homeName) }) : index.h("yoo-icon", { name: "home", size: "small", color: "text-color" })),
+      index.h("div", { class: "breadcrumb-item", onClick: this.selectHome.bind(this) }, this.homeName ? index.h("span", { innerHTML: index$1.translate(this.homeName) }) : index.h("yoo-icon", { name: "home", size: "small", color: "text-color" })),
       itemSeparator
     ]);
   }
-  renderBreadcrumbItem(item, index$1) {
+  renderBreadcrumbItem(item, index$2) {
     const itemText = this.getItemText(item);
-    const itemSeparator = !this.isLastItem(index$1) ? index.h("span", { class: "separator" }, this.separator) : '';
+    const itemSeparator = !this.isLastItem(index$2) ? index.h("span", { class: "separator" }, this.separator) : '';
     // check item length, truncate if it's too long
     const itemTruncated = this.truncateText(itemText, this.maxLengthItems, '...');
-    const isItemVisible = this.isItemVisible(index$1);
+    const isItemVisible = this.isItemVisible(index$2);
     // check breadcrumbs length, diplay ellipsis if to many items and move items to context-menu
     const ellipsisAndSeparator = index.h("span", { class: "button-collapse" }, "...");
     let collapsedItems = [];
@@ -91,19 +91,19 @@ const YooBreadcrumbsComponent = class {
       const itemButton = {
         text: itemCollapse.name,
         handler: () => {
-          this.selectItem(itemCollapse, index$1 + i);
+          this.selectItem(itemCollapse, index$2 + i);
         }
       };
       contentButtons.push(itemButton);
     });
     // add active class to the last item
-    const itemClassList = { 'breadcrumb-item': true, active: this.isLastItem(index$1) };
+    const itemClassList = { 'breadcrumb-item': true, active: this.isLastItem(index$2) };
     return isItemVisible
       ? [
-        index.h("div", { class: itemClassList, onClick: this.selectItem.bind(this, item, index$1) }, this.truncate && itemText.length > this.maxLengthItems ? (index.h("yoo-tooltip", { hoverable: overlays.isWeb(this.host), placement: "bottom", content: itemText }, index.h("span", null, itemTruncated))) : (index.h("span", null, itemText))),
+        index.h("div", { class: itemClassList, onClick: this.selectItem.bind(this, item, index$2) }, this.truncate && itemText.length > this.maxLengthItems ? (index.h("yoo-tooltip", { hoverable: index$1.isWeb(this.host), placement: "bottom", content: itemText }, index.h("span", null, itemTruncated))) : (index.h("span", null, itemText))),
         itemSeparator
       ]
-      : index$1 === this.maxVisibleItems - 2 && (index.h("yoo-context-menu", { contentButtons: contentButtons, placement: "below" }, index.h("div", { class: itemClassList }, ellipsisAndSeparator), index.h("span", { class: "separator" }, this.separator)));
+      : index$2 === this.maxVisibleItems - 2 && (index.h("yoo-context-menu", { contentButtons: contentButtons, placement: "below" }, index.h("div", { class: itemClassList }, ellipsisAndSeparator), index.h("span", { class: "separator" }, this.separator)));
   }
   render() {
     const items = lodash.compact(this.items);

package/dist/cjs/yoo-button.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9ca0e46c.js');
-require('./index-9aadeb94.js');
-const commonHelpers = require('./common-helpers-9f63a319.js');
-const overlays = require('./overlays-e5d2ff76.js');
+require('./index-7790c794.js');
+const commonHelpers = require('./common-helpers-0724ae60.js');
+const index$1 = require('./index-4cdf7949.js');
 require('./lodash-a9050d79.js');
-require('./index-a1bbe627.js');
+require('./index-cb8276bc.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
 const buttonCss = "svg:not(:root){overflow:hidden}:host([color=accent][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--accent, #276ef1);border-color:var(--accent, #276ef1);fill:var(--light, #ffffff)}:host([color=accent][fill=transparent]) button{color:var(--accent, #276ef1);background-color:transparent;border-color:transparent;fill:var(--accent, #276ef1)}:host([color=accent-10][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--accent-10, rgba(39, 110, 241, 0.1));border-color:var(--accent-10, rgba(39, 110, 241, 0.1));fill:var(--light, #ffffff)}:host([color=accent-10][fill=transparent]) button{color:var(--accent-10, rgba(39, 110, 241, 0.1));background-color:transparent;border-color:transparent;fill:var(--accent-10, rgba(39, 110, 241, 0.1))}:host([color=anthracite][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--anthracite, #1a1a1a);border-color:var(--anthracite, #1a1a1a);fill:var(--light, #ffffff)}:host([color=anthracite][fill=transparent]) button{color:var(--anthracite, #1a1a1a);background-color:transparent;border-color:transparent;fill:var(--anthracite, #1a1a1a)}:host([color=app-color][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--app-color, #5a30f4);border-color:var(--app-color, #5a30f4);fill:var(--light, #ffffff)}:host([color=app-color][fill=transparent]) button{color:var(--app-color, #5a30f4);background-color:transparent;border-color:transparent;fill:var(--app-color, #5a30f4)}:host([color=app-color-10][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--app-color-10, rgba(90, 48, 244, 0.1));border-color:var(--app-color-10, rgba(90, 48, 244, 0.1));fill:var(--light, #ffffff)}:host([color=app-color-10][fill=transparent]) button{color:var(--app-color-10, rgba(90, 48, 244, 0.1));background-color:transparent;border-color:transparent;fill:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host([color=app-color-20][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--app-color-20, rgba(90, 48, 244, 0.2));border-color:var(--app-color-20, rgba(90, 48, 244, 0.2));fill:var(--light, #ffffff)}:host([color=app-color-20][fill=transparent]) button{color:var(--app-color-20, rgba(90, 48, 244, 0.2));background-color:transparent;border-color:transparent;fill:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host([color=danger][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--danger, #d44333);border-color:var(--danger, #d44333);fill:var(--light, #ffffff)}:host([color=danger][fill=transparent]) button{color:var(--danger, #d44333);background-color:transparent;border-color:transparent;fill:var(--danger, #d44333)}:host([color=danger-10][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--danger-10, rgba(212, 67, 51, 0.1));border-color:var(--danger-10, rgba(212, 67, 51, 0.1));fill:var(--light, #ffffff)}:host([color=danger-10][fill=transparent]) button{color:var(--danger-10, rgba(212, 67, 51, 0.1));background-color:transparent;border-color:transparent;fill:var(--danger-10, rgba(212, 67, 51, 0.1))}:host([color=dark][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--dark, #000000);border-color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host([color=dark][fill=transparent]) button{color:var(--dark, #000000);background-color:transparent;border-color:transparent;fill:var(--dark, #000000)}:host([color=energized][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--energized, #ffc043);border-color:var(--energized, #ffc043);fill:var(--light, #ffffff)}:host([color=energized][fill=transparent]) button{color:var(--energized, #ffc043);background-color:transparent;border-color:transparent;fill:var(--energized, #ffc043)}:host([color=energized-10][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--energized-10, rgba(255, 192, 67, 0.1));border-color:var(--energized-10, rgba(255, 192, 67, 0.1));fill:var(--light, #ffffff)}:host([color=energized-10][fill=transparent]) button{color:var(--energized-10, rgba(255, 192, 67, 0.1));background-color:transparent;border-color:transparent;fill:var(--energized-10, rgba(255, 192, 67, 0.1))}:host([color=info][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--info, #d84c96);border-color:var(--info, #d84c96);fill:var(--light, #ffffff)}:host([color=info][fill=transparent]) button{color:var(--info, #d84c96);background-color:transparent;border-color:transparent;fill:var(--info, #d84c96)}:host([color=info-10][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--info-10, rgba(216, 76, 150, 0.1));border-color:var(--info-10, rgba(216, 76, 150, 0.1));fill:var(--light, #ffffff)}:host([color=info-10][fill=transparent]) button{color:var(--info-10, rgba(216, 76, 150, 0.1));background-color:transparent;border-color:transparent;fill:var(--info-10, rgba(216, 76, 150, 0.1))}:host([color=light][fill=solid]) button{color:var(--dark, #000000);background-color:var(--light, #ffffff);border-color:var(--stable-alt, #d0d0d0);fill:var(--dark, #000000)}:host([color=light][fill=transparent]) button{color:var(--light, #ffffff);background-color:transparent;border-color:transparent;fill:var(--light, #ffffff)}:host([color=light-20][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--light-20, rgba(255, 255, 255, 0.2));border-color:var(--light-20, rgba(255, 255, 255, 0.2));fill:var(--light, #ffffff)}:host([color=light-20][fill=transparent]) button{color:var(--light-20, rgba(255, 255, 255, 0.2));background-color:transparent;border-color:transparent;fill:var(--light-20, rgba(255, 255, 255, 0.2))}:host([color=stable][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--stable, #adadad);border-color:var(--stable, #adadad);fill:var(--light, #ffffff)}:host([color=stable][fill=transparent]) button{color:var(--stable, #adadad);background-color:transparent;border-color:transparent;fill:var(--stable, #adadad)}:host([color=stable-60][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--stable-60, rgba(173, 173, 173, 0.6));border-color:var(--stable-60, rgba(173, 173, 173, 0.6));fill:var(--light, #ffffff)}:host([color=stable-60][fill=transparent]) button{color:var(--stable-60, rgba(173, 173, 173, 0.6));background-color:transparent;border-color:transparent;fill:var(--stable-60, rgba(173, 173, 173, 0.6))}:host([color=stable-alt][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--stable-alt, #d0d0d0);border-color:var(--stable-alt, #d0d0d0);fill:var(--light, #ffffff)}:host([color=stable-alt][fill=transparent]) button{color:var(--stable-alt, #d0d0d0);background-color:transparent;border-color:transparent;fill:var(--stable-alt, #d0d0d0)}:host([color=stable-light][fill=solid]) button{color:var(--dark, #000000);background-color:var(--stable-light, #f1f1f1);border-color:var(--stable-light, #f1f1f1);fill:var(--dark, #000000)}:host([color=stable-light][fill=transparent]) button{color:var(--stable-light, #f1f1f1);background-color:transparent;border-color:transparent;fill:var(--stable-light, #f1f1f1)}:host([color=stable-ultralight][fill=solid]) button{color:var(--dark, #000000);background-color:var(--stable-ultralight, #fafafa);border-color:var(--stable-ultralight, #fafafa);fill:var(--dark, #000000)}:host([color=stable-ultralight][fill=transparent]) button{color:var(--stable-ultralight, #fafafa);background-color:transparent;border-color:transparent;fill:var(--stable-ultralight, #fafafa)}:host([color=success][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--success, #3aa76d);border-color:var(--success, #3aa76d);fill:var(--light, #ffffff)}:host([color=success][fill=transparent]) button{color:var(--success, #3aa76d);background-color:transparent;border-color:transparent;fill:var(--success, #3aa76d)}:host([color=success-10][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--success-10, rgba(58, 167, 109, 0.1));border-color:var(--success-10, rgba(58, 167, 109, 0.1));fill:var(--light, #ffffff)}:host([color=success-10][fill=transparent]) button{color:var(--success-10, rgba(58, 167, 109, 0.1));background-color:transparent;border-color:transparent;fill:var(--success-10, rgba(58, 167, 109, 0.1))}:host([color=text-color][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--text-color, #807f83);border-color:var(--text-color, #807f83);fill:var(--light, #ffffff)}:host([color=text-color][fill=transparent]) button{color:var(--text-color, #807f83);background-color:transparent;border-color:transparent;fill:var(--text-color, #807f83)}:host([color=warning][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--warning, #ed6e33);border-color:var(--warning, #ed6e33);fill:var(--light, #ffffff)}:host([color=warning][fill=transparent]) button{color:var(--warning, #ed6e33);background-color:transparent;border-color:transparent;fill:var(--warning, #ed6e33)}:host([color=warning-10][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--warning-10, rgba(237, 110, 51, 0.1));border-color:var(--warning-10, rgba(237, 110, 51, 0.1));fill:var(--light, #ffffff)}:host([color=warning-10][fill=transparent]) button{color:var(--warning-10, rgba(237, 110, 51, 0.1));background-color:transparent;border-color:transparent;fill:var(--warning-10, rgba(237, 110, 51, 0.1))}:host([color=warning-20][fill=solid]) button{color:var(--light, #ffffff);background-color:var(--warning-20, rgba(237, 110, 51, 0.2));border-color:var(--warning-20, rgba(237, 110, 51, 0.2));fill:var(--light, #ffffff)}:host([color=warning-20][fill=transparent]) button{color:var(--warning-20, rgba(237, 110, 51, 0.2));background-color:transparent;border-color:transparent;fill:var(--warning-20, rgba(237, 110, 51, 0.2))}:host([color=accent]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=accent-10]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=anthracite]) yoo-ripple-effect{--color:var(--light, #ffffff);--opacity:var(--ripple-dark-opacity, 0.2)}:host([color=app-color]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=app-color-10]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=app-color-20]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=danger]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=danger-10]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=dark]) yoo-ripple-effect{--color:var(--light, #ffffff);--opacity:var(--ripple-dark-opacity, 0.2)}:host([color=energized]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=energized-10]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=info]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=info-10]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=light]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=stable]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=stable-60]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=stable-alt]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=stable-light]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=stable-ultralight]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=success]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=success-10]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=text-color]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=warning]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=warning-10]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host([color=warning-20]) yoo-ripple-effect{--color:var(--dark, #000000);--opacity:var(--ripple-light-opacity, 0.15)}:host{display:-ms-flexbox;display:flex;--side-padding:0 var(--spacing-16, 1rem);--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--dark-10, rgba(0, 0, 0, 0.1))}:host button{position:relative;width:100%;padding:0;font-family:var(--font-family, \"Lato\");border-style:solid;border-width:var(--border-width-01, 0.0625rem);border-radius:var(--border-radius-top-left) var(--border-radius-top-right) var(--border-radius-bottom-right) var(--border-radius-bottom-left);cursor:pointer;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}:host button #hover{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;border-radius:inherit}:host button #main-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host button:focus{outline:none}:host button:hover #hover{background-color:var(--hover-color)}:host([fill=transparent]) button:hover #hover{border-color:var(--hover-color)}:host([hidden]){display:none}:host([shape=rectangular]:not([size=large])),:host([shape=square]){--border-radius-top-left:var(--border-radius-04, 0.25rem);--border-radius-top-right:var(--border-radius-04, 0.25rem);--border-radius-bottom-left:var(--border-radius-04, 0.25rem);--border-radius-bottom-right:var(--border-radius-04, 0.25rem)}:host([shape=rectangular][size=large]){--border-radius-top-left:var(--border-radius-08, 0.5rem);--border-radius-top-right:var(--border-radius-08, 0.5rem);--border-radius-bottom-left:var(--border-radius-08, 0.5rem);--border-radius-bottom-right:var(--border-radius-08, 0.5rem)}:host([shape=circular]) button{--border-radius-top-left:50%;--border-radius-top-right:50%;--border-radius-bottom-left:50%;--border-radius-bottom-right:50%}:host([shape=rectangular]:not(.no-padding)) button{line-height:inherit}:host([shape=rectangular]:not(.no-padding)) button ::slotted([slot=start]){margin-right:var(--spacing-08, 0.5rem)}:host([shape=rectangular]:not(.no-padding)) button ::slotted([slot=end]){margin-left:var(--spacing-08, 0.5rem) !important}:host(.rtl[shape=rectangular]:not(.no-padding)) button ::slotted([slot=start]){margin-right:unset;margin-left:var(--spacing-08, 0.5rem)}:host([size=small]) button{height:1.5rem;font-size:var(--font-size-12, 0.75rem)}:host([size=small][shape=circular]) button,:host([size=small][shape=square]) button{width:1.5rem}:host([size=small][shape=rectangular]) button #hover{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 var(--spacing-08, 0.5rem)}:host([size=medium]) button{height:2rem;font-size:var(--font-size-14, 0.875rem)}:host(.mobile[size=medium]) button{font-size:var(--font-size-16, 1rem)}:host([size=medium][shape=circular]) button,:host([size=medium][shape=square]) button{width:2rem}:host([size=medium][shape=rectangular]) button #hover{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 var(--spacing-08, 0.5rem)}:host([size=large]) button{height:3rem;font-size:var(--font-size-16, 1rem)}:host([size=large][shape=circular]) button,:host([size=large][shape=square]) button{width:3rem}:host([size=large][shape=rectangular]) button #hover{-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--side-padding)}:host([size=large][shape=circular].extra-large-emoji) button{width:4.375rem;height:4.375rem;font-size:2.813rem}:host([size=large][shape=circular].extra-large-emoji) button #main-content{-webkit-transform:translate(1%, 3%);transform:translate(1%, 3%)}:host([size=extra-large]) button{height:4rem;font-size:var(--font-size-16, 1rem)}:host([size=extra-large][shape=circular]) button,:host([size=extra-large][shape=square]) button{width:4rem}:host([size=extra-large][shape=rectangular]) button #hover{-webkit-box-sizing:border-box;box-sizing:border-box;padding:var(--side-padding)}:host([disabled=\"\"]),:host([disabled=true]){pointer-events:none}:host([disabled=\"\"]) ::slotted(*),:host([disabled=true]) ::slotted(*){fill:inherit}:host([disabled=\"\"][fill=solid]) button,:host([disabled=true][fill=solid]) button{color:var(--stable, #adadad);background-color:var(--disabled-color);background-clip:padding-box;border-color:var(--disabled-color);fill:var(--stable, #adadad)}:host([disabled=\"\"][fill=transparent]) button,:host([disabled=true][fill=transparent]) button{color:var(--disabled-color);fill:var(--disabled-color)}:host([color=light][fill=solid]:not([disabled=\"\"])) button{color:var(--dark, #000000);background-color:var(--light, #ffffff);border-color:var(--stable-alt, #d0d0d0)}:host([color=anthracite]) button:hover #hover,:host([color=dark]) button:hover #hover{background-color:var(--light-20, rgba(255, 255, 255, 0.2))}:host([color=stable-light][fill=solid]) button{color:var(--stable, #adadad);background-color:var(--stable-light, #f1f1f1);border:none}:host(.expanded){width:100%}:host(.auto){display:block}:host(.auto) button{width:auto}:host(.shadow){display:block}:host(.shadow) button{-webkit-box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1))}:host(.min-width){min-width:6rem}:host(.hidden){opacity:0}:host(.no-border) button{border:none}:host(.icon-align-left) #main-content{width:100%;padding-right:var(--spacing-16, 1rem)}:host(.fab){position:absolute;right:var(--spacing-16, 1rem);bottom:var(--spacing-16, 1rem);z-index:100}:host(.fab) button{-webkit-box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1))}:host(.fab.rtl){right:unset;bottom:var(--spacing-16, 1rem);left:var(--spacing-16, 1rem)}:host(.fab-left){position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-16, 1rem);z-index:100}:host(.fab-left) button{-webkit-box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1));box-shadow:var(--shadow-03, 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1))}";
@@ -77,7 +77,7 @@ const YooButtonComponent = class {
       this.customStyles = {
         backgroundColor: ((_a = this.customColor) === null || _a === void 0 ? void 0 : _a['backgroundColor']) || this.customColor,
         borderColor: ((_b = this.customColor) === null || _b === void 0 ? void 0 : _b['borderColor']) || this.customColor,
-        color: ((_c = this.customColor) === null || _c === void 0 ? void 0 : _c['color']) || overlays.getContrastColor(this.customColor)
+        color: ((_c = this.customColor) === null || _c === void 0 ? void 0 : _c['color']) || index$1.getContrastColor(this.customColor)
       };
     }
   }