globuswebcomponents 1.0.2 → 1.0.3
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.
- package/dist/cjs/gb-avatar_49.cjs.entry.js +54 -53
- package/dist/cjs/gb-avatar_49.cjs.entry.js.map +1 -1
- package/dist/cjs/gb-megainput-field.cjs.entry.js +2 -2
- package/dist/cjs/gb-pagination-dot-group.cjs.entry.js +1 -1
- package/dist/cjs/gb-progress-circle.cjs.entry.js +1 -1
- package/dist/cjs/gb-rich-text.cjs.entry.js +1 -1
- package/dist/cjs/gb-scrollbar.cjs.entry.js +1 -1
- package/dist/cjs/gb-toggle.cjs.entry.js +1 -1
- package/dist/cjs/gb-token-field.cjs.entry.js +1 -1
- package/dist/cjs/gb-verification-code-field.cjs.entry.js +2 -2
- package/dist/cjs/test-input-tag.cjs.entry.js +2 -2
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.css +36 -2
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js +12 -11
- package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js.map +1 -1
- package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.js +2 -2
- package/dist/collection/components/gb-input-field/gb-input-field.js +12 -12
- package/dist/collection/components/gb-megainput-field-base/gb-megainput-field.js +2 -2
- package/dist/collection/components/gb-notification-content/gb-notification-content.js +1 -1
- package/dist/collection/components/gb-notification-pane/gb-notification-pane.js +3 -3
- package/dist/collection/components/gb-pagination/gb-pagination.js +1 -1
- package/dist/collection/components/gb-pagination-button-group-base/gb-pagination-button-group-base.js +1 -1
- package/dist/collection/components/gb-pagination-dot-group/gb-pagination-dot-group.js +1 -1
- package/dist/collection/components/gb-pagination-dot-indicator/gb-pagination-dot-indicator.js +1 -1
- package/dist/collection/components/gb-pagination-number-base/gb-pagination-number-base.js +1 -1
- package/dist/collection/components/gb-password-button/gb-password-button.js +1 -1
- package/dist/collection/components/gb-progress-bar/gb-progress-bar.js +1 -1
- package/dist/collection/components/gb-progress-circle/gb-progress-circle.js +1 -1
- package/dist/collection/components/gb-rich-text/gb-rich-text.js +1 -1
- package/dist/collection/components/gb-scrollbar/gb-scrollbar.js +1 -1
- package/dist/collection/components/gb-side-bar-item/gb-side-bar-item.js +1 -1
- package/dist/collection/components/gb-sidebar/gb-sidebar.js +1 -1
- package/dist/collection/components/gb-slider/gb-slider.js +1 -1
- package/dist/collection/components/gb-slider-control-handle/gb-slider-control-handle.js +1 -1
- package/dist/collection/components/gb-status-indicator/gb-status-indicator.js +1 -1
- package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.js +3 -3
- package/dist/collection/components/gb-tag/gb-tag.js +1 -1
- package/dist/collection/components/gb-tag-checkbox/gb-tag-checkbox.js +1 -1
- package/dist/collection/components/gb-tag-close/gb-tag-close.js +1 -1
- package/dist/collection/components/gb-tag-count/gb-tag-count.js +1 -1
- package/dist/collection/components/gb-toast/gb-toast.js +1 -1
- package/dist/collection/components/gb-toast-button/gb-toast-button.js +1 -1
- package/dist/collection/components/gb-toggle/gb-toggle.js +1 -1
- package/dist/collection/components/gb-toggle-base/gb-toggle-base.js +2 -2
- package/dist/collection/components/gb-token-field/gb-token-field.js +1 -1
- package/dist/collection/components/gb-tooltip/gb-tooltip.js +1 -1
- package/dist/collection/components/gb-verification-code-field/gb-verification-code-field.js +2 -2
- package/dist/collection/components/gb-vertical-tabs/gb-vertical-tabs.js +1 -1
- package/dist/collection/components/test-input-tag/test-input-tag.js +2 -2
- package/dist/components/gb-avatar-add-button.js +1 -1
- package/dist/components/gb-avatar-dropdown.js +3 -3
- package/dist/components/gb-avatar-group.js +4 -4
- package/dist/components/gb-avatar-label-group.js +1 -1
- package/dist/components/gb-avatar-profile-photo.js +2 -2
- package/dist/components/gb-avatar.js +1 -1
- package/dist/components/gb-badge.js +1 -1
- package/dist/components/gb-checkbox-group-item.js +1 -1
- package/dist/components/gb-checkbox-group.js +3 -3
- package/dist/components/gb-collapse-button.js +1 -1
- package/dist/components/gb-file-upload-item-base.js +1 -1
- package/dist/components/gb-file-upload.js +3 -3
- package/dist/components/gb-header.js +2 -2
- package/dist/components/gb-help-tooltip.js +1 -1
- package/dist/components/gb-horizontal-tabs.js +4 -4
- package/dist/components/gb-input-dropdown-menu-item.js +1 -1
- package/dist/components/gb-input-dropdown.js +1 -1
- package/dist/components/gb-input-field.js +1 -1
- package/dist/components/gb-megainput-field.js +1 -1
- package/dist/components/gb-notification-content.js +1 -1
- package/dist/components/gb-notification-pane.js +4 -4
- package/dist/components/gb-pagination-button-group-base.js +1 -1
- package/dist/components/gb-pagination-dot-group.js +1 -1
- package/dist/components/gb-pagination-dot-indicator.js +1 -1
- package/dist/components/gb-pagination-number-base.js +1 -1
- package/dist/components/gb-pagination.js +15 -15
- package/dist/components/gb-password-button.js +1 -1
- package/dist/components/gb-progress-bar.js +1 -1
- package/dist/components/gb-progress-circle.js +1 -1
- package/dist/components/gb-rich-text.js +14 -14
- package/dist/components/gb-scrollbar.js +1 -1
- package/dist/components/gb-side-bar-item.js +1 -1
- package/dist/components/gb-sidebar.js +7 -7
- package/dist/components/gb-slider-control-handle.js +1 -1
- package/dist/components/gb-slider.js +3 -3
- package/dist/components/gb-status-indicator.js +1 -1
- package/dist/components/gb-tab-button-base.js +1 -1
- package/dist/components/gb-tag-checkbox.js +1 -1
- package/dist/components/gb-tag-close.js +1 -1
- package/dist/components/gb-tag-count.js +1 -1
- package/dist/components/gb-tag.js +1 -1
- package/dist/components/gb-toast-button.js +1 -1
- package/dist/components/gb-toast.js +2 -2
- package/dist/components/gb-toggle-base.js +1 -1
- package/dist/components/gb-toggle.js +2 -2
- package/dist/components/gb-token-field.js +2 -2
- package/dist/components/gb-tooltip.js +1 -1
- package/dist/components/gb-verification-code-field.js +3 -3
- package/dist/components/gb-vertical-tabs.js +5 -5
- package/dist/components/gb-wysiwyg-toolbar.js +1 -1
- package/dist/components/{p-3254d1d4.js → p-18a465ff.js} +3 -3
- package/dist/components/{p-3254d1d4.js.map → p-18a465ff.js.map} +1 -1
- package/dist/components/{p-8a6370b2.js → p-26de186a.js} +3 -3
- package/dist/components/{p-8a6370b2.js.map → p-26de186a.js.map} +1 -1
- package/dist/components/{p-db3b8bbc.js → p-2c42ed61.js} +2 -2
- package/dist/components/{p-db3b8bbc.js.map → p-2c42ed61.js.map} +1 -1
- package/dist/components/{p-472f11a3.js → p-2ee8e211.js} +2 -2
- package/dist/components/{p-472f11a3.js.map → p-2ee8e211.js.map} +1 -1
- package/dist/components/{p-4ab53591.js → p-37d219de.js} +24 -23
- package/dist/components/p-37d219de.js.map +1 -0
- package/dist/components/{p-c8f12e95.js → p-47f3f4e8.js} +2 -2
- package/dist/components/{p-c8f12e95.js.map → p-47f3f4e8.js.map} +1 -1
- package/dist/components/{p-24625c69.js → p-4aa73a61.js} +2 -2
- package/dist/components/{p-24625c69.js.map → p-4aa73a61.js.map} +1 -1
- package/dist/components/{p-6aefb26b.js → p-4ad79f3c.js} +13 -13
- package/dist/components/{p-6aefb26b.js.map → p-4ad79f3c.js.map} +1 -1
- package/dist/components/{p-0c6b277d.js → p-5512321a.js} +2 -2
- package/dist/components/{p-0c6b277d.js.map → p-5512321a.js.map} +1 -1
- package/dist/components/{p-2e73f436.js → p-60a8f11a.js} +2 -2
- package/dist/components/{p-2e73f436.js.map → p-60a8f11a.js.map} +1 -1
- package/dist/components/{p-d401040a.js → p-6287f38c.js} +3 -3
- package/dist/components/{p-d401040a.js.map → p-6287f38c.js.map} +1 -1
- package/dist/components/{p-c2efc577.js → p-70b439f9.js} +2 -2
- package/dist/components/{p-c2efc577.js.map → p-70b439f9.js.map} +1 -1
- package/dist/components/{p-88e8dfdb.js → p-75424aa6.js} +3 -3
- package/dist/components/{p-88e8dfdb.js.map → p-75424aa6.js.map} +1 -1
- package/dist/components/{p-fdb2a202.js → p-7aa28b49.js} +3 -3
- package/dist/components/{p-fdb2a202.js.map → p-7aa28b49.js.map} +1 -1
- package/dist/components/{p-0c56ee53.js → p-7b578058.js} +23 -23
- package/dist/components/{p-0c56ee53.js.map → p-7b578058.js.map} +1 -1
- package/dist/components/{p-855667d7.js → p-8cafba87.js} +5 -5
- package/dist/components/{p-855667d7.js.map → p-8cafba87.js.map} +1 -1
- package/dist/components/{p-ec43535d.js → p-8efbc7c0.js} +6 -6
- package/dist/components/{p-ec43535d.js.map → p-8efbc7c0.js.map} +1 -1
- package/dist/components/{p-180a087a.js → p-962b36fc.js} +2 -2
- package/dist/components/{p-180a087a.js.map → p-962b36fc.js.map} +1 -1
- package/dist/components/{p-cbe0d594.js → p-9ae39411.js} +2 -2
- package/dist/components/{p-cbe0d594.js.map → p-9ae39411.js.map} +1 -1
- package/dist/components/{p-bdc413ec.js → p-9b42bf2c.js} +7 -7
- package/dist/components/{p-bdc413ec.js.map → p-9b42bf2c.js.map} +1 -1
- package/dist/components/{p-8a998306.js → p-a112004b.js} +2 -2
- package/dist/components/{p-8a998306.js.map → p-a112004b.js.map} +1 -1
- package/dist/components/{p-1c1003b6.js → p-b02e796f.js} +2 -2
- package/dist/components/{p-1c1003b6.js.map → p-b02e796f.js.map} +1 -1
- package/dist/components/{p-4bd1630c.js → p-bc2e5fb1.js} +3 -3
- package/dist/components/{p-4bd1630c.js.map → p-bc2e5fb1.js.map} +1 -1
- package/dist/components/{p-ad3a2c04.js → p-c5391fb7.js} +2 -2
- package/dist/components/{p-ad3a2c04.js.map → p-c5391fb7.js.map} +1 -1
- package/dist/components/{p-ac14b3b7.js → p-d0105cd4.js} +7 -7
- package/dist/components/{p-ac14b3b7.js.map → p-d0105cd4.js.map} +1 -1
- package/dist/components/{p-12879e00.js → p-e26f2275.js} +2 -2
- package/dist/components/{p-12879e00.js.map → p-e26f2275.js.map} +1 -1
- package/dist/components/{p-258cafb9.js → p-e9871283.js} +2 -2
- package/dist/components/{p-258cafb9.js.map → p-e9871283.js.map} +1 -1
- package/dist/components/{p-6557b598.js → p-ebbbdd33.js} +3 -3
- package/dist/components/{p-6557b598.js.map → p-ebbbdd33.js.map} +1 -1
- package/dist/components/{p-e7fb3e27.js → p-ff58b603.js} +3 -3
- package/dist/components/{p-e7fb3e27.js.map → p-ff58b603.js.map} +1 -1
- package/dist/components/test-input-tag.js +9 -9
- package/dist/docs.json +2 -2
- package/dist/esm/gb-avatar_49.entry.js +54 -53
- package/dist/esm/gb-avatar_49.entry.js.map +1 -1
- package/dist/esm/gb-megainput-field.entry.js +2 -2
- package/dist/esm/gb-pagination-dot-group.entry.js +1 -1
- package/dist/esm/gb-progress-circle.entry.js +1 -1
- package/dist/esm/gb-rich-text.entry.js +1 -1
- package/dist/esm/gb-scrollbar.entry.js +1 -1
- package/dist/esm/gb-toggle.entry.js +1 -1
- package/dist/esm/gb-token-field.entry.js +1 -1
- package/dist/esm/gb-verification-code-field.entry.js +2 -2
- package/dist/esm/test-input-tag.entry.js +2 -2
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/p-09e944a8.entry.js +2 -0
- package/dist/globuscomponents/{p-472bb5d1.entry.js → p-5532490c.entry.js} +2 -2
- package/dist/globuscomponents/{p-472bb5d1.entry.js.map → p-5532490c.entry.js.map} +1 -1
- package/dist/globuscomponents/{p-35a813fe.entry.js → p-6bfe698e.entry.js} +2 -2
- package/dist/globuscomponents/{p-d7e4ed6d.entry.js → p-9f284571.entry.js} +2 -2
- package/dist/globuscomponents/{p-b65519f9.entry.js → p-a6d401af.entry.js} +2 -2
- package/dist/globuscomponents/{p-f58cd21d.entry.js → p-aaa4b333.entry.js} +2 -2
- package/dist/globuscomponents/{p-a786f9fa.entry.js → p-b22b0186.entry.js} +2 -2
- package/dist/globuscomponents/{p-69239722.entry.js → p-d1a92423.entry.js} +2 -2
- package/dist/globuscomponents/{p-b5d57e93.entry.js → p-d32c11d8.entry.js} +2 -2
- package/dist/globuscomponents/p-eded0645.entry.js +2 -0
- package/package.json +1 -1
- package/dist/components/p-4ab53591.js.map +0 -1
- package/dist/globuscomponents/p-123789b1.entry.js +0 -2
- package/dist/globuscomponents/p-84d18b56.entry.js +0 -2
- /package/dist/globuscomponents/{p-84d18b56.entry.js.map → p-09e944a8.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-35a813fe.entry.js.map → p-6bfe698e.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-d7e4ed6d.entry.js.map → p-9f284571.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-b65519f9.entry.js.map → p-a6d401af.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-f58cd21d.entry.js.map → p-aaa4b333.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-a786f9fa.entry.js.map → p-b22b0186.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-69239722.entry.js.map → p-d1a92423.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-b5d57e93.entry.js.map → p-d32c11d8.entry.js.map} +0 -0
- /package/dist/globuscomponents/{p-123789b1.entry.js.map → p-eded0645.entry.js.map} +0 -0
|
@@ -1292,7 +1292,7 @@ const GbHorizontalTabs = class {
|
|
|
1292
1292
|
};
|
|
1293
1293
|
GbHorizontalTabs.style = GbHorizontalTabsStyle0;
|
|
1294
1294
|
|
|
1295
|
-
const gbInputDropdownCss = "/* @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\r\n /* gray color palette */\r\n --gray-25: #fcfcfd;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #9aa4b2;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0D121C;\r\n\r\n /* brand dark blue color palette */\r\n --brandDarkBlue-25: #F9F9FB;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n /* brand red color palette */\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n /* warning color palette */\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7A2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n /* ------------------------------------------opacity color palette-------------------------------------- */\r\n /* 20% opacity */\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n /* 30% opacity */\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n /* 40% opacity */\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n\r\n /* ------------------------------------------Secondary Color------------------------------------------- */\r\n /* blueLight color palete */\r\n --lightBlue-25: #F5FBFF;\r\n --lightBlue-50: #F0F9FF;\r\n --lightBlue-100: #E0F2FE;\r\n --lightBlue-200: #B9E6FE;\r\n --lightBlue-300: #7CD4FD;\r\n --lightBlue-400: #7CD4FD;\r\n --lightBlue-500: #0BA5EC;\r\n --lightBlue-600: #0086C9;\r\n --lightBlue-700: #026AA2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0B4A6F;\r\n --lightBlue-950: #062C41;\r\n \r\n\r\n /* blue color palette */\r\n --blue-25: #ECF5FE;\r\n --blue-50: #E4F0FC;\r\n --blue-100: #C8E0F9;\r\n --blue-200: #9AC7F4;\r\n --blue-300: #6AA9E7;\r\n --blue-400: #378FE6;\r\n --blue-500: #075DB2;\r\n --blue-600: #064E94;\r\n --blue-700: #053E77;\r\n --blue-800: #042F59;\r\n --blue-900: #022445;\r\n --blue-950: #021D37;\r\n\r\n /* Purple color palete */\r\n --purple-25: #FAFAFF;\r\n --purple-50: #F4F3FF;\r\n --purple-100: #EBE9FE;\r\n --purple-200: #D9D6FE;\r\n --purple-300: #BDB4FE;\r\n --purple-400: #9B8AFB;\r\n --purple-500: #7A5AF8;\r\n --purple-600: #6938EF;\r\n --purple-700: #5925DC;\r\n --purple-800: #4A1FB8;\r\n --purple-900: #3E1C96;\r\n --purple-950: #27115F;\r\n\r\n\r\n /* pink color palette */\r\n --pink-25: #FEF6FB;\r\n --pink-50: #FDF2FA;\r\n --pink-100: #FCE7F6;\r\n --pink-200: #FCCEEE;\r\n --pink-300: #FAA7E0;\r\n --pink-400: #F670C7;\r\n --pink-500: #EE46BC;\r\n --pink-600: #DD2590;\r\n --pink-700: #C11574;\r\n --pink-800: #9E165F;\r\n --pink-900: #851651;\r\n --pink-950: #4E0D30;\r\n\r\n\r\n\r\n /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n /* -----------Text Color----------- */\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-disabled: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-discovery: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-discovery: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-discovery-subtle: var(--blueLight-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-discovery-subtle: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n\r\n /* --------------Link color--------------- */\r\n\r\n\r\n [data-theme=\"light\"] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-link-visited: var(--blueLight-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-link-visited: var(--blueLight-300);\r\n }\r\n\r\n\r\n /* --------------Icon color--------------- */\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n \r\n [data-theme=\"light\"] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-disabled: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-discovery: var(--blueLight-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n /* ----------------Border Color --------------- */\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-discovery: var(--blueLight-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-discovery-subtle: var(--blueLight-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-discovery-subtle: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-discovery-subtler: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-discovery-subtler: var(--blueLight-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n\r\n\r\n /* Emmanuel Kadiri starts from background color */\r\n\r\n /* ----------------Background Color --------------- */\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray-subtlest: var(--gray-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success-subtler: var(--success-100); \r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-discovery-bold: var(--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-them=\"light\"] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n\r\n\r\n /* ----------------Blanket Color --------------- */\r\n [data-theme=\"light\"] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n\r\n\r\n /* ----------------Skeleton Color --------------- */\r\n [data-theme=\"light\"] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n\r\n\r\n /* ----------------Surface Color --------------- */\r\n [data-theme=\"light\"] {\r\n --color-surface-bold: var(--gray-25);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-surface-hovered: var(--gray-100); \r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root{\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); \r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs{\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm{\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md{\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg{\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl{\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl{\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl{\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm{\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md{\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg{\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl{\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n\r\n/* -----------------Gradients----------------- */\r\n:root{\r\n /* Gray Gradients */\r\n /* --gray-gradient-600: linear-gradient(); */\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n /* Brand Dark Blue Gradients */\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n /* Brand Red Gradients */\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n /* Blue Gradients */\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d{\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d{\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d{\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d{\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d{\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d{\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d{\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d{\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d{\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d{\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d{\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d{\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d{\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d{\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d{\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d{\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d{\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d{\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* 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: 1.875rem;\r\n --font-line-height-t-lg: 1.688rem;\r\n --font-line-height-t-md: 1.5rem;\r\n --font-line-height-t-sm: 1.313rem;\r\n --font-line-height-t-xs: 1.125rem;\r\n --font-line-height-t-xxs: 0.938rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n /* Font Families */\r\n --font-family-title: 'Sora';\r\n --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n :root{\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n :root{\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before{\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after{\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before{\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after{\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before{\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after{\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before{\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after{\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before{\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after{\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before{\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after{\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before{\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after{\r\n margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before{\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after{\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before{\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after{\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before{\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after{\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after{\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before{\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before{\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n margin-top: -0.196em;\r\n}\r\n\r\n.text-xs-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.input_dropdown_div{\r\n display: flex;\r\n align-items: center;\r\n border-radius: 0.5rem;\r\n gap: var(--spacing-3);\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n background-color: var(--color-background-card, #FFFFFF);\r\n padding: var(--spacing-none) var(--spacing-3);\r\n cursor: pointer;\r\n position: relative;\r\n}\r\n\r\n.input_dropdown_container{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.input_dropdown_container.tag{\r\n min-height: 3rem;\r\n}\r\n\r\n.icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.input_with_label{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n/* Size Styles */\r\n.input_dropdown_div.sm{\r\n height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md{\r\n height: 3rem;\r\n}\r\n\r\n.dot.sm{\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n}\r\n\r\n.dot.md{\r\n width: 0.625rem;\r\n height: 0.625rem;\r\n}\r\n\r\n/* State Styles */\r\n.input_dropdown_div.focused{\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.input_dropdown_div.disabled{\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n}\r\n\r\n.placeholder{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n width: 100%;\r\n white-space: nowrap;\r\n}\r\n\r\n.content{\r\n display: flex;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.text.tag{\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: stretch;\r\n flex-wrap: wrap;\r\n gap: 0.38rem;\r\n padding: 0.4rem 0;\r\n}\r\n\r\n.added_tag{\r\n width: fit-content;\r\n}\r\n\r\n.help_icon{\r\n display: flex;\r\n align-items: center;\r\n height: fit-content;\r\n}\r\n\r\n.dropdown_icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\nsvg.disabled path{\r\n stroke: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.dropdown_menu{\r\n display: flex;\r\n min-width: 100%;\r\n max-height: 300px;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n overflow-y: auto;\r\n}\r\n\r\n.dropdown_menu.top{\r\n bottom: 105%;\r\n left: 0;\r\n z-index: 9999;\r\n}\r\n\r\n.dropdown_menu.bottom{\r\n top: 105%;\r\n left: 0;\r\n z-index: 9999;\r\n}\r\n\r\n/* .input_dropdown_div.sm.tag{\r\n min-height: 2.5rem;\r\n} */\r\n\r\n.input_dropdown_div.tag{\r\n min-height: 3rem;\r\n height: fit-content;\r\n}\r\n\r\n.input_dropdown_div.md.tag{\r\n min-height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md.tag{\r\n min-height: 3rem;\r\n}\r\n\r\n.opened{\r\n transform: rotate(180deg);\r\n transition: 0.2s ease-in-out;\r\n}\r\n\r\n::slotted([slot=\"tooltip_label\"]){\r\n white-space: nowrap;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"tooltip_supporting_text\"]){\r\n min-width: fit-content;\r\n max-width: 18.5rem;\r\n color: var(--color-text-subtle, #697586);\r\n margin-top: 5rem;\r\n}\r\n\r\n::slotted([slot=\"initials\"].gray){\r\n color: #4B5565;\r\n}\r\n\r\n::slotted([slot=\"initials\"].blue){\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n::slotted([slot=\"initials\"].cyan){\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n::slotted([slot=\"initials\"].pink){\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n::slotted([slot=\"initials\"].purple){\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n::slotted([slot=\"initials\"].green){\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n::slotted([slot=\"initials\"].yellow){\r\n color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.dropdown_search_field{\r\n background: var(--color-surface, #FFFFFF);\r\n padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);\r\n position: sticky;\r\n top: 0;\r\n z-index: 999;\r\n}\r\n\r\n.empty_state{\r\n margin: auto;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.background{\r\n position: relative;\r\n width: 80%;\r\n}\r\n\r\n.message_background{\r\n position: absolute;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.illustration{\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\r\n.message{\r\n color: var(--color-text-bold, #202939);\r\n}";
|
|
1295
|
+
const gbInputDropdownCss = "/* @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\r\n /* gray color palette */\r\n --gray-25: #fcfcfd;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #9aa4b2;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0D121C;\r\n\r\n /* brand dark blue color palette */\r\n --brandDarkBlue-25: #F9F9FB;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n /* brand red color palette */\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n /* warning color palette */\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7A2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n /* ------------------------------------------opacity color palette-------------------------------------- */\r\n /* 20% opacity */\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n /* 30% opacity */\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n /* 40% opacity */\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n\r\n /* ------------------------------------------Secondary Color------------------------------------------- */\r\n /* blueLight color palete */\r\n --lightBlue-25: #F5FBFF;\r\n --lightBlue-50: #F0F9FF;\r\n --lightBlue-100: #E0F2FE;\r\n --lightBlue-200: #B9E6FE;\r\n --lightBlue-300: #7CD4FD;\r\n --lightBlue-400: #7CD4FD;\r\n --lightBlue-500: #0BA5EC;\r\n --lightBlue-600: #0086C9;\r\n --lightBlue-700: #026AA2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0B4A6F;\r\n --lightBlue-950: #062C41;\r\n \r\n\r\n /* blue color palette */\r\n --blue-25: #ECF5FE;\r\n --blue-50: #E4F0FC;\r\n --blue-100: #C8E0F9;\r\n --blue-200: #9AC7F4;\r\n --blue-300: #6AA9E7;\r\n --blue-400: #378FE6;\r\n --blue-500: #075DB2;\r\n --blue-600: #064E94;\r\n --blue-700: #053E77;\r\n --blue-800: #042F59;\r\n --blue-900: #022445;\r\n --blue-950: #021D37;\r\n\r\n /* Purple color palete */\r\n --purple-25: #FAFAFF;\r\n --purple-50: #F4F3FF;\r\n --purple-100: #EBE9FE;\r\n --purple-200: #D9D6FE;\r\n --purple-300: #BDB4FE;\r\n --purple-400: #9B8AFB;\r\n --purple-500: #7A5AF8;\r\n --purple-600: #6938EF;\r\n --purple-700: #5925DC;\r\n --purple-800: #4A1FB8;\r\n --purple-900: #3E1C96;\r\n --purple-950: #27115F;\r\n\r\n\r\n /* pink color palette */\r\n --pink-25: #FEF6FB;\r\n --pink-50: #FDF2FA;\r\n --pink-100: #FCE7F6;\r\n --pink-200: #FCCEEE;\r\n --pink-300: #FAA7E0;\r\n --pink-400: #F670C7;\r\n --pink-500: #EE46BC;\r\n --pink-600: #DD2590;\r\n --pink-700: #C11574;\r\n --pink-800: #9E165F;\r\n --pink-900: #851651;\r\n --pink-950: #4E0D30;\r\n\r\n\r\n\r\n /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n /* -----------Text Color----------- */\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-disabled: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-discovery: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-discovery: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-discovery-subtle: var(--blueLight-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-discovery-subtle: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n\r\n /* --------------Link color--------------- */\r\n\r\n\r\n [data-theme=\"light\"] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-link-visited: var(--blueLight-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-link-visited: var(--blueLight-300);\r\n }\r\n\r\n\r\n /* --------------Icon color--------------- */\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n \r\n [data-theme=\"light\"] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-disabled: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-discovery: var(--blueLight-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n /* ----------------Border Color --------------- */\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-discovery-bold: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-discovery-bold: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-discovery: var(--blueLight-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-discovery: var(--blueLight-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-discovery-subtle: var(--blueLight-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-discovery-subtle: var(--blueLight-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-discovery-subtler: var(--blueLight-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-discovery-subtler: var(--blueLight-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n\r\n\r\n /* Emmanuel Kadiri starts from background color */\r\n\r\n /* ----------------Background Color --------------- */\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-gray-subtlest: var(--gray-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success-subtler: var(--success-100); \r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-discovery-bold: var(--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-them=\"light\"] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n\r\n\r\n /* ----------------Blanket Color --------------- */\r\n [data-theme=\"light\"] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n\r\n\r\n /* ----------------Skeleton Color --------------- */\r\n [data-theme=\"light\"] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n\r\n\r\n /* ----------------Surface Color --------------- */\r\n [data-theme=\"light\"] {\r\n --color-surface-bold: var(--gray-25);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-surface-hovered: var(--gray-100); \r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme=\"light\"] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme=\"dark\"] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root{\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); \r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs{\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm{\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md{\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg{\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl{\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl{\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl{\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm{\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md{\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg{\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl{\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n\r\n/* -----------------Gradients----------------- */\r\n:root{\r\n /* Gray Gradients */\r\n /* --gray-gradient-600: linear-gradient(); */\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n /* Brand Dark Blue Gradients */\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n /* Brand Red Gradients */\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n /* Blue Gradients */\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d{\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d{\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d{\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d{\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d{\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d{\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d{\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d{\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d{\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d{\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d{\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d{\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d{\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d{\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d{\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d{\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d{\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d{\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* 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: 1.875rem;\r\n --font-line-height-t-lg: 1.688rem;\r\n --font-line-height-t-md: 1.5rem;\r\n --font-line-height-t-sm: 1.313rem;\r\n --font-line-height-t-xs: 1.125rem;\r\n --font-line-height-t-xxs: 0.938rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n /* Font Families */\r\n --font-family-title: 'Sora';\r\n --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n :root{\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n :root{\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before{\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after{\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before{\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after{\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before{\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after{\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before{\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after{\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before{\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after{\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before{\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after{\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before{\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after{\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before{\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after{\r\n margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold{\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before{\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after{\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before{\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after{\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before{\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after{\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before{\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after{\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before{\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after{\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after{\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after{\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before{\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after{\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before{\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before{\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n margin-top: -0.196em;\r\n}\r\n\r\n.text-xs-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular{\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after{\r\n content: \"\";\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before{\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after{\r\n margin-top: -0.416em;\r\n}\r\n\r\n.input_dropdown_div{\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-radius: 0.5rem;\r\n gap: var(--spacing-3);\r\n border: 1px solid var(--color-border-input, #CDD5DF);\r\n background-color: var(--color-background-card, #FFFFFF);\r\n padding: var(--spacing-none) var(--spacing-3);\r\n cursor: pointer;\r\n position: relative;\r\n}\r\n\r\n.input_dropdown_container{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.input_dropdown_container.tag{\r\n min-height: 3rem;\r\n}\r\n\r\n.icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.input_with_label{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n/* Size Styles */\r\n.input_dropdown_div.sm{\r\n height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md{\r\n height: 3rem;\r\n}\r\n\r\n.dot.sm{\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n}\r\n\r\n.dot.md{\r\n width: 0.625rem;\r\n height: 0.625rem;\r\n}\r\n\r\n/* State Styles */\r\n.input_dropdown_div.focused{\r\n border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.input_dropdown_div.disabled{\r\n background-color: var(--color-background-disabled, #F6F8FA);\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n}\r\n\r\n.placeholder{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n /* width: 2rem; */\r\n max-width: 100%;\r\n white-space: nowrap;\r\n}\r\n\r\n.content{\r\n display: flex;\r\n gap: var(--spacing-2);\r\n overflow: hidden; /* Clip overflowing content */\r\n /* width: 50px; */\r\n flex: 1 0 0;\r\n}\r\n\r\n.text.tag{\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: stretch;\r\n flex-wrap: wrap;\r\n gap: 0.38rem;\r\n padding: 0.4rem 0;\r\n}\r\n\r\n.added_tag{\r\n width: fit-content;\r\n}\r\n\r\n.help_icon{\r\n display: flex;\r\n align-items: center;\r\n height: fit-content;\r\n}\r\n\r\n.dropdown_icon{\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\nsvg.disabled path{\r\n stroke: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n.dropdown_menu{\r\n display: flex;\r\n min-width: 100%;\r\n max-height: 300px;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n overflow-y: auto;\r\n}\r\n\r\n.dropdown_menu.top{\r\n bottom: 105%;\r\n left: 0;\r\n z-index: 9999;\r\n}\r\n\r\n.dropdown_menu.bottom{\r\n top: 105%;\r\n left: 0;\r\n z-index: 9999;\r\n}\r\n\r\n/* .input_dropdown_div.sm.tag{\r\n min-height: 2.5rem;\r\n} */\r\n\r\n.input_dropdown_div.tag{\r\n min-height: 3rem;\r\n height: fit-content;\r\n}\r\n\r\n.input_dropdown_div.md.tag{\r\n min-height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md.tag{\r\n min-height: 3rem;\r\n}\r\n\r\n.opened{\r\n transform: rotate(180deg);\r\n transition: 0.2s ease-in-out;\r\n}\r\n\r\n::slotted([slot=\"tooltip_label\"]){\r\n white-space: nowrap;\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n::slotted([slot=\"tooltip_supporting_text\"]){\r\n min-width: fit-content;\r\n max-width: 18.5rem;\r\n color: var(--color-text-subtle, #697586);\r\n margin-top: 5rem;\r\n}\r\n\r\n::slotted([slot=\"initials\"].gray){\r\n color: #4B5565;\r\n}\r\n\r\n::slotted([slot=\"initials\"].blue){\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n::slotted([slot=\"initials\"].cyan){\r\n color: var(--color-text-discovery, #0086C9);\r\n}\r\n\r\n::slotted([slot=\"initials\"].pink){\r\n color: var(--color-text-pink, #DD2590);\r\n}\r\n\r\n::slotted([slot=\"initials\"].purple){\r\n color: var(--color-text-purple, #6938EF);\r\n}\r\n\r\n::slotted([slot=\"initials\"].green){\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n::slotted([slot=\"initials\"].yellow){\r\n color: var(--color-text-warning, #DC6803);\r\n}\r\n\r\n.dropdown_search_field{\r\n background: var(--color-surface, #FFFFFF);\r\n padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);\r\n position: sticky;\r\n top: 0;\r\n z-index: 999;\r\n}\r\n\r\n.empty_state{\r\n margin: auto;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.background{\r\n position: relative;\r\n width: 80%;\r\n}\r\n\r\n.message_background{\r\n position: absolute;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.illustration{\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\r\n.message{\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.text{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n flex: 1 1 auto; /* Allow it to grow and shrink */\r\n overflow: hidden; /* Prevent content from overflowing */\r\n}\r\n\r\n.selected_text{\r\n overflow: hidden; /* Hide overflowing text */\r\n text-overflow: ellipsis;\r\n white-space: nowrap; /* Prevent wrapping */\r\n flex: 1 1 auto; /* Take up available space and adjust dynamically */\r\n min-width: 0; /* Ensures it respects parent width in flexbox */\r\n}\r\n\r\n/* .new_div{\r\n background: red;\r\n display: flex;\r\n flex: 1 0 0;\r\n justify-content: space-between;\r\n} */\r\n\r\n/* .icon_and_text{\r\n background: purple;\r\n display: flex;\r\n flex: 1 0 0;\r\n} */";
|
|
1296
1296
|
const GbInputDropdownStyle0 = gbInputDropdownCss;
|
|
1297
1297
|
|
|
1298
1298
|
const GbInputDropdown = class {
|
|
@@ -1322,12 +1322,13 @@ const GbInputDropdown = class {
|
|
|
1322
1322
|
// 'Deactivated',
|
|
1323
1323
|
];
|
|
1324
1324
|
this.value = [
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1325
|
+
// { name: 'Mock Item A', username: 'A', selected: false },
|
|
1326
|
+
// { name: 'Mock Item B', username: 'B', selected: false },
|
|
1327
|
+
// { name: 'Mock Item C', username: 'C', selected: false },
|
|
1328
|
+
// 45, 50, 20, 25, 90,
|
|
1329
|
+
// 'Activated',
|
|
1330
|
+
// 'Deactivated',
|
|
1331
|
+
'Transaction Status'
|
|
1331
1332
|
];
|
|
1332
1333
|
this.supportingText = false;
|
|
1333
1334
|
this.color = undefined;
|
|
@@ -1551,18 +1552,18 @@ const GbInputDropdown = class {
|
|
|
1551
1552
|
const emptyStateBackground = index.getAssetPath('assets/empty-state-background.svg');
|
|
1552
1553
|
const illustration = index.getAssetPath('assets/empty-state-no-data.svg');
|
|
1553
1554
|
return [
|
|
1554
|
-
index.h("div", { key: '
|
|
1555
|
+
index.h("div", { key: 'baa0a6ce7a592fccd8e2388aa72c6c0acc73cf71', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, index.h("div", { key: '19df13f30611fd1ce5b33887cf104e796492b13c', class: `input_with_label` }, this.showLabel && (index.h("p", { key: 'b4640b03cbfde10b3f3f83bb192945b00984e147', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), index.h("div", { key: '3ada3455bf0779282e53ba96343eb598772eb5b9', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (index.h("svg", { key: '7856b32050d7b2830c5ba1644ff1459cddb29405', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '104cd3ec1a7dd0589fd81f00482cbd547c10c5aa', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#697586", "stroke-width": "1.66667" }), index.h("path", { key: '90204af85f1714da93b01c8c7b648ccde91fc2fb', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (index.h(index.Fragment, null, this.state === 'default' && (index.h("svg", { key: 'e526618379719be98e024ba4569d3f1ccf71f35b', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '9b1fc31c0bd99fe6f2ef0d5413078a1fc617ad65', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), index.h("path", { key: '71590c77d475511ee949b2d64c3f266d0873d570', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (index.h("gb-avatar", { key: '27d83d5cfbf1c9d2b2570d03e22599c61fb57cd1', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, index.h("h1", { key: '8761789e9967def6a338f03cbdb7cfb09a01cb5b', slot: "initials" }, this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())))))), this.showLeadingIcon && index.h(index.Fragment, null, this.type === 'search' || this.type === 'tags' ? index.h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (index.h("svg", { key: '87ac0f9bf4644cf2a83e37d220451f64ab2720f8', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, index.h("circle", { key: 'd9e9fb5e369a39ac3b3e3b23bd36dab5016624b8', cx: "5", cy: "5", r: "4", fill: "#079455" }))), index.h(index.Fragment, null, this.state === 'default' && (index.h(index.Fragment, null, this.placeholder && (index.h("p", { key: '28acf3f160d3a483d045be40df111e0a68ce58b5', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (index.h(index.Fragment, null, index.h("div", { key: '67cb2bd5379286eaf5fdca03f3c73e3be513ae6a', class: `content` }, index.h("div", { key: 'a2dbd0810a3b53a302e820f73fbe246b92369529', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (index.h(index.Fragment, null, this.value.length === 0 ? (index.h(index.Fragment, null, this.selectedItems.map((item, index$1) => typeof item === 'object' ? (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
|
|
1555
1556
|
.split(' ')
|
|
1556
1557
|
.map(part => part.charAt(0).toUpperCase())
|
|
1557
1558
|
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item))))))) : (index.h(index.Fragment, null, this.value.map((item, index$1) => typeof item === 'object' ? (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
|
|
1558
1559
|
.split(' ')
|
|
1559
1560
|
.map(part => part.charAt(0).toUpperCase())
|
|
1560
|
-
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item))))))))) : (index.h(
|
|
1561
|
+
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, index.h("p", { class: "text-xs-medium" }, item))))))))) : (index.h("p", { class: "selected_text" }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '7ce8737254577727e07d15d3fa1186a85a38c9c8', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (index.h(index.Fragment, null, this.value.length === 0 ? (index.h(index.Fragment, null, "@", this.selectedItem.username)) : (index.h(index.Fragment, null, this.value.map((item) => typeof item === 'object' && item.username)))))))))), this.state === 'disabled' && (index.h(index.Fragment, null, index.h("div", { key: '555d3b06ab2dd1c9eef96d7507a77bee00ead2b8', class: `content` }, index.h("div", { key: 'c4f6128a23b56be55e6db5e3515727d3e408fa51', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (index.h(index.Fragment, null, this.value.map((item, index$1) => typeof item === 'object' ? (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, index.h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), index.h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
|
|
1561
1562
|
.split(' ')
|
|
1562
1563
|
.map(part => part.charAt(0).toUpperCase())
|
|
1563
|
-
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, index.h("p", { class: "text-xs-medium" }, item))))))) : (index.h(index.Fragment, null, index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '
|
|
1564
|
+
.join(''))))) : (index.h("div", { class: "added_tag", key: index$1 }, index.h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, index.h("p", { class: "text-xs-medium" }, item))))))) : (index.h(index.Fragment, null, index.h(index.Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (index.h("div", { key: '8c1af1b4d1aba36d25d988da6a73ecd3febf4d25', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (index.h(index.Fragment, null, this.value.length === 0 ? (index.h(index.Fragment, null, "@", this.selectedItem.username)) : (index.h(index.Fragment, null, this.value.map((item) => typeof item === 'object' && (index.h(index.Fragment, null, "@", item.username))))))))))))), this.showHelpIcon && (index.h("div", { key: 'b67eac40ebae53f9bdc31ff7f27ce700a74eecd3', class: `help_icon` }, index.h("gb-help-tooltip", { key: 'e8fdbae58419f15afd5b90772fb9b7b132ed791c', "show-supporting-text": true }, index.h("slot", { key: 'da092911cefc1ef6347c54ab47aff1c29ebddd67', name: "tooltip_label", slot: "label" }), index.h("slot", { key: '6a7623923dec94b57328694eac553a6b812a53c9', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (index.h("div", { key: '7800f571b143bb8b662f07d93cd04bb89a16b4f0', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, index.h("svg", { key: 'ea690d9948eb8b2b1f1900347a0751563e448ad1', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, index.h("path", { key: 'f839400110d13baa25ed56176804816ffa5857c3', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h(index.Fragment, null, this.dropdownOpen && (index.h("div", { key: '93949b44fe40172d20980dbd61eb1a2effe9b3e8', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (index.h("div", { key: '3b08aba365fa4f42d49324ffc0be48d4fd0f8228', class: "dropdown_search_field" }, index.h("gb-input-field", { key: '2e0641aff7f22e127730cd0447751cb381f34c7f', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: "Search banks", type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItems.bind(this) }))), this.searchItem ? (index.h(index.Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (index.h(index.Fragment, null, this.searchResults.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username))) : (index.h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
|
|
1564
1565
|
//Empty state for when there are no search results
|
|
1565
|
-
index.h("div", { class: "empty_state" }, index.h("img", { src: emptyStateBackground, class: "background", alt: "" }), index.h("div", { class: "message_background" }, index.h("img", { src: illustration, alt: "", class: "illustration" }), index.h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (index.h(index.Fragment, null, this.type === 'tags' ? (index.h(index.Fragment, null, this.selectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username))) : (index.h("p", { slot: "name" }, item))))), this.unselectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username))) : (index.h("p", { slot: "name" }, item))))))) : (index.h(index.Fragment, null, this.items.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username))) : (typeof item !== 'object' && index.h("p", { slot: "name" }, item)))))))))))))), this.showHintText && (index.h("p", { key: '
|
|
1566
|
+
index.h("div", { class: "empty_state" }, index.h("img", { src: emptyStateBackground, class: "background", alt: "" }), index.h("div", { class: "message_background" }, index.h("img", { src: illustration, alt: "", class: "illustration" }), index.h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (index.h(index.Fragment, null, this.type === 'tags' ? (index.h(index.Fragment, null, this.selectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username))) : (index.h("p", { slot: "name" }, item))))), this.unselectedItems.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username))) : (index.h("p", { slot: "name" }, item))))))) : (index.h(index.Fragment, null, this.items.map(item => (index.h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: reusableModels.StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (index.h(index.Fragment, null, index.h("p", { slot: "name" }, item.name), index.h("p", { slot: "supporting_text" }, "@", item.username))) : (typeof item !== 'object' && index.h("p", { slot: "name" }, item)))))))))))))), this.showHintText && (index.h("p", { key: 'd37cba03e00d730a2b459b857730858f93d541c6', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
|
|
1566
1567
|
];
|
|
1567
1568
|
}
|
|
1568
1569
|
get el() { return index.getElement(this); }
|
|
@@ -1603,13 +1604,13 @@ const GbInputDropdownMenuItem = class {
|
|
|
1603
1604
|
render() {
|
|
1604
1605
|
return (
|
|
1605
1606
|
// <div class="dropdown-container" onClick={() => (this.selected = !this.selected)}>
|
|
1606
|
-
index.h("div", { key: '
|
|
1607
|
+
index.h("div", { key: '6f5a4fdb53a932b80fb39bace145570a9cd87e55', class: "dropdown-container", onClick: () => this.handleClick() }, index.h("div", { key: '1cfdab1477bc39f2c995285daa2e04b8f60e2260', class: {
|
|
1607
1608
|
'dropdown-item': true,
|
|
1608
1609
|
'selected': this.selected,
|
|
1609
1610
|
'disabled': this.state === 'disabled',
|
|
1610
1611
|
'checkbox': this.type === 'checkbox',
|
|
1611
1612
|
[this.type]: true,
|
|
1612
|
-
}, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, index.h("div", { key: '
|
|
1613
|
+
}, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, index.h("div", { key: '75861e94eaed8da9964f3eb5105749b101228bdf', class: "content" }, this.type === 'icon_leading' && (index.h("svg", { key: '0388e144da689fc14818580d6cd8dce06a627fc2', id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '49d38d76d2fb5c06650c40504eabe0f50d0390dc', d: "M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.5" }), index.h("path", { key: '3af1799aaa24db5a585dd43fc64d1c4390c05717', d: "M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z", stroke: "#4B5565", "stroke-width": "1.5" }))), this.type === 'avatar_leading' && (index.h("gb-avatar", { key: '2ed188c10efd0648bd8cc567ec39c43cb55fd0ae', class: "avatar-icon", size: "xs", color: this.color, text: true }, index.h("slot", { key: 'd1f7b5c1c72483e8660e0625193185faa9845a4b', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (index.h(index.Fragment, null, this.state === 'default' ? (index.h("svg", { id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, index.h("circle", { cx: "5", cy: "5", r: "4", fill: "#17B26A" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, index.h("circle", { cx: "5", cy: "5", r: "4", fill: "#EEF2F6" }))))), this.type === 'checkbox' && index.h("gb-checkbox", { key: 'b419af0e805e127c7b59fb148a331e5990fb072a', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), index.h("slot", { key: '08de55e7c131ebb59b7d61c009dbd62f0eecd05a', name: "name" }), this.supportingText && (index.h("span", { key: 'e6258c9d024bfac0aba0be8bffe4187c276e3029' }, index.h("slot", { key: '4ea10c4c34588da032497eb6d58eff0e97b049c9', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (index.h("div", { key: 'dd4a37ed2493271cfdbd6bc445ef6df015c08a92', class: `tick` }, this.state !== 'disabled' ? (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, index.h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#CDD5DF", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
|
|
1613
1614
|
}
|
|
1614
1615
|
get el() { return index.getElement(this); }
|
|
1615
1616
|
};
|
|
@@ -1886,23 +1887,23 @@ const GbInputField = class {
|
|
|
1886
1887
|
// this.inputElement.removeEventListener('input', this.handleTagInput.bind(this));
|
|
1887
1888
|
// }
|
|
1888
1889
|
render() {
|
|
1889
|
-
return (index.h("div", { key: '
|
|
1890
|
-
index.h("div", { key: '
|
|
1890
|
+
return (index.h("div", { key: '56033f8b1656271af03ebfe44d980715a2f0352e', class: `input_container` }, index.h("div", { key: '706a5ed173d86e3e3c51f239a398ee8e41bc7380', class: `input_with_label` }, this.showLabel && index.h("p", { key: 'fe36806fbf8055c5435e58259552496f5d494893', class: "label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase()), this.type === 'default' && [
|
|
1891
|
+
index.h("div", { key: '30036fea2b8bd453cc62024905187228d33db9de', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("input", { key: '879a7fcf81cdb8ea469e4ce1fe43c7c76ea61d6b', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), value: this.value }), index.h(index.Fragment, null, this.showValidation && (index.h("svg", { key: 'e4431635ccea99abbe1018a6ce74664c4d3822f7', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "tick" }, index.h("path", { key: '451bae007d78464a482469f69c33cfc0649fe01d', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: '8420ae333266084e554b03fa016a716c732e2fbe', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))),
|
|
1891
1892
|
], this.type === 'icon_leading' && [
|
|
1892
|
-
index.h("div", { key: '
|
|
1893
|
+
index.h("div", { key: 'a150d08ad1aa61171deb71f9d7ae073412f9dee4', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("div", { key: 'd5dab9daf5aa68fe40ccdbdd3c530ae9fd433fe7', class: `icon ${this.size} ${this.state}`, innerHTML: this.leadingIconSvg }), index.h("input", { key: 'eec19ee3b1b24d6375e0b59b4b1f6b4086053703', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), value: this.value, ref: el => (this.inputRef = el) }), index.h(index.Fragment, null, this.showValidation && !this.destructive && (index.h("svg", { key: '0ed416a277a770ababca7db5f3216b705843b1d8', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: "tick" }, index.h("path", { key: 'c0b8b2cf1ce73a18c9999eaccb308035289ab36d', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: 'aadbc6d8b1caace51f23c5c50fb13f9966c9e8d7', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.showCloseButton && !this.destructive && (index.h("gb-button", { key: '00a694341b18ac38ff7dccabf918d503fc2d2a40', size: "sm", hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput(), class: "input_close_button" })))),
|
|
1893
1894
|
], this.type === 'leading_dropdown' && [
|
|
1894
|
-
index.h("div", { key: '
|
|
1895
|
-
index.h(index.Fragment, null, this.showDropdown && (index.h("div", { key: '
|
|
1895
|
+
index.h("div", { key: 'd55fdeeb1f072c104afd0106b5cd3674f91cfe29', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("div", { key: 'b817ed962b38c008786299d452dcb61d92bd527b', class: `leading_dropdown_dropdown`, onClick: () => (this.showDropdown = !this.showDropdown) }, this.showCountryIcon && (index.h("div", { key: 'ab26c85a470b875ca6b8085754dce94474e92b3f', class: `country_icon` }, index.h("img", { key: 'bdc1827c89d439819b066be3250ee04936f525c2', src: "build/assets/NG.svg", alt: "" }))), index.h("div", { key: '08377be02e169fd923e42be74dd568881e82cb97', class: `dropdown_text` }, index.h("p", { key: 'b379189263d43b86bf5a25199198215458198668', class: "text-md-regular", style: { color: 'var(--color-text, #4B5565)' } }, this.selectedItem)), index.h("div", { key: 'a033deb5496bb38065ed8b928a5458a34cbf82de', class: `dropdown_arrow` }, index.h("svg", { key: 'd277411d5da5f13c2cb95ef256eb4e1d6c0b398b', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'c232ca5cab4bdc16d44dc3b26d77cc15a3cec2b8', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#4B5565", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { key: '8549becc309a5fc91957a9ae41b9d6168598d2af', class: `leading_dropdown_text_input` }, index.h("input", { key: '759e951123d34898096cc527f96fed02e88f8586', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), value: this.value }), this.showValidation && !this.destructive && (index.h("svg", { key: '00e86b2c68e9b86f2d4982414500162e8cf43051', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '9db08cb1c6557492b1a0fa5c3f3a4571dcea49da', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: 'd78004c20a29b0177020eba0ac3fa5f919a3afe7', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))),
|
|
1896
|
+
index.h(index.Fragment, null, this.showDropdown && (index.h("div", { key: 'f7a208cd8c1e0719cd2557e6c3b8ce41e1c1bb1d', class: `dropdown_menu ${this.type} ${this.size} ${this.menuPosition}`, ref: el => (this.dropdownRef = el) }, this.options.map(option => (index.h("gb-input-dropdown-menu-item", { type: "default", state: reusableModels.StateEnum.Default, selected: this.isItemSelected(option), onClick: () => this.handleItemSelect(option) }, index.h("p", { slot: "name" }, option))))))),
|
|
1896
1897
|
], this.type === 'trailing_dropdown' && [
|
|
1897
|
-
index.h("div", { key: '
|
|
1898
|
-
index.h(index.Fragment, null, this.showDropdown && (index.h("div", { key: '
|
|
1898
|
+
index.h("div", { key: 'f036bfb05e084ab4fd0510bf71277cd84a2c0180', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("div", { key: '90a27e0f8cb10d7177664e7d5f8bb9d3215f1e12', class: `trailing_dropdown_content` }, index.h("p", { key: '46954b6a1cf580b4464708b390a99cc2feda3641', class: "text-md-regular", style: { color: 'var(--color-text, #4B5565)' } }, "$"), index.h("input", { key: '68927226d7e954321e8ae9cdcbb193f910244993', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), value: this.value }), this.showHelpIcon && (index.h("div", { key: '8d3d43aef37baf40801cecfe0e6d2685cbc9ab3d', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '1691b55ca59652f307ad20131f4b17768c7ec7af', class: `trailing_dropdown_dropdown`, onClick: () => (this.showDropdown = !this.showDropdown) }, index.h("div", { key: '1ae3163430b8ca70a83689a38c4517a6312cb07e', class: `dropdown_text` }, index.h("p", { key: 'd8d771292f177f0dd3fb21b2e779e9d7ca7e5ef7', class: "text-md-regular", style: { color: 'var(--color-text, #4B5565)' } }, this.selectedItem)), index.h("div", { key: '15f1e4453f9c9538c274465ebd1647188fa524db', class: `dropdown_arrow` }, index.h("svg", { key: 'cce009b9cddf060c669ead3c79cf6e0d45b62874', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'c0700aba11587f3f655dbadc91badc3f2d230eb4', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#4B5565", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))),
|
|
1899
|
+
index.h(index.Fragment, null, this.showDropdown && (index.h("div", { key: '6b3389a7afdcd401eb390740dd78e827bf67027b', class: `dropdown_menu ${this.type} ${this.size} ${this.menuPosition}`, ref: el => (this.dropdownRef = el) }, this.options.map(option => (index.h("gb-input-dropdown-menu-item", { type: "default", state: reusableModels.StateEnum.Default, selected: this.isItemSelected(option), onClick: () => this.handleItemSelect(option) }, index.h("p", { slot: "name" }, option))))))),
|
|
1899
1900
|
], this.type === 'leading_text' && [
|
|
1900
|
-
index.h("div", { key: '
|
|
1901
|
-
], this.type === 'payment_input' && (index.h("div", { key: 'aca2a366869636dec7048dbc78ad168ee3e9e981', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("svg", { key: 'a690fc50aa20a844abab7d7df5f0ff5d8fff30c9', xmlns: "http://www.w3.org/2000/svg", width: "23", height: "14", viewBox: "0 0 23 14", fill: "none" }, index.h("path", { key: '634572e40131d66d82a2ed43eb212ff4ef03be35', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#ED0006" }), index.h("path", { key: '56e109860937261621555e867457b973551a18ac', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#F9A000" }), index.h("path", { key: 'e6885aaeb786287e4c267f9e2c3d2495aaf73fe9', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z", fill: "#FF5E00" })), index.h("input", { key: '311fd331f00d3a47f08f7ea61a734802b569f6cf', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), value: this.value }), index.h(index.Fragment, null, this.showValidation && !this.destructive && (index.h("svg", { key: 'ea27c5096da0769e14f8ca19adebddec61c135d4', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'a00fe8118722ca9c85f46a4dc8f567eb51d5bba1', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: '0f72e20de2470c7db3e27753239c8d365c526266', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_button' && (index.h("div", { key: '0845d598906f702ba102fb82e6734515dcc63ac0', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("div", { key: 'b3a0e43c61de6e2a99eef7b8b2c84c75be895a79', class: `trailing_button_text_input ${this.size}` }, index.h("input", { key: 'e5d476bf22c6f5353e5d5325ae23e63a45239b04', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), ref: el => (this.inputRef = el), value: this.value }), this.showValidation && !this.destructive && (index.h("svg", { key: '969af9f595e92dde81a360087aa9db2247810c3f', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '64a9a68336c848d11792cb9867427309ba95225c', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: '0ebbe645b406d9eb29cf9e7b1ad8b76335a713c3', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("gb-button", { key: '5a8b2f7c9cafd3582964ed77ba851ebcf27137e5', size: "lg", hierarchy: "tertiary_gray", icon: "only", state: this.state === 'disabled' ? 'disabled' : 'default', "icon-leading": true, "icon-leading-swap": "assets/copy-01.svg", onClick: () => this.copyToClipboard() }))), this.type === 'password' && (index.h("div", { key: '650d775b198eea8de47ec4ca2707f47d50bf6746', class: `password_input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("div", { key: '75b6473ae7bcd28bc6fe2619561962ad988ae957', class: `password_content` }, index.h("input", { key: 'f75c97f8d9ebcae59941d44e155014a9a90bc819', class: `content text-md-regular ${this.type} ${this.state}`, type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showValidation && !this.destructive && (index.h("svg", { key: 'dd58e22ba60e32534174b6183b624080a3812152', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '8f446f66e9bb839c8df8a42220cee1572c52ca56', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: 'd8f7916671315a3d9ffc7bc7cd4f70f680c4922d', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'c2a70ae603737292e5c39766e577ab7a8b182d83', class: `dropdown` }, index.h("gb-password-button", { key: 'ce693efaa47cdf5158fd844311fccced383f6c51', onClick: () => this.togglePasswordVisibility() })))), this.type === 'password_icon_leading' && (index.h("div", { key: '9e293b0ad1f5f469efaecfc1631ed18c7a0f9f40', class: `password_icon_leading_input input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("div", { key: '5a5a63703c7d2e767031e5a48a1bcf0571945850', class: `password_icon_leading_content` }, index.h("svg", { key: '6bc20a636972afd295df3bad888959e1363c0740', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'b27d0b2fe8ba67d51ca0aed6f946e6f3d2b39114', d: "M12.0759 12.1667C11.6617 12.1667 11.3259 12.5025 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5025 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5025 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5025 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58258L13.7347 6.83337L13.7003 7.58258ZM13.7003 18.2508L13.7347 19L13.7003 18.2508ZM16.4435 15.704L15.7002 15.6039L16.4435 15.704ZM6.29973 7.58258L6.33417 8.33179L6.29973 7.58258ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2508L6.33417 17.5015L6.29973 18.2508ZM3.55652 15.704L4.29981 15.6039L3.55652 15.704ZM5.50001 7.5C5.50001 7.91422 5.8358 8.25 6.25001 8.25C6.66422 8.25 7.00001 7.91422 7.00001 7.5H5.50001ZM13 7.5C13 7.91422 13.3358 8.25 13.75 8.25C14.1642 8.25 14.5 7.91422 14.5 7.5H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8142 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2295C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.25C11.3095 8.25 12.4972 8.27806 13.6659 8.33179L13.7347 6.83337C12.5424 6.77856 11.3317 6.75 10 6.75V8.25ZM6.33417 8.33179C7.50287 8.27806 8.69057 8.25 10 8.25V6.75C8.66829 6.75 7.45761 6.77856 6.26528 6.83337L6.33417 8.33179ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2295L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8142 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29067 15.5122 6.91509 13.7347 6.83337L13.6659 8.33179C14.6943 8.37907 15.5595 9.18437 15.7002 10.2295L17.1868 10.0293ZM13.7347 19C15.5122 18.9183 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83337C4.48781 6.91508 3.04732 8.29067 2.81323 10.0293L4.29981 10.2295C4.44052 9.18437 5.30576 8.37907 6.33417 8.33179L6.26528 6.83337ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9183 6.26528 19L6.33417 17.5015ZM7.00001 7.5V5.41667H5.50001V7.5H7.00001ZM13 5.41667V7.5H14.5V5.41667H13ZM10 2.41667C11.6569 2.41667 13 3.75981 13 5.41667H14.5C14.5 2.93139 12.4853 0.916668 10 0.916668V2.41667ZM7.00001 5.41667C7.00001 3.75981 8.34316 2.41667 10 2.41667V0.916668C7.51473 0.916668 5.50001 2.93139 5.50001 5.41667H7.00001Z", fill: "#4B5565" })), index.h("input", { key: '46c67d89fb8ecdf71fbe6f6b580b3d072329380a', class: `content text-md-regular ${this.type} ${this.state}`, type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) })), this.showValidation && !this.destructive && (index.h("svg", { key: 'f062eea94fae19373397dcc9901dfb1e92ddb029', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'b2f638a9f20c40fa72a05df32801d5ede9f31d88', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: '5f945427dd523785d820aed37de6dfea398cb056', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), index.h("gb-password-button", { key: 'e88148b093bbb2e612eaf2399bf487cbae1efbcf', onClick: () => this.togglePasswordVisibility() }))), this.type === 'count' && [
|
|
1902
|
-
index.h("div", { key: '
|
|
1903
|
-
], this.type === 'tags' && (index.h("div", { key: '
|
|
1901
|
+
index.h("div", { key: '1296b910ac0d9f433c602a914d77b757a2e31ef8', class: "leading_text_input" }, index.h("div", { key: '2ec52cbacf0c6391d5ad797989c870e25153ded5', class: `add_on` }, index.h("slot", { key: 'a047eaa98708c86da4337be75580eee17b38b088', name: 'text' })), index.h("div", { key: '4688c7869bcf364e2f1bc60dadab386e0f85adc3', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("input", { key: '2c6668d171bc15f7093da57ac5a344a5a9714ed6', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), value: this.value }), this.showValidation && !this.destructive && (index.h("svg", { key: '357e3e66a7cdb92787e541388c07076b8cc3e8bf', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'f704ea8365e6993320eea23ba335f7e3308e34f2', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: 'd1f65c56cb406caf0c91f237c1f826f6eb05df66', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))),
|
|
1902
|
+
], this.type === 'payment_input' && (index.h("div", { key: '437e8b7fe741aa6b9cf45435460f42e642683f65', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("svg", { key: '8772f4e5da0dfa5b7e73d281a0839892e04f5880', xmlns: "http://www.w3.org/2000/svg", width: "23", height: "14", viewBox: "0 0 23 14", fill: "none" }, index.h("path", { key: '9251e8ce8e7e356a6084331c6e96186bcff9b214', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#ED0006" }), index.h("path", { key: '40e375a73dafda98dfa096e443f353f9692f90ed', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77192 13.5614 6.72997C13.5614 4.68801 12.6369 2.85941 11.179 1.63051C12.363 0.632465 13.8989 0.0299683 15.5772 0.0299683C19.3221 0.0299683 22.3579 3.02966 22.3579 6.72997C22.3579 10.4303 19.3221 13.43 15.5772 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z", fill: "#F9A000" }), index.h("path", { key: 'fd64b0c6b2b862b30a289b91c11959beb3ba33b3', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.179 11.8294C12.6369 10.6005 13.5614 8.77193 13.5614 6.72999C13.5614 4.68805 12.6369 2.85946 11.179 1.63055C9.72109 2.85946 8.79663 4.68805 8.79663 6.72999C8.79663 8.77193 9.72109 10.6005 11.179 11.8294Z", fill: "#FF5E00" })), index.h("input", { key: 'cf58c747ea2989423ec37f18a73e2ab323d1ea14', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), value: this.value }), index.h(index.Fragment, null, this.showValidation && !this.destructive && (index.h("svg", { key: '719793d1b22283d1f4b4e5538cb3ae9bcf21d67e', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '2e0280e054869bee800751003cfc2517150af2db', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: 'd0fa51568badf639251cf30306e1409b6aa1ade4', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))), this.type === 'trailing_button' && (index.h("div", { key: '7fbf7b6b0ee5fb5125a7693186c06e5bf2ad662a', class: `input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("div", { key: 'e7a2cc2804d053a8cc906516175f4ebe0112ced5', class: `trailing_button_text_input ${this.size}` }, index.h("input", { key: 'bffb820f139a72a9027729fa4b52537e287ab7c6', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), ref: el => (this.inputRef = el), value: this.value }), this.showValidation && !this.destructive && (index.h("svg", { key: '38d9aa3fbac34b2e010db76af6d2d74c0e694aa9', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'e09e4965113570e8c73e515dd5510297c883645a', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: '96bb8da1ba2318ac6c85a4aaa534d4be19a5f002', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("gb-button", { key: 'cf6bd231d514ee8a376d834948c961406c994843', size: "lg", hierarchy: "tertiary_gray", icon: "only", state: this.state === 'disabled' ? 'disabled' : 'default', "icon-leading": true, "icon-leading-swap": "assets/copy-01.svg", onClick: () => this.copyToClipboard() }))), this.type === 'password' && (index.h("div", { key: '5ca5d4cdaa49f9f0fdd6176621a226200337c08e', class: `password_input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("div", { key: '2d04b602a2580bd890c4bcbc195fd2f7d0ad99b5', class: `password_content` }, index.h("input", { key: '6ac20c1181032cb5d118a90adc50a9ef28a51bdd', class: `content text-md-regular ${this.type} ${this.state}`, type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) }), this.showValidation && !this.destructive && (index.h("svg", { key: '0b06adc9db0ee631fc2df0ce1993f9eebe5664cf', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'c3a5f8f157cb597c923de7b140e485638ebb3c72', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: 'c50748306e9d93febadd2d58164bd57c1ec5bb79', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '61fcce0b95f11db92f38fe0dcd8b9774f280672e', class: `dropdown` }, index.h("gb-password-button", { key: '7a1fbb26e69d2e427419be36ae3826238ef589c3', onClick: () => this.togglePasswordVisibility() })))), this.type === 'password_icon_leading' && (index.h("div", { key: 'b994e79adeeb2672c99a8e215f1b025408772df1', class: `password_icon_leading_input input ${this.type} ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}` }, index.h("div", { key: '223deadfbdf43a4abcd2a3764c62141275687b83', class: `password_icon_leading_content` }, index.h("svg", { key: '21b6241f95689ee70aa64ac0c65ae3b87c7fdcb9', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '51ca40d8912df02ffbc112fd4f8e3c05c33df247', d: "M12.0759 12.1667C11.6617 12.1667 11.3259 12.5025 11.3259 12.9167C11.3259 13.3309 11.6617 13.6667 12.0759 13.6667V12.1667ZM12.0833 13.6667C12.4976 13.6667 12.8333 13.3309 12.8333 12.9167C12.8333 12.5025 12.4976 12.1667 12.0833 12.1667V13.6667ZM7.91668 12.1667C7.50246 12.1667 7.16668 12.5025 7.16668 12.9167C7.16668 13.3309 7.50246 13.6667 7.91668 13.6667V12.1667ZM7.92415 13.6667C8.33836 13.6667 8.67415 13.3309 8.67415 12.9167C8.67415 12.5025 8.33836 12.1667 7.92415 12.1667V13.6667ZM16.4435 10.1294L17.1868 10.0293L16.4435 10.1294ZM13.7003 7.58258L13.7347 6.83337L13.7003 7.58258ZM13.7003 18.2508L13.7347 19L13.7003 18.2508ZM16.4435 15.704L15.7002 15.6039L16.4435 15.704ZM6.29973 7.58258L6.33417 8.33179L6.29973 7.58258ZM3.55652 10.1294L2.81323 10.0293L3.55652 10.1294ZM6.29973 18.2508L6.33417 17.5015L6.29973 18.2508ZM3.55652 15.704L4.29981 15.6039L3.55652 15.704ZM5.50001 7.5C5.50001 7.91422 5.8358 8.25 6.25001 8.25C6.66422 8.25 7.00001 7.91422 7.00001 7.5H5.50001ZM13 7.5C13 7.91422 13.3358 8.25 13.75 8.25C14.1642 8.25 14.5 7.91422 14.5 7.5H13ZM12.0759 13.6667H12.0833V12.1667H12.0759V13.6667ZM7.91668 13.6667H7.92415V12.1667H7.91668V13.6667ZM10 17.5833C8.69057 17.5833 7.50287 17.5553 6.33417 17.5015L6.26528 19C7.45761 19.0548 8.66829 19.0833 10 19.0833V17.5833ZM13.6659 17.5015C12.4972 17.5553 11.3094 17.5833 10 17.5833V19.0833C11.3317 19.0833 12.5424 19.0548 13.7347 19L13.6659 17.5015ZM17.1868 15.804C17.3105 14.8853 17.4167 13.9152 17.4167 12.9167H15.9167C15.9167 13.8142 15.8211 14.7058 15.7002 15.6039L17.1868 15.804ZM17.4167 12.9167C17.4167 11.9181 17.3105 10.948 17.1868 10.0293L15.7002 10.2295C15.8211 11.1275 15.9167 12.0192 15.9167 12.9167H17.4167ZM10 8.25C11.3095 8.25 12.4972 8.27806 13.6659 8.33179L13.7347 6.83337C12.5424 6.77856 11.3317 6.75 10 6.75V8.25ZM6.33417 8.33179C7.50287 8.27806 8.69057 8.25 10 8.25V6.75C8.66829 6.75 7.45761 6.77856 6.26528 6.83337L6.33417 8.33179ZM2.81323 10.0293C2.68953 10.948 2.58334 11.9181 2.58334 12.9167H4.08334C4.08334 12.0192 4.1789 11.1275 4.29981 10.2295L2.81323 10.0293ZM2.58334 12.9167C2.58334 13.9152 2.68953 14.8853 2.81323 15.804L4.29981 15.6039C4.1789 14.7058 4.08334 13.8142 4.08334 12.9167H2.58334ZM17.1868 10.0293C16.9527 8.29067 15.5122 6.91509 13.7347 6.83337L13.6659 8.33179C14.6943 8.37907 15.5595 9.18437 15.7002 10.2295L17.1868 10.0293ZM13.7347 19C15.5122 18.9183 16.9527 17.5427 17.1868 15.804L15.7002 15.6039C15.5595 16.649 14.6943 17.4543 13.6659 17.5015L13.7347 19ZM6.26528 6.83337C4.48781 6.91508 3.04732 8.29067 2.81323 10.0293L4.29981 10.2295C4.44052 9.18437 5.30576 8.37907 6.33417 8.33179L6.26528 6.83337ZM6.33417 17.5015C5.30576 17.4543 4.44052 16.649 4.29981 15.6039L2.81323 15.804C3.04732 17.5427 4.48782 18.9183 6.26528 19L6.33417 17.5015ZM7.00001 7.5V5.41667H5.50001V7.5H7.00001ZM13 5.41667V7.5H14.5V5.41667H13ZM10 2.41667C11.6569 2.41667 13 3.75981 13 5.41667H14.5C14.5 2.93139 12.4853 0.916668 10 0.916668V2.41667ZM7.00001 5.41667C7.00001 3.75981 8.34316 2.41667 10 2.41667V0.916668C7.51473 0.916668 5.50001 2.93139 5.50001 5.41667H7.00001Z", fill: "#4B5565" })), index.h("input", { key: '2cfb6d5551ede4381c4b678bbfd5eb2d83d3b534', class: `content text-md-regular ${this.type} ${this.state}`, type: this.isPasswordVisible ? 'text' : 'password', placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event) })), this.showValidation && !this.destructive && (index.h("svg", { key: '1efec1ad39e5bb0a32d254793dd88e669089c8bf', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: '5cbad29be072691c64c9281f22cd464aab0a7713', d: "M4.16675 12.0833C4.16675 12.0833 5.41675 12.0833 7.08341 15C7.08341 15 11.7158 7.36112 15.8334 5.83334", stroke: "#079455", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.showHelpIcon && (index.h("div", { key: 'ab1d6339dabbdec780d91ab0440da0e6fac60445', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), index.h("gb-password-button", { key: '785e71a3685366b6d0bf38d45bc68790dde2bc7a', onClick: () => this.togglePasswordVisibility() }))), this.type === 'count' && [
|
|
1903
|
+
index.h("div", { key: '4f37cbf6a359c14ecde25c9589c062b003eea184', class: `count_input` }, index.h("div", { key: '21b4cf6abbdfda0b95e07670d938e6bb4d338749', class: `count_text_input ${this.destructive ? 'destructive' : ''} ${this.state}` }, index.h("input", { key: 'f00472fd41ab1e0e28d1224ceab3da6ebb13c1e7', class: `content text-md-regular ${this.type} ${this.state}`, type: "text", placeholder: this.placeholder ? this.placeholder : '', onInput: event => this.handleInput(event), value: this.value }), this.showHelpIcon && (index.h("div", { key: '9dce5793e2a14a2788c49bda420a333ed2b6e1d0', class: `help_circle` }, !this.destructive ? (index.h("gb-help-tooltip", { "show-supporting-text": true }, index.h("slot", { name: "tooltip_label", slot: "label" }), index.h("slot", { name: "tooltip_supporting_text", slot: "supporting_text" }))) : (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { d: "M7.99458 10H8.00057M7.99992 8.00001V5.33334M14.6666 8.00001C14.6666 11.6819 11.6818 14.6667 7.99992 14.6667C4.31802 14.6667 1.33325 11.6819 1.33325 8.00001C1.33325 4.31811 4.31802 1.33334 7.99992 1.33334C11.6818 1.33334 14.6666 4.31811 14.6666 8.00001Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: 'c94804b39531038bb0c0f2bc9ed99c4b2ddf2bc8', class: `action ${this.state}` }, index.h("gb-button", { key: 'c18323cbe30e5966665f0912d45097fb55eaff05', size: "xl", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/minus_sign.svg" }), index.h("div", { key: '1abac2f7cce32a6a44a16a7536bb0bf0c0328583', class: "vertical_line" }), index.h("gb-button", { key: '7970e64e0d7f68a2ead228989a670b59c679ef20', size: "xl", state: this.state === 'disabled' ? 'disabled' : 'default', hierarchy: "tertiary_gray", icon: "only", "icon-leading": "true", "icon-leading-swap": "assets/plus_sign.svg" }))),
|
|
1904
|
+
], this.type === 'tags' && (index.h("div", { key: 'b4cdca8b83d0a33ff28a0fee5a00e6e36f7d1bc4', class: `input_group ${this.state}`, ref: el => (this.inputGroupElement = el), onClick: () => this.handleWrapperClick() }, index.h("div", { key: 'f3dda46b1557a4acdd6b7a3f80b189e99ef0a706', class: `input_like_parent ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''}`, onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, index.h("div", { key: 'add4660b7ab97fd0ed6ce4aa98b2d9c607db4656', class: `results_display ${this.state === 'disabled' ? 'disabled' : ''}`, ref: el => (this.resultsDisplayElement = el) }, !this.value ? (index.h(index.Fragment, null, this.selectedItems.map((item, index$1) => (index.h(index.Fragment, null, typeof item === 'object' ? (index.h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.removeStaff(index$1) }, index.h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, item.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", null, item.objectName.split(' ')[0]))) : (index.h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.removeStaff(index$1) }, index.h("p", null, item)))))))) : (index.h(index.Fragment, null, this.value.map((val, index$1) => (index.h(index.Fragment, null, typeof val === 'object' ? (index.h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.removeStaff(index$1) }, index.h("h1", { class: "text-xxs-semi-bold", slot: "initials" }, val.objectName.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", null, val.objectName.split(' ')[0]))) : (index.h("gb-tag", { size: "sm", action: "X_close", icon: this.icon ? this.icon : 'avatar', onClick: () => this.removeStaff(index$1) }, index.h("p", null, val)))))))), index.h("span", { key: '233c7f2080dbd82c9c75fbb43e177748ea12b02a', class: "hidden-span", ref: el => (this.hiddenSpan = el) }, this.inputValue || ' '), index.h("div", { key: '1f562d905d2bc3caa93fabf8bf2f5e566110d037', class: "input_field" }, index.h("input", { key: '0ab2830175a7efbc735995a898fc700ccaf356ef', id: this.idOfInput, class: `input_like text-md-regular ${this.state}`, type: "text",
|
|
1904
1905
|
// placeholder={this.placeholder && this.selectedStaff.length === 0 ? this.placeholder : ''}
|
|
1905
|
-
value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff(), onInput: event => this.handleTagInput(event) })))), this.showDropdown && (index.h("div", { key: '
|
|
1906
|
+
value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff(), onInput: event => this.handleTagInput(event) })))), this.showDropdown && (index.h("div", { key: 'fb495958a8906c7c0950cd8963443051e02b3693', class: `tags_dropdown_menu ${this.show ? 'show' : ''} ${this.menuPosition}` }, this.results.map(item => (index.h("gb-input-dropdown-menu-item", { type: "checkbox", "supporting-text": true, state: reusableModels.StateEnum.Default, onClick: () => this.selectDropdownItem(item), selected: this.isTagItemSelected(item) }, typeof item === 'object'
|
|
1906
1907
|
? [index.h("p", { slot: "name" }, item.objectName), index.h("p", { slot: "supporting_text" }, item.objectValue)]
|
|
1907
1908
|
: typeof item !== 'object' && index.h("p", { slot: "name" }, item))))))))), this.showHintText && index.h(index.Fragment, null, !this.destructive ? index.h("p", { class: "hint_text text-sm-regular" }, this.hintText) : index.h("p", { class: "error_text text-sm-regular" }, this.errorText))));
|
|
1908
1909
|
}
|
|
@@ -1926,7 +1927,7 @@ const GbNotificationContent = class {
|
|
|
1926
1927
|
}
|
|
1927
1928
|
render() {
|
|
1928
1929
|
const iconSrc = index.getAssetPath(`${this.icon}`);
|
|
1929
|
-
return (index.h("div", { key: '
|
|
1930
|
+
return (index.h("div", { key: '61c5ee4f996d445c05b2b437145a0a08e0c3b039', class: "notification_container" }, index.h("div", { key: '6cc469fdfc87ca18e36a76578c8c3bfbc90f11cf', class: "notification_title" }, this.icon && (index.h("div", { key: 'ae040972e27fd58061ec2acb8140eda844a7b286', class: "icon" }, index.h("img", { key: '2364d2f1c543dd67dce835923533e5a8a64ec217', src: iconSrc, alt: "Icon" }))), index.h("label", { key: 'f75d11e6ca6f92b5e6795ca588c81d6cd9f6b5c2' }, this.label), index.h("span", { key: 'f58997808259bd90315f14ce5362eb01e75710d1', class: "time" }, this.time)), index.h("div", { key: '76e715ddcb1320d06fbb1a5402f035f6fcb8c54f', class: "supporting_text" }, index.h("p", { key: 'c96d756739c41c8a21e8877f6ac1a74d3f497b5e', class: "text-sm-regular" }, this.supportingText))));
|
|
1930
1931
|
}
|
|
1931
1932
|
};
|
|
1932
1933
|
GbNotificationContent.style = GbNotificationContentStyle0;
|
|
@@ -1987,9 +1988,9 @@ const GbNotificationPane = class {
|
|
|
1987
1988
|
render() {
|
|
1988
1989
|
const patternSrc = index.getAssetPath(`assets/notification_background_pattern.svg`);
|
|
1989
1990
|
const illustrationSrc = index.getAssetPath(`assets/notification_illustration.svg`);
|
|
1990
|
-
return (index.h("div", { key: '
|
|
1991
|
-
index.h("div", { key: '
|
|
1992
|
-
index.h("div", { key: '
|
|
1991
|
+
return (index.h("div", { key: '5ffbf686f46ba45fdac300fa4f8de6fb3f7e2a85', class: "notification_pane_div" }, this.state === 'empty' && [
|
|
1992
|
+
index.h("div", { key: 'ec5a3ee1242096a2c3db59805ae357c4dafc4392', class: `container` }, index.h("div", { key: '3ab2ae0a951a649e8ec0b952a68ad67f56f1be32', class: "frame" }, index.h("img", { key: 'd43cde19948283c8c535954140f791c87d118f47', src: patternSrc, alt: "", class: "empty_state_pattern" }), index.h("div", { key: '06873e452c552b89e98286102107a8e5acdb3bd2', class: "empty_state" }, index.h("div", { key: 'ece3d637b580e0119e5fa6fde617f41828f96049', class: "content" }, index.h("img", { key: '46bfcf9e2b7a8efccaf490b85a7016e20169808d', src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), index.h("div", { key: 'fa77c94752dfdc6321ee4d9ee89d2e07e27f2dda', class: "text" }, index.h("slot", { key: 'c78889e1ba40b0d866f1283d4db6687fd0870a3c', name: "label" }), index.h("slot", { key: '5bc59fedd3721ccc13f743fc3f6c565e89b3b742', name: "supporting_text" })))))),
|
|
1993
|
+
index.h("div", { key: 'a43f062167e49fe9ba5dd6d48ade7a626c94cf89', class: `button` }, index.h("gb-button", { key: '7fdd26013b947c7088e66a1e8a7ee17219c91cb4', size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, index.h("p", { key: '2a16e995a9a14a47f2931a520a14fe9d6b9d41c8' }, "Mark all as read"))),
|
|
1993
1994
|
], this.state === 'notification_dropdown' && (index.h(index.Fragment, null, this.notifications.length > 0 ? (index.h("div", { class: "notification_dropdown" }, index.h("div", { class: `content_wrapper` }, this.notifications.map(notification => (index.h("gb-notification-content", { label: notification.label, time: notification.time, "supporting-text": notification.desc, icon: notification.icon })))), index.h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, index.h("p", null, "Mark all as read")))) : [index.h("div", { class: `container` }, index.h("div", { class: "frame" }, index.h("img", { src: patternSrc, alt: "", class: "empty_state_pattern" }), index.h("div", { class: "empty_state" }, index.h("div", { class: "content" }, index.h("img", { src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), index.h("div", { class: "text" }, index.h("slot", { name: "label" }), index.h("slot", { name: "supporting_text" })))))), index.h("div", { class: `button` }, index.h("gb-button", { size: "sm", hierarchy: "tertiary_color", icon: "default", state: "disabled", "icon-leading": true, "icon-leading-swap": "assets/blush_brush.svg" }, index.h("p", null, "Mark all as read"))),
|
|
1994
1995
|
]))));
|
|
1995
1996
|
}
|
|
@@ -2035,7 +2036,7 @@ const GbPagination = class {
|
|
|
2035
2036
|
console.log('Selected page size:', this.selectedPageSize);
|
|
2036
2037
|
}
|
|
2037
2038
|
render() {
|
|
2038
|
-
return (index.h("div", { key: '5b7c56f0fe2d2eb42b7c8b8daf8dbb593fe9f416', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("gb-button", { key: '91a680c53d475f1a0dd4468237de151b0ebea451', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, index.h("p", { key: '0ba4af4351021f5efbdf3010e012ac2977d03d0c' }, "Previous")), index.h("div", { key: '7753bd4e66c58b143b6b4f3aa1c781a820eeabcb', class: "pagination_numbers" }, index.h("gb-pagination-number-base", { key: '57f48cdd4a57e1661d2f05f8271672b4e905e74c', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, index.h("p", { key: '67821a8804fb0b83539fe5d8ffb32c7b10438bc1', slot: "page_number" }, "1")), index.h("gb-pagination-number-base", { key: '6607a113615b093f0da84ce15ab7f73241866c78', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, index.h("p", { key: '57e81a32812c8654be949c53b7f9b1ffe60aad13', slot: "page_number" }, "2")), index.h("gb-pagination-number-base", { key: '88e06c636002779f08f249cda8ba398c80e8907c', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, index.h("p", { key: 'edf18b6b0b2326af43ebd4657143272d88ab5dde', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: '6278b2456c98d08a97f2850a12a2d6c91bf2e144', shape: this.shape }, index.h("p", { key: '8484a9453f7bc3e35d64d9e22e6e6e42ef8255f4', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: '2122c8b2d7440c23404c314e4836bf7214a163c0', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, index.h("p", { key: '692b3360d861d697c57980b26d56813f6cb99bd3', slot: "page_number" }, this.totalPages - 2)), index.h("gb-pagination-number-base", { key: '19f7b419c2d201d1c61865bf2120248d90094c01', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, index.h("p", { key: '58843b2481063c7724cb9f825f444ebf1fd6d8f3', slot: "page_number" }, this.totalPages - 1)), index.h("gb-pagination-number-base", { key: '9199f810f2dcd7470d08b24a8d873a7d507eafd2', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, index.h("p", { key: '7e70070fd49427ce4a615520c6ef4f64f526ccef', slot: "page_number" }, this.totalPages))), index.h("gb-button", { key: 'a0ff6b03062e4213417dd42ca5bcdb98866eeb09', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, index.h("p", { key: '6d7b19f01c8f28dab0178929cc14b12ad0f39b72' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("gb-button", { key: '98ea55459fb97ae7ebb0f8c1b6c65f960bbc35ad', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, index.h("p", { key: '247d28c604dbf1516044b6531ad03a9113be1118' }, "Previous")), index.h("div", { key: '3bf8691f5aa3ccd7530e9aa5ba42684e75c0a03b', class: "pagination_numbers" }, index.h("gb-pagination-number-base", { key: 'fe496078a48de76dd1704a0f8a4d5922c5027a59', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, index.h("p", { key: 'fc75d92c2a71ad36756a7f32a3db42251eef6088', slot: "page_number" }, "1")), index.h("gb-pagination-number-base", { key: '6bc2808abe2b73f6abb960cd95acae4a5c5f6ed2', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, index.h("p", { key: 'db21b6a300cab5998066ec86db8260087ce9f06a', slot: "page_number" }, "2")), index.h("gb-pagination-number-base", { key: '527f37b5b06d6fc0cb2e5a961b8cc5d9d37159e2', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, index.h("p", { key: 'f69c1adc015269b50936e8df03b6410bdaaac833', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: 'd8a14e45e8963595191bbe734015630f56ac8bbb', shape: this.shape }, index.h("p", { key: 'f4ba1e2076e682a4f6494be934e96c6bcfbb2b4e', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: '2e0bec401666045bb04f2e3578c093f9cd2f56d3', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, index.h("p", { key: '46d8181e43f5a9adcf3f5dfa062feefa8479c616', slot: "page_number" }, this.totalPages - 2)), index.h("gb-pagination-number-base", { key: 'a54e2d6c8bf5df509d0b398d46c6eeba14bae645', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, index.h("p", { key: 'bcf74569de3f8a975519c00e8b7eef60e128970b', slot: "page_number" }, this.totalPages - 1)), index.h("gb-pagination-number-base", { key: '7c23431c19f9abc11e2b37abcf2cfe4fe295cc6f', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, index.h("p", { key: '0f209c50bec22654324abf2ecb2759c5592f5d48', slot: "page_number" }, this.totalPages))), index.h("gb-button", { key: 'a91c301d5630141e0ea0675dead4eff65206de7b', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, index.h("p", { key: '4f93b477735e2c0ebe9fb185b23b394bddaba2b5' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: '7eb8b3633db6cb402689a54a59ef508537a0b8bf', class: "pagination_entries" }, index.h("div", { key: '4aee27850ccad17f2d61ff2017c1eb9a85900571', class: "entries_text" }, index.h("p", { key: '652e7dd6dc372e6a0d5d6dd0678d9fcea357ae9f', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: '5b1b2f30a24aeff47c5ff5f488c9b38ae73cbb9f', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: '6d9f3de5f05b3d33a0e95db0674355af1b5d2ad7', type: "default", state: "default", size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-help-icon": false, items: this.entries, "menu-position": "top", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), index.h("div", { key: '4c5508e187a05c74c9030813adfbffdadc71579e', class: "pagination_numbers" }, index.h("gb-pagination-number-base", { key: 'e194cc355404fe9bcb5f7487bf40ecc8e3995aa5', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, index.h("p", { key: '4b9a48b2c0b60f6730bf8a2e1e4f97ce7eb3fde0', slot: "page_number" }, "1")), index.h("gb-pagination-number-base", { key: '10d131afc3bf4744a59a9496e9a184fac836ef79', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, index.h("p", { key: '4aa044102caa8d14bae30d96751351d230ab277d', slot: "page_number" }, "2")), index.h("gb-pagination-number-base", { key: 'e3cecd37404672dfbc1d0c1331f18cf106945d17', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, index.h("p", { key: '9313dc006161a5a36ff7eb6a4ba53f4298c4b97a', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: '5d2a59328acb4575ce082edf321152eecca2872e', shape: this.shape, state: "default" }, index.h("p", { key: 'f0c0b56520ad39db54e5b11c5750c682048ffc13', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: 'c847af02fa1e9b7bcf4ecb5353b332c18ea8b5f6', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, index.h("p", { key: '6128186a4ac5cb7a756ce7a04e3b117d25132a82', slot: "page_number" }, this.totalPages - 2)), index.h("gb-pagination-number-base", { key: 'c9175a1d417a420213e36f341dfaf76f2d470603', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, index.h("p", { key: '429c85babfc601916390242cfd643815e011a734', slot: "page_number" }, this.totalPages - 1)), index.h("gb-pagination-number-base", { key: 'b4970af3bda9db9f3b549c54ad0ad7a9237138dc', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, index.h("p", { key: '49a510fb7635ce46e137995937169f78fe8c015b', slot: "page_number" }, this.totalPages))), index.h("div", { key: '5fae73da4cf0f01f5c4bd9e03a162586f30d1587', class: "pagination_btns" }, index.h("gb-button", { key: '060fdb67b05419f1b9bf43f98085616a69d3ec3a', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("gb-button", { key: '73e1fa97f2df7cd80c27cb351d80de737de515cd', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))), this.type === 'card_minimal_right_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: '29263ef681da24a0d355c8124c645c768bfac39f', class: "pagination_entries" }, index.h("div", { key: '0d9a973ba895f8527b8f1fc131c78436ee77f8c1', class: "entries_text" }, index.h("p", { key: '749c821f7b8b3fd2c56ea80456a4fb3118ff2cf9', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: '6f8b907e9fe9bc8f8853a8cdcd7c61a42d1e6cd6', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: '911b78331ba5218ac3def5090b0b40ea8a2bb3b6', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top" }))), index.h("div", { key: '146393291dbf0d7270de962bda7f7951e3cfd9ce', class: "page_number_text" }, index.h("p", { key: '29f74334c9227a0b3f01267eafc083e67e5e5d8a', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("div", { key: 'c5caf3e0f9c28e6dec72c545075c884da82f9097', class: "pagination_btns" }, index.h("gb-button", { key: '06665af180e5fe2537905d2afc229511650b78fa', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '6a6c858d49e835b17cba7c0d1eb55c58b2f7c077' }, "Previous")), index.h("gb-button", { key: 'ecad2f6f4d6057bd375bee01eaa076c570e0a337', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: 'c0e71c4bc99672546b07de50536691e6676b286e' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: '21c1b1e1fe7eb44c5c5bdeaf244133c3a07be308', class: "pagination_btns" }, index.h("gb-button", { key: 'bfcb10219cdefa847fd2501a122e016d1b1498db', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '75ed11fd5e5ff9169c94dff92cfeffbaa44c1cc4' }, "Previous")), index.h("gb-button", { key: 'ff737bf221f0b0f6f464d6b9049261d8fe5ec3c0', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: '19241e07b9a7c8f2a7ed158b7fb4e3c0735ce23b' }, "Next"))), index.h("div", { key: '3e2854b055ff06d7d5cff834841b5003ba63da04', class: "page_number_text" }, index.h("p", { key: '2c4f243f33f293d6e949e29bde18a793e6c61b73', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("div", { key: 'aaffd674263979860f382552041688e92e346722', class: "pagination_entries" }, index.h("div", { key: 'e6c52a4624740a38af4aca3e3ea4b26f7e362e85', class: "entries_text" }, index.h("p", { key: '28aa26dd87bab33416ec0e17c33d42bc57c87452', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: 'e7dc797ef1976b3422096f7e4f6fceb30e48bf2c', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: '6d17c1b2df50bf1aafff8c73fcd91c949143faa4', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top" }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("gb-button", { key: '5ab235e7e70a953c98cced92c1f35980b802e523', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '5f3d544abe125f5a04d3944350dac36a00db7245' }, "Previous")), index.h("div", { key: '0bfd0cbfd2aedd80c9c464937921c439a81d91c2', class: "page_number_text" }, index.h("p", { key: 'd16c8c16fd9d9c9d4f6abffa75d8f2a40b1985db', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: 'e0da3f6429a86111440a449eac374520d864f451', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: '821f9288850d5fa0b6d47d32003c8e2f4db119f9' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: '3c3ed508556ee274f0b199745856c9e0af1a5130', class: "pagination_entries" }, index.h("div", { key: 'a7954a3c152f0c55e10a80d512061e98a5a06bec', class: "entries_text" }, index.h("p", { key: '8e7eef8da2bbd096149a62b6736fdfc5f9a8f2f0', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: '815929f40d9d762581aff66dabd0da62696fe293', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: '95d09f39e6e82cff271a4b260da618287b1a5a16', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top" }))), index.h("div", { key: 'ac6077b10f4f4318cbb55e1190bb391e62ca3237', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: '3399ef7c90864c39db731e596bb8145ff537f9f8', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '9899a25af502adc5c84fe1703a432e513ebe7a2a' }, "Previous")), index.h("div", { key: 'b1f4553073dffdef30701ff633ec55a932d34f08', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: 'd345ef30c4d8a5329df0621bddd680b6a49ee015', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, index.h("p", { key: '60cbcb4cc7e4706547e428a4c18e58701e52ef46' }, "1"))), index.h("gb-pagination-button-group-base", { key: '6a9a9c98daf12b5efd5694203a3451b0db3f1cb8', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, index.h("p", { key: 'b92100cf4dc7890891203793d9cfebfb02d899b9' }, "2")), index.h("gb-pagination-button-group-base", { key: '7579b6db54d7ae99db1073bd6e7334883db0f27a', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, index.h("p", { key: '255ae11cdc759336b078a557b77b682b0fcd82f4' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '8449b8937b191e9dafb8b30fcf7a2eea56f59728', icon: "false" }, index.h("p", { key: '3c1b19d00c273064a029779df162ecc7f34a8661' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '5cba025355d39d522712ff3908c65f8d17e51806', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, index.h("p", { key: 'd85f41e3736bd81b6b964202787d34690b6fce0c' }, this.totalPages - 2)), index.h("gb-pagination-button-group-base", { key: '7a02b2bffde1d8b95b844c9085cca177ea296177', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, index.h("p", { key: '6be82f98139353cea32eb0fd34e0439f2374a6c1' }, this.totalPages - 1)), index.h("gb-pagination-button-group-base", { key: 'ac704866e0347e1b45d4b8ca739ca861f8f78741', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, index.h("p", { key: '0f17b9e29b7c3fc5284e16840621251e39ac1ebd' }, this.totalPages)), index.h("gb-pagination-button-group-base", { key: 'aafcba10c8113fd5e98a8e7ddfc445ca2bb960a6', icon: "trailing", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: 'e315d37a5e3fb6ec05a1f4b1854bf45006a439ab' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: 'b961e6d7eb6f20ea023a0a86b3e5ba57f8cb0a99', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: '97095a76efd6dd936b9f541cfde9d1509fd761f9', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '877c2f67e27c7251601e31fd8e69fbc86ea78093' }, "Previous")), index.h("div", { key: '2f7a938f3e79903d51b321efd432366ca657d866', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: 'b2e892246dbf23f94b8113dac8bc8a51c961b2fc', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, index.h("p", { key: 'a08de6fe23d0dc3c59cfd2f9914ca74073719d40' }, "1"))), index.h("gb-pagination-button-group-base", { key: 'b089a19d1f648afa6530d1d749ddd391490606e4', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, index.h("p", { key: 'b1edc5d74bcac9d94a3c49aa0835933dc28006a4' }, "2")), index.h("gb-pagination-button-group-base", { key: 'e674a8715a9ed402b2c19571dca5a41186790669', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, index.h("p", { key: '939c652a8450085d2f33af295f7b274e9d2aad1d' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '29b333b3e6433e853676fb47e9051e57fa587e53', icon: "false" }, index.h("p", { key: '54428b0abc2782bb29fe924164639d5bcee503b9' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: 'faa65685aecf7af1e7c3b1ba77c02499733c19f4', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, index.h("p", { key: '476506856fdfc5f857e1cd33fc96db6ab3fe02a5' }, this.totalPages - 2)), index.h("gb-pagination-button-group-base", { key: '7a336b9d8fb4706bae503816313f19c3cc11f868', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, index.h("p", { key: 'a43b0735c0f4c656bf71a61dff8f541e45cdb1a1' }, this.totalPages - 1)), index.h("gb-pagination-button-group-base", { key: 'c67e3106d15293c6ae0d43cc84bdbbdcf48b0b5e', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, index.h("p", { key: '2ce64bae8352fb36596d0f4a842b7bbe829505d9' }, this.totalPages)), index.h("gb-pagination-button-group-base", { key: 'd09cdc3af5ed22a2eeaad4580d2b06473804dc8e', icon: "trailing", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: 'd57104f9fd0e645b6afb08358300f68695be7616' }, "Next"))), index.h("div", { key: '62fda5a8758cb56351ae78d5c8c8bbc5c1404dc1', class: "pagination_entries" }, index.h("div", { key: '7b30b9a80ac79186086edab3eba79e1def65ad6d', class: "entries_text" }, index.h("p", { key: '317b67757264cc3b36ab8d97d6740a2c6ae80cb1', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: '8ec693df8606af40e0e04d6e4a8801fe6213c12d', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: 'bc3dd41d271b7095174ccab89a2aab3b8fcc00cd', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top" }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: '9e0e8717407a711daac4bbcb0a0b49813fcd97c2', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: '5925acaa144061e6ecccfa7fbdad51ddcfa204d0', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '3b2e6dc7f96c7473fedf014693e6ed37d6b68393' }, "Previous")), index.h("div", { key: 'f66393089730f89d4b5d01dab21cba185e396a46', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: '6e650db7b77a3cc1d12c22911e9f07184f654051', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, index.h("p", { key: '9b904c65a74b82fe8613acbd3955a2c79e82630d' }, "1"))), index.h("gb-pagination-button-group-base", { key: '4fa1aa75ad4c3555f26db4fd68aa9d4b4e37368e', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, index.h("p", { key: 'd5728950ac7a8211a89d0ce0153da90bbd097aff' }, "2")), index.h("gb-pagination-button-group-base", { key: 'c8625bba0deb22ae134d95cb793b46b960316f8e', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, index.h("p", { key: 'dd30dd97a1211af19c3aa2bdffefc0394bfda2c6' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: 'e737a74060c3a9607eb8706000fad99165c8c82b', icon: "false" }, index.h("p", { key: '6fbedc8525fcb67580023096fe0ca8dc798c89ad' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '763437a80d077a2c262d5c066c8b6d52134a5727', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, index.h("p", { key: '438ba194d1a9b0ff6d8b2032f853440945bd5721' }, this.totalPages - 2)), index.h("gb-pagination-button-group-base", { key: '90dbc35b8ff79a34eb787dbec5aaeb89c27970a6', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, index.h("p", { key: '67adc0e5d8b3b917077b0f0753cdcbc407bfb893' }, this.totalPages - 1)), index.h("gb-pagination-button-group-base", { key: '2103c160fd3ba9c408991c181509ed826628ed50', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, index.h("p", { key: '02680a059e27618cb31419640f3723ba6a72816b' }, this.totalPages)), index.h("gb-pagination-button-group-base", { key: 'ee6357b83569456f153ac24ca476a15057fad3e4', icon: "trailing", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: '0c6ee603b1e3fd837d7e735389622d81b29ea5c6' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '4d0636587a5f9332607d412509fa2bcac206d881', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '0e35a2ebbd5efc28172e2e82bc22ca1795ff694a', class: "page_number_text" }, index.h("p", { key: '722efb7f430b63b3a0b4bc87303a6e47b9fae304', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: '1bdf515c71528321ce61a0cef6aa801718017664', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '30efb557042638ae3e277d872916aeb734b7dd86', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '86be51ff6fc1677d62e359bf9942a80ebf68608f', class: "page_number_text" }, index.h("p", { key: 'd89f7df011b468b95b74c383f61b47188c46182f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: 'b75472be0b27f4bea13c3e078f0ecd2ce65974ee', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_default' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '307436aa2f4cd8e03e0ce4e1135840cefa749a1d', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '648a30c1b080a2bc62d411ea987261f1cfe149fb', class: "page_number_text" }, index.h("p", { key: 'eb3eaffcbdd3dbf1c443c950102baaaf6838b22f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: 'a060964a86b78293cc1f54fb29730bfc8567db37', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_minimal_right_aligned' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '49d3a02b76aad95837bc943fc0605573e5576b4c', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '2a08602babe4d819051cc5e16b01b655be8a85d8', class: "page_number_text" }, index.h("p", { key: 'a39658fd621e858cf701dc1c7e042b3f3371c3c3', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: '8aedfa39011c059e5dbcddf30ede6bc65408cb09', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: 'a322412d1ca17c13254cb885a75c96c33a9555c2', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: 'fe04963394c4c45a0832a4dba9b8a3b46cf0af15', class: "page_number_text" }, index.h("p", { key: '1acf42c79e511a20510857f9e77071fa330afc53', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: 'f816173b5ceac3547a847517106b933fef2b59ed', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '83fb18b576edf456d4ded987a8db98d9a91b8dcd', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '1d4d242324c0b7c32b53419f02f9d73b578070b9', class: "page_number_text" }, index.h("p", { key: '5424ad1dafaad1d4151d52f83570caf570462ea0', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: 'e0bfece9f338b4277f1b58d2d37c78c26a7fcf19', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'mobile' && (index.h("div", { key: '1dbe6480a0be3b515661b26c1031aff3bea99c4c', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: '1d1da6458e6dbfa71b4d35143860546abb7aa5f9', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '92f41b1f86fb8444f3c575285516bbf577138379', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: '56109f45d54fdc5614707972ea2fa2b35715f4ca', icon: "false", state: this.currentPage === 1 ? "active" : "default", onClick: () => this.currentPage = 1 }, index.h("p", { key: '8ef91a01c584bff21af1dc003ae0b0d783ce17d2' }, "1"))), index.h("gb-pagination-button-group-base", { key: '2e172aea87223eecfc8e47288869e4440e101951', icon: "false", state: this.currentPage === 2 ? "active" : "default", onClick: () => this.currentPage = 2 }, index.h("p", { key: '6b21c00d2279b2dcfde7e041b775ef5824a96192' }, "2")), this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: 'b54f846929f745b1f79d4e049fbe2bde4d22eedc', icon: "false" }, index.h("p", { key: 'a9190e9f6245f5d3805639accf409e1af3ca4ed1' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '0f4ed34cb2dafa2bd303fd3d9fb2a3cf27314aaf', icon: "false", state: this.currentPage === this.totalPages - 1 ? "active" : "default", onClick: () => this.currentPage = this.totalPages - 1 }, index.h("p", { key: '2abe0bb91dd7b671d6085d3dce2975ccb7b039c5' }, this.totalPages - 1)), index.h("gb-pagination-button-group-base", { key: 'e5bfc0a8bb710f450037912132241f4b380c180e', icon: "false", state: this.currentPage === this.totalPages ? "active" : "default", onClick: () => this.currentPage = this.totalPages }, index.h("p", { key: 'f8f47a5c306d6012a83cac1a10f0efc61f546b33' }, this.totalPages)), index.h("gb-pagination-button-group-base", { key: 'e57aecad79fea1e0abc7314ef7c762694e895333', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'mobile' && (index.h("div", { key: 'a54f57a3c3e94044363b431cdae4e630a764c3c2', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: 'b97ada13e0693c5ef9b6bcddc839a4659af53e04', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: 'f8b3ccc13b4baf63856053d812d8d7f950fa50be', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: 'a6b216c8822fa216c74338e66dd585fe43043e62', icon: "false", state: "active" }, index.h("p", { key: '382905ad1441cc5d3e12dd998515c487271d4736' }, "1"))), index.h("gb-pagination-button-group-base", { key: '477dbba401c70f5a1b410ac5a6f8b280bd855a38', icon: "false" }, index.h("p", { key: 'a8eed7f1715ef3fc722ad3821d94d3a11cb9556d' }, "2")), index.h("gb-pagination-button-group-base", { key: '6f726020c415d0e2c138fd7ed393b9dab77b5ae6', icon: "false" }, index.h("p", { key: 'df3df63b994e0ebcc6066885b6bd75220e5404a8' }, "...")), index.h("gb-pagination-button-group-base", { key: '63974b502153e511bac07665649a3785264123a6', icon: "false" }, index.h("p", { key: '5965ff88ee75bf0ff49fc993672dc7d19e9302db' }, "9")), index.h("gb-pagination-button-group-base", { key: 'b5686bf9d23da0e6717920ac2134441231e8ad26', icon: "false" }, index.h("p", { key: '134553948c8a31f9a6ee9f944ed9bead9dab5c18' }, "10")), index.h("gb-pagination-button-group-base", { key: '1c3b58fda2656a6a48543b1d74906cdeb8bac388', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'mobile' && (index.h("div", { key: '21e81c122230810bdd7eae1706a96577c1f96635', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: 'ee64227afec53c9c9e899e00189909c0c45eafba', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '6360bb621aaf68fa171d6a0563e29ebc6b979751', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: 'af140f6d2f16dd03810d0a01ac64f0d955ecbebe', icon: "false", state: "active" }, index.h("p", { key: '5625c10cdba08a9bf21a0d1deec93d7e612e374b' }, "1"))), index.h("gb-pagination-button-group-base", { key: 'e2e49e384a64eb594fb8ef6b20091c81370d92e4', icon: "false" }, index.h("p", { key: '4854961212330c27aadb779ecfbb80959c100885' }, "2")), index.h("gb-pagination-button-group-base", { key: 'ecfca88b2ccce7dc1de709911083e546b45b01e1', icon: "false" }, index.h("p", { key: '7e2c1ad8c9ef8a24ed22c2910a9b8ae5e0617ecb' }, "...")), index.h("gb-pagination-button-group-base", { key: 'a89037f5bd4c745da6eff873394026b28c61670a', icon: "false" }, index.h("p", { key: 'b217ef6b9deb59129bb4430e532bebcaca1678d4' }, "9")), index.h("gb-pagination-button-group-base", { key: '8d20465cb12bda6952dd5e4f816b22db6b2203b8', icon: "false" }, index.h("p", { key: '38be4f9a2c4708279e7922ab9d127a3681a0c1db' }, "10")), index.h("gb-pagination-button-group-base", { key: '99aabde2bd2699a123f385b26cc5ff2085497c20', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
|
|
2039
|
+
return (index.h("div", { key: 'b33a56fa8b7cc9bb61649f821c968928f90c4568', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("gb-button", { key: '9be6314df45d65ff7be8770bfb946481c1cc4fd5', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, index.h("p", { key: '139cc6ea1fda2c4be3dba29551c4c02ba67af01a' }, "Previous")), index.h("div", { key: '87d2ffa1c941a8b75b934e9947281334af116602', class: "pagination_numbers" }, index.h("gb-pagination-number-base", { key: '1524d7dc861cd9e9099c41e0808756a1b7b04d28', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, index.h("p", { key: 'b6ef975b089a15f151f6e52c91e079d16bdf76c1', slot: "page_number" }, "1")), index.h("gb-pagination-number-base", { key: 'da771e3a0ebadc9ca911867ad947641422e2454d', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, index.h("p", { key: 'f527902b39ecb3d6300c4d3ba50bbd9cea802034', slot: "page_number" }, "2")), index.h("gb-pagination-number-base", { key: '8525458cbffb9b2430f5230a5c80d833b2aba1dc', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, index.h("p", { key: 'f9821279679d1be5224ca5de82ddb0ead682631d', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: '73a02c160cfcb4425f62b6668213bc14c190d16c', shape: this.shape }, index.h("p", { key: '7446a9f49e1b45de5ac23e69dc33a5de991c334d', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: '3e30574a7b3adf3f64d24d793a92ff9f901a5cc3', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, index.h("p", { key: 'c45f158f9210a1a9e06e16fffca61b710d0e3af5', slot: "page_number" }, this.totalPages - 2)), index.h("gb-pagination-number-base", { key: '1b7898f361f55cdf6db01d39102927c90e4f9ea8', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, index.h("p", { key: 'c5c28813670157ca34de07be582f420e277eeadc', slot: "page_number" }, this.totalPages - 1)), index.h("gb-pagination-number-base", { key: '6458a571954c7585502199770fe61f77cd85aad0', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, index.h("p", { key: '12142cbc6443901fec0773b97482ff1572ba46bd', slot: "page_number" }, this.totalPages))), index.h("gb-button", { key: 'e12c1b3ad94beb4972e9489dfaa7db6d444eaf34', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, index.h("p", { key: 'a36b702c9c20966df214bd0ccbadfe818f8bc260' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("gb-button", { key: 'fe1f1fb20788921637471646ac3129795df482a5', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, index.h("p", { key: 'f0a28850c1aafd6f26446c4e6d5f1891f69f976c' }, "Previous")), index.h("div", { key: 'c4c4305533ede55d77eb5f3dec24712a7ef3d5bc', class: "pagination_numbers" }, index.h("gb-pagination-number-base", { key: '7f50e03002fe80af9437e57ab22193d46042489a', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default' }, index.h("p", { key: '489d2dd318f06800640dbd3e4c2be33d1e38a10f', slot: "page_number" }, "1")), index.h("gb-pagination-number-base", { key: 'c3941e0a2ee7d13b295b5c194e5eca3ac049f47d', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default' }, index.h("p", { key: 'bb607aaf455ebb7a4d8c7c931807ee423d4eabc3', slot: "page_number" }, "2")), index.h("gb-pagination-number-base", { key: '7a66dd70aadb0ada40091a874f17aa9de091958f', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default' }, index.h("p", { key: 'a9e3994317f15f4e58ddb955d069dbc0abb66d4b', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: '880f40c0f706ca4ffbefaa4b3bd408005e7c1e0a', shape: this.shape }, index.h("p", { key: '64c16bc7fd295d5ecb77b73b14080d071bafc78f', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: 'fa3e9ab63fbc609f4caa96a70369fafa4a515d61', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default' }, index.h("p", { key: '259330fd89e838b6b134525e2a2cab34d45a21fc', slot: "page_number" }, this.totalPages - 2)), index.h("gb-pagination-number-base", { key: 'aad8d53e6caeb9deadb0b116e6ae215da111af58', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default' }, index.h("p", { key: '0df1de89edbda0c61cee3fa0bfa06959f95b46d3', slot: "page_number" }, this.totalPages - 1)), index.h("gb-pagination-number-base", { key: 'f6ab797254fbb4c5ee4cbf78edcd6097d45c4266', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default' }, index.h("p", { key: '9a955270a0e0b067cf9905d8297692f6cefbc907', slot: "page_number" }, this.totalPages))), index.h("gb-button", { key: 'c9c098204c21a8e45ab30fcca4a5abbe7859bd16', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, index.h("p", { key: '446378f4d5993f2aa2b7c851bf32d81bbd9c870f' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: '53c691fb5b02eaabbe9ea7a319a77c4a00fc2ce5', class: "pagination_entries" }, index.h("div", { key: 'c6db9d562a99b5161ecbd6ff314102de02501bcd', class: "entries_text" }, index.h("p", { key: '046b712c448c24c8936bb19cefcd04d7e75e7052', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: 'd9599a7646d220ff76acb0684752296a75e6dbf2', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: '43c2da9f3daaed8569ded16a84403298b3a9646f', type: "default", state: "default", size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-help-icon": false, items: this.entries, "menu-position": "top", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), index.h("div", { key: '1e6d81ff2c214efeb5e8bffac5ea65d94ee0be79', class: "pagination_numbers" }, index.h("gb-pagination-number-base", { key: 'c70f1a51237d469c805e4c4bb49144d7efc1ac1b', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, index.h("p", { key: '52184d9a0e21ae95f1ad598ff2284620674db6a0', slot: "page_number" }, "1")), index.h("gb-pagination-number-base", { key: 'e45b1feda34b6de83bbf4514cc2f9a2605123714', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, index.h("p", { key: 'e3b9cb29b534f1820b9e290d57526bc0275f82d2', slot: "page_number" }, "2")), index.h("gb-pagination-number-base", { key: '5f0cfe47f01a8bf55298e9547b3835d52942a32a', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, index.h("p", { key: '41495083e36055d3a9c97e25db307963661b1f85', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: '08a79bc505230602a3525d6f2949c82e837a61ad', shape: this.shape, state: "default" }, index.h("p", { key: 'bafd67d31fd3ec2a22f4a856629e21ac843dff7a', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", { slot: "page_number" }, this.currentPage))) : null, index.h("gb-pagination-number-base", { key: 'd66dd15dff4e4abfda2ccfcadca0aea01ebed2c6', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, index.h("p", { key: '276947cc4cd9a0a21e481e278a5a2a9755b92c6c', slot: "page_number" }, this.totalPages - 2)), index.h("gb-pagination-number-base", { key: '226e12ad5599996025abed2cc8c7e19c07fe4d77', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, index.h("p", { key: '2e48749ccf5d6e6ddd361b65c83ce9da9dd30da6', slot: "page_number" }, this.totalPages - 1)), index.h("gb-pagination-number-base", { key: 'e69b9dafd6df4b10576abe1fff09ed961d28ccd6', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, index.h("p", { key: 'ab20fb5a746e3367397e7ec22330e19e2179f646', slot: "page_number" }, this.totalPages))), index.h("div", { key: 'ee738310fa371dd8136c456307e5cfe154c7413d', class: "pagination_btns" }, index.h("gb-button", { key: '9551bc779e674069c7bace4c339d10f5d310f8a2', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("gb-button", { key: '414202cdffb1d5e577f03f554792bac30f478e2c', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))), this.type === 'card_minimal_right_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: 'ded90fda6f1938cdf80b8752bfd9400f47a89adf', class: "pagination_entries" }, index.h("div", { key: 'e5d105db6004a2cda296bdd6fb8c9a1b862ae314', class: "entries_text" }, index.h("p", { key: '7eabe21fb60caf60c0f17eb3cabe22ea5126f4a5', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: '8e32c1dd4a44900b0705a4e7c49245b8a7373b44', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: '5914ea19e33ff2a17f5a5098c6dc03c8a5e90900', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top" }))), index.h("div", { key: '94830fe65e04271a0d4421a0031ace0793bbd42e', class: "page_number_text" }, index.h("p", { key: '739597029968db80d72ec2637b73d14c361fa830', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("div", { key: 'e244c4877d4e00c1e8a70ab70d87b88662d2e2ba', class: "pagination_btns" }, index.h("gb-button", { key: 'd80a30ed2862429d219b22eb752d65b917a82e69', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '197edd929b01dc3593c333efd6933ee314dbf078' }, "Previous")), index.h("gb-button", { key: '3a63b271e487ceba82b5b4556f2e21f7dc02ab57', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: '2b62291f4cb7f08f4685aeade8fffc84ee34cd22' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: '121df6d95b535020b03cf231c362dc1dfceaaad7', class: "pagination_btns" }, index.h("gb-button", { key: 'cda4dec26075fa6d2d2460db66a1d6f3af2fbbd6', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '381828bc4a11ade344855c1d68d408d11f51fb90' }, "Previous")), index.h("gb-button", { key: '712b9d312984f4e93425cbcf7223a8e365ea16f2', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: '2d5ac6832bc288faad276fa33c65d8e8f0de615a' }, "Next"))), index.h("div", { key: 'ec626eb17f9036f085de97bbcd339a2e4390e94d', class: "page_number_text" }, index.h("p", { key: '7df95181851ca4d06dde6fb41142d74665c96f56', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("div", { key: 'f32c0b54885a57e061bf9242c95980020974fca6', class: "pagination_entries" }, index.h("div", { key: '1a0d1240515850cf252a3fa008d380172a0e5017', class: "entries_text" }, index.h("p", { key: 'ae605849beaca911f21f3b3c14ae0b72d5006d02', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: 'e0019a34353f72f6b3c35dbbb6f82a15a960dee1', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: '30afc6a40ed23f4db0e773b112994d1a924d67d6', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top" }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("gb-button", { key: 'c42f000a769e80fe99b6a49f11c28f8b7f87bc53', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '5b2fe85f2e7be4fb71db38a1d66888615dac431b' }, "Previous")), index.h("div", { key: '918140dc6c7a6e0c405d1f4cf0adf97a53bfb882', class: "page_number_text" }, index.h("p", { key: '9241057d810dc386b4ac40094351f132883e83e4', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: '2359c104a75ca5b6e4d205f1e8fed6114aeb6cb0', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: '2aa31fee4e5ca6d75ae5001b3c97fae4a2c42701' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: '9fc008d8a9be827802b0fda5e6f3fc442303c4fd', class: "pagination_entries" }, index.h("div", { key: '8ef973949dced3451ead4f096e7001acbc2cb7d0', class: "entries_text" }, index.h("p", { key: '149dc3f7fdeafd50b7d59d4449819197c798c25e', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: 'f82d438acbfd9e537ce1ca95cb967928d308cc9c', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: '2fcfe12d5b0966b1154fe44c2d2fe4c446399784', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top" }))), index.h("div", { key: 'bab0a149ac88f8c5fd40456cfbad55fbd7da3e3d', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: 'abb49c8dbd008e224daa0db3afcd201aaad0cbbe', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: 'de3b71ff4d22fbc8273657caefb950ec2ee46536' }, "Previous")), index.h("div", { key: '8ac898c2d0cb0f5cce5da5d479d25d92babf5d36', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: 'b15f7d94c6d8b24b2dfba3fac8563bef4c5a38c7', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, index.h("p", { key: '9133b174a5000c43ddb3120b23ea0edc47ff7677' }, "1"))), index.h("gb-pagination-button-group-base", { key: '5808fa8c9634003c4a10b2a6b4212c820711fb16', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, index.h("p", { key: '1ea581a7496e220d685866bd52f7c1963fff7bd4' }, "2")), index.h("gb-pagination-button-group-base", { key: 'eeae2e54a0e236f1fe1839842c57353ef4d0956d', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, index.h("p", { key: '983354351174862e8a94723665a93ace3b36e7b8' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '675b5d483716b41794e959b81ee7a4a5b5436e59', icon: "false" }, index.h("p", { key: 'd6bbbc57e60e140f07d582b65822c2d9980e5669' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '855407c9e7157952a02a681b2ea4849f20b92bbc', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, index.h("p", { key: '8870273a1667e0ad08859f7eea221b45e7b716c6' }, this.totalPages - 2)), index.h("gb-pagination-button-group-base", { key: '472bcd078b58a038d21540abe3de9daa4437737e', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, index.h("p", { key: 'daa89f085b47d24314a66c752279ae4ad34c30ce' }, this.totalPages - 1)), index.h("gb-pagination-button-group-base", { key: '4d99bd8282d87edc798c353ce41fb5cbd790ad98', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, index.h("p", { key: 'f48c3e1a8087195e1aa7513313ac9e0c846c839e' }, this.totalPages)), index.h("gb-pagination-button-group-base", { key: 'd45df853ee717b461ab24b732d66f558f9bb8564', icon: "trailing", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: 'e0565aab6e681f2b153bdbfb9c0dd7d4f72f737c' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: 'c423abf2a2b2d058fb461c79d82cbf9dcef6f0f2', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: '7feb6fc3435a68dcb78ce52dbd8bff45a99ec939', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: 'c728348bb3eec056b3d33a1b744a416ee0a729fc' }, "Previous")), index.h("div", { key: 'a63e2d7fc18e128b6595d05fe6fc32dc356cd63b', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: '354407e7d6eb4af8d0da090c3fbd929d534ceefd', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, index.h("p", { key: '2533be10cec555875eae798d19429d5491841c48' }, "1"))), index.h("gb-pagination-button-group-base", { key: '94949c624972594061b171c769f2ac6179a46767', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, index.h("p", { key: 'f313ef0eade8544fd53a1732e65da810a942ef54' }, "2")), index.h("gb-pagination-button-group-base", { key: 'a4e5409b99faccef9b3e8f3cfff9fb67adc0c2d8', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, index.h("p", { key: 'db3ae10a5b0e5bae6391b905f138e0fd20241e85' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: 'a69b6e571888fd24c8e48467c6312e413c728637', icon: "false" }, index.h("p", { key: '762f2a9f3cc608e30804ecd563354d18b0425e9f' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '45d6cb2d9d6bd8676969e23a6e1a66f3675a304b', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, index.h("p", { key: '5361f04be3cc16ef1894a1c2a3bd808ea732cfa2' }, this.totalPages - 2)), index.h("gb-pagination-button-group-base", { key: '7209f4962feb301764619e5ecf6f8768929fb681', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, index.h("p", { key: '59a184ad0e78d823a8ae7c22d1f9d70f7a3f181f' }, this.totalPages - 1)), index.h("gb-pagination-button-group-base", { key: '35adf56734c901a9e555065a8399e5aac049d8cd', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, index.h("p", { key: '66fb6f694066d02d2b4333679447fa7bb512babb' }, this.totalPages)), index.h("gb-pagination-button-group-base", { key: 'caef7ba753e0dc3c94f2c95dc3d7eeded7449d24', icon: "trailing", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: 'c7b1bc6ef3bcfa94771fe6061fa36d1227dedcaa' }, "Next"))), index.h("div", { key: '0a0f975bf404ea7d6d5496777c2fda6b1baf3fbe', class: "pagination_entries" }, index.h("div", { key: 'a1825555ec2e04c1f3077a40c37e026e67ea00ef', class: "entries_text" }, index.h("p", { key: 'bd62ee336cbdfb036ec715c77fbda73df72e3268', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), index.h("div", { key: '5e9e44961c2e74bbf123a4a3199dd1739e6a321e', class: `entries_dropdown` }, index.h("gb-input-dropdown", { key: '23ded31ef4f9a401584f530448d81da65e5ff9b7', type: "default", state: 'default', size: "sm", "show-label": false, "show-hint-text": false, "show-supporting-text": false, "show-hep-icon": false, items: this.entries, "menu-position": "top" }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (index.h(index.Fragment, null, index.h("div", { key: '7115be444b9eb267f135ef759295e18069500cdc', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: '937375e86cedd84c226317dd0072736a55ce7f4a', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, index.h("p", { key: '920f0d271d0e5ff189ac0366f8b605490047c196' }, "Previous")), index.h("div", { key: '931889acf0b818812a1ee7120939fdc71f278d99', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: 'e3d4bea2f738b90f7976e8d86731aef837438371', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, index.h("p", { key: 'ac3254f299c763fd45b99a4c995c704c630e0343' }, "1"))), index.h("gb-pagination-button-group-base", { key: 'd00352e518dab90930e58860fd2ad1ee062d6785', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, index.h("p", { key: '698ebe9ca69cc1528613a9fcd7335ff969de10e4' }, "2")), index.h("gb-pagination-button-group-base", { key: '57b043b0391d04b9da5715d3e02fa93a0b9d39f8', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, index.h("p", { key: '46d24a4b6b55d3bdec0b48293343f2f82639c71b' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '8a38f19e08ed4fdbad6129969b0d4765ebeace78', icon: "false" }, index.h("p", { key: '6f2fccd25f98084f8bdf2ab7817c7b66653607b5' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '242144952e3f3cc378b2ae0422bec60dae728971', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, index.h("p", { key: '4a921172c9ef648b8916304133dc47c37d40a760' }, this.totalPages - 2)), index.h("gb-pagination-button-group-base", { key: '2b97aa9d8429265b0d04047ca115c3f1c484ceaa', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, index.h("p", { key: '939dab3ddbc85b0ab595c624c106151583bb72e6' }, this.totalPages - 1)), index.h("gb-pagination-button-group-base", { key: 'f46293956463c372ebdd68423bf1d70db7652152', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, index.h("p", { key: '62605d4e68f8c5c9abb1eb6109dee19124757a49' }, this.totalPages)), index.h("gb-pagination-button-group-base", { key: '82c53d6fd6f9ea9e84c8531d836e7a3051e3da7b', icon: "trailing", onClick: () => this.onNextButtonClicked() }, index.h("p", { key: '13d8be7b1b4a9f1cbb8b0670976eb503f54ddcb9' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: 'd8e03f414d8f6d511c3b374ec81944fecca29eef', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: 'fd64d619abc99576471370b75ffb07b30575c27e', class: "page_number_text" }, index.h("p", { key: '58072e470ab3f56ac8a88bfff15b6b5318c31fc7', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: '7b0528347aff4a128d762a8b2e350f4e901f979c', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '13227d33c13151bd9f44c529240c41aa36fee9f1', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: 'db05a45246cf60bc0e4959cd7cd239087a1b2b98', class: "page_number_text" }, index.h("p", { key: 'a3de3efce265ad1637440eb9c77e520e78788231', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: '7325b70ecd331853d660d54a5d38a88867231b2b', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_default' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '29093376a82aaa2756580e9c70c6a942661b9d7c', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '4bce0d097a4f12a3036ee7b400b454ec382a7adb', class: "page_number_text" }, index.h("p", { key: '07cc7715f826fa4944ec22b4433026fa723948ca', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: '24e31ac25f7548088c391a936be8d8718d5d4b66', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_minimal_right_aligned' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '326c611638925adaaffa555c6f3bdd2b9e4ab9d7', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '726f08aafcc5a8139d7bea08d79d3b55987fc268', class: "page_number_text" }, index.h("p", { key: '4bd686b0c66501b545d17970c1abcbe9637936c9', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: '295591be620871f0953a715f8ff6e1971e48275f', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '1a676770d7e592b3031f55c6077478ffb04d294e', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '5cf2cfc9483e487080df4962ba5ef37f2c994336', class: "page_number_text" }, index.h("p", { key: '931c35c2a29db5aa5aed25979990d0f96ca3e319', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: '90e071b3393631ddb81bbfd97b17e6d1a4cc28cd', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'mobile' && (index.h(index.Fragment, null, index.h("gb-button", { key: '81edd6552cc4346549db9bdf874e2f963a5dfc38', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '95665257f43b517ad222dda2fd03dd1c84503f37', class: "page_number_text" }, index.h("p", { key: '1b034b345f63eaa93c09ff4a0bcf619298edc613', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), index.h("gb-button", { key: '5e91450645fccd7142a3358186c48d76cd156a55', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'mobile' && (index.h("div", { key: '84143d45a355e2e210bb14b7458a240f4372b3c2', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: '1a36b35e6eaeedd8981e4529027f02735f500207', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '0567f1e768b63e598f00bc4e8187cd01b4842591', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: '70fa282658ba7593fb8da9c01472eac2734bd55d', icon: "false", state: this.currentPage === 1 ? "active" : "default", onClick: () => this.currentPage = 1 }, index.h("p", { key: 'bf0d6b80eb877396879afa6934686e535b8cce5f' }, "1"))), index.h("gb-pagination-button-group-base", { key: '5b542e678f0dd7153f427f45b605bf2f1a1f3659', icon: "false", state: this.currentPage === 2 ? "active" : "default", onClick: () => this.currentPage = 2 }, index.h("p", { key: '271fd56edfc4374fecc3cd3cf268dbcb8ac507cb' }, "2")), this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '0dc724b88029087bb061d8cfa97513e2d3c3603f', icon: "false" }, index.h("p", { key: '4d0af24a1d3eb19ccf353d91010a15aaffc6a4bd' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? (index.h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? 'active' : 'default' }, index.h("p", null, this.currentPage))) : null, index.h("gb-pagination-button-group-base", { key: '7603d5209369317f562702f820cf8f35b62ff7db', icon: "false", state: this.currentPage === this.totalPages - 1 ? "active" : "default", onClick: () => this.currentPage = this.totalPages - 1 }, index.h("p", { key: '9509cef22895ad958af356cb56fe374b835e9967' }, this.totalPages - 1)), index.h("gb-pagination-button-group-base", { key: '99f15a1a7af43f398b2e03a2a18e170ef7d4282e', icon: "false", state: this.currentPage === this.totalPages ? "active" : "default", onClick: () => this.currentPage = this.totalPages }, index.h("p", { key: '7f00056ee0706c9479a1aadefcb3dffb3ecc4a6e' }, this.totalPages)), index.h("gb-pagination-button-group-base", { key: 'cbfcca69010e64ff614c4578a557e85e4623b3c8', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'mobile' && (index.h("div", { key: '079f6ff8abc671ebf716e6263d3e59fb4025f256', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: '51fdec4e563f9bf57fb66d009d2d4fe4e058d569', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '1bbe9c25b5f1a4547abc7ecd0c602ee4b11c9ff2', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: '5401f1c6e518923305cb94be23cd7d9aacdf9777', icon: "false", state: "active" }, index.h("p", { key: 'cb9a6dcbf957cc1c08c1800baa292053371debcd' }, "1"))), index.h("gb-pagination-button-group-base", { key: 'd762a74109221e2a7b88723a9dfbf9f8491b02f7', icon: "false" }, index.h("p", { key: '29d54fa58c01969fa21cc86d4d9bd055cea8135d' }, "2")), index.h("gb-pagination-button-group-base", { key: '3d5dc5a7fb562f96e740ebaa98a2201d8f9e383f', icon: "false" }, index.h("p", { key: '22d4e09d6686b3a268bafc0dc0be7a8ba01dc484' }, "...")), index.h("gb-pagination-button-group-base", { key: 'd8d1c7f4ef7fb421c98f61867f413ee488695f70', icon: "false" }, index.h("p", { key: '118213362e8c53ca0357cab88ea4726380c8fd9c' }, "9")), index.h("gb-pagination-button-group-base", { key: '3fc97abb9789faef54b459c2c7766044c2adb3f0', icon: "false" }, index.h("p", { key: 'f01fd959f3d5c0e23684e35ade39cc96e1b131c1' }, "10")), index.h("gb-pagination-button-group-base", { key: 'e6198975f06056acfd7505cf8cba08e90d2ae981', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'mobile' && (index.h("div", { key: '32454cda61838ad10c7fb7f9ed793c5c69abed2b', class: "pagination_button_group" }, index.h("gb-pagination-button-group-base", { key: 'd68cbe6044c3632956d230672caea89e4b640f9c', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), index.h("div", { key: '5f6ef1b15571da33abb5f8352caa4a45e2629baf', class: "btn_group" }, index.h("gb-pagination-button-group-base", { key: 'f711a4c6431fbef22f3caae800b8dcd594978edc', icon: "false", state: "active" }, index.h("p", { key: 'f89c48a9e54380d1f323d6b85a6f6d1c09c0a432' }, "1"))), index.h("gb-pagination-button-group-base", { key: '7a0f6b1bfb2b05aa87dea71ad8f71d24252189f9', icon: "false" }, index.h("p", { key: '53e47dcdaf5fa78dd34b2d0e4575f841b7ddd5ab' }, "2")), index.h("gb-pagination-button-group-base", { key: '0718eb74ba6024b1b1a6a6813094815e7d611697', icon: "false" }, index.h("p", { key: '98422da272a6101563370147b1e3f165733aeafe' }, "...")), index.h("gb-pagination-button-group-base", { key: '99f4ad6ba0638c10f4b5073cfd63007b66424447', icon: "false" }, index.h("p", { key: 'a96fbc64586de61f6961f92d77252b9d1d05e423' }, "9")), index.h("gb-pagination-button-group-base", { key: '7d86c4306e4aa2327c75d09f1a0658189fd663ad', icon: "false" }, index.h("p", { key: 'bb34f41d5df6cb6f2bc8ec108b4f710c3725a93a' }, "10")), index.h("gb-pagination-button-group-base", { key: 'c531563885e50ebdd162ca809170d1be02907036', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
|
|
2039
2040
|
}
|
|
2040
2041
|
};
|
|
2041
2042
|
GbPagination.style = GbPaginationStyle0;
|
|
@@ -2068,7 +2069,7 @@ const GbPaginationButtonGroupBase = class {
|
|
|
2068
2069
|
this.leadingIconSvg = svg;
|
|
2069
2070
|
}
|
|
2070
2071
|
render() {
|
|
2071
|
-
return (index.h("div", { key: '
|
|
2072
|
+
return (index.h("div", { key: 'c21f407069c60b42a809cafcf1f49af2b3223988', class: `button_base_div ${this.icon} ${this.state}` }, this.icon === 'false' && index.h("slot", { key: 'f46017416f70c3544326d43558f96f371854a819' }), this.icon === 'leading' && (index.h(index.Fragment, null, index.h("svg", { key: '238b367815f66b5c7d9e0a5e5b23fd4032c0b3fe', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'cb3d6e16b95a3f2f1766b0d18e67c5c6d320f699', d: "M3.33325 9.99981H16.6666M3.33325 9.99981C3.33326 11.0978 7.49975 14.1667 7.49975 14.1667M3.33325 9.99981C3.33324 8.90182 7.49978 5.83334 7.49978 5.83334", stroke: "#4B5565", "stroke-width": "1.67", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("slot", { key: 'bc68921226ccdef3207367204583bebef0f8cee3' }))), this.icon === 'trailing' && (index.h(index.Fragment, null, index.h("slot", { key: '32b059b6d19ff0b27b5757f6be8561b7a31b7b00' }), index.h("svg", { key: 'cd069f0c714e9440db14827095731e761fe0a8c1', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, index.h("path", { key: 'd26d0daf4e32769e80e018fd8dcbc6a1ce69a119', d: "M16.6668 9.99984H3.3335M16.6668 9.99984C16.6668 11.0978 12.5003 14.1667 12.5003 14.1667M16.6668 9.99984C16.6669 8.90185 12.5002 5.83337 12.5002 5.83337", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.icon === 'only' && (index.h(index.Fragment, null))));
|
|
2072
2073
|
}
|
|
2073
2074
|
get el() { return index.getElement(this); }
|
|
2074
2075
|
};
|
|
@@ -2085,7 +2086,7 @@ const GbPaginationDotIndicator = class {
|
|
|
2085
2086
|
this.size = undefined;
|
|
2086
2087
|
}
|
|
2087
2088
|
render() {
|
|
2088
|
-
return (index.h("div", { key: '
|
|
2089
|
+
return (index.h("div", { key: 'd9df6246705206942e8514a549b8974d82f5c811', class: `dot_indicator_div
|
|
2089
2090
|
${this.type} ${this.current ? 'current' : ''}
|
|
2090
2091
|
${this.size}` }));
|
|
2091
2092
|
}
|
|
@@ -2114,7 +2115,7 @@ const GbPaginationNumberBase = class {
|
|
|
2114
2115
|
}
|
|
2115
2116
|
}
|
|
2116
2117
|
render() {
|
|
2117
|
-
return (index.h("div", { key: '
|
|
2118
|
+
return (index.h("div", { key: '2a0955c4ae070302dc7a73b8c24e6bc4d3f88ab6', class: `page_number_base ${this.shape} ${this.state}` }, index.h("slot", { key: 'c3a38d1c9bd644d817dd3cbfad620b951969c7a4', name: "page_number" })));
|
|
2118
2119
|
}
|
|
2119
2120
|
get el() { return index.getElement(this); }
|
|
2120
2121
|
};
|
|
@@ -2133,7 +2134,7 @@ const GbPasswordButton = class {
|
|
|
2133
2134
|
this.isPasswordVisible = !this.isPasswordVisible;
|
|
2134
2135
|
}
|
|
2135
2136
|
render() {
|
|
2136
|
-
return (index.h("div", { key: '
|
|
2137
|
+
return (index.h("div", { key: 'cb4098b5ed99cf57d7f8e953805a2583e22b5493' }, index.h("gb-btn", { key: '775d0bd78bb5a43854501b454fb7b638926caada', size: "sm", hierarchy: "link_gray", state: "default", onClick: () => this.togglePasswordVisibility() }, this.isPasswordVisible ? (index.h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "default", state: this.state }, index.h("p", null, "HIDE"))) : (index.h("gb-button", { size: "sm", hierarchy: "tertiary_gray", icon: "default", state: this.state }, index.h("p", null, "SHOW"))))));
|
|
2137
2138
|
}
|
|
2138
2139
|
};
|
|
2139
2140
|
GbPasswordButton.style = GbPasswordButtonStyle0;
|
|
@@ -2150,7 +2151,7 @@ const GbProgressBar = class {
|
|
|
2150
2151
|
}
|
|
2151
2152
|
render() {
|
|
2152
2153
|
const progressValue = Math.min(Math.max(this.progress, 0), 100);
|
|
2153
|
-
return (index.h("div", { key: '
|
|
2154
|
+
return (index.h("div", { key: 'b088ea298c849190f032ee78068f361776f5c1c8', class: `progress_bar_container ${this.labelPosition}` }, index.h("div", { key: 'd281aed15fcff0881e9f5328852fdec0d3b3afbe', class: "progress_bar" }, index.h("div", { key: '14fa4c4eea71dc7a859982d4dcf441340cfa510d', class: "progress_fill", style: { width: `${progressValue}%` } })), index.h(index.Fragment, null, this.showLabel && (index.h("div", { key: '10e6adb91bc94b0d1e28e146c094e7c1aa66972e', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && index.h("span", { key: '9ee48a7cefdbf2d7038643c5adb3d6df21b25ceb', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && index.h("span", { key: '4cf39cdc8816cffde2064658fe8f2ddf7740fdca', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (index.h("gb-tooltip", { key: 'c9cd6eed8d28fe38cebed9d6199868d1aea48042', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, index.h("p", { key: '5c498c4484876bc528568735193ac99d58230a1d', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (index.h("gb-tooltip", { key: '9fe5ab43434ded05b0494843f2b3c7c0bb66dfc6', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, index.h("p", { key: '74578980b2ee57c29eb96e0f73f83bd7a0f4662e', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
|
|
2154
2155
|
}
|
|
2155
2156
|
};
|
|
2156
2157
|
GbProgressBar.style = GbProgressBarStyle0;
|
|
@@ -2193,7 +2194,7 @@ const GbSideBarItem = class {
|
|
|
2193
2194
|
render() {
|
|
2194
2195
|
const redBarSrc = index.getAssetPath(`assets/bar.svg`);
|
|
2195
2196
|
const whiteBarSrc = index.getAssetPath(`assets/bar_white.svg`);
|
|
2196
|
-
return (index.h("div", { key: '
|
|
2197
|
+
return (index.h("div", { key: 'd2e15d0add59f71f2d2f91fc288f0949ca126d2a', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, index.h("div", { key: '08b53ae648bb9eebe9c17a70bd18afdca57404a2', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && index.h("img", { key: '0b6e78a32eb0496f381589dc55574d7e853eb526', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && index.h("img", { key: 'dfae0080d3fa8551af3df38018b950bf69c7e6f5', src: whiteBarSrc, alt: "", class: "bar" }), index.h("div", { key: '23dd8449892ce86ad79e58f41cee7ad27c933342', class: "content" }, index.h("div", { key: 'f1b029268d46ac1f436b14e4bd617f974f7efa6f', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (index.h("p", { key: '109a31eca48c21abac12f03f77540194fa5c8991', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (index.h(index.Fragment, null, this.showBadge && (index.h("gb-badge", { key: '2532ffeb07887d75794631c8c0d382d392260b4a', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, index.h("p", { key: '211c91bc32050a9b5285805e0cdab9bb5bbc9309' }, "10"))), this.showArrow && (index.h("svg", { key: 'cbd28af6c34aaa64ae8c611502be7069ee422651', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, index.h("path", { key: 'c210a7c82165283036bce1ed5b3aa2d0bd9b1665', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (index.h("gb-tooltip", { key: '592facf9832d86e42bf4de2f1fb963857d607346', "show-arrow": true, arrow: "left", class: "tooltip" }, index.h("p", { key: '49b946a445def14ea1e7306a00d54bf86341d02c', slot: "label" }, this.label)))));
|
|
2197
2198
|
}
|
|
2198
2199
|
get el() { return index.getElement(this); }
|
|
2199
2200
|
};
|
|
@@ -2271,7 +2272,7 @@ const GbSidebar = class {
|
|
|
2271
2272
|
const logoSrc = index.getAssetPath(`assets/globus_bank_logo.svg`);
|
|
2272
2273
|
const blueLogoSrc = index.getAssetPath(`assets/globus_bank_logo_blue.svg`);
|
|
2273
2274
|
const whiteLogoSrc = index.getAssetPath(`assets/globus_bank_logo_white.svg`);
|
|
2274
|
-
return (index.h("div", { key: '
|
|
2275
|
+
return (index.h("div", { key: 'dfc0c9e3b64e1aa323a12a84e5c5d761f7304125', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (index.h("div", { key: 'eb8f3861c139e3595a5365f6f348c913eeca6b54', class: "pattern" }, index.h("img", { key: '28844c3c23f67b815fa0a048f354b51d777e1862', src: patternSrc, alt: "" }))), index.h("div", { key: '3e586f0e9f8e5c092c63a78461f91234e08964d8', class: "nav" }, index.h("div", { key: '1c324350ea9c6a8c40ad0a46549ade50edff48bb', class: `sidebar_header ${this.state}` }, index.h("div", { key: 'bbaa5ddfaef127961273280ce2f380656fafa3a1', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && index.h(index.Fragment, null, this.category === 'plain_background' ? index.h("img", { src: blueLogoSrc }) : index.h("img", { src: whiteLogoSrc })), this.state === 'collapsed' && index.h("img", { key: '2786382e1e5f410360fa8808db73001af1f08332', src: logoSrc, alt: "" })), index.h("div", { key: '7a156909d0dcc76f208c27d0191ce951a5852b2a', class: `collapse_button ${this.state}` }, index.h("gb-collapse-button", { key: '68af5912211df3a8a8103a010d32928806e95784', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), index.h("div", { key: '3ba843a84f77b1adc7e19526a26b669cd798b0c3', class: "navigation" }, index.h("div", { key: '51d6a69a979293941f197f6757a29e5817adf72e', class: "item" }, index.h("gb-side-bar-item", { key: '52c5d0cdfca69bf91a6fa0b80b9a063c38264353', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), index.h("gb-side-bar-item", { key: 'edef91f00e2f18bd78636d0d61ce57a7980971db', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (index.h("gb-side-bar-item", { key: 'b9e948e211adcd7f208bd172e966c72eb76c471e', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (index.h("gb-side-bar-item", { key: '5e6cea08666410d47428d7d9dc0369f95e19cfd0', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (index.h("gb-side-bar-item", { key: 'd0f57d3f5946ffe733e7fa6c876bebb980668d08', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (index.h("div", { key: 'f8e6827231e1c5d7e8641d9d8e110bbf01db02a8', class: "navigation" }, index.h("div", { key: '72e289a6026fbdedae08700e3e7d1edc7044c288', class: "item" }, this.sixthItemLabel && (index.h("gb-side-bar-item", { key: '96cf3d4dc478dc73b9724328e04a75c544274748', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (index.h("gb-side-bar-item", { key: 'bd4e1c3a56f2cef463392fd72b1f0bc987085adf', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (index.h("gb-side-bar-item", { key: '89ba818911eded15bf98f516bed339fdeb071a3f', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (index.h("gb-side-bar-item", { key: '5e850f8a9678bdba1a8d7ec0fe9fbf244b9dc94e', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (index.h("gb-side-bar-item", { key: '76de8ab4eaeb07c6084c1b19e79573b5f71f0564', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (index.h("div", { key: '586ed64720716da2e0d29761bddf551d5acadc74', class: "application_name" }, index.h("div", { key: 'f2b573c0f247f32fabd47da3e06cdffb701fac1d', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (index.h("div", { key: '1399f5420693d60325440c4d78dc471e474bd2c3', class: "application_name_pattern" }, index.h("img", { key: '36756e55bfaecda7516935533523431e2e0d6217', src: patternSrc, alt: "" }))), index.h("div", { key: 'd4f819f667ef3370ba76480c5d44994e8c4d970f', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), index.h("span", { key: '509d4452dd56d919b8cc32fb946189f55c6d4ae1', class: textClass }, index.h("slot", { key: '83afb98d4075dacb34018b4d9acee64cc5a13a65', name: "application_name" })))))));
|
|
2275
2276
|
}
|
|
2276
2277
|
get el() { return index.getElement(this); }
|
|
2277
2278
|
};
|
|
@@ -2357,7 +2358,7 @@ const GbSlider = class {
|
|
|
2357
2358
|
return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;
|
|
2358
2359
|
}
|
|
2359
2360
|
render() {
|
|
2360
|
-
return (index.h("div", { key: '
|
|
2361
|
+
return (index.h("div", { key: 'e54b403af14844ab1f074e5681a8b7b003cb2992', class: "slider-container", ref: el => (this.containerEl = el) }, index.h("div", { key: '6a60f1d949e971856b435401b21fa4003653a422', class: "track", ref: el => (this.trackEl = el) }), index.h("gb-slider-control-handle", { key: 'eec806d836f8423b00b83ea0dafae32f69e7c2d0', class: "left", value: this.formatValue(this.leftValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'left') }), index.h("gb-slider-control-handle", { key: '3c24e6a5142d7f8cdce9d7e16d2737e8a251f2d2', class: "right", value: this.formatValue(this.rightValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'right') })));
|
|
2361
2362
|
}
|
|
2362
2363
|
get el() { return index.getElement(this); }
|
|
2363
2364
|
};
|
|
@@ -2387,7 +2388,7 @@ const GbSliderControlHandle = class {
|
|
|
2387
2388
|
this.isFocused = false;
|
|
2388
2389
|
}
|
|
2389
2390
|
render() {
|
|
2390
|
-
return (index.h("div", { key: '
|
|
2391
|
+
return (index.h("div", { key: '970e8fc86e8f36e119bdd305bf9d3d7cef072692', class: `thumb-container ${this.type} ${this.isHovered ? 'hover' : ''} ${this.isFocused ? 'focused' : ''}`, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: "0" }, this.type === 'tooltip' && (index.h("div", { key: '1748497b3e01b54857898d601be13d2ebbe616a5', class: "tooltip-container" }, index.h("gb-tooltip", { key: 'daac1e3aca7f14f2c94ddae1f763e8a699e415fa', "show-arrow": false, arrow: "none", "show-supporting-text": false }, index.h("p", { key: 'c805cb0cff6dc0f16fb824a9e882bcd5d0ce04c8', class: "text-xs-semi-bold", slot: "label" }, this.value)))), this.type === 'text' && (index.h("div", { key: 'f3836a8d404022c86e4b22908c0eedc70a3dc28c', class: "thumb-label" }, index.h("p", { key: '2a5a14fb91bbff68902de9c252dd3e40d7867801', class: "thumb_label text-md-medium" }, this.value)))));
|
|
2391
2392
|
}
|
|
2392
2393
|
};
|
|
2393
2394
|
GbSliderControlHandle.style = GbSliderControlHandleStyle0;
|
|
@@ -2405,7 +2406,7 @@ const GbStatusIndicator = class {
|
|
|
2405
2406
|
}
|
|
2406
2407
|
render() {
|
|
2407
2408
|
return [
|
|
2408
|
-
index.h("div", { key: '
|
|
2409
|
+
index.h("div", { key: '6df3b4cb4ccdbe3d3ee2d3fe47b959328fd6655e' }, this.statusIcon === 'online_indicator' && index.h("div", { key: '7f6692698faae2f0ab7ebc290d03a5d3caf43acf', class: `online_icon ${this.size} ${this.indicatorStateClass}` }), this.statusIcon === 'verified' && (index.h("svg", { key: '97cfcf6a4cf9699a4c0d78ec47177c2b8a863fe3', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", class: `verified ${this.size}` }, index.h("g", { key: 'a9da95c14a005328b6ede41edee1a957cf0fb34e', "clip-path": "url(#clip0_0_21453)" }, index.h("path", { key: 'b5485f9567910e15057a9baa1f829a15ec7ac5e8', d: "M24.7109 5.66715C25.0148 6.40217 25.5982 6.98642 26.3328 7.29145L28.9086 8.35837C29.6436 8.66285 30.2277 9.24688 30.5321 9.98196C30.8366 10.717 30.8366 11.543 30.5321 12.2781L29.466 14.852C29.1614 15.5874 29.1609 16.4142 29.467 17.1492L30.5313 19.7224C30.6822 20.0865 30.7599 20.4767 30.76 20.8708C30.7601 21.265 30.6825 21.6553 30.5316 22.0194C30.3808 22.3835 30.1597 22.7143 29.881 22.993C29.6022 23.2716 29.2713 23.4926 28.9072 23.6433L26.3332 24.7095C25.5982 25.0134 25.0139 25.5968 24.7089 26.3314L23.642 28.9071C23.3375 29.6422 22.7535 30.2262 22.0184 30.5307C21.2833 30.8352 20.4574 30.8352 19.7223 30.5307L17.1484 29.4646C16.4133 29.1608 15.5876 29.1614 14.853 29.4663L12.2772 30.5317C11.5425 30.8355 10.7173 30.8352 9.98284 30.531C9.24835 30.2267 8.66466 29.6434 8.35997 28.9091L7.29273 26.3326C6.98881 25.5975 6.40543 25.0133 5.67087 24.7083L3.09509 23.6413C2.36033 23.337 1.77648 22.7533 1.47188 22.0187C1.16729 21.284 1.16688 20.4585 1.47073 19.7235L2.53689 17.1496C2.84062 16.4145 2.84 15.5888 2.53517 14.8542L1.47054 12.2766C1.3196 11.9125 1.24188 11.5222 1.24181 11.1281C1.24175 10.734 1.31935 10.3437 1.47017 9.97956C1.621 9.61544 1.8421 9.2846 2.12083 9.00595C2.39957 8.72731 2.73047 8.50632 3.09465 8.35561L5.66858 7.28945C6.40297 6.98579 6.98687 6.40316 7.29212 5.66944L8.35904 3.09366C8.66352 2.35857 9.24754 1.77455 9.98263 1.47007C10.7177 1.16559 11.5436 1.16559 12.2787 1.47007L14.8527 2.53623C15.5878 2.83996 16.4134 2.83934 17.148 2.5345L19.7249 1.47172C20.4599 1.16741 21.2856 1.16748 22.0206 1.4719C22.7555 1.77632 23.3395 2.36017 23.644 3.09507L24.7112 5.67161L24.7109 5.66715Z", fill: "#0086C9" }), index.h("path", { key: '505f717d4d30663d9398603d9b882a7a23f88bf3', d: "M10 18.1818C10 18.1818 11.2857 18.1818 13 22C13 22 17.7647 12 22 10", stroke: "white", "stroke-width": "2.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("defs", { key: '4ae741055e07f907ba9ee9cfa90f2ee87ccbc113' }, index.h("clipPath", { key: 'fa985461a32c1cf03cdbbd0e83f6c6e1d15a4c25', id: "clip0_0_21453" }, index.h("rect", { key: 'd17479685017a7183c1227086af2d4ae18f48fc7', width: "32", height: "32", fill: "white" }))))), this.statusIcon === 'company' && (index.h("svg", { key: '1c21e36d2506ca980747529d0dadb8a6c502c80f', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `company ${this.size}` }, index.h("path", { key: '40c70c3e451ea7f49d3c7bbe697346dfcf4bffa2', d: "M18.8322 3.70039C16.9123 2.11995 14.5039 1.25399 12.0172 1.25001C10.6041 1.24776 9.20439 1.52413 7.89818 2.06333C6.59198 2.60252 5.4049 3.39397 4.40485 4.39237C2.64504 6.1493 1.54876 8.462 1.30275 10.9365C1.05674 13.411 1.67622 15.8943 3.05566 17.9633C4.43511 20.0323 6.48919 21.5591 8.86802 22.2836C11.2469 23.0081 13.8033 22.8855 16.1019 21.9367C18.4004 20.9878 20.299 19.2715 21.474 17.0799C22.6491 14.8884 23.0281 12.3572 22.5464 9.91759C22.0647 7.47798 20.7521 5.28082 18.8322 3.70039Z", fill: "#FF0033", stroke: "white", "stroke-width": "1.5" }), index.h("path", { key: '1aa28d6891ebc3d33ea06dc873f93fd88d5f8fac', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8942 13.7488V11.865L15.2835 11.8807C15.5231 11.8822 15.7598 11.9336 15.9785 12.0314C16.1973 12.1293 16.3933 12.2715 16.5541 12.449C16.715 12.6266 16.8373 12.8357 16.9131 13.063C16.989 13.2903 17.0168 13.5308 16.9948 13.7694C16.9948 16.4275 12.901 16.9969 12.8973 13.7488M12.8973 8.75316C17.3054 6.44066 17.6942 11.5213 15.0323 11.2788H12.886L12.8973 8.75316ZM16.7385 11.5113C19.8985 10.3013 17.2573 5.5894 12.0854 8.5044C11.5544 8.07132 10.9218 7.78073 10.2473 7.66004C8.96979 7.40066 7.25604 7.62628 6.29479 8.52378L6.75917 8.97941C7.2569 8.55053 7.86627 8.27194 8.51626 8.17611C9.16625 8.08028 9.83009 8.17117 10.4304 8.43816C10.6321 8.53335 10.8098 8.67262 10.9505 8.8457C11.0911 9.01879 11.191 9.22127 11.2429 9.43817L11.266 13.7669C11.0785 16.7738 7.20354 16.5413 7.20354 13.7669V11.8682H10.2492V11.295H5.59729V13.1644C5.60917 16.7175 9.93104 17.315 12.0717 15.5863C12.9471 16.2353 14.0184 16.5649 15.1073 16.52C18.9442 16.4938 19.7323 12.3563 16.7273 11.5144L16.7385 11.5113Z", fill: "white" })))),
|
|
2409
2410
|
];
|
|
2410
2411
|
}
|
|
2411
2412
|
};
|
|
@@ -2459,16 +2460,16 @@ const GbTabButtonBase = class {
|
|
|
2459
2460
|
this.tabClicked.emit();
|
|
2460
2461
|
}
|
|
2461
2462
|
render() {
|
|
2462
|
-
return (index.h("div", { key: '
|
|
2463
|
+
return (index.h("div", { key: '22c336190b62c757b4d368938cb86c060d652ade', class: `tab_button_div ${this.type}
|
|
2463
2464
|
${this.current ? 'current' : ''}
|
|
2464
2465
|
${this.fullWidth ? 'full_width' : ''}
|
|
2465
|
-
${this.size}`, onClick: () => this.handleClick() }, index.h("p", { key: '
|
|
2466
|
+
${this.size}`, onClick: () => this.handleClick() }, index.h("p", { key: '5535fdb7901a394ab1015c4492ce205a3a8a5153', class: `${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.tabName), this.badge && (index.h("gb-badge", { key: 'f91d364ba2576075331734d3b668b804794f5c14', size: "sm", type: "pill_color", color: this.current && this.type === 'button_primary'
|
|
2466
2467
|
? 'information'
|
|
2467
2468
|
: this.current && this.type === 'underline'
|
|
2468
2469
|
? 'information'
|
|
2469
2470
|
: this.current && this.type === 'line'
|
|
2470
2471
|
? 'information'
|
|
2471
|
-
: 'gray' }, index.h("slot", { key: '
|
|
2472
|
+
: 'gray' }, index.h("slot", { key: 'e1e6c22eac2d6b4d44797f89cbe118958b04615e', name: "count" })))));
|
|
2472
2473
|
}
|
|
2473
2474
|
get el() { return index.getElement(this); }
|
|
2474
2475
|
};
|
|
@@ -2495,7 +2496,7 @@ const GbTag = class {
|
|
|
2495
2496
|
}
|
|
2496
2497
|
render() {
|
|
2497
2498
|
const flagSwap = index.getAssetPath(`${this.flagSwap}`);
|
|
2498
|
-
return (index.h("div", { key: '
|
|
2499
|
+
return (index.h("div", { key: '612507717e6a339c65ce3717e13bb0915383ab90', class: `container ${this.size}` }, index.h("div", { key: '2cbc06d2404330181e01e084219466a1797d4855', class: `content ${this.size}` }, this.checkbox && index.h("gb-tag-checkbox", { key: '339cd87f39a00f467b9e68194d5b36e76b44bbfa', size: this.size }), this.icon === 'false' && index.h(index.Fragment, null), this.icon === 'country' && (index.h("div", { key: 'cd18f0cd2194a45a3a3f8b68994d9ca69e94347d', class: "icon left-icon" }, index.h("img", { key: 'c6fc0b25f8991fa65db84aeff25684ad49648d84', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (index.h("gb-avatar", { key: 'e3f73289548ae68308b28e67d889cf18938dfde0', class: "avatar-icon", size: "xxs", "status-icon": "false", text: true, color: "gray" }, index.h("slot", { key: '46d8c3ed0d1090d283f10ce3003b30326b34b2eb', name: "initials", slot: "initials" }))), this.icon === 'dot' && (index.h("svg", { key: 'a8ec2c000336d3aecb55082d5bb00ae8cbb2330e', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, index.h("circle", { key: '6f7730abfc4da0046e8601982e67195ab78fb644', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), index.h("slot", { key: '491b68099c4aeb49d26dbac91b33fc7a95b63812' }), this.action === 'count' && (index.h("gb-tag-count", { key: '792551777780839b14e481d633607ef7d8bc9ee5', size: this.size }, index.h("slot", { key: 'fd0b56d82ac9e59f8a57a17a34d8253bb0cb35d0', slot: "count", name: "count" })))), this.action === 'X_close' && index.h("gb-tag-close", { key: '0498ce23abc586b0b8231f7a92f1042937842c25', size: this.size, onClick: () => this.onTagClose() })));
|
|
2499
2500
|
}
|
|
2500
2501
|
};
|
|
2501
2502
|
GbTag.style = GbTagStyle0;
|
|
@@ -2511,7 +2512,7 @@ const GbTagCheckbox = class {
|
|
|
2511
2512
|
this.disabled = false;
|
|
2512
2513
|
}
|
|
2513
2514
|
render() {
|
|
2514
|
-
return (index.h("label", { key: '
|
|
2515
|
+
return (index.h("label", { key: '815ebd00a9780ce5ed7a3c9c175701a310b3d19d', class: `checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}` }, index.h("input", { key: '841a204a51ee841bbded85e6e130db516bd71afd', type: "checkbox", checked: this.checked, disabled: this.disabled }), index.h("span", { key: '1b53d847c86d7d620dbfb60ea86516861c6702c4', class: `custom-checkbox ${this.size}` }, index.h("svg", { key: '2309b2590651672a512939fe815334e7194aec62', class: "checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", fill: "none" }, index.h("path", { key: '9b905738375210249646088ffd39b325293f5f2e', d: "M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5", stroke: "white", "stroke-width": "1.71429", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
|
|
2515
2516
|
}
|
|
2516
2517
|
};
|
|
2517
2518
|
GbTagCheckbox.style = GbTagCheckboxStyle0;
|
|
@@ -2525,7 +2526,7 @@ const GbTagClose = class {
|
|
|
2525
2526
|
this.size = undefined;
|
|
2526
2527
|
}
|
|
2527
2528
|
render() {
|
|
2528
|
-
return (index.h("div", { key: '
|
|
2529
|
+
return (index.h("div", { key: '74eb724e5603dccc264ba18adb468abfee4edb99', class: this.size }, index.h("svg", { key: 'f79d281dedf8884cc3399438996bc88efc99a8b0', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, index.h("path", { key: '9370dac9a661cd5f15eb840970e4ea152d1011a2', d: "M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
|
|
2529
2530
|
}
|
|
2530
2531
|
};
|
|
2531
2532
|
GbTagClose.style = GbTagCloseStyle0;
|
|
@@ -2539,7 +2540,7 @@ const GbTagCount = class {
|
|
|
2539
2540
|
this.size = undefined;
|
|
2540
2541
|
}
|
|
2541
2542
|
render() {
|
|
2542
|
-
return (index.h("div", { key: '
|
|
2543
|
+
return (index.h("div", { key: 'a346bc3123e1c884ec822edaebac0e79e57c9100', class: this.size }, index.h("slot", { key: '27a0a2f98f529040b98fd799e785947b1a9cf4c9', name: "count" })));
|
|
2543
2544
|
}
|
|
2544
2545
|
};
|
|
2545
2546
|
GbTagCount.style = GbTagCountStyle0;
|
|
@@ -2585,7 +2586,7 @@ const GbToast = class {
|
|
|
2585
2586
|
slottedSupportingText.classList.add(this.getSupportingColorClasses());
|
|
2586
2587
|
}
|
|
2587
2588
|
render() {
|
|
2588
|
-
return (index.h("div", { key: '
|
|
2589
|
+
return (index.h("div", { key: '4de6803907cb2af5712ec36e9a3755960932222a', class: `toast_div ${this.color} ${this.size} ${this.breakpoint}` }, this.size === 'floating' && (index.h(index.Fragment, null, index.h("div", { key: '5fef046fddb22c4cc74b2b9a913ecfec80d728b3', class: `icon_container` }, index.h("svg", { key: '60b656dc4084baed354e65419d6d5f8d46042e52', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, index.h("path", { key: '30c77f94e7cce47631df1b7d6d5420180df53d3f', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), index.h("path", { key: 'ab1939a9a5511795e43f6e1422d2737d0e4dc7ba', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), index.h("path", { key: 'badb81e47ccce5e3f2321f86050404efe016a3ae', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), index.h("div", { key: '3eb80410d24b0c58c653dc73ae552b0fe250014d', class: `content ${this.size} ${this.actions ? ' actions' : ''}` }, index.h("div", { key: '0fc6b2d0e8585c00183502362b159d8593dd4e0d', class: `text ${this.size}` }, index.h("slot", { key: 'a16c566cf52f4d0eb174a6061277104f872f523d', name: "main_text" }), this.showSupportingText && index.h("slot", { key: 'c119a6fad403b65bbefadb4a63791fe038cdbfe0', name: "supporting_text" })), this.actions && (index.h("div", { key: '405d4f84cfd8ee68daec270cdd00ae07e4b461b9', class: `actions ${this.size} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (index.h(index.Fragment, null, index.h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, index.h("p", null, "Dismiss")), index.h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, index.h("p", null, "View changes")))) : (index.h(index.Fragment, null, index.h("gb-toast-button", { state: reusableModels.StateEnum.Default, color: this.color }, index.h("p", null, "Dismiss")), index.h("gb-toast-button", { state: reusableModels.StateEnum.Default, color: this.color }, index.h("p", null, "View changes"))))))), index.h("gb-button-close", { key: 'ae82b1b1e3a7a800c52afac464aa9edc73f57164', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.size}` }))), this.size === 'full_width' && (index.h("div", { key: '91dd2cc11563cb91376939d1e453dd316024c18f', class: `container ${this.breakpoint}` }, index.h("div", { key: '51b4810f1cf3d64f071237cfb33fc22851aa1807', class: `full_width_content ${this.breakpoint}` }, index.h("div", { key: '5b25e44f720f2a9bc0870fe550cc7b57df6b6907', class: `inner_content ${this.breakpoint}` }, index.h("div", { key: 'd1db3c28272e0195988a450f70e002926c926510', class: `icon_container` }, index.h("svg", { key: '5281ae603ec976f02c09a6ae1160bafbc57fa5ba', xmlns: "http://www.w3.org/2000/svg", width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", class: `svg_icon ${this.color}` }, index.h("path", { key: '956d921ac30a9ccc4a3f68a6c80f21e7c5b85ba4', opacity: "0.4", d: "M14.0667 2.04163C16.6225 2.04161 18.63 2.0416 20.1973 2.25232C21.8034 2.46825 23.0777 2.91979 24.079 3.92102C25.0802 4.92226 25.5317 6.19655 25.7477 7.80265C25.9584 9.36996 25.9584 11.3774 25.9584 13.9332V13.9333V14.0667V14.0667C25.9584 16.6225 25.9584 18.63 25.7477 20.1973C25.5317 21.8034 25.0802 23.0777 24.079 24.0789C23.0777 25.0801 21.8034 25.5317 20.1973 25.7476C18.63 25.9583 16.6226 25.9583 14.0668 25.9583H14.0667H13.9333H13.9333C11.3775 25.9583 9.37003 25.9583 7.80271 25.7476C6.19661 25.5317 4.92232 25.0801 3.92109 24.0789C2.91985 23.0777 2.46831 21.8034 2.25238 20.1973C2.04166 18.6299 2.04167 16.6225 2.04169 14.0667V13.9333C2.04167 11.3774 2.04166 9.36997 2.25238 7.80265C2.46831 6.19655 2.91985 4.92226 3.92109 3.92102C4.92232 2.91979 6.19661 2.46825 7.80271 2.25232C9.37003 2.0416 11.3775 2.04161 13.9333 2.04163H14.0667Z", fill: "#4B5565" }), index.h("path", { key: 'c81c389a375c8bb228eb292ca66f7ddcf5a65199', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6289 12.2818C13.9171 12.3206 14.3158 12.4243 14.6541 12.7626C14.9924 13.101 15.0962 13.4997 15.1349 13.7879C15.167 14.0266 15.1669 14.3043 15.1667 14.5375C15.1667 14.553 15.1667 14.5683 15.1667 14.5834V19.2501C15.1667 19.8944 14.6444 20.4167 14 20.4167C13.3557 20.4167 12.8334 19.8944 12.8334 19.2501V14.5834C12.189 14.5834 11.6667 14.0611 11.6667 13.4167C11.6667 12.7724 12.189 12.2501 12.8334 12.2501C12.8485 12.2501 12.8638 12.2501 12.8793 12.2501C13.1125 12.2499 13.3901 12.2497 13.6289 12.2818Z", fill: "#4B5565" }), index.h("path", { key: '41431d0df1b8f433d6d0d3316c49682591646a6a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.8333 8.75004C12.8333 8.10571 13.3533 7.58337 13.9947 7.58337H14.0051C14.6466 7.58337 15.1666 8.10571 15.1666 8.75004C15.1666 9.39437 14.6466 9.91671 14.0051 9.91671H13.9947C13.3533 9.91671 12.8333 9.39437 12.8333 8.75004Z", fill: "#4B5565" }))), index.h("div", { key: '52e52bd3208a0147586185db7cabaa51288a8585', class: `text ${this.size} ${this.breakpoint}` }, index.h("slot", { key: '2af591976d86fcbc61a1da631617059ad240a9e3', name: "main_text" }), this.showSupportingText && index.h("slot", { key: 'aa66c56d93cb0993dcdf4c6f48e43c5eac12aaf4', name: "supporting_text" }))), this.actions && (index.h("div", { key: 'f691b68723c6e17f62fea8e043247e61d8a3d683', class: `actions ${this.size} ${this.breakpoint} ${!this.showSupportingText ? 'only_actions' : ''}` }, this.color === 'default' ? (index.h(index.Fragment, null, index.h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_gray" }, index.h("p", null, "Dismiss")), index.h("gb-button", { size: "sm", icon: "default", state: "default", hierarchy: "link_color" }, index.h("p", null, "View changes")))) : (index.h(index.Fragment, null, index.h("gb-toast-button", { state: reusableModels.StateEnum.Default, color: this.color }, index.h("p", null, "Dismiss")), index.h("gb-toast-button", { state: reusableModels.StateEnum.Default, color: this.color }, index.h("p", null, "View changes")))))), index.h("gb-button-close", { key: '2af077c5b8ef410f9f06d9ceebb7c3d85265a0ff', size: "sm", color: this.color === 'default' ? 'gray' : this.color === 'gray' ? 'gray' : this.color, class: `close_button ${this.breakpoint}` }))))));
|
|
2589
2590
|
}
|
|
2590
2591
|
get el() { return index.getElement(this); }
|
|
2591
2592
|
};
|
|
@@ -2605,7 +2606,7 @@ const GbToastButton = class {
|
|
|
2605
2606
|
slottedContent.classList.add('text-sm-semi-bold');
|
|
2606
2607
|
}
|
|
2607
2608
|
render() {
|
|
2608
|
-
return (index.h("div", { key: '
|
|
2609
|
+
return (index.h("div", { key: 'bf4b6e6dc7650ca12e9ad0656850ee69bce3f298', class: `toast_button ${this.state} ${this.color}` }, index.h("slot", { key: '00e7b62e943368c60bd751b57e6f4963dc9d9a6d' })));
|
|
2609
2610
|
}
|
|
2610
2611
|
get el() { return index.getElement(this); }
|
|
2611
2612
|
};
|
|
@@ -2630,8 +2631,8 @@ const GbToggleBase = class {
|
|
|
2630
2631
|
}
|
|
2631
2632
|
render() {
|
|
2632
2633
|
return [
|
|
2633
|
-
index.h("input", { key: '
|
|
2634
|
-
index.h("label", { key: '
|
|
2634
|
+
index.h("input", { key: '39167fffb8ac1c7f410654cff12f5d4ce0e9ed5c', type: "checkbox", id: "customCheckbox", class: `${this.pressed ? 'pressed' : ''}`, readonly: true }),
|
|
2635
|
+
index.h("label", { key: '7099a505a0bcfad8c87828f51c9937ad9a0a1a21', onClick: () => this.handleToggleClick(), class: `${this.size} ${this.state} ${this.pressed ? 'pressed' : ''}`, htmlFor: "customCheckbox" }, this.pressed && this.state === 'default' ? (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `default_checked_svg ${this.size}` }, index.h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#075DB2", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : this.pressed && this.state === 'disabled' ? (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `disabled_checked_svg ${this.size}` }, index.h("path", { d: "M2.08325 6.04167C2.08325 6.04167 2.70825 6.04167 3.54159 7.5C3.54159 7.5 5.85776 3.68056 7.91659 2.91667", stroke: "#E3E8EF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : null),
|
|
2635
2636
|
];
|
|
2636
2637
|
}
|
|
2637
2638
|
};
|
|
@@ -2661,7 +2662,7 @@ const GbTooltip = class {
|
|
|
2661
2662
|
return this.showArrow ? `arrow ${this.arrow}` : '';
|
|
2662
2663
|
}
|
|
2663
2664
|
render() {
|
|
2664
|
-
return (index.h("div", { key: '
|
|
2665
|
+
return (index.h("div", { key: '5e67e44db99cec67edac8c5dd7a9b5b22485732f', class: "tooltip_container" }, index.h("div", { key: 'a4f82335645460f2beb7fb016c479dce13316e60', class: "tooltip" }, this.showArrow && index.h("div", { key: 'd8d2a2ebc024629e7e82f65c5733703c72c8b3f3', class: this.getArrowClass() }), index.h("div", { key: '2e2a88a4948cc76e4ebae296a8910b565365ffc3', class: "tooltip_content" }, index.h("slot", { key: 'bdea47aa1505cc14bb23433903d07ee0d1299d8d', name: "label" }), this.showSupportingText && index.h("slot", { key: 'cd915e382832ed969fc8ad3246f97317bb7aaea2', name: "supporting_text" })))));
|
|
2665
2666
|
}
|
|
2666
2667
|
get el() { return index.getElement(this); }
|
|
2667
2668
|
};
|
|
@@ -2710,7 +2711,7 @@ const GbVerticalTabs = class {
|
|
|
2710
2711
|
}
|
|
2711
2712
|
}
|
|
2712
2713
|
render() {
|
|
2713
|
-
return (index.h("div", { key: '
|
|
2714
|
+
return (index.h("div", { key: 'ca184f508ebfbeee1532ebe07cf7adee25e620be', class: `vertical_tab_div` }, index.h("gb-tab-button-base", { key: '7ccf11ad6d0b5d1b33327f5a96ff0b30c378c4bd', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.firstTabName, current: this.activeIndex === 0, onClick: () => this.handleTabClick(0) }), index.h("gb-tab-button-base", { key: '5f12cf6dee0b5bb61644f565c37622d88a6e2d82', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.secondTabName, current: this.activeIndex === 1, onClick: () => this.handleTabClick(1) }), this.thirdTabName && (index.h("gb-tab-button-base", { key: '756812e0af065fb8a62537a1c0a14935e65ce320', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirdTabName, current: this.activeIndex === 2, onClick: () => this.handleTabClick(2) })), this.fourthTabName && (index.h("gb-tab-button-base", { key: '4e32edad77ebc8a3c366c44a182963ef49a81772', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourthTabName, current: this.activeIndex === 3, onClick: () => this.handleTabClick(3) })), this.fifthTabName && (index.h("gb-tab-button-base", { key: 'ded607e24bf34706d40770f0ed7ea5be1312fdda', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifthTabName, current: this.activeIndex === 4, onClick: () => this.handleTabClick(4) })), this.sixthTabName && (index.h("gb-tab-button-base", { key: '0c2175e2205d0d591b2e1e8347ae29925ee66f3e', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixthTabName, current: this.activeIndex === 5, onClick: () => this.handleTabClick(5) })), this.seventhTabName && (index.h("gb-tab-button-base", { key: 'f2f7c36674f65e482004bd65d59c3e812253ac2b', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventhTabName, current: this.activeIndex === 6, onClick: () => this.handleTabClick(6) })), this.eighthTabName && (index.h("gb-tab-button-base", { key: '209ca449b2fc66c22c9cd2f3ad1867b9c078f504', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighthTabName, current: this.activeIndex === 7, onClick: () => this.handleTabClick(7) })), this.ninthTabName && (index.h("gb-tab-button-base", { key: '76ecbb765040a5f27b12f2bc7f7483d6735a9c34', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.ninthTabName, current: this.activeIndex === 8, onClick: () => this.handleTabClick(8) })), this.tenthTabName && (index.h("gb-tab-button-base", { key: 'c7adb4d94a8cb9f8b0bb0c5f8cd5a11b6b67a63f', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.tenthTabName, current: this.activeIndex === 9, onClick: () => this.handleTabClick(9) })), this.eleventhTabName && (index.h("gb-tab-button-base", { key: '5ceeeba486eeecfe4ba9b6e7b63e40249659d44d', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eleventhTabName, current: this.activeIndex === 10, onClick: () => this.handleTabClick(10) })), this.twelfthTabName && (index.h("gb-tab-button-base", { key: '2775a0890dbab301c6bf8d31f35792985fd737c3', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twelfthTabName, current: this.activeIndex === 11, onClick: () => this.handleTabClick(11) })), this.thirteenthTabName && (index.h("gb-tab-button-base", { key: '80fc72dd077e008f0dc5304e9f4ec19531d4a4e0', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.thirteenthTabName, current: this.activeIndex === 12, onClick: () => this.handleTabClick(12) })), this.fourteenthTabName && (index.h("gb-tab-button-base", { key: '6d512759226f5843847602a0579b41e5da2d9730', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fourteenthTabName, current: this.activeIndex === 13, onClick: () => this.handleTabClick(13) })), this.fifteenthTabName && (index.h("gb-tab-button-base", { key: '7df69f1c58ede3768027c5a918866efbf4bc35ca', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.fifteenthTabName, current: this.activeIndex === 14, onClick: () => this.handleTabClick(14) })), this.sixteenthTabName && (index.h("gb-tab-button-base", { key: 'e5838d32155cf824c93743ce64b8b8be170fb1d6', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.sixteenthTabName, current: this.activeIndex === 15, onClick: () => this.handleTabClick(15) })), this.seventeenthTabName && (index.h("gb-tab-button-base", { key: '3475177dfb2de6df371c4871ee7c2d4a1f46027a', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.seventeenthTabName, current: this.activeIndex === 16, onClick: () => this.handleTabClick(16) })), this.eighteenthTabName && (index.h("gb-tab-button-base", { key: '25c2e70b6ebaaa1836b858e034dffd027d8e48d4', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.eighteenthTabName, current: this.activeIndex === 17, onClick: () => this.handleTabClick(17) })), this.nineteenthTabName && (index.h("gb-tab-button-base", { key: '2b803124b2b5ecfcf6c381ea9ef98a7a0801565c', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.nineteenthTabName, current: this.activeIndex === 18, onClick: () => this.handleTabClick(18) })), this.twentiethTabName && (index.h("gb-tab-button-base", { key: 'a83e6f4fd426c75a1fd433b93748fb5ad92caea6', size: this.size, type: this.type === 'button_gray_border' ? 'button_white' : this.type, "tab-name": this.twentiethTabName, current: this.activeIndex === 19, onClick: () => this.handleTabClick(19) }))));
|
|
2714
2715
|
}
|
|
2715
2716
|
};
|
|
2716
2717
|
GbVerticalTabs.style = GbVerticalTabsStyle0;
|