blip-ds 1.135.2 → 1.136.2

package/dist/collection/components/typo/typo.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
 /*
   Font family is Nunito Sans. Its fallback is Helvetica
 */
@@ -17,7 +16,6 @@
 /**
  * Define media query values
  */
-@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
 /*
   Font family is Nunito Sans. Its fallback is Helvetica
 */

package/dist/collection/components/warning/warning.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
 /*
   Font family is Nunito Sans. Its fallback is Helvetica
 */

package/dist/collection/styles/_fonts.scss

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
 
 /*
   Font family is Nunito Sans. Its fallback is Helvetica

package/dist/esm/bds-alert-actions.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-d446bcfd.js';
 
-const alertActionsCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); .alert__actions{width:100%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:relative;padding:12px 16px;-webkit-box-sizing:border-box;box-sizing:border-box}.alert__actions ::slotted(bds-button:nth-child(1)){margin-right:16px !important}";
+const alertActionsCss = ".alert__actions{width:100%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;position:relative;padding:12px 16px;-webkit-box-sizing:border-box;box-sizing:border-box}.alert__actions ::slotted(bds-button:nth-child(1)){margin-right:16px !important}";
 
 let AlertActions = class {
   constructor(hostRef) {

package/dist/esm/bds-alert-body.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-d446bcfd.js';
 
-const alertBodyCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); .alert__body{position:relative;width:100%;padding:12px 16px;margin-bottom:8px;-webkit-box-sizing:border-box;box-sizing:border-box}.alert__body bds-typo{color:#202c44}";
+const alertBodyCss = ".alert__body{position:relative;width:100%;padding:12px 16px;margin-bottom:8px;-webkit-box-sizing:border-box;box-sizing:border-box}.alert__body bds-typo{color:#202c44}";
 
 let AlertBody = class {
   constructor(hostRef) {

package/dist/esm/bds-alert-header.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-d446bcfd.js';
 
-const alertHeaderCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); .alert__header{width:100%;min-height:64px;padding:12px 16px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.alert__header bds-icon{min-width:32px}.alert__header bds-typo{margin-left:8px;color:#ffffff}.alert__header--system{background:#3f7de8}.alert__header--error{background:#ff4c4c}.alert__header--warning{background:#f6a721}.alert__header--delete{background:#ff4c4c}";
+const alertHeaderCss = ".alert__header{width:100%;min-height:64px;padding:12px 16px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.alert__header bds-icon{min-width:32px}.alert__header bds-typo{margin-left:8px;color:#ffffff}.alert__header--system{background:#3f7de8}.alert__header--error{background:#ff4c4c}.alert__header--warning{background:#f6a721}.alert__header--delete{background:#ff4c4c}";
 
 let AlertHeader = class {
   constructor(hostRef) {

package/dist/esm/bds-alert.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-d446bcfd.js';
 
-const alertCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); .alert__dialog{opacity:0;visibility:hidden;background-color:rgba(0, 0, 0, 0.7);width:100%;height:100%;position:fixed;top:0;left:0;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;z-index:80000}.alert__dialog .alert{position:absolute;top:200px;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:424px;border-radius:8px;background:#ffffff;-webkit-box-shadow:0px 4px 10px rgba(51, 51, 51, 0.3);box-shadow:0px 4px 10px rgba(51, 51, 51, 0.3);overflow:hidden;position:relative}.alert__dialog--open{opacity:1;visibility:visible}";
+const alertCss = ".alert__dialog{opacity:0;visibility:hidden;background-color:rgba(0, 0, 0, 0.7);width:100%;height:100%;position:fixed;top:0;left:0;-webkit-transition:opacity 0.3s ease-in-out;transition:opacity 0.3s ease-in-out;z-index:80000}.alert__dialog .alert{position:absolute;top:200px;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);max-width:424px;border-radius:8px;background:#ffffff;-webkit-box-shadow:0px 4px 10px rgba(51, 51, 51, 0.3);box-shadow:0px 4px 10px rgba(51, 51, 51, 0.3);overflow:hidden;position:relative}.alert__dialog--open{opacity:1;visibility:visible}";
 
 let BdsAlert = class {
   constructor(hostRef) {

package/dist/esm/bds-autocomplete.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, g as getElement } from './index-d446bcfd.js';
 
-const autocompleteCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); :host{display:block}.select{position:relative;outline:none}.select__icon{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__icon bds-icon{margin-left:10px}.select .icon-hidden{visibility:hidden}.select__options{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options::-webkit-scrollbar{width:16px;background-color:transparent}.select__options::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";
+const autocompleteCss = ":host{display:block}.select{position:relative;outline:none}.select__icon{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__icon bds-icon{margin-left:10px}.select .icon-hidden{visibility:hidden}.select__options{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options::-webkit-scrollbar{width:16px;background-color:transparent}.select__options::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";
 
 let BdsAutocomplete = class {
   constructor(hostRef) {

package/dist/esm/bds-avatar-group.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, f as Host } from './index-d446bcfd.js';
 
-const avatarGroupCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); .avatar__group{display:-ms-flexbox;display:flex}.avatar__group>*:nth-child(1){z-index:5}.avatar__group>*:nth-child(2){z-index:4}.avatar__group>*:nth-child(3){z-index:3}.avatar__group>*:nth-child(4){z-index:2}.avatar__group>*:nth-child(5){z-index:1}.avatar__group .avatar{border:2px solid #ffffff;position:relative}.avatar__group__size--extra-small{margin-left:4px}.avatar__group__size--extra-small>*{margin-left:-4px}.avatar__group__size--extra-small .avatar{width:32px;height:32px}.avatar__group__size--small{margin-left:8px}.avatar__group__size--small>*{margin-left:-8px}.avatar__group__size--small .avatar{width:40px;height:40px}.avatar__group__size--standard{margin-left:12px}.avatar__group__size--standard>*{margin-left:-12px}.avatar__group__size--standard .avatar{width:56px;height:56px}";
+const avatarGroupCss = ".avatar__group{display:-ms-flexbox;display:flex}.avatar__group>*:nth-child(1){z-index:5}.avatar__group>*:nth-child(2){z-index:4}.avatar__group>*:nth-child(3){z-index:3}.avatar__group>*:nth-child(4){z-index:2}.avatar__group>*:nth-child(5){z-index:1}.avatar__group .avatar{border:2px solid #ffffff;position:relative}.avatar__group__size--extra-small{margin-left:4px}.avatar__group__size--extra-small>*{margin-left:-4px}.avatar__group__size--extra-small .avatar{width:32px;height:32px}.avatar__group__size--small{margin-left:8px}.avatar__group__size--small>*{margin-left:-8px}.avatar__group__size--small .avatar{width:40px;height:40px}.avatar__group__size--standard{margin-left:12px}.avatar__group__size--standard>*{margin-left:-12px}.avatar__group__size--standard .avatar{width:56px;height:56px}";
 
 let AvatarGroup = class {
   constructor(hostRef) {

package/dist/esm/bds-avatar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-d446bcfd.js';
 
-const avatarCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); .avatar{margin:0;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-style:normal;font-weight:normal;margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0;border:0;border-radius:72px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden}.avatar__text{color:#ffffff}.avatar__icon{color:#8ca0b3}.avatar__img{width:100%;height:auto}.avatar__ellipsis{color:#505f79}.avatar__btn{position:relative;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.avatar__btn__img{width:100%;height:auto}.avatar__btn__text{color:#ffffff;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__icon{color:#8ca0b3;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;background-color:rgba(80, 95, 121, 0.5);cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb__icon{color:#ffffff}.avatar__btn__name{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name__icon{color:#ffffff}.avatar__btn__empty{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__empty__icon{color:#8ca0b3}.avatar__size--extra-small{width:32px;height:32px}.avatar__size--small{width:40px;height:40px}.avatar__size--standard{width:56px;height:56px}.avatar__size--large{width:64px;height:64px}.avatar__size--extra-large{width:72px;height:72px}.avatar__color--neutral{background-color:#d2dfe6}.avatar__color--purple{background-color:#c226fb}.avatar__color--brand{background-color:#00c6d7}.avatar__color--green{background-color:#c226fb}.avatar__color--brown{background-color:#f6a721}.avatar__color--pink{background-color:#fb5a8b}.avatar:hover .avatar__btn__thumb{opacity:1}.avatar:hover .avatar__btn__text{opacity:0}.avatar:hover .avatar__btn__icon{opacity:0}.avatar:hover .avatar__btn__name{opacity:1}.avatar:hover .avatar__btn__empty{opacity:1}";
+const avatarCss = ".avatar{margin:0;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-style:normal;font-weight:normal;margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0;border:0;border-radius:72px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden}.avatar__text{color:#ffffff}.avatar__icon{color:#8ca0b3}.avatar__img{width:100%;height:auto}.avatar__ellipsis{color:#505f79}.avatar__btn{position:relative;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.avatar__btn__img{width:100%;height:auto}.avatar__btn__text{color:#ffffff;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__icon{color:#8ca0b3;opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;background-color:rgba(80, 95, 121, 0.5);cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb__icon{color:#ffffff}.avatar__btn__name{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name__icon{color:#ffffff}.avatar__btn__empty{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__empty__icon{color:#8ca0b3}.avatar__size--extra-small{width:32px;height:32px}.avatar__size--small{width:40px;height:40px}.avatar__size--standard{width:56px;height:56px}.avatar__size--large{width:64px;height:64px}.avatar__size--extra-large{width:72px;height:72px}.avatar__color--neutral{background-color:#d2dfe6}.avatar__color--purple{background-color:#c226fb}.avatar__color--brand{background-color:#00c6d7}.avatar__color--green{background-color:#c226fb}.avatar__color--brown{background-color:#f6a721}.avatar__color--pink{background-color:#fb5a8b}.avatar:hover .avatar__btn__thumb{opacity:1}.avatar:hover .avatar__btn__text{opacity:0}.avatar:hover .avatar__btn__icon{opacity:0}.avatar:hover .avatar__btn__name{opacity:1}.avatar:hover .avatar__btn__empty{opacity:1}";
 
 let BdsAvatar = class {
   constructor(hostRef) {

package/dist/esm/bds-banner-link.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-d446bcfd.js';
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-d446bcfd.js';
 
-const bannerLinkCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); :Host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;text-decoration:underline;white-space:nowrap;margin-left:16px}";
+const bannerLinkCss = ":Host{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;text-decoration:underline;white-space:nowrap;margin-left:16px;-ms-flex-order:2;order:2}";
 
 let BannerLink = class {
   constructor(hostRef) {
@@ -8,10 +8,12 @@ let BannerLink = class {
     this.bdsBannerLink = createEvent(this, "bdsBannerLink", 7);
     this._buttonClickHandler = () => {
       this.bdsBannerLink.emit(this.el);
+      window.open(this.link);
     };
   }
   render() {
-    return (h(Host, { class: { banner__link: true }, onClick: () => this._buttonClickHandler() }, h("slot", null)));
+    const Element = 'a';
+    return (h(Element, { class: { banner__link: true }, onClick: () => this._buttonClickHandler() }, h("slot", null)));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/bds-banner.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-d446bcfd.js';
 
-const bannerCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); :host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-size:0.875rem;font-weight:700}:host .banner__holder{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%;padding:16px;min-height:40px;color:#212a3c}:host .banner__holder--context--inside{border-radius:8px}:host .banner__holder--align--left{-ms-flex-pack:start;justify-content:flex-start}:host .banner__holder--align--right{-ms-flex-pack:start;justify-content:flex-start}:host .banner__holder--warning{background-color:#fff6a8}:host .banner__holder--system{background-color:#b3d4ff}:host .banner__holder--info{background-color:#80e3eb}:host .banner__holder--error{background-color:#ffa5a5}:host .banner__content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%}:host .banner__content--left{-ms-flex-pack:start;justify-content:flex-start}:host .banner__content--center{-ms-flex-pack:start;justify-content:flex-start}:host .banner__content--right{-ms-flex-pack:start;justify-content:flex-start}:host .banner__content .slot{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin-left:8px;width:100%}:host .banner__action{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host .banner__action .close{cursor:pointer;display:-ms-flexbox;display:flex;margin-left:8px}.space_left{display:-ms-flexbox;display:flex}:host(.banner--hide){display:none}";
+const bannerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-size:0.875rem;font-weight:700}:host .banner__holder{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%;padding:8px 16px;min-height:40px;color:#212a3c}:host .banner__holder--context--inside{border-radius:8px}:host .banner__holder--align--left{-ms-flex-pack:start;justify-content:flex-start}:host .banner__holder--align--right{-ms-flex-pack:start;justify-content:flex-start}:host .banner__holder--warning{background-color:#fff6a8}:host .banner__holder--system{background-color:#b3d4ff}:host .banner__holder--info{background-color:#80e3eb}:host .banner__holder--error{background-color:#ffa5a5}:host .banner__content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%}:host .banner__content--left{-ms-flex-pack:start;justify-content:flex-start}:host .banner__content--center{-ms-flex-pack:start;justify-content:flex-start}:host .banner__content--right{-ms-flex-pack:start;justify-content:flex-start}:host .banner__content .slot{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin-left:8px;width:100%;color:#212a3c}:host .banner__action{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}:host .banner__action .close{cursor:pointer;display:-ms-flexbox;display:flex;margin-left:8px}.space_left{display:-ms-flexbox;display:flex}:host(.banner--hide){display:none}";
 
 let Banner = class {
   constructor(hostRef) {