@yoobic/yobi 8.2.0-0 → 8.2.0-11

package/dist/design-system/yoo-alert.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-3d00bad4.js';
-import { cZ as fadeScaleAnimation, cX as present, c_ as isAnimationsDisabled, cY as dismiss, t as translate, bf as isTranslationKey, T as translateMulti, _ as getSession } from './index-ac1d7e65.js';
-import { l as lifecycleEvents, b as getAppContext } from './common-helpers-34c5464d.js';
-import { e as eventMethod } from './overlays-bd302acb.js';
-import { m as modalAnimationFactory } from './modal-animations-946f33c5.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
+import { cZ as fadeScaleAnimation, cX as present, c_ as isAnimationsDisabled, cY as dismiss, t as translate, bf as isTranslationKey, T as translateMulti, _ as getSession } from './index-1a55b25d.js';
+import { l as lifecycleEvents, b as getAppContext } from './common-helpers-c2053ae8.js';
+import { e as eventMethod } from './overlays-43a26f9e.js';
+import { m as modalAnimationFactory } from './modal-animations-f264d22d.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.js';
 
 const alertCss = ".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)}:host .overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20001;background-color:var(--dark-20, rgba(0, 0, 0, 0.2));opacity:0}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .alert-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:70%;max-width:270px;min-height:90px;padding-top:1rem;background:-webkit-gradient(linear, left top, left bottom, from(var(--light-10, rgba(255, 255, 255, 0.1))), to(var(--light-10, rgba(255, 255, 255, 0.1)))), var(--light, #ffffff);background:linear-gradient(var(--light-10, rgba(255, 255, 255, 0.1)), var(--light-10, rgba(255, 255, 255, 0.1))), var(--light, #ffffff);border-radius:8px}:host .outer-container .alert-container .img-container{position:absolute;top:-4rem;left:33%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:5.5rem;height:5.5rem;background:-webkit-gradient(linear, left top, left bottom, from(var(--light-10, rgba(255, 255, 255, 0.1))), to(var(--light-10, rgba(255, 255, 255, 0.1)))), var(--light, #ffffff);background:linear-gradient(var(--light-10, rgba(255, 255, 255, 0.1)), var(--light-10, rgba(255, 255, 255, 0.1))), var(--light, #ffffff);border-radius:50%;-webkit-animation:bounce 0.7s ease-out 0.3s 1 normal both;animation:bounce 0.7s ease-out 0.3s 1 normal both}:host .outer-container .alert-container .img-container yoo-avatar{position:absolute;top:10%}:host .outer-container .alert-container .img-container yoo-tag{margin-top:var(--spacing-08, 0.5rem)}:host .outer-container .alert-container .header-container,:host .outer-container .alert-container .message-container,:host .outer-container .alert-container .icon-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .outer-container .alert-container .icon-container{margin-bottom:1rem;font-size:var(--icon-size-04, 3rem)}:host .outer-container .alert-container .header-container{padding:0 0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem);text-align:center}:host .outer-container .alert-container .header-container span{overflow:hidden;color:var(--dark, #000000);text-overflow:ellipsis}:host .outer-container .alert-container .header-container.with-image{padding-top:1rem}:host .outer-container .alert-container .message-container{padding:0.5rem 1rem;color:var(--text-color, #807f83);font-size:var(--font-size-16, 1rem);text-align:center}:host .outer-container .alert-container .input-container{padding:1rem 1rem 0}:host .outer-container .alert-container .input-container .field-translation{margin-top:var(--spacing-02, 0.125rem)}:host .outer-container .alert-container .buttons-container{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;height:43px;margin-top:1.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .alert-container .buttons-container .button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;text-align:center;border-right:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1);cursor:pointer}:host .outer-container .alert-container .buttons-container .button.last{border-right:none}:host .outer-container .alert-container .buttons-container .button.danger{font-weight:var(--font-weight-400, 400)}:host .outer-container .alert-container .link{padding:0 var(--spacing-16, 1rem);text-align:center}:host .outer-container .alert-container .footer{margin:0 auto;padding-top:16px;color:var(--dark, #000000);font-size:var(--font-size-14, 0.875rem)}:host(.photo-editor-alert) .outer-container .alert-container .buttons-container .button.danger{color:var(--dark, #000000);font-weight:var(--font-weight-400, 400)}:host(.photo-editor-alert) .outer-container .alert-container .buttons-container .button.last{color:var(--danger, #d44333);font-weight:var(--font-weight-400, 400)}:host(.badge) yoo-navbar yoo-items yoo-button yoo-icon{position:relative}:host(.badge) .outer-container .alert-container .header-container{font-weight:var(--font-weight-400, 400)}:host(.badge) .outer-container .alert-container .message-container{color:var(--stable, #adadad)}:host(.timed-lesson) .outer-container .alert-container .buttons-container .last{color:var(--app-color, #5a30f4);font-weight:var(--font-weight-400, 400)}:host(.web) .outer-container .alert-container .message-container{white-space:normal;word-break:break-word;-webkit-user-select:all;-moz-user-select:all;user-select:all}:host(.battle-alert) .outer-container .alert-container .message-container{color:var(--dark, #000000)}:host(.battle-alert) .outer-container .alert-container .img-container{position:relative;top:0;left:0;width:100%;height:var(--icon-size-04, 3rem);margin-top:0.25rem;background:transparent;-webkit-animation:none;animation:none}:host(.battle-alert) .outer-container .alert-container .header-container.with-image{padding-top:0.6rem}:host(.translate-warning) .outer-container .alert-container{max-width:20rem}:host(.translate-warning) .outer-container .alert-container .buttons-container .button.last{color:var(--app-color, #5a30f4)}:host(.confidence) .outer-container .alert-container .message-container{color:var(--dark, #000000);font-size:var(--font-size-14, 0.875rem)}:host(.webpart) .overlay{position:fixed}:host(.webpart) .outer-container{position:fixed}";
 

package/dist/design-system/yoo-amap.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, i as createEvent, h, g as getElement } from './index-3d00bad4.js';
-import { bP as loadScript, y as getCssColor, d as isNativeMobile } from './index-ac1d7e65.js';
-import { q as querySelectorDeep } from './common-helpers-34c5464d.js';
-import { h as hasSameMarkers, g as generateFilterGroups, l as layersFromKeys } from './map-helpers-e4188d89.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, i as createEvent, h, g as getElement } from './index-019c1b1a.js';
+import { bP as loadScript, y as getCssColor, d as isNativeMobile } from './index-1a55b25d.js';
+import { q as querySelectorDeep } from './common-helpers-c2053ae8.js';
+import { h as hasSameMarkers, g as generateFilterGroups, l as layersFromKeys } from './map-helpers-9ed4c4d9.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.js';
 
 const amapCss = ":host{display:block;width:100%;height:100%}:host .amap-copyright,:host .version{font-family:Arial, sans-serif}:host .vml{position:absolute;display:inline-block;behavior:url(#default#VML)}:host .amap-sug-result{position:fixed;z-index:1024;background-color:#fefefe;border:var(--border-width-01, 0.0625rem) solid #d1d1d1}:host .auto-item:hover{background-color:#CAE1FF}:host .auto-item{padding:4px;font-size:var(--font-size-12, 0.75rem);cursor:pointer}:host .auto-item-span{padding-left:4px;color:#C1C1C1}:host .amap-custom{position:absolute;top:0;left:0}:host .amap-container img{max-width:none !important;max-height:none !important}:host .amap-container{position:relative;overflow:hidden;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACu5JREFUeNrs3MGN4lAQBFB7IyMzTGZkxmImAdNqfRWt9yTf+jKuQ8lIU9vr9douPIe7JXcv70Ue7uQhD3eVPP5tAMDPU+gAoNABAIUOACh0AEChA4BCBwAUOgDQaD//ad1riHF/Pw+vQR7IQx58nYfFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANBoylLc7f08B/wdU5aX5CEPechDHqvzsLhjecmdPOThTh6W4gCAAAodABQ6AKDQAQCFDgAodABQ6ACAQgcAGk1ZiptiyvKSPJCHPFidh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0Gj/LAMAAD//hb5feB7ultxt3os83MlDHu4qefjJHQCGfKEDAAodAFDoAIBCBwAUOgAodABAoQMATc6luMNriHHf/kYEkAfykAff5XEuv154DndL7l7eizzcyUMe7ip5+MkdAAZQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANBoylLc7f08B/wdU5aX5CEPechDHqvzsLhjecmdPOThTh6W4gCAAAodABQ6AKDQAQCFDgAodABQ6ACAQgcAGk1ZiptiyvKSPJCHPFidh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0Gj/LAMAAD//hb5feB7ultxt3os83MlDHu4qefjJHQCGfKEDAAodAFDoAIBCBwAUOgAodABAoQMATc6luMNriHHf/kYEkAfykAff5XEuv154DndL7l7eizzcyUMe7ip5+MkdAAZQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANBoylLc7f08B/wdU5aX5CEPechDHqvzsLhjecmdPOThTh6W4gCAAAodABQ6AKDQAQCFDgAodABQ6ACAQgcAGk1ZiptiyvKSPJCHPFidh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0Gj/LAMAAD//hb5feB7ultxt3os83MlDHu4qefjJHQCGfKEDAAodAFDoAIBCBwAUOgAodABAoQMATc6luMNriHHf/kYEkAfykAff5XEuv154DndL7l7eizzcyUMe7ip5+MkdAAZQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANBoylLc7f08B/wdU5aX5CEPechDHqvzsLhjecmdPOThTh6W4gCAAAodABQ6AKDQAQCFDgAodABQ6ACAQgcAGk1ZiptiyvKSPJCHPFidh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0Gj/LAMAAD//hb5feB7ultxt3os83MlDHu4qefjJHQCGfKEDAAodAFDoAIBCBwAUOgAodABAoQMATc6luMNriHHf/kYEkAfykAff5XEuv154DndL7l7eizzcyUMe7ip5+MkdAAZQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANBoylLc7f08B/wdU5aX5CEPechDHqvzsLhjecmdPOThTh6W4gCAAAodABQ6AKDQAQCFDgAodABQ6ACAQgcAGk1ZiptiyvKSPJCHPFidh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0MhSXBbLS/JAHvKglofFHctL7uQhD3fysBQHAARQ6ACg0AEAhQ4AKHQAQKEDgEIHABQ6ANDIUlwWy0vyQB7yoJaHxR3LS+7kIQ938rAUBwAEUOgAoNABAIUOACh0AEChA4BCBwAUOgDQyFJcFstL8kAe8qCWh8Udy0vu5CEPd/KwFAcABFDoAKDQAQCFDgAodABAoQOAQgcAFDoA0Gj/LAMAAD/tvwADACFZc/6Ic+VNAAAAAElFTkSuQmCC) #fcf9f2;-ms-touch-action:none;touch-action:none}:host .amap-drags,:host .amap-layers{position:absolute;width:100%;height:100%;overflow:hidden}:host .amap-layer img{pointer-events:none}:host .amap-e,:host .amap-maps{width:100%;height:100%}:host .amap-e,:host .amap-layers,:host .amap-maps,:host .amap-tile,:host .amap-tile-container{position:absolute;top:0;left:0;overflow:hidden}:host .amap-context,:host .amap-graph,:host .amap-marker,:host .amap-markers,:host .amap-overlays,:host .amap-statics{position:absolute;top:0;left:0}:host .amap-layers{z-index:0}:host .amap-overlays{z-index:110;cursor:default}:host .amap-info,:host .amap-markers{z-index:120}:host .amap-statics{z-index:140}:host .amap-controls{z-index:150}:host .amap-copyright,:host .amap-logo{position:absolute;bottom:0;z-index:160;line-height:16px}:host .version{font-size:var(--font-size-12, 0.75rem)}:host .amap-copyright{left:70px;display:block !important;height:16px;font-size:var(--font-size-12, 0.75rem)}:host .google-copyright .google_logo{width:46px;height:18px;vertical-align:middle}:host .amap-logo{left:0;height:17px;margin:0 var(--border-width-01, 0.0625rem)}:host .amap-logo img{width:67px !important;height:16px !important;vertical-align:baseline !important;border:none}:host .amap-icon{position:relative;z-index:1;overflow:hidden}:host .amap-icon img{position:absolute;z-index:-1}:host .amap-marker-label{position:absolute;z-index:2;padding:3px;font-size:var(--font-size-12, 0.75rem);line-height:14px;white-space:nowrap;background-color:#fff;border:var(--border-width-01, 0.0625rem) solid #00f;cursor:default}:host .amap-info,:host .amap-menu{position:absolute;z-index:140}:host .amap-info{left:0;width:320px}:host .amap-info-close{position:absolute;top:5px;right:5px;width:14px;height:14px;color:#C3C3C3;font:700 16px/14px Tahoma, Verdana, sans-serif;text-decoration:none}:host .amap-info-sharp,:host .amap-marker-content{position:relative}:host .amap-info-outer,:host .amap-menu-outer{padding:var(--border-width-01, 0.0625rem);text-align:left;background:#fff;border:var(--border-width-01, 0.0625rem) solid silver;border-radius:2px;-webkit-box-shadow:0 3px 14px rgba(0, 0, 100, 0.6);box-shadow:0 3px 14px rgba(0, 0, 100, 0.6)}:host .amap-info-outer:hover,:host .amap-menu-outer:hover{-webkit-box-shadow:0 3px 14px rgba(0, 0, 0, 0.75);box-shadow:0 3px 14px rgba(0, 0, 0, 0.75)}:host .amap-info-content{padding:10px 18px 10px 10px;overflow:auto;line-height:1.4;background:#fff;border:var(--border-width-01, 0.0625rem) solid #ccc}:host .amap-info-content::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host .amap-info-content::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .amap-info-content::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}:host .amap-info-content:hover::-webkit-scrollbar-track{background-color:var(--stable-light, #f1f1f1)}:host .amap-info-content:hover::-webkit-scrollbar-thumb{background:var(--stable, #adadad)}:host .amap-info-sharp{top:-1px;width:30px;height:23px;margin:0 auto;overflow:hidden;background-image:url(./sharp.png)}:host .amap-menu-outer{margin:0;padding:0;list-style-type:none}:host ul.amap-menu-outer li{height:35px;padding:0 10px;font-size:var(--font-size-12, 0.75rem);line-height:35px;white-space:nowrap;word-break:break-word;cursor:pointer}:host ul.amap-menu-outer li a{margin:0 5px;padding:5px;color:#000;font-size:var(--font-size-14, 0.875rem);text-decoration:none}:host ul.amap-menu-outer li:hover{background-color:#F3F3EE}:host .amap-menu-split{border-bottom:#ccc solid var(--border-width-01, 0.0625rem)}:host .amap-menu-cp{font-size:var(--font-size-12, 0.75rem)}:host .amap-maptypecontrol,:host .amap-overviewcontrol,:host .amap-scalecontrol,:host .amap-toolbar{z-index:150}:host .amap-toolbar{position:absolute;width:52px;overflow:visible}:host .amap-pancontrol{position:absolute;width:52px;height:52px;background:url(./map_view.png) 0 -140px}:host .amap-pan-bottom,:host .amap-pan-left,:host .amap-pan-right,:host .amap-pan-top{position:absolute;cursor:pointer}:host .amap-pan-left,:host .amap-pan-right{top:17px;width:12px;height:18px}:host .amap-pan-bottom,:host .amap-pan-top{left:17px;width:18px;height:12px}:host .amap-pan-left{left:8px}:host .amap-pan-right{left:32px}:host .amap-pan-top{top:8px}:host .amap-pan-bottom{top:31px}:host .amap-pan-bottom:hover,:host .amap-pan-left:hover,:host .amap-pan-right:hover,:host .amap-pan-top:hover{background:url(./map_view.png)}:host .amap-pan-left:hover{background-position:-52px -110px}:host .amap-pan-top:hover{background-position:-70px -112px}:host .amap-pan-right:hover{background-position:-61px -110px}:host .amap-pan-bottom:hover{background-position:-84px -110px}:host .amap-pan-left-hover{background-position:-52px -110px}:host .amap-pan-top-hover{background-position:-70px -112px}:host .amap-pan-right-hover{background-position:-61px -110px}:host .amap-pan-bottom-hover{background-position:-84px -110px}:host .amap-zoomcontrol{position:absolute;width:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}:host .amap-zoom-cursor,:host .amap-zoom-label-city,:host .amap-zoom-label-country,:host .amap-zoom-label-province,:host .amap-zoom-label-street,:host .amap-zoom-minus,:host .amap-zoom-plus{background:url(./map_view.png);cursor:pointer}:host .amap-zoom-mask,:host .amap-zoom-ruler{background:url(./toolbar_rbg.png);cursor:pointer}:host .amap-zoom-minus,:host .amap-zoom-plus{width:24px;height:21px}:host .amap-zoom-plus{background-position:0 -217px}:host .amap-zoom-plus:hover{background-position:0 -194px}:host .amap-zoom-minus{background-position:-26px -224px}:host .amap-zoom-minus:hover{background-position:-26px -195px}:host .amap-zoom-plus2:hover{background-position:-50px -194px;cursor:default}:host .amap-zoom-minus2:hover{background-position:-50px -223px;cursor:default}:host .amap-zoom-ruler{position:relative;left:6px;width:12px;height:147px;overflow:visible;background-position:0 0}:host .amap-locate,:host .amap-scalecontrol,:host .amap-toolbar-geo,:host .amap-zoom-cursor,:host .amap-zoom-label-city,:host .amap-zoom-label-country,:host .amap-zoom-label-province,:host .amap-zoom-label-street,:host .amap-zoom-labels,:host .amap-zoom-mask{position:absolute}:host .amap-zoom-mask{width:12px;height:106px;background-position:-14px 0}:host .amap-zoom-cursor{top:106px;left:-6px;width:24px;height:20px;background-position:-127px -164px}:host .amap-zoom-cursor:hover{background-position:-127px -141px}:host .amap-zoom-labels{display:none}:host .amap-zoom-label-city,:host .amap-zoom-label-country,:host .amap-zoom-label-province,:host .amap-zoom-label-street{left:20px;width:39px;height:31px}:host .amap-zoom-label-street{top:0;background-position:-87px -140px}:host .amap-zoom-label-city{top:54px;background-position:-87px -171px}:host .amap-zoom-label-province{top:92px;background-position:-87px -203px}:host .amap-zoom-label-country{top:129px;background-position:-87px -235px}:host .amap-locate{width:18px;height:18px;background:url(./map_view.png) -130px -185px;cursor:pointer}:host .amap-geo{right:7px;bottom:18px;width:30px;height:30px;cursor:pointer}:host .amap-scale-text{font-size:var(--font-size-12, 0.75rem);text-align:center}:host .amap-scale-line{position:relative;height:8px}:host .amap-scale-line div{-webkit-box-sizing:content-box !important;-moz-box-sizing:content-box !important;box-sizing:content-box !important}:host .amap-scale-edgeleft,:host .amap-scale-edgeright,:host .amap-scale-middle{position:absolute;overflow:hidden;background-color:#333}:host .amap-scale-edgeleft,:host .amap-scale-edgeright{width:var(--border-width-01, 0.0625rem);height:6px;border:var(--border-width-01, 0.0625rem) solid #fff}:host .amap-scale-middle{top:2px;left:2px;height:2px;border-top:solid var(--border-width-01, 0.0625rem) #fff;border-bottom:solid var(--border-width-01, 0.0625rem) #fff}:host .amap-overviewcontrol{position:absolute;right:0;bottom:0;width:120px;height:120px;background:#fff}:host .amap-overview-main{position:absolute;top:5px;left:5px;width:115px;height:115px;overflow:hidden}:host .amap-overview-main,:host .amap-overviewcontrol{border-top:solid var(--border-width-01, 0.0625rem) #ccc;border-left:solid var(--border-width-01, 0.0625rem) #ccc}:host .amap-overview-map{position:absolute}:host .amap-overview-button{position:absolute;right:0;bottom:0;width:17px;height:17px;background:url(./mapcontrols.png) -40px -386px;cursor:pointer}:host .amap-overview-win{position:absolute;top:40px;left:26px;width:62px;height:35px;background:#91a3d8;border:var(--border-width-02, 0.125rem) solid #44b;cursor:move;opacity:0.25;filter:alpha(opacity=25)}:host .amap-maptypecontrol{position:absolute;top:12px;right:12px;z-index:304}:host .amap-maptype-wrap{position:absolute;top:0;right:0;width:64px;height:64px}:host .amap-maptype-con{position:absolute;top:0;right:0;width:60px;height:60px;background:#fff;border:var(--border-width-01, 0.0625rem) solid #ccc;cursor:pointer}:host .amap-maptype-win{position:absolute;top:var(--border-width-01, 0.0625rem);right:var(--border-width-01, 0.0625rem);width:56px;height:56px;overflow:hidden;background:#ccc;border:var(--border-width-01, 0.0625rem) solid #ccc}:host .amap-maptype-title{position:absolute;bottom:0;left:0;width:60px;height:20px;color:#333;font-size:var(--font-size-12, 0.75rem);line-height:20px;text-align:center;background:#fff}:host .amap-maptype-title:hover{background-color:#eee}:host .amap-maptype-list{position:absolute;top:64px;right:0;width:100px;overflow:hidden;background:#fff;border:var(--border-width-01, 0.0625rem) solid #ccc}:host .amap-maptype-list p{width:100px;height:20px;margin:0;background:#fff;cursor:pointer}:host .amap-maptype-lsit p:hover{background:#eee}:host .amap-maptype-check{display:inline-block;width:15px;height:15px;margin-left:2px;background:url(./maptype-bg.png) -30px 4px no-repeat}:host .amap-maptype-checked{background-position:0 4px}:host .amap-maptype-check-hover{background-position:-15px 4px}:host .amap-maptype-label{display:inline-block;width:60px;height:15px;margin-left:10px;color:#333;font-size:var(--font-size-12, 0.75rem);line-height:15px}:host .amap-ranging-label{padding:3px 7px 3px 2px;font-size:var(--font-size-12, 0.75rem);line-height:14px;white-space:nowrap;background:#fff;border:var(--border-width-01, 0.0625rem) solid #ccc}:host .amap-dis{border-width:0;-moz-box-shadow:0 3px 3px #888;-webkit-box-shadow:0 3px 3px #888;box-shadow:0 3px 3px #888}:host .amap-ranging-label span{display:inline-block;height:12px;margin-left:5px;white-space:nowrap;vertical-align:center}:host .amap-ranging-label span img{margin-top:-2px}:host .amap-ranging-label span .delimg{margin-bottom:-3px}:host .amap-touch-toolbar .amap-zoomcontrol{position:absolute;right:4px;bottom:-80px;z-index:500;width:35px;background-color:#fff;background-color:rgba(255, 255, 255, 0.9);border:var(--border-width-01, 0.0625rem) solid #ccc;border-radius:3px;-webkit-box-shadow:var(--border-width-01, 0.0625rem) var(--border-width-01, 0.0625rem) 10px 0 #ccc;box-shadow:var(--border-width-01, 0.0625rem) var(--border-width-01, 0.0625rem) 10px 0 #ccc}:host .amap-touch-toolbar .amap-zoomcontrol:after{position:absolute;top:48px;right:0;left:0;width:60%;height:var(--border-width-01, 0.0625rem);margin:auto;background:#ddd;content:\"\"}:host .amap-geolocation-con .amap-geo,:host .amap-touch-toolbar .amap-geo{right:4px;width:35px;height:35px;background:url(./markers/b/loc_gray.png) 50% 50% no-repeat #fff;border:var(--border-width-01, 0.0625rem) solid #ccc;border-radius:3px}:host .amap-toolbar-geo-secc{background-image:url(./markers/b/loc.png) !important;background-position-x:6px !important;background-size:22px 22px !important}:host .amap-locate-loading .amap-geo,:host .amap-touch-toolbar .amap-locate-loading{background-image:url(./loading.gif)}:host .amap-zoom-touch-plus{margin-bottom:5px}:host .amap-zoom-touch-minus,:host .amap-zoom-touch-plus{width:100%;height:43px;background-color:#fff;background-color:rgba(255, 255, 255, 0.5)}:host .amap-zoom-touch-minus>div,:host .amap-zoom-touch-plus>div{height:100%;margin:auto;color:#666;font-size:var(--font-size-28, 1.75rem);font-family:verdana, sans-serif;line-height:43px;text-align:center;cursor:pointer}:host .amap-zoom-touch>div{opacity:0.2}:host .amap-popup{position:fixed;top:50%;left:50%;margin-top:-170px;margin-left:-165px;text-align:center}:host .amap-popup-content{height:340px;margin:0 auto;overflow:hidden;line-height:200px;text-align:center;vertical-align:middle;background-color:#fff;border:solid #ddf;border-width:3px var(--border-width-01, 0.0625rem);border-radius:5px}:host .column-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}:host .column-container #map-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;width:100%;height:600px;background:var(--dark, #000000);border:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4))}:host .column-container .marker-info{padding-bottom:var(--spacing-08, 0.5rem);text-align:center;background:var(--light, #ffffff);border-top:var(--border-width-01, 0.0625rem) solid var(--border-color)}:host .column-container .marker-info .title{margin-top:var(--spacing-08, 0.5rem);font-weight:var(--font-weight-400, 400)}";
 

package/dist/design-system/yoo-announcement-heading.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, h, e as Host } from './index-3d00bad4.js';
-import { y as getCssColor, cC as getMissionPublicationDate, cA as isToday, t as translate, cB as fromToday, Z as dateFormat, aE as isPresent, D as isDateAfter, T as translateMulti } from './index-ac1d7e65.js';
-import { b as getMissionDueDate } from './missions-helpers-d7921d84.js';
-import { k as execHandlerAndStopEvent } from './common-helpers-34c5464d.js';
-import { M as MissionLockedBanner } from './mission-locked-banner-b3529ff3.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, h, e as Host } from './index-019c1b1a.js';
+import { y as getCssColor, cC as getMissionPublicationDate, cA as isToday, t as translate, cB as fromToday, Z as dateFormat, aE as isPresent, D as isDateAfter, T as translateMulti } from './index-1a55b25d.js';
+import { b as getMissionDueDate } from './missions-helpers-58d40724.js';
+import { k as execHandlerAndStopEvent } from './common-helpers-c2053ae8.js';
+import { M as MissionLockedBanner } from './mission-locked-banner-a3a85af2.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.js';
 
-const announcementHeadingCss = ":host{--announcement-background-color:var(--stable-light, #f1f1f1);--announcement-color:var(--dark, #000000)}:host yoo-banner{margin:var(--spacing-08, 0.5rem)}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);color:var(--announcement-color);background-color:var(--announcement-background-color)}:host .outer-container .title{font-weight:bold;font-size:var(--font-size-32, 2rem)}:host .outer-container .title yoo-truncate{--max-lines:4;--line-height:initial}:host .outer-container .tags yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .progress-separator{margin-bottom:var(--spacing-08, 0.5rem);border-bottom:1px solid var(--announcement-color)}:host .outer-container .progress{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.feed){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.feed) .outer-container{-ms-flex-pack:justify;justify-content:space-between;min-height:21.875rem}:host(.feed) .outer-container .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem)}:host(.feed) .outer-container .title{font-size:var(--font-size-28, 1.75rem)}:host(.feed) yoo-form-carousel{position:relative;z-index:1}:host(.feed) yoo-form-carousel .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;color:var(--light, #ffffff);background-color:transparent;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(11%, rgba(0, 0, 0, 0)), to(var(--dark-60, rgba(0, 0, 0, 0.6))));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 11%, var(--dark-60, rgba(0, 0, 0, 0.6)))}:host(.feed) .action{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:40px;padding:0 var(--spacing-08, 0.5rem) 0 var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-16, 1rem);background-color:var(--announcement-color)}";
+const announcementHeadingCss = ":host{--announcement-background-color:var(--stable-light, #f1f1f1);--announcement-color:var(--dark, #000000)}:host yoo-banner{--main-color:var(--warning-10, rgba(237, 110, 51, 0.1));margin:var(--spacing-08, 0.5rem)}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);color:var(--announcement-color);background-color:var(--announcement-background-color)}:host .outer-container .title{font-weight:bold;font-size:var(--font-size-32, 2rem)}:host .outer-container .title yoo-truncate{--max-lines:4;--line-height:initial}:host .outer-container .tags yoo-tag{margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}:host .outer-container .progress-separator{margin-bottom:var(--spacing-08, 0.5rem);border-bottom:1px solid var(--announcement-color)}:host .outer-container .progress{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}:host(.feed){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.feed) .outer-container{-ms-flex-pack:justify;justify-content:space-between;min-height:21.875rem}:host(.feed) .outer-container .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem)}:host(.feed) .outer-container .title{font-size:var(--font-size-28, 1.75rem)}:host(.feed) yoo-form-carousel{position:relative;z-index:1}:host(.feed) yoo-form-carousel .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;color:var(--light, #ffffff);background-color:transparent;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(11%, rgba(0, 0, 0, 0)), to(var(--dark-60, rgba(0, 0, 0, 0.6))));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 11%, var(--dark-60, rgba(0, 0, 0, 0.6)))}:host(.feed) .action{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:40px;padding:0 var(--spacing-08, 0.5rem) 0 var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-16, 1rem);background-color:var(--announcement-color)}";
 
 const YooAnnouncementHeadingComponent = class {
   constructor(hostRef) {

package/dist/design-system/yoo-app.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, f as forceUpdate, h, g as getElement } from './index-3d00bad4.js';
-import { d as isNativeMobile, e as isAndroid, f as isIpadPro, h as isIpad, j as isTablet, S as ScreenOrientation, s as setCurrentLanguage, l as loadTranslations } from './index-ac1d7e65.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, f as forceUpdate, h, g as getElement } from './index-019c1b1a.js';
+import { d as isNativeMobile, e as isAndroid, f as isIpadPro, h as isIpad, j as isTablet, S as ScreenOrientation, s as setCurrentLanguage, l as loadTranslations } from './index-1a55b25d.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.js';
 
 const YooAppComponent = class {
   constructor(hostRef) {

package/dist/design-system/yoo-audio-player.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-3d00bad4.js';
-import { d as isNativeMobile, am as isFile, ba as getMedia, G as cleanupWKWebViewFilePath, ar as isCloudinaryLink, k as Cloudinary, aw as changeExtension, aI as getUUID, dI as isFirefox, dG as getAudioDuration, o as isWeb, t as translate } from './index-ac1d7e65.js';
-import { g as getFromOfflineStorage } from './localForage-72f58d84.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
+import { d as isNativeMobile, am as isFile, ba as getMedia, G as cleanupWKWebViewFilePath, ar as isCloudinaryLink, k as Cloudinary, aw as changeExtension, aI as getUUID, dJ as isFirefox, dz as getAudioDuration, o as isWeb, t as translate } from './index-1a55b25d.js';
+import { g as getFromOfflineStorage } from './localForage-9fa56b53.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.js';
 
 const audioPlayerCss = ":host{--range-trail-color:var(--stable-light, #f1f1f1);--range-active-color:var(--app-color, #5a30f4);display:inline-grid;grid-gap:var(--spacing-16, 1rem);grid-template-columns:auto 1fr auto;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%}:host yoo-range{--knob-size:.75rem;--bar-active-color:var(--range-active-color);--bar-trail-color:var(--range-trail-color)}:host .audio-info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;color:var(--dark, #000000);font-size:var(--font-size-14, 0.875rem);text-align:right}:host .audio-info yoo-button{opacity:0}:host .audio-info.only-time span:first-child{color:var(--dark, #000000) !important;font-size:var(--font-size-14, 0.875rem)}:host .audio-info span:last-child{color:var(--stable, #adadad);font-size:var(--font-size-12, 0.75rem)}:host(.dark) yoo-button{--hover-color:var(--light-10, rgba(255, 255, 255, 0.1))}:host([disabled]) yoo-icon{fill:var(--stable, #adadad)}:host(:not([disabled])){--play-icon-color:var(--dark, #000000);--title-color:var(--dark, #000000);--time-color:var(--stable, #adadad)}:host(:not([disabled])) yoo-icon{fill:var(--play-icon-color)}:host(:not([disabled])) .audio-info{color:var(--title-color)}:host(:not([disabled])) .audio-info.only-time span:first-child{color:var(--title-color) !important}:host(:not([disabled])) .audio-info span:last-child{color:var(--time-color)}";
 
@@ -35,18 +35,20 @@ const YooAudioPlayerComponent = class {
     return this.initPlayer(true);
   }
   onVisibilityChanged() {
-    var _a;
-    (_a = this.audio) === null || _a === void 0 ? void 0 : _a.pause();
+    this.pause();
   }
   async getAudio() {
     return this.audio;
   }
+  async pause() {
+    var _a;
+    return (_a = this.audio) === null || _a === void 0 ? void 0 : _a.pause();
+  }
   async componentWillLoad() {
     return await this.initPlayer();
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.audio) === null || _a === void 0 ? void 0 : _a.pause();
+    this.pause();
   }
   isValidDuration(audio) {
     return (audio === null || audio === void 0 ? void 0 : audio.duration) > -1 && !(audio.duration === Infinity || isNaN(audio.duration));
@@ -69,7 +71,7 @@ const YooAudioPlayerComponent = class {
   async initPlayer(soureUpdate) {
     let src = await this.initSrc() || this.src;
     if (soureUpdate && this.audio) {
-      this.audio.pause();
+      this.pause();
     }
     const oldSource = src;
     src = this.fixCloudinarySource(src);
@@ -106,7 +108,7 @@ const YooAudioPlayerComponent = class {
       ev.stopPropagation();
       const { paused, ended, currentTime } = this.audio;
       if (!paused && !ended && currentTime) {
-        this.audio.pause();
+        this.pause();
       }
       else {
         this.audio.play();
@@ -118,7 +120,7 @@ const YooAudioPlayerComponent = class {
   render() {
     const pausePlay = (ev) => {
       this.isDragging = !ev;
-      this.audio.pause();
+      this.pause();
     };
     const resumePlay = (value) => {
       this.isDragging = false;

package/dist/design-system/yoo-audio-recorder-dialog.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-3d00bad4.js';
-import { W as pipes, cc as keepAwake, d as isNativeMobile, ca as addFilePrefix, I as closeModal, bF as isSafari, dI as isFirefox, aw as changeExtension, dJ as saveToLocalFile, cj as getMediaDevices, dK as removeFileAtPath, t as translate, G as cleanupWKWebViewFilePath } from './index-ac1d7e65.js';
-import { b as getAppContext } from './common-helpers-34c5464d.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-019c1b1a.js';
+import { W as pipes, cc as keepAwake, d as isNativeMobile, ca as addFilePrefix, I as closeModal, bF as isSafari, dJ as isFirefox, aw as changeExtension, dK as saveToLocalFile, cj as getMediaDevices, dL as removeFileAtPath, t as translate, G as cleanupWKWebViewFilePath } from './index-1a55b25d.js';
+import { b as getAppContext } from './common-helpers-c2053ae8.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.js';
 
 // Copied from https://github.com/chris-rudmin/Recorderjs
 

package/dist/design-system/yoo-avatar.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-3d00bad4.js';
-import { $ as isPaletteColor } from './index-21c7d38e.js';
-import { bc as isOffline, W as pipes, t as translate, o as isWeb } from './index-ac1d7e65.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
+import { $ as isPaletteColor } from './index-daddf2c7.js';
+import { bc as isOffline, W as pipes, t as translate, o as isWeb } from './index-1a55b25d.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const avatarCss = ":host{--transform-avatar:none;--display-avatar:inline-flex;--border-initial:0.0625rem solid var(--stable-light, #f1f1f1);--border-color-online:var(--light, #ffffff);--box-shadow:none;--inner-border:none;--image-shadow:unset;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transform:var(--transform-avatar);transform:var(--transform-avatar)}yoo-img{height:100%}.component-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-line-pack:distribute;align-content:space-around;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end;width:100%;height:100%}.component-states-container{position:absolute;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;width:100%;height:100%}.framing-container{position:relative;z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;overflow:hidden;border:var(--inner-border);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.online-indicator,.offline-indicator{position:absolute;right:0;bottom:0;z-index:2;border:var(--border-width-03, 0.1875rem) solid var(--border-color-online);border-radius:50%}.online-indicator{background-color:var(--success, #3aa76d)}.offline-indicator{background-color:var(--stable-alt, #d0d0d0)}.text-container{position:absolute;top:50%;left:50%;color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);white-space:nowrap;text-transform:uppercase;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.notifications-wrapper{position:absolute;top:0rem;right:0rem;z-index:2;-webkit-box-shadow:0 0 0 0.3125rem var(--light, #ffffff);box-shadow:0 0 0 0.3125rem var(--light, #ffffff)}.notifications-wrapper.dot{-webkit-box-shadow:none;box-shadow:none}.notifications-wrapper.long{border-radius:var(--border-radius-16, 1rem)}.notifications-wrapper.short{border-radius:50%}.new-story-indicator{z-index:2;border-color:var(--app-color, #5a30f4);border-style:solid;border-radius:50%;-webkit-box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset;box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset}.viewed-story-indicator{z-index:2;border-color:var(--stable-alt, #d0d0d0);border-style:solid;border-radius:50%;-webkit-box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset;box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset}.live-indicator-container{position:absolute;z-index:4;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.live-indicator-container .live-indicator-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;width:2.875rem;height:1rem;color:var(--light, #ffffff);font-size:0.75rem;background-color:var(--danger, #d44333);border:var(--spacing-02, 0.125rem) solid var(--danger, #d44333);border-radius:var(--spacing-04, 0.25rem)}.live-indicator-container .live-indicator-wrapper .live-icon{width:var(--spacing-08, 0.5rem);height:var(--spacing-08, 0.5rem);margin:0 var(--spacing-04, 0.25rem) 0 var(--spacing-04, 0.25rem);background-color:var(--light, #ffffff);border-radius:50%}.recorded-indicator-container{position:absolute;z-index:4;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.recorded-indicator-container .recorded-indicator-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;width:1rem;height:1rem;font-size:var(--font-size-16, 1rem) !important;background-color:var(--danger, #d44333);border:var(--spacing-02, 0.125rem) solid var(--light, #ffffff);border-radius:25%}.vip-indicator{position:absolute;top:-0.3125rem;right:-0.3125rem;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border:var(--border-width-05, 0.3125rem) solid var(--light, #ffffff);border-radius:50%}.vip-notification{position:absolute}.no-store-image-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center;color:var(--stable, #adadad)}.grayed{background-color:var(--stable-light, #f1f1f1)}:host([size=extra-small]){width:1rem;height:1rem}:host([size=extra-small]) .counter{font-weight:var(--font-weight-400, 400);font-size:var(--font-size-12, 0.75rem) !important}:host([size=extra-small]) .online-indicator,:host([size=extra-small]) .offline-indicator{width:var(--spacing-02, 0.125rem);height:var(--spacing-02, 0.125rem);border:var(--border-width-01, 0.0625rem) solid var(--border-color-online)}:host([size=extra-small]) .offline-indicator{-webkit-box-shadow:0 0 0 0.01rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.01rem var(--stable, #adadad) inset}:host([size=extra-small]) .text-container{font-size:var(--font-size-12, 0.75rem)}:host([size=extra-small]) .new-story-indicator,:host([size=extra-small]) .viewed-story-indicator{width:0.8125rem;height:0.8125rem;border-width:0.09375rem;-webkit-box-shadow:0 0 0 0.03125rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.03125rem var(--light, #ffffff) inset}:host([size=extra-small]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:1rem;height:1rem;font-size:var(--font-size-12, 0.75rem)}:host([size=extra-small]) .vip-indicator{display:none}:host([size=extra-small]) .vip-notification{top:0;width:var(--spacing-02, 0.125rem);height:var(--spacing-02, 0.125rem)}:host([size=extra-small]) .notifications-wrapper.dot{width:var(--spacing-02, 0.125rem);height:var(--spacing-02, 0.125rem)}:host([size=small]){width:1.5rem;height:1.5rem}:host([size=small]) .online-indicator,:host([size=small]) .offline-indicator{width:0.1875rem;height:0.1875rem;border:var(--spacing-02, 0.125rem) solid var(--border-color-online)}:host([size=small]) .offline-indicator{-webkit-box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset}:host([size=small]) .text-container{font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .new-story-indicator,:host([size=small]) .viewed-story-indicator{width:1.25rem;height:1.25rem;border-width:var(--spacing-02, 0.125rem);-webkit-box-shadow:0 0 0 0.0625rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.0625rem var(--light, #ffffff) inset}:host([size=small]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:var(--font-size-14, 0.875rem)}:host([size=small]) .vip-indicator{display:none}:host([size=small]) .vip-notification{top:0;width:var(--spacing-02, 0.125rem);height:var(--spacing-02, 0.125rem)}:host([size=small]) .notifications-wrapper.dot{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=medium]){width:2rem;height:2rem}:host([size=medium]) .online-indicator,:host([size=medium]) .offline-indicator{width:0.375rem;height:0.375rem;border:var(--spacing-02, 0.125rem) solid var(--border-color-online)}:host([size=medium]) .offline-indicator{-webkit-box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset}:host([size=medium]) .text-container{font-size:var(--font-size-16, 1rem)}:host([size=medium]) .new-story-indicator,:host([size=medium]) .viewed-story-indicator{width:1.8125rem;height:1.8125rem;border-width:0.09375rem;-webkit-box-shadow:0 0 0 0.09375rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.09375rem var(--light, #ffffff) inset}:host([size=medium]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:2rem;height:2rem;font-size:var(--font-size-16, 1rem)}:host([size=medium]) .vip-indicator{display:none}:host([size=medium]) .vip-notification{top:0;width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=medium]) .notifications-wrapper.dot{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=large]){width:3rem;height:3rem}:host([size=large]) .online-indicator,:host([size=large]) .offline-indicator{width:var(--spacing-08, 0.5rem);height:var(--spacing-08, 0.5rem)}:host([size=large]) .offline-indicator{-webkit-box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.1rem var(--stable, #adadad) inset}:host([size=large]) .text-container{font-size:var(--font-size-18, 1.125rem)}:host([size=large]) .new-story-indicator,:host([size=large]) .viewed-story-indicator{width:2.75rem;height:2.75rem;border-width:var(--spacing-02, 0.125rem);-webkit-box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset;box-shadow:0 0 0 var(--spacing-02, 0.125rem) var(--light, #ffffff) inset}:host([size=large]) .vip-indicator{display:none}:host([size=large]) .notifications-wrapper{height:1.25rem}:host([size=large]) .notifications-wrapper.short{width:1.25rem}:host([size=large]) .live-indicator-container .live-indicator-wrapper{width:2.75rem}:host([size=large]) .recorded-indicator-container{right:0.875rem}:host([size=large]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:3rem;height:3rem;font-size:var(--font-size-18, 1.125rem)}:host([size=large]) .vip-notification{top:0.0625rem;width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=large]) .notifications-wrapper.dot{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=extra-large]){width:4rem;height:4rem}:host([size=extra-large]) .online-indicator,:host([size=extra-large]) .offline-indicator{width:0.75rem;height:0.75rem}:host([size=extra-large]) .offline-indicator{-webkit-box-shadow:0 0 0 0.175rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.175rem var(--stable, #adadad) inset}:host([size=extra-large]) .text-container{font-size:var(--font-size-24, 1.5rem)}:host([size=extra-large]) .new-story-indicator,:host([size=extra-large]) .viewed-story-indicator{width:3.75rem;height:3.75rem;border-width:var(--spacing-02, 0.125rem);-webkit-box-shadow:0 0 0 0.1875rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.1875rem var(--light, #ffffff) inset}:host([size=extra-large]) .notifications-wrapper{height:1.5rem}:host([size=extra-large]) .notifications-wrapper.short{width:1.5rem}:host([size=extra-large]) .live-indicator-container{right:0.375rem}:host([size=extra-large]) .recorded-indicator-container{right:1.375rem}:host([size=extra-large]) .vip-notification{top:0.3125rem;width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=extra-large]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:4rem;height:4rem;font-size:var(--font-size-24, 1.5rem)}:host([size=extra-extra-large]){width:5rem;height:5rem}:host([size=extra-extra-large]) .online-indicator,:host([size=extra-extra-large]) .offline-indicator{width:var(--spacing-16, 1rem);height:var(--spacing-16, 1rem)}:host([size=extra-extra-large]) .offline-indicator{-webkit-box-shadow:0 0 0 0.175rem var(--stable, #adadad) inset;box-shadow:0 0 0 0.175rem var(--stable, #adadad) inset}:host([size=extra-extra-large]) .text-container{font-size:var(--font-size-32, 2rem)}:host([size=extra-extra-large]) .new-story-indicator,:host([size=extra-extra-large]) .viewed-story-indicator{width:4.75rem;height:4.75rem;border-width:var(--spacing-02, 0.125rem);-webkit-box-shadow:0 0 0 0.1875rem var(--light, #ffffff) inset;box-shadow:0 0 0 0.1875rem var(--light, #ffffff) inset}:host([size=extra-extra-large]) .notifications-wrapper{height:1.5rem}:host([size=extra-extra-large]) .notifications-wrapper.short{width:1.5rem}:host([size=extra-extra-large]) .live-indicator-container{right:0.8125rem}:host([size=extra-extra-large]) .recorded-indicator-container{right:1.875rem}:host([size=extra-extra-large]) .vip-notification{top:0.3125rem;width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}:host([size=extra-extra-large]) .no-store-image-container{-ms-flex-pack:center;justify-content:center;width:5rem;height:5rem;font-size:var(--font-size-32, 2rem)}:host([frame=circle]) .framing-container{border-radius:50%}:host([frame=circle]) .framing-container yoo-img{--border-radius:50%}:host([frame=square]) .framing-container,:host([frame=transparent-square]) .framing-container{border-radius:0}:host([frame=square]) .framing-container yoo-img,:host([frame=transparent-square]) .framing-container yoo-img{--border-radius:0%}:host([frame=rounded-square]) .framing-container{border-radius:10%}:host([frame=rounded-square]) .framing-container yoo-img{--border-radius:10%}:host(.inline){display:inline-block;margin-right:0.5rem}:host(.readonly){padding:var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) var(--spacing-08, 0.5rem) 0}:host(.files-autocomplete) .component-container .framing-container{background-color:transparent}:host(.folder) .component-container .framing-container{background-color:unset !important}:host(.no-indicator-box-shadow) .framing-container{padding:var(--spacing-04, 0.25rem)}:host(.no-indicator-box-shadow) .new-story-indicator,:host(.no-indicator-box-shadow) .viewed-story-indicator,:host(.no-indicator-box-shadow) .framing-container{-webkit-box-shadow:none;box-shadow:none}";

package/dist/design-system/yoo-avatars.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, i as createEvent, h, e as Host } from './index-3d00bad4.js';
-import { a7 as getUserDisplayName, t as translate } from './index-ac1d7e65.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, i as createEvent, h, e as Host } from './index-019c1b1a.js';
+import { a7 as getUserDisplayName, t as translate } from './index-1a55b25d.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.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)}";
 
@@ -38,12 +38,19 @@ const YooAvatarsComponent = class {
      * @default false
      */
     this.withTooltip = false;
+    /**
+     * Whether the images should be displayed instantly or not (for Chromatic for example).
+     * @property {instant}
+     * @type boolean
+     * @default false
+     */
+    this.instant = false;
   }
   getTooltip(user) {
     return this.withTooltip ? getUserDisplayName(user) : undefined;
   }
   renderTwoUsersGrid() {
-    return (h("div", { class: "two-users-container" }, h("div", { class: "top-left-container" }, h("yoo-avatar", { user: this.users[0], isOnline: this.users[0].isOnline, size: this.size, tooltip: this.getTooltip(this.users[0]) })), h("div", { class: "bottom-right-container" }, h("yoo-avatar", { user: this.users[1], isOnline: this.users[1].isOnline, size: this.size, tooltip: this.getTooltip(this.users[1]) }))));
+    return (h("div", { class: "two-users-container" }, h("div", { class: "top-left-container" }, h("yoo-avatar", { instant: this.instant, user: this.users[0], isOnline: this.users[0].isOnline, size: this.size, tooltip: this.getTooltip(this.users[0]) })), h("div", { class: "bottom-right-container" }, h("yoo-avatar", { instant: this.instant, user: this.users[1], isOnline: this.users[1].isOnline, size: this.size, tooltip: this.getTooltip(this.users[1]) }))));
   }
   renderMultipleUsers() {
     const maxDisplay = this.layout === 'grid' ? Math.min(4, this.maxDisplay) : this.maxDisplay;
@@ -51,9 +58,9 @@ const YooAvatarsComponent = class {
     const usersToDisplay = hasOverflow ? this.users.slice(0, maxDisplay - 1) : this.users;
     return [
       usersToDisplay.map((user) => {
-        return h("yoo-avatar", { user: user, isOnline: this.isOnline || user.isOnline, size: this.size, tooltip: this.getTooltip(user) });
+        return h("yoo-avatar", { instant: this.instant, user: user, isOnline: this.isOnline || user.isOnline, size: this.size, tooltip: this.getTooltip(user) });
       }),
-      hasOverflow && h("yoo-avatar", { overflowCount: this.users.length - usersToDisplay.length, size: this.size })
+      hasOverflow && h("yoo-avatar", { instant: this.instant, overflowCount: this.users.length - usersToDisplay.length, size: this.size })
     ];
   }
   renderWithNames() {
@@ -63,7 +70,7 @@ const YooAvatarsComponent = class {
     }
     return usersToDisplay.map((user) => {
       return [
-        h("div", { class: "names-wrapper" }, h("yoo-avatar", { user: user, isOnline: this.isOnline || user.isOnline, size: this.size, tooltip: this.getTooltip(user) }), h("span", null, getUserDisplayName(user)))
+        h("div", { class: "names-wrapper" }, h("yoo-avatar", { instant: this.instant, user: user, isOnline: this.isOnline || user.isOnline, size: this.size, tooltip: this.getTooltip(user) }), h("span", null, getUserDisplayName(user)))
       ];
     });
   }
@@ -81,7 +88,7 @@ const YooAvatarsComponent = class {
   renderWithFirstName(renderType) {
     return this.users.map((user) => {
       return [
-        h("div", { class: renderType === 'name' ? 'name-wrapper' : 'collection-wrapper' }, h("yoo-avatar", { user: user, isOnline: this.isOnline || user.isOnline, size: this.size, tooltip: this.getTooltip(user) }), h("span", null, this.truncateText(user.firstName, this.concatCount)))
+        h("div", { class: renderType === 'name' ? 'name-wrapper' : 'collection-wrapper' }, h("yoo-avatar", { instant: this.instant, user: user, isOnline: this.isOnline || user.isOnline, size: this.size, tooltip: this.getTooltip(user) }), h("span", null, this.truncateText(user.firstName, this.concatCount)))
       ];
     });
   }

package/dist/design-system/yoo-background-blur.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h } from './index-3d00bad4.js';
-import { C as CloudinaryGradientLayer, k as Cloudinary } from './index-ac1d7e65.js';
-import { g as getScreenWidth, a as getScreenHeight } from './common-helpers-34c5464d.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, h } from './index-019c1b1a.js';
+import { C as CloudinaryGradientLayer, k as Cloudinary } from './index-1a55b25d.js';
+import { g as getScreenWidth, a as getScreenHeight } from './common-helpers-c2053ae8.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.js';
 
 const backgroundBlurCss = ":host .background-blur-image{background-repeat:no-repeat;background-position-x:center;background-position-y:top}";
 

package/dist/design-system/yoo-background.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-3d00bad4.js';
-import { b as getAppContext } from './common-helpers-34c5464d.js';
-import './index-ac1d7e65.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-019c1b1a.js';
+import { b as getAppContext } from './common-helpers-c2053ae8.js';
+import './index-1a55b25d.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.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/design-system/yoo-badge.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, e as Host } from './index-3d00bad4.js';
+import { r as registerInstance, h, e as Host } from './index-019c1b1a.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.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}";
+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}";
 
 const YooBadgeComponent = class {
   constructor(hostRef) {

package/dist/design-system/yoo-banner.entry.js

@@ -1,78 +1,35 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-3d00bad4.js';
-import { w as setAnimation, u as isIphoneX, t as translate, o as isWeb } from './index-ac1d7e65.js';
-import { b as getAppContext } from './common-helpers-34c5464d.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-019c1b1a.js';
+import { b as getAppContext } from './common-helpers-c2053ae8.js';
+import './index-1a55b25d.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.js';
 
-const bannerCss = ":host{--font-size-text-container:var(--font-size-14, 0.875rem);--padding-top-container:0.75rem;--margin-top-inner-container:unset}:host .container{-webkit-box-sizing:border-box;box-sizing:border-box}:host(.card) .outer-container{display:-ms-flexbox;display:flex;margin:var(--spacing-16, 1rem);padding:var(--spacing-16, 1rem);background:var(--light, #ffffff);border-radius:8px;-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(.card) .outer-container .content-container{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column}:host(.card) .outer-container .content-container.columns{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}:host(.card) .outer-container .content-container.columns .button-container{width:6.25rem;margin-left:var(--spacing-16, 1rem)}:host(.card) .outer-container .content-container.columns .header-container{margin-right:var(--spacing-16, 1rem)}:host(.card) .outer-container .content-container.columns .body-container .text-container{font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem)}:host(.card) .outer-container .content-container.columns .body-container .subtext-container{padding-bottom:0;font-size:var(--font-size-14, 0.875rem)}:host(.card) .outer-container .content-container .header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding-bottom:var(--spacing-08, 0.5rem);background:var(--light, #ffffff)}:host(.card) .outer-container .content-container .body-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.card) .outer-container .content-container .body-container .text-container{color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem)}:host(.card) .outer-container .content-container .body-container .subtext-container{padding-bottom:var(--spacing-16, 1rem);color:var(--text-color, #807f83);font-size:var(--font-size-16, 1rem)}:host(.simple){display:block}:host(.simple).closed{opacity:0}:host(.simple) .container{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;padding:var(--padding-top-container) 1rem;-webkit-transition:all 0.3s;transition:all 0.3s}:host(.simple) .container.closed{opacity:0}:host(.simple) .container .link{color:var(--light, #ffffff);font-weight:var(--font-weight-400, 400);font-size:var(--font-size-14, 0.875rem);text-decoration:underline;cursor:pointer;opacity:0.5}:host(.simple) .container .inner-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;margin-top:var(--margin-top-inner-container)}:host(.simple) .container .inner-container .icon{margin-right:0.5rem;color:var(--light, #ffffff)}:host(.simple) .container .inner-container .text-container{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;color:var(--light, #ffffff)}:host(.simple) .container .inner-container .text-container .value{margin-bottom:0.25rem;font-size:var(--font-size-text-container);line-height:1rem}:host(.simple) .container .inner-container .text-container .heading{-ms-flex-item-align:baseline;align-self:baseline;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-14, 0.875rem)}:host(.simple) .container .close-container{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;color:var(--light, #ffffff)}:host(.simple) .container .close-container .close{-ms-flex-pack:end;justify-content:flex-end;margin-left:1rem;cursor:pointer}:host(.simple.light) .container .inner-container .text-container{color:var(--dark, #000000)}:host(.small){--padding-top-container:0;--font-size-text-container:var(--font-size-12, 0.75rem)}:host(.round) .container{border-radius:0.5rem}:host(.banner){border-radius:var(--border-radius-04, 0.25rem);-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(.banner) .container{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;width:auto}:host(.banner) .container .inner-container{-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}:host(.banner) .container .inner-container .text-container .value{margin-bottom:0;line-height:initial}:host(.toast) .container{-webkit-box-shadow:var(--button-shadow, 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1));box-shadow:var(--button-shadow, 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1))}:host(.toast) .container .inner-container .text-container .value{margin-top:0.25rem;margin-left:0.5rem}:host(.toast).round .container{border:0.05rem solid}@-webkit-keyframes scaleUp{0%{-webkit-transform:scale(0.8) translateY(1000px);transform:scale(0.8) translateY(1000px);opacity:0}100%{-webkit-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px);opacity:1}}@keyframes scaleUp{0%{-webkit-transform:scale(0.8) translateY(1000px);transform:scale(0.8) translateY(1000px);opacity:0}100%{-webkit-transform:scale(1) translateY(0px);transform:scale(1) translateY(0px);opacity:1}}:host(.stripe) .container{width:100%;border-bottom:0.05rem solid;border-radius:0rem}:host(.stripe) .container .inner-container .text-container .value{margin-top:0.25rem;margin-left:0.5rem}:host(.embedded){width:100%}:host(.embedded) .container{width:100%}:host(.embedded) .container .inner-container .text-container .value{margin-top:0.25rem;margin-left:0.5rem}:host(.embedded).round .container{border:0.05rem solid}:host(.centered){display:-ms-flexbox;display:flex}:host(.centered) .container{-ms-flex-pack:justify !important;justify-content:space-between !important}:host(.centered) .container .inner-container{width:100%}:host(.centered) .container .inner-container .text-container .value{margin-left:0}:host(.web){display:block;overflow:hidden}:host(.app-color){background:var(--app-color, #5a30f4)}:host(.app-color) .container{color:var(--app-color, #5a30f4);background:var(--app-color, #5a30f4)}:host(.accent){background:var(--accent, #276ef1)}:host(.accent) .container{color:var(--accent, #276ef1);background:var(--accent, #276ef1)}:host(.success){background:var(--success, #3aa76d)}:host(.success) .container{color:var(--success, #3aa76d);background:var(--success, #3aa76d)}:host(.danger){background:var(--danger, #d44333)}:host(.danger) .container{color:var(--danger, #d44333);background:var(--danger, #d44333)}:host(.info){background:var(--info, #d84c96)}:host(.info) .container{color:var(--info, #d84c96);background:var(--info, #d84c96)}:host(.warning){background:var(--warning, #ed6e33)}:host(.warning) .container{color:var(--warning, #ed6e33);background:var(--warning, #ed6e33)}:host(.energized){background:var(--energized, #ffc043)}:host(.energized) .container{color:var(--energized, #ffc043);background:var(--energized, #ffc043)}:host(.header) .container.iphone-x{-ms-flex-align:end;align-items:flex-end;height:3.5rem;padding-bottom:0.325rem}:host(.header.top) .container.iphone-x{margin-top:var(--spacing-24, 1.5rem)}:host(.footer) .container.iphone-x{padding-top:var(--spacing-04, 0.25rem);padding-bottom:var(--spacing-16, 1rem)}:host(.form-creator){background:var(--light, #ffffff)}:host(.form-creator) .container .inner-container{overflow:hidden}:host(.form-creator) .container .inner-container .text-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.update-banner) .outer-container,:host(.warning-banner) .outer-container{background-color:var(--energized-10, rgba(255, 192, 67, 0.1));-webkit-box-shadow:none;box-shadow:none}:host(.update-banner) .outer-container .content-container .body-container,:host(.warning-banner) .outer-container .content-container .body-container{padding-left:var(--spacing-08, 0.5rem)}:host(.update-banner) .outer-container .content-container .body-container .subtext-container,:host(.warning-banner) .outer-container .content-container .body-container .subtext-container{padding-bottom:0;color:var(--stable, #adadad)}:host(.update-banner) .outer-container .content-container .button-container,:host(.warning-banner) .outer-container .content-container .button-container{display:-ms-flexbox;display:flex}:host(.update-banner) .outer-container .content-container.columns,:host(.warning-banner) .outer-container .content-container.columns{-ms-flex-pack:justify;justify-content:space-between}:host(.update-banner) .outer-container .content-container.columns .button-container,:host(.warning-banner) .outer-container .content-container.columns .button-container{width:auto;margin-left:0}:host(.field-invalids-banner) .outer-container{-ms-flex-align:center;align-items:center;padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);text-align:left;background-color:var(--warning, #ed6e33)}:host(.field-invalids-banner) .outer-container .content-container .body-container .text-container{color:var(--light, #ffffff);font-weight:normal;font-size:var(--font-size-12, 0.75rem)}:host(.mission-locked) .outer-container{margin:0px;background-color:var(--warning-10, rgba(237, 110, 51, 0.1))}:host(.mission-locked) .outer-container .content-container .body-container .text-container{font-weight:normal;font-size:var(--font-size-16, 1rem)}:host(.update-banner:not(.web)) .outer-container .inner-container .body-container .text-container,:host(.mission-locked:not(.web)) .outer-container .inner-container .body-container .text-container{margin-bottom:var(--spacing-16, 1rem)}:host(.accent-gradient-card) .container{-o-border-image:var(--bottom-gradient);border-image:var(--bottom-gradient);border-image-slice:1}:host(.accent-gradient-card) .container .inner-container .icon{background-image:var(--webkit-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host(.danger-gradient-card) .container{-o-border-image:var(--bottom-gradient);border-image:var(--bottom-gradient);border-image-slice:1}:host(.danger-gradient-card) .container .inner-container .icon{background-image:var(--webkit-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host(.success-gradient-card) .container{-o-border-image:var(--bottom-gradient);border-image:var(--bottom-gradient);border-image-slice:1}:host(.success-gradient-card) .container .inner-container .icon{background-image:var(--webkit-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host(.info-gradient-card) .container{-o-border-image:var(--bottom-gradient);border-image:var(--bottom-gradient);border-image-slice:1}:host(.info-gradient-card) .container .inner-container .icon{background-image:var(--webkit-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host(.accent-gradient-card) .container{-o-border-image:var(--bottom-gradient);border-image:var(--bottom-gradient);border-image-slice:1}:host(.accent-gradient-card) .container .inner-container .icon{background-image:var(--webkit-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}";
+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)}";
 
 const YooBannerComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.alertClosed = createEvent(this, "alertClosed", 7);
-    this.alertActionSelected = createEvent(this, "alertActionSelected", 7);
-    this.bannerButtonClicked = createEvent(this, "bannerButtonClicked", 7);
+    this.closeClick = createEvent(this, "closeClick", 7);
+    this.linkClick = createEvent(this, "linkClick", 7);
     /**
-     * The app currently used.
+     * Size of the banner
      */
-    this.currentApp = 'operations';
-    /**
-     * Class of the footer button.
-     */
-    this.footerBtnColor = 'app-color';
-    /**
-     * Text of the footer button.
-     */
-    this.footerBtnText = '';
-    this.footerBtnFill = 'solid';
-    /**
-     * Mode of the banner : `simple` or `card`.
-     */
-    this.mode = 'simple';
-    /**
-     * Text of the banner.
-     */
-    this.text = '';
+    this.size = 'medium';
     this.closed = false;
-    this.onBannerButtonClicked = () => {
-      this.bannerButtonClicked.emit(true);
-    };
   }
-  async close() {
-    this.alertClosed.emit(true);
+  async close(event) {
+    event.preventDefault();
+    this.closeClick.emit();
     this.closed = true;
   }
-  componentDidLoad() {
-    if (this.animationName) {
-      setAnimation(this.animationName, this.host, { open: true });
-    }
-  }
-  onActionTextClick() {
-    this.alertActionSelected.emit(true);
-  }
-  renderSimpleMode() {
-    var _a;
-    const isUpdateBanner = this.host.classList.contains('update-banner');
-    return (h("div", { class: {
-        container: true,
-        closed: this.closed,
-        'iphone-x': isIphoneX()
-      } }, this.link && (h("div", { class: "link", onClick: () => this.onActionTextClick() }, translate(this.link))), h("div", { class: "inner-container" }, this.icon && (h("span", { class: "icon" }, h("yoo-icon", { color: this.host.classList.contains('light') ? 'app-color' : 'light', name: this.icon }))), h("div", { class: "text-container" }, this.heading && h("span", { class: "heading" }, this.heading), h("span", { class: "value" }, translate(this.text)), ((_a = this.subHeadings) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.subHeadings.map((subHeading) => {
-      return h("span", { class: "sub-heading" }, translate(subHeading));
-    }))), this.footerBtnText && (h("div", { class: "button-container" }, h("yoo-button", { class: { expanded: !isUpdateBanner }, fill: this.footerBtnFill, color: this.footerBtnColor, onClick: this.onBannerButtonClicked }, translate(this.footerBtnText)))), h("div", { class: "close-container" }, this.closable ? (h("span", { class: "close", onClick: () => this.close() }, ' ', h("yoo-icon", { color: this.host.classList.contains('form-creator') ? 'stable' : 'light', name: this.host.classList.contains('form-creator') ? 'cross' : 'close' }))) : null)));
-  }
-  renderCardMode() {
-    const hasHeader = this.icon || this.closable;
-    const isUpdateBanner = this.host.classList.contains('update-banner');
-    return (!this.closed && (h("div", { class: "outer-container" }, h("div", { class: "left-container" }, this.leftIcon && h("yoo-icon", { color: this.leftIconColor || 'app-color', name: this.leftIcon, size: this.leftIconSize })), h("div", { class: { 'content-container': true, 'columns': isWeb(this.host) && !this.closable } }, hasHeader && h("div", { class: "header-container" }, this.icon && (h("span", { class: "icon" }, h("yoo-icon", { color: this.iconColor || 'app-color', name: this.icon }))), this.closable && (h("div", { class: "cross-container", onClick: () => this.close() }, h("yoo-icon", { name: "cross", color: "stable-alt" })))), h("div", { class: "body-container" }, h("div", { class: "text-container" }, h("span", { class: "text-content" }, translate(this.heading))), h("div", { class: "subtext-container" }, h("span", { class: "subtext-content" }, translate(this.text, { appName: this.currentApp })))), this.footerBtnText && (h("div", { class: "button-container" }, h("yoo-button", { class: { expanded: !isUpdateBanner }, fill: this.footerBtnFill, color: this.footerBtnColor, onClick: this.onBannerButtonClicked }, translate(this.footerBtnText.toUpperCase()))))), h("div", { class: "right-container" }, h("slot", { name: "right" })))));
+  get iconName() {
+    return this.size === 'large' ? 'close' : 'cross';
   }
   render() {
-    return (h(Host, { class: {
-        closed: this.closed,
-        [this.mode]: true,
-        ...getAppContext(this.host)
-      } }, this.mode === 'simple' ? this.renderSimpleMode() : this.renderCardMode()));
+    var _a;
+    return !this.closed && (h(Host, { class: { ...getAppContext(this.host) } }, h("div", { class: "flex" }, !!this.leftIcon && h("yoo-icon", { color: "light", ...this.leftIcon, class: "left-icon" }), (this.link || this.linkText) && h("a", { href: this.link, target: this.target, onClick: () => this.linkClick.emit(), class: "link" }, this.linkText), h("slot", { name: "content" }), this.size !== 'large' && h("slot", { name: "action" }), this.closable && this.size !== 'large' && h("hr", null), this.closable && h("yoo-icon", { name: this.iconName, onClick: event => this.close(event) })), this.size === 'large' &&
+      h("div", { class: { 'action-container': true, 'hasLeftIcon': !!this.leftIcon, [(_a = this.leftIcon) === null || _a === void 0 ? void 0 : _a.size]: true } }, h("slot", { name: "action" }))));
   }
   get host() { return getElement(this); }
 };

package/dist/design-system/yoo-barcode-dialog.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, e as Host } from './index-3d00bad4.js';
-import { I as closeModal } from './index-ac1d7e65.js';
-import './lodash-a98c6524.js';
+import { r as registerInstance, h, e as Host } from './index-019c1b1a.js';
+import { I as closeModal } from './index-1a55b25d.js';
+import './lodash-9d33f885.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-21c7d38e.js';
+import './index-daddf2c7.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}";