globuswebcomponents 1.8.6 → 1.8.8

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-xWT4dQY_.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-DVZ4JdmP.js';
-import { d as defineCustomElement$d } from './p-4uaILzaK.js';
-import { d as defineCustomElement$c } from './p-Bswh0z3A.js';
-import { d as defineCustomElement$b } from './p-B3h_qGUd.js';
-import { d as defineCustomElement$a } from './p-D5-W0kkN.js';
-import { d as defineCustomElement$9 } from './p-Clr70mrb.js';
-import { d as defineCustomElement$8 } from './p-1I0B_p6v.js';
-import { d as defineCustomElement$7 } from './p-Ugo9JARM.js';
-import { d as defineCustomElement$6 } from './p-Dqgom5e9.js';
-import { d as defineCustomElement$5 } from './p-DGvGQrCn.js';
-import { d as defineCustomElement$4 } from './p-Bbmhg5GU.js';
-import { d as defineCustomElement$3 } from './p-KhShaHQL.js';
-import { d as defineCustomElement$2 } from './p-dF-bmDhQ.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}";
 
@@ -30,32 +30,53 @@ const GbPagination$1 = /*@__PURE__*/ proxyCustomElement(class GbPagination exten
         this.entries = [10, 20, 50, 80, 100];
         this.selectedPageSize = 10;
         this.pages = [];
+        this.width = window.innerWidth;
+        this.internalTotalPages = 1;
+        this.handleResize = () => {
+            this.width = window.innerWidth;
+            this.updatePaginationSize();
+        };
     }
-    connectedCallback() {
-        // console.log(this.pages)
+    updatePaginationSize() {
+        this.breakpoint = this.width < 730 ? 'mobile' : 'desktop';
     }
     onPreviousButtonClicked() {
-        if (this.currentPage === this.totalPages || this.currentPage > 1) {
-            this.currentPage = this.currentPage - 1;
+        if (this.totalPages > 1) {
+            if (this.currentPage === this.totalPages || this.currentPage > 1) {
+                this.currentPage = this.currentPage - 1;
+                console.log(this.currentPage);
+            }
+            this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
         }
-        this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
     }
     onNextButtonClicked() {
-        if (this.currentPage === 1 || this.currentPage <= this.totalPages - 1) {
-            this.currentPage = this.currentPage + 1;
+        if (this.totalPages > 1) {
+            if (this.currentPage === 1 || this.currentPage <= this.totalPages - 1) {
+                this.currentPage = this.currentPage + 1;
+                console.log(this.currentPage);
+            }
+            this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
         }
-        this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
     }
     componentWillLoad() {
         if (this.totalPages <= 5) {
-            // Show all pages if totalPages <= 5
+            // Show all pages if internalTotalPages <= 5
             for (let i = 1; i <= this.totalPages; i++) {
                 this.pages.push(i);
             }
         }
+        // setTimeout(() => {
+        //   this.totalPages = 5;
+        // }, 2000);
+        this.updatePaginationSize(); // Set initial variant
+        window.addEventListener('resize', this.handleResize);
         this.defaultSelected = [this.selectedPageSize];
         this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
     }
+    onTotalPagesChange(newValue, oldValue) {
+        console.log('totalPages changed from', oldValue, 'to', newValue);
+        this.totalPages = newValue;
+    }
     handlePageSizeSelect(item) {
         this.selectedPageSize = item.detail;
         this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
@@ -65,22 +86,29 @@ const GbPagination$1 = /*@__PURE__*/ proxyCustomElement(class GbPagination exten
         this.pageItemSelected.emit({ pageSize: this.selectedPageSize, pageNumber: this.currentPage });
     }
     render() {
-        return (h("div", { key: '019c75985107f7528b594570d55293f4459dd350', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '70e7f13a80ec6520900ca4ee4ac33546b2aa8994', 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: '22a9dda335cfb7a7782f1f95e15859f2f3a16f4c' }, "Previous")), h("div", { key: '6eab069287da9c097aaa9488b249a9c619d4e444', class: "pagination_numbers" }, this.totalPages <= 5 && (h(Fragment, null, this.totalPages <= 5 &&
-            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: '83aee104a013375e4947e782bf6e80b54964e051', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: 'a6c5ff666cc729ba5b1fee81af6f2d51a481f015', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'c192f8b8d457c38b80bf119e52136df2d683ff2b', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '6c6c61d229ee396afeec49250a89598924053ceb', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'ca0e5b9646b1f3e47086350b5e027eb5db468fda', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '2b7d50ed7f1922abd268d157e2b198a2b8310e9f', 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: '20ad93ae44a6785291e463373505b6e76a0ee448', shape: this.shape }, h("p", { key: 'd61766eda8f4676f88953502072f60ebe846dc97', 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: 'fa783ecbe6d2b5b683662c9965c83f5f7622e90a', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 2) }, h("p", { key: '799f61190864980755e9309d6e9cb6f1f790a7cf', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '75eab11ca6bba5645c124931eecc6d85afccb7b1', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 1) }, h("p", { key: 'd9dea4b31156911bdbf2c486b274dcb9d40ece56', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'f45a61b0d8bdca6e90c76ffd03c1c1f1dd473838', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages) }, h("p", { key: 'b421dfed6419e35909a332e8beee85f0a9d75279', slot: "page_number" }, this.totalPages))))), h("gb-button", { key: 'a30757b87b8c94e35b53539ebca55f907fe4aedc', 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: '89dfe588bee27941d5e2751535247e0b3e3c768f' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'cd4f70ba04ba17129ad3dde9abff887fabe50649', 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: '60885bfc4de42a633c2783fbb442c6b4617d2d6a' }, "Previous")), h("div", { key: '4fc89faa11fcac10082f9a9155efc6b5564e754c', class: "pagination_numbers" }, this.totalPages <= 5 && (h(Fragment, null, this.totalPages <= 5 &&
-            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'f637fd0dbb5248a72fd31f6419ead14c4608d139', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '4ac6863c911c7e1eceb1b375aa4286f7a1d404a4', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'c3beea03801f87ae62a91ef61def83e92e8a695e', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: 'ae347e8f36b60abeaa547d96961423ce0ef7756c', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'd09ea6e67a19b4f4b50ad1680cc87ec97223cd93', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'c3c2bf1c0a4cd8a36325cec3b7f4268656ff3e88', 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: '467d06c984441df19911f820b35316d3d5735b6c', shape: this.shape }, h("p", { key: 'cb66aefc03f5c467ff6cd0c4bc5ec28c93f58fb2', 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: '03e12bce3949676b7e5bba5310d0f20e425040ef', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 2) }, h("p", { key: '8656fb4876abb0de18baf90b151fc98f7dcae7b6', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '5a942f1f8caa3bf81421f5862bcf1018828cb541', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 1) }, h("p", { key: '474f3b0716188f6601ba59eeb051ab54f74aca1b', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '5dfbd53fdf500db03fcc97ffc3bf75b56fab835a', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages) }, h("p", { key: '41f12996f60bdf5854315b694f57885ed1165c7b', slot: "page_number" }, this.totalPages))))), h("gb-button", { key: 'da00a9e987f8b8e6e1f3bdbba990f96723c851fc', 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: 'cb629d590cb61fdc16dcfd9d35fcb50162fbd701' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'c30bc51b3a53e95e1dc087c4b31f7901a8d6cafd', class: "pagination_entries" }, h("div", { key: 'e41e74218ba5807753c4f518a5aff1b30f22190e', class: "entries_text" }, h("p", { key: '5cebb9783733d1fc980e5dc4bdfaeff85edafaac', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '11877d106e8ac14fc8256078f79f870f01ffda39', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '1c6e1e0ce2d49b68bfc10be34d23c5fe919cb210', 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: '595ab09211d5c95b36819fc52b442690137f7e53', class: "pagination_numbers" }, this.totalPages <= 5 &&
-            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: '6c2158a57068645cbcb422884117b00b60e3e809', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: 'cb36a3eda7cfec7ecdf25fdfaa7b6f4d206843c0', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '99c8044509ecab895db1725659889587716c8296', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '873f564415d8a3820380f3540a9badac6df1d802', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '2fb8e5046afa8788857a4cd83f41927c7e82ce90', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '2b2664a0ce86be35d6c72b34c8292601fe0540fe', 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: '8b7b8110e6b01acdb034b3d9880d784f1b033120', shape: this.shape, state: "default" }, h("p", { key: 'a5ba73c9308b059bf6d3b6ccdf5bc82187813e16', 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: 'ed43202ac8fd74619d9c46a20cd745f02ceefb8a', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 2) }, h("p", { key: '7b660abdac188ebc014d49587800aadbfd75cc3e', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'c06cec74f0a56243d5961088d662a50d707cde04', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 1) }, h("p", { key: 'f56a099f7e9384e99f4c39f2997325b99bb7c9da', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '851abdeff628163a474625efa84095c7c8a7179a', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages) }, h("p", { key: '4d0b10240bf83996c00c08f5e27410f2ff1fec20', slot: "page_number" }, this.totalPages))))), h("div", { key: '54f0d6cca59e0052e253b47a68480c69c1f1fb0b', class: "pagination_btns" }, h("gb-button", { key: 'e093d7375636852709db2dbdbeec7eabe84c2235', 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: 'f6702c28ffb79c0aebf45af6063a750737968a66', 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: '7a6d76843e55d253068f8427ef50ee3c056584d2', class: "pagination_entries" }, h("div", { key: '90dbb91981ff47e1f7bc5a3ac981bcc49a6cac46', class: "entries_text" }, h("p", { key: 'c79d3d0493ff79b2698ee463de5e009574a59576', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'cb57574609ef35d460760568c31b5f8879db04cd', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'a270ad99f8d3ffc0e26020a2aa8d17b6afca056d', 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: '869a8b9c166e2790ee8cb0a0513e68c9ced82e6a', class: "page_number_text" }, h("p", { key: 'e2193e861f9efab08c0a997fe54bd4984da5de8f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '34825c8624af5b55d176a06d03d8d7923efdadde', class: "pagination_btns" }, h("gb-button", { key: '6ae50cec13df38c30feaa832e1392f454cfc5237', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '038dca176fa5510f31ae6bd8194950da1e45c50c' }, "Previous")), h("gb-button", { key: '6995b28773795c754472b7af9a847292123eed61', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'b912d73dfb968805fc5d1882fe06a0a48603194b' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '27ab9e0b618b8daa6a7c3c9678c68aa2b3be2538', class: "pagination_btns" }, h("gb-button", { key: '737ef2907f2939f413b01a4cb290afca0a6be359', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '6c903fc202cdf1c38c0e927b4cff89556bc7900a' }, "Previous")), h("gb-button", { key: '01d062c97e0dd261ddb450bbc5708824768ecb44', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '597f2e9c82b27531a74f90714f1ee40e2b0409bf' }, "Next"))), h("div", { key: '337e7b5c54f9acf88bc7334d504bb5c955df99cc', class: "page_number_text" }, h("p", { key: '92c0a255ef0a4b07b5cfcfdb9d23abba638ae493', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: '25ef757fdec54c82cd5024d498f2ebbd3c6dd4c7', class: "pagination_entries" }, h("div", { key: 'baf042626bc838cd32035a2a86e28e47ea97463b', class: "entries_text" }, h("p", { key: 'f9c72636a5fba51a02bfbce817a483c908c4362d', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '36c814668e695d167b05cbddb1dbe6507b1cf26e', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'a84c39aaf41f38eccc3f5d5b9456b94dc390e360', 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: 'a79141cfb1c5977af1e4d29eec705dd7d7f580b8', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'c3b9cda3e43fc9cd1d92663740c343570d487ecd' }, "Previous")), h("div", { key: 'a1fa6dc7eb23ca04d9ff3432bdcfe24c27ce561b', class: "page_number_text" }, h("p", { key: '723cbd2decb39852d0ec6a53382c93ec7ede12ed', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '60f1f7bbba3c4ced1e29777b11b01e1d44b92931', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '71016513c6c6f409a152d68cbb808a5293c5c577' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'd696a15c800d2910c33ae07f076535d03fabbc9c', class: "pagination_entries" }, h("div", { key: '0ef09ba814c5460bbd90542eca16342e26c69750', class: "entries_text" }, h("p", { key: '8ea35a3fcd1049c7f93e865dbc75d25e72660b3e', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '9b9d27515839c5e93ac5e62d6a9aa11a37fd4dc9', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '905c6fadea1966c355e550fe286b483fb59360de', 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: 'ddfec3aff870aab042bbea4ba44526d2bcce45ae', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'dbf08ea191593f1eb8e691b621badd136b62a53d', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '03204c75586e3fb096fb7a577a114b0e30d6b832' }, "Previous")), this.totalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '4e7a13eb5fffdfb5f6c1aa90e2217b096fe304cc', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'e254785d1496730d7b9881fc76d6496ec2af96a3' }, "1")), h("gb-pagination-button-group-base", { key: '9f89cd94bef3952b700a6dfe038eb4ae61aa5b4a', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '74d162147701dd1a996877bf9547a889e8c01259' }, "2")), h("gb-pagination-button-group-base", { key: '4b260a0e684d3ee3e2149b3d42dab2558754e89d', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '6c90c49f8352b0e2ccd066c6358b44a1a1053f60' }, "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: 'e5bf5197115b52852fb1dbe3d51428806a8ae615', icon: "false" }, h("p", { key: 'c6b49aed3e70e71e7beb1c45ce461af8cf109dce' }, "...")), 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: 'f1208d1c5b6095f77da6fd872978d1b6557ddad9', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: 'a8876f1dec3aba661abf0026750213c2db9f1b84' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: 'a671840924f3f3b562e863c410781c8da0ed09c6', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: 'fa4c343810700e110aad6540c69ffd5c97492e2d' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '6d98409ba001289aedc9a97f17f789fad807a9ae', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: 'bd0c2649d480b5591b20c89d395c6f147ad3e4a4' }, this.totalPages)))), h("gb-pagination-button-group-base", { key: '416a1b336c373f312b898f34db972ac8a921c2ee', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'b894379cfb41b7a5b0e2b90633f2e37fba0697cd' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'd30cf5741c49408a3a66a814d9bb846253d67f7b', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'd115d1e4ef34daf2dd4b447a816dc1c2c96b9766', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '0e3cfcb877821fe2e9ad018800ce3efaf986aaa2' }, "Previous")), this.totalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '9ca71d786aefb121e585dfa7239de084bd11fa52', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '0ec41f4edd4574423c5f5311dba74cc84ef71710' }, "1")), h("gb-pagination-button-group-base", { key: 'caeb83ef102d146f7d6f87afc8d7a23cc2d534fb', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '7d7244c111146d687622e0e6dbbfe510c15f11a7' }, "2")), h("gb-pagination-button-group-base", { key: '153ce749f0584266d538d87206339dfc03ab8562', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'cf64381d3f1a70a49b1bf89d3acbc68037421b18' }, "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: 'adab6574c2a87d88b34fbd42417c75976ca75f83', icon: "false" }, h("p", { key: '0f7bafb23270d728983779ebfe7e2bdde4366e84' }, "...")), 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: '0af3a07cd549332a1506ec4432805fcea1f74e68', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '91febaecfc7c9159ff311dca6ff7f23ac3fe1aeb' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: 'eb5cbcc2fb7d4c032fc7042c0ec99111b00e5822', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '21de2ab826d3b3048fc97d1f16f80dc790516338' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'e738201f3a4bfb1a1582fa43aceda17868de2f3c', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '9232479947f4fcb56ded2bf422c3f0007187af47' }, this.totalPages)))), h("gb-pagination-button-group-base", { key: '4c7ef550caf7f141b43d44105ca32426e9f0c269', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '71f6f280addba7a64b9f86aec81bb55d1e7cabb1' }, "Next"))), h("div", { key: '52dc8920a99b51b69e06a96bf1c595f5a59e9fe5', class: "pagination_entries" }, h("div", { key: 'ec8e910e2f3b0cae112475d3578202d41cd6f147', class: "entries_text" }, h("p", { key: 'ef061efce734eff1cd0d70e4783f222f77aa5b73', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '84d65a65de42e64aea56c144d08e82137b35cc13', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '4478253e04df8c2b3cf5e78bc8750c85c379478b', 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: 'c62787ba23b4dfa162f5403c0c8dcd2081d33aeb', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '4cc527e6b5f2f027a8d3b387c8be82ab523132ba', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '6f3bc7cddb456045c9b56a2cd963832467bb7942' }, "Previous")), this.totalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'fa547125e2b9da97a9abd667400b1c4fa8f589bf', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '70d674564fdcd4314bccbe66592b53bea142cd62' }, "1")), h("gb-pagination-button-group-base", { key: 'ff2c8c0aaf7f13e4fd72170ee320016ddb068e48', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'c0d29af2e66b77b67256b507b52f55bc7348e1de' }, "2")), h("gb-pagination-button-group-base", { key: '169fe15d9fafb04989323c284b5815b868fc3bc1', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'fc90a7daac5fc10c4653223b439aad4e6604973d' }, "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: '60d8d50c84dffaafb26e6918afd44e07f9dccc12', icon: "false" }, h("p", { key: '02bddfd0b091eafc9a0a0f5de996f8f259dfdba1' }, "...")), 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: '1f0dfa458fcaa5076c52c3235a22ab690d7c1607', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '0b57ccd993d7d4bf808701bf556a32e444ec4580' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: '2f1e40a8a9faed531442de732e50e46e0384ee91', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '87e221f6b08e07d64bb3aac3d7a8d82fb25eb888' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'eb46a1f769741937cf0c8066364614c774c10a2d', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '455db40b9636a63eea29264ddb5eaeb01b6d6c6a' }, this.totalPages)))), h("gb-pagination-button-group-base", { key: 'ec2c3d735f864b6060ff376bd4a1c5da8b391ab6', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '9a7ccc4c614b4cbbc040c10cfcce408547a71124' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '7a12662319c816bfd136c4fe1554c841d2948e86', 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: '1abec9e5b7ab2b08701fb1fe59c4be35c83c0f80', class: "page_number_text" }, h("p", { key: 'f7815434afedeb5e17a1e1c711411128d1ff4b4d', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '5aa1e35319670b38287b6bcbd3848940d99559af', 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: 'c2e380b0de19bfa2a9f091ee7673f8fed949397a', 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: '5b0e10a7af2cb23590ba51d5f73a6a8795b53b6e', class: "page_number_text" }, h("p", { key: '802352fd732c15b5291a1cff8e0593288a253bd4', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '15ab57bab2710e54e133034a6aad60d042ab13d3', 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: '75d7525f3e256dabc1c2c94c360773ca420d7f5b', 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: '4dc6b98e48e69a34092eb8291963ee87c1c92a5a', class: "page_number_text" }, h("p", { key: 'd78c13bc55a830f7cc88963e6704a5fd89553f71', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '77e90f7daa12f43aece78757725434b2cd4809ef', 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: '7b2c7d71d799584209b6971e0cae7cf27e068d2f', 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: 'e5c04b5b6365f0fb3d290fc5d943ef965a157c06', class: "page_number_text" }, h("p", { key: 'a172b731ee5ed35faaabc02e45d45f7c7214372f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'fa0962e21b0e276d29deb059f4de174b071ff67a', 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: 'c4b28d686f3ff8d7a93f557bdadd8679b86b2829', 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: '0052ea7e82de2077235db8f8849dd2badb901b8b', class: "page_number_text" }, h("p", { key: 'b0006959f6286fe5d28250216e8c3455f44238e7', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '1d15bf1c40810b88ab4d5888e5fbe005329cf5e9', 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: '1f93668bec78cbbe4a9e16b38a54d22d757cedc7', 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: 'c8acdba70391ec498c87ede858e283a77fdef0e0', class: "page_number_text" }, h("p", { key: 'a8054c534f6cf1f5453d9fe20a002dd26f397a8a', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'e708e11453c05adf884e27ce2acfcddc54ae62e7', 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: '84243b5eb1911991ed85896e10cf3f65ce136da1', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '84b2e0ac8c6cae3cdcf79e121cce4e40a7f13786', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '2c037a984f8dcf1fa9acf81f6ad77f270577dd95', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '52c46e0c3911b9e4a87b255360056c793c923d32', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'd7c6c5500adae787367600e3995c324c996d96cd' }, "1"))), h("gb-pagination-button-group-base", { key: 'd7a4ff9949349e6871c81ccc18b5825acad045da', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '4f915bd040a89a593ddc669b4203ae292e4013cd' }, "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: '8abbcefb375b6adbe0ce1083d2c85225004196c4', icon: "false" }, h("p", { key: '18cdc37145c5b3f8d77782bcc4a40d6db511925d' }, "...")), 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: 'f84978ae27bc008d7dc807cb7a74aa28c396a715', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '2b64f90dcf1e17149fa53be583952a47e31b3c4a' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'd9bad0c8fe316d2d3cd3d4d840ea81b307a2503a', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '422931982333524eb4ecb420de87aa32f6bb0090' }, this.totalPages)), h("gb-pagination-button-group-base", { key: '92dce4f205a52594f7a0f8bd882afdc35ea6ab9e', 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: 'd688b6e8514d3603ed84638ab7e5f78da2912c07', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '9f243e611b29d828f8266b8fb59ae392f41eb7da', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: 'bdb83a158621bbf3f2794547b639a4f82f8f2119', class: "btn_group" }, h("gb-pagination-button-group-base", { key: '0ace48238cbc59b38f4e4140190a2166a42e94f6', icon: "false", state: "active" }, h("p", { key: 'd21a0d94a8020583efd9dce4e3837bd2d75bf35a' }, "1"))), h("gb-pagination-button-group-base", { key: '114ad25665882bb42187c14e5cf8bf804e399e6a', icon: "false" }, h("p", { key: 'ea93877dab3424e75fb9b93ecb49b76baaf8130b' }, "2")), h("gb-pagination-button-group-base", { key: '2731a879d420bb1c1c0f5dac54ad57fd345c6120', icon: "false" }, h("p", { key: '994a9e8faed6513adc26e162d08f30ec6f99f002' }, "...")), h("gb-pagination-button-group-base", { key: 'f87bccc42b31eaff47eb4c8c99f652bc1c5f7fa4', icon: "false" }, h("p", { key: 'e9118ab248603fe7117b6b4725444f361289e4df' }, "9")), h("gb-pagination-button-group-base", { key: '90603b750fd4b284aaf575add4c819952ea98852', icon: "false" }, h("p", { key: '37843a201b5cc2d478a77ae5134e20cbcbc5716d' }, "10")), h("gb-pagination-button-group-base", { key: '81c1fc99959f2bdbdca341c4bbcc37d02a0d134f', 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: '95d095c7974884ea25431714c32e4d599743d0a7', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '0e71dc58c4b7fe01c757417de4b80b506ace836b', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("div", { key: '5694b544a46594aab2c6ff8ec8385a84b3d35a5b', class: "btn_group" }, h("gb-pagination-button-group-base", { key: 'fbb405ad38f669531d4f6faf394f253f4ea63f75', icon: "false", state: "active" }, h("p", { key: '7e14b7c0126968e13bab39fdd03c07cd880a8d28' }, "1"))), h("gb-pagination-button-group-base", { key: '87ecf251dac8a981d05c355780abc6fe7c806670', icon: "false" }, h("p", { key: '8f6691b2b844a17ed99c5af46270ac90c14d2da3' }, "2")), h("gb-pagination-button-group-base", { key: '946572174e5805a3460fb4c64908761cf24d42a8', icon: "false" }, h("p", { key: 'cf84f4b8ee19e8fde1763f5c84ad7e855ada683f' }, "...")), h("gb-pagination-button-group-base", { key: '119995fbe8e417be2f7eb5ad664c487ca9dc32c9', icon: "false" }, h("p", { key: 'cf22eba8ad4094a5eaef426e5f18e99a442ba3d6' }, "9")), h("gb-pagination-button-group-base", { key: '2707b477f67ac66dcb4a846c6ca34e06472a3f6c', icon: "false" }, h("p", { key: '99ad9b256d738a45ce8fe703232ee2177f52857b' }, "10")), h("gb-pagination-button-group-base", { key: '17dfcd66183bb7b518c4b5aa4e7b2eee6335372c', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
+        return (h("div", { key: '788452dc94218f6c68de04eacab7ae67f56661b7', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '9ca95f35cb2b4522899e4c988525710cb348e933', 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: '6be37c9edb36dba65933ba2bbccf0e4edbd75275' }, "Previous")), h("div", { key: '6b705a380ade7b239427b2a5652821e64b4bd878', class: "pagination_numbers" }, this.totalPages <= 5 && (h(Fragment, null, this.totalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'd81b5c3339e0ba926fb28d7db51f6fd273f07982', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '47c20c25777db4c24524e23af28802e79de420fa', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'bf1feb4a5547427e2e9eca9c39b17ca456065007', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '8cc6aa9d3af97e3f4ebf4d16718c50c84bf6b4b7', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '9860d0de087bfd365f6d318e6bc11680cf185942', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '14fa81058f0bfe8f93cebb4c4e369c8aa2ab2b77', 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: 'bed354cf3dd10de9c151633e44744c62b0a46348', shape: this.shape }, h("p", { key: '0d7a4bdc4b7ce4b81d614b46fc11fb87cf2c8ce8', 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: 'ca01be9dbe32a0ecfacee46b8771642b98361ea5', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 2) }, h("p", { key: 'e35122475cd0477f9db4f8fe0b25e5770c266432', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '5fe9eca1c7e846902b29b5f3aab8b6048885ef60', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 1) }, h("p", { key: 'd5f04efa7a38dcfa960935d554383c2a9bd083eb', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'fc758fbeb753559e3242ac73000bc72c85e56d1d', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages) }, h("p", { key: 'f183c29988fc8730c0cb3229006272a4fc285093', slot: "page_number" }, this.totalPages))))), h("gb-button", { key: '173a5492cb0b72ad70d038d8987da67c261d932e', 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: '16e3f88d6633080b7a0b137733b3e61e7122282d' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '0f510f32805ee6689ed485627823d50f10e767a0', 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: '039c47e22ea26f7dcec404aa33ce7c084ae43cca' }, "Previous")), h("div", { key: 'de50c112afa5a9de810d7a3a8cfb12b77e6ade35', class: "pagination_numbers" }, this.totalPages <= 5 && (h(Fragment, null, this.totalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: '0299f289a5b30ec85d01df7d0f4518f62b3a10dd', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '26508f9d1b7e43262b84bad2b1e46d1d13f43c80', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '409c6025d9dfbd32cf7c9e577857343feb600011', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '4da7d2efe3e1e7d3f08f986e131cb22866253349', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '438569da426b941e3c00c046336cb59b0c5c67ad', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'e36869f0a0c429c4a32253e09ceccffa4ae3621c', 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: '0423e2e4548505b4daa95b7734a06d3c614d566e', shape: this.shape }, h("p", { key: '72472af8ccecfa6ae73059976de282fbe8d166ce', 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: '20541b7ff226d201966822c2f04954495b37bdba', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 2) }, h("p", { key: '43bbafeb23459922e62abae744534a04c2dfaa07', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: 'e5b976e79a6ae1d56fde8bac62c5378ecf96112d', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 1) }, h("p", { key: '90c1bc4fd4dd7d0655608e75d50cc6b302da680d', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: 'dd59655dc1c7fafa3ceb85c5c6c33efdc94cf2af', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages) }, h("p", { key: '7bc43de8fb5d7d38e2dc6e911832272cb6cb8e85', slot: "page_number" }, this.totalPages))))), h("gb-button", { key: 'fe6281d8d348144588ba39e347c359530a079b17', 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: 'a9b8beb8602c1aa2efbb6f83d8381e15e92a0a98' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'be1395e58b9110ef8ee23ecd94417ab6b215fdca', class: "pagination_entries" }, h("div", { key: 'a21eabbae274f26d412f60041faeb9d7615c0d1d', class: "entries_text" }, h("p", { key: '16bb089c86aa3b029df453f048a210b2955ef334', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '4ab1cae6f5bc51173459534c0b4f9e07f36aa36b', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '17c490744fa5cc9d2cf6fa739e5c307587992e3b', 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: '227df97ae057effec79cbdc0f81bde8b2e061206', class: "pagination_numbers" }, this.totalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'b9e721de78ca772db07c9b210c128f122ebd47df', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '0823ae0bb382cf55a4076cf7f2acd2aa582b020a', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'b6399c7622dffa74dbd72a3c416f52936a2d99b7', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: 'bfd8ba3a9100f106da87b642f50b9c6effce6bee', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'e7c2228b1557a38cfd5e0fdd421df62a1c3a4776', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '27894bde42f8422002eac7d3744bc0b779690f10', 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: '2139fa1b064d68dd70d4d93193b20903bd4229d3', shape: this.shape, state: "default" }, h("p", { key: '0f1de2a64d6c3778a29f2ce1112845232a29266f', 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: '1715979c20b97c3061cebd4a10c40fff0977bd48', shape: this.shape, state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 2) }, h("p", { key: '21c74eecec4e0941eb3b1f12542e4aa713cb77b9', slot: "page_number" }, this.totalPages - 2)), h("gb-pagination-number-base", { key: '6def7f39e44fa3294cca2ba4acc21c1efb7d06d1', shape: this.shape, state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages - 1) }, h("p", { key: 'ade952928a96dfcf736a2dcb89b06b55506c93af', slot: "page_number" }, this.totalPages - 1)), h("gb-pagination-number-base", { key: '643db07901109043cb0709a2e4949b6d66f37b71', shape: this.shape, state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.totalPages) }, h("p", { key: '9506f9e8ef93d189cba2ad04437fe9b387fe00be', slot: "page_number" }, this.totalPages))))), h("div", { key: '4d04d9731dd49111098d21d884fd5e05eb2a9588', class: "pagination_btns" }, h("gb-button", { key: '2c153372063efd9adc42e6088f58ba205619b8ae', 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: '2474826446f57f7c3ade8e284ff6c6bf9db42256', 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: '2a72b490816d97725e458e3455770e869f0cbb06', class: "pagination_entries" }, h("div", { key: '5aeb7d16ad1a9c02335eea36a8a7f7cbe5ee5def', class: "entries_text" }, h("p", { key: '9365f037610ffde557000aa948bf0f6296758e12', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '3540e366aa3ed9a9021d2e4af1e830c83a7b8f9c', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'f76d8d0b2181afe31c8ce32ab85d2189d739cb62', 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: '75af4a209bcd7eefd00a969f8206fcf8b95220ea', class: "page_number_text" }, h("p", { key: '89a42c640196e5bcf2219320e9467fbe56b28821', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: 'b3eda24ea7dfb583d2af5866ed7d96bd2ad8eea5', class: "pagination_btns" }, h("gb-button", { key: '1751b87b5405a02035af7d13baa3ce546a1072bb', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'c8ddb8b6de8367b05646fce4f8121d4d9bfc342c' }, "Previous")), h("gb-button", { key: '39a1e3f5c8d31c053d409424110df9d4259674b5', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'c28a06aa839649147c08b61a8b51c9cd815933b1' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '33b6a741ff9cb62f857317792cbd5a7f9fc70ffe', class: "pagination_btns" }, h("gb-button", { key: 'd512fd8a40f5905bd45217fa673885b2dd4cbe96', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'bd106f1aa1aa840c06e112ec18f905bd1bc71765' }, "Previous")), h("gb-button", { key: 'e7c52cd68c13bd79c39a037723548f6bfe4f16f5', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '03f2695347a633c768214bd83768e638552169d4' }, "Next"))), h("div", { key: 'ee87c6e29c6085feb5240d5b3b8c2579c9b1a47a', class: "page_number_text" }, h("p", { key: '389da87b3806d36717a4e748ae5304512ca8793f', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("div", { key: 'a0770213befc41f8bca84ee8503bbeb2d7b9c7f6', class: "pagination_entries" }, h("div", { key: '667a00f3d0408b8c6f954aeaef3e9edad96d6d13', class: "entries_text" }, h("p", { key: '9c3e539863b3371cc0dbff8cf256e0269016ff08', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '7149366a299915f9fa7b7f8618b0e6d359ba2319', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '9b3e68df7966d534233c546c3dd250f65025c54f', 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: 'a3366b7e60e31dca71606780c08abb36e3c7c652', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '5d37793a8fa4bf5083771dab5041d74e22620295' }, "Previous")), h("div", { key: '4be01033945588aacea4e23719a0941aff7721fc', class: "page_number_text" }, h("p", { key: '454a485e6586af114d3953fa3fb6724e02ce309f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'bb877b537af1c5f44be542c886f5483a4214520f', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '18163a6f45b04ad467491d7ef0bf329544b421ea' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '468548ee52cf8fdd14f422f8fd782a3141308d3a', class: "pagination_entries" }, h("div", { key: 'ae4674cfef4ed1127db8d90a161031a677b77a97', class: "entries_text" }, h("p", { key: 'c4010364b3a9805bf3376e9959fffcc611b8cc16', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'c7f29c00291dd9996c095e5319b4cd4600a73399', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '017cb26a60a70139f484b6dc7dc889830c157060', 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: 'ace9279ce7d4d80f53b609f9f26dc8fad1d7e1b2', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'f8388fafff2d003d42291eef894b97fa831ac761', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'e7efc73f68662385d734d4df4e95fda52442ce2c' }, "Previous")), this.totalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '4eab630a9caf72f32af74ef1012d2787d187585a', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'fe88ec1482890c964075c2986e79e94faa61714c' }, "1")), h("gb-pagination-button-group-base", { key: '3ad90423746a9754b135d312fa6895959922e5df', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '2e7350dc99f563ad5af50501f25a7cf75f12fd5f' }, "2")), h("gb-pagination-button-group-base", { key: '926e3251901b9622b89bbb3915d7adfbc89c518d', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'c768a0452aa0c1a49cb343a9252b0f4df3bf965c' }, "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: '9a2f015326344546f7da55b85d7c8ab937850457', icon: "false" }, h("p", { key: '46d70a24691a79d588477e40284cbd25c5b174df' }, "...")), 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: '9bd67dbd63f72cbe5cfb156a5350d6538ccba97b', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '17c1dead98b36e25dca1be562696ddbad9a0c00b' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: '1a99804d3c0239e50ee78a7d3ccc93e608e537bf', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: 'fd3f83e01fd49f07fc69a22f7a37c8bc1559333e' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '4e379b82decec0080fc25a1700271be8a5dbcfc7', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: 'af511972b618ca25ab7e60ea8824ec46158ef50b' }, this.totalPages)))), h("gb-pagination-button-group-base", { key: '8a9b447ec76c374bc043ef3bae095452afbec6bd', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'db234ef4c6487af40cc361eda3b67da15acd43d1' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'e46adebb41ed204e45c3f462754ee1d632dbb319', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'b15811fe42b0d0c174b4e5b5715baa81facf38e0', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '57fafbaf63c24c8a617552295a9d1a5e36c8f2ea' }, "Previous")), this.totalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '1c6832224253e079254714c9c70938c1fc8ce723', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '1c1b90ae7d8fa3201acbc8de5caed123432d4225' }, "1")), h("gb-pagination-button-group-base", { key: 'bba3ffa0768400ceae3b237ab4fd0562c8f3bc3e', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'c5c6d0a972f63ff01b4c37516c434835a1f92cc4' }, "2")), h("gb-pagination-button-group-base", { key: '9a85290d5f7d3738ccb03546d19338733881fc3a', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'dc8fbba9b29808d5810da8ae42e23cd14dc0acc5' }, "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: '29ed8fb8f01ee5c2512fb822174db7d2007ac29c', icon: "false" }, h("p", { key: 'c3a62bd3cbc383ae1680c4a059d2883cb1c346d0' }, "...")), 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: 'c55560cee49d57d452e06fdd33a48c87f04cccb2', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '37e7700bde42f13f1741cd3f1f393fca68088d3e' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: 'eef27accb238ed9455cde3d5e1918e17c0b2e4d7', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: 'd123878c0a8239342879d51afdf5b47750985254' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: 'd498e0cb8bc9178bb4182ae6bc7e2ac31b64f531', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '5f0bfa74fb87ec7a2d7dcbfe91a549ae246ab6a2' }, this.totalPages)))), h("gb-pagination-button-group-base", { key: 'e017ac9b251b348579f55b3c8fef9f0811092e0f', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'f54593cca34549089f806aa3d7cc0d6636235e0c' }, "Next"))), h("div", { key: '97493b7840c0ec4e961401e3e8447a03d29c9a8d', class: "pagination_entries" }, h("div", { key: '607e42eebd1f990e9c92c869f89e83066924e50d', class: "entries_text" }, h("p", { key: '7468fa7d3781440c3151b6fc44fddb16f473c349', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '65341cc3396a80eca2217a5382b4148fb6772926', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '66c56b9f21ebeeac985301e365f08d363ca84bd7', 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: '7ded4751d1e714878f055140338937d042437cf6', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'd673d6f4aac385bf3e1d9d1d793d4570c3e2e97c', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '51c8729fa7c42ce9860af6ab3ca84f404a2701b0' }, "Previous")), this.totalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '24f9fe0e8c8a2b879db28d5de2b0a44c6740938a', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'f996771c322d587d2aa4ab2ae70d2655fe309ea0' }, "1")), h("gb-pagination-button-group-base", { key: '0084c12f755a60007253b2aa4bea8200437737e5', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '5203098f381f481f463be959bc01885399717973' }, "2")), h("gb-pagination-button-group-base", { key: '49bd4674e77421678f5ea7a6547747c3756aee5c', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'bae6d95d0648538cdbb2d5977d222c562ffe3245' }, "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: '72e76df346ce6ed53e2e6e26024a2c2360dc5d91', icon: "false" }, h("p", { key: '27f2f891d94cd2a4258788c8fccdac161a9b3c1b' }, "...")), 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: 'fbd0ca6ad0d36c5fc03249e1225e07ea34c57d2c', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: 'e3fc882c8c27aa7e5e447ca005c766b6b49de78e' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: '70760700123c4cad5e1b367648ddf161eef2c77a', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '738821e4e0512e0ebde44643ce0b1e99e67a9247' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '580bf454408735da1e926f33a8335935ea0a26bd', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: '1e9b968321dfd940e0d3c80eb5134d9ca301cde0' }, this.totalPages)))), h("gb-pagination-button-group-base", { key: 'a5fbc4c76ac9804a85da32f6b3187cd76549ac03', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '20dac2fa0d9a495919a50b5e5302c4c772d3d7a4' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '829dd3de4265961ff3d6b2f07485c2c7f8ae90cf', 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: '12ec4dd590d9d169c771f508eb7b9f24ca46d67a', class: "page_number_text" }, h("p", { key: 'dab514a7472eb935af97d0bec9066eabd5c16e39', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '5674ae1abe7a403d5ed8e80b00e92facfe03b24d', 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: '00af0929aed7f3b5d0c29e0b6c9e557316113891', 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: '7cd2b7633faad95ca27d14ea0c3b5e1b7fa6fe9b', class: "page_number_text" }, h("p", { key: '6edde9e0d046b2a2ecf55bfcb356a42b4d394085', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '468b70cc32f3c2bac65f5d0189728917cf0dad29', 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: 'f997b38d05ad1de15fb8c5fad128e2b23281c66e', 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: '45ebc0f1d45ca14e2b224433a4f25cf7afef18cd', class: "page_number_text" }, h("p", { key: 'e0b53e7f51712b2ce5fb811cd0f2ef15e8e3305f', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '251f949ecacaeed7825b35418b22f1120f589483', 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: '7124a46d1a77178331ece4d6113a6a48e95416e8', 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: '0d06b3633fd9dabd521c178a8ad1a36fa3550fca', class: "page_number_text" }, h("p", { key: 'bae4192551af812229ffc3886b83463dfda8a5fe', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '8b53130ddde06507325a7360b0350de21ff56cc4', 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: '032851522f87baa15bed10db1a11099d2a63da44', 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: '43b49baee42069c1b299f9d7a1b367d637172fe7', class: "page_number_text" }, h("p", { key: '8b994ac427dfd10c042c86c28b2a6c0a9c2be8e3', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: 'ea544d887175249cdc668527992c66a58661758a', 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: '7ec7e197e6c54810548bcb31205f37f8720682d8', 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: '762cd0a0b2ff6c5c577f4c57df5bd12d347a86b2', class: "page_number_text" }, h("p", { key: 'fc8e4cd477c7e3486d85da1a3371eda993c9dfb4', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.totalPages)), h("gb-button", { key: '86f7d853c427420f64a2a282b1414e76b837cd32', 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: 'd4b7bf9b3bec76409115aa2c9612565df997ebd9', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '13b4f8b66789164ac17c89eaa6185e6fca07f568', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.totalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'eef04b213e0a0fd1645080560107115f3db278eb', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'ae6112f68a430d7413959261decf35567bf489bd' }, "1")), h("gb-pagination-button-group-base", { key: '49b6f07bb6c44f8d6f7311efc838d6d8bd307986', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'b0e9632807befcfdcabc8c76cb63a080a1f51bdc' }, "2")), h("gb-pagination-button-group-base", { key: '15f8712cbd2cf9894f685d178459af89f2089360', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'bb89a85ad63d043ee7182ac5436d0c9a03f6e483' }, "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: '7952ab5ce62f9ce852126b9a3a085c0b731ad1c4', icon: "false" }, h("p", { key: 'd169dc8abf53c620336f29605aebf3daf718ba59' }, "...")), 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: '552ea7789f67b68a4553bc8efbd02f15f3f86fab', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: 'aeb765ac14d7c4b8cc9d7dbeba803a575babbacb' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: 'ac8582d29694f93d413ffcc920effbb7acd731bd', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '38d127173ee23033352f3c39403a66580ab31b51' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '00cfa28ca6c1b1196aedf532a842217b76264107', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: 'ecd6c5b77bcf74a4a1db412e1f45783833860dd7' }, this.totalPages)))), h("gb-pagination-button-group-base", { key: 'a9fe0ea1336329c9987be72ee316bd7f6f885ae5', 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: '8f4c06c85df23deff43f184d72180e143b116f08', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '40986631f3c74f9210fddf311f19e81d64fe7ce9', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.totalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '830aa036350e22c66c994a75f38df6b85fb71cb4', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'f6fbf8870b2f5f22ca818127524a9580ca03a505' }, "1")), h("gb-pagination-button-group-base", { key: 'c1850908ac9b8ca217ffa532890ec83c73295f26', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'fd3e5df944cb1cb401d92a0be91e134ec73352f6' }, "2")), h("gb-pagination-button-group-base", { key: '71c569458c84f12e2edb9a489d8241c5f3dd5047', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '6a1fc708bff90474af4a60be93f63df9e90d088c' }, "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: 'a20ae4ea331d7b2deca31204acc7efdd1dccf892', icon: "false" }, h("p", { key: 'ef39e90c3626ab434263b4eb7946f3e4a9926942' }, "...")), 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: '90ddb4e10a45e411076275ca78a4dae12ca3a897', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '09ea34c18040d2f1593264a285b1f10a75587e79' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: 'd2b04468a133813832bac149408994c141529dab', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '58afb4f6c896926aeb6ef62dcba4a332a5ccec11' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '34697419e1d88ded8c5f24c2cc702952cbb4d404', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: 'eccb165fa65c3a4b542a5088fe0db037f025c4e7' }, this.totalPages)))), h("gb-pagination-button-group-base", { key: '6fd2b1f043dbe1ab4013b872ac1b7530f2bd8239', 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: '08778df74ac28241a8541ffbe9767c51007138a7', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '94596e99129584b6f1406b951d61eb77ca8f9812', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.totalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.totalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '22b7df0b9f0f57b9e9e9b482f2fcbac510b1d462', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '80e1f1ee6caee4ba69701efb7e0c36f85fac8d9b' }, "1")), h("gb-pagination-button-group-base", { key: '5b9cc84de6e4fae5e28b365e39d8057ef487d0f7', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '33b69d7c7cd24b5e7643329af89634b579f1afe3' }, "2")), h("gb-pagination-button-group-base", { key: '0a04539025950f95ed421c490f332162913c003c', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'c4714fa98f8ef951f713a41627fef76c554ecdcc' }, "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: 'a740c43a465c73c57c15b07260dafaf7ec31b1eb', icon: "false" }, h("p", { key: 'c843fe6dea45e452898e4ac9ce24cd3366fd2052' }, "...")), 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: 'b432f49cb7733fee686b0a46c67748d82664f886', icon: "false", state: this.currentPage === this.totalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 2) }, h("p", { key: '3d0129beffda5f92b4dc6615a47624be65689621' }, this.totalPages - 2)), h("gb-pagination-button-group-base", { key: 'c59af4462a72ad858c9c0443f4254680492b535e', icon: "false", state: this.currentPage === this.totalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages - 1) }, h("p", { key: '95f62f73618c21bc0673a9059b994b30917b846d' }, this.totalPages - 1)), h("gb-pagination-button-group-base", { key: '855e58fe9085633fdae4b779fdd381356a4b0f68', icon: "false", state: this.currentPage === this.totalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.totalPages) }, h("p", { key: 'ad185d35cca8a2ce975ae5f4a10b60f8a34dc681' }, this.totalPages)))), h("gb-pagination-button-group-base", { key: '5ae743f43479fb5f19b4340601a6175a47c5f4b9', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
     }
+    static get watchers() { return {
+        "totalPages": ["onTotalPagesChange"]
+    }; }
     static get style() { return gbPaginationCss; }
 }, [1, "gb-pagination", {
         "type": [1],
         "shape": [1],
-        "breakpoint": [1],
+        "breakpoint": [1025],
         "currentPage": [1026, "current-page"],
         "totalPages": [1026, "total-pages"],
         "entries": [1040],
         "selectedPageSize": [32],
         "defaultSelected": [32],
-        "pages": [32]
+        "pages": [32],
+        "width": [32],
+        "internalTotalPages": [32]
+    }, undefined, {
+        "totalPages": ["onTotalPagesChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {