globuswebcomponents 2.8.2 → 2.8.4

package/dist/collection/components/gb-contact-help-dropdown/gb-contact-help-dropdown.js

@@ -0,0 +1,88 @@
+import { h } from "@stencil/core";
+export class GbContactHelpDropdown {
+    constructor() {
+        this.items = [
+            {
+                id: 'contactcentre',
+                label: 'contactcentre@globusbank.com',
+                action: 'email',
+                icon: 'assets/mail-at-sign-02.svg',
+                disabled: true,
+            },
+            {
+                id: 'contactcentre',
+                label: '(+234) 123 4324 122',
+                action: 'email',
+                icon: 'assets/mail-at-sign-02.svg',
+            },
+            {
+                id: 'contactcentre',
+                label: 'Download user guide',
+                action: 'email',
+                icon: 'assets/mail-at-sign-02.svg',
+            },
+        ];
+    }
+    handleDropdownItemClick(item) {
+        if (item.disabled)
+            return;
+        this.itemSelected.emit(item.action);
+        console.log(item);
+    }
+    render() {
+        return (h("div", { key: '3d4d71261d56ecc187deb962075d57eea2ee0027', class: "contact_help_dropdown_wrapper" }, h("div", { key: '3c533d9acfabda15405e6cf3afc4759a19c44809', class: "contact_help_dropdown_header" }, h("div", { key: 'd7a9f11a53574ef983e4f045dc65c35f9aa521ab', class: "headphone_icon_wrapper" }, h("svg", { key: 'c3dd7307c844999e46b7df64a78120e3f87913df', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: "headphone_icon" }, h("path", { key: '23099bd9f5eeaa0ab84d70485f0f8780af69dc5d', opacity: "0.4", d: "M17 13.8045C17 13.4588 17 13.286 17.052 13.132C17.2032 12.6844 17.6018 12.5108 18.0011 12.3289C18.45 12.1244 18.6744 12.0222 18.8968 12.0042C19.1493 11.9838 19.4022 12.0382 19.618 12.1593C19.9041 12.3198 20.1036 12.6249 20.3079 12.873C21.2512 14.0188 21.7229 14.5918 21.8955 15.2236C22.0348 15.7334 22.0348 16.2666 21.8955 16.7764C21.6438 17.6979 20.8485 18.4704 20.2598 19.1854C19.9587 19.5511 19.8081 19.734 19.618 19.8407C19.4022 19.9618 19.1493 20.0162 18.8968 19.9958C18.6744 19.9778 18.45 19.8756 18.0011 19.6711C17.6018 19.4892 17.2032 19.3156 17.052 18.868C17 18.714 17 18.5412 17 18.1955V13.8045Z", fill: "var(--color-icon-information, #064E94)" }), h("path", { key: '6711e9ca5e494663ea63a3f32628e4ef6d1893aa', opacity: "0.4", d: "M7 13.8045C7 13.3693 6.98778 12.9782 6.63591 12.6722C6.50793 12.5609 6.33825 12.4836 5.99891 12.329C5.55001 12.1246 5.32556 12.0224 5.10316 12.0044C4.43591 11.9504 4.07692 12.4058 3.69213 12.8731C2.74875 14.0189 2.27706 14.5918 2.10446 15.2236C1.96518 15.7334 1.96518 16.2666 2.10446 16.7764C2.3562 17.6979 3.15152 18.4702 3.74021 19.1852C4.11129 19.6359 4.46577 20.0472 5.10316 19.9956C5.32556 19.9776 5.55001 19.8754 5.99891 19.6709C6.33825 19.5164 6.50793 19.4391 6.63591 19.3278C6.98778 19.0218 7 18.6307 7 18.1954V13.8045Z", fill: "var(--color-icon-information, #064E94)" }), h("path", { key: '4a9ffa0f7dab3a092dbcbec496a89bdfd565f968', d: "M17 13.8045C17 13.4588 17 13.286 17.052 13.132C17.2032 12.6844 17.6018 12.5108 18.0011 12.3289C18.45 12.1244 18.6744 12.0222 18.8968 12.0042C19.1493 11.9838 19.4022 12.0382 19.618 12.1593C19.9041 12.3198 20.1036 12.6249 20.3079 12.873C21.2512 14.0188 21.7229 14.5918 21.8955 15.2236C22.0348 15.7334 22.0348 16.2666 21.8955 16.7764C21.6438 17.6979 20.8485 18.4704 20.2598 19.1854C19.9587 19.5511 19.8081 19.734 19.618 19.8407C19.4022 19.9618 19.1493 20.0162 18.8968 19.9958C18.6744 19.9778 18.45 19.8756 18.0011 19.6711C17.6018 19.4892 17.2032 19.3156 17.052 18.868C17 18.714 17 18.5412 17 18.1955V13.8045Z", stroke: "var(--color-icon-information, #064E94)", "stroke-width": "1.5" }), h("path", { key: 'd9f45c0c56593435f01ea62c6e085f3d5d303d0c', d: "M9.5 21C10.8807 22.3333 13.1193 22.3333 14.5 21", stroke: "var(--color-icon-information, #064E94)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'e4b0c5613d5f2b1785acd36daf837e83ef133778', d: "M7 13.8045C7 13.3693 6.98778 12.9782 6.63591 12.6722C6.50793 12.5609 6.33825 12.4836 5.99891 12.329C5.55001 12.1246 5.32556 12.0224 5.10316 12.0044C4.43591 11.9504 4.07692 12.4058 3.69213 12.8731C2.74875 14.0189 2.27706 14.5918 2.10446 15.2236C1.96518 15.7334 1.96518 16.2666 2.10446 16.7764C2.3562 17.6979 3.15152 18.4702 3.74021 19.1852C4.11129 19.6359 4.46577 20.0472 5.10316 19.9956C5.32556 19.9776 5.55001 19.8754 5.99891 19.6709C6.33825 19.5164 6.50793 19.4391 6.63591 19.3278C6.98778 19.0218 7 18.6307 7 18.1954V13.8045Z", stroke: "var(--color-icon-information, #064E94)", "stroke-width": "1.5" }), h("path", { key: 'cf1fe5134a6695ae2f0ecb2b4f514cd15982206e', d: "M2 16V12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12L22.0001 16", stroke: "var(--color-icon-information, #064E94)", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("p", { key: 'ae4710bb7d84e84c0fae2b66b058069da816e3ef', class: "heading text-lg-semi-bold" }, "NEED HELP? REACH OUT")), h("div", { key: 'f333e552211f80484aee36931ad28450682d86d9', class: "contact_dropdown_items" }, this.items.map(item => (h("div", { class: "item" }, h("gb-dropdown-items-with-shortcut", { icon: true, iconSrc: item.icon, label: item.label, state: item.disabled ? 'disabled' : 'default', onClick: () => this.handleDropdownItemClick(item) })))))));
+    }
+    static get is() { return "gb-contact-help-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-contact-help-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-contact-help-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\r\n    id?: string;\r\n    label: string;\r\n    icon?: string;\r\n    action: string;\r\n    disabled?: boolean;\r\n  }[]",
+                    "resolved": "{ id?: string; label: string; icon?: string; action: string; disabled?: boolean; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    {\r\n      id: 'contactcentre',\r\n      label: 'contactcentre@globusbank.com',\r\n      action: 'email',\r\n      icon: 'assets/mail-at-sign-02.svg',\r\n      disabled: true,\r\n    },\r\n    {\r\n      id: 'contactcentre',\r\n      label: '(+234) 123 4324 122',\r\n      action: 'email',\r\n      icon: 'assets/mail-at-sign-02.svg',\r\n    },\r\n    {\r\n      id: 'contactcentre',\r\n      label: 'Download user guide',\r\n      action: 'email',\r\n      icon: 'assets/mail-at-sign-02.svg',\r\n    },\r\n  ]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemSelected",
+                "name": "itemSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=gb-contact-help-dropdown.js.map

package/dist/collection/components/gb-contact-help-dropdown/gb-contact-help-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-contact-help-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-contact-help-dropdown/gb-contact-help-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,qBAAqB;IALlC;QAMU,UAAK,GAMP;YACJ;gBACE,EAAE,EAAE,eAAe;gBACnB,KAAK,EAAE,8BAA8B;gBACrC,MAAM,EAAE,OAAO;gBACf,IAAI,EAAE,4BAA4B;gBAClC,QAAQ,EAAE,IAAI;aACf;YACD;gBACE,EAAE,EAAE,eAAe;gBACnB,KAAK,EAAE,qBAAqB;gBAC5B,MAAM,EAAE,OAAO;gBACf,IAAI,EAAE,4BAA4B;aACnC;YACD;gBACE,EAAE,EAAE,eAAe;gBACnB,KAAK,EAAE,qBAAqB;gBAC5B,MAAM,EAAE,OAAO;gBACf,IAAI,EAAE,4BAA4B;aACnC;SACF,CAAC;KAgEH;IA7DC,uBAAuB,CAAC,IAAuF;QAC7G,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,+BAA+B;YACxC,4DAAK,KAAK,EAAC,8BAA8B;gBACvC,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gBAAgB;wBACnH,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,+lBAA+lB,EACjmB,IAAI,EAAC,wCAAwC,GAC7C;wBACF,6DACE,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,ihBAAihB,EACnhB,IAAI,EAAC,wCAAwC,GAC7C;wBACF,6DACE,CAAC,EAAC,+lBAA+lB,EACjmB,MAAM,EAAC,wCAAwC,kBAClC,KAAK,GAClB;wBACF,6DACE,CAAC,EAAC,iDAAiD,EACnD,MAAM,EAAC,wCAAwC,kBAClC,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB;wBACF,6DACE,CAAC,EAAC,ihBAAihB,EACnhB,MAAM,EAAC,wCAAwC,kBAClC,KAAK,GAClB;wBACF,6DACE,CAAC,EAAC,yEAAyE,EAC3E,MAAM,EAAC,wCAAwC,kBAClC,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,CACF;gBACN,0DAAG,KAAK,EAAC,2BAA2B,2BAAyB,CACzD;YACN,4DAAK,KAAK,EAAC,wBAAwB,IAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,WAAK,KAAK,EAAC,MAAM;gBACf,uCAAiC,IAAI,QAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,GAAoC,CAC7M,CACP,CAAC,CACE,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-contact-help-dropdown',\r\n  styleUrl: 'gb-contact-help-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbContactHelpDropdown {\r\n  @Prop() items: {\r\n    id?: string;\r\n    label: string;\r\n    icon?: string;\r\n    action: string;\r\n    disabled?: boolean;\r\n  }[] = [\r\n    {\r\n      id: 'contactcentre',\r\n      label: 'contactcentre@globusbank.com',\r\n      action: 'email',\r\n      icon: 'assets/mail-at-sign-02.svg',\r\n      disabled: true,\r\n    },\r\n    {\r\n      id: 'contactcentre',\r\n      label: '(+234) 123 4324 122',\r\n      action: 'email',\r\n      icon: 'assets/mail-at-sign-02.svg',\r\n    },\r\n    {\r\n      id: 'contactcentre',\r\n      label: 'Download user guide',\r\n      action: 'email',\r\n      icon: 'assets/mail-at-sign-02.svg',\r\n    },\r\n  ];\r\n  @Event() itemSelected: EventEmitter<string>;\r\n\r\n  handleDropdownItemClick(item: { id?: string; label: string; icon?: string; action: string; disabled?: boolean }) {\r\n    if (item.disabled) return;\r\n\r\n    this.itemSelected.emit(item.action);\r\n    console.log(item);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"contact_help_dropdown_wrapper\">\r\n        <div class=\"contact_help_dropdown_header\">\r\n          <div class=\"headphone_icon_wrapper\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"headphone_icon\">\r\n              <path\r\n                opacity=\"0.4\"\r\n                d=\"M17 13.8045C17 13.4588 17 13.286 17.052 13.132C17.2032 12.6844 17.6018 12.5108 18.0011 12.3289C18.45 12.1244 18.6744 12.0222 18.8968 12.0042C19.1493 11.9838 19.4022 12.0382 19.618 12.1593C19.9041 12.3198 20.1036 12.6249 20.3079 12.873C21.2512 14.0188 21.7229 14.5918 21.8955 15.2236C22.0348 15.7334 22.0348 16.2666 21.8955 16.7764C21.6438 17.6979 20.8485 18.4704 20.2598 19.1854C19.9587 19.5511 19.8081 19.734 19.618 19.8407C19.4022 19.9618 19.1493 20.0162 18.8968 19.9958C18.6744 19.9778 18.45 19.8756 18.0011 19.6711C17.6018 19.4892 17.2032 19.3156 17.052 18.868C17 18.714 17 18.5412 17 18.1955V13.8045Z\"\r\n                fill=\"var(--color-icon-information, #064E94)\"\r\n              />\r\n              <path\r\n                opacity=\"0.4\"\r\n                d=\"M7 13.8045C7 13.3693 6.98778 12.9782 6.63591 12.6722C6.50793 12.5609 6.33825 12.4836 5.99891 12.329C5.55001 12.1246 5.32556 12.0224 5.10316 12.0044C4.43591 11.9504 4.07692 12.4058 3.69213 12.8731C2.74875 14.0189 2.27706 14.5918 2.10446 15.2236C1.96518 15.7334 1.96518 16.2666 2.10446 16.7764C2.3562 17.6979 3.15152 18.4702 3.74021 19.1852C4.11129 19.6359 4.46577 20.0472 5.10316 19.9956C5.32556 19.9776 5.55001 19.8754 5.99891 19.6709C6.33825 19.5164 6.50793 19.4391 6.63591 19.3278C6.98778 19.0218 7 18.6307 7 18.1954V13.8045Z\"\r\n                fill=\"var(--color-icon-information, #064E94)\"\r\n              />\r\n              <path\r\n                d=\"M17 13.8045C17 13.4588 17 13.286 17.052 13.132C17.2032 12.6844 17.6018 12.5108 18.0011 12.3289C18.45 12.1244 18.6744 12.0222 18.8968 12.0042C19.1493 11.9838 19.4022 12.0382 19.618 12.1593C19.9041 12.3198 20.1036 12.6249 20.3079 12.873C21.2512 14.0188 21.7229 14.5918 21.8955 15.2236C22.0348 15.7334 22.0348 16.2666 21.8955 16.7764C21.6438 17.6979 20.8485 18.4704 20.2598 19.1854C19.9587 19.5511 19.8081 19.734 19.618 19.8407C19.4022 19.9618 19.1493 20.0162 18.8968 19.9958C18.6744 19.9778 18.45 19.8756 18.0011 19.6711C17.6018 19.4892 17.2032 19.3156 17.052 18.868C17 18.714 17 18.5412 17 18.1955V13.8045Z\"\r\n                stroke=\"var(--color-icon-information, #064E94)\"\r\n                stroke-width=\"1.5\"\r\n              />\r\n              <path\r\n                d=\"M9.5 21C10.8807 22.3333 13.1193 22.3333 14.5 21\"\r\n                stroke=\"var(--color-icon-information, #064E94)\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n              <path\r\n                d=\"M7 13.8045C7 13.3693 6.98778 12.9782 6.63591 12.6722C6.50793 12.5609 6.33825 12.4836 5.99891 12.329C5.55001 12.1246 5.32556 12.0224 5.10316 12.0044C4.43591 11.9504 4.07692 12.4058 3.69213 12.8731C2.74875 14.0189 2.27706 14.5918 2.10446 15.2236C1.96518 15.7334 1.96518 16.2666 2.10446 16.7764C2.3562 17.6979 3.15152 18.4702 3.74021 19.1852C4.11129 19.6359 4.46577 20.0472 5.10316 19.9956C5.32556 19.9776 5.55001 19.8754 5.99891 19.6709C6.33825 19.5164 6.50793 19.4391 6.63591 19.3278C6.98778 19.0218 7 18.6307 7 18.1954V13.8045Z\"\r\n                stroke=\"var(--color-icon-information, #064E94)\"\r\n                stroke-width=\"1.5\"\r\n              />\r\n              <path\r\n                d=\"M2 16V12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12L22.0001 16\"\r\n                stroke=\"var(--color-icon-information, #064E94)\"\r\n                stroke-width=\"1.5\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n              />\r\n            </svg>\r\n          </div>\r\n          <p class=\"heading text-lg-semi-bold\">NEED HELP? REACH OUT</p>\r\n        </div>\r\n        <div class=\"contact_dropdown_items\">\r\n          {this.items.map(item => (\r\n            <div class=\"item\">\r\n              <gb-dropdown-items-with-shortcut icon iconSrc={item.icon} label={item.label} state={item.disabled ? 'disabled' : 'default'} onClick={() => this.handleDropdownItemClick(item)}></gb-dropdown-items-with-shortcut>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-date-picker/gb-date-picker.css

@@ -2837,7 +2837,7 @@
 }
 
 .calendar-container {
-  width: fit-content;
+  width: max-content;
   position: absolute;
   z-index: 9;
 }
@@ -2862,12 +2862,34 @@
   border: 1px solid var(--color-border-subtle, #cdd5df);
 }
 
+.fp-layout {
+  display: flex;
+}
+
+.fp-sidebar {
+  display: flex;
+  padding: 0 1rem 0 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+  align-self: stretch;
+  border-right: 1px solid var(--color-border-subtler, #E3E8EF);
+}
+
+.fp-main{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 1rem 0 0;
+}
+
 .flatpickr-calendar *,
 input {
   font-family: var(--font-family-body);
 }
 
 .flatpickr-calendar {
+  display: flex;
   background: var(--color-background-card, #fff);
   border: 1px solid var(--color-border-subtle, #cdd5df);
   box-shadow: var(--shadow-md);
@@ -2876,6 +2898,9 @@ input {
   padding: var(--spacing-3);
   white-space: normal !important;
   overflow: visible;
+  width: auto !important;
+  min-width: unset !important;
+  max-width: unset !important;
 }
 
 .calendar-container.hidden {
@@ -2891,13 +2916,29 @@ input {
   padding: var(--spacing-2) 0;
 }
 
+.flatpickr-weekdays {
+  display: flex;
+  justify-content: space-between;
+  flex: 1 0 auto !important;
+}
+
 .flatpickr-weekday {
+  display: flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.625rem 0.5rem;
+  justify-content: center;
+  align-items: center;
   color: var(--color-text, #4b5565);
 }
 
 .flatpickr-day {
+  display: flex;
   width: 2.5rem;
   height: 2.5rem;
+  padding: 0 0.5rem;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
 }
 
@@ -2931,15 +2972,39 @@ input {
 }
 
 .flatpickr-days {
-  width: 17.5rem; /* whatever width you need */
+  display: flex;
+  flex: 1 0 auto !important;
+  gap: var(--spacing-12);
   box-sizing: border-box;
   padding: 0;
+  width: auto !important;
+  min-width: unset !important;
+  max-width: unset !important;
+  font-family: var(--Font-Family-Body, Sora);
+  font-size: var(--Font-Size-T-sm, 0.875rem);
+  font-style: normal;
+  font-weight: var(--Font-Weight-Regular, 400);
+  line-height: var(--Font-Line-height-T-sm, 1.5rem);
+  letter-spacing: var(--Font-Letter-spacing-T-sm, 0);
+  color: var(--color-text, #4b5565);
+}
+
+.flatpickr-innerContainer {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.flatpickr-innerContainer .flatpickr-month:not(:last-child) {
+  border-right: 1px solid var(--color-border-subtle, #cdd5df);
+  padding-right: var(--spacing-3);
+  margin-right: var(--spacing-3);
 }
 
 .flatpickr-days .dayContainer {
   display: flex !important;
+  flex: 1 0 auto !important;
   flex-wrap: wrap !important;
-  width: 100%;
+  width: 17.5rem;
   box-sizing: border-box;
   align-items: stretch;
 }
@@ -2972,16 +3037,6 @@ input {
   line-height: 1.25rem;
 }
 
-.flatpickr-day {
-  font-family: var(--Font-Family-Body, Sora);
-  font-size: var(--Font-Size-T-sm, 0.875rem);
-  font-style: normal;
-  font-weight: var(--Font-Weight-Regular, 400);
-  line-height: var(--Font-Line-height-T-sm, 1.5rem); /* 171.429% */
-  letter-spacing: var(--Font-Letter-spacing-T-sm, 0);
-  color: var(--color-text, #4b5565);
-}
-
 .flatpickr-day.prevMonthDay,
 .flatpickr-day.nextMonthDay {
   color: var(--color-text-disabled, #808c9e);
@@ -3165,12 +3220,12 @@ input {
   border-radius: 0.5rem;
 }
 
-.flatpickr-am-pm:hover{
+.flatpickr-am-pm:hover {
   background-color: var(--color-background-gray-subtlest, #f6f8fa);
 }
 
-.flatpickr-am-pm:active{
-  background-color: var(--color-background-gray-subtler, #eef2f6); 
+.flatpickr-am-pm:active {
+  background-color: var(--color-background-gray-subtler, #eef2f6);
 }
 
 .apply_button_wrapper {

package/dist/collection/components/gb-date-picker/gb-date-picker.js

@@ -15,11 +15,24 @@ export class GbDatePicker {
         this.enableTime = false;
         this.noCalendar = false;
         this.twentyfourHr = false;
+        this.showMonths = 1;
         this.isCalendarShown = false;
+        this.breakpoint = 'desktop';
+        this.width = window.innerWidth;
+        this.handleResize = () => {
+            this.width = window.innerWidth;
+            this.updateCalendarDropdown();
+        };
     }
     componentDidLoad() {
         this.initializePicker();
-        this.injectApplyButton();
+        // this.injectApplyButton();
+    }
+    componentWillLoad() {
+        window.addEventListener('resize', this.handleResize);
+    }
+    updateCalendarDropdown() {
+        this.breakpoint = this.width < 860 ? 'mobile' : 'desktop';
     }
     disconnectedCallback() {
         if (this.picker)
@@ -39,9 +52,17 @@ export class GbDatePicker {
             console.warn('Calendar container or input not found.');
             return;
         }
+        const fixDaysWidth = () => {
+            var _a;
+            const days = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.flatpickr-days');
+            if (days) {
+                days.style.width = 'auto';
+            }
+        };
         this.picker = flatpickr(input, {
             dateFormat: this.format,
             mode: this.mode,
+            showMonths: this.breakpoint === 'mobile' ? 1 : 2,
             defaultDate: this.value,
             appendTo: calendarContainer, // keep inside shadow root
             clickOpens: false,
@@ -93,13 +114,23 @@ export class GbDatePicker {
                         this.preventTimePickerClosing();
                     }
                 }
+                fixDaysWidth();
             },
             onOpen: () => {
                 this.isCalendarShown = true;
+                fixDaysWidth();
             },
             onClose: () => {
                 this.isCalendarShown = false;
             },
+            onReady: (_, __, fp) => {
+                this.picker = fp;
+                // Defer DOM surgery until Flatpickr finishes layout
+                requestAnimationFrame(() => {
+                    this.injectSidebarLayout(fp);
+                    this.maybeCreateSidebar(fp.calendarContainer);
+                });
+            },
         });
         input.addEventListener('input', () => {
             const dateStr = input.value;
@@ -110,6 +141,135 @@ export class GbDatePicker {
             }
         });
     }
+    clearDateSelection() {
+        if (this.picker) {
+            this.picker.clear();
+        }
+    }
+    maybeCreateSidebar(calendar) {
+        // Remove existing sidebar first
+        const existing = calendar.querySelector('.fp-sidebar');
+        if (existing) {
+            existing.remove();
+        }
+        // Only show sidebar when months === 2
+        if (this.breakpoint === 'mobile' || this.picker.config.showMonths !== 2) {
+            calendar.classList.remove('has-sidebar');
+            return;
+        }
+        const sidebar = this.createSidebar();
+        calendar.classList.add('has-sidebar');
+        calendar.prepend(sidebar);
+    }
+    injectSidebarLayout(fp) {
+        const calendar = fp.calendarContainer;
+        if (!calendar || calendar.querySelector('.fp-layout'))
+            return;
+        const months = calendar.querySelector('.flatpickr-months');
+        const inner = calendar.querySelector('.flatpickr-innerContainer');
+        const time = calendar.querySelector('.flatpickr-time');
+        if (!months || !inner)
+            return;
+        const layout = document.createElement('div');
+        layout.className = 'fp-layout';
+        const main = document.createElement('div');
+        main.className = 'fp-main';
+        main.append(months, inner);
+        if (time && this.enableTime)
+            main.appendChild(time); // 🔥 preserve time picker
+        layout.appendChild(main);
+        calendar.appendChild(layout);
+        this.injectApplyButton();
+    }
+    createSidebar() {
+        const sidebar = document.createElement('div');
+        sidebar.className = 'fp-sidebar';
+        const ranges = [
+            { key: 'today', label: 'Today' },
+            { key: 'yesterday', label: 'Yesterday' },
+            { key: 'this-week', label: 'This week' },
+            { key: 'last-week', label: 'Last week' },
+            { key: 'this-month', label: 'This month' },
+            { key: 'last-month', label: 'Last month' },
+            { key: 'this-year', label: 'This year' },
+            { key: 'all-time', label: 'All time' },
+        ];
+        ranges.forEach(r => {
+            const item = document.createElement('gb-date-picker-list-item');
+            item.setAttribute('label', r.label);
+            item.dataset.range = r.key;
+            item.addEventListener('mousedown', e => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.clearPresetSelection(sidebar);
+                item.selected = true;
+                this.applyPreset(r.key);
+            });
+            sidebar.appendChild(item);
+        });
+        return sidebar;
+    }
+    applyPreset(key) {
+        if (!this.picker)
+            return;
+        const today = new Date();
+        let start;
+        let end;
+        switch (key) {
+            case 'today':
+                start = end = today;
+                break;
+            case 'yesterday':
+                start = end = new Date(today.setDate(today.getDate() - 1));
+                break;
+            case 'this-week':
+                start = new Date(today);
+                start.setDate(today.getDate() - today.getDay());
+                end = new Date();
+                break;
+            case 'last-week':
+                end = new Date(today);
+                end.setDate(today.getDate() - today.getDay() - 1);
+                start = new Date(end);
+                start.setDate(end.getDate() - 6);
+                break;
+            case 'this-month':
+                start = new Date(today.getFullYear(), today.getMonth(), 1);
+                end = today;
+                break;
+            case 'last-month':
+                start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+                end = new Date(today.getFullYear(), today.getMonth(), 0);
+                break;
+            case 'this-year':
+                start = new Date(today.getFullYear(), 0, 1);
+                end = today;
+                break;
+            case 'all-time':
+                start = new Date(2000, 0, 1);
+                end = today;
+                break;
+            default:
+                return;
+        }
+        // 🔥 THIS is the missing piece
+        this.picker.setDate(this.mode === 'range' ? [start, end] : start, true);
+        this.preventTimePickerClosing();
+    }
+    clearPresetSelection(sidebar) {
+        const items = sidebar.querySelectorAll('gb-date-picker-list-item');
+        items.forEach(item => {
+            item.selected = false;
+        });
+    }
+    // private updateActivePreset(activeKey: string) {
+    //   const sidebar = this.picker.calendarContainer?.querySelector('.fp-sidebar');
+    //   if (!sidebar) return;
+    //   const items = sidebar.querySelectorAll('gb-date-picker-list-item');
+    //   items.forEach((el: any) => {
+    //     el.selected = el.dataset.range === activeKey;
+    //   });
+    // }
     injectApplyButton() {
         const calendarContainer = this.el.shadowRoot.querySelector('.calendar-container');
         const timeContainer = calendarContainer.querySelector('.flatpickr-time');
@@ -188,9 +348,9 @@ export class GbDatePicker {
         return timePart ? `${datePart} ${timePart}` : datePart;
     }
     render() {
-        return (h("div", { key: '98c9ef6e465b504bbd3dd72fafed30d1ecd796dc', class: "date_picker_container" }, this.label && (h(Fragment, null, this.formatLabel ? (h("p", { class: "date_picker_label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())) : (h("p", { class: "date_picker_label text-sm-medium" }, this.label)))), h("div", { key: '1ee82453ec4dfd039a1a9da03c76b94962d3ae46', class: "date-picker-wrapper" }, h("div", { key: 'b17baf81627fd038a3da6234f3dde53c1b8b77a3', class: "inner_container", onClick: () => {
+        return (h("div", { key: 'a55291203e8de26948f181c127a40a81b70d3087', class: "date_picker_container" }, this.label && (h(Fragment, null, this.formatLabel ? (h("p", { class: "date_picker_label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())) : (h("p", { class: "date_picker_label text-sm-medium" }, this.label)))), h("div", { key: 'd25f43a3c8e6a688db9a53c22f91561804a0eb76', class: "date-picker-wrapper" }, h("div", { key: 'f95b7a97f7834775493a05d1f874f7968b2fbdf2', class: "inner_container", onClick: () => {
                 this.toggleCalendar();
-            } }, this.iconPosition === 'left' && (h("svg", { key: 'd6b33b9c2b817ef6236fbba5434564db4fa137d2', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '1a96c4a4b8ba12a26aad0205b9e0ca514db05690', d: "M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z", fill: "var(--color-icon, #4B5565)" }))), h("input", { key: 'f3c769bbcf2a05c57534ea5a63928d55cb9a42f6', type: "text", ref: el => (this.inputEl = el), placeholder: this.placeholder, disabled: this.disabled, value: this.value, contentEditable: false }), this.iconPosition === 'right' && (h("svg", { key: '1ec7c4fad84e7a3f4c364d7b31e3104d3207f06b', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'da46f2f1a4aec56bdbc8c291ae61ca6e127bcd05', d: "M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z", fill: "var(--color-icon, #4B5565)" })))), h("div", { key: 'd2262a239fc5d03df0f4e398f716f7370fc7cd36', class: `calendar-container ${!this.isCalendarShown ? 'hidden' : ''} ${this.dropdownAlignment}` }))));
+            } }, this.iconPosition === 'left' && (h("svg", { key: '004d7629f7512e6fdd77c414ec1901f3f7351eba', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'cb3b3913c589548003c6fcdaad2f34fda9899b2b', d: "M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z", fill: "var(--color-icon, #4B5565)" }))), h("input", { key: 'd7a47e7aedf3ef71ad08e24e41c0ec2441ef7460', type: "text", ref: el => (this.inputEl = el), placeholder: this.placeholder, disabled: this.disabled, value: this.value, contentEditable: false }), this.iconPosition === 'right' && (h("svg", { key: 'c31cba5ba4732dce3c3408875a8713429fdf56c3', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '3fcfd495c43d5b25c367b5e704ff85760b493bed', d: "M9.16658 10.0833C8.75237 10.0833 8.41658 10.4191 8.41658 10.8333C8.41658 11.2475 8.75237 11.5833 9.16658 11.5833V10.8333V10.0833ZM13.3333 11.5833C13.7475 11.5833 14.0833 11.2475 14.0833 10.8333C14.0833 10.4191 13.7475 10.0833 13.3333 10.0833V10.8333V11.5833ZM6.66658 10.0833C6.25237 10.0833 5.91659 10.4191 5.91659 10.8333C5.91659 11.2475 6.25237 11.5833 6.66658 11.5833V10.8333V10.0833ZM6.67407 11.5833C7.08828 11.5833 7.42407 11.2475 7.42407 10.8333C7.42407 10.4191 7.08828 10.0833 6.67407 10.0833V10.8333V11.5833ZM10.8333 14.9166C11.2475 14.9166 11.5833 14.5808 11.5833 14.1666C11.5833 13.7524 11.2475 13.4166 10.8333 13.4166V14.1666V14.9166ZM6.66658 13.4166C6.25237 13.4166 5.91659 13.7524 5.91659 14.1666C5.91659 14.5808 6.25237 14.9166 6.66658 14.9166V14.1666V13.4166ZM13.3333 14.9166C13.7475 14.9166 14.0833 14.5808 14.0833 14.1666C14.0833 13.7524 13.7475 13.4166 13.3333 13.4166V14.1666V14.9166ZM13.3258 13.4166C12.9116 13.4166 12.5758 13.7524 12.5758 14.1666C12.5758 14.5808 12.9116 14.9166 13.3258 14.9166V14.1666V13.4166ZM15.7499 1.66663C15.7499 1.25241 15.4141 0.916626 14.9999 0.916626C14.5857 0.916626 14.2499 1.25241 14.2499 1.66663H14.9999H15.7499ZM14.2499 3.33329C14.2499 3.74751 14.5857 4.08329 14.9999 4.08329C15.4141 4.08329 15.7499 3.74751 15.7499 3.33329H14.9999H14.2499ZM5.74992 1.66663C5.74992 1.25241 5.41413 0.916626 4.99992 0.916626C4.58571 0.916626 4.24992 1.25241 4.24992 1.66663H4.99992H5.74992ZM4.24992 3.33329C4.24992 3.74751 4.58571 4.08329 4.99992 4.08329C5.41413 4.08329 5.74992 3.74751 5.74992 3.33329H4.99992H4.24992ZM2.49992 5.91663C2.08571 5.91663 1.74992 6.25241 1.74992 6.66663C1.74992 7.08084 2.08571 7.41663 2.49992 7.41663V6.66663V5.91663ZM17.4999 7.41663C17.9141 7.41663 18.2499 7.08084 18.2499 6.66663C18.2499 6.25241 17.9141 5.91663 17.4999 5.91663V6.66663V7.41663ZM9.16658 10.8333V11.5833H13.3333V10.8333V10.0833H9.16658V10.8333ZM6.66658 10.8333V11.5833H6.67407V10.8333V10.0833H6.66658V10.8333ZM10.8333 14.1666V13.4166H6.66658V14.1666V14.9166H10.8333V14.1666ZM13.3333 14.1666V13.4166H13.3258V14.1666V14.9166H13.3333V14.1666ZM14.9999 1.66663H14.2499V3.33329H14.9999H15.7499V1.66663H14.9999ZM4.99992 1.66663H4.24992V3.33329H4.99992H5.74992V1.66663H4.99992ZM9.20825 2.49996V3.24996H10.7916V2.49996V1.74996H9.20825V2.49996ZM17.9166 10.2027H17.1666V10.6306H17.9166H18.6666V10.2027H17.9166ZM10.7916 18.3333V17.5833H9.20825V18.3333V19.0833H10.7916V18.3333ZM2.08325 10.6306H2.83325V10.2027H2.08325H1.33325V10.6306H2.08325ZM9.20825 18.3333V17.5833C7.506 17.5833 6.31079 17.5814 5.4071 17.4501C4.53136 17.3228 4.03943 17.0875 3.67726 16.696L3.12668 17.2053L2.57611 17.7145C3.25737 18.451 4.12685 18.7798 5.19134 18.9345C6.22789 19.0851 7.55174 19.0833 9.20825 19.0833V18.3333ZM2.08325 10.6306H1.33325C1.33325 12.4265 1.33189 13.8433 1.46941 14.9491C1.60893 16.071 1.90254 16.9864 2.57611 17.7145L3.12668 17.2053L3.67726 16.696C3.30739 16.2961 3.07929 15.7397 2.95795 14.764C2.83462 13.7723 2.83325 12.4658 2.83325 10.6306H2.08325ZM17.9166 10.6306H17.1666C17.1666 12.4658 17.1652 13.7723 17.0419 14.764C16.9205 15.7397 16.6924 16.2961 16.3226 16.696L16.8732 17.2053L17.4237 17.7145C18.0973 16.9864 18.3909 16.071 18.5304 14.9491C18.668 13.8433 18.6666 12.4265 18.6666 10.6306H17.9166ZM10.7916 18.3333V19.0833C12.4481 19.0833 13.7719 19.0851 14.8085 18.9345C15.873 18.7798 16.7425 18.451 17.4237 17.7145L16.8732 17.2053L16.3226 16.696C15.9604 17.0875 15.4685 17.3228 14.5927 17.4501C13.689 17.5814 12.4938 17.5833 10.7916 17.5833V18.3333ZM10.7916 2.49996V3.24996C12.4938 3.24996 13.689 3.25182 14.5927 3.38316C15.4685 3.51045 15.9604 3.74573 16.3226 4.13728L16.8732 3.62799L17.4237 3.11871C16.7425 2.38222 15.873 2.05348 14.8085 1.89876C13.7719 1.7481 12.4481 1.74996 10.7916 1.74996V2.49996ZM17.9166 10.2027H18.6666C18.6666 8.40677 18.668 6.98999 18.5304 5.88412C18.3909 4.76229 18.0973 3.84689 17.4237 3.11871L16.8732 3.62799L16.3226 4.13728C16.6924 4.53713 16.9205 5.09352 17.0419 6.06924C17.1652 7.06093 17.1666 8.36747 17.1666 10.2027H17.9166ZM9.20825 2.49996V1.74996C7.55174 1.74996 6.22789 1.7481 5.19134 1.89876C4.12685 2.05348 3.25737 2.38222 2.57611 3.11871L3.12668 3.62799L3.67726 4.13728C4.03943 3.74573 4.53136 3.51045 5.4071 3.38316C6.31079 3.25182 7.506 3.24996 9.20825 3.24996V2.49996ZM2.08325 10.2027H2.83325C2.83325 8.36747 2.83462 7.06093 2.95795 6.06924C3.07929 5.09352 3.30739 4.53713 3.67726 4.13728L3.12668 3.62799L2.57611 3.11871C1.90254 3.84689 1.60893 4.76229 1.46941 5.88412C1.33189 6.98999 1.33325 8.40677 1.33325 10.2027H2.08325ZM2.49992 6.66663V7.41663H17.4999V6.66663V5.91663H2.49992V6.66663Z", fill: "var(--color-icon, #4B5565)" })))), h("div", { key: '8b075df1e23c09cc194acd90d3ad748182f3c573', class: `calendar-container ${!this.isCalendarShown ? 'hidden' : ''} ${this.dropdownAlignment}` }))));
     }
     static get is() { return "gb-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -476,12 +636,34 @@ export class GbDatePicker {
                 "reflect": false,
                 "attribute": "twentyfour-hr",
                 "defaultValue": "false"
+            },
+            "showMonths": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-months",
+                "defaultValue": "1"
             }
         };
     }
     static get states() {
         return {
-            "isCalendarShown": {}
+            "isCalendarShown": {},
+            "breakpoint": {},
+            "width": {}
         };
     }
     static get events() {