@soyfri/template 1.0.7 → 1.0.8

package/README.md

@@ -20,8 +20,8 @@ yarn add @soyfri/template
 
 ## Requirements
 ### Peer Dependencies
-- React >=16.8.0
-- React DOM >=16.8.0
+- React >=19.0.0
+- React DOM >=19.0.0
 
 ## Usage
 

package/dist/assets/sass/_init.scss

@@ -4,29 +4,33 @@
 
 
 // Custom functions & mixins
-@import "./core/base/functions";
-@import "./core/base/mixins";
-@import "./core/components/mixins";
-@import "./core/vendors/plugins/mixins";
+@use "./core/base/functions" as *; // Use 'as *' to make functions globally accessible
+@use "./core/base/mixins" as *;    // Use 'as *' to make mixins globally accessible
+@use "./core/components/mixins" as *; // Use 'as *' to make mixins globally accessible
+@use "./core/vendors/plugins/mixins" as *; // Use 'as *' to make mixins globally accessible
 
 // Custom variables
-@import "components/variables.custom";
-@import "./core/components/variables";
-@import "./core/components/variables-dark";
-@import "components/variables.override";
+@use "components/variables.custom" as *; // Use 'as *' to make variables globally accessible
+@use "./core/components/variables" as *; // Use 'as *' to make variables globally accessible
+@use "./core/components/variables-dark" as *; // Use 'as *' to make variables globally accessible
+@use "components/variables.override" as *; // Use 'as *' to make variables globally accessible
 
-// Bootstrap initializaton
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+// Bootstrap initialization
+// Bootstrap modules are designed to be used with `@use`.
+// By default, many of their core components and utilities are exposed globally
+// once their respective modules are `@use`-ed. We'll use `as *` for consistency,
+// assuming you want their functions, variables, and mixins widely available.
+@use "bootstrap/scss/functions" as *;
+@use "bootstrap/scss/variables" as *;
+@use "bootstrap/scss/variables-dark" as *;
+@use "bootstrap/scss/maps" as *;
+@use "bootstrap/scss/mixins" as *;
+@use "bootstrap/scss/utilities" as *;
 
 // 3rd-Party plugins variables
-@import "./core/vendors/plugins/variables";
-@import "./core/vendors/plugins/variables-dark";
+@use "./core/vendors/plugins/variables" as *; // Use 'as *' to make variables globally accessible
+@use "./core/vendors/plugins/variables-dark" as *; // Use 'as *' to make variables globally accessible
 
 // Custom layout variables
-@import "./core/layout/base/variables";
-@import "layout/variables.custom";
+@use "./core/layout/base/variables" as *; // Use 'as *' to make variables globally accessible
+@use "layout/variables.custom" as *; // Use 'as *' to make variables globally accessible

package/dist/assets/sass/components/components.scss

@@ -3,6 +3,6 @@
 //
 
 // Import Dependencies
-@import "stepper/multistep";
-@import "landing";
-@import "btn-secondary";
+@use "stepper/multistep";
+@use "landing";
+@use "btn-secondary";

package/dist/assets/sass/core/base/_functions.scss

@@ -3,8 +3,8 @@
 //
 
 // Import Dependencies
-@import "functions/get";
-@import "functions/set";
-@import "functions/math";
-@import "functions/valueif";
-@import "functions/theme-colors";
+@use "functions/get";
+@use "functions/set";
+@use "functions/math";
+@use "functions/valueif";
+@use "functions/theme-colors";

package/dist/assets/sass/core/base/_mixins.scss

@@ -3,9 +3,9 @@
 //
 
 // Import Dependencies
-@import "mixins/property";
-@import "mixins/browsers";
-@import "mixins/fixes";
-@import "mixins/reset";
-@import "mixins/placeholder";
-@import "mixins/breakpoints";
+@use "mixins/property";
+@use "mixins/browsers";
+@use "mixins/fixes";
+@use "mixins/reset";
+@use "mixins/placeholder";
+@use "mixins/breakpoints";

package/dist/assets/sass/core/base/functions/_get.scss

@@ -1,32 +1,35 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
 //
 // Get
 //
 
 @function get($map, $keys...) {
-    @if length($keys) == 1 {
-        $keys: nth($keys, 1);
+    @if list.length($keys) == 1 {
+        $keys: list.nth($keys, 1);
     }
 
-    @if type-of($map) != 'map' or $map == null {
+    @if meta.type-of($map) != 'map' or $map == null {
         //@return false;
     }
 
-    $warn: "#{nth($keys, 1)}";
-    $length: length($keys);
-    $get: map-get($map, nth($keys, 1));
+    $warn: "#{list.nth($keys, 1)}";
+    $length: list.length($keys);
+    $get: map.get($map, list.nth($keys, 1));
 
     @if $length > 1 {
         @for $i from 2 through $length {
-            @if $get != null and type-of($get) == 'map' {
-                $warn: $warn + "->#{nth($keys, $i)}";
-                $get: map-get($get, nth($keys, $i));
+            @if $get != null and meta.type-of($get) == 'map' {
+                $warn: $warn + "->#{list.nth($keys, $i)}";
+                $get: map.get($get, list.nth($keys, $i));
 
                 @if $get == null {
                     @return null;
                 }
             }
             @else {
-                @return get-warning($warn, $get, nth($keys, $i));
+                @return get-warning($warn, $get, list.nth($keys, $i));
             }
         }
     }
@@ -35,23 +38,23 @@
 }
 
 @function has($map, $keys...) {
-    @if length($keys) == 1 {
-        $keys: nth($keys, 1);
+    @if list.length($keys) == 1 {
+        $keys: list.nth($keys, 1);
     }
 
-    @if type-of($map) != 'map' or $map == null {
+    @if meta.type-of($map) != 'map' or $map == null {
         //@return false;
     }
 
-    $warn: "#{nth($keys, 1)}";
-    $length: length($keys);
-    $get: map-get($map, nth($keys, 1));
+    $warn: "#{list.nth($keys, 1)}";
+    $length: list.length($keys);
+    $get: map.get($map, list.nth($keys, 1));
 
     @if $length > 1 {
         @for $i from 2 through $length {
-            @if $get != null and type-of($get) == 'map' {
-                $warn: $warn + "->#{nth($keys, $i)}";
-                $get: map-get($get, nth($keys, $i));
+            @if $get != null and meta.type-of($get) == 'map' {
+                $warn: $warn + "->#{list.nth($keys, $i)}";
+                $get: map.get($get, list.nth($keys, $i));
 
                 @if $get == null {
                     @return false;
@@ -75,7 +78,7 @@
     @if $get == null {
         @warn "Map has no value for key search `#{$warn}`";
     }
-    @else if type-of($get) != 'map' {
+    @else if meta.type-of($get) != 'map' {
         @warn "Non-map value found for key search `#{$warn}`, cannot search for key `#{$key}`";
     }
     @return null;

package/dist/assets/sass/core/base/functions/_math.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 //
 // Math
 //
@@ -7,7 +8,7 @@
     $x1: $x0;
 
     @for $i from 1 through 10 {
-        $x1: $x0 - ($x0 * $x0 - abs($r)) / (2 * $x0);
+        $x1: $x0 - ($x0 * $x0 - math.abs($r)) / (2 * $x0);
         $x0: $x1;
     }
 

package/dist/assets/sass/core/base/functions/_set.scss

@@ -1,3 +1,6 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
 /// Deep set function to set a value in nested maps
 
 @function set($map, $keys, $value) {
@@ -6,36 +9,36 @@
 	
 	// If the last key is a map already
 	// Warn the user we will be overriding it with $value
-	@if type-of(nth($keys, -1)) == "map" {
+	@if meta.type-of(list.nth($keys, -1)) == "map" {
 		@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
 	}
 	
 	// If $keys is a single key
 	// Just merge and return
-	@if length($keys) == 1 {
-		@return map-merge($map, ($keys: $value));
+	@if list.length($keys) == 1 {
+		@return map.merge($map, ($keys: $value));
 	}
 	
 	// Loop from the first to the second to last key from $keys
 	// Store the associated map to this key in the $maps list
 	// If the key doesn't exist, throw an error
-	@for $i from 1 through length($keys) - 1 {
-		$current-key: nth($keys, $i);
-		$current-map: nth($maps, -1);
-		$current-get: map-get($current-map, $current-key);
+	@for $i from 1 through list.length($keys) - 1 {
+		$current-key: list.nth($keys, $i);
+		$current-map: list.nth($maps, -1);
+		$current-get: map.get($current-map, $current-key);
 		@if $current-get == null {
 		@error "Key `#{$key}` doesn't exist at current level in map.";
 		}
-		$maps: append($maps, $current-get);
+		$maps: list.append($maps, $current-get);
 	}
 	
 	// Loop from the last map to the first one
 	// Merge it with the previous one
-	@for $i from length($maps) through 1 {
-		$current-map: nth($maps, $i);
-		$current-key: nth($keys, $i);
-		$current-val: if($i == length($maps), $value, $result);
-		$result: map-merge($current-map, ($current-key: $current-val));
+	@for $i from list.length($maps) through 1 {
+		$current-map: list.nth($maps, $i);
+		$current-key: list.nth($keys, $i);
+		$current-val: if($i == list.length($maps), $value, $result);
+		$result: map.merge($current-map, ($current-key: $current-val));
 	}
 	
 	// Return result

package/dist/assets/sass/core/base/functions/_theme-colors.scss

@@ -1,15 +1,17 @@
+@use "functions/get";
+
 //
 // Bootstrap extended functions
 //
 
 @function theme-inverse-color($key: "primary") {
-    @return get($theme-inverse-colors, $key);
+    @return get.get($theme-inverse-colors, $key);
 }
 
 @function theme-active-color($key: "primary") {
-    @return get($theme-active-colors, $key);
+    @return get.get($theme-active-colors, $key);
 }
 
 @function theme-light-color($key: "primary") {
-    @return get($theme-light-colors, $key);
+    @return get.get($theme-light-colors, $key);
 }

package/dist/assets/sass/core/components/_bootstrap-icon.scss

@@ -1,5 +1,6 @@
+@use "sass:map";
 .bi {
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
         @include media-breakpoint-up($breakpoint) {
             $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_buttons.scss

@@ -3,5 +3,5 @@
 //
 
 // Import Dependencies
-@import "buttons/base";
-@import "buttons/theme";
+@use "buttons/base";
+@use "buttons/theme";

package/dist/assets/sass/core/components/_card.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Card
 //
@@ -211,7 +212,7 @@
 
 // Responsive stretch heights
 .card {
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
     	@include media-breakpoint-up($breakpoint) {
     		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_fixed.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 //
 // Fixed
 //
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_forms.scss

@@ -3,11 +3,11 @@
 //
 
 // Import Dependencies
-@import "forms/labels";
-@import "forms/form-control";
-@import "forms/floating-labels";
-@import "forms/form-select";
-@import "forms/form-check";
-@import "forms/input-group";
-@import "forms/floating-labels";
-@import "forms/required";
+@use "forms/labels";
+@use "forms/form-control";
+@use "forms/floating-labels";
+@use "forms/form-select";
+@use "forms/form-check";
+@use "forms/input-group";
+@use "forms/floating-labels";
+@use "forms/required";

package/dist/assets/sass/core/components/_helpers.scss

@@ -3,10 +3,10 @@
 //
 
 // Import Dependencies
-@import "helpers/background";
-@import "helpers/borders";
-@import "helpers/flex";
-@import "helpers/shadow";
-@import "helpers/text";
-@import "helpers/opacity";
-@import "helpers/transform";
+@use "helpers/background";
+@use "helpers/borders";
+@use "helpers/flex";
+@use "helpers/shadow";
+@use "helpers/text";
+@use "helpers/opacity";
+@use "helpers/transform";

package/dist/assets/sass/core/components/_menu.scss

@@ -3,5 +3,5 @@
 //
 
 // Import Dependencies
-@import "menu/base";
-@import "menu/theme";
+@use "menu/base";
+@use "menu/theme";

package/dist/assets/sass/core/components/_mixins.scss

@@ -3,11 +3,11 @@
 //
 
 // Import Dependencies
-@import "mixins/menu";
-@import "mixins/buttons";
-@import "mixins/ki";
-@import "mixins/symbol";
-@import "mixins/svg-icon";
-@import "mixins/svg-bg-icon";
-@import "mixins/scroll";
-@import "mixins/shape";
+@use "mixins/menu";
+@use "mixins/buttons";
+@use "mixins/ki";
+@use "mixins/symbol";
+@use "mixins/svg-icon";
+@use "mixins/svg-bg-icon";
+@use "mixins/scroll";
+@use "mixins/shape";

package/dist/assets/sass/core/components/_scroll.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Scroll
 //
@@ -80,7 +81,7 @@
 }
 
 // Utilities
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_stepper.scss

@@ -3,6 +3,6 @@
 //
 
 // Import Dependencies
-@import "stepper/base";
-@import "stepper/pills";
-@import "stepper/links";
+@use "stepper/base";
+@use "stepper/pills";
+@use "stepper/links";

package/dist/assets/sass/core/components/_svg-icon.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // SVG Icon
 //
@@ -15,7 +16,7 @@
     }
 
     // Responsive icon sizes
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
         @include media-breakpoint-up($breakpoint) {
             $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_symbol.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // symbol
 //
@@ -69,7 +70,7 @@
     // Sizes
     @include symbol-size(get($symbol-sizes, default));
 
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
         @include media-breakpoint-up($breakpoint) {
             $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_tables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Table
 //
@@ -197,7 +198,7 @@
 }
 
 // Cell gutters
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/_utilities.scss

@@ -1,8 +1,9 @@
+@use "sass:map";
 //
 // Custom utilities
 //
 
-$utilities: map-merge(
+$utilities: map.merge(
     $utilities,
     (
         "cursor": (

package/dist/assets/sass/core/components/_variables-dark.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 // Bootstrap color system
 
 //
@@ -321,7 +322,7 @@ $rating-color-active-dark: #FFAD0F !default;
 // Keenthemes ribbon component 
 $ribbon-label-box-shadow-dark: 0px -1px 5px 0px rgba($white, 0.1) !default;
 $ribbon-label-bg-dark: $primary !default;
-$ribbon-label-border-color-dark: darken($primary, 20%) !default;
+$ribbon-label-border-color-dark: color.adjust($primary, $lightness: -20%) !default;
 $ribbon-clip-bg-dark: $light !default;
 
 // Engage panel

package/dist/assets/sass/core/components/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // Bootstrap & Custom Variables
 // Safely override any variable in _variables.custom.scss
@@ -1257,7 +1258,7 @@ $rating-color-active: #FFAD0F !default;
 // Keenthemes ribbon component 
 $ribbon-label-box-shadow: 0px -1px 5px 0px rgba($dark, 0.1) !default;
 $ribbon-label-bg: $primary !default;
-$ribbon-label-border-color: darken($primary, 20%) !default;
+$ribbon-label-border-color: color.adjust($primary, $lightness: -20%) !default;
 $ribbon-clip-bg: $dark !default;
 
 // Keenthemes fixed component 
@@ -1278,36 +1279,36 @@ $social-colors: (
 		base: #3b5998,
 		inverse: #ffffff,
 		light: rgba(#3b5998, 0.1),
-		active: darken(#3b5998, 7.5%)
+		active: color.adjust(#3b5998, $lightness: -7.5%)
 	),
 	google: (
 		base: #dd4b39,
 		inverse: #ffffff,
 		light: rgba(#dd4b39, 0.1),
-		active: darken(#dd4b39, 7.5%)
+		active: color.adjust(#dd4b39, $lightness: -7.5%)
 	),
 	twitter: (
 		base: #1da1f2,
 		inverse: #ffffff,
 		light: rgba(#1da1f2, 0.1),
-		active: darken(#1da1f2, 7.5%)
+		active: color.adjust(#1da1f2, $lightness: -7.5%)
 	),
 	instagram: (
 		base: #e1306c,
 		inverse: #ffffff,
 		light: rgba(#e1306c, 0.1),
-		active: darken(#e1306c, 7.5%)
+		active: color.adjust(#e1306c, $lightness: -7.5%)
 	),
 	youtube: (
 		base: #ff0000,
 		inverse: #ffffff,
 		light: rgba(#ff0000, 0.1),
-		active: darken(#ff0000, 7.5%)
+		active: color.adjust(#ff0000, $lightness: -7.5%)
 	),
 	linkedin: (
 		base: #0077b5,
 		inverse: #ffffff,
 		light: rgba(#0077b5, 0.1),
-		active: darken(#0077b5, 7.5%)
+		active: color.adjust(#0077b5, $lightness: -7.5%)
 	)
 ) !default;

package/dist/assets/sass/core/components/buttons/_theme.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // Buttons Theme
 //
@@ -298,10 +299,10 @@
 			$icon-color: $gray-800-dark, 
 			$border-color: null, 
 			$bg-color: $gray-400-dark,
-			$color-active: lighten($gray-800-dark, 3%), 
-			$icon-color-active: lighten($gray-800-dark, 3%), 
+			$color-active: color.adjust($gray-800-dark, $lightness: 3%), 
+			$icon-color-active: color.adjust($gray-800-dark, $lightness: 3%), 
 			$border-color-active: null, 
-			$bg-color-active: lighten($gray-400-dark, 3%),
+			$bg-color-active: color.adjust($gray-400-dark, $lightness: 3%),
 		);
 	}
 }

package/dist/assets/sass/core/components/components.scss

@@ -3,70 +3,79 @@
 //
 
 // Extended bootstrap utilities
-@import "utilities";
+@use "utilities" as *; // Using `as *` to merge utilities directly into this scope
 
 // Bootstrap components
-@import "bootstrap/scss/bootstrap";
+// Bootstrap's main SCSS file is designed to be @used.
+// By default, it exposes a lot of things globally if you import it this way,
+// but for a cleaner approach, you could import specific modules and use their functions/mixins.
+// However, for simplicity and common usage, importing the main bootstrap.scss and then other components
+// often means you still want some level of global access for standard Bootstrap elements.
+// If you encounter issues, you might need to import specific bootstrap modules (e.g., @use "bootstrap/scss/mixins" as bs-mixins;)
+// or configure Bootstrap's own @use statements in its entry point.
+@use "bootstrap/scss/bootstrap" as *; // Assuming you want all Bootstrap components globally available
 
 // Custom components
-@import "root";
-@import "reboot";
-@import "type";
-@import "theme-mode";
-@import "animation";
-@import "alert";
-@import "dropdown";
-@import "toasts";
-@import "nav";
-@import "nav-line-tabs";
-@import "nav-pills-custom";
-@import "pagination";
-@import "separator";
-@import "carousel";
-@import "menu";
-@import "anchor";
-@import "card";
-@import "breadcrumb";
-@import "buttons";
-@import "modal";
-@import "code";
-@import "forms";
-@import "progress";
-@import "tables";
-@import "popover";
-@import "tooltip";
-@import "accordion";
-@import "image-input";
-@import "symbol";
-@import "pulse";
-@import "page-loader";
-@import "scrolltop";
-@import "svg-icon";
-@import "fixed";
-@import "timeline";
-@import "timeline-label";
-@import "overlay";
-@import "bullet";
-@import "drawer";
-@import "badge";
-@import "indicator";
-@import "hover";
-@import "rotate";
-@import "scroll";
-@import "rating";
-@import "stepper";
-@import "toggle";
-@import "shape";
-@import "ribbon";
-@import "blockui";
-@import "explore";
-@import "engage";
-@import "cookiealert";
-@import "print";
-@import "helpers";
-@import "tree";
-@import "testimonials-slider";
-@import "bootstrap-icon";
-@import "wizard";
-@import "title-reports";
-@import "image.scss"
+// Using `as *` for each custom component to make their styles, variables, and mixins
+// available directly without needing a prefix like `root.$variable`.
+@use "root" as *;
+@use "reboot" as *;
+@use "type" as *;
+@use "theme-mode" as *;
+@use "animation" as *;
+@use "alert" as *;
+@use "dropdown" as *;
+@use "toasts" as *;
+@use "nav" as *;
+@use "nav-line-tabs" as *;
+@use "nav-pills-custom" as *;
+@use "pagination" as *;
+@use "separator" as *;
+@use "carousel" as *;
+@use "menu" as *;
+@use "anchor" as *;
+@use "card" as *;
+@use "breadcrumb" as *;
+@use "buttons" as *;
+@use "modal" as *;
+@use "code" as *;
+@use "forms" as *;
+@use "progress" as *;
+@use "tables" as *;
+@use "popover" as *;
+@use "tooltip" as *;
+@use "accordion" as *;
+@use "image-input" as *;
+@use "symbol" as *;
+@use "pulse" as *;
+@use "page-loader" as *;
+@use "scrolltop" as *;
+@use "svg-icon" as *;
+@use "fixed" as *;
+@use "timeline" as *;
+@use "timeline-label" as *;
+@use "overlay" as *;
+@use "bullet" as *;
+@use "drawer" as *;
+@use "badge" as *;
+@use "indicator" as *;
+@use "hover" as *;
+@use "rotate" as *;
+@use "scroll" as *;
+@use "rating" as *;
+@use "stepper" as *;
+@use "toggle" as *;
+@use "shape" as *;
+@use "ribbon" as *;
+@use "blockui" as *;
+@use "explore" as *;
+@use "engage" as *;
+@use "cookiealert" as *;
+@use "print" as *;
+@use "helpers" as *;
+@use "tree" as *;
+@use "testimonials-slider" as *;
+@use "bootstrap-icon" as *;
+@use "wizard" as *;
+@use "title-reports" as *;
+@use "image.scss" as *;

package/dist/assets/sass/core/components/helpers/_background.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Custom background helpers
 //
@@ -216,7 +217,7 @@
 }
 
 // Responsive helpers
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
 		$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 		

package/dist/assets/sass/core/components/helpers/_flex.scss

@@ -1,9 +1,10 @@
+@use "sass:map";
 //
 // Flex Utilities
 //
 
 
-@each $breakpoint in map-keys($grid-breakpoints) {
+@each $breakpoint in map.keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 

package/dist/assets/sass/core/components/menu/_base.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 //
 // Menu Base
 //
@@ -147,7 +148,7 @@
 
 // Responsive 
 @each $direction in (up, down) {
-    @each $breakpoint in map-keys($grid-breakpoints) {
+    @each $breakpoint in map.keys($grid-breakpoints) {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
         @if $infix and $direction == down {

package/dist/assets/sass/core/components/mixins/_menu.scss

@@ -1,3 +1,5 @@
+@use "svg-bg-icon";
+
 //
 // Label
 //
@@ -166,9 +168,9 @@
 	@if ( $arrow-color != null ) {
 		// Arrow
 		.menu-arrow:after {
-			@include svg-bg-icon(arrow-start, $arrow-color);
+			@include svg-bg-icon.svg-bg-icon(arrow-start, $arrow-color);
 			/*rtl:begin:remove*/
-			@include svg-bg-icon(arrow-end, $arrow-color);
+			@include svg-bg-icon.svg-bg-icon(arrow-end, $arrow-color);
 			/*rtl:end:remove*/
 		}
 	}

package/dist/assets/sass/core/components/wizard.scss

@@ -3,4 +3,4 @@
 //
 
 // Import Dependencies
-@import "wizard/wizard";
+@use "wizard/wizard";

package/dist/assets/sass/core/layout/base/_layout.scss

@@ -2,28 +2,28 @@
 // App Layout
 //
 
-@import "mixins/layout-minimize";
-@import "mixins/layout-transition";
-@import "root";
-@import "reboot";
-@import "page";
-@import "page-loader";
-@import "container";
-@import "print";
-@import "navbar";
-@import "header/header";
-@import "header/header-primary";
-@import "header/header-secondary";
-@import "header/header-tertiary";
-@import "toolbar";
-@import "hero";
-@import "sidebar/sidebar";
-@import "sidebar/sidebar-primary";
-@import "sidebar/sidebar-secondary";
-@import "sidebar/sidebar-panel";
-@import "aside/aside";
-@import "wrapper";
-@import "main";
-@import "content";
-@import "footer";
-@import "layout-builder";
+@use "mixins/layout-minimize";
+@use "mixins/layout-transition";
+@use "root";
+@use "reboot";
+@use "page";
+@use "page-loader";
+@use "container";
+@use "print";
+@use "navbar";
+@use "header/header";
+@use "header/header-primary";
+@use "header/header-secondary";
+@use "header/header-tertiary";
+@use "toolbar";
+@use "hero";
+@use "sidebar/sidebar";
+@use "sidebar/sidebar-primary";
+@use "sidebar/sidebar-secondary";
+@use "sidebar/sidebar-panel";
+@use "aside/aside";
+@use "wrapper";
+@use "main";
+@use "content";
+@use "footer";
+@use "layout-builder";

package/dist/assets/sass/core/vendors/plugins/_mixins.scss

@@ -2,4 +2,4 @@
 // Mixins
 //
 
-@import "mixins/nouislider";
+@use "mixins/nouislider";

package/dist/assets/sass/core/vendors/plugins/_plugins.angular.scss

@@ -3,10 +3,10 @@
 //
 
 // Import Dependencies
-@import "root";
-@import "prismjs";
-@import "nouislider";
-@import "apexcharts";
-@import "fslightbox";
-@import "tiny-slider";
-@import "fullcalendar";
+@use "root";
+@use "prismjs";
+@use "nouislider";
+@use "apexcharts";
+@use "fslightbox";
+@use "tiny-slider";
+@use "fullcalendar";

package/dist/assets/sass/core/vendors/plugins/_plugins.react.scss

@@ -3,10 +3,10 @@
 //
 
 // Import Dependencies
-@import "root";
-@import "prismjs";
-@import "nouislider";
-@import "apexcharts";
-@import "fslightbox";
-@import "tiny-slider";
-@import "fullcalendar";
+@use "root";
+@use "prismjs";
+@use "nouislider";
+@use "apexcharts";
+@use "fslightbox";
+@use "tiny-slider";
+@use "fullcalendar";

package/dist/assets/sass/core/vendors/plugins/_plugins.scss

@@ -3,32 +3,32 @@
 //
 
 // Import Dependencies
-@import "root";
-@import "prismjs";
-@import "fslightbox";
-@import "select2";
-@import "formvalidation";
-@import "daterangepicker";
-@import "flatpickr";
-@import "tagify";
-@import "bootstrap-maxlength";
-@import "ckeditor";
-@import "datatables";
-@import "dropzone";
-@import "gmaps";
-@import "nouislider";
-@import "quill";
-@import "recaptcha";
-@import "sweetalert2";
-@import "tinymce";
-@import "toastr";
-@import "draggable";
-@import "apexcharts";
-@import "leaflet";
-@import "tiny-slider";
-@import "fullcalendar";
-@import "jkanban";
-@import "jstree";
-@import "vis-timeline";
-@import "tempus-dominus";
-@import "keenicons";
+@use "root";
+@use "prismjs";
+@use "fslightbox";
+@use "select2";
+@use "formvalidation";
+@use "daterangepicker";
+@use "flatpickr";
+@use "tagify";
+@use "bootstrap-maxlength";
+@use "ckeditor";
+@use "datatables";
+@use "dropzone";
+@use "gmaps";
+@use "nouislider";
+@use "quill";
+@use "recaptcha";
+@use "sweetalert2";
+@use "tinymce";
+@use "toastr";
+@use "draggable";
+@use "apexcharts";
+@use "leaflet";
+@use "tiny-slider";
+@use "fullcalendar";
+@use "jkanban";
+@use "jstree";
+@use "vis-timeline";
+@use "tempus-dominus";
+@use "keenicons";

package/dist/assets/sass/core/vendors/plugins/_plugins.vue.scss

@@ -3,10 +3,10 @@
 //
 
 // Import Dependencies
-@import "root";
-@import "prismjs";
-@import "nouislider";
-@import "apexcharts";
-@import "fslightbox";
-@import "tiny-slider";
-@import "fullcalendar";
+@use "root";
+@use "prismjs";
+@use "nouislider";
+@use "apexcharts";
+@use "fslightbox";
+@use "tiny-slider";
+@use "fullcalendar";

package/dist/assets/sass/core/vendors/plugins/_variables-dark.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // 3rd-party config
 //
@@ -8,11 +9,11 @@ $prismjs-bg-dark: #151521;
 
 $prismjs-border-dark: rgba($white, 0.1);
 
-$prismjs-btn-bg-dark: lighten($prismjs-bg-dark, 9%);
-$prismjs-btn-bg-hover-dark: lighten($prismjs-bg-dark, 9%);
+$prismjs-btn-bg-dark: color.adjust($prismjs-bg-dark, $lightness: 9%);
+$prismjs-btn-bg-hover-dark: color.adjust($prismjs-bg-dark, $lightness: 9%);
 
 $prismjs-btn-color-dark: rgba($white, 0.75);
 $prismjs-btn-color-hover-dark: $primary;
 
-$prismjs-scrollbar-color-dark: lighten($prismjs-bg-dark, 12%);
-$prismjs-scrollbar-color-hover-dark: lighten($prismjs-bg-dark, 15%);
+$prismjs-scrollbar-color-dark: color.adjust($prismjs-bg-dark, $lightness: 12%);
+$prismjs-scrollbar-color-hover-dark: color.adjust($prismjs-bg-dark, $lightness: 15%);

package/dist/assets/sass/core/vendors/plugins/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // 3rd-party config
 //
@@ -8,14 +9,14 @@ $prismjs-bg: #1e1e3f;
 
 $prismjs-border: rgba($white, 0.1);
 
-$prismjs-btn-bg: lighten($prismjs-bg, 9%);
-$prismjs-btn-bg-hover: lighten($prismjs-bg, 9%);
+$prismjs-btn-bg: color.adjust($prismjs-bg, $lightness: 9%);
+$prismjs-btn-bg-hover: color.adjust($prismjs-bg, $lightness: 9%);
 
 $prismjs-btn-color: rgba($white, 0.75);
 $prismjs-btn-color-hover: $primary;
 
-$prismjs-scrollbar-color: lighten($prismjs-bg, 12%);
-$prismjs-scrollbar-color-hover: lighten($prismjs-bg, 15%);
+$prismjs-scrollbar-color: color.adjust($prismjs-bg, $lightness: 12%);
+$prismjs-scrollbar-color-hover: color.adjust($prismjs-bg, $lightness: 15%);
 
 // Bootstrap Maxlength
 $bootstrap-maxlength-z-index: 1040;

package/dist/assets/sass/layout/_layout.scss

@@ -2,16 +2,16 @@
 // Layout
 //
 
-@import "root";
-@import "sidebar/sidebar";
-@import "sidebar/sidebar-minimize";
-@import "sidebar/sidebar-dark";
-@import "sidebar/sidebar-light";
-@import "aside";
-@import "header/header";
-@import "header/header-dark";
-@import "header/header-sidebar-light";
-@import "content";
-@import "toolbar";
-@import "main";
-@import "page-title";
+@use "root";
+@use "sidebar/sidebar";
+@use "sidebar/sidebar-minimize";
+@use "sidebar/sidebar-dark";
+@use "sidebar/sidebar-light";
+@use "aside";
+@use "header/header";
+@use "header/header-dark";
+@use "header/header-sidebar-light";
+@use "content";
+@use "toolbar";
+@use "main";
+@use "page-title";

package/dist/assets/sass/layout/_variables.custom.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //
 // Variables
 //
@@ -43,7 +44,7 @@ $app-header-light-separator-color-dark: $border-color-dark;
 $app-header-dark-bg-color:$coal-600;
 $app-header-dark-separator-color: #282a3d;
 $app-header-dark-scrollbar-color: #3b3b64;
-$app-header-dark-scrollbar-color-hover: lighten($app-header-dark-scrollbar-color, 3%);
+$app-header-dark-scrollbar-color-hover: color.adjust($app-header-dark-scrollbar-color, $lightness: 3%);
 $app-header-dark-menu-active-link-bg-color: #242424;
 
 // Sidebar base
@@ -88,7 +89,7 @@ $app-sidebar-light-header-menu-link-bg-color-active-dark: $gray-100-dark;
 // Sidebar dark
 $app-sidebar-dark-bg-color: $coal-500;
 $app-sidebar-dark-separator-color: $light-light-dark;
-$app-sidebar-dark-scrollbar-color-hover: lighten($app-sidebar-dark-separator-color, 2%);
+$app-sidebar-dark-scrollbar-color-hover: color.adjust($app-sidebar-dark-separator-color, $lightness: 2%);
 $app-sidebar-dark-menu-heading-color: $gray-500-dark;
 $app-sidebar-dark-menu-sub-link-color: $gray-600-dark;;
 $app-sidebar-dark-menu-link-bg-color-active: #1C1C21;

package/dist/assets/sass/style.react.scss

@@ -17,12 +17,16 @@
 ////////////////////////////////////////////////////////////////
 
 // Initialize
-@import "init";
+// Asumimos que 'init' no expone miembros para ser usados con prefijo, o que Metronic los espera globales.
+// Si expone mixins/variables que usas directamente en otros archivos sin prefijo, podrías necesitar `as *`.
+@use "init"; 
 
 // Plugins
-@import "./core/vendors/plugins/plugins";
-@import "vendors/react-select.scss";
+// Similar al anterior, si no usas explícitamente sus miembros con prefijo.
+// 'react-select.scss' es un buen candidato para usar `as *` si sus estilos no tienen prefijos únicos.
+@use "./core/vendors/plugins/plugins";
+@use "vendors/react-select.scss" as *; // Usamos `as *` para importar sus estilos sin prefijo.
 
 #root {
   display: contents;
-}
+}

package/dist/assets/sass/style.scss

@@ -3,12 +3,12 @@
 //
 
 // Initialize
-@import "init";
+@use "init"; // Cambiado de @import "init";
 
 // Components
-@import "./core/components/components";
-@import "components/components";
+@use "./core/components/components"; // Cambiado de @import "./core/components/components";
+@use "components/components"; // Cambiado de @import "components/components";
 
 // Layout
-@import "./core/layout/base/layout";
-@import "layout/layout";
+@use "./core/layout/base/layout"; // Cambiado de @import "./core/layout/base/layout";
+@use "layout/layout"; // Cambiado de @import "layout/layout";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soyfri/template",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Metronic template components and utilities for Fri projects",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,6 +12,7 @@
     "build": "tsc && npm run assets",
     "assets": "cp -r _metronic/assets dist/",
     "prepare": "npm run build",
+    "migrate-scss": "node migrate-scss.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -35,35 +36,36 @@
     "react-dom": ">=19.0.0"
   },
   "dependencies": {
+    "@formatjs/intl-pluralrules": "^5.2.14",
+    "@formatjs/intl-relativetimeformat": "^11.2.14",
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "animate.css": "^4.1.1",
     "apexcharts": "^4.7.0",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "clsx": "^2.1.1",
+    "line-awesome": "^1.3.0",
+    "nouislider": "^15.8.1",
     "or": "^0.2.0",
     "prism-react-renderer": "^2.4.0",
+    "prism-themes": "^1.9.0",
     "qs": "^6.13.0",
     "react-apexcharts": "^1.7.0",
     "react-bootstrap": "^2.10.5",
     "react-inlinesvg": "^4.2.0",
     "react-intl": "^7.1.11",
     "react-router-dom": "^6.28.0",
-    "socicon": "^3.0.5",
-    "@fortawesome/fontawesome-free": "^6.6.0",
-    "line-awesome": "^1.3.0",
-    "prism-themes": "^1.9.0",
-    "animate.css": "^4.1.1",
-    "nouislider": "^15.8.1",
-    "@formatjs/intl-pluralrules": "^5.2.14",
-    "@formatjs/intl-relativetimeformat": "^11.2.14"
+    "socicon": "^3.0.5"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.2.10",
+    "@types/qs": "^6.9.17",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
-    "typescript": "^5.7.2",
-    "@types/qs": "^6.9.17"
+    "sass": "^1.89.2",
+    "typescript": "^5.7.2"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}