globuswebcomponents 2.4.3 → 2.4.5

package/dist/cjs/gb-file-upload-item-base.cjs.entry.js

@@ -1,72 +0,0 @@
-'use strict';
-
-var index = require('./index-CmQuD5Lz.js');
-var reusableModels = require('./reusableModels-_LRAKnsh.js');
-
-const gbFileUploadItemBaseCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n  /* --------------------------------------Primary Colors--------------------------------------------- */\r\n  /* base color palette */\r\n  --base-white: #fff;\r\n  --base-black: #000;\r\n\r\n  /* gray color palette  */\r\n  --gray-25: #f9fafb;\r\n  --gray-50: #f6f8fa;\r\n  --gray-100: #eef2f6;\r\n  --gray-200: #e3e8ef;\r\n  --gray-300: #cdd5df;\r\n  --gray-400: #808c9e;\r\n  --gray-500: #697586;\r\n  --gray-600: #4b5565;\r\n  --gray-700: #364152;\r\n  --gray-800: #202939;\r\n  --gray-900: #121926;\r\n  --gray-950: #0d121c;\r\n\r\n  /* brand dark blue color palette */\r\n  --brandDarkBlue-25: #f9f9fb;\r\n  --brandDarkBlue-50: #edeef3;\r\n  --brandDarkBlue-100: #d3d5e0;\r\n  --brandDarkBlue-200: #b5b9cc;\r\n  --brandDarkBlue-300: #9095b2;\r\n  --brandDarkBlue-400: #464f7f;\r\n  --brandDarkBlue-500: #212c65;\r\n  --brandDarkBlue-600: #1e285c;\r\n  --brandDarkBlue-700: #1c2554;\r\n  --brandDarkBlue-800: #161d43;\r\n  --brandDarkBlue-900: #0b0f22;\r\n  --brandDarkBlue-950: #070914;\r\n\r\n  /* brand red color palette */\r\n  --brandRed-25: #fffbfa;\r\n  --brandRed-50: #fef1f2;\r\n  --brandRed-100: #fde3e5;\r\n  --brandRed-200: #f9b4ba;\r\n  --brandRed-300: #f68e98;\r\n  --brandRed-400: #f36976;\r\n  --brandRed-500: #e21b2e;\r\n  --brandRed-600: #cc1a2a;\r\n  --brandRed-700: #b51726;\r\n  --brandRed-800: #8c121d;\r\n  --brandRed-900: #680d16;\r\n  --brandRed-950: #3f080d;\r\n\r\n  /* warning color palette */\r\n  --warning-25: #fffcf5;\r\n  --warning-50: #fffaeb;\r\n  --warning-100: #fef0c7;\r\n  --warning-200: #fedf89;\r\n  --warning-300: #fec84b;\r\n  --warning-400: #fdb022;\r\n  --warning-500: #f79009;\r\n  --warning-600: #dc6803;\r\n  --warning-700: #b54708;\r\n  --warning-800: #93370d;\r\n  --warning-900: #7a2e0e;\r\n  --warning-950: #4e1d09;\r\n\r\n  /* success color palette  */\r\n  --success-25: #f6fef9;\r\n  --success-50: #ecfdf3;\r\n  --success-100: #dcfaeb;\r\n  --success-200: #a9efc5;\r\n  --success-300: #75e0a7;\r\n  --success-400: #47cd89;\r\n  --success-500: #17b26a;\r\n  --success-600: #079455;\r\n  --success-700: #067647;\r\n  --success-800: #085d3a;\r\n  --success-900: #074d31;\r\n  --success-950: #053321;\r\n\r\n  /* ------------------------------------------opacity color palette--------------------------------------  */\r\n  /* 0% opacity */\r\n  /* White */\r\n  --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n  /* Gray */\r\n  --gray25-opacity0: rgba(249, 250, 251, 0);\r\n  --gray900-opacity0: rgba(18, 25, 38, 0);\r\n  --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n  /* 20% opacity */\r\n  /* White */\r\n  --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n  /* Dark Blue */\r\n  --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n  --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n  /* Gray */\r\n  --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n  --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n  --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n  /* 30% opacity */\r\n  --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n  --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n  /* 40% opacity */\r\n  --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n  --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n  /* 50% opacity */\r\n  /* White */\r\n  --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n  /* Gray */\r\n  --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n  --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n  --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n  /* ------------------------------------------Secondary Color------------------------------------------- */\r\n  /* blueLight color palete */\r\n  --lightBlue-25: #f5fbff;\r\n  --lightBlue-50: #f0f9ff;\r\n  --lightBlue-100: #e0f2fe;\r\n  --lightBlue-200: #b9e6fe;\r\n  --lightBlue-300: #7cd4fd;\r\n  --lightBlue-400: #7cd4fd;\r\n  --lightBlue-500: #0ba5ec;\r\n  --lightBlue-600: #0086c9;\r\n  --lightBlue-700: #026aa2;\r\n  --lightBlue-800: #065986;\r\n  --lightBlue-900: #0b4a6f;\r\n  --lightBlue-950: #062c41;\r\n\r\n  /* blue color palette */\r\n  --blue-25: #ecf5fe;\r\n  --blue-50: #e4f0fc;\r\n  --blue-100: #c8e0f9;\r\n  --blue-200: #9ac7f4;\r\n  --blue-300: #6aa9e7;\r\n  --blue-400: #378fe6;\r\n  --blue-500: #075db2;\r\n  --blue-600: #064e94;\r\n  --blue-700: #053e77;\r\n  --blue-800: #042f59;\r\n  --blue-900: #022445;\r\n  --blue-950: #021d37;\r\n\r\n  /* Purple color palete */\r\n  --purple-25: #fafaff;\r\n  --purple-50: #f4f3ff;\r\n  --purple-100: #ebe9fe;\r\n  --purple-200: #d9d6fe;\r\n  --purple-300: #bdb4fe;\r\n  --purple-400: #9b8afb;\r\n  --purple-500: #7a5af8;\r\n  --purple-600: #6938ef;\r\n  --purple-700: #5925dc;\r\n  --purple-800: #4a1fb8;\r\n  --purple-900: #3e1c96;\r\n  --purple-950: #27115f;\r\n\r\n  /* pink color palette */\r\n  --pink-25: #fef6fb;\r\n  --pink-50: #fdf2fa;\r\n  --pink-100: #fce7f6;\r\n  --pink-200: #fcceee;\r\n  --pink-300: #faa7e0;\r\n  --pink-400: #f670c7;\r\n  --pink-500: #ee46bc;\r\n  --pink-600: #dd2590;\r\n  --pink-700: #c11574;\r\n  --pink-800: #9e165f;\r\n  --pink-900: #851651;\r\n  --pink-950: #4e0d30;\r\n\r\n  /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n  /* -----------Text Color----------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-text-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-inverse: var(--base-black);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-subtle: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-subtle: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-warning-subtle: var(--warning-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-warning-subtle: var(--warning-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-success-subtle: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-success-subtle: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-discovery-subtle: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-information-subtle: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-information-subtle: var(--blue-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-purple-subtle: var(--purple-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-purple-subtle: var(--purple-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-text-pink-subtle: var(--pink-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-text-pink-subtle: var(--pink-400);\r\n  }\r\n\r\n  /* --------------Link color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-link: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-pressed: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-link-visited: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-link-visited: var(--lightBlue-300);\r\n  }\r\n\r\n  /* --------------Icon color--------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-subtle: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-subtle: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-disabled: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-disabled: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-danger-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-danger-inverse: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-icon-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-icon-pink: var(--pink-300);\r\n  }\r\n\r\n  /* ----------------Border Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-border-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtle: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-subtler: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-disabled: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-inverse: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-inverse: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-input: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-input: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-focus: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-focus: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning: var(--warning-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success: var(--success-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery: var(--lightBlue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-bold: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple: var(--purple-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink: var(--pink-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-border-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-border-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  /* Emmanuel Kadiri starts from background color */\r\n\r\n  /* ----------------Background Color --------------- */\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card-bold: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card-bold: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-card: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-card: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-input: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-input: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-disabled: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-disabled: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-btn-disabled: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-btn-disabled: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-selected: var(--blue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-selected: var(--blue-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed: var(--brandRed-500);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed: var(--brandRed-300);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-hover: var(--brandRed-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-hover: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-brandRed-pressed: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-bold: var(--gray-400);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-bold: var(--gray-500);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray: var(--gray-600);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtle: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtle: var(--gray-700);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtler: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtler: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-gray-subtlest: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-gray-subtlest: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-bold: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-bold: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger: var(--brandRed-700);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtle: var(--brandRed-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtle: var(--brandRed-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtler: var(--brandRed-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtler: var(--brandRed-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-danger-subtlest: var(--brandRed-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-danger-subtlest: var(--brandRed-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-bold: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-bold: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning: var(--warning-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtle: var(--warning-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtle: var(--warning-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtler: var(--warning-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtler: var(--warning-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-warning-subtlest: var(--warning-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-warning-subtlest: var(--warning-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-bold: var(--success-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-bold: var(--success-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success: var(--success-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success: var(--success-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtle: var(--success-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtle: var(--success-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtler: var(--success-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtler: var(--success-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-success-subtlest: var(--success-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-success-subtlest: var(--success-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-bold: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-bold: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery: var(--lightBlue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtle: var(--lightBlue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtler: var(--lightBlue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-discovery-subtlest: var(--lightBlue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-bold: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information: var(--blue-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtle: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtle: var(--blue-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtler: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtler: var(--blue-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-information-subtlest: var(--blue-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-information-subtlest: var(--blue-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-bold: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-bold: var(--blue-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple: var(--purple-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple: var(--blue-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtle: var(--purple-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtle: var(--purple-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtler: var(--purple-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtler: var(--purple-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-purple-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-purple-subtlest: var(--purple-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-bold: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-bold: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink: var(--pink-600);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtle: var(--pink-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtle: var(--pink-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtler: var(--pink-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtler: var(--pink-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-background-pink-subtlest: var(--purple-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-background-pink-subtlest: var(--pink-950);\r\n  }\r\n\r\n  /* ----------------Blanket Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-blanket: var(--darkBlue500-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket: var(--darkBlue200-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n  }\r\n\r\n  /* ----------------Skeleton Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-skeleton: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton: var(--gray-800);\r\n  }\r\n\r\n    [data-theme='light'] {\r\n    --color-skeleton-bold: var(--gray-300);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-skeleton-bold: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Surface Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-bold: var(--gray-50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold: var(--gray-950);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface: var(--base-white);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface: var(--gray-900);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-hovered: var(--gray-100);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-hovered: var(--gray-800);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-pressed: var(--gray-200);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-pressed: var(--gray-700);\r\n  }\r\n\r\n  /* ----------------Transparent Color --------------- */\r\n  [data-theme='light'] {\r\n    --color-surface-transparent50: var(--white-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent50: var(--gray900-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent20: var(--white-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent20: var(--gray900-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-transparent-full: var(--white-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-transparent-full: var(--gray900-opacity0);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n  }\r\n\r\n  [data-theme='light'] {\r\n    --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n  }\r\n\r\n  [data-theme='dark'] {\r\n    --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n  }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n  --blur-sm: blur(4px);\r\n  --blur-md: blur(8px);\r\n  --blur-lg: blur(12px);\r\n  --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n  box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n  box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n  box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n  box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n  box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n  box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n  box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n  backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n  backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n  backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n  backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n  /* Gray Gradients */\r\n  /* --gray-gradient-600: linear-gradient(); */\r\n  --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n  --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n  --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n  --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n  --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n  /* Brand Dark Blue Gradients */\r\n  --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n  --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n  --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n  --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n  /* Brand Red Gradients */\r\n  --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n  --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n  --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n  --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n  --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n  --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n  /* Blue Gradients */\r\n  --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n  --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n  --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n  --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n  --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n  --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n  background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n  background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n  background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n  background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n  background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n  background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n  background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n  background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n  background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n  background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n  background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n  background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n  background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n  background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n  background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n  background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n  background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n  background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n  background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n  background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n  background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n  background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n  background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n  background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n  /* Positive spacing */\r\n  --spacing-none: 0rem;\r\n  --spacing-half: 0.125rem;\r\n  --spacing-1: 0.25rem;\r\n  --spacing-2: 0.5rem;\r\n  --spacing-3: 0.75rem;\r\n  --spacing-4: 1rem;\r\n  --spacing-5: 1.25rem;\r\n  --spacing-6: 1.5rem;\r\n  --spacing-7: 2rem;\r\n  --spacing-8: 2.5rem;\r\n  --spacing-12: 3rem;\r\n  --spacing-16: 4rem;\r\n  --spacing-20: 5rem;\r\n  --spacing-24: 6rem;\r\n  --spacing-32: 8rem;\r\n  --spacing-40: 10rem;\r\n  --spacing-48: 12rem;\r\n  --spacing-56: 14rem;\r\n  --spacing-64: 16rem;\r\n\r\n  /* Negative spacing */\r\n\r\n  --spacing-negative-half: -0.125rem;\r\n  --spacing-negative-1: -0.25rem;\r\n  --spacing-negative-2: -0.5rem;\r\n  --spacing-negative-3: -0.75rem;\r\n  --spacing-negative-4: -1rem;\r\n  --spacing-negative-5: -1.25rem;\r\n  --spacing-negative-6: -1.5rem;\r\n  --spacing-negative-7: -2rem;\r\n\r\n  /* Radius  */\r\n  --rounded-none: 0rem;\r\n  --rounded-xs: 0.25rem;\r\n  --rounded-sm: 0.5rem;\r\n  --rounded-md: 0.75rem;\r\n  --rounded-lg: 1rem;\r\n  --rounded-xl: 1.5rem;\r\n  --rounded-2xl: 2rem;\r\n  --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n  /* Font Sizes */\r\n  --font-size-d-2xl: 4.5rem;\r\n  --font-size-d-xl: 3.75rem;\r\n  --font-size-d-lg: 3rem;\r\n  --font-size-d-md: 2.25rem;\r\n  --font-size-d-sm: 1.875rem;\r\n  --font-size-d-xs: 1.5rem;\r\n  --font-size-t-xl: 1.25rem;\r\n  --font-size-t-lg: 1.125rem;\r\n  --font-size-t-md: 1rem;\r\n  --font-size-t-sm: 0.875rem;\r\n  --font-size-t-xs: 0.75rem;\r\n  --font-size-t-xxs: 0.625rem;\r\n\r\n  /* Font Weights */\r\n  --font-weight-bold: 700;\r\n  --font-weight-semi-bold: 600;\r\n  --font-weight-medium: 500;\r\n  --font-weight-regular: 400;\r\n\r\n  /* Line Heights */\r\n  --font-line-height-d-2xl: 5rem;\r\n  --font-line-height-d-xl: 4.25rem;\r\n  --font-line-height-d-lg: 3.75rem;\r\n  --font-line-height-d-md: 2.75rem;\r\n  --font-line-height-d-sm: 2.375rem;\r\n  --font-line-height-d-xs: 2rem;\r\n  --font-line-height-t-xl: 2rem;\r\n  --font-line-height-t-lg: 1.875rem;\r\n  --font-line-height-t-md: 1.688rem;\r\n  --font-line-height-t-sm: 1.5rem;\r\n  --font-line-height-t-xs: 1.25rem;\r\n  --font-line-height-t-xxs: 1.125rem;\r\n\r\n  /* Letter Spacings */\r\n  --font-letter-spacing-d-2xl: -0.09rem;\r\n  --font-letter-spacing-d-xl: -0.075rem;\r\n  --font-letter-spacing-d-lg: -0.075rem;\r\n  --font-letter-spacing-d-md: -0.045rem;\r\n  --font-letter-spacing-d-sm: 0;\r\n  --font-letter-spacing-d-xs: 0;\r\n  --font-letter-spacing-d-xxs: 0;\r\n\r\n  /* Font Families */\r\n  --font-family-title: 'Sora';\r\n  --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3.75rem;\r\n    --font-size-d-xl: 3.5rem;\r\n    --font-size-d-lg: 2.75rem;\r\n    --font-size-d-md: 2.25rem;\r\n    --font-size-d-sm: 1.875rem;\r\n    --font-size-d-xs: 1.5rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 4.25rem;\r\n    --font-line-height-d-xl: 3.75rem;\r\n    --font-line-height-d-lg: 2.4375rem;\r\n    --font-line-height-d-md: 2.75rem;\r\n    --font-line-height-d-sm: 2.375rem;\r\n    --font-line-height-d-xs: 2rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.075rem;\r\n    --font-letter-spacing-xl: -0.065rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: -0.045rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n  :root {\r\n    /* Font Sizes */\r\n    --font-size-d-2xl: 3rem;\r\n    --font-size-d-xl: 2.5rem;\r\n    --font-size-d-lg: 2rem;\r\n    --font-size-d-md: 1.75rem;\r\n    --font-size-d-sm: 1.5rem;\r\n    --font-size-d-xs: 1.25rem;\r\n\r\n    /* Line Heights */\r\n    --font-line-height-d-2xl: 3.375rem;\r\n    --font-line-height-d-xl: 2.875rem;\r\n    --font-line-height-d-lg: 2.5rem;\r\n    --font-line-height-d-md: 2.1375rem;\r\n    --font-line-height-d-sm: 2rem;\r\n    --font-line-height-d-xs: 1.75rem;\r\n\r\n    /* Letter Spacings */\r\n    --font-letter-spacing-2xl: -0.06rem;\r\n    --font-letter-spacing-xl: -0.05rem;\r\n    --font-letter-spacing-lg: -0.045rem;\r\n    --font-letter-spacing-md: 0rem;\r\n    --font-letter-spacing-sm: 0rem;\r\n    --font-letter-spacing-xs: 0rem;\r\n  }\r\n}\r\n\r\n.display-2xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-2xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-2xl);\r\n  letter-spacing: var(--font-letter-spacing-d-2xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n  margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n  margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xl);\r\n  letter-spacing: var(--font-letter-spacing-d-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n  margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n  margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-lg);\r\n  letter-spacing: var(--font-letter-spacing-d-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n  margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n  margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-md);\r\n  letter-spacing: var(--font-letter-spacing-d-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-sm);\r\n  letter-spacing: var(--font-letter-spacing-d-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n  margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n  margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n  margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n  margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n  font-family: var(--font-family-title);\r\n  font-size: var(--font-size-d-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-d-xs);\r\n  letter-spacing: var(--font-letter-spacing-d-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n  margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n  margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n  margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n  margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xl);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xl);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n  margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n  margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-lg);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-lg);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-md);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-md);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n  margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n  margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n  margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-sm);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-sm);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  position: relative;\r\n  display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n  margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n  margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n  margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n  margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n  margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-semi-bold);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-medium);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n  font-family: var(--font-family-body);\r\n  font-size: var(--font-size-t-xxs);\r\n  font-weight: var(--font-weight-regular);\r\n  line-height: var(--font-line-height-t-xxs);\r\n  margin: var(--spacing-none);\r\n  padding: var(--spacing-none);\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n  content: '';\r\n  display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n  margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n  margin-top: -0.416em;\r\n}\r\n\r\n\r\n.overall_container{\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_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  border-radius: var(--rounded-sm);\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  padding: var(--spacing-4);\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n  flex-direction: column;\r\n  padding: var(--spacing-6);\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.label_text{\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text{\r\n  color: var(--color-text-subtle, #697586);\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.in_progress_div.md,\r\n.error.md,\r\n.complete.md{\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.in_progress_div.lg,\r\n.error.lg,\r\n.complete.lg{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\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.upload_text{\r\n  color: var(--color-text);\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: 30%;\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-3);\r\n}\r\n\r\n.error_content_text{\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.try_again_btn{\r\n  display: flex;\r\n  width: 100%;\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 GbFileUploadItemBase = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.uploadButtonClicked = index.createEvent(this, "uploadButtonClicked");
-        this.cancelUpload = index.createEvent(this, "cancelUpload");
-        this.tryAgainClicked = index.createEvent(this, "tryAgainClicked");
-        this.deleteFileUpload = index.createEvent(this, "deleteFileUpload");
-        this.label = '';
-        this.showLabel = false;
-        this.heightSize = 'md';
-        this.progress = 0;
-        this.internalProgress = 0;
-    }
-    onStateChange(newValue, _oldValue) {
-        // console.log('state changed from', oldValue, 'to', newValue);
-        this.internalState = newValue;
-    }
-    onProgressChange(newValue, _oldValue) {
-        // console.log('progress changed from', oldValue, 'to', newValue);
-        this.internalProgress = newValue;
-    }
-    componentWillLoad() {
-        this.internalState = this.state;
-        this.internalProgress = this.progress;
-    }
-    onUploadButtonClicked() {
-        this.uploadButtonClicked.emit();
-    }
-    onCancelButtonClicked() {
-        this.cancelUpload.emit();
-    }
-    onTryAgainClicked() {
-        this.tryAgainClicked.emit();
-    }
-    onDeleteFileUploadClicked() {
-        this.deleteFileUpload.emit();
-    }
-    getReadableFileSize() {
-        if (this.fileSize === 0)
-            return '0 Bytes';
-        const k = 1024;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-        const i = Math.floor(Math.log(this.fileSize) / Math.log(k));
-        const size = parseFloat((this.fileSize / Math.pow(k, i)).toFixed(2));
-        return `${size} ${sizes[i]}`;
-    }
-    render() {
-        return (index.h("div", { key: 'b0bc513727c278a05af449b549f17949f0782dd0', class: "overall_container" }, this.showLabel && index.h("p", { key: 'e61eba81d616db995365d8578535e152b7be1947', class: "label_text text-sm-semi-bold" }, this.label), index.h("div", { key: '0f33170b83fd58df8a31fb6f8255c550b650d886', class: `file_upload_item_base_container ${this.state} ${this.heightSize}` }, this.state === 'default' && (index.h(index.Fragment, null, this.heightSize === 'md' && [
-            index.h("div", { key: '7fccbc14c933a4511f3fc45985fbe9e0bf81e1b0', class: `default ${this.heightSize}` }, index.h("div", { key: 'd29c5a490727f22d05f23de1e3cf236da0c1b9fb', class: "file_upload_icon" }, index.h("svg", { key: '92b30d92ef9ec7361d66572b7b73a14c083308db', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '12da2bdfa891221ed89249ca711a33293fe83aef', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), index.h("div", { key: '50bd21c41c30cd163f971b750616c8a40335d56b', class: "default_content" }, index.h("p", { key: '149febd0aa4ad457a76b775128488afeb2e67129', class: "upload_text text-sm-semi-bold" }, "Tap to upload"), index.h("p", { key: '719a56ad3f0af3b97fe6287b2c4d69aba88be8f5', class: "file_type_text text-xs-regular" }, this.allowedType))),
-            index.h("gb-button", { key: 'ab4352aad4720114fade2b77367cf35b129e777f', size: "sm", hierarchy: "link_color", icon: "default", class: "upload_btn_md", "icon-leading": true, onClick: () => this.onUploadButtonClicked() }, index.h("p", { key: '3726e91863ee2711c67f4643259a2b8f84fc62de' }, "Upload")),
-        ], this.heightSize === 'lg' && [
-            index.h("div", { key: '9f0e05afec49414baf598dcde0023d93c2e32d5e', class: `default ${this.heightSize}` }, index.h("div", { key: 'd0541f1b3f1b5aafe22c7c10c1438c2ee8504c17', class: "file_upload_icon" }, index.h("svg", { key: 'a28044ba6d6f9516ba55b1a23ae568854fdc3738', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '3559eec492fb50b6b1348d4f8011d4fd5a53cc18', d: "M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z", fill: "#4B5565" }))), index.h("div", { key: 'a40565922075b90eb5a5cf7b44b4b4ee81b26580', class: "default_content" }, index.h("p", { key: '231b5d5acd4c06a0c8776d7b6694ddd2b6fbbcd1', class: `upload_text text-sm-regular ${this.heightSize}` }, index.h("gb-button", { key: '81a04b00ee75c6db8f151e2abfdc7745f74f0b9e', size: "sm", hierarchy: "link_color", icon: "default", onClick: () => this.onUploadButtonClicked() }, index.h("p", { key: 'c654c5be4b406d1c3ef7c20deaa26729e8bd18dc' }, "Click to upload")), "or drag and drop"), index.h("p", { key: 'cafa6525adb0a7d590342ce1fabc71ffcab3acec', class: "file_type_text text-xs-regular" }, this.allowedType))),
-        ])), this.state === 'in_progress' && (index.h("div", { key: '813dcf47bf9fd58b7769d97b2822e7695e1f2884', class: `in_progress_div ${this.heightSize}` }, index.h("div", { key: '4de9cdc75a47e6aa24fec709e5d93d49ecfad473', class: "file_icon" }, index.h("gb-file-type-icon", { key: '60c1d33d6824aad4177d3d0124b27de0f79bc244', "file-style": this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null, "file-type": this.fileType })), index.h("div", { key: '22ace1335312cc1efda60ce31fb75eb60abcda12', class: "in_progress_content" }, this.heightSize === 'md' && (index.h(index.Fragment, null, index.h("p", { key: '3420f4ef96fea2d35429244dc34b4df16907d059', class: `file_type_text ${this.state} text-sm-medium` }, this.fileName, ".", this.fileType), index.h("p", { key: '330ad83d7d5932310fb76acbdc5ee71b954bee9e', class: `file_size_text ${this.state} text-sm-regular` }, this.getReadableFileSize()), index.h("gb-progress-bar", { key: 'fedd421d0d83d5a278cf51516660b67f50629f62', progress: this.internalProgress, "show-label": true, "label-position": "right", class: "progress_bar" }), index.h("gb-button-close", { key: '8e2b693fb02705a4085072a14b4acdb5406f0ee1', size: "sm", color: "gray", class: "close_button", onClick: () => this.onCancelButtonClicked() }))), this.heightSize === 'lg' && (index.h(index.Fragment, null, index.h("p", { key: 'e286fa1ea01bd77c5a2f7871c8679e6bfa60ede8', class: `file_type_text ${this.state} text-sm-medium` }, this.fileName, ".", this.fileType), index.h("p", { key: 'fcb6af1af0cc27768422d64bf23a84b3d444a222', class: `file_size_text ${this.state} text-sm-regular` }, this.getReadableFileSize()), index.h("gb-progress-bar", { key: '77fe9c50336d257bc3615088e793731b4528a998', progress: this.internalProgress, "show-label": true, "label-position": "right", class: "progress_bar" }), index.h("gb-button-close", { key: 'ed43e438ff0038c11e1c9a64f2b4e136f483c174', size: "sm", color: "gray", class: "close_button", onClick: () => this.onCancelButtonClicked() })))))), this.state === 'complete' && (index.h("div", { key: '0e5f55cb81263206db66dd1516a71e1fe082c0e3', class: `complete ${this.heightSize}` }, index.h("div", { key: '5d1474f59b6b5e95ac104644be0662bcce018cfd', class: "file_icon" }, index.h("gb-file-type-icon", { key: 'c5875313d7d4e37128fb338e20d4c8a4facec1b4', "file-style": this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null, "file-type": this.fileType })), index.h("div", { key: '04ee926c4793f22a1c893d032b62b1366b1beb17', class: `complete_content ${this.heightSize}` }, this.heightSize === 'md' && (index.h(index.Fragment, null, index.h("p", { key: '047c0ce3a0da233bcacee6c66ec58ecddd4e4187', class: `file_type_text ${this.state} text-sm-medium` }, this.fileName, ".", this.fileType), index.h("p", { key: 'e645134eab3bd234a9c6a2f0d7477eddeca8922a', class: `file_size_text ${this.state} text-sm-regular` }, `${this.getReadableFileSize()}`, " \u2013 ", `${this.internalProgress}`, "% uploaded"), index.h("gb-button", { key: 'c18ada64cae3ec068e4f7dbb7834cf3a14ef41bb', size: "sm", hierarchy: "tertiary_gray", icon: "only", "icon-leading": true, "icon-leading-swap": "assets/delete-02.svg", class: "delete_button", onClick: () => this.onDeleteFileUploadClicked() }))), this.heightSize === 'lg' && (index.h(index.Fragment, null, index.h("p", { key: 'dfc1fb5c81ee894edd106859db359fa38714067a', class: `file_type_text ${this.state} text-sm-medium` }, this.fileName, ".", this.fileType), index.h("p", { key: '024bf95aab002c74509406f41eb552f8b0a7b95a', class: `file_size_text ${this.state} text-sm-regular` }, this.getReadableFileSize(), " \u2013 ", `${this.internalProgress}`, " % uploaded"), index.h("gb-button", { key: 'e7d0fae64e6c4b00cc2198b3dc4f8081feeb09f1', size: "sm", hierarchy: "tertiary_gray", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/delete-02.svg", onClick: () => this.onDeleteFileUploadClicked() }, index.h("p", { key: 'a9f7a40c7869273182bada235da46c749075ac26' }, "Clear"))))))), this.state === 'error' && (index.h("div", { key: '2f7cc8763477e6abbaa2a04d84a69f0bc19494ac', class: `error ${this.heightSize}` }, index.h("div", { key: 'b054c975e8a03aa7cd0af7e49ba556b637eca97a', class: "file_icon" }, index.h("gb-file-type-icon", { key: 'b880ca03453fe1bd5e022509b4aabc2b6280e402', "file-style": this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null, "file-type": this.fileType })), index.h("div", { key: 'e9fca4135f928cb8c043c18e80c2bc205dbc4528', class: "error_content" }, this.heightSize === 'md' && (index.h(index.Fragment, null, index.h("div", { key: '90504f474b611a091956d24ed85b49319012a821', class: "error_content_text" }, index.h("p", { key: 'cee965a6eb53b71d460b53b26ee8a6f2c656190d', class: `file_type_text ${this.state} text-sm-medium` }, this.fileName, ".", this.fileType), index.h("p", { key: 'f61fa7ff8650327f2ad7e0f93ace98ba5a486bab', class: `file_size_text ${this.state} text-sm-regular` }, "Upload failed, please try again")), index.h("div", { key: '4f3f278ba4dffe4cd168925c6e4b0b1a709fd677', class: "try_again_btn" }, index.h("gb-button", { key: '2c13a4a9df8447dfe2777242b9e15b4a9542a67d', size: "sm", hierarchy: "link_color", icon: "default", destructive: true, onClick: () => this.onTryAgainClicked() }, index.h("p", { key: '40e5d7c24a1060c595728f96f010725118826d16' }, "Try again"))), index.h("gb-button", { key: 'cc41ec965c5b526ab102387271eed89f055e12a4', size: "sm", hierarchy: "tertiary_gray", icon: "only", destructive: true, "icon-leading": true, "icon-leading-swap": "assets/delete-02.svg", class: "delete_button", onClick: () => this.onDeleteFileUploadClicked() }))), this.heightSize === 'lg' && (index.h(index.Fragment, null, index.h("p", { key: '7f323f0873eba8fe30b448770a82301806c23e1a', class: `file_type_text ${this.state} text-sm-medium` }, this.fileName, ".", this.fileType), index.h("p", { key: '6de1cbe714d433da00fc92e0be3c1be993d142c5', class: `file_size_text ${this.state} text-sm-regular` }, this.getReadableFileSize(), " \u2013 ", `${this.internalProgress}`, "% uploaded"), index.h("div", { key: '5e0d1e8311ff4208393cf5783131b9e214acf279', class: "btns" }, index.h("gb-button", { key: 'ba21c5675e516b917e4f167f5a935e3bc49602db', size: "sm", hierarchy: "tertiary_gray", icon: "default", destructive: true, "icon-leading": true, "icon-leading-swap": "assets/delete-02.svg", onClick: () => this.onDeleteFileUploadClicked() }, index.h("p", { key: '403e5c1a89f88ff41dad2a0ef7ed3acadc569eb0' }, "Clear")), index.h("div", { key: '47a075c394748a09ee54e4eb9f98804a4eba5738', class: "btn" }, index.h("gb-button", { key: '5fb1c3196fe64bdc527a1769606aa60ef200f2ab', size: "sm", hierarchy: "link_color", icon: reusableModels.StateEnum.Default, destructive: true, class: "btn", onClick: () => this.onTryAgainClicked() }, index.h("p", { key: 'cca2567bbc1bb9cbeb5066f95ba6962357bb2620' }, "Try again"))))))))))));
-    }
-    static get watchers() { return {
-        "state": ["onStateChange"],
-        "progress": ["onProgressChange"]
-    }; }
-};
-GbFileUploadItemBase.style = gbFileUploadItemBaseCss;
-
-exports.gb_file_upload_item_base = GbFileUploadItemBase;
-//# sourceMappingURL=gb-file-upload-item-base.entry.cjs.js.map
-
-//# sourceMappingURL=gb-file-upload-item-base.cjs.entry.js.map

package/dist/cjs/gb-file-upload-item-base.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"gb-file-upload-item-base.entry.cjs.js","mappings":"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","names":["h","Fragment","StateEnum"],"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\r\n.overall_container{\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_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  border-radius: var(--rounded-sm);\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  padding: var(--spacing-4);\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n  flex-direction: column;\r\n  padding: var(--spacing-6);\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.label_text{\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text{\r\n  color: var(--color-text-subtle, #697586);\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.in_progress_div.md,\r\n.error.md,\r\n.complete.md{\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.in_progress_div.lg,\r\n.error.lg,\r\n.complete.lg{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\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.upload_text{\r\n  color: var(--color-text);\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: 30%;\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-3);\r\n}\r\n\r\n.error_content_text{\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.try_again_btn{\r\n  display: flex;\r\n  width: 100%;\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, Event, EventEmitter, State, Watch } from '@stencil/core';\r\nimport { FileIconTypes, 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() label: string = '';\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() state: FileUploadStates;\r\n  @Prop() heightSize: GeneralSizes = 'md';\r\n  @Prop() fileType: FileIconTypes;\r\n  @Prop() progress: number = 0;\r\n  @Prop() fileSize: number;\r\n  @Prop() fileName: string;\r\n  @Prop() allowedType: string;\r\n  @State() internalState: FileUploadStates;\r\n  @State() internalProgress: number = 0;\r\n  @Event() uploadButtonClicked: EventEmitter<void>;\r\n  @Event() cancelUpload: EventEmitter<void>;\r\n  @Event() tryAgainClicked: EventEmitter<void>;\r\n  @Event() deleteFileUpload: EventEmitter<void>;\r\n\r\n  @Watch('state')\r\n  onStateChange(newValue: FileUploadStates, _oldValue: FileUploadStates) {\r\n    // console.log('state changed from', oldValue, 'to', newValue);\r\n    this.internalState = newValue;\r\n  }\r\n\r\n  @Watch('progress')\r\n  onProgressChange(newValue: number, _oldValue: number) {\r\n    // console.log('progress changed from', oldValue, 'to', newValue);\r\n    this.internalProgress = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.internalProgress = this.progress;\r\n  }\r\n\r\n  onUploadButtonClicked() {\r\n    this.uploadButtonClicked.emit();\r\n  }\r\n\r\n  onCancelButtonClicked() {\r\n    this.cancelUpload.emit();\r\n  }\r\n\r\n  onTryAgainClicked() {\r\n    this.tryAgainClicked.emit();\r\n  }\r\n\r\n  onDeleteFileUploadClicked() {\r\n    this.deleteFileUpload.emit();\r\n  }\r\n\r\n  getReadableFileSize(): string {\r\n    if (this.fileSize === 0) return '0 Bytes';\r\n    const k = 1024;\r\n    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\r\n    const i = Math.floor(Math.log(this.fileSize) / Math.log(k));\r\n    const size = parseFloat((this.fileSize / Math.pow(k, i)).toFixed(2));\r\n    return `${size} ${sizes[i]}`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"overall_container\">\r\n        {this.showLabel && <p class=\"label_text text-sm-semi-bold\">{this.label}</p>}\r\n        <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\r\n          {this.state === 'default' && (\r\n            <>\r\n              {this.heightSize === 'md' && [\r\n                <div class={`default ${this.heightSize}`}>\r\n                  <div class=\"file_upload_icon\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                      <path\r\n                        d=\"M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z\"\r\n                        fill=\"#4B5565\"\r\n                      />\r\n                    </svg>\r\n                  </div>\r\n                  <div class=\"default_content\">\r\n                    <p class=\"upload_text text-sm-semi-bold\">Tap to upload</p>\r\n                    <p class=\"file_type_text text-xs-regular\">{this.allowedType}</p>\r\n                  </div>\r\n                </div>,\r\n                <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" class=\"upload_btn_md\" icon-leading={true} onClick={() => this.onUploadButtonClicked()}>\r\n                  <p>Upload</p>\r\n                </gb-button>,\r\n              ]}\r\n              {this.heightSize === 'lg' && [\r\n                <div class={`default ${this.heightSize}`}>\r\n                  <div class=\"file_upload_icon\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                      <path\r\n                        d=\"M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z\"\r\n                        fill=\"#4B5565\"\r\n                      />\r\n                    </svg>\r\n                  </div>\r\n                  <div class=\"default_content\">\r\n                    <p class={`upload_text text-sm-regular ${this.heightSize}`}>\r\n                      <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" onClick={() => this.onUploadButtonClicked()}>\r\n                        <p>Click to upload</p>\r\n                      </gb-button>\r\n                      or drag and drop\r\n                    </p>\r\n                    <p class=\"file_type_text text-xs-regular\">{this.allowedType}</p>\r\n                  </div>\r\n                </div>,\r\n              ]}\r\n            </>\r\n          )}\r\n          {this.state === 'in_progress' && (\r\n            <div class={`in_progress_div ${this.heightSize}`}>\r\n              <div class=\"file_icon\">\r\n                <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n              </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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>{this.getReadableFileSize()}</p>\r\n                    <gb-progress-bar progress={this.internalProgress} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n                    <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.onCancelButtonClicked()}></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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>{this.getReadableFileSize()}</p>\r\n                    <gb-progress-bar progress={this.internalProgress} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n                    <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.onCancelButtonClicked()}></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\">\r\n                <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n              </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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n                      {`${this.getReadableFileSize()}`} – {`${this.internalProgress}`}% uploaded\r\n                    </p>\r\n                    <gb-button\r\n                      size=\"sm\"\r\n                      hierarchy=\"tertiary_gray\"\r\n                      icon=\"only\"\r\n                      icon-leading={true}\r\n                      icon-leading-swap=\"assets/delete-02.svg\"\r\n                      class=\"delete_button\"\r\n                      onClick={() => this.onDeleteFileUploadClicked()}\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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n                      {this.getReadableFileSize()} – {`${this.internalProgress}`} % uploaded\r\n                    </p>\r\n                    <gb-button\r\n                      size=\"sm\"\r\n                      hierarchy=\"tertiary_gray\"\r\n                      icon=\"default\"\r\n                      icon-leading={true}\r\n                      icon-leading-swap=\"assets/delete-02.svg\"\r\n                      onClick={() => this.onDeleteFileUploadClicked()}\r\n                    >\r\n                      <p>Clear</p>\r\n                    </gb-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\">\r\n                <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n              </div>\r\n              <div class=\"error_content\">\r\n                {this.heightSize === 'md' && (\r\n                  <>\r\n                    <div class=\"error_content_text\">\r\n                      <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n                        {this.fileName}.{this.fileType}\r\n                      </p>\r\n                      <p class={`file_size_text ${this.state} text-sm-regular`}>Upload failed, please try again</p>\r\n                    </div>\r\n                    <div class=\"try_again_btn\">\r\n                      <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" destructive={true} onClick={() => this.onTryAgainClicked()}>\r\n                        <p>Try again</p>\r\n                      </gb-button>\r\n                    </div>\r\n                    <gb-button\r\n                      size=\"sm\"\r\n                      hierarchy=\"tertiary_gray\"\r\n                      icon=\"only\"\r\n                      destructive={true}\r\n                      icon-leading={true}\r\n                      icon-leading-swap=\"assets/delete-02.svg\"\r\n                      class=\"delete_button\"\r\n                      onClick={() => this.onDeleteFileUploadClicked()}\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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n                      {this.getReadableFileSize()} – {`${this.internalProgress}`}% uploaded\r\n                    </p>\r\n                    <div class=\"btns\">\r\n                      <gb-button\r\n                        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=\"assets/delete-02.svg\"\r\n                        onClick={() => this.onDeleteFileUploadClicked()}\r\n                      >\r\n                        <p>Clear</p>\r\n                      </gb-button>\r\n                      <div class=\"btn\">\r\n                        <gb-button size=\"sm\" hierarchy=\"link_color\" icon={StateEnum.Default} destructive={true} class=\"btn\" onClick={() => this.onTryAgainClicked()}>\r\n                          <p>Try again</p>\r\n                        </gb-button>\r\n                      </div>\r\n                    </div>\r\n                  </>\r\n                )}\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/gb-file-upload-item-base.entry.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gb-file-upload-item-base.entry.cjs.js","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\r\n.overall_container{\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_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  border-radius: var(--rounded-sm);\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  padding: var(--spacing-4);\r\n}\r\n\r\n.file_upload_item_base_container.lg{\r\n  flex-direction: column;\r\n  padding: var(--spacing-6);\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.label_text{\r\n  color: var(--color-text, #4B5565);\r\n}\r\n\r\n.file_type_text{\r\n  color: var(--color-text-subtle, #697586);\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.in_progress_div.md,\r\n.error.md,\r\n.complete.md{\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--spacing-1);\r\n}\r\n\r\n.in_progress_div.lg,\r\n.error.lg,\r\n.complete.lg{\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: var(--spacing-3);\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.upload_text{\r\n  color: var(--color-text);\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: 30%;\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-3);\r\n}\r\n\r\n.error_content_text{\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.try_again_btn{\r\n  display: flex;\r\n  width: 100%;\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, Event, EventEmitter, State, Watch } from '@stencil/core';\r\nimport { FileIconTypes, 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() label: string = '';\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() state: FileUploadStates;\r\n  @Prop() heightSize: GeneralSizes = 'md';\r\n  @Prop() fileType: FileIconTypes;\r\n  @Prop() progress: number = 0;\r\n  @Prop() fileSize: number;\r\n  @Prop() fileName: string;\r\n  @Prop() allowedType: string;\r\n  @State() internalState: FileUploadStates;\r\n  @State() internalProgress: number = 0;\r\n  @Event() uploadButtonClicked: EventEmitter<void>;\r\n  @Event() cancelUpload: EventEmitter<void>;\r\n  @Event() tryAgainClicked: EventEmitter<void>;\r\n  @Event() deleteFileUpload: EventEmitter<void>;\r\n\r\n  @Watch('state')\r\n  onStateChange(newValue: FileUploadStates, _oldValue: FileUploadStates) {\r\n    // console.log('state changed from', oldValue, 'to', newValue);\r\n    this.internalState = newValue;\r\n  }\r\n\r\n  @Watch('progress')\r\n  onProgressChange(newValue: number, _oldValue: number) {\r\n    // console.log('progress changed from', oldValue, 'to', newValue);\r\n    this.internalProgress = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.internalProgress = this.progress;\r\n  }\r\n\r\n  onUploadButtonClicked() {\r\n    this.uploadButtonClicked.emit();\r\n  }\r\n\r\n  onCancelButtonClicked() {\r\n    this.cancelUpload.emit();\r\n  }\r\n\r\n  onTryAgainClicked() {\r\n    this.tryAgainClicked.emit();\r\n  }\r\n\r\n  onDeleteFileUploadClicked() {\r\n    this.deleteFileUpload.emit();\r\n  }\r\n\r\n  getReadableFileSize(): string {\r\n    if (this.fileSize === 0) return '0 Bytes';\r\n    const k = 1024;\r\n    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];\r\n    const i = Math.floor(Math.log(this.fileSize) / Math.log(k));\r\n    const size = parseFloat((this.fileSize / Math.pow(k, i)).toFixed(2));\r\n    return `${size} ${sizes[i]}`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"overall_container\">\r\n        {this.showLabel && <p class=\"label_text text-sm-semi-bold\">{this.label}</p>}\r\n        <div class={`file_upload_item_base_container ${this.state} ${this.heightSize}`}>\r\n          {this.state === 'default' && (\r\n            <>\r\n              {this.heightSize === 'md' && [\r\n                <div class={`default ${this.heightSize}`}>\r\n                  <div class=\"file_upload_icon\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                      <path\r\n                        d=\"M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z\"\r\n                        fill=\"#4B5565\"\r\n                      />\r\n                    </svg>\r\n                  </div>\r\n                  <div class=\"default_content\">\r\n                    <p class=\"upload_text text-sm-semi-bold\">Tap to upload</p>\r\n                    <p class=\"file_type_text text-xs-regular\">{this.allowedType}</p>\r\n                  </div>\r\n                </div>,\r\n                <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" class=\"upload_btn_md\" icon-leading={true} onClick={() => this.onUploadButtonClicked()}>\r\n                  <p>Upload</p>\r\n                </gb-button>,\r\n              ]}\r\n              {this.heightSize === 'lg' && [\r\n                <div class={`default ${this.heightSize}`}>\r\n                  <div class=\"file_upload_icon\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n                      <path\r\n                        d=\"M17.5 9.01101V8.261L17.4981 8.26101L17.5 9.01101ZM9.54945 9.61023C9.8804 9.85933 10.3506 9.79298 10.5997 9.46204C10.8488 9.1311 10.7825 8.66088 10.4515 8.41178L9.54945 9.61023ZM15.6641 11.5394C15.4006 11.8591 15.4462 12.3317 15.7658 12.5952C16.0854 12.8587 16.5581 12.8132 16.8216 12.4936L15.6641 11.5394ZM17.9174 17.2546C17.5057 17.3002 17.209 17.6709 17.2546 18.0826C17.3002 18.4943 17.6709 18.791 18.0826 18.7454L17.9174 17.2546ZM5.85054 18.6623C6.25644 18.7448 6.65241 18.4827 6.73496 18.0768C6.8175 17.6709 6.55537 17.2749 6.14946 17.1924L5.85054 18.6623ZM12 13V12.25V13ZM11.25 21C11.25 21.4142 11.5858 21.75 12 21.75C12.4142 21.75 12.75 21.4142 12.75 21H11.25ZM8.96219 14.9773C8.67349 15.2743 8.68023 15.7491 8.97726 16.0378C9.27428 16.3265 9.74911 16.3198 10.0378 16.0227L8.96219 14.9773ZM13.9622 16.0227C14.2509 16.3198 14.7257 16.3265 15.0227 16.0378C15.3198 15.7491 15.3265 15.2743 15.0378 14.9773L13.9622 16.0227ZM12 3.75C14.6221 3.75 16.75 5.87987 16.75 8.51009H18.25C18.25 5.05403 15.4531 2.25 12 2.25V3.75ZM17.5 9.76101C19.5698 9.76101 21.25 11.4423 21.25 13.5193H22.75C22.75 10.6165 20.4008 8.26101 17.5 8.26101V9.76101ZM17.4794 9.76106L17.5019 9.761L17.4981 8.26101L17.4757 8.26106L17.4794 9.76106ZM16.75 8.51009C16.75 8.6565 16.7434 8.80117 16.7306 8.94386L18.2246 9.07826C18.2414 8.89095 18.25 8.70143 18.25 8.51009H16.75ZM2.75 13.0183C2.75 10.8031 4.43748 8.98389 6.5916 8.77853L6.44924 7.2853C3.53048 7.56356 1.25 10.0247 1.25 13.0183H2.75ZM6.5916 8.77853C6.72581 8.76574 6.86203 8.75917 7 8.75917V7.25917C6.81443 7.25917 6.6307 7.268 6.44924 7.2853L6.5916 8.77853ZM7.26768 8.09603C7.47668 5.66023 9.51709 3.75 12 3.75V2.25C8.72939 2.25 6.04797 4.76511 5.77317 7.9678L7.26768 8.09603ZM7 8.75917C7.95746 8.75917 8.83914 9.07557 9.54945 9.61023L10.4515 8.41178C9.49035 7.68831 8.29419 7.25917 7 7.25917V8.75917ZM16.7306 8.94386C16.6423 9.92517 16.2569 10.8203 15.6641 11.5394L16.8216 12.4936C17.6003 11.5489 18.1084 10.37 18.2246 9.07826L16.7306 8.94386ZM21.25 13.5193C21.25 15.4544 19.7906 17.0471 17.9174 17.2546L18.0826 18.7454C20.7093 18.4545 22.75 16.2252 22.75 13.5193H21.25ZM6.14946 17.1924C4.21067 16.7981 2.75 15.079 2.75 13.0183H1.25C1.25 15.8044 3.22485 18.1283 5.85054 18.6623L6.14946 17.1924ZM11.25 13V21H12.75V13H11.25ZM12 12.25C11.7417 12.25 11.5193 12.339 11.3578 12.4254C11.1904 12.515 11.0348 12.631 10.8968 12.7485C10.6213 12.9832 10.3457 13.285 10.0995 13.5755C9.85056 13.8693 9.60952 14.1784 9.40971 14.4328C9.19651 14.7042 9.05089 14.886 8.96219 14.9773L10.0378 16.0227C10.1949 15.8612 10.3971 15.604 10.5893 15.3593C10.7949 15.0975 11.0169 14.8132 11.2439 14.5452C11.4738 14.274 11.6873 14.0456 11.8694 13.8905C11.9601 13.8132 12.0255 13.7694 12.0656 13.7479C12.1116 13.7233 12.0832 13.75 12 13.75V12.25ZM15.0378 14.9773C14.9491 14.886 14.8035 14.7042 14.5903 14.4328C14.3905 14.1784 14.1494 13.8693 13.9005 13.5755C13.6543 13.285 13.3787 12.9832 13.1032 12.7485C12.9652 12.631 12.8096 12.515 12.6422 12.4254C12.4807 12.339 12.2583 12.25 12 12.25V13.75C11.9168 13.75 11.8884 13.7233 11.9344 13.7479C11.9745 13.7694 12.0399 13.8132 12.1306 13.8905C12.3127 14.0456 12.5262 14.274 12.7561 14.5452C12.9831 14.8132 13.2051 15.0975 13.4107 15.3593C13.6029 15.604 13.8051 15.8612 13.9622 16.0227L15.0378 14.9773Z\"\r\n                        fill=\"#4B5565\"\r\n                      />\r\n                    </svg>\r\n                  </div>\r\n                  <div class=\"default_content\">\r\n                    <p class={`upload_text text-sm-regular ${this.heightSize}`}>\r\n                      <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" onClick={() => this.onUploadButtonClicked()}>\r\n                        <p>Click to upload</p>\r\n                      </gb-button>\r\n                      or drag and drop\r\n                    </p>\r\n                    <p class=\"file_type_text text-xs-regular\">{this.allowedType}</p>\r\n                  </div>\r\n                </div>,\r\n              ]}\r\n            </>\r\n          )}\r\n          {this.state === 'in_progress' && (\r\n            <div class={`in_progress_div ${this.heightSize}`}>\r\n              <div class=\"file_icon\">\r\n                <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n              </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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>{this.getReadableFileSize()}</p>\r\n                    <gb-progress-bar progress={this.internalProgress} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n                    <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.onCancelButtonClicked()}></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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>{this.getReadableFileSize()}</p>\r\n                    <gb-progress-bar progress={this.internalProgress} show-label={true} label-position=\"right\" class=\"progress_bar\"></gb-progress-bar>\r\n                    <gb-button-close size=\"sm\" color=\"gray\" class=\"close_button\" onClick={() => this.onCancelButtonClicked()}></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\">\r\n                <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n              </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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n                      {`${this.getReadableFileSize()}`} – {`${this.internalProgress}`}% uploaded\r\n                    </p>\r\n                    <gb-button\r\n                      size=\"sm\"\r\n                      hierarchy=\"tertiary_gray\"\r\n                      icon=\"only\"\r\n                      icon-leading={true}\r\n                      icon-leading-swap=\"assets/delete-02.svg\"\r\n                      class=\"delete_button\"\r\n                      onClick={() => this.onDeleteFileUploadClicked()}\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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n                      {this.getReadableFileSize()} – {`${this.internalProgress}`} % uploaded\r\n                    </p>\r\n                    <gb-button\r\n                      size=\"sm\"\r\n                      hierarchy=\"tertiary_gray\"\r\n                      icon=\"default\"\r\n                      icon-leading={true}\r\n                      icon-leading-swap=\"assets/delete-02.svg\"\r\n                      onClick={() => this.onDeleteFileUploadClicked()}\r\n                    >\r\n                      <p>Clear</p>\r\n                    </gb-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\">\r\n                <gb-file-type-icon file-style={this.icon === 'outline' ? 'default' : this.icon === 'solid' ? 'solid' : null} file-type={this.fileType}></gb-file-type-icon>\r\n              </div>\r\n              <div class=\"error_content\">\r\n                {this.heightSize === 'md' && (\r\n                  <>\r\n                    <div class=\"error_content_text\">\r\n                      <p class={`file_type_text ${this.state} text-sm-medium`}>\r\n                        {this.fileName}.{this.fileType}\r\n                      </p>\r\n                      <p class={`file_size_text ${this.state} text-sm-regular`}>Upload failed, please try again</p>\r\n                    </div>\r\n                    <div class=\"try_again_btn\">\r\n                      <gb-button size=\"sm\" hierarchy=\"link_color\" icon=\"default\" destructive={true} onClick={() => this.onTryAgainClicked()}>\r\n                        <p>Try again</p>\r\n                      </gb-button>\r\n                    </div>\r\n                    <gb-button\r\n                      size=\"sm\"\r\n                      hierarchy=\"tertiary_gray\"\r\n                      icon=\"only\"\r\n                      destructive={true}\r\n                      icon-leading={true}\r\n                      icon-leading-swap=\"assets/delete-02.svg\"\r\n                      class=\"delete_button\"\r\n                      onClick={() => this.onDeleteFileUploadClicked()}\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`}>\r\n                      {this.fileName}.{this.fileType}\r\n                    </p>\r\n                    <p class={`file_size_text ${this.state} text-sm-regular`}>\r\n                      {this.getReadableFileSize()} – {`${this.internalProgress}`}% uploaded\r\n                    </p>\r\n                    <div class=\"btns\">\r\n                      <gb-button\r\n                        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=\"assets/delete-02.svg\"\r\n                        onClick={() => this.onDeleteFileUploadClicked()}\r\n                      >\r\n                        <p>Clear</p>\r\n                      </gb-button>\r\n                      <div class=\"btn\">\r\n                        <gb-button size=\"sm\" hierarchy=\"link_color\" icon={StateEnum.Default} destructive={true} class=\"btn\" onClick={() => this.onTryAgainClicked()}>\r\n                          <p>Try again</p>\r\n                        </gb-button>\r\n                      </div>\r\n                    </div>\r\n                  </>\r\n                )}\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["h","Fragment","StateEnum"],"mappings":"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"}

package/dist/components/p-C0IxISjA.js.map

@@ -1 +0,0 @@
-{"file":"p-C0IxISjA.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.css?tag=gb-simple-side-bar-item&encapsulation=shadow","src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n  position: relative;\r\n}\r\n\r\n.side_bar_item_container {\r\n  padding: 0 var(--spacing-4);\r\n}\r\n\r\n.nav_item_base.icon_only {\r\n  width: fit-content;\r\n}\r\n\r\n.nav_item_base {\r\n  display: flex;\r\n  padding: var(--spacing-2) var(--spacing-3);\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  align-self: stretch;\r\n  border-radius: var(--rounded-sm);\r\n  cursor: pointer;\r\n  position: relative;\r\n  flex-grow: 1;\r\n}\r\n\r\n.content {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.75rem;\r\n  flex-grow: 1;\r\n  max-width: 100%;\r\n}\r\n\r\n.bar {\r\n  position: absolute;\r\n  left: 0rem;\r\n  width: 0.25rem;\r\n  height: 1.25rem;\r\n}\r\n\r\n.icon {\r\n  display: flex;\r\n  align-items: center;\r\n  width: 1.5rem;\r\n  height: 1.5rem;\r\n}\r\n\r\n.label_text {\r\n  max-width: 100%;\r\n  overflow-x: hidden;\r\n  overflow-y: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.label_text::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n/* State and Category Styles */\r\n.nav_item_base.plain_background.default,\r\n.nav_item_base.colored_background.default {\r\n  background: transparent;\r\n}\r\n\r\n.nav_item_base.plain_background.active {\r\n  background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.nav_item_base.default.plain_background:hover {\r\n  background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.nav_item_base.colored_background.active {\r\n  background: var(--blue-800, #042f59);\r\n}\r\n\r\n.nav_item_base.default.colored_background:hover {\r\n  background: rgba(33, 44, 101, 0.4);\r\n}\r\n\r\n.label_text.plain_background.default {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.label_text.plain_background.active {\r\n  color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.label_text.colored_background {\r\n  color: var(--base-white, #ffffff);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background.default path[stroke] {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.default path[fill] {\r\n  fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.default path#Icon[stroke] {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.default path#Icon[fill] {\r\n  fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[stroke] {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.default circle[stroke] {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n  fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background.default path[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.default path[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background path#Icon[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background circle[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active circle[stroke] {\r\n  stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n  fill: var(--base-white, #ffffff);\r\n}\r\n\r\n/* .icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n  fill: transparent;\r\n} */\r\n\r\n.icon.plain_background.default path.has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.plain_background.default circle.has_opacity,\r\n.icon.colored_background.default path.has_opacity,\r\n.icon.colored_background.default g.has_opacity,\r\n.icon.colored_background.default circle.has_opacity{\r\n  opacity: 0;\r\n}\r\n\r\n.icon.plain_background.active path.has_opacity,\r\n.icon.plain_background.active g.has_opacity,\r\n.icon.plain_background.active circle.has_opacity,\r\n.icon.colored_background.active path.has_opacity,\r\n.icon.colored_background.active g.has_opacity,\r\n.icon.colored_background.active circle.has_opacity{\r\n  opacity: 0.5;\r\n}\r\n\r\n/* .icon.plain_background.default path[fill].has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.colored_background.default path[fill].has_opacity,\r\n.icon.colored_background.default g.has_opacity{\r\n  fill: transparent;\r\n} */\r\n\r\n/* Arrow Color Styles */\r\n.arrow.default.plain_background path {\r\n  stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.arrow.active.plain_background path {\r\n  stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.arrow.default.colored_background path {\r\n  stroke: var(--color-icon-inverse, #ffffff);\r\n}\r\n\r\n.arrow.active.colored_background path {\r\n  stroke: var(--color-icon-inverse, #ffffff);\r\n}\r\n\r\n.tooltip {\r\n  position: absolute;\r\n  top: 0.2rem;\r\n  left: 4.3rem;\r\n}\r\n","import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element, Watch } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-simple-side-bar-item',\r\n  styleUrl: 'gb-simple-side-bar-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbSimpleSideBarItem {\r\n  @Prop() state: 'default' | 'active';\r\n  @Prop() type: 'full_with_label' | 'icon_only';\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() showArrow: boolean = false;\r\n  @Prop() showBadge: boolean = false;\r\n  @Prop({ mutable: true }) showTooltip: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() internalIcon: string = '';\r\n  @Event() sideBarItemClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n\r\n    const parser = new DOMParser();\r\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n    const svgElement = svgDoc.documentElement;\r\n\r\n    // Add `has-opacity` class to all elements that have an opacity attribute\r\n    const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n    elementsWithOpacity.forEach(el => {\r\n      el.classList.add('has_opacity');\r\n    });\r\n\r\n    // Serialize and store\r\n    const modifiedSvg = svgElement.outerHTML;\r\n    // console.log(modifiedSvg)\r\n    this.leadingIconSvg = modifiedSvg;\r\n  }\r\n\r\n  @Watch('icon')\r\n  updateSidebarIcon(newValue: string, _oldValue: string) {\r\n    this.internalIcon = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n\r\n    this.internalIcon = this.icon;\r\n  }\r\n\r\n  onSideBarItemClicked() {\r\n    this.sideBarItemClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    const redBarSrc = getAssetPath(`assets/bar.svg`);\r\n    const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);\r\n\r\n    return (\r\n      <div class={`side_bar_item_container`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n        <div class={`nav_item_base ${this.state} ${this.type} ${this.category}`}>\r\n          {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n          {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n          <div class=\"content\">\r\n            <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n            {this.type === 'full_with_label' && (\r\n              <p class={`label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}`}>{this.label}</p>\r\n            )}\r\n          </div>\r\n          {this.type === 'full_with_label' && (\r\n            <>\r\n              {this.showBadge && (\r\n                <gb-badge size=\"sm\" type=\"pill_outline\" color={this.state === 'active' ? 'information' : 'gray'}>\r\n                  <p>10</p>\r\n                </gb-badge>\r\n              )}\r\n              {this.showArrow && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`arrow ${this.state} ${this.category}`}>\r\n                  <path\r\n                    d=\"M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12\"\r\n                    stroke=\"#212C65\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n        {this.type === 'icon_only' && this.showTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n            <p slot=\"label\">{this.label}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}