@vitrosoftware/common-ui-ts 1.1.97 → 1.1.99

package/css/std/controls/action-handler/action-result-list.css

@@ -0,0 +1,86 @@
+.vitro-action-result-list {
+    width: 100%;
+    padding-left: 12px;
+}
+
+.vitro-scrollbar > div:first-child {
+    padding-right: 16px;
+}
+
+.vitro-result-item {
+    display: flex;
+    border-top: 1px solid #E4E6EC;
+    padding: 8px 0;
+}
+
+.vitro-result-item:nth-child(2) {
+    padding-top: 12px;
+}
+
+.vitro-image-container {
+    flex-shrink: 0;
+    margin-right: 8px;
+    height: 24px;
+    width: 24px;
+}
+
+.vitro-image-container img {
+    width: 24px;
+    height: 24px;
+}
+
+.vitro-flex-column {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1;
+}
+
+.vitro-name {
+    font-size: 12px;
+    line-height: 16px;
+}
+
+.vitro-error-message,
+.vitro-success-message {
+    font-size: 12px;
+    line-height: 16px;
+    margin-top: 8px;
+}
+
+.vitro-error-message {
+    color: #D13438;
+}
+
+.vitro-success-message {
+    color: #198754;
+}
+
+.vitro-image-success,
+.vitro-image-error {
+    margin-left: 4px;
+    flex-shrink: 0;
+    height: 24px;
+    width: 24px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.vitro-image-success {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/action-handler/img/success.svg');
+}
+
+.vitro-image-error {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/action-handler/img/error.svg');
+}
+
+.vitro-hidden {
+    max-height: 0;
+    transition: max-height 0.4s ease;
+}
+
+.vitro-visible {
+    max-height: 2000px;
+    overflow: hidden;
+    transition: max-height 0.4s ease;
+}

package/css/std/controls/action-handler/confirm-dialog.css

@@ -0,0 +1,25 @@
+.vitro-confirm-dialog {
+    min-width: 469px;
+    max-width: 706px;
+    border: 1px solid rgba(74, 85, 108, 0.35);
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 12px 34px 0 rgba(0, 0, 0, 0.19);
+}
+
+.vitro-confirm-dialog h1 {
+    font-size: 18px;
+}
+
+.vitro-image {
+    height: 40px;
+    width: 40px;
+    margin-right: 8px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/action-handler/img/question.svg');
+}
+
+.vitro-header {
+    height: 88px;
+    padding: 24px 20px;
+    border-bottom: none;
+}

package/css/std/controls/action-handler/img/question.svg

@@ -1,10 +1,41 @@
-<svg viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="help-question">
-<path id="Vector" d="M21.0005 36.751C29.6993 36.751 36.751 29.6993 36.751 21.0005C36.751 12.3017 29.6993 5.25 21.0005 5.25C12.3017 5.25 5.25 12.3017 5.25 21.0005C5.25 29.6993 12.3017 36.751 21.0005 36.751Z" stroke="#4A556C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_2" d="M16.7656 16.7561C16.7656 15.9174 17.0146 15.0976 17.4809 14.4002C17.9473 13.7029 18.6102 13.1594 19.3858 12.8384C20.1613 12.5175 21.0147 12.4335 21.838 12.5971C22.6614 12.7607 23.4177 13.1646 24.0112 13.7576C24.6048 14.3507 25.0091 15.1063 25.1728 15.9289C25.3366 16.7514 25.2526 17.6041 24.9313 18.3789C24.6101 19.1538 24.066 19.816 23.3681 20.282C22.6701 20.7479 21.8495 20.9966 21.01 20.9966V23.8236" stroke="#222D44" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<g id="Group 2567">
-<path id="Vector_3" d="M21.0042 29.3835C20.6697 29.3835 20.3984 29.1122 20.3984 28.7777C20.3984 28.4431 20.6697 28.1719 21.0042 28.1719" stroke="#222D44" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path id="Vector_4" d="M21 29.3835C21.3346 29.3835 21.6058 29.1122 21.6058 28.7777C21.6058 28.4431 21.3346 28.1719 21 28.1719" stroke="#222D44" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.5 20C37.5 29.665 29.665 37.5 20 37.5C10.335 37.5 2.5 29.665 2.5 20C2.5 10.335 10.335 2.5 20 2.5C29.665 2.5 37.5 10.335 37.5 20Z" fill="url(#paint0_linear_3501_200788)"/>
+<g filter="url(#filter0_ddii_3501_200788)">
+<path d="M21.3423 23.1932H18.6463V21.7379C18.6463 21.1017 18.7179 20.6325 18.8611 20.3303C19.0201 20.0122 19.3541 19.5987 19.8631 19.0897L21.6047 17.3481C21.9705 16.9505 22.1534 16.4574 22.1534 15.8689C22.1534 15.2804 21.9626 14.7953 21.5808 14.4136C21.1991 14.016 20.7061 13.8171 20.1017 13.8171C19.4973 13.8171 18.9883 14.008 18.5748 14.3897C18.1771 14.7555 17.9465 15.2486 17.8829 15.8689H14.9961C15.1551 14.4534 15.7039 13.3479 16.6423 12.5527C17.5966 11.7415 18.7815 11.3359 20.1971 11.3359C21.6126 11.3359 22.7658 11.7256 23.6565 12.505C24.5471 13.2684 24.9925 14.342 24.9925 15.7258C24.9925 16.6801 24.7301 17.4753 24.2052 18.1115C23.903 18.4933 23.6724 18.7637 23.5133 18.9227C23.3543 19.0818 23.1395 19.2885 22.8692 19.543C22.6147 19.7816 22.392 19.9963 22.2011 20.1872C22.0262 20.3621 21.883 20.5132 21.7717 20.6405C21.4854 20.9904 21.3423 21.4834 21.3423 22.1196V23.1932Z" fill="white"/>
+<path d="M21.8109 26.8527C21.8109 27.8544 20.9989 28.6664 19.9972 28.6664C18.9956 28.6664 18.1836 27.8544 18.1836 26.8527C18.1836 25.8511 18.9956 25.0391 19.9972 25.0391C20.9989 25.0391 21.8109 25.8511 21.8109 26.8527Z" fill="white"/>
 </g>
+<defs>
+<filter id="filter0_ddii_3501_200788" x="10.1099" y="8.28206" width="19.769" height="27.103" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.305387"/>
+<feGaussianBlur stdDeviation="0.458081"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.17 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3501_200788"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.83232"/>
+<feGaussianBlur stdDeviation="2.4431"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_3501_200788" result="effect2_dropShadow_3501_200788"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3501_200788" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.610775"/>
+<feGaussianBlur stdDeviation="0.152694"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.32549 0 0 0 0 0.321569 0 0 0 0 0.533333 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_3501_200788"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.610775"/>
+<feGaussianBlur stdDeviation="0.610775"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.572549 0 0 0 0 0.564706 0 0 0 0 0.933333 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect3_innerShadow_3501_200788" result="effect4_innerShadow_3501_200788"/>
+</filter>
+<linearGradient id="paint0_linear_3501_200788" x1="11.6" y1="10.2" x2="32.25" y2="44.675" gradientUnits="userSpaceOnUse">
+<stop stop-color="#64A8FF"/>
+<stop offset="1" stop-color="#1661C0"/>
+</linearGradient>
+</defs>
 </svg>

package/css/std/controls/action-handler/img/save-blue.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 11L12 15L16 11" stroke="#3274E0" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 15L12 3" stroke="#3274E0" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 16V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V16" stroke="#3274E0" stroke-linecap="round"/>
+</svg>

package/css/std/controls/action-handler/result-dialog.css

@@ -0,0 +1,124 @@
+.vitro-result-dialog {
+    z-index: 1001;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+    height: auto;
+    max-height: 74%;
+    width: 400px;
+    top: 56px;
+    right: 16px;
+    overflow: hidden;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    background: #fff;
+}
+
+.vitro-result-dialog.vitro-progress {
+    width: 400px;
+}
+
+.vitro-result-dialog.vitro-success,
+.vitro-result-dialog.vitro-error {
+    width: 467px;
+}
+
+.vitro-result-dialog.vitro-success .vitro-header,
+.vitro-result-dialog.vitro-error .vitro-header {
+    padding: 12px 16px 12px 12px;
+}
+
+.vitro-result-dialog.vitro-success {
+    border-left: 4px solid #198754;
+}
+
+.vitro-result-dialog.vitro-success .vitro-image {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/action-handler/img/success.svg');
+}
+
+.vitro-result-dialog.vitro-error {
+    border-left: 4px solid #D13438;
+}
+    
+.vitro-result-dialog.vitro-error .vitro-image {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/action-handler/img/error.svg');
+}
+
+.vitro-header {
+    display: flex;
+    flex-direction: column;
+    padding: 12px 16px;
+}
+
+.vitro-flex {
+    display: flex;
+    align-items: center;
+    grid-gap: 8px;
+}
+
+.vitro-image {
+    flex-shrink: 0;
+    align-self: flex-start;
+    height: 24px;
+    width: 24px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.vitro-result-text {
+    font-size: 14px;
+    line-height: 150%;
+    white-space: pre-wrap;
+}
+
+.vitro-button-group {
+    grid-gap: 8px;
+    width: unset;
+    flex: 1 1;
+    align-self: flex-start;
+}
+
+.vitro-progress-bar {
+    margin-top: 8px;
+    padding-right: 16px;
+}
+
+.vitro-button-close,
+.vitro-button-close:hover,
+.vitro-button-close:active {
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/action-handler/img/cancel-dark-grey.svg');
+}
+
+.vitro-save-report-button,
+.vitro-save-report-button:hover,
+.vitro-save-report-button:active {
+    font-size: 14px;
+    line-height: 150%;
+    color: #3274E0;
+    border: none;
+    outline: none;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    margin-left: auto;
+}
+
+.vitro-save-report-image {
+    width: 24px;
+    height: 24px;
+    margin-left: 4px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/action-handler/img/save-blue.svg');
+}

package/css/std/controls/bottom-align-control-group/bottom-align-control-group.css

@@ -0,0 +1,4 @@
+.vitro-bottom {
+    width: 100%;
+    margin-top: 16px;
+}

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

@@ -0,0 +1,12 @@
+.vitro-button-cancel {
+    cursor: pointer;
+    background: #fff !important;
+    color: #222D44 !important;
+    border: 1px solid #E4E6EC !important;
+    font-family: 'InterRegular' !important;
+}
+
+.vitro-button-cancel:hover, 
+.vitro-button-cancel:active {
+    background: #F3F8FF !important;
+}

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

@@ -4,6 +4,7 @@
     width: 100%;
     padding: 0;
     justify-content: flex-end;
+    align-items: center;
 }
 
 .vitro-button-group > button:first-child {

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

@@ -13,7 +13,7 @@
 .vitro-checkbox-content input {
     width: 24px;
     height: 24px;
-    margin-right: 6px;
+    margin-right: 4px;
     cursor: pointer;
     appearance: none;
     -webkit-appearance: none;
@@ -25,18 +25,18 @@
     display: block;
     width: 100%;
     height: 100%;
-    background: #fff;
+    background: transparent;
     background-size: 100%;
     background-position: center;
     background-repeat: no-repeat;
 }
 
 .vitro-checkbox-content input::before {
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/checkbox/img/checkbox-big-empty.svg');
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/checkbox/img/checkbox-empty.svg');
 }
 
 .vitro-checkbox-content input:checked::before {
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/checkbox/img/checkbox-big-active.svg');
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/checkbox/img/checkbox-active.svg');
 }
 
 .vitro-label {

package/css/std/controls/checkbox/img/checkbox-active.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="16" height="16" rx="2" fill="#4292F7"/>
+<path d="M15.765 9.20474C16.0661 9.48915 16.0797 9.96383 15.7953 10.265L11.5453 14.765C11.4061 14.9123 11.2133 14.997 11.0107 14.9999C10.8081 15.0028 10.6129 14.9236 10.4697 14.7803L8.21967 12.5303C7.92678 12.2374 7.92678 11.7626 8.21967 11.4697C8.51256 11.1768 8.98744 11.1768 9.28033 11.4697L10.9846 13.174L14.7047 9.23503C14.9891 8.9339 15.4638 8.92033 15.765 9.20474Z" fill="white"/>
+</svg>

package/css/std/controls/checkbox/img/checkbox-empty.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.5" y="4.5" width="15" height="15" rx="1.5" stroke="#C0CAD5"/>
+</svg>

package/css/std/controls/criterion/criterion.css

@@ -27,7 +27,7 @@
     padding: 0 6px;
     background: transparent;
     background-image: linear-gradient(#fff, #fff);
-    background-size: 100% 2px;
+    background-size: 100% 3px;
     background-position: 0 calc(50% + 3px);
     background-repeat: no-repeat;
     z-index: 1;

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

@@ -76,7 +76,7 @@
     padding: 0 6px;
     background: transparent;
     background-image: linear-gradient(#fff, #fff);
-    background-size: 100% 2px;
+    background-size: 100% 3px;
     background-position: 0 calc(50% + 3px);
     background-repeat: no-repeat;
     z-index: 1;
@@ -104,9 +104,6 @@
     line-height: 135%;
     margin-top: 2px;
     width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
 }
 
 .vitro-focus .vitro-error-text {

package/css/std/controls/dialog/dialog-content.css

@@ -5,6 +5,7 @@
     flex-direction: column;
     flex-grow: 1;
     flex-shrink: 1;
+    padding: 0 24px 16px 24px;
 }
 
 .vitro-dialog-content > :global(#TreeView) > :global(.ps) {
@@ -12,6 +13,17 @@
     padding-left: 16px;
 }
 
+.vitro-dialog-content > :global(#TreeView) {
+    margin-left: -24px;
+    margin-right: -24px;
+}
+
 .vitro-dialog-content > div {
     max-height: 100%;
+}
+
+@media (max-width: 800px) {
+    .vitro-dialog-content {
+        padding: 0 16px 16px 16px;
+    }
 }

package/css/std/controls/dialog/dialog-footer.css

@@ -1,19 +1,67 @@
 .vitro-dialog-footer {
     display: flex;
     justify-content: flex-end;
-    background: #fff;
     width: 100%;
-    padding: 16px;
-    border-top: 1px solid #E4E6EC;
+    height: 88px;
     margin-top: auto;
+    padding: 24px;
+    background-color: #F8F9FA;
     border-radius: 0 0 4px 4px;
+    border-top: 1px solid #E4E6EC;
+}
+
+.vitro-button-group {
+    grid-gap: 12px;
+}
+
+.vitro-button {
+    min-width: 139px;
+    height: 40px !important;
+    font-size: 16px;
+}
+
+.vitro-detail-button {
+    color: #2A63F6;
+    margin-right: auto;
+}
+
+.vitro-expand,
+.vitro-collapse {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #fff;
+    overflow: hidden;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.vitro-expand {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/dialog/img/collapse-bottom-grey.svg');
+}
+
+.vitro-collapse {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/dialog/img/collapse-up-grey.svg');
 }
 
+
 @media (max-width: 800px) {
     .vitro-dialog-footer {
         justify-content: center !important;
     }
-    button {
+
+    .vitro-button {
         width: 100%;
+        min-width: unset;
+        font-size: 14px;
+        font-family: 'InterRegular';
+        line-height: 16px;
+    }
+
+    .vitro-detail-button {
+        margin-left: 16px;
+        margin-bottom: 16px;
     }
 }

package/css/std/controls/dialog/dialog-header.css

@@ -1,31 +1,28 @@
 .vitro-dialog-header {
-    padding: 20px 16px;
-    border-bottom: 1px solid #E4E6EC;
+    padding: 20px;
     background: #fff;
     border-radius: 4px 4px 0 0;
     display: flex;
     align-items: center;
 }
 
-.vitro-title {
-    color: #222D44;
-    font-size: 20px;
-    line-height: 24px;
-    font-family: 'InterRegular';
-    margin-bottom: 0;
-}
-
-.vitro-description {
-    color: #4A556C;
-    font-size: 14px;
-    line-height: 16px;
-    font-family: 'InterRegular';
-    margin-top: 7px;
-    margin-bottom: 0;
+.vitro-subtitle {
+    line-height: 150%;
 }
 
 .vitro-image {
     width: 38px;
     height: 38px;
     margin-right: 16px;
+}
+
+@media (max-width: 800px) {
+    .vitro-dialog-header {
+        padding: 12px 16px;
+    }
+
+    .vitro-dialog-header h1 {
+        font-size: 16px !important;
+        line-height: 140% !important;
+    }
 }

package/css/std/controls/dialog/dialog.css

@@ -5,7 +5,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    z-index: 1001;
+    z-index: 1002;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -15,7 +15,7 @@
 .vitro-dialog > div {
     display: flex;
     flex-direction: column;
-    border: 1px solid #C0CAD5;
+    border: 1px solid rgba(74, 85, 108, 0.35);
     background: #fff;
     position: absolute;
     overflow: visible;
@@ -25,16 +25,52 @@
     opacity: 1;
     border-radius: 4px;
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    min-width: 469px;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 12px 34px 0 rgba(0, 0, 0, 0.19);
+}
+
+.vitro-dialog-button-close,
+.vitro-dialog-button-close:hover,
+.vitro-dialog-button-close:active {
+    display: block;
+    position: absolute;
+    border: none;
+    background: 0 0;
+    outline: 0;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    right: -42px;
+    top: 0;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/dialog/img/cancel-white.svg');
+}
+
+.vitro-hidden-content {
+    max-height: 500px;
+    overflow: hidden;
+    transition: max-height 0.5s ease;
+}
+
+.vitro-hidden-content.vitro-hidden {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.5s ease;
 }
 
 @media (max-width: 800px) {
     .vitro-dialog {
         z-index: 10001 !important;
     }
-        .vitro-dialog > div {
-            width: 100% !important;
-            height: 100% !important;
-            border-radius: 0 !important;
-            border: none !important;
-        }
-}
+
+    .vitro-dialog > div {
+        min-width: unset;
+        max-width: calc(100% - 16px);
+    }
+
+    .vitro-dialog-button-close {
+        display: none;
+    }
+}

package/css/std/controls/dialog/img/cancel-white.svg

@@ -1,3 +1,10 @@
-<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.8906 43.1056L29.9981 29.9981L43.1056 43.1056M43.1056 16.8906L29.9956 29.9981L16.8906 16.8906" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3501_200870)">
+<path d="M1.89062 28.1056L14.9981 14.9981L28.1056 28.1056M28.1056 1.89062L14.9956 14.9981L1.89062 1.89062" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_3501_200870">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/css/std/controls/dialog/img/collapse-bottom-grey.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 10.5L12 15.5L17 10.5" stroke="#4A556C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/dialog/img/collapse-up-grey.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 13.5L12 8.5L17 13.5" stroke="#4A556C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>