@syncfusion/ej2-react-layouts 31.2.12 → 32.1.24

package/README.md

@@ -141,4 +141,4 @@ Check the license detail [here](https://github.com/syncfusion/ej2-react-ui-compo
 
 Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/layouts/CHANGELOG.md/?utm_source=npm&utm_medium=listing&utm_campaign=react-layout-npm)
 
-© Copyright 2025 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.
+© Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.

package/dist/ej2-react-layouts.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-layouts.min.js
-*  version : 31.2.12
+*  version : 32.1.24
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/dist/ej2-react-layouts.umd.min.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-react-layouts.umd.min.js
-*  version : 31.2.12
+*  version : 32.1.24
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-react-layouts",
-  "version": "31.2.12",
+  "version": "32.1.24",
   "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person. for React",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -22,9 +22,9 @@
   "es2015": "dist/es6/ej2-react-layouts.es2015.js",
   "readme": "ReadMe.md",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.12",
-    "@syncfusion/ej2-react-base": "~31.2.12",
-    "@syncfusion/ej2-layouts": "31.2.12"
+    "@syncfusion/ej2-base": "~32.1.24",
+    "@syncfusion/ej2-react-base": "~32.1.24",
+    "@syncfusion/ej2-layouts": "32.1.24"
   },
   "devDependencies": {},
   "sideEffects": false,

package/styles/avatar/bds.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/bds.scss';
+@use 'ej2-layouts/styles/avatar/bds' as *;

package/styles/avatar/bootstrap-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/bootstrap-dark.scss';
+@use 'ej2-layouts/styles/avatar/bootstrap-dark' as *;

package/styles/avatar/bootstrap.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/bootstrap.scss';
+@use 'ej2-layouts/styles/avatar/bootstrap' as *;

package/styles/avatar/bootstrap4.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/bootstrap4.scss';
+@use 'ej2-layouts/styles/avatar/bootstrap4' as *;

package/styles/avatar/bootstrap5-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/bootstrap5-dark.scss';
+@use 'ej2-layouts/styles/avatar/bootstrap5-dark' as *;

package/styles/avatar/bootstrap5.3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/bootstrap5.3.scss';
+@use 'ej2-layouts/styles/avatar/bootstrap5.3' as *;

package/styles/avatar/bootstrap5.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/bootstrap5.scss';
+@use 'ej2-layouts/styles/avatar/bootstrap5' as *;

package/styles/avatar/fabric-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/fabric-dark.scss';
+@use 'ej2-layouts/styles/avatar/fabric-dark' as *;

package/styles/avatar/fabric.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/fabric.scss';
+@use 'ej2-layouts/styles/avatar/fabric' as *;

package/styles/avatar/fluent-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/fluent-dark.scss';
+@use 'ej2-layouts/styles/avatar/fluent-dark' as *;

package/styles/avatar/fluent.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/fluent.scss';
+@use 'ej2-layouts/styles/avatar/fluent' as *;

package/styles/avatar/fluent2.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/fluent2.scss';
+@use 'ej2-layouts/styles/avatar/fluent2' as *;

package/styles/avatar/highcontrast-light.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/highcontrast-light.scss';
+@use 'ej2-layouts/styles/avatar/highcontrast-light' as *;

package/styles/avatar/highcontrast.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/highcontrast.scss';
+@use 'ej2-layouts/styles/avatar/highcontrast' as *;

package/styles/avatar/material-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/material-dark.scss';
+@use 'ej2-layouts/styles/avatar/material-dark' as *;

package/styles/avatar/material.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/material.scss';
+@use 'ej2-layouts/styles/avatar/material' as *;

package/styles/avatar/material3-dark.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/avatar/material3-dark.scss';
+@use 'ej2-layouts/styles/avatar/material3-dark' as *;

package/styles/avatar/material3.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/avatar/material3.scss';
+@use 'ej2-layouts/styles/avatar/material3' as *;

package/styles/avatar/tailwind-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/tailwind-dark.scss';
+@use 'ej2-layouts/styles/avatar/tailwind-dark' as *;

package/styles/avatar/tailwind.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/tailwind.scss';
+@use 'ej2-layouts/styles/avatar/tailwind' as *;

package/styles/avatar/tailwind3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/avatar/tailwind3.scss';
+@use 'ej2-layouts/styles/avatar/tailwind3' as *;

package/styles/bds-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/bds-lite.scss';
+@use 'ej2-layouts/bds-lite' as *;

package/styles/bds.scss

@@ -1,5 +1,5 @@
-@import 'avatar/bds.scss';
-@import 'card/bds.scss';
-@import 'splitter/bds.scss';
-@import 'dashboard-layout/bds.scss';
-@import 'timeline/bds.scss';
+@use 'avatar/bds' as *;
+@use 'card/bds' as *;
+@use 'splitter/bds' as *;
+@use 'dashboard-layout/bds' as *;
+@use 'timeline/bds' as *;

package/styles/bootstrap-dark-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/bootstrap-dark-lite.scss';
+@use 'ej2-layouts/bootstrap-dark-lite' as *;

package/styles/bootstrap-dark.scss

@@ -1,5 +1,5 @@
-@import 'avatar/bootstrap-dark.scss';
-@import 'card/bootstrap-dark.scss';
-@import 'splitter/bootstrap-dark.scss';
-@import 'dashboard-layout/bootstrap-dark.scss';
-@import 'timeline/bootstrap-dark.scss';
+@use 'avatar/bootstrap-dark' as *;
+@use 'card/bootstrap-dark' as *;
+@use 'splitter/bootstrap-dark' as *;
+@use 'dashboard-layout/bootstrap-dark' as *;
+@use 'timeline/bootstrap-dark' as *;

package/styles/bootstrap-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/bootstrap-lite.scss';
+@use 'ej2-layouts/bootstrap-lite' as *;

package/styles/bootstrap.scss

@@ -1,5 +1,5 @@
-@import 'avatar/bootstrap.scss';
-@import 'card/bootstrap.scss';
-@import 'splitter/bootstrap.scss';
-@import 'dashboard-layout/bootstrap.scss';
-@import 'timeline/bootstrap.scss';
+@use 'avatar/bootstrap' as *;
+@use 'card/bootstrap' as *;
+@use 'splitter/bootstrap' as *;
+@use 'dashboard-layout/bootstrap' as *;
+@use 'timeline/bootstrap' as *;

package/styles/bootstrap4-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/bootstrap4-lite.scss';
+@use 'ej2-layouts/bootstrap4-lite' as *;

package/styles/bootstrap4.scss

@@ -1,5 +1,5 @@
-@import 'avatar/bootstrap4.scss';
-@import 'card/bootstrap4.scss';
-@import 'splitter/bootstrap4.scss';
-@import 'dashboard-layout/bootstrap4.scss';
-@import 'timeline/bootstrap4.scss';
+@use 'avatar/bootstrap4' as *;
+@use 'card/bootstrap4' as *;
+@use 'splitter/bootstrap4' as *;
+@use 'dashboard-layout/bootstrap4' as *;
+@use 'timeline/bootstrap4' as *;

package/styles/bootstrap5-dark-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/bootstrap5-dark-lite.scss';
+@use 'ej2-layouts/bootstrap5-dark-lite' as *;

package/styles/bootstrap5-dark.scss

@@ -1,5 +1,5 @@
-@import 'avatar/bootstrap5-dark.scss';
-@import 'card/bootstrap5-dark.scss';
-@import 'splitter/bootstrap5-dark.scss';
-@import 'dashboard-layout/bootstrap5-dark.scss';
-@import 'timeline/bootstrap5-dark.scss';
+@use 'avatar/bootstrap5-dark' as *;
+@use 'card/bootstrap5-dark' as *;
+@use 'splitter/bootstrap5-dark' as *;
+@use 'dashboard-layout/bootstrap5-dark' as *;
+@use 'timeline/bootstrap5-dark' as *;

package/styles/bootstrap5-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/bootstrap5-lite.scss';
+@use 'ej2-layouts/bootstrap5-lite' as *;

package/styles/bootstrap5.3-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/bootstrap5.3-lite.scss';
+@use 'ej2-layouts/bootstrap5.3-lite' as *;

package/styles/bootstrap5.3.scss

@@ -1,5 +1,5 @@
-@import 'avatar/bootstrap5.3.scss';
-@import 'card/bootstrap5.3.scss';
-@import 'splitter/bootstrap5.3.scss';
-@import 'dashboard-layout/bootstrap5.3.scss';
-@import 'timeline/bootstrap5.3.scss';
+@use 'avatar/bootstrap5.3' as *;
+@use 'card/bootstrap5.3' as *;
+@use 'splitter/bootstrap5.3' as *;
+@use 'dashboard-layout/bootstrap5.3' as *;
+@use 'timeline/bootstrap5.3' as *;

package/styles/bootstrap5.scss

@@ -1,5 +1,5 @@
-@import 'avatar/bootstrap5.scss';
-@import 'card/bootstrap5.scss';
-@import 'splitter/bootstrap5.scss';
-@import 'dashboard-layout/bootstrap5.scss';
-@import 'timeline/bootstrap5.scss';
+@use 'avatar/bootstrap5' as *;
+@use 'card/bootstrap5' as *;
+@use 'splitter/bootstrap5' as *;
+@use 'dashboard-layout/bootstrap5' as *;
+@use 'timeline/bootstrap5' as *;

package/styles/card/bds.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/bds.scss';
+@use 'ej2-layouts/styles/card/bds' as *;

package/styles/card/bootstrap-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/bootstrap-dark.scss';
+@use 'ej2-layouts/styles/card/bootstrap-dark' as *;

package/styles/card/bootstrap.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/bootstrap.scss';
+@use 'ej2-layouts/styles/card/bootstrap' as *;

package/styles/card/bootstrap4.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/bootstrap4.scss';
+@use 'ej2-layouts/styles/card/bootstrap4' as *;

package/styles/card/bootstrap5-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/bootstrap5-dark.scss';
+@use 'ej2-layouts/styles/card/bootstrap5-dark' as *;

package/styles/card/bootstrap5.3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/bootstrap5.3.scss';
+@use 'ej2-layouts/styles/card/bootstrap5.3' as *;

package/styles/card/bootstrap5.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/bootstrap5.scss';
+@use 'ej2-layouts/styles/card/bootstrap5' as *;

package/styles/card/fabric-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/fabric-dark.scss';
+@use 'ej2-layouts/styles/card/fabric-dark' as *;

package/styles/card/fabric.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/fabric.scss';
+@use 'ej2-layouts/styles/card/fabric' as *;

package/styles/card/fluent-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/fluent-dark.scss';
+@use 'ej2-layouts/styles/card/fluent-dark' as *;

package/styles/card/fluent.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/fluent.scss';
+@use 'ej2-layouts/styles/card/fluent' as *;

package/styles/card/fluent2.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/fluent2.scss';
+@use 'ej2-layouts/styles/card/fluent2' as *;

package/styles/card/highcontrast-light.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/highcontrast-light.scss';
+@use 'ej2-layouts/styles/card/highcontrast-light' as *;

package/styles/card/highcontrast.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/highcontrast.scss';
+@use 'ej2-layouts/styles/card/highcontrast' as *;

package/styles/card/material-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/material-dark.scss';
+@use 'ej2-layouts/styles/card/material-dark' as *;

package/styles/card/material.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/material.scss';
+@use 'ej2-layouts/styles/card/material' as *;

package/styles/card/material3-dark.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/card/material3-dark.scss';
+@use 'ej2-layouts/styles/card/material3-dark' as *;

package/styles/card/material3.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/card/material3.scss';
+@use 'ej2-layouts/styles/card/material3' as *;

package/styles/card/tailwind-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/tailwind-dark.scss';
+@use 'ej2-layouts/styles/card/tailwind-dark' as *;

package/styles/card/tailwind.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/tailwind.scss';
+@use 'ej2-layouts/styles/card/tailwind' as *;

package/styles/card/tailwind3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/card/tailwind3.scss';
+@use 'ej2-layouts/styles/card/tailwind3' as *;

package/styles/dashboard-layout/bds.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/bds.scss';
+@use 'ej2-layouts/styles/dashboard-layout/bds' as *;

package/styles/dashboard-layout/bootstrap-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/bootstrap-dark.scss';
+@use 'ej2-layouts/styles/dashboard-layout/bootstrap-dark' as *;

package/styles/dashboard-layout/bootstrap.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/bootstrap.scss';
+@use 'ej2-layouts/styles/dashboard-layout/bootstrap' as *;

package/styles/dashboard-layout/bootstrap4.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/bootstrap4.scss';
+@use 'ej2-layouts/styles/dashboard-layout/bootstrap4' as *;

package/styles/dashboard-layout/bootstrap5-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/bootstrap5-dark.scss';
+@use 'ej2-layouts/styles/dashboard-layout/bootstrap5-dark' as *;

package/styles/dashboard-layout/bootstrap5.3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/bootstrap5.3.scss';
+@use 'ej2-layouts/styles/dashboard-layout/bootstrap5.3' as *;

package/styles/dashboard-layout/bootstrap5.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/bootstrap5.scss';
+@use 'ej2-layouts/styles/dashboard-layout/bootstrap5' as *;

package/styles/dashboard-layout/fabric-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/fabric-dark.scss';
+@use 'ej2-layouts/styles/dashboard-layout/fabric-dark' as *;

package/styles/dashboard-layout/fabric.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/fabric.scss';
+@use 'ej2-layouts/styles/dashboard-layout/fabric' as *;

package/styles/dashboard-layout/fluent-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/fluent-dark.scss';
+@use 'ej2-layouts/styles/dashboard-layout/fluent-dark' as *;

package/styles/dashboard-layout/fluent.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/fluent.scss';
+@use 'ej2-layouts/styles/dashboard-layout/fluent' as *;

package/styles/dashboard-layout/fluent2.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/fluent2.scss';
+@use 'ej2-layouts/styles/dashboard-layout/fluent2' as *;

package/styles/dashboard-layout/highcontrast-light.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/highcontrast-light.scss';
+@use 'ej2-layouts/styles/dashboard-layout/highcontrast-light' as *;

package/styles/dashboard-layout/highcontrast.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/highcontrast.scss';
+@use 'ej2-layouts/styles/dashboard-layout/highcontrast' as *;

package/styles/dashboard-layout/material-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/material-dark.scss';
+@use 'ej2-layouts/styles/dashboard-layout/material-dark' as *;

package/styles/dashboard-layout/material.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/material.scss';
+@use 'ej2-layouts/styles/dashboard-layout/material' as *;

package/styles/dashboard-layout/material3-dark.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/dashboard-layout/material3-dark.scss';
+@use 'ej2-layouts/styles/dashboard-layout/material3-dark' as *;

package/styles/dashboard-layout/material3.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/dashboard-layout/material3.scss';
+@use 'ej2-layouts/styles/dashboard-layout/material3' as *;

package/styles/dashboard-layout/tailwind-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/tailwind-dark.scss';
+@use 'ej2-layouts/styles/dashboard-layout/tailwind-dark' as *;

package/styles/dashboard-layout/tailwind.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/tailwind.scss';
+@use 'ej2-layouts/styles/dashboard-layout/tailwind' as *;

package/styles/dashboard-layout/tailwind3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/dashboard-layout/tailwind3.scss';
+@use 'ej2-layouts/styles/dashboard-layout/tailwind3' as *;

package/styles/fabric-dark-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/fabric-dark-lite.scss';
+@use 'ej2-layouts/fabric-dark-lite' as *;

package/styles/fabric-dark.scss

@@ -1,5 +1,5 @@
-@import 'avatar/fabric-dark.scss';
-@import 'card/fabric-dark.scss';
-@import 'splitter/fabric-dark.scss';
-@import 'dashboard-layout/fabric-dark.scss';
-@import 'timeline/fabric-dark.scss';
+@use 'avatar/fabric-dark' as *;
+@use 'card/fabric-dark' as *;
+@use 'splitter/fabric-dark' as *;
+@use 'dashboard-layout/fabric-dark' as *;
+@use 'timeline/fabric-dark' as *;

package/styles/fabric-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/fabric-lite.scss';
+@use 'ej2-layouts/fabric-lite' as *;

package/styles/fabric.scss

@@ -1,5 +1,5 @@
-@import 'avatar/fabric.scss';
-@import 'card/fabric.scss';
-@import 'splitter/fabric.scss';
-@import 'dashboard-layout/fabric.scss';
-@import 'timeline/fabric.scss';
+@use 'avatar/fabric' as *;
+@use 'card/fabric' as *;
+@use 'splitter/fabric' as *;
+@use 'dashboard-layout/fabric' as *;
+@use 'timeline/fabric' as *;

package/styles/fluent-dark-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/fluent-dark-lite.scss';
+@use 'ej2-layouts/fluent-dark-lite' as *;

package/styles/fluent-dark.scss

@@ -1,5 +1,5 @@
-@import 'avatar/fluent-dark.scss';
-@import 'card/fluent-dark.scss';
-@import 'splitter/fluent-dark.scss';
-@import 'dashboard-layout/fluent-dark.scss';
-@import 'timeline/fluent-dark.scss';
+@use 'avatar/fluent-dark' as *;
+@use 'card/fluent-dark' as *;
+@use 'splitter/fluent-dark' as *;
+@use 'dashboard-layout/fluent-dark' as *;
+@use 'timeline/fluent-dark' as *;

package/styles/fluent-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/fluent-lite.scss';
+@use 'ej2-layouts/fluent-lite' as *;

package/styles/fluent.scss

@@ -1,5 +1,5 @@
-@import 'avatar/fluent.scss';
-@import 'card/fluent.scss';
-@import 'splitter/fluent.scss';
-@import 'dashboard-layout/fluent.scss';
-@import 'timeline/fluent.scss';
+@use 'avatar/fluent' as *;
+@use 'card/fluent' as *;
+@use 'splitter/fluent' as *;
+@use 'dashboard-layout/fluent' as *;
+@use 'timeline/fluent' as *;

package/styles/fluent2-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/fluent2-lite.scss';
+@use 'ej2-layouts/fluent2-lite' as *;

package/styles/fluent2.scss

@@ -1,5 +1,5 @@
-@import 'avatar/fluent2.scss';
-@import 'card/fluent2.scss';
-@import 'splitter/fluent2.scss';
-@import 'dashboard-layout/fluent2.scss';
-@import 'timeline/fluent2.scss';
+@use 'avatar/fluent2' as *;
+@use 'card/fluent2' as *;
+@use 'splitter/fluent2' as *;
+@use 'dashboard-layout/fluent2' as *;
+@use 'timeline/fluent2' as *;

package/styles/highcontrast-light-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/highcontrast-light-lite.scss';
+@use 'ej2-layouts/highcontrast-light-lite' as *;

package/styles/highcontrast-light.scss

@@ -1,5 +1,5 @@
-@import 'avatar/highcontrast-light.scss';
-@import 'card/highcontrast-light.scss';
-@import 'splitter/highcontrast-light.scss';
-@import 'dashboard-layout/highcontrast-light.scss';
-@import 'timeline/highcontrast-light.scss';
+@use 'avatar/highcontrast-light' as *;
+@use 'card/highcontrast-light' as *;
+@use 'splitter/highcontrast-light' as *;
+@use 'dashboard-layout/highcontrast-light' as *;
+@use 'timeline/highcontrast-light' as *;

package/styles/highcontrast-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/highcontrast-lite.scss';
+@use 'ej2-layouts/highcontrast-lite' as *;

package/styles/highcontrast.scss

@@ -1,5 +1,5 @@
-@import 'avatar/highcontrast.scss';
-@import 'card/highcontrast.scss';
-@import 'splitter/highcontrast.scss';
-@import 'dashboard-layout/highcontrast.scss';
-@import 'timeline/highcontrast.scss';
+@use 'avatar/highcontrast' as *;
+@use 'card/highcontrast' as *;
+@use 'splitter/highcontrast' as *;
+@use 'dashboard-layout/highcontrast' as *;
+@use 'timeline/highcontrast' as *;

package/styles/material-dark-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/material-dark-lite.scss';
+@use 'ej2-layouts/material-dark-lite' as *;

package/styles/material-dark.scss

@@ -1,5 +1,5 @@
-@import 'avatar/material-dark.scss';
-@import 'card/material-dark.scss';
-@import 'splitter/material-dark.scss';
-@import 'dashboard-layout/material-dark.scss';
-@import 'timeline/material-dark.scss';
+@use 'avatar/material-dark' as *;
+@use 'card/material-dark' as *;
+@use 'splitter/material-dark' as *;
+@use 'dashboard-layout/material-dark' as *;
+@use 'timeline/material-dark' as *;

package/styles/material-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/material-lite.scss';
+@use 'ej2-layouts/material-lite' as *;

package/styles/material.scss

@@ -1,5 +1,5 @@
-@import 'avatar/material.scss';
-@import 'card/material.scss';
-@import 'splitter/material.scss';
-@import 'dashboard-layout/material.scss';
-@import 'timeline/material.scss';
+@use 'avatar/material' as *;
+@use 'card/material' as *;
+@use 'splitter/material' as *;
+@use 'dashboard-layout/material' as *;
+@use 'timeline/material' as *;

package/styles/material3-dark-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/material3-dark-lite.scss';
+@use 'ej2-layouts/material3-dark-lite' as *;

package/styles/material3-dark.scss

@@ -1,6 +1,5 @@
-
-@import 'avatar/material3-dark.scss';
-@import 'card/material3-dark.scss';
-@import 'splitter/material3-dark.scss';
-@import 'dashboard-layout/material3-dark.scss';
-@import 'timeline/material3-dark.scss';
+@use 'avatar/material3-dark' as *;
+@use 'card/material3-dark' as *;
+@use 'splitter/material3-dark' as *;
+@use 'dashboard-layout/material3-dark' as *;
+@use 'timeline/material3-dark' as *;

package/styles/material3-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/material3-lite.scss';
+@use 'ej2-layouts/material3-lite' as *;

package/styles/material3.scss

@@ -1,6 +1,5 @@
-
-@import 'avatar/material3.scss';
-@import 'card/material3.scss';
-@import 'splitter/material3.scss';
-@import 'dashboard-layout/material3.scss';
-@import 'timeline/material3.scss';
+@use 'avatar/material3' as *;
+@use 'card/material3' as *;
+@use 'splitter/material3' as *;
+@use 'dashboard-layout/material3' as *;
+@use 'timeline/material3' as *;

package/styles/splitter/bds.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/bds.scss';
+@use 'ej2-layouts/styles/splitter/bds' as *;

package/styles/splitter/bootstrap-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/bootstrap-dark.scss';
+@use 'ej2-layouts/styles/splitter/bootstrap-dark' as *;

package/styles/splitter/bootstrap.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/bootstrap.scss';
+@use 'ej2-layouts/styles/splitter/bootstrap' as *;

package/styles/splitter/bootstrap4.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/bootstrap4.scss';
+@use 'ej2-layouts/styles/splitter/bootstrap4' as *;

package/styles/splitter/bootstrap5-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/bootstrap5-dark.scss';
+@use 'ej2-layouts/styles/splitter/bootstrap5-dark' as *;

package/styles/splitter/bootstrap5.3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/bootstrap5.3.scss';
+@use 'ej2-layouts/styles/splitter/bootstrap5.3' as *;

package/styles/splitter/bootstrap5.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/bootstrap5.scss';
+@use 'ej2-layouts/styles/splitter/bootstrap5' as *;

package/styles/splitter/fabric-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/fabric-dark.scss';
+@use 'ej2-layouts/styles/splitter/fabric-dark' as *;

package/styles/splitter/fabric.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/fabric.scss';
+@use 'ej2-layouts/styles/splitter/fabric' as *;

package/styles/splitter/fluent-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/fluent-dark.scss';
+@use 'ej2-layouts/styles/splitter/fluent-dark' as *;

package/styles/splitter/fluent.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/fluent.scss';
+@use 'ej2-layouts/styles/splitter/fluent' as *;

package/styles/splitter/fluent2.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/fluent2.scss';
+@use 'ej2-layouts/styles/splitter/fluent2' as *;

package/styles/splitter/highcontrast-light.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/highcontrast-light.scss';
+@use 'ej2-layouts/styles/splitter/highcontrast-light' as *;

package/styles/splitter/highcontrast.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/highcontrast.scss';
+@use 'ej2-layouts/styles/splitter/highcontrast' as *;

package/styles/splitter/material-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/material-dark.scss';
+@use 'ej2-layouts/styles/splitter/material-dark' as *;

package/styles/splitter/material.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/material.scss';
+@use 'ej2-layouts/styles/splitter/material' as *;

package/styles/splitter/material3-dark.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/splitter/material3-dark.scss';
+@use 'ej2-layouts/styles/splitter/material3-dark' as *;

package/styles/splitter/material3.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/splitter/material3.scss';
+@use 'ej2-layouts/styles/splitter/material3' as *;

package/styles/splitter/tailwind-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/tailwind-dark.scss';
+@use 'ej2-layouts/styles/splitter/tailwind-dark' as *;

package/styles/splitter/tailwind.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/tailwind.scss';
+@use 'ej2-layouts/styles/splitter/tailwind' as *;

package/styles/splitter/tailwind3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/splitter/tailwind3.scss';
+@use 'ej2-layouts/styles/splitter/tailwind3' as *;

package/styles/tailwind-dark-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/tailwind-dark-lite.scss';
+@use 'ej2-layouts/tailwind-dark-lite' as *;

package/styles/tailwind-dark.scss

@@ -1,5 +1,5 @@
-@import 'avatar/tailwind-dark.scss';
-@import 'card/tailwind-dark.scss';
-@import 'splitter/tailwind-dark.scss';
-@import 'dashboard-layout/tailwind-dark.scss';
-@import 'timeline/tailwind-dark.scss';
+@use 'avatar/tailwind-dark' as *;
+@use 'card/tailwind-dark' as *;
+@use 'splitter/tailwind-dark' as *;
+@use 'dashboard-layout/tailwind-dark' as *;
+@use 'timeline/tailwind-dark' as *;

package/styles/tailwind-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/tailwind-lite.scss';
+@use 'ej2-layouts/tailwind-lite' as *;

package/styles/tailwind.scss

@@ -1,5 +1,5 @@
-@import 'avatar/tailwind.scss';
-@import 'card/tailwind.scss';
-@import 'splitter/tailwind.scss';
-@import 'dashboard-layout/tailwind.scss';
-@import 'timeline/tailwind.scss';
+@use 'avatar/tailwind' as *;
+@use 'card/tailwind' as *;
+@use 'splitter/tailwind' as *;
+@use 'dashboard-layout/tailwind' as *;
+@use 'timeline/tailwind' as *;

package/styles/tailwind3-lite.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/tailwind3-lite.scss';
+@use 'ej2-layouts/tailwind3-lite' as *;

package/styles/tailwind3.scss

@@ -1,5 +1,5 @@
-@import 'avatar/tailwind3.scss';
-@import 'card/tailwind3.scss';
-@import 'splitter/tailwind3.scss';
-@import 'dashboard-layout/tailwind3.scss';
-@import 'timeline/tailwind3.scss';
+@use 'avatar/tailwind3' as *;
+@use 'card/tailwind3' as *;
+@use 'splitter/tailwind3' as *;
+@use 'dashboard-layout/tailwind3' as *;
+@use 'timeline/tailwind3' as *;

package/styles/timeline/bds.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/bds.scss';
+@use 'ej2-layouts/styles/timeline/bds' as *;

package/styles/timeline/bootstrap-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/bootstrap-dark.scss';
+@use 'ej2-layouts/styles/timeline/bootstrap-dark' as *;

package/styles/timeline/bootstrap.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/bootstrap.scss';
+@use 'ej2-layouts/styles/timeline/bootstrap' as *;

package/styles/timeline/bootstrap4.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/bootstrap4.scss';
+@use 'ej2-layouts/styles/timeline/bootstrap4' as *;

package/styles/timeline/bootstrap5-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/bootstrap5-dark.scss';
+@use 'ej2-layouts/styles/timeline/bootstrap5-dark' as *;

package/styles/timeline/bootstrap5.3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/bootstrap5.3.scss';
+@use 'ej2-layouts/styles/timeline/bootstrap5.3' as *;

package/styles/timeline/bootstrap5.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/bootstrap5.scss';
+@use 'ej2-layouts/styles/timeline/bootstrap5' as *;

package/styles/timeline/fabric-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/fabric-dark.scss';
+@use 'ej2-layouts/styles/timeline/fabric-dark' as *;

package/styles/timeline/fabric.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/fabric.scss';
+@use 'ej2-layouts/styles/timeline/fabric' as *;

package/styles/timeline/fluent-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/fluent-dark.scss';
+@use 'ej2-layouts/styles/timeline/fluent-dark' as *;

package/styles/timeline/fluent.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/fluent.scss';
+@use 'ej2-layouts/styles/timeline/fluent' as *;

package/styles/timeline/fluent2.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/fluent2.scss';
+@use 'ej2-layouts/styles/timeline/fluent2' as *;

package/styles/timeline/highcontrast-light.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/highcontrast-light.scss';
+@use 'ej2-layouts/styles/timeline/highcontrast-light' as *;

package/styles/timeline/highcontrast.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/highcontrast.scss';
+@use 'ej2-layouts/styles/timeline/highcontrast' as *;

package/styles/timeline/material-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/material-dark.scss';
+@use 'ej2-layouts/styles/timeline/material-dark' as *;

package/styles/timeline/material.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/material.scss';
+@use 'ej2-layouts/styles/timeline/material' as *;

package/styles/timeline/material3-dark.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/timeline/material3-dark.scss';
+@use 'ej2-layouts/styles/timeline/material3-dark' as *;

package/styles/timeline/material3.scss

@@ -1,2 +1 @@
-
-@import 'ej2-layouts/styles/timeline/material3.scss';
+@use 'ej2-layouts/styles/timeline/material3' as *;

package/styles/timeline/tailwind-dark.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/tailwind-dark.scss';
+@use 'ej2-layouts/styles/timeline/tailwind-dark' as *;

package/styles/timeline/tailwind.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/tailwind.scss';
+@use 'ej2-layouts/styles/timeline/tailwind' as *;

package/styles/timeline/tailwind3.scss

@@ -1 +1 @@
-@import 'ej2-layouts/styles/timeline/tailwind3.scss';
+@use 'ej2-layouts/styles/timeline/tailwind3' as *;