globuswebcomponents 0.3.9 → 0.4.1

package/dist/components/gb-checkbox-group-item.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h } from './p-3d8f80e9.js';
-import { d as defineCustomElement$6 } from './p-837365c7.js';
-import { d as defineCustomElement$5 } from './p-21fecbde.js';
-import { d as defineCustomElement$4 } from './p-63fbf5d6.js';
-import { d as defineCustomElement$3 } from './p-337ee2c8.js';
-import { d as defineCustomElement$2 } from './p-9a07bbad.js';
+import { d as defineCustomElement$6 } from './p-2522e0e6.js';
+import { d as defineCustomElement$5 } from './p-5fbe4056.js';
+import { d as defineCustomElement$4 } from './p-fc8afe63.js';
+import { d as defineCustomElement$3 } from './p-e7e9af72.js';
+import { d as defineCustomElement$2 } from './p-4c21ca28.js';
 
 const gbCheckboxGroupItemCss = ":root {\r\n    /* --------------------------------------Primary Colors--------------------------------------------- */\r\n    /* base color palette */\r\n    --base-white: #fff;\r\n    --base-black: #000;\r\n\r\n\r\n    /* gray color palette  */\r\n    --gray-25: #fcfcfd;\r\n    --gray-50: #f6f8fa;\r\n    --gray-100: #eef2f6;\r\n    --gray-200: #e3e8ef;\r\n    --gray-300: #cdd5df;\r\n    --gray-400: #9aa4b2;\r\n    --gray-500: #697586;\r\n    --gray-600: #4b5565;\r\n    --gray-700: #364152;\r\n    --gray-800: #202939;\r\n    --gray-900: #121926;\r\n    --gray-950: #0D121C;\r\n\r\n    /* brand dark blue color palette */\r\n    --brandDarkBlue-25: #F9F9FB;\r\n    --brandDarkBlue-50: #edeef3;\r\n    --brandDarkBlue-100: #d3d5e0;\r\n    --brandDarkBlue-200: #b5b9cc;\r\n    --brandDarkBlue-300: #9095b2;\r\n    --brandDarkBlue-400: #464f7f;\r\n    --brandDarkBlue-500: #212c65;\r\n    --brandDarkBlue-600: #1e285c;\r\n    --brandDarkBlue-700: #1c2554;\r\n    --brandDarkBlue-800: #161d43;\r\n    --brandDarkBlue-900: #0b0f22;\r\n    --brandDarkBlue-950: #070914;\r\n\r\n    /* brand red color palette */\r\n    --brandRed-25: #fffbfa;\r\n    --brandRed-50: #fef1f2;\r\n    --brandRed-100: #fde3e5;\r\n    --brandRed-200: #f9b4ba;\r\n    --brandRed-300: #f68e98;\r\n    --brandRed-400: #f36976;\r\n    --brandRed-500: #e21b2e;\r\n    --brandRed-600: #cc1a2a;\r\n    --brandRed-700: #b51726;\r\n    --brandRed-800: #8c121d;\r\n    --brandRed-900: #680d16;\r\n    --brandRed-950: #3f080d;\r\n\r\n    /* warning color palette */\r\n    --warning-25: #fffcf5;\r\n    --warning-50: #fffaeb;\r\n    --warning-100: #fef0c7;\r\n    --warning-200: #fedf89;\r\n    --warning-300: #fec84b;\r\n    --warning-400: #fdb022;\r\n    --warning-500: #f79009;\r\n    --warning-600: #dc6803;\r\n    --warning-700: #b54708;\r\n    --warning-800: #93370d;\r\n    --warning-900: #7A2e0e;\r\n    --warning-950: #4e1d09;\r\n\r\n    /* success color palette  */\r\n    --success-25: #f6fef9;\r\n    --success-50: #ecfdf3;\r\n    --success-100: #dcfaeb;\r\n    --success-200: #a9efc5;\r\n    --success-300: #75e0a7;\r\n    --success-400: #47cd89;\r\n    --success-500: #17b26a;\r\n    --success-600: #079455;\r\n    --success-700: #067647;\r\n    --success-800: #085d3a;\r\n    --success-900: #074d31;\r\n    --success-950: #053321;\r\n\r\n    /* ------------------------------------------opacity color palette--------------------------------------  */\r\n    /* 20% opacity */\r\n    --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n    --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n    /* 30% opacity */\r\n    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n    /* 40% opacity */\r\n    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n\r\n    /* ------------------------------------------Secondary Color------------------------------------------- */\r\n    /* blueLight color palete */\r\n    --lightBlue-25: #F5FBFF;\r\n    --lightBlue-50: #F0F9FF;\r\n    --lightBlue-100: #E0F2FE;\r\n    --lightBlue-200: #B9E6FE;\r\n    --lightBlue-300: #7CD4FD;\r\n    --lightBlue-400: #7CD4FD;\r\n    --lightBlue-500: #0BA5EC;\r\n    --lightBlue-600: #0086C9;\r\n    --lightBlue-700: #026AA2;\r\n    --lightBlue-800: #065986;\r\n    --lightBlue-900: #0B4A6F;\r\n    --lightBlue-950: #062C41;\r\n   \r\n\r\n    /* blue color palette */\r\n    --blue-25: #ECF5FE;\r\n    --blue-50: #E4F0FC;\r\n    --blue-100: #C8E0F9;\r\n    --blue-200: #9AC7F4;\r\n    --blue-300: #6AA9E7;\r\n    --blue-400: #378FE6;\r\n    --blue-500: #075DB2;\r\n    --blue-600: #064E94;\r\n    --blue-700: #053E77;\r\n    --blue-800: #042F59;\r\n    --blue-900: #022445;\r\n    --blue-950: #021D37;\r\n\r\n    /* Purple color palete */\r\n    --purple-25: #FAFAFF;\r\n    --purple-50: #F4F3FF;\r\n    --purple-100: #EBE9FE;\r\n    --purple-200: #D9D6FE;\r\n    --purple-300: #BDB4FE;\r\n    --purple-400: #9B8AFB;\r\n    --purple-500: #7A5AF8;\r\n    --purple-600: #6938EF;\r\n    --purple-700: #5925DC;\r\n    --purple-800: #4A1FB8;\r\n    --purple-900: #3E1C96;\r\n    --purple-950: #27115F;\r\n\r\n\r\n    /* pink color palette */\r\n    --pink-25: #FEF6FB;\r\n    --pink-50: #FDF2FA;\r\n    --pink-100: #FCE7F6;\r\n    --pink-200: #FCCEEE;\r\n    --pink-300: #FAA7E0;\r\n    --pink-400: #F670C7;\r\n    --pink-500: #EE46BC;\r\n    --pink-600: #DD2590;\r\n    --pink-700: #C11574;\r\n    --pink-800: #9E165F;\r\n    --pink-900: #851651;\r\n    --pink-950: #4E0D30;\r\n\r\n\r\n\r\n    /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n    /* -----------Text Color----------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-bold: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-bold: var(--gray-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-disabled: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-disabled: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-inverse: var(--base-black);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-brandDarkBlue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger: var(--brandRed-700);\r\n    }\r\n\r\n     [data-theme=\"light\"] {\r\n        --color-text-danger-subtle: var(--brandRed-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger-subtle: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-danger-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-danger-inverse: var(--brandRed-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-warning: var(--warning-600);\r\n    }\r\n\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-warning: var(--warning-300);\r\n    }\r\n\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-warning-subtle: var(--warning-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-warning-subtle: var(--warning-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-success: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-success-subtle: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-success-subtle: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-discovery-bold: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-discovery: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-discovery: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-discovery-subtle: var(--blueLight-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-discovery-subtle: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-information-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-information: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-information-subtle: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-information-subtle: var(--blue-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-purple-bold: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-purple: var(--purple-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-purple-subtle: var(--purple-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-purple-subtle: var(--purple-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-pink: var(--pink-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-text-pink-subtle: var(--pink-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-text-pink-subtle: var(--pink-400);\r\n    }\r\n\r\n\r\n    /* --------------Link color--------------- */\r\n\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-link: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-link: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-link-pressed: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-link-pressed: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-link-visited: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-link-visited: var(--blueLight-300);\r\n    }\r\n\r\n\r\n    /* --------------Icon color--------------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-bold: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-bold: var(--gray-100);\r\n    }\r\n    \r\n    [data-theme=\"light\"] {\r\n        --color-icon: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-subtle: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-disabled: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-disabled: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-inverse: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-danger: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-danger-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-danger-inverse: var(--brandRed-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-warning: var(--warning-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-warning: var(--warning-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-success: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-discovery-bold: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-discovery: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-discovery: var(--blueLight-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-information-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-information: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-purple-bold: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-purple: var(--purple-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-icon-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-icon-pink: var(--pink-300);\r\n    }\r\n\r\n    /* ----------------Border Color --------------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-bold: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-bold: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-subtle: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-subtle: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-subtler: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-subtler: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-disabled: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-disabled: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-inverse: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-inverse: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-input: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-input: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-focus: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-focus: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger-subtle: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger-subtle: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-danger-subtler: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-danger-subtler: var(--brandRed-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning: var(--warning-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning: var(--warning-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning-subtle: var(--warning-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning-subtle: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-warning-subtler: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-warning-subtler: var(--warning-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success: var(--success-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success-subtle: var(--success-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success-subtle: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-success-subtler: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-success-subtler: var(--success-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery-bold: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery: var(--blueLight-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery-subtle: var(--blueLight-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery-subtle: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-discovery-subtler: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-discovery-subtler: var(--blueLight-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information-subtle: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information-subtle: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-information-subtler: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-information-subtler: var(--blue-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple-bold: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple: var(--purple-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple-subtle: var(--purple-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple-subtle: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-purple-subtler: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-purple-subtler: var(--purple-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink: var(--pink-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink-subtle: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink-subtle: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-border-pink-subtler: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-border-pink-subtler: var(--pink-900);\r\n    }\r\n\r\n\r\n\r\n    /* Emmanuel Kadiri starts from background color */\r\n\r\n    /* ----------------Background Color --------------- */\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-card-bold: var(--gray-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-card-bold: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-card: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-card: var(--gray-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-input: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-input: var(--gray-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-disabled: var(--gray-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-disabled: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-selected: var(--blue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-selected: var(--blue-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandRed: var(--brandRed-500);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandRed: var(--brandRed-300);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandRed-hover: var(--brandRed-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandRed-hover: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-brandRed-pressed: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-brandRed-pressed: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-bold: var(--gray-400);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-bold: var(--gray-500);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray: var(--gray-300);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray: var(--gray-600);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-subtle: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-subtle: var(--gray-700);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-subtler: var(--gray-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-subtler: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-gray-subtlest: var(--gray-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-gray-subtlest: var(--gray-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-bold: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-bold: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger: var(--brandRed-700);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-subtle: var(--brandRed-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-subtle: var(--brandRed-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-subtler: var(--brandRed-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-subtler: var(--brandRed-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-danger-subtlest: var(--brandRed-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-danger-subtlest: var(--brandRed-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-bold: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-bold: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning: var(--warning-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning: var(--warning-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-subtle: var(--warning-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-subtle: var(--warning-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-subtler: var(--warning-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-subtler: var(--warning-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-warning-subtlest: var(--warning-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-warning-subtlest: var(--warning-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-bold: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-bold: var(--success-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success: var(--success-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success: var(--success-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-subtle: var(--success-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-subtle: var(--success-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-subtler: var(--success-100); \r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-subtler: var(--success-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-success-subtlest: var(--success-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-success-subtlest: var(--success-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery-bold: var(--blueLight-800)\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-bold: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery: var(--blueLight-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery: var(--blueLight-200);\r\n    }\r\n\r\n    [data-theme=\"light\"]{\r\n        --color-background-discovery-subtle: var(--blueLight-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-subtle: var(--blueLight-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery-subtler: var(--blueLight-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-subtler: var(--blueLight-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-discovery-subtlest: var(--blueLight-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-discovery-subtlest: var(--blueLight-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-bold: var(--blue-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-bold: var(--blue-100)\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information: var(--blue-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-subtle: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtle: var(--blue-800);\r\n    }\r\n\r\n    [data-them=\"light\"] {\r\n        --color-background-information-subtler: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtler: var(--blue-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-subtlest: var(--blue-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtlest: var(--blue-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtle: var(--purple-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtle: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtler: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtler: var(--purple-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtlest: var(--purple-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtlest: var(--purple-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtle: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtle: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtler: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtler: var(--pink-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtlest: var(--purple-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtlest: var(--pink-950);\r\n    }\r\n\r\n\r\n\r\n    /* ----------------Blanket Color --------------- */\r\n    [data-theme=\"light\"] {\r\n        --color-blanket: var(--darkBlue500-opacity20);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-blanket: var(--darkBlue200-opacity20);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n    }\r\n\r\n\r\n\r\n    /* ----------------Skeleton Color --------------- */\r\n    [data-theme=\"light\"] {\r\n        --color-skeleton: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-skeleton: var(--gray-800);\r\n    }\r\n\r\n\r\n\r\n    /* ----------------Surface Color --------------- */\r\n    [data-theme=\"light\"] {\r\n        --color-surface-bold: var(--gray-25);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface-bold: var(--gray-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-surface: var(--base-white);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface: var(--gray-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-surface-hovered: var(--gray-100); \r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface-hovered: var(--gray-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-surface-pressed: var(--gray-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-surface-pressed: var(--gray-700);\r\n    }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root{\r\n    --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n    --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n    --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n    --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n    --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n    --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);   \r\n    --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n    --blur-sm: blur(4px);\r\n    --blur-md: blur(8px);\r\n    --blur-lg: blur(12px);\r\n    --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs{\r\n    box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm{\r\n    box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md{\r\n    box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg{\r\n    box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl{\r\n    box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl{\r\n    box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl{\r\n    box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm{\r\n    backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md{\r\n    backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg{\r\n    backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl{\r\n    backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n\r\n/* -----------------Gradients----------------- */\r\n:root{\r\n    /* Gray Gradients */\r\n    /* --gray-gradient-600: linear-gradient(); */\r\n    --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n    --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n    --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n    --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n    --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n    --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n    /* Brand Dark Blue Gradients */\r\n    --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n    --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n    --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n    --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n    --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n    --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n    /* Brand Red Gradients */\r\n    --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n    --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n    --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n    --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n    --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n    --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n    /* Blue Gradients */\r\n    --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n    --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n    --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n    --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n    --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n    --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n    background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n    background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n    background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n    background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n    background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n    background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d{\r\n    background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d{\r\n    background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d{\r\n    background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d{\r\n    background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d{\r\n    background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d{\r\n    background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d{\r\n    background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d{\r\n    background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d{\r\n    background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d{\r\n    background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d{\r\n    background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d{\r\n    background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d{\r\n    background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d{\r\n    background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d{\r\n    background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d{\r\n    background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d{\r\n    background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d{\r\n    background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n:root{\r\n    /* h1, p {\r\n        font-size: 1.75rem;\r\n        line-height: 1.25rem;\r\n    }\r\n      \r\n    h1::before, p::before{\r\n        content: \"\";\r\n        margin-bottom: -0.005em;\r\n        display: table;\r\n    }\r\n      \r\n    h1::after, p::after {\r\n        content: \"\";\r\n        margin-top: -0.025em;\r\n        display: table;\r\n    } */\r\n}\r\n:root{\r\n    /* Positive spacing */\r\n    --spacing-none: 0rem;\r\n    --spacing-half: 0.125rem;\r\n    --spacing-1: 0.25rem;\r\n    --spacing-2: 0.5rem;\r\n    --spacing-3: 0.75rem;\r\n    --spacing-4: 1rem;\r\n    --spacing-5: 1.25rem;\r\n    --spacing-6: 1.5rem;\r\n    --spacing-7: 2rem;\r\n    --spacing-8: 2.5rem;\r\n    --spacing-12: 3rem;\r\n    --spacing-16: 4rem;\r\n    --spacing-20: 5rem;\r\n    --spacing-24: 6rem;\r\n    --spacing-32: 8rem;\r\n    --spacing-40: 10rem;\r\n    --spacing-48: 12rem;\r\n    --spacing-56: 14rem;\r\n    --spacing-64: 16rem;\r\n\r\n    /* Negative spacing */\r\n\r\n    --spacing-negative-half: -0.125rem;\r\n    --spacing-negative-1: -0.25rem;\r\n    --spacing-negative-2: -0.5rem;\r\n    --spacing-negative-3: -0.75rem;\r\n    --spacing-negative-4: -1rem;\r\n    --spacing-negative-5: -1.25rem;\r\n    --spacing-negative-6: -1.5rem;\r\n    --spacing-negative-7: -2rem;\r\n\r\n    /* Radius  */\r\n    --rounded-none: 0rem;\r\n    --rounded-xs: 0.25rem;\r\n    --rounded-sm: 0.5rem;\r\n    --rounded-md: 0.75rem;\r\n    --rounded-lg: 1rem;\r\n    --rounded-xl: 1.5rem;\r\n    --rounded-2xl: 2rem;\r\n    --rounded-full: 62.438rem;\r\n}\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root{\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 4.5rem;\r\n    --font-size-d-xl: 3.75rem;\r\n    --font-size-d-lg: 3rem;\r\n    --font-size-d-md: 2.25rem;\r\n    --font-size-d-sm: 1.875rem;\r\n    --font-size-d-xs: 1.5rem;\r\n    --font-size-t-xl: 1.25rem;\r\n    --font-size-t-lg: 1.125rem;\r\n    --font-size-t-md: 1rem;\r\n    --font-size-t-sm: 0.875rem;\r\n    --font-size-t-xs: 0.75rem;\r\n    --font-size-t-xxs: 0.625rem;\r\n\r\n    /* Font Weights */\r\n    --font-weight-bold: 700;\r\n    --font-weight-semi-bold: 600;\r\n    --font-weight-medium: 500;\r\n    --font-weight-regular: 400; \r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 5rem;\r\n    --font-line-height-d-xl: 4.25rem;\r\n    --font-line-height-d-lg: 3.75rem;\r\n    --font-line-height-d-md: 2.75rem;\r\n    --font-line-height-d-sm: 2.375rem;   \r\n    --font-line-height-d-xs: 2rem;   \r\n    --font-line-height-t-xl: 1.875rem;\r\n    --font-line-height-t-lg: 1.688rem;\r\n    --font-line-height-t-md: 1.5rem;\r\n    --font-line-height-t-sm: 1.313rem;\r\n    --font-line-height-t-xs: 1.125rem;\r\n    --font-line-height-t-xxs: 0.938rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-d-2xl: -0.09rem;\r\n    --font-letter-spacing-d-xl: -0.075rem;\r\n    --font-letter-spacing-d-lg: -0.075rem;\r\n    --font-letter-spacing-d-md: -0.045rem;\r\n    --font-letter-spacing-d-sm: 0;\r\n    --font-letter-spacing-d-xs: 0;\r\n    --font-letter-spacing-d-xxs: 0;\r\n\r\n    /* Font Families */\r\n    --font-family-title: 'Sora';\r\n    --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n    :root{\r\n        /* Font Sizes */\r\n        --font-size-d-2xl: 3.75rem;\r\n        --font-size-d-xl: 3.5rem;\r\n        --font-size-d-lg: 2.75rem;\r\n        --font-size-d-md: 2.25rem;\r\n        --font-size-d-sm: 1.875rem;\r\n        --font-size-d-xs: 1.5rem;\r\n\r\n        /* Line Heights */\r\n        --font-line-height-d-2xl: 4.25rem;\r\n        --font-line-height-d-xl: 3.75rem;\r\n        --font-line-height-d-lg: 2.4375rem;\r\n        --font-line-height-d-md: 2.75rem;\r\n        --font-line-height-d-sm: 2.375rem;\r\n        --font-line-height-d-xs: 2rem;\r\n\r\n        /* Letter Spacings */\r\n        --font-letter-spacing-2xl: -0.075rem;\r\n        --font-letter-spacing-xl: -0.065rem;\r\n        --font-letter-spacing-lg: -0.045rem;\r\n        --font-letter-spacing-md: -0.045rem;\r\n        --font-letter-spacing-sm: 0rem;\r\n        --font-letter-spacing-xs: 0rem;\r\n    }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n    :root{\r\n        /* Font Sizes */\r\n        --font-size-d-2xl: 3rem;\r\n        --font-size-d-xl: 2.5rem;\r\n        --font-size-d-lg: 2rem;\r\n        --font-size-d-md: 1.75rem;\r\n        --font-size-d-sm: 1.5rem;\r\n        --font-size-d-xs: 1.25rem;\r\n\r\n        /* Line Heights */\r\n        --font-line-height-d-2xl: 3.375rem;\r\n        --font-line-height-d-xl: 2.875rem;\r\n        --font-line-height-d-lg: 2.5rem;\r\n        --font-line-height-d-md: 2.1375rem;\r\n        --font-line-height-d-sm: 2rem;\r\n        --font-line-height-d-xs: 1.75rem;\r\n\r\n        /* Letter Spacings */\r\n        --font-letter-spacing-2xl: -0.06rem;\r\n        --font-letter-spacing-xl: -0.05rem;\r\n        --font-letter-spacing-lg: -0.045rem;\r\n        --font-letter-spacing-md: 0rem;\r\n        --font-letter-spacing-sm: 0rem;\r\n        --font-letter-spacing-xs: 0rem;\r\n    }\r\n}\r\n\r\n.display-2xl-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-2xl);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-2xl);\r\n    letter-spacing: var(--font-letter-spacing-d-2xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-2xl-bold::before{\r\n    margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after{\r\n    margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-2xl);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-2xl);\r\n    letter-spacing: var(--font-letter-spacing-d-2xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before{\r\n    margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after{\r\n    margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xl);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-xl);\r\n    letter-spacing: var(--font-letter-spacing-d-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xl-bold::before{\r\n    margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after{\r\n    margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xl);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-xl);\r\n    letter-spacing: var(--font-letter-spacing-d-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before{\r\n    margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after{\r\n    margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-lg);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-lg);\r\n    letter-spacing: var(--font-letter-spacing-d-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-lg-bold::before{\r\n    margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after{\r\n    margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-lg);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-lg);\r\n    letter-spacing: var(--font-letter-spacing-d-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before{\r\n    margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after{\r\n    margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-md);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-md);\r\n    letter-spacing: var(--font-letter-spacing-d-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-md-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-md);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-md);\r\n    letter-spacing: var(--font-letter-spacing-d-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-md-semi-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-sm);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-sm);\r\n    letter-spacing: var(--font-letter-spacing-d-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-sm-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-sm);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-sm);\r\n    letter-spacing: var(--font-letter-spacing-d-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before{\r\n    margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after{\r\n    margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-d-xs);\r\n    letter-spacing: var(--font-letter-spacing-d-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xs-bold::before{\r\n    margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after{\r\n    margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold{\r\n    font-family: var(--font-family-title);\r\n    font-size: var(--font-size-d-xs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-d-xs);\r\n    letter-spacing: var(--font-letter-spacing-d-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before{\r\n    margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after{\r\n    margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-bold::before{\r\n    margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after{\r\n    margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before{\r\n    margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after{\r\n    margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-medium::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xl);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xl);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xl-regular::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-bold::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before{\r\n    margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after{\r\n    margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-medium::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-lg);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-lg);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-lg-regular::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-bold::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-semi-bold::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-medium::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-md);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-md);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-md-regular::before{\r\n    margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after{\r\n    margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-bold::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after{\r\n    margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n    margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n    margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-sm);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-sm);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    position: relative;\r\n    display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n    margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n    margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before{\r\n    margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-medium::before{\r\n    margin-bottom: -0.199em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n    margin-top: -0.196em;\r\n}\r\n\r\n.text-xs-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n    margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-medium::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-regular::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.checkbox_group_item {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  background-color: #f0f7ff;\r\n  border: 0.0625rem solid #cce0ff;\r\n  border-radius: 0.5rem;\r\n  padding: 1rem;\r\n  margin-bottom: 0.5rem;\r\n  transition: all 0.1s ease-in-out;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-md);\r\n}\r\n\r\n.checkbox_group_item .avatar {/* this is correct*/\r\n  flex: 1 0 0;\r\n  margin-top: 0.5rem;\r\n  border-radius: 12.5rem;\r\n  border: 0.5px solid var(--color-blanket-subtler);\r\n} \r\n\r\n\r\n.checkbox_group_item.selected {\r\n  border: 2px solid var(--color-border-selected,#075DB2);/* Checked border color */\r\n  background: var(--color-background-information-subtlest,#E4F0FC);/* Checked background color */\r\n}\r\n\r\n\r\n/* i'm using this to apply the hover effect but its turning white on hover??? */\r\n.checkbox_group_item:hover {\r\n  background: var(--color-background-information-subtler,#C8E0F9); \r\n  border-color: var(--color-border-selected,#075DB2);\r\n}\r\n\r\n/* i'm using this to change icon color on hover */\r\n.checkbox_group_item:hover .icon-md,\r\n.checkbox_group_item:hover .svg-icon {\r\n  fill: var(--color-icon-information,#064E94); \r\n}\r\n\r\n.checkbox_group_item.checked {\r\n  background-color: #e6f2ff;\r\n  border-color: #0066cc;\r\n}\r\n\r\n.item-content {\r\n  display: flex;\r\n  flex: 1 0 0;\r\n  align-self: stretch;\r\n}\r\n\r\n.text-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-4);\r\n  margin-left: 1rem;\r\n  margin-top: -0.2rem;\r\n}\r\n\r\n.label-cost {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.label-cost.payment_icon {\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.label-cost span {\r\n  font-size: 1rem;\r\n  line-height: 1.2;\r\n}\r\n\r\n.checkbox_container {\r\n  margin-left: 1rem;\r\n}\r\n\r\n.icon-md {\r\n  width: 2rem; \r\n  height: 2rem;\r\n}\r\n\r\n.svg-icon {\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n\r\n.buttons{\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n/* State Styles */\r\n.checkbox_group_item.default {\r\n  border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n  background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.checkbox_group_item.default:hover{\r\n  border: 1px solid var(--color-border-selected, #075DB2);\r\n  background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.checkbox_group_item.selected{\r\n  border: 2px solid var(--color-border-selected, #075DB2);\r\n  background: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.checkbox_group_item.selected:hover .cost,\r\n.checkbox_group_item.selected:hover .supporting_text{\r\n  color: var(--color-text-information, #064E94)\r\n}\r\n\r\n.checkbox_group_item.selected:hover{\r\n  border: 2px solid var(--color-border-selected, #075DB2);\r\n  background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.checkbox_group_item.disabled{\r\n  border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.checkbox_group_item.selected.disabled{\r\n  border: 2px solid var(--color-border-disabled, #E3E8EF);\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot=\"label\"]){\r\n  color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.checkbox_group_item ::slotted([slot=\"cost\"]){\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot=\"cost\"]){\r\n  color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.checkbox_group_item ::slotted([slot=\"supporting_text\"]){\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot=\"supporting_text\"]){\r\n  color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.checkbox_group_item.disabled ::slotted([slot=\"cost\"]),\r\n.checkbox_group_item.disabled ::slotted([slot=\"label\"]),\r\n.checkbox_group_item.disabled ::slotted([slot=\"supporting_text\"]){\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}";
 const GbCheckboxGroupItemStyle0 = gbCheckboxGroupItemCss;
@@ -94,9 +94,8 @@ const GbCheckboxGroupItem$1 = /*@__PURE__*/ proxyCustomElement(class GbCheckboxG
         }
     }
     render() {
-        console.log(this.selected);
         return [
-            h("div", { key: 'c665a17b068b9ba93de074fe905a60acff0d8dfe', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''}`, onClick: () => this.toggleSelection() }, h("div", { key: 'affab9552cf222333f5f2f7689e84967c7ab9e39', class: "item-content" }, this.renderIcon(), h("div", { key: 'e0edfa4c1ae23416444425fdc6b100d97fe5d525', class: "text-container" }, h("div", { key: '1e48aae03edcac1b9a0a28588a0a3013693b1679', class: `label-cost ${this.type}` }, h("slot", { key: '769d68dc5cdd1632928c6387cfcfb75bb99d1b28', name: "label" }), this.showCost && (h("slot", { key: '8e931ffce11d945f6f74adb254020fd09d33e428', name: "cost" }))), this.type === 'payment_icon' ? (h("div", { class: "buttons" }, h("gb-button", { size: this.size, hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "Set as default")), h("gb-button", { size: this.size, hierarchy: "link_color", icon: "default", state: this.state }, h("p", null, "Edit")))) : (h("slot", { name: "supporting_text" })))), h("div", { key: '7ced61272e57a66cf6899dc97005c02bb9f6ca18', class: `checkbox_container` }, h("gb-checkbox-base", { key: 'b3f6ca21775ba7560e14a261b1170054b4201b24', type: this.type === 'radio_button' ? 'radio' : this.type === 'checkbox' ? 'checkbox' : 'check_circle', size: this.size, state: this.state, checked: this.selected }))),
+            h("div", { key: '677f08ebc46bd447daeb7abe65a13d963f806cf1', class: `checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''}`, onClick: () => this.toggleSelection() }, h("div", { key: '81e9d82ce81397297c54ae23f33ffe2421817e2b', class: "item-content" }, this.renderIcon(), h("div", { key: '9df2f0baf23d886ad978ca02c4f169b45f1cc16a', class: "text-container" }, h("div", { key: '0e49c7d1bca2842f593361b4a0d98372ff5674a6', class: `label-cost ${this.type}` }, h("slot", { key: 'c1e73a26cf82135fce3b32b1576d7ff901f3fe9d', name: "label" }), this.showCost && (h("slot", { key: '76788dcac0d14b5361de9dba3b7ba03d06d0ee92', name: "cost" }))), this.type === 'payment_icon' ? (h("div", { class: "buttons" }, h("gb-button", { size: this.size, hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "Set as default")), h("gb-button", { size: this.size, hierarchy: "link_color", icon: "default", state: this.state }, h("p", null, "Edit")))) : (h("slot", { name: "supporting_text" })))), h("div", { key: 'aef802f3e1bd9b5a1fd3aa735f7cb8f681566d0a', class: `checkbox_container` }, h("gb-checkbox-base", { key: '96d3f90d8274e0fdd4f53030a504752c01449ca1', type: this.type === 'radio_button' ? 'radio' : this.type === 'checkbox' ? 'checkbox' : 'check_circle', size: this.size, state: this.state, checked: this.selected }))),
         ];
     }
     get el() { return this; }

package/dist/components/gb-checkbox-group-item.js.map

@@ -1 +1 @@
-{"file":"gb-checkbox-group-item.js","mappings":"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","names":["GbCheckboxGroupItem"],"sources":["src/components/gb-checkbox-group-item/gb-checkbox-group-item.css?tag=gb-checkbox-group-item&encapsulation=shadow","src/components/gb-checkbox-group-item/gb-checkbox-group-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n@import './../../global/typography.css';\r\n\r\n.checkbox_group_item {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  background-color: #f0f7ff;\r\n  border: 0.0625rem solid #cce0ff;\r\n  border-radius: 0.5rem;\r\n  padding: 1rem;\r\n  margin-bottom: 0.5rem;\r\n  transition: all 0.1s ease-in-out;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-md);\r\n}\r\n\r\n.checkbox_group_item .avatar {/* this is correct*/\r\n  flex: 1 0 0;\r\n  margin-top: 0.5rem;\r\n  border-radius: 12.5rem;\r\n  border: 0.5px solid var(--color-blanket-subtler);\r\n} \r\n\r\n\r\n.checkbox_group_item.selected {\r\n  border: 2px solid var(--color-border-selected,#075DB2);/* Checked border color */\r\n  background: var(--color-background-information-subtlest,#E4F0FC);/* Checked background color */\r\n}\r\n\r\n\r\n/* i'm using this to apply the hover effect but its turning white on hover??? */\r\n.checkbox_group_item:hover {\r\n  background: var(--color-background-information-subtler,#C8E0F9); \r\n  border-color: var(--color-border-selected,#075DB2);\r\n}\r\n\r\n/* i'm using this to change icon color on hover */\r\n.checkbox_group_item:hover .icon-md,\r\n.checkbox_group_item:hover .svg-icon {\r\n  fill: var(--color-icon-information,#064E94); \r\n}\r\n\r\n.checkbox_group_item.checked {\r\n  background-color: #e6f2ff;\r\n  border-color: #0066cc;\r\n}\r\n\r\n.item-content {\r\n  display: flex;\r\n  flex: 1 0 0;\r\n  align-self: stretch;\r\n}\r\n\r\n.text-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-4);\r\n  margin-left: 1rem;\r\n  margin-top: -0.2rem;\r\n}\r\n\r\n.label-cost {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.label-cost.payment_icon {\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.label-cost span {\r\n  font-size: 1rem;\r\n  line-height: 1.2;\r\n}\r\n\r\n.checkbox_container {\r\n  margin-left: 1rem;\r\n}\r\n\r\n.icon-md {\r\n  width: 2rem; \r\n  height: 2rem;\r\n}\r\n\r\n.svg-icon {\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n\r\n.buttons{\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n/* State Styles */\r\n.checkbox_group_item.default {\r\n  border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n  background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.checkbox_group_item.default:hover{\r\n  border: 1px solid var(--color-border-selected, #075DB2);\r\n  background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.checkbox_group_item.selected{\r\n  border: 2px solid var(--color-border-selected, #075DB2);\r\n  background: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.checkbox_group_item.selected:hover .cost,\r\n.checkbox_group_item.selected:hover .supporting_text{\r\n  color: var(--color-text-information, #064E94)\r\n}\r\n\r\n.checkbox_group_item.selected:hover{\r\n  border: 2px solid var(--color-border-selected, #075DB2);\r\n  background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.checkbox_group_item.disabled{\r\n  border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.checkbox_group_item.selected.disabled{\r\n  border: 2px solid var(--color-border-disabled, #E3E8EF);\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot=\"label\"]){\r\n  color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.checkbox_group_item ::slotted([slot=\"cost\"]){\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot=\"cost\"]){\r\n  color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.checkbox_group_item ::slotted([slot=\"supporting_text\"]){\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot=\"supporting_text\"]){\r\n  color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.checkbox_group_item.disabled ::slotted([slot=\"cost\"]),\r\n.checkbox_group_item.disabled ::slotted([slot=\"label\"]),\r\n.checkbox_group_item.disabled ::slotted([slot=\"supporting_text\"]){\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport {  GeneralSizes, StateEnum, BreakPoints } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-checkbox-group-item',\r\n  styleUrl: 'gb-checkbox-group-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbCheckboxGroupItem {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: 'icon_simple' | 'avatar' | 'payment_icon' | 'radio_button' | 'checkbox';\r\n  @Prop() state: StateEnum;\r\n  @Prop() breakpoint: BreakPoints;\r\n  @Prop() showCost: boolean = false; // to control cost visibility\r\n  @Element() el: HTMLElement;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n\r\n  private getLabelSizeClass() {\r\n    switch (this.size) {\r\n      case 'md':\r\n        return 'text-lg-semi-bold';\r\n      case 'sm':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  private getCostSizeClass() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-md-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      default:\r\n        return 'text-xs-regular';\r\n    }\r\n  }\r\n\r\n  private getLabelColorClasses() {\r\n    switch(this.selected) {\r\n      case true : return 'label_selected';\r\n      case false : return 'label_not_selected';\r\n    }\r\n  }\r\n\r\n  private getCostColorClasses() {\r\n    switch(this.selected) {\r\n      case true : return 'cost_selected';\r\n      case false : return 'cost_not_selected';\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\r\n\r\n      labelSlot.classList.add(this.getLabelColorClasses());\r\n      costSlot.classList.add(this.getCostColorClasses());\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (labelSlot) {\r\n      labelSlot.classList.add(this.getLabelSizeClass());\r\n    }\r\n\r\n    if (costSlot) {\r\n      costSlot.classList.add(this.getCostSizeClass());\r\n      costSlot.classList.add(this.getCostColorClasses());\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add(this.getCostSizeClass());\r\n      supportingTextSlot.classList.add('supporting_text');\r\n    }\r\n  }\r\n\r\n  private renderIcon() {\r\n    switch (this.type) {\r\n      case 'avatar':\r\n        return (\r\n          <gb-avatar class=\"icon-md\" size=\"md\" placeholder={false} icon=\"user\">\r\n            <img src=\"build/assets/avatar_pic.jpg\" slot=\"image\"></img>\r\n          </gb-avatar>\r\n        );\r\n      case 'payment_icon':\r\n        return (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"32\" viewBox=\"0 0 46 32\" fill=\"none\">\r\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" fill=\"white\" />\r\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" stroke=\"#F8FAFC\" />\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              clip-rule=\"evenodd\"\r\n              d=\"M14.3336 21.1444H11.5872L9.52784 13.0565C9.43009 12.6845 9.22255 12.3556 8.91725 12.2006C8.15535 11.811 7.31579 11.501 6.3999 11.3446V11.0332H10.824C11.4346 11.0332 11.8925 11.501 11.9689 12.0442L13.0374 17.8782L15.7824 11.0332H18.4524L14.3336 21.1444ZM19.9789 21.1444H17.3852L19.5209 11.0332H22.1146L19.9789 21.1444ZM25.4702 13.8343C25.5465 13.2898 26.0044 12.9784 26.5387 12.9784C27.3783 12.9002 28.2928 13.0566 29.0561 13.4448L29.514 11.2678C28.7508 10.9564 27.9112 10.8 27.1493 10.8C24.6319 10.8 22.8002 12.2006 22.8002 14.1444C22.8002 15.6231 24.0977 16.3995 25.0136 16.8673C26.0044 17.3337 26.3861 17.6451 26.3097 18.1114C26.3097 18.811 25.5465 19.1224 24.7846 19.1224C23.8687 19.1224 22.9528 18.8892 22.1146 18.4997L21.6567 20.678C22.5725 21.0662 23.5634 21.2226 24.4793 21.2226C27.3019 21.2994 29.0561 19.9002 29.0561 17.8001C29.0561 15.1553 25.4702 15.0003 25.4702 13.8343ZM38.1332 21.1444L36.0738 11.0332H33.8618C33.4038 11.0332 32.9459 11.3446 32.7932 11.811L28.9797 21.1444H31.6497L32.1826 19.667H35.4632L35.7685 21.1444H38.1332ZM34.2434 13.7562L35.0053 17.5669H32.8696L34.2434 13.7562Z\"\r\n              fill=\"#172B85\"\r\n            />\r\n          </svg>\r\n        );\r\n      case 'icon_simple':\r\n      default:\r\n        return (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <path\r\n              opacity=\"0.4\"\r\n              d=\"M11.524 4.19421L9.25088 5.24491C5.75029 6.863 4 7.67204 4 9.00008C4 10.3281 5.7503 11.1372 9.25089 12.7553L11.524 13.806C13.727 14.8243 14.8285 15.3334 16 15.3334C17.1715 15.3334 18.273 14.8243 20.476 13.806L22.7491 12.7553C26.2497 11.1372 28 10.3281 28 9.00008C28 7.67204 26.2497 6.86299 22.7491 5.2449L20.476 4.19421C18.273 3.1759 17.1715 2.66675 16 2.66675C14.8285 2.66675 13.727 3.1759 11.524 4.19421Z\"\r\n              fill=\"#064E94\"\r\n            />\r\n            <path\r\n              d=\"M27.7173 14.797C27.9058 15.062 28 15.3382 28 15.6419C28 16.951 26.2497 17.7486 22.7491 19.3436L20.476 20.3794C18.273 21.3832 17.1715 21.8851 16 21.8851C14.8285 21.8851 13.727 21.3832 11.524 20.3794L9.25089 19.3436C5.7503 17.7486 4 16.951 4 15.6419C4 15.3382 4.09422 15.062 4.28267 14.797M27.1689 21.6876C27.723 22.1289 28 22.5688 28 23.0896C28 24.3987 26.2497 25.1962 22.7491 26.7913L20.476 27.827C18.273 28.8308 17.1715 29.3327 16 29.3327C14.8285 29.3327 13.727 28.8308 11.524 27.827L9.25089 26.7913C5.7503 25.1962 4 24.3987 4 23.0896C4 22.5688 4.27704 22.1289 4.83112 21.6876M9.25088 5.24491L11.524 4.19421C13.727 3.1759 14.8285 2.66675 16 2.66675C17.1715 2.66675 18.273 3.1759 20.476 4.19421L22.7491 5.2449C26.2497 6.863 28 7.67204 28 9.00008C28 10.3281 26.2497 11.1372 22.7491 12.7553L20.476 13.806C18.273 14.8243 17.1715 15.3334 16 15.3334C14.8285 15.3334 13.727 14.8243 11.524 13.806L9.25089 12.7553C5.7503 11.1372 4 10.3281 4 9.00008C4 7.67204 5.75029 6.863 9.25088 5.24491Z\"\r\n              stroke=\"#064E94\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        );\r\n    }\r\n  }\r\n\r\n  // Toggle selected state on checkbox click\r\n  private toggleSelection() {\r\n    if(this.state === 'default') {\r\n      this.selected = !this.selected;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    console.log(this.selected);\r\n    return [\r\n      <div class={`checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''}`} onClick={() => this.toggleSelection()}>\r\n        <div class=\"item-content\">\r\n          {this.renderIcon()}\r\n          <div class=\"text-container\">\r\n            <div class={`label-cost ${this.type}`}>\r\n              <slot name=\"label\"></slot>\r\n              {this.showCost && (\r\n                <slot name=\"cost\"></slot>\r\n              )}\r\n            </div>\r\n              {this.type === 'payment_icon' ? (\r\n                <div class=\"buttons\">\r\n                  <gb-button size={this.size} hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\r\n                    <p>Set as default</p>\r\n                  </gb-button>\r\n                  <gb-button size={this.size} hierarchy=\"link_color\" icon=\"default\" state={this.state}>\r\n                    <p>Edit</p>\r\n                  </gb-button>\r\n                </div>\r\n              ) : (\r\n                <slot name=\"supporting_text\"></slot>\r\n              )}\r\n          </div>\r\n        </div>\r\n        <div class={`checkbox_container`}>\r\n          <gb-checkbox-base\r\n            type={this.type === 'radio_button' ? 'radio' : this.type === 'checkbox' ? 'checkbox' : 'check_circle'}\r\n            size={this.size}\r\n            state={this.state}\r\n            checked={this.selected}\r\n          ></gb-checkbox-base>\r\n        </div>\r\n      </div>,\r\n    ];\r\n  }\r\n}\r\n"],"version":3}
+{"file":"gb-checkbox-group-item.js","mappings":"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","names":["GbCheckboxGroupItem"],"sources":["src/components/gb-checkbox-group-item/gb-checkbox-group-item.css?tag=gb-checkbox-group-item&encapsulation=shadow","src/components/gb-checkbox-group-item/gb-checkbox-group-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n@import './../../global/typography.css';\r\n\r\n.checkbox_group_item {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  background-color: #f0f7ff;\r\n  border: 0.0625rem solid #cce0ff;\r\n  border-radius: 0.5rem;\r\n  padding: 1rem;\r\n  margin-bottom: 0.5rem;\r\n  transition: all 0.1s ease-in-out;\r\n  cursor: pointer;\r\n  border-radius: var(--rounded-md);\r\n}\r\n\r\n.checkbox_group_item .avatar {/* this is correct*/\r\n  flex: 1 0 0;\r\n  margin-top: 0.5rem;\r\n  border-radius: 12.5rem;\r\n  border: 0.5px solid var(--color-blanket-subtler);\r\n} \r\n\r\n\r\n.checkbox_group_item.selected {\r\n  border: 2px solid var(--color-border-selected,#075DB2);/* Checked border color */\r\n  background: var(--color-background-information-subtlest,#E4F0FC);/* Checked background color */\r\n}\r\n\r\n\r\n/* i'm using this to apply the hover effect but its turning white on hover??? */\r\n.checkbox_group_item:hover {\r\n  background: var(--color-background-information-subtler,#C8E0F9); \r\n  border-color: var(--color-border-selected,#075DB2);\r\n}\r\n\r\n/* i'm using this to change icon color on hover */\r\n.checkbox_group_item:hover .icon-md,\r\n.checkbox_group_item:hover .svg-icon {\r\n  fill: var(--color-icon-information,#064E94); \r\n}\r\n\r\n.checkbox_group_item.checked {\r\n  background-color: #e6f2ff;\r\n  border-color: #0066cc;\r\n}\r\n\r\n.item-content {\r\n  display: flex;\r\n  flex: 1 0 0;\r\n  align-self: stretch;\r\n}\r\n\r\n.text-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-4);\r\n  margin-left: 1rem;\r\n  margin-top: -0.2rem;\r\n}\r\n\r\n.label-cost {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: row;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.label-cost.payment_icon {\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.label-cost span {\r\n  font-size: 1rem;\r\n  line-height: 1.2;\r\n}\r\n\r\n.checkbox_container {\r\n  margin-left: 1rem;\r\n}\r\n\r\n.icon-md {\r\n  width: 2rem; \r\n  height: 2rem;\r\n}\r\n\r\n.svg-icon {\r\n  width: 2rem;\r\n  height: 2rem;\r\n}\r\n\r\n.buttons{\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n/* State Styles */\r\n.checkbox_group_item.default {\r\n  border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n  background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.checkbox_group_item.default:hover{\r\n  border: 1px solid var(--color-border-selected, #075DB2);\r\n  background: var(--color-background-card, #FFFFFF);\r\n}\r\n\r\n.checkbox_group_item.selected{\r\n  border: 2px solid var(--color-border-selected, #075DB2);\r\n  background: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.checkbox_group_item.selected:hover .cost,\r\n.checkbox_group_item.selected:hover .supporting_text{\r\n  color: var(--color-text-information, #064E94)\r\n}\r\n\r\n.checkbox_group_item.selected:hover{\r\n  border: 2px solid var(--color-border-selected, #075DB2);\r\n  background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.checkbox_group_item.disabled{\r\n  border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.checkbox_group_item.selected.disabled{\r\n  border: 2px solid var(--color-border-disabled, #E3E8EF);\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot=\"label\"]){\r\n  color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.checkbox_group_item ::slotted([slot=\"cost\"]){\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot=\"cost\"]){\r\n  color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.checkbox_group_item ::slotted([slot=\"supporting_text\"]){\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.checkbox_group_item.selected ::slotted([slot=\"supporting_text\"]){\r\n  color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.checkbox_group_item.disabled ::slotted([slot=\"cost\"]),\r\n.checkbox_group_item.disabled ::slotted([slot=\"label\"]),\r\n.checkbox_group_item.disabled ::slotted([slot=\"supporting_text\"]){\r\n  color: var(--color-text-disabled, #CDD5DF);\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport {  GeneralSizes, StateEnum, BreakPoints } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-checkbox-group-item',\r\n  styleUrl: 'gb-checkbox-group-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbCheckboxGroupItem {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: 'icon_simple' | 'avatar' | 'payment_icon' | 'radio_button' | 'checkbox';\r\n  @Prop() state: StateEnum;\r\n  @Prop() breakpoint: BreakPoints;\r\n  @Prop() showCost: boolean = false; // to control cost visibility\r\n  @Element() el: HTMLElement;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n\r\n  private getLabelSizeClass() {\r\n    switch (this.size) {\r\n      case 'md':\r\n        return 'text-lg-semi-bold';\r\n      case 'sm':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  private getCostSizeClass() {\r\n    switch (this.size) {\r\n      case 'xl':\r\n        return 'text-md-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      default:\r\n        return 'text-xs-regular';\r\n    }\r\n  }\r\n\r\n  private getLabelColorClasses() {\r\n    switch(this.selected) {\r\n      case true : return 'label_selected';\r\n      case false : return 'label_not_selected';\r\n    }\r\n  }\r\n\r\n  private getCostColorClasses() {\r\n    switch(this.selected) {\r\n      case true : return 'cost_selected';\r\n      case false : return 'cost_not_selected';\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\r\n\r\n      labelSlot.classList.add(this.getLabelColorClasses());\r\n      costSlot.classList.add(this.getCostColorClasses());\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const labelSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const costSlot = this.el.querySelector('[slot=\"cost\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (labelSlot) {\r\n      labelSlot.classList.add(this.getLabelSizeClass());\r\n    }\r\n\r\n    if (costSlot) {\r\n      costSlot.classList.add(this.getCostSizeClass());\r\n      costSlot.classList.add(this.getCostColorClasses());\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add(this.getCostSizeClass());\r\n      supportingTextSlot.classList.add('supporting_text');\r\n    }\r\n  }\r\n\r\n  private renderIcon() {\r\n    switch (this.type) {\r\n      case 'avatar':\r\n        return (\r\n          <gb-avatar class=\"icon-md\" size=\"md\" placeholder={false} icon=\"user\">\r\n            <img src=\"build/assets/avatar_pic.jpg\" slot=\"image\"></img>\r\n          </gb-avatar>\r\n        );\r\n      case 'payment_icon':\r\n        return (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"46\" height=\"32\" viewBox=\"0 0 46 32\" fill=\"none\">\r\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" fill=\"white\" />\r\n            <rect x=\"0.5\" y=\"0.5\" width=\"45\" height=\"31\" rx=\"5.5\" stroke=\"#F8FAFC\" />\r\n            <path\r\n              fill-rule=\"evenodd\"\r\n              clip-rule=\"evenodd\"\r\n              d=\"M14.3336 21.1444H11.5872L9.52784 13.0565C9.43009 12.6845 9.22255 12.3556 8.91725 12.2006C8.15535 11.811 7.31579 11.501 6.3999 11.3446V11.0332H10.824C11.4346 11.0332 11.8925 11.501 11.9689 12.0442L13.0374 17.8782L15.7824 11.0332H18.4524L14.3336 21.1444ZM19.9789 21.1444H17.3852L19.5209 11.0332H22.1146L19.9789 21.1444ZM25.4702 13.8343C25.5465 13.2898 26.0044 12.9784 26.5387 12.9784C27.3783 12.9002 28.2928 13.0566 29.0561 13.4448L29.514 11.2678C28.7508 10.9564 27.9112 10.8 27.1493 10.8C24.6319 10.8 22.8002 12.2006 22.8002 14.1444C22.8002 15.6231 24.0977 16.3995 25.0136 16.8673C26.0044 17.3337 26.3861 17.6451 26.3097 18.1114C26.3097 18.811 25.5465 19.1224 24.7846 19.1224C23.8687 19.1224 22.9528 18.8892 22.1146 18.4997L21.6567 20.678C22.5725 21.0662 23.5634 21.2226 24.4793 21.2226C27.3019 21.2994 29.0561 19.9002 29.0561 17.8001C29.0561 15.1553 25.4702 15.0003 25.4702 13.8343ZM38.1332 21.1444L36.0738 11.0332H33.8618C33.4038 11.0332 32.9459 11.3446 32.7932 11.811L28.9797 21.1444H31.6497L32.1826 19.667H35.4632L35.7685 21.1444H38.1332ZM34.2434 13.7562L35.0053 17.5669H32.8696L34.2434 13.7562Z\"\r\n              fill=\"#172B85\"\r\n            />\r\n          </svg>\r\n        );\r\n      case 'icon_simple':\r\n      default:\r\n        return (\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n            <path\r\n              opacity=\"0.4\"\r\n              d=\"M11.524 4.19421L9.25088 5.24491C5.75029 6.863 4 7.67204 4 9.00008C4 10.3281 5.7503 11.1372 9.25089 12.7553L11.524 13.806C13.727 14.8243 14.8285 15.3334 16 15.3334C17.1715 15.3334 18.273 14.8243 20.476 13.806L22.7491 12.7553C26.2497 11.1372 28 10.3281 28 9.00008C28 7.67204 26.2497 6.86299 22.7491 5.2449L20.476 4.19421C18.273 3.1759 17.1715 2.66675 16 2.66675C14.8285 2.66675 13.727 3.1759 11.524 4.19421Z\"\r\n              fill=\"#064E94\"\r\n            />\r\n            <path\r\n              d=\"M27.7173 14.797C27.9058 15.062 28 15.3382 28 15.6419C28 16.951 26.2497 17.7486 22.7491 19.3436L20.476 20.3794C18.273 21.3832 17.1715 21.8851 16 21.8851C14.8285 21.8851 13.727 21.3832 11.524 20.3794L9.25089 19.3436C5.7503 17.7486 4 16.951 4 15.6419C4 15.3382 4.09422 15.062 4.28267 14.797M27.1689 21.6876C27.723 22.1289 28 22.5688 28 23.0896C28 24.3987 26.2497 25.1962 22.7491 26.7913L20.476 27.827C18.273 28.8308 17.1715 29.3327 16 29.3327C14.8285 29.3327 13.727 28.8308 11.524 27.827L9.25089 26.7913C5.7503 25.1962 4 24.3987 4 23.0896C4 22.5688 4.27704 22.1289 4.83112 21.6876M9.25088 5.24491L11.524 4.19421C13.727 3.1759 14.8285 2.66675 16 2.66675C17.1715 2.66675 18.273 3.1759 20.476 4.19421L22.7491 5.2449C26.2497 6.863 28 7.67204 28 9.00008C28 10.3281 26.2497 11.1372 22.7491 12.7553L20.476 13.806C18.273 14.8243 17.1715 15.3334 16 15.3334C14.8285 15.3334 13.727 14.8243 11.524 13.806L9.25089 12.7553C5.7503 11.1372 4 10.3281 4 9.00008C4 7.67204 5.75029 6.863 9.25088 5.24491Z\"\r\n              stroke=\"#064E94\"\r\n              stroke-width=\"1.5\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n            />\r\n          </svg>\r\n        );\r\n    }\r\n  }\r\n\r\n  // Toggle selected state on checkbox click\r\n  private toggleSelection() {\r\n    if(this.state === 'default') {\r\n      this.selected = !this.selected;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return [\r\n      <div class={`checkbox_group_item ${this.size} ${this.state} ${this.selected ? 'selected' : ''}`} onClick={() => this.toggleSelection()}>\r\n        <div class=\"item-content\">\r\n          {this.renderIcon()}\r\n          <div class=\"text-container\">\r\n            <div class={`label-cost ${this.type}`}>\r\n              <slot name=\"label\"></slot>\r\n              {this.showCost && (\r\n                <slot name=\"cost\"></slot>\r\n              )}\r\n            </div>\r\n              {this.type === 'payment_icon' ? (\r\n                <div class=\"buttons\">\r\n                  <gb-button size={this.size} hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\r\n                    <p>Set as default</p>\r\n                  </gb-button>\r\n                  <gb-button size={this.size} hierarchy=\"link_color\" icon=\"default\" state={this.state}>\r\n                    <p>Edit</p>\r\n                  </gb-button>\r\n                </div>\r\n              ) : (\r\n                <slot name=\"supporting_text\"></slot>\r\n              )}\r\n          </div>\r\n        </div>\r\n        <div class={`checkbox_container`}>\r\n          <gb-checkbox-base\r\n            type={this.type === 'radio_button' ? 'radio' : this.type === 'checkbox' ? 'checkbox' : 'check_circle'}\r\n            size={this.size}\r\n            state={this.state}\r\n            checked={this.selected}\r\n          ></gb-checkbox-base>\r\n        </div>\r\n      </div>,\r\n    ];\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/gb-checkbox-group.js

@@ -15,7 +15,7 @@ const GbCheckboxGroup$1 = /*@__PURE__*/ proxyCustomElement(class GbCheckboxGroup
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: 'c2848df780d31fe50823dadef15552670730922c', class: `checkbox_group ${this.breakpoint}` }, h("div", { key: '2dd32513588c6799cdace2938c8a56e194592f78', class: "text" })));
+        return (h("div", { key: '1a9a4924ab781f49ad4c484c775ab91791d66522', class: `checkbox_group ${this.breakpoint}` }, h("div", { key: 'c3896071b6d775e549f841d4ed135fb423ec4adc', class: "text" })));
     }
     static get style() { return GbCheckboxGroupStyle0; }
 }, [1, "gb-checkbox-group", {

package/dist/components/gb-checkbox.js

@@ -1,4 +1,4 @@
-import { G as GbCheckbox$1, d as defineCustomElement$1 } from './p-925f37a4.js';
+import { G as GbCheckbox$1, d as defineCustomElement$1 } from './p-e42cad12.js';
 
 const GbCheckbox = GbCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-collapse-button.js

@@ -1,4 +1,4 @@
-import { G as GbCollapseButton$1, d as defineCustomElement$1 } from './p-883f5915.js';
+import { G as GbCollapseButton$1, d as defineCustomElement$1 } from './p-61d2acff.js';
 
 const GbCollapseButton = GbCollapseButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-dropdown-items-with-shortcut.js

@@ -1,4 +1,4 @@
-import { G as GbDropdownShortcut, d as defineCustomElement$1 } from './p-12322f66.js';
+import { G as GbDropdownShortcut, d as defineCustomElement$1 } from './p-01a43936.js';
 
 const GbDropdownItemsWithShortcut = GbDropdownShortcut;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-file-upload-item-base.js

@@ -1,4 +1,4 @@
-import { G as GbFileUploadItemBase$1, d as defineCustomElement$1 } from './p-c4acf10a.js';
+import { G as GbFileUploadItemBase$1, d as defineCustomElement$1 } from './p-4979942e.js';
 
 const GbFileUploadItemBase = GbFileUploadItemBase$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-file-upload.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, h, F as Fragment } from './p-3d8f80e9.js';
 import { S as StateEnum } from './p-47052b60.js';
-import { d as defineCustomElement$6 } from './p-63fbf5d6.js';
-import { d as defineCustomElement$5 } from './p-fdf0b922.js';
-import { d as defineCustomElement$4 } from './p-c4acf10a.js';
-import { d as defineCustomElement$3 } from './p-51e2668d.js';
-import { d as defineCustomElement$2 } from './p-3d701766.js';
+import { d as defineCustomElement$6 } from './p-fc8afe63.js';
+import { d as defineCustomElement$5 } from './p-b0d34887.js';
+import { d as defineCustomElement$4 } from './p-4979942e.js';
+import { d as defineCustomElement$3 } from './p-57b94005.js';
+import { d as defineCustomElement$2 } from './p-31e9f7cb.js';
 
 const gbFileUploadCss = ".file_upload_div{display:flex;flex-direction:column;gap:var(--spacing-2)}.file_upload_item_base_container{display:flex;width:32rem;border-radius:var(--rounded-sm);padding:var(--spacing-6);background-color:var(--color-background-card, #ffffff);border:1px solid var(--color-border-subtler, #e3e8ef);position:relative;cursor:pointer}.file_upload_item_base_container.default:hover{border-color:var(--color-border-selected, #075DB2)}.file_upload_item_base_container.disabled{background-color:var(--color-background-disabled, #F6F8FA);border-color:var(--color-border-disabled, #E3E8EF)}.file_upload_item_base_container.md{flex-direction:row}.file_upload_item_base_container.lg{flex-direction:column}.file_upload_icon{background-color:#EEF2F6;border-radius:var(--rounded-full);display:flex;justify-content:center;align-items:center;padding:var(--spacing-3)}.file_upload_icon svg{width:var(--spacing-6);height:var(--spacing-6)}.default.md{display:flex;gap:var(--spacing-3);align-items:center}.default.lg{display:flex;flex-direction:column;gap:var(--spacing-3);align-items:center;justify-content:center}.default_content{display:flex;flex-direction:column;justify-content:center;gap:var(--spacing-2)}.upload_btn_md{position:absolute;top:45%;right:1.5rem}.disabled_text{color:var(--color-text-subtle, #697586)}.upload_text{color:var(--color-text, #4B5565)}.upload_text.lg,.disabled_text.lg{display:flex;gap:var(--spacing-1);align-items:center}.file_type_text{color:var(--color-text-subtle, #697586)}.text-sm-semi-bold{font-family:var(--font-family-body);font-size:var(--font-size-t-sm);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-t-sm);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-sm-semi-bold::before,.text-sm-semi-bold::after{content:\"\";display:table}.text-sm-semi-bold::before{margin-bottom:-0.299em}.text-sm-semi-bold::after{margin-top:-0.349em}.text-sm-regular{font-family:var(--font-family-body);font-size:var(--font-size-t-sm);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-t-sm);margin:var(--spacing-none);padding:var(--spacing-none);position:relative;display:inline-block}.text-sm-regular::before,.text-sm-regular::after{content:\"\";display:table}.text-sm-regular::before{margin-bottom:-0.299em}.text-sm-regular::after{margin-top:-0.299em}.text-xs-regular{font-family:var(--font-family-body);font-size:var(--font-size-t-xs);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-t-xs);margin:var(--spacing-none);padding:var(--spacing-none);display:inline-block;position:relative}.text-xs-regular::before,.text-xs-regular::after{content:\"\";display:table}.text-xs-regular::before{margin-bottom:-0.291em}.text-xs-regular::after{margin-top:-0.396em}";
 const GbFileUploadStyle0 = gbFileUploadCss;
@@ -23,17 +23,17 @@ const GbFileUpload$1 = /*@__PURE__*/ proxyCustomElement(class GbFileUpload exten
         this.buttonState = StateEnum.Default;
     }
     render() {
-        return (h("div", { key: '369e176d13c89c1b02666ca2aa8f4be51320ca28', class: "file_upload_div" }, this.showLabel && h("p", { key: '095bab9b563efb545ca558bf2783dbc026e3759d', class: "upload_text text-sm-semi-bold" }, "File Upload"), h(Fragment, null, this.state === 'default' && !this.destructive && (h("div", { key: 'ad381bdf933ece30fbf0d7e6959055441aed0133', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.heightSize === 'md' && [
-            h("div", { key: '62a076c3cd6809bd2a68b7b2d1a30b7ded916e29', class: `default ${this.heightSize}` }, h("div", { key: '8bb9c58f70a122e1a6714413b3242810399f7ddd', class: "file_upload_icon" }, h("svg", { key: 'dffb3c78a413c7d31e7f8ab148c822f941400c9c', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '11f5c0cf3eeea9abae5021f93fc7f43fd0a659fe', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), h("div", { key: '7e74d758d9c47bde16231507533653a6ff498750', class: "default_content" }, h("p", { key: 'f615e33e57f9a79bdcdf824d22251c795e3ee702', class: "upload_text text-sm-semi-bold" }, "Tap to upload"), h("p", { key: '5e397961fdc15e5d9082120f71484d71616a2e9e', class: "file_type_text text-xs-regular" }, "SVG, PNG, JPG or GIF (max. 800x400px)"))),
-            h("test-button", { key: '2eaf2821d4aea3705320a3848d0fb41047fc9e91', size: "sm", hierarchy: "link_color", icon: "default", class: "upload_btn_md", "icon-leading": true }, h("p", { key: 'd23ce521c26235a2396bf712b3819b77ec7ca8d4' }, "Upload")),
+        return (h("div", { key: 'dc77dcb01c04c1de9240938394bcddd8b9ab3adf', class: "file_upload_div" }, this.showLabel && h("p", { key: 'bd1c774c1488bfaf6f91b19cef19070c60f2814b', class: "upload_text text-sm-semi-bold" }, "File Upload"), h(Fragment, null, this.state === 'default' && !this.destructive && (h("div", { key: 'ec8cb7904c3e174266dd9eef5dd0b7c2fed07c1a', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.heightSize === 'md' && [
+            h("div", { key: '13ef68ab71d5d7f2c2f0206e6accfa910b4493bc', class: `default ${this.heightSize}` }, h("div", { key: '41678200d20279b7c09e085c82d5ef8db7d7d204', class: "file_upload_icon" }, h("svg", { key: '25bbe56b7a9bf9a98d53ce0655d8aded30969828', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '96b482e17f2f90ea6085e7eec0fb3d161690c087', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), h("div", { key: '5f9cf006c82bc6da6701da983a0396be485d92e7', class: "default_content" }, h("p", { key: 'e24dfd297e9820c0252141f0f74ca4eb7f6e08a3', class: "upload_text text-sm-semi-bold" }, "Tap to upload"), h("p", { key: '08648bbb33d5d52c500183c5d4e5db84affed3fb', class: "file_type_text text-xs-regular" }, "SVG, PNG, JPG or GIF (max. 800x400px)"))),
+            h("test-button", { key: '0e8739392231ada124636bceb283f124192352e2', size: "sm", hierarchy: "link_color", icon: "default", class: "upload_btn_md", "icon-leading": true }, h("p", { key: 'c982057a0dfcbab605f65d1e166efc12099a7913' }, "Upload")),
         ], this.heightSize === 'lg' && [
-            h("div", { key: '9871596b0d4f10b58a7f41747acdfe0a44542516', class: `default ${this.heightSize}` }, h("div", { key: 'ac7a03728f342ef22c5dec8e99721da3014687f1', class: "file_upload_icon" }, h("svg", { key: '522a92d8244c79ba3ce875b29aa77a0d6ba15297', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'e30abdba1190008f4648b080e6c9d6089b727dd4', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), h("div", { key: 'fc04f56bb93dbe1911c9b847f5e49bdd49bb614a', class: "default_content" }, h("p", { key: '7466255d88c9672231e6c4410e520bc910ef46cc', class: `upload_text text-sm-regular ${this.heightSize}` }, h("test-button", { key: 'e6ff9af4050842d57698f03b35f1e2caa2f74875', size: "sm", hierarchy: "link_color", icon: "default" }, h("p", { key: 'c45f69f4c0e7d41c5c05e2a216e2cc61acec9356' }, "Click to upload")), "or drag and drop"), h("p", { key: '7f3fba3473fa4d972bef5f63a36f078c184c8812', class: "file_type_text text-xs-regular" }, "SVG, PNG, JPG or GIF (max. 800x400px)"))),
-        ])), this.state === 'in_progress' && h("gb-file-upload-item-base", { key: '5b21d920ecdcda1db038ac3832074ab1f065f3b5', "height-size": this.heightSize, state: "in_progress" }), this.state === 'complete' && h("gb-file-upload-item-base", { key: '9ac3521ac68565a0aae8d6630102b84221c0ca17', "height-size": this.heightSize, state: "complete" }), this.state === 'disabled' && (h("div", { key: '472a1c18c9af2c0f093f495c5e58ead152fe57c5', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, h("div", { key: '504990962b921a63906f0c0d811b2affd77828bf', class: `disabled ${this.state}` }, this.heightSize === 'md' && [
-            h("div", { key: 'cf3cf06495e145c4708960663eac5a22a7a859a8', class: `default ${this.heightSize}` }, h("div", { key: '5d2a305bfa0793db73bcc5057a758cc01465fbd2', class: "file_upload_icon" }, h("svg", { key: 'dfa011fec322cb88d24e9db3f2d22e7d629cc5cc', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '936e6ed161ba31bd5f7d37567c7e29e49b8f748f', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), h("div", { key: 'f5f2e5b7a522e003d6f1add835c15a524280601f', class: "default_content" }, h("p", { key: '0e141e60bbf6dc4c8107372222cc2a15423998f8', class: "disabled_text text-sm-semi-bold" }, "Tap to upload"), h("p", { key: 'e731ed228891230737273fbe50b1b1fac1665818', class: "disabled_text text-xs-regular" }, "SVG, PNG, JPG or GIF (max. 800x400px)"))),
-            h("test-button", { key: '0acfaabd544dab21eac60631b0ea94e0937af37b', size: "sm", hierarchy: "link_color", icon: "default", class: "upload_btn_md", state: StateEnum.Disabled }, h("p", { key: '828edcadd57f7e78d3be4b8f81d498895968405b' }, "Upload")),
+            h("div", { key: 'bade60a6caae61eaf583928abce0dfe339b29ae5', class: `default ${this.heightSize}` }, h("div", { key: '1d079b83075d0f53138f49a66141f39171ba6e05', class: "file_upload_icon" }, h("svg", { key: '5ffa19fe3f0b06668ec9a212f96f07d816322883', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '680e25bdc88a7fb49ec266498748e3ed9e62ff3f', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), h("div", { key: 'ad47fc2be2f6c825f39f9912d80ad80de7ab206a', class: "default_content" }, h("p", { key: '896844d2c3e816881cb86aaa32a6e2ce9a45bb46', class: `upload_text text-sm-regular ${this.heightSize}` }, h("test-button", { key: 'd3627ae16cbb3ae453a25b25a522623c6330595d', size: "sm", hierarchy: "link_color", icon: "default" }, h("p", { key: '20ca89937c227d0b96c07829c47d86a89473aeb0' }, "Click to upload")), "or drag and drop"), h("p", { key: 'ba9307d8731ac9b953d402ceb9fbbb1cebb12c4c', class: "file_type_text text-xs-regular" }, "SVG, PNG, JPG or GIF (max. 800x400px)"))),
+        ])), this.state === 'in_progress' && h("gb-file-upload-item-base", { key: '5062200f8d6ef0573b2ac4ddf8d94126eeda5b81', "height-size": this.heightSize, state: "in_progress" }), this.state === 'complete' && h("gb-file-upload-item-base", { key: 'a122bfd17517286379c049bf166b4bff7d3f388d', "height-size": this.heightSize, state: "complete" }), this.state === 'disabled' && (h("div", { key: 'f60e12772f56b0d977e1d439c27af9582d89cae3', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, h("div", { key: '5c486885832cdbb66a45d179c5c2c4d6ea0c852f', class: `disabled ${this.state}` }, this.heightSize === 'md' && [
+            h("div", { key: 'ea22cfd1105aa09a194e0d594e1a56fd6e640790', class: `default ${this.heightSize}` }, h("div", { key: '3f4994417681042cee6f86abbc8f7a649a676eb7', class: "file_upload_icon" }, h("svg", { key: 'abc80f841fdd256eed71e0584bd81df65b00eaed', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '4a984a38ce590973da38d59d276fd1c728a470b8', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), h("div", { key: 'f9fe54a50f2a034df93fb2ca6150bab5ee373436', class: "default_content" }, h("p", { key: 'c67c8577ebdd93bfa59506a52eb49aad87e1b89d', class: "disabled_text text-sm-semi-bold" }, "Tap to upload"), h("p", { key: '89a84c6523fc4173d84b47819e175ec62958e07a', class: "disabled_text text-xs-regular" }, "SVG, PNG, JPG or GIF (max. 800x400px)"))),
+            h("test-button", { key: '84877760f23cc21a4a674ed2cab6fbc6f339634b', size: "sm", hierarchy: "link_color", icon: "default", class: "upload_btn_md", state: StateEnum.Disabled }, h("p", { key: '2e71ac53f908d3249d5917c5af8578f48864b856' }, "Upload")),
         ], this.heightSize === 'lg' && [
-            h("div", { key: '6ece8f1129bb104fbd3836f94ce25b924e24fd2c', class: `default ${this.heightSize}` }, h("div", { key: '0e4181fe89cf8569a12971632eed602a46c6e97a', class: "file_upload_icon" }, h("svg", { key: '26b902dc5bbcf3a0a1de5366f77146606d5fea94', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: '7bdc188b73c77225bbb592b66eb8b1231f61a897', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), h("div", { key: '6a1881c06386667dd3866424f4838be27eb17836', class: "default_content" }, h("p", { key: '1acd64bf54d407d376891060747d1061198a59f6', class: `disabled_text text-sm-regular ${this.heightSize}` }, h("test-button", { key: 'f92b417fd0edc5aea29afdeca02cffab5514327e', size: "sm", hierarchy: "link_color", icon: "default", state: StateEnum.Disabled }, h("p", { key: '0113be89158a886f34213cd16e615b6f78fc6248' }, "Click to upload")), "or drag and drop"), h("p", { key: '071e5202548921e6da25a604a8117c64a02c7444', class: "disabled_text text-xs-regular" }, "SVG, PNG, JPG or GIF (max. 800x400px)"))),
-        ]))), this.destructive && h("gb-file-upload-item-base", { key: '57f628aa431aa9b243efb71bf989802356bcc61a', state: "error", "height-size": this.heightSize }))));
+            h("div", { key: 'd1904301b524700d05aac7bb955818251273a5c2', class: `default ${this.heightSize}` }, h("div", { key: 'dd8eda239ae249ffa1d70fe77ec1fe7d38803001', class: "file_upload_icon" }, h("svg", { key: '66ea70a6a112a2031183133f23b1304081f6c75c', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { key: 'b7a6bdba2c43bae20c0cc9ebb992534139121469', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), h("div", { key: '4f0c6ad0a2f4f8cdf9cd1d56e6e43aa29c00aa30', class: "default_content" }, h("p", { key: '8c1ddfa7828c7f5c2ef1d9aae8aaa0db5c3771c7', class: `disabled_text text-sm-regular ${this.heightSize}` }, h("test-button", { key: '25497e9aa70cb3b4c630888f5dd0fe2e6c833782', size: "sm", hierarchy: "link_color", icon: "default", state: StateEnum.Disabled }, h("p", { key: '74de6fa0b0d0f2922a42d0c3d27718a1a88d0ecb' }, "Click to upload")), "or drag and drop"), h("p", { key: '4618f507f639af0e4da959177ac5afd65ebdde40', class: "disabled_text text-xs-regular" }, "SVG, PNG, JPG or GIF (max. 800x400px)"))),
+        ]))), this.destructive && h("gb-file-upload-item-base", { key: 'f472478b94f5bd3ef1e3b7d73cb335129f8b3bab', state: "error", "height-size": this.heightSize }))));
     }
     static get style() { return GbFileUploadStyle0; }
 }, [1, "gb-file-upload", {

package/dist/components/gb-header-icon.js

@@ -1,4 +1,4 @@
-import { G as GbHeaderIcon$1, d as defineCustomElement$1 } from './p-1827cb1a.js';
+import { G as GbHeaderIcon$1, d as defineCustomElement$1 } from './p-763387fe.js';
 
 const GbHeaderIcon = GbHeaderIcon$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-header.js

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h } from './p-3d8f80e9.js';
+import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-3d8f80e9.js';
 import { S as StateEnum } from './p-47052b60.js';
-import { d as defineCustomElement$5 } from './p-837365c7.js';
-import { d as defineCustomElement$4 } from './p-21fecbde.js';
-import { d as defineCustomElement$3 } from './p-1827cb1a.js';
-import { d as defineCustomElement$2 } from './p-9a07bbad.js';
+import { d as defineCustomElement$5 } from './p-2522e0e6.js';
+import { d as defineCustomElement$4 } from './p-5fbe4056.js';
+import { d as defineCustomElement$3 } from './p-763387fe.js';
+import { d as defineCustomElement$2 } from './p-4c21ca28.js';
 
 const gbHeaderCss = ".header_div{display:flex;flex-direction:column;align-items:center;border-bottom:0.7px solid var(--color-border-subtle, #CDD5DF);background:var(--color-surface, #FFFFFF)}.content{display:flex;height:4.5rem;padding:0rem 2rem;justify-content:space-between;align-items:center;align-self:stretch}.inner_content{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-Positive-spacing-4, 1rem);flex:1 0 0}";
 const GbHeaderStyle0 = gbHeaderCss;
@@ -25,7 +25,9 @@ const GbHeader$1 = /*@__PURE__*/ proxyCustomElement(class GbHeader extends H {
         }
     }
     render() {
-        return (h("div", { key: '53f1bf3c88cc2dbda3c53366f8d4fd7ea5c7f7ec', class: `header_div` }, h("div", { key: 'd26bf028e7ec21e1b1ea0f6b0d00cc789248f00a', class: "content" }, h("div", { key: '7974b6405e5c8904a663f8031b540114cb9758e5', class: "inner_content" }, h("gb-header-icon", { key: '82c7298f647b0f82a9dc1066d771b9d53cb7a2cf', state: StateEnum.Default, icon: "build/assets/help-circle.svg" }), h("gb-header-icon", { key: '89734921a668399151659a331d9909dfdddc5576', state: this.state, icon: "build/assets/notification-03.svg", "show-indicator": this.showIndicator }), h("gb-avatar", { key: 'af3d865e923684506d4c8cb5712a4a5a3c0d2370', size: "md", text: this.text, placeholder: this.placeholder }, this.text ? (h("slot", { slot: "initials", name: "initials" })) : (h("slot", { name: "image", slot: "image" })))))));
+        const helpIconSrc = getAssetPath(`assets/help-circle.svg`);
+        const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
+        return (h("div", { key: 'd622dc60519caf801e7e9437e959fe8870a8fe39', class: `header_div` }, h("div", { key: 'f285b6e756cfed348ebe62f3c9ec3bef302e356d', class: "content" }, h("div", { key: 'd5179a24d292a51191d2d60580c502c413854e4a', class: "inner_content" }, h("gb-header-icon", { key: 'f2ae78eb0784d65b7277225efe6f20e59a975a05', state: StateEnum.Default, icon: helpIconSrc }), h("gb-header-icon", { key: 'daa652b2861ba93a65e8700ac2724e2e980baf2b', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator }), h("gb-avatar", { key: 'dd23d14a9e5039d3f7c5ec7ceeea0d100f7d5d12', size: "md", text: this.text, placeholder: this.placeholder }, this.text ? (h("slot", { slot: "initials", name: "initials" })) : (h("slot", { name: "image", slot: "image" })))))));
     }
     get el() { return this; }
     static get style() { return GbHeaderStyle0; }

package/dist/components/gb-header.js.map

@@ -1 +1 @@
-{"file":"gb-header.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,oaAAoa,CAAC;AACzb,uBAAe,WAAW;;MCObA,UAAQ;;;;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;IAGpC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;SAC7C;KACF;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,YAAY,IACtB,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,eAAe,IACxB,uEAAgB,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAC,8BAA8B,GAAkB,EAC/F,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,kCAAkC,oBAAiB,IAAI,CAAC,aAAa,GAAmB,EAChI,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAChE,IAAI,CAAC,IAAI,IAAI,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,KAAK,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAAC,CAC9F,CACR,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbHeader"],"sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":[".header_div{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center; \r\n    border-bottom: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.content{\r\n    display: flex;\r\n    height: 4.5rem;\r\n    padding: 0rem 2rem;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    align-self: stretch;\r\n}\r\n\r\n.inner_content{\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    gap: var(--spacing-Positive-spacing-4, 1rem);\r\n    flex: 1 0 0;\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() placeholder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`header_div`}>\r\n        <div class=\"content\">\r\n          <div class=\"inner_content\">\r\n            <gb-header-icon state={StateEnum.Default} icon=\"build/assets/help-circle.svg\"></gb-header-icon>\r\n            <gb-header-icon state={this.state} icon=\"build/assets/notification-03.svg\" show-indicator={this.showIndicator}></gb-header-icon>\r\n            <gb-avatar size=\"md\" text={this.text} placeholder={this.placeholder}>\r\n              {this.text ? (<slot slot=\"initials\" name=\"initials\"></slot>) : (<slot name=\"image\" slot=\"image\"></slot>)}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}
+{"file":"gb-header.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,oaAAoa,CAAC;AACzb,uBAAe,WAAW;;MCObA,UAAQ;;;;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;IAGpC,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;SAC7C;KACF;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,mBAAmB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QAEvE,QACE,4DAAK,KAAK,EAAE,YAAY,IACtB,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,eAAe,IACxB,uEAAgB,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,WAAW,GAAmB,EAC9E,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,mBAAmB,oBAAkB,IAAI,CAAC,aAAa,GAAmB,EACnH,kEAAW,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,IAChE,IAAI,CAAC,IAAI,IAAI,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,KAAK,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAAC,CAC9F,CACR,CACF,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbHeader"],"sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":[".header_div{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center; \r\n    border-bottom: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.content{\r\n    display: flex;\r\n    height: 4.5rem;\r\n    padding: 0rem 2rem;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    align-self: stretch;\r\n}\r\n\r\n.inner_content{\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    gap: var(--spacing-Positive-spacing-4, 1rem);\r\n    flex: 1 0 0;\r\n}","import { Component, Element, getAssetPath, h, Prop } from \"@stencil/core\";\r\nimport { StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-header',\r\n  styleUrl: 'gb-header.css',\r\n  shadow: true,\r\n})\r\nexport class GbHeader {\r\n  @Prop() state: StateEnum;\r\n  @Prop() showIndicator: boolean = false;\r\n  @Prop() text: boolean = false;\r\n  @Prop() placeholder: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  componentDidLoad() {\r\n    const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n    if (initials) {\r\n      initials.classList.add('text-md-semi-bold');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n    const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n    return (\r\n      <div class={`header_div`}>\r\n        <div class=\"content\">\r\n          <div class=\"inner_content\">\r\n            <gb-header-icon state={StateEnum.Default} icon={helpIconSrc}></gb-header-icon>\r\n            <gb-header-icon state={this.state} icon={notificationIconSrc} show-indicator={this.showIndicator}></gb-header-icon>\r\n            <gb-avatar size=\"md\" text={this.text} placeholder={this.placeholder}>\r\n              {this.text ? (<slot slot=\"initials\" name=\"initials\"></slot>) : (<slot name=\"image\" slot=\"image\"></slot>)}\r\n            </gb-avatar>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}