globuswebcomponents 2.5.4 → 2.5.5

package/dist/cjs/gb-header.cjs.entry.js

@@ -1,170 +0,0 @@
-'use strict';
-
-var index = require('./index-CmQuD5Lz.js');
-var reusableModels = require('./reusableModels-_LRAKnsh.js');
-
-const gbHeaderCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n  /* --------------------------------------Primary Colors--------------------------------------------- */\r\n  /* base color palette */\r\n  --base-white: #fff;\r\n  --base-black: #000;\r\n\r\n  /* gray color palette  */\r\n  --gray-25: #f9fafb;\r\n  --gray-50: #f6f8fa;\r\n  --gray-100: #eef2f6;\r\n  --gray-200: #e3e8ef;\r\n  --gray-300: #cdd5df;\r\n  --gray-400: #808c9e;\r\n  --gray-500: #697586;\r\n  --gray-600: #4b5565;\r\n  --gray-700: #364152;\r\n  --gray-800: #202939;\r\n  --gray-900: #121926;\r\n  --gray-950: #0d121c;\r\n\r\n  /* brand dark blue color palette */\r\n  --brandDarkBlue-25: #f9f9fb;\r\n  --brandDarkBlue-50: #edeef3;\r\n  --brandDarkBlue-100: #d3d5e0;\r\n  --brandDarkBlue-200: #b5b9cc;\r\n  --brandDarkBlue-300: #9095b2;\r\n  --brandDarkBlue-400: #464f7f;\r\n  --brandDarkBlue-500: #212c65;\r\n  --brandDarkBlue-600: #1e285c;\r\n  --brandDarkBlue-700: #1c2554;\r\n  --brandDarkBlue-800: #161d43;\r\n  --brandDarkBlue-900: #0b0f22;\r\n  --brandDarkBlue-950: #070914;\r\n\r\n  /* brand red color palette */\r\n  --brandRed-25: #fffbfa;\r\n  --brandRed-50: #fef1f2;\r\n  --brandRed-100: #fde3e5;\r\n  --brandRed-200: #f9b4ba;\r\n  --brandRed-300: #f68e98;\r\n  --brandRed-400: #f36976;\r\n  --brandRed-500: #e21b2e;\r\n  --brandRed-600: #cc1a2a;\r\n  --brandRed-700: #b51726;\r\n  --brandRed-800: #8c121d;\r\n  --brandRed-900: #680d16;\r\n  --brandRed-950: #3f080d;\r\n\r\n  /* warning color palette */\r\n  --warning-25: #fffcf5;\r\n  --warning-50: #fffaeb;\r\n  --warning-100: #fef0c7;\r\n  --warning-200: #fedf89;\r\n  --warning-300: #fec84b;\r\n  --warning-400: #fdb022;\r\n  --warning-500: #f79009;\r\n  --warning-600: #dc6803;\r\n  --warning-700: #b54708;\r\n  --warning-800: #93370d;\r\n  --warning-900: #7a2e0e;\r\n  --warning-950: #4e1d09;\r\n\r\n  /* success color palette  */\r\n  --success-25: #f6fef9;\r\n  --success-50: #ecfdf3;\r\n  --success-100: #dcfaeb;\r\n  --success-200: #a9efc5;\r\n  --success-300: #75e0a7;\r\n  --success-400: #47cd89;\r\n  --success-500: #17b26a;\r\n  --success-600: #079455;\r\n  --success-700: #067647;\r\n  --success-800: #085d3a;\r\n  --success-900: #074d31;\r\n  --success-950: #053321;\r\n\r\n  /* ------------------------------------------opacity color palette--------------------------------------  */\r\n  /* 0% opacity */\r\n  /* White */\r\n  --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n  /* Gray */\r\n  --gray25-opacity0: rgba(249, 250, 251, 0);\r\n  --gray900-opacity0: rgba(18, 25, 38, 0);\r\n  --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n  /* 20% opacity */\r\n  /* White */\r\n  --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n  /* Dark Blue */\r\n  --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n  --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n  /* Gray */\r\n  --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n  --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n  --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n  /* 30% opacity */\r\n  --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n  --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n  /* 40% opacity */\r\n  --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n  --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n  /* 50% opacity */\r\n  /* White */\r\n  --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n  /* Gray */\r\n  --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n  --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n  --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n  /* ------------------------------------------Secondary Color------------------------------------------- */\r\n  /* blueLight color palete */\r\n  --lightBlue-25: #f5fbff;\r\n  --lightBlue-50: #f0f9ff;\r\n  --lightBlue-100: #e0f2fe;\r\n  --lightBlue-200: #b9e6fe;\r\n  --lightBlue-300: #7cd4fd;\r\n  --lightBlue-400: #7cd4fd;\r\n  --lightBlue-500: #0ba5ec;\r\n  --lightBlue-600: #0086c9;\r\n  --lightBlue-700: #026aa2;\r\n  --lightBlue-800: #065986;\r\n  --lightBlue-900: #0b4a6f;\r\n  --lightBlue-950: #062c41;\r\n\r\n  /* blue color palette */\r\n  --blue-25: #ecf5fe;\r\n  --blue-50: #e4f0fc;\r\n  --blue-100: #c8e0f9;\r\n  --blue-200: #9ac7f4;\r\n  --blue-300: #6aa9e7;\r\n  --blue-400: #378fe6;\r\n  --blue-500: #075db2;\r\n  --blue-600: #064e94;\r\n  --blue-700: #053e77;\r\n  --blue-800: #042f59;\r\n  --blue-900: #022445;\r\n  --blue-950: #021d37;\r\n\r\n  /* Purple color palete */\r\n  --purple-25: #fafaff;\r\n  --purple-50: #f4f3ff;\r\n  --purple-100: #ebe9fe;\r\n  --purple-200: #d9d6fe;\r\n  --purple-300: #bdb4fe;\r\n  --purple-400: #9b8afb;\r\n  --purple-500: #7a5af8;\r\n  --purple-600: #6938ef;\r\n  --purple-700: #5925dc;\r\n  --purple-800: #4a1fb8;\r\n  --purple-900: #3e1c96;\r\n  --purple-950: #27115f;\r\n\r\n  /* pink color palette */\r\n  --pink-25: #fef6fb;\r\n  --pink-50: #fdf2fa;\r\n  --pink-100: #fce7f6;\r\n  --pink-200: #fcceee;\r\n  --pink-300: #faa7e0;\r\n  --pink-400: #f670c7;\r\n  --pink-500: #ee46bc;\r\n  --pink-600: #dd2590;\r\n  --pink-700: #c11574;\r\n  --pink-800: #9e165f;\r\n  --pink-900: #851651;\r\n  --pink-950: #4e0d30;\r\n\r\n  /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n  /* -----------Text Color----------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-text-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-inverse: var(--base-black);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-subtle: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-subtle: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-subtle: var(--warning-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-subtle: var(--warning-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-subtle: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-subtle: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-subtle: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-subtle: var(--blue-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-subtle: var(--purple-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-subtle: var(--purple-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-subtle: var(--pink-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-subtle: var(--pink-400);\r\n  }\r\n\r\n  /* --------------Link color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-link: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-visited: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-visited: var(--lightBlue-300);\r\n  }\r\n\r\n  /* --------------Icon color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink: var(--pink-300);\r\n  }\r\n\r\n  /* ----------------Border Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-border-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtle: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtler: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-disabled: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-input: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-input: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-focus: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-focus: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  /* Emmanuel Kadiri starts from background color */\r\n\r\n  /* ----------------Background Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-input: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-input: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-disabled: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-disabled: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-btn-disabled: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-btn-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-hover: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-hover: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtle: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtler: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtlest: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtlest: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtlest: var(--brandRed-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtlest: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtlest: var(--warning-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtlest: var(--warning-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success: var(--success-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtlest: var(--success-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtlest: var(--success-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtlest: var(--blue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtlest: var(--blue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtlest: var(--purple-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtlest: var(--pink-950);\r\n  }\r\n\r\n  /* ----------------Blanket Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-blanket: var(--darkBlue500-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket: var(--darkBlue200-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n  }\r\n\r\n  /* ----------------Skeleton Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-skeleton: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton: var(--gray-800);\r\n  }\r\n\r\n    [data-theme='light'] {\r\n    --color-skeleton-bold: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton-bold: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Surface Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-bold: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-hovered: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-hovered: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-pressed: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-pressed: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Transparent Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-transparent50: var(--white-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent50: var(--gray900-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent20: var(--white-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent20: var(--gray900-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent-full: var(--white-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent-full: var(--gray900-opacity0);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n  }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n  --blur-sm: blur(4px);\r\n  --blur-md: blur(8px);\r\n  --blur-lg: blur(12px);\r\n  --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n  box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n  box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n  box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n  box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n  box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n  box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n  box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n  backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n  backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n  backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n  backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n  /* Gray Gradients */\r\n  /* --gray-gradient-600: linear-gradient(); */\r\n  --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n  --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n  --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n  --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n  /* Brand Dark Blue Gradients */\r\n  --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n  --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n  /* Brand Red Gradients */\r\n  --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n  --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n  --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n  --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n  --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n  --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n  /* Blue Gradients */\r\n  --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n  --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n  --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n  --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n  --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n  --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n  background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n  background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n  background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n  background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n  background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n  background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n  background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n  background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n  background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n  background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n  background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n  background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n  background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n  background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n  background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n  background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n  background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n  background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n  background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n  background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n  background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n  background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n  background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n  background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n  /* Positive spacing */\r\n  --spacing-none: 0rem;\r\n  --spacing-half: 0.125rem;\r\n  --spacing-1: 0.25rem;\r\n  --spacing-2: 0.5rem;\r\n  --spacing-3: 0.75rem;\r\n  --spacing-4: 1rem;\r\n  --spacing-5: 1.25rem;\r\n  --spacing-6: 1.5rem;\r\n  --spacing-7: 2rem;\r\n  --spacing-8: 2.5rem;\r\n  --spacing-12: 3rem;\r\n  --spacing-16: 4rem;\r\n  --spacing-20: 5rem;\r\n  --spacing-24: 6rem;\r\n  --spacing-32: 8rem;\r\n  --spacing-40: 10rem;\r\n  --spacing-48: 12rem;\r\n  --spacing-56: 14rem;\r\n  --spacing-64: 16rem;\r\n\r\n  /* Negative spacing */\r\n\r\n  --spacing-negative-half: -0.125rem;\r\n  --spacing-negative-1: -0.25rem;\r\n  --spacing-negative-2: -0.5rem;\r\n  --spacing-negative-3: -0.75rem;\r\n  --spacing-negative-4: -1rem;\r\n  --spacing-negative-5: -1.25rem;\r\n  --spacing-negative-6: -1.5rem;\r\n  --spacing-negative-7: -2rem;\r\n\r\n  /* Radius  */\r\n  --rounded-none: 0rem;\r\n  --rounded-xs: 0.25rem;\r\n  --rounded-sm: 0.5rem;\r\n  --rounded-md: 0.75rem;\r\n  --rounded-lg: 1rem;\r\n  --rounded-xl: 1.5rem;\r\n  --rounded-2xl: 2rem;\r\n  --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n  /* Font Sizes */\r\n  --font-size-d-2xl: 4.5rem;\r\n  --font-size-d-xl: 3.75rem;\r\n  --font-size-d-lg: 3rem;\r\n  --font-size-d-md: 2.25rem;\r\n  --font-size-d-sm: 1.875rem;\r\n  --font-size-d-xs: 1.5rem;\r\n  --font-size-t-xl: 1.25rem;\r\n  --font-size-t-lg: 1.125rem;\r\n  --font-size-t-md: 1rem;\r\n  --font-size-t-sm: 0.875rem;\r\n  --font-size-t-xs: 0.75rem;\r\n  --font-size-t-xxs: 0.625rem;\r\n\r\n  /* Font Weights */\r\n  --font-weight-bold: 700;\r\n  --font-weight-semi-bold: 600;\r\n  --font-weight-medium: 500;\r\n  --font-weight-regular: 400;\r\n\r\n  /* Line Heights */\r\n  --font-line-height-d-2xl: 5rem;\r\n  --font-line-height-d-xl: 4.25rem;\r\n  --font-line-height-d-lg: 3.75rem;\r\n  --font-line-height-d-md: 2.75rem;\r\n  --font-line-height-d-sm: 2.375rem;\r\n  --font-line-height-d-xs: 2rem;\r\n  --font-line-height-t-xl: 2rem;\r\n  --font-line-height-t-lg: 1.875rem;\r\n  --font-line-height-t-md: 1.688rem;\r\n  --font-line-height-t-sm: 1.5rem;\r\n  --font-line-height-t-xs: 1.25rem;\r\n  --font-line-height-t-xxs: 1.125rem;\r\n\r\n  /* Letter Spacings */\r\n  --font-letter-spacing-d-2xl: -0.09rem;\r\n  --font-letter-spacing-d-xl: -0.075rem;\r\n  --font-letter-spacing-d-lg: -0.075rem;\r\n  --font-letter-spacing-d-md: -0.045rem;\r\n  --font-letter-spacing-d-sm: 0;\r\n  --font-letter-spacing-d-xs: 0;\r\n  --font-letter-spacing-d-xxs: 0;\r\n\r\n  /* Font Families */\r\n  --font-family-title: 'Sora';\r\n  --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3.75rem;\r\n    --font-size-d-xl: 3.5rem;\r\n    --font-size-d-lg: 2.75rem;\r\n    --font-size-d-md: 2.25rem;\r\n    --font-size-d-sm: 1.875rem;\r\n    --font-size-d-xs: 1.5rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 4.25rem;\r\n    --font-line-height-d-xl: 3.75rem;\r\n    --font-line-height-d-lg: 2.4375rem;\r\n    --font-line-height-d-md: 2.75rem;\r\n    --font-line-height-d-sm: 2.375rem;\r\n    --font-line-height-d-xs: 2rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.075rem;\r\n    --font-letter-spacing-xl: -0.065rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: -0.045rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3rem;\r\n    --font-size-d-xl: 2.5rem;\r\n    --font-size-d-lg: 2rem;\r\n    --font-size-d-md: 1.75rem;\r\n    --font-size-d-sm: 1.5rem;\r\n    --font-size-d-xs: 1.25rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 3.375rem;\r\n    --font-line-height-d-xl: 2.875rem;\r\n    --font-line-height-d-lg: 2.5rem;\r\n    --font-line-height-d-md: 2.1375rem;\r\n    --font-line-height-d-sm: 2rem;\r\n    --font-line-height-d-xs: 1.75rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.06rem;\r\n    --font-letter-spacing-xl: -0.05rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: 0rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n.display-2xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n  margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n  margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n  margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n  margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n  margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n  margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n\r\n.header_div {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 100%;\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.header_div.border {\r\n  border-bottom: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  height: 4.5rem;\r\n  padding: 0rem 2rem;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  align-self: stretch;\r\n}\r\n\r\n.logo {\r\n  display: block;\r\n}\r\n\r\n.icon_logo {\r\n  display: none;\r\n}\r\n\r\n.inner_content {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: var(--spacing-4);\r\n  flex: 1 0 0;\r\n  position: relative;\r\n}\r\n\r\n.action {\r\n  display: flex;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.search {\r\n  width: 20rem;\r\n}\r\n\r\n.avatar_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 0;\r\n  z-index: 9999;\r\n}\r\n\r\n.notification_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 4rem;\r\n  z-index: 9999;\r\n}\r\n\r\n.help_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 6.5rem;\r\n  z-index: 9999;\r\n}\r\n\r\n@media (max-width: 440px) {\r\n  .content {\r\n    padding: var(--spacing-none) var(--spacing-5);\r\n  }\r\n}\r\n\r\n@media (max-width: 450px) {\r\n  .logo {\r\n    display: none;\r\n  }\r\n\r\n  .icon_logo {\r\n    display: block;\r\n  }\r\n}\r\n";
-
-const GbHeader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.navBarItemClicked = index.createEvent(this, "navBarItemClicked");
-        this.menuClicked = index.createEvent(this, "menuClicked");
-        this.inputValueChanged = index.createEvent(this, "inputValueChanged");
-        this.helpItemClicked = index.createEvent(this, "helpItemClicked");
-        this.themeTabClicked = index.createEvent(this, "themeTabClicked");
-        this.avatarDropdownItemClicked = index.createEvent(this, "avatarDropdownItemClicked");
-        this.showIndicator = false;
-        this.text = true;
-        this.placeholder = false;
-        this.color = 'blue';
-        this.showBorder = true;
-        this.showNotification = false;
-        this.showHelp = false;
-        this.showLogo = false;
-        this.logo = '';
-        this.showSearch = false;
-        this.inputPlaceholder = '';
-        this.inputIcon = '';
-        this.avatarDropdownType = 'simple';
-        this.listGroupOne = [
-        // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },
-        // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },
-        // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },
-        ];
-        this.listGroupTwo = [
-        // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },
-        // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },
-        // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },
-        ];
-        this.showThemeTab = true;
-        this.showProfile = true;
-        this.showRoles = false;
-        this.roles = [
-        // {
-        //   badgeLabel: 'Initiator',
-        //   badgeColor: 'information',
-        //   badgeType: 'badge_color',
-        // },
-        // {
-        //   badgeLabel: 'Authorizer',
-        //   badgeColor: 'success',
-        //   badgeType: 'badge_color',
-        // },
-        // {
-        //   badgeLabel: 'Viewer',
-        //   badgeColor: 'gray',
-        //   badgeType: 'badge_color',
-        // },
-        ];
-        this.showLogOut = false;
-        this.showLogError = false;
-        this.notifications = [
-        // {
-        //   label: 'Flagged transaction',
-        //   time: 'Just now',
-        //   desc: 'Aisha, here is your weekly report',
-        //   icon: 'assets/arrow-right-02.svg',
-        // },
-        // {
-        //   label: 'Flagged transaction',
-        //   time: 'Just now',
-        //   desc: 'Aisha, here is your weekly report',
-        //   icon: 'assets/arrow-right-02.svg',
-        // },
-        // {
-        //   label: 'Flagged transaction',
-        //   time: 'Just now',
-        //   desc: 'Aisha, here is your weekly report',
-        //   icon: 'assets/arrow-right-02.svg',
-        // },
-        // {
-        //   label: 'Flagged transaction',
-        //   time: 'Just now',
-        //   desc: 'Aisha, here is your weekly report',
-        //   icon: 'assets/arrow-right-02.svg',
-        // },
-        // {
-        //   label: 'Flagged transaction',
-        //   time: 'Just now',
-        //   desc: 'Aisha, here is your weekly report',
-        //   icon: 'assets/arrow-right-02.svg',
-        // },
-        ];
-        this.avatarDropdownShown = false;
-        this.notificationDropdownShown = false;
-        this.helpDropdownShown = false;
-        this.initials = '';
-    }
-    applyColorToInitials() {
-        switch (this.color) {
-            case 'gray':
-                return 'gray';
-            case 'blue':
-                return 'blue';
-            case 'cyan':
-                return 'cyan';
-            case 'pink':
-                return 'pink';
-            case 'purple':
-                return 'purple';
-            case 'green':
-                return 'green';
-            case 'yellow':
-                return 'yellow';
-        }
-    }
-    onSearch(item) {
-        this.inputValueChanged.emit(item.detail);
-    }
-    componentDidLoad() {
-        document.addEventListener('click', this.handleClickOutside);
-        const initials = this.el.querySelector("[slot='initials']");
-        if (initials) {
-            initials.classList.add('text-md-semi-bold');
-            initials.classList.add(this.applyColorToInitials());
-            console.log(initials.textContent);
-            this.initials = initials.textContent;
-        }
-    }
-    helpDropdownItemClicked(item) {
-        this.helpItemClicked.emit(item.detail);
-    }
-    onThemeTabClicked(tab) {
-        this.themeTabClicked.emit(tab.detail);
-    }
-    onAvatarDropdownItemClicked(item) {
-        console.log(item.detail);
-        this.avatarDropdownItemClicked.emit(item.detail);
-    }
-    onNotificationDropdownItemClicked(item) {
-        console.log(item.detail);
-        this.avatarDropdownItemClicked.emit(item.detail);
-    }
-    handleClickOutside(event) {
-        if (this.avatarDropdownShown && !this.el.contains(event.target)) {
-            this.avatarDropdownShown = false;
-        }
-        if (this.helpDropdownShown && !this.el.contains(event.target)) {
-            this.helpDropdownShown = false;
-        }
-        if (this.notificationDropdownShown && !this.el.contains(event.target)) {
-            this.notificationDropdownShown = false;
-        }
-    }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside);
-    }
-    render() {
-        const helpIconSrc = index.getAssetPath(`assets/help-circle.svg`);
-        const notificationIconSrc = index.getAssetPath(`assets/notification-03.svg`);
-        return (index.h("div", { key: '9a64d1de11d2bc6e83b89991d2476a115b00f230', class: `header_div ${this.showBorder ? 'border' : ''}` }, index.h("div", { key: 'fc364f6a063099a3c9db434839ba5f34b4a49300', class: "content" }, index.h("slot", { key: '922b047d19497909f7d45e46d6b852f0478b9139', name: "logo" }), index.h("div", { key: '0b4147d745413ee4d57c95bff8c91e4c3ce92fee', class: "inner_content" }, index.h("div", { key: '3d2e5b5becd0f1b0a0949234637650fa51ec3b6e', class: `action` }, this.showSearch && (index.h("div", { key: '22fd7dca42a123a3498fc623b14f6ac82da2dde7', class: "search" }, index.h("gb-input-field", { key: 'ae7b454a45c7fc1c63c0b4b1e8a0f0466487ed51', size: "sm", state: "default", type: "icon_leading", placeholder: this.inputPlaceholder, "icon-swap": this.inputIcon, onInputValueChanged: this.onSearch.bind(this) }))), this.showHelp && index.h("gb-header-icon", { key: 'f768470db1ae7ba465ea7237a4a5e601671e839e', state: reusableModels.StateEnum.Default, icon: helpIconSrc, onClick: () => (this.helpDropdownShown = !this.helpDropdownShown) }), this.showNotification && (index.h("gb-header-icon", { key: '7692d895e3a7c1452bf248e1bb7302ba47a1028e', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => (this.notificationDropdownShown = !this.notificationDropdownShown) }))), index.h("gb-avatar", { key: 'fa984edbd90fcc4d8ad1d07aa61f6c5b745c54c4', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => (this.avatarDropdownShown = !this.avatarDropdownShown) }, this.text ? index.h("slot", { slot: "initials", name: "initials" }) : index.h("slot", { name: "image", slot: "image" })), this.avatarDropdownShown && (index.h("gb-avatar-dropdown", { key: '373345be7ebabda63e9dcdf06a2130d241043c08', ref: el => (this.avatarDropdown = el), class: "avatar_dropdown", type: this.avatarDropdownType, "show-theme-tab": this.showThemeTab, "show-profile": this.showProfile, "show-log-out": this.showLogOut, listGroupOne: this.listGroupOne, listGroupTwo: this.listGroupTwo, color: this.color, roles: this.roles, "show-roles": this.showRoles, "current-theme": "light", onThemeTabClicked: this.onThemeTabClicked.bind(this), onItemClicked: this.onAvatarDropdownItemClicked.bind(this) }, index.h("slot", { key: '3582af42d1a9a008cedf2e7b4a9976c58a9a4deb', slot: "name", name: "name" }), index.h("slot", { key: '14f673180938aae3adc19f15a59cf7b0574e05a4', slot: "supporting_text", name: "supporting_text" }), index.h("h1", { key: 'b3209b63f185721927ea6ab98c31706334bf74fb', slot: "initials", class: `text-md-semi-bold` }, this.initials))), this.notificationDropdownShown && (index.h("gb-notification-pane", { key: '0b9d3b377bc14b89f602f230270e0e820374e2d4', state: this.notificationState, class: "notification_dropdown", notifications: this.notifications }, index.h("p", { key: 'bca0d844b1bef54d4591e4b465ff209a04fc0ce7', slot: "label" }, "No notification"), index.h("p", { key: '167b58c1a584ffbf1a541b7d6e56e0359bfef2c2', slot: "supporting_text" }, "Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events"))), this.helpDropdownShown && (index.h("gb-help-dropdown", { key: '50600fbcac2c8995784941d125c6898aafbd318c', class: "help_dropdown", "show-log-error": this.showLogError, onHelpItemClicked: this.helpDropdownItemClicked.bind(this) }))))));
-    }
-    get el() { return index.getElement(this); }
-};
-GbHeader.style = gbHeaderCss;
-
-exports.gb_header = GbHeader;
-//# sourceMappingURL=gb-header.entry.cjs.js.map
-
-//# sourceMappingURL=gb-header.cjs.entry.js.map

package/dist/cjs/gb-header.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"gb-header.entry.cjs.js","mappings":"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","names":["getAssetPath","h","StateEnum"],"sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.header_div {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 100%;\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.header_div.border {\r\n  border-bottom: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  height: 4.5rem;\r\n  padding: 0rem 2rem;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  align-self: stretch;\r\n}\r\n\r\n.logo {\r\n  display: block;\r\n}\r\n\r\n.icon_logo {\r\n  display: none;\r\n}\r\n\r\n.inner_content {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: var(--spacing-4);\r\n  flex: 1 0 0;\r\n  position: relative;\r\n}\r\n\r\n.action {\r\n  display: flex;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.search {\r\n  width: 20rem;\r\n}\r\n\r\n.avatar_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 0;\r\n  z-index: 9999;\r\n}\r\n\r\n.notification_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 4rem;\r\n  z-index: 9999;\r\n}\r\n\r\n.help_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 6.5rem;\r\n  z-index: 9999;\r\n}\r\n\r\n@media (max-width: 440px) {\r\n  .content {\r\n    padding: var(--spacing-none) var(--spacing-5);\r\n  }\r\n}\r\n\r\n@media (max-width: 450px) {\r\n  .logo {\r\n    display: none;\r\n  }\r\n\r\n  .icon_logo {\r\n    display: block;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, getAssetPath, h, Prop, State, Listen } from '@stencil/core';\r\nimport { ColorTypes, DropdownListGroup, DropdownRoles, Notification, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = true;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: ColorTypes = 'blue';\r\n  @Prop() showBorder: boolean = true;\r\n  @Prop() showNotification: boolean = false;\r\n  @Prop() showHelp: boolean = false;\r\n  @Prop() showLogo: boolean = false;\r\n  @Prop() logo: string = '';\r\n  @Prop() showSearch: boolean = false;\r\n  @Prop() inputPlaceholder: string = '';\r\n  @Prop() inputIcon: string = '';\r\n  @Prop() avatarDropdownType: 'simple' | 'complex' = 'simple';\r\n  @Prop() listGroupOne: DropdownListGroup[] = [\r\n    // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n    // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n    // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n  ];\r\n  @Prop() listGroupTwo: DropdownListGroup[] = [\r\n    // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n    // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n    // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n  ];\r\n  @Prop() showThemeTab: boolean = true;\r\n  @Prop() showProfile: boolean = true;\r\n  @Prop() showRoles: boolean = false;\r\n  @Prop() roles: DropdownRoles[] = [\r\n    // {\r\n    //   badgeLabel: 'Initiator',\r\n    //   badgeColor: 'information',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Authorizer',\r\n    //   badgeColor: 'success',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Viewer',\r\n    //   badgeColor: 'gray',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n  ];\r\n  @Prop() showLogOut: boolean = false;\r\n  @Prop() showLogError: boolean = false;\r\n  @Prop() notificationState: 'empty' | 'notification_dropdown';\r\n  @Prop({ mutable: true }) notifications: Notification[] = [\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n  ];\r\n  @State() avatarDropdownShown: boolean = false;\r\n  @State() notificationDropdownShown: boolean = false;\r\n  @State() helpDropdownShown: boolean = false;\r\n  @State() initials: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<string>;\r\n  @Event() menuClicked: EventEmitter<void>;\r\n  @Event() inputValueChanged: EventEmitter<string>;\r\n  @Event() helpItemClicked: EventEmitter<string>;\r\n  @Event() themeTabClicked: EventEmitter<string>;\r\n  @Event() avatarDropdownItemClicked: EventEmitter<string>;\r\n\r\n  avatarDropdown!: HTMLElement;\r\n  notificationDropdown!: HTMLElement;\r\n  helpDropdown!: HTMLElement;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onSearch(item) {\r\n    this.inputValueChanged.emit(item.detail);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n      console.log(initials.textContent);\r\n      this.initials = initials.textContent;\r\n    }\r\n  }\r\n\r\n  helpDropdownItemClicked(item) {\r\n    this.helpItemClicked.emit(item.detail);\r\n  }\r\n\r\n  onThemeTabClicked(tab) {\r\n    this.themeTabClicked.emit(tab.detail);\r\n  }\r\n\r\n  onAvatarDropdownItemClicked(item) {\r\n    console.log(item.detail);\r\n    this.avatarDropdownItemClicked.emit(item.detail);\r\n  }\r\n\r\n  onNotificationDropdownItemClicked(item) {\r\n    console.log(item.detail);\r\n    this.avatarDropdownItemClicked.emit(item.detail);\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.avatarDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.avatarDropdownShown = false;\r\n    }\r\n\r\n    if (this.helpDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.helpDropdownShown = false;\r\n    }\r\n\r\n    if (this.notificationDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.notificationDropdownShown = false;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n    return (\r\n      <div class={`header_div ${this.showBorder ? 'border' : ''}`}>\r\n        <div class=\"content\">\r\n          {/* {this.showLogo && (\r\n          )} */}\r\n          <slot name=\"logo\"></slot>\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              {this.showSearch && (\r\n                <div class=\"search\">\r\n                  <gb-input-field\r\n                    size=\"sm\"\r\n                    state=\"default\"\r\n                    type=\"icon_leading\"\r\n                    placeholder={this.inputPlaceholder}\r\n                    icon-swap={this.inputIcon}\r\n                    onInputValueChanged={this.onSearch.bind(this)}\r\n                  ></gb-input-field>\r\n                </div>\r\n              )}\r\n              {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => (this.helpDropdownShown = !this.helpDropdownShown)}></gb-header-icon>}\r\n              {this.showNotification && (\r\n                <gb-header-icon\r\n                  state={this.state}\r\n                  icon={notificationIconSrc}\r\n                  show-indicator={this.showIndicator}\r\n                  onClick={() => (this.notificationDropdownShown = !this.notificationDropdownShown)}\r\n                ></gb-header-icon>\r\n              )}\r\n            </div>\r\n            <gb-avatar\r\n              size=\"md\"\r\n              text={this.text}\r\n              placeholder={this.placeholder}\r\n              color={this.color}\r\n              show-border={this.showBorder}\r\n              onClick={() => (this.avatarDropdownShown = !this.avatarDropdownShown)}\r\n            >\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n            {this.avatarDropdownShown && (\r\n              <gb-avatar-dropdown\r\n                ref={el => (this.avatarDropdown = el)}\r\n                class=\"avatar_dropdown\"\r\n                type={this.avatarDropdownType}\r\n                show-theme-tab={this.showThemeTab}\r\n                show-profile={this.showProfile}\r\n                show-log-out={this.showLogOut}\r\n                listGroupOne={this.listGroupOne}\r\n                listGroupTwo={this.listGroupTwo}\r\n                color={this.color}\r\n                roles={this.roles}\r\n                show-roles={this.showRoles}\r\n                current-theme=\"light\"\r\n                onThemeTabClicked={this.onThemeTabClicked.bind(this)}\r\n                onItemClicked={this.onAvatarDropdownItemClicked.bind(this)}\r\n              >\r\n                <slot slot=\"name\" name=\"name\"></slot>\r\n                <slot slot=\"supporting_text\" name=\"supporting_text\"></slot>\r\n                <h1 slot=\"initials\" class={`text-md-semi-bold`}>\r\n                  {this.initials}\r\n                </h1>\r\n              </gb-avatar-dropdown>\r\n            )}\r\n            {this.notificationDropdownShown && (\r\n              <gb-notification-pane state={this.notificationState} class=\"notification_dropdown\" notifications={this.notifications}>\r\n                <p slot=\"label\">No notification</p>\r\n                <p slot=\"supporting_text\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p>\r\n              </gb-notification-pane>\r\n            )}\r\n            {this.helpDropdownShown && (\r\n              <gb-help-dropdown class=\"help_dropdown\" show-log-error={this.showLogError} onHelpItemClicked={this.helpDropdownItemClicked.bind(this)}></gb-help-dropdown>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/gb-header.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gb-header.entry.cjs.js","sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.header_div {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: 100%;\r\n  background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.header_div.border {\r\n  border-bottom: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  height: 4.5rem;\r\n  padding: 0rem 2rem;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  align-self: stretch;\r\n}\r\n\r\n.logo {\r\n  display: block;\r\n}\r\n\r\n.icon_logo {\r\n  display: none;\r\n}\r\n\r\n.inner_content {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: var(--spacing-4);\r\n  flex: 1 0 0;\r\n  position: relative;\r\n}\r\n\r\n.action {\r\n  display: flex;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.search {\r\n  width: 20rem;\r\n}\r\n\r\n.avatar_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 0;\r\n  z-index: 9999;\r\n}\r\n\r\n.notification_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 4rem;\r\n  z-index: 9999;\r\n}\r\n\r\n.help_dropdown{\r\n  position: absolute;\r\n  top: 110%;\r\n  right: 6.5rem;\r\n  z-index: 9999;\r\n}\r\n\r\n@media (max-width: 440px) {\r\n  .content {\r\n    padding: var(--spacing-none) var(--spacing-5);\r\n  }\r\n}\r\n\r\n@media (max-width: 450px) {\r\n  .logo {\r\n    display: none;\r\n  }\r\n\r\n  .icon_logo {\r\n    display: block;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, getAssetPath, h, Prop, State, Listen } from '@stencil/core';\r\nimport { ColorTypes, DropdownListGroup, DropdownRoles, Notification, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = true;\r\n  @Prop() placeholder: boolean = false;\r\n  @Prop() color: ColorTypes = 'blue';\r\n  @Prop() showBorder: boolean = true;\r\n  @Prop() showNotification: boolean = false;\r\n  @Prop() showHelp: boolean = false;\r\n  @Prop() showLogo: boolean = false;\r\n  @Prop() logo: string = '';\r\n  @Prop() showSearch: boolean = false;\r\n  @Prop() inputPlaceholder: string = '';\r\n  @Prop() inputIcon: string = '';\r\n  @Prop() avatarDropdownType: 'simple' | 'complex' = 'simple';\r\n  @Prop() listGroupOne: DropdownListGroup[] = [\r\n    // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n    // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n    // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n  ];\r\n  @Prop() listGroupTwo: DropdownListGroup[] = [\r\n    // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n    // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n    // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n  ];\r\n  @Prop() showThemeTab: boolean = true;\r\n  @Prop() showProfile: boolean = true;\r\n  @Prop() showRoles: boolean = false;\r\n  @Prop() roles: DropdownRoles[] = [\r\n    // {\r\n    //   badgeLabel: 'Initiator',\r\n    //   badgeColor: 'information',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Authorizer',\r\n    //   badgeColor: 'success',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Viewer',\r\n    //   badgeColor: 'gray',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n  ];\r\n  @Prop() showLogOut: boolean = false;\r\n  @Prop() showLogError: boolean = false;\r\n  @Prop() notificationState: 'empty' | 'notification_dropdown';\r\n  @Prop({ mutable: true }) notifications: Notification[] = [\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n    // {\r\n    //   label: 'Flagged transaction',\r\n    //   time: 'Just now',\r\n    //   desc: 'Aisha, here is your weekly report',\r\n    //   icon: 'assets/arrow-right-02.svg',\r\n    // },\r\n  ];\r\n  @State() avatarDropdownShown: boolean = false;\r\n  @State() notificationDropdownShown: boolean = false;\r\n  @State() helpDropdownShown: boolean = false;\r\n  @State() initials: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() navBarItemClicked: EventEmitter<string>;\r\n  @Event() menuClicked: EventEmitter<void>;\r\n  @Event() inputValueChanged: EventEmitter<string>;\r\n  @Event() helpItemClicked: EventEmitter<string>;\r\n  @Event() themeTabClicked: EventEmitter<string>;\r\n  @Event() avatarDropdownItemClicked: EventEmitter<string>;\r\n\r\n  avatarDropdown!: HTMLElement;\r\n  notificationDropdown!: HTMLElement;\r\n  helpDropdown!: HTMLElement;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onSearch(item) {\r\n    this.inputValueChanged.emit(item.detail);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n      initials.classList.add(this.applyColorToInitials());\r\n      console.log(initials.textContent);\r\n      this.initials = initials.textContent;\r\n    }\r\n  }\r\n\r\n  helpDropdownItemClicked(item) {\r\n    this.helpItemClicked.emit(item.detail);\r\n  }\r\n\r\n  onThemeTabClicked(tab) {\r\n    this.themeTabClicked.emit(tab.detail);\r\n  }\r\n\r\n  onAvatarDropdownItemClicked(item) {\r\n    console.log(item.detail);\r\n    this.avatarDropdownItemClicked.emit(item.detail);\r\n  }\r\n\r\n  onNotificationDropdownItemClicked(item) {\r\n    console.log(item.detail);\r\n    this.avatarDropdownItemClicked.emit(item.detail);\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleClickOutside(event: MouseEvent) {\r\n    if (this.avatarDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.avatarDropdownShown = false;\r\n    }\r\n\r\n    if (this.helpDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.helpDropdownShown = false;\r\n    }\r\n\r\n    if (this.notificationDropdownShown && !this.el.contains(event.target as Node)) {\r\n      this.notificationDropdownShown = false;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n    return (\r\n      <div class={`header_div ${this.showBorder ? 'border' : ''}`}>\r\n        <div class=\"content\">\r\n          {/* {this.showLogo && (\r\n          )} */}\r\n          <slot name=\"logo\"></slot>\r\n          <div class=\"inner_content\">\r\n            <div class={`action`}>\r\n              {this.showSearch && (\r\n                <div class=\"search\">\r\n                  <gb-input-field\r\n                    size=\"sm\"\r\n                    state=\"default\"\r\n                    type=\"icon_leading\"\r\n                    placeholder={this.inputPlaceholder}\r\n                    icon-swap={this.inputIcon}\r\n                    onInputValueChanged={this.onSearch.bind(this)}\r\n                  ></gb-input-field>\r\n                </div>\r\n              )}\r\n              {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => (this.helpDropdownShown = !this.helpDropdownShown)}></gb-header-icon>}\r\n              {this.showNotification && (\r\n                <gb-header-icon\r\n                  state={this.state}\r\n                  icon={notificationIconSrc}\r\n                  show-indicator={this.showIndicator}\r\n                  onClick={() => (this.notificationDropdownShown = !this.notificationDropdownShown)}\r\n                ></gb-header-icon>\r\n              )}\r\n            </div>\r\n            <gb-avatar\r\n              size=\"md\"\r\n              text={this.text}\r\n              placeholder={this.placeholder}\r\n              color={this.color}\r\n              show-border={this.showBorder}\r\n              onClick={() => (this.avatarDropdownShown = !this.avatarDropdownShown)}\r\n            >\r\n              {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n            </gb-avatar>\r\n            {this.avatarDropdownShown && (\r\n              <gb-avatar-dropdown\r\n                ref={el => (this.avatarDropdown = el)}\r\n                class=\"avatar_dropdown\"\r\n                type={this.avatarDropdownType}\r\n                show-theme-tab={this.showThemeTab}\r\n                show-profile={this.showProfile}\r\n                show-log-out={this.showLogOut}\r\n                listGroupOne={this.listGroupOne}\r\n                listGroupTwo={this.listGroupTwo}\r\n                color={this.color}\r\n                roles={this.roles}\r\n                show-roles={this.showRoles}\r\n                current-theme=\"light\"\r\n                onThemeTabClicked={this.onThemeTabClicked.bind(this)}\r\n                onItemClicked={this.onAvatarDropdownItemClicked.bind(this)}\r\n              >\r\n                <slot slot=\"name\" name=\"name\"></slot>\r\n                <slot slot=\"supporting_text\" name=\"supporting_text\"></slot>\r\n                <h1 slot=\"initials\" class={`text-md-semi-bold`}>\r\n                  {this.initials}\r\n                </h1>\r\n              </gb-avatar-dropdown>\r\n            )}\r\n            {this.notificationDropdownShown && (\r\n              <gb-notification-pane state={this.notificationState} class=\"notification_dropdown\" notifications={this.notifications}>\r\n                <p slot=\"label\">No notification</p>\r\n                <p slot=\"supporting_text\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p>\r\n              </gb-notification-pane>\r\n            )}\r\n            {this.helpDropdownShown && (\r\n              <gb-help-dropdown class=\"help_dropdown\" show-log-error={this.showLogError} onHelpItemClicked={this.helpDropdownItemClicked.bind(this)}></gb-help-dropdown>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["getAssetPath","h","StateEnum"],"mappings":"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"}