@vitrosoftware/common-ui-ts 1.1.17 → 1.1.20

package/dist/controls/ActivityItem/ActivityItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { DropdownItem } from '../DropdownButton/DropdownItem';
+export interface ActivityItemProps {
+    userName: string;
+    title?: string;
+    userImageUrl?: string;
+    message: string;
+    date?: any;
+    variant?: string;
+    dropdownItemList?: DropdownItem[];
+    onDropdownToggle?: (state: any, e: any) => any;
+    isActive?: boolean;
+    isShowDetail?: boolean;
+    children?: React.ReactNode;
+}
+export declare const ActivityItem: (props: ActivityItemProps) => JSX.Element;

package/dist/controls/Checkbox/Checkbox.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface CheckboxProps {
+    value?: any;
+    onChange?: (value: any[] | any, name?: string) => void;
+    labelPosition?: string;
+    label: string;
+    isDisabled?: boolean;
+    name: string;
+    className?: string;
+}
+export declare const Checkbox: (props: CheckboxProps) => JSX.Element;

package/dist/controls/Icon/Icon.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import '../../../css/std/controls/icon/icon.css';
+interface IconProps {
+    defaultUrl: string;
+    hoverUrl?: string;
+    className?: string;
+    isHover?: boolean;
+    onClick?: () => any;
+}
+export declare const Icon: (props: IconProps) => JSX.Element;
+export {};

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

@@ -2,7 +2,7 @@
 interface LoginProps {
     onSubmit: (userName: string, password: string) => any;
     onResetPassword?: () => any;
-    onSaveData?: () => any;
+    onSaveData?: (value: any[] | any, name?: string) => any;
     onRegister?: () => any;
     userNameErrorText?: string;
     passwordErrorText?: string;

package/dist/controls/TelerikUploader/TelerikUploaderConstants.d.ts

@@ -1,5 +1,4 @@
 export declare enum EVENT {
-    UPLOAD_START = "vitro.upload.start",
     ADD_FILE = "vitro.file.add",
     READY_STATE_CHANGE = "readystatechange"
 }

package/dist/controls/TelerikUploader/TelerikUploaderContextImpl.d.ts

@@ -8,7 +8,7 @@ export declare class TelerikUploaderContextImpl implements TelerikUploaderContex
     private token;
     private settings;
     private localeService;
-    private onUploadComplete;
+    private toggleButtons;
     private successCount;
     private errorCount;
     private fileList;
@@ -16,7 +16,7 @@ export declare class TelerikUploaderContextImpl implements TelerikUploaderContex
     private progressBar;
     private title;
     private subtitle;
-    constructor(uploader: HTMLInputElement, container: HTMLDivElement, dropZone: HTMLDivElement, settings: TelerikUploaderSettings, localeService: LocaleService, onUploadComplete: () => any);
+    constructor(uploader: HTMLInputElement, container: HTMLDivElement, dropZone: HTMLDivElement, settings: TelerikUploaderSettings, localeService: LocaleService, toggleButtons: (show: boolean) => any);
     clearAllFiles(): void;
     private resetUploader;
     private initAuthorization;

package/dist/controls/TelerikUploader/TelerikUploaderSettings.d.ts

@@ -1,11 +1,13 @@
 export interface TelerikUploaderSettings {
     async: {
         saveUrl: string;
-        autoUpload: boolean;
-        batch: boolean;
-        concurrent: boolean;
+        isAutoUpload: boolean;
+        isBatch: boolean;
+        isConcurrent: boolean;
     };
     upload: (e: any) => void;
     success?: (e: any) => void | undefined;
-    directoryDrop: boolean;
+    isDirectoryDrop: boolean;
+    isAutoReset?: boolean;
+    resetDurationMs?: number;
 }

package/dist/controls/TreeView/TreeViewConstants.d.ts

@@ -20,7 +20,8 @@ export declare enum METHOD {
 export declare enum EVENT {
     CLOSE_NODE = "close_node.jstree",
     SELECT_NODE = "select_node.jstree",
-    LOADED = "loaded.jstree"
+    LOADED = "loaded.jstree",
+    MODEL = "model.jstree"
 }
 export declare enum NODE_TYPE {
     FOLDER = "folder",

package/dist/controls/ViewPart/ViewPart.d.ts

@@ -3,6 +3,7 @@ interface ViewPartProps {
     component: any;
     settings: any;
     props: any;
+    item?: any;
 }
 export declare let ViewPart: (props: ViewPartProps) => JSX.Element;
 export {};

package/dist/index.css

@@ -18,7 +18,7 @@
 
 .vitro-title {
     font-size: 20px;
-    font-family: 'InterMedium';
+    font-family: 'InterRegular';
     line-height: 24px;
     margin-right: 24px;
     margin-bottom: 14px;
@@ -445,7 +445,7 @@
     bottom: 24px;
     right: 24px;
     position: absolute;
-    transition: all 1s ease;
+    transition: all 0.1s ease;
     width: 241px;
     height: 96px;
     z-index: 10000000000000;
@@ -704,9 +704,9 @@
     background-repeat: no-repeat;
     border: none;
     outline: none;
-    width: 16px;
-    height: 16px;
-    top: 16px;
+    width: 24px;
+    height: 24px;
+    top: 12px;
 }
 
 ._uploader_vitro-uploader_237vX7T ._uploader_vitro-button-close_30As0AM {
@@ -717,14 +717,14 @@
 
 ._uploader_vitro-button-show_uUmWVJc {
     /* show.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.66406 9.66406L7.99739 6.33073L11.3307 9.66406' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    right: 40px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect width='24' height='24' rx='4' transform='matrix(0 1 1 0 0 0)' fill='white'/%3E%3Cpath d='M20 15L12 7L4 15' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    right: 48px;
 }
 
 ._uploader_vitro-button-hide_LYS1px9 {
     /* hide.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.3359 6.33594L8.0026 9.66927L4.66927 6.33594' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    right: 40px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect width='24' height='24' rx='4' transform='matrix(1.19249e-08 -1 -1 -1.19249e-08 24 24)' fill='white'/%3E%3Cpath d='M4 9L12 17L20 9' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    right: 48px;
 }
 
 ._uploader_vitro-uploader_237vX7T .k-upload .k-dropzone .k-upload-status {
@@ -841,7 +841,9 @@
 
 ._uploader_vitro-uploader_237vX7T #vitro-uploader-title {
     display: flex;
-    width: 176px;
+    width: -moz-fit-content;
+    width: fit-content;
+    max-width: 80%;
     align-items: center;
     justify-content: space-between;
     font-family: 'InterMedium';
@@ -857,6 +859,7 @@
     display: inline-block !important;
     width: 24px;
     height: 24px;
+    margin-left: 12px;
     background-position: center;
     background-size: 100%;
     display: none;
@@ -866,7 +869,6 @@
 
 ._uploader_vitro-uploader_237vX7T .vitro-upload-complete #vitro-uploader-title {
     display: flex;
-    width: 176px;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 0;
@@ -916,8 +918,12 @@
 }
 
 
+.vitro-display-none {
+    display: none;
+}
+
 ._button_vitro-button_hVfBuSO {
-    font-family: 'InterSemiBold';
+    font-family: 'InterMeduim';
     font-size: 14px;
     outline: none;
     height: 32px;
@@ -1503,7 +1509,11 @@
 }
 
 ._tab-group_vitro-tab_1Qb50HL .ps > div:first-child {
-    padding: 26px 16px 0 16px;
+    padding: 30px 16px 0 16px;
+    display: flex;
+    flex-wrap: wrap;
+    grid-gap: 0 16px;
+    align-content: flex-start;
 }
 
 ._tab-group_vitro-tab_1Qb50HL .nav .dropdown-menu {
@@ -1630,10 +1640,16 @@
 ._label_vitro-label_it8WNUE {
     font-size: inherit;
     margin-left: 0;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: calc(100% - 20px);
 }
 
 ._label_vitro-label_it8WNUE ._label_vitro-required_2-bSGif {
     color: red;
+    margin-left: 2px;
 }
 
 ._input_vitro-control_1DmPFkF {
@@ -1758,12 +1774,15 @@
 }
 
 ._input_vitro-error-text_QpZK56k {
-    display: flex;
-    align-items: center;
+    display: inline-block;
     color: #D13438;
     font-size: 14px;
     line-height: 135%;
     margin-top: 2px;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 ._input_vitro-focus_1txynr8 ._input_vitro-error-text_QpZK56k {
@@ -1773,8 +1792,11 @@
 ._input_vitro-error-text_QpZK56k::before {
     content: '';
     display: inline-block;
+    vertical-align: text-top;
     height: 16px;
     width: 16px;
+    min-width: 16px;
+    min-height: 16px;
     margin-right: 4px;
     background-size: 100%;
     background-position: center;
@@ -1940,6 +1962,61 @@
 ._issue-tile_vitro-issue-tile_2D7E9Y-.vitro-active ._issue-tile_vitro-control_3V6_Ze7 textarea {
     background: #F3F8FF;
 }
+._checkbox_vitro-control_DfB5DDM {
+    width: 100%;
+    position: relative;
+    margin-bottom: 32px;
+}
+
+._checkbox_vitro-checkbox-content_2fBG1zl {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+._checkbox_vitro-checkbox-content_2fBG1zl input {
+    width: 24px;
+    height: 24px;
+    margin-right: 6px;
+    cursor: pointer;
+}
+
+._checkbox_vitro-checkbox-content_2fBG1zl input::before,
+._checkbox_vitro-checkbox-content_2fBG1zl input:checked::before {
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+    background: #fff;
+    background-size: 100%;
+    background-position: center;
+}
+
+._checkbox_vitro-checkbox-content_2fBG1zl input::before {
+    /* checkbox-big-empty.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='Checkbox-big'%3E%3Crect id='Background' x='2.5' y='2.5' width='19' height='19' rx='3.5' stroke='%23C0CAD5'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+._checkbox_vitro-checkbox-content_2fBG1zl input:checked::before {
+    /* checkbox-big-active.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%3Crect x='2' y='2' width='20' height='20' rx='2.5' fill='%234292F7'/%3E%3Cpath d='M16.7062 8.50593C17.0826 8.86144 17.0996 9.45479 16.7441 9.83121L11.4316 15.4562C11.2577 15.6404 11.0166 15.7463 10.7634 15.7499C10.5101 15.7535 10.2662 15.6545 10.0871 15.4754L7.27459 12.6629C6.90847 12.2968 6.90847 11.7032 7.27459 11.3371C7.6407 10.971 8.2343 10.971 8.60041 11.3371L10.7308 13.4675L15.3809 8.54379C15.7364 8.16737 16.3298 8.15042 16.7062 8.50593Z' fill='white'/%3E%3C/svg%3E%0A");
+}
+
+._checkbox_vitro-label_qZxCbCP {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 135%;
+}
+
+._checkbox_vitro-left-label_Uu1Tp31 {
+    display: flex;
+    align-items: center;
+}
+
+._checkbox_vitro-left-label_Uu1Tp31 ._checkbox_vitro-label_qZxCbCP {
+    margin-right: 6px;
+}
+
 ._login_vitro-login-layout_1C8owlz {
     width: 100vw;
     height: 100vh;
@@ -2088,6 +2165,14 @@
     line-height: 135%;
 }
 
+._login_vitro-login-checkbox_39NOnZg {
+    margin-bottom: 0;
+}
+
+._login_vitro-login-checkbox_39NOnZg div {
+    font-size: 16px;
+}
+
 ._login_vitro-button_2OCqKtD {
     font-family: 'InterMedium' !important;
     width: 100%;
@@ -2255,7 +2340,7 @@
 }
 
 ._date-picker_vitro-read-only_2NZoMN5 .k-picker-wrap .k-select {
-    display: none;
+    display: none !important;
 }
 
 ._date-picker_vitro-error_3DkgZiN ._date-picker_vitro-label_2jh9qxb {
@@ -2283,12 +2368,16 @@
 }
 
 ._date-picker_vitro-error-text_15CdrRj {
-    display: flex;
-    align-items: center;
+    display: inline-block;
+    vertical-align: text-top;
     color: #D13438;
     font-size: 14px;
     line-height: 135%;
     margin-top: 2px;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 ._date-picker_vitro-focus_2cJKcKr ._date-picker_vitro-error-text_15CdrRj {
@@ -2298,8 +2387,11 @@
 ._date-picker_vitro-error-text_15CdrRj::before {
     content: '';
     display: inline-block;
+    vertical-align: text-top;
     height: 16px;
     width: 16px;
+    min-width: 16px;
+    min-height: 16px;
     margin-right: 4px;
     background-size: 100%;
     background-position: center;
@@ -2353,8 +2445,11 @@
 }
 
 .k-i-calendar {
-    width: 20px;
-    height: 20px;
+    height: 20px !important;
+    width: 20px !important;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
 }
 
 .k-i-calendar::before {
@@ -2366,7 +2461,7 @@
     background-size: 100%;
     background-position: center;
     /* date-picker.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%3Cg id='Vector'%3E%3Cpath d='M9.49725 6.25275C9.53799 6.29339 9.57032 6.34167 9.59237 6.39482C9.61443 6.44797 9.62578 6.50495 9.62578 6.5625C9.62578 6.62005 9.61443 6.67703 9.59237 6.73018C9.57032 6.78333 9.53799 6.83161 9.49725 6.87225L6.87225 9.49725C6.83161 9.53799 6.78333 9.57032 6.73018 9.59237C6.67703 9.61443 6.62005 9.62578 6.5625 9.62578C6.50495 9.62578 6.44797 9.61443 6.39482 9.59237C6.34167 9.57032 6.29339 9.53799 6.25275 9.49725L4.94025 8.18475C4.89957 8.14407 4.86731 8.09578 4.84529 8.04264C4.82328 7.98949 4.81195 7.93253 4.81195 7.875C4.81195 7.81747 4.82328 7.76051 4.84529 7.70736C4.86731 7.65422 4.89957 7.60593 4.94025 7.56525C5.0224 7.4831 5.13382 7.43695 5.25 7.43695C5.30753 7.43695 5.36449 7.44828 5.41764 7.47029C5.47078 7.49231 5.51907 7.52457 5.55975 7.56525L6.5625 8.56888L8.87775 6.25275C8.91839 6.21201 8.96667 6.17968 9.01982 6.15763C9.07297 6.13557 9.12995 6.12422 9.1875 6.12422C9.24505 6.12422 9.30203 6.13557 9.35518 6.15763C9.40833 6.17968 9.45661 6.21201 9.49725 6.25275Z' fill='%234A556C'/%3E%3Cpath d='M3.0625 0C3.17853 0 3.28981 0.0460936 3.37186 0.128141C3.45391 0.210188 3.5 0.321468 3.5 0.4375V0.875H10.5V0.4375C10.5 0.321468 10.5461 0.210188 10.6281 0.128141C10.7102 0.0460936 10.8215 0 10.9375 0C11.0535 0 11.1648 0.0460936 11.2469 0.128141C11.3289 0.210188 11.375 0.321468 11.375 0.4375V0.875H12.25C12.7141 0.875 13.1592 1.05937 13.4874 1.38756C13.8156 1.71575 14 2.16087 14 2.625V12.25C14 12.7141 13.8156 13.1592 13.4874 13.4874C13.1592 13.8156 12.7141 14 12.25 14H1.75C1.28587 14 0.840752 13.8156 0.512563 13.4874C0.184375 13.1592 0 12.7141 0 12.25V2.625C0 2.16087 0.184375 1.71575 0.512563 1.38756C0.840752 1.05937 1.28587 0.875 1.75 0.875H2.625V0.4375C2.625 0.321468 2.67109 0.210188 2.75314 0.128141C2.83519 0.0460936 2.94647 0 3.0625 0ZM0.875 3.5V12.25C0.875 12.4821 0.967187 12.7046 1.13128 12.8687C1.29538 13.0328 1.51794 13.125 1.75 13.125H12.25C12.4821 13.125 12.7046 13.0328 12.8687 12.8687C13.0328 12.7046 13.125 12.4821 13.125 12.25V3.5H0.875Z' fill='%234A556C'/%3E%3C/g%3E%3C/svg%3E%0A");
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Vector'%3E%3Cpath d='M12.1216 8.06594C12.1725 8.11674 12.2129 8.17709 12.2405 8.24353C12.268 8.30997 12.2822 8.38119 12.2822 8.45312C12.2822 8.52506 12.268 8.59628 12.2405 8.66272C12.2129 8.72916 12.1725 8.78951 12.1216 8.84031L8.84031 12.1216C8.78951 12.1725 8.72916 12.2129 8.66272 12.2405C8.59628 12.268 8.52506 12.2822 8.45312 12.2822C8.38119 12.2822 8.30997 12.268 8.24353 12.2405C8.17709 12.2129 8.11674 12.1725 8.06594 12.1216L6.42531 10.4809C6.37447 10.4301 6.33413 10.3697 6.30661 10.3033C6.2791 10.2369 6.26493 10.1657 6.26493 10.0938C6.26493 10.0218 6.2791 9.95064 6.30661 9.88421C6.33413 9.81777 6.37447 9.75741 6.42531 9.70656C6.528 9.60387 6.66728 9.54618 6.8125 9.54618C6.88441 9.54618 6.95561 9.56035 7.02204 9.58786C7.08848 9.61538 7.14884 9.65572 7.19969 9.70656L8.45312 10.9611L11.3472 8.06594C11.398 8.01501 11.4583 7.9746 11.5248 7.94703C11.5912 7.91946 11.6624 7.90527 11.7344 7.90527C11.8063 7.90527 11.8775 7.91946 11.944 7.94703C12.0104 7.9746 12.0708 8.01501 12.1216 8.06594Z' fill='%234A556C'/%3E%3Cpath d='M4.07812 0.25C4.22317 0.25 4.36227 0.307617 4.46482 0.410176C4.56738 0.512735 4.625 0.651835 4.625 0.796875V1.34375H13.375V0.796875C13.375 0.651835 13.4326 0.512735 13.5352 0.410176C13.6377 0.307617 13.7768 0.25 13.9219 0.25C14.0669 0.25 14.206 0.307617 14.3086 0.410176C14.4111 0.512735 14.4688 0.651835 14.4688 0.796875V1.34375H15.5625C16.1427 1.34375 16.6991 1.57422 17.1093 1.98445C17.5195 2.39469 17.75 2.95109 17.75 3.53125V15.5625C17.75 16.1427 17.5195 16.6991 17.1093 17.1093C16.6991 17.5195 16.1427 17.75 15.5625 17.75H2.4375C1.85734 17.75 1.30094 17.5195 0.890704 17.1093C0.480468 16.6991 0.25 16.1427 0.25 15.5625V3.53125C0.25 2.95109 0.480468 2.39469 0.890704 1.98445C1.30094 1.57422 1.85734 1.34375 2.4375 1.34375H3.53125V0.796875C3.53125 0.651835 3.58887 0.512735 3.69143 0.410176C3.79398 0.307617 3.93308 0.25 4.07812 0.25ZM1.34375 4.625V15.5625C1.34375 15.8526 1.45898 16.1308 1.6641 16.3359C1.86922 16.541 2.14742 16.6562 2.4375 16.6562H15.5625C15.8526 16.6562 16.1308 16.541 16.3359 16.3359C16.541 16.1308 16.6562 15.8526 16.6562 15.5625V4.625H1.34375Z' fill='%234A556C'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
 .k-picker-wrap.k-state-default > .k-select {
@@ -2615,12 +2710,16 @@
 }
 
 ._time-picker_vitro-error-text_2BNoBKW {
-    display: flex;
+    display: inline-block;
     align-items: center;
     color: #D13438;
     font-size: 14px;
     line-height: 135%;
     margin-top: 2px;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 ._time-picker_vitro-focus_wmhPjvE ._time-picker_vitro-error-text_2BNoBKW {
@@ -2630,8 +2729,11 @@
 ._time-picker_vitro-error-text_2BNoBKW::before {
     content: '';
     display: inline-block;
+    vertical-align: text-top;
     height: 16px;
     width: 16px;
+    min-width: 16px;
+    min-height: 16px;
     margin-right: 4px;
     background-size: 100%;
     background-position: center;
@@ -2805,8 +2907,7 @@
 ._lookup-picker-selected-item_vitro-selected-item_hw-euth {
     display: inline;
     margin: 0 6px 0 0;
-    display: flex;
-    align-items: center;
+    white-space: nowrap;
 }
 
 ._lookup-picker-html-value_vitro-item-html-value_2QBoTey {
@@ -2899,7 +3000,7 @@
     border-radius: 4px;
     display: flex;
     width: 100%;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     height: 40px;
     padding: 8px 32px 8px 16px;
@@ -2950,12 +3051,16 @@
 }
 
 ._lookup-picker_vitro-error-text_273lqvD {
-    display: flex;
+    display: inline-block;
     align-items: center;
     color: #D13438;
     font-size: 14px;
     line-height: 135%;
     margin-top: 2px;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 ._lookup-picker_vitro-focus_2UGpxXD ._lookup-picker_vitro-error-text_273lqvD {
@@ -2965,8 +3070,11 @@
 ._lookup-picker_vitro-error-text_273lqvD::before {
     content: '';
     display: inline-block;
+    vertical-align: text-top;
     height: 16px;
     width: 16px;
+    min-width: 16px;
+    min-height: 16px;
     margin-right: 4px;
     background-size: 100%;
     background-position: center;
@@ -2978,7 +3086,7 @@
     width: 20px;
     display: inline-block;
     right: 0;
-    /* copy.svg URL-encoder for SVG */
+    /* copy.svg URL-encoder for SVG */ 
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='copy-icon'%3E%3Cpath id='Vector' d='M4.33594 4.14517V3.27214C4.33594 2.0877 4.75567 1.66797 5.9401 1.66797H12.7318C13.9162 1.66797 14.3359 2.0877 14.3359 3.27214V10.0638C14.3359 11.2482 13.9162 11.668 12.7318 11.668H11.8414' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M10.0599 4.33203H3.26823C2.0838 4.33203 1.66406 4.75176 1.66406 5.9362V12.7279C1.66406 13.9123 2.0838 14.332 3.26823 14.332H10.0599C11.2443 14.332 11.6641 13.9123 11.6641 12.7279V5.9362C11.6641 4.75176 11.2443 4.33203 10.0599 4.33203Z' stroke='%238E98A3' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
     background-repeat: no-repeat;
     background-position: center;
@@ -3091,7 +3199,7 @@
 
 li:first-child ._command-menu-item_vitro-item_2pVhk23 {
     background: #347FDE;
-    font-family: 'InterSemiBold';
+    font-family: 'InterMedium';
     color: #fff;
 }
 
@@ -3327,14 +3435,6 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
         width: 32px;
     }
 }
-._sidebar-item_vitro-active_7p5iOhY {
-    background-color: #DCEEFF;
-}
-
-ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
-    background-color: transparent;
-}
-
 ._sidebar-item_vitro-icon-text_3ROhyLK {
     display: none;
     color: #222D44;
@@ -3350,6 +3450,18 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     display: none;
 }
 
+._sidebar-item_vitro-active_7p5iOhY {
+    background-color: #DCEEFF;
+}
+
+._sidebar-item_vitro-hover_1mECzme ._sidebar-item_vitro-icon-text_3ROhyLK {
+    color: #326AD6;
+}
+
+ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
+    background-color: transparent;
+}
+
 ._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-icon-text_3ROhyLK,
 ._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-item-text_1kK_aIZ {
     color: #326AD6;
@@ -3384,10 +3496,6 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     display: block;
 }
 
-._sidebar-item_vitro-active_7p5iOhY {
-    background-color: #DCEEFF;
-}
-
 .vitro-bottom-menu ._sidebar-item_vitro-item-text_1kK_aIZ {
     display: block;
     color: #4A556C;
@@ -4017,4 +4125,102 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 ._user-profile_vitro-dropdown-item_dSErsta:hover,
 ._user-profile_vitro-dropdown-item_dSErsta:active {
     background: #DCEEFF;
-}
+}
+._activity_vitro-title_1rdvvaa {
+    color: #bdbdbd;
+    margin-bottom: 12px;
+    text-align: center;
+}
+
+._activity_vitro-title_1rdvvaa > h3 {
+    text-transform: uppercase;
+    font-size: 12pt;
+    margin: 0;
+}
+
+._activity_vitro-dropdown-button_12258nJ {
+    position: absolute;
+    right: 0;
+}
+
+._activity_vitro-activity_1u7YeF3 .preview-roller-wrapper {
+    height: 100px;
+    position: relative;
+}
+
+._activity-item_vitro-item_3Tprske {
+    margin-bottom: 22px;
+    min-height: 32px;
+}
+
+._activity-item_vitro-item_3Tprske._activity-item_vitro-active_2kENgvf {
+    background: #F3F8FF;
+}
+
+._activity-item_vitro-item_3Tprske > .vitro-flex {
+    width: 100%;
+}
+
+._activity-item_vitro-title__QItISm span {
+    color: #222d44;
+}
+
+._activity-item_vitro-due-date_1mBIraY {
+    font-size: 8pt;
+    color: #bdbdbd;
+    float: right;
+    white-space: nowrap;
+}
+
+._activity-item_vitro-content_3Lt7XRy {
+    margin-top: -1px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 4px;
+}
+
+._activity-item_vitro-content_3Lt7XRy p {
+    -webkit-margin-before: 0px;
+            margin-block-start: 0px;
+    -webkit-margin-after: 0px;
+            margin-block-end: 0px;
+    margin-bottom: 0px;
+    color: #bdbdbd;
+    font-size: 9pt;
+    line-height: 14px;
+    margin-top: 3px;
+}
+
+._activity-item_vitro-content_3Lt7XRy p span {
+    font-size: 9pt !important;
+}
+
+._activity-item_vitro-content_3Lt7XRy .vitro-status-changed {
+    font-style: normal;
+    color: #27AE60;
+    font-size: 9pt;
+}
+
+._activity-item_vitro-message_1ndqhgR {
+    overflow-wrap: anywhere;
+}
+
+._activity-item_vitro-message_1ndqhgR img {
+    max-width: calc(100% - 20px);
+    display: block;
+    margin: 4px 0;
+}
+
+._activity-item_vitro-flex_37IxBWe {
+    display: flex;
+}
+
+._activity-item_vitro-dropdown-button_1J50ja7 {
+    align-self: flex-start;
+}
+
+._activity-item_vitro-avatar_218ZqAk {
+    margin-right: 4px;
+}