@yoobic/yobi 8.3.0-14 → 8.3.0-15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/cjs/yoo-copyright.cjs.entry.js +1 -1
  2. package/dist/cjs/yoo-login.cjs.entry.js +25 -19
  3. package/dist/cjs/yoo-reset-password.cjs.entry.js +2 -2
  4. package/dist/cjs/yoo-user-profile.cjs.entry.js +1 -1
  5. package/dist/collection/feature-platform/login/login/login.css +30 -4
  6. package/dist/collection/feature-platform/login/login/login.js +21 -18
  7. package/dist/collection/feature-platform/login/login/parts/Footer.js +1 -1
  8. package/dist/collection/feature-platform/login/login/parts/Header.js +1 -1
  9. package/dist/collection/feature-platform/login/login/parts/LoginForm.js +5 -3
  10. package/dist/collection/feature-platform/login/login/parts/LoginInput.js +1 -1
  11. package/dist/collection/feature-platform/login/login/parts/LoginOptions.js +4 -2
  12. package/dist/collection/feature-platform/login/reset-password/reset-password.js +3 -3
  13. package/dist/collection/feature-platform/menu/copyright/copyright.js +1 -1
  14. package/dist/collection/feature-platform/menu/user-profile/user-profile.js +1 -1
  15. package/dist/design-system/yoo-copyright.entry.js +1 -1
  16. package/dist/design-system/yoo-login.entry.js +25 -19
  17. package/dist/design-system/yoo-reset-password.entry.js +2 -2
  18. package/dist/design-system/yoo-user-profile.entry.js +1 -1
  19. package/dist/esm/yoo-copyright.entry.js +1 -1
  20. package/dist/esm/yoo-login.entry.js +25 -19
  21. package/dist/esm/yoo-reset-password.entry.js +2 -2
  22. package/dist/esm/yoo-user-profile.entry.js +1 -1
  23. package/dist/types/feature-platform/login/login/parts/LoginForm.d.ts +1 -0
  24. package/dist/types/feature-platform/login/login/parts/LoginOptions.d.ts +1 -0
  25. package/dist/types/feature-platform/login/login/types/index.d.ts +1 -1
  26. package/package.json +1 -1
package/dist/design-system/yoo-copyright.entry.js CHANGED
@@ -12,7 +12,7 @@ const YooCopyrightComponent = class {
12
12
  registerInstance(this, hostRef);
13
13
  }
14
14
  render() {
15
- return h(Host, null, translate('POWEREDBY'), h("img", { src: "assets/logo/yoobic.svg", height: "12.8", alt: "YOOBIC Logo" }), "YOOBIC");
15
+ return h(Host, null, translate('YOOBICPOWEREDBY'), h("img", { src: "assets/logo/yoobic.svg", height: "12.8", alt: "YOOBIC Logo" }), "YOOBIC");
16
16
  }
17
17
  };
18
18
  YooCopyrightComponent.style = copyrightCss;
package/dist/design-system/yoo-login.entry.js CHANGED
@@ -19,7 +19,7 @@ const Background = ({ hasBackgroundMedia, image }) => {
19
19
  };
20
20
 
21
21
  const Footer = ({ textColor, copyrightMessage, version, hasCustomBackground, onClick }) => (h("footer", { onClick: onClick, style: { color: hasCustomBackground ? textColor : 'inherit' } },
22
- h("p", { class: "powered-by" }, translate('POWEREDBY')),
22
+ h("p", { class: "powered-by" }, translate('YOOBICPOWEREDBY')),
23
23
  h("p", { class: "copyright" }, copyrightMessage),
24
24
  h("p", null, "|"),
25
25
  h("p", { class: "version" }, `V${version}`)));
@@ -39,7 +39,7 @@ const Header = ({ logo, title, textColor, error, closeClick }) => ([
39
39
  'web': isWeb()
40
40
  } },
41
41
  h("p", null, translate(error)),
42
- h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('NEEDHELP')))),
42
+ h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP')))),
43
43
  h("header", { class: "header" },
44
44
  h("img", { src: logo, alt: "app logo" }),
45
45
  h("h1", { style: { color: textColor } }, title))
@@ -56,13 +56,13 @@ const LoginInput = ({ style, label, inputType, isFocused, bindReference, onIconC
56
56
  h("div", { class: `inner-input-container ${inputType}` },
57
57
  h("div", { class: "icon-prefix", onMouseDown: (e) => e.preventDefault(), onClick: onIconClicked },
58
58
  h("yoo-icon", { name: inputType === 'username' ? 'email' : 'password', size: inputSize === 'medium' ? 'small' : 'medium', color: !isWhitelabel ? 'app-color' : 'dark' })),
59
- h("input", { id: `${inputType}-input`, type: inputType === 'username' || showPassword ? 'text' : 'password', name: inputType, ref: (el) => bindReference(el, inputType), autoCapitalize: "none", autoComplete: inputType === 'username' ? inputType : 'current-password', placeholder: translate(`${inputType === 'username' ? 'USERNAME' : 'PASSWORD'}ENTER`), required: true, onBlur: () => onInputBlurred(), onChange: (ev) => onInputChanged(ev), onInput: (ev) => onInputChanged(ev), onFocus: () => onInputFocused(), onKeyDown: (ev) => onKeyPress(ev), value: inputValue }),
59
+ h("input", { id: `${inputType}-input`, type: inputType === 'username' || showPassword ? 'text' : 'password', name: inputType, ref: (el) => bindReference(el, inputType), autoCapitalize: "none", autoComplete: inputType === 'username' ? inputType : 'current-password', placeholder: translate(`${inputType === 'username' ? 'YOOBICUSERNAME' : 'YOOBICPASSWORD'}ENTER`), required: true, onBlur: () => onInputBlurred(), onChange: (ev) => onInputChanged(ev), onInput: (ev) => onInputChanged(ev), onFocus: () => onInputFocused(), onKeyDown: (ev) => onKeyPress(ev), value: inputValue }),
60
60
  inputType === 'password' && h("div", { class: 'icon-suffix-focus input-show-icon', onMouseDown: (e) => e.preventDefault(), onClick: () => onShowPassword() },
61
61
  h("yoo-icon", { size: inputSize === 'medium' ? 'small' : 'medium', name: showPassword ? 'offline' : 'eye', color: "stable-alt" })),
62
62
  h("div", { class: `icon-suffix-focus ${inputType}-input-clear-icon`, onMouseDown: (e) => e.preventDefault(), onClick: () => (hasValue ? clearInput() : null) },
63
63
  h("yoo-icon", { size: inputSize === 'medium' ? 'small' : 'medium', name: "cross" })))));
64
64
 
65
- const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputValue, getInputValue, bindReference, clearInput, onIconClicked, focusedInput, host, showPassword, loginButtonRef, onEnterPressed, onInputBlurred, onInputChanged, onInputFocused, onFormSubmit, onShowPassword, helpButtonElement, ssoLoginButtonElement, isWhitelabel, buttonColor }) => {
65
+ const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputValue, getInputValue, bindReference, clearInput, onIconClicked, focusedInput, host, showPassword, loginButtonRef, onEnterPressed, onInputBlurred, onInputChanged, onInputFocused, onFormSubmit, onShowPassword, helpButtonElement, magicButtonElement, ssoLoginButtonElement, isWhitelabel, buttonColor }) => {
66
66
  const inputAndButtonSize = isWeb(host) ? 'medium' : 'large';
67
67
  const loginDisabled = !(!!(getInputValue('username') || '') &&
68
68
  !!(getInputValue('password') || ''));
@@ -78,12 +78,14 @@ const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputVal
78
78
  ? h("form", { autoComplete: "on", id: "login-form", novalidate: true, onSubmit: onFormSubmit },
79
79
  renderInputContainer('username'),
80
80
  renderInputContainer('password'),
81
- helpButtonElement,
81
+ h("div", { class: { 'help-buttons': true, mobile: !isWeb(host) } },
82
+ isWeb(host) && magicButtonElement,
83
+ helpButtonElement),
82
84
  h("input", { id: "default-login-button", class: {
83
85
  [inputAndButtonSize]: true,
84
86
  mobile: !isWeb(host),
85
87
  disabled: loginDisabled
86
- }, ref: loginButtonRef, type: "submit", form: "login-form", name: "doLogin", disabled: loginDisabled, value: translate('LOGIN'), style: buttonColor && !loginDisabled ? { backgroundColor: buttonColor, color: getContrastColor(buttonColor) } : undefined }))
88
+ }, ref: loginButtonRef, type: "submit", form: "login-form", name: "doLogin", disabled: loginDisabled, value: translate('YOOBICLOGIN'), style: buttonColor && !loginDisabled ? { backgroundColor: buttonColor, color: getContrastColor(buttonColor) } : undefined }))
87
89
  : h("div", { class: "sso-only-login" }, ssoLoginButtonElement);
88
90
  };
89
91
 
@@ -92,13 +94,14 @@ const Divider = ({ style }) => (h("div", { id: "divider", style: style },
92
94
  h("p", null, "or"),
93
95
  h("div", null)));
94
96
 
95
- const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBackground, dividerColor, googleLoginButtonElement, ssoLoginButtonElement }) => {
97
+ const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBackground, dividerColor, googleLoginButtonElement, ssoLoginButtonElement, host }) => {
96
98
  if (!ssoOnly) {
97
99
  return (h("div", { class: {
98
100
  'login-options': true,
99
101
  'sso-only': ssoOnly,
100
102
  'hide-google-login': hideGoogleLogin,
101
- 'hide-advanced-login': hideAdvancedLogin
103
+ 'hide-advanced-login': hideAdvancedLogin,
104
+ mobile: !isWeb(host)
102
105
  } },
103
106
  h(Divider, { style: hasCustomBackground ? { '--divider-color': dividerColor } : undefined }),
104
107
  googleLoginButtonElement,
@@ -114,7 +117,7 @@ const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel
114
117
  h("h1", { style: { color: textColor } }, title),
115
118
  image && h("img", { src: image })));
116
119
 
117
- const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;padding-bottom:var(--spacing-16, 1rem)}.outer-login-container h1,.outer-login-container h3{font-weight:900}.outer-login-container h1{font-size:2.25rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container h3{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:80%;margin-top:0;margin-bottom:0.875rem;font-size:var(--font-size-24, 1.5rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:8rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 699px){.outer-login-container.keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container{--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not([is-whitelabel]) .content-container{padding-top:0}.outer-login-container.keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container.keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios.keyboard-transitioning .content-container,.outer-login-container.tablet.ios.keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;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;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header h1{margin:0}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header h1{display:none}@media screen and (min-width: 750px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container .header img{margin:2rem 0}.outer-login-container .header h1{display:none}.outer-login-container #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:9rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[logo-shape=square] #error-alert{top:11rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel] .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel] header h1{display:none}.outer-login-container[is-whitelabel] header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel][logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel][logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:7rem}.outer-login-container[logo-shape=square] #error-alert{top:9rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header h1{display:none}}@media screen and (max-height: 665px){.outer-login-container.keyboard-closed .header{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open .header{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container yoo-button#help-button{-ms-flex-item-align:end;align-self:flex-end;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container .login-options .google-logo{height:1rem}}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel h1{margin-top:0}@media screen and (min-width: 1000px){.outer-login-container .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
120
+ const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;padding-bottom:var(--spacing-16, 1rem)}.outer-login-container h1,.outer-login-container h3{font-weight:900}.outer-login-container h1{font-size:2.25rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container h3{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:80%;margin-top:0;margin-bottom:0.875rem;font-size:var(--font-size-24, 1.5rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:8rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 699px){.outer-login-container.keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container{--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not([is-whitelabel]) .content-container{padding-top:0}.outer-login-container.keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container.keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios.keyboard-transitioning .content-container,.outer-login-container.tablet.ios.keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;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;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header h1{margin:0}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header h1{display:none}@media screen and (min-width: 750px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container .header img{margin:2rem 0}.outer-login-container .header h1{display:none}.outer-login-container #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:9rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[logo-shape=square] #error-alert{top:11rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel] .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel] header h1{display:none}.outer-login-container[is-whitelabel] header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel][logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel][logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:7rem}.outer-login-container[logo-shape=square] #error-alert{top:9rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header h1{display:none}}@media screen and (max-height: 665px){.outer-login-container.keyboard-closed .header{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open .header{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container .help-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.outer-login-container .help-buttons yoo-button#help-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons yoo-button#magic-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons.mobile{-ms-flex-pack:end;justify-content:flex-end}.outer-login-container .help-buttons:not(.mobile) yoo-button#help-button{margin:-0.25rem -0.5rem 0 0}.outer-login-container .help-buttons:not(.mobile) yoo-button#magic-button{margin:-0.25rem 0 0 -0.5rem}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(3rem);transform:translateY(3rem);visibility:hidden !important}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container .login-options .google-logo{height:1rem}}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel h1{margin-top:0}@media screen and (min-width: 1000px){.outer-login-container .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
118
121
 
119
122
  const YooLoginComponent = class {
120
123
  constructor(hostRef) {
@@ -128,17 +131,17 @@ const YooLoginComponent = class {
128
131
  // Title Text
129
132
  this.mainTitle = '';
130
133
  // Subtitle Text
131
- this.subtitle = 'LOGINSUBTITLE';
134
+ this.subtitle = 'YOOBICLOGINSUBTITLE';
132
135
  // Username label text
133
- this.usernameLabel = 'USERNAME';
136
+ this.usernameLabel = 'YOOBICUSERNAME';
134
137
  // Password label text
135
- this.passwordLabel = 'PASSWORD';
138
+ this.passwordLabel = 'YOOBICPASSWORD';
136
139
  // Help text like 'forgot password?'
137
- this.helpText = 'FORGOTPASSWORD';
140
+ this.helpText = 'YOOBICFORGOTPASSWORD';
138
141
  // Reset password text (for action sheet button)
139
- this.resetPasswordText = 'RESETPASSWORD';
142
+ this.resetPasswordText = 'YOOBICRESETPASSWORD';
140
143
  // Magic link text (for action sheet button)
141
- this.magicLinkText = 'MAGICLINK';
144
+ this.magicLinkText = 'YOOBICMAGICLINK';
142
145
  // A color to override any app-color / dynamic coloring
143
146
  this.textColor = null;
144
147
  this.isFocused = false;
@@ -329,9 +332,12 @@ const YooLoginComponent = class {
329
332
  }
330
333
  getButton(type, onClick, ref = undefined) {
331
334
  const isOtherLoginOptions = ['GOOGLE', 'SSO'].includes(type);
332
- return (h("yoo-button", { id: type !== 'HELP' ? `${type.toLowerCase()}-login-button` : 'help-button', color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && type === 'HELP' ? { color: this.textColor } : undefined, fill: type === 'HELP' ? 'transparent' : 'solid', size: isWeb(this.host) ? 'medium' : type === 'HELP' ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref }, type === 'SSO' && h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', slot: "start", name: "lock", color: "dark" }), type === 'GOOGLE' && h("img", { class: "google-logo", src: googleColorSvg, alt: "google logo", slot: "start" }), type === 'HELP'
333
- ? translate(this.helpText)
334
- : translate(`${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
335
+ const isHelpButton = ['HELP', 'MAGIC'].includes(type);
336
+ return (h("yoo-button", { id: !isHelpButton ? `${type.toLowerCase()}-login-button` : `${type.toLowerCase()}-button`, color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && isHelpButton ? { color: this.textColor } : undefined, fill: isHelpButton ? 'transparent' : 'solid', size: isWeb(this.host)
337
+ ? isHelpButton ? 'small' : 'medium'
338
+ : isHelpButton ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref }, type === 'SSO' && h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', slot: "start", name: "lock", color: "dark" }), type === 'GOOGLE' && h("img", { class: "google-logo", src: googleColorSvg, alt: "google logo", slot: "start" }), isHelpButton
339
+ ? translate(type === 'HELP' ? this.helpText : this.magicLinkText)
340
+ : translate(`YOOBIC${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
335
341
  }
336
342
  render() {
337
343
  return (h(Host, { style: {
@@ -345,7 +351,7 @@ const YooLoginComponent = class {
345
351
  [`keyboard-${this.keyboardState}`]: true,
346
352
  'ios': isIOS(),
347
353
  'tablet': isTabletOrIpad()
348
- } }, h(Header, { error: this.error, logo: this.logo, title: this.mainTitle, textColor: this.primaryColor, closeClick: () => this.onAlertClosed() }), h(Background, { hasBackgroundMedia: this.hasBackgroundMedia, image: this.backgroundSrc }), h("div", { class: "content-container", ref: (el) => this.contentContainerElement = el }, h(Sidepanel, { title: this.mainTitle, textColor: this.primaryColor, image: this.sidepanelImage }), h(MainContent, { subtitle: this.subtitle, textColor: this.primaryColor }, h(LoginForm, { buttonColor: this.textColor, ssoOnly: this.ssoOnly, fieldTitleColor: this.primaryColor, getInputLabel: this.getInputLabel.bind(this), getDefaultInputValue: this.getDefaultInputValue.bind(this), getInputValue: this.getInputValue.bind(this), focusedInput: this.focusedInput, host: this.host, bindReference: this.bindReference.bind(this), onIconClicked: this.onIconClicked.bind(this), onInputChanged: this.onInputChanged.bind(this), onInputFocused: this.onInputFocused.bind(this), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.validateAndLogin(), onFormSubmit: (e) => this.onFormSubmit(e), onShowPassword: this.onShowPassword.bind(this), showPassword: this.showPassword, loginButtonRef: (el) => this.loginButtonElement = el, helpButtonElement: this.getButton('HELP', () => this.onForgotPassword()), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }), h(LoginOptions, { ssoOnly: this.ssoOnly, hideGoogleLogin: this.hideGoogleLogin, hideAdvancedLogin: this.hideAdvancedLogin, hasCustomBackground: this.hasCustomBackground, dividerColor: this.primaryColor, googleLoginButtonElement: this.getButton('GOOGLE', () => this.onGoogleLogin()), ssoLoginButtonElement: this.getButton('SSO', () => this.onAdvancedLogin()) }))), h(Footer, { hasCustomBackground: this.hasCustomBackground, copyrightMessage: this.copyrightMessage, textColor: this.primaryColor, version: this.version, onClick: () => {
354
+ } }, h(Header, { error: this.error, logo: this.logo, title: this.mainTitle, textColor: this.primaryColor, closeClick: () => this.onAlertClosed() }), h(Background, { hasBackgroundMedia: this.hasBackgroundMedia, image: this.backgroundSrc }), h("div", { class: "content-container", ref: (el) => this.contentContainerElement = el }, h(Sidepanel, { title: this.mainTitle, textColor: this.primaryColor, image: this.sidepanelImage }), h(MainContent, { subtitle: this.subtitle, textColor: this.primaryColor }, h(LoginForm, { buttonColor: this.textColor, ssoOnly: this.ssoOnly, fieldTitleColor: this.primaryColor, getInputLabel: this.getInputLabel.bind(this), getDefaultInputValue: this.getDefaultInputValue.bind(this), getInputValue: this.getInputValue.bind(this), focusedInput: this.focusedInput, host: this.host, bindReference: this.bindReference.bind(this), onIconClicked: this.onIconClicked.bind(this), onInputChanged: this.onInputChanged.bind(this), onInputFocused: this.onInputFocused.bind(this), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.validateAndLogin(), onFormSubmit: (e) => this.onFormSubmit(e), onShowPassword: this.onShowPassword.bind(this), showPassword: this.showPassword, loginButtonRef: (el) => this.loginButtonElement = el, helpButtonElement: this.getButton('HELP', () => this.onForgotPassword()), magicButtonElement: this.getButton('MAGIC', () => this.magicLinkModalRequested.emit(true)), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }), h(LoginOptions, { ssoOnly: this.ssoOnly, hideGoogleLogin: this.hideGoogleLogin, hideAdvancedLogin: this.hideAdvancedLogin, hasCustomBackground: this.hasCustomBackground, dividerColor: this.primaryColor, googleLoginButtonElement: this.getButton('GOOGLE', () => this.onGoogleLogin()), ssoLoginButtonElement: this.getButton('SSO', () => this.onAdvancedLogin()), host: this.host }))), h(Footer, { hasCustomBackground: this.hasCustomBackground, copyrightMessage: this.copyrightMessage, textColor: this.primaryColor, version: this.version, onClick: () => {
349
355
  if (this.ssoOnly) {
350
356
  this.ssoOnly = false;
351
357
  }
package/dist/design-system/yoo-reset-password.entry.js CHANGED
@@ -62,7 +62,7 @@ const YooResetPasswordComponent = class {
62
62
  return [
63
63
  !!this.instruction && h("p", null, this.instruction),
64
64
  h("yoo-empty-state", { ref: (el) => (this.emptyState = el), type: this.isMagicLink ? 'magic-link' : 'password' }),
65
- h("yoo-form-input-container", { field: { title: translate('USERNAME') }, hideOptional: true, hideLabel: true }, h("yoo-form-input", { ref: (el) => (this.emailInput = el), validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('USERNAMEENTER'),
65
+ h("yoo-form-input-container", { field: { title: translate('YOOBICUSERNAME') }, hideOptional: true, hideLabel: true }, h("yoo-form-input", { ref: (el) => (this.emailInput = el), validators: [{ name: 'required' }], type: "email", uiValidation: { valid: false, invalid: false }, onInputChanged: (event) => this.onInputChanged(event), placeholder: translate('YOOBICUSERNAMEENTER'),
66
66
  //! Do not set up onInputBlur without confirming on mobile device (We don't want to have to press submit more than once)
67
67
  size: isWeb(this.host) ? 'medium' : 'large' })),
68
68
  h("yoo-button", { ref: (el) => (this.submitButton = el), size: isWeb(this.host) ? 'medium' : 'large', color: "app-color", disabled: !this.validity, class: "expanded", onClick: () => this.onSubmit() }, translate('SUBMIT'))
@@ -71,7 +71,7 @@ const YooResetPasswordComponent = class {
71
71
  renderResetForm() {
72
72
  const slides = [
73
73
  {
74
- title: 'RESETPASSWORD',
74
+ title: 'YOOBICRESETPASSWORD',
75
75
  items: [
76
76
  {
77
77
  name: 'CREATENEWPASSWORDINSTRUCTION',
package/dist/design-system/yoo-user-profile.entry.js CHANGED
@@ -38,7 +38,7 @@ const YooUserProfileComponent = class {
38
38
  }
39
39
  renderAdvancedLayout() {
40
40
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
41
- return (h("div", { class: "profile-content advanced" }, h("div", { class: "profile-title" }, translate('BASICS')), h("div", { class: "profile-links" }, h("ul", { class: "profile-links-menu" }, this.renderItem('PHOTOANDNAME', `${(_a = this.user) === null || _a === void 0 ? void 0 : _a.firstName} ${(_b = this.user) === null || _b === void 0 ? void 0 : _b.lastName}`.trim(), (_c = this.user) === null || _c === void 0 ? void 0 : _c.imageData), this.renderItem('USERNAME', (_d = this.user) === null || _d === void 0 ? void 0 : _d.username), this.renderItem('YOOBICSTORE', (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.location) === null || _f === void 0 ? void 0 : _f.title, (_h = (_g = this.user) === null || _g === void 0 ? void 0 : _g.location) === null || _h === void 0 ? void 0 : _h.imageData), this.renderItem('YOOBICBIO', (_j = this.user) === null || _j === void 0 ? void 0 : _j.description), ((_k = this.user) === null || _k === void 0 ? void 0 : _k.position) && this.renderItem('POSITION', translate((_l = this.user) === null || _l === void 0 ? void 0 : _l.position)), this.renderGroups(), this.renderItem('WORKEMAIL', (_m = this.user) === null || _m === void 0 ? void 0 : _m.email), this.renderItem('PHONENUMBER', (_o = this.user) === null || _o === void 0 ? void 0 : _o.telephone), ((_p = this.user) === null || _p === void 0 ? void 0 : _p.dateOfBirth) && this.renderItem('DATEOFBIRTH', pipes.dateFormat.transform((_q = this.user) === null || _q === void 0 ? void 0 : _q.dateOfBirth, 'L')), ((_r = this.user) === null || _r === void 0 ? void 0 : _r.hiringDate) && this.renderItem('WORKANNIVERSARY', pipes.dateFormat.transform((_s = this.user) === null || _s === void 0 ? void 0 : _s.hiringDate, 'L'))))));
41
+ return (h("div", { class: "profile-content advanced" }, h("div", { class: "profile-title" }, translate('BASICS')), h("div", { class: "profile-links" }, h("ul", { class: "profile-links-menu" }, this.renderItem('PHOTOANDNAME', `${(_a = this.user) === null || _a === void 0 ? void 0 : _a.firstName} ${(_b = this.user) === null || _b === void 0 ? void 0 : _b.lastName}`.trim(), (_c = this.user) === null || _c === void 0 ? void 0 : _c.imageData), this.renderItem('YOOBICUSERNAME', (_d = this.user) === null || _d === void 0 ? void 0 : _d.username), this.renderItem('YOOBICSTORE', (_f = (_e = this.user) === null || _e === void 0 ? void 0 : _e.location) === null || _f === void 0 ? void 0 : _f.title, (_h = (_g = this.user) === null || _g === void 0 ? void 0 : _g.location) === null || _h === void 0 ? void 0 : _h.imageData), this.renderItem('YOOBICBIO', (_j = this.user) === null || _j === void 0 ? void 0 : _j.description), ((_k = this.user) === null || _k === void 0 ? void 0 : _k.position) && this.renderItem('POSITION', translate((_l = this.user) === null || _l === void 0 ? void 0 : _l.position)), this.renderGroups(), this.renderItem('WORKEMAIL', (_m = this.user) === null || _m === void 0 ? void 0 : _m.email), this.renderItem('PHONENUMBER', (_o = this.user) === null || _o === void 0 ? void 0 : _o.telephone), ((_p = this.user) === null || _p === void 0 ? void 0 : _p.dateOfBirth) && this.renderItem('DATEOFBIRTH', pipes.dateFormat.transform((_q = this.user) === null || _q === void 0 ? void 0 : _q.dateOfBirth, 'L')), ((_r = this.user) === null || _r === void 0 ? void 0 : _r.hiringDate) && this.renderItem('WORKANNIVERSARY', pipes.dateFormat.transform((_s = this.user) === null || _s === void 0 ? void 0 : _s.hiringDate, 'L'))))));
42
42
  }
43
43
  render() {
44
44
  return h(Host, { class: { ...getAppContext(this.host) } }, this.renderAdvancedLayout());
package/dist/esm/yoo-copyright.entry.js CHANGED
@@ -12,7 +12,7 @@ const YooCopyrightComponent = class {
12
12
  registerInstance(this, hostRef);
13
13
  }
14
14
  render() {
15
- return h(Host, null, translate('POWEREDBY'), h("img", { src: "assets/logo/yoobic.svg", height: "12.8", alt: "YOOBIC Logo" }), "YOOBIC");
15
+ return h(Host, null, translate('YOOBICPOWEREDBY'), h("img", { src: "assets/logo/yoobic.svg", height: "12.8", alt: "YOOBIC Logo" }), "YOOBIC");
16
16
  }
17
17
  };
18
18
  YooCopyrightComponent.style = copyrightCss;
package/dist/esm/yoo-login.entry.js CHANGED
@@ -19,7 +19,7 @@ const Background = ({ hasBackgroundMedia, image }) => {
19
19
  };
20
20
 
21
21
  const Footer = ({ textColor, copyrightMessage, version, hasCustomBackground, onClick }) => (h("footer", { onClick: onClick, style: { color: hasCustomBackground ? textColor : 'inherit' } },
22
- h("p", { class: "powered-by" }, translate('POWEREDBY')),
22
+ h("p", { class: "powered-by" }, translate('YOOBICPOWEREDBY')),
23
23
  h("p", { class: "copyright" }, copyrightMessage),
24
24
  h("p", null, "|"),
25
25
  h("p", { class: "version" }, `V${version}`)));
@@ -39,7 +39,7 @@ const Header = ({ logo, title, textColor, error, closeClick }) => ([
39
39
  'web': isWeb()
40
40
  } },
41
41
  h("p", null, translate(error)),
42
- h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('NEEDHELP')))),
42
+ h("a", { class: "link", style: { color: `var(--${isWeb() ? 'danger' : 'light'})` }, href: "mailto:support@yoobic.com" }, translate('YOOBICNEEDHELP')))),
43
43
  h("header", { class: "header" },
44
44
  h("img", { src: logo, alt: "app logo" }),
45
45
  h("h1", { style: { color: textColor } }, title))
@@ -56,13 +56,13 @@ const LoginInput = ({ style, label, inputType, isFocused, bindReference, onIconC
56
56
  h("div", { class: `inner-input-container ${inputType}` },
57
57
  h("div", { class: "icon-prefix", onMouseDown: (e) => e.preventDefault(), onClick: onIconClicked },
58
58
  h("yoo-icon", { name: inputType === 'username' ? 'email' : 'password', size: inputSize === 'medium' ? 'small' : 'medium', color: !isWhitelabel ? 'app-color' : 'dark' })),
59
- h("input", { id: `${inputType}-input`, type: inputType === 'username' || showPassword ? 'text' : 'password', name: inputType, ref: (el) => bindReference(el, inputType), autoCapitalize: "none", autoComplete: inputType === 'username' ? inputType : 'current-password', placeholder: translate(`${inputType === 'username' ? 'USERNAME' : 'PASSWORD'}ENTER`), required: true, onBlur: () => onInputBlurred(), onChange: (ev) => onInputChanged(ev), onInput: (ev) => onInputChanged(ev), onFocus: () => onInputFocused(), onKeyDown: (ev) => onKeyPress(ev), value: inputValue }),
59
+ h("input", { id: `${inputType}-input`, type: inputType === 'username' || showPassword ? 'text' : 'password', name: inputType, ref: (el) => bindReference(el, inputType), autoCapitalize: "none", autoComplete: inputType === 'username' ? inputType : 'current-password', placeholder: translate(`${inputType === 'username' ? 'YOOBICUSERNAME' : 'YOOBICPASSWORD'}ENTER`), required: true, onBlur: () => onInputBlurred(), onChange: (ev) => onInputChanged(ev), onInput: (ev) => onInputChanged(ev), onFocus: () => onInputFocused(), onKeyDown: (ev) => onKeyPress(ev), value: inputValue }),
60
60
  inputType === 'password' && h("div", { class: 'icon-suffix-focus input-show-icon', onMouseDown: (e) => e.preventDefault(), onClick: () => onShowPassword() },
61
61
  h("yoo-icon", { size: inputSize === 'medium' ? 'small' : 'medium', name: showPassword ? 'offline' : 'eye', color: "stable-alt" })),
62
62
  h("div", { class: `icon-suffix-focus ${inputType}-input-clear-icon`, onMouseDown: (e) => e.preventDefault(), onClick: () => (hasValue ? clearInput() : null) },
63
63
  h("yoo-icon", { size: inputSize === 'medium' ? 'small' : 'medium', name: "cross" })))));
64
64
 
65
- const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputValue, getInputValue, bindReference, clearInput, onIconClicked, focusedInput, host, showPassword, loginButtonRef, onEnterPressed, onInputBlurred, onInputChanged, onInputFocused, onFormSubmit, onShowPassword, helpButtonElement, ssoLoginButtonElement, isWhitelabel, buttonColor }) => {
65
+ const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputValue, getInputValue, bindReference, clearInput, onIconClicked, focusedInput, host, showPassword, loginButtonRef, onEnterPressed, onInputBlurred, onInputChanged, onInputFocused, onFormSubmit, onShowPassword, helpButtonElement, magicButtonElement, ssoLoginButtonElement, isWhitelabel, buttonColor }) => {
66
66
  const inputAndButtonSize = isWeb(host) ? 'medium' : 'large';
67
67
  const loginDisabled = !(!!(getInputValue('username') || '') &&
68
68
  !!(getInputValue('password') || ''));
@@ -78,12 +78,14 @@ const LoginForm = ({ ssoOnly, fieldTitleColor, getInputLabel, getDefaultInputVal
78
78
  ? h("form", { autoComplete: "on", id: "login-form", novalidate: true, onSubmit: onFormSubmit },
79
79
  renderInputContainer('username'),
80
80
  renderInputContainer('password'),
81
- helpButtonElement,
81
+ h("div", { class: { 'help-buttons': true, mobile: !isWeb(host) } },
82
+ isWeb(host) && magicButtonElement,
83
+ helpButtonElement),
82
84
  h("input", { id: "default-login-button", class: {
83
85
  [inputAndButtonSize]: true,
84
86
  mobile: !isWeb(host),
85
87
  disabled: loginDisabled
86
- }, ref: loginButtonRef, type: "submit", form: "login-form", name: "doLogin", disabled: loginDisabled, value: translate('LOGIN'), style: buttonColor && !loginDisabled ? { backgroundColor: buttonColor, color: getContrastColor(buttonColor) } : undefined }))
88
+ }, ref: loginButtonRef, type: "submit", form: "login-form", name: "doLogin", disabled: loginDisabled, value: translate('YOOBICLOGIN'), style: buttonColor && !loginDisabled ? { backgroundColor: buttonColor, color: getContrastColor(buttonColor) } : undefined }))
87
89
  : h("div", { class: "sso-only-login" }, ssoLoginButtonElement);
88
90
  };
89
91
 
@@ -92,13 +94,14 @@ const Divider = ({ style }) => (h("div", { id: "divider", style: style },
92
94
  h("p", null, "or"),
93
95
  h("div", null)));
94
96
 
95
- const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBackground, dividerColor, googleLoginButtonElement, ssoLoginButtonElement }) => {
97
+ const LoginOptions = ({ ssoOnly, hideAdvancedLogin, hideGoogleLogin, hasCustomBackground, dividerColor, googleLoginButtonElement, ssoLoginButtonElement, host }) => {
96
98
  if (!ssoOnly) {
97
99
  return (h("div", { class: {
98
100
  'login-options': true,
99
101
  'sso-only': ssoOnly,
100
102
  'hide-google-login': hideGoogleLogin,
101
- 'hide-advanced-login': hideAdvancedLogin
103
+ 'hide-advanced-login': hideAdvancedLogin,
104
+ mobile: !isWeb(host)
102
105
  } },
103
106
  h(Divider, { style: hasCustomBackground ? { '--divider-color': dividerColor } : undefined }),
104
107
  googleLoginButtonElement,
@@ -114,7 +117,7 @@ const Sidepanel = ({ image, title, textColor }) => (h("div", { class: "sidepanel
114
117
  h("h1", { style: { color: textColor } }, title),
115
118
  image && h("img", { src: image })));
116
119
 
117
- const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;padding-bottom:var(--spacing-16, 1rem)}.outer-login-container h1,.outer-login-container h3{font-weight:900}.outer-login-container h1{font-size:2.25rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container h3{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:80%;margin-top:0;margin-bottom:0.875rem;font-size:var(--font-size-24, 1.5rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:8rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 699px){.outer-login-container.keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container{--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not([is-whitelabel]) .content-container{padding-top:0}.outer-login-container.keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container.keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios.keyboard-transitioning .content-container,.outer-login-container.tablet.ios.keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;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;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header h1{margin:0}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header h1{display:none}@media screen and (min-width: 750px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container .header img{margin:2rem 0}.outer-login-container .header h1{display:none}.outer-login-container #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:9rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[logo-shape=square] #error-alert{top:11rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel] .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel] header h1{display:none}.outer-login-container[is-whitelabel] header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel][logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel][logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:7rem}.outer-login-container[logo-shape=square] #error-alert{top:9rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header h1{display:none}}@media screen and (max-height: 665px){.outer-login-container.keyboard-closed .header{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open .header{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container yoo-button#help-button{-ms-flex-item-align:end;align-self:flex-end;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container .login-options .google-logo{height:1rem}}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel h1{margin-top:0}@media screen and (min-width: 1000px){.outer-login-container .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
120
+ const loginCss = ".outer-login-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;padding-bottom:var(--spacing-16, 1rem)}.outer-login-container h1,.outer-login-container h3{font-weight:900}.outer-login-container h1{font-size:2.25rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container h3{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:80%;margin-top:0;margin-bottom:0.875rem;font-size:var(--font-size-24, 1.5rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .content-container{z-index:2;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:8rem var(--spacing-24, 1.5rem) 0}.outer-login-container.ios .content-container{position:absolute}.outer-login-container yoo-button{width:100%;margin-top:var(--spacing-16, 1rem)}.outer-login-container.keyboard-open:not(.ios){-ms-flex-pack:end;justify-content:flex-end}.outer-login-container.keyboard-transitioning.ios .content-container,.outer-login-container.keyboard-open.ios .content-container{-webkit-transform:translateY(-1rem);transform:translateY(-1rem)}.outer-login-container[sso-only] .content-container{padding-top:0}.outer-login-container[is-whitelabel] .content-container{padding-top:var(--spacing-96, 6rem)}@media screen and (max-height: 699px){.outer-login-container.keyboard-closed .content-container{padding-top:0}}@media screen and (min-width: 750px){.outer-login-container{--header-footer-border-color:var(--stable-light, #f1f1f1)}.outer-login-container .content-container{padding-top:var(--spacing-96, 6rem)}.outer-login-container:not([is-whitelabel]) .content-container{padding-top:0}.outer-login-container.keyboard-open{-ms-flex-pack:end;justify-content:flex-end;padding-bottom:20%}}@media screen and (min-width: 1000px) and (max-height: 500px){.outer-login-container.keyboard-open{padding-bottom:var(--spacing-16, 1rem)}}@media screen and (min-width: 1000px) and (orientation: landscape){.outer-login-container.tablet.ios.keyboard-transitioning .content-container,.outer-login-container.tablet.ios.keyboard-open .content-container{-webkit-transform:translateY(-20%);transform:translateY(-20%)}}.outer-login-container .background-overlay{position:absolute;z-index:1;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.25)}.outer-login-container .background-image{position:absolute;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;background-attachment:fixed;-webkit-filter:blur(0.1rem);filter:blur(0.1rem)}.outer-login-container #divider{--divider-color:var(--stable-alt, #d0d0d0);display:grid;grid-template-areas:\". or .\";grid-template-columns:1fr auto 1fr;-ms-flex-align:center;align-items:center;width:100%;height:1.125rem;margin:var(--spacing-24, 1.5rem) 0;color:var(--divider-color);font-size:var(--font-size-12, 0.75rem)}.outer-login-container #divider div{border-top:0.0675rem solid var(--divider-color)}.outer-login-container #divider p{grid-area:or;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0;padding:0 var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container #divider{margin:var(--spacing-32, 2rem) 0}}.outer-login-container footer{position:absolute;bottom:0;z-index:2;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;width:100%;font-size:var(--font-size-12, 0.75rem);text-align:center}.outer-login-container footer .powered-by{padding-right:var(--spacing-04, 0.25rem)}.outer-login-container footer .copyright{padding-right:var(--spacing-08, 0.5rem)}.outer-login-container footer .version{padding-left:var(--spacing-08, 0.5rem)}.outer-login-container.ios footer{padding-bottom:var(--spacing-16, 1rem)}@media screen and (min-width: 900px){.outer-login-container footer{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-top:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container footer *{margin:var(--spacing-24, 1.5rem) 0 1.875rem 0;line-height:1.125rem}}@media screen and (max-height: 550px){.outer-login-container footer{display:none}}.outer-login-container:not([is-whitelabel]) .powered-by{display:none}.outer-login-container.keyboard-transitioning footer,.outer-login-container.keyboard-open footer{display:none}.outer-login-container #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0;text-align:left}.outer-login-container #error-alert .error-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin:0.5rem 0}.outer-login-container #error-alert .error-content p{margin:0}.outer-login-container #error-alert .error-content .link{text-decoration:underline;cursor:pointer}.outer-login-container #error-alert .error-content .link yoo-link{color:inherit}.outer-login-container #error-alert .error-content.web{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:1rem 0}.outer-login-container #error-alert .error-content.web p{margin:0 1rem 0 0;text-align:left}.outer-login-container #error-alert .error-content.web .link{text-align:right}.outer-login-container.ios #error-alert{padding-top:var(--spacing-32, 2rem)}.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{position:absolute;top:0;z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:100%;margin-top:var(--spacing-24, 1.5rem);text-align:center;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container .header h1{margin:0}.outer-login-container .header img{max-width:80%;margin-top:var(--spacing-48, 3rem);-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel] .header h1{display:none}@media screen and (min-width: 750px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}}@media screen and (min-width: 1000px){.outer-login-container .header img{height:4rem;max-height:4rem}.outer-login-container .header{width:41.5rem;margin:0 calc((100% - 41.5rem) / 2);border-bottom:var(--header-footer-border-color) 0.0675rem solid}.outer-login-container .header img{margin:2rem 0}.outer-login-container .header h1{display:none}.outer-login-container #error-alert{top:7.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:9rem}.outer-login-container[logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[logo-shape=square] #error-alert{top:11rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-width: 750px){.outer-login-container[is-whitelabel] .header img{height:4rem;max-height:4rem}.outer-login-container[is-whitelabel] header h1{display:none}.outer-login-container[is-whitelabel] header img{max-width:90%;margin-top:var(--spacing-48, 3rem)}.outer-login-container[is-whitelabel][logo-shape=square] .header img{height:6rem;max-height:6rem}.outer-login-container[is-whitelabel][logo-shape=square] .header img{margin-top:var(--spacing-64, 4rem)}}@media screen and (min-width: 900px) and (max-width: 1300px){.outer-login-container .header{margin-bottom:var(--spacing-32, 2rem)}.outer-login-container .header img{margin:var(--spacing-16, 1rem) 0}.outer-login-container #error-alert{top:6.5rem;width:41.5rem;margin:0 calc((100% - 41.5rem) / 2)}.outer-login-container[is-whitelabel] #error-alert{top:7rem}.outer-login-container[logo-shape=square] #error-alert{top:9rem}.outer-login-container.tablet #error-alert{position:absolute;top:0;z-index:10;width:100%;margin:0}}@media screen and (max-height: 799px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header img{margin-top:var(--spacing-32, 2rem)}}@media screen and (max-height: 699px){.outer-login-container:not([is-whitelabel]).keyboard-closed .header h1{display:none}}@media screen and (max-height: 665px){.outer-login-container.keyboard-closed .header{display:none}}@media screen and (max-height: 500px){.outer-login-container.keyboard-open .header{display:none}}.outer-login-container:not([is-whitelabel]) .header img{height:2rem;max-height:2rem}.outer-login-container:not([is-whitelabel]) .header{margin-top:var(--spacing-16, 1rem)}.outer-login-container:not([is-whitelabel]) .header img{margin-bottom:var(--spacing-24, 1.5rem)}.outer-login-container{--disabled-color:var(--stable-light, #f1f1f1);--hover-color:var(--stable-light, #f1f1f1)}.outer-login-container #login-form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;width:100%}.outer-login-container .outer-input-container{width:100%;margin-bottom:0.75rem}.outer-login-container .outer-input-container yoo-context-dialog{width:100%}.outer-login-container .help-buttons{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.outer-login-container .help-buttons yoo-button#help-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons yoo-button#magic-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:1.5rem;margin:-0.5rem 0 0 0}.outer-login-container .help-buttons.mobile{-ms-flex-pack:end;justify-content:flex-end}.outer-login-container .help-buttons:not(.mobile) yoo-button#help-button{margin:-0.25rem -0.5rem 0 0}.outer-login-container .help-buttons:not(.mobile) yoo-button#magic-button{margin:-0.25rem 0 0 -0.5rem}.outer-login-container #default-login-button{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:var(--spacing-16, 1rem);color:var(--stable-light, #f1f1f1);background-color:var(--app-color, #5a30f4);border-radius:var(--border-radius-08, 0.5rem);-webkit-transition:color 0.1s ease-in-out;transition:color 0.1s ease-in-out}.outer-login-container #default-login-button.disabled{color:var(--stable-alt, #d0d0d0);background-color:var(--disabled-color)}.outer-login-container #default-login-button:hover:not(.disabled){-webkit-filter:brightness(90%);filter:brightness(90%)}.outer-login-container #default-login-button.medium{height:2rem;font-size:var(--font-size-14, 0.875rem)}.outer-login-container #default-login-button.medium.mobile{font-size:var(--font-size-16, 1rem)}.outer-login-container #default-login-button.large{height:3rem;font-size:var(--font-size-16, 1rem)}.outer-login-container.keyboard-open:not(.ios) #login-form{padding-bottom:var(--spacing-64, 4rem)}.outer-login-container.keyboard-open:not(.ios) #login-form #default-login-button{position:absolute;bottom:var(--spacing-16, 1rem);left:var(--spacing-24, 1.5rem);width:calc(100% - var(--spacing-48, 3rem))}.outer-login-container[sso-only] #login-form{display:none}.outer-login-container[sso-only] .sso-only-login{display:block}.outer-login-container:not([sso-only]) .sso-only-login{display:none}.login-options .google-logo{margin-right:var(--spacing-08, 0.5rem)}.login-options.sso-only{display:none}.outer-login-container.keyboard-open .login-options,.outer-login-container.keyboard-transitioning:not(.ios) .login-options{display:none}.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button,.login-options.hide-advanced-login:not(.hide-google-login) #sso-login-button *{visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(4rem);transform:translateY(4rem);visibility:hidden !important}.login-options.hide-google-login.mobile:not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-4rem);transform:translateY(-4rem)}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #google-login-button{-webkit-transform:translateY(3rem);transform:translateY(3rem);visibility:hidden !important}.login-options.hide-google-login:not(.mobile):not(.hide-advanced-login) #sso-login-button{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.login-options.hide-advanced-login.hide-google-login,.login-options.hide-advanced-login.hide-google-login *{visibility:hidden !important}@media screen and (min-width: 750px) and (max-width: 999px) and (orientation: portrait){.outer-login-container.keyboard-transitioning .login-options,.outer-login-container.keyboard-open .login-options{display:block}}@media screen and (min-width: 900px){.outer-login-container .login-options .google-logo{height:1rem}}.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;max-width:22rem;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s}.outer-login-container[sso-only] .main-content{margin-top:calc(var(--spacing-64, 4rem) * -1)}@media screen and (min-width: 900px){.outer-login-container .main-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .main-content yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 899px){.outer-login-container:not([is-whitelabel]) .main-content h3{display:none}.outer-login-container.focused h3{-webkit-transform:scale(1.2) translateX(10%);transform:scale(1.2) translateX(10%)}}.outer-login-container .sidepanel{margin-right:var(--spacing-64, 4rem)}.outer-login-container .sidepanel h1{margin-top:0}@media screen and (min-width: 1000px){.outer-login-container .sidepanel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:18.75rem}.outer-login-container .sidepanel yoo-form-input-container{font-size:var(--font-size-12, 0.75rem)}}@media screen and (max-width: 999px){.outer-login-container .sidepanel{display:none}}.outer-login-container:not([is-double-column]) .sidepanel{display:none}.outer-input-container{--input-background-color:var(--light, #ffffff);--input-border-color:var(--dark, #000000);--input-text-color:var(--text-color, #807f83);--input-font-size:var(--font-size-16, 1rem);--caret-color:var(--app-color, #5a30f4);display:block;width:100%;color:var(--dark, #000000);display:inline-block;-webkit-box-sizing:content-box;box-sizing:content-box;min-width:0;margin:0;padding:0;font-family:var(--font-family, \"Lato\");line-height:1;white-space:normal;vertical-align:middle;background:none;border:0}.outer-input-container:focus{outline:0}.outer-input-container[type=reset],.outer-input-container[type=button],.outer-input-container[type=submit],.outer-input-container[type=checkbox],.outer-input-container[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box}.outer-input-container[type=search]{-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}.outer-input-container label{color:var(--field-title-color);font-size:var(--font-size-12, 0.75rem)}.outer-input-container .float-left{float:left;margin-top:var(--spacing-04, 0.25rem);margin-right:var(--spacing-08, 0.5rem);cursor:pointer}.outer-input-container .float-left:hover{fill:var(--app-color, #5a30f4)}.outer-input-container .truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.outer-input-container .truncate:hover{color:var(--app-color, #5a30f4)}.outer-input-container.focused .inner-input-container{border:var(--border-width-01, 0.0625rem) solid var(--input-border-color)}.outer-input-container .inner-input-container{position:relative;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;margin-top:0.625rem;direction:ltr;background:var(--input-background-color);border:var(--border-width-01, 0.0625rem) solid var(--stable-alt, #d0d0d0);border-radius:var(--border-radius-08, 0.5rem)}.outer-input-container .inner-input-container.noborder{border:none !important}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .icon-suffix{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit}.outer-input-container .inner-input-container .inline-left{display:inline-block;margin-left:var(--spacing-04, 0.25rem)}.outer-input-container .inner-input-container .icon-suffix-focus{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0.4375rem var(--spacing-08, 0.5rem);color:inherit;display:flex;flex-direction:row;padding-right:var(--spacing-08, 0.5rem);-webkit-transition:display ease-in-out 0.2s;transition:display ease-in-out 0.2s}.outer-input-container .inner-input-container .icon-suffix-focus yoo-icon{visibility:hidden !important}.outer-input-container .inner-input-container input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:relative;display:block;-ms-flex:1;flex:1;width:100%;min-width:0;padding:var(--spacing-08, 0.5rem);padding-right:2rem;padding-left:2rem;color:inherit;font-weight:var(--font-weight-400, 400);font-size:var(--input-font-size);font-family:var(--font-family, \"Lato\");line-height:1.5;text-align:left;background:transparent;border:none;border-radius:var(--border-radius-08, 0.5rem);-webkit-box-shadow:transparent 0 0 0 62.5rem inset;box-shadow:transparent 0 0 0 62.5rem inset;-webkit-appearance:none;caret-color:var(--caret-color)}.outer-input-container .inner-input-container input::-webkit-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input::-moz-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:-ms-input-placeholder{color:var(--text-color, #807f83);font-weight:var(--font-weight-400, 400);font-family:var(--font-family, \"Lato\") !important}.outer-input-container .inner-input-container input:focus{outline:none}.outer-input-container .inner-input-container input.hide-value{color:transparent}.outer-input-container .inner-input-container.password input{padding-right:4rem}.outer-input-container .inner-input-container .icon-prefix,.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon,.outer-input-container .inner-input-container .input-show-icon{position:absolute;z-index:5}.outer-input-container .inner-input-container .icon-prefix{left:0}.outer-input-container .inner-input-container .password-input-clear-icon,.outer-input-container .inner-input-container .username-input-clear-icon{right:0}.outer-input-container .inner-input-container .input-show-icon{right:2rem}.outer-input-container.has-value.focused .inner-input-container.username .username-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .input-show-icon yoo-icon{visibility:visible !important}.outer-input-container.has-value.focused .inner-input-container.password .password-input-clear-icon yoo-icon{visibility:visible !important}.outer-input-container.large .inner-input-container{height:3rem}.outer-input-container.large .inner-input-container input{padding-right:2.5rem;padding-left:2.5rem}.outer-input-container.large .inner-input-container.password input{padding-right:4.5rem}.outer-input-container.large .inner-input-container .icon-prefix{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .password-input-clear-icon,.outer-input-container.large .inner-input-container .username-input-clear-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.large .inner-input-container .input-show-icon{padding:0.75rem var(--spacing-08, 0.5rem)}.outer-input-container.medium .inner-input-container{height:2rem;font-size:var(--font-size-14, 0.875rem);border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.medium .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-webkit-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input::-moz-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.medium .inner-input-container input:-ms-input-placeholder{font-size:var(--font-size-14, 0.875rem)}.outer-input-container.small .inner-input-container{height:1.5rem;border-radius:var(--border-radius-04, 0.25rem)}.outer-input-container.small .inner-input-container input{font-size:var(--font-size-14, 0.875rem)}.accent .inner-input-container{border-color:var(--accent, #276ef1)}.accent .inner-input-container .icon-prefix{border-right:none}.accent .inner-input-container .icon-prefix yoo-icon{fill:var(--accent, #276ef1)}.accent .inner-input-container .icon-suffix{color:var(--accent, #276ef1);border-left:none}.accent .inner-input-container input{color:var(--accent, #276ef1)}.accent .inner-input-container input::-webkit-input-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input::-moz-placeholder{color:var(--accent, #276ef1)}.accent .inner-input-container input:-ms-input-placeholder{color:var(--accent, #276ef1)}.success .inner-input-container{border-color:var(--success, #3aa76d)}.success .inner-input-container .icon-prefix{border-right:none}.success .inner-input-container .icon-prefix yoo-icon{fill:var(--success, #3aa76d)}.success .inner-input-container .icon-suffix{color:var(--success, #3aa76d);border-left:none}.success .inner-input-container input{color:var(--success, #3aa76d)}.success .inner-input-container input::-webkit-input-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input::-moz-placeholder{color:var(--success, #3aa76d)}.success .inner-input-container input:-ms-input-placeholder{color:var(--success, #3aa76d)}.app-color .inner-input-container{border-color:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-prefix{border-right:none}.app-color .inner-input-container .icon-prefix yoo-icon{fill:var(--app-color, #5a30f4)}.app-color .inner-input-container .icon-suffix{color:var(--app-color, #5a30f4);border-left:none}.app-color .inner-input-container input{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-webkit-input-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input::-moz-placeholder{color:var(--app-color, #5a30f4)}.app-color .inner-input-container input:-ms-input-placeholder{color:var(--app-color, #5a30f4)}.info .inner-input-container{border-color:var(--info, #d84c96)}.info .inner-input-container .icon-prefix{border-right:none}.info .inner-input-container .icon-prefix yoo-icon{fill:var(--info, #d84c96)}.info .inner-input-container .icon-suffix{color:var(--info, #d84c96);border-left:none}.info .inner-input-container input{color:var(--info, #d84c96)}.info .inner-input-container input::-webkit-input-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input::-moz-placeholder{color:var(--info, #d84c96)}.info .inner-input-container input:-ms-input-placeholder{color:var(--info, #d84c96)}.warning .inner-input-container{border-color:var(--warning, #ed6e33)}.warning .inner-input-container .icon-prefix{border-right:none}.warning .inner-input-container .icon-prefix yoo-icon{fill:var(--warning, #ed6e33)}.warning .inner-input-container .icon-suffix{color:var(--warning, #ed6e33);border-left:none}.warning .inner-input-container input{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-webkit-input-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input::-moz-placeholder{color:var(--warning, #ed6e33)}.warning .inner-input-container input:-ms-input-placeholder{color:var(--warning, #ed6e33)}.danger .inner-input-container{border-color:var(--danger, #d44333)}.danger .inner-input-container .icon-prefix{border-right:none}.danger .inner-input-container .icon-prefix yoo-icon{fill:var(--danger, #d44333)}.danger .inner-input-container .icon-suffix{color:var(--danger, #d44333);border-left:none}.danger .inner-input-container input{color:var(--danger, #d44333)}.danger .inner-input-container input::-webkit-input-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input::-moz-placeholder{color:var(--danger, #d44333)}.danger .inner-input-container input:-ms-input-placeholder{color:var(--danger, #d44333)}.dark .inner-input-container{border-color:var(--dark, #000000)}.dark .inner-input-container .icon-prefix{border-right:none}.dark .inner-input-container .icon-prefix yoo-icon{fill:var(--dark, #000000)}.dark .inner-input-container .icon-suffix{color:var(--dark, #000000);border-left:none}.dark .inner-input-container input{color:var(--dark, #000000)}.dark .inner-input-container input::-webkit-input-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input::-moz-placeholder{color:var(--dark, #000000)}.dark .inner-input-container input:-ms-input-placeholder{color:var(--dark, #000000)}.stable-light .inner-input-container{border-color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-prefix{border-right:none}.stable-light .inner-input-container .icon-prefix yoo-icon{fill:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container .icon-suffix{color:var(--stable-light, #f1f1f1);border-left:none}.stable-light .inner-input-container input{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-webkit-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input::-moz-placeholder{color:var(--stable-light, #f1f1f1)}.stable-light .inner-input-container input:-ms-input-placeholder{color:var(--stable-light, #f1f1f1)}.stable .inner-input-container{border-color:var(--stable, #adadad)}.stable .inner-input-container .icon-prefix{border-right:none}.stable .inner-input-container .icon-prefix yoo-icon{fill:var(--stable, #adadad)}.stable .inner-input-container .icon-suffix{color:var(--stable, #adadad);border-left:none}.stable .inner-input-container input{color:var(--stable, #adadad)}.stable .inner-input-container input::-webkit-input-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input::-moz-placeholder{color:var(--stable, #adadad)}.stable .inner-input-container input:-ms-input-placeholder{color:var(--stable, #adadad)}.light .inner-input-container{border-color:var(--light, #ffffff)}.light .inner-input-container .icon-prefix{border-right:none}.light .inner-input-container .icon-prefix yoo-icon{fill:var(--light, #ffffff)}.light .inner-input-container .icon-suffix{color:var(--light, #ffffff);border-left:none}.light .inner-input-container input{color:var(--light, #ffffff)}.light .inner-input-container input::-webkit-input-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input::-moz-placeholder{color:var(--light, #ffffff)}.light .inner-input-container input:-ms-input-placeholder{color:var(--light, #ffffff)}";
118
121
 
119
122
  const YooLoginComponent = class {
120
123
  constructor(hostRef) {
@@ -128,17 +131,17 @@ const YooLoginComponent = class {
128
131
  // Title Text
129
132
  this.mainTitle = '';
130
133
  // Subtitle Text
131
- this.subtitle = 'LOGINSUBTITLE';
134
+ this.subtitle = 'YOOBICLOGINSUBTITLE';
132
135
  // Username label text
133
- this.usernameLabel = 'USERNAME';
136
+ this.usernameLabel = 'YOOBICUSERNAME';
134
137
  // Password label text
135
- this.passwordLabel = 'PASSWORD';
138
+ this.passwordLabel = 'YOOBICPASSWORD';
136
139
  // Help text like 'forgot password?'
137
- this.helpText = 'FORGOTPASSWORD';
140
+ this.helpText = 'YOOBICFORGOTPASSWORD';
138
141
  // Reset password text (for action sheet button)
139
- this.resetPasswordText = 'RESETPASSWORD';
142
+ this.resetPasswordText = 'YOOBICRESETPASSWORD';
140
143
  // Magic link text (for action sheet button)
141
- this.magicLinkText = 'MAGICLINK';
144
+ this.magicLinkText = 'YOOBICMAGICLINK';
142
145
  // A color to override any app-color / dynamic coloring
143
146
  this.textColor = null;
144
147
  this.isFocused = false;
@@ -329,9 +332,12 @@ const YooLoginComponent = class {
329
332
  }
330
333
  getButton(type, onClick, ref = undefined) {
331
334
  const isOtherLoginOptions = ['GOOGLE', 'SSO'].includes(type);
332
- return (h("yoo-button", { id: type !== 'HELP' ? `${type.toLowerCase()}-login-button` : 'help-button', color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && type === 'HELP' ? { color: this.textColor } : undefined, fill: type === 'HELP' ? 'transparent' : 'solid', size: isWeb(this.host) ? 'medium' : type === 'HELP' ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref }, type === 'SSO' && h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', slot: "start", name: "lock", color: "dark" }), type === 'GOOGLE' && h("img", { class: "google-logo", src: googleColorSvg, alt: "google logo", slot: "start" }), type === 'HELP'
333
- ? translate(this.helpText)
334
- : translate(`${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
335
+ const isHelpButton = ['HELP', 'MAGIC'].includes(type);
336
+ return (h("yoo-button", { id: !isHelpButton ? `${type.toLowerCase()}-login-button` : `${type.toLowerCase()}-button`, color: !isOtherLoginOptions ? 'app-color' : 'light', customColor: this.textColor && isHelpButton ? { color: this.textColor } : undefined, fill: isHelpButton ? 'transparent' : 'solid', size: isWeb(this.host)
337
+ ? isHelpButton ? 'small' : 'medium'
338
+ : isHelpButton ? 'medium' : 'large', animated: false, onClick: onClick, ref: ref }, type === 'SSO' && h("yoo-icon", { size: isWeb(this.host) ? 'small' : 'medium', slot: "start", name: "lock", color: "dark" }), type === 'GOOGLE' && h("img", { class: "google-logo", src: googleColorSvg, alt: "google logo", slot: "start" }), isHelpButton
339
+ ? translate(type === 'HELP' ? this.helpText : this.magicLinkText)
340
+ : translate(`YOOBIC${type !== 'SSO-DEFAULT' ? type : ''}LOGIN`)));
335
341
  }
336
342
  render() {
337
343
  return (h(Host, { style: {
@@ -345,7 +351,7 @@ const YooLoginComponent = class {
345
351
  [`keyboard-${this.keyboardState}`]: true,
346
352
  'ios': isIOS(),
347
353
  'tablet': isTabletOrIpad()
348
- } }, h(Header, { error: this.error, logo: this.logo, title: this.mainTitle, textColor: this.primaryColor, closeClick: () => this.onAlertClosed() }), h(Background, { hasBackgroundMedia: this.hasBackgroundMedia, image: this.backgroundSrc }), h("div", { class: "content-container", ref: (el) => this.contentContainerElement = el }, h(Sidepanel, { title: this.mainTitle, textColor: this.primaryColor, image: this.sidepanelImage }), h(MainContent, { subtitle: this.subtitle, textColor: this.primaryColor }, h(LoginForm, { buttonColor: this.textColor, ssoOnly: this.ssoOnly, fieldTitleColor: this.primaryColor, getInputLabel: this.getInputLabel.bind(this), getDefaultInputValue: this.getDefaultInputValue.bind(this), getInputValue: this.getInputValue.bind(this), focusedInput: this.focusedInput, host: this.host, bindReference: this.bindReference.bind(this), onIconClicked: this.onIconClicked.bind(this), onInputChanged: this.onInputChanged.bind(this), onInputFocused: this.onInputFocused.bind(this), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.validateAndLogin(), onFormSubmit: (e) => this.onFormSubmit(e), onShowPassword: this.onShowPassword.bind(this), showPassword: this.showPassword, loginButtonRef: (el) => this.loginButtonElement = el, helpButtonElement: this.getButton('HELP', () => this.onForgotPassword()), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }), h(LoginOptions, { ssoOnly: this.ssoOnly, hideGoogleLogin: this.hideGoogleLogin, hideAdvancedLogin: this.hideAdvancedLogin, hasCustomBackground: this.hasCustomBackground, dividerColor: this.primaryColor, googleLoginButtonElement: this.getButton('GOOGLE', () => this.onGoogleLogin()), ssoLoginButtonElement: this.getButton('SSO', () => this.onAdvancedLogin()) }))), h(Footer, { hasCustomBackground: this.hasCustomBackground, copyrightMessage: this.copyrightMessage, textColor: this.primaryColor, version: this.version, onClick: () => {
354
+ } }, h(Header, { error: this.error, logo: this.logo, title: this.mainTitle, textColor: this.primaryColor, closeClick: () => this.onAlertClosed() }), h(Background, { hasBackgroundMedia: this.hasBackgroundMedia, image: this.backgroundSrc }), h("div", { class: "content-container", ref: (el) => this.contentContainerElement = el }, h(Sidepanel, { title: this.mainTitle, textColor: this.primaryColor, image: this.sidepanelImage }), h(MainContent, { subtitle: this.subtitle, textColor: this.primaryColor }, h(LoginForm, { buttonColor: this.textColor, ssoOnly: this.ssoOnly, fieldTitleColor: this.primaryColor, getInputLabel: this.getInputLabel.bind(this), getDefaultInputValue: this.getDefaultInputValue.bind(this), getInputValue: this.getInputValue.bind(this), focusedInput: this.focusedInput, host: this.host, bindReference: this.bindReference.bind(this), onIconClicked: this.onIconClicked.bind(this), onInputChanged: this.onInputChanged.bind(this), onInputFocused: this.onInputFocused.bind(this), onInputBlurred: () => this.onInputBlurred(), onEnterPressed: () => this.validateAndLogin(), onFormSubmit: (e) => this.onFormSubmit(e), onShowPassword: this.onShowPassword.bind(this), showPassword: this.showPassword, loginButtonRef: (el) => this.loginButtonElement = el, helpButtonElement: this.getButton('HELP', () => this.onForgotPassword()), magicButtonElement: this.getButton('MAGIC', () => this.magicLinkModalRequested.emit(true)), ssoLoginButtonElement: this.getButton('SSO-DEFAULT', () => this.onAdvancedLogin()), clearInput: this.clearInput.bind(this), isWhitelabel: this.isWhitelabel }), h(LoginOptions, { ssoOnly: this.ssoOnly, hideGoogleLogin: this.hideGoogleLogin, hideAdvancedLogin: this.hideAdvancedLogin, hasCustomBackground: this.hasCustomBackground, dividerColor: this.primaryColor, googleLoginButtonElement: this.getButton('GOOGLE', () => this.onGoogleLogin()), ssoLoginButtonElement: this.getButton('SSO', () => this.onAdvancedLogin()), host: this.host }))), h(Footer, { hasCustomBackground: this.hasCustomBackground, copyrightMessage: this.copyrightMessage, textColor: this.primaryColor, version: this.version, onClick: () => {
349
355
  if (this.ssoOnly) {
350
356
  this.ssoOnly = false;
351
357
  }