From ad32f51852e637dbe45d7dc1a27cf1e7e1edb18a Mon Sep 17 00:00:00 2001
From: Sahitya Buddharaju <148156994+bsahitya@users.noreply.github.com>
Date: Wed, 18 Sep 2024 12:44:51 -0500
Subject: [PATCH] feat(email-templates): library and app for email generation
 (#2243)

---
 apps/email-generator/.eslintrc.json           |   36 +
 apps/email-generator/jest.config.ts           |   27 +
 apps/email-generator/monaco-webpack.config.js |   32 +
 apps/email-generator/project.json             |   93 ++
 .../src/app/app.component.html                |   27 +
 .../src/app/app.component.scss                |   44 +
 apps/email-generator/src/app/app.component.ts |   68 +
 apps/email-generator/src/app/app.config.ts    |    7 +
 apps/email-generator/src/app/app.routes.ts    |    3 +
 .../src/app/editor/editor.component.html      |   24 +
 .../src/app/editor/editor.component.scss      |   56 +
 .../src/app/editor/editor.component.ts        |   66 +
 .../src/app/pipes/sentence-case.pipe.ts       |   13 +
 .../src/app/preview/preview.component.html    |   15 +
 .../src/app/preview/preview.component.scss    |    8 +
 .../src/app/preview/preview.component.ts      |   40 +
 .../app/side-sheet/side-sheet.component.html  |   15 +
 .../app/side-sheet/side-sheet.component.scss  |   40 +
 .../app/side-sheet/side-sheet.component.ts    |   18 +
 .../app/tree-list/tree-list.component.html    |   39 +
 .../app/tree-list/tree-list.component.scss    |   63 +
 .../src/app/tree-list/tree-list.component.ts  |   41 +
 apps/email-generator/src/favicon.ico          |  Bin 0 -> 15086 bytes
 apps/email-generator/src/index.html           |   17 +
 apps/email-generator/src/main.ts              |    7 +
 apps/email-generator/src/styles.scss          |   31 +
 apps/email-generator/src/test-setup.ts        |    1 +
 apps/email-generator/src/types.d.ts           |    9 +
 apps/email-generator/tsconfig.app.json        |   10 +
 apps/email-generator/tsconfig.json            |   28 +
 apps/email-generator/tsconfig.spec.json       |   10 +
 libs/email-templates/.eslintrc.json           |   30 +
 libs/email-templates/README.md                |   84 +
 libs/email-templates/package.json             |   20 +
 libs/email-templates/postcss.config.js        |   19 +
 libs/email-templates/project.json             |   37 +
 libs/email-templates/src/email-templates.ts   |   41 +
 libs/email-templates/src/index.ts             |    1 +
 .../customer/welcomeLetter.mjml               |  167 ++
 .../mjml-templates/marketing/workshop.mjml    |  250 +++
 .../email-templates/src/styles/_generated.css | 1414 +++++++++++++++++
 .../src/styles/mjmlStyles.mjml                |  138 ++
 libs/email-templates/src/styles/styles.scss   |  117 ++
 libs/email-templates/src/utils/mjml-utils.ts  |   15 +
 libs/email-templates/src/utils/style-utils.ts |   66 +
 libs/email-templates/tsconfig.json            |   23 +
 libs/email-templates/tsconfig.lib.json        |   10 +
 libs/email-templates/tsconfig.spec.json       |   26 +
 libs/email-templates/vite.config.ts           |   61 +
 nx.json                                       |    9 +
 package-lock.json                             | 1111 ++++++++++++-
 package.json                                  |    7 +
 tsconfig.base.json                            |    1 +
 53 files changed, 4488 insertions(+), 47 deletions(-)
 create mode 100644 apps/email-generator/.eslintrc.json
 create mode 100644 apps/email-generator/jest.config.ts
 create mode 100644 apps/email-generator/monaco-webpack.config.js
 create mode 100644 apps/email-generator/project.json
 create mode 100644 apps/email-generator/src/app/app.component.html
 create mode 100644 apps/email-generator/src/app/app.component.scss
 create mode 100644 apps/email-generator/src/app/app.component.ts
 create mode 100644 apps/email-generator/src/app/app.config.ts
 create mode 100644 apps/email-generator/src/app/app.routes.ts
 create mode 100644 apps/email-generator/src/app/editor/editor.component.html
 create mode 100644 apps/email-generator/src/app/editor/editor.component.scss
 create mode 100644 apps/email-generator/src/app/editor/editor.component.ts
 create mode 100644 apps/email-generator/src/app/pipes/sentence-case.pipe.ts
 create mode 100644 apps/email-generator/src/app/preview/preview.component.html
 create mode 100644 apps/email-generator/src/app/preview/preview.component.scss
 create mode 100644 apps/email-generator/src/app/preview/preview.component.ts
 create mode 100644 apps/email-generator/src/app/side-sheet/side-sheet.component.html
 create mode 100644 apps/email-generator/src/app/side-sheet/side-sheet.component.scss
 create mode 100644 apps/email-generator/src/app/side-sheet/side-sheet.component.ts
 create mode 100644 apps/email-generator/src/app/tree-list/tree-list.component.html
 create mode 100644 apps/email-generator/src/app/tree-list/tree-list.component.scss
 create mode 100644 apps/email-generator/src/app/tree-list/tree-list.component.ts
 create mode 100644 apps/email-generator/src/favicon.ico
 create mode 100644 apps/email-generator/src/index.html
 create mode 100644 apps/email-generator/src/main.ts
 create mode 100644 apps/email-generator/src/styles.scss
 create mode 100644 apps/email-generator/src/test-setup.ts
 create mode 100644 apps/email-generator/src/types.d.ts
 create mode 100644 apps/email-generator/tsconfig.app.json
 create mode 100644 apps/email-generator/tsconfig.json
 create mode 100644 apps/email-generator/tsconfig.spec.json
 create mode 100644 libs/email-templates/.eslintrc.json
 create mode 100644 libs/email-templates/README.md
 create mode 100644 libs/email-templates/package.json
 create mode 100644 libs/email-templates/postcss.config.js
 create mode 100644 libs/email-templates/project.json
 create mode 100644 libs/email-templates/src/email-templates.ts
 create mode 100644 libs/email-templates/src/index.ts
 create mode 100644 libs/email-templates/src/mjml-templates/customer/welcomeLetter.mjml
 create mode 100644 libs/email-templates/src/mjml-templates/marketing/workshop.mjml
 create mode 100644 libs/email-templates/src/styles/_generated.css
 create mode 100644 libs/email-templates/src/styles/mjmlStyles.mjml
 create mode 100644 libs/email-templates/src/styles/styles.scss
 create mode 100644 libs/email-templates/src/utils/mjml-utils.ts
 create mode 100644 libs/email-templates/src/utils/style-utils.ts
 create mode 100644 libs/email-templates/tsconfig.json
 create mode 100644 libs/email-templates/tsconfig.lib.json
 create mode 100644 libs/email-templates/tsconfig.spec.json
 create mode 100644 libs/email-templates/vite.config.ts

diff --git a/apps/email-generator/.eslintrc.json b/apps/email-generator/.eslintrc.json
new file mode 100644
index 0000000000..7eef2ce74e
--- /dev/null
+++ b/apps/email-generator/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/email-generator/jest.config.ts b/apps/email-generator/jest.config.ts
new file mode 100644
index 0000000000..f1a5de1414
--- /dev/null
+++ b/apps/email-generator/jest.config.ts
@@ -0,0 +1,27 @@
+/* eslint-disable */
+export default {
+  displayName: 'email-generator',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../coverage/apps/email-generator',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!.*\\.mjs$)',
+    'node_modules/(?!(monaco-editor)/)',
+  ],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+  passWithNoTests: true,
+};
diff --git a/apps/email-generator/monaco-webpack.config.js b/apps/email-generator/monaco-webpack.config.js
new file mode 100644
index 0000000000..ef57c6dfb1
--- /dev/null
+++ b/apps/email-generator/monaco-webpack.config.js
@@ -0,0 +1,32 @@
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        resourceQuery: /raw/, // This will only match .css?raw
+        use: 'raw-loader',
+      },
+      {
+        test: /\.mjml$/,
+        resourceQuery: /raw/, // This will only match .mjml?raw
+        use: 'raw-loader',
+      },
+      {
+        test: /\.css$/,
+        include: [/node_modules\/monaco-editor/],
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.ttf$/,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  plugins: [
+    new MonacoWebpackPlugin({
+      languages: ['css', 'html'],
+    }),
+  ],
+};
diff --git a/apps/email-generator/project.json b/apps/email-generator/project.json
new file mode 100644
index 0000000000..cc7c0f8051
--- /dev/null
+++ b/apps/email-generator/project.json
@@ -0,0 +1,93 @@
+{
+  "name": "email-generator",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/email-generator/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular-builders/custom-webpack:browser",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "customWebpackConfig": {
+          "path": "apps/email-generator/monaco-webpack.config.js",
+          "mergeRules": {
+            "module.rules": "prepend"
+          }
+        },
+        "allowedCommonJsDependencies": [
+          "monaco-editor",
+          "@covalent/email-templates"
+        ],
+        "outputPath": "dist/apps/email-generator",
+        "index": "apps/email-generator/src/index.html",
+        "main": "apps/email-generator/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/email-generator/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/email-generator/src/favicon.ico",
+          "apps/email-generator/src/assets"
+        ],
+        "styles": ["apps/email-generator/src/styles.scss"],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "5mb",
+              "maximumError": "6mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "vendorChunk": true,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "namedChunks": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-builders/custom-webpack:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "email-generator:build:production"
+        },
+        "development": {
+          "buildTarget": "email-generator:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/email-generator/jest.config.ts"
+      }
+    },
+    "serve-static": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "email-generator:build"
+      }
+    }
+  }
+}
diff --git a/apps/email-generator/src/app/app.component.html b/apps/email-generator/src/app/app.component.html
new file mode 100644
index 0000000000..5267ed9cd6
--- /dev/null
+++ b/apps/email-generator/src/app/app.component.html
@@ -0,0 +1,27 @@
+<div class="app">
+  <div class="title">
+    <span
+      class="material-symbols-outlined menu-icon"
+      (click)="toggleSideSheet()"
+    >
+      menu
+    </span>
+    <img
+      src="https://cdn.jsdelivr.net/gh/bsahitya/wysiwyg-email-editor/public/images/teradata.svg"
+      alt=""
+    />
+    <h2>Email generator</h2>
+  </div>
+  <app-editor [value]="selectedTemplate"></app-editor>
+</div>
+<app-side-sheet
+  [isOpen]="isSideSheetOpen"
+  (closeSheet)="toggleSideSheet()"
+  title="Templates"
+>
+  <app-tree-list
+    #template
+    [nodes]="templateNodes"
+    (itemClick)="selectTemplate($event)"
+  ></app-tree-list>
+</app-side-sheet>
diff --git a/apps/email-generator/src/app/app.component.scss b/apps/email-generator/src/app/app.component.scss
new file mode 100644
index 0000000000..c55549a632
--- /dev/null
+++ b/apps/email-generator/src/app/app.component.scss
@@ -0,0 +1,44 @@
+.app {
+  background-color: var(--cv-light-background);
+}
+
+.title {
+  align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem;
+}
+
+.title h2 {
+  font-weight: 500;
+  margin: 0.25rem 0 0 0.25rem;
+}
+
+.title img {
+  width: 65px;
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: 600;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+}
+
+.menu-icon {
+  cursor: pointer;
+  padding: 5px;
+}
+
+.menu-icon:hover {
+  background-color: var(--cv-light-secondary);
+  border-radius: 50%;
+  color: var(--cv-light-on-secondary);
+}
diff --git a/apps/email-generator/src/app/app.component.ts b/apps/email-generator/src/app/app.component.ts
new file mode 100644
index 0000000000..c5f6942dde
--- /dev/null
+++ b/apps/email-generator/src/app/app.component.ts
@@ -0,0 +1,68 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { EditorComponent } from './editor/editor.component';
+import {
+  TemplateNode,
+  TreeListComponent,
+} from './tree-list/tree-list.component';
+import { CommonModule } from '@angular/common';
+import { SideSheetComponent } from './side-sheet/side-sheet.component';
+import { getEmailTemplates, EmailTemplate } from '@covalent/email-templates';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    EditorComponent,
+    TreeListComponent,
+    SideSheetComponent,
+  ],
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.scss',
+})
+export class AppComponent {
+  emailTemplates = getEmailTemplates();
+  isSideSheetOpen = false;
+  selectedTemplate = '';
+  templateNodes: TemplateNode[] = [];
+  title = 'Email Editor';
+
+  constructor() {
+    this.parseTemplates(this.emailTemplates);
+  }
+
+  parseTemplates(data: EmailTemplate[]): void {
+    this.templateNodes = [];
+    const categories: { [key: string]: TemplateNode } = {};
+
+    data.forEach((item) => {
+      if (!categories[item.category]) {
+        // Create a new category node if it doesn't exist
+        categories[item.category] = {
+          title: item.category,
+          templates: [],
+        };
+      }
+
+      // Add the individual template to the category's templates
+      categories[item.category].templates?.push({
+        title: item.name,
+        value: item.content,
+      });
+    });
+
+    // Convert the categories object into an array of TemplateNodes
+    this.templateNodes = Object.values(categories);
+    this.selectedTemplate = this.emailTemplates[0].content;
+  }
+
+  selectTemplate(template: string): void {
+    this.selectedTemplate = template;
+  }
+
+  toggleSideSheet(): void {
+    this.isSideSheetOpen = !this.isSideSheetOpen;
+  }
+}
diff --git a/apps/email-generator/src/app/app.config.ts b/apps/email-generator/src/app/app.config.ts
new file mode 100644
index 0000000000..ed404941f7
--- /dev/null
+++ b/apps/email-generator/src/app/app.config.ts
@@ -0,0 +1,7 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { appRoutes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(appRoutes)],
+};
diff --git a/apps/email-generator/src/app/app.routes.ts b/apps/email-generator/src/app/app.routes.ts
new file mode 100644
index 0000000000..8762dfe2c6
--- /dev/null
+++ b/apps/email-generator/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Route } from '@angular/router';
+
+export const appRoutes: Route[] = [];
diff --git a/apps/email-generator/src/app/editor/editor.component.html b/apps/email-generator/src/app/editor/editor.component.html
new file mode 100644
index 0000000000..8308265a7e
--- /dev/null
+++ b/apps/email-generator/src/app/editor/editor.component.html
@@ -0,0 +1,24 @@
+<div class="editor-container">
+  <div class="editor-left">
+    <div class="buttons">
+      <button (click)="formatCode()">FORMAT</button>
+      <button (click)="handleCopyClick('mjml')">COPY MJML</button>
+      <button (click)="handleCopyClick('html')">COPY HTML</button>
+    </div>
+    <td-code-editor
+      (editorInitialized)="handleEditorInitialisation($event)"
+      [style.height]="'calc(100vh - 125px)'"
+      language="html"
+      [editorOptions]="{
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+      }"
+      [theme]="'cv-light'"
+      [value]="value"
+      (editorValueChange)="handleValueChange()"
+    ></td-code-editor>
+  </div>
+  <div class="editor-right">
+    <app-preview [html]="htmlContent"></app-preview>
+  </div>
+</div>
diff --git a/apps/email-generator/src/app/editor/editor.component.scss b/apps/email-generator/src/app/editor/editor.component.scss
new file mode 100644
index 0000000000..1f3142ffd0
--- /dev/null
+++ b/apps/email-generator/src/app/editor/editor.component.scss
@@ -0,0 +1,56 @@
+.buttons {
+  background-color: var(--cv-light-surface-neutral);
+  border-bottom: 1px solid var(--cv-theme-light-colors-outline-variant);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+.buttons button {
+  background-color: var(--cv-light-surface-canvas);
+  border: 1px solid var(--cv-theme-light-colors-outline-variant);
+  border-radius: 8px;
+  box-shadow: none;
+  cursor: pointer;
+  font-family: Inter;
+  font-weight: 500;
+  padding: 0.5rem;
+  transition: background-color 15ms ease-in;
+}
+
+.buttons button:hover {
+  background-color: var(--cv-light-secondary);
+  color: var(--cv-light-on-secondary);
+}
+
+.editor-container {
+  display: flex;
+  height: calc(100vh - 72px);
+  box-sizing: border-box;
+}
+
+.editor-left {
+  flex: 1;
+  border: 1px solid var(--cv-theme-light-colors-outline-variant);
+  border-radius: 5px;
+  background-color: #f9f9f9;
+  box-sizing: border-box;
+  margin-left: 10px;
+}
+
+.editor-right {
+  flex: 1;
+  margin: 0 10px;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.preview-content {
+  border-radius: 5px;
+  border-top: 1px solid var(--cv-theme-light-colors-outline-variant);
+  padding: 10px;
+  overflow-y: auto;
+  height: 100%;
+}
diff --git a/apps/email-generator/src/app/editor/editor.component.ts b/apps/email-generator/src/app/editor/editor.component.ts
new file mode 100644
index 0000000000..d0e8e3aac2
--- /dev/null
+++ b/apps/email-generator/src/app/editor/editor.component.ts
@@ -0,0 +1,66 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CovalentCodeEditorModule } from '@covalent/code-editor';
+import { PreviewComponent } from '../preview/preview.component';
+import { editor } from 'monaco-editor';
+import { getHtmlTemplate } from '@covalent/email-templates';
+import * as prettier from 'prettier';
+import parserHtml from 'prettier/parser-html'; // Use 'html' parser while working with MJML
+
+@Component({
+  selector: 'app-editor',
+  standalone: true,
+  imports: [CommonModule, CovalentCodeEditorModule, PreviewComponent],
+  templateUrl: './editor.component.html',
+  styleUrl: './editor.component.scss',
+})
+export class EditorComponent {
+  @Input() mjml = '';
+  @Input() value = '';
+
+  editorInstance!: editor.IStandaloneCodeEditor;
+  htmlContent = '';
+
+  handleCopyClick(type = ''): void {
+    const value = this.editorInstance.getValue();
+    if (value) {
+      const content = type === 'mjml' ? value : getHtmlTemplate(value);
+      navigator.clipboard.writeText(content).then(
+        () => {
+          console.log('Copying to clipboard was successful!');
+        },
+        (err) => {
+          console.error('Could not copy text: ', err);
+        }
+      );
+    }
+  }
+
+  handleEditorInitialisation(
+    editorInstance: editor.IStandaloneCodeEditor
+  ): void {
+    this.editorInstance = editorInstance;
+    this.editorInstance?.setValue(this.value);
+  }
+
+  handleValueChange(): void {
+    if (this.editorInstance) {
+      this.htmlContent = getHtmlTemplate(this.editorInstance.getValue());
+    }
+  }
+
+  formatCode() {
+    if (this.editorInstance) {
+      const unformattedCode = this.editorInstance.getValue();
+      try {
+        const formattedCode = prettier.format(unformattedCode, {
+          parser: 'html', // Use 'html' parser for MJML
+          plugins: [parserHtml],
+        });
+        this.editorInstance.setValue(formattedCode);
+      } catch (error) {
+        console.error('Formatting error:', error);
+      }
+    }
+  }
+}
diff --git a/apps/email-generator/src/app/pipes/sentence-case.pipe.ts b/apps/email-generator/src/app/pipes/sentence-case.pipe.ts
new file mode 100644
index 0000000000..d6ed28c4ae
--- /dev/null
+++ b/apps/email-generator/src/app/pipes/sentence-case.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sentenceCase',
+  standalone: true,
+})
+export class SentenceCasePipe implements PipeTransform {
+  transform(value: string): string {
+    if (!value) return value;
+
+    return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+  }
+}
diff --git a/apps/email-generator/src/app/preview/preview.component.html b/apps/email-generator/src/app/preview/preview.component.html
new file mode 100644
index 0000000000..9cd2cc2ea0
--- /dev/null
+++ b/apps/email-generator/src/app/preview/preview.component.html
@@ -0,0 +1,15 @@
+<div class="preview-container">
+  <iframe
+    [hidden]="!html"
+    title="Mjml"
+    [style]="{
+          width: '100%',
+          height: '99.5%',
+          border: 'none',
+          boxSizing: 'border-box',
+        }"
+  ></iframe>
+  <ng-template *ngIf="!html">
+    <p>Loading preview...</p>
+  </ng-template>
+</div>
diff --git a/apps/email-generator/src/app/preview/preview.component.scss b/apps/email-generator/src/app/preview/preview.component.scss
new file mode 100644
index 0000000000..55c093f287
--- /dev/null
+++ b/apps/email-generator/src/app/preview/preview.component.scss
@@ -0,0 +1,8 @@
+.preview-container {
+  background-color: var(--cv-light-surface-canvas);
+  border: 1px solid var(--cv-theme-light-colors-outline-variant);
+  border-radius: 5px;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
diff --git a/apps/email-generator/src/app/preview/preview.component.ts b/apps/email-generator/src/app/preview/preview.component.ts
new file mode 100644
index 0000000000..e1ac8fd66e
--- /dev/null
+++ b/apps/email-generator/src/app/preview/preview.component.ts
@@ -0,0 +1,40 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SafeHtml } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-preview',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './preview.component.html',
+  styleUrl: './preview.component.scss',
+})
+export class PreviewComponent implements AfterViewInit, OnChanges {
+  @Input() html = '';
+
+  sanitizedHtml!: SafeHtml;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    this.updateIframeContent();
+  }
+
+  ngOnChanges(): void {
+    this.updateIframeContent();
+  }
+
+  private updateIframeContent() {
+    const iframe: HTMLIFrameElement =
+      this.elementRef.nativeElement.querySelector('iframe');
+    if (iframe) {
+      iframe.srcdoc = this.html as string;
+    }
+  }
+}
diff --git a/apps/email-generator/src/app/side-sheet/side-sheet.component.html b/apps/email-generator/src/app/side-sheet/side-sheet.component.html
new file mode 100644
index 0000000000..6696ae1088
--- /dev/null
+++ b/apps/email-generator/src/app/side-sheet/side-sheet.component.html
@@ -0,0 +1,15 @@
+<div class="side-sheet" [class.open]="isOpen">
+  <div class="side-sheet-content">
+    <div class="side-sheet-title">
+      <h3>{{ title }}</h3>
+      <span
+        class="material-symbols-outlined close-icon"
+        (click)="closeSideSheet()"
+      >
+        close
+      </span>
+    </div>
+    <ng-content></ng-content>
+    <!-- Placeholder for dynamic content -->
+  </div>
+</div>
diff --git a/apps/email-generator/src/app/side-sheet/side-sheet.component.scss b/apps/email-generator/src/app/side-sheet/side-sheet.component.scss
new file mode 100644
index 0000000000..bb604a7936
--- /dev/null
+++ b/apps/email-generator/src/app/side-sheet/side-sheet.component.scss
@@ -0,0 +1,40 @@
+/* SideSheet.css */
+.side-sheet {
+  position: fixed;
+  top: 0;
+  left: 0; /* Change from right: 0 to left: 0 */
+  height: 100%;
+  width: 300px;
+  max-width: 80%;
+  background-color: white;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3); /* Change the direction of the shadow */
+  transform: translateX(
+    -100%
+  ); /* Change from translateX(100%) to translateX(-100%) */
+  transition: transform 0.3s ease-in-out;
+  z-index: 1000;
+}
+
+.side-sheet.open {
+  transform: translateX(0);
+}
+
+.side-sheet-content {
+  padding: 0 1rem 1rem;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.side-sheet-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.side-sheet-title h3 {
+  font-weight: 500;
+}
+
+.close-icon {
+  cursor: pointer;
+}
diff --git a/apps/email-generator/src/app/side-sheet/side-sheet.component.ts b/apps/email-generator/src/app/side-sheet/side-sheet.component.ts
new file mode 100644
index 0000000000..522408145d
--- /dev/null
+++ b/apps/email-generator/src/app/side-sheet/side-sheet.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-side-sheet',
+  templateUrl: './side-sheet.component.html',
+  styleUrls: ['./side-sheet.component.scss'],
+  standalone: true,
+})
+export class SideSheetComponent {
+  @Input() isOpen = false; // Controls whether the side sheet is open or closed
+  @Input() title = ''; // The title of the side sheet
+  @Output() closeSheet = new EventEmitter<void>(); // Emits an event when the close button is clicked
+
+  // Function to handle closing the side sheet
+  closeSideSheet(): void {
+    this.closeSheet.emit();
+  }
+}
diff --git a/apps/email-generator/src/app/tree-list/tree-list.component.html b/apps/email-generator/src/app/tree-list/tree-list.component.html
new file mode 100644
index 0000000000..2403d27716
--- /dev/null
+++ b/apps/email-generator/src/app/tree-list/tree-list.component.html
@@ -0,0 +1,39 @@
+<ul>
+  <ng-container
+    *ngTemplateOutlet="treeListTemplate; context: { $implicit: nodes }"
+  ></ng-container>
+</ul>
+
+<ng-template #treeListTemplate let-nodes>
+  <ng-container *ngFor="let node of nodes">
+    <li>
+      <div class="tree-node" [ngClass]="{ active: activeNode === node.title }">
+        <button
+          *ngIf="node.templates"
+          class="chevron"
+          (click)="handleToggle(node.title)"
+        >
+          <span class="material-symbols-outlined">
+            {{ isNodeExpanded(node) ? 'keyboard_arrow_down' : 'chevron_right' }}
+          </span>
+        </button>
+        <span
+          class="tree-node-title"
+          (click)="node.value && handleClick(node.value, node.title)"
+        >
+          {{ node.title | sentenceCase }}
+        </span>
+      </div>
+      <ng-container *ngIf="node.templates && isNodeExpanded(node)">
+        <ul>
+          <ng-container
+            *ngTemplateOutlet="
+              treeListTemplate;
+              context: { $implicit: node.templates }
+            "
+          ></ng-container>
+        </ul>
+      </ng-container>
+    </li>
+  </ng-container>
+</ng-template>
diff --git a/apps/email-generator/src/app/tree-list/tree-list.component.scss b/apps/email-generator/src/app/tree-list/tree-list.component.scss
new file mode 100644
index 0000000000..95ad2e56da
--- /dev/null
+++ b/apps/email-generator/src/app/tree-list/tree-list.component.scss
@@ -0,0 +1,63 @@
+/* General List Styles */
+ul {
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+/* Node Styling */
+.tree-node {
+  display: flex;
+  align-items: center;
+  padding: 5px 0;
+  position: relative;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--cv-teradata-slate-900);
+  border-radius: 8px;
+  margin: 0.25rem 0;
+}
+
+.tree-node:hover {
+  background-color: #f5f5f5; /* Light hover background */
+}
+
+.tree-node.active {
+  font-weight: 600;
+  background-color: var(
+    --cv-light-surface-primary-highlight
+  ); /* Active background */
+}
+
+.tree-node-title {
+  flex: 1;
+}
+
+/* Chevron Button Styling */
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-right: 5px;
+  padding: 0;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s ease;
+}
+
+/* Span Styling for Tree Node Title */
+span {
+  cursor: pointer;
+}
+
+/* Child List Indentation */
+ul ul {
+  padding-left: 20px;
+  margin-left: 5px;
+}
+
+/* Child Node Styling */
+ul ul .tree-node {
+  padding-left: 10px;
+}
diff --git a/apps/email-generator/src/app/tree-list/tree-list.component.ts b/apps/email-generator/src/app/tree-list/tree-list.component.ts
new file mode 100644
index 0000000000..ba268c1f52
--- /dev/null
+++ b/apps/email-generator/src/app/tree-list/tree-list.component.ts
@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SentenceCasePipe } from '../pipes/sentence-case.pipe';
+
+export interface TemplateNode {
+  title: string;
+  value?: string;
+  templates?: TemplateNode[];
+}
+
+@Component({
+  selector: 'app-tree-list',
+  standalone: true,
+  imports: [CommonModule, SentenceCasePipe],
+  templateUrl: './tree-list.component.html',
+  styleUrl: './tree-list.component.scss',
+})
+export class TreeListComponent {
+  @Input() nodes: TemplateNode[] = [];
+  @Output() itemClick = new EventEmitter<string>();
+
+  activeNode = '';
+  expandedNodes: Record<string, boolean> = {};
+
+  handleToggle(title: string) {
+    this.expandedNodes[title] = !this.expandedNodes[title];
+  }
+
+  handleClick(value: string, title: string) {
+    this.activeNode = title;
+    this.itemClick.emit(value);
+  }
+
+  renderTree(nodes: TemplateNode[]): string[] {
+    return nodes.map((node) => node.title);
+  }
+
+  isNodeExpanded(node: TemplateNode): boolean {
+    return !!this.expandedNodes[node.title];
+  }
+}
diff --git a/apps/email-generator/src/favicon.ico b/apps/email-generator/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..1f738e886f7885be8b8fcb6a34e54939c3cb79d4
GIT binary patch
literal 15086
zcmdU$Ym64v8OLXLflY4<HdYYZy2eX@HfV1^gp`(ksWs`BerZzO#kLk}BO*xC)~>8t
zd%-qVQUgsBtwAHU5XHn>lw||;(x|j*FA*%eh*UAPET$j|yHEeWnK|#y&d$s`=iT>Z
zVUquzdFMRmJpc2Y>vPW8AZQ9&f(tGP6t)K&&JBV&K@haJ$G@ip!ESw<qLBD2CIrDx
zB``xWN)jv<_#QszL_t0OHg{T^FjrVA+$}sWye=FThGOu}x95cQ!qoz4+Um)rY+lWa
ztwp+L2-gZ*gg1p_f|Ufa`vuaj5N42PS^c%jNl&wIzOY7kRlvSwIp@id2YKBl%odt!
z<yVwW`JN_p344V+E@S;pInZ%h5f`60)oYXTn=fn?28FS5td<@fy~2ES`*2OmDvt?5
zhtNoy=amPY=+=nj|Fm@4B&A(092D|&H2V7h9N^+p0;R$3a6cq8nq#&6;jp~PqaGyR
zDNy!mc^|KMxO9}M1IaBA7zd6Qx3YTRw4kUAik~WMZ8Uea1q(VNc<SnreD2t)IL2P)
zld?9c$c20^F>4a935(4pebcNp2Jh;Fp)B$5`<B^x-#0sJx!FX?@~xy!xOHXKfxa{M
zdAA#<`@EHAm;KJ{)<@0mecJ4S=OaA0!|aZ2X499--j|x4akbg+x0~(zui5T5&2D_a
z>_gvC8OqxXj^`)Kpn0NM-<ZG4+M#004_<Dzazn&raL6*BeFx0WQTgEilg%SVjvO_+
zWL*^Jp?^)2IJ+_^-ArMRNBWRI?WFsDv-ggT<dpv9_)ogb?BN&Ev1Y%1%)2kZb!LJ;
zYd|mCW6OCrnC(9}nos(R<4+&C{fTs}*|NL6?GM)#@K?zCeM>F;Z;<WN&(T4%=lab4
z@Mp98o{7S>J!Yq06>*$>o!OH+&1g4=-Zk6!Y}7YgKl0!KXSm}>uom~SKV!@N>Z9rB
zo~O*FiYskvqS_1K-Q^F@)76*1e2du^e`a>d6<*^{C7+lx-0_8ce2;LfXj>B5G07jB
zUi>TBS>vek%mrnj{ec?n?(&86Qel0OuB<q8PLbW7-JN7_cJOf2C*YNpt^wchSMf=`
z^cC@+t3G`k`8!|xWaaPn2~Jl2Zja++<<EM^d%bo7wSTx%2lcamcQk&o9!tVkM@f0N
zFIE@+Z@&}GNgvRfZt{|0v}t|GJXVsEj~xA%F~}!PIOk-I|Hrg;cxkWMQ@hNbekH;)
z3ZM9!*(ZP0ka5-RN7jYE<vb0X*O+^mgZ<VIIrDE0eH&=ZybNcz5A3ym%Nu|4_&3P@
za1Qsd6?(0o^Z383_1pR<&3^Ha*)0zb<0koBXI`WBuX>ZNdLdjt$3B3U|B}ZaJI`4q
zp5KW2s#{|=Xgw7AFEM{F|FMYwaazBP@E<33hW<Ny`lagj1mJ&LOTvGT>wt5KQu`;4
z|Mr)M{lLTW1>YDj`yB13vFm?0&W3aP(f2N))Ov{d^wV8t3vV|2e2fckisoF8y_{0@
zEly4jZkhX6ltpozvGgS5UAoLL*+1QT*|asvZB@FdX}c$XD}I4csvXtHA=4Hm@`6+0
z{;eyA<T`{CZU4N}@v9bUul0mGzkpLU-pTmpj>`Gbc-8}FSIf0O>vewQ$`RKCZE4)j
z?|kj<xVv!D@cAicnu9{E{jY2~bTH1$*S_7D&QDz#2$dgWEAvAm$0q6-9l2*LNlw1+
zs>^2OJzL<cfO0UOl(lP~9C?rz>lfAlm3@6*er4rVjuz?R{s!yTEdpzCA0G%=?tGAz
zJ0LU2v#kDl%1N)=!^RiFpTj40`(oG@xP1bAZT2kj`R0;#tX$0cTeac}DmW4ZXYzX>
z2qqKu20;s9x9$-UqELT^2v-HcF~WsGpkzuI1WKla!(l(aTZ5pNP!>*y-F#OsO^1B0
z=hIDQ8G3s8p24f1@8X><k1MAux3hyx656F=r{36Z&W_Hm5{zse*`0e@?ZOv?$~~<q
z`ccE9Ho?3-OSnqdB<vL476xPR{<1(EGP5){dCjX?w3H8e=LzeCe&MK)H(t2!$n*(o
z1^nom`k&HG7gh`OXP38cNLuoko>jiQZ<3!QY!m7=j&3K<JblUUl3OHDm%e4KCQqJ=
zlDg9Gil^L-(CxU9ccvZm{R{z{JK4f8YY&%i?4{s`7UYAD5$!?0n+4iQQMxc+{3*^2
z*^A|TA8?NWo$vp)+1b~|zG5+l)tv1+`%5o<tZ=W4{HN*s^2)oSdk8)MFvHK@CS3H(
zNcV4ahRpo~?kIe0S!9cxGNEf8`o)7em%f@?c5M1l<@d;oW<x_Z>bX?+1U@C7`M{wl
z3Ym`IN`LWr<+@n+Ea~1|P5+NKj#SGTGy1^SZ;#6R_kEGfTmLg#^mFMi-f!rWPINO~
z=8kK$DeCoc?Nz&HN59!uWb@BlZ}wT?)bB<0f8mX0*KacW>aA)M)%WGmiSCU;uI;J!
zQ?E4p>mH}wtV=qQdvUJ4J72#_xs$rkUD)5r`y(nJ`}gj-=ANo`o77SCj&A0zT$u*z
zcXQ}?>38$Dm;Pn3{jrU!`yv|_#G&8Y{@496I_IZd0{TaRj-oiXZpoF&s(;3~zo<XZ
zCtiHjjPb{#%_nuy{;KxBbo+Pxz=dPz59lr)e=_<X=Qgj&2H@Yi!*%%`HI?6uKa7EW
zdG(iN|C=Aw9laH1=dO%!%6HWc3;J+Q-i-OP<m)j1u)a*zOXWRFe|Rs7vk2Ly#C%`L
zE2U#Cy2ClJVE#ovZJe`9&S5zVVGgdby*VzG`4|1-QMmqKF8Ra{qq&CphIIhEQswda
zy&9e9c8~I6y`8)MO3p1~)IDnbmEbUL>(2y-MY2QToLHmX$+K|%o#0S!{{x$6uDhMi
zbSU|8^S>OIcx=FjWPREv<gU{c=h{Cq$TFs|t{$@=EFNk9+pSyN{LMUuPrgZDJZDTT
zrPl@~>#}Q;X}@8W_8u0poxs*Yzji5lH8g;3Z6P=WRURit*c+$sS6<{v-snIVI?>HO
z1=|wsLS>(#3UigMRk%plAiO4EbHF>_h|@01=ttkD32TG{f~&K1NE|ZLk~#2O*eq1!
znRghE!Z3bM#3LK#p^*POA<yBoO2^uT`Mqt4d^)`|wzkN>OURLiw3O*B_Z^*Il8^DI
ze4?GN>rDS4-PhH+j5W#3AB>nENJH9tD`~|6zj5n7Bmd>jZP6O$YipuA<R2gHyODOU
zOV6Cgz4L$VmrwRW<ZJMa_~e~dCm*M+^c`fmug*R7%{!trRmOBzzoCv~`o~_1e6J5{
z4Uo{6ekc71{^;NJhS@vsneF+H*}9&>yG*35*w5*IMdjZmtd{Lr1Ll++E~Ks0A7!PU
zxu<&9pH$znTfuzp>Tg8*VNT}mJbpImm46<>_Cq_C%!u|&IjY#b(tce(i1Q#%@BWj>
hqgCm#N9q21M0>#f>e0PgF?F-wD&##b9$C_m_WwOFdaeKf

literal 0
HcmV?d00001

diff --git a/apps/email-generator/src/index.html b/apps/email-generator/src/index.html
new file mode 100644
index 0000000000..dd643435b9
--- /dev/null
+++ b/apps/email-generator/src/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Email generator</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,100,1,200"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
diff --git a/apps/email-generator/src/main.ts b/apps/email-generator/src/main.ts
new file mode 100644
index 0000000000..514c89a08e
--- /dev/null
+++ b/apps/email-generator/src/main.ts
@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);
diff --git a/apps/email-generator/src/styles.scss b/apps/email-generator/src/styles.scss
new file mode 100644
index 0000000000..295d95bb77
--- /dev/null
+++ b/apps/email-generator/src/styles.scss
@@ -0,0 +1,31 @@
+/* You can add global styles to this file, and also import other style files */
+@import '@covalent/tokens/index.css';
+@import 'monaco-editor/min/vs/editor/editor.main';
+
+body {
+  margin: 0;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.cdk-overlay-container {
+  overflow: auto;
+}
+
+.cdk-overlay-dark-backdrop {
+  position: fixed;
+  height: 100%;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+[class^='codicon-'],
+[class*='codicon-'] {
+  font-family: 'codicon' !important;
+}
diff --git a/apps/email-generator/src/test-setup.ts b/apps/email-generator/src/test-setup.ts
new file mode 100644
index 0000000000..1100b3e8a6
--- /dev/null
+++ b/apps/email-generator/src/test-setup.ts
@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';
diff --git a/apps/email-generator/src/types.d.ts b/apps/email-generator/src/types.d.ts
new file mode 100644
index 0000000000..11c35a08d5
--- /dev/null
+++ b/apps/email-generator/src/types.d.ts
@@ -0,0 +1,9 @@
+declare module '*.css?raw' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.mjml?raw' {
+  const content: string;
+  export default content;
+}
diff --git a/apps/email-generator/tsconfig.app.json b/apps/email-generator/tsconfig.app.json
new file mode 100644
index 0000000000..dea633df29
--- /dev/null
+++ b/apps/email-generator/tsconfig.app.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts", "src/types.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}
diff --git a/apps/email-generator/tsconfig.json b/apps/email-generator/tsconfig.json
new file mode 100644
index 0000000000..f9f7ff18d2
--- /dev/null
+++ b/apps/email-generator/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/apps/email-generator/tsconfig.spec.json b/apps/email-generator/tsconfig.spec.json
new file mode 100644
index 0000000000..fd74779fa3
--- /dev/null
+++ b/apps/email-generator/tsconfig.spec.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "echarts"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}
diff --git a/libs/email-templates/.eslintrc.json b/libs/email-templates/.eslintrc.json
new file mode 100644
index 0000000000..0dc93dd7cb
--- /dev/null
+++ b/libs/email-templates/.eslintrc.json
@@ -0,0 +1,30 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/vite.config.{js,ts,mjs,mts}"]
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/libs/email-templates/README.md b/libs/email-templates/README.md
new file mode 100644
index 0000000000..9a4ea223fd
--- /dev/null
+++ b/libs/email-templates/README.md
@@ -0,0 +1,84 @@
+# Covalent Email Templates
+
+Covalent email-templates is a library for managing and using predefined email templates and styles. It includes MJML templates and CSS styles, along with utility functions for converting MJML to HTML and injecting styles.
+
+## Getting Started
+
+### Installation
+
+Add @covalent/email-templates to your project using your preferred package manager:
+
+```bash
+# Using npm
+npm install --save @covalent/email-templates
+
+# Using yarn
+yarn add @covalent/email-templates
+```
+
+### Usage
+
+Import and use the library to access email templates, CSS styles, and MJML styles:
+
+```typescript
+import { getEmailTemplates, EmailTemplate, getCssStyles, getMjmlStyles, getHtmlTemplate } from '@covalent/email-templates';
+
+// Retrieve a list of predefined email templates
+const emailTemplates: EmailTemplate[] = getEmailTemplates();
+
+// Access CSS styles as a string
+const cssStyles: string = getCssStyles();
+
+// Access MJML styles as a string
+const mjmlStyles: string = getMjmlStyles();
+
+// Convert MJML content to HTML
+const htmlTemplate: string = getHtmlTemplate(emailTemplates[0].content);
+```
+
+`EmailTemplate` **Interface**
+The EmailTemplate interface defines the structure of an email template:
+
+- `category`: The category of the email template (e.g., 'marketing' or 'customer')
+- `content`: The MJML content of the email template
+- `name`: The name of the email template
+
+### Building the Library
+
+#### Updating styles
+
+1. If any changes were made to the `styles.scss` file, run the following command to rebuild the CSS:
+
+```bash
+nx run email-templates:build-styles
+```
+
+This will update the `_generated.css` file.
+
+2. Ensure both `styles.scss` and the updated `_generated.css` file are committed together.
+
+3. Once the changes are committed, you can proceed to build the library as usual.
+
+To build the library and generate publishable assets using webpack, run:
+
+```bash
+nx build email-templates
+```
+
+### Linting
+
+Ensure code quality by running linting:
+
+For TypeScript and JavaScript linting, use ESLint:
+
+```bash
+nx lint email-templates
+```
+
+For SCSS linting, use Stylelint:
+
+```bash
+nx scsslint email-templates
+```
+
+`
diff --git a/libs/email-templates/package.json b/libs/email-templates/package.json
new file mode 100644
index 0000000000..37c006fa9e
--- /dev/null
+++ b/libs/email-templates/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@covalent/email-templates",
+  "version": "0.0.0-COVALENT",
+  "main": "./index.js",
+  "module": "./index.mjs",
+  "typings": "./index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teradata/covalent.git"
+  },
+  "bugs": {
+    "url": "https://github.com/teradata/covalent/issues"
+  },
+  "dependencies": {
+    "tslib": "0.0.0-TSLIB",
+    "mjml-browser": "^4.15.3"
+  },
+  "license": "MIT",
+  "author": "Teradata UX"
+}
diff --git a/libs/email-templates/postcss.config.js b/libs/email-templates/postcss.config.js
new file mode 100644
index 0000000000..16297d87e1
--- /dev/null
+++ b/libs/email-templates/postcss.config.js
@@ -0,0 +1,19 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-custom-properties')({
+      preserve: false, // Set to false to replace the variables with their values
+    }),
+    require('autoprefixer'),
+    // Custom plugin to add comment
+    {
+      postcssPlugin: 'add-comment',
+      Once(root, { Comment }) {
+        const comment = new Comment({ text: 'This is a generated CSS file' });
+        root.prepend(comment);
+      },
+    },
+  ],
+};
+
+module.exports.postcss = true;
diff --git a/libs/email-templates/project.json b/libs/email-templates/project.json
new file mode 100644
index 0000000000..4d1a979c62
--- /dev/null
+++ b/libs/email-templates/project.json
@@ -0,0 +1,37 @@
+{
+  "name": "email-templates",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/email-templates/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/email-templates"
+      }
+    },
+    "build-styles": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "postcss libs/email-templates/src/styles/styles.scss -o libs/email-templates/src/styles/_generated.css"
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "../../coverage/libs/email-templates"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "lintFilePatterns": ["libs/email-templates/**/*.ts"]
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/libs/email-templates/src/email-templates.ts b/libs/email-templates/src/email-templates.ts
new file mode 100644
index 0000000000..2fda72757b
--- /dev/null
+++ b/libs/email-templates/src/email-templates.ts
@@ -0,0 +1,41 @@
+// Import MJML templates and CSS styles as strings
+import welcomeLetter from './mjml-templates/customer/welcomeLetter.mjml?raw';
+import workshop from './mjml-templates/marketing/workshop.mjml?raw';
+import cssStyles from './styles/_generated.css?raw';
+import mjmlStyles from './styles/mjmlStyles.mjml?raw';
+import { convertMjmlToHtml } from './utils/mjml-utils';
+import {
+  injectPredefinedStyles,
+  stripFirstRootSection,
+} from './utils/style-utils';
+
+// Define the structure of an email template
+export interface EmailTemplate {
+  category: 'marketing' | 'customer';
+  content: string; // Content of the email template (MJML)
+  name: string; // Name of the email template
+}
+
+// Function to get CSS styles as a string
+export const getCssStyles = (): string => stripFirstRootSection(cssStyles);
+
+// Function to get a list of email templates
+export const getEmailTemplates = (): EmailTemplate[] => [
+  {
+    category: 'customer',
+    content: injectPredefinedStyles(welcomeLetter, getCssStyles(), mjmlStyles), // The MJML content of the email template
+    name: 'Welcome letter', // The name of the email template
+  },
+  {
+    category: 'marketing',
+    content: injectPredefinedStyles(workshop, getCssStyles(), mjmlStyles), // The MJML content of the email template
+    name: 'Workshop', // The name of the email template
+  },
+];
+
+// Function to get MJML styles as a string
+export const getMjmlStyles = (): string => mjmlStyles;
+
+// Function to convert MJML to HTML
+export const getHtmlTemplate = (mjml: string): string =>
+  convertMjmlToHtml(mjml);
diff --git a/libs/email-templates/src/index.ts b/libs/email-templates/src/index.ts
new file mode 100644
index 0000000000..95d3dadc21
--- /dev/null
+++ b/libs/email-templates/src/index.ts
@@ -0,0 +1 @@
+export * from './email-templates';
diff --git a/libs/email-templates/src/mjml-templates/customer/welcomeLetter.mjml b/libs/email-templates/src/mjml-templates/customer/welcomeLetter.mjml
new file mode 100644
index 0000000000..23bc2b8d8d
--- /dev/null
+++ b/libs/email-templates/src/mjml-templates/customer/welcomeLetter.mjml
@@ -0,0 +1,167 @@
+<mjml>
+  <mj-head>
+    <mj-raw>
+      <meta name="color-scheme" content="light" />
+      <meta name="supported-color-schemes" content="light" />
+    </mj-raw>
+  </mj-head>
+  <mj-body css-class="body bg-white">
+    <mj-section mj-class="p-0">
+      <mj-column width="100%">
+        <mj-image
+          mj-class="p-0"
+          src="https://cdn.jsdelivr.net/gh/bsahitya/wysiwyg-email-editor/public/images/hero-image.png"
+          alt=""
+        />
+      </mj-column>
+    </mj-section>
+    <mj-wrapper mj-class="p-0 pl-1_75 pr-1_75">
+      <mj-section mj-class="pt-1_25 pb-2">
+        <mj-column width="100%">
+          <mj-text
+            mj-class="section-title pb-1"
+            css-class="section-title color-slate-900 title"
+          >
+            Welcome to VantageCloud Lake
+          </mj-text>
+        </mj-column>
+        <mj-column width="100%">
+          <mj-text css-class="color-slate-900">
+            Hello [user], <br /><br />Thank you for joining VantageCloud Lake.
+            Your account is now ready for you to use. As an organization admin,
+            you also have an account on the Support Portal. The link to the
+            Support Portal is located under 'Resources to get you started' at
+            the bottom of this email.
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section mj-class="pt-1_5" css-class="border-top">
+        <mj-column>
+          <mj-text mj-class="section-title pb-0_5" css-class="section-title">
+            New to Teradata?
+          </mj-text>
+          <mj-text>
+            You first need to verify your email and create your password.
+          </mj-text>
+          <mj-button
+            mj-class="button pt-1_5"
+            css-class="cta-button"
+            align="left"
+            href="https://www.teradata.com/"
+          >
+            Verify email and create your password →
+          </mj-button>
+
+          <mj-text mj-class="eyebrow" css-class="color-gray-500">
+            Existing Teradata user?
+            <a href="https://www.teradata.com/" alt="">Login</a>
+          </mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section mj-class="pb-2" css-class="border-bottom">
+        <mj-column width="100%">
+          <mj-text mj-class="title pb-0_75" css-class="title">
+            Your account information
+          </mj-text>
+        </mj-column>
+        <mj-column width="40%">
+          <mj-text mj-class="bold">Account name: </mj-text>
+        </mj-column>
+        <mj-column width="60%">
+          <mj-text>CREDIT SAISON </mj-text>
+        </mj-column>
+        <mj-column width="40%">
+          <mj-text mj-class="bold pt-0_25">Console URL: </mj-text>
+        </mj-column>
+        <mj-column width="60%">
+          <mj-text mj-class="pt-0_25"
+            ><a href="https://trcs.innovationlabs.teradata.com/" alt=""
+              >https://trcs.innovationlabs.teradata.com/</a
+            ></mj-text
+          >
+        </mj-column>
+        <mj-column width="40%">
+          <mj-text mj-class="bold pt-0_25">Username: </mj-text>
+        </mj-column>
+        <mj-column width="60%">
+          <mj-text mj-class="pt-0_25">name@gmail.com</mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section mj-class="pt-2">
+        <mj-column width="100%">
+          <mj-text mj-class="section-title" css-class="section-title">
+            Resources to get you started
+          </mj-text>
+        </mj-column>
+        <mj-column width="100%">
+          <mj-text mj-class="bold" css-class="list">
+            <ul>
+              <li>
+                <a href="https://docs.teradata.com/p/VantageCloud/Lake" alt=""
+                  >VantageCloud Lake Documentation</a
+                >
+              </li>
+              <li>
+                <a href="https://support.teradata.com/csm" alt=""
+                  >Support Portal</a
+                >
+              </li>
+            </ul>
+          </mj-text>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>
+    <mj-section mj-class="p-0">
+      <mj-column mj-class="help" css-class="bg-primary">
+        <mj-text mj-class="title color-white" css-class="color-white"
+          >Need help?</mj-text
+        >
+        <mj-text mj-class="pt-1 help-text" css-class="color-white">
+          After logging in, access the in-product help.
+        </mj-text>
+        <mj-text mj-class="pt-1_25 help-text" css-class="color-white">
+          Contact our
+          <a href="https://www.teradata.com/" alt="" mj-class="bold"
+            >Teradata Sales team</a
+          >
+          throughout the duration of your trail if you have any questions.
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section mj-class="p-0">
+      <mj-column mj-class="help" css-class="bg-gray-25" width="100%">
+        <mj-text
+          mj-class="footer-info"
+          css-class="color-gray-500"
+          align="center"
+        >
+          View our global
+          <a href="https://www.teradata.com/privacy" alt="">privacy policy</a>
+        </mj-text>
+
+        <mj-text
+          mj-class="footer-info pt-1 pb-1"
+          css-class="color-gray-500"
+          align="center"
+        >
+          Teradata Corporation 17095 Via Del Campo, San Diego, CA 92127, USA
+        </mj-text>
+
+        <mj-text
+          mj-class="footer-info bold"
+          css-class="color-gray-500"
+          align="center"
+        >
+          <a href="www.teradata.com" alt="">www.teradata.com</a>
+        </mj-text>
+        <mj-text
+          mj-class="footer-info"
+          css-class="color-gray-500"
+          align="center"
+        >
+          Copyright © 2024, Teradata Corporation
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
diff --git a/libs/email-templates/src/mjml-templates/marketing/workshop.mjml b/libs/email-templates/src/mjml-templates/marketing/workshop.mjml
new file mode 100644
index 0000000000..326a55dfd6
--- /dev/null
+++ b/libs/email-templates/src/mjml-templates/marketing/workshop.mjml
@@ -0,0 +1,250 @@
+<mjml>
+  <mj-head>
+    <mj-raw>
+      <meta name="color-scheme" content="light" />
+      <meta name="supported-color-schemes" content="light" />
+    </mj-raw>
+  </mj-head>
+  <mj-body css-class="body bg-white">
+    <mj-section mj-class="p-1_75 pt-2">
+      <mj-column>
+        <mj-image
+          align="left"
+          width="126px"
+          mj-class="p-0"
+          src="https://cdn.jsdelivr.net/gh/bsahitya/wysiwyg-email-editor/public/images/primary-logo.png"
+          alt=""
+        />
+      </mj-column>
+      <mj-column>
+        <mj-text align="right" mj-class="small">
+          <a href="https://www.teradata.com" alt="">View in browser</a></mj-text
+        >
+      </mj-column>
+    </mj-section>
+    <mj-wrapper mj-class="p-0 pl-1_75 pr-1_75">
+      <mj-section mj-class="pb-0">
+        <mj-column width="50%">
+          <mj-text mj-class="eyebrow bold"> Modernization Workshop </mj-text>
+          <mj-text align="left">
+            <div class="orange-line"></div>
+          </mj-text>
+          <mj-text mj-class="marketing-h1 pt-0_75"
+            >Transform your business vision into reality</mj-text
+          >
+          <mj-text mj-class="pt-1_25">
+            Give your analytics ecosystem a tune-up with our free Modernization
+            Workshop.
+          </mj-text>
+          <mj-button
+            mj-class="button pt-1_5"
+            css-class="cta-button"
+            align="left"
+            href="https://www.teradata.com/"
+          >
+            Learn how &nbsp; →
+          </mj-button>
+        </mj-column>
+        <mj-column width="50%"
+          ><mj-image
+            mj-class="pr-0"
+            src="https://cdn.jsdelivr.net/gh/bsahitya/wysiwyg-email-editor/public/images/marketing-person.png"
+            alt=""
+        /></mj-column>
+      </mj-section>
+
+      <mj-section mj-class="pt-2">
+        <mj-column>
+          <mj-text mj-class="eyebrow bold"> Benefits </mj-text>
+          <mj-text align="left">
+            <div class="orange-line"></div>
+          </mj-text>
+          <mj-text mj-class="marketing-h2 pt-0_75">
+            Find the answers you need to ensure your business thrives
+          </mj-text>
+        </mj-column>
+      </mj-section>
+
+      <mj-section>
+        <mj-column>
+          <mj-image
+            mj-class="pl-0"
+            width="26px"
+            src="https://cdn.jsdelivr.net/gh/bsahitya/wysiwyg-email-editor/public/images/insights.png"
+            alt=""
+            align="left"
+          />
+          <mj-text mj-class="marketing-h3 pb-0_5"> Insights</mj-text>
+          <mj-text>
+            Make smarter decisions based on clean data, not assumptions.
+          </mj-text>
+        </mj-column>
+        <mj-column>
+          <mj-image
+            mj-class="pl-0"
+            width="26px"
+            src="https://cdn.jsdelivr.net/gh/bsahitya/wysiwyg-email-editor/public/images/analytics.png"
+            alt=""
+            align="left"
+          /><mj-text mj-class="marketing-h3 pb-0_5"> Analytics</mj-text>
+          <mj-text>
+            Improve business outcomes with analytic best practices.
+          </mj-text>
+        </mj-column>
+      </mj-section>
+
+      <mj-section mj-class="pt-1_5">
+        <mj-column width="65%">
+          <mj-text mj-class="marketing-h3 pt-0_5 pb-0_5">
+            Key points of analysis
+          </mj-text>
+          <mj-text>
+            The demands of scale, complexity, and speed increase exponentially
+            every year. We’ll review key areas of your business to equip your
+            organization with the right tools to meet these demands at every
+            level.
+          </mj-text>
+        </mj-column>
+        <mj-column width="35%">
+          <mj-image
+            mj-class="pr-0 img-rounded"
+            src="https://cdn.jsdelivr.net/gh/bsahitya/wysiwyg-email-editor/public/images/people.png"
+            alt=""
+            align="right"
+          />
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>
+
+    <mj-section mj-class="p-0">
+      <mj-column mj-class="help" css-class="bg-primary">
+        <mj-text mj-class="marketing-h2 color-white" css-class="color-white"
+          >Let’s fast-track you to peak data optimization</mj-text
+        >
+        <mj-text mj-class="pt-1" css-class="color-white">
+          Choose our two-week workshop to receive a full analysis of your
+          business analytics and technology maturity. Or, select the one-week
+          workshop to gain insights on strengths and areas for improvement in
+          business analytics.
+        </mj-text>
+        <mj-button
+          mj-class="button pt-1_5 pb-0"
+          css-class="primary-button"
+          align="left"
+          href="https://www.teradata.com/"
+        >
+          Get started &nbsp; →
+        </mj-button>
+      </mj-column>
+    </mj-section>
+    <mj-section mj-class="p-0 help" css-class="bg-gray-25">
+      <mj-column width="100%">
+        <mj-social
+          mode="horizontal"
+          icon-size="16px"
+          border-radius="50px"
+          align="center"
+          padding="0 0 16px"
+        >
+          <mj-social-element
+            name="x"
+            href="https://www.twitter.com"
+            css-class="social-icon"
+          >
+          </mj-social-element>
+          <mj-social-element
+            name="facebook"
+            href="https://www.facebook.com"
+            css-class="social-icon"
+          >
+          </mj-social-element>
+
+          <mj-social-element
+            name="linkedin"
+            href="https://www.linkedin.com"
+            css-class="social-icon"
+          >
+          </mj-social-element>
+
+          <mj-social-element
+            name="youtube"
+            href="https://www.linkedin.com"
+            css-class="social-icon"
+          >
+          </mj-social-element>
+
+          <mj-social-element
+            name="instagram"
+            href="https://www.instagram.com"
+            css-class="social-icon"
+          >
+          </mj-social-element>
+        </mj-social>
+      </mj-column>
+
+      <mj-column width="100%">
+        <mj-text
+          mj-class="footer-info"
+          css-class="color-gray-500"
+          align="center"
+        >
+          To manage your email communication preferences, click
+          <a
+            href="https://answers.teradata.com/email-preferences?elqTrackId=774fd2ae01fc489797082657c9c670b0"
+            alt=""
+            >here</a
+          >.
+        </mj-text>
+
+        <mj-text
+          mj-class="footer-info pt-1_5"
+          css-class="color-gray-500"
+          align="center"
+        >
+          To unsubscribe from all future marketing emails from Teradata, click
+          <a
+            href="https://answers.teradata.com/email-preferences?elqTrackId=774fd2ae01fc489797082657c9c670b0"
+            alt=""
+            >here</a
+          >.
+        </mj-text>
+
+        <mj-text
+          mj-class="footer-info"
+          css-class="color-gray-500"
+          align="center"
+        >
+          View our global privacy
+          <a
+            href="https://www.teradata.com/privacy?elqTrackId=b344162cc02544c8b953f0d3b5429a39"
+            alt=""
+            >policy</a
+          >.
+        </mj-text>
+
+        <mj-text
+          mj-class="footer-info pt-1 pb-1"
+          css-class="color-gray-500"
+          align="center"
+        >
+          Teradata Corporation 17095 Via Del Campo, San Diego, CA 92127, USA
+        </mj-text>
+
+        <mj-text
+          mj-class="footer-info bold"
+          css-class="color-gray-500"
+          align="center"
+        >
+          <a href="www.teradata.com" alt="">www.teradata.com</a>
+        </mj-text>
+        <mj-text
+          mj-class="footer-info"
+          css-class="color-gray-500"
+          align="center"
+        >
+          Copyright © 2024, Teradata Corporation
+        </mj-text>
+      </mj-column>
+    </mj-section>
+  </mj-body>
+</mjml>
diff --git a/libs/email-templates/src/styles/_generated.css b/libs/email-templates/src/styles/_generated.css
new file mode 100644
index 0000000000..9e768d69eb
--- /dev/null
+++ b/libs/email-templates/src/styles/_generated.css
@@ -0,0 +1,1414 @@
+/*This is a generated CSS file
+ */
+
+/**
+ * Do not edit directly
+ * Generated on Thu, 25 Jul 2024 15:59:08 GMT
+ */
+
+:root {
+  --cv-light-primary: #3053f4ff;
+  --cv-light-secondary: #00233cff;
+  --cv-light-error: #ae1209ff;
+  --cv-light-positive: #036600ff;
+  --cv-light-caution: #f38800ff;
+  --cv-light-negative: #ae1209ff;
+  --cv-light-on-primary: #ffffffff;
+  --cv-light-on-secondary: #ffffffff;
+  --cv-light-on-background: #00233cff;
+  --cv-light-on-surface: #00233cff;
+  --cv-light-on-error: #ffffffff;
+  --cv-light-divider: #d1d5e7ff;
+  --cv-light-emphasis: #b10142ff;
+  --cv-light-accent: #3053f4ff;
+  --cv-light-background: #f8f9fbff;
+  --cv-light-surface: #f8f9fbff;
+  --cv-light-surface-canvas: #ffffffff;
+  --cv-light-surface-primary: #ececfeff;
+  --cv-light-surface-primary-highlight: #3053f414;
+  --cv-light-surface-primary-highlight-hover: #3053f414;
+  --cv-light-surface-accent: #ececfeff;
+  --cv-light-surface-accent-highlight: #3053f414;
+  --cv-light-surface-accent-highlight-hover: #3053f41f;
+  --cv-light-surface-secondary: #deeafaff;
+  --cv-light-surface-secondary-highlight: #00233c14;
+  --cv-light-surface-secondary-highlight-hover: #00233c14;
+  --cv-light-surface-positive: #8fcc8eff;
+  --cv-light-surface-positive-highlight: #03660014;
+  --cv-light-surface-positive-highlight-hover: #03660014;
+  --cv-light-surface-caution: #ffcc8cff;
+  --cv-light-surface-caution-highlight: #f3880014;
+  --cv-light-surface-caution-highlight-hover: #f3880014;
+  --cv-light-surface-negative: #ffb2aeff;
+  --cv-light-surface-negative-highlight: #ae120914;
+  --cv-light-surface-negative-highlight-hover: #ae120914;
+  --cv-light-surface-neutral: #f3f5f9ff;
+  --cv-light-surface-neutral-highlight: rgba(#f3f5f9ff, 0.04);
+  --cv-light-surface-neutral-highlight-hover: rgba(#f3f5f9ff, 0.08);
+  --cv-light-surface-emphasis: #e8b3c6ff;
+  --cv-light-surface-emphasis-highlight: #b1014214;
+  --cv-light-surface-emphasis-highlight-hover: #b1014214;
+  --cv-light-text-primary-on-background: #00233cff;
+  --cv-light-text-secondary-on-background: #59627bff;
+  --cv-light-text-hint-on-background: #59627bff;
+  --cv-light-text-disabled-on-background: #00233c61;
+  --cv-light-text-icon-on-background: #59627bff;
+  --cv-light-text-logo-on-background: #ff5f02;
+  --cv-light-text-primary-on-light: #00233cff;
+  --cv-light-text-secondary-on-light: #59627bff;
+  --cv-light-text-hint-on-light: #59627bff;
+  --cv-light-text-disabled-on-light: #00233c61;
+  --cv-light-text-icon-on-light: #59627bff;
+  --cv-light-text-primary-on-dark: #ebe8ecff;
+  --cv-light-text-secondary-on-dark: #d5d3d8ff;
+  --cv-light-text-hint-on-dark: #d5d3d8ff;
+  --cv-light-text-disabled-on-dark: #ebe8ec61;
+  --cv-light-text-icon-on-dark: #d5d3d8ff;
+  --cv-light-code-snippet-color: #383a42;
+  --cv-light-code-snippet-comment: #6c6c6c;
+  --cv-light-code-snippet-keyword: #a626a4;
+  --cv-light-code-snippet-selector: #ad0f00;
+  --cv-light-code-snippet-literal: #17749b;
+  --cv-light-code-snippet-string: #0a7c08;
+  --cv-light-code-snippet-variable: #8e6102;
+  --cv-light-code-snippet-title: #004ffd;
+  --cv-light-code-snippet-class: #6a6c02;
+  --cv-dark-primary: #bac3ffff;
+  --cv-dark-secondary: #c3c5ddff;
+  --cv-dark-error: #fd7d69ff;
+  --cv-dark-positive: #91d890ff;
+  --cv-dark-caution: #ffcd9eff;
+  --cv-dark-negative: #fd7d69ff;
+  --cv-dark-on-primary: #111a28ff;
+  --cv-dark-on-secondary: #171a2cff;
+  --cv-dark-on-background: #ebe8ecff;
+  --cv-dark-on-surface: #ebe8ecff;
+  --cv-dark-on-error: #331915ff;
+  --cv-dark-divider: #3e3e41ff;
+  --cv-dark-emphasis: #cc809cff;
+  --cv-dark-accent: #bac3ffff;
+  --cv-dark-background: #161616ff;
+  --cv-dark-surface: #161616ff;
+  --cv-dark-surface-canvas: #2c2b2dff;
+  --cv-dark-surface-primary: #1d2c43ff;
+  --cv-dark-surface-primary-highlight: #bac3ff14;
+  --cv-dark-surface-primary-highlight-hover: #bac3ff14;
+  --cv-dark-surface-accent: #1d2c43ff;
+  --cv-dark-surface-accent-highlight: #bac3ff14;
+  --cv-dark-surface-accent-highlight-hover: #bac3ff14;
+  --cv-dark-surface-secondary: #434659ff;
+  --cv-dark-surface-secondary-highlight: #c3c5dd14;
+  --cv-dark-surface-secondary-highlight-hover: #c3c5dd14;
+  --cv-dark-surface-positive: #224b22ff;
+  --cv-dark-surface-positive-highlight: #91d89014;
+  --cv-dark-surface-positive-highlight-hover: #91d89014;
+  --cv-dark-surface-caution: #66492fff;
+  --cv-dark-surface-caution-highlight: #ffb77514;
+  --cv-dark-surface-caution-highlight-hover: #ffb77514;
+  --cv-dark-surface-negative: #65322aff;
+  --cv-dark-surface-negative-highlight: #fd7d6914;
+  --cv-dark-surface-negative-highlight-hover: #fd7d6914;
+  --cv-dark-surface-neutral: #f3f5f9ff;
+  --cv-dark-surface-neutral-highlight: rgba(#f3f5f9ff, 0.04);
+  --cv-dark-surface-neutral-highlight-hover: rgba(#f3f5f9ff, 0.08);
+  --cv-dark-surface-emphasis: #66404eff;
+  --cv-dark-surface-emphasis-highlight: #cc809c14;
+  --cv-dark-surface-emphasis-highlight-hover: #cc809c14;
+  --cv-dark-text-primary-on-background: #ebe8ecff;
+  --cv-dark-text-secondary-on-background: #d5d3d8ff;
+  --cv-dark-text-hint-on-background: #d5d3d8ff;
+  --cv-dark-text-disabled-on-background: #ebe8ec61;
+  --cv-dark-text-icon-on-background: #d5d3d8ff;
+  --cv-dark-text-logo-on-background: #ffffff;
+  --cv-dark-text-primary-on-light: #00233cff;
+  --cv-dark-text-secondary-on-light: #59627bff;
+  --cv-dark-text-hint-on-light: #59627bff;
+  --cv-dark-text-disabled-on-light: #00233c61;
+  --cv-dark-text-icon-on-light: #59627bff;
+  --cv-dark-text-primary-on-dark: #ebe8ecff;
+  --cv-dark-text-secondary-on-dark: #d5d3d8ff;
+  --cv-dark-text-hint-on-dark: #d5d3d8ff;
+  --cv-dark-text-disabled-on-dark: #ebe8ec61;
+  --cv-dark-text-icon-on-dark: #d5d3d8ff;
+  --cv-dark-code-snippet-color: #abb2bf;
+  --cv-dark-code-snippet-comment: #5c6370;
+  --cv-dark-code-snippet-keyword: #c678dd;
+  --cv-dark-code-snippet-selector: #e06c75;
+  --cv-dark-code-snippet-literal: #56b6c2;
+  --cv-dark-code-snippet-string: #98c379;
+  --cv-dark-code-snippet-variable: #d19a66;
+  --cv-dark-code-snippet-title: #61aeee;
+  --cv-dark-code-snippet-class: #e6c07b;
+  --cv-teradata-teal-50: #def9f8;
+  --cv-teradata-teal-100: #b2ebea;
+  --cv-teradata-teal-200: #85dddc;
+  --cv-teradata-teal-300: #59cecd;
+  --cv-teradata-teal-400: #2cc0bf;
+  --cv-teradata-teal-500: #00b2b1;
+  --cv-teradata-teal-600: #00a2a2;
+  --cv-teradata-teal-700: #009392;
+  --cv-teradata-teal-800: #008383;
+  --cv-teradata-teal-900: #007373;
+  --cv-teradata-teal-1000: #016b6b;
+  --cv-teradata-teal-1100: #036464;
+  --cv-teradata-teal-1200: #045c5c;
+  --cv-teradata-teal-1300: #055454;
+  --cv-teradata-teal-1400: #074d4d;
+  --cv-teradata-teal-1500: #084545;
+  --cv-teradata-teal-1600: #0a3e3e;
+  --cv-teradata-teal-1700: #0b3636;
+  --cv-teradata-teal-1800: #0c2e2e;
+  --cv-teradata-teal-1900: #0e2727;
+  --cv-teradata-teal-2000: #0f1f1f;
+  --cv-teradata-slate-50: #e3e7e8;
+  --cv-teradata-slate-100: #c9cfd1;
+  --cv-teradata-slate-200: #afb6b9;
+  --cv-teradata-slate-300: #959ea2;
+  --cv-teradata-slate-400: #7b858a;
+  --cv-teradata-slate-500: #616d73;
+  --cv-teradata-slate-600: #57646b;
+  --cv-teradata-slate-700: #4d5b62;
+  --cv-teradata-slate-800: #43515a;
+  --cv-teradata-slate-900: #394851;
+  --cv-teradata-slate-1000: #2e3d42;
+  --cv-teradata-slate-1100: #28353b;
+  --cv-teradata-slate-1200: #222e33;
+  --cv-teradata-slate-1300: #1f282e;
+  --cv-teradata-slate-1400: #1a2126;
+  --cv-teradata-slate-1500: #161c1f;
+  --cv-teradata-slate-1600: #14171a;
+  --cv-teradata-slate-1700: #101314;
+  --cv-teradata-slate-1800: #0c0e0f;
+  --cv-teradata-slate-1900: #060708;
+  --cv-teradata-slate-2000: #020203;
+  --cv-teradata-orange-100: #ffcfb3;
+  --cv-teradata-orange-200: #ffaf81;
+  --cv-teradata-orange-300: #ff8f4e;
+  --cv-teradata-orange-400: #ff7728;
+  --cv-teradata-orange-500: #ff5f02;
+  --cv-teradata-orange-600: #f05800;
+  --cv-teradata-orange-700: #e54900;
+  --cv-teradata-orange-800: #d83b03;
+  --cv-teradata-orange-900: #c23200;
+  --cv-theme-light-palettes-digital-blue-98: #fbf8ffff;
+  --cv-theme-light-palettes-digital-blue-100: #ffffffff;
+  --cv-theme-light-palettes-digital-blue-95: #f0efffff;
+  --cv-theme-light-palettes-digital-blue-90: #dee0ffff;
+  --cv-theme-light-palettes-digital-blue-80: #bac3ffff;
+  --cv-theme-light-palettes-digital-blue-70: #96a5ffff;
+  --cv-theme-light-palettes-digital-blue-60: #7187ffff;
+  --cv-theme-light-palettes-digital-blue-50: #4967ffff;
+  --cv-theme-light-palettes-digital-blue-40: #3053f4ff;
+  --cv-theme-light-palettes-digital-blue-30: #0436d3ff;
+  --cv-theme-light-palettes-digital-blue-20: #00208eff;
+  --cv-theme-light-palettes-digital-blue-10: #00115aff;
+  --cv-theme-light-palettes-orange-100: #ffffffff;
+  --cv-theme-light-palettes-orange-98: #fff8f6ff;
+  --cv-theme-light-palettes-orange-95: #ffede7ff;
+  --cv-theme-light-palettes-orange-90: #ffdbceff;
+  --cv-theme-light-palettes-orange-80: #ffc0a8ff;
+  --cv-theme-light-palettes-orange-70: #ffa47eff;
+  --cv-theme-light-palettes-orange-60: #ff986dff;
+  --cv-theme-light-palettes-orange-50: #ff7a42ff;
+  --cv-theme-light-palettes-orange-40: #ff5f02ff;
+  --cv-theme-light-palettes-orange-30: #cf4b00ff;
+  --cv-theme-light-palettes-orange-20: #8d3001ff;
+  --cv-theme-light-palettes-orange-10: #481300ff;
+  --cv-theme-light-palettes-orange-0: #000000ff;
+  --cv-theme-light-palettes-digital-blue-0: #000000ff;
+  --cv-theme-light-palettes-navy-100: #ffffffff;
+  --cv-theme-light-palettes-navy-99: #fbfcfeff;
+  --cv-theme-light-palettes-navy-95: #eef4fcff;
+  --cv-theme-light-palettes-navy-90: #deeafaff;
+  --cv-theme-light-palettes-navy-80: #bcd5f6ff;
+  --cv-theme-light-palettes-navy-70: #95bff1ff;
+  --cv-theme-light-palettes-navy-60: #60a9edff;
+  --cv-theme-light-palettes-navy-50: #458fcfff;
+  --cv-theme-light-palettes-navy-40: #3672a8ff;
+  --cv-theme-light-palettes-navy-30: #26547cff;
+  --cv-theme-light-palettes-navy-20: #14324cff;
+  --cv-theme-light-palettes-navy-10: #001d33ff;
+  --cv-theme-light-palettes-navy-0: #000000ff;
+  --cv-theme-light-palettes-negative-100: #ffffffff;
+  --cv-theme-light-palettes-negative-98: #ffdcdbff;
+  --cv-theme-light-palettes-negative-95: #ffc9c7ff;
+  --cv-theme-light-palettes-negative-90: #ffb2aeff;
+  --cv-theme-light-palettes-negative-80: #e0938eff;
+  --cv-theme-light-palettes-negative-70: #c65953ff;
+  --cv-theme-light-palettes-negative-60: #be413aff;
+  --cv-theme-light-palettes-negative-50: #b62a22ff;
+  --cv-theme-light-palettes-negative-40: #ae1209ff;
+  --cv-theme-light-palettes-negative-30: #7a0d06ff;
+  --cv-theme-light-palettes-negative-20: #460704ff;
+  --cv-theme-light-palettes-negative-10: #110201ff;
+  --cv-theme-light-palettes-negative-0: #000000ff;
+  --cv-theme-light-palettes-caution-100: #ffffffff;
+  --cv-theme-light-palettes-caution-98: #fef3e6ff;
+  --cv-theme-light-palettes-caution-95: #ffdcb0ff;
+  --cv-theme-light-palettes-caution-90: #ffcc8cff;
+  --cv-theme-light-palettes-caution-80: #f8b866ff;
+  --cv-theme-light-palettes-caution-70: #f7ac4dff;
+  --cv-theme-light-palettes-caution-60: #f5a033ff;
+  --cv-theme-light-palettes-caution-50: #f4941aff;
+  --cv-theme-light-palettes-caution-40: #f38800ff;
+  --cv-theme-light-palettes-caution-30: #aa5f00ff;
+  --cv-theme-light-palettes-caution-20: #613600ff;
+  --cv-theme-light-palettes-caution-10: #180e00ff;
+  --cv-theme-light-palettes-caution-0: #000000ff;
+  --cv-theme-light-palettes-positive-100: #ffffffff;
+  --cv-theme-light-palettes-positive-98: #daf6daff;
+  --cv-theme-light-palettes-positive-95: #b5e8b3ff;
+  --cv-theme-light-palettes-positive-90: #8fcc8eff;
+  --cv-theme-light-palettes-positive-80: #68a366ff;
+  --cv-theme-light-palettes-positive-70: #4f944dff;
+  --cv-theme-light-palettes-positive-60: #358533ff;
+  --cv-theme-light-palettes-positive-50: #1c751aff;
+  --cv-theme-light-palettes-positive-40: #036600ff;
+  --cv-theme-light-palettes-positive-30: #024700ff;
+  --cv-theme-light-palettes-positive-20: #012900ff;
+  --cv-theme-light-palettes-positive-10: #000a00ff;
+  --cv-theme-light-palettes-positive-0: #000000ff;
+  --cv-theme-light-palettes-emphasis-100: #ffffffff;
+  --cv-theme-light-palettes-emphasis-98: #f7e6ecff;
+  --cv-theme-light-palettes-emphasis-95: #efccd9ff;
+  --cv-theme-light-palettes-emphasis-90: #e8b3c6ff;
+  --cv-theme-light-palettes-emphasis-80: #d880a1ff;
+  --cv-theme-light-palettes-emphasis-70: #c84d7bff;
+  --cv-theme-light-palettes-emphasis-60: #c13468ff;
+  --cv-theme-light-palettes-emphasis-50: #b91a55ff;
+  --cv-theme-light-palettes-emphasis-40: #b10142ff;
+  --cv-theme-light-palettes-emphasis-30: #7c012eff;
+  --cv-theme-light-palettes-emphasis-20: #47001aff;
+  --cv-theme-light-palettes-emphasis-10: #120007ff;
+  --cv-theme-light-palettes-emphasis-0: #000000ff;
+  --cv-theme-light-palettes-secondary-80: #bcd5f6ff;
+  --cv-theme-light-palettes-secondary-20: #14324cff;
+  --cv-theme-light-palettes-secondary-30: #26547cff;
+  --cv-theme-light-palettes-secondary-90: #deeafaff;
+  --cv-theme-light-palettes-secondary-10: #001d33ff;
+  --cv-theme-light-palettes-neutral-100: #ffffffff;
+  --cv-theme-light-palettes-neutral-98: #f8f9fbff;
+  --cv-theme-light-palettes-neutral-95: #f1f3f8ff;
+  --cv-theme-light-palettes-neutral-90: #e6e9f3ff;
+  --cv-theme-light-palettes-neutral-80: #d1d5e7ff;
+  --cv-theme-light-palettes-neutral-70: #bbc1d9ff;
+  --cv-theme-light-palettes-neutral-60: #a4adc8ff;
+  --cv-theme-light-palettes-neutral-50: #8e98b4ff;
+  --cv-theme-light-palettes-neutral-40: #727d9cff;
+  --cv-theme-light-palettes-neutral-30: #59627bff;
+  --cv-theme-light-palettes-neutral-20: #3e4557ff;
+  --cv-theme-light-palettes-neutral-10: #1f232eff;
+  --cv-theme-light-palettes-neutral-0: #000000ff;
+  --cv-theme-light-palettes-neutral-87: #e0e3efff;
+  --cv-theme-light-palettes-neutral-96: #f3f5f9ff;
+  --cv-theme-light-palettes-neutral-94: #eff1f7ff;
+  --cv-theme-light-palettes-neutral-92: #ebedf5ff;
+  --cv-theme-light-palettes-secondary-100: #ffffffff;
+  --cv-theme-light-palettes-secondary-98: #f8fafdff;
+  --cv-theme-light-palettes-secondary-95: #eef4fcff;
+  --cv-theme-light-palettes-secondary-70: #95bff1ff;
+  --cv-theme-light-palettes-secondary-60: #60a9edff;
+  --cv-theme-light-palettes-secondary-50: #458fcfff;
+  --cv-theme-light-palettes-secondary-40: #3672a8ff;
+  --cv-theme-light-palettes-secondary-0: #000000ff;
+  --cv-theme-light-palettes-neutral-99: #fcfcfdff;
+  --cv-theme-light-palettes-neutral-35: #66708cff;
+  --cv-theme-light-palettes-neutral-25: #4c546aff;
+  --cv-theme-light-palettes-neutral-97: #f6f7fbff;
+  --cv-theme-light-palettes-neutral-93: #edeff6ff;
+  --cv-theme-light-palettes-neutral-91: #e8ebf4ff;
+  --cv-theme-light-palettes-neutral-2: #05060aff;
+  --cv-theme-light-palettes-neutral-3: #080a0fff;
+  --cv-theme-light-palettes-neutral-4: #0a0d12ff;
+  --cv-theme-light-palettes-neutral-5: #0d1016ff;
+  --cv-theme-light-palettes-neutral-6: #10141aff;
+  --cv-theme-light-palettes-neutral-7: #14181fff;
+  --cv-theme-light-palettes-neutral-8: #171b24ff;
+  --cv-theme-light-palettes-neutral-9: #1b1f29ff;
+  --cv-theme-light-palettes-neutral-11: #222633ff;
+  --cv-theme-light-palettes-neutral-12: #252a37ff;
+  --cv-theme-light-palettes-neutral-13: #292e3cff;
+  --cv-theme-light-palettes-neutral-14: #2c313fff;
+  --cv-theme-light-palettes-neutral-15: #2f3443ff;
+  --cv-theme-light-palettes-neutral-16: #333847ff;
+  --cv-theme-light-palettes-neutral-17: #353b4bff;
+  --cv-theme-light-palettes-neutral-18: #383e4fff;
+  --cv-theme-light-palettes-neutral-19: #3b4153ff;
+  --cv-theme-light-palettes-neutral-21: #41485bff;
+  --cv-theme-light-palettes-neutral-22: #444b5fff;
+  --cv-theme-light-palettes-neutral-23: #474e62ff;
+  --cv-theme-light-palettes-neutral-24: #495166ff;
+  --cv-theme-light-palettes-digital-blue-91: #e1e3fdff;
+  --cv-theme-light-palettes-digital-blue-92: #e5e5feff;
+  --cv-theme-light-palettes-digital-blue-93: #e8e9feff;
+  --cv-theme-light-palettes-digital-blue-94: #ececfeff;
+  --cv-theme-light-palettes-digital-blue-99: #fefbffff;
+  --cv-theme-light-palettes-neutral-variant-100: #ffffffff;
+  --cv-theme-light-palettes-neutral-variant-99: #fcfcffff;
+  --cv-theme-light-palettes-neutral-variant-98: #f9f9fdff;
+  --cv-theme-light-palettes-neutral-variant-97: #f5f5faff;
+  --cv-theme-light-palettes-neutral-variant-96: #f2f2f7ff;
+  --cv-theme-light-palettes-neutral-variant-95: #f0f0f4ff;
+  --cv-theme-light-palettes-neutral-variant-94: #ededf1ff;
+  --cv-theme-light-palettes-neutral-variant-93: #eaeaefff;
+  --cv-theme-light-palettes-neutral-variant-92: #e7e7ecff;
+  --cv-theme-light-palettes-neutral-variant-91: #e4e4e9ff;
+  --cv-theme-light-palettes-neutral-variant-90: #e2e2e6ff;
+  --cv-theme-light-palettes-neutral-variant-80: #c6c6caff;
+  --cv-theme-light-palettes-neutral-variant-70: #aaabafff;
+  --cv-theme-light-palettes-neutral-variant-60: #8f9194ff;
+  --cv-theme-light-palettes-neutral-variant-50: #76777aff;
+  --cv-theme-light-palettes-neutral-variant-40: #5d5e62ff;
+  --cv-theme-light-palettes-neutral-variant-35: #515256ff;
+  --cv-theme-light-palettes-neutral-variant-30: #45474aff;
+  --cv-theme-light-palettes-neutral-variant-25: #3a3b3fff;
+  --cv-theme-light-palettes-neutral-variant-20: #2f3033ff;
+  --cv-theme-light-palettes-neutral-variant-15: #242629ff;
+  --cv-theme-light-palettes-neutral-variant-10: #1a1c1eff;
+  --cv-theme-light-palettes-neutral-variant-5: #0f1114ff;
+  --cv-theme-light-palettes-neutral-variant-0: #000000ff;
+  --cv-theme-light-palettes-neutral-1: #020305ff;
+  --cv-theme-light-palettes-navy-13: #00233cff;
+  --cv-theme-light-palettes-navy-98: #f8fafdff;
+  --cv-theme-light-colors-primary: #3053f4ff;
+  --cv-theme-light-colors-primary-container: #ececfeff;
+  --cv-theme-light-colors-on-primary: #ffffffff;
+  --cv-theme-light-colors-secondary: #00233cff;
+  --cv-theme-light-colors-secondary-container: #deeafaff;
+  --cv-theme-light-colors-on-secondary: #ffffffff;
+  --cv-theme-light-colors-on-secondary-container: #001d33ff;
+  --cv-theme-light-colors-tertiary: #ff5f02ff;
+  --cv-theme-light-colors-tertiary-container: #ffdbceff;
+  --cv-theme-light-colors-on-tertiary: #ffffffff;
+  --cv-theme-light-colors-on-tertiary-container: #481300ff;
+  --cv-theme-light-colors-surface: #f8f9fbff;
+  --cv-theme-light-colors-surface-dim: #e0e3efff;
+  --cv-theme-light-colors-surface-bright: #f8f9fbff;
+  --cv-theme-light-colors-surface-container-lowest: #ffffffff;
+  --cv-theme-light-colors-surface-container-low: #f3f5f9ff;
+  --cv-theme-light-colors-surface-container: #eff1f7ff;
+  --cv-theme-light-colors-surface-container-high: #ebedf5ff;
+  --cv-theme-light-colors-surface-container-highest: #e6e9f3ff;
+  --cv-theme-light-colors-on-surface: #00233cff;
+  --cv-theme-light-colors-on-surface-variant: #59627bff;
+  --cv-theme-light-colors-inverse-surface: #3e4557ff;
+  --cv-theme-light-colors-inverse-on-surface: #f1f3f8ff;
+  --cv-theme-light-colors-negative: #ae1209ff;
+  --cv-theme-light-colors-negative-container: #ffb2aeff;
+  --cv-theme-light-colors-on-negative: #ffffffff;
+  --cv-theme-light-colors-on-negative-container: #110201ff;
+  --cv-theme-light-colors-positive: #036600ff;
+  --cv-theme-light-colors-positive-container: #8fcc8eff;
+  --cv-theme-light-colors-on-positive: #ffffffff;
+  --cv-theme-light-colors-on-positive-container: #000a00ff;
+  --cv-theme-light-colors-caution: #f38800ff;
+  --cv-theme-light-colors-caution-container: #ffcc8cff;
+  --cv-theme-light-colors-on-caution: #ffffffff;
+  --cv-theme-light-colors-on-caution-container: #180e00ff;
+  --cv-theme-light-colors-outline: #727d9cff;
+  --cv-theme-light-colors-outline-variant: #d1d5e7ff;
+  --cv-theme-light-colors-shadow: #000000ff;
+  --cv-theme-light-colors-scrim: #00000052;
+  --cv-theme-light-colors-primary-fixed: #dee0ffff;
+  --cv-theme-light-colors-primary-fixed-dim: #bac3ffff;
+  --cv-theme-light-colors-secondary-fixed: #deeafaff;
+  --cv-theme-light-colors-secondary-fixed-dim: #bcd5f6ff;
+  --cv-theme-light-colors-tertiary-fixed: #ffdbceff;
+  --cv-theme-light-colors-tertiary-fixed-dim: #ffc0a8ff;
+  --cv-theme-light-colors-primary-8: #3053f414;
+  --cv-theme-light-colors-primary-12: #3053f41f;
+  --cv-theme-light-colors-on-surface-8: #00233c14;
+  --cv-theme-light-colors-on-surface-12: #00233c1f;
+  --cv-theme-light-colors-on-primary-container: #00115aff;
+  --cv-theme-light-colors-inverse-primary: #bac3ffff;
+  --cv-theme-light-colors-on-surface-38: #00233c61;
+  --cv-theme-light-colors-on-surface-16: #00233c29;
+  --cv-theme-light-colors-on-primary-12: #ffffff1f;
+  --cv-theme-light-colors-on-primary-8: #ffffff14;
+  --cv-theme-light-colors-primary-16: #3053f429;
+  --cv-theme-light-colors-on-surface-variant-8: #59627b14;
+  --cv-theme-light-colors-on-tertiary-container-8: #48130014;
+  --cv-theme-light-colors-on-tertiary-container-12: #4813001f;
+  --cv-theme-light-colors-on-primary-container-12: #00115a1f;
+  --cv-theme-light-colors-on-surface-variant-12: #59627b1f;
+  --cv-theme-light-colors-on-secondary-container-8: #001d3314;
+  --cv-theme-light-colors-on-secondary-container-16: #001d3329;
+  --cv-theme-light-colors-outline-8: #727d9c14;
+  --cv-theme-light-colors-outline-12: #727d9c1f;
+  --cv-theme-light-colors-outline-16: #727d9c29;
+  --cv-theme-light-colors-surface-variant: #f8f9fbff;
+  --cv-theme-light-colors-emphasis: #b10142ff;
+  --cv-theme-light-colors-emphasis-container: #e8b3c6ff;
+  --cv-theme-light-colors-on-emphasis: #ffffffff;
+  --cv-theme-light-colors-on-emphasis-container: #120007ff;
+  --cv-theme-light-colors-positive-16: #03660029;
+  --cv-theme-light-colors-caution-16: #f3880029;
+  --cv-theme-light-colors-negative-12: #ae12091f;
+  --cv-theme-light-colors-on-secondary-container-12: #001d331f;
+  --cv-theme-light-colors-on-primary-16: #ffffff29;
+  --cv-theme-light-colors-on-primary-container-8: #00115a14;
+  --cv-theme-light-colors-on-primary-container-16: #00115a29;
+  --cv-theme-light-colors-on-secondary-8: #ffffff14;
+  --cv-theme-light-colors-on-secondary-12: #ffffff1f;
+  --cv-theme-light-colors-on-secondary-16: #ffffff29;
+  --cv-theme-light-colors-on-tertiary-8: #ffffff14;
+  --cv-theme-light-colors-on-tertiary-12: #ffffff1f;
+  --cv-theme-light-colors-on-tertiary-16: #ffffff29;
+  --cv-theme-light-colors-on-tertiary-container-16: #48130029;
+  --cv-theme-light-colors-on-surface-variant-16: #59627b29;
+  --cv-theme-light-colors-negative-8: #ae120914;
+  --cv-theme-light-colors-negative-16: #ae120929;
+  --cv-theme-light-colors-positive-12: #0366001f;
+  --cv-theme-light-colors-positive-8: #03660014;
+  --cv-theme-light-colors-on-positive-8: #ffffff14;
+  --cv-theme-light-colors-on-positive-12: #ffffff1f;
+  --cv-theme-light-colors-on-positive-16: #ffffff29;
+  --cv-theme-light-colors-on-positive-container-8: #000a0014;
+  --cv-theme-light-colors-on-positive-container-12: #000a001f;
+  --cv-theme-light-colors-on-positive-container-16: #000a0029;
+  --cv-theme-light-colors-caution-12: #f388001f;
+  --cv-theme-light-colors-caution-8: #f3880014;
+  --cv-theme-light-colors-on-caution-8: #ffffff14;
+  --cv-theme-light-colors-on-caution-12: #ffffff1f;
+  --cv-theme-light-colors-on-caution-16: #ffffff29;
+  --cv-theme-light-colors-on-negative-8: #ffffff14;
+  --cv-theme-light-colors-on-negative-12: #ffffff1f;
+  --cv-theme-light-colors-on-negative-16: #ffffff29;
+  --cv-theme-light-colors-on-caution-container-8: #180e0014;
+  --cv-theme-light-colors-on-caution-container-12: #180e001f;
+  --cv-theme-light-colors-on-caution-container-16: #180e0029;
+  --cv-theme-light-colors-emphasis-8: #b1014214;
+  --cv-theme-light-colors-emphasis-12: #b101421f;
+  --cv-theme-light-colors-emphasis-16: #b1014229;
+  --cv-theme-light-colors-on-emphasis-8: #ffffff14;
+  --cv-theme-light-colors-on-emphasis-12: #ffffff1f;
+  --cv-theme-light-colors-on-emphasis-16: #ffffff29;
+  --cv-theme-light-colors-on-emphasis-container-8: #12000714;
+  --cv-theme-light-colors-on-emphasis-container-12: #1200071f;
+  --cv-theme-light-colors-on-emphasis-container-16: #180e0029;
+  --cv-theme-light-colors-inverse-on-surface-12: #f6f3f61f;
+  --cv-theme-light-colors-inverse-primary-12: #bac3ff1f;
+  --cv-theme-light-colors-inverse-on-surface-8: #f6f3f614;
+  --cv-theme-light-colors-inverse-primary-8: #bac3ff14;
+  --cv-theme-light-colors-inverse-primary-16: #bac3ff29;
+  --cv-theme-light-colors-inverse-on-surface-16: #f6f3f61f;
+  --cv-theme-light-colors-on-primary-74: #ffffffbd;
+  --cv-theme-light-colors-on-surface-74: #00233cbd;
+  --cv-theme-light-colors-tertiary-8: #ff5f0214;
+  --cv-theme-light-colors-tertiary-12: #ff5f021f;
+  --cv-theme-light-colors-tertiary-16: #ff5f0229;
+  --cv-theme-light-colors-secondary-8: #00233c14;
+  --cv-theme-light-colors-secondary-12: #00233c1f;
+  --cv-theme-light-colors-secondary-16: #00233c29;
+  --cv-theme-light-colors-on-secondary-74: #ffffffbd;
+  --cv-theme-light-colors-inverse-secondary: #bcd5f6ff;
+  --cv-theme-light-colors-inverse-secondary-8: #bcd5f614;
+  --cv-theme-light-colors-inverse-secondary-12: #bcd5f61f;
+  --cv-theme-light-colors-inverse-secondary-16: #c3c5dd29;
+  --cv-theme-light-colors-on-tertiary-74: #ffffffbd;
+  --cv-theme-light-colors-inverse-tertiary: #ff5f02ff;
+  --cv-theme-light-colors-inverse-tertiary-8: #ff5f0214;
+  --cv-theme-light-colors-inverse-tertiary-12: #ff5f021f;
+  --cv-theme-light-colors-inverse-tertiary-16: #ff5f0229;
+  --cv-theme-light-colors-on-negative-container-8: #11020114;
+  --cv-theme-light-colors-on-negative-container-12: #1102011f;
+  --cv-theme-light-colors-on-negative-container-16: #11020129;
+  --cv-theme-light-colors-on-surface-4: #00233c0a;
+  --cv-theme-light-colors-on-surface-variant-4: #59627b0a;
+  --cv-theme-light-colors-inverse-on-surface-4: #f6f3f60a;
+  --cv-theme-light-colors-primary-4: #3053f40a;
+  --cv-theme-light-colors-on-primary-4: #ffffff0a;
+  --cv-theme-light-colors-on-primary-container-4: #00115a0a;
+  --cv-theme-light-colors-inverse-primary-4: #bac3ff0a;
+  --cv-theme-light-colors-secondary-4: #00233c0a;
+  --cv-theme-light-colors-on-secondary-4: #ffffff0a;
+  --cv-theme-light-colors-on-secondary-container-4: #001d330a;
+  --cv-theme-light-colors-inverse-secondary-4: #bcd5f60a;
+  --cv-theme-light-colors-tertiary-4: #ff5f020a;
+  --cv-theme-light-colors-on-tertiary-4: #ffffff0a;
+  --cv-theme-light-colors-on-tertiary-container-4: #4813000a;
+  --cv-theme-light-colors-inverse-tertiary-4: #ff5f020a;
+  --cv-theme-light-colors-negative-4: #ae12090a;
+  --cv-theme-light-colors-on-negative-4: #ffffff0a;
+  --cv-theme-light-colors-on-negative-container-4: #1102010a;
+  --cv-theme-light-colors-positive-4: #0366000a;
+  --cv-theme-light-colors-on-positive-4: #ffffff0a;
+  --cv-theme-light-colors-on-positive-container-4: #000a000a;
+  --cv-theme-light-colors-caution-4: #f388000a;
+  --cv-theme-light-colors-on-caution-4: #ffffff0a;
+  --cv-theme-light-colors-on-caution-container-4: #180e000a;
+  --cv-theme-light-colors-emphasis-4: #b101420a;
+  --cv-theme-light-colors-on-emphasis-4: #ffffff0a;
+  --cv-theme-light-colors-on-emphasis-container-4: #1200070a;
+  --cv-theme-light-colors-on-surface-20: #00233c33;
+  --cv-theme-light-colors-primary-20: #3053f433;
+  --cv-theme-light-colors-negative-20: #ae120933;
+  --cv-theme-light-colors-positive-20: #03660033;
+  --cv-theme-light-colors-caution-20: #f3880033;
+  --cv-theme-light-colors-emphasis-20: #b1014233;
+  --cv-theme-light-colors-primary-24: #3053f43d;
+  --cv-theme-light-colors-negative-24: #ae12093d;
+  --cv-theme-light-colors-positive-24: #0366003d;
+  --cv-theme-light-colors-caution-24: #f388003d;
+  --cv-theme-light-colors-emphasis-24: #b101423d;
+  --cv-theme-light-colors-background: #f8f9fbff;
+  --cv-theme-light-colors-surface-variant-8: #f8f9fb14;
+  --cv-theme-light-colors-surface-variant-12: #f8f9fb1f;
+  --cv-theme-light-colors-surface-variant-16: #fdf9fc29;
+  --cv-theme-light-colors-on-surface-variant-38: #59627b61;
+  --cv-theme-light-colors-on-primary-38: #ffffff61;
+  --cv-theme-light-colors-on-secondary-38: #ffffff61;
+  --cv-theme-light-colors-on-secondary-container-38: #001d3361;
+  --cv-theme-light-colors-on-secondary-container-74: #001d33bd;
+  --cv-theme-light-colors-on-tertiary-38: #ffffff61;
+  --cv-theme-light-colors-on-tertiary-container-38: #48130061;
+  --cv-theme-light-colors-on-tertiary-container-74: #481300bd;
+  --cv-theme-light-colors-inverse-tertiary-38: #ff5f0261;
+  --cv-theme-light-colors-inverse-tertiary-74: #ff5f02bd;
+  --cv-theme-light-colors-negative-38: #ae120961;
+  --cv-theme-light-colors-negative-74: #ae1209bd;
+  --cv-theme-light-colors-on-negative-38: #ffffff61;
+  --cv-theme-light-colors-on-negative-74: #ffffffbd;
+  --cv-theme-light-colors-on-negative-container-38: #11020161;
+  --cv-theme-light-colors-on-negative-container-74: #110201bd;
+  --cv-theme-light-colors-positive-38: #03660061;
+  --cv-theme-light-colors-positive-74: #036600bd;
+  --cv-theme-light-colors-on-positive-38: #ffffff61;
+  --cv-theme-light-colors-on-positive-74: #ffffffbd;
+  --cv-theme-light-colors-on-positive-container-38: #000a0061;
+  --cv-theme-light-colors-on-positive-container-74: #000a00bd;
+  --cv-theme-light-colors-caution-38: #f3880061;
+  --cv-theme-light-colors-caution-74: #f38800bd;
+  --cv-theme-light-colors-on-caution-38: #ffffff61;
+  --cv-theme-light-colors-on-caution-74: #ffffffbd;
+  --cv-theme-light-colors-on-caution-container-38: #180e0061;
+  --cv-theme-light-colors-on-caution-container-74: #180e00bd;
+  --cv-theme-light-colors-emphasis-38: #b1014261;
+  --cv-theme-light-colors-emphasis-74: #b10142bd;
+  --cv-theme-light-colors-on-emphasis-38: #ffffff61;
+  --cv-theme-light-colors-on-emphasis-74: #ffffffbd;
+  --cv-theme-light-colors-on-emphasis-container-38: #180e0061;
+  --cv-theme-light-colors-on-emphasis-container-74: #180e00bd;
+  --cv-theme-dark-palettes-digital-blue-98: #efefffff;
+  --cv-theme-dark-palettes-digital-blue-100: #ffffffff;
+  --cv-theme-dark-palettes-digital-blue-95: #dde1ffff;
+  --cv-theme-dark-palettes-digital-blue-90: #bac3ffff;
+  --cv-theme-dark-palettes-digital-blue-80: #889fffff;
+  --cv-theme-dark-palettes-digital-blue-70: #7388d9ff;
+  --cv-theme-dark-palettes-digital-blue-60: #5d71b4ff;
+  --cv-theme-dark-palettes-digital-blue-50: #485a8eff;
+  --cv-theme-dark-palettes-digital-blue-40: #324369ff;
+  --cv-theme-dark-palettes-digital-blue-30: #1d2c43ff;
+  --cv-theme-dark-palettes-digital-blue-20: #111a28ff;
+  --cv-theme-dark-palettes-digital-blue-10: #0c121bff;
+  --cv-theme-dark-palettes-orange-100: #ffffffff;
+  --cv-theme-dark-palettes-orange-98: #fef1ecff;
+  --cv-theme-dark-palettes-orange-95: #fdc4a4ff;
+  --cv-theme-dark-palettes-orange-90: #f79e79ff;
+  --cv-theme-dark-palettes-orange-80: #f37440ff;
+  --cv-theme-dark-palettes-orange-70: #db683aff;
+  --cv-theme-dark-palettes-orange-60: #c25d33ff;
+  --cv-theme-dark-palettes-orange-50: #aa512dff;
+  --cv-theme-dark-palettes-orange-40: #612e1aff;
+  --cv-theme-dark-palettes-orange-30: #492313ff;
+  --cv-theme-dark-palettes-orange-20: #331300ff;
+  --cv-theme-dark-palettes-orange-10: #190900ff;
+  --cv-theme-dark-palettes-orange-0: #000000ff;
+  --cv-theme-dark-palettes-digital-blue-0: #000000ff;
+  --cv-theme-dark-palettes-navy-100: #ffffffff;
+  --cv-theme-dark-palettes-navy-99: #fcfcffff;
+  --cv-theme-dark-palettes-navy-95: #e8f2ffff;
+  --cv-theme-dark-palettes-navy-90: #cfe5ffff;
+  --cv-theme-dark-palettes-navy-80: #acc9e9ff;
+  --cv-theme-dark-palettes-navy-70: #91aecdff;
+  --cv-theme-dark-palettes-navy-60: #7793b1ff;
+  --cv-theme-dark-palettes-navy-50: #5e7a97ff;
+  --cv-theme-dark-palettes-navy-40: #45617dff;
+  --cv-theme-dark-palettes-navy-30: #2d4964ff;
+  --cv-theme-dark-palettes-navy-20: #14324cff;
+  --cv-theme-dark-palettes-navy-10: #001d33ff;
+  --cv-theme-dark-palettes-navy-0: #000000ff;
+  --cv-theme-dark-palettes-negative-100: #ffffffff;
+  --cv-theme-dark-palettes-negative-98: #fff2f0ff;
+  --cv-theme-dark-palettes-negative-95: #ffd2cbff;
+  --cv-theme-dark-palettes-negative-90: #ffac9fff;
+  --cv-theme-dark-palettes-negative-80: #fd7d69ff;
+  --cv-theme-dark-palettes-negative-70: #e4715fff;
+  --cv-theme-dark-palettes-negative-60: #ca6454ff;
+  --cv-theme-dark-palettes-negative-50: #b1584aff;
+  --cv-theme-dark-palettes-negative-40: #984b3fff;
+  --cv-theme-dark-palettes-negative-30: #65322aff;
+  --cv-theme-dark-palettes-negative-20: #331915ff;
+  --cv-theme-dark-palettes-negative-10: #190c0aff;
+  --cv-theme-dark-palettes-negative-0: #000000ff;
+  --cv-theme-dark-palettes-caution-100: #ffffffff;
+  --cv-theme-dark-palettes-caution-98: #fff8f1ff;
+  --cv-theme-dark-palettes-caution-95: #ffe2c8ff;
+  --cv-theme-dark-palettes-caution-90: #ffcd9eff;
+  --cv-theme-dark-palettes-caution-80: #ffb775ff;
+  --cv-theme-dark-palettes-caution-70: #e6a569ff;
+  --cv-theme-dark-palettes-caution-60: #cc925eff;
+  --cv-theme-dark-palettes-caution-50: #b38052ff;
+  --cv-theme-dark-palettes-caution-40: #996e46ff;
+  --cv-theme-dark-palettes-caution-30: #66492fff;
+  --cv-theme-dark-palettes-caution-20: #332517ff;
+  --cv-theme-dark-palettes-caution-10: #19120cff;
+  --cv-theme-dark-palettes-caution-0: #000000ff;
+  --cv-theme-dark-palettes-positive-100: #ffffffff;
+  --cv-theme-dark-palettes-positive-98: #eef8eeff;
+  --cv-theme-dark-palettes-positive-95: #bbe4bbff;
+  --cv-theme-dark-palettes-positive-90: #91d890ff;
+  --cv-theme-dark-palettes-positive-80: #55bc54ff;
+  --cv-theme-dark-palettes-positive-70: #4da94cff;
+  --cv-theme-dark-palettes-positive-60: #449643ff;
+  --cv-theme-dark-palettes-positive-50: #3b843bff;
+  --cv-theme-dark-palettes-positive-40: #337132ff;
+  --cv-theme-dark-palettes-positive-30: #224b22ff;
+  --cv-theme-dark-palettes-positive-20: #112611ff;
+  --cv-theme-dark-palettes-positive-10: #081308ff;
+  --cv-theme-dark-palettes-positive-0: #000000ff;
+  --cv-theme-dark-palettes-emphasis-100: #ffffffff;
+  --cv-theme-dark-palettes-emphasis-98: #fff6f9ff;
+  --cv-theme-dark-palettes-emphasis-95: #ffd9e7ff;
+  --cv-theme-dark-palettes-emphasis-90: #ffbdd5ff;
+  --cv-theme-dark-palettes-emphasis-80: #ffa0c3ff;
+  --cv-theme-dark-palettes-emphasis-70: #e690b0ff;
+  --cv-theme-dark-palettes-emphasis-60: #cc809cff;
+  --cv-theme-dark-palettes-emphasis-50: #b37089ff;
+  --cv-theme-dark-palettes-emphasis-40: #66404eff;
+  --cv-theme-dark-palettes-emphasis-30: #4c303aff;
+  --cv-theme-dark-palettes-emphasis-20: #332027ff;
+  --cv-theme-dark-palettes-emphasis-10: #191013ff;
+  --cv-theme-dark-palettes-emphasis-0: #000000ff;
+  --cv-theme-dark-palettes-secondary-80: #c3c5ddff;
+  --cv-theme-dark-palettes-secondary-20: #2c2f42ff;
+  --cv-theme-dark-palettes-secondary-30: #434659ff;
+  --cv-theme-dark-palettes-secondary-90: #dfe1f9ff;
+  --cv-theme-dark-palettes-secondary-10: #171a2cff;
+  --cv-theme-dark-palettes-neutral-100: #ffffffff;
+  --cv-theme-dark-palettes-neutral-98: #fdf9fcff;
+  --cv-theme-dark-palettes-neutral-95: #f6f3f6ff;
+  --cv-theme-dark-palettes-neutral-90: #ebe8ecff;
+  --cv-theme-dark-palettes-neutral-80: #d5d3d8ff;
+  --cv-theme-dark-palettes-neutral-70: #bebdc3ff;
+  --cv-theme-dark-palettes-neutral-60: #a6a6adff;
+  --cv-theme-dark-palettes-neutral-50: #8f8e97ff;
+  --cv-theme-dark-palettes-neutral-40: #76757dff;
+  --cv-theme-dark-palettes-neutral-30: #5c5b5fff;
+  --cv-theme-dark-palettes-neutral-20: #3e3e41ff;
+  --cv-theme-dark-palettes-neutral-10: #1e1d1eff;
+  --cv-theme-dark-palettes-neutral-0: #000000ff;
+  --cv-theme-dark-palettes-neutral-87: #e5e2e6ff;
+  --cv-theme-dark-palettes-neutral-96: #f8f5f8ff;
+  --cv-theme-dark-palettes-neutral-94: #f4f1f4ff;
+  --cv-theme-dark-palettes-neutral-92: #f0edf0ff;
+  --cv-theme-dark-palettes-secondary-100: #ffffffff;
+  --cv-theme-dark-palettes-secondary-98: #fbf8ffff;
+  --cv-theme-dark-palettes-secondary-95: #f0efffff;
+  --cv-theme-dark-palettes-secondary-70: #a8aac1ff;
+  --cv-theme-dark-palettes-secondary-60: #8d8fa6ff;
+  --cv-theme-dark-palettes-secondary-50: #73768bff;
+  --cv-theme-dark-palettes-secondary-40: #5b5d72ff;
+  --cv-theme-dark-palettes-secondary-0: #000000ff;
+  --cv-theme-dark-palettes-neutral-99: #fffbfeff;
+  --cv-theme-dark-palettes-neutral-35: #68686eff;
+  --cv-theme-dark-palettes-neutral-25: #4d4d50ff;
+  --cv-theme-dark-palettes-neutral-97: #faf7faff;
+  --cv-theme-dark-palettes-neutral-93: #f2eff2ff;
+  --cv-theme-dark-palettes-neutral-91: #eeeaeeff;
+  --cv-theme-dark-palettes-neutral-2: #000000ff;
+  --cv-theme-dark-palettes-neutral-3: #020202ff;
+  --cv-theme-dark-palettes-neutral-4: #060506ff;
+  --cv-theme-dark-palettes-neutral-5: #0a090aff;
+  --cv-theme-dark-palettes-neutral-6: #0e0e0eff;
+  --cv-theme-dark-palettes-neutral-7: #121212ff;
+  --cv-theme-dark-palettes-neutral-8: #161616ff;
+  --cv-theme-dark-palettes-neutral-9: #1a191aff;
+  --cv-theme-dark-palettes-neutral-11: #222122ff;
+  --cv-theme-dark-palettes-neutral-12: #252426ff;
+  --cv-theme-dark-palettes-neutral-13: #292829ff;
+  --cv-theme-dark-palettes-neutral-14: #2c2b2dff;
+  --cv-theme-dark-palettes-neutral-15: #2f2e30ff;
+  --cv-theme-dark-palettes-neutral-16: #323134ff;
+  --cv-theme-dark-palettes-neutral-17: #353537ff;
+  --cv-theme-dark-palettes-neutral-18: #38383bff;
+  --cv-theme-dark-palettes-neutral-19: #3b3b3eff;
+  --cv-theme-dark-palettes-neutral-21: #414144ff;
+  --cv-theme-dark-palettes-neutral-22: #444447ff;
+  --cv-theme-dark-palettes-neutral-23: #47474aff;
+  --cv-theme-dark-palettes-neutral-24: #4a4a4dff;
+  --cv-theme-dark-palettes-digital-blue-91: #bec9feff;
+  --cv-theme-dark-palettes-digital-blue-92: #c6cffdff;
+  --cv-theme-dark-palettes-digital-blue-93: #ced5feff;
+  --cv-theme-dark-palettes-digital-blue-94: #d5dbfeff;
+  --cv-theme-dark-palettes-digital-blue-99: #fafaffff;
+  --cv-theme-dark-palettes-neutral-variant-100: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-99: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-98: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-97: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-96: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-95: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-94: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-93: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-92: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-91: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-90: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-80: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-70: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-60: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-50: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-40: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-35: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-30: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-25: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-20: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-15: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-10: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-5: #ffffffff;
+  --cv-theme-dark-palettes-neutral-variant-0: #ffffffff;
+  --cv-theme-dark-palettes-neutral-1: #000000ff;
+  --cv-theme-dark-palettes-navy-13: #00233cff;
+  --cv-theme-dark-palettes-navy-98: #f8fafdff;
+  --cv-theme-dark-colors-primary: #bac3ffff;
+  --cv-theme-dark-colors-primary-container: #1d2c43ff;
+  --cv-theme-dark-colors-on-primary: #111a28ff;
+  --cv-theme-dark-colors-secondary: #c3c5ddff;
+  --cv-theme-dark-colors-secondary-container: #434659ff;
+  --cv-theme-dark-colors-on-secondary: #171a2cff;
+  --cv-theme-dark-colors-on-secondary-container: #dfe1f9ff;
+  --cv-theme-dark-colors-tertiary: #ff5f02ff;
+  --cv-theme-dark-colors-tertiary-container: #c25d33ff;
+  --cv-theme-dark-colors-on-tertiary: #612e1aff;
+  --cv-theme-dark-colors-on-tertiary-container: #fef1ecff;
+  --cv-theme-dark-colors-surface: #161616ff;
+  --cv-theme-dark-colors-surface-dim: #0e0e0eff;
+  --cv-theme-dark-colors-surface-bright: #4a4a4dff;
+  --cv-theme-dark-colors-surface-container-lowest: #1e1d1eff;
+  --cv-theme-dark-colors-surface-container-low: #252426ff;
+  --cv-theme-dark-colors-surface-container: #2c2b2dff;
+  --cv-theme-dark-colors-surface-container-high: #323134ff;
+  --cv-theme-dark-colors-surface-container-highest: #38383bff;
+  --cv-theme-dark-colors-on-surface: #ebe8ecff;
+  --cv-theme-dark-colors-on-surface-variant: #d5d3d8ff;
+  --cv-theme-dark-colors-inverse-surface: #ebe8ecff;
+  --cv-theme-dark-colors-inverse-on-surface: #3e3e41ff;
+  --cv-theme-dark-colors-negative: #fd7d69ff;
+  --cv-theme-dark-colors-negative-container: #65322aff;
+  --cv-theme-dark-colors-on-negative: #331915ff;
+  --cv-theme-dark-colors-on-negative-container: #ffac9fff;
+  --cv-theme-dark-colors-positive: #91d890ff;
+  --cv-theme-dark-colors-positive-container: #224b22ff;
+  --cv-theme-dark-colors-on-positive: #112611ff;
+  --cv-theme-dark-colors-on-positive-container: #91d890ff;
+  --cv-theme-dark-colors-caution: #ffcd9eff;
+  --cv-theme-dark-colors-caution-container: #66492fff;
+  --cv-theme-dark-colors-on-caution: #66492fff;
+  --cv-theme-dark-colors-on-caution-container: #ffcd9eff;
+  --cv-theme-dark-colors-outline: #8f8e97ff;
+  --cv-theme-dark-colors-outline-variant: #3e3e41ff;
+  --cv-theme-dark-colors-shadow: #000000ff;
+  --cv-theme-dark-colors-scrim: #00000052;
+  --cv-theme-dark-colors-primary-fixed: #dde1ffff;
+  --cv-theme-dark-colors-primary-fixed-dim: #bac3ffff;
+  --cv-theme-dark-colors-secondary-fixed: #dfe1f9ff;
+  --cv-theme-dark-colors-secondary-fixed-dim: #c3c5ddff;
+  --cv-theme-dark-colors-tertiary-fixed: #f79e79ff;
+  --cv-theme-dark-colors-tertiary-fixed-dim: #f37440ff;
+  --cv-theme-dark-colors-primary-8: #bac3ff14;
+  --cv-theme-dark-colors-primary-12: #bac3ff1f;
+  --cv-theme-dark-colors-on-surface-8: #ebe8ec14;
+  --cv-theme-dark-colors-on-surface-12: #ebe8ec1f;
+  --cv-theme-dark-colors-on-primary-container: #dde1ffff;
+  --cv-theme-dark-colors-inverse-primary: #3053f4ff;
+  --cv-theme-dark-colors-on-surface-38: #ebe8ec61;
+  --cv-theme-dark-colors-on-surface-16: #ebe8ec29;
+  --cv-theme-dark-colors-on-primary-12: #111a281f;
+  --cv-theme-dark-colors-on-primary-8: #111a2814;
+  --cv-theme-dark-colors-primary-16: #bac3ff29;
+  --cv-theme-dark-colors-on-surface-variant-8: #d5d3d814;
+  --cv-theme-dark-colors-on-tertiary-container-8: #fef1ec14;
+  --cv-theme-dark-colors-on-tertiary-container-12: #fef1ec1f;
+  --cv-theme-dark-colors-on-primary-container-12: #dde1ff1f;
+  --cv-theme-dark-colors-on-surface-variant-12: #d5d3d81f;
+  --cv-theme-dark-colors-on-secondary-container-8: #5b5d7214;
+  --cv-theme-dark-colors-on-secondary-container-16: #61637829;
+  --cv-theme-dark-colors-outline-8: #8f8e9714;
+  --cv-theme-dark-colors-outline-12: #8f8e971f;
+  --cv-theme-dark-colors-outline-16: #8f8e9729;
+  --cv-theme-dark-colors-surface-variant: #000000ff;
+  --cv-theme-dark-colors-emphasis: #cc809cff;
+  --cv-theme-dark-colors-emphasis-container: #66404eff;
+  --cv-theme-dark-colors-on-emphasis: #191013ff;
+  --cv-theme-dark-colors-on-emphasis-container: #ffd9e7ff;
+  --cv-theme-dark-colors-positive-16: #91d89029;
+  --cv-theme-dark-colors-caution-16: #ffb77529;
+  --cv-theme-dark-colors-negative-12: #fd7d691f;
+  --cv-theme-dark-colors-on-secondary-container-12: #5b5d721f;
+  --cv-theme-dark-colors-on-primary-16: #111a2829;
+  --cv-theme-dark-colors-on-primary-container-8: #dde1ff14;
+  --cv-theme-dark-colors-on-primary-container-16: #dde1ff29;
+  --cv-theme-dark-colors-on-secondary-8: #171a2c14;
+  --cv-theme-dark-colors-on-secondary-12: #171a2c1f;
+  --cv-theme-dark-colors-on-secondary-16: #171a2c29;
+  --cv-theme-dark-colors-on-tertiary-8: #612e1a14;
+  --cv-theme-dark-colors-on-tertiary-12: #612e1a1f;
+  --cv-theme-dark-colors-on-tertiary-16: #612e1a29;
+  --cv-theme-dark-colors-on-tertiary-container-16: #fef1ec29;
+  --cv-theme-dark-colors-on-surface-variant-16: #d5d3d829;
+  --cv-theme-dark-colors-negative-8: #fd7d6914;
+  --cv-theme-dark-colors-negative-16: #fd7d6929;
+  --cv-theme-dark-colors-positive-12: #91d8901f;
+  --cv-theme-dark-colors-positive-8: #91d89014;
+  --cv-theme-dark-colors-on-positive-8: #11261114;
+  --cv-theme-dark-colors-on-positive-12: #1126111f;
+  --cv-theme-dark-colors-on-positive-16: #11261129;
+  --cv-theme-dark-colors-on-positive-container-8: #91d89014;
+  --cv-theme-dark-colors-on-positive-container-12: #91d8901f;
+  --cv-theme-dark-colors-on-positive-container-16: #91d89029;
+  --cv-theme-dark-colors-caution-12: #ffb7751f;
+  --cv-theme-dark-colors-caution-8: #ffb77514;
+  --cv-theme-dark-colors-on-caution-8: #66492f14;
+  --cv-theme-dark-colors-on-caution-12: #66492f1f;
+  --cv-theme-dark-colors-on-caution-16: #66492f29;
+  --cv-theme-dark-colors-on-negative-8: #33191514;
+  --cv-theme-dark-colors-on-negative-12: #3319151f;
+  --cv-theme-dark-colors-on-negative-16: #33191529;
+  --cv-theme-dark-colors-on-caution-container-8: #19120c14;
+  --cv-theme-dark-colors-on-caution-container-12: #19120c1f;
+  --cv-theme-dark-colors-on-caution-container-16: #19120c29;
+  --cv-theme-dark-colors-emphasis-8: #cc809c14;
+  --cv-theme-dark-colors-emphasis-12: #cc809c1f;
+  --cv-theme-dark-colors-emphasis-16: #cc809c29;
+  --cv-theme-dark-colors-on-emphasis-8: #19101314;
+  --cv-theme-dark-colors-on-emphasis-12: #1910131f;
+  --cv-theme-dark-colors-on-emphasis-16: #19101329;
+  --cv-theme-dark-colors-on-emphasis-container-8: #ffd9e714;
+  --cv-theme-dark-colors-on-emphasis-container-12: #ffd9e71f;
+  --cv-theme-dark-colors-on-emphasis-container-16: #ffd9e729;
+  --cv-theme-dark-colors-inverse-on-surface-12: #3e3e411f;
+  --cv-theme-dark-colors-inverse-primary-12: #3053f41f;
+  --cv-theme-dark-colors-inverse-on-surface-8: #3e3e4114;
+  --cv-theme-dark-colors-inverse-primary-8: #3053f414;
+  --cv-theme-dark-colors-inverse-primary-16: #3053f429;
+  --cv-theme-dark-colors-inverse-on-surface-16: #3e3e4129;
+  --cv-theme-dark-colors-on-primary-74: #111a28bd;
+  --cv-theme-dark-colors-on-surface-74: #ebe8ecbd;
+  --cv-theme-dark-colors-tertiary-8: #ff5f0214;
+  --cv-theme-dark-colors-tertiary-12: #ff5f021f;
+  --cv-theme-dark-colors-tertiary-16: #ff5f0229;
+  --cv-theme-dark-colors-secondary-8: #c3c5dd14;
+  --cv-theme-dark-colors-secondary-12: #c3c5dd1f;
+  --cv-theme-dark-colors-secondary-16: #c3c5dd29;
+  --cv-theme-dark-colors-on-secondary-74: #171a2cbd;
+  --cv-theme-dark-colors-inverse-secondary: #5b5d72ff;
+  --cv-theme-dark-colors-inverse-secondary-8: #61637814;
+  --cv-theme-dark-colors-inverse-secondary-12: #6163781f;
+  --cv-theme-dark-colors-inverse-secondary-16: #61637829;
+  --cv-theme-dark-colors-on-tertiary-74: #612e1abd;
+  --cv-theme-dark-colors-inverse-tertiary: #612e1aff;
+  --cv-theme-dark-colors-inverse-tertiary-8: #ff5f0214;
+  --cv-theme-dark-colors-inverse-tertiary-12: #ff5f021f;
+  --cv-theme-dark-colors-inverse-tertiary-16: #ff5f0229;
+  --cv-theme-dark-colors-on-negative-container-8: #ffac9f14;
+  --cv-theme-dark-colors-on-negative-container-12: #ffac9f1f;
+  --cv-theme-dark-colors-on-negative-container-16: #ffac9f29;
+  --cv-theme-dark-colors-on-surface-4: #ebe8ec0a;
+  --cv-theme-dark-colors-on-surface-variant-4: #d5d3d80a;
+  --cv-theme-dark-colors-inverse-on-surface-4: #3e3e410a;
+  --cv-theme-dark-colors-primary-4: #bac3ff0a;
+  --cv-theme-dark-colors-on-primary-4: #111a280a;
+  --cv-theme-dark-colors-on-primary-container-4: #dde1ff0a;
+  --cv-theme-dark-colors-inverse-primary-4: #3053f40a;
+  --cv-theme-dark-colors-secondary-4: #c3c5dd0a;
+  --cv-theme-dark-colors-on-secondary-4: #171a2c0a;
+  --cv-theme-dark-colors-on-secondary-container-4: #5b5d720a;
+  --cv-theme-dark-colors-inverse-secondary-4: #6163780a;
+  --cv-theme-dark-colors-tertiary-4: #ff5f020a;
+  --cv-theme-dark-colors-on-tertiary-4: #612e1a0a;
+  --cv-theme-dark-colors-on-tertiary-container-4: #fef1ec0a;
+  --cv-theme-dark-colors-inverse-tertiary-4: #ff5f020a;
+  --cv-theme-dark-colors-negative-4: #fd7d690a;
+  --cv-theme-dark-colors-on-negative-4: #3319150a;
+  --cv-theme-dark-colors-on-negative-container-4: #ffac9f0a;
+  --cv-theme-dark-colors-positive-4: #91d8900a;
+  --cv-theme-dark-colors-on-positive-4: #1126110a;
+  --cv-theme-dark-colors-on-positive-container-4: #91d8900a;
+  --cv-theme-dark-colors-caution-4: #ffb7750a;
+  --cv-theme-dark-colors-on-caution-4: #66492f0a;
+  --cv-theme-dark-colors-on-caution-container-4: #19120c0a;
+  --cv-theme-dark-colors-emphasis-4: #cc809c0a;
+  --cv-theme-dark-colors-on-emphasis-4: #1910130a;
+  --cv-theme-dark-colors-on-emphasis-container-4: #ffd9e70a;
+  --cv-theme-dark-colors-on-surface-20: #ebe8ec33;
+  --cv-theme-dark-colors-primary-20: #bac3ff33;
+  --cv-theme-dark-colors-negative-20: #fd7d6933;
+  --cv-theme-dark-colors-positive-20: #91d89033;
+  --cv-theme-dark-colors-caution-20: #ffb77533;
+  --cv-theme-dark-colors-emphasis-20: #cc809c33;
+  --cv-theme-dark-colors-primary-24: #bac3ff3d;
+  --cv-theme-dark-colors-negative-24: #fd7d693d;
+  --cv-theme-dark-colors-positive-24: #91d8903d;
+  --cv-theme-dark-colors-caution-24: #ffb7753d;
+  --cv-theme-dark-colors-emphasis-24: #cc809c3d;
+  --cv-theme-dark-colors-background: #000000ff;
+  --cv-theme-dark-colors-surface-variant-8: #00000014;
+  --cv-theme-dark-colors-surface-variant-12: #0000001f;
+  --cv-theme-dark-colors-surface-variant-16: #00000029;
+  --cv-theme-dark-colors-on-surface-variant-38: #d5d3d861;
+  --cv-theme-dark-colors-on-primary-38: #111a2861;
+  --cv-theme-dark-colors-on-secondary-38: #171a2c61;
+  --cv-theme-dark-colors-on-secondary-container-38: #61637861;
+  --cv-theme-dark-colors-on-secondary-container-74: #616378bd;
+  --cv-theme-dark-colors-on-tertiary-38: #612e1a61;
+  --cv-theme-dark-colors-on-tertiary-container-38: #fef1ec61;
+  --cv-theme-dark-colors-on-tertiary-container-74: #fef1ecbd;
+  --cv-theme-dark-colors-inverse-tertiary-38: #ff5f0261;
+  --cv-theme-dark-colors-inverse-tertiary-74: #ff5f02bd;
+  --cv-theme-dark-colors-negative-38: #fd7d6961;
+  --cv-theme-dark-colors-negative-74: #fd7d69bd;
+  --cv-theme-dark-colors-on-negative-38: #33191561;
+  --cv-theme-dark-colors-on-negative-74: #331915bd;
+  --cv-theme-dark-colors-on-negative-container-38: #ffac9f61;
+  --cv-theme-dark-colors-on-negative-container-74: #ffac9fbd;
+  --cv-theme-dark-colors-positive-38: #91d89061;
+  --cv-theme-dark-colors-positive-74: #91d890bd;
+  --cv-theme-dark-colors-on-positive-38: #11261161;
+  --cv-theme-dark-colors-on-positive-74: #112611bd;
+  --cv-theme-dark-colors-on-positive-container-38: #91d89061;
+  --cv-theme-dark-colors-on-positive-container-74: #91d890bd;
+  --cv-theme-dark-colors-caution-38: #ffb77561;
+  --cv-theme-dark-colors-caution-74: #ffb775bd;
+  --cv-theme-dark-colors-on-caution-38: #66492f61;
+  --cv-theme-dark-colors-on-caution-74: #66492fbd;
+  --cv-theme-dark-colors-on-caution-container-38: #19120c61;
+  --cv-theme-dark-colors-on-caution-container-74: #19120cbd;
+  --cv-theme-dark-colors-emphasis-38: #cc809c61;
+  --cv-theme-dark-colors-emphasis-74: #cc809cbd;
+  --cv-theme-dark-colors-on-emphasis-38: #19101361;
+  --cv-theme-dark-colors-on-emphasis-74: #191013bd;
+  --cv-theme-dark-colors-on-emphasis-container-38: #ffd9e761;
+  --cv-theme-dark-colors-on-emphasis-container-74: #ffd9e7bd;
+  --cv-material-red-50: #ffebee;
+  --cv-material-red-100: #ffcdd2;
+  --cv-material-red-200: #ef9a9a;
+  --cv-material-red-300: #e57373;
+  --cv-material-red-400: #ef5350;
+  --cv-material-red-500: #f44336;
+  --cv-material-red-600: #e53935;
+  --cv-material-red-700: #d32f2f;
+  --cv-material-red-800: #c62828;
+  --cv-material-red-900: #b71c1c;
+  --cv-material-red-a100: #ff8a80;
+  --cv-material-red-a200: #ff5252;
+  --cv-material-red-a400: #ff1744;
+  --cv-material-red-a700: #d50000;
+  --cv-material-pink-50: #fce4ec;
+  --cv-material-pink-100: #f8bbd0;
+  --cv-material-pink-200: #f48fb1;
+  --cv-material-pink-300: #f06292;
+  --cv-material-pink-400: #ec407a;
+  --cv-material-pink-500: #e91e63;
+  --cv-material-pink-600: #d81b60;
+  --cv-material-pink-700: #c2185b;
+  --cv-material-pink-800: #ad1457;
+  --cv-material-pink-900: #880e4f;
+  --cv-material-pink-a100: #ff80ab;
+  --cv-material-pink-a200: #ff4081;
+  --cv-material-pink-a400: #f50057;
+  --cv-material-pink-a700: #c51162;
+  --cv-material-purple-50: #f3e5f5;
+  --cv-material-purple-100: #e1bee7;
+  --cv-material-purple-200: #ce93d8;
+  --cv-material-purple-300: #ba68c8;
+  --cv-material-purple-400: #ab47bc;
+  --cv-material-purple-500: #9c27b0;
+  --cv-material-purple-600: #8e24aa;
+  --cv-material-purple-700: #7b1fa2;
+  --cv-material-purple-800: #6a1b9a;
+  --cv-material-purple-900: #4a148c;
+  --cv-material-purple-a100: #ea80fc;
+  --cv-material-purple-a200: #e040fb;
+  --cv-material-purple-a400: #d500f9;
+  --cv-material-purple-a700: #a0f;
+  --cv-material-deep-purple-50: #ede7f6;
+  --cv-material-deep-purple-100: #d1c4e9;
+  --cv-material-deep-purple-200: #b39ddb;
+  --cv-material-deep-purple-300: #9575cd;
+  --cv-material-deep-purple-400: #7e57c2;
+  --cv-material-deep-purple-500: #673ab7;
+  --cv-material-deep-purple-600: #5e35b1;
+  --cv-material-deep-purple-700: #512da8;
+  --cv-material-deep-purple-800: #4527a0;
+  --cv-material-deep-purple-900: #311b92;
+  --cv-material-deep-purple-a100: #b388ff;
+  --cv-material-deep-purple-a200: #7c4dff;
+  --cv-material-deep-purple-a400: #651fff;
+  --cv-material-deep-purple-a700: #6200ea;
+  --cv-material-indigo-50: #e8eaf6;
+  --cv-material-indigo-100: #c5cae9;
+  --cv-material-indigo-200: #9fa8da;
+  --cv-material-indigo-300: #7986cb;
+  --cv-material-indigo-400: #5c6bc0;
+  --cv-material-indigo-500: #3f51b5;
+  --cv-material-indigo-600: #3949ab;
+  --cv-material-indigo-700: #303f9f;
+  --cv-material-indigo-800: #283593;
+  --cv-material-indigo-900: #1a237e;
+  --cv-material-indigo-a100: #8c9eff;
+  --cv-material-indigo-a200: #536dfe;
+  --cv-material-indigo-a400: #3d5afe;
+  --cv-material-indigo-a700: #304ffe;
+  --cv-material-blue-50: #e3f2fd;
+  --cv-material-blue-100: #bbdefb;
+  --cv-material-blue-200: #90caf9;
+  --cv-material-blue-300: #64b5f6;
+  --cv-material-blue-400: #42a5f5;
+  --cv-material-blue-500: #2196f3;
+  --cv-material-blue-600: #1e88e5;
+  --cv-material-blue-700: #1976d2;
+  --cv-material-blue-800: #1565c0;
+  --cv-material-blue-900: #0d47a1;
+  --cv-material-blue-a100: #82b1ff;
+  --cv-material-blue-a200: #448aff;
+  --cv-material-blue-a400: #2979ff;
+  --cv-material-blue-a700: #2962ff;
+  --cv-material-light-blue-50: #e1f5fe;
+  --cv-material-light-blue-100: #b3e5fc;
+  --cv-material-light-blue-200: #81d4fa;
+  --cv-material-light-blue-300: #4fc3f7;
+  --cv-material-light-blue-400: #29b6f6;
+  --cv-material-light-blue-500: #03a9f4;
+  --cv-material-light-blue-600: #039be5;
+  --cv-material-light-blue-700: #0288d1;
+  --cv-material-light-blue-800: #0277bd;
+  --cv-material-light-blue-900: #01579b;
+  --cv-material-light-blue-a100: #80d8ff;
+  --cv-material-light-blue-a200: #40c4ff;
+  --cv-material-light-blue-a400: #00b0ff;
+  --cv-material-light-blue-a700: #0091ea;
+  --cv-material-cyan-50: #e0f7fa;
+  --cv-material-cyan-100: #b2ebf2;
+  --cv-material-cyan-200: #80deea;
+  --cv-material-cyan-300: #4dd0e1;
+  --cv-material-cyan-400: #26c6da;
+  --cv-material-cyan-500: #00bcd4;
+  --cv-material-cyan-600: #00acc1;
+  --cv-material-cyan-700: #0097a7;
+  --cv-material-cyan-800: #00838f;
+  --cv-material-cyan-900: #006064;
+  --cv-material-cyan-a100: #84ffff;
+  --cv-material-cyan-a200: #18ffff;
+  --cv-material-cyan-a400: #00e5ff;
+  --cv-material-cyan-a700: #00b8d4;
+  --cv-material-teal-50: #e0f2f1;
+  --cv-material-teal-100: #b2dfdb;
+  --cv-material-teal-200: #80cbc4;
+  --cv-material-teal-300: #4db6ac;
+  --cv-material-teal-400: #26a69a;
+  --cv-material-teal-500: #009688;
+  --cv-material-teal-600: #00897b;
+  --cv-material-teal-700: #00796b;
+  --cv-material-teal-800: #00695c;
+  --cv-material-teal-900: #004d40;
+  --cv-material-teal-a100: #a7ffeb;
+  --cv-material-teal-a200: #64ffda;
+  --cv-material-teal-a400: #1de9b6;
+  --cv-material-teal-a700: #00bfa5;
+  --cv-material-green-50: #e8f5e9;
+  --cv-material-green-100: #c8e6c9;
+  --cv-material-green-200: #a5d6a7;
+  --cv-material-green-300: #81c784;
+  --cv-material-green-400: #66bb6a;
+  --cv-material-green-500: #4caf50;
+  --cv-material-green-600: #43a047;
+  --cv-material-green-700: #388e3c;
+  --cv-material-green-800: #2e7d32;
+  --cv-material-green-900: #1b5e20;
+  --cv-material-green-a100: #b9f6ca;
+  --cv-material-green-a200: #69f0ae;
+  --cv-material-green-a400: #00e676;
+  --cv-material-green-a700: #00c853;
+  --cv-material-light-green-50: #f1f8e9;
+  --cv-material-light-green-100: #dcedc8;
+  --cv-material-light-green-200: #c5e1a5;
+  --cv-material-light-green-300: #aed581;
+  --cv-material-light-green-400: #9ccc65;
+  --cv-material-light-green-500: #8bc34a;
+  --cv-material-light-green-600: #7cb342;
+  --cv-material-light-green-700: #689f38;
+  --cv-material-light-green-800: #558b2f;
+  --cv-material-light-green-900: #33691e;
+  --cv-material-light-green-a100: #ccff90;
+  --cv-material-light-green-a200: #b2ff59;
+  --cv-material-light-green-a400: #76ff03;
+  --cv-material-light-green-a700: #64dd17;
+  --cv-material-lime-50: #f9fbe7;
+  --cv-material-lime-100: #f0f4c3;
+  --cv-material-lime-200: #e6ee9c;
+  --cv-material-lime-300: #dce775;
+  --cv-material-lime-400: #d4e157;
+  --cv-material-lime-500: #cddc39;
+  --cv-material-lime-600: #c0ca33;
+  --cv-material-lime-700: #afb42b;
+  --cv-material-lime-800: #9e9d24;
+  --cv-material-lime-900: #827717;
+  --cv-material-lime-a100: #f4ff81;
+  --cv-material-lime-a200: #eeff41;
+  --cv-material-lime-a400: #c6ff00;
+  --cv-material-lime-a700: #aeea00;
+  --cv-material-yellow-50: #fffde7;
+  --cv-material-yellow-100: #fff9c4;
+  --cv-material-yellow-200: #fff59d;
+  --cv-material-yellow-300: #fff176;
+  --cv-material-yellow-400: #ffee58;
+  --cv-material-yellow-500: #ffeb3b;
+  --cv-material-yellow-600: #fdd835;
+  --cv-material-yellow-700: #fbc02d;
+  --cv-material-yellow-800: #f9a825;
+  --cv-material-yellow-900: #f57f17;
+  --cv-material-yellow-a100: #ffff8d;
+  --cv-material-yellow-a200: #ff0;
+  --cv-material-yellow-a400: #ffea00;
+  --cv-material-yellow-a700: #ffd600;
+  --cv-material-amber-50: #fff8e1;
+  --cv-material-amber-100: #ffecb3;
+  --cv-material-amber-200: #ffe082;
+  --cv-material-amber-300: #ffd54f;
+  --cv-material-amber-400: #ffca28;
+  --cv-material-amber-500: #ffc107;
+  --cv-material-amber-600: #ffb300;
+  --cv-material-amber-700: #ffa000;
+  --cv-material-amber-800: #ff8f00;
+  --cv-material-amber-900: #ff6f00;
+  --cv-material-amber-a100: #ffe57f;
+  --cv-material-amber-a200: #ffd740;
+  --cv-material-amber-a400: #ffc400;
+  --cv-material-amber-a700: #ffab00;
+  --cv-material-orange-50: #fff3e0;
+  --cv-material-orange-100: #ffe0b2;
+  --cv-material-orange-200: #ffcc80;
+  --cv-material-orange-300: #ffb74d;
+  --cv-material-orange-400: #ffa726;
+  --cv-material-orange-500: #ff9800;
+  --cv-material-orange-600: #fb8c00;
+  --cv-material-orange-700: #f57c00;
+  --cv-material-orange-800: #ef6c00;
+  --cv-material-orange-900: #e65100;
+  --cv-material-orange-a100: #ffd180;
+  --cv-material-orange-a200: #ffab40;
+  --cv-material-orange-a400: #ff9100;
+  --cv-material-orange-a700: #ff6d00;
+  --cv-material-deep-orange-50: #fbe9e7;
+  --cv-material-deep-orange-100: #ffccbc;
+  --cv-material-deep-orange-200: #ffab91;
+  --cv-material-deep-orange-300: #ff8a65;
+  --cv-material-deep-orange-400: #ff7043;
+  --cv-material-deep-orange-500: #ff5722;
+  --cv-material-deep-orange-600: #f4511e;
+  --cv-material-deep-orange-700: #e64a19;
+  --cv-material-deep-orange-800: #d84315;
+  --cv-material-deep-orange-900: #bf360c;
+  --cv-material-deep-orange-a100: #ff9e80;
+  --cv-material-deep-orange-a200: #ff6e40;
+  --cv-material-deep-orange-a400: #ff3d00;
+  --cv-material-deep-orange-a700: #dd2c00;
+  --cv-material-brown-50: #efebe9;
+  --cv-material-brown-100: #d7ccc8;
+  --cv-material-brown-200: #bcaaa4;
+  --cv-material-brown-300: #a1887f;
+  --cv-material-brown-400: #8d6e63;
+  --cv-material-brown-500: #795548;
+  --cv-material-brown-600: #6d4c41;
+  --cv-material-brown-700: #5d4037;
+  --cv-material-brown-800: #4e342e;
+  --cv-material-brown-900: #3e2723;
+  --cv-material-grey-50: #fafafa;
+  --cv-material-grey-100: #f5f5f5;
+  --cv-material-grey-200: #eee;
+  --cv-material-grey-300: #e0e0e0;
+  --cv-material-grey-400: #bdbdbd;
+  --cv-material-grey-500: #9e9e9e;
+  --cv-material-grey-600: #757575;
+  --cv-material-grey-700: #616161;
+  --cv-material-grey-800: #424242;
+  --cv-material-grey-900: #212121;
+  --cv-material-blue-grey-50: #eceff1;
+  --cv-material-blue-grey-100: #cfd8dc;
+  --cv-material-blue-grey-200: #b0bec5;
+  --cv-material-blue-grey-300: #90a4ae;
+  --cv-material-blue-grey-400: #78909c;
+  --cv-material-blue-grey-500: #607d8b;
+  --cv-material-blue-grey-600: #546e7a;
+  --cv-material-blue-grey-700: #455a64;
+  --cv-material-blue-grey-800: #37474f;
+  --cv-material-blue-grey-900: #263238;
+  --cv-typography-font-family: Arial, sans-serif;
+  --cv-typography-headline1-font-family: 'Inter', sans-serif;
+  --cv-typography-headline1-font-size: 96px;
+  --cv-typography-headline1-font-weight: 500;
+  --cv-typography-headline1-line-height: 112px;
+  --cv-typography-headline2-font-family: 'Inter', sans-serif;
+  --cv-typography-headline2-font-size: 60px;
+  --cv-typography-headline2-font-weight: 600;
+  --cv-typography-headline2-line-height: 84px;
+  --cv-typography-headline3-font-family: 'Inter', sans-serif;
+  --cv-typography-headline3-font-size: 48px;
+  --cv-typography-headline3-font-weight: 600;
+  --cv-typography-headline3-line-height: 64px;
+  --cv-typography-headline4-font-family: 'Inter', sans-serif;
+  --cv-typography-headline4-font-size: 34px;
+  --cv-typography-headline4-font-weight: 700;
+  --cv-typography-headline4-line-height: 48px;
+  --cv-typography-headline5-font-family: 'Inter', sans-serif;
+  --cv-typography-headline5-font-size: 24px;
+  --cv-typography-headline5-font-weight: 700;
+  --cv-typography-headline5-line-height: 36px;
+  --cv-typography-headline6-font-family: 'Inter', sans-serif;
+  --cv-typography-headline6-font-size: 20px;
+  --cv-typography-headline6-font-weight: 700;
+  --cv-typography-headline6-line-height: 28px;
+  --cv-typography-subtitle1-font-family: 'Inter', sans-serif;
+  --cv-typography-subtitle1-font-size: 14px;
+  --cv-typography-subtitle1-font-weight: 600;
+  --cv-typography-subtitle1-line-height: 20px;
+  --cv-typography-subtitle2-font-family: 'Inter', sans-serif;
+  --cv-typography-subtitle2-font-size: 16px;
+  --cv-typography-subtitle2-font-weight: 600;
+  --cv-typography-subtitle2-line-height: 24px;
+  --cv-typography-body1-font-family: Arial, sans-serif;
+  --cv-typography-body1-font-size: 16px;
+  --cv-typography-body1-font-weight: 400;
+  --cv-typography-body1-line-height: 24px;
+  --cv-typography-body2-font-family: Arial, sans-serif;
+  --cv-typography-body2-font-size: 14px;
+  --cv-typography-body2-font-weight: 400;
+  --cv-typography-body2-line-height: 20px;
+  --cv-typography-button-font-family: 'Inter', sans-serif;
+  --cv-typography-button-font-size: 14px;
+  --cv-typography-button-font-weight: 600;
+  --cv-typography-button-line-height: 16px;
+  --cv-typography-caption-font-family: Arial, sans-serif;
+  --cv-typography-caption-font-size: 12px;
+  --cv-typography-caption-font-weight: 400;
+  --cv-typography-caption-line-height: 16px;
+  --cv-typography-code-font-family: Menlo;
+  --cv-typography-code-font-size: 12px;
+  --cv-typography-code-font-weight: 400;
+  --cv-typography-code-line-height: 20px;
+}
+
+:root {
+  color-scheme: light;
+  supported-color-schemes: light;
+}
+
+a {
+  color: inherit !important;
+}
+
+.body div,
+.body p {
+  color: #394851 !important;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.bg-gray-25 {
+  background-color: #f6f7fbff !important;
+}
+
+.bg-orange {
+  background-color: #ff5f02ff !important;
+}
+
+.bg-primary,
+.cta-button p,
+.cta-button a,
+.cta-button td,
+.social-icon table {
+  background-color: #00233cff !important;
+  color: #ffffffff !important;
+}
+
+.bg-white {
+  background-color: #ffffffff !important;
+}
+
+.bold {
+  font-weight: 600;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #d1d5e7ff;
+}
+
+.border-left {
+  border-left: 1px solid #d1d5e7ff;
+}
+
+.border-right {
+  border-right: 1px solid #d1d5e7ff;
+}
+
+.border-top {
+  border-top: 1px solid #d1d5e7ff;
+}
+
+.color-white div,
+.color-white p,
+.color-white a {
+  color: #ffffffff !important;
+}
+
+.color-gray-500 div,
+.color-gray-500 p {
+  color: #727d9cff !important;
+}
+
+.color-slate-900 div,
+.color-slate-900 p {
+  color: #394851 !important;
+}
+
+.footer-info {
+  color: #727d9cff;
+}
+
+.list li {
+  margin: 0.5rem 0;
+}
+
+.orange-line {
+  border-radius: 2px;
+  border-top: 2px solid #ff5f02ff !important;
+  width: 18px;
+}
+
+.primary-button p,
+.primary-button a,
+.primary-button td {
+  background-color: #3053f4ff !important;
+  color: #ffffffff !important;
+}
+
+.social-icon table td {
+  padding: 5px;
+}
+
+.section-title div {
+  color: #43515a !important;
+}
+
+.title div {
+  color: #394851 !important;
+}
diff --git a/libs/email-templates/src/styles/mjmlStyles.mjml b/libs/email-templates/src/styles/mjmlStyles.mjml
new file mode 100644
index 0000000000..b6c45e8e6b
--- /dev/null
+++ b/libs/email-templates/src/styles/mjmlStyles.mjml
@@ -0,0 +1,138 @@
+<mj-attributes>
+  <mj-text padding="0" />
+  <mj-all
+    font-family="Inter, 'Open Sans', 'Helvetica Neue', sans-serif, -apple-system"
+  />
+  <mj-text
+    padding="0"
+    font-size="16px"
+    font-style="normal"
+    font-weight="400"
+    line-height="22px"
+  />
+  <mj-class
+    name="title"
+    font-size="20px"
+    font-style="normal"
+    font-weight="600"
+    line-height="26px"
+    letter-spacing="-0.4px"
+  />
+  <mj-class
+    name="section-title"
+    font-size="26px"
+    font-style="normal"
+    font-weight="300"
+    line-height="34px"
+    letter-spacing="-0.78px"
+  />
+  <mj-class
+    name="button"
+    height="50px"
+    padding="16px 0"
+    border-radius="12px"
+    font-family="Helvetica"
+    font-size="15px"
+    font-style="normal"
+    font-weight="700"
+    line-height="22px"
+  />
+  <mj-class name="bold" font-weight="600" />
+  <mj-class
+    name="small"
+    font-weight="300"
+    font-size="11px"
+    line-height="normal"
+  />
+  <mj-class name="underline" text-decoration="underline" />
+  <mj-class
+    name="eyebrow"
+    font-size="14px"
+    font-style="normal"
+    font-weight="400"
+    line-height="22px"
+  />
+  <mj-class name="p-0" padding="0" />
+  <mj-class name="p-0_25" padding="0.25rem" />
+  <mj-class name="p-0_5" padding="0.5rem" />
+  <mj-class name="p-0_75" padding="0.75rem" />
+  <mj-class name="p-1" padding="1rem" />
+  <mj-class name="p-1_25" padding="1.25rem" />
+  <mj-class name="p-1_5" padding="1.5rem" />
+  <mj-class name="p-1_75" padding="1.75rem" />
+  <mj-class name="p-2" padding="2rem" />
+  <mj-class name="pt-0" padding-top="0" />
+  <mj-class name="pt-0_25" padding-top="0.25rem" />
+  <mj-class name="pt-0_5" padding-top="0.5rem" />
+  <mj-class name="pt-0_75" padding-top="0.75rem" />
+  <mj-class name="pt-1" padding-top="1rem" />
+  <mj-class name="pt-1_25" padding-top="1.25rem" />
+  <mj-class name="pt-1_5" padding-top="1.5rem" />
+  <mj-class name="pt-1_75" padding-top="1.75rem" />
+  <mj-class name="pt-2" padding-top="2rem" />
+  <mj-class name="pb-0" padding-bottom="0" />
+  <mj-class name="pb-0_25" padding-bottom="0.25rem" />
+  <mj-class name="pb-0_5" padding-bottom="0.5rem" />
+  <mj-class name="pb-0_75" padding-bottom="0.75rem" />
+  <mj-class name="pb-1" padding-bottom="1rem" />
+  <mj-class name="pb-1_25" padding-bottom="1.25rem" />
+  <mj-class name="pb-1_5" padding-bottom="1.5rem" />
+  <mj-class name="pb-1_75" padding-bottom="1.75rem" />
+  <mj-class name="pb-2" padding-bottom="2rem" />
+  <mj-class name="pl-0" padding-left="0" />
+  <mj-class name="pl-0_25" padding-left="0.25rem" />
+  <mj-class name="pl-0_5" padding-left="0.5rem" />
+  <mj-class name="pl-0_75" padding-left="0.75rem" />
+  <mj-class name="pl-1" padding-left="1rem" />
+  <mj-class name="pl-1_25" padding-left="1.25rem" />
+  <mj-class name="pl-1_5" padding-left="1.5rem" />
+  <mj-class name="pl-1_75" padding-left="1.75rem" />
+  <mj-class name="pl-2" padding-left="2rem" />
+  <mj-class name="pr-0" padding-right="0" />
+  <mj-class name="pr-0_25" padding-right="0.25rem" />
+  <mj-class name="pr-0_5" padding-right="0.5rem" />
+  <mj-class name="pr-0_75" padding-right="0.75rem" />
+  <mj-class name="pr-1" padding-right="1rem" />
+  <mj-class name="pr-1_25" padding-right="1.25rem" />
+  <mj-class name="pr-1_5" padding-right="1.5rem" />
+  <mj-class name="pr-1_75" padding-right="1.75rem" />
+  <mj-class name="pr-2" padding-right="2rem" />
+  <mj-class name="help" padding="30px 35px" />
+  <mj-class name="help-text" line-height="26px" />
+  <mj-class
+    name="footer-info"
+    text-align="center"
+    font-size="12px"
+    font-style="normal"
+    font-weight="400"
+    line-height="18px"
+  />
+  <mj-class
+    name="marketing-h1"
+    font-size="32px"
+    font-family="Helvetica"
+    font-style="normal"
+    font-weight="300"
+    line-height="40px"
+    letter-spacing="-0.32px"
+  />
+  <mj-class
+    name="marketing-h2"
+    font-size="26px"
+    font-family="Helvetica Neue"
+    font-style="normal"
+    font-weight="300"
+    line-height="34px"
+  />
+  <mj-class
+    name="marketing-h3"
+    font-size="20px"
+    font-family="Helvetica Neue"
+    font-style="normal"
+    font-weight="700"
+    line-height="28px"
+  />
+  <mj-class name="align-left" text-align="left" />
+  <mj-class name="img-rounded" border-radius="8px" />
+  <mj-class name="social-link" border-radius="50px" padding="5px" />
+</mj-attributes>
diff --git a/libs/email-templates/src/styles/styles.scss b/libs/email-templates/src/styles/styles.scss
new file mode 100644
index 0000000000..e9baba9e0d
--- /dev/null
+++ b/libs/email-templates/src/styles/styles.scss
@@ -0,0 +1,117 @@
+@import '@covalent/tokens';
+
+:root {
+  color-scheme: light;
+  supported-color-schemes: light;
+}
+
+a {
+  color: inherit !important;
+}
+
+.body div,
+.body p {
+  color: var(--cv-teradata-slate-900) !important;
+}
+
+.align-center {
+  text-align: center;
+}
+
+.align-left {
+  text-align: left;
+}
+
+.align-right {
+  text-align: right;
+}
+
+.bg-gray-25 {
+  background-color: var(--cv-theme-light-palettes-neutral-97) !important;
+}
+
+.bg-orange {
+  background-color: var(--cv-theme-light-palettes-orange-40) !important;
+}
+
+.bg-primary,
+.cta-button p,
+.cta-button a,
+.cta-button td,
+.social-icon table {
+  background-color: var(--cv-theme-light-palettes-navy-13) !important;
+  color: var(--cv-light-on-primary) !important;
+}
+
+.bg-white {
+  background-color: var(--cv-light-surface-canvas) !important;
+}
+
+.bold {
+  font-weight: 600;
+}
+
+.border-bottom {
+  border-bottom: 1px solid var(--cv-light-divider);
+}
+
+.border-left {
+  border-left: 1px solid var(--cv-light-divider);
+}
+
+.border-right {
+  border-right: 1px solid var(--cv-light-divider);
+}
+
+.border-top {
+  border-top: 1px solid var(--cv-light-divider);
+}
+
+.color-white div,
+.color-white p,
+.color-white a {
+  color: var(--cv-light-on-primary) !important;
+}
+
+.color-gray-500 div,
+.color-gray-500 p {
+  color: var(--cv-theme-light-palettes-neutral-40) !important;
+}
+
+.color-slate-900 div,
+.color-slate-900 p {
+  color: var(--cv-teradata-slate-900) !important;
+}
+
+.footer-info {
+  color: var(--cv-theme-light-palettes-neutral-40, #5e7484);
+}
+
+.list li {
+  margin: 0.5rem 0;
+}
+
+.orange-line {
+  border-radius: 2px;
+  border-top: 2px solid var(--cv-theme-light-palettes-orange-40) !important;
+  width: 18px;
+}
+
+.primary-button p,
+.primary-button a,
+.primary-button td {
+  background-color: var(--cv-light-primary) !important;
+  color: var(--cv-light-on-primary) !important;
+}
+
+.social-icon table td {
+  padding: 5px;
+}
+
+.section-title div {
+  color: var(--cv-teradata-slate-800) !important;
+}
+
+.title div {
+  color: var(--cv-teradata-slate-900) !important;
+}
diff --git a/libs/email-templates/src/utils/mjml-utils.ts b/libs/email-templates/src/utils/mjml-utils.ts
new file mode 100644
index 0000000000..01a515b672
--- /dev/null
+++ b/libs/email-templates/src/utils/mjml-utils.ts
@@ -0,0 +1,15 @@
+import mjml2html from 'mjml-browser';
+
+/**
+ * Converts an MJML string into its corresponding HTML.
+ *
+ * @param {string} mjml - The MJML string to be converted.
+ * @returns {string} - The resulting HTML string after conversion.
+ */
+export const convertMjmlToHtml = (mjml: string): string => {
+  // Destructuring the HTML output from the result of mjml2html conversion
+  const { html } = mjml2html(mjml);
+
+  // Returning the HTML string
+  return html;
+};
diff --git a/libs/email-templates/src/utils/style-utils.ts b/libs/email-templates/src/utils/style-utils.ts
new file mode 100644
index 0000000000..3873f65f59
--- /dev/null
+++ b/libs/email-templates/src/utils/style-utils.ts
@@ -0,0 +1,66 @@
+/**
+ * Strips the first :root { ... } block from a given CSS string.
+ *
+ * @param css - The CSS file content as a string.
+ * @returns The CSS content without the first :root { ... } block.
+ */
+export const stripFirstRootSection = (css: string): string => {
+  // Regular expression to match the first :root { ... } block
+  const rootSectionRegex = /:root\s*\{[^}]*\}/;
+
+  // Use replace to strip the first :root section found which contains all the covalent tokens
+  return css.replace(rootSectionRegex, '');
+};
+
+/**
+ * Inject predefined MJML and CSS styles into the provided MJML template.
+ *
+ * @param {string} mjml - The MJML template string.
+ * @param {string} cssStyles - The CSS styles to be injected into the MJML template.
+ * @param {string} mjmlStyles - The MJML attributes or styles to be injected into the MJML template.
+ * @returns {string} - The MJML template with injected styles.
+ */
+export const injectPredefinedStyles = (
+  mjml: string,
+  cssStyles: string,
+  mjmlStyles: string
+) => {
+  // Check if the MJML has an <mj-head> tag
+  const headTagRegex = /<mj-head>([\s\S]*?)<\/mj-head>/;
+  const headTagMatch = mjml.match(headTagRegex);
+  let mjmlWithStyle = mjml;
+
+  if (headTagMatch) {
+    // If <mj-head> exists, insert the <mj-style> and <mj-attributes> tags inside it
+    const headContent = headTagMatch[1];
+    const newHeadContent = `${headContent}
+        ${mjmlStyles}
+        <mj-style inline="inline">
+          ${cssStyles}
+        </mj-style>`;
+    mjmlWithStyle = mjml.replace(
+      headTagRegex,
+      `<mj-head>${newHeadContent}</mj-head>`
+    );
+  } else {
+    // If <mj-head> does not exist, create it with both <mj-attributes> and <mj-style> tags
+    const headTagInsert = `<mj-head>
+        ${mjmlStyles}
+        <mj-style inline="inline">
+          ${cssStyles}
+        </mj-style>
+      </mj-head>`;
+    const headTagPosition = /<mj-body>/; // Insert before <mj-body>
+    if (headTagPosition.test(mjml)) {
+      mjmlWithStyle = mjml.replace(
+        headTagPosition,
+        `${headTagInsert}\n<mj-body>`
+      );
+    } else {
+      // If no <mj-body>, just add it at the end
+      mjmlWithStyle = `${mjml}\n${headTagInsert}`;
+    }
+  }
+
+  return mjmlWithStyle;
+};
diff --git a/libs/email-templates/tsconfig.json b/libs/email-templates/tsconfig.json
new file mode 100644
index 0000000000..ab0659018e
--- /dev/null
+++ b/libs/email-templates/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/libs/email-templates/tsconfig.lib.json b/libs/email-templates/tsconfig.lib.json
new file mode 100644
index 0000000000..56bc5e5cfe
--- /dev/null
+++ b/libs/email-templates/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["vite.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/libs/email-templates/tsconfig.spec.json b/libs/email-templates/tsconfig.spec.json
new file mode 100644
index 0000000000..3c002c215a
--- /dev/null
+++ b/libs/email-templates/tsconfig.spec.json
@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/libs/email-templates/vite.config.ts b/libs/email-templates/vite.config.ts
new file mode 100644
index 0000000000..826d418faa
--- /dev/null
+++ b/libs/email-templates/vite.config.ts
@@ -0,0 +1,61 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/libs/test',
+
+  plugins: [
+    nxViteTsPaths(),
+    dts({
+      entryRoot: 'src',
+      tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'),
+      skipDiagnostics: true,
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/libs/email-templates',
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'email-templates',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [],
+    },
+  },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../node_modules/.vitest',
+    },
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    passWithNoTests: true,
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/libs/email-templates',
+    },
+  },
+});
diff --git a/nx.json b/nx.json
index 0ca153959d..565fe642c8 100644
--- a/nx.json
+++ b/nx.json
@@ -55,6 +55,15 @@
     "e2e": {
       "inputs": ["default", "^production"],
       "cache": true
+    },
+    "@nx/vite:test": {
+      "cache": true,
+      "inputs": ["default", "^production"]
+    },
+    "@nx/vite:build": {
+      "cache": true,
+      "dependsOn": ["^build"],
+      "inputs": ["production", "^production"]
     }
   },
   "nxCloudAccessToken": "ZGI4NjZjMTUtZjViMS00NDNmLTgyMTktNTIyMWViNWJhNDNjfHJlYWQ="
diff --git a/package-lock.json b/package-lock.json
index b9af21c038..400b2ee0fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,6 +60,7 @@
         "echarts-wordcloud": "^2.1.0",
         "highlight.js": "^11.9.0",
         "lit": "^2.2.8",
+        "mjml-browser": "^4.15.3",
         "monaco-editor": "^0.34.1",
         "rxjs": "^7.4.0",
         "shepherd.js": "^9.0.0",
@@ -90,6 +91,7 @@
         "@nx/jest": "17.3.1",
         "@nx/js": "17.3.1",
         "@nx/linter": "17.3.1",
+        "@nx/vite": "17.3.1",
         "@nx/web": "17.3.1",
         "@nx/workspace": "17.3.1",
         "@schematics/angular": "17.1.2",
@@ -110,6 +112,7 @@
         "@types/echarts": "^4.9.13",
         "@types/jest": "29.5.11",
         "@types/jsdom": "^20.0.0",
+        "@types/mjml-browser": "^4.15.0",
         "@types/node": "^18.16.9",
         "@types/showdown": "^2.0.6",
         "@typescript-eslint/eslint-plugin": "6.20.0",
@@ -135,10 +138,13 @@
         "monaco-editor-webpack-plugin": "^7.1.0",
         "ng-packagr": "17.0.3",
         "nx": "17.3.1",
+        "postcss": "^8.4.41",
+        "postcss-custom-properties": "^14.0.1",
         "postcss-preset-env": "^9.1.0",
         "postcss-scss": "^4.0.6",
         "prettier": "^2.6.2",
         "pretty-quick": "^3.1.3",
+        "raw-loader": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.69.7",
@@ -152,6 +158,7 @@
         "ts-jest": "29.1.1",
         "typescript": "5.3.3",
         "vite": "^4.5.3",
+        "vite-plugin-dts": "~2.3.0",
         "vitest": "^0.27.2"
       }
     },
@@ -657,6 +664,34 @@
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true
     },
+    "node_modules/@angular-devkit/build-angular/node_modules/postcss": {
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+      "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"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/@angular-devkit/build-angular/node_modules/rollup": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.10.0.tgz",
@@ -4003,9 +4038,9 @@
       }
     },
     "node_modules/@covalent/tokens": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/@covalent/tokens/-/tokens-8.17.0.tgz",
-      "integrity": "sha512-+Gdq94XqpU51ctrPXt0cSBPY60pjqWh05JAANg4aonY0wWCmFE4M3dlsyOjLMGRv9g0Bk8Kcz73oeR6cXcC9gA==",
+      "version": "8.20.8",
+      "resolved": "https://registry.npmjs.org/@covalent/tokens/-/tokens-8.20.8.tgz",
+      "integrity": "sha512-kcHbCmb6IxI27pdajneFSaOwUj5DV8miSc9/hBGwsL5chqnxLAaXryBCPK7Zc/L0hCz7UGPqiZPF/0matPZ2hg==",
       "dev": true
     },
     "node_modules/@cspotcode/source-map-support": {
@@ -4031,9 +4066,9 @@
       }
     },
     "node_modules/@csstools/cascade-layer-name-parser": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.7.tgz",
-      "integrity": "sha512-9J4aMRJ7A2WRjaRLvsMeWrL69FmEuijtiW1XlK/sG+V0UJiHVYUyvj9mY4WAXfU/hGIiGOgL8e0jJcRyaZTjDQ==",
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.13.tgz",
+      "integrity": "sha512-MX0yLTwtZzr82sQ0zOjqimpZbzjMaK/h2pmlrLK7DCzlmiZLYFpoO94WmN1akRVo6ll/TdpHb53vihHLUMyvng==",
       "dev": true,
       "funding": [
         {
@@ -4049,8 +4084,8 @@
         "node": "^14 || ^16 || >=18"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.5.0",
-        "@csstools/css-tokenizer": "^2.2.3"
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1"
       }
     },
     "node_modules/@csstools/color-helpers": {
@@ -4123,9 +4158,9 @@
       }
     },
     "node_modules/@csstools/css-parser-algorithms": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.5.0.tgz",
-      "integrity": "sha512-abypo6m9re3clXA00eu5syw+oaPHbJTPapu9C4pzNsJ4hdZDzushT50Zhu+iIYXgEe1CxnRMn7ngsbV+MLrlpQ==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.7.1.tgz",
+      "integrity": "sha512-2SJS42gxmACHgikc1WGesXLIT8d/q2l0UFM7TaEeIzdFCE/FPMtTiizcPGGJtlPo2xuQzY09OhrLTzRxqJqwGw==",
       "dev": true,
       "funding": [
         {
@@ -4141,13 +4176,13 @@
         "node": "^14 || ^16 || >=18"
       },
       "peerDependencies": {
-        "@csstools/css-tokenizer": "^2.2.3"
+        "@csstools/css-tokenizer": "^2.4.1"
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.3.tgz",
-      "integrity": "sha512-pp//EvZ9dUmGuGtG1p+n17gTHEOqu9jO+FiCUjNN3BDmyhdA2Jq9QsVeR7K8/2QCK17HSsioPlTW9ZkzoWb3Lg==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.4.1.tgz",
+      "integrity": "sha512-eQ9DIktFJBhGjioABJRtUucoWR2mwllurfnM8LuNGAqX3ViZXaUchqk+1s7jjtkFiT9ySdACsFEA3etErkALUg==",
       "dev": true,
       "funding": [
         {
@@ -4927,6 +4962,28 @@
         "postcss-selector-parser": "^6.0.13"
       }
     },
+    "node_modules/@csstools/utilities": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-2.0.0.tgz",
+      "integrity": "sha512-5VdOr0Z71u+Yp3ozOx8T11N703wIFGVRgOWbOZMKgglPJsWA54MRIoMNVMa7shUToIhx5J8vX4sOZgD2XiihiQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/@cypress/request": {
       "version": "2.88.12",
       "resolved": "https://registry.npmjs.org/@cypress/request/-/request-2.88.12.tgz",
@@ -12117,6 +12174,281 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/@microsoft/api-extractor": {
+      "version": "7.47.9",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.47.9.tgz",
+      "integrity": "sha512-TTq30M1rikVsO5wZVToQT/dGyJY7UXJmjiRtkHPLb74Prx3Etw8+bX7Bv7iLuby6ysb7fuu1NFWqma+csym8Jw==",
+      "dev": true,
+      "dependencies": {
+        "@microsoft/api-extractor-model": "7.29.8",
+        "@microsoft/tsdoc": "~0.15.0",
+        "@microsoft/tsdoc-config": "~0.17.0",
+        "@rushstack/node-core-library": "5.9.0",
+        "@rushstack/rig-package": "0.5.3",
+        "@rushstack/terminal": "0.14.2",
+        "@rushstack/ts-command-line": "4.22.8",
+        "lodash": "~4.17.15",
+        "minimatch": "~3.0.3",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4",
+        "source-map": "~0.6.1",
+        "typescript": "5.4.2"
+      },
+      "bin": {
+        "api-extractor": "bin/api-extractor"
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.29.8.tgz",
+      "integrity": "sha512-t3Z/xcO6TRbMcnKGVMs4uMzv/gd5j0NhMiJIGjD4cJMeFJ1Hf8wnLSx37vxlRlL0GWlGJhnFgxvnaL6JlS+73g==",
+      "dev": true,
+      "dependencies": {
+        "@microsoft/tsdoc": "~0.15.0",
+        "@microsoft/tsdoc-config": "~0.17.0",
+        "@rushstack/node-core-library": "5.9.0"
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model/node_modules/@rushstack/node-core-library": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.9.0.tgz",
+      "integrity": "sha512-MMsshEWkTbXqxqFxD4gcIUWQOCeBChlGczdZbHfqmNZQFLHB3yWxDFSMHFUdu2/OB9NUk7Awn5qRL+rws4HQNg==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "~8.13.0",
+        "ajv-draft-04": "~1.0.0",
+        "ajv-formats": "~3.0.1",
+        "fs-extra": "~7.0.1",
+        "import-lazy": "~4.0.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model/node_modules/ajv": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+      "integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.4.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model/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,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model/node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@microsoft/api-extractor-model/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/@rushstack/node-core-library": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.9.0.tgz",
+      "integrity": "sha512-MMsshEWkTbXqxqFxD4gcIUWQOCeBChlGczdZbHfqmNZQFLHB3yWxDFSMHFUdu2/OB9NUk7Awn5qRL+rws4HQNg==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "~8.13.0",
+        "ajv-draft-04": "~1.0.0",
+        "ajv-formats": "~3.0.1",
+        "fs-extra": "~7.0.1",
+        "import-lazy": "~4.0.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/ajv": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+      "integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.4.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/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,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/minimatch": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.8.tgz",
+      "integrity": "sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/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,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/typescript": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/@microsoft/api-extractor/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/@microsoft/tsdoc": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.15.0.tgz",
+      "integrity": "sha512-HZpPoABogPvjeJOdzCOSJsXeL/SMCBgBZMVC3X3d7YYp2gf31MfxhUoYUNwf1ERPJOnQc0wkFn9trqI6ZEdZuA==",
+      "dev": true
+    },
+    "node_modules/@microsoft/tsdoc-config": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.17.0.tgz",
+      "integrity": "sha512-v/EYRXnCAIHxOHW+Plb6OWuUoMotxTN0GLatnpOb1xq0KuTNw/WI3pamJx/UbsoJP5k9MCw1QxvvhPcF9pH3Zg==",
+      "dev": true,
+      "dependencies": {
+        "@microsoft/tsdoc": "0.15.0",
+        "ajv": "~8.12.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.2"
+      }
+    },
     "node_modules/@ndelangen/get-tarball": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/@ndelangen/get-tarball/-/get-tarball-3.0.9.tgz",
@@ -12546,6 +12878,15 @@
         "tao": "index.js"
       }
     },
+    "node_modules/@nrwl/vite": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/@nrwl/vite/-/vite-17.3.1.tgz",
+      "integrity": "sha512-sJymNblmpz5oEYpfyBJob6WIgJ2IY3HHs4EzAOJ1gMS56sgDVNC/27InrIc+SvYw5Ht+q5B+bzPp4gPfL8ntBw==",
+      "dev": true,
+      "dependencies": {
+        "@nx/vite": "17.3.1"
+      }
+    },
     "node_modules/@nrwl/web": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/@nrwl/web/-/web-17.3.1.tgz",
@@ -13435,6 +13776,25 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@nx/vite": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/@nx/vite/-/vite-17.3.1.tgz",
+      "integrity": "sha512-EYvCUNL3YPPLLSZGzdaR8R9ZoZ5u3HrZFJnL7zIv0gZDkQMasYC3dNrnbHPl72Fs93M5nbrf6cNU1umlhkpjow==",
+      "dev": true,
+      "dependencies": {
+        "@nrwl/vite": "17.3.1",
+        "@nx/devkit": "17.3.1",
+        "@nx/js": "17.3.1",
+        "@phenomnomnominal/tsquery": "~5.0.1",
+        "@swc/helpers": "~0.5.0",
+        "enquirer": "~2.3.6",
+        "tsconfig-paths": "^4.1.2"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0",
+        "vitest": "^1.0.0"
+      }
+    },
     "node_modules/@nx/web": {
       "version": "17.3.1",
       "resolved": "https://registry.npmjs.org/@nx/web/-/web-17.3.1.tgz",
@@ -14933,6 +15293,214 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/@rushstack/node-core-library": {
+      "version": "3.66.1",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-3.66.1.tgz",
+      "integrity": "sha512-ker69cVKAoar7MMtDFZC4CzcDxjwqIhFzqEnYI5NRN/8M3om6saWCVx/A7vL2t/jFCJsnzQplRDqA7c78pytng==",
+      "dev": true,
+      "dependencies": {
+        "colors": "~1.2.1",
+        "fs-extra": "~7.0.1",
+        "import-lazy": "~4.0.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4",
+        "z-schema": "~5.0.2"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@rushstack/node-core-library/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/@rushstack/rig-package": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@rushstack/rig-package/-/rig-package-0.5.3.tgz",
+      "integrity": "sha512-olzSSjYrvCNxUFZowevC3uz8gvKr3WTpHQ7BkpjtRpA3wK+T0ybep/SRUMfr195gBzJm5gaXw0ZMgjIyHqJUow==",
+      "dev": true,
+      "dependencies": {
+        "resolve": "~1.22.1",
+        "strip-json-comments": "~3.1.1"
+      }
+    },
+    "node_modules/@rushstack/terminal": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.14.2.tgz",
+      "integrity": "sha512-2fC1wqu1VCExKC0/L+0noVcFQEXEnoBOtCIex1TOjBzEDWcw8KzJjjj7aTP6mLxepG0XIyn9OufeFb6SFsa+sg==",
+      "dev": true,
+      "dependencies": {
+        "@rushstack/node-core-library": "5.9.0",
+        "supports-color": "~8.1.1"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/@rushstack/node-core-library": {
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.9.0.tgz",
+      "integrity": "sha512-MMsshEWkTbXqxqFxD4gcIUWQOCeBChlGczdZbHfqmNZQFLHB3yWxDFSMHFUdu2/OB9NUk7Awn5qRL+rws4HQNg==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "~8.13.0",
+        "ajv-draft-04": "~1.0.0",
+        "ajv-formats": "~3.0.1",
+        "fs-extra": "~7.0.1",
+        "import-lazy": "~4.0.0",
+        "jju": "~1.4.0",
+        "resolve": "~1.22.1",
+        "semver": "~7.5.4"
+      },
+      "peerDependencies": {
+        "@types/node": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/ajv": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.13.0.tgz",
+      "integrity": "sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.4.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@rushstack/terminal/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,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/@rushstack/terminal/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,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@rushstack/terminal/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,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/@rushstack/terminal/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/@rushstack/ts-command-line": {
+      "version": "4.22.8",
+      "resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.22.8.tgz",
+      "integrity": "sha512-XbFjOoV7qZHJnSuFUHv0pKaFA4ixyCuki+xMjsMfDwfvQjs5MYG0IK5COal3tRnG7KCDe2l/G+9LrzYE/RJhgg==",
+      "dev": true,
+      "dependencies": {
+        "@rushstack/terminal": "0.14.2",
+        "@types/argparse": "1.0.38",
+        "argparse": "~1.0.9",
+        "string-argv": "~0.3.1"
+      }
+    },
     "node_modules/@schematics/angular": {
       "version": "17.1.2",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.1.2.tgz",
@@ -17373,6 +17941,15 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
+      "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -17495,6 +18072,48 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@ts-morph/common": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.19.0.tgz",
+      "integrity": "sha512-Unz/WHmd4pGax91rdIKWi51wnVUW11QttMEPpBiBgIewnc9UQIX7UDLxr5vRlqeByXCwhkF6VabSsI0raWcyAQ==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.12",
+        "minimatch": "^7.4.3",
+        "mkdirp": "^2.1.6",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/minimatch": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
+      "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/mkdirp": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-2.1.6.tgz",
+      "integrity": "sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -17541,6 +18160,12 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/@types/argparse": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/@types/argparse/-/argparse-1.0.38.tgz",
+      "integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==",
+      "dev": true
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -17608,9 +18233,9 @@
       }
     },
     "node_modules/@types/chai": {
-      "version": "4.3.11",
-      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.11.tgz",
-      "integrity": "sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==",
+      "version": "4.3.19",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.19.tgz",
+      "integrity": "sha512-2hHHvQBVE2FiSK4eN0Br6snX9MtolHaTo/batnLjlGRhoQzlCL61iVpxoqO7SfFyOw+P/pwv+0zNHzKoGWz9Cw==",
       "dev": true
     },
     "node_modules/@types/chai-subset": {
@@ -17920,6 +18545,21 @@
       "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
       "dev": true
     },
+    "node_modules/@types/mjml-browser": {
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@types/mjml-browser/-/mjml-browser-4.15.0.tgz",
+      "integrity": "sha512-WNmr7LB4XfSM4pe+ES3zCcF4NY3hfPQxLNPn8v3GgNYc3u2rJbiQ56Ahswn/WF9kpO+M5jKd2jlq8u2ZAV0g6A==",
+      "dev": true,
+      "dependencies": {
+        "@types/mjml-core": "*"
+      }
+    },
+    "node_modules/@types/mjml-core": {
+      "version": "4.15.0",
+      "resolved": "https://registry.npmjs.org/@types/mjml-core/-/mjml-core-4.15.0.tgz",
+      "integrity": "sha512-jSRWTOpwRS/uHIBfGdvLl0a7MaoBZZYHKI+HhsFYChrUOKVJTnjSYsuV6wx0snv6ZaX3TUo5OP/gNsz/uzZz1A==",
+      "dev": true
+    },
     "node_modules/@types/mkdirp": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/@types/mkdirp/-/mkdirp-0.5.2.tgz",
@@ -19114,6 +19754,20 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-draft-04": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ajv-draft-04/-/ajv-draft-04-1.0.0.tgz",
+      "integrity": "sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^8.5.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ajv-formats": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
@@ -21426,6 +22080,12 @@
         "node": ">= 0.12.0"
       }
     },
+    "node_modules/code-block-writer": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-12.0.0.tgz",
+      "integrity": "sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==",
+      "dev": true
+    },
     "node_modules/codemirror": {
       "version": "5.65.16",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.16.tgz",
@@ -21511,6 +22171,15 @@
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
     },
+    "node_modules/colors": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.2.5.tgz",
+      "integrity": "sha512-erNRLao/Y3Fv54qUa0LBB+//Uf3YwMUmdJinN20yMXm9zdKKqH9wt7R9IIVZ+K7ShzfpLV/Zg8+VyrBJYB4lpg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
     "node_modules/columnify": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/columnify/-/columnify-1.6.0.tgz",
@@ -21674,6 +22343,12 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/confbox": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.7.tgz",
+      "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==",
+      "dev": true
+    },
     "node_modules/configstore": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
@@ -30374,6 +31049,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jju": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
+      "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==",
+      "dev": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -30815,6 +31496,12 @@
       "integrity": "sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==",
       "dev": true
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true
+    },
     "node_modules/latest-version": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
@@ -31168,11 +31855,23 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "dev": true
+    },
     "node_modules/lodash.isempty": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
       "integrity": "sha512-oKMuF3xEeqDltrGMfDxAPGIVMSSRv8tbRSODbrs4KGsRRLEhrW8N8Rd4DRgB2+621hY8A8XwwrTVhXWpxFvMzg=="
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "dev": true
+    },
     "node_modules/lodash.isfunction": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz",
@@ -32065,6 +32764,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/mjml-browser": {
+      "version": "4.15.3",
+      "resolved": "https://registry.npmjs.org/mjml-browser/-/mjml-browser-4.15.3.tgz",
+      "integrity": "sha512-HS3YFo6mfle+TLnaRzUbDa9COwkm860lAuHXD5e7qxi90AVhGdAnG1KAVrriEfQSuYcAZbhZjZtp6GhvXi6XcA=="
+    },
     "node_modules/mkdirp": {
       "version": "0.5.6",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -32083,15 +32787,15 @@
       "dev": true
     },
     "node_modules/mlly": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.5.0.tgz",
-      "integrity": "sha512-NPVQvAY1xr1QoVeG0cy8yUYC7FQcOx6evl/RjT1wL5FvzPnzOysoqB/jmx/DhssT2dYa8nxECLAaFI/+gVLhDQ==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.1.tgz",
+      "integrity": "sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==",
       "dev": true,
       "dependencies": {
         "acorn": "^8.11.3",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.0.3",
-        "ufo": "^1.3.2"
+        "pkg-types": "^1.1.1",
+        "ufo": "^1.5.3"
       }
     },
     "node_modules/monaco-editor": {
@@ -33770,6 +34474,12 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
+    },
     "node_modules/path-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
@@ -33986,14 +34696,14 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
-      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.0.tgz",
+      "integrity": "sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==",
       "dev": true,
       "dependencies": {
-        "jsonc-parser": "^3.2.0",
-        "mlly": "^1.2.0",
-        "pathe": "^1.1.0"
+        "confbox": "^0.1.7",
+        "mlly": "^1.7.1",
+        "pathe": "^1.1.2"
       }
     },
     "node_modules/polished": {
@@ -34038,9 +34748,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.33",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
-      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "dev": true,
       "funding": [
         {
@@ -34058,8 +34768,8 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -34256,9 +34966,9 @@
       }
     },
     "node_modules/postcss-custom-properties": {
-      "version": "13.3.4",
-      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.4.tgz",
-      "integrity": "sha512-9YN0gg9sG3OH+Z9xBrp2PWRb+O4msw+5Sbp3ZgqrblrwKspXVQe5zr5sVqi43gJGwW/Rv1A483PRQUzQOEewvA==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-14.0.1.tgz",
+      "integrity": "sha512-SB4GjuZjIq5GQFNbxFrirQPbkdbJooyNy8bh+fcJ8ZG0oasJTflTTtR4geb56h+FBVDIb9Hx4v/NiG2caOj8nQ==",
       "dev": true,
       "funding": [
         {
@@ -34271,18 +34981,83 @@
         }
       ],
       "dependencies": {
-        "@csstools/cascade-layer-name-parser": "^1.0.7",
-        "@csstools/css-parser-algorithms": "^2.5.0",
-        "@csstools/css-tokenizer": "^2.2.3",
+        "@csstools/cascade-layer-name-parser": "^2.0.1",
+        "@csstools/css-parser-algorithms": "^3.0.1",
+        "@csstools/css-tokenizer": "^3.0.1",
+        "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": "^14 || ^16 || >=18"
+        "node": ">=18"
       },
       "peerDependencies": {
         "postcss": "^8.4"
       }
     },
+    "node_modules/postcss-custom-properties/node_modules/@csstools/cascade-layer-name-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-2.0.1.tgz",
+      "integrity": "sha512-G9ZYN5+yr/E6xYSiy1BwOEFP5p88ZtWo8sL4NztKBkRRAwRkzVGa70M+D+fYHugMID5jkLeNt5X9jYd5EaVuyg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.1",
+        "@csstools/css-tokenizer": "^3.0.1"
+      }
+    },
+    "node_modules/postcss-custom-properties/node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.1.tgz",
+      "integrity": "sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.1"
+      }
+    },
+    "node_modules/postcss-custom-properties/node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.1.tgz",
+      "integrity": "sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/postcss-custom-selectors": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.6.tgz",
@@ -35184,6 +35959,57 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/postcss-preset-env/node_modules/@csstools/utilities": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-1.0.0.tgz",
+      "integrity": "sha512-tAgvZQe/t2mlvpNosA4+CkMiZ2azISW5WPAcdSalZlEjQvUfghHxfQcrCiK/7/CrfAWVxyM88kGFYO82heIGDg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/postcss-preset-env/node_modules/postcss-custom-properties": {
+      "version": "13.3.12",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.12.tgz",
+      "integrity": "sha512-oPn/OVqONB2ZLNqN185LDyaVByELAA/u3l2CS2TS16x2j2XsmV4kd8U49+TMxmUsEU9d8fB/I10E6U7kB0L1BA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/cascade-layer-name-parser": "^1.0.13",
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1",
+        "@csstools/utilities": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/postcss-pseudo-class-any-link": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-9.0.1.tgz",
@@ -36014,6 +36840,89 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/raw-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "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/raw-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/raw-loader/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
+    },
+    "node_modules/raw-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,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/raw-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -37840,9 +38749,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "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,
       "engines": {
         "node": ">=0.10.0"
@@ -38171,6 +39080,15 @@
         }
       ]
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -39900,6 +40818,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/ts-morph": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-18.0.0.tgz",
+      "integrity": "sha512-Kg5u0mk19PIIe4islUI/HWRvm9bC1lHejK4S0oh1zaZ77TMZAEmQC0sHQYiu2RgCQFZKXz1fMVi/7nOOeirznA==",
+      "dev": true,
+      "dependencies": {
+        "@ts-morph/common": "~0.19.0",
+        "code-block-writer": "^12.0.0"
+      }
+    },
     "node_modules/ts-node": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
@@ -40211,9 +41139,9 @@
       "integrity": "sha512-67Hyl94beZX8gmTap7IDPrG5hy2cHftgsCAcGvE1tzuxGT+kRB+zSBin0wIMwysYw8RUCBCvv9UfQl8TNM75dA=="
     },
     "node_modules/ufo": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.4.0.tgz",
-      "integrity": "sha512-Hhy+BhRBleFjpJ2vchUNN40qgkh0366FWJGqVLYBHev0vpHTrXSA0ryT+74UiW6KWsldNurQMKGqCm1M2zBciQ==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
+      "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==",
       "dev": true
     },
     "node_modules/uglify-js": {
@@ -40849,6 +41777,15 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/validator": {
+      "version": "13.12.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
+      "integrity": "sha512-c1Q0mCiPlgdTVVVIJIrBuxNicYE+t/7oKeI9MWLj3fh/uq2Pxh/3eeWbVZ4OcGW1TUf53At0njHw5SMdA3tmMg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -41006,6 +41943,56 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vite-plugin-dts": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-2.3.0.tgz",
+      "integrity": "sha512-WbJgGtsStgQhdm3EosYmIdTGbag5YQpZ3HXWUAPCDyoXI5qN6EY0V7NXq0lAmnv9hVQsvh0htbYcg0Or5Db9JQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.21.4",
+        "@microsoft/api-extractor": "^7.34.4",
+        "@rollup/pluginutils": "^5.0.2",
+        "@rushstack/node-core-library": "^3.55.2",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.2.12",
+        "fs-extra": "^10.1.0",
+        "kolorist": "^1.7.0",
+        "magic-string": "^0.29.0",
+        "ts-morph": "18.0.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.9.0"
+      }
+    },
+    "node_modules/vite-plugin-dts/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite-plugin-dts/node_modules/magic-string": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.29.0.tgz",
+      "integrity": "sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.13"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/vite/node_modules/@esbuild/android-arm": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
@@ -42302,6 +43289,36 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/z-schema": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-5.0.5.tgz",
+      "integrity": "sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==",
+      "dev": true,
+      "dependencies": {
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "validator": "^13.7.0"
+      },
+      "bin": {
+        "z-schema": "bin/z-schema"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "commander": "^9.4.1"
+      }
+    },
+    "node_modules/z-schema/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/package.json b/package.json
index 2f4a99d438..2311724321 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "echarts-wordcloud": "^2.1.0",
     "highlight.js": "^11.9.0",
     "lit": "^2.2.8",
+    "mjml-browser": "^4.15.3",
     "monaco-editor": "^0.34.1",
     "rxjs": "^7.4.0",
     "shepherd.js": "^9.0.0",
@@ -113,6 +114,7 @@
     "@nx/jest": "17.3.1",
     "@nx/js": "17.3.1",
     "@nx/linter": "17.3.1",
+    "@nx/vite": "17.3.1",
     "@nx/web": "17.3.1",
     "@nx/workspace": "17.3.1",
     "@schematics/angular": "17.1.2",
@@ -133,6 +135,7 @@
     "@types/echarts": "^4.9.13",
     "@types/jest": "29.5.11",
     "@types/jsdom": "^20.0.0",
+    "@types/mjml-browser": "^4.15.0",
     "@types/node": "^18.16.9",
     "@types/showdown": "^2.0.6",
     "@typescript-eslint/eslint-plugin": "6.20.0",
@@ -158,10 +161,13 @@
     "monaco-editor-webpack-plugin": "^7.1.0",
     "ng-packagr": "17.0.3",
     "nx": "17.3.1",
+    "postcss": "^8.4.41",
+    "postcss-custom-properties": "^14.0.1",
     "postcss-preset-env": "^9.1.0",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
+    "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.7",
@@ -175,6 +181,7 @@
     "ts-jest": "29.1.1",
     "typescript": "5.3.3",
     "vite": "^4.5.3",
+    "vite-plugin-dts": "~2.3.0",
     "vitest": "^0.27.2"
   }
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 5ea668e39d..932cf5a1f9 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -81,6 +81,7 @@
       "@covalent/echarts/wordcloud": [
         "libs/angular-echarts/wordcloud/src/public_api.ts"
       ],
+      "@covalent/email-templates": ["libs/email-templates/src/index.ts"],
       "@covalent/flavored-markdown": [
         "libs/markdown-flavored/src/public_api.ts"
       ],