@syncfusion/ej2-inputs 31.2.15 → 32.1.19

package/styles/uploader/bootstrap5.3.css

@@ -2,6 +2,86 @@
 
 
 
+
+
+
+
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes material-spinner-rotate {
   0% {
@@ -80,7 +160,7 @@
   width: 100%;
 }
 .e-upload.e-control-wrapper {
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
 }
 .e-upload .e-hidden-file-input {
   border: 0;
@@ -222,13 +302,13 @@
   width: 95%;
 }
 .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-inner-wrap {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
   height: 4px;
   width: 100%;
 }
 .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-inner-wrap .e-upload-progress-bar {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: inherit;
   height: 4px;
 }
@@ -282,12 +362,12 @@
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):hover, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):hover, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):hover, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):hover, .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover, .e-upload .e-upload-files .e-clear-icon-focus {
   background-color: rgba(var(--color-sf-black), 0.12);
   border-color: transparent;
-  border-radius: 50%;
+  border-radius: 999px;
   -webkit-box-shadow: 0 0 0 transparent;
           box-shadow: 0 0 0 transparent;
 }
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-upload .e-upload-files .e-clear-icon-focus {
-  border-radius: 50%;
+  border-radius: 999px;
 }
 .e-upload .e-upload-files .e-file-delete-btn.e-icons {
   font-size: 18px;
@@ -717,7 +797,7 @@
   width: 100%;
 }
 .e-bigger.e-small .e-upload.e-control-wrapper {
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "apple color emoji", "Segoe UI emoji", "Segoe UI Symbol", "Noto color emoji";
+  font-family: var(--e-font-family);
 }
 .e-bigger.e-small .e-upload .e-hidden-file-input {
   border: 0;
@@ -859,13 +939,13 @@
   width: 95%;
 }
 .e-bigger.e-small .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-inner-wrap {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
   height: 4px;
   width: 100%;
 }
 .e-bigger.e-small .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-inner-wrap .e-upload-progress-bar {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: inherit;
   height: 4px;
 }
@@ -919,12 +999,12 @@
 .e-bigger.e-small .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover, .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
   background-color: rgba(var(--color-sf-black), 0.12);
   border-color: transparent;
-  border-radius: 50%;
+  border-radius: 999px;
   -webkit-box-shadow: 0 0 0 transparent;
           box-shadow: 0 0 0 transparent;
 }
 .e-bigger.e-small .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
-  border-radius: 50%;
+  border-radius: 999px;
 }
 .e-bigger.e-small .e-upload .e-upload-files .e-file-delete-btn.e-icons {
   font-size: 18px;
@@ -1029,5 +1109,5 @@
 .e-upload .e-upload-actions,
 .e-bigger.e-small .e-upload .e-upload-actions {
   background-color: var(--color-sf-content-bg-color-alt1);
-  border-radius: 0 0 6px 6px;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.375) calc(var(--e-radius) * 0.375);
 }

package/styles/uploader/bootstrap5.3.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bootstrap5.3.scss';
-@import 'ej2-buttons/styles/button/bootstrap5.3-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap5.3-definition.scss';
-@import 'bootstrap5.3-definition.scss';
-@import 'icons/bootstrap5.3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5.3' as *;
+@use 'ej2-buttons/styles/button/bootstrap5.3-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5.3-definition' as *;
+@use 'bootstrap5.3-definition' as *;
+@use 'icons/bootstrap5.3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/uploader/bootstrap5.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
-@import 'ej2-popups/styles/spinner/bootstrap5-definition.scss';
-@import 'bootstrap5-definition.scss';
-@import 'icons/bootstrap5.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
+@use 'ej2-popups/styles/spinner/bootstrap5-definition' as *;
+@use 'bootstrap5-definition' as *;
+@use 'icons/bootstrap5' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/uploader/fabric-dark.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/fabric-dark.scss';
-@import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/fabric-dark-definition.scss';
-@import 'fabric-dark-definition.scss';
-@import 'icons/fabric-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric-dark' as *;
+@use 'ej2-buttons/styles/button/fabric-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/fabric-dark-definition' as *;
+@use 'fabric-dark-definition' as *;
+@use 'icons/fabric-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/uploader/fabric.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/fabric.scss';
-@import 'ej2-buttons/styles/button/fabric-definition.scss';
-@import 'ej2-popups/styles/spinner/fabric-definition.scss';
-@import 'fabric-definition.scss';
-@import 'icons/fabric.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fabric' as *;
+@use 'ej2-buttons/styles/button/fabric-definition' as *;
+@use 'ej2-popups/styles/spinner/fabric-definition' as *;
+@use 'fabric-definition' as *;
+@use 'icons/fabric' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/uploader/fluent-dark.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/fluent-dark.scss';
-@import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
-@import 'ej2-popups/styles/spinner/fluent-dark-definition.scss';
-@import 'fluent-dark-definition.scss';
-@import 'icons/fluent-dark.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent-dark' as *;
+@use 'ej2-buttons/styles/button/fluent-dark-definition' as *;
+@use 'ej2-popups/styles/spinner/fluent-dark-definition' as *;
+@use 'fluent-dark-definition' as *;
+@use 'icons/fluent-dark' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/uploader/fluent.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/fluent.scss';
-@import 'ej2-buttons/styles/button/fluent-definition.scss';
-@import 'ej2-popups/styles/spinner/fluent-definition.scss';
-@import 'fluent-definition.scss';
-@import 'icons/fluent.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent' as *;
+@use 'ej2-buttons/styles/button/fluent-definition' as *;
+@use 'ej2-popups/styles/spinner/fluent-definition' as *;
+@use 'fluent-definition' as *;
+@use 'icons/fluent' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/uploader/fluent2.css

@@ -4,6 +4,86 @@
 
 
 
+
+
+/* Font Family */
+/* Font Sizes */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+/* 65% */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+
+
+
+
 /* stylelint-disable property-no-vendor-prefix */
 @-webkit-keyframes material-spinner-rotate {
   0% {
@@ -82,7 +162,7 @@
   width: 100%;
 }
 .e-upload.e-control-wrapper {
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
 }
 .e-upload .e-hidden-file-input {
   border: 0;
@@ -227,13 +307,13 @@
   width: 95%;
 }
 .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-inner-wrap {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
   height: 4px;
   width: 100%;
 }
 .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-inner-wrap .e-upload-progress-bar {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: inherit;
   height: 4px;
 }
@@ -287,12 +367,12 @@
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):hover, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):hover, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):hover, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):hover, .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover, .e-upload .e-upload-files .e-clear-icon-focus {
   color: var(--color-sf-primary);
   border-color: transparent;
-  border-radius: 50%;
+  border-radius: 999px;
   -webkit-box-shadow: 0 0 0 transparent;
           box-shadow: 0 0 0 transparent;
 }
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-upload .e-upload-files .e-clear-icon-focus {
-  border-radius: 50%;
+  border-radius: 999px;
 }
 .e-upload .e-upload-files .e-file-delete-btn.e-icons {
   font-size: 14px;
@@ -481,7 +561,7 @@
 
 .e-upload {
   border: 1px dashed var(--color-sf-border-dark);
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
 }
 .e-upload .e-file-drop {
   color: var(--color-sf-content-text-color-alt2);
@@ -723,7 +803,7 @@
   width: 100%;
 }
 .e-bigger.e-small .e-upload.e-control-wrapper {
-  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
+  font-family: var(--e-font-family);
 }
 .e-bigger.e-small .e-upload .e-hidden-file-input {
   border: 0;
@@ -868,13 +948,13 @@
   width: 95%;
 }
 .e-bigger.e-small .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-inner-wrap {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: block;
   height: 4px;
   width: 100%;
 }
 .e-bigger.e-small .e-upload .e-upload-files .e-upload-file-list .e-file-container .e-upload-progress-wrap .e-progress-inner-wrap .e-upload-progress-bar {
-  border-radius: 4px;
+  border-radius: calc(var(--e-radius) * 0.25);
   display: inherit;
   height: 4px;
 }
@@ -928,12 +1008,12 @@
 .e-bigger.e-small .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover, .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover, .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
   color: var(--color-sf-primary);
   border-color: transparent;
-  border-radius: 50%;
+  border-radius: 999px;
   -webkit-box-shadow: 0 0 0 transparent;
           box-shadow: 0 0 0 transparent;
 }
 .e-bigger.e-small .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
-  border-radius: 50%;
+  border-radius: 999px;
 }
 .e-bigger.e-small .e-upload .e-upload-files .e-file-delete-btn.e-icons {
   font-size: 14px;
@@ -1038,5 +1118,5 @@
 .e-upload .e-upload-actions,
 .e-bigger.e-small .e-upload .e-upload-actions {
   background-color: var(--color-sf-content-bg-color-alt1);
-  border-radius: 0 0 6px 6px;
+  border-radius: calc(var(--e-radius) * 0) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0.375) calc(var(--e-radius) * 0.375);
 }

package/styles/uploader/fluent2.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/fluent2.scss';
-@import 'ej2-buttons/styles/button/fluent2-definition.scss';
-@import 'ej2-popups/styles/spinner/fluent2-definition.scss';
-@import 'fluent2-definition.scss';
-@import 'icons/fluent2.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/fluent2' as *;
+@use 'ej2-buttons/styles/button/fluent2-definition' as *;
+@use 'ej2-popups/styles/spinner/fluent2-definition' as *;
+@use 'fluent2-definition' as *;
+@use 'icons/fluent2' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/uploader/highcontrast-light.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/highcontrast-light.scss';
-@import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
-@import 'ej2-popups/styles/spinner/highcontrast-light-definition.scss';
-@import 'highcontrast-light-definition.scss';
-@import 'icons/highcontrast-light.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast-light' as *;
+@use 'ej2-buttons/styles/button/highcontrast-light-definition' as *;
+@use 'ej2-popups/styles/spinner/highcontrast-light-definition' as *;
+@use 'highcontrast-light-definition' as *;
+@use 'icons/highcontrast-light' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/uploader/highcontrast.scss

@@ -1,7 +1,7 @@
-@import 'ej2-base/styles/definition/highcontrast.scss';
-@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
-@import 'ej2-popups/styles/spinner/highcontrast-definition.scss';
-@import 'highcontrast-definition.scss';
-@import 'icons/highcontrast.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/highcontrast' as *;
+@use 'ej2-buttons/styles/button/highcontrast-definition' as *;
+@use 'ej2-popups/styles/spinner/highcontrast-definition' as *;
+@use 'highcontrast-definition' as *;
+@use 'icons/highcontrast' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/uploader/icons/_bds.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bds-definition' as *;
 @include export-module('uploader-bootstrap4-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e7e7';

package/styles/uploader/icons/_bootstrap-dark.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap-dark-definition' as *;
 @include export-module('uploader-bootstrap-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e96c';

package/styles/uploader/icons/_bootstrap.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap-dark-definition' as *;
 @include export-module('uploader-bootstrap-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e96c';

package/styles/uploader/icons/_bootstrap4.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap4-definition' as *;
 @include export-module('uploader-bootstrap4-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e745';

package/styles/uploader/icons/_bootstrap5-dark.scss

@@ -1 +1 @@
-@import './bootstrap5.scss';
+@use './bootstrap5' as *;

package/styles/uploader/icons/_bootstrap5.3.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap5.3-definition' as *;
 @include export-module('uploader-bootstrap4-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e7e7';

package/styles/uploader/icons/_bootstrap5.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../bootstrap5-definition' as *;
 @include export-module('uploader-bootstrap4-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e7e7';

package/styles/uploader/icons/_fabric-dark.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fabric-dark-definition' as *;
 @include export-module('uploader-fabric-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e953';

package/styles/uploader/icons/_fabric.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fabric-definition' as *;
 @include export-module('uploader-fabric-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e953';

package/styles/uploader/icons/_fluent-dark.scss

@@ -1 +1 @@
-@import './fluent.scss';
+@use './fluent' as *;

package/styles/uploader/icons/_fluent.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fluent-definition' as *;
 @include export-module('uploader-bootstrap4-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e7e7';

package/styles/uploader/icons/_fluent2.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fluent2-definition' as *;
 @include export-module('uploader-fluent2-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e7e7';

package/styles/uploader/icons/_fusionnew.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../fusionnew-definition' as *;
 @include export-module('uploader-bootstrap4-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e7e7';

package/styles/uploader/icons/_highcontrast-light.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../highcontrast-light-definition' as *;
 @include export-module('uploader-highcontrast-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e953';

package/styles/uploader/icons/_highcontrast.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../highcontrast-definition' as *;
 @include export-module('uploader-highcontrast-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e953';

package/styles/uploader/icons/_material-dark.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../material-dark-definition' as *;
 @include export-module('uploader-material-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e945';

package/styles/uploader/icons/_material.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../material-definition' as *;
 @include export-module('uploader-material-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e945';

package/styles/uploader/icons/_material3-dark.scss

@@ -1 +1 @@
-@import './material3.scss';
+@use './material3' as *;

package/styles/uploader/icons/_material3.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../material3-definition' as *;
 @include export-module('uploader-bootstrap4-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e7e7';

package/styles/uploader/icons/_tailwind-dark.scss

@@ -1 +1 @@
-@import './tailwind.scss';
+@use './tailwind' as *;

package/styles/uploader/icons/_tailwind.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../tailwind-definition' as *;
 @include export-module('uploader-bootstrap4-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e7e7';

package/styles/uploader/icons/_tailwind3.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use '../tailwind3-definition' as *;
 @include export-module('uploader-bootstrap4-icons') {
   .e-upload .e-upload-files .e-file-remove-btn.e-icons::before {
     content: '\e7e7';