@vitrosoftware/common-ui-ts 1.1.85 → 1.1.86

package/css/std/controls/bim-viewer/toolbar.css

@@ -81,103 +81,83 @@ select {
 }
 
 .toolbarButton#btnCreateNotes::before {
-    /* draw-annotation.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133189)'%3E%3Crect x='0.5' y='0.5' width='21' height='13' rx='1.5' stroke='white'/%3E%3Cpath d='M4 3.5H18M4 6.5H15M4 9.5H18' stroke='white'/%3E%3Cpath d='M8 14H14V20L11 17L8 14Z' fill='white'/%3E%3Cpath d='M16 17.5H27.5V27.5H6.5V17.5H8' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133189'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/draw-annotation.svg');
 }
 
 .toolbarButton#btnToggleNotes::before {
-    /* hide-annotation.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133198)'%3E%3Cpath d='M27.5 4V11V19.5C27.5 20.6046 26.6046 21.5 25.5 21.5H2.5C1.39543 21.5 0.5 20.6046 0.5 19.5L0.5 2.5C0.5 1.39543 1.39543 0.5 2.5 0.5H24' stroke='white'/%3E%3Cpath d='M4 4.5H20M4 8.5H16M4 12.5H12M4 16.5H8M15 16.5H24M19 12.5H24M22 8.5H24' stroke='white'/%3E%3Cpath d='M12 22H18V28L15 25L12 22Z' fill='white'/%3E%3Cpath d='M0.5 27.5L27.5 0.5' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133198'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/hide-annotation.svg');
 }
 
 .toolbarButton#btnToggleSidebarNotes::before {
-    /* sidebar-notes-toggle.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133369)'%3E%3Crect x='0.5' y='0.5' width='27' height='27' stroke='white'/%3E%3Crect x='2' y='3' width='2' height='2' fill='white'/%3E%3Crect x='12' y='4' width='2' height='2' fill='white'/%3E%3Crect x='15' y='6' width='2' height='1' fill='white'/%3E%3Crect x='3' y='6' width='3' height='1' fill='white'/%3E%3Crect x='2' y='20' width='2' height='2' fill='white'/%3E%3Crect x='11' y='23' width='2' height='2' fill='white'/%3E%3Crect x='14' y='24' width='3' height='1' fill='white'/%3E%3Crect x='3' y='23' width='3' height='1' fill='white'/%3E%3Crect x='20.5' y='2.5' width='5' height='3' stroke='white'/%3E%3Crect x='20.5' y='7.5' width='5' height='3' stroke='white'/%3E%3Crect x='20.5' y='12.5' width='5' height='3' stroke='white'/%3E%3Crect x='20.5' y='17.5' width='5' height='3' stroke='white'/%3E%3Crect x='20.5' y='22.5' width='5' height='3' stroke='white'/%3E%3Cpath d='M4.5 10.5V17.5L9.5 22.5M4.5 10.5L9.5 5.5L14.5 10.5M4.5 10.5L9.5 15M9.5 22.5L14.5 17.5V10.5M9.5 22.5V15M14.5 10.5L9.5 15' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133369'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/sidebar-notes-toggle.svg');
 }
 
 .toolbarButton#btnToggleSidebarTreeView::before {
-    /* treeview.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133389)'%3E%3Crect x='0.5' y='0.5' width='2' height='2' stroke='white'/%3E%3Crect x='13.5' y='6.5' width='2' height='2' stroke='white'/%3E%3Crect x='25.5' y='13.5' width='2' height='2' stroke='white'/%3E%3Crect x='25.5' y='19.5' width='2' height='2' stroke='white'/%3E%3Crect x='25.5' y='25.5' width='2' height='2' stroke='white'/%3E%3Cpath d='M1.5 3V26.5H25' stroke='white' stroke-dasharray='2 2'/%3E%3Cpath d='M25 20.5H14.5V14.5M14.5 9V14.5M25 14.5H14.5' stroke='white' stroke-dasharray='2 2'/%3E%3Cpath d='M13 7.5H2' stroke='white' stroke-dasharray='2 2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133389'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/treeview.svg');
 }
 
 .toolbarButton#btnCreateSectionPlan::before {
-    /* section-plan.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133315)'%3E%3Cpath d='M11.5 2.5H1V25.5H11.5M15.5 2.5H27V25.5H16.5' stroke='white'/%3E%3Cpath d='M14 28V0' stroke='white' stroke-dasharray='4 4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133315'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/section-plan.svg');
 }
 
 .toolbarButton#btnClearSectionPlan::before {
-    /* section-plan-clear.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133207)'%3E%3Cpath d='M10 2.5H0.5V25.5H10M15 2.5H24.5V16' stroke='white'/%3E%3Cpath d='M12.5 28V0' stroke='white' stroke-dasharray='4 4'/%3E%3Cpath d='M27.5 17.5L17.5 27.5M17.5 17.5L27.5 27.5' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133207'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/section-plan-clear.svg');
 }
 
 .toolbarButton#btnToggleSectionPlan::before {
-    /* section-plan-toggle.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133280)'%3E%3Cpath d='M16.5 0.5V27.5H15.2071L10.5 22.7929V5.20711L15.2071 0.5H16.5Z' stroke='white'/%3E%3Cpath d='M16.5 0.5V27.5H15.2071L10.5 22.7929V5.20711L15.2071 0.5H16.5Z' stroke='white'/%3E%3Crect x='0.5' y='7.5' width='27' height='13' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133280'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/section-plan-toggle.svg');
 }
 
 .toolbarButton#btnToggleNotes.show::before {
-    /* show-annotation.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133352)'%3E%3Crect x='0.5' y='0.5' width='27' height='21' rx='1.5' stroke='white'/%3E%3Cpath d='M4 4.5H24M4 8.5H17M4 12.5H21M24 16.5H4' stroke='white'/%3E%3Cpath d='M12 22H18V28L15 25L12 22Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133352'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/show-annotation.svg');
 }
 
 .toolbarButton#btnCreateAngleMeasurements::before {
-    /* angle-measurements-create.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_132945)'%3E%3Crect x='0.5' y='25.5' width='2' height='2' stroke='white'/%3E%3Crect x='25.5' y='25.5' width='2' height='2' stroke='white'/%3E%3Crect x='25.5' y='0.5' width='2' height='2' stroke='white'/%3E%3Cpath d='M2 26L26 2' stroke='white'/%3E%3Cpath d='M2.5 26.5H25.5' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_132945'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/angle-measurements-create.svg');
 }
 
 .toolbarButton#btnToggleAngleMeasurements::before {
-    /* angle-measurements-toggle.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_132959)'%3E%3Crect x='0.5' y='25.5' width='2' height='2' stroke='white'/%3E%3Crect x='25.5' y='25.5' width='2' height='2' stroke='white'/%3E%3Crect x='25.5' y='0.5' width='2' height='2' stroke='white'/%3E%3Cpath d='M2 26L26 2' stroke='white' stroke-dasharray='2 2'/%3E%3Cpath d='M2.5 26.5H25.5' stroke='white' stroke-dasharray='2 2'/%3E%3Cpath d='M7.5 12L23 27.5' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_132959'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/angle-measurements-toggle.svg');
 }
 
 .toolbarButton#btnCreateDistanceMeasurements::before {
-    /* distance-measurements-create.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133176)'%3E%3Crect x='0.5' y='13' width='2' height='2' stroke='white'/%3E%3Crect x='25.5' y='13' width='2' height='2' stroke='white'/%3E%3Cpath d='M2.5 14H25.5' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133176'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/distance-measurements-create.svg');
 }
 
 .toolbarButton#btnToggleDistanceMeasurements::before {
-    /* distance-measurements-toggle.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133215)'%3E%3Crect x='0.5' y='13' width='2' height='2' stroke='white'/%3E%3Crect x='25.5' y='13' width='2' height='2' stroke='white'/%3E%3Cpath d='M2.5 14H25.5' stroke='white' stroke-dasharray='2 2'/%3E%3Cpath d='M5 5L23 23' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133215'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/distance-measurements-toggle.svg');
 }
 
 .toolbarButton#btnToggleSidebarStoreyViews::before {
-    /* storey-views-toggle.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133377)'%3E%3Cpath d='M9.5 1V11.5M9.5 11.5H13.5V17.5H18.5M9.5 11.5H1M27 17.5H18.5M18.5 17.5V27' stroke='white' stroke-width='1.5'/%3E%3Crect x='0.5' y='0.5' width='27' height='27' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133377'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/storey-views-toggle.svg');
 }
 
 .toolbarButton#btnSaveBCFViewpointJSON::before {
-    /* bcf-json-save.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_132996)'%3E%3Cpath d='M6 9.25H23' stroke='white'/%3E%3Cpath d='M14.5 0.75V7.75M14.5 7.75L18 4.75M14.5 7.75L11 4.75' stroke='white'/%3E%3Cpath d='M6 27.25H5C3.89543 27.25 3 26.3546 3 25.25V23.5V22.1682C3 21.6587 2.80557 21.1684 2.4564 20.7974L1 19.25L2.4564 17.7026C2.80557 17.3316 3 16.8413 3 16.3318V15V13.75C3 12.6454 3.89543 11.75 5 11.75H6M22 11.75H23C24.1046 11.75 25 12.6454 25 13.75V15V16.3318C25 16.8413 25.1944 17.3316 25.5436 17.7026L27 19.25L25.5436 20.7974C25.1944 21.1684 25 21.6587 25 22.1682V23.5V25.25C25 26.3546 24.1046 27.25 23 27.25H22' stroke='white'/%3E%3Cpath d='M5.5 14.25H8C8.82843 14.25 9.5 14.9216 9.5 15.75V17.75C9.5 18.5784 8.82843 19.25 8 19.25H5.5V14.25Z' stroke='white'/%3E%3Cpath d='M5.5 19.25H8C8.82843 19.25 9.5 19.9216 9.5 20.75V23.75C9.5 24.5784 8.82843 25.25 8 25.25H5.5V19.25Z' stroke='white'/%3E%3Cpath d='M16.5 16.75V16.25C16.5 15.1454 15.6046 14.25 14.5 14.25V14.25C13.3954 14.25 12.5 15.1454 12.5 16.25V23.25C12.5 24.3546 13.3954 25.25 14.5 25.25V25.25C15.6046 25.25 16.5 24.3546 16.5 23.25V22.75' stroke='white'/%3E%3Cpath d='M19.5 25.75V19.25M23.5 14.25H19.5V19.25M19.5 19.25H23' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_132996'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/bcf-json-save.svg');
 }
 
 .toolbarButton#btnLoadBCFViewpointJSON::before {
-    /* bcf-json-load.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_132966)'%3E%3Cpath d='M6 9.25H23' stroke='white'/%3E%3Cpath d='M14.5 7.75V0.75M14.5 0.75L18 3.75M14.5 0.75L11 3.75' stroke='white'/%3E%3Cpath d='M6 27.25H5C3.89543 27.25 3 26.3546 3 25.25V23.5V22.1682C3 21.6587 2.80557 21.1684 2.4564 20.7974L1 19.25L2.4564 17.7026C2.80557 17.3316 3 16.8413 3 16.3318V15V13.75C3 12.6454 3.89543 11.75 5 11.75H6M22 11.75H23C24.1046 11.75 25 12.6454 25 13.75V15V16.3318C25 16.8413 25.1944 17.3316 25.5436 17.7026L27 19.25L25.5436 20.7974C25.1944 21.1684 25 21.6587 25 22.1682V23.5V25.25C25 26.3546 24.1046 27.25 23 27.25H22' stroke='white'/%3E%3Cpath d='M5.5 14.25H8C8.82843 14.25 9.5 14.9216 9.5 15.75V17.75C9.5 18.5784 8.82843 19.25 8 19.25H5.5V14.25Z' stroke='white'/%3E%3Cpath d='M5.5 19.25H8C8.82843 19.25 9.5 19.9216 9.5 20.75V23.75C9.5 24.5784 8.82843 25.25 8 25.25H5.5V19.25Z' stroke='white'/%3E%3Cpath d='M16.5 16.75V16.25C16.5 15.1454 15.6046 14.25 14.5 14.25V14.25C13.3954 14.25 12.5 15.1454 12.5 16.25V23.25C12.5 24.3546 13.3954 25.25 14.5 25.25V25.25C15.6046 25.25 16.5 24.3546 16.5 23.25V22.75' stroke='white'/%3E%3Cpath d='M19.5 25.75V19.25M23.5 14.25H19.5V19.25M19.5 19.25H23' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_132966'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/bcf-json-load.svg');
 }
 
 .toolbarButton#btnToggleCompare::before {
-    /* compare.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.5 0.5L1.5 26.5' stroke='white' stroke-dasharray='1 1'/%3E%3Cpath d='M5.5 21V0.5L16.5 0.5V10' stroke='white'/%3E%3Cpath d='M22.5 7.5V27.5H11.5V17.5' stroke='white'/%3E%3Crect x='7.5' y='3.5' width='2' height='2' stroke='white'/%3E%3Crect x='18.5' y='18.5' width='2' height='2' stroke='white'/%3E%3Crect x='18.5' y='14.5' width='2' height='2' stroke='white'/%3E%3Cpath d='M20.5 10V12.5H18' stroke='white'/%3E%3Crect x='13.5' y='18.5' width='2' height='2' stroke='white'/%3E%3Cpath d='M15.5 14V16.5H13' stroke='white'/%3E%3Crect x='13.5' y='22.5' width='7' height='2' stroke='white'/%3E%3Crect x='7.5' y='11.5' width='2' height='2' stroke='white'/%3E%3Crect x='12.5' y='3.5' width='2' height='2' stroke='white'/%3E%3Crect x='7.5' y='7.5' width='7' height='2' stroke='white'/%3E%3C/svg%3E%0A");
+    content: url('img/compare.svg');
 }
 
 .toolbarButton#btnCompareOneOverOne::before {
-    /* compare-one-over-one.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3179_133031)'%3E%3Crect x='0.5' y='4.5' width='22' height='23' stroke='white'/%3E%3Crect x='5.5' y='0.5' width='22' height='23' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3179_133031'%3E%3Crect width='28' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    content: url('img/compare-one-over-one.svg');
 }
 
 .toolbarButton#btnCompareSideBySide::before {
-    /* compare-side-by-side.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='0.5' width='12' height='27' stroke='white'/%3E%3Crect x='14.5' y='0.5' width='11' height='27' stroke='white'/%3E%3C/svg%3E%0A");
+    content: url('img/compare-side-by-side.svg');
 }
 
 .toolbarButton#btnClearComparison::before {
-    /* compare-clear.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5.5' y='5.5' width='17' height='20' stroke='white'/%3E%3Cpath d='M2 5.5H26' stroke='white'/%3E%3Cpath d='M11.5 9V22' stroke='white'/%3E%3Cpath d='M16.5 9V22' stroke='white'/%3E%3Crect x='8.5' y='2.5' width='11' height='3' stroke='white'/%3E%3C/svg%3E%0A");
+    content: url('img/compare-clear.svg');
 }
 
 .toolbarButton#btnToggleTextures::before {
-    /* toggle-textures.svg URL-encoder for svg */
-    content: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 27V1H14V27H15ZM25.5 0.5V27.5H2.5V0.5H14H25.5Z' stroke='white'/%3E%3Crect x='15' y='1' width='1' height='1' fill='white'/%3E%3Crect x='16' y='2' width='1' height='1' fill='white'/%3E%3Crect x='16' y='4' width='1' height='1' fill='white'/%3E%3Crect x='16' y='6' width='1' height='1' fill='white'/%3E%3Crect x='16' y='8' width='1' height='1' fill='white'/%3E%3Crect x='16' y='10' width='1' height='1' fill='white'/%3E%3Crect x='16' y='12' width='1' height='1' fill='white'/%3E%3Crect x='16' y='14' width='1' height='1' fill='white'/%3E%3Crect x='16' y='16' width='1' height='1' fill='white'/%3E%3Crect x='16' y='18' width='1' height='1' fill='white'/%3E%3Crect x='16' y='20' width='1' height='1' fill='white'/%3E%3Crect x='16' y='22' width='1' height='1' fill='white'/%3E%3Crect x='16' y='24' width='1' height='1' fill='white'/%3E%3Crect x='16' y='26' width='1' height='1' fill='white'/%3E%3Crect x='15' y='3' width='1' height='1' fill='white'/%3E%3Crect x='15' y='5' width='1' height='1' fill='white'/%3E%3Crect x='15' y='7' width='1' height='1' fill='white'/%3E%3Crect x='15' y='9' width='1' height='1' fill='white'/%3E%3Crect x='15' y='11' width='1' height='1' fill='white'/%3E%3Crect x='15' y='13' width='1' height='1' fill='white'/%3E%3Crect x='15' y='15' width='1' height='1' fill='white'/%3E%3Crect x='15' y='17' width='1' height='1' fill='white'/%3E%3Crect x='15' y='19' width='1' height='1' fill='white'/%3E%3Crect x='15' y='21' width='1' height='1' fill='white'/%3E%3Crect x='15' y='23' width='1' height='1' fill='white'/%3E%3Crect x='15' y='25' width='1' height='1' fill='white'/%3E%3Crect x='17' y='1' width='1' height='1' fill='white'/%3E%3Crect x='18' y='2' width='1' height='1' fill='white'/%3E%3Crect x='18' y='4' width='1' height='1' fill='white'/%3E%3Crect x='18' y='6' width='1' height='1' fill='white'/%3E%3Crect x='18' y='8' width='1' height='1' fill='white'/%3E%3Crect x='18' y='10' width='1' height='1' fill='white'/%3E%3Crect x='18' y='12' width='1' height='1' fill='white'/%3E%3Crect x='18' y='14' width='1' height='1' fill='white'/%3E%3Crect x='18' y='16' width='1' height='1' fill='white'/%3E%3Crect x='18' y='18' width='1' height='1' fill='white'/%3E%3Crect x='18' y='20' width='1' height='1' fill='white'/%3E%3Crect x='18' y='22' width='1' height='1' fill='white'/%3E%3Crect x='18' y='24' width='1' height='1' fill='white'/%3E%3Crect x='18' y='26' width='1' height='1' fill='white'/%3E%3Crect x='17' y='3' width='1' height='1' fill='white'/%3E%3Crect x='17' y='5' width='1' height='1' fill='white'/%3E%3Crect x='17' y='7' width='1' height='1' fill='white'/%3E%3Crect x='17' y='9' width='1' height='1' fill='white'/%3E%3Crect x='17' y='11' width='1' height='1' fill='white'/%3E%3Crect x='17' y='13' width='1' height='1' fill='white'/%3E%3Crect x='17' y='15' width='1' height='1' fill='white'/%3E%3Crect x='17' y='17' width='1' height='1' fill='white'/%3E%3Crect x='17' y='19' width='1' height='1' fill='white'/%3E%3Crect x='17' y='21' width='1' height='1' fill='white'/%3E%3Crect x='17' y='23' width='1' height='1' fill='white'/%3E%3Crect x='17' y='25' width='1' height='1' fill='white'/%3E%3Crect x='19' y='1' width='1' height='1' fill='white'/%3E%3Crect x='20' y='2' width='1' height='1' fill='white'/%3E%3Crect x='20' y='4' width='1' height='1' fill='white'/%3E%3Crect x='20' y='6' width='1' height='1' fill='white'/%3E%3Crect x='20' y='8' width='1' height='1' fill='white'/%3E%3Crect x='20' y='10' width='1' height='1' fill='white'/%3E%3Crect x='20' y='12' width='1' height='1' fill='white'/%3E%3Crect x='20' y='14' width='1' height='1' fill='white'/%3E%3Crect x='20' y='16' width='1' height='1' fill='white'/%3E%3Crect x='20' y='18' width='1' height='1' fill='white'/%3E%3Crect x='20' y='20' width='1' height='1' fill='white'/%3E%3Crect x='20' y='22' width='1' height='1' fill='white'/%3E%3Crect x='20' y='24' width='1' height='1' fill='white'/%3E%3Crect x='20' y='26' width='1' height='1' fill='white'/%3E%3Crect x='19' y='3' width='1' height='1' fill='white'/%3E%3Crect x='19' y='5' width='1' height='1' fill='white'/%3E%3Crect x='19' y='7' width='1' height='1' fill='white'/%3E%3Crect x='19' y='9' width='1' height='1' fill='white'/%3E%3Crect x='19' y='11' width='1' height='1' fill='white'/%3E%3Crect x='19' y='13' width='1' height='1' fill='white'/%3E%3Crect x='19' y='15' width='1' height='1' fill='white'/%3E%3Crect x='19' y='17' width='1' height='1' fill='white'/%3E%3Crect x='19' y='19' width='1' height='1' fill='white'/%3E%3Crect x='19' y='21' width='1' height='1' fill='white'/%3E%3Crect x='19' y='23' width='1' height='1' fill='white'/%3E%3Crect x='19' y='25' width='1' height='1' fill='white'/%3E%3Crect x='21' y='1' width='1' height='1' fill='white'/%3E%3Crect x='22' y='2' width='1' height='1' fill='white'/%3E%3Crect x='22' y='4' width='1' height='1' fill='white'/%3E%3Crect x='22' y='6' width='1' height='1' fill='white'/%3E%3Crect x='22' y='8' width='1' height='1' fill='white'/%3E%3Crect x='22' y='10' width='1' height='1' fill='white'/%3E%3Crect x='22' y='12' width='1' height='1' fill='white'/%3E%3Crect x='22' y='14' width='1' height='1' fill='white'/%3E%3Crect x='22' y='16' width='1' height='1' fill='white'/%3E%3Crect x='22' y='18' width='1' height='1' fill='white'/%3E%3Crect x='22' y='20' width='1' height='1' fill='white'/%3E%3Crect x='22' y='22' width='1' height='1' fill='white'/%3E%3Crect x='22' y='24' width='1' height='1' fill='white'/%3E%3Crect x='22' y='26' width='1' height='1' fill='white'/%3E%3Crect x='21' y='3' width='1' height='1' fill='white'/%3E%3Crect x='21' y='5' width='1' height='1' fill='white'/%3E%3Crect x='21' y='7' width='1' height='1' fill='white'/%3E%3Crect x='21' y='9' width='1' height='1' fill='white'/%3E%3Crect x='21' y='11' width='1' height='1' fill='white'/%3E%3Crect x='21' y='13' width='1' height='1' fill='white'/%3E%3Crect x='21' y='15' width='1' height='1' fill='white'/%3E%3Crect x='21' y='17' width='1' height='1' fill='white'/%3E%3Crect x='21' y='19' width='1' height='1' fill='white'/%3E%3Crect x='21' y='21' width='1' height='1' fill='white'/%3E%3Crect x='21' y='23' width='1' height='1' fill='white'/%3E%3Crect x='21' y='25' width='1' height='1' fill='white'/%3E%3Crect x='23' y='1' width='1' height='1' fill='white'/%3E%3Crect x='24' y='2' width='1' height='1' fill='white'/%3E%3Crect x='24' y='4' width='1' height='1' fill='white'/%3E%3Crect x='24' y='6' width='1' height='1' fill='white'/%3E%3Crect x='24' y='8' width='1' height='1' fill='white'/%3E%3Crect x='24' y='10' width='1' height='1' fill='white'/%3E%3Crect x='24' y='12' width='1' height='1' fill='white'/%3E%3Crect x='24' y='14' width='1' height='1' fill='white'/%3E%3Crect x='24' y='16' width='1' height='1' fill='white'/%3E%3Crect x='24' y='18' width='1' height='1' fill='white'/%3E%3Crect x='24' y='20' width='1' height='1' fill='white'/%3E%3Crect x='24' y='22' width='1' height='1' fill='white'/%3E%3Crect x='24' y='24' width='1' height='1' fill='white'/%3E%3Crect x='24' y='26' width='1' height='1' fill='white'/%3E%3Crect x='23' y='3' width='1' height='1' fill='white'/%3E%3Crect x='23' y='5' width='1' height='1' fill='white'/%3E%3Crect x='23' y='7' width='1' height='1' fill='white'/%3E%3Crect x='23' y='9' width='1' height='1' fill='white'/%3E%3Crect x='23' y='11' width='1' height='1' fill='white'/%3E%3Crect x='23' y='13' width='1' height='1' fill='white'/%3E%3Crect x='23' y='15' width='1' height='1' fill='white'/%3E%3Crect x='23' y='17' width='1' height='1' fill='white'/%3E%3Crect x='23' y='19' width='1' height='1' fill='white'/%3E%3Crect x='23' y='21' width='1' height='1' fill='white'/%3E%3Crect x='23' y='23' width='1' height='1' fill='white'/%3E%3Crect x='23' y='25' width='1' height='1' fill='white'/%3E%3C/svg%3E%0A");
+    content: url('img/toggle-textures.svg');
 }
 
 .toolbarButton.toggled,

package/css/std/controls/breadcrumbs/breadcrumbs.css

@@ -66,8 +66,7 @@
     background-size: 100%;
     background-position: center;
     background-repeat: no-repeat;
-    /* breadcrumbs-arrow.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.1851C6 12.3633 6.21543 12.4525 6.34142 12.3265L10.5252 8.14272C10.6034 8.06462 10.6034 7.93799 10.5252 7.85988L6.34142 3.67606C6.21543 3.55006 6 3.6393 6 3.81748L6 12.1851Z' fill='%238E98A3'/%3E%3C/svg%3E%0A");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/breadcrumbs/img/breadcrumbs-arrow.svg');
 }
 
 .vitro-breadcrumbs-button::after {
@@ -90,8 +89,7 @@
     position: relative;
     background-repeat: no-repeat;
     background-size: 100%;
-    /* breadcrumbs-button.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='header-super-next-btn'%3E%3Cpath id='Vector 11' d='M10 15L15 10L10 5' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector 10' d='M4 15L9 10L4 5' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/breadcrumbs/img/breadcrumbs-button.svg');
 }
 
 .vitro-root {
@@ -103,8 +101,7 @@
     height: 20px;
     display: inline-block;
     background-size: 100%;
-    /* root-folder.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V18C21.5 19.3807 20.3807 20.5 19 20.5H5C3.61929 20.5 2.5 19.3807 2.5 18V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355Z' stroke='%23999B9D' stroke-linejoin='round'/%3E%3Cpath d='M8 16L12 10' stroke='%23999B9D' stroke-linecap='round'/%3E%3Cpath d='M12 16L16 16' stroke='%23999B9D' stroke-linecap='round'/%3E%3C/svg%3E%0A") !important;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/breadcrumbs/img/root-folder.svg');
 }
 
 .vitro-drop-down-list {
@@ -130,8 +127,7 @@
     position: absolute;
     top: -21px;
     left: 12px;
-    /* dropdown-arrow.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_dd_778_105705)'%3E%3Cpath d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3CfeBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/breadcrumbs/img/dropdown-menu-arrow.svg');
 }
 
 .vitro-drop-down-list ul {

package/css/std/controls/breadcrumbs/img/breadcrumbs-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12.1851C6 12.3633 6.21543 12.4525 6.34142 12.3265L10.5252 8.14272C10.6034 8.06462 10.6034 7.93799 10.5252 7.85988L6.34142 3.67606C6.21543 3.55006 6 3.6393 6 3.81748L6 12.1851Z" fill="#8E98A3"/>
+</svg>

package/css/std/controls/breadcrumbs/img/breadcrumbs-button.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="header-super-next-btn">
+<path id="Vector 11" d="M10 15L15 10L10 5" stroke="#8E98A3" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 10" d="M4 15L9 10L4 5" stroke="#8E98A3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/css/std/controls/breadcrumbs/img/dropdown-menu-arrow.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'><g filter='url(#filter0_dd_778_105705)'><path d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/></g><defs><filter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' 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='4'/><feGaussianBlur stdDeviation='7'/><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.18 0'/><feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/><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/><feGaussianBlur stdDeviation='2'/><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.14 0'/><feBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/><feBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/></filter></defs></svg>

package/css/std/controls/breadcrumbs/img/root-folder.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="M10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V18C21.5 19.3807 20.3807 20.5 19 20.5H5C3.61929 20.5 2.5 19.3807 2.5 18V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355Z" stroke="#999B9D" stroke-linejoin="round"/>
+<path d="M8 16L12 10" stroke="#999B9D" stroke-linecap="round"/>
+<path d="M12 16L16 16" stroke="#999B9D" stroke-linecap="round"/>
+</svg>

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

@@ -1,5 +1,5 @@
 .vitro-button {
-    font-family: 'InterMeduim';
+    font-family: 'InterMedium';
     font-size: 14px;
     outline: none;
     height: 32px;
@@ -40,9 +40,9 @@
     background: #E4E6EC;
 }
 
-.vitro-button :global(.vitro-icon-default),
-.vitro-button :global(.vitro-icon-hover),
-.vitro-button :global(.vitro-icon) {
+.vitro-button :global(.vitro-image-default),
+.vitro-button :global(.vitro-image-hover),
+.vitro-button :global(.vitro-image) {
     margin-right: 4px;
     height: 24px;
     width: 24px;

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

@@ -0,0 +1,11 @@
+.vitro-button-group {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0;
+    justify-content: flex-end;
+}
+
+.vitro-button-group > button:first-child {
+    margin-left: 0px;
+}

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

@@ -0,0 +1,3 @@
+.vitro-center {
+    flex: 1 1;
+}

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

@@ -26,16 +26,15 @@
     background: #fff;
     background-size: 100%;
     background-position: center;
+    background-repeat: no-repeat;
 }
 
 .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");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/checkbox/img/checkbox-big-empty.svg');
 }
 
 .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");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/checkbox/img/checkbox-big-active.svg');
 }
 
 .vitro-label {

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

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="2.5" fill="#4292F7"/>
+<path 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"/>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Checkbox-big">
+<rect id="Background" x="2.5" y="2.5" width="19" height="19" rx="3.5" stroke="#C0CAD5"/>
+</g>
+</svg>

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

@@ -11,14 +11,14 @@
     background: #F3F8FF !important;
 }
 
-.vitro-icon {
+.vitro-image {
     width: 24px;
     height: 24px;
     margin-right: 4px;
 }
 
 @media (max-width: 800px) {
-    .vitro-command-menu-button .vitro-icon + div {
+    .vitro-command-menu-button .vitro-image + div {
         display: none;
     }
 

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

@@ -57,8 +57,7 @@
     position: absolute;
     left: 16px;
     top: -21px;
-    /* dropdown-arrow.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_dd_778_105705)'%3E%3Cpath d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3CfeBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/command-menu/img/dropdown-menu-arrow.svg');
 }
 
 .vitro-dropdown-button-container:first-child :global(.dropdown-menu) {
@@ -109,14 +108,14 @@
     padding: 0px !important;
 }
 
-.vitro-dropdown-button-container :global(.dropdown-item) .vitro-icon {
+.vitro-dropdown-button-container :global(.dropdown-item) .vitro-image {
     width: 20px;
     height: 20px;
     margin-right: 12px;
     margin-left: 0;
 }
 
-.vitro-dropdown-button-container :global(.dropdown-item) .vitro-icon img {
+.vitro-dropdown-button-container :global(.dropdown-item) .vitro-image img {
     width: 20px;
     height: 20px;
 }
@@ -128,11 +127,10 @@
     background-size: 100%;
     background-position: center;
     background-repeat: no-repeat;
-    /* collapse-bottom.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='Chevron-dropdown-Big'%3E%3Cpath id='Vector 9' d='M19.5 9L12 16.5L4.5 9' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/command-menu/img/collapse-bottom.svg');
 }
 
-.vitro-icon {
+.vitro-image {
     width: 24px;
     height: 24px;
     margin-right: 4px;
@@ -167,7 +165,7 @@
 }
 
 @media (max-width: 800px) {
-    .vitro-command-menu-dropdown-button .vitro-icon + div {
+    .vitro-command-menu-dropdown-button .vitro-image + div {
         display: none;
     }
 
@@ -175,7 +173,7 @@
         min-width: 40px !important;
     }
 
-    li:first-child .vitro-icon + div {
+    li:first-child .vitro-image + div {
         display: block;
     }
 

package/css/std/controls/command-menu/img/collapse-bottom.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Chevron-dropdown-Big">
+<path id="Vector 9" d="M19.5 9L12 16.5L4.5 9" stroke="#4A556C" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/css/std/controls/command-menu/img/collapse-up.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 16.5L12 9L19.5 16.5" stroke="#4A556C" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/command-menu/img/dropdown-menu-arrow.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'><g filter='url(#filter0_dd_778_105705)'><path d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/></g><defs><filter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' 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='4'/><feGaussianBlur stdDeviation='7'/><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.18 0'/><feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/><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/><feGaussianBlur stdDeviation='2'/><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.14 0'/><feBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/><feBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/></filter></defs></svg>

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

@@ -67,8 +67,7 @@
     margin-left: 2px;
     background-position: center;
     background-size: 100%;
-    /* collapse-bottom.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='M19.5 9L12 16.5L4.5 9' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/criterion/img/collapse-bottom.svg');
 }
 
 .vitro-operator-list {
@@ -112,8 +111,7 @@
     background-color: transparent;
     background-size: 100%;
     background-position: center;
-    /* cancel-grey.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.63281 14.3711L10.002 10.002L14.3711 14.3711M14.3711 5.63281L10.0011 10.002L5.63281 5.63281' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/criterion/img/cancel-grey.svg');
 }
 
 .vitro-focus .vitro-label {
@@ -152,10 +150,10 @@
     width: 16px;
     background-size: 100%;
     background-position: center;
-    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='M13 6L8 11L3 6' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/criterion/img/collapse-bottom.svg');
 }
 
-.vitro-icon {
+.vitro-image {
     height: 16px;
     width: 16px;
 }
@@ -189,8 +187,7 @@
     position: absolute;
     top: -21px;
     left: 12px;
-    /* dropdown-arrow.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_dd_778_105705)'%3E%3Cpath d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/%3E%3CfeColorMatrix 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'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3CfeBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/criterion/img/dropdown-menu-arrow.svg');
 }
 
 .vitro-condition-list li {
@@ -214,7 +211,7 @@
     background: #F3F8FF;
 }
 
-.vitro-condition-list .vitro-icon {
+.vitro-condition-list .vitro-image {
     height: 20px;
     width: 20px;
 }

package/css/std/controls/criterion/img/cancel-grey.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.50781 11.4946L8.00315 7.99924L11.4985 11.4946M11.4985 4.50391L8.00248 7.99924L4.50781 4.50391" stroke="#8E98A3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/criterion/img/collapse-bottom.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Chevron-dropdown-Big">
+<path id="Vector 9" d="M19.5 9L12 16.5L4.5 9" stroke="#4A556C" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/css/std/controls/criterion/img/dropdown-menu-arrow.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'><g filter='url(#filter0_dd_778_105705)'><path d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/></g><defs><filter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' 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='4'/><feGaussianBlur stdDeviation='7'/><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.18 0'/><feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/><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/><feGaussianBlur stdDeviation='2'/><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.14 0'/><feBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/><feBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/></filter></defs></svg>

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

@@ -15,8 +15,7 @@
     position: absolute;
     right: 16px;
     top: calc(50% - 10px);
-    /* 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-image: url('@vitrosoftware/common-ui-ts/css/std/controls/date-picker/img/copy-to-clipboard.svg');
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
@@ -120,7 +119,7 @@
     margin-right: 4px;
     background-size: 100%;
     background-position: center;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 17' fill='none'%3E%3Cpath d='M7.99888 1.07255C12.1016 1.07255 15.4275 4.39843 15.4275 8.50112C15.4275 12.6038 12.1016 15.9297 7.99888 15.9297C3.8962 15.9297 0.570312 12.6038 0.570312 8.50112C0.570312 4.39843 3.8962 1.07255 7.99888 1.07255Z' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.5L8 4.5' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.00446 11.6434C7.84667 11.6434 7.71875 11.7713 7.71875 11.9291C7.71875 12.0869 7.84667 12.2148 8.00446 12.2148' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.00781 11.6434C8.16561 11.6434 8.29353 11.7713 8.29353 11.9291C8.29353 12.0869 8.16561 12.2148 8.00781 12.2148' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/date-picker/img/error-message.svg');
 }
 
 :global(.k-datepicker) {
@@ -193,8 +192,7 @@
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: center;
-    /* date-picker.svg URL-encoder for SVG */
-    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");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/date-picker/img/date-picker.svg');
 }
 
 :global(.k-picker-wrap.k-state-default > .k-select) {
@@ -293,8 +291,7 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
-    /* arrow-left.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 16L8 11L13 6' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/date-picker/img/collapse-left-grey.svg');
     width: 22px;
     height: 22px;
 }
@@ -303,8 +300,7 @@
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
-    /* arrow-right.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16L14 11L9 6' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/date-picker/img/collapse-right-grey.svg');
     width: 22px;
     height: 22px;
 }

package/css/std/controls/date-picker/img/collapse-left-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="M14.5 7L9.5 12L14.5 17" stroke="#8E98A3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/date-picker/img/collapse-right-grey.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 7L14.5 12L9.5 17" stroke="#8E98A3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/date-picker/img/copy-to-clipboard.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.41797 5.68048V4.58919C5.41797 3.10865 5.94264 2.58398 7.42318 2.58398H15.9128C17.3933 2.58398 17.918 3.10865 17.918 4.58919V13.0788C17.918 14.5593 17.3933 15.084 15.9128 15.084H14.7998" stroke="#4A556C" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5768 5.91602H4.08724C2.6067 5.91602 2.08203 6.44068 2.08203 7.92122V16.4108C2.08203 17.8913 2.6067 18.416 4.08724 18.416H12.5768C14.0574 18.416 14.582 17.8913 14.582 16.4108V7.92122C14.582 6.44068 14.0574 5.91602 12.5768 5.91602Z" stroke="#4A556C" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Vector">
+<path 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="#4A556C"/>
+<path 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="#4A556C"/>
+</g>
+</svg>

package/css/std/controls/date-picker/img/error-message.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99888 1.07255C12.1016 1.07255 15.4275 4.39843 15.4275 8.50112C15.4275 12.6038 12.1016 15.9297 7.99888 15.9297C3.8962 15.9297 0.570312 12.6038 0.570312 8.50112C0.570312 4.39843 3.8962 1.07255 7.99888 1.07255Z" stroke="#D13438" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 9.5L8 4.5" stroke="#D13438" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00446 11.6434C7.84667 11.6434 7.71875 11.7713 7.71875 11.9291C7.71875 12.0869 7.84667 12.2148 8.00446 12.2148" stroke="#D13438" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00391 11.6434C8.1617 11.6434 8.28962 11.7713 8.28962 11.9291C8.28962 12.0869 8.1617 12.2148 8.00391 12.2148" stroke="#D13438" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>