npm - globuswebcomponents - Versions diffs - 2.6.14 → 2.6.16 - Mend

globuswebcomponents 2.6.14 → 2.6.16

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

Files changed (197) hide show

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

	@@ -1 +1 @@
1	- {"file":"gb-header.js","mappings":"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","names":["GbHeader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.header_div {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n width: 100%;\r\n background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.header_div.border {\r\n border-bottom: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.content {\r\n display: flex;\r\n height: 4.5rem;\r\n padding: 0rem 2rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n align-self: stretch;\r\n}\r\n\r\n.logo {\r\n display: block;\r\n}\r\n\r\n.icon_logo {\r\n display: none;\r\n}\r\n\r\n.header_logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.69rem;\r\n}\r\n\r\n.inner_content {\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n flex: 1 0 0;\r\n position: relative;\r\n}\r\n\r\n.action {\r\n display: flex;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.search {\r\n width: 20rem;\r\n}\r\n\r\n.help,\r\n.notification {\r\n position: relative;\r\n}\r\n\r\n.avatar_dropdown {\r\n position: absolute;\r\n top: 110%;\r\n right: 0;\r\n z-index: 9999;\r\n}\r\n\r\n::slotted([slot='name'] p) {\r\n color: var(--color-text, #4b5565);\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n::slotted([slot='supporting_text'] p) {\r\n color: var(--color-text-subtle, #697586);\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.notification_dropdown {\r\n position: absolute;\r\n top: 110%;\r\n right: 0;\r\n z-index: 9999;\r\n}\r\n\r\n.help_dropdown {\r\n position: absolute;\r\n top: 110%;\r\n right: 0;\r\n z-index: 9999;\r\n}\r\n\r\n@media (max-width: 440px) {\r\n .content {\r\n padding: var(--spacing-none) var(--spacing-5);\r\n }\r\n}\r\n\r\n@media (max-width: 450px) {\r\n .logo {\r\n display: none;\r\n }\r\n\r\n .icon_logo {\r\n display: block;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, getAssetPath, h, Prop, State, Listen } from '@stencil/core';\r\nimport { ColorTypes, DropdownListGroup, DropdownRoles, Notification, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-header',\r\n styleUrl: 'gb-header.css',\r\n shadow: true,\r\n})\r\nexport class GbHeader {\r\n @Prop() state: StateEnum;\r\n @Prop() showIndicator: boolean = false;\r\n @Prop() text: boolean = true;\r\n @Prop() placeholder: boolean = false;\r\n @Prop() color: ColorTypes = 'blue';\r\n @Prop() showBorder: boolean = true;\r\n @Prop() showNotification: boolean = false;\r\n @Prop() showHelp: boolean = false;\r\n @Prop() showLogo: boolean = false;\r\n @Prop() logo: string = '';\r\n @Prop() showSearch: boolean = false;\r\n @Prop() inputPlaceholder: string = '';\r\n @Prop() inputIcon: string = '';\r\n @Prop() avatarDropdownType: 'simple' \| 'complex' = 'simple';\r\n @Prop() listGroupOne: DropdownListGroup[] = [\r\n // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n ];\r\n @Prop() listGroupTwo: DropdownListGroup[] = [\r\n // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n ];\r\n @Prop() showThemeTab: boolean = true;\r\n @Prop() showProfile: boolean = false;\r\n @Prop() showRoles: boolean = false;\r\n @Prop() roles: DropdownRoles[] = [\r\n // {\r\n // badgeLabel: 'Initiator',\r\n // badgeColor: 'information',\r\n // badgeType: 'badge_color',\r\n // },\r\n // {\r\n // badgeLabel: 'Authorizer',\r\n // badgeColor: 'success',\r\n // badgeType: 'badge_color',\r\n // },\r\n // {\r\n // badgeLabel: 'Viewer',\r\n // badgeColor: 'gray',\r\n // badgeType: 'badge_color',\r\n // },\r\n ];\r\n @Prop() showLogOut: boolean = false;\r\n @Prop() showLogError: boolean = false;\r\n @Prop() notificationState: 'empty' \| 'notification_dropdown';\r\n @Prop({ mutable: true }) notifications: Notification[] = [\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n ];\r\n @State() avatarDropdownShown: boolean = false;\r\n @State() notificationDropdownShown: boolean = false;\r\n @State() helpDropdownShown: boolean = false;\r\n @State() initials: string = '';\r\n @Element() el: HTMLElement;\r\n @Event() navBarItemClicked: EventEmitter<string>;\r\n @Event() menuClicked: EventEmitter<void>;\r\n @Event() inputValueChanged: EventEmitter<string>;\r\n @Event() helpItemClicked: EventEmitter<string>;\r\n @Event() themeTabClicked: EventEmitter<string>;\r\n @Event() avatarDropdownItemClicked: EventEmitter<string>;\r\n\r\n avatarDropdown!: HTMLElement;\r\n notificationDropdown!: HTMLElement;\r\n helpDropdown!: HTMLElement;\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n onSearch(item) {\r\n this.inputValueChanged.emit(item.detail);\r\n }\r\n\r\n componentDidLoad() {\r\n document.addEventListener('click', this.handleClickOutside);\r\n\r\n const name = this.el.querySelector(\"[slot='name']\");\r\n const supportingText = this.el.querySelector(\"[slot='supporting_text']\");\r\n const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n if (initials) {\r\n initials.classList.add('text-md-semi-bold');\r\n initials.classList.add(this.applyColorToInitials());\r\n }\r\n\r\n if (name) {\r\n name.classList.add('text-sm-semi-bold');\r\n }\r\n\r\n if (supportingText) {\r\n supportingText.classList.add('text-sm-regular');\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n if (initials) {\r\n this.initials = initials.textContent;\r\n }\r\n }\r\n\r\n helpDropdownItemClicked(item) {\r\n this.helpItemClicked.emit(item.detail);\r\n }\r\n\r\n onThemeTabClicked(tab) {\r\n this.themeTabClicked.emit(tab.detail);\r\n }\r\n\r\n onAvatarDropdownItemClicked(item) {\r\n console.log(item.detail);\r\n this.avatarDropdownItemClicked.emit(item.detail);\r\n }\r\n\r\n onNotificationDropdownItemClicked(item) {\r\n console.log(item.detail);\r\n // this.avatarDropdownItemClicked.emit(item.detail);\r\n }\r\n\r\n @Listen('click', { target: 'document' })\r\n handleClickOutside(event: MouseEvent) {\r\n if (this.avatarDropdownShown && !this.el.contains(event.target as Node)) {\r\n this.avatarDropdownShown = false;\r\n }\r\n\r\n if (this.helpDropdownShown && !this.el.contains(event.target as Node)) {\r\n this.helpDropdownShown = false;\r\n }\r\n\r\n if (this.notificationDropdownShown && !this.el.contains(event.target as Node)) {\r\n this.notificationDropdownShown = false;\r\n }\r\n }\r\n\r\n renderLogo() {\r\n const logo = this.el.querySelector('[slot=\"logo\"]');\r\n const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);\r\n\r\n if (logo) {\r\n return <slot name=\"logo\"></slot>;\r\n } else {\r\n return (\r\n <div class=\"header_logo\">\r\n <img src={logoSrc} alt=\"\" />\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"117\" height=\"17\" viewBox=\"0 0 117 17\" fill=\"none\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M55.977 12.6264C56.3596 13.1025 56.8394 13.4915 57.3843 13.7674C57.9292 14.0434 58.5268 14.1998 59.137 14.2264C59.3682 14.2276 59.5989 14.2038 59.825 14.1554C60.0203 14.1134 60.2068 14.0376 60.376 13.9314C60.5266 13.8276 60.6514 13.6908 60.741 13.5314C60.8332 13.3494 60.8789 13.1473 60.874 12.9434C60.8797 12.7871 60.8427 12.6322 60.767 12.4954C60.6928 12.3641 60.5948 12.2478 60.478 12.1524C60.3548 12.0522 60.2206 11.9663 60.078 11.8964C59.9369 11.8205 59.7898 11.7567 59.638 11.7054C59.365 11.6054 59.092 11.4954 58.821 11.4054C58.55 11.3154 58.285 11.2194 58.009 11.1054C57.856 11.0544 57.668 10.9864 57.454 10.9054C57.2189 10.8192 56.9891 10.7191 56.766 10.6054C56.5267 10.4828 56.2967 10.3428 56.078 10.1864C55.8479 10.0188 55.6411 9.82143 55.463 9.59936C55.2755 9.3641 55.1254 9.10136 55.018 8.82037C54.8987 8.50077 54.841 8.16145 54.848 7.82037C54.8385 7.38435 54.9601 6.95552 55.197 6.58938C55.4368 6.22409 55.7548 5.91665 56.128 5.68935C56.5352 5.44285 56.9786 5.26199 57.442 5.15337C57.9371 5.03187 58.4452 4.9714 58.955 4.97335C59.7154 4.96345 60.4735 5.05835 61.208 5.25536C61.883 5.44235 62.5133 5.76379 63.061 6.20037L61.881 7.97738C61.675 7.77738 61.475 7.59837 61.276 7.43737C61.0823 7.28066 60.8736 7.14333 60.653 7.02737C60.4242 6.91238 60.1825 6.82509 59.933 6.76736C59.6405 6.70771 59.3425 6.67923 59.044 6.68237C58.8003 6.6793 58.5576 6.71302 58.324 6.78237C58.1425 6.83794 57.973 6.92678 57.824 7.04437C57.7018 7.14787 57.6053 7.27829 57.542 7.42538C57.4813 7.5669 57.4503 7.71939 57.451 7.87338C57.4479 8.03229 57.4929 8.18844 57.58 8.32137C57.6712 8.45192 57.7854 8.56477 57.917 8.65438C58.0598 8.75308 58.2135 8.83495 58.375 8.89837C58.549 8.96737 58.724 9.03036 58.903 9.08737C59.183 9.18737 59.467 9.28736 59.749 9.37936C60.031 9.47136 60.313 9.57035 60.592 9.66735C60.731 9.72035 60.902 9.77936 61.104 9.85336C61.3158 9.93021 61.522 10.0218 61.721 10.1274C61.945 10.2432 62.1576 10.3798 62.356 10.5354C62.571 10.6981 62.7616 10.8907 62.922 11.1074C63.0947 11.347 63.2296 11.6118 63.322 11.8924C63.4341 12.2242 63.4876 12.5731 63.48 12.9234C63.4886 13.3821 63.3593 13.8329 63.109 14.2174C62.8572 14.5968 62.5255 14.9167 62.137 15.1544C61.711 15.4162 61.2468 15.6099 60.761 15.7284C60.2447 15.8581 59.7143 15.923 59.182 15.9214C58.7286 15.9217 58.2755 15.896 57.825 15.8444C57.4131 15.7956 57.0069 15.7072 56.612 15.5804C56.2266 15.4585 55.8573 15.2906 55.512 15.0804C55.152 14.8574 54.8226 14.5884 54.532 14.2804L55.977 12.6264ZM46.023 5.15136V12.3824C46.0171 12.6297 46.0603 12.8758 46.15 13.1064C46.2233 13.2937 46.3378 13.4622 46.485 13.5994C46.6276 13.7299 46.7989 13.8251 46.985 13.8774C47.1837 13.9372 47.3905 13.9659 47.598 13.9624C48.1129 13.9605 48.6258 13.9001 49.127 13.7824C49.6297 13.6726 50.1117 13.4836 50.555 13.2224V5.14636H53.165V13.8624C53.1705 14.1064 53.1909 14.3498 53.226 14.5914C53.262 14.9064 53.326 15.2774 53.403 15.7014H50.93C50.916 15.6614 50.893 15.5894 50.866 15.4774C50.839 15.3654 50.805 15.2534 50.772 15.1304C50.739 15.0074 50.715 14.8904 50.687 14.7814C50.6662 14.7 50.6501 14.6176 50.639 14.5344C50.4019 14.7386 50.1461 14.9201 49.875 15.0764C49.5915 15.2448 49.2941 15.3887 48.986 15.5064C48.6826 15.626 48.3695 15.719 48.05 15.7844C47.7544 15.8493 47.4527 15.8828 47.15 15.8844C46.5406 15.9045 45.9328 15.8088 45.359 15.6024C44.9281 15.4446 44.5423 15.1836 44.2355 14.8422C43.9287 14.5009 43.7102 14.0897 43.599 13.6444C43.4774 13.1714 43.4179 12.6847 43.422 12.1964V5.14938L46.023 5.15136ZM34.173 14.0344C34.4914 14.1402 34.8178 14.2205 35.149 14.2744C35.5278 14.3366 35.9111 14.368 36.295 14.3684C36.6865 14.3713 37.0725 14.2764 37.418 14.0924C37.7682 13.8978 38.0679 13.6238 38.293 13.2924C38.5589 12.9056 38.7546 12.4751 38.871 12.0204C39.0127 11.4651 39.0799 10.8934 39.071 10.3204C39.0745 9.84945 39.0238 9.37971 38.92 8.92037C38.8359 8.53264 38.6762 8.1653 38.45 7.83938C38.2415 7.54414 37.9623 7.30585 37.638 7.14636C37.2658 6.97548 36.8594 6.89203 36.45 6.90237C36.2347 6.90349 36.0196 6.91785 35.806 6.94537C35.591 6.97637 35.384 7.01636 35.183 7.06536C34.9916 7.11019 34.8033 7.16699 34.619 7.23537C34.4596 7.29532 34.3062 7.37033 34.161 7.45937L34.173 14.0344ZM31.573 0.395379H34.173V5.94637C34.5815 5.64458 35.0369 5.41212 35.521 5.25835C36.0793 5.07415 36.6641 4.98329 37.252 4.98937C37.9775 4.97144 38.697 5.12493 39.352 5.43737C39.9085 5.71759 40.3919 6.12367 40.764 6.62338C41.1391 7.13643 41.4108 7.71756 41.564 8.33437C41.7346 8.99307 41.82 9.67094 41.818 10.3514C41.8392 11.1967 41.6831 12.037 41.36 12.8184C41.081 13.474 40.6682 14.0643 40.148 14.5514C39.6578 15.003 39.0812 15.3507 38.453 15.5734C37.838 15.79 37.1911 15.9022 36.539 15.9054C36.0383 15.9054 35.5797 15.9 35.163 15.8894C34.744 15.8774 34.338 15.8644 33.951 15.8464C33.564 15.8284 33.173 15.7994 32.791 15.7614C32.409 15.7234 32.007 15.6784 31.591 15.6234L31.573 0.395379ZM24.573 14.2164C24.984 14.2278 25.3873 14.103 25.72 13.8614C26.0497 13.616 26.3187 13.2982 26.506 12.9324C26.7225 12.5243 26.8769 12.0861 26.964 11.6324C27.066 11.1494 27.1166 10.657 27.115 10.1634C27.1164 9.72126 27.0718 9.28025 26.982 8.84737C26.9009 8.46194 26.7494 8.09478 26.535 7.76437C26.3324 7.45791 26.0577 7.20585 25.735 7.03036C25.3682 6.83692 24.9575 6.74183 24.543 6.75436C24.1538 6.74764 23.7699 6.845 23.431 7.03637C23.1073 7.23018 22.8334 7.49693 22.631 7.81536C22.4048 8.17634 22.2412 8.57292 22.147 8.98837C21.9311 9.90171 21.9243 10.852 22.127 11.7684C22.216 12.194 22.3705 12.6032 22.585 12.9814C22.7843 13.3379 23.0607 13.6453 23.394 13.8814C23.7431 14.1127 24.1554 14.2301 24.574 14.2174L24.573 14.2164ZM24.66 15.9734C23.8645 15.9875 23.0734 15.8518 22.328 15.5734C21.6834 15.3259 21.1025 14.937 20.628 14.4354C20.1558 13.9225 19.7994 13.3141 19.583 12.6514C19.335 11.9037 19.2134 11.12 19.223 10.3324C19.2197 9.63472 19.3305 8.94126 19.551 8.27938C19.7645 7.63603 20.1153 7.04677 20.5791 6.55242C21.0429 6.05807 21.6086 5.67044 22.237 5.41637C22.9955 5.11592 23.8064 4.97038 24.622 4.98837C25.43 4.96837 26.2335 5.11404 26.983 5.41637C27.6091 5.68005 28.1666 6.0833 28.613 6.59536C29.0478 7.1081 29.3694 7.70683 29.557 8.35238C29.7617 9.05529 29.8627 9.7843 29.857 10.5164C29.8615 11.2376 29.7414 11.9541 29.502 12.6344C29.2754 13.2745 28.9255 13.864 28.472 14.3694C28.0128 14.8682 27.4555 15.2669 26.835 15.5404C26.1487 15.8353 25.4079 15.9818 24.661 15.9704L24.66 15.9734ZM14.302 0.394372H16.902V13.1564C16.8789 13.4015 16.9368 13.6474 17.067 13.8564C17.1212 13.9252 17.191 13.9801 17.2706 14.0167C17.3503 14.0532 17.4375 14.0702 17.525 14.0664C17.7153 14.0716 17.9048 14.0415 18.084 13.9774C18.237 13.9214 18.417 13.8494 18.615 13.7774L19.055 15.0844C18.8809 15.2024 18.6984 15.3077 18.509 15.3994C18.3094 15.4997 18.1032 15.5865 17.892 15.6594C17.672 15.7336 17.4475 15.794 17.22 15.8404C16.9934 15.8855 16.763 15.9086 16.532 15.9094C16.2533 15.9095 15.9753 15.8797 15.703 15.8204C15.4428 15.7656 15.1996 15.6489 14.994 15.4804C14.7726 15.2971 14.6007 15.0612 14.494 14.7944C14.3574 14.4324 14.2942 14.047 14.308 13.6604L14.302 0.394372ZM12.602 14.6814C12.239 14.8724 11.868 15.0444 11.485 15.2064C11.0739 15.377 10.6508 15.517 10.219 15.6254C9.71274 15.7511 9.19858 15.8427 8.68001 15.8994C8.03877 15.9693 7.39406 16.0027 6.74901 15.9994C6.02384 16.0081 5.30187 15.9018 4.61001 15.6844C3.40238 15.3004 2.35048 14.5377 1.61001 13.5094C1.24144 13.0029 0.939006 12.4514 0.710011 11.8684C0.468973 11.2677 0.289379 10.6442 0.174001 10.0074C0.0576192 9.35516 -0.000605498 8.69388 4.74727e-06 8.03137C0.000633892 7.33814 0.0726773 6.64683 0.215001 5.96838C0.349412 5.31408 0.556361 4.67679 0.832006 4.06835C1.10146 3.48093 1.44454 2.9302 1.853 2.42938C2.67554 1.41797 3.78369 0.67779 5.03301 0.305352C5.72268 0.0959449 6.44028 -0.0069001 7.161 0.000359076C7.54 0.000359076 7.88701 0.012372 8.20301 0.032372C8.49632 0.0492166 8.78846 0.0826091 9.07801 0.132378C9.34144 0.177448 9.60066 0.244327 9.853 0.33236C10.107 0.419187 10.3543 0.52447 10.593 0.647362C10.8609 0.782467 11.1192 0.935843 11.366 1.10638C11.6327 1.28438 11.9263 1.49435 12.247 1.73635L10.797 3.68838C10.4912 3.41105 10.1686 3.15288 9.83101 2.91537C9.55631 2.72032 9.26083 2.55631 8.95 2.42635C8.66096 2.30636 8.35893 2.22046 8.05001 2.17037C7.70771 2.11985 7.362 2.0961 7.01601 2.09936C6.40137 2.08829 5.79444 2.23754 5.25501 2.53237C4.73856 2.82694 4.29629 3.23569 3.96201 3.72738C3.59548 4.26897 3.32706 4.87079 3.16901 5.50536C2.98332 6.22376 2.89254 6.9634 2.89901 7.70538C2.89341 8.4936 2.97049 9.28022 3.129 10.0524C3.26457 10.7479 3.51573 11.4158 3.87201 12.0284C4.19608 12.5805 4.64638 13.0479 5.18601 13.3924C5.76832 13.7417 6.43821 13.9176 7.11701 13.8994C7.33906 13.9036 7.56116 13.8939 7.782 13.8704C8.018 13.8414 8.25401 13.8234 8.49601 13.7874C8.73801 13.7514 8.972 13.7084 9.202 13.6594C9.432 13.6104 9.64401 13.5594 9.84601 13.5094V8.32836H12.595L12.602 14.6814Z\"\r\n fill=\"var(--color-text-brandDarkBlue, #212C65)\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M109.442 9.51028L113.077 5.4953H116.426L111.367 10.3453L116.755 16.3633H113.547L109.447 11.6633V16.3633H106.768V0.58728H109.447L109.442 9.51028ZM94.8709 7.3573C94.8709 7.1413 94.871 6.86529 94.852 6.52429C94.8439 6.1785 94.8071 5.83398 94.742 5.49429H97.2649C97.2894 5.55963 97.3098 5.62644 97.326 5.69431C97.345 5.77631 97.3659 5.86929 97.3919 5.96429C97.4179 6.05929 97.4369 6.16428 97.4549 6.26428C97.4729 6.36428 97.486 6.46428 97.5 6.55228C97.687 6.38781 97.8877 6.23961 98.0999 6.10928C98.6115 5.78686 99.1757 5.55704 99.7669 5.4303C100.1 5.35753 100.44 5.32132 100.781 5.3223C101.328 5.31866 101.872 5.40723 102.39 5.58429C102.869 5.74685 103.312 6.00393 103.69 6.3403C104.063 6.67744 104.36 7.08984 104.562 7.55029C104.781 8.06212 104.89 8.61452 104.881 9.1713V16.3713H102.196V9.6713C102.203 9.29813 102.158 8.9258 102.061 8.56528C101.986 8.29345 101.849 8.04279 101.661 7.83328C101.484 7.64715 101.263 7.50943 101.018 7.43329C100.734 7.34463 100.438 7.30144 100.141 7.3053C99.9337 7.30661 99.7268 7.32297 99.5219 7.35428C99.2943 7.38247 99.069 7.42726 98.8479 7.48828C98.6183 7.5484 98.392 7.6205 98.17 7.70428C97.9553 7.77835 97.7466 7.86895 97.5459 7.97528V16.3753H94.8689L94.8709 7.3573ZM89.354 10.6903C88.693 10.7039 88.0352 10.7877 87.3919 10.9403C86.9571 11.0391 86.5446 11.2185 86.1759 11.4693C85.8984 11.6587 85.6811 11.9239 85.55 12.2333C85.4322 12.5398 85.3738 12.866 85.378 13.1943C85.3692 13.4439 85.403 13.6931 85.4779 13.9313C85.5355 14.1106 85.6361 14.273 85.771 14.4043C85.9046 14.5271 86.0668 14.6145 86.243 14.6583C86.4338 14.7108 86.631 14.7364 86.8289 14.7343C87.0219 14.7343 87.219 14.7223 87.419 14.7063C87.6305 14.6839 87.8398 14.6444 88.045 14.5883C88.266 14.5295 88.4818 14.4522 88.69 14.3573C88.9221 14.2504 89.144 14.1225 89.3529 13.9753L89.354 10.6903ZM82.841 6.9743C83.4506 6.43993 84.1574 6.02806 84.9229 5.76129C85.735 5.46771 86.5924 5.31913 87.456 5.3223C88.0356 5.3199 88.6134 5.38703 89.177 5.52228C89.6953 5.64191 90.1898 5.84778 90.6399 6.13129C91.0583 6.40027 91.4075 6.76412 91.659 7.1933C91.9212 7.66192 92.0524 8.19246 92.039 8.72928V13.5793C92.0359 13.7771 92.0499 13.9749 92.081 14.1703C92.0978 14.3025 92.1446 14.429 92.2179 14.5403C92.2808 14.6292 92.369 14.6971 92.471 14.7353C92.5948 14.7743 92.7242 14.7923 92.854 14.7883C92.9578 14.7841 93.0613 14.7741 93.164 14.7583C93.322 14.7363 93.466 14.7133 93.596 14.6893L93.885 15.8443C93.72 15.9443 93.553 16.0353 93.38 16.1263C93.2023 16.2182 93.0173 16.2955 92.8269 16.3573C92.6192 16.4261 92.4066 16.4793 92.1909 16.5163C91.9393 16.5572 91.6849 16.578 91.43 16.5783C90.9747 16.5916 90.5257 16.4694 90.1399 16.2273C89.9688 16.1147 89.822 15.969 89.708 15.7988C89.594 15.6286 89.515 15.4374 89.4759 15.2363C89.2019 15.4862 88.8999 15.7037 88.576 15.8843C88.2804 16.0533 87.9684 16.192 87.6449 16.2983C87.3372 16.399 87.0209 16.4713 86.6999 16.5143C86.3981 16.5528 86.0942 16.5735 85.7899 16.5763C85.333 16.5793 84.8783 16.5135 84.4409 16.3813C84.0636 16.2663 83.7154 16.0716 83.42 15.8103C83.1354 15.5561 82.913 15.24 82.7699 14.8863C82.6093 14.4719 82.5296 14.0307 82.5349 13.5863C82.5244 13.0864 82.6134 12.5894 82.797 12.1243C82.9638 11.7188 83.2106 11.3511 83.5229 11.0433C83.8465 10.733 84.2205 10.4801 84.6289 10.2953C85.0769 10.0896 85.5465 9.93463 86.029 9.83328C86.556 9.71543 87.0906 9.63457 87.6289 9.59128C88.1916 9.54528 88.7643 9.52228 89.347 9.52228V9.13028C89.3559 8.81548 89.3046 8.50188 89.196 8.2063C89.1028 7.96802 88.9568 7.75397 88.769 7.58029C88.5772 7.41846 88.3542 7.29763 88.1139 7.22528C87.8398 7.1455 87.5554 7.10642 87.2699 7.10928C87.021 7.10712 86.7724 7.12957 86.5279 7.1763C86.2826 7.22239 86.0443 7.30002 85.8189 7.40729C85.5603 7.53109 85.3142 7.67943 85.084 7.85028C84.7873 8.07003 84.5041 8.30746 84.2359 8.56128L82.841 6.9743ZM73.27 2.62628V7.3053H74.77C75.2355 7.31174 75.7001 7.26475 76.1549 7.16528C76.5333 7.08847 76.8941 6.94197 77.219 6.73328C77.5016 6.54416 77.7328 6.28785 77.8919 5.9873C78.0558 5.65844 78.1371 5.29461 78.1289 4.92728C78.1359 4.5799 78.0765 4.23441 77.9539 3.9093C77.8334 3.61742 77.6274 3.36884 77.3629 3.19629C77.0275 2.98493 76.6537 2.84156 76.263 2.77429C75.705 2.67186 75.1382 2.62464 74.571 2.6333L73.27 2.62628ZM73.27 9.33929V14.3393H75.4419C75.9397 14.3493 76.4358 14.2783 76.9109 14.1293C77.2868 14.0087 77.6365 13.8184 77.9419 13.5683C78.1976 13.3579 78.4026 13.0927 78.542 12.7923C78.6704 12.5222 78.7387 12.2274 78.742 11.9283C78.7423 11.585 78.6743 11.2451 78.542 10.9283C78.4091 10.6098 78.2008 10.3284 77.935 10.1083C77.6222 9.85665 77.2635 9.66817 76.8789 9.55328C76.3764 9.40636 75.8544 9.3369 75.331 9.34729L73.27 9.33929ZM75.5929 0.58728C76.3348 0.57908 77.0745 0.668854 77.7929 0.854279C78.3878 1.00832 78.9499 1.26888 79.4519 1.62329C79.8961 1.9476 80.2585 2.37119 80.51 2.86029C80.7629 3.38432 80.889 3.96052 80.878 4.5423C80.88 4.93957 80.7993 5.33292 80.641 5.6973C80.4802 6.07453 80.26 6.4236 79.9889 6.73129C79.708 7.04844 79.3819 7.32238 79.021 7.54428C78.6554 7.77312 78.2572 7.9451 77.8399 8.05429C78.2862 8.13489 78.721 8.2692 79.135 8.45428C79.582 8.65138 79.993 8.92179 80.3509 9.2543C80.7289 9.59946 81.0372 10.0139 81.2589 10.4753C81.5061 10.998 81.6277 11.5712 81.6139 12.1493C81.6124 12.6915 81.4898 13.2266 81.255 13.7153C81.0007 14.2375 80.6343 14.697 80.182 15.0613C79.66 15.4835 79.0628 15.8031 78.422 16.0033C77.6359 16.2543 76.8139 16.3742 75.9889 16.3583H70.429V0.581299L75.5929 0.58728Z\"\r\n fill=\"var(--color-text-brandDarkBlue, #212C65)\"\r\n />\r\n </svg>\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n document.removeEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n render() {\r\n const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n return (\r\n <div class={`header_div ${this.showBorder ? 'border' : ''}`}>\r\n <div class=\"content\">\r\n {this.renderLogo()}\r\n <div class=\"inner_content\">\r\n <div class={`action`}>\r\n {this.showSearch && (\r\n <div class=\"search\">\r\n <gb-input-field\r\n size=\"sm\"\r\n state=\"default\"\r\n type=\"icon_leading\"\r\n enable-cancel-button-function={true}\r\n placeholder={this.inputPlaceholder}\r\n icon-swap={this.inputIcon}\r\n onInputValueChanged={this.onSearch.bind(this)}\r\n ></gb-input-field>\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n <gb-header-icon\r\n state={StateEnum.Default}\r\n icon={helpIconSrc}\r\n onClick={() => (this.helpDropdownShown = !this.helpDropdownShown)}\r\n class=\"help_button\"\r\n ></gb-header-icon>\r\n {this.helpDropdownShown && (\r\n <gb-help-dropdown class=\"help_dropdown\" show-log-error={this.showLogError} onHelpItemClicked={this.helpDropdownItemClicked.bind(this)}></gb-help-dropdown>\r\n )}\r\n </div>\r\n )}\r\n {this.showNotification && (\r\n <div class=\"notification\">\r\n <gb-header-icon\r\n state={this.state}\r\n icon={notificationIconSrc}\r\n show-indicator={this.showIndicator}\r\n onClick={() => (this.notificationDropdownShown = !this.notificationDropdownShown)}\r\n ></gb-header-icon>\r\n {this.notificationDropdownShown && (\r\n <gb-notification-pane state={this.notificationState} class=\"notification_dropdown\" notifications={this.notifications}>\r\n <p slot=\"label\">No notification</p>\r\n <p slot=\"supporting_text\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p>\r\n </gb-notification-pane>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <gb-avatar\r\n size=\"md\"\r\n text={this.text}\r\n placeholder={this.placeholder}\r\n color={this.color}\r\n show-border={this.showBorder}\r\n onClick={() => (this.avatarDropdownShown = !this.avatarDropdownShown)}\r\n >\r\n {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n </gb-avatar>\r\n {this.avatarDropdownShown && (\r\n <gb-avatar-dropdown\r\n ref={el => (this.avatarDropdown = el)}\r\n class=\"avatar_dropdown\"\r\n type={this.avatarDropdownType}\r\n show-theme-tab={this.showThemeTab}\r\n show-profile={this.showProfile}\r\n show-log-out={this.showLogOut}\r\n listGroupOne={this.listGroupOne}\r\n listGroupTwo={this.listGroupTwo}\r\n color={this.color}\r\n roles={this.roles}\r\n show-roles={this.showRoles}\r\n current-theme=\"light\"\r\n onThemeTabClicked={this.onThemeTabClicked.bind(this)}\r\n onItemClicked={this.onAvatarDropdownItemClicked.bind(this)}\r\n >\r\n <slot slot=\"name\" name=\"name\"></slot>\r\n <slot slot=\"supporting_text\" name=\"supporting_text\"></slot>\r\n <h1 slot=\"initials\" class={`text-md-semi-bold`}>\r\n {this.initials}\r\n </h1>\r\n </gb-avatar-dropdown>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"gb-header.js","mappings":"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","names":["GbHeader","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":["@import '../../global/global.css';\r\n\r\n.header_div {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n width: 100%;\r\n background: var(--color-surface, #ffffff);\r\n}\r\n\r\n.header_div.border {\r\n border-bottom: 0.7px solid var(--color-border-subtle, #cdd5df);\r\n}\r\n\r\n.content {\r\n display: flex;\r\n height: 4.5rem;\r\n padding: 0rem 2rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n align-self: stretch;\r\n}\r\n\r\n.logo {\r\n display: block;\r\n}\r\n\r\n.icon_logo {\r\n display: none;\r\n}\r\n\r\n.header_logo {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.69rem;\r\n}\r\n\r\n.inner_content {\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n flex: 1 0 0;\r\n position: relative;\r\n}\r\n\r\n.action {\r\n display: flex;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.search {\r\n width: 20rem;\r\n}\r\n\r\n.help,\r\n.notification {\r\n position: relative;\r\n}\r\n\r\n.avatar_dropdown {\r\n position: absolute;\r\n top: 110%;\r\n right: 0;\r\n z-index: 9999;\r\n}\r\n\r\n::slotted([slot='name'] p) {\r\n color: var(--color-text, #4b5565);\r\n width: 100%;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n::slotted([slot='supporting_text'] p) {\r\n color: var(--color-text-subtle, #697586);\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.notification_dropdown {\r\n position: absolute;\r\n top: 110%;\r\n right: 0;\r\n z-index: 9999;\r\n}\r\n\r\n.help_dropdown {\r\n position: absolute;\r\n top: 110%;\r\n right: 0;\r\n z-index: 9999;\r\n}\r\n\r\n@media (max-width: 440px) {\r\n .content {\r\n padding: var(--spacing-none) var(--spacing-5);\r\n }\r\n}\r\n\r\n@media (max-width: 450px) {\r\n .logo {\r\n display: none;\r\n }\r\n\r\n .icon_logo {\r\n display: block;\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, getAssetPath, h, Prop, State, Listen } from '@stencil/core';\r\nimport { ColorTypes, DropdownListGroup, DropdownRoles, Notification, StateEnum, ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-header',\r\n styleUrl: 'gb-header.css',\r\n shadow: true,\r\n})\r\nexport class GbHeader {\r\n @Prop() state: StateEnum;\r\n @Prop() showIndicator: boolean = false;\r\n @Prop() text: boolean = true;\r\n @Prop() placeholder: boolean = false;\r\n @Prop() color: ColorTypes = 'blue';\r\n @Prop() showBorder: boolean = true;\r\n @Prop() showNotification: boolean = false;\r\n @Prop() showHelp: boolean = false;\r\n @Prop() showLogo: boolean = false;\r\n @Prop() logo: string = '';\r\n @Prop() showSearch: boolean = false;\r\n @Prop() inputPlaceholder: string = '';\r\n @Prop() inputIcon: string = '';\r\n @Prop() avatarDropdownType: 'simple' \| 'complex' = 'simple';\r\n @Prop() listGroupOne: DropdownListGroup[] = [\r\n // { label: 'View Profile', icon: 'assets/user.svg', shortcut: 'Ctrl K + P' },\r\n // { label: 'Documentation', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl + T' },\r\n // { label: 'Support', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + C' },\r\n ];\r\n @Prop() listGroupTwo: DropdownListGroup[] = [\r\n // { label: 'Configuration', icon: 'assets/user.svg', shortcut: 'Ctrl + S' },\r\n // { label: 'Team', icon: 'assets/book-open-02.svg', shortcut: 'Ctrl K + T' },\r\n // { label: 'Invite members', icon: 'assets/customer-support.svg', shortcut: 'Ctrl + I' },\r\n ];\r\n @Prop() showThemeTab: boolean = true;\r\n @Prop() showProfile: boolean = false;\r\n @Prop() showRoles: boolean = false;\r\n @Prop() roles: DropdownRoles[] = [\r\n // {\r\n // badgeLabel: 'Initiator',\r\n // badgeColor: 'information',\r\n // badgeType: 'badge_color',\r\n // },\r\n // {\r\n // badgeLabel: 'Authorizer',\r\n // badgeColor: 'success',\r\n // badgeType: 'badge_color',\r\n // },\r\n // {\r\n // badgeLabel: 'Viewer',\r\n // badgeColor: 'gray',\r\n // badgeType: 'badge_color',\r\n // },\r\n ];\r\n @Prop() showLogOut: boolean = false;\r\n @Prop() showLogError: boolean = false;\r\n @Prop() notificationState: 'empty' \| 'notification_dropdown';\r\n @Prop({ mutable: true }) notifications: Notification[] = [\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n // {\r\n // label: 'Flagged transaction',\r\n // time: 'Just now',\r\n // desc: 'Aisha, here is your weekly report',\r\n // icon: 'assets/arrow-right-02.svg',\r\n // },\r\n ];\r\n @Prop() currentTheme: ThemeTypes = 'system';\r\n @State() avatarDropdownShown: boolean = false;\r\n @State() notificationDropdownShown: boolean = false;\r\n @State() helpDropdownShown: boolean = false;\r\n @State() initials: string = '';\r\n @Element() el: HTMLElement;\r\n @Event() navBarItemClicked: EventEmitter<string>;\r\n @Event() menuClicked: EventEmitter<void>;\r\n @Event() inputValueChanged: EventEmitter<string>;\r\n @Event() helpItemClicked: EventEmitter<string>;\r\n @Event() themeTabClicked: EventEmitter<string>;\r\n @Event() avatarDropdownItemClicked: EventEmitter<string>;\r\n\r\n avatarDropdown!: HTMLElement;\r\n notificationDropdown!: HTMLElement;\r\n helpDropdown!: HTMLElement;\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n onSearch(item) {\r\n this.inputValueChanged.emit(item.detail);\r\n }\r\n\r\n componentDidLoad() {\r\n document.addEventListener('click', this.handleClickOutside);\r\n\r\n const name = this.el.querySelector(\"[slot='name']\");\r\n const supportingText = this.el.querySelector(\"[slot='supporting_text']\");\r\n const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n if (initials) {\r\n initials.classList.add('text-md-semi-bold');\r\n initials.classList.add(this.applyColorToInitials());\r\n }\r\n\r\n if (name) {\r\n name.classList.add('text-sm-semi-bold');\r\n }\r\n\r\n if (supportingText) {\r\n supportingText.classList.add('text-sm-regular');\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n if (initials) {\r\n this.initials = initials.textContent;\r\n }\r\n }\r\n\r\n helpDropdownItemClicked(item) {\r\n this.helpItemClicked.emit(item.detail);\r\n }\r\n\r\n onThemeTabClicked(tab) {\r\n this.themeTabClicked.emit(tab.detail);\r\n }\r\n\r\n onAvatarDropdownItemClicked(item) {\r\n console.log(item.detail);\r\n this.avatarDropdownItemClicked.emit(item.detail);\r\n }\r\n\r\n onNotificationDropdownItemClicked(item) {\r\n console.log(item.detail);\r\n // this.avatarDropdownItemClicked.emit(item.detail);\r\n }\r\n\r\n @Listen('click', { target: 'document' })\r\n handleClickOutside(event: MouseEvent) {\r\n if (this.avatarDropdownShown && !this.el.contains(event.target as Node)) {\r\n this.avatarDropdownShown = false;\r\n }\r\n\r\n if (this.helpDropdownShown && !this.el.contains(event.target as Node)) {\r\n this.helpDropdownShown = false;\r\n }\r\n\r\n if (this.notificationDropdownShown && !this.el.contains(event.target as Node)) {\r\n this.notificationDropdownShown = false;\r\n }\r\n }\r\n\r\n renderLogo() {\r\n const logo = this.el.querySelector('[slot=\"logo\"]');\r\n const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);\r\n\r\n if (logo) {\r\n return <slot name=\"logo\"></slot>;\r\n } else {\r\n return (\r\n <div class=\"header_logo\">\r\n <img src={logoSrc} alt=\"\" />\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"117\" height=\"17\" viewBox=\"0 0 117 17\" fill=\"none\">\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M55.977 12.6264C56.3596 13.1025 56.8394 13.4915 57.3843 13.7674C57.9292 14.0434 58.5268 14.1998 59.137 14.2264C59.3682 14.2276 59.5989 14.2038 59.825 14.1554C60.0203 14.1134 60.2068 14.0376 60.376 13.9314C60.5266 13.8276 60.6514 13.6908 60.741 13.5314C60.8332 13.3494 60.8789 13.1473 60.874 12.9434C60.8797 12.7871 60.8427 12.6322 60.767 12.4954C60.6928 12.3641 60.5948 12.2478 60.478 12.1524C60.3548 12.0522 60.2206 11.9663 60.078 11.8964C59.9369 11.8205 59.7898 11.7567 59.638 11.7054C59.365 11.6054 59.092 11.4954 58.821 11.4054C58.55 11.3154 58.285 11.2194 58.009 11.1054C57.856 11.0544 57.668 10.9864 57.454 10.9054C57.2189 10.8192 56.9891 10.7191 56.766 10.6054C56.5267 10.4828 56.2967 10.3428 56.078 10.1864C55.8479 10.0188 55.6411 9.82143 55.463 9.59936C55.2755 9.3641 55.1254 9.10136 55.018 8.82037C54.8987 8.50077 54.841 8.16145 54.848 7.82037C54.8385 7.38435 54.9601 6.95552 55.197 6.58938C55.4368 6.22409 55.7548 5.91665 56.128 5.68935C56.5352 5.44285 56.9786 5.26199 57.442 5.15337C57.9371 5.03187 58.4452 4.9714 58.955 4.97335C59.7154 4.96345 60.4735 5.05835 61.208 5.25536C61.883 5.44235 62.5133 5.76379 63.061 6.20037L61.881 7.97738C61.675 7.77738 61.475 7.59837 61.276 7.43737C61.0823 7.28066 60.8736 7.14333 60.653 7.02737C60.4242 6.91238 60.1825 6.82509 59.933 6.76736C59.6405 6.70771 59.3425 6.67923 59.044 6.68237C58.8003 6.6793 58.5576 6.71302 58.324 6.78237C58.1425 6.83794 57.973 6.92678 57.824 7.04437C57.7018 7.14787 57.6053 7.27829 57.542 7.42538C57.4813 7.5669 57.4503 7.71939 57.451 7.87338C57.4479 8.03229 57.4929 8.18844 57.58 8.32137C57.6712 8.45192 57.7854 8.56477 57.917 8.65438C58.0598 8.75308 58.2135 8.83495 58.375 8.89837C58.549 8.96737 58.724 9.03036 58.903 9.08737C59.183 9.18737 59.467 9.28736 59.749 9.37936C60.031 9.47136 60.313 9.57035 60.592 9.66735C60.731 9.72035 60.902 9.77936 61.104 9.85336C61.3158 9.93021 61.522 10.0218 61.721 10.1274C61.945 10.2432 62.1576 10.3798 62.356 10.5354C62.571 10.6981 62.7616 10.8907 62.922 11.1074C63.0947 11.347 63.2296 11.6118 63.322 11.8924C63.4341 12.2242 63.4876 12.5731 63.48 12.9234C63.4886 13.3821 63.3593 13.8329 63.109 14.2174C62.8572 14.5968 62.5255 14.9167 62.137 15.1544C61.711 15.4162 61.2468 15.6099 60.761 15.7284C60.2447 15.8581 59.7143 15.923 59.182 15.9214C58.7286 15.9217 58.2755 15.896 57.825 15.8444C57.4131 15.7956 57.0069 15.7072 56.612 15.5804C56.2266 15.4585 55.8573 15.2906 55.512 15.0804C55.152 14.8574 54.8226 14.5884 54.532 14.2804L55.977 12.6264ZM46.023 5.15136V12.3824C46.0171 12.6297 46.0603 12.8758 46.15 13.1064C46.2233 13.2937 46.3378 13.4622 46.485 13.5994C46.6276 13.7299 46.7989 13.8251 46.985 13.8774C47.1837 13.9372 47.3905 13.9659 47.598 13.9624C48.1129 13.9605 48.6258 13.9001 49.127 13.7824C49.6297 13.6726 50.1117 13.4836 50.555 13.2224V5.14636H53.165V13.8624C53.1705 14.1064 53.1909 14.3498 53.226 14.5914C53.262 14.9064 53.326 15.2774 53.403 15.7014H50.93C50.916 15.6614 50.893 15.5894 50.866 15.4774C50.839 15.3654 50.805 15.2534 50.772 15.1304C50.739 15.0074 50.715 14.8904 50.687 14.7814C50.6662 14.7 50.6501 14.6176 50.639 14.5344C50.4019 14.7386 50.1461 14.9201 49.875 15.0764C49.5915 15.2448 49.2941 15.3887 48.986 15.5064C48.6826 15.626 48.3695 15.719 48.05 15.7844C47.7544 15.8493 47.4527 15.8828 47.15 15.8844C46.5406 15.9045 45.9328 15.8088 45.359 15.6024C44.9281 15.4446 44.5423 15.1836 44.2355 14.8422C43.9287 14.5009 43.7102 14.0897 43.599 13.6444C43.4774 13.1714 43.4179 12.6847 43.422 12.1964V5.14938L46.023 5.15136ZM34.173 14.0344C34.4914 14.1402 34.8178 14.2205 35.149 14.2744C35.5278 14.3366 35.9111 14.368 36.295 14.3684C36.6865 14.3713 37.0725 14.2764 37.418 14.0924C37.7682 13.8978 38.0679 13.6238 38.293 13.2924C38.5589 12.9056 38.7546 12.4751 38.871 12.0204C39.0127 11.4651 39.0799 10.8934 39.071 10.3204C39.0745 9.84945 39.0238 9.37971 38.92 8.92037C38.8359 8.53264 38.6762 8.1653 38.45 7.83938C38.2415 7.54414 37.9623 7.30585 37.638 7.14636C37.2658 6.97548 36.8594 6.89203 36.45 6.90237C36.2347 6.90349 36.0196 6.91785 35.806 6.94537C35.591 6.97637 35.384 7.01636 35.183 7.06536C34.9916 7.11019 34.8033 7.16699 34.619 7.23537C34.4596 7.29532 34.3062 7.37033 34.161 7.45937L34.173 14.0344ZM31.573 0.395379H34.173V5.94637C34.5815 5.64458 35.0369 5.41212 35.521 5.25835C36.0793 5.07415 36.6641 4.98329 37.252 4.98937C37.9775 4.97144 38.697 5.12493 39.352 5.43737C39.9085 5.71759 40.3919 6.12367 40.764 6.62338C41.1391 7.13643 41.4108 7.71756 41.564 8.33437C41.7346 8.99307 41.82 9.67094 41.818 10.3514C41.8392 11.1967 41.6831 12.037 41.36 12.8184C41.081 13.474 40.6682 14.0643 40.148 14.5514C39.6578 15.003 39.0812 15.3507 38.453 15.5734C37.838 15.79 37.1911 15.9022 36.539 15.9054C36.0383 15.9054 35.5797 15.9 35.163 15.8894C34.744 15.8774 34.338 15.8644 33.951 15.8464C33.564 15.8284 33.173 15.7994 32.791 15.7614C32.409 15.7234 32.007 15.6784 31.591 15.6234L31.573 0.395379ZM24.573 14.2164C24.984 14.2278 25.3873 14.103 25.72 13.8614C26.0497 13.616 26.3187 13.2982 26.506 12.9324C26.7225 12.5243 26.8769 12.0861 26.964 11.6324C27.066 11.1494 27.1166 10.657 27.115 10.1634C27.1164 9.72126 27.0718 9.28025 26.982 8.84737C26.9009 8.46194 26.7494 8.09478 26.535 7.76437C26.3324 7.45791 26.0577 7.20585 25.735 7.03036C25.3682 6.83692 24.9575 6.74183 24.543 6.75436C24.1538 6.74764 23.7699 6.845 23.431 7.03637C23.1073 7.23018 22.8334 7.49693 22.631 7.81536C22.4048 8.17634 22.2412 8.57292 22.147 8.98837C21.9311 9.90171 21.9243 10.852 22.127 11.7684C22.216 12.194 22.3705 12.6032 22.585 12.9814C22.7843 13.3379 23.0607 13.6453 23.394 13.8814C23.7431 14.1127 24.1554 14.2301 24.574 14.2174L24.573 14.2164ZM24.66 15.9734C23.8645 15.9875 23.0734 15.8518 22.328 15.5734C21.6834 15.3259 21.1025 14.937 20.628 14.4354C20.1558 13.9225 19.7994 13.3141 19.583 12.6514C19.335 11.9037 19.2134 11.12 19.223 10.3324C19.2197 9.63472 19.3305 8.94126 19.551 8.27938C19.7645 7.63603 20.1153 7.04677 20.5791 6.55242C21.0429 6.05807 21.6086 5.67044 22.237 5.41637C22.9955 5.11592 23.8064 4.97038 24.622 4.98837C25.43 4.96837 26.2335 5.11404 26.983 5.41637C27.6091 5.68005 28.1666 6.0833 28.613 6.59536C29.0478 7.1081 29.3694 7.70683 29.557 8.35238C29.7617 9.05529 29.8627 9.7843 29.857 10.5164C29.8615 11.2376 29.7414 11.9541 29.502 12.6344C29.2754 13.2745 28.9255 13.864 28.472 14.3694C28.0128 14.8682 27.4555 15.2669 26.835 15.5404C26.1487 15.8353 25.4079 15.9818 24.661 15.9704L24.66 15.9734ZM14.302 0.394372H16.902V13.1564C16.8789 13.4015 16.9368 13.6474 17.067 13.8564C17.1212 13.9252 17.191 13.9801 17.2706 14.0167C17.3503 14.0532 17.4375 14.0702 17.525 14.0664C17.7153 14.0716 17.9048 14.0415 18.084 13.9774C18.237 13.9214 18.417 13.8494 18.615 13.7774L19.055 15.0844C18.8809 15.2024 18.6984 15.3077 18.509 15.3994C18.3094 15.4997 18.1032 15.5865 17.892 15.6594C17.672 15.7336 17.4475 15.794 17.22 15.8404C16.9934 15.8855 16.763 15.9086 16.532 15.9094C16.2533 15.9095 15.9753 15.8797 15.703 15.8204C15.4428 15.7656 15.1996 15.6489 14.994 15.4804C14.7726 15.2971 14.6007 15.0612 14.494 14.7944C14.3574 14.4324 14.2942 14.047 14.308 13.6604L14.302 0.394372ZM12.602 14.6814C12.239 14.8724 11.868 15.0444 11.485 15.2064C11.0739 15.377 10.6508 15.517 10.219 15.6254C9.71274 15.7511 9.19858 15.8427 8.68001 15.8994C8.03877 15.9693 7.39406 16.0027 6.74901 15.9994C6.02384 16.0081 5.30187 15.9018 4.61001 15.6844C3.40238 15.3004 2.35048 14.5377 1.61001 13.5094C1.24144 13.0029 0.939006 12.4514 0.710011 11.8684C0.468973 11.2677 0.289379 10.6442 0.174001 10.0074C0.0576192 9.35516 -0.000605498 8.69388 4.74727e-06 8.03137C0.000633892 7.33814 0.0726773 6.64683 0.215001 5.96838C0.349412 5.31408 0.556361 4.67679 0.832006 4.06835C1.10146 3.48093 1.44454 2.9302 1.853 2.42938C2.67554 1.41797 3.78369 0.67779 5.03301 0.305352C5.72268 0.0959449 6.44028 -0.0069001 7.161 0.000359076C7.54 0.000359076 7.88701 0.012372 8.20301 0.032372C8.49632 0.0492166 8.78846 0.0826091 9.07801 0.132378C9.34144 0.177448 9.60066 0.244327 9.853 0.33236C10.107 0.419187 10.3543 0.52447 10.593 0.647362C10.8609 0.782467 11.1192 0.935843 11.366 1.10638C11.6327 1.28438 11.9263 1.49435 12.247 1.73635L10.797 3.68838C10.4912 3.41105 10.1686 3.15288 9.83101 2.91537C9.55631 2.72032 9.26083 2.55631 8.95 2.42635C8.66096 2.30636 8.35893 2.22046 8.05001 2.17037C7.70771 2.11985 7.362 2.0961 7.01601 2.09936C6.40137 2.08829 5.79444 2.23754 5.25501 2.53237C4.73856 2.82694 4.29629 3.23569 3.96201 3.72738C3.59548 4.26897 3.32706 4.87079 3.16901 5.50536C2.98332 6.22376 2.89254 6.9634 2.89901 7.70538C2.89341 8.4936 2.97049 9.28022 3.129 10.0524C3.26457 10.7479 3.51573 11.4158 3.87201 12.0284C4.19608 12.5805 4.64638 13.0479 5.18601 13.3924C5.76832 13.7417 6.43821 13.9176 7.11701 13.8994C7.33906 13.9036 7.56116 13.8939 7.782 13.8704C8.018 13.8414 8.25401 13.8234 8.49601 13.7874C8.73801 13.7514 8.972 13.7084 9.202 13.6594C9.432 13.6104 9.64401 13.5594 9.84601 13.5094V8.32836H12.595L12.602 14.6814Z\"\r\n fill=\"var(--color-text-brandDarkBlue, #212C65)\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\"\r\n clip-rule=\"evenodd\"\r\n d=\"M109.442 9.51028L113.077 5.4953H116.426L111.367 10.3453L116.755 16.3633H113.547L109.447 11.6633V16.3633H106.768V0.58728H109.447L109.442 9.51028ZM94.8709 7.3573C94.8709 7.1413 94.871 6.86529 94.852 6.52429C94.8439 6.1785 94.8071 5.83398 94.742 5.49429H97.2649C97.2894 5.55963 97.3098 5.62644 97.326 5.69431C97.345 5.77631 97.3659 5.86929 97.3919 5.96429C97.4179 6.05929 97.4369 6.16428 97.4549 6.26428C97.4729 6.36428 97.486 6.46428 97.5 6.55228C97.687 6.38781 97.8877 6.23961 98.0999 6.10928C98.6115 5.78686 99.1757 5.55704 99.7669 5.4303C100.1 5.35753 100.44 5.32132 100.781 5.3223C101.328 5.31866 101.872 5.40723 102.39 5.58429C102.869 5.74685 103.312 6.00393 103.69 6.3403C104.063 6.67744 104.36 7.08984 104.562 7.55029C104.781 8.06212 104.89 8.61452 104.881 9.1713V16.3713H102.196V9.6713C102.203 9.29813 102.158 8.9258 102.061 8.56528C101.986 8.29345 101.849 8.04279 101.661 7.83328C101.484 7.64715 101.263 7.50943 101.018 7.43329C100.734 7.34463 100.438 7.30144 100.141 7.3053C99.9337 7.30661 99.7268 7.32297 99.5219 7.35428C99.2943 7.38247 99.069 7.42726 98.8479 7.48828C98.6183 7.5484 98.392 7.6205 98.17 7.70428C97.9553 7.77835 97.7466 7.86895 97.5459 7.97528V16.3753H94.8689L94.8709 7.3573ZM89.354 10.6903C88.693 10.7039 88.0352 10.7877 87.3919 10.9403C86.9571 11.0391 86.5446 11.2185 86.1759 11.4693C85.8984 11.6587 85.6811 11.9239 85.55 12.2333C85.4322 12.5398 85.3738 12.866 85.378 13.1943C85.3692 13.4439 85.403 13.6931 85.4779 13.9313C85.5355 14.1106 85.6361 14.273 85.771 14.4043C85.9046 14.5271 86.0668 14.6145 86.243 14.6583C86.4338 14.7108 86.631 14.7364 86.8289 14.7343C87.0219 14.7343 87.219 14.7223 87.419 14.7063C87.6305 14.6839 87.8398 14.6444 88.045 14.5883C88.266 14.5295 88.4818 14.4522 88.69 14.3573C88.9221 14.2504 89.144 14.1225 89.3529 13.9753L89.354 10.6903ZM82.841 6.9743C83.4506 6.43993 84.1574 6.02806 84.9229 5.76129C85.735 5.46771 86.5924 5.31913 87.456 5.3223C88.0356 5.3199 88.6134 5.38703 89.177 5.52228C89.6953 5.64191 90.1898 5.84778 90.6399 6.13129C91.0583 6.40027 91.4075 6.76412 91.659 7.1933C91.9212 7.66192 92.0524 8.19246 92.039 8.72928V13.5793C92.0359 13.7771 92.0499 13.9749 92.081 14.1703C92.0978 14.3025 92.1446 14.429 92.2179 14.5403C92.2808 14.6292 92.369 14.6971 92.471 14.7353C92.5948 14.7743 92.7242 14.7923 92.854 14.7883C92.9578 14.7841 93.0613 14.7741 93.164 14.7583C93.322 14.7363 93.466 14.7133 93.596 14.6893L93.885 15.8443C93.72 15.9443 93.553 16.0353 93.38 16.1263C93.2023 16.2182 93.0173 16.2955 92.8269 16.3573C92.6192 16.4261 92.4066 16.4793 92.1909 16.5163C91.9393 16.5572 91.6849 16.578 91.43 16.5783C90.9747 16.5916 90.5257 16.4694 90.1399 16.2273C89.9688 16.1147 89.822 15.969 89.708 15.7988C89.594 15.6286 89.515 15.4374 89.4759 15.2363C89.2019 15.4862 88.8999 15.7037 88.576 15.8843C88.2804 16.0533 87.9684 16.192 87.6449 16.2983C87.3372 16.399 87.0209 16.4713 86.6999 16.5143C86.3981 16.5528 86.0942 16.5735 85.7899 16.5763C85.333 16.5793 84.8783 16.5135 84.4409 16.3813C84.0636 16.2663 83.7154 16.0716 83.42 15.8103C83.1354 15.5561 82.913 15.24 82.7699 14.8863C82.6093 14.4719 82.5296 14.0307 82.5349 13.5863C82.5244 13.0864 82.6134 12.5894 82.797 12.1243C82.9638 11.7188 83.2106 11.3511 83.5229 11.0433C83.8465 10.733 84.2205 10.4801 84.6289 10.2953C85.0769 10.0896 85.5465 9.93463 86.029 9.83328C86.556 9.71543 87.0906 9.63457 87.6289 9.59128C88.1916 9.54528 88.7643 9.52228 89.347 9.52228V9.13028C89.3559 8.81548 89.3046 8.50188 89.196 8.2063C89.1028 7.96802 88.9568 7.75397 88.769 7.58029C88.5772 7.41846 88.3542 7.29763 88.1139 7.22528C87.8398 7.1455 87.5554 7.10642 87.2699 7.10928C87.021 7.10712 86.7724 7.12957 86.5279 7.1763C86.2826 7.22239 86.0443 7.30002 85.8189 7.40729C85.5603 7.53109 85.3142 7.67943 85.084 7.85028C84.7873 8.07003 84.5041 8.30746 84.2359 8.56128L82.841 6.9743ZM73.27 2.62628V7.3053H74.77C75.2355 7.31174 75.7001 7.26475 76.1549 7.16528C76.5333 7.08847 76.8941 6.94197 77.219 6.73328C77.5016 6.54416 77.7328 6.28785 77.8919 5.9873C78.0558 5.65844 78.1371 5.29461 78.1289 4.92728C78.1359 4.5799 78.0765 4.23441 77.9539 3.9093C77.8334 3.61742 77.6274 3.36884 77.3629 3.19629C77.0275 2.98493 76.6537 2.84156 76.263 2.77429C75.705 2.67186 75.1382 2.62464 74.571 2.6333L73.27 2.62628ZM73.27 9.33929V14.3393H75.4419C75.9397 14.3493 76.4358 14.2783 76.9109 14.1293C77.2868 14.0087 77.6365 13.8184 77.9419 13.5683C78.1976 13.3579 78.4026 13.0927 78.542 12.7923C78.6704 12.5222 78.7387 12.2274 78.742 11.9283C78.7423 11.585 78.6743 11.2451 78.542 10.9283C78.4091 10.6098 78.2008 10.3284 77.935 10.1083C77.6222 9.85665 77.2635 9.66817 76.8789 9.55328C76.3764 9.40636 75.8544 9.3369 75.331 9.34729L73.27 9.33929ZM75.5929 0.58728C76.3348 0.57908 77.0745 0.668854 77.7929 0.854279C78.3878 1.00832 78.9499 1.26888 79.4519 1.62329C79.8961 1.9476 80.2585 2.37119 80.51 2.86029C80.7629 3.38432 80.889 3.96052 80.878 4.5423C80.88 4.93957 80.7993 5.33292 80.641 5.6973C80.4802 6.07453 80.26 6.4236 79.9889 6.73129C79.708 7.04844 79.3819 7.32238 79.021 7.54428C78.6554 7.77312 78.2572 7.9451 77.8399 8.05429C78.2862 8.13489 78.721 8.2692 79.135 8.45428C79.582 8.65138 79.993 8.92179 80.3509 9.2543C80.7289 9.59946 81.0372 10.0139 81.2589 10.4753C81.5061 10.998 81.6277 11.5712 81.6139 12.1493C81.6124 12.6915 81.4898 13.2266 81.255 13.7153C81.0007 14.2375 80.6343 14.697 80.182 15.0613C79.66 15.4835 79.0628 15.8031 78.422 16.0033C77.6359 16.2543 76.8139 16.3742 75.9889 16.3583H70.429V0.581299L75.5929 0.58728Z\"\r\n fill=\"var(--color-text-brandDarkBlue, #212C65)\"\r\n />\r\n </svg>\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n document.removeEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n render() {\r\n const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n\r\n return (\r\n <div class={`header_div ${this.showBorder ? 'border' : ''}`}>\r\n <div class=\"content\">\r\n {this.renderLogo()}\r\n <div class=\"inner_content\">\r\n <div class={`action`}>\r\n {this.showSearch && (\r\n <div class=\"search\">\r\n <gb-input-field\r\n size=\"sm\"\r\n state=\"default\"\r\n type=\"icon_leading\"\r\n enable-cancel-button-function={true}\r\n placeholder={this.inputPlaceholder}\r\n icon-swap={this.inputIcon}\r\n onInputValueChanged={this.onSearch.bind(this)}\r\n ></gb-input-field>\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n <gb-header-icon\r\n state={StateEnum.Default}\r\n icon={helpIconSrc}\r\n onClick={() => (this.helpDropdownShown = !this.helpDropdownShown)}\r\n class=\"help_button\"\r\n ></gb-header-icon>\r\n {this.helpDropdownShown && (\r\n <gb-help-dropdown class=\"help_dropdown\" show-log-error={this.showLogError} onHelpItemClicked={this.helpDropdownItemClicked.bind(this)}></gb-help-dropdown>\r\n )}\r\n </div>\r\n )}\r\n {this.showNotification && (\r\n <div class=\"notification\">\r\n <gb-header-icon\r\n state={this.state}\r\n icon={notificationIconSrc}\r\n show-indicator={this.showIndicator}\r\n onClick={() => (this.notificationDropdownShown = !this.notificationDropdownShown)}\r\n ></gb-header-icon>\r\n {this.notificationDropdownShown && (\r\n <gb-notification-pane state={this.notificationState} class=\"notification_dropdown\" notifications={this.notifications}>\r\n <p slot=\"label\">No notification</p>\r\n <p slot=\"supporting_text\">Your notification inbox is empty at the moment. Rest assured, you'll be promptly notified of any new events</p>\r\n </gb-notification-pane>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n <gb-avatar\r\n size=\"md\"\r\n text={this.text}\r\n placeholder={this.placeholder}\r\n color={this.color}\r\n show-border={this.showBorder}\r\n onClick={() => (this.avatarDropdownShown = !this.avatarDropdownShown)}\r\n >\r\n {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n </gb-avatar>\r\n {this.avatarDropdownShown && (\r\n <gb-avatar-dropdown\r\n ref={el => (this.avatarDropdown = el)}\r\n class=\"avatar_dropdown\"\r\n type={this.avatarDropdownType}\r\n show-theme-tab={this.showThemeTab}\r\n show-profile={this.showProfile}\r\n show-log-out={this.showLogOut}\r\n listGroupOne={this.listGroupOne}\r\n listGroupTwo={this.listGroupTwo}\r\n color={this.color}\r\n roles={this.roles}\r\n show-roles={this.showRoles}\r\n current-theme={this.currentTheme}\r\n onThemeTabClicked={this.onThemeTabClicked.bind(this)}\r\n onItemClicked={this.onAvatarDropdownItemClicked.bind(this)}\r\n >\r\n <slot slot=\"name\" name=\"name\"></slot>\r\n <slot slot=\"supporting_text\" name=\"supporting_text\"></slot>\r\n <h1 slot=\"initials\" class={`text-md-semi-bold`}>\r\n {this.initials}\r\n </h1>\r\n </gb-avatar-dropdown>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/gb-help-tooltip.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { G as GbHelpTooltip$1, d as defineCustomElement$1 } from './p-CfIakSv4.js';
+import { G as GbHelpTooltip$1, d as defineCustomElement$1 } from './p-BIZJMi3r.js';
 const GbHelpTooltip = GbHelpTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-icon-button-base.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { G as GbIconButtonBase$1, d as defineCustomElement$1 } from './p-CVyBDyQO.js';
+import { G as GbIconButtonBase$1, d as defineCustomElement$1 } from './p--yTC9FTD.js';
 const GbIconButtonBase = GbIconButtonBase$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-input-dropdown.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { G as GbInputDropdown$1, d as defineCustomElement$1 } from './p-BS3LHwPv.js';
+import { G as GbInputDropdown$1, d as defineCustomElement$1 } from './p-DKL3a2pp.js';
 const GbInputDropdown = GbInputDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-input-field.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { G as GbInputField$1, d as defineCustomElement$1 } from './p-D0DfK8zD.js';
+import { G as GbInputField$1, d as defineCustomElement$1 } from './p-CO2j2qSM.js';
 const GbInputField = GbInputField$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-metric-card.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './p-DUZw8PGP.js';
 import { d as defineCustomElement$3 } from './p-SPkNWhMl.js';
 import { d as defineCustomElement$2 } from './p-CTj_6CFb.js';
-const gbMetricCardCss = "/* @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/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n  color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n  color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n  color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n  color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n  color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n.metric_card_wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.metric_card_wrapper.sm {\r\n  width: 13.0625rem;\r\n  gap: var(--spacing-4);\r\n  padding: var(--spacing-4);\r\n}\r\n\r\n.metric_card_wrapper.md {\r\n  width: 18.75rem;\r\n  min-width: 18.75rem;\r\n  gap: var(--spacing-7);\r\n  box-shadow: var(--shadow-xs);\r\n  padding: var(--spacing-6);\r\n}\r\n\r\n.metric_card_wrapper.radius_xs {\r\n  border-radius: var(--rounded-xs);\r\n}\r\n\r\n.metric_card_wrapper.radius_md {\r\n  border-radius: var(--rounded-md);\r\n}\r\n\r\n.icon_and_label.md {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1rem;\r\n  align-self: stretch;\r\n}\r\n\r\n.featured_icon{\r\n    width: 3rem;\r\n}\r\n\r\n.heading_and_number {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-4);\r\n  align-self: stretch;\r\n}\r\n\r\n.heading {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.number_and_badge {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-end;\r\n  align-self: stretch;\r\n}\r\n\r\n.number {\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n";
+const gbMetricCardCss = "/* @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/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n  color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n  color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n  color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n  color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n  color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n  color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n  color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n.metric_card_wrapper {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n  background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.metric_card_wrapper.sm {\r\n  gap: var(--spacing-4);\r\n  padding: var(--spacing-4);\r\n}\r\n\r\n.metric_card_wrapper.md {\r\n  gap: var(--spacing-7);\r\n  box-shadow: var(--shadow-xs);\r\n  padding: var(--spacing-6);\r\n}\r\n\r\n.metric_card_wrapper.radius_xs {\r\n  border-radius: var(--rounded-xs);\r\n}\r\n\r\n.metric_card_wrapper.radius_md {\r\n  border-radius: var(--rounded-md);\r\n}\r\n\r\n.icon_and_label.md {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 1rem;\r\n  align-self: stretch;\r\n}\r\n\r\n.featured_icon{\r\n    width: 3rem;\r\n}\r\n\r\n.heading_and_number {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n  gap: var(--spacing-4);\r\n  align-self: stretch;\r\n}\r\n\r\n.heading {\r\n  color: var(--color-text, #4b5565);\r\n}\r\n\r\n.number_and_badge {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: flex-end;\r\n  align-self: stretch;\r\n}\r\n\r\n.number {\r\n  color: var(--color-text-bold, #202939);\r\n}\r\n";
 const GbMetricCard$1 = /*@__PURE__*/ proxyCustomElement(class GbMetricCard extends H {
     constructor(registerHost) {

package/dist/components/gb-metric-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gb-metric-card.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,~~0vqEAA0vqE~~;;~~MCQrwqEA~~,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAiB,IAAI;AACzB,QAAA,IAAM,CAAA,MAAA,GAAiB,IAAI;AAG3B,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AACzB,QAAA,IAAiB,CAAA,iBAAA,GAA4B,eAAe;AAC5D,QAAA,IAAiB,CAAA,iBAAA,GAAe,MAAM;AACtC,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AAyBhC;IAvBC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAuB,oBAAA,EAAA,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,SAAS,GAAG,IAAI,CAAC,MAAM,CAAE,CAAA,EAAA,EACvE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAkB,eAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,EAAA,EACvC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAyB,CAAA,yBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAuB,qBAAA,EAAA,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAA,CAA4B,CAC7J,EACL,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAK,CACrE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,wBAAwB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAK,EACzE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,sBAAsB,GAAG,sBAAsB,CAAE,CAAA,EAAG,EAAA,IAAI,CAAC,MAAM,CAAK,EAC5G,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,MAAM,EAAA,EACvD,CAAI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,UAAU,CAAK,CACf,CACZ,CACG,CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbMetricCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-metric-card/gb-metric-card.css?tag=gb-metric-card&encapsulation=shadow","src/components/gb-metric-card/gb-metric-card.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.metric_card_wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.metric_card_wrapper.sm {\r\n ~~width: 13.0625rem;\r\n~~ gap: var(--spacing-4);\r\n padding: var(--spacing-4);\r\n}\r\n\r\n.metric_card_wrapper.md {\r\n ~~width: 18.75rem;\r\n min-width: 18.75rem;\r\n~~ gap: var(--spacing-7);\r\n box-shadow: var(--shadow-xs);\r\n padding: var(--spacing-6);\r\n}\r\n\r\n.metric_card_wrapper.radius_xs {\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.metric_card_wrapper.radius_md {\r\n border-radius: var(--rounded-md);\r\n}\r\n\r\n.icon_and_label.md {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n align-self: stretch;\r\n}\r\n\r\n.featured_icon{\r\n width: 3rem;\r\n}\r\n\r\n.heading_and_number {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n align-self: stretch;\r\n}\r\n\r\n.heading {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.number_and_badge {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n align-self: stretch;\r\n}\r\n\r\n.number {\r\n color: var(--color-text-bold, #202939);\r\n}\r\n","import { Component, Prop, h } from '@stencil/core';\r\nimport { ColorTypes, GeneralSizes, MetricFeaturedIconTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-metric-card',\r\n styleUrl: 'gb-metric-card.css',\r\n shadow: true,\r\n})\r\nexport class GbMetricCard {\r\n @Prop() size: GeneralSizes = 'md';\r\n @Prop() radius: GeneralSizes = 'xs';\r\n @Prop() label: string;\r\n @Prop() metric: string;\r\n @Prop() showBadge: boolean = true;\r\n @Prop() featuredIconStyle: MetricFeaturedIconTypes = 'glassmorphism';\r\n @Prop() featuredIconColor: ColorTypes = 'gray';\r\n @Prop() icon: string = '';\r\n @Prop() percentage: string = '';\r\n\r\n render() {\r\n return (\r\n <div class={`metric_card_wrapper ${this.size} ${'radius_' + this.radius}`}>\r\n <div class={`icon_and_label ${this.size}`}>\r\n <div class=\"featured_icon\">\r\n <gb-metric-featured-icon size={this.size} featured-icon-style={this.featuredIconStyle} icon={this.icon} color={this.featuredIconColor}></gb-metric-featured-icon>\r\n </div>\r\n {this.size === 'md' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n </div>\r\n <div class=\"heading_and_number\">\r\n {this.size === 'sm' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n <div class=\"number_and_badge\">\r\n <p class={`number ${this.size === 'sm' ? 'display-xs-semi-bold' : 'display-md-semi-bold'}`}>{this.metric}</p>\r\n {this.showBadge && (\r\n <gb-badge size={this.size} type=\"pill_color\" color=\"gray\">\r\n <p>{this.percentage}</p>\r\n </gb-badge>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"gb-metric-card.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,osqEAAosqE;;MCQ/sqEA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAiB,IAAI;AACzB,QAAA,IAAM,CAAA,MAAA,GAAiB,IAAI;AAG3B,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AACzB,QAAA,IAAiB,CAAA,iBAAA,GAA4B,eAAe;AAC5D,QAAA,IAAiB,CAAA,iBAAA,GAAe,MAAM;AACtC,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAU,CAAA,UAAA,GAAW,EAAE;AAyBhC;IAvBC,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAuB,oBAAA,EAAA,IAAI,CAAC,IAAI,CAAI,CAAA,EAAA,SAAS,GAAG,IAAI,CAAC,MAAM,CAAE,CAAA,EAAA,EACvE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAkB,eAAA,EAAA,IAAI,CAAC,IAAI,CAAE,CAAA,EAAA,EACvC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAyB,CAAA,yBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAuB,qBAAA,EAAA,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAA,CAA4B,CAC7J,EACL,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAE,EAAA,IAAI,CAAC,KAAK,CAAK,CACrE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,wBAAwB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAK,EACzE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,sBAAsB,GAAG,sBAAsB,CAAE,CAAA,EAAG,EAAA,IAAI,CAAC,MAAM,CAAK,EAC5G,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,MAAM,EAAA,EACvD,CAAI,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,UAAU,CAAK,CACf,CACZ,CACG,CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbMetricCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-metric-card/gb-metric-card.css?tag=gb-metric-card&encapsulation=shadow","src/components/gb-metric-card/gb-metric-card.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.metric_card_wrapper {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-card, #ffffff);\r\n}\r\n\r\n.metric_card_wrapper.sm {\r\n gap: var(--spacing-4);\r\n padding: var(--spacing-4);\r\n}\r\n\r\n.metric_card_wrapper.md {\r\n gap: var(--spacing-7);\r\n box-shadow: var(--shadow-xs);\r\n padding: var(--spacing-6);\r\n}\r\n\r\n.metric_card_wrapper.radius_xs {\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.metric_card_wrapper.radius_md {\r\n border-radius: var(--rounded-md);\r\n}\r\n\r\n.icon_and_label.md {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n align-self: stretch;\r\n}\r\n\r\n.featured_icon{\r\n width: 3rem;\r\n}\r\n\r\n.heading_and_number {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n align-self: stretch;\r\n}\r\n\r\n.heading {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.number_and_badge {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n align-self: stretch;\r\n}\r\n\r\n.number {\r\n color: var(--color-text-bold, #202939);\r\n}\r\n","import { Component, Prop, h } from '@stencil/core';\r\nimport { ColorTypes, GeneralSizes, MetricFeaturedIconTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n tag: 'gb-metric-card',\r\n styleUrl: 'gb-metric-card.css',\r\n shadow: true,\r\n})\r\nexport class GbMetricCard {\r\n @Prop() size: GeneralSizes = 'md';\r\n @Prop() radius: GeneralSizes = 'xs';\r\n @Prop() label: string;\r\n @Prop() metric: string;\r\n @Prop() showBadge: boolean = true;\r\n @Prop() featuredIconStyle: MetricFeaturedIconTypes = 'glassmorphism';\r\n @Prop() featuredIconColor: ColorTypes = 'gray';\r\n @Prop() icon: string = '';\r\n @Prop() percentage: string = '';\r\n\r\n render() {\r\n return (\r\n <div class={`metric_card_wrapper ${this.size} ${'radius_' + this.radius}`}>\r\n <div class={`icon_and_label ${this.size}`}>\r\n <div class=\"featured_icon\">\r\n <gb-metric-featured-icon size={this.size} featured-icon-style={this.featuredIconStyle} icon={this.icon} color={this.featuredIconColor}></gb-metric-featured-icon>\r\n </div>\r\n {this.size === 'md' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n </div>\r\n <div class=\"heading_and_number\">\r\n {this.size === 'sm' && <p class=\"heading text-sm-medium\">{this.label}</p>}\r\n <div class=\"number_and_badge\">\r\n <p class={`number ${this.size === 'sm' ? 'display-xs-semi-bold' : 'display-md-semi-bold'}`}>{this.metric}</p>\r\n {this.showBadge && (\r\n <gb-badge size={this.size} type=\"pill_color\" color=\"gray\">\r\n <p>{this.percentage}</p>\r\n </gb-badge>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}