@progress/kendo-theme-default 6.1.1-dev.53 → 6.1.1-dev.66

package/dist/all.scss

@@ -5424,320 +5424,7 @@ $kendo-invalid-shadow: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-
-
-// Dependencies
-
-
-// Component
-// #region @import "./_variables.scss"; -> scss/typography/_variables.scss
-// Typography
-
-
-// Headings
-$kendo-h1-font-size: ($kendo-font-size-md * 3) !default;
-$kendo-h2-font-size: 34px !default;
-$kendo-h3-font-size: ($kendo-font-size-md * 2) !default;
-$kendo-h4-font-size: 22px !default;
-$kendo-h5-font-size: $kendo-font-size-lg !default;
-$kendo-h6-font-size: $kendo-font-size-md !default;
-
-$kendo-h1-font-family: $kendo-font-family !default;
-$kendo-h2-font-family: $kendo-font-family !default;
-$kendo-h3-font-family: $kendo-font-family !default;
-$kendo-h4-font-family: $kendo-font-family !default;
-$kendo-h5-font-family: $kendo-font-family !default;
-$kendo-h6-font-family: $kendo-font-family !default;
-
-$kendo-h1-line-height: 54px !default;
-$kendo-h2-line-height: 46px !default;
-$kendo-h3-line-height: 42px !default;
-$kendo-h4-line-height: 32px !default;
-$kendo-h5-line-height: 26px !default;
-$kendo-h6-line-height: 20px !default;
-
-$kendo-h1-font-weight: $kendo-font-weight-normal !default;
-$kendo-h2-font-weight: $kendo-font-weight-normal !default;
-$kendo-h3-font-weight: $kendo-font-weight-normal !default;
-$kendo-h4-font-weight: $kendo-font-weight-bold !default;
-$kendo-h5-font-weight: $kendo-font-weight-bold !default;
-$kendo-h6-font-weight: $kendo-font-weight-bold !default;
-
-$kendo-h1-letter-spacing: null !default;
-$kendo-h2-letter-spacing: null !default;
-$kendo-h3-letter-spacing: null !default;
-$kendo-h4-letter-spacing: null !default;
-$kendo-h5-letter-spacing: null !default;
-$kendo-h6-letter-spacing: null !default;
-
-$kendo-h1-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h2-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h3-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h4-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h5-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h6-margin: 0 0 $kendo-font-size-md !default;
-
-
-// Paragraph
-$kendo-paragraph-margin: 0 0 $kendo-font-size-md !default;
-$kendo-paragraph-font-size: $kendo-font-size-md !default;
-$kendo-paragraph-font-family: $kendo-font-family !default;
-$kendo-paragraph-line-height: 20px !default;
-$kendo-paragraph-font-weight: $kendo-font-weight-normal !default;
-$kendo-paragraph-letter-spacing: null !default;
-
-
-// Code
-$kendo-code-font-size: $kendo-font-size-md !default;
-$kendo-code-font-family: $kendo-font-family-monospace !default;
-$kendo-code-line-height: 20px !default;
-$kendo-code-font-weight: $kendo-font-weight-normal !default;
-$kendo-code-letter-spacing: null !default;
-
-$kendo-code-padding-x: 4px !default;
-$kendo-code-padding-y: 0px !default;
-$kendo-pre-padding-x: 24px !default;
-$kendo-pre-padding-y: 16px !default;
-$kendo-code-border-width: 1px !default;
-
-$kendo-code-bg: $kendo-base-bg !default;
-$kendo-code-text: $kendo-component-text !default;
-$kendo-code-border: $kendo-component-border !default;
-
-
-// Display
-$kendo-display1-font-size: ($kendo-font-size-md * 6) !default;
-$kendo-display2-font-size: ($kendo-font-size-md * 5) !default;
-$kendo-display3-font-size: ($kendo-font-size-md * 4) !default;
-$kendo-display4-font-size: ($kendo-font-size-md * 3) !default;
-
-$kendo-display1-font-family: $kendo-font-family !default;
-$kendo-display2-font-family: $kendo-font-family !default;
-$kendo-display3-font-family: $kendo-font-family !default;
-$kendo-display4-font-family: $kendo-font-family !default;
-
-$kendo-display1-line-height: 1.2 !default;
-$kendo-display2-line-height: 1.2 !default;
-$kendo-display3-line-height: 1.2 !default;
-$kendo-display4-line-height: 1.2 !default;
-
-$kendo-display1-font-weight: $kendo-font-weight-light !default;
-$kendo-display2-font-weight: $kendo-font-weight-light !default;
-$kendo-display3-font-weight: $kendo-font-weight-light !default;
-$kendo-display4-font-weight: $kendo-font-weight-light !default;
-
-$kendo-display1-letter-spacing: null !default;
-$kendo-display2-letter-spacing: null !default;
-$kendo-display3-letter-spacing: null !default;
-$kendo-display4-letter-spacing: null !default;
-
-// #endregion
-// #region @import "./_layout.scss"; -> scss/typography/_layout.scss
-@include exports( "typography/layout" ) {
-
-    @if $kendo-enable-typography {
-        body { @extend .k-body !optional; }
-        h1 { @extend .k-h1 !optional; }
-        h2 { @extend .k-h2 !optional; }
-        h3 { @extend .k-h3 !optional; }
-        h4 { @extend .k-h4 !optional; }
-        h5 { @extend .k-h5 !optional; }
-        h6 { @extend .k-h6 !optional; }
-        p { @extend .k-paragraph !optional; }
-        pre { @extend .k-pre !optional; }
-        code { @extend .k-code !optional; }
-    }
-
-    // TODO delete k-typography class for R1 2022
-    .k-body,
-    .k-typography {
-        @include typography(
-            $kendo-font-size-md,
-            $kendo-font-family,
-            $kendo-line-height-md,
-            $kendo-font-weight-normal,
-            $kendo-letter-spacing
-        );
-        margin: 0;
-
-        p {
-            margin: $kendo-paragraph-margin;
-        }
-    }
-
-    // Headings
-    .k-h1 {
-        @include typography(
-            $kendo-h1-font-size,
-            $kendo-h1-font-family,
-            $kendo-h1-line-height,
-            $kendo-h1-font-weight,
-            $kendo-h1-letter-spacing
-        );
-        margin: $kendo-h1-margin;
-    }
-    .k-h2 {
-        @include typography(
-            $kendo-h2-font-size,
-            $kendo-h2-font-family,
-            $kendo-h2-line-height,
-            $kendo-h2-font-weight,
-            $kendo-h2-letter-spacing
-        );
-        margin: $kendo-h2-margin;
-    }
-    .k-h3 {
-        @include typography(
-            $kendo-h3-font-size,
-            $kendo-h3-font-family,
-            $kendo-h3-line-height,
-            $kendo-h3-font-weight,
-            $kendo-h3-letter-spacing
-        );
-        margin: $kendo-h3-margin;
-    }
-    .k-h4 {
-        @include typography(
-            $kendo-h4-font-size,
-            $kendo-h4-font-family,
-            $kendo-h4-line-height,
-            $kendo-h4-font-weight,
-            $kendo-h4-letter-spacing
-        );
-        margin: $kendo-h4-margin;
-    }
-    .k-h5 {
-        @include typography(
-            $kendo-h5-font-size,
-            $kendo-h5-font-family,
-            $kendo-h5-line-height,
-            $kendo-h5-font-weight,
-            $kendo-h5-letter-spacing
-        );
-        margin: $kendo-h5-margin;
-    }
-    .k-h6 {
-        @include typography(
-            $kendo-h6-font-size,
-            $kendo-h6-font-family,
-            $kendo-h6-line-height,
-            $kendo-h6-font-weight,
-            $kendo-h6-letter-spacing
-        );
-        margin: $kendo-h6-margin;
-    }
-
-    // Paragraph
-    .k-paragraph {
-        @include typography(
-            $kendo-paragraph-font-size,
-            $kendo-paragraph-font-family,
-            $kendo-paragraph-line-height,
-            $kendo-paragraph-font-weight,
-            $kendo-paragraph-letter-spacing
-        );
-        margin: $kendo-paragraph-margin;
-    }
-
-    // Code snippet
-    .k-pre,
-    .k-code {
-        @include typography(
-            $kendo-code-font-size,
-            $kendo-code-font-family,
-            $kendo-code-line-height,
-            $kendo-code-font-weight,
-            $kendo-code-letter-spacing
-        );
-        border-style: solid;
-        border-width: $kendo-code-border-width;
-    }
-
-    .k-pre {
-        padding-block: $kendo-pre-padding-y;
-        padding-inline: $kendo-pre-padding-x;
-        overflow: auto;
-    }
-
-    .k-pre > .k-code {
-        padding: 0;
-        border-width: 0;
-        border-color: transparent;
-        background-color: transparent;
-        font-family: inherit;
-        font-size: inherit;
-    }
-
-    .k-code {
-        padding-block: $kendo-code-padding-y;
-        padding-inline: $kendo-code-padding-x;
-    }
-
-    // Display
-    .k-display-1 {
-        @include typography(
-            $kendo-display1-font-size,
-            $kendo-display1-font-family,
-            $kendo-display1-line-height,
-            $kendo-display1-font-weight,
-            $kendo-display1-letter-spacing
-        );
-    }
-    .k-display-2 {
-        @include typography(
-            $kendo-display2-font-size,
-            $kendo-display2-font-family,
-            $kendo-display2-line-height,
-            $kendo-display2-font-weight,
-            $kendo-display2-letter-spacing
-        );
-    }
-    .k-display-3 {
-        @include typography(
-            $kendo-display3-font-size,
-            $kendo-display3-font-family,
-            $kendo-display3-line-height,
-            $kendo-display3-font-weight,
-            $kendo-display3-letter-spacing
-        );
-    }
-    .k-display-4 {
-        @include typography(
-            $kendo-display4-font-size,
-            $kendo-display4-font-family,
-            $kendo-display4-line-height,
-            $kendo-display4-font-weight,
-            $kendo-display4-letter-spacing
-        );
-    }
-}
-
-// #endregion
-// #region @import "./_theme.scss"; -> scss/typography/_theme.scss
-@include exports("typography/theme") {
-
-    .k-body {
-        @include fill(
-            $kendo-body-text,
-            $kendo-body-bg
-        );
-    }
-
-    // Code snippet
-    .k-pre,
-    .k-code {
-        @include fill(
-            $kendo-code-text,
-            $kendo-code-bg,
-            $kendo-code-border
-        );
-    }
-}
-
-// #endregion
-
-// #endregion
-// #region @import "./utils/_index.scss"; -> scss/utils/_index.scss
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
@@ -8695,11 +8382,330 @@ $kendo-utils: (
 // #endregion
 
 
+// Dependencies
+
+
+// Component
+// #region @import "./_variables.scss"; -> scss/typography/_variables.scss
+// Typography
+
+
+// Headings
+$kendo-h1-font-size: ($kendo-font-size-md * 3) !default;
+$kendo-h2-font-size: 34px !default;
+$kendo-h3-font-size: ($kendo-font-size-md * 2) !default;
+$kendo-h4-font-size: 22px !default;
+$kendo-h5-font-size: $kendo-font-size-lg !default;
+$kendo-h6-font-size: $kendo-font-size-md !default;
+
+$kendo-h1-font-family: $kendo-font-family !default;
+$kendo-h2-font-family: $kendo-font-family !default;
+$kendo-h3-font-family: $kendo-font-family !default;
+$kendo-h4-font-family: $kendo-font-family !default;
+$kendo-h5-font-family: $kendo-font-family !default;
+$kendo-h6-font-family: $kendo-font-family !default;
+
+$kendo-h1-line-height: 54px !default;
+$kendo-h2-line-height: 46px !default;
+$kendo-h3-line-height: 42px !default;
+$kendo-h4-line-height: 32px !default;
+$kendo-h5-line-height: 26px !default;
+$kendo-h6-line-height: 20px !default;
+
+$kendo-h1-font-weight: $kendo-font-weight-normal !default;
+$kendo-h2-font-weight: $kendo-font-weight-normal !default;
+$kendo-h3-font-weight: $kendo-font-weight-normal !default;
+$kendo-h4-font-weight: $kendo-font-weight-bold !default;
+$kendo-h5-font-weight: $kendo-font-weight-bold !default;
+$kendo-h6-font-weight: $kendo-font-weight-bold !default;
+
+$kendo-h1-letter-spacing: null !default;
+$kendo-h2-letter-spacing: null !default;
+$kendo-h3-letter-spacing: null !default;
+$kendo-h4-letter-spacing: null !default;
+$kendo-h5-letter-spacing: null !default;
+$kendo-h6-letter-spacing: null !default;
+
+$kendo-h1-margin: 0 0 $kendo-font-size-md !default;
+$kendo-h2-margin: 0 0 $kendo-font-size-md !default;
+$kendo-h3-margin: 0 0 $kendo-font-size-md !default;
+$kendo-h4-margin: 0 0 $kendo-font-size-md !default;
+$kendo-h5-margin: 0 0 $kendo-font-size-md !default;
+$kendo-h6-margin: 0 0 $kendo-font-size-md !default;
+
+
+// Paragraph
+$kendo-paragraph-margin: 0 0 $kendo-font-size-md !default;
+$kendo-paragraph-font-size: $kendo-font-size-md !default;
+$kendo-paragraph-font-family: $kendo-font-family !default;
+$kendo-paragraph-line-height: 20px !default;
+$kendo-paragraph-font-weight: $kendo-font-weight-normal !default;
+$kendo-paragraph-letter-spacing: null !default;
+
+
+// Code
+$kendo-code-font-size: $kendo-font-size-md !default;
+$kendo-code-font-family: $kendo-font-family-monospace !default;
+$kendo-code-line-height: 20px !default;
+$kendo-code-font-weight: $kendo-font-weight-normal !default;
+$kendo-code-letter-spacing: null !default;
+
+$kendo-code-padding-x: 4px !default;
+$kendo-code-padding-y: 0px !default;
+$kendo-pre-padding-x: 24px !default;
+$kendo-pre-padding-y: 16px !default;
+$kendo-code-border-width: 1px !default;
+
+$kendo-code-bg: $kendo-base-bg !default;
+$kendo-code-text: $kendo-component-text !default;
+$kendo-code-border: $kendo-component-border !default;
+
+
+// Display
+$kendo-display1-font-size: ($kendo-font-size-md * 6) !default;
+$kendo-display2-font-size: ($kendo-font-size-md * 5) !default;
+$kendo-display3-font-size: ($kendo-font-size-md * 4) !default;
+$kendo-display4-font-size: ($kendo-font-size-md * 3) !default;
+
+$kendo-display1-font-family: $kendo-font-family !default;
+$kendo-display2-font-family: $kendo-font-family !default;
+$kendo-display3-font-family: $kendo-font-family !default;
+$kendo-display4-font-family: $kendo-font-family !default;
+
+$kendo-display1-line-height: 1.2 !default;
+$kendo-display2-line-height: 1.2 !default;
+$kendo-display3-line-height: 1.2 !default;
+$kendo-display4-line-height: 1.2 !default;
+
+$kendo-display1-font-weight: $kendo-font-weight-light !default;
+$kendo-display2-font-weight: $kendo-font-weight-light !default;
+$kendo-display3-font-weight: $kendo-font-weight-light !default;
+$kendo-display4-font-weight: $kendo-font-weight-light !default;
+
+$kendo-display1-letter-spacing: null !default;
+$kendo-display2-letter-spacing: null !default;
+$kendo-display3-letter-spacing: null !default;
+$kendo-display4-letter-spacing: null !default;
+
+// #endregion
+// #region @import "./_layout.scss"; -> scss/typography/_layout.scss
+@include exports( "typography/layout" ) {
+
+    @if $kendo-enable-typography {
+        body { @extend .k-body !optional; }
+        h1 { @extend .k-h1 !optional; }
+        h2 { @extend .k-h2 !optional; }
+        h3 { @extend .k-h3 !optional; }
+        h4 { @extend .k-h4 !optional; }
+        h5 { @extend .k-h5 !optional; }
+        h6 { @extend .k-h6 !optional; }
+        p { @extend .k-paragraph !optional; }
+        pre { @extend .k-pre !optional; }
+        code { @extend .k-code !optional; }
+    }
+
+    // TODO delete k-typography class for R1 2022
+    .k-body,
+    .k-typography {
+        @include typography(
+            $kendo-font-size-md,
+            $kendo-font-family,
+            $kendo-line-height-md,
+            $kendo-font-weight-normal,
+            $kendo-letter-spacing
+        );
+        margin: 0;
+
+        p {
+            margin: $kendo-paragraph-margin;
+        }
+    }
+
+    // Headings
+    .k-h1 {
+        @include typography(
+            $kendo-h1-font-size,
+            $kendo-h1-font-family,
+            $kendo-h1-line-height,
+            $kendo-h1-font-weight,
+            $kendo-h1-letter-spacing
+        );
+        margin: $kendo-h1-margin;
+    }
+    .k-h2 {
+        @include typography(
+            $kendo-h2-font-size,
+            $kendo-h2-font-family,
+            $kendo-h2-line-height,
+            $kendo-h2-font-weight,
+            $kendo-h2-letter-spacing
+        );
+        margin: $kendo-h2-margin;
+    }
+    .k-h3 {
+        @include typography(
+            $kendo-h3-font-size,
+            $kendo-h3-font-family,
+            $kendo-h3-line-height,
+            $kendo-h3-font-weight,
+            $kendo-h3-letter-spacing
+        );
+        margin: $kendo-h3-margin;
+    }
+    .k-h4 {
+        @include typography(
+            $kendo-h4-font-size,
+            $kendo-h4-font-family,
+            $kendo-h4-line-height,
+            $kendo-h4-font-weight,
+            $kendo-h4-letter-spacing
+        );
+        margin: $kendo-h4-margin;
+    }
+    .k-h5 {
+        @include typography(
+            $kendo-h5-font-size,
+            $kendo-h5-font-family,
+            $kendo-h5-line-height,
+            $kendo-h5-font-weight,
+            $kendo-h5-letter-spacing
+        );
+        margin: $kendo-h5-margin;
+    }
+    .k-h6 {
+        @include typography(
+            $kendo-h6-font-size,
+            $kendo-h6-font-family,
+            $kendo-h6-line-height,
+            $kendo-h6-font-weight,
+            $kendo-h6-letter-spacing
+        );
+        margin: $kendo-h6-margin;
+    }
+
+    // Paragraph
+    .k-paragraph {
+        @include typography(
+            $kendo-paragraph-font-size,
+            $kendo-paragraph-font-family,
+            $kendo-paragraph-line-height,
+            $kendo-paragraph-font-weight,
+            $kendo-paragraph-letter-spacing
+        );
+        margin: $kendo-paragraph-margin;
+    }
+
+    // Code snippet
+    .k-pre,
+    .k-code {
+        @include typography(
+            $kendo-code-font-size,
+            $kendo-code-font-family,
+            $kendo-code-line-height,
+            $kendo-code-font-weight,
+            $kendo-code-letter-spacing
+        );
+        border-style: solid;
+        border-width: $kendo-code-border-width;
+    }
+
+    .k-pre {
+        padding-block: $kendo-pre-padding-y;
+        padding-inline: $kendo-pre-padding-x;
+        overflow: auto;
+    }
+
+    .k-pre > .k-code {
+        padding: 0;
+        border-width: 0;
+        border-color: transparent;
+        background-color: transparent;
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    .k-code {
+        padding-block: $kendo-code-padding-y;
+        padding-inline: $kendo-code-padding-x;
+    }
+
+    // Display
+    .k-display-1 {
+        @include typography(
+            $kendo-display1-font-size,
+            $kendo-display1-font-family,
+            $kendo-display1-line-height,
+            $kendo-display1-font-weight,
+            $kendo-display1-letter-spacing
+        );
+    }
+    .k-display-2 {
+        @include typography(
+            $kendo-display2-font-size,
+            $kendo-display2-font-family,
+            $kendo-display2-line-height,
+            $kendo-display2-font-weight,
+            $kendo-display2-letter-spacing
+        );
+    }
+    .k-display-3 {
+        @include typography(
+            $kendo-display3-font-size,
+            $kendo-display3-font-family,
+            $kendo-display3-line-height,
+            $kendo-display3-font-weight,
+            $kendo-display3-letter-spacing
+        );
+    }
+    .k-display-4 {
+        @include typography(
+            $kendo-display4-font-size,
+            $kendo-display4-font-family,
+            $kendo-display4-line-height,
+            $kendo-display4-font-weight,
+            $kendo-display4-letter-spacing
+        );
+    }
+}
+
+// #endregion
+// #region @import "./_theme.scss"; -> scss/typography/_theme.scss
+@include exports("typography/theme") {
+
+    .k-body {
+        @include fill(
+            $kendo-body-text,
+            $kendo-body-bg
+        );
+    }
+
+    // Code snippet
+    .k-pre,
+    .k-code {
+        @include fill(
+            $kendo-code-text,
+            $kendo-code-bg,
+            $kendo-code-border
+        );
+    }
+}
+
+// #endregion
+
+// #endregion
+// #region @import "./utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
 // Generic content
 // #region @import "./icons/_index.scss"; -> scss/icons/_index.scss
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -10001,9 +10007,9 @@ $ki-rotate-map: (
     .k-rtl .k-i-indent-increase,
     .k-rtl .k-i-indent-decrease,
     .k-rtl .k-i-caret-alt-right,
-    .k-rtl .k-i-caret-alt-down,
+    .k-rtl .k-i-caret-alt-left,
     [dir="rtl"] .k-i-caret-alt-right,
-    [dir="rtl"] .k-i-caret-alt-down {
+    [dir="rtl"] .k-i-caret-alt-left {
         transform: scaleX(-1);
     }
 
@@ -10033,6 +10039,9 @@ $ki-rotate-map: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -10112,6 +10121,9 @@ $kendo-message-box-link-text-decoration: underline !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -10297,6 +10309,9 @@ $kendo-drop-hint-bg: $kendo-color-primary !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -10307,6 +10322,9 @@ $kendo-drop-hint-bg: $kendo-color-primary !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -11443,6 +11461,9 @@ $kendo-checkbox-ripple-opacity: .25 !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -11635,7 +11656,8 @@ $kendo-listgroup-item-border-width: 1px !default;
                     right: auto;
                     left: 0;
 
-                    .k-icon {
+                    .k-icon,
+                    .k-svg-icon {
                         transform: scaleX(-1);
                     }
                 }
@@ -11654,7 +11676,8 @@ $kendo-listgroup-item-border-width: 1px !default;
                 border-right-width: 1px;
                 border-left-width: 0;
 
-                .k-icon {
+                .k-icon,
+                .k-svg-icon {
                     transform: scaleX(-1);
                 }
             }
@@ -11700,6 +11723,9 @@ $kendo-listgroup-item-border-width: 1px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -11754,6 +11780,9 @@ $kendo-overlay-opacity: .5 !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -11871,6 +11900,9 @@ $kendo-popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -11948,6 +11980,9 @@ $kendo-popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -12494,6 +12529,9 @@ $kendo-table-selected-border: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -12557,6 +12595,9 @@ $kendo-table-selected-border: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -12708,6 +12749,9 @@ $kendo-avatar-theme-colors: $kendo-theme-colors !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -12972,6 +13016,9 @@ $kendo-badge-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -13729,6 +13776,9 @@ $kendo-chip-list-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -13864,6 +13914,9 @@ $kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -13874,6 +13927,7 @@ $kendo-color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0
 // File already imported_once. Skipping output.
 // #endregion
 
+
 // Component
 // #region @import "./_variables.scss"; -> scss/loader/_variables.scss
 // Loader
@@ -14569,6 +14623,9 @@ $kendo-loading-opacity: .3 !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -14722,6 +14779,9 @@ $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies // TODO: extract variables
@@ -14732,6 +14792,9 @@ $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -14742,6 +14805,9 @@ $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -15404,6 +15470,9 @@ $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -16572,6 +16641,9 @@ $kendo-toolbar-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -17745,6 +17817,9 @@ $kendo-form-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -17755,6 +17830,9 @@ $kendo-form-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -17827,7 +17905,8 @@ $kendo-form-sizes: (
         margin-inline-start: $kendo-icon-spacing;
         flex-shrink: 0;
 
-        .k-icon {
+        .k-icon,
+        .k-svg-icon {
             color: inherit;
             vertical-align: top;
         }
@@ -18013,6 +18092,9 @@ $kendo-form-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -18023,6 +18105,9 @@ $kendo-form-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -18258,7 +18343,9 @@ $kendo-form-sizes: (
     .k-input-validation-icon,
     .k-input-loading-icon,
     .k-input-prefix > .k-icon,
-    .k-input-suffix > .k-icon {
+    .k-input-prefix > .k-svg-icon,
+    .k-input-suffix > .k-icon,
+    .k-input-suffix > .k-svg-icon {
         flex: none;
         align-self: center;
         display: inline-flex;
@@ -18380,10 +18467,12 @@ $kendo-form-sizes: (
                 min-height: auto !important; // sass-lint:disable-line no-important
             }
         }
-        .k-spinner-increase .k-icon {
+        .k-spinner-increase .k-icon,
+        .k-spinner-increase .k-svg-icon {
             bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
-        .k-spinner-decrease .k-icon {
+        .k-spinner-decrease .k-icon,
+        .k-spinner-decrease .k-svg-icon {
             top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
     }
@@ -18470,7 +18559,9 @@ $kendo-form-sizes: (
             .k-input-loading-icon,
             .k-clear-value,
             .k-input-prefix > .k-icon,
-            .k-input-suffix > .k-icon {
+            .k-input-prefix > .k-svg-icon,
+            .k-input-suffix > .k-icon,
+            .k-input-suffix > .k-svg-icon {
                 width: $_icon-size;
                 height: $_icon-size;
             }
@@ -19172,6 +19263,9 @@ $kendo-floating-label-focus-text: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -19272,6 +19366,9 @@ $kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -19337,6 +19434,9 @@ $kendo-menu-button-arrow-padding-x: $kendo-button-padding-y !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -19379,6 +19479,9 @@ $kendo-menu-button-arrow-padding-x: $kendo-button-padding-y !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -19425,6 +19528,9 @@ $kendo-menu-button-arrow-padding-x: $kendo-button-padding-y !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -19621,6 +19727,9 @@ $kendo-listbox-drop-hint-width: 1px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -20016,6 +20125,9 @@ $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -20525,6 +20637,9 @@ $kendo-radio-ripple-opacity: .25 !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -20944,7 +21059,9 @@ $kendo-slider-disabled-opacity: null !default;
             }
 
             .k-button-increase .k-icon,
-            .k-button-decrease .k-icon {
+            .k-button-increase .k-svg-icon,
+            .k-button-decrease .k-icon,
+            .k-button-decrease .k-svg-icon {
                 transform: scaleX(-1);
             }
         }
@@ -21138,6 +21255,9 @@ $kendo-slider-disabled-opacity: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -22064,6 +22184,9 @@ $kendo-calendar-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -22497,6 +22620,9 @@ $kendo-time-selector-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -22549,6 +22675,9 @@ $kendo-time-selector-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -22682,6 +22811,9 @@ $kendo-captcha-validation-message-font-style: italic !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -22794,6 +22926,9 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -22818,6 +22953,9 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -22865,6 +23003,7 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
 
 // #endregion
 
+
 // Component
 // #region @import "./images/alpha-slider-bgr.scss"; -> scss/colorgradient/images/alpha-slider-bgr.scss
 // File already imported_once. Skipping output.
@@ -23091,12 +23230,14 @@ $kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer,
             align-items: center;
             gap: k-math-div( $kendo-color-gradient-contrast-spacer, 2 );
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 vertical-align: middle;
             }
 
             // Needed for the double check icons
             .k-icon + .k-icon,
+            .k-svg-icon + .k-svg-icon,
             .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
                 margin-inline-start: -13px;
             }
@@ -23203,6 +23344,9 @@ $kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer,
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23376,6 +23520,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23432,6 +23579,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23484,6 +23634,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23521,6 +23674,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23564,6 +23720,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23613,6 +23772,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23720,6 +23882,9 @@ $kendo-datetime-width: calc( #{$kendo-calendar-cell-size * 8} + #{$kendo-infinit
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23766,6 +23931,9 @@ $kendo-datetime-width: calc( #{$kendo-calendar-cell-size * 8} + #{$kendo-infinit
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23850,6 +24018,9 @@ $kendo-daterange-picker-input-width: 10em !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23910,6 +24081,9 @@ $kendo-daterange-picker-input-width: 10em !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -23994,6 +24168,9 @@ $kendo-daterange-picker-input-width: 10em !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -24010,6 +24187,9 @@ $kendo-daterange-picker-input-width: 10em !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -24068,6 +24248,9 @@ $kendo-daterange-picker-input-width: 10em !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -24337,6 +24520,7 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
         position: relative;
 
         .k-icon,
+        .k-svg-icon,
         .k-image,
         .k-sprite {
             margin-right: $kendo-icon-spacing;
@@ -24387,6 +24571,7 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
         .k-treeview-leaf,
         .k-in {
             .k-icon,
+            .k-svg-icon,
             .k-image,
             .k-sprite {
                 margin-right: 0;
@@ -24546,6 +24731,9 @@ $kendo-dropdowntree-popup-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -24598,6 +24786,9 @@ $kendo-dropdowntree-popup-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -24690,6 +24881,10 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( $kendo-color-black, .1
             .k-icon {
                 font-size: $kendo-rating-icon-size;
             }
+            .k-svg-icon {
+                width: $kendo-rating-icon-size;
+                height: $kendo-rating-icon-size;
+            }
 
             .k-rating-precision-part,
             .k-rating-precision-complement {
@@ -24746,10 +24941,16 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( $kendo-color-black, .1
                 > .k-icon {
                     text-shadow: $kendo-rating-icon-focus-shadow;
                 }
+                > .k-svg-icon {
+                    filter: drop-shadow( $kendo-rating-icon-focus-shadow );
+                }
 
                 &.k-selected > .k-icon {
                     text-shadow: $kendo-rating-icon-focus-selected-shadow;
                 }
+                &.k-selected > .k-svg-icon {
+                    filter: drop-shadow( $kendo-rating-icon-focus-selected-shadow );
+                }
             }
         }
     }
@@ -24781,6 +24982,9 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( $kendo-color-black, .1
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -24824,6 +25028,9 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( $kendo-color-black, .1
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -25360,6 +25567,9 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -25379,6 +25589,9 @@ $kendo-switch-on-thumb-hover-gradient: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -25451,6 +25664,11 @@ $kendo-dropzone-note-text: $kendo-subtle-text !default;
             font-size: $kendo-dropzone-icon-size;
         }
 
+        .k-svg-icon {
+            width: $kendo-dropzone-icon-size;
+            height: $kendo-dropzone-icon-size;
+        }
+
         .k-dropzone-hint {
             margin-bottom: $kendo-dropzone-hint-spacing;
             font-size: $kendo-dropzone-hint-font-size;
@@ -25612,7 +25830,8 @@ $kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
                 align-items: center;
                 position: relative;
 
-                > .k-icon {
+                > .k-icon,
+                > .k-svg-icon {
                     margin-inline-end: $kendo-upload-icon-spacing;
                 }
             }
@@ -25928,6 +26147,9 @@ $kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -26113,6 +26335,9 @@ $kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -26574,6 +26799,9 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -27151,6 +27379,9 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -27161,6 +27392,9 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -27527,6 +27761,9 @@ $kendo-dialog-theme-colors: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -27903,6 +28140,9 @@ $kendo-drawer-selected-hover-text: $kendo-selected-hover-text !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -28087,6 +28327,9 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -28097,6 +28340,9 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -28860,6 +29106,9 @@ $kendo-popover-callout-border: $kendo-popover-border !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -28951,6 +29200,9 @@ $kendo-popover-callout-border: $kendo-popover-border !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -29170,6 +29422,9 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -29337,12 +29592,13 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
     }
 
     .k-breadcrumb-root-link {
-        margin-right: $kendo-breadcrumb-root-link-spacing;
+        margin-inline-end: $kendo-breadcrumb-root-link-spacing;
     }
 
     .k-breadcrumb-link > .k-image,
-    .k-breadcrumb-icontext-link .k-icon {
-        margin-right: $kendo-breadcrumb-link-icon-spacing;
+    .k-breadcrumb-icontext-link .k-icon,
+    .k-breadcrumb-icontext-link .k-svg-icon {
+        margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
     }
 
     .k-breadcrumb-icon-link {
@@ -29369,26 +29625,6 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         }
     }
 
-    @include exports("breadcrumb/layout/rtl") {
-
-        .k-breadcrumb {
-            &[dir="rtl"],
-            .k-rtl & {
-                .k-breadcrumb-root-link {
-                    margin-right: 0;
-                    margin-left: $kendo-breadcrumb-root-link-spacing;
-                }
-
-                .k-breadcrumb-link > .k-image,
-                .k-breadcrumb-icontext-link .k-icon {
-                    margin-right: 0;
-                    margin-left: $kendo-breadcrumb-link-icon-spacing;
-                }
-            }
-        }
-
-    }
-
 }
 
 // #endregion
@@ -29498,6 +29734,9 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -29936,6 +30175,9 @@ $kendo-pager-sizes: (
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -30078,6 +30320,7 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
             padding: 0;
             list-style: none;
             display: flex;
+            position: relative;
             z-index: 1;
         }
 
@@ -30163,7 +30406,10 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
             text-overflow: ellipsis;
             overflow: hidden;
         }
-        .k-step-label .k-icon { margin-left: $kendo-icon-spacing; }
+        .k-step-label .k-icon,
+        .k-step-label .k-svg-icon  {
+            margin-left: $kendo-icon-spacing;
+        }
 
         .k-step-current .k-step-label {
             font-weight: bold;
@@ -30293,7 +30539,8 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
     .k-stepper[dir="rtl"] {
         direction: rtl;
 
-        .k-step-label .k-icon {
+        .k-step-label .k-icon,
+        .k-step-label .k-svg-icon {
             margin-left: 0;
             margin-right: $kendo-icon-spacing;
         }
@@ -30478,7 +30725,8 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
         .k-step-label {
             @include fill( $color: $kendo-stepper-label-text );
         }
-        .k-step-success .k-step-label .k-icon {
+        .k-step-success .k-step-label .k-icon,
+        .k-step-success .k-step-label .k-svg-icon {
             @include fill( $color: $kendo-stepper-label-success-text );
         }
         .k-step-error .k-step-label {
@@ -30529,6 +30777,9 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -31041,8 +31292,8 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
             > .k-tabstrip-content { order: 0; }
         }
 
-        .k-tabstrip-prev,
-        .k-tabstrip-next {
+        .k-tabstrip-prev .k-button-icon,
+        .k-tabstrip-next .k-button-icon {
             transform: scaleX(-1);
         }
 
@@ -31164,6 +31415,9 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -31350,6 +31604,9 @@ $kendo-wizard-step-focus-border: #656565 !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -31532,6 +31789,9 @@ $kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -31835,6 +32095,7 @@ $kendo-panelbar-header-expanded-gradient: null !default;
                 );
 
                 .k-icon,
+                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: $kendo-panelbar-text;
                 }
@@ -31884,6 +32145,7 @@ $kendo-panelbar-header-expanded-gradient: null !default;
                 );
 
                 .k-icon,
+                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: inherit;
                 }
@@ -32030,6 +32292,9 @@ $kendo-panelbar-header-expanded-gradient: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -32133,6 +32398,10 @@ $kendo-splitbar-selected-text: $kendo-selected-text !default;
         .k-icon {
             font-size: $kendo-splitter-resize-icon-size;
         }
+        .k-svg-icon {
+            width: $kendo-splitter-resize-icon-size;
+            height: $kendo-splitter-resize-icon-size;
+        }
 
     }
 
@@ -32312,6 +32581,9 @@ $kendo-splitbar-selected-text: $kendo-selected-text !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -32420,6 +32692,9 @@ $kendo-tile-layout-hint-border: $kendo-component-border !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -32430,6 +32705,9 @@ $kendo-tile-layout-hint-border: $kendo-component-border !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies (TODO: extract variables)
@@ -33609,7 +33887,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
                 }
             }
 
-            .k-cell-inner > .k-link > .k-sort-icon .k-icon {
+            .k-cell-inner > .k-link > .k-sort-icon .k-icon,
+            .k-cell-inner > .k-link > .k-sort-icon .k-svg-icon {
                 display: flex;
             }
 
@@ -33699,7 +33978,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             text-overflow: clip;
         }
 
-        .k-grouping-row .k-icon {
+        .k-grouping-row .k-icon,
+        .k-grouping-row .k-svg-icon {
             margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
             margin-inline-end: k-math-div( $kendo-icon-size, 2 );
             text-decoration: none;
@@ -34376,7 +34656,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
                 }
             }
 
-            .k-grouping-row .k-icon {
+            .k-grouping-row .k-icon,
+            .k-grouping-row .k-svg-icon {
                 margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} );
             }
 
@@ -34388,7 +34669,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             .k-drag-cell {
                 padding: 0;
 
-                > .k-icon {
+                > .k-icon,
+                > .k-svg-icon {
                     padding-block: $_cell-padding-y;
                     padding-inline: 0;
                 }
@@ -34669,7 +34951,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         outline: 0;
         cursor: pointer;
 
-        > .k-icon {
+        > .k-icon,
+        > .k-svg-icon {
             margin-inline-end: $kendo-icon-spacing;
         }
     }
@@ -34821,14 +35104,16 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
+        .k-hierarchy-cell .k-icon,
+        .k-hierarchy-cell .k-svg-icon {
             color: $kendo-grid-header-text;
         }
 
         .k-grouping-row {
             background-color: $kendo-grid-grouping-row-bg;
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 color: $kendo-grid-header-text;
             }
 
@@ -34900,7 +35185,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
+        .k-hierarchy-cell .k-icon,
+        .k-hierarchy-cell .k-svg-icon {
             &:hover {
                 color: $kendo-button-hover-text;
                 background-color: $kendo-button-hover-bg;
@@ -35190,6 +35476,9 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -35424,6 +35713,9 @@ $kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -36121,7 +36413,8 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
             .k-link {
                 padding-left: $kendo-filter-menu-padding-left;
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 margin-left: calc(-1 * ( #{$kendo-icon-size} + #{$kendo-padding-md-y} ) );
                 margin-right: $kendo-padding-md-y;
             }
@@ -36161,7 +36454,8 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
             align-items: center;
             cursor: pointer;
 
-            > .k-icon {
+            > .k-icon,
+            > .k-svg-icon {
                 margin-right: $kendo-padding-md-y;
             }
         }
@@ -36305,6 +36599,10 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
             .k-icon {
                 font-size: 6em;
             }
+            .k-svg-icon {
+                width: 6em;
+                height: 6em;
+            }
         }
     }
 
@@ -36725,6 +37023,9 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -37022,7 +37323,8 @@ $kendo-pivotgrid-remove-text: null !default;
         }
     }
 
-    .k-pivotgrid-cell .k-icon {
+    .k-pivotgrid-cell .k-icon,
+    .k-pivotgrid-cell .k-svg-icon {
         cursor: pointer;
         padding-inline-end: $kendo-pivotgrid-icon-spacing;
     }
@@ -37079,7 +37381,8 @@ $kendo-pivotgrid-remove-text: null !default;
             span {
                 writing-mode: vertical-rl;
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 vertical-align: baseline;
             }
         }
@@ -37236,7 +37539,8 @@ $kendo-pivotgrid-remove-text: null !default;
         flex-direction: row;
         align-items: center;
 
-        .k-icon {
+        .k-icon,
+        .k-svg-icon {
             margin-right: k-map-get( $kendo-spacing, 2 );
         }
         .k-dropdown-list {
@@ -37402,6 +37706,7 @@ $kendo-pivotgrid-remove-text: null !default;
     }
 
     .k-pivot-layout > tbody,
+    .k-pivot .k-table-td,
     .k-pivot td {
         vertical-align: top;
     }
@@ -37799,6 +38104,9 @@ $kendo-pivotgrid-remove-text: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -37947,6 +38255,9 @@ $kendo-treelist-footer-row-border-width: 1px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -38157,6 +38468,9 @@ $kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -38508,9 +38822,7 @@ $kendo-file-manager-preview-icon-border: null !default;
         display: flex;
         flex-direction: row;
         align-items: center;
-    }
-    .k-filemanager-drag-hint .k-icon {
-        margin-right: $kendo-icon-spacing;
+        gap: $kendo-icon-spacing;
     }
 
 }
@@ -38634,6 +38946,9 @@ $kendo-file-manager-preview-icon-border: null !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -39113,6 +39428,9 @@ $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -39314,11 +39632,13 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
         flex-shrink: 0;
 
         .k-editor-export {
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 margin-right: $kendo-editor-export-tool-icon-margin-x;
             }
 
             .k-icon,
+            .k-svg-icon,
             .k-export-tool-text {
                 vertical-align: middle;
             }
@@ -39559,7 +39879,8 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
                 flex: 1;
                 width: 100px; // fix width for Edge
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 margin: 0;
                 position: static;
             }
@@ -39657,7 +39978,8 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
             left: $kendo-input-padding-x;
             top: $kendo-input-padding-y;
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 position: static;
                 margin-top: 0;
             }
@@ -39942,6 +40264,9 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -40232,6 +40557,9 @@ $kendo-image-editor-crop-overlay-bg: rgba(black, .3) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -41545,6 +41873,9 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -42115,7 +42446,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
                 }
             }
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 line-height: normal;
                 font-size: inherit;
             }
@@ -42220,7 +42552,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         position: absolute;
         justify-content: center;
 
-        > .k-icon {
+        > .k-icon,
+        > .k-svg-icon {
             position: absolute;
             top: 50%;
             left: 50%;
@@ -43048,6 +43381,9 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -43798,6 +44134,9 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -43974,6 +44313,9 @@ $kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgb
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -44582,6 +44924,9 @@ $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-o
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -44781,6 +45126,10 @@ $kendo-pdf-viewer-icon-size: calc( #{$kendo-icon-size} * 3 ) !default;
             > .k-icon {
                 font-size: $kendo-pdf-viewer-icon-size;
             }
+            > .k-svg-icon {
+                width: $kendo-pdf-viewer-icon-size;
+                height: $kendo-pdf-viewer-icon-size;
+            }
         }
 
     }
@@ -44880,7 +45229,8 @@ $kendo-pdf-viewer-icon-size: calc( #{$kendo-icon-size} * 3 ) !default;
             @include box-shadow( $kendo-pdf-viewer-page-shadow );
         }
 
-        .k-blank-page > .k-icon {
+        .k-blank-page > .k-icon,
+        .k-blank-page > .k-svg-icon {
             @include fill( $color: $kendo-pdf-viewer-icon-text );
         }
 
@@ -44918,6 +45268,9 @@ $kendo-pdf-viewer-icon-size: calc( #{$kendo-icon-size} * 3 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -45035,6 +45388,9 @@ $kendo-pdf-viewer-icon-size: calc( #{$kendo-icon-size} * 3 ) !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -45252,7 +45608,8 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
         user-select: none;
         cursor: pointer;
 
-        .k-icon {
+        .k-icon,
+        .k-svg-icon {
             display: table-cell;
             overflow: visible;
             margin: 0;
@@ -45261,6 +45618,11 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
             font-size: $kendo-scrollview-arrow-icon-size;
             font-weight: normal;
         }
+        .k-svg-icon {
+            font-size: inherit;
+            width: $kendo-scrollview-arrow-icon-size;
+            height: $kendo-scrollview-arrow-icon-size;
+        }
     }
 
     .k-scrollview-prev {
@@ -45404,6 +45766,9 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -46211,6 +46576,9 @@ $kendo-treemap-line-height: $kendo-line-height-md !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -46358,7 +46726,8 @@ $kendo-map-marker-fill: $kendo-color-primary !default;
             box-shadow: none;
             position: absolute;
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 min-width: 0;
                 min-height: 0;
             }
@@ -46441,6 +46810,9 @@ $kendo-map-marker-fill: $kendo-color-primary !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Dependencies
@@ -46473,6 +46845,7 @@ $kendo-map-marker-fill: $kendo-color-primary !default;
 // File already imported_once. Skipping output.
 // #endregion
 
+
 // Component
 // #region @import "./_variables.scss"; -> scss/orgchart/_variables.scss
 // Orgchart
@@ -46705,6 +47078,10 @@ $kendo-orgchart-line-v-height: 25px !default;
 // #region @import "../core/_index.scss"; -> scss/core/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../utils/_index.scss"; -> scss/utils/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
 
 // Dependencies
 // #region @import "../button/_index.scss"; -> scss/button/_index.scss
@@ -46714,6 +47091,7 @@ $kendo-orgchart-line-v-height: 25px !default;
 // File already imported_once. Skipping output.
 // #endregion
 
+
 // Component
 // #region @import "./_variables.scss"; -> scss/signature/_variables.scss
 $kendo-signature-width: 250px !default;