@globalpayments/vega 2.73.0 → 2.76.0

package/dist/cjs/vega-date-picker_2.cjs.entry.js

@@ -4,61 +4,59 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const component = require('./component-1e352960.js');
-const dateRequiredRule = require('./date-required-rule-99cca681.js');
-const typeGuard = require('./type-guard-69d2cf01.js');
+const dateRequiredRule = require('./date-required-rule-912469e0.js');
+const typeGuard = require('./type-guard-407ba0b8.js');
 const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-6e3e14fd.js');
-const ui = require('./ui-9e181079.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-1c8f7880.js');
-const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-102f37c7.js');
+const ui = require('./ui-234ea151.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
+const vegaEventId = require('./vega-event-id-ee01d8dd.js');
+const internalIconManager = require('./internal-icon-manager-c989189a.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const array = require('./array-249289f2.js');
-require('./translation-5f9f9c0c.js');
-require('./vega-env-manager-23b8b23c.js');
-require('./function-extension-78ec27e0.js');
-const featureFlagController = require('./feature-flag-controller-ce2162c8.js');
-require('./wait-for-vega-handler-5469ff80.js');
-require('./dto-renderer-manager-bd2bd447.js');
-require('./vega-nonce-manager-df69d3ed.js');
-require('./code-block-823cd481.js');
+require('./internal-translation-controller-053eb0f1.js');
+const featureFlagController = require('./feature-flag-controller-04cb1e69.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const stringMaskStrategy = require('./string-mask-strategy-4e7d3780.js');
-const stringInputFormatterSlimmer = require('./string-input-formatter-slimmer-338bbd73.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-15e65357.js');
+const stringMaskStrategy = require('./string-mask-strategy-dda58395.js');
+const stringInputFormatterSlimmer = require('./string-input-formatter-slimmer-0a334fc6.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-0cc0c1c7.js');
 const componentLoadRequired = require('./component-load-required-6cc74719.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-6a591353.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-536d29fc.js');
-const translationSlimmer = require('./translation-slimmer-f0ebe710.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-12f40b8b.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-062cdcb8.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-84435957.js');
+const translationSlimmer = require('./translation-slimmer-4533bd67.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-34e4eb56.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
+const clickOutsideOnlyToDismissStrategy = require('./click-outside-only-to-dismiss-strategy-407f6d1e.js');
 const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
 const observer = require('./observer-f49483e8.js');
-const monthViewGenerator = require('./month-view-generator-706c5477.js');
+const monthViewGenerator = require('./month-view-generator-6a6dd527.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
 require('./typography-4560e7f1.js');
 require('./string-39438062.js');
-require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
+require('./misc-3d30df91.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./page-resize-observer-slimmer-11937d6f.js');
+require('./index-592b4052.js');
+require('./page-resize-observer-slimmer-7f065ee1.js');
+require('./breakpoints-751d433a.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
-require('./sub-state-observer-slimmer-6afa62f5.js');
+require('./sub-state-observer-slimmer-1dfbc4c3.js');
+require('./icon-manager-c12c6ea9.js');
+require('./create-public-api-runtime-metrics-slimmer-9cb09fb2.js');
 require('./number-4816603d.js');
-require('./dark-mode-style-controller-c21172aa.js');
-require('./_commonjsHelpers-537d719a.js');
-require('./internal-vega-event-manager-d587a33c.js');
-require('./object-e2e28e3d.js');
-require('./base-renderer-0a3b62b7.js');
-require('./index-4d7bce1a.js');
-require('./string-format-strategy.abstract-a8264fca.js');
-require('./index-638a0f0d.js');
-require('./keyboard-manager-d8adb0ed.js');
-require('./responsive-format-facade-96c5f598.js');
+require('./index-f054eb5d.js');
+require('./string-format-strategy.abstract-f2575647.js');
+require('./wait-for-component-did-render-70a01bf9.js');
+require('./keyboard-manager-055e9f67.js');
+require('./internal-vega-event-manager-f7ecf3d4.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./internal-vega-z-index-manager-f03ddb37.js');
+require('./responsive-format-facade-ea59bdcd.js');
 require('./pixel-98f2a10c.js');
 
 /**
@@ -265,11 +263,14 @@ const Icons = {
     icon: `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_41275_12898)"><path d="M5.75 2H10.25V0.75C10.25 0.335938 10.5844 0 11 0C11.4156 0 11.75 0.335938 11.75 0.75V2H13C14.1031 2 15 2.89531 15 4V14C15 15.1031 14.1031 16 13 16H3C1.89531 16 1 15.1031 1 14V4C1 2.89531 1.89531 2 3 2H4.25V0.75C4.25 0.335938 4.58437 0 5 0C5.41563 0 5.75 0.335938 5.75 0.75V2ZM2.5 7.75H5V6H2.5V7.75ZM2.5 9.25V11.25H5V9.25H2.5ZM6.5 9.25V11.25H9.5V9.25H6.5ZM11 9.25V11.25H13.5V9.25H11ZM13.5 6H11V7.75H13.5V6ZM13.5 12.75H11V14.5H13C13.275 14.5 13.5 14.275 13.5 14V12.75ZM9.5 12.75H6.5V14.5H9.5V12.75ZM5 12.75H2.5V14C2.5 14.275 2.72375 14.5 3 14.5H5V12.75ZM9.5 6H6.5V7.75H9.5V6Z" fill="currentColor"/></g><defs><clipPath id="clip0_41275_12898"><rect width="14" height="16" fill="white" transform="translate(1)"/></clipPath></defs></svg>`,
   },
   'caret-down': {
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>`,
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M199 401c9.4 9.4 24.6 9.4 33.9 0L425 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L41 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L199 401z"/></svg>`,
+  },
+  'bulls-eye': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zm0-272a160 160 0 1 1 0 320 160 160 0 1 1 0-320zm0 176a16 16 0 1 0 0-32 16 16 0 1 0 0 32zm0-80a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>`,
   },
 };
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -299,7 +300,7 @@ class VegaDatePickerRenderer extends globalSlimmerRegistry.VegaSlimmer {
     this.renderLabel = () => {
       return (this.label && (index.h("vega-field-label", { ref: (e) => {
           /* istanbul ignore next */
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, domNodeSubjectObserverFactory.VegaClick, async () => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, vegaEventId.VegaClick, async () => {
             await this.focusInput();
           });
         }, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
@@ -339,47 +340,47 @@ class VegaDatePickerRenderer extends globalSlimmerRegistry.VegaSlimmer {
 (() => {
   internalIconManager.VegaInternalIconManager.register({ calendar: Icons.calendar });
 })();
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "disabled", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "size", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "mode", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "label", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "required", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "readOnly", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "autoValidation", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "host", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "isMobileDevice", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "calendarOpenStateController", void 0);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -419,23 +420,23 @@ class VegaDatePickerInputRendererBase extends globalSlimmerRegistry.VegaSlimmer
       index.h("vega-icon", { icon: "close" })))));
   }
 }
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "disabled", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "showClearIcon", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "mode", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "vegaDatePickerValueController", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "calendarOpenStateController", void 0);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -483,23 +484,23 @@ class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRendererBase
     return this.singleDateInputRef;
   }
 }
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "placeholder", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "format", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "calendarOpenStateController", void 0);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -590,32 +591,32 @@ class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendererBase {
     await this.vegaDatePickerCalendarRenderer.triggerRepick(type);
   }
 }
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "placeholder", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "calendarOpenStateController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "translationSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "allowRepick", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "format", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -666,21 +667,21 @@ class VegaDatePickerCalendarRenderer$1 extends globalSlimmerRegistry.VegaSlimmer
           isDateDisabled: (date) => this.isDateDisabled(date) }))));
   }
   addCalendarObserver(calendarRef) {
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, domNodeSubjectObserverFactory.VegaSelectionChange, async (payload) => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, vegaEventId.VegaSelectionChange, async (payload) => {
       await this.onCalendarSelected(payload.detail);
     });
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, domNodeSubjectObserverFactory.VegaClear, async () => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, vegaEventId.VegaClear, async () => {
       await this.calendarOpenStateController.hideCalendar();
     });
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, domNodeSubjectObserverFactory.VegaMonthYearChange, async (payload) => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, vegaEventId.VegaMonthYearChange, async (payload) => {
       this.monthYearChangeEventEmitter.emit(payload.detail);
     });
   }
   addModalObserver(modalRef) {
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, domNodeSubjectObserverFactory.VegaOpen, () => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, vegaEventId.VegaOpen, () => {
       this.calendarOpenStateController.updateIsCalendarShowState(true);
     });
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, domNodeSubjectObserverFactory.VegaClose, () => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, vegaEventId.VegaClose, () => {
       this.calendarOpenStateController.updateIsCalendarShowState(false);
     });
   }
@@ -720,65 +721,65 @@ class VegaDatePickerCalendarRenderer$1 extends globalSlimmerRegistry.VegaSlimmer
 VegaDatePickerCalendarRenderer$1.calendarModalSize = 344;
 VegaDatePickerCalendarRenderer$1.regularDatePickerCalendarDimensionsForSingle = {
   width: 280,
-  height: 316,
+  height: 320,
 };
 VegaDatePickerCalendarRenderer$1.regularDatePickerCalendarDimensionsForRange = {
   width: 608,
-  height: 324,
+  height: 358,
 };
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "format", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "value", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "mode", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "minDate", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "maxDate", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "clearButton", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "dropdownConfig", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "showYearMonthDropdowns", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "timezone", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "isMobileDevice", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "isCalendarShow", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "isDateDisabled", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "allowRepick", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "vegaDatePickerValueController", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "calendarOpenStateController", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaDatePickerCalendarRenderer$1.prototype, "componentDidLoad", null);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -900,41 +901,41 @@ class VegaDatePickerValueController extends globalSlimmerRegistry.VegaSlimmer {
     return isValid;
   }
 }
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDatePickerValueController.prototype, "value", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerValueController.prototype, "mode", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerValueController.prototype, "format", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerValueController.prototype, "changeEventEmitter", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerValueController.prototype, "host", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerValueController.prototype, "isCalendarShow", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerValueController.prototype, "calendarOpenStateController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerValueController.prototype, "componentWillLoad", null);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('watchValue')
 ], VegaDatePickerValueController.prototype, "watchValue", null);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('watchMode')
 ], VegaDatePickerValueController.prototype, "watchMode", null);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1047,29 +1048,29 @@ class VegaDatePickerFormatController extends stringInputFormatterSlimmer.StringI
     this.setup();
   }
 }
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "format", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "mode", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaDatePickerFormatController.prototype, "componentDidLoad", null);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('watchFormat')
 ], VegaDatePickerFormatController.prototype, "watchFormat", null);
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1106,13 +1107,13 @@ class VegaDatePickerKeyboardController extends keyboardManagerSlimmer.KeyboardMa
     ]);
   }
 }
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerKeyboardController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerKeyboardController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerKeyboardController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
 
@@ -1167,7 +1168,7 @@ const VegaDatePickerRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1187,7 +1188,7 @@ class VegaDatePickerCalendarOpenStateController extends elementAppenderSlimmer.E
       placement: ['bottom', 'top'],
       alignment: ['start', 'end'],
       isScreenPosition: featureFlagController.FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
-    }), () => 'custom', 'isCalendarShow');
+    }), () => new clickOutsideOnlyToDismissStrategy.ClickOutsideOnlyToDismissStrategy(), 'isCalendarShow');
     this.clearCalendarStateTaskQueue = new synchronizeTaskQueue.SynchronizeTaskQueue();
   }
   /**
@@ -1282,40 +1283,40 @@ class VegaDatePickerCalendarOpenStateController extends elementAppenderSlimmer.E
     }
   }
 }
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "dropdownConfig", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarOpenStateController.prototype, "isCalendarShow", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "isMobileDevice", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaDatePickerCalendarOpenStateController.prototype, "componentDidRender", null);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('doOpen')
 ], VegaDatePickerCalendarOpenStateController.prototype, "doOpen", null);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('doClose')
 ], VegaDatePickerCalendarOpenStateController.prototype, "doClose", null);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('watchDisabled')
 ], VegaDatePickerCalendarOpenStateController.prototype, "watchDisabled", null);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('watchIsCalendarShow')
 ], VegaDatePickerCalendarOpenStateController.prototype, "watchIsCalendarShow", null);
 
 const vegaDatePickerCss = ":host{display:inline-block;width:100%;text-align:left;line-height:normal}:host vega-field-label{margin-bottom:8px}:host .vega-input-container{position:relative;display:block;border-radius:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));display:flex;align-items:center}:host .vega-input-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .vega-input-container .date-picker-input{padding-left:16px;padding-right:16px;width:100%;box-sizing:border-box;display:flex;align-items:center}:host .vega-input-container.default .date-picker-input{padding-left:16px;padding-right:16px}:host .vega-input-container.small .date-picker-input{padding-left:12px;padding-right:12px}:host .vega-input-container.default .date-picker-input input{padding-top:12px;padding-bottom:12px}:host .vega-input-container.small .date-picker-input input{padding-top:8px;padding-bottom:8px}:host .vega-input-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-input-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-input-container.single-mode.error:focus-within,:host .vega-input-container.range-mode.error .date-picker-input:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));border-radius:8px}:host .vega-input-container.range-mode.error .date-picker-input:first-of-type:focus-within{margin:-1px 0 -1px -1px}:host .vega-input-container.range-mode.error .date-picker-input:last-of-type:focus-within{margin:-1px -1px -1px 0}:host .vega-input-container.single-mode:not(.error):focus-within,:host .vega-input-container.range-mode:not(.error) .date-picker-input:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));border-radius:8px}:host .vega-input-container.range-mode .date-picker-input:first-of-type:focus-within{margin:-1px 0 -1px -1px}:host .vega-input-container.range-mode .date-picker-input:last-of-type:focus-within{margin:-1px -1px -1px 0}:host .vega-input-container input{width:100%;box-sizing:content-box;border-width:0px;margin:0px;outline:2px solid transparent;outline-offset:2px;background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-container input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-container input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-container input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;padding-left:8px;padding-right:8px;padding-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}.vega-input-clear-icon{width:16px;height:16px;cursor:pointer;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-input-clear-icon vega-icon{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0}:host .range-input-divider{width:1px;height:24px;border-style:solid;border-right-width:1px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1))}:host .vega-input-container.range-mode.mobile .range-input-divider{width:100%;height:1px;border-style:solid;border-right-width:0px;border-top-width:1px;border-bottom-width:0px;border-left-width:0px;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1))}:host .vega-input-prefix{display:flex;margin-right:8px}:host .vega-input-container.range-mode.mobile.small .vega-input-prefix{margin-right:8px}:host .vega-input-container.range-mode.mobile{flex-direction:column}:host .vega-input-container.range-mode.mobile .date-picker-input:last-of-type{padding-left:40px}:host .vega-input-container.range-mode.mobile.small .date-picker-input:last-of-type{padding-left:36px}:host(.disabled) .vega-input-container{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host(.disabled) .vega-input-container:hover{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.disabled) .vega-input-container input{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}";
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -1378,9 +1379,9 @@ const VegaDatePicker = class {
         ].filter(Boolean);
       },
     });
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePicker, domNodeSubjectObserverFactory.VegaChange);
-    this.monthYearChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePicker, domNodeSubjectObserverFactory.VegaMonthYearChange);
-    this.inputEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange, domNodeSubjectObserverFactory.VegaClear, domNodeSubjectObserverFactory.VegaMonthYearChange], () => this.vegaDatePickerCalendarRenderer.getCalendarRef());
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePicker, vegaEventId.VegaChange);
+    this.monthYearChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePicker, vegaEventId.VegaMonthYearChange);
+    this.inputEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange, vegaEventId.VegaClear, vegaEventId.VegaMonthYearChange], () => this.vegaDatePickerCalendarRenderer.getCalendarRef());
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaDatePickerRuntimeMetricsPayloadDefinition);
     this.isMobileDevice = ui.getDeviceType() === ui.DeviceType.MOBILE;
     this.isCalendarShow = false;
@@ -1585,63 +1586,63 @@ const VegaDatePicker = class {
     "disabled": ["watchDisabled"]
   }; }
 };
-__decorate$a([
+__decorate$b([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaDatePicker.prototype, "globalSlimmers", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "translationSlimmer", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "calendarOpenStateController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerValueController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "startInputFormatController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "endInputFormatController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerKeyboardController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "formFieldController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "changeEventEmitter", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "inputEventPrevent", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$a([
+__decorate$b([
   componentLoadRequired.ComponentLoadRequired()
 ], VegaDatePicker.prototype, "watchValue", null);
 VegaDatePicker.style = vegaDatePickerCss;
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1654,6 +1655,7 @@ class VegaDatePickerCalendarRenderer extends globalSlimmerRegistry.VegaSlimmer {
         'static-height': this.staticHeight,
       } },
       index.h("div", { class: "container__main" },
+        this.headerRenderer.render(),
         this.renderContainer(),
         this.renderFooter())));
   }
@@ -1673,7 +1675,7 @@ class VegaDatePickerCalendarRenderer extends globalSlimmerRegistry.VegaSlimmer {
   renderFooter() {
     return (this.clearButton && (index.h("div", { class: "footer-container" },
       index.h("vega-button-link", { ref: (ref) => {
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaClick, () => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
             this.clearCalendar();
           });
         }, label: this.translationSlimmer.t('Clear') }))));
@@ -1686,30 +1688,33 @@ class VegaDatePickerCalendarRenderer extends globalSlimmerRegistry.VegaSlimmer {
     changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDatePickerCalendarClear), {});
   }
 }
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "host", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "monthItemRenderer", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "staticHeight", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "clearEventEmitter", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "headerRenderer", void 0);
 
 const MonthNames = [
   'January',
@@ -1726,38 +1731,25 @@ const MonthNames = [
   'December',
 ];
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class VegaDatePickerCalendarYearMonthSwitcherRenderer extends globalSlimmerRegistry.VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.startDropdownRef = {
-      month: null,
-      year: null,
-    };
-    this.endDropdownRef = {
-      month: null,
-      year: null,
-    };
-  }
-  render(period, type) {
-    return (index.h("vega-flex", { gap: 'size-8', justifyContent: 'center' },
+  render() {
+    const canRender = this.mode !== 'range' || this.showYearMonthDropdowns || this.isMobileDevice;
+    return (canRender && (index.h("vega-flex", { justifyContent: 'center' },
       this.showYearMonthDropdowns
-        ? this.renderMonthDropdownSwitcher(period, type)
-        : this.renderCurrentMonth(period),
+        ? this.renderMonthDropdownSwitcher()
+        : this.renderCurrentMonth(),
       this.showYearMonthDropdowns
-        ? this.renderYearDropdownSwitcher(period, type)
-        : this.renderCurrentYear(period)));
-  }
-  getMonthDropdownOptions(type) {
-    let currentYear = this.currentPeriod.current.year;
-    const currentMonth = this.currentPeriod.current.month;
-    if (type === 'end' && currentMonth === 12)
-      currentYear += 1;
+        ? this.renderYearDropdownSwitcher()
+        : this.renderCurrentYear())));
+  }
+  getMonthDropdownOptions() {
+    const currentYear = this.currentPeriod.current.year;
     return MonthNames.map((month, index) => {
       return {
         key: `${index}`,
@@ -1792,37 +1784,25 @@ class VegaDatePickerCalendarYearMonthSwitcherRenderer extends globalSlimmerRegis
     }
     return years;
   }
-  renderMonthDropdownSwitcher(period, type) {
-    const { month } = period.current;
+  renderMonthDropdownSwitcher() {
+    const { month } = this.currentPeriod.current;
     const monthIndex = month - 1;
-    return (index.h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getMonthDropdownOptions(type), selectedSourceKey: monthIndex.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
-        if (type === 'start') {
-          this.startDropdownRef.month = node;
-        }
-        else {
-          this.endDropdownRef.month = node;
-        }
+    return (index.h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getMonthDropdownOptions(), selectedSourceKey: monthIndex.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
         this.onDropdownShowOrHide(node);
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectObserverFactory.VegaDropdownClick, (payload) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, vegaEventId.VegaDropdownClick, (payload) => {
           const selectedMonth = parseInt(payload.detail);
-          this.setDateBasedOnSelectedMonth(period, selectedMonth, type);
+          this.setDateBasedOnSelectedMonth(selectedMonth);
         });
-      } }, this.renderCurrentMonth(period)));
+      } }, this.renderCurrentMonth()));
   }
-  renderYearDropdownSwitcher(period, type) {
-    const { year } = period.current;
+  renderYearDropdownSwitcher() {
+    const { year } = this.currentPeriod.current;
     return (index.h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getYearDropdownOptions(), selectedSourceKey: year.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
-        if (type === 'start') {
-          this.startDropdownRef.year = node;
-        }
-        else {
-          this.endDropdownRef.year = node;
-        }
         this.onDropdownShowOrHide(node);
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectObserverFactory.VegaDropdownClick, (payload) => {
-          this.setDateBasedOnSelectedYear(period, parseInt(payload.detail), type);
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, vegaEventId.VegaDropdownClick, (payload) => {
+          this.setDateBasedOnSelectedYear(parseInt(payload.detail));
         });
-      } }, this.renderCurrentYear(period)));
+      } }, this.renderCurrentYear()));
   }
   /**
    * Control ui when dropdown shows or closes
@@ -1830,11 +1810,10 @@ class VegaDatePickerCalendarYearMonthSwitcherRenderer extends globalSlimmerRegis
    * @param {HTMLVegaDropdownElement} dropdown - Month or year dropdown
    */
   onDropdownShowOrHide(dropdown) {
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, domNodeSubjectObserverFactory.VegaDropdownShow, async () => {
-      await this.closeOpenDropdowns(dropdown);
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, vegaEventId.VegaDropdownShow, async () => {
       dropdown.classList.add('active');
     });
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, domNodeSubjectObserverFactory.VegaDropdownHide, () => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, vegaEventId.VegaDropdownHide, () => {
       const parentElement = dropdown.closest('.calendar');
       if (parentElement) {
         const dropdown = parentElement.querySelector('vega-dropdown.active');
@@ -1842,45 +1821,34 @@ class VegaDatePickerCalendarYearMonthSwitcherRenderer extends globalSlimmerRegis
       }
     });
   }
-  renderCurrentMonth(period) {
-    return (index.h("div", { class: "month-item-name" },
-      index.h("span", null, this.translationSlimmer.t(period.current.getMonthName())),
+  renderCurrentMonth() {
+    const label = this.translationSlimmer.t(this.currentPeriod.current.getMonthName());
+    return this.size === 'small' && this.showYearMonthDropdowns ? (index.h("vega-button-link", { class: "small-month-item-name", size: "small", label: label })) : (index.h("div", { class: "month-item-name" },
+      index.h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }
-  renderCurrentYear(period) {
-    return (index.h("div", { class: "month-item-year" },
-      index.h("span", null, period.current.year),
+  renderCurrentYear() {
+    const label = this.currentPeriod.current.year.toString();
+    return this.size === 'small' && this.showYearMonthDropdowns ? (index.h("vega-button-link", { class: "small-month-item-year", size: "small", label: label })) : (index.h("div", { class: "month-item-year" },
+      index.h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }
   renderDropdownSwitchIcon() {
-    return (this.showYearMonthDropdowns && (index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('caret-down') })));
+    return (this.showYearMonthDropdowns && (index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('caret-down'), color: 'text-link' })));
   }
-  setDateBasedOnSelectedMonth(period, monthIndex, type) {
-    const { year } = period.current;
-    const date = type === 'start' ? new Date(year, monthIndex, 1) : new Date(year, monthIndex - 1, 1);
+  setDateBasedOnSelectedMonth(monthIndex) {
+    const { year } = this.currentPeriod.current;
+    const date = new Date(year, monthIndex, 1);
     const newPeriod = new typeGuard.MonthPeriod(typeGuard.CalendarDate.from(date));
     this.currentPeriodController.updateCalendarPeriod(newPeriod);
   }
-  setDateBasedOnSelectedYear(period, year, type) {
-    const { month } = period.current;
+  setDateBasedOnSelectedYear(year) {
+    const { month } = this.currentPeriod.current;
     const startMonthIndex = month - 1;
-    const endMonthIndex = startMonthIndex - 1;
-    const date = type === 'start' ? new Date(year, startMonthIndex, 1) : new Date(year, endMonthIndex, 1);
+    const date = new Date(year, startMonthIndex, 1);
     const newPeriod = new typeGuard.MonthPeriod(typeGuard.CalendarDate.from(date));
     this.currentPeriodController.updateCalendarPeriod(newPeriod);
   }
-  /**
-   * Close any open vega-dropdown and ignore currently clicked one
-   *
-   * * @param {HTMLVegaDropdownElement} dropdownToIgnore - Dropdown to ignore
-   */
-  async closeOpenDropdowns(dropdownToIgnore) {
-    const dropdowns = [this.startDropdownRef, this.endDropdownRef];
-    await Promise.all(dropdowns
-      .flatMap((ref) => [ref.month, ref.year])
-      .filter((dropdown) => Boolean(dropdown) && dropdown !== dropdownToIgnore)
-      .map((dropdown) => dropdown.hide()));
-  }
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
@@ -1889,29 +1857,38 @@ class VegaDatePickerCalendarYearMonthSwitcherRenderer extends globalSlimmerRegis
 })();
 VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_BEFORE_CURRENT_YEAR = 10;
 VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_AFTER_CURRENT_YEAR = 10;
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriodController", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "showYearMonthDropdowns", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "translationSlimmer", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "minCalendarDate", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "maxCalendarDate", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "yearMonthDropdownProps", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriod", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "size", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "mode", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "isMobileDevice", void 0);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1951,17 +1928,17 @@ class VegaDatePickerCalendarStateBaseAbstract extends globalSlimmerRegistry.Vega
     return true;
   }
 }
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarStateBaseAbstract.prototype, "host", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarStateBaseAbstract.prototype, "connectedCallback", null);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaDatePickerCalendarStateBaseAbstract.prototype, "disconnectedCallback", null);
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2104,62 +2081,62 @@ class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePickerCalend
     domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalDatePickerCalendarUpdatePeriodByUser);
   }
 }
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "host", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "today", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "mode", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "format", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "timezone", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "minCalendarDate", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "maxCalendarDate", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "isMobileDevice", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "calendarSelection", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "connectedCallback", null);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "disconnectedCallback", null);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "componentWillLoad", null);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('watchMaxCalendarDate')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMaxCalendarDate", null);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('watchMinCalendarDate')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMinCalendarDate", null);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentPeriod')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchCurrentPeriod", null);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('reset')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "resetCurrentPeriod", null);
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2182,20 +2159,20 @@ class VegaDatePickerCalendarTodayController extends globalSlimmerRegistry.VegaSl
     this.today = typeGuard.CalendarDate.from(new Date(), this.timezone);
   }
 }
-__decorate$5([
+__decorate$6([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarTodayController.prototype, "timezone", void 0);
-__decorate$5([
+__decorate$6([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarTodayController.prototype, "today", void 0);
-__decorate$5([
+__decorate$6([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarTodayController.prototype, "connectedCallback", null);
-__decorate$5([
+__decorate$6([
   globalSlimmerRegistry.MapToComponentMethod('watchTimezone')
 ], VegaDatePickerCalendarTodayController.prototype, "watchTimezone", null);
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2210,37 +2187,16 @@ class VegaDatePickerMonthItemRenderer extends globalSlimmerRegistry.VegaSlimmer
     const period = type === 'end' ? this.currentPeriod.next() : this.currentPeriod;
     const periodView = this.monthViewGenerator.generate(period);
     return (index.h("div", { class: "month-item" },
-      this.renderMonthHeader(period, type),
+      this.renderCurrentYearMonth(period),
       this.renderWeek(periodView),
       this.renderDays(periodView, period)));
   }
-  renderMonthHeader(period, type) {
-    return (index.h("vega-grid", { class: "month-item-header", column: '3-auto', row: 1 },
-      this.renderPrevIcon(period, type),
-      this.yearMonthSwitcherRender.render(period, type),
-      this.renderNextIcon(period, type)));
-  }
-  renderPrevIcon(period, type) {
-    var _a;
-    const firstDateOfMonth = period.current.firstDateOfMonth();
-    const lockedPreviousPeriod = this.isBeforeMinDate(firstDateOfMonth) || ((_a = this.minCalendarDate) === null || _a === void 0 ? void 0 : _a.equal(firstDateOfMonth));
-    const needHide = !this.isMobileDevice && this.mode === 'range' && type === 'end';
-    return lockedPreviousPeriod || needHide ? (index.h("div", { class: "locked-month-button" })) : (index.h("vega-button-circle", { class: "button-previous-month", variant: "icon-only", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-left'), ref: (ref) => {
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaClick, () => {
-          this.currentPeriodController.gotoPreviousPeriod();
-        });
-      }, size: this.getNavigationIconSize() }));
-  }
-  renderNextIcon(period, type) {
-    var _a;
-    const lastDateOfMonth = period.current.lastDateOfMonth();
-    const lockedNextPeriod = this.isAfterMaxDate(lastDateOfMonth) || ((_a = this.maxCalendarDate) === null || _a === void 0 ? void 0 : _a.equal(lastDateOfMonth));
-    const needHide = !this.isMobileDevice && this.mode === 'range' && type === 'start';
-    return lockedNextPeriod || needHide ? (index.h("div", { class: "locked-month-button" })) : (index.h("vega-button-circle", { class: "button-next-month", variant: "icon-only", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-right'), ref: (ref) => {
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaClick, () => {
-          this.currentPeriodController.gotoNextPeriod();
-        });
-      }, size: this.getNavigationIconSize() }));
+  renderCurrentYearMonth(period) {
+    return (this.mode === 'range' &&
+      !this.isMobileDevice && (index.h("vega-box", { class: "current-month-year" },
+      this.translationSlimmer.t(period.current.getMonthName()),
+      ' ',
+      period.current.year)));
   }
   renderWeek(periodView) {
     return (index.h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1 }, periodView.weekdays.map((weekDay) => {
@@ -2295,63 +2251,44 @@ class VegaDatePickerMonthItemRenderer extends globalSlimmerRegistry.VegaSlimmer
   isAfterMaxDate(day) {
     return this.maxCalendarDate && day.isAfter(this.maxCalendarDate);
   }
-  getNavigationIconSize() {
-    if (this.size === 'large')
-      return 'default';
-    if (this.size === 'small')
-      return 'extra-small';
-    return 'small';
-  }
 }
-(() => {
-  internalIconManager.VegaInternalIconManager.register({
-    'chevron-left': Icons['chevron-left'],
-    'chevron-right': Icons['chevron-right'],
-  });
-})();
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "currentPeriod", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "today", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "translationSlimmer", void 0);
-__decorate$4([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "yearMonthSwitcherRender", void 0);
-__decorate$4([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "mode", void 0);
-__decorate$4([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "currentPeriodController", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "hoverDate", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "maxCalendarDate", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "minCalendarDate", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "selectionController", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "calendarSelection", void 0);
-__decorate$4([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "staticHeight", void 0);
-__decorate$4([
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "mode", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
-__decorate$4([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isMobileDevice", void 0);
 
@@ -2479,7 +2416,7 @@ class CalendarSelection {
   }
 }
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2624,47 +2561,47 @@ class VegaDatePickerCalendarSelectionController extends VegaDatePickerCalendarSt
     changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDatePickerCalendarUpdatePeriodByUser), {});
   }
 }
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "host", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "mode", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "format", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarSelectionController.prototype, "selection", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarSelectionController.prototype, "calendarSelection", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarSelectionController.prototype, "hoverDate", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "clearEventEmitter", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "vegaSelectionChangeEventEmitter", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "allowRepickController", void 0);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerCalendarSelectionController.prototype, "componentWillLoad", null);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentMethod('watchSelection')
 ], VegaDatePickerCalendarSelectionController.prototype, "watchSelection", null);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentMethod('reset')
 ], VegaDatePickerCalendarSelectionController.prototype, "resetRange", null);
-__decorate$3([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentMethod('watchCalendarSelection')
 ], VegaDatePickerCalendarSelectionController.prototype, "watchCalendarSelection", null);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2694,32 +2631,32 @@ class VegaDatePickerCalendarMinMaxDateController extends globalSlimmerRegistry.V
     this.minCalendarDate = typeGuard.CalendarDate.fromString(this.minDate, this.format);
   }
 }
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "maxDate", void 0);
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "minDate", void 0);
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "format", void 0);
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "maxCalendarDate", void 0);
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "minCalendarDate", void 0);
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "componentWillLoad", null);
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentMethod('watchMaxDate')
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMaxDate", null);
-__decorate$2([
+__decorate$3([
   globalSlimmerRegistry.MapToComponentMethod('watchMinDate')
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMinDate", null);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2771,23 +2708,126 @@ class VegaDatePickerCalendarAllowRepickController extends globalSlimmerRegistry.
     }
   }
 }
-__decorate$1([
+__decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarAllowRepickController.prototype, "calendarSelection", void 0);
-__decorate$1([
+__decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarAllowRepickController.prototype, "isMobileDevice", void 0);
-__decorate$1([
+__decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDatePickerCalendarAllowRepickController.prototype, "currentPeriodController", void 0);
-__decorate$1([
+__decorate$2([
   globalSlimmerRegistry.MapToComponentMethod('triggerRepick')
 ], VegaDatePickerCalendarAllowRepickController.prototype, "triggerRepick", null);
-__decorate$1([
+__decorate$2([
   globalSlimmerRegistry.MapToComponentMethod('watchCalendarSelection')
 ], VegaDatePickerCalendarAllowRepickController.prototype, "watchCalendarSelection", null);
 
-const vegaDatePickerCalendarCss = ":host{--vega-litepicker-container-width:calc(var(--vega-litepicker-day-width) * 7)}.calendar,.calendar .container__main,.calendar .container__months{height:100%}:host(.small.range) .calendar.static-height .container__main,:host(.regular.range) .calendar.static-height .container__main,:host(.large.range) .calendar.static-height .container__main{aspect-ratio:1/1}:host(.small){--vega-litepicker-day-width:28px;--vega-litepicker-day-height:28px;--vega-date-picker-calendar-range-space-size:16px}:host(.small) .calendar .container__main{max-width:360px;max-height:360px}:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;margin-bottom:4px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small.range) .calendar .container__main{width:100%;max-width:600px;max-height:360px}:host(.regular){--vega-litepicker-day-width:40px;--vega-litepicker-day-height:40px;--vega-date-picker-calendar-range-space-size:24px}:host(.regular) .calendar .container__main{max-width:450px;max-height:450px}:host(.regular) .calendar .container__months .month-item-header{margin-bottom:12px}:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular.range) .calendar .container__main{width:100%;max-width:900px;max-height:450px}:host(.large){--vega-litepicker-day-width:56px;--vega-litepicker-day-height:56px;--vega-date-picker-calendar-range-space-size:40px}:host(.large) .calendar .container__main{max-width:600px;max-height:600px}:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px;margin-bottom:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large.range) .calendar .container__main{width:100%;max-width:1200px;max-height:600px}.calendar .container__main{display:flex;flex-direction:column}.calendar .container__months{display:flex}.calendar .container__months.columns-2{width:100%;flex-direction:row}.calendar .container__months .month-item{box-sizing:content-box;position:relative;width:100%;height:100%;z-index:1;display:flex;flex-direction:column}.calendar .container__months.columns-2 .month-item:first-of-type{padding-right:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months.columns-2 .month-item:last-of-type{padding-left:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months .month-item:nth-child(2)::before{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));margin-top:32px;margin-bottom:32px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:none;width:1px;content:\"\";display:block}.calendar .container__months .month-item-header{display:flex;justify-content:space-between;align-items:center;text-align:center;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}.calendar .container__months .month-item-header div>.month-item-name{margin-right:5px}.calendar .container__months .month-item-header .button-previous-month,.calendar .container__months .month-item-header .button-next-month{visibility:hidden;text-decoration:none;cursor:default}.calendar .container__months .month-item-header .button-previous-month *,.calendar .container__months .month-item-header .button-next-month *{pointer-events:none}.calendar .container__months .month-item-header .button-previous-month>svg,.calendar .container__months .month-item-header .button-previous-month>img{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar .container__months .month-item-header .button-next-month>svg,.calendar .container__months .month-item-header .button-next-month>img{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar .container__months .month-item-weekdays-row{color:rgba(var(--v-text-primary, 32, 54, 69, 1));place-items:center}.calendar .container__months .month-item:first-child .button-previous-month{visibility:visible}.calendar .container__months .month-item:last-child .button-next-month{visibility:visible}.calendar .container__months .month-item.no-previous-month .button-previous-month{visibility:hidden}.calendar .container__months .month-item.no-next-month .button-next-month{visibility:hidden}.calendar .container__days{text-align:center;place-items:center;flex:1 1 auto}.calendar.static-height .container__days{align-content:flex-start}.calendar:not(.static-height) .container__days{flex:none}.calendar .container__months .month-item-weekdays-row>div,.calendar .container__days>div,.calendar .container__days>a{padding:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--vega-litepicker-day-height);width:100%;min-width:var(--vega-litepicker-day-width)}.calendar .container__days .day-item{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;text-align:center;border-radius:9999px;cursor:default}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled):active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));border-width:0px}.calendar .day-item.is-start-date.is-end-date.is-locked:active{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}.calendar .container__days .day-item:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-locked:hover:before,html.dark .calendar .container__days .day-item.is-locked:hover:before{border-style:none}.calendar .container__days .day-item.is-disabled:hover:before{border-style:none}.calendar .container__days .day-item.is-locked,.calendar .container__days .day-item.is-disabled{-webkit-tap-highlight-color:transparent}.calendar .container__days .day-item:hover{position:relative}.calendar .container__days .day-item.is-today{color:rgba(var(--v-text-link, 19, 98, 226, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar .container__days .day-item.is-in-range{border-radius:0px;position:relative;z-index:2;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled).is-in-range:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-start-date:hover:before{z-index:2}.calendar .container__days .day-item.is-start-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-start-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-start-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-end-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-end-date:hover:before{z-index:2}.calendar .container__days .day-item.is-end-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-end-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-end-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date.is-end-date{border-radius:9999px}.calendar .container__days .day-item.is-start-date.is-end-date:after,html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after{background:none}.calendar .container__tooltip{display:none}.calendar .container__days .day-item.is-locked{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed}.calendar.mobilefriendly[data-plugins*=mobilefriendly] .container__days>div{height:var(--vega-date-picker-calendar-day-height)}.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}.calendar .footer-container{margin-top:16px;height:24px}:host(.vega-force-hidden){display:none !important}.calendar{left:initial !important;top:initial !important;position:initial !important}.button-next-month svg,.button-previous-month svg{width:12px;height:16px}.calendar .container__days .day-item.is-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed;text-decoration:line-through}.calendar .container__days>div:not(.day-item){-webkit-tap-highlight-color:transparent}.calendar .month-item-header>div.dropdown-section{display:flex;gap:12px}.calendar .month-item-header>div.dropdown-section .dropdown-current-value{position:relative;display:flex;gap:4px;align-items:center;cursor:pointer}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}.locked-month-button{width:32px;height:32px}vega-dropdown .month-item-name,vega-dropdown .month-item-year{display:flex;gap:4px;align-items:center;cursor:pointer}vega-dropdown.active .month-item-name,vega-dropdown.active .month-item-year{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}vega-dropdown.active .month-item-name:active,vega-dropdown.active .month-item-year:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}vega-dropdown.active .month-item-name:hover,vega-dropdown.active .month-item-year:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}vega-dropdown.active .month-item-name:focus-visible,vega-dropdown.active .month-item-year:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}";
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDatePickerCalendarHeaderRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  render() {
+    return (index.h("vega-flex", { class: "month-item-header", alignItems: "center" },
+      this.renderSwitcher(),
+      this.yearMonthSwitcherRender.render()));
+  }
+  renderSwitcher() {
+    return (index.h("vega-flex", { gap: "size-8", alignItems: "center" },
+      this.renderPrevIcon(),
+      this.renderToday(),
+      this.renderNextIcon()));
+  }
+  renderPrevIcon() {
+    const startDate = this.currentPeriod.current.firstDateOfMonth();
+    const isDisabled = this.minCalendarDate &&
+      (startDate.isBefore(this.minCalendarDate) || startDate.equal(this.minCalendarDate));
+    return (index.h("vega-button-circle", { class: {
+        'button-previous-month': true,
+        'disabled': isDisabled,
+      }, variant: "icon-only", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-left'), ref: (ref) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
+          this.currentPeriodController.gotoPreviousPeriod();
+        });
+      }, iconColor: isDisabled ? 'text-disabled' : 'text-link', size: this.getNavigationIconSize(), disabled: isDisabled }));
+  }
+  renderNextIcon() {
+    const period = this.mode === 'range' ? this.currentPeriod.next() : this.currentPeriod;
+    const endDate = period.current.lastDateOfMonth();
+    const isDisabled = this.maxCalendarDate &&
+      (endDate.isAfter(this.maxCalendarDate) || endDate.equal(this.maxCalendarDate));
+    return (index.h("vega-button-circle", { class: {
+        'button-next-month': true,
+        'disabled': isDisabled,
+      }, variant: "icon-only", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-right'), ref: (ref) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
+          this.currentPeriodController.gotoNextPeriod();
+        });
+      }, size: this.getNavigationIconSize(), iconColor: isDisabled ? 'text-disabled' : 'text-link', disabled: isDisabled }));
+  }
+  renderToday() {
+    const hasLabel = this.mode === 'range' && !this.isMobileDevice && this.size !== 'small';
+    return (index.h("vega-button-link", { class: {
+        'button-today': true,
+        'with-label': hasLabel,
+      }, label: hasLabel ? this.translationSlimmer.t('Today') : '', ref: (ref) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
+          this.currentPeriodController.updateCalendarPeriod(new typeGuard.MonthPeriod(this.today, true, this.timezone));
+        });
+      }, size: this.size === 'large' ? 'default' : 'small', icon: internalIconManager.VegaInternalIconManager.getIconKey('bulls-eye') }));
+  }
+  getNavigationIconSize() {
+    if (this.size === 'large')
+      return 'small';
+    return 'extra-small';
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'chevron-left': Icons['chevron-left'],
+    'chevron-right': Icons['chevron-right'],
+    'bulls-eye': Icons['bulls-eye'],
+  });
+})();
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "currentPeriod", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "today", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "translationSlimmer", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "yearMonthSwitcherRender", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "mode", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "currentPeriodController", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "maxCalendarDate", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "minCalendarDate", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "size", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "timezone", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "isMobileDevice", void 0);
+
+const vegaDatePickerCalendarCss = ":host{--vega-litepicker-container-width:calc(var(--vega-litepicker-day-width) * 7)}.calendar,.calendar .container__main,.calendar .container__months{height:100%}:host(.small.range) .calendar.static-height .container__main,:host(.regular.range) .calendar.static-height .container__main,:host(.large.range) .calendar.static-height .container__main{aspect-ratio:1/1}:host .month-item-header .button-today::part(link){color:rgba(var(--v-text-link, 19, 98, 226, 1));vertical-align:top}:host .month-item-header vega-dropdown .month-item-name,:host .month-item-header vega-dropdown .month-item-year{display:flex;gap:8px;align-items:center;cursor:pointer;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))}:host .month-item-header vega-dropdown.active .month-item-name,:host .month-item-header vega-dropdown.active .month-item-year{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .month-item-header .button-previous-month.disabled,:host .month-item-header .button-next-month.disabled{pointer-events:none}:host(.small.single) vega-dropdown .month-item-name span{max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.small){--vega-litepicker-day-width:28px;--vega-litepicker-day-height:28px;--vega-date-picker-calendar-range-space-size:16px}:host(.small) .current-month-year{text-align:center;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .current-month-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .current-month-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .current-month-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .month-item-header{gap:8px;margin-bottom:12px}:host(.small) .month-item-header .button-today{height:16px}:host(.small) .month-item-header .month-item-name,:host(.small) .month-item-header .month-item-year{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .month-item-header .month-item-name,:host(.small) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .month-item-header .month-item-name,:host(.small) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .month-item-header .month-item-name,:host(.small) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .month-item-header .month-item-name{margin-right:4px}:host(.small) .month-item-header vega-dropdown .month-item-name{margin-right:8px}:host(.small) .month-item-header vega-dropdown .month-item-name,:host(.small) .month-item-header vega-dropdown .month-item-year{border-radius:4px;padding-left:4px;padding-right:4px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;gap:2px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .month-item-header vega-dropdown .month-item-name,:host(.small) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .month-item-header vega-dropdown .month-item-name,:host(.small) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .month-item-header vega-dropdown .month-item-name,:host(.small) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.small) .month-item-header vega-dropdown .month-item-name vega-icon,:host(.small) .month-item-header vega-dropdown .month-item-year vega-icon{width:12px;height:12px}:host(.small) .month-item-header .small-month-item-name{margin-right:8px}:host(.small) .month-item-header .small-month-item-name::part(label-container),:host(.small) .month-item-header .small-month-item-year::part(label-container){font-size:14px}:host(.small) .month-item .current-month-year{margin-bottom:4px}:host(.small) .calendar .container__main{max-width:360px;max-height:360px}:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;margin-bottom:4px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small.range) .calendar .container__main{width:100%;max-width:600px;max-height:360px}:host(.regular){--vega-litepicker-day-width:40px;--vega-litepicker-day-height:40px;--vega-date-picker-calendar-range-space-size:24px}:host(.regular) .current-month-year{text-align:center;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .current-month-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .current-month-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .current-month-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .month-item-header{gap:16px;margin-bottom:24px}:host(.regular) .month-item-header .button-today{height:16px}:host(.regular) .month-item-header .button-today.with-label{height:18px}:host(.regular) .month-item-header .month-item-name,:host(.regular) .month-item-header .month-item-year{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .month-item-header .month-item-name,:host(.regular) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .month-item-header .month-item-name,:host(.regular) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .month-item-header .month-item-name,:host(.regular) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .month-item-header .month-item-name{margin-right:4px}:host(.regular) .month-item-header vega-dropdown .month-item-name{margin-right:16px}:host(.regular) .month-item-header vega-dropdown .month-item-name,:host(.regular) .month-item-header vega-dropdown .month-item-year{border-radius:4px;padding-left:8px;padding-right:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px;padding-top:3px;padding-bottom:3px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .month-item-header vega-dropdown .month-item-name,:host(.regular) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .month-item-header vega-dropdown .month-item-name,:host(.regular) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .month-item-header vega-dropdown .month-item-name,:host(.regular) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}}:host(.regular) .month-item .current-month-year{margin-bottom:12px}:host(.regular) .calendar .container__main{max-width:450px;max-height:450px}:host(.regular) .calendar .container__months .month-item-header{margin-bottom:12px}:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular.range) .calendar .container__main{width:100%;max-width:900px;max-height:450px}:host(.large){--vega-litepicker-day-width:56px;--vega-litepicker-day-height:56px;--vega-date-picker-calendar-range-space-size:40px}:host(.large) .current-month-year{text-align:center;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .current-month-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .current-month-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .current-month-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .month-item-header{gap:16px;margin-bottom:24px}:host(.large) .month-item-header .button-today{height:16px}:host(.large) .month-item-header .button-today.with-label{height:24px}:host(.large) .month-item-header .month-item-name{margin-right:4px}:host(.large) .month-item-header .month-item-name,:host(.large) .month-item-header .month-item-year{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px;gap:8px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .month-item-header .month-item-name,:host(.large) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .month-item-header .month-item-name,:host(.large) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .month-item-header .month-item-name,:host(.large) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .month-item-header vega-dropdown .month-item-name{margin-right:24px}:host(.large) .month-item-header vega-dropdown .month-item-name,:host(.large) .month-item-header vega-dropdown .month-item-year{border-radius:8px;padding-left:12px;padding-right:12px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;padding-top:7px;padding-bottom:7px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .month-item-header vega-dropdown .month-item-name,:host(.large) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .month-item-header vega-dropdown .month-item-name,:host(.large) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .month-item-header vega-dropdown .month-item-name,:host(.large) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.large) .month-item .current-month-year{margin-bottom:16px}:host(.large) .calendar .container__main{max-width:600px;max-height:600px}:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px;margin-bottom:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large.range) .calendar .container__main{width:100%;max-width:1200px;max-height:600px}.calendar .container__main{display:flex;flex-direction:column}.calendar .container__months{display:flex}.calendar .container__months.columns-2{width:100%;flex-direction:row}.calendar .container__months .month-item{box-sizing:content-box;position:relative;width:100%;height:100%;z-index:1;display:flex;flex-direction:column}.calendar .container__months.columns-2 .month-item:first-of-type{padding-right:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months.columns-2 .month-item:last-of-type{padding-left:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months .month-item:nth-child(2)::before{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));margin-bottom:32px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:none;width:1px;content:\"\";display:block}.calendar .container__months .month-item-weekdays-row{color:rgba(var(--v-text-primary, 32, 54, 69, 1));place-items:center}.calendar .container__days{text-align:center;place-items:center;flex:1 1 auto}.calendar.static-height .container__days{align-content:flex-start}.calendar:not(.static-height) .container__days{flex:none}.calendar .container__months .month-item-weekdays-row>div,.calendar .container__days>div,.calendar .container__days>a{padding:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--vega-litepicker-day-height);width:100%;min-width:var(--vega-litepicker-day-width)}.calendar .container__days .day-item{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;text-align:center;border-radius:9999px;cursor:default}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled):active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));border-width:0px}.calendar .day-item.is-start-date.is-end-date.is-locked:active{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}.calendar .container__days .day-item:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-locked:hover:before,html.dark .calendar .container__days .day-item.is-locked:hover:before{border-style:none}.calendar .container__days .day-item.is-disabled:hover:before{border-style:none}.calendar .container__days .day-item.is-locked,.calendar .container__days .day-item.is-disabled{-webkit-tap-highlight-color:transparent}.calendar .container__days .day-item:hover{position:relative}.calendar .container__days .day-item.is-today{color:rgba(var(--v-text-link, 19, 98, 226, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar .container__days .day-item.is-in-range{border-radius:0px;position:relative;z-index:2;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled).is-in-range:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-start-date:hover:before{z-index:2}.calendar .container__days .day-item.is-start-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-start-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-start-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-end-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-end-date:hover:before{z-index:2}.calendar .container__days .day-item.is-end-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-end-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-end-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date.is-end-date{border-radius:9999px}.calendar .container__days .day-item.is-start-date.is-end-date:after,html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after{background:none}.calendar .container__tooltip{display:none}.calendar .container__days .day-item.is-locked{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed}.calendar.mobilefriendly[data-plugins*=mobilefriendly] .container__days>div{height:var(--vega-date-picker-calendar-day-height)}.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}.calendar .footer-container{margin-top:16px;height:24px}:host(.vega-force-hidden){display:none !important}.calendar{left:initial !important;top:initial !important;position:initial !important}.button-next-month svg,.button-previous-month svg{width:12px;height:16px}.calendar .container__days .day-item.is-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed;text-decoration:line-through}.calendar .container__days>div:not(.day-item){-webkit-tap-highlight-color:transparent}.calendar .month-item-header>div.dropdown-section{display:flex;gap:12px}.calendar .month-item-header>div.dropdown-section .dropdown-current-value{position:relative;display:flex;gap:4px;align-items:center;cursor:pointer}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -2811,6 +2851,7 @@ const VegaDatePickerCalendar = class {
     this.globalSlimmers = {};
     this.renderer = new VegaDatePickerCalendarRenderer();
     this.monthItemRenderer = new VegaDatePickerMonthItemRenderer();
+    this.headerRenderer = new VegaDatePickerCalendarHeaderRenderer();
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.todayController = new VegaDatePickerCalendarTodayController();
     this.selectionController = new VegaDatePickerCalendarSelectionController();
@@ -2819,9 +2860,9 @@ const VegaDatePickerCalendar = class {
     this.yearMonthSwitcherRender = new VegaDatePickerCalendarYearMonthSwitcherRenderer();
     this.allowRepickController = new VegaDatePickerCalendarAllowRepickController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    this.clearEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePickerCalendar, domNodeSubjectObserverFactory.VegaClear);
-    this.monthYearChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePickerCalendar, domNodeSubjectObserverFactory.VegaMonthYearChange);
-    this.vegaSelectionChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePickerCalendar, domNodeSubjectObserverFactory.VegaSelectionChange);
+    this.clearEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePickerCalendar, vegaEventId.VegaClear);
+    this.monthYearChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePickerCalendar, vegaEventId.VegaMonthYearChange);
+    this.vegaSelectionChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDatePickerCalendar, vegaEventId.VegaSelectionChange);
     this.isMobileDevice = ui.getDeviceType() === ui.DeviceType.MOBILE;
     /**
      * Renders the calendar picker in different sizes. Defaults to regular size
@@ -2948,6 +2989,9 @@ __decorate([
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "monthItemRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "headerRenderer", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "translationSlimmer", void 0);