globuswebcomponents 1.8.5 → 1.8.7

package/dist/components/gb-pagination.js

@@ -1,23 +1,23 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-C_NOJI7O.js';
-import { d as defineCustomElement$k } from './p-58s1T6zX.js';
+import { d as defineCustomElement$k } from './p-DwL0dy3A.js';
 import { d as defineCustomElement$j } from './p-CXLJa2-n.js';
 import { d as defineCustomElement$i } from './p-CTj4Ioj7.js';
 import { d as defineCustomElement$h } from './p-DNVipIEI.js';
 import { d as defineCustomElement$g } from './p-C4wUmg_S.js';
 import { d as defineCustomElement$f } from './p-BPy6b-E6.js';
-import { d as defineCustomElement$e } from './p-Cg6EUKRt.js';
-import { d as defineCustomElement$d } from './p-DfY7xhtW.js';
-import { d as defineCustomElement$c } from './p-nGv2LMRe.js';
-import { d as defineCustomElement$b } from './p-D4CFh7se.js';
-import { d as defineCustomElement$a } from './p-BDjUXSe6.js';
-import { d as defineCustomElement$9 } from './p-DjXzxs-G.js';
-import { d as defineCustomElement$8 } from './p-Dbe9sjzG.js';
-import { d as defineCustomElement$7 } from './p-CQGTfRDL.js';
-import { d as defineCustomElement$6 } from './p-wjuli8hP.js';
-import { d as defineCustomElement$5 } from './p-LtNjJ-4w.js';
-import { d as defineCustomElement$4 } from './p-Ck_AInbb.js';
-import { d as defineCustomElement$3 } from './p-BUHPMT7X.js';
-import { d as defineCustomElement$2 } from './p-8G3ne_zq.js';
+import { d as defineCustomElement$e } from './p-BA4DuEdW.js';
+import { d as defineCustomElement$d } from './p-CAEiCMBr.js';
+import { d as defineCustomElement$c } from './p-BHyyCkJC.js';
+import { d as defineCustomElement$b } from './p-Cu8UdTdC.js';
+import { d as defineCustomElement$a } from './p-58UiDivr.js';
+import { d as defineCustomElement$9 } from './p-Ojetq1e-.js';
+import { d as defineCustomElement$8 } from './p-C5jd6KvY.js';
+import { d as defineCustomElement$7 } from './p-C_9NKqcz.js';
+import { d as defineCustomElement$6 } from './p-B1Gpz2Hg.js';
+import { d as defineCustomElement$5 } from './p-D7G3AQr_.js';
+import { d as defineCustomElement$4 } from './p-DzM2JdvP.js';
+import { d as defineCustomElement$3 } from './p-C_B54e6d.js';
+import { d as defineCustomElement$2 } from './p-CfIZrAdJ.js';
 
 const gbPaginationCss = "/* @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-theme=\"light\"] {\r\n        --color-background-information-subtler: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtler: var(--blue-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-information-subtlest: var(--blue-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-information-subtlest: var(--blue-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-bold: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-bold: var(--blue-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple: var(--purple-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple: var(--blue-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtle: var(--purple-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtle: var(--purple-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtler: var(--purple-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtler: var(--purple-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-purple-subtlest: var(--purple-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-purple-subtlest: var(--purple-950);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-bold: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-bold: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink: var(--pink-600);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtle: var(--pink-200);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtle: var(--pink-800);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtler: var(--pink-100);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtler: var(--pink-900);\r\n    }\r\n\r\n    [data-theme=\"light\"] {\r\n        --color-background-pink-subtlest: var(--purple-50);\r\n    }\r\n\r\n    [data-theme=\"dark\"] {\r\n        --color-background-pink-subtlest: var(--pink-950);\r\n    }\r\n\r\n\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    /* ----------------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.285em;\r\n}\r\n\r\n.text-xs-medium::after{\r\n    margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xs);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xs-regular::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after{\r\n    margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-bold);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-semi-bold);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-medium);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-medium::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular{\r\n    font-family: var(--font-family-body);\r\n    font-size: var(--font-size-t-xxs);\r\n    font-weight: var(--font-weight-regular);\r\n    line-height: var(--font-line-height-t-xxs);\r\n    margin: var(--spacing-none);\r\n    padding: var(--spacing-none);\r\n    display: inline-block;\r\n    position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after{\r\n    content: \"\";\r\n    display: table;\r\n}\r\n\r\n.text-xxs-regular::before{\r\n    margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after{\r\n    margin-top: -0.416em;\r\n}\r\n\r\n.pagination_div{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.pagination_entries{\r\n    display: flex;\r\n    gap: var(--spacing-2);\r\n    align-items: center;\r\n}\r\n\r\n.pagination_btns{\r\n    display: flex;\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.entries_dropdown{\r\n    width: 6rem;\r\n}\r\n\r\ngb-input-dropdown{\r\n    z-index: 99;\r\n}\r\n\r\n.pagination_numbers{\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-half);\r\n}\r\n\r\n.pagination_button_group{\r\n    display: flex;\r\n    border-radius: var(--rounded-sm);\r\n    border: 1px solid var(--color-border-subtle, #CDD5DF);\r\n    box-shadow: var(--shadow-xs);\r\n    align-items: center;\r\n    overflow: hidden;\r\n}\r\n\r\n.page_numbers{\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n/* Pagination Type Styles */\r\n.pagination_div.page_default.desktop,\r\n.pagination_div.page_minimal_center_aligned.desktop{\r\n    padding-top: var(--spacing-5);\r\n}\r\n\r\n.pagination_div.card_default.desktop,\r\n.pagination_div.card_minimal_right_aligned.desktop,\r\n.pagination_div.card_minimal_left_aligned.desktop,\r\n.pagination_div.card_minimal_center_aligned.desktop,\r\n.pagination_div.card_button_group_right_aligned.desktop,\r\n.pagination_div.card_button_group_left_aligned.desktop{\r\n    padding: var(--spacing-3) var(--spacing-6) var(--spacing-4) var(--spacing-6);\r\n}\r\n\r\n.pagination_div.page_default.mobile,\r\n.pagination_div.page_minimal_center_aligned.mobile{\r\n    padding-top: var(--spacing-4);\r\n}\r\n\r\n.pagination_div.card_button_group_center_aligned.desktop{\r\n    display: flex;\r\n    padding: var(--spacing-3) var(--spacing-6) var(--spacing-4) var(--spacing-6);\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n}\r\n\r\n.pagination_div.card_default.mobile,\r\n.pagination_div.card_minimal_left_aligned.mobile,\r\n.pagination_div.card_minimal_right_aligned.mobile,\r\n.pagination_div.card_minimal_center_aligned.mobile{\r\n    padding: var(--spacing-3) var(--spacing-4);\r\n}\r\n\r\n.pagination_div.card_button_group_right_aligned.mobile{\r\n    display: flex;\r\n    padding: var(--spacing-3) var(--spacing-4);\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: flex-end;\r\n    gap: 0.5rem;\r\n}\r\n\r\n.pagination_div.card_button_group_left_aligned.mobile{\r\n    display: flex;\r\n    padding: var(--spacing-3) var(--spacing-4);\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    gap: 0.5rem;\r\n}\r\n\r\n.pagination_div.card_button_group_center_aligned.mobile{\r\n    display: flex;\r\n    padding: var(--spacing-3) var(--spacing-4);\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n}";
 
@@ -29,6 +29,15 @@ const GbPagination$1 = /*@__PURE__*/ proxyCustomElement(class GbPagination exten
         this.pageItemSelected = createEvent(this, "pageItemSelected");
         this.entries = [10, 20, 50, 80, 100];
         this.selectedPageSize = 10;
+        this.pages = [];
+        this.width = window.innerWidth;
+        this.handleResize = () => {
+            this.width = window.innerWidth;
+            this.updatePaginationSize();
+        };
+    }
+    updatePaginationSize() {
+        this.breakpoint = this.width < 730 ? 'mobile' : 'desktop';
     }
     onPreviousButtonClicked() {
         if (this.currentPage === this.totalPages || this.currentPage > 1) {
@@ -42,21 +51,44 @@ const GbPagination$1 = /*@__PURE__*/ proxyCustomElement(class GbPagination exten
         }
         this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
     }
+    onCurrentPageChange(newValue) {
+        this.internalCurrentPage = newValue;
+    }
+    onTotalPageNumberChange(newValue) {
+        this.internalTotalPages = newValue;
+    }
     componentWillLoad() {
+        this.internalCurrentPage = this.currentPage;
+        this.internalTotalPages = this.totalPages;
+        if (this.internalTotalPages <= 5) {
+            // Show all pages if totalPages <= 5
+            for (let i = 1; i <= this.internalTotalPages; i++) {
+                this.pages.push(i);
+            }
+        }
+        this.updatePaginationSize(); // Set initial variant
+        window.addEventListener('resize', this.handleResize);
         this.defaultSelected = [this.selectedPageSize];
-        this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
+        this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.internalCurrentPage });
     }
     handlePageSizeSelect(item) {
         this.selectedPageSize = item.detail;
-        this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
+        this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.internalCurrentPage });
     }
     setCurrentPage(number) {
-        this.currentPage = number;
-        this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
+        this.internalCurrentPage = number;
+        this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.internalCurrentPage });
     }
     render() {
-        return (h("div", { key: '95218e4314919e6b4dd3f7e1765d5df67daf845e', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'e6b2c4768333f0d9acdc6af2759c5589aedf1f70', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'dfd13a46327698dfc830d4345a1c498e59f3d1a1' }, "Previous")), h("div", { key: 'b2f30c574d79fbcca92a460823376eaac67688ef', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '2a8649dce0cdba6ca2e1bf133c8a165e4b6847d6', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '157d4ac0bc6a9c8dab8e5480e387eed0d28795c1', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '8f5bc4d8c8eb154d90f68905ee61fd40e0c2226c', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '8e0ab2b6e55ad16950230c76c4cf6e172f6f6dbe', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'ee6cb1d265ba0edfd86e0ba29811c6723bd2c97e', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '9ff3e4d7de51a830ac61babc9a998863057e4d76', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'af1a7cdc134f4ef3424d0386511fb028e835535f', shape: this.shape }, h("p", { key: 'dc3104db248f58ede677b7f805eb2f985a154b79', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '3d0ff34d302967bdc45ce8af12914c144bff75ed', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 2) }, h("p", { key: '95031739a3621d0727fda2a8d06e6493db060810', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '135fe2becfc155eee1c52040dd09a102aca89493', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 1) }, h("p", { key: '2c05cc21a9d652b53d4525f19d09f4042fb4c131', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '15fe88d333fd32521f836fa7fac95746004dc48b', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages) }, h("p", { key: '62bc27f355fb3abd35e93a60683b27c071c4ec9b', slot: "page_number" }, this.totalPages))), h("gb-button", { key: 'dbb9d0d868c39c77cbc20191271fdfff6496525f', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '527b9e16f337d2c64ac435eaf1b4cdbd134cafc5' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'f465ffa0ae90aef2697a865d1cad7d885493b05b', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg" }, h("p", { key: 'bf94ff5b14c7958a55276d13b47044429223f43e' }, "Previous")), h("div", { key: 'e1ff381620cb7bc547b2376db7e4726d713e4a9c', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '8aad85ff22f1661d782fedf850ab63e3081dedff', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '45c7b7fd66d1889d7b1a0eb19ca2f45cfa3f1f62', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '741ad65d5aa8f11f9dd140f9ced80805d82176b2', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '1398692206d286d323285ed8f34418abd320aca5', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'f66f90103a833854cd2dbf23c82824a88b3793ca', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '3fa389a3efb035da468410249334dcb93ba3e3f1', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '5ca0ef995f42b6669b78275d2424bd173c515698', shape: this.shape }, h("p", { key: 'c988ab8ecd071b78ce8e217d3d9ccddf037b7a11', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'bc03d99c892c1ba7fe2ab050292535370b092305', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 2) }, h("p", { key: '5e8a5c803b032bfaa68c408214636f2f1e2fc6f2', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '8088c7696bf570b637eb9a943c393c3ea026ec36', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 1) }, h("p", { key: '5bbb37b6b3557db7f1143e4553ce175823214d89', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '34539c32a6d4cb78b5de75da444aa2684e4e9861', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages) }, h("p", { key: '67888e7fdcc6234ecf07c6d894cf3b2032673903', slot: "page_number" }, this.totalPages))), h("gb-button", { key: '998d2055f28e8611ce8445a19b8a4413cc9e16df', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg" }, h("p", { key: '3dbce7b0c8202580ff578403ed6ee28d82d160ca' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '6bca1032b92708c3947e8605c5d13759158bb3d7', class: "pagination_entries" }, h("div", { key: '655346683ec263ff35a024b96115e8daf0a248f1', class: "entries_text" }, h("p", { key: '6c17db5e98b5eb1ab5b223c00160b4a0cfa0e0bc', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '89318300a3615684ce9e54c8c2840d2f4af1903f', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '6d6f376f0520100ebeb08d53a08e74e9b6562c1d', 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 }))), h("div", { key: '8e9326aa91686ead7c8cf115714144eeab201ef3', class: "pagination_numbers" }, h("gb-pagination-number-base", { key: '58c75ea7a4c3a03dd03bec2573f47c0387d9b3f8', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '2e032c5fc18f90d5c91e76803c22b93c73994366', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'fc53ff057a8b3e1b3b007da3436a6416f744065a', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '717baedc26645b495347d569077ec7dc23402351', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '1d6f3c510528112f26005f8e75b5e763c99d54b8', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '80f6dccde4f55cf3f766cc4ec138b138b36d1917', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'cad66e7661294e46a44ed0bba89713facb9fdea9', shape: this.shape, state: "default" }, h("p", { key: 'a28d57044460775e5962f92afea324a1e8f1d797', slot: "page_number" }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '1baaf298cae1b7b28262005f41213727f5a47bc1', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 2) }, h("p", { key: 'ba2bfff250f6081f8e74ad84e576ba302cc5ed80', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '7c66ca5372363af9c54fe2cb2db397cba3edc1aa', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 1) }, h("p", { key: '007a7c27bef5ab49db93ca653cc3941ebeddd998', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '7e32ea3a063bdac56e8f1b1661c8e2a3ba1041d1', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages) }, h("p", { key: 'f29b69122fea0ed7f9a1c222e78cb082fc52a908', slot: "page_number" }, this.totalPages))), h("div", { key: '06f052f8a19d59995c9ba09bcb9be6754803a11a', class: "pagination_btns" }, h("gb-button", { key: '2be0e7b5ff1bbe1cfa653d91013031a03cb85359', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("gb-button", { key: '352054e61199dfef1243fda8fb49f347739eda4c', 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' && (h(Fragment, null, h("div", { key: 'f9fd9a8ea4dca9a2828dc02cb775679c0f70ae4d', class: "pagination_entries" }, h("div", { key: 'a11fb7a4fe91d18b1cdc1ea833b20847fc6972ab', class: "entries_text" }, h("p", { key: 'cb906db4e8ccf20674b546e4ccf9086fbd5a9c12', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'a52fcbdda8d3b79e64fb682f34473bcfa31fd7d4', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '7e58204a90d14fcbea71dfd48b3b38d49c3510f3', 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", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: 'a0b7112065d5fffd141644ce4e4c25e8e3177d57', class: "page_number_text" }, h("p", { key: '68244028d896dbbaeb1874cbaddb6641cef37e12', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '7641233f3d3897f9d020074a322a9a787cf0e9d1', class: "pagination_btns" }, h("gb-button", { key: 'fb872c69c943e9e63c20daef6834baff2865d3a2', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '0d63d4aef3a7e0d42b0a27ac78759a7e030984e9' }, "Previous")), h("gb-button", { key: 'c229d152f2b467241561f4cc9a9566a1b5a0d31c', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'a81e0676801059ec8bdc8f8fba893139ad0b2b67' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'e3c5e7c15337f2936b27066a024425113b3b25ad', class: "pagination_btns" }, h("gb-button", { key: '2d361e6701e81fee430670cfd47c34fbcceffc74', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '06b6db212d8eaa479eaaf0158809342e713f4a7f' }, "Previous")), h("gb-button", { key: 'be5332032170ff1b5f913d9062404b0d3dadd4ad', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '886588db978b5065504ab926762bfb85a0095bad' }, "Next"))), h("div", { key: '9cb03d88cc4dbb2872b11f5214b00db38e6db4ae', class: "page_number_text" }, h("p", { key: 'b1c45cd57fade3dffcaabf7745fc3afc9c97fbcc', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '3f503dd4bacfd130e5aa6382030aa10b7639d2b7', class: "pagination_entries" }, h("div", { key: '03e91c58bc5e0beab2fe20ce7b527056267fe66c', class: "entries_text" }, h("p", { key: '68e5f3a982100028f956567d0e8d631b22682f43', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '8175b714580e7829796947d42417b2697f49a6c2', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'e5f7956aa394b9b55f02a035b34f06a8d315c1f7', 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", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'dfe85241ed15788f07805a3fc3c53375daf180ea', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '36471007fabd04eb33e9cd676fc3956e4ff12afc' }, "Previous")), h("div", { key: '366b3cf633d29595435d0511ef7359fb4c10f6f9', class: "page_number_text" }, h("p", { key: '6103a6149ddd67adb0d0c4b8ebbd318f475d38ef', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '33009364ea4741aab8a00478b54d4c01f5f3f6ef', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'd76ec251ac1946b89199c6ae753cdab92a68a89c' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '5640a8e2721b35425d85c9a5485a45b7e2183e97', class: "pagination_entries" }, h("div", { key: '662895db74c4147d6ef0786edcbfeb4037de5525', class: "entries_text" }, h("p", { key: '119ab042acb05cad3185478658aa0fdcf11e4907', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'edccfd200e023f460a6873d621c225eac104125d', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'c0d3d6b13ce9551a22b795a76aff3fa3872a40f4', 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", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: 'b6f97575cbdd187d437887801e3af51981b5fa4d', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'b9beda41826b37a9c1bb50bc2d90866a7ae2eb4d', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '070d1bf98c702f6e67d0d8de90e8f468ba388dc3' }, "Previous")), h("div", { key: '7b48e9da86d0b3e19e283355d7a083f8dedb4bea', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'a7bf63601aba1e0c7962f6f5a3a6d7fe4a20dca2', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '3b6431a5d963a9267cc35c52b3d5bc3348a5c8de' }, "1"))), h("gb-pagination-button-group-base", { key: 'c98474f3509c49964bd742aad77a07a797ca9a39', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '7f327e3e120da10d1709e9de1ad81c13b70aef5b' }, "2")), h("gb-pagination-button-group-base", { key: '5bcad719a39e82c67f7b3cbe883cea780ae359ea', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'b3771306643e11e3ad163f1c0760c9ba71412d3d' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '923e666604b7d422610448dcb03ec76701023294', icon: "false" }, h("p", { key: '2143f8527e468f998c7edd7d146cb15757a6420f' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '0eb9c6ebfa6da05509f749329b48b198ef2f7a09', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '1de3ea3bc8a7def921ea97b5e58ed320aa0bade8' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: 'fcf7cca35ef6f6d054e258971007258857c96815', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: 'cd52ee0627e70bdfebad19ff6666f6d18991247a' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '17d39a216852cef95435b019a35077d9e378d65e', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '41227d5e0f6276cdbb083834e348821923ce4c8b' }, this.totalPages)), h("gb-pagination-button-group-base", { key: '92595263e4335cace56138e2c84ad6f5a270cca6', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'd4bc52d04e16f3dd52865b77ba7b0b8a1ff8be8d' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '6efa7c13d092a4a2a719456915a602bb66bf3ba7', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'db176fb5d6ce82dc40bf3c0cedf6784094687f31', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '5f3805f431d76924b7f04fadaea1bd6b39ac1c90' }, "Previous")), h("div", { key: 'ed480c18134822a25dead8785932eb35db1b4ca1', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'fd848d86f7e0014fde4228a453e9ab86a7b507bf', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'cb809bc396d131b9f71312299fb45fc2cdcedbc4' }, "1"))), h("gb-pagination-button-group-base", { key: 'd92c8f63777b0971c93e2e376dca7df007146383', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '0abcc99c54f6c80f56c13a192af78b926753260c' }, "2")), h("gb-pagination-button-group-base", { key: 'f3fdaeb5bb5b14105ce19a43b1e57e1fa3524630', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '2dac6cb664583be0d49f97e1c6c06841898dc61b' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '2eb835b4c83806fddfc07b1a106d237577dfaf5c', icon: "false" }, h("p", { key: '90677d0dad1a1c1bbbd3796b81e233ffd054d443' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '1bbb237b714883f9abafa068f491296cf5f35810', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: 'f3f64d4b271c625de5a2b56a7b15855f89155030' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: 'ad8c556cbab071c01590bfc61ed1f7339c860492', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '2aecae49c974ef45e6e3ce52d2fffd728c61720c' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'e1a4b33a0120566033198bd83fd6f92d3a9cde2d', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '8e51f7d7744e25db84a70630d2a4a3b0161a3d55' }, this.totalPages)), h("gb-pagination-button-group-base", { key: 'c650d80f7a55f4b969c173ac5ff3bbd64aff0977', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '69a885a6e2ee07d999b7cd9124a714972e37a658' }, "Next"))), h("div", { key: 'aae9af0f0799a75c59fe38aa4d3cb9d96768baac', class: "pagination_entries" }, h("div", { key: '1ca5218bcd79686aa11125087923996da135ecaa', class: "entries_text" }, h("p", { key: '034ed4685a512f3df8ac587a7ef1e21d6f882f98', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'a7f04052a96e209886c4c73e9efd3a87ace6a2cc', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '7d3799eeea85f07ae2ef3d2c335df1a0702d6d3c', 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", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'f30dee7de67f8d238f6438594f43bf65181c9ad8', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '9e2d1d0768590cd5b809aa6501fba5f90f79f0a4', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '81d2335a8ebf4de71bb9bc853ced858ac3348959' }, "Previous")), h("div", { key: 'c109f12a2195e2bf1e90b482c5a6d0d45ffb98e6', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '086af1cfead5f60121cb23e48c9bb6839dca23f1', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '2231a2ee193c5edb18048544b1eefccc5509bf6a' }, "1"))), h("gb-pagination-button-group-base", { key: 'dafaf6f33dbf2faac527b66ade8dcd3b4f681d94', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '33183af639d0d283e58a5bb13d45c096f7b71512' }, "2")), h("gb-pagination-button-group-base", { key: '062941e5efb4d90e29ce54f3b0583646d7131fb1', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '41cd008cf2712bba0b2b40f1a197d0f5d70db624' }, "3")), this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '0c6bff117de1c5991faff7968e3582a1d20ceb10', icon: "false" }, h("p", { key: '20b5fc0e1da52bf99102a137f5c4f77413204580' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage < this.totalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '3608f9ad14f81ddbbdb22f501b7cacbf3979afe7', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '1a614f5d717b593c3741c2cff5453e201a55f143' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: '7851b21749ea2a3b219d06574a3d341a67aba3ba', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '0b9484582c002c0c513de5a246dfc853772c2d4d' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '8aba451fcb42dc968a392aebd905bd77c148ea75', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '848b04184a0aaef3a3283dc2f2570d079b669d85' }, this.totalPages)), h("gb-pagination-button-group-base", { key: '54a10b1dca32420149c63cc980fd921184538dac', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '947cdb5aca9ffcfc1cbccec7e9d912e5dbd38aaf' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '869c54241ac6d9a2722f1d3a25053d86541f61d1', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'b407d61c0857212e680ed2d4dafd7717c6cc610a', class: "page_number_text" }, h("p", { key: '781f2449d29f2e720c4b235171cb74400ae21809', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '6a85d345c2f749d95ce4838d6ddb688acf8de843', 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' && (h(Fragment, null, h("gb-button", { key: '35beba68a2d52e674b816d34ec193f26b75e00d1', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '4da86508f1621da56e7244097c6fd6cafd1b2776', class: "page_number_text" }, h("p", { key: '7592c997054e1b8294bfbd38df30783f1fa73414', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'f4f6b019e74235cc103135ffb7988c1795c4bd22', 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' && (h(Fragment, null, h("gb-button", { key: '3753d8e1512e40f638ae96984688667d491e2688', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'ca3d371ea8440672bca08e48ec4cf03515fb1a39', class: "page_number_text" }, h("p", { key: '045027174eafa2eba018090d92578d53fac5b31d', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '57f218e0118a8225d86064fd71a1d94473cec9d9', 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' && (h(Fragment, null, h("gb-button", { key: '7c2d8488172221138369a1c085f0b16f74f7df69', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'c9617dbb6501f0da4cf663925b87475a584b8639', class: "page_number_text" }, h("p", { key: '174e47ee8bdf0e134d731d33f380d4e4844c259f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '5260e0bcff35a11076263f197cef4ff283c1d15c', 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' && (h(Fragment, null, h("gb-button", { key: '3e24ba552f98917e0289c1a61c093fe67e1b9a8e', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '79003e3fb293018c3fd9b5fd0559a3cf163488eb', class: "page_number_text" }, h("p", { key: 'a0c212f99baa17b84c525bfb6b48eaedbb602653', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'acf2fcf04e5ba6f2c32e40cbd5975cbb64802c6a', 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' && (h(Fragment, null, h("gb-button", { key: '672e40a8b2a0655efd5326771ef057c089c3b9d7', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '086d70a3d7ebcab79f9af9dabc45f05211910e3b', class: "page_number_text" }, h("p", { key: 'b613def25e777c73f3a1a2a15ca0f649cb8a76b4', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'c5c068c1453deb1b2c9ea83961e41b30131ae565', 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' && (h("div", { key: 'ef05f008d58220676d3685464d7f0830bf6a7e60', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '68c09df3c6557093662721a29e04174cd5c03909', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'da33e00fa6f7e50a49921910457060ca113f9ca2', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '15918d77235146fa7a220107efba58a461b6f256', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '831525a8e10a93d25c1fd67fd61d2f378836ea72' }, "1"))), h("gb-pagination-button-group-base", { key: '3c53aaf083bdc677f806de4e2c2e9f4f432d270e', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'c6f33ab7261c74e81af88ab480bc7f208a1ad44c' }, "2")), this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 2 && this.currentPage <= this.totalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '3f83baa1f8909a90127e921d2c088a31b18ce24b', icon: "false" }, h("p", { key: '5cc05c9cf04dfe42446e469cc0e66a20d431c62b' }, "...")), this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.totalPages / 2 && this.currentPage <= this.totalPages - 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'ad508a97b53a5dc38375fe548cab17970e43d38b', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '5c89b807a3b86ec9ef11bedf90bc5dc16675ae19' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'a0a25a4bc47c63f6a404fcf68e17336f329137e5', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: 'b9557e3ee23b9ec1919897499b8031946b642029' }, this.totalPages)), h("gb-pagination-button-group-base", { key: '1bf0a92a63d51dc49e8f806f85948805c8c4fbc1', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'mobile' && (h("div", { key: '38ef6b764b185c11882d2c911ef786046bdcf353', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '854f4d4f783c8b7c8f39bb341690aa36651db3ff', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'e4d599e80964ec18f2a806ae97fe3047e6d9623b', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'f088adcb155047dccbdecc0237d0c6717e7b5501', icon: "false", state: "active" }, h("p", { key: '07c64b44dc36e7dc61f13951fbf8863e4b03b129' }, "1"))), h("gb-pagination-button-group-base", { key: '626c43f50b401547f29c4aae09bc04fd264b4eb2', icon: "false" }, h("p", { key: '58ad749072315a552d2c00ad39024efc28e1a61e' }, "2")), h("gb-pagination-button-group-base", { key: '9bbd7508b1c3fa329ea78797dc604e9d78c57ec5', icon: "false" }, h("p", { key: '7deb27712db1d53d08e8e2f1bc9527ce954b2134' }, "...")), h("gb-pagination-button-group-base", { key: 'f00390ecb30ddb00ff99cb093de4b27e13e47843', icon: "false" }, h("p", { key: '4e47bf55b9af0395dee0d1ca0ba42b22b9c471e9' }, "9")), h("gb-pagination-button-group-base", { key: 'f43bb3eb8375c1bf643ab658461bba6ebe4cbba9', icon: "false" }, h("p", { key: '9d89b1316db4675aaf997c715d78c3b199b31671' }, "10")), h("gb-pagination-button-group-base", { key: 'e2e8fd2f5eb901b5f58a3dbe2ce26dda4c362f08', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'mobile' && (h("div", { key: 'a3dfc1bf5c52dfb9d7e2d8bd7ab4758ba71949fb', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'c528944fe42a00167f95dbe288a7805e2b9cbdd5', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '080ee83af089ebfd60d959b41f078f46a1ffad7d', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'f1cc3342fc42b370780fe9694743b6cd57e295dd', icon: "false", state: "active" }, h("p", { key: '4e25cf7e59aac941fe01855036bcff6e405091d5' }, "1"))), h("gb-pagination-button-group-base", { key: '14909db1599e4503ba006fca486ee1473b860150', icon: "false" }, h("p", { key: '5f574866d6abedb530aa56db7438807b66fc4620' }, "2")), h("gb-pagination-button-group-base", { key: '660bc19321d29c84c300c9ca9f25edb53c7321c9', icon: "false" }, h("p", { key: '8e2c9010375248824ec80ccfb8674e436503974f' }, "...")), h("gb-pagination-button-group-base", { key: 'b6d8d366588693eab30142298583e77ecb897945', icon: "false" }, h("p", { key: '08bf71bc4711e6e56f1868df0366d49ed94686a5' }, "9")), h("gb-pagination-button-group-base", { key: '26eae61b3bfa3d82ee4b9e731ce30de6f60dc8dc', icon: "false" }, h("p", { key: '75a39c8f4fda6f8d06922d84323876abeac950d7' }, "10")), h("gb-pagination-button-group-base", { key: 'dc264b70213c6a9a8bfb0f656c20fc706bd02e6e', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
+        return (h("div", { key: '8d23c5217b50733a1183f1194595a4439ff80d3b', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '89ca5656ba6640f139aae1247c2b162c4607b296', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'f23899b9cf96e1d7fbd70f3ae4e56005be18fd3a' }, "Previous")), h("div", { key: '6ae013c00468c5c44eb52541d81e825fb099c373', class: "pagination_numbers" }, this.internalTotalPages <= 5 && (h(Fragment, null, this.internalTotalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.internalCurrentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'ffcd18c6e7e0daa7dca0dba90dadfc22cbffece8', shape: this.shape, state: this.internalCurrentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: 'f18a70aafa8a052d3ce20c5bc0c36fb8f84ba642', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '9aaa921b0ab18f9968dc11c57effacea2cf91bef', shape: this.shape, state: this.internalCurrentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '7ad23e2a322ca593a2c48283621574d19ce6bb28', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '8d89d4b03f9d9e362cc92d9ad93bf4d537c7233d', shape: this.shape, state: this.internalCurrentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '49b9d4a4772569100a74d5df9479d233ad48a89f', slot: "page_number" }, "3")), this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.internalCurrentPage))) : null, h("gb-pagination-number-base", { key: 'ac39c3528dd7e56f2b492dc0524bc140ff8f3624', shape: this.shape }, h("p", { key: 'e014d17bdbad59f7b5a1839145d2b91912376ab7', slot: "page_number" }, "...")), this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.internalCurrentPage))) : null, h("gb-pagination-number-base", { key: '66a25f798070955d004a3b9dcaf4bb3ee9e7fe84', shape: this.shape, state: this.internalCurrentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: 'bd0fa774d5e9965fd200894dd228e14ab4d589e8', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '73d008696c20f3c77ec9fb3281f4e22c7c2e0bac', shape: this.shape, state: this.internalCurrentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '503fe235bf0616eb8c574c60ed067c8675da37f4', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '030db797795c49fa6b550f58b44fdb7d9bcaf88b', shape: this.shape, state: this.internalCurrentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '09829a0d01170d61d505aca6656f59a3e4036030', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: 'ff92cb58f225f448ce9fffe0c94359204bff42de', size: "sm", hierarchy: "tertiary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }, h("p", { key: '04834cb300e4042bb8029dc9346a7dcedeb8333c' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '8bfbfbf91711ac8729b8091d0a7ed01e59e9be7f', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '1a7299f5df64b4ceebda5c4cc804cac31ccfe444' }, "Previous")), h("div", { key: '8f2d600d87657e0992f698e9b775c54f602944fb', class: "pagination_numbers" }, this.internalTotalPages <= 5 && (h(Fragment, null, this.internalTotalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.internalCurrentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: '02525efd0e7f9b49781df98c6642b50e0202e6ec', shape: this.shape, state: this.internalCurrentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '93fa1d182cddad049b9517d4c5581e24c3a4ae6c', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'ce96c5ccf583f795716fdd28306079a5d2e07e30', shape: this.shape, state: this.internalCurrentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: 'cac46fff56e9cfc6624ad908e72927e3d72374b2', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '33f0f51bab3d8d8ce78d8a300031f2b70d9a0327', shape: this.shape, state: this.internalCurrentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '7d15a4531ffae9fa1942dbf9364f22c92cf92de8', slot: "page_number" }, "3")), this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.internalCurrentPage))) : null, h("gb-pagination-number-base", { key: '5d56ba776119bbf408a9de9d56b36471067fbfb3', shape: this.shape }, h("p", { key: '13a59f61c1ffb4e8c110e9fb1b39c179207c563e', slot: "page_number" }, "...")), this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.internalCurrentPage))) : null, h("gb-pagination-number-base", { key: 'd1d8dc4c1b650a340f502a41967a1d89dc36c3f5', shape: this.shape, state: this.internalCurrentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '05a7ec9beb0e0484eabfd49dfc799955dd906df8', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '469065356e466e976c9e76fe26b4d21f01fe6874', shape: this.shape, state: this.internalCurrentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '5a3168d7b6a615def99806409b9b7f11ceb08401', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '95d8d42f8fc85c7a4fe304716dfc9f64dfeb628b', shape: this.shape, state: this.internalCurrentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'bd48f76c27679abd88a7ac3b864f76cbb9f26028', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: '1e393ea33d72972547b53b2cd950f0ece65c3c21', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", "icon-trailing": true, "icon-trailing-swap": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'e04c4d7f5939aca7f49f9178b51aab358d405566' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '4e54b2332f451c292469a440503ae78837e73b84', class: "pagination_entries" }, h("div", { key: 'aa1b5647a951f5cc9dc0e4d7aecedb888758a5c4', class: "entries_text" }, h("p", { key: '7d379dca768f72473a6e40aca53ec3f40f94fe18', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'e48c846d259e80931a276147aaaefe1ea5771965', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'cf475b9836fad3ce0dc16238be0c17eda0b63d34', 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 }))), h("div", { key: 'b45f78bf8600fcbd34f4340f4467f1610dc29fa2', class: "pagination_numbers" }, this.internalTotalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.internalCurrentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: '770b080639ba56394af55524829ea25bb49b61bd', shape: this.shape, state: this.internalCurrentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: 'a61dbf731aaf59fa249c58e6bdc24bf163800fc6', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'baac39e34e09e12a7fd42ec156d1e6f7b4c5bd68', shape: this.shape, state: this.internalCurrentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '74b1e7e4cb157a2f2ba0ef7c42b4f7732c37b55f', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '9f3d1e03e6068a34f08f353da255b0fed12aed57', shape: this.shape, state: this.internalCurrentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'f647b91a1e3710195e4f1b1b2cae9254ab9ab716', slot: "page_number" }, "3")), this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.internalCurrentPage))) : null, h("gb-pagination-number-base", { key: '0ff799ee7c52e0d49c9593e907e1c5d18e390254', shape: this.shape, state: "default" }, h("p", { key: 'f5ec3bcbb5d6668d31b9f5aee613bc5e9b516425', slot: "page_number" }, "...")), this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.internalCurrentPage))) : null, h("gb-pagination-number-base", { key: '21eb97cf12e15b4cb155a3d1db685d77391cf523', shape: this.shape, state: this.internalCurrentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: 'c527f318f167520c490b6bd7a2be01afe25fda70', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '09fe95712efdca90097f579b934472a82dc4561a', shape: this.shape, state: this.internalCurrentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: 'e4c1a51d359f572aee8476c6c42145aa1b1df647', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '7986f6f125b37d2f34a20f407e3e20ef6da6b605', shape: this.shape, state: this.internalCurrentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'dd863b581d46b1d4febcf2bc6a0b3a500e47bdcd', slot: "page_number" }, this.internalTotalPages))))), h("div", { key: 'c08222aa28a2db71d7a8184fa3b42359e9d8c357', class: "pagination_btns" }, h("gb-button", { key: 'f66d484dea8aacfe72bb8194245417f842cd746c', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("gb-button", { key: 'd829565c1adb25493a3ccf0d6f39b1e353e0c118', 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' && (h(Fragment, null, h("div", { key: '5a2ee6e2b8cb0052b02bdbc4e59a77cadbda713d', class: "pagination_entries" }, h("div", { key: '08903b51fe4432007c07bef09320421deb90bb49', class: "entries_text" }, h("p", { key: 'bf0b2e14350ab151b9c85b51592ff093473412a2', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '29290337d36aabcb419c23dc756d1bc1bd45f06f', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'cb9ea2f30b989b148ece06811adc4370c4405343', 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", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: '96aedc111c6dbbf78a3c784b05541299592230e1', class: "page_number_text" }, h("p", { key: 'dbb39138155c09a32d039960df37aa65e83d23c5', class: "page_numbers text-sm-medium" }, "Page ", this.internalCurrentPage, " of ", this.internalTotalPages)), h("div", { key: '3ff58f7c5651b0bb18249a2af11ccd224f2bcd56', class: "pagination_btns" }, h("gb-button", { key: 'ed298a640ee0df5d2cb8b24c014c044f60dfd701', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '2bd1bf0b11eb0815948de8f8556d4cd2467bd2b5' }, "Previous")), h("gb-button", { key: 'daf21bfed72826c173ed5350ba66e6ff78f27ae3', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '60bc3383d3dab494c480c9d4ee3543242172e8f6' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'bcf7593ee2f4dd606989d7a79545773d00519179', class: "pagination_btns" }, h("gb-button", { key: '8482b16c5b5d37c3d1b538d2df2f6ce833002daf', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'b6fd452907554d9e382f39393abf1fe2e0ac66e4' }, "Previous")), h("gb-button", { key: '4af09e35f6e081b8661ae9f1f7ec92670b0dc5e5', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'e051ef3e911e17a0f3fc7a7d4625089939c673ec' }, "Next"))), h("div", { key: 'e21b9fae7f5699821d8a0ef5d314b04c935743f7', class: "page_number_text" }, h("p", { key: '70c875afa820e7de52b6ac913c60e542bd72cf97', class: "text-sm-medium" }, "Page ", this.internalCurrentPage, " of ", this.internalTotalPages)), h("div", { key: '47a1179aaa0c3f47e04f160b52d94230b1ee18d9', class: "pagination_entries" }, h("div", { key: '72d982299e6b1547eeae9559253a09f123cd153c', class: "entries_text" }, h("p", { key: '0e3ed57c4eb982b20fbaeb037148d10ee908b3ea', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '885171920fd9b36c9d758edb4184bb4da71ff775', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '0c234e194e06e0fe5f43e528d729f9be4079e6a7', 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", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '208043bc2daf0acc740d8347e15e4a7b1a41c8f4', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '1261cd4aaf758cd2ecbd43bd5df6f8f02c60ae25' }, "Previous")), h("div", { key: 'c36fb99c259fc35d230cab0ec7dd8e5dfdcc8453', class: "page_number_text" }, h("p", { key: 'f370e4723274788862766dc11df705f09d3dc938', class: "page_numbers text-sm-medium" }, "Page ", this.internalCurrentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '64df1087bf34adaede4fb4da4b35846ecd460b87', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '60483ace75782923f53bf220d3c260ddcb50484e' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '195e5c8fce3441205285b6ba15b64f27b014216d', class: "pagination_entries" }, h("div", { key: 'ca6373dda68b4fd431e74b86835ab24c2a7fb26a', class: "entries_text" }, h("p", { key: '129f7ef8d6190064cea3cdfcb01f6be0058eaa38', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'c17e1a99cc06173142c8f1dbea36752e24549583', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '9d52f48b9eb688f8c8da57205dc407e1af99e498', 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", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: 'b8980b1732aa9420c8007aca2b41789f006b37ed', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'be2c974f5927033b54addf9708761b54737ca8cb', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'de0b38e43597aacc585bea520b4ab4feaef898d8' }, "Previous")), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage === page ? 'active' : 'default', onClick: () => (this.internalCurrentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '6d4f3053bdaa75f340c158866c959e36cbcbcd2c', icon: "false", state: this.internalCurrentPage === 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 1) }, h("p", { key: '973a48ba6eb9b4690db2f288a32125021f93f067' }, "1")), h("gb-pagination-button-group-base", { key: '625473273799606dd7ebca950e4fe9a88a2bcf2a', icon: "false", state: this.internalCurrentPage === 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 2) }, h("p", { key: '28a2a929e8806d9da9611f6a9583fc65ae7d09ca' }, "2")), h("gb-pagination-button-group-base", { key: 'cdac8729b5024103f41876cd8640389ab05288ae', icon: "false", state: this.internalCurrentPage === 3 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 3) }, h("p", { key: 'e10bfe6e09d066d038f2be1b2e474b029aa3d5ed' }, "3")), this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: 'f990014dc517e9ca72aed337cca44fce9dd5668f', icon: "false" }, h("p", { key: '28832ec9458eec919ed4c615eb81188c879d0c84' }, "...")), this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '6cdbd220e80cb4aa70ee9ae9cab62e67c247466f', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 2) }, h("p", { key: 'ac2f09e5e246b5f218e40032b80c829ef97736f8' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '6578e18f5ee041507b0a87d6b1897bf87af539dd', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 1) }, h("p", { key: '14ecd4b1dfe4f3e3979a6a6f5085e2f7cac39a2b' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '1fd1aa07415e91f975ddbbed42e1fdfd24b9b13e', icon: "false", state: this.internalCurrentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages) }, h("p", { key: '09bdcdf302a0ef678d731c587533aa0fa65e925c' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'e2aa08402842d901ff0a48d748dde4f33543dd7c', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '85d7bf1bf61e8f85b757b76d057af72e3c17f477' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'a32b1468c11464bed054840c1dcb370abe8bdc9a', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '7c385163b1707171312c95ddd6b030919315af85', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '76195076ed2727db0af08acb48071b27e8ab74b9' }, "Previous")), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage === page ? 'active' : 'default', onClick: () => (this.internalCurrentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '64b00364de2cf423b1659de4153d26bfc2eb57d8', icon: "false", state: this.internalCurrentPage === 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 1) }, h("p", { key: '12f7816ba6de938e379be9b11c7cce1ab896b0b8' }, "1")), h("gb-pagination-button-group-base", { key: '6de234635f3b690a24d318d3ec32e395bd330123', icon: "false", state: this.internalCurrentPage === 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 2) }, h("p", { key: '70622b0b4a0e49552eba4a3c291912fd6c2346d4' }, "2")), h("gb-pagination-button-group-base", { key: 'eac19fa82f0b4011621359ac3ffa9eebdd8138f9', icon: "false", state: this.internalCurrentPage === 3 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 3) }, h("p", { key: 'cdec6748168871d27aa8886a892455f2e4f7de47' }, "3")), this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '0cd96f233361cc2e80fb44b45fbf59171c054f55', icon: "false" }, h("p", { key: 'dc1a3dbf3c304e8d2c1297ccfb77f486ddf5e7fe' }, "...")), this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '8f30187ef58efeaa5f2e9dc78ebda77e05ba0a55', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 2) }, h("p", { key: 'e4270dcfb6c431a0c46f613997547576134842fa' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '8d3284461a97398bc832e821d4d31f3c9aa70433', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 1) }, h("p", { key: '8db7e5c6107baa9da7340b80f47614acfad8d6ad' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '4d47e4c028a82fbd473925eeaeec161a9fec005f', icon: "false", state: this.internalCurrentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages) }, h("p", { key: '05f0e1ad208e927c39c4d313b3665a5aa77e9339' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '332089b320f255a65645d06ad1305086e2529702', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '3a1455d44c6ee8a1ed7c52c24c14cd57bd347920' }, "Next"))), h("div", { key: '026b295eb5797192daad1981d17c300f70981725', class: "pagination_entries" }, h("div", { key: '3759ef6f77cec870b84bbd32f7a9687f24aac1a1', class: "entries_text" }, h("p", { key: 'b82812d5ab20f1c78fe3b15b593008ccb90b4c99', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '862e1fb44d347c38972d5d64d614384f4d05fde5', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '690fd061f28a1e6fbddf5ca166aedc002bd8d8fc', 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", onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '28bcdb2cfea23977e9b387f6a3d731c337da6660', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '03cbf506cda148698f96b68000473e073e8a1fed', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '9761f854082e1755d370deb38a6fac32295cbc55' }, "Previous")), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage === page ? 'active' : 'default', onClick: () => (this.internalCurrentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'cff3d17557dfcd0520a1ebb84029b3f76149a1c9', icon: "false", state: this.internalCurrentPage === 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 1) }, h("p", { key: '4f429f94b66c8967ce567f3b44edcf1ffd322778' }, "1")), h("gb-pagination-button-group-base", { key: '8e37fe5453718435396d1588ba9f93eb05e4f67d', icon: "false", state: this.internalCurrentPage === 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 2) }, h("p", { key: '3fc8c5c571500a2b07c6f340ad8b384217fa402c' }, "2")), h("gb-pagination-button-group-base", { key: 'e8033d125d58926cb393bff3b5972260871291b6', icon: "false", state: this.internalCurrentPage === 3 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 3) }, h("p", { key: 'd4571b7300d5804e734ec4d807b6ac909db659e8' }, "3")), this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '4ec2598715d282ec0f71e16257c0fcf6ed005343', icon: "false" }, h("p", { key: '6723891041b37f9d38c5b710d9960f9c6f91fc5a' }, "...")), this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '4dafa935d332c706aa848070fb01467b8d370af6', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 2) }, h("p", { key: '38978c56b0db35ab8d463051c90a4d9f2e98cdba' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'b30d017e036db4999c1c146db7a6af55b643bc10', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 1) }, h("p", { key: 'de9b27a97b3dae71f0a6c06de4dde87bbf3a7b35' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '38e312ecf51c010fb134b1372e17b9c5492a292f', icon: "false", state: this.internalCurrentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages) }, h("p", { key: '90a27e0fc3069dea2f528b81a48a9a7f023d3903' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'ace3212a21985c596a6be610e53a8932ff900363', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'fd647ab215052adccea0f430851ec5c312aeeb54' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '8c09559d770719170edcbf20c63d9ba6b706897e', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'd96179eff61c5200e76c0940d32979e860803c58', class: "page_number_text" }, h("p", { key: 'cd488316970409cadefd3ecbcad25bbb891eba76', class: "page_numbers text-sm-medium" }, "Page ", this.internalCurrentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '7959f2277c11d2f451ed9b88aa8709b501bfa902', 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' && (h(Fragment, null, h("gb-button", { key: '1f88abf9d626165649b9046897920b28e650872f', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '0cd672db6c503fdb7c432e874cddc4434e562705', class: "page_number_text" }, h("p", { key: 'fa6be02e8d9febebad5eb4aa4132a0c8e4268821', class: "page_numbers text-sm-medium" }, "Page ", this.internalCurrentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'a82e49b057b22c6419002e2de891d61f70d9627d', 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' && (h(Fragment, null, h("gb-button", { key: '2c2711edd91f82cc99f086e8d0b1d85cdcb696c3', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'ce419b883255d8dd225861cda18ad060a3412054', class: "page_number_text" }, h("p", { key: '00da6014bfc8470756e19555482d085be677d403', class: "page_numbers text-sm-medium" }, "Page ", this.internalCurrentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'f4e7ad80c81e02272231450bb328a886d365992b', 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' && (h(Fragment, null, h("gb-button", { key: '29dc60cca30187eb911c215dba08dede26652011', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '78e4bead6c5a215a3359c3b59ad3be7991bb6e75', class: "page_number_text" }, h("p", { key: '8ab03ac7020a772ce5f7b758b0c5f4c6593c1f6f', class: "page_numbers text-sm-medium" }, "Page ", this.internalCurrentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'fb0197dacb839e762c2a10f59f7ba877430514e0', 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' && (h(Fragment, null, h("gb-button", { key: '56c0978cb6b1aba795d73ede7c123227e9933a3b', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '7ccddfe4a6bce9aa6472a36568d6a683d18a4c1b', class: "page_number_text" }, h("p", { key: '6a973bd0c48b1ea7b8894cbfe9013c0d2b3357c2', class: "page_numbers text-sm-medium" }, "Page ", this.internalCurrentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '3b6c7ee17be76da3cb5a56ba4f4b82924bd13849', 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' && (h(Fragment, null, h("gb-button", { key: '8ebf0710aaf8d26d6d77b843b38db0b97b354358', size: "sm", hierarchy: "secondary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'ce6c0e4f4336c76ca3c8bc40f8ff37c978513606', class: "page_number_text" }, h("p", { key: 'b3fb85ac12bb314bfdedc709ecdd4564fd97c4d2', class: "page_numbers text-sm-medium" }, "Page ", this.internalCurrentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '2bad122604b872064d40f07e507f6d1428d22727', 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' && (h("div", { key: '1d5a1ae479786600bed8e9fd19da4aa5f7dae2b4', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '0d50db1382b11196ceabff31212865228e7bc83e', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage === page ? 'active' : 'default', onClick: () => (this.internalCurrentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'd577a9d2d3fe0ee32ac7f7b65c8ae231a08fcdde', icon: "false", state: this.internalCurrentPage === 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 1) }, h("p", { key: '201fcef822eab41a33ab7c0acd0bd2696cf4e1d1' }, "1")), h("gb-pagination-button-group-base", { key: '2ee1fa2b5246340aad9e8ef21f33fcdc262c0805', icon: "false", state: this.internalCurrentPage === 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 2) }, h("p", { key: '7072b337d7fd32c22553be4f4a814177d478919a' }, "2")), h("gb-pagination-button-group-base", { key: '6eccdc77c66714bec2df4f42a4f8c2d120f05f53', icon: "false", state: this.internalCurrentPage === 3 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 3) }, h("p", { key: 'bb2248ce893e8b9c68529c51e1a634b7d9befbdd' }, "3")), this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '5c778e70ab3b07fee8a660f20d72e6caf9366241', icon: "false" }, h("p", { key: '1698e01033183b58fa3d68f228aee89c397f0bbd' }, "...")), this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '4276bc82c4b984d8caa15dc3a56c8c4c8ee3b9fb', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 2) }, h("p", { key: 'd297ba44254f4a46696bbc31318a412875b226a8' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'ec8925be1e8084caab15346dcb83230a3c71f57d', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 1) }, h("p", { key: '3ea5513189f2a1cc00af1818ee38519989da8948' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '1caff6c7ea66f53bac1e828e9c70c5ef326ea7c3', icon: "false", state: this.internalCurrentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages) }, h("p", { key: '5831673655e25b569b562f0fbcd28e6905de5a9c' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'bbea376e2a5dec50e9ea0fdb64a785589de006bd', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'mobile' && (h("div", { key: 'b2c070028d18e0b5b2e42ccf932d56a0337e1729', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'e42cc12749c05e66137b25c1e39c774d35adecfc', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage === page ? 'active' : 'default', onClick: () => (this.internalCurrentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'e1448c4dde71c71d13d87ad8d47045330d33f768', icon: "false", state: this.internalCurrentPage === 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 1) }, h("p", { key: 'edca938aac6e6b6bc7dd0b4306e5987d327eecb8' }, "1")), h("gb-pagination-button-group-base", { key: '0ea200142f6ad8a5b4e0748d3f49d78c246d31bb', icon: "false", state: this.internalCurrentPage === 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 2) }, h("p", { key: 'dffd127a75026a1a45b81319016e34dc57bd1822' }, "2")), h("gb-pagination-button-group-base", { key: '86fa6b0f95fb71f4abc5f75aa5f3f55257256a70', icon: "false", state: this.internalCurrentPage === 3 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 3) }, h("p", { key: '820deafe9947c03d2ec93caa2009110bf48b1d87' }, "3")), this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '792575f650b9f0a20645e4312c78dcd034db1361', icon: "false" }, h("p", { key: 'c6342333f6fc7f5ee2d6e95786cb112b4c090b11' }, "...")), this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '9ae16efb4b714365eb54cbeb312b8ceed8596300', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 2) }, h("p", { key: '3f666d724951080f3b9dd9fb85c76c9b391430f2' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '0b2e3f3a43b147820056b03b425b70c3e976602e', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 1) }, h("p", { key: 'fd93dfc04082ecb03e034b098852903a165d0c16' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '4c1df007c65439fe2590ae12feff9ff25d172046', icon: "false", state: this.internalCurrentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages) }, h("p", { key: '7652c12087d18a40f00fd799c405b36f8964635b' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '6bc038d41fd0bc17d72756ddea42ee29c76ecb92', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() }))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'mobile' && (h("div", { key: 'b6222cd0b4d8aa2095cb1fb25e1ca99b55190583', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '16bb7db2a8100b277b365c9f739b7dc28d191bd9', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage === page ? 'active' : 'default', onClick: () => (this.internalCurrentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'fa44610c31a7c2665a828d46fe0ed06acbba0046', icon: "false", state: this.internalCurrentPage === 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 1) }, h("p", { key: '98ef9f976248db498ed059adc4135847e380dd29' }, "1")), h("gb-pagination-button-group-base", { key: 'c29aadb3769181829e1506ce9bbe23996b871db4', icon: "false", state: this.internalCurrentPage === 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 2) }, h("p", { key: 'b886d04537e1a56a547d13f603a1f005dbaf3a56' }, "2")), h("gb-pagination-button-group-base", { key: 'b037a282a4f8f66fa43123035b1f3491ff996603', icon: "false", state: this.internalCurrentPage === 3 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = 3) }, h("p", { key: 'bf3c0faca7a32127ced7dfacb08eece88dd5ab5d' }, "3")), this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > 3 && this.internalCurrentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: 'f70a389ebaca90975df80eb01d72dfaa6fbc18ec', icon: "false" }, h("p", { key: '5922cae7953b338e54ecc667aefc7c6ec9c0a434' }, "...")), this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.internalCurrentPage > this.internalTotalPages / 2 && this.internalCurrentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.internalCurrentPage))) : null, h("gb-pagination-button-group-base", { key: '9e2db63ecdf3330d640aa87bde3e622fbc9b601b', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 2) }, h("p", { key: '78423f75e61837e6cb1030aae6e894a2dd392053' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'cc0a20e7291c85d4b261876de1b4d39ea92a8756', icon: "false", state: this.internalCurrentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages - 1) }, h("p", { key: '6e85c1d27f8a5d24cf88f4630b8ff00e89754bd2' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '97e1a7dd5d4aef6da4ebfee2a343b365f3f66183', icon: "false", state: this.internalCurrentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.internalCurrentPage = this.internalTotalPages) }, h("p", { key: '7a2a9a431d3c7a28dab19de8e06d0a1af8c481ae' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '3b368e8b15ae96b4a57a5af00c194db7d23ac823', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
     }
+    static get watchers() { return {
+        "currentPage": ["onCurrentPageChange"],
+        "totalPages": ["onTotalPageNumberChange"]
+    }; }
     static get style() { return gbPaginationCss; }
 }, [1, "gb-pagination", {
         "type": [1],
@@ -66,7 +98,14 @@ const GbPagination$1 = /*@__PURE__*/ proxyCustomElement(class GbPagination exten
         "totalPages": [1026, "total-pages"],
         "entries": [1040],
         "selectedPageSize": [32],
-        "defaultSelected": [32]
+        "defaultSelected": [32],
+        "pages": [32],
+        "width": [32],
+        "internalCurrentPage": [32],
+        "internalTotalPages": [32]
+    }, undefined, {
+        "currentPage": ["onCurrentPageChange"],
+        "totalPages": ["onTotalPageNumberChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {