diff --git a/package-lock.json b/package-lock.json
index b2415dbbc..46c17b7c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "fusion-ui",
-  "version": "8.4.0-rc.11",
+  "version": "9.0.0-test.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fusion-ui",
-      "version": "8.4.0-rc.11",
+      "version": "9.0.0-test.1",
       "license": "MIT",
       "dependencies": {
         "@angular-devkit/architect": "^0.1802.9",
diff --git a/package.json b/package.json
index 47b1a10f3..17b8bccec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fusion-ui",
-  "version": "8.4.0-rc.11",
+  "version": "9.0.0-test.1",
   "description": "UI library created by ironSource",
   "license": "MIT",
   "repository": {
diff --git a/projects/fusion-ui/package.json b/projects/fusion-ui/package.json
index d6fffc430..43a9c7371 100644
--- a/projects/fusion-ui/package.json
+++ b/projects/fusion-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ironsource/fusion-ui",
-    "version": "8.4.0-rc.11",
+    "version": "9.0.0-test.1",
     "peerDependencies": {
         "chart.js": "4.4.2",
         "@floating-ui/dom": "^1.0.9",
diff --git a/projects/fusion-ui/src/style/scss/v1/grid.scss b/projects/fusion-ui/src/style/scss/v1/grid.scss
index 942a4bb16..9d5722ec6 100644
--- a/projects/fusion-ui/src/style/scss/v1/grid.scss
+++ b/projects/fusion-ui/src/style/scss/v1/grid.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 
 @import "mixins/breakpoints";
 
@@ -12,18 +13,18 @@ $columnHiddenPrefix: '.hidden' !default;
 // create column props by size
 @mixin make-col($size, $columns: $gridColumns) {
     flex: 0 0 auto;
-    width: percentage(math.div($size, $columns));
+    width: math.percentage(math.div($size, $columns));
 }
 
 // create column offset props
 @mixin make-col-offset($size, $columns: $gridColumns) {
     $num: math.div($size, $columns);
-    margin-left: if($num==0, 0, percentage($num));
+    margin-left: if($num==0, 0, math.percentage($num));
 }
 
 // Generate the correct number of grid classes
 @mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) {
-    @each $breakpoint in map-keys($breakpoints) {
+    @each $breakpoint in map.keys($breakpoints) {
         $infix: breakpoint-infix($breakpoint, $breakpoints);
 
         @include media-breakpoint-min($breakpoint, $breakpoints) {
diff --git a/projects/fusion-ui/src/style/scss/v1/mixins/_breakpoints.scss b/projects/fusion-ui/src/style/scss/v1/mixins/_breakpoints.scss
index 1dafe70fa..c5efca61d 100644
--- a/projects/fusion-ui/src/style/scss/v1/mixins/_breakpoints.scss
+++ b/projects/fusion-ui/src/style/scss/v1/mixins/_breakpoints.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $breakPoints: (
     xxs: 0,
     // Phones - 768px and below
@@ -21,7 +23,7 @@ $breakPoints: (
 // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
-@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) {
     $n: index($breakpoint-names, $name);
 
     @if not $n {
@@ -36,14 +38,14 @@ $breakPoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $breakPoints) {
-    $min: map-get($breakpoints, $name);
+    $min: map.get($breakpoints, $name);
     @return if($min !=0, $min, null);
 }
 
 // Maximum breakpoint width.
 // The maximum value is reduced by 0.02px to work around the limitations of
 @function breakpoint-max($name, $breakpoints: $breakPoints) {
-    $max: map-get($breakpoints, $name);
+    $max: map.get($breakpoints, $name);
     @return if($max and $max > 0, $max - .02, null);
 }
 
diff --git a/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss
index 8490465c2..a6f50b55a 100644
--- a/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss
+++ b/projects/fusion-ui/src/style/scss/v1/mixins/_mixins.scss
@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
 
 @mixin keyframes($animation-name) {
     @-webkit-keyframes #{$animation-name} {
@@ -59,7 +61,7 @@ $flexLocationMapping: (
 );
 
 @mixin flex-direction($location) {
-    $direction: map-get($flexLocationMapping, $location);
+    $direction: map.get($flexLocationMapping, $location);
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
@@ -103,7 +105,7 @@ $flexLocationMapping: (
         @content;
 
         #{$ngDeep} svg {
-            @if (type_of($size) == 'map') {
+            @if (meta.type_of($size) == 'map') {
                 @each $css, $value in $size {
                     #{$css}: $value;
                 }
@@ -113,10 +115,10 @@ $flexLocationMapping: (
             @if $rotate !=0 {
                 transform: rotate(#{$rotate}deg);
             }
-            @if (type_of($colors) == 'map') {
+            @if (meta.type_of($colors) == 'map') {
                 @each $cssSelector, $color in $colors {
                     #{$cssSelector} {
-                        @if (type_of($color) == 'map') {
+                        @if (meta.type_of($color) == 'map') {
                             @each $css, $value in $color {
                                 #{$css}: $value;
                             }
@@ -180,19 +182,19 @@ $ZIndexByLayer: (
 );
 
 %applicationLayer {
-    z-index: map-get($ZIndexByLayer, application) !important;
+    z-index: map.get($ZIndexByLayer, application) !important;
 }
 
 %notificationLayer {
-    z-index: map-get($ZIndexByLayer, notification) !important;
+    z-index: map.get($ZIndexByLayer, notification) !important;
 }
 
 %systemLayer {
-    z-index: map-get($ZIndexByLayer, system) !important;
+    z-index: map.get($ZIndexByLayer, system) !important;
 }
 
 @function getZIndexLayerOffset($layer, $offset) {
-    @return map-get($ZIndexByLayer, $layer) + $offset;
+    @return map.get($ZIndexByLayer, $layer) + $offset;
 }
 
 @function remCalc($pxWidth) {
diff --git a/projects/fusion-ui/src/style/scss/v2/grid.scss b/projects/fusion-ui/src/style/scss/v2/grid.scss
index 942a4bb16..9d5722ec6 100644
--- a/projects/fusion-ui/src/style/scss/v2/grid.scss
+++ b/projects/fusion-ui/src/style/scss/v2/grid.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 
 @import "mixins/breakpoints";
 
@@ -12,18 +13,18 @@ $columnHiddenPrefix: '.hidden' !default;
 // create column props by size
 @mixin make-col($size, $columns: $gridColumns) {
     flex: 0 0 auto;
-    width: percentage(math.div($size, $columns));
+    width: math.percentage(math.div($size, $columns));
 }
 
 // create column offset props
 @mixin make-col-offset($size, $columns: $gridColumns) {
     $num: math.div($size, $columns);
-    margin-left: if($num==0, 0, percentage($num));
+    margin-left: if($num==0, 0, math.percentage($num));
 }
 
 // Generate the correct number of grid classes
 @mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) {
-    @each $breakpoint in map-keys($breakpoints) {
+    @each $breakpoint in map.keys($breakpoints) {
         $infix: breakpoint-infix($breakpoint, $breakpoints);
 
         @include media-breakpoint-min($breakpoint, $breakpoints) {
diff --git a/projects/fusion-ui/src/style/scss/v2/mixins/_breakpoints.scss b/projects/fusion-ui/src/style/scss/v2/mixins/_breakpoints.scss
index 1dafe70fa..c5efca61d 100644
--- a/projects/fusion-ui/src/style/scss/v2/mixins/_breakpoints.scss
+++ b/projects/fusion-ui/src/style/scss/v2/mixins/_breakpoints.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $breakPoints: (
     xxs: 0,
     // Phones - 768px and below
@@ -21,7 +23,7 @@ $breakPoints: (
 // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
-@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) {
     $n: index($breakpoint-names, $name);
 
     @if not $n {
@@ -36,14 +38,14 @@ $breakPoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $breakPoints) {
-    $min: map-get($breakpoints, $name);
+    $min: map.get($breakpoints, $name);
     @return if($min !=0, $min, null);
 }
 
 // Maximum breakpoint width.
 // The maximum value is reduced by 0.02px to work around the limitations of
 @function breakpoint-max($name, $breakpoints: $breakPoints) {
-    $max: map-get($breakpoints, $name);
+    $max: map.get($breakpoints, $name);
     @return if($max and $max > 0, $max - .02, null);
 }
 
diff --git a/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss
index 8490465c2..a6f50b55a 100644
--- a/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss
+++ b/projects/fusion-ui/src/style/scss/v2/mixins/_mixins.scss
@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
 
 @mixin keyframes($animation-name) {
     @-webkit-keyframes #{$animation-name} {
@@ -59,7 +61,7 @@ $flexLocationMapping: (
 );
 
 @mixin flex-direction($location) {
-    $direction: map-get($flexLocationMapping, $location);
+    $direction: map.get($flexLocationMapping, $location);
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
@@ -103,7 +105,7 @@ $flexLocationMapping: (
         @content;
 
         #{$ngDeep} svg {
-            @if (type_of($size) == 'map') {
+            @if (meta.type_of($size) == 'map') {
                 @each $css, $value in $size {
                     #{$css}: $value;
                 }
@@ -113,10 +115,10 @@ $flexLocationMapping: (
             @if $rotate !=0 {
                 transform: rotate(#{$rotate}deg);
             }
-            @if (type_of($colors) == 'map') {
+            @if (meta.type_of($colors) == 'map') {
                 @each $cssSelector, $color in $colors {
                     #{$cssSelector} {
-                        @if (type_of($color) == 'map') {
+                        @if (meta.type_of($color) == 'map') {
                             @each $css, $value in $color {
                                 #{$css}: $value;
                             }
@@ -180,19 +182,19 @@ $ZIndexByLayer: (
 );
 
 %applicationLayer {
-    z-index: map-get($ZIndexByLayer, application) !important;
+    z-index: map.get($ZIndexByLayer, application) !important;
 }
 
 %notificationLayer {
-    z-index: map-get($ZIndexByLayer, notification) !important;
+    z-index: map.get($ZIndexByLayer, notification) !important;
 }
 
 %systemLayer {
-    z-index: map-get($ZIndexByLayer, system) !important;
+    z-index: map.get($ZIndexByLayer, system) !important;
 }
 
 @function getZIndexLayerOffset($layer, $offset) {
-    @return map-get($ZIndexByLayer, $layer) + $offset;
+    @return map.get($ZIndexByLayer, $layer) + $offset;
 }
 
 @function remCalc($pxWidth) {
diff --git a/projects/fusion-ui/src/style/scss/v3/grid.scss b/projects/fusion-ui/src/style/scss/v3/grid.scss
index 942a4bb16..9d5722ec6 100644
--- a/projects/fusion-ui/src/style/scss/v3/grid.scss
+++ b/projects/fusion-ui/src/style/scss/v3/grid.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:map";
 
 @import "mixins/breakpoints";
 
@@ -12,18 +13,18 @@ $columnHiddenPrefix: '.hidden' !default;
 // create column props by size
 @mixin make-col($size, $columns: $gridColumns) {
     flex: 0 0 auto;
-    width: percentage(math.div($size, $columns));
+    width: math.percentage(math.div($size, $columns));
 }
 
 // create column offset props
 @mixin make-col-offset($size, $columns: $gridColumns) {
     $num: math.div($size, $columns);
-    margin-left: if($num==0, 0, percentage($num));
+    margin-left: if($num==0, 0, math.percentage($num));
 }
 
 // Generate the correct number of grid classes
 @mixin make-grid-columns($columns: $gridColumns, $gutter: $gridColumnGap, $breakpoints: $breakPoints) {
-    @each $breakpoint in map-keys($breakpoints) {
+    @each $breakpoint in map.keys($breakpoints) {
         $infix: breakpoint-infix($breakpoint, $breakpoints);
 
         @include media-breakpoint-min($breakpoint, $breakpoints) {
diff --git a/projects/fusion-ui/src/style/scss/v3/mixins/_breakpoints.scss b/projects/fusion-ui/src/style/scss/v3/mixins/_breakpoints.scss
index 1dafe70fa..c5efca61d 100644
--- a/projects/fusion-ui/src/style/scss/v3/mixins/_breakpoints.scss
+++ b/projects/fusion-ui/src/style/scss/v3/mixins/_breakpoints.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $breakPoints: (
     xxs: 0,
     // Phones - 768px and below
@@ -21,7 +23,7 @@ $breakPoints: (
 // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
-@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) {
     $n: index($breakpoint-names, $name);
 
     @if not $n {
@@ -36,14 +38,14 @@ $breakPoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $breakPoints) {
-    $min: map-get($breakpoints, $name);
+    $min: map.get($breakpoints, $name);
     @return if($min !=0, $min, null);
 }
 
 // Maximum breakpoint width.
 // The maximum value is reduced by 0.02px to work around the limitations of
 @function breakpoint-max($name, $breakpoints: $breakPoints) {
-    $max: map-get($breakpoints, $name);
+    $max: map.get($breakpoints, $name);
     @return if($max and $max > 0, $max - .02, null);
 }
 
diff --git a/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss
index 7502bc956..f7cdeb962 100644
--- a/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss
+++ b/projects/fusion-ui/src/style/scss/v3/mixins/_mixins.scss
@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
 
 @mixin keyframes($animation-name) {
     @-webkit-keyframes #{$animation-name} {
@@ -108,7 +110,7 @@ $flexLocationMapping: (
 );
 
 @mixin flex-direction($location) {
-    $direction: map-get($flexLocationMapping, $location);
+    $direction: map.get($flexLocationMapping, $location);
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
@@ -152,7 +154,7 @@ $flexLocationMapping: (
         @content;
 
         #{$ngDeep} svg {
-            @if (type_of($size) == 'map') {
+            @if (meta.type_of($size) == 'map') {
                 @each $css, $value in $size {
                     #{$css}: $value;
                 }
@@ -162,10 +164,10 @@ $flexLocationMapping: (
             @if $rotate !=0 {
                 transform: rotate(#{$rotate}deg);
             }
-            @if (type_of($colors) == 'map') {
+            @if (meta.type_of($colors) == 'map') {
                 @each $cssSelector, $color in $colors {
                     #{$cssSelector} {
-                        @if (type_of($color) == 'map') {
+                        @if (meta.type_of($color) == 'map') {
                             @each $css, $value in $color {
                                 #{$css}: $value;
                             }
@@ -229,19 +231,19 @@ $ZIndexByLayer: (
 );
 
 %applicationLayer {
-    z-index: map-get($ZIndexByLayer, application) !important;
+    z-index: map.get($ZIndexByLayer, application) !important;
 }
 
 %notificationLayer {
-    z-index: map-get($ZIndexByLayer, notification) !important;
+    z-index: map.get($ZIndexByLayer, notification) !important;
 }
 
 %systemLayer {
-    z-index: map-get($ZIndexByLayer, system) !important;
+    z-index: map.get($ZIndexByLayer, system) !important;
 }
 
 @function getZIndexLayerOffset($layer, $offset) {
-    @return map-get($ZIndexByLayer, $layer) + $offset;
+    @return map.get($ZIndexByLayer, $layer) + $offset;
 }
 
 @function remCalc($pxWidth) {
diff --git a/projects/fusion-ui/src/style/scss/v4/mixins/_breakpoints.scss b/projects/fusion-ui/src/style/scss/v4/mixins/_breakpoints.scss
index 1dafe70fa..c5efca61d 100644
--- a/projects/fusion-ui/src/style/scss/v4/mixins/_breakpoints.scss
+++ b/projects/fusion-ui/src/style/scss/v4/mixins/_breakpoints.scss
@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $breakPoints: (
     xxs: 0,
     // Phones - 768px and below
@@ -21,7 +23,7 @@ $breakPoints: (
 // The map defined in the `$breakPoints` global variable is used as the `$breakpoints` argument by default.
 
 // Name of the next breakpoint, or null for the last breakpoint.
-@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map-keys($breakpoints)) {
+@function breakpoint-next($name, $breakpoints: $breakPoints, $breakpoint-names: map.keys($breakpoints)) {
     $n: index($breakpoint-names, $name);
 
     @if not $n {
@@ -36,14 +38,14 @@ $breakPoints: (
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
 @function breakpoint-min($name, $breakpoints: $breakPoints) {
-    $min: map-get($breakpoints, $name);
+    $min: map.get($breakpoints, $name);
     @return if($min !=0, $min, null);
 }
 
 // Maximum breakpoint width.
 // The maximum value is reduced by 0.02px to work around the limitations of
 @function breakpoint-max($name, $breakpoints: $breakPoints) {
-    $max: map-get($breakpoints, $name);
+    $max: map.get($breakpoints, $name);
     @return if($max and $max > 0, $max - .02, null);
 }
 
diff --git a/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss b/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss
index 7502bc956..f7cdeb962 100644
--- a/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss
+++ b/projects/fusion-ui/src/style/scss/v4/mixins/_mixins.scss
@@ -1,4 +1,6 @@
 @use "sass:math";
+@use "sass:map";
+@use "sass:meta";
 
 @mixin keyframes($animation-name) {
     @-webkit-keyframes #{$animation-name} {
@@ -108,7 +110,7 @@ $flexLocationMapping: (
 );
 
 @mixin flex-direction($location) {
-    $direction: map-get($flexLocationMapping, $location);
+    $direction: map.get($flexLocationMapping, $location);
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
@@ -152,7 +154,7 @@ $flexLocationMapping: (
         @content;
 
         #{$ngDeep} svg {
-            @if (type_of($size) == 'map') {
+            @if (meta.type_of($size) == 'map') {
                 @each $css, $value in $size {
                     #{$css}: $value;
                 }
@@ -162,10 +164,10 @@ $flexLocationMapping: (
             @if $rotate !=0 {
                 transform: rotate(#{$rotate}deg);
             }
-            @if (type_of($colors) == 'map') {
+            @if (meta.type_of($colors) == 'map') {
                 @each $cssSelector, $color in $colors {
                     #{$cssSelector} {
-                        @if (type_of($color) == 'map') {
+                        @if (meta.type_of($color) == 'map') {
                             @each $css, $value in $color {
                                 #{$css}: $value;
                             }
@@ -229,19 +231,19 @@ $ZIndexByLayer: (
 );
 
 %applicationLayer {
-    z-index: map-get($ZIndexByLayer, application) !important;
+    z-index: map.get($ZIndexByLayer, application) !important;
 }
 
 %notificationLayer {
-    z-index: map-get($ZIndexByLayer, notification) !important;
+    z-index: map.get($ZIndexByLayer, notification) !important;
 }
 
 %systemLayer {
-    z-index: map-get($ZIndexByLayer, system) !important;
+    z-index: map.get($ZIndexByLayer, system) !important;
 }
 
 @function getZIndexLayerOffset($layer, $offset) {
-    @return map-get($ZIndexByLayer, $layer) + $offset;
+    @return map.get($ZIndexByLayer, $layer) + $offset;
 }
 
 @function remCalc($pxWidth) {
diff --git a/scripts/build-styles.sh b/scripts/build-styles.sh
index 2adc04c34..6629fae3d 100644
--- a/scripts/build-styles.sh
+++ b/scripts/build-styles.sh
@@ -34,36 +34,36 @@ cp -R projects/fusion-ui/src/style/scss/v4/mixins dist/fusion-ui/style/v4
 # copy and compile grid by versions
 echo  -e "${GREEN}-- copy and compile grid by versions ${NOCOLOR}"
 cp -R projects/fusion-ui/src/style/scss/v1/grid.scss dist/fusion-ui/style/v1/grid.scss
-sass dist/fusion-ui/style/v1/grid.scss dist/fusion-ui/style/v1/grid.css -s compressed
+sass --silence-deprecation=import dist/fusion-ui/style/v1/grid.scss dist/fusion-ui/style/v1/grid.css -s compressed
 
 cp -R projects/fusion-ui/src/style/scss/v2/grid.scss dist/fusion-ui/style/v2/grid.scss
-sass dist/fusion-ui/style/v2/grid.scss dist/fusion-ui/style/v2/grid.css -s compressed
+sass --silence-deprecation=import dist/fusion-ui/style/v2/grid.scss dist/fusion-ui/style/v2/grid.css -s compressed
 
 cp -R projects/fusion-ui/src/style/scss/v3/grid.scss dist/fusion-ui/style/v3/grid.scss
-sass dist/fusion-ui/style/v3/grid.scss dist/fusion-ui/style/v3/grid.css -s compressed
+sass --silence-deprecation=import dist/fusion-ui/style/v3/grid.scss dist/fusion-ui/style/v3/grid.css -s compressed
 
 cp -R projects/fusion-ui/src/style/scss/v4/grid.scss dist/fusion-ui/style/v4/grid.scss
-sass dist/fusion-ui/style/v4/grid.scss dist/fusion-ui/style/v4/grid.css -s compressed
+sass --silence-deprecation=import dist/fusion-ui/style/v4/grid.scss dist/fusion-ui/style/v4/grid.css -s compressed
 
 # compile fonts by version
-sass projects/fusion-ui/src/style/scss/v1/fonts.scss dist/fusion-ui/style/v1/fonts.css -s compressed
-sass projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fonts.css -s compressed
-sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed
-sass projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed
+sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v1/fonts.scss dist/fusion-ui/style/v1/fonts.css -s compressed
+sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v2/fonts.scss dist/fusion-ui/style/v2/fonts.css -s compressed
+sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/v3/fonts.css -s compressed
+sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/vars/_fonts.scss dist/fusion-ui/style/v4/fonts.css -s compressed
 
 # copy and compile shadows v4
-sass projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed
+sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/shadows.scss dist/fusion-ui/style/v4/shadows.css -s compressed
 
 # common v4 variables
-sass projects/fusion-ui/src/style/scss/v4/variables.scss dist/fusion-ui/style/v4/variables.css -s compressed
+sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/variables.scss dist/fusion-ui/style/v4/variables.css -s compressed
 
 # common v4 style-guide
-sass projects/fusion-ui/src/style/scss/v4/style-guide.scss dist/fusion-ui/style/v4/style-guide.css -s compressed
+sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v4/style-guide.scss dist/fusion-ui/style/v4/style-guide.css -s compressed
 
 
 echo  -e "${GREEN}-- copy and compile default fonts and grid by last (v3) versions ${NOCOLOR}"
 # compile default fonts (last version default - 3 )
-sass projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/fonts.css -s compressed
+sass --silence-deprecation=import projects/fusion-ui/src/style/scss/v3/vars/_fonts.scss dist/fusion-ui/style/fonts.css -s compressed
 # copy default grid (last version default - 3 )
 cp -R dist/fusion-ui/style/v3/grid.css dist/fusion-ui/style/grid.css
 cp -R dist/fusion-ui/style/v3/grid.css.map dist/fusion-ui/style/grid.css.map