diff --git a/packages/ui-stencil/package.json b/packages/ui-stencil/package.json
index f2b0bd85..00a11dbd 100644
--- a/packages/ui-stencil/package.json
+++ b/packages/ui-stencil/package.json
@@ -1,46 +1,47 @@
 {
-  "name": "ui-stencil",
-  "version": "0.0.1",
-  "description": "Stencil Component Starter",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/ionic-team/stencil-component-starter.git"
-  },
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "clean": "rm -rf node_modules .turbo dist .stencil loader www",
-    "dev": "stencil build --watch",
-    "generate": "stencil generate",
-    "start": "stencil build --dev --watch --serve",
-    "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll"
-  },
-  "types": "dist/types/index.d.ts",
-  "dependencies": {
-    "@stencil/core": "^4.19.0",
-    "@stencil/sass": "^3.0.12",
-    "@stencil/store": "^2.0.16"
-  },
-  "devDependencies": {
-    "@stencil/angular-output-target": "^0.8.4",
-    "@stencil/react-output-target": "^0.5.3",
-    "@stencil/vue-output-target": "^0.8.8",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.9",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "puppeteer": "^22.12.1"
-  },
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "unpkg": "dist/ui-stencil/ui-stencil.esm.js"
+      "name": "ui-stencil",
+      "version": "0.0.1",
+      "description": "Stencil Component Starter",
+      "license": "MIT",
+      "repository": {
+            "type": "git",
+            "url": "https://github.com/ionic-team/stencil-component-starter.git"
+      },
+      "main": "dist/index.cjs.js",
+      "module": "dist/index.js",
+      "files": [
+            "dist/",
+            "loader/"
+      ],
+      "scripts": {
+            "build": "stencil build --docs",
+            "clean": "rm -rf node_modules .turbo dist .stencil loader www",
+            "dev": "stencil build --watch",
+            "generate": "stencil generate",
+            "start": "stencil build --dev --watch --serve",
+            "test": "stencil test --spec --e2e",
+            "test.watch": "stencil test --spec --e2e --watchAll"
+      },
+      "types": "dist/types/index.d.ts",
+      "dependencies": {
+            "@stencil/core": "^4.19.0",
+            "@stencil/sass": "^3.0.12",
+            "@stencil/store": "^2.0.16"
+      },
+      "devDependencies": {
+            "@stencil-community/postcss": "^2.2.0",
+            "@stencil/angular-output-target": "^0.8.4",
+            "@stencil/react-output-target": "^0.5.3",
+            "@stencil/vue-output-target": "^0.8.8",
+            "@types/jest": "^29.5.12",
+            "@types/node": "^20.14.9",
+            "jest": "^29.7.0",
+            "jest-cli": "^29.7.0",
+            "puppeteer": "^22.12.1"
+      },
+      "collection": "dist/collection/collection-manifest.json",
+      "collection:main": "dist/collection/index.js",
+      "es2015": "dist/esm/index.mjs",
+      "es2017": "dist/esm/index.mjs",
+      "unpkg": "dist/ui-stencil/ui-stencil.esm.js"
 }
diff --git a/packages/ui-stencil/src/components/search-box/search-box.scss b/packages/ui-stencil/src/components/search-box/search-box.scss
index ab9f3d8a..7df21cf4 100644
--- a/packages/ui-stencil/src/components/search-box/search-box.scss
+++ b/packages/ui-stencil/src/components/search-box/search-box.scss
@@ -2,5 +2,5 @@
 }
 
 .btn {
-  color: var(--primary-color, $green400)
-} 
+  color: var(--primary-color, red);
+}
diff --git a/packages/ui-stencil/src/components/search-box/search-box.tsx b/packages/ui-stencil/src/components/search-box/search-box.tsx
index 2a48e6d1..9dcdb202 100644
--- a/packages/ui-stencil/src/components/search-box/search-box.tsx
+++ b/packages/ui-stencil/src/components/search-box/search-box.tsx
@@ -1,4 +1,5 @@
 import { Component, Host, Prop, h } from '@stencil/core'
+import cssCustomProperties from '../../config/colors';
 
 @Component({
   tag: 'search-box',
@@ -10,11 +11,10 @@ export class SearchBox {
   @Prop() color: 'dark' | 'light' | 'system'
 
   render() {
-    console.log(this.theme)
-
+    console.log('***vars 1***', cssCustomProperties, typeof cssCustomProperties)
     return (
       <Host>
-        {/* <style>{`:host { --primary-color: ${this.theme?.colors?.light?.primaryColor}; }`}</style> */}
+        <style>{`:host { --primary-color: ${this.theme?.colors?.light?.primaryColor}; }`}</style>
 
         <div>This is the searchbox</div>
 
diff --git a/packages/ui-stencil/src/config/colors.ts b/packages/ui-stencil/src/config/colors.ts
new file mode 100644
index 00000000..3e5f8936
--- /dev/null
+++ b/packages/ui-stencil/src/config/colors.ts
@@ -0,0 +1,64 @@
+// TODO: this should come from the sass file as unique source of truth, importing the sass file (colors.scss) directly
+export const primitive= {
+  gray50: '#FBFBFB',
+  gray100: '#EFEFEF',
+  gray200: '#DADADA',
+  gray300: '#C6C6C6',
+  gray400: '#AFAFB1',
+  gray500: '#99989D',
+  gray600: '#838289',
+  gray700: '#2E2E2E',
+  gray800: '#212121',
+  gray900: '#151515',
+  gray950: '#050505',
+  purple500: '#8152EE',
+  purple700: '#6A4BB2'
+}
+
+const semantic = {
+  light: {
+    // TODO: placheholder primitives to be replaced
+    '--text-color-primary': primitive.gray50,
+    '--text-color-secondary': primitive.gray200,
+    '--text-color-teriary': primitive.gray600,
+    '--text-color-inactive': primitive.gray500,
+
+    '--background-color-primary': primitive.gray950,
+    '--background-color-secondary': primitive.gray900,
+    '--background-color-tertiary': primitive.gray800,
+
+    '--border-color-primary': primitive.gray700,
+    '--border-color-secondary': primitive.gray900,
+    '--border-color-inactive': primitive.gray400,
+
+    '--icon-color-primary': primitive.gray50,
+    '--icon-color-secondary': primitive.gray200,
+    '--icon-color-tertiary': primitive.gray600,
+    '--icon-color-inactive': primitive.gray500,
+    '--icon-color-accent': primitive.purple500,
+  },
+  dark: {
+    '--text-color-primary': primitive.gray50,
+    '--text-color-secondary': primitive.gray200,
+    '--text-color-teriary': primitive.gray600,
+    '--text-color-inactive': primitive.gray500,
+
+    '--background-color-primary': primitive.gray950,
+    '--background-color-secondary': primitive.gray900,
+    '--background-color-tertiary': primitive.gray800,
+
+    '--border-color-primary': primitive.gray700,
+    '--border-color-secondary': primitive.gray900,
+    '--border-color-inactive': primitive.gray400,
+
+    '--icon-color-primary': primitive.gray50,
+    '--icon-color-secondary': primitive.gray200,
+    '--icon-color-tertiary': primitive.gray600,
+    '--icon-color-inactive': primitive.gray500,
+    // TODO: check the primitive to use for accent
+    '--icon-color-accent': primitive.purple500,
+  },
+  system: {}
+}
+
+export default semantic
diff --git a/packages/ui-stencil/src/config/theme.ts b/packages/ui-stencil/src/config/theme.ts
new file mode 100644
index 00000000..9bb4ce70
--- /dev/null
+++ b/packages/ui-stencil/src/config/theme.ts
@@ -0,0 +1,9 @@
+import colors from './colors'
+import typography from './typography'
+
+const theme = {
+  typography,
+  colors
+}
+
+export default theme
diff --git a/packages/ui-stencil/src/config/typography.ts b/packages/ui-stencil/src/config/typography.ts
new file mode 100644
index 00000000..aa1c40fe
--- /dev/null
+++ b/packages/ui-stencil/src/config/typography.ts
@@ -0,0 +1,5 @@
+const typography = {
+  '--font-primary': '"Instrument Sans", sans-serif',
+}
+
+export default typography
diff --git a/packages/ui-stencil/src/global/_colors.scss b/packages/ui-stencil/src/global/_colors.scss
deleted file mode 100644
index 9b29d820..00000000
--- a/packages/ui-stencil/src/global/_colors.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-
-$gray100: #fbfbfb;
-$gray200: #e3e3e4;
-$gray300: #d5d7da;
-$gray600: #7F7D86;
-$gray700: #6D6B74;
-$gray800: #54525B;
-$gray900: #302F33;
-
-// PURPLE
-$purple50: #FAF7FF;
-$purple100: #F6F2FF;
-$purple400: #D1BDFB;
-$purple500: #B59CEA;
-$purple600: #8F6ED5;
-$purple700: #7241D6;
-$purple800: #5B34AB;
-$purple900: #362B4C;
-
-// PURPLE-GRAY
-$purplegray50: #EFEDF0;
-$purplegray100: #DDDCDE;
-$purplegray200: #B8B6BB;
-$purplegray300: #ADABB1;
-$purplegray400: #918D93;
-$purplegray500: #F5F5F5;
-$purplegray600: #514D56;
-$purplegray700: #413c46;
-$purplegray800: #27232E;
-$purplegray900: #201C27;
-
-// BLUE
-$blue900: #2F3243;
-$blue700: #0275C8;
-$blue600: #31A0F0;
-$blue400: #75C0F7;
-$blue300: #A1D4F9;
-$blue200: #BADFFA;
-$blue100: #D1EAFC;
-$blue50: #F1F9FE;
-
-// BLUE-GRAY
-$bluegray50: #FAFAFF;
-$bluegray100: #F2F5F9;
-$bluegray400: #97A3B6;
-$bluegray300: #CCD5E0;
-
-// GREEN
-$green100: #EAFFF5;
-$green400: #52DF9B;
-$green700: #1A804F;
-$green900: #33493E;
-
-// ORANGE
-$orange50: #FFF8FA;
-$orange300: #F19A69;
-$orange700: #B8541C;
-$orange900: #422F25;
-
-// CHERRY
-$cherry50: #FFF8FA;
-$cherry100: #FFA4C6;
-$cherry200: #FF6BA3;
-$cherry300: #FF5495;
-$cherry400: #CF336B;
-$cherry900: #452C35;
-
-// INDIGO
-$indigo900: #2f3043;
-$indigo700: #4640C1;
-$indigo400: #8998F6;
-$indigo100: #EAEAFD;
-$indigo50: #EFF3FE;
-
-$gradient1: linear-gradient(78.06deg, #F7C76A -14.53%, #E755F3 46.83%, #906FDF 110.8%);
-$shadow1: 0px 2px 4px rgba(0, 0, 0, 0.1);
-$shadow2: 0px 2px 8px rgba(204, 94, 237, 0.2);
-$shadow3: 0px 4px 6px rgba(0, 0, 0, 0.1);
-$shadow4: 0px 4px 8px rgba(0, 0, 0, 0.1);
-
-// Datasources colors
-$csv: #F6CAC8;
-$json: #B6E0FF;
-$webhook: #C9F2F5;
-$mysql: #F9D9B7;
-$postgres: #BBCEE7;
-$shopify: #95BF47;
-$shopify-webhook: #95BF47;
-$docusaurus: #A2E28F;
-$elastic-path: #2BCC7E;
-$rest-api: #e2bedf;
-$graphql: #d8c6f4;
-$mongodb: #ddf0cf;
-$elastic: #E2F9EE;
-$crawler: #EAEAFD;
-
-$ossIndex: #14a997;
diff --git a/packages/ui-stencil/src/global/_mixins.scss b/packages/ui-stencil/src/global/_mixins.scss
deleted file mode 100644
index 3df29320..00000000
--- a/packages/ui-stencil/src/global/_mixins.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-/* ===WEB FONTS MANAGEMENT=== */
-/**
- * Applies the font smoothing
- * Used for better cross browser support
- * Ref: https://maximilianhoffmann.com/posts/better-font-rendering-on-osx
- */
-@mixin font-smoothing($value: on) {
-  @if $value == on {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  } @else {
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: auto;
-  }
-}
-
-/**
-  * Use to set the theme skin based on user preferences
-  * @include spread-map($map);
- */
-@mixin spread-map($map: ()) {
-  @each $key, $value in $map {
-    #{$key}: $value;
-  }
-}
-
-/**
- * Use to hide elements visually but still make them accessible to screen readers
- * @include screen-reader-only();
- */
-@mixin screen-reader-only {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  position: absolute;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 1px;
-}
-
-/**
-* Use to apply the card style to whatever element
-*/
-@mixin card($variant: 'primary', $status: 'info') {
-  background: var(--background-color-fourth, background-color('fourth'));
-  margin: $spacingM 0;
-  color: var(--text-color-primary, text-color('primary'));
-
-  @if $variant == 'secondary' {
-    padding: $spacingSM;
-    border-radius: rem-value(8);
-
-    @if $status == 'info' {
-      color: var(--text-color-primary, text-color('primary'));
-      border: 1px solid var(--border-color-primary, background-color('primary'));    
-    }
-
-    @if $status == 'inactive' {
-      color: var(--text-color-inactive, text-color('inactive'));
-      border: transparent;
-      background: var(--background-color-secondary, background-color('secondary'));
-    }
-
-    @if $status == 'active' {
-      color: var(--text-color-primary, text-color('primary'));
-      box-shadow: $shadow4;
-    }
-
-    @if $status == 'accent' {
-      background: var(--background-color-tertiary, background-color('tertiary'));
-      border: 1px solid var(--border-color-accent, border-color('accent'));
-    }
-
-  } @else {
-    border: 1px solid var(--border-color-secondary, border-color('secondary'));
-    padding: $spacingS $spacingM;
-    border-radius: rem-value(8);
-  }
-
-  @if $variant == 'tertiary' {
-    background: var(--background-color-secondary, background-color('secondary'));
-    padding: $spacingS;
-    border: 1px solid var(--border-color-secondary, border-color('secondary'));
-    border-radius: rem-value(8);
-    margin: 0;
-  }
-}
-
-@mixin flex-cols($cols: 1, $breakpoint: undefined, $gap: $spacingS) {
-  @if $breakpoint != undefined {
-    @media (--#{$breakpoint}-min) {
-      flex: 0 0 calc(((100% - calc(#{$gap} * #{calc(12/$cols - 1)}))  / 12 * $cols));
-      max-width: calc(((100% - calc(#{$gap} * #{calc(12/$cols - 1)}))  / 12 * $cols));
-    }
-  } @else {
-    flex: 0 0 calc(((100% - calc(#{$gap} * #{calc(12/$cols - 1)}))  / 12 * $cols));
-    max-width: calc(((100% - calc(#{$gap} * #{calc(12/$cols - 1)}))  / 12 * $cols));
-  }
-}
-
-
diff --git a/packages/ui-stencil/src/global/tokens.scss b/packages/ui-stencil/src/global/tokens.scss
deleted file mode 100644
index 69e5b9a8..00000000
--- a/packages/ui-stencil/src/global/tokens.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@import '_colors.scss';
-@import '_functions.scss';
-@import '_mixins.scss';
-@import '_mq.scss';
-@import '_radius.scss';
-@import '_spacing.scss';
-@import '_typography.scss';
-@import '_variables.scss';
-@import '_zindex.scss';
diff --git a/packages/ui-stencil/src/globals/_colors.scss b/packages/ui-stencil/src/globals/_colors.scss
new file mode 100644
index 00000000..cd2eabf5
--- /dev/null
+++ b/packages/ui-stencil/src/globals/_colors.scss
@@ -0,0 +1,64 @@
+// ### PRIMARY COLORS //
+$primary-color: #3498db;
+$secondary-color: #2ecc71;
+
+:export {
+  primary-color: $primary-color;
+  secondary-color: $secondary-color;
+}
+
+/**
+ * in order to use one of the colors included in the palette map,
+ *  use the functions text-color(key), bg-color(key), border-color(key)
+ * ie: text-color('primary')
+ */
+//  $palette: (
+//   text: (
+//     primary: $gray50,
+//     secondary: $gray900,
+//     tertiary: $bluegray400,
+//     accent: $purple700,
+//     inactive: $gray700,
+//     reverse: $purplegray500,
+//     info: $blue700,
+//     success: $green700,
+//     warning: $orange700,
+//     error: $cherry400
+//   ),
+//   background: (
+//     primary: $white,
+//     secondary: $gray100,
+//     tertiary: $purple50,
+//     accent: $purple700,
+//     inactive: $purplegray500,
+//     reverse: $purplegray700,
+//     info: $blue50,
+//     success: $green100,
+//     warning: $orange50,
+//     error: $cherry50,
+//   ),
+//   border: (
+//     primary: $bluegray300,
+//     secondary: $bluegray100,
+//     tertiary: $gray700,
+//     accent: $purple800,
+//     inactive: $purple800,
+//     reverse: $purplegray50,
+//     info: $blue400,
+//     success: $green400,
+//     warning: $orange700,
+//     error: $cherry400,
+//   ),
+//   icon: (
+//     primary: $gray800,
+//     secondary: $purplegray300,
+//     tertiary: $gray700,
+//     accent: $purple700,
+//     inactive: $gray700,
+//     reverse: $purplegray50,
+//     info: $blue600,
+//     success: $green700,
+//     warning: $orange700,
+//     error: $cherry300,
+//   )
+// );
diff --git a/packages/ui-stencil/src/global/_functions.scss b/packages/ui-stencil/src/globals/_functions.scss
similarity index 95%
rename from packages/ui-stencil/src/global/_functions.scss
rename to packages/ui-stencil/src/globals/_functions.scss
index 69d31da6..3e224cc0 100644
--- a/packages/ui-stencil/src/global/_functions.scss
+++ b/packages/ui-stencil/src/globals/_functions.scss
@@ -20,10 +20,6 @@
 }
 
 /* ===BACKGROUND COLOR FUNCTION=== */
-@function bg-color($role: 'primary', $palette: $palette) {
-  @return palette('background', $role, $palette);
-}
-
 @function background-color($role: 'primary', $palette: $palette) {
   @return palette('background', $role, $palette);
 }
@@ -76,7 +72,7 @@
 /**
  * Sassy functions to get the rem equivalent of a px value
  * preset-css-env will take care of fallback for older browsers
- * !NOTE: you only need to change the $rem-baseline value if your base size 
+ * !NOTE: you only need to change the $rem-baseline value if your base size
  * is different from 10px (use _var_typography.scss in case)
  * @param value is referred to px, pass the unitless value
  * Credits: Rowan Manning
@@ -88,7 +84,7 @@
   @if type-of($value) == "number" {
     /* Return rem value */
     $val: #{calc($value / $rem-base)}rem;
-    
+
     @return #{calc($value / $rem-base)}rem;
   }
   /* Non-numeric value, just return */
@@ -103,4 +99,4 @@
   }
 
   @return $rem-values;
-}
\ No newline at end of file
+}
diff --git a/packages/ui-stencil/src/globals/_mixins.scss b/packages/ui-stencil/src/globals/_mixins.scss
new file mode 100644
index 00000000..a17b5a39
--- /dev/null
+++ b/packages/ui-stencil/src/globals/_mixins.scss
@@ -0,0 +1,51 @@
+/* ===WEB FONTS MANAGEMENT=== */
+/**
+ * Applies the font smoothing
+ * Used for better cross browser support
+ * Ref: https://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ */
+@mixin font-smoothing($value: on) {
+  @if $value == on {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  } @else {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+  }
+}
+
+/**
+  * Use to set the theme skin based on user preferences
+  * @include spread-map($map);
+ */
+@mixin spread-map($map: ()) {
+  @each $key, $value in $map {
+    #{$key}: $value;
+  }
+}
+
+/**
+ * Use to hide elements visually but still make them accessible to screen readers
+ * @include screen-reader-only();
+ */
+@mixin screen-reader-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  position: absolute;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 1px;
+}
+
+@mixin flex-cols($cols: 1, $breakpoint: undefined, $gap: $spacingS) {
+  @if $breakpoint != undefined {
+    @media (--#{$breakpoint}-min) {
+      flex: 0 0 calc(((100% - calc(#{$gap} * #{calc(12/$cols - 1)}))  / 12 * $cols));
+      max-width: calc(((100% - calc(#{$gap} * #{calc(12/$cols - 1)}))  / 12 * $cols));
+    }
+  } @else {
+    flex: 0 0 calc(((100% - calc(#{$gap} * #{calc(12/$cols - 1)}))  / 12 * $cols));
+    max-width: calc(((100% - calc(#{$gap} * #{calc(12/$cols - 1)}))  / 12 * $cols));
+  }
+}
diff --git a/packages/ui-stencil/src/global/_mq.scss b/packages/ui-stencil/src/globals/_mq.scss
similarity index 100%
rename from packages/ui-stencil/src/global/_mq.scss
rename to packages/ui-stencil/src/globals/_mq.scss
diff --git a/packages/ui-stencil/src/global/_radius.scss b/packages/ui-stencil/src/globals/_radius.scss
similarity index 100%
rename from packages/ui-stencil/src/global/_radius.scss
rename to packages/ui-stencil/src/globals/_radius.scss
diff --git a/packages/ui-stencil/src/global/_spacing.scss b/packages/ui-stencil/src/globals/_spacing.scss
similarity index 100%
rename from packages/ui-stencil/src/global/_spacing.scss
rename to packages/ui-stencil/src/globals/_spacing.scss
diff --git a/packages/ui-stencil/src/global/_typography.scss b/packages/ui-stencil/src/globals/_typography.scss
similarity index 100%
rename from packages/ui-stencil/src/global/_typography.scss
rename to packages/ui-stencil/src/globals/_typography.scss
diff --git a/packages/ui-stencil/src/global/_variables.scss b/packages/ui-stencil/src/globals/_variables.scss
similarity index 83%
rename from packages/ui-stencil/src/global/_variables.scss
rename to packages/ui-stencil/src/globals/_variables.scss
index d1348a53..117b4f76 100644
--- a/packages/ui-stencil/src/global/_variables.scss
+++ b/packages/ui-stencil/src/globals/_variables.scss
@@ -3,4 +3,4 @@
 @import 'typography';
 @import 'spacing';
 @import 'radius';
-@import 'zindex';
\ No newline at end of file
+@import 'zindex';
diff --git a/packages/ui-stencil/src/global/_zindex.scss b/packages/ui-stencil/src/globals/_zindex.scss
similarity index 100%
rename from packages/ui-stencil/src/global/_zindex.scss
rename to packages/ui-stencil/src/globals/_zindex.scss
diff --git a/packages/ui-stencil/src/global/global.css b/packages/ui-stencil/src/globals/global.css
similarity index 66%
rename from packages/ui-stencil/src/global/global.css
rename to packages/ui-stencil/src/globals/global.css
index 2e1e9521..30e4e777 100644
--- a/packages/ui-stencil/src/global/global.css
+++ b/packages/ui-stencil/src/globals/global.css
@@ -1,3 +1,3 @@
 :root {
-  
-}
\ No newline at end of file
+
+}
diff --git a/packages/ui-stencil/src/globals/tokens.scss b/packages/ui-stencil/src/globals/tokens.scss
new file mode 100644
index 00000000..f68d7107
--- /dev/null
+++ b/packages/ui-stencil/src/globals/tokens.scss
@@ -0,0 +1,3 @@
+@import '_functions.scss';
+@import '_mixins.scss';
+@import '_variables.scss';
diff --git a/packages/ui-stencil/stencil.config.ts b/packages/ui-stencil/stencil.config.ts
index 3cb4950f..91362052 100644
--- a/packages/ui-stencil/stencil.config.ts
+++ b/packages/ui-stencil/stencil.config.ts
@@ -1,5 +1,8 @@
 import type { Config } from '@stencil/core'
 import { sass } from '@stencil/sass'
+import postcss from 'postcss'
+import postcssImport from 'postcss-import'
+import scssVariable from 'rollup-plugin-sass-variables'
 import { reactOutputTarget } from '@stencil/react-output-target'
 import { angularOutputTarget } from '@stencil/angular-output-target'
 import { vueOutputTarget } from '@stencil/vue-output-target'
@@ -9,7 +12,7 @@ const componentCorePackage = namespace
 
 export const config: Config = {
   namespace,
-  globalStyle: 'src/global/global.css',
+  globalStyle: 'src/globals/global.css',
   outputTargets: [
     {
       type: 'dist',
@@ -44,7 +47,10 @@ export const config: Config = {
   },
   plugins: [
     sass({
-      injectGlobalPaths: ['src/global/tokens.scss']
-    })
+      injectGlobalPaths:
+      [
+        'src/globals/tokens.scss'
+      ]
+    }),
   ]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2aae687..22f51fec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -285,6 +285,9 @@ importers:
         specifier: ^2.0.16
         version: 2.0.16(@stencil/core@4.19.0)
     devDependencies:
+      '@stencil-community/postcss':
+        specifier: ^2.2.0
+        version: 2.2.0(@stencil/core@4.19.0)
       '@stencil/angular-output-target':
         specifier: ^0.8.4
         version: 0.8.4(@stencil/core@4.19.0)
@@ -306,9 +309,21 @@ importers:
       jest-cli:
         specifier: ^29.7.0
         version: 29.7.0(@types/node@20.14.9)
+      postcss:
+        specifier: ^8.4.39
+        version: 8.4.39
+      postcss-import:
+        specifier: ^16.1.0
+        version: 16.1.0(postcss@8.4.39)
       puppeteer:
         specifier: ^22.12.1
         version: 22.12.1(typescript@5.5.2)
+      rollup-plugin-postcss:
+        specifier: ^4.0.2
+        version: 4.0.2(postcss@8.4.39)
+      rollup-plugin-sass-variables:
+        specifier: ^0.1.1
+        version: 0.1.1
 
   packages/ui-stencil-angular:
     dependencies:
@@ -3481,6 +3496,7 @@ packages:
   /@colors/colors@1.5.0:
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
+    requiresBuild: true
     dev: true
 
   /@cspotcode/source-map-support@0.8.1:
@@ -5912,6 +5928,15 @@ packages:
     resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
     dev: true
 
+  /@stencil-community/postcss@2.2.0(@stencil/core@4.19.0):
+    resolution: {integrity: sha512-PuPdjqgF6HdvSLwS6fpLf1TRzd3bd6zqpsICCUA0u9sxPnwrsIpx1xYyA/K9hSWrmyUg0WhHPvkX9k26N5DCnw==}
+    peerDependencies:
+      '@stencil/core': '>=2.0.0 || >=3.0.0 || >=4.0.0'
+    dependencies:
+      '@stencil/core': 4.19.0
+      postcss: 8.4.39
+    dev: true
+
   /@stencil/angular-output-target@0.8.4(@stencil/core@4.19.0):
     resolution: {integrity: sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==}
     peerDependencies:
@@ -7278,6 +7303,11 @@ packages:
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
     dev: true
 
+  /@trysound/sax@0.2.0:
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
   /@tsconfig/node10@1.0.11:
     resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
     dev: true
@@ -8084,7 +8114,7 @@ packages:
       '@vue/shared': 3.4.30
       estree-walker: 2.0.2
       magic-string: 0.30.10
-      postcss: 8.4.38
+      postcss: 8.4.39
       source-map-js: 1.2.0
 
   /@vue/compiler-ssr@3.4.30:
@@ -9285,6 +9315,15 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /caniuse-api@3.0.0:
+    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
+    dependencies:
+      browserslist: 4.23.1
+      caniuse-lite: 1.0.30001638
+      lodash.memoize: 4.1.2
+      lodash.uniq: 4.5.0
+    dev: true
+
   /caniuse-lite@1.0.30001638:
     resolution: {integrity: sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==}
     dev: true
@@ -9584,6 +9623,10 @@ packages:
     dev: true
     optional: true
 
+  /colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+    dev: true
+
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
     dev: true
@@ -9623,6 +9666,11 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: true
+
   /commander@8.3.0:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
@@ -9664,6 +9712,12 @@ packages:
   /concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  /concat-with-sourcemaps@1.1.0:
+    resolution: {integrity: sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==}
+    dependencies:
+      source-map: 0.6.1
+    dev: true
+
   /connect-history-api-fallback@2.0.0:
     resolution: {integrity: sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==}
     engines: {node: '>=0.8'}
@@ -9865,7 +9919,7 @@ packages:
       dom-serializer: 2.0.0
       domhandler: 5.0.3
       htmlparser2: 8.0.2
-      postcss: 8.4.38
+      postcss: 8.4.39
       postcss-media-query-parser: 0.2.3
     dev: true
 
@@ -9899,6 +9953,15 @@ packages:
     dependencies:
       type-fest: 1.4.0
 
+  /css-declaration-sorter@6.4.1(postcss@8.4.39):
+    resolution: {integrity: sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==}
+    engines: {node: ^10 || ^12 || >=14}
+    peerDependencies:
+      postcss: ^8.0.9
+    dependencies:
+      postcss: 8.4.39
+    dev: true
+
   /css-loader@6.11.0(webpack@5.92.1):
     resolution: {integrity: sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==}
     engines: {node: '>= 12.13.0'}
@@ -9911,12 +9974,12 @@ packages:
       webpack:
         optional: true
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.38)
-      postcss: 8.4.38
-      postcss-modules-extract-imports: 3.1.0(postcss@8.4.38)
-      postcss-modules-local-by-default: 4.0.5(postcss@8.4.38)
-      postcss-modules-scope: 3.2.0(postcss@8.4.38)
-      postcss-modules-values: 4.0.0(postcss@8.4.38)
+      icss-utils: 5.1.0(postcss@8.4.39)
+      postcss: 8.4.39
+      postcss-modules-extract-imports: 3.1.0(postcss@8.4.39)
+      postcss-modules-local-by-default: 4.0.5(postcss@8.4.39)
+      postcss-modules-scope: 3.2.0(postcss@8.4.39)
+      postcss-modules-values: 4.0.0(postcss@8.4.39)
       postcss-value-parser: 4.2.0
       semver: 7.6.2
       webpack: 5.92.1(@swc/core@1.6.5)(esbuild@0.20.2)
@@ -9934,12 +9997,12 @@ packages:
       webpack:
         optional: true
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.38)
-      postcss: 8.4.38
-      postcss-modules-extract-imports: 3.1.0(postcss@8.4.38)
-      postcss-modules-local-by-default: 4.0.5(postcss@8.4.38)
-      postcss-modules-scope: 3.2.0(postcss@8.4.38)
-      postcss-modules-values: 4.0.0(postcss@8.4.38)
+      icss-utils: 5.1.0(postcss@8.4.39)
+      postcss: 8.4.39
+      postcss-modules-extract-imports: 3.1.0(postcss@8.4.39)
+      postcss-modules-local-by-default: 4.0.5(postcss@8.4.39)
+      postcss-modules-scope: 3.2.0(postcss@8.4.39)
+      postcss-modules-values: 4.0.0(postcss@8.4.39)
       postcss-value-parser: 4.2.0
       semver: 7.6.2
       webpack: 5.91.0(esbuild@0.21.3)
@@ -9965,6 +10028,14 @@ packages:
       nth-check: 2.1.1
     dev: true
 
+  /css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+    dev: true
+
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
@@ -9980,6 +10051,72 @@ packages:
     hasBin: true
     dev: true
 
+  /cssnano-preset-default@5.2.14(postcss@8.4.39):
+    resolution: {integrity: sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      css-declaration-sorter: 6.4.1(postcss@8.4.39)
+      cssnano-utils: 3.1.0(postcss@8.4.39)
+      postcss: 8.4.39
+      postcss-calc: 8.2.4(postcss@8.4.39)
+      postcss-colormin: 5.3.1(postcss@8.4.39)
+      postcss-convert-values: 5.1.3(postcss@8.4.39)
+      postcss-discard-comments: 5.1.2(postcss@8.4.39)
+      postcss-discard-duplicates: 5.1.0(postcss@8.4.39)
+      postcss-discard-empty: 5.1.1(postcss@8.4.39)
+      postcss-discard-overridden: 5.1.0(postcss@8.4.39)
+      postcss-merge-longhand: 5.1.7(postcss@8.4.39)
+      postcss-merge-rules: 5.1.4(postcss@8.4.39)
+      postcss-minify-font-values: 5.1.0(postcss@8.4.39)
+      postcss-minify-gradients: 5.1.1(postcss@8.4.39)
+      postcss-minify-params: 5.1.4(postcss@8.4.39)
+      postcss-minify-selectors: 5.2.1(postcss@8.4.39)
+      postcss-normalize-charset: 5.1.0(postcss@8.4.39)
+      postcss-normalize-display-values: 5.1.0(postcss@8.4.39)
+      postcss-normalize-positions: 5.1.1(postcss@8.4.39)
+      postcss-normalize-repeat-style: 5.1.1(postcss@8.4.39)
+      postcss-normalize-string: 5.1.0(postcss@8.4.39)
+      postcss-normalize-timing-functions: 5.1.0(postcss@8.4.39)
+      postcss-normalize-unicode: 5.1.1(postcss@8.4.39)
+      postcss-normalize-url: 5.1.0(postcss@8.4.39)
+      postcss-normalize-whitespace: 5.1.1(postcss@8.4.39)
+      postcss-ordered-values: 5.1.3(postcss@8.4.39)
+      postcss-reduce-initial: 5.1.2(postcss@8.4.39)
+      postcss-reduce-transforms: 5.1.0(postcss@8.4.39)
+      postcss-svgo: 5.1.0(postcss@8.4.39)
+      postcss-unique-selectors: 5.1.1(postcss@8.4.39)
+    dev: true
+
+  /cssnano-utils@3.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+    dev: true
+
+  /cssnano@5.1.15(postcss@8.4.39):
+    resolution: {integrity: sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      cssnano-preset-default: 5.2.14(postcss@8.4.39)
+      lilconfig: 2.1.0
+      postcss: 8.4.39
+      yaml: 1.10.2
+    dev: true
+
+  /csso@4.2.0:
+    resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-tree: 1.1.3
+    dev: true
+
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -10285,6 +10422,7 @@ packages:
   /detect-libc@2.0.3:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
+    requiresBuild: true
     dev: true
 
   /detect-newline@3.1.0:
@@ -11403,6 +11541,10 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
+  /estree-walker@0.6.1:
+    resolution: {integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==}
+    dev: true
+
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -11989,6 +12131,12 @@ packages:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
     dev: false
 
+  /generic-names@4.0.0:
+    resolution: {integrity: sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==}
+    dependencies:
+      loader-utils: 3.3.1
+    dev: true
+
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -12624,13 +12772,17 @@ packages:
       safer-buffer: 2.1.2
     dev: true
 
-  /icss-utils@5.1.0(postcss@8.4.38):
+  /icss-replace-symbols@1.1.0:
+    resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==}
+    dev: true
+
+  /icss-utils@5.1.0(postcss@8.4.39):
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.38
+      postcss: 8.4.39
     dev: true
 
   /ieee754@1.2.1:
@@ -12668,6 +12820,13 @@ packages:
     resolution: {integrity: sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==}
     dev: true
 
+  /import-cwd@3.0.0:
+    resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==}
+    engines: {node: '>=8'}
+    dependencies:
+      import-from: 3.0.0
+    dev: true
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -12675,6 +12834,13 @@ packages:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  /import-from@3.0.0:
+    resolution: {integrity: sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      resolve-from: 5.0.0
+    dev: true
+
   /import-local@3.1.0:
     resolution: {integrity: sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==}
     engines: {node: '>=8'}
@@ -14149,6 +14315,11 @@ packages:
       webpack-sources: 3.2.3
     dev: true
 
+  /lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+    dev: true
+
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: true
@@ -14242,6 +14413,10 @@ packages:
       p-locate: 6.0.0
     dev: true
 
+  /lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+    dev: true
+
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: true
@@ -14254,9 +14429,17 @@ packages:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     dev: true
 
+  /lodash.memoize@4.1.2:
+    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
+    dev: true
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  /lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+    dev: true
+
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
@@ -14419,6 +14602,10 @@ packages:
       safe-buffer: 5.2.1
     dev: true
 
+  /mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+    dev: true
+
   /media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -15028,6 +15215,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /normalize-url@6.1.0:
+    resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
+    engines: {node: '>=10'}
+    dev: true
+
   /npm-bundled@3.0.1:
     resolution: {integrity: sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -15357,6 +15549,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /p-finally@1.0.0:
+    resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
+    engines: {node: '>=4'}
+    dev: true
+
   /p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -15416,6 +15613,14 @@ packages:
       aggregate-error: 3.1.0
     dev: true
 
+  /p-queue@6.6.2:
+    resolution: {integrity: sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      eventemitter3: 4.0.7
+      p-timeout: 3.2.0
+    dev: true
+
   /p-retry@6.2.0:
     resolution: {integrity: sha512-JA6nkq6hKyWLLasXQXUrO4z8BUZGUt/LjlJxx8Gb2+2ntodU/SS63YZ8b0LUTbQ8ZB9iwOfhEPhg4ykKnn2KsA==}
     engines: {node: '>=16.17'}
@@ -15425,6 +15630,13 @@ packages:
       retry: 0.13.1
     dev: true
 
+  /p-timeout@3.2.0:
+    resolution: {integrity: sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-finally: 1.0.0
+    dev: true
+
   /p-try@2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
@@ -15694,12 +15906,22 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
     requiresBuild: true
     dev: true
 
+  /pify@5.0.0:
+    resolution: {integrity: sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==}
+    engines: {node: '>=10'}
+    dev: true
+
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
@@ -15779,6 +16001,105 @@ packages:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
+  /postcss-calc@8.2.4(postcss@8.4.39):
+    resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==}
+    peerDependencies:
+      postcss: ^8.2.2
+    dependencies:
+      postcss: 8.4.39
+      postcss-selector-parser: 6.1.0
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-colormin@5.3.1(postcss@8.4.39):
+    resolution: {integrity: sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.23.1
+      caniuse-api: 3.0.0
+      colord: 2.9.3
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-convert-values@5.1.3(postcss@8.4.39):
+    resolution: {integrity: sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.23.1
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-discard-comments@5.1.2(postcss@8.4.39):
+    resolution: {integrity: sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+    dev: true
+
+  /postcss-discard-duplicates@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+    dev: true
+
+  /postcss-discard-empty@5.1.1(postcss@8.4.39):
+    resolution: {integrity: sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+    dev: true
+
+  /postcss-discard-overridden@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+    dev: true
+
+  /postcss-import@16.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+    dev: true
+
+  /postcss-load-config@3.1.4(postcss@8.4.39):
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 2.1.0
+      postcss: 8.4.39
+      yaml: 1.10.2
+    dev: true
+
   /postcss-loader@8.1.1(postcss@8.4.38)(typescript@5.5.2)(webpack@5.91.0):
     resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==}
     engines: {node: '>= 18.12.0'}
@@ -15827,45 +16148,252 @@ packages:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
     dev: true
 
-  /postcss-modules-extract-imports@3.1.0(postcss@8.4.38):
+  /postcss-merge-longhand@5.1.7(postcss@8.4.39):
+    resolution: {integrity: sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+      stylehacks: 5.1.1(postcss@8.4.39)
+    dev: true
+
+  /postcss-merge-rules@5.1.4(postcss@8.4.39):
+    resolution: {integrity: sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.23.1
+      caniuse-api: 3.0.0
+      cssnano-utils: 3.1.0(postcss@8.4.39)
+      postcss: 8.4.39
+      postcss-selector-parser: 6.1.0
+    dev: true
+
+  /postcss-minify-font-values@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-minify-gradients@5.1.1(postcss@8.4.39):
+    resolution: {integrity: sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      colord: 2.9.3
+      cssnano-utils: 3.1.0(postcss@8.4.39)
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-minify-params@5.1.4(postcss@8.4.39):
+    resolution: {integrity: sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.23.1
+      cssnano-utils: 3.1.0(postcss@8.4.39)
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-minify-selectors@5.2.1(postcss@8.4.39):
+    resolution: {integrity: sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-selector-parser: 6.1.0
+    dev: true
+
+  /postcss-modules-extract-imports@3.1.0(postcss@8.4.39):
     resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.38
+      postcss: 8.4.39
     dev: true
 
-  /postcss-modules-local-by-default@4.0.5(postcss@8.4.38):
+  /postcss-modules-local-by-default@4.0.5(postcss@8.4.39):
     resolution: {integrity: sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.38)
-      postcss: 8.4.38
+      icss-utils: 5.1.0(postcss@8.4.39)
+      postcss: 8.4.39
       postcss-selector-parser: 6.1.0
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-scope@3.2.0(postcss@8.4.38):
+  /postcss-modules-scope@3.2.0(postcss@8.4.39):
     resolution: {integrity: sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.38
+      postcss: 8.4.39
       postcss-selector-parser: 6.1.0
     dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.38):
+  /postcss-modules-values@4.0.0(postcss@8.4.39):
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.38)
-      postcss: 8.4.38
+      icss-utils: 5.1.0(postcss@8.4.39)
+      postcss: 8.4.39
+    dev: true
+
+  /postcss-modules@4.3.1(postcss@8.4.39):
+    resolution: {integrity: sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      generic-names: 4.0.0
+      icss-replace-symbols: 1.1.0
+      lodash.camelcase: 4.3.0
+      postcss: 8.4.39
+      postcss-modules-extract-imports: 3.1.0(postcss@8.4.39)
+      postcss-modules-local-by-default: 4.0.5(postcss@8.4.39)
+      postcss-modules-scope: 3.2.0(postcss@8.4.39)
+      postcss-modules-values: 4.0.0(postcss@8.4.39)
+      string-hash: 1.1.3
+    dev: true
+
+  /postcss-normalize-charset@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+    dev: true
+
+  /postcss-normalize-display-values@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-positions@5.1.1(postcss@8.4.39):
+    resolution: {integrity: sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-repeat-style@5.1.1(postcss@8.4.39):
+    resolution: {integrity: sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-string@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-timing-functions@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-unicode@5.1.1(postcss@8.4.39):
+    resolution: {integrity: sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.23.1
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-url@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      normalize-url: 6.1.0
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-normalize-whitespace@5.1.1(postcss@8.4.39):
+    resolution: {integrity: sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-ordered-values@5.1.3(postcss@8.4.39):
+    resolution: {integrity: sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      cssnano-utils: 3.1.0(postcss@8.4.39)
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /postcss-reduce-initial@5.1.2(postcss@8.4.39):
+    resolution: {integrity: sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.23.1
+      caniuse-api: 3.0.0
+      postcss: 8.4.39
+    dev: true
+
+  /postcss-reduce-transforms@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
     dev: true
 
   /postcss-selector-parser@6.1.0:
@@ -15876,6 +16404,27 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
+  /postcss-svgo@5.1.0(postcss@8.4.39):
+    resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-value-parser: 4.2.0
+      svgo: 2.8.0
+    dev: true
+
+  /postcss-unique-selectors@5.1.1(postcss@8.4.39):
+    resolution: {integrity: sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      postcss: 8.4.39
+      postcss-selector-parser: 6.1.0
+    dev: true
+
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
@@ -15896,6 +16445,15 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.1
       source-map-js: 1.2.0
+    dev: true
+
+  /postcss@8.4.39:
+    resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
 
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -15983,6 +16541,11 @@ packages:
       retry: 0.12.0
     dev: true
 
+  /promise.series@0.2.0:
+    resolution: {integrity: sha512-VWQJyU2bcDTgZw8kpfBpB/ejZASlCrzwz5f2hjb/zlujOEB4oeiAhHygAWq8ubsX2GVkD4kCU5V2dwOTaCY5EQ==}
+    engines: {node: '>=0.12'}
+    dev: true
+
   /prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -16332,6 +16895,12 @@ packages:
     dependencies:
       loose-envify: 1.4.0
 
+  /read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+    dev: true
+
   /read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -16593,7 +17162,7 @@ packages:
       adjust-sourcemap-loader: 4.0.0
       convert-source-map: 1.9.0
       loader-utils: 2.0.4
-      postcss: 8.4.38
+      postcss: 8.4.39
       source-map: 0.6.1
     dev: true
 
@@ -16675,6 +17244,40 @@ packages:
       inherits: 2.0.4
     dev: true
 
+  /rollup-plugin-postcss@4.0.2(postcss@8.4.39):
+    resolution: {integrity: sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      postcss: 8.x
+    dependencies:
+      chalk: 4.1.2
+      concat-with-sourcemaps: 1.1.0
+      cssnano: 5.1.15(postcss@8.4.39)
+      import-cwd: 3.0.0
+      p-queue: 6.6.2
+      pify: 5.0.0
+      postcss: 8.4.39
+      postcss-load-config: 3.1.4(postcss@8.4.39)
+      postcss-modules: 4.3.1(postcss@8.4.39)
+      promise.series: 0.2.0
+      resolve: 1.22.8
+      rollup-pluginutils: 2.8.2
+      safe-identifier: 0.4.2
+      style-inject: 0.3.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: true
+
+  /rollup-plugin-sass-variables@0.1.1:
+    resolution: {integrity: sha512-nTj4onwZwxI1VIkV8eMBZBOpqA9QkskGz4VSt36yHLNXnz758mHGIyaL5lMoWhplk2475TcGLZ+CSL+iMB6D5w==}
+    dev: true
+
+  /rollup-pluginutils@2.8.2:
+    resolution: {integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==}
+    dependencies:
+      estree-walker: 0.6.1
+    dev: true
+
   /rollup@3.29.4:
     resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@@ -16759,6 +17362,10 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
+  /safe-identifier@0.4.2:
+    resolution: {integrity: sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==}
+    dev: true
+
   /safe-regex-test@1.0.3:
     resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==}
     engines: {node: '>= 0.4'}
@@ -17324,6 +17931,11 @@ packages:
       minipass: 7.1.2
     dev: true
 
+  /stable@0.1.8:
+    resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
+    deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
+    dev: true
+
   /stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -17416,6 +18028,10 @@ packages:
       bare-events: 2.4.2
     dev: true
 
+  /string-hash@1.1.3:
+    resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==}
+    dev: true
+
   /string-length@4.0.2:
     resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
     engines: {node: '>=10'}
@@ -17565,6 +18181,10 @@ packages:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  /style-inject@0.3.0:
+    resolution: {integrity: sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==}
+    dev: true
+
   /style-loader@3.3.4(webpack@5.92.1):
     resolution: {integrity: sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==}
     engines: {node: '>= 12.13.0'}
@@ -17592,6 +18212,17 @@ packages:
       react: 18.3.1
     dev: true
 
+  /stylehacks@5.1.1(postcss@8.4.39):
+    resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==}
+    engines: {node: ^10 || ^12 || >=14.0}
+    peerDependencies:
+      postcss: ^8.2.15
+    dependencies:
+      browserslist: 4.23.1
+      postcss: 8.4.39
+      postcss-selector-parser: 6.1.0
+    dev: true
+
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -17615,6 +18246,20 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /svgo@2.8.0:
+    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 4.3.0
+      css-tree: 1.1.3
+      csso: 4.2.0
+      picocolors: 1.0.1
+      stable: 0.1.8
+    dev: true
+
   /swap-case@1.1.2:
     resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
     dependencies:
@@ -18532,7 +19177,7 @@ packages:
       '@types/node': 20.14.9
       esbuild: 0.20.2
       less: 4.2.0
-      postcss: 8.4.38
+      postcss: 8.4.39
       rollup: 4.18.0
       sass: 1.77.2
       terser: 5.31.0