@yoobic/yobi 8.2.2 → 8.3.0-2

package/dist/cjs/yoo-audio-recorder-dialog.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 // Copied from https://github.com/chris-rudmin/Recorderjs
 
@@ -374,14 +375,14 @@ const YooAudioRecorderDialogComponent = class {
   }
   onAudioDurationReady(ev) {
     if (ev && ev.detail >= 0) {
-      this.finalRecordingDuration = index$1.pipes.timer.transform(Math.round(ev.detail), 'timer');
+      this.finalRecordingDuration = overlays.pipes.timer.transform(Math.round(ev.detail), 'timer');
     }
   }
   disconnectedCallback() {
     this.clearAwake();
   }
   clearAwake() {
-    index$1.keepAwake(false);
+    overlays.keepAwake(false);
     if (this.awakeInterval) {
       clearInterval(this.awakeInterval);
       this.awakeInterval = null;
@@ -390,12 +391,12 @@ const YooAudioRecorderDialogComponent = class {
   async onClose(noSave) {
     let ret;
     if (!noSave) {
-      ret = !index$1.isNativeMobile() ? this.finalFile : index$1.addFilePrefix(this.finalPath);
+      ret = !overlays.isNativeMobile() ? this.finalFile : overlays.addFilePrefix(this.finalPath);
     }
-    index$1.closeModal(ret);
+    overlays.closeModal(ret);
   }
   onStartRecording() {
-    const useAudioRecorder = (index$1.isSafari() || index$1.isFirefox());
+    const useAudioRecorder = (overlays.isSafari() || overlays.isFirefox());
     const recorder = useAudioRecorder ? MediaRecorder$1 : MediaRecorder;
     let format = 'webm';
     let filename = `${new Date().getTime()}.${format}`;
@@ -417,11 +418,11 @@ const YooAudioRecorderDialogComponent = class {
         if (useAudioRecorder) {
           const ext = ((_a = recordedChunks === null || recordedChunks === void 0 ? void 0 : recordedChunks[0]) === null || _a === void 0 ? void 0 : _a.type.split('/').pop()) || 'wav';
           format = ext;
-          filename = index$1.changeExtension(filename, ext);
+          filename = overlays.changeExtension(filename, ext);
         }
         const type = { type: `audio/${format}` };
-        if (index$1.isNativeMobile()) {
-          await index$1.saveToLocalFile(blob, filename).then((entry) => {
+        if (overlays.isNativeMobile()) {
+          await overlays.saveToLocalFile(blob, filename).then((entry) => {
             const url = entry.toURL();
             this.finalPath = url;
           });
@@ -437,11 +438,11 @@ const YooAudioRecorderDialogComponent = class {
       });
       this.mediaRecorder.start();
       this.awakeInterval = setInterval(() => {
-        index$1.keepAwake(true);
+        overlays.keepAwake(true);
       }, 3000);
       this.isRecording = true;
     };
-    const mediaDevices = index$1.getMediaDevices();
+    const mediaDevices = overlays.getMediaDevices();
     if (mediaDevices) {
       const audio = {
         sampleRate: 192000,
@@ -460,8 +461,8 @@ const YooAudioRecorderDialogComponent = class {
     // if (this.audioRef) {
     //     this.audioRef.reloadSrc();
     // }
-    if (this.finalPath && index$1.isNativeMobile()) {
-      await index$1.removeFileAtPath(this.finalPath);
+    if (this.finalPath && overlays.isNativeMobile()) {
+      await overlays.removeFileAtPath(this.finalPath);
     }
   }
   async onStopRecording() {
@@ -485,7 +486,7 @@ const YooAudioRecorderDialogComponent = class {
       this.onStopRecording();
     }
     else {
-      if (index$1.isNativeMobile()) {
+      if (overlays.isNativeMobile()) {
         const permissions = (_c = (_b = (_a = window) === null || _a === void 0 ? void 0 : _a.cordova) === null || _b === void 0 ? void 0 : _b.plugins) === null || _c === void 0 ? void 0 : _c.permissions;
         if (permissions) {
           permissions.hasPermission(permissions.RECORD_AUDIO, (initialStatus) => {
@@ -508,7 +509,7 @@ const YooAudioRecorderDialogComponent = class {
     }
   }
   renderHeader() {
-    return (index.h("yoo-header", null, index.h("yoo-navbar", { class: "dark" }, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "light", rippleType: "unbounded", fill: "transparent", shape: "circular", onClick: () => this.onClose(true) }, index.h("yoo-icon", { color: "light", name: "close" }))), index.h("yoo-truncate", null, index$1.translate(this.heading)), index.h("yoo-items", { slot: "end" }, this.isSaving && index.h("yoo-button", { color: "light", rippleType: "unbounded", fill: "transparent", onClick: () => this.onClose() }, index$1.translate('YOOBICSAVE'))))));
+    return (index.h("yoo-header", null, index.h("yoo-navbar", { class: "dark" }, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "light", rippleType: "unbounded", fill: "transparent", shape: "circular", onClick: () => this.onClose(true) }, index.h("yoo-icon", { color: "light", name: "close" }))), index.h("yoo-truncate", null, overlays.translate(this.heading)), index.h("yoo-items", { slot: "end" }, this.isSaving && index.h("yoo-button", { color: "light", rippleType: "unbounded", fill: "transparent", onClick: () => this.onClose() }, overlays.translate('YOOBICSAVE'))))));
   }
   renderAnimation() {
     const randomEl = [1, 1, 1, 1, 1, 1, 3, 3, 3, 5, 5];
@@ -521,7 +522,7 @@ const YooAudioRecorderDialogComponent = class {
     })));
   }
   renderSavingView() {
-    return (index.h("div", { class: "saving-container" }, index.h("div", { class: "top-row-container" }, index.h("yoo-icon", { size: "medium", name: "microphone", color: "danger", class: "microphone" }), index.h("div", { class: "inner-row-container" }, index.h("span", null, index$1.translate('RECORDING')), index.h("span", { class: "stable" }, this.finalRecordingDuration)), index.h("span", { class: "text" }, index$1.translate('YOOBICTODAY'))), index.h("div", { class: "audio-container" }, index.h("yoo-audio-player", { ref: el => { this.audioRef = el; }, class: "dark", src: index$1.cleanupWKWebViewFilePath(this.finalPath) })), index.h("yoo-button", { size: "large", onClick: () => { this.onRetryRecording(); }, color: "anthracite" }, index.h("yoo-icon", { name: "restart", size: "small", color: "light" }), index$1.translate('RETRY'))));
+    return (index.h("div", { class: "saving-container" }, index.h("div", { class: "top-row-container" }, index.h("yoo-icon", { size: "medium", name: "microphone", color: "danger", class: "microphone" }), index.h("div", { class: "inner-row-container" }, index.h("span", null, overlays.translate('RECORDING')), index.h("span", { class: "stable" }, this.finalRecordingDuration)), index.h("span", { class: "text" }, overlays.translate('YOOBICTODAY'))), index.h("div", { class: "audio-container" }, index.h("yoo-audio-player", { ref: el => { this.audioRef = el; }, class: "dark", src: overlays.cleanupWKWebViewFilePath(this.finalPath) })), index.h("yoo-button", { size: "large", onClick: () => { this.onRetryRecording(); }, color: "anthracite" }, index.h("yoo-icon", { name: "restart", size: "small", color: "light" }), overlays.translate('RETRY'))));
   }
   renderRecordingView() {
     return (index.h("div", { class: "recording-container" }, this.isRecording && [

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-fc264952.js');
-const index$2 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const index$1 = require('./index-de8540eb.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
 
@@ -82,13 +83,13 @@ const YooAvatarComponent = class {
     return this.overflowCount > 0;
   }
   renderBasedOnSource() {
-    if (this.imgSrc && !index$2.isOffline()) {
+    if (this.imgSrc && !overlays.isOffline()) {
       return this.renderAvatarWithImage(this.imgSrc);
     }
     else if (this.icon) {
       return this.renderAvatarWithIcon();
     }
-    else if (this.hasImageData && !index$2.isOffline()) {
+    else if (this.hasImageData && !overlays.isOffline()) {
       return this.renderAvatarWithImage(this.user.imageData);
     }
     else if (this.user || this.iconText) {
@@ -111,7 +112,7 @@ const YooAvatarComponent = class {
   }
   renderAvatarWithText() {
     const length = ['extra-small', 'small'].includes(this.size) ? 1 : 2;
-    return (index.h("div", { class: "text-container", style: { color: this.textColor }, onClick: () => this.emitClickMethod() }, this.user ? index$2.pipes.userInitial.transform(this.user, length) : this.iconText.slice(0, length)));
+    return (index.h("div", { class: "text-container", style: { color: this.textColor }, onClick: () => this.emitClickMethod() }, this.user ? overlays.pipes.userInitial.transform(this.user, length) : this.iconText.slice(0, length)));
   }
   renderAvatarWithOverflowText() {
     const overflowNumber = Math.min(99, this.overflowCount);
@@ -133,7 +134,7 @@ const YooAvatarComponent = class {
       badgeSize = 'extra-extra-small';
     }
     const shouldDisplayBadge = this.size.includes('extra-large');
-    const count = index$2.pipes.number.transform(this.notificationCount, '');
+    const count = overlays.pipes.number.transform(this.notificationCount, '');
     return (index.h("div", { class: {
         'notifications-wrapper': true,
         dot: !shouldDisplayBadge,
@@ -150,7 +151,7 @@ const YooAvatarComponent = class {
     }
   }
   renderLiveIndicator() {
-    return (index.h("div", { class: "live-indicator-container" }, index.h("div", { class: "live-indicator-wrapper" }, index.h("div", { class: "live-icon" }), index.h("div", { class: "live-text" }, index$2.translate('LIVE2') || 'YOOBICLIVE'))));
+    return (index.h("div", { class: "live-indicator-container" }, index.h("div", { class: "live-indicator-wrapper" }, index.h("div", { class: "live-icon" }), index.h("div", { class: "live-text" }, overlays.translate('LIVE2') || 'YOOBICLIVE'))));
   }
   renderRecordedIndicator() {
     return (index.h("div", { class: "recorded-indicator-container" }, index.h("div", { class: "recorded-indicator-wrapper" }, index.h("yoo-icon", { size: "small", name: "play-audio", color: "light" }))));
@@ -163,8 +164,8 @@ const YooAvatarComponent = class {
   }
   render() {
     const TagType = this.tooltip ? 'yoo-tooltip' : 'div';
-    const hasUserText = this.user && (!this.user.imageData || index$2.isOffline());
-    return (index.h(index.Host, { size: this.size, frame: this.frame }, index.h(TagType, { class: "component-container", content: this.tooltip, placement: "bottom", hoverable: index$2.isWeb(this.host) }, index.h("div", { class: "component-states-container" }, this.renderOnlineIcon(), this.renderStoriesIndicator(), this.isVip && this.renderIsVip(), this.hasNotifications && this.renderNotification(), this.hasLiveVideo && this.renderLiveIndicator(), this.hasRecordedVideo && this.renderRecordedIndicator(), this.vipNotification && this.renderVipNotification()), index.h("div", { class: { 'framing-container': true, grayed: hasUserText }, style: { backgroundColor: hasUserText ? undefined : this.getColor(true) } }, this.renderBasedOnSource()))));
+    const hasUserText = this.user && (!this.user.imageData || overlays.isOffline());
+    return (index.h(index.Host, { size: this.size, frame: this.frame }, index.h(TagType, { class: "component-container", content: this.tooltip, placement: "bottom", hoverable: overlays.isWeb(this.host) }, index.h("div", { class: "component-states-container" }, this.renderOnlineIcon(), this.renderStoriesIndicator(), this.isVip && this.renderIsVip(), this.hasNotifications && this.renderNotification(), this.hasLiveVideo && this.renderLiveIndicator(), this.hasRecordedVideo && this.renderRecordedIndicator(), this.vipNotification && this.renderVipNotification()), index.h("div", { class: { 'framing-container': true, grayed: hasUserText }, style: { backgroundColor: hasUserText ? undefined : this.getColor(true) } }, this.renderBasedOnSource()))));
   }
   get host() { return index.getElement(this); }
 };

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const avatarsCss = ".two-users-container{position:relative;width:100%;height:100%}.top-left-container{position:absolute;top:0;left:0}.bottom-right-container{position:absolute;right:0;bottom:0}.names-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;overflow:hidden;white-space:nowrap}.names-wrapper yoo-avatar{margin-right:var(--spacing-08, 0.5rem)}.names-wrapper.show-more{color:var(--dark, #000000);font-weight:bold;cursor:pointer}.name-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.name-wrapper yoo-avatar{margin-bottom:var(--spacing-08, 0.5rem)}.collection-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.collection-wrapper yoo-avatar{margin-right:var(--spacing-08, 0.5rem);margin-left:var(--spacing-08, 0.5rem)}:host([layout=grid]){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}:host([layout=grid]) yoo-avatar{--inner-border:var(--border-width-01, 0.0625rem) solid var(--light, #ffffff)}:host([layout=grid][size=extra-small]){min-width:var(--spacing-32, 2rem);max-width:var(--spacing-32, 2rem);height:var(--spacing-32, 2rem)}:host([layout=grid][size=extra-small]) .top-left-container{padding-top:0.25rem;padding-left:0.25rem}:host([layout=grid][size=extra-small]) .bottom-right-container{padding-right:0.25rem;padding-bottom:0.25rem}:host([layout=grid][size=extra-small]) .bottom-right-container yoo-avatar{--box-shadow:0 0 0 0.125rem cssvar(light)}:host([layout=grid][size=small]){min-width:var(--spacing-48, 3rem);max-width:var(--spacing-48, 3rem);height:var(--spacing-48, 3rem)}:host([layout=grid][size=small]) .top-left-container{padding-top:0.1875rem;padding-left:0.1875rem}:host([layout=grid][size=small]) .bottom-right-container{padding-right:0.1875rem;padding-bottom:0.1875rem}:host([layout=grid][size=small]) .bottom-right-container yoo-avatar{--box-shadow:0 0 0 0.1875rem cssvar(light)}:host([layout=grid][size=small]) .two-users-container yoo-avatar{margin:var(--spacing-02, 0.125rem)}:host([layout=grid][size=medium]){min-width:var(--spacing-64, 4rem);max-width:var(--spacing-64, 4rem);height:var(--spacing-64, 4rem)}:host([layout=grid][size=medium]) .top-left-container{padding-top:0.4375rem;padding-left:0.4375rem}:host([layout=grid][size=medium]) .bottom-right-container{padding-right:0.4375rem;padding-bottom:0.4375rem}:host([layout=grid][size=medium]) .bottom-right-container yoo-avatar{--box-shadow:0 0 0 0.25rem cssvar(light)}:host([layout=grid][size=large]){min-width:var(--spacing-96, 6rem);max-width:var(--spacing-96, 6rem);height:var(--spacing-96, 6rem)}:host([layout=grid][size=large]) .top-left-container{padding-top:0.8125rem;padding-left:0.8125rem}:host([layout=grid][size=large]) .bottom-right-container{padding-right:0.8125rem;padding-bottom:0.8125rem}:host([layout=grid][size=large]) .bottom-right-container yoo-avatar{--box-shadow:0 0 0 0.25rem cssvar(light)}:host([layout=stack]){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host([layout=stack]) yoo-avatar{margin-right:0.0625rem;margin-left:0.0625rem}:host([layout=list]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host([layout=list][size=extra-small]){font-size:var(--font-size-12, 0.75rem)}:host([layout=list][size=extra-small]) .names-wrapper{padding-bottom:var(--spacing-08, 0.5rem)}:host([layout=list][size=small]){font-size:var(--font-size-16, 1rem)}:host([layout=list][size=small]) .names-wrapper{padding-bottom:0.75rem}:host([layout=list][size=medium]){font-size:var(--font-size-18, 1.125rem)}:host([layout=list][size=medium]) .names-wrapper{padding-bottom:0.75rem}:host([layout=list][size=large]){font-size:var(--font-size-24, 1.5rem)}:host([layout=list][size=large]) .names-wrapper{padding-bottom:1.25rem}:host([layout=list][size=extra-large]){font-size:var(--font-size-48, 3rem)}:host([layout=list][size=extra-large]) .names-wrapper{padding-bottom:var(--spacing-48, 3rem)}:host([layout=list][size=extra-extra-large]){font-size:var(--font-size-54, 3.375rem)}:host([layout=list][size=extra-extra-large]) .names-wrapper{padding-bottom:var(--spacing-64, 4rem)}:host([layout=name]){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host([layout=collection]){display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host([layout=name][layout=collection][size=large]){font-size:var(--font-size-12, 0.75rem)}:host([layout=name][layout=collection][size=extra-large]){font-size:var(--font-size-16, 1rem)}:host([layout=name][layout=collection][size=extra-extra-large]){font-size:var(--font-size-18, 1.125rem)}:host([layout=collection][size=large]){font-size:var(--font-size-12, 0.75rem)}:host([layout=collection][size=extra-large]){font-size:var(--font-size-16, 1rem)}:host([layout=collection][size=extra-extra-large]){font-size:var(--font-size-18, 1.125rem)}";
 
@@ -51,7 +52,7 @@ const YooAvatarsComponent = class {
     this.instant = false;
   }
   getTooltip(user) {
-    return this.withTooltip ? index$1.getUserDisplayName(user) : undefined;
+    return this.withTooltip ? overlays.getUserDisplayName(user) : undefined;
   }
   renderTwoUsersGrid() {
     return (index.h("div", { class: "two-users-container" }, index.h("div", { class: "top-left-container" }, index.h("yoo-avatar", { instant: this.instant, user: this.users[0], isOnline: this.users[0].isOnline, size: this.size, tooltip: this.getTooltip(this.users[0]) })), index.h("div", { class: "bottom-right-container" }, index.h("yoo-avatar", { instant: this.instant, user: this.users[1], isOnline: this.users[1].isOnline, size: this.size, tooltip: this.getTooltip(this.users[1]) }))));
@@ -74,7 +75,7 @@ const YooAvatarsComponent = class {
     }
     return usersToDisplay.map((user) => {
       return [
-        index.h("div", { class: "names-wrapper" }, index.h("yoo-avatar", { instant: this.instant, user: user, isOnline: this.isOnline || user.isOnline, size: this.size, tooltip: this.getTooltip(user) }), index.h("span", null, index$1.getUserDisplayName(user)))
+        index.h("div", { class: "names-wrapper" }, index.h("yoo-avatar", { instant: this.instant, user: user, isOnline: this.isOnline || user.isOnline, size: this.size, tooltip: this.getTooltip(user) }), index.h("span", null, overlays.getUserDisplayName(user)))
       ];
     });
   }
@@ -112,7 +113,7 @@ const YooAvatarsComponent = class {
     return this.renderMultipleUsers();
   }
   renderShowMore() {
-    return index.h("div", { class: "names-wrapper show-more" }, index.h("span", null, index$1.translate('SHOWMORE') + '...'));
+    return index.h("div", { class: "names-wrapper show-more" }, index.h("span", null, overlays.translate('SHOWMORE') + '...'));
   }
   render() {
     return (index.h(index.Host, { layout: this.layout, size: this.size }, this.users && this.users.length > 0 && this.renderUsers(), this.showMore && this.renderShowMore()));

package/dist/cjs/yoo-background-blur.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const backgroundBlurCss = ":host .background-blur-image{background-repeat:no-repeat;background-position-x:center;background-position-y:top}";
 
@@ -19,7 +20,7 @@ const YooBackgroundBlurComponent = class {
     this.blur = 1000;
     this.cropMode = 'fill';
     this.imageFlag = 'lossy';
-    this.gradientLayer = new index$1.CloudinaryGradientLayer('y', -0.4);
+    this.gradientLayer = new overlays.CloudinaryGradientLayer('y', -0.4);
   }
   componentWillLoad() {
     return this.prepareImgSrc();
@@ -35,7 +36,7 @@ const YooBackgroundBlurComponent = class {
   }
   async prepareImgSrc() {
     if (this.imageUrl) {
-      const url = new index$1.Cloudinary(this.imageUrl)
+      const url = new overlays.Cloudinary(this.imageUrl)
         .width(this.getWidth())
         .height(this.getHeight())
         .crop(this.cropMode)

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-1fdbd9b3.js');
 
 const backgroundCss = ":host{background:var(--dark, #000000)}:host yoo-img{position:relative;-webkit-transition:-webkit-transform 250ms linear;transition:-webkit-transform 250ms linear;transition:transform 250ms linear;transition:transform 250ms linear, -webkit-transform 250ms linear}:host(.mobile) yoo-img::before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));content:\"\"}:host(.force-mobile) yoo-img::before{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--dark-40-transparent-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent));content:\"\"}:host(.web:not(.force-mobile)){margin-top:var(--spacing-16, 1rem)}:host(.web.course-summary){margin-top:0}";
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
+const index = require('./index-e182c32d.js');
 
 const badgeCss = ":host([color=accent]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--accent, #276ef1)}:host([color=accent]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=accent]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=app-color]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--app-color, #5a30f4)}:host([color=app-color]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=app-color]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=app-color-10]:not([no-background])) .outer-container{color:var(--app-color, #5a30f4);background-color:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host([color=app-color-10]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--app-color, #5a30f4)}:host([color=app-color-10]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--app-color, #5a30f4)}:host([color=app-color-20]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host([color=app-color-20]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=app-color-20]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=app-color-60]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--app-color-60, rgba(90, 48, 244, 0.6))}:host([color=app-color-60]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=app-color-60]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=danger]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--danger, #d44333)}:host([color=danger]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=danger]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=danger-10]:not([no-background])) .outer-container{color:var(--danger, #d44333);background-color:var(--danger-10, rgba(212, 67, 51, 0.1))}:host([color=danger-10]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--danger, #d44333)}:host([color=danger-10]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--danger, #d44333)}:host([color=danger-20]:not([no-background])) .outer-container{color:var(--danger, #d44333);background-color:var(--danger-20, rgba(212, 67, 51, 0.2))}:host([color=danger-20]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--danger, #d44333)}:host([color=danger-20]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--danger, #d44333)}:host([color=dark]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--dark, #000000)}:host([color=dark]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=dark]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=dark-40]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--dark-40, rgba(0, 0, 0, 0.4))}:host([color=dark-40]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=dark-40]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=dark-60]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--dark-60, rgba(0, 0, 0, 0.6))}:host([color=dark-60]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=dark-60]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=energized]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--energized, #ffc043)}:host([color=energized]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=energized]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=energized-10]:not([no-background])) .outer-container{color:var(--energized, #ffc043);background-color:var(--energized-10, rgba(255, 192, 67, 0.1))}:host([color=energized-10]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--energized, #ffc043)}:host([color=energized-10]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--energized, #ffc043)}:host([color=energized-20]:not([no-background])) .outer-container{color:var(--energized, #ffc043);background-color:var(--energized-20, rgba(255, 192, 67, 0.2))}:host([color=energized-20]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--energized, #ffc043)}:host([color=energized-20]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--energized, #ffc043)}:host([color=info]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--info, #d84c96)}:host([color=info]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=info]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=info-10]:not([no-background])) .outer-container{color:var(--info, #d84c96);background-color:var(--info-10, rgba(216, 76, 150, 0.1))}:host([color=info-10]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--info, #d84c96)}:host([color=info-10]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--info, #d84c96)}:host([color=light]:not([no-background])) .outer-container{color:var(--dark, #000000);background-color:var(--light, #ffffff)}:host([color=light]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--dark, #000000)}:host([color=light]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--dark, #000000)}:host([color=light-20]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--light-20, rgba(255, 255, 255, 0.2))}:host([color=light-20]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=light-20]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=stable]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--stable, #adadad)}:host([color=stable]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=stable]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=stable-10]:not([no-background])) .outer-container{color:var(--stable, #adadad);background-color:var(--stable-10, rgba(173, 173, 173, 0.1))}:host([color=stable-10]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--stable, #adadad)}:host([color=stable-10]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--stable, #adadad)}:host([color=stable-60]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--stable-60, rgba(173, 173, 173, 0.6))}:host([color=stable-60]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=stable-60]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=stable-alt]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--stable-alt, #d0d0d0)}:host([color=stable-alt]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=stable-alt]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=stable-alt-80]:not([no-background])) .outer-container{color:var(--dark, #000000);background-color:var(--stable-alt-80, rgba(208, 208, 208, 0.8))}:host([color=stable-alt-80]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--dark, #000000)}:host([color=stable-alt-80]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--dark, #000000)}:host([color=stable-light]:not([no-background])) .outer-container{color:var(--text-color, #807f83);background-color:var(--stable-light, #f1f1f1)}:host([color=stable-light]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--text-color, #807f83)}:host([color=stable-light]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--text-color, #807f83)}:host([color=success]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--success, #3aa76d)}:host([color=success]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=success]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=success-10]:not([no-background])) .outer-container{color:var(--success, #3aa76d);background-color:var(--success-10, rgba(58, 167, 109, 0.1))}:host([color=success-10]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--success, #3aa76d)}:host([color=success-10]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--success, #3aa76d)}:host([color=success-20]:not([no-background])) .outer-container{color:var(--success, #3aa76d);background-color:var(--success-20, rgba(58, 167, 109, 0.2))}:host([color=success-20]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--success, #3aa76d)}:host([color=success-20]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--success, #3aa76d)}:host([color=text-color]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--text-color, #807f83)}:host([color=text-color]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=text-color]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=text-color-10]:not([no-background])) .outer-container{color:var(--text-color, #807f83);background-color:var(--text-color-10, rgba(128, 127, 131, 0.1))}:host([color=text-color-10]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--text-color, #807f83)}:host([color=text-color-10]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--text-color, #807f83)}:host([color=text-color-20]:not([no-background])) .outer-container{color:var(--text-color, #807f83);background-color:var(--text-color-20, rgba(128, 127, 131, 0.2))}:host([color=text-color-20]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--text-color, #807f83)}:host([color=text-color-20]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--text-color, #807f83)}:host([color=warning]:not([no-background])) .outer-container{color:var(--light, #ffffff);background-color:var(--warning, #ed6e33)}:host([color=warning]:not([no-background])) .outer-container ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=warning]:not([no-background])) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host{display:inline-block;line-height:0;vertical-align:top}:host .highlight-container{background:transparent}:host .highlight-container,:host .outer-container{display:inline-block;border-radius:50%;opacity:1;-webkit-transition:all 0.3s;transition:all 0.3s}:host .highlight-container .inner-container,:host .outer-container .inner-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%}:host([shape=oval]) .highlight-container,:host([shape=oval]) .outer-container{border-radius:62.4375rem}:host([shape=rectangle]) .highlight-container,:host([shape=rectangle]) .outer-container{border-radius:var(--spacing-04, 0.25rem)}:host(.long-text) .outer-container{padding:0 var(--spacing-08, 0.5rem)}:host([shape=dot]) .highlight-container,:host([shape=dot]) .outer-container{vertical-align:top}:host([inactive]) .highlight-container,:host([inactive]) .outer-container{visibility:hidden}:host(.event){margin-right:var(--spacing-08, 0.5rem)}:host(.event) .outer-container .inner-container{color:var(--dark, #000000)}:host(.floating){position:absolute;top:-0.5rem}:host(.floating).mobile{right:-0.2rem}:host(.floating-right){position:absolute;top:-0.5rem;right:-0.5rem}:host(.floating.mobile){right:-0.2rem}:host([size=extra-small]:not([icon]):not(.menu-item):not([shape=dot])){font-size:var(--font-size-12, 0.75rem)}:host([size=extra-small]:not([icon]):not(.menu-item):not([shape=dot])) .outer-container{min-width:1.25rem;height:1.25rem}:host(.highlight[size=extra-small]:not([icon]):not(.menu-item):not([shape=dot])){font-size:max(var(--font-size-12, 0.75rem), var(--font-size-12, 0.75rem))}:host(.highlight[size=extra-small]:not([icon]):not(.menu-item):not([shape=dot])) .highlight-container{background-color:var(--light, #ffffff);border:0.0625rem solid var(--light, #ffffff)}:host([size=extra-extra-small]:not([icon]):not(.menu-item):not([shape=dot])){font-size:var(--spacing-08, 0.5rem)}:host([size=extra-extra-small]:not([icon]):not(.menu-item):not([shape=dot])) .outer-container{min-width:1rem;height:1rem}:host(.highlight[size=extra-extra-small]:not([icon]):not(.menu-item):not([shape=dot])){font-size:max(var(--spacing-08, 0.5rem), var(--font-size-12, 0.75rem))}:host(.highlight[size=extra-extra-small]:not([icon]):not(.menu-item):not([shape=dot])) .highlight-container{background-color:var(--light, #ffffff);border:0.0625rem solid var(--light, #ffffff)}:host([size=small]:not([icon]):not(.menu-item):not([shape=dot])){font-size:var(--font-size-16, 1rem)}:host([size=small]:not([icon]):not(.menu-item):not([shape=dot])) .outer-container{min-width:1.5rem;height:1.5rem}:host(.highlight[size=small]:not([icon]):not(.menu-item):not([shape=dot])){font-size:max(var(--font-size-16, 1rem), var(--font-size-12, 0.75rem))}:host(.highlight[size=small]:not([icon]):not(.menu-item):not([shape=dot])) .highlight-container{background-color:var(--light, #ffffff);border:0.0625rem solid var(--light, #ffffff)}:host([size=extra-small][shape=oval]) .highlight-container,:host([size=extra-small][shape=oval]) .outer-container{min-width:1.5rem !important}:host([size=small][shape=oval]) .highlight-container,:host([size=small][shape=oval]) .outer-container{min-width:2rem !important}:host([size=extra-extra-small][shape=dot]) .highlight-container,:host([size=extra-extra-small][shape=dot]) .outer-container{min-width:0.125rem;height:0.125rem}:host([size=extra-small][shape=dot]) .highlight-container,:host([size=extra-small][shape=dot]) .outer-container{min-width:0.25rem;height:0.25rem}:host([size=small][shape=dot]) .highlight-container,:host([size=small][shape=dot]) .outer-container{min-width:0.5rem;height:0.5rem}:host(.custom-theme){border-color:var(--app-color, #5a30f4) !important}";
 

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
-require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
+require('./index-de8540eb.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-1fdbd9b3.js');
 
 const bannerCss = ":host([fill]) yoo-icon[name=cross]{fill:var(--close-icon-color)}:host(:not([fill])){--main-color:var(--light, #ffffff);--main-text-color:var(--dark, #000000);-webkit-box-shadow:var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08));box-shadow:var(--card-shadow-2, 0 0.3125rem 0.9375rem 0 rgba(40, 47, 54, 0.08))}:host(:not([fill])) yoo-icon[name=cross]{fill:var(--text-color, #807f83)}:host(.center) ::slotted(*){display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host(.sharp){border-radius:0}:host(.mobile){-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.mobile) ::slotted([slot=content]){width:calc(100% - var(--spacing-40, 2.5rem))}:host(.mobile:not([size=large])) ::slotted([slot=action]){margin-bottom:var(--spacing-08, 0.5rem);margin-left:var(--icon-size-02, 1.5rem)}:host(.mobile[size=large]) ::slotted([slot=action]){margin-left:var(--spacing-08, 0.5rem)}:host(.mobile[size=large]:not([closable])) ::slotted([slot=action]){margin-left:var(--spacing-16, 1rem)}:host{--main-color:var(--warning, #ed6e33);--main-text-color:var(--light, #ffffff);--close-icon-color:var(--text-color, #807f83);display:block;padding:0 var(--spacing-08, 0.5rem);color:var(--main-text-color);font-size:var(--font-size-14, 0.875rem);background-color:var(--main-color);border-radius:var(--border-radius-04, 0.25rem)}:host .flex{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;height:100%}:host .flex hr{width:1px;height:60%;margin-left:var(--spacing-08, 0.5rem);background:var(--close-icon-color);border:0;opacity:0.4}:host .action-container{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin-bottom:var(--spacing-08, 0.5rem)}:host .action-container.hasLeftIcon{margin-left:var(--icon-size-02, 1.5rem)}:host .action-container.small{margin-left:var(--icon-size-01, 1rem)}:host .action-container.large{margin-left:var(--icon-size-03, 2rem)}:host .link{font-weight:var(--font-weight-400, 400);text-decoration:underline;cursor:pointer;opacity:0.5}:host yoo-icon[name=cross],:host yoo-icon[name=close]{padding-right:var(--spacing-08, 0.5rem);padding-left:var(--spacing-16, 1rem);cursor:pointer}:host yoo-icon[name=close]{fill:var(--text-color, #807f83)}:host .left-icon{margin-left:var(--spacing-08, 0.5rem)}::slotted([slot=content]){width:100%;padding:0 var(--spacing-08, 0.5rem);color:var(--main-text-color)}";
 

package/dist/cjs/yoo-barcode-dialog.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const barcodeDialogCss = ":host yoo-ion-content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host yoo-barcode{width:100%;height:100px;margin:1rem 0}";
 
@@ -15,7 +16,7 @@ const YooBarcodeDialogComponent = class {
     index.registerInstance(this, hostRef);
   }
   onClose() {
-    index$1.closeModal(null);
+    overlays.closeModal(null);
   }
   renderHeader() {
     return (index.h("yoo-header", null, index.h("yoo-navbar", null, index.h("yoo-items", { slot: "start" }, index.h("yoo-button", { color: "text-color", fill: "transparent", shape: "circular", rippleType: "unbounded", onClick: () => this.onClose() }, index.h("yoo-icon", { name: "close" }))), index.h("yoo-truncate", null, this.heading))));

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$a = require('./index-c8609d4f.js');
+const index$a = require('./index-e182c32d.js');
 const _commonjsHelpers = require('./_commonjsHelpers-94df2ea7.js');
 
 var Barcode_1 = _commonjsHelpers.createCommonjsModule(function (module, exports) {

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

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
-const commonHelpers = require('./common-helpers-6970c46c.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const commonHelpers = require('./common-helpers-a4efe957.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const battleCountDownCss = ".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)}";
 
@@ -30,16 +31,16 @@ const YooBattleCountDownComponent = class {
   }
   componentDidLoad() {
     if (this.animations && !index.Build.isServer) {
-      return index$1.gsapTimeline().then((timeline) => {
+      return overlays.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: 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.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.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: index$1.Back.easeOut, xPercent: 0, opacity: 1 }, 0.7);
+        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 .stats-container'), 0.3, { opacity: 0 }, { opacity: 1 }, 0.8);
         tl.fromTo(this.getContainer('.countdown'), 0.5, { opacity: 0 }, { opacity: 1 }, 0);
       });
@@ -54,7 +55,7 @@ const YooBattleCountDownComponent = class {
       return;
     }
     try {
-      index$1.gsapTimeline().then((timeline) => {
+      overlays.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);
@@ -67,19 +68,19 @@ const YooBattleCountDownComponent = class {
   }
   setCountDownTimer() {
     const ONE_SECOND_MILISECOND = 1000;
-    const requestIntervalID = index$1.requestInterval(() => {
+    const requestIntervalID = overlays.requestInterval(() => {
       this.innerTimer--;
       this.timerElement.value = (this.innerTimer / this.start) * 100;
-      this.timerElement.nextElementSibling.textContent = index$1.getFormattedCountDownToDisplay(this.innerTimer, false);
+      this.timerElement.nextElementSibling.textContent = overlays.getFormattedCountDownToDisplay(this.innerTimer, false);
       if (this.innerTimer < 0) {
-        index$1.cancelRequestInterval(requestIntervalID['value']);
+        overlays.cancelRequestInterval(requestIntervalID['value']);
         requestIntervalID['value'] = null;
         this.onTimeFinished();
       }
     }, ONE_SECOND_MILISECOND);
   }
   renderTimer() {
-    const countStartDownDisplay = index$1.getFormattedCountDownToDisplay(this.start, false);
+    const countStartDownDisplay = overlays.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;
@@ -97,8 +98,8 @@ const YooBattleCountDownComponent = class {
     }
   }
   renderUser(user) {
-    const avatarSize = index$1.isIphone5() || index$1.isIphoneSE() ? 'large' : 'extra-large';
-    const extraClass = index$1.isIphone5() || index$1.isIphoneSE() ? ' small-phone' : '';
+    const avatarSize = overlays.isIphone5() || overlays.isIphoneSE() ? 'large' : 'extra-large';
+    const extraClass = overlays.isIphone5() || overlays.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) {
@@ -109,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 }, index$1.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 }, overlays.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': index$1.isIphone5() || index$1.isIphoneSE() } }, index$1.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': overlays.isIphone5() || overlays.isIphoneSE() } }, overlays.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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c8609d4f.js');
-const index$1 = require('./index-f3d7c03d.js');
+const index = require('./index-e182c32d.js');
+require('./index-1fdbd9b3.js');
+const overlays = require('./overlays-b6c94fc8.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-fc264952.js');
+require('./index-de8540eb.js');
 
 const battleResultCss = ":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:0.625rem;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)}";
 
@@ -59,9 +60,9 @@ const YooBattleResultComponent = class {
       return {
         title: 'TIMETAKEN',
         userIcon: null,
-        userScore: index$1.translate('YOOBICSECS', { sec: this.getDurationInSec(this.entry.userDuration) }),
+        userScore: overlays.translate('YOOBICSECS', { sec: this.getDurationInSec(this.entry.userDuration) }),
         opponentIcon: null,
-        opponentScore: this.entry.opponentDuration !== undefined ? index$1.translate('YOOBICSECS', { sec: this.getDurationInSec(this.entry.opponentDuration) }) : undefined
+        opponentScore: this.entry.opponentDuration !== undefined ? overlays.translate('YOOBICSECS', { sec: this.getDurationInSec(this.entry.opponentDuration) }) : undefined
       };
     }
   }
@@ -78,7 +79,7 @@ const YooBattleResultComponent = class {
   }
   componentDidLoad() {
     if (!index.Build.isServer) {
-      return index$1.gsapTimeline().then((timeline) => {
+      return overlays.gsapTimeline().then((timeline) => {
         var _a;
         const tl = timeline();
         const userBars = Array.from(this.host.shadowRoot.querySelectorAll('.score.user'));
@@ -91,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: index$1.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: overlays.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);
         }
@@ -138,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" }, index$1.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" }, overlays.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" }, index$1.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" }, overlays.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, null, 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" })));
+    return (index.h(index.Host, null, 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" })));
   }
   static get assetsDirs() { return ["assets/battle-result"]; }
   get host() { return index.getElement(this); }