@yoobic/yobi 8.1.17 → 8.2.0-10

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

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-19d6d7b7.js');
-const index$1 = require('./index-29dfbe7a.js');
-const commonHelpers = require('./common-helpers-7b83d84d.js');
+const index = require('./index-c8609d4f.js');
+const index$1 = require('./index-a5ed34bd.js');
+const commonHelpers = require('./common-helpers-276afcde.js');
 const dimensionsHelpers = require('./dimensions-helpers-54685523.js');
 require('./lodash-597bda6d.js');
 require('./_commonjsHelpers-94df2ea7.js');
-require('./index-dc606380.js');
+require('./index-1c7eb28e.js');
 
-const loginCss = ":host{display:block;width:100%;height:100%}:host yoo-form-input-container:first-of-type{margin-bottom:1rem}:host p{margin:0}:host video{width:100%;-o-object-fit:cover;object-fit:cover}:host .inner-container{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}:host .login-button{margin-top:var(--spacing-16, 1rem)}:host .powered-by{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:var(--font-size-12, 0.75rem)}:host .powered-by.light{color:var(--light, #ffffff)}:host .powered-by.dark{color:var(--dark, #000000)}:host .powered-by *{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .powered-by *+*{margin-top:var(--spacing-04, 0.25rem)}:host .powered-by img{margin:0 var(--spacing-04, 0.25rem)}:host .powered-by [hidden]{display:none}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .outer-container .left-panel,:host .outer-container .right-panel{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden;background-color:var(--light, #ffffff)}:host .outer-container .left-panel yoo-banner,:host .outer-container .right-panel yoo-banner{z-index:2}:host .outer-container .left-panel .content-container,:host .outer-container .right-panel .content-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:100%}:host .outer-container .left-panel .content-container .content,:host .outer-container .right-panel .content-container .content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .left-panel .content-container .header,:host .outer-container .left-panel .content-container .footer,:host .outer-container .right-panel .content-container .header,:host .outer-container .right-panel .content-container .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:80%;padding:0 2rem}:host .outer-container .left-panel .background,:host .outer-container .right-panel .background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-repeat:no-repeat;background-position-x:50%;background-size:cover}:host .outer-container .left-panel .background-overlay,:host .outer-container .right-panel .background-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background-color:var(--dark, #000000);opacity:0.5}:host .outer-container .left-panel{-ms-flex:0 0 25rem;flex:0 0 25rem;color:var(--light, #ffffff)}:host .outer-container .left-panel.border{border-right:var(--border-width-01, 0.0625rem) solid var(--stable-light, #f1f1f1)}:host .outer-container .left-panel video{position:absolute;height:100%}:host .outer-container .left-panel .content-container{z-index:2}:host .outer-container .left-panel .content-container .header{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start}:host .outer-container .left-panel .content-container .content{font-size:var(--font-size-18, 1.125rem)}:host .outer-container .left-panel .content-container .content .title-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem;font-size:var(--font-size-14, 0.875rem)}:host .outer-container .left-panel .content-container .content .subtitle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0 2rem;letter-spacing:0.0625rem;text-align:center}:host .outer-container .left-panel .content-container .footer{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}:host .outer-container .left-panel .text-container{padding-top:2rem;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem);text-align:center}:host .outer-container .right-panel{width:100%;height:100%;color:var(--text-color, #807f83)}:host .outer-container .right-panel yoo-alert{width:100%}:host .outer-container .right-panel.ios yoo-banner{--margin-top-inner-container:0.6315rem}:host .outer-container .right-panel .content-container .header{-ms-flex-pack:end;justify-content:flex-end}:host .outer-container .right-panel .content-container .header.no-padding{padding-top:0.375rem !important}:host .outer-container .right-panel .content-container .header.reset{-ms-flex-pack:justify;justify-content:space-between}:host .outer-container .right-panel .content-container .header.iphone-x{padding-top:3rem !important}:host .outer-container .right-panel .content-container .header .close{width:1.875rem;height:1.875rem;border:solid var(--border-width-01, 0.0625rem) var(--stable, #adadad);border-radius:var(--spacing-16, 1rem);opacity:0}:host .outer-container .right-panel .content-container .header .close:hover{cursor:pointer}:host .outer-container .right-panel .content-container .header .logo{display:-ms-flexbox;display:flex;padding-right:1rem}:host .outer-container .right-panel .content-container .header .logo.hide{display:none}:host .outer-container .right-panel .content-container .content{width:100%}:host .outer-container .right-panel .content-container .content .login-title{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding-bottom:0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .outer-container .right-panel .content-container .content .login-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;margin:auto}:host .outer-container .right-panel .content-container .content .login-container .login-subtitle{padding-bottom:2rem}:host .outer-container .right-panel .content-container .content .login-container .login-button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}:host .outer-container .right-panel .content-container .content .login-container-mobile{width:calc(100% - 4rem);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0 2rem;-webkit-transition:0.3s;transition:0.3s}:host .outer-container .right-panel .content-container .content .login-container-mobile.unfocused{margin-top:10%}:host .outer-container .right-panel .content-container .content .login-container-mobile.iphone-se-focus{margin-bottom:10rem}:host .outer-container .right-panel .content-container .content .login-container-mobile .login-button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--spacing-16, 1rem);-webkit-transition:0.3s;transition:0.3s}:host .outer-container .right-panel .content-container .content .login-container-mobile .login-button.device-padding{margin-top:var(--spacing-08, 0.5rem)}:host .outer-container .right-panel .content-container .footer{width:100%}:host .outer-container .right-panel .content-container .footer.iphone-x{padding-bottom:var(--spacing-16, 1rem)}:host .outer-container .right-panel .content-container .video-header-container-mobile{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:80%;padding:0 2rem;text-align:center}:host .outer-container .right-panel .content-container .video-header-container-mobile:not(.hide):not(.focused){min-height:120px}:host .outer-container .right-panel .content-container .video-header-container-mobile.hide{display:none}:host .outer-container .right-panel .content-container .video-header-container-mobile .auto-margin{margin:auto}:host .outer-container .right-panel .content-container .video-header-container-mobile .text{position:absolute;top:0;left:2rem;margin-bottom:1.875rem;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem);letter-spacing:normal;text-align:left;text-transform:initial;opacity:0}:host .outer-container .right-panel .content-container .video-header-container-mobile .text.iphone-5{margin-bottom:0}:host .outer-container .right-panel .background{position:absolute;z-index:0;min-width:100%;min-height:100%;-webkit-filter:blur(0.15rem);filter:blur(0.15rem)}:host .outer-container .right-panel.video-background{color:var(--light, #ffffff);background-color:var(--dark-40, rgba(0, 0, 0, 0.4))}@-webkit-keyframes show{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}@keyframes show{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}:host .outer-container .right-panel.video-background video{position:absolute;min-width:100%;min-height:100%;-webkit-filter:blur(0.15rem);filter:blur(0.15rem)}:host .outer-container .right-panel.video-background video.android{visibility:hidden;opacity:0;-webkit-animation:show 500ms forwards;animation:show 500ms forwards;-webkit-animation-delay:1s;animation-delay:1s}:host .outer-container .right-panel.video-background .content-container .login-container-mobile yoo-form-input-container yoo-form-input{--input-text-color:cssvar(light) !important}:host .outer-container .right-panel.video-background .content-container .login-container-mobile yoo-form-input-container yoo-form-input.has-invalid-format{margin-top:0}:host(.web) .outer-container .left-panel .content-container .footer,:host(.web) .outer-container .left-panel .content-container .header,:host(.web) .outer-container .right-panel .content-container .footer,:host(.web) .outer-container .right-panel .content-container .header{height:6rem}:host(.web) .outer-container .left-panel .content-container .subtitle-container,:host(.web) .outer-container .right-panel .content-container .subtitle-container{padding:0 3rem;font-weight:300;font-size:var(--font-size-14, 0.875rem);line-height:1.3125rem;letter-spacing:normal}:host(.web) .outer-container .left-panel .content-container .subtitle-container b,:host(.web) .outer-container .right-panel .content-container .subtitle-container b{font-size:var(--font-size-18, 1.125rem);text-transform:uppercase}:host(.web) .outer-container .left-panel .content-container .footer,:host(.web) .outer-container .right-panel .content-container .footer{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;font-size:var(--font-size-14, 0.875rem)}:host(.web) .outer-container .left-panel .content-container .header{-ms-flex-pack:center;justify-content:center}:host(.web) .outer-container .left-panel .content-container .header .logo img{height:2rem}:host(.web) .outer-container .left-panel .content-container .header .logo.big img{height:6rem;margin-top:4rem}:host(.web) .outer-container .right-panel .content-container .content{max-width:25rem}:host(.web) .outer-container .right-panel .content-container .content .login-container{width:100%;margin:auto}:host(.mobile) .outer-container .right-panel yoo-banner{--padding-top-container:1.325rem}:host(.mobile) .outer-container .right-panel yoo-banner:not(.android){margin-bottom:-1rem}:host(.mobile) .outer-container .right-panel .background-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background-color:var(--dark, #000000);opacity:0.5}:host(.mobile) .outer-container .right-panel .content-container .header.reduce-padding,:host(.mobile) .outer-container .right-panel .content-container .footer.reduce-padding{padding-top:1rem}:host(.mobile) .outer-container .right-panel .content-container .header:not(.android){padding-top:2rem}:host(.mobile) .outer-container .right-panel .content-container .header.android{padding-top:1rem}:host(.mobile) .outer-container .right-panel .content-container .content{z-index:10;-ms-flex-pack:center;justify-content:center;width:100%;max-width:25rem;height:100%}:host(.mobile) .outer-container .right-panel .content-container .content.android{padding-top:0rem}:host(.mobile) .outer-container .right-panel .content-container .content .login-title{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;height:25%}:host(.mobile) .outer-container .right-panel .content-container .content .login-title .inner-title{text-align:center}:host(.mobile) .outer-container .right-panel .content-container .footer.android{padding-top:0}:host(.mobile) .outer-container .right-panel .content-container .footer.hide{display:none}:host(.mobile) .outer-container .right-panel .content-container .footer:not(.android){padding-bottom:1rem}@media (orientation: landscape){:host(.tablet.ios:not(.emulate-preview)) .outer-container .right-panel .content-container .content .video-header-container-mobile.focused{display:none}}";
+const loginCss = ":host{display:block;width:100%;height:100%}:host yoo-form-input-container:first-of-type{margin-bottom:1rem}:host p{margin:0}:host video{width:100%;-o-object-fit:cover;object-fit:cover}:host .inner-container{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}:host .login-button{margin-top:var(--spacing-16, 1rem)}:host .powered-by{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-size:var(--font-size-12, 0.75rem)}:host .powered-by.light{color:var(--light, #ffffff)}:host .powered-by.dark{color:var(--dark, #000000)}:host .powered-by *{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host .powered-by *+*{margin-top:var(--spacing-04, 0.25rem)}:host .powered-by img{margin:0 var(--spacing-04, 0.25rem)}:host .powered-by [hidden]{display:none}:host .outer-container{position:absolute;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}:host .outer-container .left-panel,:host .outer-container .right-panel{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden;background-color:var(--light, #ffffff)}:host .outer-container .left-panel yoo-banner,:host .outer-container .right-panel yoo-banner{--main-color:var(--danger, #d44333);--close-icon-color:var(--light, #ffffff);z-index:2}:host .outer-container .left-panel yoo-banner p,:host .outer-container .right-panel yoo-banner p{padding:var(--spacing-24, 1.5rem)}:host .outer-container .left-panel .content-container,:host .outer-container .right-panel .content-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:100%}:host .outer-container .left-panel .content-container .content,:host .outer-container .right-panel .content-container .content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .outer-container .left-panel .content-container .header,:host .outer-container .left-panel .content-container .footer,:host .outer-container .right-panel .content-container .header,:host .outer-container .right-panel .content-container .footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:80%;padding:0 2rem}:host .outer-container .left-panel .background,:host .outer-container .right-panel .background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-repeat:no-repeat;background-position-x:50%;background-size:cover}:host .outer-container .left-panel .background-overlay,:host .outer-container .right-panel .background-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background-color:var(--dark, #000000);opacity:0.5}:host .outer-container .left-panel{-ms-flex:0 0 25rem;flex:0 0 25rem;color:var(--light, #ffffff)}:host .outer-container .left-panel video{position:absolute;height:100%}:host .outer-container .left-panel .content-container{z-index:2}:host .outer-container .left-panel .content-container .header{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start}:host .outer-container .left-panel .content-container .content{font-size:var(--font-size-18, 1.125rem)}:host .outer-container .left-panel .content-container .content .title-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding-bottom:1.25rem;font-size:var(--font-size-14, 0.875rem)}:host .outer-container .left-panel .content-container .content .subtitle-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0 2rem;letter-spacing:0.0625rem;text-align:center}:host .outer-container .left-panel .content-container .footer{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}:host .outer-container .left-panel .text-container{padding-top:2rem;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-18, 1.125rem);text-align:center}:host .outer-container .right-panel{width:100%;height:100%;color:var(--text-color, #807f83)}:host .outer-container .right-panel yoo-alert{width:100%}:host .outer-container .right-panel.ios yoo-banner{--margin-top-inner-container:0.6315rem}:host .outer-container .right-panel .content-container .header{-ms-flex-pack:end;justify-content:flex-end}:host .outer-container .right-panel .content-container .header.no-padding{padding-top:0.375rem !important}:host .outer-container .right-panel .content-container .header.reset{-ms-flex-pack:justify;justify-content:space-between}:host .outer-container .right-panel .content-container .header.iphone-x{padding-top:3rem !important}:host .outer-container .right-panel .content-container .header .close{width:1.875rem;height:1.875rem;border:solid var(--border-width-01, 0.0625rem) var(--stable, #adadad);border-radius:var(--spacing-16, 1rem);opacity:0}:host .outer-container .right-panel .content-container .header .close:hover{cursor:pointer}:host .outer-container .right-panel .content-container .header .logo{display:-ms-flexbox;display:flex;padding-right:1rem}:host .outer-container .right-panel .content-container .header .logo.hide{display:none}:host .outer-container .right-panel .content-container .content{width:100%}:host .outer-container .right-panel .content-container .content .login-title{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding-bottom:0.5rem;color:var(--dark, #000000);font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem)}:host .outer-container .right-panel .content-container .content .login-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;margin:auto}:host .outer-container .right-panel .content-container .content .login-container .login-subtitle{padding-bottom:2rem}:host .outer-container .right-panel .content-container .content .login-container .login-button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}:host .outer-container .right-panel .content-container .content .login-container-mobile{width:calc(100% - 4rem);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0 2rem;-webkit-transition:0.3s;transition:0.3s}:host .outer-container .right-panel .content-container .content .login-container-mobile.unfocused{margin-top:10%}:host .outer-container .right-panel .content-container .content .login-container-mobile.iphone-se-focus{margin-bottom:10rem}:host .outer-container .right-panel .content-container .content .login-container-mobile .login-button{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--spacing-16, 1rem);-webkit-transition:0.3s;transition:0.3s}:host .outer-container .right-panel .content-container .content .login-container-mobile .login-button.device-padding{margin-top:var(--spacing-08, 0.5rem)}:host .outer-container .right-panel .content-container .footer{width:100%}:host .outer-container .right-panel .content-container .footer.iphone-x{padding-bottom:var(--spacing-16, 1rem)}:host .outer-container .right-panel .content-container .video-header-container-mobile{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:80%;padding:0 2rem;text-align:center}:host .outer-container .right-panel .content-container .video-header-container-mobile:not(.hide):not(.focused){min-height:120px}:host .outer-container .right-panel .content-container .video-header-container-mobile.hide{display:none}:host .outer-container .right-panel .content-container .video-header-container-mobile .auto-margin{margin:auto}:host .outer-container .right-panel .content-container .video-header-container-mobile .text{position:absolute;top:0;left:2rem;margin-bottom:1.875rem;font-weight:var(--font-weight-700, 700);font-size:var(--font-size-28, 1.75rem);letter-spacing:normal;text-align:left;text-transform:initial;opacity:0}:host .outer-container .right-panel .content-container .video-header-container-mobile .text.iphone-5{margin-bottom:0}:host .outer-container .right-panel .background{position:absolute;z-index:0;min-width:100%;min-height:100%;-webkit-filter:blur(0.15rem);filter:blur(0.15rem)}:host .outer-container .right-panel.video-background{color:var(--light, #ffffff);background-color:var(--dark-40, rgba(0, 0, 0, 0.4))}@-webkit-keyframes show{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}@keyframes show{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}:host .outer-container .right-panel.video-background video{position:absolute;min-width:100%;min-height:100%;-webkit-filter:blur(0.15rem);filter:blur(0.15rem)}:host .outer-container .right-panel.video-background video.android{visibility:hidden;opacity:0;-webkit-animation:show 500ms forwards;animation:show 500ms forwards;-webkit-animation-delay:1s;animation-delay:1s}:host .outer-container .right-panel.video-background .content-container .login-container-mobile yoo-form-input-container yoo-form-input{--input-text-color:cssvar(light) !important}:host .outer-container .right-panel.video-background .content-container .login-container-mobile yoo-form-input-container yoo-form-input.has-invalid-format{margin-top:0}:host(.web) .outer-container .left-panel .content-container .footer,:host(.web) .outer-container .left-panel .content-container .header,:host(.web) .outer-container .right-panel .content-container .footer,:host(.web) .outer-container .right-panel .content-container .header{height:6rem}:host(.web) .outer-container .left-panel .content-container .subtitle-container,:host(.web) .outer-container .right-panel .content-container .subtitle-container{padding:0 3rem;font-weight:300;font-size:var(--font-size-14, 0.875rem);line-height:1.3125rem;letter-spacing:normal}:host(.web) .outer-container .left-panel .content-container .subtitle-container b,:host(.web) .outer-container .right-panel .content-container .subtitle-container b{font-size:var(--font-size-18, 1.125rem);text-transform:uppercase}:host(.web) .outer-container .left-panel .content-container .footer,:host(.web) .outer-container .right-panel .content-container .footer{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;font-size:var(--font-size-14, 0.875rem)}:host(.web) .outer-container .left-panel .content-container .header{-ms-flex-pack:center;justify-content:center}:host(.web) .outer-container .left-panel .content-container .header .logo img{height:2rem}:host(.web) .outer-container .left-panel .content-container .header .logo.big img{height:6rem;margin-top:4rem}:host(.web) .outer-container .right-panel .content-container .content{max-width:25rem}:host(.web) .outer-container .right-panel .content-container .content .login-container{width:100%;margin:auto}:host(.mobile) .outer-container .right-panel yoo-banner{--padding-top-container:1.325rem;margin-bottom:-1rem}:host(.mobile) .outer-container .right-panel .background-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background-color:var(--dark, #000000);opacity:0.5}:host(.mobile) .outer-container .right-panel .content-container .header.reduce-padding,:host(.mobile) .outer-container .right-panel .content-container .footer.reduce-padding{padding-top:1rem}:host(.mobile) .outer-container .right-panel .content-container .header:not(.android){padding-top:2rem}:host(.mobile) .outer-container .right-panel .content-container .header.android{padding-top:1rem}:host(.mobile) .outer-container .right-panel .content-container .content{z-index:10;-ms-flex-pack:center;justify-content:center;width:100%;max-width:25rem;height:100%}:host(.mobile) .outer-container .right-panel .content-container .content.android{padding-top:0rem}:host(.mobile) .outer-container .right-panel .content-container .content .login-title{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;height:25%}:host(.mobile) .outer-container .right-panel .content-container .content .login-title .inner-title{text-align:center}:host(.mobile) .outer-container .right-panel .content-container .footer.android{padding-top:0}:host(.mobile) .outer-container .right-panel .content-container .footer.hide{display:none}:host(.mobile) .outer-container .right-panel .content-container .footer:not(.android){padding-bottom:1rem}@media (orientation: landscape){:host(.tablet.ios:not(.emulate-preview)) .outer-container .right-panel .content-container .content .video-header-container-mobile.focused{display:none}}";
 
 const MIN_SCREEN_SIZE_LEFT_PANEL = 900;
 const IPHONE5_HEIGHT = 580;
@@ -312,10 +312,10 @@ const YooLoginComponent = class {
     if (!this.hasVideoBackground()) {
       backStyle = { backgroundImage: `url(${this.backgroundSrc})` };
     }
-    return (index.h("div", { class: { 'left-panel': true, border: !!this.backgroundColor } }, this.backgroundSrc && backStyle ? index.h("div", { class: "background", style: backStyle }) : this.hasVideoBackground() ? this.renderVideo() : null, index.h("div", { class: "background-overlay", style: { background: this.backgroundColor, opacity: ((_a = this.backgroundColor) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? '1' : null } }), index.h("div", { class: "content-container" }, this.renderHeader(), this.renderPanelBody('leftPanel'), index.h("div", { class: { footer: true, android: index$1.isAndroid() } }, this.renderFooter()))));
+    return (index.h("div", { class: "left-panel" }, this.backgroundSrc && backStyle ? index.h("div", { class: "background", style: backStyle }) : this.hasVideoBackground() ? this.renderVideo() : null, index.h("div", { class: "background-overlay", style: { background: this.backgroundColor, opacity: ((_a = this.backgroundColor) === null || _a === void 0 ? void 0 : _a.startsWith('#')) ? '1' : null } }), index.h("div", { class: "content-container" }, this.renderHeader(), this.renderPanelBody('leftPanel'), index.h("div", { class: { footer: true, android: index$1.isAndroid() } }, this.renderFooter()))));
   }
   renderErrorBanner() {
-    return (index.h("yoo-banner", { id: "error-alert", animationName: "sticky_up", class: { 'top danger embedded centered header': true, android: index$1.isAndroid() }, text: this.error, closable: !index$1.isIonic(this.host), link: !index$1.isIonic(this.host) ? 'NEEDHELP' : '', onAlertActionSelected: () => this.onAlertActionSelected(), onAlertClosed: () => this.onAlertClosed() }));
+    return (index.h("yoo-banner", { class: "center sharp", fill: true, closable: !index$1.isIonic(this.host), linkText: !index$1.isIonic(this.host) ? index$1.translate('NEEDHELP') : '', onLinkClick: () => this.onAlertActionSelected(), onCloseClick: () => this.onAlertClosed() }, index.h("p", { slot: "content" }, index$1.translate(this.error))));
   }
   renderRightPanel() {
     let backStyle;