npm - globuswebcomponents - Versions diffs - 0.4.2 → 0.4.5 - Mend

globuswebcomponents 0.4.2 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (297) hide show

package/dist/components/{p-57b94005.js → p-55139c08.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, F as Fragment } from './p-3d8f80e9.js';
-import { d as defineCustomElement$1 } from './p-31e9f7cb.js';
+import { d as defineCustomElement$1 } from './p-a48f3765.js';
 const gbProgressBarCss = ":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:host{\r\n  display: block;\r\n  width: 100%;\r\n}\r\n\r\n.progress_bar_container {\r\n  background-color: transparent;\r\n  display: flex;\r\n  align-items: center;\r\n  align-items: stretch;\r\n  gap: var(--spacing-3);\r\n  width: 100%;\r\n  height: fit-content;\r\n  position: relative;\r\n}\r\n\r\n.progress_bar {\r\n  position: relative;\r\n  height: 0.4rem;\r\n  width: 100%;\r\n  background: var(--color-border-subtler, #e3e8ef);\r\n  border-radius: var(--rounded-xs);\r\n}\r\n\r\n.progress_fill {\r\n  position: absolute;\r\n  height: 100%;\r\n  width: 0%;\r\n  background: var(--color-border-selected, #075db2);\r\n  border-radius: 15px;\r\n  transition: width 0.5s ease-in-out;\r\n}\r\n\r\n.label {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n/* Label Position Styles */\r\n.progress_bar_container.right {\r\n  flex-direction: row;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.progress_bar_container.bottom,\r\n.progress_bar_container.bottom_floating {\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.progress_bar_container.top_floating {\r\n  flex-direction: column-reverse;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.label.bottom {\r\n  align-self: flex-end;\r\n}\r\n\r\n.label.top_floating {\r\n  align-self: flex-start;\r\n}\r\n\r\n.top_tooltip {\r\n  position: absolute;\r\n  top: -2.2rem;\r\n}\r\n\r\n.bottom_tooltip {\r\n  position: absolute;\r\n  top: 1rem;\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-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";
 const GbProgressBarStyle0 = gbProgressBarCss;
@@ -16,7 +16,7 @@ const GbProgressBar = /*@__PURE__*/ proxyCustomElement(class GbProgressBar exten
     }
     render() {
         const progressValue = Math.min(Math.max(this.progress, 0), 100);
-        return (h("div", { key: '2ca4f762f24955fb8064942a386d1ba6f03de282', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: '114e0d306dfdd04941f64ca75fa52833c60ac575', class: "progress_bar" }, h("div", { key: '0f17f894ef4d021e18e03b49658b31e991701cc0', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: 'c18f2ffd256e33a2893c82f76284be01c9de328d', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: 'bf470f3960033d7ecb5d16f7111af15d03d3c367', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: 'a9e50807a951ec9a156bea03167fcbe1b490fd3e', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: 'de4b8184c62c31403631c7c9faf07cd284b1c738', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: '3a21082cc1e4bc34b4b31c845cd4e46310a5f426', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: 'fb1d3844c69c5ca0e37e6543a0298243ac25cb8d', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: 'a2aa5a4309f46ec677b99429460e4c02cf355e45', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
+        return (h("div", { key: 'd56efb6ae31a357ad3ff535c8cc3d2e704c50cd2', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: 'eb61bfa60cb024bcd4045e575de16aa02f6cf909', class: "progress_bar" }, h("div", { key: '4a05bf03f29213f0a451e4508e981bee7a42d288', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: '90aef6236ce18a629cddb50ad8bd24907cf5ba40', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: '6da1df60d24ea6f02df30f7cd499ab5c0a528ccf', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: 'bc94f29e221b6bf4a7cd455c9aaf73459400be8f', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: '68f5e192e9c95727ba392ff27b7dae9d7bc6f122', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: 'abea897c2cfff180157ad8c10db7efdca68ab059', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: '1c1e9d759a9d86d86d3d3a1afb9db158ec83a444', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: 'cc6e42cf274e3f8c0cd4b385afcc6d7facc2c012', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
     }
     static get style() { return GbProgressBarStyle0; }
 }, [1, "gb-progress-bar", {
@@ -47,4 +47,4 @@ defineCustomElement();
 export { GbProgressBar as G, defineCustomElement as d };
-//# sourceMappingURL=p-57b94005.js.map
+//# sourceMappingURL=p-55139c08.js.map

package/dist/components/{p-57b94005.js.map → p-55139c08.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~57b94005~~.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,mq8CAAmq8C,CAAC;AAC7r8C,4BAAe,gBAAgB;;MCMlB,aAAa;;;;;;yBAEK,KAAK;;;;IAIlC,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAEhE,QACE,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,aAAa,EAAE,IACxD,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,aAAa,GAAG,EAAE,GAAQ,CACpE,EACN,kBACG,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,aAAa,EAAE,IACtC,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,6DAAM,KAAK,EAAE,gBAAgB,IAAG,aAAa,MAAS,EACxF,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,6DAAM,KAAK,EAAE,gBAAgB,IAAG,aAAa,MAAS,EACzF,IAAI,CAAC,aAAa,KAAK,cAAc,KACpC,mEAAY,KAAK,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAC1G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB,IAC1C,aAAa,MACZ,CACO,CACd,EACA,IAAI,CAAC,aAAa,KAAK,iBAAiB,KACvC,mEAAY,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAC9G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB,IAC1C,aAAa,MACZ,CACO,CACd,CACG,CACP,CACA,CACC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-progress-bar/gb-progress-bar.css?tag=gb-progress-bar&encapsulation=shadow","src/components/gb-progress-bar/gb-progress-bar.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n:host{\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.progress_bar_container {\r\n background-color: transparent;\r\n display: flex;\r\n align-items: center;\r\n align-items: stretch;\r\n gap: var(--spacing-3);\r\n width: 100%;\r\n height: fit-content;\r\n position: relative;\r\n}\r\n\r\n.progress_bar {\r\n position: relative;\r\n height: 0.4rem;\r\n width: 100%;\r\n background: var(--color-border-subtler, #e3e8ef);\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.progress_fill {\r\n position: absolute;\r\n height: 100%;\r\n width: 0%;\r\n background: var(--color-border-selected, #075db2);\r\n border-radius: 15px;\r\n transition: width 0.5s ease-in-out;\r\n}\r\n\r\n.label {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/* Label Position Styles */\r\n.progress_bar_container.right {\r\n flex-direction: row;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.progress_bar_container.bottom,\r\n.progress_bar_container.bottom_floating {\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.progress_bar_container.top_floating {\r\n flex-direction: column-reverse;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.label.bottom {\r\n align-self: flex-end;\r\n}\r\n\r\n.label.top_floating {\r\n align-self: flex-start;\r\n}\r\n\r\n.top_tooltip {\r\n position: absolute;\r\n top: -2.2rem;\r\n}\r\n\r\n.bottom_tooltip {\r\n position: absolute;\r\n top: 1rem;\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-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","import { Component, Prop, h, Fragment } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-progress-bar',\r\n styleUrl: 'gb-progress-bar.css',\r\n shadow: true,\r\n})\r\nexport class GbProgressBar {\r\n @Prop() progress: number;\r\n @Prop() showLabel: boolean = false;\r\n @Prop() labelPosition: 'right' \| 'bottom' \| 'top_floating' \| 'bottom_floating';\r\n @Prop() el: HTMLElement;\r\n\r\n render() {\r\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\r\n\r\n return (\r\n <div class={`progress_bar_container ${this.labelPosition}`}>\r\n <div class=\"progress_bar\">\r\n <div class=\"progress_fill\" style={{ width: `${progressValue}%` }}></div>\r\n </div>\r\n <>\r\n {this.showLabel && (\r\n <div class={`label ${this.labelPosition}`}>\r\n {this.labelPosition === 'right' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n {this.labelPosition === 'bottom' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n {this.labelPosition === 'top_floating' && (\r\n <gb-tooltip class={`top_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 6.5).toString()}%` }}>\r\n <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n {progressValue}%\r\n </p>\r\n </gb-tooltip>\r\n )}\r\n {this.labelPosition === 'bottom_floating' && (\r\n <gb-tooltip class={`bottom_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 59.5).toString()}%` }}>\r\n <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n {progressValue}%\r\n </p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
1	+ {"file":"p-55139c08.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,mq8CAAmq8C,CAAC;AAC7r8C,4BAAe,gBAAgB;;MCMlB,aAAa;;;;;;yBAEK,KAAK;;;;IAIlC,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAEhE,QACE,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,aAAa,EAAE,IACxD,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,aAAa,GAAG,EAAE,GAAQ,CACpE,EACN,kBACG,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,aAAa,EAAE,IACtC,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,6DAAM,KAAK,EAAE,gBAAgB,IAAG,aAAa,MAAS,EACxF,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,6DAAM,KAAK,EAAE,gBAAgB,IAAG,aAAa,MAAS,EACzF,IAAI,CAAC,aAAa,KAAK,cAAc,KACpC,mEAAY,KAAK,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,IAC1G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB,IAC1C,aAAa,MACZ,CACO,CACd,EACA,IAAI,CAAC,aAAa,KAAK,iBAAiB,KACvC,mEAAY,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAC9G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB,IAC1C,aAAa,MACZ,CACO,CACd,CACG,CACP,CACA,CACC,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-progress-bar/gb-progress-bar.css?tag=gb-progress-bar&encapsulation=shadow","src/components/gb-progress-bar/gb-progress-bar.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n:host{\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.progress_bar_container {\r\n background-color: transparent;\r\n display: flex;\r\n align-items: center;\r\n align-items: stretch;\r\n gap: var(--spacing-3);\r\n width: 100%;\r\n height: fit-content;\r\n position: relative;\r\n}\r\n\r\n.progress_bar {\r\n position: relative;\r\n height: 0.4rem;\r\n width: 100%;\r\n background: var(--color-border-subtler, #e3e8ef);\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.progress_fill {\r\n position: absolute;\r\n height: 100%;\r\n width: 0%;\r\n background: var(--color-border-selected, #075db2);\r\n border-radius: 15px;\r\n transition: width 0.5s ease-in-out;\r\n}\r\n\r\n.label {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/* Label Position Styles */\r\n.progress_bar_container.right {\r\n flex-direction: row;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.progress_bar_container.bottom,\r\n.progress_bar_container.bottom_floating {\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.progress_bar_container.top_floating {\r\n flex-direction: column-reverse;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.label.bottom {\r\n align-self: flex-end;\r\n}\r\n\r\n.label.top_floating {\r\n align-self: flex-start;\r\n}\r\n\r\n.top_tooltip {\r\n position: absolute;\r\n top: -2.2rem;\r\n}\r\n\r\n.bottom_tooltip {\r\n position: absolute;\r\n top: 1rem;\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-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","import { Component, Prop, h, Fragment } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'gb-progress-bar',\r\n styleUrl: 'gb-progress-bar.css',\r\n shadow: true,\r\n})\r\nexport class GbProgressBar {\r\n @Prop() progress: number;\r\n @Prop() showLabel: boolean = false;\r\n @Prop() labelPosition: 'right' \| 'bottom' \| 'top_floating' \| 'bottom_floating';\r\n @Prop() el: HTMLElement;\r\n\r\n render() {\r\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\r\n\r\n return (\r\n <div class={`progress_bar_container ${this.labelPosition}`}>\r\n <div class=\"progress_bar\">\r\n <div class=\"progress_fill\" style={{ width: `${progressValue}%` }}></div>\r\n </div>\r\n <>\r\n {this.showLabel && (\r\n <div class={`label ${this.labelPosition}`}>\r\n {this.labelPosition === 'right' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n {this.labelPosition === 'bottom' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n {this.labelPosition === 'top_floating' && (\r\n <gb-tooltip class={`top_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 6.5).toString()}%` }}>\r\n <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n {progressValue}%\r\n </p>\r\n </gb-tooltip>\r\n )}\r\n {this.labelPosition === 'bottom_floating' && (\r\n <gb-tooltip class={`bottom_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 59.5).toString()}%` }}>\r\n <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n {progressValue}%\r\n </p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n )}\r\n </>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}

package/dist/components/{p-b1f57acc.js → p-6baad8ef.js} RENAMED Viewed

@@ -1,9 +1,9 @@
 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$4 } from './p-e832e7d0.js';
+import { d as defineCustomElement$4 } from './p-4266561a.js';
 import { d as defineCustomElement$3 } from './p-b0d34887.js';
-import { d as defineCustomElement$2 } from './p-57b94005.js';
-import { d as defineCustomElement$1 } from './p-31e9f7cb.js';
+import { d as defineCustomElement$2 } from './p-55139c08.js';
+import { d as defineCustomElement$1 } from './p-a48f3765.js';
 const gbFileUploadItemBaseCss = ":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\r\n/* .file_upload_item_base_div{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n} */\r\n\r\n.file_upload_item_base_container {\r\n  display: flex;\r\n  width: 32rem;\r\n  border-radius: var(--rounded-sm);\r\n  padding: var(--spacing-6);\r\n  background-color: var(--color-background-card, #ffffff);\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\n.file_upload_item_base_container.default:hover{\r\n  border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.file_upload_item_base_container.disabled{\r\n  background-color: var(--color-background-disabled, #F6F8FA);\r\n  border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.file_upload_item_base_container.md{\r\n    flex-direction: row;\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n    flex-direction: column;\r\n}\r\n\r\n.close_button {\r\n  position: absolute;\r\n  top: var(--spacing-4);\r\n  right: var(--spacing-4);\r\n}\r\n\r\n.progress_bar{\r\n  margin-top: 0.5rem;\r\n}\r\n\r\n.file_type_text.in_progress,\r\n.file_type_text.complete{\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text.error,\r\n.file_size_text.error{\r\n  color: var(--color-background-danger, #B51726);\r\n}\r\n\r\n.file_size_text.in_progress,\r\n.file_size_text.complete{\r\n  color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n/* Default Styles */\r\n.file_upload_icon{\r\n  background-color: #EEF2F6;\r\n  border-radius: var(--rounded-full);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: var(--spacing-3);\r\n}\r\n\r\n.file_upload_icon svg{\r\n  width: var(--spacing-6);\r\n  height: var(--spacing-6);\r\n}\r\n\r\n.default.md{\r\n  display: flex;\r\n  gap: var(--spacing-3);\r\n  align-items: center;\r\n}\r\n\r\n.default.lg{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.default_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n/* In Progress Styles */\r\n.in_progress_div.md{\r\n  width: 100%;\r\n}\r\n\r\n.in_progress_div.lg{\r\n  text-align: center;\r\n}\r\n\r\n.in_progress_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n  width: 100%;\r\n}\r\n\r\n.upload_btn_md{\r\n  position: absolute;\r\n  top: 45%;\r\n  right: 1.5rem;\r\n}\r\n\r\n.upload_btn_lg{\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n/* Complete Styles */\r\n.complete{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\r\n}\r\n\r\n.complete.md{\r\n  flex-direction: row;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.complete.lg{\r\n  align-items: center;\r\n  text-align: center;\r\n}\r\n\r\n.complete_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.complete_content.md{\r\n  justify-content: center;\r\n}\r\n\r\n.complete_content.lg{\r\n  align-items: center;\r\n}\r\n\r\n.delete_button{\r\n  position: absolute;\r\n  top: 25%;\r\n  right: 1rem;\r\n}\r\n\r\n.delete_btn{\r\n  position: absolute;\r\n  top: 35%;\r\n  right: 1.5rem;\r\n}\r\n\r\n/* Error Styles */\r\n.error{\r\n  background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n  border-color: var(--color-border-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.error.lg{\r\n  text-align: center;\r\n}\r\n\r\n.error_content{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-2);\r\n}\r\n\r\n.btns{\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: var(--spacing-6);\r\n}\r\n\r\n.btn{\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n/* Text Styles*/\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-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\np.lg{\r\n  display: flex;\r\n  gap: var(--spacing-1);\r\n}";
 const GbFileUploadItemBaseStyle0 = gbFileUploadItemBaseCss;
@@ -29,7 +29,7 @@ const GbFileUploadItemBase = /*@__PURE__*/ proxyCustomElement(class GbFileUpload
         }
     }
     render() {
-        return (h("div", { key: 'f4079043fac9f079320a886ecd8ecc07e7141fd6', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.state === 'in_progress' && (h("div", { key: 'c225aeb130795ae5b4f3c51becdc411cc9c62112', class: `in_progress_div ${this.heightSize}` }, h("div", { key: 'b9b0e5457e2ef15c6976e527a5f22b12167e8d7f', class: "file_icon" }), h("div", { key: '3db829fd1f6a69c02a65089cf211baa9dddce077', class: "in_progress_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: 'cb08f84c23702faed94aa5bd969dee41f58eb307', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '25af8171ae9ff6eb54422c9fd49f482dba6d6be1', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: 'e78d0e72d823d30d2e4b2b8d37474582543a827b', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '123629267fff6b52b496621820ce523677e4e66c', size: "sm", color: "gray", class: "close_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '39a0552676c91f8354ad860a80c067fee6557645', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'afb3bbc4904493bcbbc01fc130dc2fc58b593c41', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: '752b7b1e3dd0d0154d67f68ae621caab69906532', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: 'a4573b5decd26d5523161e864337ab789f002e92', size: "sm", color: "gray", class: "close_button" })))))), this.state === 'complete' && (h("div", { key: 'b6679c9bf54294addf77759b9225803b5d29db8f', class: `complete ${this.heightSize}` }, h("div", { key: 'bbf272cc17f6e61dc0bca3d3477de277c74f8479', class: "file_icon" }), h("div", { key: '0ba2a283c54bdfb8a6e41398e06d1b6aed22f651', class: `complete_content ${this.heightSize}` }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '45ff32d471e527463a4d7796d15afdfe7b968e66', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'f88338e30ff6dce28fa987cd3740db1fea943073', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: '984cd64a01de9254d9156fe4e2b8b9967bacea62', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: 'bd8f08d052631836052a1a6551a215d60ad29945', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '022a910e9b1a94ff1511df040efb40bd328f5419', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: '281c59d9ffc245caad04a1fce6a0c5e9b9f79c22', size: "sm", hierarchy: "tertiary_gray", icon: "default", "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: 'a018f626863b31854d43623bc9ed9855cd5d38c2' }, "Clear"))))))), this.state === 'error' && (h("div", { key: '6cfb14747f5106662fa77edecedee14c6ef85828', class: `error ${this.heightSize}` }, h("div", { key: '9b1e4892ee73f51d3435561b86dca652b514eb0b', class: "file_icon" }), h("div", { key: '3aedb66ee0d921d8a53b18ff28f74548140ea439', class: "error_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '1c42dbac38fa26494adb2d31499c410ddd8070a1', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '7ebcf9399a10b9d2df5a6d7c379981bff90e4eca', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("gb-button", { key: '83192d765491a2903a718506acee32b9d141fee0', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true }, h("p", { key: 'e8889665cb9bfb1de8e42d75f35b6121cd55a061' }, "Try again")), h("gb-button", { key: '0cffc06a3f318a8e6e813bf861bd37082818a353', size: "sm", hierarchy: "tertiary_gray", icon: "only", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '43a94cc630081030a006a856d0f8a36bdba33d63', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '12b4a323e467ade680d978ab54382fb9267e67be', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("div", { key: '6c18864a9d01e708bb6da7b9e8186e90227a22aa', class: "btns" }, h("test-button", { key: '5f2955d52fdf5816f0253ac0aa44645f22b367cf', size: "sm", hierarchy: "tertiary_gray", icon: "default", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: 'd309df0c7d5b827c1e3a2600636e2764ad85634c' }, "Clear")), h("div", { key: '44c19b3b7439ad414e7c869361907fc1a722b96a', class: "btn" }, h("test-button", { key: 'b1d47f92b8aca3f732e9e030f23d7db600ebbf82', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true, class: "btn" }, h("p", { key: '9aaa42d5aeacf8a9bac5ea81d2aeceefa27cac45' }, "Try again")))))))))));
+        return (h("div", { key: '585ad06cf8879809c48263ddf7b7d0f07f82612c', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.state === 'in_progress' && (h("div", { key: 'da0097b59cd6c40fe8f622e522355da3916417b0', class: `in_progress_div ${this.heightSize}` }, h("div", { key: '33242f4eef01d3c954ce48ef74af7596e5914be1', class: "file_icon" }), h("div", { key: '355764e15cfdca6316ab0eb955cf7675471edad9', class: "in_progress_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: 'c25fe8a2d309c90a2ab089330aa01d814bed7cf6', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'a5557ce90740184aa6d69b4d12bbe2dba2f15836', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: 'ec0aa176aa0ea50ed2c6615bfb6e0dec3c516303', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: 'e729b9e5c3d4e8687339d40ec331804669f7dfca', size: "sm", color: "gray", class: "close_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '6dd0f5cd3455d0b019a62835e3f484cb86780357', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'd35ad8f361cf5be32130a187200430ab7ca8248e', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB"), h("gb-progress-bar", { key: '0e5a4c377c541d17d1311f0e826a830ba2249b8c', progress: 20, "show-label": true, "label-position": "right", class: "progress_bar" }), h("gb-button-close", { key: '587383be1e116c9d1bf9529ff2ee7dd4e5b8a903', size: "sm", color: "gray", class: "close_button" })))))), this.state === 'complete' && (h("div", { key: '364aa36e1b192a8d4886e4f797fb8247f7ee28ad', class: `complete ${this.heightSize}` }, h("div", { key: '8fdf41774841657334fc34f75f8aa292a36e26d5', class: "file_icon" }), h("div", { key: 'aeb743674e3e1f03aa55cd52ed6219da11a46e73', class: `complete_content ${this.heightSize}` }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '8e2a698a70662d2a224f853e46c0e760af0044f0', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '08605b433bdc5d3d03cd1ef728c1c79ea2c6446b', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: '47c6efc7d6e3e2e92c20aac6cd61b78ee65e4d34', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '16a8f5f7c46e0c03606b9a4d3e24a2cbe8fcb87f', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: 'f955e84be5f8ad0257481661188299d0f15c122b', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("test-button", { key: '9fe3667f81dce8f2c7f535b8e6d1e1b17553ebde', size: "sm", hierarchy: "tertiary_gray", icon: "default", "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: '4e81c1aeeb4afe93e949ac5c4436d7fda5095c09' }, "Clear"))))))), this.state === 'error' && (h("div", { key: '28bcc7bf40f47b3c54ff2077dcdaed53669a403d', class: `error ${this.heightSize}` }, h("div", { key: 'e230f4064e69dbb948abb07406b0aa81f0931a87', class: "file_icon" }), h("div", { key: '8c313d2d96571a6c1a6fcff84f299a0f9d64e5b7', class: "error_content" }, this.heightSize === 'md' && (h(Fragment, null, h("p", { key: '6e9c411c41216e8e303d7d1abeb62ddc230b6414', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '87544adf363ab7e4c7cc1220f65fc7db725d1922', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("gb-button", { key: 'd8f9b38e806346187af4dd2299ac4b52587bce4a', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true }, h("p", { key: 'ff6be31ad7e55666918caf1e299fbad8f552e5e2' }, "Try again")), h("gb-button", { key: 'a356771a29cba4616db44fb0f87efb61027e5620', size: "sm", hierarchy: "tertiary_gray", icon: "only", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02", class: "delete_button" }))), this.heightSize === 'lg' && (h(Fragment, null, h("p", { key: '80f7d0ae1e772c6637bbeb95a859a7168e250539', class: `file_type_text ${this.state} text-sm-medium` }, "Tech design requirements.pdf"), h("p", { key: '4129e9b4d4bd7a008d8babb0c0c0da63e4cafbff', class: `file_size_text ${this.state} text-sm-regular` }, "200 KB \u2013 100% uploaded"), h("div", { key: 'fafe35b5d725f9dfa2b6be1fd6e054b5ea318153', class: "btns" }, h("test-button", { key: 'f23226b420b6bc9fe22af5e29546d792325fd357', size: "sm", hierarchy: "tertiary_gray", icon: "default", destructive: true, "icon-leading": true, "icon-leading-swap": "delete-02" }, h("p", { key: 'b6c223e60b076b0cd2e83188da6317425a1f199f' }, "Clear")), h("div", { key: 'd59089652a60035bccc93d91ed9d03737bf1e49d', class: "btn" }, h("test-button", { key: 'f1b70374592b00dff7537e14e2f0961b4f3fd3aa', size: "sm", hierarchy: "link_color", icon: StateEnum.Default, destructive: true, class: "btn" }, h("p", { key: 'ea910261794d329347316e59c250ce5c51380e0c' }, "Try again")))))))))));
     }
     static get style() { return GbFileUploadItemBaseStyle0; }
 }, [1, "gb-file-upload-item-base", {
@@ -76,4 +76,4 @@ defineCustomElement();
 export { GbFileUploadItemBase as G, defineCustomElement as d };
-//# sourceMappingURL=p-b1f57acc.js.map
+//# sourceMappingURL=p-6baad8ef.js.map

package/dist/components/{p-b1f57acc.js.map → p-6baad8ef.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-b1f57acc.js","mappings":"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","names":[],"sources":["src/components/gb-file-upload-item-base/gb-file-upload-item-base.css?tag=gb-file-upload-item-base&encapsulation=shadow","src/components/gb-file-upload-item-base/gb-file-upload-item-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n\r\n/* .file_upload_item_base_div{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n} /\r\n\r\n.file_upload_item_base_container {\r\n display: flex;\r\n width: 32rem;\r\n border-radius: var(--rounded-sm);\r\n padding: var(--spacing-6);\r\n background-color: var(--color-background-card, #ffffff);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.file_upload_item_base_container.default:hover{\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.file_upload_item_base_container.disabled{\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.file_upload_item_base_container.md{\r\n flex-direction: row;\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n flex-direction: column;\r\n}\r\n\r\n.close_button {\r\n position: absolute;\r\n top: var(--spacing-4);\r\n right: var(--spacing-4);\r\n}\r\n\r\n.progress_bar{\r\n margin-top: 0.5rem;\r\n}\r\n\r\n.file_type_text.in_progress,\r\n.file_type_text.complete{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text.error,\r\n.file_size_text.error{\r\n color: var(--color-background-danger, #B51726);\r\n}\r\n\r\n.file_size_text.in_progress,\r\n.file_size_text.complete{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n/ Default Styles /\r\n.file_upload_icon{\r\n background-color: #EEF2F6;\r\n border-radius: var(--rounded-full);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: var(--spacing-3);\r\n}\r\n\r\n.file_upload_icon svg{\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\n.default.md{\r\n display: flex;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n}\r\n\r\n.default.lg{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.default_content{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n/ In Progress Styles /\r\n.in_progress_div.md{\r\n width: 100%;\r\n}\r\n\r\n.in_progress_div.lg{\r\n text-align: center;\r\n}\r\n\r\n.in_progress_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n width: 100%;\r\n}\r\n\r\n.upload_btn_md{\r\n position: absolute;\r\n top: 45%;\r\n right: 1.5rem;\r\n}\r\n\r\n.upload_btn_lg{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Complete Styles /\r\n.complete{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.complete.md{\r\n flex-direction: row;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.complete.lg{\r\n align-items: center;\r\n text-align: center;\r\n}\r\n\r\n.complete_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.complete_content.md{\r\n justify-content: center;\r\n}\r\n\r\n.complete_content.lg{\r\n align-items: center;\r\n}\r\n\r\n.delete_button{\r\n position: absolute;\r\n top: 25%;\r\n right: 1rem;\r\n}\r\n\r\n.delete_btn{\r\n position: absolute;\r\n top: 35%;\r\n right: 1.5rem;\r\n}\r\n\r\n/ Error Styles /\r\n.error{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n border-color: var(--color-border-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.error.lg{\r\n text-align: center;\r\n}\r\n\r\n.error_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.btns{\r\n display: flex;\r\n justify-content: center;\r\n gap: var(--spacing-6);\r\n}\r\n\r\n.btn{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Text Styles*/\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-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\np.lg{\r\n display: flex;\r\n gap: var(--spacing-1);\r\n}","import { Component, h, Prop, Fragment } from '@stencil/core';\r\nimport { FileUploadIconType, FileUploadStates, GeneralSizes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-file-upload-item-base',\r\n styleUrl: 'gb-file-upload-item-base.css',\r\n shadow: true,\r\n})\r\nexport class GbFileUploadItemBase {\r\n @Prop() icon: FileUploadIconType;\r\n @Prop() state: FileUploadStates;\r\n @Prop() heightSize: GeneralSizes = 'md';\r\n @Prop() fileType: 'pdf' \| 'png' \| 'jpg' \| 'doc' \| 'mp4';\r\n @Prop() buttonState: StateEnum = StateEnum.Default;\r\n\r\n returnIcons() {\r\n switch (this.icon) {\r\n case 'outline':\r\n switch (this.fileType) {\r\n case 'pdf':\r\n return (\r\n <svg width=\"40\" height=\"41\" viewBox=\"0 0 40 41\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7.75 4.5C7.75 2.70508 9.20508 1.25 11 1.25H27C27.1212 1.25 27.2375 1.29816 27.3232 1.38388L38.1161 12.1768C38.2018 12.2625 38.25 12.3788 38.25 12.5V36.5C38.25 38.2949 36.7949 39.75 35 39.75H11C9.20507 39.75 7.75 38.2949 7.75 36.5V4.5Z\"\r\n fill=\"white\"\r\n stroke=\"#CDD5DF\"\r\n stroke-width=\"1.5\"\r\n />\r\n <path d=\"M27 1V8.5C27 10.7091 28.7909 12.5 31 12.5H38.5\" stroke=\"#CDD5DF\" stroke-width=\"1.5\" />\r\n <rect x=\"0.5\" y=\"18\" width=\"27\" height=\"17\" rx=\"2\" fill=\"#E21B2E\" />\r\n <path\r\n d=\"M6.22094 27.91V26.49H7.53094C7.78427 26.49 8.00094 26.44 8.18094 26.34C8.3676 26.24 8.51094 26.1 8.61094 25.92C8.71094 25.7333 8.76094 25.52 8.76094 25.28C8.76094 25.0267 8.71094 24.81 8.61094 24.63C8.51094 24.4433 8.3676 24.3033 8.18094 24.21C8.00094 24.11 7.78427 24.06 7.53094 24.06H6.22094V22.64H7.45094C8.07094 22.64 8.60094 22.7433 9.04094 22.95C9.4876 23.1567 9.8276 23.45 10.0609 23.83C10.3009 24.21 10.4209 24.6667 10.4209 25.2V25.36C10.4209 25.88 10.3009 26.3333 10.0609 26.72C9.8276 27.1 9.4876 27.3933 9.04094 27.6C8.60094 27.8067 8.07094 27.91 7.45094 27.91H6.22094ZM4.78094 30V22.64H6.42094V30H4.78094ZM12.8909 30.04V28.51H14.2509C14.5909 28.51 14.8975 28.46 15.1709 28.36C15.4442 28.2533 15.6775 28.1067 15.8709 27.92C16.0642 27.7267 16.2109 27.4967 16.3109 27.23C16.4109 26.9567 16.4609 26.6567 16.4609 26.33C16.4609 25.99 16.4109 25.6867 16.3109 25.42C16.2109 25.1533 16.0642 24.9267 15.8709 24.74C15.6775 24.5533 15.4442 24.4133 15.1709 24.32C14.8975 24.22 14.5909 24.17 14.2509 24.17H12.8909V22.64H14.1609C14.8209 22.64 15.3975 22.7367 15.8909 22.93C16.3842 23.1233 16.7975 23.3867 17.1309 23.72C17.4642 24.0533 17.7109 24.4367 17.8709 24.87C18.0375 25.2967 18.1209 25.7467 18.1209 26.22V26.44C18.1209 26.88 18.0375 27.3167 17.8709 27.75C17.7109 28.1767 17.4642 28.5633 17.1309 28.91C16.7975 29.25 16.3842 29.5233 15.8909 29.73C15.3975 29.9367 14.8209 30.04 14.1609 30.04H12.8909ZM11.4509 30.04V22.64H13.0909V30.04H11.4509ZM19.2634 30V22.7H20.9034V30H19.2634ZM20.7034 27.06V25.7H23.5234V27.06H20.7034ZM20.7034 24.06V22.7H23.6434V24.06H20.7034Z\"\r\n fill=\"white\"\r\n />\r\n </svg>\r\n );\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\r\n {this.state === 'in_progress' && (\r\n <div class={`in_progress_div ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class=\"in_progress_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'complete' && (\r\n <div class={`complete ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class={`complete_content ${this.heightSize}`}>\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <test-button \r\n size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"only\" \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\" \r\n class=\"delete_button\"\r\n ></test-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <test-button size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"default\" \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\">\r\n <p>Clear</p>\r\n </test-button>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'error' && (\r\n <div class={`error ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class=\"error_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <gb-button \r\n size=\"sm\" \r\n hierarchy=\"link_color\" \r\n icon={StateEnum.Default} \r\n destructive={true}>\r\n <p>Try again</p>\r\n </gb-button>\r\n <gb-button \r\n size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"only\" destructive={true} \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\"\r\n class=\"delete_button\"\r\n ></gb-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <div class=\"btns\">\r\n <test-button size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"default\" \r\n destructive={true} \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\">\r\n <p>Clear</p>\r\n </test-button>\r\n <div class=\"btn\">\r\n <test-button \r\n size=\"sm\" \r\n hierarchy=\"link_color\" \r\n icon={StateEnum.Default} \r\n destructive={true} \r\n class=\"btn\">\r\n <p>Try again</p>\r\n </test-button>\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"p-6baad8ef.js","mappings":"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","names":[],"sources":["src/components/gb-file-upload-item-base/gb-file-upload-item-base.css?tag=gb-file-upload-item-base&encapsulation=shadow","src/components/gb-file-upload-item-base/gb-file-upload-item-base.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n\r\n/* .file_upload_item_base_div{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n} /\r\n\r\n.file_upload_item_base_container {\r\n display: flex;\r\n width: 32rem;\r\n border-radius: var(--rounded-sm);\r\n padding: var(--spacing-6);\r\n background-color: var(--color-background-card, #ffffff);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.file_upload_item_base_container.default:hover{\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.file_upload_item_base_container.disabled{\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n border-color: var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.file_upload_item_base_container.md{\r\n flex-direction: row;\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n flex-direction: column;\r\n}\r\n\r\n.close_button {\r\n position: absolute;\r\n top: var(--spacing-4);\r\n right: var(--spacing-4);\r\n}\r\n\r\n.progress_bar{\r\n margin-top: 0.5rem;\r\n}\r\n\r\n.file_type_text.in_progress,\r\n.file_type_text.complete{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text.error,\r\n.file_size_text.error{\r\n color: var(--color-background-danger, #B51726);\r\n}\r\n\r\n.file_size_text.in_progress,\r\n.file_size_text.complete{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n/ Default Styles /\r\n.file_upload_icon{\r\n background-color: #EEF2F6;\r\n border-radius: var(--rounded-full);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: var(--spacing-3);\r\n}\r\n\r\n.file_upload_icon svg{\r\n width: var(--spacing-6);\r\n height: var(--spacing-6);\r\n}\r\n\r\n.default.md{\r\n display: flex;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n}\r\n\r\n.default.lg{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.default_content{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n/ In Progress Styles /\r\n.in_progress_div.md{\r\n width: 100%;\r\n}\r\n\r\n.in_progress_div.lg{\r\n text-align: center;\r\n}\r\n\r\n.in_progress_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n width: 100%;\r\n}\r\n\r\n.upload_btn_md{\r\n position: absolute;\r\n top: 45%;\r\n right: 1.5rem;\r\n}\r\n\r\n.upload_btn_lg{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Complete Styles /\r\n.complete{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.complete.md{\r\n flex-direction: row;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.complete.lg{\r\n align-items: center;\r\n text-align: center;\r\n}\r\n\r\n.complete_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.complete_content.md{\r\n justify-content: center;\r\n}\r\n\r\n.complete_content.lg{\r\n align-items: center;\r\n}\r\n\r\n.delete_button{\r\n position: absolute;\r\n top: 25%;\r\n right: 1rem;\r\n}\r\n\r\n.delete_btn{\r\n position: absolute;\r\n top: 35%;\r\n right: 1.5rem;\r\n}\r\n\r\n/ Error Styles /\r\n.error{\r\n background-color: var(--color-background-danger-subtlest, #FEF1F2);\r\n border-color: var(--color-border-danger-subtle, #F9B4BA);\r\n}\r\n\r\n.error.lg{\r\n text-align: center;\r\n}\r\n\r\n.error_content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.btns{\r\n display: flex;\r\n justify-content: center;\r\n gap: var(--spacing-6);\r\n}\r\n\r\n.btn{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n/ Text Styles*/\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-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\np.lg{\r\n display: flex;\r\n gap: var(--spacing-1);\r\n}","import { Component, h, Prop, Fragment } from '@stencil/core';\r\nimport { FileUploadIconType, FileUploadStates, GeneralSizes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-file-upload-item-base',\r\n styleUrl: 'gb-file-upload-item-base.css',\r\n shadow: true,\r\n})\r\nexport class GbFileUploadItemBase {\r\n @Prop() icon: FileUploadIconType;\r\n @Prop() state: FileUploadStates;\r\n @Prop() heightSize: GeneralSizes = 'md';\r\n @Prop() fileType: 'pdf' \| 'png' \| 'jpg' \| 'doc' \| 'mp4';\r\n @Prop() buttonState: StateEnum = StateEnum.Default;\r\n\r\n returnIcons() {\r\n switch (this.icon) {\r\n case 'outline':\r\n switch (this.fileType) {\r\n case 'pdf':\r\n return (\r\n <svg width=\"40\" height=\"41\" viewBox=\"0 0 40 41\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M7.75 4.5C7.75 2.70508 9.20508 1.25 11 1.25H27C27.1212 1.25 27.2375 1.29816 27.3232 1.38388L38.1161 12.1768C38.2018 12.2625 38.25 12.3788 38.25 12.5V36.5C38.25 38.2949 36.7949 39.75 35 39.75H11C9.20507 39.75 7.75 38.2949 7.75 36.5V4.5Z\"\r\n fill=\"white\"\r\n stroke=\"#CDD5DF\"\r\n stroke-width=\"1.5\"\r\n />\r\n <path d=\"M27 1V8.5C27 10.7091 28.7909 12.5 31 12.5H38.5\" stroke=\"#CDD5DF\" stroke-width=\"1.5\" />\r\n <rect x=\"0.5\" y=\"18\" width=\"27\" height=\"17\" rx=\"2\" fill=\"#E21B2E\" />\r\n <path\r\n d=\"M6.22094 27.91V26.49H7.53094C7.78427 26.49 8.00094 26.44 8.18094 26.34C8.3676 26.24 8.51094 26.1 8.61094 25.92C8.71094 25.7333 8.76094 25.52 8.76094 25.28C8.76094 25.0267 8.71094 24.81 8.61094 24.63C8.51094 24.4433 8.3676 24.3033 8.18094 24.21C8.00094 24.11 7.78427 24.06 7.53094 24.06H6.22094V22.64H7.45094C8.07094 22.64 8.60094 22.7433 9.04094 22.95C9.4876 23.1567 9.8276 23.45 10.0609 23.83C10.3009 24.21 10.4209 24.6667 10.4209 25.2V25.36C10.4209 25.88 10.3009 26.3333 10.0609 26.72C9.8276 27.1 9.4876 27.3933 9.04094 27.6C8.60094 27.8067 8.07094 27.91 7.45094 27.91H6.22094ZM4.78094 30V22.64H6.42094V30H4.78094ZM12.8909 30.04V28.51H14.2509C14.5909 28.51 14.8975 28.46 15.1709 28.36C15.4442 28.2533 15.6775 28.1067 15.8709 27.92C16.0642 27.7267 16.2109 27.4967 16.3109 27.23C16.4109 26.9567 16.4609 26.6567 16.4609 26.33C16.4609 25.99 16.4109 25.6867 16.3109 25.42C16.2109 25.1533 16.0642 24.9267 15.8709 24.74C15.6775 24.5533 15.4442 24.4133 15.1709 24.32C14.8975 24.22 14.5909 24.17 14.2509 24.17H12.8909V22.64H14.1609C14.8209 22.64 15.3975 22.7367 15.8909 22.93C16.3842 23.1233 16.7975 23.3867 17.1309 23.72C17.4642 24.0533 17.7109 24.4367 17.8709 24.87C18.0375 25.2967 18.1209 25.7467 18.1209 26.22V26.44C18.1209 26.88 18.0375 27.3167 17.8709 27.75C17.7109 28.1767 17.4642 28.5633 17.1309 28.91C16.7975 29.25 16.3842 29.5233 15.8909 29.73C15.3975 29.9367 14.8209 30.04 14.1609 30.04H12.8909ZM11.4509 30.04V22.64H13.0909V30.04H11.4509ZM19.2634 30V22.7H20.9034V30H19.2634ZM20.7034 27.06V25.7H23.5234V27.06H20.7034ZM20.7034 24.06V22.7H23.6434V24.06H20.7034Z\"\r\n fill=\"white\"\r\n />\r\n </svg>\r\n );\r\n }\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\r\n {this.state === 'in_progress' && (\r\n <div class={`in_progress_div ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class=\"in_progress_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB</p>\r\n <gb-progress-bar progress={20} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\"></gb-button-close>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'complete' && (\r\n <div class={`complete ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class={`complete_content ${this.heightSize}`}>\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <test-button \r\n size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"only\" \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\" \r\n class=\"delete_button\"\r\n ></test-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <test-button size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"default\" \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\">\r\n <p>Clear</p>\r\n </test-button>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n {this.state === 'error' && (\r\n <div class={`error ${this.heightSize}`}>\r\n <div class=\"file_icon\"></div>\r\n <div class=\"error_content\">\r\n {this.heightSize === 'md' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <gb-button \r\n size=\"sm\" \r\n hierarchy=\"link_color\" \r\n icon={StateEnum.Default} \r\n destructive={true}>\r\n <p>Try again</p>\r\n </gb-button>\r\n <gb-button \r\n size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"only\" destructive={true} \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\"\r\n class=\"delete_button\"\r\n ></gb-button>\r\n </>\r\n )}\r\n {this.heightSize === 'lg' && (\r\n <>\r\n <p class={`file_type_text ${this.state} text-sm-medium`}>Tech design requirements.pdf</p>\r\n <p class={`file_size_text ${this.state} text-sm-regular`}>200 KB – 100% uploaded</p>\r\n <div class=\"btns\">\r\n <test-button size=\"sm\" \r\n hierarchy=\"tertiary_gray\" \r\n icon=\"default\" \r\n destructive={true} \r\n icon-leading={true} \r\n icon-leading-swap=\"delete-02\">\r\n <p>Clear</p>\r\n </test-button>\r\n <div class=\"btn\">\r\n <test-button \r\n size=\"sm\" \r\n hierarchy=\"link_color\" \r\n icon={StateEnum.Default} \r\n destructive={true} \r\n class=\"btn\">\r\n <p>Try again</p>\r\n </test-button>\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/{p-d9de678f.js → p-7239b558.js} RENAMED Viewed

@@ -11,7 +11,7 @@ const GbTagClose = /*@__PURE__*/ proxyCustomElement(class GbTagClose extends H {
         this.size = undefined;
     }
     render() {
-        return (h("div", { key: 'e72ab72f3419a6442aff8022e8e0e51e8f68b94e', class: this.size }, h("svg", { key: '1b11dc4dc1a85c159111c730f3450845f61c1185', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: '76bc551c85354add94aa7dd0302d1d7f3a7c586f', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: '7764943eb1072e1031e5395b33cf89c9277f4c1c', class: this.size }, h("svg", { key: '9fe80231e29655fbab21ea4bc80175d7ed5bb7c9', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("path", { key: 'd753e4909224353d17fef8ca30508d64bf37af36', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get style() { return GbTagCloseStyle0; }
 }, [1, "gb-tag-close", {
@@ -34,4 +34,4 @@ defineCustomElement();
 export { GbTagClose as G, defineCustomElement as d };
-//# sourceMappingURL=p-d9de678f.js.map
+//# sourceMappingURL=p-7239b558.js.map

package/dist/components/{p-d9de678f.js.map → p-7239b558.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~d9de678f~~.js","mappings":";;AAAA,MAAM,aAAa,GAAG,mx4CAAmx4C,CAAC;AAC1y4C,yBAAe,aAAa;;MCQf,UAAU;;;;;;;IAGnB,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,IACjB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,IAC1F,6DAAM,CAAC,EAAC,gEAAgE,EAAC,MAAM,EAAC,SAAS,kBAAc,KAAK,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC3J,CACJ,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-tag-close/gb-tag-close.css?tag=gb-tag-close&encapsulation=shadow","src/components/gb-tag-close/gb-tag-close.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n\r\ndiv {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n border-radius: 3px;\r\n cursor: pointer;\r\n}\r\n\r\ndiv:hover {\r\n background: #F6F8FA;\r\n}\r\n\r\ndiv:hover svg path {\r\n stroke: #202939;\r\n}\r\n\r\ndiv.sm,\r\ndiv.md {\r\n padding: var(--spacing-half);\r\n}\r\n\r\ndiv.lg {\r\n padding: 3px;\r\n}\r\n\r\ndiv.sm svg{\r\n width: 10px;\r\n height: 10px;\r\n}\r\n\r\ndiv.md svg{\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.lg svg{\r\n width: 14px;\r\n height: 14px;\r\n}","import {Component, Prop, h} from '@stencil/core'\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-tag-close',\r\n styleUrl: 'gb-tag-close.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbTagClose{\r\n @Prop() size: GeneralSizes;\r\n\r\n render() {\r\n return (\r\n <div class={this.size}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n )\r\n }\r\n}"],"version":3}
1	+ {"file":"p-7239b558.js","mappings":";;AAAA,MAAM,aAAa,GAAG,mx4CAAmx4C,CAAC;AAC1y4C,yBAAe,aAAa;;MCQf,UAAU;;;;;;;IAGnB,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,IACjB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,IAC1F,6DAAM,CAAC,EAAC,gEAAgE,EAAC,MAAM,EAAC,SAAS,kBAAc,KAAK,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC3J,CACJ,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-tag-close/gb-tag-close.css?tag=gb-tag-close&encapsulation=shadow","src/components/gb-tag-close/gb-tag-close.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n\r\ndiv {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n border-radius: 3px;\r\n cursor: pointer;\r\n}\r\n\r\ndiv:hover {\r\n background: #F6F8FA;\r\n}\r\n\r\ndiv:hover svg path {\r\n stroke: #202939;\r\n}\r\n\r\ndiv.sm,\r\ndiv.md {\r\n padding: var(--spacing-half);\r\n}\r\n\r\ndiv.lg {\r\n padding: 3px;\r\n}\r\n\r\ndiv.sm svg{\r\n width: 10px;\r\n height: 10px;\r\n}\r\n\r\ndiv.md svg{\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.lg svg{\r\n width: 14px;\r\n height: 14px;\r\n}","import {Component, Prop, h} from '@stencil/core'\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-tag-close',\r\n styleUrl: 'gb-tag-close.css',\r\n shadow: true\r\n})\r\n\r\nexport class GbTagClose{\r\n @Prop() size: GeneralSizes;\r\n\r\n render() {\r\n return (\r\n <div class={this.size}>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n <path d=\"M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n )\r\n }\r\n}"],"version":3}