globuswebcomponents 2.18.18 → 2.19.1

package/dist/components/{p-rkY1uNfC.js → p-BDzojrvH.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, g as getAssetPath, h } from './p-CD7FeUx5.js';
-import { d as defineCustomElement$2 } from './p-ND3j_jfM.js';
-import { d as defineCustomElement$1 } from './p-Bq8u9i3y.js';
+import { d as defineCustomElement$2 } from './p-BOWm5cIi.js';
+import { d as defineCustomElement$1 } from './p-D1ipn9Uc.js';
 
 const gbThemeTabCss = ".theme_tab_div{display:flex;padding:0.375rem;justify-content:space-between;align-items:center;gap:0.5rem;border-radius:0.5rem;border:1px solid var(--color-border-subtler, #E3E8EF);background:var(--color-background-gray-subtler, #EEF2F6);flex-grow:1}.tab{width:100%}";
 
@@ -29,7 +29,7 @@ const GbThemeTab = /*@__PURE__*/ proxyCustomElement(class GbThemeTab extends H {
         const systemIconSrc = getAssetPath(`assets/laptop.svg`);
         const sunSrc = getAssetPath(`assets/sun-02.svg`);
         const moonSrc = getAssetPath(`assets/moon-02.svg`);
-        return (h("div", { key: '9348c52b80cbcaeb7debf5ad8ca585103f99a3ed', class: `theme_tab_div` }, h("div", { key: '990f3365e2c7ec218424bb36f5bb231dc5b75aee', class: "tab" }, h("gb-icon-button-base", { key: '05efedafb05ef2f5ebe0fd0b6215e63acc03a892', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: '97084049bbffdd963c900608ee455109588ceae3', class: "tab" }, h("gb-icon-button-base", { key: '1b4ffa92ca05a50dfba7217093745f8e5fe41b19', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: 'df6725da600134eff6e2b3680ac83c51f1ac1212', class: "tab" }, h("gb-icon-button-base", { key: '8667ea4a6078f946283eef26fd6a29b8f232a62f', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
+        return (h("div", { key: 'f2bdd520a5f2ba78e0a8e4a114a5be3714386f10', class: `theme_tab_div` }, h("div", { key: 'c68383401f4a0a81e25e2c552208add40049ad7c', class: "tab" }, h("gb-icon-button-base", { key: 'fc7edf56276b590ca490e5d1a8bf7878a43ea24c', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: '0637ecde8440c16d4b005ef70ef9f0eaf55725a0', class: "tab" }, h("gb-icon-button-base", { key: 'c0e4a1a739f0545b06a2cc6a8d19d3cbb7709e12', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: 'f10256efe294f9e41d6569608993986f94bcc291', class: "tab" }, h("gb-icon-button-base", { key: '462cd317bbc05ca1ec27b604809edeb2aa1beb1e', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
     }
     get el() { return this; }
     static get style() { return gbThemeTabCss; }
@@ -63,6 +63,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { GbThemeTab as G, defineCustomElement as d };
-//# sourceMappingURL=p-rkY1uNfC.js.map
+//# sourceMappingURL=p-BDzojrvH.js.map
 
-//# sourceMappingURL=p-rkY1uNfC.js.map
+//# sourceMappingURL=p-BDzojrvH.js.map

package/dist/components/{p-rkY1uNfC.js.map → p-BDzojrvH.js.map}

@@ -1 +1 @@
-{"file":"p-rkY1uNfC.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,2QAA2Q;;MCQpR,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQ2B,QAAA,IAAgB,CAAA,gBAAA,GAAW,QAAQ;AA4C7D;AAzCC,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;AAC7B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;;;;;;;;;IAUlC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,YAAY,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACvD,QAAA,MAAM,MAAM,GAAG,YAAY,CAAC,CAAA,iBAAA,CAAmB,CAAC;AAChD,QAAA,MAAM,OAAO,GAAG,YAAY,CAAC,CAAA,kBAAA,CAAoB,CAAC;QAElD,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,aAAA,CAAe,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,QAAQ,GAAG,IAAI,GAAG,KAAK,EAC1D,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GACnB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,GAAG,IAAI,GAAG,KAAK,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAClB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,IAAI,GAAG,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAwB,CACrK,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-theme-tab/gb-theme-tab.css?tag=gb-theme-tab&encapsulation=shadow","src/components/gb-theme-tab/gb-theme-tab.tsx"],"sourcesContent":[".theme_tab_div {\n  display: flex;\n  padding: 0.375rem;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  border: 1px solid var(--color-border-subtler, #E3E8EF);\n  background: var(--color-background-gray-subtler, #EEF2F6);\n  flex-grow: 1;\n}\n\n.tab{\n    width: 100%;\n}","import { Component, Element, Event, EventEmitter, Prop, getAssetPath, h } from '@stencil/core';\nimport { ThemeTypes } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-theme-tab',\n  styleUrl: 'gb-theme-tab.css',\n  shadow: true,\n})\nexport class GbThemeTab {\n  @Prop({ mutable: true }) theme: ThemeTypes;\n  @Event() themeTabClicked: EventEmitter<string>;\n  @Prop({ mutable: true }) currentActiveTab: string = 'system';\n  @Element() el: HTMLElement;\n\n  tabClicked(theme: string) {\n    this.currentActiveTab = theme;\n    this.themeTabClicked.emit(theme);\n    // this.el.dispatchEvent(\n    //   new CustomEvent('themeChange', {\n    //     detail: { theme },\n    //     bubbles: true,\n    //     composed: true, // This is key\n    //   }),\n    // );    \n  }\n\n  render() {\n    const systemIconSrc = getAssetPath(`assets/laptop.svg`);\n    const sunSrc = getAssetPath(`assets/sun-02.svg`);\n    const moonSrc = getAssetPath(`assets/moon-02.svg`);\n\n    return (\n      <div class={`theme_tab_div`}>\n        <div class=\"tab\">\n          <gb-icon-button-base\n            current={this.currentActiveTab === 'system' ? true : false}\n            icon={systemIconSrc}\n            label=\"System\"\n            onClick={() => this.tabClicked('system')}\n          ></gb-icon-button-base>\n        </div>\n        <div class=\"tab\">\n          <gb-icon-button-base\n            current={this.currentActiveTab === 'light' ? true : false}\n            icon={sunSrc}\n            label=\"Light\"\n            onClick={() => this.tabClicked('light')}\n          ></gb-icon-button-base>\n        </div>\n        <div class=\"tab\">\n          <gb-icon-button-base current={this.currentActiveTab === 'dark' ? true : false} icon={moonSrc} label=\"Dark\" onClick={() => this.tabClicked('dark')}></gb-icon-button-base>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-BDzojrvH.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,2QAA2Q;;MCQpR,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAQ2B,QAAA,IAAgB,CAAA,gBAAA,GAAW,QAAQ;AA4C7D;AAzCC,IAAA,UAAU,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;AAC7B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC;;;;;;;;;IAUlC,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG,YAAY,CAAC,CAAA,iBAAA,CAAmB,CAAC;AACvD,QAAA,MAAM,MAAM,GAAG,YAAY,CAAC,CAAA,iBAAA,CAAmB,CAAC;AAChD,QAAA,MAAM,OAAO,GAAG,YAAY,CAAC,CAAA,kBAAA,CAAoB,CAAC;QAElD,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,aAAA,CAAe,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,QAAQ,GAAG,IAAI,GAAG,KAAK,EAC1D,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GACnB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,GAAG,IAAI,GAAG,KAAK,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAClB,CACnB,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,KAAK,EAAA,EACd,CAAA,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAqB,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM,GAAG,IAAI,GAAG,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GAAwB,CACrK,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-theme-tab/gb-theme-tab.css?tag=gb-theme-tab&encapsulation=shadow","src/components/gb-theme-tab/gb-theme-tab.tsx"],"sourcesContent":[".theme_tab_div {\n  display: flex;\n  padding: 0.375rem;\n  justify-content: space-between;\n  align-items: center;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  border: 1px solid var(--color-border-subtler, #E3E8EF);\n  background: var(--color-background-gray-subtler, #EEF2F6);\n  flex-grow: 1;\n}\n\n.tab{\n    width: 100%;\n}","import { Component, Element, Event, EventEmitter, Prop, getAssetPath, h } from '@stencil/core';\nimport { ThemeTypes } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-theme-tab',\n  styleUrl: 'gb-theme-tab.css',\n  shadow: true,\n})\nexport class GbThemeTab {\n  @Prop({ mutable: true }) theme: ThemeTypes;\n  @Event() themeTabClicked: EventEmitter<string>;\n  @Prop({ mutable: true }) currentActiveTab: string = 'system';\n  @Element() el: HTMLElement;\n\n  tabClicked(theme: string) {\n    this.currentActiveTab = theme;\n    this.themeTabClicked.emit(theme);\n    // this.el.dispatchEvent(\n    //   new CustomEvent('themeChange', {\n    //     detail: { theme },\n    //     bubbles: true,\n    //     composed: true, // This is key\n    //   }),\n    // );    \n  }\n\n  render() {\n    const systemIconSrc = getAssetPath(`assets/laptop.svg`);\n    const sunSrc = getAssetPath(`assets/sun-02.svg`);\n    const moonSrc = getAssetPath(`assets/moon-02.svg`);\n\n    return (\n      <div class={`theme_tab_div`}>\n        <div class=\"tab\">\n          <gb-icon-button-base\n            current={this.currentActiveTab === 'system' ? true : false}\n            icon={systemIconSrc}\n            label=\"System\"\n            onClick={() => this.tabClicked('system')}\n          ></gb-icon-button-base>\n        </div>\n        <div class=\"tab\">\n          <gb-icon-button-base\n            current={this.currentActiveTab === 'light' ? true : false}\n            icon={sunSrc}\n            label=\"Light\"\n            onClick={() => this.tabClicked('light')}\n          ></gb-icon-button-base>\n        </div>\n        <div class=\"tab\">\n          <gb-icon-button-base current={this.currentActiveTab === 'dark' ? true : false} icon={moonSrc} label=\"Dark\" onClick={() => this.tabClicked('dark')}></gb-icon-button-base>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-e9qwQjOu.js → p-BKx2NXxk.js}

@@ -1,24 +1,24 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-CD7FeUx5.js';
-import { d as defineCustomElement$k } from './p-CiIf2jTd.js';
+import { d as defineCustomElement$k } from './p-CgLuRbaL.js';
 import { d as defineCustomElement$j } from './p-DhmmSqYS.js';
-import { d as defineCustomElement$i } from './p-DRqyfxJN.js';
+import { d as defineCustomElement$i } from './p-C08aLARD.js';
 import { d as defineCustomElement$h } from './p-OVoS3dKe.js';
 import { d as defineCustomElement$g } from './p-BE9pk1IO.js';
-import { d as defineCustomElement$f } from './p-Y6ElsC-O.js';
+import { d as defineCustomElement$f } from './p-gyCVbN_J.js';
 import { d as defineCustomElement$e } from './p-01JGSaJc.js';
-import { d as defineCustomElement$d } from './p-D4N8PuP_.js';
-import { d as defineCustomElement$c } from './p-D5wRXGjr.js';
-import { d as defineCustomElement$b } from './p-C4v3uVwB.js';
-import { d as defineCustomElement$a } from './p-BbqeQPOH.js';
-import { d as defineCustomElement$9 } from './p-CWvhAPCz.js';
-import { d as defineCustomElement$8 } from './p-DV6RzMGk.js';
-import { d as defineCustomElement$7 } from './p-CTTi-c3C.js';
-import { d as defineCustomElement$6 } from './p-Cd6l_J_d.js';
-import { d as defineCustomElement$5 } from './p-BLNHxN4m.js';
-import { d as defineCustomElement$4 } from './p-DSWKsMVQ.js';
-import { d as defineCustomElement$3 } from './p-DkuZ63iF.js';
-import { d as defineCustomElement$2 } from './p-JZVVGFgd.js';
-import { d as defineCustomElement$1 } from './p-Bq8u9i3y.js';
+import { d as defineCustomElement$d } from './p-B8ARDWvH.js';
+import { d as defineCustomElement$c } from './p-yhPI0UDy.js';
+import { d as defineCustomElement$b } from './p-CxEjkOSM.js';
+import { d as defineCustomElement$a } from './p-DIM50yuC.js';
+import { d as defineCustomElement$9 } from './p-CRCg3oRb.js';
+import { d as defineCustomElement$8 } from './p-B14RIt38.js';
+import { d as defineCustomElement$7 } from './p-B94266BQ.js';
+import { d as defineCustomElement$6 } from './p-Bd_W1zWv.js';
+import { d as defineCustomElement$5 } from './p-CnQIvd5K.js';
+import { d as defineCustomElement$4 } from './p-BYTuxIjn.js';
+import { d as defineCustomElement$3 } from './p-7t9DGALC.js';
+import { d as defineCustomElement$2 } from './p-CPNfYdRm.js';
+import { d as defineCustomElement$1 } from './p-D1ipn9Uc.js';
 
 const gbPaginationCss = "@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\n/**\n * Global styles for portal-based dropdowns\n * Applied outside shadow DOM context\n */\n.portal_dropdown_wrapper {\n  width: -moz-fit-content;\n  width: fit-content;\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-md);\n  position: absolute;\n  z-index: 9999; /* High z-index to appear above sticky columns */\n  overflow: hidden;\n}\n.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {\n  display: block;\n  width: 100%;\n}\n/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {\n  background: var(--color-background-gray-subtler, #eef2f6);\n} */\n/**\n * gb-input-dropdown menu, portaled out of the component's shadow root.\n * Mirrors .dropdown_menu in gb-input-dropdown.css (which is shadow-scoped and\n * therefore no longer applies once this element is moved into #gb-portal-host).\n */\n.input_dropdown_portal_menu {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  max-height: 300px;\n  padding: var(--spacing-none);\n  border-radius: var(--rounded-sm);\n  border: 1px solid var(--color-border-subtler, #e3e8ef);\n  background: var(--color-surface, #ffffff);\n  box-shadow: var(--shadow-sm);\n  position: absolute;\n  z-index: 9999;\n  gap: var(--spacing-none);\n  overflow-y: auto;\n  overflow-x: hidden;\n  box-sizing: border-box;\n  /* Exact width (not just a minimum) is set inline by gb-input-dropdown-test.tsx\n   * (componentDidUpdate), matching the trigger's width. Content must not grow\n   * the menu wider than the trigger. */\n}\n.input_dropdown_portal_menu::-webkit-scrollbar {\n  right: 0rem;\n  bottom: -1.53125rem;\n  width: 0.8rem;\n  margin-top: 1rem;\n}\n.input_dropdown_portal_menu::-webkit-scrollbar-track {\n  width: 0.5rem;\n  padding: var(--spacing-1);\n  border: none;\n}\n.input_dropdown_portal_menu::-webkit-scrollbar-thumb {\n  width: 0.5rem;\n  height: 11.75rem;\n  border: 0.25rem solid var(--color-background-card, #ffffff);\n  border-radius: var(--rounded-full);\n  background: var(--color-border-subtle, #cdd5df);\n}\n/* Content rendered inside the portaled input-dropdown menu (search field, empty\n * state, loader) - also shadow-scoped in gb-input-dropdown.css and therefore\n * also unreachable once portaled. Kept in sync with that file by hand. */\n.input_dropdown_portal_menu .dropdown_search_field {\n  background: var(--color-surface, #ffffff);\n  padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);\n  position: sticky;\n  top: 0;\n  z-index: 999;\n}\n.input_dropdown_portal_menu .empty_state {\n  margin: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.input_dropdown_portal_menu .background {\n  position: relative;\n  width: 80%;\n}\n.input_dropdown_portal_menu .message_background {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--spacing-1);\n}\n.input_dropdown_portal_menu .illustration {\n  width: 100px;\n  height: 100px;\n}\n.input_dropdown_portal_menu .message {\n  color: var(--color-text-bold, #202939);\n}\n.input_dropdown_portal_menu .loader_div {\n  width: 100%;\n  height: 10rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.input_dropdown_portal_menu .loader {\n  border: 4px solid var(--color-background-gray, #cdd5df);\n  border-top: 4px solid var(--color-background-selected, #075db2);\n  border-radius: 50%;\n  width: 30px;\n  height: 30px;\n  animation: input-dropdown-portal-spin 2s linear infinite;\n}\n@keyframes input-dropdown-portal-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n/* @import 'tailwind.css'; */\n:root {\n  /* --------------------------------------Primary Colors--------------------------------------------- */\n  /* base color palette */\n  --base-white: #fff;\n  --base-black: #000;\n\n  /* gray color palette  */\n  --gray-25: #f9fafb;\n  --gray-50: #f6f8fa;\n  --gray-100: #eef2f6;\n  --gray-200: #e3e8ef;\n  --gray-300: #cdd5df;\n  --gray-400: #808c9e;\n  --gray-500: #697586;\n  --gray-600: #4b5565;\n  --gray-700: #364152;\n  --gray-800: #202939;\n  --gray-900: #121926;\n  --gray-950: #0d121c;\n\n  /* brand dark blue color palette */\n  --brandDarkBlue-25: #f9f9fb;\n  --brandDarkBlue-50: #edeef3;\n  --brandDarkBlue-100: #d3d5e0;\n  --brandDarkBlue-200: #b5b9cc;\n  --brandDarkBlue-300: #9095b2;\n  --brandDarkBlue-400: #464f7f;\n  --brandDarkBlue-500: #212c65;\n  --brandDarkBlue-600: #1e285c;\n  --brandDarkBlue-700: #1c2554;\n  --brandDarkBlue-800: #161d43;\n  --brandDarkBlue-900: #0b0f22;\n  --brandDarkBlue-950: #070914;\n\n  /* brand red color palette */\n  --brandRed-25: #fffbfa;\n  --brandRed-50: #fef1f2;\n  --brandRed-100: #fde3e5;\n  --brandRed-200: #f9b4ba;\n  --brandRed-300: #f68e98;\n  --brandRed-400: #f36976;\n  --brandRed-500: #e21b2e;\n  --brandRed-600: #cc1a2a;\n  --brandRed-700: #b51726;\n  --brandRed-800: #8c121d;\n  --brandRed-900: #680d16;\n  --brandRed-950: #3f080d;\n\n  /* warning color palette */\n  --yellow-25: #fffcf5;\n  --yellow-50: #fffaeb;\n  --yellow-100: #fef0c7;\n  --yellow-200: #fedf89;\n  --yellow-300: #fec84b;\n  --yellow-400: #fdb022;\n  --yellow-500: #f79009;\n  --yellow-600: #dc6803;\n  --yellow-700: #b54708;\n  --yellow-800: #93370d;\n  --yellow-900: #7a2e0e;\n  --yellow-950: #4e1d09;\n\n  /* success color palette  */\n  --green-25: #f6fef9;\n  --green-50: #ecfdf3;\n  --green-100: #dcfaeb;\n  --green-200: #a9efc5;\n  --green-300: #75e0a7;\n  --green-400: #47cd89;\n  --green-500: #17b26a;\n  --green-600: #067f48;\n  --green-700: #067647;\n  --green-800: #085d3a;\n  --green-900: #074d31;\n  --green-950: #053321;\n\n  /* ------------------------------------------opacity color palette--------------------------------------  */\n  /* 0% opacity */\n  /* White */\n  --white-opacity0: rgba(255, 255, 255, 0);\n\n  /* Gray */\n  --gray25-opacity0: rgba(249, 250, 251, 0);\n  --gray900-opacity0: rgba(18, 25, 38, 0);\n  --gray950-opacity0: rgba(13, 18, 28, 0);\n\n  /* 20% opacity */\n  /* White */\n  --white-opacity20: rgba(255, 255, 255, 0.2);\n\n  /* Dark Blue */\n  --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\n  --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\n\n  /* Gray */\n  --gray25-opacity20: rgba(249, 250, 251, 0.2);\n  --gray900-opacity20: rgba(18, 25, 38, 0.2);\n  --gray950-opacity20: rgba(13, 18, 28, 0.2);\n\n  /* 30% opacity */\n  --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\n  --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\n\n  /* 40% opacity */\n  --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\n  --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\n\n  /* 50% opacity */\n  /* White */\n  --white-opacity50: rgba(255, 255, 255, 0.5);\n\n  /* Gray */\n  --gray25-opacity50: rgba(249, 250, 251, 0.5);\n  --gray900-opacity50: rgba(18, 25, 38, 0.5);\n  --gray950-opacity50: rgba(13, 18, 28, 0.5);\n\n  /* ------------------------------------------Secondary Color------------------------------------------- */\n  /* blueLight color palete */\n  --lightBlue-25: #f5fbff;\n  --lightBlue-50: #f0f9ff;\n  --lightBlue-100: #e0f2fe;\n  --lightBlue-200: #b9e6fe;\n  --lightBlue-300: #7cd4fd;\n  --lightBlue-400: #7cd4fd;\n  --lightBlue-500: #0ba5ec;\n  --lightBlue-600: #0086c9;\n  --lightBlue-700: #026aa2;\n  --lightBlue-800: #065986;\n  --lightBlue-900: #0b4a6f;\n  --lightBlue-950: #062c41;\n\n  /* blue color palette */\n  --blue-25: #ecf5fe;\n  --blue-50: #e4f0fc;\n  --blue-100: #c8e0f9;\n  --blue-200: #9ac7f4;\n  --blue-300: #6aa9e7;\n  --blue-400: #378fe6;\n  --blue-500: #075db2;\n  --blue-600: #064e94;\n  --blue-700: #053e77;\n  --blue-800: #042f59;\n  --blue-900: #022445;\n  --blue-950: #021d37;\n\n  /* Purple color palete */\n  --purple-25: #fafaff;\n  --purple-50: #f4f3ff;\n  --purple-100: #ebe9fe;\n  --purple-200: #d9d6fe;\n  --purple-300: #bdb4fe;\n  --purple-400: #9b8afb;\n  --purple-500: #7a5af8;\n  --purple-600: #6938ef;\n  --purple-700: #5925dc;\n  --purple-800: #4a1fb8;\n  --purple-900: #3e1c96;\n  --purple-950: #27115f;\n\n  /* pink color palette */\n  --pink-25: #fef6fb;\n  --pink-50: #fdf2fa;\n  --pink-100: #fce7f6;\n  --pink-200: #fcceee;\n  --pink-300: #faa7e0;\n  --pink-400: #f670c7;\n  --pink-500: #ee46bc;\n  --pink-600: #dd2590;\n  --pink-700: #c11574;\n  --pink-800: #9e165f;\n  --pink-900: #851651;\n  --pink-950: #4e0d30;\n\n  /* -------------------------------------------------Token---------------------------------------------- */\n  /* Light-theme defaults so external hosts still resolve key tokens when data-theme is not set. */\n  --color-text-bold: var(--gray-800);\n  --color-text: var(--gray-600);\n  --color-text-subtle: var(--gray-500);\n  --color-text-disabled: var(--gray-400);\n  --color-text-inverse: var(--base-white);\n\n  --color-icon-bold: var(--gray-800);\n  --color-icon: var(--gray-600);\n  --color-icon-subtle: var(--gray-500);\n  --color-icon-disabled: var(--gray-400);\n  --color-icon-inverse: var(--base-white);\n\n  --color-border-bold: var(--gray-500);\n  --color-border: var(--gray-400);\n  --color-border-subtle: var(--gray-300);\n  --color-border-subtler: var(--gray-200);\n  --color-border-disabled: var(--gray-200);\n  --color-border-input: var(--gray-300);\n  --color-border-focus: var(--gray-400);\n\n  --color-background: var(--base-white);\n  --color-background-card-bold: var(--gray-100);\n  --color-background-card: var(--base-white);\n  --color-background-input: var(--gray-400);\n  --color-background-disabled: var(--gray-50);\n  --color-background-btn-disabled: var(--gray-100);\n  --color-background-selected: var(--blue-500);\n\n  --color-link: var(--blue-500);\n  --color-link-pressed: var(--blue-600);\n  --color-link-visited: var(--lightBlue-600);\n\n  /* -----------Text Color----------- */\n\n  [data-theme='light'] {\n    --color-text-bold: var(--gray-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-bold: var(--gray-100);\n  }\n\n  [data-theme='light'] {\n    --color-text: var(--gray-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text: var(--gray-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-subtle: var(--gray-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-subtle: var(--gray-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-disabled: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-text-disabled: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-text-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-text-inverse: var(--base-black);\n  }\n\n  [data-theme='light'] {\n    --color-text-brandDarkBlue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-brandDarkBlue: var(--brandDarkBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger-subtle: var(--brandRed-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger-subtle: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-danger-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-text-danger-inverse: var(--brandRed-950);\n  }\n\n  [data-theme='light'] {\n    --color-text-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-warning: var(--yellow-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-warning-subtle: var(--yellow-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-warning-subtle: var(--yellow-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-success: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-success-subtle: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-success-subtle: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-discovery: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-discovery: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-discovery-subtle: var(--lightBlue-400);\n  }\n\n  [data-theme='dark'] {\n    --color-text-discovery-subtle: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-information: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-information-subtle: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-information-subtle: var(--blue-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-purple-bold: var(--purple-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-purple: var(--purple-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-purple-subtle: var(--purple-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-purple-subtle: var(--purple-400);\n  }\n\n  [data-theme='light'] {\n    --color-text-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-text-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-text-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-text-pink: var(--pink-300);\n  }\n\n  [data-theme='light'] {\n    --color-text-pink-subtle: var(--pink-500);\n  }\n\n  [data-theme='dark'] {\n    --color-text-pink-subtle: var(--pink-400);\n  }\n\n  /* --------------Link color--------------- */\n\n  [data-theme='light'] {\n    --color-link: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-link: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-link-pressed: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-link-pressed: var(--blue-600);\n  }\n\n  [data-theme='light'] {\n    --color-link-visited: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-link-visited: var(--lightBlue-300);\n  }\n\n  /* --------------Icon color--------------- */\n\n  [data-theme='light'] {\n    --color-icon-bold: var(--gray-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-bold: var(--gray-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon: var(--gray-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon: var(--gray-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-subtle: var(--gray-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-subtle: var(--gray-400);\n  }\n\n  [data-theme='light'] {\n    --color-icon-disabled: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-disabled: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-icon-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-inverse: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-icon-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-icon-danger-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-danger-inverse: var(--brandRed-950);\n  }\n\n  [data-theme='light'] {\n    --color-icon-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-warning: var(--yellow-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-success: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-discovery: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-discovery: var(--lightBlue-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-information: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-purple-bold: var(--purple-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-purple: var(--purple-300);\n  }\n\n  [data-theme='light'] {\n    --color-icon-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-icon-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-icon-pink: var(--pink-300);\n  }\n\n  /* ----------------Border Color --------------- */\n\n  [data-theme='light'] {\n    --color-border-bold: var(--gray-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-bold: var(--gray-400);\n  }\n\n  [data-theme='light'] {\n    --color-border: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-border: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-border-subtle: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-border-subtle: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-border-subtler: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-subtler: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-disabled: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-disabled: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-border-inverse: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-border-inverse: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-input: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-border-input: var(--gray-600);\n  }\n\n  [data-theme='light'] {\n    --color-border-focus: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-border-focus: var(--blue-200);\n  }\n\n  [data-theme='light'] {\n    --color-border-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-brandDarkBlue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-brandDarkBlue: var(--brandDarkBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-border-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-border-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger-subtle: var(--brandRed-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger-subtle: var(--brandRed-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-danger-subtler: var(--brandRed-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-danger-subtler: var(--brandRed-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning: var(--yellow-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning-subtle: var(--yellow-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning-subtle: var(--yellow-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-warning-subtler: var(--yellow-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-warning-subtler: var(--yellow-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success: var(--green-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-success-subtle: var(--green-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success-subtle: var(--green-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-success-subtler: var(--green-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-success-subtler: var(--green-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery: var(--lightBlue-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery-subtle: var(--lightBlue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery-subtle: var(--lightBlue-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-discovery-subtler: var(--lightBlue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-discovery-subtler: var(--lightBlue-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-information-subtle: var(--blue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information-subtle: var(--blue-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-information-subtler: var(--blue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-information-subtler: var(--blue-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple-bold: var(--purple-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple: var(--purple-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple-subtle: var(--purple-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple-subtle: var(--purple-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-purple-subtler: var(--purple-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-purple-subtler: var(--purple-900);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink: var(--pink-300);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink-subtle: var(--pink-200);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink-subtle: var(--pink-800);\n  }\n\n  [data-theme='light'] {\n    --color-border-pink-subtler: var(--pink-100);\n  }\n\n  [data-theme='dark'] {\n    --color-border-pink-subtler: var(--pink-900);\n  }\n\n  /* Emmanuel Kadiri starts from background color */\n\n  /* ----------------Background Color --------------- */\n\n  [data-theme='light'] {\n    --color-background-card-bolder: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-card-bolder: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-card: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-background-card: var(--gray-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-input: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-background-input: var(--gray-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-disabled: var(--gray-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-disabled: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-btn-disabled: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-btn-disabled: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-background-selected: var(--blue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-background-selected: var(--blue-300);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandDarkblue: var(--brandDarkBlue-500);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandDarkblue: var(--brandDarkBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandRed: var(--brandRed-500);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandRed: var(--brandRed-300);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandRed-hover: var(--brandRed-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandRed-hover: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-brandRed-pressed: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-background-brandRed-pressed: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-bold: var(--gray-400);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-bold: var(--gray-500);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray: var(--gray-600);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-subtle: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-subtle: var(--gray-700);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-subtler: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-subtler: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-gray-subtlest: var(--gray-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-gray-subtlest: var(--gray-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-bold: var(--brandRed-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-bold: var(--brandRed-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger: var(--brandRed-700);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger: var(--brandRed-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-subtle: var(--brandRed-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-subtle: var(--brandRed-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-subtler: var(--brandRed-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-subtler: var(--brandRed-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-danger-subtlest: var(--brandRed-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-danger-subtlest: var(--brandRed-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-bold: var(--yellow-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-bold: var(--yellow-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning: var(--yellow-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning: var(--yellow-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-subtle: var(--yellow-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-subtle: var(--yellow-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-subtler: var(--yellow-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-subtler: var(--yellow-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-warning-subtlest: var(--yellow-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-warning-subtlest: var(--yellow-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-bold: var(--green-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-bold: var(--green-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-success: var(--green-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success: var(--green-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-subtle: var(--green-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-subtle: var(--green-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-subtler: var(--green-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-subtler: var(--green-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-success-subtlest: var(--green-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-success-subtlest: var(--green-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-bold: var(--lightBlue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-bold: var(--lightBlue-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery: var(--lightBlue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery: var(--lightBlue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-subtle: var(--lightBlue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-subtle: var(--lightBlue-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-subtler: var(--lightBlue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-subtler: var(--lightBlue-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-discovery-subtlest: var(--lightBlue-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-discovery-subtlest: var(--lightBlue-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-bold: var(--blue-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-information: var(--blue-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information: var(--blue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-subtle: var(--blue-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-subtle: var(--blue-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-subtler: var(--blue-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-subtler: var(--blue-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-information-subtlest: var(--blue-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-information-subtlest: var(--blue-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-bold: var(--purple-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-bold: var(--blue-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple: var(--purple-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple: var(--blue-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-subtle: var(--purple-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-subtle: var(--purple-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-subtler: var(--purple-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-subtler: var(--purple-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-purple-subtlest: var(--purple-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-purple-subtlest: var(--purple-950);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-bold: var(--pink-800);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-bold: var(--pink-100);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink: var(--pink-600);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink: var(--pink-200);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-subtle: var(--pink-200);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-subtle: var(--pink-800);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-subtler: var(--pink-100);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-subtler: var(--pink-900);\n  }\n\n  [data-theme='light'] {\n    --color-background-pink-subtlest: var(--purple-50);\n  }\n\n  [data-theme='dark'] {\n    --color-background-pink-subtlest: var(--pink-950);\n  }\n\n  /* ----------------Blanket Color --------------- */\n  [data-theme='light'] {\n    --color-blanket: var(--darkBlue500-opacity20);\n  }\n\n  [data-theme='dark'] {\n    --color-blanket: var(--darkBlue200-opacity20);\n  }\n\n  [data-theme='light'] {\n    --color-blanket-subtle: var(--darkBlue500-opacity30);\n  }\n\n  [data-theme='dark'] {\n    --color-blanket-subtle: var(--darkBlue200-opacity30);\n  }\n\n  [data-theme='light'] {\n    --color-blanket-subtler: var(--darkBlue500-opacity40);\n  }\n\n  [data-theme='dark'] {\n    --color-blanket-subtler: var(--darkBlue200-opacity40);\n  }\n\n  /* ----------------Skeleton Color --------------- */\n  [data-theme='light'] {\n    --color-skeleton: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-skeleton: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-skeleton-bold: var(--gray-300);\n  }\n\n  [data-theme='dark'] {\n    --color-skeleton-bold: var(--gray-700);\n  }\n\n  /* ----------------Surface Color --------------- */\n  [data-theme='light'] {\n    --color-surface-bold: var(--gray-50);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold: var(--gray-950);\n  }\n\n  [data-theme='light'] {\n    --color-surface: var(--base-white);\n  }\n\n  [data-theme='dark'] {\n    --color-surface: var(--gray-900);\n  }\n\n  [data-theme='light'] {\n    --color-surface-hovered: var(--gray-100);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-hovered: var(--gray-800);\n  }\n\n  [data-theme='light'] {\n    --color-surface-pressed: var(--gray-200);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-pressed: var(--gray-700);\n  }\n\n  /* ----------------Transparent Color --------------- */\n  [data-theme='light'] {\n    --color-surface-transparent50: var(--white-opacity50);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-transparent50: var(--gray900-opacity50);\n  }\n\n  [data-theme='light'] {\n    --color-surface-transparent20: var(--white-opacity20);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-transparent20: var(--gray900-opacity20);\n  }\n\n  [data-theme='light'] {\n    --color-surface-transparent-full: var(--white-opacity0);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-transparent-full: var(--gray900-opacity0);\n  }\n\n  [data-theme='light'] {\n    --color-surface-bold-transparent50: var(--gray25-opacity50);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold-transparent50: var(--gray950-opacity50);\n  }\n\n  [data-theme='light'] {\n    --color-surface-bold-transparent20: var(--gray25-opacity20);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold-transparent20: var(--gray950-opacity20);\n  }\n\n  [data-theme='light'] {\n    --color-surface-bold-transparent-full: var(--gray25-opacity0);\n  }\n\n  [data-theme='dark'] {\n    --color-surface-bold-transparent-full: var(--gray950-opacity0);\n  }\n}\n/* -----------------Shadow and Blur----------------- */\n:root {\n  --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\n  --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\n  --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\n  --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\n  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\n\n  --blur-sm: blur(4px);\n  --blur-md: blur(8px);\n  --blur-lg: blur(12px);\n  --blur-xl: blur(20px);\n}\n.shadow-xs {\n  box-shadow: var(--shadow-xs);\n}\n.shadow-sm {\n  box-shadow: var(--shadow-sm);\n}\n.shadow-md {\n  box-shadow: var(--shadow-md);\n}\n.shadow-lg {\n  box-shadow: var(--shadow-lg);\n}\n.shadow-xl {\n  box-shadow: var(--shadow-xl);\n}\n.shadow-2xl {\n  box-shadow: var(--shadow-2xl);\n}\n.shadow-3xl {\n  box-shadow: var(--shadow-3xl);\n}\n.blur-sm {\n  backdrop-filter: var(--blur-sm);\n}\n.blur-md {\n  backdrop-filter: var(--blur-md);\n}\n.blur-lg {\n  backdrop-filter: var(--blur-lg);\n}\n.blur-xl {\n  backdrop-filter: var(--blur-xl);\n}\n/* -----------------Gradients----------------- */\n:root {\n  /* Gray Gradients */\n  /* --gray-gradient-600: linear-gradient(); */\n  --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\n  --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\n  --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\n  --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\n  --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\n  --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\n\n  /* Brand Dark Blue Gradients */\n  --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\n  --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\n  --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\n  --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\n  --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\n  --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\n\n  /* Brand Red Gradients */\n  --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\n  --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\n  --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\n  --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\n  --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\n  --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\n\n  /* Blue Gradients */\n  --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\n  --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\n  --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\n  --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\n  --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\n  --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\n}\n.gradient-gray-600-to-500-90d {\n  background: var(--gradient-gray-600-to-500-90d);\n}\n.gradient-gray-700-to-600-45d {\n  background: var(--gradient-gray-700-to-600-45d);\n}\n.gradient-gray-800-to-600-45d {\n  background: var(--gradient-gray-800-to-600-45d);\n}\n.gradient-gray-800-to-600-90d {\n  background: var(--gradient-gray-800-to-600-90d);\n}\n.gradient-gray-800-to-700265-d {\n  background: var(--gradient-gray-800-to-700265-d);\n}\n.gradient-gray-900-to-600-45d {\n  background: var(--gradient-gray-900-to-600-45d);\n}\n.gradient-darkBlue-500-to-400-90d {\n  background: var(--gradient-darkBlue-500-to-400-90d);\n}\n.gradient-darkBlue-700-to-500-45d {\n  background: var(--gradient-darkBlue-700-to-500-45d);\n}\n.gradient-darkBlue-700-to-400-45d {\n  background: var(--gradient-darkBlue-700-to-400-45d);\n}\n.gradient-darkBlue-800-to-500-90d {\n  background: var(--gradient-darkBlue-800-to-500-90d);\n}\n.gradient-darkBlue-800-to-600265-d {\n  background: var(--gradient-darkBlue-800-to-600265-d);\n}\n.gradient-darkBlue-900-to-600-45d {\n  background: var(--gradient-darkBlue-900-to-600-45d);\n}\n.gradient-red-500-to-400-90d {\n  background: var(--gradient-red-500-to-400-90d);\n}\n.gradient-red-700-to-500-45d {\n  background: var(--gradient-red-700-to-500-45d);\n}\n.gradient-red-700-to-400-45d {\n  background: var(--gradient-red-700-to-400-45d);\n}\n.gradient-red-800-to-500-90d {\n  background: var(--gradient-red-800-to-500-90d);\n}\n.gradient-red-800-to-600265-d {\n  background: var(--gradient-red-800-to-600265-d);\n}\n.gradient-red-900-to-600-45d {\n  background: var(--gradient-red-900-to-600-45d);\n}\n.gradient-blue-500-to-400-90d {\n  background: var(--gradient-blue-500-to-400-90d);\n}\n.gradient-blue-700-to-500-45d {\n  background: var(--gradient-blue-700-to-500-45d);\n}\n.gradient-blue-700-to-400-45d {\n  background: var(--gradient-blue-700-to-400-45d);\n}\n.gradient-blue-800-to-500-90d {\n  background: var(--gradient-blue-800-to-500-90d);\n}\n.gradient-blue-800-to-600265-d {\n  background: var(--gradient-blue-800-to-600265-d);\n}\n.gradient-blue-900-to-600-45d {\n  background: var(--gradient-blue-900-to-600-45d);\n}\n/* Spacing Styles */\n:root {\n  /* Positive spacing */\n  --spacing-none: 0rem;\n  --spacing-half: 0.125rem;\n  --spacing-1: 0.25rem;\n  --spacing-2: 0.5rem;\n  --spacing-3: 0.75rem;\n  --spacing-4: 1rem;\n  --spacing-5: 1.25rem;\n  --spacing-6: 1.5rem;\n  --spacing-7: 2rem;\n  --spacing-8: 2.5rem;\n  --spacing-12: 3rem;\n  --spacing-16: 4rem;\n  --spacing-20: 5rem;\n  --spacing-24: 6rem;\n  --spacing-32: 8rem;\n  --spacing-40: 10rem;\n  --spacing-48: 12rem;\n  --spacing-56: 14rem;\n  --spacing-64: 16rem;\n\n  /* Negative spacing */\n  --spacing-negative-half: -0.125rem;\n  --spacing-negative-1: -0.25rem;\n  --spacing-negative-2: -0.5rem;\n  --spacing-negative-3: -0.75rem;\n  --spacing-negative-4: -1rem;\n  --spacing-negative-5: -1.25rem;\n  --spacing-negative-6: -1.5rem;\n  --spacing-negative-7: -2rem;\n\n  /* Radius  */\n  --rounded-none: 0rem;\n  --rounded-xs: 0.25rem;\n  --rounded-sm: 0.5rem;\n  --rounded-md: 0.75rem;\n  --rounded-lg: 1rem;\n  --rounded-xl: 1.5rem;\n  --rounded-2xl: 2rem;\n  --rounded-full: 62.438rem;\n}\n/* Typography Styles */\n:root {\n  /* Font Sizes */\n  --font-size-d-2xl: 4.5rem;\n  --font-size-d-xl: 3.75rem;\n  --font-size-d-lg: 3rem;\n  --font-size-d-md: 2.25rem;\n  --font-size-d-sm: 1.875rem;\n  --font-size-d-xs: 1.5rem;\n  --font-size-t-xl: 1.25rem;\n  --font-size-t-lg: 1.125rem;\n  --font-size-t-md: 1rem;\n  --font-size-t-sm: 0.875rem;\n  --font-size-t-xs: 0.75rem;\n  --font-size-t-xxs: 0.625rem;\n\n  /* Font Weights */\n  --font-weight-bold: 700;\n  --font-weight-semi-bold: 600;\n  --font-weight-medium: 500;\n  --font-weight-regular: 400;\n\n  /* Line Heights */\n  --font-line-height-d-2xl: 5rem;\n  --font-line-height-d-xl: 4.25rem;\n  --font-line-height-d-lg: 3.75rem;\n  --font-line-height-d-md: 2.75rem;\n  --font-line-height-d-sm: 2.375rem;\n  --font-line-height-d-xs: 2rem;\n  --font-line-height-t-xl: 2rem;\n  --font-line-height-t-lg: 1.875rem;\n  --font-line-height-t-md: 1.688rem;\n  --font-line-height-t-sm: 1.5rem;\n  --font-line-height-t-xs: 1.25rem;\n  --font-line-height-t-xxs: 1.125rem;\n\n  /* Letter Spacings */\n  --font-letter-spacing-d-2xl: -0.09rem;\n  --font-letter-spacing-d-xl: -0.075rem;\n  --font-letter-spacing-d-lg: -0.075rem;\n  --font-letter-spacing-d-md: -0.045rem;\n  --font-letter-spacing-d-sm: 0;\n  --font-letter-spacing-d-xs: 0;\n  --font-letter-spacing-d-xxs: 0;\n\n  /* Font Families */\n  --font-family-title: 'Sora';\n  --font-family-body: 'Sora';\n}\n/* Media queries for medium screens (tablet) */\n@media (max-width: 1199px) {\n  :root {\n    /* Font Sizes */\n    --font-size-d-2xl: 3.75rem;\n    --font-size-d-xl: 3.5rem;\n    --font-size-d-lg: 2.75rem;\n    --font-size-d-md: 2.25rem;\n    --font-size-d-sm: 1.875rem;\n    --font-size-d-xs: 1.5rem;\n\n    /* Line Heights */\n    --font-line-height-d-2xl: 4.25rem;\n    --font-line-height-d-xl: 3.75rem;\n    --font-line-height-d-lg: 2.4375rem;\n    --font-line-height-d-md: 2.75rem;\n    --font-line-height-d-sm: 2.375rem;\n    --font-line-height-d-xs: 2rem;\n\n    /* Letter Spacings */\n    --font-letter-spacing-2xl: -0.075rem;\n    --font-letter-spacing-xl: -0.065rem;\n    --font-letter-spacing-lg: -0.045rem;\n    --font-letter-spacing-md: -0.045rem;\n    --font-letter-spacing-sm: 0rem;\n    --font-letter-spacing-xs: 0rem;\n  }\n}\n/* Media queries for smaller screens (mobile) */\n@media (max-width: 743px) {\n  :root {\n    /* Font Sizes */\n    --font-size-d-2xl: 3rem;\n    --font-size-d-xl: 2.5rem;\n    --font-size-d-lg: 2rem;\n    --font-size-d-md: 1.75rem;\n    --font-size-d-sm: 1.5rem;\n    --font-size-d-xs: 1.25rem;\n\n    /* Line Heights */\n    --font-line-height-d-2xl: 3.375rem;\n    --font-line-height-d-xl: 2.875rem;\n    --font-line-height-d-lg: 2.5rem;\n    --font-line-height-d-md: 2.1375rem;\n    --font-line-height-d-sm: 2rem;\n    --font-line-height-d-xs: 1.75rem;\n\n    /* Letter Spacings */\n    --font-letter-spacing-2xl: -0.06rem;\n    --font-letter-spacing-xl: -0.05rem;\n    --font-letter-spacing-lg: -0.045rem;\n    --font-letter-spacing-md: 0rem;\n    --font-letter-spacing-sm: 0rem;\n    --font-letter-spacing-xs: 0rem;\n  }\n}\n.display-2xl-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-2xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-2xl);\n  letter-spacing: var(--font-letter-spacing-d-2xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-2xl-bold::before,\n.display-2xl-bold::after {\n  content: '';\n  display: table;\n}\n.display-2xl-bold::before {\n  margin-bottom: -0.135em;\n}\n.display-2xl-bold::after {\n  margin-top: -0.205em;\n}\n.display-2xl-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-2xl);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-2xl);\n  letter-spacing: var(--font-letter-spacing-d-2xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-2xl-semi-bold::before,\n.display-2xl-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-2xl-semi-bold::before {\n  margin-bottom: -0.135em;\n}\n.display-2xl-semi-bold::after {\n  margin-top: -0.205em;\n}\n.display-xl-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-xl);\n  letter-spacing: var(--font-letter-spacing-d-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xl-bold::before,\n.display-xl-bold::after {\n  content: '';\n  display: table;\n}\n.display-xl-bold::before {\n  margin-bottom: -0.145em;\n}\n.display-xl-bold::after {\n  margin-top: -0.215em;\n}\n.display-xl-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xl);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-xl);\n  letter-spacing: var(--font-letter-spacing-d-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xl-semi-bold::before,\n.display-xl-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-xl-semi-bold::before {\n  margin-bottom: -0.145em;\n}\n.display-xl-semi-bold::after {\n  margin-top: -0.215em;\n}\n.display-lg-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-lg);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-lg);\n  letter-spacing: var(--font-letter-spacing-d-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-lg-bold::before,\n.display-lg-bold::after {\n  content: '';\n  display: table;\n}\n.display-lg-bold::before {\n  margin-bottom: -0.015em;\n}\n.display-lg-bold::after {\n  margin-top: -0.095em;\n}\n.display-lg-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-lg);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-lg);\n  letter-spacing: var(--font-letter-spacing-d-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-lg-semi-bold::before,\n.display-lg-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-lg-semi-bold::before {\n  margin-bottom: -0.015em;\n}\n.display-lg-semi-bold::after {\n  margin-top: -0.095em;\n}\n.display-md-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-md);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-md);\n  letter-spacing: var(--font-letter-spacing-d-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-md-bold::before,\n.display-md-bold::after {\n  content: '';\n  display: table;\n}\n.display-md-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-md-bold::after {\n  margin-top: -0.255em;\n}\n.display-md-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-md);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-md);\n  letter-spacing: var(--font-letter-spacing-d-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-md-semi-bold::before,\n.display-md-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-md-semi-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-md-semi-bold::after {\n  margin-top: -0.255em;\n}\n.display-sm-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-sm);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-sm);\n  letter-spacing: var(--font-letter-spacing-d-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-sm-bold::before,\n.display-sm-bold::after {\n  content: '';\n  display: table;\n}\n.display-sm-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-sm-bold::after {\n  margin-top: -0.255em;\n}\n.display-sm-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-sm);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-sm);\n  letter-spacing: var(--font-letter-spacing-d-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-sm-semi-bold::before,\n.display-sm-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-sm-semi-bold::before {\n  margin-bottom: -0.195em;\n}\n.display-sm-semi-bold::after {\n  margin-top: -0.255em;\n}\n.display-xs-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-d-xs);\n  letter-spacing: var(--font-letter-spacing-d-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xs-bold::before,\n.display-xs-bold::after {\n  content: '';\n  display: table;\n}\n.display-xs-bold::before {\n  margin-bottom: -0.199em;\n}\n.display-xs-bold::after {\n  margin-top: -0.195em; /* Continue from here */\n}\n.display-xs-semi-bold {\n  font-family: var(--font-family-title);\n  font-size: var(--font-size-d-xs);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-d-xs);\n  letter-spacing: var(--font-letter-spacing-d-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.display-xs-semi-bold::before,\n.display-xs-semi-bold::after {\n  content: '';\n  display: table;\n}\n.display-xs-semi-bold::before {\n  margin-bottom: -0.259em;\n}\n.display-xs-semi-bold::after {\n  margin-top: -0.295em;\n}\n.text-xl-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-bold::before,\n.text-xl-bold::after {\n  content: '';\n  display: table;\n}\n.text-xl-bold::before {\n  margin-bottom: -0.329em;\n}\n.text-xl-bold::after {\n  margin-top: -0.359em;\n}\n.text-xl-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-semi-bold::before,\n.text-xl-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-xl-semi-bold::before {\n  margin-bottom: -0.329em;\n}\n.text-xl-semi-bold::after {\n  margin-top: -0.359em;\n}\n.text-xl-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-medium::before,\n.text-xl-medium::after {\n  content: '';\n  display: table;\n}\n.text-xl-medium::before {\n  margin-bottom: -0.339em;\n}\n.text-xl-medium::after {\n  margin-top: -0.399em;\n}\n.text-xl-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xl);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-xl);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xl-regular::before,\n.text-xl-regular::after {\n  content: '';\n  display: table;\n}\n.text-xl-regular::before {\n  margin-bottom: -0.339em;\n}\n.text-xl-regular::after {\n  margin-top: -0.399em;\n}\n.text-lg-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-bold::before,\n.text-lg-bold::after {\n  content: '';\n  display: table;\n}\n.text-lg-bold::before {\n  margin-bottom: -0.339em;\n}\n.text-lg-bold::after {\n  margin-top: -0.399em;\n}\n.text-lg-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-semi-bold::before,\n.text-lg-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-lg-semi-bold::before {\n  margin-bottom: -0.339em;\n}\n.text-lg-semi-bold::after {\n  margin-top: -0.399em;\n}\n.text-lg-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-medium::before,\n.text-lg-medium::after {\n  content: '';\n  display: table;\n}\n.text-lg-medium::before {\n  margin-bottom: -0.349em;\n}\n.text-lg-medium::after {\n  margin-top: -0.389em;\n}\n.text-lg-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-lg);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-lg);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-lg-regular::before,\n.text-lg-regular::after {\n  content: '';\n  display: table;\n}\n.text-lg-regular::before {\n  margin-bottom: -0.349em;\n}\n.text-lg-regular::after {\n  margin-top: -0.389em;\n}\n.text-md-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-bold::before,\n.text-md-bold::after {\n  content: '';\n  display: table;\n}\n.text-md-bold::before {\n  margin-bottom: -0.349em;\n}\n.text-md-bold::after {\n  margin-top: -0.389em;\n}\n.text-md-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-semi-bold::before,\n.text-md-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-md-semi-bold::before {\n  margin-bottom: -0.349em;\n}\n.text-md-semi-bold::after {\n  margin-top: -0.389em;\n}\n.text-md-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-medium::before,\n.text-md-medium::after {\n  content: '';\n  display: table;\n}\n.text-md-medium::before {\n  margin-bottom: -0.349em;\n}\n.text-md-medium::after {\n  margin-top: -0.389em;\n}\n.text-md-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-md);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-md);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-md-regular::before,\n.text-md-regular::after {\n  content: '';\n  display: table;\n}\n.text-md-regular::before {\n  margin-bottom: -0.349em;\n}\n.text-md-regular::after {\n  margin-top: -0.389em;\n}\n.text-sm-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-sm-bold::before,\n.text-sm-bold::after {\n  content: '';\n  display: table;\n}\n.text-sm-bold::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-bold::after {\n  margin-top: -0.349em;\n}\n.text-sm-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-sm-semi-bold::before,\n.text-sm-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-sm-semi-bold::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-semi-bold::after {\n  margin-top: -0.349em;\n}\n.text-sm-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  position: relative;\n  display: inline-block;\n}\n.text-sm-medium::before,\n.text-sm-medium::after {\n  content: '';\n  display: table;\n}\n.text-sm-medium::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-medium::after {\n  margin-top: -0.299em;\n}\n.text-sm-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-sm);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-sm);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  position: relative;\n  display: inline-block;\n}\n.text-sm-regular::before,\n.text-sm-regular::after {\n  content: '';\n  display: table;\n}\n.text-sm-regular::before {\n  margin-bottom: -0.299em;\n}\n.text-sm-regular::after {\n  margin-top: -0.299em;\n}\n.text-xs-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-bold::before,\n.text-xs-bold::after {\n  content: '';\n  display: table;\n}\n.text-xs-bold::before {\n  margin-bottom: -0.291em;\n}\n.text-xs-bold::after {\n  margin-top: -0.416em;\n}\n.text-xs-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-semi-bold::before,\n.text-xs-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-xs-semi-bold::before {\n  margin-bottom: -0.321em;\n}\n.text-xs-semi-bold::after {\n  margin-top: -0.416em;\n}\n.text-xs-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-medium::before,\n.text-xs-medium::after {\n  content: '';\n  display: table;\n}\n.text-xs-medium::before {\n  margin-bottom: -0.285em;\n}\n.text-xs-medium::after {\n  margin-top: -0.396em;\n}\n.text-xs-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xs);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-xs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xs-regular::before,\n.text-xs-regular::after {\n  content: '';\n  display: table;\n}\n.text-xs-regular::before {\n  margin-bottom: -0.291em;\n}\n.text-xs-regular::after {\n  margin-top: -0.396em;\n}\n.text-xxs-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-bold);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-bold::before,\n.text-xxs-bold::after {\n  content: '';\n  display: table;\n}\n.text-xxs-bold::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-bold::after {\n  margin-top: -0.416em;\n}\n.text-xxs-semi-bold {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-semi-bold);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-semi-bold::before,\n.text-xxs-semi-bold::after {\n  content: '';\n  display: table;\n}\n.text-xxs-semi-bold::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-semi-bold::after {\n  margin-top: -0.416em;\n}\n.text-xxs-medium {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-medium::before,\n.text-xxs-medium::after {\n  content: '';\n  display: table;\n}\n.text-xxs-medium::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-medium::after {\n  margin-top: -0.416em;\n}\n.text-xxs-regular {\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-t-xxs);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--font-line-height-t-xxs);\n  margin: var(--spacing-none);\n  padding: var(--spacing-none);\n  display: inline-block;\n  position: relative;\n}\n.text-xxs-regular::before,\n.text-xxs-regular::after {\n  content: '';\n  display: table;\n}\n.text-xxs-regular::before {\n  margin-bottom: -0.291em;\n}\n.text-xxs-regular::after {\n  margin-top: -0.416em;\n}\n/* Button slot styles */\n/* .slotted_button_text.primary {\n  color: var(--color-text-inverse, #ffffff) !important;\n}\n\n.slotted_button_text.secondary_gray {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.secondary_color {\n  color: var(--color-text-brandRed, #e21b2e) !important;\n}\n\n.slotted_button_text.tertiary_gray {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.tertiary_color {\n  color: var(--color-text-brandRed, #e21b2e) !important;\n}\n\n.slotted_button_text.link_gray {\n  color: var(--color-text, #4b5565) !important;\n}\n\n.slotted_button_text.link_color {\n  color: var(--color-link, #075db2) !important;\n}\n\n.slotted_button_text.primary.destructive {\n  color: var(--color-text-inverse, #ffffff) !important;\n}\n\n#slotted_button_text.primary.disabled,\n#slotted_button_text.secondary_gray.disabled,\n#slotted_button_text.secondary_color.disabled,\n#slotted_button_text.tertiary_gray.disabled,\n#slotted_button_text.tertiary_color.disabled,\n#slotted_button_text.link_gray.disabled,\n#slotted_button_text.link_color.disabled {\n  color: var(--color-text-disabled, #9aa4b2) !important;\n}\n\n#slotted_button_text.secondary_gray.default.destructive,\n#slotted_button_text.secondary_color.default.destructive,\n#slotted_button_text.tertiary_gray.default.destructive,\n#slotted_button_text.tertiary_color.default.destructive,\n#slotted_button_text.link_gray.default.destructive,\n#slotted_button_text.link_color.default.destructive {\n  color: var(--color-text-danger, #b51726) !important;\n} */\n.pagination_div{\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-top: 1px solid var(--color-border-subtle, #EAECF0);\n}\n.pagination_entries{\n    display: flex;\n    gap: var(--spacing-2);\n    align-items: center;\n}\n.pagination_btns{\n    display: flex;\n    gap: var(--spacing-3);\n}\n.entries_dropdown{\n    width: 6rem;\n}\ngb-input-dropdown{\n    z-index: 99;\n}\n.pagination_numbers{\n    display: flex;\n    align-items: flex-start;\n    gap: var(--spacing-half);\n}\n.pagination_button_group{\n    display: flex;\n    border-radius: var(--rounded-sm);\n    border: 1px solid var(--color-border-subtle, #CDD5DF);\n    box-shadow: var(--shadow-xs);\n    align-items: center;\n    overflow: hidden;\n}\n.page_numbers{\n    color: var(--color-text, #4B5565);\n}\n/* Pagination Type Styles */\n.pagination_div.page_default.desktop,\n.pagination_div.page_minimal_center_aligned.desktop{\n    padding-top: var(--spacing-5);\n}\n.pagination_div.card_default.desktop,\n.pagination_div.card_minimal_right_aligned.desktop,\n.pagination_div.card_minimal_left_aligned.desktop,\n.pagination_div.card_minimal_center_aligned.desktop,\n.pagination_div.card_button_group_right_aligned.desktop,\n.pagination_div.card_button_group_left_aligned.desktop{\n    padding: var(--spacing-3) var(--spacing-6) var(--spacing-4) var(--spacing-6);\n}\n.pagination_div.page_default.mobile,\n.pagination_div.page_minimal_center_aligned.mobile{\n    padding-top: var(--spacing-4);\n}\n.pagination_div.card_button_group_center_aligned.desktop{\n    display: flex;\n    padding: var(--spacing-3) var(--spacing-6) var(--spacing-4) var(--spacing-6);\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 0.5rem;\n}\n.pagination_div.card_default.mobile,\n.pagination_div.card_minimal_left_aligned.mobile,\n.pagination_div.card_minimal_right_aligned.mobile,\n.pagination_div.card_minimal_center_aligned.mobile{\n    padding: var(--spacing-3) var(--spacing-4);\n}\n.pagination_div.card_button_group_right_aligned.mobile{\n    display: flex;\n    padding: var(--spacing-3) var(--spacing-4);\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-end;\n    gap: 0.5rem;\n}\n.pagination_div.card_button_group_left_aligned.mobile{\n    display: flex;\n    padding: var(--spacing-3) var(--spacing-4);\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n    gap: 0.5rem;\n}\n.pagination_div.card_button_group_center_aligned.mobile{\n    display: flex;\n    padding: var(--spacing-3) var(--spacing-4);\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 0.5rem;\n}\n.card_default_buttons{\n    display: flex;\n    align-items: center;\n    gap: var(--spacing-4);\n}";
 
@@ -109,10 +109,10 @@ const GbPagination = /*@__PURE__*/ proxyCustomElement(class GbPagination extends
         window.removeEventListener('resize', this.handleResize);
     }
     render() {
-        return (h("div", { key: '1f3c83e615dba67df2682610725e81b272c8979c', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'db7675efd4add0c7abd2efb3cde9c5c6e5e28d76', 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: '3b579fa2d8c60e9794806ed5948b667cb7a2bacc' }, "Previous")), h("div", { key: '5625869657738c0aa520f3f9ff73459413cecb65', class: "pagination_numbers" }, this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: '1ae3b0650ebd6a59ff4f8f15338b50b840b6d173', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '44f296332b50ecd9ba0194275f1b9b85d999e65f', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'c85e54f2ea4116543a9c24b850cc7cbe045eab95', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '078e57eafa581c2c1a0984a3a40c0dc247bd1d75', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '14b5c856708a8b476b0e5f3b519a0b1eb244907a', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'ce77d6ab3dc8d9a3211cfa591dabf2b28f183d6f', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'aa243b7220e4c2f8611ad35fe1a347df20463a92', shape: this.shape }, h("p", { key: '864323f2640fecdb9251895ac86663b6882f8a05', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '931c939a6f26d023774b05620851702c5b85afa1', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: 'a3130998f94a0aef9b655bcb390c6e8ee040f47d', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '1cb8912fc0031fa898f1a1f4ecd9585476efeb5e', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: 'a23eb891944f31759d2ac8e9b8495d573f50900f', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: 'b45b8850cff7e71605248fe809794038c8bf416b', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'e78db928c02925d06030cc9a73cbf78d847a574c', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: '37e8714983224c5b1d850bf89f1d82b4e258da99', 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: '063e6f1aa0698d64d05516643c126768358a8e58' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '94f41b3e51d4a24515f54575209874d3e2b50281', 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: 'ef34782690a6b49296c191cd3a3b3e95f580b087' }, "Previous")), h("div", { key: 'aa15e2825789dc860cee3fc287f3bd3f44d51794', class: "pagination_numbers" }, this.internalTotalPages <= 5 && (h(Fragment, null, this.internalTotalPages <= 5 &&
-            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'cbc8944d1a543c0112048db71c49eb719a449e07', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '72325e20ce5410012bc1deecd6bae63c7fa00a43', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '0bcb31e01df1c067e1bd10e7752b0af8e8c76e33', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: 'f8491b4e4419de13678bf2809b1e7d175c88dd24', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'd1fff3943d9f35fe8555f3455c4b25026a0038d0', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '6180abaad08b3b345196d49efe36539b9c4112fb', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'e546195cd9b7a3142dc59ec263c5dc2816491b38', shape: this.shape }, h("p", { key: 'a220ab96926cda31c7bc954a32f175d06a52caef', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'f114e7c9e88eeb7470ac16d393e0b7dd1529130f', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: 'c8b984a875dc62070d29d9d98f07e328b155b06d', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '8ec3ae360d7c0c7dc5b7fcdf576b22eedf1e4298', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: 'eff87f620f78e11a4c274c6d2b80642c4a65a236', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '7ea4d5e387ebe37782b65b88eb804a40e6f802a7', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'e57ef5a4f1a0c02ce5aafaafe1921e4d673d4133', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: '281b05f7ce2cee49d14f64ba4da7557cb76cf23d', 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: '159c8665ea1ace036d0d5980604490fe8fe93efe' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '0baaf5c14761085b9931495f68825397b3f44156', class: "pagination_entries" }, h("div", { key: '55a6c81499b6a9a62a44e676e452b6d55611c4c0', class: "entries_text" }, h("p", { key: '7bf2010864e1bf57d0b73ae87e274fc6a44da8e2', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '3749a9bd896750d97f508747b4645fa05f513cbb', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '9ef5a847081f4e31b47ee1347b2bc7c2a7df291e', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: 'cc0accd48df7d994a5ff686b01847e5762124cd8', class: "pagination_numbers" }, this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'abd09c90b570f81b489a18ef16360fb57e6e248d', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '74cdc0b6ad3d27ef483ce37b7e6145304f3d89e6', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'd81c56b7661cd9e3394168dff427de158c874e7b', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '9417966f8603f59e84aa3e6a75023607d84c33fc', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'e27418d4b65b12a783c32107201a848dc8cec746', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'ed86084fefea0a335722235a845a3fafa8511de8', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '29f337edef82b196ad6730472cbfc12104706e4e', shape: this.shape, state: "default" }, h("p", { key: '822ce20380423fa91bd06d320bda4e6fa829ff79', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '5b387747b171f846d1d43042845018f524931bcf', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: 'db2f7f4fde691d80c3af90a7613915908e1ee709', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: 'fac24a7f33a8cf82b2d0c10d3a5b889127ffb323', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '3d7d344119948cf3c74b2e5f0a9f9385680da700', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '20d2a414bd8b3bc5a843d589f3adc90d0007c668', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '5e5837fb6a1093bab928a0eaf8399b34753d6678', slot: "page_number" }, this.internalTotalPages))))), h("div", { key: 'faf1f3dc6416ebd8f8d2b5aa8ac634d893250a95', class: "pagination_btns" }, h("gb-button", { key: '7d2ad5adca1b280c0bbfb7fcf398a1f3af8b23d1', size: "sm", hierarchy: "secondary_gray", icon: "only", state: this.totalPages === 1 && this.currentPage === 1 ? 'disabled' : this.currentPage === 1 ? 'disabled' : 'default', "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("gb-button", { key: '6f7ac42631bea62cd45e98674a81e0f65df15300', size: "sm", hierarchy: "secondary_gray", icon: "only", state: this.currentPage === this.internalTotalPages ? 'disabled' : this.currentPage === 1 && this.totalPages === 1 ? 'disabled' : '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: 'eb8463aeae8ff1e7e6f74753e43c5ab19b89d719', class: "pagination_entries" }, h("div", { key: 'f2ab6213e8a609681499628f2e4ab0526efe88a2', class: "entries_text" }, h("p", { key: 'f9e58f098dd9cc6ca1b27dfa38f0a95c6d45cb6e', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '7bcbebdab99f6128d219e8a2a7447e631174b4d1', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'd97ae30dd34385b2dfaa51aa41f02365fd5367ea', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: '5c379728cb7438455d3aa21f9d5646762e985880', class: "page_number_text" }, h("p", { key: 'aeb995e87badce556a4d3685b2999b0829909796', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: 'e1957dd6f148e56f62f4cefa4b0ad89f6598e808', class: "pagination_btns" }, h("gb-button", { key: 'f9d4ce563e813055f827efcd466e3da484965274', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'e8b55420d084dfb37a2b081899c03f890688e442' }, "Previous")), h("gb-button", { key: 'e968e02686d0d1a1b8b2be0fe7bb84ce7468d40b', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'ce6acd121b3d0257956b5691e45645c5a844e675' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'e30a993965754df98418a44bcd1c63b85930a6fc', class: "pagination_btns" }, h("gb-button", { key: 'd67ef3b11ab4821a84c4a0e06dc7aa59b9ee57a7', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '2a7b41a267b27610bfc27992e09852d2f5d94fab' }, "Previous")), h("gb-button", { key: '7cb4c6fef430f37071458fa652cbc9b518ef1d5a', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '0c141eabb8eb3dff2fcbbd7fc6f30b2bba3ce549' }, "Next"))), h("div", { key: '70c9e67a49116856d7661e519934372cbc6847dc', class: "page_number_text" }, h("p", { key: '9c8fe91856d909ea186f2361cf0148b210531ce9', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: '69e9aa737a48fd098b67d31be2217708e1c0ff69', class: "pagination_entries" }, h("div", { key: '6dff7c43e33f71b2c9b8506157076d61beea8299', class: "entries_text" }, h("p", { key: '5ef4c144123e4b9bf5fed23d9c88f6a95a487010', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '110108da4b979aac321a0e0e1f5c412e4b082b2a', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '631b6c7b658525b1fa8237c92029349f713bd407', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '964a91019321381f30d99f12394b1333534926f4', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '7a40ca82aa33080e4f002a99b1e8446bbb6f5673' }, "Previous")), h("div", { key: '4b7737f96c6774d8969957a06efce85b301411fd', class: "page_number_text" }, h("p", { key: 'c721c466eae4faa468c35b35d5514a6697f58f0d', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '61853fb71d5e83e32f39fa1907748304bf1b8832', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'd760684f8393f7601a9aa0033bd26e3c292f81f6' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '15e52576377f056db99d38c8b4d2d131ff6d7f13', class: "pagination_entries" }, h("div", { key: '0cd3bf5cf8acf36706075d819575389453c72a3b', class: "entries_text" }, h("p", { key: '47e1e3f33cae4c4494e3d9c5e658ef7da24a1c0b', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '6ffffebf9038699713f4a12a4d0fb3acd916caf8', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '0fc367d0fb23afe7e20cb9df7d0d9a0c6ab7d1ab', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: '1c50fa8793130b15a57a1be27eefaac3bc686978', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '739c35309d97dbba7a06685d6b982b0cb4a5e59d', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '8394b0fe6dbdb77b5e591a3f935aa0c5fd1f7e0f' }, "Previous")), this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '19e8352d62d6aeb8aa0f5ea2972bec57947c5a28', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'efad416333def26fc678ff4090c7e3bdf2e9c731' }, "1")), h("gb-pagination-button-group-base", { key: '90afae71cdf66183738a515880819952bf55fe5a', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'ec9ac948ed8850c1858b4bf01467a5d1798b5bcb' }, "2")), h("gb-pagination-button-group-base", { key: 'ce9c3a29e2435e29dfdbae72957f4665dd2f9a3b', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '7faf1f0c2a899154ce0a633c9b662d71713bfdfc' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'e9e636b5c4787c6beeee1d3ca76ffdf351703f7f', icon: "false" }, h("p", { key: '900428b03017589249234f2a3596a487e3a7c0f7' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '725be9d1b84c48816ad229d037959365a45bedfd', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'eeec9571af7c718ca4c26a088d0771513eeffa1a' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '9286bde2c796d55e3d8bbb04b60fcf39df6f646d', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '8c904df8c064e3cc45358f0aa6fc730d2681520b' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'b2874b87e993b138b7a40d7d3c58189a2e32db67', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'ddf8da73907a19aa507e472179816b7b456cf60c' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '78495b7009b05edffa376791562509520eeb9b85', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'a5d63dfdd6428cf15b4f54485ab0a45c39255c14' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '666bd69ef32d4319e311670b745c80b53559b751', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'd1a7a1eda1bce5f379293c81f5191a1858c7fd27', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'fc752133051015fcab97f601b3e1e66e36445930' }, "Previous")), this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '774fb296b58285a3f886218ab4b46c9fca85235d', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '25d9552bcc85a126a9b3f3bd127cfb1bafba7ad1' }, "1")), h("gb-pagination-button-group-base", { key: '8ce46dfa474f85573f327deb6260c724706b537c', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '985820dcb86000abe38a7ba3ec0928d94cd05d00' }, "2")), h("gb-pagination-button-group-base", { key: '05c24005205a3dafc6c0d7b306100a3ccd74a916', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'fca33e0709a7341cf88a53d2130178239c6ad48d' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '6504c25a66314afeb0cee16a1af7c891faf8006f', icon: "false" }, h("p", { key: 'b0dc06aae7b6dda631a195e7a2d30b23012a1e12' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '6ff8d91ada922a8cd1660a1ecbaafd025f3eee84', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '585e3df3b056a58f076f515db4df4a92833719d6' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '3de90d2c1e8d8a57f9bd8c8be3e4a4898d046073', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'c403c5d32bb9dd68dfbf356c1f613c535a51a44c' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'd142d4717cb2dadc924e590da52d39b8c2a0eac5', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '7fc98b761b9623e0b5de83a236c90a7cf96c34a0' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'b1d3efb17f28be7051071237b7f344f209cdb481', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '4b854bc9145f4ee71afe076e2a2702b698bd12d0' }, "Next"))), h("div", { key: '3774c2a042fc415ab6dbf93a30c8eb91c2916d59', class: "pagination_entries" }, h("div", { key: 'a960e9a8c5c6b135e3287d249a5938d272c43070', class: "entries_text" }, h("p", { key: 'cf895189cbafa9d0223a96d763ab640ab02c054e', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'a45a1916349d68dd519b9ecfbeffc182268e9d53', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '9f1bacc5e57ab6c7f6059bc8df3eca04599b9487', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '4a85f3750de3087f29cf6bb09dd26ec1716d75fb', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '653461bd2f8428a9100de57df21ccaae2d96c7dc', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'c8fa43f0f72b2babe8fc4bd6c4893a054bba4a09' }, "Previous")), this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '9b7e131bdbb1d1566a5472e70f3d1e93ec5d1d26', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '03e1ec0e8f2d6c6e827777476663e1972c7c0979' }, "1")), h("gb-pagination-button-group-base", { key: 'e0db3970c8dd248a24c46bc5ec2ff972fd376994', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '799de98b64935e95b9ff1a0ff5698fa0123a9127' }, "2")), h("gb-pagination-button-group-base", { key: '1cf4bd2be7a06c7fe8d05d0fef32b7a05ace17ad', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '467d9d79502c7d8714318051382eb683cc9278d8' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '64a4787aa7098e983401bf69f4b786cf2d14db07', icon: "false" }, h("p", { key: 'bb521b34a0a5bc9d9805f85658c3f88e831a84d4' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '6caf9c27c9ddc17726dc3e58430c7f41f4e16e46', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'cef4da80a3599e725ec4421c1f81d01485f3d07a' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'a7c379e988dee96c00bfdd86af1e2d7d41b1ec8a', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '52d440799c5ee8aed3cfc4022536c1f30892ecae' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '540168fa8e689aa57c091c8f74cbf07d436f38fc', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '5ff01859e5230448fa2c97f5768b6c22ea7c4613' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '1899789c3f7fb4037fe7426a3e60e1e80b815b0d', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '892c780295b2ec58af65bb00dd45785c4b3d54c0' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '9e7a3cb963c30f6eb9304dea3f2d220f43dbe2e4', 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: 'f233e30d0b1c88ae5304d92620376c279377f1e0', class: "page_number_text" }, h("p", { key: '3a22503f67ff7e6a4c298be4e6b4440549cef2ce', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '213c59b27e99f78aa87dd2fbb4463c6e1716c4fc', 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: 'cc5072199e2edf49be3bb29d2c072712dd745933', 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: 'f879c8765e3086b2f0c5ffba294b24063649ad1e', class: "page_number_text" }, h("p", { key: '7379e2f0b000183a93142271691b417110be2868', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'dcc2b228853ad192bc564be738b3eb4137300888', 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("div", { key: '941e167875232b34bd0ef77a60ad6e262c5d53a6', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '1520db1a10dac49571f727b42c6d3c46f51d9b56', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected })), h("div", { key: '0c8fc15082e7d79cd3ad6380a38457ba0ca22d86', class: "card_default_buttons" }, h("gb-button", { key: '1fbab580fcf616e472536de16edf3864ec62fd18', 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: '8a83f6aec8a924493b49bbda03c334f4c11615e2', class: "page_number_text" }, h("p", { key: '1720c00ef271e0fee7e5176b134ef7dbfb0288bc', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '0f1e412714a61ea7f0647786517574fab87a0485', 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: 'c2052b5b9166981d66d51712fcefd5a976c8a498', 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: '782940f9c4561cc65bb33b998a44455c48608173', class: "page_number_text" }, h("p", { key: '4c92be5721547f8e4d63310526bb64a7635f1b70', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'd98942d73b02d0d564bdebfa8507ba575365b5bc', 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: 'a50b508625261ac6cb3c1260ffe3335de4f2c731', 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: '6d9038cf6b97361b0447c3ea5a200141cfe025f9', class: "page_number_text" }, h("p", { key: '4214c23344f8325fbbb12d54f768cb51f5c060e2', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'b75aec6ac45b584c4618f6e41cae1a05af1db0d6', 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: 'c74f3dadf3a25ba697caaf0240bd1968239451df', 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: '7ecff987735fba2491a29c2539f32f0427db00c3', class: "page_number_text" }, h("p", { key: '88b101f8ee5f601837234dd5aa946ec3eb53d2d2', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '7aabc182bbf39cce8438e114083970998507e6d7', 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: 'ec2429f6ac96a78aa22f2008573f5f6bac59b775', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '62ccafaeeac783ce5ecc557a9e5a98b97fd16a9e', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '53a55f99c39a2861476a76af148157a1f478dcb3', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '06d140086ffa92224f1b70c134bdbb477c4ae933' }, "1")), h("gb-pagination-button-group-base", { key: '817dab53c7c5c9bbb8469b81b766ab3dadf4b459', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '3097fbb9a825aac0f369cb30b771e929217738e8' }, "2")), h("gb-pagination-button-group-base", { key: 'e7ff39446eb928816deabdc5bfe5b312e22ecac8', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '05c040906f0442eba6bc74009d633fd4af3f8b38' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'bdc12762602f47a1d688b320a9852eed92735bb2', icon: "false" }, h("p", { key: '85dbce1e58783aa0eb250fff1803de7f8c61ba36' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '477d2dbd3ea9c3cb240c10448abc0c9acd753c9a', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '06eace704bf1d1140667adeba218c0c7e2f9b51a' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'c59d439d1be3b4155662b523aac19f80bcda07a0', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '549cfba654a7fae510dfa12d176ab53297c0fc22' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '8fec62a21472f08bf461d6787a113e7eb8d51880', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '87a03b69048e986fb65881a448b6a744bd6af5a7' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '361d4e409a47ac1fe882ff9d25a8d11c2d34d5ab', 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: '749b8dcd65a4d1b1dc266bf1a5b8d8ec47e8b780', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '6531e2b5b52ff7b6dbb891be678b75d87319b7d6', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'd79b09698970769c18dd2f6d7502fde188edb06a', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '4a2f92c43fa8c0d5b9ac327913df014fa2ab6fe3' }, "1")), h("gb-pagination-button-group-base", { key: '0d90404966cced28ab53127c095dffce9e4b0db5', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '676971c7128fe0a5423ad8858ca201fb6b81919b' }, "2")), h("gb-pagination-button-group-base", { key: '556626a45d065efbb2119863862d3ca54a3fbeaa', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'cb5db33aa75ef03040cfaf5da875a432c350d2b4' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '96f1baa0d7ef055fbebca601db764c8a09b84ce4', icon: "false" }, h("p", { key: '577167ba8b9a3799d037de257f65c332bb0f4572' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'b0cd01ba8cffec917f2b84a2b839e8469c01cfe1', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'cf7b55e0a541bcf2135c2bbce76ec5e8a555b7e2' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'e149ef032c860569d374e78b97a0d0bdffb5bcd9', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'aaab1b54ede9c6a44a37fb1b01cc4fd560a5b245' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'b638df1404ac76f5bf9ec959a89e004450bd228e', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '9f8fb9479693bc867c0238b955e2599f1873258c' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'cc4140747322d46c2b8b67808155c4a6071742f8', 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: 'b0aaefe5929e54749cb8d70888e51b8e402be308', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'c87cc8b1c2b432764db0d23848a6d1e10abb2844', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '9a68be93aadab6a6df0d5466f73452c6cee6f5f7', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '507ee5feb2f5f4d2b0d1bfb7ca3f5aaf93ff375c' }, "1")), h("gb-pagination-button-group-base", { key: '7011f93f0caa2607c622ca824948311ea6df7399', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '565e71f48007bc229261e4db3269c0758381c125' }, "2")), h("gb-pagination-button-group-base", { key: '472211e58c5d1979d752229261251d0e7f7b81b2', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'c52aa76d1458a43e6fd1319ce2ef14f0e5f6fdd5' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '20606a606a9ddf893d05d122a73b037b06799fc6', icon: "false" }, h("p", { key: 'def817926c4353a574719dbba14847d16284ce14' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '1ff86b0706071e6df62949a925bc8bccb3049e0b', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '532a54faca0f0dfe6ca8cfe1070082d772430c67' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '9efefdea679b07223b41a666dd0bf57710b7cf52', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '7e40e7054f681f2d52e27d329e1f339dec5d8201' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'afa301bcce9c53afec96e794321b4408507f047a', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'c1922fe87885bd0de7c59c24b7471de0e9843565' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '5487b5b5b513b10a73f26fdd15236ecbfc408411', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
+        return (h("div", { key: 'eac4b639572d03d936801186caa3230bc2ef45df', class: `pagination_div ${this.type} ${this.breakpoint}` }, this.type === 'page_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: 'f725310eb6fe640f03893edbbe69f60d571fcca9', 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: 'd0f014cb399a1203d130411e72f5147e870c219b' }, "Previous")), h("div", { key: '3b805b5578c8d5563d403bc8fbcdc8e5227851b9', class: "pagination_numbers" }, this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'abb23e8208f555b7460eed4cfe09c2f874880a80', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '61b2eddaffdfdb2ffcd66190a9cd6267a7d4226a', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '2075931cab68a1a1e570ea7e392c00b2c6de4761', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '921b46d9d57178ae71f9c115198851fdfe71aeb6', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: 'f99eb0c40c5a00e4d038768e06f2519f007433cc', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '53eb687a67d2889440c220e9b0ead49934cbe0c8', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'fbc4b13b2a6a569a88ade6917977bb68bfc7170a', shape: this.shape }, h("p", { key: '7fbb5f7a2b9b43e72343035afb7239abb1173457', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: 'fab58f651128448278657bf6329033bf7b845741', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '36525742dc58ec3859221c9ffe8876fcb1c04520', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '490e82e0e508c0a9203f3e98760280ce1504709c', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: '03ab55671a3563f3c98792f54fedae73278f013c', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: 'f83620928851cc998551b02ee2d7af5ec92bd42b', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'a17d768d624d5add59206ff0e9928f8b8968b250', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: '4896f888b7aa496016f18e809cc742aea4a92666', 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: '8af86999bff3127a641c79552b9775c74cb3eb0c' }, "Next")))), this.type === 'page_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '0bc76318013feaa7442fe9ef68490cf57c53d833', 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: '8fef1a341a79fed9a87454cbf6d6cf277755e73d' }, "Previous")), h("div", { key: '6f3016bbf3e6f5212f7087c5fc80ae9dab806aec', class: "pagination_numbers" }, this.internalTotalPages <= 5 && (h(Fragment, null, this.internalTotalPages <= 5 &&
+            this.pages.map(page => (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage === page ? 'active' : 'default', onClick: () => this.setCurrentPage(page) }, h("p", { slot: "page_number" }, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'e7792b25a962804d7ab8d6065fc9b6d3ba15cd68', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: 'a6f4e7ff91d3622846f1702d43358ab6dc90614c', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: 'eb248e926b9be6ea832b748e2cdd72e54a8a1b00', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '9f482d88df60344257653acef58fd127b79a9eb1', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '406a65bc5b20cbb66e8b94be789638dd2757af00', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: '3837c035d08daa9840f905592ac3a32f01b80089', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '3f31c38a2239a649c4fdf229e3df02f5f83c0ff4', shape: this.shape }, h("p", { key: '0451a770bd3055e2b065fa6b36efd7fff264df4d', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '7fecfa25246116992b2526d4aa45116af30b59de', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '8f713d977d49e2de7f7d0130a9b8fe618f1b9396', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '20a89e2083bc5bff35d234ccea2c72726387c15c', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: 'dae3ba656c077e8b335242098cd0480823b2221d', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '7a9587e9674b9d15c4306ca016d832263efe52d3', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: 'ee84465bdcf87529e1f76acc3992f329561afeb9', slot: "page_number" }, this.internalTotalPages))))), h("gb-button", { key: '6ac6332d43b8f6c011cbd7b12e754fbaf0db6784', 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: '13896e91f11fae674c80eb044c9ca154f1ebc2d8' }, "Next")))), this.type === 'card_default' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'e6deb23101350d5768f2a2b440bb2427f59ba897', class: "pagination_entries" }, h("div", { key: 'aa0c7342bd90281b511aba918e1f05bafae1a2df', class: "entries_text" }, h("p", { key: '3728992a3f602ce5784f856c444e09fb8b77956e', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '27a1d8e8927459ebdac36e608970ff460b71ba03', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'cc2fad3d6133db49a8c02a08d55576d4b7dd61c0', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: '6f8d7303d6299285f37280bde78dba4bf85e756c', class: "pagination_numbers" }, this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-number-base", { key: 'c7fab32f593aa86f4830f8df22b9daa146f68764', shape: this.shape, state: this.currentPage === 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(1) }, h("p", { key: '654a06e360a052f2c8d1d89cda9083c239426b0c', slot: "page_number" }, "1")), h("gb-pagination-number-base", { key: '59403d624cf2471c246b8b413df29bb0b01a1f0d', shape: this.shape, state: this.currentPage === 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(2) }, h("p", { key: '00c7aa36c77e4cec7d769aabf219fdadb1fabd89', slot: "page_number" }, "2")), h("gb-pagination-number-base", { key: '361c1a9783aa0fea59f5ecde9ddfbe2027d27638', shape: this.shape, state: this.currentPage === 3 ? 'active' : 'default', onClick: () => this.setCurrentPage(3) }, h("p", { key: 'b8572e2a9707c19d05323ccb9e236689e4201ecf', slot: "page_number" }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '3ac858943b4e2f7c8c0bfe00b458827a3333211a', shape: this.shape, state: "default" }, h("p", { key: '7bcc73769fac6d4196390f3ac8849ddc889b5741', slot: "page_number" }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-number-base", { shape: this.shape, state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", { slot: "page_number" }, this.currentPage))) : null, h("gb-pagination-number-base", { key: '917b2b3296bda2955adcc6d9cff3496f65868dc5', shape: this.shape, state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 2) }, h("p", { key: '9539e889ce40b280890c7b91588f850cca28a212', slot: "page_number" }, this.internalTotalPages - 2)), h("gb-pagination-number-base", { key: '6478acec2b6f0f73ee47c2125097a21d871c4f89', shape: this.shape, state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages - 1) }, h("p", { key: 'b916095ab3e5b2cc41e98497c2cf8cae51658270', slot: "page_number" }, this.internalTotalPages - 1)), h("gb-pagination-number-base", { key: '852c477030bdeb728f6e4c73320b6d3466bdc7ee', shape: this.shape, state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => this.setCurrentPage(this.internalTotalPages) }, h("p", { key: '7715f97f58f2b3d2547f1dd4fae8b477dc9c5d86', slot: "page_number" }, this.internalTotalPages))))), h("div", { key: 'e5915017cddec910ea4e3f7660aaeac52f607eb0', class: "pagination_btns" }, h("gb-button", { key: '8d1eb412eeceff9f016c051309fd2b288e8b19b2', size: "sm", hierarchy: "secondary_gray", icon: "only", state: this.totalPages === 1 && this.currentPage === 1 ? 'disabled' : this.currentPage === 1 ? 'disabled' : 'default', "icon-leading": true, "icon-leading-swap": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), h("gb-button", { key: '31304ef799b7403f0abb0dbe3b9016ae016c2d05', size: "sm", hierarchy: "secondary_gray", icon: "only", state: this.currentPage === this.internalTotalPages ? 'disabled' : this.currentPage === 1 && this.totalPages === 1 ? 'disabled' : '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: '990ee677db50c61d3555fec6ce270d94c8d235c6', class: "pagination_entries" }, h("div", { key: '375da0dbddb544a41ced2e7ecbccd68a7e448a64', class: "entries_text" }, h("p", { key: '6941953aca6b2954e8ac9d458629697e6292b9d4', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'b5cb082866de8749ce0a94a3572c4fc177083bff', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '538f6321ed02267b5a904d476f2facea49b89382', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: 'e7db74d1004d0b48ef0361110773c79d22a6bb9b', class: "page_number_text" }, h("p", { key: 'c6364ae16c3b313b439d91075ec4b7c62c4f2763', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: 'cda164153d853a4259646051bad2a9eb886ad1a1', class: "pagination_btns" }, h("gb-button", { key: '404d5a1d231d204f01f45d2d04e50d5971ec5b6d', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '5177a27c177cd7eee821a28c318e817c044ff952' }, "Previous")), h("gb-button", { key: 'd00bac98e57395524e398181a4167487bc1cfca4', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'b95188f1e7fd70891ad84d8e0384b82331abe86c' }, "Next"))))), this.type === 'card_minimal_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '3337d48dbb6e994e8e922e1298b12606235ac62d', class: "pagination_btns" }, h("gb-button", { key: '4c9aa855e3b8e664d318ec9c5e40cca27e7c5eb9', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: 'd63faa3c52cf1707cd6f657c82267971fa0275f0' }, "Previous")), h("gb-button", { key: '1a66a918263188686a9232086193ae9fcb882a4a', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '5455b9b462c8070ea5c89ec87231fecf930ab76d' }, "Next"))), h("div", { key: '4c546d105ad55ae6bed3e5f883859263b0dea0bb', class: "page_number_text" }, h("p", { key: '451fd2173a39ac02462bc05cfd8a553bdfbd108f', class: "text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("div", { key: 'e4578130eec15901aeb078ddfe480e4f2795f3ac', class: "pagination_entries" }, h("div", { key: '598812c9962fba93d913dbfa504ab7bed95fd91c', class: "entries_text" }, h("p", { key: '2115dd34fd9bb7f1e47afe9163bdc258b3cf2989', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'a816f2d490b9341d3c81a02ea46f010d87ed522b', class: `entries_dropdown` }, h("gb-input-dropdown", { key: 'd0f3f9c887f994b62aa16f62253b7d7569d617ee', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_minimal_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("gb-button", { key: '26f2ba354fb2dba49849697d9db27537d4ad9c9e', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '41869d8b8fb4b7c49426e9cff38b380b923893a1' }, "Previous")), h("div", { key: '70a65bb41780e7078f6b5aa25ba7ef460f45c9c4', class: "page_number_text" }, h("p", { key: '58bbc63a687fdfa9a2723014174b71fc6f3f3b6a', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '806714ab411f23145fe7d9e4e62bcd18f1786539', size: "sm", hierarchy: "secondary_gray", icon: "default", state: "default", onClick: () => this.onNextButtonClicked() }, h("p", { key: '920867161b3409613393005a0218cf63629ab771' }, "Next")))), this.type === 'card_button_group_right_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '33c2913342086cad782a59314afccfadbec7c196', class: "pagination_entries" }, h("div", { key: '80e51e962477e963084e68f7f1a6d553f3f77d43', class: "entries_text" }, h("p", { key: 'ed44874de062e4dab7d56d7517d24b49045c8205', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: 'dbfd697f5bb45696ec7800b7181a42618ff9eeab', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '1eadf041954632ac86a8cd843af5edb49909bb44', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))), h("div", { key: 'dab2059622609beeb9dc40ae6e7b0e6a09d71756', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '4b1d1a49db4fe0bfaab1d31feccb535b665dc079', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '4e637f537de16b107de452a4694f4457c69f3652' }, "Previous")), this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'af6a980e6e60d260a498da1c02a71c0b0871e3ce', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '80de1375a90c97cc359de36773e05bfcc3ea8dfe' }, "1")), h("gb-pagination-button-group-base", { key: '5edca240b259c9779cdcd4cab4f17bf3e5a24bf9', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '337259a8fc89c7e08633553efb2cc382b8e8e6d5' }, "2")), h("gb-pagination-button-group-base", { key: 'd12d9f33533e7bd8ee0f404e9144b17ee34bb0eb', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: 'c8b40e76289f9a4b4cbaabf6a7d85b996820fb24' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'e076a2887280602ae12229d7b7cf41cfe364f25a', icon: "false" }, h("p", { key: 'dc5fbb15c66ebdd55f87ac2bd29d917c549f68c4' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'e2247ba1890af91d88a0147fd2928509739cd17a', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '4c9c4ca7ae13f76f26c82754042a146ef3122d72' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '37258a0b24e4bd4e58c8b8c6e060451bf89bb859', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '1d40dd4eb5c12d3aa1584ffc4ae0c55fb806d011' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '8035bbcfc106a89c54599545165e95b07bfcdce7', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'aff7e2896b9ca7a3e300e1a3c48b2a335cd8d94f' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '6d871f4bc2885fce71b24b040335da24a317382c', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: 'c172f972fa6e44361879af99e442a300f4d48a89' }, "Next"))))), this.type === 'card_button_group_left_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: '26ff5f954fb52b24eb4722759aa1bfc6c40585ef', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '1430736596d32b4a183ce1de74d1514b166c17b1', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '0dbdb2462ebf9c72f0d9dbe565e2bbdc143ad397' }, "Previous")), this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'b08b70c828acb9d831d5cc7806b9890279f3969e', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'ae8bc1cf235b1f0134f75fa15833e6447aeacb81' }, "1")), h("gb-pagination-button-group-base", { key: '098c74ffffeae8803e45c37968c1c1bece30eb3c', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'cb11a4ed070a8e6fc28e2e6b3030bd4dc088dc60' }, "2")), h("gb-pagination-button-group-base", { key: '353c57421ef6b8d24c763f7a4ddc210548ada08f', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '39475b7c1777faadc566a623b69ef83396afad1f' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '64c017cebbbdb271ba1938d8fc716b0ff8597f13', icon: "false" }, h("p", { key: '0b050646e8e81fc87b998cdbef9e55de4dc51c88' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'ef97cd8c5af2b59033213ad8ea5721af5f9afa14', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: 'ebdce5ff42104fcc822c18f063e845362be1ccf0' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '9c1cf35e2d403ea1efc87e8763e941e840e21aff', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'c2141ee28d2163734a26cfc9fdfc92bc8ca20cde' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'e5baaa23e6e72086cb72cd4f77cf2a5adc0d5d64', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'f5c53ed1229fa0c037be9899e94eaf23ba5822e4' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '246105ea676f51a41b739a955df11b70659bd4d6', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '9b7c6d19a2868e23d12350343c764b5d93cef7d4' }, "Next"))), h("div", { key: 'b11ab181fd6da7fdbae8d2054067d48d5b21b419', class: "pagination_entries" }, h("div", { key: '9ab7bf6323e6d680b6b3b24259e968c1f86b686d', class: "entries_text" }, h("p", { key: 'a3f3eaabf30aae22c0d7d0db40cee810bd36e540', class: `text-sm-medium`, style: { color: 'var(--color-text, #4B5565)' } }, "Entries")), h("div", { key: '80ba2691da53fdfe4592b84d3a6466bee1522bf5', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '29413bfd68414125c87a2010fe7251422448b4cb', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected }))))), this.type === 'card_button_group_center_aligned' && this.breakpoint === 'desktop' && (h(Fragment, null, h("div", { key: 'c23dbe178e388d1e2df091f64a7481665dbc4815', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '5af90c855f29f057f8e1b3a998ec3b8e56503775', icon: "leading", onClick: () => this.onPreviousButtonClicked() }, h("p", { key: '85c4d8298d67f8e708aeb12749ea179c4314e3f7' }, "Previous")), this.internalTotalPages <= 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.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'c80e5ce411b6ebe01ada402f50c6f6463bf30c33', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '3273cdc9990ed4e2f6e796833e6ffca66e680110' }, "1")), h("gb-pagination-button-group-base", { key: '8b70f694cd947dae17307eebad0ea939e0fd2115', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '0a26b373bfbcd51f19b0486727e0edc0941e96b5' }, "2")), h("gb-pagination-button-group-base", { key: 'e3a21b8a2bddd4b3730e90dd4c73b8e2e9996888', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '6caacf84e22602c2bc9f62311cd80804b6004bc0' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '082d9784d3007c564e8648e0afe1752d73e98625', icon: "false" }, h("p", { key: 'fe82d7f3fa1e2dfde878d643f6ae8bcc6772eb7f' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: 'c8b150993d324d78e2570ae42a69921f4fcbb887', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '4b703df5a80a3b7fca85f6f44d9c01699e462320' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '04ebc3d322d313b6afa407a9250c8089cef66bc5', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '1f80a58825ebee388447a68fa4d00759d53d0d9f' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'a2b45761dc0df3e5e7074b05577f41ee6931f5ae', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '76f8c820b6a199279ca7ff42acbeeaa1bc73ade8' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'fa44c4fc4c28a011faf392348aa0c81cd3609c81', icon: "trailing", onClick: () => this.onNextButtonClicked() }, h("p", { key: '12f28e4df1da1faa104019d1b9569ee761a8a93d' }, "Next"))))), this.type === 'page_default' && this.breakpoint === 'mobile' && (h(Fragment, null, h("gb-button", { key: '0f7b0397b5379dd9438b3212c63230dbad8842bc', 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: '4938c590cc2d02fef00cdb93c63c0cb9f275a521', class: "page_number_text" }, h("p", { key: '2c464fb9d7cd19d69f1dac3fc38bb470fa07c2e3', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: 'dbfc9165616a0d174a4adf196380d4a50112b6a8', 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: '1010649182421638347a001e90c911bf1f93f4f8', 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: 'b40bed50f119e52b4e28a26484f91218c4622609', class: "page_number_text" }, h("p", { key: 'b34f38dce8a183a2b6d225a7e9f2d43ec4cb17a3', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '48df0c5ce57da4e7952f350fb04b327d3a6f820f', 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("div", { key: '6be796d35a89d44ce4bfad4e6c375422bfcc3ed7', class: `entries_dropdown` }, h("gb-input-dropdown", { key: '55b095d461a24de495fd0d376105ed9953eeb1ec', 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": this.entriesDropdownMenuPosition, onDropdownItemSelected: this.handlePageSizeSelect.bind(this), value: this.defaultSelected })), h("div", { key: 'b1ab50b87a2d7f407613225b968e954a610ab0b8', class: "card_default_buttons" }, h("gb-button", { key: '1d02c5c8973f7998b92f1ab258a2c8617c4f3506', 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: '1395a9779ed80915a61c7ff8816f20874d7e3962', class: "page_number_text" }, h("p", { key: '129a59702bf7190082e051974236ce4e372d10e8', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '086b216486b0ba3abdb4669ce4dd47953819f465', 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: '167a0fc45cfaa1de940cc34f618b0ed131b1c2ea', 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: '20509f0206ddd8eabc56867b5debde2fd5cb36cb', class: "page_number_text" }, h("p", { key: 'ab8030d8781f1a6206c830adb826c3f7a16999b8', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '20d588cdce2349e8791d64aef08b3869d729ff37', 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: 'd719b147bc58ad96a52a061a21150c8985180347', 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: '2b8d61fff52308a81d09eab9aba57c5d69a007cf', class: "page_number_text" }, h("p", { key: '8890b365980cc7ab71a81712286e81f5c9dd30e5', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '51fa55ea32d4f577058444785312c7b1f1f28dcd', 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: '063e3aafebb82f2b131115f550ea2d062aea21a8', 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: '6113eb6bb57552a57cd5023f2d6b9fc30f0f9c0e', class: "page_number_text" }, h("p", { key: 'd8a751c3d931661b83a718bc835330fc5d6ead6e', class: "page_numbers text-sm-medium" }, "Page ", this.currentPage, " of ", this.internalTotalPages)), h("gb-button", { key: '2d21d1787ea3eed470fe9e78f7b55c6facd0ae05', 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: '84a5896d8ec7993382bf5a5029d888535a2f3463', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'fd9319ccc08257a54cc897e02fa69bebe657187f', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'f85c0a7de82c30119f5207b47b9b37667999267e', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: '472561617e10916d5a35bb1299f2b0dcdf62f37b' }, "1")), h("gb-pagination-button-group-base", { key: 'c955425e09c370235f79940d28f87af194a37142', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'f11101d9ae2228e9c028918366e90ac72a3388f1' }, "2")), h("gb-pagination-button-group-base", { key: 'fd43845ae982a71ca86b84e3920917177856d9ba', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '5cd526a66b8ecaa67b9282b524e7619881c5707a' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '02bc84cc6a858a247227becb50413d96074d1f3a', icon: "false" }, h("p", { key: '5000ab116e7dab73652f03b3e7ec2341554e9239' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '9cea2411381809031d5cd7dbd4e8e3d4165b7dea', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '669b5b9eb8f1ddac1e863a012ccc80068d08626a' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: 'fbbffd503e070786a6e34536b13519a3df8374f7', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '61977252fdfbb445490f111c22f9f2f0e6beaa2d' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: 'c81c6e1d2a16c7e108f2097bfe42e43648fd2329', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '44251e956187019514e8fd67cf7fce118a7b0882' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: '0c19c66543bf94de900d15675b96b2c5341599ff', 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: '48afd6a72a59053d8a2cad89e14380e3a8cbeb7e', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: '32638a2ce3b75fe64f2a2c8c523c4d00570bd866', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: 'adcd62bb9ff208c76fba9c20cb905c4599679153', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'ddb4f7f49e61a8f12e2449f68b1289913ff6d0b3' }, "1")), h("gb-pagination-button-group-base", { key: '38c720994c127bf76c2c92c636d4ce4eff3d1652', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: 'df8031d1452cb13d031246f1bb5fea84c69357f8' }, "2")), h("gb-pagination-button-group-base", { key: '4f25821f780e0cdf381c9976dc3fe625e265d24e', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '50a20481bc29cc590b647c08db322733100938c4' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '0960983a4a50c44c69d30851646f1e43e5a55dbd', icon: "false" }, h("p", { key: 'aadca62b45b9a62d709298fcdec3610c416bfa61' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '3c02774a609056192840160a51bbee8ffadd5c56', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '7e7d3161bbae0e3738ea7a9a42c89af0ae976fee' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '4b91ea326abb8994006429fde8e4ac4b099254d7', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: '865a8dd03a371faa125b21881d586dde85b5ea3a' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '7b38e1d80d8f3be8aef9d1f265177ccd9f0c34a4', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: '90f7a0a4d35254c4440d297149b78b082542412b' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'e2d2535b29f479459ab06eb639b30405b77abf56', 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: 'eb73d1080f2bcabe57c13d7898ad7a4bb98c186d', class: "pagination_button_group" }, h("gb-pagination-button-group-base", { key: 'b82b6711571b1f1a43dc3fd5beb1f6841a79bc00', icon: "only", "icon-src": "assets/arrow-left-02.svg", onClick: () => this.onPreviousButtonClicked() }), this.internalTotalPages <= 5 && (h(Fragment, null, this.pages.map(page => (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage === page ? 'active' : 'default', onClick: () => (this.currentPage = page) }, h("p", null, page)))))), this.internalTotalPages >= 6 && (h(Fragment, null, h("gb-pagination-button-group-base", { key: '680be5f0903672423f8c320119f318414dc758ed', icon: "false", state: this.currentPage === 1 ? 'active' : 'default', onClick: () => (this.currentPage = 1) }, h("p", { key: 'ecd80becd8bf5c67c792ad1e6f699837031942da' }, "1")), h("gb-pagination-button-group-base", { key: 'b2a57bcccdc08a81ede96e0219937baa6681191b', icon: "false", state: this.currentPage === 2 ? 'active' : 'default', onClick: () => (this.currentPage = 2) }, h("p", { key: '7f9f77d5a73bb1aaecc6f8068e4938193d5f81cf' }, "2")), h("gb-pagination-button-group-base", { key: '4e9de5a2cf98271d9ab375a8e2d92554ef277658', icon: "false", state: this.currentPage === 3 ? 'active' : 'default', onClick: () => (this.currentPage = 3) }, h("p", { key: '5cb2bce77d62e5b163eb0bcde9a9f61d37634a6f' }, "3")), this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > 3 && this.currentPage <= this.internalTotalPages / 2 ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '63a34d40b746e1377f2cd31a2cd5fc0a61ad4f1b', icon: "false" }, h("p", { key: '1899fd9b100870304c6cb853589f07513b71fd84' }, "...")), this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages - 2 ? (h("gb-pagination-button-group-base", { icon: "false", state: this.currentPage > this.internalTotalPages / 2 && this.currentPage < this.internalTotalPages ? 'active' : 'default' }, h("p", null, this.currentPage))) : null, h("gb-pagination-button-group-base", { key: '475089a9122fae4a5aef7bc7ceb9fd61903f86fb', icon: "false", state: this.currentPage === this.internalTotalPages - 2 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 2) }, h("p", { key: '447ba4a0eef41147cf91c8b95f1afe5dfa6eecfa' }, this.internalTotalPages - 2)), h("gb-pagination-button-group-base", { key: '4ecb4733472dacbf558100267aad5ca7d522e23d', icon: "false", state: this.currentPage === this.internalTotalPages - 1 ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages - 1) }, h("p", { key: 'b17c88e940437d1a50f2e5b2c675e68c154cb32d' }, this.internalTotalPages - 1)), h("gb-pagination-button-group-base", { key: '681dee81b2fc25003519238f7c9c5c461dcd0559', icon: "false", state: this.currentPage === this.internalTotalPages ? 'active' : 'default', onClick: () => (this.currentPage = this.internalTotalPages) }, h("p", { key: 'a6ca852035b98c61279f9e0a1e5dd3aaa5a2a56a' }, this.internalTotalPages)))), h("gb-pagination-button-group-base", { key: 'aa66f2a0218c9cd69bf405a30af841b61610bfd4', icon: "only", "icon-src": "assets/arrow-right-02.svg", onClick: () => this.onNextButtonClicked() })))));
     }
     static get watchers() { return {
         "totalPages": ["onTotalPagesChange"]
@@ -250,6 +250,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { GbPagination as G, defineCustomElement as d };
-//# sourceMappingURL=p-e9qwQjOu.js.map
+//# sourceMappingURL=p-BKx2NXxk.js.map
 
-//# sourceMappingURL=p-e9qwQjOu.js.map
+//# sourceMappingURL=p-BKx2NXxk.js.map