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

package/dist/all.scss

@@ -7312,326 +7312,7 @@ $kendo-invalid-shadow: 0 0 0 .25rem rgba( $kendo-invalid-border, .25 ) !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: $h1-font-size !default;
-$kendo-h2-font-size: $h2-font-size !default;
-$kendo-h3-font-size: $h3-font-size !default;
-$kendo-h4-font-size: $h4-font-size !default;
-$kendo-h5-font-size: $h5-font-size !default;
-$kendo-h6-font-size: $h6-font-size !default;
-
-$kendo-h1-font-family: $headings-font-family !default;
-$kendo-h2-font-family: $headings-font-family !default;
-$kendo-h3-font-family: $headings-font-family !default;
-$kendo-h4-font-family: $headings-font-family !default;
-$kendo-h5-font-family: $headings-font-family !default;
-$kendo-h6-font-family: $headings-font-family !default;
-
-$kendo-h1-line-height: $headings-line-height !default;
-$kendo-h2-line-height: $headings-line-height !default;
-$kendo-h3-line-height: $headings-line-height !default;
-$kendo-h4-line-height: $headings-line-height !default;
-$kendo-h5-line-height: $headings-line-height !default;
-$kendo-h6-line-height: $headings-line-height !default;
-
-$kendo-h1-font-weight: $headings-font-weight !default;
-$kendo-h2-font-weight: $headings-font-weight !default;
-$kendo-h3-font-weight: $headings-font-weight !default;
-$kendo-h4-font-weight: $headings-font-weight !default;
-$kendo-h5-font-weight: $headings-font-weight !default;
-$kendo-h6-font-weight: $headings-font-weight !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 $headings-margin-bottom !default;
-$kendo-h2-margin: 0 0 $headings-margin-bottom !default;
-$kendo-h3-margin: 0 0 $headings-margin-bottom !default;
-$kendo-h4-margin: 0 0 $headings-margin-bottom !default;
-$kendo-h5-margin: 0 0 $headings-margin-bottom !default;
-$kendo-h6-margin: 0 0 $headings-margin-bottom !default;
-
-
-// Paragraph
-$kendo-paragraph-margin: 0 0 $paragraph-margin-bottom !default;
-$kendo-paragraph-font-size: $kendo-font-size-md !default;
-$kendo-paragraph-font-family: $kendo-font-family !default;
-$kendo-paragraph-line-height: $kendo-line-height-md !default;
-$kendo-paragraph-font-weight: $kendo-font-weight-normal !default;
-$kendo-paragraph-letter-spacing: null !default;
-
-
-// Code
-$kendo-code-font-size: $kendo-font-size-sm !default;
-$kendo-code-font-family: $kendo-font-family-monospace !default;
-$kendo-code-line-height: $kendo-line-height-md !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: k-map-get( $display-font-sizes, 1) !default;
-$kendo-display2-font-size: k-map-get( $display-font-sizes, 2) !default;
-$kendo-display3-font-size: k-map-get( $display-font-sizes, 3) !default;
-$kendo-display4-font-size: k-map-get( $display-font-sizes, 4) !default;
-
-$kendo-display1-font-family: null !default;
-$kendo-display2-font-family: null !default;
-$kendo-display3-font-family: null !default;
-$kendo-display4-font-family: null !default;
-
-$kendo-display1-line-height: $display-line-height !default;
-$kendo-display2-line-height: $display-line-height !default;
-$kendo-display3-line-height: $display-line-height !default;
-$kendo-display4-line-height: $display-line-height !default;
-
-$kendo-display1-font-weight: $display-font-weight !default;
-$kendo-display2-font-weight: $display-font-weight !default;
-$kendo-display3-font-weight: $display-font-weight !default;
-$kendo-display4-font-weight: $display-font-weight !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
-// #region @import "@progress/kendo-theme-default/scss/typography/_layout.scss"; -> node_modules/@progress/kendo-theme-default/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
-
-// #endregion
-// #region @import "./_theme.scss"; -> scss/typography/_theme.scss
-// #region @import "@progress/kendo-theme-default/scss/typography/_theme.scss"; -> node_modules/@progress/kendo-theme-default/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
-
-// #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
@@ -10589,11 +10270,336 @@ $kendo-utils: (
 // #endregion
 
 
+// Dependencies
+
+
+// Component
+// #region @import "./_variables.scss"; -> scss/typography/_variables.scss
+// Typography
+
+
+// Headings
+$kendo-h1-font-size: $h1-font-size !default;
+$kendo-h2-font-size: $h2-font-size !default;
+$kendo-h3-font-size: $h3-font-size !default;
+$kendo-h4-font-size: $h4-font-size !default;
+$kendo-h5-font-size: $h5-font-size !default;
+$kendo-h6-font-size: $h6-font-size !default;
+
+$kendo-h1-font-family: $headings-font-family !default;
+$kendo-h2-font-family: $headings-font-family !default;
+$kendo-h3-font-family: $headings-font-family !default;
+$kendo-h4-font-family: $headings-font-family !default;
+$kendo-h5-font-family: $headings-font-family !default;
+$kendo-h6-font-family: $headings-font-family !default;
+
+$kendo-h1-line-height: $headings-line-height !default;
+$kendo-h2-line-height: $headings-line-height !default;
+$kendo-h3-line-height: $headings-line-height !default;
+$kendo-h4-line-height: $headings-line-height !default;
+$kendo-h5-line-height: $headings-line-height !default;
+$kendo-h6-line-height: $headings-line-height !default;
+
+$kendo-h1-font-weight: $headings-font-weight !default;
+$kendo-h2-font-weight: $headings-font-weight !default;
+$kendo-h3-font-weight: $headings-font-weight !default;
+$kendo-h4-font-weight: $headings-font-weight !default;
+$kendo-h5-font-weight: $headings-font-weight !default;
+$kendo-h6-font-weight: $headings-font-weight !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 $headings-margin-bottom !default;
+$kendo-h2-margin: 0 0 $headings-margin-bottom !default;
+$kendo-h3-margin: 0 0 $headings-margin-bottom !default;
+$kendo-h4-margin: 0 0 $headings-margin-bottom !default;
+$kendo-h5-margin: 0 0 $headings-margin-bottom !default;
+$kendo-h6-margin: 0 0 $headings-margin-bottom !default;
+
+
+// Paragraph
+$kendo-paragraph-margin: 0 0 $paragraph-margin-bottom !default;
+$kendo-paragraph-font-size: $kendo-font-size-md !default;
+$kendo-paragraph-font-family: $kendo-font-family !default;
+$kendo-paragraph-line-height: $kendo-line-height-md !default;
+$kendo-paragraph-font-weight: $kendo-font-weight-normal !default;
+$kendo-paragraph-letter-spacing: null !default;
+
+
+// Code
+$kendo-code-font-size: $kendo-font-size-sm !default;
+$kendo-code-font-family: $kendo-font-family-monospace !default;
+$kendo-code-line-height: $kendo-line-height-md !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: k-map-get( $display-font-sizes, 1) !default;
+$kendo-display2-font-size: k-map-get( $display-font-sizes, 2) !default;
+$kendo-display3-font-size: k-map-get( $display-font-sizes, 3) !default;
+$kendo-display4-font-size: k-map-get( $display-font-sizes, 4) !default;
+
+$kendo-display1-font-family: null !default;
+$kendo-display2-font-family: null !default;
+$kendo-display3-font-family: null !default;
+$kendo-display4-font-family: null !default;
+
+$kendo-display1-line-height: $display-line-height !default;
+$kendo-display2-line-height: $display-line-height !default;
+$kendo-display3-line-height: $display-line-height !default;
+$kendo-display4-line-height: $display-line-height !default;
+
+$kendo-display1-font-weight: $display-font-weight !default;
+$kendo-display2-font-weight: $display-font-weight !default;
+$kendo-display3-font-weight: $display-font-weight !default;
+$kendo-display4-font-weight: $display-font-weight !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
+// #region @import "@progress/kendo-theme-default/scss/typography/_layout.scss"; -> node_modules/@progress/kendo-theme-default/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
+
+// #endregion
+// #region @import "./_theme.scss"; -> scss/typography/_theme.scss
+// #region @import "@progress/kendo-theme-default/scss/typography/_theme.scss"; -> node_modules/@progress/kendo-theme-default/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
+
+// #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
@@ -11896,9 +11902,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);
     }
 
@@ -11930,6 +11936,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
@@ -12015,6 +12024,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
@@ -12206,6 +12218,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
@@ -12216,6 +12231,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
@@ -13349,6 +13367,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
@@ -13542,7 +13563,8 @@ $kendo-listgroup-item-border-width: $kendo-listgroup-border-width !default;
                     right: auto;
                     left: 0;
 
-                    .k-icon {
+                    .k-icon,
+                    .k-svg-icon {
                         transform: scaleX(-1);
                     }
                 }
@@ -13561,7 +13583,8 @@ $kendo-listgroup-item-border-width: $kendo-listgroup-border-width !default;
                 border-right-width: 1px;
                 border-left-width: 0;
 
-                .k-icon {
+                .k-icon,
+                .k-svg-icon {
                     transform: scaleX(-1);
                 }
             }
@@ -13612,6 +13635,9 @@ $kendo-listgroup-item-border-width: $kendo-listgroup-border-width !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
@@ -13672,6 +13698,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
@@ -13805,6 +13834,9 @@ $kendo-popup-shadow: 0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .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
@@ -13888,6 +13920,9 @@ $kendo-popup-shadow: 0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .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
@@ -14440,6 +14475,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
@@ -14509,6 +14547,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
@@ -14666,6 +14707,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
@@ -14936,6 +14980,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
@@ -15677,6 +15724,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
@@ -15818,6 +15868,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
@@ -16552,6 +16605,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
@@ -16711,6 +16767,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
@@ -16721,6 +16780,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
@@ -16731,6 +16793,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
@@ -17399,6 +17464,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
@@ -18611,6 +18679,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
@@ -19625,6 +19696,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
@@ -19635,6 +19709,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
@@ -19708,7 +19785,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;
         }
@@ -19905,6 +19983,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
@@ -19915,6 +19996,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
@@ -20151,7 +20235,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;
@@ -20273,10 +20359,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 );
         }
     }
@@ -20363,7 +20451,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;
             }
@@ -21085,6 +21175,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
@@ -21179,6 +21272,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
@@ -21250,6 +21346,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
@@ -21298,6 +21397,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
@@ -21350,6 +21452,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
@@ -21552,6 +21657,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
@@ -21953,6 +22061,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
@@ -22438,6 +22549,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
@@ -22864,7 +22978,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);
             }
         }
@@ -23063,6 +23179,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
@@ -23995,6 +24114,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
@@ -24007,9 +24129,6 @@ $kendo-calendar-sizes: (
 // #region @import "../button/_index.scss"; -> scss/button/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 
 
 // Component
@@ -24437,6 +24556,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
@@ -24495,6 +24617,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
@@ -24634,6 +24759,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
@@ -24642,6 +24770,7 @@ $kendo-captcha-validation-message-font-style: italic !default;
 // #endregion
 // @import "../utils/_flex.scss";
 
+
 // Component
 // #region @import "./_variables.scss"; -> scss/colorpalette/_variables.scss
 // Colorpalette
@@ -24751,6 +24880,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
@@ -24775,6 +24907,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
@@ -25056,12 +25191,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;
             }
@@ -25173,6 +25310,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
@@ -25192,6 +25332,7 @@ $kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer,
 // File already imported_once. Skipping output.
 // #endregion
 
+
 // Component
 // #region @import "./_variables.scss"; -> scss/coloreditor/_variables.scss
 // Coloreditor/FlatColorPicker
@@ -25351,6 +25492,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !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
@@ -25413,6 +25557,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !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
@@ -25471,6 +25618,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !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
@@ -25514,6 +25664,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !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
@@ -25563,6 +25716,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !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
@@ -25618,6 +25774,9 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !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
@@ -25731,6 +25890,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
@@ -25821,6 +25983,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
@@ -25887,6 +26052,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
@@ -25977,6 +26145,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
@@ -25993,6 +26164,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
@@ -26057,6 +26231,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
@@ -26328,6 +26505,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;
@@ -26378,6 +26556,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;
@@ -26561,6 +26740,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
@@ -26619,6 +26801,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
@@ -26711,6 +26896,10 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !default;
             .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 {
@@ -26770,10 +26959,16 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !default;
                 > .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 );
+                }
             }
         }
     }
@@ -26807,6 +27002,9 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !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
@@ -26856,6 +27054,9 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !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
@@ -27408,6 +27609,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
@@ -27427,6 +27631,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
@@ -27500,6 +27707,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;
@@ -27667,7 +27879,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;
                 }
             }
@@ -27988,6 +28201,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
@@ -28179,6 +28395,9 @@ $kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba( black, .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
@@ -28637,6 +28856,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
@@ -29219,6 +29441,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
@@ -29229,6 +29454,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
@@ -29612,6 +29840,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
@@ -29994,6 +30225,9 @@ $kendo-drawer-selected-hover-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
@@ -30184,19 +30418,22 @@ $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
 // #region @import "../common/_index.scss"; -> scss/common/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 // #region @import "../card/_index.scss"; -> scss/card/_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
@@ -30784,6 +31021,9 @@ $kendo-card-callout-height: 1.3em !default;
 // #endregion
 
 // #endregion
+// #region @import "../popup/_index.scss"; -> scss/popup/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 
 
 // Component
@@ -30969,6 +31209,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
@@ -31058,6 +31301,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
@@ -31283,6 +31529,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
@@ -31451,12 +31700,13 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .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 {
@@ -31483,26 +31733,6 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .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
@@ -31640,6 +31870,9 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .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
@@ -31652,9 +31885,6 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
 // #region @import "../icons/_index.scss"; -> scss/icons/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../list/_index.scss"; -> scss/list/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
 // #region @import "../button/_index.scss"; -> scss/button/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
@@ -32098,6 +32328,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
@@ -32241,6 +32474,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;
         }
 
@@ -32326,7 +32560,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;
@@ -32456,7 +32693,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;
         }
@@ -32644,7 +32882,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 {
@@ -32697,6 +32936,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
@@ -33210,8 +33452,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);
         }
 
@@ -33338,6 +33580,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
@@ -33530,6 +33775,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
@@ -33718,6 +33966,9 @@ $kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 6 ) !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
@@ -34025,6 +34276,7 @@ $kendo-panelbar-header-expanded-gradient: null !default;
                 );
 
                 .k-icon,
+                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: $kendo-panelbar-text;
                 }
@@ -34074,6 +34326,7 @@ $kendo-panelbar-header-expanded-gradient: null !default;
                 );
 
                 .k-icon,
+                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: inherit;
                 }
@@ -34222,6 +34475,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
@@ -34326,6 +34582,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;
+        }
 
     }
 
@@ -34510,6 +34770,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
@@ -34624,6 +34887,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
@@ -34634,6 +34900,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)
@@ -35818,7 +36087,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;
             }
 
@@ -35908,7 +36178,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;
@@ -36585,7 +36856,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} );
             }
 
@@ -36597,7 +36869,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;
                 }
@@ -36878,7 +37151,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;
         }
     }
@@ -37058,7 +37332,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 {
             &:focus,
             &.k-focus {
                 box-shadow: inset 0 0 0 2px rgba( black, .1 );
@@ -37377,6 +37652,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
@@ -37617,6 +37895,9 @@ $kendo-listview-item-focus-shadow: inset 0 0 0 3px rgba( $kendo-listview-text, .
 // #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
@@ -38315,7 +38596,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;
             }
@@ -38355,7 +38637,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;
             }
         }
@@ -38499,6 +38782,10 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
             .k-icon {
                 font-size: 6em;
             }
+            .k-svg-icon {
+                width: 6em;
+                height: 6em;
+            }
         }
     }
 
@@ -38926,6 +39213,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
@@ -39224,7 +39514,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;
     }
@@ -39281,7 +39572,8 @@ $kendo-pivotgrid-remove-text: null !default;
             span {
                 writing-mode: vertical-rl;
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 vertical-align: baseline;
             }
         }
@@ -39438,7 +39730,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 {
@@ -39604,6 +39897,7 @@ $kendo-pivotgrid-remove-text: null !default;
     }
 
     .k-pivot-layout > tbody,
+    .k-pivot .k-table-td,
     .k-pivot td {
         vertical-align: top;
     }
@@ -40006,6 +40300,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
@@ -40194,6 +40491,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
@@ -40410,6 +40710,9 @@ $kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem rgba( $kendo-color-primary, .25
 // #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
@@ -40762,9 +41065,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;
     }
 
 }
@@ -40893,6 +41194,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
@@ -40922,6 +41226,7 @@ $kendo-file-manager-preview-icon-border: null !default;
 // File already imported_once. Skipping output.
 // #endregion
 
+
 // Component
 // #region @import "./_variables.scss"; -> scss/taskboard/_variables.scss
 // TaskBoard
@@ -41377,6 +41682,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
@@ -41579,11 +41887,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;
             }
@@ -41824,7 +42134,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;
             }
@@ -41922,7 +42233,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;
             }
@@ -42212,6 +42524,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
@@ -42508,6 +42823,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
@@ -43821,6 +44139,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
@@ -44392,7 +44713,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
                 }
             }
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 line-height: normal;
                 font-size: inherit;
             }
@@ -44497,7 +44819,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%;
@@ -45364,6 +45687,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
@@ -46120,6 +46446,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
@@ -46302,6 +46631,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
@@ -46922,6 +47254,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
@@ -47122,6 +47457,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;
+            }
         }
 
     }
@@ -47224,7 +47563,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 );
         }
 
@@ -47264,6 +47604,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
@@ -47387,6 +47730,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
@@ -47605,7 +47951,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;
@@ -47614,6 +47961,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 {
@@ -47757,6 +48109,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
@@ -48570,6 +48925,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
@@ -48718,7 +49076,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;
             }
@@ -48806,6 +49165,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
@@ -48838,6 +49200,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
@@ -49076,6 +49439,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
@@ -49085,6 +49452,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: 246px !default;