commit fa208a26bc5e681e1d877c441922f743d0d4a0e2
Author: Flatlogic Bot <support@flatlogic.com>
Date:   Thu Mar 12 13:44:52 2026 +0000

    Initial import

diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..98f314e
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,8 @@
+# Modern browser targets aligned with Angular 21 support.
+last 2 Chrome versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..59d9a3a
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..e3fbd98
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+build
+node_modules
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..09c93fb
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,54 @@
+{
+  "root": true,
+  "ignorePatterns": ["build/**/*", "node_modules/**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": "off",
+        "@angular-eslint/component-selector": "off",
+        "@angular-eslint/no-empty-lifecycle-method": "off",
+        "@angular-eslint/prefer-inject": "off",
+        "@angular-eslint/prefer-standalone": "off",
+        "@angular-eslint/use-lifecycle-interface": "off",
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-extra-semi": "off",
+        "@typescript-eslint/no-unused-expressions": "off",
+        "@typescript-eslint/no-wrapper-object-types": "off",
+        "@typescript-eslint/no-inferrable-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "no-extra-boolean-cast": "off",
+        "no-extra-semi": "off",
+        "prefer-const": "off",
+        "prefer-spread": "off",
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          {
+            "argsIgnorePattern": "^_",
+            "varsIgnorePattern": "^_"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {
+        "@angular-eslint/template/prefer-control-flow": "off"
+      }
+    }
+  ]
+}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..a802f17
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,57 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  quality:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Lint
+        run: npm run lint -- --quiet
+
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Build
+        run: npm run build
+
+      - name: Test
+        run: npm run test -- --watch=false --browsers=ChromeHeadless
+
+  e2e:
+    runs-on: ubuntu-latest
+    needs: quality
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Install Playwright Chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: E2E smoke
+        run: npm run e2e
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..928fd00
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,49 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/build
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+yarn.lock
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+/.angular
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..2bd5a0a
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+22
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..cedf9c7
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "quoteProps": "as-needed",
+  "jsxSingleQuote": true,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..a8ff89c
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 FLATLOGIC.COM
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0886325
--- /dev/null
+++ b/README.md
@@ -0,0 +1,116 @@
+# 🚀 Angular Material Admin - A Free Angular Material Dashboard!
+
+[View Demo](https://flatlogic.com/templates/angular-material-admin-full/demo) | [Download](https://github.com/flatlogic/angular-material-admin-full/archive/refs/heads/master.zip) | [More Templates](https://flatlogic.com/templates) | [Discord Community](https://discord.gg/flatlogic-community) | [Support Forum](https://flatlogic.com/forum)
+
+**Originally a premium product priced at $69+, made available for free in January 2025!** 🎉
+
+Looking for a perfect codebase generator for your Startup? Try [Flatlogic AI Web App Generator](https://flatlogic.com/generator) - our new tool, sort of a template++.
+
+---
+
+## 🎯 Why Angular Material Admin?
+- **Ex-Premium**: This template was previously paid. Enjoy it for free now. 😉
+- **Material Design**: Built with Angular Material, following Google's design principles.
+- **Join the Community**: [Flatlogic Discord](https://discord.gg/flatlogic-community) is where the action happens.
+- **Free Node.js Backend**: Pair it up with [this backend](https://github.com/flatlogic/nodejs-backend) to go full-stack.
+
+---
+
+## 🚀 Quick Start
+
+1. **Clone the repo**  
+   ```bash
+   git clone https://github.com/flatlogic/angular-material-admin-full.git
+   cd angular-material-admin-full
+   ```
+2. **Install dependencies**  
+   ```bash
+   npm install
+   ```
+3. **Run the app**  
+   ```bash
+   npm start
+   ```
+   Navigate to http://localhost:3000/.
+
+4. **Build for production**  
+   ```bash
+   npm build
+   ```
+
+---
+
+## 🧩 Features
+
+- Fully Responsive Layout
+- Angular 13
+- No jQuery and Bootstrap
+- Modular Architecture
+- Styled Angular Material Components
+- Multiple Dashboards
+- Authentication Pages
+- Charts (Apexcharts, Amcharts)
+- Static & Hover Sidebar
+
+---
+
+## 🛠 Built With
+- Angular 13
+- Angular Material
+- TypeScript
+- Webpack
+- JavaScript (ES6)
+
+---
+
+## 📦 Pages
+- Dashboard
+- E-Commerce (Product Management, Product Grid, Product Page)
+- User Management (User List, Add, Edit)
+- Forms (Elements, Validation)
+- Charts (Line, Bar, Pie)
+- Tables (Basic, Dynamic)
+- Maps (Google, Vector)
+- Core (Typography, Colors, Grid)
+- Extra (Calendar, Invoice, Gallery, Search Result, Timeline, Chat)
+- Authentication (Login, Error Pages)
+
+---
+
+## 🌍 Available Variants
+
+|               | **Material**                                              | **Transparent**                                         | **Classic**                                          | **Sofia**                                          | **Flatlogic**                                      |
+|---------------|-----------------------------------------------------------|---------------------------------------------------------|-------------------------------------------------------|-----------------------------------------------------|----------------------------------------------------|
+| **React**     | [React Material Admin](https://github.com/flatlogic/react-material-admin-full) | [Light Blue React](https://github.com/flatlogic/light-blue-react) | [Sing App React](https://github.com/flatlogic/sing-app-react) | [Sofia React](https://github.com/flatlogic/sofia-react) | [One React](https://github.com/flatlogic/one-react) |
+| **Angular**   | [Angular Material Admin](https://github.com/flatlogic/angular-material-admin-full) | [Light Blue Angular](https://github.com/flatlogic/light-blue-angular) | [Sing App Angular](https://github.com/flatlogic/sing-app-angular) | - | - |
+| **Vue**       | [Material Vue](https://github.com/flatlogic/material-vue-full) | [Light Blue Vue](https://github.com/flatlogic/light-blue-vue) | [Sing App Vue](https://github.com/flatlogic/sing-app-vue) | - | - |
+| **Bootstrap** | - | [Light Blue HTML5](https://github.com/flatlogic/light-blue-html5) | [Sing App HTML5](https://github.com/flatlogic/sing-app-html5) | - | [One Bootstrap](https://github.com/flatlogic/one-bootstrap-template-full) |
+
+
+Additionally, these templates are tailored for specific business needs:
+- [E-Commerce Frontend (React)](https://github.com/flatlogic/ecommerce-frontend) - A complete e-commerce solution.
+- [Bookkeeper UI (React)](https://github.com/flatlogic/bookkeeper-ui) - Accounting dashboard for finance management.
+- [User Management Template (React)](https://github.com/flatlogic/user-management-template) - User authentication and management.
+
+---
+
+## 👨‍💻 How to Contribute
+- **Star this repo ⭐** - show some love.
+- **Report bugs** - but be nice.
+- **Join the [Discord](<insert-discord-invite-link>)** - meet fellow devs.
+
+---
+
+## 🔥 About Flatlogic
+[Flatlogic AI Software Engineer](https://flatlogic.com/ai-software-development-agent) builds modern business software so you don't have to. Our AI Software Development Agent helps you generate, deploy, and maintain enterprise applications with minimal effort.
+
+---
+
+## 📜 License
+This template is free to use. Modify it, break it, make it your own. Just don’t try to sell it back to us. 😎
+
+---
+
+> **Questions or feedback?**  
+> Join our [Flatlogic Community Discord](https://discord.gg/flatlogic-community) or visit our [support forum](https://flatlogic.com/forum). We might even reply!
+
diff --git a/angular.json b/angular.json
new file mode 100644
index 0000000..75bfc78
--- /dev/null
+++ b/angular.json
@@ -0,0 +1,152 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": "e08c68e1-44a7-45ac-b4bd-9a6e0380538f"
+  },
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-material-admin": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "build",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": [
+              "./node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+              "./node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
+              "./node_modules/ngx-toastr/toastr.css",
+              "./node_modules/angular-calendar/css/angular-calendar.css",
+              "./node_modules/leaflet/dist/leaflet.css",
+              "src/custom-theme.scss"
+            ],
+            "allowedCommonJsDependencies": [
+              "leaflet"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": {
+                "scripts": true,
+                "styles": {
+                  "minify": true,
+                  "inlineCritical": true
+                },
+                "fonts": false
+              },
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "12mb",
+                  "maximumError": "15mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            },
+            "hmr": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.hmr.ts"
+                }
+              ]
+            },
+            "backend": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.backend.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "port": 3000,
+            "buildTarget": "angular-material-admin:build"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "angular-material-admin:build:production"
+            },
+            "hmr": {
+              "hmr": true,
+              "buildTarget": "angular-material-admin:build:hmr"
+            },
+            "backend": {
+              "buildTarget": "angular-material-admin:build:backend"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "angular-material-admin:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
+  }
+}
diff --git a/changelog.md b/changelog.md
new file mode 100644
index 0000000..6bed5f4
--- /dev/null
+++ b/changelog.md
@@ -0,0 +1,143 @@
+# Changelog
+
+## [2.0.0] - 02/03/2026
+### Updated
+- Migrated the project to a modern Angular architecture and refreshed routing/config setup.
+- Upgraded core framework dependencies and synchronized the platform stack.
+- Upgraded UI and charting ecosystem packages and aligned dependent libraries.
+- Upgraded calendar ecosystem packages and resolved related peer dependency issues.
+- Stabilized the documentation module for Angular 21 compatibility (module wiring, styles, shared imports).
+- Applied a broad set of UI fixes across key pages and widgets.
+- Modernized testing/tooling setup with Jest (unit) and Playwright (e2e) including CI workflow.
+- Added dependency security audit scripts and a security exception register for internal tracking.
+- Validated changes with successful `build`, `test`, and `e2e` runs.
+
+### Current stack versions
+- Node: `22.x`
+- npm: `>=10`
+- TypeScript: `5.9.3`
+- Angular framework (`@angular/*`): `^21.2.0`
+- Angular CLI: `^21.2.0`
+- Angular build system (`@angular-devkit/build-angular`): `^21.2.0`
+- Angular Material/CDK: `^21.2.0`
+- Angular Google Maps: `^21.2.0`
+- Angular ESLint: `21.2.0`
+- ESLint: `^9.39.3`
+- `@types/node`: `^25.3.3`
+- Font Awesome: `^7.2.0`
+- `@ng-select/ng-select`: `^21.5.2`
+- ECharts: `^6.0.0`
+- `ngx-echarts`: `^21.0.0`
+- `angular-calendar`: `^0.32.0`
+- `angular-draggable-droppable`: `^9.0.1`
+- `angular-resizable-element`: `^8.0.1`
+- `date-fns`: `^4.1.0`
+- `moment`: `^2.30.1`
+- `zone.js`: `^0.16.1`
+- `rxjs`: `7.8.2`
+- `swiper`: `^12.1.2`
+- `ngx-toastr`: `^20.0.5`
+- `leaflet`: `^1.9.4`
+- Jest: `^30.2.0`
+- Playwright: `^1.58.2`
+
+## [1.2.1] - 25/11/2024
+### Updated
+- Updated packages;
+
+## [1.2.0] - 11/06/2022
+### Updated
+
+- Updated the Angular builder;
+- Updated the Angular CLI;
+- Update Angular Material;
+- Updated packages
+
+## [1.1.0] - 11/11/2021
+### Updated
+
+- Updated apexcharts package;
+
+###Updated packages
+    apexcharts: 3.19.3 -> 3.26.0
+
+## [1.0.9] - 09/27/2021
+### Updated
+
+- Updated auth page;
+- Refactored code, fixed chat;
+
+## [1.0.8] - 09/14/2021
+### Updated
+
+- Updated login page;
+- Updated register page;
+- Added delete confirmation popup;
+
+## [1.0.7] - 05/05/2021
+### Updated
+
+- Updated the Angular builder;
+- Updated the Angular CLI;
+- Update Angular Material;
+
+###Updated packages
+    @angular/animations: 10.2.5 -> 11.2.12
+    @angular/cdk: 9.2.4 -> 11.2.11
+    @angular/common: 10.2.5 -> 11.2.12
+    @angular/compiler: 10.2.5 -> 11.2.12
+    @angular/core: 10.2.5 -> 11.2.12
+    @angular/forms: 10.2.5 -> 11.2.12
+    @angular/material: 9.2.4 -> 11.2.11
+    @angular/platform-browser: 10.2.5 -> 11.2.12
+    @angular/platform-browser-dynamic: 10.2.5 -> 11.2.12
+    @angular/router: 10.2.5 -> 11.2.12
+    @angular-devkit/build-angular: 0.1002.3 -> 0.1102.11
+    @angular/cli: 10.2.3 -> 11.2.11
+    @angular/compiler-cli: 10.2.5 -> 11.2.12
+    @angular/language-service: 10.2.5 -> 11.2.12
+    @types/jasmine: 3.5.14 -> 3.6.0
+    codelyzer: 5.1.2 -> 6.0.0
+    typescript: 4.0.7 -> 4.1.5
+
+## [1.0.6]
+
+### Fixed
+- Fix links in settings
+
+## [1.0.5]
+
+- Updated documentation
+
+## [1.0.4]
+
+### Fixed
+- Change badge text in the sidebar
+
+## [1.0.3]
+
+### Fixed
+- Fix send message button in header
+- Several fixes in user edit/add/list
+- Update badges/buttons
+- Change line color in timeline
+- Fix images in search result
+- Fix button in calendar
+- Change collapse box shadow
+- Fix titles in notification page 
+
+## [1.0.2]
+
+### Updated
+- Minor package updates
+
+## [1.0.1]
+
+### Updated
+- Updated project documentation
+- Updated styles in project.
+
+## [1.0.0]
+
+### Added
+- Added project
diff --git a/docs/security-exceptions.md b/docs/security-exceptions.md
new file mode 100644
index 0000000..3a5712e
--- /dev/null
+++ b/docs/security-exceptions.md
@@ -0,0 +1,20 @@
+# Security Exceptions Register
+
+Last reviewed: 2026-03-02
+
+## GHSA-5c6j-r48x-rmvq (`serialize-javascript` <= 7.0.2)
+
+- Severity: High
+- Status: Accepted temporarily
+- Scope: Development/build toolchain only (webpack via `@angular-devkit/build-angular`)
+- Runtime impact: Not loaded in production runtime bundle of the app
+- Upstream fix: Not available at the time of review (`npm audit` reports `No fix available`)
+- Mitigation:
+  - Track Angular CLI / `@angular-devkit/build-angular` updates and re-run audit after each upgrade
+  - Use `npm run audit:prod` in CI as the production risk gate
+  - Keep `npm run audit:full` informational until upstream fix exists
+
+## Review policy
+
+- Re-check this register on every dependency upgrade cycle.
+- Remove exceptions immediately once an upstream fix is available and applied.
diff --git a/e2e/playwright.config.cjs b/e2e/playwright.config.cjs
new file mode 100644
index 0000000..72ae2d5
--- /dev/null
+++ b/e2e/playwright.config.cjs
@@ -0,0 +1,23 @@
+// Smoke config with built-in web server bootstrap for local and CI runs.
+const { defineConfig } = require('@playwright/test');
+
+module.exports = defineConfig({
+  testDir: '.',
+  testMatch: /.*\.spec\.js/,
+  timeout: 30_000,
+  expect: {
+    timeout: 10_000,
+  },
+  use: {
+    baseURL: process.env.E2E_BASE_URL || 'http://127.0.0.1:3001',
+    headless: true,
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: 'npm run start:nobackend -- --host 127.0.0.1 --port 3001',
+    url: process.env.E2E_BASE_URL || 'http://127.0.0.1:3001',
+    reuseExistingServer: !process.env.CI,
+    timeout: 300_000,
+  },
+  reporter: [['list']],
+});
diff --git a/e2e/smoke.spec.js b/e2e/smoke.spec.js
new file mode 100644
index 0000000..1a4ac51
--- /dev/null
+++ b/e2e/smoke.spec.js
@@ -0,0 +1,79 @@
+const { test, expect } = require('@playwright/test');
+
+async function mockAuthenticatedSession(page) {
+  await page.addInitScript(() => {
+    window.localStorage.setItem('token', 'e2e-token');
+    window.localStorage.setItem(
+      'user',
+      JSON.stringify({ email: 'admin@flatlogic.com' }),
+    );
+  });
+}
+
+async function openProtectedRoute(page, path) {
+  await page.goto('/dashboard', { waitUntil: 'networkidle' });
+  await page.evaluate((targetPath) => {
+    window.history.pushState({}, '', targetPath);
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  }, path);
+}
+
+test.describe('Core smoke', () => {
+  test('login page renders', async ({ page }) => {
+    await page.goto('/login');
+    await expect(page).toHaveURL(/\/login$/);
+    await expect(page.getByRole('button', { name: /login/i })).toBeVisible();
+  });
+
+  test('dashboard page renders', async ({ page }) => {
+    await mockAuthenticatedSession(page);
+    await page.goto('/dashboard');
+    await expect(page).toHaveURL(/\/dashboard$/);
+    await expect(page.getByText(/overview/i).first()).toBeVisible();
+  });
+
+  test('users list route renders', async ({ page }) => {
+    await mockAuthenticatedSession(page);
+    await openProtectedRoute(page, '/admin/users');
+    await expect(page).toHaveURL(/\/admin\/users(\/list)?$/);
+    await expect(
+      page.locator(
+        'button:has-text("New"), button:has-text("Add filter"), button:has-text("Add"), p.table-title:has-text("Users"), table.table, table[mat-table]',
+      ).first(),
+    ).toBeVisible();
+  });
+
+  test('users list -> create -> back to list', async ({ page }) => {
+    await mockAuthenticatedSession(page);
+    await openProtectedRoute(page, '/admin/users');
+    await expect(page).toHaveURL(/\/admin\/users(\/list)?$/);
+
+    await page.getByRole('button', { name: /^\s*new\s*$/i }).first().click();
+    await expect(page).toHaveURL(/\/admin\/users\/new$/);
+    await expect(
+      page.locator('h4:has-text("New Users"), button:has-text("Create")').first(),
+    ).toBeVisible();
+
+    await page.getByRole('button', { name: /^\s*cancel\s*$/i }).first().click();
+    await expect(page).toHaveURL(/\/admin\/users(\/list)?$/);
+  });
+
+  test('profile route renders', async ({ page }) => {
+    await mockAuthenticatedSession(page);
+    await openProtectedRoute(page, '/user/profile');
+    await expect(page).toHaveURL(/\/user\/profile$/);
+    await expect(
+      page.locator('p:has-text("Views"), p:has-text("Updates")').first(),
+    ).toBeVisible();
+  });
+
+  test('change-password route renders', async ({ page }) => {
+    await mockAuthenticatedSession(page);
+    await openProtectedRoute(page, '/app/change-password');
+    await expect(page).toHaveURL(/\/app\/change-password$/);
+    await expect(page.getByRole('heading', { name: /change password/i })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: /change password/i }).first(),
+    ).toBeVisible();
+  });
+});
diff --git a/jest.config.cjs b/jest.config.cjs
new file mode 100644
index 0000000..ee88786
--- /dev/null
+++ b/jest.config.cjs
@@ -0,0 +1,12 @@
+const { createCjsPreset } = require('jest-preset-angular/presets');
+
+/** @type {import('jest').Config} */
+module.exports = {
+  ...createCjsPreset({
+    diagnostics: false,
+  }),
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  testMatch: ['<rootDir>/src/**/*.spec.ts'],
+  moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
+  clearMocks: true,
+};
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..f6fbe50
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,20511 @@
+{
+  "name": "angularmaterialadminfull",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "angularmaterialadminfull",
+      "dependencies": {
+        "@angular/animations": "^21.2.0",
+        "@angular/cdk": "^21.2.0",
+        "@angular/common": "^21.2.0",
+        "@angular/compiler": "^21.2.0",
+        "@angular/core": "^21.2.0",
+        "@angular/forms": "^21.2.0",
+        "@angular/google-maps": "^21.2.0",
+        "@angular/material": "^21.2.0",
+        "@angular/platform-browser": "^21.2.0",
+        "@angular/platform-browser-dynamic": "^21.2.0",
+        "@angular/router": "^21.2.0",
+        "@danielmoncada/angular-datetime-picker": "^21.0.0",
+        "@fortawesome/fontawesome-free": "^7.2.0",
+        "@fullcalendar/angular": "^6.1.20",
+        "@fullcalendar/core": "^6.1.20",
+        "@fullcalendar/daygrid": "^6.1.20",
+        "@fullcalendar/interaction": "^6.1.20",
+        "@fullcalendar/timegrid": "^6.1.20",
+        "@ng-select/ng-select": "^21.5.2",
+        "angular-calendar": "^0.32.0",
+        "angular-draggable-droppable": "^9.0.1",
+        "angular-resizable-element": "^8.0.1",
+        "date-fns": "^4.1.0",
+        "echarts": "^6.0.0",
+        "leaflet": "^1.9.4",
+        "moment": "^2.30.1",
+        "ngx-echarts": "^21.0.0",
+        "ngx-toastr": "^20.0.5",
+        "rxjs": "7.8.2",
+        "swiper": "^12.1.2",
+        "tslib": "^2.0.0",
+        "zone.js": "^0.16.1"
+      },
+      "devDependencies": {
+        "@angular-devkit/build-angular": "^21.2.0",
+        "@angular-eslint/builder": "21.2.0",
+        "@angular-eslint/eslint-plugin": "21.2.0",
+        "@angular-eslint/eslint-plugin-template": "21.2.0",
+        "@angular-eslint/schematics": "21.2.0",
+        "@angular-eslint/template-parser": "21.2.0",
+        "@angular/cli": "^21.2.0",
+        "@angular/compiler-cli": "^21.2.0",
+        "@angular/language-service": "^21.2.0",
+        "@playwright/test": "^1.58.2",
+        "@types/jest": "^30.0.0",
+        "@types/leaflet": "^1.9.21",
+        "@types/node": "^25.3.3",
+        "@typescript-eslint/eslint-plugin": "^8.56.1",
+        "@typescript-eslint/parser": "^8.56.1",
+        "eslint": "^9.39.3",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
+        "jest-preset-angular": "^16.1.1",
+        "ts-jest": "^29.4.6",
+        "typescript": "5.9.3"
+      },
+      "engines": {
+        "node": "22.x",
+        "npm": ">=10"
+      }
+    },
+    "node_modules/@acemir/cssom": {
+      "version": "0.9.31",
+      "resolved": "https://registry.npmjs.org/@acemir/cssom/-/cssom-0.9.31.tgz",
+      "integrity": "sha512-ZnR3GSaH+/vJ0YlHau21FjfLYjMpYVIzTD8M8vIEQvIGxeOXyXdzCI140rrCY862p/C/BbzWsjc1dgnM9mkoTA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@algolia/abtesting": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.14.1.tgz",
+      "integrity": "sha512-Dkj0BgPiLAaim9sbQ97UKDFHJE/880wgStAM18U++NaJ/2Cws34J5731ovJifr6E3Pv4T2CqvMXf8qLCC417Ew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-abtesting": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.48.1.tgz",
+      "integrity": "sha512-LV5qCJdj+/m9I+Aj91o+glYszrzd7CX6NgKaYdTOj4+tUYfbS62pwYgUfZprYNayhkQpVFcrW8x8ZlIHpS23Vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-analytics": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.48.1.tgz",
+      "integrity": "sha512-/AVoMqHhPm14CcHq7mwB+bUJbfCv+jrxlNvRjXAuO+TQa+V37N8k1b0ijaRBPdmSjULMd8KtJbQyUyabXOu6Kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-common": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.48.1.tgz",
+      "integrity": "sha512-VXO+qu2Ep6ota28ktvBm3sG53wUHS2n7bgLWmce5jTskdlCD0/JrV4tnBm1l7qpla1CeoQb8D7ShFhad+UoSOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-insights": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.48.1.tgz",
+      "integrity": "sha512-zl+Qyb0nLg+Y5YvKp1Ij+u9OaPaKg2/EPzTwKNiVyOHnQJlFxmXyUZL1EInczAZsEY8hVpPCLtNfhMhfxluXKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-personalization": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.48.1.tgz",
+      "integrity": "sha512-r89Qf9Oo9mKWQXumRu/1LtvVJAmEDpn8mHZMc485pRfQUMAwSSrsnaw1tQ3sszqzEgAr1c7rw6fjBI+zrAXTOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-query-suggestions": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.48.1.tgz",
+      "integrity": "sha512-TPKNPKfghKG/bMSc7mQYD9HxHRUkBZA4q1PEmHgICaSeHQscGqL4wBrKkhfPlDV1uYBKW02pbFMUhsOt7p4ZpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/client-search": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.48.1.tgz",
+      "integrity": "sha512-4Fu7dnzQyQmMFknYwTiN/HxPbH4DyxvQ1m+IxpPp5oslOgz8m6PG5qhiGbqJzH4HiT1I58ecDiCAC716UyVA8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/ingestion": {
+      "version": "1.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.48.1.tgz",
+      "integrity": "sha512-/RFq3TqtXDUUawwic/A9xylA2P3LDMO8dNhphHAUOU51b1ZLHrmZ6YYJm3df1APz7xLY1aht6okCQf+/vmrV9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/monitoring": {
+      "version": "1.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.48.1.tgz",
+      "integrity": "sha512-Of0jTeAZRyRhC7XzDSjJef0aBkgRcvRAaw0ooYRlOw57APii7lZdq+layuNdeL72BRq1snaJhoMMwkmLIpJScw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/recommend": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.48.1.tgz",
+      "integrity": "sha512-bE7JcpFXzxF5zHwj/vkl2eiCBvyR1zQ7aoUdO+GDXxGp0DGw7nI0p8Xj6u8VmRQ+RDuPcICFQcCwRIJT5tDJFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/requester-browser-xhr": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.48.1.tgz",
+      "integrity": "sha512-MK3wZ2koLDnvH/AmqIF1EKbJlhRS5j74OZGkLpxI4rYvNi9Jn/C7vb5DytBnQ4KUWts7QsmbdwHkxY5txQHXVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/requester-fetch": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.48.1.tgz",
+      "integrity": "sha512-2oDT43Y5HWRSIQMPQI4tA/W+TN/N2tjggZCUsqQV440kxzzoPGsvv9QP1GhQ4CoDa+yn6ygUsGp6Dr+a9sPPSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@algolia/requester-node-http": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.48.1.tgz",
+      "integrity": "sha512-xcaCqbhupVWhuBP1nwbk1XNvwrGljozutEiLx06mvqDf3o8cHyEgQSHS4fKJM+UAggaWVnnFW+Nne5aQ8SUJXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/client-common": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@angular-devkit/architect": {
+      "version": "0.2102.0",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2102.0.tgz",
+      "integrity": "sha512-kYFwTNzToG2SJMxj2f41w3QRtdqlrFuF+bpZrtIaHOP078Ktld8EPIp9KqB0Y46Vvs69ifby5Q1/wPD9wA3iaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/core": "21.2.0",
+        "rxjs": "7.8.2"
+      },
+      "bin": {
+        "architect": "bin/cli.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/@angular-devkit/build-angular": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-21.2.0.tgz",
+      "integrity": "sha512-owv0fJHsbTf3b2GZTpLJicwLf6fOjuEHODjvFDnREAB1mUObUi2xkf8mc99/lFIT8d+Jcz0z+xqVIdEf1VJf6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "2.3.0",
+        "@angular-devkit/architect": "0.2102.0",
+        "@angular-devkit/build-webpack": "0.2102.0",
+        "@angular-devkit/core": "21.2.0",
+        "@angular/build": "21.2.0",
+        "@babel/core": "7.29.0",
+        "@babel/generator": "7.29.1",
+        "@babel/helper-annotate-as-pure": "7.27.3",
+        "@babel/helper-split-export-declaration": "7.24.7",
+        "@babel/plugin-transform-async-generator-functions": "7.29.0",
+        "@babel/plugin-transform-async-to-generator": "7.28.6",
+        "@babel/plugin-transform-runtime": "7.29.0",
+        "@babel/preset-env": "7.29.0",
+        "@babel/runtime": "7.28.6",
+        "@discoveryjs/json-ext": "0.6.3",
+        "@ngtools/webpack": "21.2.0",
+        "ansi-colors": "4.1.3",
+        "autoprefixer": "10.4.24",
+        "babel-loader": "10.0.0",
+        "browserslist": "^4.26.0",
+        "copy-webpack-plugin": "13.0.1",
+        "css-loader": "7.1.3",
+        "esbuild-wasm": "0.27.3",
+        "http-proxy-middleware": "3.0.5",
+        "istanbul-lib-instrument": "6.0.3",
+        "jsonc-parser": "3.3.1",
+        "karma-source-map-support": "1.4.0",
+        "less": "4.4.2",
+        "less-loader": "12.3.1",
+        "license-webpack-plugin": "4.0.2",
+        "loader-utils": "3.3.1",
+        "mini-css-extract-plugin": "2.10.0",
+        "open": "11.0.0",
+        "ora": "9.3.0",
+        "picomatch": "4.0.3",
+        "piscina": "5.1.4",
+        "postcss": "8.5.6",
+        "postcss-loader": "8.2.0",
+        "resolve-url-loader": "5.0.0",
+        "rxjs": "7.8.2",
+        "sass": "1.97.3",
+        "sass-loader": "16.0.7",
+        "semver": "7.7.4",
+        "source-map-loader": "5.0.0",
+        "source-map-support": "0.5.21",
+        "terser": "5.46.0",
+        "tinyglobby": "0.2.15",
+        "tree-kill": "1.2.2",
+        "tslib": "2.8.1",
+        "webpack": "5.105.2",
+        "webpack-dev-middleware": "7.4.5",
+        "webpack-dev-server": "5.2.3",
+        "webpack-merge": "6.0.1",
+        "webpack-subresource-integrity": "5.1.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "optionalDependencies": {
+        "esbuild": "0.27.3"
+      },
+      "peerDependencies": {
+        "@angular/compiler-cli": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/localize": "^21.0.0",
+        "@angular/platform-browser": "^21.0.0",
+        "@angular/platform-server": "^21.0.0",
+        "@angular/service-worker": "^21.0.0",
+        "@angular/ssr": "^21.2.0",
+        "@web/test-runner": "^0.20.0",
+        "browser-sync": "^3.0.2",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
+        "karma": "^6.3.0",
+        "ng-packagr": "^21.0.0",
+        "protractor": "^7.0.0",
+        "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+        "typescript": ">=5.9 <6.0"
+      },
+      "peerDependenciesMeta": {
+        "@angular/core": {
+          "optional": true
+        },
+        "@angular/localize": {
+          "optional": true
+        },
+        "@angular/platform-browser": {
+          "optional": true
+        },
+        "@angular/platform-server": {
+          "optional": true
+        },
+        "@angular/service-worker": {
+          "optional": true
+        },
+        "@angular/ssr": {
+          "optional": true
+        },
+        "@web/test-runner": {
+          "optional": true
+        },
+        "browser-sync": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        },
+        "jest-environment-jsdom": {
+          "optional": true
+        },
+        "karma": {
+          "optional": true
+        },
+        "ng-packagr": {
+          "optional": true
+        },
+        "protractor": {
+          "optional": true
+        },
+        "tailwindcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular-devkit/build-webpack": {
+      "version": "0.2102.0",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.2102.0.tgz",
+      "integrity": "sha512-Za1xoxxrv8w8/B8QoYza4asDAypMjbTkeDEZi3VGiZ+QRWHNSTDsIAePQDOqs4b6Wogk898kwYYAYGyLuWEC0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/architect": "0.2102.0",
+        "rxjs": "7.8.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "^5.30.0",
+        "webpack-dev-server": "^5.0.2"
+      }
+    },
+    "node_modules/@angular-devkit/core": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-21.2.0.tgz",
+      "integrity": "sha512-HZdTn46Ca6qbb9Zef8R/+TWsk6mNKRm4rJyL3PxHP6HnVCwSPNZ0LNN9BjVREBs+UlRdXqBGFBZh5D1nBgu5GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "8.18.0",
+        "ajv-formats": "3.0.1",
+        "jsonc-parser": "3.3.1",
+        "picomatch": "4.0.3",
+        "rxjs": "7.8.2",
+        "source-map": "0.7.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "peerDependencies": {
+        "chokidar": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "chokidar": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular-devkit/core/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@angular-devkit/core/node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular-devkit/schematics": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-21.2.0.tgz",
+      "integrity": "sha512-3kn3FI5v7BQ7Zct6raek+WgvyDwOJ8wElbyC903GxMQCDBRGGcevhHvTAIHhknihEsrgplzPhTlWeMbk1JfdFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/core": "21.2.0",
+        "jsonc-parser": "3.3.1",
+        "magic-string": "0.30.21",
+        "ora": "9.3.0",
+        "rxjs": "7.8.2"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/@angular-eslint/builder": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-21.2.0.tgz",
+      "integrity": "sha512-wcp3J9cbrDwSeI/o1D/DSvMQa8zpKjc5WhRGTx33omhWijCfiVNEAiBLWiEx5Sb/dWcoX8yFNWY5jSgFVy9Sjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/architect": ">= 0.2100.0 < 0.2200.0",
+        "@angular-devkit/core": ">= 21.0.0 < 22.0.0"
+      },
+      "peerDependencies": {
+        "@angular/cli": ">= 21.0.0 < 22.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": "*"
+      }
+    },
+    "node_modules/@angular-eslint/bundled-angular-compiler": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-21.2.0.tgz",
+      "integrity": "sha512-J0DWL+j6t9ItFIyIADvzHGqwDA1qfVJ9bx+oTmJ/Hlo7cUpIRoXpcTXpug0CEEABFH0RfDu6PDG2b0FoZ1+7bg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@angular-eslint/eslint-plugin": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-21.2.0.tgz",
+      "integrity": "sha512-X2Qn2viDsjm91CEMxNrxDH3qkKpp6un0C1F1BW2p/m9J4AUVfOcXwWz9UpHFSHTRQ+YlTJbiH1ZwwAPeKhFaxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-eslint/bundled-angular-compiler": "21.2.0",
+        "@angular-eslint/utils": "21.2.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/utils": "^7.11.0 || ^8.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": "*"
+      }
+    },
+    "node_modules/@angular-eslint/eslint-plugin-template": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-21.2.0.tgz",
+      "integrity": "sha512-lJ13Dj0DjR6YiceQR0sRbyWzSzOQ6uZPwK9CJUF3wuZjYAUvL1D61zaU9QrVLtf89NVOxv+dYZHDdu3IDeIqbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-eslint/bundled-angular-compiler": "21.2.0",
+        "@angular-eslint/utils": "21.2.0",
+        "aria-query": "5.3.2",
+        "axobject-query": "4.1.0"
+      },
+      "peerDependencies": {
+        "@angular-eslint/template-parser": "21.2.0",
+        "@typescript-eslint/types": "^7.11.0 || ^8.0.0",
+        "@typescript-eslint/utils": "^7.11.0 || ^8.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": "*"
+      }
+    },
+    "node_modules/@angular-eslint/schematics": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-21.2.0.tgz",
+      "integrity": "sha512-WtT4fPKIUQ/hswy+l2GF/rKOdD+42L3fUzzcwRzNutQbe2tU9SimoSOAsay/ylWEuhIOQTs7ysPB8fUgFQoLpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/core": ">= 21.0.0 < 22.0.0",
+        "@angular-devkit/schematics": ">= 21.0.0 < 22.0.0",
+        "@angular-eslint/eslint-plugin": "21.2.0",
+        "@angular-eslint/eslint-plugin-template": "21.2.0",
+        "ignore": "7.0.5",
+        "semver": "7.7.3",
+        "strip-json-comments": "3.1.1"
+      },
+      "peerDependencies": {
+        "@angular/cli": ">= 21.0.0 < 22.0.0"
+      }
+    },
+    "node_modules/@angular-eslint/schematics/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@angular-eslint/schematics/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@angular-eslint/template-parser": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-21.2.0.tgz",
+      "integrity": "sha512-TCb3qYOC/uXKZCo56cJ6N9sHeWdFhyVqrbbYfFjTi09081T6jllgHDZL5Ms7gOMNY8KywWGGbhxwvzeA0RwTgA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-eslint/bundled-angular-compiler": "21.2.0",
+        "eslint-scope": "^9.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": "*"
+      }
+    },
+    "node_modules/@angular-eslint/template-parser/node_modules/eslint-scope": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-9.1.1.tgz",
+      "integrity": "sha512-GaUN0sWim5qc8KVErfPBWmc31LEsOkrUJbvJZV+xuL3u2phMUK4HIvXlWAakfC8W4nzlK+chPEAkYOYb5ZScIw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@types/esrecurse": "^4.3.1",
+        "@types/estree": "^1.0.8",
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@angular-eslint/template-parser/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/@angular-eslint/utils": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/utils/-/utils-21.2.0.tgz",
+      "integrity": "sha512-E19/hkuvHoNFvctBkmEiGWpy2bbC6cgbr3GNVrn2nGtbI4jnwnDFCGHv50I4LBfvj0PA9E6TWe73ejJ5qoMJWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-eslint/bundled-angular-compiler": "21.2.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/utils": "^7.11.0 || ^8.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": "*"
+      }
+    },
+    "node_modules/@angular/animations": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.2.0.tgz",
+      "integrity": "sha512-SzlLoMT/r5wKqPicx5okCAiN5UD5+VE7x/F1G6gSJCcnBfbK5PqHPUmDnMW4jw9Ode06KZDT7ntstn6fG+Ld8w==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "21.2.0"
+      }
+    },
+    "node_modules/@angular/build": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/build/-/build-21.2.0.tgz",
+      "integrity": "sha512-K0EqiHz2y7TSyD4adWD0+C/P9khKlrsSWavXWxGRvoSJC/H3I3SK5Z6BWwftBibXR1Fis7njwvl5IGAlQrDchA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "2.3.0",
+        "@angular-devkit/architect": "0.2102.0",
+        "@babel/core": "7.29.0",
+        "@babel/helper-annotate-as-pure": "7.27.3",
+        "@babel/helper-split-export-declaration": "7.24.7",
+        "@inquirer/confirm": "5.1.21",
+        "@vitejs/plugin-basic-ssl": "2.1.4",
+        "beasties": "0.4.1",
+        "browserslist": "^4.26.0",
+        "esbuild": "0.27.3",
+        "https-proxy-agent": "7.0.6",
+        "istanbul-lib-instrument": "6.0.3",
+        "jsonc-parser": "3.3.1",
+        "listr2": "9.0.5",
+        "magic-string": "0.30.21",
+        "mrmime": "2.0.1",
+        "parse5-html-rewriting-stream": "8.0.0",
+        "picomatch": "4.0.3",
+        "piscina": "5.1.4",
+        "rolldown": "1.0.0-rc.4",
+        "sass": "1.97.3",
+        "semver": "7.7.4",
+        "source-map-support": "0.5.21",
+        "tinyglobby": "0.2.15",
+        "undici": "7.22.0",
+        "vite": "7.3.1",
+        "watchpack": "2.5.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "optionalDependencies": {
+        "lmdb": "3.5.1"
+      },
+      "peerDependencies": {
+        "@angular/compiler": "^21.0.0",
+        "@angular/compiler-cli": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/localize": "^21.0.0",
+        "@angular/platform-browser": "^21.0.0",
+        "@angular/platform-server": "^21.0.0",
+        "@angular/service-worker": "^21.0.0",
+        "@angular/ssr": "^21.2.0",
+        "karma": "^6.4.0",
+        "less": "^4.2.0",
+        "ng-packagr": "^21.0.0",
+        "postcss": "^8.4.0",
+        "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+        "tslib": "^2.3.0",
+        "typescript": ">=5.9 <6.0",
+        "vitest": "^4.0.8"
+      },
+      "peerDependenciesMeta": {
+        "@angular/core": {
+          "optional": true
+        },
+        "@angular/localize": {
+          "optional": true
+        },
+        "@angular/platform-browser": {
+          "optional": true
+        },
+        "@angular/platform-server": {
+          "optional": true
+        },
+        "@angular/service-worker": {
+          "optional": true
+        },
+        "@angular/ssr": {
+          "optional": true
+        },
+        "karma": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "ng-packagr": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tailwindcss": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cdk": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-21.2.0.tgz",
+      "integrity": "sha512-1P0TNL1F51NC7JAaXabaAHY7Y1zBloLSZXfml1POa4a116V+y/QZfPGsxM0LwD1qSSXhSb2LNl7duTtJAP39bA==",
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^8.0.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^21.0.0 || ^22.0.0",
+        "@angular/core": "^21.0.0 || ^22.0.0",
+        "@angular/platform-browser": "^21.0.0 || ^22.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/cli": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.2.0.tgz",
+      "integrity": "sha512-yaGEpckqgOemcHkoWeH92i9eNrcbr9iE/dnxL+Du6s9spTAXJ2jjtYfszhmowuQZkCK5rjecMb8ctNtHlaGCjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/architect": "0.2102.0",
+        "@angular-devkit/core": "21.2.0",
+        "@angular-devkit/schematics": "21.2.0",
+        "@inquirer/prompts": "7.10.1",
+        "@listr2/prompt-adapter-inquirer": "3.0.5",
+        "@modelcontextprotocol/sdk": "1.26.0",
+        "@schematics/angular": "21.2.0",
+        "@yarnpkg/lockfile": "1.1.0",
+        "algoliasearch": "5.48.1",
+        "ini": "6.0.0",
+        "jsonc-parser": "3.3.1",
+        "listr2": "9.0.5",
+        "npm-package-arg": "13.0.2",
+        "pacote": "21.3.1",
+        "parse5-html-rewriting-stream": "8.0.0",
+        "semver": "7.7.4",
+        "yargs": "18.0.0",
+        "zod": "4.3.6"
+      },
+      "bin": {
+        "ng": "bin/ng.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/checkbox": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-4.3.2.tgz",
+      "integrity": "sha512-VXukHf0RR1doGe6Sm4F0Em7SWYLTHSsbGfJdS9Ja2bX5/D5uwVOEjr07cncLROdBvmnvCATYEWlHqYmXv2IlQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/ansi": "^1.0.2",
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/figures": "^1.0.15",
+        "@inquirer/type": "^3.0.10",
+        "yoctocolors-cjs": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/editor": {
+      "version": "4.2.23",
+      "resolved": "https://registry.npmjs.org/@inquirer/editor/-/editor-4.2.23.tgz",
+      "integrity": "sha512-aLSROkEwirotxZ1pBaP8tugXRFCxW94gwrQLxXfrZsKkfjOYC1aRvAZuhpJOb5cu4IBTJdsCigUlf2iCOu4ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/external-editor": "^1.0.3",
+        "@inquirer/type": "^3.0.10"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/expand": {
+      "version": "4.0.23",
+      "resolved": "https://registry.npmjs.org/@inquirer/expand/-/expand-4.0.23.tgz",
+      "integrity": "sha512-nRzdOyFYnpeYTTR2qFwEVmIWypzdAx/sIkCMeTNTcflFOovfqUk+HcFhQQVBftAh9gmGrpFj6QcGEqrDMDOiew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/type": "^3.0.10",
+        "yoctocolors-cjs": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/external-editor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.3.tgz",
+      "integrity": "sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chardet": "^2.1.1",
+        "iconv-lite": "^0.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/input": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/input/-/input-4.3.1.tgz",
+      "integrity": "sha512-kN0pAM4yPrLjJ1XJBjDxyfDduXOuQHrBB8aLDMueuwUGn+vNpF7Gq7TvyVxx8u4SHlFFj4trmj+a2cbpG4Jn1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/type": "^3.0.10"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/number": {
+      "version": "3.0.23",
+      "resolved": "https://registry.npmjs.org/@inquirer/number/-/number-3.0.23.tgz",
+      "integrity": "sha512-5Smv0OK7K0KUzUfYUXDXQc9jrf8OHo4ktlEayFlelCjwMXz0299Y8OrI+lj7i4gCBY15UObk76q0QtxjzFcFcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/type": "^3.0.10"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/password": {
+      "version": "4.0.23",
+      "resolved": "https://registry.npmjs.org/@inquirer/password/-/password-4.0.23.tgz",
+      "integrity": "sha512-zREJHjhT5vJBMZX/IUbyI9zVtVfOLiTO66MrF/3GFZYZ7T4YILW5MSkEYHceSii/KtRk+4i3RE7E1CUXA2jHcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/ansi": "^1.0.2",
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/type": "^3.0.10"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/prompts": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/prompts/-/prompts-7.10.1.tgz",
+      "integrity": "sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/checkbox": "^4.3.2",
+        "@inquirer/confirm": "^5.1.21",
+        "@inquirer/editor": "^4.2.23",
+        "@inquirer/expand": "^4.0.23",
+        "@inquirer/input": "^4.3.1",
+        "@inquirer/number": "^3.0.23",
+        "@inquirer/password": "^4.0.23",
+        "@inquirer/rawlist": "^4.1.11",
+        "@inquirer/search": "^3.2.2",
+        "@inquirer/select": "^4.4.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/rawlist": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@inquirer/rawlist/-/rawlist-4.1.11.tgz",
+      "integrity": "sha512-+LLQB8XGr3I5LZN/GuAHo+GpDJegQwuPARLChlMICNdwW7OwV2izlCSCxN6cqpL0sMXmbKbFcItJgdQq5EBXTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/type": "^3.0.10",
+        "yoctocolors-cjs": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/search": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/search/-/search-3.2.2.tgz",
+      "integrity": "sha512-p2bvRfENXCZdWF/U2BXvnSI9h+tuA8iNqtUKb9UWbmLYCRQxd8WkvwWvYn+3NgYaNwdUkHytJMGG4MMLucI1kA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/figures": "^1.0.15",
+        "@inquirer/type": "^3.0.10",
+        "yoctocolors-cjs": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@inquirer/select": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/select/-/select-4.4.2.tgz",
+      "integrity": "sha512-l4xMuJo55MAe+N7Qr4rX90vypFwCajSakx59qe/tMaC1aEHWLyw68wF4o0A4SLAY4E0nd+Vt+EyskeDIqu1M6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/ansi": "^1.0.2",
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/figures": "^1.0.15",
+        "@inquirer/type": "^3.0.10",
+        "yoctocolors-cjs": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/cli/node_modules/@listr2/prompt-adapter-inquirer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-3.0.5.tgz",
+      "integrity": "sha512-WELs+hj6xcilkloBXYf9XXK8tYEnKsgLj01Xl5ONUJpKjmT5hGVUzNUS5tooUxs7pGMrw+jFD/41WpqW4V3LDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/type": "^3.0.8"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "@inquirer/prompts": ">= 3 < 8",
+        "listr2": "9.0.5"
+      }
+    },
+    "node_modules/@angular/common": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.2.0.tgz",
+      "integrity": "sha512-6zJMPi0i/XDniEgv3/t2BjuDHiOG44lgIR5PYyxqGpgJ0kqB5hku/0TuentNEi1VnBYgthnfhjek7c+lakXmhw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "21.2.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/compiler": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.2.0.tgz",
+      "integrity": "sha512-0RPkma8UVNpse/VJcXT9w6SKzTMz4J/uMGj0l9enM1frg9xrx1fwi/lLmaVV9Nr9LfqPjQdxNFFlvaBB7g/2zg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@angular/compiler-cli": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.2.0.tgz",
+      "integrity": "sha512-gZd58p0/JjgdxMX3v+LjCB6e3dBIfNVr/YzXoh55TfffdBCUQY94hl1+DFQkJ72K5EX+1zbaz03dIm30kw1bGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "7.29.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14",
+        "chokidar": "^5.0.0",
+        "convert-source-map": "^1.5.1",
+        "reflect-metadata": "^0.2.0",
+        "semver": "^7.0.0",
+        "tslib": "^2.3.0",
+        "yargs": "^18.0.0"
+      },
+      "bin": {
+        "ng-xi18n": "bundles/src/bin/ng_xi18n.js",
+        "ngc": "bundles/src/bin/ngc.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/compiler": "21.2.0",
+        "typescript": ">=5.9 <6.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/core": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.2.0.tgz",
+      "integrity": "sha512-VnTbmZq3g3Q+s3nCZ8VUDMLjMezOg/bqUxAJ/DrRWCrEcTP5JO3mrNPs3FHj+qlB0T+BQP7uQv6QTzPVKybwoA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/compiler": "21.2.0",
+        "rxjs": "^6.5.3 || ^7.4.0",
+        "zone.js": "~0.15.0 || ~0.16.0"
+      },
+      "peerDependenciesMeta": {
+        "@angular/compiler": {
+          "optional": true
+        },
+        "zone.js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/forms": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.2.0.tgz",
+      "integrity": "sha512-NduUtPWLauH/FLayEDkLyaKAGqKzXbcfO7468LOWCXN3crhNVQyIWRQPOUcdpoJwDAGLpN85m3DhJhXNnA9c5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "21.2.0",
+        "@angular/core": "21.2.0",
+        "@angular/platform-browser": "21.2.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/google-maps": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/google-maps/-/google-maps-21.2.0.tgz",
+      "integrity": "sha512-eI1MnNKZ0+JUHMeSeBpYal0xX5N0I1tf9NgwfLtRugZ0+ZkL+RZKFzMPKDpwKbqGOoh5k9ZD8r7k9+WHTdjvcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/google.maps": "^3.54.10",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^21.0.0 || ^22.0.0",
+        "@angular/core": "^21.0.0 || ^22.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/language-service": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-21.2.0.tgz",
+      "integrity": "sha512-tWG/8I9kMfSk1NYlS/PvvcVg+Jx1wy4mbZFYIKfcSOoOsVuW/QyHRsHNFtHUG7ZbgzDXoHIWblEk3ESSoPlkjw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@angular/material": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-21.2.0.tgz",
+      "integrity": "sha512-GVJMgXa/jpy06b/txKMohuMDMu72Or576BSHKehnceYvI9sf25cnGGK1woNhALNDW449KReicAILujcFJ+mO6g==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "21.2.0",
+        "@angular/common": "^21.0.0 || ^22.0.0",
+        "@angular/core": "^21.0.0 || ^22.0.0",
+        "@angular/forms": "^21.0.0 || ^22.0.0",
+        "@angular/platform-browser": "^21.0.0 || ^22.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/platform-browser": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.2.0.tgz",
+      "integrity": "sha512-IUGukpvvT2B5Dl76qzk6rY7UIHUT9u4BhT2AwVz+5JqcX9KwQtYD17Gt7wj6bvIgCXKWG+CfN8Zd9DECOCYWjg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "21.2.0",
+        "@angular/common": "21.2.0",
+        "@angular/core": "21.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@angular/animations": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/platform-browser-dynamic": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-21.2.0.tgz",
+      "integrity": "sha512-eTHNTnTEP25eCyu4MJdPAAc/7Ib5XtR/dqUlzZdNoAldREPNw95FF12QMunvnen66v3CvCYdND8rAlbz2LkK7g==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "21.2.0",
+        "@angular/compiler": "21.2.0",
+        "@angular/core": "21.2.0",
+        "@angular/platform-browser": "21.2.0"
+      }
+    },
+    "node_modules/@angular/router": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.2.0.tgz",
+      "integrity": "sha512-siliJ+jJRUCRZ0cdkqc7zww9Didz56Z0Z2YPIuR2n5TZLiuJY+jAf6xotXKp/v6v8XoGJwLiRNipGgNDRIAlWA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "21.2.0",
+        "@angular/core": "21.2.0",
+        "@angular/platform-browser": "21.2.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-5.0.1.tgz",
+      "integrity": "sha512-2SZFvqMyvboVV1d15lMf7XiI3m7SDqXUuKaTymJYLN6dSGadqp+fVojqJlVoMlbZnlTmu3S0TLwLTJpvBMO1Aw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@csstools/css-calc": "^3.1.1",
+        "@csstools/css-color-parser": "^4.0.2",
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0",
+        "lru-cache": "^11.2.6"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.8.1.tgz",
+      "integrity": "sha512-MvRz1nCqW0fsy8Qz4dnLIvhOlMzqDVBabZx6lH+YywFDdjXhMY37SmpV1XFX3JzG5GWHn63j6HX6QPr3lZXHvQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@asamuzakjp/nwsapi": "^2.3.9",
+        "bidi-js": "^1.0.3",
+        "css-tree": "^3.1.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "lru-cache": "^11.2.6"
+      }
+    },
+    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@asamuzakjp/nwsapi": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
+      "integrity": "sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
+      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+      "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.6.tgz",
+      "integrity": "sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-member-expression-to-functions": "^7.28.5",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.28.6",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/traverse": "^7.28.6",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.28.5.tgz",
+      "integrity": "sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "regexpu-core": "^6.3.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.6.tgz",
+      "integrity": "sha512-mOAsxeeKkUKayvZR3HeTYD/fICpCPLJrU5ZjelT/PA6WHtNDBOE436YiaEUvHN454bRM3CebhDsIpieCc4texA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "debug": "^4.4.3",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.22.11"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.28.5.tgz",
+      "integrity": "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.5",
+        "@babel/types": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+      "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.27.1.tgz",
+      "integrity": "sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.1",
+        "@babel/helper-wrap-function": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.28.6.tgz",
+      "integrity": "sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.28.5",
+        "@babel/helper-optimise-call-expression": "^7.27.1",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+      "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.27.1",
+        "@babel/types": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz",
+      "integrity": "sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.28.6.tgz",
+      "integrity": "sha512-z+PwLziMNBeSQJonizz2AGnndLsP2DeGHIxDAn+wdHOGuo4Fo1x1HBPPXeE9TAOPHNNWQKCSlA2VZyYyyibDnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz",
+      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
+      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.28.5.tgz",
+      "integrity": "sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.27.1.tgz",
+      "integrity": "sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.27.1.tgz",
+      "integrity": "sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.27.1.tgz",
+      "integrity": "sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+        "@babel/plugin-transform-optional-chaining": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.28.6.tgz",
+      "integrity": "sha512-a0aBScVTlNaiUe35UtfxAN7A/tehvvG4/ByO6+46VPKTRSlfnAFsgKy0FUh+qAkQrDTmhDkT+IBOKlOoMUxQ0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.28.6.tgz",
+      "integrity": "sha512-pSJUpFHdx9z5nqTSirOCMtYVP2wFgoWhP0p3g8ONK/4IHhLIBd0B9NYqAvIUAhq+OkhO4VM1tENCt0cjlsNShw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.28.6.tgz",
+      "integrity": "sha512-jiLC0ma9XkQT3TKJ9uYvlakm66Pamywo+qwL+oL8HJOvc6TWdZXVfhqJr8CCzbSGUAbDOzlGHJC1U+vRfLQDvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.28.6.tgz",
+      "integrity": "sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.28.6.tgz",
+      "integrity": "sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.27.1.tgz",
+      "integrity": "sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.29.0.tgz",
+      "integrity": "sha512-va0VdWro4zlBr2JsXC+ofCPB2iG12wPtVGTWFx2WLDOM3nYQZZIGP82qku2eW/JR83sD+k2k+CsNtyEbUqhU6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-remap-async-to-generator": "^7.27.1",
+        "@babel/traverse": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.28.6.tgz",
+      "integrity": "sha512-ilTRcmbuXjsMmcZ3HASTe4caH5Tpo93PkTxF9oG2VZsSWsahydmcEHhix9Ik122RcTnZnUzPbmux4wh1swfv7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-remap-async-to-generator": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.27.1.tgz",
+      "integrity": "sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.28.6.tgz",
+      "integrity": "sha512-tt/7wOtBmwHPNMPu7ax4pdPz6shjFrmHDghvNC+FG9Qvj7D6mJcoRQIF5dy4njmxR941l6rgtvfSB2zX3VlUIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.28.6.tgz",
+      "integrity": "sha512-dY2wS3I2G7D697VHndN91TJr8/AAfXQNt5ynCTI/MpxMsSzHp+52uNivYT5wCPax3whc47DR8Ba7cmlQMg24bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.28.6.tgz",
+      "integrity": "sha512-rfQ++ghVwTWTqQ7w8qyDxL1XGihjBss4CmTgGRCTAC9RIbhVpyp4fOeZtta0Lbf+dTNIVJer6ych2ibHwkZqsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.6.tgz",
+      "integrity": "sha512-EF5KONAqC5zAqT783iMGuM2ZtmEBy+mJMOKl2BCvPZ2lVrwvXnB6o+OBWCS+CoeCCpVRF2sA2RBKUxvT8tQT5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-replace-supers": "^7.28.6",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.28.6.tgz",
+      "integrity": "sha512-bcc3k0ijhHbc2lEfpFHgx7eYw9KNXqOerKWfzbxEHUGKnS3sz9C4CNL9OiFN1297bDNfUiSO7DaLzbvHQQQ1BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/template": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.28.5.tgz",
+      "integrity": "sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.28.6.tgz",
+      "integrity": "sha512-SljjowuNKB7q5Oayv4FoPzeB74g3QgLt8IVJw9ADvWy3QnUb/01aw8I4AVv8wYnPvQz2GDDZ/g3GhcNyDBI4Bg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.27.1.tgz",
+      "integrity": "sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.29.0.tgz",
+      "integrity": "sha512-zBPcW2lFGxdiD8PUnPwJjag2J9otbcLQzvbiOzDxpYXyCuYX9agOwMPGn1prVH0a4qzhCKu24rlH4c1f7yA8rw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.27.1.tgz",
+      "integrity": "sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-explicit-resource-management": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.28.6.tgz",
+      "integrity": "sha512-Iao5Konzx2b6g7EPqTy40UZbcdXE126tTxVFr/nAIj+WItNxjKSYTEw3RC+A2/ZetmdJsgueL1KhaMCQHkLPIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/plugin-transform-destructuring": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.28.6.tgz",
+      "integrity": "sha512-WitabqiGjV/vJ0aPOLSFfNY1u9U3R7W36B03r5I2KoNix+a3sOhJ3pKFB3R5It9/UiK78NiO0KE9P21cMhlPkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.27.1.tgz",
+      "integrity": "sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.27.1.tgz",
+      "integrity": "sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.27.1.tgz",
+      "integrity": "sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/traverse": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.28.6.tgz",
+      "integrity": "sha512-Nr+hEN+0geQkzhbdgQVPoqr47lZbm+5fCUmO70722xJZd0Mvb59+33QLImGj6F+DkK3xgDi1YVysP8whD6FQAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.27.1.tgz",
+      "integrity": "sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.28.6.tgz",
+      "integrity": "sha512-+anKKair6gpi8VsM/95kmomGNMD0eLz1NQ8+Pfw5sAwWH9fGYXT50E55ZpV0pHUHWf6IUTWPM+f/7AAff+wr9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.27.1.tgz",
+      "integrity": "sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.27.1.tgz",
+      "integrity": "sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.28.6.tgz",
+      "integrity": "sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.29.0.tgz",
+      "integrity": "sha512-PrujnVFbOdUpw4UHiVwKvKRLMMic8+eC0CuNlxjsyZUiBjhFdPsewdXCkveh2KqBA9/waD0W1b4hXSOBQJezpQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.27.1.tgz",
+      "integrity": "sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.29.0.tgz",
+      "integrity": "sha512-1CZQA5KNAD6ZYQLPw7oi5ewtDNxH/2vuCh+6SmvgDfhumForvs8a1o9n0UrEoBD8HU4djO2yWngTQlXl1NDVEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.27.1.tgz",
+      "integrity": "sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.28.6.tgz",
+      "integrity": "sha512-3wKbRgmzYbw24mDJXT7N+ADXw8BC/imU9yo9c9X9NKaLF1fW+e5H1U5QjMUBe4Qo4Ox/o++IyUkl1sVCLgevKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.28.6.tgz",
+      "integrity": "sha512-SJR8hPynj8outz+SlStQSwvziMN4+Bq99it4tMIf5/Caq+3iOc0JtKyse8puvyXkk3eFRIA5ID/XfunGgO5i6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.28.6.tgz",
+      "integrity": "sha512-5rh+JR4JBC4pGkXLAcYdLHZjXudVxWMXbB6u6+E9lRL5TrGVbHt1TjxGbZ8CkmYw9zjkB7jutzOROArsqtncEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/plugin-transform-destructuring": "^7.28.5",
+        "@babel/plugin-transform-parameters": "^7.27.7",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.27.1.tgz",
+      "integrity": "sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-replace-supers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.28.6.tgz",
+      "integrity": "sha512-R8ja/Pyrv0OGAvAXQhSTmWyPJPml+0TMqXlO5w+AsMEiwb2fg3WkOvob7UxFSL3OIttFSGSRFKQsOhJ/X6HQdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.28.6.tgz",
+      "integrity": "sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.27.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.27.7.tgz",
+      "integrity": "sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.28.6.tgz",
+      "integrity": "sha512-piiuapX9CRv7+0st8lmuUlRSmX6mBcVeNQ1b4AYzJxfCMuBfB0vBXDiGSmm03pKJw1v6cZ8KSeM+oUnM6yAExg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.28.6.tgz",
+      "integrity": "sha512-b97jvNSOb5+ehyQmBpmhOCiUC5oVK4PMnpRvO7+ymFBoqYjeDHIU9jnrNUuwHOiL9RpGDoKBpSViarV+BU+eVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.27.3",
+        "@babel/helper-create-class-features-plugin": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.27.1.tgz",
+      "integrity": "sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.29.0.tgz",
+      "integrity": "sha512-FijqlqMA7DmRdg/aINBSs04y8XNTYw/lr1gJ2WsmBnnaNw1iS43EPkJW+zK7z65auG3AWRFXWj+NcTQwYptUog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regexp-modifiers": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.28.6.tgz",
+      "integrity": "sha512-QGWAepm9qxpaIs7UM9FvUSnCGlb8Ua1RhyM4/veAxLwt3gMat/LSGrZixyuj4I6+Kn9iwvqCyPTtbdxanYoWYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.27.1.tgz",
+      "integrity": "sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.29.0.tgz",
+      "integrity": "sha512-jlaRT5dJtMaMCV6fAuLbsQMSwz/QkvaHOHOSXRitGGwSpR1blCY4KUKoyP2tYO8vJcqYe8cEj96cqSztv3uF9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "babel-plugin-polyfill-corejs2": "^0.4.14",
+        "babel-plugin-polyfill-corejs3": "^0.13.0",
+        "babel-plugin-polyfill-regenerator": "^0.6.5",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.27.1.tgz",
+      "integrity": "sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.28.6.tgz",
+      "integrity": "sha512-9U4QObUC0FtJl05AsUcodau/RWDytrU6uKgkxu09mLR9HLDAtUMoPuuskm5huQsoktmsYpI+bGmq+iapDcriKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.27.1.tgz",
+      "integrity": "sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz",
+      "integrity": "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.1.tgz",
+      "integrity": "sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.27.1.tgz",
+      "integrity": "sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.28.6.tgz",
+      "integrity": "sha512-4Wlbdl/sIZjzi/8St0evF0gEZrgOswVO6aOzqxh1kDZOl9WmLrHq2HtGhnOJZmHZYKP8WZ1MDLCt5DAWwRo57A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.27.1.tgz",
+      "integrity": "sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.28.6.tgz",
+      "integrity": "sha512-/wHc/paTUmsDYN7SZkpWxogTOBNnlx7nBQYfy6JJlCT7G3mVhltk3e++N7zV0XfgGsrqBxd4rJQt9H16I21Y1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.28.5",
+        "@babel/helper-plugin-utils": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.29.0.tgz",
+      "integrity": "sha512-fNEdfc0yi16lt6IZo2Qxk3knHVdfMYX33czNb4v8yWhemoBhibCpQK/uYHtSKIiO+p/zd3+8fYVXhQdOVV608w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.28.5",
+        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.28.6",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+        "@babel/plugin-syntax-import-assertions": "^7.28.6",
+        "@babel/plugin-syntax-import-attributes": "^7.28.6",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.27.1",
+        "@babel/plugin-transform-async-generator-functions": "^7.29.0",
+        "@babel/plugin-transform-async-to-generator": "^7.28.6",
+        "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
+        "@babel/plugin-transform-block-scoping": "^7.28.6",
+        "@babel/plugin-transform-class-properties": "^7.28.6",
+        "@babel/plugin-transform-class-static-block": "^7.28.6",
+        "@babel/plugin-transform-classes": "^7.28.6",
+        "@babel/plugin-transform-computed-properties": "^7.28.6",
+        "@babel/plugin-transform-destructuring": "^7.28.5",
+        "@babel/plugin-transform-dotall-regex": "^7.28.6",
+        "@babel/plugin-transform-duplicate-keys": "^7.27.1",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.0",
+        "@babel/plugin-transform-dynamic-import": "^7.27.1",
+        "@babel/plugin-transform-explicit-resource-management": "^7.28.6",
+        "@babel/plugin-transform-exponentiation-operator": "^7.28.6",
+        "@babel/plugin-transform-export-namespace-from": "^7.27.1",
+        "@babel/plugin-transform-for-of": "^7.27.1",
+        "@babel/plugin-transform-function-name": "^7.27.1",
+        "@babel/plugin-transform-json-strings": "^7.28.6",
+        "@babel/plugin-transform-literals": "^7.27.1",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.28.6",
+        "@babel/plugin-transform-member-expression-literals": "^7.27.1",
+        "@babel/plugin-transform-modules-amd": "^7.27.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.28.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.29.0",
+        "@babel/plugin-transform-modules-umd": "^7.27.1",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.29.0",
+        "@babel/plugin-transform-new-target": "^7.27.1",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
+        "@babel/plugin-transform-numeric-separator": "^7.28.6",
+        "@babel/plugin-transform-object-rest-spread": "^7.28.6",
+        "@babel/plugin-transform-object-super": "^7.27.1",
+        "@babel/plugin-transform-optional-catch-binding": "^7.28.6",
+        "@babel/plugin-transform-optional-chaining": "^7.28.6",
+        "@babel/plugin-transform-parameters": "^7.27.7",
+        "@babel/plugin-transform-private-methods": "^7.28.6",
+        "@babel/plugin-transform-private-property-in-object": "^7.28.6",
+        "@babel/plugin-transform-property-literals": "^7.27.1",
+        "@babel/plugin-transform-regenerator": "^7.29.0",
+        "@babel/plugin-transform-regexp-modifiers": "^7.28.6",
+        "@babel/plugin-transform-reserved-words": "^7.27.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.27.1",
+        "@babel/plugin-transform-spread": "^7.28.6",
+        "@babel/plugin-transform-sticky-regex": "^7.27.1",
+        "@babel/plugin-transform-template-literals": "^7.27.1",
+        "@babel/plugin-transform-typeof-symbol": "^7.27.1",
+        "@babel/plugin-transform-unicode-escapes": "^7.27.1",
+        "@babel/plugin-transform-unicode-property-regex": "^7.28.6",
+        "@babel/plugin-transform-unicode-regex": "^7.27.1",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.28.6",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "babel-plugin-polyfill-corejs2": "^0.4.15",
+        "babel-plugin-polyfill-corejs3": "^0.14.0",
+        "babel-plugin-polyfill-regenerator": "^0.6.6",
+        "core-js-compat": "^3.48.0",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.14.0.tgz",
+      "integrity": "sha512-AvDcMxJ34W4Wgy4KBIIePQTAOP1Ie2WFwkQp3dB7FQ/f0lI5+nM96zUnYEOE1P9sEg0es5VCP0HxiWu5fUHZAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.6",
+        "core-js-compat": "^3.48.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@bramus/specificity": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@bramus/specificity/-/specificity-2.4.2.tgz",
+      "integrity": "sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "css-tree": "^3.0.0"
+      },
+      "bin": {
+        "specificity": "bin/cli.js"
+      }
+    },
+    "node_modules/@csstools/color-helpers": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-6.0.2.tgz",
+      "integrity": "sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.1.1.tgz",
+      "integrity": "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-4.0.2.tgz",
+      "integrity": "sha512-0GEfbBLmTFf0dJlpsNU7zwxRIH0/BGEMuXLTCvFYxuL1tNhqzTbtnFICyJLTNK4a+RechKP75e7w42ClXSnJQw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@csstools/color-helpers": "^6.0.2",
+        "@csstools/css-calc": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^4.0.0",
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+      "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^4.0.0"
+      }
+    },
+    "node_modules/@csstools/css-syntax-patches-for-csstree": {
+      "version": "1.0.28",
+      "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.0.28.tgz",
+      "integrity": "sha512-1NRf1CUBjnr3K7hu8BLxjQrKCxEe8FP/xmPTenAxCRZWVLbmGotkFvG9mfNpjA6k7Bw1bw4BilZq9cu19RA5pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peer": true
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+      "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    },
+    "node_modules/@danielmoncada/angular-datetime-picker": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/@danielmoncada/angular-datetime-picker/-/angular-datetime-picker-21.0.0.tgz",
+      "integrity": "sha512-F9usRgyuPaq8EEE0Ac2DI9owvyJ6TSZpdla85NS4YCgtVk/D7yZUUWbHVf1qCH6qegfpYfI67S20mhG9vGPspA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "peerDependencies": {
+        "@angular/cdk": "^19.0.0 || ^20.0.0 || ^21.0.0",
+        "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
+        "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0"
+      }
+    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.6.3.tgz",
+      "integrity": "sha512-4B4OijXeVNOPZlYA2oEwWOTkzyltLao+xbotHQeqN++Rv27Y6s818+n2Qkp8q+Fxhn0t/5lA5X1Mxktud8eayQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.17.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
+      "integrity": "sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
+      "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
+      "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
+      "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
+      "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
+      "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
+      "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
+      "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
+      "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
+      "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
+      "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
+      "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
+      "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
+      "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
+      "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
+      "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
+      "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
+      "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
+      "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
+      "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
+      "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
+      "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
+      "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.4.tgz",
+      "integrity": "sha512-4h4MVF8pmBsncB60r0wSJiIeUKTSD4m7FmTFThG8RHlsg9ajqckLm9OraguFGZE4vVdpiI1Q4+hFnisopmG6gQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.14.0",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.3",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.3",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.3.tgz",
+      "integrity": "sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz",
+      "integrity": "sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fullcalendar/angular": {
+      "version": "6.1.20",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/angular/-/angular-6.1.20.tgz",
+      "integrity": "sha512-/V5wZuZSzWZxD3dnVteqY844Onv6we5ah0RU9ZJdRIeNbBFknHLeVYpIjYKsAPwkGigYX7UGOJR6NNpyarBLlQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "12 - 21",
+        "@angular/core": "12 - 21",
+        "@fullcalendar/core": "~6.1.20"
+      }
+    },
+    "node_modules/@fullcalendar/core": {
+      "version": "6.1.20",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz",
+      "integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==",
+      "license": "MIT",
+      "dependencies": {
+        "preact": "~10.12.1"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "6.1.20",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.20.tgz",
+      "integrity": "sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.20"
+      }
+    },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.20",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.20.tgz",
+      "integrity": "sha512-p6txmc5txL0bMiPaJxe2ip6o0T384TyoD2KGdsU6UjZ5yoBlaY+dg7kxfnYKpYMzEJLG58n+URrHr2PgNL2fyA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.20"
+      }
+    },
+    "node_modules/@fullcalendar/timegrid": {
+      "version": "6.1.20",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.20.tgz",
+      "integrity": "sha512-4H+/MWbz3ntA50lrPif+7TsvMeX3R1GSYjiLULz0+zEJ7/Yfd9pupZmAwUs/PBpA6aAcFmeRr0laWfcz1a9V1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.20"
+      },
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.20"
+      }
+    },
+    "node_modules/@gar/promise-retry": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@gar/promise-retry/-/promise-retry-1.0.2.tgz",
+      "integrity": "sha512-Lm/ZLhDZcBECta3TmCQSngiQykFdfw+QtI1/GYMsZd4l3nG+P8WLB16XuS7WaBGLQ+9E+cOcWQsth9cayuGt8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@harperfast/extended-iterable": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@harperfast/extended-iterable/-/extended-iterable-1.0.3.tgz",
+      "integrity": "sha512-sSAYhQca3rDWtQUHSAPeO7axFIUJOI6hn1gjRC5APVE1a90tuyT8f5WIgRsFhhWA7htNkju2veB9eWL6YHi/Lw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true
+    },
+    "node_modules/@hono/node-server": {
+      "version": "1.19.9",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz",
+      "integrity": "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "hono": "^4"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@inquirer/ansi": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/ansi/-/ansi-1.0.2.tgz",
+      "integrity": "sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/confirm": {
+      "version": "5.1.21",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.21.tgz",
+      "integrity": "sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/type": "^3.0.10"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@inquirer/core": {
+      "version": "10.3.2",
+      "resolved": "https://registry.npmjs.org/@inquirer/core/-/core-10.3.2.tgz",
+      "integrity": "sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@inquirer/ansi": "^1.0.2",
+        "@inquirer/figures": "^1.0.15",
+        "@inquirer/type": "^3.0.10",
+        "cli-width": "^4.1.0",
+        "mute-stream": "^2.0.0",
+        "signal-exit": "^4.1.0",
+        "wrap-ansi": "^6.2.0",
+        "yoctocolors-cjs": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@inquirer/core/node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@inquirer/figures": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.15.tgz",
+      "integrity": "sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@inquirer/type": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@inquirer/type/-/type-3.0.10.tgz",
+      "integrity": "sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@types/node": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+      "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/console": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/console/-/console-30.2.0.tgz",
+      "integrity": "sha512-+O1ifRjkvYIkBqASKWgLxrpEhQAAE7hY77ALLUufSk5717KfOShg6IbqLmdsLMPdUiFvA2kTs0R7YZy+l0IzZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "jest-message-util": "30.2.0",
+        "jest-util": "30.2.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/core": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/core/-/core-30.2.0.tgz",
+      "integrity": "sha512-03W6IhuhjqTlpzh/ojut/pDB2LPRygyWX8ExpgHtQA8H/3K7+1vKmcINx5UzeOX1se6YEsBsOHQ1CRzf3fOwTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/console": "30.2.0",
+        "@jest/pattern": "30.0.1",
+        "@jest/reporters": "30.2.0",
+        "@jest/test-result": "30.2.0",
+        "@jest/transform": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "ansi-escapes": "^4.3.2",
+        "chalk": "^4.1.2",
+        "ci-info": "^4.2.0",
+        "exit-x": "^0.2.2",
+        "graceful-fs": "^4.2.11",
+        "jest-changed-files": "30.2.0",
+        "jest-config": "30.2.0",
+        "jest-haste-map": "30.2.0",
+        "jest-message-util": "30.2.0",
+        "jest-regex-util": "30.0.1",
+        "jest-resolve": "30.2.0",
+        "jest-resolve-dependencies": "30.2.0",
+        "jest-runner": "30.2.0",
+        "jest-runtime": "30.2.0",
+        "jest-snapshot": "30.2.0",
+        "jest-util": "30.2.0",
+        "jest-validate": "30.2.0",
+        "jest-watcher": "30.2.0",
+        "micromatch": "^4.0.8",
+        "pretty-format": "30.2.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/core/node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@jest/core/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@jest/diff-sequences": {
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/@jest/diff-sequences/-/diff-sequences-30.0.1.tgz",
+      "integrity": "sha512-n5H8QLDJ47QqbCNn5SuFjCRDrOLEZ0h8vAHCK5RL9Ls7Xa8AQLa/YxAc9UjFqoEDM48muwtBGjtMY5cr0PLDCw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/environment": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-30.2.0.tgz",
+      "integrity": "sha512-/QPTL7OBJQ5ac09UDRa3EQes4gt1FTEG/8jZ/4v5IVzx+Cv7dLxlVIvfvSVRiiX2drWyXeBjkMSR8hvOWSog5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/fake-timers": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "jest-mock": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment-jsdom-abstract/-/environment-jsdom-abstract-30.2.0.tgz",
+      "integrity": "sha512-kazxw2L9IPuZpQ0mEt9lu9Z98SqR74xcagANmMBU16X0lS23yPc0+S6hGLUz8kVRlomZEs/5S/Zlpqwf5yu6OQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.2.0",
+        "@jest/fake-timers": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@types/jsdom": "^21.1.7",
+        "@types/node": "*",
+        "jest-mock": "30.2.0",
+        "jest-util": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/expect": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-30.2.0.tgz",
+      "integrity": "sha512-V9yxQK5erfzx99Sf+7LbhBwNWEZ9eZay8qQ9+JSC0TrMR1pMDHLMY+BnVPacWU6Jamrh252/IKo4F1Xn/zfiqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "expect": "30.2.0",
+        "jest-snapshot": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/expect-utils": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-30.2.0.tgz",
+      "integrity": "sha512-1JnRfhqpD8HGpOmQp180Fo9Zt69zNtC+9lR+kT7NVL05tNXIi+QC8Csz7lfidMoVLPD3FnOtcmp0CEFnxExGEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/get-type": "30.1.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/fake-timers": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-30.2.0.tgz",
+      "integrity": "sha512-HI3tRLjRxAbBy0VO8dqqm7Hb2mIa8d5bg/NJkyQcOk7V118ObQML8RC5luTF/Zsg4474a+gDvhce7eTnP4GhYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.2.0",
+        "@sinonjs/fake-timers": "^13.0.0",
+        "@types/node": "*",
+        "jest-message-util": "30.2.0",
+        "jest-mock": "30.2.0",
+        "jest-util": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/get-type": {
+      "version": "30.1.0",
+      "resolved": "https://registry.npmjs.org/@jest/get-type/-/get-type-30.1.0.tgz",
+      "integrity": "sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/globals": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-30.2.0.tgz",
+      "integrity": "sha512-b63wmnKPaK+6ZZfpYhz9K61oybvbI1aMcIs80++JI1O1rR1vaxHUCNqo3ITu6NU0d4V34yZFoHMn/uoKr/Rwfw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.2.0",
+        "@jest/expect": "30.2.0",
+        "@jest/types": "30.2.0",
+        "jest-mock": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/pattern": {
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/@jest/pattern/-/pattern-30.0.1.tgz",
+      "integrity": "sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "jest-regex-util": "30.0.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/reporters": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-30.2.0.tgz",
+      "integrity": "sha512-DRyW6baWPqKMa9CzeiBjHwjd8XeAyco2Vt8XbcLFjiwCOEKOvy82GJ8QQnJE9ofsxCMPjH4MfH8fCWIHHDKpAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "30.2.0",
+        "@jest/test-result": "30.2.0",
+        "@jest/transform": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "collect-v8-coverage": "^1.0.2",
+        "exit-x": "^0.2.2",
+        "glob": "^10.3.10",
+        "graceful-fs": "^4.2.11",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^6.0.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^5.0.0",
+        "istanbul-reports": "^3.1.3",
+        "jest-message-util": "30.2.0",
+        "jest-util": "30.2.0",
+        "jest-worker": "30.2.0",
+        "slash": "^3.0.0",
+        "string-length": "^4.0.2",
+        "v8-to-istanbul": "^9.0.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/jest-worker": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-30.2.0.tgz",
+      "integrity": "sha512-0Q4Uk8WF7BUwqXHuAjc23vmopWJw5WH7w2tqBoUOZpOjW/ZnR44GXXd1r82RvnmI2GZge3ivrYXk/BE2+VtW2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@ungap/structured-clone": "^1.3.0",
+        "jest-util": "30.2.0",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.1.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@jest/reporters/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@jest/reporters/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/@jest/schemas": {
+      "version": "30.0.5",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-30.0.5.tgz",
+      "integrity": "sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sinclair/typebox": "^0.34.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/snapshot-utils": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/snapshot-utils/-/snapshot-utils-30.2.0.tgz",
+      "integrity": "sha512-0aVxM3RH6DaiLcjj/b0KrIBZhSX1373Xci4l3cW5xiUWPctZ59zQ7jj4rqcJQ/Z8JuN/4wX3FpJSa3RssVvCug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.2.0",
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "natural-compare": "^1.4.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/source-map": {
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-30.0.1.tgz",
+      "integrity": "sha512-MIRWMUUR3sdbP36oyNyhbThLHyJ2eEDClPCiHVbrYAe5g3CHRArIVpBw7cdSB5fr+ofSfIb2Tnsw8iEHL0PYQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "callsites": "^3.1.0",
+        "graceful-fs": "^4.2.11"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/test-result": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-30.2.0.tgz",
+      "integrity": "sha512-RF+Z+0CCHkARz5HT9mcQCBulb1wgCP3FBvl9VFokMX27acKphwyQsNuWH3c+ojd1LeWBLoTYoxF0zm6S/66mjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/console": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@types/istanbul-lib-coverage": "^2.0.6",
+        "collect-v8-coverage": "^1.0.2"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/test-sequencer": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-30.2.0.tgz",
+      "integrity": "sha512-wXKgU/lk8fKXMu/l5Hog1R61bL4q5GCdT6OJvdAFz1P+QrpoFuLU68eoKuVc4RbrTtNnTL5FByhWdLgOPSph+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/test-result": "30.2.0",
+        "graceful-fs": "^4.2.11",
+        "jest-haste-map": "30.2.0",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/transform": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-30.2.0.tgz",
+      "integrity": "sha512-XsauDV82o5qXbhalKxD7p4TZYYdwcaEXC77PPD2HixEFF+6YGppjrAAQurTl2ECWcEomHBMMNS9AH3kcCFx8jA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@jest/types": "30.2.0",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "babel-plugin-istanbul": "^7.0.1",
+        "chalk": "^4.1.2",
+        "convert-source-map": "^2.0.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "graceful-fs": "^4.2.11",
+        "jest-haste-map": "30.2.0",
+        "jest-regex-util": "30.0.1",
+        "jest-util": "30.2.0",
+        "micromatch": "^4.0.8",
+        "pirates": "^4.0.7",
+        "slash": "^3.0.0",
+        "write-file-atomic": "^5.0.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/transform/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jest/types": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-30.2.0.tgz",
+      "integrity": "sha512-H9xg1/sfVvyfU7o3zMfBEjQ1gcsdeTMgqHoYdN79tuLqfTtuu7WckRA1R5whDwOzxaZAeMKTYWqP+WCAi0CHsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/pattern": "30.0.1",
+        "@jest/schemas": "30.0.5",
+        "@types/istanbul-lib-coverage": "^2.0.6",
+        "@types/istanbul-reports": "^3.0.4",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.33",
+        "chalk": "^4.1.2"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@jsonjoy.com/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/buffers": {
+      "version": "17.67.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/buffers/-/buffers-17.67.0.tgz",
+      "integrity": "sha512-tfExRpYxBvi32vPs9ZHaTjSP4fHAfzSmcahOfNxtvGHcyJel+aibkPlGeBB+7AoC6hL7lXIE++8okecBxx7lcw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/codegen": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/codegen/-/codegen-1.0.0.tgz",
+      "integrity": "sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-core": {
+      "version": "4.56.10",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-core/-/fs-core-4.56.10.tgz",
+      "integrity": "sha512-PyAEA/3cnHhsGcdY+AmIU+ZPqTuZkDhCXQ2wkXypdLitSpd6d5Ivxhnq4wa2ETRWFVJGabYynBWxIijOswSmOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/fs-node-builtins": "4.56.10",
+        "@jsonjoy.com/fs-node-utils": "4.56.10",
+        "thingies": "^2.5.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-fsa": {
+      "version": "4.56.10",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-fsa/-/fs-fsa-4.56.10.tgz",
+      "integrity": "sha512-/FVK63ysNzTPOnCCcPoPHt77TOmachdMS422txM4KhxddLdbW1fIbFMYH0AM0ow/YchCyS5gqEjKLNyv71j/5Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/fs-core": "4.56.10",
+        "@jsonjoy.com/fs-node-builtins": "4.56.10",
+        "@jsonjoy.com/fs-node-utils": "4.56.10",
+        "thingies": "^2.5.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-node": {
+      "version": "4.56.10",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-node/-/fs-node-4.56.10.tgz",
+      "integrity": "sha512-7R4Gv3tkUdW3dXfXiOkqxkElxKNVdd8BDOWC0/dbERd0pXpPY+s2s1Mino+aTvkGrFPiY+mmVxA7zhskm4Ue4Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/fs-core": "4.56.10",
+        "@jsonjoy.com/fs-node-builtins": "4.56.10",
+        "@jsonjoy.com/fs-node-utils": "4.56.10",
+        "@jsonjoy.com/fs-print": "4.56.10",
+        "@jsonjoy.com/fs-snapshot": "4.56.10",
+        "glob-to-regex.js": "^1.0.0",
+        "thingies": "^2.5.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-node-builtins": {
+      "version": "4.56.10",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-node-builtins/-/fs-node-builtins-4.56.10.tgz",
+      "integrity": "sha512-uUnKz8R0YJyKq5jXpZtkGV9U0pJDt8hmYcLRrPjROheIfjMXsz82kXMgAA/qNg0wrZ1Kv+hrg7azqEZx6XZCVw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-node-to-fsa": {
+      "version": "4.56.10",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-node-to-fsa/-/fs-node-to-fsa-4.56.10.tgz",
+      "integrity": "sha512-oH+O6Y4lhn9NyG6aEoFwIBNKZeYy66toP5LJcDOMBgL99BKQMUf/zWJspdRhMdn/3hbzQsZ8EHHsuekbFLGUWw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/fs-fsa": "4.56.10",
+        "@jsonjoy.com/fs-node-builtins": "4.56.10",
+        "@jsonjoy.com/fs-node-utils": "4.56.10"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-node-utils": {
+      "version": "4.56.10",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-node-utils/-/fs-node-utils-4.56.10.tgz",
+      "integrity": "sha512-8EuPBgVI2aDPwFdaNQeNpHsyqPi3rr+85tMNG/lHvQLiVjzoZsvxA//Xd8aB567LUhy4QS03ptT+unkD/DIsNg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/fs-node-builtins": "4.56.10"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-print": {
+      "version": "4.56.10",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-print/-/fs-print-4.56.10.tgz",
+      "integrity": "sha512-JW4fp5mAYepzFsSGrQ48ep8FXxpg4niFWHdF78wDrFGof7F3tKDJln72QFDEn/27M1yHd4v7sKHHVPh78aWcEw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/fs-node-utils": "4.56.10",
+        "tree-dump": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-snapshot": {
+      "version": "4.56.10",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-snapshot/-/fs-snapshot-4.56.10.tgz",
+      "integrity": "sha512-DkR6l5fj7+qj0+fVKm/OOXMGfDFCGXLfyHkORH3DF8hxkpDgIHbhf/DwncBMs2igu/ST7OEkexn1gIqoU6Y+9g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/buffers": "^17.65.0",
+        "@jsonjoy.com/fs-node-utils": "4.56.10",
+        "@jsonjoy.com/json-pack": "^17.65.0",
+        "@jsonjoy.com/util": "^17.65.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/base64": {
+      "version": "17.67.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-17.67.0.tgz",
+      "integrity": "sha512-5SEsJGsm15aP8TQGkDfJvz9axgPwAEm98S5DxOuYe8e1EbfajcDmgeXXzccEjh+mLnjqEKrkBdjHWS5vFNwDdw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/codegen": {
+      "version": "17.67.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/codegen/-/codegen-17.67.0.tgz",
+      "integrity": "sha512-idnkUplROpdBOV0HMcwhsCUS5TRUi9poagdGs70A6S4ux9+/aPuKbh8+UYRTLYQHtXvAdNfQWXDqZEx5k4Dj2Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/json-pack": {
+      "version": "17.67.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-17.67.0.tgz",
+      "integrity": "sha512-t0ejURcGaZsn1ClbJ/3kFqSOjlryd92eQY465IYrezsXmPcfHPE/av4twRSxf6WE+TkZgLY+71vCZbiIiFKA/w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/base64": "17.67.0",
+        "@jsonjoy.com/buffers": "17.67.0",
+        "@jsonjoy.com/codegen": "17.67.0",
+        "@jsonjoy.com/json-pointer": "17.67.0",
+        "@jsonjoy.com/util": "17.67.0",
+        "hyperdyperid": "^1.2.0",
+        "thingies": "^2.5.0",
+        "tree-dump": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/json-pointer": {
+      "version": "17.67.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pointer/-/json-pointer-17.67.0.tgz",
+      "integrity": "sha512-+iqOFInH+QZGmSuaybBUNdh7yvNrXvqR+h3wjXm0N/3JK1EyyFAeGJvqnmQL61d1ARLlk/wJdFKSL+LHJ1eaUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/util": "17.67.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/util": {
+      "version": "17.67.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-17.67.0.tgz",
+      "integrity": "sha512-6+8xBaz1rLSohlGh68D1pdw3AwDi9xydm8QNlAFkvnavCJYSze+pxoW2VKP8p308jtlMRLs5NTHfPlZLd4w7ew==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/buffers": "17.67.0",
+        "@jsonjoy.com/codegen": "17.67.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/json-pack": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.21.0.tgz",
+      "integrity": "sha512-+AKG+R2cfZMShzrF2uQw34v3zbeDYUqnQ+jg7ORic3BGtfw9p/+N6RJbq/kkV8JmYZaINknaEQ2m0/f693ZPpg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/base64": "^1.1.2",
+        "@jsonjoy.com/buffers": "^1.2.0",
+        "@jsonjoy.com/codegen": "^1.0.0",
+        "@jsonjoy.com/json-pointer": "^1.0.2",
+        "@jsonjoy.com/util": "^1.9.0",
+        "hyperdyperid": "^1.2.0",
+        "thingies": "^2.5.0",
+        "tree-dump": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/json-pack/node_modules/@jsonjoy.com/buffers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/buffers/-/buffers-1.2.1.tgz",
+      "integrity": "sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/json-pointer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pointer/-/json-pointer-1.0.2.tgz",
+      "integrity": "sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/codegen": "^1.0.0",
+        "@jsonjoy.com/util": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/util": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.9.0.tgz",
+      "integrity": "sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/buffers": "^1.0.0",
+        "@jsonjoy.com/codegen": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@jsonjoy.com/util/node_modules/@jsonjoy.com/buffers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jsonjoy.com/buffers/-/buffers-1.2.1.tgz",
+      "integrity": "sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@leichtgewicht/ip-codec": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
+      "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@lmdb/lmdb-darwin-arm64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.5.1.tgz",
+      "integrity": "sha512-tpfN4kKrrMpQ+If1l8bhmoNkECJi0iOu6AEdrTJvWVC+32sLxTARX5Rsu579mPImRP9YFWfWgeRQ5oav7zApQQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@lmdb/lmdb-darwin-x64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-3.5.1.tgz",
+      "integrity": "sha512-+a2tTfc3rmWhLAolFUWRgJtpSuu+Fw/yjn4rF406NMxhfjbMuiOUTDRvRlMFV+DzyjkwnokisskHbCWkS3Ly5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@lmdb/lmdb-linux-arm": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-3.5.1.tgz",
+      "integrity": "sha512-0EgcE6reYr8InjD7V37EgXcYrloqpxVPINy3ig1MwDSbl6LF/vXTYRH9OE1Ti1D8YZnB35ZH9aTcdfSb5lql2A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@lmdb/lmdb-linux-arm64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-3.5.1.tgz",
+      "integrity": "sha512-aoERa5B6ywXdyFeYGQ1gbQpkMkDbEo45qVoXE5QpIRavqjnyPwjOulMkmkypkmsbJ5z4Wi0TBztON8agCTG0Vg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@lmdb/lmdb-linux-x64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-3.5.1.tgz",
+      "integrity": "sha512-SqNDY1+vpji7bh0sFH5wlWyFTOzjbDOl0/kB5RLLYDAFyd/uw3n7wyrmas3rYPpAW7z18lMOi1yKlTPv967E3g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@lmdb/lmdb-win32-arm64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-arm64/-/lmdb-win32-arm64-3.5.1.tgz",
+      "integrity": "sha512-50v0O1Lt37cwrmR9vWZK5hRW0Aw+KEmxJJ75fge/zIYdvNKB/0bSMSVR5Uc2OV9JhosIUyklOmrEvavwNJ8D6w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@lmdb/lmdb-win32-x64": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.5.1.tgz",
+      "integrity": "sha512-qwosvPyl+zpUlp3gRb7UcJ3H8S28XHCzkv0Y0EgQToXjQP91ZD67EHSCDmaLjtKhe+GVIW5om1KUpzVLA0l6pg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@mattlewis92/dom-autoscroller": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/@mattlewis92/dom-autoscroller/-/dom-autoscroller-2.4.2.tgz",
+      "integrity": "sha512-YbrUWREPGEjE/FU6foXcAT1YbVwqD/jkYnY1dFb0o4AxtP3s4xKBthlELjndZih8uwsDWgQZx1eNskRNe2BgZQ==",
+      "license": "MIT"
+    },
+    "node_modules/@modelcontextprotocol/sdk": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz",
+      "integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@hono/node-server": "^1.19.9",
+        "ajv": "^8.17.1",
+        "ajv-formats": "^3.0.1",
+        "content-type": "^1.0.5",
+        "cors": "^2.8.5",
+        "cross-spawn": "^7.0.5",
+        "eventsource": "^3.0.2",
+        "eventsource-parser": "^3.0.0",
+        "express": "^5.2.1",
+        "express-rate-limit": "^8.2.1",
+        "hono": "^4.11.4",
+        "jose": "^6.1.3",
+        "json-schema-typed": "^8.0.2",
+        "pkce-challenge": "^5.0.0",
+        "raw-body": "^3.0.0",
+        "zod": "^3.25 || ^4.0",
+        "zod-to-json-schema": "^3.25.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@cfworker/json-schema": "^4.1.1",
+        "zod": "^3.25 || ^4.0"
+      },
+      "peerDependenciesMeta": {
+        "@cfworker/json-schema": {
+          "optional": true
+        },
+        "zod": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.3.tgz",
+      "integrity": "sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@msgpackr-extract/msgpackr-extract-darwin-x64": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-3.0.3.tgz",
+      "integrity": "sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-3.0.3.tgz",
+      "integrity": "sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@msgpackr-extract/msgpackr-extract-linux-arm64": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-3.0.3.tgz",
+      "integrity": "sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@msgpackr-extract/msgpackr-extract-linux-x64": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-3.0.3.tgz",
+      "integrity": "sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@msgpackr-extract/msgpackr-extract-win32-x64": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-3.0.3.tgz",
+      "integrity": "sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@napi-rs/nice": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice/-/nice-1.1.1.tgz",
+      "integrity": "sha512-xJIPs+bYuc9ASBl+cvGsKbGrJmS6fAKaSZCnT0lhahT5rhA2VVy9/EcIgd2JhtEuFOJNx7UHNn/qiTPTY4nrQw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "optionalDependencies": {
+        "@napi-rs/nice-android-arm-eabi": "1.1.1",
+        "@napi-rs/nice-android-arm64": "1.1.1",
+        "@napi-rs/nice-darwin-arm64": "1.1.1",
+        "@napi-rs/nice-darwin-x64": "1.1.1",
+        "@napi-rs/nice-freebsd-x64": "1.1.1",
+        "@napi-rs/nice-linux-arm-gnueabihf": "1.1.1",
+        "@napi-rs/nice-linux-arm64-gnu": "1.1.1",
+        "@napi-rs/nice-linux-arm64-musl": "1.1.1",
+        "@napi-rs/nice-linux-ppc64-gnu": "1.1.1",
+        "@napi-rs/nice-linux-riscv64-gnu": "1.1.1",
+        "@napi-rs/nice-linux-s390x-gnu": "1.1.1",
+        "@napi-rs/nice-linux-x64-gnu": "1.1.1",
+        "@napi-rs/nice-linux-x64-musl": "1.1.1",
+        "@napi-rs/nice-openharmony-arm64": "1.1.1",
+        "@napi-rs/nice-win32-arm64-msvc": "1.1.1",
+        "@napi-rs/nice-win32-ia32-msvc": "1.1.1",
+        "@napi-rs/nice-win32-x64-msvc": "1.1.1"
+      }
+    },
+    "node_modules/@napi-rs/nice-android-arm-eabi": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-android-arm-eabi/-/nice-android-arm-eabi-1.1.1.tgz",
+      "integrity": "sha512-kjirL3N6TnRPv5iuHw36wnucNqXAO46dzK9oPb0wj076R5Xm8PfUVA9nAFB5ZNMmfJQJVKACAPd/Z2KYMppthw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-android-arm64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-android-arm64/-/nice-android-arm64-1.1.1.tgz",
+      "integrity": "sha512-blG0i7dXgbInN5urONoUCNf+DUEAavRffrO7fZSeoRMJc5qD+BJeNcpr54msPF6qfDD6kzs9AQJogZvT2KD5nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-darwin-arm64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-darwin-arm64/-/nice-darwin-arm64-1.1.1.tgz",
+      "integrity": "sha512-s/E7w45NaLqTGuOjC2p96pct4jRfo61xb9bU1unM/MJ/RFkKlJyJDx7OJI/O0ll/hrfpqKopuAFDV8yo0hfT7A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-darwin-x64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-darwin-x64/-/nice-darwin-x64-1.1.1.tgz",
+      "integrity": "sha512-dGoEBnVpsdcC+oHHmW1LRK5eiyzLwdgNQq3BmZIav+9/5WTZwBYX7r5ZkQC07Nxd3KHOCkgbHSh4wPkH1N1LiQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-freebsd-x64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-freebsd-x64/-/nice-freebsd-x64-1.1.1.tgz",
+      "integrity": "sha512-kHv4kEHAylMYmlNwcQcDtXjklYp4FCf0b05E+0h6nDHsZ+F0bDe04U/tXNOqrx5CmIAth4vwfkjjUmp4c4JktQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-linux-arm-gnueabihf": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-arm-gnueabihf/-/nice-linux-arm-gnueabihf-1.1.1.tgz",
+      "integrity": "sha512-E1t7K0efyKXZDoZg1LzCOLxgolxV58HCkaEkEvIYQx12ht2pa8hoBo+4OB3qh7e+QiBlp1SRf+voWUZFxyhyqg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-linux-arm64-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-arm64-gnu/-/nice-linux-arm64-gnu-1.1.1.tgz",
+      "integrity": "sha512-CIKLA12DTIZlmTaaKhQP88R3Xao+gyJxNWEn04wZwC2wmRapNnxCUZkVwggInMJvtVElA+D4ZzOU5sX4jV+SmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-linux-arm64-musl": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-arm64-musl/-/nice-linux-arm64-musl-1.1.1.tgz",
+      "integrity": "sha512-+2Rzdb3nTIYZ0YJF43qf2twhqOCkiSrHx2Pg6DJaCPYhhaxbLcdlV8hCRMHghQ+EtZQWGNcS2xF4KxBhSGeutg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-linux-ppc64-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-ppc64-gnu/-/nice-linux-ppc64-gnu-1.1.1.tgz",
+      "integrity": "sha512-4FS8oc0GeHpwvv4tKciKkw3Y4jKsL7FRhaOeiPei0X9T4Jd619wHNe4xCLmN2EMgZoeGg+Q7GY7BsvwKpL22Tg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-linux-riscv64-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-riscv64-gnu/-/nice-linux-riscv64-gnu-1.1.1.tgz",
+      "integrity": "sha512-HU0nw9uD4FO/oGCCk409tCi5IzIZpH2agE6nN4fqpwVlCn5BOq0MS1dXGjXaG17JaAvrlpV5ZeyZwSon10XOXw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-linux-s390x-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-s390x-gnu/-/nice-linux-s390x-gnu-1.1.1.tgz",
+      "integrity": "sha512-2YqKJWWl24EwrX0DzCQgPLKQBxYDdBxOHot1KWEq7aY2uYeX+Uvtv4I8xFVVygJDgf6/92h9N3Y43WPx8+PAgQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-linux-x64-gnu": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-x64-gnu/-/nice-linux-x64-gnu-1.1.1.tgz",
+      "integrity": "sha512-/gaNz3R92t+dcrfCw/96pDopcmec7oCcAQ3l/M+Zxr82KT4DljD37CpgrnXV+pJC263JkW572pdbP3hP+KjcIg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-linux-x64-musl": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-linux-x64-musl/-/nice-linux-x64-musl-1.1.1.tgz",
+      "integrity": "sha512-xScCGnyj/oppsNPMnevsBe3pvNaoK7FGvMjT35riz9YdhB2WtTG47ZlbxtOLpjeO9SqqQ2J2igCmz6IJOD5JYw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-openharmony-arm64": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-openharmony-arm64/-/nice-openharmony-arm64-1.1.1.tgz",
+      "integrity": "sha512-6uJPRVwVCLDeoOaNyeiW0gp2kFIM4r7PL2MczdZQHkFi9gVlgm+Vn+V6nTWRcu856mJ2WjYJiumEajfSm7arPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-win32-arm64-msvc": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-win32-arm64-msvc/-/nice-win32-arm64-msvc-1.1.1.tgz",
+      "integrity": "sha512-uoTb4eAvM5B2aj/z8j+Nv8OttPf2m+HVx3UjA5jcFxASvNhQriyCQF1OB1lHL43ZhW+VwZlgvjmP5qF3+59atA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-win32-ia32-msvc": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-win32-ia32-msvc/-/nice-win32-ia32-msvc-1.1.1.tgz",
+      "integrity": "sha512-CNQqlQT9MwuCsg1Vd/oKXiuH+TcsSPJmlAFc5frFyX/KkOh0UpBLEj7aoY656d5UKZQMQFP7vJNa1DNUNORvug==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/nice-win32-x64-msvc": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/nice-win32-x64-msvc/-/nice-win32-x64-msvc-1.1.1.tgz",
+      "integrity": "sha512-vB+4G/jBQCAh0jelMTY3+kgFy00Hlx2f2/1zjMoH821IbplbWZOkLiTYXQkygNTzQJTq5cvwBDgn2ppHD+bglQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.1.tgz",
+      "integrity": "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@ng-select/ng-select": {
+      "version": "21.5.2",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-21.5.2.tgz",
+      "integrity": "sha512-QFfZ00Z/UfZikK3BCyl4rWpZGd7W5YE2ScTbRcC2jH6QN8E1pNgxH1bBS05p2YEYZIA6RZ5/HcJguj3ipPy5Jw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || ^24.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/forms": "^21.0.0"
+      }
+    },
+    "node_modules/@ngtools/webpack": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-21.2.0.tgz",
+      "integrity": "sha512-UOBgwtIvN29ELit35Gc11Kxx7ISQ8H4FJglRnoTmG9l26zA9vaLklfS4JHpU/8ORou9P+6NnZlzP80+qhmJSVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      },
+      "peerDependencies": {
+        "@angular/compiler-cli": "^21.0.0",
+        "typescript": ">=5.9 <6.0",
+        "webpack": "^5.54.0"
+      }
+    },
+    "node_modules/@noble/hashes": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+      "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@npmcli/agent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-4.0.0.tgz",
+      "integrity": "sha512-kAQTcEN9E8ERLVg5AsGwLNoFb+oEG6engbqAU2P43gD4JEIkNGMHdVQ096FsOAAYpZPB0RSt0zgInKIAS1l5QA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "lru-cache": "^11.2.1",
+        "socks-proxy-agent": "^8.0.3"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/agent/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@npmcli/fs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-5.0.0.tgz",
+      "integrity": "sha512-7OsC1gNORBEawOa5+j2pXN9vsicaIOH5cPXxoR6fJOmH6/EXpJB2CajXOu1fPRFun2m1lktEFX11+P89hqO/og==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/git": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@npmcli/git/-/git-7.0.2.tgz",
+      "integrity": "sha512-oeolHDjExNAJAnlYP2qzNjMX/Xi9bmu78C9dIGr4xjobrSKbuMYCph8lTzn4vnW3NjIqVmw/f8BCfouqyJXlRg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@gar/promise-retry": "^1.0.0",
+        "@npmcli/promise-spawn": "^9.0.0",
+        "ini": "^6.0.0",
+        "lru-cache": "^11.2.1",
+        "npm-pick-manifest": "^11.0.1",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "which": "^6.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/git/node_modules/isexe": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@npmcli/git/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@npmcli/git/node_modules/which": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-6.0.1.tgz",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^4.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/installed-package-contents": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/installed-package-contents/-/installed-package-contents-4.0.0.tgz",
+      "integrity": "sha512-yNyAdkBxB72gtZ4GrwXCM0ZUedo9nIbOMKfGjt6Cu6DXf0p8y1PViZAKDC8q8kv/fufx0WTjRBdSlyrvnP7hmA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-bundled": "^5.0.0",
+        "npm-normalize-package-bin": "^5.0.0"
+      },
+      "bin": {
+        "installed-package-contents": "bin/index.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/node-gyp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/node-gyp/-/node-gyp-5.0.0.tgz",
+      "integrity": "sha512-uuG5HZFXLfyFKqg8QypsmgLQW7smiRjVc45bqD/ofZZcR/uxEjgQU8qDPv0s9TEeMUiAAU/GC5bR6++UdTirIQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/package-json": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-7.0.5.tgz",
+      "integrity": "sha512-iVuTlG3ORq2iaVa1IWUxAO/jIp77tUKBhoMjuzYW2kL4MLN1bi/ofqkZ7D7OOwh8coAx1/S2ge0rMdGv8sLSOQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^7.0.0",
+        "glob": "^13.0.0",
+        "hosted-git-info": "^9.0.0",
+        "json-parse-even-better-errors": "^5.0.0",
+        "proc-log": "^6.0.0",
+        "semver": "^7.5.3",
+        "spdx-expression-parse": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/package-json/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@npmcli/package-json/node_modules/brace-expansion": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
+      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@npmcli/package-json/node_modules/glob": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@npmcli/package-json/node_modules/json-parse-even-better-errors": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-5.0.0.tgz",
+      "integrity": "sha512-ZF1nxZ28VhQouRWhUcVlUIN3qwSgPuswK05s/HIaoetAoE/9tngVmCHjSxmSQPav1nd+lPtTL0YZ/2AFdR/iYQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/package-json/node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@npmcli/promise-spawn": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-9.0.1.tgz",
+      "integrity": "sha512-OLUaoqBuyxeTqUvjA3FZFiXUfYC1alp3Sa99gW3EUDz3tZ3CbXDdcZ7qWKBzicrJleIgucoWamWH1saAmH/l2Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "which": "^6.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/promise-spawn/node_modules/isexe": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@npmcli/promise-spawn/node_modules/which": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-6.0.1.tgz",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^4.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/redact": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@npmcli/redact/-/redact-4.0.0.tgz",
+      "integrity": "sha512-gOBg5YHMfZy+TfHArfVogwgfBeQnKbbGo3pSUyK/gSI0AVu+pEiDVcKlQb0D8Mg1LNRZILZ6XG8I5dJ4KuAd9Q==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@npmcli/run-script": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/@npmcli/run-script/-/run-script-10.0.4.tgz",
+      "integrity": "sha512-mGUWr1uMnf0le2TwfOZY4SFxZGXGfm4Jtay/nwAa2FLNAKXUoUwaGwBMNH36UHPtinWfTSJ3nqFQr0091CxVGg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/node-gyp": "^5.0.0",
+        "@npmcli/package-json": "^7.0.0",
+        "@npmcli/promise-spawn": "^9.0.0",
+        "node-gyp": "^12.1.0",
+        "proc-log": "^6.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.113.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.113.0.tgz",
+      "integrity": "sha512-Tp3XmgxwNQ9pEN9vxgJBAqdRamHibi76iowQ38O2I4PMpcvNRQNVsU2n1x1nv9yh0XoTrGFzf7cZSGxmixxrhA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher/node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/@peculiar/asn1-cms": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-cms/-/asn1-cms-2.6.1.tgz",
+      "integrity": "sha512-vdG4fBF6Lkirkcl53q6eOdn3XYKt+kJTG59edgRZORlg/3atWWEReRCx5rYE1ZzTTX6vLK5zDMjHh7vbrcXGtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.1",
+        "@peculiar/asn1-x509-attr": "^2.6.1",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-csr": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-csr/-/asn1-csr-2.6.1.tgz",
+      "integrity": "sha512-WRWnKfIocHyzFYQTka8O/tXCiBquAPSrRjXbOkHbO4qdmS6loffCEGs+rby6WxxGdJCuunnhS2duHURhjyio6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.1",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-ecc": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-ecc/-/asn1-ecc-2.6.1.tgz",
+      "integrity": "sha512-+Vqw8WFxrtDIN5ehUdvlN2m73exS2JVG0UAyfVB31gIfor3zWEAQPD+K9ydCxaj3MLen9k0JhKpu9LqviuCE1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.1",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-pfx": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-pfx/-/asn1-pfx-2.6.1.tgz",
+      "integrity": "sha512-nB5jVQy3MAAWvq0KY0R2JUZG8bO/bTLpnwyOzXyEh/e54ynGTatAR+csOnXkkVD9AFZ2uL8Z7EV918+qB1qDvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-cms": "^2.6.1",
+        "@peculiar/asn1-pkcs8": "^2.6.1",
+        "@peculiar/asn1-rsa": "^2.6.1",
+        "@peculiar/asn1-schema": "^2.6.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-pkcs8": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs8/-/asn1-pkcs8-2.6.1.tgz",
+      "integrity": "sha512-JB5iQ9Izn5yGMw3ZG4Nw3Xn/hb/G38GYF3lf7WmJb8JZUydhVGEjK/ZlFSWhnlB7K/4oqEs8HnfFIKklhR58Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.1",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-pkcs9": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs9/-/asn1-pkcs9-2.6.1.tgz",
+      "integrity": "sha512-5EV8nZoMSxeWmcxWmmcolg22ojZRgJg+Y9MX2fnE2bGRo5KQLqV5IL9kdSQDZxlHz95tHvIq9F//bvL1OeNILw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-cms": "^2.6.1",
+        "@peculiar/asn1-pfx": "^2.6.1",
+        "@peculiar/asn1-pkcs8": "^2.6.1",
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.1",
+        "@peculiar/asn1-x509-attr": "^2.6.1",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-rsa": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-rsa/-/asn1-rsa-2.6.1.tgz",
+      "integrity": "sha512-1nVMEh46SElUt5CB3RUTV4EG/z7iYc7EoaDY5ECwganibQPkZ/Y2eMsTKB/LeyrUJ+W/tKoD9WUqIy8vB+CEdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.1",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-schema": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.6.0.tgz",
+      "integrity": "sha512-xNLYLBFTBKkCzEZIw842BxytQQATQv+lDTCEMZ8C196iJcJJMBUZxrhSTxLaohMyKK8QlzRNTRkUmanucnDSqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asn1js": "^3.0.6",
+        "pvtsutils": "^1.3.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-x509": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509/-/asn1-x509-2.6.1.tgz",
+      "integrity": "sha512-O9jT5F1A2+t3r7C4VT7LYGXqkGLK7Kj1xFpz7U0isPrubwU5PbDoyYtx6MiGst29yq7pXN5vZbQFKRCP+lLZlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.6.0",
+        "asn1js": "^3.0.6",
+        "pvtsutils": "^1.3.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-x509-attr": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509-attr/-/asn1-x509-attr-2.6.1.tgz",
+      "integrity": "sha512-tlW6cxoHwgcQghnJwv3YS+9OO1737zgPogZ+CgWRUK4roEwIPzRH4JEiG770xe5HX2ATfCpmX60gurfWIF9dcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.1",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/x509": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/@peculiar/x509/-/x509-1.14.3.tgz",
+      "integrity": "sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-cms": "^2.6.0",
+        "@peculiar/asn1-csr": "^2.6.0",
+        "@peculiar/asn1-ecc": "^2.6.0",
+        "@peculiar/asn1-pkcs9": "^2.6.0",
+        "@peculiar/asn1-rsa": "^2.6.0",
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.0",
+        "pvtsutils": "^1.3.6",
+        "reflect-metadata": "^0.2.2",
+        "tslib": "^2.8.1",
+        "tsyringe": "^4.10.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@pkgr/core": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz",
+      "integrity": "sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pkgr"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-vRq9f4NzvbdZavhQbjkJBx7rRebDKYR9zHfO/Wg486+I7bSecdUapzCm5cyXoK+LHokTxgSq7A5baAXUZkIz0w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-kFgEvkWLqt3YCgKB5re9RlIrx9bRsvyVUnaTakEpOPuLGzLpLapYxE9BufJNvPg8GjT6mB1alN4yN1NjzoeM8Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-JXmaOJGsL/+rsmMfutcDjxWM2fTaVgCHGoXS7nE8Z3c9NAYjGqHvXrAhMUZvMpHS/k7Mg+X7n/MVKb7NYWKKww==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-ep3Catd6sPnHTM0P4hNEvIv5arnDvk01PfyJIJ+J3wVCG1eEaPo09tvFqdtcaTrkwQy0VWR24uz+cb4IsK53Qw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.4.tgz",
+      "integrity": "sha512-LwA5ayKIpnsgXJEwWc3h8wPiS33NMIHd9BhsV92T8VetVAbGe2qXlJwNVDGHN5cOQ22R9uYvbrQir2AB+ntT2w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.4.tgz",
+      "integrity": "sha512-AC1WsGdlV1MtGay/OQ4J9T7GRadVnpYRzTcygV1hKnypbYN20Yh4t6O1Sa2qRBMqv1etulUknqXjc3CTIsBu6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.4.tgz",
+      "integrity": "sha512-lU+6rgXXViO61B4EudxtVMXSOfiZONR29Sys5VGSetUY7X8mg9FCKIIjcPPj8xNDeYzKl+H8F/qSKOBVFJChCQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.4.tgz",
+      "integrity": "sha512-DZaN1f0PGp/bSvKhtw50pPsnln4T13ycDq1FrDWRiHmWt1JeW+UtYg9touPFf8yt993p8tS2QjybpzKNTxYEwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.4.tgz",
+      "integrity": "sha512-RnGxwZLN7fhMMAItnD6dZ7lvy+TI7ba+2V54UF4dhaWa/p8I/ys1E73KO6HmPmgz92ZkfD8TXS1IMV8+uhbR9g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-6lcI79+X8klGiGd8yHuTgQRjuuJYNggmEml+RsyN596P23l/zf9FVmJ7K0KVKkFAeYEdg0iMUKyIxiV5vebDNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.4.tgz",
+      "integrity": "sha512-wz7ohsKCAIWy91blZ/1FlpPdqrsm1xpcEOQVveWoL6+aSPKL4VUcoYmmzuLTssyZxRpEwzuIxL/GDsvpjaBtOw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.4.tgz",
+      "integrity": "sha512-cfiMrfuWCIgsFmcVG0IPuO6qTRHvF7NuG3wngX1RZzc6dU8FuBFb+J3MIR5WrdTNozlumfgL4cvz+R4ozBCvsQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.4.tgz",
+      "integrity": "sha512-p6UeR9y7ht82AH57qwGuFYn69S6CZ7LLKdCKy/8T3zS9VTrJei2/CGsTUV45Da4Z9Rbhc7G4gyWQ/Ioamqn09g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.4.tgz",
+      "integrity": "sha512-1BrrmTu0TWfOP1riA8uakjFc9bpIUGzVKETsOtzY39pPga8zELGDl8eu1Dx7/gjM5CAz14UknsUMpBO8L+YntQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
+      "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
+      "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
+      "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
+      "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
+      "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
+      "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
+      "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
+      "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
+      "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
+      "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
+      "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
+      "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
+      "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
+      "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
+      "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
+      "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
+      "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
+      "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
+      "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
+      "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
+      "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
+      "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
+      "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
+      "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@scarf/scarf": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.4.0.tgz",
+      "integrity": "sha512-xxeapPiUXdZAE3che6f3xogoJPeZgig6omHEy1rIY5WVsB3H2BHNnZH+gHG6x91SCWyQCzWGsuL2Hh3ClO5/qQ==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@schematics/angular": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-21.2.0.tgz",
+      "integrity": "sha512-GQUIeGzZwCT9/W5MAkKnkwETROPbA1eRmy3JF56jLmvr95tJnypGOG8jGYy0d+tcEVujIouh48r4J3bJQg5mrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@angular-devkit/core": "21.2.0",
+        "@angular-devkit/schematics": "21.2.0",
+        "jsonc-parser": "3.3.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
+        "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
+        "yarn": ">= 1.13.0"
+      }
+    },
+    "node_modules/@sigstore/bundle": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-4.0.0.tgz",
+      "integrity": "sha512-NwCl5Y0V6Di0NexvkTqdoVfmjTaQwoLM236r89KEojGmq/jMls8S+zb7yOwAPdXvbwfKDlP+lmXgAL4vKSQT+A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/protobuf-specs": "^0.5.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@sigstore/core": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@sigstore/core/-/core-3.1.0.tgz",
+      "integrity": "sha512-o5cw1QYhNQ9IroioJxpzexmPjfCe7gzafd2RY3qnMpxr4ZEja+Jad/U8sgFpaue6bOaF+z7RVkyKVV44FN+N8A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@sigstore/protobuf-specs": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@sigstore/protobuf-specs/-/protobuf-specs-0.5.0.tgz",
+      "integrity": "sha512-MM8XIwUjN2bwvCg1QvrMtbBmpcSHrkhFSCu1D11NyPvDQ25HEc4oG5/OcQfd/Tlf/OxmKWERDj0zGE23jQaMwA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/@sigstore/sign": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@sigstore/sign/-/sign-4.1.0.tgz",
+      "integrity": "sha512-Vx1RmLxLGnSUqx/o5/VsCjkuN5L7y+vxEEwawvc7u+6WtX2W4GNa7b9HEjmcRWohw/d6BpATXmvOwc78m+Swdg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^4.0.0",
+        "@sigstore/core": "^3.1.0",
+        "@sigstore/protobuf-specs": "^0.5.0",
+        "make-fetch-happen": "^15.0.3",
+        "proc-log": "^6.1.0",
+        "promise-retry": "^2.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@sigstore/tuf": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@sigstore/tuf/-/tuf-4.0.1.tgz",
+      "integrity": "sha512-OPZBg8y5Vc9yZjmWCHrlWPMBqW5yd8+wFNl+thMdtcWz3vjVSoJQutF8YkrzI0SLGnkuFof4HSsWUhXrf219Lw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/protobuf-specs": "^0.5.0",
+        "tuf-js": "^4.1.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@sigstore/verify": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@sigstore/verify/-/verify-3.1.0.tgz",
+      "integrity": "sha512-mNe0Iigql08YupSOGv197YdHpPPr+EzDZmfCgMc7RPNaZTw5aLN01nBl6CHJOh3BGtnMIj83EeN4butBchc8Ag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^4.0.0",
+        "@sigstore/core": "^3.1.0",
+        "@sigstore/protobuf-specs": "^0.5.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.34.48",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.34.48.tgz",
+      "integrity": "sha512-kKJTNuK3AQOrgjjotVxMrCn1sUJwM76wMszfq1kdU4uYVJjvEWuFQ6HgvLt4Xz3fSmZlTOxJ/Ie13KnIcWQXFA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
+      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "13.0.5",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-13.0.5.tgz",
+      "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.1"
+      }
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@tufjs/canonical-json": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
+      "integrity": "sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@tufjs/models": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@tufjs/models/-/models-4.1.0.tgz",
+      "integrity": "sha512-Y8cK9aggNRsqJVaKUlEYs4s7CvQ1b1ta2DVPyAimb0I2qhzjNk+A+mxvll/klL0RlfuIUei8BF7YWiua4kQqww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tufjs/canonical-json": "2.0.0",
+        "minimatch": "^10.1.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/@tufjs/models/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@tufjs/models/node_modules/brace-expansion": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
+      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@tufjs/models/node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.6",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
+      "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/bonjour": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz",
+      "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz",
+      "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/eslint": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
+      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/esrecurse": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@types/esrecurse/-/esrecurse-4.3.1.tgz",
+      "integrity": "sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/express": {
+      "version": "4.17.25",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.25.tgz",
+      "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.33",
+        "@types/qs": "*",
+        "@types/serve-static": "^1"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.19.8",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.8.tgz",
+      "integrity": "sha512-02S5fmqeoKzVZCHPZid4b8JH2eM5HzQLZWN2FohQEy/0eXTq8VXZfSN6Pcr3F6N9R/vNrj7cpgbhjie6m/1tCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/google.maps": {
+      "version": "3.58.1",
+      "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
+      "integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
+      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.17",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.17.tgz",
+      "integrity": "sha512-ED6LB+Z1AVylNTu7hdzuBqOgMnvG/ld6wGCG8wFnAzKX5uyW2K3WD52v0gnLCTK/VLpXtKckgWuyScYK6cSPaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/jest": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-30.0.0.tgz",
+      "integrity": "sha512-XTYugzhuwqWjws0CVz8QpM36+T+Dz5mTEBKhNs/esGLnCIlGdRy+Dq78NRjd7ls7r8BC8ZRMOrKlkO1hU0JOwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "expect": "^30.0.0",
+        "pretty-format": "^30.0.0"
+      }
+    },
+    "node_modules/@types/jsdom": {
+      "version": "21.1.7",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz",
+      "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
+      }
+    },
+    "node_modules/@types/jsdom/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/mime": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
+      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "25.3.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.3.tgz",
+      "integrity": "sha512-DpzbrH7wIcBaJibpKo9nnSQL0MTRdnWttGyE5haGwK86xgMOkFLp7vEyfQPGLOJh5wNYiJ3V9PmUMDhV9u8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/@types/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/retry": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
+      "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/serve-index": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz",
+      "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.15.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.10.tgz",
+      "integrity": "sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/node": "*",
+        "@types/send": "<1"
+      }
+    },
+    "node_modules/@types/serve-static/node_modules/@types/send": {
+      "version": "0.17.6",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.6.tgz",
+      "integrity": "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sockjs": {
+      "version": "0.3.36",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz",
+      "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/stack-utils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
+      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/yargs": {
+      "version": "17.0.35",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
+      "integrity": "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.1.tgz",
+      "integrity": "sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.56.1",
+        "@typescript-eslint/type-utils": "8.56.1",
+        "@typescript-eslint/utils": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.56.1",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.56.1.tgz",
+      "integrity": "sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.56.1",
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.56.1.tgz",
+      "integrity": "sha512-TAdqQTzHNNvlVFfR+hu2PDJrURiwKsUvxFn1M0h95BB8ah5jejas08jUWG4dBA68jDMI988IvtfdAI53JzEHOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.56.1",
+        "@typescript-eslint/types": "^8.56.1",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.56.1.tgz",
+      "integrity": "sha512-YAi4VDKcIZp0O4tz/haYKhmIDZFEUPOreKbfdAN3SzUDMcPhJ8QI99xQXqX+HoUVq8cs85eRKnD+rne2UAnj2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.56.1.tgz",
+      "integrity": "sha512-qOtCYzKEeyr3aR9f28mPJqBty7+DBqsdd63eO0yyDwc6vgThj2UjWfJIcsFeSucYydqcuudMOprZ+x1SpF3ZuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.56.1.tgz",
+      "integrity": "sha512-yB/7dxi7MgTtGhZdaHCemf7PuwrHMenHjmzgUW1aJpO+bBU43OycnM3Wn+DdvDO/8zzA9HlhaJ0AUGuvri4oGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1",
+        "@typescript-eslint/utils": "8.56.1",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.56.1.tgz",
+      "integrity": "sha512-dbMkdIUkIkchgGDIv7KLUpa0Mda4IYjo4IAMJUZ+3xNoUXxMsk9YtKpTHSChRS85o+H9ftm51gsK1dZReY9CVw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.56.1.tgz",
+      "integrity": "sha512-qzUL1qgalIvKWAf9C1HpvBjif+Vm6rcT5wZd4VoMb9+Km3iS3Cv9DY6dMRMDtPnwRAFyAi7YXJpTIEXLvdfPxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.56.1",
+        "@typescript-eslint/tsconfig-utils": "8.56.1",
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/visitor-keys": "8.56.1",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.3.tgz",
+      "integrity": "sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.56.1.tgz",
+      "integrity": "sha512-HPAVNIME3tABJ61siYlHzSWCGtOoeP2RTIaHXFMPqjrQKCGB9OgUVdiNgH7TJS2JNIQ5qQ4RsAUDuGaGme/KOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.56.1",
+        "@typescript-eslint/types": "8.56.1",
+        "@typescript-eslint/typescript-estree": "8.56.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.56.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.56.1.tgz",
+      "integrity": "sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.56.1",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+      "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+      "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+      "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+      "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+      "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+      "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+      "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+      "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+      "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+      "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+      "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+      "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+      "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+      "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+      "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+      "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+      "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@tybys/wasm-util": "^0.10.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+      "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+      "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+      "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@vitejs/plugin-basic-ssl": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.1.4.tgz",
+      "integrity": "sha512-HXciTXN/sDBYWgeAD4V4s0DN0g72x5mlxQhHxtYu3Tt8BLa6MzcJZUyDVFCdtjNs3bfENVHVzOsmooTVuNgAAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/wasm-gen": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/helper-wasm-section": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-opt": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1",
+        "@webassemblyjs/wast-printer": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/abbrev": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-4.0.0.tgz",
+      "integrity": "sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/accepts/node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-phases": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
+      "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "acorn": "^8.14.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/adjust-sourcemap-loader": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
+      "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "regex-parser": "^2.2.11"
+      },
+      "engines": {
+        "node": ">=8.9"
+      }
+    },
+    "node_modules/adjust-sourcemap-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/algoliasearch": {
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.48.1.tgz",
+      "integrity": "sha512-Rf7xmeuIo7nb6S4mp4abW2faW8DauZyE2faBIKFaUfP3wnpOvNSbiI5AwVhqBNj0jPgBWEvhyCu0sLjN2q77Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/abtesting": "1.14.1",
+        "@algolia/client-abtesting": "5.48.1",
+        "@algolia/client-analytics": "5.48.1",
+        "@algolia/client-common": "5.48.1",
+        "@algolia/client-insights": "5.48.1",
+        "@algolia/client-personalization": "5.48.1",
+        "@algolia/client-query-suggestions": "5.48.1",
+        "@algolia/client-search": "5.48.1",
+        "@algolia/ingestion": "1.48.1",
+        "@algolia/monitoring": "1.48.1",
+        "@algolia/recommend": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
+    },
+    "node_modules/angular-calendar": {
+      "version": "0.32.0",
+      "resolved": "https://registry.npmjs.org/angular-calendar/-/angular-calendar-0.32.0.tgz",
+      "integrity": "sha512-+iQ4j04SCxFv75bp8psx0Q9S7eefREE2IbwbeaSA3uqJcl7Rm1uo7mBwF9Pcg9gu6+U1NDVYlWzDsBpL9b4u3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@scarf/scarf": "^1.1.1",
+        "calendar-utils": "^0.12.3",
+        "positioning": "^3.0.0",
+        "tslib": "^2.4.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mattlewis92"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=20.2.0",
+        "angular-draggable-droppable": "^9.0.1",
+        "angular-resizable-element": "^8.0.0",
+        "date-fns": "^4.0.0",
+        "moment": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/angular-draggable-droppable": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/angular-draggable-droppable/-/angular-draggable-droppable-9.0.1.tgz",
+      "integrity": "sha512-nxxFzBMEzB6RsRUqnHWelt9G7QXG2wc18czYL75YhJ9IkBJOBkxXBd0ZOTeDgV9C3mmkkw+PMLJOayx0GH6gXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@mattlewis92/dom-autoscroller": "^2.4.2",
+        "tslib": "^2.4.1"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=20.0.0"
+      }
+    },
+    "node_modules/angular-resizable-element": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-8.0.1.tgz",
+      "integrity": "sha512-wHIDEm2ma6o+6gfosY7Gz2LagLe5JywtcNX3ihx4fVKEoOhnMStBmmD/4+ehmfX7GupbCjMd9INDK8NCkwhQsQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=20.0.0"
+      }
+    },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz",
+      "integrity": "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+      "dev": true,
+      "engines": [
+        "node >= 0.8.0"
+      ],
+      "license": "Apache-2.0",
+      "bin": {
+        "ansi-html": "bin/ansi-html"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/asn1js": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.7.tgz",
+      "integrity": "sha512-uLvq6KJu04qoQM6gvBfKFjlh6Gl0vOKQuR5cJMDHQkmwfMOQeN3F3SHCv9SNYSL+CRoHvOGFfllDlVz03GQjvQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.3",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.24",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.24.tgz",
+      "integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001766",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/babel-jest": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-30.2.0.tgz",
+      "integrity": "sha512-0YiBEOxWqKkSQWL9nNGGEgndoeL0ZpWrbLMNL5u/Kaxrli3Eaxlt3ZtIDktEvXt4L/R9r3ODr2zKwGM/2BjxVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/transform": "30.2.0",
+        "@types/babel__core": "^7.20.5",
+        "babel-plugin-istanbul": "^7.0.1",
+        "babel-preset-jest": "30.2.0",
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.11.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/babel-loader": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-10.0.0.tgz",
+      "integrity": "sha512-z8jt+EdS61AMw22nSfoNJAZ0vrtmhPRVi6ghL3rCeRZI8cdNYFiV5xeV3HbE7rlZZNmGH8BVccwWt8/ED0QOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.20.0 || ^20.10.0 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0",
+        "webpack": ">=5.61.0"
+      }
+    },
+    "node_modules/babel-plugin-istanbul": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-7.0.1.tgz",
+      "integrity": "sha512-D8Z6Qm8jCvVXtIRkBnqNHX0zJ37rQcFJ9u8WOS6tkYOsRdHBzypCstaxWiu5ZIlqQtviRYbgnRLSoCEvjqcqbA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "workspaces": [
+        "test/babel-8"
+      ],
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.3",
+        "istanbul-lib-instrument": "^6.0.2",
+        "test-exclude": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/babel-plugin-jest-hoist": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-30.2.0.tgz",
+      "integrity": "sha512-ftzhzSGMUnOzcCXd6WHdBGMyuwy15Wnn0iyyWGKgBDLxf9/s5ABuraCSpBX2uG0jUg4rqJnxsLc5+oYBqoxVaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/babel__core": "^7.20.5"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.15",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.15.tgz",
+      "integrity": "sha512-hR3GwrRwHUfYwGfrisXPIDP3JcYfBrW7wKE7+Au6wDYl7fm/ka1NEII6kORzxNU556JjfidZeBsO10kYvtV1aw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-define-polyfill-provider": "^0.6.6",
+        "semver": "^6.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.13.0.tgz",
+      "integrity": "sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.5",
+        "core-js-compat": "^3.43.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.6.tgz",
+      "integrity": "sha512-hYm+XLYRMvupxiQzrvXUj7YyvFFVfv5gI0R71AJzudg1g2AI2vyCPPIFEBjk162/wFzti3inBHo7isWFuEVS/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.6"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-preset-current-node-syntax": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz",
+      "integrity": "sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-import-attributes": "^7.24.7",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-jest": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-30.2.0.tgz",
+      "integrity": "sha512-US4Z3NOieAQumwFnYdUWKvUKh8+YSnS/gB3t6YBiz0bskpu7Pine8pPCheNxlPEW4wnUkma2a94YuW2q3guvCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "babel-plugin-jest-hoist": "30.2.0",
+        "babel-preset-current-node-syntax": "^1.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.11.0 || ^8.0.0-beta.1"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
+      "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/beasties": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/beasties/-/beasties-0.4.1.tgz",
+      "integrity": "sha512-2Imdcw3LznDuxAbJM26RHniOLAzE6WgrK8OuvVXCQtNBS8rsnD9zsSEa3fHl4hHpUY7BYTlrpvtPVbvu9G6neg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "css-select": "^6.0.0",
+        "css-what": "^7.0.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "htmlparser2": "^10.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.49",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-safe-parser": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.4",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.4.tgz",
+      "integrity": "sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "~1.2.0",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "on-finished": "~2.4.1",
+        "qs": "~6.14.0",
+        "raw-body": "~2.5.3",
+        "type-is": "~1.6.18",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/body-parser/node_modules/qs": {
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/bonjour-service": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz",
+      "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bs-logger": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz",
+      "integrity": "sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-json-stable-stringify": "2.x"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/bser": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "node-int64": "^0.4.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/bytestreamjs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/bytestreamjs/-/bytestreamjs-2.0.1.tgz",
+      "integrity": "sha512-U1Z/ob71V/bXfVABvNr/Kumf5VyeQRBEm6Txb0PQ6S7V5GpBM3w4Cbqz/xPDicR5tN0uvDifng8C+5qECeGwyQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/cacache": {
+      "version": "20.0.3",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-20.0.3.tgz",
+      "integrity": "sha512-3pUp4e8hv07k1QlijZu6Kn7c9+ZpWWk4j3F8N3xPuCExULobqJydKYOTj1FTq58srkJsXvO7LbGAH4C0ZU3WGw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/fs": "^5.0.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^13.0.0",
+        "lru-cache": "^11.1.0",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^2.0.1",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^7.0.2",
+        "ssri": "^13.0.0",
+        "unique-filename": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/cacache/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/cacache/node_modules/brace-expansion": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
+      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/cacache/node_modules/glob": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/cacache/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/cacache/node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/calendar-utils": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.12.4.tgz",
+      "integrity": "sha512-OYhqJdeDRRVUdMYJMUrXtR7Go+80oEcA6VK4T3zjcUloQqcOVQKs/kp7j8Yw0HiLOcGwzF50WhLmzZoUNfkM7A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "date-fns": "^4.0.0",
+        "luxon": "^3.0.0",
+        "moment": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001774",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
+      "integrity": "sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/chardet": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.1.1.tgz",
+      "integrity": "sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.4.0.tgz",
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cjs-module-lexer": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-2.2.0.tgz",
+      "integrity": "sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-3.4.0.tgz",
+      "integrity": "sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.1.1.tgz",
+      "integrity": "sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^7.1.0",
+        "string-width": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.0.tgz",
+      "integrity": "sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cli-width": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
+      "integrity": "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/clone-deep/node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/collect-v8-coverage": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.3.tgz",
+      "integrity": "sha512-1L5aqIkwPfiodaMgQunkF1zRhNqifHBmtbbbxcr6yVxxBnliw4TDOW6NxpO8DJLgJ16OT+Y4ztZqP6p/FtXnAw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz",
+      "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "compressible": "~2.0.18",
+        "debug": "2.6.9",
+        "negotiator": "~0.6.4",
+        "on-headers": "~1.1.0",
+        "safe-buffer": "5.2.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/compression/node_modules/negotiator": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
+    "node_modules/copy-webpack-plugin": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-13.0.1.tgz",
+      "integrity": "sha512-J+YV3WfhY6W/Xf9h+J1znYuqTye2xkBUIGyTPWuBAT27qajBa5mR4f8WBmfDY3YjRftT2kqZZiLi1qf0H+UOFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob-parent": "^6.0.1",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.2.0",
+        "serialize-javascript": "^6.0.2",
+        "tinyglobby": "^0.2.12"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.48.0.tgz",
+      "integrity": "sha512-OM4cAF3D6VtH/WkLtWvyNC56EZVXsZdU3iqaMG2B4WvYrlqU831pc4UtG5yp0sE9z8Y02wVN7PjW5Zf9Gt0f1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-loader": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.3.tgz",
+      "integrity": "sha512-frbERmjT0UC5lMheWpJmMilnt9GEhbZJN/heUb7/zaJYeIzj5St9HvDcfshzzOqbsS+rYpMk++2SD3vGETDSyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.40",
+        "postcss-modules-extract-imports": "^3.1.0",
+        "postcss-modules-local-by-default": "^4.0.5",
+        "postcss-modules-scope": "^3.2.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.27.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/css-select": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-6.0.0.tgz",
+      "integrity": "sha512-rZZVSLle8v0+EY8QAkDWrKhpgt6SA5OtHsgBnsj6ZaLb5dmDVOWUDtQitd9ydxxvEjhewNudS6eTVU7uOyzvXw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^7.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "nth-check": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-7.0.0.tgz",
+      "integrity": "sha512-wD5oz5xibMOPHzy13CyGmogB3phdvcDaB5t0W/Nr5Z2O/agcB8YwOz6e2Lsp10pNDzBoDO9nVa3RGs/2BttpHQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssstyle": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-6.1.0.tgz",
+      "integrity": "sha512-Ml4fP2UT2K3CUBQnVlbdV/8aFDdlY69E+YnwJM+3VUWl08S3J8c8aRuJqCkD9Py8DHZ7zNNvsfKl8psocHZEFg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@asamuzakjp/css-color": "^5.0.0",
+        "@csstools/css-syntax-patches-for-csstree": "^1.0.28",
+        "css-tree": "^3.1.0",
+        "lru-cache": "^11.2.6"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cssstyle/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "peer": true,
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/data-urls": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-7.0.0.tgz",
+      "integrity": "sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+      "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dedent": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.1.tgz",
+      "integrity": "sha512-9JmrhGZpOlEgOLdQgSm0zxFaYoQon408V1v49aqTWuXENVlnCuY9JBZcXZiCsZQWDjTm5Qf/nIvAy77mXDAjEg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "babel-plugin-macros": "^3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-browser": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
+      "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
+      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-newline": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dns-packet": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz",
+      "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/echarts": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz",
+      "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.302",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.302.tgz",
+      "integrity": "sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emittery": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
+      "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.0.tgz",
+      "integrity": "sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/err-code": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/err-code/-/err-code-2.0.3.tgz",
+      "integrity": "sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
+      "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.3",
+        "@esbuild/android-arm": "0.27.3",
+        "@esbuild/android-arm64": "0.27.3",
+        "@esbuild/android-x64": "0.27.3",
+        "@esbuild/darwin-arm64": "0.27.3",
+        "@esbuild/darwin-x64": "0.27.3",
+        "@esbuild/freebsd-arm64": "0.27.3",
+        "@esbuild/freebsd-x64": "0.27.3",
+        "@esbuild/linux-arm": "0.27.3",
+        "@esbuild/linux-arm64": "0.27.3",
+        "@esbuild/linux-ia32": "0.27.3",
+        "@esbuild/linux-loong64": "0.27.3",
+        "@esbuild/linux-mips64el": "0.27.3",
+        "@esbuild/linux-ppc64": "0.27.3",
+        "@esbuild/linux-riscv64": "0.27.3",
+        "@esbuild/linux-s390x": "0.27.3",
+        "@esbuild/linux-x64": "0.27.3",
+        "@esbuild/netbsd-arm64": "0.27.3",
+        "@esbuild/netbsd-x64": "0.27.3",
+        "@esbuild/openbsd-arm64": "0.27.3",
+        "@esbuild/openbsd-x64": "0.27.3",
+        "@esbuild/openharmony-arm64": "0.27.3",
+        "@esbuild/sunos-x64": "0.27.3",
+        "@esbuild/win32-arm64": "0.27.3",
+        "@esbuild/win32-ia32": "0.27.3",
+        "@esbuild/win32-x64": "0.27.3"
+      }
+    },
+    "node_modules/esbuild-wasm": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.27.3.tgz",
+      "integrity": "sha512-AUXuOxZ145/5Az+lIqk6TdJbxKTyDGkXMJpTExmBdbnHR6n6qAFx+F4oG9ORpVYJ9dQYeQAqzv51TO4DFKsbXw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.3",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.3.tgz",
+      "integrity": "sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.1",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.39.3",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esquery/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/eventsource": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+      "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventsource-parser": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/eventsource-parser": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
+      "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/execa/node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/execa/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/exit-x": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/exit-x/-/exit-x-0.2.2.tgz",
+      "integrity": "sha512-+I6B/IkJc1o/2tiURyz/ivu/O0nKNEArIUB5O7zBrlDVJr22SCLH3xTeEry428LvFhRzIA1g8izguxJ/gbNcVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/expect": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-30.2.0.tgz",
+      "integrity": "sha512-u/feCi0GPsI+988gU2FLcsHyAHTU0MX1Wg68NhAnN7z/+C5wqG+CY8J53N9ioe8RXgaoz0nBR/TYMf3AycUuPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/expect-utils": "30.2.0",
+        "@jest/get-type": "30.1.0",
+        "jest-matcher-utils": "30.2.0",
+        "jest-message-util": "30.2.0",
+        "jest-mock": "30.2.0",
+        "jest-util": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/exponential-backoff": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.3.tgz",
+      "integrity": "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express-rate-limit": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
+      "integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "10.0.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
+    "node_modules/express/node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express/node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express/node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/express/node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/fb-watchman": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+      "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bser": "2.1.1"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-3.0.3.tgz",
+      "integrity": "sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz",
+      "integrity": "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-package-type": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/glob-to-regex.js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/glob-to-regex.js/-/glob-to-regex.js-1.2.0.tgz",
+      "integrity": "sha512-QMwlOQKU/IzqMUOAZWubUOT8Qft+Y0KQWnX9nK3ch0CJg0tTp4TvGZsTfudYKv2NzoQSyPcnA6TYeIQ3jGichQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/handlebars": {
+      "version": "4.7.8",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz",
+      "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
+    "node_modules/handlebars/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hono": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.2.tgz",
+      "integrity": "sha512-gJnaDHXKDayjt8ue0n8Gs0A007yKXj4Xzb8+cNjZeYsSzzwKc0Lr+OZgYwVfB0pHfUs17EPoLvrOsEaJ9mj+Tg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.9.0"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-9.0.2.tgz",
+      "integrity": "sha512-M422h7o/BR3rmCQ8UHi7cyyMqKltdP9Uo+J2fXK+RSAY+wTcKOIRyhTuKv4qn+DJf3g+PL890AzId5KZpX+CBg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "lru-cache": "^11.1.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/hosted-git-info/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      }
+    },
+    "node_modules/hpack.js/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/hpack.js/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hpack.js/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/html-encoding-sniffer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
+      "integrity": "sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@exodus/bytes": "^1.6.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/html-encoding-sniffer/node_modules/@exodus/bytes": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.14.1.tgz",
+      "integrity": "sha512-OhkBFWI6GcRMUroChZiopRiSp2iAMvEBK47NhJooDqz1RERO4QuZIZnjP63TXX8GAiLABkYmX+fuQsdJ1dd2QQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/html-encoding-sniffer/node_modules/@noble/hashes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
+      "integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/htmlparser2": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.1.0.tgz",
+      "integrity": "sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.2",
+        "entities": "^7.0.1"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.2.0.tgz",
+      "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/http-proxy-middleware": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.5.tgz",
+      "integrity": "sha512-GLZZm1X38BPY4lkXA01jhwxvDoOkkXqjgVyUzVxiEK4iuRu03PZoYHhHRwxnfhQMDuaxi3vVri0YgSro/1oWqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-proxy": "^1.17.15",
+        "debug": "^4.3.6",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.3",
+        "is-plain-object": "^5.0.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/hyperdyperid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
+      "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.18"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/ignore-walk": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-8.0.0.tgz",
+      "integrity": "sha512-FCeMZT4NiRQGh+YkeKMtWrOmBgWjHjMJ26WQWrRQyoyzqevdaGSakUaJW5xQYmjLlUVk2qUnCjYVBax9EKKg8A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minimatch": "^10.0.3"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/ignore-walk/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/ignore-walk/node_modules/brace-expansion": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.4.tgz",
+      "integrity": "sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/ignore-walk/node_modules/minimatch": {
+      "version": "10.2.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.4.tgz",
+      "integrity": "sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
+      "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-6.0.0.tgz",
+      "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/ip-address": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+      "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-in-ssh": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-in-ssh/-/is-in-ssh-1.0.0.tgz",
+      "integrity": "sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
+      "integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-network-error": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.3.1.tgz",
+      "integrity": "sha512-6QCxa49rQbmUWLfk0nuGqzql9U8uaV2H6279bRErPBHe/109hCzsLUBUHfbEtvLIHBd6hyXbgedBSHevm43Edw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz",
+      "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-wsl": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz",
+      "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+      "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz",
+      "integrity": "sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/core": "^7.23.9",
+        "@babel/parser": "^7.23.9",
+        "@istanbuljs/schema": "^0.1.3",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+      "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-lib-report/node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
+      "integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.23",
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/istanbul-reports": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+      "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jest": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-30.2.0.tgz",
+      "integrity": "sha512-F26gjC0yWN8uAA5m5Ss8ZQf5nDHWGlN/xWZIh8S5SRbsEKBovwZhxGd6LJlbZYxBgCYOtreSUyb8hpXyGC5O4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/core": "30.2.0",
+        "@jest/types": "30.2.0",
+        "import-local": "^3.2.0",
+        "jest-cli": "30.2.0"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-changed-files": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-30.2.0.tgz",
+      "integrity": "sha512-L8lR1ChrRnSdfeOvTrwZMlnWV8G/LLjQ0nG9MBclwWZidA2N5FviRki0Bvh20WRMOX31/JYvzdqTJrk5oBdydQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "execa": "^5.1.1",
+        "jest-util": "30.2.0",
+        "p-limit": "^3.1.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-circus": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-30.2.0.tgz",
+      "integrity": "sha512-Fh0096NC3ZkFx05EP2OXCxJAREVxj1BcW/i6EWqqymcgYKWjyyDpral3fMxVcHXg6oZM7iULer9wGRFvfpl+Tg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.2.0",
+        "@jest/expect": "30.2.0",
+        "@jest/test-result": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "co": "^4.6.0",
+        "dedent": "^1.6.0",
+        "is-generator-fn": "^2.1.0",
+        "jest-each": "30.2.0",
+        "jest-matcher-utils": "30.2.0",
+        "jest-message-util": "30.2.0",
+        "jest-runtime": "30.2.0",
+        "jest-snapshot": "30.2.0",
+        "jest-util": "30.2.0",
+        "p-limit": "^3.1.0",
+        "pretty-format": "30.2.0",
+        "pure-rand": "^7.0.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.6"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-cli": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-30.2.0.tgz",
+      "integrity": "sha512-Os9ukIvADX/A9sLt6Zse3+nmHtHaE6hqOsjQtNiugFTbKRHYIYtZXNGNK9NChseXy7djFPjndX1tL0sCTlfpAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/core": "30.2.0",
+        "@jest/test-result": "30.2.0",
+        "@jest/types": "30.2.0",
+        "chalk": "^4.1.2",
+        "exit-x": "^0.2.2",
+        "import-local": "^3.2.0",
+        "jest-config": "30.2.0",
+        "jest-util": "30.2.0",
+        "jest-validate": "30.2.0",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-cli/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-cli/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-cli/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-config": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-30.2.0.tgz",
+      "integrity": "sha512-g4WkyzFQVWHtu6uqGmQR4CQxz/CH3yDSlhzXMWzNjDx843gYjReZnMRanjRCq5XZFuQrGDxgUaiYWE8BRfVckA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@jest/get-type": "30.1.0",
+        "@jest/pattern": "30.0.1",
+        "@jest/test-sequencer": "30.2.0",
+        "@jest/types": "30.2.0",
+        "babel-jest": "30.2.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^4.2.0",
+        "deepmerge": "^4.3.1",
+        "glob": "^10.3.10",
+        "graceful-fs": "^4.2.11",
+        "jest-circus": "30.2.0",
+        "jest-docblock": "30.2.0",
+        "jest-environment-node": "30.2.0",
+        "jest-regex-util": "30.0.1",
+        "jest-resolve": "30.2.0",
+        "jest-runner": "30.2.0",
+        "jest-util": "30.2.0",
+        "jest-validate": "30.2.0",
+        "micromatch": "^4.0.8",
+        "parse-json": "^5.2.0",
+        "pretty-format": "30.2.0",
+        "slash": "^3.0.0",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@types/node": "*",
+        "esbuild-register": ">=3.4.0",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "esbuild-register": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-config/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/jest-config/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jest-config/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jest-config/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jest-config/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jest-diff": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-30.2.0.tgz",
+      "integrity": "sha512-dQHFo3Pt4/NLlG5z4PxZ/3yZTZ1C7s9hveiOj+GCN+uT109NC2QgsoVZsVOAvbJ3RgKkvyLGXZV9+piDpWbm6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/diff-sequences": "30.0.1",
+        "@jest/get-type": "30.1.0",
+        "chalk": "^4.1.2",
+        "pretty-format": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-docblock": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-30.2.0.tgz",
+      "integrity": "sha512-tR/FFgZKS1CXluOQzZvNH3+0z9jXr3ldGSD8bhyuxvlVUwbeLOGynkunvlTMxchC5urrKndYiwCFC0DLVjpOCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-newline": "^3.1.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-each": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-30.2.0.tgz",
+      "integrity": "sha512-lpWlJlM7bCUf1mfmuqTA8+j2lNURW9eNafOy99knBM01i5CQeY5UH1vZjgT9071nDJac1M4XsbyI44oNOdhlDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/get-type": "30.1.0",
+        "@jest/types": "30.2.0",
+        "chalk": "^4.1.2",
+        "jest-util": "30.2.0",
+        "pretty-format": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-environment-jsdom": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-30.2.0.tgz",
+      "integrity": "sha512-zbBTiqr2Vl78pKp/laGBREYzbZx9ZtqPjOK4++lL4BNDhxRnahg51HtoDrk9/VjIy9IthNEWdKVd7H5bqBhiWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.2.0",
+        "@jest/environment-jsdom-abstract": "30.2.0",
+        "@types/jsdom": "^21.1.7",
+        "@types/node": "*",
+        "jsdom": "^26.1.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/@csstools/color-helpers": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
+      "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/@csstools/css-color-parser": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz",
+      "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/color-helpers": "^5.1.0",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/cssstyle": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.6.0.tgz",
+      "integrity": "sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/data-urls": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/html-encoding-sniffer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/jsdom": {
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jest-environment-jsdom/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jest-environment-jsdom/node_modules/tough-cookie": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tldts": "^6.1.32"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/tr46": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-mimetype": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/whatwg-url": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jest-environment-node": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-30.2.0.tgz",
+      "integrity": "sha512-ElU8v92QJ9UrYsKrxDIKCxu6PfNj4Hdcktcn0JX12zqNdqWHB0N+hwOnnBBXvjLd2vApZtuLUGs1QSY+MsXoNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.2.0",
+        "@jest/fake-timers": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "jest-mock": "30.2.0",
+        "jest-util": "30.2.0",
+        "jest-validate": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-haste-map": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-30.2.0.tgz",
+      "integrity": "sha512-sQA/jCb9kNt+neM0anSj6eZhLZUIhQgwDt7cPGjumgLM4rXsfb9kpnlacmvZz3Q5tb80nS+oG/if+NBKrHC+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "anymatch": "^3.1.3",
+        "fb-watchman": "^2.0.2",
+        "graceful-fs": "^4.2.11",
+        "jest-regex-util": "30.0.1",
+        "jest-util": "30.2.0",
+        "jest-worker": "30.2.0",
+        "micromatch": "^4.0.8",
+        "walker": "^1.0.8"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "^2.3.3"
+      }
+    },
+    "node_modules/jest-haste-map/node_modules/jest-worker": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-30.2.0.tgz",
+      "integrity": "sha512-0Q4Uk8WF7BUwqXHuAjc23vmopWJw5WH7w2tqBoUOZpOjW/ZnR44GXXd1r82RvnmI2GZge3ivrYXk/BE2+VtW2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@ungap/structured-clone": "^1.3.0",
+        "jest-util": "30.2.0",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.1.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-haste-map/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/jest-leak-detector": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-30.2.0.tgz",
+      "integrity": "sha512-M6jKAjyzjHG0SrQgwhgZGy9hFazcudwCNovY/9HPIicmNSBuockPSedAP9vlPK6ONFJ1zfyH/M2/YYJxOz5cdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/get-type": "30.1.0",
+        "pretty-format": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-matcher-utils": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-30.2.0.tgz",
+      "integrity": "sha512-dQ94Nq4dbzmUWkQ0ANAWS9tBRfqCrn0bV9AMYdOi/MHW726xn7eQmMeRTpX2ViC00bpNaWXq+7o4lIQ3AX13Hg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/get-type": "30.1.0",
+        "chalk": "^4.1.2",
+        "jest-diff": "30.2.0",
+        "pretty-format": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-message-util": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-30.2.0.tgz",
+      "integrity": "sha512-y4DKFLZ2y6DxTWD4cDe07RglV88ZiNEdlRfGtqahfbIjfsw1nMCPx49Uev4IA/hWn3sDKyAnSPwoYSsAEdcimw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@jest/types": "30.2.0",
+        "@types/stack-utils": "^2.0.3",
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "micromatch": "^4.0.8",
+        "pretty-format": "30.2.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.6"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-mock": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.2.0.tgz",
+      "integrity": "sha512-JNNNl2rj4b5ICpmAcq+WbLH83XswjPbjH4T7yvGzfAGCPh1rw+xVNbtk+FnRslvt9lkCcdn9i1oAoKUuFsOxRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "jest-util": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-pnp-resolver": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+      "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "jest-resolve": "*"
+      },
+      "peerDependenciesMeta": {
+        "jest-resolve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-preset-angular": {
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/jest-preset-angular/-/jest-preset-angular-16.1.1.tgz",
+      "integrity": "sha512-yrvV/86IO2mj3H33xWVEPwmLW9CJIOM7YcMBcwDWa9OXEAW9XM+47no8R06oine9+wH+QWXfFzFR3TG6nX7QRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment-jsdom-abstract": "^30.0.0",
+        "bs-logger": "^0.2.6",
+        "esbuild-wasm": ">=0.23.0",
+        "jest-util": "^30.0.0",
+        "pretty-format": "^30.0.0",
+        "ts-jest": "^29.4.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "optionalDependencies": {
+        "esbuild": ">=0.23.0"
+      },
+      "peerDependencies": {
+        "@angular/compiler-cli": ">=19.0.0 <22.0.0",
+        "@angular/core": ">=19.0.0 <22.0.0",
+        "@angular/platform-browser": ">=19.0.0 <22.0.0",
+        "@angular/platform-browser-dynamic": ">=19.0.0 <22.0.0",
+        "jest": "^30.0.0",
+        "jsdom": ">=26.0.0",
+        "typescript": ">=5.5"
+      }
+    },
+    "node_modules/jest-regex-util": {
+      "version": "30.0.1",
+      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-30.0.1.tgz",
+      "integrity": "sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-resolve": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-30.2.0.tgz",
+      "integrity": "sha512-TCrHSxPlx3tBY3hWNtRQKbtgLhsXa1WmbJEqBlTBrGafd5fiQFByy2GNCEoGR+Tns8d15GaL9cxEzKOO3GEb2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "jest-haste-map": "30.2.0",
+        "jest-pnp-resolver": "^1.2.3",
+        "jest-util": "30.2.0",
+        "jest-validate": "30.2.0",
+        "slash": "^3.0.0",
+        "unrs-resolver": "^1.7.11"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-resolve-dependencies": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-30.2.0.tgz",
+      "integrity": "sha512-xTOIGug/0RmIe3mmCqCT95yO0vj6JURrn1TKWlNbhiAefJRWINNPgwVkrVgt/YaerPzY3iItufd80v3lOrFJ2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "jest-regex-util": "30.0.1",
+        "jest-snapshot": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-runner": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-30.2.0.tgz",
+      "integrity": "sha512-PqvZ2B2XEyPEbclp+gV6KO/F1FIFSbIwewRgmROCMBo/aZ6J1w8Qypoj2pEOcg3G2HzLlaP6VUtvwCI8dM3oqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/console": "30.2.0",
+        "@jest/environment": "30.2.0",
+        "@jest/test-result": "30.2.0",
+        "@jest/transform": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "emittery": "^0.13.1",
+        "exit-x": "^0.2.2",
+        "graceful-fs": "^4.2.11",
+        "jest-docblock": "30.2.0",
+        "jest-environment-node": "30.2.0",
+        "jest-haste-map": "30.2.0",
+        "jest-leak-detector": "30.2.0",
+        "jest-message-util": "30.2.0",
+        "jest-resolve": "30.2.0",
+        "jest-runtime": "30.2.0",
+        "jest-util": "30.2.0",
+        "jest-watcher": "30.2.0",
+        "jest-worker": "30.2.0",
+        "p-limit": "^3.1.0",
+        "source-map-support": "0.5.13"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-runner/node_modules/jest-worker": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-30.2.0.tgz",
+      "integrity": "sha512-0Q4Uk8WF7BUwqXHuAjc23vmopWJw5WH7w2tqBoUOZpOjW/ZnR44GXXd1r82RvnmI2GZge3ivrYXk/BE2+VtW2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@ungap/structured-clone": "^1.3.0",
+        "jest-util": "30.2.0",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.1.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-runner/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-runner/node_modules/source-map-support": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/jest-runner/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/jest-runtime": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-30.2.0.tgz",
+      "integrity": "sha512-p1+GVX/PJqTucvsmERPMgCPvQJpFt4hFbM+VN3n8TMo47decMUcJbt+rgzwrEme0MQUA/R+1de2axftTHkKckg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "30.2.0",
+        "@jest/fake-timers": "30.2.0",
+        "@jest/globals": "30.2.0",
+        "@jest/source-map": "30.0.1",
+        "@jest/test-result": "30.2.0",
+        "@jest/transform": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "cjs-module-lexer": "^2.1.0",
+        "collect-v8-coverage": "^1.0.2",
+        "glob": "^10.3.10",
+        "graceful-fs": "^4.2.11",
+        "jest-haste-map": "30.2.0",
+        "jest-message-util": "30.2.0",
+        "jest-mock": "30.2.0",
+        "jest-regex-util": "30.0.1",
+        "jest-resolve": "30.2.0",
+        "jest-snapshot": "30.2.0",
+        "jest-util": "30.2.0",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/glob": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jest-runtime/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jest-runtime/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/jest-snapshot": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-30.2.0.tgz",
+      "integrity": "sha512-5WEtTy2jXPFypadKNpbNkZ72puZCa6UjSr/7djeecHWOu7iYhSXSnHScT8wBz3Rn8Ena5d5RYRcsyKIeqG1IyA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.27.4",
+        "@babel/generator": "^7.27.5",
+        "@babel/plugin-syntax-jsx": "^7.27.1",
+        "@babel/plugin-syntax-typescript": "^7.27.1",
+        "@babel/types": "^7.27.3",
+        "@jest/expect-utils": "30.2.0",
+        "@jest/get-type": "30.1.0",
+        "@jest/snapshot-utils": "30.2.0",
+        "@jest/transform": "30.2.0",
+        "@jest/types": "30.2.0",
+        "babel-preset-current-node-syntax": "^1.2.0",
+        "chalk": "^4.1.2",
+        "expect": "30.2.0",
+        "graceful-fs": "^4.2.11",
+        "jest-diff": "30.2.0",
+        "jest-matcher-utils": "30.2.0",
+        "jest-message-util": "30.2.0",
+        "jest-util": "30.2.0",
+        "pretty-format": "30.2.0",
+        "semver": "^7.7.2",
+        "synckit": "^0.11.8"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-util": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-30.2.0.tgz",
+      "integrity": "sha512-QKNsM0o3Xe6ISQU869e+DhG+4CK/48aHYdJZGlFQVTjnbvgpcKyxpzk29fGiO7i/J8VENZ+d2iGnSsvmuHywlA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "chalk": "^4.1.2",
+        "ci-info": "^4.2.0",
+        "graceful-fs": "^4.2.11",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-validate": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-30.2.0.tgz",
+      "integrity": "sha512-FBGWi7dP2hpdi8nBoWxSsLvBFewKAg0+uSQwBaof4Y4DPgBabXgpSYC5/lR7VmnIlSpASmCi/ntRWPbv7089Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/get-type": "30.1.0",
+        "@jest/types": "30.2.0",
+        "camelcase": "^6.3.0",
+        "chalk": "^4.1.2",
+        "leven": "^3.1.0",
+        "pretty-format": "30.2.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-validate/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watcher": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-30.2.0.tgz",
+      "integrity": "sha512-PYxa28dxJ9g777pGm/7PrbnMeA0Jr7osHP9bS7eJy9DuAjMgdGtxgf0uKMyoIsTWAkIbUW5hSDdJ3urmgXBqxg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/test-result": "30.2.0",
+        "@jest/types": "30.2.0",
+        "@types/node": "*",
+        "ansi-escapes": "^4.3.2",
+        "chalk": "^4.1.2",
+        "emittery": "^0.13.1",
+        "jest-util": "30.2.0",
+        "string-length": "^4.0.2"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-watcher/node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-watcher/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/jose": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
+      "integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsdom": {
+      "version": "28.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-28.1.0.tgz",
+      "integrity": "sha512-0+MoQNYyr2rBHqO1xilltfDjV9G7ymYGlAUazgcDLQaUf8JDHbuGwsxN6U9qWaElZ4w1B2r7yEGIL3GdeW3Rug==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@acemir/cssom": "^0.9.31",
+        "@asamuzakjp/dom-selector": "^6.8.1",
+        "@bramus/specificity": "^2.4.2",
+        "@exodus/bytes": "^1.11.0",
+        "cssstyle": "^6.0.1",
+        "data-urls": "^7.0.0",
+        "decimal.js": "^10.6.0",
+        "html-encoding-sniffer": "^6.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
+        "is-potential-custom-element-name": "^1.0.1",
+        "parse5": "^8.0.0",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^6.0.0",
+        "undici": "^7.21.0",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^8.0.1",
+        "whatwg-mimetype": "^5.0.0",
+        "whatwg-url": "^16.0.0",
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/@exodus/bytes": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.14.1.tgz",
+      "integrity": "sha512-OhkBFWI6GcRMUroChZiopRiSp2iAMvEBK47NhJooDqz1RERO4QuZIZnjP63TXX8GAiLABkYmX+fuQsdJ1dd2QQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jsdom/node_modules/@noble/hashes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
+      "integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-typed": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.2.tgz",
+      "integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsonparse": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz",
+      "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==",
+      "dev": true,
+      "engines": [
+        "node >= 0.2.0"
+      ],
+      "license": "MIT"
+    },
+    "node_modules/karma-source-map-support": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz",
+      "integrity": "sha512-RsBECncGO17KAoJCYXjv+ckIz+Ii9NCi+9enk+rq6XC81ezYkb4/RHE6CTXdA7IOJqoF3wcaLfVG0CPmE5ca6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "source-map-support": "^0.5.5"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/launch-editor": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.13.1.tgz",
+      "integrity": "sha512-lPSddlAAluRKJ7/cjRFoXUFzaX7q/YKI7yPHuEvSJVqoXvFnJov1/Ud87Aa4zULIbA9Nja4mSPK8l0z/7eV2wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picocolors": "^1.1.1",
+        "shell-quote": "^1.8.3"
+      }
+    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/less": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.4.2.tgz",
+      "integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less-loader": {
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-12.3.1.tgz",
+      "integrity": "sha512-JZZmG7gMzoDP3VGeEG8Sh6FW5wygB5jYL7Wp29FFihuRTsIBacqO3LbRPr2yStYD11riVf13selLm/CPFRDBRQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
+        "less": "^3.5.0 || ^4.0.0",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/less/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/license-webpack-plugin": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-4.0.2.tgz",
+      "integrity": "sha512-771TFWFD70G1wLTC4oU2Cw4qvtmNrIw+wRvBtn+okgHl7slJVi7zfNcdmqDL72BojM30VNJ2UHylr1o77U37Jw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "webpack-sources": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        },
+        "webpack-sources": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/listr2": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
+      "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^5.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/listr2/node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/listr2/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/lmdb": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.5.1.tgz",
+      "integrity": "sha512-NYHA0MRPjvNX+vSw8Xxg6FLKxzAG+e7Pt8RqAQA/EehzHVXq9SxDqJIN3JL1hK0dweb884y8kIh6rkWvPyg9Wg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@harperfast/extended-iterable": "^1.0.3",
+        "msgpackr": "^1.11.2",
+        "node-addon-api": "^6.1.0",
+        "node-gyp-build-optional-packages": "5.2.2",
+        "ordered-binary": "^1.5.3",
+        "weak-lru-cache": "^1.2.2"
+      },
+      "bin": {
+        "download-lmdb-prebuilds": "bin/download-prebuilds.js"
+      },
+      "optionalDependencies": {
+        "@lmdb/lmdb-darwin-arm64": "3.5.1",
+        "@lmdb/lmdb-darwin-x64": "3.5.1",
+        "@lmdb/lmdb-linux-arm": "3.5.1",
+        "@lmdb/lmdb-linux-arm64": "3.5.1",
+        "@lmdb/lmdb-linux-x64": "3.5.1",
+        "@lmdb/lmdb-win32-arm64": "3.5.1",
+        "@lmdb/lmdb-win32-x64": "3.5.1"
+      }
+    },
+    "node_modules/loader-runner": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
+      "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.11.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
+      "integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-symbols": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-7.0.1.tgz",
+      "integrity": "sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-unicode-supported": "^2.0.0",
+        "yoctocolors": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/make-fetch-happen": {
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-15.0.4.tgz",
+      "integrity": "sha512-vM2sG+wbVeVGYcCm16mM3d5fuem9oC28n436HjsGO3LcxoTI8LNVa4rwZDn3f76+cWyT4GGJDxjTYU1I2nr6zw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@gar/promise-retry": "^1.0.0",
+        "@npmcli/agent": "^4.0.0",
+        "cacache": "^20.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^5.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^1.0.0",
+        "proc-log": "^6.0.0",
+        "ssri": "^13.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tmpl": "1.0.5"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0",
+      "peer": true
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memfs": {
+      "version": "4.56.10",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.56.10.tgz",
+      "integrity": "sha512-eLvzyrwqLHnLYalJP7YZ3wBe79MXktMdfQbvMrVD80K+NhrIukCVBvgP30zTJYEEDh9hZ/ep9z0KOdD7FSHo7w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jsonjoy.com/fs-core": "4.56.10",
+        "@jsonjoy.com/fs-fsa": "4.56.10",
+        "@jsonjoy.com/fs-node": "4.56.10",
+        "@jsonjoy.com/fs-node-builtins": "4.56.10",
+        "@jsonjoy.com/fs-node-to-fsa": "4.56.10",
+        "@jsonjoy.com/fs-node-utils": "4.56.10",
+        "@jsonjoy.com/fs-print": "4.56.10",
+        "@jsonjoy.com/fs-snapshot": "4.56.10",
+        "@jsonjoy.com/json-pack": "^1.11.0",
+        "@jsonjoy.com/util": "^1.9.0",
+        "glob-to-regex.js": "^1.0.1",
+        "thingies": "^2.5.0",
+        "tree-dump": "^1.0.3",
+        "tslib": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.10.0.tgz",
+      "integrity": "sha512-540P2c5dYnJlyJxTaSloliZexv8rji6rY8FhQN+WF/82iHQfA23j/xtJx97L+mXOML27EqksSek/g4eK7jaL3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "schema-utils": "^4.0.0",
+        "tapable": "^2.2.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-2.0.1.tgz",
+      "integrity": "sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/minipass-fetch": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/minipass-fetch/-/minipass-fetch-5.0.2.tgz",
+      "integrity": "sha512-2d0q2a8eCi2IRg/IGubCNRJoYbA1+YPXAzQVRFmB45gdGZafyivnZ5YSEfo3JikbjGxOdntGFvBQGqaSMXlAFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^2.0.0",
+        "minizlib": "^3.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      },
+      "optionalDependencies": {
+        "iconv-lite": "^0.7.2"
+      }
+    },
+    "node_modules/minipass-flush": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-flush/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+      "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minipass-pipeline/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/minipass-sized": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/minipass-sized/-/minipass-sized-2.0.0.tgz",
+      "integrity": "sha512-zSsHhto5BcUVM2m1LurnXY6M//cGhVaegT71OfOXoprxT6o780GZd792ea6FfrQkuU4usHZIUczAQMRUE2plzA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/msgpackr": {
+      "version": "1.11.8",
+      "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.11.8.tgz",
+      "integrity": "sha512-bC4UGzHhVvgDNS7kn9tV8fAucIYUBuGojcaLiz7v+P63Lmtm0Xeji8B/8tYKddALXxJLpwIeBmUN3u64C4YkRA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "optionalDependencies": {
+        "msgpackr-extract": "^3.0.2"
+      }
+    },
+    "node_modules/msgpackr-extract": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/msgpackr-extract/-/msgpackr-extract-3.0.3.tgz",
+      "integrity": "sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "node-gyp-build-optional-packages": "5.2.2"
+      },
+      "bin": {
+        "download-msgpackr-prebuilds": "bin/download-prebuilds.js"
+      },
+      "optionalDependencies": {
+        "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.3",
+        "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.3",
+        "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.3",
+        "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.3",
+        "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.3",
+        "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3"
+      }
+    },
+    "node_modules/multicast-dns": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
+      },
+      "bin": {
+        "multicast-dns": "cli.js"
+      }
+    },
+    "node_modules/mute-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-2.0.0.tgz",
+      "integrity": "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^18.17.0 || >=20.5.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
+      "integrity": "sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/needle": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/needle/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/ngx-echarts": {
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-21.0.0.tgz",
+      "integrity": "sha512-vivBRmGYMFlnPxK/uxliY+sexGwHqnFZ2pylGbIMF2wikt9RpZpGGSitLmuUXvzYwkVFGo6dQmiUQh1+6Pbfuw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=21.0.0",
+        "echarts": ">=5.0.0"
+      }
+    },
+    "node_modules/ngx-toastr": {
+      "version": "20.0.5",
+      "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-20.0.5.tgz",
+      "integrity": "sha512-JcGu1Cbl+0SovPhxma72ygGeZHtpHWWKwBCyiabb+MSWYtXu/SOwEZ2HTWtZ4wcEYOOiy9tDQZgiEKWXpibpRw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      },
+      "peerDependencies": {
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "rxjs": "^7.8.2"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/node-gyp": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.2.0.tgz",
+      "integrity": "sha512-q23WdzrQv48KozXlr0U1v9dwO/k59NHeSzn6loGcasyf0UnSrtzs8kRxM+mfwJSf0DkX0s43hcqgnSO4/VNthQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^15.0.0",
+        "nopt": "^9.0.0",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "tar": "^7.5.4",
+        "tinyglobby": "^0.2.12",
+        "which": "^6.0.0"
+      },
+      "bin": {
+        "node-gyp": "bin/node-gyp.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/node-gyp-build-optional-packages": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.2.2.tgz",
+      "integrity": "sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.1"
+      },
+      "bin": {
+        "node-gyp-build-optional-packages": "bin.js",
+        "node-gyp-build-optional-packages-optional": "optional.js",
+        "node-gyp-build-optional-packages-test": "build-test.js"
+      }
+    },
+    "node_modules/node-gyp/node_modules/isexe": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
+      "integrity": "sha512-FFUtZMpoZ8RqHS3XeXEmHWLA4thH+ZxCv2lOiPIn1Xc7CxrqhWzNSDzD+/chS/zbYezmiwWLdQC09JdQKmthOw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/node-gyp/node_modules/which": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-6.0.1.tgz",
+      "integrity": "sha512-oGLe46MIrCRqX7ytPUf66EAYvdeMIZYn3WaocqqKZAxrBpkqHfL/qvTyJ/bTk5+AqHCjXmrv3CEWgy368zhRUg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^4.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nopt": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-9.0.0.tgz",
+      "integrity": "sha512-Zhq3a+yFKrYwSBluL4H9XP3m3y5uvQkB/09CwDruCiRmR/UJYnn9W4R48ry0uGC70aeTPKLynBtscP9efFFcPw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^4.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-bundled": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-5.0.0.tgz",
+      "integrity": "sha512-JLSpbzh6UUXIEoqPsYBvVNVmyrjVZ1fzEFbqxKkTJQkWBO3xFzFT+KDnSKQWwOQNbuWRwt5LSD6HOTLGIWzfrw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-normalize-package-bin": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm-install-checks": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-8.0.0.tgz",
+      "integrity": "sha512-ScAUdMpyzkbpxoNekQ3tNRdFI8SJ86wgKZSQZdUxT+bj0wVFpsEMWnkXP0twVe1gJyNF5apBWDJhhIbgrIViRA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "semver": "^7.1.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm-normalize-package-bin": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-5.0.0.tgz",
+      "integrity": "sha512-CJi3OS4JLsNMmr2u07OJlhcrPxCeOeP/4xq67aWNai6TNWWbTrlNDgl8NcFKVlcBKp18GPj+EzbNIgrBfZhsag==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm-package-arg": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-13.0.2.tgz",
+      "integrity": "sha512-IciCE3SY3uE84Ld8WZU23gAPPV9rIYod4F+rc+vJ7h7cwAJt9Vk6TVsK60ry7Uj3SRS3bqRRIGuTp9YVlk6WNA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "hosted-git-info": "^9.0.0",
+        "proc-log": "^6.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-name": "^7.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm-packlist": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-10.0.4.tgz",
+      "integrity": "sha512-uMW73iajD8hiH4ZBxEV3HC+eTnppIqwakjOYuvgddnalIw2lJguKviK1pcUJDlIWm1wSJkchpDZDSVVsZEYRng==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "ignore-walk": "^8.0.0",
+        "proc-log": "^6.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm-pick-manifest": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-11.0.3.tgz",
+      "integrity": "sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-install-checks": "^8.0.0",
+        "npm-normalize-package-bin": "^5.0.0",
+        "npm-package-arg": "^13.0.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm-registry-fetch": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-19.1.1.tgz",
+      "integrity": "sha512-TakBap6OM1w0H73VZVDf44iFXsOS3h+L4wVMXmbWOQroZgFhMch0juN6XSzBNlD965yIKvWg2dfu7NSiaYLxtw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/redact": "^4.0.0",
+        "jsonparse": "^1.3.1",
+        "make-fetch-happen": "^15.0.0",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^5.0.0",
+        "minizlib": "^3.0.1",
+        "npm-package-arg": "^13.0.0",
+        "proc-log": "^6.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/nwsapi": {
+      "version": "2.2.23",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.23.tgz",
+      "integrity": "sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
+      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-11.0.0.tgz",
+      "integrity": "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.4.0",
+        "define-lazy-prop": "^3.0.0",
+        "is-in-ssh": "^1.0.0",
+        "is-inside-container": "^1.0.0",
+        "powershell-utils": "^0.1.0",
+        "wsl-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/ora": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-9.3.0.tgz",
+      "integrity": "sha512-lBX72MWFduWEf7v7uWf5DHp9Jn5BI8bNPGuFgtXMmr2uDz2Gz2749y3am3agSDdkhHPHYmmxEGSKH85ZLGzgXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^5.6.2",
+        "cli-cursor": "^5.0.0",
+        "cli-spinners": "^3.2.0",
+        "is-interactive": "^2.0.0",
+        "is-unicode-supported": "^2.1.0",
+        "log-symbols": "^7.0.1",
+        "stdin-discarder": "^0.3.1",
+        "string-width": "^8.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ora/node_modules/chalk": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/ora/node_modules/string-width": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.0.tgz",
+      "integrity": "sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/ordered-binary": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/ordered-binary/-/ordered-binary-1.6.1.tgz",
+      "integrity": "sha512-QkCdPooczexPLiXIrbVOPYkR3VO3T6v2OyKRkR1Xbhpy7/LAVXwahnRCgRp78Oe/Ehf0C/HATAxfSr6eA1oX+w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-map": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
+      "integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-retry": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.1.tgz",
+      "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/retry": "0.12.2",
+        "is-network-error": "^1.0.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/pacote": {
+      "version": "21.3.1",
+      "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.3.1.tgz",
+      "integrity": "sha512-O0EDXi85LF4AzdjG74GUwEArhdvawi/YOHcsW6IijKNj7wm8IvEWNF5GnfuxNpQ/ZpO3L37+v8hqdVh8GgWYhg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^7.0.0",
+        "@npmcli/installed-package-contents": "^4.0.0",
+        "@npmcli/package-json": "^7.0.0",
+        "@npmcli/promise-spawn": "^9.0.0",
+        "@npmcli/run-script": "^10.0.0",
+        "cacache": "^20.0.0",
+        "fs-minipass": "^3.0.0",
+        "minipass": "^7.0.2",
+        "npm-package-arg": "^13.0.0",
+        "npm-packlist": "^10.0.1",
+        "npm-pick-manifest": "^11.0.1",
+        "npm-registry-fetch": "^19.0.0",
+        "proc-log": "^6.0.0",
+        "promise-retry": "^2.0.1",
+        "sigstore": "^4.0.0",
+        "ssri": "^13.0.0",
+        "tar": "^7.4.3"
+      },
+      "bin": {
+        "pacote": "bin/index.js"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.0.tgz",
+      "integrity": "sha512-9m4m5GSgXjL4AjumKzq1Fgfp3Z8rsvjRNbnkVwfu2ImRqE5D0LnY2QfDen18FSY9C573YU5XxSapdHZTZ2WolA==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-html-rewriting-stream": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/parse5-html-rewriting-stream/-/parse5-html-rewriting-stream-8.0.0.tgz",
+      "integrity": "sha512-wzh11mj8KKkno1pZEu+l2EVeWsuKDfR5KNWZOTsslfUX8lPDZx77m9T0kIoAVkFtD1nx6YF8oh4BnPHvxMtNMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0",
+        "parse5": "^8.0.0",
+        "parse5-sax-parser": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-sax-parser": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/parse5-sax-parser/-/parse5-sax-parser-8.0.0.tgz",
+      "integrity": "sha512-/dQ8UzHZwnrzs3EvDj6IkKrD/jIZyTlB+8XrHJvcjNgRdmWruNdN9i9RK/JtxakmlUdPwKubKPTCqvbTgzGhrw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parse5": "^8.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.6.tgz",
+      "integrity": "sha512-ESL2CrkS/2wTPfuend7Zhkzo2u0daGJ/A2VucJOgQ/C48S/zB8MMeMHSGKYpXhIjbPxfuezITkaBH1wqv00DDQ==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/piscina": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.1.4.tgz",
+      "integrity": "sha512-7uU4ZnKeQq22t9AsmHGD2w4OYQGonwFnTypDypaWi7Qr2EvQIFVtG8J5D/3bE7W123Wdc9+v4CZDu5hJXVCtBg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.x"
+      },
+      "optionalDependencies": {
+        "@napi-rs/nice": "^1.0.4"
+      }
+    },
+    "node_modules/pkce-challenge": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
+      "integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkijs": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/pkijs/-/pkijs-3.3.3.tgz",
+      "integrity": "sha512-+KD8hJtqQMYoTuL1bbGOqxb4z+nZkTAwVdNtWwe8Tc2xNbEmdJYIYoc6Qt0uF55e6YW6KuTHw1DjQ18gMhzepw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@noble/hashes": "1.4.0",
+        "asn1js": "^3.0.6",
+        "bytestreamjs": "^2.0.1",
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.3",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/positioning": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/positioning/-/positioning-3.0.1.tgz",
+      "integrity": "sha512-cqg00fwFtEu14YwlLUuvFih5ztTd9RYUguJA55lWjeIGFQTpik7ca+TMU87YhAgwWjyjcGIG6l80eUh7X6uHog==",
+      "license": "MIT"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-loader": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.2.0.tgz",
+      "integrity": "sha512-tHX+RkpsXVcc7st4dSdDGliI+r4aAQDuv+v3vFYHixb6YgjreG5AG4SEB0kDK8u2s6htqEEpKlkhSBUTvWKYnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cosmiconfig": "^9.0.0",
+        "jiti": "^2.5.1",
+        "semver": "^7.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+      "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
+      "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
+      "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/powershell-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.1.0.tgz",
+      "integrity": "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/preact": {
+      "version": "10.12.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "30.2.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.2.0.tgz",
+      "integrity": "sha512-9uBdv/B4EefsuAL+pWqueZyZS2Ba+LxfFeQ9DN14HU4bN8bhaxKdkpjpB6fs9+pSjIBu+FXQHImEg8j/Lw0+vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "30.0.5",
+        "ansi-styles": "^5.2.0",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/proc-log": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
+      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/promise-retry": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-2.0.1.tgz",
+      "integrity": "sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/promise-retry/node_modules/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pure-rand": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-7.0.1.tgz",
+      "integrity": "sha512-oTUZM/NAZS8p7ANR3SHh30kXB+zK2r2BPcEn/awJIbOvq82WoMN4p62AWWp3Hhw50G0xMsw1mhIBLqHw64EcNQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/dubzzz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fast-check"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/pvtsutils": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz",
+      "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/pvutils": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.5.tgz",
+      "integrity": "sha512-KTqnxsgGiQ6ZAzZCVlJH5eOjSnvlyEgx1m8bkRJfOhmGRqfo5KLvmAlACQkrjEtOQ4B7wF9TdSLIs9O90MX9xA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+      "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz",
+      "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.4.24",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/reflect-metadata": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
+      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.2.tgz",
+      "integrity": "sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regex-parser": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.3.1.tgz",
+      "integrity": "sha512-yXLRqatcCuKtVHsWrNg0JL3l1zGfdXeEvDa0bdu4tCDQw0RpMDZsqbkyRTUnKMR0tXF627V2oEWjBEaEdqTwtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/regexpu-core": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.4.0.tgz",
+      "integrity": "sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.2.2",
+        "regjsgen": "^0.8.0",
+        "regjsparser": "^0.13.0",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/regjsparser": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.13.0.tgz",
+      "integrity": "sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "jsesc": "~3.1.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-from": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-url-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz",
+      "integrity": "sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "adjust-sourcemap-loader": "^4.0.0",
+        "convert-source-map": "^1.7.0",
+        "loader-utils": "^2.0.0",
+        "postcss": "^8.2.14",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/resolve-url-loader/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.4.tgz",
+      "integrity": "sha512-V2tPDUrY3WSevrvU2E41ijZlpF+5PbZu4giH+VpNraaadsJGHa4fR6IFwsocVwEXDoAdIv5qgPPxgrvKAOIPtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.113.0",
+        "@rolldown/pluginutils": "1.0.0-rc.4"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.4",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.4",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.4",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.4",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.4",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.4",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.4",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.4",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.4",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.4",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.4",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.4",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.4"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.59.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
+      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.59.0",
+        "@rollup/rollup-android-arm64": "4.59.0",
+        "@rollup/rollup-darwin-arm64": "4.59.0",
+        "@rollup/rollup-darwin-x64": "4.59.0",
+        "@rollup/rollup-freebsd-arm64": "4.59.0",
+        "@rollup/rollup-freebsd-x64": "4.59.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.59.0",
+        "@rollup/rollup-linux-arm64-musl": "4.59.0",
+        "@rollup/rollup-linux-loong64-gnu": "4.59.0",
+        "@rollup/rollup-linux-loong64-musl": "4.59.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
+        "@rollup/rollup-linux-ppc64-musl": "4.59.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.59.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-gnu": "4.59.0",
+        "@rollup/rollup-linux-x64-musl": "4.59.0",
+        "@rollup/rollup-openbsd-x64": "4.59.0",
+        "@rollup/rollup-openharmony-arm64": "4.59.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.59.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.59.0",
+        "@rollup/rollup-win32-x64-gnu": "4.59.0",
+        "@rollup/rollup-win32-x64-msvc": "4.59.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.97.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
+      "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.7.tgz",
+      "integrity": "sha512-w6q+fRHourZ+e+xA1kcsF27iGM6jdB8teexYCfdUw0sYgcDNeZESnDNT9sUmmPm3ooziwUJXGwZJSTF3kOdBfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sax": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.4.tgz",
+      "integrity": "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "optional": true,
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=v12.22.7"
+      }
+    },
+    "node_modules/schema-utils": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
+      "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/selfsigned": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-5.5.0.tgz",
+      "integrity": "sha512-ftnu3TW4+3eBfLRFnDEkzGxSF/10BJBkaLJuBHZX0kiPS7bRdlpZGu6YGt4KngMkdTwJE6MbjavFpqHvqVt+Ew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/x509": "^1.14.2",
+        "pkijs": "^3.3.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/send/node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/send/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-index": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.2.tgz",
+      "integrity": "sha512-KDj11HScOaLmrPxl70KYNW1PksP4Nb/CLL2yvC+Qd2kHMPEEpfc4Re2e4FOay+bC/+XQl/7zAcWON3JVo5v3KQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.8.0",
+        "mime-types": "~2.1.35",
+        "parseurl": "~1.3.3"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
+      "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sigstore": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/sigstore/-/sigstore-4.1.0.tgz",
+      "integrity": "sha512-/fUgUhYghuLzVT/gaJoeVehLCgZiUxPCPMcyVNY0lIf/cTCz58K/WTI7PefDarXxp9nUKpEwg1yyz3eSBMTtgA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@sigstore/bundle": "^4.0.0",
+        "@sigstore/core": "^3.1.0",
+        "@sigstore/protobuf-specs": "^0.5.0",
+        "@sigstore/sign": "^4.1.0",
+        "@sigstore/tuf": "^4.0.1",
+        "@sigstore/verify": "^3.1.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/sockjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.8.7",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.7.tgz",
+      "integrity": "sha512-HLpt+uLy/pxB+bum/9DzAgiKS8CX1EvbWxI4zlmgGCExImLdiad2iCwXT5Z4c9c3Eq8rP2318mPW2c+QbtjK8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^10.0.1",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-5.0.0.tgz",
+      "integrity": "sha512-k2Dur7CbSLcAH73sBcIkV5xjPV4SzqO1NJ7+XaQl8if3VODDUj3FNchNGpqgJSKbvUfJuhVdv8K2Eu8/TNl2eA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.72.1"
+      }
+    },
+    "node_modules/source-map-loader/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
+      "dev": true,
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-4.0.0.tgz",
+      "integrity": "sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.23",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.23.tgz",
+      "integrity": "sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ssri": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-13.0.1.tgz",
+      "integrity": "sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.3"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/stack-utils": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+      "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/stdin-discarder": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.3.1.tgz",
+      "integrity": "sha512-reExS1kSGoElkextOcPkel4NE99S0BWxjUHQeDFnR8S993JxpPX7KU4MNmO19NXhlJp+8dmdCbKQVNgLJh2teA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "node_modules/string-length": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/swiper": {
+      "version": "12.1.2",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.1.2.tgz",
+      "integrity": "sha512-4gILrI3vXZqoZh71I1PALqukCFgk+gpOwe1tOvz5uE9kHtl2gTDzmYflYCwWvR4LOvCrJi6UEEU+gnuW5BtkgQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/synckit": {
+      "version": "0.11.12",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz",
+      "integrity": "sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.2.9"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tar": {
+      "version": "7.5.9",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.9.tgz",
+      "integrity": "sha512-BTLcK0xsDh2+PUe9F6c2TlRp4zOOBMTkoQHQIWSIzI0R7KG46uEwq4OPk2W7bZcprBMsuaeFsqwYr7pjh6CuHg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.1.0",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tar/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.0.tgz",
+      "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.16",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.16.tgz",
+      "integrity": "sha512-h9oBFCWrq78NyWWVcSwZarJkZ01c2AyGrzs1crmHZO3QUg9D61Wu4NPjBy69n7JqylFF5y+CsUZYmYEIZ3mR+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^4.3.0",
+        "serialize-javascript": "^6.0.2",
+        "terser": "^5.31.1"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/test-exclude": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/thingies": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.5.0.tgz",
+      "integrity": "sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "^2"
+      }
+    },
+    "node_modules/thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tldts": {
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-7.0.23.tgz",
+      "integrity": "sha512-ASdhgQIBSay0R/eXggAkQ53G4nTJqTXqC2kbaBbdDwM7SkjyZyO0OaaN1/FH7U/yCeqOHDwFO5j8+Os/IS1dXw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tldts-core": "^7.0.23"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "7.0.23",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-7.0.23.tgz",
+      "integrity": "sha512-0g9vrtDQLrNIiCj22HSe9d4mLVG3g5ph5DZ8zCKBr4OtrspmNB6ss7hVyzArAeE88ceZocIEGkyW1Ime7fxPtQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/tmpl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/tough-cookie": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-6.0.0.tgz",
+      "integrity": "sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "tldts": "^7.0.5"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-6.0.0.tgz",
+      "integrity": "sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "punycode": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/tree-dump": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.1.0.tgz",
+      "integrity": "sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/streamich"
+      },
+      "peerDependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/ts-jest": {
+      "version": "29.4.6",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.4.6.tgz",
+      "integrity": "sha512-fSpWtOO/1AjSNQguk43hb/JCo16oJDnMJf3CdEGNkqsEX3t0KX96xvyX1D7PfLCpVoKu4MfVrqUkFyblYoY4lA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bs-logger": "^0.2.6",
+        "fast-json-stable-stringify": "^2.1.0",
+        "handlebars": "^4.7.8",
+        "json5": "^2.2.3",
+        "lodash.memoize": "^4.1.2",
+        "make-error": "^1.3.6",
+        "semver": "^7.7.3",
+        "type-fest": "^4.41.0",
+        "yargs-parser": "^21.1.1"
+      },
+      "bin": {
+        "ts-jest": "cli.js"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0-beta.0 <8",
+        "@jest/transform": "^29.0.0 || ^30.0.0",
+        "@jest/types": "^29.0.0 || ^30.0.0",
+        "babel-jest": "^29.0.0 || ^30.0.0",
+        "jest": "^29.0.0 || ^30.0.0",
+        "jest-util": "^29.0.0 || ^30.0.0",
+        "typescript": ">=4.3 <6"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@jest/transform": {
+          "optional": true
+        },
+        "@jest/types": {
+          "optional": true
+        },
+        "babel-jest": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jest-util": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-jest/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tsyringe": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/tsyringe/-/tsyringe-4.10.0.tgz",
+      "integrity": "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/tsyringe/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/tuf-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-4.1.0.tgz",
+      "integrity": "sha512-50QV99kCKH5P/Vs4E2Gzp7BopNV+KzTXqWeaxrfu5IQJBOULRsTIS9seSsOVT8ZnGXzCyx55nYWAi4qJzpZKEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tufjs/models": "4.1.0",
+        "debug": "^4.4.3",
+        "make-fetch-happen": "^15.0.1"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typed-assert": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/typed-assert/-/typed-assert-1.0.9.tgz",
+      "integrity": "sha512-KNNZtayBCtmnNmbo5mG47p1XsCyrx6iVqomjcZnec/1Y5GGARaxPs6r49RnSPeUP3YjNYiU9sQHAtY4BBvnZwg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/uglify-js": {
+      "version": "3.19.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+      "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/undici": {
+      "version": "7.22.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.22.0.tgz",
+      "integrity": "sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
+      "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.1.tgz",
+      "integrity": "sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.2.0.tgz",
+      "integrity": "sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unique-filename": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-5.0.0.tgz",
+      "integrity": "sha512-2RaJTAvAb4owyjllTfXzFClJ7WsGxlykkPvCr9pA//LD9goVq+m4PPAeBgNodGZ7nSrntT/auWpJ6Y5IFXcfjg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "unique-slug": "^6.0.0"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/unique-slug": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-6.0.0.tgz",
+      "integrity": "sha512-4Lup7Ezn8W3d52/xBhZBVdx323ckxa7DEvd9kPQHppTkLoJXw6ltrBCyj5pnrxj0qKDxYMJ56CoxNuFCscdTiw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      },
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+      "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+        "@unrs/resolver-binding-android-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+        "@unrs/resolver-binding-darwin-x64": "1.11.1",
+        "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+        "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+        "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/v8-to-istanbul": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
+      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.12",
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/v8-to-istanbul/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/validate-npm-package-name": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-7.0.2.tgz",
+      "integrity": "sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vite": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.27.0",
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "lightningcss": "^1.21.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/w3c-xmlserializer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/walker": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+      "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "makeerror": "1.0.12"
+      }
+    },
+    "node_modules/watchpack": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "node_modules/weak-lru-cache": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
+      "integrity": "sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/webidl-conversions": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
+      "integrity": "sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/webpack": {
+      "version": "5.105.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.2.tgz",
+      "integrity": "sha512-dRXm0a2qcHPUBEzVk8uph0xWSjV/xZxenQQbLwnwP7caQCYpqG1qddwlyEkIDkYn0K8tvmcrZ+bOrzoQ3HxCDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.7",
+        "@types/estree": "^1.0.8",
+        "@types/json-schema": "^7.0.15",
+        "@webassemblyjs/ast": "^1.14.1",
+        "@webassemblyjs/wasm-edit": "^1.14.1",
+        "@webassemblyjs/wasm-parser": "^1.14.1",
+        "acorn": "^8.15.0",
+        "acorn-import-phases": "^1.0.3",
+        "browserslist": "^4.28.1",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.19.0",
+        "es-module-lexer": "^2.0.0",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.11",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.3.1",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^4.3.3",
+        "tapable": "^2.3.0",
+        "terser-webpack-plugin": "^5.3.16",
+        "watchpack": "^2.5.1",
+        "webpack-sources": "^3.3.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-middleware": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-7.4.5.tgz",
+      "integrity": "sha512-uxQ6YqGdE4hgDKNf7hUiPXOdtkXvBJXrfEGYSx7P7LC8hnUYGK70X6xQXUvXeNyBDDcsiQXpG2m3G9vxowaEuA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "colorette": "^2.0.10",
+        "memfs": "^4.43.1",
+        "mime-types": "^3.0.1",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/webpack-dev-server": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.2.3.tgz",
+      "integrity": "sha512-9Gyu2F7+bg4Vv+pjbovuYDhHX+mqdqITykfzdM9UyKqKHlsE5aAjRhR+oOEfXW5vBeu8tarzlJFIZva4ZjAdrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/bonjour": "^3.5.13",
+        "@types/connect-history-api-fallback": "^1.5.4",
+        "@types/express": "^4.17.25",
+        "@types/express-serve-static-core": "^4.17.21",
+        "@types/serve-index": "^1.9.4",
+        "@types/serve-static": "^1.15.5",
+        "@types/sockjs": "^0.3.36",
+        "@types/ws": "^8.5.10",
+        "ansi-html-community": "^0.0.8",
+        "bonjour-service": "^1.2.1",
+        "chokidar": "^3.6.0",
+        "colorette": "^2.0.10",
+        "compression": "^1.8.1",
+        "connect-history-api-fallback": "^2.0.0",
+        "express": "^4.22.1",
+        "graceful-fs": "^4.2.6",
+        "http-proxy-middleware": "^2.0.9",
+        "ipaddr.js": "^2.1.0",
+        "launch-editor": "^2.6.1",
+        "open": "^10.0.3",
+        "p-retry": "^6.2.0",
+        "schema-utils": "^4.2.0",
+        "selfsigned": "^5.5.0",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.24",
+        "spdy": "^4.0.2",
+        "webpack-dev-middleware": "^7.4.2",
+        "ws": "^8.18.0"
+      },
+      "bin": {
+        "webpack-dev-server": "bin/webpack-dev-server.js"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        },
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/cookie-signature": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+      "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/webpack-dev-server/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/webpack-dev-server/node_modules/express": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
+      "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "~1.20.3",
+        "content-disposition": "~0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "~0.7.1",
+        "cookie-signature": "~1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.3.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "~2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "~0.1.12",
+        "proxy-addr": "~2.0.7",
+        "qs": "~6.14.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "~0.19.0",
+        "serve-static": "~1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "~2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/finalhandler": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz",
+      "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "~2.0.2",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/http-proxy-middleware": {
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
+      "integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/express": "^4.17.13"
+      },
+      "peerDependenciesMeta": {
+        "@types/express": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ipaddr.js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.3.0.tgz",
+      "integrity": "sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/open": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
+      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "wsl-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/path-to-regexp": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/webpack-dev-server/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/qs": {
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
+      "integrity": "sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/send": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz",
+      "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "~0.5.2",
+        "http-errors": "~2.0.1",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "~2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "~2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/serve-static": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz",
+      "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "~0.19.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/wsl-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
+      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-6.0.1.tgz",
+      "integrity": "sha512-hXXvrjtx2PLYx4qruKl+kyRSLc52V+cCvMxRjmKwoA+CBbbF5GfIBtR6kCvl0fYGqTUPKB+1ktVmTHqMOzgCBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.4.tgz",
+      "integrity": "sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack-subresource-integrity": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/webpack-subresource-integrity/-/webpack-subresource-integrity-5.1.0.tgz",
+      "integrity": "sha512-sacXoX+xd8r4WKsy9MvH/q/vBtEHr86cpImXwyg74pFIpERKt6FmB8cXpeuh0ZLgclOlHI4Wcll7+R5L02xk9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "typed-assert": "^1.0.8"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "html-webpack-plugin": ">= 5.0.0-beta.1 < 6",
+        "webpack": "^5.12.0"
+      },
+      "peerDependenciesMeta": {
+        "html-webpack-plugin": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/whatwg-encoding": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/whatwg-mimetype": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-5.0.0.tgz",
+      "integrity": "sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-16.0.1.tgz",
+      "integrity": "sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@exodus/bytes": "^1.11.0",
+        "tr46": "^6.0.0",
+        "webidl-conversions": "^8.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      }
+    },
+    "node_modules/whatwg-url/node_modules/@exodus/bytes": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@exodus/bytes/-/bytes-1.14.1.tgz",
+      "integrity": "sha512-OhkBFWI6GcRMUroChZiopRiSp2iAMvEBK47NhJooDqz1RERO4QuZIZnjP63TXX8GAiLABkYmX+fuQsdJ1dd2QQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "@noble/hashes": "^1.8.0 || ^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@noble/hashes": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/whatwg-url/node_modules/@noble/hashes": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-2.0.1.tgz",
+      "integrity": "sha512-XlOlEbQcE9fmuXxrVTXCTlG2nlRXa9Rj3rr5Ue/+tX+nmkgbX720YHh0VR3hBF9xDvwnb8D2shVGOwNx+ulArw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wildcard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
+      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/write-file-atomic": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
+      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.19.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
+      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wsl-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.3.1.tgz",
+      "integrity": "sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0",
+        "powershell-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/xml-name-validator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
+      "integrity": "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^9.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "string-width": "^7.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^22.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yoctocolors": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.2.tgz",
+      "integrity": "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yoctocolors-cjs": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz",
+      "integrity": "sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.1.tgz",
+      "integrity": "sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.25 || ^4"
+      }
+    },
+    "node_modules/zone.js": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.16.1.tgz",
+      "integrity": "sha512-dpvY17vxYIW3+bNrP0ClUlaiY0CiIRK3tnoLaGoQsQcY9/I/NpzIWQ7tQNhbV7LacQMpCII6wVzuL3tuWOyfuA==",
+      "license": "MIT"
+    },
+    "node_modules/zrender": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz",
+      "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..57f9b23
--- /dev/null
+++ b/package.json
@@ -0,0 +1,84 @@
+{
+  "name": "angularmaterialadminfull",
+  "description": "Angular-Material-Admin-Full",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "start:nobackend": "ng serve",
+    "start:backend": "ng serve --configuration backend",
+    "build": "ng build --configuration production",
+    "lint": "ng lint",
+    "lint:fix": "ng lint --fix",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "jest --runInBand",
+    "test:watch": "jest --watch",
+    "e2e": "playwright test -c e2e/playwright.config.cjs",
+    "e2e:headed": "playwright test -c e2e/playwright.config.cjs --headed",
+    "audit:prod": "npm audit --omit=dev",
+    "audit:full": "npm audit",
+    "hmr": "ng serve --configuration hmr"
+  },
+  "private": true,
+  "packageManager": "npm@10",
+  "engines": {
+    "node": "22.x",
+    "npm": ">=10"
+  },
+  "dependencies": {
+    "@angular/animations": "^21.2.0",
+    "@angular/cdk": "^21.2.0",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/google-maps": "^21.2.0",
+    "@angular/material": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/platform-browser-dynamic": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "@danielmoncada/angular-datetime-picker": "^21.0.0",
+    "@fortawesome/fontawesome-free": "^7.2.0",
+    "@fullcalendar/angular": "^6.1.20",
+    "@fullcalendar/core": "^6.1.20",
+    "@fullcalendar/daygrid": "^6.1.20",
+    "@fullcalendar/interaction": "^6.1.20",
+    "@fullcalendar/timegrid": "^6.1.20",
+    "@ng-select/ng-select": "^21.5.2",
+    "angular-calendar": "^0.32.0",
+    "angular-draggable-droppable": "^9.0.1",
+    "angular-resizable-element": "^8.0.1",
+    "date-fns": "^4.1.0",
+    "echarts": "^6.0.0",
+    "leaflet": "^1.9.4",
+    "moment": "^2.30.1",
+    "ngx-echarts": "^21.0.0",
+    "ngx-toastr": "^20.0.5",
+    "rxjs": "7.8.2",
+    "swiper": "^12.1.2",
+    "tslib": "^2.0.0",
+    "zone.js": "^0.16.1"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^21.2.0",
+    "@angular-eslint/builder": "21.2.0",
+    "@angular-eslint/eslint-plugin": "21.2.0",
+    "@angular-eslint/eslint-plugin-template": "21.2.0",
+    "@angular-eslint/schematics": "21.2.0",
+    "@angular-eslint/template-parser": "21.2.0",
+    "@angular/cli": "^21.2.0",
+    "@angular/compiler-cli": "^21.2.0",
+    "@angular/language-service": "^21.2.0",
+    "@playwright/test": "^1.58.2",
+    "@types/jest": "^30.0.0",
+    "@types/leaflet": "^1.9.21",
+    "@types/node": "^25.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "eslint": "^9.39.3",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-preset-angular": "^16.1.1",
+    "ts-jest": "^29.4.6",
+    "typescript": "5.9.3"
+  }
+}
diff --git a/setup-jest.ts b/setup-jest.ts
new file mode 100644
index 0000000..58c511e
--- /dev/null
+++ b/setup-jest.ts
@@ -0,0 +1,3 @@
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();
diff --git a/src/app/app.component.html b/src/app/app.component.html
new file mode 100644
index 0000000..0680b43
--- /dev/null
+++ b/src/app/app.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000..ab47cf9
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: false
+})
+export class AppComponent {}
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
new file mode 100644
index 0000000..4a2191e
--- /dev/null
+++ b/src/app/app.config.ts
@@ -0,0 +1,44 @@
+import { InjectionToken } from '@angular/core';
+import { environment } from '../environments/environment';
+
+export interface AppRuntimeConfig {
+  version: string;
+  remote: string;
+  isBackend: boolean;
+  hostApi: string;
+  portApi: string;
+  baseURLApi: string;
+  auth: {
+    email: string;
+    password: string;
+  };
+}
+
+const buildRuntimeConfig = (): AppRuntimeConfig => {
+  const hostApi = environment.production
+    ? 'https://sing-generator-node.flatlogic.com'
+    : 'http://localhost';
+  const portApi = environment.production ? '' : '8080';
+  const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}`;
+
+  return {
+    version: '1.2.0',
+    remote: 'https://sing-generator-node.flatlogic.com',
+    isBackend: environment.backend,
+    hostApi,
+    portApi,
+    baseURLApi,
+    auth: {
+      email: 'admin@flatlogic.com',
+      password: 'password',
+    },
+  };
+};
+
+export const APP_RUNTIME_CONFIG = new InjectionToken<AppRuntimeConfig>(
+  'APP_RUNTIME_CONFIG',
+  {
+    providedIn: 'root',
+    factory: buildRuntimeConfig,
+  },
+);
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
new file mode 100644
index 0000000..41f3ac8
--- /dev/null
+++ b/src/app/app.module.ts
@@ -0,0 +1,53 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  PreloadAllModules,
+  RouterModule,
+  provideRouter,
+  withPreloading,
+} from '@angular/router';
+import { ToastrModule } from 'ngx-toastr';
+
+import { AppComponent } from './app.component';
+import { APP_ROUTES } from './app.routes';
+import { NotFoundComponent } from './shared/not-found/not-found.component';
+import { CrudModule } from './modules/CRUD/crud.module';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { MAT_SELECT_CONFIG } from '@angular/material/select';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { httpInterceptor } from './shared/services/http-interceptor.service';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    NotFoundComponent,
+    CrudModule,
+    BrowserAnimationsModule,
+    RouterModule,
+    ToastrModule.forRoot(),
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts'),
+    }),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory,
+    }),
+  ],
+  providers: [
+    {
+      provide: MAT_SELECT_CONFIG,
+      useValue: {
+        hideSingleSelectionIndicator: true,
+        panelWidth: null,
+      },
+    },
+    provideRouter(APP_ROUTES, withPreloading(PreloadAllModules)),
+    provideHttpClient(withInterceptors([httpInterceptor])),
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
diff --git a/src/app/app.routes.spec.ts b/src/app/app.routes.spec.ts
new file mode 100644
index 0000000..2df9737
--- /dev/null
+++ b/src/app/app.routes.spec.ts
@@ -0,0 +1,38 @@
+import { APP_ROUTES } from './app.routes';
+import { routes } from './consts';
+
+describe('APP_ROUTES', () => {
+  it('redirects root path to dashboard with full match', () => {
+    const rootRedirect = APP_ROUTES.find(
+      (route) => route.path === '' && route.redirectTo,
+    );
+
+    expect(rootRedirect?.redirectTo).toBe(routes.DASHBOARD);
+    expect(rootRedirect?.pathMatch).toBe('full');
+  });
+
+  it('contains required top-level feature paths under layout', () => {
+    const layoutRoute = APP_ROUTES.find(
+      (route) => route.path === '' && Array.isArray(route.children),
+    );
+    const childPaths = (layoutRoute?.children ?? []).map((route) => route.path);
+
+    expect(childPaths).toEqual(
+      expect.arrayContaining([
+        'dashboard',
+        'admin',
+        'app',
+        'user',
+        'e-commerce',
+        'charts',
+        'maps',
+        'extra',
+      ]),
+    );
+  });
+
+  it('redirects unknown paths to 404', () => {
+    const wildcardRoute = APP_ROUTES.find((route) => route.path === '**');
+    expect(wildcardRoute?.redirectTo).toBe('404');
+  });
+});
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
new file mode 100644
index 0000000..9b0d53f
--- /dev/null
+++ b/src/app/app.routes.ts
@@ -0,0 +1,128 @@
+import { Routes } from '@angular/router';
+
+import { NotFoundComponent } from './shared/not-found/not-found.component';
+import { authGuard } from './modules/auth/guards';
+import { LayoutComponent } from './shared/layout/layout.component';
+import { routes } from './consts';
+
+const ROUTES: typeof routes = routes;
+
+export const APP_ROUTES: Routes = [
+  {
+    path: '',
+    redirectTo: ROUTES.DASHBOARD,
+    pathMatch: 'full',
+  },
+  {
+    path: 'login',
+    loadChildren: () =>
+      import('./modules/auth/auth.routes').then((m) => m.AUTH_ROUTES),
+  },
+  {
+    path: '404',
+    component: NotFoundComponent,
+  },
+  {
+    path: '',
+    component: LayoutComponent,
+    children: [
+      {
+        path: 'dashboard',
+        pathMatch: 'full',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/dashboard/dashboard.routes').then(
+            (m) => m.DASHBOARD_ROUTES,
+          ),
+      },
+      {
+        path: 'documentation',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/documentation/documentation.module').then(
+            (m) => m.DocumentationModule,
+          ),
+      },
+      {
+        path: 'e-commerce',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/e-commerce/e-commerce.module').then(
+            (m) => m.ECommerceModule,
+          ),
+      },
+      {
+        path: 'core',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/templates/core/core.module').then((m) => m.CoreModule),
+      },
+      {
+        path: 'tables',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/templates/tables/tables.module').then(
+            (m) => m.TablesModule,
+          ),
+      },
+      {
+        path: 'ui',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/templates/ui-elements/ui-elements.module').then(
+            (m) => m.UiElementsModule,
+          ),
+      },
+      {
+        path: 'forms',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/templates/forms/forms.module').then(
+            (m) => m.FormsModule,
+          ),
+      },
+      {
+        path: 'charts',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/templates/charts/charts.module').then(
+            (m) => m.ChartsModule,
+          ),
+      },
+      {
+        path: 'maps',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/templates/maps/maps.module').then((m) => m.MapsModule),
+      },
+      {
+        path: 'extra',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/templates/extra/extra.module').then(
+            (m) => m.ExtraModule,
+          ),
+      },
+      {
+        path: 'admin',
+        loadChildren: () =>
+          import('./modules/CRUD/crud.module').then((m) => m.CrudModule),
+      },
+      {
+        path: 'user',
+        canActivate: [authGuard],
+        loadChildren: () =>
+          import('./modules/user/user.module').then((m) => m.UserModule),
+      },
+      {
+        path: 'app',
+        loadChildren: () =>
+          import('./modules/pages/pages.routes').then((m) => m.PAGES_ROUTES),
+      },
+    ],
+  },
+  {
+    path: '**',
+    redirectTo: '404',
+  },
+];
diff --git a/src/app/consts/colors.ts b/src/app/consts/colors.ts
new file mode 100644
index 0000000..1f71f28
--- /dev/null
+++ b/src/app/consts/colors.ts
@@ -0,0 +1,10 @@
+export enum colors {
+  YELLOW = '#ffc260',
+  BLUE = '#536DFE',
+  LIGHT_BLUE = '#F8F9FF',
+  DARK_BLUE = '#7C90FF',
+  PINK = '#ff4081',
+  GREEN = '#3CD4A0',
+  VIOLET = '#9013FE',
+  GREY = '#E0E0E0',
+}
diff --git a/src/app/consts/common.ts b/src/app/consts/common.ts
new file mode 100644
index 0000000..4f8cd69
--- /dev/null
+++ b/src/app/consts/common.ts
@@ -0,0 +1 @@
+export const AUTO_COMPLETE_LIMIT = 100;
diff --git a/src/app/consts/index.ts b/src/app/consts/index.ts
new file mode 100644
index 0000000..08e1096
--- /dev/null
+++ b/src/app/consts/index.ts
@@ -0,0 +1,4 @@
+export * from './routes';
+export * from './colors';
+export * from './common';
+export * from './storage';
diff --git a/src/app/consts/routes.ts b/src/app/consts/routes.ts
new file mode 100644
index 0000000..8abe5bf
--- /dev/null
+++ b/src/app/consts/routes.ts
@@ -0,0 +1,86 @@
+export enum routes {
+  DASHBOARD = '/dashboard',
+  PROFILE = '/user/profile',
+  CHANGE_PASSWORD = '/app/change-password',
+  LOGIN = '/login',
+
+  // --- CRUD module ---//
+
+  Users = '/admin/users',
+  Users_CREATE = '/admin/users/new',
+  Users_EDIT = '/admin/users/edit',
+
+  // --- E-commerce ---//
+
+  MANAGEMENT = '/e-commerce/management',
+  PRODUCT_EDIT = '/e-commerce/edit',
+  PRODUCT_CREATE = '/e-commerce/create',
+  PRODUCTS = '/e-commerce/products',
+  PRODUCT = '/e-commerce/product',
+
+  // --- Documentation ---//
+
+  LIBS = '/documentation/libs',
+  STRUCTURE = '/documentation/structure',
+  OVERVIEW = '/documentation/overview',
+  LICENCES = '/documentation/licences',
+  QUICK_START = '/documentation/quick-start',
+  CHARTS = '/documentation/charts',
+  FORMS = '/documentation/forms',
+  UI = '/documentation/ui',
+  MAPS = '/documentation/maps',
+  TABLES = '/documentation/tables',
+
+  // --- Core module ---//
+
+  TYPOGRAPHY = '/core/typography',
+  COLORS = '/core/colors',
+  GRID = '/core/grid',
+
+  // --- Tables module ---//
+
+  TABLES_BASIC = '/tables/basic',
+  TABLES_DYNAMIC = '/tables/dynamic',
+
+  // --- Ui Elements module --- //
+
+  ICONS = '/ui/icons',
+  BADGE = '/ui/badge',
+  CAROUSEL = '/ui/carousel',
+  CARDS = '/ui/cards',
+  MODAL = '/ui/modal',
+  NOTIFICATION = '/ui/notification',
+  NAVBAR = '/ui/navbar',
+  TOOLTIPS = '/ui/tooltips',
+  TABS = '/ui/tabs',
+  PAGINATION = '/ui/pagination',
+  PROGRESS = '/ui/progress',
+  WIDGET = '/ui/widget',
+
+  // --- Forms module ---//
+
+  FORMS_ELEMENTS = '/forms/elements',
+  FORMS_VALIDATION = '/forms/validation',
+
+  // --- Charts module ---//
+
+  BAR_CHARTS = '/charts/bar',
+  LINE_CHARTS = '/charts/line',
+  PIE_CHARTS = '/charts/pie',
+  OVERVIEW_CHARTS = '/charts/overview',
+
+  // --- Maps module --- //
+
+  GOOGLE_MAP = '/maps/google',
+  VECTOR_MAP = '/maps/vector',
+
+  // --- Extra module ---//
+
+  CALENDAR = '/extra/calendar',
+  INVOICE = '/extra/invoice',
+  LOGIN_PAGE = '/extra/login',
+  ERROR_PAGE = '/extra/error',
+  GALLERY = '/extra/gallery',
+  SEARCH_RESULT = '/extra/search-result',
+  TIME_LINE = '/extra/time-line',
+}
diff --git a/src/app/consts/storage.ts b/src/app/consts/storage.ts
new file mode 100644
index 0000000..38368fa
--- /dev/null
+++ b/src/app/consts/storage.ts
@@ -0,0 +1,2 @@
+export const AUTH_TOKEN_STORAGE_KEY = 'token';
+export const AUTH_USER_STORAGE_KEY = 'user';
diff --git a/src/app/modules/CRUD/crud-routing.module.ts b/src/app/modules/CRUD/crud-routing.module.ts
new file mode 100644
index 0000000..b2a08bc
--- /dev/null
+++ b/src/app/modules/CRUD/crud-routing.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { UsersCreateComponent } from './users-create/users-create.component';
+import { UsersEditComponent } from './users-edit/users-edit.component';
+import { UsersListComponent } from './users-list/users-list.component';
+
+const routes: Routes = [
+  {
+    path: 'users',
+    component: UsersListComponent,
+  },
+  {
+    path: 'users/edit',
+    component: UsersEditComponent,
+  },
+  {
+    path: 'users/edit/:id',
+    component: UsersEditComponent,
+  },
+  {
+    path: 'users/new',
+    component: UsersCreateComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CrudRoutingModule {}
diff --git a/src/app/modules/CRUD/crud.module.ts b/src/app/modules/CRUD/crud.module.ts
new file mode 100644
index 0000000..2803139
--- /dev/null
+++ b/src/app/modules/CRUD/crud.module.ts
@@ -0,0 +1,62 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  OwlDateTimeModule,
+  OwlNativeDateTimeModule,
+} from '@danielmoncada/angular-datetime-picker';
+import { CrudRoutingModule } from './crud-routing.module';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatDialogModule } from '@angular/material/dialog';
+import { BreadcrumbComponent } from '../../shared/ui-elements';
+import { ImageUploaderComponent } from '../../shared/uploaders/image-uploader/image-uploader.component';
+import { FilterComponent } from '../../shared/filter/filter.component';
+import { DeletePopupComponent } from '../../shared/popups/delete-popup/delete-popup.component';
+
+import { UsersCreateComponent } from './users-create/users-create.component';
+import { UsersEditComponent } from './users-edit/users-edit.component';
+import { UsersListComponent } from './users-list/users-list.component';
+
+@NgModule({
+  declarations: [UsersCreateComponent, UsersEditComponent, UsersListComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    CrudRoutingModule,
+    NgSelectModule,
+    BreadcrumbComponent,
+    ImageUploaderComponent,
+    FilterComponent,
+    DeletePopupComponent,
+    MatCardModule,
+    MatIconModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatInputModule,
+    MatTableModule,
+    MatTooltipModule,
+    MatCheckboxModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatRadioModule,
+    MatDialogModule,
+    OwlDateTimeModule,
+    OwlNativeDateTimeModule,
+  ],
+})
+export class CrudModule {}
diff --git a/src/app/modules/CRUD/users-create/users-create.component.html b/src/app/modules/CRUD/users-create/users-create.component.html
new file mode 100644
index 0000000..d7a9b8d
--- /dev/null
+++ b/src/app/modules/CRUD/users-create/users-create.component.html
@@ -0,0 +1,92 @@
+<app-breadcrumb [path]="routes.Users_CREATE"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <h4 class="h4">New Users</h4>
+  </mat-card-title>
+
+  <mat-card-content [formGroup]="form">
+    <div class="input-wrapper">
+      <p class="input-title">First Name</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="firstName"
+          placeholder="First Name"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Last Name</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="lastName"
+          placeholder="Last Name"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Phone Number</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="phoneNumber"
+          placeholder="Phone Number"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">E-Mail</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="email"
+          placeholder="E-Mail"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <p class="input-title">Role</p>
+
+    <div class="checkbox-wrapper">
+      <mat-radio-group formControlName="role">
+        <mat-radio-button color="primary" [value]="'admin'">
+          admin
+        </mat-radio-button>
+      </mat-radio-group>
+
+      <mat-radio-group formControlName="role">
+        <mat-radio-button color="primary" [value]="'user'">
+          user
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+
+    <div class="checkbox-wrapper">
+      <div class="checkbox-item">
+        <p class="checkbox-item-title">Disabled</p>
+        <mat-checkbox color="primary" formControlName="disabled"></mat-checkbox>
+      </div>
+    </div>
+
+    <app-image-uploader
+      (imageUploaded)="avatarAdd($event)"
+      (imageDeleted)="avatarDel($event)"
+      [imageList]="form.controls.avatar.value"
+      [entityName]="'users'"
+      [propertyName]="'avatar'"
+    >
+    </app-image-uploader>
+
+    <button (click)="onCreate()" mat-flat-button color="success">Create</button>
+    <button (click)="onCancel()" mat-flat-button color="default">Cancel</button>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/CRUD/users-create/users-create.component.scss b/src/app/modules/CRUD/users-create/users-create.component.scss
new file mode 100644
index 0000000..a05484a
--- /dev/null
+++ b/src/app/modules/CRUD/users-create/users-create.component.scss
@@ -0,0 +1,132 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.card {
+  margin-top: 24px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey,
+    0 1px 8px 0 $shadow-dark-grey;
+}
+
+.input-wrapper {
+  width: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0 8px 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.input-title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+  margin: 0 16px 0 0;
+}
+
+.input-field {
+  width: 80%;
+  font-size: $fs-xs;
+
+  @media (max-width: $small) {
+    width: 80%;
+  }
+}
+
+.input-text,
+textarea {
+  font-size: $fs-regular;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+.mat-form-field-wrapper {
+  margin: 0;
+  padding: 0;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+.mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 20px 0 16px 0;
+  border: none;
+}
+
+.input-select {
+  border: none;
+  width: 500px;
+}
+
+.input-panel {
+  width: auto;
+  height: auto;
+}
+
+.input-img {
+  width: 200px;
+  height: auto;
+}
+
+button.mat-mdc-unelevated-button + button.mat-flat-button {
+  margin-left: 8px;
+}
+
+.checkbox-wrapper {
+  margin: 18px 0;
+  display: flex;
+
+  @media (max-width: $medium) {
+    flex-direction: column;
+  }
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-item-title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+  margin: 0 !important;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+.mat-mdc-checkbox,
+.mat-checkbox-inner-container,
+.mat-checkbox-inner-container-no-side-margin {
+  margin-left: 10px !important;
+}
+
+.mat-mdc-radio-button {
+  margin-left: 16px;
+}
+
+.inputs-wrapper {
+  margin-top: 36px;
+
+  @media (max-width: $normal) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.mat-success {
+  background-color: $green;
+  color: white;
+}
+
+mat-form-field + mat-form-field {
+  margin-left: 24px;
+
+  @media (max-width: $normal) {
+    margin-top: 24px;
+    margin-left: 0;
+  }
+}
+
+.image-preview {
+  width: 191px;
+  height: 141px;
+  background-size: cover;
+  background-position: 50% center;
+}
diff --git a/src/app/modules/CRUD/users-create/users-create.component.ts b/src/app/modules/CRUD/users-create/users-create.component.ts
new file mode 100644
index 0000000..d27c116
--- /dev/null
+++ b/src/app/modules/CRUD/users-create/users-create.component.ts
@@ -0,0 +1,85 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  FormControl,
+  FormGroup,
+} from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { routes, AUTO_COMPLETE_LIMIT } from '../../../consts';
+import { UsersService } from '../../../shared/services/users.service';
+import { take } from 'rxjs';
+
+type AvatarItem = {
+  id?: string;
+  publicUrl?: string;
+  [key: string]: unknown;
+};
+
+type UsersCreateFormControls = {
+  firstName: FormControl<string>;
+  lastName: FormControl<string>;
+  phoneNumber: FormControl<string>;
+  email: FormControl<string>;
+  role: FormControl<string>;
+  disabled: FormControl<boolean>;
+  avatar: FormControl<AvatarItem[]>;
+};
+
+@Component({
+    selector: 'app-users-create',
+    templateUrl: './users-create.component.html',
+    styleUrls: ['./users-create.component.scss'],
+    standalone: false
+})
+export class UsersCreateComponent implements OnInit {
+  loading = false;
+  public routes: typeof routes = routes;
+  public form: FormGroup<UsersCreateFormControls>;
+  AUTO_COMPLETE_LIMIT = AUTO_COMPLETE_LIMIT;
+
+  constructor(
+    private router: Router,
+    private toastr: ToastrService,
+    private usersService: UsersService,
+  ) {
+    this.form = new FormGroup<UsersCreateFormControls>({
+      firstName: new FormControl('', { nonNullable: true }),
+      lastName: new FormControl('', { nonNullable: true }),
+      phoneNumber: new FormControl('', { nonNullable: true }),
+      email: new FormControl('', { nonNullable: true }),
+      role: new FormControl('user', { nonNullable: true }),
+      disabled: new FormControl(false, { nonNullable: true }),
+      avatar: new FormControl<AvatarItem[]>([], { nonNullable: true }),
+    });
+  }
+
+  ngOnInit(): void {}
+
+  public avatarAdd(val: AvatarItem): void {
+    const currentAvatar = this.form.controls.avatar.value;
+    this.form.controls.avatar.setValue([...currentAvatar, val]);
+  }
+
+  public avatarDel(id: string): void {
+    const nextAvatar = this.form.controls.avatar.value.filter(
+      (img) => img.id !== id,
+    );
+    this.form.controls.avatar.setValue(nextAvatar);
+  }
+
+  onCreate(): void {
+    this.usersService.create(this.form.getRawValue()).pipe(take(1)).subscribe({
+      next: () => {
+        this.toastr.success('Users created successfully');
+        this.router.navigate([this.routes.Users]);
+      },
+      error: () => {
+        this.toastr.error('Something was wrong. Try again');
+      },
+    });
+  }
+
+  onCancel(): void {
+    this.router.navigate([this.routes.Users]);
+  }
+}
diff --git a/src/app/modules/CRUD/users-edit/users-edit.component.html b/src/app/modules/CRUD/users-edit/users-edit.component.html
new file mode 100644
index 0000000..5affbfd
--- /dev/null
+++ b/src/app/modules/CRUD/users-edit/users-edit.component.html
@@ -0,0 +1,104 @@
+<app-breadcrumb [path]="routes.Users_EDIT"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <h4 class="h4">Edit Users</h4>
+  </mat-card-title>
+
+  <mat-card-content [formGroup]="form">
+    <div class="input-wrapper">
+      <p class="input-title">First Name</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="firstName"
+          placeholder="First Name"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Last Name</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="lastName"
+          placeholder="Last Name"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Phone Number</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="phoneNumber"
+          placeholder="Phone Number"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">E-Mail</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="email"
+          placeholder="E-Mail"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <p class="input-title">Role</p>
+
+    <div class="checkbox-wrapper">
+      <mat-radio-group formControlName="role">
+        <mat-radio-button color="primary" [value]="'admin'">
+          admin
+        </mat-radio-button>
+      </mat-radio-group>
+
+      <mat-radio-group formControlName="role">
+        <mat-radio-button color="primary" [value]="'user'">
+          user
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+
+    <div class="checkbox-wrapper">
+      <div class="checkbox-item">
+        <p class="checkbox-item-title">Disabled</p>
+        <mat-checkbox color="primary" formControlName="disabled"></mat-checkbox>
+      </div>
+    </div>
+
+    <app-image-uploader
+      (imageUploaded)="avatarAdd($event)"
+      (imageDeleted)="avatarDel($event)"
+      [imageList]="form.controls.avatar.value"
+      [entityName]="'users'"
+      [propertyName]="'avatar'"
+    >
+    </app-image-uploader>
+
+    <div class="input-wrapper">
+      <p class="input-title">Password</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="password"
+          placeholder="Password"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <button (click)="onSave()" mat-flat-button color="success">Save</button>
+    <button (click)="onCancel()" mat-flat-button color="default">Cancel</button>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/CRUD/users-edit/users-edit.component.scss b/src/app/modules/CRUD/users-edit/users-edit.component.scss
new file mode 100644
index 0000000..a05484a
--- /dev/null
+++ b/src/app/modules/CRUD/users-edit/users-edit.component.scss
@@ -0,0 +1,132 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.card {
+  margin-top: 24px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey,
+    0 1px 8px 0 $shadow-dark-grey;
+}
+
+.input-wrapper {
+  width: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0 8px 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.input-title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+  margin: 0 16px 0 0;
+}
+
+.input-field {
+  width: 80%;
+  font-size: $fs-xs;
+
+  @media (max-width: $small) {
+    width: 80%;
+  }
+}
+
+.input-text,
+textarea {
+  font-size: $fs-regular;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+.mat-form-field-wrapper {
+  margin: 0;
+  padding: 0;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+.mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 20px 0 16px 0;
+  border: none;
+}
+
+.input-select {
+  border: none;
+  width: 500px;
+}
+
+.input-panel {
+  width: auto;
+  height: auto;
+}
+
+.input-img {
+  width: 200px;
+  height: auto;
+}
+
+button.mat-mdc-unelevated-button + button.mat-flat-button {
+  margin-left: 8px;
+}
+
+.checkbox-wrapper {
+  margin: 18px 0;
+  display: flex;
+
+  @media (max-width: $medium) {
+    flex-direction: column;
+  }
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-item-title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+  margin: 0 !important;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+.mat-mdc-checkbox,
+.mat-checkbox-inner-container,
+.mat-checkbox-inner-container-no-side-margin {
+  margin-left: 10px !important;
+}
+
+.mat-mdc-radio-button {
+  margin-left: 16px;
+}
+
+.inputs-wrapper {
+  margin-top: 36px;
+
+  @media (max-width: $normal) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.mat-success {
+  background-color: $green;
+  color: white;
+}
+
+mat-form-field + mat-form-field {
+  margin-left: 24px;
+
+  @media (max-width: $normal) {
+    margin-top: 24px;
+    margin-left: 0;
+  }
+}
+
+.image-preview {
+  width: 191px;
+  height: 141px;
+  background-size: cover;
+  background-position: 50% center;
+}
diff --git a/src/app/modules/CRUD/users-edit/users-edit.component.ts b/src/app/modules/CRUD/users-edit/users-edit.component.ts
new file mode 100644
index 0000000..4bd8f5f
--- /dev/null
+++ b/src/app/modules/CRUD/users-edit/users-edit.component.ts
@@ -0,0 +1,176 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  FormControl,
+  FormGroup,
+} from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { routes, AUTO_COMPLETE_LIMIT } from '../../../consts';
+import { UsersService } from '../../../shared/services/users.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { take } from 'rxjs';
+
+type AvatarItem = {
+  id?: string;
+  publicUrl?: string;
+  [key: string]: unknown;
+};
+
+type UsersEditFormControls = {
+  firstName: FormControl<string>;
+  lastName: FormControl<string>;
+  phoneNumber: FormControl<string>;
+  email: FormControl<string>;
+  role: FormControl<string>;
+  disabled: FormControl<boolean>;
+  avatar: FormControl<AvatarItem[]>;
+  password: FormControl<string>;
+};
+
+type UsersEditFormValue = {
+  firstName: string;
+  lastName: string;
+  phoneNumber: string;
+  email: string;
+  role: string;
+  disabled: boolean;
+  avatar: AvatarItem[];
+  password: string;
+};
+
+@Component({
+    selector: 'app-users-edit',
+    templateUrl: './users-edit.component.html',
+    styleUrls: ['./users-edit.component.scss'],
+    standalone: false
+})
+export class UsersEditComponent implements OnInit {
+  loading = false;
+  public routes: typeof routes = routes;
+  public form: FormGroup<UsersEditFormControls>;
+  AUTO_COMPLETE_LIMIT = AUTO_COMPLETE_LIMIT;
+  selectedId: string | null = null;
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private toastr: ToastrService,
+    private usersService: UsersService,
+  ) {
+    this.form = new FormGroup<UsersEditFormControls>({
+      firstName: new FormControl('', { nonNullable: true }),
+      lastName: new FormControl('', { nonNullable: true }),
+      phoneNumber: new FormControl('', { nonNullable: true }),
+      email: new FormControl('', { nonNullable: true }),
+      role: new FormControl('user', { nonNullable: true }),
+      disabled: new FormControl(false, { nonNullable: true }),
+      avatar: new FormControl<AvatarItem[]>([], { nonNullable: true }),
+      password: new FormControl('', { nonNullable: true }),
+    });
+  }
+
+  ngOnInit(): void {
+    this.route.paramMap
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params) => {
+        this.selectedId = params.get('id');
+
+        if (this.selectedId) {
+          this.getUsersById();
+          return;
+        }
+
+        this.redirectToFirstUser();
+      });
+  }
+
+  public avatarAdd(val: AvatarItem): void {
+    const currentAvatar = this.form.controls.avatar.value;
+    this.form.controls.avatar.setValue([...currentAvatar, val]);
+  }
+
+  public avatarDel(id: string): void {
+    const nextAvatar = this.form.controls.avatar.value.filter(
+      (img) => img.id !== id,
+    );
+    this.form.controls.avatar.setValue(nextAvatar);
+  }
+
+  onSave(): void {
+    if (!this.selectedId) {
+      this.toastr.error('User is not selected');
+      this.router.navigate([this.routes.Users]);
+      return;
+    }
+
+    const payload: UsersEditFormValue = this.form.getRawValue();
+    this.usersService.update(payload, this.selectedId).pipe(take(1)).subscribe({
+      next: () => {
+        this.toastr.success('Users updated successfully');
+        this.router.navigate([this.routes.Users]);
+      },
+      error: () => {
+        this.toastr.error('Something was wrong. Try again');
+      },
+    });
+  }
+
+  onCancel(): void {
+    this.router.navigate([this.routes.Users]);
+  }
+
+  private getUsersById(): void {
+    if (!this.selectedId) {
+      return;
+    }
+
+    this.usersService.getById(this.selectedId).pipe(take(1)).subscribe({
+      next: (res) => {
+        if (!res) {
+          this.toastr.error('User not found');
+          this.router.navigate([this.routes.Users]);
+          return;
+        }
+
+        this.form.patchValue({
+          firstName: res.firstName ?? '',
+          lastName: res.lastName ?? '',
+          phoneNumber: res.phoneNumber ?? '',
+          email: res.email ?? '',
+          role: typeof res.role === 'string' ? res.role : 'user',
+          disabled: Boolean(res.disabled),
+          password: res.password ?? '',
+        });
+        this.form.controls.avatar.setValue(
+          Array.isArray(res.avatar) ? (res.avatar as AvatarItem[]) : [],
+        );
+      },
+      error: () => {
+        this.toastr.error('Failed to load user');
+        this.router.navigate([this.routes.Users]);
+      },
+    });
+  }
+
+  private redirectToFirstUser(): void {
+    this.usersService.getAll().pipe(take(1)).subscribe({
+      next: (res) => {
+        const firstUserId = res?.rows?.[0]?.id;
+        if (!firstUserId) {
+          this.toastr.error('No users available for editing');
+          this.router.navigate([this.routes.Users]);
+          return;
+        }
+
+        this.router.navigate([this.routes.Users_EDIT, firstUserId], {
+          replaceUrl: true,
+        });
+      },
+      error: () => {
+        this.toastr.error('Failed to load users');
+        this.router.navigate([this.routes.Users]);
+      },
+    });
+  }
+}
diff --git a/src/app/modules/CRUD/users-list/users-list.component.html b/src/app/modules/CRUD/users-list/users-list.component.html
new file mode 100644
index 0000000..c1e4fb1
--- /dev/null
+++ b/src/app/modules/CRUD/users-list/users-list.component.html
@@ -0,0 +1,250 @@
+<app-breadcrumb [path]="routes.Users"></app-breadcrumb>
+
+<div class="filter-form">
+  <button mat-flat-button color="success" [routerLink]="routes.Users_CREATE">
+    New
+  </button>
+  <button
+    mat-flat-button
+    color="success"
+    class="filter-button"
+    (click)="addFilter()"
+    >
+    Add filter
+  </button>
+
+  @if (showFilters) {
+    <mat-card appearance="outlined" class="card">
+      <app-filter
+        [filters]="filters"
+        [config]="config"
+        (clearFilterConfirmed)="clearFilters()"
+        (deleteFilterConfirmed)="delFilter()"
+        (submitConfirmed)="submitHandler($event)"
+        >
+      </app-filter>
+    </mat-card>
+  }
+</div>
+
+<mat-card appearance="outlined" class="card">
+  <mat-card-content class="card-content">
+    <a href="{{ redirectToSwagger() }}">API documentation for users</a>
+    <div class="table-title-wrapper">
+      <p class="table-title">Users</p>
+    </div>
+
+    <div class="table-wrapper">
+      <table
+        mat-table
+        [dataSource]="dataSource"
+        matSort
+        matSortDisableClear="true"
+        class="table"
+        (matSortChange)="sort($event)"
+        >
+        <!-- First Name Column -->
+
+        <ng-container matColumnDef="firstName">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            class="table-header"
+            mat-sort-header
+            >
+            First Name
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let row"
+            class="table-body"
+            (click)="edit(row)"
+            >
+            {{ row.firstName }}
+          </td>
+        </ng-container>
+
+        <!-- Last Name Column -->
+
+        <ng-container matColumnDef="lastName">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            class="table-header"
+            mat-sort-header
+            >
+            Last Name
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let row"
+            class="table-body"
+            (click)="edit(row)"
+            >
+            {{ row.lastName }}
+          </td>
+        </ng-container>
+
+        <!-- Phone Number Column -->
+
+        <ng-container matColumnDef="phoneNumber">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            class="table-header"
+            mat-sort-header
+            >
+            Phone Number
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let row"
+            class="table-body"
+            (click)="edit(row)"
+            >
+            {{ row.phoneNumber }}
+          </td>
+        </ng-container>
+
+        <!-- E-Mail Column -->
+
+        <ng-container matColumnDef="email">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            class="table-header"
+            mat-sort-header
+            >
+            E-Mail
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let row"
+            class="table-body"
+            (click)="edit(row)"
+            >
+            {{ row.email }}
+          </td>
+        </ng-container>
+
+        <!-- Role Column -->
+
+        <ng-container matColumnDef="role">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            class="table-header"
+            mat-sort-header
+            >
+            Role
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let row"
+            class="table-body"
+            (click)="edit(row)"
+            >
+            {{ row.role }}
+          </td>
+        </ng-container>
+
+        <!-- Disabled Column -->
+
+        <ng-container matColumnDef="disabled">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            class="table-header"
+            mat-sort-header
+            >
+            Disabled
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let row"
+            class="table-body"
+            (click)="$event.stopPropagation()"
+            >
+            <mat-checkbox
+              color="primary"
+              [checked]="row.disabled"
+            ></mat-checkbox>
+          </td>
+        </ng-container>
+
+        <!-- Avatar Column -->
+
+        <ng-container matColumnDef="avatar">
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            class="table-header"
+            mat-sort-header
+            >
+            Avatar
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let row"
+            class="table-body"
+            (click)="edit(row)"
+            >
+            @if (row.avatar.length) {
+              <img
+                [src]="dataFormatterService.oneImageFormatter(row.avatar)"
+                alt="..."
+                class="table-img"
+                title="image"
+                />
+            }
+          </td>
+        </ng-container>
+
+        <!-- Action Column -->
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef class="table-header">
+            Actions
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let element"
+            class="table-body"
+            (click)="$event.stopPropagation()"
+            >
+            <div class="table-buttons-wrapper">
+              <button
+                mat-flat-button
+                color="success"
+                class="table-button"
+                (click)="edit(element)"
+                >
+                edit
+              </button>
+              <button
+                mat-flat-button
+                color="warn"
+                class="table-button"
+                (click)="openDeleteModal(element.id)"
+                >
+                delete
+              </button>
+            </div>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr
+          mat-row
+          *matRowDef="let row; columns: displayedColumns"
+          (click)="edit(row)"
+        ></tr>
+      </table>
+    </div>
+
+    <mat-paginator
+      [pageSizeOptions]="[10, 20, 50, 100]"
+      showFirstLastButtons
+      (page)="setLimit($event)"
+    ></mat-paginator>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/CRUD/users-list/users-list.component.scss b/src/app/modules/CRUD/users-list/users-list.component.scss
new file mode 100644
index 0000000..87211f5
--- /dev/null
+++ b/src/app/modules/CRUD/users-list/users-list.component.scss
@@ -0,0 +1,209 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.card,
+.filter-form {
+  margin-top: 16px;
+}
+
+.card-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.card-title {
+  margin: -30px 0 0 0;
+
+  @media (max-width: $small) {
+    margin: 0;
+  }
+}
+
+.card-subtitle {
+  font-size: 12px;
+  font-weight: $fw-lighter;
+  color: $grey;
+}
+
+.filter-buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.filter-button {
+  margin-left: 10px;
+}
+
+.input-wrapper {
+  width: 62%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0 8px 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.text-field {
+  width: 50%;
+}
+
+.search-field {
+  font-size: 14px;
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin: 24px 0;
+  }
+}
+
+.search-title {
+  font-size: 16px;
+}
+
+.search-icon {
+  color: $light-grey;
+  margin: 0 8px 0 0;
+  padding: 0;
+}
+
+.table-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 24px 0;
+}
+
+.table-title {
+  font-size: $fs-regular;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.table-title-icon {
+  color: $dark-grey;
+  cursor: pointer;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+
+  &:hover {
+    background-color: $black-04;
+  }
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  box-shadow: none;
+  width: 100%;
+  background: transparent;
+}
+
+.table-header {
+  font-size: 15px;
+  font-weight: $fw-normal;
+  color: $dark-grey;
+  padding: 14px 38px 14px 24px;
+}
+
+.table-body {
+  font-size: 15px;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  padding: 14px 38px 14px 24px;
+}
+
+.table-buttons-wrapper {
+  display: flex;
+}
+
+.table-button {
+  min-height: 30px;
+  height: 30px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: 0;
+  &:first-child {
+    margin-right: 1rem;
+  }
+}
+
+.image {
+  width: 100px;
+}
+
+.product-title {
+  color: $blue;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.rating-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.product-id {
+  padding: 14px;
+}
+
+.product-pop {
+  font-size: $fs-normal;
+  color: $yellow;
+  margin: 0;
+}
+
+.product-pop-icon {
+  font-size: 23px;
+  padding: 0;
+}
+
+.mat-success {
+  background-color: $green;
+  color: white;
+}
+
+.image-preview {
+  width: 191px;
+  height: 141px;
+  background-size: cover;
+  background-position: 50% center;
+}
+
+.image-preview {
+  width: 191px;
+  height: 141px;
+  background-size: cover;
+  background-position: 50% center;
+}
+.table-img {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+}
+.file {
+  display: block;
+  white-space: nowrap;
+}
diff --git a/src/app/modules/CRUD/users-list/users-list.component.ts b/src/app/modules/CRUD/users-list/users-list.component.ts
new file mode 100644
index 0000000..301c74f
--- /dev/null
+++ b/src/app/modules/CRUD/users-list/users-list.component.ts
@@ -0,0 +1,151 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { DataFormatterService } from '../../../shared/services/data-formatter.service';
+import { UsersService } from '../../../shared/services/users.service';
+import { routes } from '../../../consts';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatDialog } from '@angular/material/dialog';
+import { DeletePopupComponent } from '../../../shared/popups/delete-popup/delete-popup.component';
+import { Users } from '../../../shared/models/users.model';
+import { MatPaginator } from '@angular/material/paginator';
+import { FilterConfig, FilterItems } from '../../../shared/models/common';
+import { environment } from '../../../../environments/environment';
+import { take } from 'rxjs';
+
+@Component({
+    selector: 'app-users-list',
+    templateUrl: './users-list.component.html',
+    styleUrls: ['./users-list.component.scss'],
+    standalone: false
+})
+export class UsersListComponent implements OnInit {
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+
+  users: Users[];
+  loading = false;
+  selectedId: string;
+  public routes: typeof routes = routes;
+  public displayedColumns: string[] = [
+    'firstName',
+    'lastName',
+    'phoneNumber',
+    'email',
+    'role',
+    'disabled',
+    'avatar',
+    'actions',
+  ];
+  public dataSource: MatTableDataSource<Users>;
+  config: FilterConfig[] = [];
+  showFilters = false;
+  filters: FilterItems[] = [
+    { label: 'First Name', title: 'firstName' },
+    { label: 'Last Name', title: 'lastName' },
+    { label: 'Phone Number', title: 'phoneNumber' },
+    { label: 'E-Mail', title: 'email' },
+  ];
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private toastr: ToastrService,
+    public dialog: MatDialog,
+    public dataFormatterService: DataFormatterService,
+    private usersService: UsersService,
+  ) {}
+
+  ngOnInit(): void {
+    this.getUsers();
+  }
+
+  addFilter(): void {
+    !this.showFilters ? (this.showFilters = true) : null;
+    this.config.push({});
+  }
+
+  submitHandler(request: string): void {
+    this.usersService.getFilteredData(request).pipe(take(1)).subscribe({
+      next: (res) => {
+        this.setUsersData(res.rows);
+      },
+      error: () => {
+        this.toastr.error('Failed to load users');
+        this.setUsersData([]);
+      },
+    });
+  }
+
+  clearFilters(): void {
+    this.getUsers();
+  }
+
+  delFilter() {
+    this.config.length === 0 ? (this.showFilters = false) : null;
+  }
+
+  create(): void {
+    this.router.navigate([this.routes.Users_CREATE]);
+  }
+
+  edit(row: Users): void {
+    this.router.navigate([routes.Users_EDIT, row.id]);
+  }
+
+  openDeleteModal(id: string): void {
+    this.selectedId = id;
+    const dialogRef = this.dialog.open(DeletePopupComponent, {
+      width: '512px',
+    });
+
+    dialogRef.componentInstance.deleteConfirmed
+      .pipe(take(1))
+      .subscribe(() => {
+        this.onDelete(this.selectedId);
+      });
+  }
+
+  onDelete(id: string): void {
+    this.usersService.delete(id).pipe(take(1)).subscribe({
+      next: () => {
+        this.toastr.success('Users deleted successfully');
+        this.getUsers();
+      },
+      error: () => {
+        this.toastr.error('Something was wrong. Try again');
+      },
+    });
+  }
+
+  sort(e): void {
+    this.submitHandler(`?field=${e.active}&sort=${e.direction}`);
+  }
+
+  setLimit(e): void {
+    this.submitHandler(`?limit=${e.pageSize}`);
+  }
+
+  private getUsers(): void {
+    this.usersService.getAll().pipe(take(1)).subscribe({
+      next: (res) => {
+        this.setUsersData(res.rows);
+      },
+      error: () => {
+        this.toastr.error('Failed to load users');
+        this.setUsersData([]);
+      },
+    });
+  }
+
+  private setUsersData(rows: Users[]): void {
+    this.users = rows;
+    this.dataSource = new MatTableDataSource(rows);
+    this.dataSource.paginator = this.paginator;
+  }
+
+  redirectToSwagger() {
+    return environment.production
+      ? window.location.origin + '/api-docs/#/Users'
+      : 'http://localhost:8080/api-docs/#/Users';
+  }
+}
diff --git a/src/app/modules/auth/auth.routes.spec.ts b/src/app/modules/auth/auth.routes.spec.ts
new file mode 100644
index 0000000..7fe30ec
--- /dev/null
+++ b/src/app/modules/auth/auth.routes.spec.ts
@@ -0,0 +1,26 @@
+import { AUTH_ROUTES } from './auth.routes';
+
+describe('AUTH_ROUTES', () => {
+  it('contains root auth page route', () => {
+    const rootRoute = AUTH_ROUTES.find((route) => route.path === '');
+
+    expect(rootRoute).toBeDefined();
+    expect(rootRoute?.component).toBeDefined();
+  });
+
+  it('redirects /login alias to root auth route', () => {
+    const loginAliasRoute = AUTH_ROUTES.find((route) => route.path === 'login');
+
+    expect(loginAliasRoute?.redirectTo).toBe('');
+    expect(loginAliasRoute?.pathMatch).toBe('full');
+  });
+
+  it('contains verify-email route', () => {
+    const verifyEmailRoute = AUTH_ROUTES.find(
+      (route) => route.path === 'verify-email',
+    );
+
+    expect(verifyEmailRoute).toBeDefined();
+    expect(verifyEmailRoute?.component).toBeDefined();
+  });
+});
diff --git a/src/app/modules/auth/auth.routes.ts b/src/app/modules/auth/auth.routes.ts
new file mode 100644
index 0000000..c5eccee
--- /dev/null
+++ b/src/app/modules/auth/auth.routes.ts
@@ -0,0 +1,20 @@
+import { Routes } from '@angular/router';
+
+import { AuthPageComponent } from './containers';
+import { VerifyEmailComponent } from './components/verify-email/verify-email.component';
+
+export const AUTH_ROUTES: Routes = [
+  {
+    path: '',
+    component: AuthPageComponent,
+  },
+  {
+    path: 'login',
+    redirectTo: '',
+    pathMatch: 'full',
+  },
+  {
+    path: 'verify-email',
+    component: VerifyEmailComponent,
+  },
+];
diff --git a/src/app/modules/auth/components/index.ts b/src/app/modules/auth/components/index.ts
new file mode 100644
index 0000000..656b9e5
--- /dev/null
+++ b/src/app/modules/auth/components/index.ts
@@ -0,0 +1,2 @@
+export * from './login-form/login-form.component';
+export * from './sign-form/sign-form.component';
diff --git a/src/app/modules/auth/components/login-form/login-form.component.html b/src/app/modules/auth/components/login-form/login-form.component.html
new file mode 100644
index 0000000..b912203
--- /dev/null
+++ b/src/app/modules/auth/components/login-form/login-form.component.html
@@ -0,0 +1,31 @@
+<form class="form" [formGroup]="form" (ngSubmit)="login()">
+  <mat-form-field class="form__input">
+    <input
+      matInput
+      placeholder="Email Address"
+      type="email"
+      formControlName="email"
+    />
+  </mat-form-field>
+
+  <mat-form-field class="form__input">
+    <input
+      matInput
+      placeholder="Password"
+      type="password"
+      formControlName="password"
+    />
+  </mat-form-field>
+
+  <div class="form-actions">
+    <button
+      class="form-actions__login"
+      mat-raised-button
+      color="primary"
+      type="submit"
+    >
+      Login
+    </button>
+    <button class="form-actions__forget" mat-button>Forget password</button>
+  </div>
+</form>
diff --git a/src/app/modules/auth/components/login-form/login-form.component.scss b/src/app/modules/auth/components/login-form/login-form.component.scss
new file mode 100644
index 0000000..7ddf76a
--- /dev/null
+++ b/src/app/modules/auth/components/login-form/login-form.component.scss
@@ -0,0 +1,27 @@
+@use '../../../../styles/colors' as *;
+@use '../../../../styles/font' as *;
+
+.form {
+  width: 100%;
+
+  &__input {
+    width: 100%;
+    margin-top: 6px;
+  }
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &__login {
+    margin-right: 10px;
+  }
+
+  &__forget {
+    font-size: 12px;
+    font-weight: $fw-lighter;
+    color: $blue;
+  }
+}
diff --git a/src/app/modules/auth/components/login-form/login-form.component.spec.ts b/src/app/modules/auth/components/login-form/login-form.component.spec.ts
new file mode 100644
index 0000000..55c3e41
--- /dev/null
+++ b/src/app/modules/auth/components/login-form/login-form.component.spec.ts
@@ -0,0 +1,59 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { APP_RUNTIME_CONFIG, AppRuntimeConfig } from '../../../../app.config';
+import { LoginFormComponent } from './login-form.component';
+
+describe('LoginFormComponent', () => {
+  let fixture: ComponentFixture<LoginFormComponent>;
+  let component: LoginFormComponent;
+
+  const config: AppRuntimeConfig = {
+    version: '1.2.0',
+    remote: 'http://localhost:8080',
+    isBackend: true,
+    hostApi: 'http://localhost',
+    portApi: '8080',
+    baseURLApi: 'http://localhost:8080',
+    auth: {
+      email: 'admin@flatlogic.com',
+      password: 'password',
+    },
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginFormComponent],
+      providers: [{ provide: APP_RUNTIME_CONFIG, useValue: config }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LoginFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('does not emit login payload when form is invalid', () => {
+    const emitSpy = jest.spyOn(component.sendLoginForm, 'emit');
+    component.form.setValue({
+      email: 'not-valid-email',
+      password: '',
+    });
+
+    component.login();
+
+    expect(component.form.invalid).toBe(true);
+    expect(emitSpy).not.toHaveBeenCalled();
+  });
+
+  it('emits credentials when form is valid', () => {
+    const emitSpy = jest.spyOn(component.sendLoginForm, 'emit');
+    const payload = {
+      email: 'user@example.com',
+      password: 'StrongPassword1',
+    };
+    component.form.setValue(payload);
+
+    component.login();
+
+    expect(component.form.valid).toBe(true);
+    expect(emitSpy).toHaveBeenCalledWith(payload);
+  });
+});
diff --git a/src/app/modules/auth/components/login-form/login-form.component.ts b/src/app/modules/auth/components/login-form/login-form.component.ts
new file mode 100644
index 0000000..41a9f67
--- /dev/null
+++ b/src/app/modules/auth/components/login-form/login-form.component.ts
@@ -0,0 +1,52 @@
+import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { APP_RUNTIME_CONFIG, AppRuntimeConfig } from '../../../../app.config';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+
+type LoginFormValue = {
+  email: string;
+  password: string;
+};
+
+@Component({
+    selector: 'app-login-form',
+    templateUrl: './login-form.component.html',
+    styleUrls: ['./login-form.component.scss'],
+    standalone: true,
+    imports: [ReactiveFormsModule, MatInputModule, MatFormFieldModule, MatButtonModule]
+})
+export class LoginFormComponent implements OnInit {
+  @Output() sendLoginForm = new EventEmitter<LoginFormValue>();
+  public form!: FormGroup<{
+    email: FormControl<string>;
+    password: FormControl<string>;
+  }>;
+  public email: string;
+  public password: string;
+
+  constructor(@Inject(APP_RUNTIME_CONFIG) appConfig: AppRuntimeConfig) {
+    this.email = appConfig.auth.email;
+    this.password = appConfig.auth.password;
+  }
+
+  public ngOnInit(): void {
+    this.form = new FormGroup({
+      email: new FormControl(this.email, {
+        nonNullable: true,
+        validators: [Validators.required, Validators.email],
+      }),
+      password: new FormControl(this.password, {
+        nonNullable: true,
+        validators: [Validators.required],
+      }),
+    });
+  }
+
+  public login(): void {
+    if (this.form.valid) {
+      this.sendLoginForm.emit(this.form.getRawValue());
+    }
+  }
+}
diff --git a/src/app/modules/auth/components/sign-form/sign-form.component.html b/src/app/modules/auth/components/sign-form/sign-form.component.html
new file mode 100644
index 0000000..9746efb
--- /dev/null
+++ b/src/app/modules/auth/components/sign-form/sign-form.component.html
@@ -0,0 +1,49 @@
+@if (authService.errorMessage) {
+  <div
+    class="notification notification_transparent-pink"
+    >
+    <div class="notification__icon-wrapper notification__icon-wrapper_solid-pink">
+      <mat-icon>report</mat-icon>
+    </div>
+    <p class="notification__title">{{ authService.errorMessage }}</p>
+  </div>
+}
+<form class="form" [formGroup]="form" (ngSubmit)="register()">
+  <mat-form-field class="form__input">
+    <input
+      matInput
+      placeholder="Email Address"
+      type="email"
+      formControlName="email"
+      />
+  </mat-form-field>
+
+  <mat-form-field class="form__input">
+    <input
+      matInput
+      placeholder="Password"
+      type="password"
+      formControlName="password"
+      />
+  </mat-form-field>
+
+  <mat-form-field class="form__input">
+    <input
+      matInput
+      placeholder="Confirm Password"
+      type="password"
+      formControlName="confirmPassword"
+      />
+  </mat-form-field>
+
+  <div class="form-actions">
+    <button
+      class="form-actions__create"
+      mat-raised-button
+      color="primary"
+      type="submit"
+      >
+      Create your account
+    </button>
+  </div>
+</form>
diff --git a/src/app/modules/auth/components/sign-form/sign-form.component.scss b/src/app/modules/auth/components/sign-form/sign-form.component.scss
new file mode 100644
index 0000000..5663d5c
--- /dev/null
+++ b/src/app/modules/auth/components/sign-form/sign-form.component.scss
@@ -0,0 +1,177 @@
+@use '../../../../styles/colors' as *;
+
+.form {
+  width: 100%;
+
+  &__input {
+    width: 100%;
+    margin-top: -15px;
+  }
+}
+
+.form-actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 5px;
+
+  &__create {
+    margin: 0;
+    width: 95%;
+    box-shadow: 0 0 11px 0 $shadow-white, 0 0 0 -2px $shadow-grey,
+      0 1px 8px 0 $shadow-dark-grey;
+  }
+}
+
+.notification {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  height: 45px;
+  border-radius: 45px;
+
+  &_solid {
+    &-pink {
+      background-color: $pink;
+    }
+
+    &-blue {
+      background-color: $blue;
+    }
+
+    &-green {
+      background-color: $green;
+    }
+
+    &-yellow {
+      background-color: $yellow;
+    }
+
+    &-violet {
+      background-color: $violet;
+    }
+  }
+
+  &_transparent {
+    &-pink {
+      background-color: $pink-15;
+    }
+
+    &-blue {
+      background-color: $blue-15;
+    }
+
+    &-green {
+      background-color: $green-15;
+    }
+
+    &-yellow {
+      background-color: $yellow-15;
+    }
+
+    &-violet {
+      background-color: $violet-15;
+    }
+  }
+
+  &__title {
+    margin: 0;
+
+    &_white {
+      color: $white;
+    }
+  }
+
+  &__icon-wrapper {
+    height: 45px;
+    width: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &_transparent {
+      color: $white-80;
+
+      &-pink {
+        color: $pink;
+      }
+
+      &-blue {
+        color: $blue;
+      }
+
+      &-green {
+        color: $green;
+      }
+
+      &-yellow {
+        color: $yellow;
+      }
+
+      &-violet {
+        color: $violet;
+      }
+    }
+
+    &_solid {
+      &-pink {
+        color: $pink;
+      }
+
+      &-blue {
+        color: $blue;
+      }
+
+      &-green {
+        color: $green;
+      }
+
+      &-yellow {
+        color: $yellow;
+      }
+
+      &-violet {
+        color: $violet;
+      }
+    }
+  }
+
+  &__icon-wrapper-circle {
+    height: 45px;
+    width: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 45px;
+    margin-right: 16px;
+
+    &_transparent {
+      &-pink {
+        color: $pink;
+        background-color: $pink-15;
+      }
+
+      &-blue {
+        color: $blue;
+        background-color: $blue-15;
+      }
+
+      &-green {
+        color: $green;
+        background-color: $green-15;
+      }
+
+      &-yellow {
+        color: $yellow;
+        background-color: $yellow-15;
+      }
+
+      &-violet {
+        color: $violet;
+        background-color: $violet-15;
+      }
+    }
+  }
+}
diff --git a/src/app/modules/auth/components/sign-form/sign-form.component.ts b/src/app/modules/auth/components/sign-form/sign-form.component.ts
new file mode 100644
index 0000000..94a8f96
--- /dev/null
+++ b/src/app/modules/auth/components/sign-form/sign-form.component.ts
@@ -0,0 +1,88 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { AuthService } from '../../../../shared/services/auth.service';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+type SignFormValue = {
+  email: string;
+  password: string;
+  confirmPassword: string;
+};
+
+@Component({
+    selector: 'app-sign-form',
+    templateUrl: './sign-form.component.html',
+    styleUrls: ['./sign-form.component.scss'],
+    standalone: true,
+    imports: [
+      ReactiveFormsModule,
+      MatInputModule,
+      MatFormFieldModule,
+      MatButtonModule,
+      MatIconModule,
+    ]
+})
+export class SignFormComponent implements OnInit {
+  @Output() sendSignForm = new EventEmitter<SignFormValue>();
+  public form!: FormGroup<{
+    email: FormControl<string>;
+    password: FormControl<string>;
+    confirmPassword: FormControl<string>;
+  }>;
+
+  constructor(public authService: AuthService) {}
+
+  public ngOnInit(): void {
+    this.form = new FormGroup({
+      email: new FormControl('', {
+        nonNullable: true,
+        validators: [Validators.required, Validators.email],
+      }),
+      password: new FormControl('', {
+        nonNullable: true,
+        validators: [Validators.required],
+      }),
+      confirmPassword: new FormControl('', {
+        nonNullable: true,
+        validators: [Validators.required],
+      }),
+    });
+  }
+
+  public register(): void {
+    const { email } = this.form.getRawValue();
+
+    if (!email) {
+      this.authService.registerError('Email is required!');
+      return;
+    }
+
+    if (!this.isPasswordValid()) {
+      this.checkPassword();
+    } else {
+      this.sendSignForm.emit(this.form.getRawValue());
+    }
+  }
+
+  public checkPassword(): void {
+    const { password } = this.form.getRawValue();
+    if (!this.isPasswordValid()) {
+      if (!password) {
+        this.authService.registerError('Password field is empty');
+      } else {
+        this.authService.registerError('Passwords are not equal');
+      }
+      setTimeout(() => {
+        this.authService.registerError('');
+      }, 3 * 1000);
+    }
+  }
+
+  public isPasswordValid(): boolean {
+    const { password, confirmPassword } = this.form.getRawValue();
+    return password && password === confirmPassword;
+  }
+}
diff --git a/src/app/modules/auth/components/verify-email/verify-email.component.ts b/src/app/modules/auth/components/verify-email/verify-email.component.ts
new file mode 100644
index 0000000..c9c73b0
--- /dev/null
+++ b/src/app/modules/auth/components/verify-email/verify-email.component.ts
@@ -0,0 +1,23 @@
+import { Component, DestroyRef, inject } from '@angular/core';
+import { AuthService } from '../../../../shared/services/auth.service';
+import { ActivatedRoute } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+    selector: 'app-verify-email',
+    template: '',
+    standalone: true
+})
+export class VerifyEmailComponent {
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(public authService: AuthService, private route: ActivatedRoute) {
+    this.route.queryParams
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params: { token?: string }) => {
+        if (params.token) {
+          this.authService.verifyEmail(params.token);
+        }
+      });
+  }
+}
diff --git a/src/app/modules/auth/containers/auth-page/auth-page.component.html b/src/app/modules/auth/containers/auth-page/auth-page.component.html
new file mode 100644
index 0000000..dd92ace
--- /dev/null
+++ b/src/app/modules/auth/containers/auth-page/auth-page.component.html
@@ -0,0 +1,75 @@
+<div class="auth-page">
+  <div class="auth-page__content-block">
+    <div class="auth-page__content-wrapper">
+      <mat-tab-group class="auth-page__group" mat-stretch-tabs>
+        <mat-tab label="Login">
+          <h4 class="auth-page__group-title">Welcome!</h4>
+          <div class="auth-page__google-button-wrapper">
+            <button
+              mat-raised-button
+              class="auth-page__google-button"
+              (click)="googleLogin()"
+            >
+              <img
+                class="auth-page__google-button-icon"
+                src="./assets/auth/google.svg"
+                alt="google"
+              />Sign in with Google
+            </button>
+          </div>
+
+          <div class="auth-page__border-wrapper">
+            <div class="auth-page__border-line"></div>
+            <p class="auth-page__border-title">or</p>
+            <div class="auth-page__border-line"></div>
+          </div>
+
+          <app-login-form
+            (sendLoginForm)="sendLoginForm($event)"
+          ></app-login-form>
+        </mat-tab>
+        <mat-tab label="New User">
+          <h4 class="auth-page__group-title">Welcome!</h4>
+          <p class="auth-page__group-sub-title">Create you account</p>
+
+          <app-sign-form (sendSignForm)="sendSignForm($event)"></app-sign-form>
+
+          <div class="auth-page__border-wrapper">
+            <div class="auth-page__border-line"></div>
+            <p class="auth-page__border-title">or</p>
+            <div class="auth-page__border-line"></div>
+          </div>
+
+          <div class="auth-page__google-button-wrapper">
+            <button
+              mat-raised-button
+              class="auth-page__google-button"
+              (click)="googleLogin()"
+            >
+              <img
+                class="auth-page__google-button-icon"
+                src="./assets/auth/google.svg"
+                alt="google"
+              />Sign in with Google
+            </button>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
+
+      <p class="auth-page__footer-title">
+        © 2014-{{ todayDate | year }}
+        <a href="https://flatlogic.com">Flatlogic</a>, LLC. All rights reserved.
+      </p>
+    </div>
+  </div>
+  <div class="auth-page__logo">
+    <div class="auth-page__logo-wrapper">
+      <img
+        class="auth-page__logo-img"
+        src="./assets/auth/logo.svg"
+        alt="logo"
+      />
+      <h6 class="auth-page__logo-title">Angular Material Admin Full</h6>
+    </div>
+  </div>
+</div>
diff --git a/src/app/modules/auth/containers/auth-page/auth-page.component.scss b/src/app/modules/auth/containers/auth-page/auth-page.component.scss
new file mode 100644
index 0000000..373aa06
--- /dev/null
+++ b/src/app/modules/auth/containers/auth-page/auth-page.component.scss
@@ -0,0 +1,151 @@
+@use '../../../../styles/variables' as *;
+@use '../../../../styles/font' as *;
+
+.auth-page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  @media (max-width: $medium) {
+    flex-direction: column;
+  }
+
+  &__content-block {
+    width: 37%;
+    height: 100%;
+    background-color: $white;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    @media (max-width: $medium) {
+      width: 100%;
+    }
+  }
+
+  &__content-wrapper {
+    width: 45%;
+    height: 100%;
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+
+    @media (max-width: $small) {
+      width: 70%;
+    }
+
+    @media (min-width: $medium) and (max-width: $large) {
+      width: 45%;
+    }
+  }
+
+  &__group {
+    margin-top: 28px;
+  }
+
+  &__group-title {
+    font-size: 32px;
+    font-weight: $fw-normal;
+    margin-top: 37px;
+    letter-spacing: -0.7px;
+    text-align: center;
+    line-height: 37px;
+    color: $dark-grey;
+  }
+
+  &__group-sub-title {
+    font-size: $fs-large;
+    font-weight: $fw-normal;
+    margin-bottom: 60px;
+    letter-spacing: -0.5px;
+    text-align: center;
+    line-height: 24px;
+    color: $dark-grey;
+  }
+
+  &__google-button-wrapper {
+    margin-top: 32px;
+    margin-bottom: 10px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__google-button {
+    width: 95%;
+    padding: 0;
+    background-color: $white;
+    box-shadow: 0 0 11px 0 $shadow-white, 0 0 0 -2px $shadow-grey,
+      0 1px 8px 0 $shadow-dark-grey;
+  }
+
+  &__google-button-icon {
+    width: 20px;
+    margin-right: 16px;
+  }
+
+  &__border-wrapper {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin: 32px 0;
+  }
+
+  &__border-line {
+    height: 1px;
+    width: 100%;
+    background-color: $light-grey;
+    opacity: 0.3;
+  }
+
+  &__border-title {
+    font-size: $fs-xs;
+    padding: 0 16px;
+    margin: 0;
+    color: $dark-grey;
+  }
+
+  &__logo {
+    width: 63%;
+    height: 100%;
+    background-color: $blue;
+    display: flex;
+    align-items: center;
+
+    @media (max-width: $medium) {
+      display: none;
+    }
+  }
+
+  &__logo-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__logo-img {
+    margin-bottom: 50px;
+  }
+
+  &__logo-title {
+    font-size: 62px;
+    color: $white;
+    font-weight: 500;
+    letter-spacing: -1.5px;
+    line-height: 62px;
+  }
+
+  &__footer-title {
+    color: $blue;
+    font-size: 10px;
+    opacity: 0.7;
+    a {
+      text-decoration: none;
+      color: $blue;
+    }
+  }
+}
diff --git a/src/app/modules/auth/containers/auth-page/auth-page.component.spec.ts b/src/app/modules/auth/containers/auth-page/auth-page.component.spec.ts
new file mode 100644
index 0000000..759ff6b
--- /dev/null
+++ b/src/app/modules/auth/containers/auth-page/auth-page.component.spec.ts
@@ -0,0 +1,97 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { AuthPageComponent } from './auth-page.component';
+import {
+  AuthService,
+  LoginCredentials,
+  RegisterCredentials,
+} from '../../../../shared/services/auth.service';
+
+describe('AuthPageComponent', () => {
+  let fixture: ComponentFixture<AuthPageComponent>;
+  let component: AuthPageComponent;
+
+  const queryParams$ = new BehaviorSubject<Record<string, string>>({});
+  const authServiceMock = {
+    isAuthenticated: jest.fn(),
+    receiveLogin: jest.fn(),
+    receiveToken: jest.fn(),
+    loginUser: jest.fn(),
+    registerUser: jest.fn(),
+  } as unknown as AuthService;
+
+  beforeEach(async () => {
+    (authServiceMock.isAuthenticated as jest.Mock).mockReturnValue(false);
+    queryParams$.next({});
+
+    await TestBed.configureTestingModule({
+      imports: [AuthPageComponent],
+      providers: [
+        { provide: AuthService, useValue: authServiceMock },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParams: queryParams$.asObservable(),
+          },
+        },
+      ],
+    })
+      .overrideTemplate(AuthPageComponent, '')
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AuthPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls receiveLogin in constructor when already authenticated', () => {
+    (authServiceMock.isAuthenticated as jest.Mock).mockReturnValue(true);
+
+    const localFixture = TestBed.createComponent(AuthPageComponent);
+    localFixture.detectChanges();
+
+    expect(authServiceMock.receiveLogin).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls receiveToken when token is present in query params', () => {
+    queryParams$.next({ token: 'jwt-token' });
+    const localFixture = TestBed.createComponent(AuthPageComponent);
+    localFixture.detectChanges();
+
+    expect(authServiceMock.receiveToken).toHaveBeenCalledWith('jwt-token');
+  });
+
+  it('delegates login form payload to AuthService.loginUser', () => {
+    const creds: LoginCredentials = {
+      email: 'user@example.com',
+      password: 'secret',
+    };
+
+    component.sendLoginForm(creds);
+
+    expect(authServiceMock.loginUser).toHaveBeenCalledWith(creds);
+  });
+
+  it('delegates sign form payload to AuthService.registerUser', () => {
+    const creds: RegisterCredentials = {
+      email: 'user@example.com',
+      password: 'secret',
+      confirmPassword: 'secret',
+    };
+
+    component.sendSignForm(creds);
+
+    expect(authServiceMock.registerUser).toHaveBeenCalledWith(creds);
+  });
+
+  it('triggers google social login', () => {
+    component.googleLogin();
+
+    expect(authServiceMock.loginUser).toHaveBeenCalledWith({ social: 'google' });
+  });
+});
diff --git a/src/app/modules/auth/containers/auth-page/auth-page.component.ts b/src/app/modules/auth/containers/auth-page/auth-page.component.ts
new file mode 100644
index 0000000..17d546c
--- /dev/null
+++ b/src/app/modules/auth/containers/auth-page/auth-page.component.ts
@@ -0,0 +1,58 @@
+import { Component, DestroyRef, inject } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { routes } from '../../../../consts';
+import {
+  AuthService,
+  LoginCredentials,
+  RegisterCredentials,
+} from '../../../../shared/services/auth.service';
+import { LoginFormComponent } from '../../components/login-form/login-form.component';
+import { SignFormComponent } from '../../components/sign-form/sign-form.component';
+import { YearPipe } from '../../pipes/year.pipe';
+
+@Component({
+    selector: 'app-auth-page',
+    templateUrl: './auth-page.component.html',
+    styleUrls: ['./auth-page.component.scss'],
+    standalone: true,
+    imports: [MatTabsModule, MatButtonModule, LoginFormComponent, SignFormComponent, YearPipe]
+})
+export class AuthPageComponent {
+  public todayDate: Date = new Date();
+  public routers: typeof routes = routes;
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    private authService: AuthService,
+    private route: ActivatedRoute,
+  ) {
+    if (this.authService.isAuthenticated()) {
+      this.authService.receiveLogin();
+    }
+
+    this.route.queryParams
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params: Params) => {
+        const token = params['token'];
+        if (token) {
+          this.authService.receiveToken(String(token));
+        }
+      });
+  }
+
+  public sendLoginForm(creds: LoginCredentials): void {
+    this.authService.loginUser(creds);
+  }
+
+  public sendSignForm(creds: RegisterCredentials): void {
+    this.authService.registerUser(creds);
+  }
+
+  public googleLogin() {
+    this.authService.loginUser({ social: 'google' });
+  }
+}
diff --git a/src/app/modules/auth/containers/index.ts b/src/app/modules/auth/containers/index.ts
new file mode 100644
index 0000000..92b4e58
--- /dev/null
+++ b/src/app/modules/auth/containers/index.ts
@@ -0,0 +1 @@
+export * from './auth-page/auth-page.component';
diff --git a/src/app/modules/auth/guards/auth.guard.spec.ts b/src/app/modules/auth/guards/auth.guard.spec.ts
new file mode 100644
index 0000000..f736f48
--- /dev/null
+++ b/src/app/modules/auth/guards/auth.guard.spec.ts
@@ -0,0 +1,44 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter, Router, UrlTree } from '@angular/router';
+
+import { authGuard } from './auth.guard';
+import { AUTH_TOKEN_STORAGE_KEY, routes } from '../../../consts';
+
+describe('authGuard', () => {
+  const createGuardArgs = (): Parameters<typeof authGuard> => [
+    {} as Parameters<typeof authGuard>[0],
+    {} as Parameters<typeof authGuard>[1],
+  ];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter([])],
+    });
+  });
+
+  afterEach(() => {
+    localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY);
+  });
+
+  it('returns true when token exists in localStorage', () => {
+    localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, 'token');
+    const [route, state] = createGuardArgs();
+
+    const result = TestBed.runInInjectionContext(() => authGuard(route, state));
+
+    expect(result).toBe(true);
+  });
+
+  it('redirects to login when token is missing', () => {
+    localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY);
+    const router = TestBed.inject(Router);
+    const [route, state] = createGuardArgs();
+
+    const result = TestBed.runInInjectionContext(() => authGuard(route, state));
+
+    expect(result instanceof UrlTree).toBe(true);
+    if (result instanceof UrlTree) {
+      expect(router.serializeUrl(result)).toBe(routes.LOGIN);
+    }
+  });
+});
diff --git a/src/app/modules/auth/guards/auth.guard.ts b/src/app/modules/auth/guards/auth.guard.ts
new file mode 100644
index 0000000..068dcd8
--- /dev/null
+++ b/src/app/modules/auth/guards/auth.guard.ts
@@ -0,0 +1,16 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+
+import { AUTH_TOKEN_STORAGE_KEY, routes } from '../../../consts';
+
+const ROUTES: typeof routes = routes;
+
+export const authGuard: CanActivateFn = () => {
+  const token = localStorage.getItem(AUTH_TOKEN_STORAGE_KEY);
+  if (token) {
+    return true;
+  }
+
+  const router = inject(Router);
+  return router.parseUrl(ROUTES.LOGIN);
+};
diff --git a/src/app/modules/auth/guards/index.ts b/src/app/modules/auth/guards/index.ts
new file mode 100644
index 0000000..b41e34a
--- /dev/null
+++ b/src/app/modules/auth/guards/index.ts
@@ -0,0 +1 @@
+export * from './auth.guard';
diff --git a/src/app/modules/auth/models/email.ts b/src/app/modules/auth/models/email.ts
new file mode 100644
index 0000000..bfdca05
--- /dev/null
+++ b/src/app/modules/auth/models/email.ts
@@ -0,0 +1,5 @@
+export interface Email {
+  name: string;
+  time: string;
+  message: string
+}
diff --git a/src/app/modules/auth/models/index.ts b/src/app/modules/auth/models/index.ts
new file mode 100644
index 0000000..5a5859f
--- /dev/null
+++ b/src/app/modules/auth/models/index.ts
@@ -0,0 +1,2 @@
+export * from './user';
+export * from './email';
diff --git a/src/app/modules/auth/models/user.ts b/src/app/modules/auth/models/user.ts
new file mode 100644
index 0000000..0dbb8ad
--- /dev/null
+++ b/src/app/modules/auth/models/user.ts
@@ -0,0 +1,4 @@
+export interface User {
+  name: string;
+  lastName: string;
+}
diff --git a/src/app/modules/auth/pipes/index.ts b/src/app/modules/auth/pipes/index.ts
new file mode 100644
index 0000000..6404bba
--- /dev/null
+++ b/src/app/modules/auth/pipes/index.ts
@@ -0,0 +1 @@
+export * from './year.pipe';
diff --git a/src/app/modules/auth/pipes/year.pipe.ts b/src/app/modules/auth/pipes/year.pipe.ts
new file mode 100644
index 0000000..15e61e2
--- /dev/null
+++ b/src/app/modules/auth/pipes/year.pipe.ts
@@ -0,0 +1,18 @@
+import { DatePipe } from '@angular/common';
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'year',
+    standalone: true
+})
+export class YearPipe implements PipeTransform {
+  private readonly datePipe = new DatePipe('en-US');
+
+  transform(value: Date | string | number | null | undefined): string | null {
+    if (value === null || value === undefined) {
+      return null;
+    }
+
+    return this.datePipe.transform(value, 'y');
+  }
+}
diff --git a/src/app/modules/auth/services/email.service.ts b/src/app/modules/auth/services/email.service.ts
new file mode 100644
index 0000000..e61f7ea
--- /dev/null
+++ b/src/app/modules/auth/services/email.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import { Email } from '../models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EmailService {
+  public loadEmails(): Observable<Email[]> {
+    return of([
+      {name: 'Jane Hew', time: '9:32', message: 'Hey! How is it going?'},
+      {name: 'Lloyd Brown', time: '9:18', message: 'Check out my new Dashboard'},
+      {name: 'Mark Winstein', time: '9:15', message: 'I want rearrange the appointment'},
+      {name: 'Liana Dutti', time: '9:09', message: 'Good news from sale department'}
+    ])
+  }
+}
diff --git a/src/app/modules/auth/services/index.ts b/src/app/modules/auth/services/index.ts
new file mode 100644
index 0000000..cfab1be
--- /dev/null
+++ b/src/app/modules/auth/services/index.ts
@@ -0,0 +1 @@
+export * from './email.service';
diff --git a/src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.html b/src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.html
new file mode 100644
index 0000000..f8898db
--- /dev/null
+++ b/src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.html
@@ -0,0 +1,41 @@
+<mat-card class="chart">
+  <mat-card-title class="chart__header">
+    <p class="chart__title">Daily Line Chart</p>
+    <div class="chart-legend">
+      <div class="chart-legend__item">
+        <div class="chart-legend__icon yellow"></div><span class="chart-legend__title">Tablet</span>
+      </div>
+      <div class="chart-legend__item">
+        <div
+          class="chart-legend__icon"
+          [ngClass]="{
+            'blue' : currentTheme === 'blue',
+            'pink' : currentTheme === 'pink',
+            'green' : currentTheme === 'green'
+          }"
+        ></div>
+        <span class="chart-legend__title">Mobile</span>
+      </div>
+      <div class="chart-legend__item">
+        <div class="chart-legend__icon light-blue"></div><span class="chart-legend__title">Desktop</span>
+      </div>
+    </div>
+
+    <mat-select class="chart-select" [(ngModel)]="selectedMatSelectValue" (selectionChange)="changedMatSelectionValue()">
+      <mat-option class="select-option" [value]="matSelectFields.daily">Daily</mat-option>
+      <mat-option class="select-option" [value]="matSelectFields.weekly">Weekly</mat-option>
+      <mat-option class="select-option" [value]="matSelectFields.monthly">Monthly</mat-option>
+    </mat-select>
+
+  </mat-card-title>
+
+  <mat-card-content class="chart__content">
+    <div
+      echarts
+      class="chart__content-item"
+      [options]="echartsOptions"
+      [style.height]="chartOptions?.chart?.height | chartSize:'350px'"
+      [style.width]="chartOptions?.chart?.width | chartSize:'100%'"
+    ></div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.scss b/src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.scss
new file mode 100644
index 0000000..5c4eb95
--- /dev/null
+++ b/src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.scss
@@ -0,0 +1,118 @@
+@use "../../../../styles/font" as *;
+@use "../../../../styles/variables" as *;
+
+.chart {
+  margin: 24px 0;
+
+  @media (max-width: $normal) {
+    margin: 0 0 24px 0;
+  }
+
+   &__header {
+     display: flex;
+     justify-content: space-between;
+     padding: 8px;
+
+     @media (max-width: $small) {
+       flex-wrap: wrap;
+     }
+   }
+
+   &__title {
+     margin: 0;
+     display: flex;
+     align-items: center;
+     color: $grey;
+     font-weight: $fw-normal;
+     font-size: $fs-regular;
+     text-transform: none;
+     line-height: 1.6;
+     letter-spacing: 0.12px;
+     order: 1;
+   }
+
+  &__content {
+    height: 380px;
+    width: 100%;
+    @media (max-width: $small) {
+      overflow-x: scroll;
+    }
+  }
+
+  &__content-item {
+    @media (max-width: $small) {
+      width: 600px;
+    }
+  }
+}
+
+.chart-legend {
+  display: flex;
+  order: 2;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    margin-top: 2.24px;
+    margin-right: 24px;
+  }
+
+  &__icon {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+  }
+
+  &__title {
+    font-weight: $fw-lighter;
+    text-transform: none;
+    font-size: $fs-regular;
+    margin-left: 8px;
+  }
+
+  @media (max-width: $small) {
+    margin-top: 20px;
+    order: 3;
+  }
+}
+
+.select-wrapper {
+  width: 50px;
+}
+
+.chart-select {
+  order: 3;
+  border: 0;
+  width: auto;
+
+  @media (max-width: $small) {
+    order: 2;
+  }
+}
+
+.select-option {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.pink {
+  background-color: $pink;
+}
+
+.green {
+  background-color: $green;
+}
+
+.light-blue {
+  background-color: $white-blue;
+}
+
diff --git a/src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.ts b/src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.ts
new file mode 100644
index 0000000..c29378b
--- /dev/null
+++ b/src/app/modules/dashboard/components/daily-line-chart/daily-line-chart.component.ts
@@ -0,0 +1,320 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatCardModule } from '@angular/material/card';
+import { MatSelectModule } from '@angular/material/select';
+
+import { DailyLineChartData, TimeData } from '../../models';
+import { colors } from '../../../../consts';
+import { customTooltip } from '../../consts';
+import { ChartOptions } from '../../../templates/charts/models/chart-options';
+import { ChartSizePipe } from '../../../../shared/pipes/chart-size.pipe';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+enum matSelectedFields {
+  daily = 'Daily',
+  weekly = 'Weekly',
+  monthly = 'Monthly'
+}
+
+type LineSeriesItem = {
+  type?: string;
+  name?: string;
+  data?: unknown[];
+};
+
+@Component({
+    selector: 'app-daily-line-chart',
+    templateUrl: './daily-line-chart.component.html',
+    styleUrls: ['./daily-line-chart.component.scss'],
+    standalone: true,
+    imports: [
+      CommonModule,
+      FormsModule,
+      MatCardModule,
+      MatSelectModule,
+      ChartSizePipe,
+      NgxEchartsModule,
+    ]
+})
+export class DailyLineChartComponent implements OnInit, OnChanges {
+  @Input() dailyLineChartData: DailyLineChartData;
+  @Input() currentTheme: string;
+  @Input() currentMode: string;
+  public chartOptions: Partial<ChartOptions> = {};
+  public matSelectFields: typeof matSelectedFields = matSelectedFields;
+  public selectedMatSelectValue = matSelectedFields.monthly;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.chartOptions;
+    const labels = Array.isArray(options?.labels) ? options.labels : [];
+    const strokeWidth = this.getNumberArray((options?.stroke as { width?: unknown } | undefined)?.width);
+    const strokeCurve = this.getStringArray((options?.stroke as { curve?: unknown } | undefined)?.curve);
+    const markerSizes = this.getNumberArray((options?.markers as { size?: unknown } | undefined)?.size);
+    const sourceSeries = this.getSeriesArray(options?.series);
+    const isStacked = (options?.chart as { stacked?: boolean } | undefined)?.['stacked'] ?? false;
+
+    const series = sourceSeries.map((item: LineSeriesItem, index: number) => {
+      const isArea = item.type === 'area';
+      return {
+        type: 'line',
+        name: item.name ?? '',
+        data: item.data ?? [],
+        smooth: (strokeCurve[index] ?? strokeCurve[0]) === 'smooth',
+        showSymbol: (markerSizes[index] ?? markerSizes[0] ?? 0) > 0,
+        symbolSize: markerSizes[index] ?? markerSizes[0] ?? 0,
+        lineStyle: { width: strokeWidth[index] ?? strokeWidth[0] ?? 2 },
+        areaStyle: isArea ? { opacity: 0.35 } : undefined,
+        stack: isStacked ? 'total' : undefined
+      };
+    });
+
+    return {
+      color: options?.colors ?? [colors.PINK, colors.LIGHT_BLUE, colors.YELLOW],
+      tooltip: { trigger: 'axis' },
+      legend: { show: false },
+      grid: {
+        top: 8,
+        left: 12,
+        right: 12,
+        bottom: 16,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: labels,
+        boundaryGap: false
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: { show: false }
+      },
+      series
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart(this.dailyLineChartData.monthlyData, this.dailyLineChartData.labels);
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['currentTheme']?.currentValue && this.chartOptions?.series) {
+      this.updateChartOptions();
+    }
+    if (changes['currentMode']?.currentValue && this.chartOptions?.series) {
+      this.updateChartOptions();
+    }
+  }
+
+  private updateChartOptions(): void {
+    this.chartOptions = {
+      ...this.chartOptions,
+      colors: [
+        this.currentTheme === 'blue'
+          ? colors.BLUE
+          : this.currentTheme === 'green'
+          ? colors.GREEN
+          : colors.PINK,
+        this.currentMode === 'dark'
+          ? colors.DARK_BLUE
+          : colors.LIGHT_BLUE,
+        colors.YELLOW
+      ]
+    };
+  }
+
+  public initChart(data: TimeData, labels: string[]): void {
+    this.chartOptions = {
+      legend: {
+        show: false
+      },
+      markers: {
+        size: [0, 0, 5]
+      },
+      series: [
+        {
+          name: 'Mobile',
+          type: 'line',
+          data: data.mobile,
+        },
+        {
+          name: 'Desktop',
+          type: 'area',
+          data: data.desktop
+        },
+        {
+          name: 'Tablet',
+          type: 'line',
+          data: data.tablet
+        }
+      ],
+      colors: [
+        this.currentTheme === 'blue'
+          ? colors.BLUE
+          : this.currentTheme === 'green'
+          ? colors.GREEN
+          : colors.PINK,
+        colors.LIGHT_BLUE,
+        colors.YELLOW
+      ],
+      chart: {
+        toolbar: {
+          show: false
+        },
+        height: 350,
+        width: '100%',
+        type: 'line',
+        stacked: true
+      },
+      stroke: {
+        width: [2, 0, 2],
+        curve: ['smooth', 'smooth', 'straight']
+      },
+      plotOptions: {
+        bar: {
+          columnWidth: '50%'
+        },
+      },
+      grid: {
+        yaxis: {
+          lines: {
+            show: false,
+          }
+        },
+      },
+      fill: {
+        opacity: 1,
+        gradient: {
+          inverseColors: false,
+          shade: 'light',
+          type: 'vertical',
+          opacityFrom: 0.85,
+          opacityTo: 0.55,
+          stops: [0, 100, 100, 100]
+        }
+      },
+      labels,
+      xaxis: {
+        type: 'datetime',
+        labels: {
+          style: {
+            colors: '#4A4A4A',
+            fontSize: '0.875rem',
+            fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+            fontWeight: 400,
+          },
+        },
+      },
+      yaxis: {
+        show: true,
+        labels: {
+          style: {
+            colors: '#4A4A4A',
+            fontSize: '0.875rem',
+            fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+            fontWeight: 400,
+          },
+        },
+      },
+      tooltip: {
+        custom: () => customTooltip
+      }
+    };
+  };
+
+  public changedMatSelectionValue() {
+    switch (this.selectedMatSelectValue) {
+      case matSelectedFields.daily:
+        this.chartOptions = {
+          ...this.chartOptions,
+          series: [
+            {
+              name: 'Mobile',
+              type: 'line',
+              data: this.dailyLineChartData.dailyData.mobile,
+            },
+            {
+              name: 'Desktop',
+              type: 'area',
+              data: this.dailyLineChartData.dailyData.desktop,
+            },
+            {
+              name: 'Tablet',
+              type: 'line',
+              data: this.dailyLineChartData.dailyData.tablet,
+            }
+          ]
+        };
+        break;
+      case matSelectedFields.weekly:
+        this.chartOptions = {
+          ...this.chartOptions,
+          series: [
+            {
+              name: 'Mobile',
+              type: 'line',
+              data: this.dailyLineChartData.weeklyData.mobile,
+            },
+            {
+              name: 'Desktop',
+              type: 'area',
+              data: this.dailyLineChartData.weeklyData.desktop,
+            },
+            {
+              name: 'Tablet',
+              type: 'line',
+              data: this.dailyLineChartData.weeklyData.tablet,
+            }
+          ]
+        };
+        break;
+      default:
+        this.chartOptions = {
+          ...this.chartOptions,
+          series: [
+            {
+              name: 'Mobile',
+              type: 'line',
+              data: this.dailyLineChartData.monthlyData.mobile,
+            },
+            {
+              name: 'Desktop',
+              type: 'area',
+              data: this.dailyLineChartData.monthlyData.desktop,
+            },
+            {
+              name: 'Tablet',
+              type: 'line',
+              data: this.dailyLineChartData.monthlyData.tablet,
+            }
+          ]
+        };
+    }
+  }
+
+  private getNumberArray(value: unknown): number[] {
+    if (!Array.isArray(value)) {
+      return [];
+    }
+    return value.filter((item): item is number => typeof item === 'number');
+  }
+
+  private getStringArray(value: unknown): string[] {
+    if (!Array.isArray(value)) {
+      return [];
+    }
+    return value.filter((item): item is string => typeof item === 'string');
+  }
+
+  private getSeriesArray(value: unknown): LineSeriesItem[] {
+    if (!Array.isArray(value)) {
+      return [];
+    }
+    return value.filter(
+      (item): item is LineSeriesItem =>
+        typeof item === 'object' && item !== null,
+    );
+  }
+}
diff --git a/src/app/modules/dashboard/components/index.ts b/src/app/modules/dashboard/components/index.ts
new file mode 100644
index 0000000..92e8818
--- /dev/null
+++ b/src/app/modules/dashboard/components/index.ts
@@ -0,0 +1,7 @@
+export * from './visits-chart/visits-chart.component';
+export * from './performance-chart/performance-chart.component';
+export * from './revenue-chart/revenue-chart.component';
+export * from './server-chart/server-chart.component';
+export * from './daily-line-chart/daily-line-chart.component';
+export * from './support-requests/support-requests.component';
+export * from './project-stat-chart/project-stat-chart.component';
diff --git a/src/app/modules/dashboard/components/performance-chart/performance-chart.component.html b/src/app/modules/dashboard/components/performance-chart/performance-chart.component.html
new file mode 100644
index 0000000..9b6ddc5
--- /dev/null
+++ b/src/app/modules/dashboard/components/performance-chart/performance-chart.component.html
@@ -0,0 +1,43 @@
+<mat-card class="performance-chart">
+  <mat-card-title class="performance-chart__header">
+    <p class="performance-chart__header-title">App Performance</p>
+
+    <app-settings-menu></app-settings-menu>
+  </mat-card-title>
+
+  <mat-card-content class="performance-chart__content">
+    <div class="performance-chart__content-header">
+      <div class="performance-chart__content-header-item">
+        <div
+          class="performance-chart__content-header-item-icon"
+          [ngClass]="{
+            'blue' : currentTheme === 'blue',
+            'pink' : currentTheme === 'pink',
+            'green' : currentTheme === 'green'
+          }"
+        ></div>
+        <span class="performance-chart__content-header-item-text">Integration</span>
+      </div>
+      <div class="performance-chart__content-header-item">
+        <div class="performance-chart__content-header-item-icon yellow"></div>
+        <span class="performance-chart__content-header-item-text">SDK</span>
+      </div>
+    </div>
+
+    <div class="performance-chart__progress-wrapper">
+      <h6 class="performance-chart__progress-title">Integration</h6>
+      <mat-progress-bar
+        class="performance-chart__progress-bar"
+        mode="determinate"
+        [value]=performanceChartData.integration
+      ></mat-progress-bar>
+      <h6 class="performance-chart__progress-title">SDK</h6>
+      <mat-progress-bar
+        class="performance-chart__progress-bar"
+        mode="determinate"
+        color="accent"
+        [value]=performanceChartData.sdk
+      ></mat-progress-bar>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/dashboard/components/performance-chart/performance-chart.component.scss b/src/app/modules/dashboard/components/performance-chart/performance-chart.component.scss
new file mode 100644
index 0000000..a6e00e8
--- /dev/null
+++ b/src/app/modules/dashboard/components/performance-chart/performance-chart.component.scss
@@ -0,0 +1,94 @@
+@use '../../../../styles/variables' as *;
+@use '../../../../styles/font' as *;
+
+.performance-chart {
+  display: flex;
+  flex-direction: column;
+  height: 252px;
+
+  @media (min-width: 1280px) and (max-width: $xxl) {
+    height: 280px;
+  }
+
+  &__header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    &-title {
+      font-size: $fs-regular;
+      font-weight: 400;
+      margin: 0;
+      line-height: 40px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+
+    &-header {
+      display: flex;
+
+      &-item {
+        align-items: center;
+        display: flex;
+        margin-right: 16px;
+
+        &-icon {
+          border-radius: 50%;
+          width: 5px;
+          height: 5px;
+        }
+
+        &-text {
+          margin-left: 8px;
+          color: $grey;
+          font-size: $fs-small;
+        }
+      }
+    }
+  }
+
+  &__progress-title {
+    margin: 20px 0 5px 0;
+    font-weight: 400;
+    font-size: $fs-normal;
+    color: $grey;
+  }
+
+  &__progress-bar {
+    margin-bottom: 8px;
+
+    @media ($small) {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.pink {
+  background-color: $pink;
+}
+
+.green {
+  background-color: $green;
+}
+
+.yellow {
+  background-color: $yellow;
+}
diff --git a/src/app/modules/dashboard/components/performance-chart/performance-chart.component.ts b/src/app/modules/dashboard/components/performance-chart/performance-chart.component.ts
new file mode 100644
index 0000000..6edfc38
--- /dev/null
+++ b/src/app/modules/dashboard/components/performance-chart/performance-chart.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+
+import { PerformanceChartData } from '../../models';
+import { SettingsMenuComponent } from '../../../../shared/ui-elements';
+
+@Component({
+    selector: 'app-performance-chart',
+    templateUrl: './performance-chart.component.html',
+    styleUrls: ['./performance-chart.component.scss'],
+    standalone: true,
+    imports: [CommonModule, MatCardModule, MatProgressBarModule, SettingsMenuComponent]
+})
+export class PerformanceChartComponent {
+  @Input() performanceChartData: PerformanceChartData;
+  @Input() currentTheme: string;
+}
diff --git a/src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.html b/src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.html
new file mode 100644
index 0000000..f2d200a
--- /dev/null
+++ b/src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.html
@@ -0,0 +1,178 @@
+<div class="project-stat">
+  <mat-card class="project-stat__item">
+    <mat-card-title class="project-stat__title">
+      <p class="project-stat__title-text">{{selectedStatsLightBlueData.name}}</p>
+
+      <app-date-menu (changeDateType)="changeDateType($event, projectsType.lightBlue)"></app-date-menu>
+    </mat-card-title>
+    <mat-card-content class="project-stat-content">
+      <div class="project-stat-content__total-info-wrapper">
+        <div class="project-stat-content__total-info">
+          <p class="project-stat-content__total-info-users">{{selectedStatsLightBlueData.users}}</p>
+          @if (selectedStatsLightBlueData.percent > 0) {
+            <p
+              class="project-stat-content__total-info-percent"
+            >+{{selectedStatsLightBlueData.percent}}%</p>
+          }
+          @if (selectedStatsLightBlueData.percent < 0) {
+            <p
+              class="project-stat-content__total-info-percent-warn"
+            >{{selectedStatsLightBlueData.percent}}%</p>
+          }
+        </div>
+        <div class="project-stat-content__total-info-chart">
+          <div
+            echarts
+            [options]="lightBlueEchartsOptions"
+            [style.height]="chartOptions?.chart?.height | chartSize:'100px'"
+            [style.width]="chartOptions?.chart?.width | chartSize:'130px'"
+          ></div>
+        </div>
+      </div>
+
+      <div class="project-stat-content__stat-wrapper">
+        <div class="project-stat-content__stat-item">
+          <div class="project-stat-content__stat-value-wrapper">
+            <h6 class="project-stat-content__stat-value">{{selectedStatsLightBlueData.registrations}}</h6>
+            <mat-icon class="project-stat-content__stat-icon">arrow_upward</mat-icon>
+          </div>
+          <p class="project-stat-content__stat-item-title">Registrations</p>
+        </div>
+
+        <div class="project-stat-content__stat-item">
+          <div class="project-stat-content__stat-value-wrapper">
+            <h6 class="project-stat-content__stat-value">{{selectedStatsLightBlueData.bounce}}</h6>
+            <mat-icon class="project-stat-content__stat-icon">arrow_upward</mat-icon>
+          </div>
+          <p class="project-stat-content__stat-item-title">Bounce Rate</p>
+        </div>
+
+        <div class="project-stat-content__stat-item">
+          <div class="project-stat-content__stat-value-wrapper">
+            <h6 class="project-stat-content__stat-value">{{selectedStatsLightBlueData.views}}</h6>
+            <mat-icon class="project-stat-content__stat-icon-warn">arrow_upward</mat-icon>
+          </div>
+          <p class="project-stat-content__stat-item-title">Views</p>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="project-stat__item">
+    <mat-card-title class="project-stat__title">
+      <p class="project-stat__title-text">{{selectedStatsSingAppData.name}}</p>
+
+      <app-date-menu (changeDateType)="changeDateType($event, projectsType.SingApp)"></app-date-menu>
+    </mat-card-title>
+    <mat-card-content class="project-stat-content">
+      <div class="project-stat-content__total-info-wrapper">
+        <div class="project-stat-content__total-info">
+          <p class="project-stat-content__total-info-users">{{selectedStatsSingAppData.users}}</p>
+          @if (selectedStatsSingAppData.percent > 0) {
+            <p
+              class="project-stat-content__total-info-percent"
+            >+{{selectedStatsSingAppData.percent}}%</p>
+          }
+          @if (selectedStatsSingAppData.percent < 0) {
+            <p
+              class="project-stat-content__total-info-percent-warn"
+            >{{selectedStatsSingAppData.percent}}%</p>
+          }
+        </div>
+        <div class="project-stat-content__total-info-chart">
+          <div
+            echarts
+            [options]="singAppEchartsOptions"
+            [style.height]="chartOptions?.chart?.height | chartSize:'100px'"
+            [style.width]="chartOptions?.chart?.width | chartSize:'130px'"
+          ></div>
+        </div>
+      </div>
+
+      <div class="project-stat-content__stat-wrapper">
+        <div class="project-stat-content__stat-item">
+          <div class="project-stat-content__stat-value-wrapper">
+            <h6 class="project-stat-content__stat-value">{{selectedStatsSingAppData.registrations}}</h6>
+            <mat-icon class="project-stat-content__stat-icon">arrow_upward</mat-icon>
+          </div>
+          <p class="project-stat-content__stat-item-title">Registrations</p>
+        </div>
+
+        <div class="project-stat-content__stat-item">
+          <div class="project-stat-content__stat-value-wrapper">
+            <h6 class="project-stat-content__stat-value">{{selectedStatsSingAppData.bounce}}</h6>
+            <mat-icon class="project-stat-content__stat-icon">arrow_upward</mat-icon>
+          </div>
+          <p class="project-stat-content__stat-item-title">Bounce Rate</p>
+        </div>
+
+        <div class="project-stat-content__stat-item">
+          <div class="project-stat-content__stat-value-wrapper">
+            <h6 class="project-stat-content__stat-value">{{selectedStatsSingAppData.views}}</h6>
+            <mat-icon class="project-stat-content__stat-icon">arrow_upward</mat-icon>
+          </div>
+          <p class="project-stat-content__stat-item-title">Views</p>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="project-stat__item">
+    <mat-card-title class="project-stat__title">
+      <p class="project-stat__title-text">{{selectedStatsRNSData.name}}</p>
+
+      <app-date-menu (changeDateType)="changeDateType($event, projectsType.RNS)"></app-date-menu>
+    </mat-card-title>
+    <mat-card-content class="project-stat-content">
+      <div class="project-stat-content__total-info-wrapper">
+        <div class="project-stat-content__total-info">
+          <p class="project-stat-content__total-info-users">{{selectedStatsRNSData.users}}</p>
+          @if (selectedStatsRNSData.percent > 0) {
+            <p
+              class="project-stat-content__total-info-percent"
+            >+{{selectedStatsRNSData.percent}}%</p>
+          }
+          @if (selectedStatsRNSData.percent < 0) {
+            <p
+              class="project-stat-content__total-info-percent-warn"
+            >{{selectedStatsRNSData.percent}}%</p>
+          }
+        </div>
+        <div class="project-stat-content__total-info-chart">
+          <div
+            echarts
+            [options]="rnsEchartsOptions"
+            [style.height]="chartOptions?.chart?.height | chartSize:'100px'"
+            [style.width]="chartOptions?.chart?.width | chartSize:'130px'"
+          ></div>
+        </div>
+      </div>
+
+      <div class="project-stat-content__stat-wrapper">
+        <div class="project-stat-content__stat-item">
+          <div class="project-stat-content__stat-value-wrapper">
+            <h6 class="project-stat-content__stat-value">{{selectedStatsRNSData.registrations}}</h6>
+            <mat-icon class="project-stat-content__stat-icon-warn">arrow_upward</mat-icon>
+          </div>
+          <p class="project-stat-content__stat-item-title">Registrations</p>
+        </div>
+
+        <div class="project-stat-content__stat-item">
+          <div class="project-stat-content__stat-value-wrapper">
+            <h6 class="project-stat-content__stat-value">{{selectedStatsRNSData.bounce}}</h6>
+            <mat-icon class="project-stat-content__stat-icon">arrow_upward</mat-icon>
+          </div>
+          <p class="project-stat-content__stat-item-title">Bounce Rate</p>
+        </div>
+
+        <div class="project-stat-content__stat-item">
+          <div class="project-stat-content__stat-value-wrapper">
+            <h6 class="project-stat-content__stat-value">{{selectedStatsRNSData.views}}</h6>
+            <mat-icon class="project-stat-content__stat-icon">arrow_upward</mat-icon>
+          </div>
+          <p class="project-stat-content__stat-item-title">Views</p>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.scss b/src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.scss
new file mode 100644
index 0000000..bcc3c1b
--- /dev/null
+++ b/src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.scss
@@ -0,0 +1,150 @@
+@use "../../../../styles/variables" as *;
+@use "../../../../styles/font" as *;
+
+.project-stat {
+  display: flex;
+  margin-bottom: 24px;
+
+  &__item {
+    height: 236px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    @media (min-width: $small) and (max-width: $normal) {
+      margin-top: 24px;
+    }
+
+    & + .project-stat__item {
+      margin-left: 24px;
+
+      @media (max-width: $small) {
+        margin-top: 24px;
+        margin-left: 0;
+      }
+
+      @media (min-width: $small) and (max-width: $normal) {
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    }
+
+    @media (min-width: $small) and (max-width: $large) {
+      width: 41.3%;
+    }
+
+    @media (min-width: $large) and (max-width: $normal) {
+      width: 43.6%;
+    }
+  }
+
+  &__title {
+    padding: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0;
+  }
+
+  &__title-text {
+    font-weight: $fw-lighter;
+    font-size: $fs-medium;
+    margin: 0;
+  }
+
+  @media (min-width: $small) and (max-width: $normal) {
+    justify-content: start;
+  }
+
+  @media (max-width: $normal) {
+    flex-wrap: wrap;
+  }
+}
+
+.project-stat-content {
+  padding: 8px;
+  margin: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  &__total-info-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 70px;
+  }
+
+  &__total-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  &__total-info-users {
+    color: $grey;
+    font-weight: $fw-lighter;
+    font-size: $fs-xxxl;
+    margin: 0;
+    height: 45px;
+    letter-spacing: 0.15px;
+  }
+
+  &__total-info-percent {
+    color: $green;
+    font-weight: $fw-lighter;
+    font-size: $fs-small;
+    margin: 0 0 0 5px;
+  }
+
+  &__total-info-percent-warn {
+    color: $pink;
+    font-weight: $fw-lighter;
+    font-size: $fs-small;
+    margin: 0 0 0 5px;
+  }
+
+  &__total-info-chart {
+    position: relative;
+    right: -9px;
+    top: -2px;
+  }
+
+  &__stat-wrapper {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 12px;
+  }
+
+  &__stat-value-wrapper {
+    display: flex;
+    align-items: center;
+  }
+
+  &__stat-value {
+    font-weight: $fw-lighter;
+    font-size: $fs-regular;
+    color: $dark-grey;
+    margin: 0;
+  }
+
+  &__stat-icon {
+    transform: rotate(45deg);
+    color: $green;
+  }
+
+  &__stat-icon-warn {
+    transform: rotate(135deg);
+    color: $pink;
+  }
+
+  &__stat-item-title {
+    color: $light-grey;
+    font-weight: $fw-lighter;
+    font-size: 12px;
+    margin: 0;
+  }
+}
diff --git a/src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.ts b/src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.ts
new file mode 100644
index 0000000..fd1930f
--- /dev/null
+++ b/src/app/modules/dashboard/components/project-stat-chart/project-stat-chart.component.ts
@@ -0,0 +1,203 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { ProjectStatData, ProjectTimeData } from '../../models';
+import { colors } from '../../../../consts';
+import { ChartOptions } from '../../../templates/charts/models/chart-options';
+import { DateMenuComponent } from '../../../../shared/ui-elements';
+import { ChartSizePipe } from '../../../../shared/pipes/chart-size.pipe';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+enum ProjectsType {
+  lightBlue = 'lightBlue',
+  SingApp = 'SingApp',
+  RNS = 'RNS'
+}
+
+@Component({
+    selector: 'app-project-stat-chart',
+    templateUrl: './project-stat-chart.component.html',
+    styleUrls: ['./project-stat-chart.component.scss'],
+    standalone: true,
+    imports: [
+      MatCardModule,
+      MatIconModule,
+      DateMenuComponent,
+      ChartSizePipe,
+      NgxEchartsModule,
+    ]
+})
+export class ProjectStatChartComponent implements OnInit {
+  @Input() projectsStatsData: ProjectStatData;
+  public selectedStatsLightBlueData: ProjectTimeData;
+  public selectedStatsSingAppData: ProjectTimeData;
+  public selectedStatsRNSData: ProjectTimeData;
+  public chartOptions: Partial<ChartOptions>;
+  public projectsType: typeof ProjectsType = ProjectsType;
+  public colors: typeof colors = colors;
+
+  public get lightBlueEchartsOptions(): EChartsOption {
+    return this.buildEchartsOptions(this.selectedStatsLightBlueData?.series, colors.BLUE);
+  }
+
+  public get singAppEchartsOptions(): EChartsOption {
+    return this.buildEchartsOptions(this.selectedStatsSingAppData?.series, colors.YELLOW);
+  }
+
+  public get rnsEchartsOptions(): EChartsOption {
+    return this.buildEchartsOptions(this.selectedStatsRNSData?.series, colors.PINK);
+  }
+
+  public ngOnInit(): void {
+    this.selectedStatsLightBlueData = this.projectsStatsData.lightBlue.daily;
+    this.selectedStatsSingAppData = this.projectsStatsData.singApp.daily;
+    this.selectedStatsRNSData = this.projectsStatsData.rns.daily;
+
+    this.initChart();
+  }
+
+  public initChart(): void {
+    this.chartOptions = {
+      chart: {
+        type: 'bar',
+        height: 100,
+        width: 130,
+        toolbar: {
+          show: false
+        }
+      },
+      legend: {
+        show: false
+      },
+      grid: {
+        show: false
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '70%',
+          borderRadius: 5
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        show: true,
+        width: 2,
+        colors: ['transparent']
+      },
+      xaxis: {
+        categories: [
+          'Feb',
+          'Mar',
+          'Apr',
+          'May',
+          'Jun',
+          'Jul',
+          'Aug'
+        ],
+        labels: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        }
+      },
+      yaxis: {
+        show: false
+      },
+      tooltip: {
+        y: {
+          formatter(val) {
+            return '$ ' + val + ' thousands';
+          }
+        }
+      }
+    };
+  }
+
+  public changeDateType(dateType: string, projectType: string): void {
+    switch (projectType) {
+      case this.projectsType.lightBlue:
+        switch (dateType) {
+          case 'Weekly':
+            this.selectedStatsLightBlueData = this.projectsStatsData.lightBlue.week;
+            break;
+          case 'Monthly':
+            this.selectedStatsLightBlueData = this.projectsStatsData.lightBlue.monthly;
+            break;
+          default:
+            this.selectedStatsLightBlueData = this.projectsStatsData.lightBlue.daily;
+        }
+      break;
+      case this.projectsType.SingApp:
+        switch (dateType) {
+          case 'Weekly':
+            this.selectedStatsSingAppData = this.projectsStatsData.singApp.week;
+            break;
+          case 'Monthly':
+            this.selectedStatsSingAppData = this.projectsStatsData.singApp.monthly;
+            break;
+          default:
+            this.selectedStatsSingAppData = this.projectsStatsData.singApp.daily;
+        }
+      break;
+      case this.projectsType.RNS:
+        switch (dateType) {
+          case 'Weekly':
+            this.selectedStatsRNSData = this.projectsStatsData.rns.week;
+            break;
+          case 'Monthly':
+            this.selectedStatsRNSData = this.projectsStatsData.rns.monthly;
+            break;
+          default:
+            this.selectedStatsRNSData = this.projectsStatsData.rns.daily;
+        }
+      break;
+    }
+  }
+
+  private buildEchartsOptions(series: ProjectTimeData['series'] | undefined, color: string): EChartsOption {
+    const xaxis = this.chartOptions?.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const rawSeries = (series ?? []) as Array<{ name: string; data: number[] }>;
+    const mappedSeries = rawSeries.map((item) => ({
+      type: 'bar',
+      name: item.name ?? '',
+      data: item.data ?? [],
+      barMaxWidth: 18
+    }));
+
+    return {
+      color: [color],
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow' }
+      },
+      grid: {
+        top: 8,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        containLabel: false
+      },
+      xAxis: {
+        type: 'category',
+        data: categories,
+        axisLabel: { show: false },
+        axisTick: { show: false },
+        axisLine: { show: false }
+      },
+      yAxis: {
+        type: 'value',
+        show: false
+      },
+      series: mappedSeries
+    } as EChartsOption;
+  }
+}
diff --git a/src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.html b/src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.html
new file mode 100644
index 0000000..13bdd98
--- /dev/null
+++ b/src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.html
@@ -0,0 +1,26 @@
+<mat-card class="revenue-chart">
+  <mat-card-title class="revenue-chart__header">
+    <p class="revenue-chart__header-title">Revenue Breakdown</p>
+
+    <app-settings-menu></app-settings-menu>
+  </mat-card-title>
+
+  <mat-card-content class="revenue-chart__content">
+    <div class="revenue-chart__content-chart" echarts [options]="revenueChart"></div>
+
+    <div class="legend-wrapper">
+      <div class="legend-item-wrapper">
+        <div class="legend-icon green"></div><p class="legend-text">Group A</p>
+      </div>
+      <div class="legend-item-wrapper">
+        <div class="legend-icon pink"></div><p class="legend-text">Group B</p>
+      </div>
+      <div class="legend-item-wrapper">
+        <div class="legend-icon yellow"></div><p class="legend-text">Group C</p>
+      </div>
+      <div class="legend-item-wrapper">
+        <div class="legend-icon blue"></div><p class="legend-text">Group D</p>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.scss b/src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.scss
new file mode 100644
index 0000000..03b36a5
--- /dev/null
+++ b/src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.scss
@@ -0,0 +1,85 @@
+@use "../../../../styles/font" as *;
+@use "../../../../styles/variables" as *;
+
+.revenue-chart {
+  display: flex;
+  flex-direction: column;
+  height: 252px;
+
+  @media (min-width: 1280px) and (max-width: $xxl) {
+    height: 280px;
+  }
+
+  &__header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    &-title {
+      font-size: $fs-regular;
+      font-weight: $fw-lighter;
+      margin: 0;
+      line-height: 40px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+
+    &-chart {
+      height: 140px;
+      width: 60%;
+      max-width: 218px
+    }
+  }
+}
+
+.legend-wrapper {
+
+}
+
+.legend-item-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.legend-icon {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+}
+
+.legend-text {
+  margin: 0 0 0 8px;
+  font-size: $fs-normal;
+  font-width: $fw-lighter;
+  color: $grey;
+  white-space: nowrap;
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.pink {
+  background-color: $pink;
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.green {
+  background-color: $green;
+}
diff --git a/src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.ts b/src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.ts
new file mode 100644
index 0000000..eabb9b0
--- /dev/null
+++ b/src/app/modules/dashboard/components/revenue-chart/revenue-chart.component.ts
@@ -0,0 +1,67 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { MatCardModule } from '@angular/material/card';
+
+import { RevenueChartData } from '../../models';
+import {colors} from '../../../../consts';
+import { SettingsMenuComponent } from '../../../../shared/ui-elements';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+@Component({
+    selector: 'app-revenue-chart',
+    templateUrl: './revenue-chart.component.html',
+    styleUrls: ['./revenue-chart.component.scss'],
+    standalone: true,
+    imports: [MatCardModule, SettingsMenuComponent, NgxEchartsModule]
+})
+export class RevenueChartComponent implements OnInit {
+  @Input() revenueCharData: RevenueChartData;
+  public revenueChart: EChartsOption = {};
+  public colors: typeof colors = colors;
+
+  public ngOnInit(): void {
+    this.initChart();
+  }
+
+  public initChart(): void {
+    this.revenueChart = {
+      color: [colors.GREEN, colors.PINK, colors.YELLOW, colors.BLUE],
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        show: false
+      },
+      series: [{
+        type: 'pie',
+        radius: ['50%', '70%'],
+        center: ['50%', '50%'],
+        label: {
+          show: false
+        },
+        labelLine: {
+          show: false
+        },
+        avoidLabelOverlap: false,
+        data: [
+          {
+            name: 'Group A',
+            value: this.revenueCharData.groupA
+          },
+          {
+            name: 'Group B',
+            value: this.revenueCharData.groupB
+          },
+          {
+            name: 'Group C',
+            value: this.revenueCharData.groupC
+          },
+          {
+            name: 'Group D',
+            value: this.revenueCharData.groupD
+          },
+        ]
+      }]
+    };
+  }
+}
diff --git a/src/app/modules/dashboard/components/server-chart/server-chart.component.html b/src/app/modules/dashboard/components/server-chart/server-chart.component.html
new file mode 100644
index 0000000..11d6cc9
--- /dev/null
+++ b/src/app/modules/dashboard/components/server-chart/server-chart.component.html
@@ -0,0 +1,24 @@
+<mat-card class="server-chart">
+  <mat-card-title class="server-chart__header">
+    <p class="server-chart__header-title">Server Overview</p>
+
+    <app-settings-menu></app-settings-menu>
+  </mat-card-title>
+
+  <mat-card-content class="server-chart__content">
+    @for (chart of charts; track chart; let i = $index) {
+      <div class="server-chart__content-item">
+        <div class="server-chart__content-item-text-wrapper">
+          <p class="server-chart__content-item-text">{{serverDataTitles[i]}}</p>
+        </div>
+        <div
+          echarts
+          class="server-chart__content-item-chart"
+          [options]="chart"
+          [style.height]="'52px'"
+          [style.width]="'100%'"
+        ></div>
+      </div>
+    }
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/dashboard/components/server-chart/server-chart.component.scss b/src/app/modules/dashboard/components/server-chart/server-chart.component.scss
new file mode 100644
index 0000000..32cad43
--- /dev/null
+++ b/src/app/modules/dashboard/components/server-chart/server-chart.component.scss
@@ -0,0 +1,81 @@
+@use '../../../../styles/font' as *;
+@use '../../../../styles/variables' as *;
+
+.server-chart {
+  display: flex;
+  flex-direction: column;
+  height: 252px;
+
+  @media (min-width: 1280px) and (max-width: $xxl) {
+    height: 280px;
+  }
+
+  &__header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+
+    &-title {
+      font-size: $fs-regular;
+      font-weight: $fw-lighter;
+      margin: 0;
+      line-height: 32px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  &__content {
+    display: grid;
+    flex: 1 1 auto;
+    min-height: 0;
+    grid-template-rows: repeat(3, minmax(52px, auto));
+    row-gap: 6px;
+    margin: 0;
+    padding: 0;
+
+    &-item {
+      align-items: center;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(64px, 92px);
+      column-gap: 8px;
+      min-height: 52px;
+
+      &-text-wrapper {
+        min-width: 0;
+
+        @media (min-width: 1280px) and (max-width: $xxl) {
+          width: 50%;
+        }
+      }
+
+      &-text {
+        width: 100%;
+        color: $grey;
+        font-weight: $fw-lighter;
+        font-size: $fs-small;
+        padding-right: 8px;
+        margin: 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        @media (min-width: 1280px) and (max-width: $xxl) {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+
+      &-chart {
+        min-width: 64px;
+        max-width: 92px;
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/src/app/modules/dashboard/components/server-chart/server-chart.component.ts b/src/app/modules/dashboard/components/server-chart/server-chart.component.ts
new file mode 100644
index 0000000..b4afe10
--- /dev/null
+++ b/src/app/modules/dashboard/components/server-chart/server-chart.component.ts
@@ -0,0 +1,71 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { ServerChartData } from '../../models';
+import {colors} from '../../../../consts';
+import { MatCardModule } from '@angular/material/card';
+import { SettingsMenuComponent } from '../../../../shared/ui-elements';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+@Component({
+    selector: 'app-server-chart',
+    templateUrl: './server-chart.component.html',
+    styleUrls: ['./server-chart.component.scss'],
+    standalone: true,
+    imports: [MatCardModule, SettingsMenuComponent, NgxEchartsModule]
+})
+export class ServerChartComponent implements OnInit {
+  @Input() serverChartData: ServerChartData;
+  public charts: EChartsOption[] = [];
+  public serverDataTitles: string[];
+  public colors: typeof colors = colors;
+
+  public ngOnInit(): void {
+    this.charts = [
+      this.initChart(this.serverChartData.firstServerChartData, colors.PINK),
+      this.initChart(this.serverChartData.secondServerChartData, colors.BLUE),
+      this.initChart(this.serverChartData.thirdServerChartData, colors.YELLOW)
+    ];
+
+    this.serverDataTitles = [
+      this.serverChartData.firstDataTitle,
+      this.serverChartData.secondDataTitle,
+      this.serverChartData.thirdDataTitle,
+    ]
+  }
+
+  public initChart(data: number[], color: string): EChartsOption {
+    return {
+      color: [color],
+      tooltip: { show: false },
+      grid: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      xAxis: {
+        type: 'category',
+        data: this.serverChartData.dates,
+        axisLabel: { show: false },
+        axisTick: { show: false },
+        axisLine: { show: false }
+      },
+      yAxis: {
+        type: 'value',
+        show: false,
+        max: 50000
+      },
+      series: [
+        {
+          type: 'line',
+          name: 'STOCK ABC',
+          data,
+          smooth: true,
+          showSymbol: false,
+          lineStyle: { width: 2 },
+          areaStyle: { opacity: 0.3 }
+        }
+      ]
+    } as EChartsOption;
+  }
+}
diff --git a/src/app/modules/dashboard/components/support-requests/support-requests.component.html b/src/app/modules/dashboard/components/support-requests/support-requests.component.html
new file mode 100644
index 0000000..20a2921
--- /dev/null
+++ b/src/app/modules/dashboard/components/support-requests/support-requests.component.html
@@ -0,0 +1,147 @@
+<mat-card class="support-requests">
+  <mat-card-title class="support-requests__header">
+    <div>
+      <p class="support-requests__title">Support Requests</p>
+    </div>
+
+    <app-settings-menu></app-settings-menu>
+  </mat-card-title>
+
+  <mat-card-content class="support-requests__content">
+    <table mat-table [dataSource]="dataSource" matSort class="table">
+
+      <!-- Checkbox Column -->
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox
+            color="warn"
+            (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+            [aria-label]="checkboxLabel()"
+          ></mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-checkbox
+            color="warn"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+            [aria-label]="checkboxLabel(row)"
+          ></mat-checkbox>
+        </td>
+      </ng-container>
+
+      <!-- Order Column -->
+      <ng-container matColumnDef="id" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <p class="table-header-text">Order id</p>
+        </th>
+        <td class="table-body" mat-cell *matCellDef="let element">
+          <p class="table-body-text">{{element.id}}</p>
+        </td>
+      </ng-container>
+
+      <!-- Customer Column -->
+      <ng-container matColumnDef="customer" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <p class="table-header-text">Customer</p>
+        </th>
+        <td class="table-body" mat-cell *matCellDef="let element">
+          <div class="customer-column-wrapper">
+            <button
+              mat-mini-fab
+              class="customer-column-icon"
+              color="{{
+                element.status === 'delivered'
+                ? 'success'
+                : element.status === 'pending'
+                ? 'primary'
+                : element.status === 'progress'
+                ? 'accent'
+                : 'warn'
+              }}"
+            >{{element.customer | shortName}}</button>
+            <p class="table-body-text">{{element.customer}}</p>
+          </div>
+        </td>
+      </ng-container>
+
+      <!-- Office Column -->
+      <ng-container matColumnDef="office" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <p class="table-header-text">Office</p>
+        </th>
+        <td class="table-body" mat-cell *matCellDef="let element">
+          <p class="table-body-text">{{element.office}}</p>
+        </td>
+      </ng-container>
+
+      <!-- Netto Weight Column -->
+      <ng-container matColumnDef="nettoWeight" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <p class="table-header-text">Netto Weight</p>
+        </th>
+        <td class="table-body" mat-cell *matCellDef="let element">
+          <p class="table-body-text">{{element.nettoWeight}}</p>
+        </td>
+      </ng-container>
+
+      <!-- Price Column -->
+      <ng-container matColumnDef="price" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <p class="table-header-text">Price</p>
+        </th>
+        <td class="table-body" mat-cell *matCellDef="let element">
+          <p class="table-body-text">{{element.price}}</p>
+        </td>
+      </ng-container>
+
+      <!-- Date of Purchase Column -->
+      <ng-container matColumnDef="dateOfPurchase" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <p class="table-header-text">Date of purchase</p>
+        </th>
+        <td class="table-body" mat-cell *matCellDef="let element">
+          <p class="table-body-text">{{element.dateOfPurchase}}</p>
+        </td>
+      </ng-container>
+
+      <!-- Date of Delivery Column -->
+      <ng-container matColumnDef="dateOfDelivery" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <p class="table-header-text">Date of Delivery</p>
+        </th>
+        <td class="table-body" mat-cell *matCellDef="let element">
+          <p class="table-body-text">{{element.dateOfDelivery}}</p>
+        </td>
+      </ng-container>
+
+      <!-- Status Column -->
+      <ng-container matColumnDef="status" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <p class="table-header-text">Status</p>
+        </th>
+        <td class="table-body" mat-cell *matCellDef="let element">
+          <div class="support-requests__content-badge" [ngClass]="element.status">
+            <span>{{element.status}}</span>
+          </div>
+        </td>
+      </ng-container>
+
+      <!-- Actions Column -->
+      <ng-container matColumnDef="actions" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef >
+          <p class="table-header-text">Actions</p>
+        </th>
+        <td class="table-body" mat-cell *matCellDef="let element">
+          <app-settings-menu></app-settings-menu>
+        </td>
+      </ng-container>
+
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/dashboard/components/support-requests/support-requests.component.scss b/src/app/modules/dashboard/components/support-requests/support-requests.component.scss
new file mode 100644
index 0000000..19944f1
--- /dev/null
+++ b/src/app/modules/dashboard/components/support-requests/support-requests.component.scss
@@ -0,0 +1,130 @@
+@use '../../../../styles/font' as *;
+@use '../../../../styles/variables' as *;
+
+.support-requests {
+  padding: 0;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    padding: 24px 24px 8px;
+    margin-bottom: 0;
+  }
+
+  &__title {
+    font-size: $fs-medium;
+    font-weight: $fw-lighter;
+    margin: 0;
+    line-height: 40px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &__content {
+    height: auto;
+    overflow-y: hidden;
+    overflow-x: scroll;
+
+    @media (max-width: $small) {
+      height: auto;
+    }
+  }
+
+  &__table-row {
+    height: 64px;
+  }
+
+  &__table-row-title {
+    color: $dark-grey;
+    font-size: $fs-small;
+    font-weight: $fw-lighter;
+    line-height: 24px;
+    text-transform: uppercase;
+    padding: 18.4px;
+  }
+
+  &__table-content {
+    color: $dark-grey;
+    font-size: $fs-small;
+    padding: 20px;
+  }
+
+  &__content-badge {
+    width: fit-content;
+    border-radius: 32px;
+    color: $white;
+    text-align: center;
+    padding: 5px 10px;
+    font-size: 13px;
+    box-sizing: border-box;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    font-weight: $fw-lighter;
+    line-height: 1.75;
+    letter-spacing: 0.45px;
+
+    &::first-letter {
+      text-transform: uppercase;
+    }
+  }
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of menu that may no longer apply for the MDC version. */
+mat-menu {
+  position: absolute;
+}
+
+.delivered {
+  background-color: $green;
+}
+
+.pending {
+  background-color: $blue;
+}
+
+.canseled {
+  background-color: $pink;
+}
+
+.progress {
+  background-color: $yellow;
+}
+
+.table {
+  width: 100%;
+}
+
+.table-header {
+  padding: 14px 40px 14px 24px;
+}
+
+.table-header-text {
+  font-size: $fs-small;
+  font-weight: $fw-normal;
+  color: $light-grey;
+  text-transform: uppercase;
+  width: max-content;
+  margin: 0;
+}
+
+.table-body {
+  padding: 14px 40px 14px 24px;
+}
+
+.table-body-text {
+  font-size: $fs-small;
+  font-weight: $fw-normal;
+  color: $dark-grey;
+  text-transform: uppercase;
+  width: max-content;
+  margin: 0;
+}
+
+.customer-column-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.customer-column-icon {
+  margin-right: 8px;
+}
diff --git a/src/app/modules/dashboard/components/support-requests/support-requests.component.ts b/src/app/modules/dashboard/components/support-requests/support-requests.component.ts
new file mode 100644
index 0000000..b80e46c
--- /dev/null
+++ b/src/app/modules/dashboard/components/support-requests/support-requests.component.ts
@@ -0,0 +1,77 @@
+import {Component, Input, ViewChild} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SupportRequestData } from '../../models/support-request-data';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatSort } from '@angular/material/sort';
+import { MatCardModule } from '@angular/material/card';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { SettingsMenuComponent } from '../../../../shared/ui-elements';
+import { ShortNamePipe } from '../../../../shared/header/pipes';
+
+@Component({
+    selector: 'app-support-requests',
+    templateUrl: './support-requests.component.html',
+    styleUrls: ['./support-requests.component.scss'],
+    standalone: true,
+    imports: [
+      CommonModule,
+      MatCardModule,
+      MatTableModule,
+      MatSortModule,
+      MatCheckboxModule,
+      MatButtonModule,
+      SettingsMenuComponent,
+      ShortNamePipe,
+    ]
+})
+export class SupportRequestsComponent {
+  @Input() supportRequestData: SupportRequestData[];
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
+  public displayedColumns: string[] = [
+    'select',
+    'id',
+    'customer',
+    'office',
+    'nettoWeight',
+    'price',
+    'dateOfPurchase',
+    'dateOfDelivery',
+    'status',
+    'actions'
+  ];
+  public selection = new SelectionModel<SupportRequestData>(true, []);
+  public dataSource: MatTableDataSource<SupportRequestData>;
+
+  public ngOnInit(): void {
+    this.dataSource = new MatTableDataSource<SupportRequestData>(this.supportRequestData);
+
+    this.dataSource.sort = this.sort;
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  public masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  public checkboxLabel(row?: SupportRequestData): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.id}`;
+  }
+}
diff --git a/src/app/modules/dashboard/components/visits-chart/visits-chart.component.html b/src/app/modules/dashboard/components/visits-chart/visits-chart.component.html
new file mode 100644
index 0000000..dc3ca0e
--- /dev/null
+++ b/src/app/modules/dashboard/components/visits-chart/visits-chart.component.html
@@ -0,0 +1,50 @@
+<mat-card class="visits-chart">
+  <mat-card-title class="visits-chart__header">
+    <p class="visits-chart__title">Support Tracker</p>
+
+    <app-settings-menu></app-settings-menu>
+  </mat-card-title>
+
+  <mat-card-content class="visits-chart__content">
+    <div class="visits-chart__content-info">
+      <div>
+        <h6 class="visits-chart__content-info-title">{{visitsChartData.all}}</h6>
+        <p>Tickets</p>
+      </div>
+
+      <div
+        echarts
+        class="visits-chart__content-info-chart"
+        [options]="echartsOptions"
+        [style.height]="chartOptions?.chart?.height | chartSize:'130px'"
+        [style.width]="chartOptions?.chart?.width | chartSize:'130px'"
+      ></div>
+    </div>
+
+    <div class="visits-chart__content-stats">
+      <div>
+        <p class="visits-chart__content-stats-title">New Tickets</p>
+        <div class="visits-chart__content-stats-wrapper">
+          <p class="visits-chart__content-stats-data">{{visitsChartData.registration}}</p>
+          <div class="visits-chart__content-stats-icon green"></div>
+        </div>
+      </div>
+
+      <div>
+        <p class="visits-chart__content-stats-title">Open</p>
+        <div class="visits-chart__content-stats-wrapper">
+          <p class="visits-chart__content-stats-data">{{visitsChartData.signOut}}</p>
+          <div class="visits-chart__content-stats-icon yellow"></div>
+        </div>
+      </div>
+
+      <div>
+        <p class="visits-chart__content-stats-title">Completed</p>
+        <div class="visits-chart__content-stats-wrapper">
+          <p class="visits-chart__content-stats-data">{{visitsChartData.rate}}</p>
+          <div class="visits-chart__content-stats-icon blue"></div>
+        </div>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/dashboard/components/visits-chart/visits-chart.component.scss b/src/app/modules/dashboard/components/visits-chart/visits-chart.component.scss
new file mode 100644
index 0000000..55d5966
--- /dev/null
+++ b/src/app/modules/dashboard/components/visits-chart/visits-chart.component.scss
@@ -0,0 +1,106 @@
+@use "../../../../styles/font" as *;
+@use "../../../../styles/variables" as *;
+
+.visits-chart {
+  display: flex;
+  height: 252px;
+  flex-direction: column;
+
+  @media (min-width: 1280px) and (max-width: $xxl) {
+    height: 280px;
+  }
+
+  &__header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__title {
+    font-size: 20px;
+    font-weight: $fw-lighter;
+    margin: 0;
+    line-height: 40px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1 1 auto;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+
+    &-info {
+      align-items: center;
+      display: flex;
+      min-height: 96px;
+      justify-content: space-between;
+
+      &-title {
+        margin: 0;
+        font-weight: $fw-normal;
+        font-size: $fs-large;
+        line-height: 1.5;
+        letter-spacing: 0.15px;
+        color: $dark-grey;
+      }
+
+      &-chart {
+        margin-left: 16px;
+      }
+    }
+
+    &-stats {
+      display: flex;
+      justify-content: space-between;
+
+      &-title {
+        margin:0;
+        color: $light-grey;
+        font-weight: $fw-lighter;
+        font-size: 12px;
+      }
+
+      &-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      &-data {
+        margin:0;
+        line-height: 1.5;
+        font-weight: $fw-lighter;
+        font-size: $fs-normal;
+        color: $dark-grey;
+      }
+
+      &-icon {
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.green {
+  background-color: $green;
+}
diff --git a/src/app/modules/dashboard/components/visits-chart/visits-chart.component.ts b/src/app/modules/dashboard/components/visits-chart/visits-chart.component.ts
new file mode 100644
index 0000000..bb2c28a
--- /dev/null
+++ b/src/app/modules/dashboard/components/visits-chart/visits-chart.component.ts
@@ -0,0 +1,138 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { MatCardModule } from '@angular/material/card';
+import { CommonModule } from '@angular/common';
+
+import { VisitsChartData } from '../../models';
+import { colors } from '../../../../consts';
+import { ChartOptions } from '../../../templates/charts/models/chart-options';
+import { SettingsMenuComponent } from '../../../../shared/ui-elements';
+import { ChartSizePipe } from '../../../../shared/pipes/chart-size.pipe';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+@Component({
+    selector: 'app-visits-chart',
+    templateUrl: './visits-chart.component.html',
+    styleUrls: ['./visits-chart.component.scss'],
+    standalone: true,
+    imports: [
+      CommonModule,
+      MatCardModule,
+      SettingsMenuComponent,
+      ChartSizePipe,
+      NgxEchartsModule,
+    ]
+})
+export class VisitsChartComponent implements OnInit, OnChanges {
+  @Input() visitsChartData: VisitsChartData;
+  @Input() currentTheme: string;
+  public colors: typeof colors = colors;
+  public chartOptions: Partial<ChartOptions> = {};
+
+  public get echartsOptions(): EChartsOption {
+    const value = Array.isArray(this.chartOptions.series)
+      ? Number((this.chartOptions.series as unknown[])[0] ?? 0)
+      : 0;
+    const fill = this.chartOptions.fill as { colors?: string[] } | undefined;
+    const color = fill?.colors?.[0] ?? colors.PINK;
+
+    return {
+      series: [
+        {
+          type: 'gauge',
+          startAngle: 180,
+          endAngle: 0,
+          center: ['50%', '65%'],
+          min: 0,
+          max: 100,
+          radius: '100%',
+          progress: {
+            show: true,
+            width: 8,
+            roundCap: true,
+            itemStyle: { color }
+          },
+          axisLine: {
+            lineStyle: {
+              width: 8,
+              color: [[1, 'rgba(74, 74, 74, 0.14)']]
+            }
+          },
+          pointer: { show: false },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLabel: { show: false },
+          detail: { show: false },
+          data: [{ value }]
+        }
+      ]
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart();
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['currentTheme']?.currentValue) {
+      this.chartOptions = {
+        ...this.chartOptions,
+        fill: {
+          colors: [
+            this.currentTheme === 'blue'
+              ? colors.BLUE
+              : this.currentTheme === 'green'
+              ? colors.GREEN
+              : colors.PINK
+          ]
+        }
+      };
+    }
+  }
+
+  public initChart(): void {
+    this.chartOptions = {
+      series: [77],
+      chart: {
+        height: 130,
+        width: 130,
+        type: 'radialBar',
+        offsetY: -10
+      },
+      plotOptions: {
+        radialBar: {
+          startAngle: -180,
+          endAngle: 180,
+          dataLabels: {
+            name: {
+              fontSize: '16px',
+              color: undefined,
+              offsetY: 120
+            },
+            value: {
+              offsetY: 76,
+              fontSize: '22px',
+              color: undefined,
+              formatter(val) {
+                return val + '%';
+              }
+            },
+            show: false
+          }
+        }
+      },
+      fill: {
+        colors: [
+          this.currentTheme === 'blue'
+            ? colors.BLUE
+            : this.currentTheme === 'green'
+            ? colors.GREEN
+            : colors.PINK
+        ]
+      },
+      stroke: {
+        dashArray: 3
+      }
+    };
+  }
+}
diff --git a/src/app/modules/dashboard/consts/custom-tooltip.ts b/src/app/modules/dashboard/consts/custom-tooltip.ts
new file mode 100644
index 0000000..1ac9f7c
--- /dev/null
+++ b/src/app/modules/dashboard/consts/custom-tooltip.ts
@@ -0,0 +1,6 @@
+export const customTooltip: string =
+  '<div>' +
+  '<div style="padding: 16px; 16px; display: flex; align-items: center;"> <div style="width: 8px; height: 8px; border-radius: 50%; background-color: #FFC260"></div><span style="color: #4A4A4A; margin-left: 8px">' + 'Tablet' + '</span></div>' +
+  '<div style="padding: 16px; 16px; display: flex; align-items: center;"> <div style="width: 8px; height: 8px; border-radius: 50%; background-color: #536DFE"></div><span style="color: #4A4A4A; margin-left: 8px">' + 'Mobile' + '</span></div>' +
+  '<div style="padding: 16px; 16px; display: flex; align-items: center;"> <div style="width: 8px; height: 8px; border-radius: 50%; background-color: #B1BCFF"></div><span style="color: #4A4A4A; margin-left: 8px">' + 'Desktop' + '</span></div>' +
+  '</div>';
diff --git a/src/app/modules/dashboard/consts/index.ts b/src/app/modules/dashboard/consts/index.ts
new file mode 100644
index 0000000..84bacd7
--- /dev/null
+++ b/src/app/modules/dashboard/consts/index.ts
@@ -0,0 +1 @@
+export * from './custom-tooltip';
diff --git a/src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.html b/src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.html
new file mode 100644
index 0000000..c153a63
--- /dev/null
+++ b/src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.html
@@ -0,0 +1,53 @@
+<mat-card class="card">
+  <mat-toolbar class="page-header" role="heading">
+    <div class="title-inner-wrapper">
+      <p class="title-text">Dashboard</p>
+
+      <mat-tab-group color="warn" class="dashboard-mat-tab">
+        <mat-tab label="Today">
+          <div class="empty-block"></div>
+        </mat-tab>
+        <mat-tab label="This Week">
+          <div class="empty-block"></div>
+        </mat-tab>
+        <mat-tab label="This Month">
+          <div class="empty-block"></div>
+        </mat-tab>
+        <mat-tab label="This Year">
+          <div class="empty-block"></div>
+        </mat-tab>
+      </mat-tab-group>
+    </div>
+
+    <div class="title-inner-wrapper">
+      <div class="title-date">
+        <mat-icon class="title-icon-data" color="primary">calendar_today</mat-icon>
+
+        <p class="title-data-text"> {{todayDate | date: 'dd MMM yyyy, EEEE'}}</p>
+      </div>
+
+      <button mat-flat-button color="warn" class="title-button">Latest Reports</button>
+    </div>
+  </mat-toolbar>
+</mat-card>
+
+<div class="charts-wrapper">
+  <app-visits-chart class="chart" [visitsChartData]="visitsChartData$ | async" [currentTheme]="currentTheme"></app-visits-chart>
+
+  <app-performance-chart class="chart" [performanceChartData]="performanceChartData$ | async" [currentTheme]="currentTheme"></app-performance-chart>
+
+  <app-server-chart class="chart" [serverChartData]="serverChartData$ | async"></app-server-chart>
+
+  <app-revenue-chart class="chart" [revenueCharData]="revenueChartData$ | async"></app-revenue-chart>
+</div>
+
+<app-daily-line-chart
+  [dailyLineChartData]="dailyLineChartData$ | async"
+  [currentTheme]="currentTheme"
+  [currentMode]="currentMode"
+></app-daily-line-chart>
+
+<app-project-stat-chart [projectsStatsData]="projectsStatsData$ | async"></app-project-stat-chart>
+
+<app-support-requests [supportRequestData]="supportRequestData$ | async"></app-support-requests>
+
diff --git a/src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.scss b/src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.scss
new file mode 100644
index 0000000..99dd8d2
--- /dev/null
+++ b/src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.scss
@@ -0,0 +1,110 @@
+@use '../../../../styles/variables' as *;
+@use '../../../../styles/font' as *;
+
+.card {
+  padding: 0;
+
+  @media (max-width: $small) {
+    padding: 24px;
+  }
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  padding: $toolbar-padding;
+  background: none;
+  height: auto;
+
+  @media (max-width: $small) {
+    flex-direction: column;
+    align-items: baseline;
+    padding: 0;
+  }
+}
+
+.empty-block {
+  width: 100%;
+  height: 1px;
+}
+
+.title-inner-wrapper {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: $normal) {
+    flex-wrap: wrap;
+  }
+}
+
+.title-inner-wrapper + .title-inner-wrapper {
+  @media (max-width: $small) {
+    margin-top: 24px;
+  }
+}
+
+.title-text {
+  margin: 0 24px 0 0;
+}
+
+.dashboard-mat-tab {
+  @media (max-width: $normal) {
+    width: 100%;
+    margin-top: 24px;
+  }
+}
+
+.title-date {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 24px;
+
+  @media (min-width: $small) and (max-width: $normal) {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+.title-icon-data {
+  margin-right: 16px;
+}
+
+.title-data-text {
+  margin: 0;
+  font-weight: $fw-lighter;
+  font-size: $fs-normal;
+}
+
+.title-button {
+  @media (max-width: $normal) {
+    margin-top: 24px;
+  }
+}
+
+.charts-wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 24px;
+
+  @media (max-width: $normal) {
+    flex-wrap: wrap;
+  }
+}
+
+.chart {
+  width: 23.5%;
+
+  @media (max-width: $normal) {
+    width: 48%;
+
+    &:nth-last-child(2n) {
+      margin-bottom: 24px;
+    }
+  }
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin-bottom: 24px;
+  }
+}
diff --git a/src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.ts b/src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.ts
new file mode 100644
index 0000000..98e01f8
--- /dev/null
+++ b/src/app/modules/dashboard/containers/dashboard-page/dashboard-page.component.ts
@@ -0,0 +1,90 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { Observable } from 'rxjs';
+
+import { DashboardService } from '../../services';
+import {
+  DailyLineChartData,
+  PerformanceChartData,
+  ProjectStatData,
+  RevenueChartData,
+  ServerChartData,
+  SupportRequestData,
+  VisitsChartData,
+} from '../../models';
+import {SharedService} from '../../../../shared/services/shared.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { VisitsChartComponent } from '../../components/visits-chart/visits-chart.component';
+import { PerformanceChartComponent } from '../../components/performance-chart/performance-chart.component';
+import { ServerChartComponent } from '../../components/server-chart/server-chart.component';
+import { RevenueChartComponent } from '../../components/revenue-chart/revenue-chart.component';
+import { DailyLineChartComponent } from '../../components/daily-line-chart/daily-line-chart.component';
+import { ProjectStatChartComponent } from '../../components/project-stat-chart/project-stat-chart.component';
+import { SupportRequestsComponent } from '../../components/support-requests/support-requests.component';
+
+@Component({
+    selector: 'app-dashboard-page',
+    templateUrl: './dashboard-page.component.html',
+    styleUrls: ['./dashboard-page.component.scss'],
+    standalone: true,
+    imports: [
+      CommonModule,
+      MatCardModule,
+      MatToolbarModule,
+      MatTabsModule,
+      MatIconModule,
+      MatButtonModule,
+      VisitsChartComponent,
+      PerformanceChartComponent,
+      ServerChartComponent,
+      RevenueChartComponent,
+      DailyLineChartComponent,
+      ProjectStatChartComponent,
+      SupportRequestsComponent,
+    ]
+})
+export class DashboardPageComponent implements OnInit {
+  public dailyLineChartData$: Observable<DailyLineChartData>;
+  public performanceChartData$: Observable<PerformanceChartData>;
+  public revenueChartData$: Observable<RevenueChartData>;
+  public serverChartData$: Observable<ServerChartData>;
+  public supportRequestData$: Observable<SupportRequestData[]>;
+  public visitsChartData$: Observable<VisitsChartData>;
+  public projectsStatsData$: Observable<ProjectStatData>;
+  public todayDate: Date = new Date();
+  public currentTheme = '';
+  public currentMode = '';
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    private service: DashboardService,
+    private sharedService: SharedService
+  ) {
+    this.dailyLineChartData$ = this.service.loadDailyLineChartData();
+    this.performanceChartData$ = this.service.loadPerformanceChartData();
+    this.revenueChartData$ = this.service.loadRevenueChartData();
+    this.serverChartData$ = this.service.loadServerChartData();
+    this.supportRequestData$ = this.service.loadSupportRequestData();
+    this.visitsChartData$ = this.service.loadVisitsChartData();
+    this.projectsStatsData$ = this.service.loadProjectsStatsData();
+  }
+
+  public ngOnInit(): void {
+    this.sharedService.currentTheme
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((theme: string) => {
+        this.currentTheme = theme;
+      });
+
+    this.sharedService.currentMode
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((mode: string) => {
+        this.currentMode = mode;
+      });
+  }
+}
diff --git a/src/app/modules/dashboard/containers/index.ts b/src/app/modules/dashboard/containers/index.ts
new file mode 100644
index 0000000..5ada6c2
--- /dev/null
+++ b/src/app/modules/dashboard/containers/index.ts
@@ -0,0 +1 @@
+export * from './dashboard-page/dashboard-page.component';
diff --git a/src/app/modules/dashboard/dashboard.routes.ts b/src/app/modules/dashboard/dashboard.routes.ts
new file mode 100644
index 0000000..352995a
--- /dev/null
+++ b/src/app/modules/dashboard/dashboard.routes.ts
@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { DashboardPageComponent } from './containers';
+
+export const DASHBOARD_ROUTES: Routes = [
+  {
+    path: '',
+    component: DashboardPageComponent,
+  },
+];
diff --git a/src/app/modules/dashboard/models/daily-line-chart-data.ts b/src/app/modules/dashboard/models/daily-line-chart-data.ts
new file mode 100644
index 0000000..baba09c
--- /dev/null
+++ b/src/app/modules/dashboard/models/daily-line-chart-data.ts
@@ -0,0 +1,12 @@
+export interface DailyLineChartData {
+  dailyData: TimeData;
+  weeklyData: TimeData;
+  monthlyData: TimeData;
+  labels: string[];
+}
+
+export interface TimeData {
+  mobile: number[];
+  desktop: number[];
+  tablet: number[];
+}
diff --git a/src/app/modules/dashboard/models/index.ts b/src/app/modules/dashboard/models/index.ts
new file mode 100644
index 0000000..179317f
--- /dev/null
+++ b/src/app/modules/dashboard/models/index.ts
@@ -0,0 +1,7 @@
+export * from './daily-line-chart-data';
+export * from './performance-chart-data';
+export * from './revenue-chart-data';
+export * from './server-chart-data';
+export * from './support-request-data';
+export * from './visits-chart-data';
+export * from './project-stat-data';
diff --git a/src/app/modules/dashboard/models/performance-chart-data.ts b/src/app/modules/dashboard/models/performance-chart-data.ts
new file mode 100644
index 0000000..269ce7a
--- /dev/null
+++ b/src/app/modules/dashboard/models/performance-chart-data.ts
@@ -0,0 +1,4 @@
+export interface PerformanceChartData {
+  integration: number;
+  sdk: number;
+}
diff --git a/src/app/modules/dashboard/models/project-stat-data.ts b/src/app/modules/dashboard/models/project-stat-data.ts
new file mode 100644
index 0000000..7c076d1
--- /dev/null
+++ b/src/app/modules/dashboard/models/project-stat-data.ts
@@ -0,0 +1,32 @@
+export interface ProjectStatData {
+  lightBlue: {
+    daily: ProjectTimeData,
+    week: ProjectTimeData,
+    monthly: ProjectTimeData
+  },
+  singApp: {
+    daily: ProjectTimeData,
+    week: ProjectTimeData,
+    monthly: ProjectTimeData
+  },
+  rns: {
+    daily: ProjectTimeData,
+    week: ProjectTimeData,
+    monthly: ProjectTimeData
+  }
+}
+
+export interface ProjectTimeData {
+  name: string;
+  users: string;
+  percent: number,
+  registrations: string,
+  bounce: string,
+  views: string,
+  series: [
+    {
+      name: string,
+      data: number[]
+    }
+  ]
+}
diff --git a/src/app/modules/dashboard/models/revenue-chart-data.ts b/src/app/modules/dashboard/models/revenue-chart-data.ts
new file mode 100644
index 0000000..2b8d6b7
--- /dev/null
+++ b/src/app/modules/dashboard/models/revenue-chart-data.ts
@@ -0,0 +1,6 @@
+export interface RevenueChartData {
+  groupA: number;
+  groupB: number;
+  groupC: number;
+  groupD: number;
+}
diff --git a/src/app/modules/dashboard/models/server-chart-data.ts b/src/app/modules/dashboard/models/server-chart-data.ts
new file mode 100644
index 0000000..e6ba21a
--- /dev/null
+++ b/src/app/modules/dashboard/models/server-chart-data.ts
@@ -0,0 +1,9 @@
+export interface ServerChartData {
+  firstServerChartData: number[],
+  firstDataTitle: string,
+  secondServerChartData: number[],
+  secondDataTitle: string,
+  thirdServerChartData: number[],
+  thirdDataTitle: string,
+  dates: string[]
+}
diff --git a/src/app/modules/dashboard/models/support-request-data.ts b/src/app/modules/dashboard/models/support-request-data.ts
new file mode 100644
index 0000000..84cbe1e
--- /dev/null
+++ b/src/app/modules/dashboard/models/support-request-data.ts
@@ -0,0 +1,10 @@
+export interface SupportRequestData {
+  id: string,
+  customer: string,
+  office: string,
+  nettoWeight: string,
+  price: string,
+  dateOfPurchase: string,
+  dateOfDelivery: string,
+  status: string
+}
diff --git a/src/app/modules/dashboard/models/visits-chart-data.ts b/src/app/modules/dashboard/models/visits-chart-data.ts
new file mode 100644
index 0000000..1bce0d7
--- /dev/null
+++ b/src/app/modules/dashboard/models/visits-chart-data.ts
@@ -0,0 +1,7 @@
+export interface VisitsChartData {
+  data: number[];
+  registration: string;
+  signOut: string;
+  rate: string;
+  all: string;
+}
diff --git a/src/app/modules/dashboard/services/dashboard.service.ts b/src/app/modules/dashboard/services/dashboard.service.ts
new file mode 100644
index 0000000..9853f41
--- /dev/null
+++ b/src/app/modules/dashboard/services/dashboard.service.ts
@@ -0,0 +1,280 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import {
+  DailyLineChartData,
+  PerformanceChartData,
+  ProjectStatData,
+  RevenueChartData,
+  ServerChartData,
+  SupportRequestData,
+  VisitsChartData
+} from '../models';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DashboardService {
+  public loadDailyLineChartData(): Observable<DailyLineChartData> {
+    return of({
+      dailyData: {
+        mobile: [16, 46, 45, 12, 37, 16, 41, 13, 25, 22, 30],
+        desktop: [42, 60, 49, 50, 13, 15, 16, 57, 56, 27, 43],
+        tablet: [35, 25, 36, 30, 67, 35, 64, 12, 25, 36, 39]
+      },
+      weeklyData: {
+        mobile: [23, 31, 45, 10, 37, 67, 43, 63, 15, 22, 30],
+        desktop: [67, 60, 49, 50, 25, 15, 16, 57, 13, 27, 43],
+        tablet: [56, 48, 23, 48, 13, 35, 64, 12, 45, 36, 39]
+      },
+      monthlyData: {
+        mobile: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
+        desktop: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
+        tablet: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
+      },
+      labels: [
+        '01/01/2003',
+        '02/01/2003',
+        '03/01/2003',
+        '04/01/2003',
+        '05/01/2003',
+        '06/01/2003',
+        '07/01/2003',
+        '08/01/2003',
+        '09/01/2003',
+        '10/01/2003',
+        '11/01/2003'
+      ]
+    });
+  }
+
+  public loadPerformanceChartData(): Observable<PerformanceChartData> {
+    return of({
+      integration: 40,
+      sdk: 75
+    });
+  }
+
+  public loadRevenueChartData(): Observable<RevenueChartData> {
+    return of({
+      groupA: Math.round(Math.random() * 100),
+      groupB: Math.round(Math.random() * 100),
+      groupC: Math.round(Math.random() * 100),
+      groupD: Math.round(Math.random() * 100)
+    });
+  }
+
+  public loadServerChartData(): Observable<ServerChartData> {
+    return of({
+      firstServerChartData: [
+        18107.85,
+        49128.0,
+        38122.9,
+        28965.5,
+        49340.7
+      ],
+      firstDataTitle: '45% / 78°С / 78 Ghz',
+      secondServerChartData: [
+        18423.7,
+        48423.5,
+        28514.3,
+        48481.85,
+        18487.7
+      ],
+      secondDataTitle: '57% / 45°С / 54 Ghz',
+      thirdServerChartData: [
+        17114.25,
+        27126.6,
+        47116.95,
+        37203.7,
+        17233.75
+      ],
+      thirdDataTitle: '87% / 55°С / 76 Ghz',
+      dates: [
+        '13 Nov 2017',
+        '14 Nov 2017',
+        '15 Nov 2017',
+        '16 Nov 2017',
+        '17 Nov 2017'
+      ]
+    });
+  }
+
+  public loadSupportRequestData(): Observable<SupportRequestData[]> {
+    return of ([
+      {
+        id: '770776',
+        customer: 'Cherokee Ware',
+        office: 'Belgium',
+        nettoWeight: '0.8 kg',
+        price: '$987',
+        dateOfPurchase: '11 Jan 2019',
+        dateOfDelivery: '14 Jan 2019',
+        status: 'delivered'
+      },
+
+
+      {
+        id: '2002346',
+        customer: 'Cherokee Ware',
+        office: 'Belgium',
+        nettoWeight: '0.8 kg',
+        price: '$987',
+        dateOfPurchase: '11 Jan 2019',
+        dateOfDelivery: '14 Jan 2019',
+        status: 'delivered'
+      },
+      {
+        id: '775915',
+        customer: 'Victoria Cantrel',
+        office: 'Croatia',
+        nettoWeight: '1.4 kg',
+        price: '$23.87',
+        dateOfPurchase: '12 Jan 2019',
+        dateOfDelivery: '-',
+        status: 'pending'
+      },
+      {
+        id: '131609',
+        customer: 'Constance Clayton',
+        office: 'Peru',
+        nettoWeight: '105 kg',
+        price: '$1.876',
+        dateOfPurchase: '09 Jan 2019',
+        dateOfDelivery: '-',
+        status: 'canseled'
+      },
+      {
+        id: '741622',
+        customer: 'Constance Clayton',
+        office: 'Peru',
+        nettoWeight: '105 kg',
+        price: '$1.876',
+        dateOfPurchase: '06 Jan 2019',
+        dateOfDelivery: '19 Jan 2019',
+        status: 'progress'
+      }
+    ]);
+  }
+
+  public loadVisitsChartData(): Observable<VisitsChartData> {
+    return of({
+      data: [7, 6, 3, 8, 10, 6, 7, 8, 3, 0, 7, 6, 2, 7, 4, 7, 3, 6, 2, 3, 8, 1, 0, 4, 9],
+      registration: '45',
+      signOut: '147',
+      rate: '351',
+      all: '543'
+    });
+  }
+
+  public loadProjectsStatsData(): Observable<ProjectStatData> {
+    return of({
+      lightBlue: {
+        daily: {
+          name: 'Light Blue',
+          users: '199',
+          percent: -3.7,
+          registrations: '33',
+          bounce: '3.25%',
+          views: '330',
+          series: [
+            { name: 'Net Profit', data: [210, 95, 155, 200, 61, 135, 63] }
+          ]
+        },
+        week: {
+          name: 'Light Blue',
+          users: '1293',
+          percent: 3.1,
+          registrations: '233',
+          bounce: '3.1%',
+          views: '2310',
+          series: [
+            { name: 'Net Profit', data: [65, 195, 135, 95, 72, 155, 200] }
+          ]
+        },
+        monthly: {
+          name: 'Light Blue',
+          users: '9991',
+          percent: -3.1,
+          registrations: '725',
+          bounce: '3.3%',
+          views: '12301',
+          series: [
+            { name: 'Net Profit', data: [152, 61, 142, 183, 74, 195, 210] }
+          ]
+        }
+      },
+      singApp: {
+        daily: {
+          name: 'Sing App',
+          users: '121',
+          percent: -3.2,
+          registrations: '15',
+          bounce: '3.01%',
+          views: '302',
+          series: [
+            { name: 'Net Profit', data: [135, 65, 192, 215, 85, 154, 75] }
+          ]
+        },
+        week: {
+          name: 'Sing App',
+          users: '956',
+          percent: 2.9,
+          registrations: '295',
+          bounce: '3.15%',
+          views: '2401',
+          series: [
+            { name: 'Net Profit', data: [78, 145, 186, 64, 78, 135, 224] }
+          ]
+        },
+        monthly: {
+          name: 'Sing App',
+          users: '9982',
+          percent: -3.23,
+          registrations: '712',
+          bounce: '3.2%',
+          views: '12256',
+          series: [
+            { name: 'Net Profit', data: [59, 75, 153, 194, 87, 205, 215] }
+          ]
+        }
+      },
+      rns: {
+        daily: {
+          name: 'RNS',
+          users: '175',
+          percent: -3.1,
+          registrations: '31',
+          bounce: '3.23%',
+          views: '301',
+          series: [
+            { name: 'Net Profit', data: [205, 81, 175, 192, 52, 199, 206] }
+          ]
+        },
+        week: {
+          name: 'RNS',
+          users: '1395',
+          percent: 3.21,
+          registrations: '235',
+          bounce: '3.23%',
+          views: '2215',
+          series: [
+            { name: 'Net Profit', data: [51, 186, 159, 201, 72, 86, 212] }
+          ]
+        },
+        monthly: {
+          name: 'RNS',
+          users: '9125',
+          percent: -3.3,
+          registrations: '756',
+          bounce: '3.1%',
+          views: '12025',
+          series: [
+            { name: 'Net Profit', data: [161, 84, 151, 201, 45, 196, 57] }
+          ]
+        }
+      }
+    });
+  }
+}
diff --git a/src/app/modules/dashboard/services/index.ts b/src/app/modules/dashboard/services/index.ts
new file mode 100644
index 0000000..bd611b2
--- /dev/null
+++ b/src/app/modules/dashboard/services/index.ts
@@ -0,0 +1 @@
+export * from './dashboard.service';
diff --git a/src/app/modules/documentation/documentation-routing.module.spec.ts b/src/app/modules/documentation/documentation-routing.module.spec.ts
new file mode 100644
index 0000000..158df42
--- /dev/null
+++ b/src/app/modules/documentation/documentation-routing.module.spec.ts
@@ -0,0 +1,14 @@
+import { DOCUMENTATION_ROUTES } from './documentation-routing.module';
+
+describe('DOCUMENTATION_ROUTES', () => {
+  it('keeps legacy redirect for quick start URL', () => {
+    const containerRoute = DOCUMENTATION_ROUTES.find((route) => route.path === '');
+    const childRoutes = containerRoute?.children ?? [];
+    const quickStartRedirect = childRoutes.find(
+      (route) => route.path === 'quick start',
+    );
+
+    expect(quickStartRedirect?.redirectTo).toBe('quick-start');
+    expect(quickStartRedirect?.pathMatch).toBe('full');
+  });
+});
diff --git a/src/app/modules/documentation/documentation-routing.module.ts b/src/app/modules/documentation/documentation-routing.module.ts
new file mode 100644
index 0000000..0214d21
--- /dev/null
+++ b/src/app/modules/documentation/documentation-routing.module.ts
@@ -0,0 +1,77 @@
+import {RouterModule, Routes} from '@angular/router';
+import {NgModule} from '@angular/core';
+import {DocumentationPageComponent} from './pages/documentation-page/documentation-page.component';
+import {LibsPageComponent} from './pages/libs-page/libs-page.component';
+import {OverviewPageComponent} from './pages/overview-page/overview-page.component';
+import {LicencesPageComponent} from './pages/licences-page/licences-page.component';
+import {QuickStartPageComponent} from './pages/quick-start-page/quick-start-page.component';
+import {StructurePageComponent} from './pages/structure-page/structure-page.component';
+import {ChartsPageComponent} from './pages/charts-page/charts-page.component';
+import {FormsPageComponent} from './pages/forms-page/forms-page.component';
+import {TablesPageComponent} from './pages/tables-page/tables-page.component';
+import {MapsPageComponent} from './pages/maps-page/maps-page.component';
+import {UiPageComponent} from './pages/ui-page/ui-page.component';
+
+export const DOCUMENTATION_ROUTES: Routes = [
+  {
+    path: '',
+    component: DocumentationPageComponent,
+    children: [
+      {
+        path: 'libs',
+        component: LibsPageComponent
+      },
+      {
+        path: 'structure',
+        component: StructurePageComponent
+      },
+      {
+        path: 'overview',
+        component: OverviewPageComponent
+      },
+      {
+        path: 'licences',
+        component: LicencesPageComponent
+      },
+      {
+        path: 'quick-start',
+        component: QuickStartPageComponent
+      },
+      {
+        path: 'quick start',
+        redirectTo: 'quick-start',
+        pathMatch: 'full'
+      },
+      {
+        path: 'charts',
+        component: ChartsPageComponent
+      },
+      {
+        path: 'forms',
+        component: FormsPageComponent
+      },
+      {
+        path: 'ui',
+        component: UiPageComponent
+      },
+      {
+        path: 'maps',
+        component: MapsPageComponent
+      },
+      {
+        path: 'tables',
+        component: TablesPageComponent
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(DOCUMENTATION_ROUTES)
+  ],
+  exports: [RouterModule]
+})
+
+export class DocumentationRoutingModule {
+}
diff --git a/src/app/modules/documentation/documentation.module.ts b/src/app/modules/documentation/documentation.module.ts
new file mode 100644
index 0000000..688786f
--- /dev/null
+++ b/src/app/modules/documentation/documentation.module.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DocumentationPageComponent } from './pages/documentation-page/documentation-page.component';
+import { DocumentationRoutingModule } from './documentation-routing.module';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatListModule} from '@angular/material/list';
+import {MatTreeModule} from '@angular/material/tree';
+import { LibsPageComponent } from './pages/libs-page/libs-page.component';
+import {MatCardModule} from '@angular/material/card';
+import { OverviewPageComponent } from './pages/overview-page/overview-page.component';
+import { LicencesPageComponent } from './pages/licences-page/licences-page.component';
+import { QuickStartPageComponent } from './pages/quick-start-page/quick-start-page.component';
+import { StructurePageComponent } from './pages/structure-page/structure-page.component';
+import { ChartsPageComponent } from './pages/charts-page/charts-page.component';
+import { FormsPageComponent } from './pages/forms-page/forms-page.component';
+import { UiPageComponent } from './pages/ui-page/ui-page.component';
+import { MapsPageComponent } from './pages/maps-page/maps-page.component';
+import { TablesPageComponent } from './pages/tables-page/tables-page.component';
+import { BreadcrumbComponent } from '../../shared/ui-elements';
+import { FooterComponent } from '../../shared/footer/footer.component';
+
+
+
+@NgModule({
+  declarations: [DocumentationPageComponent, LibsPageComponent, OverviewPageComponent, LicencesPageComponent, QuickStartPageComponent, StructurePageComponent, ChartsPageComponent, FormsPageComponent, UiPageComponent, MapsPageComponent, TablesPageComponent],
+  imports: [
+    CommonModule,
+    DocumentationRoutingModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatButtonModule,
+    MatSidenavModule,
+    MatListModule,
+    MatTreeModule,
+    MatCardModule,
+    BreadcrumbComponent,
+    FooterComponent
+  ]
+})
+export class DocumentationModule { }
diff --git a/src/app/modules/documentation/pages/charts-page/charts-page.component.html b/src/app/modules/documentation/pages/charts-page/charts-page.component.html
new file mode 100644
index 0000000..9394f37
--- /dev/null
+++ b/src/app/modules/documentation/pages/charts-page/charts-page.component.html
@@ -0,0 +1,53 @@
+<div class="charts-page">
+  <app-breadcrumb [path]="routes.CHARTS"></app-breadcrumb>
+
+  <mat-card class="chart-card">
+    <mat-card-title>
+      <p>Line Chart</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Line Chart built with Apache ECharts <a class="link" href="https://echarts.apache.org/examples/en/index.html#chart-type-line">Line Chart.</a></p>
+
+      <p>Installing via npm:</p>
+
+      <pre class="code"><code>npm install echarts ngx-echarts --save</code></pre>
+
+      <a class="link" href="https://echarts.apache.org/examples/en/index.html#chart-type-line">Example</a>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="chart-card">
+    <mat-card-title>
+      <p>Bar Chart</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Bar Chart built with Apache ECharts <a class="link" href="https://echarts.apache.org/examples/en/index.html#chart-type-bar">Bar Chart.</a></p>
+
+      <p>Installing via npm:</p>
+
+      <pre class="code"><code>npm install echarts ngx-echarts --save</code></pre>
+
+      <a class="link" href="https://echarts.apache.org/examples/en/index.html#chart-type-bar">Example</a>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="chart-card">
+    <mat-card-title>
+      <p>Pie Chart</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Pie Chart built with Apache ECharts <a class="link" href="https://echarts.apache.org/examples/en/index.html#chart-type-pie">Pie Chart.</a></p>
+
+      <p>Installing via npm:</p>
+
+      <pre class="code"><code>npm install echarts ngx-echarts --save</code></pre>
+
+      <a class="link" href="https://echarts.apache.org/examples/en/index.html#chart-type-pie">Example</a>
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
diff --git a/src/app/modules/documentation/pages/charts-page/charts-page.component.scss b/src/app/modules/documentation/pages/charts-page/charts-page.component.scss
new file mode 100644
index 0000000..74f96e1
--- /dev/null
+++ b/src/app/modules/documentation/pages/charts-page/charts-page.component.scss
@@ -0,0 +1,22 @@
+@use 'src/app/styles/colors' as *;
+
+.charts-page {
+  padding: 24px;
+}
+
+.chart-card {
+  margin-top: 24px;
+}
+
+.link {
+  color: $blue;
+  text-decoration: none;
+}
+
+.code {
+  background-color: $blue-white;
+  height: auto;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 8px 16px;
+}
diff --git a/src/app/modules/documentation/pages/charts-page/charts-page.component.ts b/src/app/modules/documentation/pages/charts-page/charts-page.component.ts
new file mode 100644
index 0000000..5b387fc
--- /dev/null
+++ b/src/app/modules/documentation/pages/charts-page/charts-page.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './charts-page.component.html',
+  styleUrls: ['./charts-page.component.scss']
+})
+export class ChartsPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/documentation/pages/documentation-page/documentation-page.component.html b/src/app/modules/documentation/pages/documentation-page/documentation-page.component.html
new file mode 100644
index 0000000..41a6631
--- /dev/null
+++ b/src/app/modules/documentation/pages/documentation-page/documentation-page.component.html
@@ -0,0 +1,110 @@
+<mat-toolbar class="header" color="primary">
+
+  <div class="header-title-wrapper">
+    <button mat-mini-fab color="primary" class="header-button">
+      <mat-icon *ngIf="!isShowSidebar" (click)="sidenav.toggle(true)">menu</mat-icon>
+      <mat-icon *ngIf="isShowSidebar" (click)="sidenav.toggle(false)">arrow_back</mat-icon>
+    </button>
+    <h6 class="header-title">Angular Material Admin Full Documentation</h6>
+  </div>
+
+  <div class="header-toolbar-wrapper">
+    <div class="header-icons-wrapper">
+      <a href="https://twitter.com/flatlogic">
+        <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-twitter"></mat-icon>
+      </a>
+      <a href="https://dribbble.com/flatlogic">
+        <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-dribbble"></mat-icon>
+      </a>
+      <a href="https://www.facebook.com/flatlogic">
+        <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-facebook"></mat-icon>
+      </a>
+      <a href="https://instagram.com/flatlogiccom/">
+        <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-instagram"></mat-icon>
+      </a>
+      <a href="https://www.linkedin.com/company/flatlogic/">
+        <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-linkedin"></mat-icon>
+      </a>
+      <a href="https://github.com/flatlogic">
+        <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-github"></mat-icon>
+      </a>
+    </div>
+
+    <div>
+      <a href="https://demo.flatlogic.com/angular-material-admin-full">
+        <button class="header-button" mat-flat-button color="primary">live preview</button>
+      </a>
+      <a href="https://flatlogic.com/templates/angular">
+       <button class="header-button" mat-stroked-button color="warn">buy</button>
+      </a>
+    </div>
+  </div>
+</mat-toolbar>
+
+<mat-sidenav-container class="documentation-sidebar-wrapper">
+  <mat-sidenav
+    #sidenav
+    mode="side"
+    [(opened)]="isShowSidebar"
+    class="documentation-sidebar"
+    [mode]="mobileQuery.matches ? 'over' : 'side'"
+    [fixedInViewport]="mobileQuery.matches"
+  >
+    <mat-list>
+      <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+        <mat-tree-node class="mat-node" *matTreeNodeDef="let node" matTreeNodePadding routerLink="{{node.route}}" routerLinkActive="{{node.active}}">
+          <div class="documentation-sidebar-item-wrapper">
+            <div class="circle"></div>
+            <p class="documentation-sidebar-text">{{node.name}}</p>
+          </div>
+        </mat-tree-node>
+
+        <mat-tree-node *matTreeNodeDef="let node; when: hasChild" class="mat-node">
+          <div *ngIf="node.name === 'Getting Started'" class="documentation-sidebar-node-wrapper" matTreeNodeToggle>
+            <div class="documentation-sidebar-item-title">
+              <mat-icon class="documentation-sidebar-icon">inbox</mat-icon>
+              <p class="documentation-sidebar-text">{{node.name}}</p>
+            </div>
+
+            <mat-icon
+              class="documentation-sidebar-icon"
+              [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+            </mat-icon>
+          </div>
+
+          <div *ngIf="node.name === 'Components'" class="documentation-sidebar-node-wrapper" matTreeNodeToggle>
+            <div class="documentation-sidebar-item-title">
+              <mat-icon class="documentation-sidebar-icon">filter_none</mat-icon>
+              <p class="documentation-sidebar-text">{{node.name}}</p>
+            </div>
+
+            <mat-icon
+              class="documentation-sidebar-icon"
+              [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+            </mat-icon>
+          </div>
+        </mat-tree-node>
+      </mat-tree>
+
+      <mat-list-item class="documentation-sidebar-item-wrapper" routerLink="{{routes.STRUCTURE}}" routerLinkActive="active">
+        <mat-icon class="documentation-sidebar-icon">article</mat-icon> <p class="documentation-sidebar-text">Structure</p>
+      </mat-list-item>
+
+      <mat-list-item class="documentation-sidebar-item-wrapper" routerLink="{{routes.LIBS}}" routerLinkActive="active">
+        <mat-icon class="documentation-sidebar-icon">local_library</mat-icon> <p class="documentation-sidebar-text">Libs</p>
+      </mat-list-item>
+
+      <a href="https://flatlogic.com/templates/angular">
+        <mat-list-item class="documentation-sidebar-item-wrapper">
+          <mat-icon class="documentation-sidebar-icon">shopping_cart</mat-icon> <p class="documentation-sidebar-text">Purchase</p>
+        </mat-list-item>
+      </a>
+    </mat-list>
+  </mat-sidenav>
+
+  <mat-sidenav-content class="layout-content">
+    <router-outlet></router-outlet>
+  </mat-sidenav-content>
+</mat-sidenav-container>
diff --git a/src/app/modules/documentation/pages/documentation-page/documentation-page.component.scss b/src/app/modules/documentation/pages/documentation-page/documentation-page.component.scss
new file mode 100644
index 0000000..540396c
--- /dev/null
+++ b/src/app/modules/documentation/pages/documentation-page/documentation-page.component.scss
@@ -0,0 +1,220 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/sidebar" as sidebar;
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (max-width: $normal) {
+    flex-wrap: wrap;
+    height: 100px;
+  }
+
+  @media (max-width: $small) {
+    height: 150px;
+  }
+}
+
+.header-title-wrapper {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: $small) {
+    overflow: hidden;
+  }
+}
+
+.header-button {
+  box-shadow: none;
+  text-transform: uppercase;
+}
+
+.header-title {
+  margin-left: 24px;
+
+  @media (max-width: $small) {
+    text-overflow: ellipsis;
+  }
+}
+
+.header-toolbar-wrapper {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: $normal) {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.header-icons-wrapper {
+  display: flex;
+}
+
+a {
+  color: white;
+  text-decoration: none;
+}
+
+.header-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: $black-04;
+  }
+}
+
+.documentation-sidebar-wrapper {
+  height: calc(100vh - 64px);
+}
+
+.documentation-sidebar {
+  height:calc(100vh - 64px);
+  width: 240px;
+
+  @media(max-width: $normal) {
+    margin-top: 64px;
+  }
+}
+
+.mat-node {
+  padding-left: 16px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: sidebar.$sidebar-background-color-hover;
+  }
+}
+
+.documentation-sidebar-node-wrapper {
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: sidebar.$sidebar-background-color-hover;
+  }
+
+  &>.documentation-sidebar-icon {
+    margin-right: 0;
+  }
+}
+
+.documentation-sidebar-item-wrapper {
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: sidebar.$sidebar-background-color-hover;
+  }
+
+  &>.documentation-sidebar-icon {
+    margin-right: 0;
+  }
+}
+
+.documentation-sidebar-item-title {
+  display: flex;
+  align-items: center;
+}
+
+.documentation-sidebar-icon {
+  color: $light-grey;
+  margin-right: 24px;
+}
+
+.documentation-sidebar-text {
+  font-size: $fs-small;
+  font-weight: $fw-lighter;
+  margin: 0;
+}
+
+.mat-tree-node {
+  outline: none;
+}
+
+.rotateUp {
+  transform: rotate(180deg);
+  transition: transform .3s linear;
+}
+
+.rotateDown {
+  transform: rotate(0deg);
+  transition: transform .3s linear;
+}
+
+.circle {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: sidebar.$sidebar-circle-color;
+  margin-right: 20px;
+}
+
+.mat-mdc-list-base {
+  & .mat-mdc-list-item, .mat-mdc-menu-trigger {
+    color: sidebar.$sidebar-title-color;
+
+    &.active {
+      background-color: sidebar.$sidebar-background-color-active;
+      color: sidebar.$sidebar-font-color-active;
+
+      & .mat-icon {
+        color: $blue;
+      }
+    }
+
+    &:hover {
+      background-color: sidebar.$sidebar-background-color-hover;
+    }
+  }
+}
+
+mat-tree-node {
+  & p {
+    color: sidebar.$sidebar-font-color;
+  }
+
+  &.active {
+    background-color: sidebar.$sidebar-background-color-active;
+
+    & p {
+      color: sidebar.$sidebar-font-color-active;
+    }
+
+    & div.circle{
+      background-color: $blue;
+    }
+  }
+
+  &[aria-expanded="true"] {
+    & mat-icon:first-child {
+      color: $blue;
+    }
+
+    & p {
+      color: sidebar.$sidebar-font-color-active;
+    }
+  }
+}
diff --git a/src/app/modules/documentation/pages/documentation-page/documentation-page.component.ts b/src/app/modules/documentation/pages/documentation-page/documentation-page.component.ts
new file mode 100644
index 0000000..0cd2786
--- /dev/null
+++ b/src/app/modules/documentation/pages/documentation-page/documentation-page.component.ts
@@ -0,0 +1,94 @@
+import {ChangeDetectorRef, Component, OnDestroy, ViewChild} from '@angular/core';
+import {MediaMatcher} from '@angular/cdk/layout';
+import {routes} from '../../../../consts';
+import {FlatTreeControl} from '@angular/cdk/tree';
+import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
+import {MatSidenav} from '@angular/material/sidenav';
+
+interface DocumentationNode {
+  name: string;
+  route?: string;
+  active?: string;
+  children?: DocumentationNode[];
+}
+
+interface DocumentationFlatNode {
+  expandable: boolean;
+  name: string;
+  level: number;
+  route?: string;
+  active?: string;
+}
+
+const TREE_DATA: DocumentationNode[] = [
+  {
+    name: 'Getting Started',
+    children: [
+      {name: 'Overview', route: routes.OVERVIEW, active: 'active'},
+      {name: 'Licences', route: routes.LICENCES, active: 'active'},
+      {name: 'Quick start', route: routes.QUICK_START, active: 'active'},
+    ]
+  },
+  {
+    name: 'Components',
+    children: [
+      {name: 'Charts', route: routes.CHARTS, active: 'active'},
+      {name: 'Forms', route: routes.FORMS, active: 'active'},
+      {name: 'UI', route: routes.UI, active: 'active'},
+      {name: 'Maps', route: routes.MAPS, active: 'active'},
+      {name: 'Tables', route: routes.TABLES, active: 'active'},
+    ]
+  }
+];
+
+@Component({
+    standalone: false,
+  templateUrl: './documentation-page.component.html',
+  styleUrls: ['./documentation-page.component.scss']
+})
+export class DocumentationPageComponent implements OnDestroy {
+  @ViewChild('sidenav') sidenav!: MatSidenav;
+  public isShowSidebar: boolean;
+  public mobileQuery: MediaQueryList;
+  public routes: typeof routes = routes;
+  private mobileQueryListener: () => void;
+
+
+  private _transformer = (node: DocumentationNode, level: number): DocumentationFlatNode => {
+    return {
+      expandable: !!node.children && node.children.length > 0,
+      name: node.name,
+      level,
+      route: node.route,
+      active: node.active
+    } as DocumentationFlatNode;
+  };
+
+  treeControl = new FlatTreeControl<DocumentationFlatNode>(
+    node => node.level, node => node.expandable);
+
+  treeFlattener = new MatTreeFlattener<DocumentationNode, DocumentationFlatNode>(
+    this._transformer, node => node.level, node => node.expandable, node => node.children);
+
+  dataSource = new MatTreeFlatDataSource<DocumentationNode, DocumentationFlatNode>(this.treeControl, this.treeFlattener);
+
+  hasChild = (_: number, node: DocumentationFlatNode): boolean => node.expandable;
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private media: MediaMatcher
+  ) {
+    this.dataSource.data = TREE_DATA;
+    this.mobileQuery = media.matchMedia('(max-width: 1024px)');
+    this.mobileQueryListener = () => changeDetectorRef.detectChanges();
+    this.mobileQuery.addListener(this.mobileQueryListener);
+
+    this.isShowSidebar = !this.mobileQuery.matches;
+  }
+
+  public ngOnDestroy(): void {
+    this.mobileQuery.removeListener(this.mobileQueryListener);
+
+    this.sidenav.close();
+  }
+}
diff --git a/src/app/modules/documentation/pages/forms-page/forms-page.component.html b/src/app/modules/documentation/pages/forms-page/forms-page.component.html
new file mode 100644
index 0000000..330c890
--- /dev/null
+++ b/src/app/modules/documentation/pages/forms-page/forms-page.component.html
@@ -0,0 +1,64 @@
+<div class="forms-page">
+  <app-breadcrumb [path]="routes.FORMS"></app-breadcrumb>
+
+  <mat-card class="forms-card">
+    <mat-card-title>
+      <p>Form Field</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>
+        <code class="code">{{'<'}}mat-form-field{{'>'}}</code> is a component used to wrap several Angular Material components and
+        apply common Text field styles such as the underline, floating label, and hint messages. In this document,
+        "form field" refers to the wrapper component <code class="code">{{'<'}}mat-form-field{{'>'}}</code> and "form field
+        control" refers to the component that the <code class="code">{{'<'}}mat-form-field{{'>'}}</code> is wrapping (e.g. the
+        input, textarea, select, etc.) The following Angular Material components are designed to work inside a
+        <code class="code">{{'<'}}mat-form-field{{'>'}}</code>:
+      </p>
+
+      <ul>
+        <li><code class="code">{{'<'}}input matNativeControl{{'>'}} & {{'<'}}textarea matNativeControl{{'>'}}</code></li>
+        <li><code class="code">{{'<'}}select matNativeControl{{'>'}}</code></li>
+        <li><code class="code">{{'<'}}mat-select{{'>'}}</code></li>
+        <li><code class="code">{{'<'}}mat-chip-list{{'>'}}</code></li>
+      </ul>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="forms-card">
+    <mat-card-title>
+      <p>Form field appearance variants</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>
+        The <code class="code">{{'<'}}mat-form-field{{'>'}}</code> supports 4 different appearance variants which can be set via
+        the appearance input. The legacy appearance is the default style that the
+        <code class="code">{{'<'}}mat-form-field{{'>'}}</code> has traditionally had. It shows the input box with an underline
+        underneath it. The standard appearance is a slightly updated version of the legacy appearance that has
+        spacing that is more consistent with the fill and outline appearances. The fill appearance displays the form
+        field with a filled background box in addition to the underline. Finally the outline appearance shows the
+        form field with a border all the way around, not just an underline.
+        <br><br>
+
+        There are a couple differences to be aware of between the legacy appearance and the newer standard,
+        fill, and outline appearances. The <code class="code">matPrefix</code>  and <code class="code">matSuffix</code>  elements are center
+        aligned by default for the newer appearances. The Material Design spec shows this as being the standard way
+        to align prefix and suffix icons in the newer appearance variants. We do not recommend using text prefix and
+        suffixes in the new variants because the label and input do not have the same alignment. It is therefore
+        impossible to align the prefix or suffix in a way that looks good when compared with both the label and input text.
+        <br><br>
+
+        The second important difference is that the standard, fill, and outline appearances do not promote
+        placeholders to labels. For the legacy appearance specifying <code class="code">{{'<'}}input placeholder="placeholder"{{'>'}}</code> will result
+        in a floating label being added to the mat-form-field. For the newer variants it will just add a normal
+        placeholder to the input. If you want a floating label, add a <code class="code">{{'<'}}mat-label{{'>'}}</code> to the mat-form-field.
+        <br><br>
+
+        <a class="link" href="https://material.angular.io/components/form-field/overview">More</a>
+      </p>
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
diff --git a/src/app/modules/documentation/pages/forms-page/forms-page.component.scss b/src/app/modules/documentation/pages/forms-page/forms-page.component.scss
new file mode 100644
index 0000000..00ec170
--- /dev/null
+++ b/src/app/modules/documentation/pages/forms-page/forms-page.component.scss
@@ -0,0 +1,30 @@
+@use 'src/app/styles/colors' as *;
+
+.forms-page {
+  padding: 24px;
+}
+
+.forms-card {
+  margin-top: 24px;
+
+  & p {
+    line-height: 33px;
+  }
+}
+
+li {
+  line-height: 33px;
+}
+
+.code {
+  background-color: $blue-white;
+  height: auto;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 8px 16px;
+}
+
+.link {
+  color: $blue;
+  text-decoration: none;
+}
diff --git a/src/app/modules/documentation/pages/forms-page/forms-page.component.ts b/src/app/modules/documentation/pages/forms-page/forms-page.component.ts
new file mode 100644
index 0000000..89d3e13
--- /dev/null
+++ b/src/app/modules/documentation/pages/forms-page/forms-page.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './forms-page.component.html',
+  styleUrls: ['./forms-page.component.scss']
+})
+export class FormsPageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/documentation/pages/libs-page/libs-page.component.html b/src/app/modules/documentation/pages/libs-page/libs-page.component.html
new file mode 100644
index 0000000..78e4b68
--- /dev/null
+++ b/src/app/modules/documentation/pages/libs-page/libs-page.component.html
@@ -0,0 +1,31 @@
+<div class="page-wrapper">
+  <app-breadcrumb [path]="routes.LIBS"></app-breadcrumb>
+
+  <mat-card class="card">
+    <mat-card-title>
+      <p>Libs</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Icons libs:</p>
+      <ul>
+        <li>Font Awesome icons</li>
+        <li>Material UI icons</li>
+      </ul>
+
+      <p>Charts libs:</p>
+      <ul>
+        <li>Apache ECharts (via ngx-echarts)</li>
+      </ul>
+
+      <p>Other libs:</p>
+      <ul>
+        <li>ngx-toastr</li>
+        <li>@ngmodule/material-carousel</li>
+        <li>ngx-smart-popover</li>
+      </ul>
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
diff --git a/src/app/modules/documentation/pages/libs-page/libs-page.component.scss b/src/app/modules/documentation/pages/libs-page/libs-page.component.scss
new file mode 100644
index 0000000..1145e16
--- /dev/null
+++ b/src/app/modules/documentation/pages/libs-page/libs-page.component.scss
@@ -0,0 +1,7 @@
+.page-wrapper {
+  padding: 24px;
+}
+
+.card {
+  margin-top: 24px;
+}
diff --git a/src/app/modules/documentation/pages/libs-page/libs-page.component.ts b/src/app/modules/documentation/pages/libs-page/libs-page.component.ts
new file mode 100644
index 0000000..2d2fe3d
--- /dev/null
+++ b/src/app/modules/documentation/pages/libs-page/libs-page.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './libs-page.component.html',
+  styleUrls: ['./libs-page.component.scss']
+})
+export class LibsPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/documentation/pages/licences-page/licences-page.component.html b/src/app/modules/documentation/pages/licences-page/licences-page.component.html
new file mode 100644
index 0000000..ed2f00e
--- /dev/null
+++ b/src/app/modules/documentation/pages/licences-page/licences-page.component.html
@@ -0,0 +1,44 @@
+<div class="page-wrapper">
+  <app-breadcrumb [path]="routes.LICENCES"></app-breadcrumb>
+
+  <mat-card class="card">
+    <mat-card-content>
+      <mat-card-title>
+        <p>Application License</p>
+      </mat-card-title>
+
+      <p class="text">
+        A license grants you a non-exclusive and non-transferable right to use and incorporate the
+        item in your personal or commercial projects. If your end product including an item is going
+        to be free to the end user then a Single License is what you need. An Extended License is
+        required if the end user must pay to use the end product.
+      </p>
+
+      <mat-card-title>
+        <p>Single Application License</p>
+      </mat-card-title>
+
+      <p class="text">
+        Your use of the item is restricted to a single application. You may use the item in work
+        which you are creating for your own purposes or for your client. You must not incorporate the
+        item in a work which is created for redistribution or resale by you or your client. The item
+        may not be redistributed or resold. You may not charge users for using your application.
+      </p>
+
+      <mat-card-title>
+        <p>Extended Application License</p>
+      </mat-card-title>
+
+      <p class="text">
+        Your use of the item is restricted to a single application. You may use the item in work which
+        you are creating for your own purposes or for your clients. You are licensed to use the Item
+        to create one single End Product for yourself or for one client (a “single application”), and
+        the End Product may be Sold and users may be charged for using it (e.g. you are building SAAS
+        application).
+      </p>
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
+
diff --git a/src/app/modules/documentation/pages/licences-page/licences-page.component.scss b/src/app/modules/documentation/pages/licences-page/licences-page.component.scss
new file mode 100644
index 0000000..94262d5
--- /dev/null
+++ b/src/app/modules/documentation/pages/licences-page/licences-page.component.scss
@@ -0,0 +1,13 @@
+@use './src/app/styles/font' as *;
+
+.page-wrapper {
+  padding: 24px;
+}
+
+.card {
+  margin-top: 24px;
+}
+
+.text {
+  margin-bottom: 32px;
+}
diff --git a/src/app/modules/documentation/pages/licences-page/licences-page.component.ts b/src/app/modules/documentation/pages/licences-page/licences-page.component.ts
new file mode 100644
index 0000000..12d638a
--- /dev/null
+++ b/src/app/modules/documentation/pages/licences-page/licences-page.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './licences-page.component.html',
+  styleUrls: ['./licences-page.component.scss']
+})
+export class LicencesPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/documentation/pages/maps-page/maps-page.component.html b/src/app/modules/documentation/pages/maps-page/maps-page.component.html
new file mode 100644
index 0000000..c4bc2e8
--- /dev/null
+++ b/src/app/modules/documentation/pages/maps-page/maps-page.component.html
@@ -0,0 +1,44 @@
+<div class="maps-page">
+  <app-breadcrumb [path]="routes.MAPS"></app-breadcrumb>
+
+  <mat-card class="maps-card">
+    <mat-card-title>
+      <p>Google Maps</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Run the following command first:</p>
+
+      <code class="code">npm install @angular/google-maps</code>
+
+      <p>Example:</p>
+
+      <code class="code">
+        {{'<'}}!-- this creates a google map on the page with the given lat/lng from --{{'>'}}
+        <br>
+        {{'<'}}!-- the component as the initial center of the map: --{{'>'}}
+        <br>
+        {{'<'}}google-map [center]="center" [zoom]="zoom"{{'>'}}
+        <br>
+          {{'<'}}map-marker [position]="center" [options]="{{'{'}} draggable: true {{'}'}}"{{'>'}}{{'<'}}/map-marker{{'>'}}
+        <br>
+        {{'<'}}/google-map{{'>'}}
+      </code>
+
+      <a class="link" href="https://material.angular.io/components/google-maps/overview">More</a>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="maps-card">
+    <mat-card-title>
+      <p>Vector Maps</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Vector Maps build with Amcharts</p>
+      <a class="link" href="https://www.amcharts.com/demos/map-with-pulsating-bullets/">More</a>
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
diff --git a/src/app/modules/documentation/pages/maps-page/maps-page.component.scss b/src/app/modules/documentation/pages/maps-page/maps-page.component.scss
new file mode 100644
index 0000000..92ae7ca
--- /dev/null
+++ b/src/app/modules/documentation/pages/maps-page/maps-page.component.scss
@@ -0,0 +1,23 @@
+@use 'src/app/styles/colors' as *;
+
+.maps-page {
+  padding: 24px;
+}
+
+.maps-card {
+  margin-top: 24px;
+}
+
+.link {
+  color: $blue;
+  text-decoration: none;
+}
+
+.code {
+  background-color: $blue-white;
+  line-height: 33px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 8px 16px;
+  display: block;
+}
diff --git a/src/app/modules/documentation/pages/maps-page/maps-page.component.ts b/src/app/modules/documentation/pages/maps-page/maps-page.component.ts
new file mode 100644
index 0000000..f1bd132
--- /dev/null
+++ b/src/app/modules/documentation/pages/maps-page/maps-page.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './maps-page.component.html',
+  styleUrls: ['./maps-page.component.scss']
+})
+export class MapsPageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/documentation/pages/overview-page/overview-page.component.html b/src/app/modules/documentation/pages/overview-page/overview-page.component.html
new file mode 100644
index 0000000..6851d67
--- /dev/null
+++ b/src/app/modules/documentation/pages/overview-page/overview-page.component.html
@@ -0,0 +1,42 @@
+<div class="page-wrapper">
+  <app-breadcrumb [path]="routes.OVERVIEW"></app-breadcrumb>
+
+  <mat-card class="card">
+    <mat-card-title>
+      <p>Angular Material Admin</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>
+        Angular Material Admin Full is an admin dashboard template built with Angular 9.
+        You can use Angular Material Admin Full to build any type of web applications like SAAS, CMS,
+        financial dashboards, project management tools, etc.
+      </p>
+
+      <mat-card-title>
+        <p>Features</p>
+      </mat-card-title>
+
+      <ul>
+        <li>Hundreds of Pages</li>
+        <li>Fully Responsive</li>
+        <li>Angular 9</li>
+        <li>Chart Library</li>
+        <li>Theme Change Support</li>
+        <li>E-Commerce Section</li>
+        <li>2 State Sidebar</li>
+        <li>Fully Documented Codebase</li>
+        <li>And even more coming soon!</li>
+      </ul>
+
+      <mat-card-title>
+        <p>Support forum</p>
+      </mat-card-title>
+
+        <p class="lead">For any additional information please go to our <a href="https://flatlogic.com/forum" target="_blank" rel="noopener noreferrer">Support forum</a> and raise your questions or feedback provide there. We highly appreciate your participation!</p>
+
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
diff --git a/src/app/modules/documentation/pages/overview-page/overview-page.component.scss b/src/app/modules/documentation/pages/overview-page/overview-page.component.scss
new file mode 100644
index 0000000..1145e16
--- /dev/null
+++ b/src/app/modules/documentation/pages/overview-page/overview-page.component.scss
@@ -0,0 +1,7 @@
+.page-wrapper {
+  padding: 24px;
+}
+
+.card {
+  margin-top: 24px;
+}
diff --git a/src/app/modules/documentation/pages/overview-page/overview-page.component.ts b/src/app/modules/documentation/pages/overview-page/overview-page.component.ts
new file mode 100644
index 0000000..95d55ce
--- /dev/null
+++ b/src/app/modules/documentation/pages/overview-page/overview-page.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './overview-page.component.html',
+  styleUrls: ['./overview-page.component.scss']
+})
+export class OverviewPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/documentation/pages/quick-start-page/quick-start-page.component.html b/src/app/modules/documentation/pages/quick-start-page/quick-start-page.component.html
new file mode 100644
index 0000000..7aab2fb
--- /dev/null
+++ b/src/app/modules/documentation/pages/quick-start-page/quick-start-page.component.html
@@ -0,0 +1,40 @@
+<div class="page-wrapper">
+  <app-breadcrumb [path]="routes.QUICK_START"></app-breadcrumb>
+
+  <mat-card class="card">
+    <mat-card-content>
+      <mat-card-title>
+        <p>Requirements:</p>
+      </mat-card-title>
+
+      <ul>
+        <li>Mac OS X, Windows, or Linux</li>
+        <li>Node.js v6.5 or newer</li>
+        <li>Angular 9</li>
+      </ul>
+
+      <mat-card-title>
+        <p>Quick Start:</p>
+      </mat-card-title>
+
+      <ul>
+        <li>Run npm install</li>
+        <li>Run npm start</li>
+      </ul>
+
+      <mat-card-title>
+        <p>There are also other npm tasks:</p>
+      </mat-card-title>
+
+      <ul>
+        <li>npm build : if you need just to build the app</li>
+        <li>npm lint : to check the source code for syntax errors and potential issues</li>
+      </ul>
+
+      <p>For more instruction please refer to Angular Material Admin Full readme.md.</p>
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
+
diff --git a/src/app/modules/documentation/pages/quick-start-page/quick-start-page.component.scss b/src/app/modules/documentation/pages/quick-start-page/quick-start-page.component.scss
new file mode 100644
index 0000000..1145e16
--- /dev/null
+++ b/src/app/modules/documentation/pages/quick-start-page/quick-start-page.component.scss
@@ -0,0 +1,7 @@
+.page-wrapper {
+  padding: 24px;
+}
+
+.card {
+  margin-top: 24px;
+}
diff --git a/src/app/modules/documentation/pages/quick-start-page/quick-start-page.component.ts b/src/app/modules/documentation/pages/quick-start-page/quick-start-page.component.ts
new file mode 100644
index 0000000..b1d8844
--- /dev/null
+++ b/src/app/modules/documentation/pages/quick-start-page/quick-start-page.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './quick-start-page.component.html',
+  styleUrls: ['./quick-start-page.component.scss']
+})
+export class QuickStartPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/documentation/pages/structure-page/structure-page.component.html b/src/app/modules/documentation/pages/structure-page/structure-page.component.html
new file mode 100644
index 0000000..3dd982e
--- /dev/null
+++ b/src/app/modules/documentation/pages/structure-page/structure-page.component.html
@@ -0,0 +1,26 @@
+<div class="structure-page">
+  <app-breadcrumb [path]="routes.STRUCTURE"></app-breadcrumb>
+
+  <mat-card class="structure-card">
+    <mat-card-title>
+      <p>Structure</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Angular Material Admin Full package goes with the following folders:</p>
+
+      <ul>
+        <li>src/app - configuration files;</li>
+        <li>assets - images;</li>
+        <li>dist - built project;</li>
+        <li>
+          node_modules - various JS libraries used in Angular Material Admin Full. As of we are using npm
+          here it's strongly recommended to add/update/remove libraries only via npm;
+        </li>
+      </ul>
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
+
diff --git a/src/app/modules/documentation/pages/structure-page/structure-page.component.scss b/src/app/modules/documentation/pages/structure-page/structure-page.component.scss
new file mode 100644
index 0000000..3bd7593
--- /dev/null
+++ b/src/app/modules/documentation/pages/structure-page/structure-page.component.scss
@@ -0,0 +1,7 @@
+.structure-page {
+  padding: 24px;
+}
+
+.structure-card {
+  margin-top: 24px;
+}
diff --git a/src/app/modules/documentation/pages/structure-page/structure-page.component.ts b/src/app/modules/documentation/pages/structure-page/structure-page.component.ts
new file mode 100644
index 0000000..dd1c24e
--- /dev/null
+++ b/src/app/modules/documentation/pages/structure-page/structure-page.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { routes } from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './structure-page.component.html',
+  styleUrls: ['./structure-page.component.scss']
+})
+export class StructurePageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/documentation/pages/tables-page/tables-page.component.html b/src/app/modules/documentation/pages/tables-page/tables-page.component.html
new file mode 100644
index 0000000..2f3d492
--- /dev/null
+++ b/src/app/modules/documentation/pages/tables-page/tables-page.component.html
@@ -0,0 +1,25 @@
+<div class="tables-page">
+  <app-breadcrumb [path]="routes.TABLES"></app-breadcrumb>
+
+  <mat-card class="tables-card">
+    <mat-card-title>
+      <p>Table</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>
+        The mat-table provides a Material Design styled data-table that can be used to display rows of data.
+        <br>
+
+        This table builds on the foundation of the CDK data-table and uses a similar interface for its data input
+        and template, except that its element and attribute selectors will be prefixed with mat- instead of cdk-.
+        For more information on the interface and a detailed look at how the table is implemented, see the guide
+        covering the CDK data-table.
+      </p>
+
+      <a class="link" href="https://material.angular.io/components/table/overview">More</a>
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
diff --git a/src/app/modules/documentation/pages/tables-page/tables-page.component.scss b/src/app/modules/documentation/pages/tables-page/tables-page.component.scss
new file mode 100644
index 0000000..f6bdea0
--- /dev/null
+++ b/src/app/modules/documentation/pages/tables-page/tables-page.component.scss
@@ -0,0 +1,14 @@
+@use "src/app/styles/colors" as *;
+
+.tables-page {
+  padding: 24px;
+}
+
+.tables-card {
+  margin-top: 24px;
+}
+
+.link {
+  color: $blue;
+  text-decoration: none;
+}
diff --git a/src/app/modules/documentation/pages/tables-page/tables-page.component.ts b/src/app/modules/documentation/pages/tables-page/tables-page.component.ts
new file mode 100644
index 0000000..38b1af7
--- /dev/null
+++ b/src/app/modules/documentation/pages/tables-page/tables-page.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './tables-page.component.html',
+  styleUrls: ['./tables-page.component.scss']
+})
+export class TablesPageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/documentation/pages/ui-page/ui-page.component.html b/src/app/modules/documentation/pages/ui-page/ui-page.component.html
new file mode 100644
index 0000000..4c68913
--- /dev/null
+++ b/src/app/modules/documentation/pages/ui-page/ui-page.component.html
@@ -0,0 +1,82 @@
+<div class="ui-page">
+  <app-breadcrumb [path]="routes.UI"></app-breadcrumb>
+
+  <mat-card class="ui-card">
+    <mat-card-title>
+      <p>Notifications</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Notification build with <a class="link" href="https://www.npmjs.com/package/ngx-toastr">ngx-toastr</a></p>
+
+      <p>Install:</p>
+
+      <code class="code">
+        npm install ngx-toastr --save
+        <br>
+        npm install @angular/animations --save
+      </code>
+    </mat-card-content>
+
+    <a class="link" href="https://www.npmjs.com/package/ngx-toastr">More</a>
+  </mat-card>
+
+
+  <mat-card class="ui-card">
+    <mat-card-title>
+      <p>Icons</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Font Awesome Icons
+        <br>
+        Font Awesome is iconic font originally designed for Angular (Font Awesome works great with all frameworks).
+        It contains 439 icons in pictographic font form.
+        <br>
+        Read more at <a class="link" href="https://fontawesome.com/">Font Awesome website</a>.
+        <br>
+        <br>
+        Material Icons
+        <br>
+        200 icons in pictographic font form provided by <a class="link" href="https://material.io/resources/icons/?style=baseline">Material</a>.
+      </p>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="ui-card">
+    <mat-card-title>
+      <p>Popover</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Popover build with ngx-smart-popover</p>
+      <p>Install:</p>
+
+      <code class="code">npm install ngx-smart-popover --save</code>
+
+      <a class="link" href="https://www.npmjs.com/package/ngx-smart-popover">More</a>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card class="ui-card">
+    <mat-card-title>
+      <p>Carousel</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <p>Carousel build with @ngmodule/material-carousel</p>
+      <p>
+        This package is a carousel component for Angular using Material Design. Until v1 is reached, breaking changes may be introduced.
+      </p>
+      <p>
+        Install:
+      </p>
+
+      <code class="code">npm install --save @ngmodule/material-carousel</code>
+
+      <a class="link" href="https://www.npmjs.com/package/@ngmodule/material-carousel">More</a>
+    </mat-card-content>
+  </mat-card>
+
+  <app-footer></app-footer>
+</div>
diff --git a/src/app/modules/documentation/pages/ui-page/ui-page.component.scss b/src/app/modules/documentation/pages/ui-page/ui-page.component.scss
new file mode 100644
index 0000000..fc49afe
--- /dev/null
+++ b/src/app/modules/documentation/pages/ui-page/ui-page.component.scss
@@ -0,0 +1,23 @@
+@use 'src/app/styles/colors' as *;
+
+.ui-page {
+  padding: 24px;
+}
+
+.ui-card {
+  margin-top: 24px;
+}
+
+.link {
+  color: $blue;
+  text-decoration: none;
+}
+
+.code {
+  background-color: $blue-white;
+  line-height: 33px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 8px 16px;
+  display: block;
+}
diff --git a/src/app/modules/documentation/pages/ui-page/ui-page.component.ts b/src/app/modules/documentation/pages/ui-page/ui-page.component.ts
new file mode 100644
index 0000000..57627cf
--- /dev/null
+++ b/src/app/modules/documentation/pages/ui-page/ui-page.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    standalone: false,
+  templateUrl: './ui-page.component.html',
+  styleUrls: ['./ui-page.component.scss']
+})
+export class UiPageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/e-commerce/components/index.ts b/src/app/modules/e-commerce/components/index.ts
new file mode 100644
index 0000000..b0a5a4b
--- /dev/null
+++ b/src/app/modules/e-commerce/components/index.ts
@@ -0,0 +1,2 @@
+export * from './product-card/product-card.component';
+export * from './product-edit-form/product-edit-form.component';
diff --git a/src/app/modules/e-commerce/components/product-card/product-card.component.html b/src/app/modules/e-commerce/components/product-card/product-card.component.html
new file mode 100644
index 0000000..6c73ccb
--- /dev/null
+++ b/src/app/modules/e-commerce/components/product-card/product-card.component.html
@@ -0,0 +1,25 @@
+<mat-card appearance="outlined" class="product-card" [routerLink]="[routes.PRODUCT, product.id]">
+  <div class="product-media">
+    <img src="{{product.image}}" alt="{{product.title}}" class="product-img">
+    <span
+      class="product-status"
+      [ngClass]="product.status === 'Sale' ? 'sale' : 'new'"
+    >
+      {{product.status}}
+    </span>
+  </div>
+
+  <div class="product-title-wrapper">
+    <p class="product-title">{{product.title}}</p>
+    <p class="product-subtitle">{{product.subtitle}}</p>
+  </div>
+
+  <div class="product-price-wrapper">
+    <p class="product-price">{{product.price}}</p>
+
+    <div class="product-pop-wrapper">
+      <p class="product-pop">{{product.rating}}</p>
+      <mat-icon color="accent" class="pop-icon">star</mat-icon>
+    </div>
+  </div>
+</mat-card>
diff --git a/src/app/modules/e-commerce/components/product-card/product-card.component.scss b/src/app/modules/e-commerce/components/product-card/product-card.component.scss
new file mode 100644
index 0000000..d1dfd20
--- /dev/null
+++ b/src/app/modules/e-commerce/components/product-card/product-card.component.scss
@@ -0,0 +1,97 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/colors" as *;
+
+.product-card {
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.product-media {
+  position: relative;
+  width: 100%;
+}
+
+.product-img {
+  width: 100%;
+  display: block;
+  min-height: 250px;
+  object-fit: cover;
+}
+
+.product-status {
+  border-radius: 14px;
+  padding: 6px 12px;
+  position: absolute;
+  z-index: 1;
+  top: 16px;
+  left: 16px;
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $white;
+  margin: 0;
+  line-height: 1;
+}
+
+.sale {
+  background-color: $pink;
+}
+
+.new {
+  background-color: $green;
+}
+
+.product-title-wrapper {
+  padding: 16px 16px 0;
+}
+
+.product-title {
+  font-size: $fs-medium;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  margin: 0 0 8px;
+}
+
+.product-subtitle {
+  font-size: $fs-small;
+  font-weight: $fw-lighter;
+  color: $grey;
+  margin: 0;
+}
+
+.product-price-wrapper {
+  padding: 14px 16px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.product-price {
+  font-size: $fs-normal;
+  font-weight: $fw-bold;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.product-pop-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.product-pop {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $yellow;
+  margin: 0;
+}
+
+.pop-icon {
+  padding: 0;
+  font-size: 16px;
+  width: 19px;
+  height: 19px;
+  margin-left: 4px;
+}
diff --git a/src/app/modules/e-commerce/components/product-card/product-card.component.ts b/src/app/modules/e-commerce/components/product-card/product-card.component.ts
new file mode 100644
index 0000000..908e5c9
--- /dev/null
+++ b/src/app/modules/e-commerce/components/product-card/product-card.component.ts
@@ -0,0 +1,14 @@
+import {Component, Input} from '@angular/core';
+import {ProductCard} from '../../models';
+import {routes} from '../../../../consts';
+
+@Component({
+    selector: 'app-product-card',
+    templateUrl: './product-card.component.html',
+    styleUrls: ['./product-card.component.scss'],
+    standalone: false
+})
+export class ProductCardComponent {
+  @Input() product: ProductCard;
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.html b/src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.html
new file mode 100644
index 0000000..bca5a59
--- /dev/null
+++ b/src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.html
@@ -0,0 +1,94 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <p>New product</p>
+  </mat-card-title>
+
+  <mat-card-content>
+
+    <div class="input-wrapper">
+      <p class="input-title">Image</p>
+      <mat-form-field class="input-field">
+        <mat-select [(value)]="selected" [ngClass]="selected">
+          <mat-option>None</mat-option>
+          <mat-option value="option">Option 1</mat-option>
+          <mat-option value="option2">Option 2</mat-option>
+          <mat-option value="option3">Option 3</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Title</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="title" class="input-text">
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Subtitle</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="subtitle" class="input-text">
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Price</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="price" class="input-text" type="number">
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Discount</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="discount" class="input-text" type="number">
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Description 1</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="description1" class="input-text">
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Description 2</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="description2" class="input-text">
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Code</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="code" class="input-text" type="number">
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Hashtag</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="hashtag" class="input-text">
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Technology</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="technology" class="input-text">
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Rating</p>
+      <mat-form-field appearance="outline" class="input-field">
+        <input matInput [formControl]="rating" class="input-text" type="number">
+      </mat-form-field>
+    </div>
+
+    <button mat-flat-button color="success" (click)="save()">save</button>
+    <button mat-flat-button color="defailt" routerLink="{{router.MANAGEMENT}}">back</button>
+
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.scss b/src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.scss
new file mode 100644
index 0000000..2ef9cc8
--- /dev/null
+++ b/src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.scss
@@ -0,0 +1,82 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+
+.card {
+  margin-top: 24px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+}
+
+.input-wrapper {
+  width: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0 8px 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.input-title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+  margin: 0 16px 0 0;
+}
+
+.input-field {
+  width: 500px;
+  font-size: $fs-xs;
+
+  @media (max-width: $small) {
+    width: 140px;
+  }
+}
+
+.input-text {
+  font-size: $fs-regular;
+}
+
+/*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+.mat-form-field-wrapper {
+  margin: 0;
+  padding: 0;
+}
+
+/*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+.mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 20px 0 16px 0;
+  border: none;
+}
+
+.input-select {
+  border: none;
+  width: 500px;
+}
+
+.input-panel {
+  width: auto;
+  height: auto;
+}
+
+.input-img {
+  width: 200px;
+  height: auto;
+}
+
+button.mat-mdc-unelevated-button + button.mat-flat-button {
+  margin-left: 8px;
+}
+
+//.option1{
+//  background:  url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg")  center / contain no-repeat;
+//  white-space: nowrap;
+//  display:inline
+//}
+//
+//
+//.option2{
+//  background:  url("src/assets/e-commerce/products/1.jpg")  center / contain no-repeat;
+//  white-space: nowrap;
+//  display:inline;
+//}
diff --git a/src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.ts b/src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.ts
new file mode 100644
index 0000000..33cecaf
--- /dev/null
+++ b/src/app/modules/e-commerce/components/product-edit-form/product-edit-form.component.ts
@@ -0,0 +1,143 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {routes} from '../../../../consts';
+import {ProductDetails} from '../../models/product-details';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+
+type ProductEditFormControls = {
+  image: FormControl<string>;
+  title: FormControl<string>;
+  subtitle: FormControl<string>;
+  price: FormControl<string>;
+  discount: FormControl<string>;
+  description1: FormControl<string>;
+  description2: FormControl<string>;
+  code: FormControl<string>;
+  hashtag: FormControl<string>;
+  technology: FormControl<string | string[]>;
+  rating: FormControl<string>;
+  status: FormControl<string>;
+};
+
+@Component({
+    selector: 'app-product-edit-form',
+    templateUrl: './product-edit-form.component.html',
+    styleUrls: ['./product-edit-form.component.scss'],
+    standalone: false
+})
+export class ProductEditFormComponent implements OnInit {
+  @Input() product: ProductDetails;
+  @Output() editProduct: EventEmitter<ProductDetails> = new EventEmitter<ProductDetails>();
+  public router: typeof routes = routes;
+  public form: FormGroup<ProductEditFormControls>;
+
+  selected = 'option';
+
+  constructor() {
+    this.form = new FormGroup<ProductEditFormControls>({
+      image: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      title: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      subtitle: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      price: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      discount: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      description1: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      description2: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      code: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      hashtag: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      technology: new FormControl<string | string[]>('', { nonNullable: true, validators: [Validators.required] }),
+      rating: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+      status: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+    });
+  }
+
+  ngOnInit(): void {
+    if (this.product) {
+      this.image.setValue('option');
+      this.title.setValue(this.product.title);
+      this.subtitle.setValue(this.product.subtitle);
+      this.price.setValue(this.product.price);
+      this.discount.setValue(this.product.discount);
+      this.description1.setValue(this.product.description1);
+      this.description2.setValue(this.product.description2);
+      this.code.setValue(this.product.code);
+      this.hashtag.setValue(this.product.hashtag);
+      this.technology.setValue(this.product.technology);
+      this.rating.setValue(this.product.rating);
+      this.status.setValue(this.product.status);
+    }
+  }
+
+  public save(): void {
+    const values = this.form.getRawValue();
+    this.editProduct.emit({
+      id: this.id,
+      image: values.image,
+      title: values.title,
+      subtitle: values.subtitle,
+      price: values.price,
+      discount: values.discount,
+      description1: values.description1,
+      description2: values.description2,
+      code: values.code,
+      hashtag: values.hashtag,
+      technology: Array.isArray(values.technology)
+        ? values.technology
+        : values.technology
+        ? [values.technology]
+        : [],
+      rating: values.rating,
+      status: values.status,
+    })
+  }
+
+  get id() {
+    return this.product && this.product.id ? this.product.id : '77';
+  }
+
+  get image(): FormControl<string> {
+    return this.form.controls.image;
+  }
+
+  get title(): FormControl<string> {
+    return this.form.controls.title;
+  }
+
+  get subtitle(): FormControl<string> {
+    return this.form.controls.subtitle;
+  }
+
+  get price(): FormControl<string> {
+    return this.form.controls.price;
+  }
+
+  get discount(): FormControl<string> {
+    return this.form.controls.discount;
+  }
+
+  get description1(): FormControl<string> {
+    return this.form.controls.description1;
+  }
+
+  get description2(): FormControl<string> {
+    return this.form.controls.description2;
+  }
+
+  get code(): FormControl<string> {
+    return this.form.controls.code;
+  }
+
+  get hashtag(): FormControl<string> {
+    return this.form.controls.hashtag;
+  }
+
+  get technology(): FormControl<string | string[]> {
+    return this.form.controls.technology;
+  }
+
+  get rating(): FormControl<string> {
+    return this.form.controls.rating;
+  }
+
+  get status(): FormControl<string> {
+    return this.form.controls.status;
+  }
+}
diff --git a/src/app/modules/e-commerce/containers/index.ts b/src/app/modules/e-commerce/containers/index.ts
new file mode 100644
index 0000000..8058e66
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/index.ts
@@ -0,0 +1,5 @@
+export * from './management-page/management-page.component';
+export * from './product-page/product-page.component';
+export * from './products-page/products-page.component';
+export * from './product-edit-page/product-edit-page.component';
+export * from './product-create-page/product-create-page.component';
diff --git a/src/app/modules/e-commerce/containers/management-page/management-page.component.html b/src/app/modules/e-commerce/containers/management-page/management-page.component.html
new file mode 100644
index 0000000..bfbf687
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/management-page/management-page.component.html
@@ -0,0 +1,115 @@
+
+<app-breadcrumb [path]="routes.MANAGEMENT"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="card">
+  <mat-card-title class="card-title-wrapper">
+    <p class="card-title">Products <span class="card-subtitle">{{(products$ | async).length}} total</span></p>
+
+    <mat-form-field appearance="outline" class="search-field mat-form-field-should-float">
+      <mat-label>Search</mat-label>
+      <input matInput (keyup)="applyFilter($event)" #input class="search-title">
+      <mat-icon matPrefix class="search-icon">search</mat-icon>
+    </mat-form-field>
+  </mat-card-title>
+
+
+  <mat-card-content class="card-content">
+    <button mat-flat-button color="success" [routerLink]="routes.PRODUCT_CREATE">create product</button>
+
+    <div class="table-title-wrapper">
+      <p class="table-title">Products</p>
+      <mat-icon class="table-title-icon" matTooltip="Filter list" matTooltipPosition="above">filter_list</mat-icon>
+    </div>
+
+    <div class="table-wrapper">
+      <table mat-table [dataSource]="dataSource" matSort class="table">
+
+        <!-- Checkbox Column -->
+        <ng-container matColumnDef="select">
+          <th mat-header-cell *matHeaderCellDef>
+            <mat-checkbox
+              (change)="$event ? masterToggle() : null"
+              [checked]="selection.hasValue() && isAllSelected()"
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+              [aria-label]="checkboxLabel()"
+              color="warn"
+            ></mat-checkbox>
+          </th>
+          <td mat-cell *matCellDef="let row">
+            <mat-checkbox
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+              [aria-label]="checkboxLabel(row)"
+              color="warn"
+            ></mat-checkbox>
+          </td>
+        </ng-container>
+
+        <!-- Id Column -->
+        <ng-container matColumnDef="id">
+          <th mat-header-cell *matHeaderCellDef class="table-header product-id" mat-sort-header> ID </th>
+          <td mat-cell *matCellDef="let element" class="table-body product-id"> {{element.id}} </td>
+        </ng-container>
+
+        <!-- Image Column -->
+        <ng-container matColumnDef="image">
+          <th mat-header-cell *matHeaderCellDef class="table-header"> Image </th>
+          <td mat-cell *matCellDef="let element" class="table-body">
+            <img class="image" src="{{element.imageSmall}}" alt="logo">
+          </td>
+        </ng-container>
+
+        <!-- Title Column -->
+        <ng-container matColumnDef="title">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> Title </th>
+          <td mat-cell *matCellDef="let element" class="table-body product-title" [routerLink]="[routes.PRODUCT, element.id]"> {{element.title}} </td>
+        </ng-container>
+
+        <!-- Subtitle Column -->
+        <ng-container matColumnDef="subtitle">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> Subtitle </th>
+          <td mat-cell *matCellDef="let element" class="table-body"> {{element.subtitle}} </td>
+        </ng-container>
+
+        <!-- Price Column -->
+        <ng-container matColumnDef="price">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> Price </th>
+          <td mat-cell *matCellDef="let element" class="table-body">{{element.price}}</td>
+        </ng-container>
+
+        <!-- Rating Column -->
+        <ng-container matColumnDef="rating">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> Rating </th>
+          <td mat-cell *matCellDef="let element" class="table-body">
+            <div class="rating-wrapper">
+              <p class="product-pop">{{element.rating}}</p>
+              <mat-icon color="accent" class="product-pop-icon">star</mat-icon>
+            </div>
+          </td>
+        </ng-container>
+
+        <!-- Action Column -->
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef class="table-header"> Actions </th>
+          <td mat-cell *matCellDef="let element" class="table-body">
+            <div class="table-buttons-wrapper">
+              <button mat-flat-button color="success" class="table-button" [routerLink]="[routes.PRODUCT_EDIT, element.id]">edit</button>
+              <button mat-flat-button color="warn" class="table-button" (click)="openDeleteModal(element.id)">delete</button>
+            </div>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+        <!-- Row shown when there is no matching data. -->
+        <tr class="mat-row" *matNoDataRow>
+          <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+        </tr>
+      </table>
+    </div>
+
+    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/e-commerce/containers/management-page/management-page.component.scss b/src/app/modules/e-commerce/containers/management-page/management-page.component.scss
new file mode 100644
index 0000000..aa60c40
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/management-page/management-page.component.scss
@@ -0,0 +1,159 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+
+.card {
+  margin-top: 24px;
+}
+
+.card-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.card-title {
+  margin: -30px 0 0 0;
+
+  @media (max-width: $small) {
+    margin: 0;
+  }
+}
+
+.card-subtitle {
+  font-size: 12px;
+  font-weight: $fw-lighter;
+  color: $grey;
+}
+
+.search-field {
+  font-size: 14px;
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin: 24px 0;
+  }
+}
+
+.search-title {
+  font-size: 16px;
+}
+
+.search-icon {
+  color: $light-grey;
+  margin: 0 8px 0 0;
+  padding: 0;
+}
+
+.card-content {
+  margin-top: -30px;
+}
+
+.table-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 24px 0;
+}
+
+.table-title {
+  font-size: $fs-regular;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.table-title-icon {
+  color: $dark-grey;
+  cursor: pointer;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+
+  &:hover {
+    background-color: $black-04;
+  }
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  box-shadow: none;
+  width: 100%;
+  background: transparent;
+}
+
+.table-header {
+  font-size: 15px;
+  font-weight: $fw-normal;
+  color: $dark-grey;
+  padding: 14px 38px 14px 24px;
+}
+
+.table-body {
+  font-size: 15px;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  padding: 14px 38px 14px 24px;
+}
+
+.table-buttons-wrapper {
+  display: flex;
+}
+
+.table-button {
+  min-height: 30px;
+  height: 30px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: 0;
+  &:first-child {
+    margin-right: 1rem;
+  }
+}
+
+.image {
+  width: 100px;
+}
+
+.product-title {
+  color: $blue;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.rating-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.product-id {
+  padding: 14px;
+}
+
+.product-pop {
+  font-size: $fs-normal;
+  color: $yellow;
+  margin: 0;
+}
+
+.product-pop-icon {
+  font-size: 23px;
+  padding: 0;
+}
diff --git a/src/app/modules/e-commerce/containers/management-page/management-page.component.ts b/src/app/modules/e-commerce/containers/management-page/management-page.component.ts
new file mode 100644
index 0000000..14ea529
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/management-page/management-page.component.ts
@@ -0,0 +1,98 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {routes} from '../../../../consts';
+import {MatTableDataSource} from '@angular/material/table';
+import {SelectionModel} from '@angular/cdk/collections';
+import {MatSort} from '@angular/material/sort';
+import {MatPaginator} from '@angular/material/paginator';
+import {ProductService} from '../../services';
+import {Observable} from 'rxjs';
+import {ProductDetails} from '../../models/product-details';
+import {take} from 'rxjs';
+import { DeletePopupComponent } from '../../../../shared/popups/delete-popup/delete-popup.component';
+import { MatDialog } from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-management-page',
+    templateUrl: './management-page.component.html',
+    styleUrls: ['./management-page.component.scss'],
+    standalone: false
+})
+export class ManagementPageComponent implements OnInit {
+  @ViewChild(MatSort, {static: true}) sort!: MatSort;
+  @ViewChild(MatPaginator, {static: true}) paginator!: MatPaginator;
+  public routes: typeof routes = routes;
+  public products$: Observable<ProductDetails[]>;
+  public displayedColumns: string[] = ['select', 'id', 'image', 'title', 'subtitle', 'price', 'rating', 'actions'];
+  public dataSource!: MatTableDataSource<ProductDetails>;
+  public selectedId = '';
+
+  public selection = new SelectionModel<ProductDetails>(true, []);
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: ProductDetails): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.id}`;
+  }
+
+  constructor(private service: ProductService,
+              public dialog: MatDialog) {
+    this.products$ = this.service.getProducts();
+
+    this.products$.pipe(
+      take(1)
+    ).subscribe((products: ProductDetails[]) => {
+      this.dataSource = new MatTableDataSource(products);
+    });
+  }
+
+  ngOnInit(): void {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  openDeleteModal(id: string): void {
+    this.selectedId = id;
+    const dialogRef = this.dialog.open(DeletePopupComponent, {
+      width: '512px'
+    });
+
+    dialogRef.componentInstance.deleteConfirmed
+      .pipe(take(1))
+      .subscribe(() => {
+        this.delete(this.selectedId);
+      });
+  }
+
+  public delete(id: string): void {
+    this.service.deleteProduct(id);
+
+    this.products$ = this.service.getProducts();
+
+    this.products$.pipe(
+      take(1)
+    ).subscribe((products: ProductDetails[]) => {
+      this.dataSource = new MatTableDataSource(products);
+    });
+  }
+}
diff --git a/src/app/modules/e-commerce/containers/product-create-page/product-create-page.component.html b/src/app/modules/e-commerce/containers/product-create-page/product-create-page.component.html
new file mode 100644
index 0000000..8992843
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/product-create-page/product-create-page.component.html
@@ -0,0 +1,5 @@
+<app-breadcrumb [path]="routes.PRODUCT_CREATE"></app-breadcrumb>
+
+<app-product-edit-form (editProduct)="createProduct($event)"></app-product-edit-form>
+
+
diff --git a/src/app/modules/e-commerce/containers/product-create-page/product-create-page.component.scss b/src/app/modules/e-commerce/containers/product-create-page/product-create-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/e-commerce/containers/product-create-page/product-create-page.component.ts b/src/app/modules/e-commerce/containers/product-create-page/product-create-page.component.ts
new file mode 100644
index 0000000..44652f3
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/product-create-page/product-create-page.component.ts
@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import {routes} from '../../../../consts';
+import {Router} from '@angular/router';
+import {ProductDetails} from '../../models/product-details';
+import {ProductService} from '../../services';
+
+@Component({
+    selector: 'app-product-create-page',
+    templateUrl: './product-create-page.component.html',
+    styleUrls: ['./product-create-page.component.scss'],
+    standalone: false
+})
+export class ProductCreatePageComponent {
+  public routes: typeof routes = routes;
+
+  constructor(
+    private service: ProductService,
+    private router: Router
+  ) {
+  }
+
+  public createProduct(product: ProductDetails): void {
+    this.service.createProduct(product);
+
+    this.router.navigate([this.routes.MANAGEMENT]).then();
+  }
+}
diff --git a/src/app/modules/e-commerce/containers/product-edit-page/product-edit-page.component.html b/src/app/modules/e-commerce/containers/product-edit-page/product-edit-page.component.html
new file mode 100644
index 0000000..0ed813c
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/product-edit-page/product-edit-page.component.html
@@ -0,0 +1,4 @@
+<app-breadcrumb [path]="routes.PRODUCT_EDIT"></app-breadcrumb>
+
+<app-product-edit-form [product]="product$ | async" (editProduct)="saveEditProduct($event)"></app-product-edit-form>
+
diff --git a/src/app/modules/e-commerce/containers/product-edit-page/product-edit-page.component.scss b/src/app/modules/e-commerce/containers/product-edit-page/product-edit-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/e-commerce/containers/product-edit-page/product-edit-page.component.ts b/src/app/modules/e-commerce/containers/product-edit-page/product-edit-page.component.ts
new file mode 100644
index 0000000..dd4bbcb
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/product-edit-page/product-edit-page.component.ts
@@ -0,0 +1,42 @@
+import {Component, DestroyRef, OnInit, inject} from '@angular/core';
+import {routes} from '../../../../consts';
+import {ActivatedRoute, ParamMap, Router} from '@angular/router';
+import {Observable} from 'rxjs';
+import {ProductService} from '../../services';
+import {ProductDetails} from '../../models/product-details';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+    selector: 'app-product-edit-page',
+    templateUrl: './product-edit-page.component.html',
+    styleUrls: ['./product-edit-page.component.scss'],
+    standalone: false
+})
+export class ProductEditPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+  public product$?: Observable<ProductDetails>;
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    private route: ActivatedRoute,
+    private service: ProductService,
+    private router: Router
+  ) {}
+
+  ngOnInit(): void {
+    this.route.paramMap
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params: ParamMap) => {
+        const id = params.get('id');
+        if (id) {
+          this.product$ = this.service.getProduct(id);
+        }
+      });
+  }
+
+  public saveEditProduct(product: ProductDetails) {
+    this.service.saveChangedProduct(product);
+
+    this.router.navigate([this.routes.MANAGEMENT]).then();
+  }
+}
diff --git a/src/app/modules/e-commerce/containers/product-page/product-page.component.html b/src/app/modules/e-commerce/containers/product-page/product-page.component.html
new file mode 100644
index 0000000..0f64025
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/product-page/product-page.component.html
@@ -0,0 +1,145 @@
+<app-breadcrumb [path]="routes.PRODUCT"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="product-info-wrapper">
+  <img class="product-image" [src]="(product$ | async).imageLarge" alt="product-image">
+
+  <div class="info-wrapper">
+    <div class="info-title-wrapper">
+      <div class="info-inner-wrapper">
+        <p class="product-title">{{(product$ | async).title}}</p>
+        <p class="product-subtitle">{{(product$ | async).subtitle}}</p>
+      </div>
+
+      <div class="product-pop-wrapper">
+        <p class="product-pop">{{(product$ | async).rating}}</p>
+        <mat-icon class="product-pop-icon" color="accent">star</mat-icon>
+      </div>
+    </div>
+
+    <p class="product-price">{{(product$ | async).price}}</p>
+
+    <p class="product-size-title">Size Guide</p>
+
+    <div class="product-selects-wrapper">
+      <mat-form-field appearance="outline" class="product-select-field">
+        <mat-label>Select size</mat-label>
+        <mat-select class="product-select" [formControl]="size">
+          <mat-option value="1">1</mat-option>
+          <mat-option value="2">2</mat-option>
+          <mat-option value="3">3</mat-option>
+          <mat-option value="4">4</mat-option>
+          <mat-option value="5">5</mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <mat-form-field class="product-select-field">
+        <mat-select class="product-select" [formControl]="value">
+          <mat-option value="1">1</mat-option>
+          <mat-option value="2">2</mat-option>
+          <mat-option value="3">3</mat-option>
+          <mat-option value="4">4</mat-option>
+          <mat-option value="5">5</mat-option>
+          <mat-option value="6">6</mat-option>
+          <mat-option value="7">7</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="action-wrapper">
+      <button mat-flat-button color="primary" class="action-button">
+        <div class="inner-button-wrapper">
+          <p class="text-button">Add to bag</p>
+          <mat-icon>shopping_cart</mat-icon>
+        </div>
+      </button>
+
+      <button mat-flat-button color="warn" class="action-button">
+        <div class="inner-button-wrapper">
+          <p class="text-button">Add to wishlist</p>
+          <mat-icon>favorite</mat-icon>
+        </div>
+      </button>
+    </div>
+
+    <div class="card-wrapper">
+      <img class="card" src="./assets/e-commerce/product/mastercard.png" alt="mastercard">
+      <img class="card" src="./assets/e-commerce/product/visa.png" alt="visa">
+      <img class="card" src="./assets/e-commerce/product/paypal.png" alt="paypal">
+    </div>
+
+    <p class="product-benefit">FREE Delivery & Returns</p>
+  </div>
+</mat-card>
+
+<mat-card appearance="outlined" class="product-text-info-wrapper">
+  <mat-card-title>
+    <p>Product Info</p>
+  </mat-card-title>
+
+  <mat-card-content class="product-text-info-content">
+    <div class="text-info-item-wrapper">
+      <p class="text-info-title">PRODUCT DESCRIPTION</p>
+
+      <ul>
+        <li>{{(product$ | async).description1}}</li>
+        <li>{{(product$ | async).description2}}</li>
+      </ul>
+    </div>
+
+    <div class="text-info-item-wrapper middle-block">
+      <div>
+        <p class="text-info-title">PRODUCT CODE</p>
+        <p>{{(product$ | async).code}}</p>
+      </div>
+
+      <div>
+        <p class="text-info-title">TECHNOLOGY</p>
+        <ul>
+          @for (technology of (product$ | async).technology; track technology) {
+            <li>{{technology}}</li>
+          }
+        </ul>
+      </div>
+    </div>
+
+    <div class="text-info-item-wrapper">
+      <p class="text-info-title">SHARE</p>
+
+      <p>Share photo with a tag <span class="tag">{{(product$ | async).hashtag}}</span></p>
+
+      <div class="icons-wrapper">
+        <div class="icon-wrapper">
+          <mat-icon fontSet="fa fa-fs" fontIcon="fa-facebook-square" class="icon"></mat-icon>
+        </div>
+
+        <div class="icon-wrapper">
+          <mat-icon fontSet="fa fa-fs" fontIcon="fa-instagram" class="icon"></mat-icon>
+        </div>
+
+        <div class="icon-wrapper">
+          <mat-icon fontSet="fa fa-fs" fontIcon="fa-twitter" class="icon"></mat-icon>
+        </div>
+      </div>
+
+      <p class="text-info-title">RATING & REVIEWS</p>
+
+      <div class="product-pop-wrapper">
+        <p class="product-pop">{{(product$ | async).rating}}</p>
+        <mat-icon class="product-pop-icon" color="accent">star</mat-icon>
+      </div>
+
+      <p class="product-reviews">32 Reviews</p>
+
+      <a class="product-link" routerLink="{{routes.DASHBOARD}}">Read all</a>
+    </div>
+
+  </mat-card-content>
+</mat-card>
+
+<h3 class="similar-products-title">You may also like</h3>
+
+<div class="similar-products-wrapper">
+  @for (product of (products$ | async); track product) {
+    <app-product-card class="similar-product" [product]="product"></app-product-card>
+  }
+</div>
diff --git a/src/app/modules/e-commerce/containers/product-page/product-page.component.scss b/src/app/modules/e-commerce/containers/product-page/product-page.component.scss
new file mode 100644
index 0000000..7a3e738
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/product-page/product-page.component.scss
@@ -0,0 +1,288 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+
+.product-info-wrapper {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  padding: 0;
+  overflow: hidden;
+  margin-top: 24px;
+
+  @media (max-width: $small) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.product-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  @media (max-width: $small) {
+    width: 100%;
+    height: auto;
+  }
+}
+
+.info-wrapper {
+  width: auto;
+  min-width: 0;
+  padding: 24px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.info-title-wrapper {
+  display: flex;
+}
+
+.info-inner-wrapper {
+  margin-right: 36px;
+}
+
+.product-pop-wrapper {
+  display: flex;
+}
+
+.product-pop {
+  display: inline;
+  font-size: $fs-large;
+  font-weight: $fw-lighter;
+  color: $yellow;
+  margin: 0 8px 0 0;
+}
+
+.product-pop-icon {
+  font-size: 24px;
+  padding: 0;
+}
+
+.product-title {
+  font-size: 26px;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  text-transform: uppercase;
+  margin: 0 0 10px 0;
+}
+
+.product-subtitle {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.product-price {
+  font-size: $fs-medium;
+  font-weight: $fw-normal;
+  color: $dark-grey;
+  margin: 16px 0;
+}
+
+.product-size-title {
+  font-size: $fs-small;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  margin-bottom: 4px;
+}
+
+.product-selects-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+    margin-top: 24px;
+  }
+}
+
+.product-select-field {
+  margin: 0;
+  width: 50%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+
+  & + .product-select-field {
+    margin-left: 16px;
+
+    @media (max-width: $small) {
+      margin-left: 0;
+      margin-top: 16px;
+    }
+  }
+}
+
+.product-select {
+  border: none;
+}
+
+.action-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 4px 0 16px 0;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.action-button {
+  width: 50%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+
+  & + .action-button {
+    margin-left: 16px;
+
+    @media (max-width: $small) {
+      margin-top: 16px;
+      margin-left: 0;
+    }
+  }
+}
+
+.inner-button-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+}
+
+.text-button {
+  margin: 0 16px 0 0;
+}
+
+.card-wrapper {
+  display: flex;
+  align-items: center;
+  margin: 0 0 10px 0;
+}
+
+.card {
+  width: 40px;
+
+  & + .card {
+    margin-left: 8px;
+  }
+}
+
+.product-benefit {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $grey;
+  margin: 0;
+}
+
+.product-text-info-wrapper {
+  margin-top: 38px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+}
+
+.product-text-info-content {
+  display: flex;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.text-info-item-wrapper {
+  width: 100%;
+
+  & + .text-info-item-wrapper {
+    margin-left: 24px;
+
+    @media (max-width: $small) {
+      margin-top: 24px;
+      margin-left: 0;
+    }
+  }
+}
+
+.middle-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.text-info-title {
+  font-size: $fs-medium;
+  font-weight: $fw-lighter;
+  margin-bottom: 16px;
+  color: $dark-grey;
+  text-transform: uppercase;
+}
+
+.tag {
+  color: $blue;
+}
+
+.icons-wrapper {
+  display: flex;
+  margin: 0 0 16px -10px;
+}
+
+.icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: $black-08;
+  }
+}
+
+.icon {
+  padding: 0;
+  width: 18px;
+  height: 20px;
+  color: $light-grey;
+}
+
+.product-reviews {
+  margin: 14px 0;
+}
+
+.product-link {
+  color: $blue;
+  text-decoration: none;
+}
+
+.similar-products-title {
+  font-size: 26px;
+  font-weight: $fw-lighter;
+  color: $light-grey;
+  margin: 38px 0 18px 0;
+}
+
+.similar-products-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.similar-product {
+  width: 23%;
+  margin: 8px 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin: 20px 0;
+  }
+}
diff --git a/src/app/modules/e-commerce/containers/product-page/product-page.component.ts b/src/app/modules/e-commerce/containers/product-page/product-page.component.ts
new file mode 100644
index 0000000..4cf7e54
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/product-page/product-page.component.ts
@@ -0,0 +1,58 @@
+import {Component, DestroyRef, OnInit, inject} from '@angular/core';
+import {routes} from '../../../../consts';
+import {FormControl, FormGroup} from '@angular/forms';
+import {ProductService} from '../../services';
+import {Observable} from 'rxjs';
+import {ProductCard} from '../../models';
+import {ProductDetails} from '../../models/product-details';
+import {ActivatedRoute} from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+type ProductSelectionControls = {
+  size: FormControl<string>;
+  value: FormControl<string>;
+};
+
+@Component({
+    selector: 'app-product-page',
+    templateUrl: './product-page.component.html',
+    styleUrls: ['./product-page.component.scss'],
+    standalone: false
+})
+export class ProductPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+  public form!: FormGroup<ProductSelectionControls>;
+  public products$: Observable<ProductCard[]>
+  public product$!: Observable<ProductDetails>;
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    private service: ProductService,
+    private route: ActivatedRoute
+  ) {
+    this.products$ = this.service.getSimilarProducts();
+  }
+
+  public ngOnInit() {
+    this.form = new FormGroup<ProductSelectionControls>({
+      size: new FormControl('2', { nonNullable: true }),
+      value: new FormControl('2', { nonNullable: true }),
+    });
+
+    this.route.paramMap
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params) => {
+        const productId = params.get('id') ?? '1';
+        this.product$ = this.service.getProduct(productId);
+      });
+  }
+
+  get size(): FormControl<string> {
+    return this.form.controls.size;
+  }
+
+  get value(): FormControl<string> {
+    return this.form.controls.value;
+  }
+
+}
diff --git a/src/app/modules/e-commerce/containers/products-page/products-page.component.html b/src/app/modules/e-commerce/containers/products-page/products-page.component.html
new file mode 100644
index 0000000..7d94fc1
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/products-page/products-page.component.html
@@ -0,0 +1,69 @@
+
+<app-breadcrumb [path]="routes.PRODUCTS"></app-breadcrumb>
+
+<div class="selects-wrapper">
+  <mat-form-field appearance="outline" class="select-wrapper">
+    <mat-label>Type</mat-label>
+    <mat-select class="select" [formControl]="type">
+      <mat-option value="shoes">Shoes</mat-option>
+      <mat-option value="boots">Boots</mat-option>
+      <mat-option value="trainers">Trainers</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="select-wrapper">
+    <mat-label>Brands</mat-label>
+    <mat-select class="select" [formControl]="brands">
+      <mat-option value="all">All</mat-option>
+      <mat-option value="nike">Nike</mat-option>
+      <mat-option value="adidas">Adidas</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="select-wrapper">
+    <mat-label>Size</mat-label>
+    <mat-select class="select" [formControl]="size">
+      <mat-option value="7">7</mat-option>
+      <mat-option value="8">8</mat-option>
+      <mat-option value="9">9</mat-option>
+      <mat-option value="10">10</mat-option>
+      <mat-option value="11">11</mat-option>
+      <mat-option value="12">12</mat-option>
+      <mat-option value="12.5">12.5</mat-option>
+      <mat-option value="13">13</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="select-wrapper">
+    <mat-label>Color</mat-label>
+    <mat-select class="select" [formControl]="color">
+      <mat-option value="all">All</mat-option>
+      <mat-option value="white">White</mat-option>
+      <mat-option value="black">Black</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="select-wrapper">
+    <mat-label>Range</mat-label>
+    <mat-select class="select" [formControl]="range">
+      <mat-option value="all">All</mat-option>
+      <mat-option value="-">-</mat-option>
+      <mat-option value="none">None</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="select-wrapper">
+    <mat-label>Sort</mat-label>
+    <mat-select class="select" [formControl]="sort">
+      <mat-option value="favorite">Favorite</mat-option>
+      <mat-option value="price">Price</mat-option>
+      <mat-option value="popural">Popular</mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+
+<div class="products-wrapper">
+  @for (product of (products$ | async); track product) {
+    <app-product-card class="product" [product]="product"></app-product-card>
+  }
+</div>
diff --git a/src/app/modules/e-commerce/containers/products-page/products-page.component.scss b/src/app/modules/e-commerce/containers/products-page/products-page.component.scss
new file mode 100644
index 0000000..670414d
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/products-page/products-page.component.scss
@@ -0,0 +1,62 @@
+@use "src/app/styles/variables" as *;
+
+.selects-wrapper {
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.select-wrapper {
+  width: 15%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+
+  & + .select-wrapper {
+    margin-left: 16px;
+
+    @media (max-width: $small) {
+      margin-top: 0px;
+      margin-left: 0;
+    }
+  }
+}
+
+.select {
+  border: 0;
+  width: 100%;
+}
+
+.products-wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 24px;
+  margin-top: 8px;
+
+  @media (min-width: $small) and (max-width: $normal) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (max-width: $small) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+    margin-top: 0;
+  }
+}
+
+.product {
+  width: 100%;
+  margin: 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin: 0;
+  }
+}
diff --git a/src/app/modules/e-commerce/containers/products-page/products-page.component.ts b/src/app/modules/e-commerce/containers/products-page/products-page.component.ts
new file mode 100644
index 0000000..456e611
--- /dev/null
+++ b/src/app/modules/e-commerce/containers/products-page/products-page.component.ts
@@ -0,0 +1,67 @@
+import {Component, OnInit} from '@angular/core';
+
+import { routes } from '../../../../consts';
+import {ProductsService} from '../../services';
+import {Observable} from 'rxjs';
+import {ProductCard} from '../../models';
+import {FormControl, FormGroup } from '@angular/forms';
+
+type ProductsFilterControls = {
+  type: FormControl<string>;
+  brands: FormControl<string>;
+  size: FormControl<string>;
+  color: FormControl<string>;
+  range: FormControl<string>;
+  sort: FormControl<string>;
+};
+
+@Component({
+    selector: 'app-products-page',
+    templateUrl: './products-page.component.html',
+    styleUrls: ['./products-page.component.scss'],
+    standalone: false
+})
+export class ProductsPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+  public products$: Observable<ProductCard[]>
+  public form!: FormGroup<ProductsFilterControls>;
+
+  constructor(private service: ProductsService) {
+    this.products$ = this.service.getProducts();
+  }
+
+  public ngOnInit() {
+    this.form = new FormGroup<ProductsFilterControls>({
+      type: new FormControl('shoes', { nonNullable: true }),
+      brands: new FormControl('all', { nonNullable: true }),
+      size: new FormControl('7', { nonNullable: true }),
+      color: new FormControl('all', { nonNullable: true }),
+      range: new FormControl('all', { nonNullable: true }),
+      sort: new FormControl('favorite', { nonNullable: true }),
+    });
+  }
+
+  get type(): FormControl<string> {
+    return this.form.controls.type;
+  }
+
+  get brands(): FormControl<string> {
+    return this.form.controls.brands;
+  }
+
+  get size(): FormControl<string> {
+    return this.form.controls.size;
+  }
+
+  get color(): FormControl<string> {
+    return this.form.controls.color;
+  }
+
+  get range(): FormControl<string> {
+    return this.form.controls.range;
+  }
+
+  get sort(): FormControl<string> {
+    return this.form.controls.sort;
+  }
+}
diff --git a/src/app/modules/e-commerce/e-commerce-routing.module.ts b/src/app/modules/e-commerce/e-commerce-routing.module.ts
new file mode 100644
index 0000000..1c46145
--- /dev/null
+++ b/src/app/modules/e-commerce/e-commerce-routing.module.ts
@@ -0,0 +1,52 @@
+import {RouterModule, Routes} from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import {
+  ManagementPageComponent,
+  ProductCreatePageComponent,
+  ProductPageComponent,
+  ProductsPageComponent,
+  ProductEditPageComponent
+} from './containers';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'management',
+    pathMatch: 'full'
+  },
+  {
+    path: 'management',
+    component: ManagementPageComponent,
+  },
+  {
+    path: 'edit/:id',
+    component: ProductEditPageComponent,
+  },
+  {
+    path: 'create',
+    component: ProductCreatePageComponent,
+  },
+  {
+    path: 'products',
+    component: ProductsPageComponent,
+  },
+  {
+    path: 'product',
+    component: ProductPageComponent,
+  },
+  {
+    path: 'product/:id',
+    component: ProductPageComponent,
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+
+export class ECommerceRoutingModule {
+}
diff --git a/src/app/modules/e-commerce/e-commerce.module.ts b/src/app/modules/e-commerce/e-commerce.module.ts
new file mode 100644
index 0000000..5d234b4
--- /dev/null
+++ b/src/app/modules/e-commerce/e-commerce.module.ts
@@ -0,0 +1,62 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule } from '@angular/material/paginator';
+
+import { ProductsService } from './services';
+import { ECommerceRoutingModule } from './e-commerce-routing.module';
+import { ProductEditFormComponent, ProductCardComponent } from './components';
+import {
+  ManagementPageComponent,
+  ProductsPageComponent,
+  ProductPageComponent,
+  ProductEditPageComponent,
+  ProductCreatePageComponent
+} from './containers';
+import { BreadcrumbComponent } from '../../shared/ui-elements';
+
+@NgModule({
+  declarations: [
+    ManagementPageComponent,
+    ProductsPageComponent,
+    ProductPageComponent,
+    ProductCardComponent,
+    ProductEditPageComponent,
+    ProductEditFormComponent,
+    ProductCreatePageComponent
+  ],
+  imports: [
+    CommonModule,
+    ECommerceRoutingModule,
+    BreadcrumbComponent,
+    MatCardModule,
+    MatIconModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatInputModule,
+    MatTableModule,
+    MatTooltipModule,
+    MatCheckboxModule,
+    MatSortModule,
+    MatPaginatorModule
+  ],
+  providers: [
+    ProductsService
+  ]
+})
+export class ECommerceModule { }
diff --git a/src/app/modules/e-commerce/models/index.ts b/src/app/modules/e-commerce/models/index.ts
new file mode 100644
index 0000000..82c86b5
--- /dev/null
+++ b/src/app/modules/e-commerce/models/index.ts
@@ -0,0 +1 @@
+export * from './product-card';
diff --git a/src/app/modules/e-commerce/models/product-card.ts b/src/app/modules/e-commerce/models/product-card.ts
new file mode 100644
index 0000000..7e5afcb
--- /dev/null
+++ b/src/app/modules/e-commerce/models/product-card.ts
@@ -0,0 +1,9 @@
+export interface ProductCard {
+  id: string;
+  image: string;
+  title: string;
+  subtitle: string;
+  price: string;
+  rating: string;
+  status: string;
+}
diff --git a/src/app/modules/e-commerce/models/product-details.ts b/src/app/modules/e-commerce/models/product-details.ts
new file mode 100644
index 0000000..d39c814
--- /dev/null
+++ b/src/app/modules/e-commerce/models/product-details.ts
@@ -0,0 +1,17 @@
+export interface ProductDetails {
+  id: string;
+  image: string;
+  imageLarge?: string;
+  imageSmall?: string;
+  title: string;
+  subtitle: string;
+  price: string;
+  discount: string;
+  description1: string;
+  description2: string;
+  code: string;
+  hashtag: string;
+  technology: string[];
+  rating: string;
+  status: string;
+}
diff --git a/src/app/modules/e-commerce/services/index.ts b/src/app/modules/e-commerce/services/index.ts
new file mode 100644
index 0000000..2054e36
--- /dev/null
+++ b/src/app/modules/e-commerce/services/index.ts
@@ -0,0 +1,2 @@
+export * from './products.service';
+export * from './product.service'
diff --git a/src/app/modules/e-commerce/services/product.service.ts b/src/app/modules/e-commerce/services/product.service.ts
new file mode 100644
index 0000000..c0f819c
--- /dev/null
+++ b/src/app/modules/e-commerce/services/product.service.ts
@@ -0,0 +1,321 @@
+import {Injectable} from '@angular/core';
+import {Observable, of} from 'rxjs';
+import {ProductDetails} from '../models/product-details';
+import {ProductCard} from '../models';
+
+let products: ProductDetails[] = [
+  {
+    id: '1',
+    image: './assets/e-commerce/products/1.png',
+    imageLarge: './assets/e-commerce/products/large-1.png',
+    imageSmall: './assets/e-commerce/managment/1.png',
+    title: 'Trainers',
+    subtitle: 'Trainers in white',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '135234',
+    discount: '20',
+    price: '$80',
+    rating: '4.6',
+    status: 'New'
+  },
+  {
+    id: '2',
+    image: './assets/e-commerce/products/2.png',
+    imageLarge: './assets/e-commerce/products/large-2.png',
+    imageSmall: './assets/e-commerce/managment/2.png',
+    title: 'Boots',
+    subtitle: 'Trainers in blue',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '135264',
+    discount: '20',
+    price: '$37',
+    rating: '4.6',
+    status: 'Sale'
+  },
+  {
+    id: '3',
+    image: './assets/e-commerce/products/3.png',
+    imageLarge: './assets/e-commerce/products/large-3.png',
+    imageSmall: './assets/e-commerce/managment/3.png',
+    title: 'Flat sandals',
+    subtitle: 'Trainers in white',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '125234',
+    discount: '20',
+    price: '$70',
+    rating: '4.6',
+    status: 'New'
+  },
+  {
+    id: '4',
+    image: './assets/e-commerce/products/4.png',
+    imageLarge: './assets/e-commerce/products/large-4.png',
+    imageSmall: './assets/e-commerce/managment/4.png',
+    title: 'Trainers',
+    subtitle: 'Trainers in blue',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '133234',
+    discount: '20',
+    price: '$85',
+    rating: '4.6',
+    status: 'Sale'
+  },
+  {
+    id: '5',
+    image: './assets/e-commerce/products/5.png',
+    imageLarge: './assets/e-commerce/products/large-5.png',
+    imageSmall: './assets/e-commerce/managment/5.png',
+    title: 'Flat sandals',
+    subtitle: 'Trainers in white',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '138234',
+    discount: '20',
+    price: '$12',
+    rating: '4.6',
+    status: 'New'
+  },
+  {
+    id: '6',
+    image: './assets/e-commerce/products/6.png',
+    imageLarge: './assets/e-commerce/products/large-6.png',
+    imageSmall: './assets/e-commerce/managment/6.png',
+    title: 'Flat sandals',
+    subtitle: 'Trainers in blue',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '135237',
+    discount: '20',
+    price: '$76',
+    rating: '4.6',
+    status: 'Sale'
+  },
+  {
+    id: '7',
+    image: './assets/e-commerce/products/1.png',
+    imageLarge: './assets/e-commerce/products/large-1.png',
+    imageSmall: './assets/e-commerce/managment/1.png',
+    title: 'Trainers',
+    subtitle: 'Trainers in white',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '135234',
+    discount: '20',
+    price: '$80',
+    rating: '4.6',
+    status: 'New'
+  },
+  {
+    id: '8',
+    image: './assets/e-commerce/products/2.png',
+    imageLarge: './assets/e-commerce/products/large-2.png',
+    imageSmall: './assets/e-commerce/managment/2.png',
+    title: 'Boots',
+    subtitle: 'Trainers in blue',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '135264',
+    discount: '20',
+    price: '$37',
+    rating: '4.6',
+    status: 'Sale'
+  },
+  {
+    id: '9',
+    image: './assets/e-commerce/products/3.png',
+    imageLarge: './assets/e-commerce/products/large-3.png',
+    imageSmall: './assets/e-commerce/managment/3.png',
+    title: 'Flat sandals',
+    subtitle: 'Trainers in white',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '125234',
+    discount: '20',
+    price: '$70',
+    rating: '4.6',
+    status: 'New'
+  },
+  {
+    id: '10',
+    image: './assets/e-commerce/products/4.png',
+    imageLarge: './assets/e-commerce/products/large-4.png',
+    imageSmall: './assets/e-commerce/managment/4.png',
+    title: 'Trainers',
+    subtitle: 'Trainers in blue',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '133234',
+    discount: '20',
+    price: '$85',
+    rating: '4.6',
+    status: 'Sale'
+  },
+  {
+    id: '11',
+    image: './assets/e-commerce/products/5.png',
+    imageLarge: './assets/e-commerce/products/large-5.png',
+    imageSmall: './assets/e-commerce/managment/5.png',
+    title: 'Flat sandals',
+    subtitle: 'Trainers in white',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '138234',
+    discount: '20',
+    price: '$12',
+    rating: '4.6',
+    status: 'New'
+  },
+  {
+    id: '12',
+    image: './assets/e-commerce/products/6.png',
+    imageLarge: './assets/e-commerce/products/large-6.png',
+    imageSmall: './assets/e-commerce/managment/6.png',
+    title: 'Flat sandals',
+    subtitle: 'Trainers in blue',
+    description1: 'Sneakers (also known as athletic shoes, tennis shoes,gym shoes, runners, takkies,' +
+      ' or trainers) are shoes primarily designed for sports or other forms of physical exercise, but' +
+      ' which are now also often used for everyday wear.',
+    description2: 'The term generally describes a type of footwear with a flexible sole made of rubber' +
+      ' or synthetic material and an upper part made of leather or synthetic materials.',
+    technology: ['Ollie patch', 'Cup soles', 'Vulcanized rubber soles'],
+    hashtag: '#whitetrainers',
+    code: '135237',
+    discount: '20',
+    price: '$76',
+    rating: '4.6',
+    status: 'Sale'
+  }
+]
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductService {
+  public getProducts(): Observable<ProductDetails[]> {
+    return of(products);
+  }
+
+  public getProduct(id: string): Observable<ProductDetails> {
+    return of(products.find((product: ProductDetails) => product.id === id));
+  }
+
+  public saveChangedProduct(editProduct: ProductDetails) {
+    products.map((product: ProductDetails, i: number) => {
+      if (product.id === editProduct.id) {
+        products.splice(i, 1, editProduct);
+      }
+    });
+  }
+
+  public deleteProduct(id: string): void {
+    products.map((product: ProductDetails, i: number) => {
+      if (product.id === id) {
+        products.splice(i, 1);
+      }
+    });
+  }
+
+  public getSimilarProducts(): Observable<ProductCard[]> {
+    return of([
+      {
+        id: '1',
+        image: './assets/e-commerce/products/1.png',
+        title: 'Trainers',
+        subtitle: 'Trainers in white',
+        price: '$80',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '2',
+        image: './assets/e-commerce/products/2.png',
+        title: 'Boots',
+        subtitle: 'Trainers in blue',
+        price: '$37',
+        rating: '4.6',
+        status: 'Sale'
+      },
+      {
+        id: '3',
+        image: './assets/e-commerce/products/3.png',
+        title: 'Flat sandals',
+        subtitle: 'Trainers in white',
+        price: '$70',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '4',
+        image: './assets/e-commerce/products/4.png',
+        title: 'Trainers',
+        subtitle: 'Trainers in blue',
+        price: '$85',
+        rating: '4.6',
+        status: 'Sale'
+      }
+    ]);
+  }
+
+  public createProduct(product: ProductDetails): void {
+    products.push(product);
+  }
+}
diff --git a/src/app/modules/e-commerce/services/products.service.ts b/src/app/modules/e-commerce/services/products.service.ts
new file mode 100644
index 0000000..281b93a
--- /dev/null
+++ b/src/app/modules/e-commerce/services/products.service.ts
@@ -0,0 +1,163 @@
+import { Injectable } from '@angular/core';
+
+import { Observable, of } from 'rxjs';
+import {ProductCard} from '../models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProductsService {
+  public getProducts(): Observable<ProductCard[]> {
+    return of([
+      {
+        id: '1',
+        image: './assets/e-commerce/products/1.png',
+        title: 'Trainers',
+        subtitle: 'Trainers in white',
+        price: '$80',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '2',
+        image: './assets/e-commerce/products/2.png',
+        title: 'Boots',
+        subtitle: 'Trainers in blue',
+        price: '$37',
+        rating: '4.6',
+        status: 'Sale'
+      },
+      {
+        id: '3',
+        image: './assets/e-commerce/products/3.png',
+        title: 'Flat sandals',
+        subtitle: 'Trainers in white',
+        price: '$70',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '4',
+        image: './assets/e-commerce/products/4.png',
+        title: 'Trainers',
+        subtitle: 'Trainers in blue',
+        price: '$85',
+        rating: '4.6',
+        status: 'Sale'
+      },
+      {
+        id: '5',
+        image: './assets/e-commerce/products/5.png',
+        title: 'Flat sandals',
+        subtitle: 'Trainers in white',
+        price: '$12',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '6',
+        image: './assets/e-commerce/products/6.png',
+        title: 'Flat sandals',
+        subtitle: 'Trainers in blue',
+        price: '$76',
+        rating: '4.6',
+        status: 'Sale'
+      },
+      {
+        id: '7',
+        image: './assets/e-commerce/products/1.png',
+        title: 'Trainers',
+        subtitle: 'Trainers in white',
+        price: '$80',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '8',
+        image: './assets/e-commerce/products/2.png',
+        title: 'Boots',
+        subtitle: 'Trainers in blue',
+        price: '$37',
+        rating: '4.6',
+        status: 'Sale'
+      },
+      {
+        id: '9',
+        image: './assets/e-commerce/products/3.png',
+        title: 'Flat sandals',
+        subtitle: 'Trainers in white',
+        price: '$70',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '10',
+        image: './assets/e-commerce/products/4.png',
+        title: 'Trainers',
+        subtitle: 'Trainers in blue',
+        price: '$85',
+        rating: '4.6',
+        status: 'Sale'
+      },
+      {
+        id: '11',
+        image: './assets/e-commerce/products/5.png',
+        title: 'Flat sandals',
+        subtitle: 'Trainers in white',
+        price: '$12',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '12',
+        image: './assets/e-commerce/products/6.png',
+        title: 'Flat sandals',
+        subtitle: 'Trainers in blue',
+        price: '$76',
+        rating: '4.6',
+        status: 'Sale'
+      }
+    ]);
+  }
+
+  public getSimilarProducts(): Observable<ProductCard[]> {
+    return of([
+      {
+        id: '1',
+        image: './assets/e-commerce/products/1.jpg',
+        title: 'Trainers',
+        subtitle: 'Trainers in white',
+        price: '$80',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '2',
+        image: './assets/e-commerce/products/2.jpg',
+        title: 'Boots',
+        subtitle: 'Trainers in blue',
+        price: '$37',
+        rating: '4.6',
+        status: 'Sale'
+      },
+      {
+        id: '3',
+        image: './assets/e-commerce/products/3.jpg',
+        title: 'Flat sandals',
+        subtitle: 'Trainers in white',
+        price: '$70',
+        rating: '4.6',
+        status: 'New'
+      },
+      {
+        id: '4',
+        image: './assets/e-commerce/products/4.jpg',
+        title: 'Trainers',
+        subtitle: 'Trainers in blue',
+        price: '$85',
+        rating: '4.6',
+        status: 'Sale'
+      }
+    ]);
+  }
+}
diff --git a/src/app/modules/pages/change-password/change-password.component.html b/src/app/modules/pages/change-password/change-password.component.html
new file mode 100644
index 0000000..c623aec
--- /dev/null
+++ b/src/app/modules/pages/change-password/change-password.component.html
@@ -0,0 +1,48 @@
+<app-breadcrumb [path]="routes.CHANGE_PASSWORD"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <h4 class="h4">Change password</h4>
+  </mat-card-title>
+
+  <mat-card-content [formGroup]="form">
+    <div class="input-wrapper">
+      <p class="input-title">Current Password</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="currentPassword"
+          type="password"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+    <div class="input-wrapper">
+      <p class="input-title">New Password</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="newPassword"
+          type="password"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+    <div class="input-wrapper">
+      <p class="input-title">Confirm New Password</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="confirmPassword"
+          type="password"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <button (click)="onChangePassword()" mat-flat-button color="success">
+      Change password
+    </button>
+    <button (click)="onCancel()" mat-flat-button color="default">Cancel</button>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/pages/change-password/change-password.component.scss b/src/app/modules/pages/change-password/change-password.component.scss
new file mode 100644
index 0000000..14ffde0
--- /dev/null
+++ b/src/app/modules/pages/change-password/change-password.component.scss
@@ -0,0 +1,111 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.card {
+  margin-top: 24px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey,
+    0 1px 8px 0 $shadow-dark-grey;
+}
+
+.input-wrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0 8px 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.input-title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+  margin: 0 16px 0 0;
+}
+
+.input-field {
+  width: 80%;
+  font-size: $fs-xs;
+
+  @media (max-width: $small) {
+    width: 80%;
+  }
+}
+
+.input-text {
+  font-size: $fs-regular;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+.mat-form-field-wrapper {
+  margin: 0;
+  padding: 0;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+.mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 20px 0 16px 0;
+  border: none;
+}
+
+.input-select {
+  border: none;
+  width: 500px;
+}
+
+.input-panel {
+  width: auto;
+  height: auto;
+}
+
+.input-img {
+  width: 200px;
+  height: auto;
+}
+
+button.mat-mdc-unelevated-button + button.mat-flat-button {
+  margin-left: 8px;
+}
+
+.checkbox-wrapper {
+  margin: 24px 0;
+  display: flex;
+
+  @media (max-width: $medium) {
+    flex-direction: column;
+  }
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.checkbox-item-title {
+  margin: 0 0 0 8px;
+}
+
+.mat-mdc-radio-button + .mat-radio-button {
+  margin-left: 16px;
+}
+
+.inputs-wrapper {
+  margin-top: 36px;
+
+  @media (max-width: $normal) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+mat-form-field + mat-form-field {
+  margin-left: 24px;
+
+  @media (max-width: $normal) {
+    margin-top: 24px;
+    margin-left: 0;
+  }
+}
diff --git a/src/app/modules/pages/change-password/change-password.component.spec.ts b/src/app/modules/pages/change-password/change-password.component.spec.ts
new file mode 100644
index 0000000..c2ac365
--- /dev/null
+++ b/src/app/modules/pages/change-password/change-password.component.spec.ts
@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { ToastrService } from 'ngx-toastr';
+
+import { ChangePasswordComponent } from './change-password.component';
+import { AuthService } from '../../../shared/services/auth.service';
+
+describe('ChangePasswordComponent', () => {
+  let component: ChangePasswordComponent;
+  let fixture: ComponentFixture<ChangePasswordComponent>;
+  const authServiceMock = {
+    changePassword: jest.fn().mockReturnValue(of({})),
+  };
+  const toastrServiceMock = {
+    success: jest.fn(),
+    error: jest.fn(),
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChangePasswordComponent, RouterTestingModule],
+      providers: [
+        {
+          provide: AuthService,
+          useValue: authServiceMock,
+        },
+        {
+          provide: ToastrService,
+          useValue: toastrServiceMock,
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(ChangePasswordComponent, {
+        set: {
+          template: '',
+        },
+      })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChangePasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/pages/change-password/change-password.component.ts b/src/app/modules/pages/change-password/change-password.component.ts
new file mode 100644
index 0000000..43aecc3
--- /dev/null
+++ b/src/app/modules/pages/change-password/change-password.component.ts
@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { AuthService } from '../../../shared/services/auth.service';
+import { routes } from '../../../consts';
+import { BreadcrumbComponent } from '../../../shared/ui-elements';
+import { take } from 'rxjs';
+
+type ChangePasswordFormValue = {
+  currentPassword: string;
+  newPassword: string;
+  confirmPassword: string;
+};
+
+@Component({
+    selector: 'app-change-password',
+    templateUrl: './change-password.component.html',
+    styleUrls: ['./change-password.component.scss'],
+    standalone: true,
+    imports: [
+      ReactiveFormsModule,
+      MatCardModule,
+      MatInputModule,
+      MatFormFieldModule,
+      MatButtonModule,
+      BreadcrumbComponent,
+    ]
+})
+export class ChangePasswordComponent {
+  public form: FormGroup<{
+    currentPassword: FormControl<string>;
+    newPassword: FormControl<string>;
+    confirmPassword: FormControl<string>;
+  }>;
+  public routes: typeof routes = routes;
+
+  constructor(
+    private router: Router,
+    private toastr: ToastrService,
+    private authService: AuthService,
+  ) {
+    this.form = new FormGroup({
+      currentPassword: new FormControl('', { nonNullable: true }),
+      newPassword: new FormControl('', { nonNullable: true }),
+      confirmPassword: new FormControl('', { nonNullable: true }),
+    });
+  }
+
+  onChangePassword(): void {
+    const payload: ChangePasswordFormValue = this.form.getRawValue();
+    this.authService.changePassword(payload).pipe(take(1)).subscribe({
+      next: () => {
+        this.toastr.success('Password changed successfully');
+        this.router.navigate(['app/dashboard']);
+      },
+      error: (err) => {
+        this.toastr.error(err.error);
+      },
+    });
+  }
+
+  onCancel(): void {
+    this.router.navigate(['admin/dashboard']);
+  }
+}
diff --git a/src/app/modules/pages/dashboard/dashboard.component.html b/src/app/modules/pages/dashboard/dashboard.component.html
new file mode 100644
index 0000000..6bdeddb
--- /dev/null
+++ b/src/app/modules/pages/dashboard/dashboard.component.html
@@ -0,0 +1,11 @@
+<app-breadcrumb [path]="routes.DASHBOARD"></app-breadcrumb>
+
+<mat-card class="card">
+  <mat-card-title>
+    <h4 class="h4">Dashboard</h4>
+  </mat-card-title>
+
+  <mat-card-content>
+    <img alt="Angular" class="d-block mx-auto" src="/assets/angular-logo.png" />
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/pages/dashboard/dashboard.component.scss b/src/app/modules/pages/dashboard/dashboard.component.scss
new file mode 100644
index 0000000..66da63a
--- /dev/null
+++ b/src/app/modules/pages/dashboard/dashboard.component.scss
@@ -0,0 +1,11 @@
+@use 'src/app/styles/colors' as *;
+
+.card {
+  margin-top: 24px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey,
+    0 1px 8px 0 $shadow-dark-grey;
+}
+
+.mat-mdc-card-content {
+  text-align: center;
+}
diff --git a/src/app/modules/pages/dashboard/dashboard.component.spec.ts b/src/app/modules/pages/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..affd734
--- /dev/null
+++ b/src/app/modules/pages/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(DashboardComponent, {
+        set: {
+          template: '',
+        },
+      })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/pages/dashboard/dashboard.component.ts b/src/app/modules/pages/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..eb93069
--- /dev/null
+++ b/src/app/modules/pages/dashboard/dashboard.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+
+import { routes } from '../../../consts';
+import { BreadcrumbComponent } from '../../../shared/ui-elements';
+
+@Component({
+    selector: 'app-dashboard',
+    templateUrl: './dashboard.component.html',
+    styleUrls: ['./dashboard.component.scss'],
+    standalone: true,
+    imports: [MatCardModule, BreadcrumbComponent]
+})
+export class DashboardComponent implements OnInit {
+  public routes: typeof routes = routes;
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/modules/pages/home/home.component.html b/src/app/modules/pages/home/home.component.html
new file mode 100644
index 0000000..393358f
--- /dev/null
+++ b/src/app/modules/pages/home/home.component.html
@@ -0,0 +1,32 @@
+<div class="home">
+  <img
+    class="auth-page__logo-img"
+    src="./assets/angular-logo.png"
+    alt="logo"
+    width="150px"
+    height="150px"
+  />
+  <h2 class="mat-h2">
+    Welcome to your Angular-Material-Admin-Full application!
+  </h2>
+  This is a Angular/Node.JS app generated by the
+  <a href="https://flatlogic.com/generator" target="_blank"
+    >Flatlogic Web App Generator.</a
+  >
+  For guides and documentation please check your local README.md and
+  <a href="https://flatlogic.com/documentation" target="_blank"
+    >Flatlogic documentation.</a
+  >
+  <div class="d-flex btn-section">
+    <button mat-raised-button color="primary" type="submit" routerLink="/login">
+      Login
+    </button>
+  </div>
+  <footer>
+    <a href="https://angular.io/" target="_blank">Angular</a> -
+    <a target="_blank" href="https://nodejs.org/en/">Node.js</a>
+    -
+    <a href="https://flatlogic.com/forum/" target="_blank">Flatlogic Forum</a> -
+    <a href="https://material.angular.io/" target="_blank">Angular Material</a>
+  </footer>
+</div>
diff --git a/src/app/modules/pages/home/home.component.scss b/src/app/modules/pages/home/home.component.scss
new file mode 100644
index 0000000..01dd7d3
--- /dev/null
+++ b/src/app/modules/pages/home/home.component.scss
@@ -0,0 +1,24 @@
+.home {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100%;
+  flex-direction: column;
+}
+
+.btn-section {
+  margin-top: 25px;
+}
+
+.btn {
+  margin-left: 15px;
+}
+
+h2 {
+  margin-top: 10px;
+}
+
+footer {
+  margin-top: 20px;
+}
diff --git a/src/app/modules/pages/home/home.component.spec.ts b/src/app/modules/pages/home/home.component.spec.ts
new file mode 100644
index 0000000..423e7e9
--- /dev/null
+++ b/src/app/modules/pages/home/home.component.spec.ts
@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+
+import { HomeComponent } from './home.component';
+import { AuthService } from '../../../shared/services/auth.service';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+  const authServiceMock = {
+    isAuthenticated: jest.fn().mockReturnValue(false),
+    receiveLogin: jest.fn(),
+    receiveToken: jest.fn(),
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [HomeComponent],
+      providers: [
+        {
+          provide: AuthService,
+          useValue: authServiceMock,
+        },
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            queryParams: of({}),
+          },
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(HomeComponent, {
+        set: {
+          template: '',
+        },
+      })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/pages/home/home.component.ts b/src/app/modules/pages/home/home.component.ts
new file mode 100644
index 0000000..18c394c
--- /dev/null
+++ b/src/app/modules/pages/home/home.component.ts
@@ -0,0 +1,36 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { routes } from '../../../consts';
+import { AuthService } from '../../../shared/services/auth.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+    selector: 'app-home',
+    templateUrl: './home.component.html',
+    styleUrls: ['./home.component.scss'],
+    standalone: false
+})
+export class HomeComponent implements OnInit {
+  public routes: typeof routes = routes;
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute,
+  ) {
+    if (this.authService.isAuthenticated()) {
+      this.authService.receiveLogin();
+    }
+
+    this.route.queryParams
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params: { token?: string }) => {
+        if (params.token) {
+          this.authService.receiveToken(params.token);
+        }
+      });
+  }
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/modules/pages/pages.routes.ts b/src/app/modules/pages/pages.routes.ts
new file mode 100644
index 0000000..f481ae3
--- /dev/null
+++ b/src/app/modules/pages/pages.routes.ts
@@ -0,0 +1,20 @@
+import { Routes } from '@angular/router';
+
+import { ChangePasswordComponent } from './change-password/change-password.component';
+import { ProfileComponent } from './profile/profile.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+
+export const PAGES_ROUTES: Routes = [
+  {
+    path: 'dashboard',
+    component: DashboardComponent,
+  },
+  {
+    path: 'change-password',
+    component: ChangePasswordComponent,
+  },
+  {
+    path: 'profile',
+    component: ProfileComponent,
+  },
+];
diff --git a/src/app/modules/pages/profile/profile.component.html b/src/app/modules/pages/profile/profile.component.html
new file mode 100644
index 0000000..10bc0f1
--- /dev/null
+++ b/src/app/modules/pages/profile/profile.component.html
@@ -0,0 +1,92 @@
+<app-breadcrumb [path]="routes.PROFILE"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <h4 class="h4">Edit Profile</h4>
+  </mat-card-title>
+
+  <mat-card-content [formGroup]="form">
+    <div class="input-wrapper">
+      <p class="input-title">First Name</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="firstName"
+          placeholder="First Name"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Last Name</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="lastName"
+          placeholder="Last Name"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Phone Number</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="phoneNumber"
+          placeholder="Phone Number"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">E-Mail</p>
+      <mat-form-field class="input-field">
+        <input
+          matInput
+          formControlName="email"
+          placeholder="E-Mail"
+          class="input-text"
+        />
+      </mat-form-field>
+    </div>
+
+    <p class="input-title">Role</p>
+
+    <div class="checkbox-wrapper">
+      <mat-radio-group formControlName="role">
+        <mat-radio-button color="primary" [value]="'admin'">
+          admin
+        </mat-radio-button>
+      </mat-radio-group>
+
+      <mat-radio-group formControlName="role">
+        <mat-radio-button color="primary" [value]="'user'">
+          user
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+
+    <div class="checkbox-wrapper">
+      <div class="checkbox-item">
+        <p class="checkbox-item-title">Disabled</p>
+        <mat-checkbox color="primary" formControlName="disabled"></mat-checkbox>
+      </div>
+    </div>
+
+    <app-image-uploader
+      (imageUploaded)="avatarAdd($event)"
+      (imageDeleted)="avatarDel($event)"
+      [imageList]="form.controls.avatar.value"
+      [entityName]="'users'"
+      [propertyName]="'avatar'"
+    >
+    </app-image-uploader>
+
+    <button (click)="onSave()" mat-flat-button color="success">Save</button>
+    <button (click)="onCancel()" mat-flat-button color="default">Cancel</button>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/pages/profile/profile.component.scss b/src/app/modules/pages/profile/profile.component.scss
new file mode 100644
index 0000000..d515b23
--- /dev/null
+++ b/src/app/modules/pages/profile/profile.component.scss
@@ -0,0 +1,127 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.card {
+  margin-top: 24px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey,
+    0 1px 8px 0 $shadow-dark-grey;
+}
+
+.input-wrapper {
+  width: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0 8px 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.input-title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+  margin: 0 16px 0 0;
+}
+
+.input-field {
+  width: 80%;
+  font-size: $fs-xs;
+
+  @media (max-width: $small) {
+    width: 80%;
+  }
+}
+
+.input-text,
+textarea {
+  font-size: $fs-regular;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+.mat-form-field-wrapper {
+  margin: 0;
+  padding: 0;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+.mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 20px 0 16px 0;
+  border: none;
+}
+
+.input-select {
+  border: none;
+  width: 500px;
+}
+
+.input-panel {
+  width: auto;
+  height: auto;
+}
+
+.input-img {
+  width: 200px;
+  height: auto;
+}
+
+button.mat-mdc-unelevated-button + button.mat-flat-button {
+  margin-left: 8px;
+}
+
+.checkbox-wrapper {
+  margin: 18px 0;
+  display: flex;
+
+  @media (max-width: $medium) {
+    flex-direction: column;
+  }
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+}
+
+.checkbox-item-title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+  margin: 0 !important;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
+.mat-mdc-checkbox,
+.mat-checkbox-inner-container,
+.mat-checkbox-inner-container-no-side-margin {
+  margin-left: 10px !important;
+}
+
+.mat-mdc-radio-button {
+  margin-left: 16px;
+}
+
+.inputs-wrapper {
+  margin-top: 36px;
+
+  @media (max-width: $normal) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+mat-form-field + mat-form-field {
+  margin-left: 24px;
+
+  @media (max-width: $normal) {
+    margin-top: 24px;
+    margin-left: 0;
+  }
+}
+
+.image-preview {
+  width: 191px;
+  height: 141px;
+  background-size: cover;
+  background-position: 50% center;
+}
diff --git a/src/app/modules/pages/profile/profile.component.spec.ts b/src/app/modules/pages/profile/profile.component.spec.ts
new file mode 100644
index 0000000..80ebe97
--- /dev/null
+++ b/src/app/modules/pages/profile/profile.component.spec.ts
@@ -0,0 +1,66 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { of } from 'rxjs';
+import { ToastrService } from 'ngx-toastr';
+
+import { ProfileComponent } from './profile.component';
+import { AuthService } from '../../../shared/services/auth.service';
+import { UsersService } from '../../../shared/services/users.service';
+import { DataFormatterService } from '../../../shared/services/data-formatter.service';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+  const authServiceMock = {
+    getCurrentUserInfo: jest.fn().mockReturnValue(of({})),
+  };
+  const usersServiceMock = {
+    update: jest.fn().mockReturnValue(of({})),
+  };
+  const toastrServiceMock = {
+    success: jest.fn(),
+    error: jest.fn(),
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfileComponent, RouterTestingModule],
+      providers: [
+        {
+          provide: AuthService,
+          useValue: authServiceMock,
+        },
+        {
+          provide: UsersService,
+          useValue: usersServiceMock,
+        },
+        {
+          provide: ToastrService,
+          useValue: toastrServiceMock,
+        },
+        {
+          provide: DataFormatterService,
+          useValue: {},
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(ProfileComponent, {
+        set: {
+          template: '',
+        },
+      })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/pages/profile/profile.component.ts b/src/app/modules/pages/profile/profile.component.ts
new file mode 100644
index 0000000..8e70196
--- /dev/null
+++ b/src/app/modules/pages/profile/profile.component.ts
@@ -0,0 +1,139 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { AuthService } from '../../../shared/services/auth.service';
+import { UsersService } from '../../../shared/services/users.service';
+import { routes } from '../../../consts';
+import { BreadcrumbComponent } from '../../../shared/ui-elements';
+import { ImageUploaderComponent } from '../../../shared/uploaders/image-uploader/image-uploader.component';
+import { take } from 'rxjs';
+
+type AvatarItem = {
+  id?: string;
+  publicUrl?: string;
+  [key: string]: unknown;
+};
+
+type ProfileFormControls = {
+  id: FormControl<string>;
+  firstName: FormControl<string>;
+  lastName: FormControl<string>;
+  phoneNumber: FormControl<string>;
+  email: FormControl<string>;
+  role: FormControl<string>;
+  disabled: FormControl<boolean>;
+  avatar: FormControl<AvatarItem[]>;
+};
+
+type ProfileFormValue = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  phoneNumber: string;
+  email: string;
+  role: string;
+  disabled: boolean;
+  avatar: AvatarItem[];
+};
+
+@Component({
+    selector: '[profile]',
+    templateUrl: './profile.component.html',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./profile.component.scss'],
+    standalone: true,
+    imports: [
+      ReactiveFormsModule,
+      MatCardModule,
+      MatInputModule,
+      MatFormFieldModule,
+      MatRadioModule,
+      MatCheckboxModule,
+      MatButtonModule,
+      BreadcrumbComponent,
+      ImageUploaderComponent,
+    ]
+})
+export class ProfileComponent {
+  public routes: typeof routes = routes;
+  loading = false;
+  public form: FormGroup<ProfileFormControls>;
+
+  constructor(
+    private router: Router,
+    private toastr: ToastrService,
+    private authService: AuthService,
+    private usersService: UsersService,
+  ) {
+    this.form = new FormGroup<ProfileFormControls>({
+      id: new FormControl('', { nonNullable: true }),
+      firstName: new FormControl('', { nonNullable: true }),
+      lastName: new FormControl('', { nonNullable: true }),
+      phoneNumber: new FormControl('', { nonNullable: true }),
+      email: new FormControl({ value: '', disabled: true }, { nonNullable: true }),
+      role: new FormControl('user', { nonNullable: true }),
+      disabled: new FormControl(false, { nonNullable: true }),
+      avatar: new FormControl<AvatarItem[]>([], { nonNullable: true }),
+    });
+  }
+
+  ngOnInit(): void {
+    this.getCurrentUser();
+  }
+
+  public avatarAdd(val: AvatarItem): void {
+    const currentAvatar = this.form.controls.avatar.value;
+    this.form.controls.avatar.setValue([...currentAvatar, val]);
+  }
+
+  public avatarDel(id: string): void {
+    const nextAvatar = this.form.controls.avatar.value.filter(
+      (img) => img.id !== id,
+    );
+    this.form.controls.avatar.setValue(nextAvatar);
+  }
+
+  onSave(): void {
+    const currentUser: ProfileFormValue = this.form.getRawValue();
+    this.usersService.update(currentUser, currentUser.id).pipe(take(1)).subscribe({
+      next: () => {
+        this.toastr.success('Profile updated successfully');
+        this.router.navigate([this.routes.DASHBOARD]);
+      },
+      error: () => {
+        this.toastr.error('Something was wrong. Try again');
+      },
+    });
+  }
+
+  onCancel(): void {
+    this.router.navigate(['admin/dashboard']);
+  }
+
+  private getCurrentUser(): void {
+    this.authService.getCurrentUserInfo().pipe(take(1)).subscribe((res: Partial<ProfileFormValue> | null) => {
+      const avatar = Array.isArray(res?.avatar) ? res.avatar : [];
+      this.form.patchValue({
+        id: res?.id ?? '',
+        firstName: res?.firstName ?? '',
+        lastName: res?.lastName ?? '',
+        phoneNumber: res?.phoneNumber ?? '',
+        email: res?.email ?? '',
+        role: res?.role ?? 'user',
+        disabled: Boolean(res?.disabled),
+      });
+      this.form.controls.avatar.setValue(avatar);
+    });
+  }
+}
diff --git a/src/app/modules/templates/charts/charts-routing.module.ts b/src/app/modules/templates/charts/charts-routing.module.ts
new file mode 100644
index 0000000..f33d355
--- /dev/null
+++ b/src/app/modules/templates/charts/charts-routing.module.ts
@@ -0,0 +1,43 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import {
+  BarChartsPageComponent,
+  LineChartsPageComponent,
+  OverviewChartsPageComponent,
+  PieChartsPageComponent
+} from './containers';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'overview',
+    pathMatch: 'full'
+  },
+  {
+    path: 'overview',
+    component: OverviewChartsPageComponent
+  },
+  {
+    path: 'line',
+    component: LineChartsPageComponent
+  },
+  {
+    path: 'bar',
+    component: BarChartsPageComponent
+  },
+  {
+    path: 'pie',
+    component: PieChartsPageComponent
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+
+export class ChartsRoutingModule {
+}
diff --git a/src/app/modules/templates/charts/charts.module.ts b/src/app/modules/templates/charts/charts.module.ts
new file mode 100644
index 0000000..37c94b8
--- /dev/null
+++ b/src/app/modules/templates/charts/charts.module.ts
@@ -0,0 +1,78 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatCardModule} from '@angular/material/card';
+import { MatGridListModule } from '@angular/material/grid-list';
+
+import { ChartsRoutingModule } from './charts-routing.module';
+import {
+  OverviewChartsPageComponent,
+  LineChartsPageComponent,
+  BarChartsPageComponent,
+  PieChartsPageComponent
+} from './containers';
+import { ChartsService } from './services';
+import {
+  DashedLineChartComponent,
+  HeatmapChartComponent,
+  LineChartComponent,
+  PieChartComponent,
+  RadarChartComponent,
+  BarChartComponent,
+  BasicLineChartComponent,
+  LineDataLabelsChartComponent,
+  ZoomableTimeseriesChartComponent,
+  GroupedBarChartComponent,
+  StackedBarChartComponent,
+  ImageBarChartComponent,
+  SimplePieChartComponent,
+  UpdatePieChartComponent,
+  MonochomePieChartComponent,
+  DynamicUpdatingChartComponent
+} from './components';
+import { BreadcrumbComponent } from '../../../shared/ui-elements';
+import { ChartSizePipe } from '../../../shared/pipes/chart-size.pipe';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+@NgModule({
+  declarations: [
+    OverviewChartsPageComponent,
+    LineChartsPageComponent,
+    BarChartsPageComponent,
+    PieChartsPageComponent,
+    LineChartComponent,
+    HeatmapChartComponent,
+    DashedLineChartComponent,
+    PieChartComponent,
+    RadarChartComponent,
+    BarChartComponent,
+    BasicLineChartComponent,
+    LineDataLabelsChartComponent,
+    ZoomableTimeseriesChartComponent,
+    GroupedBarChartComponent,
+    StackedBarChartComponent,
+    ImageBarChartComponent,
+    SimplePieChartComponent,
+    UpdatePieChartComponent,
+    MonochomePieChartComponent,
+    DynamicUpdatingChartComponent
+  ],
+  imports: [
+    CommonModule,
+    ChartsRoutingModule,
+    BreadcrumbComponent,
+    ChartSizePipe,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts')
+    }),
+    MatToolbarModule,
+    MatCardModule,
+    MatButtonModule,
+    MatGridListModule
+  ],
+  providers: [
+    ChartsService
+  ]
+})
+export class ChartsModule { }
diff --git a/src/app/modules/templates/charts/components/bar-chart/bar-chart.component.html b/src/app/modules/templates/charts/components/bar-chart/bar-chart.component.html
new file mode 100644
index 0000000..5d7d24d
--- /dev/null
+++ b/src/app/modules/templates/charts/components/bar-chart/bar-chart.component.html
@@ -0,0 +1,7 @@
+<div
+  echarts
+  *ngIf="apexBarChartOptions?.chart"
+  [options]="echartsOptions"
+  [style.height]="apexBarChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexBarChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/bar-chart/bar-chart.component.scss b/src/app/modules/templates/charts/components/bar-chart/bar-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/bar-chart/bar-chart.component.ts b/src/app/modules/templates/charts/components/bar-chart/bar-chart.component.ts
new file mode 100644
index 0000000..e0ef82a
--- /dev/null
+++ b/src/app/modules/templates/charts/components/bar-chart/bar-chart.component.ts
@@ -0,0 +1,117 @@
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import { EChartsOption } from 'echarts';
+
+import {ChartOptions} from '../../models/chart-options';
+import { colors } from '../../../../../consts';
+import {BarChartData} from '../../models/bar-chart-data';
+
+@Component({
+    selector: 'app-bar-chart',
+    templateUrl: './bar-chart.component.html',
+    styleUrls: ['./bar-chart.component.scss'],
+    standalone: false
+})
+export class BarChartComponent implements OnChanges {
+  private static readonly DEFAULT_COLORS = [colors.PINK];
+  @Input() barChartData: BarChartData | null = null;
+  @Input() currentTheme: string = '';
+  public apexBarChartOptions: Partial<ChartOptions> | null = null;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexBarChartOptions;
+    if (!options) {
+      return {};
+    }
+
+    const xaxis = options.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const sourceSeries = (
+      Array.isArray(options.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const series = sourceSeries.map((item) => ({
+      type: 'bar',
+      name: item.name ?? '',
+      data: item.data ?? [],
+      barMaxWidth: 28
+    }));
+
+    return {
+      color: options.colors ?? BarChartComponent.DEFAULT_COLORS,
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow' }
+      },
+      grid: {
+        top: 8,
+        left: 8,
+        right: 8,
+        bottom: 8,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'value',
+        splitLine: { show: false }
+      },
+      yAxis: {
+        type: 'category',
+        data: categories,
+        axisTick: { show: false }
+      },
+      series
+    } as EChartsOption;
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['barChartData'] || changes['currentTheme']) {
+      if (!this.hasChartData()) {
+        this.apexBarChartOptions = null;
+        return;
+      }
+      this.apexBarChartOptions = this.buildChartOptions();
+    }
+  }
+
+  private buildChartOptions(): Partial<ChartOptions> {
+    return {
+      series: this.barChartData?.series ?? [],
+      chart: {
+        type: "bar",
+        height: 350,
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          horizontal: true
+        }
+      },
+      colors: [
+        this.resolvePrimaryColor()
+      ],
+      dataLabels: {
+        enabled: false
+      },
+      xaxis: {
+        categories: this.barChartData?.categories ?? []
+      }
+    };
+  }
+
+  private resolvePrimaryColor(): string {
+    if (this.currentTheme === 'blue') {
+      return colors.BLUE;
+    }
+    if (this.currentTheme === 'green') {
+      return colors.GREEN;
+    }
+    return colors.PINK;
+  }
+
+  private hasChartData(): boolean {
+    return !!this.barChartData?.series?.length && !!this.barChartData?.categories?.length;
+  }
+}
diff --git a/src/app/modules/templates/charts/components/basic-line-chart/basic-line-chart.component.html b/src/app/modules/templates/charts/components/basic-line-chart/basic-line-chart.component.html
new file mode 100644
index 0000000..932a1bf
--- /dev/null
+++ b/src/app/modules/templates/charts/components/basic-line-chart/basic-line-chart.component.html
@@ -0,0 +1,7 @@
+<div
+  echarts
+  *ngIf="apexBasicLineChartOptions?.chart"
+  [options]="echartsOptions"
+  [style.height]="apexBasicLineChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexBasicLineChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/basic-line-chart/basic-line-chart.component.scss b/src/app/modules/templates/charts/components/basic-line-chart/basic-line-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/basic-line-chart/basic-line-chart.component.ts b/src/app/modules/templates/charts/components/basic-line-chart/basic-line-chart.component.ts
new file mode 100644
index 0000000..1016736
--- /dev/null
+++ b/src/app/modules/templates/charts/components/basic-line-chart/basic-line-chart.component.ts
@@ -0,0 +1,126 @@
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {LineChartData} from '../../models';
+import {ChartOptions} from '../../models/chart-options';
+
+import { colors } from '../../../../../consts';
+
+@Component({
+    selector: 'app-basic-line-chart',
+    templateUrl: './basic-line-chart.component.html',
+    styleUrls: ['./basic-line-chart.component.scss'],
+    standalone: false
+})
+export class BasicLineChartComponent implements OnChanges {
+  private static readonly DEFAULT_COLORS = [colors.PINK];
+  @Input() basicLineChartData: LineChartData | null = null;
+  @Input() currentTheme: string = '';
+  public apexBasicLineChartOptions: Partial<ChartOptions> | null = null;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexBasicLineChartOptions;
+    if (!options) {
+      return {};
+    }
+
+    const xaxis = options.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const stroke = options.stroke as { curve?: string } | undefined;
+    const sourceSeries = (
+      Array.isArray(options.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const series = sourceSeries.map((item) => ({
+      type: 'line',
+      name: item.name ?? '',
+      data: item.data ?? [],
+      smooth: stroke?.curve === 'smooth',
+      showSymbol: false
+    }));
+
+    return {
+      color: options.colors ?? BasicLineChartComponent.DEFAULT_COLORS,
+      tooltip: { trigger: 'axis' },
+      grid: {
+        top: 16,
+        left: 12,
+        right: 12,
+        bottom: 12,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: categories,
+        boundaryGap: false
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: { show: false }
+      },
+      series
+    } as EChartsOption;
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['basicLineChartData'] || changes['currentTheme']) {
+      if (!this.hasChartData()) {
+        this.apexBasicLineChartOptions = null;
+        return;
+      }
+      this.apexBasicLineChartOptions = this.buildChartOptions();
+    }
+  }
+
+  private buildChartOptions(): Partial<ChartOptions> {
+    return {
+      series: this.basicLineChartData?.series ?? [],
+      chart: {
+        height: 350,
+        type: "line",
+        zoom: {
+          enabled: false
+        },
+        toolbar: {
+          show: false
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      colors: [
+        this.resolvePrimaryColor()
+      ],
+      stroke: {
+        curve: "straight"
+      },
+      grid: {
+        row: {
+          colors: [
+            this.resolvePrimaryColor(),
+            "transparent"
+          ],
+          opacity: 0.2
+        }
+      },
+      xaxis: {
+        categories: this.basicLineChartData?.categories ?? []
+      }
+    };
+  }
+
+  private resolvePrimaryColor(): string {
+    if (this.currentTheme === 'blue') {
+      return colors.BLUE;
+    }
+    if (this.currentTheme === 'green') {
+      return colors.GREEN;
+    }
+    return colors.PINK;
+  }
+
+  private hasChartData(): boolean {
+    return !!this.basicLineChartData?.series?.length && !!this.basicLineChartData?.categories?.length;
+  }
+}
diff --git a/src/app/modules/templates/charts/components/dashed-line-chart/dashed-line-chart.component.html b/src/app/modules/templates/charts/components/dashed-line-chart/dashed-line-chart.component.html
new file mode 100644
index 0000000..e39921d
--- /dev/null
+++ b/src/app/modules/templates/charts/components/dashed-line-chart/dashed-line-chart.component.html
@@ -0,0 +1,7 @@
+<div
+  echarts
+  *ngIf="apexDashedLineChartOptions?.chart"
+  [options]="echartsOptions"
+  [style.height]="apexDashedLineChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexDashedLineChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/dashed-line-chart/dashed-line-chart.component.scss b/src/app/modules/templates/charts/components/dashed-line-chart/dashed-line-chart.component.scss
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/app/modules/templates/charts/components/dashed-line-chart/dashed-line-chart.component.scss
@@ -0,0 +1 @@
+
diff --git a/src/app/modules/templates/charts/components/dashed-line-chart/dashed-line-chart.component.ts b/src/app/modules/templates/charts/components/dashed-line-chart/dashed-line-chart.component.ts
new file mode 100644
index 0000000..dd9175e
--- /dev/null
+++ b/src/app/modules/templates/charts/components/dashed-line-chart/dashed-line-chart.component.ts
@@ -0,0 +1,157 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { EChartsOption } from 'echarts';
+
+import { DashedLineChartData } from '../../models';
+import {colors} from '../../../../../consts';
+import { ChartOptions } from '../../models/chart-options';
+
+@Component({
+    selector: 'app-dashed-line-chart',
+    templateUrl: './dashed-line-chart.component.html',
+    styleUrls: ['./dashed-line-chart.component.scss'],
+    standalone: false
+})
+export class DashedLineChartComponent implements OnChanges {
+  private static readonly DEFAULT_COLORS = [colors.BLUE, colors.YELLOW, colors.PINK];
+  @Input() dashedLineChartData: DashedLineChartData | null = null;
+  public apexDashedLineChartOptions: Partial<ChartOptions> | null = null;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexDashedLineChartOptions;
+    if (!options) {
+      return {};
+    }
+
+    const xaxis = options.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const stroke = options.stroke as {
+      dashArray?: number[];
+      curve?: string;
+      width?: number;
+    } | undefined;
+    const dashArray = Array.isArray(stroke?.dashArray) ? stroke.dashArray : [];
+    const sourceSeries = (
+      Array.isArray(options.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const series = sourceSeries.map((item, index: number) => ({
+      type: 'line',
+      name: item.name ?? '',
+      data: item.data ?? [],
+      smooth: stroke?.curve === 'smooth',
+      showSymbol: false,
+      lineStyle: {
+        width: stroke?.width ?? 2,
+        type: dashArray[index] ? 'dashed' : 'solid'
+      }
+    }));
+
+    return {
+      color: options.colors ?? DashedLineChartComponent.DEFAULT_COLORS,
+      tooltip: { trigger: 'axis' },
+      legend: { show: false },
+      grid: {
+        top: 16,
+        left: 12,
+        right: 12,
+        bottom: 24,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: categories
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            color: colors.LIGHT_BLUE
+          }
+        }
+      },
+      series
+    } as EChartsOption;
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['dashedLineChartData']) {
+      if (!this.hasChartData()) {
+        this.apexDashedLineChartOptions = null;
+        return;
+      }
+      this.apexDashedLineChartOptions = this.buildChartOptions();
+    }
+  }
+
+  private buildChartOptions(): Partial<ChartOptions> {
+    return {
+      series: this.dashedLineChartData?.series ?? [],
+      chart: {
+        height: 350,
+        type: 'line',
+        toolbar: {
+          show: false
+        }
+      },
+      colors: [colors.BLUE, colors.YELLOW, colors.PINK],
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        width: 2,
+        curve: 'smooth',
+        dashArray: [0, 8, 5]
+      },
+      legend: {
+        show: false
+      },
+      markers: {
+        size: 0,
+        hover: {
+          sizeOffset: 6
+        }
+      },
+      xaxis: {
+        labels: {
+          trim: false,
+          rotate: -45
+        },
+        categories: this.dashedLineChartData?.categories ?? [],
+      },
+      tooltip: {
+        y: [
+          {
+            title: {
+              formatter(val) {
+                return val + ' (mins)';
+              }
+            }
+          },
+          {
+            title: {
+              formatter(val) {
+                return val + ' per session';
+              }
+            }
+          },
+          {
+            title: {
+              formatter(val) {
+                return val;
+              }
+            }
+          }
+        ]
+      },
+      grid: {
+        borderColor: colors.LIGHT_BLUE
+      }
+    };
+  }
+
+  private hasChartData(): boolean {
+    return !!this.dashedLineChartData?.series?.length && !!this.dashedLineChartData?.categories?.length;
+  }
+}
diff --git a/src/app/modules/templates/charts/components/dynamic-updating-chart/dynamic-updating-chart.component.html b/src/app/modules/templates/charts/components/dynamic-updating-chart/dynamic-updating-chart.component.html
new file mode 100644
index 0000000..49a8f36
--- /dev/null
+++ b/src/app/modules/templates/charts/components/dynamic-updating-chart/dynamic-updating-chart.component.html
@@ -0,0 +1,6 @@
+<div
+  echarts
+  [options]="echartsOptions"
+  [style.height]="apexDynamicUpdatingChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexDynamicUpdatingChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/dynamic-updating-chart/dynamic-updating-chart.component.scss b/src/app/modules/templates/charts/components/dynamic-updating-chart/dynamic-updating-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/dynamic-updating-chart/dynamic-updating-chart.component.ts b/src/app/modules/templates/charts/components/dynamic-updating-chart/dynamic-updating-chart.component.ts
new file mode 100644
index 0000000..626f860
--- /dev/null
+++ b/src/app/modules/templates/charts/components/dynamic-updating-chart/dynamic-updating-chart.component.ts
@@ -0,0 +1,171 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {LineChartData} from '../../models';
+import {ChartOptions} from '../../models/chart-options';
+
+import {colors} from '../../../../../consts';
+
+
+@Component({
+    selector: 'app-dynamic-updating-chart',
+    templateUrl: './dynamic-updating-chart.component.html',
+    styleUrls: ['./dynamic-updating-chart.component.scss'],
+    standalone: false
+})
+export class DynamicUpdatingChartComponent implements OnInit, OnChanges, OnDestroy {
+  private static readonly DEFAULT_COLORS = [colors.PINK];
+  @Input() dynamicUpdatingChartData: LineChartData;
+  @Input() currentTheme: string;
+
+  public apexDynamicUpdatingChartOptions: Partial<ChartOptions> = {};
+  public colors: typeof colors = colors;
+  public interval?: ReturnType<typeof setInterval>;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexDynamicUpdatingChartOptions;
+    const xaxis = options?.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const stroke = options?.stroke as { curve?: string } | undefined;
+    const sourceSeries = (
+      Array.isArray(options?.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const series = sourceSeries.map((item) => ({
+      type: 'line',
+      name: item.name ?? '',
+      data: item.data ?? [],
+      smooth: stroke?.curve === 'smooth',
+      showSymbol: false,
+      areaStyle: { opacity: 0.3 }
+    }));
+
+    return {
+      color: options?.colors ?? DynamicUpdatingChartComponent.DEFAULT_COLORS,
+      tooltip: { trigger: 'axis' },
+      legend: { show: false },
+      grid: {
+        top: 16,
+        left: 12,
+        right: 12,
+        bottom: 16,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: categories,
+        boundaryGap: false
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart();
+    this.interval = setInterval(() => this.updateChart(), 3000);
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    const currentThemeChange = changes['currentTheme'];
+    if (currentThemeChange?.currentValue && this.apexDynamicUpdatingChartOptions) {
+      this.apexDynamicUpdatingChartOptions = {
+        ...this.apexDynamicUpdatingChartOptions,
+        colors: [
+          currentThemeChange.currentValue === 'blue'
+            ? colors.BLUE
+            : this.currentTheme === 'green'
+            ? colors.GREEN
+            : colors.PINK
+        ],
+      };
+    }
+  }
+
+  public ngOnDestroy(): void {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+  }
+
+  public updateChart(): void {
+    this.apexDynamicUpdatingChartOptions = {
+      ...this.apexDynamicUpdatingChartOptions,
+      series: [
+        {
+          name: 'series1',
+          data: [
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100)
+          ]
+        }
+      ]
+    };
+  }
+
+  public initChart(): void {
+    this.apexDynamicUpdatingChartOptions = {
+      series: [
+        {
+          name: 'series1',
+          data: [
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100)
+          ]
+        }
+      ],
+      chart: {
+        height: 350,
+        type: 'area',
+        toolbar: {
+          show: false
+        }
+      },
+      legend: {
+        show: false
+      },
+      dataLabels: {
+        enabled: false
+      },
+      colors: [
+        this.currentTheme === 'blue'
+          ? colors.BLUE
+          : this.currentTheme === 'green'
+          ? colors.GREEN
+          : colors.PINK
+      ],
+      stroke: {
+        curve: 'smooth',
+      },
+      xaxis: {
+        type: 'datetime',
+        categories: [
+          '2018-09-19T00:00:00.000Z',
+          '2018-09-19T01:30:00.000Z',
+          '2018-09-19T02:30:00.000Z',
+          '2018-09-19T03:30:00.000Z',
+          '2018-09-19T04:30:00.000Z',
+          '2018-09-19T05:30:00.000Z',
+          '2018-09-19T06:30:00.000Z'
+        ]
+      },
+      tooltip: {
+        x: {
+          format: 'dd/MM/yy HH:mm'
+        }
+      }
+    };
+  }
+}
diff --git a/src/app/modules/templates/charts/components/grouped-bar-chart/grouped-bar-chart.component.html b/src/app/modules/templates/charts/components/grouped-bar-chart/grouped-bar-chart.component.html
new file mode 100644
index 0000000..8369a74
--- /dev/null
+++ b/src/app/modules/templates/charts/components/grouped-bar-chart/grouped-bar-chart.component.html
@@ -0,0 +1,7 @@
+<div
+  echarts
+  *ngIf="apexGroupedBarChartOptions?.chart"
+  [options]="echartsOptions"
+  [style.height]="apexGroupedBarChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexGroupedBarChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/grouped-bar-chart/grouped-bar-chart.component.scss b/src/app/modules/templates/charts/components/grouped-bar-chart/grouped-bar-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/grouped-bar-chart/grouped-bar-chart.component.ts b/src/app/modules/templates/charts/components/grouped-bar-chart/grouped-bar-chart.component.ts
new file mode 100644
index 0000000..bf5a996
--- /dev/null
+++ b/src/app/modules/templates/charts/components/grouped-bar-chart/grouped-bar-chart.component.ts
@@ -0,0 +1,123 @@
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {BarChartData} from '../../models';
+import {ChartOptions} from '../../models/chart-options';
+import {colors} from '../../../../../consts';
+
+@Component({
+    selector: 'app-grouped-bar-chart',
+    templateUrl: './grouped-bar-chart.component.html',
+    styleUrls: ['./grouped-bar-chart.component.scss'],
+    standalone: false
+})
+export class GroupedBarChartComponent implements OnChanges {
+  private static readonly DEFAULT_COLORS = [colors.BLUE, colors.GREEN];
+  @Input() groupedBarChartData: BarChartData | null = null;
+  public apexGroupedBarChartOptions: Partial<ChartOptions> | null = null;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexGroupedBarChartOptions;
+    if (!options) {
+      return {};
+    }
+
+    const xaxis = options.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const sourceSeries = (
+      Array.isArray(options.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const series = sourceSeries.map((item) => ({
+      type: 'bar',
+      name: item.name ?? '',
+      data: item.data ?? [],
+      label: {
+        show: true,
+        position: 'insideLeft',
+        color: '#fff'
+      },
+      barMaxWidth: 24
+    }));
+
+    return {
+      color: options.colors ?? GroupedBarChartComponent.DEFAULT_COLORS,
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow' }
+      },
+      legend: { show: false },
+      grid: {
+        top: 12,
+        left: 8,
+        right: 8,
+        bottom: 8,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'value'
+      },
+      yAxis: {
+        type: 'category',
+        data: categories
+      },
+      series
+    } as EChartsOption;
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['groupedBarChartData']) {
+      if (!this.hasChartData()) {
+        this.apexGroupedBarChartOptions = null;
+        return;
+      }
+      this.apexGroupedBarChartOptions = this.buildChartOptions();
+    }
+  }
+
+  private buildChartOptions(): Partial<ChartOptions> {
+    return {
+      series: this.groupedBarChartData?.series ?? [],
+      chart: {
+        type: 'bar',
+        height: 350,
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          horizontal: true,
+          dataLabels: {
+            position: 'top',
+          },
+        }
+      },
+      colors: [colors.BLUE,colors.GREEN],
+      dataLabels: {
+        enabled: true,
+        offsetX: -6,
+        style: {
+          fontSize: '12px',
+          colors: ['#fff']
+        }
+      },
+      stroke: {
+        show: true,
+        width: 1,
+        colors: ['#fff']
+      },
+      xaxis: {
+        categories: this.groupedBarChartData?.categories ?? []
+      },
+      legend: {
+        show: false
+      }
+    };
+  }
+
+  private hasChartData(): boolean {
+    return !!this.groupedBarChartData?.series?.length && !!this.groupedBarChartData?.categories?.length;
+  }
+}
diff --git a/src/app/modules/templates/charts/components/heatmap-chart/heatmap-chart.component.html b/src/app/modules/templates/charts/components/heatmap-chart/heatmap-chart.component.html
new file mode 100644
index 0000000..b198d36
--- /dev/null
+++ b/src/app/modules/templates/charts/components/heatmap-chart/heatmap-chart.component.html
@@ -0,0 +1,6 @@
+<div
+  echarts
+  [options]="echartsOptions"
+  [style.height]="apexHeatmapChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexHeatmapChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/heatmap-chart/heatmap-chart.component.scss b/src/app/modules/templates/charts/components/heatmap-chart/heatmap-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/heatmap-chart/heatmap-chart.component.ts b/src/app/modules/templates/charts/components/heatmap-chart/heatmap-chart.component.ts
new file mode 100644
index 0000000..03d243f
--- /dev/null
+++ b/src/app/modules/templates/charts/components/heatmap-chart/heatmap-chart.component.ts
@@ -0,0 +1,143 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { EChartsOption } from 'echarts';
+
+import { HeatmapChartData } from '../../models';
+import { colors } from '../../../../../consts';
+import { ChartOptions } from '../../models/chart-options';
+
+@Component({
+    selector: 'app-heatmap-chart',
+    templateUrl: './heatmap-chart.component.html',
+    styleUrls: ['./heatmap-chart.component.scss'],
+    standalone: false
+})
+export class HeatmapChartComponent implements OnInit, OnChanges {
+  private static readonly DEFAULT_COLORS = [colors.PINK];
+  @Input() heatmapChartData: HeatmapChartData;
+  @Input() currentTheme: string;
+
+  public apexHeatmapChartOptions: Partial<ChartOptions> = {};
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexHeatmapChartOptions;
+    const rawSeries = (
+      Array.isArray(options?.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: Array<{ x?: string | number; y?: number; value?: number }> }>;
+    const firstSeriesData = Array.isArray(rawSeries[0]?.data) ? rawSeries[0].data : [];
+    const xLabels = firstSeriesData.map((item) => item.x ?? '');
+    const yLabels = rawSeries.map((item) => item.name ?? '');
+    const data: [number, number, number][] = [];
+
+    rawSeries.forEach((seriesItem, yIndex: number) => {
+      (seriesItem.data ?? []).forEach((point, xIndex: number) => {
+        data.push([xIndex, yIndex, Number(point.y ?? point.value ?? 0)]);
+      });
+    });
+
+    return {
+      color: options?.colors ?? HeatmapChartComponent.DEFAULT_COLORS,
+      tooltip: {
+        position: 'top',
+        formatter: (params: unknown) => {
+          const dataPoint =
+            typeof params === 'object' &&
+            params !== null &&
+            Array.isArray((params as { data?: unknown }).data)
+              ? ((params as { data: unknown[] }).data as [number, number, number])
+              : [0, 0, 0];
+          return `${yLabels[dataPoint[1]]}: ${dataPoint[2]}`;
+        }
+      },
+      grid: {
+        top: 20,
+        right: 8,
+        bottom: 20,
+        left: 48
+      },
+      xAxis: {
+        type: 'category',
+        data: xLabels,
+        splitArea: { show: true }
+      },
+      yAxis: {
+        type: 'category',
+        data: yLabels,
+        splitArea: { show: true }
+      },
+      visualMap: {
+        min: 0,
+        max: 100,
+        calculable: false,
+        orient: 'horizontal',
+        left: 'center',
+        bottom: 0,
+        inRange: {
+          color: ['rgba(255,255,255,0.08)', (options?.colors ?? HeatmapChartComponent.DEFAULT_COLORS)[0]]
+        }
+      },
+      series: [
+        {
+          type: 'heatmap',
+          data,
+          label: { show: false },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 8,
+              shadowColor: 'rgba(0, 0, 0, 0.35)'
+            }
+          }
+        }
+      ]
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart()
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    const currentThemeChange = changes['currentTheme'];
+    if (currentThemeChange?.currentValue && this.apexHeatmapChartOptions) {
+      this.apexHeatmapChartOptions = {
+        ...this.apexHeatmapChartOptions,
+        colors: [
+          currentThemeChange.currentValue === 'blue'
+            ? colors.BLUE
+            : this.currentTheme === 'green'
+            ? colors.GREEN
+            : colors.PINK
+        ],
+      };
+    }
+  }
+
+  public initChart(): void {
+    this.apexHeatmapChartOptions = {
+      series: this.heatmapChartData.series,
+      chart: {
+        height: 350,
+        type: 'heatmap',
+        toolbar: {
+          show: false
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      colors: [
+        this.currentTheme === 'blue'
+          ? colors.BLUE
+          : this.currentTheme === 'green'
+          ? colors.GREEN
+          : colors.PINK
+      ],
+      xaxis: {
+        labels: {
+          rotate: 0
+        }
+      }
+    };
+  }
+}
diff --git a/src/app/modules/templates/charts/components/image-bar-chart/image-bar-chart.component.html b/src/app/modules/templates/charts/components/image-bar-chart/image-bar-chart.component.html
new file mode 100644
index 0000000..af94fad
--- /dev/null
+++ b/src/app/modules/templates/charts/components/image-bar-chart/image-bar-chart.component.html
@@ -0,0 +1,7 @@
+<div
+  echarts
+  *ngIf="apexImageBarChartOptions?.chart"
+  [options]="echartsOptions"
+  [style.height]="apexImageBarChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexImageBarChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/image-bar-chart/image-bar-chart.component.scss b/src/app/modules/templates/charts/components/image-bar-chart/image-bar-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/image-bar-chart/image-bar-chart.component.ts b/src/app/modules/templates/charts/components/image-bar-chart/image-bar-chart.component.ts
new file mode 100644
index 0000000..dbb8cea
--- /dev/null
+++ b/src/app/modules/templates/charts/components/image-bar-chart/image-bar-chart.component.ts
@@ -0,0 +1,123 @@
+import {Component} from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {ChartOptions} from '../../models/chart-options';
+
+import {colors} from '../../../../../consts';
+
+@Component({
+    selector: 'app-image-bar-chart',
+    templateUrl: './image-bar-chart.component.html',
+    styleUrls: ['./image-bar-chart.component.scss'],
+    standalone: false
+})
+export class ImageBarChartComponent {
+  private static readonly DEFAULT_COLORS = [colors.BLUE];
+  public apexImageBarChartOptions: Partial<ChartOptions> = this.buildChartOptions();
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexImageBarChartOptions;
+    const xaxis = options?.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const sourceSeries = (
+      Array.isArray(options?.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const firstSeries = sourceSeries[0];
+
+    return {
+      color: options?.colors ?? ImageBarChartComponent.DEFAULT_COLORS,
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow' }
+      },
+      grid: {
+        top: 8,
+        left: 8,
+        right: 8,
+        bottom: 8,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'value',
+        splitLine: { show: false }
+      },
+      yAxis: {
+        type: 'category',
+        data: categories,
+        axisLabel: { show: false },
+        axisTick: { show: false }
+      },
+      series: [
+        {
+          type: 'bar',
+          name: firstSeries?.name ?? '',
+          data: firstSeries?.data ?? [],
+          barWidth: '85%'
+        }
+      ]
+    } as EChartsOption;
+  }
+
+  private buildChartOptions(): Partial<ChartOptions> {
+    const data = [
+      2, 4, 3, 4, 3, 5, 5, 6.5, 6, 5, 4, 5, 8, 7, 7, 8, 8, 10, 9, 9, 12, 12,
+      11, 12, 13, 14, 16, 14, 15, 17, 19, 21
+    ];
+    const categories = data.map((_, index) => `${index + 1}`);
+
+    return {
+      series: [
+        {
+          name: 'coins',
+          data
+        }
+      ],
+      chart: {
+        type: 'bar',
+        height: 350,
+        animations: {
+          enabled: false
+        },
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          horizontal: true,
+          barHeight: '85%'
+        },
+      },
+      colors: [colors.BLUE],
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        colors: ["#fff"],
+        width: 0.2
+      },
+      xaxis: {
+        categories,
+        labels: {
+          show: false
+        }
+      },
+      grid: {
+        position: 'back'
+      },
+      yaxis: {
+        show: false
+      },
+      fill: {
+        type: 'image',
+        image: {
+          src: ['./assets/charts/12.jpg'],
+          width: 400,
+          height: 282
+        }
+      }
+    };
+  }
+}
diff --git a/src/app/modules/templates/charts/components/index.ts b/src/app/modules/templates/charts/components/index.ts
new file mode 100644
index 0000000..02da5bb
--- /dev/null
+++ b/src/app/modules/templates/charts/components/index.ts
@@ -0,0 +1,16 @@
+export * from './dashed-line-chart/dashed-line-chart.component';
+export * from './pie-chart/pie-chart.component';
+export * from './heatmap-chart/heatmap-chart.component';
+export * from './line-chart/line-chart.component';
+export * from './radar-chart/radar-chart.component';
+export * from './basic-line-chart/basic-line-chart.component';
+export * from './zoomable-timeseries-chart/zoomable-timeseries-chart.component';
+export * from './grouped-bar-chart/grouped-bar-chart.component';
+export * from './stacked-bar-chart/stacked-bar-chart.component';
+export * from './image-bar-chart/image-bar-chart.component';
+export * from './simple-pie-chart/simple-pie-chart.component';
+export * from './update-pie-chart/update-pie-chart.component';
+export * from './monochome-pie-chart/monochome-pie-chart.component';
+export * from './bar-chart/bar-chart.component';
+export * from './line-data-labels-chart/line-data-labels-chart.component';
+export * from './dynamic-updating-chart/dynamic-updating-chart.component';
diff --git a/src/app/modules/templates/charts/components/line-chart/line-chart.component.html b/src/app/modules/templates/charts/components/line-chart/line-chart.component.html
new file mode 100644
index 0000000..7038baa
--- /dev/null
+++ b/src/app/modules/templates/charts/components/line-chart/line-chart.component.html
@@ -0,0 +1,7 @@
+<div
+  echarts
+  *ngIf="apexLineChartOptions?.chart"
+  [options]="echartsOptions"
+  [style.height]="apexLineChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexLineChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/line-chart/line-chart.component.scss b/src/app/modules/templates/charts/components/line-chart/line-chart.component.scss
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/app/modules/templates/charts/components/line-chart/line-chart.component.scss
@@ -0,0 +1 @@
+
diff --git a/src/app/modules/templates/charts/components/line-chart/line-chart.component.ts b/src/app/modules/templates/charts/components/line-chart/line-chart.component.ts
new file mode 100644
index 0000000..9588f48
--- /dev/null
+++ b/src/app/modules/templates/charts/components/line-chart/line-chart.component.ts
@@ -0,0 +1,111 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { EChartsOption } from 'echarts';
+
+import { LineChartData } from '../../models';
+import { colors } from '../../../../../consts';
+import { ChartOptions } from '../../models/chart-options';
+
+@Component({
+    selector: 'app-line-chart',
+    templateUrl: './line-chart.component.html',
+    styleUrls: ['./line-chart.component.scss'],
+    standalone: false
+})
+export class LineChartComponent implements OnChanges {
+  private static readonly DEFAULT_COLORS = [colors.BLUE, colors.GREEN];
+  @Input() lineChartData: LineChartData | null = null;
+  public apexLineChartOptions: Partial<ChartOptions> | null = null;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexLineChartOptions;
+    if (!options) {
+      return {};
+    }
+
+    const xaxis = options.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const stroke = options.stroke as { curve?: string } | undefined;
+    const sourceSeries = (
+      Array.isArray(options.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const series = sourceSeries.map((item, index: number) => ({
+      type: 'line',
+      name: item.name ?? '',
+      data: item.data ?? [],
+      smooth: stroke?.curve === 'smooth',
+      showSymbol: false,
+      areaStyle: { opacity: index === 0 ? 0.3 : 0.18 }
+    }));
+
+    return {
+      color: options.colors ?? LineChartComponent.DEFAULT_COLORS,
+      tooltip: { trigger: 'axis' },
+      legend: { show: false },
+      grid: {
+        top: 16,
+        left: 12,
+        right: 12,
+        bottom: 16,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: categories,
+        boundaryGap: false
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series
+    } as EChartsOption;
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['lineChartData']) {
+      if (!this.hasChartData()) {
+        this.apexLineChartOptions = null;
+        return;
+      }
+      this.apexLineChartOptions = this.buildChartOptions();
+    }
+  }
+
+  private buildChartOptions(): Partial<ChartOptions> {
+    return {
+      series: this.lineChartData?.series ?? [],
+      chart: {
+        height: 350,
+        type: 'area',
+        toolbar: {
+          show: false
+        }
+      },
+      legend: {
+        show: false
+      },
+      dataLabels: {
+        enabled: false
+      },
+      colors: [colors.BLUE, colors.GREEN],
+      stroke: {
+        curve: 'smooth',
+      },
+      xaxis: {
+        type: 'datetime',
+        categories: this.lineChartData?.categories ?? []
+      },
+      tooltip: {
+        x: {
+          format: 'dd/MM/yy HH:mm'
+        }
+      }
+    };
+  }
+
+  private hasChartData(): boolean {
+    return !!this.lineChartData?.series?.length && !!this.lineChartData?.categories?.length;
+  }
+}
diff --git a/src/app/modules/templates/charts/components/line-data-labels-chart/line-data-labels-chart.component.html b/src/app/modules/templates/charts/components/line-data-labels-chart/line-data-labels-chart.component.html
new file mode 100644
index 0000000..c6f1d11
--- /dev/null
+++ b/src/app/modules/templates/charts/components/line-data-labels-chart/line-data-labels-chart.component.html
@@ -0,0 +1,7 @@
+<div
+  echarts
+  *ngIf="apexLineDataLabelsChartOptions?.chart"
+  [options]="echartsOptions"
+  [style.height]="apexLineDataLabelsChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexLineDataLabelsChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/line-data-labels-chart/line-data-labels-chart.component.scss b/src/app/modules/templates/charts/components/line-data-labels-chart/line-data-labels-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/line-data-labels-chart/line-data-labels-chart.component.ts b/src/app/modules/templates/charts/components/line-data-labels-chart/line-data-labels-chart.component.ts
new file mode 100644
index 0000000..6a62bf0
--- /dev/null
+++ b/src/app/modules/templates/charts/components/line-data-labels-chart/line-data-labels-chart.component.ts
@@ -0,0 +1,145 @@
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {LineChartData} from '../../models';
+import {ChartOptions} from '../../models/chart-options';
+
+import {colors} from '../../../../../consts';
+
+@Component({
+    selector: 'app-line-data-labels-chart',
+    templateUrl: './line-data-labels-chart.component.html',
+    styleUrls: ['./line-data-labels-chart.component.scss'],
+    standalone: false
+})
+export class LineDataLabelsChartComponent implements OnChanges {
+  private static readonly DEFAULT_COLORS = [colors.BLUE, colors.GREEN];
+  @Input() lineDataLabelsChartData: LineChartData | null = null;
+  @Input() currentTheme: string = '';
+  public apexLineDataLabelsChartOptions: Partial<ChartOptions> | null = null;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexLineDataLabelsChartOptions;
+    if (!options) {
+      return {};
+    }
+
+    const xaxis = options.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const stroke = options.stroke as { curve?: string } | undefined;
+    const markers = options.markers as { size?: number } | undefined;
+    const dataLabels = options.dataLabels as { enabled?: boolean } | undefined;
+    const sourceSeries = (
+      Array.isArray(options.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const series = sourceSeries.map((item) => ({
+      type: 'line',
+      name: item.name ?? '',
+      data: item.data ?? [],
+      smooth: stroke?.curve === 'smooth',
+      showSymbol: true,
+      symbolSize: markers?.size ?? 4,
+      label: { show: Boolean(dataLabels?.enabled) }
+    }));
+
+    return {
+      color: options.colors ?? LineDataLabelsChartComponent.DEFAULT_COLORS,
+      tooltip: { trigger: 'axis' },
+      legend: { show: false },
+      grid: {
+        top: 16,
+        left: 12,
+        right: 12,
+        bottom: 16,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: categories
+      },
+      yAxis: {
+        type: 'value',
+        splitLine: {
+          lineStyle: { color: colors.LIGHT_BLUE }
+        }
+      },
+      series
+    } as EChartsOption;
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes['lineDataLabelsChartData'] || changes['currentTheme']) {
+      if (!this.hasChartData()) {
+        this.apexLineDataLabelsChartOptions = null;
+        return;
+      }
+      this.apexLineDataLabelsChartOptions = this.buildChartOptions();
+    }
+  }
+
+  private buildChartOptions(): Partial<ChartOptions> {
+    return {
+      series: this.lineDataLabelsChartData?.series ?? [],
+      chart: {
+        height: 350,
+        type: "line",
+        dropShadow: {
+          enabled: true,
+          color: "#000",
+          top: 18,
+          left: 7,
+          blur: 10,
+          opacity: 0.2
+        },
+        toolbar: {
+          show: false
+        }
+      },
+      colors: [
+        colors.BLUE,
+        colors.GREEN
+      ],
+      dataLabels: {
+        enabled: true
+      },
+      stroke: {
+        curve: "smooth"
+      },
+      grid: {
+        borderColor: colors.LIGHT_BLUE,
+        row: {
+          colors: [
+            this.resolvePrimaryColor(),
+            "transparent"
+          ],
+          opacity: 0.2
+        }
+      },
+      markers: {
+        size: 1
+      },
+      xaxis: {
+        categories: this.lineDataLabelsChartData?.categories ?? []
+      },
+      legend: {
+        show: false
+      }
+    };
+  }
+
+  private resolvePrimaryColor(): string {
+    if (this.currentTheme === 'blue') {
+      return colors.BLUE;
+    }
+    if (this.currentTheme === 'green') {
+      return colors.GREEN;
+    }
+    return colors.PINK;
+  }
+
+  private hasChartData(): boolean {
+    return !!this.lineDataLabelsChartData?.series?.length && !!this.lineDataLabelsChartData?.categories?.length;
+  }
+}
diff --git a/src/app/modules/templates/charts/components/monochome-pie-chart/monochome-pie-chart.component.html b/src/app/modules/templates/charts/components/monochome-pie-chart/monochome-pie-chart.component.html
new file mode 100644
index 0000000..d81453d
--- /dev/null
+++ b/src/app/modules/templates/charts/components/monochome-pie-chart/monochome-pie-chart.component.html
@@ -0,0 +1,6 @@
+<div
+  echarts
+  [options]="echartsOptions"
+  [style.height]="apexPieChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexPieChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/monochome-pie-chart/monochome-pie-chart.component.scss b/src/app/modules/templates/charts/components/monochome-pie-chart/monochome-pie-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/monochome-pie-chart/monochome-pie-chart.component.ts b/src/app/modules/templates/charts/components/monochome-pie-chart/monochome-pie-chart.component.ts
new file mode 100644
index 0000000..3925f9f
--- /dev/null
+++ b/src/app/modules/templates/charts/components/monochome-pie-chart/monochome-pie-chart.component.ts
@@ -0,0 +1,80 @@
+import {Component, Input, OnInit} from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {PieChartData} from '../../models';
+
+import { colors } from '../../../../../consts';
+import {ChartOptions} from '../../models/chart-options';
+
+@Component({
+    selector: 'app-monochome-pie-chart',
+    templateUrl: './monochome-pie-chart.component.html',
+    styleUrls: ['./monochome-pie-chart.component.scss'],
+    standalone: false
+})
+export class MonochomePieChartComponent implements OnInit {
+  @Input() pieChartData: PieChartData;
+  public apexPieChartOptions: Partial<ChartOptions>;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexPieChartOptions;
+    const labels = Array.isArray(options?.labels) ? options.labels : [];
+    const values = Array.isArray(options?.series)
+      ? options.series.filter((item): item is number => typeof item === 'number')
+      : [];
+    const theme = options?.theme as { monochrome?: { color?: string } } | undefined;
+    const baseColor = theme?.monochrome?.color ?? colors.BLUE;
+    const data = values.map((value: number, index: number) => ({
+      value,
+      name: labels[index] ?? `Item ${index + 1}`
+    }));
+
+    return {
+      color: [baseColor],
+      tooltip: { trigger: 'item' },
+      legend: { show: false },
+      series: [
+        {
+          type: 'pie',
+          radius: '70%',
+          data,
+          label: { show: false }
+        }
+      ]
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart();
+  }
+
+  public initChart(): void {
+    this.apexPieChartOptions = {
+      series: [25, 15, 44, 55, 41, 17],
+      chart: {
+        height: '350',
+        type: 'pie',
+      },
+      labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+      theme: {
+        monochrome: {
+          enabled: true,
+          color: this.colors.BLUE
+        }
+      },
+      legend: {
+        show: false
+      },
+      responsive: [
+        {
+          breakpoint: 576,
+          options: {
+            chart: {
+              height: '150',
+            },
+          }
+        }
+      ]
+    };
+  }
+}
diff --git a/src/app/modules/templates/charts/components/pie-chart/pie-chart.component.html b/src/app/modules/templates/charts/components/pie-chart/pie-chart.component.html
new file mode 100644
index 0000000..c6b0ef1
--- /dev/null
+++ b/src/app/modules/templates/charts/components/pie-chart/pie-chart.component.html
@@ -0,0 +1,6 @@
+<div
+  echarts
+  [options]="echartsOptions"
+  [style.height]="apexPieChartOptions?.chart?.height | chartSize:'387px'"
+  [style.width]="apexPieChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/pie-chart/pie-chart.component.scss b/src/app/modules/templates/charts/components/pie-chart/pie-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/pie-chart/pie-chart.component.ts b/src/app/modules/templates/charts/components/pie-chart/pie-chart.component.ts
new file mode 100644
index 0000000..9deb3c4
--- /dev/null
+++ b/src/app/modules/templates/charts/components/pie-chart/pie-chart.component.ts
@@ -0,0 +1,76 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+
+import { PieChartData } from '../../models';
+import { colors } from '../../../../../consts';
+import { ChartOptions } from '../../models/chart-options';
+
+@Component({
+    selector: 'app-pie-chart',
+    templateUrl: './pie-chart.component.html',
+    styleUrls: ['./pie-chart.component.scss'],
+    standalone: false
+})
+export class PieChartComponent implements OnInit {
+  @Input() pieChartData: PieChartData;
+  public apexPieChartOptions: Partial<ChartOptions>;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexPieChartOptions;
+    const labels = Array.isArray(options?.labels) ? options.labels : [];
+    const values = Array.isArray(options?.series)
+      ? options.series.filter((item): item is number => typeof item === 'number')
+      : [];
+    const data = values.map((value: number, index: number) => ({
+      value,
+      name: labels[index] ?? `Item ${index + 1}`
+    }));
+
+    return {
+      color: options?.colors ?? [colors.BLUE, colors.YELLOW, colors.PINK, colors.GREEN, colors.VIOLET],
+      tooltip: { trigger: 'item' },
+      legend: {
+        show: true,
+        bottom: 0
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['52%', '72%'],
+          data,
+          label: { show: false }
+        }
+      ]
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart();
+  }
+
+  public initChart(): void {
+    this.apexPieChartOptions = {
+      series: this.pieChartData.series,
+      chart: {
+        type: 'donut',
+        height: 387
+      },
+      colors: [
+        colors.BLUE,
+        colors.YELLOW,
+        colors.PINK,
+        colors.GREEN,
+        colors.VIOLET
+      ],
+      legend: {
+        position: 'bottom',
+        itemMargin: {
+          horizontal: 5,
+          vertical: 30
+        },
+      },
+      labels: this.pieChartData.labels
+    };
+  }
+}
diff --git a/src/app/modules/templates/charts/components/radar-chart/radar-chart.component.html b/src/app/modules/templates/charts/components/radar-chart/radar-chart.component.html
new file mode 100644
index 0000000..a2ea79e
--- /dev/null
+++ b/src/app/modules/templates/charts/components/radar-chart/radar-chart.component.html
@@ -0,0 +1,6 @@
+<div
+  echarts
+  [options]="echartsOptions"
+  [style.height]="apexRadarChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexRadarChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/radar-chart/radar-chart.component.scss b/src/app/modules/templates/charts/components/radar-chart/radar-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/radar-chart/radar-chart.component.ts b/src/app/modules/templates/charts/components/radar-chart/radar-chart.component.ts
new file mode 100644
index 0000000..f72e200
--- /dev/null
+++ b/src/app/modules/templates/charts/components/radar-chart/radar-chart.component.ts
@@ -0,0 +1,103 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { RadarChartData } from '../../models';
+
+import { colors } from '../../../../../consts';
+import { ChartOptions } from '../../models/chart-options';
+
+@Component({
+    selector: 'app-radar-chart',
+    templateUrl: './radar-chart.component.html',
+    styleUrls: ['./radar-chart.component.scss'],
+    standalone: false
+})
+export class RadarChartComponent implements OnInit, OnChanges {
+  private static readonly DEFAULT_COLORS = [colors.PINK];
+  @Input() radarChartData: RadarChartData;
+  @Input() currentTheme: string;
+
+  public apexRadarChartOptions: Partial<ChartOptions> = {};
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexRadarChartOptions;
+    const xaxis = options?.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const sourceSeries = (
+      Array.isArray(options?.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const maxValue = Math.max(
+      ...sourceSeries.flatMap((item) =>
+        (item.data ?? []).map((value: number) => Number(value)),
+      ),
+      100
+    );
+    const indicator = categories.map((name: string | number) => ({ name: String(name), max: maxValue }));
+    const series = sourceSeries.map((item) => ({
+      type: 'radar',
+      name: item.name ?? '',
+      data: [
+        {
+          value: item.data ?? [],
+          name: item.name ?? ''
+        }
+      ],
+      areaStyle: { opacity: 0.25 }
+    }));
+
+    return {
+      color: options?.colors ?? RadarChartComponent.DEFAULT_COLORS,
+      tooltip: { trigger: 'item' },
+      legend: { show: false },
+      radar: {
+        indicator
+      },
+      series
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart();
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    const currentThemeChange = changes['currentTheme'];
+    if (currentThemeChange?.currentValue && this.apexRadarChartOptions) {
+      this.apexRadarChartOptions = {
+        ...this.apexRadarChartOptions,
+        colors: [
+          currentThemeChange.currentValue === 'blue'
+            ? colors.BLUE
+            : this.currentTheme === 'green'
+            ? colors.GREEN
+            : colors.PINK
+        ],
+      };
+    }
+  }
+
+  public initChart(): void {
+    this.apexRadarChartOptions = {
+      series: this.radarChartData.series,
+      chart: {
+        height: 350,
+        type: "radar",
+        toolbar: {
+          show: false
+        }
+      },
+      colors: [
+        this.currentTheme === 'blue'
+          ? colors.BLUE
+          : this.currentTheme === 'green'
+          ? colors.GREEN
+          : colors.PINK
+      ],
+      xaxis: {
+        categories: this.radarChartData.categories
+      }
+    };
+  }
+}
diff --git a/src/app/modules/templates/charts/components/simple-pie-chart/simple-pie-chart.component.html b/src/app/modules/templates/charts/components/simple-pie-chart/simple-pie-chart.component.html
new file mode 100644
index 0000000..d81453d
--- /dev/null
+++ b/src/app/modules/templates/charts/components/simple-pie-chart/simple-pie-chart.component.html
@@ -0,0 +1,6 @@
+<div
+  echarts
+  [options]="echartsOptions"
+  [style.height]="apexPieChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexPieChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/simple-pie-chart/simple-pie-chart.component.scss b/src/app/modules/templates/charts/components/simple-pie-chart/simple-pie-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/simple-pie-chart/simple-pie-chart.component.ts b/src/app/modules/templates/charts/components/simple-pie-chart/simple-pie-chart.component.ts
new file mode 100644
index 0000000..6fe47d9
--- /dev/null
+++ b/src/app/modules/templates/charts/components/simple-pie-chart/simple-pie-chart.component.ts
@@ -0,0 +1,59 @@
+import {Component, Input, OnInit} from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {PieChartData} from '../../models';
+import {ChartOptions} from '../../models/chart-options';
+
+import {colors} from '../../../../../consts';
+
+@Component({
+    selector: 'app-simple-pie-chart',
+    templateUrl: './simple-pie-chart.component.html',
+    styleUrls: ['./simple-pie-chart.component.scss'],
+    standalone: false
+})
+export class SimplePieChartComponent implements OnInit {
+  @Input() pieChartData: PieChartData;
+  public apexPieChartOptions: Partial<ChartOptions>;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexPieChartOptions;
+    const labels = Array.isArray(options?.labels) ? options.labels : [];
+    const values = Array.isArray(options?.series)
+      ? options.series.filter((item): item is number => typeof item === 'number')
+      : [];
+    const data = values.map((value: number, index: number) => ({
+      value,
+      name: labels[index] ?? `Item ${index + 1}`
+    }));
+
+    return {
+      color: options?.colors ?? [colors.BLUE, colors.GREEN, colors.YELLOW, colors.VIOLET, colors.PINK],
+      tooltip: { trigger: 'item' },
+      series: [
+        {
+          type: 'pie',
+          radius: '70%',
+          data,
+          label: { show: false }
+        }
+      ]
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart();
+  }
+
+  public initChart(): void {
+    this.apexPieChartOptions = {
+      series: [44, 55, 13, 43, 22],
+      chart: {
+        height: 350,
+        type: 'pie',
+      },
+      colors: [colors.BLUE, colors.GREEN, colors.YELLOW, colors.VIOLET, colors.PINK],
+      labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
+    };
+  }
+}
diff --git a/src/app/modules/templates/charts/components/stacked-bar-chart/stacked-bar-chart.component.html b/src/app/modules/templates/charts/components/stacked-bar-chart/stacked-bar-chart.component.html
new file mode 100644
index 0000000..58c3aee
--- /dev/null
+++ b/src/app/modules/templates/charts/components/stacked-bar-chart/stacked-bar-chart.component.html
@@ -0,0 +1,7 @@
+<div
+  echarts
+  *ngIf="apexStackedBarChartOptions?.chart"
+  [options]="echartsOptions"
+  [style.height]="apexStackedBarChartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="apexStackedBarChartOptions?.chart?.width | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/stacked-bar-chart/stacked-bar-chart.component.scss b/src/app/modules/templates/charts/components/stacked-bar-chart/stacked-bar-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/stacked-bar-chart/stacked-bar-chart.component.ts b/src/app/modules/templates/charts/components/stacked-bar-chart/stacked-bar-chart.component.ts
new file mode 100644
index 0000000..48f0a1a
--- /dev/null
+++ b/src/app/modules/templates/charts/components/stacked-bar-chart/stacked-bar-chart.component.ts
@@ -0,0 +1,128 @@
+import {Component} from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {ChartOptions} from '../../models/chart-options';
+
+import {colors} from '../../../../../consts';
+
+@Component({
+    selector: 'app-stacked-bar-chart',
+    templateUrl: './stacked-bar-chart.component.html',
+    styleUrls: ['./stacked-bar-chart.component.scss'],
+    standalone: false
+})
+export class StackedBarChartComponent {
+  private static readonly DEFAULT_COLORS = [
+    colors.GREEN,
+    colors.BLUE,
+    colors.PINK,
+    colors.VIOLET,
+    colors.YELLOW,
+  ];
+  public apexStackedBarChartOptions: Partial<ChartOptions> = this.buildChartOptions();
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexStackedBarChartOptions;
+    const xaxis = options?.xaxis as { categories?: Array<string | number> } | undefined;
+    const categories = xaxis?.categories ?? [];
+    const sourceSeries = (
+      Array.isArray(options?.series)
+        ? options.series.filter((item) => typeof item === 'object' && item !== null)
+        : []
+    ) as Array<{ name?: string; data?: number[] }>;
+    const series = sourceSeries.map((item) => ({
+      type: 'bar',
+      name: item.name ?? '',
+      stack: 'total',
+      data: item.data ?? [],
+      barMaxWidth: 24
+    }));
+
+    return {
+      color: options?.colors ?? StackedBarChartComponent.DEFAULT_COLORS,
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow' }
+      },
+      legend: { show: false },
+      grid: {
+        top: 12,
+        left: 8,
+        right: 8,
+        bottom: 8,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'value',
+        axisLabel: {
+          formatter: (value: number) => `${value}K`
+        }
+      },
+      yAxis: {
+        type: 'category',
+        data: categories
+      },
+      series
+    } as EChartsOption;
+  }
+
+  private buildChartOptions(): Partial<ChartOptions> {
+    return {
+      series: [{
+        name: 'Marine Sprite',
+        data: [44, 55, 41, 37, 22, 43, 21]
+      }, {
+        name: 'Striking Calf',
+        data: [53, 32, 33, 52, 13, 43, 32]
+      }, {
+        name: 'Tank Picture',
+        data: [12, 17, 11, 9, 15, 11, 20]
+      }, {
+        name: 'Bucket Slope',
+        data: [9, 7, 5, 8, 6, 9, 4]
+      }, {
+        name: 'Reborn Kid',
+        data: [25, 12, 19, 32, 25, 24, 10]
+      }],
+      chart: {
+        type: 'bar',
+        height: 350,
+        stacked: true,
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          horizontal: true,
+        },
+      },
+      colors: [colors.GREEN, colors.BLUE, colors.PINK, colors.VIOLET, colors.YELLOW],
+      stroke: {
+        width: 1,
+        colors: ['#fff']
+      },
+      xaxis: {
+        categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
+        labels: {
+          formatter: function (val) {
+            return val + "K"
+          }
+        }
+      },
+      tooltip: {
+        y: {
+          formatter: function (val) {
+            return val + "K"
+          }
+        }
+      },
+      fill: {
+        opacity: 1
+      },
+      legend: {
+        show: false
+      }
+    };
+  }
+}
diff --git a/src/app/modules/templates/charts/components/update-pie-chart/update-pie-chart.component.html b/src/app/modules/templates/charts/components/update-pie-chart/update-pie-chart.component.html
new file mode 100644
index 0000000..860c52e
--- /dev/null
+++ b/src/app/modules/templates/charts/components/update-pie-chart/update-pie-chart.component.html
@@ -0,0 +1,13 @@
+<div
+  echarts
+  [options]="echartsOptions"
+  [style.height]="chartOptions?.chart?.height | chartSize:'350px'"
+  [style.width]="chartOptions?.chart?.width | chartSize:'100%'"
+></div>
+
+<div class="button-wrapper">
+  <button mat-flat-button color="primary" (click)="randomize()">randomize</button>
+  <button mat-flat-button color="warn" (click)="appendData()">add</button>
+  <button mat-flat-button color="accent" (click)="removeData()">remove</button>
+  <button mat-flat-button color="success" (click)="reset()">reset</button>
+</div>
diff --git a/src/app/modules/templates/charts/components/update-pie-chart/update-pie-chart.component.scss b/src/app/modules/templates/charts/components/update-pie-chart/update-pie-chart.component.scss
new file mode 100644
index 0000000..c89d411
--- /dev/null
+++ b/src/app/modules/templates/charts/components/update-pie-chart/update-pie-chart.component.scss
@@ -0,0 +1,20 @@
+@use "src/app/styles/variables" as *;
+
+.button-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+button {
+  margin: 8px 0;
+}
+
+button + button {
+  margin-left: 8px;
+}
diff --git a/src/app/modules/templates/charts/components/update-pie-chart/update-pie-chart.component.ts b/src/app/modules/templates/charts/components/update-pie-chart/update-pie-chart.component.ts
new file mode 100644
index 0000000..1329d71
--- /dev/null
+++ b/src/app/modules/templates/charts/components/update-pie-chart/update-pie-chart.component.ts
@@ -0,0 +1,110 @@
+import { Component, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+
+import {colors} from '../../../../../consts';
+import {ChartOptions} from '../../models/chart-options';
+
+@Component({
+    selector: 'app-update-pie-chart',
+    templateUrl: './update-pie-chart.component.html',
+    styleUrls: ['./update-pie-chart.component.scss'],
+    standalone: false
+})
+export class UpdatePieChartComponent implements OnInit {
+  public chartOptions: Partial<ChartOptions> = {};
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.chartOptions;
+    const values: number[] = this.getNumericSeries();
+    const labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+    const data = values.map((value: number, index: number) => ({
+      value,
+      name: labels[index] ?? `Item ${index + 1}`
+    }));
+
+    return {
+      color: options?.colors ?? [colors.BLUE, colors.PINK, colors.YELLOW, colors.GREEN],
+      tooltip: { trigger: 'item' },
+      legend: {
+        show: true,
+        orient: 'vertical',
+        right: 0,
+        top: 'middle'
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['50%', '72%'],
+          data,
+          label: { show: false }
+        }
+      ]
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart();
+  }
+
+  public initChart(): void {
+    this.chartOptions = {
+      series: [44, 55, 13, 33],
+      chart: {
+        height: 350,
+        type: 'donut',
+      },
+      colors: [this.colors.BLUE, this.colors.PINK, this.colors.YELLOW, this.colors.GREEN],
+      dataLabels: {
+        enabled: false
+      },
+      legend: {
+        position: 'right',
+        offsetY: 0,
+        height: 230,
+      }
+    };
+  }
+
+  public appendData(): void {
+    const series = this.getNumericSeries();
+    series.push(Math.floor(Math.random() * 100) + 1);
+    this.chartOptions = {
+      ...this.chartOptions,
+      series
+    };
+  }
+
+  public removeData(): void {
+    const series = this.getNumericSeries();
+    series.pop();
+    this.chartOptions = {
+      ...this.chartOptions,
+      series
+    };
+  }
+
+  public randomize(): void {
+    const current = this.getNumericSeries();
+    this.chartOptions = {
+      ...this.chartOptions,
+      series: current.map(() => Math.floor(Math.random() * 100) + 1)
+    };
+  }
+
+  public reset(): void {
+    this.chartOptions = {
+      ...this.chartOptions,
+      series: [44, 55, 13, 33]
+    };
+  }
+
+  private getNumericSeries(): number[] {
+    if (!Array.isArray(this.chartOptions.series)) {
+      return [];
+    }
+
+    const series = this.chartOptions.series as unknown[];
+    return series.filter((item): item is number => typeof item === 'number');
+  }
+}
diff --git a/src/app/modules/templates/charts/components/zoomable-timeseries-chart/zoomable-timeseries-chart.component.html b/src/app/modules/templates/charts/components/zoomable-timeseries-chart/zoomable-timeseries-chart.component.html
new file mode 100644
index 0000000..96e7170
--- /dev/null
+++ b/src/app/modules/templates/charts/components/zoomable-timeseries-chart/zoomable-timeseries-chart.component.html
@@ -0,0 +1,6 @@
+<div
+  echarts
+  [options]="echartsOptions"
+  [style.height]="chart?.['height'] | chartSize:'350px'"
+  [style.width]="chart?.['width'] | chartSize:'100%'"
+></div>
diff --git a/src/app/modules/templates/charts/components/zoomable-timeseries-chart/zoomable-timeseries-chart.component.scss b/src/app/modules/templates/charts/components/zoomable-timeseries-chart/zoomable-timeseries-chart.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/charts/components/zoomable-timeseries-chart/zoomable-timeseries-chart.component.ts b/src/app/modules/templates/charts/components/zoomable-timeseries-chart/zoomable-timeseries-chart.component.ts
new file mode 100644
index 0000000..1183692
--- /dev/null
+++ b/src/app/modules/templates/charts/components/zoomable-timeseries-chart/zoomable-timeseries-chart.component.ts
@@ -0,0 +1,1599 @@
+import {Component, Input, OnInit} from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {LineChartData} from '../../models';
+import {ChartOptions} from '../../models/chart-options';
+
+import { colors } from '../../../../../consts';
+
+export const dataSeries = [
+  [
+    {
+      date: "2014-01-01",
+      value: 20000000
+    },
+    {
+      date: "2014-01-02",
+      value: 10379978
+    },
+    {
+      date: "2014-01-03",
+      value: 30493749
+    },
+    {
+      date: "2014-01-04",
+      value: 10785250
+    },
+    {
+      date: "2014-01-05",
+      value: 33901904
+    },
+    {
+      date: "2014-01-06",
+      value: 11576838
+    },
+    {
+      date: "2014-01-07",
+      value: 14413854
+    },
+    {
+      date: "2014-01-08",
+      value: 15177211
+    },
+    {
+      date: "2014-01-09",
+      value: 16622100
+    },
+    {
+      date: "2014-01-10",
+      value: 17381072
+    },
+    {
+      date: "2014-01-11",
+      value: 18802310
+    },
+    {
+      date: "2014-01-12",
+      value: 15531790
+    },
+    {
+      date: "2014-01-13",
+      value: 15748881
+    },
+    {
+      date: "2014-01-14",
+      value: 18706437
+    },
+    {
+      date: "2014-01-15",
+      value: 19752685
+    },
+    {
+      date: "2014-01-16",
+      value: 21016418
+    },
+    {
+      date: "2014-01-17",
+      value: 25622924
+    },
+    {
+      date: "2014-01-18",
+      value: 25337480
+    },
+    {
+      date: "2014-01-19",
+      value: 22258882
+    },
+    {
+      date: "2014-01-20",
+      value: 23829538
+    },
+    {
+      date: "2014-01-21",
+      value: 24245689
+    },
+    {
+      date: "2014-01-22",
+      value: 26429711
+    },
+    {
+      date: "2014-01-23",
+      value: 26259017
+    },
+    {
+      date: "2014-01-24",
+      value: 25396183
+    },
+    {
+      date: "2014-01-25",
+      value: 23107346
+    },
+    {
+      date: "2014-01-26",
+      value: 28659852
+    },
+    {
+      date: "2014-01-27",
+      value: 25270783
+    },
+    {
+      date: "2014-01-28",
+      value: 26270783
+    },
+    {
+      date: "2014-01-29",
+      value: 27270783
+    },
+    {
+      date: "2014-01-30",
+      value: 28270783
+    },
+    {
+      date: "2014-01-31",
+      value: 29270783
+    },
+    {
+      date: "2014-02-01",
+      value: 30270783
+    },
+    {
+      date: "2014-02-02",
+      value: 31270783
+    },
+    {
+      date: "2014-02-03",
+      value: 32270783
+    },
+    {
+      date: "2014-02-04",
+      value: 33270783
+    },
+    {
+      date: "2014-02-05",
+      value: 28270783
+    },
+    {
+      date: "2014-02-06",
+      value: 27270783
+    },
+    {
+      date: "2014-02-07",
+      value: 35270783
+    },
+    {
+      date: "2014-02-08",
+      value: 34270783
+    },
+    {
+      date: "2014-02-09",
+      value: 28270783
+    },
+    {
+      date: "2014-02-10",
+      value: 35270783
+    },
+    {
+      date: "2014-02-11",
+      value: 36270783
+    },
+    {
+      date: "2014-02-12",
+      value: 34127078
+    },
+    {
+      date: "2014-02-13",
+      value: 33124078
+    },
+    {
+      date: "2014-02-14",
+      value: 36227078
+    },
+    {
+      date: "2014-02-15",
+      value: 37827078
+    },
+    {
+      date: "2014-02-16",
+      value: 36427073
+    },
+    {
+      date: "2014-02-17",
+      value: 37570783
+    },
+    {
+      date: "2014-02-18",
+      value: 38627073
+    },
+    {
+      date: "2014-02-19",
+      value: 37727078
+    },
+    {
+      date: "2014-02-20",
+      value: 38827073
+    },
+    {
+      date: "2014-02-21",
+      value: 40927078
+    },
+    {
+      date: "2014-02-22",
+      value: 41027078
+    },
+    {
+      date: "2014-02-23",
+      value: 42127073
+    },
+    {
+      date: "2014-02-24",
+      value: 43220783
+    },
+    {
+      date: "2014-02-25",
+      value: 44327078
+    },
+    {
+      date: "2014-02-26",
+      value: 40427078
+    },
+    {
+      date: "2014-02-27",
+      value: 41027078
+    },
+    {
+      date: "2014-02-28",
+      value: 45627078
+    },
+    {
+      date: "2014-03-01",
+      value: 44727078
+    },
+    {
+      date: "2014-03-02",
+      value: 44227078
+    },
+    {
+      date: "2014-03-03",
+      value: 45227078
+    },
+    {
+      date: "2014-03-04",
+      value: 46027078
+    },
+    {
+      date: "2014-03-05",
+      value: 46927078
+    },
+    {
+      date: "2014-03-06",
+      value: 47027078
+    },
+    {
+      date: "2014-03-07",
+      value: 46227078
+    },
+    {
+      date: "2014-03-08",
+      value: 47027078
+    },
+    {
+      date: "2014-03-09",
+      value: 48027078
+    },
+    {
+      date: "2014-03-10",
+      value: 47027078
+    },
+    {
+      date: "2014-03-11",
+      value: 47027078
+    },
+    {
+      date: "2014-03-12",
+      value: 48017078
+    },
+    {
+      date: "2014-03-13",
+      value: 48077078
+    },
+    {
+      date: "2014-03-14",
+      value: 48087078
+    },
+    {
+      date: "2014-03-15",
+      value: 48017078
+    },
+    {
+      date: "2014-03-16",
+      value: 48047078
+    },
+    {
+      date: "2014-03-17",
+      value: 48067078
+    },
+    {
+      date: "2014-03-18",
+      value: 48077078
+    },
+    {
+      date: "2014-03-19",
+      value: 48027074
+    },
+    {
+      date: "2014-03-20",
+      value: 48927079
+    },
+    {
+      date: "2014-03-21",
+      value: 48727071
+    },
+    {
+      date: "2014-03-22",
+      value: 48127072
+    },
+    {
+      date: "2014-03-23",
+      value: 48527072
+    },
+    {
+      date: "2014-03-24",
+      value: 48627027
+    },
+    {
+      date: "2014-03-25",
+      value: 48027040
+    },
+    {
+      date: "2014-03-26",
+      value: 48027043
+    },
+    {
+      date: "2014-03-27",
+      value: 48057022
+    },
+    {
+      date: "2014-03-28",
+      value: 49057022
+    },
+    {
+      date: "2014-03-29",
+      value: 50057022
+    },
+    {
+      date: "2014-03-30",
+      value: 51057022
+    },
+    {
+      date: "2014-03-31",
+      value: 52057022
+    },
+    {
+      date: "2014-04-01",
+      value: 53057022
+    },
+    {
+      date: "2014-04-02",
+      value: 54057022
+    },
+    {
+      date: "2014-04-03",
+      value: 52057022
+    },
+    {
+      date: "2014-04-04",
+      value: 55057022
+    },
+    {
+      date: "2014-04-05",
+      value: 58270783
+    },
+    {
+      date: "2014-04-06",
+      value: 56270783
+    },
+    {
+      date: "2014-04-07",
+      value: 55270783
+    },
+    {
+      date: "2014-04-08",
+      value: 58270783
+    },
+    {
+      date: "2014-04-09",
+      value: 59270783
+    },
+    {
+      date: "2014-04-10",
+      value: 60270783
+    },
+    {
+      date: "2014-04-11",
+      value: 61270783
+    },
+    {
+      date: "2014-04-12",
+      value: 62270783
+    },
+    {
+      date: "2014-04-13",
+      value: 63270783
+    },
+    {
+      date: "2014-04-14",
+      value: 64270783
+    },
+    {
+      date: "2014-04-15",
+      value: 65270783
+    },
+    {
+      date: "2014-04-16",
+      value: 66270783
+    },
+    {
+      date: "2014-04-17",
+      value: 67270783
+    },
+    {
+      date: "2014-04-18",
+      value: 68270783
+    },
+    {
+      date: "2014-04-19",
+      value: 69270783
+    },
+    {
+      date: "2014-04-20",
+      value: 70270783
+    },
+    {
+      date: "2014-04-21",
+      value: 71270783
+    },
+    {
+      date: "2014-04-22",
+      value: 72270783
+    },
+    {
+      date: "2014-04-23",
+      value: 73270783
+    },
+    {
+      date: "2014-04-24",
+      value: 74270783
+    },
+    {
+      date: "2014-04-25",
+      value: 75270783
+    },
+    {
+      date: "2014-04-26",
+      value: 76660783
+    },
+    {
+      date: "2014-04-27",
+      value: 77270783
+    },
+    {
+      date: "2014-04-28",
+      value: 78370783
+    },
+    {
+      date: "2014-04-29",
+      value: 79470783
+    },
+    {
+      date: "2014-04-30",
+      value: 80170783
+    }
+  ],
+  [
+    {
+      date: "2014-01-01",
+      value: 150000000
+    },
+    {
+      date: "2014-01-02",
+      value: 160379978
+    },
+    {
+      date: "2014-01-03",
+      value: 170493749
+    },
+    {
+      date: "2014-01-04",
+      value: 160785250
+    },
+    {
+      date: "2014-01-05",
+      value: 167391904
+    },
+    {
+      date: "2014-01-06",
+      value: 161576838
+    },
+    {
+      date: "2014-01-07",
+      value: 161413854
+    },
+    {
+      date: "2014-01-08",
+      value: 152177211
+    },
+    {
+      date: "2014-01-09",
+      value: 140762210
+    },
+    {
+      date: "2014-01-10",
+      value: 144381072
+    },
+    {
+      date: "2014-01-11",
+      value: 154352310
+    },
+    {
+      date: "2014-01-12",
+      value: 165531790
+    },
+    {
+      date: "2014-01-13",
+      value: 175748881
+    },
+    {
+      date: "2014-01-14",
+      value: 187064037
+    },
+    {
+      date: "2014-01-15",
+      value: 197520685
+    },
+    {
+      date: "2014-01-16",
+      value: 210176418
+    },
+    {
+      date: "2014-01-17",
+      value: 196122924
+    },
+    {
+      date: "2014-01-18",
+      value: 207337480
+    },
+    {
+      date: "2014-01-19",
+      value: 200258882
+    },
+    {
+      date: "2014-01-20",
+      value: 186829538
+    },
+    {
+      date: "2014-01-21",
+      value: 192456897
+    },
+    {
+      date: "2014-01-22",
+      value: 204299711
+    },
+    {
+      date: "2014-01-23",
+      value: 192759017
+    },
+    {
+      date: "2014-01-24",
+      value: 203596183
+    },
+    {
+      date: "2014-01-25",
+      value: 208107346
+    },
+    {
+      date: "2014-01-26",
+      value: 196359852
+    },
+    {
+      date: "2014-01-27",
+      value: 192570783
+    },
+    {
+      date: "2014-01-28",
+      value: 177967768
+    },
+    {
+      date: "2014-01-29",
+      value: 190632803
+    },
+    {
+      date: "2014-01-30",
+      value: 203725316
+    },
+    {
+      date: "2014-01-31",
+      value: 218226177
+    },
+    {
+      date: "2014-02-01",
+      value: 210698669
+    },
+    {
+      date: "2014-02-02",
+      value: 217640656
+    },
+    {
+      date: "2014-02-03",
+      value: 216142362
+    },
+    {
+      date: "2014-02-04",
+      value: 201410971
+    },
+    {
+      date: "2014-02-05",
+      value: 196704289
+    },
+    {
+      date: "2014-02-06",
+      value: 190436945
+    },
+    {
+      date: "2014-02-07",
+      value: 178891686
+    },
+    {
+      date: "2014-02-08",
+      value: 171613962
+    },
+    {
+      date: "2014-02-09",
+      value: 157579773
+    },
+    {
+      date: "2014-02-10",
+      value: 158677098
+    },
+    {
+      date: "2014-02-11",
+      value: 147129977
+    },
+    {
+      date: "2014-02-12",
+      value: 151561876
+    },
+    {
+      date: "2014-02-13",
+      value: 151627421
+    },
+    {
+      date: "2014-02-14",
+      value: 143543872
+    },
+    {
+      date: "2014-02-15",
+      value: 136581057
+    },
+    {
+      date: "2014-02-16",
+      value: 135560715
+    },
+    {
+      date: "2014-02-17",
+      value: 122625263
+    },
+    {
+      date: "2014-02-18",
+      value: 112091484
+    },
+    {
+      date: "2014-02-19",
+      value: 98810329
+    },
+    {
+      date: "2014-02-20",
+      value: 99882912
+    },
+    {
+      date: "2014-02-21",
+      value: 94943095
+    },
+    {
+      date: "2014-02-22",
+      value: 104875743
+    },
+    {
+      date: "2014-02-23",
+      value: 116383678
+    },
+    {
+      date: "2014-02-24",
+      value: 125028841
+    },
+    {
+      date: "2014-02-25",
+      value: 123967310
+    },
+    {
+      date: "2014-02-26",
+      value: 133167029
+    },
+    {
+      date: "2014-02-27",
+      value: 128577263
+    },
+    {
+      date: "2014-02-28",
+      value: 115836969
+    },
+    {
+      date: "2014-03-01",
+      value: 119264529
+    },
+    {
+      date: "2014-03-02",
+      value: 109363374
+    },
+    {
+      date: "2014-03-03",
+      value: 113985628
+    },
+    {
+      date: "2014-03-04",
+      value: 114650999
+    },
+    {
+      date: "2014-03-05",
+      value: 110866108
+    },
+    {
+      date: "2014-03-06",
+      value: 96473454
+    },
+    {
+      date: "2014-03-07",
+      value: 104075886
+    },
+    {
+      date: "2014-03-08",
+      value: 103568384
+    },
+    {
+      date: "2014-03-09",
+      value: 101534883
+    },
+    {
+      date: "2014-03-10",
+      value: 115825447
+    },
+    {
+      date: "2014-03-11",
+      value: 126133916
+    },
+    {
+      date: "2014-03-12",
+      value: 116502109
+    },
+    {
+      date: "2014-03-13",
+      value: 130169411
+    },
+    {
+      date: "2014-03-14",
+      value: 124296886
+    },
+    {
+      date: "2014-03-15",
+      value: 126347399
+    },
+    {
+      date: "2014-03-16",
+      value: 131483669
+    },
+    {
+      date: "2014-03-17",
+      value: 142811333
+    },
+    {
+      date: "2014-03-18",
+      value: 129675396
+    },
+    {
+      date: "2014-03-19",
+      value: 115514483
+    },
+    {
+      date: "2014-03-20",
+      value: 117630630
+    },
+    {
+      date: "2014-03-21",
+      value: 122340239
+    },
+    {
+      date: "2014-03-22",
+      value: 132349091
+    },
+    {
+      date: "2014-03-23",
+      value: 125613305
+    },
+    {
+      date: "2014-03-24",
+      value: 135592466
+    },
+    {
+      date: "2014-03-25",
+      value: 123408762
+    },
+    {
+      date: "2014-03-26",
+      value: 111991454
+    },
+    {
+      date: "2014-03-27",
+      value: 116123955
+    },
+    {
+      date: "2014-03-28",
+      value: 112817214
+    },
+    {
+      date: "2014-03-29",
+      value: 113029590
+    },
+    {
+      date: "2014-03-30",
+      value: 108753398
+    },
+    {
+      date: "2014-03-31",
+      value: 99383763
+    },
+    {
+      date: "2014-04-01",
+      value: 100151737
+    },
+    {
+      date: "2014-04-02",
+      value: 94985209
+    },
+    {
+      date: "2014-04-03",
+      value: 82913669
+    },
+    {
+      date: "2014-04-04",
+      value: 78748268
+    },
+    {
+      date: "2014-04-05",
+      value: 63829135
+    },
+    {
+      date: "2014-04-06",
+      value: 78694727
+    },
+    {
+      date: "2014-04-07",
+      value: 80868994
+    },
+    {
+      date: "2014-04-08",
+      value: 93799013
+    },
+    {
+      date: "2014-04-09",
+      value: 99042416
+    },
+    {
+      date: "2014-04-10",
+      value: 97298692
+    },
+    {
+      date: "2014-04-11",
+      value: 83353499
+    },
+    {
+      date: "2014-04-12",
+      value: 71248129
+    },
+    {
+      date: "2014-04-13",
+      value: 75253744
+    },
+    {
+      date: "2014-04-14",
+      value: 68976648
+    },
+    {
+      date: "2014-04-15",
+      value: 71002284
+    },
+    {
+      date: "2014-04-16",
+      value: 75052401
+    },
+    {
+      date: "2014-04-17",
+      value: 83894030
+    },
+    {
+      date: "2014-04-18",
+      value: 90236528
+    },
+    {
+      date: "2014-04-19",
+      value: 99739114
+    },
+    {
+      date: "2014-04-20",
+      value: 96407136
+    },
+    {
+      date: "2014-04-21",
+      value: 108323177
+    },
+    {
+      date: "2014-04-22",
+      value: 101578914
+    },
+    {
+      date: "2014-04-23",
+      value: 115877608
+    },
+    {
+      date: "2014-04-24",
+      value: 112088857
+    },
+    {
+      date: "2014-04-25",
+      value: 112071353
+    },
+    {
+      date: "2014-04-26",
+      value: 101790062
+    },
+    {
+      date: "2014-04-27",
+      value: 115003761
+    },
+    {
+      date: "2014-04-28",
+      value: 120457727
+    },
+    {
+      date: "2014-04-29",
+      value: 118253926
+    },
+    {
+      date: "2014-04-30",
+      value: 117956992
+    }
+  ],
+  [
+    {
+      date: "2014-01-01",
+      value: 50000000
+    },
+    {
+      date: "2014-01-02",
+      value: 60379978
+    },
+    {
+      date: "2014-01-03",
+      value: 40493749
+    },
+    {
+      date: "2014-01-04",
+      value: 60785250
+    },
+    {
+      date: "2014-01-05",
+      value: 67391904
+    },
+    {
+      date: "2014-01-06",
+      value: 61576838
+    },
+    {
+      date: "2014-01-07",
+      value: 61413854
+    },
+    {
+      date: "2014-01-08",
+      value: 82177211
+    },
+    {
+      date: "2014-01-09",
+      value: 103762210
+    },
+    {
+      date: "2014-01-10",
+      value: 84381072
+    },
+    {
+      date: "2014-01-11",
+      value: 54352310
+    },
+    {
+      date: "2014-01-12",
+      value: 65531790
+    },
+    {
+      date: "2014-01-13",
+      value: 75748881
+    },
+    {
+      date: "2014-01-14",
+      value: 47064037
+    },
+    {
+      date: "2014-01-15",
+      value: 67520685
+    },
+    {
+      date: "2014-01-16",
+      value: 60176418
+    },
+    {
+      date: "2014-01-17",
+      value: 66122924
+    },
+    {
+      date: "2014-01-18",
+      value: 57337480
+    },
+    {
+      date: "2014-01-19",
+      value: 100258882
+    },
+    {
+      date: "2014-01-20",
+      value: 46829538
+    },
+    {
+      date: "2014-01-21",
+      value: 92456897
+    },
+    {
+      date: "2014-01-22",
+      value: 94299711
+    },
+    {
+      date: "2014-01-23",
+      value: 62759017
+    },
+    {
+      date: "2014-01-24",
+      value: 103596183
+    },
+    {
+      date: "2014-01-25",
+      value: 108107346
+    },
+    {
+      date: "2014-01-26",
+      value: 66359852
+    },
+    {
+      date: "2014-01-27",
+      value: 62570783
+    },
+    {
+      date: "2014-01-28",
+      value: 77967768
+    },
+    {
+      date: "2014-01-29",
+      value: 60632803
+    },
+    {
+      date: "2014-01-30",
+      value: 103725316
+    },
+    {
+      date: "2014-01-31",
+      value: 98226177
+    },
+    {
+      date: "2014-02-01",
+      value: 60698669
+    },
+    {
+      date: "2014-02-02",
+      value: 67640656
+    },
+    {
+      date: "2014-02-03",
+      value: 66142362
+    },
+    {
+      date: "2014-02-04",
+      value: 101410971
+    },
+    {
+      date: "2014-02-05",
+      value: 66704289
+    },
+    {
+      date: "2014-02-06",
+      value: 60436945
+    },
+    {
+      date: "2014-02-07",
+      value: 78891686
+    },
+    {
+      date: "2014-02-08",
+      value: 71613962
+    },
+    {
+      date: "2014-02-09",
+      value: 107579773
+    },
+    {
+      date: "2014-02-10",
+      value: 58677098
+    },
+    {
+      date: "2014-02-11",
+      value: 87129977
+    },
+    {
+      date: "2014-02-12",
+      value: 51561876
+    },
+    {
+      date: "2014-02-13",
+      value: 51627421
+    },
+    {
+      date: "2014-02-14",
+      value: 83543872
+    },
+    {
+      date: "2014-02-15",
+      value: 66581057
+    },
+    {
+      date: "2014-02-16",
+      value: 65560715
+    },
+    {
+      date: "2014-02-17",
+      value: 62625263
+    },
+    {
+      date: "2014-02-18",
+      value: 92091484
+    },
+    {
+      date: "2014-02-19",
+      value: 48810329
+    },
+    {
+      date: "2014-02-20",
+      value: 49882912
+    },
+    {
+      date: "2014-02-21",
+      value: 44943095
+    },
+    {
+      date: "2014-02-22",
+      value: 104875743
+    },
+    {
+      date: "2014-02-23",
+      value: 96383678
+    },
+    {
+      date: "2014-02-24",
+      value: 105028841
+    },
+    {
+      date: "2014-02-25",
+      value: 63967310
+    },
+    {
+      date: "2014-02-26",
+      value: 63167029
+    },
+    {
+      date: "2014-02-27",
+      value: 68577263
+    },
+    {
+      date: "2014-02-28",
+      value: 95836969
+    },
+    {
+      date: "2014-03-01",
+      value: 99264529
+    },
+    {
+      date: "2014-03-02",
+      value: 109363374
+    },
+    {
+      date: "2014-03-03",
+      value: 93985628
+    },
+    {
+      date: "2014-03-04",
+      value: 94650999
+    },
+    {
+      date: "2014-03-05",
+      value: 90866108
+    },
+    {
+      date: "2014-03-06",
+      value: 46473454
+    },
+    {
+      date: "2014-03-07",
+      value: 84075886
+    },
+    {
+      date: "2014-03-08",
+      value: 103568384
+    },
+    {
+      date: "2014-03-09",
+      value: 101534883
+    },
+    {
+      date: "2014-03-10",
+      value: 95825447
+    },
+    {
+      date: "2014-03-11",
+      value: 66133916
+    },
+    {
+      date: "2014-03-12",
+      value: 96502109
+    },
+    {
+      date: "2014-03-13",
+      value: 80169411
+    },
+    {
+      date: "2014-03-14",
+      value: 84296886
+    },
+    {
+      date: "2014-03-15",
+      value: 86347399
+    },
+    {
+      date: "2014-03-16",
+      value: 31483669
+    },
+    {
+      date: "2014-03-17",
+      value: 82811333
+    },
+    {
+      date: "2014-03-18",
+      value: 89675396
+    },
+    {
+      date: "2014-03-19",
+      value: 95514483
+    },
+    {
+      date: "2014-03-20",
+      value: 97630630
+    },
+    {
+      date: "2014-03-21",
+      value: 62340239
+    },
+    {
+      date: "2014-03-22",
+      value: 62349091
+    },
+    {
+      date: "2014-03-23",
+      value: 65613305
+    },
+    {
+      date: "2014-03-24",
+      value: 65592466
+    },
+    {
+      date: "2014-03-25",
+      value: 63408762
+    },
+    {
+      date: "2014-03-26",
+      value: 91991454
+    },
+    {
+      date: "2014-03-27",
+      value: 96123955
+    },
+    {
+      date: "2014-03-28",
+      value: 92817214
+    },
+    {
+      date: "2014-03-29",
+      value: 93029590
+    },
+    {
+      date: "2014-03-30",
+      value: 108753398
+    },
+    {
+      date: "2014-03-31",
+      value: 49383763
+    },
+    {
+      date: "2014-04-01",
+      value: 100151737
+    },
+    {
+      date: "2014-04-02",
+      value: 44985209
+    },
+    {
+      date: "2014-04-03",
+      value: 52913669
+    },
+    {
+      date: "2014-04-04",
+      value: 48748268
+    },
+    {
+      date: "2014-04-05",
+      value: 23829135
+    },
+    {
+      date: "2014-04-06",
+      value: 58694727
+    },
+    {
+      date: "2014-04-07",
+      value: 50868994
+    },
+    {
+      date: "2014-04-08",
+      value: 43799013
+    },
+    {
+      date: "2014-04-09",
+      value: 4042416
+    },
+    {
+      date: "2014-04-10",
+      value: 47298692
+    },
+    {
+      date: "2014-04-11",
+      value: 53353499
+    },
+    {
+      date: "2014-04-12",
+      value: 71248129
+    },
+    {
+      date: "2014-04-13",
+      value: 75253744
+    },
+    {
+      date: "2014-04-14",
+      value: 68976648
+    },
+    {
+      date: "2014-04-15",
+      value: 71002284
+    },
+    {
+      date: "2014-04-16",
+      value: 75052401
+    },
+    {
+      date: "2014-04-17",
+      value: 83894030
+    },
+    {
+      date: "2014-04-18",
+      value: 50236528
+    },
+    {
+      date: "2014-04-19",
+      value: 59739114
+    },
+    {
+      date: "2014-04-20",
+      value: 56407136
+    },
+    {
+      date: "2014-04-21",
+      value: 108323177
+    },
+    {
+      date: "2014-04-22",
+      value: 101578914
+    },
+    {
+      date: "2014-04-23",
+      value: 95877608
+    },
+    {
+      date: "2014-04-24",
+      value: 62088857
+    },
+    {
+      date: "2014-04-25",
+      value: 92071353
+    },
+    {
+      date: "2014-04-26",
+      value: 81790062
+    },
+    {
+      date: "2014-04-27",
+      value: 105003761
+    },
+    {
+      date: "2014-04-28",
+      value: 100457727
+    },
+    {
+      date: "2014-04-29",
+      value: 98253926
+    },
+    {
+      date: "2014-04-30",
+      value: 67956992
+    }
+  ]
+];
+
+
+@Component({
+    selector: 'app-zoomable-timeseries-chart',
+    templateUrl: './zoomable-timeseries-chart.component.html',
+    styleUrls: ['./zoomable-timeseries-chart.component.scss'],
+    standalone: false
+})
+export class ZoomableTimeseriesChartComponent implements OnInit {
+  @Input() zoomableTimeseriesChartData: LineChartData;
+  public apexZoomableTimeseriesChartOptions: Partial<ChartOptions>;
+  public colors: typeof colors = colors;
+
+  public series: unknown[];
+  public chart: Record<string, unknown>;
+  public dataLabels: Record<string, unknown>;
+  public markers: Record<string, unknown>;
+  public fill: Record<string, unknown>;
+  public yaxis: Record<string, unknown>;
+  public xaxis: Record<string, unknown>;
+  public tooltip: Record<string, unknown>;
+  public color: string[];
+
+  public get echartsOptions(): EChartsOption {
+    const firstSeries = Array.isArray(this.series)
+      ? this.series.find(
+          (item): item is { name?: string; data?: unknown[] } =>
+            typeof item === 'object' && item !== null,
+        )
+      : undefined;
+    const rawData: [number, number][] = Array.isArray(firstSeries?.data)
+      ? firstSeries.data.filter(
+          (point): point is [number, number] =>
+            Array.isArray(point) &&
+            point.length === 2 &&
+            typeof point[0] === 'number' &&
+            typeof point[1] === 'number',
+        )
+      : [];
+    return {
+      color: this.color ?? [colors.GREEN],
+      tooltip: {
+        trigger: 'axis',
+        valueFormatter: (value: number) => (value / 1000000).toFixed(0)
+      },
+      grid: {
+        top: 16,
+        left: 12,
+        right: 12,
+        bottom: 16,
+        containLabel: true
+      },
+      xAxis: {
+        type: 'time'
+      },
+      yAxis: {
+        type: 'value',
+        axisLabel: {
+          formatter: (value: number) => (value / 1000000).toFixed(0)
+        }
+      },
+      series: [
+        {
+          type: 'line',
+          name: firstSeries?.name ?? 'Series',
+          data: rawData,
+          smooth: true,
+          showSymbol: false,
+          areaStyle: {
+            opacity: 0.35
+          }
+        }
+      ]
+    } as EChartsOption;
+  }
+
+
+
+  public ngOnInit() {
+    this.initChart();
+  }
+
+  public initChart(): void {
+    const dates: [number, number][] = (dataSeries[1] ?? [])
+      .map((item): [number, number] => [new Date(item.date).getTime(), item.value])
+      .filter((pair): pair is [number, number] => Number.isFinite(pair[0]) && Number.isFinite(pair[1]));
+
+    this.series = [
+      {
+        name: "XYZ MOTORS",
+        data: dates
+      }
+    ];
+    this.chart = {
+      type: "area",
+      stacked: false,
+      height: 350,
+      zoom: {
+        type: "x",
+        enabled: true,
+        autoScaleYaxis: true
+      },
+      toolbar: {
+        show: false
+      }
+    };
+    this.color = [colors.GREEN];
+    this.dataLabels = {
+      enabled: false
+    };
+    this.markers = {
+      size: 0
+    };
+    this.fill = {
+      type: "gradient",
+      gradient: {
+        shadeIntensity: 1,
+        inverseColors: false,
+        opacityFrom: 0.5,
+        opacityTo: 0,
+        stops: [0, 90, 100]
+      },
+      colors: [colors.GREEN]
+    };
+    this.yaxis = {
+      labels: {
+        formatter: function(val) {
+          return (val / 1000000).toFixed(0);
+        }
+      }
+    };
+    this.xaxis = {
+      type: "datetime"
+    };
+    this.tooltip = {
+      shared: false,
+      y: {
+        formatter: function(val) {
+          return (val / 1000000).toFixed(0);
+        }
+      }
+    };
+  }
+}
diff --git a/src/app/modules/templates/charts/containers/bar-charts-page/bar-charts-page.component.html b/src/app/modules/templates/charts/containers/bar-charts-page/bar-charts-page.component.html
new file mode 100644
index 0000000..e5ac9c5
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/bar-charts-page/bar-charts-page.component.html
@@ -0,0 +1,33 @@
+<app-breadcrumb [path]="routes.BAR_CHARTS"></app-breadcrumb>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Basic Bar Chart</p>
+    </mat-card-title>
+    <app-bar-chart [barChartData]="barChartData$ | async" [currentTheme]="currentTheme"></app-bar-chart>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Grouped Bar Chart</p>
+    </mat-card-title>
+    <app-grouped-bar-chart [groupedBarChartData]="groupedBarChartData$ | async"></app-grouped-bar-chart>
+  </mat-card>
+</div>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Stacked Bar Chart</p>
+    </mat-card-title>
+    <app-stacked-bar-chart></app-stacked-bar-chart>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Bar Chart with Image</p>
+    </mat-card-title>
+    <app-image-bar-chart></app-image-bar-chart>
+  </mat-card>
+</div>
diff --git a/src/app/modules/templates/charts/containers/bar-charts-page/bar-charts-page.component.scss b/src/app/modules/templates/charts/containers/bar-charts-page/bar-charts-page.component.scss
new file mode 100644
index 0000000..a6b66a6
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/bar-charts-page/bar-charts-page.component.scss
@@ -0,0 +1,24 @@
+@use './src/app/styles/variables' as *;
+
+.cards-wrapper {
+  display: flex;
+  margin-top: 36px;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.card {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.card + .card {
+  margin-left: 36px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
diff --git a/src/app/modules/templates/charts/containers/bar-charts-page/bar-charts-page.component.ts b/src/app/modules/templates/charts/containers/bar-charts-page/bar-charts-page.component.ts
new file mode 100644
index 0000000..604520c
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/bar-charts-page/bar-charts-page.component.ts
@@ -0,0 +1,37 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import {Observable} from 'rxjs';
+import {BarChartData} from '../../models';
+import {ChartsService} from '../../services';
+import {routes} from '../../../../../consts';
+import {SharedService} from '../../../../../shared/services/shared.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+    selector: 'app-bar-charts-page',
+    templateUrl: './bar-charts-page.component.html',
+    styleUrls: ['./bar-charts-page.component.scss'],
+    standalone: false
+})
+export class BarChartsPageComponent implements OnInit {
+  public barChartData$: Observable<BarChartData>
+  public groupedBarChartData$: Observable<BarChartData>
+  public routes: typeof routes = routes;
+  public currentTheme: string = '';
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    private service: ChartsService,
+    private sharedService: SharedService
+  ) {
+    this.barChartData$ = this.service.loadBarChartData();
+    this.groupedBarChartData$ = this.service.loadGroupedBarChartData();
+  }
+
+  public ngOnInit(): void {
+    this.sharedService.currentTheme
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((theme: string) => {
+        this.currentTheme = theme;
+      });
+  }
+}
diff --git a/src/app/modules/templates/charts/containers/index.ts b/src/app/modules/templates/charts/containers/index.ts
new file mode 100644
index 0000000..4ef57d5
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/index.ts
@@ -0,0 +1,4 @@
+export * from './bar-charts-page/bar-charts-page.component';
+export * from './line-charts-page/line-charts-page.component';
+export * from './overview-charts-page/overview-charts-page.component';
+export * from './pie-charts-page/pie-charts-page.component';
diff --git a/src/app/modules/templates/charts/containers/line-charts-page/line-charts-page.component.html b/src/app/modules/templates/charts/containers/line-charts-page/line-charts-page.component.html
new file mode 100644
index 0000000..a91ab73
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/line-charts-page/line-charts-page.component.html
@@ -0,0 +1,33 @@
+<app-breadcrumb [path]="routes.LINE_CHARTS"></app-breadcrumb>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Basic Line Chart</p>
+    </mat-card-title>
+    <app-basic-line-chart [basicLineChartData]="basicLineChartData$ | async" [currentTheme]="currentTheme"></app-basic-line-chart>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Line Chart with Data Labels</p>
+    </mat-card-title>
+    <app-line-data-labels-chart [lineDataLabelsChartData]="lineDataLabelsChartData$ | async" [currentTheme]="currentTheme"></app-line-data-labels-chart>
+  </mat-card>
+</div>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Zoomable Timeseries Chart</p>
+    </mat-card-title>
+    <app-zoomable-timeseries-chart></app-zoomable-timeseries-chart>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>Dynamic Updating Chart</p>
+    </mat-card-title>
+    <app-dynamic-updating-chart [dynamicUpdatingChartData]="dynamicUpdatingChartData$ | async" [currentTheme]="currentTheme"></app-dynamic-updating-chart>
+  </mat-card>
+</div>
diff --git a/src/app/modules/templates/charts/containers/line-charts-page/line-charts-page.component.scss b/src/app/modules/templates/charts/containers/line-charts-page/line-charts-page.component.scss
new file mode 100644
index 0000000..6c17e5b
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/line-charts-page/line-charts-page.component.scss
@@ -0,0 +1,25 @@
+@use './src/app/styles/variables' as *;
+
+.cards-wrapper {
+  display: flex;
+  margin-top: 36px;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.card {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.card + .card {
+  margin-left: 36px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
+
diff --git a/src/app/modules/templates/charts/containers/line-charts-page/line-charts-page.component.ts b/src/app/modules/templates/charts/containers/line-charts-page/line-charts-page.component.ts
new file mode 100644
index 0000000..4e4a44c
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/line-charts-page/line-charts-page.component.ts
@@ -0,0 +1,39 @@
+import {Component, DestroyRef, OnInit, inject} from '@angular/core';
+import {Observable} from 'rxjs';
+import {LineChartData} from '../../models';
+import {ChartsService} from '../../services';
+import {routes} from '../../../../../consts';
+import {SharedService} from '../../../../../shared/services/shared.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+    selector: 'app-line-charts-page',
+    templateUrl: './line-charts-page.component.html',
+    styleUrls: ['./line-charts-page.component.scss'],
+    standalone: false
+})
+export class LineChartsPageComponent implements OnInit {
+  public basicLineChartData$: Observable<LineChartData>
+  public lineDataLabelsChartData$: Observable<LineChartData>
+  public dynamicUpdatingChartData$: Observable<LineChartData>
+  public routes: typeof routes = routes;
+  public currentTheme: string = '';
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    private service: ChartsService,
+    private sharedService: SharedService
+  ) {
+    this.basicLineChartData$ = this.service.loadBasicLineChartData();
+    this.lineDataLabelsChartData$ = this.service.loadLineDataLabelsChartData();
+    this.dynamicUpdatingChartData$ = this.service.loadDynamicUpdatingChartData();
+  }
+
+  public ngOnInit(): void {
+    this.sharedService.currentTheme
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((theme: string) => {
+        this.currentTheme = theme;
+      });
+  }
+}
diff --git a/src/app/modules/templates/charts/containers/overview-charts-page/overview-charts-page.component.html b/src/app/modules/templates/charts/containers/overview-charts-page/overview-charts-page.component.html
new file mode 100644
index 0000000..b8e5c8e
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/overview-charts-page/overview-charts-page.component.html
@@ -0,0 +1,49 @@
+<app-breadcrumb [path]="routes.OVERVIEW_CHARTS"></app-breadcrumb>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+     <p>ECharts Line Chart</p>
+   </mat-card-title>
+    <app-dynamic-updating-chart [currentTheme]="currentTheme"></app-dynamic-updating-chart>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Heatmap Chart</p>
+    </mat-card-title>
+    <app-heatmap-chart [heatmapChartData]="heatmapChartData$ | async" [currentTheme]="currentTheme"></app-heatmap-chart>
+  </mat-card>
+</div>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Radar Chart</p>
+    </mat-card-title>
+    <app-radar-chart [radarChartData]="radarChartData$ | async" [currentTheme]="currentTheme"></app-radar-chart>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Bar Chart with Image</p>
+    </mat-card-title>
+    <app-image-bar-chart></app-image-bar-chart>
+  </mat-card>
+</div>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Dashed Line Chart</p>
+    </mat-card-title>
+    <app-dashed-line-chart [dashedLineChartData]="dashedLineChartData$ | async"></app-dashed-line-chart>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Pie Chart</p>
+    </mat-card-title>
+    <app-update-pie-chart></app-update-pie-chart>
+  </mat-card>
+</div>
diff --git a/src/app/modules/templates/charts/containers/overview-charts-page/overview-charts-page.component.scss b/src/app/modules/templates/charts/containers/overview-charts-page/overview-charts-page.component.scss
new file mode 100644
index 0000000..a6b66a6
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/overview-charts-page/overview-charts-page.component.scss
@@ -0,0 +1,24 @@
+@use './src/app/styles/variables' as *;
+
+.cards-wrapper {
+  display: flex;
+  margin-top: 36px;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.card {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.card + .card {
+  margin-left: 36px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
diff --git a/src/app/modules/templates/charts/containers/overview-charts-page/overview-charts-page.component.ts b/src/app/modules/templates/charts/containers/overview-charts-page/overview-charts-page.component.ts
new file mode 100644
index 0000000..02c290f
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/overview-charts-page/overview-charts-page.component.ts
@@ -0,0 +1,47 @@
+import {Component, DestroyRef, OnInit, inject} from '@angular/core';
+import {Observable} from 'rxjs';
+
+import {BarChartData, DashedLineChartData, HeatmapChartData, LineChartData, PieChartData, RadarChartData} from '../../models';
+import {ChartsService} from '../../services';
+import {routes} from '../../../../../consts';
+import {SharedService} from '../../../../../shared/services/shared.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+    selector: 'app-overview-charts-page',
+    templateUrl: './overview-charts-page.component.html',
+    styleUrls: ['./overview-charts-page.component.scss'],
+    standalone: false
+})
+export class OverviewChartsPageComponent implements OnInit {
+  public lineChartData$: Observable<LineChartData>;
+  public dashedLineChartData$: Observable<DashedLineChartData>;
+  public pieChartData$: Observable<PieChartData>;
+  public heatmapChartData$: Observable<HeatmapChartData>;
+  public radarChartData$: Observable<RadarChartData>;
+  public barChartData$: Observable<BarChartData>;
+  public routes: typeof routes = routes;
+  public currentTheme = '';
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(
+    private service: ChartsService,
+    private sharedService: SharedService
+  ) {
+    this.lineChartData$ = this.service.loadLineChartData();
+    this.dashedLineChartData$ = this.service.dashedLineChartData();
+    this.pieChartData$ = this.service.loadPieChartData();
+    this.heatmapChartData$ = this.service.loadHeatmapChartData();
+    this.radarChartData$ = this.service.loadRadarChartData();
+    this.barChartData$ = this.service.loadBarChartData();
+
+  }
+
+  public ngOnInit(): void {
+    this.sharedService.currentTheme
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((elem: string) => {
+        this.currentTheme = elem;
+      });
+  }
+}
diff --git a/src/app/modules/templates/charts/containers/pie-charts-page/pie-charts-page.component.html b/src/app/modules/templates/charts/containers/pie-charts-page/pie-charts-page.component.html
new file mode 100644
index 0000000..fcf3c43
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/pie-charts-page/pie-charts-page.component.html
@@ -0,0 +1,33 @@
+<app-breadcrumb [path]="routes.PIE_CHARTS"></app-breadcrumb>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Basic Pie Chart</p>
+    </mat-card-title>
+    <app-simple-pie-chart></app-simple-pie-chart>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Basic Donut Pie Chart</p>
+    </mat-card-title>
+    <app-pie-chart [pieChartData]="pieChartData$ | async"></app-pie-chart>
+  </mat-card>
+</div>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Dynamic Pie Chart</p>
+    </mat-card-title>
+    <app-update-pie-chart></app-update-pie-chart>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>ECharts Monochrome Pie Chart</p>
+    </mat-card-title>
+    <app-monochome-pie-chart></app-monochome-pie-chart>
+  </mat-card>
+</div>
diff --git a/src/app/modules/templates/charts/containers/pie-charts-page/pie-charts-page.component.scss b/src/app/modules/templates/charts/containers/pie-charts-page/pie-charts-page.component.scss
new file mode 100644
index 0000000..a6b66a6
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/pie-charts-page/pie-charts-page.component.scss
@@ -0,0 +1,24 @@
+@use './src/app/styles/variables' as *;
+
+.cards-wrapper {
+  display: flex;
+  margin-top: 36px;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.card {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.card + .card {
+  margin-left: 36px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
diff --git a/src/app/modules/templates/charts/containers/pie-charts-page/pie-charts-page.component.ts b/src/app/modules/templates/charts/containers/pie-charts-page/pie-charts-page.component.ts
new file mode 100644
index 0000000..bf195fb
--- /dev/null
+++ b/src/app/modules/templates/charts/containers/pie-charts-page/pie-charts-page.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import {Observable} from 'rxjs';
+import { PieChartData} from '../../models';
+import {ChartsService} from '../../services';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-pie-charts-page',
+    templateUrl: './pie-charts-page.component.html',
+    styleUrls: ['./pie-charts-page.component.scss'],
+    standalone: false
+})
+export class PieChartsPageComponent {
+  public pieChartData$: Observable<PieChartData>;
+  public routes: typeof routes = routes;
+
+  constructor(private service: ChartsService) {
+    this.pieChartData$ = this.service.loadPieChartData();
+  }
+}
diff --git a/src/app/modules/templates/charts/models/bar-chart-data.ts b/src/app/modules/templates/charts/models/bar-chart-data.ts
new file mode 100644
index 0000000..6f0f009
--- /dev/null
+++ b/src/app/modules/templates/charts/models/bar-chart-data.ts
@@ -0,0 +1,9 @@
+export interface BarChartData {
+  series: Series[],
+  categories: string[]
+}
+
+interface Series {
+  name: string,
+  data: number[]
+}
diff --git a/src/app/modules/templates/charts/models/chart-options.ts b/src/app/modules/templates/charts/models/chart-options.ts
new file mode 100644
index 0000000..c727073
--- /dev/null
+++ b/src/app/modules/templates/charts/models/chart-options.ts
@@ -0,0 +1,20 @@
+type ChartCompatObject = Record<string, unknown>;
+
+export type ChartOptions = {
+  series: unknown[] | number[];
+  chart: ChartCompatObject;
+  xaxis: ChartCompatObject;
+  yaxis: ChartCompatObject | ChartCompatObject[];
+  stroke: ChartCompatObject;
+  tooltip: ChartCompatObject;
+  theme: ChartCompatObject;
+  dataLabels: ChartCompatObject;
+  plotOptions: ChartCompatObject;
+  legend: ChartCompatObject;
+  colors: string[] | string;
+  markers: ChartCompatObject;
+  grid: ChartCompatObject;
+  labels: Array<string | number>;
+  responsive: ChartCompatObject[];
+  fill: ChartCompatObject;
+};
diff --git a/src/app/modules/templates/charts/models/dashed-line-chart-data.ts b/src/app/modules/templates/charts/models/dashed-line-chart-data.ts
new file mode 100644
index 0000000..9c79e42
--- /dev/null
+++ b/src/app/modules/templates/charts/models/dashed-line-chart-data.ts
@@ -0,0 +1,9 @@
+export interface DashedLineChartData {
+  series: Series[],
+  categories: string[]
+}
+
+interface Series {
+  name: string,
+  data: number[]
+}
diff --git a/src/app/modules/templates/charts/models/heatmap-chart-data.ts b/src/app/modules/templates/charts/models/heatmap-chart-data.ts
new file mode 100644
index 0000000..4615910
--- /dev/null
+++ b/src/app/modules/templates/charts/models/heatmap-chart-data.ts
@@ -0,0 +1,8 @@
+export interface HeatmapChartData {
+  series: Serie[];
+}
+
+interface Serie {
+  name: string;
+  data: number[];
+}
diff --git a/src/app/modules/templates/charts/models/index.ts b/src/app/modules/templates/charts/models/index.ts
new file mode 100644
index 0000000..1e90758
--- /dev/null
+++ b/src/app/modules/templates/charts/models/index.ts
@@ -0,0 +1,6 @@
+export * from './line-chart-data';
+export * from './dashed-line-chart-data';
+export * from './pie-chart-data';
+export * from './heatmap-chart-data';
+export * from './radar-chart-data';
+export * from './bar-chart-data';
diff --git a/src/app/modules/templates/charts/models/line-chart-data.ts b/src/app/modules/templates/charts/models/line-chart-data.ts
new file mode 100644
index 0000000..6456157
--- /dev/null
+++ b/src/app/modules/templates/charts/models/line-chart-data.ts
@@ -0,0 +1,9 @@
+export interface LineChartData {
+  series: Series[],
+  categories: string[]
+}
+
+interface Series {
+  name: string,
+  data: number[]
+}
diff --git a/src/app/modules/templates/charts/models/pie-chart-data.ts b/src/app/modules/templates/charts/models/pie-chart-data.ts
new file mode 100644
index 0000000..b7e58d4
--- /dev/null
+++ b/src/app/modules/templates/charts/models/pie-chart-data.ts
@@ -0,0 +1,4 @@
+export interface PieChartData {
+  series: number[],
+  labels: string[]
+}
diff --git a/src/app/modules/templates/charts/models/radar-chart-data.ts b/src/app/modules/templates/charts/models/radar-chart-data.ts
new file mode 100644
index 0000000..7bd3ee3
--- /dev/null
+++ b/src/app/modules/templates/charts/models/radar-chart-data.ts
@@ -0,0 +1,9 @@
+export interface RadarChartData {
+  series: Series[],
+  categories: string[]
+}
+
+interface Series {
+  name: string,
+  data: number[]
+}
diff --git a/src/app/modules/templates/charts/services/charts.service.ts b/src/app/modules/templates/charts/services/charts.service.ts
new file mode 100644
index 0000000..46550ae
--- /dev/null
+++ b/src/app/modules/templates/charts/services/charts.service.ts
@@ -0,0 +1,286 @@
+import { Injectable } from '@angular/core';
+import {Observable, of} from 'rxjs';
+
+import {
+  DashedLineChartData,
+  HeatmapChartData,
+  LineChartData,
+  PieChartData, RadarChartData
+} from '../models';
+import {BarChartData} from '../models/bar-chart-data';
+import {delay} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChartsService {
+  public loadLineChartData(): Observable<LineChartData>{
+    return of({
+      series: [
+        {
+          name: 'series1',
+          data: [31, 40, 28, 51, 42, 109, 100]
+        },
+        {
+          name: 'series2',
+          data: [11, 32, 45, 32, 34, 52, 41]
+        }
+      ],
+      categories: [
+        '2018-09-19T00:00:00.000Z',
+        '2018-09-19T01:30:00.000Z',
+        '2018-09-19T02:30:00.000Z',
+        '2018-09-19T03:30:00.000Z',
+        '2018-09-19T04:30:00.000Z',
+        '2018-09-19T05:30:00.000Z',
+        '2018-09-19T06:30:00.000Z'
+      ]
+    });
+  }
+
+  public loadDynamicUpdatingChartData(): Observable<LineChartData>{
+    return of({
+      series: [
+        {
+          name: 'series1',
+          data: [
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100),
+            Math.round(Math.random() * 100)
+          ]
+        }
+      ],
+      categories: [
+        '2018-09-19T00:00:00.000Z',
+        '2018-09-19T01:30:00.000Z',
+        '2018-09-19T02:30:00.000Z',
+        '2018-09-19T03:30:00.000Z',
+        '2018-09-19T04:30:00.000Z',
+        '2018-09-19T05:30:00.000Z',
+        '2018-09-19T06:30:00.000Z'
+      ]
+    }).pipe(delay(1000));
+  }
+
+  public loadBasicLineChartData(): Observable<LineChartData>{
+    return of({
+      series: [
+        {
+          name: "Desktops",
+          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
+        }
+      ],
+      categories: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep"
+      ]
+    });
+  }
+  public loadLineDataLabelsChartData(): Observable<LineChartData>{
+    return of({
+      series: [
+        {
+          name: "High - 2013",
+          data: [28, 29, 33, 36, 32, 32, 33]
+        },
+        {
+          name: "Low - 2013",
+          data: [12, 11, 14, 18, 17, 13, 13]
+        }
+      ],
+      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
+    });
+  }
+
+
+  public dashedLineChartData(): Observable<DashedLineChartData>{
+    return of({
+      series: [
+        {
+          name: 'Session Duration',
+          data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
+        },
+        {
+          name: 'Page Views',
+          data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
+        },
+        {
+          name: 'Total Visits',
+          data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
+        }
+      ],
+      categories: [
+        '01 Jan',
+        '02 Jan',
+        '03 Jan',
+        '04 Jan',
+        '05 Jan',
+        '06 Jan',
+        '07 Jan',
+        '08 Jan',
+        '09 Jan',
+        '10 Jan',
+        '11 Jan',
+        '12 Jan'
+      ]
+    });
+  }
+
+  public loadPieChartData(): Observable<PieChartData> {
+    return of({
+      series: [
+        Math.round(Math.random() * 100),
+        Math.round(Math.random() * 100),
+        Math.round(Math.random() * 100),
+        Math.round(Math.random() * 100),
+        Math.round(Math.random() * 100)
+      ],
+      labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
+    });
+  }
+
+  public loadHeatmapChartData(): Observable<HeatmapChartData> {
+    return of({
+      series: [
+        {
+          name: 'Metric1',
+          data: this.generateApexHeatmapChartData(18, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric2',
+          data: this.generateApexHeatmapChartData(18, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric3',
+          data: this.generateApexHeatmapChartData(18, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric4',
+          data: this.generateApexHeatmapChartData(18, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric5',
+          data: this.generateApexHeatmapChartData(18, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric6',
+          data: this.generateApexHeatmapChartData(18, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric7',
+          data: this.generateApexHeatmapChartData(18, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric8',
+          data: this.generateApexHeatmapChartData(18, {
+            min: 0,
+            max: 90
+          })
+        },
+        {
+          name: 'Metric9',
+          data: this.generateApexHeatmapChartData(18, {
+            min: 0,
+            max: 90
+          })
+        }
+      ],
+    });
+  }
+
+  private generateApexHeatmapChartData(count, yrange): number[] {
+    let i = 0;
+    const series = [];
+    while (i < count) {
+      const x = 'w' + (i + 1).toString();
+      const y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+
+      series.push({x, y});
+      i++;
+    }
+    return series;
+  }
+
+  public loadRadarChartData(): Observable<RadarChartData> {
+    return of({
+      series: [
+        {
+          name: "Series 1",
+          data: [80, 50, 30, 40, 100, 20]
+        }
+      ],
+      categories: ["January", "February", "March", "April", "May", "June"]
+    });
+  }
+
+  public loadBarChartData(): Observable<BarChartData> {
+    return of({
+      series: [
+        {
+          name: "basic",
+          data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
+        }
+      ],
+      categories: [
+        "South Korea",
+        "Canada",
+        "United Kingdom",
+        "Netherlands",
+        "Italy",
+        "France",
+        "Japan",
+        "United States",
+        "China",
+        "Germany"
+      ]
+    });
+  }
+
+  public loadGroupedBarChartData(): Observable<BarChartData> {
+    return of({
+      series: [
+        {
+          name: '',
+          data: [44, 55, 41, 64, 22, 43, 21]
+        },
+        {
+          name: '',
+          data: [53, 32, 33, 52, 13, 44, 32]
+        }
+      ],
+      categories: ['2001', '2002', '2003', '2004', '2005', '2006', '2007']
+    });
+  }
+}
diff --git a/src/app/modules/templates/charts/services/index.ts b/src/app/modules/templates/charts/services/index.ts
new file mode 100644
index 0000000..d03fff9
--- /dev/null
+++ b/src/app/modules/templates/charts/services/index.ts
@@ -0,0 +1 @@
+export * from './charts.service';
diff --git a/src/app/modules/templates/core/components/button-colors/button-colors.component.html b/src/app/modules/templates/core/components/button-colors/button-colors.component.html
new file mode 100644
index 0000000..f9512b3
--- /dev/null
+++ b/src/app/modules/templates/core/components/button-colors/button-colors.component.html
@@ -0,0 +1,15 @@
+<mat-card appearance="outlined">
+  <mat-card-title>
+    <p>Example buttons</p>
+  </mat-card-title>
+  <mat-card-content>
+    <div style="display: flex; flex-wrap: wrap;">
+      <button mat-flat-button color="primary">Primary</button>
+      <button mat-flat-button color="accent">Accent</button>
+      <button mat-flat-button color="warn">Warning</button>
+      <button mat-flat-button color="success">Success</button>
+      <button mat-flat-button color="info">Info</button>
+      <button mat-flat-button>Default</button>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/core/components/button-colors/button-colors.component.scss b/src/app/modules/templates/core/components/button-colors/button-colors.component.scss
new file mode 100644
index 0000000..745c4a6
--- /dev/null
+++ b/src/app/modules/templates/core/components/button-colors/button-colors.component.scss
@@ -0,0 +1,5 @@
+@use 'src/app/styles/variables' as *;
+
+button {
+  margin: 8px 1rem 0 0;
+}
diff --git a/src/app/modules/templates/core/components/button-colors/button-colors.component.ts b/src/app/modules/templates/core/components/button-colors/button-colors.component.ts
new file mode 100644
index 0000000..0b66624
--- /dev/null
+++ b/src/app/modules/templates/core/components/button-colors/button-colors.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-button-colors',
+    templateUrl: './button-colors.component.html',
+    styleUrls: ['./button-colors.component.scss'],
+    standalone: false
+})
+export class ButtonColorsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/core/components/colors-page/colors-page.component.html b/src/app/modules/templates/core/components/colors-page/colors-page.component.html
new file mode 100644
index 0000000..f353d9f
--- /dev/null
+++ b/src/app/modules/templates/core/components/colors-page/colors-page.component.html
@@ -0,0 +1,11 @@
+<app-breadcrumb [path]="routes.COLORS"></app-breadcrumb>
+
+<app-state-colors></app-state-colors>
+
+<div class="example">
+  <app-typography-colors class="typography-block"></app-typography-colors>
+
+  <app-button-colors class="button-block"></app-button-colors>
+</div>
+
+
diff --git a/src/app/modules/templates/core/components/colors-page/colors-page.component.scss b/src/app/modules/templates/core/components/colors-page/colors-page.component.scss
new file mode 100644
index 0000000..67d340f
--- /dev/null
+++ b/src/app/modules/templates/core/components/colors-page/colors-page.component.scss
@@ -0,0 +1,28 @@
+@use 'src/app/styles/variables' as *;
+
+.example {
+  display: flex;
+  margin-top: 38px;
+  width: 100%;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.typography-block, .button-block {
+  width: 50%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.typography-block + .button-block {
+  margin-left: 36px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
diff --git a/src/app/modules/templates/core/components/colors-page/colors-page.component.ts b/src/app/modules/templates/core/components/colors-page/colors-page.component.ts
new file mode 100644
index 0000000..2a3258f
--- /dev/null
+++ b/src/app/modules/templates/core/components/colors-page/colors-page.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-colors-page',
+    templateUrl: './colors-page.component.html',
+    styleUrls: ['./colors-page.component.scss'],
+    standalone: false
+})
+export class ColorsPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/core/components/equal-width/equal-width.component.html b/src/app/modules/templates/core/components/equal-width/equal-width.component.html
new file mode 100644
index 0000000..74f8bce
--- /dev/null
+++ b/src/app/modules/templates/core/components/equal-width/equal-width.component.html
@@ -0,0 +1,44 @@
+<mat-card appearance="outlined">
+  <mat-card-title>
+    <p>Equal width</p>
+  </mat-card-title>
+  <mat-card-subtitle>
+    <p>
+      Equal-width columns are easiest to maintain with CSS Grid.
+      Use <code>repeat(..., minmax(0, 1fr))</code> to keep each column the same width.
+    </p>
+  </mat-card-subtitle>
+
+  <mat-card-content>
+    <div class="equal-grid equal-grid_two">
+      <div class="first-grid-item">
+        <span>1 of 2</span>
+      </div>
+      <div class="second-grid-item">
+        <span>2 of 2</span>
+      </div>
+    </div>
+
+    <div class="equal-grid equal-grid_three">
+      <div class="first-grid-item">
+        <span>1 of 3</span>
+      </div>
+      <div class="second-grid-item">
+        <span>2 of 3</span>
+      </div>
+      <div class="third-grid-item">
+        <span>3 of 3</span>
+      </div>
+    </div>
+
+    <pre class="code-wrapper">
+<code class="code blue">{{'<'}}div class="equal-grid equal-grid_three"{{'>'}}</code>
+  <code class="code pink">{{'<'}}div class="equal-grid__item"{{'>'}}1 of 3{{'<'}}/div{{'>'}}</code>
+  <code class="code pink">{{'<'}}div class="equal-grid__item"{{'>'}}2 of 3{{'<'}}/div{{'>'}}</code>
+  <code class="code pink">{{'<'}}div class="equal-grid__item"{{'>'}}3 of 3{{'<'}}/div{{'>'}}</code>
+<code class="code blue">{{'<'}}/div{{'>'}}</code>
+<code class="code grey">equal-grid: display: grid; gap: 24px;</code>
+<code class="code grey">equal-grid_three: grid-template-columns: repeat(3, minmax(0, 1fr));</code>
+    </pre>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/core/components/equal-width/equal-width.component.scss b/src/app/modules/templates/core/components/equal-width/equal-width.component.scss
new file mode 100644
index 0000000..fc54f0a
--- /dev/null
+++ b/src/app/modules/templates/core/components/equal-width/equal-width.component.scss
@@ -0,0 +1,73 @@
+@use "../../../../../styles/font" as *;
+@use "../../../../../styles/variables" as *;
+
+@mixin grid-item {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.first-grid-item {
+  @include grid-item;
+  background-color: $blue;
+}
+
+.second-grid-item {
+  @include grid-item;
+  background-color: $pink;
+}
+
+.third-grid-item {
+  @include grid-item;
+  background-color: $yellow;
+}
+
+.equal-grid {
+  display: grid;
+  gap: 24px;
+  margin-top: 24px;
+}
+
+.equal-grid_two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.equal-grid_three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+@media (max-width: $small) {
+  .equal-grid_two,
+  .equal-grid_three {
+    grid-template-columns: 1fr;
+  }
+}
+
+.code-wrapper {
+  background-color: $blue-white;
+  height: auto;
+  min-height: 145px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 16px 16px 0 16px;
+}
+
+.code {
+  font-size: $fs-xs;
+}
+
+.blue {
+  color: $blue;
+}
+
+.pink {
+  color: $pink;
+}
+
+.grey {
+  color: $grey;
+}
diff --git a/src/app/modules/templates/core/components/equal-width/equal-width.component.ts b/src/app/modules/templates/core/components/equal-width/equal-width.component.ts
new file mode 100644
index 0000000..089c1a5
--- /dev/null
+++ b/src/app/modules/templates/core/components/equal-width/equal-width.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-equal-width',
+    templateUrl: './equal-width.component.html',
+    styleUrls: ['./equal-width.component.scss'],
+    standalone: false
+})
+export class EqualWidthComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/core/components/grid-page/grid-page.component.html b/src/app/modules/templates/core/components/grid-page/grid-page.component.html
new file mode 100644
index 0000000..7babbb2
--- /dev/null
+++ b/src/app/modules/templates/core/components/grid-page/grid-page.component.html
@@ -0,0 +1,13 @@
+<app-breadcrumb [path]="routes.GRID"></app-breadcrumb>
+
+<div class="usage">
+  <app-how-it-work class="usage-block"></app-how-it-work>
+
+  <app-equal-width class="usage-block"></app-equal-width>
+</div>
+
+<app-grid-table></app-grid-table>
+
+<app-vertical-alignment></app-vertical-alignment>
+
+
diff --git a/src/app/modules/templates/core/components/grid-page/grid-page.component.scss b/src/app/modules/templates/core/components/grid-page/grid-page.component.scss
new file mode 100644
index 0000000..35df86a
--- /dev/null
+++ b/src/app/modules/templates/core/components/grid-page/grid-page.component.scss
@@ -0,0 +1,17 @@
+@use "src/app/styles/variables" as *;
+
+.usage {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 36px;
+  width: 100%;
+  margin-top: 36px;
+
+  @media(max-width: $normal) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.usage-block {
+  min-width: 0;
+}
diff --git a/src/app/modules/templates/core/components/grid-page/grid-page.component.ts b/src/app/modules/templates/core/components/grid-page/grid-page.component.ts
new file mode 100644
index 0000000..8f06272
--- /dev/null
+++ b/src/app/modules/templates/core/components/grid-page/grid-page.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-grid-page',
+    templateUrl: './grid-page.component.html',
+    styleUrls: ['./grid-page.component.scss'],
+    standalone: false
+})
+export class GridPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/core/components/grid-table/grid-table.component.html b/src/app/modules/templates/core/components/grid-table/grid-table.component.html
new file mode 100644
index 0000000..013d566
--- /dev/null
+++ b/src/app/modules/templates/core/components/grid-table/grid-table.component.html
@@ -0,0 +1,72 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <p>Grid options</p>
+  </mat-card-title>
+
+  <mat-card-subtitle>
+    <p>
+      Grid recommendations below are aligned with the breakpoint tokens used in this template.
+      The table is intended for practical responsive layout decisions in Angular Material pages.
+    </p>
+  </mat-card-subtitle>
+
+  <mat-card-content class="table-wrapper">
+    <mat-table [dataSource]="dataSource">
+
+      <!-- Value Column -->
+      <ng-container matColumnDef="value">
+        <mat-header-cell *matHeaderCellDef class="table-header"></mat-header-cell>
+        <mat-cell *matCellDef="let element" class="table-body-row"> {{element.value}} </mat-cell>
+      </ng-container>
+
+      <!-- XS Column -->
+      <ng-container matColumnDef="xs">
+        <mat-header-cell *matHeaderCellDef class="table-header">
+          <p class="table-header-title">Extra small</p>
+          <p class="table-header-subtitle">&lt;576px</p>
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element" class="table-body"> {{element.xs}} </mat-cell>
+      </ng-container>
+
+      <!-- S Column -->
+      <ng-container matColumnDef="s">
+        <mat-header-cell *matHeaderCellDef class="table-header">
+          <p class="table-header-title">Small</p>
+          <p class="table-header-subtitle">≥576px</p>
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element" class="table-body"> {{element.s}} </mat-cell>
+      </ng-container>
+
+      <!-- M Column -->
+      <ng-container matColumnDef="m">
+        <mat-header-cell *matHeaderCellDef class="table-header">
+          <p class="table-header-title">Medium</p>
+          <p class="table-header-subtitle">≥768px</p>
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element" class="table-body"> {{element.m}} </mat-cell>
+      </ng-container>
+
+      <!-- L Column -->
+      <ng-container matColumnDef="l">
+        <mat-header-cell *matHeaderCellDef class="table-header">
+          <p class="table-header-title">Large</p>
+          <p class="table-header-subtitle">≥992px</p>
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element" class="table-body"> {{element.l}} </mat-cell>
+      </ng-container>
+
+      <!-- XL Column -->
+      <ng-container matColumnDef="xl">
+        <mat-header-cell *matHeaderCellDef class="table-header">
+          <p class="table-header-title">Extra large</p>
+          <p class="table-header-subtitle">≥1200px</p>
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element" class="table-body"> {{element.xl}} </mat-cell>
+      </ng-container>
+
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+    </mat-table>
+  </mat-card-content>
+
+</mat-card>
diff --git a/src/app/modules/templates/core/components/grid-table/grid-table.component.scss b/src/app/modules/templates/core/components/grid-table/grid-table.component.scss
new file mode 100644
index 0000000..b811b6a
--- /dev/null
+++ b/src/app/modules/templates/core/components/grid-table/grid-table.component.scss
@@ -0,0 +1,46 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/colors" as *;
+
+.card {
+  margin-top: 36px;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.table-header {
+  display: block;
+  padding: 14px 40px 14px 24px;
+  word-wrap: unset;
+  overflow: unset;
+}
+
+.table-header-title {
+  color: $dark-grey;
+  font-size: $fs-normal;
+  margin: 0;
+}
+
+.table-header-subtitle {
+  color: $dark-grey;
+  font-size: $fs-xs;
+  margin: 0;
+}
+
+.table-body {
+  color: $dark-grey;
+  font-size: $fs-small;
+  margin: 0;
+  padding: 14px 40px 14px 24px;
+  word-wrap: unset;
+  overflow: unset;
+}
+
+.table-body-row {
+  color: $dark-grey;
+  margin: 0;
+  padding: 14px 40px 14px 24px;
+  font-size: $fs-normal;
+  font-weight: $fw-normal;
+}
diff --git a/src/app/modules/templates/core/components/grid-table/grid-table.component.ts b/src/app/modules/templates/core/components/grid-table/grid-table.component.ts
new file mode 100644
index 0000000..96e389d
--- /dev/null
+++ b/src/app/modules/templates/core/components/grid-table/grid-table.component.ts
@@ -0,0 +1,72 @@
+import { Component } from '@angular/core';
+
+interface GridTableRow {
+  value: string;
+  xs: string;
+  s: string;
+  m: string;
+  l: string;
+  xl: string;
+}
+
+const ELEMENT_DATA: GridTableRow[] = [
+  {
+    value: 'Viewport width',
+    xs: '<576px',
+    s: '>=576px',
+    m: '>=768px',
+    l: '>=992px',
+    xl: '>=1200px',
+  },
+  {
+    value: 'Recommended card columns',
+    xs: '1',
+    s: '1-2',
+    m: '2',
+    l: '3',
+    xl: '3-4',
+  },
+  {
+    value: 'Recommended gap',
+    xs: '16px',
+    s: '16px',
+    m: '24px',
+    l: '24px',
+    xl: '24px',
+  },
+  {
+    value: 'Primary layout tool',
+    xs: 'CSS Grid / Flex',
+    s: 'CSS Grid / Flex',
+    m: 'CSS Grid / Flex',
+    l: 'CSS Grid / Flex',
+    xl: 'CSS Grid / Flex',
+  },
+  {
+    value: 'Use mat-grid-list',
+    xs: 'Tile blocks only',
+    s: 'Tile blocks only',
+    m: 'Tile blocks only',
+    l: 'Tile blocks only',
+    xl: 'Tile blocks only',
+  },
+  {
+    value: 'Typical screen density',
+    xs: 'Stacked content',
+    s: 'Comfort',
+    m: 'Comfort',
+    l: 'Compact',
+    xl: 'Compact',
+  },
+];
+
+@Component({
+    selector: 'app-grid-table',
+    templateUrl: './grid-table.component.html',
+    styleUrls: ['./grid-table.component.scss'],
+    standalone: false
+})
+export class GridTableComponent {
+  displayedColumns: string[] = ['value', 'xs', 's', 'm', 'l', 'xl'];
+  dataSource = ELEMENT_DATA;
+}
diff --git a/src/app/modules/templates/core/components/how-it-work/how-it-work.component.html b/src/app/modules/templates/core/components/how-it-work/how-it-work.component.html
new file mode 100644
index 0000000..a1f89b6
--- /dev/null
+++ b/src/app/modules/templates/core/components/how-it-work/how-it-work.component.html
@@ -0,0 +1,36 @@
+<mat-card appearance="outlined">
+  <mat-card-title>
+    <p>How it works</p>
+  </mat-card-title>
+  <mat-card-subtitle>
+    <p>
+      In Angular Material 21, responsive page layout is usually built with CSS Grid or Flexbox, while
+      <code>mat-grid-list</code> is best for tile-based blocks with fixed row height.
+      The example below shows a simple responsive grid with equal columns.
+    </p>
+  </mat-card-subtitle>
+
+  <mat-card-content>
+    <div class="grid-demo">
+      <div class="first-grid-item">
+        <span class="grid-item-text">One of three</span>
+      </div>
+      <div class="second-grid-item">
+        <span class="grid-item-text">One of three</span>
+      </div>
+      <div class="third-grid-item">
+        <span class="grid-item-text">One of three</span>
+      </div>
+    </div>
+
+    <pre class="code-wrapper">
+<code class="code blue">{{'<'}}div class="layout-grid"{{'>'}}</code>
+  <code class="code pink">{{'<'}}div class="layout-grid__item"{{'>'}}One of three{{'<'}}/div{{'>'}}</code>
+  <code class="code pink">{{'<'}}div class="layout-grid__item"{{'>'}}One of three{{'<'}}/div{{'>'}}</code>
+  <code class="code pink">{{'<'}}div class="layout-grid__item"{{'>'}}One of three{{'<'}}/div{{'>'}}</code>
+<code class="code blue">{{'<'}}/div{{'>'}}</code>
+<code class="code grey">layout-grid: display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;</code>
+<code class="code grey">On mobile (&lt;576px): grid-template-columns: 1fr;</code>
+    </pre>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/core/components/how-it-work/how-it-work.component.scss b/src/app/modules/templates/core/components/how-it-work/how-it-work.component.scss
new file mode 100644
index 0000000..b5edb96
--- /dev/null
+++ b/src/app/modules/templates/core/components/how-it-work/how-it-work.component.scss
@@ -0,0 +1,69 @@
+@use "../../../../../styles/font" as *;
+@use "../../../../../styles/variables" as *;
+
+@mixin grid-item {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.first-grid-item {
+  @include grid-item;
+  background-color: $blue;
+}
+
+.second-grid-item {
+  @include grid-item;
+  background-color: $yellow;
+}
+
+.third-grid-item {
+  @include grid-item;
+  background-color: $pink;
+}
+
+.grid-item-text {
+  @media (max-width: $small) {
+    margin-left: 12px;
+  }
+}
+
+.grid-demo {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 24px;
+
+  @media (max-width: $small) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.code-wrapper {
+  background-color: $blue-white;
+  height: auto;
+  min-height: 145px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding: 16px 16px 0 16px;
+}
+
+.code {
+  font-size: $fs-xs;
+}
+
+.blue {
+  color: $blue;
+}
+
+.pink {
+  color: $pink;
+}
+
+.grey {
+  color: $grey;
+}
diff --git a/src/app/modules/templates/core/components/how-it-work/how-it-work.component.ts b/src/app/modules/templates/core/components/how-it-work/how-it-work.component.ts
new file mode 100644
index 0000000..76a5f55
--- /dev/null
+++ b/src/app/modules/templates/core/components/how-it-work/how-it-work.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-how-it-work',
+    templateUrl: './how-it-work.component.html',
+    styleUrls: ['./how-it-work.component.scss'],
+    standalone: false
+})
+export class HowItWorkComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/core/components/index.ts b/src/app/modules/templates/core/components/index.ts
new file mode 100644
index 0000000..13379a4
--- /dev/null
+++ b/src/app/modules/templates/core/components/index.ts
@@ -0,0 +1,10 @@
+export * from './button-colors/button-colors.component';
+export * from './colors-page/colors-page.component';
+export * from './equal-width/equal-width.component';
+export * from './grid-page/grid-page.component';
+export * from './how-it-work/how-it-work.component';
+export * from './state-colors/state-colors.component';
+export * from './typography-colors/typography-colors.component';
+export * from './typography-page/typography-page.component';
+export * from './vertical-alignment/vertical-alignment.component';
+export * from './grid-table/grid-table.component';
diff --git a/src/app/modules/templates/core/components/state-colors/state-colors.component.html b/src/app/modules/templates/core/components/state-colors/state-colors.component.html
new file mode 100644
index 0000000..757718b
--- /dev/null
+++ b/src/app/modules/templates/core/components/state-colors/state-colors.component.html
@@ -0,0 +1,49 @@
+<mat-card appearance="outlined" class="color-card">
+  <mat-card-title>
+    <p>States Colors</p>
+  </mat-card-title>
+  <mat-card-subtitle>
+    <p>There is a couple of brand colors that we're using.</p>
+  </mat-card-subtitle>
+
+  <mat-card-content class="table-wrapper">
+    <table mat-table [dataSource]="dataSource" class="table">
+
+      <!-- State Column -->
+      <ng-container matColumnDef="state">
+        <th mat-header-cell *matHeaderCellDef class="header">State</th>
+        <td mat-cell *matCellDef="let element" class="body"> {{element.state}} </td>
+      </ng-container>
+
+      <!-- Preview Column -->
+      <ng-container matColumnDef="preview">
+        <th mat-header-cell *matHeaderCellDef class="header">Preview</th>
+        <td mat-cell *matCellDef="let element" class="body">
+          <div class="circle" [ngClass]="element.preview"></div>
+        </td>
+      </ng-container>
+
+      <!-- Usage Column -->
+      <ng-container matColumnDef="usage">
+        <th mat-header-cell *matHeaderCellDef class="header">Usage Example</th>
+        <td mat-cell *matCellDef="let element" class="usage-column">
+          <div>
+            <pre class="pre-usage"><code class="code">{{'<'}}button mat-flat-button <code class="usage-text">{{element.usage}}</code>{{'>'}}</code></pre>
+          </div>
+        </td>
+      </ng-container>
+
+      <!-- Hex Column -->
+      <ng-container matColumnDef="hex">
+        <th mat-header-cell *matHeaderCellDef class="header">Hex Value</th>
+        <td mat-cell *matCellDef="let element" class="body">
+          <pre class="pre-hex"><code class="code"><{{element.hex}}></code></pre>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/core/components/state-colors/state-colors.component.scss b/src/app/modules/templates/core/components/state-colors/state-colors.component.scss
new file mode 100644
index 0000000..83f67af
--- /dev/null
+++ b/src/app/modules/templates/core/components/state-colors/state-colors.component.scss
@@ -0,0 +1,87 @@
+@use '../../../../../styles/font' as *;
+@use '../../../../../styles/variables' as *;
+
+.color-card {
+  margin-top: 24px;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+}
+
+.header, .body {
+  color: $dark-grey;
+  font-size: $fs-normal;
+  border-bottom-color: $white-gray;
+  white-space: nowrap;
+}
+
+.circle {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+}
+
+.usage-column {
+  color: $dark-grey;
+  font-size: $fs-normal;
+  border-bottom-color: $white-gray;
+  width: 315px;
+}
+
+.usage-text {
+  color: $blue;
+}
+
+@mixin pre {
+  display: flex;
+  justify-content: center;
+  padding: 7px;
+  color: $dark-grey;
+  background: $blue-white;
+
+}
+
+.pre-usage {
+  @include pre;
+  width: 260px;
+}
+
+.pre-hex {
+  @include pre;
+  width: 55px;
+}
+
+.code {
+  font-size: 12px;
+}
+
+
+.blue {
+  background-color: $blue;
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.pink {
+  background-color: $pink;
+}
+
+.green {
+  background-color: $green;
+}
+
+.violet {
+  background-color: $violet;
+}
+
+.grey {
+  background-color: $default;
+}
+
diff --git a/src/app/modules/templates/core/components/state-colors/state-colors.component.ts b/src/app/modules/templates/core/components/state-colors/state-colors.component.ts
new file mode 100644
index 0000000..d1848fc
--- /dev/null
+++ b/src/app/modules/templates/core/components/state-colors/state-colors.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+import { colors } from '../../../../../consts';
+
+export interface PeriodicElement {
+  state: string;
+  preview: string;
+  usage: string;
+  hex: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {state: 'Primary', preview: 'blue', usage: 'color="primary"', hex: colors.BLUE},
+  {state: 'Accent', preview: 'yellow', usage: 'color="accent"', hex: colors.YELLOW},
+  {state: 'Warning', preview: 'pink', usage: 'color="warn"', hex: colors.PINK},
+  {state: 'Success', preview: 'green', usage: 'color="success"', hex: colors.GREEN},
+  {state: 'Info', preview: 'violet', usage: 'color="info"', hex: colors.VIOLET},
+  {state: 'Default', preview: 'grey', usage: '', hex: colors.GREY}
+];
+
+
+@Component({
+    selector: 'app-state-colors',
+    templateUrl: './state-colors.component.html',
+    styleUrls: ['./state-colors.component.scss'],
+    standalone: false
+})
+export class StateColorsComponent {
+  displayedColumns: string[] = ['state', 'preview', 'usage', 'hex'];
+  dataSource = ELEMENT_DATA;
+}
diff --git a/src/app/modules/templates/core/components/typography-colors/typography-colors.component.html b/src/app/modules/templates/core/components/typography-colors/typography-colors.component.html
new file mode 100644
index 0000000..1261014
--- /dev/null
+++ b/src/app/modules/templates/core/components/typography-colors/typography-colors.component.html
@@ -0,0 +1,13 @@
+<mat-card appearance="outlined" class="typography-card">
+  <mat-card-title>
+    <p>Typography Colors</p>
+  </mat-card-title>
+  <div class="typography-content__colors">
+    <h1 class="typography-content__colors_blue">h1. Heading</h1>
+    <h2 class="typography-content__colors_green">h2. Heading</h2>
+    <h3 class="typography-content__colors_pink">h3. Heading</h3>
+    <h4 class="typography-content__colors_yellow">h4. Heading</h4>
+    <h5 class="typography-content__colors_light-blue">h5. Heading</h5>
+    <h6 class="typography-content__colors_violet">h6. Heading</h6>
+  </div>
+</mat-card>
diff --git a/src/app/modules/templates/core/components/typography-colors/typography-colors.component.scss b/src/app/modules/templates/core/components/typography-colors/typography-colors.component.scss
new file mode 100644
index 0000000..63976b7
--- /dev/null
+++ b/src/app/modules/templates/core/components/typography-colors/typography-colors.component.scss
@@ -0,0 +1,64 @@
+@use "../../../../../styles/variables" as *;
+
+
+.typography-card {
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.typography-content {
+
+  &__wrapper {
+    display: flex;
+    padding: 0 8px;
+
+    @media (max-width: $small) {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__item-wrapper {
+    box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A;
+    width: 100%;
+    margin: 16px;
+  }
+
+  &__headings, &__colors, &__settings, &__size {
+    margin-top: 8px;
+    border: 1px dashed $blue;
+    padding: 32px 16px;
+
+    h1 {
+      @media (max-width: $small) {
+        line-height: 46px;
+      }
+    }
+  }
+
+  &__colors {
+    &_blue {
+      color: $blue;
+    }
+
+    &_green {
+      color: $green;
+    }
+
+    &_pink {
+      color: $pink;
+    }
+
+    &_yellow {
+      color: $yellow;
+    }
+
+    &_light-blue {
+      color: $light-blue;
+    }
+
+    &_violet {
+      color: $violet;
+    }
+  }
+}
diff --git a/src/app/modules/templates/core/components/typography-colors/typography-colors.component.ts b/src/app/modules/templates/core/components/typography-colors/typography-colors.component.ts
new file mode 100644
index 0000000..5704f67
--- /dev/null
+++ b/src/app/modules/templates/core/components/typography-colors/typography-colors.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-typography-colors',
+    templateUrl: './typography-colors.component.html',
+    styleUrls: ['./typography-colors.component.scss'],
+    standalone: false
+})
+export class TypographyColorsComponent {
+}
diff --git a/src/app/modules/templates/core/components/typography-page/typography-page.component.html b/src/app/modules/templates/core/components/typography-page/typography-page.component.html
new file mode 100644
index 0000000..52274de
--- /dev/null
+++ b/src/app/modules/templates/core/components/typography-page/typography-page.component.html
@@ -0,0 +1,63 @@
+<app-breadcrumb [path]="routes.TYPOGRAPHY"></app-breadcrumb>
+
+<div class="typography-content">
+  <div class="typography-content__wrapper">
+    <mat-card appearance="outlined" class="typography-content__item-wrapper">
+      <mat-card-title>
+        <p>Headings</p>
+      </mat-card-title>
+      <div class="typography-content__headings">
+        <h1>h1. Heading</h1>
+        <h2>h2. Heading</h2>
+        <h3>h3. Heading</h3>
+        <h4>h4. Heading</h4>
+        <h5>h5. Heading</h5>
+        <h6>h6. Heading</h6>
+      </div>
+    </mat-card>
+
+    <mat-card appearance="outlined" class="typography-content__item-wrapper">
+      <mat-card-title>
+        <p>Typography Colors</p>
+      </mat-card-title>
+      <div class="typography-content__colors">
+        <h1 class="typography-content__colors_blue">h1. Heading</h1>
+        <h2 class="typography-content__colors_green">h2. Heading</h2>
+        <h3 class="typography-content__colors_pink">h3. Heading</h3>
+        <h4 class="typography-content__colors_yellow">h4. Heading</h4>
+        <h5 class="typography-content__colors_light-blue">h5. Heading</h5>
+        <h6 class="typography-content__colors_violet">h6. Heading</h6>
+    </div>
+    </mat-card>
+  </div>
+
+  <div class="typography-content__wrapper">
+    <mat-card appearance="outlined" class="typography-content__item-wrapper">
+      <mat-card-title>
+        <p>Basic Text Settings</p>
+      </mat-card-title>
+      <div class="typography-content__settings">
+        <p>Basic text</p>
+        <p class="fw-light">Basic light text</p>
+        <p class="fw-medium">Basic medium text</p>
+        <p class="fw-bold">Basic bold text</p>
+        <p class="font-uppercase">basic lowercase text</p>
+        <p class="font-lowercase">basic lowercase text</p>
+        <p>Basic Capitalized Text</p>
+        <p class="fst-italic">Basic Cursive Text</p>
+      </div>
+    </mat-card>
+    <mat-card appearance="outlined" class="typography-content__item-wrapper">
+      <mat-card-title>
+        <p>Text Size</p>
+      </mat-card-title>
+      <div class="typography-content__size">
+        <p class="fs-sm">Heading Typography SM Font Size</p>
+        <p class="fs-regular">Heading Typography Regular Font Size</p>
+        <p class="fs-md">Heading Typography MD Font Size</p>
+        <p class="fs-xl">Heading Typography XL Font Size</p>
+        <p class="fs-xxl"> Heading Typography XXL Font Size</p>
+      </div>
+    </mat-card>
+  </div>
+</div>
diff --git a/src/app/modules/templates/core/components/typography-page/typography-page.component.scss b/src/app/modules/templates/core/components/typography-page/typography-page.component.scss
new file mode 100644
index 0000000..fe66b81
--- /dev/null
+++ b/src/app/modules/templates/core/components/typography-page/typography-page.component.scss
@@ -0,0 +1,111 @@
+@use '../../../../../styles/variables' as *;
+@use '../../../../../styles/font' as *;
+
+.typography-content {
+
+  &__wrapper {
+    display: flex;
+    margin-top: 24px;
+
+    @media (max-width: $small) {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__item-wrapper {
+    box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A;
+    width: 100%;
+  }
+
+
+  &__headings, &__colors, &__settings, &__size {
+    margin-top: 8px;
+    border: 1px dashed $blue;
+    padding: 32px 16px;
+
+    h1 {
+      @media (max-width: $small) {
+        line-height: 46px;
+      }
+    }
+  }
+
+  &__colors {
+    &_blue {
+      color: $blue;
+    }
+
+    &_green {
+      color: $green;
+    }
+
+    &_pink {
+      color: $pink;
+    }
+
+    &_yellow {
+      color: $yellow;
+    }
+
+    &_light-blue {
+      color: $light-blue;
+    }
+
+    &_violet {
+      color: $violet;
+    }
+  }
+}
+
+.fw-light {
+  font-weight: $fw-lighter;
+}
+
+.fw-medium {
+  font-weight: $fw-normal;
+}
+
+.fw-bold {
+  font-weight: $fw-bold;
+}
+
+.font-uppercase {
+  text-transform: uppercase;
+}
+
+.font-lowercase {
+  text-transform: lowercase;
+}
+
+.fst-italic {
+  font-style: italic;
+}
+
+.fs-sm {
+  font-size: $fs-xs;
+}
+
+.fs-regular {
+  font-size: $fs-small;
+}
+
+.fs-md {
+  font-size: $fs-medium;
+}
+
+.fs-xl {
+  font-size: $fs-xl;
+}
+
+.fs-xxl {
+  font-size: $fs-xxxl;
+}
+
+.typography-content__item-wrapper + .typography-content__item-wrapper {
+  margin-left: 36px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
diff --git a/src/app/modules/templates/core/components/typography-page/typography-page.component.ts b/src/app/modules/templates/core/components/typography-page/typography-page.component.ts
new file mode 100644
index 0000000..182d8d3
--- /dev/null
+++ b/src/app/modules/templates/core/components/typography-page/typography-page.component.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+import { routes } from '../../../../../consts';
+
+@Component({
+    selector: 'app-typography-page',
+    templateUrl: './typography-page.component.html',
+    styleUrls: ['./typography-page.component.scss'],
+    standalone: false
+})
+export class TypographyPageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/templates/core/components/vertical-alignment/vertical-alignment.component.html b/src/app/modules/templates/core/components/vertical-alignment/vertical-alignment.component.html
new file mode 100644
index 0000000..9b8c149
--- /dev/null
+++ b/src/app/modules/templates/core/components/vertical-alignment/vertical-alignment.component.html
@@ -0,0 +1,120 @@
+<div class="wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>Vertical alignment</p>
+    </mat-card-title>
+    <mat-card-subtitle>
+      <p>
+        Combine <code>mat-grid-list</code> with alignment properties on child blocks to control
+        vertical position inside each tile.
+      </p>
+    </mat-card-subtitle>
+
+    <mat-card-content>
+      <mat-grid-list cols="3" rowHeight="130" gutterSize="24">
+        <mat-grid-tile [colspan]="1" [rowspan]="1">
+          <div class="first-grid-item">
+            <span>Start</span>
+          </div>
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="1" [rowspan]="1">
+          <div class="second-grid-item">
+            <span>Center</span>
+          </div>
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="1" [rowspan]="1">
+          <div class="third-grid-item">
+            <span>End</span>
+          </div>
+        </mat-grid-tile>
+      </mat-grid-list>
+
+      <pre class="code-wrapper">
+<code class="code blue">{{'<'}}mat-grid-list cols="3" rowHeight="130" gutterSize="24"{{'>'}}</code>
+  <code class="code pink">{{'<'}}mat-grid-tile{{'>'}}</code>
+    <code class="code grey">{{'<'}}div style="align-self: flex-start"{{'>'}}Start{{'<'}}/div{{'>'}}</code>
+  <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+  <code class="code pink">{{'<'}}mat-grid-tile{{'>'}}</code>
+    <code class="code grey">{{'<'}}div style="align-self: center"{{'>'}}Center{{'<'}}/div{{'>'}}</code>
+  <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+  <code class="code pink">{{'<'}}mat-grid-tile{{'>'}}</code>
+    <code class="code grey">{{'<'}}div style="align-self: flex-end"{{'>'}}End{{'<'}}/div{{'>'}}</code>
+  <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+<code class="code blue">{{'<'}}/mat-grid-list{{'>'}}</code>
+      </pre>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>Horizontal distribution</p>
+    </mat-card-title>
+    <mat-card-subtitle>
+      <p>
+        To align the whole block horizontally, wrap the grid in a flex container and set
+        <code>justify-content</code> on the wrapper.
+      </p>
+    </mat-card-subtitle>
+
+    <mat-card-content>
+      <div style="margin-top: 24px; display: flex; justify-content: flex-end">
+        <mat-grid-list cols="2" rowHeight="52" gutterSize="24" style="width: 200px">
+          <mat-grid-tile [colspan]="1" [rowspan]="1">
+            <div class="first-grid-item-2">
+              <span>1</span>
+            </div>
+          </mat-grid-tile>
+          <mat-grid-tile [colspan]="1" [rowspan]="1">
+            <div class="second-grid-item-2">
+              <span>2</span>
+            </div>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </div>
+
+      <div style="margin-top: 24px">
+        <mat-grid-list cols="2" rowHeight="52" gutterSize="24">
+          <mat-grid-tile [colspan]="1" [rowspan]="1">
+            <div class="first-grid-item-2">
+              <span>1</span>
+            </div>
+          </mat-grid-tile>
+          <mat-grid-tile [colspan]="1" [rowspan]="1">
+            <div class="second-grid-item-2">
+              <span>2</span>
+            </div>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </div>
+
+      <div style="margin-top: 24px">
+        <mat-grid-list cols="3" rowHeight="52" gutterSize="24">
+          <mat-grid-tile [colspan]="1" [rowspan]="1">
+            <div class="first-grid-item-2">
+              <span>1</span>
+            </div>
+          </mat-grid-tile>
+          <mat-grid-tile [colspan]="1" [rowspan]="1">
+            <div class="second-grid-item-2">
+              <span>2</span>
+            </div>
+          </mat-grid-tile>
+          <mat-grid-tile [colspan]="1" [rowspan]="1">
+            <div class="third-grid-item-2">
+              <span>3</span>
+            </div>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </div>
+
+      <pre class="code-wrapper">
+<code class="code grey">{{'<'}}div style="display: flex; justify-content: flex-end"{{'>'}}</code>
+  <code class="code blue">{{'<'}}mat-grid-list cols="2" rowHeight="52" gutterSize="24"{{'>'}}</code>
+    <code class="code pink">{{'<'}}mat-grid-tile{{'>'}}{{'<'}}div{{'>'}}1{{'<'}}/div{{'>'}}{{'<'}}/mat-grid-tile{{'>'}}</code>
+    <code class="code pink">{{'<'}}mat-grid-tile{{'>'}}{{'<'}}div{{'>'}}2{{'<'}}/div{{'>'}}{{'<'}}/mat-grid-tile{{'>'}}</code>
+  <code class="code blue">{{'<'}}/mat-grid-list{{'>'}}</code>
+<code class="code grey">{{'<'}}/div{{'>'}}</code>
+      </pre>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/src/app/modules/templates/core/components/vertical-alignment/vertical-alignment.component.scss b/src/app/modules/templates/core/components/vertical-alignment/vertical-alignment.component.scss
new file mode 100644
index 0000000..7897781
--- /dev/null
+++ b/src/app/modules/templates/core/components/vertical-alignment/vertical-alignment.component.scss
@@ -0,0 +1,108 @@
+@use "../../../../../styles/font" as *;
+@use "../../../../../styles/variables" as *;
+
+.wrapper {
+  display: flex;
+  width: 100%;
+  margin-top: 36px;
+
+  @media (max-width: $normal) {
+    flex-wrap: wrap;
+  }
+}
+
+.card {
+  box-sizing: border-box;
+  width: 100%;
+  height: fit-content;
+}
+
+.card + .card {
+  margin-left: 36px;
+
+  @media (max-width: $normal) {
+    margin-left: 0;
+    margin-top: 38px;
+  }
+}
+
+
+@mixin grid-item {
+  width: 100%;
+  height: 52px;
+  border-radius: 4px;
+  color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.first-grid-item {
+  @include grid-item;
+  background-color: $blue;
+  align-self: flex-start;
+}
+
+.second-grid-item {
+  @include grid-item;
+  background-color: $yellow;
+  align-self: center;
+}
+
+.third-grid-item {
+  @include grid-item;
+  background-color: $pink;
+  align-self: flex-end;
+}
+
+
+@mixin grid-item-2 {
+  width: 93px;
+  height: 100%;
+  border-radius: 4px;
+  color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.first-grid-item-2 {
+  @include grid-item-2;
+  background-color: $blue;
+  justify-self: flex-end;
+}
+
+.second-grid-item-2 {
+  @include grid-item-2;
+  background-color: $yellow;
+
+}
+
+.third-grid-item-2 {
+  @include grid-item-2;
+  background-color: $pink;
+}
+
+.code-wrapper {
+  background-color: $blue-white;
+  height: auto;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 16px 16px 0 16px;
+}
+
+.code {
+  font-size: $fs-xs;
+}
+
+.blue {
+  color: $blue;
+}
+
+.pink {
+  color: $pink;
+}
+
+.grey {
+  color: $grey;
+}
diff --git a/src/app/modules/templates/core/components/vertical-alignment/vertical-alignment.component.ts b/src/app/modules/templates/core/components/vertical-alignment/vertical-alignment.component.ts
new file mode 100644
index 0000000..393dece
--- /dev/null
+++ b/src/app/modules/templates/core/components/vertical-alignment/vertical-alignment.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-vertical-alignment',
+    templateUrl: './vertical-alignment.component.html',
+    styleUrls: ['./vertical-alignment.component.scss'],
+    standalone: false
+})
+export class VerticalAlignmentComponent {
+
+}
diff --git a/src/app/modules/templates/core/core-routing.module.ts b/src/app/modules/templates/core/core-routing.module.ts
new file mode 100644
index 0000000..03b67a0
--- /dev/null
+++ b/src/app/modules/templates/core/core-routing.module.ts
@@ -0,0 +1,33 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import { ColorsPageComponent, TypographyPageComponent, GridPageComponent } from './components';
+
+const routes: Routes = [
+  // {
+  //   path: '',
+  //   redirectTo: 'typography'
+  // },
+  {
+    path: 'typography',
+    component: TypographyPageComponent
+  },
+  {
+    path: 'colors',
+    component: ColorsPageComponent
+  },
+  {
+    path: 'grid',
+    component: GridPageComponent
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+
+export class CoreRoutingModule {
+}
diff --git a/src/app/modules/templates/core/core.module.ts b/src/app/modules/templates/core/core.module.ts
new file mode 100644
index 0000000..c1d81e7
--- /dev/null
+++ b/src/app/modules/templates/core/core.module.ts
@@ -0,0 +1,46 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CoreRoutingModule } from './core-routing.module';
+import {
+  ButtonColorsComponent,
+  ColorsPageComponent,
+  EqualWidthComponent,
+  GridPageComponent,
+  HowItWorkComponent,
+  StateColorsComponent,
+  TypographyColorsComponent,
+  TypographyPageComponent,
+  VerticalAlignmentComponent
+} from './components';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatTableModule } from '@angular/material/table';
+import { GridTableComponent } from './components';
+import { BreadcrumbComponent } from '../../../shared/ui-elements';
+
+@NgModule({
+  declarations: [
+    ButtonColorsComponent,
+    ColorsPageComponent,
+    EqualWidthComponent,
+    GridPageComponent,
+    HowItWorkComponent,
+    StateColorsComponent,
+    TypographyColorsComponent,
+    TypographyPageComponent,
+    VerticalAlignmentComponent,
+    GridTableComponent
+  ],
+  imports: [
+    CommonModule,
+    CoreRoutingModule,
+    MatCardModule,
+    MatButtonModule,
+    BreadcrumbComponent,
+    MatGridListModule,
+    MatTableModule
+  ]
+})
+export class CoreModule { }
diff --git a/src/app/modules/templates/extra/components/day-info/day-info.component.html b/src/app/modules/templates/extra/components/day-info/day-info.component.html
new file mode 100644
index 0000000..38385b0
--- /dev/null
+++ b/src/app/modules/templates/extra/components/day-info/day-info.component.html
@@ -0,0 +1,10 @@
+<div class="event-wrapper">
+
+  <h3 class="title">{{data.title}}</h3>
+  <div class="date-wrapper">
+    <mat-icon class="icon">calendar_today</mat-icon><p class="date">{{data.start | date:'yyyy-MM-dd'}}</p>
+  </div>
+  <p class="description">{{data.description}}</p>
+
+  <button mat-raised-button color="primary" (click)="close()">ok</button>
+</div>
diff --git a/src/app/modules/templates/extra/components/day-info/day-info.component.scss b/src/app/modules/templates/extra/components/day-info/day-info.component.scss
new file mode 100644
index 0000000..dbc3ff2
--- /dev/null
+++ b/src/app/modules/templates/extra/components/day-info/day-info.component.scss
@@ -0,0 +1,25 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/colors" as *;
+
+.title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+}
+
+.date-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.icon {
+  margin-right: 8px;
+}
+
+.date {
+  margin: 0;
+}
+
+.description {
+  margin-bottom: 16px;
+}
diff --git a/src/app/modules/templates/extra/components/day-info/day-info.component.ts b/src/app/modules/templates/extra/components/day-info/day-info.component.ts
new file mode 100644
index 0000000..a887212
--- /dev/null
+++ b/src/app/modules/templates/extra/components/day-info/day-info.component.ts
@@ -0,0 +1,27 @@
+import { Component, Inject } from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+class DialogData {
+  start: string;
+  title: string;
+  description: string;
+}
+
+@Component({
+    selector: 'app-day-info',
+    templateUrl: './day-info.component.html',
+    styleUrls: ['./day-info.component.scss'],
+    standalone: false
+})
+export class DayInfoComponent {
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+    public dialogRef: MatDialogRef<DayInfoComponent>
+  ) { }
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+
+}
diff --git a/src/app/modules/templates/extra/components/gallery-item/gallery-item.component.html b/src/app/modules/templates/extra/components/gallery-item/gallery-item.component.html
new file mode 100644
index 0000000..799fe2c
--- /dev/null
+++ b/src/app/modules/templates/extra/components/gallery-item/gallery-item.component.html
@@ -0,0 +1,16 @@
+<mat-card appearance="outlined" class="card">
+  <div class="media">
+    <img [src]="img" [alt]="img" class="img">
+
+    <div class="media-overlay"></div>
+
+    <mat-card-footer class="icons-block">
+      <button mat-mini-fab class="icon-wrapper" (click)="like()">
+        <mat-icon class="icon" [ngClass]="{'icon-liked' : liked}">favorite</mat-icon>
+      </button>
+      <button mat-mini-fab class="icon-wrapper" (click)="comment()">
+        <mat-icon class="icon" [ngClass]="{'icon-commented' : commented}">message</mat-icon>
+      </button>
+    </mat-card-footer>
+  </div>
+</mat-card>
diff --git a/src/app/modules/templates/extra/components/gallery-item/gallery-item.component.scss b/src/app/modules/templates/extra/components/gallery-item/gallery-item.component.scss
new file mode 100644
index 0000000..67c1857
--- /dev/null
+++ b/src/app/modules/templates/extra/components/gallery-item/gallery-item.component.scss
@@ -0,0 +1,95 @@
+@use "src/app/styles/variables" as *;
+
+.card {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 0 !important;
+  margin: 0;
+  border-radius: 16px;
+  box-shadow: 0 12px 30px rgba(24, 40, 72, 0.18);
+  transition: transform 180ms ease, box-shadow 180ms ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 18px 36px rgba(24, 40, 72, 0.24);
+  }
+}
+
+.media {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 5;
+  overflow: hidden;
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transform: scale(1.01);
+  transition: transform 220ms ease;
+}
+
+.card:hover .img {
+  transform: scale(1.06);
+}
+
+.media-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to top,
+    rgba(16, 24, 40, 0.55) 0%,
+    rgba(16, 24, 40, 0.18) 32%,
+    rgba(16, 24, 40, 0) 62%
+  );
+}
+
+.icons-block {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: 12px;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.icon-wrapper {
+  --mat-fab-small-container-color: rgba(255, 255, 255, 0.18);
+  --mat-fab-small-foreground-color: #ffffff;
+  --mat-fab-small-state-layer-color: rgba(255, 255, 255, 0.22);
+  width: 38px;
+  height: 38px;
+  min-height: 38px;
+  backdrop-filter: blur(3px);
+  box-shadow: none !important;
+  transition: transform 160ms ease;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+}
+
+.icon-wrapper + .icon-wrapper {
+  margin-left: 10px;
+}
+
+.icon {
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.icon-liked {
+  color: #ff4f8f;
+}
+
+.icon-commented {
+  color: #5e8bff;
+}
diff --git a/src/app/modules/templates/extra/components/gallery-item/gallery-item.component.ts b/src/app/modules/templates/extra/components/gallery-item/gallery-item.component.ts
new file mode 100644
index 0000000..5e3e693
--- /dev/null
+++ b/src/app/modules/templates/extra/components/gallery-item/gallery-item.component.ts
@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'app-gallery-item',
+    templateUrl: './gallery-item.component.html',
+    styleUrls: ['./gallery-item.component.scss'],
+    standalone: false
+})
+export class GalleryItemComponent {
+  @Input() public img: string;
+  public liked: boolean = false;
+  public commented: boolean = false;
+
+  public like(): void {
+    this.liked = !this.liked;
+  }
+
+  public comment(): void {
+    this.commented = !this.commented;
+  }
+}
diff --git a/src/app/modules/templates/extra/components/index.ts b/src/app/modules/templates/extra/components/index.ts
new file mode 100644
index 0000000..543e8a1
--- /dev/null
+++ b/src/app/modules/templates/extra/components/index.ts
@@ -0,0 +1,6 @@
+export * from './search-result-item/search-result-item.component';
+export * from './time-period-select/time-period-select.component';
+export * from './type-item-select/type-item-select.component';
+export * from './result-filtering/result-filtering.component';
+export * from './invoice-card/invoice-card.component';
+export * from './time-line-card/time-line-card.component';
diff --git a/src/app/modules/templates/extra/components/invoice-card/invoice-card.component.html b/src/app/modules/templates/extra/components/invoice-card/invoice-card.component.html
new file mode 100644
index 0000000..3c2b0ba
--- /dev/null
+++ b/src/app/modules/templates/extra/components/invoice-card/invoice-card.component.html
@@ -0,0 +1,101 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title class="card-title">
+    <img src="{{order.img}}" alt="{{order.img}}" class="img">
+
+    <div>
+      <p><span>{{order.id}}</span> / {{order.date}}</p>
+      <p>Some Invoice number description or whatever</p>
+    </div>
+  </mat-card-title>
+
+  <mat-card-subtitle class="card-subtitle">
+    <div>
+      <p class="info-title">Company Information</p>
+      <p class="info-name">{{order.company.name}}</p>
+      <p class="company-status">{{order.company.status}}</p>
+      <p>{{order.company.address}}</p>
+      <p>{{order.company.location}}</p>
+      <p><span class="contacts">e-mail: </span><a class="link">{{order.company.email}}</a></p>
+      <p><span class="contacts">phone: </span>{{order.company.phone}}</p>
+      <p><span class="contacts">fax: </span>{{order.company.fax}}</p>
+    </div>
+
+    <div class="client-block">
+      <p class="info-title">Client Information</p>
+      <p class="info-name">{{order.client.name}}</p>
+      <p class="client-company"><span>Consultant at </span> <a class="link">{{order.client.company}}</a></p>
+      <p><span class="contacts">e-mail: </span><a class="link">{{order.client.email}}</a></p>
+      <p><span class="contacts">phone: </span>{{order.client.phone}}</p>
+      <p><span class="contacts">fax: </span>{{order.client.fax}}</p>
+      <span>Note: </span>
+      <p>{{order.client.note}}</p>
+    </div>
+  </mat-card-subtitle>
+
+  <mat-card-content class="table-wrapper">
+    <table mat-table [dataSource]="dataSource" class="table">
+
+      <!-- Id Column -->
+      <ng-container matColumnDef="id" >
+        <th class="table-header" mat-header-cell *matHeaderCellDef > # </th>
+        <td class="table-body" mat-cell *matCellDef="let element"> {{element.id}} </td>
+      </ng-container>
+
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th class="table-header" mat-header-cell *matHeaderCellDef> Item </th>
+        <td class="table-body" mat-cell *matCellDef="let element"> {{element.name}} </td>
+      </ng-container>
+
+      <!-- Description Column -->
+      <ng-container matColumnDef="description">
+        <th class="table-header" mat-header-cell *matHeaderCellDef> Description </th>
+        <td class="table-body" mat-cell *matCellDef="let element"> {{element.description}} </td>
+      </ng-container>
+
+      <!-- Quantity Column -->
+      <ng-container matColumnDef="quantity">
+        <th class="table-header" mat-header-cell *matHeaderCellDef> Quantity </th>
+        <td class="table-body" mat-cell *matCellDef="let element"> {{element.quantity}} </td>
+      </ng-container>
+
+      <!-- Price Column -->
+      <ng-container matColumnDef="price">
+        <th class="table-header" mat-header-cell *matHeaderCellDef> Price per unit </th>
+        <td class="table-body" mat-cell *matCellDef="let element"> {{element.price}} </td>
+      </ng-container>
+
+      <!-- Total Column -->
+      <ng-container matColumnDef="total">
+        <th class="table-header" mat-header-cell *matHeaderCellDef> Total </th>
+        <td class="table-body" mat-cell *matCellDef="let element"> {{element.total}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </mat-card-content>
+
+  <mat-card-footer class="card-footer">
+    <div class="total-block">
+      <p><span>Note: </span>{{order.note}}</p>
+      <div class="total-title-wrapper">
+        <p class="total-line"><span class="total-title">Subtotal: </span>{{order.subtotal}}</p>
+        <p class="total-line"><span class="total-title">Tax(10%): </span>{{order.tax}}</p>
+        <p class="total total-line"><span class="total-title">Total: </span>{{order.total}}</p>
+
+        <p>Marketing Consultant</p>
+        <span>{{order.consultantName}}</span>
+      </div>
+    </div>
+    <div class="action-block">
+      <button mat-raised-button class="button-wrapper">
+        <p class="button-text"><mat-icon class="icon">print</mat-icon> Print</p>
+      </button>
+
+      <button mat-raised-button color="success" class="button-wrapper">
+        <p class="button-text white-text"><mat-icon class="icon">arrow_forward</mat-icon> Proceed with payment</p>
+      </button>
+    </div>
+  </mat-card-footer>
+</mat-card>
diff --git a/src/app/modules/templates/extra/components/invoice-card/invoice-card.component.scss b/src/app/modules/templates/extra/components/invoice-card/invoice-card.component.scss
new file mode 100644
index 0000000..2c2261d
--- /dev/null
+++ b/src/app/modules/templates/extra/components/invoice-card/invoice-card.component.scss
@@ -0,0 +1,176 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+
+.card {
+  margin-top: 24px;
+}
+
+p {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  margin: 0;
+  line-height: 1.5;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+}
+
+span {
+  font-weight: $fw-bold;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  color: $dark-grey;
+  font-size: $fs-normal;
+}
+
+.card-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.img {
+  max-height: 100px;
+  border-radius: 10px;
+  margin-right: 24px;
+}
+
+.card-subtitle {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.client-block {
+  text-align: right;
+
+  @media (max-width: $small) {
+    text-align: left;
+    margin-top: 36px;
+  }
+}
+
+.info-title {
+  font-size: $fs-large;
+  margin-bottom: 16px;
+}
+
+.info-name {
+  font-size: $fs-regular;
+}
+
+.company-status {
+  font-weight: $fw-bold;
+}
+
+.link {
+  color: $blue;
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.contacts {
+  font-weight: $fw-lighter;
+  text-decoration: underline dotted;
+}
+
+.table-wrapper {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+}
+
+.mat-mdc-row:nth-child(odd){
+  background-color: $blue-white;
+}
+
+.table-header {
+  font-size: 15px;
+  font-weight: $fw-normal;
+  padding: 14px 40px 24px 14px;
+  color: $dark-grey;
+  text-transform: uppercase;
+}
+
+.table-body {
+  font-size: 15px;
+  font-weight: $fw-lighter;
+  padding: 14px 40px 24px 14px;
+  color: $dark-grey;
+}
+
+.card-footer {
+  padding: 24px;
+}
+
+.total-block {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.total-line {
+  display: flex;
+  justify-content: space-between;
+}
+
+.total-title-wrapper {
+  @media (max-width: $small) {
+    margin-top: 24px;
+  }
+}
+
+.total-title {
+  font-weight: $fw-lighter;
+  margin: 0 16px 16px 0;
+}
+
+.total {
+  font-weight: $fw-bold;
+}
+
+.action-block {
+  text-align: right;
+  margin-top: 24px;
+}
+
+.button-wrapper {
+  padding: 3.5px 12px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+}
+
+.button-wrapper + .button-wrapper {
+  margin-left: 16px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 16px;
+  }
+}
+
+.button-text {
+  font-size: $fs-small;
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 8px;
+  font-size: $fs-large;
+  padding: 0;
+}
+
+.white-text {
+  color: $white;
+}
diff --git a/src/app/modules/templates/extra/components/invoice-card/invoice-card.component.ts b/src/app/modules/templates/extra/components/invoice-card/invoice-card.component.ts
new file mode 100644
index 0000000..ae01e7f
--- /dev/null
+++ b/src/app/modules/templates/extra/components/invoice-card/invoice-card.component.ts
@@ -0,0 +1,20 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+import {Item, Order} from '../../models';
+import {MatTableDataSource} from '@angular/material/table';
+
+@Component({
+    selector: 'app-invoice-card',
+    templateUrl: './invoice-card.component.html',
+    styleUrls: ['./invoice-card.component.scss'],
+    standalone: false
+})
+export class InvoiceCardComponent implements OnInit {
+  @Input() public order: Order;
+  public displayedColumns: string[] = ['id', 'name', 'description', 'quantity', 'price', 'total'];
+  public dataSource: MatTableDataSource<Item>;
+
+  public ngOnInit(): void {
+    this.dataSource = new MatTableDataSource<Item>(this.order.items);
+  }
+}
diff --git a/src/app/modules/templates/extra/components/new-day-event/new-day-event.component.html b/src/app/modules/templates/extra/components/new-day-event/new-day-event.component.html
new file mode 100644
index 0000000..f3848eb
--- /dev/null
+++ b/src/app/modules/templates/extra/components/new-day-event/new-day-event.component.html
@@ -0,0 +1,12 @@
+<div class="event-wrapper">
+  <h3 class="title">Create New Event</h3>
+  <p class="subtitle">Just enter event name to create a new one</p>
+
+  <mat-form-field class="form">
+    <input matInput placeholder="Title" [(ngModel)]="data.event">
+  </mat-form-field>
+
+  <button mat-raised-button class="button" (click)="close()">Close</button>
+  <button mat-raised-button color="success" [mat-dialog-close]="data.event">Create</button>
+</div>
+
diff --git a/src/app/modules/templates/extra/components/new-day-event/new-day-event.component.scss b/src/app/modules/templates/extra/components/new-day-event/new-day-event.component.scss
new file mode 100644
index 0000000..5d1f3f6
--- /dev/null
+++ b/src/app/modules/templates/extra/components/new-day-event/new-day-event.component.scss
@@ -0,0 +1,34 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+
+.event-wrapper {
+  width: 317px;
+}
+
+.title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+}
+
+.subtitle {
+  font-size: $fs-small;
+  color: $dark-grey;
+}
+
+.form {
+  display: block;
+}
+
+.button {
+  background-color: transparent;
+  color: $dark-grey;
+  box-shadow: none;
+
+  &:hover {
+    background-color: $header-button-background-color-hover;
+  }
+}
+
+button + button {
+  margin-left: 8px;
+}
diff --git a/src/app/modules/templates/extra/components/new-day-event/new-day-event.component.ts b/src/app/modules/templates/extra/components/new-day-event/new-day-event.component.ts
new file mode 100644
index 0000000..38db535
--- /dev/null
+++ b/src/app/modules/templates/extra/components/new-day-event/new-day-event.component.ts
@@ -0,0 +1,25 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+class DialogData {
+  event: string;
+}
+
+@Component({
+    selector: 'app-new-day-event',
+    templateUrl: './new-day-event.component.html',
+    styleUrls: ['./new-day-event.component.scss'],
+    standalone: false
+})
+export class NewDayEventComponent {
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+    public dialogRef: MatDialogRef<NewDayEventComponent>
+  ) {}
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+
+}
diff --git a/src/app/modules/templates/extra/components/result-filtering/result-filtering.component.html b/src/app/modules/templates/extra/components/result-filtering/result-filtering.component.html
new file mode 100644
index 0000000..e677fef
--- /dev/null
+++ b/src/app/modules/templates/extra/components/result-filtering/result-filtering.component.html
@@ -0,0 +1,41 @@
+<div class="filter-card">
+  <h3 class="title">Results <span class="title-bold">Filtering</span></h3>
+  <p class="subtitle">Listed content is categorized by the following groups:</p>
+
+  <mat-list class="list">
+    <mat-list-item class="list-wrapper">
+      <div class="list-item">
+        <p class="list-title">Hot Ideas</p>
+        <mat-chip-listbox>
+          <mat-chip-option color="primary" selected class="list-badge">34</mat-chip-option>
+        </mat-chip-listbox>
+      </div>
+    </mat-list-item>
+    <mat-list-item class="list-wrapper">
+      <div class="list-item">
+        <p class="list-title">Latest Pictures</p>
+        <mat-chip-listbox>
+          <mat-chip-option color="warn" selected class="list-badge">9</mat-chip-option>
+        </mat-chip-listbox>
+      </div>
+    </mat-list-item>
+    <mat-list-item class="list-wrapper">
+      <div class="list-item">
+        <p class="list-title">Labels of Day</p>
+      </div>
+    </mat-list-item>
+    <mat-list-item class="list-wrapper">
+      <div class="list-item">
+        <p class="list-title">Resent Movies</p>
+      </div>
+    </mat-list-item>
+    <mat-list-item class="list-wrapper">
+      <div class="list-item">
+        <p class="list-title">Globals</p>
+        <mat-chip-listbox>
+          <mat-chip-option color="accent" selected class="list-badge">18</mat-chip-option>
+        </mat-chip-listbox>
+      </div>
+    </mat-list-item>
+  </mat-list>
+</div>
diff --git a/src/app/modules/templates/extra/components/result-filtering/result-filtering.component.scss b/src/app/modules/templates/extra/components/result-filtering/result-filtering.component.scss
new file mode 100644
index 0000000..4cf9b4f
--- /dev/null
+++ b/src/app/modules/templates/extra/components/result-filtering/result-filtering.component.scss
@@ -0,0 +1,72 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.filter-card {
+  padding: 18px 16px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 249, 255, 0.95));
+  border: 1px solid rgba(94, 139, 255, 0.12);
+  box-shadow: 0 8px 22px rgba(24, 40, 72, 0.08);
+}
+
+.title {
+  font-weight: $fw-lighter;
+  font-size: $fs-medium;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.title-bold {
+  font-weight: $fw-normal;
+}
+
+.subtitle {
+  margin: 8px 0 10px;
+  color: $dark-grey;
+  font-size: $fs-small;
+  line-height: 1.5;
+}
+
+.list {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.list-wrapper {
+  cursor: pointer;
+  border-radius: 10px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  transition: background-color 140ms ease;
+
+  &:hover {
+    background-color: $white-blue;
+  }
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.list-title {
+  color: $dark-grey;
+  margin: 0;
+  font-size: $fs-small;
+  font-weight: $fw-normal;
+}
+
+.list-badge {
+  width: 24px;
+  min-height: 24px;
+  min-width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: $fw-bold;
+  padding: 0;
+  margin: 0;
+}
diff --git a/src/app/modules/templates/extra/components/result-filtering/result-filtering.component.ts b/src/app/modules/templates/extra/components/result-filtering/result-filtering.component.ts
new file mode 100644
index 0000000..c399f66
--- /dev/null
+++ b/src/app/modules/templates/extra/components/result-filtering/result-filtering.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-result-filtering',
+    templateUrl: './result-filtering.component.html',
+    styleUrls: ['./result-filtering.component.scss'],
+    standalone: false
+})
+export class ResultFilteringComponent {
+
+}
diff --git a/src/app/modules/templates/extra/components/search-result-item/search-result-item.component.html b/src/app/modules/templates/extra/components/search-result-item/search-result-item.component.html
new file mode 100644
index 0000000..a25849e
--- /dev/null
+++ b/src/app/modules/templates/extra/components/search-result-item/search-result-item.component.html
@@ -0,0 +1,20 @@
+<mat-card appearance="outlined" class="card">
+  <div class="media-wrapper">
+    <img [src]="result.img" [alt]="result.title" class="img">
+  </div>
+
+  <mat-card-content class="content">
+    <div class="description-wrapper">
+      <p class="subtitle">{{result.subtitle}}</p>
+      <h3 class="title">{{result.title}}</h3>
+      <p class="description">{{result.description}}</p>
+    </div>
+
+    <div class="price-wrapper">
+      <p class="price-label">From</p>
+      <p class="price">{{result.price}}</p>
+      <p class="price-period">per week</p>
+      <button mat-raised-button color="primary" class="learn-button">Learn more</button>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/extra/components/search-result-item/search-result-item.component.scss b/src/app/modules/templates/extra/components/search-result-item/search-result-item.component.scss
new file mode 100644
index 0000000..5958a08
--- /dev/null
+++ b/src/app/modules/templates/extra/components/search-result-item/search-result-item.component.scss
@@ -0,0 +1,152 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.card {
+  padding: 0 !important;
+  overflow: hidden;
+  margin-top: 0;
+  min-height: 184px;
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  border-radius: 14px;
+  box-shadow: 0 8px 24px rgba(24, 40, 72, 0.1);
+  transition: transform 180ms ease, box-shadow 180ms ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 28px rgba(24, 40, 72, 0.14);
+  }
+
+  @media (max-width: $large) {
+    grid-template-columns: 200px 1fr;
+  }
+
+  @media (max-width: $medium) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.media-wrapper {
+  width: 100%;
+  height: 100%;
+  min-height: 184px;
+  overflow: hidden;
+
+  @media (max-width: $medium) {
+    min-height: 220px;
+  }
+}
+
+.img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: stretch;
+  padding: 18px 20px !important;
+  overflow: hidden;
+  height: 100%;
+
+  @media (max-width: $small) {
+    flex-direction: column;
+    gap: 14px;
+    padding: 16px !important;
+  }
+}
+
+.description-wrapper {
+  width: 100%;
+  min-width: 0;
+  padding-right: 10px;
+
+  @media (max-width: $small) {
+    padding-right: 0;
+  }
+}
+
+.title {
+  cursor: pointer;
+  margin: 0 0 6px;
+  font-size: $fs-medium;
+  font-weight: $fw-extra-bold;
+  color: $blue;
+  line-height: 1.35;
+  letter-spacing: 0.15px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.subtitle {
+  margin: 0 0 8px;
+  color: $light-grey;
+  font-size: $fs-small;
+  letter-spacing: 0.2px;
+}
+
+.description {
+  color: $grey;
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  margin: 0;
+  text-overflow: initial;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  line-height: 1.45;
+}
+
+.price-wrapper {
+  border-left: 1px solid rgba(94, 139, 255, 0.16);
+  min-width: 138px;
+  padding-left: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  @media (max-width: $small) {
+    border-left: 0;
+    border-top: 1px solid rgba(94, 139, 255, 0.16);
+    min-width: 0;
+    padding-left: 0;
+    padding-top: 12px;
+    width: 100%;
+  }
+}
+
+.price-label {
+  margin: 0;
+  color: $light-grey;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+
+.price {
+  margin: 2px 0;
+  font-weight: $fw-extra-bold;
+  font-size: 28px;
+  color: $dark-grey;
+  line-height: 1.15;
+}
+
+.price-period {
+  margin: 0;
+  color: $light-grey;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.35px;
+}
+
+.learn-button {
+  margin-top: 12px;
+}
diff --git a/src/app/modules/templates/extra/components/search-result-item/search-result-item.component.ts b/src/app/modules/templates/extra/components/search-result-item/search-result-item.component.ts
new file mode 100644
index 0000000..1a1e786
--- /dev/null
+++ b/src/app/modules/templates/extra/components/search-result-item/search-result-item.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { SearchResult } from '../../models';
+
+@Component({
+    selector: 'app-search-result-item',
+    templateUrl: './search-result-item.component.html',
+    styleUrls: ['./search-result-item.component.scss'],
+    standalone: false
+})
+export class SearchResultItemComponent {
+  @Input() result: SearchResult;
+}
diff --git a/src/app/modules/templates/extra/components/time-line-card/time-line-card.component.html b/src/app/modules/templates/extra/components/time-line-card/time-line-card.component.html
new file mode 100644
index 0000000..acbed25
--- /dev/null
+++ b/src/app/modules/templates/extra/components/time-line-card/time-line-card.component.html
@@ -0,0 +1,82 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title class="customer-info">
+    <img src="{{timeLineItem.img}}" alt="{{timeLineItem.img}}" class="avatar">
+
+    <div class="customer-name-wrapper">
+      <p class="customer-name"><a class="link">{{timeLineItem.name}}</a> {{timeLineItem.nik}}</p>
+      <p class="date-publish">{{timeLineItem.datePublish}}</p>
+    </div>
+  </mat-card-title>
+
+  <mat-card-subtitle class="description">
+    @if (timeLineItem.title) {
+      <p class="title-text">{{timeLineItem.title}}</p>
+    }
+    <p class="description-text">{{timeLineItem.description}}</p>
+  </mat-card-subtitle>
+
+  <mat-card-content class="content">
+    @if (timeLineItem.content.type === 'map') {
+      <iframe
+        [src]="mapEmbedUrl"
+        class="osm-map"
+        title="OpenStreetMap"
+        loading="lazy"
+        referrerpolicy="no-referrer-when-downgrade"
+      ></iframe>
+    }
+
+    @if (timeLineItem.content.type !== 'map' && timeLineItem.content.img) {
+      <img class="content-img" src="{{timeLineItem.content.img}}">
+    }
+
+    @if (timeLineItem.content.type !== 'map' && timeLineItem.content.text) {
+      <div class="content-text-wrapper">
+        <button color="default" mat-flat-button class="content-button" (click)="showText()">Read more...</button>
+        @if (isShowText) {
+          <p class="content-text">{{timeLineItem.content.text}}</p>
+        }
+      </div>
+    }
+
+    <div class="action-wrapper">
+      <div class="icons-block">
+        <button color="default" mat-mini-fab class="icon-wrapper">
+          <mat-icon class="icon">favorite</mat-icon>
+        </button>
+        <button color="default" mat-mini-fab class="icon-wrapper">
+          <mat-icon class="icon">message</mat-icon>
+        </button>
+      </div>
+
+      @if (timeLineItem.likes.length !== 0) {
+        <div class="likes-wrapper">
+          @for (item of timeLineItem.likes; track item) {
+            <img class="likes-logo" src="{{item.img}}" alt="{{item.img}}">
+          }
+        </div>
+      }
+    </div>
+
+  </mat-card-content>
+
+  @if (timeLineItem.comments.length !==0) {
+    <mat-card-footer class="comments">
+      @for (item of timeLineItem.comments; track item) {
+        <div class="comment-wrapper">
+          <img class="avatar" src="{{item.img}}" alt="{{item.img}}">
+          <div>
+            <p class="comment-name"><a class="link">{{item.name}}</a> {{item.date}}</p>
+            <p class="comment-text">{{item.comment}}</p>
+          </div>
+        </div>
+      }
+      <div class="custom-comment-wrapper">
+        <button mat-mini-fab color="primary" class="custom-icon">P</button>
+        <mat-form-field class="custom-comment">
+          <input matInput placeholder="Write your comment...">
+        </mat-form-field>
+      </div>
+    </mat-card-footer>
+  }
+</mat-card>
diff --git a/src/app/modules/templates/extra/components/time-line-card/time-line-card.component.scss b/src/app/modules/templates/extra/components/time-line-card/time-line-card.component.scss
new file mode 100644
index 0000000..0db0f52
--- /dev/null
+++ b/src/app/modules/templates/extra/components/time-line-card/time-line-card.component.scss
@@ -0,0 +1,201 @@
+@use './src/app/styles/font' as *;
+@use './src/app/styles/variables' as *;
+
+.card {
+  width: 100%;
+  padding: 0;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+}
+
+.customer-info {
+  display: flex;
+  padding: 24px 24px 16px 24px;
+}
+
+.comments {
+  padding: 0 24px 24px 24px;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+  border-radius: 50%;
+}
+
+.customer-name-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.customer-name {
+  font-size: $fs-normal;
+  font-weight: $fw-bold;
+  margin: 0;
+  color: $dark-grey;
+}
+
+.link {
+  color: $blue;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.date-publish {
+  font-size: $fs-small;
+  font-weight: $fw-lighter;
+  margin: 0;
+  color: $dark-grey;
+}
+
+.description {
+  padding: 0 24px;
+  color: $dark-grey;
+  margin: 8px;
+}
+
+.title-text {
+  font-size: $fs-normal;
+  color: $dark-grey;
+}
+
+.description-text {
+  margin: 0;
+}
+
+.content {
+  margin: 12px 0 0 0;
+}
+
+.content-img {
+  width: 100%;
+}
+
+.content-text-wrapper {
+  padding: 0 40px;
+}
+
+.content-button {
+  background-color: transparent;
+  color: $dark-grey;
+  box-shadow: none;
+  margin-bottom: 16px;
+
+  &:hover {
+    background-color: $header-button-background-color-hover;
+  }
+}
+
+.content-text {
+  font-size: $fs-normal;
+  color: $dark-grey;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: $fw-lighter;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+  margin: 0;
+}
+
+.action-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 24px;
+}
+
+.likes-wrapper {
+  display: flex;
+}
+
+.likes-logo {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+
+.likes-logo + .likes-logo {
+  margin-left: 8px;
+}
+
+.osm-map {
+  width: 100%;
+  height: 200px;
+  border: 0;
+  display: block;
+}
+
+.icons-block {
+  width: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.icon-wrapper {
+  width: 48px;
+  height: 48px;
+  background-color: transparent;
+  box-shadow: none;
+
+  &:hover {
+    background-color: $header-button-background-color-hover;
+  }
+}
+
+.icon-wrapper + .icon-wrapper {
+  margin-left: 8px;
+}
+
+.icon {
+  color: rgba(110, 110, 110, 0.6);
+}
+
+.comment-wrapper {
+  display: flex;
+  margin: 0 -8px 0 -8px;
+  padding: 16px 24px;
+  border-top: 1px solid $white-gray;
+  border-bottom: 1px solid $white-gray;
+}
+
+.comment-wrapper + .comment-wrapper {
+  margin-top: -1px;
+}
+
+.comment-name {
+  font-size: 12.32px;
+  font-weight: $fw-lighter;
+  margin: 0 0 4px 0;
+  color: $dark-grey;
+}
+
+.comment-text {
+  font-size: 12.8px;
+  margin: 0;
+}
+
+.custom-comment-wrapper {
+  padding: 8px 16px 0 16px;
+  height: 50px;
+
+  @media (max-width: $medium) {
+    height: auto;
+  }
+}
+
+.custom-icon {
+  width: 40px;
+  height: 40px;
+  margin-right: 8px;
+  box-shadow: none;
+  font-size: $fs-normal;
+}
+
+.custom-comment {
+  width: 88%;
+  font-size: $fs-normal;
+}
diff --git a/src/app/modules/templates/extra/components/time-line-card/time-line-card.component.ts b/src/app/modules/templates/extra/components/time-line-card/time-line-card.component.ts
new file mode 100644
index 0000000..f8f2ab3
--- /dev/null
+++ b/src/app/modules/templates/extra/components/time-line-card/time-line-card.component.ts
@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { TimeLineItem } from '../../models';
+
+@Component({
+    selector: 'app-time-line-card',
+    templateUrl: './time-line-card.component.html',
+    styleUrls: ['./time-line-card.component.scss'],
+    standalone: false
+})
+export class TimeLineCardComponent {
+  @Input() public timeLineItem: TimeLineItem;
+  public readonly center = { lat: -37.813179, lng: 144.950259 };
+  public readonly mapEmbedUrl: SafeResourceUrl;
+  public isShowText: boolean = false;
+
+  constructor(private sanitizer: DomSanitizer) {
+    const bbox = [144.85, -37.90, 145.05, -37.75].join('%2C');
+    const marker = `${this.center.lat}%2C${this.center.lng}`;
+    this.mapEmbedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
+      `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${marker}`
+    );
+  }
+
+  public showText(): void {
+    this.isShowText = !this.isShowText;
+  }
+}
diff --git a/src/app/modules/templates/extra/components/time-period-select/time-period-select.component.html b/src/app/modules/templates/extra/components/time-period-select/time-period-select.component.html
new file mode 100644
index 0000000..07c46d7
--- /dev/null
+++ b/src/app/modules/templates/extra/components/time-period-select/time-period-select.component.html
@@ -0,0 +1,7 @@
+<mat-select [(ngModel)]="selectedValue">
+  <mat-option [value]="selectedFields.allTime">All Time</mat-option>
+  <mat-option [value]="selectedFields.last24h">Last 24 h</mat-option>
+  <mat-option [value]="selectedFields.lastMonth">Last Month</mat-option>
+  <mat-option [value]="selectedFields.lastYear">Last Year</mat-option>
+  <mat-option [value]="selectedFields.latest">Latest</mat-option>
+</mat-select>
diff --git a/src/app/modules/templates/extra/components/time-period-select/time-period-select.component.scss b/src/app/modules/templates/extra/components/time-period-select/time-period-select.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/extra/components/time-period-select/time-period-select.component.ts b/src/app/modules/templates/extra/components/time-period-select/time-period-select.component.ts
new file mode 100644
index 0000000..3b3bcce
--- /dev/null
+++ b/src/app/modules/templates/extra/components/time-period-select/time-period-select.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+enum SelectedFields {
+  allTime = 'All Time',
+  last24h = 'Last 24h',
+  lastMonth = 'Last Month',
+  lastYear = 'Last Year',
+  latest = 'Latest'
+}
+
+@Component({
+    selector: 'app-time-period-select',
+    templateUrl: './time-period-select.component.html',
+    styleUrls: ['./time-period-select.component.scss'],
+    standalone: false
+})
+export class TimePeriodSelectComponent {
+  public selectedFields: typeof SelectedFields = SelectedFields;
+  public selectedValue = this.selectedFields.latest;
+}
diff --git a/src/app/modules/templates/extra/components/type-item-select/type-item-select.component.html b/src/app/modules/templates/extra/components/type-item-select/type-item-select.component.html
new file mode 100644
index 0000000..3652285
--- /dev/null
+++ b/src/app/modules/templates/extra/components/type-item-select/type-item-select.component.html
@@ -0,0 +1,8 @@
+<div>
+  <mat-select [(ngModel)]="selectedValue">
+    <mat-option [value]="selectedFields.all">All</mat-option>
+    <mat-option [value]="selectedFields.popular">Popular</mat-option>
+    <mat-option [value]="selectedFields.interesting">Interesting</mat-option>
+    <mat-option [value]="selectedFields.latest">Latest</mat-option>
+  </mat-select>
+</div>
diff --git a/src/app/modules/templates/extra/components/type-item-select/type-item-select.component.scss b/src/app/modules/templates/extra/components/type-item-select/type-item-select.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/extra/components/type-item-select/type-item-select.component.ts b/src/app/modules/templates/extra/components/type-item-select/type-item-select.component.ts
new file mode 100644
index 0000000..f66ae5a
--- /dev/null
+++ b/src/app/modules/templates/extra/components/type-item-select/type-item-select.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+enum SelectedFields {
+  all = 'All',
+  popular = 'Popular',
+  interesting = 'Interesting',
+  latest = 'Latest'
+}
+
+@Component({
+    selector: 'app-type-item-select',
+    templateUrl: './type-item-select.component.html',
+    styleUrls: ['./type-item-select.component.scss'],
+    standalone: false
+})
+export class TypeItemSelectComponent {
+  public selectedFields: typeof SelectedFields = SelectedFields;
+  public selectedValue = this.selectedFields.popular;
+}
diff --git a/src/app/modules/templates/extra/containers/calendar-page/calendar-page.component.html b/src/app/modules/templates/extra/containers/calendar-page/calendar-page.component.html
new file mode 100644
index 0000000..1bfce72
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/calendar-page/calendar-page.component.html
@@ -0,0 +1,51 @@
+<app-breadcrumb [path]="routes.CALENDAR"></app-breadcrumb>
+
+<div class="content-wrapper">
+  <div class="external-event-wrapper" #externalEvents>
+    <h3 class="title">Draggable Events</h3>
+    <p class="subtitle">Just drap and drop events from there directly into the calendar.</p>
+
+    <mat-card appearance="outlined" class="external-event" data-event-class="bg-success">
+      <mat-card-content class="external-event-content">
+        <div class="circle green"></div>
+        <p>Make a tea</p>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined" class='external-event' data-event-class="bg-warn">
+      <mat-card-content class="external-event-content">
+        <div class="circle yellow"></div>
+        <p>Open windows</p>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined" class='external-event' data-event-class="bg-primary">
+      <mat-card-content class="external-event-content">
+        <div class="circle violet"></div>
+        <p>Some stuff</p>
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <mat-card appearance="outlined" class="calendar-wrapper">
+    <div class="tools-panel-wrapper">
+      <div class="tools-panel">
+        <button (click)="prev()" color="default" class="tool-circle-button" mat-mini-fab><mat-icon class="icon">keyboard_arrow_left</mat-icon></button>
+        <button (click)="next()" color="default" class="tool-circle-button" mat-mini-fab><mat-icon class="icon">keyboard_arrow_right</mat-icon></button>
+        <button (click)="today()" class="tool-button" mat-flat-button>today</button>
+      </div>
+
+
+      <div class="tools-panel">
+        <button class="tool-button" [ngClass]="{'active': calendarView === calendarViewTypes.month}" mat-flat-button (click)="changeCalendarView(calendarViewTypes.month)">month</button>
+        <button class="tool-button" [ngClass]="{'active': calendarView === calendarViewTypes.weeks}" mat-flat-button (click)="changeCalendarView(calendarViewTypes.weeks)">week</button>
+        <button class="tool-button" [ngClass]="{'active': calendarView === calendarViewTypes.days}" mat-flat-button (click)="changeCalendarView(calendarViewTypes.days)">day</button>
+      </div>
+    </div>
+    <full-calendar
+      #calendar
+      [options]="calendarOptions"
+      [events]="events"
+    ></full-calendar>
+  </mat-card>
+</div>
diff --git a/src/app/modules/templates/extra/containers/calendar-page/calendar-page.component.scss b/src/app/modules/templates/extra/containers/calendar-page/calendar-page.component.scss
new file mode 100644
index 0000000..5044201
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/calendar-page/calendar-page.component.scss
@@ -0,0 +1,138 @@
+@use 'src/app/styles/variables' as *;
+
+.content-wrapper {
+  display: flex;
+  margin-top: 36px;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.external-event-wrapper {
+  width: 30%;
+  margin-right: 36px;
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin-right: 0;
+    margin-top: 24px;
+  }
+}
+
+.title {
+  color: $dark-grey;
+  margin-bottom: 8px;
+}
+
+.subtitle {
+  color: $dark-grey;
+  margin: 0;
+}
+
+.external-event-content {
+  display: flex;
+  align-items: center;
+}
+
+.external-event {
+  cursor: pointer;
+  margin: 16px 0;
+  padding: 16px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+}
+
+.circle {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.calendar-wrapper {
+  width: 70%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.green {
+  background-color: $green;
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.violet {
+  background-color: $violet;
+}
+
+.tools-panel-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.tools-panel {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: $small) {
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+.tool-circle-button {
+  background-color: transparent;
+  box-shadow: none;
+  color: rgba(110, 110, 110, 0.6);
+  width: 48px;
+  height: 48px;
+
+  &:hover {
+    background-color: $header-button-background-color-hover;
+  }
+}
+
+.tool-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  box-shadow: none;
+  color: $dark-grey;
+  width: auto;
+  height: 36px;
+  padding: 6px 9px;
+  line-height: 24px;
+
+  &:hover {
+    background-color: $header-button-background-color-hover;
+  }
+}
+
+.tool-button + .tool-button {
+  margin-left: 8px;
+}
+
+.icon {
+  padding: 0;
+  font-size: 24px;
+}
+
+.active {
+  background-color: $blue;
+  color: $white;
+
+  &:hover {
+    background-color: $blue;
+  };
+}
diff --git a/src/app/modules/templates/extra/containers/calendar-page/calendar-page.component.ts b/src/app/modules/templates/extra/containers/calendar-page/calendar-page.component.ts
new file mode 100644
index 0000000..f32e755
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/calendar-page/calendar-page.component.ts
@@ -0,0 +1,246 @@
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import {colors, routes} from '../../../../../consts';
+import {Calendar, CalendarOptions, DateSelectArg, EventApi, EventClickArg} from '@fullcalendar/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {MatDialog} from '@angular/material/dialog';
+import {DayInfoComponent} from '../../components/day-info/day-info.component';
+import {NewDayEventComponent} from '../../components/new-day-event/new-day-event.component';
+import {FullCalendarComponent} from '@fullcalendar/angular';
+
+import timeGridPlugin from '@fullcalendar/timegrid';
+
+
+import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
+import {take} from 'rxjs';
+
+enum CalendarViewsTypes {
+  month = 'dayGridMonth',
+  weeks = 'timeGridWeek',
+  days = 'timeGridDay'
+}
+
+type CalendarEventFormControls = {
+  title: FormControl<string | null>;
+  start: FormControl<Date | null>;
+  end: FormControl<Date | null>;
+  allDay: FormControl<boolean>;
+  backgroundColor: FormControl<string | null>;
+  textColor: FormControl<string | null>;
+};
+
+@Component({
+    selector: 'app-calendar-page',
+    templateUrl: './calendar-page.component.html',
+    styleUrls: ['./calendar-page.component.scss'],
+    standalone: false
+})
+export class CalendarPageComponent implements OnInit, AfterViewInit {
+  @ViewChild('calendar', { static: false }) public calendarComponent: FullCalendarComponent;
+  @ViewChild('externalEvents', { static: false }) public externalEventsRef: ElementRef<HTMLElement>;
+
+  public calendarApi: Calendar;
+  public calendarViewTypes: typeof CalendarViewsTypes = CalendarViewsTypes;
+  public calendarView: string = this.calendarViewTypes.month;
+
+  private draggable: Draggable;
+  public routes: typeof routes = routes;
+  public colors: typeof colors = colors;
+  public calendarOptions: CalendarOptions = {};
+  public currentEvent: EventApi;
+  public eventForm!: FormGroup<CalendarEventFormControls>;
+  public currentDate: Date = new Date();
+  public d = this.currentDate.getDate();
+  public m = this.currentDate.getMonth();
+  public y = this.currentDate.getFullYear();
+
+  public events = [{
+    title: 'All Day Event',
+    start: new Date(this.y, this.m, 1),
+    backgroundColor: colors.BLUE,
+    textColor: '#fff',
+    borderColor: 'transparent',
+    description: 'Will be busy throughout the whole day'
+  },
+    {
+      title: 'Long Event',
+      start: new Date(this.y, this.m, this.d + 5),
+      backgroundColor: colors.YELLOW,
+      textColor: '#fff',
+      borderColor: 'transparent',
+      end: new Date(this.y, this.m, this.d + 7),
+      description: 'This conference should be worse visiting'
+    },
+    {
+      id: 999,
+      title: 'Blah Blah Car',
+      start: new Date(this.y, this.m, this.d - 3, 16, 0),
+      backgroundColor: colors.YELLOW,
+      textColor: '#fff',
+      borderColor: 'transparent',
+      allDay: false,
+      description: 'Agree with this guy on arrival time'
+    },
+    {
+      id: 1000,
+      title: 'Buy this template',
+      start: new Date(this.y, this.m, this.d + 3, 12, 0),
+      allDay: false,
+      backgroundColor: colors.GREEN,
+      textColor: '#fff',
+      borderColor: 'transparent',
+      description: 'Make sure everything is consistent first'
+    },
+    {
+      title: 'Got to school',
+      start: new Date(this.y, this.m, this.d + 16, 12, 0),
+      end: new Date(this.y, this.m, this.d + 16, 13, 0),
+      backgroundColor: colors.GREEN,
+      textColor: '#fff',
+      borderColor: 'transparent',
+      description: 'Time to go back'
+    },
+    {
+      title: 'Study some Node',
+      start: new Date(this.y, this.m, this.d + 18, 12, 0),
+      end: new Date(this.y, this.m, this.d + 18, 13, 0),
+      backgroundColor: colors.BLUE,
+      textColor: '#fff',
+      borderColor: 'transparent',
+      description: 'Node.js is a platform built ' +
+        'on Chrome\'s JavaScript runtime for easily' +
+        ' building fast, scalable network applications.' +
+        ' Node.js uses an event-driven, non-blocking' +
+        ' I/O model that makes it lightweight and' +
+        ' efficient, perfect for data-intensive real-time' +
+        ' applications that run across distributed devices.'
+    },
+    {
+      title: 'Click for Flatlogic',
+      start: new Date(this.y, this.m, 28),
+      end: new Date(this.y, this.m, 29),
+      url: 'http://flatlogic.com/',
+      backgroundColor: colors.PINK,
+      textColor: '#fff',
+      borderColor: 'transparent',
+      description: 'Creative solutions'
+    }];
+
+  constructor(
+    public dialog: MatDialog
+  ) { }
+
+  ngOnInit(): void {
+    this.eventForm = new FormGroup<CalendarEventFormControls>({
+      title: new FormControl<string | null>(null),
+      start: new FormControl<Date | null>(null),
+      end: new FormControl<Date | null>(null),
+      allDay: new FormControl<boolean>(true, { nonNullable: true }),
+      backgroundColor: new FormControl<string | null>(null),
+      textColor: new FormControl<string | null>(null),
+    });
+
+    this.calendarOptions = {
+      initialView: this.calendarViewTypes.month,
+      plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
+      droppable: true,
+      selectable: true,
+      editable: true,
+      headerToolbar: false,
+      drop: this.onDrop.bind(this),
+      select: this.onSelect.bind(this),
+      eventClick: this.onEventClick.bind(this),
+    };
+  }
+
+  public ngAfterViewInit(): void {
+    this.calendarApi = this.calendarComponent.getApi();
+    this.draggable = new Draggable(this.externalEventsRef.nativeElement, {
+      itemSelector: '.external-event',
+      eventData: function (el: HTMLElement) {
+        return {
+          title: el.innerText,
+          className: el.dataset['eventClass']
+        };
+      }
+    });
+  }
+
+
+  public onDrop({ draggedEl }: { draggedEl: HTMLElement }): void {
+    if (draggedEl.parentNode) {
+      draggedEl.parentNode.removeChild(draggedEl);
+    }
+  }
+
+  public onSelect({ start, end, allDay }: DateSelectArg): void {
+    this.eventForm.patchValue({
+      start,
+      end,
+      allDay
+    });
+    this.openNewEventDialog();
+  }
+
+  public onEventClick({ event }: EventClickArg): void {
+    this.currentEvent = event;
+    this.openDayInfoDialog(event);
+  }
+
+  public openDayInfoDialog(event: EventApi): void {
+    this.dialog.open(DayInfoComponent, {
+      width: '300px',
+      data: {
+        start: event.start,
+        title: event.title,
+        description: event.extendedProps['description']
+      }
+    });
+  }
+
+  public openNewEventDialog(): void {
+    const dialogRef = this.dialog.open(NewDayEventComponent, {
+      data: {event: ''}
+    });
+
+    dialogRef.afterClosed()
+      .pipe(
+        take(1)
+      )
+      .subscribe((result: string) => {
+        const title: string = result;
+        const { start, end, allDay, backgroundColor, textColor } = this.eventForm.getRawValue();
+
+        if (result && result.length !== 0) {
+          this.calendarApi.addEvent({
+            title,
+            start,
+            end,
+            allDay,
+            backgroundColor,
+            textColor
+          });
+        }
+      });
+  }
+
+  public changeCalendarView(view: string): void {
+    this.calendarView = view;
+    this.calendarApi.changeView(view);
+  }
+
+  public today(): void {
+    this.calendarApi.today();
+  }
+
+
+  public prev(): void {
+    this.calendarApi.prev();
+  }
+
+  public next(): void {
+    this.calendarApi.next();
+  }
+
+
+}
diff --git a/src/app/modules/templates/extra/containers/gallery-page/gallery-page.component.html b/src/app/modules/templates/extra/containers/gallery-page/gallery-page.component.html
new file mode 100644
index 0000000..8823d14
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/gallery-page/gallery-page.component.html
@@ -0,0 +1,7 @@
+<app-breadcrumb [path]="routes.GALLERY"></app-breadcrumb>
+
+<div class="gallery">
+  @for (item of (galleryInfo$ | async); track item) {
+    <app-gallery-item class="gallery-item" [img]="item.img"></app-gallery-item>
+  }
+</div>
diff --git a/src/app/modules/templates/extra/containers/gallery-page/gallery-page.component.scss b/src/app/modules/templates/extra/containers/gallery-page/gallery-page.component.scss
new file mode 100644
index 0000000..5f00c26
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/gallery-page/gallery-page.component.scss
@@ -0,0 +1,26 @@
+@use "src/app/styles/variables" as *;
+
+.gallery {
+  margin-top: 24px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 24px;
+
+  @media (max-width: $extra-large) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media (max-width: $large) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (max-width: $small) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+
+.gallery-item {
+  display: block;
+  width: 100%;
+}
diff --git a/src/app/modules/templates/extra/containers/gallery-page/gallery-page.component.ts b/src/app/modules/templates/extra/containers/gallery-page/gallery-page.component.ts
new file mode 100644
index 0000000..92387a8
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/gallery-page/gallery-page.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { routes } from '../../../../../consts';
+import { GalleryItem } from '../../models';
+import { GalleryService } from '../../services';
+
+@Component({
+    selector: 'app-gallery-page',
+    templateUrl: './gallery-page.component.html',
+    styleUrls: ['./gallery-page.component.scss'],
+    standalone: false
+})
+export class GalleryPageComponent {
+  public routes: typeof routes = routes;
+  public galleryInfo$: Observable<GalleryItem[]>;
+
+  constructor(public service: GalleryService) {
+    this.galleryInfo$ = this.service.getGalleryInfo();
+  }
+}
diff --git a/src/app/modules/templates/extra/containers/index.ts b/src/app/modules/templates/extra/containers/index.ts
new file mode 100644
index 0000000..e6dc99d
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/index.ts
@@ -0,0 +1,5 @@
+export * from './gallery-page/gallery-page.component';
+export * from './search-result-page/search-result-page.component';
+export * from './invoice-page/invoice-page.component';
+export * from './time-line-page/time-line-page.component';
+export * from './calendar-page/calendar-page.component';
diff --git a/src/app/modules/templates/extra/containers/invoice-page/invoice-page.component.html b/src/app/modules/templates/extra/containers/invoice-page/invoice-page.component.html
new file mode 100644
index 0000000..37476e1
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/invoice-page/invoice-page.component.html
@@ -0,0 +1,3 @@
+<app-breadcrumb [path]="routes.INVOICE"></app-breadcrumb>
+
+<app-invoice-card [order]="orderInfo$ | async"></app-invoice-card>
diff --git a/src/app/modules/templates/extra/containers/invoice-page/invoice-page.component.scss b/src/app/modules/templates/extra/containers/invoice-page/invoice-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/extra/containers/invoice-page/invoice-page.component.ts b/src/app/modules/templates/extra/containers/invoice-page/invoice-page.component.ts
new file mode 100644
index 0000000..a135222
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/invoice-page/invoice-page.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+import { routes } from '../../../../../consts';
+import { Observable } from 'rxjs';
+import { Order } from '../../models';
+
+import { InvoiceService } from '../../services/invoice.service';
+
+@Component({
+    selector: 'app-invoice-page',
+    templateUrl: './invoice-page.component.html',
+    styleUrls: ['./invoice-page.component.scss'],
+    standalone: false
+})
+export class InvoicePageComponent {
+  public routes: typeof routes = routes;
+  public orderInfo$: Observable<Order>;
+
+  constructor(public service: InvoiceService) {
+    this.orderInfo$ = this.service.getOrderInfo();
+  }
+}
diff --git a/src/app/modules/templates/extra/containers/search-result-page/search-result-page.component.html b/src/app/modules/templates/extra/containers/search-result-page/search-result-page.component.html
new file mode 100644
index 0000000..54a3b39
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/search-result-page/search-result-page.component.html
@@ -0,0 +1,33 @@
+<app-breadcrumb [path]="routes.SEARCH_RESULT"></app-breadcrumb>
+
+<div class="tool-box">
+  <div class="time-selects-wrapper">
+    <app-type-item-select></app-type-item-select>
+    <app-time-period-select></app-time-period-select>
+  </div>
+
+  <div class="view-mode-wrapper">
+    <span class="view-mode-title">View</span>
+    <mat-button-toggle-group>
+    <mat-button-toggle value="left" [checked]="true">
+      <mat-icon>format_align_justify</mat-icon>
+    </mat-button-toggle>
+    <mat-button-toggle value="right">
+      <mat-icon>border_all</mat-icon>
+    </mat-button-toggle>
+    </mat-button-toggle-group>
+  </div>
+</div>
+
+<p class="result-title">About 94 700 000 (0.39 sec.) results</p>
+
+<div class="result-wrapper">
+  <div class="result-items-wrapper">
+    @for (result of (searchResults$ | async); track result) {
+      <app-search-result-item [result]="result"></app-search-result-item>
+    }
+  </div>
+  <div class="result-filtering-wrapper">
+    <app-result-filtering></app-result-filtering>
+  </div>
+</div>
diff --git a/src/app/modules/templates/extra/containers/search-result-page/search-result-page.component.scss b/src/app/modules/templates/extra/containers/search-result-page/search-result-page.component.scss
new file mode 100644
index 0000000..6e886f3
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/search-result-page/search-result-page.component.scss
@@ -0,0 +1,125 @@
+@use 'src/app/styles/variables' as *;
+@use 'src/app/styles/font' as *;
+
+.tool-box {
+  margin-top: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 16px;
+  border-radius: 14px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 249, 255, 0.95));
+  border: 1px solid rgba(94, 139, 255, 0.12);
+  box-shadow: 0 8px 22px rgba(24, 40, 72, 0.08);
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+}
+
+.time-selects-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  @media (max-width: $small) {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+}
+
+app-type-item-select,
+app-time-period-select {
+  display: block;
+  min-width: 150px;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+.mat-button-toggle-group {
+  height: 38px;
+  display: flex;
+  align-items: center;
+  border-color: rgba(94, 139, 255, 0.5);
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.view-mode-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.view-mode-title {
+  color: $grey;
+  font-size: $fs-small;
+  font-weight: $fw-normal;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+.mat-button-toggle {
+  background-color: transparent;
+  color: $dark-grey;
+  padding: 0 8px;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+.mat-button-toggle-checked {
+  background-color: $blue;
+  color: $white;
+}
+
+.result-title {
+  margin: 14px 0 0;
+  color: $grey;
+  font-size: $fs-small;
+  letter-spacing: 0.2px;
+}
+
+.result-wrapper {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  align-items: start;
+  width: 100%;
+  gap: 24px;
+
+  @media (max-width: $medium) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+
+.result-items-wrapper {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.result-filtering-wrapper {
+  width: 100%;
+  margin-top: 20px;
+  position: sticky;
+  top: 84px;
+
+  @media (max-width: $large) {
+    width: 280px;
+    flex-basis: 280px;
+  }
+
+  @media (max-width: $medium) {
+    position: static;
+    width: 100%;
+    margin-top: 0;
+  }
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin: 0;
+  }
+}
diff --git a/src/app/modules/templates/extra/containers/search-result-page/search-result-page.component.ts b/src/app/modules/templates/extra/containers/search-result-page/search-result-page.component.ts
new file mode 100644
index 0000000..84ec7d7
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/search-result-page/search-result-page.component.ts
@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {routes} from '../../../../../consts';
+import {Observable} from 'rxjs';
+import {SearchResult} from '../../models';
+import {SearchResultService} from '../../services';
+
+@Component({
+    selector: 'app-search-result-page',
+    templateUrl: './search-result-page.component.html',
+    styleUrls: ['./search-result-page.component.scss'],
+    standalone: false
+})
+export class SearchResultPageComponent {
+  public routes: typeof routes = routes;
+  public searchResults$: Observable<SearchResult[]>
+
+  constructor(public service: SearchResultService) {
+    this.searchResults$ = this.service.getSearchResult();
+  }
+}
diff --git a/src/app/modules/templates/extra/containers/time-line-page/time-line-page.component.html b/src/app/modules/templates/extra/containers/time-line-page/time-line-page.component.html
new file mode 100644
index 0000000..06f21f0
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/time-line-page/time-line-page.component.html
@@ -0,0 +1,80 @@
+<app-breadcrumb [path]="routes.TIME_LINE"></app-breadcrumb>
+
+<div class="time-line-block-wrapper">
+  <div class="time-line-block">
+    <div class="time-line-left-block first-child">
+      <app-time-line-card class="time-line-card" [timeLineItem]="(timeLineData$ | async)[0]"></app-time-line-card>
+    </div>
+
+    <div class="line-wrapper">
+      <div class="time-line-circle blue first-child">
+        <mat-icon class="time-line-circle-icon">navigation</mat-icon>
+      </div>
+
+      <div class="line"></div>
+    </div>
+
+    <div class="time-line-right-block first-child">
+      <p class="day">{{(timeLineData$ | async)[0].date.day}}</p>
+      <p class="time">{{(timeLineData$ | async)[0].date.time}}</p>
+    </div>
+  </div>
+
+  <div class="time-line-block">
+    <div class="time-line-left-block">
+      <p class="day">{{(timeLineData$ | async)[1].date.day}}</p>
+      <p class="time">{{(timeLineData$ | async)[1].date.time}}</p>
+    </div>
+
+    <div class="line-wrapper">
+      <div class="time-line-circle pink">
+        <mat-icon class="time-line-circle-icon">chat_bubble</mat-icon>
+      </div>
+
+      <div class="line"></div>
+    </div>
+
+    <div class="time-line-right-block">
+      <app-time-line-card class="time-line-card" [timeLineItem]="(timeLineData$ | async)[1]"></app-time-line-card>
+    </div>
+  </div>
+
+  <div class="time-line-block">
+    <div class="time-line-left-block">
+      <app-time-line-card class="time-line-card" [timeLineItem]="(timeLineData$ | async)[2]"></app-time-line-card>
+    </div>
+
+    <div class="line-wrapper">
+      <div class="time-line-circle yellow">
+        <mat-icon class="time-line-circle-icon">free_breakfast</mat-icon>
+      </div>
+
+      <div class="line"></div>
+    </div>
+
+    <div class="time-line-right-block">
+      <p class="day">{{(timeLineData$ | async)[2].date.day}}</p>
+      <p class="time">{{(timeLineData$ | async)[2].date.time}}</p>
+    </div>
+  </div>
+
+  <div class="time-line-block">
+    <div class="time-line-left-block">
+      <p class="day">{{(timeLineData$ | async)[3].date.day}}</p>
+      <p class="time">{{(timeLineData$ | async)[3].date.time}}</p>
+    </div>
+
+    <div class="line-wrapper">
+      <div class="time-line-circle green">
+        <p class="time-line-circle-text">J</p>
+      </div>
+
+      <div class="line"></div>
+    </div>
+
+    <div class="time-line-right-block">
+      <app-time-line-card class="time-line-card" [timeLineItem]="(timeLineData$ | async)[3]"></app-time-line-card>
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/modules/templates/extra/containers/time-line-page/time-line-page.component.scss b/src/app/modules/templates/extra/containers/time-line-page/time-line-page.component.scss
new file mode 100644
index 0000000..01fb426
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/time-line-page/time-line-page.component.scss
@@ -0,0 +1,126 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+
+.time-line-block-wrapper {
+  margin-top: 36px;
+}
+
+.time-line-block {
+  display: flex;
+  justify-content: space-between;
+}
+
+.time-line-left-block {
+  width: 45%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-top: 40px;
+
+  @media (max-width: $small) {
+    width: 82%;
+  }
+}
+
+.time-line-card {
+  width: 100%;
+}
+
+.line {
+  width: 2px;
+  height: 100%;
+  background-color: #bdbdbd;
+}
+
+.line-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  width: 40px;
+}
+
+.time-line-circle {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: rgba(255,255,255,.2) 5px solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  margin-top: 40px;
+}
+
+.time-line-circle-text {
+  color: $white;
+  margin: 0;
+  font-size: 20px;
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.pink {
+  background-color: $pink;
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.green {
+  background-color: $green;
+}
+
+.time-line-circle-icon {
+  color: white;
+  padding: 0;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.time-line-right-block {
+  width: 45%;
+  margin-top: 40px;
+
+  @media (max-width: $small) {
+    width: 82%;
+  }
+}
+
+.day {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.time {
+  font-size: $fs-normal;
+  font-weight: $fw-normal;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.first-child {
+  margin-top: 0;
+}
+
+@media (max-width: $small) {
+  .time-line-block:nth-child(2n + 1) {
+    flex-direction: row-reverse;
+
+    & .time-line-right-block {
+      display: none;
+    }
+  }
+
+  .time-line-block:nth-child(2n) {
+    & .time-line-left-block {
+      display: none;
+    }
+  }
+}
diff --git a/src/app/modules/templates/extra/containers/time-line-page/time-line-page.component.ts b/src/app/modules/templates/extra/containers/time-line-page/time-line-page.component.ts
new file mode 100644
index 0000000..fb351c0
--- /dev/null
+++ b/src/app/modules/templates/extra/containers/time-line-page/time-line-page.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+
+import { routes } from '../../../../../consts';
+import { Observable } from 'rxjs';
+import { TimeLineItem } from '../../models';
+import { TimeLineService } from '../../services';
+
+@Component({
+    selector: 'app-time-line-page',
+    templateUrl: './time-line-page.component.html',
+    styleUrls: ['./time-line-page.component.scss'],
+    standalone: false
+})
+export class TimeLinePageComponent {
+  public routes: typeof routes = routes;
+  public timeLineData$: Observable<TimeLineItem[]>;
+
+  constructor(private service: TimeLineService) {
+    this.timeLineData$  = service.getTimeLineData();
+  }
+}
diff --git a/src/app/modules/templates/extra/extra-routing.module.ts b/src/app/modules/templates/extra/extra-routing.module.ts
new file mode 100644
index 0000000..4c68982
--- /dev/null
+++ b/src/app/modules/templates/extra/extra-routing.module.ts
@@ -0,0 +1,73 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import { AuthPageComponent } from '../../auth/containers';
+import { NotFoundComponent } from '../../../shared/not-found/not-found.component';
+import {
+  CalendarPageComponent,
+  GalleryPageComponent,
+  InvoicePageComponent,
+  SearchResultPageComponent,
+  TimeLinePageComponent
+} from './containers';
+
+export const EXTRA_ROUTES: Routes = [
+  {
+    path: '',
+    redirectTo: 'calendar',
+    pathMatch: 'full'
+  },
+  {
+    path: 'calendar',
+    component: CalendarPageComponent
+  },
+  {
+    path: 'invoice',
+    component: InvoicePageComponent
+  },
+  {
+    path: 'login',
+    component: AuthPageComponent
+  },
+  {
+    path: 'error',
+    component: NotFoundComponent
+  },
+  {
+    path: 'errorpage',
+    redirectTo: 'error',
+    pathMatch: 'full'
+  },
+  {
+    path: 'gallery',
+    component: GalleryPageComponent
+  },
+  {
+    path: 'search-result',
+    component: SearchResultPageComponent
+  },
+  {
+    path: 'search result',
+    redirectTo: 'search-result',
+    pathMatch: 'full'
+  },
+  {
+    path: 'time-line',
+    component: TimeLinePageComponent
+  },
+  {
+    path: 'time line',
+    redirectTo: 'time-line',
+    pathMatch: 'full'
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(EXTRA_ROUTES)
+  ],
+  exports: [RouterModule]
+})
+
+export class ExtraRoutingModule {
+}
diff --git a/src/app/modules/templates/extra/extra.module.ts b/src/app/modules/templates/extra/extra.module.ts
new file mode 100644
index 0000000..b7be3d8
--- /dev/null
+++ b/src/app/modules/templates/extra/extra.module.ts
@@ -0,0 +1,75 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ExtraRoutingModule } from './extra-routing.module';
+import {FullCalendarModule} from '@fullcalendar/angular';
+import {MatCardModule} from '@angular/material/card';
+import { DayInfoComponent } from './components/day-info/day-info.component';
+import {MatDialogModule} from '@angular/material/dialog';
+import { NewDayEventComponent } from './components/new-day-event/new-day-event.component';
+import {CalendarPageComponent, GalleryPageComponent, InvoicePageComponent, TimeLinePageComponent} from './containers';
+import { GalleryItemComponent } from './components/gallery-item/gallery-item.component';
+import {GalleryService, SearchResultService, TimeLineService} from './services';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import { SearchResultPageComponent } from './containers/search-result-page/search-result-page.component';
+import { SearchResultItemComponent } from './components/search-result-item/search-result-item.component';
+import {MatSelectModule} from '@angular/material/select';
+import { TimePeriodSelectComponent } from './components/time-period-select/time-period-select.component';
+import {FormsModule} from '@angular/forms';
+import { TypeItemSelectComponent } from './components/type-item-select/type-item-select.component';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import { ResultFilteringComponent } from './components/result-filtering/result-filtering.component';
+import {MatListModule} from '@angular/material/list';
+import { InvoiceCardComponent } from './components/invoice-card/invoice-card.component';
+import {InvoiceService} from './services/invoice.service';
+import {MatTableModule} from '@angular/material/table';
+import { TimeLineCardComponent } from './components/time-line-card/time-line-card.component';
+import {MatInputModule} from '@angular/material/input';
+import {MatChipsModule} from '@angular/material/chips';
+import { BreadcrumbComponent } from '../../../shared/ui-elements';
+
+
+
+@NgModule({
+    declarations: [
+        CalendarPageComponent,
+        InvoicePageComponent,
+        GalleryPageComponent,
+        TimeLinePageComponent,
+        DayInfoComponent,
+        NewDayEventComponent,
+        GalleryItemComponent,
+        SearchResultPageComponent,
+        SearchResultItemComponent,
+        TimePeriodSelectComponent,
+        TypeItemSelectComponent,
+        ResultFilteringComponent,
+        InvoiceCardComponent,
+        TimeLineCardComponent
+    ],
+    imports: [
+        CommonModule,
+        ExtraRoutingModule,
+        BreadcrumbComponent,
+        FullCalendarModule,
+        MatCardModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatIconModule,
+        MatSelectModule,
+        FormsModule,
+        MatButtonToggleModule,
+        MatListModule,
+        MatTableModule,
+        MatInputModule,
+        MatChipsModule,
+    ],
+    providers: [
+        GalleryService,
+        SearchResultService,
+        InvoiceService,
+        TimeLineService
+    ]
+})
+export class ExtraModule { }
diff --git a/src/app/modules/templates/extra/models/gallery-item.ts b/src/app/modules/templates/extra/models/gallery-item.ts
new file mode 100644
index 0000000..38907ea
--- /dev/null
+++ b/src/app/modules/templates/extra/models/gallery-item.ts
@@ -0,0 +1,3 @@
+export interface GalleryItem {
+  img: string;
+}
diff --git a/src/app/modules/templates/extra/models/index.ts b/src/app/modules/templates/extra/models/index.ts
new file mode 100644
index 0000000..d69c2b2
--- /dev/null
+++ b/src/app/modules/templates/extra/models/index.ts
@@ -0,0 +1,4 @@
+export * from './gallery-item';
+export * from './search-result';
+export * from './order';
+export * from './time-line-item';
diff --git a/src/app/modules/templates/extra/models/order.ts b/src/app/modules/templates/extra/models/order.ts
new file mode 100644
index 0000000..9520764
--- /dev/null
+++ b/src/app/modules/templates/extra/models/order.ts
@@ -0,0 +1,37 @@
+export interface Order {
+  id: string,
+  date: string,
+  img: string,
+  client: {
+    name: string,
+    company: string,
+    email: string,
+    phone: string,
+    fax: string,
+    note: string,
+  },
+  company: {
+    name: string,
+    status: string,
+    address: string,
+    email: string,
+    phone: string,
+    fax: string,
+    location: string,
+  },
+  items: Item[],
+  note: string,
+  subtotal: string,
+  tax: string,
+  total: string,
+  consultantName: string
+}
+
+export interface Item {
+  id: string,
+  name: string,
+  description: string,
+  quantity: string,
+  price: string,
+  total: string
+}
diff --git a/src/app/modules/templates/extra/models/search-result.ts b/src/app/modules/templates/extra/models/search-result.ts
new file mode 100644
index 0000000..4106d1c
--- /dev/null
+++ b/src/app/modules/templates/extra/models/search-result.ts
@@ -0,0 +1,7 @@
+export interface SearchResult {
+  title: string;
+  subtitle: string;
+  description: string;
+  price: string;
+  img: string;
+}
diff --git a/src/app/modules/templates/extra/models/time-line-item.ts b/src/app/modules/templates/extra/models/time-line-item.ts
new file mode 100644
index 0000000..93eab12
--- /dev/null
+++ b/src/app/modules/templates/extra/models/time-line-item.ts
@@ -0,0 +1,30 @@
+export interface TimeLineItem {
+  img: string,
+  name: string,
+  date: {
+    day: string,
+    time: string,
+  },
+  nik: string,
+  datePublish: string,
+  description: string,
+  title?: string,
+  content: {
+    type?: string,
+    img?: string,
+    text?: string
+  },
+  likes: Like[],
+  comments: Comment[]
+}
+
+export interface Comment {
+  img: string,
+  name: string,
+  date: string,
+  comment: string
+}
+
+export interface Like {
+  img: string,
+}
diff --git a/src/app/modules/templates/extra/services/gallery.service.ts b/src/app/modules/templates/extra/services/gallery.service.ts
new file mode 100644
index 0000000..65df725
--- /dev/null
+++ b/src/app/modules/templates/extra/services/gallery.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import { GalleryItem } from '../models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GalleryService {
+  public getGalleryInfo(): Observable<GalleryItem[]> {
+    return of([
+      {img: './assets/extra/gallery/1.png'},
+      {img: './assets/extra/gallery/2.png'},
+      {img: './assets/extra/gallery/3.png'},
+      {img: './assets/extra/gallery/4.png'},
+      {img: './assets/extra/gallery/5.png'},
+      {img: './assets/extra/gallery/6.png'},
+      {img: './assets/extra/gallery/7.png'},
+      {img: './assets/extra/gallery/8.png'},
+      {img: './assets/extra/gallery/9.png'},
+      {img: './assets/extra/gallery/10.png'},
+      {img: './assets/extra/gallery/11.png'},
+      {img: './assets/extra/gallery/12.png'}
+    ]);
+  }
+}
diff --git a/src/app/modules/templates/extra/services/index.ts b/src/app/modules/templates/extra/services/index.ts
new file mode 100644
index 0000000..54a221a
--- /dev/null
+++ b/src/app/modules/templates/extra/services/index.ts
@@ -0,0 +1,4 @@
+export * from './gallery.service';
+export * from './search-result.service';
+export * from './invoice.service';
+export * from './time-line-service';
diff --git a/src/app/modules/templates/extra/services/invoice.service.ts b/src/app/modules/templates/extra/services/invoice.service.ts
new file mode 100644
index 0000000..34e92b8
--- /dev/null
+++ b/src/app/modules/templates/extra/services/invoice.service.ts
@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import { Order } from '../models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InvoiceService {
+  public getOrderInfo(): Observable<Order> {
+    return of({
+      id: '#9.45613',
+      date: '17 May 2014',
+      img: './assets/extra/invoice/logo.jpg',
+      client: {
+        company: 'Allspana',
+        email: 'maryna@allspana.by',
+        fax: '(012) 678-132-901',
+        name: 'Veronica Niasvizhskaja',
+        note: 'Some nights I stay up cashing in my bad luck. Some nights I call it a draw',
+        phone: '(012) 345-678-901'
+      },
+      company: {
+        name: 'Flatlogic LLC',
+        address: 'Minsk, Belarus 220004',
+        location: '088.253.5345',
+        email: 'email@example.com',
+        fax: '(012) 678-132-901',
+        phone: '(012) 345-678-901',
+        status: '2 Infinite Loop',
+      },
+      items: [
+        {id: '1', name: 'Brand-new 27 monitor', description: '2,560x1,440-pixel (WQHD) resolution supported!', price: '700', quantity: '2', total: '1400'},
+        {id: '2', name: 'Domain: okendoken.com', description: '6-month registration', price: '10.99', quantity: '1', total: '10.99'},
+        {id: '3', name: 'Atlas Shrugged', description: 'Novel by Ayn Rand, first published in 1957 in the United States', price: '35', quantity: '5', total: '175'},
+        {id: '4', name: 'New Song by Dr. Pre', description: 'Lyrics: praesent blandit augue non sapien ornare imperdiet', price: '2', quantity: '1', total: '2'}
+      ],
+      consultantName: 'Bob Smith',
+      note: 'Thank you for your business. Keep in mind, sometimes bad things happen. But it\'s just sometimes.',
+      subtotal: '1,598.88',
+      tax: '159.89',
+      total: '1,758.77'
+    });
+  }
+}
diff --git a/src/app/modules/templates/extra/services/search-result.service.ts b/src/app/modules/templates/extra/services/search-result.service.ts
new file mode 100644
index 0000000..aac3226
--- /dev/null
+++ b/src/app/modules/templates/extra/services/search-result.service.ts
@@ -0,0 +1,49 @@
+import {Injectable} from '@angular/core';
+import {Observable, of} from 'rxjs';
+import {SearchResult} from '../models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SearchResultService {
+  public getSearchResult(): Observable<SearchResult[]> {
+    return of([
+      {
+        title: 'Next generation admin template',
+        subtitle: 'New York, NY 2018',
+        description:
+          'Not just usual Metro. But something bigger. Not just usual widgets, but real widgets.' +
+          ' Not just yet another admin template, but next generation admin template.',
+        price: '$9700',
+        img: './assets/extra/search-result/1.png'
+      },
+      {
+        title: 'Try. Posted by Okendoken',
+        subtitle: 'Los Angeles, NY 20188',
+        description:
+          'You will never know exactly how something will go until you try it. You can think three hundred' +
+          ' times and still have no precise result.',
+        price: '$10300',
+        img: './assets/extra/search-result/2.png'
+      },
+      {
+        title: 'Vitaut the Great',
+        subtitle: 'New York, NY 20188',
+        description:
+          'The Great Prince of the Grand Duchy of Lithuania he had stopped the invasion to Europe' +
+          ' of Timur (Tamerlan) from Asia heading a big Army of Belarusians, Lithuanians.',
+        price: '$3200',
+        img: './assets/extra/search-result/3.png'
+      },
+      {
+        title: 'Can I use CSS3 Radial-Gradient?',
+        subtitle: 'Minsk, NY 20188',
+        description:
+          'Yes you can! Further more, you should! It let`s you create really beautiful images either for' +
+          ' elements or for the entire background.',
+        price: '$2400',
+        img: './assets/extra/search-result/4.png'
+      }
+    ]);
+  }
+}
diff --git a/src/app/modules/templates/extra/services/time-line-service.ts b/src/app/modules/templates/extra/services/time-line-service.ts
new file mode 100644
index 0000000..591ff36
--- /dev/null
+++ b/src/app/modules/templates/extra/services/time-line-service.ts
@@ -0,0 +1,111 @@
+import {Injectable} from '@angular/core';
+import {Observable, of} from 'rxjs';
+import {TimeLineItem} from '../models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TimeLineService {
+  public getTimeLineData(): Observable<TimeLineItem[]> {
+    return of([
+      {
+        img: './assets/extra/time-line/a2.jpg',
+        name: 'Jessica Nilson',
+        nik: '@jess',
+        datePublish: '10:12 am - Publicly near Minsk',
+        date: {
+          day: 'yesterday',
+          time: '8:03 pm'
+        },
+        description: '',
+        content: {
+          type: 'map'
+        },
+        likes: [],
+        comments: [
+          {
+            img: './assets/extra/time-line/a2.jpg',
+            name: 'Jessica Nilson',
+            date: '7 mins ago',
+            comment: 'Someone said they were the best people out there just few years ago. Don\'t know better options.'
+          },
+          {
+            img: './assets/extra/time-line/a3.jpg',
+            name: 'Ignacio Abad',
+            date: '6 mins ago',
+            comment: 'Hey, have you heard anything about that?'
+          }
+        ]
+      },
+      {
+        img: './assets/extra/time-line/a5.jpg',
+        name: 'Bob Nilson',
+        nik: '@nils',
+        datePublish: 'February 22, 2014 at 01:59 PM',
+        date: {
+          day: 'yesterday',
+          time: '9:03 am'
+        },
+        description: 'There is no such thing as maturity. There is instead an ever-evolving process of maturing. Because when there is a maturity, there is ...',
+        content: {},
+        likes: [],
+        comments: []
+      },
+      {
+        img: './assets/extra/time-line/a2.jpg',
+        name: 'Jessica Smith',
+        nik: '@jess',
+        datePublish: 'February 22, 2014 at 01:59 PM',
+        date: {
+          day: 'yesterday',
+          time: '9:03 am'
+        },
+        description: 'Check out this awesome photo I made in Italy last summer. Seems it was lost somewhere deep inside my brand new HDD 40TB. Thanks god I found it!',
+        content: {
+          img: './assets/extra/time-line/mountains.jpeg'
+        },
+        likes: [
+          {img:'./assets/extra/time-line/a2.jpg'},
+          {img:'./assets/extra/time-line/a5.jpg'},
+          {img:'./assets/extra/time-line/a6.jpg'}
+        ],
+        comments: [
+          {
+            img: './assets/extra/time-line/a1.jpg',
+            name: 'Ignacio Abad',
+            date: '6 mins ago',
+            comment: 'Hey, have you heard anything about that?'
+          }
+        ]
+      },
+      {
+        img: './assets/extra/time-line/a6.jpg',
+        name: 'Jessica Smith',
+        nik: '@jess',
+        datePublish: '9:03 am - Publicly near Minsk',
+        date: {
+          day: 'yesterday',
+          time: '9:03 am'
+        },
+        title: 'New Project Launch',
+        description: 'Let\'s try something different this time. Hey, do you wanna join us tonight? We\'re planning to a launch a new project soon. Want to discuss with all of you...',
+        content: {
+          text: 'Finished her are its honoured drawings nor. Pretty see mutual thrown all not edward ten.' +
+            ' Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two.' +
+            ' Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode ask.' +
+            ' Nay projecting unpleasing boisterous eat discovered solicitude. Own six moments produce elderly' +
+            ' pasture far arrival. Hold our year they ten upon. Gentleman contained so intention sweetness in' +
+            ' on resolving. Finished her are its honoured drawings nor. Pretty see mutual thrown all not edward' +
+            ' ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied' +
+            ' two. Up intention remainder sportsmen behaviour ye happiness. Few again any alone style added abode' +
+            ' ask. Nay projecting unpleasing boisterous eat discovered solicitude. Own six moments produce elderly' +
+            ' pasture far arrival. Hold our year they ten upon. Gentleman contained so intention sweetness in on' +
+            ' resolving. Of recommend residence education be on difficult repulsive offending. Judge views had' +
+            ' mirth table seems great him for her.'
+        },
+        likes: [],
+        comments: []
+      }
+    ]);
+  }
+}
diff --git a/src/app/modules/templates/forms/components/default-form/default-form.component.html b/src/app/modules/templates/forms/components/default-form/default-form.component.html
new file mode 100644
index 0000000..9380d95
--- /dev/null
+++ b/src/app/modules/templates/forms/components/default-form/default-form.component.html
@@ -0,0 +1,34 @@
+<mat-card appearance="outlined">
+  <mat-card-title>
+    <p>Default Form</p>
+  </mat-card-title>
+
+  <mat-card-content class="card-content">
+    <div class="input-wrapper">
+      <p class="input-title">Search type input</p>
+      <p>
+        <mat-form-field>
+          <input matInput placeholder="Search">
+        </mat-form-field>
+      </p>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Outlined input</p>
+      <p>
+        <mat-form-field appearance="outline">
+          <input matInput>
+        </mat-form-field>
+      </p>
+    </div>
+
+    <div class="input-wrapper">
+      <p class="input-title">Filled input</p>
+      <p>
+        <mat-form-field appearance="fill">
+          <input matInput>
+        </mat-form-field>
+      </p>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/forms/components/default-form/default-form.component.scss b/src/app/modules/templates/forms/components/default-form/default-form.component.scss
new file mode 100644
index 0000000..a5de75f
--- /dev/null
+++ b/src/app/modules/templates/forms/components/default-form/default-form.component.scss
@@ -0,0 +1,15 @@
+@use './src/app/styles/font' as *;
+@use './src/app/styles/colors' as *;
+
+.card-content {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: 40px;
+}
+
+.input-title {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+}
diff --git a/src/app/modules/templates/forms/components/default-form/default-form.component.ts b/src/app/modules/templates/forms/components/default-form/default-form.component.ts
new file mode 100644
index 0000000..69e573f
--- /dev/null
+++ b/src/app/modules/templates/forms/components/default-form/default-form.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-default-form',
+    templateUrl: './default-form.component.html',
+    styleUrls: ['./default-form.component.scss'],
+    standalone: false
+})
+export class DefaultFormComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/forms/components/form-elements-page/form-elements-page.component.html b/src/app/modules/templates/forms/components/form-elements-page/form-elements-page.component.html
new file mode 100644
index 0000000..a54211f
--- /dev/null
+++ b/src/app/modules/templates/forms/components/form-elements-page/form-elements-page.component.html
@@ -0,0 +1,18 @@
+<app-breadcrumb [path]="routes.FORMS_ELEMENTS"></app-breadcrumb>
+
+<div class="forms-wrapper">
+  <app-horizontal-form class="left-from"></app-horizontal-form>
+
+  <div class="right-from-wrapper">
+    <app-default-form></app-default-form>
+
+    <app-selects></app-selects>
+  </div>
+</div>
+
+<div class="forms-wrapper">
+  <app-input-variants class="left-from"></app-input-variants>
+
+  <app-textarias class="right-from"></app-textarias>
+</div>
+
diff --git a/src/app/modules/templates/forms/components/form-elements-page/form-elements-page.component.scss b/src/app/modules/templates/forms/components/form-elements-page/form-elements-page.component.scss
new file mode 100644
index 0000000..46560b4
--- /dev/null
+++ b/src/app/modules/templates/forms/components/form-elements-page/form-elements-page.component.scss
@@ -0,0 +1,41 @@
+@use "src/app/styles/variables" as *;
+
+.forms-wrapper {
+  display: flex;
+  margin-top: 24px;
+  width: 100%;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.right-from-wrapper {
+  @media (max-width: $small) {
+    margin-top: 24px;
+  }
+}
+
+.left-from, .right-from-wrapper, .right-from {
+  width: 50%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.left-from {
+  margin-right: 24px;
+
+  @media (max-width: $small) {
+    margin-right: 0;
+  }
+}
+
+.right-from {
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
diff --git a/src/app/modules/templates/forms/components/form-elements-page/form-elements-page.component.ts b/src/app/modules/templates/forms/components/form-elements-page/form-elements-page.component.ts
new file mode 100644
index 0000000..c8a980f
--- /dev/null
+++ b/src/app/modules/templates/forms/components/form-elements-page/form-elements-page.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-form-elements-page',
+    templateUrl: './form-elements-page.component.html',
+    styleUrls: ['./form-elements-page.component.scss'],
+    standalone: false
+})
+export class FormElementsPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/forms/components/form-validation-page/form-validation-page.component.html b/src/app/modules/templates/forms/components/form-validation-page/form-validation-page.component.html
new file mode 100644
index 0000000..2578a5d
--- /dev/null
+++ b/src/app/modules/templates/forms/components/form-validation-page/form-validation-page.component.html
@@ -0,0 +1,4 @@
+<app-breadcrumb [path]="routes.FORMS_VALIDATION"></app-breadcrumb>
+
+<app-simple-validation></app-simple-validation>
+
diff --git a/src/app/modules/templates/forms/components/form-validation-page/form-validation-page.component.scss b/src/app/modules/templates/forms/components/form-validation-page/form-validation-page.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/forms/components/form-validation-page/form-validation-page.component.ts b/src/app/modules/templates/forms/components/form-validation-page/form-validation-page.component.ts
new file mode 100644
index 0000000..a3760f7
--- /dev/null
+++ b/src/app/modules/templates/forms/components/form-validation-page/form-validation-page.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-form-validation-page',
+    templateUrl: './form-validation-page.component.html',
+    styleUrls: ['./form-validation-page.component.scss'],
+    standalone: false
+})
+export class FormValidationPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/forms/components/horizontal-form/horizontal-form.component.html b/src/app/modules/templates/forms/components/horizontal-form/horizontal-form.component.html
new file mode 100644
index 0000000..79fbc90
--- /dev/null
+++ b/src/app/modules/templates/forms/components/horizontal-form/horizontal-form.component.html
@@ -0,0 +1,80 @@
+<mat-card appearance="outlined">
+  <mat-card-title>
+    <p>Horizontal form</p>
+  </mat-card-title>
+
+  <div class="example-input-wrapper">
+    <p class="example-input-title">Normal field</p>
+
+    <mat-form-field class="example-form-field">
+      <input matInput placeholder="May have placeholder">
+    </mat-form-field>
+  </div>
+
+  <div class="example-input-wrapper">
+    <p class="example-input-title">Label hint</p>
+
+    <mat-form-field class="example-form-field">
+      <input matInput>
+      <mat-hint>Some important helper text</mat-hint>
+    </mat-form-field>
+  </div>
+
+  <div class="example-input-wrapper">
+    <p class="example-input-title">Disabled input</p>
+
+    <mat-form-field class="example-form-field">
+      <input matInput placeholder="Default value" [disabled]="true">
+    </mat-form-field>
+  </div>
+
+  <div class="example-input-wrapper">
+    <p class="example-input-title">Max length</p>
+
+    <mat-form-field class="example-form-field">
+      <input matInput placeholder="Max length is 3" [maxLength]="3">
+    </mat-form-field>
+  </div>
+
+  <div class="example-input-wrapper">
+    <p class="example-input-title">Prepended input</p>
+
+    <mat-form-field class="example-form-field">
+      <mat-icon matPrefix>account_circle</mat-icon>
+      <input matInput>
+    </mat-form-field>
+  </div>
+
+  <div class="example-input-wrapper">
+    <p class="example-input-title">Password</p>
+
+    <mat-form-field class="example-form-field">
+      <mat-icon matPrefix>vpn_key</mat-icon>
+      <input matInput>
+    </mat-form-field>
+  </div>
+
+  <div class="example-input-wrapper">
+    <p class="example-input-title">Appended input</p>
+
+    <mat-form-field class="example-form-field">
+      <input matInput type="number" class="example-right-align">
+      <span matSuffix>.00</span>
+    </mat-form-field>
+  </div>
+
+  <div class="example-input-wrapper">
+    <p class="example-input-title">Combined input</p>
+
+    <mat-form-field class="example-form-field">
+      <mat-icon matPrefix>account_balance_wallet</mat-icon>
+      <input matInput type="number" class="example-right-align">
+      <span matSuffix>.00</span>
+    </mat-form-field>
+  </div>
+
+  <div class="example-input-wrapper">
+    <button mat-raised-button color="primary">save changes</button>
+    <button mat-raised-button color="warn">cancel</button>
+  </div>
+</mat-card>
diff --git a/src/app/modules/templates/forms/components/horizontal-form/horizontal-form.component.scss b/src/app/modules/templates/forms/components/horizontal-form/horizontal-form.component.scss
new file mode 100644
index 0000000..9c96ae2
--- /dev/null
+++ b/src/app/modules/templates/forms/components/horizontal-form/horizontal-form.component.scss
@@ -0,0 +1,32 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/colors" as *;
+
+.example-input-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between
+}
+
+.example-input-title {
+  margin: 0 0 5px 0;
+  font-size: $fs-normal;
+  color: $dark-grey;
+}
+
+.example-form-field {
+  width: 50%;
+  font-size: $fs-normal;
+}
+
+.example-right-align {
+  text-align: right;
+}
+
+.mat-icon {
+  margin-right: 8px;
+}
+
+input.example-right-align::-webkit-outer-spin-button,
+input.example-right-align::-webkit-inner-spin-button {
+  display: none;
+}
diff --git a/src/app/modules/templates/forms/components/horizontal-form/horizontal-form.component.ts b/src/app/modules/templates/forms/components/horizontal-form/horizontal-form.component.ts
new file mode 100644
index 0000000..c3fb98c
--- /dev/null
+++ b/src/app/modules/templates/forms/components/horizontal-form/horizontal-form.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-horizontal-form',
+    templateUrl: './horizontal-form.component.html',
+    styleUrls: ['./horizontal-form.component.scss'],
+    standalone: false
+})
+export class HorizontalFormComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/forms/components/index.ts b/src/app/modules/templates/forms/components/index.ts
new file mode 100644
index 0000000..35cd99d
--- /dev/null
+++ b/src/app/modules/templates/forms/components/index.ts
@@ -0,0 +1,7 @@
+export * from './form-elements-page/form-elements-page.component';
+export * from './form-validation-page/form-validation-page.component';
+export * from './horizontal-form/horizontal-form.component';
+export * from './default-form/default-form.component';
+export * from './selects/selects.component';
+export * from './input-variants/input-variants.component';
+export * from './textarias/textarias.component';
diff --git a/src/app/modules/templates/forms/components/input-variants/input-variants.component.html b/src/app/modules/templates/forms/components/input-variants/input-variants.component.html
new file mode 100644
index 0000000..3eee918
--- /dev/null
+++ b/src/app/modules/templates/forms/components/input-variants/input-variants.component.html
@@ -0,0 +1,50 @@
+<mat-card appearance="outlined">
+  <mat-card-title>
+    <p>Input variants</p>
+  </mat-card-title>
+
+  <mat-card-subtitle>
+    <p>Custom checkboxes & radios</p>
+  </mat-card-subtitle>
+
+  <mat-card-content>
+    <div class="checkbox-wrapper">
+      <div class="checkbox-item">
+        <mat-checkbox [disabled]="true"></mat-checkbox>
+        <p class="checkbox-item-title">Disabled</p>
+      </div>
+
+      <div class="checkbox-item">
+        <mat-checkbox color="accent"></mat-checkbox>
+        <p class="checkbox-item-title">Custom color</p>
+      </div>
+
+      <div class="checkbox-item">
+        <mat-checkbox color="primary"></mat-checkbox>
+        <p class="checkbox-item-title">Basic</p>
+      </div>
+
+      <div class="checkbox-item">
+        <mat-checkbox color="warn" [checked]="true"></mat-checkbox>
+        <p class="checkbox-item-title">Checked</p>
+      </div>
+    </div>
+
+    <mat-radio-button [disabled]="true" [value]="false">Disabled</mat-radio-button>
+    <mat-radio-button color="accent" [value]="false">Custom color</mat-radio-button>
+    <mat-radio-button color="primary" [value]="false">Basic</mat-radio-button>
+  </mat-card-content>
+
+
+  <div class="inputs-wrapper">
+    <mat-form-field appearance="outline" color="warn" class="mat-form-field-should-float mat-focused">
+      <mat-label>Error input</mat-label>
+      <input matInput placeholder="Input with an error">
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" color="success" class="mat-form-field-should-float mat-focused">
+      <mat-label>Success input</mat-label>
+      <input matInput placeholder="Input with success">
+    </mat-form-field>
+  </div>
+</mat-card>
diff --git a/src/app/modules/templates/forms/components/input-variants/input-variants.component.scss b/src/app/modules/templates/forms/components/input-variants/input-variants.component.scss
new file mode 100644
index 0000000..d1ba192
--- /dev/null
+++ b/src/app/modules/templates/forms/components/input-variants/input-variants.component.scss
@@ -0,0 +1,42 @@
+@use "src/app/styles/variables" as *;
+
+.checkbox-wrapper {
+  margin: 24px 0;
+  display: flex;
+
+  @media(max-width: $medium) {
+    flex-direction: column;
+  }
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+
+.checkbox-item-title {
+  margin: 0 0 0 8px;
+}
+
+.mat-mdc-radio-button + .mat-radio-button {
+  margin-left: 16px;
+}
+
+.inputs-wrapper {
+  margin-top: 36px;
+
+  @media(max-width: $normal) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+mat-form-field + mat-form-field {
+  margin-left: 24px;
+
+  @media(max-width: $normal) {
+    margin-top: 24px;
+    margin-left: 0;
+  }
+}
diff --git a/src/app/modules/templates/forms/components/input-variants/input-variants.component.ts b/src/app/modules/templates/forms/components/input-variants/input-variants.component.ts
new file mode 100644
index 0000000..e0892ac
--- /dev/null
+++ b/src/app/modules/templates/forms/components/input-variants/input-variants.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-input-variants',
+    templateUrl: './input-variants.component.html',
+    styleUrls: ['./input-variants.component.scss'],
+    standalone: false
+})
+export class InputVariantsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/forms/components/selects/selects.component.html b/src/app/modules/templates/forms/components/selects/selects.component.html
new file mode 100644
index 0000000..e2dedd4
--- /dev/null
+++ b/src/app/modules/templates/forms/components/selects/selects.component.html
@@ -0,0 +1,31 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <p>Selects</p>
+  </mat-card-title>
+
+  <mat-card-content>
+    <div style="display: flex; align-items: center; justify-content: space-between">
+      <p>Default select</p>
+      <mat-form-field>
+        <mat-select style="outline: none" [value]="'Action'">
+          <mat-option [value]="'Action'">Action</mat-option>
+          <mat-option [value]="'Another action'">Another action</mat-option>
+          <mat-option [value]="'Something else here'">Something else here</mat-option>
+          <mat-option [value]="'Separated link'">Separated link</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+      <div style="display: flex; align-items: center; justify-content: space-between">
+        <p>Grouped select</p>
+        <mat-form-field>
+          <mat-select style="outline: none" [value]="'Action'">
+            <mat-option [value]="'Action'">Action</mat-option>
+            <mat-option [value]="'Another action'">Another action</mat-option>
+            <mat-option [value]="'Something else here'">Something else here</mat-option>
+            <mat-option [value]="'Separated link'">Separated link</mat-option>
+          </mat-select>
+        </mat-form-field>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/forms/components/selects/selects.component.scss b/src/app/modules/templates/forms/components/selects/selects.component.scss
new file mode 100644
index 0000000..3f0d9d0
--- /dev/null
+++ b/src/app/modules/templates/forms/components/selects/selects.component.scss
@@ -0,0 +1,3 @@
+.card {
+  margin-top: 24px;
+}
diff --git a/src/app/modules/templates/forms/components/selects/selects.component.ts b/src/app/modules/templates/forms/components/selects/selects.component.ts
new file mode 100644
index 0000000..cd9b0eb
--- /dev/null
+++ b/src/app/modules/templates/forms/components/selects/selects.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-selects',
+    templateUrl: './selects.component.html',
+    styleUrls: ['./selects.component.scss'],
+    standalone: false
+})
+export class SelectsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/forms/components/simple-validation/simple-validation.component.html b/src/app/modules/templates/forms/components/simple-validation/simple-validation.component.html
new file mode 100644
index 0000000..015ba7e
--- /dev/null
+++ b/src/app/modules/templates/forms/components/simple-validation/simple-validation.component.html
@@ -0,0 +1,26 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <p>Dead simple validation</p>
+  </mat-card-title>
+
+  <mat-card-content class="card-content">
+    <form [formGroup]="form" class="form">
+      <mat-form-field>
+        <mat-label>Simple required</mat-label>
+        <input matInput formControlName="optionA">
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Min-length On Change</mat-label>
+        <input matInput formControlName="optionB">
+        <mat-hint>At least 10</mat-hint>
+      </mat-form-field>
+
+
+      <div class="buttons-wrapper">
+        <button mat-raised-button>Cancel</button>
+        <button mat-raised-button color="success" (click)="validate()">Validate</button>
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/forms/components/simple-validation/simple-validation.component.scss b/src/app/modules/templates/forms/components/simple-validation/simple-validation.component.scss
new file mode 100644
index 0000000..800f6fd
--- /dev/null
+++ b/src/app/modules/templates/forms/components/simple-validation/simple-validation.component.scss
@@ -0,0 +1,27 @@
+@use "src/app/styles/variables" as *;
+
+.card {
+  margin-top: 24px;
+}
+
+.card-content {
+  display: flex;
+  justify-content: center;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.buttons-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24px;
+}
diff --git a/src/app/modules/templates/forms/components/simple-validation/simple-validation.component.ts b/src/app/modules/templates/forms/components/simple-validation/simple-validation.component.ts
new file mode 100644
index 0000000..0afbf50
--- /dev/null
+++ b/src/app/modules/templates/forms/components/simple-validation/simple-validation.component.ts
@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+
+type SimpleValidationControls = {
+  optionA: FormControl<string>;
+  optionB: FormControl<string>;
+};
+
+@Component({
+    selector: 'app-simple-validation',
+    templateUrl: './simple-validation.component.html',
+    styleUrls: ['./simple-validation.component.scss'],
+    standalone: false
+})
+export class SimpleValidationComponent implements OnInit {
+  public form!: FormGroup<SimpleValidationControls>;
+
+  ngOnInit(): void {
+    this.form = new FormGroup<SimpleValidationControls>({
+      optionA: new FormControl('', { nonNullable: true }),
+      optionB: new FormControl('', { nonNullable: true }),
+    });
+  }
+
+  public validate(): void {
+    this.optionA.setValidators([Validators.required]);
+    this.optionB.setValidators([Validators.required, Validators.minLength(10)]);
+  }
+
+  get optionA(): FormControl<string> {
+    return this.form.controls.optionA;
+  }
+
+  get optionB(): FormControl<string> {
+    return this.form.controls.optionB;
+  }
+}
diff --git a/src/app/modules/templates/forms/components/textarias/textarias.component.html b/src/app/modules/templates/forms/components/textarias/textarias.component.html
new file mode 100644
index 0000000..1c6b618
--- /dev/null
+++ b/src/app/modules/templates/forms/components/textarias/textarias.component.html
@@ -0,0 +1,16 @@
+<mat-card appearance="outlined">
+  <mat-card-title>
+    <p>Textareas</p>
+  </mat-card-title>
+
+  <mat-card-subtitle>
+    <p>Simple textarea</p>
+  </mat-card-subtitle>
+
+  <mat-card-content>
+    <mat-form-field appearance="outline">
+      <mat-label>Multiline</mat-label>
+      <textarea matInput style="resize: none" [value]="'Default value'"></textarea>
+    </mat-form-field>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/forms/components/textarias/textarias.component.scss b/src/app/modules/templates/forms/components/textarias/textarias.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/templates/forms/components/textarias/textarias.component.ts b/src/app/modules/templates/forms/components/textarias/textarias.component.ts
new file mode 100644
index 0000000..9c725ec
--- /dev/null
+++ b/src/app/modules/templates/forms/components/textarias/textarias.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-textarias',
+    templateUrl: './textarias.component.html',
+    styleUrls: ['./textarias.component.scss'],
+    standalone: false
+})
+export class TextariasComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/templates/forms/forms-routing.module.ts b/src/app/modules/templates/forms/forms-routing.module.ts
new file mode 100644
index 0000000..5f8c102
--- /dev/null
+++ b/src/app/modules/templates/forms/forms-routing.module.ts
@@ -0,0 +1,29 @@
+import {RouterModule, Routes} from '@angular/router';
+import {NgModule} from '@angular/core';
+import {FormElementsPageComponent, FormValidationPageComponent} from './components';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'elements',
+    pathMatch: 'full'
+  },
+  {
+    path: 'elements',
+    component: FormElementsPageComponent
+  },
+  {
+    path: 'validation',
+    component: FormValidationPageComponent
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+
+export class FormsRoutingModule {
+}
diff --git a/src/app/modules/templates/forms/forms.module.ts b/src/app/modules/templates/forms/forms.module.ts
new file mode 100644
index 0000000..3c0106a
--- /dev/null
+++ b/src/app/modules/templates/forms/forms.module.ts
@@ -0,0 +1,51 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormElementsPageComponent } from './components/form-elements-page/form-elements-page.component';
+import { FormValidationPageComponent } from './components/form-validation-page/form-validation-page.component';
+import {FormsRoutingModule} from './forms-routing.module';
+import { HorizontalFormComponent } from './components/horizontal-form/horizontal-form.component';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import { DefaultFormComponent } from './components/default-form/default-form.component';
+import { SelectsComponent } from './components/selects/selects.component';
+import {MatSelectModule} from '@angular/material/select';
+import { InputVariantsComponent } from './components/input-variants/input-variants.component';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import { TextariasComponent } from './components/textarias/textarias.component';
+import { SimpleValidationComponent } from './components/simple-validation/simple-validation.component';
+import {ReactiveFormsModule} from '@angular/forms';
+import { BreadcrumbComponent } from '../../../shared/ui-elements';
+
+
+
+@NgModule({
+  declarations: [
+    FormElementsPageComponent,
+    FormValidationPageComponent,
+    HorizontalFormComponent,
+    DefaultFormComponent,
+    SelectsComponent,
+    InputVariantsComponent,
+    TextariasComponent,
+    SimpleValidationComponent
+  ],
+    imports: [
+        CommonModule,
+        FormsRoutingModule,
+        BreadcrumbComponent,
+        MatCardModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule,
+        MatSelectModule,
+        MatRadioModule,
+        MatCheckboxModule,
+        ReactiveFormsModule
+    ]
+})
+export class FormsModule { }
diff --git a/src/app/modules/templates/maps/components/google-map-page/google-map-page.component.html b/src/app/modules/templates/maps/components/google-map-page/google-map-page.component.html
new file mode 100644
index 0000000..b8bc699
--- /dev/null
+++ b/src/app/modules/templates/maps/components/google-map-page/google-map-page.component.html
@@ -0,0 +1,13 @@
+<app-breadcrumb [path]="routes.GOOGLE_MAP"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="card">
+  <mat-card-content class="card-content">
+    <iframe
+      [src]="mapEmbedUrl"
+      class="osm-map"
+      title="OpenStreetMap"
+      loading="lazy"
+      referrerpolicy="no-referrer-when-downgrade"
+    ></iframe>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/maps/components/google-map-page/google-map-page.component.scss b/src/app/modules/templates/maps/components/google-map-page/google-map-page.component.scss
new file mode 100644
index 0000000..c9cd5f6
--- /dev/null
+++ b/src/app/modules/templates/maps/components/google-map-page/google-map-page.component.scss
@@ -0,0 +1,23 @@
+@use './src/app/styles/colors' as *;
+
+.card {
+  margin-top: 24px;
+  width: 100%;
+  height: 600px;
+  box-sizing: border-box;
+  padding: 0;
+  overflow: hidden;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+}
+
+.card-content {
+  height: 100%;
+  padding: 0 !important;
+}
+
+.osm-map {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+}
diff --git a/src/app/modules/templates/maps/components/google-map-page/google-map-page.component.ts b/src/app/modules/templates/maps/components/google-map-page/google-map-page.component.ts
new file mode 100644
index 0000000..decd61f
--- /dev/null
+++ b/src/app/modules/templates/maps/components/google-map-page/google-map-page.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { routes } from '../../../../../consts';
+
+@Component({
+    selector: 'app-google-map-page',
+    templateUrl: './google-map-page.component.html',
+    styleUrls: ['./google-map-page.component.scss'],
+    standalone: false
+})
+export class GoogleMapPageComponent {
+  public routes: typeof routes = routes;
+  public readonly mapEmbedUrl: SafeResourceUrl;
+  public readonly center = { lat: -37.813179, lng: 144.950259 };
+
+  constructor(private sanitizer: DomSanitizer) {
+    const bbox = [144.85, -37.90, 145.05, -37.75].join('%2C');
+    const marker = `${this.center.lat}%2C${this.center.lng}`;
+    this.mapEmbedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
+      `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${marker}`
+    );
+  }
+}
diff --git a/src/app/modules/templates/maps/components/index.ts b/src/app/modules/templates/maps/components/index.ts
new file mode 100644
index 0000000..0406e63
--- /dev/null
+++ b/src/app/modules/templates/maps/components/index.ts
@@ -0,0 +1,2 @@
+export * from './google-map-page/google-map-page.component';
+export * from './vector-map-page/vector-map-page.component';
diff --git a/src/app/modules/templates/maps/components/vector-map-page/vector-map-page.component.html b/src/app/modules/templates/maps/components/vector-map-page/vector-map-page.component.html
new file mode 100644
index 0000000..e8414f0
--- /dev/null
+++ b/src/app/modules/templates/maps/components/vector-map-page/vector-map-page.component.html
@@ -0,0 +1,11 @@
+<app-breadcrumb [path]="routes.VECTOR_MAP"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="card">
+  <mat-card-content class="card-content">
+    <div #chartdiv class="map"></div>
+  </mat-card-content>
+</mat-card>
+
+
+
+
diff --git a/src/app/modules/templates/maps/components/vector-map-page/vector-map-page.component.scss b/src/app/modules/templates/maps/components/vector-map-page/vector-map-page.component.scss
new file mode 100644
index 0000000..f81ea94
--- /dev/null
+++ b/src/app/modules/templates/maps/components/vector-map-page/vector-map-page.component.scss
@@ -0,0 +1,24 @@
+@use "src/app/styles/colors" as *;
+
+.card {
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+  width: 100%;
+  height: 600px;
+  box-sizing: border-box;
+  padding: 0;
+  overflow: hidden;
+  margin-top: 24px;
+
+}
+
+.card-content {
+  height: 100%;
+  padding: 0 !important;
+  box-sizing: border-box;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
diff --git a/src/app/modules/templates/maps/components/vector-map-page/vector-map-page.component.ts b/src/app/modules/templates/maps/components/vector-map-page/vector-map-page.component.ts
new file mode 100644
index 0000000..8b25f9b
--- /dev/null
+++ b/src/app/modules/templates/maps/components/vector-map-page/vector-map-page.component.ts
@@ -0,0 +1,101 @@
+import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+
+import { colors, routes } from '../../../../../consts';
+
+type LeafletModule = typeof import('leaflet');
+type LeafletMap = import('leaflet').Map;
+type LeafletLayerGroup = import('leaflet').LayerGroup;
+
+interface CityMarker {
+  title: string;
+  latitude: number;
+  longitude: number;
+}
+
+const CITY_MARKERS: CityMarker[] = [
+  { title: 'Brussels', latitude: 50.8371, longitude: 4.3676 },
+  { title: 'Copenhagen', latitude: 55.6763, longitude: 12.5681 },
+  { title: 'Paris', latitude: 48.8567, longitude: 2.3510 },
+  { title: 'Reykjavik', latitude: 64.1353, longitude: -21.8952 },
+  { title: 'Moscow', latitude: 55.7558, longitude: 37.6176 },
+  { title: 'Madrid', latitude: 40.4167, longitude: -3.7033 },
+  { title: 'London', latitude: 51.5002, longitude: -0.1262 },
+  { title: 'Peking', latitude: 39.9056, longitude: 116.3958 },
+  { title: 'New Delhi', latitude: 28.6353, longitude: 77.2250 },
+  { title: 'Tokyo', latitude: 35.6785, longitude: 139.6823 },
+  { title: 'Ankara', latitude: 39.9439, longitude: 32.8560 },
+  { title: 'Buenos Aires', latitude: -34.6118, longitude: -58.4173 },
+  { title: 'Brasilia', latitude: -15.7801, longitude: -47.9292 },
+  { title: 'Ottawa', latitude: 45.4235, longitude: -75.6979 },
+  { title: 'Washington', latitude: 38.8921, longitude: -77.0241 },
+  { title: 'Kinshasa', latitude: -4.3369, longitude: 15.3271 },
+  { title: 'Cairo', latitude: 30.0571, longitude: 31.2272 },
+  { title: 'Pretoria', latitude: -25.7463, longitude: 28.1876 },
+];
+
+@Component({
+  selector: 'app-vector-map-page',
+  templateUrl: './vector-map-page.component.html',
+  styleUrls: ['./vector-map-page.component.scss'],
+  standalone: false
+})
+export class VectorMapPageComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('chartdiv', { static: false }) public mapChart?: ElementRef<HTMLElement>;
+
+  public routes: typeof routes = routes;
+  public colors: typeof colors = colors;
+
+  private leaflet?: LeafletModule;
+  private map?: LeafletMap;
+  private markersLayer?: LeafletLayerGroup;
+
+  public ngAfterViewInit(): void {
+    void this.initializeMap();
+  }
+
+  public ngOnDestroy(): void {
+    if (this.map) {
+      this.map.remove();
+      this.map = undefined;
+    }
+  }
+
+  private async initializeMap(): Promise<void> {
+    if (!this.mapChart?.nativeElement || this.map) {
+      return;
+    }
+
+    if (!this.leaflet) {
+      this.leaflet = await import('leaflet');
+    }
+
+    const L = this.leaflet;
+
+    this.map = L.map(this.mapChart.nativeElement, {
+      zoomControl: true,
+      minZoom: 2,
+      maxZoom: 6,
+      worldCopyJump: true
+    }).setView([20, 0], 2);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; OpenStreetMap contributors'
+    }).addTo(this.map);
+
+    this.markersLayer = L.layerGroup().addTo(this.map);
+
+    CITY_MARKERS.forEach((city) => {
+      L.circleMarker([city.latitude, city.longitude], {
+        radius: 6,
+        color: '#ffffff',
+        weight: 2,
+        fillColor: colors.BLUE,
+        fillOpacity: 1
+      })
+        .bindTooltip(city.title, { direction: 'top', offset: [0, -6] })
+        .addTo(this.markersLayer as LeafletLayerGroup);
+    });
+
+    setTimeout(() => this.map?.invalidateSize(), 0);
+  }
+}
diff --git a/src/app/modules/templates/maps/consts/api.ts b/src/app/modules/templates/maps/consts/api.ts
new file mode 100644
index 0000000..ed5afe6
--- /dev/null
+++ b/src/app/modules/templates/maps/consts/api.ts
@@ -0,0 +1 @@
+export const googleMapKey: string = 'AIzaSyB7OXmzfQYua_1LEhRdqsoYzyJOPh9hGLg';
diff --git a/src/app/modules/templates/maps/consts/index.ts b/src/app/modules/templates/maps/consts/index.ts
new file mode 100644
index 0000000..b1c13e7
--- /dev/null
+++ b/src/app/modules/templates/maps/consts/index.ts
@@ -0,0 +1 @@
+export * from './api';
diff --git a/src/app/modules/templates/maps/map-routing.module.ts b/src/app/modules/templates/maps/map-routing.module.ts
new file mode 100644
index 0000000..26613c5
--- /dev/null
+++ b/src/app/modules/templates/maps/map-routing.module.ts
@@ -0,0 +1,30 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { GoogleMapPageComponent } from './components';
+import { VectorMapPageComponent } from './components';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'google',
+    pathMatch: 'full'
+  },
+  {
+    path: 'google',
+    component: GoogleMapPageComponent
+  },
+  {
+    path: 'vector',
+    component: VectorMapPageComponent
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+
+export class MapsRoutingModule {
+}
diff --git a/src/app/modules/templates/maps/maps.module.ts b/src/app/modules/templates/maps/maps.module.ts
new file mode 100644
index 0000000..7f032b0
--- /dev/null
+++ b/src/app/modules/templates/maps/maps.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatCardModule } from '@angular/material/card';
+import { GoogleMapsModule } from '@angular/google-maps';
+
+import { GoogleMapPageComponent } from './components';
+import { MapsRoutingModule } from './map-routing.module';
+import { VectorMapPageComponent } from './components';
+import { BreadcrumbComponent } from '../../../shared/ui-elements';
+
+@NgModule({
+  declarations: [
+    GoogleMapPageComponent,
+    VectorMapPageComponent
+  ],
+  imports: [
+    CommonModule,
+    GoogleMapsModule,
+    MapsRoutingModule,
+    BreadcrumbComponent,
+    MatCardModule,
+  ]
+})
+export class MapsModule { }
diff --git a/src/app/modules/templates/tables/components/custom-table/custom-table.component.html b/src/app/modules/templates/tables/components/custom-table/custom-table.component.html
new file mode 100644
index 0000000..60ec17b
--- /dev/null
+++ b/src/app/modules/templates/tables/components/custom-table/custom-table.component.html
@@ -0,0 +1,82 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title class="card-title">
+    <p>Custom Table Action</p>
+  </mat-card-title>
+  <mat-card-subtitle class="card-subtitle">
+    <p>
+      The Actions property of the table allows the implementation of custom actions.
+    </p>
+  </mat-card-subtitle>
+
+  <mat-card-content>
+    <div class="table-header">
+      <p class="table-header-title">Nutrition</p>
+    </div>
+
+    <div class="table-wrapper">
+      <table mat-table [dataSource]="dataSource" class="table">
+
+        <!-- Checkbox Column -->
+        <ng-container matColumnDef="select">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>
+            <mat-checkbox
+              color="warn"
+              (change)="$event ? masterToggle() : null"
+              [checked]="selection.hasValue() && isAllSelected()"
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+              [aria-label]="checkboxLabel()">
+            </mat-checkbox>
+          </th>
+
+          <td mat-cell *matCellDef="let row">
+            <mat-checkbox
+              color="warn"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+              [aria-label]="checkboxLabel(row)">
+            </mat-checkbox>
+          </td>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="name" >
+          <th class="col-header" mat-header-cell *matHeaderCellDef >Dessert (100g serving)</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.name}} </td>
+        </ng-container>
+
+        <!-- Calories Column -->
+        <ng-container matColumnDef="calories">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>Calories</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.calories}} </td>
+        </ng-container>
+
+        <!-- Fat Column -->
+        <ng-container matColumnDef="fat">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>Fat (g)</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.fat}} </td>
+        </ng-container>
+
+        <!-- Cards Column -->
+        <ng-container matColumnDef="cards">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>Carbs (g)</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.cards}} </td>
+        </ng-container>
+
+        <!-- State Protein -->
+        <ng-container matColumnDef="protein">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>Protein (g)</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.protein}} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+            (click)="selection.toggle(row)">
+        </tr>
+      </table>
+    </div>
+  </mat-card-content>
+  <div>
+    <mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
+  </div>
+</mat-card>
diff --git a/src/app/modules/templates/tables/components/custom-table/custom-table.component.scss b/src/app/modules/templates/tables/components/custom-table/custom-table.component.scss
new file mode 100644
index 0000000..ddcd1c3
--- /dev/null
+++ b/src/app/modules/templates/tables/components/custom-table/custom-table.component.scss
@@ -0,0 +1,59 @@
+@use "src/app/styles/colors" as *;
+@use "src/app/styles/font" as *;
+
+.card {
+  margin-top: 24px;
+}
+
+.card-title {
+  font-size: $fs-regular;
+  color: $grey;
+  font-weight: $fw-lighter;
+  margin-bottom: 8px;
+}
+
+.card-subtitle {
+  font-size: $fs-normal;
+  color: $dark-grey;
+  font-weight: $fw-lighter;
+  margin-bottom: 24px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+  font-size: $fs-regular;
+  color: $dark-grey;
+  font-weight: $fw-lighter;
+  padding: 0 24px 0 24px;
+}
+
+.table-header-title {
+  margin: 0;
+  line-height: 36px;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+}
+
+.col-header {
+  font-size: $fs-normal;
+  color: $dark-grey;
+  font-weight: $fw-normal;
+  padding: 14px 40px 14px 24px;
+}
+
+.col-body {
+  font-size: $fs-small;
+  color: $dark-grey;
+  font-weight: $fw-lighter;
+  padding: 14px 40px 14px 24px;
+}
+
diff --git a/src/app/modules/templates/tables/components/custom-table/custom-table.component.ts b/src/app/modules/templates/tables/components/custom-table/custom-table.component.ts
new file mode 100644
index 0000000..924855a
--- /dev/null
+++ b/src/app/modules/templates/tables/components/custom-table/custom-table.component.ts
@@ -0,0 +1,48 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { Nutrition } from '../../models/nutrition';
+import { MatTableDataSource } from '@angular/material/table';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatPaginator } from '@angular/material/paginator';
+
+@Component({
+    selector: 'app-custom-table',
+    templateUrl: './custom-table.component.html',
+    styleUrls: ['./custom-table.component.scss'],
+    standalone: false
+})
+export class CustomTableComponent {
+  @Input() nutritionTableData: Nutrition[];
+  public displayedColumns: string[] = ['select', 'name', 'calories', 'fat', 'cards', 'protein'];
+  public dataSource: MatTableDataSource<Nutrition>;
+  public selection = new SelectionModel<Nutrition>(true, []);
+
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+
+  public ngOnInit(): void {
+    this.dataSource = new MatTableDataSource<Nutrition>(this.nutritionTableData);
+
+    this.dataSource.paginator = this.paginator;
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  public masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  public checkboxLabel(row?: Nutrition): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.name}`;
+  }
+}
diff --git a/src/app/modules/templates/tables/components/employee-table/employee-table.component.html b/src/app/modules/templates/tables/components/employee-table/employee-table.component.html
new file mode 100644
index 0000000..832f376
--- /dev/null
+++ b/src/app/modules/templates/tables/components/employee-table/employee-table.component.html
@@ -0,0 +1,79 @@
+<mat-card appearance="outlined" class="employee-table-wrapper">
+  <mat-card-title class="employee-table-wrapper__header">
+    @if (!isShowFilterInput) {
+      <p class="employee-table-wrapper__title">Employee List</p>
+    }
+    @if (isShowFilterInput) {
+      <div class="employee-table-wrapper__search">
+        <div class="employee-table-wrapper__icon-wrapper">
+          <mat-icon class="employee-table-wrapper__icon">search</mat-icon>
+        </div>
+        <input matInput class="employee-table-wrapper__search-input" (keyup)="applyFilter($event)">
+        <button class="employee-table-wrapper__button" mat-mini-fab color="default" (click)="showFilterInput()">
+          <mat-icon class="employee-table-wrapper__icon">close</mat-icon>
+        </button>
+      </div>
+    }
+    <button class="employee-table-wrapper__button" mat-mini-fab color="default" (click)="showFilterInput()">
+      <mat-icon class="employee-table-wrapper__icon">search</mat-icon>
+    </button>
+  </mat-card-title>
+  <mat-card-content class="employee-table__content">
+    <table class="employee-table__table" mat-table [dataSource]="dataSource">
+
+      <!-- Checkbox Column -->
+      <ng-container matColumnDef="select">
+        <th class="employee-table__table-checkbox" mat-header-cell *matHeaderCellDef>
+          <mat-checkbox
+            color="warn"
+            (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+            [aria-label]="checkboxLabel()">
+          </mat-checkbox>
+        </th>
+        <td class="employee-table__table-checkbox" mat-cell *matCellDef="let row">
+          <mat-checkbox
+            color="warn"
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+            [aria-label]="checkboxLabel(row)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <!-- Name Column -->
+      <ng-container matColumnDef="name" >
+        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef > Name </th>
+        <td class="employee-table__table-body" mat-cell *matCellDef="let element"> {{element.name}} </td>
+      </ng-container>
+
+      <!-- Company Column -->
+      <ng-container matColumnDef="company">
+        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef> Company </th>
+        <td class="employee-table__table-body" mat-cell *matCellDef="let element"> {{element.company}} </td>
+      </ng-container>
+
+      <!-- City Column -->
+      <ng-container matColumnDef="city">
+        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef> City </th>
+        <td class="employee-table__table-body" mat-cell *matCellDef="let element"> {{element.city}} </td>
+      </ng-container>
+
+      <!-- State Column -->
+      <ng-container matColumnDef="state">
+        <th class="employee-table__table-header" mat-header-cell *matHeaderCellDef> State </th>
+        <td class="employee-table__table-body" mat-cell *matCellDef="let element"> {{element.state}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+        (click)="selection.toggle(row)">
+      </tr>
+    </table>
+  </mat-card-content>
+  <div class="pagination">
+    <mat-paginator [pageSizeOptions]="[10, 15, 100]" showFirstLastButtons></mat-paginator>
+  </div>
+</mat-card>
diff --git a/src/app/modules/templates/tables/components/employee-table/employee-table.component.scss b/src/app/modules/templates/tables/components/employee-table/employee-table.component.scss
new file mode 100644
index 0000000..813b21c
--- /dev/null
+++ b/src/app/modules/templates/tables/components/employee-table/employee-table.component.scss
@@ -0,0 +1,103 @@
+@use '../../../../../styles/font' as *;
+@use '../../../../../styles/variables' as *;
+
+.employee-table-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+
+  &__header {
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @media (max-width: $small) {
+      padding: 0 16px;
+    }
+  }
+
+  &__title {
+    margin: 0;
+  }
+
+  &__search {
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon-wrapper {
+    height: 46px;
+    width: 46px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__icon {
+    color: inherit;
+  }
+
+  &__search-input {
+    font-size: $fs-normal;
+    height: 32px;
+    border: 0;
+    border-bottom: 1px solid $grey;
+    outline: none;
+
+    @media (max-width: $small) {
+      width: 150px;
+    }
+
+    &:focus {
+      border-bottom: 2px solid $blue;
+    }
+  }
+
+  &__button {
+    box-shadow: none;
+    background-color: inherit;
+    width: 46px;
+    height: 46px;
+    color: $grey;
+
+    &:hover {
+      background-color: $black-08;
+      color: $blue;
+    }
+  }
+}
+
+.employee-table {
+  &__content {
+    @media (max-width: $small) {
+      overflow-x: scroll;
+    }
+  }
+
+  &__table {
+    width:100%;
+    box-shadow: none;
+
+    @media (max-width: $small) {
+      width: 200%;
+    }
+  }
+
+  &__table-checkbox {
+    width: 32px;
+    padding-left: 24px;
+  }
+
+  &__table-header {
+    font-size: $fs-small;
+    padding: 14px 40px 14px 24px;
+  }
+
+  &__table-body{
+    font-size: $fs-small;
+    padding: 14px 40px 14px 24px;
+  }
+}
+
+
diff --git a/src/app/modules/templates/tables/components/employee-table/employee-table.component.ts b/src/app/modules/templates/tables/components/employee-table/employee-table.component.ts
new file mode 100644
index 0000000..a59a7c8
--- /dev/null
+++ b/src/app/modules/templates/tables/components/employee-table/employee-table.component.ts
@@ -0,0 +1,61 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { SelectionModel } from '@angular/cdk/collections';
+import { MatPaginator } from '@angular/material/paginator';
+
+import { Employee } from '../../models/employee';
+
+@Component({
+    selector: 'app-employee-table',
+    templateUrl: './employee-table.component.html',
+    styleUrls: ['./employee-table.component.scss'],
+    standalone: false
+})
+export class EmployeeTableComponent implements OnInit {
+  @Input() employeeTableData: Employee[];
+  public displayedColumns: string[] = ['select', 'name', 'company', 'city', 'state'];
+  public dataSource: MatTableDataSource<Employee>;
+  public selection = new SelectionModel<Employee>(true, []);
+
+  public isShowFilterInput = false;
+
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+
+  public ngOnInit(): void {
+    this.dataSource = new MatTableDataSource<Employee>(this.employeeTableData);
+
+    this.dataSource.paginator = this.paginator;
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  public masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  public checkboxLabel(row?: Employee): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.name}`;
+  }
+
+  public applyFilter(event: Event): void {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  public showFilterInput(): void {
+    this.isShowFilterInput = !this.isShowFilterInput;
+    this.dataSource = new MatTableDataSource<Employee>(this.employeeTableData);
+  }
+}
diff --git a/src/app/modules/templates/tables/components/index.ts b/src/app/modules/templates/tables/components/index.ts
new file mode 100644
index 0000000..fc961d5
--- /dev/null
+++ b/src/app/modules/templates/tables/components/index.ts
@@ -0,0 +1,4 @@
+export * from './material-table/material-table.component';
+export * from './employee-table/employee-table.component';
+export * from './nutrition-table/nutrition-table.component';
+
diff --git a/src/app/modules/templates/tables/components/material-table/material-table.component.html b/src/app/modules/templates/tables/components/material-table/material-table.component.html
new file mode 100644
index 0000000..cc4051b
--- /dev/null
+++ b/src/app/modules/templates/tables/components/material-table/material-table.component.html
@@ -0,0 +1,58 @@
+<mat-card appearance="outlined" class="material-table">
+  <mat-card-title class="material-table__header">
+    <p class="material-table__title">Material-UI Table</p>
+    <app-settings-menu></app-settings-menu>
+  </mat-card-title>
+
+  <mat-card-content class="material-table__content">
+    <table mat-table [dataSource]="dataSource" class="material-table__table">
+      @for (column of displayedColumns; track column) {
+        <ng-container matColumnDef="{{column}}" class="material-table__table-row">
+          <th mat-header-cell *matHeaderCellDef class="material-table__table-row-title">
+            <p>{{column}}</p>
+          </th>
+          <td mat-cell *matCellDef="let element" class="material-table__table-content">
+            @if (column !== 'name' && column !=='status') {
+              <span>{{element[column]}}</span>
+            }
+            @if (column === 'name') {
+              <div class="material-table__content-badge" [ngClass]="element[column]">
+                <div style="display: flex; align-items: center">
+                  <button
+                    mat-mini-fab
+                    class="user-button"
+                color="{{
+                element.status === 'send'
+                ? 'success'
+                : element.status === 'pending'
+                ? 'accent'
+                : element.status === 'progress'
+                ? 'primary'
+                : 'warn'
+              }}"
+                  >{{element[column].slice(0, 1).toUpperCase()}}</button>
+                  <p style="color: #4A4A4A; margin: 0 0 0 8px; font-size: 14px">{{element[column]}}</p>
+                </div>
+              </div>
+            }
+            @if (column === 'status') {
+              <div [ngClass]="element[column]">
+                <mat-chip-listbox>
+                  <mat-chip-option
+                    class="material-table__content-badge"
+                    [color]="element[column] === 'send' ? 'primary' : element[column] === 'declined' ? 'warn' : 'accent'"
+                    selected
+                  >{{element[column]}}</mat-chip-option>
+                </mat-chip-listbox>
+              </div>
+            }
+          </td>
+        </ng-container>
+      }
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>
+
diff --git a/src/app/modules/templates/tables/components/material-table/material-table.component.scss b/src/app/modules/templates/tables/components/material-table/material-table.component.scss
new file mode 100644
index 0000000..bb1857a
--- /dev/null
+++ b/src/app/modules/templates/tables/components/material-table/material-table.component.scss
@@ -0,0 +1,69 @@
+@use '../../../../../styles/font' as *;
+@use '../../../../../styles/variables' as *;
+
+.material-table {
+  margin-top: 24px;
+  padding: 0;
+  overflow: hidden;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+
+  &__header {
+    color: $grey;
+    display: flex;
+    justify-content: space-between;
+    padding: 24px 24px 8px;
+    margin-bottom: 0;
+  }
+
+  &__title {
+    font-size: $fs-medium;
+    font-weight: $fw-lighter;
+    margin: 0;
+    line-height: 40px;
+  }
+
+  &__content {
+    overflow-y: hidden;
+    overflow-x: scroll;
+
+    @media (max-width: $small) {
+      height: auto;
+    }
+  }
+
+  &__table {
+    width: 100%;
+  }
+
+  &__table-row {
+    height: 64px;
+  }
+
+  &__table-row-title {
+    color: $dark-grey;
+    font-size: $fs-normal;
+    line-height: 24px;
+    text-transform: uppercase;
+    padding: 16px;
+  }
+
+  &__table-content {
+    color: $dark-grey;
+    font-size: $fs-small;
+    padding: 16px;
+  }
+
+  &__content-badge {
+    color: $white;
+    font-size: 13px;
+    font-weight: $fw-lighter;
+    letter-spacing: 0.457px;
+    text-transform: uppercase;
+  }
+}
+
+.user-button {
+  font-size: 20px;
+  line-height: 36px;
+  box-shadow: none;
+}
diff --git a/src/app/modules/templates/tables/components/material-table/material-table.component.ts b/src/app/modules/templates/tables/components/material-table/material-table.component.ts
new file mode 100644
index 0000000..28e5066
--- /dev/null
+++ b/src/app/modules/templates/tables/components/material-table/material-table.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+import { Customer } from '../../models';
+
+@Component({
+    selector: 'app-material-table',
+    templateUrl: './material-table.component.html',
+    styleUrls: ['./material-table.component.scss'],
+    standalone: false
+})
+export class MaterialTableComponent implements OnInit {
+  @Input() materialTableDate: Customer[];
+  public displayedColumns: string[] = ['name', 'email', 'product', 'price', 'date', 'city', 'status'];
+  public dataSource: Customer[];
+
+  public ngOnInit() {
+    this.dataSource = this.materialTableDate;
+  }
+}
diff --git a/src/app/modules/templates/tables/components/nutrition-table/nutrition-table.component.html b/src/app/modules/templates/tables/components/nutrition-table/nutrition-table.component.html
new file mode 100644
index 0000000..caf485a
--- /dev/null
+++ b/src/app/modules/templates/tables/components/nutrition-table/nutrition-table.component.html
@@ -0,0 +1,84 @@
+<mat-card appearance="outlined">
+  <mat-card-title class="card-title">
+    <p>Sorting & Selecting</p>
+  </mat-card-title>
+  <mat-card-subtitle class="card-subtitle">
+    <p>This example demonstrates the use of Checkbox and clickable rows for selection, with a custom Toolbar.</p>
+  </mat-card-subtitle>
+
+  <mat-card-content>
+    <div class="table-header">
+      <p class="table-header-title">Nutrition</p>
+      <button mat-mini-fab class="table-header-button" color="default">
+        <mat-icon>filter_list</mat-icon>
+      </button>
+    </div>
+
+    <div class="table-wrapper">
+      <table mat-table [dataSource]="dataSource" class="table">
+
+        <!-- Checkbox Column -->
+        <ng-container matColumnDef="select">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>
+            <mat-checkbox
+              color="warn"
+              (change)="$event ? masterToggle() : null"
+              [checked]="selection.hasValue() && isAllSelected()"
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+              [aria-label]="checkboxLabel()">
+            </mat-checkbox>
+          </th>
+
+          <td class="col-body" mat-cell *matCellDef="let row">
+            <mat-checkbox
+              color="warn"
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+              [aria-label]="checkboxLabel(row)">
+            </mat-checkbox>
+          </td>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="name" >
+          <th class="col-header" mat-header-cell *matHeaderCellDef >Dessert (100g serving)</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.name}} </td>
+        </ng-container>
+
+        <!-- Calories Column -->
+        <ng-container matColumnDef="calories">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>Calories</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.calories}} </td>
+        </ng-container>
+
+        <!-- Fat Column -->
+        <ng-container matColumnDef="fat">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>Fat (g)</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.fat}} </td>
+        </ng-container>
+
+        <!-- Cards Column -->
+        <ng-container matColumnDef="cards">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>Carbs (g)</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.cards}} </td>
+        </ng-container>
+
+        <!-- State Protein -->
+        <ng-container matColumnDef="protein">
+          <th class="col-header" mat-header-cell *matHeaderCellDef>Protein (g)</th>
+          <td class="col-body" mat-cell *matCellDef="let element"> {{element.protein}} </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+            (click)="selection.toggle(row)">
+        </tr>
+      </table>
+    </div>
+
+    <div>
+      <mat-paginator [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/tables/components/nutrition-table/nutrition-table.component.scss b/src/app/modules/templates/tables/components/nutrition-table/nutrition-table.component.scss
new file mode 100644
index 0000000..adfaf22
--- /dev/null
+++ b/src/app/modules/templates/tables/components/nutrition-table/nutrition-table.component.scss
@@ -0,0 +1,70 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+
+.card-title {
+  font-size: $fs-regular;
+  color: $grey;
+  font-weight: $fw-lighter;
+  margin-bottom: 8px;
+}
+
+.card-subtitle {
+  font-size: $fs-normal;
+  color: $dark-grey;
+  font-weight: $fw-lighter;
+  margin-bottom: 24px;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-self: center;
+  font-size: $fs-regular;
+  color: $dark-grey;
+  font-weight: $fw-lighter;
+  padding: 0 24px 0 24px;
+
+  @media(max-width: $small) {
+    padding: 0;
+  }
+}
+
+.table-header-title {
+  margin: 0;
+  line-height: 36px;
+}
+
+.table-header-button {
+  background-color: inherit;
+  color: $dark-grey;
+  box-shadow: none;
+  width: 48px;
+  height: 48px;
+
+  &:hover {
+    background-color: $black-08;
+  }
+}
+
+.table {
+  width: 100%;
+}
+
+.col-header {
+  font-size: $fs-normal;
+  color: $dark-grey;
+  font-weight: $fw-normal;
+  padding: 14px 40px 14px 24px;
+}
+
+.col-body {
+  font-size: $fs-small;
+  color: $dark-grey;
+  font-weight: $fw-lighter;
+  padding: 14px 40px 14px 24px;
+}
diff --git a/src/app/modules/templates/tables/components/nutrition-table/nutrition-table.component.ts b/src/app/modules/templates/tables/components/nutrition-table/nutrition-table.component.ts
new file mode 100644
index 0000000..3475e4f
--- /dev/null
+++ b/src/app/modules/templates/tables/components/nutrition-table/nutrition-table.component.ts
@@ -0,0 +1,48 @@
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {MatTableDataSource} from '@angular/material/table';
+import {SelectionModel} from '@angular/cdk/collections';
+import {MatPaginator} from '@angular/material/paginator';
+import {Nutrition} from '../../models/nutrition';
+
+@Component({
+    selector: 'app-nutrition-table',
+    templateUrl: './nutrition-table.component.html',
+    styleUrls: ['./nutrition-table.component.scss'],
+    standalone: false
+})
+export class NutritionTableComponent implements OnInit {
+  @Input() nutritionTableData: Nutrition[];
+  public displayedColumns: string[] = ['select', 'name', 'calories', 'fat', 'cards', 'protein'];
+  public dataSource: MatTableDataSource<Nutrition>;
+  public selection = new SelectionModel<Nutrition>(true, []);
+
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+
+  public ngOnInit(): void {
+    this.dataSource = new MatTableDataSource<Nutrition>(this.nutritionTableData);
+
+    this.dataSource.paginator = this.paginator;
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  public isAllSelected(): boolean {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  public masterToggle(): void {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  public checkboxLabel(row?: Nutrition): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.name}`;
+  }
+}
diff --git a/src/app/modules/templates/tables/containers/index.ts b/src/app/modules/templates/tables/containers/index.ts
new file mode 100644
index 0000000..b073d39
--- /dev/null
+++ b/src/app/modules/templates/tables/containers/index.ts
@@ -0,0 +1,2 @@
+export * from './tables-basic-page/tables-basic-page.component';
+export * from './tables-dynamic-page/tables-dynamic-page.component';
diff --git a/src/app/modules/templates/tables/containers/tables-basic-page/tables-basic-page.component.html b/src/app/modules/templates/tables/containers/tables-basic-page/tables-basic-page.component.html
new file mode 100644
index 0000000..940eb21
--- /dev/null
+++ b/src/app/modules/templates/tables/containers/tables-basic-page/tables-basic-page.component.html
@@ -0,0 +1,7 @@
+<app-breadcrumb [path]="routes.TABLES_BASIC"></app-breadcrumb>
+
+<div class="tables-wrapper">
+  <app-employee-table [employeeTableData]="employeeTableData$ | async"></app-employee-table>
+  <app-material-table [materialTableDate]="materialTableData$ | async"></app-material-table>
+</div>
+
diff --git a/src/app/modules/templates/tables/containers/tables-basic-page/tables-basic-page.component.scss b/src/app/modules/templates/tables/containers/tables-basic-page/tables-basic-page.component.scss
new file mode 100644
index 0000000..35d1d50
--- /dev/null
+++ b/src/app/modules/templates/tables/containers/tables-basic-page/tables-basic-page.component.scss
@@ -0,0 +1,3 @@
+.tables-wrapper {
+  margin-top: 24px;
+}
diff --git a/src/app/modules/templates/tables/containers/tables-basic-page/tables-basic-page.component.ts b/src/app/modules/templates/tables/containers/tables-basic-page/tables-basic-page.component.ts
new file mode 100644
index 0000000..6e49339
--- /dev/null
+++ b/src/app/modules/templates/tables/containers/tables-basic-page/tables-basic-page.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { TablesService } from '../../services';
+import { Customer, Employee } from '../../models';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-tables-basic-page',
+    templateUrl: './tables-basic-page.component.html',
+    styleUrls: ['./tables-basic-page.component.scss'],
+    standalone: false
+})
+export class TablesBasicPageComponent {
+  public employeeTableData$: Observable<Employee[]>
+  public materialTableData$: Observable<Customer[]>
+  public routes: typeof routes = routes;
+
+  constructor(private service: TablesService) {
+    this.employeeTableData$ = service.loadEmployeeTableData();
+    this.materialTableData$ = service.loadMaterialTableData();
+  }
+}
diff --git a/src/app/modules/templates/tables/containers/tables-dynamic-page/tables-dynamic-page.component.html b/src/app/modules/templates/tables/containers/tables-dynamic-page/tables-dynamic-page.component.html
new file mode 100644
index 0000000..35fd1d1
--- /dev/null
+++ b/src/app/modules/templates/tables/containers/tables-dynamic-page/tables-dynamic-page.component.html
@@ -0,0 +1,7 @@
+<app-breadcrumb [path]="routes.TABLES_DYNAMIC"></app-breadcrumb>
+
+<div class="tables-wrapper">
+  <app-nutrition-table [nutritionTableData]="nutritionTableData$ | async"></app-nutrition-table>
+  <app-custom-table [nutritionTableData]="nutritionTableData$ | async"></app-custom-table>
+</div>
+
diff --git a/src/app/modules/templates/tables/containers/tables-dynamic-page/tables-dynamic-page.component.scss b/src/app/modules/templates/tables/containers/tables-dynamic-page/tables-dynamic-page.component.scss
new file mode 100644
index 0000000..35d1d50
--- /dev/null
+++ b/src/app/modules/templates/tables/containers/tables-dynamic-page/tables-dynamic-page.component.scss
@@ -0,0 +1,3 @@
+.tables-wrapper {
+  margin-top: 24px;
+}
diff --git a/src/app/modules/templates/tables/containers/tables-dynamic-page/tables-dynamic-page.component.ts b/src/app/modules/templates/tables/containers/tables-dynamic-page/tables-dynamic-page.component.ts
new file mode 100644
index 0000000..501b568
--- /dev/null
+++ b/src/app/modules/templates/tables/containers/tables-dynamic-page/tables-dynamic-page.component.ts
@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {Observable} from 'rxjs';
+import {TablesService} from '../../services';
+import {Nutrition} from '../../models/nutrition';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-tables-dynamic-page',
+    templateUrl: './tables-dynamic-page.component.html',
+    styleUrls: ['./tables-dynamic-page.component.scss'],
+    standalone: false
+})
+export class TablesDynamicPageComponent {
+  public nutritionTableData$: Observable<Nutrition[]>
+  // public materialTableData$: Observable<Customer[]>
+  public routes: typeof routes = routes;
+
+  constructor(private service: TablesService) {
+    this.nutritionTableData$ = service.loadNutritionTableData();
+    // this.materialTableData$ = service.loadMaterialTableData();
+  }
+}
diff --git a/src/app/modules/templates/tables/models/customer.ts b/src/app/modules/templates/tables/models/customer.ts
new file mode 100644
index 0000000..9d75c93
--- /dev/null
+++ b/src/app/modules/templates/tables/models/customer.ts
@@ -0,0 +1,9 @@
+export interface Customer {
+  name: string;
+  email: string;
+  product: string;
+  price: string;
+  date: string;
+  city: string;
+  status: string;
+}
diff --git a/src/app/modules/templates/tables/models/employee.ts b/src/app/modules/templates/tables/models/employee.ts
new file mode 100644
index 0000000..4a23397
--- /dev/null
+++ b/src/app/modules/templates/tables/models/employee.ts
@@ -0,0 +1,6 @@
+export interface Employee {
+  name: string;
+  company: string;
+  city: string;
+  state: string;
+}
diff --git a/src/app/modules/templates/tables/models/index.ts b/src/app/modules/templates/tables/models/index.ts
new file mode 100644
index 0000000..011f194
--- /dev/null
+++ b/src/app/modules/templates/tables/models/index.ts
@@ -0,0 +1,2 @@
+export * from './employee';
+export * from './customer';
diff --git a/src/app/modules/templates/tables/models/nutrition.ts b/src/app/modules/templates/tables/models/nutrition.ts
new file mode 100644
index 0000000..30880d1
--- /dev/null
+++ b/src/app/modules/templates/tables/models/nutrition.ts
@@ -0,0 +1,7 @@
+export interface Nutrition {
+  name: string;
+  calories: string;
+  fat: string;
+  cards: string;
+  protein: string;
+}
diff --git a/src/app/modules/templates/tables/services/index.ts b/src/app/modules/templates/tables/services/index.ts
new file mode 100644
index 0000000..bd4d2e4
--- /dev/null
+++ b/src/app/modules/templates/tables/services/index.ts
@@ -0,0 +1 @@
+export * from './tables.service';
diff --git a/src/app/modules/templates/tables/services/tables.service.ts b/src/app/modules/templates/tables/services/tables.service.ts
new file mode 100644
index 0000000..34997cc
--- /dev/null
+++ b/src/app/modules/templates/tables/services/tables.service.ts
@@ -0,0 +1,100 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import {Customer, Employee} from '../models';
+import {Nutrition} from '../models/nutrition';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TablesService {
+  public loadEmployeeTableData(): Observable<Employee[]> {
+    return of([
+      {name: 'Joe James', company: 'Example Inc.', city: 'Yonkers', state: 'NY'},
+      {name: 'John Walsh', company: 'Example Inc.', city: 'Hartford', state: 'CT'},
+      {name: 'Bob Herm', company: 'Example Inc.', city: 'Tampa', state: 'FL'},
+      {name: 'James Houston', company: 'Example Inc.', city: 'Dallas', state: 'TX'},
+      {name: 'Prabhakar Linwood', company: 'Example Inc.', city: 'Hartford', state: 'CT'},
+      {name: 'Kaui Ignace', company: 'Example Inc.', city: 'Yonkers', state: 'NY'},
+      {name: 'Esperanza Susanne', company: 'Example Inc.', city: 'Hartford', state: 'CT'},
+      {name: 'Christian Birgitte', company: 'Example Inc.', city: 'Tampa', state: 'FL'},
+      {name: 'Meral Elias', company: 'Example Inc.', city: 'Hartford', state: 'CT'},
+      {name: 'Deep Pau', company: 'Example Inc.', city: 'Yonkers', state: 'NY'},
+      {name: 'Sebastiana Hani', company: 'Example Inc.', city: 'Dallas', state: 'TX'},
+      {name: 'Marciano Oihana', company: 'Example Inc.', city: 'Yonkers', state: 'NY'},
+      {name: 'Brigid Ankur', company: 'Example Inc.', city: 'Dallas', state: 'TX'},
+      {name: 'Anna Siranush', company: 'Example Inc.', city: 'Yonkers', state: 'NY'},
+      {name: 'Avram Sylva', company: 'Example Inc.', city: 'Hartford', state: 'CT'},
+      {name: 'Serafima Babatunde', company: 'Example Inc.', city: 'Tampa', state: 'FL'},
+      {name: 'Gaston Festus', company: 'Example Inc.', city: 'Tampa', state: 'FL'}
+    ]);
+  }
+
+  public loadMaterialTableData(): Observable<Customer[]> {
+    return of([
+      {
+        name: 'Mark Otto',
+        email: 'ottoto@wxample.com',
+        product: 'ON the Road',
+        price: '$25 224.2',
+        date: '11 May 2017',
+        city: 'Otsego',
+        status: 'send'
+      },
+      {
+        name: 'Jacob Thornton',
+        email: 'thornton@wxample.com',
+        product: 'HP Core i7',
+        price: '$1 254.2',
+        date: '4 Jun 2017',
+        city: 'Fivepointville',
+        status: 'send'
+      },
+      {
+        name: 'Larry the Bird',
+        email: 'bird@wxample.com',
+        product: 'Air Pro',
+        price: '$1 570.0',
+        date: '27 Aug 2017',
+        city: 'Leadville North',
+        status: 'pending'
+      },
+      {
+        name: 'Joseph May',
+        email: 'josephmay@wxample.com',
+        product: 'Version Control',
+        price: '$5 224.5',
+        date: '19 Feb 2018',
+        city: 'Seaforth',
+        status: 'declined'
+      },
+      {
+        name: 'Peter Horadnia',
+        email: 'horadnia@wxample.com',
+        product: 'Let\'s Dance',
+        price: '$43 594.7',
+        date: '1 Mar 2018',
+        city: 'Hanoverton',
+        status: 'send'
+      }
+    ]);
+  }
+
+  public loadNutritionTableData(): Observable<Nutrition[]> {
+    return of([
+      { name: 'Jelly Bean', calories: '375', fat: '0', cards: '94', protein: '0'},
+      { name: 'Lollipop', calories: '392', fat: '0.2', cards: '98', protein: '0'},
+      { name: 'Marshmallow', calories: '318', fat: '0', cards: '81', protein: '2'},
+      { name: 'Gingerbread', calories: '356', fat: '16', cards: '49', protein: '3.9'},
+      { name: 'Frozen yoghurt', calories: '159', fat: '6', cards: '24', protein: '4'},
+      { name: 'Oreo', calories: '437', fat: '18', cards: '63', protein: '4'},
+      { name: 'Cupcake', calories: '305', fat: '3.7', cards: '67', protein: '4.3'},
+      { name: 'Ice cream sandwich', calories: '237', fat: '9', cards: '37', protein: '4.3'},
+      { name: 'Donut', calories: '452', fat: '25', cards: '51', protein: '4.9'},
+      { name: 'Eclair', calories: '262', fat: '16', cards: '24', protein: '6'},
+      { name: 'Honeycomb', calories: '408', fat: '3.2', cards: '87', protein: '6.5'},
+      { name: 'KitKat', calories: '518', fat: '26', cards: '65', protein: '7'},
+      { name: 'Nougat', calories: '360', fat: '19', cards: '9', protein: '37'}
+    ]);
+  }
+}
diff --git a/src/app/modules/templates/tables/tables-routing.module.ts b/src/app/modules/templates/tables/tables-routing.module.ts
new file mode 100644
index 0000000..bbedcb4
--- /dev/null
+++ b/src/app/modules/templates/tables/tables-routing.module.ts
@@ -0,0 +1,30 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import { TablesBasicPageComponent, TablesDynamicPageComponent } from './containers';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'basic',
+    pathMatch: 'full'
+  },
+  {
+    path: 'basic',
+    component: TablesBasicPageComponent,
+  },
+  {
+    path: 'dynamic',
+    component: TablesDynamicPageComponent,
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+
+export class TablesRoutingModule {
+}
diff --git a/src/app/modules/templates/tables/tables.module.ts b/src/app/modules/templates/tables/tables.module.ts
new file mode 100644
index 0000000..adfa6f9
--- /dev/null
+++ b/src/app/modules/templates/tables/tables.module.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TablesRoutingModule } from './tables-routing.module';
+import { TablesBasicPageComponent } from './containers';
+import { EmployeeTableComponent, MaterialTableComponent } from './components';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTableModule } from '@angular/material/table';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { TablesDynamicPageComponent } from './containers';
+import { NutritionTableComponent } from './components';
+import { MatChipsModule } from '@angular/material/chips';
+import { CustomTableComponent } from './components/custom-table/custom-table.component';
+import { BreadcrumbComponent, SettingsMenuComponent } from '../../../shared/ui-elements';
+
+@NgModule({
+  declarations: [
+    TablesBasicPageComponent,
+    EmployeeTableComponent,
+    MaterialTableComponent,
+    TablesDynamicPageComponent,
+    NutritionTableComponent,
+    CustomTableComponent
+  ],
+    imports: [
+        CommonModule,
+        TablesRoutingModule,
+        MatCardModule,
+        MatIconModule,
+        MatTableModule,
+        MatInputModule,
+        MatButtonModule,
+        MatCheckboxModule,
+        MatPaginatorModule,
+        BreadcrumbComponent,
+        SettingsMenuComponent,
+        MatToolbarModule,
+        MatChipsModule
+    ]
+})
+export class TablesModule { }
diff --git a/src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.html b/src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.html
new file mode 100644
index 0000000..819771b
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.html
@@ -0,0 +1,93 @@
+<app-breadcrumb [path]="routes.BADGE"></app-breadcrumb>
+
+<div class="content-wrapper">
+  <mat-card appearance="outlined" class="badge-card">
+    <mat-card-title>
+      <p>Badge Example</p>
+    </mat-card-title>
+    <mat-card-subtitle class="subtitle">
+      <p>Badge generates a small badge to the top-right of its child(ren)</p>
+    </mat-card-subtitle>
+
+    <mat-card-content>
+      <h1 class="text h1" matBadge="Primary" matBadgeSize="medium" matBadgePosition="above after" matBadgeOverlap="false" matBadgeColor="primary">Example heading</h1>
+      <h2 class="text" matBadge="Accent" matBadgeSize="medium" matBadgePosition="after" matBadgeOverlap="false" matBadgeColor="accent">Example heading</h2>
+      <h3 class="text" matBadge="Warn" matBadgeSize="medium" matBadgeOverlap="false" matBadgeColor="warn">Example heading</h3>
+      <h4 class="text" matBadge="Info" matBadgeSize="medium" matBadgeOverlap="false" matBadgeColor="info">Example heading</h4>
+      <h5 class="text" matBadge="Success" matBadgeSize="medium" matBadgeOverlap="false" matBadgeColor="success">Example heading</h5>
+      <h6 class="text" matBadge="Primary light" matBadgeSize="medium" matBadgeOverlap="false" matBadgeColor="primary-light">Example heading</h6>
+
+      <mat-card-subtitle class="second-subtitle">
+        <p>Badges can be used as part of links or buttons to provide a counter.</p>
+      </mat-card-subtitle>
+
+      <button mat-raised-button matBadge="1" matBadgeSize="medium" matBadgeOverlap="false" matBadgeColor="success">Example heading</button>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="icon-badge-card">
+    <mat-card-title>
+      <p>Icon Badges</p>
+    </mat-card-title>
+    <mat-card-subtitle>
+      <p>Badge can also be used as a parent of a icon as well as a parent of a clickable icon</p>
+    </mat-card-subtitle>
+
+    <mat-card-content>
+      <div class="icon-badge-wrapper">
+        <mat-icon matBadge="4" matBadgeSize="small" matBadgeColor="primary" class="icon-badge">email</mat-icon>
+        <mat-icon matBadge="10" matBadgeSize="small" matBadgeColor="warn" class="icon-badge">email</mat-icon>
+        <mat-icon matBadge="4" matBadgeSize="small" matBadgeColor="accent" class="icon-badge">email</mat-icon>
+      </div>
+
+      <div class="tabs-badge-wrapper">
+        <mat-tab-group mat-stretch-tabs>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <p matBadge="4" matBadgeSize="small" matBadgeColor="warn" class="tab-title">Item One</p>
+            </ng-template>
+            <div class="empty-block"></div>
+          </mat-tab>
+          <mat-tab label="Item Two">
+            <div class="empty-block"></div>
+          </mat-tab>
+          <mat-tab label="Item Three">
+            <div class="empty-block"></div>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+
+      <mat-card-subtitle class="second-subtitle">
+        <p>
+          You can use the matBadgePosition properties to move the badge to any corner of the wrapped element.
+        </p>
+      </mat-card-subtitle>
+
+      <div class="icon-badge-wrapper">
+        <mat-icon class="icon-badge" matBadge="4" matBadgeSize="small" matBadgeColor="success">shopping_cart</mat-icon>
+        <mat-icon class="icon-badge" matBadge="10" matBadgeSize="small" matBadgeColor="accent" matBadgePosition="below after">shopping_cart</mat-icon>
+        <mat-icon class="icon-badge" matBadge="4" matBadgeSize="small" matBadgeColor="warn" matBadgePosition="before">shopping_cart</mat-icon>
+      </div>
+
+    </mat-card-content>
+  </mat-card>
+</div>
+
+<mat-card appearance="outlined" class="chips-card">
+  <mat-card-title>
+    <p>Chips</p>
+  </mat-card-title>
+  <mat-card-subtitle>
+    <p>Chips allow users to enter information, make selections, filter content, or trigger actions.</p>
+  </mat-card-subtitle>
+
+  <mat-card-content>
+    <mat-chip-listbox aria-label="Fish selection">
+      <mat-chip-option color="primary" selected>Primary</mat-chip-option>
+      <mat-chip-option color="warn" selected>Warning</mat-chip-option>
+      <mat-chip-option color="accent" selected>Accent</mat-chip-option>
+      <mat-chip-option color="info" class="mat-info" selected>Info</mat-chip-option>
+      <mat-chip-option color="success" class="mat-success" selected>Success</mat-chip-option>
+    </mat-chip-listbox>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.scss b/src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.scss
new file mode 100644
index 0000000..c986974
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.scss
@@ -0,0 +1,116 @@
+@use "src/app/styles/variables" as *;
+
+.content-wrapper {
+  margin-top: 36px;
+  display: flex;
+  align-items: flex-start;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.badge-card {
+  width: 50%;
+  margin-right: 18px;
+  min-width: 0;
+
+  .subtitle {
+    margin-bottom: 22px;
+  }
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin-right: 0;
+  }
+}
+
+.second-subtitle {
+  padding-top: 24px;
+}
+
+.icon-badge-card {
+  width: 50%;
+  margin-left: 18px;
+  min-width: 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
+
+.icon-badge-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.icon-badge + .icon-badge {
+  margin-left: 16px;
+}
+
+.tabs-badge-wrapper {
+  margin: 16px 0;
+
+  // MDC tab wrappers clip absolutely positioned badge content by default.
+  // Keep overflow visible only for this demo block.
+  ::ng-deep .mat-mdc-tab-header,
+  ::ng-deep .mat-mdc-tab-label-container,
+  ::ng-deep .mat-mdc-tab-list,
+  ::ng-deep .mat-mdc-tab-labels,
+  ::ng-deep .mat-mdc-tab,
+  ::ng-deep .mdc-tab,
+  ::ng-deep .mdc-tab__content,
+  ::ng-deep .mdc-tab__text-label {
+    overflow: visible !important;
+  }
+}
+
+.tab-title {
+  margin: 0;
+  width: 100%;
+
+  & span.mat-badge-content {
+    margin-right: -8px !important;
+    top: -10px !important;
+    padding: 0;
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    font-size: 10px;
+  }
+}
+
+.empty-block {
+  width: 100%;
+  height: 1px;
+}
+
+.text {
+  width: fit-content;
+  margin: 24px 0;
+}
+
+// Counter badge on the demo button should stay compact.
+.badge-card button.mat-badge .mat-badge-content {
+  min-width: 14px !important;
+  min-height: 14px !important;
+  width: 14px !important;
+  height: 14px !important;
+  line-height: 14px !important;
+  font-size: 10px !important;
+  padding: 0 !important;
+}
+
+.h1 {
+  @media (max-width: $normal) {
+    display: none;
+  }
+}
+
+.chips-card {
+  margin-top: 36px;
+}
diff --git a/src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.ts b/src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.ts
new file mode 100644
index 0000000..fcfb515
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/badge-page/badge-page.component.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-badge-page',
+    templateUrl: './badge-page.component.html',
+    styleUrls: ['./badge-page.component.scss'],
+    standalone: false
+})
+export class BadgePageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.html b/src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.html
new file mode 100644
index 0000000..d31ea5c
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.html
@@ -0,0 +1,118 @@
+<app-breadcrumb [path]="routes.CARDS"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="first-card">
+  <mat-card-content class="first-card-content">
+    <h3 class="title">13 Mar</h3>
+
+    <p class="subtitle">Lifestyle brand</p>
+    <p class="text">
+      A lifestyle brand is a company that markets its products or services to embody the interests,
+      attitudes, and opinions of a group or a culture. Lifestyle brands seek to inspire, guide, and
+      motivate people, with the goal of their products contributing to the definition of the consumer's
+      way of life.
+    </p>
+
+    <button mat-flat-button color="primary">learn more</button>
+  </mat-card-content>
+</mat-card>
+
+<div class="cards-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title class="image-wrapper">
+      <img class="img" src="./assets/ui-elements/cards/candy.png" alt="isometric">
+    </mat-card-title>
+    <mat-card-content class="content">
+      <h3 class="title">Lizard</h3>
+      <p class="text">
+        Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across
+        all continents except Antarctica
+      </p>
+
+      <button mat-raised-button color="primary">Share</button>
+      <button mat-raised-button color="warn">Learn more</button>
+    </mat-card-content>
+  </mat-card>
+
+  <div style="width: 100%;">
+    <mat-card appearance="outlined" style="margin-bottom: 48px">
+      <mat-card-title>
+        <div class="text-title"><p>Avr Rating</p><p>All Time</p></div>
+      </mat-card-title>
+      <mat-card-content class="stars-content">
+        <div class="content-stars-wrapper">
+          <div class="stars-wrapper">
+            <mat-icon class="star">star</mat-icon>
+            <mat-icon class="star">star</mat-icon>
+            <mat-icon class="star">star</mat-icon>
+            <mat-icon class="star">star</mat-icon>
+            <mat-icon class="star">star</mat-icon>
+          </div>
+          <p class="stars-title">342 REVIEWS</p>
+        </div>
+
+        <p class="percent">69%</p>
+        <p class="title-percent">of customers recommend this product</p>
+
+        <button mat-raised-button color="success">write a review</button>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined" class="fourth-card">
+      <mat-card-title>
+        <div class="title-wrapper">
+          <div class="title-content">
+            <button mat-mini-fab class="avatar" color="primary">R</button>
+            <div>
+              <p class="title">Weekly Inspiration</p>
+              <p class="subtitle">September 14, 2016</p>
+            </div>
+          </div>
+
+          <button mat-mini-fab class="settings">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+        </div>
+      </mat-card-title>
+      <mat-card-content>
+        <div class="img-wrapper">
+          <img class="img" src="./assets/ui-elements/cards/city.png" alt="mountains">
+        </div>
+
+        <div class="content-wrapper">
+          <p>There are at least 109 mountains on Earts with elevations greeter than 7,200 meters</p>
+
+
+          <button mat-mini-fab class="settings">
+            <mat-icon>favorite</mat-icon>
+          </button>
+          <button mat-mini-fab class="settings">
+            <mat-icon>share</mat-icon>
+          </button>
+        </div>
+
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <mat-card appearance="outlined" class="fifth-card">
+    <mat-card-title>
+      <div class="image-wrapper">
+        <img class="img" src="./assets/ui-elements/cards/rns.png" alt="rns">
+      </div>
+    </mat-card-title>
+    <mat-card-content>
+      <div class="content-wrapper">
+        <h3 class="content-title">Technology</h3>
+        <p class="content-subtitle">React Native Starter</p>
+      </div>
+    </mat-card-content>
+
+    <mat-card-footer class="footer">
+      <div class="footer-wrapper">
+        <p class="footer-title">from $49.95</p>
+        <button mat-raised-button color="success">Read more</button>
+      </div>
+    </mat-card-footer>
+  </mat-card>
+</div>
+
diff --git a/src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.scss b/src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.scss
new file mode 100644
index 0000000..21c7170
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.scss
@@ -0,0 +1,320 @@
+@use './src/app/styles/font' as *;
+@use './src/app/styles/variables' as *;
+
+.first-card {
+  margin: 24px 0;
+  height: 460px;
+  background-size: cover;
+  background: url("/assets/ui-elements/cards/mac.png") round;
+  color: $white;
+
+  @media (max-width: $small) {
+    background: url("/assets/ui-elements/cards/mac.png");
+  }
+
+  .title {
+    font-size: $fs-normal;
+    font-weight: $fw-lighter;
+  }
+
+  .subtitle {
+    font-size: $fs-medium;
+    font-weight: $fw-lighter;
+    margin-bottom: 0;
+  }
+
+  .text {
+    font-size: $fs-small;
+    font-weight: $fw-lighter;
+    margin-top: 10px;
+  }
+
+  .button {
+    font-size: 13px;
+    font-weight: $fw-normal;
+    text-transform: uppercase;
+    color: $white;
+    padding: 4px 5px;
+    line-height: 22px;
+    margin-top: 24px;
+    background-color: transparent;
+  }
+}
+
+.first-card-content {
+  width: 50%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.cards-wrapper {
+  display: flex;
+  margin-top: 48px;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.card {
+  padding: 0;
+  width: 100%;
+  overflow: hidden;
+  height: fit-content;
+}
+
+.card + div {
+  margin-left: 48px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
+
+div + mat-card {
+  margin-left: 48px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
+
+.image-wrapper {
+  height: auto;
+}
+
+.img {
+  width: 100%;
+}
+
+.content {
+  padding: 16px;
+
+  .title {
+    font-size: $fs-medium;
+    font-weight: $fw-lighter;
+    color: $dark-grey;
+    margin-bottom: 8px;
+  }
+
+  .text {
+    font-size: $fs-small;
+    font-weight: $fw-lighter;
+    color: $dark-grey;
+    margin-bottom: 32px;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    line-height: 1.43;
+    letter-spacing: 0.48px;
+  }
+
+  button + button {
+    margin-left: 16px;
+
+    @media (min-width: $small) and (max-width: ($normal - 1px)) {
+      margin-left: 0;
+      margin-top: 8px;
+    }
+  }
+}
+
+.text-title {
+  border-bottom: 1px solid $black-12;
+  padding-bottom: 10px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+
+  p {
+    font-size: $fs-regular;
+    margin: 0;
+
+    &:first-child {
+      color: $green;
+    }
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+
+  p + p {
+    margin-left: 8px;
+  }
+}
+
+.stars-content {
+  margin-top: 24px;
+  padding: 0;
+}
+
+.content-stars-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.stars-wrapper {
+  line-height: 9px;
+}
+
+.star {
+  font-size: $fs-large;
+  color: $yellow;
+  padding: 0;
+}
+
+.stars-title {
+  font-size: $fs-small;
+  font-weight: $fw-lighter;
+  margin: 0;
+  color: $dark-grey;
+}
+
+.percent {
+  font-weight: $fw-lighter;
+  font-size: $fs-medium;
+  color: $green;
+  margin: 0;
+}
+
+.title-percent {
+  font-size: $fs-small;
+  font-weight: $fw-lighter;
+  margin-bottom: 32px;
+  color: $dark-grey;
+}
+
+.fourth-card {
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+  padding: 0;
+  /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+  mat-card-title {
+    margin: 0;
+  }
+
+  .title-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+  }
+
+  .title-content {
+    display: flex;
+    align-items: center;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    margin-right: 16px;
+    box-shadow: none;
+    font-size: $fs-regular;
+  }
+
+  .title{
+    font-size: $fs-small;
+    font-weight: $fw-lighter;
+    color: $dark-grey;
+    margin: 0;
+  }
+
+  .subtitle {
+    font-size: $fs-small;
+    font-weight: $fw-lighter;
+    color: $grey;
+    margin: 0;
+  }
+
+  .settings {
+    width: 40px;
+    height: 40px;
+    box-shadow: none;
+    font-size: $fs-regular;
+    background-color: transparent;
+    color: $light-grey;
+
+    &:hover {
+      background-color: $black-04;
+    }
+  }
+
+  .img-wrapper {
+    height: auto;
+  }
+
+  .img {
+    width: 100%;
+  }
+
+  .content-wrapper {
+    padding: 16px;
+  }
+}
+
+.fifth-card {
+  width: 100%;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+  padding: 0;
+  height: fit-content;
+  overflow: hidden;
+  /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+  mat-card-title {
+    margin: 0;
+  }
+
+  .image-wrapper {
+    height: auto;
+  }
+
+  .img {
+    width: 100%;
+  }
+  /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+  mat-card-content {
+    margin: 0;
+  }
+
+  .content-wrapper {
+    padding: 16px;
+  }
+
+  .content-title {
+    font-size: $fs-medium;
+    font-weight: $fw-lighter;
+    color: $dark-grey;
+    margin-bottom: 8px;
+  }
+
+  .content-subtitle {
+    font-size: $fs-small;
+    font-weight: $fw-lighter;
+    color: $dark-grey;
+    margin: 0;
+  }
+
+  .footer {
+    margin: 0;
+    border-top: 1px solid $black-08;
+  }
+
+  .footer-wrapper {
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .footer-title {
+      font-size: $fs-normal;
+      font-weight: $fw-lighter;
+      color: $dark-grey;
+      margin: 0;
+    }
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.ts b/src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.ts
new file mode 100644
index 0000000..120ec5e
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/cards-page/cards-page.component.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-cards-page',
+    templateUrl: './cards-page.component.html',
+    styleUrls: ['./cards-page.component.scss'],
+    standalone: false
+})
+export class CardsPageComponent {
+  public routes: typeof routes = routes
+}
diff --git a/src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.html b/src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.html
new file mode 100644
index 0000000..9f93957
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.html
@@ -0,0 +1,15 @@
+<app-breadcrumb [path]="routes.CAROUSEL"></app-breadcrumb>
+
+<div class="small-carousels-wrapper">
+  <mat-card appearance="outlined" class="small-carousel-card">
+    <app-carousel [slides]="digCarouselSlides" aspectRatio="16 / 10"></app-carousel>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="small-carousel-card">
+    <app-carousel [slides]="digCarouselSlides" aspectRatio="16 / 10"></app-carousel>
+  </mat-card>
+</div>
+
+<mat-card appearance="outlined" class="big-carousel-card">
+  <app-carousel [slides]="firstSmallCarousel" aspectRatio="16 / 7"></app-carousel>
+</mat-card>
diff --git a/src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.scss b/src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.scss
new file mode 100644
index 0000000..830b4dc
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.scss
@@ -0,0 +1,24 @@
+@use "src/app/styles/variables" as *;
+
+.small-carousels-wrapper {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.small-carousel-card {
+  width: 48%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.big-carousel-card, .small-carousel-card {
+  margin-top: 36px;
+  padding: 0;
+  overflow: hidden;
+}
diff --git a/src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.ts b/src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.ts
new file mode 100644
index 0000000..113c2fd
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/carousel-page/carousel-page.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { routes } from '../../../../../consts';
+import { CarouselSlide } from '../../../../../shared/ui-elements';
+
+@Component({
+    selector: 'app-carousel-page',
+    templateUrl: './carousel-page.component.html',
+    styleUrls: ['./carousel-page.component.scss'],
+    standalone: false
+})
+export class CarouselPageComponent {
+  public routes: typeof routes = routes;
+  public digCarouselSlides: CarouselSlide[] = [
+    {src: './assets/carousel/big-1.png', alt: 'Alaska', text: 'Alaska - Glacier Bay National Park, United States'},
+    {src: './assets/carousel/big-2.png', alt: 'San Francisco', text: 'San Francisco – Oakland Bay Bridge, United States'},
+    {src: './assets/carousel/big-3.png', alt: 'Bali', text: 'Bali, Indonesia'}
+  ];
+  public firstSmallCarousel: CarouselSlide[] = [
+    {src: './assets/carousel/small-1.png', alt: 'Alaska', text: 'Alaska - Glacier Bay National Park, United States'},
+    {src: './assets/carousel/small-2.png', alt: 'San Francisco', text: 'San Francisco – Oakland Bay Bridge, United States'},
+    {src: './assets/carousel/small-3.png', alt: 'Bali', text: 'Bali, Indonesia'}
+  ];
+}
diff --git a/src/app/modules/templates/ui-elements/components/error-toastr/error-toastr.component.html b/src/app/modules/templates/ui-elements/components/error-toastr/error-toastr.component.html
new file mode 100644
index 0000000..1b0ecc1
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/error-toastr/error-toastr.component.html
@@ -0,0 +1,16 @@
+<div class="toastr-wrapper">
+  <div class="toastr-content">
+    <div class="toastr-wrapper-icon">
+      <mat-icon class="toastr-icon">email</mat-icon>
+    </div>
+    <p class="toastr-content__title">Message was not sent!</p>
+  </div>
+  <button
+    type="button"
+    class="toastr-wrapper-icon toastr-close-button"
+    aria-label="Close notification"
+    (click)="remove()"
+  >
+    <mat-icon class="toastr-icon">close</mat-icon>
+  </button>
+</div>
diff --git a/src/app/modules/templates/ui-elements/components/error-toastr/error-toastr.component.scss b/src/app/modules/templates/ui-elements/components/error-toastr/error-toastr.component.scss
new file mode 100644
index 0000000..c1b2ecb
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/error-toastr/error-toastr.component.scss
@@ -0,0 +1,33 @@
+@use '../../../../../styles/colors' as *;
+@use '../../../../../styles/toasrt' as *;
+
+.toastr-wrapper {
+  @include toastr-wrapper;
+}
+
+.toastr-wrapper-icon {
+  @include toastr-wrapper-icon;
+}
+
+.toastr-close-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.toastr-content {
+  @include toastr-content;
+
+  &__title {
+    @include toastr-content-title;
+  }
+}
+
+.toastr-icon {
+  @include toastr-icon;
+}
+
+:host {
+  @include toastr($pink);
+}
diff --git a/src/app/modules/templates/ui-elements/components/error-toastr/error-toastr.component.ts b/src/app/modules/templates/ui-elements/components/error-toastr/error-toastr.component.ts
new file mode 100644
index 0000000..3a07e44
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/error-toastr/error-toastr.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Toast } from 'ngx-toastr';
+
+@Component({
+    selector: 'app-error-toastr',
+    templateUrl: './error-toastr.component.html',
+    styleUrls: ['./error-toastr.component.scss'],
+    animations: [
+        trigger('flyInOut', [
+            state('inactive', style({ opacity: 0 })),
+            state('active', style({ opacity: 1 })),
+            state('removed', style({ opacity: 0 })),
+            transition('inactive => active', animate('{{ easeTime }}ms {{ easing }}')),
+            transition('active => removed', animate('{{ easeTime }}ms {{ easing }}'))
+        ])
+    ],
+    preserveWhitespaces: false,
+    standalone: false
+})
+export class ErrorToastrComponent extends Toast {
+}
diff --git a/src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.html b/src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.html
new file mode 100644
index 0000000..a7a6d85
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.html
@@ -0,0 +1,36 @@
+<app-breadcrumb [path]="routes.ICONS"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="icons-wrapper">
+  <mat-tab-group color="primary">
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <p class="tab-label">Material Icons</p>
+      </ng-template>
+
+      <div class="icons-content">
+        @for (iconName of materialIcons; track iconName) {
+          <div class="icons-content__icon-wrapper">
+            <mat-icon>{{toShakeCase(iconName)}}</mat-icon>
+            <span class="icons-content__icon-title">{{iconName}}</span>
+          </div>
+        }
+      </div>
+    </mat-tab>
+
+    <mat-tab>
+      <ng-template mat-tab-label>
+        <p class="tab-label">Font Awesome</p>
+      </ng-template>
+
+      <div class="icons-content">
+        @for (iconName of fontAwesomeIcons; track iconName) {
+          <div class="icons-content__icon-wrapper">
+            <mat-icon fontSet="fa fa-fs" fontIcon="{{toFontAwesomeText(iconName)}}"></mat-icon>
+            <span class="icons-content__icon-title">{{toFontAwesomeText(iconName)}}</span>
+          </div>
+        }
+      </div>
+    </mat-tab>
+  </mat-tab-group>
+</mat-card>
+
diff --git a/src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.scss b/src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.scss
new file mode 100644
index 0000000..25d0ae9
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.scss
@@ -0,0 +1,60 @@
+@use '../../../../../styles/colors' as *;
+@use '../../../../../styles/font' as *;
+
+.icons-wrapper {
+  padding:0;
+  margin-top: 24px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+}
+
+.tab-label {
+  margin: 0;
+  text-transform: uppercase;
+  padding: 0 16px;
+}
+
+.icons-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 50px 24px 16px 24px;
+
+  &__title {
+    font-weight: $fw-lighter;
+    font-size: $fs-xxxl;
+    color: $light-grey;
+    line-height: 1;
+    letter-spacing: -0.24992px;
+  }
+
+  &__button {
+    height: 41.6px;
+    width: 90.11px;
+    color: $white;
+    background-color: $pink;
+    line-height: 1.75;
+    font-size: $fs-normal;
+    font-weight: $fw-lighter;
+  }
+}
+
+.icons-content {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  overflow: hidden;
+  padding: 0 16px;
+
+  &__icon-wrapper {
+    width: 170px;
+    padding: 8px;
+    color: $grey;
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon-title {
+    padding-left: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.ts b/src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.ts
new file mode 100644
index 0000000..ef8d568
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/icons-page/icons-page.component.ts
@@ -0,0 +1,1046 @@
+import { Component } from '@angular/core';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-icons-page',
+    templateUrl: './icons-page.component.html',
+    styleUrls: ['./icons-page.component.scss'],
+    standalone: false
+})
+export class IconsPageComponent {
+  public routes: typeof routes = routes;
+
+  public materialIcons: string[] = [
+    'AccessAlarm',
+    'AccessAlarms',
+    'Accessibility',
+    'Accessible',
+    'AccessibleForward',
+    'AccessTime',
+    'AccountBalance',
+    'AccountBalanceWallet',
+    'AccountBox',
+    'AccountCircle',
+    'AcUnit',
+    'Adb',
+    'Adjust',
+    'AirlineSeatFlat',
+    'AirlineSeatFlatAngled',
+    'AirlineSeatIndividualSuite',
+    'AirlineSeatLegroomExtra',
+    'AirlineSeatLegroomNormal',
+    'AirlineSeatLegroomReduced',
+    'AirlineSeatReclineExtra',
+    'AirlineSeatReclineNormal',
+    'AirplanemodeActive',
+    'AirplanemodeInactive',
+    'Airplay',
+    'AirportShuttle',
+    'Alarm',
+    'Album',
+    'AllInbox',
+    'AllInclusive',
+    'AllOut',
+    'AlternateEmail',
+    'Android',
+    'Announcement',
+    'Apps',
+    'Archive',
+    'ArrowBack',
+    'ArrowBackIos',
+    'ArrowDownward',
+    'ArrowDropDown',
+    'ArrowDropDownCircle',
+    'ArrowDropUp',
+    'ArrowForward',
+    'ArrowForwardIos',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowRightAlt',
+    'ArrowUpward',
+    'ArtTrack',
+    'AspectRatio',
+    'Assessment',
+    'Assignment',
+    'AssignmentInd',
+    'AssignmentLate',
+    'AssignmentReturn',
+    'AssignmentReturned',
+    'AssignmentTurnedIn',
+    'Assistant',
+    'AssistantPhoto',
+    'Atm',
+    'AttachFile',
+    'Attachment',
+    'AttachMoney',
+    'Audiotrack',
+    'Autorenew',
+    'AvTimer',
+    'Backspace',
+    'Backup',
+    'Ballot',
+    'BarChart',
+    'BatteryAlert',
+    'BatteryChargingFull',
+    'BatteryFull',
+    'BatteryStd',
+    'BatteryUnknown',
+    'BeachAccess',
+    'Beenhere',
+    'Block',
+    'Bluetooth',
+    'BluetoothAudio',
+    'BluetoothConnected',
+    'BluetoothDisabled',
+    'BluetoothSearching',
+    'BlurCircular',
+    'BlurLinear',
+    'Book',
+    'Bookmark',
+    'BookmarkBorder',
+    'Bookmarks',
+    'BorderAll',
+    'BorderBottom',
+    'BorderClear',
+    'BorderColor',
+    'BorderHorizontal',
+    'BorderInner',
+    'BorderLeft',
+    'BorderOuter',
+    'BorderRight',
+    'BorderStyle',
+    'BorderTop',
+    'BorderVertical',
+    'BrandingWatermark',
+    'Brightness_1',
+    'Brightness_2',
+    'Brightness_3',
+    'Brightness_4',
+    'Brightness_5',
+    'Brightness_6',
+    'Brightness_7',
+    'BrightnessAuto',
+    'BrightnessHigh',
+    'BrightnessLow',
+    'BrightnessMedium',
+    'BrokenImage',
+    'Brush',
+    'BubbleChart',
+    'BugReport',
+    'Build',
+    'BurstMode',
+    'Business',
+    'BusinessCenter',
+    'Cached',
+    'Cake',
+    'CalendarToday',
+    'CalendarViewDay',
+    'Call',
+    'CallEnd',
+    'CallMade',
+    'CallMerge',
+    'CallMissed',
+    'CallMissedOutgoing',
+    'CallReceived',
+    'CallSplit',
+    'CallToAction',
+    'Camera',
+    'CameraAlt',
+    'CameraEnhance',
+    'CameraFront',
+    'CameraRear',
+    'CameraRoll',
+    'Cancel',
+    'CancelPresentation',
+    'CardGiftcard',
+    'CardMembership',
+    'CardTravel',
+    'Casino',
+    'Cast',
+    'CastConnected',
+    'CastForEducation',
+    'Category',
+    'CellWifi',
+    'CenterFocusStrong',
+    'CenterFocusWeak',
+    'ChangeHistory',
+    'Chat',
+    'ChatBubble',
+    'ChatBubbleOutline',
+    'Check',
+    'CheckBox',
+    'CheckBoxOutlineBlank',
+    'CheckCircle',
+    'CheckCircleOutline',
+    'ChevronLeft',
+    'ChevronRight',
+    'ChildCare',
+    'ChildFriendly',
+    'ChromeReaderMode',
+    'Class',
+    'Clear',
+    'ClearAll',
+    'Close',
+    'ClosedCaption',
+    'Cloud',
+    'CloudCircle',
+    'CloudDone',
+    'CloudDownload',
+    'CloudQueue',
+    'CloudUpload',
+    'Code',
+    'Collections',
+    'CollectionsBookmark',
+    'Colorize',
+    'ColorLens',
+    'Comment',
+    'Commute',
+    'Compare',
+    'CompareArrows',
+    'CompassCalibration',
+    'Computer',
+    'ConfirmationNumber',
+    'ContactMail',
+    'ContactPhone',
+    'Contacts',
+    'ContactSupport',
+    'ControlCamera',
+    'ControlPoint',
+    'ControlPointDuplicate',
+    'Copyright',
+    'Create',
+    'CreditCard',
+    'Crop',
+    'Crop_16_9',
+    'Crop_3_2',
+    'Crop_5_4',
+    'Crop_7_5',
+    'CropDin',
+    'CropFree',
+    'CropLandscape',
+    'CropOriginal',
+    'CropPortrait',
+    'CropRotate',
+    'CropSquare',
+    'Dashboard',
+    'DataUsage',
+    'DateRange',
+    'Dehaze',
+    'Delete',
+    'DeleteForever',
+    'DeleteOutline',
+    'DeleteSweep',
+    'DepartureBoard',
+    'Description',
+    'DesktopAccessDisabled',
+    'DesktopMac',
+    'DesktopWindows',
+    'Details',
+    'DeveloperBoard',
+    'DeveloperMode',
+    'DeviceHub',
+    'Devices',
+    'DevicesOther',
+    'DeviceUnknown',
+    'DialerSip',
+    'Dialpad',
+    'Directions',
+    'DirectionsBike',
+    'DirectionsBoat',
+    'DirectionsBus',
+    'DirectionsCar',
+    'DirectionsRailway',
+    'DirectionsRun',
+    'DirectionsSubway',
+    'DirectionsTransit',
+    'DirectionsWalk',
+    'DiscFull',
+    'Dns',
+    'Dock',
+    'Domain',
+    'DomainDisabled',
+    'Done',
+    'DoneAll',
+    'DoneOutline',
+    'DonutLarge',
+    'DonutSmall',
+    'Drafts',
+    'DragHandle',
+    'DragIndicator',
+    'DriveEta',
+    'Duo',
+    'Dvr',
+    'Edit',
+    'EditAttributes',
+    'EditLocation',
+    'Eject',
+    'Email',
+    'EnhancedEncryption',
+    'Equalizer',
+    'Error',
+    'ErrorOutline',
+    'EuroSymbol',
+    'Event',
+    'EventAvailable',
+    'EventBusy',
+    'EventNote',
+    'EventSeat',
+    'EvStation',
+    'ExitToApp',
+    'ExpandLess',
+    'ExpandMore',
+    'Explicit',
+    'Explore',
+    'Exposure',
+    'ExposureNeg1',
+    'ExposureNeg2',
+    'ExposurePlus1',
+    'ExposurePlus2',
+    'ExposureZero',
+    'Extension',
+    'Face',
+    'Fastfood',
+    'FastForward',
+    'FastRewind',
+    'Favorite',
+    'FavoriteBorder',
+    'FeaturedPlayList',
+    'FeaturedVideo',
+    'Feedback',
+    'FiberDvr',
+    'FiberManualRecord',
+    'FiberPin',
+    'FiberSmartRecord',
+    'FileCopy',
+    'Filter',
+    'Filter1',
+    'Filter2',
+    'Filter3',
+    'Filter4',
+    'Filter5',
+    'Filter6',
+    'Filter7',
+    'Filter8',
+    'Filter9',
+    'Filter9Plus',
+    'FilterBAndW',
+    'FilterCenterFocus',
+    'FilterDrama',
+    'FilterFrames',
+    'FilterHdr',
+    'FilterList',
+    'FilterNone',
+    'FilterTiltShift',
+    'FilterVintage',
+    'FindInPage',
+    'FindReplace',
+    'Fingerprint',
+    'FirstPage',
+    'FitnessCenter',
+    'Flag',
+    'Flare',
+    'FlashAuto',
+    'Flight',
+    'FlightLand',
+    'FlightTakeoff',
+    'Flip',
+    'FlipToBack',
+    'FlipToFront',
+    'Folder',
+    'FolderOpen',
+    'FolderShared',
+    'FolderSpecial',
+    'FontDownload',
+    'FormatAlignCenter',
+    'FormatAlignJustify',
+    'FormatAlignLeft',
+    'FormatAlignRight',
+    'FormatBold',
+    'FormatClear',
+    'FormatColorFill',
+    'FormatColorReset',
+    'FormatColorText',
+    'FormatIndentDecrease',
+    'FormatIndentIncrease',
+    'FormatItalic',
+    'FormatLineSpacing',
+    'FormatListBulleted',
+    'FormatListNumbered',
+    'FormatListNumberedRtl',
+    'FormatPaint',
+    'FormatQuote',
+    'FormatShapes',
+    'FormatSize',
+    'FormatStrikethrough',
+    'FormatTextdirectionLToR',
+    'FormatTextdirectionRToL',
+    'FormatUnderlined',
+    'Forum',
+    'Forward',
+    'Forward10',
+    'Forward30',
+    'Forward5',
+    'FourK',
+    'FreeBreakfast',
+    'Fullscreen',
+    'FullscreenExit',
+    'Functions',
+    'Gamepad',
+    'Games',
+    'Gavel',
+    'Gesture',
+    'GetApp',
+    'Gif',
+    'GolfCourse',
+    'GpsFixed',
+    'GpsNotFixed',
+    'Grade',
+    'Gradient',
+    'Grain',
+    'GraphicEq',
+    'Group',
+    'GroupWork',
+    'GTranslate',
+    'Hd',
+    'HdrStrong',
+    'HdrWeak',
+    'Headset',
+    'HeadsetMic',
+    'Healing',
+    'Hearing',
+    'Help',
+    'HelpOutline',
+    'Highlight',
+    'HighQuality',
+    'History',
+    'Home',
+    'HorizontalSplit',
+    'Hotel',
+    'HotTub',
+    'HourglassEmpty',
+    'HourglassFull',
+    'HowToReg',
+    'HowToVote',
+    'Http',
+    'Https',
+    'Image',
+    'ImageAspectRatio',
+    'ImageSearch',
+    'ImportantDevices',
+    'ImportContacts',
+    'ImportExport',
+    'Inbox',
+    'IndeterminateCheckBox',
+    'Info',
+    'Input',
+    'InsertChart',
+    'InsertComment',
+    'InsertDriveFile',
+    'InsertEmoticon',
+    'InsertInvitation',
+    'InsertLink',
+    'InsertPhoto',
+    'InvertColors',
+    'Iso',
+    'Keyboard',
+    'KeyboardArrowDown',
+    'KeyboardArrowLeft',
+    'KeyboardArrowRight',
+    'KeyboardArrowUp',
+    'KeyboardBackspace',
+    'KeyboardCapslock',
+    'KeyboardHide',
+    'KeyboardReturn',
+    'KeyboardTab',
+    'KeyboardVoice',
+    'Kitchen',
+    'Label',
+    'LabelImportant',
+    'Landscape',
+    'Language',
+    'Laptop',
+    'LaptopChromebook',
+    'LaptopMac',
+    'LaptopWindows',
+    'LastPage',
+    'Launch',
+    'Layers',
+    'LayersClear',
+    'LeakRemove',
+    'Lens',
+    'LibraryBooks',
+    'LibraryMusic',
+    'LinearScale',
+    'LineStyle',
+    'LineWeight',
+    'Link',
+    'LinkedCamera',
+    'List',
+    'ListAlt',
+    'LiveHelp',
+    'LiveTv',
+    'LocalActivity',
+    'LocalAirport',
+    'LocalAtm',
+    'LocalBar',
+    'LocalCafe',
+    'LocalCarWash',
+    'LocalConvenienceStore',
+    'LocalDining',
+    'LocalDrink',
+    'LocalFlorist',
+    'LocalGasStation',
+    'LocalGroceryStore',
+    'LocalHospital',
+    'LocalHotel',
+    'LocalLaundryService',
+    'LocalLibrary',
+    'LocalMall',
+    'LocalMovies',
+    'LocalParking',
+    'LocalPharmacy',
+    'LocalPhone',
+    'LocalPizza',
+    'LocalPlay',
+    'LocalPrintshop',
+    'LocalSee',
+    'LocalShipping',
+    'LocalTaxi',
+    'LocationCity',
+    'LocationDisabled',
+    'LocationSearching',
+    'Lock',
+    'LockOpen',
+    'Looks',
+    'Looks3',
+    'Looks4',
+    'Looks5',
+    'Looks6',
+    'LooksTwo',
+    'Loop',
+    'Loupe',
+    'LowPriority',
+    'Loyalty',
+    'Mail',
+    'MailOutline',
+    'Map',
+    'Markunread',
+    'MarkunreadMailbox',
+    'Maximize',
+    'MeetingRoom',
+    'Memory',
+    'Menu',
+    'MergeType',
+    'Message',
+    'Mic',
+    'MicNone',
+    'Minimize',
+    'MissedVideoCall',
+    'Mms',
+    'MobileFriendly',
+    'MobileScreenShare',
+    'ModeComment',
+    'Money',
+    'MonochromePhotos',
+    'Mood',
+    'MoodBad',
+    'More',
+    'MoreHoriz',
+    'MoreVert',
+    'Motorcycle',
+    'Mouse',
+    'MoveToInbox',
+    'Movie',
+    'MovieCreation',
+    'MovieFilter',
+    'MultilineChart',
+    'MusicNote',
+    'MusicVideo',
+    'MyLocation',
+    'Nature',
+    'NaturePeople',
+    'NavigateBefore',
+    'NavigateNext',
+    'Navigation',
+    'NearMe',
+    'NetworkCell',
+    'NetworkCheck',
+    'NetworkLocked',
+    'NetworkWifi',
+    'NextWeek',
+    'Nfc',
+    'NoEncryption',
+    'NoMeetingRoom',
+    'NoSim',
+    'Note',
+    'Notes',
+    'NotificationImportant',
+    'Notifications',
+    'NotificationsActive',
+    'NotificationsNone',
+    'NotificationsPaused',
+    'NotInterested',
+    'NotListedLocation',
+    'Opacity',
+    'OpenInBrowser',
+    'OpenWith',
+    'Pages',
+    'Pageview',
+    'Palette',
+    'Panorama',
+    'PanoramaFishEye',
+    'PanoramaHorizontal',
+    'PanoramaVertical',
+    'PanoramaWideAngle',
+    'PanTool',
+    'PartyMode',
+    'Pause',
+    'PauseCircleFilled',
+    'PauseCircleOutline',
+    'PausePresentation',
+    'Payment',
+    'People',
+    'PeopleOutline',
+    'PermCameraMic',
+    'PermContactCalendar',
+    'PermDataSetting',
+    'PermDeviceInformation',
+    'PermIdentity',
+    'PermMedia',
+    'PermPhoneMsg',
+    'PermScanWifi',
+    'Person',
+    'PersonalVideo',
+    'PersonOutline',
+    'PersonPin',
+    'PersonPinCircle',
+    'Pets',
+    'Phone',
+    'PhoneAndroid',
+    'PhoneBluetoothSpeaker',
+    'PhoneCallback',
+    'PhoneForwarded',
+    'PhoneInTalk',
+    'PhoneIphone',
+    'Phonelink',
+    'PhonelinkErase',
+    'PhonelinkLock',
+    'PhonelinkRing',
+    'PhonelinkSetup',
+    'PhoneLocked',
+    'PhoneMissed',
+    'PhonePaused',
+    'Photo',
+    'PhotoAlbum',
+    'PhotoCamera',
+    'PhotoFilter',
+    'PhotoLibrary',
+    'PhotoSizeSelectActual',
+    'PhotoSizeSelectLarge',
+    'PhotoSizeSelectSmall',
+    'PictureAsPdf',
+    'PictureInPicture',
+    'PictureInPictureAlt',
+    'PieChart',
+    'PinDrop',
+    'Place',
+    'PlayArrow',
+    'PlayCircleFilled',
+    'PlayCircleFilledWhite',
+    'PlayCircleOutline',
+    'PlayForWork',
+    'PlaylistPlay',
+    'Poll',
+    'Polymer',
+    'Pool',
+    'Portrait',
+    'Power',
+    'PowerInput',
+    'PregnantWoman',
+    'PresentToAll',
+    'Print',
+    'PrintDisabled',
+    'PriorityHigh',
+    'Public',
+    'Publish',
+    'QueryBuilder',
+    'QuestionAnswer',
+    'Queue',
+    'QueueMusic',
+    'QueuePlayNext',
+    'Radio',
+    'RadioButtonChecked',
+    'RadioButtonUnchecked',
+    'RateReview',
+    'Receipt',
+    'RecentActors',
+    'RecordVoiceOver',
+    'Redeem',
+    'Redo',
+    'Refresh',
+    'Remove',
+    'RemoveCircle',
+    'RemoveCircleOutline',
+    'RemoveFromQueue',
+    'RemoveRedEye',
+    'RemoveShoppingCart',
+    'Reorder',
+    'Repeat',
+    'Replay',
+    'Replay10',
+    'Replay30',
+    'Replay5',
+    'Reply',
+    'ReplyAll',
+    'Report',
+    'ReportProblem',
+    'Restaurant',
+    'RestaurantMenu',
+    'Restore',
+    'RestoreFromTrash',
+    'RestorePage',
+    'RingVolume',
+    'Room',
+    'RoomService',
+    'Rotate90DegreesCcw',
+    'RotateLeft',
+    'RotateRight',
+    'Router',
+    'Rowing',
+    'RssFeed',
+    'RvHookup',
+    'Satellite',
+    'Save',
+    'SaveAlt',
+    'Scanner',
+    'ScatterPlot',
+    'Schedule',
+    'School',
+    'Score',
+    'ScreenLockLandscape',
+    'ScreenLockPortrait',
+    'ScreenLockRotation',
+    'ScreenRotation',
+    'ScreenShare',
+    'SdCard',
+    'SdStorage',
+    'Search',
+    'Security',
+    'SelectAll',
+    'Send',
+    'SentimentDissatisfied',
+    'SentimentSatisfied',
+    'SentimentSatisfiedAlt',
+    'SentimentVeryDissatisfied',
+    'SentimentVerySatisfied',
+    'Settings',
+    'SettingsApplications',
+    'SettingsBackupRestore',
+    'SettingsBluetooth',
+    'SettingsBrightness',
+    'SettingsCell',
+    'SettingsEthernet',
+    'SettingsInputAntenna',
+    'SettingsInputComponent',
+    'SettingsInputComposite',
+    'SettingsInputHdmi',
+    'SettingsInputSvideo',
+    'SettingsOverscan',
+    'SettingsPhone',
+    'SettingsPower',
+    'SettingsRemote',
+    'SettingsSystemDaydream',
+    'SettingsVoice',
+    'Share',
+    'Shop',
+    'ShoppingBasket',
+    'ShoppingCart',
+    'ShopTwo',
+    'ShortText',
+    'ShowChart',
+    'Shuffle',
+    'ShutterSpeed',
+    'SimCard',
+    'SkipNext',
+    'SkipPrevious',
+    'Slideshow',
+    'SlowMotionVideo',
+    'Smartphone',
+    'SmokeFree',
+    'SmokingRooms',
+    'Sms',
+    'SmsFailed',
+    'Snooze',
+    'Sort',
+    'SortByAlpha',
+    'Spa',
+    'SpaceBar',
+    'Speaker',
+    'SpeakerGroup',
+    'SpeakerNotes',
+    'SpeakerPhone',
+    'Spellcheck',
+    'Star',
+    'StarBorder',
+    'StarHalf',
+    'StarRate',
+    'Stars',
+    'StayCurrentLandscape',
+    'StayCurrentPortrait',
+    'StayPrimaryLandscape',
+    'StayPrimaryPortrait',
+    'Stop',
+    'StopScreenShare',
+    'Storage',
+    'Store',
+    'StoreMallDirectory',
+    'Straighten',
+    'Streetview',
+    'StrikethroughS',
+    'Style',
+    'SubdirectoryArrowLeft',
+    'SubdirectoryArrowRight',
+    'Subject',
+    'Subscriptions',
+    'Subtitles',
+    'Subway',
+    'SupervisedUserCircle',
+    'SupervisorAccount',
+    'SurroundSound',
+    'SwapCalls',
+    'SwapHoriz',
+    'SwapHorizontalCircle',
+    'SwapVert',
+    'SwapVerticalCircle',
+    'SwitchCamera',
+    'SwitchVideo',
+    'Sync',
+    'SyncDisabled',
+    'SyncProblem',
+    'SystemUpdate',
+    'Tab',
+    'TableChart',
+    'Tablet',
+    'TabletAndroid',
+    'TabletMac',
+    'TabUnselected',
+    'TagFaces',
+    'TapAndPlay',
+    'Terrain',
+    'TextFields',
+    'TextFormat',
+    'TextRotateUp',
+    'TextRotateVertical',
+    'TextRotationDown',
+    'TextRotationNone',
+    'Textsms',
+    'Texture',
+    'Theaters',
+    'ThreeDRotation',
+    'ThreeSixty',
+    'ThumbDown',
+    'ThumbDownAlt',
+    'ThumbsUpDown',
+    'ThumbUp',
+    'ThumbUpAlt',
+    'Timelapse',
+    'Timeline',
+    'Timer',
+    'Timer10',
+    'Timer3',
+    'TimeToLeave',
+    'Title',
+    'Toc',
+    'Today',
+    'Toll',
+    'Tonality',
+    'TouchApp',
+    'Toys',
+    'TrackChanges',
+    'Traffic',
+    'Train',
+    'Tram',
+    'TransferWithinAStation',
+    'Transform',
+    'TransitEnterexit',
+    'Translate',
+    'TrendingDown',
+    'TrendingFlat',
+    'TrendingUp',
+    'TripOrigin',
+    'Tune',
+    'TurnedIn',
+    'TurnedInNot',
+    'Tv',
+    'Unarchive',
+    'Undo',
+    'UnfoldLess',
+    'UnfoldMore',
+    'Unsubscribe',
+    'Update',
+    'Usb',
+    'VerifiedUser',
+    'VerticalAlignBottom',
+    'VerticalAlignCenter',
+    'VerticalAlignTop',
+    'VerticalSplit',
+    'Vibration',
+    'VideoCall',
+    'Videocam',
+    'VideogameAsset',
+    'VideoLabel',
+    'VideoLibrary',
+    'ViewAgenda',
+    'ViewArray',
+    'ViewCarousel',
+    'ViewColumn',
+    'ViewComfy',
+    'ViewCompact',
+    'ViewDay',
+    'ViewHeadline',
+    'ViewList',
+    'ViewModule',
+    'ViewQuilt',
+    'ViewStream',
+    'ViewWeek',
+    'Vignette',
+    'Visibility',
+    'VoiceChat',
+    'Voicemail',
+    'VolumeDown',
+    'VolumeMute',
+    'VolumeUp',
+    'VpnKey',
+    'VpnLock',
+    'Wallpaper',
+    'Warning',
+    'Watch',
+    'WatchLater',
+    'Waves',
+    'WbAuto',
+    'WbCloudy',
+    'WbIncandescent',
+    'WbIridescent',
+    'WbSunny',
+    'Wc',
+    'Web',
+    'WebAsset',
+    'Weekend',
+    'Whatshot',
+    'WhereToVote',
+    'Widgets',
+    'Wifi',
+    'WifiLock',
+    'WifiTethering',
+    'Work',
+    'WorkOutline',
+    'WrapText',
+    'YoutubeSearchedFor',
+    'ZoomIn',
+    'ZoomOut',
+    'ZoomOutMap',
+  ];
+
+  public fontAwesomeIcons: string[] = [
+    'Bed',
+    'Bank',
+    'Behance',
+    'Behance-square',
+    'Bomb',
+    'Building',
+    'Cab',
+    'Car',
+    'Child',
+    'Circle-o-notch',
+    'Circle-thin',
+    'Codepen',
+    'Cube',
+    'Cubes',
+    'Database',
+    'Delicious',
+    'Deviantart',
+    'Digg',
+    'Drupal',
+    'Empire',
+    'Envelope-square',
+    'Fax',
+    'File-archive-o',
+    'File-audio-o',
+    'File-code-o',
+    'File-excel-o',
+    'File-image-o',
+    'File-movie-o',
+    'File-pdf-o',
+    'File-photo-o',
+    'File-picture-o',
+    'File-powerpoint-o',
+    'File-sound-o',
+    'File-video-o',
+    'File-word-o',
+    'File-zip-o',
+    'Ge',
+    'Git',
+    'Git-square',
+    'Google',
+    'Graduation-cap',
+    'Hacker-news',
+    'Header',
+    'History',
+    'Institution',
+    'Joomla',
+    'Jsfiddle',
+    'Language',
+    'Life-bouy',
+    'Life-ring',
+    'Life-saver',
+    'Mortar-board',
+    'Openid',
+    'Paper-plane',
+    'paper-plane-o',
+    'Paragraph',
+    'Paw',
+    'Pied-piper',
+    'Pied-piper-alt',
+    'Pied-piper-square',
+    'Qq',
+    'Ra',
+    'Rebel',
+    'Recycle',
+    'Reddit',
+    'Reddit-square',
+    'Send',
+    'Send-o',
+    'Share-alt',
+    'Share-alt-square',
+    'Slack',
+    'Sliders',
+    'Soundcloud',
+    'Space-shuttle',
+    'Spoon',
+    'Spotify',
+    'Steam',
+    'Steam-square',
+    'Stumbleupon',
+    'Stumbleupon-circle',
+    'Support',
+    'Taxi',
+    'Tencent-weibo',
+    'Tree',
+    'University',
+    'Vine',
+    'Wechat',
+    'Weixin',
+    'Wordpress',
+    'Yahoo',
+  ];
+
+  public toShakeCase(name: string) {
+    return name[0].toLowerCase() + name.slice(1).replace(/[A-Z]/g, (m: string) => {
+      return '_' + m.toLowerCase();
+    });
+  }
+
+  public toFontAwesomeText(name: string): string {
+    return 'fa-' + name.toLowerCase();
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/components/index.ts b/src/app/modules/templates/ui-elements/components/index.ts
new file mode 100644
index 0000000..4eb1547
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/index.ts
@@ -0,0 +1,9 @@
+export * from './icons-page/icons-page.component';
+export * from './badge-page/badge-page.component';
+export * from './cards-page/cards-page.component';
+export * from './modal-page/modal-page.component';
+export * from './carousel-page/carousel-page.component';
+export * from './tooltips-page/tooltips-page.component';
+export * from './tabs-page/tabs-page.component';
+export * from './progress-page/progress-page.component';
+export * from './widget-page/widget-page.component';
diff --git a/src/app/modules/templates/ui-elements/components/info-toastr/info-toastr.component.html b/src/app/modules/templates/ui-elements/components/info-toastr/info-toastr.component.html
new file mode 100644
index 0000000..0c7413b
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/info-toastr/info-toastr.component.html
@@ -0,0 +1,16 @@
+<div class="toastr-wrapper">
+  <div class="toastr-content">
+    <div class="toastr-wrapper-icon">
+      <mat-icon class="toastr-icon">announcement</mat-icon>
+    </div>
+    <p class="toastr-content__title">New user feedback received</p>
+  </div>
+  <button
+    type="button"
+    class="toastr-wrapper-icon toastr-close-button"
+    aria-label="Close notification"
+    (click)="remove()"
+  >
+    <mat-icon class="toastr-icon">close</mat-icon>
+  </button>
+</div>
diff --git a/src/app/modules/templates/ui-elements/components/info-toastr/info-toastr.component.scss b/src/app/modules/templates/ui-elements/components/info-toastr/info-toastr.component.scss
new file mode 100644
index 0000000..19acf6a
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/info-toastr/info-toastr.component.scss
@@ -0,0 +1,33 @@
+@use '../../../../../styles/colors' as *;
+@use '../../../../../styles/toasrt' as *;
+
+.toastr-wrapper {
+  @include toastr-wrapper;
+}
+
+.toastr-wrapper-icon {
+  @include toastr-wrapper-icon;
+}
+
+.toastr-close-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.toastr-content {
+  @include toastr-content;
+
+  &__title {
+    @include toastr-content-title;
+  }
+}
+
+.toastr-icon {
+  @include toastr-icon;
+}
+
+:host {
+  @include toastr($blue);
+}
diff --git a/src/app/modules/templates/ui-elements/components/info-toastr/info-toastr.component.ts b/src/app/modules/templates/ui-elements/components/info-toastr/info-toastr.component.ts
new file mode 100644
index 0000000..59b256d
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/info-toastr/info-toastr.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Toast } from 'ngx-toastr';
+
+@Component({
+    selector: 'app-info-toastr',
+    templateUrl: './info-toastr.component.html',
+    styleUrls: ['./info-toastr.component.scss'],
+    animations: [
+        trigger('flyInOut', [
+            state('inactive', style({ opacity: 0 })),
+            state('active', style({ opacity: 1 })),
+            state('removed', style({ opacity: 0 })),
+            transition('inactive => active', animate('{{ easeTime }}ms {{ easing }}')),
+            transition('active => removed', animate('{{ easeTime }}ms {{ easing }}'))
+        ])
+    ],
+    preserveWhitespaces: false,
+    standalone: false
+})
+export class InfoToastrComponent extends Toast {
+}
diff --git a/src/app/modules/templates/ui-elements/components/modal-page/modal-page.component.html b/src/app/modules/templates/ui-elements/components/modal-page/modal-page.component.html
new file mode 100644
index 0000000..537bd56
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/modal-page/modal-page.component.html
@@ -0,0 +1,108 @@
+<app-breadcrumb [path]="routes.MODAL"></app-breadcrumb>
+
+<div class="content-wrapper">
+  <div class="content-block">
+    <mat-card appearance="outlined">
+      <mat-card-title>
+        <p>Live Demo</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <p>
+          Toggle a working modal demo by clicking the button below. It will slide down and fade
+          in from the top of the page.
+        </p>
+
+        <button mat-flat-button color="primary" (click)="openDialog()">demo</button>
+        <button mat-flat-button color="warn" (click)="openScrollingDialog()">scrolling long content</button>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined">
+      <mat-card-title>
+        <p>Optional Sizes</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <p>
+          This demo uses fixed dialog widths to show different sizes:
+          512px, 700px, and 992px.
+        </p>
+
+        <button mat-flat-button color="primary" (click)="openLargeDialog()">large modal</button>
+        <button mat-flat-button color="warn" (click)="openSmallDialog()">small modal</button>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined">
+      <mat-card-title>
+        <p>Form dialogs</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <p>
+          Form dialogs allow users to fill out form fields within a dialog. For example, if your site
+          prompts for potential subscribers to fill in their email address, they can fill out the email
+          field and touch Submit
+        </p>
+
+        <button mat-stroked-button class="button" color="primary" (click)="openFormDialog()">open form dialog</button>
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <div class="content-block">
+    <mat-card appearance="outlined">
+      <mat-card-title>
+        <p>Using Grid</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <p>
+          Utilize the Material UI grid system within a modal by nesting Grid container within the Dialog.
+          Then, use the normal grid system classes as you would anywhere else.
+        </p>
+
+        <button mat-flat-button color="primary" (click)="openGridDialog()">grid</button>
+
+        <pre class="code-wrapper">
+<code class="code grey">{{'<'}}div style="display: flex; justify-content: flex-end"{{'>'}}</code>
+  <code class="code blue">{{'<'}}mat-grid-list cols="2" rowHeight="52" gutterSize="24"{{'>'}}</code>
+    <code class="code pink">{{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}</code>
+      <code class="code grey">{{'<'}}div{{'>'}}{{'<'}}span{{'>'}}1{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}</code>
+    <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+    <code class="code pink">{{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}</code>
+      <code class="code grey">{{'<'}}div{{'>'}}{{'<'}}span{{'>'}}2{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}</code>
+    <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+  <code class="code blue">{{'<'}}/mat-grid-list{{'>'}}</code>
+<code class="code grey">{{'<'}}/div{{'>'}}</code>
+
+<code class="code grey">{{'<'}}div{{'>'}}</code>
+  <code class="code blue">{{'<'}}mat-grid-list cols="2" rowHeight="52" gutterSize="24"{{'>'}}</code>
+    <code class="code pink">{{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}</code>
+      <code class="code grey">{{'<'}}div{{'>'}}{{'<'}}span{{'>'}}1{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}</code>
+    <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+    <code class="code pink">{{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}</code>
+      <code class="code grey">{{'<'}}div{{'>'}}{{'<'}}span{{'>'}}2{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}</code>
+    <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+  <code class="code blue">{{'<'}}/mat-grid-list{{'>'}}</code>
+<code class="code grey">{{'<'}}/div{{'>'}}</code>
+
+<code class="code grey">{{'<'}}div{{'>'}}</code>
+  <code class="code blue">{{'<'}}mat-grid-list cols="3" rowHeight="52" gutterSize="24"{{'>'}}</code>
+    <code class="code pink">{{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}</code>
+      <code class="code grey">{{'<'}}div{{'>'}}{{'<'}}span{{'>'}}1{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}</code>
+    <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+    <code class="code pink">{{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}</code>
+      <code class="code grey">{{'<'}}div{{'>'}}{{'<'}}span{{'>'}}2{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}</code>
+    <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+    <code class="code pink">{{'<'}}mat-grid-tile [colspan]="1" [rowspan]="1"{{'>'}}</code>
+      <code class="code grey">{{'<'}}div{{'>'}}{{'<'}}span{{'>'}}3{{'<'}}/span{{'>'}}{{'<'}}/div{{'>'}}</code>
+    <code class="code pink">{{'<'}}/mat-grid-tile{{'>'}}</code>
+  <code class="code blue">{{'<'}}/mat-grid-list{{'>'}}</code>
+<code class="code grey">{{'<'}}/div{{'>'}}</code>
+    </pre>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
diff --git a/src/app/modules/templates/ui-elements/components/modal-page/modal-page.component.scss b/src/app/modules/templates/ui-elements/components/modal-page/modal-page.component.scss
new file mode 100644
index 0000000..1e69ec3
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/modal-page/modal-page.component.scss
@@ -0,0 +1,65 @@
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/font" as *;
+
+.content-wrapper {
+  display: flex;
+
+  @media (max-width: $medium) {
+    flex-wrap: wrap;
+  }
+
+  .content-block {
+    width: 100%;
+    margin-top: 24px;
+
+    & + .content-block {
+      margin-left: 36px;
+
+      @media (max-width: $medium) {
+        margin-left: 0;
+        margin-top: 36px;
+      }
+    }
+
+    mat-card + mat-card {
+      margin-top: 36px;
+    }
+  }
+}
+
+button + button {
+  margin-left: 16px;
+
+  @media (max-width: $small) {
+    margin-left: 0;
+    margin-top: 8px;
+  }
+}
+
+.code-wrapper {
+  background-color: $blue-white;
+  height: auto;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 16px 16px 0 16px;
+}
+
+.code {
+  font-size: $fs-xs;
+}
+
+.button {
+  text-transform: uppercase;
+}
+
+.blue {
+  color: $blue;
+}
+
+.pink {
+  color: $pink;
+}
+
+.grey {
+  color: $grey;
+}
diff --git a/src/app/modules/templates/ui-elements/components/modal-page/modal-page.component.ts b/src/app/modules/templates/ui-elements/components/modal-page/modal-page.component.ts
new file mode 100644
index 0000000..b0423a1
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/modal-page/modal-page.component.ts
@@ -0,0 +1,68 @@
+import { Component } from '@angular/core';
+import {routes} from '../../../../../consts';
+import {MatDialog} from '@angular/material/dialog';
+import {GridComponent, LocationComponent, LongContentComponent, SubscribedComponent} from '../../popups';
+import {FormComponent} from '../../popups/form/form.component';
+import {take} from 'rxjs';
+
+@Component({
+    selector: 'app-modal-page',
+    templateUrl: './modal-page.component.html',
+    styleUrls: ['./modal-page.component.scss'],
+    standalone: false
+})
+export class ModalPageComponent {
+  public routes: typeof routes = routes;
+
+  constructor(
+    public dialog: MatDialog
+  ) {}
+
+  public openDialog(): void {
+    this.dialog.open(LocationComponent, {
+      width: '700px'
+    });
+  }
+
+  public openLargeDialog(): void {
+    this.dialog.open(LocationComponent, {
+      width: '992px'
+    });
+  }
+
+  public openSmallDialog(): void {
+    this.dialog.open(LocationComponent, {
+      width: '512px'
+    });
+  }
+
+  public openScrollingDialog(): void {
+    this.dialog.open(LongContentComponent, {
+      width: '700px'
+    });
+  }
+
+  public openFormDialog(): void {
+    const dialogRef = this.dialog.open(FormComponent, {
+      width: '700px',
+      data: {email: ''}
+    });
+
+    dialogRef.afterClosed().pipe(take(1)).subscribe(result => {
+      const email = (result ?? '').toString().trim();
+
+      if (email.length !== 0) {
+        this.dialog.open(SubscribedComponent, {
+          width: '700px',
+          data: {email}
+        });
+      }
+    });
+  }
+
+  public openGridDialog(): void {
+    this.dialog.open(GridComponent, {
+      width: '700px'
+    });
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/components/navbar-page/navbar-page.component.html b/src/app/modules/templates/ui-elements/components/navbar-page/navbar-page.component.html
new file mode 100644
index 0000000..d6e119e
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/navbar-page/navbar-page.component.html
@@ -0,0 +1,78 @@
+<app-breadcrumb [path]="routes.NAVBAR"></app-breadcrumb>
+
+<div class="content-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>Navbar Example</p>
+    </mat-card-title>
+
+    <mat-card-subtitle>
+      <p>
+        App bar displays yours app links by importing and inserting AppBar component. To swap links style add
+        attribute within Button component.
+      </p>
+    </mat-card-subtitle>
+
+    <mat-card-content>
+      <mat-toolbar color="primary" class="toolbar">
+        <div class="navbar-title-wrapper">
+          <mat-icon class="menu-icon">dehaze</mat-icon>
+          <span class="menu-title">Navbar menu</span>
+        </div>
+
+        <div class="navbar-title-button-wrapper">
+          <button mat-flat-button color="primary" class="button">link</button>
+
+          <button mat-flat-button color="primary" class="button">link 2</button>
+
+          <button mat-flat-button color="primary" class="button">another link</button>
+
+          <button mat-flat-button color="primary" [disabled]="true" class="button">disable link</button>
+        </div>
+      </mat-toolbar>
+
+      <p class="content-text">With menu</p>
+
+      <mat-toolbar color="warn" class="toolbar">
+        <div class="navbar-title-wrapper">
+          <mat-icon class="menu-icon">dehaze</mat-icon>
+          <span class="menu-title">Navbar menu</span>
+        </div>
+
+        <div class="user-row">
+          <mat-icon [matMenuTriggerFor]="menu">account_circle</mat-icon>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item>Profile</button>
+            <button mat-menu-item>My account</button>
+          </mat-menu>
+        </div>
+      </mat-toolbar>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>Navbar Search</p>
+    </mat-card-title>
+
+    <mat-card-subtitle>
+      <p>
+        Search icon makes UX more flexible. To start using search icon, make sure you got all relative functions.
+      </p>
+    </mat-card-subtitle>
+
+    <mat-card-content>
+      <mat-toolbar color="accent" class="toolbar">
+        <div class="navbar-title-wrapper">
+          <mat-icon class="menu-icon">dehaze</mat-icon>
+          <span class="menu-title">Navbar menu</span>
+        </div>
+
+        <div class="user-row">
+          <app-search></app-search>
+        </div>
+      </mat-toolbar>
+    </mat-card-content>
+  </mat-card>
+</div>
+
diff --git a/src/app/modules/templates/ui-elements/components/navbar-page/navbar-page.component.scss b/src/app/modules/templates/ui-elements/components/navbar-page/navbar-page.component.scss
new file mode 100644
index 0000000..720aa00
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/navbar-page/navbar-page.component.scss
@@ -0,0 +1,55 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+
+.content-wrapper {
+  margin-top: 36px;
+
+  .card {
+    + .card {
+      margin-top: 48px;
+    }
+  }
+}
+
+.toolbar{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.button {
+  box-shadow: none;
+
+  &:hover {
+    background: #8B9BFF;
+  }
+}
+
+.content-text {
+  font-size: $fs-normal;
+  color: $dark-grey;
+  margin: 24px 0;
+}
+
+.navbar-title-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.menu-icon {
+  margin-right: 16px;
+}
+
+.navbar-title-button-wrapper {
+  display: inherit;
+
+  @media (max-width: $medium) {
+    display: none;
+  }
+}
+
+.user-row {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
diff --git a/src/app/modules/templates/ui-elements/components/navbar-page/navbar-page.component.ts b/src/app/modules/templates/ui-elements/components/navbar-page/navbar-page.component.ts
new file mode 100644
index 0000000..02b6d31
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/navbar-page/navbar-page.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { routes } from '../../../../../consts';
+
+@Component({
+    selector: 'app-navbar-page',
+    templateUrl: './navbar-page.component.html',
+    styleUrls: ['./navbar-page.component.scss'],
+    standalone: false
+})
+export class NavbarPageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/templates/ui-elements/components/progress-page/progress-page.component.html b/src/app/modules/templates/ui-elements/components/progress-page/progress-page.component.html
new file mode 100644
index 0000000..5c3b1e1
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/progress-page/progress-page.component.html
@@ -0,0 +1,34 @@
+<app-breadcrumb [path]="routes.PROGRESS"></app-breadcrumb>
+
+<div class="content-wrapper">
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>Circular Indeterminate</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <div class="spinners-wrapper">
+        <mat-spinner color="primary" [diameter]="40"></mat-spinner>
+        <mat-spinner color="accent" [diameter]="40"></mat-spinner>
+        <mat-spinner color="warn" [diameter]="40"></mat-spinner>
+        <mat-spinner color="success" [diameter]="40"></mat-spinner>
+        <mat-spinner color="info" [diameter]="40"></mat-spinner>
+      </div>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>Linear Indeterminate</p>
+    </mat-card-title>
+
+    <mat-card-content>
+      <div>
+        <mat-progress-bar mode="indeterminate"  color="primary"></mat-progress-bar>
+        <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
+      </div>
+    </mat-card-content>
+  </mat-card>
+</div>
+
diff --git a/src/app/modules/templates/ui-elements/components/progress-page/progress-page.component.scss b/src/app/modules/templates/ui-elements/components/progress-page/progress-page.component.scss
new file mode 100644
index 0000000..f0ff89a
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/progress-page/progress-page.component.scss
@@ -0,0 +1,33 @@
+@use "src/app/styles/variables" as *;
+
+.content-wrapper {
+  margin-top: 36px;
+  display: flex;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.card {
+  width: 100%;
+
+  + .card {
+    margin-left: 36px;
+
+    @media (max-width: $small) {
+      margin-left: 0;
+      margin-top: 36px;
+    }
+  }
+}
+
+.spinners-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+mat-progress-bar + mat-progress-bar {
+  margin-top: 16px;
+}
diff --git a/src/app/modules/templates/ui-elements/components/progress-page/progress-page.component.ts b/src/app/modules/templates/ui-elements/components/progress-page/progress-page.component.ts
new file mode 100644
index 0000000..2b67525
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/progress-page/progress-page.component.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-progress-page',
+    templateUrl: './progress-page.component.html',
+    styleUrls: ['./progress-page.component.scss'],
+    standalone: false
+})
+export class ProgressPageComponent {
+  public routes: typeof routes = routes
+}
diff --git a/src/app/modules/templates/ui-elements/components/success-toast/success-toast.component.html b/src/app/modules/templates/ui-elements/components/success-toast/success-toast.component.html
new file mode 100644
index 0000000..522f625
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/success-toast/success-toast.component.html
@@ -0,0 +1,16 @@
+<div class="toastr-wrapper">
+  <div class="toastr-content">
+    <div class="toastr-wrapper-icon">
+      <mat-icon class="toastr-icon">done</mat-icon>
+    </div>
+    <p class="toastr-content__title">The item was shipped</p>
+  </div>
+  <button
+    type="button"
+    class="toastr-wrapper-icon toastr-close-button"
+    aria-label="Close notification"
+    (click)="remove()"
+  >
+    <mat-icon class="toastr-icon">close</mat-icon>
+  </button>
+</div>
diff --git a/src/app/modules/templates/ui-elements/components/success-toast/success-toast.component.scss b/src/app/modules/templates/ui-elements/components/success-toast/success-toast.component.scss
new file mode 100644
index 0000000..8b0c07f
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/success-toast/success-toast.component.scss
@@ -0,0 +1,33 @@
+@use '../../../../../styles/colors' as *;
+@use '../../../../../styles/toasrt' as *;
+
+.toastr-wrapper {
+  @include toastr-wrapper;
+}
+
+.toastr-wrapper-icon {
+  @include toastr-wrapper-icon;
+}
+
+.toastr-close-button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.toastr-content {
+  @include toastr-content;
+
+  &__title {
+    @include toastr-content-title;
+  }
+}
+
+.toastr-icon {
+  @include toastr-icon;
+}
+
+:host {
+  @include toastr($green);
+}
diff --git a/src/app/modules/templates/ui-elements/components/success-toast/success-toast.component.ts b/src/app/modules/templates/ui-elements/components/success-toast/success-toast.component.ts
new file mode 100644
index 0000000..d8a94ef
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/success-toast/success-toast.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Toast } from 'ngx-toastr';
+
+@Component({
+    selector: 'app-success-toast',
+    templateUrl: './success-toast.component.html',
+    styleUrls: ['./success-toast.component.scss'],
+    animations: [
+        trigger('flyInOut', [
+            state('inactive', style({ opacity: 0 })),
+            state('active', style({ opacity: 1 })),
+            state('removed', style({ opacity: 0 })),
+            transition('inactive => active', animate('{{ easeTime }}ms {{ easing }}')),
+            transition('active => removed', animate('{{ easeTime }}ms {{ easing }}'))
+        ])
+    ],
+    preserveWhitespaces: false,
+    standalone: false
+})
+export class SuccessToastComponent extends Toast {
+}
diff --git a/src/app/modules/templates/ui-elements/components/tabs-page/tabs-page.component.html b/src/app/modules/templates/ui-elements/components/tabs-page/tabs-page.component.html
new file mode 100644
index 0000000..ce8da55
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/tabs-page/tabs-page.component.html
@@ -0,0 +1,213 @@
+<app-breadcrumb [path]="routes.TABS"></app-breadcrumb>
+
+<div class="tabs-content-wrapper">
+  <div class="cards-wrapper">
+    <mat-card appearance="outlined" class="card">
+      <mat-card-title>
+        <p>Tabs Example</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <mat-tab-group mat-stretch-tabs>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <p class="tab-label">item one</p>
+            </ng-template>
+
+            <p class="tab-text">
+              Tabs-enabled widget You will never know exactly how something will go until you try it. You can
+              think three hundred times and still have no precise result. If you see attractive girl all you
+              need to do is to go and ask her to give you her phone. You don’t need to think about HOW it can
+              turn out. All you have to do is to GO and DO IT. It should be super-fast and easy. No hesitation.
+              You ask me: “What to do with these fearful thoughts preventing me from doing that?” The answer is
+              to ignore them, because they can’t disappear immediately. The same thing is for startups and ideas.
+              If you have an idea right away after it appears in your mind you should go and make a first step
+              to implement it.
+            </p>
+
+            <div class="button-wrapper">
+              <button mat-flat-button color="primary">cancel</button>
+              <button mat-flat-button color="warn">some button</button>
+            </div>
+          </mat-tab>
+
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <p class="tab-label">item two</p>
+            </ng-template>
+
+            <p class="tab-text">
+              Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial
+              point. I think the opposite actually. Everyone knows what is lore ipsum - it is easy to understand
+              if text is lore ipsum.
+            </p>
+          </mat-tab>
+
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <p class="tab-label">item three</p>
+            </ng-template>
+
+            <p class="tab-text">
+              If you will think too much it will sink in the swamp of never implemented plans and ideas or will
+              just go away or will be implemented by someone else. 5 months of doing everything to achieve
+              nothing. You'll automatically skip - because you know - it's just non-informative stub. But what
+              if there some text like this one?
+            </p>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined" class="card">
+      <mat-card-title>
+        <p>Icon Tabs Example</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <mat-tab-group mat-stretch-tabs>
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <mat-icon class="tab-icon">call</mat-icon>
+              <p class="tab-label">item one</p>
+            </ng-template>
+
+            <p class="tab-text">
+              Tabs-enabled widget You will never know exactly how something will go until you try it. You can
+              think three hundred times and still have no precise result. If you see attractive girl all you
+              need to do is to go and ask her to give you her phone. You don’t need to think about HOW it can
+              turn out. All you have to do is to GO and DO IT. It should be super-fast and easy. No hesitation.
+              You ask me: “What to do with these fearful thoughts preventing me from doing that?” The answer is
+              to ignore them, because they can’t disappear immediately. The same thing is for startups and ideas.
+              If you have an idea right away after it appears in your mind you should go and make a first step
+              to implement it.
+            </p>
+
+            <div class="button-wrapper">
+              <button mat-flat-button color="primary">cancel</button>
+              <button mat-flat-button color="warn">some button</button>
+            </div>
+          </mat-tab>
+
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <mat-icon class="tab-icon">call</mat-icon>
+              <p class="tab-label">item two</p>
+            </ng-template>
+
+            <p class="tab-text">
+              Why don't use Lore Ipsum? I think if some one says don't use lore ipsum it's very controversial
+              point. I think the opposite actually. Everyone knows what is lore ipsum - it is easy to understand
+              if text is lore ipsum.
+            </p>
+          </mat-tab>
+
+          <mat-tab>
+            <ng-template mat-tab-label>
+              <mat-icon class="tab-icon">call</mat-icon>
+              <p class="tab-label">item three</p>
+            </ng-template>
+
+            <p class="tab-text">
+              If you will think too much it will sink in the swamp of never implemented plans and ideas or will
+              just go away or will be implemented by someone else. 5 months of doing everything to achieve
+              nothing. You'll automatically skip - because you know - it's just non-informative stub. But what
+              if there some text like this one?
+            </p>
+          </mat-tab>
+        </mat-tab-group>
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <div class="cards-wrapper">
+    <mat-card appearance="outlined" class="card">
+      <mat-card-title>
+        <p>Expansion Panel Example</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <mat-accordion>
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Expansion Panel 1
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
+              amet blandit leo lobortis eget.
+            </p>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Expansion Panel 2
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
+              amet blandit leo lobortis eget.
+            </p>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel [disabled]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Disabled Expansion Panel
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined" class="card">
+      <mat-card-title>
+        <p>Customize Expansion Panel Example</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <mat-accordion>
+          <mat-expansion-panel class="expansion-panel">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <p class="panel-title">Expansion Panel 1</p>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <p class="panel-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
+              amet blandit leo lobortis eget.
+            </p>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel class="expansion-panel">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                <p class="panel-title">Expansion Panel 2</p>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+
+            <p class="panel-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
+              amet blandit leo lobortis eget.
+            </p>
+          </mat-expansion-panel>
+
+          <mat-expansion-panel [disabled]="true">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Disabled Expansion Panel
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
+
diff --git a/src/app/modules/templates/ui-elements/components/tabs-page/tabs-page.component.scss b/src/app/modules/templates/ui-elements/components/tabs-page/tabs-page.component.scss
new file mode 100644
index 0000000..ff826e4
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/tabs-page/tabs-page.component.scss
@@ -0,0 +1,76 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.tabs-content-wrapper {
+  margin-top: 36px;
+}
+
+.cards-wrapper {
+  display: flex;
+
+  @media (max-width: $medium) {
+    flex-wrap: wrap;
+  }
+
+  + .cards-wrapper {
+    margin-top: 36px;
+  }
+}
+
+.card {
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+
+  + .card {
+    margin-left: 36px;
+
+    @media (max-width: $medium) {
+      margin-left: 0;
+      margin-top: 36px;
+    }
+  }
+}
+
+.tab-label {
+  text-transform: uppercase;
+  font-size: $fs-small;
+  font-weight: $fw-normal;
+  margin: 0;
+}
+
+.tab-icon {
+  padding: 0;
+  margin: 0 8px 0 0;
+  font-size: 18px;
+  width: 18px;
+  height: 18px;
+}
+
+.tab-text {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  padding: 24px;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+
+  button + button {
+    margin-left: 16px;
+  }
+}
+
+.expansion-panel {
+  background-color: $blue;
+}
+
+.panel-title, .panel-text {
+  color: $white;
+  margin: 0;
+}
diff --git a/src/app/modules/templates/ui-elements/components/tabs-page/tabs-page.component.ts b/src/app/modules/templates/ui-elements/components/tabs-page/tabs-page.component.ts
new file mode 100644
index 0000000..b75f209
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/tabs-page/tabs-page.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+import { routes } from '../../../../../consts';
+
+@Component({
+    selector: 'app-tabs-page',
+    templateUrl: './tabs-page.component.html',
+    styleUrls: ['./tabs-page.component.scss'],
+    standalone: false
+})
+export class TabsPageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.html b/src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.html
new file mode 100644
index 0000000..5e2812e
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.html
@@ -0,0 +1,156 @@
+<app-breadcrumb [path]="routes.TOOLTIPS"></app-breadcrumb>
+
+<div class="content-wrapper">
+  <div class="cards-wrapper">
+    <mat-card appearance="outlined" class="card">
+      <mat-card-title>
+        <p>Tooltip Example</p>
+      </mat-card-title>
+
+      <mat-card-content class="content">
+        <button
+          class="button"
+          #tooltip="matTooltip"
+          (click)="showTooltip()"
+          mat-flat-button
+          color="primary"
+          [matTooltipDisabled]="!isShow"
+          matTooltip="Info about the action"
+          matTooltipClass="tooltip-blue"
+        >tooltip on click</button>
+
+        <button
+          class="button"
+          mat-flat-button
+          color="warn"
+          matTooltipPosition="above"
+          matTooltip="Info about the action"
+          matTooltipClass="tooltip-pink"
+        >tooltip on hover</button>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined" class="card">
+      <mat-card-title>
+        <p>Popover Example</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <div class="popover-wrapper">
+          <button
+            mat-flat-button
+            color="default"
+            matTooltip="The content of the Popover."
+            matTooltipClass="tooltip-blue"
+            matTooltipPosition="above"
+          >open popover
+          </button>
+
+          <p class="card-text">Hover with a Popover.</p>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+
+  <div class="cards-wrapper">
+    <mat-card appearance="outlined" class="card">
+      <mat-card-title>
+        <p>Tooltip Directions</p>
+      </mat-card-title>
+
+      <mat-card-content class="content">
+        <div class="tooltip-directions-content-wrapper">
+          <button
+            class="tooltip-button"
+            mat-flat-button
+            color="primary"
+            matTooltipPosition="above"
+            matTooltip="Info about the action"
+          >tooltip on top</button>
+
+          <button
+            class="tooltip-button"
+            mat-flat-button
+            color="primary"
+            matTooltipPosition="right"
+            matTooltip="Info about the action"
+          >tooltip on right</button>
+
+          <button
+            class="tooltip-button"
+            mat-flat-button
+            color="primary"
+            matTooltipPosition="below"
+            matTooltip="Info about the action"
+          >tooltip on bottom</button>
+
+          <button
+            class="tooltip-button"
+            mat-flat-button
+            color="primary"
+            matTooltipPosition="left"
+            matTooltip="Info about the action"
+          >tooltip on left</button>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined" class="card">
+      <mat-card-title>
+        <p>Popover Directions</p>
+      </mat-card-title>
+
+      <mat-card-content>
+        <div class="popovers-wrapper">
+          <div class="popover-wrapper">
+            <button
+              mat-flat-button
+              class="popover-button"
+              color="default"
+              matTooltip="The content of the Popover."
+              matTooltipClass="tooltip-blue"
+              matTooltipPosition="above"
+            >popover on top
+            </button>
+          </div>
+
+          <div class="popover-wrapper">
+            <button
+              mat-flat-button
+              color="default"
+              class="popover-button"
+              matTooltip="The content of the Popover."
+              matTooltipClass="tooltip-blue"
+              matTooltipPosition="below"
+            >popover on bottom
+            </button>
+          </div>
+
+          <div class="popover-wrapper">
+            <button
+              mat-flat-button
+              color="default"
+              class="popover-button"
+              matTooltip="The content of the Popover."
+              matTooltipClass="tooltip-blue"
+              matTooltipPosition="left"
+            >popover on left
+            </button>
+          </div>
+
+          <div class="popover-wrapper">
+            <button
+              mat-flat-button
+              color="default"
+              class="popover-button"
+              matTooltip="The content of the Popover."
+              matTooltipClass="tooltip-blue"
+              matTooltipPosition="right"
+            >popover on right
+            </button>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
diff --git a/src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.scss b/src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.scss
new file mode 100644
index 0000000..c5ebdbc
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.scss
@@ -0,0 +1,120 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.content-wrapper {
+  margin-top: 36px;
+}
+
+.cards-wrapper {
+  display: flex;
+
+  @media (max-width: $medium) {
+    flex-wrap: wrap;
+  }
+
+  + .cards-wrapper {
+    margin-top: 36px;
+  }
+}
+
+.cards-wrapper mat-card.card {
+  width: 50%;
+  box-sizing: border-box;
+
+  @media (max-width: $medium) {
+    width: 100%;
+  }
+
+  + .card {
+    margin-left: 36px;
+
+    @media (max-width: $medium) {
+      margin-left: 0;
+      margin-top: 36px;
+    }
+  }
+}
+
+.popovers-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.popover-wrapper {
+  display: flex;
+  align-items: center;
+  margin: 16px 16px 0 0;
+
+  @media (max-width: $medium) {
+    width: 100%;
+  }
+}
+
+.popover {
+  position: absolute;
+  z-index: 1000;
+  top: -8px;
+  left: 0;
+  white-space: nowrap;
+}
+
+.popover-title {
+  margin: 0 !important;
+}
+
+.popover-button {
+  @media (max-width: $medium) {
+    width: 100%;
+  }
+}
+
+.card-text {
+  margin: 0 0 0 16px !important;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version. */
+mat-card-content.content {
+  display: flex;
+  justify-content: start;
+
+  @media (max-width: $medium) {
+    flex-wrap: wrap;
+  }
+}
+
+.tooltip-directions-content-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.button {
+  @media (max-width: $medium) {
+    width: 100%;
+  }
+
+  & + .button {
+    margin-left: 16px;
+
+    @media (max-width: $medium) {
+      margin-left: 0;
+      margin-top: 16px;
+    }
+  }
+}
+
+.tooltip-button {
+  padding: 6px 16px;
+  margin: 16px 16px 0 0;
+
+  @media (max-width: $medium) {
+    width: 100%;
+  }
+}
+
+.tooltip-blue {
+  background-color: $blue;
+}
+
+.tooltip-pink {
+  background-color: $pink;
+}
diff --git a/src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.ts b/src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.ts
new file mode 100644
index 0000000..ec5f4f2
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/tooltips-page/tooltips-page.component.ts
@@ -0,0 +1,22 @@
+import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import { MatTooltip } from '@angular/material/tooltip';
+import {routes} from '../../../../../consts';
+
+@Component({
+    selector: 'app-tooltips-page',
+    templateUrl: './tooltips-page.component.html',
+    styleUrls: ['./tooltips-page.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class TooltipsPageComponent {
+  @ViewChild('tooltip') tooltip!: MatTooltip;
+  public routes: typeof routes = routes;
+  public isShow = false;
+
+  public showTooltip(): void {
+    this.isShow = true;
+    this.tooltip?.show();
+    // this.isShow = false;
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/components/widget-page/widget-page.component.html b/src/app/modules/templates/ui-elements/components/widget-page/widget-page.component.html
new file mode 100644
index 0000000..eb39692
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/widget-page/widget-page.component.html
@@ -0,0 +1,73 @@
+<app-breadcrumb [path]="routes.WIDGET"></app-breadcrumb>
+
+<div class="content-wrapper">
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>Simple Widget</p>
+    </mat-card-title>
+
+    <mat-card-subtitle>
+      <p>
+        A simple widget can be built with Angular Material cards and placed at the top of a page section.
+      </p>
+    </mat-card-subtitle>
+
+    <mat-card-content>
+      <mat-card appearance="outlined" class="inner-card">
+        <mat-card-title>
+          <p>Simple Widget</p>
+        </mat-card-title>
+
+        <mat-card-subtitle>
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, rem?</p>
+        </mat-card-subtitle>
+      </mat-card>
+
+      <div class="code-wrapper">
+        <pre>
+<code class="text-primary">{{'<'}}mat-card{{'>'}}</code>
+  <code class="text-info">{{'<'}}mat-card-title{{'>'}}</code>
+    <code class="text-warn">{{'<'}}p{{'>'}}</code>Simple Widget<code class="text-warn">{{'<'}}/p{{'>'}}</code>
+  <code class="text-info">{{'<'}}/mat-card-title{{'>'}}</code>
+
+  <code class="text-info">{{'<'}}mat-card-subtitle{{'>'}}</code>
+    <code class="text-warn">{{'<'}}p{{'>'}}</code>
+      Lorem ipsum dolor sit amet consectetur,
+      adipisicing elit. A, rem?
+    <code class="text-warn">{{'<'}}/p{{'>'}}</code>
+  <code class="text-info">{{'<'}}/mat-card-subtitle{{'>'}}</code>
+<code class="text-primary">{{'<'}}/mat-card{{'>'}}</code>
+        </pre>
+      </div>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card appearance="outlined" class="card">
+    <mat-card-title>
+      <p>Page Title</p>
+    </mat-card-title>
+
+    <mat-card-subtitle>
+      <p>
+        Use title and subtitle blocks to build a compact page header widget.
+      </p>
+    </mat-card-subtitle>
+
+    <mat-card-content>
+      <mat-card appearance="outlined" class="inner-card">
+        <mat-card-title>
+          <p>Page Title</p>
+        </mat-card-title>
+        <mat-card-subtitle>
+          <p>Short helper text for this page section</p>
+        </mat-card-subtitle>
+      </mat-card>
+
+      <pre>
+<code class="text-primary">{{'<'}}mat-card-title{{'>'}}</code>
+  <code class="text-warn">{{'<'}}p{{'>'}}</code>Page Title<code class="text-warn">{{'<'}}/p{{'>'}}</code>
+<code class="text-primary">{{'<'}}/mat-card-title{{'>'}}</code>
+      </pre>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/src/app/modules/templates/ui-elements/components/widget-page/widget-page.component.scss b/src/app/modules/templates/ui-elements/components/widget-page/widget-page.component.scss
new file mode 100644
index 0000000..40dc3bc
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/widget-page/widget-page.component.scss
@@ -0,0 +1,41 @@
+@use "src/app/styles/variables" as *;
+
+.content-wrapper {
+  margin-top: 36px;
+  display: flex;
+  gap: 36px;
+
+  @media (max-width: $medium) {
+    flex-wrap: wrap;
+  }
+}
+
+.card {
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+  width: 100%;
+  min-width: 0;
+  flex: 1 1 calc(50% - 18px);
+  height: fit-content;
+  box-sizing: border-box;
+}
+
+.inner-card {
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+  margin-bottom: 24px;
+}
+
+.code-wrapper {
+  overflow-x: auto;
+}
+
+.text-primary {
+  color: $blue;
+}
+
+.text-info {
+  color: $violet;
+}
+
+.text-warn {
+  color: $pink;
+}
diff --git a/src/app/modules/templates/ui-elements/components/widget-page/widget-page.component.ts b/src/app/modules/templates/ui-elements/components/widget-page/widget-page.component.ts
new file mode 100644
index 0000000..08fe383
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/components/widget-page/widget-page.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { routes } from '../../../../../consts';
+
+@Component({
+    selector: 'app-widget-page',
+    templateUrl: './widget-page.component.html',
+    styleUrls: ['./widget-page.component.scss'],
+    standalone: false
+})
+export class WidgetPageComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/modules/templates/ui-elements/containers/index.ts b/src/app/modules/templates/ui-elements/containers/index.ts
new file mode 100644
index 0000000..be058af
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/containers/index.ts
@@ -0,0 +1 @@
+export * from './notification-page/notification-page.component';
diff --git a/src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.html b/src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.html
new file mode 100644
index 0000000..8794577
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.html
@@ -0,0 +1,251 @@
+<app-breadcrumb [path]="routes.NOTIFICATION"></app-breadcrumb>
+
+<div class="page-content">
+  <mat-card appearance="outlined" class="page-content__first-item-wrapper">
+    <div class="page-content__first-item-element">
+      <mat-card-title>
+        <p>Layout Options</p>
+      </mat-card-title>
+      <mat-card-subtitle>
+        <p>There are few position options available for notifications. You can click any of them to change notifications position:</p>
+      </mat-card-subtitle>
+      <mat-card-content>
+        <div class="select-position">
+          <div class="select-position__items-wrapper">
+            <button
+              type="button"
+              aria-label="Set toast position to top left"
+              class="select-position__item-top"
+              [ngClass]="{active: toastrPosition === toastrPositionTypes.topLeft}"
+              (click)="setToastrPosition(toastrPositionTypes.topLeft)"
+            ></button>
+            <button
+              type="button"
+              aria-label="Set toast position to top center"
+              class="select-position__center-top-item"
+              [ngClass]="{active: toastrPosition === toastrPositionTypes.topCenter}"
+              (click)="setToastrPosition(toastrPositionTypes.topCenter)"
+            ></button>
+            <button
+              type="button"
+              aria-label="Set toast position to top right"
+              class="select-position__item-top"
+              [ngClass]="{active: toastrPosition === toastrPositionTypes.topRight}"
+              (click)="setToastrPosition(toastrPositionTypes.topRight)"
+            ></button>
+          </div>
+          <p class="select-position__title">Click any position</p>
+          <div class="select-position__items-wrapper">
+            <button
+              type="button"
+              aria-label="Set toast position to bottom left"
+              class="select-position__item-bottom"
+              [ngClass]="{active: toastrPosition === toastrPositionTypes.bottomLeft}"
+              (click)="setToastrPosition(toastrPositionTypes.bottomLeft)"
+            ></button>
+            <button
+              type="button"
+              aria-label="Set toast position to bottom center"
+              class="select-position__center-bottom-item"
+              [ngClass]="{active: toastrPosition === toastrPositionTypes.bottomCenter}"
+              (click)="setToastrPosition(toastrPositionTypes.bottomCenter)"
+            ></button>
+            <button
+              type="button"
+              aria-label="Set toast position to bottom right"
+              class="select-position__item-bottom"
+              [ngClass]="{active: toastrPosition === toastrPositionTypes.bottomRight}"
+              (click)="setToastrPosition(toastrPositionTypes.bottomRight)"
+            ></button>
+          </div>
+        </div>
+      </mat-card-content>
+    </div>
+    <div class="page-content__first-item-element">
+      <mat-card-title>
+        <p>Notifications Types</p>
+      </mat-card-title>
+      <mat-card-subtitle>
+        <p>Different types of notifications for lots of use cases. Custom classes are also supported.</p>
+      </mat-card-subtitle>
+      <mat-card-content>
+        <div class="position-buttons-wrapper">
+          <button
+            class="position-button position-button_blue"
+            mat-raised-button
+            (click)="showInfoToastr()"
+          >Info Message</button>
+          <button
+            class="position-button position-button_pink"
+            mat-raised-button
+            (click)="showErrorToastr()"
+          >Error + Retry Message</button>
+          <button
+            class="position-button position-button_green"
+            mat-raised-button
+            (click)="showSuccess()"
+          >Success Message</button>
+        </div>
+      </mat-card-content>
+    </div>
+    <div class="page-content__first-item-element">
+      <mat-card-title>
+        <p>Usage</p>
+      </mat-card-title>
+      <mat-card-subtitle>
+        <p>Notifications are created with the help of <a class="link" [href]="toastrLink">ngx-toastr</a></p>
+      </mat-card-subtitle>
+      <mat-card-content class="code-block">
+        <pre class="code-wrapper">
+<code class="code">import {{'{'}} ToastrService {{'}'}} from 'ngx-toastr';</code>
+
+<code class="code">&#64;Component({{'{'}}...{{'}'}})</code>
+<code class="code">export class YourComponent {{'{'}}</code>
+  <code class="code pink">constructor(private toastr: ToastrService) {{'{'}}{{'}'}}</code>
+
+  <code class="code blue">public showSuccess() {{'{'}}</code>
+    <code class="code green">this.toastr.show(</code>
+      <code>null, null, {{'{'}} toastComponent: SuccessToastComponent {{'}'}}</code>
+    <code class="code green">);</code>
+  <code class="code blue">{{'}'}}</code>
+<code>{{'}'}}</code>
+        </pre>
+        <p>For more API information refer to the library documentation</p>
+      </mat-card-content>
+    </div>
+  </mat-card>
+
+  <div class="page-content__items-wrapper">
+    <mat-card appearance="outlined" class="page-content__item">
+      <mat-card-title>
+        <p>Notification Types Examples</p>
+      </mat-card-title>
+      <mat-card-content>
+        <div class="notification notification_solid-pink">
+          <div class="notification__icon-wrapper notification__icon-wrapper_transparent">
+            <mat-icon>email</mat-icon>
+          </div>
+          <p class="notification__title notification__title_white">Thanks for Checking out Messenger</p>
+        </div>
+        <div class="notification notification_solid-blue" >
+          <div class="notification__icon-wrapper notification__icon-wrapper_transparent">
+            <mat-icon>announcement</mat-icon>
+          </div>
+          <p class="notification__title notification__title_white">New user feedback received</p>
+        </div>
+        <div class="notification notification_solid-green">
+          <div class="notification__icon-wrapper notification__icon-wrapper_transparent">
+            <mat-icon>account_box</mat-icon>
+          </div>
+          <p class="notification__title notification__title_white">New customer is registered</p>
+        </div>
+        <div class="notification notification_solid-yellow">
+          <div class="notification__icon-wrapper notification__icon-wrapper_transparent">
+            <mat-icon>done</mat-icon>
+          </div>
+          <p class="notification__title notification__title_white">The order was shipped</p>
+        </div>
+        <div class="notification notification_solid-blue">
+          <div class="notification__icon-wrapper notification__icon-wrapper_transparent">
+            <mat-icon>business_center</mat-icon>
+          </div>
+          <p class="notification__title notification__title_white">The order was delivered</p>
+        </div>
+        <div class="notification notification_solid-violet">
+          <div class="notification__icon-wrapper notification__icon-wrapper_transparent">
+            <mat-icon>info</mat-icon>
+          </div>
+          <p class="notification__title notification__title_white">5 Defence alerts</p>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined" class="page-content__item">
+      <mat-card-title>
+        <p>Notification Types Examples</p>
+      </mat-card-title>
+      <mat-card-content>
+        <div class="notification notification_transparent-pink">
+          <div class="notification__icon-wrapper notification__icon-wrapper_solid-pink">
+            <mat-icon>report</mat-icon>
+          </div>
+          <p class="notification__title">New report has been received</p>
+        </div>
+        <div class="notification notification_transparent-blue">
+          <div class="notification__icon-wrapper notification__icon-wrapper_solid-blue">
+            <mat-icon>announcement</mat-icon>
+          </div>
+          <p class="notification__title">New user feedback received</p>
+        </div>
+        <div class="notification notification_transparent-green">
+          <div class="notification__icon-wrapper notification__icon-wrapper_solid-green">
+            <mat-icon>done</mat-icon>
+          </div>
+          <p class="notification__title">The item was shipped</p>
+        </div>
+        <div class="notification notification_transparent-yellow">
+          <div class="notification__icon-wrapper notification__icon-wrapper_solid-yellow">
+            <mat-icon>email</mat-icon>
+          </div>
+          <p class="notification__title">The new message from user &#64;nahawaii</p>
+        </div>
+        <div class="notification notification_transparent-blue">
+          <div class="notification__icon-wrapper notification__icon-wrapper_solid-blue">
+            <mat-icon class="icon-rotate">get_app</mat-icon>
+          </div>
+          <p class="notification__title">Your file is ready to upload</p>
+        </div>
+        <div class="notification notification_transparent-violet">
+          <div class="notification__icon-wrapper notification__icon-wrapper_solid-violet">
+            <mat-icon>disc_full</mat-icon>
+          </div>
+          <p class="notification__title">The disc is full</p>
+        </div>
+      </mat-card-content>
+    </mat-card>
+
+    <mat-card appearance="outlined" class="page-content__item">
+      <mat-card-title>
+        <p>Notification Types Examples</p>
+      </mat-card-title>
+      <mat-card-content>
+        <div class="notification">
+          <div class="notification__icon-wrapper-circle notification__icon-wrapper-circle_transparent-pink">
+            <mat-icon>report</mat-icon>
+          </div>
+          <p class="notification__title">New report has been received</p>
+        </div>
+        <div class="notification">
+          <div class="notification__icon-wrapper-circle notification__icon-wrapper-circle_transparent-blue">
+            <mat-icon>announcement</mat-icon>
+          </div>
+          <p class="notification__title">New user feedback received</p>
+        </div>
+        <div class="notification">
+          <div class="notification__icon-wrapper-circle notification__icon-wrapper-circle_transparent-green">
+            <mat-icon>done</mat-icon>
+          </div>
+          <p class="notification__title">The item was shipped</p>
+        </div>
+        <div class="notification">
+          <div class="notification__icon-wrapper-circle notification__icon-wrapper-circle_transparent-yellow">
+            <mat-icon>email</mat-icon>
+          </div>
+          <p class="notification__title">The new message from user &#64;nahawaii</p>
+        </div>
+        <div class="notification">
+          <div class="notification__icon-wrapper-circle notification__icon-wrapper-circle_transparent-blue">
+            <mat-icon class="icon-rotate">get_app</mat-icon>
+          </div>
+          <p class="notification__title">Your file is ready to upload</p>
+        </div>
+        <div class="notification">
+          <div class="notification__icon-wrapper-circle notification__icon-wrapper-circle_transparent-violet">
+            <mat-icon>disc_full</mat-icon>
+          </div>
+          <p class="notification__title">The disc is full</p>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
diff --git a/src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.scss b/src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.scss
new file mode 100644
index 0000000..30891b2
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.scss
@@ -0,0 +1,360 @@
+@use "../../../../../styles/variables" as *;
+@use "../../../../../styles/font" as *;
+
+.page-content {
+  margin-top: 24px;
+
+  &__item-wrapper {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  &__items-wrapper {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 24px;
+
+    @media(max-width: $medium) {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__first-item-wrapper {
+    display: flex;
+    box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+
+    @media(max-width: $medium) {
+      flex-wrap: wrap;
+      padding-bottom: 0;
+    }
+  }
+
+  &__first-item-element {
+    width: 100%;
+    padding: 8px;
+
+    @media(max-width: $small) {
+      padding: 0 0 16px 0;
+    }
+  }
+
+  &__item {
+    box-shadow: 0 3px 11px 0 #E8EAFC, 0 3px 3px -2px #B2B2B21A, 0 1px 8px 0 #9A9A9A1A;
+    width: 100%;
+
+  }
+}
+
+.select-position {
+  width: 80%;
+  height: 200px;
+  border: 1px dashed $blue;
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  @media (max-width: $medium) {
+    width: 100%;
+  }
+
+  &__items-wrapper {
+    width: 100%;
+    height: 50px;
+    display: flex;
+  }
+
+  &__item {
+    cursor:pointer;
+    width: 100%;
+    height: 100%;
+    background-color: $blue-white;
+    border: 0;
+    outline: none;
+
+    &.active {
+      background-color: $sky;
+      cursor: default;
+    }
+  }
+
+  &__center-top-item {
+    @extend .select-position__item;
+    border-left: 1px dashed $blue;
+    border-right: 1px dashed $blue;
+    border-top: none;
+    border-bottom: 1px dashed $blue;
+  }
+
+  &__center-bottom-item {
+    @extend .select-position__item;
+    border-left: 1px dashed $blue;
+    border-right: 1px dashed $blue;
+    border-top: 1px dashed $blue;
+    border-bottom: none;
+  }
+
+  &__item-top {
+    @extend .select-position__item;
+    border-left: none;
+    border-right: none;
+    border-top: none;
+    border-bottom: 1px dashed $blue;
+  }
+
+  &__item-bottom {
+    @extend .select-position__item;
+    border-left: none;
+    border-right: none;
+    border-top: 1px dashed $blue;
+    border-bottom: none;
+  }
+
+  &__title {
+    text-align: center;
+    margin: 0;
+    color: $sky;
+    font-size: $fs-medium;
+    font-weight: $fw-lighter;
+  }
+}
+
+.mat-mdc-card-content>:last-child.position-buttons-wrapper {
+  margin-top: 33px;
+}
+
+.position-button {
+  display:block;
+  color: $white !important;
+  margin-bottom: 8px;
+  border: 0;
+
+  &_blue {
+    background-color: $blue !important;
+    --mat-button-protected-container-color: #{$blue};
+    --mdc-protected-button-container-color: #{$blue};
+    --mat-button-protected-label-text-color: #{$white};
+    --mdc-protected-button-label-text-color: #{$white};
+  }
+
+  &_pink {
+    background-color: $pink !important;
+    --mat-button-protected-container-color: #{$pink};
+    --mdc-protected-button-container-color: #{$pink};
+    --mat-button-protected-label-text-color: #{$white};
+    --mdc-protected-button-label-text-color: #{$white};
+  }
+
+  &_green {
+    background-color: $green !important;
+    --mat-button-protected-container-color: #{$green};
+    --mdc-protected-button-container-color: #{$green};
+    --mat-button-protected-label-text-color: #{$white};
+    --mdc-protected-button-label-text-color: #{$white};
+  }
+}
+
+.code-block {
+  margin-top: 50px;
+
+  @media (max-width: $small) {
+    margin-top: 33px;
+  }
+}
+
+.code-wrapper {
+  margin-top: 49px;
+  font-size: $fs-xs;
+  display: block;
+  overflow-x: auto;
+  padding: 16px;
+  color: $dark-grey;
+  background: $blue-white;
+  height: 240px;
+  overflow-y: hidden;
+}
+
+.code {
+  text-wrap: none;
+}
+
+.blue {
+  color: $blue;
+}
+
+.pink {
+  color: $pink;
+}
+
+.green {
+  color: $green;
+}
+
+.link {
+  color: $blue;
+}
+
+.notification {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+  height: 45px;
+  border-radius: 45px;
+
+  &_solid {
+    &-pink {
+      background-color: $pink;
+    }
+
+    &-blue {
+      background-color: $blue;
+    }
+
+    &-green {
+      background-color: $green;
+    }
+
+    &-yellow {
+      background-color: $yellow;
+    }
+
+    &-violet {
+      background-color: $violet;
+    }
+  }
+
+  &_transparent {
+    &-pink {
+      background-color: $pink-15;
+    }
+
+    &-blue {
+      background-color: $blue-15;
+    }
+
+    &-green {
+      background-color: $green-15;
+    }
+
+    &-yellow {
+      background-color: $yellow-15;
+    }
+
+    &-violet {
+      background-color: $violet-15;
+    }
+  }
+
+  &__title {
+    margin: 0;
+
+    &_white {
+      color: $white;
+    }
+  }
+
+  &__icon-wrapper {
+    height: 45px;
+    width: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &_transparent {
+      color: $white-80;
+
+      &-pink {
+        color: $pink;
+      }
+
+      &-blue {
+        color: $blue;
+      }
+
+      &-green {
+        color: $green;
+      }
+
+      &-yellow {
+        color: $yellow;
+      }
+
+      &-violet {
+        color: $violet;
+      }
+    }
+
+    &_solid {
+      &-pink {
+        color: $pink;
+      }
+
+      &-blue {
+        color: $blue;
+      }
+
+      &-green {
+        color: $green;
+      }
+
+      &-yellow {
+        color: $yellow;
+      }
+
+      &-violet {
+        color: $violet;
+      }
+    }
+  }
+
+  &__icon-wrapper-circle {
+    height: 45px;
+    width: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 45px;
+    margin-right: 16px;
+
+    &_transparent {
+      &-pink {
+        color: $pink;
+        background-color: $pink-15;
+      }
+
+      &-blue {
+        color: $blue;
+        background-color: $blue-15;
+      }
+
+      &-green {
+        color: $green;
+        background-color:$green-15;
+      }
+
+      &-yellow {
+        color: $yellow;
+        background-color: $yellow-15;
+      }
+
+      &-violet {
+        color: $violet;
+        background-color: $violet-15;
+      }
+    }
+  }
+}
+
+.icon-rotate {
+  transform: rotate(180deg);
+}
+
+.page-content__item + .page-content__item {
+  margin-left: 36px;
+
+  @media (max-width: $medium) {
+    margin-left: 0;
+    margin-top: 36px;
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.ts b/src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.ts
new file mode 100644
index 0000000..9154b74
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/containers/notification-page/notification-page.component.ts
@@ -0,0 +1,76 @@
+import {Component} from '@angular/core';
+import {ToastrService} from 'ngx-toastr';
+
+import {SuccessToastComponent} from '../../components/success-toast/success-toast.component';
+import {ErrorToastrComponent} from '../../components/error-toastr/error-toastr.component';
+import {InfoToastrComponent} from '../../components/info-toastr/info-toastr.component';
+import {routes} from '../../../../../consts';
+
+enum ToastPositionTypes {
+  bottomCenter = 'toast-bottom-center',
+  bottomRight = 'toast-bottom-right',
+  bottomLeft = 'toast-bottom-left',
+  topCenter = 'toast-top-center',
+  topRight = 'toast-top-right',
+  topLeft = 'toast-top-left'
+}
+
+@Component({
+    selector: 'app-notification-page',
+    templateUrl: './notification-page.component.html',
+    styleUrls: ['./notification-page.component.scss'],
+    standalone: false
+})
+export class NotificationPageComponent {
+  public toastrPositionTypes: typeof ToastPositionTypes = ToastPositionTypes;
+  public toastrPosition: ToastPositionTypes = this.toastrPositionTypes.topRight;
+  public timeOut = 3000;
+  public toastrLink: string = 'https://github.com/scttcper/ngx-toastr';
+  public routes: typeof routes = routes;
+
+  constructor(private toastrService: ToastrService) {
+  }
+
+  public setToastrPosition(position: ToastPositionTypes): void {
+    this.toastrPosition = position;
+  }
+
+  public showSuccess(): void {
+    this.toastrService.show(
+      null,
+      null,
+      {
+        positionClass: this.toastrPosition,
+        toastComponent: SuccessToastComponent,
+        timeOut: this.timeOut,
+        tapToDismiss: false
+      }
+    );
+  }
+
+  public showErrorToastr(): void {
+    this.toastrService.show(
+      null,
+      null,
+      {
+        positionClass: this.toastrPosition,
+        toastComponent: ErrorToastrComponent,
+        timeOut: this.timeOut,
+        tapToDismiss: false
+      }
+    );
+  }
+
+  public showInfoToastr(): void {
+    this.toastrService.show(
+      null,
+      null,
+      {
+        positionClass: this.toastrPosition,
+        toastComponent: InfoToastrComponent,
+        timeOut: this.timeOut,
+        tapToDismiss: false
+      }
+    );
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/popups/form/form.component.html b/src/app/modules/templates/ui-elements/popups/form/form.component.html
new file mode 100644
index 0000000..1176b19
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/form/form.component.html
@@ -0,0 +1,16 @@
+<h2 mat-dialog-title class="title">Subscribe</h2>
+
+<mat-dialog-content>
+  <p class="text">
+    To subscribe to this website, please enter your email address here. We will send updates occasionally.
+  </p>
+
+  <mat-form-field class="form">
+    <input matInput placeholder="Email Address" [(ngModel)]="data.email">
+  </mat-form-field>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button class="button" mat-stroked-button color="primary" (click)="close()">CANCEL</button>
+  <button class="button" mat-raised-button color="primary" [mat-dialog-close]="data.email">SUBSCRIBE</button>
+</mat-dialog-actions>
diff --git a/src/app/modules/templates/ui-elements/popups/form/form.component.scss b/src/app/modules/templates/ui-elements/popups/form/form.component.scss
new file mode 100644
index 0000000..1d6c644
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/form/form.component.scss
@@ -0,0 +1,25 @@
+@use "./src/app/styles/font" as *;
+@use "./src/app/styles/colors" as *;
+
+.title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+}
+
+.text {
+  font-size: $fs-normal;
+  color: $grey;
+}
+
+.form {
+  width: 100%;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button + .button {
+    margin-left: 8px;
+}
diff --git a/src/app/modules/templates/ui-elements/popups/form/form.component.ts b/src/app/modules/templates/ui-elements/popups/form/form.component.ts
new file mode 100644
index 0000000..9b7fc72
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/form/form.component.ts
@@ -0,0 +1,25 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+type SubscriptionDialogData = {
+  email: string;
+};
+
+@Component({
+    selector: 'app-form',
+    templateUrl: './form.component.html',
+    styleUrls: ['./form.component.scss'],
+    standalone: false
+})
+export class FormComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<FormComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: SubscriptionDialogData
+  ) { }
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+
+}
diff --git a/src/app/modules/templates/ui-elements/popups/grid/grid.component.html b/src/app/modules/templates/ui-elements/popups/grid/grid.component.html
new file mode 100644
index 0000000..45d97c1
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/grid/grid.component.html
@@ -0,0 +1,58 @@
+<h2 mat-dialog-title class="title">Grid system</h2>
+
+<mat-dialog-content>
+  <div style="margin-top: 24px; display: flex; justify-content: flex-end">
+    <mat-grid-list cols="2" rowHeight="52" gutterSize="24" style="width: 200px">
+      <mat-grid-tile [colspan]="1" [rowspan]="1">
+        <div class="first-grid-item-2">
+          <span>1</span>
+        </div>
+      </mat-grid-tile>
+      <mat-grid-tile [colspan]="1" [rowspan]="1">
+        <div class="second-grid-item-2">
+          <span>2</span>
+        </div>
+      </mat-grid-tile>
+    </mat-grid-list>
+  </div>
+
+  <div style="margin-top: 24px">
+    <mat-grid-list cols="2" rowHeight="52" gutterSize="24">
+      <mat-grid-tile [colspan]="1" [rowspan]="1">
+        <div class="first-grid-item-2">
+          <span>1</span>
+        </div>
+      </mat-grid-tile>
+      <mat-grid-tile [colspan]="1" [rowspan]="1">
+        <div class="second-grid-item-2">
+          <span>2</span>
+        </div>
+      </mat-grid-tile>
+    </mat-grid-list>
+  </div>
+
+  <div style="margin-top: 24px">
+    <mat-grid-list cols="3" rowHeight="52" gutterSize="24">
+      <mat-grid-tile [colspan]="1" [rowspan]="1">
+        <div class="first-grid-item-2">
+          <span>1</span>
+        </div>
+      </mat-grid-tile>
+      <mat-grid-tile [colspan]="1" [rowspan]="1">
+        <div class="second-grid-item-2">
+          <span>2</span>
+        </div>
+      </mat-grid-tile>
+      <mat-grid-tile [colspan]="1" [rowspan]="1">
+        <div class="third-grid-item-2">
+          <span>3</span>
+        </div>
+      </mat-grid-tile>
+    </mat-grid-list>
+  </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button class="button" mat-stroked-button color="primary" (click)="close()">CANCEL</button>
+  <button class="button" mat-raised-button color="primary" (click)="close()">OK</button>
+</mat-dialog-actions>
diff --git a/src/app/modules/templates/ui-elements/popups/grid/grid.component.scss b/src/app/modules/templates/ui-elements/popups/grid/grid.component.scss
new file mode 100644
index 0000000..e02eee8
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/grid/grid.component.scss
@@ -0,0 +1,43 @@
+@use "./src/app/styles/colors" as *;
+@use "./src/app/styles/font" as *;
+
+.title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+}
+
+.button-wrapper {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button + .button {
+    margin-left: 8px;
+}
+
+@mixin grid-item-2 {
+  width: 93px;
+  height: 100%;
+  border-radius: 4px;
+  color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.first-grid-item-2 {
+  @include grid-item-2;
+  background-color: $blue;
+  justify-self: flex-end;
+}
+
+.second-grid-item-2 {
+  @include grid-item-2;
+  background-color: $yellow;
+}
+
+.third-grid-item-2 {
+  @include grid-item-2;
+  background-color: $pink;
+}
diff --git a/src/app/modules/templates/ui-elements/popups/grid/grid.component.ts b/src/app/modules/templates/ui-elements/popups/grid/grid.component.ts
new file mode 100644
index 0000000..4c0471c
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/grid/grid.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-grid',
+    templateUrl: './grid.component.html',
+    styleUrls: ['./grid.component.scss'],
+    standalone: false
+})
+export class GridComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<GridComponent>
+  ) { }
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/popups/index.ts b/src/app/modules/templates/ui-elements/popups/index.ts
new file mode 100644
index 0000000..4350185
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/index.ts
@@ -0,0 +1,5 @@
+export * from './location/location.component';
+export * from './long-content/long-content.component';
+export * from './form/form.component';
+export * from './subscribed/subscribed.component';
+export * from './grid/grid.component';
diff --git a/src/app/modules/templates/ui-elements/popups/location/location.component.html b/src/app/modules/templates/ui-elements/popups/location/location.component.html
new file mode 100644
index 0000000..087481d
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/location/location.component.html
@@ -0,0 +1,13 @@
+<h2 mat-dialog-title class="title">Use Google's location service?</h2>
+
+<mat-dialog-content>
+  <p class="text">
+    Let Google help apps determine location. This means sending anonymous location data to Google, even when no
+    apps are running.
+  </p>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button class="button" mat-stroked-button color="primary" (click)="close()">DISAGREE</button>
+  <button class="button" mat-raised-button color="primary" (click)="close()">AGREE</button>
+</mat-dialog-actions>
diff --git a/src/app/modules/templates/ui-elements/popups/location/location.component.scss b/src/app/modules/templates/ui-elements/popups/location/location.component.scss
new file mode 100644
index 0000000..bc38011
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/location/location.component.scss
@@ -0,0 +1,21 @@
+@use "./src/app/styles/font" as *;
+@use "./src/app/styles/colors" as *;
+
+.title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+}
+
+.text {
+  font-size: $fs-normal;
+  color: $grey;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button + .button {
+    margin-left: 8px;
+  }
diff --git a/src/app/modules/templates/ui-elements/popups/location/location.component.ts b/src/app/modules/templates/ui-elements/popups/location/location.component.ts
new file mode 100644
index 0000000..645d4eb
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/location/location.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-location',
+    templateUrl: './location.component.html',
+    styleUrls: ['./location.component.scss'],
+    standalone: false
+})
+export class LocationComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<LocationComponent>
+  ) { }
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/popups/long-content/long-content.component.html b/src/app/modules/templates/ui-elements/popups/long-content/long-content.component.html
new file mode 100644
index 0000000..0a1645b
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/long-content/long-content.component.html
@@ -0,0 +1,121 @@
+<h2 mat-dialog-title class="title">Subscribe</h2>
+
+<mat-dialog-content class="long-content-scroll">
+  <p class="text">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+    nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
+    magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+    dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet
+    fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
+    ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+    consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+    leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+    nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+    facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+    commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+    vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+    consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+    leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+    nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
+    cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras
+    justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+    at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+    sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+    consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras
+    mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+    nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
+    magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo
+    odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+    at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+    sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
+    ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+    nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+    in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
+    magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo
+    odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+    at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+    sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
+    ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur
+    et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
+    quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel
+    scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+    ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+    commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+    vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+    consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+    risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+    consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+    egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+    vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+    dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet
+    fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
+    ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+    consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo
+    risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+    consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+    egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+    vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus
+    ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+    commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+    vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+    consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+    leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+    consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+    egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
+    magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+    dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet
+    fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur
+    ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+    consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+    leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+    consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+    egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus
+    magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+    dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+    commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras
+    justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at
+    eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet
+    fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+    vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+    purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+    consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+    consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus,
+    porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+    Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+    leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+    consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+    eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel
+    scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
+    facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
+    cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+    dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+    commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras
+    justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum
+    at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet
+    fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+    vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
+    purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+    consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+  </p>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button class="button" mat-stroked-button color="primary" (click)="close()">DISAGREE</button>
+  <button class="button" mat-raised-button color="primary" (click)="close()">AGREE</button>
+</mat-dialog-actions>
diff --git a/src/app/modules/templates/ui-elements/popups/long-content/long-content.component.scss b/src/app/modules/templates/ui-elements/popups/long-content/long-content.component.scss
new file mode 100644
index 0000000..007fc4b
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/long-content/long-content.component.scss
@@ -0,0 +1,22 @@
+@use "./src/app/styles/font" as *;
+@use "./src/app/styles/colors" as *;
+
+.title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+}
+
+.text {
+  font-size: $fs-normal;
+  color: $grey;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1rem;
+}
+
+.button + .button {
+    margin-left: 8px;
+}
diff --git a/src/app/modules/templates/ui-elements/popups/long-content/long-content.component.ts b/src/app/modules/templates/ui-elements/popups/long-content/long-content.component.ts
new file mode 100644
index 0000000..7d71220
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/long-content/long-content.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-long-content',
+    templateUrl: './long-content.component.html',
+    styleUrls: ['./long-content.component.scss'],
+    standalone: false
+})
+export class LongContentComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<LongContentComponent>
+  ) { }
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/popups/subscribed/subscribed.component.html b/src/app/modules/templates/ui-elements/popups/subscribed/subscribed.component.html
new file mode 100644
index 0000000..19b9de7
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/subscribed/subscribed.component.html
@@ -0,0 +1,12 @@
+<h2 mat-dialog-title class="title">Successfully subscribed</h2>
+
+<mat-dialog-content>
+  <p class="text">
+    You are subscribed as {{data.email}}.
+  </p>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+  <button class="button" mat-flat-button (click)="close()">CANCEL</button>
+  <button class="button" mat-flat-button (click)="close()">UNSUBSCRIBE</button>
+</mat-dialog-actions>
diff --git a/src/app/modules/templates/ui-elements/popups/subscribed/subscribed.component.scss b/src/app/modules/templates/ui-elements/popups/subscribed/subscribed.component.scss
new file mode 100644
index 0000000..07c468d
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/subscribed/subscribed.component.scss
@@ -0,0 +1,31 @@
+@use "./src/app/styles/font" as *;
+@use "./src/app/styles/colors" as *;
+
+.title {
+  font-size: $fs-regular;
+  color: $dark-grey;
+}
+
+.text {
+  font-size: $fs-normal;
+  color: $grey;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button {
+  color: $blue;
+  background-color: transparent;
+  box-shadow: none;
+
+  &:hover {
+    background-color: $white-gray;
+  }
+
+  & + .button {
+    margin-left: 8px;
+  }
+}
diff --git a/src/app/modules/templates/ui-elements/popups/subscribed/subscribed.component.ts b/src/app/modules/templates/ui-elements/popups/subscribed/subscribed.component.ts
new file mode 100644
index 0000000..28c0e27
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/popups/subscribed/subscribed.component.ts
@@ -0,0 +1,25 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+
+type SubscriptionDialogData = {
+  email: string;
+};
+
+@Component({
+    selector: 'app-subscribed',
+    templateUrl: './subscribed.component.html',
+    styleUrls: ['./subscribed.component.scss'],
+    standalone: false
+})
+export class SubscribedComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<SubscribedComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: SubscriptionDialogData
+  ) { }
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+
+}
diff --git a/src/app/modules/templates/ui-elements/ui-elements-routing.module.ts b/src/app/modules/templates/ui-elements/ui-elements-routing.module.ts
new file mode 100644
index 0000000..41219ef
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/ui-elements-routing.module.ts
@@ -0,0 +1,83 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import {
+  BadgePageComponent,
+  IconsPageComponent,
+  ModalPageComponent,
+  ProgressPageComponent,
+  TabsPageComponent,
+  TooltipsPageComponent,
+  WidgetPageComponent,
+  CardsPageComponent
+} from './components';
+
+import { CarouselPageComponent } from './components';
+import { NotificationPageComponent } from './containers';
+import { NavbarPageComponent } from './components/navbar-page/navbar-page.component';
+import { TablesDynamicPageComponent } from '../tables/containers';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'icons',
+    pathMatch: 'full'
+  },
+  {
+    path: 'icons',
+    component: IconsPageComponent
+  },
+  {
+    path: 'badge',
+    component: BadgePageComponent
+  },
+  {
+    path: 'cards',
+    component: CardsPageComponent
+  },
+  {
+    path: 'modal',
+    component: ModalPageComponent
+  },
+  {
+    path: 'carousel',
+    component: CarouselPageComponent
+  },
+  {
+    path: 'notification',
+    component: NotificationPageComponent
+  },
+  {
+    path: 'navbar',
+    component: NavbarPageComponent
+  },
+  {
+    path: 'tooltips',
+    component: TooltipsPageComponent
+  },
+  {
+    path: 'tabs',
+    component: TabsPageComponent
+  },
+  {
+    path: 'progress',
+    component: ProgressPageComponent
+  },
+  {
+    path: 'pagination',
+    component: TablesDynamicPageComponent
+  },
+  {
+    path: 'widget',
+    component: WidgetPageComponent
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+
+export class UiElementsRoutingModule {
+}
diff --git a/src/app/modules/templates/ui-elements/ui-elements.module.ts b/src/app/modules/templates/ui-elements/ui-elements.module.ts
new file mode 100644
index 0000000..d5dc20e
--- /dev/null
+++ b/src/app/modules/templates/ui-elements/ui-elements.module.ts
@@ -0,0 +1,103 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FormsModule } from '@angular/forms';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatMenuModule } from '@angular/material/menu';
+
+import { UiElementsRoutingModule } from './ui-elements-routing.module';
+
+import { NotificationPageComponent } from './containers';
+import { SuccessToastComponent } from './components/success-toast/success-toast.component';
+import { ErrorToastrComponent } from './components/error-toastr/error-toastr.component';
+import { InfoToastrComponent } from './components/info-toastr/info-toastr.component';
+
+import {
+  IconsPageComponent,
+  BadgePageComponent,
+  CarouselPageComponent,
+  CardsPageComponent,
+  ModalPageComponent,
+  TooltipsPageComponent,
+  TabsPageComponent,
+  WidgetPageComponent
+} from './components';
+import { NavbarPageComponent } from './components/navbar-page/navbar-page.component';
+
+import {
+  LocationComponent,
+  LongContentComponent,
+  FormComponent,
+  SubscribedComponent,
+  GridComponent
+} from './popups';
+
+
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+import { MatExpansionModule } from '@angular/material/expansion';
+import { ProgressPageComponent } from './components';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { BreadcrumbComponent, CarouselComponent } from '../../../shared/ui-elements';
+import { SearchComponent } from '../../../shared/header/components/search/search.component';
+
+
+@NgModule({
+  declarations: [
+    IconsPageComponent,
+    BadgePageComponent,
+    CardsPageComponent,
+    ModalPageComponent,
+    LocationComponent,
+    LongContentComponent,
+    FormComponent,
+    SubscribedComponent,
+    GridComponent,
+    NotificationPageComponent,
+    SuccessToastComponent,
+    ErrorToastrComponent,
+    InfoToastrComponent,
+    CarouselPageComponent,
+    NavbarPageComponent,
+    TooltipsPageComponent,
+    TabsPageComponent,
+    ProgressPageComponent,
+    WidgetPageComponent
+  ],
+    imports: [
+      CommonModule,
+      UiElementsRoutingModule,
+      MatToolbarModule,
+      BreadcrumbComponent,
+      CarouselComponent,
+      SearchComponent,
+      MatButtonModule,
+      MatCardModule,
+      MatTabsModule,
+      MatIconModule,
+      MatBadgeModule,
+      MatChipsModule,
+      MatDialogModule,
+      MatFormFieldModule,
+      MatInputModule,
+      FormsModule,
+      MatGridListModule,
+      MatTooltipModule,
+      MatExpansionModule,
+      MatProgressSpinnerModule,
+      MatProgressBarModule,
+      MatMenuModule
+    ]
+})
+export class UiElementsModule { }
diff --git a/src/app/modules/user/components/account-create-form/account-create-form.component.html b/src/app/modules/user/components/account-create-form/account-create-form.component.html
new file mode 100644
index 0000000..a431cc6
--- /dev/null
+++ b/src/app/modules/user/components/account-create-form/account-create-form.component.html
@@ -0,0 +1,37 @@
+<mat-card appearance="outlined" class="steps-card">
+  <mat-card-title>Create New Account</mat-card-title>
+
+  <mat-card-content class="content">
+    <div class="font-wrapper">
+      <mat-form-field appearance="outline" class="form-field">
+        <mat-label>User Name</mat-label>
+        <input matInput>
+        <mat-hint>Please enter your user name</mat-hint>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline" class="form-field">
+        <mat-label>Email Address</mat-label>
+        <input matInput>
+        <mat-hint>We’ll never share your email with anyone else</mat-hint>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline" class="form-field">
+        <mat-label>Password</mat-label>
+        <input matInput>
+        <mat-hint>Enter your password. Min 6 characters long</mat-hint>
+      </mat-form-field>
+
+      <mat-form-field appearance="outline" class="form-field">
+        <mat-label>Role</mat-label>
+        <mat-select class="form-select">
+          <mat-option value="user">User</mat-option>
+          <mat-option value="admin">Admin</mat-option>
+        </mat-select>
+        <mat-hint>Please choose the role</mat-hint>
+      </mat-form-field>
+
+      <button mat-flat-button color="primary">next</button>
+    </div>
+  </mat-card-content>
+</mat-card>
+
diff --git a/src/app/modules/user/components/account-create-form/account-create-form.component.scss b/src/app/modules/user/components/account-create-form/account-create-form.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/user/components/account-create-form/account-create-form.component.ts b/src/app/modules/user/components/account-create-form/account-create-form.component.ts
new file mode 100644
index 0000000..0c1a591
--- /dev/null
+++ b/src/app/modules/user/components/account-create-form/account-create-form.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-account-create-form',
+    templateUrl: './account-create-form.component.html',
+    styleUrls: ['./account-create-form.component.scss'],
+    standalone: false
+})
+export class AccountCreateFormComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/user/components/account-edit-form/account-edit-form.component.html b/src/app/modules/user/components/account-edit-form/account-edit-form.component.html
new file mode 100644
index 0000000..33881b3
--- /dev/null
+++ b/src/app/modules/user/components/account-edit-form/account-edit-form.component.html
@@ -0,0 +1,23 @@
+<div class="edit-form-wrapper">
+  <h3>Account</h3>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="userName">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="userEmail">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <mat-select [formControl]="userStatus">
+      <mat-option value="admin">Admin</mat-option>
+      <mat-option value="user">User</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <div class="button-wrapper">
+    <button mat-stroked-button color="primary" class="reset-button">Reset</button>
+    <button mat-flat-button color="success">Save</button>
+  </div>
+</div>
diff --git a/src/app/modules/user/components/account-edit-form/account-edit-form.component.scss b/src/app/modules/user/components/account-edit-form/account-edit-form.component.scss
new file mode 100644
index 0000000..7e1d2d3
--- /dev/null
+++ b/src/app/modules/user/components/account-edit-form/account-edit-form.component.scss
@@ -0,0 +1,32 @@
+@use 'src/app/styles/variables' as *;
+
+.edit-form-wrapper {
+  margin: 0 auto;
+  width: 600px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.form-item {
+  display: block;
+  width: 600px;
+  margin-bottom: 16px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.reset-button {
+  border-color: $blue;
+  box-shadow: none;
+  text-transform: uppercase;
+}
diff --git a/src/app/modules/user/components/account-edit-form/account-edit-form.component.ts b/src/app/modules/user/components/account-edit-form/account-edit-form.component.ts
new file mode 100644
index 0000000..d268836
--- /dev/null
+++ b/src/app/modules/user/components/account-edit-form/account-edit-form.component.ts
@@ -0,0 +1,41 @@
+import { Component, OnInit } from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+
+type AccountEditControls = {
+  userName: FormControl<string>;
+  userEmail: FormControl<string>;
+  userStatus: FormControl<string>;
+};
+
+@Component({
+    selector: 'app-account-edit-form',
+    templateUrl: './account-edit-form.component.html',
+    styleUrls: ['./account-edit-form.component.scss'],
+    standalone: false
+})
+export class AccountEditFormComponent implements OnInit {
+  public editForm!: FormGroup<AccountEditControls>;
+
+  constructor() {
+  }
+
+  public ngOnInit() {
+    this.editForm = new FormGroup<AccountEditControls>({
+      userName: new FormControl('user', { nonNullable: true }),
+      userEmail: new FormControl('user@mail.com', { nonNullable: true }),
+      userStatus: new FormControl('admin', { nonNullable: true }),
+    });
+  }
+
+  get userName(): FormControl<string> {
+    return this.editForm.controls.userName;
+  }
+
+  get userEmail(): FormControl<string> {
+    return this.editForm.controls.userEmail;
+  }
+
+  get userStatus(): FormControl<string> {
+    return this.editForm.controls.userStatus;
+  }
+}
diff --git a/src/app/modules/user/components/index.ts b/src/app/modules/user/components/index.ts
new file mode 100644
index 0000000..767d144
--- /dev/null
+++ b/src/app/modules/user/components/index.ts
@@ -0,0 +1,11 @@
+export * from './account-create-form/account-create-form.component';
+export * from './account-edit-form/account-edit-form.component';
+export * from './password-edit-form/password-edit-form.component';
+export * from './profile-edit-from/profile-edit-form.component';
+export * from './settings-edit-form/settings-edit-form.component';
+export * from './user-article/user-article.component';
+export * from './user-files/user-files.component';
+export * from './user-info/user-info.component';
+export * from './user-media/user-media.component';
+export * from './user-projects/user-projects.component';
+export * from './user-tasks/user-tasks.component';
diff --git a/src/app/modules/user/components/password-edit-form/password-edit-form.component.html b/src/app/modules/user/components/password-edit-form/password-edit-form.component.html
new file mode 100644
index 0000000..ca71372
--- /dev/null
+++ b/src/app/modules/user/components/password-edit-form/password-edit-form.component.html
@@ -0,0 +1,22 @@
+<div class="password-form-wrapper">
+  <h3>Password</h3>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput placeholder="Current password">
+    <mat-hint class="form-hint">Forgot Password?</mat-hint>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput placeholder="New password">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput placeholder="Verify password">
+  </mat-form-field>
+
+  <div class="button-wrapper">
+    <button mat-stroked-button color="primary" class="reset-button">Reset</button>
+    <button mat-flat-button color="success">Save Password</button>
+  </div>
+</div>
+
diff --git a/src/app/modules/user/components/password-edit-form/password-edit-form.component.scss b/src/app/modules/user/components/password-edit-form/password-edit-form.component.scss
new file mode 100644
index 0000000..efee941
--- /dev/null
+++ b/src/app/modules/user/components/password-edit-form/password-edit-form.component.scss
@@ -0,0 +1,36 @@
+@use "src/app/styles/variables" as *;
+
+.password-form-wrapper {
+  margin: 0 auto;
+  width: 600px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.form-item {
+  display: block;
+  width: 600px;
+  margin-bottom: 24px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.form-hint {
+  color: $green;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.reset-button {
+  box-shadow: none;
+  border-color: $blue;
+  text-transform: uppercase;
+}
diff --git a/src/app/modules/user/components/password-edit-form/password-edit-form.component.ts b/src/app/modules/user/components/password-edit-form/password-edit-form.component.ts
new file mode 100644
index 0000000..06ef27d
--- /dev/null
+++ b/src/app/modules/user/components/password-edit-form/password-edit-form.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'app-password-edit-form',
+    templateUrl: './password-edit-form.component.html',
+    styleUrls: ['./password-edit-form.component.scss'],
+    standalone: false
+})
+export class PasswordEditFormComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/modules/user/components/profile-edit-from/profile-edit-form.component.html b/src/app/modules/user/components/profile-edit-from/profile-edit-form.component.html
new file mode 100644
index 0000000..13c2ae2
--- /dev/null
+++ b/src/app/modules/user/components/profile-edit-from/profile-edit-form.component.html
@@ -0,0 +1,102 @@
+<div class="profile-form-wrapper">
+  <h3>Personal Information</h3>
+
+  <p>Photo:</p>
+
+  <button mat-flat-button color="primary" class="upload-button">Upload an image</button>
+
+  <p>.PNG, .JPG, .JPEG</p>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="userName">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="userSecondName">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="userPhone">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="userEmail">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <mat-select [formControl]="userCountry">
+      <mat-option value="us">United State</mat-option>
+      <mat-option value="admin">Admin</mat-option>
+      <mat-option value="user">User</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <mat-select [formControl]="userState">
+      <mat-option value="california">California</mat-option>
+      <mat-option value="admin">Admin</mat-option>
+      <mat-option value="user">User</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <mat-select [formControl]="userCity">
+      <mat-option value="poloAlto">Polo Alto</mat-option>
+      <mat-option value="admin">Admin</mat-option>
+      <mat-option value="user">User</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="userStreet">
+  </mat-form-field>
+
+  <h3>Company Information</h3>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="companyName">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="companyId">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="companyEmail">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="companyPhone">
+  </mat-form-field>
+
+  <h3>Social</h3>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="facebook">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="twitter">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="instagram">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="github">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="codepen">
+  </mat-form-field>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <input matInput [formControl]="nik">
+  </mat-form-field>
+
+  <div class="button-wrapper">
+    <button mat-stroked-button color="primary" class="reset-button">Reset</button>
+    <button mat-flat-button color="success">Save</button>
+  </div>
+</div>
diff --git a/src/app/modules/user/components/profile-edit-from/profile-edit-form.component.scss b/src/app/modules/user/components/profile-edit-from/profile-edit-form.component.scss
new file mode 100644
index 0000000..36a9db7
--- /dev/null
+++ b/src/app/modules/user/components/profile-edit-from/profile-edit-form.component.scss
@@ -0,0 +1,36 @@
+@use 'src/app/styles/variables' as *;
+
+.profile-form-wrapper {
+  margin: 0 auto;
+  width: 600px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.upload-button {
+  margin-bottom: 20px;
+}
+
+.form-item {
+  display: block;
+  width: 600px;
+  margin-bottom: 16px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.reset-button {
+  border-color: $blue;
+  box-shadow: none;
+  text-transform: uppercase;
+}
diff --git a/src/app/modules/user/components/profile-edit-from/profile-edit-form.component.ts b/src/app/modules/user/components/profile-edit-from/profile-edit-form.component.ts
new file mode 100644
index 0000000..95da542
--- /dev/null
+++ b/src/app/modules/user/components/profile-edit-from/profile-edit-form.component.ts
@@ -0,0 +1,142 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+type ProfileControls = {
+  userName: FormControl<string>;
+  userSecondName: FormControl<string>;
+  userPhone: FormControl<string>;
+  userEmail: FormControl<string>;
+  userCountry: FormControl<string>;
+  userState: FormControl<string>;
+  userCity: FormControl<string>;
+  userStreet: FormControl<string>;
+};
+
+type CompanyControls = {
+  companyName: FormControl<string>;
+  companyId: FormControl<string>;
+  companyEmail: FormControl<string>;
+  companyPhone: FormControl<string>;
+};
+
+type SocialControls = {
+  facebook: FormControl<string>;
+  twitter: FormControl<string>;
+  instagram: FormControl<string>;
+  github: FormControl<string>;
+  codepen: FormControl<string>;
+  nik: FormControl<string>;
+};
+
+@Component({
+    selector: 'app-profile-edit-form',
+    templateUrl: './profile-edit-form.component.html',
+    styleUrls: ['./profile-edit-form.component.scss'],
+    standalone: false
+})
+export class ProfileEditFormComponent implements OnInit {
+  public socialForm!: FormGroup<SocialControls>;
+  public companyForm!: FormGroup<CompanyControls>;
+  public profileForm!: FormGroup<ProfileControls>;
+
+  public ngOnInit(): void {
+    this.profileForm = new FormGroup<ProfileControls>({
+      userName: new FormControl('Jane', { nonNullable: true }),
+      userSecondName: new FormControl('Jonson', { nonNullable: true }),
+      userPhone: new FormControl('1-555-666-7070', { nonNullable: true }),
+      userEmail: new FormControl('Jane@gmail.com', { nonNullable: true }),
+      userCountry: new FormControl('us', { nonNullable: true }),
+      userState: new FormControl('california', { nonNullable: true }),
+      userCity: new FormControl('poloAlto', { nonNullable: true }),
+      userStreet: new FormControl('1258 Riverside Drive Redding', { nonNullable: true }),
+    });
+
+    this.companyForm = new FormGroup<CompanyControls>({
+      companyName: new FormControl('Company', { nonNullable: true }),
+      companyId: new FormControl('AD1234567891', { nonNullable: true }),
+      companyEmail: new FormControl('company@gmail.com', { nonNullable: true }),
+      companyPhone: new FormControl('1-353-969-7070', { nonNullable: true }),
+    });
+
+    this.socialForm = new FormGroup<SocialControls>({
+      facebook: new FormControl('https://www.facebook.com/janejonson', { nonNullable: true }),
+      twitter: new FormControl('https://twitter/janejonson', { nonNullable: true }),
+      instagram: new FormControl('https://www.instagram.com/janejonson', { nonNullable: true }),
+      github: new FormControl('https://github.com/janejonson', { nonNullable: true }),
+      codepen: new FormControl('https://codepen.io/janejonson', { nonNullable: true }),
+      nik: new FormControl('@janejonson', { nonNullable: true }),
+    });
+  }
+
+  get userName(): FormControl<string> {
+    return this.profileForm.controls.userName;
+  }
+
+  get userSecondName(): FormControl<string> {
+    return this.profileForm.controls.userSecondName;
+  }
+
+  get userPhone(): FormControl<string> {
+    return this.profileForm.controls.userPhone;
+  }
+
+  get userEmail(): FormControl<string> {
+    return this.profileForm.controls.userEmail;
+  }
+
+  get userCountry(): FormControl<string> {
+    return this.profileForm.controls.userCountry;
+  }
+
+  get userState(): FormControl<string> {
+    return this.profileForm.controls.userState;
+  }
+
+  get userCity(): FormControl<string> {
+    return this.profileForm.controls.userCity;
+  }
+
+  get userStreet(): FormControl<string> {
+    return this.profileForm.controls.userStreet;
+  }
+
+  get companyName(): FormControl<string> {
+    return this.companyForm.controls.companyName;
+  }
+
+  get companyId(): FormControl<string> {
+    return this.companyForm.controls.companyId;
+  }
+
+  get companyEmail(): FormControl<string> {
+    return this.companyForm.controls.companyEmail;
+  }
+
+  get companyPhone(): FormControl<string> {
+    return this.companyForm.controls.companyPhone;
+  }
+
+  get facebook(): FormControl<string> {
+    return this.socialForm.controls.facebook;
+  }
+
+  get twitter(): FormControl<string> {
+    return this.socialForm.controls.twitter;
+  }
+
+  get instagram(): FormControl<string> {
+    return this.socialForm.controls.instagram;
+  }
+
+  get github(): FormControl<string> {
+    return this.socialForm.controls.github;
+  }
+
+  get codepen(): FormControl<string> {
+    return this.socialForm.controls.codepen;
+  }
+
+  get nik(): FormControl<string> {
+    return this.socialForm.controls.nik;
+  }
+}
diff --git a/src/app/modules/user/components/settings-edit-form/settings-edit-form.component.html b/src/app/modules/user/components/settings-edit-form/settings-edit-form.component.html
new file mode 100644
index 0000000..8352ca9
--- /dev/null
+++ b/src/app/modules/user/components/settings-edit-form/settings-edit-form.component.html
@@ -0,0 +1,33 @@
+<div class="settings-form-wrapper">
+  <h3>Settings</h3>
+
+  <mat-form-field appearance="outline" class="form-item">
+    <mat-select [formControl]="lang">
+      <mat-option value="eng">English</mat-option>
+      <mat-option value="admin">Admin</mat-option>
+      <mat-option value="user">User</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <div class="settings-item-wrapper first-setting">
+    <h3 class="settings-subtitle">Communication:</h3>
+    <mat-checkbox [checked]="true" color="warn" class="checkbox">Email</mat-checkbox>
+    <mat-checkbox color="warn" class="checkbox">Messages</mat-checkbox>
+    <mat-checkbox color="warn" class="checkbox">Phone</mat-checkbox>
+  </div>
+
+  <div class="settings-item-wrapper">
+    <h3 class="settings-subtitle">Email notification</h3>
+    <mat-slide-toggle [checked]="true" color="primary"></mat-slide-toggle>
+  </div>
+
+  <div class="settings-item-wrapper">
+    <h3 class="settings-subtitle">Send copy to personal email</h3>
+    <mat-slide-toggle color="primary"></mat-slide-toggle>
+  </div>
+
+  <div class="button-wrapper">
+    <button mat-stroked-button color="primary">Reset</button>
+    <button mat-flat-button color="success">Save</button>
+  </div>
+</div>
diff --git a/src/app/modules/user/components/settings-edit-form/settings-edit-form.component.scss b/src/app/modules/user/components/settings-edit-form/settings-edit-form.component.scss
new file mode 100644
index 0000000..eabcf3a
--- /dev/null
+++ b/src/app/modules/user/components/settings-edit-form/settings-edit-form.component.scss
@@ -0,0 +1,51 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.settings-form-wrapper {
+  margin: 0 auto;
+  width: 600px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.settings-item-wrapper {
+  margin-top: 24px;
+  &.first-setting {
+    margin-top: 0;
+  }
+}
+
+.settings-subtitle {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.checkbox {
+  & + .checkbox {
+    margin-left: 16px;
+  }
+}
+
+.form-item {
+  display: block;
+  width: 600px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.button-wrapper {
+  margin-top: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+button {
+  text-transform: uppercase;
+}
diff --git a/src/app/modules/user/components/settings-edit-form/settings-edit-form.component.ts b/src/app/modules/user/components/settings-edit-form/settings-edit-form.component.ts
new file mode 100644
index 0000000..32518c5
--- /dev/null
+++ b/src/app/modules/user/components/settings-edit-form/settings-edit-form.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+
+type SettingsEditControls = {
+  lang: FormControl<string>;
+};
+
+@Component({
+    selector: 'app-settings-edit-form',
+    templateUrl: './settings-edit-form.component.html',
+    styleUrls: ['./settings-edit-form.component.scss'],
+    standalone: false
+})
+export class SettingsEditFormComponent implements OnInit {
+  public settingForm!: FormGroup<SettingsEditControls>;
+
+  constructor() {
+  }
+
+  public ngOnInit() {
+    this.settingForm = new FormGroup<SettingsEditControls>({
+      lang: new FormControl('eng', { nonNullable: true }),
+    });
+  }
+
+  get lang(): FormControl<string> {
+    return this.settingForm.controls.lang;
+  }
+}
diff --git a/src/app/modules/user/components/user-article/user-article.component.html b/src/app/modules/user/components/user-article/user-article.component.html
new file mode 100644
index 0000000..15e47f0
--- /dev/null
+++ b/src/app/modules/user/components/user-article/user-article.component.html
@@ -0,0 +1,24 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <p>Top 5 react native starter kits</p>
+
+    <div class="wrapper">
+      <div class="article-img-wrapper">
+        <img src="./assets/user/profile/article-logo.png" alt="article-logo" style="width: 100%">
+      </div>
+
+      <div class="article-text-wrapper">
+        <p class="article-writer">Nastassia Ovchinnikova</p>
+        <p class="article-text">
+          React Native allows us to create a boilerplate that have been crafted for both platforms. The ability
+          to create an app both for Android and iOS...
+        </p>
+
+        <div class="article-info-wrapper">
+          <p class="article-info">11 Feb 2019 | 5 min read</p>
+          <mat-icon color="accent" class="article-icon">bookmark</mat-icon>
+        </div>
+      </div>
+    </div>
+  </mat-card-title>
+</mat-card>
diff --git a/src/app/modules/user/components/user-article/user-article.component.scss b/src/app/modules/user/components/user-article/user-article.component.scss
new file mode 100644
index 0000000..6a20ad6
--- /dev/null
+++ b/src/app/modules/user/components/user-article/user-article.component.scss
@@ -0,0 +1,75 @@
+@use "../../../../styles/font" as *;
+@use "../../../../styles/variables" as *;
+
+.card {
+  margin-top: 36px;
+
+  @media (max-width: $small) {
+    margin: 36px 0;
+  }
+}
+
+.wrapper {
+  display: flex;
+  margin-bottom: 25px;
+
+  @media (max-width: $small) {
+    flex-direction: column;
+  }
+}
+
+.article-img-wrapper {
+  width: 40%;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.article-text-wrapper {
+  width: 60%;
+  margin-left: 24px;
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 24px;
+  }
+}
+
+.article-writer {
+  font-weight: $fw-normal;
+  font-size: 12px;
+  line-height: 14px;
+  color: $gray-06;
+  margin-bottom: 9px;
+}
+
+.article-text {
+  font-weight: $fw-normal;
+  font-size: $fs-small;
+  line-height: 21px;
+  color: $grey;
+  margin-bottom: 20px;
+}
+
+.article-info-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.article-info {
+  font-weight: $fw-normal;
+  font-size: 12px;
+  line-height: 14px;
+  color: $gray-06;
+  margin: 0;
+}
+
+.article-icon {
+  padding: 0;
+  width: 13px;
+  height: 16px;
+  font-size: $fs-normal;
+}
diff --git a/src/app/modules/user/components/user-article/user-article.component.ts b/src/app/modules/user/components/user-article/user-article.component.ts
new file mode 100644
index 0000000..dd6afef
--- /dev/null
+++ b/src/app/modules/user/components/user-article/user-article.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-user-article',
+    templateUrl: './user-article.component.html',
+    styleUrls: ['./user-article.component.scss'],
+    standalone: false
+})
+export class UserArticleComponent {
+}
diff --git a/src/app/modules/user/components/user-files/user-files.component.html b/src/app/modules/user/components/user-files/user-files.component.html
new file mode 100644
index 0000000..3568aa0
--- /dev/null
+++ b/src/app/modules/user/components/user-files/user-files.component.html
@@ -0,0 +1,79 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title>
+    <p>Files</p>
+  </mat-card-title>
+
+  <mat-card-content mat-align-tabs="start">
+    <mat-tab-group color="warn">
+      <mat-tab label="Work">
+        <div class="folders-wrapper">
+          <div class="folder folder-blue" [ngClass]="{'folder-dark-blue': isDarkMode}">
+            <p class="folder-title">UX</p>
+            <p class="folder-subtitle">178 files</p>
+          </div>
+
+          <div class="folder folder-pink" [ngClass]="{'folder-dark-pink': isDarkMode}">
+            <p class="folder-title">Design</p>
+            <p class="folder-subtitle">154 files</p>
+          </div>
+
+          <div class="folder folder-green" [ngClass]="{'folder-dark-green': isDarkMode}">
+            <p class="folder-title">Mobile</p>
+            <p class="folder-subtitle">98 files</p>
+          </div>
+
+          <div class="folder folder-yellow" [ngClass]="{'folder-dark-yellow': isDarkMode}">
+            <p class="folder-title">Illustration</p>
+            <p class="folder-subtitle">154 files</p>
+          </div>
+        </div>
+      </mat-tab>
+      <mat-tab label="Private">
+        <div class="folders-wrapper">
+          <div class="folder folder-blue" [ngClass]="{'folder-dark-blue': isDarkMode}">
+            <p class="folder-title">UX</p>
+            <p class="folder-subtitle">178 files</p>
+          </div>
+
+          <div class="folder folder-pink" [ngClass]="{'folder-dark-pink': isDarkMode}">
+            <p class="folder-title">Design</p>
+            <p class="folder-subtitle">154 files</p>
+          </div>
+
+          <div class="folder folder-green" [ngClass]="{'folder-dark-green': isDarkMode}">
+            <p class="folder-title">Mobile</p>
+            <p class="folder-subtitle">98 files</p>
+          </div>
+
+          <div class="folder folder-yellow" [ngClass]="{'folder-dark-yellow': isDarkMode}">
+            <p class="folder-title">Illustration</p>
+            <p class="folder-subtitle">154 files</p>
+          </div>
+        </div>
+      </mat-tab>
+      <mat-tab label="Social">
+        <div class="folders-wrapper">
+          <div class="folder folder-blue" [ngClass]="{'folder-dark-blue': isDarkMode}">
+            <p class="folder-title">UX</p>
+            <p class="folder-subtitle">178 files</p>
+          </div>
+
+          <div class="folder folder-pink" [ngClass]="{'folder-dark-pink' : isDarkMode}">
+            <p class="folder-title">Design</p>
+            <p class="folder-subtitle">154 files</p>
+          </div>
+
+          <div class="folder folder-green" [ngClass]="{'folder-dark-green' : isDarkMode}">
+            <p class="folder-title">Mobile</p>
+            <p class="folder-subtitle">98 files</p>
+          </div>
+
+          <div class="folder folder-yellow" [ngClass]="{'folder-dark-yellow' : isDarkMode}">
+            <p class="folder-title">Illustration</p>
+            <p class="folder-subtitle">154 files</p>
+          </div>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/user/components/user-files/user-files.component.scss b/src/app/modules/user/components/user-files/user-files.component.scss
new file mode 100644
index 0000000..8753e59
--- /dev/null
+++ b/src/app/modules/user/components/user-files/user-files.component.scss
@@ -0,0 +1,97 @@
+@use "../../../../styles/font" as *;
+@use "../../../../styles/variables" as *;
+
+.card {
+  padding: 14px 18px 12px;
+  height: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: $small) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+.card.mat-mdc-card-outlined {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.folders-wrapper {
+  display: flex;
+  margin-top: 18px;
+  justify-content: space-between;
+  overflow-x: auto;
+  padding-bottom: 8px;
+
+  @media (min-width: $small) and (max-width: $xxl) {
+    margin-top: 12px;
+  }
+}
+
+.folder {
+  width: 125px;
+  min-width: 125px;
+  height: 90px;
+  padding: 8px;
+  background-size: cover;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+
+  & + .folder {
+    margin-left: 8px;
+  }
+
+  @media (max-width: $xxl) {
+    margin-bottom: 16px;
+  }
+}
+
+.folder-blue {
+  background-image: url("../../../../../assets/user/profile/folder-blue.svg");
+}
+
+.folder-pink {
+  background-image: url("../../../../../assets/user/profile/folder-pink.svg");
+}
+
+.folder-green {
+  background-image: url("../../../../../assets/user/profile/folder-green.svg");
+}
+
+.folder-yellow {
+  background-image: url("../../../../../assets/user/profile/folder-yellow.svg");
+}
+
+.folder-dark-blue {
+  background-image: url("../../../../../assets/user/profile/folder-dark-blue.svg");
+}
+
+.folder-dark-pink {
+  background-image: url("../../../../../assets/user/profile/folder-dark-pink.svg");
+}
+
+.folder-dark-green {
+  background-image: url("../../../../../assets/user/profile/folder-dark-green.svg");
+}
+
+.folder-dark-yellow {
+  background-image: url("../../../../../assets/user/profile/folder-dark-yellow.svg");
+}
+
+.folder-title {
+  font-weight: $fw-bold;
+  font-size: $fs-regular;
+  line-height: 22px;
+  color: $white;
+  margin-bottom: 2px;
+  margin-top: 14px;
+}
+
+.folder-subtitle {
+  font-weight: $fw-normal;
+  font-size: 13px;
+  line-height: 16px;
+  color: $white;
+  margin: 0;
+}
diff --git a/src/app/modules/user/components/user-files/user-files.component.ts b/src/app/modules/user/components/user-files/user-files.component.ts
new file mode 100644
index 0000000..2913c0a
--- /dev/null
+++ b/src/app/modules/user/components/user-files/user-files.component.ts
@@ -0,0 +1,16 @@
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+
+@Component({
+    selector: 'app-user-files',
+    templateUrl: './user-files.component.html',
+    styleUrls: ['./user-files.component.scss'],
+    standalone: false
+})
+export class UserFilesComponent implements OnChanges {
+  @Input() isDark: boolean;
+  public isDarkMode: boolean = true;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.isDarkMode = Boolean(changes['isDark']?.currentValue);
+  }
+}
diff --git a/src/app/modules/user/components/user-info/user-info.component.html b/src/app/modules/user/components/user-info/user-info.component.html
new file mode 100644
index 0000000..dc9da23
--- /dev/null
+++ b/src/app/modules/user/components/user-info/user-info.component.html
@@ -0,0 +1,37 @@
+<mat-card appearance="outlined" class="user-card">
+  <mat-card-content class="user-card-content">
+    <div class="user-avatar">
+      <div class="avatar-wrapper">
+        <img class="avatar-img" src="./assets/user/profile/photo.png" alt="avatar">
+      </div>
+      <div class="avatar-badge-wrapper">
+        <span class="avatar-badge">PRO</span>
+      </div>
+    </div>
+
+    <div class="user-info-wrapper">
+      <mat-card-title class="user-name">Julee Cruise</mat-card-title>
+
+      <p class="user-position">Product Designer</p>
+      <a href="#" class="user-site">Flatlogic.com</a>
+
+      <div class="user-skills-wrapper">
+        <div class="user-skills-list">
+          <span class="user-skill blue">UI/UX</span>
+          <span class="user-skill yellow">Art</span>
+          <span class="user-skill pink">Design</span>
+          <span class="user-skill yellow">Illustration</span>
+          <span class="user-skill green">Mobile</span>
+        </div>
+      </div>
+
+      <div class="icons-wrapper">
+        <img class="icon" src="./assets/user/profile/facebook-logo.svg">
+        <img class="icon" src="./assets/user/profile/medium-logo.svg">
+        <img class="icon" src="./assets/user/profile/basket.svg">
+        <img class="icon" src="./assets/user/profile/Be.svg">
+        <img class="icon" src="./assets/user/profile/insta-logo.svg">
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/user/components/user-info/user-info.component.scss b/src/app/modules/user/components/user-info/user-info.component.scss
new file mode 100644
index 0000000..816aa5e
--- /dev/null
+++ b/src/app/modules/user/components/user-info/user-info.component.scss
@@ -0,0 +1,208 @@
+@use "../../../../styles/font" as *;
+@use "../../../../styles/variables" as *;
+
+.user-card {
+  padding: 20px 24px 16px;
+  height: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: $small) {
+    padding: 18px 20px 14px;
+  }
+}
+
+.user-card.mat-mdc-card-outlined {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.user-card-content {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+
+.user-avatar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 50%;
+  margin-right: 18px;
+
+  @media (max-width: $small) {
+    width: auto;
+  }
+}
+
+.avatar-wrapper {
+  width: 185px;
+  height: 185px;
+  border: 3px dotted $blue;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @media (max-width: $small) {
+    width: 95px;
+    height: 95px;
+  }
+
+  @media (min-width: $medium) and (max-width: $normal){
+    width: 95px;
+    height: 95px;
+  }
+}
+
+.avatar-img {
+  width: 164px;
+  height: 164px;
+  border-radius: 50%;
+
+  @media (max-width: $small) {
+    width: 85px;
+    height: 85px;
+  }
+
+  @media (min-width: $medium) and (max-width: $normal){
+    width: 85px;
+    height: 85px;
+  }
+}
+
+.avatar-badge-wrapper {
+  margin-top: 14px;
+}
+
+.avatar-badge {
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: auto;
+  height: auto;
+  min-width: 16px;
+  border-radius: 4px;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  font-size: 0.75rem;
+  line-height: 1;
+  letter-spacing: 0.8px;
+  color: $white;
+  background-color: $pink;
+  padding: 6px 10px;
+}
+
+.user-info-wrapper {
+  width: 50%;
+
+  @media (max-width: $small) {
+    width: auto;
+  }
+}
+
+.user-name {
+  font-weight: $fw-bold;
+  font-size: $fs-xl;
+  line-height: 38px;
+  margin-bottom: 14px;
+}
+
+.user-position {
+  font-weight: $fw-normal;
+  font-size: 12px;
+  line-height: 14px;
+  color: #27282C;
+  opacity: 0.5;
+  margin-bottom: 4px;
+}
+
+.user-site {
+  font-weight: $fw-lighter;
+  font-size: $fs-normal;
+  line-height: 19px;
+  color: $blue;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.user-skills-wrapper {
+  margin-top: 18px;
+  width: 230px;
+
+  @media (min-width: 1280px) and (max-width: $xxl) {
+    margin-top: 20px;
+    width: auto;
+  }
+}
+
+.user-skill {
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-size: 0.75rem;
+  line-height: 1;
+  font-weight: 600;
+  min-width: 16px;
+  height: auto;
+  position: static;
+  transform: none;
+  border-radius: 4px;
+  padding: 6px 10px;
+  letter-spacing: normal;
+}
+
+.user-skill.blue {
+  background-color: $blue-20;
+  color: $blue;
+}
+
+.user-skill.yellow {
+  background-color: $yellow-20;
+  color: $yellow;
+}
+
+.user-skill.pink {
+  background-color: $pink-20;
+  color: $pink;
+}
+
+.user-skill.green {
+  background-color: $green-20;
+  color: $green;
+}
+
+.user-skills-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.icons-wrapper {
+  display: flex;
+  margin-top: 24px;
+
+  @media (min-width: 1280px) and (max-width: $xxl) {
+    margin-top: 18px;
+  }
+}
+
+.icon {
+  font-size: 16px;
+  color: #9B9B9B;
+  padding: 0;
+
+  & + .icon {
+    margin-left: 16px;
+  }
+}
diff --git a/src/app/modules/user/components/user-info/user-info.component.ts b/src/app/modules/user/components/user-info/user-info.component.ts
new file mode 100644
index 0000000..bf92206
--- /dev/null
+++ b/src/app/modules/user/components/user-info/user-info.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-user-info',
+    templateUrl: './user-info.component.html',
+    styleUrls: ['./user-info.component.scss'],
+    standalone: false
+})
+export class UserInfoComponent {
+
+}
diff --git a/src/app/modules/user/components/user-media/user-media.component.html b/src/app/modules/user/components/user-media/user-media.component.html
new file mode 100644
index 0000000..cc3a638
--- /dev/null
+++ b/src/app/modules/user/components/user-media/user-media.component.html
@@ -0,0 +1,29 @@
+<mat-card appearance="outlined" class="user-media">
+  <mat-card-title class="user-media-title-wrapper">
+    <p class="user-media-title">Media</p>
+    <app-date-menu></app-date-menu>
+  </mat-card-title>
+
+  <mat-card-content class="medial-items-wrapper">
+    <div class="medial-item">
+      <img src="./assets/user/profile/posts.svg">
+      <p class="media-title">194</p>
+      <p class="media-subtitle">Posts</p>
+    </div>
+    <div class="medial-item">
+      <img src="./assets/user/profile/projects.svg">
+      <p class="media-title">554</p>
+      <p class="media-subtitle">Projects</p>
+    </div>
+    <div class="medial-item">
+      <img src="./assets/user/profile/followers.svg">
+      <p class="media-title">12.8k</p>
+      <p class="media-subtitle">Followers</p>
+    </div>
+    <div class="medial-item">
+      <img src="./assets/user/profile/following.svg">
+      <p class="media-title">1.1k</p>
+      <p class="media-subtitle">Following</p>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/user/components/user-media/user-media.component.scss b/src/app/modules/user/components/user-media/user-media.component.scss
new file mode 100644
index 0000000..c41b852
--- /dev/null
+++ b/src/app/modules/user/components/user-media/user-media.component.scss
@@ -0,0 +1,76 @@
+@use '../../../../styles/font' as *;
+@use '../../../../styles/variables' as *;
+
+.user-media {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.user-media-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-media-title {
+  margin: 0;
+}
+
+.medial-items-wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  column-gap: 16px;
+  row-gap: 10px;
+  margin-top: 12px;
+  margin-bottom: 0;
+  padding-bottom: 0;
+  flex: 1 1 auto;
+  align-content: space-between;
+
+  @media (max-width: $small) {
+    grid-template-columns: repeat(4, minmax(90px, 1fr));
+    grid-template-rows: auto;
+    column-gap: 12px;
+    row-gap: 0;
+    margin-top: 8px;
+    overflow-x: auto;
+    padding-bottom: 6px;
+    flex: initial;
+    align-content: initial;
+  }
+}
+
+.medial-item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-width: 0;
+
+  @media (max-width: $small) {
+    width: 90px;
+  }
+}
+
+.media-title {
+  font-weight: $fw-normal;
+  font-size: $fs-medium;
+  line-height: 24px;
+  color: $dark-grey;
+  margin-top: 4px;
+  margin-bottom: 0;
+}
+
+.media-subtitle {
+  font-weight: $fw-normal;
+  font-size: 12px;
+  line-height: 14px;
+  color: $dark-grey;
+  opacity: 0.6;
+  margin: 0;
+}
diff --git a/src/app/modules/user/components/user-media/user-media.component.ts b/src/app/modules/user/components/user-media/user-media.component.ts
new file mode 100644
index 0000000..ed7ad85
--- /dev/null
+++ b/src/app/modules/user/components/user-media/user-media.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-user-media',
+    templateUrl: './user-media.component.html',
+    styleUrls: ['./user-media.component.scss'],
+    standalone: false
+})
+export class UserMediaComponent {
+}
diff --git a/src/app/modules/user/components/user-projects/user-projects.component.html b/src/app/modules/user/components/user-projects/user-projects.component.html
new file mode 100644
index 0000000..5df8797
--- /dev/null
+++ b/src/app/modules/user/components/user-projects/user-projects.component.html
@@ -0,0 +1,45 @@
+<mat-card appearance="outlined" class="card">
+  <mat-card-title class="user-projects-title-wrapper">
+    <p class="user-projects-title">Projects</p>
+    <app-date-menu></app-date-menu>
+  </mat-card-title>
+
+  <mat-card-content>
+    <div class="chart-wrapper">
+      <div
+        echarts
+        [options]="echartsOptions"
+        [style.height]="apexPieChartOptions?.chart?.height | chartSize:'130px'"
+        [style.width]="apexPieChartOptions?.chart?.width | chartSize:'130px'"
+      ></div>
+      <p class="chart-title">121</p>
+    </div>
+
+    <div class="chart-legend-wrapper">
+      <div class="chart-legend-row">
+        <div class="chart-legend-title-wrapper">
+          <div class="chart-legend-icon blue"></div>
+          <p class="chart-legend-title">New</p>
+        </div>
+        <div class="chart-legend-title-wrapper">
+          <div class="chart-legend-icon yellow"></div>
+          <p class="chart-legend-title">Progress</p>
+        </div>
+      </div>
+      <div class="chart-legend-row">
+        <div class="chart-legend-title-wrapper">
+          <div  class="chart-legend-icon green"></div>
+          <p class="chart-legend-title">Completed</p>
+        </div>
+        <div class="chart-legend-title-wrapper">
+          <div class="chart-legend-icon pink"></div>
+          <p class="chart-legend-title">Canceled</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="button-wrapper">
+      <button mat-stroked-button color="primary" class="button">Details</button>
+    </div>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/user/components/user-projects/user-projects.component.scss b/src/app/modules/user/components/user-projects/user-projects.component.scss
new file mode 100644
index 0000000..d8670b4
--- /dev/null
+++ b/src/app/modules/user/components/user-projects/user-projects.component.scss
@@ -0,0 +1,119 @@
+@use "../../../../styles/font" as *;
+@use "../../../../styles/variables" as *;
+
+.card {
+  height: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: $small) {
+    margin-top: 36px;
+  }
+}
+
+.user-projects-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+  align-items: center;
+}
+
+.user-projects-title {
+  margin: 0;
+}
+
+.chart-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 130px;
+  position: relative;
+}
+
+.chart-title {
+  font-weight: $fw-normal;
+  font-size: $fs-regular;
+  line-height: 24px;
+  color: $dark-grey;
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  pointer-events: none;
+
+  @media (max-width: $small) {
+    font-size: $fs-large;
+  }
+
+  @media (min-width: $small) and (max-width: $normal) {
+    font-size: $fs-small;
+  }
+}
+
+.chart-legend-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.chart-legend-row {
+  display: flex;
+
+  & + .chart-legend-row {
+    margin-top: 4px;
+  }
+}
+
+.chart-legend-title-wrapper {
+  display: flex;
+  align-items: center;
+
+  & + .chart-legend-title-wrapper {
+    margin-left: 8px;
+  }
+}
+
+.chart-legend-icon {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 4px;
+
+  &.blue {
+    background-color: $blue;
+  }
+
+  &.yellow {
+    background-color: $yellow;
+  }
+
+  &.green {
+    background-color: $green;
+  }
+
+  &.pink {
+    background-color: $pink;
+  }
+}
+
+.chart-legend-title {
+  margin: 0;
+  font-size: $fs-small;
+  font-weight: $fw-lighter;
+  color: $grey;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+
+  @media (max-width: $small) {
+    margin-top: 16px;
+  }
+}
+
+.button {
+  margin-top: 0;
+}
diff --git a/src/app/modules/user/components/user-projects/user-projects.component.ts b/src/app/modules/user/components/user-projects/user-projects.component.ts
new file mode 100644
index 0000000..c1dcedf
--- /dev/null
+++ b/src/app/modules/user/components/user-projects/user-projects.component.ts
@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { ChartOptions } from '../../../templates/charts/models/chart-options';
+
+import { colors } from '../../../../consts/colors';
+
+@Component({
+    selector: 'app-user-projects',
+    templateUrl: './user-projects.component.html',
+    styleUrls: ['./user-projects.component.scss'],
+    standalone: false
+})
+export class UserProjectsComponent {
+  public apexPieChartOptions: Partial<ChartOptions>;
+  public colors: typeof colors = colors;
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.apexPieChartOptions;
+    const labels = Array.isArray(options?.labels) ? options.labels : [];
+    const values = Array.isArray(options?.series)
+      ? options.series.filter((item): item is number => typeof item === 'number')
+      : [];
+    const data = values.map((value: number, index: number) => ({
+      value,
+      name: labels[index] ?? `Item ${index + 1}`
+    }));
+
+    return {
+      color: options?.colors ?? [colors.BLUE, colors.YELLOW, colors.GREEN, colors.PINK],
+      tooltip: { trigger: 'item' },
+      legend: { show: false },
+      series: [
+        {
+          type: 'pie',
+          radius: ['50%', '72%'],
+          data,
+          label: { show: false }
+        }
+      ]
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart();
+  }
+
+  public initChart(): void {
+    this.apexPieChartOptions = {
+      series: [44, 55, 13, 43],
+      chart: {
+        type: 'donut',
+        height: 130
+      },
+      dataLabels: {
+        enabled: false
+      },
+      colors: [
+        colors.BLUE,
+        colors.YELLOW,
+        colors.GREEN,
+        colors.PINK
+      ],
+      legend: {
+        show: false
+      },
+      responsive: [{
+        breakpoint: 576,
+        options: {
+          legend: {
+            position: 'right',
+          },
+        },
+      }],
+      labels: ['New', 'Progress', 'Completed', 'Canceled'],
+    };
+  }
+}
diff --git a/src/app/modules/user/components/user-tasks/user-tasks.component.html b/src/app/modules/user/components/user-tasks/user-tasks.component.html
new file mode 100644
index 0000000..e6fa09d
--- /dev/null
+++ b/src/app/modules/user/components/user-tasks/user-tasks.component.html
@@ -0,0 +1,232 @@
+<mat-card appearance="outlined" class="user-tasks-card">
+  <mat-card-title class="user-tasks-title-wrapper">
+    <p class="user-tasks-title">Tasks</p>
+    <app-date-menu></app-date-menu>
+  </mat-card-title>
+
+  <mat-card-content>
+    <mat-tab-group color="warn" mat-align-tabs="start">
+      <mat-tab label="Today">
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time task-done">10.21</p>
+            <div class="task-circle"></div>
+            <p class="task-text task-done">Call conference with a New Client</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time task-done">11.30</p>
+            <div class="task-circle"></div>
+            <p class="task-text task-done">Presentation Demo Ecological Project</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">12.30</p>
+            <div class="task-circle yellow"></div>
+            <p class="task-text">Call with PR Manager</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">14.00</p>
+            <div class="task-circle blue"></div>
+            <p class="task-text">Interview with a new UI/UX</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">15.00</p>
+            <div class="task-circle yellow"></div>
+            <p class="task-text">Call conference with a New Client</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">15.45</p>
+            <div class="task-circle green"></div>
+            <p class="task-text">Presentation Demo Ecological Project</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">16.00</p>
+            <div class="task-circle pink"></div>
+            <p class="task-text">Sales Presentation</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">17.00</p>
+            <div class="task-circle yellow"></div>
+            <p class="task-text">Call conference</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="This Week">
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time task-done">10.21</p>
+            <div class="task-circle"></div>
+            <p class="task-text task-done">Call conference with a New Client</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time task-done">11.30</p>
+            <div class="task-circle"></div>
+            <p class="task-text task-done">Presentation Demo Ecological Project</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">12.30</p>
+            <div class="task-circle yellow"></div>
+            <p class="task-text">Call with PR Manager</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">14.00</p>
+            <div class="task-circle blue"></div>
+            <p class="task-text">Interview with a new UI/UX</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">15.00</p>
+            <div class="task-circle yellow"></div>
+            <p class="task-text">Call conference with a New Client</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">15.45</p>
+            <div class="task-circle green"></div>
+            <p class="task-text">Presentation Demo Ecological Project</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">16.00</p>
+            <div class="task-circle pink"></div>
+            <p class="task-text">Sales Presentation</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">17.00</p>
+            <div class="task-circle yellow"></div>
+            <p class="task-text">Call conference</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="This Month">
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time task-done">10.21</p>
+            <div class="task-circle"></div>
+            <p class="task-text task-done">Call conference with a New Client</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time task-done">11.30</p>
+            <div class="task-circle"></div>
+            <p class="task-text task-done">Presentation Demo Ecological Project</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">12.30</p>
+            <div class="task-circle yellow"></div>
+            <p class="task-text">Call with PR Manager</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">14.00</p>
+            <div class="task-circle blue"></div>
+            <p class="task-text">Interview with a new UI/UX</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">15.00</p>
+            <div class="task-circle yellow"></div>
+            <p class="task-text">Call conference with a New Client</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">15.45</p>
+            <div class="task-circle green"></div>
+            <p class="task-text">Presentation Demo Ecological Project</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">16.00</p>
+            <div class="task-circle pink"></div>
+            <p class="task-text">Sales Presentation</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+
+        <div class="task-wrapper">
+          <div class="task-inner-wrapper">
+            <p class="task-time">17.00</p>
+            <div class="task-circle yellow"></div>
+            <p class="task-text">Call conference</p>
+          </div>
+          <mat-icon class="task-settings">more_vert</mat-icon>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/user/components/user-tasks/user-tasks.component.scss b/src/app/modules/user/components/user-tasks/user-tasks.component.scss
new file mode 100644
index 0000000..b109254
--- /dev/null
+++ b/src/app/modules/user/components/user-tasks/user-tasks.component.scss
@@ -0,0 +1,93 @@
+@use "../../../../styles/font" as *;
+@use "../../../../styles/variables" as *;
+
+.user-tasks-card {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.user-tasks-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.user-tasks-title {
+  margin: 0;
+}
+
+.task-wrapper {
+  padding: 16px 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid $gray-80;
+}
+
+.task-inner-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.task-time {
+  font-weight: $fw-normal;
+  font-size: 10px;
+  line-height: 20px;
+  color: $grey;
+  margin: 0;
+}
+
+.task-circle {
+  width: 6px;
+  height: 6px;
+  background-color: $gray-06;
+  margin-left: 14px;
+  border-radius: 50%;
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.green {
+  background-color: $green;
+}
+
+.pink {
+  background-color: $pink;
+}
+
+.task-text {
+  font-weight: $fw-normal;
+  font-size: $fs-small;
+  line-height: 20px;
+  color: $grey;
+  margin: 0 0 0 8px;
+}
+
+.task-done {
+  text-decoration-line: line-through;
+  color: $gray-06;
+}
+
+.task-settings {
+  height: 25px;
+  width: 25px;
+  padding: 0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: $light-grey;
+  font-size: $fs-medium;
+
+  &:hover {
+    background-color: $blue;
+    color: $white-35;
+  }
+}
diff --git a/src/app/modules/user/components/user-tasks/user-tasks.component.ts b/src/app/modules/user/components/user-tasks/user-tasks.component.ts
new file mode 100644
index 0000000..7a54df7
--- /dev/null
+++ b/src/app/modules/user/components/user-tasks/user-tasks.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-user-tasks',
+    templateUrl: './user-tasks.component.html',
+    styleUrls: ['./user-tasks.component.scss'],
+    standalone: false
+})
+export class UserTasksComponent {
+
+}
diff --git a/src/app/modules/user/containers/add-page/add-page.component.html b/src/app/modules/user/containers/add-page/add-page.component.html
new file mode 100644
index 0000000..8f52288
--- /dev/null
+++ b/src/app/modules/user/containers/add-page/add-page.component.html
@@ -0,0 +1,247 @@
+<app-breadcrumb [path]="routes.Users_CREATE"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="add-line-card">
+  <mat-card-content class="add-line-wrapper">
+    <div class="add-line-item-wrapper" [ngClass]="{'active': step >= 0}">
+      <div class="add-line-item">
+        @if (step === 0) {
+          <p class="add-line-item-text">1</p>
+        }
+        @if (step > 0) {
+          <mat-icon class="add-line-item-icon">done</mat-icon>
+        }
+      </div>
+      <p class="add-line-item-title">Create Account</p>
+    </div>
+
+    <hr class="break-line-wrapper">
+
+    <div class="add-line-item-wrapper" [ngClass]="{'active': step >= 1}">
+      <div class="add-line-item">
+        @if (step <= 1) {
+          <p class="add-line-item-text">2</p>
+        }
+        @if (step > 1) {
+          <mat-icon class="add-line-item-icon">done</mat-icon>
+        }
+      </div>
+      <p class="add-line-item-title">User Details</p>
+    </div>
+
+    <hr class="break-line-wrapper">
+
+    <div class="add-line-item-wrapper" [ngClass]="{'active': step >= 2}">
+      <div class="add-line-item">
+        @if (step <= 2) {
+          <p class="add-line-item-text">3</p>
+        }
+        @if (step > 2) {
+          <mat-icon class="add-line-item-icon">done</mat-icon>
+        }
+      </div>
+      <p class="add-line-item-title">Business Details</p>
+    </div>
+
+    <hr class="break-line-wrapper">
+
+    <div class="add-line-item-wrapper" [ngClass]="{'active': step >= 3}">
+      <div class="add-line-item">
+        <p class="add-line-item-text">4</p>
+      </div>
+      <p class="add-line-item-title">Social</p>
+    </div>
+  </mat-card-content>
+</mat-card>
+
+@if (step === 0) {
+  <mat-card appearance="outlined" class="steps-card">
+    <mat-card-content class="content">
+      <div class="content-wrapper">
+        <mat-card-title class="content-title">Create New Account</mat-card-title>
+        <div class="font-wrapper">
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>User Name</mat-label>
+            <input matInput>
+            <mat-hint>Please enter your user name</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Email Address</mat-label>
+            <input matInput>
+            <mat-hint>We’ll never share your email with anyone else</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Password</mat-label>
+            <input matInput>
+            <mat-hint>Enter your password. Min 6 characters long</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Role</mat-label>
+            <mat-select class="form-select">
+              <mat-option value="user">User</mat-option>
+              <mat-option value="admin">Admin</mat-option>
+            </mat-select>
+            <mat-hint>Please choose the role</mat-hint>
+          </mat-form-field>
+          <button mat-flat-button color="primary" class="next-button" (click)="increment()">next</button>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+}
+
+@if (step === 1) {
+  <mat-card appearance="outlined" class="steps-card">
+    <mat-card-content class="content">
+      <div>
+        <mat-card-title class="content-title">Create User Details</mat-card-title>
+        <div class="font-wrapper">
+          <div>
+            <p class="upload-image-text">Photo:</p>
+            <button mat-flat-button color="primary" class="upload-image-button">upload an image</button>
+            <p class="upload-image-text">.PNG, .JPG, .JPEG</p>
+          </div>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>First Name</mat-label>
+            <input matInput>
+            <mat-hint>Enter your first name</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Last Name</mat-label>
+            <input matInput>
+            <mat-hint>Enter your last name</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Contact Number</mat-label>
+            <input matInput>
+            <mat-hint>Enter your contact number</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Email</mat-label>
+            <input matInput>
+            <mat-hint>Enter your email</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Country</mat-label>
+            <mat-select class="form-select">
+              <mat-option value="user">User</mat-option>
+              <mat-option value="admin">Admin</mat-option>
+            </mat-select>
+            <mat-hint>Please choose the country</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>State</mat-label>
+            <mat-select class="form-select">
+              <mat-option value="user">User</mat-option>
+              <mat-option value="admin">Admin</mat-option>
+            </mat-select>
+            <mat-hint>Please choose the state</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>City</mat-label>
+            <mat-select class="form-select">
+              <mat-option value="user">User</mat-option>
+              <mat-option value="admin">Admin</mat-option>
+            </mat-select>
+            <mat-hint>Please choose the city</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Address</mat-label>
+            <input matInput>
+            <mat-hint>Enter your address</mat-hint>
+          </mat-form-field>
+          <div class="buttons-wrapper">
+            <button mat-stroked-button color="primary" (click)="decrement()">back</button>
+            <button mat-flat-button color="primary" (click)="increment()">next</button>
+          </div>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+}
+
+@if (step === 2) {
+  <mat-card appearance="outlined" class="steps-card">
+    <mat-card-content class="content">
+      <div>
+        <mat-card-title class="content-title">Business Details</mat-card-title>
+        <div class="font-wrapper">
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Company Name</mat-label>
+            <input matInput>
+            <mat-hint>Enter your company name</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Company Registered ID</mat-label>
+            <input matInput>
+            <mat-hint>Enter your company registered ID</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Company Email</mat-label>
+            <input matInput>
+            <mat-hint>Enter your company email</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Company Contact</mat-label>
+            <input matInput>
+            <mat-hint>Enter your company contact</mat-hint>
+          </mat-form-field>
+          <div class="buttons-wrapper">
+            <button mat-stroked-button color="primary" (click)="decrement()">back</button>
+            <button mat-flat-button color="primary" (click)="increment()">next</button>
+          </div>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+}
+
+@if (step === 3) {
+  <mat-card appearance="outlined" class="steps-card">
+    <mat-card-content class="content">
+      <div>
+        <mat-card-title class="content-title">Social</mat-card-title>
+        <div class="font-wrapper">
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Facebook</mat-label>
+            <input matInput>
+            <mat-hint>Enter your Facebook link</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Twitter</mat-label>
+            <input matInput>
+            <mat-hint>Enter your Twitter link</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Instagram</mat-label>
+            <input matInput>
+            <mat-hint>Enter your Instagram link</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Company Contact</mat-label>
+            <input matInput>
+            <mat-hint>Enter your company contact</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>GitHub</mat-label>
+            <input matInput>
+            <mat-hint>Enter your GitHub link</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>CodePen</mat-label>
+            <input matInput>
+            <mat-hint>Enter your CodePen link</mat-hint>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="form-field">
+            <mat-label>Slack</mat-label>
+            <input matInput>
+            <mat-hint>Enter your Slack link</mat-hint>
+          </mat-form-field>
+          <div class="buttons-wrapper">
+            <button mat-stroked-button color="primary" (click)="decrement()">back</button>
+            <button mat-flat-button color="primary" [routerLink]="routes.Users">finish</button>
+          </div>
+        </div>
+      </div>
+    </mat-card-content>
+  </mat-card>
+}
diff --git a/src/app/modules/user/containers/add-page/add-page.component.scss b/src/app/modules/user/containers/add-page/add-page.component.scss
new file mode 100644
index 0000000..9174091
--- /dev/null
+++ b/src/app/modules/user/containers/add-page/add-page.component.scss
@@ -0,0 +1,153 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+
+.add-line-card {
+  margin-top: 24px;
+  padding: 48px;
+
+  @media(max-width: $small) {
+    padding: 24px;
+  }
+}
+
+.add-line-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @media(max-width: $small) {
+    overflow-x: auto;
+  }
+}
+
+.add-line-item-wrapper {
+  display: flex;
+  align-items: center;
+
+  &.active {
+    & .add-line-item {
+      background-color: $blue;
+    }
+
+    & .add-line-item-title {
+      color: $dark-grey;
+    }
+  }
+}
+
+.add-line-item {
+  width: 24px;
+  height: 24px;
+  background-color: $gray-06;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.add-line-item-text {
+  color: $white;
+  font-size: 12px;
+  margin: 0;
+}
+
+.add-line-item-icon {
+  color: $white;
+  font-size: 12px;
+  margin: 0;
+  height: 12px;
+  width: 12px;
+}
+
+.add-line-item-title {
+  color: $grey;
+  font-size: $fs-small;
+  font-weight: $fw-normal;
+  margin: 0 0 0 8px;
+  width: max-content;
+
+  @media(max-width: $small) {
+    display: none;
+  }
+}
+
+.break-line-wrapper {
+  width: 100%;
+  margin: 0 8px;
+  min-width: 50px;
+
+  @media(max-width: $small) {
+    display: none;
+  }
+}
+
+.steps-card {
+  margin-top: 24px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+}
+
+.content {
+  display: flex;
+  justify-content: center;
+}
+
+.content-wrapper {
+  @media(max-width: $small) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+.content-title {
+  margin-bottom: 30px;
+}
+
+.font-wrapper {
+  width: max-content;
+
+  @media(max-width: $small) {
+    width: 100%;
+  }
+}
+
+.upload-image-text {
+  font-size: $fs-normal;
+  font-weight: $fw-normal;
+  color: $grey;
+  margin: 0;
+
+  &:last-child {
+    margin-bottom: 20px;
+  }
+}
+
+.upload-image-button {
+  margin: 20px 0;
+}
+
+.form-field {
+  display: block;
+  width: 600px;
+  margin-bottom: 35px;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.form-select {
+  width: 100%;
+}
+
+.next-button {
+  float: right;
+}
+
+.buttons-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+button {
+  text-transform: uppercase;
+}
diff --git a/src/app/modules/user/containers/add-page/add-page.component.ts b/src/app/modules/user/containers/add-page/add-page.component.ts
new file mode 100644
index 0000000..14a671c
--- /dev/null
+++ b/src/app/modules/user/containers/add-page/add-page.component.ts
@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {routes} from '../../../../consts';
+
+@Component({
+    selector: 'app-add-page',
+    templateUrl: './add-page.component.html',
+    styleUrls: ['./add-page.component.scss'],
+    standalone: false
+})
+export class AddPageComponent {
+  public routes: typeof routes = routes;
+  public step: number = 0;
+
+  public increment() {
+    this.step++;
+  }
+
+  public decrement() {
+    this.step--;
+  }
+}
+
diff --git a/src/app/modules/user/containers/edit-page/edit-page.component.html b/src/app/modules/user/containers/edit-page/edit-page.component.html
new file mode 100644
index 0000000..8dca265
--- /dev/null
+++ b/src/app/modules/user/containers/edit-page/edit-page.component.html
@@ -0,0 +1,76 @@
+<app-breadcrumb [path]="routes.Users_EDIT"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="edit-nav-card">
+  <mat-card-content>
+    <mat-tab-group
+      mat-align-tabs="center"
+      class="nav-items-group"
+      [selectedIndex]="selectedTab.value"
+      (selectedIndexChange)="selectedTab.setValue($event)"
+      >
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <div class="nav-item-wrapper">
+            <img class="nav-item-icon" src="./assets/user/edit/account.svg">
+            <p class="nav-item-title">Account</p>
+          </div>
+        </ng-template>
+
+        <div class="nav-empty-item"></div>
+      </mat-tab>
+
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <div class="nav-item-wrapper">
+            <mat-icon class="nav-item-icon">perm_identity</mat-icon>
+            <p class="nav-item-title">Profile</p>
+          </div>
+        </ng-template>
+
+        <div class="nav-empty-item"></div>
+      </mat-tab>
+
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <div class="nav-item-wrapper">
+            <mat-icon class="nav-item-icon">lock</mat-icon>
+            <p class="nav-item-title">Change Password</p>
+          </div>
+        </ng-template>
+
+        <div class="nav-empty-item"></div>
+      </mat-tab>
+
+      <mat-tab>
+        <ng-template mat-tab-label>
+          <div class="nav-item-wrapper">
+            <mat-icon class="nav-item-icon">settings</mat-icon>
+            <p class="nav-item-title">Settings</p>
+          </div>
+        </ng-template>
+
+        <div class="nav-empty-item"></div>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>
+
+<mat-card appearance="outlined" class="form-card">
+  <mat-card-content>
+    @if (selectedTab.value === 0) {
+      <app-account-edit-form></app-account-edit-form>
+    }
+
+    @if (selectedTab.value === 1) {
+      <app-profile-edit-form></app-profile-edit-form>
+    }
+
+    @if (selectedTab.value === 2) {
+      <app-password-edit-form></app-password-edit-form>
+    }
+
+    @if (selectedTab.value === 3) {
+      <app-settings-edit-form></app-settings-edit-form>
+    }
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/modules/user/containers/edit-page/edit-page.component.scss b/src/app/modules/user/containers/edit-page/edit-page.component.scss
new file mode 100644
index 0000000..ff2c845
--- /dev/null
+++ b/src/app/modules/user/containers/edit-page/edit-page.component.scss
@@ -0,0 +1,39 @@
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/font" as *;
+
+.edit-nav-card, .form-card {
+  margin-top: 24px;
+}
+
+.edit-nav-card {
+  .add-line-card {
+    padding: 0 30px;
+  }
+}
+
+.nav-items-group {
+  padding: 8px;
+}
+
+.nav-item-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 9px 12px 6px;
+}
+
+.nav-item-title {
+  margin: 0 0 0 8px;
+  font-size: $fs-small;
+  font-weight: $fw-normal;
+  text-transform: uppercase;
+
+  @media(max-width: $small) {
+    display: none;
+  }
+}
+
+.nav-empty-item {
+  width: 100%;
+  height: 1px;
+}
diff --git a/src/app/modules/user/containers/edit-page/edit-page.component.ts b/src/app/modules/user/containers/edit-page/edit-page.component.ts
new file mode 100644
index 0000000..78a6035
--- /dev/null
+++ b/src/app/modules/user/containers/edit-page/edit-page.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import {routes} from '../../../../consts';
+import {FormControl} from '@angular/forms';
+
+@Component({
+    selector: 'app-edit-page',
+    templateUrl: './edit-page.component.html',
+    styleUrls: ['./edit-page.component.scss'],
+    standalone: false
+})
+export class EditPageComponent implements OnInit {
+  public routes: typeof routes = routes;
+  public selectedTab = new FormControl(0, { nonNullable: true });
+
+  ngOnInit(): void {
+  }
+
+
+
+}
diff --git a/src/app/modules/user/containers/index.ts b/src/app/modules/user/containers/index.ts
new file mode 100644
index 0000000..35ce327
--- /dev/null
+++ b/src/app/modules/user/containers/index.ts
@@ -0,0 +1,4 @@
+export * from './add-page/add-page.component';
+export * from './edit-page/edit-page.component';
+export * from './list-page/list-page.component';
+export * from './profile-page/profile-page.component';
diff --git a/src/app/modules/user/containers/list-page/list-page.component.html b/src/app/modules/user/containers/list-page/list-page.component.html
new file mode 100644
index 0000000..256137d
--- /dev/null
+++ b/src/app/modules/user/containers/list-page/list-page.component.html
@@ -0,0 +1,141 @@
+<app-breadcrumb [path]="routes.Users"></app-breadcrumb>
+
+<mat-card appearance="outlined" class="add-card">
+  <mat-card-content class="add-content">
+    <div class="first-buttons-wrapper">
+      <button mat-flat-button color="success" class="add-button" [routerLink]="routes.Users">
+        <div class="button-inert-wrapper">
+          <mat-icon>add</mat-icon>
+          <p class="button-text">Add</p>
+        </div>
+      </button>
+
+      <button mat-stroked-button color="primary" class="filters-button">
+        <div class="button-inert-wrapper">
+          <mat-icon>filter_list</mat-icon>
+          <p class="button-text">filters</p>
+        </div>
+      </button>
+    </div>
+
+    <div class="second-buttons-wrapper">
+      <button mat-stroked-button color="warn" class="download-button">
+        <div class="button-inert-wrapper">
+          <mat-icon>get_app</mat-icon>
+          <p class="button-text">download</p>
+        </div>
+      </button>
+
+      <mat-form-field appearance="outline" class="search mat-form-field-should-float">
+        <mat-label>Search</mat-label>
+        <input matInput>
+        <mat-icon matPrefix>search</mat-icon>
+      </mat-form-field>
+    </div>
+  </mat-card-content>
+</mat-card>
+
+<mat-card appearance="outlined" class="users-table">
+  <mat-card-content>
+    <div class="table-wrapper">
+      <table mat-table [dataSource]="dataSource" matSort class="table">
+
+        <!-- Checkbox Column -->
+        <ng-container matColumnDef="select">
+          <th mat-header-cell *matHeaderCellDef>
+            <mat-checkbox
+              (change)="$event ? masterToggle() : null"
+              [checked]="selection.hasValue() && isAllSelected()"
+              [indeterminate]="selection.hasValue() && !isAllSelected()"
+              [aria-label]="checkboxLabel()"
+              color="warn"
+            ></mat-checkbox>
+          </th>
+          <td mat-cell *matCellDef="let row">
+            <mat-checkbox
+              (click)="$event.stopPropagation()"
+              (change)="$event ? selection.toggle(row) : null"
+              [checked]="selection.isSelected(row)"
+              [aria-label]="checkboxLabel(row)"
+              color="warn"
+            ></mat-checkbox>
+          </td>
+        </ng-container>
+
+        <!-- Id Column -->
+        <ng-container matColumnDef="id">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> ID </th>
+          <td mat-cell *matCellDef="let element" class="table-body"> {{element.id}} </td>
+        </ng-container>
+
+        <!-- Name Column -->
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> NAME </th>
+          <td mat-cell *matCellDef="let element" class="table-body">
+            <div class="name-wrapper">
+              <img class="user-avatar" src="./assets/user/list/{{element.id}}.png" alt="avatar">
+              <p class="user-name">{{element.name}}</p>
+            </div>
+          </td>
+        </ng-container>
+
+        <!-- Role Column -->
+        <ng-container matColumnDef="role">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> ROLE </th>
+          <td mat-cell *matCellDef="let element" class="table-body"> {{element.role}} </td>
+        </ng-container>
+
+        <!-- Company Name Column -->
+        <ng-container matColumnDef="company_name">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> COMPANY </th>
+          <td mat-cell *matCellDef="let element" class="table-body"> {{element.companyName}} </td>
+        </ng-container>
+
+        <!-- Email Column -->
+        <ng-container matColumnDef="email">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> EMAIL </th>
+          <td mat-cell *matCellDef="let element" class="table-body">{{element.email}}</td>
+        </ng-container>
+
+        <!-- Status Column -->
+        <ng-container matColumnDef="status">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> STATUS </th>
+          <td mat-cell *matCellDef="let element" class="table-body">
+            <mat-chip-listbox>
+              <mat-chip-option class="badge" [color]="element.status === 'active' ? 'primary' : 'warn'" selected>{{element.status | titlecase}}</mat-chip-option>
+            </mat-chip-listbox>
+          </td>
+        </ng-container>
+
+
+        <!-- Created At Column -->
+        <ng-container matColumnDef="created_at">
+          <th mat-header-cell *matHeaderCellDef class="table-header" mat-sort-header> CREATED </th>
+          <td mat-cell *matCellDef="let element" class="table-body">{{element.createdAt}}</td>
+        </ng-container>
+
+        <!-- Action Column -->
+        <ng-container matColumnDef="actions">
+          <th mat-header-cell *matHeaderCellDef class="table-header"> ACTIONS </th>
+          <td mat-cell *matCellDef="let element" class="table-body">
+            <div class="action-icon-wrapper">
+              <mat-icon class="action-icon" [matMenuTriggerFor]="menu">more_vert</mat-icon>
+              <mat-menu #menu="matMenu">
+                <button mat-menu-item>Edit</button>
+                <button mat-menu-item>Info</button>
+                <button mat-menu-item>Delete</button>
+              </mat-menu>
+            </div>
+          </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+    </div>
+
+    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+  </mat-card-content>
+
+</mat-card>
+
diff --git a/src/app/modules/user/containers/list-page/list-page.component.scss b/src/app/modules/user/containers/list-page/list-page.component.scss
new file mode 100644
index 0000000..dc7131d
--- /dev/null
+++ b/src/app/modules/user/containers/list-page/list-page.component.scss
@@ -0,0 +1,166 @@
+@use './src/app/styles/font' as *;
+@use './src/app/styles/variables' as *;
+
+.add-card {
+  margin-top: 24px;
+  height: 90px;
+
+  @media (max-width: $small) {
+    height: auto;
+  }
+}
+
+.add-content {
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.first-buttons-wrapper {
+  display: flex;
+
+  @media (max-width: $small) {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+.add-button {
+  padding: 6px 16px;
+  height: fit-content;
+}
+
+.button-inert-wrapper {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: $small) {
+    justify-content: center;
+  }
+}
+
+.button-text {
+  margin: 0 0 0 8px;
+}
+
+.second-buttons-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  @media (max-width: $small) {
+    width: 100%;
+    align-items: flex-start;
+    margin-top: 16px;
+    height: auto;
+  }
+}
+
+.filters-button {
+  display: block;
+  padding: 5px 15px;
+  text-transform: uppercase;
+  border-color: $blue;
+  box-shadow: none;
+  margin: 0 0 0 16px;
+  width: fit-content;
+  height: fit-content;
+}
+
+.download-button {
+  display: block;
+  padding: 5px 15px;
+  text-transform: uppercase;
+  border-color: $pink;
+  box-shadow: none;
+  margin-bottom: 8px;
+  width: fit-content;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.search {
+  margin-bottom: -18px;
+
+  @media (max-width: $small) {
+    width: 100%;
+    margin: 16px 0 0 0;
+  }
+}
+
+.users-table {
+  margin-top: 24px;
+  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+}
+
+.table-header {
+  padding: 14px 30px 14px 15px;
+  color: $dark-grey;
+  font-size: $fs-small;
+  font-weight: $fw-normal;
+  width: max-content;
+}
+
+.table-body {
+  padding: 14px 30px 14px 15px;
+  color: $dark-grey;
+  font-size: $fs-small;
+  font-weight: $fw-lighter;
+}
+
+.name-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.user-avatar {
+  margin-right: 8px;
+}
+
+.user-name {
+  margin: 0;
+  width: max-content;
+}
+
+.badge {
+  min-height: 18px;
+}
+
+.action-icons-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.action-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $light-grey;
+
+  &:hover {
+    background-color: $black-04;
+  }
+}
+
+.action-icon {
+  padding: 0;
+  font-size: $fs-large;
+}
diff --git a/src/app/modules/user/containers/list-page/list-page.component.spec.ts b/src/app/modules/user/containers/list-page/list-page.component.spec.ts
new file mode 100644
index 0000000..1442f0d
--- /dev/null
+++ b/src/app/modules/user/containers/list-page/list-page.component.spec.ts
@@ -0,0 +1,88 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { ListPageComponent } from './list-page.component';
+import { UserDetails } from '../../models';
+import { UserService } from '../../service';
+
+describe('ListPageComponent', () => {
+  let fixture: ComponentFixture<ListPageComponent>;
+  let component: ListPageComponent;
+
+  const mockUsers: UserDetails[] = [
+    {
+      id: '1',
+      name: 'Jane Hew',
+      role: 'admin',
+      companyName: 'Flatlogic',
+      email: 'admin@flatlogic.com',
+      status: 'active',
+      createdAt: '2020-06-07',
+    },
+    {
+      id: '2',
+      name: 'Axel Pittman',
+      role: 'user',
+      companyName: 'Flatlogic',
+      email: 'axel@flatlogic.com',
+      status: 'inactive',
+      createdAt: '2020-06-07',
+    },
+  ];
+
+  const userServiceMock = {
+    getUsers: jest.fn(() => of(mockUsers)),
+  } as unknown as UserService;
+
+  const dialogMock = {
+    open: jest.fn(),
+  } as unknown as MatDialog;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ListPageComponent],
+      providers: [
+        { provide: UserService, useValue: userServiceMock },
+        { provide: MatDialog, useValue: dialogMock },
+      ],
+    })
+      .overrideTemplate(ListPageComponent, '')
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ListPageComponent);
+    component = fixture.componentInstance;
+    component.sort = {} as MatSort;
+    component.paginator = {} as MatPaginator;
+    fixture.detectChanges();
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('creates datasource from UserService payload', () => {
+    expect(component.dataSource.data).toEqual(mockUsers);
+  });
+
+  it('selects and clears all rows via masterToggle', () => {
+    expect(component.selection.selected.length).toBe(0);
+
+    component.masterToggle();
+    expect(component.selection.selected.length).toBe(mockUsers.length);
+    expect(component.isAllSelected()).toBe(true);
+
+    component.masterToggle();
+    expect(component.selection.selected.length).toBe(0);
+    expect(component.isAllSelected()).toBe(false);
+  });
+
+  it('opens delete dialog with expected width', () => {
+    component.deleteUser();
+
+    expect(dialogMock.open).toHaveBeenCalledWith(expect.any(Function), {
+      width: '396px',
+    });
+  });
+});
diff --git a/src/app/modules/user/containers/list-page/list-page.component.ts b/src/app/modules/user/containers/list-page/list-page.component.ts
new file mode 100644
index 0000000..adb6ff0
--- /dev/null
+++ b/src/app/modules/user/containers/list-page/list-page.component.ts
@@ -0,0 +1,76 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {routes} from '../../../../consts';
+import {MatSort} from '@angular/material/sort';
+import {MatPaginator} from '@angular/material/paginator';
+import {Observable} from 'rxjs';
+import {MatTableDataSource} from '@angular/material/table';
+import {SelectionModel} from '@angular/cdk/collections';
+import {take} from 'rxjs';
+import {UserDetails} from '../../models';
+import {UserService} from '../../service';
+import {MatDialog} from '@angular/material/dialog';
+import {DeleteUserPopupComponent} from '../../popups/delete-user-popup/delete-user-popup.component';
+
+@Component({
+    selector: 'app-list-page',
+    templateUrl: './list-page.component.html',
+    styleUrls: ['./list-page.component.scss'],
+    standalone: false
+})
+export class ListPageComponent implements OnInit {
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+  public routes: typeof routes = routes;
+  public users$: Observable<UserDetails[]>;
+  public displayedColumns: string[] = ['select', 'id', 'name', 'role', 'company_name', 'email', 'status', 'created_at', 'actions'];
+  public dataSource: MatTableDataSource<UserDetails>;
+
+  selection = new SelectionModel<UserDetails>(true, []);
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.dataSource.data.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.dataSource.data.forEach(row => this.selection.select(row));
+  }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: UserDetails): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.id + 1}`;
+  }
+
+  constructor(
+    private service: UserService,
+    public dialog: MatDialog
+  ) {
+    this.users$ = this.service.getUsers();
+
+
+    this.users$.pipe(
+      take(1)
+    ).subscribe((users: UserDetails[]) => {
+      this.dataSource = new MatTableDataSource(users);
+    });
+  }
+
+  ngOnInit() {
+    this.dataSource.sort = this.sort;
+    this.dataSource.paginator = this.paginator;
+  }
+
+  public deleteUser(): void {
+    this.dialog.open(DeleteUserPopupComponent, {
+      width: '396px'
+    });
+  }
+}
diff --git a/src/app/modules/user/containers/profile-page/profile-page.component.html b/src/app/modules/user/containers/profile-page/profile-page.component.html
new file mode 100644
index 0000000..4ae0dee
--- /dev/null
+++ b/src/app/modules/user/containers/profile-page/profile-page.component.html
@@ -0,0 +1,86 @@
+<app-breadcrumb [path]="routes.PROFILE"></app-breadcrumb>
+
+<div class="main-content-wrapper">
+  <div class="left-content-wrapper">
+    <app-user-info></app-user-info>
+
+    <div class="inner-content-wrapper">
+      <app-user-media class="user-media"></app-user-media>
+      <app-user-projects class="user-projects"></app-user-projects>
+    </div>
+
+    <app-user-article></app-user-article>
+  </div>
+
+  <div class="right-content-wrapper">
+    <app-user-files [isDark]="isDarkMode"></app-user-files>
+
+    <div class="bottom-right-content-wrapper">
+      <app-user-tasks class="user-tasks"></app-user-tasks>
+
+      <div class="right-bottom-right-content-wrapper">
+        <div class="calendar-wrapper">
+          <mat-card appearance="outlined">
+            <div class="calendar-navigation">
+              <div class="calendar-array-wrapper" mwlCalendarPreviousView view="month" [(viewDate)]="viewDate">
+                <mat-icon class="calendar-array">keyboard_arrow_left</mat-icon>
+              </div>
+
+              <div>
+                <p class="calendar-date-title">{{viewDate | date: 'LLLL yyyy'}}</p>
+              </div>
+
+              <div class="calendar-array-wrapper" mwlCalendarNextView view="month" [(viewDate)]="viewDate">
+                <mat-icon class="calendar-array">keyboard_arrow_right</mat-icon>
+              </div>
+            </div>
+
+            <mwl-calendar-month-view [viewDate]="viewDate" [events]="calendarEvents"></mwl-calendar-month-view>
+          </mat-card>
+        </div>
+
+        <div class="views-wrapper">
+          <mat-card appearance="outlined">
+            <mat-card-title class="views-title-wrapper">
+              <p class="views-title">Views</p>
+              <mat-icon class="views-title-icon">more_vert</mat-icon>
+            </mat-card-title>
+
+            <mat-card-content class="views-content">
+              <div class="views-info-wrapper">
+                <div class="views-stats-row">
+                  <p class="views-value">7.156</p>
+                  <img src="./assets/user/profile/trending-up.svg" class="trending-up-icon">
+                </div>
+                <p class="views-percent">7.2%</p>
+
+                <button mat-stroked-button color="primary" class="views-button">See More</button>
+              </div>
+
+              <div class="views-chart-wrapper">
+                <div
+                  echarts
+                  [options]="echartsOptions"
+                  [style.height]="chart?.chart?.height | chartSize:'100px'"
+                  [style.width]="chart?.chart?.width | chartSize:'100%'"
+                ></div>
+              </div>
+            </mat-card-content>
+          </mat-card>
+        </div>
+
+        <div class="update-wrapper">
+          <mat-card appearance="outlined" class="update-card">
+            <div class="update-title-wrapper">
+              <img src="./assets/user/profile/update-icon.svg">
+              <p class="update-title">Updates</p>
+            </div>
+
+            <button mat-stroked-button class="update-button">Details</button>
+          </mat-card>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/src/app/modules/user/containers/profile-page/profile-page.component.scss b/src/app/modules/user/containers/profile-page/profile-page.component.scss
new file mode 100644
index 0000000..0328cf4
--- /dev/null
+++ b/src/app/modules/user/containers/profile-page/profile-page.component.scss
@@ -0,0 +1,272 @@
+@use "../../../../styles/font" as *;
+@use "../../../../styles/variables" as *;
+
+.main-content-wrapper {
+  display: flex;
+  width: 100%;
+  margin-top: 36px;
+
+  @media (max-width: $medium) {
+    flex-wrap: wrap;
+  }
+}
+
+.left-content-wrapper {
+  width: 40%;
+  padding-right: 18px;
+  box-sizing: border-box;
+
+  @media (max-width: $medium) {
+    width: 100%;
+    padding: 0;
+  }
+}
+
+app-user-info,
+app-user-files {
+  display: block;
+  height: 310px;
+  min-height: 310px;
+
+  @media (max-width: $medium) {
+    height: auto;
+    min-height: 0;
+  }
+}
+
+.right-content-wrapper {
+  width: 60%;
+  padding-left: 18px;
+  box-sizing: border-box;
+
+  @media (max-width: $medium) {
+    width: 100%;
+    margin-top: 0;
+    padding: 0;
+  }
+
+  @media (min-width: $medium) and (max-width: $large) {
+    margin-top: 36px;
+  }
+}
+
+.bottom-right-content-wrapper {
+  display: flex;
+  gap: 36px;
+  height: fit-content;
+  margin-top: 36px;
+
+  @media (max-width: $medium) {
+    flex-direction: column;
+    height: fit-content;
+  }
+}
+
+.user-tasks {
+  width: auto;
+  flex: 0 0 calc(60% - 18px);
+  min-width: 0;
+
+  @media (max-width: $medium) {
+    width: 100%;
+    flex: 1 1 auto;
+  }
+}
+
+.right-bottom-right-content-wrapper {
+  width: auto;
+  flex: 0 0 calc(40% - 18px);
+  min-width: 0;
+  height: fit-content;
+
+  @media (max-width: $medium) {
+    width: 100%;
+    flex: 1 1 auto;
+    margin-top: 0;
+  }
+}
+
+.inner-content-wrapper {
+  display: flex;
+  gap: 36px;
+  width: 100%;
+  margin-top: 36px;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+    gap: 0;
+  }
+
+  @media (min-width: $medium) and (max-width: $normal) {
+    gap: 16px;
+  }
+}
+
+.user-media, .user-projects {
+  width: auto;
+  flex: 1 1 calc(50% - 18px);
+  min-width: 0;
+
+  @media (max-width: $medium) {
+    width: 100%;
+    flex: 1 1 100%;
+    height: fit-content;
+  }
+
+  @media (min-width: $medium) and (max-width: $normal) {
+    height: auto;
+  }
+}
+
+.user-media {
+  margin-right: 0;
+}
+
+.user-projects {
+  margin-left: 0;
+}
+
+.calendar-wrapper {
+  width: 100%;
+}
+
+.calendar-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+}
+
+.calendar-array-wrapper {
+  color: $gray-70;
+  cursor: pointer;
+  font-size: 20px;
+}
+
+.calendar-date-title {
+  font-family: Fira Sans, sans-serif;
+  font-weight: $fw-lighter;
+  font-size: $fs-normal;
+  line-height: 18px;
+  color: $grey;
+  text-align: center;
+  margin: 0;
+}
+
+.views-wrapper {
+  width: 100%;
+  margin-top: 36px;
+}
+
+.views-title-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+}
+
+.views-title {
+  font-family: Fira Sans, sans-serif;
+  font-weight: $fw-normal;
+  font-size: $fs-regular;
+  line-height: 25px;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.views-title-icon {
+  color: $gray-70;
+}
+
+.views-content {
+  display: flex;
+  min-height: 100px;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+}
+
+.views-info-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.views-stats-row {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: 4px;
+}
+
+.views-value {
+  font-family: Fira Sans, sans-serif;
+  font-weight: $fw-normal;
+  font-size: $fs-xxl;
+  line-height: 42px;
+  color: $dark-grey;
+  margin: 0 6px 0 0;
+}
+
+.trending-up-icon {
+  margin-right: 0;
+  padding-bottom: 7px;
+}
+
+.views-percent {
+  font-family: Fira Sans, sans-serif;
+  font-weight: $fw-normal;
+  font-size: $fs-normal;
+  line-height: 20px;
+  color: $green;
+  margin: 0;
+}
+
+.views-button {
+  font-size: 12px;
+  border-color: $blue;
+  box-shadow: none;
+  margin-top: 12px;
+}
+
+.views-chart-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  margin-left: 0;
+  margin-top: 4px;
+}
+
+.update-wrapper {
+  width: 100%;
+  margin-top: 36px;
+}
+
+.update-card {
+  background-color: #536DFE;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 18px;
+}
+
+.update-title-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.update-title {
+  font-family: Fira Sans, sans-serif;
+  font-weight: $fw-normal;
+  font-size: $fs-regular;
+  line-height: 23px;
+  color: $white;
+  margin: 0 0 0 12px;
+}
+
+.update-button {
+  box-shadow: none;
+  color: $white;
+  border-color: $white !important;
+}
diff --git a/src/app/modules/user/containers/profile-page/profile-page.component.ts b/src/app/modules/user/containers/profile-page/profile-page.component.ts
new file mode 100644
index 0000000..b4a8b71
--- /dev/null
+++ b/src/app/modules/user/containers/profile-page/profile-page.component.ts
@@ -0,0 +1,258 @@
+import {Component, DestroyRef, OnChanges, OnInit, SimpleChanges, inject} from '@angular/core';
+import { EChartsOption } from 'echarts';
+import {ChartOptions} from '../../../templates/charts/models/chart-options';
+
+import {colors} from '../../../../consts';
+import {CalendarDateFormatter, CalendarEvent, CalendarEventAction} from 'angular-calendar';
+import {CustomDateFormatter} from '../../service';
+import {routes} from '../../../../consts';
+import {SharedService} from '../../../../shared/services/shared.service';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+@Component({
+    selector: 'app-profile-page',
+    templateUrl: './profile-page.component.html',
+    styleUrls: ['./profile-page.component.scss'],
+    providers: [
+        {
+            provide: CalendarDateFormatter,
+            useClass: CustomDateFormatter,
+        },
+    ],
+    standalone: false
+})
+export class ProfilePageComponent implements OnInit, OnChanges {
+  public apexPieChartOptions: Partial<ChartOptions>;
+  public colors: typeof colors = colors;
+  public viewDate: Date = new Date();
+  public routes: typeof routes = routes;
+  public chart: Partial<ChartOptions>;
+  public currentDate: Date = new Date();
+  public d = this.currentDate.getDate();
+  public m = this.currentDate.getMonth();
+  public y = this.currentDate.getFullYear();
+  public NOW: Date = new Date();
+  private readonly openFlatlogicAction: CalendarEventAction = {
+    label: 'action',
+    onClick: () => {
+      if (Boolean(document)) {
+        const a: HTMLAnchorElement = document.createElement('a');
+        a.href = 'http://www.flatlogic.com';
+        a.target = '_blank';
+        a.click();
+        a.remove();
+      }
+    }
+  };
+
+  public calendarEvents: CalendarEvent[] = [
+    {
+      id: 1,
+      title: '',
+      color: {
+        primary: colors.BLUE,
+        secondary: colors.BLUE,
+      },
+      start: new Date(this.NOW.getFullYear(), this.NOW.getMonth(), 2),
+      draggable: false,
+      allDay: true
+    },
+    {
+      id: 2,
+      title: '',
+      color: {
+        primary: colors.YELLOW,
+        secondary: colors.YELLOW,
+      },
+      start: new Date(this.NOW.getFullYear(), this.NOW.getMonth(), 5),
+      draggable: false,
+      allDay: true
+    },
+    {
+      id: 3,
+      title: '',
+      color: {
+        primary: colors.GREEN,
+        secondary: colors.GREEN,
+      },
+      start: new Date(this.NOW.getFullYear(), this.NOW.getMonth(), 18),
+      draggable: false,
+      allDay: true
+    },
+    {
+      id: 4,
+      title: '',
+      color: {
+        primary: colors.PINK,
+        secondary: colors.PINK,
+      },
+      start: new Date(this.NOW.getFullYear(), this.NOW.getMonth(), 28),
+      draggable: false,
+      allDay: true,
+      actions: [this.openFlatlogicAction]
+    }
+  ];
+  public isDarkMode = false;
+  private readonly destroyRef = inject(DestroyRef);
+
+  constructor(private service: SharedService) {
+  }
+
+  public get echartsOptions(): EChartsOption {
+    const options = this.chart;
+    const seriesList = Array.isArray(options?.series) ? options.series : [];
+    const firstSeries = seriesList[0] as { name?: string; data?: number[] } | undefined;
+    return {
+      color: options?.colors ?? [colors.PINK],
+      tooltip: { trigger: 'axis' },
+      legend: { show: false },
+      grid: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      xAxis: {
+        type: 'category',
+        data: Array.isArray(options?.labels) ? options.labels : [],
+        axisLabel: { show: false },
+        axisTick: { show: false },
+        axisLine: { show: false }
+      },
+      yAxis: {
+        type: 'value',
+        show: false
+      },
+      series: [
+        {
+          type: 'line',
+          name: firstSeries?.name ?? '',
+          data: firstSeries?.data ?? [],
+          smooth: true,
+          showSymbol: false,
+          lineStyle: { width: 2 },
+          areaStyle: { opacity: 0.3 }
+        }
+      ]
+    } as EChartsOption;
+  }
+
+  public ngOnInit(): void {
+    this.initChart();
+
+    this.chart = this.initChart2([91200, 95900, 92300, 96200, 93100, 95500, 94750], colors.PINK);
+
+    this.service.currentMode
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((mode: string) => {
+        this.isDarkMode = mode === 'dark';
+      });
+  }
+
+  public initChart2(data: number[], color: string): Partial<ChartOptions> {
+    return  {
+      series: [
+        {
+          name: 'STOCK ABC',
+          data
+        }
+      ],
+      chart: {
+        type: 'area',
+        height: 100,
+        zoom: {
+          enabled: false
+        },
+        toolbar: {
+          show: false,
+        }
+      },
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        curve: 'smooth',
+        width: 2
+      },
+      fill: {
+        type: 'solid',
+        opacity: 0.3
+      },
+      colors: [color],
+      labels:  [
+        '13 Nov 2020',
+        '14 Nov 2020',
+        '15 Nov 2020',
+        '16 Nov 2020',
+        '17 Nov 2020',
+        '18 Nov 2020',
+        '19 Nov 2020',
+      ],
+      xaxis: {
+        type: 'datetime',
+        labels: {
+          show: false
+        },
+        axisBorder: {
+          show: false
+        },
+        axisTicks: {
+          show: false
+        }
+      },
+      yaxis: {
+        opposite: true,
+        show: false
+      },
+      legend: {
+        horizontalAlign: 'left',
+        show: false
+      },
+      grid: {
+        show: false,
+        padding: {
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0
+        }
+      },
+    };
+  }
+
+  public initChart(): void {
+    this.apexPieChartOptions = {
+      series: [44, 55, 13, 43],
+      chart: {
+        type: 'donut',
+        height: 110,
+      },
+      dataLabels: {
+        enabled: false
+      },
+      colors: [
+        colors.BLUE,
+        colors.YELLOW,
+        colors.GREEN,
+        colors.PINK
+      ],
+      legend: {
+        position: 'right',
+        offsetY: -15,
+        itemMargin: {
+          horizontal: 5,
+          vertical: 2
+        },
+      },
+      labels: ['New', 'In Progress', 'Completed', 'Canceled'],
+    };
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const currentModeChange = changes['currentMode'];
+    if (currentModeChange && currentModeChange.currentValue) {
+      this.isDarkMode = currentModeChange.currentValue;
+    }
+  }
+
+}
diff --git a/src/app/modules/user/models/index.ts b/src/app/modules/user/models/index.ts
new file mode 100644
index 0000000..d7d0c0d
--- /dev/null
+++ b/src/app/modules/user/models/index.ts
@@ -0,0 +1 @@
+export * from './user-details';
diff --git a/src/app/modules/user/models/user-details.ts b/src/app/modules/user/models/user-details.ts
new file mode 100644
index 0000000..c2b98cf
--- /dev/null
+++ b/src/app/modules/user/models/user-details.ts
@@ -0,0 +1,9 @@
+export interface UserDetails {
+  id: string;
+  name: string;
+  role: string;
+  companyName: string;
+  email: string;
+  status: string;
+  createdAt: string;
+}
diff --git a/src/app/modules/user/popups/delete-user-popup/delete-user-popup.component.html b/src/app/modules/user/popups/delete-user-popup/delete-user-popup.component.html
new file mode 100644
index 0000000..25ceab1
--- /dev/null
+++ b/src/app/modules/user/popups/delete-user-popup/delete-user-popup.component.html
@@ -0,0 +1,7 @@
+<h3 class="title">Are you sure that you want to delete user?</h3>
+<p class="subtitle">User will be deleted.</p>
+
+<div class="buttons-wrapper">
+  <button mat-button color="primary" (click)="close()" class="button">disagree</button>
+  <button mat-button color="primary" (click)="close()" class="button">agree</button>
+</div>
diff --git a/src/app/modules/user/popups/delete-user-popup/delete-user-popup.component.scss b/src/app/modules/user/popups/delete-user-popup/delete-user-popup.component.scss
new file mode 100644
index 0000000..55a37cf
--- /dev/null
+++ b/src/app/modules/user/popups/delete-user-popup/delete-user-popup.component.scss
@@ -0,0 +1,28 @@
+@use "src/app/styles/colors" as *;
+@use "src/app/styles/font" as *;
+
+.title {
+  font-size: $fs-regular;
+  font-weight: $fw-normal;
+  color: $dark-grey;
+}
+
+.subtitle {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $grey;
+}
+
+.buttons-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.button {
+  text-transform: uppercase;
+}
+
+.button + .button {
+  margin-left: 8px;
+}
diff --git a/src/app/modules/user/popups/delete-user-popup/delete-user-popup.component.ts b/src/app/modules/user/popups/delete-user-popup/delete-user-popup.component.ts
new file mode 100644
index 0000000..81adfd5
--- /dev/null
+++ b/src/app/modules/user/popups/delete-user-popup/delete-user-popup.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-delete-user-popup',
+    templateUrl: './delete-user-popup.component.html',
+    styleUrls: ['./delete-user-popup.component.scss'],
+    standalone: false
+})
+export class DeleteUserPopupComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<DeleteUserPopupComponent>,
+  ) {}
+
+  close(): void {
+    this.dialogRef.close();
+  }
+
+}
diff --git a/src/app/modules/user/popups/index.ts b/src/app/modules/user/popups/index.ts
new file mode 100644
index 0000000..e9d80c0
--- /dev/null
+++ b/src/app/modules/user/popups/index.ts
@@ -0,0 +1 @@
+export * from './delete-user-popup/delete-user-popup.component';
diff --git a/src/app/modules/user/service/custom-date-formatter.ts b/src/app/modules/user/service/custom-date-formatter.ts
new file mode 100644
index 0000000..11bad75
--- /dev/null
+++ b/src/app/modules/user/service/custom-date-formatter.ts
@@ -0,0 +1,16 @@
+import {Injectable} from '@angular/core';
+import {CalendarDateFormatter, DateFormatterParams} from 'angular-calendar';
+import {DatePipe} from '@angular/common';
+
+@Injectable()
+export class CustomDateFormatter extends CalendarDateFormatter {
+  // Override methods from the parent formatter as needed.
+
+  public override monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'EEEEE', locale) ?? '';
+  }
+
+  // public monthViewTitle({ date, locale }: DateFormatterParams): string {
+  //   return new DatePipe(locale).transform(date, 'MMM y', locale);
+  // }
+}
diff --git a/src/app/modules/user/service/index.ts b/src/app/modules/user/service/index.ts
new file mode 100644
index 0000000..a65d60b
--- /dev/null
+++ b/src/app/modules/user/service/index.ts
@@ -0,0 +1,2 @@
+export * from './user.service';
+export * from './custom-date-formatter';
diff --git a/src/app/modules/user/service/user.service.ts b/src/app/modules/user/service/user.service.ts
new file mode 100644
index 0000000..1ed8e32
--- /dev/null
+++ b/src/app/modules/user/service/user.service.ts
@@ -0,0 +1,58 @@
+import {Injectable} from '@angular/core';
+import {Observable, of} from 'rxjs';
+import {UserDetails} from '../models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  public getUsers(): Observable<UserDetails[]> {
+    return of([
+      {
+        id: '1',
+        name: 'Jane Hew',
+        role: 'admin',
+        companyName: 'Flatlogic',
+        email: 'admin@flatlogic.com',
+        status: 'active',
+        createdAt: '2020-06-07'
+      },
+      {
+        id: '2',
+        name: 'Axel Pittman',
+        role: 'admin',
+        companyName: 'Flatlogic',
+        email: 'admin@flatlogic.com',
+        status: 'inactive',
+        createdAt: '2020-06-07'
+      },
+      {
+        id: '3',
+        name: 'Sophia Fernandez',
+        role: 'admin',
+        companyName: 'Flatlogic',
+        email: 'admin@flatlogic.com',
+        status: 'active',
+        createdAt: '2020-06-07'
+      },
+      {
+        id: '4',
+        name: 'Bob Nilson',
+        role: 'admin',
+        companyName: 'Flatlogic',
+        email: 'admin@flatlogic.com',
+        status: 'inactive',
+        createdAt: '2020-06-07'
+      },
+      {
+        id: '5',
+        name: 'Jessica Nilson',
+        role: 'admin',
+        companyName: 'Flatlogic',
+        email: 'admin@flatlogic.com',
+        status: 'active',
+        createdAt: '2020-06-07'
+      }
+    ]);
+  }
+}
diff --git a/src/app/modules/user/user-routing.module.ts b/src/app/modules/user/user-routing.module.ts
new file mode 100644
index 0000000..cc25163
--- /dev/null
+++ b/src/app/modules/user/user-routing.module.ts
@@ -0,0 +1,43 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import {
+  ListPageComponent,
+  AddPageComponent,
+  EditPageComponent,
+  ProfilePageComponent,
+} from './containers';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'list',
+    pathMatch: 'full'
+  },
+  {
+    path: 'list',
+    component: ListPageComponent
+  },
+  {
+    path: 'add',
+    component: AddPageComponent
+  },
+  {
+    path: 'edit',
+    component: EditPageComponent
+  },
+  {
+    path: 'profile',
+    component: ProfilePageComponent
+  },
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+
+export class UserRoutingModule {
+}
diff --git a/src/app/modules/user/user.module.ts b/src/app/modules/user/user.module.ts
new file mode 100644
index 0000000..ceb39b7
--- /dev/null
+++ b/src/app/modules/user/user.module.ts
@@ -0,0 +1,98 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatStepperModule } from '@angular/material/stepper';
+
+import { UserRoutingModule } from './user-routing.module';
+import { DeleteUserPopupComponent } from './popups';
+
+import {
+  ListPageComponent,
+  EditPageComponent,
+  AddPageComponent,
+  ProfilePageComponent
+} from './containers';
+
+import {
+  AccountEditFormComponent,
+  ProfileEditFormComponent,
+  PasswordEditFormComponent,
+  SettingsEditFormComponent,
+  AccountCreateFormComponent,
+  UserArticleComponent,
+  UserFilesComponent,
+  UserInfoComponent,
+  UserMediaComponent,
+  UserProjectsComponent,
+  UserTasksComponent
+} from './components';
+import {MatMenuModule} from '@angular/material/menu';
+import {CalendarModule} from 'angular-calendar';
+import { BreadcrumbComponent, DateMenuComponent } from '../../shared/ui-elements';
+import { ChartSizePipe } from '../../shared/pipes/chart-size.pipe';
+import { NgxEchartsModule } from 'ngx-echarts';
+
+@NgModule({
+  declarations: [
+    ListPageComponent,
+    AddPageComponent,
+    EditPageComponent,
+    AccountEditFormComponent,
+    ProfileEditFormComponent,
+    PasswordEditFormComponent,
+    SettingsEditFormComponent,
+    DeleteUserPopupComponent,
+    AccountCreateFormComponent,
+    ProfilePageComponent,
+    UserArticleComponent,
+    UserFilesComponent,
+    UserInfoComponent,
+    UserMediaComponent,
+    UserProjectsComponent,
+    UserTasksComponent
+  ],
+  imports: [
+    CommonModule,
+    UserRoutingModule,
+    BreadcrumbComponent,
+    DateMenuComponent,
+    ChartSizePipe,
+    NgxEchartsModule.forRoot({
+      echarts: () => import('echarts')
+    }),
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatSortModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatChipsModule,
+    MatSelectModule,
+    MatTabsModule,
+    MatSlideToggleModule,
+    MatDialogModule,
+    MatStepperModule,
+    ReactiveFormsModule,
+    MatMenuModule,
+    CalendarModule
+  ]
+})
+export class UserModule { }
diff --git a/src/app/shared/filter/filter.component.html b/src/app/shared/filter/filter.component.html
new file mode 100644
index 0000000..2b59bc2
--- /dev/null
+++ b/src/app/shared/filter/filter.component.html
@@ -0,0 +1,81 @@
+<mat-card-content class="card-content">
+  @for (filter of config; track filter; let i = $index) {
+    <div class="input-wrapper">
+      <ng-select
+        (change)="onSelect($event, i, filter)"
+        [items]="filters"
+        [searchable]="false"
+        [clearable]="false"
+        bindLabel="label"
+        bindValue="title"
+        placeholder="Filter"
+        >
+      </ng-select>
+      @if (!filter.number) {
+        <mat-form-field
+          class="input-field text-field"
+          >
+          <input
+            (keyup)="onKeyUp($event.target.value, i, filter)"
+            matInput
+            placeholder="Contains"
+            class="input-text"
+            type="text"
+            />
+        </mat-form-field>
+      }
+      @if (filter.number) {
+        <mat-form-field
+          class="input-field number-field"
+          >
+          <input
+            (keyup)="onKeyUp('', i, filter, $event.target.value)"
+            matInput
+            placeholder="From"
+            class="input-number"
+            type="text"
+            />
+        </mat-form-field>
+      }
+      @if (filter.number) {
+        <mat-form-field
+          class="input-field number-field"
+          >
+          <input
+            (keyup)="onKeyUp('', i, filter, '', $event.target.value)"
+            matInput
+            placeholder="To"
+            class="input-number"
+            type="text"
+            />
+        </mat-form-field>
+      }
+      <button
+        mat-flat-button
+        color="success"
+        class="table-button"
+        (click)="delFilter(i)"
+        >
+        delete
+      </button>
+    </div>
+  }
+  <div class="filter-buttons">
+    <button
+      mat-flat-button
+      color="warn"
+      class="table-button"
+      (click)="clearFilters()"
+      >
+      clear
+    </button>
+    <button
+      mat-flat-button
+      color="success"
+      class="table-button"
+      (click)="submitHandler()"
+      >
+      apply
+    </button>
+  </div>
+</mat-card-content>
diff --git a/src/app/shared/filter/filter.component.scss b/src/app/shared/filter/filter.component.scss
new file mode 100644
index 0000000..aec30ca
--- /dev/null
+++ b/src/app/shared/filter/filter.component.scss
@@ -0,0 +1,70 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.card,
+.filter-form {
+  margin-top: 16px;
+}
+
+.card-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (max-width: $small) {
+    flex-wrap: wrap;
+  }
+}
+
+.card-title {
+  margin: -30px 0 0 0;
+
+  @media (max-width: $small) {
+    margin: 0;
+  }
+}
+
+.card-subtitle {
+  font-size: 12px;
+  font-weight: $fw-lighter;
+  color: $grey;
+}
+
+.filter-buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.filter-button {
+  margin-left: 10px;
+}
+
+.input-wrapper {
+  width: 62%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0 8px 0;
+
+  @media (max-width: $small) {
+    width: 100%;
+  }
+}
+
+.text-field {
+  width: 50%;
+}
+
+.table-button {
+  min-height: 30px;
+  height: 30px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: 0;
+  &:first-child {
+    margin-right: 1rem;
+  }
+}
diff --git a/src/app/shared/filter/filter.component.spec.ts b/src/app/shared/filter/filter.component.spec.ts
new file mode 100644
index 0000000..d182405
--- /dev/null
+++ b/src/app/shared/filter/filter.component.spec.ts
@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { FilterComponent } from './filter.component';
+
+describe('FilterComponent', () => {
+  let component: FilterComponent;
+  let fixture: ComponentFixture<FilterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FilterComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+      .overrideComponent(FilterComponent, {
+        set: {
+          template: '',
+        },
+      })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/filter/filter.component.ts b/src/app/shared/filter/filter.component.ts
new file mode 100644
index 0000000..d6597a5
--- /dev/null
+++ b/src/app/shared/filter/filter.component.ts
@@ -0,0 +1,88 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FilterConfig, FilterItems } from '../models/common';
+import { MatCardModule } from '@angular/material/card';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+    selector: 'app-filter',
+    templateUrl: './filter.component.html',
+    styleUrls: ['./filter.component.scss'],
+    standalone: true,
+    imports: [
+      MatCardModule,
+      NgSelectModule,
+      MatFormFieldModule,
+      MatInputModule,
+      MatButtonModule,
+    ]
+})
+export class FilterComponent implements OnInit {
+  @Input() config: FilterConfig[] = [];
+  @Input() filters: FilterItems[] = [];
+  @Output() clearFilterConfirmed = new EventEmitter<void>();
+  @Output() deleteFilterConfirmed = new EventEmitter<void>();
+  @Output() submitConfirmed = new EventEmitter<string>();
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  delFilter(index: number): void {
+    this.config.splice(index, 1);
+    this.deleteFilterConfirmed.emit();
+  }
+
+  clearFilters(): void {
+    this.clearFilterConfirmed.emit();
+  }
+
+  submitHandler(): void {
+    let request = '?';
+    this.config.forEach((item: FilterConfig) => {
+      item.number
+        ? (request += `${item.filter}Range=${item.valueFrom}&${item.filter}Range=${item.valueTo}&`)
+        : (request += `${item.filter}=${item.value}&`);
+    });
+
+    this.submitConfirmed.emit(request);
+  }
+
+  onSelect(
+    event: FilterItems | string | null,
+    index: number,
+    data: FilterConfig,
+  ): void {
+    if (!event) {
+      return;
+    }
+
+    const selected =
+      typeof event === 'string'
+        ? this.filters.find((item) => item.title === event)
+        : event;
+
+    data.filter = selected?.title ?? data.filter;
+    data.number = selected?.number === 'true';
+    this.config.splice(index, 1, data);
+  }
+
+  onKeyUp(
+    value: string,
+    index: number,
+    data: FilterConfig,
+    valueFrom?: number | string,
+    valueTo?: number | string,
+  ): void {
+    data.value = value;
+    if (valueFrom !== undefined && valueFrom !== null && valueFrom !== '') {
+      data.valueFrom = valueFrom;
+    }
+    if (valueTo !== undefined && valueTo !== null && valueTo !== '') {
+      data.valueTo = valueTo;
+    }
+    this.config.splice(index, 1, data);
+  }
+}
diff --git a/src/app/shared/footer/footer.component.html b/src/app/shared/footer/footer.component.html
new file mode 100644
index 0000000..9850eaa
--- /dev/null
+++ b/src/app/shared/footer/footer.component.html
@@ -0,0 +1,26 @@
+<div class="footer">
+  <div class="footer__link">
+    <a class="footer__link-item" [href]="flatlogic">Flatlogic</a>
+    <a class="footer__link-item" [href]="flatlogicAbout">About Us</a>
+    <a class="footer__link-item" [href]="flatlogicBlog">Blog</a>
+  </div>
+  <div class="footer__icon">
+    <a href="https://www.facebook.com/flatlogic">
+      <button mat-mini-fab class="footer-button">
+        <mat-icon fontSet="fa fa-fs" fontIcon="fa-facebook-square"></mat-icon>
+      </button>
+    </a>
+
+    <a href="https://twitter.com/flatlogic">
+      <button mat-mini-fab class="footer-button">
+        <mat-icon fontSet="fa fa-fs" fontIcon="fa-twitter-square"></mat-icon>
+      </button>
+    </a>
+
+    <a href="https://github.com/flatlogic">
+      <button mat-mini-fab class="footer-button">
+        <mat-icon fontSet="fa fa-fs" fontIcon="fa-github-square"></mat-icon>
+      </button>
+    </a>
+  </div>
+</div>
diff --git a/src/app/shared/footer/footer.component.scss b/src/app/shared/footer/footer.component.scss
new file mode 100644
index 0000000..99836b6
--- /dev/null
+++ b/src/app/shared/footer/footer.component.scss
@@ -0,0 +1,53 @@
+@use 'src/app/styles/variables' as *;
+
+.footer {
+  height: $footer-height;
+  margin-top: 40px;
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: $small) {
+    flex-direction: column;
+    align-items: start;
+  }
+
+  &__link {
+    display: flex;
+    align-items: center;
+
+    @media (max-width: $small) {
+      margin-bottom: 8px;
+    }
+  }
+
+  &__icon {
+    @media (max-width: $small) {
+      margin: 0 0 8px -14px;
+    }
+  }
+
+  &__link-item {
+    margin-right: 16px;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.footer-button {
+  box-shadow: none;
+  background-color: transparent;
+  width: 46px;
+  height: 46px;
+
+  &:hover {
+    background-color: $footer-icon-background-color-hover;
+  }
+}
+
+.mat-icon {
+  color: $footer-icon-color;
+  padding: 3px 0 0 0;
+}
diff --git a/src/app/shared/footer/footer.component.ts b/src/app/shared/footer/footer.component.ts
new file mode 100644
index 0000000..a20aacf
--- /dev/null
+++ b/src/app/shared/footer/footer.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+    selector: 'app-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss'],
+    standalone: true,
+    imports: [MatButtonModule, MatIconModule]
+})
+export class FooterComponent {
+  public flatlogic: string = 'https://flatlogic.com/';
+  public flatlogicAbout: string = 'https://flatlogic.com/about';
+  public flatlogicBlog: string = 'https://flatlogic.com/blog';
+}
diff --git a/src/app/shared/header/components/email/email.component.html b/src/app/shared/header/components/email/email.component.html
new file mode 100644
index 0000000..d62e0c0
--- /dev/null
+++ b/src/app/shared/header/components/email/email.component.html
@@ -0,0 +1,26 @@
+<button class="email-button" color="primary" mat-mini-fab [matMenuTriggerFor]="email">
+  <mat-icon matBadge="4" matBadgeColor="accent" class="email-button__icon">mail_outline</mat-icon>
+</button>
+<mat-menu #email="matMenu" xPosition="before">
+  <div class="email-menu-header">
+    <h4 class="email-menu-header__title">New Messages</h4>
+    <p class="email-menu-header__subtitle">{{emails.length}} New Messages</p>
+  </div>
+
+  <div *ngFor="let email of emails, let i = index" class="mail-wrapper">
+    <div class="mail-wrapper__icon-wrapper">
+      <button class="mail-wrapper__icon" [ngClass]="colors[i]" mat-mini-fab>{{email.name | shortName}}</button>
+      <span class="mail-wrapper__time">{{email.time}}</span>
+    </div>
+    <div class="mail-content">
+      <span class="mail-content__user">{{email.name}}</span>
+      <span class="mail-content__message">{{email.message}}</span>
+    </div>
+  </div>
+
+  <div class="send-message-button-wrapper">
+    <button class="send-message-button" mat-raised-button color="primary">
+      Send New Message <mat-icon class="send-message-button__icon">send</mat-icon>
+    </button>
+  </div>
+</mat-menu>
diff --git a/src/app/shared/header/components/email/email.component.scss b/src/app/shared/header/components/email/email.component.scss
new file mode 100644
index 0000000..ad64bfe
--- /dev/null
+++ b/src/app/shared/header/components/email/email.component.scss
@@ -0,0 +1,121 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.email-button {
+  margin-left: 16px;
+
+  &__icon {
+    color: $white-35;
+  }
+
+  @media (max-width: $small) {
+    margin-top: 0;
+  }
+}
+
+.email-menu-header {
+  padding: 16px 16px 0 16px;
+
+  &__title {
+    margin: 0;
+    font-weight: $fw-lighter;
+    font-size: $fs-large;
+    color: $dark-grey;
+  }
+
+  &__subtitle {
+    color: $pink;
+    font-weight: $fw-lighter;
+    font-size: $fs-small;
+    margin: 4px 0 16px 0;
+  }
+}
+
+.mail-wrapper {
+  cursor: pointer;
+  display: flex;
+  padding: 6px 16px;
+
+  &:hover {
+    background-color: $blue-white;
+  }
+
+  &__icon-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__icon {
+    font-weight: $fw-lighter;
+    font-size: $fs-small;
+    color: $white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+    width: 30px;
+    height: 30px;
+  }
+
+  &__time {
+    text-align: center;
+    color: $grey;
+    font-weight: $fw-lighter;
+    font-size: $fs-xs;
+  }
+}
+
+.mail-content {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-left: 16px;
+  justify-content: space-between;
+
+  &__user {
+    margin-top: 3px;
+    font-weight: $fw-normal;
+    font-size: $fs-small;
+    color: $dark-grey;
+  }
+
+  &__message {
+    color: $grey;
+    font-weight: $fs-small;
+    font-size: $fs-small;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+.send-message-button-wrapper {
+  margin: 16px 0;
+  text-align: center;
+
+  .send-message-button {
+    width: 224px;
+    height: 48px;
+    border-radius: 32px;
+
+    &__icon {
+      margin-left: 16px;
+    }
+  }
+}
+
+.yellow {
+  background-color: $yellow;
+}
+
+.green {
+  background-color: $green;
+}
+
+.blue {
+  background-color: $blue;
+}
+
+.ping {
+  background-color: $pink;
+}
diff --git a/src/app/shared/header/components/email/email.component.ts b/src/app/shared/header/components/email/email.component.ts
new file mode 100644
index 0000000..9ee7584
--- /dev/null
+++ b/src/app/shared/header/components/email/email.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+import { Email } from '../../../../modules/auth/models';
+
+@Component({
+  selector: 'app-email',
+  templateUrl: './email.component.html',
+  styleUrls: ['./email.component.scss']
+})
+export class EmailComponent {
+  @Input() emails: Email[];
+  public colors: string[] = [
+    'yellow',
+    'green',
+    'blue',
+    'ping'
+  ];
+}
diff --git a/src/app/shared/header/components/index.ts b/src/app/shared/header/components/index.ts
new file mode 100644
index 0000000..11fee52
--- /dev/null
+++ b/src/app/shared/header/components/index.ts
@@ -0,0 +1,3 @@
+export * from './user/user.component';
+export * from './notifications/notifications.component';
+export * from './search/search.component';
diff --git a/src/app/shared/header/components/notifications/notifications.component.html b/src/app/shared/header/components/notifications/notifications.component.html
new file mode 100644
index 0000000..9264893
--- /dev/null
+++ b/src/app/shared/header/components/notifications/notifications.component.html
@@ -0,0 +1,28 @@
+<button
+  class="notification-button"
+  color="primary"
+  mat-mini-fab
+  [matMenuTriggerFor]="bell"
+>
+  <mat-icon matBadge="4" matBadgeColor="warn" matBadgeSize="small" class="notification-button__icon"
+    >notifications_none</mat-icon
+  >
+</button>
+<mat-menu #bell="matMenu" xPosition="before" class="notification-menu">
+  <button mat-menu-item class="notification-menu__button">
+    <mat-icon class="notification-menu__icon_yellow">local_offer</mat-icon>Check
+    out this awesome ticket
+  </button>
+  <button mat-menu-item class="notification-menu__button">
+    <mat-icon class="notification-menu__icon_green">thumb_up</mat-icon>What is
+    the best way to get ...
+  </button>
+  <button mat-menu-item class="notification-menu__button">
+    <mat-icon class="notification-menu__icon_pink">notifications_none</mat-icon
+    >This is just a simple notification
+  </button>
+  <button mat-menu-item class="notification-menu__button">
+    <mat-icon class="notification-menu__icon_blue">local_grocery_store</mat-icon
+    >12 new orders has arrived today
+  </button>
+</mat-menu>
diff --git a/src/app/shared/header/components/notifications/notifications.component.scss b/src/app/shared/header/components/notifications/notifications.component.scss
new file mode 100644
index 0000000..e7607c0
--- /dev/null
+++ b/src/app/shared/header/components/notifications/notifications.component.scss
@@ -0,0 +1,49 @@
+@use 'src/app/styles/variables' as *;
+
+.notification-button {
+  margin-left: 16px;
+
+  &__icon {
+    color: $white-35;
+
+    & .mat-badge-content {
+      width: 16px;
+      min-width: 16px;
+      height: 16px;
+      min-height: 16px;
+      line-height: 16px;
+      font-size: 10px;
+      padding: 0;
+    }
+  }
+
+  @media (max-width: $small) {
+    margin-top: 0;
+  }
+}
+
+.notification-menu {
+  &__button {
+    &:hover {
+      background-color: $blue-white;
+    }
+  }
+
+  &__icon {
+    &_yellow {
+      color: $yellow;
+    }
+
+    &_green {
+      color: $green;
+    }
+
+    &_pink {
+      color: $pink;
+    }
+
+    &_blue {
+      color: $blue;
+    }
+  }
+}
diff --git a/src/app/shared/header/components/notifications/notifications.component.ts b/src/app/shared/header/components/notifications/notifications.component.ts
new file mode 100644
index 0000000..a570a7b
--- /dev/null
+++ b/src/app/shared/header/components/notifications/notifications.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+
+@Component({
+    selector: 'app-notifications',
+    templateUrl: './notifications.component.html',
+    styleUrls: ['./notifications.component.scss'],
+    standalone: true,
+    imports: [MatButtonModule, MatIconModule, MatBadgeModule, MatMenuModule]
+})
+export class NotificationsComponent {}
diff --git a/src/app/shared/header/components/search/search.component.html b/src/app/shared/header/components/search/search.component.html
new file mode 100644
index 0000000..3ab48cd
--- /dev/null
+++ b/src/app/shared/header/components/search/search.component.html
@@ -0,0 +1,12 @@
+<div
+  class="search"
+  (click)="showInput()"
+  [ngClass]="{ 'show-search-input': isShowInput }"
+  >
+  <mat-icon class="search-icon" [ngClass]="{ 'open-search': isShowInput }"
+    >search</mat-icon
+    >
+    @if (isShowInput) {
+      <input class="search-input" placeholder="Search..." />
+    }
+  </div>
diff --git a/src/app/shared/header/components/search/search.component.scss b/src/app/shared/header/components/search/search.component.scss
new file mode 100644
index 0000000..6cb9bcd
--- /dev/null
+++ b/src/app/shared/header/components/search/search.component.scss
@@ -0,0 +1,81 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.search {
+  display: flex;
+  height: 36px;
+  border-radius: 32px;
+  box-sizing: border-box;
+  align-items: center;
+  width: 36px;
+  padding-left: 4px;
+  cursor: pointer;
+  flex-direction: row-reverse;
+
+  &:hover {
+    background-color: $black-08;
+  }
+
+  @media (max-width: $small) {
+    display: none;
+  }
+}
+
+.show-search-input {
+  animation: 0.3s open_search;
+  width: 250px;
+  padding-left: 22.4px;
+  background-color: $black-08;
+}
+
+.search-input {
+  color: $white;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  line-height: 19px;
+  font-size: $fs-small;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  height: 36px;
+  width: 100%;
+
+  &::-webkit-input-placeholder {
+    color: $white-35;
+  }
+}
+
+.search-icon {
+  padding: 0 7px 3px 0;
+  color: $white-35;
+}
+
+.open-search {
+  animation: 0.3s move_search-icon;
+  padding-right: 16px;
+  padding-left: 4px;
+}
+
+@keyframes open_search {
+  from {
+    width: 36px;
+  }
+  to {
+    width: 250px;
+  }
+}
+@keyframes open_search_large {
+  from {
+    width: 36px;
+  }
+  to {
+    width: 150px;
+  }
+}
+@keyframes move_search-icon {
+  from {
+    padding: 0 7px 3px 0;
+  }
+  to {
+    padding-right: 16px;
+  }
+}
diff --git a/src/app/shared/header/components/search/search.component.ts b/src/app/shared/header/components/search/search.component.ts
new file mode 100644
index 0000000..38c05e9
--- /dev/null
+++ b/src/app/shared/header/components/search/search.component.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+    selector: 'app-search',
+    templateUrl: './search.component.html',
+    styleUrls: ['./search.component.scss'],
+    standalone: true,
+    imports: [CommonModule, MatIconModule]
+})
+export class SearchComponent {
+  public isShowInput = false;
+
+  public showInput(): void {
+    this.isShowInput = true;
+  }
+}
diff --git a/src/app/shared/header/components/user/user.component.html b/src/app/shared/header/components/user/user.component.html
new file mode 100644
index 0000000..1f746ac
--- /dev/null
+++ b/src/app/shared/header/components/user/user.component.html
@@ -0,0 +1,42 @@
+<div class="user-wrapper">
+  <img
+    [matMenuTriggerFor]="userMenu"
+    [src]="avatar()"
+    alt="..."
+    class="user-icon"
+  />
+
+  <mat-menu #userMenu="matMenu" xPosition="before">
+    <div class="user-menu-title">
+      <h4 class="user-menu-title__name">
+        {{ user?.firstName }} {{ user?.lastName }}
+      </h4>
+      <a [href]="flatlogicEmail" class="user-menu-title__link">Flatlogic.com</a>
+    </div>
+    <button
+      [routerLink]="routes.PROFILE"
+      class="user-menu__item-title"
+      mat-menu-item
+    >
+      <mat-icon class="user-menu-icon">account_circle</mat-icon>
+      Profile
+    </button>
+    <button class="user-menu__item-title" mat-menu-item>
+      <mat-icon class="user-menu-icon">description</mat-icon>
+      Tasks
+    </button>
+    <button class="user-menu__item-title" mat-menu-item>
+      <mat-icon class="user-menu-icon">email</mat-icon>
+      Messages
+    </button>
+    <div class="sign-button-wrapper">
+      <button (click)="signOutEmit()" class="sign-button" mat-flat-button>
+        Sign out
+      </button>
+    </div>
+  </mat-menu>
+
+  <p class="greeting-text">
+    Hi, <span class="user-name">{{ user?.firstName }}</span>
+  </p>
+</div>
diff --git a/src/app/shared/header/components/user/user.component.scss b/src/app/shared/header/components/user/user.component.scss
new file mode 100644
index 0000000..966dbd0
--- /dev/null
+++ b/src/app/shared/header/components/user/user.component.scss
@@ -0,0 +1,109 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  margin-right: 16px;
+  box-shadow: none;
+  font-size: $fs-regular;
+}
+
+.user-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.user-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  margin-left: 16px;
+  cursor: pointer;
+}
+
+.user-button {
+  background-color: $blue;
+  box-shadow: none;
+  margin-left: 16px;
+
+  &__icon {
+    color: $white-35;
+  }
+
+  &:hover {
+    background-color: $black-08;
+  }
+
+  @media (max-width: $small) {
+    margin-top: 0;
+  }
+}
+
+.user-menu-title {
+  padding: 16px 48px 0 16px;
+  margin-bottom: 4px;
+
+  &__name {
+    margin-bottom: 4px;
+    font-weight: $fw-lighter;
+    font-size: $fs-large;
+    color: $dark-grey;
+  }
+
+  &__link {
+    color: $blue;
+    font-weight: $fw-lighter;
+    font-size: $fs-small;
+    text-decoration: none;
+  }
+}
+
+.user-menu-icon {
+  color: $light-grey;
+  margin-right: 16px;
+  opacity: 0.8;
+}
+
+.sign-button-wrapper {
+  text-align: center;
+  padding: 8px 0 16px 0;
+  width: 100%;
+}
+
+.sign-button {
+  border: 1px solid;
+  color: $blue;
+  background-color: $white;
+  width: 80%;
+}
+
+.user-menu {
+  &__item-title {
+    color: $light-grey;
+
+    &:hover {
+      color: $dark-grey;
+      background-color: $blue-white;
+
+      & .user-menu-icon {
+        color: #536dfe;
+      }
+    }
+  }
+}
+
+.greeting-text {
+  font-size: $fs-small;
+  font-weight: $fw-lighter;
+  color: $white;
+  margin: 0 0 0 8px;
+}
+
+.user-name {
+  font-size: $fs-small;
+  color: $white;
+  margin: 0;
+  font-weight: $fw-bold;
+  font-family: Arial, sans-serif;
+}
diff --git a/src/app/shared/header/components/user/user.component.ts b/src/app/shared/header/components/user/user.component.ts
new file mode 100644
index 0000000..602a264
--- /dev/null
+++ b/src/app/shared/header/components/user/user.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Users } from '../../../models/users.model';
+
+import { routes } from '../../../../consts';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { RouterModule } from '@angular/router';
+
+@Component({
+    selector: 'app-user',
+    templateUrl: './user.component.html',
+    styleUrls: ['./user.component.scss'],
+    standalone: true,
+    imports: [MatButtonModule, MatIconModule, MatMenuModule, RouterModule]
+})
+export class UserComponent {
+  @Input() user: Users;
+  @Output() signOut: EventEmitter<void> = new EventEmitter<void>();
+  public routes: typeof routes = routes;
+  public flatlogicEmail: string = 'https://flatlogic.com';
+
+  public signOutEmit(): void {
+    this.signOut.emit();
+  }
+
+  firstUserLetter() {
+    return (this.user?.firstName || this.user?.email || 'P')[0].toUpperCase();
+  }
+
+  avatar() {
+    return this.user && this.user.avatar && this.user.avatar.length
+      ? this.user.avatar[0].publicUrl
+      : './assets/profile.png';
+  }
+}
diff --git a/src/app/shared/header/containers/header/header.component.html b/src/app/shared/header/containers/header/header.component.html
new file mode 100644
index 0000000..1d810f3
--- /dev/null
+++ b/src/app/shared/header/containers/header/header.component.html
@@ -0,0 +1,28 @@
+<mat-toolbar class="header" color="primary">
+  <div class="header__title">
+    <button
+      class="header__title-button"
+      mat-mini-fab
+      (click)="openMenu()"
+      color="primary"
+      >
+      @if (!isMenuOpened) {
+        <mat-icon class="header__title-button-icon"
+          >menu</mat-icon
+          >
+        }
+        @if (isMenuOpened) {
+          <mat-icon class="header__title-button-icon"
+            >arrow_back</mat-icon
+            >
+          }
+        </button>
+        <h6 class="header__title-text">Angular Material Admin</h6>
+      </div>
+
+      <div class="header-toolbar">
+        <app-search></app-search>
+        <app-notifications></app-notifications>
+        <app-user [user]="user$ | async" (signOut)="signOut()"></app-user>
+      </div>
+    </mat-toolbar>
diff --git a/src/app/shared/header/containers/header/header.component.scss b/src/app/shared/header/containers/header/header.component.scss
new file mode 100644
index 0000000..b61ca51
--- /dev/null
+++ b/src/app/shared/header/containers/header/header.component.scss
@@ -0,0 +1,47 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/variables' as *;
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  position: fixed;
+  z-index: 2;
+  height: $header-height;
+
+  &__title {
+    display: flex;
+    align-items: center;
+  }
+
+  &__title-button {
+    background-color: $header-button-background-color;
+    box-shadow: $header-button-box-shadow;
+
+    &:hover {
+      background-color: $header-button-background-color-hover;
+    }
+
+    @media (max-width: $small) {
+      margin-top: 0;
+    }
+  }
+
+  &__title-button-icon {
+    color: $header-button-font-color;
+  }
+
+  &__title-text {
+    color: $header-title-font-color;
+    margin-left: 32px;
+    font-weight: $fw-lighter;
+
+    @media (max-width: $small) {
+      display: none;
+    }
+  }
+}
+
+.header-toolbar {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/app/shared/header/containers/header/header.component.ts b/src/app/shared/header/containers/header/header.component.ts
new file mode 100644
index 0000000..8bd6041
--- /dev/null
+++ b/src/app/shared/header/containers/header/header.component.ts
@@ -0,0 +1,52 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Observable } from 'rxjs';
+import { Router } from '@angular/router';
+
+import { Users } from '../../../models/users.model';
+import { routes } from '../../../../consts';
+import { AuthService } from '../../../services/auth.service';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { NotificationsComponent } from '../../components/notifications/notifications.component';
+import { SearchComponent } from '../../components/search/search.component';
+import { UserComponent } from '../../components/user/user.component';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    standalone: true,
+    imports: [
+      CommonModule,
+      MatButtonModule,
+      MatIconModule,
+      MatToolbarModule,
+      SearchComponent,
+      NotificationsComponent,
+      UserComponent,
+    ]
+})
+export class HeaderComponent {
+  @Input() isMenuOpened: boolean;
+  @Output() isShowSidebar = new EventEmitter<boolean>();
+  public user$: Observable<Users>;
+  public routers: typeof routes = routes;
+
+  constructor(private authService: AuthService, private router: Router) {
+    this.user$ = this.authService.getCurrentUserInfo();
+  }
+
+  public openMenu(): void {
+    this.isMenuOpened = !this.isMenuOpened;
+
+    this.isShowSidebar.emit(this.isMenuOpened);
+  }
+
+  public signOut(): void {
+    this.authService.logoutUser();
+
+    this.router.navigate([this.routers.LOGIN]);
+  }
+}
diff --git a/src/app/shared/header/containers/index.ts b/src/app/shared/header/containers/index.ts
new file mode 100644
index 0000000..abd4bb2
--- /dev/null
+++ b/src/app/shared/header/containers/index.ts
@@ -0,0 +1 @@
+export * from './header/header.component';
diff --git a/src/app/shared/header/pipes/index.ts b/src/app/shared/header/pipes/index.ts
new file mode 100644
index 0000000..6617b11
--- /dev/null
+++ b/src/app/shared/header/pipes/index.ts
@@ -0,0 +1 @@
+export * from './short-name';
diff --git a/src/app/shared/header/pipes/short-name.ts b/src/app/shared/header/pipes/short-name.ts
new file mode 100644
index 0000000..13db72c
--- /dev/null
+++ b/src/app/shared/header/pipes/short-name.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'shortName',
+    standalone: true
+})
+export class ShortNamePipe implements PipeTransform {
+  transform(value: string): string {
+    const commaIndex: number = value.search('\\s');
+    return '' + value[0].toUpperCase() + value[commaIndex + 1].toUpperCase();
+  }
+}
diff --git a/src/app/shared/layout/layout.component.html b/src/app/shared/layout/layout.component.html
new file mode 100644
index 0000000..e51c335
--- /dev/null
+++ b/src/app/shared/layout/layout.component.html
@@ -0,0 +1,37 @@
+<div
+  [class.blueTheme]="isBlueTheme"
+  [class.pinkTheme]="isPinkTheme"
+  [class.greenTheme]="isGreenTheme"
+  [class.darkMode]="isDarkMode"
+>
+  <app-header
+    (isShowSidebar)="sidenav.toggle($event)"
+    [isMenuOpened]="isShowSidebar"
+  ></app-header>
+
+  <app-settings-menu-app
+    (darkMode)="onDarkMode($event)"
+    (themeOnBlue)="changeThemeOnBlue()"
+    (themeOnPink)="changeThemeOnPink()"
+    (themeOnGreen)="changeThemeOnGreen()"
+  ></app-settings-menu-app>
+
+  <mat-sidenav-container class="layout">
+    <mat-sidenav
+      #sidenav
+      mode="side"
+      [(opened)]="isShowSidebar"
+      class="layout-sidebar"
+      [mode]="mobileQuery.matches ? 'over' : 'side'"
+      [fixedInViewport]="mobileQuery.matches"
+    >
+      <app-sidebar></app-sidebar>
+    </mat-sidenav>
+
+    <mat-sidenav-content class="layout-content">
+      <router-outlet></router-outlet>
+
+      <app-footer></app-footer>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</div>
diff --git a/src/app/shared/layout/layout.component.scss b/src/app/shared/layout/layout.component.scss
new file mode 100644
index 0000000..382e533
--- /dev/null
+++ b/src/app/shared/layout/layout.component.scss
@@ -0,0 +1,29 @@
+@use 'src/app/styles/variables' as *;
+
+.layout {
+  width: 100%;
+  height: 100vh;
+}
+
+.layout-sidebar {
+  height: calc(100vh - 64px);
+  margin-top: 64px;
+  width: 240px;
+
+  @media (max-width: $small) {
+    width: 218px;
+  }
+}
+
+.layout-content {
+  background-color: $background-color;
+  margin-top: 64px;
+  height: -webkit-fill-available;
+  padding: $sidebar-content-padding;
+  box-sizing: border-box;
+
+  @media (max-width: $small) {
+    width: 100%;
+    padding: $sidebar-content-mobile-padding;
+  }
+}
diff --git a/src/app/shared/layout/layout.component.ts b/src/app/shared/layout/layout.component.ts
new file mode 100644
index 0000000..eaae466
--- /dev/null
+++ b/src/app/shared/layout/layout.component.ts
@@ -0,0 +1,88 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  ViewChild,
+} from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { MatSidenav } from '@angular/material/sidenav';
+import { SharedService } from '../services/shared.service';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { RouterModule } from '@angular/router';
+import { HeaderComponent } from '../header/containers/header/header.component';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { FooterComponent } from '../footer/footer.component';
+import { SettingsMenuAppComponent } from '../settings-menu/settings-menu.component';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'app-layout',
+    templateUrl: './layout.component.html',
+    styleUrls: ['./layout.component.scss'],
+    standalone: true,
+    imports: [
+      CommonModule,
+      MatSidenavModule,
+      RouterModule,
+      HeaderComponent,
+      SidebarComponent,
+      FooterComponent,
+      SettingsMenuAppComponent,
+    ]
+})
+export class LayoutComponent implements OnDestroy {
+  @ViewChild('sidenav') sidenav: MatSidenav;
+  public isShowSidebar: boolean;
+  public mobileQuery: MediaQueryList;
+  private mobileQueryListener: () => void;
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private media: MediaMatcher,
+    private service: SharedService,
+  ) {
+    this.mobileQuery = media.matchMedia('(max-width: 1024px)');
+    this.mobileQueryListener = () => changeDetectorRef.detectChanges();
+    this.mobileQuery.addListener(this.mobileQueryListener);
+
+    this.isShowSidebar = !this.mobileQuery.matches;
+  }
+
+  public ngOnDestroy(): void {
+    this.mobileQuery.removeListener(this.mobileQueryListener);
+
+    this.sidenav?.close();
+  }
+
+  public isBlueTheme: boolean = true;
+  public isPinkTheme: boolean = false;
+  public isGreenTheme: boolean = false;
+  public isDarkMode: boolean = false;
+
+  public changeThemeOnBlue(): void {
+    this.isBlueTheme = true;
+    this.isPinkTheme = false;
+    this.isGreenTheme = false;
+
+    this.service.setBlueTheme();
+  }
+  public changeThemeOnPink(): void {
+    this.isBlueTheme = false;
+    this.isPinkTheme = true;
+    this.isGreenTheme = false;
+
+    this.service.setPinkTheme();
+  }
+  public changeThemeOnGreen(): void {
+    this.isBlueTheme = false;
+    this.isPinkTheme = false;
+    this.isGreenTheme = true;
+
+    this.service.setGreenTheme();
+  }
+  public onDarkMode(value: boolean): void {
+    this.isDarkMode = value;
+
+    this.service.setDarkMode(value);
+  }
+}
diff --git a/src/app/shared/models/common.ts b/src/app/shared/models/common.ts
new file mode 100644
index 0000000..f0455e3
--- /dev/null
+++ b/src/app/shared/models/common.ts
@@ -0,0 +1,18 @@
+export interface FilterConfig {
+  value?: string;
+  valueFrom?: number | string;
+  valueTo?: number | string;
+  filter?: string;
+  number?: boolean | string;
+}
+
+export interface FilterItems {
+  label?: string;
+  title?: string;
+  number?: string;
+}
+
+export interface AutoCompleteItem {
+  id: string;
+  label: string;
+}
diff --git a/src/app/shared/models/image.interface.ts b/src/app/shared/models/image.interface.ts
new file mode 100644
index 0000000..8d177f2
--- /dev/null
+++ b/src/app/shared/models/image.interface.ts
@@ -0,0 +1,8 @@
+export interface ImageInterface {
+  id: string;
+  name: string;
+  sizeInBytes: number;
+  privateUrl: string;
+  publicUrl: string;
+  new: boolean;
+}
diff --git a/src/app/shared/models/users.model.ts b/src/app/shared/models/users.model.ts
new file mode 100644
index 0000000..b9da698
--- /dev/null
+++ b/src/app/shared/models/users.model.ts
@@ -0,0 +1,44 @@
+export interface UserAvatarItem {
+  publicUrl?: string;
+  [key: string]: unknown;
+}
+
+export class Users {
+  id: string;
+
+  firstName: string;
+
+  lastName: string;
+
+  phoneNumber: string;
+
+  email: string;
+
+  role: string;
+
+  disabled: boolean;
+
+  password: string;
+
+  emailVerified: boolean;
+
+  emailVerificationToken: string;
+
+  emailVerificationTokenExpiresAt: Date | null;
+
+  passwordResetToken: string;
+
+  passwordResetTokenExpiresAt: Date | null;
+
+  provider: string;
+
+  avatar: UserAvatarItem[];
+
+  createdBy: Users | null;
+  updatedBy: Users | null;
+}
+
+export interface UsersList {
+  count: number;
+  rows: Users[];
+}
diff --git a/src/app/shared/not-found/not-found.component.html b/src/app/shared/not-found/not-found.component.html
new file mode 100644
index 0000000..eace439
--- /dev/null
+++ b/src/app/shared/not-found/not-found.component.html
@@ -0,0 +1,45 @@
+<div class="not-found-page">
+  <div class="not-found-page__container">
+    <div class="not-found-page__brand">
+      <img
+        class="not-found-page__brand-logo"
+        src="./assets/auth/logo.svg"
+        alt="logo"
+      />
+      <h3 class="not-found-page__brand-title">Material Admin</h3>
+    </div>
+
+    <mat-card appearance="outlined" class="not-found-page__card">
+      <mat-card-content class="not-found-page__card-content">
+        <p class="not-found-page__status">404</p>
+        <h1 class="not-found-page__title">Page Not Found</h1>
+
+        <p class="not-found-page__subtitle">
+          Oops. Looks like this page no longer exists.
+        </p>
+        <p class="not-found-page__subtitle">
+          Use one of the links below to continue.
+        </p>
+
+        <div class="not-found-page__actions">
+          <button
+            class="not-found-page__action-button"
+            mat-raised-button
+            color="primary"
+            [routerLink]="routes.DASHBOARD"
+          >
+            Back To Dashboard
+          </button>
+          <button
+            class="not-found-page__action-button"
+            mat-stroked-button
+            color="primary"
+            [routerLink]="routes.CALENDAR"
+          >
+            Open Calendar
+          </button>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>
diff --git a/src/app/shared/not-found/not-found.component.scss b/src/app/shared/not-found/not-found.component.scss
new file mode 100644
index 0000000..7c21da7
--- /dev/null
+++ b/src/app/shared/not-found/not-found.component.scss
@@ -0,0 +1,120 @@
+@use '../../styles/font' as *;
+@use '../../styles/variables' as *;
+
+.not-found-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: min(760px, calc(100vh - 140px));
+  padding: 24px;
+  box-sizing: border-box;
+  background: linear-gradient(
+    180deg,
+    rgba(83, 109, 254, 0.1) 0%,
+    rgba(83, 109, 254, 0.04) 100%
+  );
+  border-radius: 12px;
+}
+
+.not-found-page__container {
+  width: 100%;
+  max-width: 420px;
+}
+
+.not-found-page__brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.not-found-page__brand-logo {
+  width: 40px;
+  height: 40px;
+}
+
+.not-found-page__brand-title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 30px;
+  line-height: 1.1;
+  color: $blue;
+}
+
+.not-found-page__card {
+  padding: 0;
+  box-shadow: none !important;
+}
+
+.not-found-page__card-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 32px 28px !important;
+}
+
+.not-found-page__status {
+  margin: 0;
+  font-weight: 700;
+  font-size: 72px;
+  line-height: 1;
+  color: $blue;
+}
+
+.not-found-page__title {
+  margin: 8px 0 0;
+  font-weight: 600;
+  font-size: 28px;
+  line-height: 1.2;
+  color: $dark-grey;
+}
+
+.not-found-page__subtitle {
+  margin: 12px 0 0;
+  font-size: $fs-normal;
+  font-weight: 400;
+  color: $grey;
+}
+
+.not-found-page__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+  margin-top: 24px;
+  width: 100%;
+}
+
+.not-found-page__action-button {
+  min-width: 170px;
+}
+
+@media (max-width: $small) {
+  .not-found-page {
+    min-height: calc(100vh - 120px);
+    padding: 16px;
+    border-radius: 8px;
+  }
+
+  .not-found-page__brand-title {
+    font-size: 26px;
+  }
+
+  .not-found-page__card-content {
+    padding: 24px 16px !important;
+  }
+
+  .not-found-page__status {
+    font-size: 60px;
+  }
+
+  .not-found-page__title {
+    font-size: 24px;
+  }
+
+  .not-found-page__action-button {
+    width: 100%;
+  }
+}
diff --git a/src/app/shared/not-found/not-found.component.ts b/src/app/shared/not-found/not-found.component.ts
new file mode 100644
index 0000000..a614c0b
--- /dev/null
+++ b/src/app/shared/not-found/not-found.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { routes } from '../../consts';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { RouterModule } from '@angular/router';
+
+@Component({
+    selector: 'app-not-found',
+    templateUrl: './not-found.component.html',
+    styleUrls: ['./not-found.component.scss'],
+    standalone: true,
+    imports: [MatCardModule, MatButtonModule, RouterModule]
+})
+export class NotFoundComponent {
+  public routes: typeof routes = routes;
+}
diff --git a/src/app/shared/pipes/chart-size.pipe.ts b/src/app/shared/pipes/chart-size.pipe.ts
new file mode 100644
index 0000000..a89e9bd
--- /dev/null
+++ b/src/app/shared/pipes/chart-size.pipe.ts
@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'chartSize',
+  standalone: true
+})
+export class ChartSizePipe implements PipeTransform {
+  transform(value: unknown, fallback = '100%'): string {
+    if (typeof value === 'number') {
+      return `${value}px`;
+    }
+
+    if (typeof value === 'string' && value.trim().length > 0) {
+      return value;
+    }
+
+    return fallback;
+  }
+}
diff --git a/src/app/shared/popups/chat-popup/chat-popup.component.html b/src/app/shared/popups/chat-popup/chat-popup.component.html
new file mode 100644
index 0000000..dc3185f
--- /dev/null
+++ b/src/app/shared/popups/chat-popup/chat-popup.component.html
@@ -0,0 +1,40 @@
+<div class="chat-shell">
+  <div class="chat-header">
+    <h3 class="chat-title">Chat</h3>
+    <button type="button" class="close-button" (click)="close()" aria-label="Close chat">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <div class="chat-content">
+    @for (chat of chatList; track chat) {
+      <div class="message-wrapper">
+        <img [src]="chat.imgUrl" class="user-icon" [alt]="chat.userName">
+        <div class="message-content">
+          <p class="user-name">{{chat.userName}}</p>
+          <p class="user-message">{{chat.message}}</p>
+        </div>
+      </div>
+    }
+  </div>
+
+  <div class="composer">
+    <input
+      class="composer-input"
+      type="text"
+      [(ngModel)]="message"
+      placeholder="Type a message"
+      (keydown.enter)="send()"
+    >
+
+    <button
+      mat-flat-button
+      color="primary"
+      class="send-button"
+      (click)="send()"
+      [disabled]="!message?.trim()"
+    >
+      Send
+    </button>
+  </div>
+</div>
diff --git a/src/app/shared/popups/chat-popup/chat-popup.component.scss b/src/app/shared/popups/chat-popup/chat-popup.component.scss
new file mode 100644
index 0000000..e246d2d
--- /dev/null
+++ b/src/app/shared/popups/chat-popup/chat-popup.component.scss
@@ -0,0 +1,140 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/colors" as *;
+
+:host {
+  display: block;
+}
+
+.chat-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 14px;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.chat-title {
+  font-size: $fs-xl;
+  font-weight: $fw-normal;
+  color: $dark-grey;
+  margin: 0;
+}
+
+.close-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  border-radius: 50%;
+  background-color: $blue-white;
+  cursor: pointer;
+  transition: background-color .2s linear;
+
+  &:hover {
+    background-color: $blue-15;
+  }
+
+  .mat-icon {
+    margin: 0;
+    color: $grey;
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    line-height: 20px;
+  }
+}
+
+.chat-content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-height: 280px;
+  overflow: auto;
+  margin: 0;
+  padding-right: 4px;
+}
+
+.message-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.message-content {
+  background-color: $blue-white;
+  border-radius: 12px;
+  padding: 10px 12px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.user-icon {
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.user-name {
+  font-size: $fs-normal;
+  font-weight: $fw-normal;
+  color: $dark-grey;
+  margin: 0 0 2px;
+}
+
+.user-message {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $grey;
+  margin: 0;
+  line-height: 22px;
+}
+
+.composer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+  min-width: 0;
+}
+
+.composer-input {
+  width: 100%;
+  min-width: 0;
+  height: 48px;
+  border: 1px solid $gray-80;
+  border-radius: 10px;
+  box-sizing: border-box;
+  padding: 0 16px;
+  font-size: $fs-regular;
+  color: $dark-grey;
+  outline: none;
+  transition: border-color .2s linear, box-shadow .2s linear;
+
+  &::placeholder {
+    color: $grey;
+  }
+
+  &:focus {
+    border-color: $blue;
+    box-shadow: 0 0 0 2px $blue-15;
+  }
+}
+
+.send-button {
+  height: 48px;
+  min-width: 84px;
+  margin: 0;
+  border-radius: 10px;
+}
diff --git a/src/app/shared/popups/chat-popup/chat-popup.component.ts b/src/app/shared/popups/chat-popup/chat-popup.component.ts
new file mode 100644
index 0000000..3f5c802
--- /dev/null
+++ b/src/app/shared/popups/chat-popup/chat-popup.component.ts
@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+    selector: 'app-chat-popup',
+    templateUrl: './chat-popup.component.html',
+    styleUrls: ['./chat-popup.component.scss'],
+    standalone: true,
+    imports: [
+      FormsModule,
+      MatButtonModule,
+      MatDialogModule,
+      MatIconModule,
+    ]
+})
+export class ChatPopupComponent {
+  message: string;
+  chatList = [
+    {
+      imgUrl: './assets/sidebar/2.png',
+      userName: 'Jane Hew',
+      message: 'Hey! How it\'s going?'
+    },
+    {
+      imgUrl: './assets/sidebar/3.png',
+      userName: 'Axel Pittman',
+      message: 'I\'ll definitely buy this template'
+    },
+    {
+      imgUrl: './assets/sidebar/5.png',
+      userName: 'Sophia Fernandez',
+      message: 'What\'s the font-family?'
+    }
+  ];
+
+  constructor(
+    public dialogRef: MatDialogRef<ChatPopupComponent>,
+  ) {}
+
+  public close(): void {
+    this.dialogRef.close();
+  }
+
+  send(): void {
+    if (!this.message?.trim()) {
+      return;
+    }
+
+    const chat =     {
+      imgUrl: './assets/header/avatar.png',
+      userName: 'Robbert Cotton',
+      message: this.message.trim()
+    };
+    this.chatList.push(chat);
+    this.message = '';
+  }
+}
diff --git a/src/app/shared/popups/delete-popup/delete-popup.component.html b/src/app/shared/popups/delete-popup/delete-popup.component.html
new file mode 100644
index 0000000..6f13b28
--- /dev/null
+++ b/src/app/shared/popups/delete-popup/delete-popup.component.html
@@ -0,0 +1,9 @@
+<h2 class="title">Confirmation</h2>
+<p class="text">
+  Are you sure to delete this item?
+</p>
+
+<div class="button-wrapper">
+  <button class="button" mat-stroked-button color="primary" (click)="cancel()" tabindex="-1">CANCEL</button>
+  <button class="button" mat-raised-button color="primary" (click)="delete()" tabindex="-1">DELETE</button>
+</div>
diff --git a/src/app/shared/popups/delete-popup/delete-popup.component.scss b/src/app/shared/popups/delete-popup/delete-popup.component.scss
new file mode 100644
index 0000000..f663514
--- /dev/null
+++ b/src/app/shared/popups/delete-popup/delete-popup.component.scss
@@ -0,0 +1,21 @@
+@use "./src/app/styles/font" as *;
+@use "./src/app/styles/colors" as *;
+
+.title {
+  font-size: $fs-large;
+  color: $dark-grey;
+}
+
+.text {
+  font-size: $fs-normal;
+  color: $grey;
+}
+
+.button-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.button + .button {
+  margin-left: 8px;
+}
diff --git a/src/app/shared/popups/delete-popup/delete-popup.component.spec.ts b/src/app/shared/popups/delete-popup/delete-popup.component.spec.ts
new file mode 100644
index 0000000..12aeea0
--- /dev/null
+++ b/src/app/shared/popups/delete-popup/delete-popup.component.spec.ts
@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+import { DeletePopupComponent } from './delete-popup.component';
+
+describe('DeletePopupComponent', () => {
+  let component: DeletePopupComponent;
+  let fixture: ComponentFixture<DeletePopupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeletePopupComponent],
+      providers: [
+        {
+          provide: MatDialogRef,
+          useValue: {
+            close: jest.fn(),
+          },
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeletePopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/popups/delete-popup/delete-popup.component.ts b/src/app/shared/popups/delete-popup/delete-popup.component.ts
new file mode 100644
index 0000000..d118e00
--- /dev/null
+++ b/src/app/shared/popups/delete-popup/delete-popup.component.ts
@@ -0,0 +1,30 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+    selector: 'app-delete-popup',
+    templateUrl: './delete-popup.component.html',
+    styleUrls: ['./delete-popup.component.scss'],
+    standalone: true,
+    imports: [MatButtonModule]
+})
+export class DeletePopupComponent implements OnInit {
+
+  @Output() deleteConfirmed = new EventEmitter<void>();
+
+  constructor(public dialogRef: MatDialogRef<DeletePopupComponent>) { }
+
+  ngOnInit(): void {
+  }
+
+  delete(): void {
+    this.deleteConfirmed.emit();
+    this.dialogRef.close();
+  }
+
+  cancel(): void {
+    this.dialogRef.close();
+  }
+
+}
diff --git a/src/app/shared/services/auth.service.spec.ts b/src/app/shared/services/auth.service.spec.ts
new file mode 100644
index 0000000..a072f3a
--- /dev/null
+++ b/src/app/shared/services/auth.service.spec.ts
@@ -0,0 +1,88 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+import { firstValueFrom } from 'rxjs';
+import { APP_RUNTIME_CONFIG, AppRuntimeConfig } from '../../app.config';
+import { AUTH_TOKEN_STORAGE_KEY, AUTH_USER_STORAGE_KEY, routes } from '../../consts';
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  const createConfig = (isBackend: boolean): AppRuntimeConfig => ({
+    version: '1.2.0',
+    remote: 'http://localhost:8080',
+    isBackend,
+    hostApi: 'http://localhost',
+    portApi: '8080',
+    baseURLApi: 'http://localhost:8080',
+    auth: {
+      email: 'admin@flatlogic.com',
+      password: 'password',
+    },
+  });
+
+  const setup = (isBackend: boolean) => {
+    const router = { navigate: jest.fn() };
+    const toastr = { error: jest.fn(), success: jest.fn() };
+
+    TestBed.configureTestingModule({
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        AuthService,
+        { provide: APP_RUNTIME_CONFIG, useValue: createConfig(isBackend) },
+        { provide: Router, useValue: router },
+        { provide: ToastrService, useValue: toastr },
+      ],
+    });
+
+    return {
+      service: TestBed.inject(AuthService),
+      router,
+      toastr,
+    };
+  };
+
+  beforeEach(() => {
+    localStorage.clear();
+    jest.clearAllMocks();
+  });
+
+  it('stores token and default user for non-backend mode', async () => {
+    const { service, router } = setup(false);
+
+    service.receiveToken('token-value');
+
+    expect(localStorage.getItem(AUTH_TOKEN_STORAGE_KEY)).toBe('token-value');
+    expect(localStorage.getItem(AUTH_USER_STORAGE_KEY)).toBe(
+      JSON.stringify({ email: 'admin@flatlogic.com' }),
+    );
+    expect(router.navigate).toHaveBeenCalledWith([routes.DASHBOARD]);
+
+    const currentUser = await firstValueFrom(service.getCurrentUserInfo());
+    expect(currentUser.email).toBe('admin@flatlogic.com');
+  });
+
+  it('clears auth storage and redirects to login on logout', () => {
+    const { service, router } = setup(false);
+    localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, 'token');
+    localStorage.setItem(AUTH_USER_STORAGE_KEY, JSON.stringify({ email: 'a@b.c' }));
+
+    service.logoutUser();
+
+    expect(localStorage.getItem(AUTH_TOKEN_STORAGE_KEY)).toBeNull();
+    expect(localStorage.getItem(AUTH_USER_STORAGE_KEY)).toBeNull();
+    expect(router.navigate).toHaveBeenCalledWith([routes.LOGIN]);
+  });
+
+  it('returns false and redirects to login for malformed backend token', () => {
+    const { service, router } = setup(true);
+    localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, 'not-a-jwt');
+
+    const result = service.isAuthenticated();
+
+    expect(result).toBe(false);
+    expect(router.navigate).toHaveBeenCalledWith(['/login']);
+  });
+});
diff --git a/src/app/shared/services/auth.service.ts b/src/app/shared/services/auth.service.ts
new file mode 100644
index 0000000..71a3c1e
--- /dev/null
+++ b/src/app/shared/services/auth.service.ts
@@ -0,0 +1,358 @@
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { Inject, Injectable } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { map, Observable, of, take } from 'rxjs';
+import { APP_RUNTIME_CONFIG, AppRuntimeConfig } from '../../app.config';
+import { AUTH_TOKEN_STORAGE_KEY, AUTH_USER_STORAGE_KEY, routes } from '../../consts';
+import { Users } from '../models/users.model';
+
+type JwtPayload = {
+  exp?: number;
+  user?: Record<string, unknown>;
+  [key: string]: unknown;
+};
+
+export type LoginCredentials = {
+  email?: string;
+  password?: string;
+  social?: string;
+};
+
+export type RegisterCredentials = {
+  email?: string;
+  password?: string;
+  confirmPassword?: string;
+};
+
+export type ChangePasswordPayload = {
+  currentPassword?: string;
+  newPassword?: string;
+  confirmPassword?: string;
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthService {
+  public config: AppRuntimeConfig;
+  public api = '/api/auth';
+  public ROUTES: typeof routes = routes;
+
+  constructor(
+    @Inject(APP_RUNTIME_CONFIG) appConfig: AppRuntimeConfig,
+    private http: HttpClient,
+    private router: Router,
+    private toastr: ToastrService,
+  ) {
+    this.config = appConfig;
+  }
+
+  private _isFetching = false;
+  private _errorMessage = '';
+
+  get isFetching(): boolean {
+    return this._isFetching;
+  }
+
+  set isFetching(val: boolean) {
+    this._isFetching = val;
+  }
+
+  get errorMessage(): string {
+    return this._errorMessage;
+  }
+
+  set errorMessage(val: string) {
+    this._errorMessage = val;
+  }
+
+  private decodeJwtPayload(token: string): JwtPayload | null {
+    try {
+      const payload = token.split('.')[1];
+      if (!payload) {
+        return null;
+      }
+
+      const normalized = payload.replace(/-/g, '+').replace(/_/g, '/');
+      const padding = normalized.length % 4;
+      const base64 =
+        padding === 0 ? normalized : normalized + '='.repeat(4 - padding);
+      const decoded = atob(base64);
+
+      return JSON.parse(decoded) as JwtPayload;
+    } catch {
+      return null;
+    }
+  }
+
+  private extractErrorMessage(error: unknown, fallback: string): string {
+    if (error instanceof HttpErrorResponse) {
+      if (typeof error.error === 'string' && error.error.length > 0) {
+        return error.error;
+      }
+
+      if (error.error && typeof error.error === 'object') {
+        const errObj = error.error as Record<string, unknown>;
+        const message = errObj['message'];
+        if (typeof message === 'string' && message.length > 0) {
+          return message;
+        }
+      }
+
+      if (typeof error.message === 'string' && error.message.length > 0) {
+        return error.message;
+      }
+    }
+
+    if (error && typeof error === 'object') {
+      const maybeAxiosError = error as {
+        response?: { data?: unknown };
+        message?: unknown;
+      };
+
+      if (typeof maybeAxiosError.response?.data === 'string') {
+        return maybeAxiosError.response.data;
+      }
+
+      if (
+        maybeAxiosError.response?.data &&
+        typeof maybeAxiosError.response.data === 'object'
+      ) {
+        const data = maybeAxiosError.response.data as Record<string, unknown>;
+        const message = data['message'];
+        if (typeof message === 'string' && message.length > 0) {
+          return message;
+        }
+      }
+
+      if (
+        typeof maybeAxiosError.message === 'string' &&
+        maybeAxiosError.message.length > 0
+      ) {
+        return maybeAxiosError.message;
+      }
+    }
+
+    return fallback;
+  }
+
+  private toUser(data: unknown): Users {
+    const source =
+      data && typeof data === 'object'
+        ? (data as Record<string, unknown>)
+        : {};
+
+    return {
+      id: typeof source['id'] === 'string' ? source['id'] : '',
+      firstName: typeof source['firstName'] === 'string' ? source['firstName'] : '',
+      lastName: typeof source['lastName'] === 'string' ? source['lastName'] : '',
+      phoneNumber: typeof source['phoneNumber'] === 'string' ? source['phoneNumber'] : '',
+      email: typeof source['email'] === 'string' ? source['email'] : '',
+      role: typeof source['role'] === 'string' ? source['role'] : 'user',
+      disabled: Boolean(source['disabled']),
+      password: typeof source['password'] === 'string' ? source['password'] : '',
+      emailVerified: Boolean(source['emailVerified']),
+      emailVerificationToken:
+        typeof source['emailVerificationToken'] === 'string'
+          ? source['emailVerificationToken']
+          : '',
+      emailVerificationTokenExpiresAt: null,
+      passwordResetToken:
+        typeof source['passwordResetToken'] === 'string'
+          ? source['passwordResetToken']
+          : '',
+      passwordResetTokenExpiresAt: null,
+      provider: typeof source['provider'] === 'string' ? source['provider'] : 'local',
+      avatar: Array.isArray(source['avatar']) ? (source['avatar'] as Users['avatar']) : [],
+      createdBy: null,
+      updatedBy: null,
+    };
+  }
+
+  public isAuthenticated(): boolean {
+    const token = localStorage.getItem(AUTH_TOKEN_STORAGE_KEY);
+
+    if (!token) {
+      return false;
+    }
+
+    // We check if app runs with backend mode
+    if (!this.config.isBackend) {
+      return true;
+    }
+
+    const data = this.decodeJwtPayload(token);
+    if (!data) {
+      this.router.navigate(['/login']);
+      return false;
+    }
+
+    const exp = data.exp;
+    if (typeof exp !== 'number') {
+      return false;
+    }
+
+    const date = new Date().getTime() / 1000;
+    return date < exp;
+  }
+
+  public loginUser(creds: LoginCredentials): void {
+    this.requestLogin();
+    if (!this.config.isBackend) {
+      this.receiveToken('token');
+      return;
+    }
+
+    if (creds.social) {
+      window.location.href = `${this.config.baseURLApi}${this.api}/signin/${creds.social}`;
+      return;
+    }
+
+    const email = creds.email || '';
+    const password = creds.password || '';
+    if (email.length > 0 && password.length > 0) {
+      this.http
+        .post(`${this.api}/signin/local`, creds, { responseType: 'text' })
+        .pipe(take(1))
+        .subscribe({
+          next: (token: string) => {
+            this.receiveToken(token);
+          },
+          error: () => {
+            this.toastr.error('Something was wrong. Try again');
+          },
+        });
+      return;
+    }
+
+    this.toastr.error('Something was wrong. Try again');
+  }
+
+  public registerUser(payload: RegisterCredentials): void {
+    this.requestRegister();
+    const creds = payload;
+
+    if (!this.config.isBackend) {
+      this.receiveRegister();
+      this.toastr.success("You've been registered successfully");
+      this.router.navigate([this.ROUTES.LOGIN]);
+      return;
+    }
+
+    const email = creds.email || '';
+    const password = creds.password || '';
+    if (email.length > 0 && password.length > 0) {
+      this.http
+        .post(`${this.api}/signup`, creds, { responseType: 'text' })
+        .pipe(take(1))
+        .subscribe({
+          next: () => {
+            this.toastr.success("You've been registered successfully");
+            this.router.navigate([this.ROUTES.LOGIN]);
+          },
+          error: (err: unknown) => {
+            this.registerError(
+              this.extractErrorMessage(err, 'Something was wrong. Try again'),
+            );
+          },
+        });
+      return;
+    }
+
+    this.registerError('Something was wrong. Try again');
+  }
+
+  public requestRegister(): void {
+    this.isFetching = true;
+  }
+
+  public receiveRegister(): void {
+    this.isFetching = false;
+    this.errorMessage = '';
+  }
+
+  public registerError(payload: string): void {
+    this.isFetching = false;
+    this.errorMessage = payload;
+  }
+
+  public receiveToken(token: string): void {
+    let user: Record<string, unknown>;
+    if (this.config.isBackend) {
+      const payload = this.decodeJwtPayload(token);
+      user = (payload?.user as Record<string, unknown>) || {};
+    } else {
+      user = { email: this.config.auth.email };
+    }
+
+    localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, token);
+    localStorage.setItem(AUTH_USER_STORAGE_KEY, JSON.stringify(user));
+    this.receiveLogin();
+  }
+
+  public logoutUser(): void {
+    localStorage.removeItem(AUTH_TOKEN_STORAGE_KEY);
+    localStorage.removeItem(AUTH_USER_STORAGE_KEY);
+    document.cookie = 'token=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+    this.router.navigate([this.ROUTES.LOGIN]);
+  }
+
+  public loginError(payload: string): void {
+    this.isFetching = false;
+    this.errorMessage = payload;
+  }
+
+  public receiveLogin(): void {
+    this.isFetching = false;
+    this.errorMessage = '';
+    this.router.navigate([this.ROUTES.DASHBOARD]);
+  }
+
+  public requestLogin(): void {
+    this.isFetching = true;
+  }
+
+  public getCurrentUserInfo(): Observable<Users> {
+    if (!this.config.isBackend) {
+      return of(this.toUser(JSON.parse(localStorage.getItem(AUTH_USER_STORAGE_KEY) || '{}')));
+    }
+
+    return this.http
+      .get<unknown>(`${this.api}/me`)
+      .pipe(map((user: unknown) => this.toUser(user)));
+  }
+
+  public changePassword(
+    data: ChangePasswordPayload,
+  ): Observable<Record<string, unknown>> {
+    if (!this.config.isBackend) {
+      return of({ success: true });
+    }
+
+    return this.http.put<Record<string, unknown>>(
+      `${this.api}/password-update`,
+      data,
+    );
+  }
+
+  public verifyEmail(token: string): void {
+    if (!this.config.isBackend) {
+      this.toastr.success("You've been verified your email");
+      this.router.navigate([this.ROUTES.LOGIN]);
+      return;
+    }
+
+    this.http.put(`${this.api}/verify-email`, { token }).pipe(take(1)).subscribe({
+      next: () => {
+        this.toastr.success("You've been verified your email");
+        this.router.navigate([this.ROUTES.LOGIN]);
+      },
+      error: (err: unknown) => {
+        this.registerError(
+          this.extractErrorMessage(err, 'Something was wrong. Try again'),
+        );
+      },
+    });
+  }
+}
diff --git a/src/app/shared/services/data-formatter.service.ts b/src/app/shared/services/data-formatter.service.ts
new file mode 100644
index 0000000..4f1bb55
--- /dev/null
+++ b/src/app/shared/services/data-formatter.service.ts
@@ -0,0 +1,82 @@
+import { Injectable } from '@angular/core';
+
+type LabelSource = {
+  id?: string | number;
+  name?: string;
+  title?: string;
+  email?: string;
+  publicUrl?: string;
+  [key: string]: unknown;
+};
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DataFormatterService {
+  public generateLabel(
+    val: unknown,
+    item: LabelSource,
+    className: string,
+  ): unknown {
+    const elm = this.getFirstElementOfArray(val);
+    if (elm) {
+      return elm;
+    }
+    return `${className}-${item.id ?? ''}`;
+  }
+
+  public getFirstElementOfArray(val: unknown): unknown {
+    if (Array.isArray(val)) {
+      return this.getElementOfObject(val[0]);
+    }
+    return this.getElementOfObject(val);
+  }
+
+  public getElementOfObject(val: unknown): unknown {
+    if (val !== null && typeof val === 'object') {
+      const source = val as LabelSource;
+      if (source.name) {
+        return source.name;
+      }
+      if (source.title) {
+        return source.title;
+      }
+      return source.email;
+    }
+    return val;
+  }
+
+  public filesFormatter(
+    arr: LabelSource[] | null | undefined,
+  ): Array<{ name: string; publicUrl: string }> {
+    if (!arr || !arr.length) {
+      return [];
+    }
+    return arr.map((item) => ({
+      name: item.name || '',
+      publicUrl: item.publicUrl || '',
+    }));
+  }
+
+  public imageFormatter(
+    arr: LabelSource[] | null | undefined,
+  ): Array<{ publicUrl: string }> {
+    if (!arr || !arr.length) {
+      return [];
+    }
+    return arr.map((item) => ({
+      publicUrl: item.publicUrl || '',
+    }));
+  }
+
+  public oneImageFormatter(arr: LabelSource[] | null | undefined): string {
+    if (!arr || !arr.length) {
+      return '';
+    }
+    return arr[0].publicUrl || '';
+  }
+
+  public booleanFormatter(val: unknown): string {
+    return Boolean(val) ? 'Yes' : 'No';
+  }
+}
diff --git a/src/app/shared/services/file-uploader.service.ts b/src/app/shared/services/file-uploader.service.ts
new file mode 100644
index 0000000..37b5d35
--- /dev/null
+++ b/src/app/shared/services/file-uploader.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FileUploaderService {
+  constructor(private httpClient: HttpClient) {}
+
+  upload(data: FormData, url: string): Observable<string> {
+    return this.httpClient.post<string>(url, data, { responseType: 'text' as 'json' });
+  }
+}
diff --git a/src/app/shared/services/google-maps-api-loader.service.ts b/src/app/shared/services/google-maps-api-loader.service.ts
new file mode 100644
index 0000000..6e28672
--- /dev/null
+++ b/src/app/shared/services/google-maps-api-loader.service.ts
@@ -0,0 +1,53 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GoogleMapsApiLoaderService {
+  private readonly scriptSelector = 'script[data-google-maps-api="true"]';
+  private loadPromise: Promise<void> | null = null;
+
+  public load(apiKey: string): Promise<void> {
+    const mapsWindow = window as Window & { google?: { maps?: unknown } };
+    if (mapsWindow.google?.maps) {
+      return Promise.resolve();
+    }
+
+    if (this.loadPromise) {
+      return this.loadPromise;
+    }
+
+    this.loadPromise = new Promise<void>((resolve, reject) => {
+      const existingScript = document.querySelector(
+        this.scriptSelector,
+      ) as HTMLScriptElement | null;
+
+      if (existingScript) {
+        if (existingScript.getAttribute('data-loaded') === 'true') {
+          resolve();
+          return;
+        }
+        existingScript.remove();
+      }
+
+      const script = document.createElement('script');
+      script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;
+      script.async = true;
+      script.defer = true;
+      script.setAttribute('data-google-maps-api', 'true');
+      script.onload = () => {
+        script.setAttribute('data-loaded', 'true');
+        resolve();
+      };
+      script.onerror = () => {
+        this.loadPromise = null;
+        script.remove();
+        reject(new Error('Failed to load Google Maps API.'));
+      };
+
+      document.head.appendChild(script);
+    });
+
+    return this.loadPromise;
+  }
+}
diff --git a/src/app/shared/services/http-interceptor.service.spec.ts b/src/app/shared/services/http-interceptor.service.spec.ts
new file mode 100644
index 0000000..883fc96
--- /dev/null
+++ b/src/app/shared/services/http-interceptor.service.spec.ts
@@ -0,0 +1,99 @@
+import { HttpErrorResponse, HttpRequest, HttpResponse } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+import { firstValueFrom, of, throwError } from 'rxjs';
+import { APP_RUNTIME_CONFIG, AppRuntimeConfig } from '../../app.config';
+import { AUTH_TOKEN_STORAGE_KEY } from '../../consts';
+import { AuthService } from './auth.service';
+import { httpInterceptor } from './http-interceptor.service';
+
+describe('httpInterceptor', () => {
+  const config: AppRuntimeConfig = {
+    version: '1.2.0',
+    remote: 'http://localhost:8080',
+    isBackend: true,
+    hostApi: 'http://localhost',
+    portApi: '8080',
+    baseURLApi: 'http://localhost:8080',
+    auth: {
+      email: 'admin@flatlogic.com',
+      password: 'password',
+    },
+  };
+
+  const authServiceMock = {
+    logoutUser: jest.fn(),
+  } as unknown as AuthService;
+
+  beforeEach(() => {
+    localStorage.clear();
+    jest.clearAllMocks();
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: APP_RUNTIME_CONFIG, useValue: config },
+        { provide: AuthService, useValue: authServiceMock },
+      ],
+    });
+  });
+
+  it('prefixes API url and adds Authorization header when token exists', async () => {
+    localStorage.setItem(AUTH_TOKEN_STORAGE_KEY, 'token-123');
+    const request = new HttpRequest('GET', '/api/auth/me');
+
+    let interceptedRequest: HttpRequest<unknown> | null = null;
+    const response$ = TestBed.runInInjectionContext(() =>
+      httpInterceptor(request, (req) => {
+        interceptedRequest = req;
+        return of(new HttpResponse({ status: 200, body: { ok: true } }));
+      }),
+    );
+
+    await firstValueFrom(response$);
+
+    expect(interceptedRequest?.url).toBe('http://localhost:8080/api/auth/me');
+    expect(interceptedRequest?.headers.get('Authorization')).toBe(
+      'Bearer token-123',
+    );
+  });
+
+  it('prefixes API url without auth header when token is absent', async () => {
+    const request = new HttpRequest('GET', '/api/auth/me');
+
+    let interceptedRequest: HttpRequest<unknown> | null = null;
+    const response$ = TestBed.runInInjectionContext(() =>
+      httpInterceptor(request, (req) => {
+        interceptedRequest = req;
+        return of(new HttpResponse({ status: 200, body: { ok: true } }));
+      }),
+    );
+
+    await firstValueFrom(response$);
+
+    expect(interceptedRequest?.url).toBe('http://localhost:8080/api/auth/me');
+    expect(interceptedRequest?.headers.has('Authorization')).toBe(false);
+  });
+
+  it('calls logoutUser on 401 errors', async () => {
+    const request = new HttpRequest('GET', '/api/auth/me');
+
+    const response$ = TestBed.runInInjectionContext(() =>
+      httpInterceptor(
+        request,
+        () =>
+          throwError(
+            () =>
+              new HttpErrorResponse({
+                status: 401,
+                statusText: 'Unauthorized',
+                url: '/api/auth/me',
+              }),
+          ),
+      ),
+    );
+
+    await expect(firstValueFrom(response$)).rejects.toBeInstanceOf(
+      HttpErrorResponse,
+    );
+    expect(authServiceMock.logoutUser).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/app/shared/services/http-interceptor.service.ts b/src/app/shared/services/http-interceptor.service.ts
new file mode 100644
index 0000000..d5d7c1e
--- /dev/null
+++ b/src/app/shared/services/http-interceptor.service.ts
@@ -0,0 +1,30 @@
+import { inject } from '@angular/core';
+import { tap } from 'rxjs';
+import { HttpErrorResponse, HttpInterceptorFn } from '@angular/common/http';
+import { AuthService } from './auth.service';
+import { APP_RUNTIME_CONFIG } from '../../app.config';
+import { AUTH_TOKEN_STORAGE_KEY } from '../../consts';
+
+export const httpInterceptor: HttpInterceptorFn = (req, next) => {
+  const authService = inject(AuthService);
+  const config = inject(APP_RUNTIME_CONFIG);
+
+  req = req.clone({ url: config.baseURLApi + req.url });
+
+  const token = localStorage.getItem(AUTH_TOKEN_STORAGE_KEY);
+  if (token) {
+    req = req.clone({
+      headers: req.headers.set('Authorization', `Bearer ${token}`),
+    });
+  }
+
+  return next(req).pipe(
+    tap({
+      error: (err) => {
+        if (err instanceof HttpErrorResponse && err.status === 401) {
+          authService.logoutUser();
+        }
+      },
+    }),
+  );
+};
diff --git a/src/app/shared/services/image-uploader.service.ts b/src/app/shared/services/image-uploader.service.ts
new file mode 100644
index 0000000..1361e6d
--- /dev/null
+++ b/src/app/shared/services/image-uploader.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ImageUploaderService {
+  constructor(private httpClient: HttpClient) {}
+
+  upload(data: FormData, url: string): Observable<string> {
+    return this.httpClient.post<string>(url, data, { responseType: 'text' as 'json' });
+  }
+}
diff --git a/src/app/shared/services/shared.service.ts b/src/app/shared/services/shared.service.ts
new file mode 100644
index 0000000..227c274
--- /dev/null
+++ b/src/app/shared/services/shared.service.ts
@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SharedService {
+  private readonly currentThemeSubject = new BehaviorSubject<string>('blue');
+  private readonly currentModeSubject = new BehaviorSubject<string>('light');
+
+  public currentTheme: Observable<string> =
+    this.currentThemeSubject.asObservable();
+  public currentMode: Observable<string> = this.currentModeSubject.asObservable();
+
+  public setBlueTheme(): void {
+    this.currentThemeSubject.next('blue');
+  }
+
+  public setPinkTheme(): void {
+    this.currentThemeSubject.next('pink');
+  }
+
+  public setGreenTheme(): void {
+    this.currentThemeSubject.next('green');
+  }
+
+  public setDarkMode(value: boolean): void {
+    this.currentModeSubject.next(value ? 'dark' : 'light');
+  }
+}
diff --git a/src/app/shared/services/users.service.ts b/src/app/shared/services/users.service.ts
new file mode 100644
index 0000000..0ccaff9
--- /dev/null
+++ b/src/app/shared/services/users.service.ts
@@ -0,0 +1,329 @@
+import { HttpClient } from '@angular/common/http';
+import { Inject, Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { Users, UsersList } from '../models/users.model';
+import { AutoCompleteItem } from '../models/common';
+import { APP_RUNTIME_CONFIG, AppRuntimeConfig } from '../../app.config';
+
+const baseUrl = '/api/users';
+const MOCK_USERS_STORAGE_KEY = 'mock-users-crud-list';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class UsersService {
+  private config: AppRuntimeConfig;
+
+  private readonly mockUsersSeed: Users[] = [
+    {
+      id: '1',
+      firstName: 'Jane',
+      lastName: 'Hew',
+      phoneNumber: '+1 (555) 010-1001',
+      email: 'jane.hew@flatlogic.com',
+      role: 'admin',
+      disabled: false,
+      password: '',
+      emailVerified: true,
+      emailVerificationToken: '',
+      emailVerificationTokenExpiresAt: null,
+      passwordResetToken: '',
+      passwordResetTokenExpiresAt: null,
+      provider: 'local',
+      avatar: [{ publicUrl: 'assets/user/list/1.png' }],
+      createdBy: null,
+      updatedBy: null,
+    },
+    {
+      id: '2',
+      firstName: 'Alex',
+      lastName: 'Pittman',
+      phoneNumber: '+1 (555) 010-1002',
+      email: 'alex.pittman@flatlogic.com',
+      role: 'admin',
+      disabled: false,
+      password: '',
+      emailVerified: true,
+      emailVerificationToken: '',
+      emailVerificationTokenExpiresAt: null,
+      passwordResetToken: '',
+      passwordResetTokenExpiresAt: null,
+      provider: 'local',
+      avatar: [{ publicUrl: 'assets/user/list/2.png' }],
+      createdBy: null,
+      updatedBy: null,
+    },
+    {
+      id: '3',
+      firstName: 'Sophia',
+      lastName: 'Fernandez',
+      phoneNumber: '+1 (555) 010-1003',
+      email: 'sophia.fernandez@flatlogic.com',
+      role: 'user',
+      disabled: false,
+      password: '',
+      emailVerified: true,
+      emailVerificationToken: '',
+      emailVerificationTokenExpiresAt: null,
+      passwordResetToken: '',
+      passwordResetTokenExpiresAt: null,
+      provider: 'local',
+      avatar: [{ publicUrl: 'assets/user/list/3.png' }],
+      createdBy: null,
+      updatedBy: null,
+    },
+    {
+      id: '4',
+      firstName: 'Bob',
+      lastName: 'Nilson',
+      phoneNumber: '+1 (555) 010-1004',
+      email: 'bob.nilson@flatlogic.com',
+      role: 'user',
+      disabled: true,
+      password: '',
+      emailVerified: true,
+      emailVerificationToken: '',
+      emailVerificationTokenExpiresAt: null,
+      passwordResetToken: '',
+      passwordResetTokenExpiresAt: null,
+      provider: 'local',
+      avatar: [{ publicUrl: 'assets/user/list/4.png' }],
+      createdBy: null,
+      updatedBy: null,
+    },
+    {
+      id: '5',
+      firstName: 'Jessica',
+      lastName: 'Nilson',
+      phoneNumber: '+1 (555) 010-1005',
+      email: 'jessica.nilson@flatlogic.com',
+      role: 'user',
+      disabled: false,
+      password: '',
+      emailVerified: true,
+      emailVerificationToken: '',
+      emailVerificationTokenExpiresAt: null,
+      passwordResetToken: '',
+      passwordResetTokenExpiresAt: null,
+      provider: 'local',
+      avatar: [{ publicUrl: 'assets/user/list/5.png' }],
+      createdBy: null,
+      updatedBy: null,
+    },
+  ];
+
+  constructor(
+    @Inject(APP_RUNTIME_CONFIG) appConfig: AppRuntimeConfig,
+    private http: HttpClient,
+  ) {
+    this.config = appConfig;
+
+    if (!this.config.isBackend) {
+      this.ensureMockUsers();
+    }
+  }
+
+  getAll(): Observable<UsersList> {
+    if (!this.config.isBackend) {
+      return of(this.toUsersList(this.getMockUsers()));
+    }
+
+    return this.http.get<UsersList>(baseUrl);
+  }
+
+  getFilteredData(params: string): Observable<UsersList> {
+    if (!this.config.isBackend) {
+      return of(this.getFilteredMockUsers(params));
+    }
+
+    return this.http.get<UsersList>(baseUrl + params);
+  }
+
+  listAutocomplete(
+    query: string,
+    limit: number,
+  ): Observable<AutoCompleteItem[]> {
+    if (!this.config.isBackend) {
+      const normalizedQuery = (query || '').toLowerCase().trim();
+      const options = this.getMockUsers()
+        .filter((user) => {
+          const fullName = `${user.firstName || ''} ${user.lastName || ''}`
+            .trim()
+            .toLowerCase();
+          return (
+            fullName.includes(normalizedQuery) ||
+            (user.email || '').toLowerCase().includes(normalizedQuery)
+          );
+        })
+        .slice(0, limit)
+        .map((user) => ({
+          id: user.id,
+          label: `${user.firstName || ''} ${user.lastName || ''}`.trim(),
+        }));
+
+      return of(options);
+    }
+
+    const params = {
+      query,
+      limit: limit.toString(),
+    };
+    return this.http.get<AutoCompleteItem[]>(`${baseUrl}/autocomplete`, {
+      params,
+    });
+  }
+
+  getById(id: string): Observable<Users | null> {
+    if (!this.config.isBackend) {
+      const user = this.getMockUsers().find((item) => item.id === id);
+      return of(user ? this.normalizeUser(user) : null);
+    }
+
+    return this.http.get<Users>(`${baseUrl}/${id}`);
+  }
+
+  create(data: Partial<Users>): Observable<Users | Record<string, unknown>> {
+    if (!this.config.isBackend) {
+      const users = this.getMockUsers();
+      const newUser = this.normalizeUser({
+        ...data,
+        id: String(Date.now()),
+      });
+      users.unshift(newUser);
+      this.setMockUsers(users);
+      return of(newUser);
+    }
+
+    return this.http.post<Record<string, unknown>>(`${baseUrl}`, { data });
+  }
+
+  update(
+    data: Partial<Users>,
+    id: string,
+  ): Observable<Users | Record<string, unknown>> {
+    if (!this.config.isBackend) {
+      const users = this.getMockUsers();
+      const nextUsers = users.map((item) =>
+        item.id === id ? this.normalizeUser({ ...item, ...data, id }) : item,
+      );
+      this.setMockUsers(nextUsers);
+      return of(this.normalizeUser({ ...data, id }));
+    }
+
+    return this.http.put<Record<string, unknown>>(`${baseUrl}/${id}`, {
+      data,
+      id,
+    });
+  }
+
+  delete(id: string): Observable<{ id: string } | Record<string, unknown>> {
+    if (!this.config.isBackend) {
+      const users = this.getMockUsers().filter((item) => item.id !== id);
+      this.setMockUsers(users);
+      return of({ id });
+    }
+
+    return this.http.delete<Record<string, unknown>>(`${baseUrl}/${id}`);
+  }
+
+  private ensureMockUsers(): void {
+    const storedUsers = localStorage.getItem(MOCK_USERS_STORAGE_KEY);
+    if (!storedUsers) {
+      this.setMockUsers(this.mockUsersSeed);
+    }
+  }
+
+  private getMockUsers(): Users[] {
+    try {
+      const storedUsers = localStorage.getItem(MOCK_USERS_STORAGE_KEY);
+      const parsedUsers = storedUsers ? JSON.parse(storedUsers) : [];
+      if (!Array.isArray(parsedUsers)) {
+        return [];
+      }
+      return parsedUsers.map((user) => this.normalizeUser(user));
+    } catch {
+      return [];
+    }
+  }
+
+  private setMockUsers(users: Users[]): void {
+    localStorage.setItem(
+      MOCK_USERS_STORAGE_KEY,
+      JSON.stringify(users.map((user) => this.normalizeUser(user))),
+    );
+  }
+
+  private normalizeUser(data: Partial<Users>): Users {
+    return {
+      id: data?.id || '',
+      firstName: data?.firstName || '',
+      lastName: data?.lastName || '',
+      phoneNumber: data?.phoneNumber || '',
+      email: data?.email || '',
+      role: data?.role || 'user',
+      disabled: Boolean(data?.disabled),
+      password: data?.password || '',
+      emailVerified: Boolean(data?.emailVerified),
+      emailVerificationToken: data?.emailVerificationToken || '',
+      emailVerificationTokenExpiresAt:
+        data?.emailVerificationTokenExpiresAt || null,
+      passwordResetToken: data?.passwordResetToken || '',
+      passwordResetTokenExpiresAt: data?.passwordResetTokenExpiresAt || null,
+      provider: data?.provider || 'local',
+      avatar: Array.isArray(data?.avatar) ? data.avatar : [],
+      createdBy: data?.createdBy || null,
+      updatedBy: data?.updatedBy || null,
+    };
+  }
+
+  private toUsersList(rows: Users[]): UsersList {
+    return {
+      count: rows.length,
+      rows,
+    };
+  }
+
+  private getFilteredMockUsers(params: string): UsersList {
+    const query = new URLSearchParams((params || '').replace('?', ''));
+    let rows = [...this.getMockUsers()];
+
+    query.forEach((value: string, key: string) => {
+      if (!value || ['field', 'sort', 'limit'].includes(key)) {
+        return;
+      }
+
+      rows = rows.filter((user) => {
+        const source = this.getUserFieldValue(user, key);
+        return source.includes(value.toLowerCase());
+      });
+    });
+
+    const field = query.get('field');
+    const sort = query.get('sort');
+    if (field && sort) {
+      rows.sort((a, b) => {
+        const aValue = this.getUserFieldValue(a, field);
+        const bValue = this.getUserFieldValue(b, field);
+        if (aValue === bValue) {
+          return 0;
+        }
+        return aValue > bValue ? 1 : -1;
+      });
+      if (sort === 'desc') {
+        rows.reverse();
+      }
+    }
+
+    const limit = Number(query.get('limit'));
+    if (!Number.isNaN(limit) && limit > 0) {
+      rows = rows.slice(0, limit);
+    }
+
+    return this.toUsersList(rows);
+  }
+
+  private getUserFieldValue(user: Users, field: string): string {
+    const record = user as unknown as Record<string, unknown>;
+    return String(record[field] ?? '').toLowerCase();
+  }
+}
diff --git a/src/app/shared/settings-menu/settings-menu.component.html b/src/app/shared/settings-menu/settings-menu.component.html
new file mode 100644
index 0000000..2d05179
--- /dev/null
+++ b/src/app/shared/settings-menu/settings-menu.component.html
@@ -0,0 +1,48 @@
+<div class="settings-wrapper" [matMenuTriggerFor]="settingsMenu">
+  <mat-icon>settings</mat-icon>
+
+  <mat-menu #settingsMenu="matMenu" class="settings-theme-menu">
+    <div class="settings-menu-wrapper">
+      <p class="menu-title">color theme</p>
+
+      <div class="radio-group">
+        <mat-radio-button
+          color="primary"
+          [checked]="isBlueTheme"
+          (click)="changeThemeOnBlue()"
+        ></mat-radio-button>
+        <mat-radio-button
+          color="warn"
+          [checked]="isPinkTheme"
+          (click)="changeThemeOnPink()"
+        ></mat-radio-button>
+        <mat-radio-button
+          color="accent"
+          [checked]="isGreenTheme"
+          (click)="changeThemeOnGreen()"
+        ></mat-radio-button>
+      </div>
+
+      <hr class="bord" />
+
+      <p class="menu-title">dark mode</p>
+
+      <div class="slide-wrapper">
+        <mat-slide-toggle
+          (click)="onDarkMode()"
+          color="warn"
+        ></mat-slide-toggle>
+      </div>
+
+      <div class="buttons-wrapper">
+        <a
+          mat-raised-button
+          color="success"
+          target="_blank"
+          href="https://flatlogic.com/templates/angular-material-admin-full"
+          >BUY</a
+        >
+      </div>
+    </div>
+  </mat-menu>
+</div>
diff --git a/src/app/shared/settings-menu/settings-menu.component.scss b/src/app/shared/settings-menu/settings-menu.component.scss
new file mode 100644
index 0000000..da67c0f
--- /dev/null
+++ b/src/app/shared/settings-menu/settings-menu.component.scss
@@ -0,0 +1,68 @@
+@use 'src/app/styles/colors' as *;
+@use 'src/app/styles/font' as *;
+
+.settings-wrapper {
+  z-index: 10000;
+  width: 56px;
+  height: 56px;
+  top: 120px;
+  right: 0;
+  position: fixed;
+  border-radius: 50% 0 0 50%;
+  color: $white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+}
+
+.settings-menu-wrapper {
+  padding: 24px;
+}
+
+.menu-title {
+  color: $dark-grey;
+  margin: 0;
+  font-size: $fs-small;
+  font-weight: $fw-bold;
+  line-height: 1.43;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.radio-group {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 9px;
+}
+
+.bord {
+  width: 100%;
+  margin: 8px 0 16px;
+  border: none;
+  height: 1px;
+  flex-shrink: 0;
+  background-color: $black-12;
+}
+
+.slide-wrapper {
+  text-align: center;
+  padding: 9px 0;
+}
+
+.buttons-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.button {
+  text-transform: uppercase;
+}
+
+a + a {
+  margin-top: 24px;
+}
diff --git a/src/app/shared/settings-menu/settings-menu.component.ts b/src/app/shared/settings-menu/settings-menu.component.ts
new file mode 100644
index 0000000..7fbfc96
--- /dev/null
+++ b/src/app/shared/settings-menu/settings-menu.component.ts
@@ -0,0 +1,61 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { routes } from '../../consts/routes';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+
+@Component({
+    selector: 'app-settings-menu-app',
+    templateUrl: './settings-menu.component.html',
+    styleUrls: ['./settings-menu.component.scss'],
+    standalone: true,
+    imports: [
+      MatButtonModule,
+      MatIconModule,
+      MatMenuModule,
+      MatRadioModule,
+      MatSlideToggleModule,
+    ]
+})
+export class SettingsMenuAppComponent {
+  public routes: typeof routes = routes;
+
+  @Output() themeOnBlue: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() themeOnPink: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() themeOnGreen: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() darkMode: EventEmitter<boolean> = new EventEmitter<boolean>();
+  public isDarkMode: boolean = false;
+
+  public isBlueTheme: boolean = true;
+  public isPinkTheme: boolean = false;
+  public isGreenTheme: boolean = false;
+
+  public changeThemeOnBlue(): void {
+    this.isBlueTheme = true;
+    this.isPinkTheme = false;
+    this.isGreenTheme = false;
+
+    this.themeOnBlue.emit(true);
+  }
+  public changeThemeOnPink(): void {
+    this.isBlueTheme = false;
+    this.isPinkTheme = true;
+    this.isGreenTheme = false;
+
+    this.themeOnPink.emit(true);
+  }
+  public changeThemeOnGreen(): void {
+    this.isBlueTheme = false;
+    this.isPinkTheme = false;
+    this.isGreenTheme = true;
+
+    this.themeOnGreen.emit(true);
+  }
+
+  public onDarkMode(): void {
+    this.isDarkMode = !this.isDarkMode;
+    this.darkMode.emit(this.isDarkMode);
+  }
+}
diff --git a/src/app/shared/sidebar/sidebar.component.html b/src/app/shared/sidebar/sidebar.component.html
new file mode 100644
index 0000000..babdd3d
--- /dev/null
+++ b/src/app/shared/sidebar/sidebar.component.html
@@ -0,0 +1,287 @@
+<mat-list class="sidebar">
+  <div class="mat-tree-item sidebar-top-item" routerLink="{{routes.PROFILE}}" routerLinkActive="active">
+    <div>
+      <mat-icon>account_circle</mat-icon>
+      <p>Profile</p>
+    </div>
+  </div>
+
+  <div class="mat-tree-item sidebar-top-item" routerLink="{{routes.DASHBOARD}}" routerLinkActive="active">
+    <div>
+      <mat-icon>home</mat-icon>
+      <p>Dashboard</p>
+    </div>
+  </div>
+
+  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
+
+    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding routerLink="{{node.route}}" routerLinkActive="{{node.active}}">
+      <div class="mat-tree-second-item">
+        <div class="circle"></div>
+        <p>{{node.name}}</p>
+      </div>
+    </mat-tree-node>
+
+    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" class="mat-node">
+      @if (node.name === 'E-commerce') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>shopping_cart</mat-icon>
+            <p
+              class="nodejs-sup"
+              matBadge="NodeJS/.NET"
+              matBadgeColor="success"
+            >{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+      @if (node.name === 'User') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>person</mat-icon>
+            <p
+              matBadge="New"
+              matBadgeColor="warn"
+            >{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+    </mat-tree-node>
+
+  </mat-tree>
+
+  <div class="mat-tree-item sidebar-top-item" routerLink="{{routes.OVERVIEW}}" routerLinkActive="active">
+    <div>
+      <mat-icon>description</mat-icon>
+      <p>Documentation</p>
+    </div>
+  </div>
+</mat-list>
+
+<mat-list>
+  <p class="sidebar-title">Templates</p>
+
+  <mat-tree [dataSource]="templateDataSource" [treeControl]="treeControl">
+
+    <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding routerLink="{{node.route}}" routerLinkActive="{{node.active}}">
+      <div class="mat-tree-second-item">
+        <div class="circle"></div>
+        <p>{{node.name}}</p>
+      </div>
+    </mat-tree-node>
+
+    <mat-tree-node *matTreeNodeDef="let node; when: hasChild" class="mat-node">
+      @if (node.name === 'Core') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>apps</mat-icon>
+            <p>{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+      @if (node.name === 'Tables') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>border_all</mat-icon>
+            <p>{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+      @if (node.name === 'UI Elements') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>filter_none</mat-icon>
+            <p>{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+      @if (node.name === 'Forms') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>description</mat-icon>
+            <p>{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+      @if (node.name === 'Charts') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>equalizer</mat-icon>
+            <p>{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+      @if (node.name === 'Maps') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>map</mat-icon>
+            <p>{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+      @if (node.name === 'Extra') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>star_border</mat-icon>
+            <p>{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+
+      @if (node.name === 'Menu Levels') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>folder_open</mat-icon>
+            <p>{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+      @if (node.name === 'Level 1.2' || node.name === 'Level 2.2') {
+        <div class="mat-tree-item" matTreeNodeToggle>
+          <div>
+            <mat-icon>inbox</mat-icon>
+            <p>{{node.name}}</p>
+          </div>
+          <mat-icon
+            [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
+            >keyboard_arrow_down
+          </mat-icon>
+        </div>
+      }
+
+    </mat-tree-node>
+
+  </mat-tree>
+</mat-list>
+
+<mat-list class="sidebar">
+  <p class="sidebar-title">Help</p>
+  <a class="mat-tree-item sidebar-top-item help-link" href="https://flatlogic.com/templates" target="_blank" rel="noopener noreferrer">
+    <div>
+      <mat-icon>library_books</mat-icon>
+      <p>Library</p>
+    </div>
+  </a>
+  <a class="mat-tree-item sidebar-top-item help-link" href="https://flatlogic.com/forum/" target="_blank" rel="noopener noreferrer">
+    <div>
+      <mat-icon>question_answer</mat-icon>
+      <p>Support</p>
+    </div>
+  </a>
+  <a class="mat-tree-item sidebar-top-item help-link" href="https://flatlogic.com/forum" target="_blank" rel="noopener noreferrer">
+    <div>
+      <mat-icon>help_outline</mat-icon>
+      <p>FAQ</p>
+    </div>
+  </a>
+</mat-list>
+
+<mat-list class="sidebar">
+  <p class="sidebar-title">Projects</p>
+
+  <div class="mat-tree-item sidebar-top-item project-item">
+    <div>
+      <div class="project-circle project-circle_yellow"></div>
+      <p>My resend</p>
+    </div>
+  </div>
+  <div class="mat-tree-item sidebar-top-item project-item">
+    <div>
+      <div class="project-circle project-circle_blue"></div>
+      <p>Starred</p>
+    </div>
+  </div>
+  <div class="mat-tree-item sidebar-top-item project-item">
+    <div>
+      <div class="project-circle project-circle_pink"></div>
+      <p>Background</p>
+    </div>
+  </div>
+</mat-list>
+
+<mat-list class="sidebar">
+  <div class="add-section-wrapper" [matMenuTriggerFor]="newSection">
+    <div class="add-icon-wrapper">
+      <mat-icon class="add-icon">add</mat-icon>
+    </div>
+    <p class="add-section-title">Add section</p>
+  </div>
+
+  <mat-menu #newSection="matMenu" [hasBackdrop]="false" class="add-section-menu-panel">
+    <div class="add-section-menu">
+      <h3 class="menu-title">Add section</h3>
+
+      <mat-form-field (click)="stopPropagation($event)" class="form-field">
+        <input matInput placeholder="Section name">
+      </mat-form-field>
+
+      <div class="menu-buttons-wrapper">
+        <button mat-flat-button color="warn" class="menu-button">Add</button>
+        <button mat-flat-button color="primary" class="menu-cancel-button">Cancel</button>
+      </div>
+    </div>
+  </mat-menu>
+</mat-list>
+
+<div class="space"></div>
+
+<mat-list class="sidebar">
+  <mat-list-item>
+    <div class="chat-section-wrapper" (click)="openChat()">
+      <div class="chat-icon-wrapper">
+        <mat-icon class="chat-icon">chat</mat-icon>
+      </div>
+
+      <p class="chat-section-title">Chat</p>
+    </div>
+  </mat-list-item>
+</mat-list>
diff --git a/src/app/shared/sidebar/sidebar.component.scss b/src/app/shared/sidebar/sidebar.component.scss
new file mode 100644
index 0000000..2d95102
--- /dev/null
+++ b/src/app/shared/sidebar/sidebar.component.scss
@@ -0,0 +1,310 @@
+@use "src/app/styles/font" as *;
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/sidebar" as sidebar;
+
+.mat-mdc-list-base {
+  border-bottom: 1px solid $gray-80;
+  width: 100%;
+  padding-bottom: 16px;
+
+  &:last-child {
+    border-top: 1px solid $gray-80;
+  }
+
+  & .mat-mdc-list-item {
+    display: flex;
+    cursor: pointer;
+    width: auto;
+    padding: 0 16px;
+    font-size: $fs-small;
+    height: 45px;
+    --mat-list-list-item-label-text-size: #{$fs-small};
+    --mat-list-list-item-label-text-weight: #{$fw-normal};
+    --mat-list-list-item-label-text-line-height: 20px;
+    --mat-list-list-item-label-text-tracking: 0;
+    --mat-list-list-item-leading-icon-start-space: 0;
+    --mat-list-list-item-leading-icon-end-space: 24px;
+
+    .mat-icon.mat-mdc-list-item-icon {
+      margin-right: 0;
+    }
+
+    &.active {
+      outline: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.mat-icon {
+  margin-right: 24px;
+  font-size: $fs-large;
+  color: sidebar.$sidebar-icon-color;
+  padding: 0;
+}
+
+
+.sidebar-title {
+  color: sidebar.$sidebar-title-color;
+  font-size: $fs-small;
+  text-transform: uppercase;
+  margin-top: 24px;
+  margin-left: 36px;
+  margin-bottom: 16px;
+}
+
+.mat-mdc-list-base .mat-mdc-list-item.ui-element {
+  padding-left: 40px;
+}
+
+.circle {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: sidebar.$sidebar-circle-color;
+  margin-left: 20px;
+}
+
+.project-circle {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 24px;
+  margin-left: 0;
+
+  &_yellow {
+    background-color: $yellow;
+  }
+
+  &_blue {
+    background-color: $blue;
+  }
+
+  &_pink {
+    background-color: $pink;
+  }
+}
+
+.project-item p {
+  margin: 0;
+}
+
+
+.mat-tree-item {
+  display: flex;
+  cursor: pointer;
+  padding-left: 33px;
+  justify-content: space-between;
+  width: 100%;
+  height: 45px;
+  align-items: center;
+
+  & div {
+    display: flex;
+    align-items: center;
+
+    & p {
+      margin: 0;
+      & .mat-badge-content {
+        width: auto;
+        min-width: 16px;
+        padding: 0 5px;
+        border-radius: 32px;
+        top: -6px;
+        right: -22px;
+        line-height: 16px;
+        height: 16px;
+        font-size: 12px;
+        font-weight: $fw-normal;
+      }
+    }
+    .nodejs-sup {
+      .mat-badge-content {
+        right: -46px;
+      }
+    }
+  }
+
+  &>mat-icon {
+    display: none;
+  }
+}
+
+.help-link {
+  color: inherit;
+  text-decoration: none;
+
+  &:visited,
+  &:hover,
+  &:active,
+  &:focus {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.mat-node {
+  &:hover {
+    & .mat-tree-item {
+      & mat-icon {
+        display: block;
+      }
+    }
+  }
+}
+
+mat-tree-node {
+  min-height: 45px;
+  outline: none;
+
+  &:hover {
+    cursor: pointer;
+    background-color: sidebar.$sidebar-background-color-hover;
+  }
+}
+
+mat-tree-node[aria-expanded="true"] {
+  & .mat-tree-item {
+    & mat-icon {
+      display: block;
+    }
+  }
+}
+
+.mat-tree-second-item {
+  display: flex;
+  align-items: center;
+
+  & div {
+    margin-right: 20px;
+  }
+
+  & p {
+    margin: 0;
+  }
+}
+
+.rotateUp {
+  transform: rotate(180deg);
+  transition: transform .3s linear;
+}
+
+.rotateDown {
+  transform: rotate(0deg);
+  transition: transform .3s linear;
+}
+
+.add-section-wrapper, .chat-section-wrapper {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  cursor: pointer;
+  margin-bottom: -8px;
+}
+
+.chat-section-wrapper {
+  padding: 8px 16px 16px 0;
+}
+
+.add-icon-wrapper, .chat-icon-wrapper {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: $pink;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 24px 0 12px;
+}
+
+.chat-icon-wrapper {
+  width: 45px;
+  height: 45px;
+  background-color: $blue;
+  margin-right: 8px;
+  margin-left: 0;
+}
+
+.add-icon, .chat-icon {
+  color: $white;
+  margin: 0;
+}
+
+.add-section-title, .chat-section-title {
+  margin: 0;
+}
+
+.add-section-menu {
+  background-color: $light-blue;
+  padding: 24px;
+  //.blueTheme, .mat-input-element {
+  //  caret-color: #9013FE !important;
+  //}
+  //.form-field, .mat-focused  {
+  //  color: red;
+  //  caret-color: #9013FE !important;
+  //}
+}
+
+//
+//::ng-deep .form-field.mat-focused .mat-form-field-underline {
+//  //display: none;
+//  color: #31C2A0;
+//}
+//
+//
+//::ng-deep .form-field input {
+//  caret-color: red;
+//  color: yellow;
+//}
+//
+//.mat-form-field-ripple {
+//  background-color: yellow !important;
+//}
+//
+//.mat-form-field.mat-focused .mat-form-field-ripple {
+//  background-color: #69f0ae !important;
+//}
+
+.menu-title {
+  font-size: $fs-normal;
+  color: $white;
+  //caret-color: $yellow;
+  margin: 0;
+}
+
+.form-field {
+  color: $white;
+}
+
+//.mat-form-field.mat-focused .mat-form-field-label {
+//  color: #00D318 !important;
+//}
+
+.menu-buttons-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.menu-button {
+  box-shadow: none;
+
+  & + .menu-cancel-button {
+    margin-left: 5px;
+  }
+}
+
+.menu-cancel-button {
+  box-shadow: none;
+
+  &:hover {
+    background-color: #8B9BFF;
+  }
+}
+
+.space {
+  margin-bottom: 240px;
+}
diff --git a/src/app/shared/sidebar/sidebar.component.ts b/src/app/shared/sidebar/sidebar.component.ts
new file mode 100644
index 0000000..5f6d765
--- /dev/null
+++ b/src/app/shared/sidebar/sidebar.component.ts
@@ -0,0 +1,208 @@
+import { Component } from '@angular/core';
+import { routes } from '../../consts';
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
+import { MatDialog } from '@angular/material/dialog';
+import { ChatPopupComponent } from '../popups/chat-popup/chat-popup.component';
+import { CommonModule } from '@angular/common';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTreeModule } from '@angular/material/tree';
+import { RouterModule } from '@angular/router';
+
+
+interface SidebarNode {
+  name: string;
+  route?: string;
+  active?: string;
+  children?: SidebarNode[];
+}
+
+interface SidebarFlatNode {
+  expandable: boolean;
+  name: string;
+  level: number;
+  route?: string;
+  active?: string;
+}
+
+const TREE_DATA: SidebarNode[] = [
+  {
+    name: 'E-commerce',
+    children: [
+      {name: 'Product Manage', route: routes.MANAGEMENT, active: 'active'},
+      {name: 'Products Grid', route: routes.PRODUCTS, active: 'active'},
+      {name: 'Product Page', route: routes.PRODUCT, active: 'active'},
+    ]
+  },
+  {
+    name: 'User',
+    children: [
+      { name: 'User List', route: routes.Users, active: 'active' },
+      { name: 'User Add', route: routes.Users_CREATE, active: 'active' },
+      { name: 'User Edit', route: routes.Users_EDIT, active: 'active' },
+    ]
+  }
+];
+
+const TEMPLATE_NODE: SidebarNode[] = [
+  {
+    name: 'Core',
+    children: [
+      { name: 'Typography', route: routes.TYPOGRAPHY, active: 'active' },
+      { name: 'Colors', route: routes.COLORS, active: 'active' },
+      { name: 'Grid', route: routes.GRID, active: 'active' },
+    ]
+  },
+  {
+    name: 'Tables',
+    children: [
+      { name: 'Tables Basic', route: routes.TABLES_BASIC, active: 'active' },
+      { name: 'Tables Dynamic', route: routes.TABLES_DYNAMIC, active: 'active' },
+    ]
+  },
+  {
+    name: 'UI Elements',
+    children: [
+      { name: 'Icon', route: routes.ICONS, active: 'active' },
+      { name: 'Badge', route: routes.BADGE, active: 'active' },
+      { name: 'Carousel', route: routes.CAROUSEL, active: 'active' },
+      { name: 'Cards', route: routes.CARDS, active: 'active' },
+      { name: 'Modal', route: routes.MODAL, active: 'active' },
+      { name: 'Notification', route: routes.NOTIFICATION, active: 'active' },
+      { name: 'Navbar', route: routes.NAVBAR, active: 'active' },
+      { name: 'Tooltips', route: routes.TOOLTIPS, active: 'active' },
+      { name: 'Tabs', route: routes.TABS, active: 'active' },
+      { name: 'Pagination', route: routes.PAGINATION, active: 'active' },
+      { name: 'Progress', route: routes.PROGRESS, active: 'active' },
+      { name: 'Widget', route: routes.WIDGET, active: 'active' },
+    ]
+  },
+  {
+    name: 'Forms',
+    children: [
+      { name: 'Form Elements', route: routes.FORMS_ELEMENTS, active: 'active' },
+      { name: 'Form Validation', route: routes.FORMS_VALIDATION, active: 'active' },
+    ]
+  },
+  {
+    name: 'Charts',
+    children: [
+      { name: 'Charts Overview', route: routes.OVERVIEW_CHARTS, active: 'active' },
+      { name: 'Line Charts', route: routes.LINE_CHARTS, active: 'active' },
+      { name: 'Bar Charts', route: routes.BAR_CHARTS, active: 'active' },
+      { name: 'Pie Charts', route: routes.PIE_CHARTS, active: 'active' },
+    ]
+  },
+  {
+    name: 'Maps',
+    children: [
+      { name: 'Google Map', route: routes.GOOGLE_MAP, active: 'active' },
+      { name: 'Vector Map', route: routes.VECTOR_MAP, active: 'active' }
+    ]
+  },
+  {
+    name: 'Extra',
+    children: [
+      { name: 'Calendar', route: routes.CALENDAR, active: 'active' },
+      { name: 'Invoice', route: routes.INVOICE, active: 'active' },
+      { name: 'Login Page', route: routes.LOGIN_PAGE, active: 'active' },
+      { name: 'Error Page', route: routes.ERROR_PAGE, active: 'active' },
+      { name: 'Gallery', route: routes.GALLERY, active: 'active' },
+      { name: 'Search Result', route: routes.SEARCH_RESULT, active: 'active' },
+      { name: 'Time Line', route: routes.TIME_LINE, active: 'active' }
+    ]
+  },
+  {
+    name: 'Menu Levels',
+    children: [
+      { name: 'Level 1.1' },
+      {
+        name: 'Level 1.2',
+        children: [
+          { name: 'Level 2.1' },
+          {
+            name: 'Level 2.2',
+            children: [
+              { name: 'Level 3.1'}
+            ]
+          }
+        ]
+      }
+    ]
+  }
+];
+
+
+/** Flat node with expandable and level information */
+@Component({
+    selector: 'app-sidebar',
+    templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.scss'],
+    standalone: true,
+    imports: [
+      CommonModule,
+      MatBadgeModule,
+      MatButtonModule,
+      MatFormFieldModule,
+      MatIconModule,
+      MatInputModule,
+      MatListModule,
+      MatMenuModule,
+      MatTreeModule,
+      RouterModule,
+    ]
+})
+export class SidebarComponent {
+  public routes: typeof routes = routes;
+  public isOpenUiElements = false;
+
+
+  private _transformer = (node: SidebarNode, level: number): SidebarFlatNode => {
+    return {
+      expandable: !!node.children && node.children.length > 0,
+      name: node.name,
+      level,
+      route: node.route,
+      active: node.active
+    };
+  };
+
+  treeControl = new FlatTreeControl<SidebarFlatNode>(
+    node => node.level, node => node.expandable);
+
+  treeFlattener = new MatTreeFlattener<SidebarNode, SidebarFlatNode>(
+    this._transformer, node => node.level, node => node.expandable, node => node.children);
+
+  dataSource = new MatTreeFlatDataSource<SidebarNode, SidebarFlatNode>(this.treeControl, this.treeFlattener);
+  templateDataSource = new MatTreeFlatDataSource<SidebarNode, SidebarFlatNode>(this.treeControl, this.treeFlattener);
+
+
+  constructor(public dialog: MatDialog) {
+    this.dataSource.data = TREE_DATA;
+    this.templateDataSource.data = TEMPLATE_NODE;
+  }
+
+  hasChild = (_: number, node: SidebarFlatNode): boolean => node.expandable;
+
+  public openUiElements(): void {
+    this.isOpenUiElements = !this.isOpenUiElements;
+  }
+
+  public openChat(): void {
+    this.dialog.open(ChatPopupComponent, {
+      width: '436px',
+      maxWidth: 'calc(100vw - 32px)',
+      panelClass: 'chat-dialog-panel',
+    });
+  }
+
+  public stopPropagation(event: Event): void {
+    event.stopPropagation();
+  }
+}
diff --git a/src/app/shared/ui-elements/breadcrumb/breadcrumb.component.html b/src/app/shared/ui-elements/breadcrumb/breadcrumb.component.html
new file mode 100644
index 0000000..4eff2a3
--- /dev/null
+++ b/src/app/shared/ui-elements/breadcrumb/breadcrumb.component.html
@@ -0,0 +1,16 @@
+<mat-card appearance="outlined" class="breadcrumb-card">
+  <mat-card-content>
+    <nav class="breadcrumb-list" aria-label="Breadcrumb">
+      @for (elem of pathElements; track elem) {
+        <span class="breadcrumb-list-item">
+          <span class="text">{{ elem }}</span>
+          <mat-icon class="icon" aria-hidden="true">keyboard_arrow_right</mat-icon>
+        </span>
+      }
+
+      <span class="breadcrumb-list-item active" [routerLink]="path">
+        <span class="text">{{ lastElement }}</span>
+      </span>
+    </nav>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/shared/ui-elements/breadcrumb/breadcrumb.component.scss b/src/app/shared/ui-elements/breadcrumb/breadcrumb.component.scss
new file mode 100644
index 0000000..b7ecf7f
--- /dev/null
+++ b/src/app/shared/ui-elements/breadcrumb/breadcrumb.component.scss
@@ -0,0 +1,46 @@
+@use 'src/app/styles/colors' as *;
+@use 'src/app/styles/font' as *;
+
+.breadcrumb-card {
+  padding: 0;
+}
+
+.breadcrumb-list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 0;
+  margin: 0;
+}
+
+.breadcrumb-list-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: $fs-regular;
+  line-height: 1.2;
+  min-height: 24px;
+  text-decoration: none;
+  outline: none;
+
+  &.active {
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+.text {
+  display: inline-flex;
+  align-items: center;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: $fs-medium;
+  width: $fs-medium;
+  height: $fs-medium;
+  padding: 0;
+  margin-top: -1px;
+}
diff --git a/src/app/shared/ui-elements/breadcrumb/breadcrumb.component.ts b/src/app/shared/ui-elements/breadcrumb/breadcrumb.component.ts
new file mode 100644
index 0000000..3bd8b67
--- /dev/null
+++ b/src/app/shared/ui-elements/breadcrumb/breadcrumb.component.ts
@@ -0,0 +1,37 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterModule } from '@angular/router';
+import { routes } from '../../../consts';
+
+@Component({
+    selector: 'app-breadcrumb',
+    templateUrl: './breadcrumb.component.html',
+    styleUrls: ['./breadcrumb.component.scss'],
+    standalone: true,
+    imports: [MatCardModule, MatIconModule, RouterModule]
+})
+export class BreadcrumbComponent implements OnInit {
+  @Input() public path: string = '';
+  public routes: typeof routes = routes;
+  public pathElements: string[] = [];
+  public lastElement: string = '';
+
+  ngOnInit(): void {
+    if (!this.path) {
+      return;
+    }
+
+    const elements = this.path.slice(1).split('/').filter(Boolean);
+    const currentPage = elements.pop() || '';
+
+    this.pathElements = elements.map((element: string) => this.formatElement(element));
+    this.lastElement = this.formatElement(currentPage);
+  }
+
+  private formatElement(value: string): string {
+    return value
+      .replace(/[-_]/g, ' ')
+      .replace(/(^|\s)\S/g, (letter: string) => letter.toUpperCase());
+  }
+}
diff --git a/src/app/shared/ui-elements/carousel/carousel.component.html b/src/app/shared/ui-elements/carousel/carousel.component.html
new file mode 100644
index 0000000..7090c90
--- /dev/null
+++ b/src/app/shared/ui-elements/carousel/carousel.component.html
@@ -0,0 +1,35 @@
+<div class="shared-carousel">
+  <div #swiperContainer class="swiper shared-carousel__swiper">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide shared-carousel__slide" *ngFor="let slide of slides; trackBy: trackBySlide">
+        <img
+          [src]="slide.src"
+          [alt]="slide.alt"
+          [title]="slide.text || slide.alt"
+          [style.aspect-ratio]="aspectRatio"
+        >
+      </div>
+    </div>
+
+    <button
+      *ngIf="showNavigation && slides.length > 1"
+      mat-icon-button
+      class="shared-carousel__nav shared-carousel__prev"
+      type="button"
+      aria-label="Previous slide"
+    >
+      <mat-icon>chevron_left</mat-icon>
+    </button>
+    <button
+      *ngIf="showNavigation && slides.length > 1"
+      mat-icon-button
+      class="shared-carousel__nav shared-carousel__next"
+      type="button"
+      aria-label="Next slide"
+    >
+      <mat-icon>chevron_right</mat-icon>
+    </button>
+
+    <div *ngIf="showPagination && slides.length > 1" class="shared-carousel__pagination"></div>
+  </div>
+</div>
diff --git a/src/app/shared/ui-elements/carousel/carousel.component.scss b/src/app/shared/ui-elements/carousel/carousel.component.scss
new file mode 100644
index 0000000..2f82bff
--- /dev/null
+++ b/src/app/shared/ui-elements/carousel/carousel.component.scss
@@ -0,0 +1,122 @@
+@use "src/app/styles/colors" as *;
+
+.shared-carousel {
+  position: relative;
+}
+
+.shared-carousel__swiper {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+.shared-carousel__swiper .swiper-wrapper {
+  box-sizing: content-box;
+  display: flex;
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
+  width: 100%;
+}
+
+.shared-carousel__swiper .swiper-slide {
+  display: block;
+  flex-shrink: 0;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.shared-carousel__swiper.swiper-horizontal {
+  touch-action: pan-y;
+}
+
+.shared-carousel__swiper.swiper-vertical {
+  touch-action: pan-x;
+}
+
+.shared-carousel__swiper .swiper-notification {
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  z-index: -1;
+}
+
+.shared-carousel__slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.shared-carousel__nav {
+  position: absolute !important;
+  top: 50% !important;
+  bottom: auto !important;
+  transform: translateY(-50%) !important;
+  z-index: 5 !important;
+  width: 38px;
+  height: 38px;
+  color: $white !important;
+  background-color: rgba(0, 0, 0, 0.55) !important;
+  border: 1px solid rgba($white, 0.35);
+  border-radius: 999px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  pointer-events: auto;
+}
+
+.shared-carousel__nav mat-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+}
+
+.shared-carousel__prev {
+  left: 12px !important;
+  right: auto !important;
+}
+
+.shared-carousel__next {
+  right: 12px !important;
+  left: auto !important;
+}
+
+.shared-carousel__nav:hover {
+  background-color: rgba(0, 0, 0, 0.7) !important;
+}
+
+.shared-carousel__nav.swiper-button-disabled {
+  cursor: auto;
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.shared-carousel__pagination {
+  position: absolute;
+  left: 50%;
+  bottom: 12px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 2;
+}
+
+.shared-carousel__pagination .swiper-pagination-bullet {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  opacity: 1;
+  margin: 0 !important;
+  background-color: rgba($white, 0.55);
+  transition: all 180ms ease;
+}
+
+.shared-carousel__pagination .swiper-pagination-bullet-active {
+  width: 18px;
+  background-color: $white;
+}
diff --git a/src/app/shared/ui-elements/carousel/carousel.component.ts b/src/app/shared/ui-elements/carousel/carousel.component.ts
new file mode 100644
index 0000000..00c5a49
--- /dev/null
+++ b/src/app/shared/ui-elements/carousel/carousel.component.ts
@@ -0,0 +1,98 @@
+import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnDestroy, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
+import Swiper from 'swiper';
+import { A11y, Navigation, Pagination } from 'swiper/modules';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+export interface CarouselSlide {
+  src: string;
+  alt: string;
+  text?: string;
+}
+
+@Component({
+  selector: 'app-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatIconModule]
+})
+export class CarouselComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @Input() slides: CarouselSlide[] = [];
+  @Input() aspectRatio = '16 / 10';
+  @Input() loop = true;
+  @Input() showNavigation = true;
+  @Input() showPagination = true;
+  @Input() speed = 700;
+
+  @ViewChild('swiperContainer', { static: true }) private swiperContainer!: ElementRef<HTMLDivElement>;
+
+  private swiperInstance?: Swiper;
+
+  public ngAfterViewInit(): void {
+    this.createSwiper();
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (!this.swiperContainer?.nativeElement) {
+      return;
+    }
+
+    if (
+      changes['slides'] ||
+      changes['loop'] ||
+      changes['showNavigation'] ||
+      changes['showPagination'] ||
+      changes['speed']
+    ) {
+      this.recreateSwiper();
+    }
+  }
+
+  public ngOnDestroy(): void {
+    this.destroySwiper();
+  }
+
+  public trackBySlide(_index: number, slide: CarouselSlide): string {
+    return `${slide.src}-${slide.alt}`;
+  }
+
+  private recreateSwiper(): void {
+    this.destroySwiper();
+    this.createSwiper();
+  }
+
+  private createSwiper(): void {
+    const container = this.swiperContainer?.nativeElement;
+    if (!container || this.slides.length === 0) {
+      return;
+    }
+
+    const prevEl = container.querySelector('.shared-carousel__prev') as HTMLElement | null;
+    const nextEl = container.querySelector('.shared-carousel__next') as HTMLElement | null;
+    const paginationEl = container.querySelector('.shared-carousel__pagination') as HTMLElement | null;
+
+    this.swiperInstance = new Swiper(container, {
+      modules: [Navigation, Pagination, A11y],
+      slidesPerView: 1,
+      loop: this.loop && this.slides.length > 1,
+      speed: this.speed,
+      navigation: this.showNavigation && prevEl && nextEl ? { prevEl, nextEl } : false,
+      pagination: this.showPagination && paginationEl ? { el: paginationEl, clickable: true } : false,
+      a11y: {
+        enabled: true
+      }
+    });
+  }
+
+  private destroySwiper(): void {
+    if (!this.swiperInstance) {
+      return;
+    }
+
+    this.swiperInstance.destroy(true, true);
+    this.swiperInstance = undefined;
+  }
+}
diff --git a/src/app/shared/ui-elements/date-menu/date-menu.component.html b/src/app/shared/ui-elements/date-menu/date-menu.component.html
new file mode 100644
index 0000000..4f1ebe3
--- /dev/null
+++ b/src/app/shared/ui-elements/date-menu/date-menu.component.html
@@ -0,0 +1,6 @@
+<mat-select class="date-menu" [(ngModel)]="selectedMatSelectValue" (selectionChange)="changedMatSelectionValue($event.value)">
+  <mat-option class="date-option" [value]="matSelectFields.daily">Daily</mat-option>
+  <mat-option class="date-option" [value]="matSelectFields.weekly">Weekly</mat-option>
+  <mat-option class="date-option" [value]="matSelectFields.monthly">Monthly</mat-option>
+</mat-select>
+
diff --git a/src/app/shared/ui-elements/date-menu/date-menu.component.scss b/src/app/shared/ui-elements/date-menu/date-menu.component.scss
new file mode 100644
index 0000000..15c4548
--- /dev/null
+++ b/src/app/shared/ui-elements/date-menu/date-menu.component.scss
@@ -0,0 +1,14 @@
+@use 'src/app/styles/font' as *;
+@use 'src/app/styles/colors' as *;
+
+.date-menu {
+  border: none;
+  width: auto;
+  padding: 8px 4px 8px 4px;
+}
+
+.date-option {
+  font-size: $fs-normal;
+  font-weight: $fw-lighter;
+  color: $dark-grey;
+}
diff --git a/src/app/shared/ui-elements/date-menu/date-menu.component.ts b/src/app/shared/ui-elements/date-menu/date-menu.component.ts
new file mode 100644
index 0000000..60bc33b
--- /dev/null
+++ b/src/app/shared/ui-elements/date-menu/date-menu.component.ts
@@ -0,0 +1,26 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+
+enum matSelectedFields {
+  daily = 'Daily',
+  weekly = 'Weekly',
+  monthly = 'Monthly'
+}
+
+@Component({
+    selector: 'app-date-menu',
+    templateUrl: './date-menu.component.html',
+    styleUrls: ['./date-menu.component.scss'],
+    standalone: true,
+    imports: [FormsModule, MatSelectModule]
+})
+export class DateMenuComponent {
+  @Output() changeDateType = new EventEmitter<string>();
+  public matSelectFields: typeof matSelectedFields = matSelectedFields;
+  public selectedMatSelectValue = matSelectedFields.daily;
+
+  public changedMatSelectionValue(dateType: string) {
+    this.changeDateType.emit(dateType);
+  }
+}
diff --git a/src/app/shared/ui-elements/index.ts b/src/app/shared/ui-elements/index.ts
new file mode 100644
index 0000000..a317e8d
--- /dev/null
+++ b/src/app/shared/ui-elements/index.ts
@@ -0,0 +1,4 @@
+export * from './settings-menu/settings-menu.component';
+export * from './date-menu/date-menu.component';
+export * from './breadcrumb/breadcrumb.component';
+export * from './carousel/carousel.component';
diff --git a/src/app/shared/ui-elements/settings-menu/settings-menu.component.html b/src/app/shared/ui-elements/settings-menu/settings-menu.component.html
new file mode 100644
index 0000000..12ef2c1
--- /dev/null
+++ b/src/app/shared/ui-elements/settings-menu/settings-menu.component.html
@@ -0,0 +1,11 @@
+<button class="settings-button" color="default" mat-mini-fab [matMenuTriggerFor]="settings">
+  <mat-icon class="settings-button__icon">more_vert</mat-icon>
+</button>
+<div class="settings-menu">
+  <mat-menu #settings="matMenu" xPosition="before">
+    <button class="settings-menu__item" mat-menu-item>Edit</button>
+    <button class="settings-menu__item" mat-menu-item>Copy</button>
+    <button class="settings-menu__item" mat-menu-item>Delete</button>
+    <button class="settings-menu__item" mat-menu-item>Print</button>
+  </mat-menu>
+</div>
diff --git a/src/app/shared/ui-elements/settings-menu/settings-menu.component.scss b/src/app/shared/ui-elements/settings-menu/settings-menu.component.scss
new file mode 100644
index 0000000..68ef478
--- /dev/null
+++ b/src/app/shared/ui-elements/settings-menu/settings-menu.component.scss
@@ -0,0 +1,31 @@
+@use "src/app/styles/variables" as *;
+
+.settings-button {
+  --mat-fab-small-container-color: transparent;
+  --mat-fab-small-state-layer-color: transparent;
+  --mat-fab-small-ripple-color: transparent;
+  box-shadow: none !important;
+  background-color: transparent !important;
+  color: $settings-button-color;
+
+  &:hover {
+    background-color: rgba($blue, 0.12) !important;
+    color: $settings-button-color-hover;
+  }
+
+  &__icon {
+    color: inherit;
+  }
+}
+
+.settings-menu {
+  position: absolute;
+
+  &__item {
+    color: $dark-grey;
+
+    &:hover {
+      background-color: $settings-menu-background-color-hover;
+    }
+  }
+}
diff --git a/src/app/shared/ui-elements/settings-menu/settings-menu.component.ts b/src/app/shared/ui-elements/settings-menu/settings-menu.component.ts
new file mode 100644
index 0000000..cc46283
--- /dev/null
+++ b/src/app/shared/ui-elements/settings-menu/settings-menu.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+
+@Component({
+    selector: 'app-settings-menu',
+    templateUrl: './settings-menu.component.html',
+    styleUrls: ['./settings-menu.component.scss'],
+    standalone: true,
+    imports: [MatButtonModule, MatIconModule, MatMenuModule]
+})
+export class SettingsMenuComponent {
+}
diff --git a/src/app/shared/uploaders/file-uploader/file-uploader.component.html b/src/app/shared/uploaders/file-uploader/file-uploader.component.html
new file mode 100644
index 0000000..cd74303
--- /dev/null
+++ b/src/app/shared/uploaders/file-uploader/file-uploader.component.html
@@ -0,0 +1,15 @@
+<div class="form-group">
+  <button (click)="fileInput.click()" mat-flat-button color="default">
+    Select file
+    <input (change)="uploadFile($event)" type="file" #fileInput name="..." />
+  </button>
+</div>
+@if (files.length > 0) {
+  <div class="mt-2">
+    @for (file of files; track file) {
+      <a href="{{ file.publicUrl }}" download>
+        {{ file.name }} <i class="la la-times" (click)="deleteFile(file.id)"></i>
+      </a>
+    }
+  </div>
+}
diff --git a/src/app/shared/uploaders/file-uploader/file-uploader.component.scss b/src/app/shared/uploaders/file-uploader/file-uploader.component.scss
new file mode 100644
index 0000000..45b1e7a
--- /dev/null
+++ b/src/app/shared/uploaders/file-uploader/file-uploader.component.scss
@@ -0,0 +1,11 @@
+input {
+  display: none;
+}
+
+div {
+  text-align: center;
+}
+
+.form-group {
+  margin-top: 5px;
+}
diff --git a/src/app/shared/uploaders/file-uploader/file-uploader.component.spec.ts b/src/app/shared/uploaders/file-uploader/file-uploader.component.spec.ts
new file mode 100644
index 0000000..52667f4
--- /dev/null
+++ b/src/app/shared/uploaders/file-uploader/file-uploader.component.spec.ts
@@ -0,0 +1,50 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { of } from 'rxjs';
+
+import { FileUploaderComponent } from './file-uploader.component';
+import { APP_RUNTIME_CONFIG } from '../../../app.config';
+import { FileUploaderService } from '../../services/file-uploader.service';
+
+describe('FileUploaderComponent', () => {
+  let component: FileUploaderComponent;
+  let fixture: ComponentFixture<FileUploaderComponent>;
+  const appConfigMock = {
+    baseURLApi: 'http://localhost:8080',
+    isBackend: false,
+    auth: {
+      email: 'admin@flatlogic.com',
+      password: 'password',
+    },
+  };
+  const uploaderServiceMock = {
+    upload: jest.fn().mockReturnValue(of({})),
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FileUploaderComponent],
+      providers: [
+        {
+          provide: APP_RUNTIME_CONFIG,
+          useValue: appConfigMock,
+        },
+        {
+          provide: FileUploaderService,
+          useValue: uploaderServiceMock,
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileUploaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/uploaders/file-uploader/file-uploader.component.ts b/src/app/shared/uploaders/file-uploader/file-uploader.component.ts
new file mode 100644
index 0000000..bbfd914
--- /dev/null
+++ b/src/app/shared/uploaders/file-uploader/file-uploader.component.ts
@@ -0,0 +1,92 @@
+import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { FileUploaderService } from '../../services/file-uploader.service';
+import { APP_RUNTIME_CONFIG, AppRuntimeConfig } from '../../../app.config';
+import { v4 as uuidv4 } from 'uuid';
+import { MatButtonModule } from '@angular/material/button';
+import { take } from 'rxjs';
+
+type FileUploadDto = {
+  id: string;
+  name: string;
+  sizeInBytes: number;
+  privateUrl: string;
+  publicUrl: string;
+  new: boolean;
+};
+
+@Component({
+    selector: 'app-file-uploader',
+    templateUrl: './file-uploader.component.html',
+    styleUrls: ['./file-uploader.component.scss'],
+    standalone: true,
+    imports: [MatButtonModule]
+})
+export class FileUploaderComponent implements OnInit {
+  @Input() entityName: string;
+  @Input() propertyName: string;
+  @Output() fileUploaded = new EventEmitter<FileUploadDto>();
+
+  config: AppRuntimeConfig;
+  files: FileUploadDto[] = [];
+
+  constructor(
+    @Inject(APP_RUNTIME_CONFIG) appConfig: AppRuntimeConfig,
+    private fileUploaderService: FileUploaderService,
+  ) {
+    this.config = appConfig;
+  }
+
+  ngOnInit(): void {}
+
+  uploadFile(event: Event): void {
+    const config = this.config;
+    const formData = new FormData();
+    const input = event.target as HTMLInputElement | null;
+    const files = input?.files;
+    if (!files || !files.length) {
+      return;
+    }
+    const file = files[0];
+    const extension = this.extractExtensionFrom(file.name);
+    const id = uuidv4();
+    const privateUrl = `/${this.entityName}/file/${id}.${extension}`;
+    const publicUrl = `${config.baseURLApi}/api/file/download?privateUrl=${this.entityName}/${this.propertyName}/${id}.${extension}`;
+
+    formData.append('file', file);
+    formData.append('filename', `${id}.${extension}`);
+
+    const api = `/api/file/upload/${this.entityName}/${this.propertyName}`;
+    this.fileUploaderService.upload(formData, api).pipe(take(1)).subscribe(() => {
+      console.log('Image has been uploaded.');
+      this.emitChange(id, file, privateUrl, publicUrl);
+    });
+  }
+
+  deleteFile(_id: string) {}
+
+  private extractExtensionFrom(filename: string): string {
+    if (!filename) {
+      return '';
+    }
+    const regex = /(?:\.([^.]+))?$/;
+    return regex.exec(filename)?.[1] || '';
+  }
+
+  private emitChange(
+    id: string,
+    file: File,
+    privateUrl: string,
+    publicUrl: string,
+  ): void {
+    const fileDto: FileUploadDto = {
+      id,
+      name: file.name,
+      sizeInBytes: file.size,
+      privateUrl,
+      publicUrl,
+      new: true,
+    };
+    this.files.push(fileDto);
+    this.fileUploaded.emit(fileDto);
+  }
+}
diff --git a/src/app/shared/uploaders/image-uploader/image-uploader.component.html b/src/app/shared/uploaders/image-uploader/image-uploader.component.html
new file mode 100644
index 0000000..e2ca6c4
--- /dev/null
+++ b/src/app/shared/uploaders/image-uploader/image-uploader.component.html
@@ -0,0 +1,31 @@
+<form [formGroup]="uploadForm">
+  @for (image of imageList; track image) {
+    <div class="img-thumbnail-wrapper preview">
+      <img class="thumbnail" src="{{ image.publicUrl }}" />
+      <div class="img-buttons">
+        <button
+          (click)="onRemove(image.id)"
+          mat-stroked-button
+          class="button"
+          color="default"
+          type="button"
+          >
+          Remove
+        </button>
+      </div>
+    </div>
+  }
+
+  <div class="form-group">
+    <button (click)="fileInput.click()" mat-flat-button color="default">
+      Select image
+      <input
+        #fileInput
+        (change)="uploadFile($event)"
+        accept="image/*"
+        name="..."
+        type="file"
+        />
+    </button>
+  </div>
+</form>
diff --git a/src/app/shared/uploaders/image-uploader/image-uploader.component.scss b/src/app/shared/uploaders/image-uploader/image-uploader.component.scss
new file mode 100644
index 0000000..fa934c0
--- /dev/null
+++ b/src/app/shared/uploaders/image-uploader/image-uploader.component.scss
@@ -0,0 +1,59 @@
+input {
+  display: none;
+}
+
+div {
+  text-align: center;
+}
+
+img {
+  width: 150px;
+}
+
+.img-thumbnail-wrapper {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  margin: 7px;
+}
+
+.thumbnail {
+  object-fit: cover;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  border-radius: 5px;
+  background-color: #f9fbfd;
+  border: 1px solid #d6dee5;
+}
+
+.img-buttons {
+  display: none;
+  position: absolute;
+  bottom: 15px;
+  width: 100%;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.img-thumbnail-wrapper:hover .img-buttons {
+  display: block;
+}
+
+.img-buttons * {
+  color: #fff;
+  cursor: pointer;
+}
+
+.form-group {
+  margin-top: 5px;
+}
diff --git a/src/app/shared/uploaders/image-uploader/image-uploader.component.spec.ts b/src/app/shared/uploaders/image-uploader/image-uploader.component.spec.ts
new file mode 100644
index 0000000..aa8826f
--- /dev/null
+++ b/src/app/shared/uploaders/image-uploader/image-uploader.component.spec.ts
@@ -0,0 +1,50 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { of } from 'rxjs';
+
+import { ImageUploaderComponent } from './image-uploader.component';
+import { APP_RUNTIME_CONFIG } from '../../../app.config';
+import { ImageUploaderService } from '../../services/image-uploader.service';
+
+describe('ImageUploaderComponent', () => {
+  let component: ImageUploaderComponent;
+  let fixture: ComponentFixture<ImageUploaderComponent>;
+  const appConfigMock = {
+    baseURLApi: 'http://localhost:8080',
+    isBackend: false,
+    auth: {
+      email: 'admin@flatlogic.com',
+      password: 'password',
+    },
+  };
+  const uploaderServiceMock = {
+    upload: jest.fn().mockReturnValue(of({})),
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ImageUploaderComponent],
+      providers: [
+        {
+          provide: APP_RUNTIME_CONFIG,
+          useValue: appConfigMock,
+        },
+        {
+          provide: ImageUploaderService,
+          useValue: uploaderServiceMock,
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageUploaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/uploaders/image-uploader/image-uploader.component.ts b/src/app/shared/uploaders/image-uploader/image-uploader.component.ts
new file mode 100644
index 0000000..a251dde
--- /dev/null
+++ b/src/app/shared/uploaders/image-uploader/image-uploader.component.ts
@@ -0,0 +1,118 @@
+import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { APP_RUNTIME_CONFIG, AppRuntimeConfig } from '../../../app.config';
+import { v4 as uuidv4 } from 'uuid';
+import { ImageUploaderService } from '../../services/image-uploader.service';
+import { ImageInterface } from '../../models/image.interface';
+import { MatButtonModule } from '@angular/material/button';
+import { take } from 'rxjs';
+
+type ImageUploadControls = {
+  name: FormControl<string>;
+  file: FormControl<string>;
+  imgSrc: FormControl<string>;
+};
+
+@Component({
+    selector: 'app-image-uploader',
+    templateUrl: './image-uploader.component.html',
+    styleUrls: ['./image-uploader.component.scss'],
+    standalone: true,
+    imports: [ReactiveFormsModule, MatButtonModule]
+})
+export class ImageUploaderComponent implements OnInit {
+  @Input() entityName: string;
+  @Input() propertyName: string;
+  @Input() imageList: ImageInterface[];
+  @Output() imageUploaded = new EventEmitter<ImageInterface>();
+  @Output() imageDeleted = new EventEmitter<string>();
+
+  config: AppRuntimeConfig;
+  imgFile = '';
+
+  uploadForm = new FormGroup<ImageUploadControls>({
+    name: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+    file: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+    imgSrc: new FormControl('', { nonNullable: true, validators: [Validators.required] }),
+  });
+
+  constructor(
+    @Inject(APP_RUNTIME_CONFIG) appConfig: AppRuntimeConfig,
+    private imageUploaderService: ImageUploaderService,
+  ) {
+    this.config = appConfig;
+  }
+
+  ngOnInit(): void {}
+
+  uploadFile(event: Event): void {
+    const config = this.config;
+    const formData = new FormData();
+    const input = event.target as HTMLInputElement | null;
+    const files = input?.files;
+    if (!files || !files.length) {
+      return;
+    }
+    const file = files[0];
+    const extension = this.extractExtensionFrom(file.name);
+    const id = uuidv4();
+    const privateUrl = `/${this.entityName}/${this.propertyName}/${id}.${extension}`;
+    const publicUrl = `${config.baseURLApi}/api/file/download?privateUrl=${this.entityName}/${this.propertyName}/${id}.${extension}`;
+    formData.append('file', file);
+    formData.append('filename', `${id}.${extension}`);
+
+    const api = `/api/file/upload/${this.entityName}/${this.propertyName}`;
+    this.imageUploaderService.upload(formData, api).pipe(take(1)).subscribe(() => {
+      console.log('Image has been uploaded.');
+      this.showImage(event);
+      this.emitChange(id, file, privateUrl, publicUrl);
+    });
+  }
+
+  onRemove(id: string) {
+    this.imageDeleted.emit(id);
+  }
+
+  private showImage(event: Event): void {
+    const reader = new FileReader();
+    const input = event.target as HTMLInputElement | null;
+
+    if (input?.files && input.files.length) {
+      const [file] = input.files;
+      reader.readAsDataURL(file);
+
+      reader.onload = () => {
+        const fileSource = typeof reader.result === 'string' ? reader.result : '';
+        this.imgFile = fileSource;
+        this.uploadForm.patchValue({
+          imgSrc: fileSource,
+        });
+      };
+    }
+  }
+
+  private extractExtensionFrom(filename: string): string {
+    if (!filename) {
+      return '';
+    }
+    const regex = /(?:\.([^.]+))?$/;
+    return regex.exec(filename)?.[1] || '';
+  }
+
+  private emitChange(id: string, file: File, privateUrl: string, publicUrl: string): void {
+    const imageDto: ImageInterface = {
+      id,
+      name: file.name,
+      sizeInBytes: file.size,
+      privateUrl,
+      publicUrl,
+      new: true,
+    };
+    this.imageUploaded.emit(imageDto);
+  }
+}
diff --git a/src/app/styles/breadcrumb.scss b/src/app/styles/breadcrumb.scss
new file mode 100644
index 0000000..d5a8c6d
--- /dev/null
+++ b/src/app/styles/breadcrumb.scss
@@ -0,0 +1,28 @@
+@use "src/app/styles/variables" as *;
+
+$breadcrumb-title-color: $grey;
+$breadcrumb-active-title-color: $blue;
+
+@mixin breadcrumb {
+  .breadcrumb-list {
+    .breadcrumb-list-item {
+      color: $breadcrumb-title-color;
+    }
+
+    .breadcrumb-list-item.active {
+      color: $breadcrumb-active-title-color;
+    }
+  }
+}
+
+@mixin breadcrumb-dark {
+  .breadcrumb-list {
+    .breadcrumb-list-item {
+      color: $white;
+    }
+
+    .breadcrumb-list-item.active {
+      color: $breadcrumb-active-title-color;
+    }
+  }
+}
diff --git a/src/app/styles/calendar.scss b/src/app/styles/calendar.scss
new file mode 100644
index 0000000..433236d
--- /dev/null
+++ b/src/app/styles/calendar.scss
@@ -0,0 +1,103 @@
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/font" as *;
+
+@mixin calendar {
+  .cal-month-view {
+    background: transparent;
+  }
+
+  mwl-calendar-month-view .cal-month-view .cal-cell-row, mwl-calendar-month-view .cal-month-view .cal-cell-row mwl-calendar-month-cell, mwl-calendar-month-view .cal-month-view .cal-cell-row mwl-calendar-month-cell .cal-cell-top {
+    min-height: 17px;
+  }
+
+  span.cal-day-number {
+    margin: 0 !important;
+    font-family: Fira Sans, sans-serif !important;
+    font-weight: $fw-normal !important;
+    font-size: 12px !important;
+    line-height: 14px !important;
+    text-align: center !important;
+    opacity: 1 !important;
+    cursor: pointer;
+  }
+
+  .cal-month-view .cal-day-cell.cal-weekend .cal-day-number {
+    color: $dark-grey;
+  }
+
+  .cal-month-view .cal-days .cal-cell-row {
+    border: none;
+    align-items: flex-end;
+    justify-content: space-between;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .cal-month-view .cal-day-cell:not(:last-child) {
+    border: none;
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  div.cal-cell-row.cal-header {
+    color: $white-gray;
+    margin-bottom: -10px;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .cal-month-view .cal-cell-row .cal-cell:hover, .cal-month-view .cal-cell.cal-has-events.cal-open {
+    background-color: #8B9BFF;
+  }
+
+  .cal-month-view .cal-day-cell {
+    border: none;
+    display: flex;
+    align-items: center;
+    flex-direction: column-reverse;
+    margin-bottom: 12px;
+  }
+
+  .cal-month-view .cal-days {
+    border: none;
+  }
+
+  .cal-month-view .cal-day-cell.cal-today {
+    background-color: #8B9BFF;
+    border-radius: 50%;
+    color: $white;
+    min-width: 20px;
+    min-height: 20px;
+    max-width: 20px;
+    max-height: 20px;
+  }
+
+  div.cal-cell-top {
+    display: flex;
+    align-items: center;
+  }
+
+  span.cal-day-badge {
+    display: none !important;
+  }
+
+  .cal-month-view div.cal-event {
+    width: 4px;
+    height: 4px;
+    margin: 0;
+  }
+
+  .cal-month-view .cal-cell {
+    flex: 0;
+  }
+}
+
+@mixin calendar-dark {
+  .cal-month-view .cal-day-cell.cal-weekend .cal-day-number {
+    color: $white;
+  }
+}
diff --git a/src/app/styles/colors.scss b/src/app/styles/colors.scss
new file mode 100644
index 0000000..9388735
--- /dev/null
+++ b/src/app/styles/colors.scss
@@ -0,0 +1,50 @@
+$yellow: #ffc260;
+$blue: #536DFE;
+$light-blue: #798DFE;
+$white-blue: #B1BCFF;
+$blue-white: #F3F5FF;
+$pink: #ff4081;
+$dark-pink: #ff0f60;
+$green: #31C2A0;
+$violet: #9013FE;
+$white: white;
+$dark-grey: #4A4A4A;
+$light-grey: #B9B9B9;
+$grey: #6E6E6E;
+$sky: #c0caff;
+$default: #E0E0E0;
+
+
+$white-35: rgba(255, 255, 255, 0.35);
+$white-50: rgba(255, 255, 255, 0.5);
+$white-70: rgba(255, 255, 255, 0.7);
+$white-80: #FFFFFF80;
+
+$white-gray: rgba(224, 224, 224, 0.5);
+
+$gray-08: rgba(110, 110, 110, 0.8);
+$gray-80: #D8D8D880;
+$gray-06: rgba(110, 110, 110, 0.6);
+$gray-70: rgba(155, 155, 155, 0.7);
+
+$black-08: rgba(0, 0, 0, 0.08);
+$black-04: rgba(0, 0, 0, 0.04);
+$black-12: rgba(0, 0, 0, 0.12);
+
+$pink-15: rgba(255, 92, 147, 0.15);
+$blue-15: rgba(83, 109, 254, 0.15);
+$green-15: rgba(60, 212, 160, 0.15);
+$yellow-15: rgba(255, 194, 96, 0.15);
+$violet-15: rgba(144, 19, 254, 0.15);
+
+$pink-20: rgba(255, 92, 147, 0.2);
+$blue-20: rgba(83, 109, 254, 0.2);
+$green-20: rgba(60, 212, 160, 0.2);
+$yellow-20: rgba(255, 194, 96, 0.25);
+$violet-20: rgba(144, 19, 254, 0.2);
+
+$shadow-white: #E8EAFC;
+$shadow-grey: #B2B2B21A;
+$shadow-dark-grey: #9A9A9A1A;
+
+$background-color: #F6F7FF;
diff --git a/src/app/styles/font.scss b/src/app/styles/font.scss
new file mode 100644
index 0000000..d25e8a6
--- /dev/null
+++ b/src/app/styles/font.scss
@@ -0,0 +1,15 @@
+$fw-lighter: 400;
+$fw-normal: 500;
+$fw-bold: 600;
+$fw-extra-bold: 700;
+
+
+$fs-xs: 11.2px;
+$fs-small: 14px;
+$fs-normal: 16px;
+$fs-regular: 18px;
+$fs-medium: 21px;
+$fs-large: 24px;
+$fs-xl: 28px;
+$fs-xxl: 38px;
+$fs-xxxl: 42px;
diff --git a/src/app/styles/footer.scss b/src/app/styles/footer.scss
new file mode 100644
index 0000000..e0d2258
--- /dev/null
+++ b/src/app/styles/footer.scss
@@ -0,0 +1,22 @@
+@use "src/app/styles/variables" as *;
+
+@mixin footer($color) {
+  .footer {
+    &__link-item {
+      color: $color;
+    }
+
+    .mat-mdc-mini-fab.mat-accent {
+      background-color: transparent;
+      box-shadow: none;
+
+      &:hover {
+        background-color: $header-button-background-color-hover;
+      }
+
+      &:not([class*=mat-elevation-z]) {
+        box-shadow: inherit;
+      }
+    }
+  }
+}
diff --git a/src/app/styles/full-calendar.scss b/src/app/styles/full-calendar.scss
new file mode 100644
index 0000000..b886801
--- /dev/null
+++ b/src/app/styles/full-calendar.scss
@@ -0,0 +1,13 @@
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/font" as *;
+
+@mixin full-calendar {
+  td.fc-day.fc-today {
+    background-color: $blue;
+    opacity: 0.2;
+  }
+
+  th.fc-day-header.fc-widget-header {
+    font-weight: $fw-normal;
+  }
+}
diff --git a/src/app/styles/header.scss b/src/app/styles/header.scss
new file mode 100644
index 0000000..159c361
--- /dev/null
+++ b/src/app/styles/header.scss
@@ -0,0 +1,58 @@
+@use "src/app/styles/variables" as *;
+
+//== Header
+
+$header-height: 64px;
+$header-button-background-color: transparent;
+$header-button-background-color-hover: $black-08;
+$header-button-font-color: $white;
+$header-button-box-shadow: none;
+$header-title-font-color: $white;
+
+$header-background-dark-theme: #31313C;
+$header-title-color-dark-theme: #889AFF;
+
+
+@mixin header() {
+  .header {
+    .mat-mdc-mini-fab {
+      background-color: $header-button-background-color;
+      box-shadow: $header-button-box-shadow;
+
+      &:hover {
+        background-color: $header-button-background-color-hover;
+      }
+
+      &:not([class*=mat-elevation-z]) {
+        box-shadow: inherit;
+      }
+    }
+  }
+}
+
+@mixin header-dark() {
+  .mat-toolbar.mat-primary.header {
+    background-color: $header-background-dark-theme;
+
+    .mat-mdc-mini-fab {
+      background-color: $header-button-background-color;
+      box-shadow: $header-button-box-shadow;
+
+      .header__title-button-icon {
+        color: $header-title-color-dark-theme;
+      }
+
+      &:hover {
+        background-color: $header-button-background-color-hover;
+      }
+
+      &:not([class*=mat-elevation-z]) {
+        box-shadow: inherit;
+      }
+    }
+
+    .header__title-text {
+      color: $header-title-color-dark-theme;
+    }
+  }
+}
diff --git a/src/app/styles/mat-badge.scss b/src/app/styles/mat-badge.scss
new file mode 100644
index 0000000..c2bb4f4
--- /dev/null
+++ b/src/app/styles/mat-badge.scss
@@ -0,0 +1,21 @@
+@mixin mat-badge() {
+  .badge-card .text .mat-badge-content {
+    width: max-content !important;
+    min-width: 16px !important;
+    max-width: none !important;
+    height: auto !important;
+    min-height: 16px !important;
+    line-height: 16px !important;
+    padding: 4px 8px !important;
+    border-radius: 999px !important;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+    white-space: nowrap !important;
+    overflow: visible !important;
+    text-overflow: clip !important;
+    transform: none !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+}
diff --git a/src/app/styles/mat-button-toggle.scss b/src/app/styles/mat-button-toggle.scss
new file mode 100644
index 0000000..2251f2f
--- /dev/null
+++ b/src/app/styles/mat-button-toggle.scss
@@ -0,0 +1,8 @@
+@use "src/app/styles/variables" as *;
+
+@mixin mat-toggle() {
+  /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+  .mat-button-toggle-checked.mat-button-toggle-appearance-standard {
+    color: $white;
+  }
+}
diff --git a/src/app/styles/mat-button.scss b/src/app/styles/mat-button.scss
new file mode 100644
index 0000000..7a5cc3c
--- /dev/null
+++ b/src/app/styles/mat-button.scss
@@ -0,0 +1,36 @@
+@use "src/app/styles/variables" as *;
+
+$raised-button-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+
+@mixin mat-button() {
+  .mat-mdc-unelevated-button,
+  .mat-mdc-raised-button,
+  .mat-mdc-fab,
+  .mat-mdc-mini-fab {
+    color: $dark-grey;
+    letter-spacing: 0.02857em;
+    text-transform: uppercase;
+    box-shadow: none;
+  }
+
+  .mat-mdc-unelevated-button:not(.mat-primary):not(.mat-accent):not(.mat-warn):not(.mat-success):not(.mat-info),
+  .mat-mdc-raised-button:not(.mat-primary):not(.mat-accent):not(.mat-warn):not(.mat-success):not(.mat-info),
+  .mat-mdc-fab:not(.mat-primary):not(.mat-accent):not(.mat-warn):not(.mat-success):not(.mat-info),
+  .mat-mdc-mini-fab:not(.mat-primary):not(.mat-accent):not(.mat-warn):not(.mat-success):not(.mat-info) {
+    background-color: $default;
+  }
+
+  .mat-mdc-mini-fab:not([class*=mat-elevation-z]) {
+    box-shadow: none;
+  }
+
+  .mat-mdc-raised-button:not([class*=mat-elevation-z]) {
+    box-shadow: $raised-button-shadow;
+  }
+}
+
+@mixin mat-button-dark() {
+  .mat-mdc-raised-button:not([class*=mat-elevation-z]) {
+    box-shadow: none;
+  }
+}
diff --git a/src/app/styles/mat-card.scss b/src/app/styles/mat-card.scss
new file mode 100644
index 0000000..eb32a60
--- /dev/null
+++ b/src/app/styles/mat-card.scss
@@ -0,0 +1,71 @@
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/font" as *;
+
+$card-font-color: $dark-grey;
+$card-title-font-color: $grey;
+$card-padding: 24px;
+$card-title-font-size: $fs-medium;
+$card-title-font-weight: $fw-lighter;
+$card-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;
+
+$card-background-dark-theme: #23232D;
+
+@mixin mat-card() {
+  .mat-mdc-card {
+    color: $card-font-color;
+    margin: 0;
+    box-shadow: $card-shadow;
+    padding: $card-padding;
+
+    &:not([class*=mat-elevation-z]) {
+      box-shadow: $card-shadow;
+    }
+
+    .mat-mdc-card-title {
+      &>p {
+        font-size: $card-title-font-size;
+        font-weight: $card-title-font-weight;
+        color: $card-title-font-color;
+      }
+    }
+  }
+}
+
+@mixin mat-card-dark() {
+  .mat-mdc-card {
+    color: $white;
+    background-color: $card-background-dark-theme;
+
+    & p {
+      color: $white;
+    }
+
+    &:not([class*=mat-elevation-z]) {
+      box-shadow: none;
+    }
+
+    .mat-mdc-card-title {
+      & p {
+        color: $white;
+      }
+    }
+
+    .mat-mdc-card-subtitle {
+      & p {
+        color: #D6D6D6;
+      }
+    }
+
+    .mat-mdc-card-content {
+      & p {
+        color: #D6D6D6;
+      }
+    }
+
+    .mat-mdc-card-footer {
+      & p {
+        color: #D6D6D6;
+      }
+    }
+  }
+}
diff --git a/src/app/styles/mat-carousel.scss b/src/app/styles/mat-carousel.scss
new file mode 100644
index 0000000..8230328
--- /dev/null
+++ b/src/app/styles/mat-carousel.scss
@@ -0,0 +1,11 @@
+@mixin mat-carousel() {
+  .small-carousel-card, .big-carousel-card {
+    mat-icon {
+      color: white;
+    }
+
+    button.mat-focus-indicator.mat-mdc-mini-fab.mat-mdc-button-base.mat-accent.ng-star-inserted {
+      background-color: white;
+    }
+  }
+}
diff --git a/src/app/styles/mat-expansion-panel.scss b/src/app/styles/mat-expansion-panel.scss
new file mode 100644
index 0000000..43a205b
--- /dev/null
+++ b/src/app/styles/mat-expansion-panel.scss
@@ -0,0 +1,17 @@
+@use "src/app/styles/variables" as *;
+
+@mixin mat-expansion-panel {
+  .mat-expansion-indicator::after {
+    color: $white;
+  }
+}
+
+@mixin mat-expansion-panel-dark {
+  mat-expansion-panel.mat-expansion-panel:not([class*=mat-elevation-z]) {
+    box-shadow: none;
+  }
+
+  .mat-expansion-indicator::after {
+    color: $white;
+  }
+}
diff --git a/src/app/styles/mat-form-field.scss b/src/app/styles/mat-form-field.scss
new file mode 100644
index 0000000..d9e63de
--- /dev/null
+++ b/src/app/styles/mat-form-field.scss
@@ -0,0 +1,32 @@
+@use "src/app/styles/variables" as *;
+
+@mixin mat-form-field {
+  .add-section-menu {
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+    & .mat-form-field-label {
+      color: $white;
+    }
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+    & .mat-form-field-underline {
+      background-color: $white;
+    }
+  }
+}
+
+@mixin mat-form-field-dark-theme {
+  & .mat-mdc-form-field-hint, .mat-form-field-appearance-legacy .mat-hint {
+    color: $white-70;
+  }
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  & .mat-form-field-appearance-legacy .mat-form-field-underline, .mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
+    background-color: $white-70;
+  }
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  & .mat-form-field-appearance-fill .mat-form-field-underline::before {
+    background-color: $white-70;
+  }
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  & .mat-form-field-appearance-legacy .mat-form-field-label {
+    color: $white;
+  }
+}
diff --git a/src/app/styles/mat-paginator.scss b/src/app/styles/mat-paginator.scss
new file mode 100644
index 0000000..fa62d98
--- /dev/null
+++ b/src/app/styles/mat-paginator.scss
@@ -0,0 +1,22 @@
+@use "src/app/styles/variables" as *;
+
+@mixin mat-paginator() {
+  .mat-mdc-paginator {
+    background: transparent;
+
+    & .mat-mdc-select {
+      border: none;
+    }
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+    & .mat-form-field-underline {
+      display: none;
+    }
+  }
+}
+
+@mixin mat-paginator-dark() {
+  .mat-mdc-paginator {
+    background: transparent;
+    color: $white;
+  }
+}
diff --git a/src/app/styles/mat-select.scss b/src/app/styles/mat-select.scss
new file mode 100644
index 0000000..6fd2683
--- /dev/null
+++ b/src/app/styles/mat-select.scss
@@ -0,0 +1,47 @@
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/font" as *;
+
+@mixin mat-select {
+  .mat-mdc-select {
+    .mat-mdc-select-arrow-wrapper {
+      margin-left: 8px;
+    }
+  }
+
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+  & .mat-select-value {
+    max-width: max-content;
+    overflow: unset;
+  }
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+  & .mat-select-value-text {
+    font-size: $fs-normal;
+    font-weight: $fw-lighter;
+    color: $dark-grey;
+  }
+}
+
+@mixin mat-select-dark {
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  .mat-form-field-appearance-outline .mat-form-field-outline {
+    color: $white;
+
+  }
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+  .mat-select-arrow {
+    color: #D6D6D6;
+  }
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+  .mat-form-field-label {
+    color: $white;
+  }
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+  /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+  .mat-select-trigger {
+    width: 100%;
+    /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+    & .mat-select-value-text {
+      color: $white;
+    }
+  }
+}
diff --git a/src/app/styles/mat-spinner.scss b/src/app/styles/mat-spinner.scss
new file mode 100644
index 0000000..5395efc
--- /dev/null
+++ b/src/app/styles/mat-spinner.scss
@@ -0,0 +1,5 @@
+@mixin mat-spinner {
+  mat-spinner.mat-mdc-progress-spinner.mat-progress-spinner-indeterminate-animation[mode=indeterminate] circle {
+    animation-duration: 13000ms;
+  }
+}
diff --git a/src/app/styles/mat-tab.scss b/src/app/styles/mat-tab.scss
new file mode 100644
index 0000000..c517e06
--- /dev/null
+++ b/src/app/styles/mat-tab.scss
@@ -0,0 +1,82 @@
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/font" as *;
+
+//@mixin mat-tab-dark() {
+//  .mat-tab-label {
+//    color: $white;
+//  }
+//}
+
+@mixin mat-tab-color-label($color) {
+  .nav-items-group {
+    /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+    .mat-tab-label-active {
+      color: $color;
+    }
+  }
+}
+
+@mixin mat-tab-label-active-color($color) {
+  .icons-wrapper, .tabs-content-wrapper {
+    /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+    & .mat-tab-label-active {
+      & .tab-label, .mat-icon {
+        color: $color;
+      }
+    }
+  }
+}
+
+@mixin mat-tab-without-border() {
+  .dashboard-mat-tab, .nav-items-group {
+    .mat-mdc-tab-header {
+      border: none;
+    }
+  }
+}
+
+@mixin mat-tab-label {
+  /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+  div.mat-tab-label {
+    padding: 0;
+    min-width: 85px;
+    color: $dark-grey;
+    font-weight: $fw-lighter;
+
+    @media (max-width: $small) {
+      min-width: 75px;
+    }
+  }
+
+  .dashboard-mat-tab {
+    /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+    div.mat-tab-label {
+      @media (max-width: $small) {
+        min-width: 25%;
+      }
+    }
+  }
+
+  .edit-nav-card {
+    /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+    div.mat-tab-label {
+      padding: 0 8px;
+      min-width: 85px;
+      font-weight: $fw-lighter;
+
+      @media (max-width: $small) {
+        min-width: 55px;
+      }
+    }
+  }
+}
+
+@mixin mat-tab-label-dark {
+  /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+  div.mat-tab-label {
+    padding: 0;
+    min-width: 85px;
+    color: $white;
+    font-weight: $fw-lighter;
+  }
+}
diff --git a/src/app/styles/mat-table.scss b/src/app/styles/mat-table.scss
new file mode 100644
index 0000000..30c00a2
--- /dev/null
+++ b/src/app/styles/mat-table.scss
@@ -0,0 +1,41 @@
+@use "src/app/styles/variables" as *;
+
+@mixin mat-table() {
+  .mat-mdc-table {
+    background: transparent;
+
+    tr {
+      &:hover {
+        background-color: $black-04;
+      }
+
+      &:last-child {
+        & td {
+          border: none;
+        }
+      }
+    }
+  }
+}
+
+@mixin mat-table-dark() {
+  .mat-mdc-table {
+    background: transparent;
+
+    th {
+      color: #D6D6D6;
+
+      &.mat-mdc-header-cell {
+        border-color: $white-70;
+      }
+    }
+
+    td {
+      color: $white;
+
+      &.mat-mdc-cell {
+        border-color: $white-70;
+      }
+    }
+  }
+}
diff --git a/src/app/styles/mat-toolbar.scss b/src/app/styles/mat-toolbar.scss
new file mode 100644
index 0000000..933cb0f
--- /dev/null
+++ b/src/app/styles/mat-toolbar.scss
@@ -0,0 +1,8 @@
+@use "src/app/styles/variables" as *;
+
+@mixin mat-toolbar() {
+  .mat-toolbar:not(.mat-primary):not(.mat-accent):not(.mat-warn) {
+    background-color: transparent;
+    color: $grey;
+  }
+}
diff --git a/src/app/styles/mat-tooltip.scss b/src/app/styles/mat-tooltip.scss
new file mode 100644
index 0000000..16d3668
--- /dev/null
+++ b/src/app/styles/mat-tooltip.scss
@@ -0,0 +1,5 @@
+@mixin mat-tooltip() {
+  .mat-mdc-tooltip {
+    padding: 3px 8px;
+  }
+}
diff --git a/src/app/styles/mixins.scss b/src/app/styles/mixins.scss
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/app/styles/mixins.scss
@@ -0,0 +1 @@
+
diff --git a/src/app/styles/notification.scss b/src/app/styles/notification.scss
new file mode 100644
index 0000000..b299a31
--- /dev/null
+++ b/src/app/styles/notification.scss
@@ -0,0 +1,28 @@
+@use "src/app/styles/variables" as *;
+
+@mixin notification {
+  .toast-top-center {
+    top: 76px;
+  }
+
+  .toast-top-left {
+    top: 76px;
+  }
+
+  .toast-top-right {
+    top: 76px;
+  }
+
+  .toast-bottom-center {
+    bottom: 12px;
+  }
+
+  .toast-container .ngx-toastr {
+    border-radius: 45px;
+    box-shadow: none;
+  }
+
+  .toast-container .ngx-toastr:hover {
+    box-shadow: 0 0 12px $light-grey;
+  }
+}
diff --git a/src/app/styles/palettes.scss b/src/app/styles/palettes.scss
new file mode 100644
index 0000000..8a94ad0
--- /dev/null
+++ b/src/app/styles/palettes.scss
@@ -0,0 +1,198 @@
+@use "src/app/styles/variables" as *;
+
+$dark-primary-text: rgba(black, 0.87);
+$light-primary-text: white;
+
+$ama-yellow: (
+  50: $yellow,
+  100: #ECECEC,
+  200: $yellow,
+  300: $yellow,
+  400: $yellow,
+  500: $yellow,
+  600: $yellow,
+  700: $yellow,
+  800: $yellow,
+  900: $yellow,
+  A100: $yellow,
+  A200: $yellow,
+  A400: $yellow,
+  A700: $yellow,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text,
+  )
+);
+
+$ama-pink: (
+  50: $pink,
+  100: #ECECEC,
+  200: $pink,
+  300: $pink,
+  400: $pink,
+  500: $pink,
+  600: $pink,
+  700: $pink,
+  800: $pink,
+  900: $pink,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text,
+  )
+);
+
+$ama-blue: (
+  50: $blue,
+  100: #ECECEC,
+  200: $blue,
+  300: $blue,
+  400: $blue,
+  500: $blue,
+  600: $blue,
+  700: $blue,
+  800: $blue,
+  900: $blue,
+  A100: $blue,
+  A200: $blue,
+  A400: $blue,
+  A700: $blue,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text,
+  )
+);
+
+$ama-light-blue: (
+  50: $light-blue,
+  100: #ECECEC,
+  200: $light-blue,
+  300: $light-blue,
+  400: $light-blue,
+  500: $light-blue,
+  600: $light-blue,
+  700: $light-blue,
+  800: $light-blue,
+  900: $light-blue,
+  A100: $light-blue,
+  A200: $light-blue,
+  A400: $light-blue,
+  A700: $light-blue,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text,
+  )
+);
+
+$ama-green: (
+  50: $green,
+  100: $green,
+  200: $green,
+  300: $green,
+  400: $green,
+  500: $green,
+  600: $green,
+  700: $green,
+  800: $green,
+  900: $green,
+  A100: $green,
+  A200: $green,
+  A400: $green,
+  A700: $green,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text,
+  )
+);
+
+$ama-violet: (
+  50: $violet,
+  100: $violet,
+  200: $violet,
+  300: $violet,
+  400: $violet,
+  500: $violet,
+  600: $violet,
+  700: $violet,
+  800: $violet,
+  900: $violet,
+  A100: $violet,
+  A200: $violet,
+  A400: $violet,
+  A700: $violet,
+  contrast: (
+    50: $dark-primary-text,
+    100: $dark-primary-text,
+    200: $dark-primary-text,
+    300: $dark-primary-text,
+    400: $dark-primary-text,
+    500: $light-primary-text,
+    600: $light-primary-text,
+    700: $light-primary-text,
+    800: $light-primary-text,
+    900: $light-primary-text,
+    A100: $dark-primary-text,
+    A200: $dark-primary-text,
+    A400: $light-primary-text,
+    A700: $light-primary-text,
+  )
+);
diff --git a/src/app/styles/scrollbar.scss b/src/app/styles/scrollbar.scss
new file mode 100644
index 0000000..d9329ee
--- /dev/null
+++ b/src/app/styles/scrollbar.scss
@@ -0,0 +1,33 @@
+@use "src/app/styles/variables" as *;
+
+//== Scroll bar
+
+$scrollbar-track-color: $light-grey;
+$scrollbar-track-piece-color: $white;
+$scrollbar-thumb-color: $light-grey;
+$scrollbar-corner-color: $light-grey;
+
+$scrollbar-track-dark-color: #23232D;
+$scrollbar-track-piece-dark-color: #13131A;
+$scrollbar-thumb-dark-color: #23232D;
+$scrollbar-corner-dark-color: #23232D;
+
+@mixin scrollbar() {
+  ::-webkit-scrollbar { width: 6px; height: 3px;}
+  ::-webkit-scrollbar-button { display: none }
+  ::-webkit-scrollbar-track {  background-color: $scrollbar-track-color;}
+  ::-webkit-scrollbar-track-piece { background-color: $scrollbar-track-piece-color;}
+  ::-webkit-scrollbar-thumb { height: 50px; background-color: $light-grey; border-radius: 36px;}
+  ::-webkit-scrollbar-corner { background-color: $scrollbar-corner-color;}
+  ::-webkit-resizer { background-color: $dark-grey;}
+}
+
+@mixin scrollbar-dark() {
+  ::-webkit-scrollbar { width: 6px; height: 3px;}
+  ::-webkit-scrollbar-button { display: none }
+  ::-webkit-scrollbar-track {  background-color: $scrollbar-track-dark-color;}
+  ::-webkit-scrollbar-track-piece { background-color: $scrollbar-track-piece-dark-color;}
+  ::-webkit-scrollbar-thumb { height: 50px; background-color: $scrollbar-thumb-dark-color; border-radius: 36px;}
+  ::-webkit-scrollbar-corner { background-color: $scrollbar-corner-dark-color;}
+  ::-webkit-resizer { background-color: $dark-grey;}
+}
diff --git a/src/app/styles/settings.scss b/src/app/styles/settings.scss
new file mode 100644
index 0000000..82f459f
--- /dev/null
+++ b/src/app/styles/settings.scss
@@ -0,0 +1,13 @@
+@use "src/app/styles/variables" as *;
+
+$background-color: $blue;
+
+@function changeColor($color) {
+  @return $color;
+}
+
+@mixin settings($color) {
+  div.settings-wrapper {
+    background-color: $color;
+  }
+}
diff --git a/src/app/styles/sidebar.scss b/src/app/styles/sidebar.scss
new file mode 100644
index 0000000..49af149
--- /dev/null
+++ b/src/app/styles/sidebar.scss
@@ -0,0 +1,168 @@
+@use "src/app/styles/colors" as *;
+
+//== Sidebar
+
+$sidebar-font-color: $gray-08;
+$sidebar-font-color-active: $dark-grey;
+$sidebar-background-color-active: $blue-white;
+$sidebar-background-color-hover: $blue-white;
+$sidebar-icon-color: $gray-06;
+$sidebar-title-color: $sidebar-font-color;
+$sidebar-circle-color: $light-grey;
+
+$sidebar-background-dark-theme: #23232D;
+$sidebar-background-hover-dark-theme: #13131A;
+$sidebar-background-active-dark-theme: #13131A;
+$sidebar-color-active-dark-theme: #D6D6D6;
+
+@mixin sidebar($color) {
+  $sidebar-icon-color-active: $color;
+
+  .sidebar.mat-mdc-list-base {
+    & .mat-mdc-list-item, .mat-mdc-menu-trigger {
+      color: $sidebar-title-color;
+      --mat-list-list-item-label-text-color: #{$sidebar-title-color};
+      --mat-list-list-item-hover-label-text-color: #{$sidebar-title-color};
+      --mat-list-list-item-focus-label-text-color: #{$sidebar-title-color};
+
+      &.active {
+        background-color: $sidebar-background-color-active;
+        color: $sidebar-font-color-active;
+        --mat-list-list-item-label-text-color: #{$sidebar-font-color-active};
+        --mat-list-list-item-hover-label-text-color: #{$sidebar-font-color-active};
+        --mat-list-list-item-focus-label-text-color: #{$sidebar-font-color-active};
+
+        & .mat-icon {
+          color: $sidebar-icon-color-active;
+        }
+      }
+
+      &:hover {
+        background-color: $sidebar-background-color-hover;
+      }
+    }
+
+    & .sidebar-top-item {
+      & p {
+        color: $sidebar-font-color;
+      }
+
+      &.active {
+        background-color: $sidebar-background-color-active;
+
+        & p {
+          color: $sidebar-font-color-active;
+        }
+
+        & mat-icon {
+          color: $sidebar-icon-color-active;
+        }
+      }
+
+      &:hover {
+        background-color: $sidebar-background-color-hover;
+      }
+    }
+  }
+
+  .mat-tree-node {
+    & p {
+      color: $sidebar-font-color;
+    }
+
+    &.active {
+      background-color: $sidebar-background-color-active;
+
+      & p {
+        color: $sidebar-font-color-active;
+      }
+
+      & div.circle{
+        background-color: $sidebar-icon-color-active;
+      }
+    }
+
+    &[aria-expanded="true"] {
+      & .mat-tree-item {
+        & mat-icon:first-child {
+          color: $sidebar-icon-color-active;
+        }
+
+        & p {
+          color: $sidebar-font-color-active;
+        }
+      }
+    }
+  }
+}
+
+@mixin sidebar-dark() {
+  .mat-tree {
+    background-color: $sidebar-background-dark-theme;
+
+    .mat-tree-item, .mat-tree-node {
+      & p {
+        color: $sidebar-color-active-dark-theme;
+      }
+
+      &.active {
+        background-color: $sidebar-background-active-dark-theme;
+      }
+
+      &:hover {
+        background-color: $sidebar-background-hover-dark-theme;
+      }
+
+      &[aria-expanded="true"] {
+        & .mat-tree-item {
+          & p {
+            color: $sidebar-color-active-dark-theme;
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar.mat-mdc-list-base {
+    & .mat-mdc-list-item, .mat-mdc-menu-trigger {
+      color: $sidebar-color-active-dark-theme;
+      --mat-list-list-item-label-text-color: #{$sidebar-color-active-dark-theme};
+      --mat-list-list-item-hover-label-text-color: #{$sidebar-color-active-dark-theme};
+      --mat-list-list-item-focus-label-text-color: #{$sidebar-color-active-dark-theme};
+
+      &.active {
+        color: $sidebar-color-active-dark-theme;
+        background-color: $sidebar-background-active-dark-theme;
+        --mat-list-list-item-label-text-color: #{$sidebar-color-active-dark-theme};
+        --mat-list-list-item-hover-label-text-color: #{$sidebar-color-active-dark-theme};
+        --mat-list-list-item-focus-label-text-color: #{$sidebar-color-active-dark-theme};
+      }
+
+      &:hover {
+        background-color: $sidebar-background-hover-dark-theme;
+      }
+    }
+
+    & .sidebar-top-item {
+      & p {
+        color: $sidebar-color-active-dark-theme;
+      }
+
+      &.active {
+        background-color: $sidebar-background-active-dark-theme;
+
+        & p {
+          color: $sidebar-color-active-dark-theme;
+        }
+      }
+
+      &:hover {
+        background-color: $sidebar-background-hover-dark-theme;
+      }
+    }
+  }
+
+  .mat-drawer {
+    background-color: $sidebar-background-dark-theme;
+  }
+}
diff --git a/src/app/styles/themes.scss b/src/app/styles/themes.scss
new file mode 100644
index 0000000..9c84f55
--- /dev/null
+++ b/src/app/styles/themes.scss
@@ -0,0 +1,254 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+@use "src/app/styles/variables" as *;
+@use "palettes" as *;
+@use "header" as *;
+@use "mat-card" as *;
+@use "mat-paginator" as *;
+@use "mat-table" as *;
+@use "breadcrumb" as *;
+@use "mat-select" as *;
+@use "mat-tab" as *;
+@use "mat-toolbar" as *;
+@use "mat-button" as *;
+@use "mat-badge" as *;
+@use "mat-button-toggle" as *;
+@use "mat-expansion-panel" as *;
+@use "mat-spinner" as *;
+@use "mat-tooltip" as *;
+@use "mat-form-field" as *;
+@use "calendar" as *;
+@use "full-calendar" as *;
+@use "sidebar" as *;
+@use "footer" as *;
+@use "settings" as *;
+@use "scrollbar" as *;
+
+@function mat-palette(
+  $base-palette,
+  $default: 500,
+  $lighter: 100,
+  $darker: 700,
+  $text: $default
+) {
+  @return mat.m2-define-palette($base-palette, $default, $lighter, $darker, $text);
+}
+
+@function mat-light-theme($primary, $accent: null, $warn: null) {
+  @if $warn == null {
+    $warn: mat.m2-define-palette(mat.$m2-red-palette);
+  }
+
+  $theme: mat.m2-define-light-theme(
+    (
+      color: (
+        primary: $primary,
+        accent: $accent,
+        warn: $warn
+      )
+    )
+  );
+  $color-config: mat.m2-get-color-config($theme);
+
+  @if $color-config != null {
+    @return map.merge($theme, $color-config);
+  }
+
+  @return $theme;
+}
+
+@mixin angular-material-theme($theme) {
+  @include mat.all-component-themes($theme);
+}
+
+@function ama-light-theme($primary, $accent, $warn, $success, $info, $primary-light) {
+  @return map.merge(
+    mat-light-theme($primary, $accent, $warn),
+    (success: $success, info: $info, primary-light: $primary-light)
+  );
+}
+
+/***********************************/
+/**        BLUE THEME            **/
+/**********************************/
+
+$blue-theme-primary: mat-palette($ama-blue);
+$blue-theme-primary-light: mat-palette($ama-light-blue);
+$blue-theme-accent: mat-palette($ama-yellow);
+$blue-theme-warn: mat-palette($ama-pink);
+$blue-theme-success: mat-palette($ama-green);
+$blue-theme-info: mat-palette($ama-violet);
+
+$blue-theme: ama-light-theme(
+  $blue-theme-primary,
+  $blue-theme-accent,
+  $blue-theme-warn,
+  $blue-theme-success,
+  $blue-theme-info,
+  $blue-theme-primary-light
+);
+
+@mixin blueTheme() {
+  .blueTheme {
+    @include header();
+    @include mat-card();
+    @include mat-paginator();
+    @include mat-table();
+    @include mat-toolbar();
+    @include mat-button();
+    @include mat-toggle();
+    @include mat-spinner;
+    @include mat-tab-without-border();
+    @include mat-tab-color-label($blue);
+    @include mat-tab-label-active-color($blue);
+    @include mat-tooltip;
+    @include mat-expansion-panel;
+    @include breadcrumb();
+    @include mat-badge();
+    @include sidebar($blue);
+    @include footer($blue);
+    @include settings($blue);
+    @include mat-select;
+    @include mat-tab-label;
+  }
+}
+
+/***********************************/
+/**        PINK THEME            **/
+/**********************************/
+
+$pink-theme-primary: mat-palette($ama-pink);
+$pink-theme-primary-light: mat-palette($ama-light-blue);
+$pink-theme-accent: mat-palette($ama-yellow);
+$pink-theme-warn: mat-palette($ama-blue);
+$pink-theme-success: mat-palette($ama-green);
+$pink-theme-info: mat-palette($ama-violet);
+
+$pink-theme: ama-light-theme(
+  $pink-theme-primary,
+  $pink-theme-accent,
+  $pink-theme-warn,
+  $pink-theme-success,
+  $pink-theme-info,
+  $pink-theme-primary-light
+);
+
+@mixin pinkTheme() {
+  .pinkTheme {
+    @include angular-material-theme($pink-theme);
+
+    @include header();
+    @include mat-card();
+    @include mat-paginator();
+    @include mat-table();
+    @include mat-toggle();
+    @include mat-spinner;
+    @include mat-button();
+    @include mat-tooltip;
+    @include mat-expansion-panel;
+    @include mat-tab-without-border();
+    @include mat-tab-color-label($pink);
+    @include mat-tab-label-active-color($pink);
+    @include breadcrumb();
+    @include sidebar($pink);
+    @include mat-badge();
+    @include footer($pink);
+    @include settings($pink);
+    @include mat-select;
+    @include mat-tab-label;
+  }
+}
+
+/***********************************/
+/**       GREEN THEME            **/
+/**********************************/
+
+$green-theme-primary: mat-palette($ama-green);
+$green-theme-primary-light: mat-palette($ama-light-blue);
+$green-theme-accent: mat-palette($ama-yellow);
+$green-theme-warn: mat-palette($ama-pink);
+$green-theme-success: mat-palette($ama-blue);
+$green-theme-info: mat-palette($ama-violet);
+
+$green-theme: ama-light-theme(
+  $green-theme-primary,
+  $green-theme-accent,
+  $green-theme-warn,
+  $green-theme-success,
+  $green-theme-info,
+  $green-theme-primary-light
+);
+
+@mixin greenTheme() {
+  .greenTheme {
+    @include angular-material-theme($green-theme);
+
+    @include header();
+    @include mat-card();
+    @include mat-paginator();
+    @include mat-table();
+    @include mat-tab-without-border();
+    @include mat-toggle();
+    @include mat-spinner;
+    @include mat-tooltip;
+    @include mat-tab-label-active-color($green);
+    @include mat-expansion-panel;
+    @include mat-tab-color-label($green);
+    @include breadcrumb();
+    @include sidebar($green);
+    @include mat-badge();
+    @include mat-button();
+    @include footer($green);
+    @include settings($green);
+    @include mat-select;
+    @include mat-tab-label;
+  }
+}
+
+/***********************************/
+/**          DARK MODE           **/
+/**********************************/
+
+@mixin darkMode() {
+  .darkMode {
+    @include header-dark();
+    @include mat-card-dark();
+    @include sidebar-dark();
+    @include scrollbar-dark();
+    @include breadcrumb-dark();
+    @include mat-paginator-dark();
+    @include mat-table-dark();
+    @include mat-tab-without-border();
+    @include mat-toggle();
+    @include mat-tooltip;
+    @include mat-tab-label-active-color($white);
+    @include mat-badge();
+    @include mat-select-dark();
+    @include mat-form-field-dark-theme();
+    @include mat-expansion-panel-dark;
+    @include mat-select;
+    @include mat-tab-label-dark;
+    @include mat-button-dark;
+    @include calendar-dark;
+    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+    .mat-checkbox-frame {
+      border-color: $white;
+    }
+    /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+    .mat-radio-outer-circle {
+      border-color: $white;
+    }
+    /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+    .mat-mdc-radio-button.mat-radio-disabled .mat-radio-outer-circle {
+      border-color: $white-50;
+    }
+    /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+    .mat-mdc-radio-button.mat-radio-disabled .mat-radio-label-content {
+      color: $white-50;
+    }
+
+    .layout-content {
+      background-color: #13131A !important;
+    }
+  }
+}
diff --git a/src/app/styles/toasrt.scss b/src/app/styles/toasrt.scss
new file mode 100644
index 0000000..a08fefd
--- /dev/null
+++ b/src/app/styles/toasrt.scss
@@ -0,0 +1,46 @@
+@use "colors" as *;
+
+@mixin toastr-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+@mixin toastr($color) {
+  position: relative;
+  overflow: hidden;
+  margin: 16px 0 6px 0;
+  pointer-events: all;
+  cursor: pointer;
+  width: 257px;
+  color: $white;
+  display: flex;
+  align-items: center;
+  background-color: $color;
+  height: 45px;
+}
+
+@mixin toastr-wrapper-icon {
+  color:$white-80;
+  height: 45px;
+  width: 45px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin toastr-content {
+  display: flex;
+  align-items: center;
+}
+
+@mixin toastr-content-title {
+  margin: 0;
+}
+
+@mixin toastr-icon {
+  padding: 0;
+  width: auto;
+  height: auto;
+}
diff --git a/src/app/styles/typography.scss b/src/app/styles/typography.scss
new file mode 100644
index 0000000..0801030
--- /dev/null
+++ b/src/app/styles/typography.scss
@@ -0,0 +1,36 @@
+@mixin typography {
+  .mat-h1, .mat-headline-5, .mat-typography h1{
+    font-weight: 400;
+    font-size: 48px;
+  }
+
+  .mat-h2, .mat-headline-5, .mat-typography h2{
+    font-weight: 400;
+    font-size: 36px;
+  }
+
+  .mat-h3, .mat-headline-5, .mat-typography h3{
+    font-weight: 400;
+    font-size: 26px;
+  }
+
+  .mat-h4, .mat-headline-5, .mat-typography h4{
+    font-weight: 400;
+    font-size: 24px;
+  }
+
+  .mat-h5, .mat-headline-5, .mat-typography h5{
+    font-weight: 400;
+    font-size: 21px;
+  }
+
+  .mat-h6, .mat-headline-5, .mat-typography h6{
+    font-weight: 400;
+    font-size: 18px;
+  }
+
+  .mat-body p, .mat-body-2 p, .mat-typography p {
+    margin-bottom: 16px;
+    line-height: normal;
+  }
+}
diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss
new file mode 100644
index 0000000..46f0dba
--- /dev/null
+++ b/src/app/styles/variables.scss
@@ -0,0 +1,65 @@
+@forward "colors";
+@use "colors" as *;
+
+//== Viewports
+
+$extra-small: 576px;
+$small: 576px;
+$medium: 768px;
+$large: 992px;
+$normal: 1024px;
+$extra-large: 1200px;
+$xxl: 1440px;
+
+//== Material Toolbar
+
+$toolbar-title-font-color: $grey;
+$toolbar-button-font-color: $white;
+$toolbar-button-background-color: $pink;
+$toolbar-button-background-color-active: $dark-pink;
+$toolbar-padding: 8px 24px 6px 24px;
+
+//== Material Sidebar Content
+
+$sidebar-content-padding: 36px;
+$sidebar-content-mobile-padding: 16px;
+
+//== Material Tabs
+
+$tabs-header-font-color: $blue;
+$tabs-header-font-color-active: $blue;
+$tabs-ink-bar-color: $blue;
+
+
+//== Apex Chart X axis tooltip
+
+$chart-tooltip-background-color: $blue;
+$chart-tooltip-border-color: $blue;
+$chart-tooltip-font-color: $white;
+
+//== Header
+
+$header-height: 64px;
+
+$header-button-background-color: transparent;
+$header-button-background-color-hover: $black-08;
+$header-button-font-color: $white;
+$header-button-box-shadow: none;
+
+$header-title-font-color: $white;
+
+//== Footer
+
+$footer-height: 48px;
+$footer-link-color: $blue;
+$footer-icon-color: $gray-06;
+$footer-icon-background-color-hover: $black-08;
+
+//== Settings menu element
+
+$settings-button-background-color: $white;
+$settings-button-background-color-hover: $blue;
+$settings-button-color: $light-grey;
+$settings-button-color-hover: $white-35;
+$settings-menu-font-color: $dark-grey;
+$settings-menu-background-color-hover: $blue-white;
diff --git a/src/assets/angular-logo.png b/src/assets/angular-logo.png
new file mode 100644
index 0000000..9838bd7
Binary files /dev/null and b/src/assets/angular-logo.png differ
diff --git a/src/assets/auth/google.svg b/src/assets/auth/google.svg
new file mode 100644
index 0000000..c0f35d9
--- /dev/null
+++ b/src/assets/auth/google.svg
@@ -0,0 +1,9 @@
+<svg id="Capa_1" enable-background="new 0 0 24 24" height="24" viewBox="0 0 512 512" width="24" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="m120 256c0-25.367 6.989-49.13 19.131-69.477v-86.308h-86.308c-34.255 44.488-52.823 98.707-52.823 155.785s18.568 111.297 52.823 155.785h86.308v-86.308c-12.142-20.347-19.131-44.11-19.131-69.477z" fill="#fbbd00"/>
+    <path d="m256 392-60 60 60 60c57.079 0 111.297-18.568 155.785-52.823v-86.216h-86.216c-20.525 12.186-44.388 19.039-69.569 19.039z" fill="#0f9d58"/><path d="m139.131 325.477-86.308 86.308c6.782 8.808 14.167 17.243 22.158 25.235 48.352 48.351 112.639 74.98 181.019 74.98v-120c-49.624 0-93.117-26.72-116.869-66.523z" fill="#31aa52"/>
+    <path d="m512 256c0-15.575-1.41-31.179-4.192-46.377l-2.251-12.299h-249.557v120h121.452c-11.794 23.461-29.928 42.602-51.884 55.638l86.216 86.216c8.808-6.782 17.243-14.167 25.235-22.158 48.352-48.353 74.981-112.64 74.981-181.02z" fill="#3c79e6"/>
+    <path d="m352.167 159.833 10.606 10.606 84.853-84.852-10.606-10.606c-48.352-48.352-112.639-74.981-181.02-74.981l-60 60 60 60c36.326 0 70.479 14.146 96.167 39.833z" fill="#cf2d48"/>
+    <path d="m256 120v-120c-68.38 0-132.667 26.629-181.02 74.98-7.991 7.991-15.376 16.426-22.158 25.235l86.308 86.308c23.753-39.803 67.246-66.523 116.87-66.523z" fill="#eb4132"/>
+  </g>
+</svg>
diff --git a/src/assets/auth/logo.svg b/src/assets/auth/logo.svg
new file mode 100644
index 0000000..9b45d20
--- /dev/null
+++ b/src/assets/auth/logo.svg
@@ -0,0 +1,5 @@
+<svg class="auth-page__logo-img" width="162" height="133" viewBox="0 0 62 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.03782 41.4604L30.6088 4.27344" stroke="white" stroke-width="8.36314" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.5625 42.6012H57.7715" stroke="#FBC02D" stroke-width="8.36314" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M30.6086 4.27344L57.7681 42.9963" stroke="#FF5252" stroke-width="8.36314" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/carousel/big-1.png b/src/assets/carousel/big-1.png
new file mode 100644
index 0000000..4fcb262
Binary files /dev/null and b/src/assets/carousel/big-1.png differ
diff --git a/src/assets/carousel/big-2.png b/src/assets/carousel/big-2.png
new file mode 100644
index 0000000..66a69a3
Binary files /dev/null and b/src/assets/carousel/big-2.png differ
diff --git a/src/assets/carousel/big-3.png b/src/assets/carousel/big-3.png
new file mode 100644
index 0000000..5eeffcf
Binary files /dev/null and b/src/assets/carousel/big-3.png differ
diff --git a/src/assets/carousel/small-1.png b/src/assets/carousel/small-1.png
new file mode 100644
index 0000000..8e03041
Binary files /dev/null and b/src/assets/carousel/small-1.png differ
diff --git a/src/assets/carousel/small-2.png b/src/assets/carousel/small-2.png
new file mode 100644
index 0000000..fccc3e5
Binary files /dev/null and b/src/assets/carousel/small-2.png differ
diff --git a/src/assets/carousel/small-3.png b/src/assets/carousel/small-3.png
new file mode 100644
index 0000000..37d207f
Binary files /dev/null and b/src/assets/carousel/small-3.png differ
diff --git a/src/assets/charts/12.jpg b/src/assets/charts/12.jpg
new file mode 100644
index 0000000..91f3073
Binary files /dev/null and b/src/assets/charts/12.jpg differ
diff --git a/src/assets/e-commerce/managment/1.png b/src/assets/e-commerce/managment/1.png
new file mode 100644
index 0000000..9960263
Binary files /dev/null and b/src/assets/e-commerce/managment/1.png differ
diff --git a/src/assets/e-commerce/managment/2.png b/src/assets/e-commerce/managment/2.png
new file mode 100644
index 0000000..69734d5
Binary files /dev/null and b/src/assets/e-commerce/managment/2.png differ
diff --git a/src/assets/e-commerce/managment/3.png b/src/assets/e-commerce/managment/3.png
new file mode 100644
index 0000000..d05d24d
Binary files /dev/null and b/src/assets/e-commerce/managment/3.png differ
diff --git a/src/assets/e-commerce/managment/4.png b/src/assets/e-commerce/managment/4.png
new file mode 100644
index 0000000..850ecb2
Binary files /dev/null and b/src/assets/e-commerce/managment/4.png differ
diff --git a/src/assets/e-commerce/managment/5.png b/src/assets/e-commerce/managment/5.png
new file mode 100644
index 0000000..56b27df
Binary files /dev/null and b/src/assets/e-commerce/managment/5.png differ
diff --git a/src/assets/e-commerce/managment/6.png b/src/assets/e-commerce/managment/6.png
new file mode 100644
index 0000000..de76b21
Binary files /dev/null and b/src/assets/e-commerce/managment/6.png differ
diff --git a/src/assets/e-commerce/product/mastercard.png b/src/assets/e-commerce/product/mastercard.png
new file mode 100644
index 0000000..9c13ddc
Binary files /dev/null and b/src/assets/e-commerce/product/mastercard.png differ
diff --git a/src/assets/e-commerce/product/paypal.png b/src/assets/e-commerce/product/paypal.png
new file mode 100644
index 0000000..2dbaa16
Binary files /dev/null and b/src/assets/e-commerce/product/paypal.png differ
diff --git a/src/assets/e-commerce/product/visa.png b/src/assets/e-commerce/product/visa.png
new file mode 100644
index 0000000..03d6cdf
Binary files /dev/null and b/src/assets/e-commerce/product/visa.png differ
diff --git a/src/assets/e-commerce/products/1.png b/src/assets/e-commerce/products/1.png
new file mode 100644
index 0000000..34a0753
Binary files /dev/null and b/src/assets/e-commerce/products/1.png differ
diff --git a/src/assets/e-commerce/products/2.png b/src/assets/e-commerce/products/2.png
new file mode 100644
index 0000000..e41117a
Binary files /dev/null and b/src/assets/e-commerce/products/2.png differ
diff --git a/src/assets/e-commerce/products/3.png b/src/assets/e-commerce/products/3.png
new file mode 100644
index 0000000..6cecbd1
Binary files /dev/null and b/src/assets/e-commerce/products/3.png differ
diff --git a/src/assets/e-commerce/products/4.png b/src/assets/e-commerce/products/4.png
new file mode 100644
index 0000000..48e390a
Binary files /dev/null and b/src/assets/e-commerce/products/4.png differ
diff --git a/src/assets/e-commerce/products/5.png b/src/assets/e-commerce/products/5.png
new file mode 100644
index 0000000..00f8c81
Binary files /dev/null and b/src/assets/e-commerce/products/5.png differ
diff --git a/src/assets/e-commerce/products/6.png b/src/assets/e-commerce/products/6.png
new file mode 100644
index 0000000..364a72a
Binary files /dev/null and b/src/assets/e-commerce/products/6.png differ
diff --git a/src/assets/e-commerce/products/large-1.png b/src/assets/e-commerce/products/large-1.png
new file mode 100644
index 0000000..de10141
Binary files /dev/null and b/src/assets/e-commerce/products/large-1.png differ
diff --git a/src/assets/e-commerce/products/large-2.png b/src/assets/e-commerce/products/large-2.png
new file mode 100644
index 0000000..324f3f5
Binary files /dev/null and b/src/assets/e-commerce/products/large-2.png differ
diff --git a/src/assets/e-commerce/products/large-3.png b/src/assets/e-commerce/products/large-3.png
new file mode 100644
index 0000000..78c0523
Binary files /dev/null and b/src/assets/e-commerce/products/large-3.png differ
diff --git a/src/assets/e-commerce/products/large-4.png b/src/assets/e-commerce/products/large-4.png
new file mode 100644
index 0000000..10a26c5
Binary files /dev/null and b/src/assets/e-commerce/products/large-4.png differ
diff --git a/src/assets/e-commerce/products/large-5.png b/src/assets/e-commerce/products/large-5.png
new file mode 100644
index 0000000..49dc733
Binary files /dev/null and b/src/assets/e-commerce/products/large-5.png differ
diff --git a/src/assets/e-commerce/products/large-6.png b/src/assets/e-commerce/products/large-6.png
new file mode 100644
index 0000000..482a672
Binary files /dev/null and b/src/assets/e-commerce/products/large-6.png differ
diff --git a/src/assets/extra/gallery/1.png b/src/assets/extra/gallery/1.png
new file mode 100644
index 0000000..536e78a
Binary files /dev/null and b/src/assets/extra/gallery/1.png differ
diff --git a/src/assets/extra/gallery/10.png b/src/assets/extra/gallery/10.png
new file mode 100644
index 0000000..5dadb88
Binary files /dev/null and b/src/assets/extra/gallery/10.png differ
diff --git a/src/assets/extra/gallery/11.png b/src/assets/extra/gallery/11.png
new file mode 100644
index 0000000..cb7987b
Binary files /dev/null and b/src/assets/extra/gallery/11.png differ
diff --git a/src/assets/extra/gallery/12.png b/src/assets/extra/gallery/12.png
new file mode 100644
index 0000000..3d219b6
Binary files /dev/null and b/src/assets/extra/gallery/12.png differ
diff --git a/src/assets/extra/gallery/2.png b/src/assets/extra/gallery/2.png
new file mode 100644
index 0000000..7814be7
Binary files /dev/null and b/src/assets/extra/gallery/2.png differ
diff --git a/src/assets/extra/gallery/3.png b/src/assets/extra/gallery/3.png
new file mode 100644
index 0000000..3605d2f
Binary files /dev/null and b/src/assets/extra/gallery/3.png differ
diff --git a/src/assets/extra/gallery/4.png b/src/assets/extra/gallery/4.png
new file mode 100644
index 0000000..580032d
Binary files /dev/null and b/src/assets/extra/gallery/4.png differ
diff --git a/src/assets/extra/gallery/5.png b/src/assets/extra/gallery/5.png
new file mode 100644
index 0000000..8f5c03a
Binary files /dev/null and b/src/assets/extra/gallery/5.png differ
diff --git a/src/assets/extra/gallery/6.png b/src/assets/extra/gallery/6.png
new file mode 100644
index 0000000..6b50283
Binary files /dev/null and b/src/assets/extra/gallery/6.png differ
diff --git a/src/assets/extra/gallery/7.png b/src/assets/extra/gallery/7.png
new file mode 100644
index 0000000..94d9bf0
Binary files /dev/null and b/src/assets/extra/gallery/7.png differ
diff --git a/src/assets/extra/gallery/8.png b/src/assets/extra/gallery/8.png
new file mode 100644
index 0000000..36e78bf
Binary files /dev/null and b/src/assets/extra/gallery/8.png differ
diff --git a/src/assets/extra/gallery/9.png b/src/assets/extra/gallery/9.png
new file mode 100644
index 0000000..a721391
Binary files /dev/null and b/src/assets/extra/gallery/9.png differ
diff --git a/src/assets/extra/invoice/logo.jpg b/src/assets/extra/invoice/logo.jpg
new file mode 100644
index 0000000..2a7cfef
Binary files /dev/null and b/src/assets/extra/invoice/logo.jpg differ
diff --git a/src/assets/extra/search-result/1.png b/src/assets/extra/search-result/1.png
new file mode 100644
index 0000000..0c8e4b2
Binary files /dev/null and b/src/assets/extra/search-result/1.png differ
diff --git a/src/assets/extra/search-result/2.png b/src/assets/extra/search-result/2.png
new file mode 100644
index 0000000..9b746cc
Binary files /dev/null and b/src/assets/extra/search-result/2.png differ
diff --git a/src/assets/extra/search-result/3.png b/src/assets/extra/search-result/3.png
new file mode 100644
index 0000000..fb4e8f5
Binary files /dev/null and b/src/assets/extra/search-result/3.png differ
diff --git a/src/assets/extra/search-result/4.png b/src/assets/extra/search-result/4.png
new file mode 100644
index 0000000..f980976
Binary files /dev/null and b/src/assets/extra/search-result/4.png differ
diff --git a/src/assets/extra/time-line/a1.jpg b/src/assets/extra/time-line/a1.jpg
new file mode 100644
index 0000000..d24e9d6
Binary files /dev/null and b/src/assets/extra/time-line/a1.jpg differ
diff --git a/src/assets/extra/time-line/a2.jpg b/src/assets/extra/time-line/a2.jpg
new file mode 100644
index 0000000..17098ce
Binary files /dev/null and b/src/assets/extra/time-line/a2.jpg differ
diff --git a/src/assets/extra/time-line/a3.jpg b/src/assets/extra/time-line/a3.jpg
new file mode 100644
index 0000000..451a0b4
Binary files /dev/null and b/src/assets/extra/time-line/a3.jpg differ
diff --git a/src/assets/extra/time-line/a5.jpg b/src/assets/extra/time-line/a5.jpg
new file mode 100644
index 0000000..45061e9
Binary files /dev/null and b/src/assets/extra/time-line/a5.jpg differ
diff --git a/src/assets/extra/time-line/a6.jpg b/src/assets/extra/time-line/a6.jpg
new file mode 100644
index 0000000..98f0310
Binary files /dev/null and b/src/assets/extra/time-line/a6.jpg differ
diff --git a/src/assets/extra/time-line/mountains.jpeg b/src/assets/extra/time-line/mountains.jpeg
new file mode 100644
index 0000000..781fc42
Binary files /dev/null and b/src/assets/extra/time-line/mountains.jpeg differ
diff --git a/src/assets/favicon.png b/src/assets/favicon.png
new file mode 100644
index 0000000..2334e33
Binary files /dev/null and b/src/assets/favicon.png differ
diff --git a/src/assets/header/avatar.png b/src/assets/header/avatar.png
new file mode 100644
index 0000000..b1adb37
Binary files /dev/null and b/src/assets/header/avatar.png differ
diff --git a/src/assets/hot-found/logo.svg b/src/assets/hot-found/logo.svg
new file mode 100644
index 0000000..9b4961d
--- /dev/null
+++ b/src/assets/hot-found/logo.svg
@@ -0,0 +1,5 @@
+<svg class="not-found-page__img"  width="62" height="48" viewBox="0 0 62 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.03782 41.4604L30.6088 4.27344" stroke="white" stroke-width="8.36314" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M4.5625 42.6012H57.7715" stroke="#FBC02D" stroke-width="8.36314" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M30.6086 4.27344L57.7681 42.9963" stroke="#FF5252" stroke-width="8.36314" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/profile.png b/src/assets/profile.png
new file mode 100644
index 0000000..b786754
Binary files /dev/null and b/src/assets/profile.png differ
diff --git a/src/assets/sidebar/2.png b/src/assets/sidebar/2.png
new file mode 100644
index 0000000..da2a9c2
Binary files /dev/null and b/src/assets/sidebar/2.png differ
diff --git a/src/assets/sidebar/3.png b/src/assets/sidebar/3.png
new file mode 100644
index 0000000..6664104
Binary files /dev/null and b/src/assets/sidebar/3.png differ
diff --git a/src/assets/sidebar/5.png b/src/assets/sidebar/5.png
new file mode 100644
index 0000000..e95d13a
Binary files /dev/null and b/src/assets/sidebar/5.png differ
diff --git a/src/assets/ui-elements/cards/candy.png b/src/assets/ui-elements/cards/candy.png
new file mode 100644
index 0000000..4cd70d4
Binary files /dev/null and b/src/assets/ui-elements/cards/candy.png differ
diff --git a/src/assets/ui-elements/cards/city.png b/src/assets/ui-elements/cards/city.png
new file mode 100644
index 0000000..97ffefb
Binary files /dev/null and b/src/assets/ui-elements/cards/city.png differ
diff --git a/src/assets/ui-elements/cards/mac.png b/src/assets/ui-elements/cards/mac.png
new file mode 100644
index 0000000..abf0943
Binary files /dev/null and b/src/assets/ui-elements/cards/mac.png differ
diff --git a/src/assets/ui-elements/cards/rns.png b/src/assets/ui-elements/cards/rns.png
new file mode 100644
index 0000000..5fe3f46
Binary files /dev/null and b/src/assets/ui-elements/cards/rns.png differ
diff --git a/src/assets/user/edit/account.svg b/src/assets/user/edit/account.svg
new file mode 100644
index 0000000..0cc9c77
--- /dev/null
+++ b/src/assets/user/edit/account.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><circle cx="17" cy="15.5" fill-rule="evenodd" r="1.12" fill="#536DFE"/><path d="M17,17.5c-0.73,0-2.19,0.36-2.24,1.08c0.5,0.71,1.32,1.17,2.24,1.17 s1.74-0.46,2.24-1.17C19.19,17.86,17.73,17.5,17,17.5z" fill-rule="evenodd" fill="#536DFE"/><path d="M18,11.09V6.27L10.5,3L3,6.27v4.91c0,4.54,3.2,8.79,7.5,9.82 c0.55-0.13,1.08-0.32,1.6-0.55C13.18,21.99,14.97,23,17,23c3.31,0,6-2.69,6-6C23,14.03,20.84,11.57,18,11.09z M11,17 c0,0.56,0.08,1.11,0.23,1.62c-0.24,0.11-0.48,0.22-0.73,0.3c-3.17-1-5.5-4.24-5.5-7.74v-3.6l5.5-2.4l5.5,2.4v3.51 C13.16,11.57,11,14.03,11,17z M17,21c-2.21,0-4-1.79-4-4c0-2.21,1.79-4,4-4s4,1.79,4,4C21,19.21,19.21,21,17,21z" fill-rule="evenodd" fill="#536DFE"/></g></g></svg>
diff --git a/src/assets/user/list/1.png b/src/assets/user/list/1.png
new file mode 100644
index 0000000..a14e7e6
Binary files /dev/null and b/src/assets/user/list/1.png differ
diff --git a/src/assets/user/list/2.png b/src/assets/user/list/2.png
new file mode 100644
index 0000000..da2a9c2
Binary files /dev/null and b/src/assets/user/list/2.png differ
diff --git a/src/assets/user/list/3.png b/src/assets/user/list/3.png
new file mode 100644
index 0000000..6664104
Binary files /dev/null and b/src/assets/user/list/3.png differ
diff --git a/src/assets/user/list/4.png b/src/assets/user/list/4.png
new file mode 100644
index 0000000..9258243
Binary files /dev/null and b/src/assets/user/list/4.png differ
diff --git a/src/assets/user/list/5.png b/src/assets/user/list/5.png
new file mode 100644
index 0000000..e95d13a
Binary files /dev/null and b/src/assets/user/list/5.png differ
diff --git a/src/assets/user/profile/Be.svg b/src/assets/user/profile/Be.svg
new file mode 100644
index 0000000..b615030
--- /dev/null
+++ b/src/assets/user/profile/Be.svg
@@ -0,0 +1,7 @@
+<svg width="25" height="15" viewBox="0 0 25 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6988">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0367 10.2121C13.0367 8.411 12.18 7.07967 10.4101 6.58067C11.7015 5.96569 12.375 5.03395 12.375 3.5847C12.375 0.727124 10.2386 0.0302734 7.7738 0.0302734H0.987549V14.3776H7.96385C10.5797 14.3776 13.0367 13.1272 13.0367 10.2121ZM4.15115 2.47948H7.11984C8.26111 2.47948 9.28836 2.79916 9.28836 4.11879C9.28836 5.33706 8.48917 5.82729 7.35862 5.82729H4.15115V2.47948ZM4.15018 7.98997V11.9411H7.53307C8.82054 11.9411 9.87215 11.4879 9.87215 10.0386C9.87215 8.56889 8.9911 7.98997 7.59837 7.98997H4.15018Z" fill="#9B9B9B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.1835 11.1555C23.4077 13.5316 21.7957 14.6495 19.3065 14.6495C16.0162 14.6495 13.9734 12.4303 13.9734 9.19459C13.9734 6.07679 16.1292 3.69678 19.3055 3.69678C22.7362 3.69678 24.5918 6.53584 24.354 9.86707H16.8368C16.8368 11.5317 17.7179 12.5112 19.3952 12.5112C20.2645 12.5112 21.3853 12.0424 21.6573 11.1555H24.1835ZM21.4984 8.07183C21.3776 6.6947 20.6544 5.85263 19.2168 5.85263C17.8446 5.85263 16.9352 6.70639 16.8407 8.07183H21.4984Z" fill="#9B9B9B"/>
+<path d="M16.2568 0.783691H22.0928V2.19689H16.2568V0.783691Z" fill="#9B9B9B"/>
+</g>
+</svg>
diff --git a/src/assets/user/profile/a4.jpg b/src/assets/user/profile/a4.jpg
new file mode 100644
index 0000000..f4591d5
Binary files /dev/null and b/src/assets/user/profile/a4.jpg differ
diff --git a/src/assets/user/profile/article-logo.png b/src/assets/user/profile/article-logo.png
new file mode 100644
index 0000000..2b4c163
Binary files /dev/null and b/src/assets/user/profile/article-logo.png differ
diff --git a/src/assets/user/profile/basket.svg b/src/assets/user/profile/basket.svg
new file mode 100644
index 0000000..1679cc9
--- /dev/null
+++ b/src/assets/user/profile/basket.svg
@@ -0,0 +1,5 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6988">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.58389 0C4.84382 0 0.987549 3.85627 0.987549 8.59625C0.987549 13.3362 4.84382 17.1925 9.58389 17.1925C14.324 17.1925 18.1802 13.3362 18.1802 8.59625C18.1802 3.85627 14.324 0 9.58389 0ZM15.1858 4.05419C16.1508 5.24211 16.745 6.7415 16.7944 8.37597C15.0067 8.00588 13.388 8.04931 11.959 8.3295C11.7002 7.72441 11.4324 7.14793 11.162 6.60311C12.7183 5.93268 14.0731 5.07639 15.1858 4.05419ZM10.5224 5.37562C11.833 4.82454 13.113 4.07812 14.2174 3.07C12.9629 2.01642 11.3466 1.38023 9.58389 1.38023C9.06805 1.38023 8.56501 1.43571 8.07953 1.53914C8.64018 2.29192 9.56052 3.61657 10.5224 5.37562ZM6.6855 1.98992C7.10886 2.53852 8.11726 3.91212 9.20046 5.86643C6.4781 6.75337 3.83653 6.9028 2.56717 6.9167C3.09626 4.70649 4.64405 2.8891 6.6855 1.98992ZM2.41599 8.30051L2.37532 8.30042C2.37127 8.39869 2.36778 8.49706 2.36778 8.59625C2.36778 10.3711 3.01308 11.9972 4.07991 13.2554C4.65611 12.5438 5.71134 11.393 7.21763 10.3557C8.11588 9.73715 9.24988 9.1142 10.5946 8.68127C10.3536 8.13038 10.1051 7.60479 9.85506 7.10652C8.8947 7.43483 7.87121 7.69975 6.79187 7.89657C4.90004 8.24153 3.29308 8.30051 2.41599 8.30051ZM5.0745 14.2238C5.57055 13.5992 6.58024 12.4624 8.04079 11.4648C9.03336 10.7869 10.0603 10.2832 11.1174 9.95255C11.7308 11.5424 12.2544 13.2991 12.5667 15.1643C11.6568 15.5791 10.6474 15.8123 9.58389 15.8123C7.87866 15.8123 6.31082 15.2165 5.0745 14.2238ZM12.4801 9.62526C13.0348 11.0973 13.5147 12.708 13.8365 14.4211C15.3317 13.3265 16.3911 11.6717 16.7035 9.76788C15.255 9.44251 13.8447 9.39503 12.4801 9.62526Z" fill="#9B9B9B"/>
+</g>
+</svg>
diff --git a/src/assets/user/profile/facebook-logo.svg b/src/assets/user/profile/facebook-logo.svg
new file mode 100644
index 0000000..793a4e8
--- /dev/null
+++ b/src/assets/user/profile/facebook-logo.svg
@@ -0,0 +1,5 @@
+<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6988">
+<path d="M8.06513 0.00322528L6.05497 0C3.79664 0 2.3372 1.49733 2.3372 3.81486V5.57376H0.316077C0.141428 5.57376 0 5.71535 0 5.89V8.43845C0 8.6131 0.14159 8.75453 0.316077 8.75453H2.3372V15.1851C2.3372 15.3597 2.47863 15.5012 2.65327 15.5012H5.29026C5.46491 15.5012 5.60634 15.3596 5.60634 15.1851V8.75453H7.9695C8.14415 8.75453 8.28558 8.6131 8.28558 8.43845L8.28654 5.89C8.28654 5.80614 8.25316 5.72583 8.19398 5.66649C8.13479 5.60714 8.05416 5.57376 7.97031 5.57376H5.60634V4.08272C5.60634 3.36606 5.77712 3.00225 6.71067 3.00225L8.06481 3.00177C8.23929 3.00177 8.38072 2.86018 8.38072 2.68569V0.319302C8.38072 0.144976 8.23945 0.0035478 8.06513 0.00322528Z" fill="#9B9B9B"/>
+</g>
+</svg>
diff --git a/src/assets/user/profile/folder-blue.svg b/src/assets/user/profile/folder-blue.svg
new file mode 100644
index 0000000..405a978
--- /dev/null
+++ b/src/assets/user/profile/folder-blue.svg
@@ -0,0 +1,14 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#C1CAFF"/>
+<path opacity="0.247814" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4771C9.54565 55.0316 21.9728 49.6513 37.7396 39.1413C46.3708 33.3879 46.4425 24.1131 46.5249 13.4635C46.544 11.0053 46.5636 8.47382 46.6891 5.89551L50.8424 9.35659L133.374 9.35598C140.15 9.35598 142.608 10.0615 145.085 11.3864C147.562 12.7113 149.507 14.6555 150.831 17.1328L150.987 17.4303C152.212 19.8136 152.862 22.3384 152.862 28.8437V43.0179C150.59 48.6922 147.659 54.1507 144.733 59.3083C143.828 60.9028 142.586 62.333 141.349 63.7575C139.334 66.0765 137.333 68.3806 136.822 71.3548C135.995 76.1652 136.631 81.0629 137.268 85.9702C137.813 90.1704 138.359 94.3777 137.989 98.5435C137.35 105.765 128.214 111.17 118.908 114.923H19.4882L18.6955 114.92C12.5153 114.866 10.1555 114.165 7.77732 112.893C5.30001 111.568 3.3558 109.624 2.03092 107.146L1.87491 106.849C0.650726 104.466 0.000488281 101.941 0.000488281 95.4356V58.4771Z" fill="#536DFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.416 50.1118C133.005 50.1118 139.968 43.1489 139.968 34.5598C139.968 25.9707 133.005 19.0078 124.416 19.0078C115.827 19.0078 108.864 25.9707 108.864 34.5598C108.864 43.1489 115.827 50.1118 124.416 50.1118Z" fill="#536DFE"/>
+<g opacity="0.800014">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.456 27.3599H119.376C118.183 27.3599 117.216 28.3269 117.216 29.5199V32.3999V39.5999C117.216 40.7928 118.183 41.7599 119.376 41.7599H122.256H129.456C130.649 41.7599 131.616 40.7928 131.616 39.5999V32.3999V29.5199C131.616 28.3269 130.649 27.3599 129.456 27.3599ZM122.976 40.3199H129.456C129.854 40.3199 130.176 39.9975 130.176 39.5999V33.1199H122.976V40.3199ZM121.536 33.1199V40.3199H119.376C118.978 40.3199 118.656 39.9975 118.656 39.5999V33.1199H121.536ZM122.256 31.6799H130.176V29.5199C130.176 29.1222 129.854 28.7999 129.456 28.7999H119.376C118.978 28.7999 118.656 29.1222 118.656 29.5199V31.6799H122.256Z" fill="black"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="117" y="27" width="15" height="15">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.456 27.3599H119.376C118.183 27.3599 117.216 28.3269 117.216 29.5199V32.3999V39.5999C117.216 40.7928 118.183 41.7599 119.376 41.7599H122.256H129.456C130.649 41.7599 131.616 40.7928 131.616 39.5999V32.3999V29.5199C131.616 28.3269 130.649 27.3599 129.456 27.3599ZM122.976 40.3199H129.456C129.854 40.3199 130.176 39.9975 130.176 39.5999V33.1199H122.976V40.3199ZM121.536 33.1199V40.3199H119.376C118.978 40.3199 118.656 39.9975 118.656 39.5999V33.1199H121.536ZM122.256 31.6799H130.176V29.5199C130.176 29.1222 129.854 28.7999 129.456 28.7999H119.376C118.978 28.7999 118.656 29.1222 118.656 29.5199V31.6799H122.256Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="115.776" y="25.9199" width="17.28" height="17.28" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/user/profile/folder-dark-blue.svg b/src/assets/user/profile/folder-dark-blue.svg
new file mode 100644
index 0000000..372e162
--- /dev/null
+++ b/src/assets/user/profile/folder-dark-blue.svg
@@ -0,0 +1,14 @@
+<svg width="153" height="118" viewBox="0 0 153 118" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.633743" fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#536DFE"/>
+<path opacity="0.810919" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4771C9.54565 55.0316 21.9728 49.6512 37.7396 39.1413C46.3708 33.3879 46.4425 24.1131 46.525 13.4635C46.544 11.0053 46.5636 8.47382 46.6891 5.89551L50.8424 9.35659L133.374 9.35598C140.15 9.35598 142.608 10.0615 145.085 11.3864C147.562 12.7113 149.507 14.6555 150.831 17.1328L150.987 17.4303C152.212 19.8136 152.862 22.3384 152.862 28.8437V43.0179C150.59 48.6922 147.659 54.1507 144.733 59.3083C143.828 60.9028 142.586 62.3329 141.349 63.7574L141.349 63.7575C139.334 66.0765 137.333 68.3806 136.822 71.3548C135.995 76.1652 136.631 81.0628 137.268 85.9701C137.813 90.1703 138.359 94.3777 137.989 98.5435C137.349 105.765 128.214 111.17 118.908 114.923H19.4882L18.6955 114.92C12.5153 114.866 10.1555 114.165 7.77732 112.893C5.30001 111.568 3.3558 109.624 2.03092 107.146L1.87491 106.849C0.650726 104.466 0.000488281 101.941 0.000488281 95.4355V58.4771Z" fill="#536DFE"/>
+<path opacity="0.243443" fill-rule="evenodd" clip-rule="evenodd" d="M124.416 50.1118C133.005 50.1118 139.968 43.1489 139.968 34.5598C139.968 25.9707 133.005 19.0078 124.416 19.0078C115.827 19.0078 108.864 25.9707 108.864 34.5598C108.864 43.1489 115.827 50.1118 124.416 50.1118Z" fill="white"/>
+<g opacity="0.800014">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.456 27.3599H119.376C118.183 27.3599 117.216 28.3269 117.216 29.5199V32.3999V39.5999C117.216 40.7928 118.183 41.7599 119.376 41.7599H122.256H129.456C130.649 41.7599 131.616 40.7928 131.616 39.5999V32.3999V29.5199C131.616 28.3269 130.649 27.3599 129.456 27.3599ZM122.976 40.3199H129.456C129.853 40.3199 130.176 39.9975 130.176 39.5999V33.1199H122.976V40.3199ZM121.536 33.1199V40.3199H119.376C118.978 40.3199 118.656 39.9975 118.656 39.5999V33.1199H121.536ZM122.256 31.6799H130.176V29.5199C130.176 29.1222 129.853 28.7999 129.456 28.7999H119.376C118.978 28.7999 118.656 29.1222 118.656 29.5199V31.6799H122.256Z" fill="white"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="117" y="27" width="15" height="15">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M129.456 27.3599H119.376C118.183 27.3599 117.216 28.3269 117.216 29.5199V32.3999V39.5999C117.216 40.7928 118.183 41.7599 119.376 41.7599H122.256H129.456C130.649 41.7599 131.616 40.7928 131.616 39.5999V32.3999V29.5199C131.616 28.3269 130.649 27.3599 129.456 27.3599ZM122.976 40.3199H129.456C129.853 40.3199 130.176 39.9975 130.176 39.5999V33.1199H122.976V40.3199ZM121.536 33.1199V40.3199H119.376C118.978 40.3199 118.656 39.9975 118.656 39.5999V33.1199H121.536ZM122.256 31.6799H130.176V29.5199C130.176 29.1222 129.853 28.7999 129.456 28.7999H119.376C118.978 28.7999 118.656 29.1222 118.656 29.5199V31.6799H122.256Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="115.776" y="25.9199" width="17.28" height="17.28" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/user/profile/folder-dark-green.svg b/src/assets/user/profile/folder-dark-green.svg
new file mode 100644
index 0000000..944155f
--- /dev/null
+++ b/src/assets/user/profile/folder-dark-green.svg
@@ -0,0 +1,15 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.756929" fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#3CD4A0"/>
+<path opacity="0.899414" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4771C9.54565 55.0316 21.9728 49.6512 37.7396 39.1413C46.3708 33.3879 46.4425 24.1131 46.525 13.4635C46.544 11.0053 46.5636 8.47382 46.6891 5.89551L50.8424 9.35659L133.374 9.35598C140.15 9.35598 142.608 10.0615 145.085 11.3864C147.562 12.7113 149.507 14.6555 150.831 17.1328L150.987 17.4303C152.212 19.8136 152.862 22.3384 152.862 28.8437V43.0179C150.59 48.6922 147.659 54.1507 144.733 59.3083C143.828 60.9028 142.586 62.3329 141.349 63.7574L141.349 63.7575C139.334 66.0765 137.333 68.3806 136.822 71.3548C135.995 76.1652 136.631 81.0628 137.268 85.9701C137.813 90.1703 138.359 94.3777 137.989 98.5435C137.349 105.765 128.214 111.17 118.908 114.923H19.4882L18.6955 114.92C12.5153 114.866 10.1555 114.165 7.77732 112.893C5.30001 111.568 3.3558 109.624 2.03092 107.146L1.87491 106.849C0.650726 104.466 0.000488281 101.941 0.000488281 95.4355V58.4771Z" fill="#3CD4A0"/>
+<path opacity="0.245024" fill-rule="evenodd" clip-rule="evenodd" d="M124.416 48.3838C133.005 48.3838 139.968 41.4209 139.968 32.8318C139.968 24.2427 133.005 17.2798 124.416 17.2798C115.827 17.2798 108.864 24.2427 108.864 32.8318C108.864 41.4209 115.827 48.3838 124.416 48.3838Z" fill="white"/>
+<g opacity="0.80199">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M128.016 24.9121H120.816C119.623 24.9121 118.656 25.8792 118.656 27.0721V38.5921C118.656 39.785 119.623 40.7521 120.816 40.7521H128.016C129.209 40.7521 130.176 39.785 130.176 38.5921V27.0721C130.176 25.8792 129.209 24.9121 128.016 24.9121ZM120.096 27.0721C120.096 26.6745 120.418 26.3521 120.816 26.3521H128.016C128.413 26.3521 128.736 26.6745 128.736 27.0721V38.5921C128.736 38.9898 128.413 39.3121 128.016 39.3121H120.816C120.418 39.3121 120.096 38.9898 120.096 38.5921V27.0721Z" fill="white"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="118" y="24" width="13" height="17">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M128.016 24.9121H120.816C119.623 24.9121 118.656 25.8792 118.656 27.0721V38.5921C118.656 39.785 119.623 40.7521 120.816 40.7521H128.016C129.209 40.7521 130.176 39.785 130.176 38.5921V27.0721C130.176 25.8792 129.209 24.9121 128.016 24.9121ZM120.096 27.0721C120.096 26.6745 120.418 26.3521 120.816 26.3521H128.016C128.413 26.3521 128.736 26.6745 128.736 27.0721V38.5921C128.736 38.9898 128.413 39.3121 128.016 39.3121H120.816C120.418 39.3121 120.096 38.9898 120.096 38.5921V27.0721Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="115.776" y="24.1919" width="17.28" height="17.28" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.536 34.8478C121.536 36.4384 122.825 37.7278 124.416 37.7278C126.006 37.7278 127.296 36.4384 127.296 34.8478C127.296 33.2572 126.006 31.9678 124.416 31.9678C122.825 31.9678 121.536 33.2572 121.536 34.8478ZM125.856 34.8478C125.856 35.6431 125.211 36.2878 124.416 36.2878C123.62 36.2878 122.976 35.6431 122.976 34.8478C122.976 34.0525 123.62 33.4078 124.416 33.4078C125.211 33.4078 125.856 34.0525 125.856 34.8478Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/user/profile/folder-dark-pink.svg b/src/assets/user/profile/folder-dark-pink.svg
new file mode 100644
index 0000000..457ef93
--- /dev/null
+++ b/src/assets/user/profile/folder-dark-pink.svg
@@ -0,0 +1,14 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#E34D82"/>
+<path opacity="0.49721" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4932C9.54565 55.0477 21.9728 49.6674 37.7396 39.1574C46.3708 33.404 46.4425 24.1292 46.525 13.4796C46.544 11.0214 46.5636 8.48993 46.6891 5.91162L50.8424 9.3727L133.374 9.37209C140.15 9.37209 142.608 10.0776 145.085 11.4025C147.562 12.7274 149.507 14.6716 150.831 17.1489L150.987 17.4464C152.212 19.8297 152.862 22.3545 152.862 28.8598V43.034C150.59 48.7083 147.659 54.1668 144.733 59.3244C143.828 60.9189 142.586 62.349 141.349 63.7735L141.349 63.7736C139.334 66.0926 137.333 68.3967 136.822 71.3709C135.995 76.1813 136.631 81.0789 137.268 85.9863C137.813 90.1865 138.359 94.3938 137.989 98.5597C137.349 105.781 128.214 111.186 118.908 114.939H19.4882L18.6955 114.936C12.5153 114.882 10.1555 114.181 7.77732 112.909C5.30001 111.584 3.3558 109.64 2.03092 107.163L1.87491 106.865C0.650726 104.482 0.000488281 101.957 0.000488281 95.4517V58.4932Z" fill="#EE266D"/>
+<path opacity="0.244629" fill-rule="evenodd" clip-rule="evenodd" d="M124.848 49.2478C133.675 49.2478 140.832 42.0915 140.832 33.2638C140.832 24.4361 133.675 17.2798 124.848 17.2798C116.02 17.2798 108.864 24.4361 108.864 33.2638C108.864 42.0915 116.02 49.2478 124.848 49.2478Z" fill="white"/>
+<g opacity="0.801781">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.284 32.4057C117.007 32.8342 116.817 33.1719 116.716 33.3743C116.615 33.577 116.615 33.8156 116.716 34.0183C116.817 34.2207 117.007 34.5584 117.284 34.9869C117.742 35.6961 118.283 36.4049 118.905 37.0687C120.716 39.0009 122.847 40.1763 125.28 40.1763C127.714 40.1763 129.844 39.0009 131.655 37.0687C132.278 36.4049 132.818 35.6961 133.276 34.9869C133.553 34.5584 133.743 34.2207 133.844 34.0183C133.945 33.8156 133.945 33.577 133.844 33.3743C133.743 33.1719 133.553 32.8342 133.276 32.4057C132.818 31.6965 132.278 30.9877 131.655 30.3239C129.844 28.3917 127.714 27.2163 125.28 27.2163C122.847 27.2163 120.716 28.3917 118.905 30.3239C118.283 30.9877 117.742 31.6965 117.284 32.4057ZM119.955 36.0839C119.397 35.4877 118.908 34.8465 118.494 34.2057C118.376 34.0238 118.272 33.853 118.181 33.6963C118.272 33.5396 118.376 33.3688 118.494 33.1869C118.908 32.5461 119.397 31.9049 119.955 31.3087C121.519 29.6409 123.304 28.6563 125.28 28.6563C127.257 28.6563 129.041 29.6409 130.605 31.3087C131.164 31.9049 131.653 32.5461 132.067 33.1869C132.184 33.3688 132.288 33.5396 132.379 33.6963C132.288 33.853 132.184 34.0238 132.067 34.2057C131.653 34.8465 131.164 35.4877 130.605 36.0839C129.041 37.7517 127.257 38.7363 125.28 38.7363C123.304 38.7363 121.519 37.7517 119.955 36.0839ZM125.28 36.5763C123.69 36.5763 122.4 35.2869 122.4 33.6963C122.4 32.1057 123.69 30.8163 125.28 30.8163C126.871 30.8163 128.16 32.1057 128.16 33.6963C128.16 35.2869 126.871 36.5763 125.28 36.5763ZM126.72 33.6963C126.72 34.4916 126.075 35.1363 125.28 35.1363C124.485 35.1363 123.84 34.4916 123.84 33.6963C123.84 32.901 124.485 32.2563 125.28 32.2563C126.075 32.2563 126.72 32.901 126.72 33.6963Z" fill="white"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="116" y="27" width="18" height="14">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.284 32.4057C117.007 32.8342 116.817 33.1719 116.716 33.3743C116.615 33.577 116.615 33.8156 116.716 34.0183C116.817 34.2207 117.007 34.5584 117.284 34.9869C117.742 35.6961 118.283 36.4049 118.905 37.0687C120.716 39.0009 122.847 40.1763 125.28 40.1763C127.714 40.1763 129.844 39.0009 131.655 37.0687C132.278 36.4049 132.818 35.6961 133.276 34.9869C133.553 34.5584 133.743 34.2207 133.844 34.0183C133.945 33.8156 133.945 33.577 133.844 33.3743C133.743 33.1719 133.553 32.8342 133.276 32.4057C132.818 31.6965 132.278 30.9877 131.655 30.3239C129.844 28.3917 127.714 27.2163 125.28 27.2163C122.847 27.2163 120.716 28.3917 118.905 30.3239C118.283 30.9877 117.742 31.6965 117.284 32.4057ZM119.955 36.0839C119.397 35.4877 118.908 34.8465 118.494 34.2057C118.376 34.0238 118.272 33.853 118.181 33.6963C118.272 33.5396 118.376 33.3688 118.494 33.1869C118.908 32.5461 119.397 31.9049 119.955 31.3087C121.519 29.6409 123.304 28.6563 125.28 28.6563C127.257 28.6563 129.041 29.6409 130.605 31.3087C131.164 31.9049 131.653 32.5461 132.067 33.1869C132.184 33.3688 132.288 33.5396 132.379 33.6963C132.288 33.853 132.184 34.0238 132.067 34.2057C131.653 34.8465 131.164 35.4877 130.605 36.0839C129.041 37.7517 127.257 38.7363 125.28 38.7363C123.304 38.7363 121.519 37.7517 119.955 36.0839ZM125.28 36.5763C123.69 36.5763 122.4 35.2869 122.4 33.6963C122.4 32.1057 123.69 30.8163 125.28 30.8163C126.871 30.8163 128.16 32.1057 128.16 33.6963C128.16 35.2869 126.871 36.5763 125.28 36.5763ZM126.72 33.6963C126.72 34.4916 126.075 35.1363 125.28 35.1363C124.485 35.1363 123.84 34.4916 123.84 33.6963C123.84 32.901 124.485 32.2563 125.28 32.2563C126.075 32.2563 126.72 32.901 126.72 33.6963Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="116.64" y="25.0562" width="17.28" height="17.28" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/user/profile/folder-dark-yellow.svg b/src/assets/user/profile/folder-dark-yellow.svg
new file mode 100644
index 0000000..c46cfef
--- /dev/null
+++ b/src/assets/user/profile/folder-dark-yellow.svg
@@ -0,0 +1,14 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.82301" fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#F3B144"/>
+<path opacity="0.899809" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4771C9.54565 55.0316 21.9728 49.6512 37.7396 39.1413C46.3708 33.3879 46.4425 24.1131 46.525 13.4635C46.544 11.0053 46.5636 8.47382 46.6891 5.89551L50.8424 9.35659L133.374 9.35598C140.15 9.35598 142.608 10.0615 145.085 11.3864C147.562 12.7113 149.507 14.6555 150.831 17.1328L150.987 17.4303C152.212 19.8136 152.862 22.3384 152.862 28.8437V43.0179C150.59 48.6922 147.659 54.1507 144.733 59.3083C143.828 60.9028 142.586 62.3329 141.349 63.7574L141.349 63.7575C139.334 66.0765 137.333 68.3806 136.822 71.3548C135.995 76.1652 136.631 81.0628 137.268 85.9701C137.813 90.1703 138.359 94.3777 137.989 98.5435C137.349 105.765 128.214 111.17 118.908 114.923H19.4882L18.6955 114.92C12.5153 114.866 10.1555 114.165 7.77732 112.893C5.30001 111.568 3.3558 109.624 2.03092 107.146L1.87491 106.849C0.650726 104.466 0.000488281 101.941 0.000488281 95.4355V58.4771Z" fill="#E9B55F"/>
+<path opacity="0.245419" fill-rule="evenodd" clip-rule="evenodd" d="M124.416 48.3838C133.005 48.3838 139.968 41.4209 139.968 32.8318C139.968 24.2427 133.005 17.2798 124.416 17.2798C115.827 17.2798 108.864 24.2427 108.864 32.8318C108.864 41.4209 115.827 48.3838 124.416 48.3838Z" fill="white"/>
+<g opacity="0.796224">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.376 25.6318H129.456C130.649 25.6318 131.616 26.5989 131.616 27.7918V34.9918V37.8718C131.616 39.0648 130.649 40.0318 129.456 40.0318H119.376C118.183 40.0318 117.216 39.0648 117.216 37.8718V27.7918C117.216 26.5989 118.183 25.6318 119.376 25.6318ZM130.176 33.2536V27.7918C130.176 27.3942 129.853 27.0718 129.456 27.0718H119.376C118.978 27.0718 118.656 27.3942 118.656 27.7918V37.8718C118.656 38.1806 118.85 38.4439 119.123 38.5463L126.787 30.8827C127.068 30.6015 127.524 30.6015 127.805 30.8827L130.176 33.2536ZM121.114 38.5918L127.296 32.4101L130.176 35.2901V37.8718C130.176 38.2695 129.853 38.5918 129.456 38.5918H121.114ZM120.096 30.3118C120.096 31.3059 120.902 32.1118 121.896 32.1118C122.89 32.1118 123.696 31.3059 123.696 30.3118C123.696 29.3177 122.89 28.5118 121.896 28.5118C120.902 28.5118 120.096 29.3177 120.096 30.3118ZM121.896 30.6718C122.095 30.6718 122.256 30.5107 122.256 30.3118C122.256 30.113 122.095 29.9518 121.896 29.9518C121.697 29.9518 121.536 30.113 121.536 30.3118C121.536 30.5107 121.697 30.6718 121.896 30.6718Z" fill="white"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="117" y="25" width="15" height="16">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.376 25.6318H129.456C130.649 25.6318 131.616 26.5989 131.616 27.7918V34.9918V37.8718C131.616 39.0648 130.649 40.0318 129.456 40.0318H119.376C118.183 40.0318 117.216 39.0648 117.216 37.8718V27.7918C117.216 26.5989 118.183 25.6318 119.376 25.6318ZM130.176 33.2536V27.7918C130.176 27.3942 129.853 27.0718 129.456 27.0718H119.376C118.978 27.0718 118.656 27.3942 118.656 27.7918V37.8718C118.656 38.1806 118.85 38.4439 119.123 38.5463L126.787 30.8827C127.068 30.6015 127.524 30.6015 127.805 30.8827L130.176 33.2536ZM121.114 38.5918L127.296 32.4101L130.176 35.2901V37.8718C130.176 38.2695 129.853 38.5918 129.456 38.5918H121.114ZM120.096 30.3118C120.096 31.3059 120.902 32.1118 121.896 32.1118C122.89 32.1118 123.696 31.3059 123.696 30.3118C123.696 29.3177 122.89 28.5118 121.896 28.5118C120.902 28.5118 120.096 29.3177 120.096 30.3118ZM121.896 30.6718C122.095 30.6718 122.256 30.5107 122.256 30.3118C122.256 30.113 122.095 29.9518 121.896 29.9518C121.697 29.9518 121.536 30.113 121.536 30.3118C121.536 30.5107 121.697 30.6718 121.896 30.6718Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="115.776" y="24.1919" width="17.28" height="17.28" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/user/profile/folder-green.svg b/src/assets/user/profile/folder-green.svg
new file mode 100644
index 0000000..5321693
--- /dev/null
+++ b/src/assets/user/profile/folder-green.svg
@@ -0,0 +1,15 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.585496" fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#3CD4A0"/>
+<path opacity="0.458519" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4771C9.54565 55.0316 21.9728 49.6512 37.7396 39.1413C46.3708 33.3879 46.4425 24.1131 46.525 13.4635C46.544 11.0053 46.5636 8.47382 46.6891 5.89551L50.8424 9.35659L133.374 9.35598C140.15 9.35598 142.608 10.0615 145.085 11.3864C147.562 12.7113 149.507 14.6555 150.831 17.1328L150.987 17.4303C152.212 19.8136 152.862 22.3384 152.862 28.8437V43.0179C150.59 48.6922 147.659 54.1507 144.733 59.3083C143.828 60.9028 142.586 62.3329 141.349 63.7574L141.349 63.7575C139.334 66.0765 137.333 68.3806 136.822 71.3548C135.995 76.1652 136.631 81.0628 137.268 85.9701C137.813 90.1704 138.359 94.3777 137.989 98.5436C137.349 105.765 128.214 111.17 118.908 114.923H19.4882L18.6955 114.92C12.5153 114.866 10.1555 114.165 7.77732 112.893C5.30001 111.568 3.3558 109.624 2.03092 107.146L1.87491 106.849C0.650726 104.466 0.000488281 101.941 0.000488281 95.4355V58.4771Z" fill="#3CD4A0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.416 48.3838C133.005 48.3838 139.968 41.4209 139.968 32.8318C139.968 24.2427 133.005 17.2798 124.416 17.2798C115.827 17.2798 108.864 24.2427 108.864 32.8318C108.864 41.4209 115.827 48.3838 124.416 48.3838Z" fill="#1FB883"/>
+<g opacity="0.80199">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M128.016 24.9121H120.816C119.623 24.9121 118.656 25.8792 118.656 27.0721V38.5921C118.656 39.785 119.623 40.7521 120.816 40.7521H128.016C129.209 40.7521 130.176 39.785 130.176 38.5921V27.0721C130.176 25.8792 129.209 24.9121 128.016 24.9121ZM120.096 27.0721C120.096 26.6745 120.418 26.3521 120.816 26.3521H128.016C128.414 26.3521 128.736 26.6745 128.736 27.0721V38.5921C128.736 38.9898 128.414 39.3121 128.016 39.3121H120.816C120.418 39.3121 120.096 38.9898 120.096 38.5921V27.0721Z" fill="black"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="118" y="24" width="13" height="17">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M128.016 24.9121H120.816C119.623 24.9121 118.656 25.8792 118.656 27.0721V38.5921C118.656 39.785 119.623 40.7521 120.816 40.7521H128.016C129.209 40.7521 130.176 39.785 130.176 38.5921V27.0721C130.176 25.8792 129.209 24.9121 128.016 24.9121ZM120.096 27.0721C120.096 26.6745 120.418 26.3521 120.816 26.3521H128.016C128.414 26.3521 128.736 26.6745 128.736 27.0721V38.5921C128.736 38.9898 128.414 39.3121 128.016 39.3121H120.816C120.418 39.3121 120.096 38.9898 120.096 38.5921V27.0721Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="115.776" y="24.1919" width="17.28" height="17.28" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M121.536 34.8478C121.536 36.4384 122.826 37.7278 124.416 37.7278C126.007 37.7278 127.296 36.4384 127.296 34.8478C127.296 33.2572 126.007 31.9678 124.416 31.9678C122.826 31.9678 121.536 33.2572 121.536 34.8478ZM125.856 34.8478C125.856 35.6431 125.211 36.2878 124.416 36.2878C123.621 36.2878 122.976 35.6431 122.976 34.8478C122.976 34.0525 123.621 33.4078 124.416 33.4078C125.211 33.4078 125.856 34.0525 125.856 34.8478Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/user/profile/folder-pink.svg b/src/assets/user/profile/folder-pink.svg
new file mode 100644
index 0000000..0def4fc
--- /dev/null
+++ b/src/assets/user/profile/folder-pink.svg
@@ -0,0 +1,14 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.68471" fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#FF5992"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4932C9.54565 55.0477 21.9728 49.6674 37.7396 39.1574C46.3708 33.404 46.4425 24.1292 46.525 13.4796C46.544 11.0214 46.5636 8.48993 46.6891 5.91162L50.8424 9.3727L133.374 9.37209C140.15 9.37209 142.608 10.0776 145.085 11.4025C147.562 12.7274 149.507 14.6716 150.831 17.1489L150.987 17.4464C152.212 19.8297 152.862 22.3545 152.862 28.8598V43.034C150.59 48.7083 147.659 54.1668 144.733 59.3244C143.828 60.9189 142.586 62.349 141.349 63.7735L141.349 63.7736C139.334 66.0926 137.333 68.3967 136.822 71.3709C135.995 76.1813 136.631 81.0789 137.268 85.9863C137.813 90.1865 138.359 94.3938 137.989 98.5597C137.349 105.781 128.214 111.186 118.908 114.939H19.4882L18.6955 114.936C12.5153 114.882 10.1555 114.181 7.77732 112.909C5.30001 111.584 3.3558 109.64 2.03092 107.163L1.87491 106.865C0.650726 104.482 0.000488281 101.957 0.000488281 95.4517V58.4932Z" fill="#FF5992"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.848 49.2478C133.676 49.2478 140.832 42.0915 140.832 33.2638C140.832 24.4361 133.676 17.2798 124.848 17.2798C116.02 17.2798 108.864 24.4361 108.864 33.2638C108.864 42.0915 116.02 49.2478 124.848 49.2478Z" fill="#EE266D"/>
+<g opacity="0.801781">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.284 32.4057C117.007 32.8342 116.817 33.1719 116.716 33.3743C116.615 33.577 116.615 33.8156 116.716 34.0183C116.817 34.2207 117.007 34.5584 117.284 34.9869C117.742 35.6961 118.282 36.4049 118.905 37.0687C120.716 39.0009 122.846 40.1763 125.28 40.1763C127.713 40.1763 129.844 39.0009 131.655 37.0687C132.277 36.4049 132.818 35.6961 133.276 34.9869C133.553 34.5584 133.743 34.2207 133.844 34.0183C133.945 33.8156 133.945 33.577 133.844 33.3743C133.743 33.1719 133.553 32.8342 133.276 32.4057C132.818 31.6965 132.277 30.9877 131.655 30.3239C129.844 28.3917 127.713 27.2163 125.28 27.2163C122.846 27.2163 120.716 28.3917 118.905 30.3239C118.282 30.9877 117.742 31.6965 117.284 32.4057ZM119.955 36.0839C119.396 35.4877 118.907 34.8465 118.493 34.2057C118.376 34.0238 118.272 33.853 118.181 33.6963C118.272 33.5396 118.376 33.3688 118.493 33.1869C118.907 32.5461 119.396 31.9049 119.955 31.3087C121.519 29.6409 123.303 28.6563 125.28 28.6563C127.256 28.6563 129.041 29.6409 130.605 31.3087C131.164 31.9049 131.653 32.5461 132.066 33.1869C132.184 33.3688 132.288 33.5396 132.379 33.6963C132.288 33.853 132.184 34.0238 132.066 34.2057C131.653 34.8465 131.164 35.4877 130.605 36.0839C129.041 37.7517 127.256 38.7363 125.28 38.7363C123.303 38.7363 121.519 37.7517 119.955 36.0839ZM125.28 36.5763C123.689 36.5763 122.4 35.2869 122.4 33.6963C122.4 32.1057 123.689 30.8163 125.28 30.8163C126.87 30.8163 128.16 32.1057 128.16 33.6963C128.16 35.2869 126.87 36.5763 125.28 36.5763ZM126.72 33.6963C126.72 34.4916 126.075 35.1363 125.28 35.1363C124.485 35.1363 123.84 34.4916 123.84 33.6963C123.84 32.901 124.485 32.2563 125.28 32.2563C126.075 32.2563 126.72 32.901 126.72 33.6963Z" fill="black"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="116" y="27" width="18" height="14">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.284 32.4057C117.007 32.8342 116.817 33.1719 116.716 33.3743C116.615 33.577 116.615 33.8156 116.716 34.0183C116.817 34.2207 117.007 34.5584 117.284 34.9869C117.742 35.6961 118.282 36.4049 118.905 37.0687C120.716 39.0009 122.846 40.1763 125.28 40.1763C127.713 40.1763 129.844 39.0009 131.655 37.0687C132.277 36.4049 132.818 35.6961 133.276 34.9869C133.553 34.5584 133.743 34.2207 133.844 34.0183C133.945 33.8156 133.945 33.577 133.844 33.3743C133.743 33.1719 133.553 32.8342 133.276 32.4057C132.818 31.6965 132.277 30.9877 131.655 30.3239C129.844 28.3917 127.713 27.2163 125.28 27.2163C122.846 27.2163 120.716 28.3917 118.905 30.3239C118.282 30.9877 117.742 31.6965 117.284 32.4057ZM119.955 36.0839C119.396 35.4877 118.907 34.8465 118.493 34.2057C118.376 34.0238 118.272 33.853 118.181 33.6963C118.272 33.5396 118.376 33.3688 118.493 33.1869C118.907 32.5461 119.396 31.9049 119.955 31.3087C121.519 29.6409 123.303 28.6563 125.28 28.6563C127.256 28.6563 129.041 29.6409 130.605 31.3087C131.164 31.9049 131.653 32.5461 132.066 33.1869C132.184 33.3688 132.288 33.5396 132.379 33.6963C132.288 33.853 132.184 34.0238 132.066 34.2057C131.653 34.8465 131.164 35.4877 130.605 36.0839C129.041 37.7517 127.256 38.7363 125.28 38.7363C123.303 38.7363 121.519 37.7517 119.955 36.0839ZM125.28 36.5763C123.689 36.5763 122.4 35.2869 122.4 33.6963C122.4 32.1057 123.689 30.8163 125.28 30.8163C126.87 30.8163 128.16 32.1057 128.16 33.6963C128.16 35.2869 126.87 36.5763 125.28 36.5763ZM126.72 33.6963C126.72 34.4916 126.075 35.1363 125.28 35.1363C124.485 35.1363 123.84 34.4916 123.84 33.6963C123.84 32.901 124.485 32.2563 125.28 32.2563C126.075 32.2563 126.72 32.901 126.72 33.6963Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="116.64" y="25.0562" width="17.28" height="17.28" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/user/profile/folder-yellow.svg b/src/assets/user/profile/folder-yellow.svg
new file mode 100644
index 0000000..92f14c6
--- /dev/null
+++ b/src/assets/user/profile/folder-yellow.svg
@@ -0,0 +1,14 @@
+<svg width="153" height="115" viewBox="0 0 153 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.667457" fill-rule="evenodd" clip-rule="evenodd" d="M39.6933 0H10.1345C4.53735 0 0 4.53735 0 10.1345V28.7776V33.7815V95.3695C0 101.875 0.650238 104.4 1.87443 106.783L2.03043 107.08C3.35531 109.558 5.29952 111.502 7.77683 112.827C10.1551 114.099 12.5148 114.8 18.695 114.854L19.4877 114.857H133.374C139.879 114.857 142.404 114.207 144.787 112.983L145.085 112.827C147.562 111.502 149.506 109.558 150.831 107.08C152.103 104.702 152.804 102.342 152.858 96.1622L152.861 95.3695V28.7776C152.861 22.2724 152.211 19.7476 150.987 17.3642L150.831 17.0668C149.506 14.5894 147.562 12.6452 145.085 11.3204C142.607 9.99547 140.15 9.28992 133.374 9.28992L50.8419 9.29053L39.6933 0Z" fill="#FFC35F"/>
+<path opacity="0.693848" fill-rule="evenodd" clip-rule="evenodd" d="M0.000488281 58.4771C9.54565 55.0316 21.9728 49.6512 37.7396 39.1413C46.3708 33.3879 46.4425 24.1131 46.525 13.4635C46.544 11.0053 46.5636 8.47382 46.6891 5.89551L50.8424 9.35659L133.374 9.35598C140.15 9.35598 142.608 10.0615 145.085 11.3864C147.562 12.7113 149.507 14.6555 150.831 17.1328L150.987 17.4303C152.212 19.8136 152.862 22.3384 152.862 28.8437V43.0179C150.59 48.6922 147.659 54.1507 144.733 59.3083C143.828 60.9028 142.586 62.3329 141.349 63.7574L141.349 63.7575C139.334 66.0765 137.333 68.3806 136.822 71.3548C135.995 76.1652 136.631 81.0628 137.268 85.9701C137.813 90.1704 138.359 94.3777 137.989 98.5436C137.349 105.765 128.214 111.17 118.908 114.923H19.4882L18.6955 114.92C12.5153 114.866 10.1555 114.165 7.77732 112.893C5.30001 111.568 3.3558 109.624 2.03092 107.146L1.87491 106.849C0.650726 104.466 0.000488281 101.941 0.000488281 95.4355V58.4771Z" fill="#FFC35F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124.416 48.3838C133.005 48.3838 139.968 41.4209 139.968 32.8318C139.968 24.2427 133.005 17.2798 124.416 17.2798C115.827 17.2798 108.864 24.2427 108.864 32.8318C108.864 41.4209 115.827 48.3838 124.416 48.3838Z" fill="#FF9500"/>
+<g opacity="0.796224">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.376 25.6318H129.456C130.649 25.6318 131.616 26.5989 131.616 27.7918V34.9918V37.8718C131.616 39.0648 130.649 40.0318 129.456 40.0318H119.376C118.183 40.0318 117.216 39.0648 117.216 37.8718V27.7918C117.216 26.5989 118.183 25.6318 119.376 25.6318ZM130.176 33.2536V27.7918C130.176 27.3942 129.854 27.0718 129.456 27.0718H119.376C118.978 27.0718 118.656 27.3942 118.656 27.7918V37.8718C118.656 38.1806 118.85 38.4439 119.123 38.5463L126.787 30.8827C127.068 30.6015 127.524 30.6015 127.805 30.8827L130.176 33.2536ZM121.114 38.5918L127.296 32.4101L130.176 35.2901V37.8718C130.176 38.2695 129.854 38.5918 129.456 38.5918H121.114ZM120.096 30.3118C120.096 31.3059 120.902 32.1118 121.896 32.1118C122.89 32.1118 123.696 31.3059 123.696 30.3118C123.696 29.3177 122.89 28.5118 121.896 28.5118C120.902 28.5118 120.096 29.3177 120.096 30.3118ZM121.896 30.6718C122.095 30.6718 122.256 30.5107 122.256 30.3118C122.256 30.113 122.095 29.9518 121.896 29.9518C121.697 29.9518 121.536 30.113 121.536 30.3118C121.536 30.5107 121.697 30.6718 121.896 30.6718Z" fill="black"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="117" y="25" width="15" height="16">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119.376 25.6318H129.456C130.649 25.6318 131.616 26.5989 131.616 27.7918V34.9918V37.8718C131.616 39.0648 130.649 40.0318 129.456 40.0318H119.376C118.183 40.0318 117.216 39.0648 117.216 37.8718V27.7918C117.216 26.5989 118.183 25.6318 119.376 25.6318ZM130.176 33.2536V27.7918C130.176 27.3942 129.854 27.0718 129.456 27.0718H119.376C118.978 27.0718 118.656 27.3942 118.656 27.7918V37.8718C118.656 38.1806 118.85 38.4439 119.123 38.5463L126.787 30.8827C127.068 30.6015 127.524 30.6015 127.805 30.8827L130.176 33.2536ZM121.114 38.5918L127.296 32.4101L130.176 35.2901V37.8718C130.176 38.2695 129.854 38.5918 129.456 38.5918H121.114ZM120.096 30.3118C120.096 31.3059 120.902 32.1118 121.896 32.1118C122.89 32.1118 123.696 31.3059 123.696 30.3118C123.696 29.3177 122.89 28.5118 121.896 28.5118C120.902 28.5118 120.096 29.3177 120.096 30.3118ZM121.896 30.6718C122.095 30.6718 122.256 30.5107 122.256 30.3118C122.256 30.113 122.095 29.9518 121.896 29.9518C121.697 29.9518 121.536 30.113 121.536 30.3118C121.536 30.5107 121.697 30.6718 121.896 30.6718Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="115.776" y="24.1919" width="17.28" height="17.28" fill="white"/>
+</g>
+</g>
+</svg>
diff --git a/src/assets/user/profile/followers.svg b/src/assets/user/profile/followers.svg
new file mode 100644
index 0000000..dd99072
--- /dev/null
+++ b/src/assets/user/profile/followers.svg
@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.317243" fill-rule="evenodd" clip-rule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z" fill="#7C90FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 15.0002C11.1591 15.0002 9.66667 13.5078 9.66667 11.6668C9.66667 9.82588 11.1591 8.3335 13 8.3335C14.8409 8.3335 16.3333 9.82588 16.3333 11.6668C16.3333 13.5078 14.8409 15.0002 13 15.0002ZM19 21.0002V19.6668C19 17.8259 17.5076 16.3335 15.6667 16.3335H10.3333C8.49238 16.3335 7 17.8259 7 19.6668V21.0002C7 21.3684 7.29848 21.6668 7.66667 21.6668C8.03486 21.6668 8.33333 21.3684 8.33333 21.0002V19.6668C8.33333 18.5623 9.22876 17.6668 10.3333 17.6668H15.6667C16.7712 17.6668 17.6667 18.5623 17.6667 19.6668V21.0002C17.6667 21.3684 17.9651 21.6668 18.3333 21.6668C18.7015 21.6668 19 21.3684 19 21.0002ZM23 19.6668V21.0002C23 21.3684 22.7015 21.6668 22.3333 21.6668C21.9651 21.6668 21.6667 21.3684 21.6667 21.0002V19.6673C21.666 18.7559 21.0492 17.9602 20.1667 17.7323C19.8102 17.6403 19.5958 17.2767 19.6878 16.9202C19.7799 16.5637 20.1435 16.3493 20.5 16.4413C21.9708 16.8211 22.9989 18.1473 23 19.6668ZM17.5013 9.73266C18.3863 9.95925 19.0052 10.7567 19.0052 11.6702C19.0052 12.5837 18.3863 13.3811 17.5013 13.6077C17.1446 13.699 16.9295 14.0622 17.0208 14.4189C17.1122 14.7755 17.4753 14.9907 17.832 14.8993C19.307 14.5217 20.3386 13.1927 20.3386 11.6702C20.3386 10.1477 19.307 8.81864 17.832 8.441C17.4753 8.34967 17.1122 8.56479 17.0208 8.92147C16.9295 9.27815 17.1446 9.64134 17.5013 9.73266ZM15 11.6668C15 12.7714 14.1046 13.6668 13 13.6668C11.8954 13.6668 11 12.7714 11 11.6668C11 10.5623 11.8954 9.66683 13 9.66683C14.1046 9.66683 15 10.5623 15 11.6668Z" fill="#536DFE"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="7" y="8" width="16" height="14">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 15.0002C11.1591 15.0002 9.66667 13.5078 9.66667 11.6668C9.66667 9.82588 11.1591 8.3335 13 8.3335C14.8409 8.3335 16.3333 9.82588 16.3333 11.6668C16.3333 13.5078 14.8409 15.0002 13 15.0002ZM19 21.0002V19.6668C19 17.8259 17.5076 16.3335 15.6667 16.3335H10.3333C8.49238 16.3335 7 17.8259 7 19.6668V21.0002C7 21.3684 7.29848 21.6668 7.66667 21.6668C8.03486 21.6668 8.33333 21.3684 8.33333 21.0002V19.6668C8.33333 18.5623 9.22876 17.6668 10.3333 17.6668H15.6667C16.7712 17.6668 17.6667 18.5623 17.6667 19.6668V21.0002C17.6667 21.3684 17.9651 21.6668 18.3333 21.6668C18.7015 21.6668 19 21.3684 19 21.0002ZM23 19.6668V21.0002C23 21.3684 22.7015 21.6668 22.3333 21.6668C21.9651 21.6668 21.6667 21.3684 21.6667 21.0002V19.6673C21.666 18.7559 21.0492 17.9602 20.1667 17.7323C19.8102 17.6403 19.5958 17.2767 19.6878 16.9202C19.7799 16.5637 20.1435 16.3493 20.5 16.4413C21.9708 16.8211 22.9989 18.1473 23 19.6668ZM17.5013 9.73266C18.3863 9.95925 19.0052 10.7567 19.0052 11.6702C19.0052 12.5837 18.3863 13.3811 17.5013 13.6077C17.1446 13.699 16.9295 14.0622 17.0208 14.4189C17.1122 14.7755 17.4753 14.9907 17.832 14.8993C19.307 14.5217 20.3386 13.1927 20.3386 11.6702C20.3386 10.1477 19.307 8.81864 17.832 8.441C17.4753 8.34967 17.1122 8.56479 17.0208 8.92147C16.9295 9.27815 17.1446 9.64134 17.5013 9.73266ZM15 11.6668C15 12.7714 14.1046 13.6668 13 13.6668C11.8954 13.6668 11 12.7714 11 11.6668C11 10.5623 11.8954 9.66683 13 9.66683C14.1046 9.66683 15 10.5623 15 11.6668Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/src/assets/user/profile/following.svg b/src/assets/user/profile/following.svg
new file mode 100644
index 0000000..d357889
--- /dev/null
+++ b/src/assets/user/profile/following.svg
@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.317243" fill-rule="evenodd" clip-rule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z" fill="#FFC35F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.551 13.8573C10.7476 13.8573 9.28571 12.3953 9.28571 10.592C9.28571 8.78859 10.7476 7.32666 12.551 7.32666C14.3544 7.32666 15.8163 8.78859 15.8163 10.592C15.8163 12.3953 14.3544 13.8573 12.551 13.8573ZM18.102 19.7348V18.4287C18.102 16.6253 16.6401 15.1634 14.8367 15.1634H10.2653C8.46193 15.1634 7 16.6253 7 18.4287V19.7348C7 20.0955 7.29239 20.3879 7.65306 20.3879C8.01374 20.3879 8.30612 20.0955 8.30612 19.7348V18.4287C8.30612 17.3467 9.18328 16.4695 10.2653 16.4695H14.8367C15.9188 16.4695 16.7959 17.3467 16.7959 18.4287V19.7348C16.7959 20.0955 17.0883 20.3879 17.449 20.3879C17.8097 20.3879 18.102 20.0955 18.102 19.7348ZM19.4082 15.1634V13.8573H18.102C17.7414 13.8573 17.449 13.5649 17.449 13.2042C17.449 12.8435 17.7414 12.5511 18.102 12.5511H19.4082V11.245C19.4082 10.8844 19.7005 10.592 20.0612 10.592C20.4219 10.592 20.7143 10.8844 20.7143 11.245V12.5511H22.0204C22.3811 12.5511 22.6735 12.8435 22.6735 13.2042C22.6735 13.5649 22.3811 13.8573 22.0204 13.8573H20.7143V15.1634C20.7143 15.5241 20.4219 15.8165 20.0612 15.8165C19.7005 15.8165 19.4082 15.5241 19.4082 15.1634ZM14.5102 10.592C14.5102 11.674 13.633 12.5511 12.551 12.5511C11.469 12.5511 10.5918 11.674 10.5918 10.592C10.5918 9.50994 11.469 8.63278 12.551 8.63278C13.633 8.63278 14.5102 9.50994 14.5102 10.592Z" fill="#FF9D13"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="16" height="14">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.551 13.8573C10.7476 13.8573 9.28571 12.3953 9.28571 10.592C9.28571 8.78859 10.7476 7.32666 12.551 7.32666C14.3544 7.32666 15.8163 8.78859 15.8163 10.592C15.8163 12.3953 14.3544 13.8573 12.551 13.8573ZM18.102 19.7348V18.4287C18.102 16.6253 16.6401 15.1634 14.8367 15.1634H10.2653C8.46193 15.1634 7 16.6253 7 18.4287V19.7348C7 20.0955 7.29239 20.3879 7.65306 20.3879C8.01374 20.3879 8.30612 20.0955 8.30612 19.7348V18.4287C8.30612 17.3467 9.18328 16.4695 10.2653 16.4695H14.8367C15.9188 16.4695 16.7959 17.3467 16.7959 18.4287V19.7348C16.7959 20.0955 17.0883 20.3879 17.449 20.3879C17.8097 20.3879 18.102 20.0955 18.102 19.7348ZM19.4082 15.1634V13.8573H18.102C17.7414 13.8573 17.449 13.5649 17.449 13.2042C17.449 12.8435 17.7414 12.5511 18.102 12.5511H19.4082V11.245C19.4082 10.8844 19.7005 10.592 20.0612 10.592C20.4219 10.592 20.7143 10.8844 20.7143 11.245V12.5511H22.0204C22.3811 12.5511 22.6735 12.8435 22.6735 13.2042C22.6735 13.5649 22.3811 13.8573 22.0204 13.8573H20.7143V15.1634C20.7143 15.5241 20.4219 15.8165 20.0612 15.8165C19.7005 15.8165 19.4082 15.5241 19.4082 15.1634ZM14.5102 10.592C14.5102 11.674 13.633 12.5511 12.551 12.5511C11.469 12.5511 10.5918 11.674 10.5918 10.592C10.5918 9.50994 11.469 8.63278 12.551 8.63278C13.633 8.63278 14.5102 9.50994 14.5102 10.592Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/src/assets/user/profile/insta-logo.svg b/src/assets/user/profile/insta-logo.svg
new file mode 100644
index 0000000..e5fd4b6
--- /dev/null
+++ b/src/assets/user/profile/insta-logo.svg
@@ -0,0 +1,7 @@
+<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6988">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.70972 0H13.3771C15.9811 0 18.0996 2.11847 18.0995 4.72227V12.3896C18.0995 14.9934 15.9811 17.1119 13.3771 17.1119H5.70972C3.10591 17.1119 0.987549 14.9935 0.987549 12.3896V4.72227C0.987549 2.11847 3.10591 0 5.70972 0ZM13.3772 15.5937C15.1439 15.5937 16.5813 14.1564 16.5813 12.3896H16.5812V4.72227C16.5812 2.95563 15.1438 1.51825 13.3771 1.51825H5.70972C3.94308 1.51825 2.5058 2.95563 2.5058 4.72227V12.3896C2.5058 14.1564 3.94308 15.5938 5.70972 15.5937H13.3772Z" fill="#9B9B9B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.13428 8.55628C5.13428 6.12495 7.11226 4.14697 9.54358 4.14697C11.9749 4.14697 13.9529 6.12495 13.9529 8.55628C13.9529 10.9875 11.9749 12.9654 9.54358 12.9654C7.11226 12.9654 5.13428 10.9875 5.13428 8.55628ZM6.65253 8.55618C6.65253 10.1502 7.94952 11.447 9.54358 11.447C11.1376 11.447 12.4346 10.1502 12.4346 8.55618C12.4346 6.96201 11.1377 5.66512 9.54358 5.66512C7.94942 5.66512 6.65253 6.96201 6.65253 8.55618Z" fill="#9B9B9B"/>
+<path d="M14.1378 2.85938C13.8453 2.85938 13.5579 2.9778 13.3513 3.18529C13.1437 3.39178 13.0244 3.67923 13.0244 3.97276C13.0244 4.26538 13.1438 4.55273 13.3513 4.76023C13.5578 4.96671 13.8453 5.08614 14.1378 5.08614C14.4313 5.08614 14.7178 4.96671 14.9253 4.76023C15.1328 4.55273 15.2512 4.26528 15.2512 3.97276C15.2512 3.67923 15.1328 3.39178 14.9253 3.18529C14.7188 2.9778 14.4313 2.85938 14.1378 2.85938Z" fill="#9B9B9B"/>
+</g>
+</svg>
diff --git a/src/assets/user/profile/medium-logo.svg b/src/assets/user/profile/medium-logo.svg
new file mode 100644
index 0000000..42dcb5d
--- /dev/null
+++ b/src/assets/user/profile/medium-logo.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.6988">
+<path d="M18.2609 1.77091L19.7587 0.338048V0.0244141H14.57L10.8721 9.22852L6.66503 0.0244141H1.22453V0.338048L2.97416 2.44432C3.14466 2.59997 3.23383 2.82757 3.21114 3.05673V11.334C3.26511 11.632 3.16813 11.9386 2.95852 12.1552L0.987549 14.5439V14.8536H6.57587V14.54L4.6049 12.1552C4.39138 11.9378 4.29048 11.6367 4.3335 11.334V4.17439L9.23902 14.8575H9.80919L14.0272 4.17439V12.6847C14.0272 12.9092 14.0272 12.9554 13.8802 13.1024L12.3628 14.5705V14.8849H19.7242V14.5712L18.2617 13.1392C18.1334 13.0422 18.0669 12.8795 18.0943 12.7215V2.18857C18.0669 2.02979 18.1326 1.86711 18.2609 1.77091V1.77091Z" fill="#9B9B9B"/>
+</g>
+</svg>
diff --git a/src/assets/user/profile/photo.png b/src/assets/user/profile/photo.png
new file mode 100644
index 0000000..3eeeccd
Binary files /dev/null and b/src/assets/user/profile/photo.png differ
diff --git a/src/assets/user/profile/posts.svg b/src/assets/user/profile/posts.svg
new file mode 100644
index 0000000..8131bee
--- /dev/null
+++ b/src/assets/user/profile/posts.svg
@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.317243" fill-rule="evenodd" clip-rule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z" fill="#3CD4A0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z" fill="#14B17B"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="9" y="7" width="12" height="16">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3333 7.6665C16.5144 7.6665 16.6787 7.73873 16.7988 7.85594C16.9229 7.97702 17 8.1461 17 8.33317V9.94265L18.7239 11.6665H20.3333C20.7015 11.6665 21 11.965 21 12.3332V20.3332C21 21.4377 20.1046 22.3332 19 22.3332H11C9.89543 22.3332 9 21.4377 9 20.3332V9.6665C9 8.56193 9.89543 7.6665 11 7.6665H16.3333ZM11 8.99984H15.6667L19.6667 12.9998V20.3332C19.6667 20.7014 19.3682 20.9998 19 20.9998H11C10.6318 20.9998 10.3333 20.7014 10.3333 20.3332V9.6665C10.3333 9.29831 10.6318 8.99984 11 8.99984ZM12.3333 14.9998H17.6667C18.0349 14.9998 18.3333 15.2983 18.3333 15.6665C18.3333 16.0347 18.0349 16.3332 17.6667 16.3332H12.3333C11.9651 16.3332 11.6667 16.0347 11.6667 15.6665C11.6667 15.2983 11.9651 14.9998 12.3333 14.9998ZM17.6667 17.6665H12.3333C11.9651 17.6665 11.6667 17.965 11.6667 18.3332C11.6667 18.7014 11.9651 18.9998 12.3333 18.9998H17.6667C18.0349 18.9998 18.3333 18.7014 18.3333 18.3332C18.3333 17.965 18.0349 17.6665 17.6667 17.6665ZM12.3333 12.3332H13.6667C14.0349 12.3332 14.3333 12.6316 14.3333 12.9998C14.3333 13.368 14.0349 13.6665 13.6667 13.6665H12.3333C11.9651 13.6665 11.6667 13.368 11.6667 12.9998C11.6667 12.6316 11.9651 12.3332 12.3333 12.3332Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/src/assets/user/profile/projects.svg b/src/assets/user/profile/projects.svg
new file mode 100644
index 0000000..67fbb9a
--- /dev/null
+++ b/src/assets/user/profile/projects.svg
@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.317243" fill-rule="evenodd" clip-rule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z" fill="#FF5992"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 16.6667H10.6667C11.0349 16.6667 11.3333 16.9651 11.3333 17.3333C11.3333 17.7015 11.0349 18 10.6667 18H10C8.89543 18 8 17.1046 8 16V10C8 8.89543 8.89543 8 10 8H16C17.1046 8 18 8.89543 18 10V10.6667C18 11.0349 17.7015 11.3333 17.3333 11.3333C16.9651 11.3333 16.6667 11.0349 16.6667 10.6667V10C16.6667 9.63181 16.3682 9.33333 16 9.33333H10C9.63181 9.33333 9.33333 9.63181 9.33333 10V16C9.33333 16.3682 9.63181 16.6667 10 16.6667ZM14.6667 12.6667H20.6667C21.7712 12.6667 22.6667 13.5621 22.6667 14.6667V20.6667C22.6667 21.7712 21.7712 22.6667 20.6667 22.6667H14.6667C13.5621 22.6667 12.6667 21.7712 12.6667 20.6667V14.6667C12.6667 13.5621 13.5621 12.6667 14.6667 12.6667ZM14.6667 14C14.2985 14 14 14.2985 14 14.6667V20.6667C14 21.0349 14.2985 21.3333 14.6667 21.3333H20.6667C21.0349 21.3333 21.3333 21.0349 21.3333 20.6667V14.6667C21.3333 14.2985 21.0349 14 20.6667 14H14.6667Z" fill="#FF5992"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="8" width="15" height="15">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 16.6667H10.6667C11.0349 16.6667 11.3333 16.9651 11.3333 17.3333C11.3333 17.7015 11.0349 18 10.6667 18H10C8.89543 18 8 17.1046 8 16V10C8 8.89543 8.89543 8 10 8H16C17.1046 8 18 8.89543 18 10V10.6667C18 11.0349 17.7015 11.3333 17.3333 11.3333C16.9651 11.3333 16.6667 11.0349 16.6667 10.6667V10C16.6667 9.63181 16.3682 9.33333 16 9.33333H10C9.63181 9.33333 9.33333 9.63181 9.33333 10V16C9.33333 16.3682 9.63181 16.6667 10 16.6667ZM14.6667 12.6667H20.6667C21.7712 12.6667 22.6667 13.5621 22.6667 14.6667V20.6667C22.6667 21.7712 21.7712 22.6667 20.6667 22.6667H14.6667C13.5621 22.6667 12.6667 21.7712 12.6667 20.6667V14.6667C12.6667 13.5621 13.5621 12.6667 14.6667 12.6667ZM14.6667 14C14.2985 14 14 14.2985 14 14.6667V20.6667C14 21.0349 14.2985 21.3333 14.6667 21.3333H20.6667C21.0349 21.3333 21.3333 21.0349 21.3333 20.6667V14.6667C21.3333 14.2985 21.0349 14 20.6667 14H14.6667Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/src/assets/user/profile/trending-up.svg b/src/assets/user/profile/trending-up.svg
new file mode 100644
index 0000000..b1eabf4
--- /dev/null
+++ b/src/assets/user/profile/trending-up.svg
@@ -0,0 +1,8 @@
+<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2667 4.26667C11.9721 4.26667 11.7333 4.02789 11.7333 3.73333V1.82091L7.57712 5.97712C7.36884 6.1854 7.03116 6.1854 6.82288 5.97712L4.53333 3.68758L0.910457 7.31046C0.702177 7.51874 0.364489 7.51874 0.15621 7.31046C-0.0520699 7.10218 -0.0520699 6.76449 0.15621 6.55621L4.15621 2.55621C4.36449 2.34793 4.70218 2.34793 4.91046 2.55621L7.2 4.84575L10.9791 1.06667H9.06667C8.77212 1.06667 8.53333 0.827885 8.53333 0.533333C8.53333 0.238781 8.77212 0 9.06667 0H12.2667C12.339 0 12.4079 0.0143921 12.4708 0.0404683C12.5309 0.0653113 12.5873 0.101593 12.6368 0.149312C12.6415 0.153867 12.6461 0.158509 12.6507 0.163234C12.6984 0.212713 12.7347 0.269139 12.7595 0.329182C12.7856 0.392066 12.8 0.461019 12.8 0.533333V3.73333C12.8 4.02789 12.5612 4.26667 12.2667 4.26667Z" fill="#3CD4A0"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="13" height="8">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2667 4.26667C11.9721 4.26667 11.7333 4.02789 11.7333 3.73333V1.82091L7.57712 5.97712C7.36884 6.1854 7.03116 6.1854 6.82288 5.97712L4.53333 3.68758L0.910457 7.31046C0.702177 7.51874 0.364489 7.51874 0.15621 7.31046C-0.0520699 7.10218 -0.0520699 6.76449 0.15621 6.55621L4.15621 2.55621C4.36449 2.34793 4.70218 2.34793 4.91046 2.55621L7.2 4.84575L10.9791 1.06667H9.06667C8.77212 1.06667 8.53333 0.827885 8.53333 0.533333C8.53333 0.238781 8.77212 0 9.06667 0H12.2667C12.339 0 12.4079 0.0143921 12.4708 0.0404683C12.5309 0.0653113 12.5873 0.101593 12.6368 0.149312C12.6415 0.153867 12.6461 0.158509 12.6507 0.163234C12.6984 0.212713 12.7347 0.269139 12.7595 0.329182C12.7856 0.392066 12.8 0.461019 12.8 0.533333V3.73333C12.8 4.02789 12.5612 4.26667 12.2667 4.26667Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/src/assets/user/profile/update-icon.svg b/src/assets/user/profile/update-icon.svg
new file mode 100644
index 0000000..52c5668
--- /dev/null
+++ b/src/assets/user/profile/update-icon.svg
@@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 36C27.9411 36 36 27.9411 36 18C36 8.05887 27.9411 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36Z" fill="#8799FE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.84945 13.6999C10.2856 10.9448 13.2718 9.36048 16.3583 9.71597C19.2265 10.0463 21.6295 11.9883 22.5748 14.6764H23.0069C25.188 14.6747 27.1186 16.087 27.7773 18.1663C28.4361 20.2455 27.6711 22.5118 25.8869 23.7664C25.5105 24.0312 24.9906 23.9406 24.7259 23.5641C24.4612 23.1876 24.5518 22.6678 24.9282 22.4031C26.1177 21.5667 26.6277 20.0558 26.1885 18.6696C25.7493 17.2835 24.4623 16.342 23.0076 16.3431H21.9576C21.5771 16.3431 21.245 16.0854 21.1504 15.7169C20.5498 13.3762 18.5682 11.6482 16.1676 11.3717C13.7669 11.0952 11.4444 12.3275 10.3274 14.4703C9.21037 16.6131 9.53022 19.2228 11.1316 21.0325C11.4366 21.3772 11.4045 21.9038 11.0598 22.2088C10.7152 22.5138 10.1885 22.4817 9.88351 22.137C7.82454 19.8103 7.4133 16.455 8.84945 13.6999ZM17.1743 18.0097V23.4979L15.2635 21.5872C14.9381 21.2617 14.4104 21.2617 14.085 21.5872C13.7596 21.9126 13.7596 22.4402 14.085 22.7657L17.4173 26.0979L17.4275 26.108C17.5775 26.2535 17.7821 26.3431 18.0076 26.3431C18.1215 26.3431 18.23 26.3202 18.3289 26.2789C18.4241 26.2392 18.5134 26.181 18.5914 26.1044L18.5976 26.0983L21.9302 22.7657C22.2556 22.4402 22.2556 21.9126 21.9302 21.5872C21.6047 21.2617 21.0771 21.2617 20.7517 21.5872L18.8409 23.4979V18.0097C18.8409 17.5495 18.4678 17.1764 18.0076 17.1764C17.5474 17.1764 17.1743 17.5495 17.1743 18.0097Z" fill="black"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="8" y="9" width="21" height="18">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.84945 13.6999C10.2856 10.9448 13.2718 9.36048 16.3583 9.71597C19.2265 10.0463 21.6295 11.9883 22.5748 14.6764H23.0069C25.188 14.6747 27.1186 16.087 27.7773 18.1663C28.4361 20.2455 27.6711 22.5118 25.8869 23.7664C25.5105 24.0312 24.9906 23.9406 24.7259 23.5641C24.4612 23.1876 24.5518 22.6678 24.9282 22.4031C26.1177 21.5667 26.6277 20.0558 26.1885 18.6696C25.7493 17.2835 24.4623 16.342 23.0076 16.3431H21.9576C21.5771 16.3431 21.245 16.0854 21.1504 15.7169C20.5498 13.3762 18.5682 11.6482 16.1676 11.3717C13.7669 11.0952 11.4444 12.3275 10.3274 14.4703C9.21037 16.6131 9.53022 19.2228 11.1316 21.0325C11.4366 21.3772 11.4045 21.9038 11.0598 22.2088C10.7152 22.5138 10.1885 22.4817 9.88351 22.137C7.82454 19.8103 7.4133 16.455 8.84945 13.6999ZM17.1743 18.0097V23.4979L15.2635 21.5872C14.9381 21.2617 14.4104 21.2617 14.085 21.5872C13.7596 21.9126 13.7596 22.4402 14.085 22.7657L17.4173 26.0979L17.4275 26.108C17.5775 26.2535 17.7821 26.3431 18.0076 26.3431C18.1215 26.3431 18.23 26.3202 18.3289 26.2789C18.4241 26.2392 18.5134 26.181 18.5914 26.1044L18.5976 26.0983L21.9302 22.7657C22.2556 22.4402 22.2556 21.9126 21.9302 21.5872C21.6047 21.2617 21.0771 21.2617 20.7517 21.5872L18.8409 23.4979V18.0097C18.8409 17.5495 18.4678 17.1764 18.0076 17.1764C17.5474 17.1764 17.1743 17.5495 17.1743 18.0097Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+<rect x="8" y="8" width="20" height="20" fill="white"/>
+</g>
+</svg>
diff --git a/src/custom-theme.scss b/src/custom-theme.scss
new file mode 100644
index 0000000..24707dd
--- /dev/null
+++ b/src/custom-theme.scss
@@ -0,0 +1,754 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use '@angular/material' as mat;
+@use '@angular/cdk' as cdk;
+@use "src/app/styles/variables" as *;
+@use "src/app/styles/palettes" as *;
+@use "src/app/styles/font" as *;
+@use "src/app/styles/header" as *;
+@use "src/app/styles/sidebar" as *;
+@use "src/app/styles/settings" as *;
+@use "src/app/styles/footer" as *;
+@use "src/app/styles/themes" as *;
+@use "src/app/styles/scrollbar" as *;
+@use "src/app/styles/calendar" as *;
+@use "src/app/styles/mat-tab" as *;
+@use "src/app/styles/mat-card" as *;
+@use "src/app/styles/mat-form-field" as *;
+@use "src/app/styles/mat-carousel" as *;
+@use "src/app/styles/typography" as *;
+@use "src/app/styles/notification" as *;
+@use "src/app/styles/full-calendar" as *;
+
+// Compatibility layer for legacy theme API used across old styles.
+$dark-primary-text: rgba(black, 0.87);
+$light-primary-text: white;
+
+@function mat-palette(
+  $base-palette,
+  $default: 500,
+  $lighter: 100,
+  $darker: 700,
+  $text: $default
+) {
+  @return mat.m2-define-palette($base-palette, $default, $lighter, $darker, $text);
+}
+
+@function mat-light-theme($primary, $accent: null, $warn: null) {
+  @if $warn == null {
+    $warn: mat.m2-define-palette(mat.$m2-red-palette);
+  }
+
+  $theme: mat.m2-define-light-theme(
+    (
+      color: (
+        primary: $primary,
+        accent: $accent,
+        warn: $warn,
+      ),
+    )
+  );
+  $color-config: mat.m2-get-color-config($theme);
+
+  @if $color-config != null {
+    @return map.merge($theme, $color-config);
+  }
+
+  @return $theme;
+}
+
+@function mat-color($palette, $hue: default, $opacity: null) {
+  $color: null;
+
+  @if meta.type-of($palette) == map {
+    @if map.has-key($palette, $hue) {
+      $color: map.get($palette, $hue);
+    } @else if $hue == default-contrast and map.has-key($palette, contrast) {
+      $contrast-palette: map.get($palette, contrast);
+
+      @if meta.type-of($contrast-palette) == map and map.has-key($contrast-palette, default) {
+        $color: map.get($contrast-palette, default);
+      }
+    }
+  }
+
+  @if $color == null {
+    $color: mat.m2-get-color-from-palette($palette, $hue);
+  }
+
+  @if $opacity != null and meta.type-of($color) == color {
+    @return rgba($color, $opacity);
+  }
+
+  @return $color;
+}
+
+@mixin mat-core() {
+  @include mat.elevation-classes();
+  @include mat.app-background();
+}
+
+@mixin angular-material-theme($theme) {
+  @include mat.all-component-themes($theme);
+}
+
+@mixin mat-elevation($z-value, $color: null, $opacity: null) {
+  @if $color == null {
+    @include mat.elevation($z-value);
+  } @else if $opacity == null {
+    @include mat.elevation($z-value, $color);
+  } @else {
+    @include mat.elevation($z-value, $color, $opacity);
+  }
+}
+
+@mixin cdk-high-contrast($target: active, $encapsulation: off) {
+  @include cdk.high-contrast($target, $encapsulation) {
+    @content;
+  }
+}
+@include mat-core();
+
+$ama-primary: mat-palette($ama-blue);
+$ama-primary-light: mat-palette($ama-light-blue);
+$ama-accent: mat-palette($ama-yellow);
+$ama-warn: mat-palette($ama-pink);
+$ama-success: mat-palette($ama-green);
+$ama-info: mat-palette($ama-violet);
+
+@function ama-light-theme(
+  $primary,
+  $accent,
+  $warn,
+  $success,
+  $info,
+  $primary-light
+) {
+  @return map.merge(
+    mat-light-theme($primary, $accent, $warn),
+    (
+      success: $success,
+      info: $info,
+      primary-light: $primary-light,
+    )
+  );
+}
+
+/***********************************/
+/** Angular Material Admin THEME **/
+/**********************************/
+
+$ama-theme: ama-light-theme(
+  $ama-primary,
+  $ama-accent,
+  $ama-warn,
+  $ama-success,
+  $ama-info,
+  $ama-primary-light
+);
+
+@include angular-material-theme($ama-theme);
+
+/***********************************/
+/**            Badge             **/
+/**********************************/
+
+$ama-badge-theme: ama-light-theme(
+  $ama-primary,
+  $ama-accent,
+  $ama-warn,
+  $ama-success,
+  $ama-info,
+  $ama-primary-light
+);
+
+@mixin mat-badge-theme($theme) {
+  $accent: map.get($theme, accent);
+  $warn: map.get($theme, warn);
+  $primary: map.get($theme, primary);
+  $primary-light: map.get($theme, primary-light);
+  $success: map.get($theme, success);
+  $info: map.get($theme, info);
+  $background: map.get($theme, background);
+  $foreground: map.get($theme, foreground);
+
+  .mat-badge-content {
+    color: mat-color($primary, default-contrast);
+    background: mat-color($primary);
+
+    @include cdk-high-contrast(active, off) {
+      outline: solid 1px;
+      border-radius: 0;
+    }
+  }
+
+  .mat-badge-accent {
+    .mat-badge-content {
+      background: mat-color($accent);
+      color: mat-color($accent, default-contrast);
+    }
+  }
+
+  .mat-badge-warn {
+    .mat-badge-content {
+      color: mat-color($warn, default-contrast);
+      background: mat-color($warn);
+    }
+  }
+
+  .mat-badge-success {
+    .mat-badge-content {
+      color: mat-color($success, default-contrast);
+      background: mat-color($success);
+    }
+  }
+
+  .mat-badge-info {
+    .mat-badge-content {
+      color: mat-color($info, default-contrast);
+      background: mat-color($info);
+    }
+  }
+
+  .mat-badge-primary-light {
+    .mat-badge-content {
+      color: mat-color($primary-light, default-contrast);
+      background: mat-color($primary-light);
+    }
+  }
+
+  .mat-badge {
+    position: relative;
+  }
+
+  .mat-badge-hidden {
+    .mat-badge-content {
+      display: none;
+    }
+  }
+
+  .mat-badge-disabled {
+    .mat-badge-content {
+      $app-background: mat-color($background, 'background');
+      $badge-color: mat-color($foreground, disabled-button);
+
+      // The disabled color usually has some kind of opacity, but because the badge is overlayed
+      // on top of something else, it won't look good if it's opaque. If it is a color *type*,
+      // we convert it into a solid color by taking the opacity from the rgba value and using
+      // the value to determine the percentage of the background to put into foreground when
+      // mixing the colors together.
+      @if (
+        meta.type-of($badge-color) == color and meta.type-of($app-background) == color
+      ) {
+        $badge-opacity: color.opacity($badge-color);
+        background: color.mix(
+          $app-background,
+          rgba($badge-color, 1),
+          (1 - $badge-opacity) * 100%
+        );
+      } @else {
+        background: $badge-color;
+      }
+
+      color: mat-color($foreground, disabled-text);
+    }
+  }
+
+  .mat-badge-content {
+    position: absolute;
+    text-align: center;
+    display: inline-block;
+    border-radius: 50%;
+    transition: transform 200ms ease-in-out;
+    transform: none;
+    overflow: hidden;
+    font-weight: 400;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
+
+  .ng-animate-disabled .mat-badge-content,
+  .mat-badge-content._mat-animation-noopable {
+    transition: none;
+  }
+
+  // The active class is added after the element is added
+  // so it can animate scale to default
+  .mat-badge-content.mat-badge-active {
+    // Scale to `none` instead of `1` to avoid blurry text in some browsers.
+    transform: none;
+  }
+
+  //.mat-badge-small {
+  //  @include _mat-badge-size($mat-badge-small-size);
+  //}
+  //.mat-badge-medium {
+  //  @include _mat-badge-size($mat-badge-default-size);
+  //}
+  //.mat-badge-large {
+  //  @include _mat-badge-size($mat-badge-large-size);
+  //}
+}
+
+@include mat-badge-theme($ama-badge-theme);
+
+/***********************************/
+/**          Radio Button        **/
+/**********************************/
+
+$ama-radio-button-theme: ama-light-theme(
+  $ama-primary,
+  $ama-accent,
+  $ama-warn,
+  $ama-success,
+  $ama-info,
+  $ama-primary-light
+);
+
+@mixin _mat-radio-color($palette) {
+  /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+  &.mat-radio-checked .mat-radio-outer-circle {
+    border-color: mat-color($palette);
+  }
+  /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+  .mat-radio-inner-circle,
+  .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
+  &.mat-radio-checked .mat-radio-persistent-ripple,
+  &:active .mat-radio-persistent-ripple {
+    background-color: mat-color($palette);
+  }
+}
+
+@mixin mat-radio-theme($theme) {
+  $primary: map.get($theme, primary);
+  $accent: map.get($theme, accent);
+  $warn: map.get($theme, warn);
+  $success: map.get($theme, success);
+  $info: map.get($theme, info);
+  $background: map.get($theme, background);
+  $foreground: map.get($theme, foreground);
+  /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+  .mat-radio-outer-circle {
+    border-color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-mdc-radio-button {
+    &.mat-primary {
+      @include _mat-radio-color($primary);
+    }
+
+    &.mat-accent {
+      @include _mat-radio-color($success);
+    }
+
+    &.mat-warn {
+      @include _mat-radio-color($warn);
+    }
+
+    // This needs extra specificity, because the classes above are combined
+    // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.
+    // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).
+    /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+    /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+    &.mat-radio-disabled {
+      /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+      &.mat-radio-checked .mat-radio-outer-circle,
+      .mat-radio-outer-circle {
+        border-color: mat-color($foreground, disabled);
+      }
+      /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+      .mat-radio-ripple .mat-ripple-element,
+      .mat-radio-inner-circle {
+        background-color: mat-color($foreground, disabled);
+      }
+      /*TODO(mdc-migration): The following rule targets internal classes of radio that may no longer apply for the MDC version.*/
+      .mat-radio-label-content {
+        color: mat-color($foreground, disabled);
+      }
+    }
+
+    // Switch this to a solid color since we're using `opacity`
+    // to control how opaque the ripple should be.
+    .mat-ripple-element {
+      background-color: map.get($foreground, base);
+    }
+  }
+}
+
+@include mat-radio-theme($ama-radio-button-theme);
+
+/***********************************/
+/**             Chip             **/
+/**********************************/
+
+@mixin custom-mat-chips-color($foreground, $background) {
+  background-color: $background;
+  color: $foreground;
+  /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+  .mat-chip-remove {
+    color: $foreground;
+    opacity: 0.4;
+  }
+}
+
+@mixin _mat-theme-elevation($zValue, $theme, $opacity: null) {
+  $foreground: map.get($theme, foreground);
+  $elevation-color: map.get($foreground, elevation);
+
+  @if $elevation-color == null {
+    @include mat-elevation($zValue);
+  } @else if $opacity == null {
+    @include mat-elevation($zValue, $elevation-color);
+  } @else {
+    @include mat-elevation($zValue, $elevation-color, $opacity);
+  }
+}
+
+@mixin mat-chips-theme-color($palette) {
+  @include custom-mat-chips-color(
+    mat-color($palette, default-contrast),
+    mat-color($palette)
+  );
+
+  //.mat-ripple-element {
+  //  @include _mat-chips-ripple-background($palette, default-contrast, 0.1);
+  //}
+}
+
+$ama-chip-theme: ama-light-theme(
+  $ama-primary,
+  $ama-accent,
+  $ama-warn,
+  $ama-success,
+  $ama-info,
+  $ama-primary-light
+);
+
+@mixin mat-chips-theme($theme) {
+  $is-dark-theme: map.get($theme, is-dark);
+  $primary: map.get($theme, primary);
+  $accent: map.get($theme, accent);
+  $warn: map.get($theme, warn);
+  $success: map.get($theme, success);
+  $info: map.get($theme, info);
+  $background: map.get($theme, background);
+  $foreground: map.get($theme, foreground);
+
+  $unselected-background: mat-color($background, unselected-chip);
+  $unselected-foreground: mat-color($foreground, text);
+
+  .mat-mdc-chip.mat-mdc-standard-chip {
+    @include custom-mat-chips-color(
+      $unselected-foreground,
+      $unselected-background
+    );
+    /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+    /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+    &:not(.mat-chip-disabled) {
+      &:active {
+        @include _mat-theme-elevation(3, $theme);
+      }
+      /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+      .mat-chip-remove:hover {
+        opacity: 0.54;
+      }
+    }
+    /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+    &.mat-chip-disabled {
+      opacity: 0.4;
+    }
+
+    &::after {
+      background: map.get($foreground, base);
+    }
+  }
+  /*TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+  .mat-mdc-chip.mat-mdc-standard-chip.mat-mdc-chip-selected,
+  .mat-mdc-chip.mat-mdc-standard-chip.mat-chip-selected {
+    &.mat-primary {
+      @include mat-chips-theme-color($primary);
+    }
+
+    &.mat-warn {
+      @include mat-chips-theme-color($warn);
+    }
+
+    &.mat-accent {
+      @include mat-chips-theme-color($accent);
+    }
+
+    &.mat-success {
+      @include mat-chips-theme-color($success);
+    }
+
+    &.mat-info {
+      @include mat-chips-theme-color($info);
+    }
+  }
+}
+
+@include mat-chips-theme($ama-chip-theme);
+
+/***********************************/
+/**           Buttons            **/
+/**********************************/
+
+$ama-button-theme: ama-light-theme(
+  $ama-primary,
+  $ama-accent,
+  $ama-warn,
+  $ama-success,
+  $ama-info,
+  $ama-primary-light
+);
+
+@mixin _mat-button-theme-property($theme, $property, $hue) {
+  $success: map.get($theme, success);
+  $info: map.get($theme, info);
+  $background: map.get($theme, background);
+  $foreground: map.get($theme, foreground);
+
+  &.mat-success {
+    #{$property}: mat-color($success, $hue);
+    border-color: mat-color($success, $hue) !important;
+  }
+  &.mat-info {
+    #{$property}: mat-color($info, $hue);
+    border-color: mat-color($info, $hue) !important;
+  }
+
+  &.mat-success,
+  &.mat-info {
+    &[disabled] {
+      $palette: $background;
+
+      @if $property == "color" {
+        $palette: $foreground;
+      }
+
+      #{$property}: mat-color($palette, disabled-button);
+    }
+  }
+}
+
+@mixin _mat-button-theme-extra-colors($theme) {
+  .mat-mdc-button,
+  .mat-mdc-icon-button,
+  .mat-mdc-outlined-button {
+    @include _mat-button-theme-property($theme, color, default);
+  }
+
+  .mat-mdc-unelevated-button,
+  .mat-mdc-raised-button,
+  .mat-mdc-fab,
+  .mat-mdc-mini-fab {
+    @include _mat-button-theme-property($theme, background-color, default);
+
+    &.mat-success {
+      color: mat-color(map.get($theme, success), default-contrast);
+    }
+
+    &.mat-info {
+      color: mat-color(map.get($theme, info), default-contrast);
+    }
+  }
+}
+
+@mixin _mat-button-theme-extra-color-variables($theme) {
+  $success: map.get($theme, success);
+  $info: map.get($theme, info);
+
+  .mat-mdc-button {
+    &.mat-success {
+      --mat-button-text-label-text-color: #{mat-color($success)};
+      --mat-button-text-state-layer-color: #{mat-color($success)};
+    }
+
+    &.mat-info {
+      --mat-button-text-label-text-color: #{mat-color($info)};
+      --mat-button-text-state-layer-color: #{mat-color($info)};
+    }
+  }
+
+  .mat-mdc-outlined-button {
+    &.mat-success {
+      --mat-button-outlined-label-text-color: #{mat-color($success)};
+      --mat-button-outlined-outline-color: #{mat-color($success)};
+      --mat-button-outlined-state-layer-color: #{mat-color($success)};
+    }
+
+    &.mat-info {
+      --mat-button-outlined-label-text-color: #{mat-color($info)};
+      --mat-button-outlined-outline-color: #{mat-color($info)};
+      --mat-button-outlined-state-layer-color: #{mat-color($info)};
+    }
+  }
+
+  .mat-mdc-unelevated-button {
+    &.mat-success {
+      --mat-button-filled-container-color: #{mat-color($success)};
+      --mat-button-filled-label-text-color: #{mat-color(
+          $success,
+          default-contrast
+        )};
+      --mat-button-filled-state-layer-color: #{mat-color(
+          $success,
+          default-contrast
+        )};
+    }
+
+    &.mat-info {
+      --mat-button-filled-container-color: #{mat-color($info)};
+      --mat-button-filled-label-text-color: #{mat-color($info, default-contrast)};
+      --mat-button-filled-state-layer-color: #{mat-color($info, default-contrast)};
+    }
+  }
+
+  .mat-mdc-raised-button {
+    &.mat-success {
+      --mat-button-protected-container-color: #{mat-color($success)};
+      --mat-button-protected-label-text-color: #{mat-color(
+          $success,
+          default-contrast
+        )};
+      --mat-button-protected-state-layer-color: #{mat-color(
+          $success,
+          default-contrast
+        )};
+    }
+
+    &.mat-info {
+      --mat-button-protected-container-color: #{mat-color($info)};
+      --mat-button-protected-label-text-color: #{mat-color(
+          $info,
+          default-contrast
+        )};
+      --mat-button-protected-state-layer-color: #{mat-color(
+          $info,
+          default-contrast
+        )};
+    }
+  }
+
+  .mat-mdc-fab {
+    &.mat-success {
+      --mat-fab-container-color: #{mat-color($success)};
+      --mat-fab-foreground-color: #{mat-color($success, default-contrast)};
+      --mat-fab-state-layer-color: #{mat-color($success, default-contrast)};
+    }
+
+    &.mat-info {
+      --mat-fab-container-color: #{mat-color($info)};
+      --mat-fab-foreground-color: #{mat-color($info, default-contrast)};
+      --mat-fab-state-layer-color: #{mat-color($info, default-contrast)};
+    }
+  }
+
+  .mat-mdc-mini-fab {
+    &.mat-success {
+      --mat-fab-small-container-color: #{mat-color($success)};
+      --mat-fab-small-foreground-color: #{mat-color($success, default-contrast)};
+      --mat-fab-small-state-layer-color: #{mat-color(
+          $success,
+          default-contrast
+        )};
+    }
+
+    &.mat-info {
+      --mat-fab-small-container-color: #{mat-color($info)};
+      --mat-fab-small-foreground-color: #{mat-color($info, default-contrast)};
+      --mat-fab-small-state-layer-color: #{mat-color($info, default-contrast)};
+    }
+  }
+}
+
+@include _mat-button-theme-extra-colors($ama-button-theme);
+@include _mat-button-theme-extra-color-variables($ama-button-theme);
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
+
+@include notification;
+@include typography;
+@include scrollbar();
+@include mat-form-field();
+@include calendar();
+@include full-calendar;
+@include blueTheme();
+@include pinkTheme();
+@include greenTheme();
+@include darkMode();
+@include mat-tab-label;
+@include mat-card;
+
+.mat-select-panel .mat-mdc-option.mat-selected:not(.mat-mdc-option-multiple),
+.mat-option:hover:not(.mat-option-disabled) {
+  background-color: $blue-white;
+}
+
+.mat-mdc-select-panel {
+  & .mat-mdc-option {
+    font-size: 16px !important;
+  }
+}
+
+.mat-mdc-menu-panel.settings-theme-menu {
+  margin-right: 64px;
+  margin-top: -55px;
+}
+
+.mat-mdc-menu-panel.notification-menu {
+  --mat-menu-item-label-text-color: #{$grey};
+
+  .notification-menu__button {
+    color: $grey;
+  }
+
+  .notification-menu__icon_yellow {
+    color: $yellow;
+  }
+
+  .notification-menu__icon_green {
+    color: $green;
+  }
+
+  .notification-menu__icon_pink {
+    color: $pink;
+  }
+
+  .notification-menu__icon_blue {
+    color: $blue;
+  }
+}
+
+.mat-mdc-menu-panel.add-section-menu-panel {
+  background-color: $light-blue;
+  overflow: hidden;
+
+  .mat-mdc-menu-content {
+    background-color: $light-blue;
+    padding: 0;
+  }
+}
+
+.chat-dialog-panel .mat-mdc-dialog-container {
+  padding: 0;
+}
+
+.chat-dialog-panel .mat-mdc-dialog-surface {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.ng-select .ng-select-container {
+  min-width: 150px;
+  min-height: 40.5px;
+}
diff --git a/src/environments/environment.backend.ts b/src/environments/environment.backend.ts
new file mode 100644
index 0000000..7138910
--- /dev/null
+++ b/src/environments/environment.backend.ts
@@ -0,0 +1,5 @@
+export const environment = {
+  production: true,
+  hmr: false,
+  backend: true
+};
diff --git a/src/environments/environment.hmr.ts b/src/environments/environment.hmr.ts
new file mode 100644
index 0000000..7bf496f
--- /dev/null
+++ b/src/environments/environment.hmr.ts
@@ -0,0 +1,5 @@
+export const environment = {
+  production: false,
+  hmr: true,
+  backend: false
+};
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000..6125cd0
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,5 @@
+export const environment = {
+  production: true,
+  hmr: false,
+  backend: true,
+};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000..0f1eadc
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,18 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+  hmr: false,
+  backend: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..6e56bea
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular Material Admin</title>
+    <base href="./" />
+    <meta name="referrer" content="no-referrer-when-downgrade" />
+    <meta
+      name="description"
+      content="Angular Material Admin"
+    />
+    <meta
+      name="keywords"
+      content="angular material admin, angular material dashboard, angular material, material template, angular template."
+    />
+    <meta name="author" content="Flatlogic LLC" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="./assets/favicon.png" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="mat-typography">
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..ee2d391
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,13 @@
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule, { applicationProviders: [provideZoneChangeDetection()] })
+  .catch((err) => console.error(err));
diff --git a/src/polyfills.ts b/src/polyfills.ts
new file mode 100644
index 0000000..7338712
--- /dev/null
+++ b/src/polyfills.ts
@@ -0,0 +1,62 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js'; // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..e257593
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": ["node"]
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..ec97444
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "es2020",
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "skipLibCheck": true,
+    "target": "ES2022",
+    "useDefineForClassFields": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUncheckedIndexedAccess": true,
+    "noPropertyAccessFromIndexSignature": true
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true
+  }
+}
diff --git a/tsconfig.spec.json b/tsconfig.spec.json
new file mode 100644
index 0000000..8d5a040
--- /dev/null
+++ b/tsconfig.spec.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "module": "es2020",
+    "moduleResolution": "bundler",
+    "types": ["jest", "node"],
+    "esModuleInterop": true
+  },
+  "files": ["setup-jest.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}