@vitrosoftware/common-ui-ts 1.1.17 → 1.1.20

package/css/common.css

@@ -18,7 +18,7 @@
 
 :global(.vitro-title) {
     font-size: 20px;
-    font-family: 'InterMedium';
+    font-family: 'InterRegular';
     line-height: 24px;
     margin-right: 24px;
     margin-bottom: 14px;

package/css/std/controls/activity/activity.css

@@ -0,0 +1,21 @@
+.vitro-title {
+    color: #bdbdbd;
+    margin-bottom: 12px;
+    text-align: center;
+}
+
+.vitro-title > h3 {
+    text-transform: uppercase;
+    font-size: 12pt;
+    margin: 0;
+}
+
+.vitro-dropdown-button {
+    position: absolute;
+    right: 0;
+}
+
+.vitro-activity :global(.preview-roller-wrapper) {
+    height: 100px;
+    position: relative;
+}

package/css/std/controls/activity-item/activity-item.css

@@ -0,0 +1,74 @@
+.vitro-item {
+    margin-bottom: 22px;
+    min-height: 32px;
+}
+
+.vitro-item.vitro-active {
+    background: #F3F8FF;
+}
+
+.vitro-item > :global(.vitro-flex) {
+    width: 100%;
+}
+
+.vitro-title span {
+    color: #222d44;
+}
+
+.vitro-due-date {
+    font-size: 8pt;
+    color: #bdbdbd;
+    float: right;
+    white-space: nowrap;
+}
+
+.vitro-content {
+    margin-top: -1px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-right: 4px;
+}
+
+.vitro-content p {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    margin-bottom: 0px;
+    color: #bdbdbd;
+    font-size: 9pt;
+    line-height: 14px;
+    margin-top: 3px;
+}
+
+.vitro-content p span {
+    font-size: 9pt !important;
+}
+
+.vitro-content :global(.vitro-status-changed) {
+    font-style: normal;
+    color: #27AE60;
+    font-size: 9pt;
+}
+
+.vitro-message {
+    overflow-wrap: anywhere;
+}
+
+.vitro-message img {
+    max-width: calc(100% - 20px);
+    display: block;
+    margin: 4px 0;
+}
+
+.vitro-flex {
+    display: flex;
+}
+
+.vitro-dropdown-button {
+    align-self: flex-start;
+}
+
+.vitro-avatar {
+    margin-right: 4px;
+}

package/css/std/controls/button/button.css

@@ -1,5 +1,5 @@
 .vitro-button {
-    font-family: 'InterSemiBold';
+    font-family: 'InterMeduim';
     font-size: 14px;
     outline: none;
     height: 32px;

package/css/std/controls/checkbox/checkbox.css

@@ -0,0 +1,54 @@
+.vitro-control {
+    width: 100%;
+    position: relative;
+    margin-bottom: 32px;
+}
+
+.vitro-checkbox-content {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-checkbox-content input {
+    width: 24px;
+    height: 24px;
+    margin-right: 6px;
+    cursor: pointer;
+}
+
+.vitro-checkbox-content input::before,
+.vitro-checkbox-content input:checked::before {
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+    background: #fff;
+    background-size: 100%;
+    background-position: center;
+}
+
+.vitro-checkbox-content 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");
+}
+
+.vitro-checkbox-content 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");
+}
+
+.vitro-label {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 135%;
+}
+
+.vitro-left-label {
+    display: flex;
+    align-items: center;
+}
+
+.vitro-left-label .vitro-label {
+    margin-right: 6px;
+}

package/css/std/controls/command-menu/command-menu-item.css

@@ -5,7 +5,7 @@
 
 li:first-child .vitro-item {
     background: #347FDE;
-    font-family: 'InterSemiBold';
+    font-family: 'InterMedium';
     color: #fff;
 }
 

package/css/std/controls/date-picker/date-picker.css

@@ -61,7 +61,7 @@
 }
 
 .vitro-read-only :global(.k-picker-wrap .k-select) {
-    display: none;
+    display: none !important;
 }
 
 .vitro-error .vitro-label {
@@ -89,12 +89,16 @@
 }
 
 .vitro-error-text {
-    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;
 }
 
 .vitro-focus .vitro-error-text {
@@ -104,8 +108,11 @@
 .vitro-error-text::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;
@@ -159,8 +166,11 @@
 }
 
 :global(.k-i-calendar) {
-    width: 20px;
-    height: 20px;
+    height: 20px !important;
+    width: 20px !important;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
 }
 
 :global(.k-i-calendar)::before {
@@ -172,7 +182,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");
 }
 
 :global(.k-picker-wrap.k-state-default > .k-select) {

package/css/std/controls/icon/icon.css

@@ -0,0 +1,3 @@
+:global(.vitro-display-none) {
+    display: none;
+}

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

@@ -106,12 +106,15 @@
 }
 
 .vitro-error-text {
-    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;
 }
 
 .vitro-focus .vitro-error-text {
@@ -121,8 +124,11 @@
 .vitro-error-text::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;

package/css/std/controls/label/label.css

@@ -1,8 +1,14 @@
 .vitro-label {
     font-size: inherit;
     margin-left: 0;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: calc(100% - 20px);
 }
 
 .vitro-label .vitro-required {
     color: red;
+    margin-left: 2px;
 }

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

@@ -137,6 +137,14 @@
     line-height: 135%;
 }
 
+.vitro-login-checkbox {
+    margin-bottom: 0;
+}
+
+.vitro-login-checkbox div {
+    font-size: 16px;
+}
+
 .vitro-button {
     font-family: 'InterMedium' !important;
     width: 100%;

package/css/std/controls/lookup-picker/lookup-picker-selected-item.css

@@ -1,6 +1,5 @@
 .vitro-selected-item {
     display: inline;
     margin: 0 6px 0 0;
-    display: flex;
-    align-items: center;
+    white-space: nowrap;
 }

package/css/std/controls/lookup-picker/lookup-picker.css

@@ -8,7 +8,7 @@
     border-radius: 4px;
     display: flex;
     width: 100%;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     align-items: center;
     height: 40px;
     padding: 8px 32px 8px 16px;
@@ -52,12 +52,16 @@
 }
 
 .vitro-error-text {
-    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;
 }
 
 .vitro-focus .vitro-error-text {
@@ -67,8 +71,11 @@
 .vitro-error-text::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;
@@ -80,7 +87,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;

package/css/std/controls/sidebar/sidebar-item.css

@@ -1,11 +1,3 @@
-.vitro-active {
-    background-color: #DCEEFF;
-}
-
-ul > li:last-child > ul > li:last-child .vitro-active {
-    background-color: transparent;
-}
-
 .vitro-icon-text {
     display: none;
     color: #222D44;
@@ -21,6 +13,18 @@ ul > li:last-child > ul > li:last-child .vitro-active {
     display: none;
 }
 
+.vitro-active {
+    background-color: #DCEEFF;
+}
+
+.vitro-hover .vitro-icon-text {
+    color: #326AD6;
+}
+
+ul > li:last-child > ul > li:last-child .vitro-active {
+    background-color: transparent;
+}
+
 .vitro-active .vitro-icon-text,
 .vitro-active .vitro-item-text {
     color: #326AD6;
@@ -54,10 +58,6 @@ ul > li:last-child > ul > li:last-child .vitro-active {
     display: block;
 }
 
-.vitro-active {
-    background-color: #DCEEFF;
-}
-
 :global(.vitro-bottom-menu) .vitro-item-text {
     display: block;
     color: #4A556C;

package/css/std/controls/tab-group/tab-group.css

@@ -20,7 +20,11 @@
 }
 
 .vitro-tab :global(.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;
 }
 
 .vitro-tab :global(.nav) :global(.dropdown-menu) {

package/css/std/controls/table-view/treegrid.css

@@ -80,6 +80,10 @@
     font-weight: unset;
 }
 
+.TWHeaderText {
+    color: #4A556C !important;
+}
+
 .TWInt, .TWFloat, .TWDate {
     text-align: unset;
 }
@@ -123,9 +127,9 @@
     background: #fff !important;
 }
 
-.TWFocusRowBackground {
+.TWCursorBackground {
     background: #0085FF !important;
-    opacity: 0.13 !important;
+    opacity: 0.136 !important;
 }
 
 .TWMenuMain {
@@ -525,10 +529,6 @@
     text-align: center;
 } 
 
-.TWFocusRowBackground {
-    background: #0083ff !important;
-}
-
 .TWFilter0Value u.TWFilter1, .TWFilter0Value u.TWFilter0,
 .TWCellHeaderPanel .TWPanelDelete {
     display: none;

package/css/std/controls/time-picker/time-picker.css

@@ -97,12 +97,16 @@
 }
 
 .vitro-error-text {
-    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;
 }
 
 .vitro-focus .vitro-error-text {
@@ -112,8 +116,11 @@
 .vitro-error-text::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;

package/css/std/controls/uploader/uploader.css

@@ -2,7 +2,7 @@
     bottom: 24px;
     right: 24px;
     position: absolute;
-    transition: all 1s ease;
+    transition: all 0.1s ease;
     width: 241px;
     height: 96px;
     z-index: 10000000000000;
@@ -261,9 +261,9 @@
     background-repeat: no-repeat;
     border: none;
     outline: none;
-    width: 16px;
-    height: 16px;
-    top: 16px;
+    width: 24px;
+    height: 24px;
+    top: 12px;
 }
 
 .vitro-uploader .vitro-button-close {
@@ -274,14 +274,14 @@
 
 .vitro-button-show {
     /* 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;
 }
 
 .vitro-button-hide {
     /* 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;
 }
 
 .vitro-uploader :global(.k-upload .k-dropzone .k-upload-status) {
@@ -398,7 +398,8 @@
 
 .vitro-uploader :global(#vitro-uploader-title) {
     display: flex;
-    width: 176px;
+    width: fit-content;
+    max-width: 80%;
     align-items: center;
     justify-content: space-between;
     font-family: 'InterMedium';
@@ -414,6 +415,7 @@
     display: inline-block !important;
     width: 24px;
     height: 24px;
+    margin-left: 12px;
     background-position: center;
     background-size: 100%;
     display: none;
@@ -423,7 +425,6 @@
 
 .vitro-uploader :global(.vitro-upload-complete) :global(#vitro-uploader-title) {
     display: flex;
-    width: 176px;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 0;

package/css/white/controls/activity/activity.css

@@ -0,0 +1,21 @@
+.vitro-title {
+    color: #bdbdbd;
+    padding: 12px 0 6px 0;
+    text-align: center;
+}
+
+.vitro-title > h3 {
+    text-transform: uppercase;
+    font-size: 12pt;
+    margin: 4px 0 2px 0;
+}
+
+.vitro-dropdown-button {
+    position: absolute;
+    right: 0;
+}
+
+.vitro-activity :global(.preview-roller-wrapper) {
+    height: 100px;
+    position: relative;
+}

package/css/white/controls/activity-item/activity-item.css

@@ -0,0 +1,65 @@
+.vitro-item {
+    margin: 4px 0 0 0;
+    min-height: 32px;
+}
+
+.vitro-item.vitro-active {
+    background: #F5F6FA;
+}
+
+.vitro-item > :global(.vitro-flex) {
+    width: 100%;
+}
+
+.vitro-title span {
+    color: #222d44;
+}
+
+.vitro-due-date {
+    font-size: 8pt;
+    color: #bdbdbd;
+    float: right;
+    white-space: nowrap;
+}
+
+.vitro-content {
+    margin-top: -1px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.vitro-content p {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    margin-bottom: 0px;
+    color: #bdbdbd;
+    font-size: 9pt;
+    line-height: 14px;
+    margin-top: 3px;
+}
+
+.vitro-content p span {
+    font-size: 9pt !important;
+}
+
+.vitro-content :global(.vitro-status-changed) {
+    font-style: normal;
+    color: #27AE60;
+    font-size: 9pt;
+}
+
+.vitro-message {
+  overflow-wrap: anywhere;
+}
+
+.vitro-message img {
+  max-width: calc(100% - 20px);
+  display: block;
+  margin: 4px 0;
+}
+
+.vitro-flex {
+  display: flex;
+}

package/dist/controls/Activity/Activity.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DropdownItem } from '../DropdownButton/DropdownItem';
+interface ActivityProps {
+    title?: string;
+    filterDropdownList?: DropdownItem[];
+    children: React.ReactNode;
+}
+export declare const Activity: (props: ActivityProps) => JSX.Element;
+export {};