@vitrosoftware/common-ui-ts 1.1.56 → 1.1.58

package/css/std/controls/dropdown-button/dropdown-button.css

@@ -82,7 +82,7 @@
     position: absolute;
     right: 8px;
     top: -11px;
-    background-image: url(data:image/svg+xml,%3Csvg viewBox=%270 0 16 11%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z%27 fill=%27white%27/%3E%3C/svg%3E%0A);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
 }
 
 .vitro-dropdown-button :global(.dropdown-item) .vitro-icon {

package/css/std/controls/input/input.css

@@ -113,7 +113,7 @@
     display: inline-block;
     color: #D13438;
     font-size: 14px;
-    line-height: 135%;
+    line-height: 19px;
     margin-top: 2px;
     width: 100%;
     text-overflow: ellipsis;

package/css/std/controls/login/login.css

@@ -22,8 +22,8 @@
 
 .vitro-form-login {
     width: 468px;
-    height: 658px;
-    padding: 52px 36px 24px 36px;
+    min-height: 506px;
+    padding: 71px 36px 24px 36px;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
@@ -31,7 +31,7 @@
     background: #fff;
     position: absolute;
     z-index: 100;
-    top: calc(50% - 329px);
+    top: calc(50% - 253px);
     left: calc(50% - 234px);
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
 }
@@ -39,7 +39,7 @@
 .vitro-logo {
     width: 165px;
     height: 57px;
-    margin-bottom: 66px;
+    margin-bottom: 34px;
     background-size: 100%;
     background-position: center;
     /* vitro-logo.svg URL-encoder for SVG */
@@ -52,7 +52,7 @@
     font-family: 'InterMedium';
     font-size: 32px;
     line-height: 135%;
-    margin-bottom: 62px;
+    margin-bottom: 25px;
 }
 
 .vitro-flex {
@@ -61,6 +61,11 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
+    margin-top: 32px;
+    height: 24px;
+}
+
+.vitro-flex.vitro-error {
     margin-top: 11px;
 }
 
@@ -105,14 +110,11 @@
     margin-left: 30px;
 }
 
-.vitro-login-control {
-    width: 100%;
-    position: relative;
-}
-
-.vitro-login-control.vitro-error + .vitro-login-control.vitro-error > div,
-.vitro-login-control + .vitro-login-control.vitro-error > div {
-    margin-bottom: 0px !important;
+.vitro-control,
+.vitro-password-control {
+    margin-bottom: 0;
+    margin-top: 20px;
+    max-height: 69px;
 }
 
 .vitro-control > div {
@@ -151,31 +153,10 @@
     height: 48px !important;
     font-size: 18px !important;
     line-height: 135%;
+    margin-top: 20px;
     box-shadow: 0px 4px 16px 0px rgba(52, 117, 199, 0.15);
 }
 
-.vitro-button-show-password, 
-.vitro-button-hide-password {
-    position: absolute;
-    top: 12px;
-    right: 20px;
-    width: 24px;
-    height: 24px;
-    background-size: 100%;
-    background-position: center;
-    cursor: pointer;
-}
-
-.vitro-button-show-password {
-    /* show-password.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='visible--eye-eyeball-open-view'%3E%3Cpath id='Vector' d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-.vitro-button-hide-password {
-    /* hide-password.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.96875 20L19.9687 4' stroke='%238E98A3' stroke-linecap='round'/%3E%3Cpath d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
-
 .vitro-footer {
     position: absolute;
     bottom: 12px;

package/css/std/controls/password-input/password-input.css

@@ -0,0 +1,21 @@
+.vitro-button-show-password,
+.vitro-button-hide-password {
+    position: absolute;
+    top: 12px;
+    right: 20px;
+    width: 24px;
+    height: 24px;
+    background-size: 100%;
+    background-position: center;
+    cursor: pointer;
+}
+
+.vitro-button-show-password {
+    /* show-password.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='visible--eye-eyeball-open-view'%3E%3Cpath id='Vector' d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-hide-password {
+    /* hide-password.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.96875 20L19.9687 4' stroke='%238E98A3' stroke-linecap='round'/%3E%3Cpath d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}

package/css/std/controls/pdf-viewer/pdf-viewer.css

@@ -1,13 +1,13 @@
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/viewer.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/sketchpad.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/zoom.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/form.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/compare-side-by-side.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/compare.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/custom.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/viewer-theme.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/print.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/debugger.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/viewer.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/sketchpad.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/zoom.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/form.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/compare-side-by-side.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/compare.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/custom.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/viewer-theme.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/print.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/debugger.css');
 
 html[dir='ltr'] body {
     background-color: #F5F6FA;

package/css/std/controls/pdf-viewer/viewer.css

@@ -1266,11 +1266,6 @@ html[dir='ltr'] * {
   }
 }
 
-* {
-  padding: 0;
-  margin: 0;
-}
-
 html[dir='ltr'] {
     background: rgba(237, 237, 240, 1) !important;
 }

package/dist/constants/KeyCode.d.ts

@@ -0,0 +1,3 @@
+export declare class KEY_CODE {
+    static readonly ENTER = 13;
+}

package/dist/controls/ActionHandler/ActionHandler.d.ts

@@ -11,6 +11,7 @@ interface ActionHandlerProps {
     isShow?: boolean;
     isBlockInterface?: boolean;
     isAutoClose?: boolean;
+    processError?: (failResult: any[]) => any;
     onAfterAction?: (error: any, successResult: any, failResult: any) => void;
     onBeforeAction?: () => void;
     onAfterActionClose?: (error: any, successResult: any, failResult: any) => void;

package/dist/controls/Input/Input.d.ts

@@ -18,6 +18,7 @@ interface InputProps {
     isRequired?: boolean;
     isMultiline?: boolean;
     isAutoComplete?: boolean;
+    isError?: boolean;
     isIcon?: boolean;
     onChange?: (value: string, name?: string) => void;
     onBlur?: (e: any) => void;

package/dist/controls/Login/Login.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 interface LoginProps {
     onSubmit: (userName: string, password: string) => any;
     onResetPassword?: () => any;
     onSaveData?: (value: any[] | any, name?: string) => any;
     onRegister?: () => any;
-    userNameErrorText?: string;
-    passwordErrorText?: string;
+    errorMessage?: string;
     emptyErrorText?: string;
     copyright?: string;
     linkItemList?: {
@@ -13,5 +12,5 @@ interface LoginProps {
         url: string;
     }[];
 }
-export declare const Login: (props: LoginProps) => JSX.Element;
+export declare const Login: React.ForwardRefExoticComponent<LoginProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/Login/LoginConstants.d.ts

@@ -1,9 +1,7 @@
 export declare enum LOCALE {
     ERROR_EMPTY = "app.common.login.error.empty",
-    ERROR_WRONG_DATA = "app.common.login.error.wrongData",
-    PLACEHOLDER_NAME = "app.common.login.placeholder.userName",
-    PLACEHOLDER_PASSWORD = "app.common.login.placeholder.password",
-    PLACEHOLDER = "app.common.login.placeholder",
+    FIELD_NAME = "app.common.login.field.userName",
+    FIELD_PASSWORD = "app.common.login.field.password",
     ACTION_SAVE_DATA = "app.common.login.action.saveData",
     ACTION_LOGIN = "app.common.login.action.login",
     ACTION_RESET_PASSWORD = "app.common.login.action.resetPassword",
@@ -12,7 +10,8 @@ export declare enum LOCALE {
     TITLE = "app.common.login.title",
     COPYRIGHT = "app.common.login.copyright"
 }
-export declare enum INPUT_TYPE {
+export declare enum FIELD_NAME {
+    USER_NAME = "userName",
     PASSWORD = "password",
-    TEXT = "text"
+    SAVE_DATA = "saveData"
 }

package/dist/controls/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+interface PasswordInputProps {
+    name?: string;
+    value?: string;
+    height?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    rows?: number;
+    placeholder?: string;
+    label?: string;
+    labelWidth?: number;
+    labelPosition?: string;
+    errorMessage?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isMultiline?: boolean;
+    isAutoComplete?: boolean;
+    isError?: boolean;
+    isIcon?: boolean;
+    onChange?: (value: string, name?: string) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onChangeSize?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+    onKeyPress?: (e: any) => void;
+    onKeyDown?: (e: any) => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<unknown>>;
+export {};

package/dist/controls/PasswordInput/PasswordInputConstants.d.ts

@@ -0,0 +1,4 @@
+export declare enum TYPE {
+    TEXT = "text",
+    PASSWORD = "password"
+}

package/dist/index.css

@@ -1535,7 +1535,7 @@
     position: absolute;
     right: 8px;
     top: -11px;
-    background-image: url(data:image/svg+xml,%3Csvg viewBox=%270 0 16 11%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z%27 fill=%27white%27/%3E%3C/svg%3E%0A);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
 }
 
 ._dropdown-button_vitro-dropdown-button_1myvkhB .dropdown-item ._dropdown-button_vitro-icon_2NCEoeb {
@@ -1895,7 +1895,7 @@
     display: inline-block;
     color: #D13438;
     font-size: 14px;
-    line-height: 135%;
+    line-height: 19px;
     margin-top: 2px;
     width: 100%;
     text-overflow: ellipsis;
@@ -2159,8 +2159,8 @@
 
 ._login_vitro-form-login_2nyw95B {
     width: 468px;
-    height: 658px;
-    padding: 52px 36px 24px 36px;
+    min-height: 506px;
+    padding: 71px 36px 24px 36px;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
@@ -2168,7 +2168,7 @@
     background: #fff;
     position: absolute;
     z-index: 100;
-    top: calc(50% - 329px);
+    top: calc(50% - 253px);
     left: calc(50% - 234px);
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
 }
@@ -2176,7 +2176,7 @@
 ._login_vitro-logo_3-qTjgy {
     width: 165px;
     height: 57px;
-    margin-bottom: 66px;
+    margin-bottom: 34px;
     background-size: 100%;
     background-position: center;
     /* vitro-logo.svg URL-encoder for SVG */
@@ -2189,7 +2189,7 @@
     font-family: 'InterMedium';
     font-size: 32px;
     line-height: 135%;
-    margin-bottom: 62px;
+    margin-bottom: 25px;
 }
 
 ._login_vitro-flex_2CffX6W {
@@ -2198,6 +2198,11 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
+    margin-top: 32px;
+    height: 24px;
+}
+
+._login_vitro-flex_2CffX6W._login_vitro-error_1Nk25em {
     margin-top: 11px;
 }
 
@@ -2243,14 +2248,11 @@
     margin-left: 30px;
 }
 
-._login_vitro-login-control_cksptcC {
-    width: 100%;
-    position: relative;
-}
-
-._login_vitro-login-control_cksptcC._login_vitro-error_1Nk25em + ._login_vitro-login-control_cksptcC._login_vitro-error_1Nk25em > div,
-._login_vitro-login-control_cksptcC + ._login_vitro-login-control_cksptcC._login_vitro-error_1Nk25em > div {
-    margin-bottom: 0px !important;
+._login_vitro-control_3YqxIR2,
+._login_vitro-password-control_2Zp5fJi {
+    margin-bottom: 0;
+    margin-top: 20px;
+    max-height: 69px;
 }
 
 ._login_vitro-control_3YqxIR2 > div {
@@ -2297,31 +2299,10 @@
     height: 48px !important;
     font-size: 18px !important;
     line-height: 135%;
+    margin-top: 20px;
     box-shadow: 0px 4px 16px 0px rgba(52, 117, 199, 0.15);
 }
 
-._login_vitro-button-show-password_3NpbpN5, 
-._login_vitro-button-hide-password_27R-yFe {
-    position: absolute;
-    top: 12px;
-    right: 20px;
-    width: 24px;
-    height: 24px;
-    background-size: 100%;
-    background-position: center;
-    cursor: pointer;
-}
-
-._login_vitro-button-show-password_3NpbpN5 {
-    /* show-password.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='visible--eye-eyeball-open-view'%3E%3Cpath id='Vector' d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-._login_vitro-button-hide-password_27R-yFe {
-    /* hide-password.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.96875 20L19.9687 4' stroke='%238E98A3' stroke-linecap='round'/%3E%3Cpath d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-}
-
 ._login_vitro-footer_1lceaP0 {
     position: absolute;
     bottom: 12px;
@@ -2382,6 +2363,28 @@
     /* copyright.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.98598 5.63043H9.12827C9.07755 5.38373 8.98878 5.167 8.86197 4.98024C8.73746 4.79348 8.58529 4.63669 8.40545 4.50988C8.22791 4.38076 8.03078 4.28393 7.81404 4.21937C7.59731 4.15481 7.37136 4.12253 7.13618 4.12253C6.70732 4.12253 6.31882 4.2309 5.97066 4.44763C5.62481 4.66436 5.34929 4.9837 5.14408 5.40563C4.94119 5.82757 4.83974 6.34519 4.83974 6.9585C4.83974 7.5718 4.94119 8.08943 5.14408 8.51136C5.34929 8.9333 5.62481 9.25264 5.97066 9.46937C6.31882 9.6861 6.70732 9.79447 7.13618 9.79447C7.37136 9.79447 7.59731 9.76219 7.81404 9.69763C8.03078 9.63307 8.22791 9.53738 8.40545 9.41057C8.58529 9.28146 8.73746 9.12352 8.86197 8.93676C8.98878 8.74769 9.07755 8.53096 9.12827 8.28656H9.98598C9.92142 8.64855 9.80383 8.9725 9.63321 9.2584C9.46259 9.5443 9.25047 9.78755 8.99685 9.98814C8.74323 10.1864 8.45848 10.3375 8.1426 10.4412C7.82903 10.545 7.49356 10.5968 7.13618 10.5968C6.53209 10.5968 5.99487 10.4493 5.52452 10.1542C5.05416 9.85903 4.6841 9.43939 4.41434 8.89526C4.14458 8.35112 4.0097 7.70553 4.0097 6.9585C4.0097 6.21146 4.14458 5.56588 4.41434 5.02174C4.6841 4.4776 5.05416 4.05797 5.52452 3.76285C5.99487 3.46772 6.53209 3.32016 7.13618 3.32016C7.49356 3.32016 7.82903 3.37204 8.1426 3.47579C8.45848 3.57955 8.74323 3.73172 8.99685 3.93231C9.25047 4.1306 9.46259 4.37269 9.63321 4.6586C9.80383 4.94219 9.92142 5.26614 9.98598 5.63043ZM6.99784 13.6126C6.26233 13.6126 5.56141 13.5008 4.89507 13.2772C4.23104 13.0535 3.62119 12.7376 3.06553 12.3295C2.51217 11.9237 2.03144 11.443 1.62333 10.8874C1.21754 10.334 0.902812 9.7253 0.679163 9.06126C0.455513 8.39493 0.343688 7.69401 0.343688 6.9585C0.343688 6.22299 0.455513 5.52322 0.679163 4.85919C0.902812 4.19285 1.21754 3.583 1.62333 3.02964C2.03144 2.47398 2.51217 1.99325 3.06553 1.58745C3.62119 1.17935 4.23104 0.863472 4.89507 0.639822C5.56141 0.416173 6.26233 0.304348 6.99784 0.304348C7.73335 0.304348 8.43312 0.416173 9.09715 0.639822C9.76348 0.863472 10.3733 1.17935 10.9267 1.58745C11.4824 1.99325 11.9631 2.47398 12.3689 3.02964C12.777 3.583 13.0929 4.19285 13.3165 4.85919C13.5402 5.52322 13.652 6.22299 13.652 6.9585C13.652 7.69401 13.5402 8.39493 13.3165 9.06126C13.0929 9.7253 12.777 10.334 12.3689 10.8874C11.9631 11.443 11.4824 11.9237 10.9267 12.3295C10.3733 12.7376 9.76348 13.0535 9.09715 13.2772C8.43312 13.5008 7.73335 13.6126 6.99784 13.6126ZM6.99784 12.8103C7.64573 12.8103 8.26134 12.7111 8.84468 12.5128C9.43032 12.3169 9.96638 12.039 10.4529 11.6793C10.9417 11.322 11.3648 10.9 11.7221 10.4135C12.0818 9.92474 12.3597 9.38867 12.5556 8.80534C12.7516 8.2197 12.8496 7.60408 12.8496 6.9585C12.8496 6.31061 12.7516 5.69499 12.5556 5.11166C12.3597 4.52602 12.0818 3.98995 11.7221 3.50346C11.3648 3.01466 10.9417 2.59157 10.4529 2.23419C9.96638 1.87451 9.43032 1.59667 8.84468 1.40069C8.26134 1.20471 7.64573 1.10672 6.99784 1.10672C6.34995 1.10672 5.73318 1.20471 5.14754 1.40069C4.56421 1.59667 4.02814 1.87451 3.53934 2.23419C3.05285 2.59157 2.62976 3.01466 2.27007 3.50346C1.91269 3.98995 1.63601 4.52602 1.44003 5.11166C1.24405 5.69499 1.14606 6.31061 1.14606 6.9585C1.14606 7.60408 1.24405 8.2197 1.44003 8.80534C1.63601 9.38867 1.91269 9.92474 2.27007 10.4135C2.62976 10.9 3.05285 11.322 3.53934 11.6793C4.02814 12.039 4.56421 12.3169 5.14754 12.5128C5.73318 12.7111 6.34995 12.8103 6.99784 12.8103Z' fill='white'/%3E%3C/svg%3E%0A");
 }
+._password-input_vitro-button-show-password_2jL4nM-,
+._password-input_vitro-button-hide-password_vPoUeVl {
+    position: absolute;
+    top: 12px;
+    right: 20px;
+    width: 24px;
+    height: 24px;
+    background-size: 100%;
+    background-position: center;
+    cursor: pointer;
+}
+
+._password-input_vitro-button-show-password_2jL4nM- {
+    /* show-password.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='visible--eye-eyeball-open-view'%3E%3Cpath id='Vector' d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+._password-input_vitro-button-hide-password_vPoUeVl {
+    /* hide-password.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22.6767 10.7074C22.961 11.0618 23.1183 11.5222 23.1183 11.9995C23.1183 12.4769 22.961 12.9373 22.6767 13.2917C20.8767 15.471 16.7795 19.7139 11.9967 19.7139C7.21381 19.7139 3.11667 15.471 1.31667 13.2917C1.03237 12.9373 0.875 12.4769 0.875 11.9995C0.875 11.5222 1.03237 11.0618 1.31667 10.7074C3.11667 8.52807 7.21381 4.28516 11.9967 4.28516C16.7795 4.28516 20.8767 8.52807 22.6767 10.7074Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.96875 20L19.9687 4' stroke='%238E98A3' stroke-linecap='round'/%3E%3Cpath d='M11.9989 15.4275C13.8924 15.4275 15.4275 13.8924 15.4275 11.9989C15.4275 10.1053 13.8924 8.57031 11.9989 8.57031C10.1053 8.57031 8.57031 10.1053 8.57031 11.9989C8.57031 13.8924 10.1053 15.4275 11.9989 15.4275Z' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
 ._date-picker_vitro-control_2AYXegb {
     margin-bottom: 22px;
     width: 100%;

package/dist/index.d.ts

@@ -30,6 +30,7 @@ import { PdfViewer } from './controls/PdfViewer/PdfViewer';
 import { PdfViewerContext } from './controls/PdfViewer/PdfViewerContext';
 import { Login } from './controls/Login/Login';
 import { Input } from './controls/Input/Input';
+import { PasswordInput } from './controls/PasswordInput/PasswordInput';
 import { DatePicker } from './controls/DatePicker/DatePicker';
 import { TimePicker } from './controls/TimePicker/TimePicker';
 import { Button } from './controls/Button/Button';
@@ -113,3 +114,4 @@ export { Search, SearchCriterion };
 export { FieldIterator };
 export { Tooltip, TOOLTIP };
 export { CONTROL };
+export { PasswordInput };