@yoobic/yobi 8.3.0-9 → 8.3.0

package/dist/esm/yoo-slides-media.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { K as closeModal, S as ScreenOrientation, v as findParent, ab as isImage, aG as isImageUrl, f as isNativeMobile, h as isAndroid, au as capitalizeFirstLetter, V as translateMulti, p as showModal, q as isWeb, G as getAsyncExtraData, t as translate, aS as showToast, L as gsapTimeline, aq as isPhotoEdited, aD as gsapTo, w as isIphoneX, ah as pipes, a9 as isVideo } from './overlays-2b1f8cb5.js';
-import './index-945da793.js';
-import { i as isArray } from './lodash-bf91c7a4.js';
-import { n as lockSwipes } from './common-helpers-246a4085.js';
-import { d as parseEntityForCardMedia } from './entities-helpers-d48a0db4.js';
-import { d as fuzzySearch } from './form-text-area-helpers-2ae1548f.js';
-import './index-efbd87e6.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
+import { p as closeModal, S as ScreenOrientation, Q as findParent, ai as isImage, aT as isImageUrl, j as isNativeMobile, k as isAndroid, aB as capitalizeFirstLetter, Z as translateMulti, z as showModal, A as isWeb, P as getAsyncExtraData, t as translate, b3 as showToast, q as gsapTimeline, ax as isPhotoEdited, aQ as gsapTo, G as isIphoneX, aq as pipes, ag as isVideo } from './overlays-ccc6076c.js';
+import './index-4bc6078a.js';
+import { i as isArray } from './lodash-f6e59a8e.js';
+import { k as lockSwipes } from './common-helpers-fe634d0d.js';
+import { e as parseEntityForCardMedia } from './entities-helpers-1e2a5ab5.js';
+import { d as fuzzySearch } from './form-text-area-helpers-507a04f9.js';
+import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const slidesMediaCss = ".sc-yoo-slides-media-h{--search-bar-display:none;width:100%;height:100%;background:var(--dark, #000000)}@-webkit-keyframes fadeInTransition{0%{opacity:1}50%{opacity:0.5}100%{visibility:hidden;opacity:0}}@keyframes fadeInTransition{0%{opacity:1}50%{opacity:0.5}100%{visibility:hidden;opacity:0}}.sc-yoo-slides-media-h .fade-in.sc-yoo-slides-media{margin-bottom:2.5rem !important;-webkit-animation:fadeInTransition 0.5s;animation:fadeInTransition 0.5s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.sc-yoo-slides-media-h .content-container.sc-yoo-slides-media{display:-ms-flexbox;display:flex;width:100%;height:100%}.sc-yoo-slides-media-h .content-container.video.sc-yoo-slides-media{padding-top:var(--spacing-64, 4rem);padding-bottom:var(--spacing-64, 4rem)}.sc-yoo-slides-media-h .content-container.sc-yoo-slides-media yoo-photo-editor.sc-yoo-slides-media{width:100%}.sc-yoo-slides-media-h .content-container.sc-yoo-slides-media yoo-videoplayer-core.sc-yoo-slides-media{z-index:6;width:100%;background:var(--dark, #000000)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media{position:absolute;top:0;left:0;z-index:9;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;background:var(--light, #ffffff)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;margin:var(--spacing-16, 1rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media yoo-form-input.sc-yoo-slides-media{padding-bottom:var(--spacing-08, 0.5rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .header.sc-yoo-slides-media{display:-ms-flexbox;display:flex}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .header.sc-yoo-slides-media yoo-icon.sc-yoo-slides-media{margin-left:var(--spacing-04, 0.25rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;padding-top:var(--spacing-08, 0.5rem);overflow:auto}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media::-webkit-scrollbar{width:var(--spacing-04, 0.25rem);height:var(--spacing-04, 0.25rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media::-webkit-scrollbar-track{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media::-webkit-scrollbar-thumb{background-color:transparent;border-radius:var(--border-radius-04, 0.25rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media yoo-tooltip.sc-yoo-slides-media{max-width:100%}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.sc-yoo-slides-media yoo-tag.sc-yoo-slides-media{max-width:100%;margin-right:var(--spacing-08, 0.5rem);margin-bottom:var(--spacing-08, 0.5rem)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .actions-container.sc-yoo-slides-media .current-tag-container.sc-yoo-slides-media .badges-container.max-height.sc-yoo-slides-media{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .button-container.sc-yoo-slides-media{width:100%;margin-top:auto;padding:var(--spacing-16, 1rem);border-top:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}.sc-yoo-slides-media-h .tag-container.sc-yoo-slides-media .button-container.sc-yoo-slides-media yoo-button.sc-yoo-slides-media{width:50%;margin-left:auto}.sc-yoo-slides-media-h .action-buttons.sc-yoo-slides-media{display:-ms-flexbox;display:flex;padding-top:var(--spacing-04, 0.25rem);color:var(--light, #ffffff);font-size:var(--font-size-20, 1.25rem)}.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media{width:100%;height:100%}.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media .slides-container.sc-yoo-slides-media{height:100%}.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media .slides-container.sc-yoo-slides-media yoo-ion-slides.sc-yoo-slides-media{--host-background-color:var(--dark, #000000);height:100%}.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media yoo-swipe-container.sc-yoo-slides-media{--swiper-background:var(--dark, #000000);--wrapper-border-radius:0}.sc-yoo-slides-media-h mark.sc-yoo-slides-media{color:var(--light, #ffffff);background-color:transparent}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media{position:absolute;top:auto;right:0;bottom:0;left:0;z-index:8;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin-bottom:0 !important;padding:var(--spacing-16, 1rem);color:var(--stable, #adadad);word-break:break-word;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(7%, rgba(0, 0, 0, 0)), color-stop(6%, rgba(0, 0, 0, 0)), color-stop(70%, rgba(0, 0, 0, 0.85)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 6%, rgba(0, 0, 0, 0.85) 70%);-webkit-transition:0.3s;transition:0.3s}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .white-text.sc-yoo-slides-media{padding:0 var(--spacing-04, 0.25rem);color:var(--light, #ffffff)}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .user-info.sc-yoo-slides-media{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .user-info.sc-yoo-slides-media .user-title.sc-yoo-slides-media{padding-left:var(--spacing-08, 0.5rem);color:var(--stable, #adadad);text-align:left}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .photo-information.sc-yoo-slides-media{text-align:left}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .tags.sc-yoo-slides-media{display:-ms-flexbox;display:flex;padding-top:var(--spacing-04, 0.25rem);padding-right:var(--spacing-04, 0.25rem);color:var(--app-color, #5a30f4)}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media .time.sc-yoo-slides-media{font-size:var(--font-size-14, 0.875rem)}.sc-yoo-slides-media-h .bottom-container.iphone-x.sc-yoo-slides-media{padding-bottom:var(--spacing-16, 1rem)}.sc-yoo-slides-media-h .bottom-container.sc-yoo-slides-media yoo-icon.sc-yoo-slides-media{margin-right:var(--spacing-16, 1rem)}.sc-yoo-slides-media-h yoo-header.sc-yoo-slides-media{position:absolute;top:0;right:0;bottom:auto;left:0;z-index:11;-webkit-transition:0.3s;transition:0.3s}.card-media.sc-yoo-slides-media-h .slides-media-container.sc-yoo-slides-media yoo-swipe-container.sc-yoo-slides-media{--wrapper-border-radius:var(--border-radius-08, 0.5rem)}.card-media.sc-yoo-slides-media-h .hover-buttons.sc-yoo-slides-media{position:absolute;right:0;bottom:var(--spacing-16, 1rem);display:-ms-flexbox;display:flex}.card-media.sc-yoo-slides-media-h .hover-buttons.sc-yoo-slides-media yoo-button.sc-yoo-slides-media{margin-right:var(--spacing-16, 1rem)}.card-media.sc-yoo-slides-media-h .hover-buttons.sc-yoo-slides-media .flex.sc-yoo-slides-media{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.card-media.sc-yoo-slides-media-h .hover-buttons.sc-yoo-slides-media .flex.sc-yoo-slides-media span.sc-yoo-slides-media{padding-left:var(--spacing-08, 0.5rem)}.tagging.sc-yoo-slides-media-h{--search-bar-display:block}";
@@ -590,13 +590,14 @@ const YooSlidesMediaComponent = class {
     return;
   }
   renderSlideContent(item, index) {
+    const isTypeVideo = isVideo(this.getPhotoSrc(item));
     if (this.displayType || item.type === 'audio') {
       return this.renderSlideContentByDisplayType(item, index);
     }
     else {
       return [
         item.type !== 'photo' && this.renderActionButtons(item),
-        h("div", { class: "content-container" }, item.type === 'video' ? this.renderVideoPlayer(item, index) : this.renderPhotoEditor(item, index), this.showBottomContainer && this.renderBottomContainer(item, index)),
+        h("div", { class: "content-container" }, item.type === 'video' || isTypeVideo ? this.renderVideoPlayer(item, index) : this.renderPhotoEditor(item, index), this.showBottomContainer && this.renderBottomContainer(item, index)),
         (item.user || item.missiondescription || item.fieldTitle || item.tags) && h("div", { class: "toolbar-shadow-portrait" })
       ];
     }

package/dist/esm/yoo-start-meeting-popup.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import './index-945da793.js';
-import { b as getAppContext } from './common-helpers-246a4085.js';
-import { t as translate } from './overlays-2b1f8cb5.js';
-import './lodash-bf91c7a4.js';
-import './index-efbd87e6.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-becca019.js';
+import './index-4bc6078a.js';
+import { g as getAppContext } from './common-helpers-fe634d0d.js';
+import { t as translate } from './overlays-ccc6076c.js';
+import './lodash-f6e59a8e.js';
+import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
 
 const startMeetingPopupCss = ":host .outer-container{position:relative;width:15rem}:host .outer-container yoo-icon.cross{position:absolute;margin:var(--spacing-08, 0.5rem);cursor:pointer}:host .outer-container yoo-empty-state{height:17.6rem;background-color:var(--app-color-20, rgba(90, 48, 244, 0.2));border-radius:var(--border-radius-04, 0.25rem)}:host .outer-container .description-container{padding:var(--spacing-16, 1rem);text-align:center}:host .outer-container .button-content{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host .outer-container .button-content yoo-button{margin-bottom:var(--spacing-16, 1rem)}:host .outer-container .button-content yoo-button yoo-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .outer-container .button-content yoo-button yoo-icon span{padding-left:var(--spacing-08, 0.5rem);font-size:var(--font-size-12, 0.75rem)}";

package/dist/esm/yoo-swipe-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, i as createEvent, h } from './index-54cb3c5d.js';
+import { r as registerInstance, i as createEvent, h } from './index-becca019.js';
 import { s as setupHammer, h as hammerTypes, i as isBottomSwipe, a as isTopSwipe, b as isRightSwipe, c as isLeftSwipe, d as hammerDirections } from './hammer-helpers-0b560cb3.js';
 import './_commonjsHelpers-f4d11124.js';
 

package/dist/esm/yoo-tabs-slides.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, i as createEvent, l as readTask, m as writeTask, h, e as Host } from './index-54cb3c5d.js';
+import { r as registerInstance, i as createEvent, l as readTask, m as writeTask, h, e as Host } from './index-becca019.js';
 
 const tabsSlidesCss = ":host{position:relative;width:100%;color:var(--stable-alt, #d0d0d0)}.outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;width:100%;height:6.25rem;overflow:hidden;background:var(--stable-ultralight, #fafafa);-webkit-box-shadow:inset 0 -0.25rem var(--spacing-04, 0.25rem) -0.25rem var(--dark-10, rgba(0, 0, 0, 0.1));box-shadow:inset 0 -0.25rem var(--spacing-04, 0.25rem) -0.25rem var(--dark-10, rgba(0, 0, 0, 0.1))}yoo-ion-slides{width:100%;height:100%}yoo-ion-slide{width:unset !important;max-width:17.5rem}.slide-padding{max-height:var(--spacing-48, 3rem);margin:0 1.5rem;overflow:hidden}.active{color:var(--dark, #000000)}.indicator{position:absolute;bottom:-0.5rem;z-index:1;width:var(--spacing-16, 1rem);height:var(--spacing-16, 1rem);background:var(--light, #ffffff);-webkit-box-shadow:0 0 var(--spacing-04, 0.25rem) var(--dark-10, rgba(0, 0, 0, 0.1));box-shadow:0 0 var(--spacing-04, 0.25rem) var(--dark-10, rgba(0, 0, 0, 0.1));-webkit-transform:rotate(45deg);transform:rotate(45deg)}";
 

package/dist/esm/yoo-tabs.entry.js

@@ -1,12 +1,11 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { T as TapticEngine } from './index-bc6aaa4b.js';
-import './index-945da793.js';
-import { a as isNumber, q as isString, E as isBoolean } from './lodash-bf91c7a4.js';
-import { f as isNativeMobile, x as isIOS, dG as safeScrollIntoView, a8 as showActionSheet, V as translateMulti, q as isWeb, ah as pipes } from './overlays-2b1f8cb5.js';
-import './index-efbd87e6.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
+import './index-4bc6078a.js';
+import { a as isNumber, q as isString, G as isBoolean } from './lodash-f6e59a8e.js';
+import { j as isNativeMobile, H as isIOS, cm as vibrateHapticMedium, dS as safeScrollIntoView, af as showActionSheet, Z as translateMulti, A as isWeb, aq as pipes } from './overlays-ccc6076c.js';
+import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs:var(--spacing-40, 2.5rem);--opacity-tabs:1;--active-tab-background:none;--active-text-color:var(--text-color, #807f83);--active-tab-border-color:var(--app-color, #5a30f4);--tab-border-color:transparent;--tab-border-width:var(--border-width-02, 0.125rem);--tab-padding:0 var(--spacing-16, 1rem);--vertical-tab-gap:var(--spacing-08, 0.5rem);display:block;width:100%;overflow:hidden}:host .tab-container yoo-icon{fill:var(--text-color, #807f83)}:host .tab-container.active{background:var(--active-tab-background)}:host .tab-container.active .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .tab-container.active .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .tab-container.active .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .tab-container.active .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .tab-container.active .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .tab-container.active .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .tab-container.active .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .tab-container.active .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .tab-container.active .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .tab-container.active .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .tab-container.active .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .tab-container.active .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .tab-container.active .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .tab-container.active .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .tab-container.active .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .tab-container.active yoo-icon{fill:var(--dark, #000000)}:host(.transparent) .tab-container:hover,:host(.transparent) .tab-container.active{color:var(--light, #ffffff)}:host(.web) .tab-container{-ms-flex:0;flex:0;padding:var(--tab-padding)}:host(.web) .outer-container-vertical .tab-container{padding:var(--tab-padding)}:host(.web) yoo-ripple-effect{display:none}:host(.web) .tab-container:hover{color:var(--dark, #000000)}:host(.web) .extra:hover{color:var(--app-color, #5a30f4)}:host(.web) .outer-container{margin-top:var(--spacing-08, 0.5rem)}:host(.web.no-margin) .outer-container{margin-top:0}:host(.center){--justify-tabs:center}:host([disabled=\"\"]),:host([disabled=true]){pointer-events:none}:host([disabled=\"\"]) .outer-container,:host([disabled=true]) .outer-container{color:var(--stable, #adadad);opacity:0.4}:host(.no-border) .static-container{border:none}yoo-ripple-effect{--color:var(--app-color, #5a30f4);--opacity:0.1}yoo-icon{-ms-flex-item-align:center;align-self:center;margin-right:0.5625rem}yoo-context-menu.editable{width:var(--icon-size-01, 1rem);margin-left:var(--spacing-08, 0.5rem)}yoo-context-menu.editable yoo-icon{margin-right:0}yoo-button{margin:0 var(--spacing-08, 0.5rem)}span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}yoo-badge,yoo-tag{margin-left:var(--spacing-04, 0.25rem)}yoo-badge.margin-right{margin-right:var(--spacing-08, 0.5rem)}yoo-badge[shape=dot]{-ms-flex-item-align:start;align-self:flex-start}yoo-badge:not([shape=dot]),yoo-tag{-ms-flex-item-align:center;align-self:center}.outer-container{position:relative;height:var(--height-tabs);opacity:var(--opacity-tabs)}.outer-container-vertical{font-size:var(--font-size-16, 1rem)}.outer-container-vertical .tab-container{-ms-flex-pack:left;justify-content:left;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:2.5rem;height:var(--height-tabs);padding:var(--spacing-08, 0.5rem);color:var(--dark, #000000);text-align:left}.outer-container-vertical .tab-container:hover{color:var(--app-color, #5a30f4)}.outer-container-vertical .tab-container .flex{-ms-flex:1;flex:1}.outer-container-vertical .tab-container .full-width{width:100%}.outer-container-vertical .tab-container yoo-icon{margin-right:var(--spacing-08, 0.5rem);fill:var(--text-color, #807f83)}.outer-container-vertical .tab-container.active{color:var(--app-color, #5a30f4)}.outer-container-vertical .tab-container.active yoo-icon{fill:var(--app-color, #5a30f4)}.outer-container-vertical .tab-container .tab-title{width:100%}.outer-container-vertical .tab-container .tab-title.plus-one{width:calc(100% - var(--spacing-32, 2rem))}.outer-container-vertical .tab-container .tab-title.sandwich{width:calc(100% - var(--spacing-64, 4rem))}.outer-container-vertical .tab-container+.tab-container{margin-top:var(--vertical-tab-gap)}.outer-container-vertical .tab-description{padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);color:var(--text-color);font-size:var(--font-size-14, 0.875rem);border-bottom:var(--tab-border-width) solid var(--tab-border-color)}.static-container{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;border-bottom:var(--spacing-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.scrolling-container{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:var(--justify-tabs);justify-content:var(--justify-tabs);width:100%;height:100%}.tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--spacing-08, 0.5rem);color:var(--active-text-color);white-space:nowrap;border-bottom:var(--tab-border-width) solid var(--tab-border-color);cursor:pointer;-webkit-transition:0.3s ease;transition:0.3s ease}.tab-container.active{color:var(--dark, #000000);border-bottom-color:var(--active-tab-border-color)}.extra.active{color:var(--app-color, #5a30f4)}:host(.tabs-padding-top) .outer-container-vertical{padding-top:4rem}:host(.big-tabs) .tab-container{padding-bottom:0;border:none;-webkit-transition:color 0.3s ease;transition:color 0.3s ease}:host(.big-tabs) .tab-container:not(.active){padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.big-tabs) .tab-container.active{background-color:transparent}:host(.big-tabs) .tab-container+.tab-container{margin:0}:host(.big-tabs) .tab-description{border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}";
+const tabsCss = ":host{--justify-tabs:flex-start;--height-tabs:var(--spacing-40, 2.5rem);--opacity-tabs:1;--active-tab-background:none;--active-text-color:var(--text-color, #807f83);--active-tab-border-color:var(--app-color, #5a30f4);--tab-border-color:transparent;--tab-border-width:var(--border-width-02, 0.125rem);--tab-padding:0 var(--spacing-16, 1rem);--vertical-tab-gap:var(--spacing-08, 0.5rem);display:block;width:100%;overflow:hidden}:host .tab-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--spacing-08, 0.5rem);color:var(--active-text-color);white-space:nowrap;border-bottom:var(--tab-border-width) solid var(--tab-border-color);cursor:pointer;-webkit-transition:0.3s ease;transition:0.3s ease}:host .tab-container yoo-icon{fill:var(--text-color, #807f83)}:host .tab-container.active{color:var(--dark, #000000);background:var(--active-tab-background);border-bottom-color:var(--active-tab-border-color)}:host .tab-container.active .accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}:host .tab-container.active .app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}:host .tab-container.active .danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}:host .tab-container.active .dark{color:var(--dark, #000000);fill:var(--dark, #000000)}:host .tab-container.active .energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}:host .tab-container.active .info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}:host .tab-container.active .light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}:host .tab-container.active .stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}:host .tab-container.active .stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}:host .tab-container.active .stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}:host .tab-container.active .stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}:host .tab-container.active .success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}:host .tab-container.active .text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}:host .tab-container.active .warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}:host .tab-container.active .wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host .tab-container.active yoo-icon{fill:var(--dark, #000000)}:host .outer-container{position:relative;height:var(--height-tabs);opacity:var(--opacity-tabs)}:host .outer-container-vertical{--height-tabs:2.5rem;font-size:var(--font-size-16, 1rem);--badge-width-with-spacing:2rem}:host .outer-container-vertical .tab-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:0;border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container-vertical .tab-container.active{background:none;border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}:host .outer-container-vertical .tab-container.active yoo-icon{fill:var(--app-color, #5a30f4)}:host .outer-container-vertical .tab-container:hover{color:var(--app-color, #5a30f4);background-color:var(--active-tab-background)}:host .outer-container-vertical .tab-header{-ms-flex-pack:left;justify-content:left;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:var(--height-tabs);padding:var(--spacing-08, 0.5rem);color:var(--dark, #000000);text-align:left}:host .outer-container-vertical .tab-header .flex{-ms-flex:1;flex:1}:host .outer-container-vertical .tab-header .full-width{width:100%}:host .outer-container-vertical .tab-header yoo-icon{margin-right:var(--spacing-08, 0.5rem);fill:var(--text-color, #807f83)}:host .outer-container-vertical .tab-header .tab-title{width:100%}:host .outer-container-vertical .tab-header .tab-title.plus-one{width:calc(100% - var(--spacing-32, 2rem))}:host .outer-container-vertical .tab-header .tab-title.sandwich{width:calc(100% - var(--spacing-64, 4rem))}:host .outer-container-vertical .tab-description{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;padding:0 var(--spacing-16, 1rem) var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);padding-left:calc(var(--spacing-08, 0.5rem) + var(--badge-width-with-spacing));color:var(--text-color);font-size:var(--font-size-14, 0.875rem);white-space:normal}:host(.transparent) .tab-container:hover,:host(.transparent) .tab-container.active{color:var(--light, #ffffff)}:host(.web) .tab-container{-ms-flex:0;flex:0;padding:var(--tab-padding)}:host(.web) .outer-container-vertical .tab-container{padding:0}:host(.web) yoo-ripple-effect{display:none}:host(.web) .tab-container:hover{color:var(--dark, #000000)}:host(.web) .extra:hover{color:var(--app-color, #5a30f4)}:host(.web) .outer-container{margin-top:var(--spacing-08, 0.5rem)}:host(.web.no-margin) .outer-container{margin-top:0}:host(.center){--justify-tabs:center}:host([disabled=\"\"]),:host([disabled=true]){pointer-events:none}:host([disabled=\"\"]) .outer-container,:host([disabled=true]) .outer-container{color:var(--stable, #adadad);opacity:0.4}:host(.no-border) .static-container{border:none}yoo-ripple-effect{--color:var(--app-color, #5a30f4);--opacity:0.1}yoo-icon{-ms-flex-item-align:center;align-self:center;margin-right:0.5625rem}yoo-context-menu.editable{width:var(--icon-size-01, 1rem);margin-left:var(--spacing-08, 0.5rem)}yoo-context-menu.editable yoo-icon{margin-right:0}yoo-button{margin:0 var(--spacing-08, 0.5rem)}span{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}yoo-badge,yoo-tag{margin-left:var(--spacing-04, 0.25rem)}yoo-badge.margin-right{margin-right:var(--spacing-08, 0.5rem)}yoo-badge[shape=dot]{-ms-flex-item-align:start;align-self:flex-start}yoo-badge:not([shape=dot]),yoo-tag{-ms-flex-item-align:center;align-self:center}.static-container{position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;border-bottom:var(--spacing-02, 0.125rem) solid var(--stable-light, #f1f1f1)}.scrolling-container{position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:var(--justify-tabs);justify-content:var(--justify-tabs);width:100%;height:100%}.extra.active{color:var(--app-color, #5a30f4)}:host(.tabs-padding-top) .outer-container-vertical{padding-top:4rem}:host(.big-tabs) .tab-container{padding-bottom:0;border:none;-webkit-transition:color 0.3s ease;transition:color 0.3s ease}:host(.big-tabs) .tab-container:not(.active){padding-bottom:var(--spacing-08, 0.5rem);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host(.big-tabs) .tab-container.active{background-color:transparent}:host(.big-tabs) .tab-container+.tab-container{margin:0}:host(.big-tabs) .tab-description{border-bottom:var(--tab-border-width) solid var(--active-tab-border-color)}";
 
 const YooTabsComponent = class {
   constructor(hostRef) {
@@ -49,9 +48,9 @@ const YooTabsComponent = class {
     this.notifElements = [];
     this.rippleElements = [];
     this.openedTabs = [];
-    this.tabClicked = (index, event) => {
+    this.tabClicked = async (index, event) => {
       if (isNativeMobile() && isIOS()) {
-        TapticEngine.impact({ style: 'medium' });
+        await vibrateHapticMedium();
       }
       if (this.rippleEffect && this.rippleElements && this.rippleElements[index] && this.rippleElements[index].addRipple && event) {
         this.rippleElements[index].addRipple(event.pageX, event.pageY);
@@ -116,14 +115,13 @@ const YooTabsComponent = class {
     const icon = tab.icon;
     const tagColor = isActive ? 'app-color-10' : 'text-color-10';
     return [
-      h("div", { key: 'tab_' + index, class: { 'tab-container': true, extra: index >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index, event), ref: (el) => (this.tabElements[index] = el) }, h("span", { class: "full-width" }, this.showBadges && h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index, isActive), shape: "circle", text: (index + 1).toLocaleString() }), icon && h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
+      h("div", { key: 'tab_' + index, class: { 'tab-container': true, extra: index >= this.tabs.length, active: isActive }, onClick: (event) => this.tabClicked(index, event), ref: (el) => (this.tabElements[index] = el) }, h("span", { class: "full-width tab-header" }, this.showBadges && h("yoo-badge", { class: "margin-right", color: this.getBadgeColor(tab, index, isActive), shape: "circle", text: (index + 1).toLocaleString() }), icon && h("yoo-icon", { class: tab.iconColor, name: icon, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small') }), this.vertical
         ? h("div", { class: `full-width tab-title ${this.isEditable && this.editableOptions && this.tabs.length > index && icon
             ? 'sandwich'
             : this.isEditable && this.editableOptions && this.tabs.length > index || icon
               ? 'plus-one'
               : ''}` }, h("yoo-truncated-line", { tooltipPlacement: "auto", content: translateMulti(tab.title) }))
-        : h("span", null, translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index) }, h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index && !isWeb(this.host) && (h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index) })), isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (h("yoo-badge", { ref: (el) => (this.notifElements[index] = el), color: tagColor, shape: "oval", text: pipes.number.transform(tab.notif, '', 0) })), isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (h("yoo-tag", { ref: (el) => (this.notifElements[index] = el), color: tagColor }, tab.notif)), isBoolean(tab.notif) && tab.notif == true && !this.isEditable && h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !isWeb(this.host) && this.rippleEffect && h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index] = el) })),
-      this.vertical && isActive && tab.description && h("div", { class: "tab-description", innerHTML: tab.description })
+        : h("span", null, translateMulti(tab.title)), this.isEditable && this.editableOptions && this.tabs.length > index && isWeb(this.host) && (h("yoo-context-menu", { class: "full-width editable", contentButtons: this.editableOptions(index) }, h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more" }))), this.isEditable && this.editableOptions && this.tabs.length > index && !isWeb(this.host) && (h("yoo-icon", { class: tab.iconColor, size: tab.iconOnlySize || (this.vertical ? 'medium' : 'small'), name: "more", onClick: () => this.onShowOptions(index) })), isNumber(tab.notif) && tab.notif > 0 && !this.isEditable && (h("yoo-badge", { ref: (el) => (this.notifElements[index] = el), color: tagColor, shape: "oval", text: pipes.number.transform(tab.notif, '', 0) })), isString(tab.notif) && tab.notif.length > 0 && !this.isEditable && (h("yoo-tag", { ref: (el) => (this.notifElements[index] = el), color: tagColor }, tab.notif)), isBoolean(tab.notif) && tab.notif == true && !this.isEditable && h("yoo-badge", { shape: "dot" }), this.vertical && tab.description && h("yoo-icon", { name: isActive ? 'arrow-up' : 'arrow-down', size: "medium", color: "dark" })), !isWeb(this.host) && this.rippleEffect && h("yoo-ripple-effect", { ref: (el) => (this.rippleElements[index] = el) }), this.vertical && isActive && tab.description && h("div", { class: "tab-description", innerHTML: tab.description }))
     ];
   }
   renderHorizontal() {

package/dist/esm/yoo-tag.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, i as createEvent, h } from './index-54cb3c5d.js';
+import { r as registerInstance, i as createEvent, h } from './index-becca019.js';
 
 function changeRgbOpacity(rgbColor, opacity) {
   const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
   return rgbColor + _opacity.toString(16).toUpperCase();
 }
 
-const tagCss = ":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{--padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);--background-color:unset;display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;white-space:nowrap;border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;margin:0 auto;padding:var(--padding);color:var(--text-color, #807f83);line-height:1.5;background-color:var(--background-color);border-radius:inherit;-webkit-transition:background-color 500ms ease-in-out;transition:background-color 500ms ease-in-out}:host .outer-container ::slotted([slot=start]){margin-right:var(--spacing-04, 0.25rem)}:host .outer-container ::slotted([slot=end]){margin-left:var(--spacing-04, 0.25rem)}:host .outer-container .close-icon{margin-left:var(--spacing-04, 0.25rem)}:host([hidden]){display:none}:host(:not([icon])) #main-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}:host([no-background]){--padding:var(--spacing-04, 0.25rem) 0}:host(.margin){margin-right:var(--spacing-04, 0.25rem);margin-bottom:var(--spacing-04, 0.25rem)}:host(.margin-left){margin-left:var(--spacing-04, 0.25rem)}:host(.fab) .outer-container{-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(.autocomplete-selected) .outer-container #main-content{max-width:inherit}:host([size=small]:not([icon]):not(.menu-item):not([shape=dot])){font-size:var(--font-size-12, 0.75rem)}: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-12, 0.75rem), 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=medium]:not([icon]):not(.menu-item):not([shape=dot])){font-size:var(--font-size-16, 1rem)}:host([size=medium]:not([icon]):not(.menu-item):not([shape=dot])) .outer-container{min-width:2rem;height:2rem}:host(.highlight[size=medium]: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=medium]: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]: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:1rem;height:1rem}: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=small][icon]) .outer-container{width:1.5rem;height:1.5rem;border-radius:50%}:host([size=medium][icon]) .outer-container{width:2rem;height:2rem;border-radius:50%}:host([size=large][icon]) .outer-container{width:3rem;height:3rem;border-radius:50%}:host([size=extra-large][icon]) .outer-container{width:4rem;height:4rem;border-radius:50%}:host([size=extra-small][icon]) .outer-container{width:1rem;height:1rem;border-radius:50%}:host([size=medium]:not([icon]).menu-item){font-size:var(--font-size-12, 0.75rem)}:host([size=medium]:not([icon]).menu-item) .outer-container{height:2rem}:host([size=medium]:not([icon]).menu-item) .outer-container #main-content{line-height:2}:host([size=medium]:not([icon]).menu-item){font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([icon]).menu-item) .outer-container{height:2rem}:host([size=medium]:not([icon]).menu-item) .outer-container #main-content{line-height:2}:host([color=app-color][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--app-color, #5a30f4)}:host([color=app-color][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--app-color, #5a30f4);background-color:transparent}:host([color=app-color][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--app-color, #5a30f4)}:host([color=danger][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--danger, #d44333)}:host([color=danger][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--danger, #d44333);background-color:transparent}:host([color=danger][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--danger, #d44333)}:host([color=dark][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--dark, #000000)}:host([color=dark][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--dark, #000000);background-color:transparent}:host([color=dark][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--dark, #000000)}:host([color=light][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=light][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--light, #ffffff);background-color:transparent}:host([color=light][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=stable][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--stable, #adadad)}:host([color=stable][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--stable, #adadad);background-color:transparent}:host([color=stable][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--stable, #adadad)}:host([color=text-color][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--text-color, #807f83)}:host([color=text-color][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--text-color, #807f83);background-color:transparent}:host([color=text-color][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--text-color, #807f83)}:host([color=accent].inverse-color) .outer-container{color:var(--accent, #276ef1);background:var(--accent-20, rgba(39, 110, 241, 0.2))}:host([color=accent].inverse-color) .outer-container yoo-icon{fill:var(--accent, #276ef1) !important}:host([color=accent].inverse-color).solid yoo-icon{fill:accent}:host([color=app-color].inverse-color) .outer-container{color:var(--app-color, #5a30f4);background:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host([color=app-color].inverse-color) .outer-container yoo-icon{fill:var(--app-color, #5a30f4) !important}:host([color=app-color].inverse-color).solid yoo-icon{fill:app-color}:host([color=danger].inverse-color) .outer-container{color:var(--danger, #d44333);background:var(--danger-20, rgba(212, 67, 51, 0.2))}:host([color=danger].inverse-color) .outer-container yoo-icon{fill:var(--danger, #d44333) !important}:host([color=danger].inverse-color).solid yoo-icon{fill:danger}:host([color=dark].inverse-color) .outer-container{color:var(--dark, #000000);background:var(--dark-20, rgba(0, 0, 0, 0.2))}:host([color=dark].inverse-color) .outer-container yoo-icon{fill:var(--dark, #000000) !important}:host([color=dark].inverse-color).solid yoo-icon{fill:dark}:host([color=energized].inverse-color) .outer-container{color:var(--energized, #ffc043);background:var(--energized-20, rgba(255, 192, 67, 0.2))}:host([color=energized].inverse-color) .outer-container yoo-icon{fill:var(--energized, #ffc043) !important}:host([color=energized].inverse-color).solid yoo-icon{fill:energized}:host([color=stable].inverse-color) .outer-container{color:var(--stable, #adadad);background:var(--stable-20, rgba(173, 173, 173, 0.2))}:host([color=stable].inverse-color) .outer-container yoo-icon{fill:var(--stable, #adadad) !important}:host([color=stable].inverse-color).solid yoo-icon{fill:stable}:host([color=stable-light].inverse-color) .outer-container{color:var(--stable-light, #f1f1f1);background:var(--text-color, #807f83)}:host([color=stable-light].inverse-color) .outer-container yoo-icon{fill:var(--stable-light, #f1f1f1) !important}:host([color=stable-light].inverse-color).solid yoo-icon{fill:stable-light}:host([color=success].inverse-color) .outer-container{color:var(--success, #3aa76d);background:var(--success-20, rgba(58, 167, 109, 0.2))}:host([color=success].inverse-color) .outer-container yoo-icon{fill:var(--success, #3aa76d) !important}:host([color=success].inverse-color).solid yoo-icon{fill:success}:host([color=warning].inverse-color) .outer-container{color:var(--warning, #ed6e33);background:var(--warning-20, rgba(237, 110, 51, 0.2))}:host([color=warning].inverse-color) .outer-container yoo-icon{fill:var(--warning, #ed6e33) !important}:host([color=warning].inverse-color).solid yoo-icon{fill:warning}:host([color=info].inverse-color) .outer-container{color:var(--info, #d84c96);background:var(--info-20, rgba(216, 76, 150, 0.2))}:host([color=info].inverse-color) .outer-container yoo-icon{fill:var(--info, #d84c96) !important}:host([color=info].inverse-color).solid yoo-icon{fill:info}";
+const tagCss = ":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{--padding:var(--spacing-04, 0.25rem) var(--spacing-08, 0.5rem);--background-color:unset;display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;white-space:nowrap;border-radius:var(--border-radius-08, 0.5rem)}:host .outer-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;margin:0 auto;padding:var(--padding);color:var(--text-color, #807f83);line-height:1.5;background-color:var(--background-color);border-radius:inherit;-webkit-transition:background-color 500ms ease-in-out;transition:background-color 500ms ease-in-out}:host .outer-container ::slotted([slot=start]){margin-right:var(--spacing-04, 0.25rem)}:host .outer-container ::slotted([slot=end]){margin-left:var(--spacing-04, 0.25rem)}:host .outer-container .close-icon{margin-left:var(--spacing-04, 0.25rem)}:host([hidden]){display:none}:host([size=extra-small]){--padding:var(--spacing-02, 0.125rem) var(--spacing-04, 0.25rem);border-radius:var(--border-radius-04, 0.25rem)}:host(:not([icon])) #main-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}:host([no-background]){--padding:var(--spacing-04, 0.25rem) 0}:host(.margin){margin-right:var(--spacing-04, 0.25rem);margin-bottom:var(--spacing-04, 0.25rem)}:host(.margin-left){margin-left:var(--spacing-04, 0.25rem)}:host(.fab) .outer-container{-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(.autocomplete-selected) .outer-container #main-content{max-width:inherit}:host([size=small]:not([icon]):not(.menu-item):not([shape=dot])){font-size:var(--font-size-12, 0.75rem)}: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-12, 0.75rem), 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=medium]:not([icon]):not(.menu-item):not([shape=dot])){font-size:var(--font-size-16, 1rem)}:host([size=medium]:not([icon]):not(.menu-item):not([shape=dot])) .outer-container{min-width:2rem;height:2rem}:host(.highlight[size=medium]: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=medium]: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]: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:1rem;height:1rem}: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=small][icon]) .outer-container{width:1.5rem;height:1.5rem;border-radius:50%}:host([size=medium][icon]) .outer-container{width:2rem;height:2rem;border-radius:50%}:host([size=large][icon]) .outer-container{width:3rem;height:3rem;border-radius:50%}:host([size=extra-large][icon]) .outer-container{width:4rem;height:4rem;border-radius:50%}:host([size=extra-small][icon]) .outer-container{width:1rem;height:1rem;border-radius:50%}:host([size=medium]:not([icon]).menu-item){font-size:var(--font-size-12, 0.75rem)}:host([size=medium]:not([icon]).menu-item) .outer-container{height:2rem}:host([size=medium]:not([icon]).menu-item) .outer-container #main-content{line-height:2}:host([size=medium]:not([icon]).menu-item){font-size:var(--font-size-14, 0.875rem)}:host([size=medium]:not([icon]).menu-item) .outer-container{height:2rem}:host([size=medium]:not([icon]).menu-item) .outer-container #main-content{line-height:2}:host([color=app-color][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--app-color, #5a30f4)}:host([color=app-color][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--app-color, #5a30f4);background-color:transparent}:host([color=app-color][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--app-color, #5a30f4)}:host([color=danger][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--danger, #d44333)}:host([color=danger][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--danger, #d44333);background-color:transparent}:host([color=danger][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--danger, #d44333)}:host([color=dark][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--dark, #000000)}:host([color=dark][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--dark, #000000);background-color:transparent}:host([color=dark][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--dark, #000000)}:host([color=light][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--light, #ffffff)}:host([color=light][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--light, #ffffff);background-color:transparent}:host([color=light][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--light, #ffffff)}:host([color=stable][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--stable, #adadad)}:host([color=stable][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--stable, #adadad);background-color:transparent}:host([color=stable][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--stable, #adadad)}:host([color=text-color][no-background]) ::slotted(yoo-icon:not([color]):not(.custom)),:host([no-background]) ::slotted(yoo-icon:not([color]):not(.custom)){fill:var(--text-color, #807f83)}:host([color=text-color][no-background]) .outer-container,:host([no-background]) .outer-container{color:var(--text-color, #807f83);background-color:transparent}:host([color=text-color][no-background]) .outer-container yoo-icon:not(.custom),:host([no-background]) .outer-container yoo-icon:not(.custom){fill:var(--text-color, #807f83)}:host([color=accent].inverse-color) .outer-container{color:var(--accent, #276ef1);background:var(--accent-20, rgba(39, 110, 241, 0.2))}:host([color=accent].inverse-color) .outer-container yoo-icon{fill:var(--accent, #276ef1) !important}:host([color=accent].inverse-color).solid yoo-icon{fill:accent}:host([color=app-color].inverse-color) .outer-container{color:var(--app-color, #5a30f4);background:var(--app-color-20, rgba(90, 48, 244, 0.2))}:host([color=app-color].inverse-color) .outer-container yoo-icon{fill:var(--app-color, #5a30f4) !important}:host([color=app-color].inverse-color).solid yoo-icon{fill:app-color}:host([color=danger].inverse-color) .outer-container{color:var(--danger, #d44333);background:var(--danger-20, rgba(212, 67, 51, 0.2))}:host([color=danger].inverse-color) .outer-container yoo-icon{fill:var(--danger, #d44333) !important}:host([color=danger].inverse-color).solid yoo-icon{fill:danger}:host([color=dark].inverse-color) .outer-container{color:var(--dark, #000000);background:var(--dark-20, rgba(0, 0, 0, 0.2))}:host([color=dark].inverse-color) .outer-container yoo-icon{fill:var(--dark, #000000) !important}:host([color=dark].inverse-color).solid yoo-icon{fill:dark}:host([color=energized].inverse-color) .outer-container{color:var(--energized, #ffc043);background:var(--energized-20, rgba(255, 192, 67, 0.2))}:host([color=energized].inverse-color) .outer-container yoo-icon{fill:var(--energized, #ffc043) !important}:host([color=energized].inverse-color).solid yoo-icon{fill:energized}:host([color=stable].inverse-color) .outer-container{color:var(--stable, #adadad);background:var(--stable-20, rgba(173, 173, 173, 0.2))}:host([color=stable].inverse-color) .outer-container yoo-icon{fill:var(--stable, #adadad) !important}:host([color=stable].inverse-color).solid yoo-icon{fill:stable}:host([color=stable-light].inverse-color) .outer-container{color:var(--stable-light, #f1f1f1);background:var(--text-color, #807f83)}:host([color=stable-light].inverse-color) .outer-container yoo-icon{fill:var(--stable-light, #f1f1f1) !important}:host([color=stable-light].inverse-color).solid yoo-icon{fill:stable-light}:host([color=success].inverse-color) .outer-container{color:var(--success, #3aa76d);background:var(--success-20, rgba(58, 167, 109, 0.2))}:host([color=success].inverse-color) .outer-container yoo-icon{fill:var(--success, #3aa76d) !important}:host([color=success].inverse-color).solid yoo-icon{fill:success}:host([color=warning].inverse-color) .outer-container{color:var(--warning, #ed6e33);background:var(--warning-20, rgba(237, 110, 51, 0.2))}:host([color=warning].inverse-color) .outer-container yoo-icon{fill:var(--warning, #ed6e33) !important}:host([color=warning].inverse-color).solid yoo-icon{fill:warning}:host([color=info].inverse-color) .outer-container{color:var(--info, #d84c96);background:var(--info-20, rgba(216, 76, 150, 0.2))}:host([color=info].inverse-color) .outer-container yoo-icon{fill:var(--info, #d84c96) !important}:host([color=info].inverse-color).solid yoo-icon{fill:info}";
 
 const YooTagComponent = class {
   constructor(hostRef) {

package/dist/esm/yoo-text-sequence.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import './index-945da793.js';
-import { n as compact, V as clamp } from './lodash-bf91c7a4.js';
-import { o as openImageDetailFromRTE, b as getAppContext } from './common-helpers-246a4085.js';
-import { v as findParent, cJ as setSecuredContent, V as translateMulti } from './overlays-2b1f8cb5.js';
-import './index-efbd87e6.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
+import './index-4bc6078a.js';
+import { n as compact, X as clamp } from './lodash-f6e59a8e.js';
+import { o as openImageDetailFromRTE, g as getAppContext } from './common-helpers-fe634d0d.js';
+import { Q as findParent, cZ as setSecuredContent, Z as translateMulti } from './overlays-ccc6076c.js';
+import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const textSequenceCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:100%;overflow:hidden}:host #view-finder{position:relative;width:100%;height:50%}:host #view-finder #sequences{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem);width:100%}:host #view-finder .sequence{display:grid;height:var(--max-sequence-height);padding:0 var(--spacing-16, 1rem);overflow:auto;color:var(--stable, #adadad);text-align:center;word-break:break-word;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out}:host #view-finder .sequence:not(.overflowing){place-content:center}:host #view-finder .sequence *{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;margin:var(--spacing-08, 0.5rem) auto;text-align:center}:host #view-finder .sequence::-webkit-scrollbar{display:none}:host #view-finder .sequence.active{color:var(--dark, #000000);-webkit-transform:scale(1);transform:scale(1)}:host #view-finder .sequence.title{font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .overlay{position:absolute;left:0;z-index:1;width:100%;height:35%}:host .overlay[placement=top]{top:0;background:-webkit-gradient(linear, left bottom, left top, from(var(--transparent-linear-gradient, rgba(255, 255, 255, 0))), color-stop(65%, var(--light, #ffffff)));background:linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 65%)}:host .overlay[placement=bottom]{bottom:0;background:-webkit-gradient(linear, left bottom, left top, color-stop(35%, var(--light, #ffffff)), to(var(--transparent-linear-gradient, rgba(255, 255, 255, 0))));background:linear-gradient(0deg, var(--light, #ffffff) 35%, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 100%)}:host yoo-button{position:absolute;left:50%;z-index:2;width:5rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out}:host yoo-button[placement=top]{top:var(--spacing-16, 1rem)}:host yoo-button[placement=bottom]{bottom:var(--spacing-16, 1rem)}:host yoo-button[hidden]{opacity:0}:host yoo-button yoo-icon{fill:var(--app-color, #5a30f4)}:host([animated]) yoo-button,:host([animated]) #sequences,:host([animated]) .sequence,:host([animated]) .overlay{-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}";
+const textSequenceCss = ":host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;height:100%;overflow:hidden}:host #view-finder{position:relative;width:100%;height:50%}:host #view-finder #sequences{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--spacing-16, 1rem);width:100%}:host #view-finder .sequence{display:grid;height:var(--max-sequence-height);padding:0 var(--spacing-16, 1rem);overflow:auto;color:var(--stable, #adadad);text-align:center;word-break:break-word;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out}:host #view-finder .sequence:not(.overflowing){place-content:center}:host #view-finder .sequence *{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;margin:var(--spacing-08, 0.5rem) auto;text-align:center}:host #view-finder .sequence::-webkit-scrollbar{display:none}:host #view-finder .sequence.active{color:var(--dark, #000000);-webkit-transform:scale(1);transform:scale(1)}:host #view-finder .sequence.title{font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .overlay{position:absolute;left:0;z-index:1;width:100%;height:35%}:host .overlay[placement=top]{top:0;background:-webkit-gradient(linear, left bottom, left top, from(var(--transparent-linear-gradient, rgba(255, 255, 255, 0))), color-stop(35%, var(--light, #ffffff)));background:linear-gradient(0deg, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 0%, var(--light, #ffffff) 35%)}:host .overlay[placement=bottom]{bottom:0;background:-webkit-gradient(linear, left bottom, left top, color-stop(35%, var(--light, #ffffff)), to(var(--transparent-linear-gradient, rgba(255, 255, 255, 0))));background:linear-gradient(0deg, var(--light, #ffffff) 35%, var(--transparent-linear-gradient, rgba(255, 255, 255, 0)) 100%)}:host yoo-button{position:absolute;left:50%;z-index:2;width:5rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out}:host yoo-button[placement=top]{top:var(--spacing-16, 1rem)}:host yoo-button[placement=bottom]{bottom:var(--spacing-16, 1rem)}:host yoo-button[hidden]{opacity:0}:host yoo-button yoo-icon{fill:var(--app-color, #5a30f4)}:host([animated]) yoo-button,:host([animated]) #sequences,:host([animated]) .sequence,:host([animated]) .overlay{-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;transition:transform 300ms, -webkit-transform 300ms}";
 
 const YooTextSequence = class {
   constructor(hostRef) {
@@ -51,6 +51,9 @@ const YooTextSequence = class {
   componentDidLoad() {
     this.initSequenceHeight();
   }
+  componentDidRender() {
+    this.initSequenceHeight();
+  }
   initSequenceHeight() {
     var _a;
     if (((_a = this.sequenceElements) === null || _a === void 0 ? void 0 : _a.length) && this.maxSequenceHeight) {
@@ -61,7 +64,7 @@ const YooTextSequence = class {
   }
   renderSequences() {
     var _a;
-    return h("section", { id: "view-finder", ref: el => this.viewFinderElement = el }, h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
+    return h("section", { id: "view-finder", ref: el => this.viewFinderElement = el }, h("div", { id: "sequences", ref: el => this.sequencesContainerElement = el, onTransitionEnd: () => this.initSequenceHeight(), style: { transform: `translateY(${this.translateY}px)` } }, (_a = this.sequenceValues) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
       return text && h("div", { class: { sequence: true, title: !!this.heading && !index, active: index === this.currentIndex }, innerHTML: setSecuredContent(translateMulti(text)), onClick: ev => { var _a; return openImageDetailFromRTE(this.sequenceElements[index], (_a = ev === null || ev === void 0 ? void 0 : ev.target) === null || _a === void 0 ? void 0 : _a['src']); } });
     })));
   }

package/dist/esm/yoo-text.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import { b as isFunction } from './lodash-bf91c7a4.js';
-import { i as sanitizeHTML, b as getAppContext } from './common-helpers-246a4085.js';
-import './overlays-2b1f8cb5.js';
-import './index-efbd87e6.js';
+import { r as registerInstance, h, e as Host, g as getElement } from './index-becca019.js';
+import { f as sanitizeHTML, g as getAppContext } from './common-helpers-fe634d0d.js';
+import './overlays-ccc6076c.js';
+import './lodash-f6e59a8e.js';
+import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
-import './index-945da793.js';
+import './index-4bc6078a.js';
 
 const YooTextComponent = class {
   constructor(hostRef) {
@@ -16,13 +16,17 @@ const YooTextComponent = class {
   async onContentChanged() {
     await this.sanitizeContent();
   }
+  async componentDidLoad() {
+    var _a;
+    (_a = this.extraConversion) === null || _a === void 0 ? void 0 : _a.call(this, this.host);
+  }
   async sanitizeContent() {
     var _a;
     this.safeContent = await sanitizeHTML(this.content || '') || this.content;
-    (_a = this.extraConversion) === null || _a === void 0 ? void 0 : _a.forEach((func) => isFunction(func) && (this.safeContent = func(this.safeContent)));
+    (_a = this.extraConversion) === null || _a === void 0 ? void 0 : _a.call(this, this.host);
   }
   render() {
-    return (h(Host, { class: getAppContext(this.host) }, h("span", { innerHTML: this.safeContent || this.content })));
+    return (h(Host, { class: getAppContext(this.host) }, h("span", null, this.safeContent || this.content)));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/yoo-toast.entry.js

@@ -1,13 +1,13 @@
-import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import './index-945da793.js';
-import { l as lifecycleEvents, b as getAppContext } from './common-helpers-246a4085.js';
-import { e as eventMethod } from './overlays-848be7b8.js';
-import { cT as present, y as setAnimation, cU as dismiss, q as isWeb, t as translate, w as isIphoneX, V as translateMulti } from './overlays-2b1f8cb5.js';
-import './lodash-bf91c7a4.js';
-import './index-efbd87e6.js';
+import { r as registerInstance, i as createEvent, h, e as Host, g as getElement } from './index-becca019.js';
+import './index-4bc6078a.js';
+import { l as lifecycleEvents, g as getAppContext } from './common-helpers-fe634d0d.js';
+import { e as eventMethod } from './overlays-255503d6.js';
+import { d7 as present, I as setAnimation, d8 as dismiss, A as isWeb, t as translate, G as isIphoneX, d9 as MODAL_BASE_ZINDEX, Z as translateMulti } from './overlays-ccc6076c.js';
+import './lodash-f6e59a8e.js';
+import './index-e7f48bcb.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const toastCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{--media-size:48px}:host yoo-truncate{--max-lines:3}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;bottom:unset;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.25rem;padding:0.75rem 1rem;font-size:var(--font-size-16, 1rem);background:var(--stable-ultralight, #fafafa);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4))}:host .outer-container .danger{color:var(--danger, #d44333)}:host .outer-container .warning{color:var(--warning, #ed6e33)}:host .outer-container .success{color:var(--success, #3aa76d)}:host .outer-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .button-container{padding:0 1rem}:host .outer-container .button-container .danger{color:var(--danger, #d44333)}:host .outer-container .button-container .warning{color:var(--warning, #ed6e33)}:host .outer-container .button-container .success{color:var(--success, #3aa76d)}:host .outer-container .button-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .text-container{-ms-flex:1;flex:1;margin-right:auto;padding-right:var(--spacing-08, 0.5rem);color:var(--dark, #000000)}:host .outer-container .text-container.sub-messages{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:unset !important}:host .outer-container .icon-container{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .icon-container yoo-icon{display:block}:host .outer-container .image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .image-container yoo-img{--border-radius:50%;width:var(--media-size);height:var(--media-size)}:host .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-width:55px;min-height:55px;margin-right:0.8rem;margin-bottom:0.5rem;line-height:55px;text-align:center;border-radius:50%}:host .outer-container .extra-button.bg-app-color{background:var(--app-color, #5a30f4)}:host .outer-container .extra-button.flex{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .extra-button.light{color:var(--light, #ffffff)}:host .overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--dark, #000000);opacity:0.4}:host(:not(.fullscreen):not(.progress):not(.form-creator.warning)) .outer-container .text-container{max-width:65%;max-height:unset;overflow-y:hidden;word-break:break-word}:host(:not(.fullscreen):not(.progress):not(.form-creator.warning)) .outer-container .text-container.full-width{max-width:100%}:host(.fullscreen) .outer-container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100% !important;padding:3rem !important}:host(.fullscreen) .outer-container .image-container{-ms-flex:initial;flex:initial;width:100%;margin-bottom:1rem}:host(.fullscreen) .outer-container .image-container yoo-img{--border-radius:unset;width:100%;height:4rem}:host(.fullscreen) .outer-container .text-container{-ms-flex:initial;flex:initial;-ms-flex-pack:center;justify-content:center;width:100%;text-align:center}:host(.bg-stable-light) .outer-container{background:var(--stable-light, #f1f1f1)}:host(.global-actions){-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.global-actions) .outer-container{height:2.75rem !important;margin-bottom:0 !important;overflow:hidden;border-radius:5px}:host(.global-actions) .outer-container .count-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;line-height:44px}:host(.global-actions) .outer-container .text-container{-ms-flex:1;flex:1}:host(.global-actions) .outer-container .extra-button{width:2rem;min-width:initial;min-height:initial;margin:0;font-size:var(--font-size-18, 1.125rem);line-height:1rem}:host(.global-actions) .outer-container .extra-button:last-child:not(.context-menu){margin-right:1rem}:host(.bottom) .outer-container{top:unset;bottom:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4));border-bottom:none}:host(.progress) .outer-container{-ms-flex-direction:column;flex-direction:column;padding:0.75rem 1rem}:host(.progress) .outer-container .text-container{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem 0}:host(.progress) .outer-container .text-container .message,:host(.progress) .outer-container .text-container .icon-container{display:initial;margin:0}:host(.progress) .outer-container .text-container .button-container{margin-left:auto;padding-right:0}:host(.progress) .outer-container .progressbar-wrapper{width:100%}:host(.progress) .outer-container .progressbar-wrapper yoo-progress-bar{--progress-value-color:var(--app-color, #5a30f4)}:host(.header:not(.block)) .outer-container.iphone-x{padding-top:2.75rem !important}:host(.header.ios:not(.block)) .outer-container{padding-top:1.75rem}:host(.web:not(.rounded-rectangle)){display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;height:100%}:host(.web:not(.rounded-rectangle)) .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:450px;min-height:60px;margin-top:4.25rem;border-radius:0.375rem;-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.web:not(.rounded-rectangle)) .outer-container .message{margin:0 0 0 var(--spacing-16, 1rem)}:host(.web:not(.rounded-rectangle)) .outer-container .button{margin-bottom:0}:host(.web.global-actions) .outer-container{padding:0;color:var(--stable, #adadad)}:host(.web.global-actions) .outer-container .count-container{padding-left:var(--spacing-16, 1rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .text-container{padding:var(--spacing-08, 0.5rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .extra-button:last-child{margin-left:var(--spacing-08, 0.5rem);padding-left:var(--spacing-08, 0.5rem);border-left:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);border-radius:0}:host(.web.top.progress) .outer-container .message{display:block;white-space:nowrap}:host(.web.top.header) .outer-container{border-bottom:none}:host(.web.top.header) .outer-container .icon-container{margin-bottom:0}:host(.web.bottom){border-radius:0.375rem}:host(.web.bottom) .outer-container{-ms-flex-item-align:end;align-self:flex-end;margin-top:0;margin-bottom:var(--spacing-16, 1rem);overflow:visible}:host(.web.bottom) .outer-container .count-container{border-radius:0.375rem 0 0 0.375rem}:host(.block) .outer-container{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-height:var(--spacing-48, 3rem);border-bottom:none}:host(.block.iphone-x){min-height:var(--spacing-64, 4rem)}:host(.form-creator) .outer-container{padding:0;background:var(--stable-light, #f1f1f1);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0) !important}:host(.form-creator) .outer-container .text-container{padding-left:var(--spacing-16, 1rem)}:host(.form-creator) .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;line-height:0.5rem}:host(.form-creator) .outer-container .extra-button.context-menu:last-child{margin-left:0;padding-left:0}:host(.form-creator) .outer-container .icon-container{padding-left:var(--spacing-08, 0.5rem)}:host(.media){--media-size:48px}:host(.media) yoo-truncate{--max-lines:2}:host(.media) .right-media-container{width:var(--media-size);height:var(--media-size)}:host(.photo-actions) .outer-container{min-height:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem);background-color:var(--app-color, #5a30f4)}:host(.photo-actions) .outer-container .text-container{color:var(--light, #ffffff)}:host(.photo-actions) .outer-container yoo-icon{font-size:var(--font-size-14, 0.875rem)}:host(.photo-actions) .outer-container yoo-icon.close{min-height:initial;padding:var(--spacing-02, 0.125rem);color:var(--app-color, #5a30f4);font-size:var(--font-size-14, 0.875rem);background:var(--light, #ffffff);border-radius:50%}:host(.photo-actions) .outer-container .button{padding:0 var(--spacing-16, 1rem)}:host(.photo-actions) .outer-container .button:not(:last-of-type){border-right:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning) .outer-container{background:var(--warning, #ed6e33);border:none}:host(.form-creator.warning) .outer-container .text-container{padding-top:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host(.form-creator.warning) .outer-container .button-container.close-icon-divider{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:3rem;border-left:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning.web) .outer-container{width:37.5rem}:host(.form-creator.warning.translate){margin-top:var(--spacing-32, 2rem)}:host(.form-creator.warning.translate) .outer-container yoo-icon{margin:0 var(--spacing-16, 1rem);cursor:pointer}:host(.form-creator.warning.translate) .outer-container .light{cursor:pointer}:host(.form){display:block;overflow:hidden}:host(.form) .outer-container{position:initial;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:unset;padding:var(--spacing-04, 0.25rem);font-size:var(--font-size-12, 0.75rem);border:none;border-radius:0.375rem;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.rounded-rectangle) .outer-container{margin:var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem)}:host(.bg-app-color) .outer-container{background:var(--app-color, #5a30f4)}:host(.bg-app-color) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-app-color) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color) .outer-container .button-container .success,:host(.bg-app-color) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-app-color-10) .outer-container{background:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host(.bg-app-color-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container .success,:host(.bg-app-color-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger) .outer-container{background:var(--danger, #d44333)}:host(.bg-danger) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-danger) .outer-container .button-container{padding:0 1rem}:host(.bg-danger) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger) .outer-container .button-container .success,:host(.bg-danger) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger-10) .outer-container{background:var(--danger-10, rgba(212, 67, 51, 0.1))}:host(.bg-danger-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container{padding:0 1rem}:host(.bg-danger-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container .success,:host(.bg-danger-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-energized) .outer-container{background:var(--energized, #ffc043)}:host(.bg-energized) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-energized) .outer-container .button-container{padding:0 1rem}:host(.bg-energized) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-energized) .outer-container .button-container .success,:host(.bg-energized) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-energized-10) .outer-container{background:var(--energized-10, rgba(255, 192, 67, 0.1))}:host(.bg-energized-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-energized-10) .outer-container .button-container{padding:0 1rem}:host(.bg-energized-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-energized-10) .outer-container .button-container .success,:host(.bg-energized-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning) .outer-container{background:var(--warning, #ed6e33)}:host(.bg-warning) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-warning) .outer-container .button-container{padding:0 1rem}:host(.bg-warning) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning) .outer-container .button-container .success,:host(.bg-warning) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning-10) .outer-container{background:var(--warning-10, rgba(237, 110, 51, 0.1))}:host(.bg-warning-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container{padding:0 1rem}:host(.bg-warning-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container .success,:host(.bg-warning-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-success) .outer-container{background:var(--success, #3aa76d)}:host(.bg-success) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-success) .outer-container .button-container{padding:0 1rem}:host(.bg-success) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-success) .outer-container .button-container .success,:host(.bg-success) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-success-10) .outer-container{background:var(--success-10, rgba(58, 167, 109, 0.1))}:host(.bg-success-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-success-10) .outer-container .button-container{padding:0 1rem}:host(.bg-success-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-success-10) .outer-container .button-container .success,:host(.bg-success-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}";
+const toastCss = ".bg-accent{background-color:var(--accent, #276ef1) !important}.accent{color:var(--accent, #276ef1);fill:var(--accent, #276ef1)}.bg-app-color{background-color:var(--app-color, #5a30f4) !important}.app-color{color:var(--app-color, #5a30f4);fill:var(--app-color, #5a30f4)}.bg-danger{background-color:var(--danger, #d44333) !important}.danger{color:var(--danger, #d44333);fill:var(--danger, #d44333)}.bg-dark{background-color:var(--dark, #000000) !important}.dark{color:var(--dark, #000000);fill:var(--dark, #000000)}.bg-energized{background-color:var(--energized, #ffc043) !important}.energized{color:var(--energized, #ffc043);fill:var(--energized, #ffc043)}.bg-info{background-color:var(--info, #d84c96) !important}.info{color:var(--info, #d84c96);fill:var(--info, #d84c96)}.bg-light{background-color:var(--light, #ffffff) !important}.light{color:var(--light, #ffffff);fill:var(--light, #ffffff)}.bg-stable{background-color:var(--stable, #adadad) !important}.stable{color:var(--stable, #adadad);fill:var(--stable, #adadad)}.bg-stable-alt{background-color:var(--stable-alt, #d0d0d0) !important}.stable-alt{color:var(--stable-alt, #d0d0d0);fill:var(--stable-alt, #d0d0d0)}.bg-stable-light{background-color:var(--stable-light, #f1f1f1) !important}.stable-light{color:var(--stable-light, #f1f1f1);fill:var(--stable-light, #f1f1f1)}.bg-stable-ultralight{background-color:var(--stable-ultralight, #fafafa) !important}.stable-ultralight{color:var(--stable-ultralight, #fafafa);fill:var(--stable-ultralight, #fafafa)}.bg-success{background-color:var(--success, #3aa76d) !important}.success{color:var(--success, #3aa76d);fill:var(--success, #3aa76d)}.bg-text-color{background-color:var(--text-color, #807f83) !important}.text-color{color:var(--text-color, #807f83);fill:var(--text-color, #807f83)}.bg-warning{background-color:var(--warning, #ed6e33) !important}.warning{color:var(--warning, #ed6e33);fill:var(--warning, #ed6e33)}.bg-wood{background-color:var(--wood, #99644c) !important}.wood{color:var(--wood, #99644c);fill:var(--wood, #99644c)}:host{--media-size:48px}:host yoo-truncate{--max-lines:3}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;bottom:unset;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.25rem;padding:0.75rem 1rem;font-size:var(--font-size-16, 1rem);background:var(--stable-ultralight, #fafafa);border-bottom:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4))}:host .outer-container .danger{color:var(--danger, #d44333)}:host .outer-container .warning{color:var(--warning, #ed6e33)}:host .outer-container .success{color:var(--success, #3aa76d)}:host .outer-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .button-container{padding:0 1rem}:host .outer-container .button-container .danger{color:var(--danger, #d44333)}:host .outer-container .button-container .warning{color:var(--warning, #ed6e33)}:host .outer-container .button-container .success{color:var(--success, #3aa76d)}:host .outer-container .button-container .app-color{color:var(--app-color, #5a30f4)}:host .outer-container .text-container{-ms-flex:1;flex:1;margin-right:auto;padding-right:var(--spacing-08, 0.5rem);color:var(--dark, #000000)}:host .outer-container .text-container.sub-messages{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:unset !important}:host .outer-container .icon-container{padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .icon-container yoo-icon{display:block}:host .outer-container .image-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-right:var(--spacing-08, 0.5rem)}:host .outer-container .image-container yoo-img{--border-radius:50%;width:var(--media-size);height:var(--media-size)}:host .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;min-width:55px;min-height:55px;margin-right:0.8rem;margin-bottom:0.5rem;line-height:55px;text-align:center;border-radius:50%}:host .outer-container .extra-button.bg-app-color{background:var(--app-color, #5a30f4)}:host .outer-container .extra-button.flex{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .extra-button.light{color:var(--light, #ffffff)}:host .overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--dark, #000000);opacity:0.4}:host(:not(.fullscreen):not(.progress):not(.form-creator.warning)) .outer-container .text-container{max-width:65%;max-height:unset;overflow-y:hidden;word-break:break-word}:host(:not(.fullscreen):not(.progress):not(.form-creator.warning)) .outer-container .text-container.full-width{max-width:100%}:host(.fullscreen) .outer-container{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100% !important;padding:3rem !important}:host(.fullscreen) .outer-container .image-container{-ms-flex:initial;flex:initial;width:100%;margin-bottom:1rem}:host(.fullscreen) .outer-container .image-container yoo-img{--border-radius:unset;width:100%;height:4rem}:host(.fullscreen) .outer-container .text-container{-ms-flex:initial;flex:initial;-ms-flex-pack:center;justify-content:center;width:100%;text-align:center}:host(.bg-stable-light) .outer-container{background:var(--stable-light, #f1f1f1)}:host(.global-actions){-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.global-actions) .outer-container{height:2.75rem !important;margin-bottom:0 !important;overflow:hidden;border-radius:5px}:host(.global-actions) .outer-container .count-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%;line-height:44px}:host(.global-actions) .outer-container .text-container{-ms-flex:1;flex:1}:host(.global-actions) .outer-container .extra-button{width:2rem;min-width:initial;min-height:initial;margin:0;font-size:var(--font-size-18, 1.125rem);line-height:1rem}:host(.global-actions) .outer-container .extra-button:last-child:not(.context-menu){margin-right:1rem}:host(.bottom) .outer-container{top:unset;bottom:0;border-top:var(--border-width-01, 0.0625rem) solid var(--stable-40, rgba(173, 173, 173, 0.4));border-bottom:none}:host(.progress) .outer-container{-ms-flex-direction:column;flex-direction:column;padding:0.75rem 1rem}:host(.progress) .outer-container .text-container{display:-ms-flexbox;display:flex;width:100%;padding:0.5rem 0}:host(.progress) .outer-container .text-container .message,:host(.progress) .outer-container .text-container .icon-container{display:initial;margin:0}:host(.progress) .outer-container .text-container .button-container{margin-left:auto;padding-right:0}:host(.progress) .outer-container .progressbar-wrapper{width:100%}:host(.progress) .outer-container .progressbar-wrapper yoo-progress-bar{--progress-value-color:var(--app-color, #5a30f4)}:host(.header:not(.block)) .outer-container.iphone-x{padding-top:2.75rem !important}:host(.header.ios:not(.block)) .outer-container{padding-top:1.75rem}:host(.web:not(.rounded-rectangle)){display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;height:100%}:host(.web:not(.rounded-rectangle)) .outer-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:450px;min-height:60px;margin-top:4.25rem;border-radius:0.375rem;-webkit-box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2));box-shadow:var(--toast-shadow, 0 0.3125rem 1.875rem 0 rgba(40, 47, 54, 0.2))}:host(.web:not(.rounded-rectangle)) .outer-container .message{margin:0 0 0 var(--spacing-16, 1rem)}:host(.web:not(.rounded-rectangle)) .outer-container .button{margin-bottom:0}:host(.web.global-actions) .outer-container{padding:0;color:var(--stable, #adadad)}:host(.web.global-actions) .outer-container .count-container{padding-left:var(--spacing-16, 1rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .text-container{padding:var(--spacing-08, 0.5rem);color:var(--app-color, #5a30f4)}:host(.web.global-actions) .outer-container .extra-button:last-child{margin-left:var(--spacing-08, 0.5rem);padding-left:var(--spacing-08, 0.5rem);border-left:solid var(--border-width-01, 0.0625rem) var(--stable-light, #f1f1f1);border-radius:0}:host(.web.top.progress) .outer-container .message{display:block;white-space:nowrap}:host(.web.top.header) .outer-container{border-bottom:none}:host(.web.top.header) .outer-container .icon-container{margin-bottom:0}:host(.web.bottom){border-radius:0.375rem}:host(.web.bottom) .outer-container{-ms-flex-item-align:end;align-self:flex-end;margin-top:0;margin-bottom:var(--spacing-16, 1rem);overflow:visible}:host(.web.bottom) .outer-container .count-container{border-radius:0.375rem 0 0 0.375rem}:host(.block) .outer-container{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;max-height:var(--spacing-48, 3rem);border-bottom:none}:host(.block.iphone-x){min-height:var(--spacing-64, 4rem)}:host(.form-creator) .outer-container{padding:0;background:var(--stable-light, #f1f1f1);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0) !important}:host(.form-creator) .outer-container .text-container{padding-left:var(--spacing-16, 1rem)}:host(.form-creator) .outer-container .extra-button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;line-height:0.5rem}:host(.form-creator) .outer-container .extra-button.context-menu:last-child{margin-left:0;padding-left:0}:host(.form-creator) .outer-container .icon-container{padding-left:var(--spacing-08, 0.5rem)}:host(.media){--media-size:48px}:host(.media) yoo-truncate{--max-lines:2}:host(.media) .right-media-container{width:var(--media-size);height:var(--media-size)}:host(.photo-actions) .outer-container{min-height:auto;margin-top:var(--spacing-08, 0.5rem);padding:var(--spacing-08, 0.5rem) var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem);background-color:var(--app-color, #5a30f4)}:host(.photo-actions) .outer-container .text-container{color:var(--light, #ffffff)}:host(.photo-actions) .outer-container yoo-icon{font-size:var(--font-size-14, 0.875rem)}:host(.photo-actions) .outer-container yoo-icon.close{min-height:initial;padding:var(--spacing-02, 0.125rem);color:var(--app-color, #5a30f4);font-size:var(--font-size-14, 0.875rem);background:var(--light, #ffffff);border-radius:50%}:host(.photo-actions) .outer-container .button{padding:0 var(--spacing-16, 1rem)}:host(.photo-actions) .outer-container .button:not(:last-of-type){border-right:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning) .outer-container{background:var(--warning, #ed6e33);border:none}:host(.form-creator.warning) .outer-container .text-container{padding-top:var(--spacing-16, 1rem);padding-bottom:var(--spacing-16, 1rem);color:var(--light, #ffffff);font-size:var(--font-size-14, 0.875rem)}:host(.form-creator.warning) .outer-container .button-container.close-icon-divider{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:3rem;border-left:var(--border-width-01, 0.0625rem) solid var(--light-40, rgba(255, 255, 255, 0.4))}:host(.form-creator.warning.translate-edit) .outer-container{overflow:hidden;background-color:var(--stable-light, #f1f1f1);border:none !important}:host(.form-creator.warning.translate-edit) .outer-container::before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:var(--warning-20, rgba(237, 110, 51, 0.2));content:\"\"}:host(.form-creator.warning.translate-edit) .outer-container .close-icon-divider{border-left-color:var(--warning-40, rgba(237, 110, 51, 0.4))}:host(.form-creator.warning.translate-edit) .outer-container .text-container{color:var(--dark-80, rgba(0, 0, 0, 0.8))}:host(.form-creator.warning.web) .outer-container{width:37.5rem}:host(.form-creator.warning.translate){margin-top:var(--spacing-32, 2rem)}:host(.form-creator.warning.translate) .outer-container yoo-icon{margin:0 var(--spacing-16, 1rem);cursor:pointer}:host(.form-creator.warning.translate) .outer-container .light{cursor:pointer}:host(.form){display:block;overflow:hidden}:host(.form) .outer-container{position:initial;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-height:unset;padding:var(--spacing-04, 0.25rem);font-size:var(--font-size-12, 0.75rem);border:none;border-radius:0.375rem;-webkit-box-shadow:none !important;box-shadow:none !important}:host(.rounded-rectangle) .outer-container{margin:var(--spacing-16, 1rem) var(--spacing-16, 1rem) 0 var(--spacing-16, 1rem);border-radius:var(--border-radius-08, 0.5rem)}:host(.bg-app-color) .outer-container{background:var(--app-color, #5a30f4)}:host(.bg-app-color) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-app-color) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color) .outer-container .button-container .success,:host(.bg-app-color) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-app-color-10) .outer-container{background:var(--app-color-10, rgba(90, 48, 244, 0.1))}:host(.bg-app-color-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container{padding:0 1rem}:host(.bg-app-color-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-app-color-10) .outer-container .button-container .success,:host(.bg-app-color-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger) .outer-container{background:var(--danger, #d44333)}:host(.bg-danger) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-danger) .outer-container .button-container{padding:0 1rem}:host(.bg-danger) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger) .outer-container .button-container .success,:host(.bg-danger) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-danger-10) .outer-container{background:var(--danger-10, rgba(212, 67, 51, 0.1))}:host(.bg-danger-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container{padding:0 1rem}:host(.bg-danger-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-danger-10) .outer-container .button-container .success,:host(.bg-danger-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-energized) .outer-container{background:var(--energized, #ffc043)}:host(.bg-energized) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-energized) .outer-container .button-container{padding:0 1rem}:host(.bg-energized) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-energized) .outer-container .button-container .success,:host(.bg-energized) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-energized-10) .outer-container{background:var(--energized-10, rgba(255, 192, 67, 0.1))}:host(.bg-energized-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-energized-10) .outer-container .button-container{padding:0 1rem}:host(.bg-energized-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-energized-10) .outer-container .button-container .success,:host(.bg-energized-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning) .outer-container{background:var(--warning, #ed6e33)}:host(.bg-warning) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-warning) .outer-container .button-container{padding:0 1rem}:host(.bg-warning) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning) .outer-container .button-container .success,:host(.bg-warning) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning-10) .outer-container{background:var(--warning-10, rgba(237, 110, 51, 0.1))}:host(.bg-warning-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container{padding:0 1rem}:host(.bg-warning-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning-10) .outer-container .button-container .success,:host(.bg-warning-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning-20) .outer-container{background:var(--warning-20, rgba(237, 110, 51, 0.2))}:host(.bg-warning-20) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-warning-20) .outer-container .button-container{padding:0 1rem}:host(.bg-warning-20) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning-20) .outer-container .button-container .success,:host(.bg-warning-20) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-warning-40) .outer-container{background:var(--warning-40, rgba(237, 110, 51, 0.4))}:host(.bg-warning-40) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-warning-40) .outer-container .button-container{padding:0 1rem}:host(.bg-warning-40) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-warning-40) .outer-container .button-container .success,:host(.bg-warning-40) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-success) .outer-container{background:var(--success, #3aa76d)}:host(.bg-success) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--light, #ffffff)}:host(.bg-success) .outer-container .button-container{padding:0 1rem}:host(.bg-success) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-success) .outer-container .button-container .success,:host(.bg-success) .outer-container .button-container .app-color{color:var(--light, #ffffff)}:host(.bg-success-10) .outer-container{background:var(--success-10, rgba(58, 167, 109, 0.1))}:host(.bg-success-10) .outer-container .text-container{-ms-flex:1;flex:1;color:var(--dark, #000000)}:host(.bg-success-10) .outer-container .button-container{padding:0 1rem}:host(.bg-success-10) .outer-container .button-container .energized{color:var(--dark, #000000)}:host(.bg-success-10) .outer-container .button-container .success,:host(.bg-success-10) .outer-container .button-container .app-color{color:var(--light, #ffffff)}";
 
 const LIFECYCLE_MAP = {
   ionToastDidPresent: 'ionViewDidEnter',
@@ -154,7 +154,7 @@ const YooToastComponent = class {
         header: this.position !== 'bottom' && !this.isFormField,
         fullscreen: this.fullscreen,
         ...getAppContext(this.host)
-      } }, h("yoo-swipe-container", { onSwipedUp: () => this.onSwipeUp(), onClick: () => this.onClosableSwipeClick() }, h("div", { ref: (el) => (this.outerContainerDiv = el), class: { 'outer-container': true, 'iphone-x': isIphoneX() }, style: { 'z-index': (20000 + this.overlayId).toString() } }, this.count > -1 && this.renderCount(), this.image && this.renderImage(), this.icon && !this.image && this.renderIcon(), h("div", { class: { 'text-container': true, 'full-width': !this.closable, 'sub-messages': ((_a = this.subMessages) === null || _a === void 0 ? void 0 : _a.length) > 0 } }, h("yoo-truncate", { maxLength: this.maxLength, content: translateMulti(this.message) }), (_b = this.subMessages) === null || _b === void 0 ? void 0 :
+      } }, h("yoo-swipe-container", { onSwipedUp: () => this.onSwipeUp(), onClick: () => this.onClosableSwipeClick() }, h("div", { ref: (el) => (this.outerContainerDiv = el), class: { 'outer-container': true, 'iphone-x': isIphoneX() }, style: { 'z-index': (MODAL_BASE_ZINDEX + this.overlayId).toString() } }, this.count > -1 && this.renderCount(), this.image && this.renderImage(), this.icon && !this.image && this.renderIcon(), h("div", { class: { 'text-container': true, 'full-width': !this.closable, 'sub-messages': ((_a = this.subMessages) === null || _a === void 0 ? void 0 : _a.length) > 0 } }, h("yoo-truncate", { maxLength: this.maxLength, content: translateMulti(this.message) }), (_b = this.subMessages) === null || _b === void 0 ? void 0 :
       _b.map((subMessage) => {
         return h("yoo-truncate", { maxLength: this.maxLength, content: translateMulti(subMessage) });
       }), this.link && h("span", { class: "link", innerHTML: translateMulti(this.link) }), this.progressEvent && (this.closable !== false || this.showCloseButton) && this.renderCloseButton()), this.rightMediaSrc && this.rendeMediaImage(), this.extraButtons &&

package/dist/esm/yoo-tooltip.entry.js

@@ -1,14 +1,14 @@
-import { r as registerInstance, i as createEvent, j as Build, f as forceUpdate, h, e as Host, g as getElement } from './index-54cb3c5d.js';
-import './index-945da793.js';
-import { R as ROUND_ARROW, t as tippy } from './tippy.esm-5581a7f9.js';
-import { k as focusContentEditable } from './form-input-helpers-44b4a1a8.js';
-import { q as isWeb, U as isNullOrUndefined, v as findParent, a4 as enableKeyboardResize, t as translate } from './overlays-2b1f8cb5.js';
-import './lodash-bf91c7a4.js';
-import './index-efbd87e6.js';
-import './common-helpers-246a4085.js';
+import { r as registerInstance, i as createEvent, j as Build, f as forceUpdate, h, e as Host, g as getElement } from './index-becca019.js';
+import './index-4bc6078a.js';
+import { R as ROUND_ARROW, t as tippy } from './tippy.esm-cef271f0.js';
+import { k as focusContentEditable } from './form-input-helpers-48580c4a.js';
+import { A as isWeb, X as isNullOrUndefined, Q as findParent, ab as enableKeyboardResize, t as translate } from './overlays-ccc6076c.js';
+import './lodash-f6e59a8e.js';
+import './index-e7f48bcb.js';
+import './common-helpers-fe634d0d.js';
 import './_commonjsHelpers-f4d11124.js';
 
-const tooltipCss = ".tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{display:block}:host .editable-content,:host .request-access{display:none}";
+const tooltipCss = ".tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.hidden{display:none !important}.flex{display:-ms-flexbox !important;display:flex !important}.block{display:block !important}:host{display:block}:host .editable-content,:host .request-access{display:none}:host([hidden]){display:none}";
 
 const YooTooltipComponent = class {
   constructor(hostRef) {