Updated the meta tags for the Demo

Updated the changelog
(Dependencies) Removed ngx-markdown package, you can keep using it if you need, we will remove anything that slow us down in terms of updates
2025-12-22 16:27:08 +00:00 · 2022-11-18 11:14:00 +03:00 · 2022-11-18 11:07:04 +03:00 · 2022-11-18 09:38:54 +03:00 · 2022-11-17 13:11:55 +03:00 · 2022-11-17 13:10:53 +03:00
111 changed files with 5320 additions and 8328 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular

 ## Development server

-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

 ## Code scaffolding

--- a/angular.json
+++ b/angular.json
@@ -1,11 +1,6 @@
 {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
-    "cli": {
-        "schematicCollections": [
-            "@angular-eslint/schematics"
-        ]
-    },
    "newProjectRoot": "projects",
    "projects": {
        "fuse": {
@@ -25,7 +20,9 @@
                        "outputPath": "dist/fuse",
                        "index": "src/index.html",
                        "main": "src/main.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": [
+                            "zone.js"
+                        ],
                        "tsConfig": "tsconfig.app.json",
                        "inlineStyleLanguage": "scss",
                        "allowedCommonJsDependencies": [
@@ -35,7 +32,6 @@
                            "crypto-js/hmac-sha256",
                            "crypto-js/enc-base64",
                            "flat",
-                            "moment",
                            "quill"
                        ],
                        "assets": [
@@ -77,12 +73,6 @@
                                    "maximumError": "90kb"
                                }
                            ],
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.prod.ts"
-                                }
-                            ],
                            "outputHashing": "all"
                        },
                        "development": {
@@ -117,10 +107,11 @@
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
-                        "main": "src/test.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": [
+                            "zone.js",
+                            "zone.js/testing"
+                        ],
                        "tsConfig": "tsconfig.spec.json",
-                        "karmaConfig": "karma.conf.js",
                        "inlineStyleLanguage": "scss",
                        "assets": [
                            "src/favicon-16x16.png",
@@ -132,15 +123,6 @@
                        ],
                        "scripts": []
                    }
-                },
-                "lint": {
-                    "builder": "@angular-eslint/builder:lint",
-                    "options": {
-                        "lintFilePatterns": [
-                            "src/**/*.ts",
-                            "src/**/*.html"
-                        ]
-                    }
                }
            }
        }
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -1,45 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config)
-{
-    config.set({
-        basePath           : '',
-        frameworks         : ['jasmine', '@angular-devkit/build-angular'],
-        plugins            : [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-jasmine-html-reporter'),
-            require('karma-coverage'),
-            require('@angular-devkit/build-angular/plugins/karma')
-        ],
-        client             : {
-            jasmine     : {
-                // you can add configuration options for Jasmine here
-                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-                // for example, you can disable the random execution with `random: false`
-                // or set a specific seed with `seed: 4321`
-            },
-            clearContext: false // leave Jasmine Spec Runner output visible in browser
-        },
-        jasmineHtmlReporter: {
-            suppressAll: true // removes the duplicated traces
-        },
-        coverageReporter   : {
-            dir      : require('path').join(__dirname, './coverage/fuse'),
-            subdir   : '.',
-            reporters: [
-                {type: 'html'},
-                {type: 'text-summary'}
-            ]
-        },
-        reporters          : ['progress', 'kjhtml'],
-        port               : 9876,
-        colors             : true,
-        logLevel           : config.LOG_INFO,
-        autoWatch          : true,
-        browsers           : ['Chrome'],
-        singleRun          : false,
-        restartOnFileChange: true
-    });
-};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "fuse-angular",
-    "version": "16.0.0",
+    "version": "17.0.0",
    "description": "Fuse - Angular Admin Template and Starter Project",
    "author": "https://themeforest.net/user/srcn",
    "license": "https://themeforest.net/licenses/standard",
@@ -10,71 +10,58 @@
        "start": "ng serve",
        "build": "ng build",
        "watch": "ng build --watch --configuration development",
-        "test": "ng test",
-        "lint": "ng lint"
+        "test": "ng test"
    },
    "dependencies": {
-        "@angular/animations": "14.2.4",
-        "@angular/cdk": "14.2.3",
-        "@angular/common": "14.2.4",
-        "@angular/compiler": "14.2.4",
-        "@angular/core": "14.2.4",
-        "@angular/forms": "14.2.4",
-        "@angular/material": "14.2.3",
-        "@angular/material-luxon-adapter": "14.2.3",
-        "@angular/platform-browser": "14.2.4",
-        "@angular/platform-browser-dynamic": "14.2.4",
-        "@angular/router": "14.2.4",
+        "@angular/animations": "15.0.0",
+        "@angular/cdk": "15.0.0",
+        "@angular/common": "15.0.0",
+        "@angular/compiler": "15.0.0",
+        "@angular/core": "15.0.0",
+        "@angular/forms": "15.0.0",
+        "@angular/material": "15.0.0",
+        "@angular/material-luxon-adapter": "15.0.0",
+        "@angular/platform-browser": "15.0.0",
+        "@angular/platform-browser-dynamic": "15.0.0",
+        "@angular/router": "15.0.0",
        "@ngneat/transloco": "4.1.1",
-        "apexcharts": "3.35.5",
+        "apexcharts": "3.36.3",
        "crypto-js": "3.3.0",
        "highlight.js": "11.6.0",
        "lodash-es": "4.17.21",
-        "luxon": "3.0.4",
-        "ng-apexcharts": "1.7.1",
-        "ngx-markdown": "13.1.0",
+        "luxon": "3.1.0",
+        "ng-apexcharts": "1.7.4",
        "ngx-quill": "19.0.1",
        "perfect-scrollbar": "1.5.5",
        "quill": "1.3.7",
        "rxjs": "7.5.7",
-        "tslib": "2.4.0",
-        "zone.js": "0.11.8"
+        "tslib": "2.4.1",
+        "zone.js": "0.12.0"
    },
    "devDependencies": {
-        "@angular-devkit/build-angular": "14.2.4",
-        "@angular-eslint/builder": "14.1.2",
-        "@angular-eslint/eslint-plugin": "14.1.2",
-        "@angular-eslint/eslint-plugin-template": "14.1.2",
-        "@angular-eslint/schematics": "14.1.2",
-        "@angular-eslint/template-parser": "14.1.2",
-        "@angular/cli": "14.2.4",
-        "@angular/compiler-cli": "14.2.4",
+        "@angular-devkit/build-angular": "15.0.0",
+        "@angular/cli": "15.0.0",
+        "@angular/compiler-cli": "15.0.0",
        "@tailwindcss/line-clamp": "0.4.2",
-        "@tailwindcss/typography": "0.5.7",
+        "@tailwindcss/typography": "0.5.8",
        "@types/chroma-js": "2.1.4",
        "@types/crypto-js": "3.1.47",
        "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "4.0.3",
-        "@types/lodash": "4.14.186",
+        "@types/jasmine": "4.3.0",
+        "@types/lodash": "4.14.189",
        "@types/lodash-es": "4.17.6",
-        "@types/luxon": "3.0.1",
-        "@typescript-eslint/eslint-plugin": "5.39.0",
-        "@typescript-eslint/parser": "5.39.0",
-        "autoprefixer": "10.4.12",
+        "@types/luxon": "3.1.0",
+        "autoprefixer": "10.4.13",
        "chroma-js": "2.4.2",
-        "eslint": "8.24.0",
-        "eslint-plugin-import": "2.26.0",
-        "eslint-plugin-jsdoc": "39.3.6",
-        "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "4.3.0",
+        "jasmine-core": "4.5.0",
        "karma": "6.4.1",
        "karma-chrome-launcher": "3.1.1",
        "karma-coverage": "2.2.0",
        "karma-jasmine": "5.1.0",
        "karma-jasmine-html-reporter": "2.0.0",
        "lodash": "4.17.21",
-        "postcss": "8.4.17",
-        "tailwindcss": "3.1.8",
-        "typescript": "4.7.4"
+        "postcss": "8.4.19",
+        "tailwindcss": "3.2.4",
+        "typescript": "4.8.4"
    }
 }
--- a/src/@fuse/styles/overrides/angular-material.scss
+++ b/src/@fuse/styles/overrides/angular-material.scss
--- a/src/@fuse/styles/tailwind.scss
+++ b/src/@fuse/styles/tailwind.scss
@@ -63,11 +63,15 @@
        -webkit-text-fill-color: currentColor;
    }

+    /* Set the background and foreground colors */
    body, .dark, .light {
        @apply text-default bg-default #{'!important'};
    }

-    *, *::before, *::after {
+    /* Set the border color */
+    *,
+    ::before,
+    ::after {
        --tw-border-opacity: 1 !important;
        border-color: rgba(var(--fuse-border-rgb), var(--tw-border-opacity));

@@ -116,6 +120,7 @@
        }
    }

+    /* Set the foreground color for disabled elements */
    [disabled] * {
        @apply text-disabled #{'!important'};
    }
--- a/src/@fuse/styles/themes.scss
+++ b/src/@fuse/styles/themes.scss
@@ -1,167 +1,164 @@
-@use '@angular/material' as mat;
@use "sass:map";
+@use '@angular/material' as mat;
+@use "user-themes" as userThemes;
+
+/* Set the base colors for light themes */
+$light-base: (
+    foreground: (
+        base: #000000,
+        divider: #E2E8F0, /* slate.200 */
+        dividers: #E2E8F0, /* slate.200 */
+        disabled: #94A3B8, /* slate.400 */
+        disabled-button: #94A3B8, /* slate.400 */
+        disabled-text: #94A3B8, /* slate.400 */
+        elevation: #000000,
+        hint-text: #94A3B8, /* slate.400 */
+        secondary-text: #64748B, /* slate.500 */
+        icon: #64748B, /* slate.500 */
+        icons: #64748B, /* slate.500 */
+        mat-icon: #64748B, /* slate.500 */
+        text: #1E293B, /* slate.800 */
+        slider-min: #1E293B, /* slate.800 */
+        slider-off: #CBD5E1, /* slate.300 */
+        slider-off-active: #94A3B8 /* slate.400 */
+    ),
+    background: (
+        status-bar: #CBD5E1, /* slate.300 */
+        app-bar: #FFFFFF,
+        background: #F1F5F9, /* slate.100 */
+        hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
+        card: #FFFFFF,
+        dialog: #FFFFFF,
+        disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
+        raised-button: #FFFFFF,
+        focused-button: #64748B, /* slate.500 */
+        selected-button: #E2E8F0, /* slate.200 */
+        selected-disabled-button: #E2E8F0, /* slate.200 */
+        disabled-button-toggle: #CBD5E1, /* slate.300 */
+        unselected-chip: #E2E8F0, /* slate.200 */
+        disabled-list-option: #CBD5E1, /* slate.300 */
+        tooltip: #1E293B /* slate.800 */
+    )
+);
+
+/* Set the base colors for dark themes */
+$dark-base: (
+    foreground: (
+        base: #FFFFFF,
+        divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+        dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+        disabled: #475569, /* slate.600 */
+        disabled-button: #1E293B, /* slate.800 */
+        disabled-text: #475569, /* slate.600 */
+        elevation: #000000,
+        hint-text: #64748B, /* slate.500 */
+        secondary-text: #94A3B8, /* slate.400 */
+        icon: #F1F5F9, /* slate.100 */
+        icons: #F1F5F9, /* slate.100 */
+        mat-icon: #94A3B8, /* slate.400 */
+        text: #FFFFFF,
+        slider-min: #FFFFFF,
+        slider-off: #64748B, /* slate.500 */
+        slider-off-active: #94A3B8 /* slate.400 */
+    ),
+    background: (
+        status-bar: #0F172A, /* slate.900 */
+        app-bar: #0F172A, /* slate.900 */
+        background: #0F172A, /* slate.900 */
+        hover: rgba(255, 255, 255, 0.05),
+        card: #1E293B, /* slate.800 */
+        dialog: #1E293B, /* slate.800 */
+        disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
+        raised-button: #0F172A, /* slate.900 */
+        focused-button: #E2E8F0, /* slate.200 */
+        selected-button: rgba(255, 255, 255, 0.05),
+        selected-disabled-button: #1E293B, /* slate.800 */
+        disabled-button-toggle: #0F172A, /* slate.900 */
+        unselected-chip: #475569, /* slate.600 */
+        disabled-list-option: #E2E8F0, /* slate.200 */
+        tooltip: #64748B /* slate.500 */
+    )
+);

 /* Include the core Angular Material styles */
@include mat.core();

-/* Create a base theme without color.
-    This will globally set the density and typography for all future color themes. */
+/* Create a base theme without any color to set the density and typography */
@include mat.all-component-themes((
    color: null,
-    density: -2,
+    density: 0,
    typography: mat.define-typography-config(
        $font-family: theme('fontFamily.sans'),
-        $title: mat.define-typography-level(1.25rem, 2rem, 600),
-        $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
-        $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
-        $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
+        $headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
+        $headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
+        $headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
+        $headline-4: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+        $headline-5: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $headline-6: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $subtitle-1: mat.define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
+        $subtitle-2: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+        $body-1: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $body-2: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $caption: mat.define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
+        $button: mat.define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
+        $overline: mat.define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
    )
 ));

-/* Generate Primary, Accent and Warn palettes */
-$palettes: ();
-@each $name in (primary, accent, warn) {
-    $palettes: map.merge($palettes, (#{$name}: (
-        50: var(--fuse-#{$name}-50),
-        100: var(--fuse-#{$name}-100),
-        200: var(--fuse-#{$name}-200),
-        300: var(--fuse-#{$name}-300),
-        400: var(--fuse-#{$name}-400),
-        500: var(--fuse-#{$name}-500),
-        600: var(--fuse-#{$name}-600),
-        700: var(--fuse-#{$name}-700),
-        800: var(--fuse-#{$name}-800),
-        900: var(--fuse-#{$name}-900),
-        contrast: (
-            50: var(--fuse-on-#{$name}-50),
-            100: var(--fuse-on-#{$name}-100),
-            200: var(--fuse-on-#{$name}-200),
-            300: var(--fuse-on-#{$name}-300),
-            400: var(--fuse-on-#{$name}-400),
-            500: var(--fuse-on-#{$name}-500),
-            600: var(--fuse-on-#{$name}-600),
-            700: var(--fuse-on-#{$name}-700),
-            800: var(--fuse-on-#{$name}-800),
-            900: var(--fuse-on-#{$name}-900)
-        ),
-        default: var(--fuse-#{$name}),
-        lighter: var(--fuse-#{$name}-100),
-        darker: var(--fuse-#{$name}-700),
-        text: var(--fuse-#{$name}),
-        default-contrast: var(--fuse-on-#{$name}),
-        lighter-contrast: var(--fuse-on-#{$name}-100),
-        darker-contrast: var(--fuse-on-#{$name}-700)
-    )));
-}
+/* Loop through user themes and generate Angular Material themes */
+@each $name, $theme in userThemes.$user-themes {

-/* Generate Angular Material themes. Since we are using CSS Custom Properties,
-    we don't have to generate a separate Angular Material theme for each color
-    set. We can just create one light and one dark theme and then switch the
-    CSS Custom Properties to dynamically switch the colors. */
-body.light,
-body .light {
-    $base-light-theme: mat.define-light-theme((
+    /* Generate the palettes */
+    $palettes: ();
+    @each $name in (primary, accent, warn) {
+
+        /* Define the Angular Material theme */
+        $palette: mat.define-palette(map.get($theme, $name));
+
+        /* Replace the default colors on the defined Material palette */
+        $palette: map.merge($palette, (
+            default: map.get(map.get($theme, $name), DEFAULT),
+            lighter: map.get(map.get($theme, $name), 100),
+            darker: map.get(map.get($theme, $name), 700),
+            text: map.get(map.get($theme, $name), DEFAULT),
+            default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
+            lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100),
+            darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700)
+        ));
+
+        $palettes: map.merge($palettes, (#{$name}: $palette));
+    }
+
+    /* Define a light & dark Angular Material theme with the generated palettes */
+    $light-theme: mat.define-light-theme((
        color: ($palettes)
    ));

-    $light-theme: (
-        color: (
-            primary: map.get(map.get($base-light-theme, color), primary),
-            accent: map.get(map.get($base-light-theme, color), accent),
-            warn: map.get(map.get($base-light-theme, color), warn),
-            is-dark: map.get(map.get($base-light-theme, color), is-dark),
-            foreground: (
-                base: #000000,
-                divider: #E2E8F0, /* slate.200 */
-                dividers: #E2E8F0, /* slate.200 */
-                disabled: #94A3B8, /* slate.400 */
-                disabled-button: #94A3B8, /* slate.400 */
-                disabled-text: #94A3B8, /* slate.400 */
-                elevation: #000000,
-                hint-text: #94A3B8, /* slate.400 */
-                secondary-text: #64748B, /* slate.500 */
-                icon: #64748B, /* slate.500 */
-                icons: #64748B, /* slate.500 */
-                mat-icon: #64748B, /* slate.500 */
-                text: #1E293B, /* slate.800 */
-                slider-min: #1E293B, /* slate.800 */
-                slider-off: #CBD5E1, /* slate.300 */
-                slider-off-active: #94A3B8 /* slate.400 */
-            ),
-            background: (
-                status-bar: #CBD5E1, /* slate.300 */
-                app-bar: #FFFFFF,
-                background: #F1F5F9, /* slate.100 */
-                hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
-                card: #FFFFFF,
-                dialog: #FFFFFF,
-                disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
-                raised-button: #FFFFFF,
-                focused-button: #64748B, /* slate.500 */
-                selected-button: #E2E8F0, /* slate.200 */
-                selected-disabled-button: #E2E8F0, /* slate.200 */
-                disabled-button-toggle: #CBD5E1, /* slate.300 */
-                unselected-chip: #E2E8F0, /* slate.200 */
-                disabled-list-option: #CBD5E1, /* slate.300 */
-                tooltip: #1E293B /* slate.800 */
-            )
-        )
-    );
-
-    /* Use all-component-colors to only generate the colors */
-    @include mat.all-component-colors($light-theme);
-}
-
-body.dark,
-body .dark {
-    $base-dark-theme: mat.define-dark-theme((
+    $dark-theme: mat.define-dark-theme((
        color: ($palettes)
    ));

-    $dark-theme: (
-        color: (
-            primary: map.get(map.get($base-dark-theme, color), primary),
-            accent: map.get(map.get($base-dark-theme, color), accent),
-            warn: map.get(map.get($base-dark-theme, color), warn),
-            is-dark: map.get(map.get($base-dark-theme, color), is-dark),
-            foreground: (
-                base: #FFFFFF,
-                divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-                dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-                disabled: #475569, /* slate.600 */
-                disabled-button: #1E293B, /* slate.800 */
-                disabled-text: #475569, /* slate.600 */
-                elevation: #000000,
-                hint-text: #64748B, /* slate.500 */
-                secondary-text: #94A3B8, /* slate.400 */
-                icon: #F1F5F9, /* slate.100 */
-                icons: #F1F5F9, /* slate.100 */
-                mat-icon: #94A3B8, /* slate.400 */
-                text: #FFFFFF,
-                slider-min: #FFFFFF,
-                slider-off: #64748B, /* slate.500 */
-                slider-off-active: #94A3B8 /* slate.400 */
-            ),
-            background: (
-                status-bar: #0F172A, /* slate.900 */
-                app-bar: #0F172A, /* slate.900 */
-                background: #0F172A, /* slate.900 */
-                hover: rgba(255, 255, 255, 0.05),
-                card: #1E293B, /* slate.800 */
-                dialog: #1E293B, /* slate.800 */
-                disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
-                raised-button: #0F172A, /* slate.900 */
-                focused-button: #E2E8F0, /* slate.200 */
-                selected-button: rgba(255, 255, 255, 0.05),
-                selected-disabled-button: #1E293B, /* slate.800 */
-                disabled-button-toggle: #0F172A, /* slate.900 */
-                unselected-chip: #475569, /* slate.600 */
-                disabled-list-option: #E2E8F0, /* slate.200 */
-                tooltip: #64748B /* slate.500 */
-            )
-        )
+    /* Merge the custom base colors with the generated themes */
+    $light-theme-colors: map.merge(map.get($light-theme, color), $light-base);
+    $light-theme: map.merge(
+            (color: $light-theme-colors),
+            $light-theme-colors
    );

-    /* Use all-component-colors to only generate the colors */
-    @include mat.all-component-colors($dark-theme);
+    $dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
+    $dark-theme: map.merge(
+            (color: $dark-theme-colors),
+            $dark-theme-colors
+    );
+
+    /* Generate and encapsulate Angular Material themes */
+    #{map.get($theme, selector)} .light,
+    #{map.get($theme, selector)}.light {
+        @include mat.all-component-colors($light-theme);
+    }
+
+    #{map.get($theme, selector)} .dark,
+    #{map.get($theme, selector)}.dark {
+        @include mat.all-component-colors($dark-theme);
+    }
 }
--- a/src/@fuse/styles/user-themes.scss
+++ b/src/@fuse/styles/user-themes.scss
--- a/src/@fuse/tailwind/plugins/theming.js
+++ b/src/@fuse/tailwind/plugins/theming.js
@@ -1,10 +1,12 @@
 const chroma = require('chroma-js');
 const _ = require('lodash');
+const fs = require('fs');
 const path = require('path');
 const colors = require('tailwindcss/colors');
 const plugin = require('tailwindcss/plugin');
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
 const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
+const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));

 // -----------------------------------------------------------------------------------------------------
 // @ Utilities
@@ -39,6 +41,88 @@ const theming = plugin.withOptions((options) => ({
        theme
    }) =>
    {
+        /**
+         * Create user themes object by going through the provided themes and
+         * merging them with the provided "default" so, we can have a complete
+         * set of color palettes for each user theme.
+         */
+        const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
+            themeName,
+            _.defaults({}, theme, options.themes['default'])
+        ]));
+
+        /**
+         * Normalize the themes and assign it to the themes object. This will
+         * be the final object that we create a SASS map from
+         */
+        let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
+            themeName,
+            normalizeTheme(theme)
+        ]));
+
+        /**
+         * Go through the themes to generate the contrasts and filter the
+         * palettes to only have "primary", "accent" and "warn" objects.
+         */
+        themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+            themeName,
+            _.pick(
+                _.fromPairs(_.map(theme, (palette, paletteName) => [
+                    paletteName,
+                    {
+                        ...palette,
+                        contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
+                            hue,
+                            _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
+                        ]))
+                    }
+                ])),
+                ['primary', 'accent', 'warn']
+            )
+        ]));
+
+        /**
+         * Go through the themes and attach appropriate class selectors so,
+         * we can use them to encapsulate each theme.
+         */
+        themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+            themeName,
+            {
+                selector: `".theme-${themeName}"`,
+                ...theme
+            }
+        ]));
+
+        /* Generate the SASS map using the themes object */
+        const sassMap = jsonToSassMap(JSON.stringify({'user-themes': themes}));
+
+        /* Get the file path */
+        const filename = path.resolve(__dirname, ('../../styles/user-themes.scss'));
+
+        /* Read the file and get its data */
+        let data;
+        try
+        {
+            data = fs.readFileSync(filename, {encoding: 'utf8'});
+        }
+        catch ( err )
+        {
+            console.error(err);
+        }
+
+        /* Write the file if the map has been changed */
+        if ( data !== sassMap )
+        {
+            try
+            {
+                fs.writeFileSync(filename, sassMap, {encoding: 'utf8'});
+            }
+            catch ( err )
+            {
+                console.error(err);
+            }
+        }
+
        /**
         * Iterate through the user's themes and build Tailwind components containing
         * CSS Custom Properties using the colors from them. This allows switching
@@ -61,9 +145,9 @@ const theming = plugin.withOptions((options) => ({
            ]))
        );

-        // -----------------------------------------------------------------------------------------------------
-        // @ Generate scheme based css custom properties and utility classes
-        // -----------------------------------------------------------------------------------------------------
+        /**
+         * Generate scheme based css custom properties and utility classes
+         */
        const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) =>
        {
            const isDark = colorScheme === 'dark';
@@ -78,7 +162,7 @@ const theming = plugin.withOptions((options) => ({
                    /**
                     * If a custom property is not available, browsers will use
                     * the fallback value. In this case, we want to use '--is-dark'
-                     * as the indicator of a dark theme so we can use it like this:
+                     * as the indicator of a dark theme so, we can use it like this:
                     * background-color: var(--is-dark, red);
                     *
                     * If we set '--is-dark' as "true" on dark themes, the above rule
@@ -99,7 +183,7 @@ const theming = plugin.withOptions((options) => ({
                     */
                    ...(!isDark ? {'--is-dark': 'false'} : {}),

-                    // Generate custom properties from customProps
+                    /* Generate custom properties from customProps */
                    ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
                    ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
                }
@@ -108,7 +192,7 @@ const theming = plugin.withOptions((options) => ({

        const schemeUtilities = (() =>
        {
-            // Generate general styles & utilities
+            /* Generate general styles & utilities */
            return {};
        })();

--- a/src/@fuse/tailwind/utils/json-to-sass-map.js
+++ b/src/@fuse/tailwind/utils/json-to-sass-map.js
@@ -0,0 +1,67 @@
+const _ = require('lodash');
+
+module.exports = (data) =>
+{
+    if ( !data )
+    {
+        return;
+    }
+
+    data = JSON.parse(data);
+
+    const getSCSS = (chunk) =>
+    {
+        let scss = '';
+
+        if ( typeof chunk === "object" && !Array.isArray(chunk) )
+        {
+            _.mapKeys(chunk, (value, key) =>
+            {
+                scss += key + ': ';
+
+                if ( typeof value === "object" )
+                {
+                    if ( Array.isArray(value) )
+                    {
+                        scss += '(';
+                        _.each(value, (val1) =>
+                        {
+                            if ( Array.isArray(val1) )
+                            {
+                                _.each(val1, (val2) =>
+                                {
+                                    scss += val2 + ' ';
+                                });
+                                scss = scss.slice(0, -1) + ', ';
+                            }
+                            else
+                            {
+                                scss += val1 + ', ';
+                            }
+                        });
+                        scss = scss.slice(0, -2);
+                        scss += ')';
+                    }
+                    else
+                    {
+                        scss += '(' + getSCSS(value) + ')';
+                    }
+                }
+                else
+                {
+                    scss += getSCSS(value);
+                }
+                scss += ', ';
+            });
+            scss = scss.slice(0, -2);
+        }
+        else
+        {
+            scss += chunk;
+        }
+
+        return scss;
+    };
+
+    return '$' + getSCSS(data) + ';';
+};
--- a/src/@fuse/version/fuse-version.ts
+++ b/src/@fuse/version/fuse-version.ts
@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';

-export const FUSE_VERSION = new Version('16.0.0').full;
+export const FUSE_VERSION = new Version('17.0.0').full;
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';
-import { MarkdownModule } from 'ngx-markdown';
 import { FuseModule } from '@fuse';
 import { FuseConfigModule } from '@fuse/services/config';
 import { FuseMockApiModule } from '@fuse/lib/mock-api';
@@ -36,10 +35,7 @@ const routerConfig: ExtraOptions = {
        CoreModule,

        // Layout module of your application
-        LayoutModule,
-
-        // 3rd party modules that require global configuration via forRoot
-        MarkdownModule.forRoot({})
+        LayoutModule
    ],
    bootstrap   : [
        AppComponent
--- a/src/app/core/transloco/transloco.module.ts
+++ b/src/app/core/transloco/transloco.module.ts
@@ -1,6 +1,5 @@
 import { Translation, TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
-import { environment } from 'environments/environment';
 import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';

@NgModule({
@@ -25,7 +24,7 @@ import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
                defaultLang         : 'en',
                fallbackLang        : 'en',
                reRenderOnLangChange: true,
-                prodMode            : environment.production
+                prodMode            : true
            })
        },
        {
--- a/src/app/layout/common/quick-chat/quick-chat.component.html
+++ b/src/app/layout/common/quick-chat/quick-chat.component.html
@@ -151,12 +151,12 @@

                    <!-- Message field -->
                    <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
-                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full">
+                        <mat-form-field
+                            class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full"
+                            [subscriptSizing]="'dynamic'">
                            <textarea
-                                class="min-h-5 my-0 resize-none"
-                                style="margin: 11px 0 !important; padding: 0 !important;"
-                                [rows]="1"
                                matInput
+                                cdkTextareaAutosize
                                #messageInput></textarea>
                        </mat-form-field>
                        <div class="flex items-center h-11 my-px ml-4">
--- a/src/app/layout/common/search/search.component.html
+++ b/src/app/layout/common/search/search.component.html
@@ -68,7 +68,9 @@
 <!-- Basic search -->
 <ng-container *ngIf="appearance === 'basic'">
    <div class="w-full sm:min-w-80">
-        <mat-form-field class="fuse-mat-no-subscript w-full">
+        <mat-form-field
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
            <mat-icon
                matPrefix
                [svgIcon]="'heroicons_outline:search'"></mat-icon>
--- a/src/app/mock-api/common/navigation/data.ts
+++ b/src/app/mock-api/common/navigation/data.ts
@@ -967,7 +967,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                icon : 'heroicons_outline:speakerphone',
                link : '/docs/changelog',
                badge: {
-                    title  : '16.0.0',
+                    title  : '17.0.0',
                    classes: 'px-2 bg-yellow-300 text-black rounded-full'
                }
            },
--- a/src/app/modules/admin/apps/academy/details/details.component.html
+++ b/src/app/modules/admin/apps/academy/details/details.component.html
@@ -140,10 +140,12 @@
                            mat-flat-button
                            [color]="'primary'"
                            (click)="goToPreviousStep()">
-                            <mat-icon
-                                class="mr-2"
-                                [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-                            <span class="mr-1">Prev</span>
+                            <span class="inline-flex items-center">
+                                <mat-icon
+                                    class="mr-2"
+                                    [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
+                                <span class="mr-1">Prev</span>
+                            </span>
                        </button>
                        <div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
                            <span>{{currentStep + 1}}</span>
@@ -155,10 +157,12 @@
                            mat-flat-button
                            [color]="'primary'"
                            (click)="goToNextStep()">
-                            <span class="ml-1">Next</span>
-                            <mat-icon
-                                class="ml-2"
-                                [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
+                            <span class="inline-flex items-center">
+                                <span class="ml-1">Next</span>
+                                <mat-icon
+                                    class="ml-2"
+                                    [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
+                            </span>
                        </button>
                    </div>
                </div>
--- a/src/app/modules/admin/apps/academy/list/list.component.html
+++ b/src/app/modules/admin/apps/academy/list/list.component.html
@@ -31,7 +31,9 @@
        <div class="flex flex-col flex-auto w-full max-w-xs sm:max-w-5xl mx-auto">
            <!-- Filters -->
            <div class="flex flex-col sm:flex-row items-center justify-between w-full max-w-xs sm:max-w-none">
-                <mat-form-field class="fuse-mat-no-subscript w-full sm:w-36">
+                <mat-form-field
+                    class="w-full sm:w-36"
+                    [subscriptSizing]="'dynamic'">
                    <mat-select
                        [value]="'all'"
                        (selectionChange)="filterByCategory($event)">
@@ -42,8 +44,8 @@
                    </mat-select>
                </mat-form-field>
                <mat-form-field
-                    class="fuse-mat-no-subscript w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
-                    [floatLabel]="'always'">
+                    class="w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
+                    [subscriptSizing]="'dynamic'">
                    <mat-icon
                        matPrefix
                        class="icon-size-5"
--- a/src/app/modules/admin/apps/chat/chats/chats.component.html
+++ b/src/app/modules/admin/apps/chat/chats/chats.component.html
@@ -95,8 +95,8 @@
                        <!-- Search -->
                        <div class="mt-4">
                            <mat-form-field
-                                class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-dense w-full"
-                                [floatLabel]="'always'">
+                                class="fuse-mat-rounded fuse-mat-dense w-full"
+                                [subscriptSizing]="'dynamic'">
                                <mat-icon
                                    matPrefix
                                    class="icon-size-5"
--- a/src/app/modules/admin/apps/chat/conversation/conversation.component.html
+++ b/src/app/modules/admin/apps/chat/conversation/conversation.component.html
@@ -167,12 +167,12 @@
                            <mat-icon [svgIcon]="'heroicons_outline:paper-clip'"></mat-icon>
                        </button>
                    </div>
-                    <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full ml-4">
+                    <mat-form-field
+                        class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full ml-4"
+                        subscriptSizing="dynamic">
                        <textarea
-                            class="min-h-5 my-0 resize-none"
-                            style="margin: 11px 0 !important; padding: 0 !important;"
-                            [rows]="1"
                            matInput
+                            cdkTextareaAutosize
                            #messageInput></textarea>
                    </mat-form-field>
                    <div class="flex items-center h-11 my-px ml-4">
--- a/src/app/modules/admin/apps/contacts/details/details.component.html
+++ b/src/app/modules/admin/apps/contacts/details/details.component.html
@@ -248,7 +248,9 @@

                    <!-- Name -->
                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                            <mat-label>Name</mat-label>
                            <mat-icon
                                matPrefix
@@ -332,7 +334,7 @@
                                        <ng-container *ngIf="!tagsEditMode">
                                            <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                                <div
-                                                    class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
+                                                    class="flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover"
                                                    (click)="toggleContactTag(tag)"
                                                    matRipple>
                                                    <mat-checkbox
@@ -341,7 +343,7 @@
                                                        [color]="'primary'"
                                                        [disableRipple]="true">
                                                    </mat-checkbox>
-                                                    <div class="ml-1">{{tag.title}}</div>
+                                                    <div>{{tag.title}}</div>
                                                </div>
                                            </ng-container>
                                        </ng-container>
@@ -350,7 +352,9 @@
                                            <div class="py-2 space-y-2">
                                                <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                                    <div class="flex items-center">
-                                                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
+                                                        <mat-form-field
+                                                            class="fuse-mat-dense w-full mx-4"
+                                                            [subscriptSizing]="'dynamic'">
                                                            <input
                                                                matInput
                                                                [value]="tag.title"
@@ -387,7 +391,9 @@

                    <!-- Title -->
                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                            <mat-label>Title</mat-label>
                            <mat-icon
                                matPrefix
@@ -402,7 +408,9 @@

                    <!-- Company -->
                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                            <mat-label>Company</mat-label>
                            <mat-icon
                                matPrefix
@@ -420,7 +428,9 @@
                        <div class="space-y-4">
                            <ng-container *ngFor="let email of contactForm.get('emails')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
                                <div class="flex">
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto">
+                                    <mat-form-field
+                                        class="flex-auto"
+                                        [subscriptSizing]="'dynamic'">
                                        <mat-label *ngIf="first">Email</mat-label>
                                        <mat-icon
                                            matPrefix
@@ -432,7 +442,9 @@
                                            [placeholder]="'Email address'"
                                            [spellcheck]="false">
                                    </mat-form-field>
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
+                                    <mat-form-field
+                                        class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
+                                        [subscriptSizing]="'dynamic'">
                                        <mat-label *ngIf="first">Label</mat-label>
                                        <mat-icon
                                            matPrefix
@@ -477,7 +489,9 @@
                        <div class="space-y-4">
                            <ng-container *ngFor="let phoneNumber of contactForm.get('phoneNumbers')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
                                <div class="relative flex">
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto">
+                                    <mat-form-field
+                                        class="flex-auto"
+                                        [subscriptSizing]="'dynamic'">
                                        <mat-label *ngIf="first">Phone</mat-label>
                                        <input
                                            matInput
@@ -512,7 +526,9 @@
                                            </ng-container>
                                        </mat-select>
                                    </mat-form-field>
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
+                                    <mat-form-field
+                                        class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
+                                        [subscriptSizing]="'dynamic'">
                                        <mat-label *ngIf="first">Label</mat-label>
                                        <mat-icon
                                            matPrefix
@@ -554,7 +570,9 @@

                    <!-- Address -->
                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                            <mat-label>Address</mat-label>
                            <mat-icon
                                matPrefix
@@ -569,7 +587,9 @@

                    <!-- Birthday -->
                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                            <mat-label>Birthday</mat-label>
                            <mat-icon
                                matPrefix
@@ -590,7 +610,9 @@

                    <!-- Notes -->
                    <div class="mt-8">
-                        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                            <mat-label>Notes</mat-label>
                            <mat-icon
                                matPrefix
@@ -602,7 +624,7 @@
                                [placeholder]="'Notes'"
                                [rows]="5"
                                [spellcheck]="false"
-                                matTextareaAutosize></textarea>
+                                cdkTextareaAutosize></textarea>
                        </mat-form-field>
                    </div>

--- a/src/app/modules/admin/apps/contacts/list/list.component.html
+++ b/src/app/modules/admin/apps/contacts/list/list.component.html
@@ -42,7 +42,9 @@
                    <div class="flex items-center mt-4 sm:mt-0 md:mt-4">
                        <!-- Search -->
                        <div class="flex-auto">
-                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
+                            <mat-form-field
+                                class="fuse-mat-dense fuse-mat-rounded w-full min-w-50"
+                                subscriptSizing="dynamic">
                                <mat-icon
                                    class="icon-size-5"
                                    matPrefix
--- a/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html
+++ b/src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html
@@ -13,7 +13,9 @@
        <!-- Actions -->
        <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
            <!-- Search -->
-            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64">
+            <mat-form-field
+                class="fuse-mat-dense fuse-mat-rounded min-w-64"
+                [subscriptSizing]="'dynamic'">
                <mat-icon
                    class="icon-size-5"
                    matPrefix
@@ -398,7 +400,7 @@
                                                <ng-container *ngIf="!tagsEditMode">
                                                    <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                                        <mat-checkbox
-                                                            class="flex items-center h-10 min-h-10 px-4"
+                                                            class="flex items-center h-10 min-h-10 pl-1 pr-4"
                                                            [color]="'primary'"
                                                            [checked]="selectedProduct.tags.includes(tag.id)"
                                                            (change)="toggleProductTag(tag, $event)">
@@ -410,7 +412,9 @@
                                                <ng-container *ngIf="tagsEditMode">
                                                    <div class="p-4 space-y-2">
                                                        <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
-                                                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full">
+                                                            <mat-form-field
+                                                                class="fuse-mat-dense w-full"
+                                                                [subscriptSizing]="'dynamic'">
                                                                <input
                                                                    matInput
                                                                    [value]="tag.title"
--- a/src/app/modules/admin/apps/help-center/help-center.component.html
+++ b/src/app/modules/admin/apps/help-center/help-center.component.html
@@ -20,7 +20,9 @@
            <div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary">
                Search for a topic or question, check out our FAQs and guides, contact us for detailed support
            </div>
-            <mat-form-field class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20">
+            <mat-form-field
+                class="fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20"
+                [subscriptSizing]="'dynamic'">
                <input
                    matInput
                    [placeholder]="'Enter a question, topic or keyword'">
--- a/src/app/modules/admin/apps/help-center/support/support.component.html
+++ b/src/app/modules/admin/apps/help-center/support/support.component.html
@@ -71,13 +71,13 @@
                        </mat-error>
                    </mat-form-field>
                    <!-- Message -->
-                    <mat-form-field class="fuse-mat-textarea w-full">
+                    <mat-form-field class="w-full">
                        <textarea
                            matInput
                            [formControlName]="'message'"
                            [required]="true"
                            [rows]="5"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                        <mat-label>Message</mat-label>
                        <mat-error *ngIf="supportForm.get('message').hasError('required')">
                            Required
--- a/src/app/modules/admin/apps/mailbox/details/details.component.html
+++ b/src/app/modules/admin/apps/mailbox/details/details.component.html
@@ -332,7 +332,7 @@
                            class="flex flex-col w-full"
                            #replyForm>

-                            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript">
+                            <mat-form-field [subscriptSizing]="'dynamic'">
                                <textarea
                                    class="textarea"
                                    matInput
--- a/src/app/modules/admin/apps/notes/details/details.component.html
+++ b/src/app/modules/admin/apps/notes/details/details.component.html
@@ -33,7 +33,7 @@
                    [placeholder]="'Note'"
                    [(ngModel)]="note.content"
                    (input)="updateNoteDetails(note)"
-                    matTextareaAutosize></textarea>
+                    cdkTextareaAutosize></textarea>
            </div>
            <!-- Tasks -->
            <ng-container *ngIf="note.tasks">
--- a/src/app/modules/admin/apps/notes/labels/labels.component.html
+++ b/src/app/modules/admin/apps/notes/labels/labels.component.html
@@ -9,9 +9,7 @@
        </button>
    </div>
    <!-- New label -->
-    <mat-form-field
-        class="fuse-mat-dense w-full mt-8"
-        [floatLabel]="'always'">
+    <mat-form-field class="fuse-mat-dense w-full mt-8">
        <input
            name="new-label"
            [autocomplete]="'off'"
--- a/src/app/modules/admin/apps/notes/list/list.component.html
+++ b/src/app/modules/admin/apps/notes/list/list.component.html
@@ -82,7 +82,9 @@
                            (click)="drawer.toggle()">
                            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
                        </button>
-                        <mat-form-field class="fuse-mat-rounded fuse-mat-dense fuse-mat-no-subscript flex-auto ml-4 lg:ml-0">
+                        <mat-form-field
+                            class="fuse-mat-rounded fuse-mat-dense flex-auto ml-4 lg:ml-0"
+                            [subscriptSizing]="'dynamic'">
                            <mat-icon
                                class="icon-size-5"
                                [svgIcon]="'heroicons_solid:search'"
--- a/src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.html
+++ b/src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.html
@@ -3,7 +3,7 @@
    [class.h-13]="!formVisible">
    <div class="relative flex w-full h-full rounded-lg">
        <button
-            class="absolute inset-0 justify-start w-full px-5 rounded-lg"
+            class="absolute inset-0 justify-start w-full rounded-lg"
            [ngClass]="{'opacity-0 pointer-events-none': formVisible}"
            mat-button
            (click)="toggleFormVisibility()"
--- a/src/app/modules/admin/apps/scrumboard/board/board.component.html
+++ b/src/app/modules/admin/apps/scrumboard/board/board.component.html
@@ -14,17 +14,17 @@
                mat-stroked-button
                [routerLink]="['..']">
                <mat-icon
-                    class="icon-size-5 mr-2"
+                    class="icon-size-5"
                    [svgIcon]="'heroicons_solid:view-boards'"></mat-icon>
-                Boards
+                <span class="ml-2">Boards</span>
            </a>
            <button
                class="ml-3"
                mat-stroked-button>
                <mat-icon
-                    class="icon-size-5 mr-2"
+                    class="icon-size-5"
                    [svgIcon]="'heroicons_solid:cog'"></mat-icon>
-                Settings
+                <span class="ml-2">Settings</span>
            </button>
        </div>
    </div>
--- a/src/app/modules/admin/apps/scrumboard/card/details/details.component.html
+++ b/src/app/modules/admin/apps/scrumboard/card/details/details.component.html
@@ -19,7 +19,9 @@
        [formGroup]="cardForm">

        <!-- Title -->
-        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+        <mat-form-field
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
            <mat-label>Title</mat-label>
            <textarea
                matInput
@@ -31,7 +33,9 @@
        </mat-form-field>

        <!-- Description -->
-        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+        <mat-form-field
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
            <mat-label>Description</mat-label>
            <textarea
                matInput
@@ -58,7 +62,9 @@
                    <ng-container *ngIf="card.dueDate">{{card.dueDate | date:'longDate'}}</ng-container>
                    <ng-container *ngIf="!card.dueDate">Not set</ng-container>
                </span>
-                <mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none">
+                <mat-form-field
+                    class="fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"
+                    [subscriptSizing]="'dynamic'">
                    <input
                        matInput
                        [formControlName]="'dueDate'"
@@ -107,7 +113,7 @@
                    <!-- Labels -->
                    <ng-container *ngFor="let label of filteredLabels; trackBy: trackByFn">
                        <mat-checkbox
-                            class="flex items-center h-10 min-h-10 px-4"
+                            class="flex items-center h-10 min-h-10 pl-1 pr-4"
                            [color]="'primary'"
                            [checked]="hasLabel(label)"
                            (change)="toggleProductTag(label, $event)">
--- a/src/app/modules/admin/apps/tasks/details/details.component.html
+++ b/src/app/modules/admin/apps/tasks/details/details.component.html
@@ -62,13 +62,15 @@

        <!-- Title -->
        <div>
-            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+            <mat-form-field
+                class="w-full"
+                [subscriptSizing]="'dynamic'">
                <mat-label>{{task.type === 'task' ? 'Task title' : 'Section title'}}</mat-label>
                <textarea
                    matInput
                    [formControlName]="'title'"
                    [spellcheck]="false"
-                    matTextareaAutosize
+                    cdkTextareaAutosize
                    #titleField></textarea>
            </mat-form-field>
        </div>
@@ -144,7 +146,7 @@
                                <ng-container *ngIf="!tagsEditMode">
                                    <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                        <div
-                                            class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
+                                            class="flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover"
                                            (click)="toggleTaskTag(tag)"
                                            matRipple>
                                            <mat-checkbox
@@ -162,7 +164,9 @@
                                    <div class="py-2 space-y-2">
                                        <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                            <div class="flex items-center">
-                                                <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
+                                                <mat-form-field
+                                                    class="fuse-mat-dense w-full mx-4"
+                                                    [subscriptSizing]="'dynamic'">
                                                    <input
                                                        matInput
                                                        [value]="tag.title"
@@ -293,7 +297,9 @@
                        <ng-container *ngIf="task.dueDate">{{task.dueDate | date:'longDate'}}</ng-container>
                        <ng-container *ngIf="!task.dueDate">Not set</ng-container>
                    </span>
-                    <mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none">
+                    <mat-form-field
+                        class="fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"
+                        [subscriptSizing]="'dynamic'">
                        <input
                            matInput
                            [formControlName]="'dueDate'"
@@ -321,13 +327,15 @@

        <!-- Notes -->
        <div class="mt-8">
-            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+            <mat-form-field
+                class="w-full"
+                [subscriptSizing]="'dynamic'">
                <mat-label>Notes</mat-label>
                <textarea
                    matInput
                    [formControlName]="'notes'"
                    [spellcheck]="false"
-                    matTextareaAutosize></textarea>
+                    cdkTextareaAutosize></textarea>
            </mat-form-field>
        </div>

--- a/src/app/modules/admin/dashboards/crypto/crypto.component.html
+++ b/src/app/modules/admin/dashboards/crypto/crypto.component.html
@@ -55,20 +55,10 @@
                    <div class="flex flex-col px-6 pb-2">
                        <mat-form-field>
                            <mat-label>Action</mat-label>
-                            <span
-                                class="flex items-center justify-center"
-                                matPrefix>
-                                <ng-container *ngIf="buySellSelect.value === 'buy'">
-                                    <mat-icon
-                                        class="icon-size-5"
-                                        [svgIcon]="'heroicons_solid:download'"></mat-icon>
-                                </ng-container>
-                                <ng-container *ngIf="buySellSelect.value === 'sell'">
-                                    <mat-icon
-                                        class="icon-size-5"
-                                        [svgIcon]="'heroicons_solid:upload'"></mat-icon>
-                                </ng-container>
-                            </span>
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="buySellSelect.value === 'buy' ? 'heroicons_solid:download' : 'heroicons_solid:upload'"
+                                matPrefix></mat-icon>
                            <mat-select
                                [value]="'buy'"
                                #buySellSelect="matSelect">
--- a/src/app/modules/admin/dashboards/project/project.component.html
+++ b/src/app/modules/admin/dashboards/project/project.component.html
@@ -89,6 +89,7 @@
            <!-- Tabs -->
            <mat-tab-group
                class="sm:px-2"
+                mat-stretch-tabs="false"
                [animationDuration]="'0'">

                <!-- Home -->
@@ -690,7 +691,13 @@
                </mat-tab>

                <!-- Team -->
-                <mat-tab label="Team">
+                <mat-tab>
+                    <ng-template mat-tab-label>
+                        <span class="inline-flex items-center space-x-2">
+                            <span class="">Team</span>
+                            <span class="px-2 py-1 text-sm rounded-full bg-primary-100 text-on-primary-100">9</span>
+                        </span>
+                    </ng-template>
                    <ng-template matTabContent>
                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 w-full min-w-0">
                            <ng-container *ngFor="let member of data.teamMembers">
--- a/src/app/modules/admin/docs/changelog/changelog.ts
+++ b/src/app/modules/admin/docs/changelog/changelog.ts
@@ -10,6 +10,34 @@ export class ChangelogComponent
 {
    changelog: any[] = [

+        // v17.0.0
+        {
+            version    : 'v17.0.0',
+            releaseDate: 'Nov 18, 2022',
+            changes    : [
+                {
+                    type: 'Breaking',
+                    list: [
+                        '(Dependencies) From this version up, Fuse will not be compatible with Legacy Angular Material components',
+                        '(Linting) Removed linter setup and eslint packages since most of the linting happens on Editors and IDEs. This is also partly because of slow development speed of angular-eslint packages.',
+                        '(.fuse-mat-textarea) Removed in favor of CSS :has selector, now textareas within "mat-form-field" components are detected automatically',
+                        '(.fuse-mat-no-subscript) Removed in favor of \'subscriptSizing="dynamic"\' property of "mat-form-field"',
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(Dependencies) Updated Angular & Angular Material to v15.0.0',
+                        '(Dependencies) Updated various other packages',
+                        '(Dependencies) Removed ngx-markdown from the package.json, it still can be used within Fuse, it\'s a part of the effort to make releasing Fuse updates easier',
+                        '(General) Matched the files and folders with a newly created Angular v15 project to make things easier for the newcomers',
+                        '(Angular Material) Re-wrote the override styles to make sure everything look the same as before (compatibility for MDC components)',
+                        '(Theming) Re-wrote the theming system to make sure to keep everything working as before without any breaking changes'
+                    ]
+                }
+            ]
+        },
+
        // v16.0.0
        {
            version    : 'v16.0.0',
--- a/src/app/modules/admin/pages/authentication/forgot-password/classic/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/classic/forgot-password.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/forgot-password/fullscreen-reversed/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/fullscreen-reversed/forgot-password.component.html
@@ -62,7 +62,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/forgot-password/fullscreen/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/fullscreen/forgot-password.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/forgot-password/split-screen-reversed/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/split-screen-reversed/forgot-password.component.html
@@ -62,7 +62,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/forgot-password/split-screen/forgot-password.component.html
+++ b/src/app/modules/admin/pages/authentication/forgot-password/split-screen/forgot-password.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/reset-password/classic/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/classic/reset-password.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/reset-password/fullscreen-reversed/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/fullscreen-reversed/reset-password.component.html
@@ -62,7 +62,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/reset-password/fullscreen/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/fullscreen/reset-password.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/reset-password/split-screen-reversed/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/split-screen-reversed/reset-password.component.html
@@ -62,7 +62,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/reset-password/split-screen/reset-password.component.html
+++ b/src/app/modules/admin/pages/authentication/reset-password/split-screen/reset-password.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/sign-in/classic/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/classic/sign-in.component.html
@@ -18,7 +18,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -77,8 +77,9 @@
                </mat-form-field>

                <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'rememberMe'">
                        Remember me
--- a/src/app/modules/admin/pages/authentication/sign-in/fullscreen-reversed/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/fullscreen-reversed/sign-in.component.html
@@ -68,7 +68,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -127,8 +127,9 @@
                </mat-form-field>

                <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'rememberMe'">
                        Remember me
--- a/src/app/modules/admin/pages/authentication/sign-in/fullscreen/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/fullscreen/sign-in.component.html
@@ -18,7 +18,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -77,8 +77,9 @@
                </mat-form-field>

                <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'rememberMe'">
                        Remember me
--- a/src/app/modules/admin/pages/authentication/sign-in/modern-reversed/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/modern-reversed/sign-in.component.html
@@ -128,8 +128,9 @@
                    </mat-form-field>

                    <!-- Actions -->
-                    <div class="inline-flex items-end justify-between w-full mt-1.5">
+                    <div class="inline-flex items-center justify-between w-full mt-1.5">
                        <mat-checkbox
+                            class="-ml-2"
                            [color]="'primary'"
                            [formControlName]="'rememberMe'">
                            Remember me
--- a/src/app/modules/admin/pages/authentication/sign-in/modern/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/modern/sign-in.component.html
@@ -78,8 +78,9 @@
                    </mat-form-field>

                    <!-- Actions -->
-                    <div class="inline-flex items-end justify-between w-full mt-1.5">
+                    <div class="inline-flex items-center justify-between w-full mt-1.5">
                        <mat-checkbox
+                            class="-ml-2"
                            [color]="'primary'"
                            [formControlName]="'rememberMe'">
                            Remember me
--- a/src/app/modules/admin/pages/authentication/sign-in/split-screen-reversed/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/split-screen-reversed/sign-in.component.html
@@ -68,7 +68,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -127,8 +127,9 @@
                </mat-form-field>

                <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'rememberMe'">
                        Remember me
--- a/src/app/modules/admin/pages/authentication/sign-in/split-screen/sign-in.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-in/split-screen/sign-in.component.html
@@ -18,7 +18,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -77,8 +77,9 @@
                </mat-form-field>

                <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'rememberMe'">
                        Remember me
--- a/src/app/modules/admin/pages/authentication/sign-up/classic/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/classic/sign-up.component.html
@@ -18,7 +18,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -99,12 +99,13 @@
                <!-- ToS and PP -->
                <div class="inline-flex items-end w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                        <a
                            class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                        </a>
                        <span>and</span>
                        <a
--- a/src/app/modules/admin/pages/authentication/sign-up/fullscreen-reversed/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/fullscreen-reversed/sign-up.component.html
@@ -68,7 +68,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -149,12 +149,13 @@
                <!-- ToS and PP -->
                <div class="inline-flex items-end w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                        <a
                            class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                        </a>
                        <span>and</span>
                        <a
--- a/src/app/modules/admin/pages/authentication/sign-up/fullscreen/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/fullscreen/sign-up.component.html
@@ -18,7 +18,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -99,12 +99,13 @@
                <!-- ToS and PP -->
                <div class="inline-flex items-end w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                        <a
                            class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                        </a>
                        <span>and</span>
                        <a
--- a/src/app/modules/admin/pages/authentication/sign-up/modern-reversed/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/modern-reversed/sign-up.component.html
@@ -150,12 +150,13 @@
                    <!-- ToS and PP -->
                    <div class="inline-flex items-end w-full mt-1.5">
                        <mat-checkbox
+                            class="-ml-2"
                            [color]="'primary'"
                            [formControlName]="'agreements'">
-                            <span>I agree to the</span>
+                            <span>I agree with</span>
                            <a
                                class="ml-1 text-primary-500 hover:underline"
-                                [routerLink]="['./']">Terms of Service
+                                [routerLink]="['./']">Terms
                            </a>
                            <span>and</span>
                            <a
--- a/src/app/modules/admin/pages/authentication/sign-up/modern/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/modern/sign-up.component.html
@@ -100,12 +100,13 @@
                    <!-- ToS and PP -->
                    <div class="inline-flex items-end w-full mt-1.5">
                        <mat-checkbox
+                            class="-ml-2"
                            [color]="'primary'"
                            [formControlName]="'agreements'">
-                            <span>I agree to the</span>
+                            <span>I agree with</span>
                            <a
                                class="ml-1 text-primary-500 hover:underline"
-                                [routerLink]="['./']">Terms of Service
+                                [routerLink]="['./']">Terms
                            </a>
                            <span>and</span>
                            <a
--- a/src/app/modules/admin/pages/authentication/sign-up/split-screen-reversed/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/split-screen-reversed/sign-up.component.html
@@ -68,7 +68,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -149,12 +149,13 @@
                <!-- ToS and PP -->
                <div class="inline-flex items-end w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                        <a
                            class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                        </a>
                        <span>and</span>
                        <a
--- a/src/app/modules/admin/pages/authentication/sign-up/split-screen/sign-up.component.html
+++ b/src/app/modules/admin/pages/authentication/sign-up/split-screen/sign-up.component.html
@@ -18,7 +18,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -99,12 +99,13 @@
                <!-- ToS and PP -->
                <div class="inline-flex items-end w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                        <a
                            class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                        </a>
                        <span>and</span>
                        <a
--- a/src/app/modules/admin/pages/authentication/unlock-session/classic/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/classic/unlock-session.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/unlock-session/fullscreen-reversed/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/fullscreen-reversed/unlock-session.component.html
@@ -62,7 +62,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/unlock-session/fullscreen/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/fullscreen/unlock-session.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/unlock-session/split-screen-reversed/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/split-screen-reversed/unlock-session.component.html
@@ -62,7 +62,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/authentication/unlock-session/split-screen/unlock-session.component.html
+++ b/src/app/modules/admin/pages/authentication/unlock-session/split-screen/unlock-session.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/coming-soon/classic/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/classic/coming-soon.component.html
@@ -14,7 +14,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/coming-soon/fullscreen-reversed/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/fullscreen-reversed/coming-soon.component.html
@@ -64,7 +64,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/coming-soon/fullscreen/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/fullscreen/coming-soon.component.html
@@ -14,7 +14,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/coming-soon/split-screen-reversed/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/split-screen-reversed/coming-soon.component.html
@@ -64,7 +64,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/coming-soon/split-screen/coming-soon.component.html
+++ b/src/app/modules/admin/pages/coming-soon/split-screen/coming-soon.component.html
@@ -14,7 +14,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/admin/pages/profile/profile.component.html
+++ b/src/app/modules/admin/pages/profile/profile.component.html
@@ -538,12 +538,14 @@
                            alt="Card cover image">
                        <div class="sm:hidden">Brian Hughes</div>
                    </div>
-                    <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                    <mat-form-field
+                        class="w-full"
+                        [subscriptSizing]="'dynamic'">
                        <textarea
                            matInput
                            [placeholder]="'What\'s on your mind?'"
                            [rows]="3"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                    </mat-form-field>
                </div>
                <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@@ -551,25 +553,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
-                        <span>Photo / Video</span>
+                        <span class="ml-2">Photo / Video</span>
                    </button>
                    <button
                        class="px-3 mr-1 hidden sm:inline-flex"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
-                        <span>Tag Friends</span>
+                        <span class="ml-2">Tag Friends</span>
                    </button>
                    <button
                        class="px-3 mr-1 hidden sm:inline-flex"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
-                        <span>Feeling</span>
+                        <span class="ml-2">Feeling</span>
                    </button>
                    <button
                        class="px-3"
@@ -723,25 +725,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -793,12 +795,14 @@
                                class="w-12 h-12 rounded-full mr-5"
                                src="assets/images/avatars/brian-hughes.jpg"
                                alt="Card cover image">
-                            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                            <mat-form-field
+                                class="w-full"
+                                [subscriptSizing]="'dynamic'">
                                <textarea
                                    matInput
                                    [placeholder]="'Write a comment...'"
                                    [rows]="3"
-                                    matTextareaAutosize></textarea>
+                                    cdkTextareaAutosize></textarea>
                            </mat-form-field>
                        </div>
                        <div class="flex items-center mt-3 ml-auto -mr-3">
@@ -1070,25 +1074,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -1229,25 +1233,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -1383,25 +1387,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -1534,25 +1538,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -1688,25 +1692,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
--- a/src/app/modules/admin/pages/settings/account/account.component.html
+++ b/src/app/modules/admin/pages/settings/account/account.component.html
@@ -11,7 +11,9 @@
        <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
            <!-- Name -->
            <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Name</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -24,7 +26,9 @@
            </div>
            <!-- Username -->
            <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript fuse-mat-emphasized-affix w-full">
+                <mat-form-field
+                    class="fuse-mat-emphasized-affix w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Username</mat-label>
                    <div
                        class="text-secondary"
@@ -38,7 +42,9 @@
            </div>
            <!-- Title -->
            <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Title</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -51,7 +57,9 @@
            </div>
            <!-- Company -->
            <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Company</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -64,7 +72,9 @@
            </div>
            <!-- About -->
            <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>About</mat-label>
                    <textarea
                        matInput
@@ -87,7 +97,9 @@
        <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
            <!-- Email -->
            <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Email</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -100,7 +112,9 @@
            </div>
            <!-- Phone -->
            <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Phone</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -113,7 +127,9 @@
            </div>
            <!-- Country -->
            <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Country</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -131,7 +147,9 @@
            </div>
            <!-- Language -->
            <div class="sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Language</mat-label>
                    <mat-icon
                        class="icon-size-5"
--- a/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html
+++ b/src/app/modules/admin/pages/settings/plan-billing/plan-billing.component.html
@@ -35,7 +35,7 @@
                            class="absolute top-0 right-0 mt-3 mr-3 icon-size-7 text-primary"
                            [svgIcon]="'heroicons_solid:check-circle'"></mat-icon>
                    </ng-container>
-                    <div class="font-medium">{{plan.label}}</div>
+                    <div class="font-semibold">{{plan.label}}</div>
                    <div class="mt-1 whitespace-normal text-secondary">{{plan.details}}</div>
                    <div class="flex-auto"></div>
                    <div class="mt-8 text-lg">
@@ -57,7 +57,9 @@
        <div class="grid grid-cols-4 gap-6 w-full mt-8">
            <!-- Card holder -->
            <div class="col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Card holder</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -70,7 +72,9 @@
            </div>
            <!-- Card number -->
            <div class="col-span-4 sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Card number</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -84,8 +88,8 @@
            <!-- Card expiration -->
            <div class="col-span-2 sm:col-span-1">
                <mat-form-field
-                    class="fuse-mat-no-subscript w-full"
-                    [floatLabel]="'always'">
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Expiration date</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -99,7 +103,9 @@
            </div>
            <!-- Card CVC -->
            <div class="col-span-2 sm:col-span-1">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>CVC / CVC2</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -112,7 +118,9 @@
            </div>
            <!-- Country -->
            <div class="col-span-4 sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Country</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -130,7 +138,9 @@
            </div>
            <!-- ZIP -->
            <div class="col-span-4 sm:col-span-2">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>ZIP / Postal code</mat-label>
                    <mat-icon
                        class="icon-size-5"
--- a/src/app/modules/admin/pages/settings/security/security.component.html
+++ b/src/app/modules/admin/pages/settings/security/security.component.html
@@ -11,7 +11,9 @@
        <div class="grid sm:grid-cols-4 gap-6 w-full mt-8">
            <!-- Current password -->
            <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Current password</mat-label>
                    <mat-icon
                        class="icon-size-5"
@@ -25,7 +27,9 @@
            </div>
            <!-- New password -->
            <div class="sm:col-span-4">
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>New password</mat-label>
                    <mat-icon
                        class="icon-size-5"
--- a/src/app/modules/admin/pages/settings/team/team.component.html
+++ b/src/app/modules/admin/pages/settings/team/team.component.html
@@ -3,8 +3,8 @@
    <!-- Add team member -->
    <div class="w-full">
        <mat-form-field
-            class="fuse-mat-no-subscript w-full"
-            [floatLabel]="'always'">
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
            <mat-label>Add team members</mat-label>
            <mat-icon
                class="icon-size-5"
@@ -48,7 +48,9 @@
                </div>
                <div class="flex items-center mt-4 sm:mt-0 sm:ml-auto">
                    <div class="order-2 sm:order-1 ml-4 sm:ml-0">
-                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-32">
+                        <mat-form-field
+                            class="fuse-mat-dense w-32"
+                            [subscriptSizing]="'dynamic'">
                            <mat-select
                                [panelClass]="'w-72 min-w-72 max-w-72 h-auto max-h-none'"
                                [value]="member.role"
--- a/src/app/modules/admin/ui/advanced-search/advanced-search.component.html
+++ b/src/app/modules/admin/ui/advanced-search/advanced-search.component.html
@@ -44,7 +44,9 @@
                [formGroup]="searchForm">

                <!-- Keywords -->
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Keywords</mat-label>
                    <input
                        [autocomplete]="'off'"
@@ -53,7 +55,9 @@
                </mat-form-field>

                <!-- Type -->
-                <mat-form-field class="fuse-mat-no-subscript w-full">
+                <mat-form-field
+                    class="w-full"
+                    [subscriptSizing]="'dynamic'">
                    <mat-label>Type</mat-label>
                    <mat-select [formControlName]="'type'">
                        <mat-option [value]="'any'">Any</mat-option>
@@ -62,7 +66,7 @@
                    </mat-select>
                </mat-form-field>

-                <div class="flex items-center space-x-8">
+                <div class="flex flex-col items-start -ml-2">
                    <!-- In trash -->
                    <mat-checkbox
                        [color]="'primary'"
--- a/src/app/modules/admin/ui/animations/animations.component.html
+++ b/src/app/modules/admin/ui/animations/animations.component.html
@@ -265,7 +265,7 @@
            <p>
                The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeIn]="false"</code>
            </p>
-            <mat-form-field class="fuse-mat-no-subscript">
+            <mat-form-field [subscriptSizing]="'dynamic'">
                <mat-label>Direction</mat-label>
                <mat-select
                    [value]="'in'"
@@ -698,7 +698,7 @@
            <p>
                The animation can be disabled by setting the state to <b>false</b>; <code>[@fadeOut]="false"</code>
            </p>
-            <mat-form-field class="fuse-mat-no-subscript">
+            <mat-form-field [subscriptSizing]="'dynamic'">
                <mat-label>Direction</mat-label>
                <mat-select
                    [value]="'out'"
@@ -1131,7 +1131,7 @@
            <p>
                The animation can be disabled by setting the state to <b>false</b>; <code>[@slideIn]="false"</code>
            </p>
-            <mat-form-field class="fuse-mat-no-subscript">
+            <mat-form-field [subscriptSizing]="'dynamic'">
                <mat-label>Direction</mat-label>
                <mat-select
                    [value]="'top'"
@@ -1483,7 +1483,7 @@
            <p>
                The animation can be disabled by setting the state to <b>false</b>; <code>[@slideOut]="false"</code>
            </p>
-            <mat-form-field class="fuse-mat-no-subscript">
+            <mat-form-field [subscriptSizing]="'dynamic'">
                <mat-label>Direction</mat-label>
                <mat-select
                    [value]="'top'"
--- a/src/app/modules/admin/ui/animations/animations.component.scss
+++ b/src/app/modules/admin/ui/animations/animations.component.scss
@@ -1,24 +1,24 @@
 animations {

-    .mat-form-field {
+    .mat-mdc-form-field {
        width: 100%;
        margin-top: 32px;
    }

-    mat-tab-group {
+    .mat-mdc-tab-group {

-        .mat-tab-header {
+        .mat-mdc-tab-header {
            padding: 24px 0;
            border-top-width: 1px;
        }

-        .mat-tab-body-wrapper {
+        .mat-mdc-tab-body-wrapper {

-            .mat-tab-body {
+            .mat-mdc-tab-body {

                &:first-child {

-                    .mat-tab-body-content {
+                    .mat-mdc-tab-body-content {
                        display: flex;
                        justify-content: center;
                        min-height: 200px;
--- a/src/app/modules/admin/ui/cards/cards.component.html
+++ b/src/app/modules/admin/ui/cards/cards.component.html
@@ -1042,7 +1042,7 @@
                    <span class="w-3 h-3 border-2 border-blue-500 rounded-full mr-3"></span>
                    <span class="font-medium text-secondary">USER INTERFACE (5)</span>
                </div>
-                <div class="flex flex-col mt-2 ml-6">
+                <div class="flex flex-col mt-2 ml-4">
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'">
@@ -1075,7 +1075,7 @@
                    <span class="w-3 h-3 border-2 border-green-500 rounded-full mr-3"></span>
                    <span class="font-medium text-secondary">DESIGN SYSTEM (3)</span>
                </div>
-                <div class="flex flex-col mt-2 ml-6">
+                <div class="flex flex-col mt-2 ml-4">
                    <mat-checkbox
                        class="my-1"
                        [color]="'primary'"
@@ -2169,12 +2169,14 @@
                            alt="Card cover image">
                        <div class="sm:hidden">Brian Hughes</div>
                    </div>
-                    <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                    <mat-form-field
+                        class="w-full"
+                        [subscriptSizing]="'dynamic'">
                        <textarea
                            matInput
                            [placeholder]="'What\'s on your mind?'"
                            [rows]="3"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                    </mat-form-field>
                </div>
                <div class="flex items-center mt-6 sm:mt-8 -mx-3">
@@ -2182,25 +2184,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:photograph'"></mat-icon>
-                        <span>Photo / Video</span>
+                        <span class="ml-2">Photo / Video</span>
                    </button>
                    <button
                        class="px-3 mr-1 hidden sm:inline-flex"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
-                        <span>Tag Friends</span>
+                        <span class="ml-2">Tag Friends</span>
                    </button>
                    <button
                        class="px-3 mr-1 hidden sm:inline-flex"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:emoji-happy'"></mat-icon>
-                        <span>Feeling</span>
+                        <span class="ml-2">Feeling</span>
                    </button>
                    <button
                        class="px-3"
@@ -2355,25 +2357,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -2425,12 +2427,14 @@
                                class="w-12 h-12 rounded-full mr-5"
                                src="assets/images/avatars/brian-hughes.jpg"
                                alt="Card cover image">
-                            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                            <mat-form-field
+                                class="w-full"
+                                [subscriptSizing]="'dynamic'">
                                <textarea
                                    matInput
                                    [rows]="3"
                                    [placeholder]="'Write a comment...'"
-                                    matTextareaAutosize></textarea>
+                                    cdkTextareaAutosize></textarea>
                            </mat-form-field>
                        </div>
                        <div class="flex items-center mt-3 ml-auto -mr-3">
@@ -2709,25 +2713,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -2869,25 +2873,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3037,25 +3041,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3211,25 +3215,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3389,25 +3393,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3535,25 +3539,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3690,25 +3694,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3845,25 +3849,25 @@
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 text-red-500 mr-2"
+                            class="icon-size-5 text-red-500"
                            [svgIcon]="'heroicons_solid:heart'"></mat-icon>
-                        <span>Unlike</span>
+                        <span class="ml-2">Unlike</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:chat-alt'"></mat-icon>
-                        <span>Comment</span>
+                        <span class="ml-2">Comment</span>
                    </button>
                    <button
                        class="px-3 mr-1"
                        mat-button>
                        <mat-icon
-                            class="icon-size-5 mr-2"
+                            class="icon-size-5"
                            [svgIcon]="'heroicons_solid:share'"></mat-icon>
-                        <span>Share</span>
+                        <span class="ml-2">Share</span>
                    </button>
                </div>
                <hr class="border-b mx-6 sm:mx-8 mt-4 mb-6">
@@ -3912,12 +3916,14 @@
                            class="w-12 h-12 rounded-full mr-5"
                            src="assets/images/avatars/brian-hughes.jpg"
                            alt="Card cover image">
-                        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                            <textarea
                                class="leading-normal my-2"
                                matInput
                                [placeholder]="'Write a comment...'"
-                                matTextareaAutosize
+                                cdkTextareaAutosize
                                [rows]="3"></textarea>
                        </mat-form-field>
                    </div>
--- a/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html
+++ b/src/app/modules/admin/ui/confirmation-dialog/confirmation-dialog.component.html
@@ -55,7 +55,9 @@
                        class="flex flex-col items-start">

                        <!-- Title -->
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                            <mat-label>Title</mat-label>
                            <input
                                matInput
@@ -63,7 +65,9 @@
                        </mat-form-field>

                        <!-- Message -->
-                        <mat-form-field class="fuse-mat-no-subscript fuse-mat-textarea w-full mt-6">
+                        <mat-form-field
+                            class="w-full mt-6"
+                            [subscriptSizing]="'dynamic'">
                            <mat-label>Message</mat-label>
                            <textarea
                                matInput
@@ -85,7 +89,9 @@
                            </mat-checkbox>
                            <div class="flex items-center w-full mt-6">
                                <!-- Icon name -->
-                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                <mat-form-field
+                                    class="w-1/2 pr-2"
+                                    [subscriptSizing]="'dynamic'">
                                    <mat-label>Icon name</mat-label>
                                    <input
                                        matInput
@@ -93,7 +99,9 @@
                                </mat-form-field>

                                <!-- Icon color -->
-                                <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+                                <mat-form-field
+                                    class="w-1/2 pl-2"
+                                    [subscriptSizing]="'dynamic'">
                                    <mat-label>Icon color</mat-label>
                                    <mat-select [formControlName]="'color'">
                                        <ng-container *ngFor="let color of ['primary', 'accent', 'warn', 'basic', 'info', 'success', 'warning', 'error']">
@@ -123,7 +131,9 @@
                                </mat-checkbox>
                                <div class="flex items-center w-full mt-4">
                                    <!-- Confirm label -->
-                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                    <mat-form-field
+                                        class="w-1/2 pr-2"
+                                        [subscriptSizing]="'dynamic'">
                                        <mat-label>Confirm button label</mat-label>
                                        <input
                                            matInput
@@ -131,7 +141,9 @@
                                    </mat-form-field>

                                    <!-- Confirm color -->
-                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pl-2">
+                                    <mat-form-field
+                                        class="w-1/2 pl-2"
+                                        [subscriptSizing]="'dynamic'">
                                        <mat-label>Confirm button color</mat-label>
                                        <mat-select [formControlName]="'color'">
                                            <ng-container *ngFor="let color of ['primary', 'accent', 'warn']">
@@ -154,7 +166,9 @@
                                </mat-checkbox>
                                <div class="flex items-center w-full mt-4">
                                    <!-- Cancel label -->
-                                    <mat-form-field class="fuse-mat-no-subscript w-1/2 pr-2">
+                                    <mat-form-field
+                                        class="w-1/2 pr-2"
+                                        [subscriptSizing]="'dynamic'">
                                        <mat-label>Cancel button label</mat-label>
                                        <input
                                            matInput
--- a/src/app/modules/admin/ui/forms/fields/fields.component.html
+++ b/src/app/modules/admin/ui/forms/fields/fields.component.html
@@ -66,12 +66,12 @@
                <div class="flex">
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                        <mat-label>Address</mat-label>
                        <textarea
                            matInput
-                            [rows]="3"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize
+                            [cdkAutosizeMinRows]="3"></textarea>
                        <mat-icon
                            class="icon-size-5"
                            matSuffix
@@ -142,8 +142,7 @@
                </mat-form-field>
                <mat-form-field
                    [ngClass]="formFieldHelpers"
-                    class="w-full"
-                    [floatLabel]="'always'">
+                    class="w-full">
                    <mat-label>Label and Placeholder</mat-label>
                    <input
                        matInput
@@ -159,35 +158,81 @@
                </mat-form-field>
            </form>

+            <div class="prose prose-sm max-w-3xl">
+                <h2 class="mt-12">Subscript sizing</h2>
+                <p>
+                    Following form contains examples to showcase different subscript sizing methods. Focus on the inputs and then blur them
+                    to see how the <em>mat-error</em> acts differently in different cases.
+                </p>
+                <p>
+                    The best way of using Form Fields is to have <em>dynamic</em> subscript sizing with
+                    fixed spacing around the fields.
+                </p>
+            </div>
+
+            <form class="flex flex-col mt-8 p-8 pb-4 bg-card rounded-2xl shadow overflow-hidden">
+                <mat-form-field
+                    class="flex-auto"
+                    subscriptSizing="fixed">
+                    <mat-label>Fixed subscript sizing</mat-label>
+                    <input
+                        matInput
+                        [formControl]="fixedSubscriptInput"
+                        required>
+                    <mat-error>Required field!</mat-error>
+                </mat-form-field>
+
+                <mat-form-field
+                    class="flex-auto"
+                    subscriptSizing="fixed">
+                    <mat-label>Fixed subscript sizing with mat-hint</mat-label>
+                    <input
+                        matInput
+                        [formControl]="fixedSubscriptInputWithHint"
+                        required>
+                    <mat-hint>Hint text for the field</mat-hint>
+                    <mat-error>Required field!</mat-error>
+                </mat-form-field>
+            </form>
+
+            <form class="flex flex-col mt-8 p-8 pb-4 bg-card rounded-2xl shadow overflow-hidden">
+                <mat-form-field
+                    class="flex-auto"
+                    subscriptSizing="dynamic">
+                    <mat-label>Dynamic subscript sizing</mat-label>
+                    <input
+                        matInput
+                        [formControl]="dynamicSubscriptInput"
+                        required>
+                    <mat-error>Required field!</mat-error>
+                </mat-form-field>
+
+                <mat-form-field
+                    class="flex-auto"
+                    subscriptSizing="dynamic">
+                    <mat-label>Dynamic subscript sizing with mat-hint</mat-label>
+                    <input
+                        matInput
+                        [formControl]="dynamicSubscriptInputWithHint"
+                        required>
+                    <mat-hint>Hint text for the field</mat-hint>
+                    <mat-error>Required field!</mat-error>
+                </mat-form-field>
+            </form>
+
            <div class="prose prose-sm max-w-3xl">
                <h2 class="mt-12">Field variations</h2>
                <p>
                    Following form contains examples to showcase form field variations. In addition to the heavy modifications,
                    Fuse also provides set of helper classes to further modify the style of the form fields.
                </p>
-                <h3>Required classes</h3>
                <ul>
                    <li>
-                        <p><code>.fuse-mat-textarea</code></p>
+                        <p><code>.fuse-mat-bold</code></p>
                        <p>
-                            This helper class is required if you are using a textarea as your input. Since Angular Material doesn't differentiate a textarea from a
-                            normal input while using them with <strong>mat-form-field</strong>, this helper class is required for <strong>textarea</strong> inputs to look good and
-                            consistent.
+                            Provides set of adjustments to make the fields' border bolder.
                        </p>
                    </li>
-                </ul>
-                <!-- @formatter:off -->
-                <textarea
-                    fuse-highlight
-                    lang="html">
-                    <mat-form-field class="fuse-mat-textarea">
-                        <mat-label>Note</mat-label>
-                        &lt;textarea matInput&gt;&lt;/textarea&gt;
-                    </mat-form-field>
-                </textarea>
-                <!-- @formatter:on -->
-                <h3>Optional classes</h3>
-                <ul>
                    <li>
                        <p><code>.fuse-mat-dense</code></p>
                        <p>
@@ -199,14 +244,6 @@
                        <p><code>.fuse-mat-rounded</code></p>
                        <p>Provides set of adjustments to make the fields look fully rounded.</p>
                    </li>
-                    <li>
-                        <p><code>.fuse-mat-no-subscript</code></p>
-                        <p>
-                            Provides set of adjustments to remove the bottom spacing where <em>hint</em> and <em>error</em> messages placed. This helper is particularly useful to align the
-                            field easily if you don't need to show error messages or hint text. For example a search bar in the toolbar uses this helper to fit the field to the toolbar
-                            without having an extra bottom spacing.
-                        </p>
-                    </li>
                    <li>
                        <p><code>.fuse-mat-emphasized-affix</code></p>
                        <p>
@@ -223,9 +260,9 @@
                    <mat-button-toggle-group
                        [(ngModel)]="formFieldHelpers"
                        multiple>
+                        <mat-button-toggle [value]="'fuse-mat-bold'">Bold</mat-button-toggle>
                        <mat-button-toggle [value]="'fuse-mat-dense'">Dense</mat-button-toggle>
                        <mat-button-toggle [value]="'fuse-mat-rounded'">Rounded</mat-button-toggle>
-                        <mat-button-toggle [value]="'fuse-mat-no-subscript'">No subscript</mat-button-toggle>
                        <mat-button-toggle [value]="'fuse-mat-emphasized-affix'">Emphasized affix</mat-button-toggle>
                    </mat-button-toggle-group>
                </p>
@@ -340,7 +377,7 @@
                <div class="flex">
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                        <mat-label>Textarea</mat-label>
                        <textarea matInput></textarea>
                    </mat-form-field>
@@ -348,7 +385,7 @@
                <div class="flex">
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                        <mat-label>Textarea with prefix & suffix</mat-label>
                        <textarea matInput></textarea>
                        <mat-icon
@@ -364,21 +401,21 @@
                <div class="flex">
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                        <mat-label>Textarea with autosize</mat-label>
                        <textarea
                            matInput
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                    </mat-form-field>
                </div>
                <div class="flex">
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                        <mat-label>Textarea with autosize, prefix & suffix</mat-label>
                        <textarea
                            matInput
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                        <mat-icon
                            class="icon-size-5"
                            matPrefix
@@ -455,38 +492,32 @@
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
                        class="flex-auto">
-                        <mat-chip-list #chipList01>
-                            <mat-chip
-                                [removable]="true"
-                                [selectable]="true">
+                        <mat-chip-grid #chipGrid01>
+                            <mat-chip-row [editable]="true">
                                Lemon
                                <mat-icon
                                    class="icon-size-5"
                                    matChipRemove
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
-                            <mat-chip
-                                [removable]="true"
-                                [selectable]="true">
+                            </mat-chip-row>
+                            <mat-chip-row [editable]="true">
                                Lime
                                <mat-icon
                                    class="icon-size-5"
                                    matChipRemove
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
-                            <mat-chip
-                                [removable]="true"
-                                [selectable]="true">
+                            </mat-chip-row>
+                            <mat-chip-row [editable]="true">
                                Apple
                                <mat-icon
                                    class="icon-size-5"
                                    matChipRemove
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
+                            </mat-chip-row>
                            <input
                                [placeholder]="'New fruit...'"
-                                [matChipInputFor]="chipList01">
-                        </mat-chip-list>
+                                [matChipInputFor]="chipGrid01">
+                        </mat-chip-grid>
                    </mat-form-field>
                </div>
                <div class="flex">
@@ -617,7 +648,7 @@
                <div class="flex">
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                        <textarea
                            matInput
                            [placeholder]="'Textarea'"></textarea>
@@ -626,7 +657,7 @@
                <div class="flex">
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                        <textarea
                            matInput
                            [placeholder]="'Textarea with prefix & suffix'"></textarea>
@@ -643,21 +674,21 @@
                <div class="flex">
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                        <textarea
                            matInput
                            [placeholder]="'Textarea with autosize'"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                    </mat-form-field>
                </div>
                <div class="flex">
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
-                        class="fuse-mat-textarea flex-auto">
+                        class="flex-auto">
                        <textarea
                            matInput
                            [placeholder]="'Textarea with autosize, prefix & suffix'"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                        <mat-icon
                            class="icon-size-5"
                            matPrefix
@@ -734,38 +765,32 @@
                    <mat-form-field
                        [ngClass]="formFieldHelpers"
                        class="flex-auto">
-                        <mat-chip-list #chipList02>
-                            <mat-chip
-                                [removable]="true"
-                                [selectable]="true">
+                        <mat-chip-grid #chipGrid02>
+                            <mat-chip-row [editable]="true">
                                Lemon
                                <mat-icon
                                    class="icon-size-5"
                                    matChipRemove
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
-                            <mat-chip
-                                [removable]="true"
-                                [selectable]="true">
+                            </mat-chip-row>
+                            <mat-chip-row [editable]="true">
                                Lime
                                <mat-icon
                                    class="icon-size-5"
                                    matChipRemove
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
-                            <mat-chip
-                                [removable]="true"
-                                [selectable]="true">
+                            </mat-chip-row>
+                            <mat-chip-row [editable]="true">
                                Apple
                                <mat-icon
                                    class="icon-size-5"
                                    matChipRemove
                                    [svgIcon]="'heroicons_solid:minus-circle'"></mat-icon>
-                            </mat-chip>
+                            </mat-chip-row>
                            <input
                                [placeholder]="'New fruit...'"
-                                [matChipInputFor]="chipList02">
-                        </mat-chip-list>
+                                [matChipInputFor]="chipGrid02">
+                        </mat-chip-grid>
                    </mat-form-field>
                </div>
                <div class="flex">
--- a/src/app/modules/admin/ui/forms/fields/fields.component.ts
+++ b/src/app/modules/admin/ui/forms/fields/fields.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import { UntypedFormBuilder } from '@angular/forms';
+import { FormControl, UntypedFormBuilder, Validators } from '@angular/forms';

@Component({
    selector     : 'forms-fields',
@@ -9,6 +9,10 @@ import { UntypedFormBuilder } from '@angular/forms';
 export class FormsFieldsComponent
 {
    formFieldHelpers: string[] = [''];
+    fixedSubscriptInput: FormControl = new FormControl('', [Validators.required]);
+    dynamicSubscriptInput: FormControl = new FormControl('', [Validators.required]);
+    fixedSubscriptInputWithHint: FormControl = new FormControl('', [Validators.required]);
+    dynamicSubscriptInputWithHint: FormControl = new FormControl('', [Validators.required]);

    /**
     * Constructor
--- a/src/app/modules/admin/ui/forms/layouts/layouts.component.html
+++ b/src/app/modules/admin/ui/forms/layouts/layouts.component.html
@@ -121,7 +121,7 @@
                    </mat-form-field>
                </div>
                <div class="flex">
-                    <mat-form-field class="fuse-mat-textarea flex-auto">
+                    <mat-form-field class="flex-auto">
                        <textarea
                            matInput
                            [placeholder]="'About'"
@@ -303,7 +303,7 @@
                            </mat-form-field>
                        </div>
                        <div class="flex">
-                            <mat-form-field class="fuse-mat-textarea flex-auto">
+                            <mat-form-field class="flex-auto">
                                <mat-label>About</mat-label>
                                <textarea
                                    matInput
@@ -441,7 +441,7 @@
                        <input matInput>
                        <span matPrefix>www.example.com/</span>
                    </mat-form-field>
-                    <mat-form-field class="fuse-mat-textarea flex-auto">
+                    <mat-form-field class="flex-auto">
                        <mat-label>About</mat-label>
                        <textarea
                            matInput
@@ -600,7 +600,7 @@
                        </mat-form-field>
                    </div>
                    <div class="flex">
-                        <mat-form-field class="fuse-mat-textarea flex-auto">
+                        <mat-form-field class="flex-auto">
                            <textarea
                                matInput
                                [placeholder]="'About'"
@@ -741,7 +741,7 @@
                            <input matInput>
                            <span matPrefix>www.example.com/</span>
                        </mat-form-field>
-                        <mat-form-field class="fuse-mat-textarea flex-auto">
+                        <mat-form-field class="flex-auto">
                            <mat-label>About</mat-label>
                            <textarea
                                matInput
@@ -890,7 +890,7 @@
                        </div>
                        <div class="flex flex-col gt-xs:flex-row gt-xs:items-baseline">
                            <span class="font-semibold mb-1 gt-xs:text-right gt-xs:min-w-32 gt-xs:mr-4 gt-xs:mb-0">About</span>
-                            <mat-form-field class="fuse-mat-textarea flex-auto">
+                            <mat-form-field class="flex-auto">
                                <textarea
                                    matInput
                                    [rows]="3"></textarea>
--- a/src/app/modules/admin/ui/forms/wizards/wizards.component.html
+++ b/src/app/modules/admin/ui/forms/wizards/wizards.component.html
@@ -163,7 +163,7 @@
                            </mat-form-field>
                        </div>
                        <div class="flex">
-                            <mat-form-field class="fuse-mat-textarea flex-auto">
+                            <mat-form-field class="flex-auto">
                                <textarea
                                    matInput
                                    [formControlName]="'about'"
@@ -413,7 +413,7 @@
                            </mat-form-field>
                        </div>
                        <div class="flex">
-                            <mat-form-field class="fuse-mat-textarea flex-auto">
+                            <mat-form-field class="flex-auto">
                                <textarea
                                    matInput
                                    [formControlName]="'about'"
--- a/src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html
+++ b/src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.html
@@ -393,11 +393,15 @@
                                    Toggle determinate mode
                                </mat-slide-toggle>

-                                <mat-slider
-                                    [color]="'primary'"
-                                    (change)="setProgress($event)">
+                                <div>
                                    Progress value
-                                </mat-slider>
+                                    <mat-slider [color]="'primary'">
+                                        <input
+                                            matSliderThumb
+                                            [(value)]="sliderValue"
+                                            (valueChange)="setProgress()">
+                                    </mat-slider>
+                                </div>

                            </div>
                        </div>
--- a/src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/loading-bar/loading-bar.component.ts
@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { MatSliderChange } from '@angular/material/slider';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { finalize } from 'rxjs';
 import { FuseLoadingService } from '@fuse/services/loading';
@@ -14,6 +13,7 @@ export class LoadingBarComponent
 {
    apiCallStatus: string = '-';
    mode: 'determinate' | 'indeterminate' = 'indeterminate';
+    sliderValue: number = 0;

    /**
     * Constructor
@@ -96,11 +96,9 @@ export class LoadingBarComponent

    /**
     * Set the progress
-     *
-     * @param change
     */
-    setProgress(change: MatSliderChange): void
+    setProgress(): void
    {
-        this._fuseLoadingService.setProgress(change.value);
+        this._fuseLoadingService.setProgress(this.sliderValue);
    }
 }
--- a/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html
+++ b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.html
@@ -1051,13 +1051,6 @@
                                            icon : 'map',
                                            link : '/supported-components/google-maps'
                                        },
-                                        {
-                                            id   : 'supported-components.ngx-markdown',
-                                            title: 'ngx-markdown',
-                                            type : 'basic',
-                                            icon : 'text_format',
-                                            link : '/supported-components/ngx-markdown'
-                                        },
                                        {
                                            id   : 'supported-components.quill-editor',
                                            title: 'Quill editor',
--- a/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.ts
+++ b/src/app/modules/admin/ui/fuse-components/components/navigation/navigation.component.ts
@@ -135,13 +135,6 @@ export class NavigationComponent
                        icon : 'map',
                        link : '/supported-components/google-maps'
                    },
-                    {
-                        id   : 'supported-components.ngx-markdown',
-                        title: 'ngx-markdown',
-                        type : 'basic',
-                        icon : 'text_format',
-                        link : '/supported-components/ngx-markdown'
-                    },
                    {
                        id   : 'supported-components.quill-editor',
                        title: 'Quill editor',
--- a/src/app/modules/admin/ui/other-components/other-components.component.ts
+++ b/src/app/modules/admin/ui/other-components/other-components.component.ts
@@ -100,12 +100,6 @@ export class OtherComponentsComponent implements OnInit, OnDestroy
                        type : 'basic',
                        link : '/ui/other-components/third-party/apex-charts'
                    },
-                    {
-                        id   : 'other-components.third-party.ngx-markdown',
-                        title: 'ngx-markdown',
-                        type : 'basic',
-                        link : '/ui/other-components/third-party/ngx-markdown'
-                    },
                    {
                        id   : 'other-components.third-party.quill-editor',
                        title: 'Quill editor',
--- a/src/app/modules/admin/ui/other-components/other-components.module.ts
+++ b/src/app/modules/admin/ui/other-components/other-components.module.ts
@@ -18,7 +18,6 @@ import { SearchComponent } from 'app/modules/admin/ui/other-components/common/se
 import { ShortcutsComponent } from 'app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component';
 import { UserComponent } from 'app/modules/admin/ui/other-components/common/user/user.component';
 import { ApexChartsComponent } from 'app/modules/admin/ui/other-components/third-party/apex-charts/apex-charts.component';
-import { NgxMarkdownComponent } from 'app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component';
 import { QuillEditorComponent } from 'app/modules/admin/ui/other-components/third-party/quill-editor/quill-editor.component';
 import { otherComponentsRoutes } from 'app/modules/admin/ui/other-components/other-components.routing';

@@ -34,7 +33,6 @@ import { otherComponentsRoutes } from 'app/modules/admin/ui/other-components/oth
        ShortcutsComponent,
        UserComponent,
        ApexChartsComponent,
-        NgxMarkdownComponent,
        QuillEditorComponent
    ],
    imports     : [
--- a/src/app/modules/admin/ui/other-components/other-components.routing.ts
+++ b/src/app/modules/admin/ui/other-components/other-components.routing.ts
@@ -9,7 +9,6 @@ import { SearchComponent } from 'app/modules/admin/ui/other-components/common/se
 import { ShortcutsComponent } from 'app/modules/admin/ui/other-components/common/shortcuts/shortcuts.component';
 import { UserComponent } from 'app/modules/admin/ui/other-components/common/user/user.component';
 import { ApexChartsComponent } from 'app/modules/admin/ui/other-components/third-party/apex-charts/apex-charts.component';
-import { NgxMarkdownComponent } from 'app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component';
 import { QuillEditorComponent } from 'app/modules/admin/ui/other-components/third-party/quill-editor/quill-editor.component';

 export const otherComponentsRoutes: Route[] = [
@@ -76,10 +75,6 @@ export const otherComponentsRoutes: Route[] = [
                        path     : 'apex-charts',
                        component: ApexChartsComponent
                    },
-                    {
-                        path     : 'ngx-markdown',
-                        component: NgxMarkdownComponent
-                    },
                    {
                        path     : 'quill-editor',
                        component: QuillEditorComponent
--- a/src/app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component.html
+++ b/src/app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component.html
@@ -1,52 +0,0 @@
-<div class="flex flex-col flex-auto min-w-0">
-
-    <!-- Header -->
-    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-card dark:bg-transparent">
-        <div class="flex-1 min-w-0">
-            <!-- Breadcrumbs -->
-            <div class="flex flex-wrap items-center font-medium">
-                <div>
-                    <a class="whitespace-nowrap text-primary-500">Documentation</a>
-                </div>
-                <div class="flex items-center ml-1 whitespace-nowrap">
-                    <mat-icon
-                        class="icon-size-5 text-secondary"
-                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <a class="ml-1 text-primary-500">Other Components</a>
-                </div>
-                <div class="flex items-center ml-1 whitespace-nowrap">
-                    <mat-icon
-                        class="icon-size-5 text-secondary"
-                        [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    <span class="ml-1 text-secondary">Third Party</span>
-                </div>
-            </div>
-            <!-- Title -->
-            <div class="mt-2">
-                <h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
-                    ngxMarkdown
-                </h2>
-            </div>
-        </div>
-        <button
-            class="-ml-3 sm:ml-0 mb-2 sm:mb-0 order-first sm:order-last"
-            mat-icon-button
-            (click)="toggleDrawer()">
-            <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
-        </button>
-    </div>
-
-    <div class="flex-auto max-w-3xl p-6 sm:p-10 prose prose-sm">
-
-        <p>
-            <a
-                href="https://github.com/jfcere/ngx-markdown"
-                rel="noreferrer"
-                target="_blank">ngxMarkdown
-            </a>
-            is an Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to html with syntax highlight.
-        </p>
-
-    </div>
-
-</div>
--- a/src/app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component.ts
+++ b/src/app/modules/admin/ui/other-components/third-party/ngx-markdown/ngx-markdown.component.ts
@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-import { OtherComponentsComponent } from 'app/modules/admin/ui/other-components/other-components.component';
-
-@Component({
-    selector   : 'ngx-markdown',
-    templateUrl: './ngx-markdown.component.html'
-})
-export class NgxMarkdownComponent
-{
-    /**
-     * Constructor
-     */
-    constructor(private _otherComponentsComponent: OtherComponentsComponent)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Toggle the drawer
-     */
-    toggleDrawer(): void
-    {
-        // Toggle the drawer
-        this._otherComponentsComponent.matDrawer.toggle();
-    }
-}
--- a/src/app/modules/auth/forgot-password/forgot-password.component.html
+++ b/src/app/modules/auth/forgot-password/forgot-password.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/auth/reset-password/reset-password.component.html
+++ b/src/app/modules/auth/reset-password/reset-password.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/src/app/modules/auth/sign-in/sign-in.component.html
+++ b/src/app/modules/auth/sign-in/sign-in.component.html
@@ -18,7 +18,16 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
+                [appearance]="'outline'"
+                [showIcon]="false"
+                [type]="'info'">
+                You are browsing <strong>Fuse Demo</strong>. Click on the "Sign in" button to access the Demo and Documentation.
+            </fuse-alert>
+
+            <!-- Alert -->
+            <fuse-alert
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -77,8 +86,9 @@
                </mat-form-field>

                <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'rememberMe'">
                        Remember me
--- a/src/app/modules/auth/sign-up/sign-up.component.html
+++ b/src/app/modules/auth/sign-up/sign-up.component.html
@@ -18,7 +18,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
@@ -100,12 +100,13 @@
                <!-- ToS and PP -->
                <div class="inline-flex items-end w-full mt-1.5">
                    <mat-checkbox
+                        class="-ml-2"
                        [color]="'primary'"
                        [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                        <a
                            class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                        </a>
                        <span>and</span>
                        <a
--- a/src/app/modules/auth/unlock-session/unlock-session.component.html
+++ b/src/app/modules/auth/unlock-session/unlock-session.component.html
@@ -12,7 +12,7 @@

            <!-- Alert -->
            <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                *ngIf="showAlert"
                [appearance]="'outline'"
                [showIcon]="false"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sercan Yemen	de7a598c07	Updated the meta tags for the Demo	2022-11-18 11:14:00 +03:00
Sercan Yemen	8ae3cdfbea	Updated the changelog	2022-11-18 11:07:04 +03:00
Sercan Yemen	533e39261b	(Dependencies) Removed ngx-markdown package, you can keep using it if you need, we will remove anything that slow us down in terms of updates	2022-11-18 09:38:54 +03:00
Sercan Yemen	7870e312b9	(Dependencies) Updated various other dependencies	2022-11-17 13:11:55 +03:00
Sercan Yemen	1662042e35	(Dependencies) Updated the Angular & Angular Material to v15 stable	2022-11-17 13:10:53 +03:00
Sercan Yemen	08266c3e51	Updated the application to reflect the changes	2022-11-11 15:30:12 +03:00
Sercan Yemen	8000e53bae	(overrides/angular-material) Tweaks and improvements	2022-11-11 15:29:56 +03:00
Sercan Yemen	8fbef029c0	Updated the Fuse version number and the changelog	2022-11-11 13:25:34 +03:00
Sercan Yemen	b7b849ee60	Second step of upgrading to Angular Material v15 (MDC). Almost re-wrote the entire override styles to make sure MDC components will look correct.	2022-11-11 13:21:04 +03:00
Sercan Yemen	872dffe42b	Updated Angular to v15-rc.3 and Angular Material to v15-rc.2	2022-11-10 14:16:05 +03:00
Sercan Yemen	646b084a12	Only write the user themes file if the map has been changed. This fixes the issue where watcher being triple triggered on cold starts.	2022-11-08 12:47:38 +03:00
Sercan Yemen	c88d30a4f4	Removed the linter from the default project since linting mostly done using Editors and IDEs	2022-11-07 11:04:27 +03:00
Sercan Yemen	f2d5bf3041	Matched the files and folders to be the same with a newly generated Angular v15 project	2022-11-07 11:01:23 +03:00
Sercan Yemen	388456b937	First step for upgrading to Angular & Angular Material v15	2022-11-07 10:07:27 +03:00