@everymatrix/general-input 1.22.9 → 1.22.10

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 (31) hide show
  1. package/dist/cjs/checkbox-group-input_10.cjs.entry.js +10 -10
  2. package/dist/cjs/toggle-checkbox-input.cjs.entry.js +1 -1
  3. package/dist/collection/components/checkbox-group-input/checkbox-group-input.css +5 -5
  4. package/dist/collection/components/checkbox-input/checkbox-input.css +5 -5
  5. package/dist/collection/components/date-input/date-input.css +18 -18
  6. package/dist/collection/components/email-input/email-input.css +20 -20
  7. package/dist/collection/components/number-input/number-input.css +18 -18
  8. package/dist/collection/components/password-input/password-input.css +24 -24
  9. package/dist/collection/components/radio-input/radio-input.css +4 -4
  10. package/dist/collection/components/select-input/select-input.css +16 -17
  11. package/dist/collection/components/tel-input/tel-input.css +19 -21
  12. package/dist/collection/components/text-input/text-input.css +20 -21
  13. package/dist/collection/components/toggle-checkbox-input/toggle-checkbox-input.css +5 -5
  14. package/dist/components/checkbox-group-input2.js +1 -1
  15. package/dist/components/checkbox-input2.js +1 -1
  16. package/dist/components/date-input2.js +1 -1
  17. package/dist/components/email-input2.js +1 -1
  18. package/dist/components/general-input2.js +1 -1
  19. package/dist/components/number-input2.js +1 -1
  20. package/dist/components/password-input2.js +1 -1
  21. package/dist/components/radio-input2.js +1 -1
  22. package/dist/components/select-input2.js +1 -1
  23. package/dist/components/tel-input2.js +1 -1
  24. package/dist/components/text-input2.js +1 -1
  25. package/dist/esm/checkbox-group-input_10.entry.js +10 -10
  26. package/dist/esm/toggle-checkbox-input.entry.js +1 -1
  27. package/dist/general-input/general-input.esm.js +1 -1
  28. package/dist/general-input/{p-2b4be21a.entry.js → p-1a8dc278.entry.js} +79 -79
  29. package/dist/general-input/p-d6a5269a.entry.js +1 -0
  30. package/package.json +1 -1
  31. package/dist/general-input/p-916a1319.entry.js +0 -1
package/dist/cjs/checkbox-group-input_10.cjs.entry.js CHANGED
@@ -14331,7 +14331,7 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
14331
14331
 
14332
14332
  defineCustomElement(CheckboxGroup);
14333
14333
 
14334
- const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkboxgroup{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}";
14334
+ const checkboxGroupInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkboxgroup{font-family:\"Roboto\";font-style:normal;font-size:15px}.checkboxgroup__wrapper{position:relative}.checkboxgroup__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.checkboxgroup__wrapper--relative{position:relative;display:inline}.checkboxgroup__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:14px}.checkboxgroup__label-text{font-size:16px}.checkboxgroup__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkboxgroup__tooltip-icon{width:16px;height:auto}.checkboxgroup__tooltip{position:absolute;top:0;right:0;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkboxgroup__tooltip.visible{opacity:1}";
14335
14335
 
14336
14336
  const CheckboxGroupInput = class {
14337
14337
  constructor(hostRef) {
@@ -14444,7 +14444,7 @@ const CheckboxGroupInput = class {
14444
14444
  };
14445
14445
  CheckboxGroupInput.style = checkboxGroupInputCss;
14446
14446
 
14447
- const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkbox__tooltip.visible{opacity:1}";
14447
+ const checkboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.checkbox{font-family:\"Roboto\";font-style:normal}.checkbox__wrapper{display:flex;gap:10px;position:relative;align-items:baseline}.checkbox__wrapper--flex{display:flex;gap:5px}.checkbox__wrapper--relative{position:relative}.checkbox__input{transform:scale(1.307, 1.307);margin-left:2px}.checkbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:14px}.checkbox__label-text{font-size:16px}.checkbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.checkbox__tooltip-icon{width:16px;height:auto}.checkbox__tooltip{position:absolute;top:0;right:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.checkbox__tooltip.visible{opacity:1}";
14448
14448
 
14449
14449
  const CheckboxInput = class {
14450
14450
  constructor(hostRef) {
@@ -29617,7 +29617,7 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
29617
29617
  return date.getTime() < dateToCompare.getTime();
29618
29618
  }
29619
29619
 
29620
- const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:#979797}.date__wrapper--autofilled .date__input::part(input-field){color:#979797}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841;position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){border-color:#3E3E3E}.date__input[invalid]::part(input-field){border-color:#cc0000b3}.date__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
29620
+ const dateInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.date{font-family:\"Roboto\";font-style:normal}.date__wrapper{position:relative;width:100%;padding-top:26px}.date__wrapper--autofilled{pointer-events:none}.date__wrapper--autofilled .date__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__wrapper--autofilled .date__input::part(input-field){color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.date__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));position:absolute;top:0;left:0}.date__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.date__input{border:none;width:inherit;position:relative}.date__input[focused]::part(input-field){outline-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.date__input[invalid]::part(input-field){border-color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.date__input::part(input-field){font-family:inherit;border-radius:5px;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;line-height:18px}.date__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.date__tooltip-icon{position:absolute;right:0;bottom:10px}.date__tooltip{position:absolute;bottom:35px;right:10px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.date__tooltip.visible{opacity:1}";
29621
29621
 
29622
29622
  const DateInput = class {
29623
29623
  constructor(hostRef) {
@@ -29747,7 +29747,7 @@ const DateInput = class {
29747
29747
  };
29748
29748
  DateInput.style = dateInputCss;
29749
29749
 
29750
- const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:#979797}.email__wrapper--autofilled .email__input{color:#979797}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.email__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.email__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.email__input:focus{outline-color:#3E3E3E}.email__input--invalid{border:2px solid #cc0000b3}.email__input::placeholder{color:#979797}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
29750
+ const emailInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.email{font-family:\"Roboto\";font-style:normal}.email__wrapper{position:relative;width:100%}.email__wrapper--autofilled{pointer-events:none}.email__wrapper--autofilled .email__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__wrapper--autofilled .email__input{color:var(--emfe-w-color-black, #000000)}.email__wrapper--flex{display:flex;gap:5px}.email__wrapper--relative{position:relative}.email__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.email__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.email__input{font-family:inherit;border-radius:5px;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;line-height:18px;position:relative}.email__input:focus{outline-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.email__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.email__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.email__tooltip-icon{width:16px;height:auto}.email__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.email__tooltip.visible{opacity:1}";
29751
29751
 
29752
29752
  const EmailInput = class {
29753
29753
  constructor(hostRef) {
@@ -29883,7 +29883,7 @@ const EmailInput = class {
29883
29883
  };
29884
29884
  EmailInput.style = emailInputCss;
29885
29885
 
29886
- const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--autofilled{pointer-events:none}.number__wrapper--autofilled .number__label{color:#979797}.number__wrapper--autofilled .number__input{color:#979797}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.number__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.number__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:2px solid #cc0000b3}.number__input::placeholder{color:#979797}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.number__tooltip-icon{width:16px;height:auto}.number__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.number__tooltip.visible{opacity:1}";
29886
+ const numberInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.number{font-family:\"Roboto\";font-style:normal}.number__wrapper{position:relative;width:100%}.number__wrapper--autofilled{pointer-events:none}.number__wrapper--autofilled .number__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.number__wrapper--autofilled .number__input{color:var(--emfe-w-color-black, #000000)}.number__wrapper--flex{display:flex;gap:5px}.number__wrapper--relative{position:relative}.number__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.number__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.number__input{font-family:inherit;border-radius:5px;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;line-height:18px;position:relative;-moz-appearance:textfield;}.number__input:focus{outline-color:#3E3E3E}.number__input::-webkit-outer-spin-button,.number__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.number__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.number__input::placeholder{color:#979797}.number__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.number__tooltip-icon{width:16px;height:auto}.number__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.number__tooltip.visible{opacity:1}";
29887
29887
 
29888
29888
  const NumberInput = class {
29889
29889
  constructor(hostRef) {
@@ -30789,7 +30789,7 @@ class PasswordField extends TextField {
30789
30789
 
30790
30790
  defineCustomElement(PasswordField);
30791
30791
 
30792
- const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{position:relative;width:100%}.password__wrapper--autofilled{pointer-events:none}.password__wrapper--autofilled .password__label{color:#979797}.password__wrapper--autofilled .password__input::part(input-field){color:#979797}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.password__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.password__input{width:inherit;border:none;margin-bottom:5px}.password__input[focused]::part(input-field){border-color:#3E3E3E}.password__input[invalid]::part(input-field){border-color:#cc0000b3}.password__input::part(input-field){border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;width:100%;position:relative;border:2px solid #DEE1EE}.password__input>input:placeholder-shown{color:#979797}.password__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.password__complexity{position:relative;padding:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;margin-top:20px;font-weight:300;background:#FFFFFF;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;height:150px;border:1px solid #B0B0B0}.password__complexity--strength{display:flex;justify-content:space-evenly}.password__complexity--strength meter::-webkit-meter-optimum-value{background:#1F1F1F}.password__complexity--strength meter::-moz-meter-bar{background:#B0B0B0}.password__complexity--hidden{display:none}.password__complexity--text-bold{font-weight:500}.password__complexity--checkbox{margin-right:5px}.password__complexity:after{content:\"\";position:absolute;width:25px;height:25px;border-top:1px solid #B0B0B0;border-right:0 solid #B0B0B0;border-left:1px solid #B0B0B0;border-bottom:0 solid #B0B0B0;bottom:92%;left:50%;margin-left:-25px;transform:rotate(45deg);margin-top:-25px;background-color:#FFFFFF}.password__tooltip-icon{width:16px;height:auto}.password__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.password__tooltip.visible{opacity:1}";
30792
+ const passwordInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.password{font-family:\"Roboto\";font-style:normal}.password__wrapper{position:relative;width:100%}.password__wrapper--autofilled{pointer-events:none}.password__wrapper--autofilled .password__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.password__wrapper--autofilled .password__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.password__wrapper--flex{display:flex;gap:5px}.password__wrapper--relative{position:relative}.password__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.password__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.password__input{width:inherit;border:none;margin-bottom:5px}.password__input[focused]::part(input-field){outline-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.password__input[invalid]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.password__input::part(input-field){border-radius:5px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;position:relative}.password__input>input:placeholder-shown{color:var(--emfe-w-color-gray-150, #828282)}.password__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.password__complexity{position:relative;padding:10px;display:flex;flex-direction:column;gap:20px;justify-content:center;margin-top:20px;font-weight:300;background:var(--emfe-w-color-white, #FFFFFF);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:150px;border:1px solid #B0B0B0}.password__complexity--strength{display:flex;justify-content:space-evenly}.password__complexity--strength meter::-webkit-meter-optimum-value{background:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.password__complexity--strength meter::-moz-meter-bar{background:#B0B0B0}.password__complexity--hidden{display:none}.password__complexity--text-bold{font-weight:500}.password__complexity--checkbox{margin-right:5px}.password__complexity:after{content:\"\";position:absolute;width:25px;height:25px;border-top:1px solid var(--emfe-w-color-gray-150, #828282);border-right:0 solid var(--emfe-w-color-gray-150, #828282);border-left:1px solid var(--emfe-w-color-gray-150, #828282);border-bottom:0 solid var(--emfe-w-color-gray-150, #828282);bottom:92%;left:50%;margin-left:-25px;transform:rotate(45deg);margin-top:-25px;background-color:var(--emfe-w-color-white, #FFFFFF)}.password__tooltip-icon{width:16px;height:auto}.password__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-150, #828282);color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.password__tooltip.visible{opacity:1}";
30793
30793
 
30794
30794
  const PasswordInput = class {
30795
30795
  constructor(hostRef) {
@@ -31007,7 +31007,7 @@ const PasswordInput = class {
31007
31007
  };
31008
31008
  PasswordInput.style = passwordInputCss;
31009
31009
 
31010
- const radioInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.radio__fieldset{border:none;position:relative}.radio__wrapper{display:flex;gap:5px}.radio__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.radio__tooltip-icon{position:absolute;right:0;bottom:10px}.radio__tooltip{position:absolute;bottom:35px;right:10px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.radio__tooltip.visible{opacity:1}";
31010
+ const radioInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.radio__fieldset{border:none;position:relative}.radio__wrapper{display:flex;gap:5px}.radio__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.radio__tooltip-icon{position:absolute;right:0;bottom:10px}.radio__tooltip{position:absolute;bottom:35px;right:10px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.radio__tooltip.visible{opacity:1}";
31011
31011
 
31012
31012
  const RadioInput = class {
31013
31013
  constructor(hostRef) {
@@ -35598,7 +35598,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
35598
35598
 
35599
35599
  defineCustomElement(ComboBox);
35600
35600
 
35601
- const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:#979797}.select__wrapper--autofilled .select__input::part(input-field){color:#979797}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.select__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:#3E3E3E}.select__input[invalid]::part(input-field){border-color:#cc0000b3}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:#1F1F1F}.select__input vaadin-month-calendar::part(selected date){background-color:red}.select__input::part(input-field){border-radius:4px;background-color:#FFFFFF;border:2px solid #DEE1EE;color:#2A2E3F;border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}";
35601
+ const selectInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.select{font-family:\"Roboto\";font-style:normal}.select__wrapper{position:relative;width:100%}.select__wrapper--autofilled{pointer-events:none}.select__wrapper--autofilled .select__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__wrapper--autofilled .select__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.select__wrapper--flex{display:flex;gap:5px}.select__wrapper--relative{position:relative}.select__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.select__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.select__input{border:none;width:inherit;position:relative}.select__input[focused]::part(input-field){border-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.select__input[invalid]::part(input-field){border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input vaadin-date-picker-overlay-content>vaadin-button{color:var(--emfe-w-color-black, #000000)}.select__input vaadin-month-calendar::part(selected date){background-color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__input::part(input-field){border-radius:5px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.select__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.select__tooltip-icon{width:16px;height:auto}.select__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.select__tooltip.visible{opacity:1}";
35602
35602
 
35603
35603
  const SelectInput = class {
35604
35604
  constructor(hostRef) {
@@ -35735,7 +35735,7 @@ const SelectInput = class {
35735
35735
  };
35736
35736
  SelectInput.style = selectInputCss;
35737
35737
 
35738
- const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:#979797}.tel__wrapper--autofilled .tel__input::part(input-field){color:#979797}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:2px solid #DEE1EE}.tel__wrapper--flex:focus-within{border:2px solid #3E3E3E}.tel__wrapper--flex--invalid{border:2px solid #cc0000b3}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.tel__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 4px 4px 0;background-color:#DEE1EE;color:#1F1F1F;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;border:none;padding:10px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.tel__tooltip-icon{width:16px;height:auto}.tel__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.tel__tooltip.visible{opacity:1}";
35738
+ const telInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.tel{font-family:\"Roboto\";font-style:normal}.tel__wrapper{position:relative;width:100%}.tel__wrapper--autofilled{pointer-events:none}.tel__wrapper--autofilled .tel__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.tel__wrapper--autofilled .tel__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.tel__wrapper--flex{width:inherit;display:flex;align-items:stretch;border-radius:4px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6)}.tel__wrapper--flex:focus-within{outline-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.tel__wrapper--flex--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.tel__wrapper--flex-label{display:flex;gap:5px}.tel__wrapper--flex--relative{position:relative}.tel__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.tel__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.tel__prefix{width:120px}.tel__prefix[focus]{outline:none}.tel__prefix::part(input-field){border-radius:0 5px 5px 0;background-color:var(--emfe-w-color-white, #FFFFFF);color:var(--emfe-w-color-black, #000000);font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px}.tel__input{font-family:inherit;border-radius:5px;width:100%;height:44px;color:var(--emfe-w-color-black, #000000);background-color:transparent;border:none;padding:10px 20px;width:inherit;position:relative;-moz-appearance:textfield;}.tel__input:focus{outline:none}.tel__input::-webkit-outer-spin-button,.tel__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tel__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.tel__tooltip-icon{width:16px;height:auto}.tel__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.tel__tooltip.visible{opacity:1}";
35739
35739
 
35740
35740
  const TelInput = class {
35741
35741
  constructor(hostRef) {
@@ -35894,7 +35894,7 @@ const TelInput = class {
35894
35894
  };
35895
35895
  TelInput.style = telInputCss;
35896
35896
 
35897
- const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:#979797}.text__wrapper--autofilled .text__input::part(input-field){color:#979797}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:#2A3841}.text__label--required::after{content:\"*\";font-family:inherit;color:#2A3841;margin-left:2px}.text__input{border-radius:4px;background-color:transparent;font-family:inherit;font-style:normal;font-weight:300;font-size:16px;line-height:19px;color:#2A2E3F;padding:10px 20px;width:inherit;position:relative;border:2px solid #DEE1EE}.text__input:focus{outline-color:#3E3E3E}.text__input--invalid{border:2px solid #cc0000b3}.text__input::placeholder{color:#979797}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
35897
+ const textInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.text{font-family:\"Roboto\";font-style:normal}.text__wrapper{position:relative;width:100%}.text__wrapper--autofilled{pointer-events:none}.text__wrapper--autofilled .text__label{color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__wrapper--autofilled .text__input::part(input-field){color:var(--emfe-w-color-black, #000000)}.text__wrapper--flex{display:flex;gap:5px}.text__wrapper--relative{position:relative}.text__label{font-family:inherit;font-style:normal;font-weight:500;font-size:16px;line-height:20px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000))}.text__label--required::after{content:\"*\";font-family:inherit;color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));margin-left:2px}.text__input{font-family:inherit;border-radius:5px;width:100%;height:44px;border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-color-black, #000000);border-radius:5px;box-sizing:border-box;padding:5px 15px;font-size:16px;line-height:18px}.text__input:focus{outline-color:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C))}.text__input--invalid{border:1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__input::placeholder{color:var(--emfe-w-color-gray-150, #828282)}.text__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.text__tooltip-icon{width:16px;height:auto}.text__tooltip{position:absolute;top:0;left:20px;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.text__tooltip.visible{opacity:1}";
35898
35898
 
35899
35899
  const TextInput = class {
35900
35900
  constructor(hostRef) {
package/dist/cjs/toggle-checkbox-input.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-132a0774.js');
6
6
  const locale_utils = require('./locale.utils-7665b010.js');
7
7
  const tooltipIcon = require('./tooltipIcon-092a795f.js');
8
8
 
9
- const toggleCheckboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.togglecheckbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.togglecheckbox__wrapper{position:relative}.togglecheckbox__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px}.togglecheckbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:#2B2D3F;line-height:14px}.togglecheckbox__label-text{font-size:16px}.togglecheckbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:#cc0000b3}.togglecheckbox__tooltip-icon{width:16px;height:auto}.togglecheckbox__tooltip{position:absolute;top:0;right:0;background-color:#FFFFFF;border:1px solid #B0B0B0;color:#2B2D3F;padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.togglecheckbox__tooltip.visible{opacity:1}.togglecheckbox__fields-wrapper{margin-top:40px;display:flex;flex-direction:column;gap:40px}.hidden{display:none}";
9
+ const toggleCheckboxInputCss = "*,*::before,*::after{padding:0;margin:0;box-sizing:border-box}.togglecheckbox{font-family:\"Roboto\";font-style:normal;font-size:15px}.togglecheckbox__wrapper{position:relative}.togglecheckbox__wrapper--flex{display:flex;gap:5px;align-content:flex-start}.togglecheckbox__wrapper--relative{position:relative;display:inline}.togglecheckbox__input{transform:scale(1.307, 1.307);margin-left:2px}.togglecheckbox__label{font-style:inherit;font-family:inherit;font-weight:400;font-size:16px;color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));line-height:14px}.togglecheckbox__label-text{font-size:16px}.togglecheckbox__error-message{position:absolute;top:calc(100% + 5px);left:0;color:var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909))}.togglecheckbox__tooltip-icon{width:16px;height:auto}.togglecheckbox__tooltip{position:absolute;top:0;right:0;background-color:var(--emfe-w-color-white, #FFFFFF);border:1px solid var(--emfe-w-color-gray-100, #E6E6E6);color:var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));padding:10px;border-radius:5px;opacity:0;transition:opacity 0.3s ease-in-out;z-index:10}.togglecheckbox__tooltip.visible{opacity:1}.togglecheckbox__fields-wrapper{margin-top:40px;display:flex;flex-direction:column;gap:40px}.hidden{display:none}";
10
10
 
11
11
  const ToggleCheckboxInput = class {
12
12
  constructor(hostRef) {
package/dist/collection/components/checkbox-group-input/checkbox-group-input.css CHANGED
@@ -28,7 +28,7 @@
28
28
  font-family: inherit;
29
29
  font-weight: 400;
30
30
  font-size: 16px;
31
- color: #2B2D3F;
31
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
32
32
  line-height: 14px;
33
33
  }
34
34
  .checkboxgroup__label-text {
@@ -38,7 +38,7 @@
38
38
  position: absolute;
39
39
  top: calc(100% + 5px);
40
40
  left: 0;
41
- color: #cc0000b3;
41
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
42
42
  }
43
43
  .checkboxgroup__tooltip-icon {
44
44
  width: 16px;
@@ -48,9 +48,9 @@
48
48
  position: absolute;
49
49
  top: 0;
50
50
  right: 0;
51
- background-color: #FFFFFF;
52
- border: 1px solid #B0B0B0;
53
- color: #2B2D3F;
51
+ background-color: var(--emfe-w-color-white, #FFFFFF);
52
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
53
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
54
54
  padding: 10px;
55
55
  border-radius: 5px;
56
56
  opacity: 0;
package/dist/collection/components/checkbox-input/checkbox-input.css CHANGED
@@ -32,7 +32,7 @@
32
32
  font-family: inherit;
33
33
  font-weight: 400;
34
34
  font-size: 16px;
35
- color: #2B2D3F;
35
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
36
36
  line-height: 14px;
37
37
  }
38
38
  .checkbox__label-text {
@@ -42,7 +42,7 @@
42
42
  position: absolute;
43
43
  top: calc(100% + 5px);
44
44
  left: 0;
45
- color: #cc0000b3;
45
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
46
46
  }
47
47
  .checkbox__tooltip-icon {
48
48
  width: 16px;
@@ -52,9 +52,9 @@
52
52
  position: absolute;
53
53
  top: 0;
54
54
  right: 20px;
55
- background-color: #FFFFFF;
56
- border: 1px solid #B0B0B0;
57
- color: #2B2D3F;
55
+ background-color: var(--emfe-w-color-white, #FFFFFF);
56
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
57
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
58
58
  padding: 10px;
59
59
  border-radius: 5px;
60
60
  opacity: 0;
package/dist/collection/components/date-input/date-input.css CHANGED
@@ -19,10 +19,10 @@
19
19
  pointer-events: none;
20
20
  }
21
21
  .date__wrapper--autofilled .date__label {
22
- color: #979797;
22
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
23
23
  }
24
24
  .date__wrapper--autofilled .date__input::part(input-field) {
25
- color: #979797;
25
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
26
26
  }
27
27
  .date__label {
28
28
  font-family: inherit;
@@ -30,7 +30,7 @@
30
30
  font-weight: 500;
31
31
  font-size: 16px;
32
32
  line-height: 20px;
33
- color: #2A3841;
33
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
34
34
  position: absolute;
35
35
  top: 0;
36
36
  left: 0;
@@ -38,7 +38,7 @@
38
38
  .date__label--required::after {
39
39
  content: "*";
40
40
  font-family: inherit;
41
- color: #2A3841;
41
+ color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
42
42
  margin-left: 2px;
43
43
  }
44
44
  .date__input {
@@ -47,23 +47,23 @@
47
47
  position: relative;
48
48
  }
49
49
  .date__input[focused]::part(input-field) {
50
- border-color: #3E3E3E;
50
+ outline-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
51
51
  }
52
52
  .date__input[invalid]::part(input-field) {
53
- border-color: #cc0000b3;
53
+ border-color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
54
54
  }
55
55
  .date__input::part(input-field) {
56
- border-radius: 4px;
57
- background-color: #FFFFFF;
58
- border: 2px solid #DEE1EE;
59
- color: #2A2E3F;
60
- border-radius: 4px;
61
- background-color: transparent;
62
56
  font-family: inherit;
63
- font-style: normal;
64
- font-weight: 300;
57
+ border-radius: 5px;
58
+ width: 100%;
59
+ height: 44px;
60
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
61
+ color: var(--emfe-w-color-black, #000000);
62
+ border-radius: 5px;
63
+ box-sizing: border-box;
64
+ padding: 5px 15px;
65
65
  font-size: 16px;
66
- line-height: 19px;
66
+ line-height: 18px;
67
67
  }
68
68
  .date__error-message {
69
69
  position: absolute;
@@ -80,9 +80,9 @@
80
80
  position: absolute;
81
81
  bottom: 35px;
82
82
  right: 10px;
83
- background-color: #FFFFFF;
84
- border: 1px solid #B0B0B0;
85
- color: #2B2D3F;
83
+ background-color: var(--emfe-w-color-white, #FFFFFF);
84
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
85
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
86
86
  padding: 10px;
87
87
  border-radius: 5px;
88
88
  opacity: 0;
package/dist/collection/components/email-input/email-input.css CHANGED
@@ -18,10 +18,10 @@
18
18
  pointer-events: none;
19
19
  }
20
20
  .email__wrapper--autofilled .email__label {
21
- color: #979797;
21
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
22
22
  }
23
23
  .email__wrapper--autofilled .email__input {
24
- color: #979797;
24
+ color: var(--emfe-w-color-black, #000000);
25
25
  }
26
26
  .email__wrapper--flex {
27
27
  display: flex;
@@ -36,42 +36,42 @@
36
36
  font-weight: 500;
37
37
  font-size: 16px;
38
38
  line-height: 20px;
39
- color: #2A3841;
39
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
40
40
  }
41
41
  .email__label--required::after {
42
42
  content: "*";
43
43
  font-family: inherit;
44
- color: #2A3841;
44
+ color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
45
45
  margin-left: 2px;
46
46
  }
47
47
  .email__input {
48
- border-radius: 4px;
49
- background-color: transparent;
50
48
  font-family: inherit;
51
- font-style: normal;
52
- font-weight: 300;
49
+ border-radius: 5px;
50
+ width: 100%;
51
+ height: 44px;
52
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
53
+ color: var(--emfe-w-color-black, #000000);
54
+ border-radius: 5px;
55
+ box-sizing: border-box;
56
+ padding: 5px 15px;
53
57
  font-size: 16px;
54
- line-height: 19px;
55
- color: #2A2E3F;
56
- padding: 10px 20px;
57
- width: inherit;
58
+ line-height: 18px;
58
59
  position: relative;
59
- border: 2px solid #DEE1EE;
60
60
  }
61
61
  .email__input:focus {
62
- outline-color: #3E3E3E;
62
+ outline-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
63
63
  }
64
64
  .email__input--invalid {
65
- border: 2px solid #cc0000b3;
65
+ border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
66
66
  }
67
67
  .email__input::placeholder {
68
- color: #979797;
68
+ color: var(--emfe-w-color-gray-150, #828282);
69
69
  }
70
70
  .email__error-message {
71
71
  position: absolute;
72
72
  top: calc(100% + 5px);
73
73
  left: 0;
74
- color: #cc0000b3;
74
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
75
75
  }
76
76
  .email__tooltip-icon {
77
77
  width: 16px;
@@ -81,9 +81,9 @@
81
81
  position: absolute;
82
82
  top: 0;
83
83
  left: 20px;
84
- background-color: #FFFFFF;
85
- border: 1px solid #B0B0B0;
86
- color: #2B2D3F;
84
+ background-color: var(--emfe-w-color-white, #FFFFFF);
85
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
86
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
87
87
  padding: 10px;
88
88
  border-radius: 5px;
89
89
  opacity: 0;
package/dist/collection/components/number-input/number-input.css CHANGED
@@ -18,10 +18,10 @@
18
18
  pointer-events: none;
19
19
  }
20
20
  .number__wrapper--autofilled .number__label {
21
- color: #979797;
21
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
22
22
  }
23
23
  .number__wrapper--autofilled .number__input {
24
- color: #979797;
24
+ color: var(--emfe-w-color-black, #000000);
25
25
  }
26
26
  .number__wrapper--flex {
27
27
  display: flex;
@@ -36,27 +36,27 @@
36
36
  font-weight: 500;
37
37
  font-size: 16px;
38
38
  line-height: 20px;
39
- color: #2A3841;
39
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
40
40
  }
41
41
  .number__label--required::after {
42
42
  content: "*";
43
43
  font-family: inherit;
44
- color: #2A3841;
44
+ color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
45
45
  margin-left: 2px;
46
46
  }
47
47
  .number__input {
48
- border-radius: 4px;
49
- background-color: transparent;
50
48
  font-family: inherit;
51
- font-style: normal;
52
- font-weight: 300;
49
+ border-radius: 5px;
50
+ width: 100%;
51
+ height: 44px;
52
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
53
+ color: var(--emfe-w-color-black, #000000);
54
+ border-radius: 5px;
55
+ box-sizing: border-box;
56
+ padding: 5px 15px;
53
57
  font-size: 16px;
54
- line-height: 19px;
55
- color: #2A2E3F;
56
- padding: 10px 20px;
57
- width: inherit;
58
+ line-height: 18px;
58
59
  position: relative;
59
- border: 2px solid #DEE1EE;
60
60
  /* Firefox */
61
61
  -moz-appearance: textfield;
62
62
  /* Chrome, Safari, Edge, Opera */
@@ -69,7 +69,7 @@
69
69
  margin: 0;
70
70
  }
71
71
  .number__input--invalid {
72
- border: 2px solid #cc0000b3;
72
+ border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
73
73
  }
74
74
  .number__input::placeholder {
75
75
  color: #979797;
@@ -78,7 +78,7 @@
78
78
  position: absolute;
79
79
  top: calc(100% + 5px);
80
80
  left: 0;
81
- color: #cc0000b3;
81
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
82
82
  }
83
83
  .number__tooltip-icon {
84
84
  width: 16px;
@@ -88,9 +88,9 @@
88
88
  position: absolute;
89
89
  top: 0;
90
90
  left: 20px;
91
- background-color: #FFFFFF;
92
- border: 1px solid #B0B0B0;
93
- color: #2B2D3F;
91
+ background-color: var(--emfe-w-color-white, #FFFFFF);
92
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
93
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
94
94
  padding: 10px;
95
95
  border-radius: 5px;
96
96
  opacity: 0;
package/dist/collection/components/password-input/password-input.css CHANGED
@@ -18,10 +18,10 @@
18
18
  pointer-events: none;
19
19
  }
20
20
  .password__wrapper--autofilled .password__label {
21
- color: #979797;
21
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
22
22
  }
23
23
  .password__wrapper--autofilled .password__input::part(input-field) {
24
- color: #979797;
24
+ color: var(--emfe-w-color-black, #000000);
25
25
  }
26
26
  .password__wrapper--flex {
27
27
  display: flex;
@@ -36,12 +36,12 @@
36
36
  font-weight: 500;
37
37
  font-size: 16px;
38
38
  line-height: 20px;
39
- color: #2A3841;
39
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
40
40
  }
41
41
  .password__label--required::after {
42
42
  content: "*";
43
43
  font-family: inherit;
44
- color: #2A3841;
44
+ color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
45
45
  margin-left: 2px;
46
46
  }
47
47
  .password__input {
@@ -50,32 +50,32 @@
50
50
  margin-bottom: 5px;
51
51
  }
52
52
  .password__input[focused]::part(input-field) {
53
- border-color: #3E3E3E;
53
+ outline-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
54
54
  }
55
55
  .password__input[invalid]::part(input-field) {
56
- border-color: #cc0000b3;
56
+ border-color: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
57
57
  }
58
58
  .password__input::part(input-field) {
59
- border-radius: 4px;
59
+ border-radius: 5px;
60
+ background-color: var(--emfe-w-color-white, #FFFFFF);
61
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
62
+ color: var(--emfe-w-color-black, #000000);
60
63
  background-color: transparent;
61
64
  font-family: inherit;
62
65
  font-style: normal;
63
66
  font-weight: 300;
64
67
  font-size: 16px;
65
68
  line-height: 19px;
66
- color: #2A2E3F;
67
- width: 100%;
68
69
  position: relative;
69
- border: 2px solid #DEE1EE;
70
70
  }
71
71
  .password__input > input:placeholder-shown {
72
- color: #979797;
72
+ color: var(--emfe-w-color-gray-150, #828282);
73
73
  }
74
74
  .password__error-message {
75
75
  position: absolute;
76
76
  top: calc(100% + 5px);
77
77
  left: 0;
78
- color: #cc0000b3;
78
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
79
79
  }
80
80
  .password__complexity {
81
81
  position: relative;
@@ -86,10 +86,10 @@
86
86
  justify-content: center;
87
87
  margin-top: 20px;
88
88
  font-weight: 300;
89
- background: #FFFFFF;
90
- -webkit-border-radius: 10px;
91
- -moz-border-radius: 10px;
92
- border-radius: 10px;
89
+ background: var(--emfe-w-color-white, #FFFFFF);
90
+ -webkit-border-radius: 5px;
91
+ -moz-border-radius: 5px;
92
+ border-radius: 5px;
93
93
  height: 150px;
94
94
  border: 1px solid #B0B0B0;
95
95
  }
@@ -98,7 +98,7 @@
98
98
  justify-content: space-evenly;
99
99
  }
100
100
  .password__complexity--strength meter::-webkit-meter-optimum-value {
101
- background: #1F1F1F;
101
+ background: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
102
102
  }
103
103
  .password__complexity--strength meter::-moz-meter-bar {
104
104
  /* Firefox Pseudo Class */
@@ -118,16 +118,16 @@
118
118
  position: absolute;
119
119
  width: 25px;
120
120
  height: 25px;
121
- border-top: 1px solid #B0B0B0;
122
- border-right: 0 solid #B0B0B0;
123
- border-left: 1px solid #B0B0B0;
124
- border-bottom: 0 solid #B0B0B0;
121
+ border-top: 1px solid var(--emfe-w-color-gray-150, #828282);
122
+ border-right: 0 solid var(--emfe-w-color-gray-150, #828282);
123
+ border-left: 1px solid var(--emfe-w-color-gray-150, #828282);
124
+ border-bottom: 0 solid var(--emfe-w-color-gray-150, #828282);
125
125
  bottom: 92%;
126
126
  left: 50%;
127
127
  margin-left: -25px;
128
128
  transform: rotate(45deg);
129
129
  margin-top: -25px;
130
- background-color: #FFFFFF;
130
+ background-color: var(--emfe-w-color-white, #FFFFFF);
131
131
  }
132
132
  .password__tooltip-icon {
133
133
  width: 16px;
@@ -137,8 +137,8 @@
137
137
  position: absolute;
138
138
  top: 0;
139
139
  left: 20px;
140
- background-color: #FFFFFF;
141
- border: 1px solid #B0B0B0;
140
+ background-color: var(--emfe-w-color-white, #FFFFFF);
141
+ border: 1px solid var(--emfe-w-color-gray-150, #828282);
142
142
  color: #2B2D3F;
143
143
  padding: 10px;
144
144
  border-radius: 5px;
package/dist/collection/components/radio-input/radio-input.css CHANGED
@@ -18,7 +18,7 @@
18
18
  position: absolute;
19
19
  top: calc(100% + 5px);
20
20
  left: 0;
21
- color: #cc0000b3;
21
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #ed0909));
22
22
  }
23
23
  .radio__tooltip-icon {
24
24
  position: absolute;
@@ -29,9 +29,9 @@
29
29
  position: absolute;
30
30
  bottom: 35px;
31
31
  right: 10px;
32
- background-color: #FFFFFF;
33
- border: 1px solid #B0B0B0;
34
- color: #2B2D3F;
32
+ background-color: var(--emfe-w-color-white, #FFFFFF);
33
+ border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
34
+ color: var(--emfe-w-registration-typography, var(--emfe-w-color-black, #000000));
35
35
  padding: 10px;
36
36
  border-radius: 5px;
37
37
  opacity: 0;