@vitrosoftware/common-ui-ts 1.1.208 → 1.1.209

package/css/std/controls/alert/alert.css

@@ -1,17 +1,27 @@
 .vitro-alert {
     border: 0;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    border-radius: 4px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.vitro-position-absolute {
     z-index: 1000;
     position: absolute;
     right: 0;
     width: 450px;
-    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
-    border-radius: 4px;
 }
 
 .vitro-alert :global(.alert) {
     margin-bottom: 0;
     padding: 12px;
     border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
 :global(#Timesheets) .vitro-alert {
@@ -48,7 +58,6 @@
     background-position: center;
     background-size: 100%;
     background-repeat: no-repeat;
-    align-self: center;
 }
 
 .vitro-text {
@@ -59,6 +68,7 @@
     color: #4A556C;
     flex-direction: column;
     overflow: hidden;
+    white-space: pre-wrap;
 }
 
 .vitro-text > strong {

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

@@ -1,11 +1,5 @@
 .vitro-button {
-    font-family: 'InterMedium';
-    font-size: 14px;
     outline: none;
-    height: 32px;
-    min-width: 85px;
-    color: #fff;
-    background: #347FDE;
     border: none;
     border-radius: 4px;
     cursor: pointer;
@@ -13,8 +7,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 14px;
     line-height: 16px;
-    padding: 4px 8px;
+    padding: 4px 16px;
+    height: 32px;
+    min-width: 85px;
 }
 
 .vitro-button > div {
@@ -23,28 +20,18 @@
     justify-content: center;
     flex: 1 1;
     overflow: hidden;
+    gap: 4px;
 }
 
 .vitro-button > div > div {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-}
-
-.vitro-button:hover, 
-.vitro-button:active,
-.vitro-button:focus {
-    background: #3274E0;
-}
-
-.vitro-button:disabled {
-    background: #E4E6EC;
 }
 
 .vitro-button :global(.vitro-image-default),
 .vitro-button :global(.vitro-image-hover),
 .vitro-button :global(.vitro-image) {
-    margin-right: 4px;
     height: 24px;
     width: 24px;
 }
@@ -73,4 +60,68 @@
 
 :global(.vitro-display-none) {
     display: none;
+}
+
+.vitro-button:global(.vitro-primary) {
+    font-family: 'InterMedium';
+    color: #fff;
+    background: #347FDE;
+}
+
+.vitro-button:global(.vitro-primary):hover,
+.vitro-button:global(.vitro-primary):active,
+.vitro-button:global(.vitro-primary):focus {
+    background: #3274E0;
+}
+
+.vitro-button:global(.vitro-primary):disabled {
+    background: #E4E6EC;
+}
+
+.vitro-button:global(.vitro-outline-primary) {
+    background: #fff;
+    border: 1px solid #0060D9;
+    color: #0060D9;
+    font-family: 'InterRegular';
+}
+
+.vitro-button:global(.vitro-outline-primary):hover,
+.vitro-button:global(.vitro-outline-primary):active,
+.vitro-button:global(.vitro-outline-primary):focus {
+    background: #3274E0;
+    border: 1px solid #3274E0;
+    color: #fff;
+}
+
+.vitro-button:global(.vitro-outline-primary):disabled {
+    background: #fff;
+    border: 1px solid #8E98A3;
+    color: #8E98A3;
+}
+
+.vitro-button:global(.vitro-outline-light) {
+    background: #fff;
+    color: #222D44;
+    border: 1px solid #E4E6EC;
+    font-family: 'InterRegular';
+}
+
+.vitro-button:global(.vitro-outline-light):hover,
+.vitro-button:global(.vitro-outline-light):active,
+.vitro-button:global(.vitro-outline-light):focus {
+    background: #F3F8FF;
+}
+
+.vitro-button:global(.vitro-light) {
+    background: #fff;
+    border: none;
+    color: #222D44;
+    font-family: 'InterRegular';
+    padding: 4px 8px;
+}
+
+.vitro-button:global(.vitro-light):hover,
+.vitro-button:global(.vitro-light):active,
+.vitro-button:global(.vitro-light):focus {
+    background: #F3F8FF;
 }

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

@@ -1,25 +1,3 @@
-.vitro-command-menu-button {
-    font-family: 'InterRegular' !important;
-    border: none !important;
-    color: #222D44 !important;
-    background: #fff !important;
-    padding: 4px 8px !important;
-}
-
-.vitro-command-menu-button:hover,
-.vitro-command-menu-button:active {
-    background: #F3F8FF !important;
-}
-
-.vitro-command-menu-button > div {
-    gap: 4px;
-}
-
-.vitro-image {
-    width: 24px;
-    height: 24px;
-}
-
 @media (max-width: 800px) {
     .vitro-command-menu-button .vitro-image + div {
         display: none;

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

@@ -148,30 +148,30 @@
     margin-left: -8px;
 }
 
-:global(.vitro-button-active) {
+:global(.vitro-addon-button) {
     border: 1px solid #4292F7 !important;
 }
 
-:global(.vitro-button-active:hover),
-:global(.vitro-button-active:active) {
+:global(.vitro-addon-button:hover),
+:global(.vitro-addon-button:active) {
     border-color: #3274E0 !important;
     background: #3274E0;
     color: #fff;
 }
 
-:global(.vitro-button-context) {
+:global(.vitro-context-button) {
     padding: 0 !important;
     width: 24px;
     background-color: #fff !important;
 }
 
-:global(.vitro-button-context > div),
-:global(.vitro-button-context img) {
+:global(.vitro-context-button > div),
+:global(.vitro-context-button img) {
     margin: 0 !important;
 }
 
-:global(.vitro-button-context:hover),
-:global(.vitro-button-context:active) {
+:global(.vitro-context-button:hover),
+:global(.vitro-context-button:active) {
     border-color: #fff !important;
 }
 
@@ -179,6 +179,28 @@
     max-height: 288px;
 }
 
+.vitro-dropdown-button-container :global(.vitro-primary) {
+    font-family: 'InterMedium';
+    color: #fff;
+    background: #347FDE;
+}
+
+.vitro-dropdown-button-container :global(.vitro-primary) {
+    font-family: 'InterMedium';
+    color: #fff;
+    background: #347FDE;
+}
+
+.vitro-dropdown-button-container :global(.vitro-primary):hover,
+.vitro-dropdown-button-container :global(.vitro-primary):active,
+.vitro-dropdown-button-container :global(.vitro-primary):focus {
+    background: #3274E0;
+}
+
+.vitro-dropdown-button-container :global(.vitro-primary):disabled {
+    background: #E4E6EC;
+}
+
 @media (max-width: 800px) {
     .vitro-command-menu-dropdown-button .vitro-image + div {
         display: none;
@@ -192,7 +214,7 @@
         display: block;
     }
 
-    :global(.vitro-button-context) {
+    :global(.vitro-context-button) {
         min-width: 32px !important;
         width: 32px;
     }

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

@@ -1,14 +1,4 @@
 .vitro-item {
     display: flex;
     align-items: center;
-}
-
-li:first-child .vitro-item {
-    background: #347FDE;
-    font-family: 'InterMedium';
-    color: #fff;
-}
-
-li:first-child .vitro-item:hover {
-    background: #3274E0;
 }

package/dist/index.css

@@ -1574,13 +1574,7 @@ div._component-loader_vitro-component-loader_3J3a2or {
     }
 }
 ._button_vitro-button_hVfBuSO {
-    font-family: 'InterMedium';
-    font-size: 14px;
     outline: none;
-    height: 32px;
-    min-width: 85px;
-    color: #fff;
-    background: #347FDE;
     border: none;
     border-radius: 4px;
     cursor: pointer;
@@ -1588,8 +1582,11 @@ div._component-loader_vitro-component-loader_3J3a2or {
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 14px;
     line-height: 16px;
-    padding: 4px 8px;
+    padding: 4px 16px;
+    height: 32px;
+    min-width: 85px;
 }
 
 ._button_vitro-button_hVfBuSO > div {
@@ -1598,28 +1595,18 @@ div._component-loader_vitro-component-loader_3J3a2or {
     justify-content: center;
     flex: 1 1;
     overflow: hidden;
+    gap: 4px;
 }
 
 ._button_vitro-button_hVfBuSO > div > div {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-}
-
-._button_vitro-button_hVfBuSO:hover, 
-._button_vitro-button_hVfBuSO:active,
-._button_vitro-button_hVfBuSO:focus {
-    background: #3274E0;
-}
-
-._button_vitro-button_hVfBuSO:disabled {
-    background: #E4E6EC;
 }
 
 ._button_vitro-button_hVfBuSO .vitro-image-default,
 ._button_vitro-button_hVfBuSO .vitro-image-hover,
 ._button_vitro-button_hVfBuSO .vitro-image {
-    margin-right: 4px;
     height: 24px;
     width: 24px;
 }
@@ -1649,20 +1636,70 @@ div._component-loader_vitro-component-loader_3J3a2or {
 .vitro-display-none {
     display: none;
 }
-._button-cancel_vitro-button-cancel_2UT1K9Z {
-    cursor: pointer;
-    background: #fff !important;
-    color: #222D44 !important;
-    border: 1px solid #E4E6EC !important;
-    font-family: 'InterRegular' !important;
-}
-
-._button-cancel_vitro-button-cancel_2UT1K9Z:hover, 
-._button-cancel_vitro-button-cancel_2UT1K9Z:active,
-._button-cancel_vitro-button-cancel_2UT1K9Z:focus {
-    background: #F3F8FF !important;
-}
 
+._button_vitro-button_hVfBuSO.vitro-primary {
+    font-family: 'InterMedium';
+    color: #fff;
+    background: #347FDE;
+}
+
+._button_vitro-button_hVfBuSO.vitro-primary:hover,
+._button_vitro-button_hVfBuSO.vitro-primary:active,
+._button_vitro-button_hVfBuSO.vitro-primary:focus {
+    background: #3274E0;
+}
+
+._button_vitro-button_hVfBuSO.vitro-primary:disabled {
+    background: #E4E6EC;
+}
+
+._button_vitro-button_hVfBuSO.vitro-outline-primary {
+    background: #fff;
+    border: 1px solid #0060D9;
+    color: #0060D9;
+    font-family: 'InterRegular';
+}
+
+._button_vitro-button_hVfBuSO.vitro-outline-primary:hover,
+._button_vitro-button_hVfBuSO.vitro-outline-primary:active,
+._button_vitro-button_hVfBuSO.vitro-outline-primary:focus {
+    background: #3274E0;
+    border: 1px solid #3274E0;
+    color: #fff;
+}
+
+._button_vitro-button_hVfBuSO.vitro-outline-primary:disabled {
+    background: #fff;
+    border: 1px solid #8E98A3;
+    color: #8E98A3;
+}
+
+._button_vitro-button_hVfBuSO.vitro-outline-light {
+    background: #fff;
+    color: #222D44;
+    border: 1px solid #E4E6EC;
+    font-family: 'InterRegular';
+}
+
+._button_vitro-button_hVfBuSO.vitro-outline-light:hover,
+._button_vitro-button_hVfBuSO.vitro-outline-light:active,
+._button_vitro-button_hVfBuSO.vitro-outline-light:focus {
+    background: #F3F8FF;
+}
+
+._button_vitro-button_hVfBuSO.vitro-light {
+    background: #fff;
+    border: none;
+    color: #222D44;
+    font-family: 'InterRegular';
+    padding: 4px 8px;
+}
+
+._button_vitro-button_hVfBuSO.vitro-light:hover,
+._button_vitro-button_hVfBuSO.vitro-light:active,
+._button_vitro-button_hVfBuSO.vitro-light:focus {
+    background: #F3F8FF;
+}
 ._button-group_vitro-button-group_3TLqxjf {
     display: flex;
     justify-content: flex-start;
@@ -4784,28 +4821,6 @@ div._component-loader_vitro-component-loader_3J3a2or {
 ._command-menu_vitro-command-menu_l82vtIh .nav > li:last-child {
     margin-right: 0;
 }
-._command-menu-button_vitro-command-menu-button_2IiXVbP {
-    font-family: 'InterRegular' !important;
-    border: none !important;
-    color: #222D44 !important;
-    background: #fff !important;
-    padding: 4px 8px !important;
-}
-
-._command-menu-button_vitro-command-menu-button_2IiXVbP:hover,
-._command-menu-button_vitro-command-menu-button_2IiXVbP:active {
-    background: #F3F8FF !important;
-}
-
-._command-menu-button_vitro-command-menu-button_2IiXVbP > div {
-    gap: 4px;
-}
-
-._command-menu-button_vitro-image_27yILgG {
-    width: 24px;
-    height: 24px;
-}
-
 @media (max-width: 800px) {
     ._command-menu-button_vitro-command-menu-button_2IiXVbP ._command-menu-button_vitro-image_27yILgG + div {
         display: none;
@@ -4818,16 +4833,6 @@ div._component-loader_vitro-component-loader_3J3a2or {
 ._command-menu-item_vitro-item_2pVhk23 {
     display: flex;
     align-items: center;
-}
-
-li:first-child ._command-menu-item_vitro-item_2pVhk23 {
-    background: #347FDE;
-    font-family: 'InterMedium';
-    color: #fff;
-}
-
-li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
-    background: #3274E0;
 }
 ._command-menu-lookup-picker_vitro-item-lookup-picker_28SsSpP {
   padding: 0px !important;
@@ -5028,30 +5033,30 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     margin-left: -8px;
 }
 
-.vitro-button-active {
+.vitro-addon-button {
     border: 1px solid #4292F7 !important;
 }
 
-.vitro-button-active:hover,
-.vitro-button-active:active {
+.vitro-addon-button:hover,
+.vitro-addon-button:active {
     border-color: #3274E0 !important;
     background: #3274E0;
     color: #fff;
 }
 
-.vitro-button-context {
+.vitro-context-button {
     padding: 0 !important;
     width: 24px;
     background-color: #fff !important;
 }
 
-.vitro-button-context > div,
-.vitro-button-context img {
+.vitro-context-button > div,
+.vitro-context-button img {
     margin: 0 !important;
 }
 
-.vitro-button-context:hover,
-.vitro-button-context:active {
+.vitro-context-button:hover,
+.vitro-context-button:active {
     border-color: #fff !important;
 }
 
@@ -5059,6 +5064,28 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     max-height: 288px;
 }
 
+._command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O .vitro-primary {
+    font-family: 'InterMedium';
+    color: #fff;
+    background: #347FDE;
+}
+
+._command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O .vitro-primary {
+    font-family: 'InterMedium';
+    color: #fff;
+    background: #347FDE;
+}
+
+._command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O .vitro-primary:hover,
+._command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O .vitro-primary:active,
+._command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O .vitro-primary:focus {
+    background: #3274E0;
+}
+
+._command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O .vitro-primary:disabled {
+    background: #E4E6EC;
+}
+
 @media (max-width: 800px) {
     ._command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3 ._command-menu-dropdown-button_vitro-image_2VNGo-H + div {
         display: none;
@@ -5072,7 +5099,7 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
         display: block;
     }
 
-    .vitro-button-context {
+    .vitro-context-button {
         min-width: 32px !important;
         width: 32px;
     }
@@ -5809,18 +5836,28 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 
 ._alert_vitro-alert_3sPAkJb {
     border: 0;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    border-radius: 4px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+._alert_vitro-position-absolute_2A33Lq4 {
     z-index: 1000;
     position: absolute;
     right: 0;
     width: 450px;
-    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
-    border-radius: 4px;
 }
 
 ._alert_vitro-alert_3sPAkJb .alert {
     margin-bottom: 0;
     padding: 12px;
     border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
 
 #Timesheets ._alert_vitro-alert_3sPAkJb {
@@ -5857,7 +5894,6 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     background-position: center;
     background-size: 100%;
     background-repeat: no-repeat;
-    align-self: center;
 }
 
 ._alert_vitro-text_37Erxqj {
@@ -5868,6 +5904,7 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
     color: #4A556C;
     flex-direction: column;
     overflow: hidden;
+    white-space: pre-wrap;
 }
 
 ._alert_vitro-text_37Erxqj > strong {