globuswebcomponents 2.18.11 → 2.18.12

package/dist/components/{p-DYmHug6U.js → p-YALfrxlg.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, g as getAssetPath, h, F as Fragment } from './p-CD7FeUx5.js';
-import { d as defineCustomElement$3 } from './p-C-Ao83_e.js';
-import { d as defineCustomElement$2 } from './p-fFhqO9F1.js';
-import { d as defineCustomElement$1 } from './p-Cw3E8ae6.js';
+import { d as defineCustomElement$3 } from './p-5znPazO0.js';
+import { d as defineCustomElement$2 } from './p-Bie4Ko6H.js';
+import { d as defineCustomElement$1 } from './p-C21s690I.js';
 
 const gbNotificationPaneCss = "@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\n/**\n * Global styles for portal-based dropdowns\n * Applied outside shadow DOM context\n */\n.portal_dropdown_wrapper {\n  width: -moz-fit-content;\n  width: fit-content;\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-md);\n  position: absolute;\n  z-index: 9999; /* High z-index to appear above sticky columns */\n  overflow: hidden;\n}\n.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {\n  display: block;\n  width: 100%;\n}\n/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {\n  background: var(--color-background-gray-subtler, #eef2f6);\n} */\n/**\n * gb-input-dropdown menu, portaled out of the component's shadow root.\n * Mirrors .dropdown_menu in gb-input-dropdown.css (which is shadow-scoped and\n * therefore no longer applies once this element is moved into #gb-portal-host).\n */\n.input_dropdown_portal_menu {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  max-height: 300px;\n  padding: var(--spacing-none);\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-sm);\n  position: absolute;\n  z-index: 9999;\n  gap: var(--spacing-none);\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n  /* Exact width (not just a minimum) is set inline by gb-input-dropdown-test.tsx\n   * (componentDidUpdate), matching the trigger's width. Content must not grow\n   * the menu wider than the trigger. */\n}\n.input_dropdown_portal_menu::-webkit-scrollbar {\n  right: 0rem;\n  bottom: -1.53125rem;\n  width: 0.8rem;\n  margin-top: 1rem;\n}\n.input_dropdown_portal_menu::-webkit-scrollbar-track {\n  width: 0.5rem;\n  padding: var(--spacing-1);\n  border: none;\n}\n.input_dropdown_portal_menu::-webkit-scrollbar-thumb {\n  width: 0.5rem;\n  height: 11.75rem;\n  border: 0.25rem solid var(--color-background-card, #ffffff);\n  border-radius: var(--rounded-full);\n  background: var(--color-border-subtle, #cdd5df);\n}\n/* Content rendered inside the portaled input-dropdown menu (search field, empty\n * state, loader) - also shadow-scoped in gb-input-dropdown.css and therefore\n * also unreachable once portaled. Kept in sync with that file by hand. */\n.input_dropdown_portal_menu .dropdown_search_field {\n  background: var(--color-surface, #ffffff);\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);\n  position: sticky;\n  top: 0;\n  z-index: 999;\n}\n.input_dropdown_portal_menu .empty_state {\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.input_dropdown_portal_menu .background {\n  position: relative;\n  width: 80%;\n}\n.input_dropdown_portal_menu .message_background {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--spacing-1);\n}\n.input_dropdown_portal_menu .illustration {\n  width: 100px;\n  height: 100px;\n}\n.input_dropdown_portal_menu .message {\n  color: var(--color-text-bold, #202939);\n}\n.input_dropdown_portal_menu .loader_div {\n  width: 100%;\n  height: 10rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.input_dropdown_portal_menu .loader {\n  border: 4px solid var(--color-background-gray, #cdd5df);\n  border-top: 4px solid var(--color-background-selected, #075db2);\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  animation: input-dropdown-portal-spin 2s linear infinite;\n}\n@keyframes input-dropdown-portal-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n/* @import 'tailwind.css'; */\n:root {\n  /* --------------------------------------Primary Colors--------------------------------------------- */\n  /* base color palette */\n  --base-white: #fff;\n  --base-black: #000;\n\n  /* gray color palette  */\n  --gray-25: #f9fafb;\n  --gray-50: #f6f8fa;\n  --gray-100: #eef2f6;\n  --gray-200: #e3e8ef;\n  --gray-300: #cdd5df;\n  --gray-400: #808c9e;\n  --gray-500: #697586;\n  --gray-600: #4b5565;\n  --gray-700: #364152;\n  --gray-800: #202939;\n  --gray-900: #121926;\n  --gray-950: #0d121c;\n\n  /* brand dark blue color palette */\n  --brandDarkBlue-25: #f9f9fb;\n  --brandDarkBlue-50: #edeef3;\n  --brandDarkBlue-100: #d3d5e0;\n  --brandDarkBlue-200: #b5b9cc;\n  --brandDarkBlue-300: #9095b2;\n  --brandDarkBlue-400: #464f7f;\n  --brandDarkBlue-500: #212c65;\n  --brandDarkBlue-600: #1e285c;\n  --brandDarkBlue-700: #1c2554;\n  --brandDarkBlue-800: #161d43;\n  --brandDarkBlue-900: #0b0f22;\n  --brandDarkBlue-950: #070914;\n\n  /* brand red color palette */\n  --brandRed-25: #fffbfa;\n  --brandRed-50: #fef1f2;\n  --brandRed-100: #fde3e5;\n  --brandRed-200: #f9b4ba;\n  --brandRed-300: #f68e98;\n  --brandRed-400: #f36976;\n  --brandRed-500: #e21b2e;\n  --brandRed-600: #cc1a2a;\n  --brandRed-700: #b51726;\n  --brandRed-800: #8c121d;\n  --brandRed-900: #680d16;\n  --brandRed-950: #3f080d;\n\n  /* warning color palette */\n  --yellow-25: #fffcf5;\n  --yellow-50: #fffaeb;\n  --yellow-100: #fef0c7;\n  --yellow-200: #fedf89;\n  --yellow-300: #fec84b;\n  --yellow-400: #fdb022;\n  --yellow-500: #f79009;\n  --yellow-600: #dc6803;\n  --yellow-700: #b54708;\n  --yellow-800: #93370d;\n  --yellow-900: #7a2e0e;\n  --yellow-950: #4e1d09;\n\n  /* success color palette  */\n  --green-25: #f6fef9;\n  --green-50: #ecfdf3;\n  --green-100: #dcfaeb;\n  --green-200: #a9efc5;\n  --green-300: #75e0a7;\n  --green-400: #47cd89;\n  --green-500: #17b26a;\n  --green-600: #067f48;\n  --green-700: #067647;\n  --green-800: #085d3a;\n  --green-900: #074d31;\n  --green-950: #053321;\n\n  /* ------------------------------------------opacity color palette--------------------------------------  */\n  /* 0% opacity */\n  /* White */\n  --white-opacity0: rgba(255, 255, 255, 0);\n\n  /* Gray */\n  --gray25-opacity0: rgba(249, 250, 251, 0);\n  --gray900-opacity0: rgba(18, 25, 38, 0);\n  --gray950-opacity0: rgba(13, 18, 28, 0);\n\n  /* 20% opacity */\n  /* White */\n  --white-opacity20: rgba(255, 255, 255, 0.2);\n\n  /* Dark Blue */\n  --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\n  --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\n\n  /* Gray */\n  --gray25-opacity20: rgba(249, 250, 251, 0.2);\n  --gray900-opacity20: rgba(18, 25, 38, 0.2);\n  --gray950-opacity20: rgba(13, 18, 28, 0.2);\n\n  /* 30% opacity */\n  --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\n  --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\n\n  /* 40% opacity */\n  --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\n  --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\n\n  /* 50% opacity */\n  /* White */\n  --white-opacity50: rgba(255, 255, 255, 0.5);\n\n  /* Gray */\n  --gray25-opacity50: rgba(249, 250, 251, 0.5);\n  --gray900-opacity50: rgba(18, 25, 38, 0.5);\n  --gray950-opacity50: rgba(13, 18, 28, 0.5);\n\n  /* ------------------------------------------Secondary Color------------------------------------------- */\n  /* blueLight color palete */\n  --lightBlue-25: #f5fbff;\n  --lightBlue-50: #f0f9ff;\n  --lightBlue-100: #e0f2fe;\n  --lightBlue-200: #b9e6fe;\n  --lightBlue-300: #7cd4fd;\n  --lightBlue-400: #7cd4fd;\n  --lightBlue-500: #0ba5ec;\n  --lightBlue-600: #0086c9;\n  --lightBlue-700: #026aa2;\n  --lightBlue-800: #065986;\n  --lightBlue-900: #0b4a6f;\n  --lightBlue-950: #062c41;\n\n  /* blue color palette */\n  --blue-25: #ecf5fe;\n  --blue-50: #e4f0fc;\n  --blue-100: #c8e0f9;\n  --blue-200: #9ac7f4;\n  --blue-300: #6aa9e7;\n  --blue-400: #378fe6;\n  --blue-500: #075db2;\n  --blue-600: #064e94;\n  --blue-700: #053e77;\n  --blue-800: #042f59;\n  --blue-900: #022445;\n  --blue-950: #021d37;\n\n  /* Purple color palete */\n  --purple-25: #fafaff;\n  --purple-50: #f4f3ff;\n  --purple-100: #ebe9fe;\n  --purple-200: #d9d6fe;\n  --purple-300: #bdb4fe;\n  --purple-400: #9b8afb;\n  --purple-500: #7a5af8;\n  --purple-600: #6938ef;\n  --purple-700: #5925dc;\n  --purple-800: #4a1fb8;\n  --purple-900: #3e1c96;\n  --purple-950: #27115f;\n\n  /* pink color palette */\n  --pink-25: #fef6fb;\n  --pink-50: #fdf2fa;\n  --pink-100: #fce7f6;\n  --pink-200: #fcceee;\n  --pink-300: #faa7e0;\n  --pink-400: #f670c7;\n  --pink-500: #ee46bc;\n  --pink-600: #dd2590;\n  --pink-700: #c11574;\n  --pink-800: #9e165f;\n  --pink-900: #851651;\n  --pink-950: #4e0d30;\n\n  /* -------------------------------------------------Token---------------------------------------------- */\n  /* Light-theme defaults so external hosts still resolve key tokens when data-theme is not set. */\n  --color-text-bold: var(--gray-800);\n  --color-text: var(--gray-600);\n  --color-text-subtle: var(--gray-500);\n  --color-text-disabled: var(--gray-400);\n  --color-text-inverse: var(--base-white);\n\n  --color-icon-bold: var(--gray-800);\n  --color-icon: var(--gray-600);\n  --color-icon-subtle: var(--gray-500);\n  --color-icon-disabled: var(--gray-400);\n  --color-icon-inverse: var(--base-white);\n\n  --color-border-bold: var(--gray-500);\n  --color-border: var(--gray-400);\n  --color-border-subtle: var(--gray-300);\n  --color-border-subtler: var(--gray-200);\n  --color-border-disabled: var(--gray-200);\n  --color-border-input: var(--gray-300);\n  --color-border-focus: var(--gray-400);\n\n  --color-background: var(--base-white);\n  --color-background-card-bold: var(--gray-100);\n  --color-background-card: var(--base-white);\n  --color-background-input: var(--gray-400);\n  --color-background-disabled: var(--gray-50);\n  --color-background-btn-disabled: var(--gray-100);\n  --color-background-selected: var(--blue-500);\n\n  --color-link: var(--blue-500);\n  --color-link-pressed: var(--blue-600);\n  --color-link-visited: var(--lightBlue-600);\n\n  /* -----------Text Color----------- */\n\n  [data-theme='light'] {\n    --color-text-bold: var(--gray-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-bold: var(--gray-100);\n  }\n\n  [data-theme='light'] {\n    --color-text: var(--gray-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text: var(--gray-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-subtle: var(--gray-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-subtle: var(--gray-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-disabled: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-text-disabled: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-text-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-text-inverse: var(--base-black);\n  }\n\n  [data-theme='light'] {\n    --color-text-brandDarkBlue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-brandDarkBlue: var(--brandDarkBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger-subtle: var(--brandRed-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger-subtle: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger-inverse: var(--brandRed-950);\n  }\n\n  [data-theme='light'] {\n    --color-text-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-warning: var(--yellow-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-warning-subtle: var(--yellow-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-warning-subtle: var(--yellow-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-success: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-success-subtle: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-success-subtle: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-discovery: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-discovery: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-discovery-subtle: var(--lightBlue-400);\n  }\n\n  [data-theme='dark'] {\n    --color-text-discovery-subtle: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-information: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-information-subtle: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-information-subtle: var(--blue-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-purple-bold: var(--purple-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-purple: var(--purple-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-purple-subtle: var(--purple-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-purple-subtle: var(--purple-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-pink: var(--pink-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-pink-subtle: var(--pink-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-pink-subtle: var(--pink-400);\n  }\n\n  /* --------------Link color--------------- */\n\n  [data-theme='light'] {\n    --color-link: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-link: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-link-pressed: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-link-pressed: var(--blue-600);\n  }\n\n  [data-theme='light'] {\n    --color-link-visited: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-link-visited: var(--lightBlue-300);\n  }\n\n  /* --------------Icon color--------------- */\n\n  [data-theme='light'] {\n    --color-icon-bold: var(--gray-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-bold: var(--gray-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon: var(--gray-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon: var(--gray-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-subtle: var(--gray-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-subtle: var(--gray-400);\n  }\n\n  [data-theme='light'] {\n    --color-icon-disabled: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-disabled: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-icon-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-inverse: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-icon-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-icon-danger-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-danger-inverse: var(--brandRed-950);\n  }\n\n  [data-theme='light'] {\n    --color-icon-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-warning: var(--yellow-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-success: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-discovery: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-discovery: var(--lightBlue-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-information: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-purple-bold: var(--purple-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-purple: var(--purple-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-pink: var(--pink-300);\n  }\n\n  /* ----------------Border Color --------------- */\n\n  [data-theme='light'] {\n    --color-border-bold: var(--gray-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-bold: var(--gray-400);\n  }\n\n  [data-theme='light'] {\n    --color-border: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-border: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-border-subtle: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-border-subtle: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-border-subtler: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-subtler: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-disabled: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-disabled: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-border-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-border-inverse: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-input: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-border-input: var(--gray-600);\n  }\n\n  [data-theme='light'] {\n    --color-border-focus: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-border-focus: var(--blue-200);\n  }\n\n  [data-theme='light'] {\n    --color-border-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-brandDarkBlue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-brandDarkBlue: var(--brandDarkBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-border-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger-subtle: var(--brandRed-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger-subtle: var(--brandRed-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger-subtler: var(--brandRed-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger-subtler: var(--brandRed-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning: var(--yellow-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning-subtle: var(--yellow-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning-subtle: var(--yellow-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning-subtler: var(--yellow-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning-subtler: var(--yellow-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-success-subtle: var(--green-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success-subtle: var(--green-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-success-subtler: var(--green-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success-subtler: var(--green-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery: var(--lightBlue-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery-subtle: var(--lightBlue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery-subtle: var(--lightBlue-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery-subtler: var(--lightBlue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery-subtler: var(--lightBlue-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-information-subtle: var(--blue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information-subtle: var(--blue-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-information-subtler: var(--blue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information-subtler: var(--blue-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple-bold: var(--purple-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple: var(--purple-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple-subtle: var(--purple-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple-subtle: var(--purple-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple-subtler: var(--purple-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple-subtler: var(--purple-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink: var(--pink-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink-subtle: var(--pink-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink-subtle: var(--pink-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink-subtler: var(--pink-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink-subtler: var(--pink-900);\n  }\n\n  /* Emmanuel Kadiri starts from background color */\n\n  /* ----------------Background Color --------------- */\n\n  [data-theme='light'] {\n    --color-background-card-bolder: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-card-bolder: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-card: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-background-card: var(--gray-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-input: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-background-input: var(--gray-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-disabled: var(--gray-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-disabled: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-btn-disabled: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-btn-disabled: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-background-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-background-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandDarkblue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandDarkblue: var(--brandDarkBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandRed-hover: var(--brandRed-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandRed-hover: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandRed-pressed: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandRed-pressed: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-bold: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-bold: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray: var(--gray-600);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-subtle: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-subtle: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-subtler: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-subtler: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-subtlest: var(--gray-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-subtlest: var(--gray-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-subtle: var(--brandRed-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-subtle: var(--brandRed-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-subtler: var(--brandRed-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-subtler: var(--brandRed-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-subtlest: var(--brandRed-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-subtlest: var(--brandRed-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning: var(--yellow-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-subtle: var(--yellow-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-subtle: var(--yellow-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-subtler: var(--yellow-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-subtler: var(--yellow-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-subtlest: var(--yellow-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-subtlest: var(--yellow-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success: var(--green-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-subtle: var(--green-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-subtle: var(--green-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-subtler: var(--green-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-subtler: var(--green-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-subtlest: var(--green-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-subtlest: var(--green-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery: var(--lightBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-subtle: var(--lightBlue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-subtle: var(--lightBlue-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-subtler: var(--lightBlue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-subtler: var(--lightBlue-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-subtlest: var(--lightBlue-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-subtlest: var(--lightBlue-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information: var(--blue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-subtle: var(--blue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-subtle: var(--blue-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-subtler: var(--blue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-subtler: var(--blue-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-subtlest: var(--blue-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-subtlest: var(--blue-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple: var(--blue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-subtle: var(--purple-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-subtle: var(--purple-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-subtler: var(--purple-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-subtler: var(--purple-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-subtlest: var(--purple-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-subtlest: var(--purple-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink: var(--pink-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-subtle: var(--pink-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-subtle: var(--pink-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-subtler: var(--pink-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-subtler: var(--pink-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-subtlest: var(--purple-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-subtlest: var(--pink-950);\n  }\n\n  /* ----------------Blanket Color --------------- */\n  [data-theme='light'] {\n    --color-blanket: var(--darkBlue500-opacity20);\n  }\n\n  [data-theme='dark'] {\n    --color-blanket: var(--darkBlue200-opacity20);\n  }\n\n  [data-theme='light'] {\n    --color-blanket-subtle: var(--darkBlue500-opacity30);\n  }\n\n  [data-theme='dark'] {\n    --color-blanket-subtle: var(--darkBlue200-opacity30);\n  }\n\n  [data-theme='light'] {\n    --color-blanket-subtler: var(--darkBlue500-opacity40);\n  }\n\n  [data-theme='dark'] {\n    --color-blanket-subtler: var(--darkBlue200-opacity40);\n  }\n\n  /* ----------------Skeleton Color --------------- */\n  [data-theme='light'] {\n    --color-skeleton: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-skeleton: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-skeleton-bold: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-skeleton-bold: var(--gray-700);\n  }\n\n  /* ----------------Surface Color --------------- */\n  [data-theme='light'] {\n    --color-surface-bold: var(--gray-50);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold: var(--gray-950);\n  }\n\n  [data-theme='light'] {\n    --color-surface: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-surface: var(--gray-900);\n  }\n\n  [data-theme='light'] {\n    --color-surface-hovered: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-hovered: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-surface-pressed: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-pressed: var(--gray-700);\n  }\n\n  /* ----------------Transparent Color --------------- */\n  [data-theme='light'] {\n    --color-surface-transparent50: var(--white-opacity50);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-transparent50: var(--gray900-opacity50);\n  }\n\n  [data-theme='light'] {\n    --color-surface-transparent20: var(--white-opacity20);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-transparent20: var(--gray900-opacity20);\n  }\n\n  [data-theme='light'] {\n    --color-surface-transparent-full: var(--white-opacity0);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-transparent-full: var(--gray900-opacity0);\n  }\n\n  [data-theme='light'] {\n    --color-surface-bold-transparent50: var(--gray25-opacity50);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold-transparent50: var(--gray950-opacity50);\n  }\n\n  [data-theme='light'] {\n    --color-surface-bold-transparent20: var(--gray25-opacity20);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold-transparent20: var(--gray950-opacity20);\n  }\n\n  [data-theme='light'] {\n    --color-surface-bold-transparent-full: var(--gray25-opacity0);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold-transparent-full: var(--gray950-opacity0);\n  }\n}\n/* -----------------Shadow and Blur----------------- */\n:root {\n  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\n  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\n  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\n  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\n  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\n\n  --blur-sm: blur(4px);\n  --blur-md: blur(8px);\n  --blur-lg: blur(12px);\n  --blur-xl: blur(20px);\n}\n.shadow-xs {\n  box-shadow: var(--shadow-xs);\n}\n.shadow-sm {\n  box-shadow: var(--shadow-sm);\n}\n.shadow-md {\n  box-shadow: var(--shadow-md);\n}\n.shadow-lg {\n  box-shadow: var(--shadow-lg);\n}\n.shadow-xl {\n  box-shadow: var(--shadow-xl);\n}\n.shadow-2xl {\n  box-shadow: var(--shadow-2xl);\n}\n.shadow-3xl {\n  box-shadow: var(--shadow-3xl);\n}\n.blur-sm {\n  backdrop-filter: var(--blur-sm);\n}\n.blur-md {\n  backdrop-filter: var(--blur-md);\n}\n.blur-lg {\n  backdrop-filter: var(--blur-lg);\n}\n.blur-xl {\n  backdrop-filter: var(--blur-xl);\n}\n/* -----------------Gradients----------------- */\n:root {\n  /* Gray Gradients */\n  /* --gray-gradient-600: linear-gradient(); */\n  --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\n  --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\n  --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\n  --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\n  --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\n  --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\n\n  /* Brand Dark Blue Gradients */\n  --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\n  --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\n  --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\n  --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\n  --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\n  --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\n\n  /* Brand Red Gradients */\n  --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\n  --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\n  --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\n  --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\n  --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\n  --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\n\n  /* Blue Gradients */\n  --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\n  --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\n  --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\n  --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\n  --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\n  --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\n}\n.gradient-gray-600-to-500-90d {\n  background: var(--gradient-gray-600-to-500-90d);\n}\n.gradient-gray-700-to-600-45d {\n  background: var(--gradient-gray-700-to-600-45d);\n}\n.gradient-gray-800-to-600-45d {\n  background: var(--gradient-gray-800-to-600-45d);\n}\n.gradient-gray-800-to-600-90d {\n  background: var(--gradient-gray-800-to-600-90d);\n}\n.gradient-gray-800-to-700265-d {\n  background: var(--gradient-gray-800-to-700265-d);\n}\n.gradient-gray-900-to-600-45d {\n  background: var(--gradient-gray-900-to-600-45d);\n}\n.gradient-darkBlue-500-to-400-90d {\n  background: var(--gradient-darkBlue-500-to-400-90d);\n}\n.gradient-darkBlue-700-to-500-45d {\n  background: var(--gradient-darkBlue-700-to-500-45d);\n}\n.gradient-darkBlue-700-to-400-45d {\n  background: var(--gradient-darkBlue-700-to-400-45d);\n}\n.gradient-darkBlue-800-to-500-90d {\n  background: var(--gradient-darkBlue-800-to-500-90d);\n}\n.gradient-darkBlue-800-to-600265-d {\n  background: var(--gradient-darkBlue-800-to-600265-d);\n}\n.gradient-darkBlue-900-to-600-45d {\n  background: var(--gradient-darkBlue-900-to-600-45d);\n}\n.gradient-red-500-to-400-90d {\n  background: var(--gradient-red-500-to-400-90d);\n}\n.gradient-red-700-to-500-45d {\n  background: var(--gradient-red-700-to-500-45d);\n}\n.gradient-red-700-to-400-45d {\n  background: var(--gradient-red-700-to-400-45d);\n}\n.gradient-red-800-to-500-90d {\n  background: var(--gradient-red-800-to-500-90d);\n}\n.gradient-red-800-to-600265-d {\n  background: var(--gradient-red-800-to-600265-d);\n}\n.gradient-red-900-to-600-45d {\n  background: var(--gradient-red-900-to-600-45d);\n}\n.gradient-blue-500-to-400-90d {\n  background: var(--gradient-blue-500-to-400-90d);\n}\n.gradient-blue-700-to-500-45d {\n  background: var(--gradient-blue-700-to-500-45d);\n}\n.gradient-blue-700-to-400-45d {\n  background: var(--gradient-blue-700-to-400-45d);\n}\n.gradient-blue-800-to-500-90d {\n  background: var(--gradient-blue-800-to-500-90d);\n}\n.gradient-blue-800-to-600265-d {\n  background: var(--gradient-blue-800-to-600265-d);\n}\n.gradient-blue-900-to-600-45d {\n  background: var(--gradient-blue-900-to-600-45d);\n}\n/* Spacing Styles */\n:root {\n  /* Positive spacing */\n  --spacing-none: 0rem;\n  --spacing-half: 0.125rem;\n  --spacing-1: 0.25rem;\n  --spacing-2: 0.5rem;\n  --spacing-3: 0.75rem;\n  --spacing-4: 1rem;\n  --spacing-5: 1.25rem;\n  --spacing-6: 1.5rem;\n  --spacing-7: 2rem;\n  --spacing-8: 2.5rem;\n  --spacing-12: 3rem;\n  --spacing-16: 4rem;\n  --spacing-20: 5rem;\n  --spacing-24: 6rem;\n  --spacing-32: 8rem;\n  --spacing-40: 10rem;\n  --spacing-48: 12rem;\n  --spacing-56: 14rem;\n  --spacing-64: 16rem;\n\n  /* Negative spacing */\n  --spacing-negative-half: -0.125rem;\n  --spacing-negative-1: -0.25rem;\n  --spacing-negative-2: -0.5rem;\n  --spacing-negative-3: -0.75rem;\n  --spacing-negative-4: -1rem;\n  --spacing-negative-5: -1.25rem;\n  --spacing-negative-6: -1.5rem;\n  --spacing-negative-7: -2rem;\n\n  /* Radius  */\n  --rounded-none: 0rem;\n  --rounded-xs: 0.25rem;\n  --rounded-sm: 0.5rem;\n  --rounded-md: 0.75rem;\n  --rounded-lg: 1rem;\n  --rounded-xl: 1.5rem;\n  --rounded-2xl: 2rem;\n  --rounded-full: 62.438rem;\n}\n/* Typography Styles */\n:root {\n  /* Font Sizes */\n  --font-size-d-2xl: 4.5rem;\n  --font-size-d-xl: 3.75rem;\n  --font-size-d-lg: 3rem;\n  --font-size-d-md: 2.25rem;\n  --font-size-d-sm: 1.875rem;\n  --font-size-d-xs: 1.5rem;\n  --font-size-t-xl: 1.25rem;\n  --font-size-t-lg: 1.125rem;\n  --font-size-t-md: 1rem;\n  --font-size-t-sm: 0.875rem;\n  --font-size-t-xs: 0.75rem;\n  --font-size-t-xxs: 0.625rem;\n\n  /* Font Weights */\n  --font-weight-bold: 700;\n  --font-weight-semi-bold: 600;\n  --font-weight-medium: 500;\n  --font-weight-regular: 400;\n\n  /* Line Heights */\n  --font-line-height-d-2xl: 5rem;\n  --font-line-height-d-xl: 4.25rem;\n  --font-line-height-d-lg: 3.75rem;\n  --font-line-height-d-md: 2.75rem;\n  --font-line-height-d-sm: 2.375rem;\n  --font-line-height-d-xs: 2rem;\n  --font-line-height-t-xl: 2rem;\n  --font-line-height-t-lg: 1.875rem;\n  --font-line-height-t-md: 1.688rem;\n  --font-line-height-t-sm: 1.5rem;\n  --font-line-height-t-xs: 1.25rem;\n  --font-line-height-t-xxs: 1.125rem;\n\n  /* Letter Spacings */\n  --font-letter-spacing-d-2xl: -0.09rem;\n  --font-letter-spacing-d-xl: -0.075rem;\n  --font-letter-spacing-d-lg: -0.075rem;\n  --font-letter-spacing-d-md: -0.045rem;\n  --font-letter-spacing-d-sm: 0;\n  --font-letter-spacing-d-xs: 0;\n  --font-letter-spacing-d-xxs: 0;\n\n  /* Font Families */\n  --font-family-title: 'Sora';\n  --font-family-body: 'Sora';\n}\n/* Media queries for medium screens (tablet) */\n@media (max-width: 1199px) {\n  :root {\n    /* Font Sizes */\n    --font-size-d-2xl: 3.75rem;\n    --font-size-d-xl: 3.5rem;\n    --font-size-d-lg: 2.75rem;\n    --font-size-d-md: 2.25rem;\n    --font-size-d-sm: 1.875rem;\n    --font-size-d-xs: 1.5rem;\n\n    /* Line Heights */\n    --font-line-height-d-2xl: 4.25rem;\n    --font-line-height-d-xl: 3.75rem;\n    --font-line-height-d-lg: 2.4375rem;\n    --font-line-height-d-md: 2.75rem;\n    --font-line-height-d-sm: 2.375rem;\n    --font-line-height-d-xs: 2rem;\n\n    /* Letter Spacings */\n    --font-letter-spacing-2xl: -0.075rem;\n    --font-letter-spacing-xl: -0.065rem;\n    --font-letter-spacing-lg: -0.045rem;\n    --font-letter-spacing-md: -0.045rem;\n    --font-letter-spacing-sm: 0rem;\n    --font-letter-spacing-xs: 0rem;\n  }\n}\n/* Media queries for smaller screens (mobile) */\n@media (max-width: 743px) {\n  :root {\n    /* Font Sizes */\n    --font-size-d-2xl: 3rem;\n    --font-size-d-xl: 2.5rem;\n    --font-size-d-lg: 2rem;\n    --font-size-d-md: 1.75rem;\n    --font-size-d-sm: 1.5rem;\n    --font-size-d-xs: 1.25rem;\n\n    /* Line Heights */\n    --font-line-height-d-2xl: 3.375rem;\n    --font-line-height-d-xl: 2.875rem;\n    --font-line-height-d-lg: 2.5rem;\n    --font-line-height-d-md: 2.1375rem;\n    --font-line-height-d-sm: 2rem;\n    --font-line-height-d-xs: 1.75rem;\n\n    /* Letter Spacings */\n    --font-letter-spacing-2xl: -0.06rem;\n    --font-letter-spacing-xl: -0.05rem;\n    --font-letter-spacing-lg: -0.045rem;\n    --font-letter-spacing-md: 0rem;\n    --font-letter-spacing-sm: 0rem;\n    --font-letter-spacing-xs: 0rem;\n  }\n}\n.display-2xl-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-2xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-2xl);\n  letter-spacing: var(--font-letter-spacing-d-2xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-2xl-bold::before,\n.display-2xl-bold::after {\n  content: '';\n  display: table;\n}\n.display-2xl-bold::before {\n  margin-bottom: -0.135em;\n}\n.display-2xl-bold::after {\n  margin-top: -0.205em;\n}\n.display-2xl-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-2xl);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-2xl);\n  letter-spacing: var(--font-letter-spacing-d-2xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-2xl-semi-bold::before,\n.display-2xl-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-2xl-semi-bold::before {\n  margin-bottom: -0.135em;\n}\n.display-2xl-semi-bold::after {\n  margin-top: -0.205em;\n}\n.display-xl-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-xl);\n  letter-spacing: var(--font-letter-spacing-d-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xl-bold::before,\n.display-xl-bold::after {\n  content: '';\n  display: table;\n}\n.display-xl-bold::before {\n  margin-bottom: -0.145em;\n}\n.display-xl-bold::after {\n  margin-top: -0.215em;\n}\n.display-xl-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xl);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-xl);\n  letter-spacing: var(--font-letter-spacing-d-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xl-semi-bold::before,\n.display-xl-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-xl-semi-bold::before {\n  margin-bottom: -0.145em;\n}\n.display-xl-semi-bold::after {\n  margin-top: -0.215em;\n}\n.display-lg-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-lg);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-lg);\n  letter-spacing: var(--font-letter-spacing-d-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-lg-bold::before,\n.display-lg-bold::after {\n  content: '';\n  display: table;\n}\n.display-lg-bold::before {\n  margin-bottom: -0.015em;\n}\n.display-lg-bold::after {\n  margin-top: -0.095em;\n}\n.display-lg-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-lg);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-lg);\n  letter-spacing: var(--font-letter-spacing-d-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-lg-semi-bold::before,\n.display-lg-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-lg-semi-bold::before {\n  margin-bottom: -0.015em;\n}\n.display-lg-semi-bold::after {\n  margin-top: -0.095em;\n}\n.display-md-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-md);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-md);\n  letter-spacing: var(--font-letter-spacing-d-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-md-bold::before,\n.display-md-bold::after {\n  content: '';\n  display: table;\n}\n.display-md-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-md-bold::after {\n  margin-top: -0.255em;\n}\n.display-md-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-md);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-md);\n  letter-spacing: var(--font-letter-spacing-d-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-md-semi-bold::before,\n.display-md-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-md-semi-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-md-semi-bold::after {\n  margin-top: -0.255em;\n}\n.display-sm-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-sm);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-sm);\n  letter-spacing: var(--font-letter-spacing-d-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-sm-bold::before,\n.display-sm-bold::after {\n  content: '';\n  display: table;\n}\n.display-sm-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-sm-bold::after {\n  margin-top: -0.255em;\n}\n.display-sm-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-sm);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-sm);\n  letter-spacing: var(--font-letter-spacing-d-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-sm-semi-bold::before,\n.display-sm-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-sm-semi-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-sm-semi-bold::after {\n  margin-top: -0.255em;\n}\n.display-xs-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-xs);\n  letter-spacing: var(--font-letter-spacing-d-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xs-bold::before,\n.display-xs-bold::after {\n  content: '';\n  display: table;\n}\n.display-xs-bold::before {\n  margin-bottom: -0.199em;\n}\n.display-xs-bold::after {\n  margin-top: -0.195em; /* Continue from here */\n}\n.display-xs-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xs);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-xs);\n  letter-spacing: var(--font-letter-spacing-d-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xs-semi-bold::before,\n.display-xs-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-xs-semi-bold::before {\n  margin-bottom: -0.259em;\n}\n.display-xs-semi-bold::after {\n  margin-top: -0.295em;\n}\n.text-xl-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-bold::before,\n.text-xl-bold::after {\n  content: '';\n  display: table;\n}\n.text-xl-bold::before {\n  margin-bottom: -0.329em;\n}\n.text-xl-bold::after {\n  margin-top: -0.359em;\n}\n.text-xl-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-semi-bold::before,\n.text-xl-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-xl-semi-bold::before {\n  margin-bottom: -0.329em;\n}\n.text-xl-semi-bold::after {\n  margin-top: -0.359em;\n}\n.text-xl-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-medium::before,\n.text-xl-medium::after {\n  content: '';\n  display: table;\n}\n.text-xl-medium::before {\n  margin-bottom: -0.339em;\n}\n.text-xl-medium::after {\n  margin-top: -0.399em;\n}\n.text-xl-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-regular::before,\n.text-xl-regular::after {\n  content: '';\n  display: table;\n}\n.text-xl-regular::before {\n  margin-bottom: -0.339em;\n}\n.text-xl-regular::after {\n  margin-top: -0.399em;\n}\n.text-lg-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-bold::before,\n.text-lg-bold::after {\n  content: '';\n  display: table;\n}\n.text-lg-bold::before {\n  margin-bottom: -0.339em;\n}\n.text-lg-bold::after {\n  margin-top: -0.399em;\n}\n.text-lg-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-semi-bold::before,\n.text-lg-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-lg-semi-bold::before {\n  margin-bottom: -0.339em;\n}\n.text-lg-semi-bold::after {\n  margin-top: -0.399em;\n}\n.text-lg-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-medium::before,\n.text-lg-medium::after {\n  content: '';\n  display: table;\n}\n.text-lg-medium::before {\n  margin-bottom: -0.349em;\n}\n.text-lg-medium::after {\n  margin-top: -0.389em;\n}\n.text-lg-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-regular::before,\n.text-lg-regular::after {\n  content: '';\n  display: table;\n}\n.text-lg-regular::before {\n  margin-bottom: -0.349em;\n}\n.text-lg-regular::after {\n  margin-top: -0.389em;\n}\n.text-md-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-bold::before,\n.text-md-bold::after {\n  content: '';\n  display: table;\n}\n.text-md-bold::before {\n  margin-bottom: -0.349em;\n}\n.text-md-bold::after {\n  margin-top: -0.389em;\n}\n.text-md-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-semi-bold::before,\n.text-md-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-md-semi-bold::before {\n  margin-bottom: -0.349em;\n}\n.text-md-semi-bold::after {\n  margin-top: -0.389em;\n}\n.text-md-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-medium::before,\n.text-md-medium::after {\n  content: '';\n  display: table;\n}\n.text-md-medium::before {\n  margin-bottom: -0.349em;\n}\n.text-md-medium::after {\n  margin-top: -0.389em;\n}\n.text-md-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-regular::before,\n.text-md-regular::after {\n  content: '';\n  display: table;\n}\n.text-md-regular::before {\n  margin-bottom: -0.349em;\n}\n.text-md-regular::after {\n  margin-top: -0.389em;\n}\n.text-sm-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-sm-bold::before,\n.text-sm-bold::after {\n  content: '';\n  display: table;\n}\n.text-sm-bold::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-bold::after {\n  margin-top: -0.349em;\n}\n.text-sm-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-sm-semi-bold::before,\n.text-sm-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-sm-semi-bold::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-semi-bold::after {\n  margin-top: -0.349em;\n}\n.text-sm-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  position: relative;\n  display: inline-block;\n}\n.text-sm-medium::before,\n.text-sm-medium::after {\n  content: '';\n  display: table;\n}\n.text-sm-medium::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-medium::after {\n  margin-top: -0.299em;\n}\n.text-sm-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  position: relative;\n  display: inline-block;\n}\n.text-sm-regular::before,\n.text-sm-regular::after {\n  content: '';\n  display: table;\n}\n.text-sm-regular::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-regular::after {\n  margin-top: -0.299em;\n}\n.text-xs-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-bold::before,\n.text-xs-bold::after {\n  content: '';\n  display: table;\n}\n.text-xs-bold::before {\n  margin-bottom: -0.291em;\n}\n.text-xs-bold::after {\n  margin-top: -0.416em;\n}\n.text-xs-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-semi-bold::before,\n.text-xs-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-xs-semi-bold::before {\n  margin-bottom: -0.321em;\n}\n.text-xs-semi-bold::after {\n  margin-top: -0.416em;\n}\n.text-xs-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-medium::before,\n.text-xs-medium::after {\n  content: '';\n  display: table;\n}\n.text-xs-medium::before {\n  margin-bottom: -0.285em;\n}\n.text-xs-medium::after {\n  margin-top: -0.396em;\n}\n.text-xs-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-regular::before,\n.text-xs-regular::after {\n  content: '';\n  display: table;\n}\n.text-xs-regular::before {\n  margin-bottom: -0.291em;\n}\n.text-xs-regular::after {\n  margin-top: -0.396em;\n}\n.text-xxs-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-bold::before,\n.text-xxs-bold::after {\n  content: '';\n  display: table;\n}\n.text-xxs-bold::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-bold::after {\n  margin-top: -0.416em;\n}\n.text-xxs-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-semi-bold::before,\n.text-xxs-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-xxs-semi-bold::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-semi-bold::after {\n  margin-top: -0.416em;\n}\n.text-xxs-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-medium::before,\n.text-xxs-medium::after {\n  content: '';\n  display: table;\n}\n.text-xxs-medium::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-medium::after {\n  margin-top: -0.416em;\n}\n.text-xxs-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-regular::before,\n.text-xxs-regular::after {\n  content: '';\n  display: table;\n}\n.text-xxs-regular::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-regular::after {\n  margin-top: -0.416em;\n}\n/* Button slot styles */\n/* .slotted_button_text.primary {\n  color: var(--color-text-inverse, #ffffff) !important;\n}\n\n.slotted_button_text.secondary_gray {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.secondary_color {\n  color: var(--color-text-brandRed, #e21b2e) !important;\n}\n\n.slotted_button_text.tertiary_gray {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.tertiary_color {\n  color: var(--color-text-brandRed, #e21b2e) !important;\n}\n\n.slotted_button_text.link_gray {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.link_color {\n  color: var(--color-link, #075db2) !important;\n}\n\n.slotted_button_text.primary.destructive {\n  color: var(--color-text-inverse, #ffffff) !important;\n}\n\n#slotted_button_text.primary.disabled,\n#slotted_button_text.secondary_gray.disabled,\n#slotted_button_text.secondary_color.disabled,\n#slotted_button_text.tertiary_gray.disabled,\n#slotted_button_text.tertiary_color.disabled,\n#slotted_button_text.link_gray.disabled,\n#slotted_button_text.link_color.disabled {\n  color: var(--color-text-disabled, #9aa4b2) !important;\n}\n\n#slotted_button_text.secondary_gray.default.destructive,\n#slotted_button_text.secondary_color.default.destructive,\n#slotted_button_text.tertiary_gray.default.destructive,\n#slotted_button_text.tertiary_color.default.destructive,\n#slotted_button_text.link_gray.default.destructive,\n#slotted_button_text.link_color.default.destructive {\n  color: var(--color-text-danger, #b51726) !important;\n} */\n.notification_pane_div{\n    display: inline-flex;\n    padding: var(--spacing-2);\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--spacing-2);\n    border-radius: var(--rounded-md);\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\n    background: var(--color-surface, #FFFFFF);\n    box-shadow: var(--shadow-md);\n    cursor: pointer;\n}\n.content_wrapper{\n    display: flex;\n    flex-direction: column;\n    width: -moz-fit-content;\n    width: fit-content;\n    height: 24.5rem;\n    overflow-y: auto;\n}\n::-webkit-scrollbar{\n    right: 0rem;\n    bottom: -1.53125rem;\n    width: 0.8rem;\n    margin-top: 1rem;\n}\n::-webkit-scrollbar-track{\n    width: 0.5rem;\n    padding: var(--spacing-1);\n    border: none;\n}\n::-webkit-scrollbar-thumb{\n    width: 0.5rem;\n    height: 11.75rem;\n    border: 0.25rem solid var(--color-background-card, #FFFFFF);\n    border-radius: 0.5rem;\n    background: var(--color-border-subtle, #CDD5DF);\n}\n.container{\n    position: relative;\n    display: flex;\n    width: 24.3125rem;\n    height: 24.5rem;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    border-bottom: 0.5px solid var(--color-border-subtler, #E3E8EF);\n}\n.frame{\n    display: flex;\n    /* width: 24.8125rem; */\n    height: 26.5rem;\n    padding: var(--spacing-Positive-spacing-None, 0rem) var(--spacing-7);\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-Positive-spacing-2, 0.5rem);\n    flex-shrink: 0;\n}\n.empty_state_pattern{\n    position: absolute;\n    top: 0;\n    right: 0;\n    mix-blend-mode: multiply;\n    /* z-index: -1; */\n}\n.empty_state{\n    display: flex;\n    height: 15rem;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-3);\n    flex-shrink: 0;\n    align-self: stretch;\n}\n.content{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--spacing-5);\n    align-self: stretch;\n}\n.text{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: var(--spacing-3);\n}\n.bell_icon{\n    z-index: 9;\n}\n.button{\n    width: 100%;\n}\n::slotted([slot=\"label\"]) {\n    color: var(--color-text-bold, #202939) !important;\n}\n::slotted([slot=\"supporting_text\"]) {\n    color: var(--color-text, #4B5565) !important;\n}";
 
@@ -63,9 +63,9 @@ const GbNotificationPane = /*@__PURE__*/ proxyCustomElement(class GbNotification
     render() {
         const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);
         const illustrationSrc = getAssetPath(`assets/notification_illustration.svg`);
-        return (h("div", { key: '73206965697632586413ae4d5c388d693ccf67c4', class: "notification_pane_div" }, this.state === 'empty' && [
-            h("div", { key: '23d11a737fab4be9c2edf3698c479f5307c1df91', class: `container` }, h("div", { key: 'eff7adb7198c6e3605dfbe64e0c922302376415d', class: "frame" }, h("img", { key: '62b02d6eeabb5d98fe44258b14e6b410ac2ec128', src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { key: '2e29dae5a8f94982d2e94bcbc0c5c368ccd3bee2', class: "empty_state" }, h("div", { key: 'e2599316eb92b5ea3d43158750e6b00f08ff7e58', class: "content" }, h("img", { key: 'e829e0fb549c2e5e74c974eb2d299c3b6e709856', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { key: '679006992fd0c67782f98d93357ace2bc51bd534', class: "text" }, h("slot", { key: '7063b05c86f3c8e5ddaf4307baebb6666f1d680b', name: "label" }), h("slot", { key: '6e0b22625744f9ac3847e95f1b9a43ec801d1dfd', name: "supporting_text" })))))),
-            h("div", { key: '342e57f38fc67f3b838965398c24507a062fb8dd', class: `button` }, h("gb-button", { key: '8204569c0938d6aa7a87bccb167f03f5dcaba242', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: '52afbfb88f655677128d4bcdf09418708934aa99' }, "Mark all as read"))),
+        return (h("div", { key: '02d88dd0f9387616c89a391847698ee49967ac9c', class: "notification_pane_div" }, this.state === 'empty' && [
+            h("div", { key: 'b3acd62694a672b6f2183752fa1fc492dd791cad', class: `container` }, h("div", { key: '700352fb05c7799f2e359ed0c8eb9c74223b1dc7', class: "frame" }, h("img", { key: 'd3aea12b666049ae0982c7ca8f47d3255f2c1689', src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { key: '79d270e56445a167c2f6307b94f8e88417a285e6', class: "empty_state" }, h("div", { key: '955e7fd4136566c262175a1990589a4820c2ab8b', class: "content" }, h("img", { key: '50fc42b2d8d7f12738b4c0db442f9a37e8cb69af', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { key: '037a440c9c92da0a17cbe8a3bb4e70d77d44d534', class: "text" }, h("slot", { key: '911c13ea039470776da22be9f46284b83990acab', name: "label" }), h("slot", { key: '3f43136261e44c77212d2032f5a4f2eb754f9595', name: "supporting_text" })))))),
+            h("div", { key: '1553eed9d658f7ebfec128e07f6423ee100ffb6d', class: `button` }, h("gb-button", { key: '109983c3f1bdf378bfba36735c9d32c9ce576a1b', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", { key: 'a874283136b49cea489d35876313280f4a251efc' }, "Mark all as read"))),
         ], this.state === 'notification_dropdown' && (h(Fragment, null, this.notifications.length > 0 ? (h("div", { class: "notification_dropdown" }, h("div", { class: `content_wrapper` }, this.notifications.map(notification => (h("gb-notification-content", { label: notification.label, time: notification.time, "supporting-text": notification.desc, icon: notification.icon })))), h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg", onClick: () => this.markAllAsRead() }, h("p", null, "Mark all as read")))) : ([
             h("div", { class: `container` }, h("div", { class: "frame" }, h("img", { src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { class: "empty_state" }, h("div", { class: "content" }, h("img", { src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { class: "text" }, h("slot", { name: "label" }), h("slot", { name: "supporting_text" })))))),
             h("div", { class: `button` }, h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, h("p", null, "Mark all as read"))),
@@ -108,6 +108,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { GbNotificationPane as G, defineCustomElement as d };
-//# sourceMappingURL=p-DYmHug6U.js.map
+//# sourceMappingURL=p-YALfrxlg.js.map
 
-//# sourceMappingURL=p-DYmHug6U.js.map
+//# sourceMappingURL=p-YALfrxlg.js.map

package/dist/components/{p-DYmHug6U.js.map → p-YALfrxlg.js.map}

@@ -1 +1 @@
-{"file":"p-DYmHug6U.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-notification-pane/gb-notification-pane.css?tag=gb-notification-pane&encapsulation=shadow","src/components/gb-notification-pane/gb-notification-pane.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n.notification_pane_div{\n    display: inline-flex;\n    padding: var(--spacing-2);\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--spacing-2);\n    border-radius: var(--rounded-md);\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\n    background: var(--color-surface, #FFFFFF);\n    box-shadow: var(--shadow-md);\n    cursor: pointer;\n}\n\n.content_wrapper{\n    display: flex;\n    flex-direction: column;\n    width: fit-content;\n    height: 24.5rem;\n    overflow-y: auto;\n}\n\n::-webkit-scrollbar{\n    right: 0rem;\n    bottom: -1.53125rem;\n    width: 0.8rem;\n    margin-top: 1rem;\n}\n\n::-webkit-scrollbar-track{\n    width: 0.5rem;\n    padding: var(--spacing-1);\n    border: none;\n}\n\n::-webkit-scrollbar-thumb{\n    width: 0.5rem;\n    height: 11.75rem;\n    border: 0.25rem solid var(--color-background-card, #FFFFFF);\n    border-radius: 0.5rem;\n    background: var(--color-border-subtle, #CDD5DF);\n}\n\n.container{\n    position: relative;\n    display: flex;\n    width: 24.3125rem;\n    height: 24.5rem;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    border-bottom: 0.5px solid var(--color-border-subtler, #E3E8EF);\n}\n\n.frame{\n    display: flex;\n    /* width: 24.8125rem; */\n    height: 26.5rem;\n    padding: var(--spacing-Positive-spacing-None, 0rem) var(--spacing-7);\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-Positive-spacing-2, 0.5rem);\n    flex-shrink: 0;\n}\n\n.empty_state_pattern{\n    position: absolute;\n    top: 0;\n    right: 0;\n    mix-blend-mode: multiply;\n    /* z-index: -1; */\n}\n\n.empty_state{\n    display: flex;\n    height: 15rem;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-3);\n    flex-shrink: 0;\n    align-self: stretch;\n}\n\n.content{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--spacing-5);\n    align-self: stretch;\n}\n\n.text{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: var(--spacing-3);\n}\n\n.bell_icon{\n    z-index: 9;\n}\n\n.button{\n    width: 100%;\n}\n\n::slotted([slot=\"label\"]) {\n    color: var(--color-text-bold, #202939) !important;\n}\n\n::slotted([slot=\"supporting_text\"]) {\n    color: var(--color-text, #4B5565) !important;\n}","import { Component, Prop, h, getAssetPath, Element, Fragment, Event, EventEmitter } from '@stencil/core';\nimport { Notification } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-notification-pane',\n  styleUrl: 'gb-notification-pane.css',\n  shadow: true,\n})\nexport class GbNotificationPane {\n  @Prop() state: 'empty' | 'notification_dropdown';\n  @Prop({ mutable: true }) notifications: Notification[] = [\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n  ];\n  @Event() markAsRead: EventEmitter<void>;\n  @Element() el: HTMLElement;\n\n  markAllAsRead() {\n    // this.notifications = [];\n    this.markAsRead.emit();\n  }\n\n  componentDidLoad() {\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\n\n    if (labelSlot) {\n      labelSlot.classList.add('text-lg-semi-bold');\n    }\n\n    if (supportingTextSlot) {\n      supportingTextSlot.classList.add('text-sm-regular');\n    }\n  }\n\n  render() {\n    const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);\n    const illustrationSrc = getAssetPath(`assets/notification_illustration.svg`);\n\n    return (\n      <div class=\"notification_pane_div\">\n        {this.state === 'empty' && [\n          <div class={`container`}>\n            <div class=\"frame\">\n              <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\n              <div class=\"empty_state\">\n                <div class=\"content\">\n                  <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\n                  <div class=\"text\">\n                    <slot name=\"label\"></slot>\n                    <slot name=\"supporting_text\"></slot>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>,\n          <div class={`button`}>\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\n              <p>Mark all as read</p>\n            </gb-button>\n          </div>,\n        ]}\n        {this.state === 'notification_dropdown' && (\n          <>\n            {this.notifications.length > 0 ? (\n              <div class=\"notification_dropdown\">\n                <div class={`content_wrapper`}>\n                  {this.notifications.map(notification => (\n                    <gb-notification-content\n                      label={notification.label}\n                      time={notification.time}\n                      supporting-text={notification.desc}\n                      icon={notification.icon}\n                    ></gb-notification-content>\n                  ))}\n                </div>\n                <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\" onClick={() => this.markAllAsRead()}>\n                  <p>Mark all as read</p>\n                </gb-button>\n              </div>\n            ) : (\n              [\n                <div class={`container`}>\n                  <div class=\"frame\">\n                    <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\n                    <div class=\"empty_state\">\n                      <div class=\"content\">\n                        <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\n                        <div class=\"text\">\n                          {/* <p class=\"label text-lg-semi-bold\">No notification</p>\n                    <p class=\"supporting_text text-sm-regular\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p> */}\n                          <slot name=\"label\"></slot>\n                          <slot name=\"supporting_text\"></slot>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>,\n                <div class={`button`}>\n                  <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\n                    <p>Mark all as read</p>\n                  </gb-button>\n                </div>,\n              ]\n            )}\n          </>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-YALfrxlg.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,+zqEAA+zqE;;MCQh1qE,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;QAO2B,IAAA,CAAA,aAAa,GAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SA+BxD;AAiGF;IA7FC,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;IAGxB,gBAAgB,GAAA;QACd,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC;QACzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC;QAE5E,IAAI,SAAS,EAAE;AACb,YAAA,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC;;QAG9C,IAAI,kBAAkB,EAAE;AACtB,YAAA,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC;;;IAIvD,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,YAAY,CAAC,CAAA,0CAAA,CAA4C,CAAC;AAC7E,QAAA,MAAM,eAAe,GAAG,YAAY,CAAC,CAAA,oCAAA,CAAsC,CAAC;QAE5E,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAC/B,IAAI,CAAC,KAAK,KAAK,OAAO,IAAI;AACzB,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAW,SAAA,CAAA,EAAA,EACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,qBAAqB,EAAG,CAAA,EAC3D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,EAAG,CAAA,EAC/D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACf,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,iBAAiB,EAAA,CAAQ,CAChC,CACF,CACF,CACF,CACF;AACN,YAAA,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAQ,MAAA,CAAA,EAAA,EAClB,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAe,cAAA,EAAA,IAAI,uBAAoB,wBAAwB,EAAA,EAC5I,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,kBAAA,CAAuB,CACb,CACR;AACP,SAAA,EACA,IAAI,CAAC,KAAK,KAAK,uBAAuB,KACrC,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAC5B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,eAAA,CAAiB,IAC1B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,KAClC,CACE,CAAA,yBAAA,EAAA,EAAA,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,IAAI,EAAE,YAAY,CAAC,IAAI,EAAA,iBAAA,EACN,YAAY,CAAC,IAAI,EAClC,IAAI,EAAE,YAAY,CAAC,IAAI,EACE,CAAA,CAC5B,CAAC,CACE,EACN,CAAW,CAAA,WAAA,EAAA,EAAA,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAA,cAAA,EAAe,IAAI,EAAoB,mBAAA,EAAA,wBAAwB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,EAAA,EAC/J,CAAA,CAAA,GAAA,EAAA,IAAA,EAAA,kBAAA,CAAuB,CACb,CACR,KAEN;YACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAW,SAAA,CAAA,EAAA,EACrB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,qBAAqB,EAAG,CAAA,EAC3D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,EAAG,CAAA,EAC/D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EAGf,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC1B,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,iBAAiB,EAAA,CAAQ,CAChC,CACF,CACF,CACF,CACF;YACN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,CAAA,MAAA,CAAQ,EAAA,EAClB,CAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAe,cAAA,EAAA,IAAI,uBAAoB,wBAAwB,EAAA,EAC5I,CAAA,CAAA,GAAA,EAAA,IAAA,EAAA,kBAAA,CAAuB,CACb,CACR;AACP,SAAA,CACF,CACA,CACJ,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-notification-pane/gb-notification-pane.css?tag=gb-notification-pane&encapsulation=shadow","src/components/gb-notification-pane/gb-notification-pane.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n.notification_pane_div{\n    display: inline-flex;\n    padding: var(--spacing-2);\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--spacing-2);\n    border-radius: var(--rounded-md);\n    border: 1px solid var(--color-border-subtler, #E3E8EF);\n    background: var(--color-surface, #FFFFFF);\n    box-shadow: var(--shadow-md);\n    cursor: pointer;\n}\n\n.content_wrapper{\n    display: flex;\n    flex-direction: column;\n    width: fit-content;\n    height: 24.5rem;\n    overflow-y: auto;\n}\n\n::-webkit-scrollbar{\n    right: 0rem;\n    bottom: -1.53125rem;\n    width: 0.8rem;\n    margin-top: 1rem;\n}\n\n::-webkit-scrollbar-track{\n    width: 0.5rem;\n    padding: var(--spacing-1);\n    border: none;\n}\n\n::-webkit-scrollbar-thumb{\n    width: 0.5rem;\n    height: 11.75rem;\n    border: 0.25rem solid var(--color-background-card, #FFFFFF);\n    border-radius: 0.5rem;\n    background: var(--color-border-subtle, #CDD5DF);\n}\n\n.container{\n    position: relative;\n    display: flex;\n    width: 24.3125rem;\n    height: 24.5rem;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    border-bottom: 0.5px solid var(--color-border-subtler, #E3E8EF);\n}\n\n.frame{\n    display: flex;\n    /* width: 24.8125rem; */\n    height: 26.5rem;\n    padding: var(--spacing-Positive-spacing-None, 0rem) var(--spacing-7);\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-Positive-spacing-2, 0.5rem);\n    flex-shrink: 0;\n}\n\n.empty_state_pattern{\n    position: absolute;\n    top: 0;\n    right: 0;\n    mix-blend-mode: multiply;\n    /* z-index: -1; */\n}\n\n.empty_state{\n    display: flex;\n    height: 15rem;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: var(--spacing-3);\n    flex-shrink: 0;\n    align-self: stretch;\n}\n\n.content{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: var(--spacing-5);\n    align-self: stretch;\n}\n\n.text{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: var(--spacing-3);\n}\n\n.bell_icon{\n    z-index: 9;\n}\n\n.button{\n    width: 100%;\n}\n\n::slotted([slot=\"label\"]) {\n    color: var(--color-text-bold, #202939) !important;\n}\n\n::slotted([slot=\"supporting_text\"]) {\n    color: var(--color-text, #4B5565) !important;\n}","import { Component, Prop, h, getAssetPath, Element, Fragment, Event, EventEmitter } from '@stencil/core';\nimport { Notification } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-notification-pane',\n  styleUrl: 'gb-notification-pane.css',\n  shadow: true,\n})\nexport class GbNotificationPane {\n  @Prop() state: 'empty' | 'notification_dropdown';\n  @Prop({ mutable: true }) notifications: Notification[] = [\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n    // {\n    //   label: 'Flagged transaction',\n    //   time: 'Just now',\n    //   desc: 'Aisha, here is your weekly report',\n    //   icon: 'assets/arrow-right-02.svg',\n    // },\n  ];\n  @Event() markAsRead: EventEmitter<void>;\n  @Element() el: HTMLElement;\n\n  markAllAsRead() {\n    // this.notifications = [];\n    this.markAsRead.emit();\n  }\n\n  componentDidLoad() {\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\n\n    if (labelSlot) {\n      labelSlot.classList.add('text-lg-semi-bold');\n    }\n\n    if (supportingTextSlot) {\n      supportingTextSlot.classList.add('text-sm-regular');\n    }\n  }\n\n  render() {\n    const patternSrc = getAssetPath(`assets/notification_background_pattern.svg`);\n    const illustrationSrc = getAssetPath(`assets/notification_illustration.svg`);\n\n    return (\n      <div class=\"notification_pane_div\">\n        {this.state === 'empty' && [\n          <div class={`container`}>\n            <div class=\"frame\">\n              <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\n              <div class=\"empty_state\">\n                <div class=\"content\">\n                  <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\n                  <div class=\"text\">\n                    <slot name=\"label\"></slot>\n                    <slot name=\"supporting_text\"></slot>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>,\n          <div class={`button`}>\n            <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\n              <p>Mark all as read</p>\n            </gb-button>\n          </div>,\n        ]}\n        {this.state === 'notification_dropdown' && (\n          <>\n            {this.notifications.length > 0 ? (\n              <div class=\"notification_dropdown\">\n                <div class={`content_wrapper`}>\n                  {this.notifications.map(notification => (\n                    <gb-notification-content\n                      label={notification.label}\n                      time={notification.time}\n                      supporting-text={notification.desc}\n                      icon={notification.icon}\n                    ></gb-notification-content>\n                  ))}\n                </div>\n                <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\" onClick={() => this.markAllAsRead()}>\n                  <p>Mark all as read</p>\n                </gb-button>\n              </div>\n            ) : (\n              [\n                <div class={`container`}>\n                  <div class=\"frame\">\n                    <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\n                    <div class=\"empty_state\">\n                      <div class=\"content\">\n                        <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\n                        <div class=\"text\">\n                          {/* <p class=\"label text-lg-semi-bold\">No notification</p>\n                    <p class=\"supporting_text text-sm-regular\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p> */}\n                          <slot name=\"label\"></slot>\n                          <slot name=\"supporting_text\"></slot>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>,\n                <div class={`button`}>\n                  <gb-button size=\"sm\" hierarchy=\"tertiary_color\" icon=\"default\" state=\"disabled\" icon-leading={true} icon-leading-swap=\"assets/blush_brush.svg\">\n                    <p>Mark all as read</p>\n                  </gb-button>\n                </div>,\n              ]\n            )}\n          </>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C8J8yAzQ.js → p-YmdZ5i1K.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-CD7FeUx5.js';
-import { d as defineCustomElement$2 } from './p-Dguzd6t-.js';
-import { d as defineCustomElement$1 } from './p-7OAXatIM.js';
+import { d as defineCustomElement$2 } from './p-Cn7XMnhO.js';
+import { d as defineCustomElement$1 } from './p-BsCOmRfy.js';
 
 const gbSidebarSubDropdownCss = ".sidebar_sub_dropdown{display:flex;padding:var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-8);align-items:flex-start;gap:0.625rem;align-self:stretch}.sidebar_sub_dropdown_children{display:flex;padding-left:var(--spacing-2);flex-direction:column;align-items:flex-start;gap:var(--spacing-half);flex:1 0 0;border-left:1px solid var(--color-border, #808C9E);width:100%}.sidebar_sub_dropdown_child{width:100%}";
 
@@ -44,7 +44,7 @@ const GbSidebarSubDropdown = /*@__PURE__*/ proxyCustomElement(class GbSidebarSub
         const hasChildren = children.length > 0;
         const baseItemState = this.isExpanded ? 'open' : 'default';
         const baseItemSelected = this.isParentActive || this.isExpanded;
-        return (h("div", { key: '46e6b952d1dcafdc3bceb58a880948a6cb3bc122', class: "sidebar_sub_dropdown_container" }, h("gb-sidebar-base-item", { key: 'c5a1f76d9e8bd97b534664906b871658e0a53beb', type: this.type, icon: this.menuItem.icon, label: this.menuItem.label, state: baseItemState, selected: baseItemSelected, showDropdownArrow: hasChildren, onClick: () => this.onBaseItemClick() }), hasChildren && this.isExpanded && this.type === 'full_with_label' && (h("div", { key: '208fd3ed6b544335439e760e83701a1e714955d0', class: `sidebar_sub_dropdown ${this.isExpanded ? 'expanded' : 'collapsed'}` }, h("div", { key: 'b4b2c83231e6f0156c194674e572a6ae664136b4', class: "sidebar_sub_dropdown_children" }, children.map((child, index) => (h("div", { class: "sidebar_sub_dropdown_child", onClick: () => this.onChildClick(child, index) }, h("gb-sidebar-child-item", { type: this.type, icon: child.icon, label: child.label, state: "default", selected: this.activeChildIndex === index })))))))));
+        return (h("div", { key: 'f09b6a3be2303c9f9ee8631b116e0843f760ac62', class: "sidebar_sub_dropdown_container" }, h("gb-sidebar-base-item", { key: 'b29f60ed9b9983b397c19118366cef673f7c791d', type: this.type, icon: this.menuItem.icon, label: this.menuItem.label, state: baseItemState, selected: baseItemSelected, showDropdownArrow: hasChildren, onClick: () => this.onBaseItemClick() }), hasChildren && this.isExpanded && this.type === 'full_with_label' && (h("div", { key: '0ab70ce15e7083da8d8cdbedc8f5be48e1e5f8f5', class: `sidebar_sub_dropdown ${this.isExpanded ? 'expanded' : 'collapsed'}` }, h("div", { key: '76b6034fa94f5c405f062d6e6203e13a34192901', class: "sidebar_sub_dropdown_children" }, children.map((child, index) => (h("div", { class: "sidebar_sub_dropdown_child", onClick: () => this.onChildClick(child, index) }, h("gb-sidebar-child-item", { type: this.type, icon: child.icon, label: child.label, state: "default", selected: this.activeChildIndex === index })))))))));
     }
     static get style() { return gbSidebarSubDropdownCss; }
 }, [257, "gb-sidebar-sub-dropdown", {
@@ -81,6 +81,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { GbSidebarSubDropdown as G, defineCustomElement as d };
-//# sourceMappingURL=p-C8J8yAzQ.js.map
+//# sourceMappingURL=p-YmdZ5i1K.js.map
 
-//# sourceMappingURL=p-C8J8yAzQ.js.map
+//# sourceMappingURL=p-YmdZ5i1K.js.map

package/dist/components/{p-C8J8yAzQ.js.map → p-YmdZ5i1K.js.map}

@@ -1 +1 @@
-{"file":"p-C8J8yAzQ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-sidebar-sub-dropdown/gb-sidebar-sub-dropdown.css?tag=gb-sidebar-sub-dropdown&encapsulation=shadow","src/components/gb-sidebar-sub-dropdown/gb-sidebar-sub-dropdown.tsx"],"sourcesContent":[".sidebar_sub_dropdown {\n  display: flex;\n  padding: var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-8);\n  align-items: flex-start;\n  gap: 0.625rem;\n  align-self: stretch;\n}\n\n.sidebar_sub_dropdown_children {\n  display: flex;\n  padding-left: var(--spacing-2);\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-half);\n  flex: 1 0 0;\n  border-left: 1px solid var(--color-border, #808C9E);\n  width: 100%;\n}\n\n.sidebar_sub_dropdown_child{\n    width: 100%;\n}","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { StateType, SubMenuItem, SubMenuChild } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-sidebar-sub-dropdown',\n  styleUrl: 'gb-sidebar-sub-dropdown.css',\n  shadow: true,\n})\nexport class GbSidebarSubDropdown {\n  @Prop() type: 'full_with_label' | 'icon_only';\n  @Prop() menuItem: SubMenuItem = { label: '', icon: '' };\n  @Prop() menuIndex: number = -1;\n  @Prop() isExpanded: boolean = false;\n  @Prop() isParentActive: boolean = false;\n  @Prop() activeChildIndex: number = -1;\n  @Event() dropdownToggled: EventEmitter<number>;\n  @Event() childItemSelected: EventEmitter<{ parentIndex: number; childIndex: number; item: SubMenuChild | SubMenuItem }>;\n\n  onBaseItemClick() {\n    if ((this.menuItem.children ?? []).length === 0) {\n      this.childItemSelected.emit({\n        parentIndex: this.menuIndex,\n        childIndex: -1,\n        item: this.menuItem,\n      });\n      return;\n    }\n\n    this.dropdownToggled.emit(this.menuIndex);\n  }\n\n  onChildClick(child: SubMenuChild, childIndex: number) {\n    this.childItemSelected.emit({\n      parentIndex: this.menuIndex,\n      childIndex,\n      item: child,\n    });\n  }\n\n  render() {\n    const children = this.menuItem.children ?? [];\n    const hasChildren = children.length > 0;\n    const baseItemState: StateType = this.isExpanded ? 'open' : 'default';\n    const baseItemSelected = this.isParentActive || this.isExpanded;\n\n    return (\n      <div class=\"sidebar_sub_dropdown_container\">\n        <gb-sidebar-base-item\n          type={this.type}\n          icon={this.menuItem.icon}\n          label={this.menuItem.label}\n          state={baseItemState}\n          selected={baseItemSelected}\n          showDropdownArrow={hasChildren}\n          onClick={() => this.onBaseItemClick()}\n        ></gb-sidebar-base-item>\n        {hasChildren && this.isExpanded && this.type === 'full_with_label' && (\n          <div class={`sidebar_sub_dropdown ${this.isExpanded ? 'expanded' : 'collapsed'}`}>\n            <div class=\"sidebar_sub_dropdown_children\">\n              {children.map((child, index) => (\n                <div class=\"sidebar_sub_dropdown_child\" onClick={() => this.onChildClick(child, index)}>\n                  <gb-sidebar-child-item type={this.type}  icon={child.icon} label={child.label} state=\"default\" selected={this.activeChildIndex === index}></gb-sidebar-child-item>\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-YmdZ5i1K.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-sidebar-sub-dropdown/gb-sidebar-sub-dropdown.css?tag=gb-sidebar-sub-dropdown&encapsulation=shadow","src/components/gb-sidebar-sub-dropdown/gb-sidebar-sub-dropdown.tsx"],"sourcesContent":[".sidebar_sub_dropdown {\n  display: flex;\n  padding: var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-8);\n  align-items: flex-start;\n  gap: 0.625rem;\n  align-self: stretch;\n}\n\n.sidebar_sub_dropdown_children {\n  display: flex;\n  padding-left: var(--spacing-2);\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--spacing-half);\n  flex: 1 0 0;\n  border-left: 1px solid var(--color-border, #808C9E);\n  width: 100%;\n}\n\n.sidebar_sub_dropdown_child{\n    width: 100%;\n}","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { StateType, SubMenuItem, SubMenuChild } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-sidebar-sub-dropdown',\n  styleUrl: 'gb-sidebar-sub-dropdown.css',\n  shadow: true,\n})\nexport class GbSidebarSubDropdown {\n  @Prop() type: 'full_with_label' | 'icon_only';\n  @Prop() menuItem: SubMenuItem = { label: '', icon: '' };\n  @Prop() menuIndex: number = -1;\n  @Prop() isExpanded: boolean = false;\n  @Prop() isParentActive: boolean = false;\n  @Prop() activeChildIndex: number = -1;\n  @Event() dropdownToggled: EventEmitter<number>;\n  @Event() childItemSelected: EventEmitter<{ parentIndex: number; childIndex: number; item: SubMenuChild | SubMenuItem }>;\n\n  onBaseItemClick() {\n    if ((this.menuItem.children ?? []).length === 0) {\n      this.childItemSelected.emit({\n        parentIndex: this.menuIndex,\n        childIndex: -1,\n        item: this.menuItem,\n      });\n      return;\n    }\n\n    this.dropdownToggled.emit(this.menuIndex);\n  }\n\n  onChildClick(child: SubMenuChild, childIndex: number) {\n    this.childItemSelected.emit({\n      parentIndex: this.menuIndex,\n      childIndex,\n      item: child,\n    });\n  }\n\n  render() {\n    const children = this.menuItem.children ?? [];\n    const hasChildren = children.length > 0;\n    const baseItemState: StateType = this.isExpanded ? 'open' : 'default';\n    const baseItemSelected = this.isParentActive || this.isExpanded;\n\n    return (\n      <div class=\"sidebar_sub_dropdown_container\">\n        <gb-sidebar-base-item\n          type={this.type}\n          icon={this.menuItem.icon}\n          label={this.menuItem.label}\n          state={baseItemState}\n          selected={baseItemSelected}\n          showDropdownArrow={hasChildren}\n          onClick={() => this.onBaseItemClick()}\n        ></gb-sidebar-base-item>\n        {hasChildren && this.isExpanded && this.type === 'full_with_label' && (\n          <div class={`sidebar_sub_dropdown ${this.isExpanded ? 'expanded' : 'collapsed'}`}>\n            <div class=\"sidebar_sub_dropdown_children\">\n              {children.map((child, index) => (\n                <div class=\"sidebar_sub_dropdown_child\" onClick={() => this.onChildClick(child, index)}>\n                  <gb-sidebar-child-item type={this.type}  icon={child.icon} label={child.label} state=\"default\" selected={this.activeChildIndex === index}></gb-sidebar-child-item>\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-cHn6O-Kf.js.map

@@ -1 +1 @@
-{"file":"p-cHn6O-Kf.js","mappings":"AAIY,IAAA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAHW,SAAS,KAAT,SAAS,GAGpB,EAAA,CAAA,CAAA;AAMW,IAAA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,YAAwB;AACxB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EALW,aAAa,KAAb,aAAa,GAKxB,EAAA,CAAA,CAAA;AAEW,IAAA;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;;;","names":[],"sources":["src/models/reusableModels.ts"],"sourcesContent":["export type GeneralSizes = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';\n\nexport type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';\n\nexport enum StateEnum {\n  Default = 'default',\n  Disabled = 'disabled',\n}\n\nexport type ArrowPositions = 'bottom_center' | 'bottom_left' | 'bottom_right' | 'top_center' | 'left' | 'right' | 'none' | 'center';\n\nexport type CheckBoxVariants = 'checkbox' | 'check_circle' | 'radio';\n\nexport enum BorderWeights {\n  VeryLight = 'very_light',\n  Light = 'light',\n  Regular = 'regular',\n  Heavy = 'heavy',\n}\n\nexport enum OnlineIndicatorStates {\n  Online = 'online',\n  Offline = 'offline',\n}\n\nexport type BreakPoints = 'desktop' | 'mobile';\n\nexport type FileUploadIconType = 'solid' | 'outline';\n\nexport type FileUploadStates = 'default' | 'in_progress' | 'complete' | 'hover' | 'disabled' | 'error';\n\nexport type GeneralColors = 'default' | 'gray' | 'primary' | 'error' | 'warning' | 'success' | 'discovery' | 'information' | 'pink' | 'purple' | 'white';\n\nexport type PaginationNumberShapes = 'square' | 'circle';\n\nexport type PaginationTypes =\n  | 'page_default'\n  | 'page_minimal_center_aligned'\n  | 'card_default'\n  | 'card_minimal_right_aligned'\n  | 'card_minimal_left_aligned'\n  | 'card_minimal_center_aligned'\n  | 'card_button_group_right_aligned'\n  | 'card_button_group_left_aligned'\n  | 'card_button_group_center_aligned';\n\nexport type TabTypes =\n  | 'button_primary'\n  | 'button_gray'\n  | 'button_white'\n  | 'rounded_button_white'\n  | 'underline'\n  | 'underline_filled'\n  | 'line'\n  | 'button_white_border'\n  | 'rounded_button_white_border'\n  | 'button_gray_border';\n\nexport type GeneralBackgroundCategories = 'plain_background' | 'colored_background';\n\nexport type InputFieldTypes =\n  | 'default'\n  | 'icon_leading'\n  | 'leading_dropdown'\n  | 'trailing_dropdown'\n  | 'leading_text'\n  | 'payment_input'\n  | 'tags'\n  | 'trailing_button'\n  | 'password'\n  | 'password_icon_leading'\n  | 'count';\n\nexport type DropdownTypes = 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox' | 'search' | 'tags';\n\nexport type ColorTypes = 'gray' | 'blue' | 'cyan' | 'pink' | 'purple' | 'green' | 'yellow' | 'red' | 'white';\n\nexport type DropdownItemTypes = string | number | { name: string | number; username: string; selected?: boolean };\n\nexport type PaginationDotTypes = 'dot' | 'line';\n\nexport type FileIconStyles = 'default' | 'gray' | 'solid';\n\nexport type FileIconTypes = 'pdf' | 'csv' | 'jpg' | 'jpeg' | 'ppt' | 'pptx' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'svg' | 'txt' | 'zip' | 'rar' | 'mp3' | 'mp4' | 'png' | 'empty';\n\nexport type TableCellTypes = 'text' | 'lead_text' | 'lead_checkbox' | 'badge';\n\nexport type ProgressStepStatus = 'incomplete' | 'current' | 'complete';\n\nexport type ProgressStepTypes = 'icon_only' | 'icon_left' | 'icon_top' | 'text_line' | 'featured_icon_left' | 'featured_icon_top';\n\nexport type ProgressStepStates = 'default' | 'destructive';\n\nexport type BadgeTypes = 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\n\nexport type GeneralStyles = 'standard' | 'compact';\n\nexport type StateType = 'default' | 'disabled' | 'applied' | 'loading' | 'open';\n\nexport type ButtonGroupTypes = 'false' | 'leading' | 'only' | 'dot' | 'checkbox';\n\nexport type ThemeTypes = 'system' | 'light' | 'dark';\n\nexport type BadgeIconTypes = 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only' | 'false';\n\nexport type DropdownRoles = { badgeLabel: string; badgeColor: GeneralColors; badgeType: BadgeTypes };\n\nexport type StepperType = {\n  state: ProgressStepStates;\n  status: ProgressStepStatus;\n  label?: string;\n  supportingText?: string;\n};\n\nexport type DetailCellType = 'information' | 'document' | 'status' | 'button';\n\nexport type MetricFeaturedIconTypes = 'glassmorphism' | 'circular_filled';\n\nexport interface DropdownListGroup {\n  icon: string;\n  label: string;\n  shortcut: string;\n}\n\nexport type CloseButtonPositions = 'left' | 'right';\n\nexport interface Notification {\n  label: string;\n  time: string;\n  desc: string;\n  icon: string;\n}\n\nexport type IllustrationTypes = 'cloud' | 'box' | 'documents' | 'credit_card';\n\nexport type PatternTypes = 'circles' | 'grid' | 'grid_dot' | 'squares';\n\nexport type MobilePosition = 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right';\n\nexport interface TableColumn {\n  key: string;\n  label: string;\n  value?: (row: any) => any;\n  supportingText?: string | ((row: any) => string);\n  width?: string;\n  align?: 'left' | 'center' | 'right';\n  helpIcon?: boolean;\n  sortable?: boolean;\n  sortType?: 'string' | 'number' | 'date';\n  visible?: boolean;\n  cellComponent?: string;\n  searchable?: boolean;\n  cellProps?: ((row: any) => { [key: string]: any }) | { [key: string]: any };\n  cellEvent?: string | string[];\n  hasAvatar?: boolean;\n  cellAvatar?: {\n    props?: {};\n    slots?: {\n      initials?: string | ((row: any) => string | any);\n      image?: string | ((row: any) => string | any);\n    };\n  };\n  cellSlots?: {\n    default?: {\n      tag?: string; // e.g., 'p', 'span' to wrap content\n      content: (row: any) => string | any; // Function to get slot content\n    };\n    named?: {\n      [slotName: string]: {\n        tag: string; // e.g., 'p', 'h1', 'span'\n        content: (row: any) => string | any; // Function to get slot content\n      };\n    };\n  };\n  cellClass?: string | ((row: any) => string);\n  cellStyle?: { [key: string]: string } | ((row: any) => { [key: string]: string });\n  truncate?: boolean;\n  splitCell?: {\n    left: (row: any) => string | number;\n    right: (row: any) => string | number;\n    separator?: string;\n    leftStyle?: (row: any) => { [key: string]: string };\n    rightStyle?: (row: any) => { [key: string]: string };\n  };\n  mobile?: {\n    position?: MobilePosition;\n  };\n  gridCard?: {\n    buttonIcon?: string;\n    buttonText?: string;\n  };\n}\n\nexport interface RowAction {\n  label?: string;\n  icon?: string;\n  action: string; // emitted event name\n  disabled?: boolean;\n  destructive?: boolean;\n  type?: 'button' | 'dropdown' | 'custom';\n}\n\nexport interface DropdownOption {\n  label: string;\n  icon?: string;\n  action: string; // emitted event name\n  disabled?: ((row: any) => boolean) | boolean;\n}\n\nexport type PortalPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end';\n\nexport interface FilterField {\n  tag: string;\n  columnKey?: string; // ← the actual row property to filter on\n  key: string | { start: string; end: string }; // date ranges need two keys\n  event: string | { start: string; end: string }; // date ranges need two events\n  label?: string;\n  props?: any;\n  default?: any;\n}\n\nexport interface FilterConfig {\n  mode?: 'internal' | 'external';\n  title?: string;\n  showClearButton?: boolean;\n  fields?: FilterField[];\n  initialValues?: {\n    pageNumber: number;\n    pageSize: number;\n  };\n  appliedValues?: Record<string, any>;\n}\n\nexport type IconStyles = 'stroke' | 'two-tone' | 'duotone' | 'solid' | 'bulk';\n\nexport type IconTypes = 'rounded' | 'sharp';\n\nexport type SubMenuChild = {\n  label: string;\n  icon: string;\n};\n\nexport type SubMenuItem = {\n  label: string;\n  icon: string;\n  children?: SubMenuChild[];\n};\n"],"version":3}
+{"file":"p-cHn6O-Kf.js","mappings":"AAIY,IAAA;AAAZ,CAAA,UAAY,SAAS,EAAA;AACnB,IAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAHW,SAAS,KAAT,SAAS,GAGpB,EAAA,CAAA,CAAA;AAMW,IAAA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,YAAwB;AACxB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EALW,aAAa,KAAb,aAAa,GAKxB,EAAA,CAAA,CAAA;AAEW,IAAA;AAAZ,CAAA,UAAY,qBAAqB,EAAA;AAC/B,IAAA,qBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,qBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACrB,CAAC,EAHW,qBAAqB,KAArB,qBAAqB,GAGhC,EAAA,CAAA,CAAA;;;;","names":[],"sources":["src/models/reusableModels.ts"],"sourcesContent":["export type GeneralSizes = 'xxxxl' | 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs' | 'profile_lg' | 'profile_md' | 'profile_sm';\n\nexport type GeneralHierarchies = 'primary' | 'secondary_gray' | 'secondary_color' | 'tertiary_gray' | 'tertiary_color' | 'link_gray' | 'link_color';\n\nexport enum StateEnum {\n  Default = 'default',\n  Disabled = 'disabled',\n}\n\nexport type ArrowPositions = 'bottom_center' | 'bottom_left' | 'bottom_right' | 'top_center' | 'left' | 'right' | 'none' | 'center';\n\nexport type CheckBoxVariants = 'checkbox' | 'check_circle' | 'radio';\n\nexport enum BorderWeights {\n  VeryLight = 'very_light',\n  Light = 'light',\n  Regular = 'regular',\n  Heavy = 'heavy',\n}\n\nexport enum OnlineIndicatorStates {\n  Online = 'online',\n  Offline = 'offline',\n}\n\nexport type BreakPoints = 'desktop' | 'mobile';\n\nexport type FileUploadIconType = 'solid' | 'outline';\n\nexport type FileUploadStates = 'default' | 'in_progress' | 'complete' | 'hover' | 'disabled' | 'error';\n\nexport type GeneralColors = 'default' | 'gray' | 'primary' | 'error' | 'warning' | 'success' | 'discovery' | 'information' | 'pink' | 'purple' | 'white';\n\nexport type PaginationNumberShapes = 'square' | 'circle';\n\nexport type PaginationTypes =\n  | 'page_default'\n  | 'page_minimal_center_aligned'\n  | 'card_default'\n  | 'card_minimal_right_aligned'\n  | 'card_minimal_left_aligned'\n  | 'card_minimal_center_aligned'\n  | 'card_button_group_right_aligned'\n  | 'card_button_group_left_aligned'\n  | 'card_button_group_center_aligned';\n\nexport type TabTypes =\n  | 'button_primary'\n  | 'button_gray'\n  | 'button_white'\n  | 'rounded_button_white'\n  | 'underline'\n  | 'underline_filled'\n  | 'line'\n  | 'button_white_border'\n  | 'rounded_button_white_border'\n  | 'button_gray_border';\n\nexport type GeneralBackgroundCategories = 'plain_background' | 'colored_background';\n\nexport type InputFieldTypes =\n  | 'default'\n  | 'icon_leading'\n  | 'leading_dropdown'\n  | 'trailing_dropdown'\n  | 'leading_text'\n  | 'payment_input'\n  | 'tags'\n  | 'trailing_button'\n  | 'password'\n  | 'password_icon_leading'\n  | 'count';\n\nexport type DropdownTypes = 'default' | 'icon_leading' | 'avatar_leading' | 'dot_leading' | 'checkbox' | 'search' | 'tags';\n\nexport type ColorTypes = 'gray' | 'blue' | 'cyan' | 'pink' | 'purple' | 'green' | 'yellow' | 'red' | 'white';\n\nexport type DropdownItemTypes = string | number | { name: string | number; username: string; selected?: boolean };\n\nexport type PaginationDotTypes = 'dot' | 'line';\n\nexport type FileIconStyles = 'default' | 'gray' | 'solid';\n\nexport type FileIconTypes = 'pdf' | 'csv' | 'jpg' | 'jpeg' | 'ppt' | 'pptx' | 'doc' | 'docx' | 'xls' | 'xlsx' | 'svg' | 'txt' | 'zip' | 'rar' | 'mp3' | 'mp4' | 'png' | 'empty';\n\nexport type TableCellTypes = 'text' | 'lead_text' | 'lead_checkbox' | 'badge';\n\nexport type ProgressStepStatus = 'incomplete' | 'current' | 'complete';\n\nexport type ProgressStepTypes = 'icon_only' | 'icon_left' | 'icon_top' | 'text_line' | 'featured_icon_left' | 'featured_icon_top';\n\nexport type ProgressStepStates = 'default' | 'destructive';\n\nexport type BadgeTypes = 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\n\nexport type GeneralStyles = 'standard' | 'compact';\n\nexport type StateType = 'default' | 'disabled' | 'applied' | 'loading' | 'open';\n\nexport type ButtonGroupTypes = 'false' | 'leading' | 'only' | 'dot' | 'checkbox';\n\nexport type ThemeTypes = 'system' | 'light' | 'dark';\n\nexport type BadgeIconTypes = 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only' | 'false';\n\nexport type DropdownRoles = { badgeLabel: string; badgeColor: GeneralColors; badgeType: BadgeTypes };\n\nexport type StepperType = {\n  state: ProgressStepStates;\n  status: ProgressStepStatus;\n  label?: string;\n  supportingText?: string;\n};\n\nexport type DetailCellType = 'information' | 'document' | 'status' | 'button' | 'tags';\n\nexport type MetricFeaturedIconTypes = 'glassmorphism' | 'circular_filled';\n\nexport interface DropdownListGroup {\n  icon: string;\n  label: string;\n  shortcut: string;\n}\n\nexport type CloseButtonPositions = 'left' | 'right';\n\nexport interface Notification {\n  label: string;\n  time: string;\n  desc: string;\n  icon: string;\n}\n\nexport type IllustrationTypes = 'cloud' | 'box' | 'documents' | 'credit_card';\n\nexport type PatternTypes = 'circles' | 'grid' | 'grid_dot' | 'squares';\n\nexport type MobilePosition = 'top_left' | 'top_right' | 'bottom_left' | 'bottom_right';\n\nexport interface TableColumn {\n  key: string;\n  label: string;\n  value?: (row: any) => any;\n  supportingText?: string | ((row: any) => string);\n  width?: string;\n  align?: 'left' | 'center' | 'right';\n  helpIcon?: boolean;\n  sortable?: boolean;\n  sortType?: 'string' | 'number' | 'date';\n  visible?: boolean;\n  cellComponent?: string;\n  searchable?: boolean;\n  cellProps?: ((row: any) => { [key: string]: any }) | { [key: string]: any };\n  cellEvent?: string | string[];\n  hasAvatar?: boolean;\n  cellAvatar?: {\n    props?: {};\n    slots?: {\n      initials?: string | ((row: any) => string | any);\n      image?: string | ((row: any) => string | any);\n    };\n  };\n  cellSlots?: {\n    default?: {\n      tag?: string; // e.g., 'p', 'span' to wrap content\n      content: (row: any) => string | any; // Function to get slot content\n    };\n    named?: {\n      [slotName: string]: {\n        tag: string; // e.g., 'p', 'h1', 'span'\n        content: (row: any) => string | any; // Function to get slot content\n      };\n    };\n  };\n  cellClass?: string | ((row: any) => string);\n  cellStyle?: { [key: string]: string } | ((row: any) => { [key: string]: string });\n  truncate?: boolean;\n  splitCell?: {\n    left: (row: any) => string | number;\n    right: (row: any) => string | number;\n    separator?: string;\n    leftStyle?: (row: any) => { [key: string]: string };\n    rightStyle?: (row: any) => { [key: string]: string };\n  };\n  mobile?: {\n    position?: MobilePosition;\n  };\n  gridCard?: {\n    buttonIcon?: string;\n    buttonText?: string;\n  };\n}\n\nexport interface RowAction {\n  label?: string;\n  icon?: string;\n  action: string; // emitted event name\n  disabled?: boolean;\n  destructive?: boolean;\n  type?: 'button' | 'dropdown' | 'custom';\n}\n\nexport interface DropdownOption {\n  label: string;\n  icon?: string;\n  action: string; // emitted event name\n  disabled?: ((row: any) => boolean) | boolean;\n}\n\nexport type PortalPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'left'\n  | 'left-start'\n  | 'left-end'\n  | 'right'\n  | 'right-start'\n  | 'right-end';\n\nexport interface FilterField {\n  tag: string;\n  columnKey?: string; // ← the actual row property to filter on\n  key: string | { start: string; end: string }; // date ranges need two keys\n  event: string | { start: string; end: string }; // date ranges need two events\n  label?: string;\n  props?: any;\n  default?: any;\n}\n\nexport interface FilterConfig {\n  mode?: 'internal' | 'external';\n  title?: string;\n  showClearButton?: boolean;\n  fields?: FilterField[];\n  initialValues?: {\n    pageNumber: number;\n    pageSize: number;\n  };\n  appliedValues?: Record<string, any>;\n}\n\nexport type IconStyles = 'stroke' | 'two-tone' | 'duotone' | 'solid' | 'bulk';\n\nexport type IconTypes = 'rounded' | 'sharp';\n\nexport type SubMenuChild = {\n  label: string;\n  icon: string;\n};\n\nexport type SubMenuItem = {\n  label: string;\n  icon: string;\n  children?: SubMenuChild[];\n};\n"],"version":3}