@heartlandone/vega 2.78.0 → 2.80.0

package/dist/cjs/type-guard-d760850a.js

@@ -0,0 +1,2033 @@
+'use strict';
+
+const breakpoints = require('./breakpoints-ebde4837.js');
+const ui = require('./ui-32120990.js');
+const typography = require('./typography-4560e7f1.js');
+const internalTranslationController = require('./internal-translation-controller-9f58a4e4.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+
+const GridRowsRegex = new RegExp(/^([1-9]|1[0-2])(-auto)?$/);
+const GridColumnsRegex = new RegExp(/^([1-9]|1[0-2])(-auto)?$/);
+const VisaRegex = /^4/;
+const MasterCardRegex = /^(5[1-5]|677189)|^(222[1-9]|2[3-6]\d{2}|27[0-1]\d|2720)/;
+const AmexRegex = /^3[47]/;
+const DiscoverRegex = /^(6011|65|64[4-9]|622)/;
+const DateFormatParserRegex = /(\\)?(Y{2,4}|M{1,4}|D{1,2}|d{1,4})/g;
+
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+const Colors = ["bg-brand", "bg-page", "bg-primary", "bg-secondary", "bg-tertiary", "bg-quaternary", "bg-inverted-primary", "bg-inverted-secondary", "bg-inverted-tertiary", "bg-inverted-quaternary", "bg-action", "bg-action-hover", "bg-action-focus", "bg-action-active", "bg-action-quaternary", "bg-action-quaternary-hover", "bg-action-quaternary-active", "bg-action-secondary", "bg-action-secondary-hover", "bg-action-secondary-active", "bg-action-tertiary", "bg-action-tertiary-hover", "bg-action-tertiary-active", "bg-app-header", "bg-backdrop-modal", "bg-backdrop-popover", "bg-backdrop-sidebar", "bg-chip", "bg-chip-hover", "bg-chip-active", "bg-danger", "bg-danger-hover", "bg-danger-focus", "bg-danger-active", "bg-danger-tertiary", "bg-danger-tertiary-hover", "bg-danger-tertiary-active", "bg-disabled", "bg-divider", "bg-divider-secondary", "bg-keypad-btn-active", "bg-loading-progress", "bg-loading-track", "bg-segment-hover", "bg-segment-control", "bg-selected", "bg-sidebar", "bg-sidebar-icon", "bg-sidebar-icon-hover", "bg-sidebar-icon-selected", "bg-sidebar-item-hover", "bg-sidebar-item-selected", "bg-site-footer", "bg-site-footer-action", "bg-site-footer-action-hover", "bg-site-footer-action-active", "bg-site-footer-field", "bg-slider-handle", "bg-status-error", "bg-status-info", "bg-status-success", "bg-status-warning", "bg-tab", "bg-tab-hover", "bg-tab-selected", "bg-table-alt-row", "bg-table-header", "bg-table-row-hover", "bg-table-row-selected-expanded", "bg-table-selected-row", "bg-textarea-count", "bg-tile", "bg-tile-hover", "bg-tile-selected", "bg-tile-selected-hover", "bg-toggle-switch", "bg-toggle-switch-hover", "bg-toggle-switch-selected-disabled", "bg-transparent", "bg-accent1-primary", "bg-accent1-secondary", "bg-accent1-tertiary", "bg-accent2-primary", "bg-accent2-secondary", "bg-accent2-tertiary", "bg-accent3-primary", "bg-accent3-secondary", "bg-accent3-tertiary", "bg-accent4-primary", "bg-accent4-secondary", "bg-accent4-tertiary", "bg-accent5-primary", "bg-accent5-secondary", "bg-accent5-tertiary", "bg-accent6-primary", "bg-accent6-secondary", "bg-accent6-tertiary", "bg-accent7-primary", "bg-accent7-secondary", "bg-accent7-tertiary", "bg-accent8-primary", "bg-accent8-secondary", "bg-accent8-tertiary", "bg-accent9-primary", "bg-accent9-secondary", "bg-accent9-tertiary", "bg-accent10-primary", "bg-accent10-secondary", "bg-accent10-tertiary", "bg-date-picker-range", "text-primary", "text-secondary", "text-inverted-primary", "text-inverted-secondary", "text-black", "text-white", "text-brand", "text-danger-link", "text-danger-link-hover", "text-danger-link-active", "text-danger-link-focus", "text-danger-link-visited", "text-disabled", "text-error", "text-input-disabled", "text-input-placeholder", "text-link", "text-link-hover", "text-link-active", "text-link-focus", "text-link-visited", "text-on-action", "text-on-danger", "text-on-disabled", "text-sidebar-link", "text-sidebar-link-hover", "text-sidebar-link-selected", "text-site-footer-link", "text-site-footer-link-hover", "text-site-footer-link-active", "text-success", "text-inverted-success", "text-accent1-primary", "text-accent2-primary", "text-accent3-primary", "text-accent4-primary", "text-accent5-primary", "text-accent6-primary", "text-accent7-primary", "text-accent8-primary", "text-accent9-primary", "text-accent10-primary", "border-color-action", "border-color-action-hover", "border-color-action-active", "border-color-chip", "border-color-danger", "border-color-danger-hover", "border-color-danger-active", "border-color-divider", "border-color-divider-secondary", "border-color-input-field", "border-color-input-field-hover", "border-color-input-field-focus", "border-color-input-field-danger", "border-color-input-field-danger-hover", "border-color-input-field-danger-focus", "border-color-input-field-disabled", "border-color-secondary-btn-disabled", "border-color-sidebar-item-focus", "border-color-slider-handle", "border-color-success", "border-color-table-divider", "border-color-tile", "border-color-tile-hover", "border-color-tile-focus", "border-color-tile-selected-focus", "border-color-tile-selected", "border-color-tile-selected-hover", "border-color-notification-btn", "border-color-notification-btn-dark"];
+// prettier-ignore
+const BackgroundColors = ["bg-brand", "bg-page", "bg-primary", "bg-secondary", "bg-tertiary", "bg-quaternary", "bg-inverted-primary", "bg-inverted-secondary", "bg-inverted-tertiary", "bg-inverted-quaternary", "bg-action", "bg-action-hover", "bg-action-focus", "bg-action-active", "bg-action-quaternary", "bg-action-quaternary-hover", "bg-action-quaternary-active", "bg-action-secondary", "bg-action-secondary-hover", "bg-action-secondary-active", "bg-action-tertiary", "bg-action-tertiary-hover", "bg-action-tertiary-active", "bg-app-header", "bg-backdrop-modal", "bg-backdrop-popover", "bg-backdrop-sidebar", "bg-chip", "bg-chip-hover", "bg-chip-active", "bg-danger", "bg-danger-hover", "bg-danger-focus", "bg-danger-active", "bg-danger-tertiary", "bg-danger-tertiary-hover", "bg-danger-tertiary-active", "bg-disabled", "bg-divider", "bg-divider-secondary", "bg-keypad-btn-active", "bg-loading-progress", "bg-loading-track", "bg-segment-hover", "bg-segment-control", "bg-selected", "bg-sidebar", "bg-sidebar-icon", "bg-sidebar-icon-hover", "bg-sidebar-icon-selected", "bg-sidebar-item-hover", "bg-sidebar-item-selected", "bg-site-footer", "bg-site-footer-action", "bg-site-footer-action-hover", "bg-site-footer-action-active", "bg-site-footer-field", "bg-slider-handle", "bg-status-error", "bg-status-info", "bg-status-success", "bg-status-warning", "bg-tab", "bg-tab-hover", "bg-tab-selected", "bg-table-alt-row", "bg-table-header", "bg-table-row-hover", "bg-table-row-selected-expanded", "bg-table-selected-row", "bg-textarea-count", "bg-tile", "bg-tile-hover", "bg-tile-selected", "bg-tile-selected-hover", "bg-toggle-switch", "bg-toggle-switch-hover", "bg-toggle-switch-selected-disabled", "bg-transparent", "bg-accent1-primary", "bg-accent1-secondary", "bg-accent1-tertiary", "bg-accent2-primary", "bg-accent2-secondary", "bg-accent2-tertiary", "bg-accent3-primary", "bg-accent3-secondary", "bg-accent3-tertiary", "bg-accent4-primary", "bg-accent4-secondary", "bg-accent4-tertiary", "bg-accent5-primary", "bg-accent5-secondary", "bg-accent5-tertiary", "bg-accent6-primary", "bg-accent6-secondary", "bg-accent6-tertiary", "bg-accent7-primary", "bg-accent7-secondary", "bg-accent7-tertiary", "bg-accent8-primary", "bg-accent8-secondary", "bg-accent8-tertiary", "bg-accent9-primary", "bg-accent9-secondary", "bg-accent9-tertiary", "bg-accent10-primary", "bg-accent10-secondary", "bg-accent10-tertiary", "bg-date-picker-range"];
+// prettier-ignore
+const FillBackgroundColors = ["fill-bg-brand", "fill-bg-page", "fill-bg-primary", "fill-bg-secondary", "fill-bg-tertiary", "fill-bg-quaternary", "fill-bg-inverted-primary", "fill-bg-inverted-secondary", "fill-bg-inverted-tertiary", "fill-bg-inverted-quaternary", "fill-bg-action", "fill-bg-action-hover", "fill-bg-action-focus", "fill-bg-action-active", "fill-bg-action-quaternary", "fill-bg-action-quaternary-hover", "fill-bg-action-quaternary-active", "fill-bg-action-secondary", "fill-bg-action-secondary-hover", "fill-bg-action-secondary-active", "fill-bg-action-tertiary", "fill-bg-action-tertiary-hover", "fill-bg-action-tertiary-active", "fill-bg-app-header", "fill-bg-backdrop-modal", "fill-bg-backdrop-popover", "fill-bg-backdrop-sidebar", "fill-bg-chip", "fill-bg-chip-hover", "fill-bg-chip-active", "fill-bg-danger", "fill-bg-danger-hover", "fill-bg-danger-focus", "fill-bg-danger-active", "fill-bg-danger-tertiary", "fill-bg-danger-tertiary-hover", "fill-bg-danger-tertiary-active", "fill-bg-disabled", "fill-bg-divider", "fill-bg-divider-secondary", "fill-bg-keypad-btn-active", "fill-bg-loading-progress", "fill-bg-loading-track", "fill-bg-segment-hover", "fill-bg-segment-control", "fill-bg-selected", "fill-bg-sidebar", "fill-bg-sidebar-icon", "fill-bg-sidebar-icon-hover", "fill-bg-sidebar-icon-selected", "fill-bg-sidebar-item-hover", "fill-bg-sidebar-item-selected", "fill-bg-site-footer", "fill-bg-site-footer-action", "fill-bg-site-footer-action-hover", "fill-bg-site-footer-action-active", "fill-bg-site-footer-field", "fill-bg-slider-handle", "fill-bg-status-error", "fill-bg-status-info", "fill-bg-status-success", "fill-bg-status-warning", "fill-bg-tab", "fill-bg-tab-hover", "fill-bg-tab-selected", "fill-bg-table-alt-row", "fill-bg-table-header", "fill-bg-table-row-hover", "fill-bg-table-row-selected-expanded", "fill-bg-table-selected-row", "fill-bg-textarea-count", "fill-bg-tile", "fill-bg-tile-hover", "fill-bg-tile-selected", "fill-bg-tile-selected-hover", "fill-bg-toggle-switch", "fill-bg-toggle-switch-hover", "fill-bg-toggle-switch-selected-disabled", "fill-bg-transparent", "fill-bg-accent1-primary", "fill-bg-accent1-secondary", "fill-bg-accent1-tertiary", "fill-bg-accent2-primary", "fill-bg-accent2-secondary", "fill-bg-accent2-tertiary", "fill-bg-accent3-primary", "fill-bg-accent3-secondary", "fill-bg-accent3-tertiary", "fill-bg-accent4-primary", "fill-bg-accent4-secondary", "fill-bg-accent4-tertiary", "fill-bg-accent5-primary", "fill-bg-accent5-secondary", "fill-bg-accent5-tertiary", "fill-bg-accent6-primary", "fill-bg-accent6-secondary", "fill-bg-accent6-tertiary", "fill-bg-accent7-primary", "fill-bg-accent7-secondary", "fill-bg-accent7-tertiary", "fill-bg-accent8-primary", "fill-bg-accent8-secondary", "fill-bg-accent8-tertiary", "fill-bg-accent9-primary", "fill-bg-accent9-secondary", "fill-bg-accent9-tertiary", "fill-bg-accent10-primary", "fill-bg-accent10-secondary", "fill-bg-accent10-tertiary", "fill-bg-date-picker-range"];
+// prettier-ignore
+const StrokeBackgroundColors = ["stroke-bg-brand", "stroke-bg-page", "stroke-bg-primary", "stroke-bg-secondary", "stroke-bg-tertiary", "stroke-bg-quaternary", "stroke-bg-inverted-primary", "stroke-bg-inverted-secondary", "stroke-bg-inverted-tertiary", "stroke-bg-inverted-quaternary", "stroke-bg-action", "stroke-bg-action-hover", "stroke-bg-action-focus", "stroke-bg-action-active", "stroke-bg-action-quaternary", "stroke-bg-action-quaternary-hover", "stroke-bg-action-quaternary-active", "stroke-bg-action-secondary", "stroke-bg-action-secondary-hover", "stroke-bg-action-secondary-active", "stroke-bg-action-tertiary", "stroke-bg-action-tertiary-hover", "stroke-bg-action-tertiary-active", "stroke-bg-app-header", "stroke-bg-backdrop-modal", "stroke-bg-backdrop-popover", "stroke-bg-backdrop-sidebar", "stroke-bg-chip", "stroke-bg-chip-hover", "stroke-bg-chip-active", "stroke-bg-danger", "stroke-bg-danger-hover", "stroke-bg-danger-focus", "stroke-bg-danger-active", "stroke-bg-danger-tertiary", "stroke-bg-danger-tertiary-hover", "stroke-bg-danger-tertiary-active", "stroke-bg-disabled", "stroke-bg-divider", "stroke-bg-divider-secondary", "stroke-bg-keypad-btn-active", "stroke-bg-loading-progress", "stroke-bg-loading-track", "stroke-bg-segment-hover", "stroke-bg-segment-control", "stroke-bg-selected", "stroke-bg-sidebar", "stroke-bg-sidebar-icon", "stroke-bg-sidebar-icon-hover", "stroke-bg-sidebar-icon-selected", "stroke-bg-sidebar-item-hover", "stroke-bg-sidebar-item-selected", "stroke-bg-site-footer", "stroke-bg-site-footer-action", "stroke-bg-site-footer-action-hover", "stroke-bg-site-footer-action-active", "stroke-bg-site-footer-field", "stroke-bg-slider-handle", "stroke-bg-status-error", "stroke-bg-status-info", "stroke-bg-status-success", "stroke-bg-status-warning", "stroke-bg-tab", "stroke-bg-tab-hover", "stroke-bg-tab-selected", "stroke-bg-table-alt-row", "stroke-bg-table-header", "stroke-bg-table-row-hover", "stroke-bg-table-row-selected-expanded", "stroke-bg-table-selected-row", "stroke-bg-textarea-count", "stroke-bg-tile", "stroke-bg-tile-hover", "stroke-bg-tile-selected", "stroke-bg-tile-selected-hover", "stroke-bg-toggle-switch", "stroke-bg-toggle-switch-hover", "stroke-bg-toggle-switch-selected-disabled", "stroke-bg-transparent", "stroke-bg-accent1-primary", "stroke-bg-accent1-secondary", "stroke-bg-accent1-tertiary", "stroke-bg-accent2-primary", "stroke-bg-accent2-secondary", "stroke-bg-accent2-tertiary", "stroke-bg-accent3-primary", "stroke-bg-accent3-secondary", "stroke-bg-accent3-tertiary", "stroke-bg-accent4-primary", "stroke-bg-accent4-secondary", "stroke-bg-accent4-tertiary", "stroke-bg-accent5-primary", "stroke-bg-accent5-secondary", "stroke-bg-accent5-tertiary", "stroke-bg-accent6-primary", "stroke-bg-accent6-secondary", "stroke-bg-accent6-tertiary", "stroke-bg-accent7-primary", "stroke-bg-accent7-secondary", "stroke-bg-accent7-tertiary", "stroke-bg-accent8-primary", "stroke-bg-accent8-secondary", "stroke-bg-accent8-tertiary", "stroke-bg-accent9-primary", "stroke-bg-accent9-secondary", "stroke-bg-accent9-tertiary", "stroke-bg-accent10-primary", "stroke-bg-accent10-secondary", "stroke-bg-accent10-tertiary", "stroke-bg-date-picker-range"];
+// prettier-ignore
+const TextColors = ["text-primary", "text-secondary", "text-inverted-primary", "text-inverted-secondary", "text-black", "text-white", "text-brand", "text-danger-link", "text-danger-link-hover", "text-danger-link-active", "text-danger-link-focus", "text-danger-link-visited", "text-disabled", "text-error", "text-input-disabled", "text-input-placeholder", "text-link", "text-link-hover", "text-link-active", "text-link-focus", "text-link-visited", "text-on-action", "text-on-danger", "text-on-disabled", "text-sidebar-link", "text-sidebar-link-hover", "text-sidebar-link-selected", "text-site-footer-link", "text-site-footer-link-hover", "text-site-footer-link-active", "text-success", "text-inverted-success", "text-accent1-primary", "text-accent2-primary", "text-accent3-primary", "text-accent4-primary", "text-accent5-primary", "text-accent6-primary", "text-accent7-primary", "text-accent8-primary", "text-accent9-primary", "text-accent10-primary"];
+// prettier-ignore
+const BorderColors = ["border-color-action", "border-color-action-hover", "border-color-action-active", "border-color-chip", "border-color-danger", "border-color-danger-hover", "border-color-danger-active", "border-color-divider", "border-color-divider-secondary", "border-color-input-field", "border-color-input-field-hover", "border-color-input-field-focus", "border-color-input-field-danger", "border-color-input-field-danger-hover", "border-color-input-field-danger-focus", "border-color-input-field-disabled", "border-color-secondary-btn-disabled", "border-color-sidebar-item-focus", "border-color-slider-handle", "border-color-success", "border-color-table-divider", "border-color-tile", "border-color-tile-hover", "border-color-tile-focus", "border-color-tile-selected-focus", "border-color-tile-selected", "border-color-tile-selected-hover", "border-color-notification-btn", "border-color-notification-btn-dark"];
+// prettier-ignore
+const TextColorMap = {
+  'text-primary': 'rgba(var(--v-text-primary, 32, 54, 69, 1))',
+  'text-secondary': 'rgba(var(--v-text-secondary, 107, 116, 125, 1))',
+  'text-inverted-primary': 'rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))',
+  'text-inverted-secondary': 'rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1))',
+  'text-black': 'rgba(var(--v-text-black, 32, 54, 69, 1))',
+  'text-white': 'rgba(var(--v-text-white, 252, 252, 252, 1))',
+  'text-brand': 'rgba(var(--v-text-brand, 51, 57, 61, 1))',
+  'text-danger-link': 'rgba(var(--v-text-danger-link, 230, 50, 87, 1))',
+  'text-danger-link-hover': 'rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))',
+  'text-danger-link-active': 'rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))',
+  'text-danger-link-focus': 'rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))',
+  'text-danger-link-visited': 'rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))',
+  'text-disabled': 'rgba(var(--v-text-disabled, 176, 180, 181, 1))',
+  'text-error': 'rgba(var(--v-text-error, 189, 41, 71, 1))',
+  'text-input-disabled': 'rgba(var(--v-text-input-disabled, 107, 116, 125, 1))',
+  'text-input-placeholder': 'rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))',
+  'text-link': 'rgba(var(--v-text-link, 19, 98, 226, 1))',
+  'text-link-hover': 'rgba(var(--v-text-link-hover, 4, 112, 236, 1))',
+  'text-link-active': 'rgba(var(--v-text-link-active, 29, 65, 195, 1))',
+  'text-link-focus': 'rgba(var(--v-text-link-focus, 4, 112, 236, 1))',
+  'text-link-visited': 'rgba(var(--v-text-link-visited, 95, 56, 206, 1))',
+  'text-on-action': 'rgba(var(--v-text-on-action, 252, 252, 252, 1))',
+  'text-on-danger': 'rgba(var(--v-text-on-danger, 252, 252, 252, 1))',
+  'text-on-disabled': 'rgba(var(--v-text-on-disabled, 252, 252, 252, 1))',
+  'text-sidebar-link': 'rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))',
+  'text-sidebar-link-hover': 'rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))',
+  'text-sidebar-link-selected': 'rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))',
+  'text-site-footer-link': 'rgba(var(--v-text-site-footer-link, 171, 198, 216, 1))',
+  'text-site-footer-link-hover': 'rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1))',
+  'text-site-footer-link-active': 'rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1))',
+  'text-success': 'rgba(var(--v-text-success, 1, 128, 31, 1))',
+  'text-inverted-success': 'rgba(var(--v-text-inverted-success, 89, 217, 119, 1))',
+  'text-accent1-primary': 'rgba(var(--v-text-accent1-primary, 115, 230, 220, 1))',
+  'text-accent2-primary': 'rgba(var(--v-text-accent2-primary, 128, 107, 255, 1))',
+  'text-accent3-primary': 'rgba(var(--v-text-accent3-primary, 255, 220, 131, 1))',
+  'text-accent4-primary': 'rgba(var(--v-text-accent4-primary, 255, 149, 113, 1))',
+  'text-accent5-primary': 'rgba(var(--v-text-accent5-primary, 0, 187, 255, 1))',
+  'text-accent6-primary': 'rgba(var(--v-text-accent6-primary, 240, 52, 91, 1))',
+  'text-accent7-primary': 'rgba(var(--v-text-accent7-primary, 37, 159, 159, 1))',
+  'text-accent8-primary': 'rgba(var(--v-text-accent8-primary, 86, 61, 130, 1))',
+  'text-accent9-primary': 'rgba(var(--v-text-accent9-primary, 255, 191, 63, 1))',
+  'text-accent10-primary': 'rgba(var(--v-text-accent10-primary, 237, 122, 35, 1))'
+};
+// prettier-ignore
+const BackgroundColorMap = {
+  'bg-brand': 'rgba(var(--v-bg-brand, 51, 57, 61, 1))',
+  'bg-page': 'rgba(var(--v-bg-page, 240, 243, 247, 1))',
+  'bg-primary': 'rgba(var(--v-bg-primary, 252, 252, 252, 1))',
+  'bg-secondary': 'rgba(var(--v-bg-secondary, 245, 247, 247, 1))',
+  'bg-tertiary': 'rgba(var(--v-bg-tertiary, 240, 243, 247, 1))',
+  'bg-quaternary': 'rgba(var(--v-bg-quaternary, 241, 248, 251, 1))',
+  'bg-inverted-primary': 'rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))',
+  'bg-inverted-secondary': 'rgba(var(--v-bg-inverted-secondary, 18, 18, 39, 1))',
+  'bg-inverted-tertiary': 'rgba(var(--v-bg-inverted-tertiary, 24, 24, 48, 1))',
+  'bg-inverted-quaternary': 'rgba(var(--v-bg-inverted-quaternary, 70, 71, 101, 1))',
+  'bg-action': 'rgba(var(--v-bg-action, 19, 98, 226, 1))',
+  'bg-action-hover': 'rgba(var(--v-bg-action-hover, 4, 112, 236, 1))',
+  'bg-action-focus': 'rgba(var(--v-bg-action-focus, 19, 98, 226, 1))',
+  'bg-action-active': 'rgba(var(--v-bg-action-active, 29, 65, 195, 1))',
+  'bg-action-quaternary': 'rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))',
+  'bg-action-quaternary-hover': 'rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))',
+  'bg-action-quaternary-active': 'rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))',
+  'bg-action-secondary': 'rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))',
+  'bg-action-secondary-hover': 'rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))',
+  'bg-action-secondary-active': 'rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))',
+  'bg-action-tertiary': 'rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0))',
+  'bg-action-tertiary-hover': 'rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))',
+  'bg-action-tertiary-active': 'rgba(var(--v-bg-action-tertiary-active, 4, 4, 28, 0.1))',
+  'bg-app-header': 'rgba(var(--v-bg-app-header, 240, 243, 247, 0.88))',
+  'bg-backdrop-modal': 'rgba(var(--v-bg-backdrop-modal, 18, 18, 39, 0.85))',
+  'bg-backdrop-popover': 'rgba(var(--v-bg-backdrop-popover, 32, 54, 69, 0.16))',
+  'bg-backdrop-sidebar': 'rgba(var(--v-bg-backdrop-sidebar, 18, 18, 39, 0.85))',
+  'bg-chip': 'rgba(var(--v-bg-chip, 32, 54, 69, 0.06))',
+  'bg-chip-hover': 'rgba(var(--v-bg-chip-hover, 32, 54, 69, 0.12))',
+  'bg-chip-active': 'rgba(var(--v-bg-chip-active, 32, 54, 69, 0.2))',
+  'bg-danger': 'rgba(var(--v-bg-danger, 189, 41, 71, 1))',
+  'bg-danger-hover': 'rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))',
+  'bg-danger-focus': 'rgba(var(--v-bg-danger-focus, 189, 41, 71, 1))',
+  'bg-danger-active': 'rgba(var(--v-bg-danger-active, 230, 50, 87, 1))',
+  'bg-danger-tertiary': 'rgba(var(--v-bg-danger-tertiary, 0, 0, 0, 0))',
+  'bg-danger-tertiary-hover': 'rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2))',
+  'bg-danger-tertiary-active': 'rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))',
+  'bg-disabled': 'rgba(var(--v-bg-disabled, 176, 180, 181, 1))',
+  'bg-divider': 'rgba(var(--v-bg-divider, 171, 198, 216, 1))',
+  'bg-divider-secondary': 'rgba(var(--v-bg-divider-secondary, 199, 217, 229, 1))',
+  'bg-keypad-btn-active': 'rgba(var(--v-bg-keypad-btn-active, 229, 239, 255, 1))',
+  'bg-loading-progress': 'rgba(var(--v-bg-loading-progress, 153, 192, 255, 1))',
+  'bg-loading-track': 'rgba(var(--v-bg-loading-track, 229, 239, 255, 1))',
+  'bg-segment-hover': 'rgba(var(--v-bg-segment-hover, 205, 209, 211, 1))',
+  'bg-segment-control': 'rgba(var(--v-bg-segment-control, 89, 96, 99, 0.1))',
+  'bg-selected': 'rgba(var(--v-bg-selected, 0, 151, 255, 0.3))',
+  'bg-sidebar': 'rgba(var(--v-bg-sidebar, 18, 18, 39, 1))',
+  'bg-sidebar-icon': 'rgba(var(--v-bg-sidebar-icon, 188, 186, 213, 1))',
+  'bg-sidebar-icon-hover': 'rgba(var(--v-bg-sidebar-icon-hover, 18, 18, 39, 1))',
+  'bg-sidebar-icon-selected': 'rgba(var(--v-bg-sidebar-icon-selected, 252, 252, 252, 1))',
+  'bg-sidebar-item-hover': 'rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1))',
+  'bg-sidebar-item-selected': 'rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4))',
+  'bg-site-footer': 'rgba(var(--v-bg-site-footer, 51, 57, 61, 1))',
+  'bg-site-footer-action': 'rgba(var(--v-bg-site-footer-action, 171, 198, 216, 1))',
+  'bg-site-footer-action-hover': 'rgba(var(--v-bg-site-footer-action-hover, 199, 217, 229, 1))',
+  'bg-site-footer-action-active': 'rgba(var(--v-bg-site-footer-action-active, 143, 179, 203, 1))',
+  'bg-site-footer-field': 'rgba(var(--v-bg-site-footer-field, 89, 96, 99, 1))',
+  'bg-slider-handle': 'rgba(var(--v-bg-slider-handle, 252, 252, 252, 1))',
+  'bg-status-error': 'rgba(var(--v-bg-status-error, 255, 110, 139, 1))',
+  'bg-status-info': 'rgba(var(--v-bg-status-info, 205, 209, 211, 1))',
+  'bg-status-success': 'rgba(var(--v-bg-status-success, 160, 233, 167, 1))',
+  'bg-status-warning': 'rgba(var(--v-bg-status-warning, 255, 220, 131, 1))',
+  'bg-tab': 'rgba(var(--v-bg-tab, 240, 243, 247, 1))',
+  'bg-tab-hover': 'rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))',
+  'bg-tab-selected': 'rgba(var(--v-bg-tab-selected, 32, 54, 69, 1))',
+  'bg-table-alt-row': 'rgba(var(--v-bg-table-alt-row, 245, 247, 247, 1))',
+  'bg-table-header': 'rgba(var(--v-bg-table-header, 240, 243, 247, 1))',
+  'bg-table-row-hover': 'rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))',
+  'bg-table-row-selected-expanded': 'rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))',
+  'bg-table-selected-row': 'rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))',
+  'bg-textarea-count': 'rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))',
+  'bg-tile': 'rgba(var(--v-bg-tile, 252, 252, 252, 1))',
+  'bg-tile-hover': 'rgba(var(--v-bg-tile-hover, 245, 247, 247, 1))',
+  'bg-tile-selected': 'rgba(var(--v-bg-tile-selected, 242, 247, 255, 1))',
+  'bg-tile-selected-hover': 'rgba(var(--v-bg-tile-selected-hover, 229, 239, 255, 1))',
+  'bg-toggle-switch': 'rgba(var(--v-bg-toggle-switch, 107, 116, 125, 0.7))',
+  'bg-toggle-switch-hover': 'rgba(var(--v-bg-toggle-switch-hover, 107, 116, 125, 1))',
+  'bg-toggle-switch-selected-disabled': 'rgba(var(--v-bg-toggle-switch-selected-disabled, 153, 192, 255, 1))',
+  'bg-transparent': 'rgba(var(--v-bg-transparent, 0, 0, 0, 0))',
+  'bg-accent1-primary': 'rgba(var(--v-bg-accent1-primary, 115, 230, 220, 1))',
+  'bg-accent1-secondary': 'rgba(var(--v-bg-accent1-secondary, 193, 244, 239, 1))',
+  'bg-accent1-tertiary': 'rgba(var(--v-bg-accent1-tertiary, 224, 249, 247, 1))',
+  'bg-accent2-primary': 'rgba(var(--v-bg-accent2-primary, 128, 107, 255, 1))',
+  'bg-accent2-secondary': 'rgba(var(--v-bg-accent2-secondary, 199, 189, 255, 1))',
+  'bg-accent2-tertiary': 'rgba(var(--v-bg-accent2-tertiary, 227, 222, 255, 1))',
+  'bg-accent3-primary': 'rgba(var(--v-bg-accent3-primary, 255, 220, 131, 1))',
+  'bg-accent3-secondary': 'rgba(var(--v-bg-accent3-secondary, 255, 239, 200, 1))',
+  'bg-accent3-tertiary': 'rgba(var(--v-bg-accent3-tertiary, 255, 247, 227, 1))',
+  'bg-accent4-primary': 'rgba(var(--v-bg-accent4-primary, 255, 149, 113, 1))',
+  'bg-accent4-secondary': 'rgba(var(--v-bg-accent4-secondary, 255, 208, 192, 1))',
+  'bg-accent4-tertiary': 'rgba(var(--v-bg-accent4-tertiary, 255, 231, 223, 1))',
+  'bg-accent5-primary': 'rgba(var(--v-bg-accent5-primary, 0, 187, 255, 1))',
+  'bg-accent5-secondary': 'rgba(var(--v-bg-accent5-secondary, 142, 223, 249, 1))',
+  'bg-accent5-tertiary': 'rgba(var(--v-bg-accent5-tertiary, 227, 247, 253, 1))',
+  'bg-accent6-primary': 'rgba(var(--v-bg-accent6-primary, 255, 130, 201, 1))',
+  'bg-accent6-secondary': 'rgba(var(--v-bg-accent6-secondary, 255, 199, 231, 1))',
+  'bg-accent6-tertiary': 'rgba(var(--v-bg-accent6-tertiary, 255, 227, 243, 1))',
+  'bg-accent7-primary': 'rgba(var(--v-bg-accent7-primary, 37, 159, 159, 1))',
+  'bg-accent7-secondary': 'rgba(var(--v-bg-accent7-secondary, 155, 212, 214, 1))',
+  'bg-accent7-tertiary': 'rgba(var(--v-bg-accent7-tertiary, 208, 239, 239, 1))',
+  'bg-accent8-primary': 'rgba(var(--v-bg-accent8-primary, 86, 61, 130, 1))',
+  'bg-accent8-secondary': 'rgba(var(--v-bg-accent8-secondary, 199, 162, 204, 1))',
+  'bg-accent8-tertiary': 'rgba(var(--v-bg-accent8-tertiary, 230, 214, 234, 1))',
+  'bg-accent9-primary': 'rgba(var(--v-bg-accent9-primary, 255, 191, 63, 1))',
+  'bg-accent9-secondary': 'rgba(var(--v-bg-accent9-secondary, 254, 215, 142, 1))',
+  'bg-accent9-tertiary': 'rgba(var(--v-bg-accent9-tertiary, 251, 226, 185, 1))',
+  'bg-accent10-primary': 'rgba(var(--v-bg-accent10-primary, 237, 122, 35, 1))',
+  'bg-accent10-secondary': 'rgba(var(--v-bg-accent10-secondary, 241, 146, 85, 1))',
+  'bg-accent10-tertiary': 'rgba(var(--v-bg-accent10-tertiary, 245, 187, 148, 1))',
+  'bg-date-picker-range': 'rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))'
+};
+// prettier-ignore
+const BorderColorMap = {
+  'border-color-action': 'rgba(var(--v-border-color-action, 19, 98, 226, 1))',
+  'border-color-action-hover': 'rgba(var(--v-border-color-action-hover, 4, 112, 236, 1))',
+  'border-color-action-active': 'rgba(var(--v-border-color-action-active, 29, 65, 195, 1))',
+  'border-color-chip': 'rgba(var(--v-border-color-chip, 205, 209, 211, 1))',
+  'border-color-danger': 'rgba(var(--v-border-color-danger, 230, 50, 87, 1))',
+  'border-color-danger-hover': 'rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))',
+  'border-color-danger-active': 'rgba(var(--v-border-color-danger-active, 189, 41, 71, 1))',
+  'border-color-divider': 'rgba(var(--v-border-color-divider, 171, 198, 216, 1))',
+  'border-color-divider-secondary': 'rgba(var(--v-border-color-divider-secondary, 199, 217, 229, 1))',
+  'border-color-input-field': 'rgba(var(--v-border-color-input-field, 171, 198, 216, 1))',
+  'border-color-input-field-hover': 'rgba(var(--v-border-color-input-field-hover, 115, 160, 190, 1))',
+  'border-color-input-field-focus': 'rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))',
+  'border-color-input-field-danger': 'rgba(var(--v-border-color-input-field-danger, 230, 50, 87, 1))',
+  'border-color-input-field-danger-hover': 'rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1))',
+  'border-color-input-field-danger-focus': 'rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))',
+  'border-color-input-field-disabled': 'rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1))',
+  'border-color-secondary-btn-disabled': 'rgba(var(--v-border-color-secondary-btn-disabled, 176, 180, 181, 1))',
+  'border-color-sidebar-item-focus': 'rgba(var(--v-border-color-sidebar-item-focus, 19, 98, 226, 1))',
+  'border-color-slider-handle': 'rgba(var(--v-border-color-slider-handle, 199, 217, 229, 1))',
+  'border-color-success': 'rgba(var(--v-border-color-success, 1, 128, 31, 1))',
+  'border-color-table-divider': 'rgba(var(--v-border-color-table-divider, 171, 198, 216, 1))',
+  'border-color-tile': 'rgba(var(--v-border-color-tile, 171, 198, 216, 1))',
+  'border-color-tile-hover': 'rgba(var(--v-border-color-tile-hover, 115, 160, 190, 1))',
+  'border-color-tile-focus': 'rgba(var(--v-border-color-tile-focus, 19, 98, 226, 1))',
+  'border-color-tile-selected-focus': 'rgba(var(--v-border-color-tile-selected-focus, 19, 98, 226, 1))',
+  'border-color-tile-selected': 'rgba(var(--v-border-color-tile-selected, 19, 98, 226, 1))',
+  'border-color-tile-selected-hover': 'rgba(var(--v-border-color-tile-selected-hover, 4, 112, 236, 1))',
+  'border-color-notification-btn': 'rgba(var(--v-border-color-notification-btn, 32, 54, 69, 1))',
+  'border-color-notification-btn-dark': 'rgba(var(--v-border-color-notification-btn-dark, 32, 54, 69, 1))'
+};
+
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+const Spacing = {
+  "0": 0,
+  "size-4": 4,
+  "size-8": 8,
+  "size-12": 12,
+  "size-16": 16,
+  "size-20": 20,
+  "size-24": 24,
+  "size-32": 32,
+  "size-40": 40,
+  "size-48": 48,
+  "size-64": 64,
+  "size-72": 72,
+  "size-80": 80,
+  "size-112": 112,
+  "size-2": 2
+};
+
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+const Shadows = ["shadow-card", "shadow-modal", "shadow-popover", "shadow-form-field", "shadow-dropdown-menu", "shadow-app-header", "shadow-modal-header", "shadow-modal-footer", "shadow-modal-footer-no-scroll"];
+// prettier-ignore
+const ShadowMap = {
+  'shadow-card': 'var(--v-shadow-card, 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.02))',
+  'shadow-modal': 'var(--v-shadow-modal, 0px 6px 40px 0px rgba(2, 2, 15, 0.04), 0px 4px 24px 0px rgba(2, 2, 15, 0.08), 0px 8px 80px 0px rgba(2, 2, 15, 0.16))',
+  'shadow-popover': 'var(--v-shadow-popover, 0px 0px 88px 0px rgba(2, 2, 15, 0.01), 0px 0px 32px 0px rgba(2, 2, 15, 0.02), 0px 4px 72px 0px rgba(2, 2, 15, 0.06))',
+  'shadow-form-field': 'var(--v-shadow-form-field, 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.1))',
+  'shadow-dropdown-menu': 'var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1))',
+  'shadow-app-header': 'var(--v-shadow-app-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-header': 'var(--v-shadow-modal-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-footer': 'var(--v-shadow-modal-footer, 0px -2px 8px 0px rgba(45, 76, 97, 0.2), 0px -1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-footer-no-scroll': 'var(--v-shadow-modal-footer-no-scroll, 0px -1px 0px 0px rgba(45, 76, 97, 0.15))'
+};
+
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+const BorderRadius = {
+  "rounded-none": 0,
+  "rounded-full": 9999,
+  "rounded-2": 2,
+  "rounded-4": 4,
+  "rounded-8": 8,
+  "rounded-12": 12,
+  "rounded-16": 16,
+  "rounded-24": 24,
+  "rounded-32": 32,
+  "rounded-48": 48
+};
+
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+const Borders = ["border-secondary-btn", "border-secondary-btn-hover", "border-secondary-danger-btn", "border-secondary-btn-active", "border-secondary-danger-btn-hover", "border-secondary-danger-btn-active", "border-input-field", "border-input-field-hover", "border-input-field-focus", "border-input-field-danger", "border-input-field-danger-hover", "border-input-field-danger-focus", "border-sidebar-item-focus", "border-input-field-disabled", "border-success", "border-secondary-btn-disabled", "border-chip", "border-divider", "border-divider-secondary", "border-tile-selected", "border-tile-selected-hover", "border-table-divider", "border-slider-handle", "border-tile", "border-tile-hover", "border-tile-focus", "border-tile-selected-focus", "border-notification-btn", "border-notification-btn-black"];
+// prettier-ignore
+const BorderMap = {
+  'border-secondary-btn': '2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))',
+  'border-secondary-btn-hover': '2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1))',
+  'border-secondary-danger-btn': '2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1))',
+  'border-secondary-btn-active': '2px solid rgba(var(--v-border-secondary-btn-active, 29, 65, 195, 1))',
+  'border-secondary-danger-btn-hover': '2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1))',
+  'border-secondary-danger-btn-active': '2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1))',
+  'border-input-field': '1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))',
+  'border-input-field-hover': '1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))',
+  'border-input-field-focus': '1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1))',
+  'border-input-field-danger': '1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))',
+  'border-input-field-danger-hover': '1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))',
+  'border-input-field-danger-focus': '1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1))',
+  'border-sidebar-item-focus': '2px solid rgba(var(--v-border-sidebar-item-focus, 19, 98, 226, 1))',
+  'border-input-field-disabled': '1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))',
+  'border-success': '2px solid rgba(var(--v-border-success, 1, 128, 31, 1))',
+  'border-secondary-btn-disabled': '2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1))',
+  'border-chip': '1px solid rgba(var(--v-border-chip, 205, 209, 211, 1))',
+  'border-divider': '1px solid rgba(var(--v-border-divider, 171, 198, 216, 1))',
+  'border-divider-secondary': '1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1))',
+  'border-tile-selected': '2px solid rgba(var(--v-border-tile-selected, 19, 98, 226, 1))',
+  'border-tile-selected-hover': '2px solid rgba(var(--v-border-tile-selected-hover, 4, 112, 236, 1))',
+  'border-table-divider': '1px solid rgba(var(--v-border-table-divider, 171, 198, 216, 1))',
+  'border-slider-handle': '1px solid rgba(var(--v-border-slider-handle, 199, 217, 229, 1))',
+  'border-tile': '1px solid rgba(var(--v-border-tile, 171, 198, 216, 1))',
+  'border-tile-hover': '1px solid rgba(var(--v-border-tile-hover, 115, 160, 190, 1))',
+  'border-tile-focus': '1px solid rgba(var(--v-border-tile-focus, 19, 98, 226, 1))',
+  'border-tile-selected-focus': '2px solid rgba(var(--v-border-tile-selected-focus, 19, 98, 226, 1))',
+  'border-notification-btn': '2px solid rgba(var(--v-border-notification-btn, 32, 54, 69, 1))',
+  'border-notification-btn-black': '2px solid rgba(var(--v-border-notification-btn-black, 32, 54, 69, 1))'
+};
+
+/**
+ * Get a week days array
+ *
+ * @param {number} firstWeekDay - The first week day (0: Sunday, 1: Monday, ...)
+ * @returns {number[]} - The week days array
+ */
+const getWeekdays = (firstWeekDay = 0) => {
+  const weekdays = [0, 1, 2, 3, 4, 5, 6];
+  return weekdays.concat(weekdays).slice(firstWeekDay, firstWeekDay + 7);
+};
+exports.WeekdayLongNames = void 0;
+(function (WeekdayLongNames) {
+  WeekdayLongNames["sun"] = "Sunday";
+  WeekdayLongNames["mon"] = "Monday";
+  WeekdayLongNames["tue"] = "Tuesday";
+  WeekdayLongNames["wed"] = "Wednesday";
+  WeekdayLongNames["thu"] = "Thursday";
+  WeekdayLongNames["fri"] = "Friday";
+  WeekdayLongNames["sat"] = "Saturday";
+})(exports.WeekdayLongNames || (exports.WeekdayLongNames = {}));
+/**
+ * Get the system timezone identifier
+ *
+ * @returns {string} - The system timezone identifier (e.g., "America/New_York")
+ */
+const getSystemTimezone = () => {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+};
+/**
+ * Build an aria announcement string for date picker selection.
+ * TODO: consider to implement i18n for aria announcement .
+ *
+ * @param {object} options - The options for building the announcement.
+ * @param {'single' | 'range'} options.mode - The date picker selection mode.
+ * @param {Nullable<CalendarDate>} options.startDate - The start date.
+ * @param {Nullable<CalendarDate>} [options.endDate] - The end date (used in range mode).
+ * @returns {string} - The aria announcement string.
+ */
+const buildDatePickerAnnouncement = (options) => {
+  const mode = options.mode;
+  const startDate = options.startDate;
+  const endDate = options.endDate;
+  if (!startDate && !endDate) {
+    return '';
+  }
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  const formatDate = (d) => `${d.getMonthName()} ${d.date} ${d.year}`;
+  if (mode === 'single' && startDate) {
+    return `${internalTranslationController.VegaInternalTranslation.t('Selected result')}: ${formatDate(startDate)}`;
+  }
+  if (mode === 'range') {
+    const startDateLabel = internalTranslationController.VegaInternalTranslation.t('Start Date');
+    const endDateLabel = internalTranslationController.VegaInternalTranslation.t('End Date');
+    if (startDate && endDate) {
+      return `${internalTranslationController.VegaInternalTranslation.t('Selected result')} ${startDateLabel}: ${formatDate(startDate)}. ${endDateLabel}: ${formatDate(endDate)}.`;
+    }
+    if (startDate) {
+      return `${internalTranslationController.VegaInternalTranslation.t('Selected result')} ${startDateLabel}: ${formatDate(startDate)}.`;
+    }
+  }
+  return '';
+};
+
+/**
+ * CalendarTime represents hours/minutes in 24-hour format and centralizes parsing/formatting logic.
+ */
+class CalendarTime {
+  constructor(hours, minutes) {
+    this._hours = hours;
+    this._minutes = minutes;
+  }
+  /**
+   * Parse a raw time string into a CalendarTime instance.
+   *
+   * @param {string} rawTime - Source time value such as "9:00" or "9am".
+   * @returns {CalendarTime} Parsed time.
+   */
+  static fromString(rawTime) {
+    const normalized = this.convertTimeTo24Hour(rawTime);
+    const [hourPart, minutePart] = normalized.split(':');
+    return new CalendarTime(Number(hourPart), Number(minutePart));
+  }
+  /**
+   * Build a CalendarTime from a Date instance while preserving hours/minutes.
+   *
+   * @param {Date} date - The source date.
+   * @returns {CalendarTime} Time representation extracted from the date.
+   */
+  static fromDate(date) {
+    return new CalendarTime(date.getHours(), date.getMinutes());
+  }
+  /**
+   * Calculate the duration in the requested precision between two CalendarTime values, accounting for overnight spans.
+   *
+   * @param {CalendarTime} start - Start time of the interval.
+   * @param {CalendarTime} end - End time of the interval.
+   * @param {'minutes' | 'hours'} precision - Desired unit of measure for the result (defaults to minutes).
+   * @returns {number} Duration expressed in the requested precision.
+   */
+  static calculateDuration(start, end, precision = 'minutes') {
+    const startMinutes = start.totalMinutes;
+    let endMinutes = end.totalMinutes;
+    if (end.hours === 0 && start.hours !== 0) {
+      endMinutes += 24 * 60;
+    }
+    const durationMinutes = endMinutes - startMinutes;
+    return precision === 'hours' ? durationMinutes / 60 : durationMinutes;
+  }
+  /**
+   * Normalize various time inputs (e.g. 9am, 9:30 PM) to a 24-hour HH:mm string.
+   *
+   * @param {string} timeString - User supplied time value.
+   * @returns {string} 24-hour formatted string.
+   */
+  static convertTimeTo24Hour(timeString) {
+    const normalized = timeString.toLocaleLowerCase();
+    if (normalized.includes('am') || normalized.includes('pm')) {
+      const isAm = normalized.includes('am');
+      const cleaned = normalized.replace('am', '').replace('pm', '').trim();
+      const [rawHour, rawMinutes] = cleaned.split(':');
+      const minutes = rawMinutes.padStart(2, '0');
+      if (isAm) {
+        return `${rawHour === '12' ? '00' : rawHour}:${minutes}`;
+      }
+      else {
+        const convertedHour = rawHour === '12' ? '12' : `${Number(rawHour) + 12}`;
+        return `${convertedHour}:${minutes}`;
+      }
+    }
+    return timeString;
+  }
+  /**
+   * Hour component in 24-hour clock.
+   *
+   * @returns {number} Hours between 0-23.
+   */
+  get hours() {
+    return this._hours;
+  }
+  /**
+   * Minute component.
+   *
+   * @returns {number} Minutes between 0-59.
+   */
+  get minutes() {
+    return this._minutes;
+  }
+  /**
+   * Total minutes elapsed since midnight for this time value.
+   *
+   * @returns {number} Minutes from 00:00.
+   */
+  get totalMinutes() {
+    return this._hours * 60 + this._minutes;
+  }
+  /**
+   * Format the time into a string using a simple formatter.
+   *
+   * @param {TimeStringFormat} format - time string Format. Defaults to 'hh:mm'.
+   * @returns {string} Formatted time string.
+   */
+  toString(format = 'hh:mm') {
+    const defaultHours = this._hours.toString().padStart(2, '0');
+    const defaultMinutes = this._minutes.toString().padStart(2, '0');
+    const normalizedFormat = format.toLowerCase();
+    switch (normalizedFormat) {
+      case 'hh:m':
+        return `${defaultHours}:${this._minutes}`;
+      case 'h:mm':
+        return `${this._hours}:${defaultMinutes}`;
+      case 'h:m':
+        return `${this._hours}:${this._minutes}`;
+      case '12-hour': {
+        const amPm = this._hours >= 12 ? 'pm' : 'am';
+        const hour12 = this._hours % 12 || 12;
+        return `${hour12}:${defaultMinutes} ${internalTranslationController.VegaInternalTranslation.t(amPm)}`;
+      }
+      default:
+        return `${defaultHours}:${defaultMinutes}`;
+    }
+  }
+}
+
+/**
+ * CalendarDateTime centralizes timezone-aware conversions between native Date instances and calendar helpers.
+ */
+class CalendarDateTime {
+  constructor(date, timezone) {
+    this.originalDate = date;
+    this.timezone = timezone;
+    this.syncDateTime();
+  }
+  /**
+   * Build a CalendarDateTime from a native Date while the specific timezone.
+   *
+   * @param {Date} date - The native Date object to convert.
+   * @param {string} timezone - The timezone to apply.
+   * @returns {CalendarDateTime} A timezone-aware CalendarDateTime instance.
+   */
+  static fromDate(date, timezone) {
+    return new CalendarDateTime(date, timezone);
+  }
+  /**
+   * Build a CalendarDateTime from a date input (Date or string) and optional time metadata.
+   *
+   * @param {string | Date} date - The input date value (string or Date).
+   * @param {CalendarDateTimeOptions} options - Additional options for time, timezone, seconds, etc.
+   * @returns {CalendarDateTime} A timezone-aware CalendarDateTime instance.
+   */
+  static fromInitDataSource(date, options) {
+    const baseDate = new Date(date);
+    if (options.time) {
+      const calendarTime = CalendarTime.fromString(options.time);
+      baseDate.setHours(calendarTime.hours, calendarTime.minutes, 0, 0);
+    }
+    else if (options.endTimeMissing) {
+      baseDate.setHours(23, 59, 59, 0);
+    }
+    return CalendarDateTime.fromDate(baseDate, options.timezone);
+  }
+  /**
+   * Get the CalendarDate instance representing the date portion.
+   *
+   * @returns {CalendarDate} The CalendarDate object.
+   */
+  get calendarDate() {
+    return this.date;
+  }
+  /**
+   * Get the CalendarTime instance representing the time portion.
+   *
+   * @returns {CalendarTime} The CalendarTime object.
+   */
+  get calendarTime() {
+    return this.time;
+  }
+  /**
+   * Get a native Date object representing this CalendarDateTime.
+   *
+   * @returns {Date} The native Date object.
+   */
+  toDate() {
+    return this.date.toDate();
+  }
+  /**
+   * Set a new timezone and update CalendarDate/CalendarTime accordingly.
+   *
+   * @param {string} newTimezone - The new timezone to set.
+   */
+  setTimezone(newTimezone) {
+    this.timezone = newTimezone;
+    this.syncDateTime();
+  }
+  /**
+   * Sync CalendarDate and CalendarTime with the current originalDate and timezone.
+   */
+  syncDateTime() {
+    const normalized = this.convertDateToTimezone(this.originalDate);
+    this.date = new CalendarDate(normalized.getFullYear(), normalized.getMonth() + 1, normalized.getDate());
+    this.time = CalendarTime.fromDate(normalized);
+  }
+  /**
+   * Convert a Date to the specific timezone.
+   *
+   * @param {Date} date - The date to convert.
+   * @returns {Date} The date adjusted to the specific timezone.
+   */
+  convertDateToTimezone(date) {
+    if (this.timezone === getSystemTimezone()) {
+      return date;
+    }
+    try {
+      const formatter = new Intl.DateTimeFormat([], {
+        timeZone: this.timezone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+      });
+      const parts = formatter.formatToParts(date);
+      const yearPart = this.findDateTimeFormatPart(parts, 'year');
+      const monthPart = this.findDateTimeFormatPart(parts, 'month');
+      const dayPart = this.findDateTimeFormatPart(parts, 'day');
+      const hourPart = this.findDateTimeFormatPart(parts, 'hour');
+      const minutePart = this.findDateTimeFormatPart(parts, 'minute');
+      const secondPart = this.findDateTimeFormatPart(parts, 'second');
+      if (yearPart && monthPart && dayPart && hourPart && minutePart && secondPart) {
+        const year = parseInt(yearPart.value, 10);
+        const month = parseInt(monthPart.value, 10);
+        const day = parseInt(dayPart.value, 10);
+        const hour = parseInt(hourPart.value, 10);
+        const minute = parseInt(minutePart.value, 10);
+        const second = parseInt(secondPart.value, 10);
+        return new Date(year, month - 1, day, hour, minute, second);
+      }
+    }
+    catch (_a) {
+      globalSlimmerRegistry.LogUtility.warn('Invalid timezone:', this.timezone);
+    }
+    return date;
+  }
+  /**
+   * Find a specific part in the Intl.DateTimeFormatPart array.
+   *
+   * @param {Intl.DateTimeFormatPart[]} parts - The array of date/time format parts.
+   * @param {DateTimeFormatPartType} type - The type of part to find (e.g., 'year', 'month').
+   * @returns {Intl.DateTimeFormatPart | undefined} The matching part, if found.
+   */
+  findDateTimeFormatPart(parts, type) {
+    return parts.find((part) => part.type === type);
+  }
+}
+
+// TODO: Need rename calendar-date as vega-date to manage all date operation in vega project
+// https://gethired.atlassian.net/browse/VD-5918
+/**
+ * It returns true if the input is a valid date string, and false otherwise.
+ * Note:
+ *  This is not a strict date validation, it just use Date.parse to check the input string can be parsed to a valid date or not.
+ *  For strict date validation, please use CalendarDate.fromString method in calendar-date.ts
+ *  Example:
+ *      For Chrome: Date.parse('Jan/08/2026') => 1767801600000
+ *      For Safari: Date.parse('Jan/08/2026') => NaN
+ *      Format is DD/MM/YYYY: Date.parse('20/11/2024') => NaN
+ *
+ * @param {string} input - The string to check.
+ * @returns {boolean} is a valid date string or not
+ */
+const isDateStr = (input) => !isNaN(Date.parse(input));
+/**
+ * Compare if the firstDate is after the secondDate
+ *
+ * @param {Date} firstDate - The first date to compare.
+ * @param {Date} secondDate - The date to compare to.
+ * @returns {boolean} Return true if the firstDate is after the secondDate, otherwise it returns false.
+ */
+const compareIsAfter = (firstDate, secondDate) => {
+  return firstDate.getTime() > secondDate.getTime();
+};
+/**
+ * Compare if the firstDate is before the secondDate
+ *
+ * @param {Date} firstDate - The first date to compare.
+ * @param {Date} secondDate - The date to compare to.
+ * @returns {boolean} Return true if the firstDate is before the secondDate, otherwise it returns false.
+ */
+const compareIsBefore = (firstDate, secondDate) => {
+  return firstDate.getTime() < secondDate.getTime();
+};
+/**
+ * Compare if the first date is before or the same as the second date.
+ *
+ * @param {Date} firstDate - The first date to compare.
+ * @param {Date} secondDate - The date to compare against.
+ * @returns {boolean} Return true if the firstDate is before or the same as the secondDate, otherwise it returns false.
+ */
+const compareIsSameOrBefore = (firstDate, secondDate) => {
+  return firstDate.getTime() <= secondDate.getTime();
+};
+/**
+ * It returns true if the input string is a valid time string in the format specified by the timeFormat parameter
+ *
+ * @param {string} input - The string to be tested.
+ * @param {TimeFormat} timeFormat - '12-hour' | '24-hour'
+ * @returns {boolean} A boolean value.
+ */
+const isTimeStr = (input, timeFormat) => {
+  return timeFormat === '12-hour'
+    ? new RegExp(/^(1[012]|0[1-9]):[0-5][0-9] ([AP][M])$/).test(input)
+    : new RegExp(/^([0-1][0-9]|2[0-3]):[0-5][0-9]$/).test(input);
+};
+/**
+ * It takes a number and returns a string
+ *
+ * @param {number} number - number - The number to pad
+ * @param {number} [length=2] - The length of the resulting string.
+ * @param {string} [padChar='0'] - The character to pad the number with.
+ * @returns {Nullable<string>} A function that takes a number as an argument and returns a nullable string.
+ */
+const pad = (number, length = 2, padChar = '0') => {
+  if (number || number === 0) {
+    return number.toString().padStart(length, padChar);
+  }
+  else {
+    globalSlimmerRegistry.LogUtility.error(`The input should be a number`);
+  }
+};
+/**
+ * The `convert12HourTo24HourFormat` function takes a time string in 12-hour format and converts it to 24-hour format.
+ *
+ * @param {string} time the time string need to convert, the time string should be 12-hour or 24-hour format
+ * @returns {string} 24 hour format time string
+ */
+const convert12HourTo24HourFormat = (time) => {
+  if (isTimeStr(time, '12-hour')) {
+    const [hour, minute, amPm] = time.replace(' ', ':').split(':');
+    let convertedHour = parseInt(hour, 10);
+    if (amPm === 'PM' && convertedHour !== 12) {
+      convertedHour += 12;
+    }
+    else if (amPm === 'AM' && convertedHour === 12) {
+      convertedHour = 0;
+    }
+    return `${pad(convertedHour)}:${minute}`;
+  }
+  return time;
+};
+
+const WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+// TODO: Need rename calendar-date as vega-date to manage all date operation in vega project
+// https://gethired.atlassian.net/browse/VD-5918
+/**
+ * Calendar date class
+ */
+class CalendarDate {
+  constructor(year, month, date) {
+    this._date = date;
+    this._month = month;
+    this._year = year;
+  }
+  /**
+   * Create a calendar date from a Date object
+   *
+   * @param {Date} currentDate - The Date object to create CalendarDate from
+   * @param {string} timezone - Timezone identifier for timezone-aware date creation. If not provided, uses system timezone.
+   * @returns {CalendarDate} - Return a CalendarDate object
+   */
+  static from(currentDate, timezone = getSystemTimezone()) {
+    return CalendarDateTime.fromDate(currentDate, timezone).calendarDate;
+  }
+  /**
+   * Converts a date string to CalendarDate with optional format and timezone parameters.
+   *
+   * @param {string} dateString - The string date.
+   * @param {string} [format] - The format of string date
+   * @param {string} [lang] - lang
+   * @returns {Nullable<CalendarDate>} - CalendarDate.
+   */
+  static fromString(dateString, format = 'MM/DD/YYYY', lang = 'en-us') {
+    if (!dateString)
+      return null;
+    const formatMatchers = [];
+    let formatMatcher = null;
+    // Analyze the format and find the corresponding positions for year, month, and day.
+    // Data: formatMatchers = [['DD', index: 0, ...], ['MM', index: 3, ...], ['YYYY', index: 7, ...]]
+    while ((formatMatcher = DateFormatParserRegex.exec(format)) != null) {
+      if (formatMatcher[1] === '\\')
+        continue;
+      formatMatchers.push(formatMatcher);
+    }
+    if (formatMatchers.length) {
+      const datePattern = {
+        year: undefined,
+        month: undefined,
+        shortMonth: undefined,
+        longMonth: undefined,
+        day: undefined,
+        value: '',
+      };
+      const firstMatcher = formatMatchers[0];
+      if (firstMatcher && firstMatcher.index > 0) {
+        datePattern.value += '.*?';
+      }
+      // According `matchers` to generate a new regex which can parse the date by corresponding year, month and day
+      // Data: dateRegex = "(\d{2}).*?(\d{2}).*?(\d{4}).*?"
+      //       datePattern = {day: 1, longMonth: null, month: 2, shortMonth: null, year: 3, value: "(\d{2}).*?(\d{2}).*?(\d{4}).*?"}
+      for (const [k, match] of Object.entries(formatMatchers)) {
+        const key = Number(k);
+        if (match) {
+          const { group, pattern } = this.getPatternByFormatToken(match[0], lang);
+          datePattern[group] = key + 1;
+          datePattern.value += pattern;
+          datePattern.value += '.*?';
+        }
+      }
+      const dateRegex = new RegExp(`^${datePattern.value}$`);
+      if (dateRegex.test(dateString)) {
+        // Parse the date
+        // Example: parsedDate = ['08-02-2020', '08', '02', '2020']
+        const parsedDate = dateRegex.exec(dateString);
+        if (parsedDate &&
+          datePattern.year &&
+          (datePattern.month || datePattern.shortMonth || datePattern.longMonth) &&
+          datePattern.day) {
+          const year = Number(parsedDate[datePattern.year]);
+          let month = 1;
+          if (datePattern.month) {
+            month = Number(parsedDate[datePattern.month]) - 1;
+          }
+          else if (datePattern.shortMonth) {
+            month = this.shortMonths(lang).indexOf(parsedDate[datePattern.shortMonth]);
+          }
+          else if (datePattern.longMonth) {
+            month = this.longMonths(lang).indexOf(parsedDate[datePattern.longMonth]);
+          }
+          const day = Number(parsedDate[datePattern.day]);
+          const fullYear = Number(pad(year, 4, `${new Date().getFullYear()}`.slice(0, 2)));
+          if (isNaN(Date.parse(`${fullYear}-${pad(month + 1)}-${pad(day)}`)))
+            return null;
+          return this.from(new Date(fullYear, month, day, 0, 0, 0, 0));
+        }
+      }
+    }
+    return this.from(new Date(dateString));
+  }
+  /**
+   * Get regex pattern by format token.
+   *
+   * @param {string} token - The format token.
+   * @param {string} lang - Language.
+   * @returns {FormatPatternType} - regex pattern.
+   */
+  static getPatternByFormatToken(token, lang) {
+    switch (token) {
+      case 'YY':
+      case 'YYYY':
+        return {
+          group: 'year',
+          pattern: `(\\d{${token.length}})`,
+        };
+      case 'M':
+        return {
+          group: 'month',
+          pattern: '(\\d{1,2})',
+        };
+      case 'MM':
+        return {
+          group: 'month',
+          pattern: '(\\d{2})',
+        };
+      case 'MMM':
+        return {
+          group: 'shortMonth',
+          pattern: `(${this.shortMonths(lang).join('|')})`,
+        };
+      case 'MMMM':
+        return {
+          group: 'longMonth',
+          pattern: `(${this.longMonths(lang).join('|')})`,
+        };
+      case 'D':
+        return {
+          group: 'day',
+          pattern: '(\\d{1,2})',
+        };
+      case 'DD':
+        return {
+          group: 'day',
+          pattern: '(\\d{2})',
+        };
+      /* istanbul ignore next */
+      default: {
+        return {
+          group: 'unknown',
+          pattern: '(.*)',
+        };
+      }
+    }
+  }
+  /**
+   * Shorts months.
+   *
+   * @param {string} lang - Language
+   * @returns {string[]} - Shorts months.
+   */
+  static shortMonths(lang) {
+    return this.MONTHS.map((month) => new Date(2019, month).toLocaleString(lang, { month: 'short' }));
+  }
+  /**
+   * Long months.
+   *
+   * @param {string} lang - Language
+   * @returns {string[]} - Long months.
+   */
+  static longMonths(lang) {
+    return this.MONTHS.map((month) => new Date(2019, month).toLocaleString(lang, { month: 'long' }));
+  }
+  /**
+   * The year of the calendar date
+   *
+   * @type {number}
+   */
+  get year() {
+    return this._year;
+  }
+  set year(value) {
+    this._year = value;
+  }
+  /**
+   * The month of the calendar date
+   *
+   * @type {number}
+   */
+  get month() {
+    return this._month;
+  }
+  set month(value) {
+    this._month = value;
+  }
+  /**
+   * The date of the calendar date
+   *
+   * @type {number}
+   */
+  get date() {
+    return this._date;
+  }
+  set date(value) {
+    this._date = value;
+  }
+  /**
+   * Converts CalendarDate to a string with an optional format specifier.
+   *
+   * @param {string} [format] - The format of string date
+   * @param {string} [lang] - Language
+   * @returns {string} The string date.
+   */
+  toString(format = 'MM/DD/YYYY', lang = 'en-us') {
+    let result = '';
+    const formatMatchers = [];
+    let formatMatcher = null;
+    while ((formatMatcher = DateFormatParserRegex.exec(format)) != null) {
+      if (formatMatcher[1] === '\\')
+        continue;
+      formatMatchers.push(formatMatcher);
+    }
+    if (formatMatchers.length) {
+      // add start line of tokens are not at the beginning
+      const firstMatcher = formatMatchers[0];
+      if (firstMatcher && firstMatcher.index > 0) {
+        result += format.substring(0, firstMatcher.index);
+      }
+      for (const [k, match] of Object.entries(formatMatchers)) {
+        const key = Number(k);
+        if (match) {
+          result += this.getDateItemByFormatToken(match[0], lang);
+          const nextMatch = formatMatchers[key + 1];
+          if (nextMatch) {
+            result += format.substring(match.index + match[0].length, nextMatch.index);
+          }
+          if (key === formatMatchers.length - 1) {
+            result += format.substring(match.index + match[0].length);
+          }
+        }
+      }
+    }
+    return result.replace(/\\/g, '');
+  }
+  /**
+   * Verify whether the calendar date is today
+   *
+   * @param {string} timezone - Timezone to consider when checking today's date. If not provided, uses system timezone.
+   * @returns {boolean} - Return true if the calendar date is today. Otherwise, return false.
+   */
+  isToday(timezone = getSystemTimezone()) {
+    if (timezone === getSystemTimezone()) {
+      const today = new Date();
+      return (today.getFullYear() === this.year &&
+        today.getMonth() + 1 === this.month &&
+        today.getDate() === this.date);
+    }
+    const { year, month, date } = CalendarDateTime.fromDate(new Date(), timezone).calendarDate;
+    return year === this.year && month === this.month && date === this.date;
+  }
+  /**
+   * Convert the calendar date to a Date object
+   *
+   * @returns {Date} - Return a Date object
+   */
+  toDate() {
+    return new Date(this.year, this.month - 1, this.date);
+  }
+  /**
+   * Compare with another calendar date
+   *
+   * @param {CalendarDate} date - The calendar date to compare with
+   * @returns {DateCompareResult} - Return a DateCompareResult object
+   */
+  compare(date) {
+    const { year, month } = date;
+    const result = {
+      isPreviousMonth: false,
+      inMonth: false,
+      isNextMonth: false,
+    };
+    if (this.year === year) {
+      if (this.month < month) {
+        result.isPreviousMonth = true;
+      }
+      else if (this.month > month) {
+        result.isNextMonth = true;
+      }
+      else {
+        result.inMonth = true;
+      }
+    }
+    else if (this.year > year) {
+      result.isNextMonth = true;
+    }
+    else {
+      result.isPreviousMonth = true;
+    }
+    return result;
+  }
+  /**
+   * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
+   *
+   * @param {Nullable<CalendarDate>} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
+   * `CalendarDate` object passed as a parameter. The method returns `true` if all three values (year, month, date) are equal
+   * @returns {boolean} The date is same day with current
+   */
+  equal(calendarDate) {
+    if (!calendarDate)
+      return false;
+    const { year, month, date } = calendarDate;
+    return this._year === year && this._month === month && this._date === date;
+  }
+  /**
+   * Get month name.
+   *
+   * @param {boolean} isShortName - Whether to get the short name or long name of the month
+   * @returns {string} The name of the month
+   */
+  getMonthName(isShortName = false) {
+    return internalTranslationController.VegaInternalTranslation.t(this.toDate().toLocaleDateString('en-US', {
+      month: isShortName ? 'short' : 'long',
+    }));
+  }
+  /**
+   * To determine if it is larger than a given `CalendarDate`.
+   *
+   * @param {Nullable<CalendarDate>} calendarDate - A `CalendarDate`
+   * @returns {boolean} - Compared result
+   */
+  isAfter(calendarDate) {
+    if (!calendarDate)
+      return false;
+    return compareIsAfter(this.toDate(), calendarDate.toDate());
+  }
+  /**
+   * To determine if it is less than a given `CalendarDate`.
+   *
+   * @param {Nullable<CalendarDate>} calendarDate - A `CalendarDate`
+   * @returns {boolean} - Compared result
+   */
+  isBefore(calendarDate) {
+    if (!calendarDate)
+      return false;
+    return compareIsBefore(this.toDate(), calendarDate.toDate());
+  }
+  /**
+   * Get first day of month.
+   *
+   * @returns {CalendarDate} - First day of month.
+   */
+  firstDateOfMonth() {
+    return CalendarDate.from(new Date(this.year, this.month - 1, 1));
+  }
+  /**
+   * Get last day of month.
+   *
+   * @returns {CalendarDate} - Last day of month.
+   */
+  lastDateOfMonth() {
+    return CalendarDate.from(new Date(this.year, this.month, 0));
+  }
+  /**
+   * Adjusts the calendar date by adding the specified number of years, months, and days.
+   *
+   * @param {number} [years=0] - The number of years to add.
+   * @param {number} [months=0] - The number of months to add.
+   * @param {number} [days=0] - The number of days to add.
+   * @returns {CalendarDate} - A new CalendarDate object with the adjusted date.
+   */
+  add(years = 0, months = 0, days = 0) {
+    const currentDate = this.toDate();
+    const adjustedDate = new Date(currentDate.getFullYear() + years, currentDate.getMonth() + months, currentDate.getDate() + days);
+    return CalendarDate.from(adjustedDate);
+  }
+  /**
+   * Get the short name of the week day for the calendar date.
+   *
+   * @returns {string} - The short name of the week day.
+   */
+  getWeekDayShortName() {
+    const currentDate = this.toDate();
+    return WEEKDAYS_SHORT[currentDate.getDay()];
+  }
+  /**
+   * Get year, month and day value by format token.
+   *
+   * @param {string} token - The format token.
+   * @param {string} lang - Language.
+   * @returns {string} - year, month and day value.
+   */
+  getDateItemByFormatToken(token, lang) {
+    switch (token) {
+      case 'YY':
+        return String(this.year).slice(-2);
+      case 'YYYY':
+        return String(this.year);
+      case 'M':
+        return String(this.month);
+      case 'MM':
+        return `0${this.month}`.slice(-2);
+      case 'MMM':
+        return CalendarDate.shortMonths(lang)[this.month - 1];
+      case 'MMMM':
+        return CalendarDate.longMonths(lang)[this.month - 1];
+      case 'D':
+        return String(this.date);
+      case 'DD':
+        return `0${this.date}`.slice(-2);
+      default:
+        return '';
+    }
+  }
+}
+CalendarDate.MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+/**
+ * CalendarPeriod is an abstract class that represents a period of date for calendar.
+ */
+class CalendarPeriod {
+  constructor(count, current, timezone) {
+    this._count = count;
+    this._timezone = timezone || getSystemTimezone();
+    this._current = current ? current : CalendarDate.from(new Date(), this._timezone);
+    this.calculatePeriod(this._current);
+  }
+  /**
+   * The current date of the period.
+   *
+   * @type {CalendarDate}
+   */
+  get current() {
+    return this._current;
+  }
+  /**
+   * The start date of the period
+   *
+   * @type {CalendarDate}
+   */
+  get startDate() {
+    return this._startDate;
+  }
+  /**
+   * The end date of the period
+   *
+   * @type {CalendarDate}
+   */
+  get endDate() {
+    return this._endDate;
+  }
+  /**
+   * The count of the period
+   *
+   * @type {number}
+   */
+  get count() {
+    return this._count;
+  }
+  /**
+   * This function returns the type of the object.
+   *
+   * @type {string}
+   */
+  get type() {
+    return this._type;
+  }
+  /**
+   * This function returns the showWeekends of the object.
+   *
+   * @type {boolean}
+   */
+  get showWeekends() {
+    return this._showWeekends;
+  }
+  /**
+   * The timezone of the period.
+   *
+   * @type {string | undefined}
+   */
+  get timezone() {
+    return this._timezone;
+  }
+  /**
+   * Go to a specific date.
+   *
+   * @param {CalendarDate} date - The date to go to.
+   * @returns {this} - The current period.
+   */
+  goTo(date) {
+    return this.createBy(date);
+  }
+  /**
+   * Go to now.
+   *
+   * @returns {this} - The current period.
+   */
+  now() {
+    return this.createBy(CalendarDate.from(new Date(), this._timezone));
+  }
+  /**
+   * Check the give period is equal to current period
+   *
+   * @param {CalendarPeriod} [period] - Give period to compare
+   * @returns {boolean} compare result
+   */
+  equal(period) {
+    return this.startDate.equal(period.startDate) && this.endDate.equal(period.endDate);
+  }
+  /**
+   * Calculate the period start date and end date.
+   *
+   * @param {CalendarDate} date - The date to calculate the period from.
+   */
+  calculatePeriod(date) {
+    const cursor = date.toDate();
+    if (this.count > 1) {
+      cursor.setDate(cursor.getDate() - getWeekdays().indexOf(cursor.getDay()));
+    }
+    this._startDate = CalendarDate.from(cursor);
+    cursor.setDate(cursor.getDate() + this.count - 1);
+    this._endDate = CalendarDate.from(cursor);
+  }
+}
+
+/**
+ * StateVariantFormatter: Format state token to CSS styles
+ */
+class StateVariantFormatter {
+  /**
+   * The function `format` takes an input state variant type and returns formatted CSS styles based on
+   * the input.
+   *
+   * @param {StateVariantType} input - The `format` function takes an `input` parameter of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>`. This means that the `input` parameter
+   * should be an object that contains styles for different states, where the keys are state names and
+   * the values are the corresponding styles
+   * @returns {string} The `format` function returns a string that contains CSS styles based on the input
+   * provided. If the input is determined to be a state variant token type, the function generates CSS
+   * styles for each state in the input and returns them joined by newlines. If the input is not a state
+   * variant token type, the function generates CSS styles for the default state and returns them.
+   */
+  format(input) {
+    if (isStateVariantTokenType(input)) {
+      const stateStyles = [];
+      this.getStates().forEach((state) => {
+        const style = this.formatToken(input[state]);
+        if (style) {
+          stateStyles.push(`:host${state === 'default' ? '' : `(:${state})`}{\n\t${style}\n}`);
+        }
+      });
+      return stateStyles.join('\n');
+    }
+    else {
+      const style = this.formatToken(input);
+      return `:host{\n\t${style}\n}`;
+    }
+  }
+}
+
+/**
+ * The `StateBackgroundColorFormatter` class in TypeScript formats background color tokens
+ * and handles different CSS states.
+ */
+class StateBackgroundColorFormatter extends StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'hover', 'active', 'focus-visible'];
+  }
+  /**
+   * The function `formatToken` takes a `BackgroundColorsTokenType` input, checks if it is a valid
+   * background color token type, and returns the corresponding CSS background color value or logs a
+   * warning if the input is invalid.
+   *
+   * @param {BackgroundColorsTokenType} input - The `input` parameter is of type
+   * `BackgroundColorsTokenType`, which is used to represent different background color tokens.
+   * @returns {string} The `formatToken` function takes a `BackgroundColorsTokenType` input and checks if it is a
+   * valid background color token type. If it is valid, it retrieves the corresponding color value from
+   * the `BackgroundColorMap` and returns a CSS style string with the background color. If the input is
+   * not valid, it logs a warning message using `LogUtility.warn` and returns an empty string.
+   */
+  formatToken(input) {
+    if (isBackgroundColorTokenType(input)) {
+      const tokenValue = BackgroundColorMap[input];
+      return `background-color: ${tokenValue};`;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`The backgroundColor value ${input} is invalid, it must be a value of: `, BackgroundColors);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]} An array of objects of type CssStatesType, which represents the states stored in the
+   * variable this.states.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+const StateBackgroundColorFormatter$1 = new StateBackgroundColorFormatter();
+
+var DateDirection;
+(function (DateDirection) {
+  DateDirection["PREVIOUS"] = "-1";
+  DateDirection["NEXT"] = "1";
+})(DateDirection || (DateDirection = {}));
+/**
+ * The function `getTimeIndex` calculates the index of a given time string based on a specified time unit.
+ *
+ * @param {string} timeString - A string representing a time in the format "HH:MM", where HH is the hour and MM is the minutes.
+ * @param {number} [unit=15] - The `unit` parameter in the `getTimeIndex` function is used to specify
+ * the interval in minutes for dividing the day. By default, it is set to 15 minutes, meaning that the
+ * day will be divided into 15-minute intervals.
+ * @returns {number} the index of the given time string based on the specified time unit.
+ */
+function getTimeIndex(timeString, unit = 15) {
+  const [hour, minutes] = timeString.split(':');
+  return Math.round((Number(hour) * 60 + Number(minutes)) / unit);
+}
+/**
+ * Returns a string that includes the event key for a calendar event slot.
+ *
+ * @param {string} eventKey - represents the key or identifier of a calendar event.
+ * @returns {string} a string that is a concatenation of 'vega-calendar-event-slot-' and the eventKey parameter.
+ */
+function getCalendarEventSlotName(eventKey) {
+  return 'vega-calendar-event-slot-' + eventKey;
+}
+/**
+ * Returns the closest workday to a given calendar date based on a specified direction.
+ *
+ * @param {Date} date - The starting date from which you want to find the closest workday.
+ * @param {'-1' | '1'} [direction=1] - Determines whether to find the closest workday in the past or future. It can have two possible values:
+ * @returns {CalendarDate} The closest workday to the input date
+ */
+function getClosestWorkday(date, direction = DateDirection.NEXT) {
+  const day = date.toDate().getDay();
+  if (day === 0 || day === 6) {
+    let nextWorkdayGap = day === 0 ? 1 : 2;
+    if (direction === DateDirection.PREVIOUS) {
+      nextWorkdayGap = day === 0 ? -2 : -1;
+    }
+    return CalendarDate.from(new Date(date.year, date.month - 1, date.date + nextWorkdayGap));
+  }
+  return date;
+}
+/**
+ * Get event status background color.
+ *
+ * @param {Nullable<string | BackgroundColorsTokenType>} color the background color
+ * @returns {string} background color style string
+ */
+function getEventStatusBgColorStyle(color = 'bg-accent6-primary') {
+  if (isBackgroundColorTokenType(color)) {
+    return `.event-bg-color{${StateBackgroundColorFormatter$1.formatToken(color)}}`;
+  }
+  else {
+    return `.event-bg-color{background-color:${color}}`;
+  }
+}
+
+/**
+ * Period of day.
+ */
+class DayPeriod extends CalendarPeriod {
+  constructor(current, showWeekends, timezone) {
+    super(DayPeriod.DISPLAY_DATE_COUNT, current, timezone);
+    this._type = 'day';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const nextDate = this.current.toDate();
+    nextDate.setDate(nextDate.getDate() + 1);
+    let calendarDate = CalendarDate.from(nextDate);
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate);
+    }
+    return this.createBy(calendarDate);
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const previousDate = this.current.toDate();
+    previousDate.setDate(previousDate.getDate() - 1);
+    let calendarDate = CalendarDate.from(previousDate);
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate, DateDirection.PREVIOUS);
+    }
+    return this.createBy(calendarDate);
+  }
+  /**
+   * Go to now.
+   *
+   * @returns {this} - The current period.
+   */
+  now() {
+    let calendarDate = CalendarDate.from(new Date(), this.timezone);
+    if (this._showWeekends === false) {
+      calendarDate = getClosestWorkday(calendarDate);
+    }
+    return this.createBy(calendarDate);
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new DayPeriod(current, this._showWeekends, this.timezone);
+  }
+}
+DayPeriod.DISPLAY_DATE_COUNT = 1;
+
+/**
+ * Period of the week
+ */
+class WeekPeriod extends CalendarPeriod {
+  constructor(current, showWeekends, timezone) {
+    super(WeekPeriod.DISPLAY_DATE_COUNT, current, timezone);
+    this._type = 'week';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const currentDate = this.current.toDate();
+    currentDate.setDate(currentDate.getDate() + 7);
+    return this.createBy(CalendarDate.from(currentDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const currentDate = this.current.toDate();
+    currentDate.setDate(currentDate.getDate() - 7);
+    return this.createBy(CalendarDate.from(currentDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new WeekPeriod(current, this._showWeekends, this.timezone);
+  }
+}
+WeekPeriod.DISPLAY_DATE_COUNT = 7;
+
+/**
+ * Period of month
+ */
+class MonthPeriod extends CalendarPeriod {
+  constructor(current, showWeekends, timezone) {
+    super(MonthPeriod.DISPLAY_DATE_COUNT, current, timezone);
+    this._type = 'month';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
+  }
+  /**
+   * The function `getMonthFirstDay` returns the first day of a given month in a calendar.
+   *
+   * @param {CalendarDate} [calendarDate] - The `calendarDate` parameter is an optional parameter of
+   * type `CalendarDate`. It represents a specific date in the calendar. If a `calendarDate` is
+   * provided, the function will use that date to determine the first day of the month. If no
+   * `calendarDate` is provided, the function will use the current date considering timezone.
+   * @param {string} [timezone] - The timezone to use when no calendarDate is provided
+   * @returns {CalendarDate} A new `CalendarDate` object representing the first day of the month from the provided
+   * `calendarDate` parameter or the current date if no parameter is provided.
+   */
+  static getMonthFirstDay(calendarDate, timezone) {
+    const date = calendarDate || CalendarDate.from(new Date(), timezone);
+    return new CalendarDate(date.year, date.month, 1);
+  }
+  /**
+   * Calculate the period start date and end date.
+   *
+   * @param {CalendarDate} date - The date to calculate the period from.
+   */
+  calculatePeriod(date) {
+    const firstDay = MonthPeriod.getMonthFirstDay(date);
+    const cursor = firstDay.toDate();
+    cursor.setDate(cursor.getDate() - getWeekdays().indexOf(cursor.getDay()));
+    this._startDate = CalendarDate.from(cursor);
+    cursor.setDate(cursor.getDate() + this.count - 1);
+    this._endDate = CalendarDate.from(cursor);
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const current = this.current.toDate();
+    const year = current.getFullYear();
+    const month = current.getMonth() + 1;
+    const day = current.getDate();
+    // Get the last day of the next month
+    const lastDayOfNextMonth = new Date(year, month + 1, 0).getDate();
+    const nextDay = Math.min(day, lastDayOfNextMonth);
+    const next = new Date(year, month, nextDay);
+    return this.createBy(CalendarDate.from(next));
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const current = this.current.toDate();
+    const year = current.getFullYear();
+    const month = current.getMonth() - 1;
+    const day = current.getDate();
+    // Get the last day of the previous month
+    const lastDayOfPreviousMonth = new Date(year, month + 1, 0).getDate();
+    const previousDay = Math.min(day, lastDayOfPreviousMonth);
+    const previous = new Date(year, month, previousDay);
+    return this.createBy(CalendarDate.from(previous));
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new MonthPeriod(current, this._showWeekends, this.timezone);
+  }
+}
+MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;
+
+/**
+ * Returns true if the input is a string that is one of the four directions.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is type of {@link SpacingDirection}
+ */
+const isSpacingDirection = (input) => {
+  return typeof input === 'string' && ['top', 'bottom', 'left', 'right', 'x', 'y'].includes(input);
+};
+/**
+ * If the input is a string and the string is a key in the Spacing enum, then the input is a SpacingTokenType.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is type of {@link SpacingTokenType}
+ */
+const isSpacingTokenType = (input) => {
+  return typeof input === 'string' && typeof Spacing[input] === 'number';
+};
+/**
+ * If every key in the input is a valid spacing direction and every value in the input is a valid spacing value, then the
+ * input is a valid directional spacing type.
+ *
+ * @param {unknown} input - unknown - This is the input value that we want to check.
+ * @returns {boolean} indicating if the input is type of {@link DirectionalSpacingType}
+ */
+const isDirectionalSpacingType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    Object.keys(input).every(isSpacingDirection) &&
+    Object.values(input).every((paddingValue) => paddingValue in Spacing));
+};
+/**
+ * `isResponsiveType` returns true if the input is an object with a `default` property and all other properties are valid
+ * breakpoints
+ *
+ * @param {unknown} input - unknown - this is the input that we want to check if it's a ResponsiveType
+ * @returns {boolean} indicating if the input is type of {@link ResponsiveType<ResponsiveScope>}
+ */
+const isResponsiveType = (input) => {
+  return typeof input === 'object' && input !== null && Object.keys(input).every(isBreakpointsTokenType);
+};
+/**
+ * If the input is a string and it's either in the Breakpoints enum or it's the string 'default', then it's a
+ * BreakpointsTokenType.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is type of {@link BreakpointsTokenType}
+ */
+const isBreakpointsTokenType = (input) => {
+  return typeof input === 'string' && (input in breakpoints.Breakpoints || input === 'default');
+};
+/**
+ * This function returns true if the input is a string that is a key in the BorderRadius object.
+ *
+ * @param {unknown} input - unknown - This is the input that will be checked.
+ * @returns {boolean} indicating if the input is type of {@link BorderRadiusTokenType}
+ */
+const isBorderRadiusTokenType = (input) => {
+  return typeof input === 'string' && input in BorderRadius;
+};
+/**
+ * If the input is a string and it's in the Colors array, then it's a ColorsTokenType.
+ *
+ * @param {unknown} input - unknown - This is the input that we're checking.
+ * @returns {boolean} indicating if the input is type of {@link ColorsTokenType}
+ */
+const isColorTokenType = (input) => {
+  return typeof input === 'string' && Colors.includes(input);
+};
+/**
+ * It returns true if the input is a string that starts with 'border-color-' and is a valid color token type.
+ *
+ * @param {unknown} input - The value to be tested.
+ * @returns {boolean} indicating if the input is {@link BorderColorsTokenType}
+ */
+const isBorderColorTokenType = (input) => {
+  return isColorTokenType(input) && /^border-color-.+$/.test(input);
+};
+/**
+ * If the input is a string and it's in the Borders array, then it's a BordersTokenType.
+ *
+ * @param {unknown} input - unknown - This is the input that we're checking.
+ * @returns {boolean} indicating if the input is type of {@link BordersTokenType}
+ */
+const isBorderTokenType = (input) => {
+  return typeof input === 'string' && Borders.includes(input);
+};
+/**
+ * It returns true if the input is a string that starts with `bg-` and is a valid color token type.
+ *
+ * @param {unknown} input - The value to be tested.
+ * @returns {boolean} indicating if the input is {@link BackgroundColorsTokenType}
+ */
+const isBackgroundColorTokenType = (input) => {
+  return isColorTokenType(input) && /^bg-.+$/.test(input);
+};
+/**
+ * This function returns true if the input is a string that starts with 'text-' and is a valid color token type.
+ *
+ * @param {unknown} input - The value to check.
+ * @returns {boolean} indicating if the input is {@link TextColorsTokenType}
+ */
+const isTextColorTokenType = (input) => {
+  return isColorTokenType(input) && /^text-.+$/.test(input);
+};
+/**
+ * If the input is a string and it's in the Shadows array, then it's a ShadowsTokenType.
+ *
+ * @param {unknown} input - unknown - This is the input that will be checked.
+ * @returns {boolean} indicating if the input is {@link ShadowsTokenType}
+ */
+const isShadowsTokenType = (input) => {
+  return typeof input === 'string' && Shadows.includes(input);
+};
+/**
+ * If the input is a number, it must be between 1 and 12. If the input is a string, it must be in the
+ * format of '1-auto' to '12-auto'.
+ *
+ * @param {unknown} input - The input to be tested.
+ * @returns {boolean} indicating if the input is {@link GridColumnsType}
+ */
+const isGridColumnsType = (input) => {
+  return ((typeof input === 'string' || typeof input === 'number') && GridColumnsRegex.test(input.toString()));
+};
+/**
+ * If the input is a number, it must be between 1 and 12. If the input is a string, it must be in the
+ * format of '1-auto' to '12-auto'.
+ *
+ * @param {unknown} input - The input to be tested.
+ * @returns {boolean} indicating if the input is {@link GridRowsType}
+ */
+const isGridRowsType = (input) => {
+  return (typeof input === 'string' || typeof input === 'number') && GridRowsRegex.test(input.toString());
+};
+/**
+ * Checks if the input is a valid GridJustifyItemsType value.
+ *
+ * @param {unknown} input - The input to test.
+ * @returns {boolean} indicating if the input is {@link GridJustifyItemsType}
+ */
+const isGridJustifyItemsType = (input) => {
+  return typeof input === 'string' && ui.GridJustifyItems.includes(input);
+};
+/**
+ * If the input is a string, and that string is a key in the Breakpoints object, then the input is a GridRowType.
+ *
+ * @param {unknown} input - The value that is being checked.
+ * @returns {boolean} indicating if the input is {@link BreakpointsTokenType}
+ */
+const isBreakpointsForPrefixType = (input) => {
+  return Object.keys(breakpoints.Breakpoints).includes(input);
+};
+/**
+ * If the input is an object with a number property named X and a number property named Y, then it's a TranslocationType.
+ *
+ * @param {unknown} input - The input to check.
+ * @returns {boolean} indicating if the input is {@link TranslocationType}
+ */
+const isTranslocationType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    (typeof input['X'] === 'number' ||
+      ['start', 'center', 'end'].includes(input['X'])) &&
+    (typeof input['Y'] === 'number' ||
+      ['start', 'center', 'end'].includes(input['Y'])));
+};
+/**
+ * "If the input is an object with a `groupId` property that is a string, and an `element` property that is an object with
+ * a `tagName` property that is `'VEGA-ACCORDION'`, then return true, otherwise return false."
+ *
+ * The above function is a type guard. It's a function that takes an input of type `unknown` and returns a boolean. If the
+ * input is of the type we're looking for, then the function returns `true`, otherwise it returns `false`
+ *
+ * @param {unknown} input - The input to check.
+ * @returns {boolean} indicating if the input is {@link AccordionObserverPayload}
+ */
+const isAccordionObserverPayload = (input) => {
+  return (typeof input['groupId'] === 'string' &&
+    input['element'] &&
+    input['element']['tagName'] === 'VEGA-ACCORDION');
+};
+/**
+ * If the input is a string and it's in the list of FlexDirections, then it's a FlexDirectionType.
+ *
+ * @param {unknown} input - unknown - This is the input that we want to check.
+ * @returns {boolean} A function that takes an unknown input and returns a boolean.
+ */
+const isFlexDirectionType = (input) => {
+  return typeof input === 'string' && ui.FlexDirections.includes(input);
+};
+/**
+ * This TypeScript function checks if an input is a valid FlexAlignItemType.
+ *
+ * @param {unknown} input - The input parameter is of type unknown, which means it can be any type of
+ * value. The function is checking if the input is a string and if it is included in the FlexAlignItem
+ * array. If both conditions are true, it returns true, indicating that the input is of type
+ * FlexAlignItemType
+ * @returns {boolean} The function `isFlexAlignItemType` is returning a boolean value. It checks if the `input`
+ * parameter is a string and if it is included in the `FlexAlignItem` array. If both conditions are
+ * true, it returns `true`, indicating that the `input` is of type `FlexAlignItemType`. Otherwise, it
+ * returns `false`.
+ */
+const isFlexAlignItemType = (input) => {
+  return typeof input === 'string' && ui.FlexAlignItem.includes(input);
+};
+/**
+ * This TypeScript function checks if an input is a valid FlexJustifyContentType.
+ *
+ * @param {unknown} input - The input parameter is of type unknown, which means it can be any type of
+ * value. The function is checking if the input is a string and if it is one of the values in the
+ * FlexJustifyContent array.
+ * @returns {boolean} A boolean value. The function checks if the input is a string and if it is included in the
+ * `FlexJustifyContent` array, and returns `true` if both conditions are met, indicating that the input
+ * is of type `FlexJustifyContentType`. If either condition is not met, the function returns `false`.
+ */
+const isFlexJustifyContentType = (input) => {
+  return typeof input === 'string' && ui.FlexJustifyContent.includes(input);
+};
+/**
+ * The function `isFlexWrapType` checks if the input is a valid `FlexWrapType` string.
+ *
+ * @param {unknown} input - The `input` parameter in the `isFlexWrapType` function is of type
+ * `unknown`, which means it can be any type of value. The function checks if the input is a string and
+ * if it is included in the `FlexWrap` array.
+ * @returns {boolean} The `isFlexWrapType` function is returning a boolean value. It checks if the `input` is a
+ * string and if it is included in the `FlexWrap` array, which contains valid `FlexWrapType` values. If
+ * both conditions are met, the function returns `true`, indicating that the `input` is of type
+ * `FlexWrapType`. Otherwise, it returns `false`.
+ */
+const isFlexWrapType = (input) => {
+  return typeof input === 'string' && ui.FlexWrap.includes(input);
+};
+/**
+ * The function `isTextAlignType` checks if the input is a valid `TextAlignType` string.
+ *
+ * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type
+ * of value.
+ * @returns {boolean} The `isTextAlignType` function is returning a boolean value. It checks if the `input` is a
+ * string and if it is included in the `TextAlign` array, which presumably contains valid
+ * `TextAlignType` values. If both conditions are met, the function returns `true`, indicating that the
+ * `input` is of type `TextAlignType`. Otherwise, it returns `false
+ */
+const isTextAlignType = (input) => {
+  return typeof input === 'string' && ui.TextAlign.includes(input);
+};
+/**
+ * It takes an array of unknowns and a type guard function, and returns a type guard function that
+ * returns true if the input is an array of the type that the type guard function guards
+ *
+ * @param {unknown} input - unknown - the input to check
+ * @param {Function} itemTypeGuard - (item: unknown) => item is T
+ * @returns {boolean} A function that takes two arguments, input and itemTypeGuard.
+ */
+const isArrayOfType = (input, itemTypeGuard) => {
+  return Array.isArray(input) && input.every(itemTypeGuard);
+};
+/**
+ * If the input is an object with a label and key property, then it's a DropdownSourceItem.
+ *
+ * @param {unknown} input - The input to check.
+ * @returns {boolean} A function that takes in an unknown input and returns a boolean.
+ */
+const isDropdownSourceItemType = (input) => {
+  return (typeof input === 'object' &&
+    Object.prototype.hasOwnProperty.call(input, 'label') &&
+    Object.prototype.hasOwnProperty.call(input, 'key'));
+};
+/**
+ * If the input is an object with an id and displayName property, then it's a SelectSourceItem.
+ *
+ * @param {unknown} input - The input to check.
+ * @returns {boolean} A function that takes an input and returns a boolean.
+ */
+const isSelectSourceItemType = (input) => {
+  return (typeof input === 'object' &&
+    Object.prototype.hasOwnProperty.call(input, 'id') &&
+    Object.prototype.hasOwnProperty.call(input, 'displayName'));
+};
+/**
+ * The function `isBoxDisplayType` checks if the input is a valid BoxDisplayType.
+ *
+ * @param {unknown} input - The input parameter is of type unknown, which means it can be any type.
+ * @returns {boolean} a boolean value.
+ */
+const isBoxDisplayType = (input) => {
+  return typeof input === 'string' && ui.BoxDisplay.includes(input);
+};
+/**
+ * Check if the input is not null and undefined
+ *
+ * @param {Nullable} input - the value
+ * @returns {boolean} return true if the input is not null and undefined
+ */
+const isNonNullable = (input) => {
+  return input !== null && input !== undefined;
+};
+/**
+ * The function `isTypographyTokenType` checks if the input is a string and if it is one of the predefined TypographyTokenType values.
+ *
+ * @param {unknown} input - The input parameter is of type unknown, which means it can be any type.
+ * @returns {boolean} a boolean value.
+ */
+const isTypographyTokenType = (input) => {
+  return typeof input === 'string' && typography.TypographyKeys.includes(input);
+};
+/**
+ * The function `isBorderStyleType` checks if the input is a valid BorderStyleType string.
+ *
+ * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type
+ * of value. The `isBorderStyleType` function is a type guard function that checks if the `input` is of
+ * type `BorderStyleType`.
+ * @returns {boolean} The `isBorderStyleType` function is returning a boolean value. It checks if the `input` is
+ * of type `BorderStyleType` by verifying if it is a string and if it is included in the `BorderStyle`
+ * array. If the condition is met, it returns `true`, indicating that the `input` is of type
+ * `BorderStyleType`. Otherwise, it returns `false`.
+ */
+const isBorderStyleType = (input) => {
+  return typeof input === 'string' && ui.BorderStyle.includes(input);
+};
+/**
+ * The function `isBorderRadiusDirectionType` checks if the input is a valid `BorderRadiusDirection` type.
+ *
+ * @param {unknown} input - The `input` parameter in the `isBorderRadiusDirectionType` function is of
+ * type `unknown`, which means it can be any type of value. The function checks if the input is a
+ * string and if it matches one of the specified values in the array ['top', 'left', 'right
+ * @returns {boolean} The function `isBorderRadiusDirectionType` is returning a boolean value indicating whether
+ * the `input` is of type `BorderRadiusDirection` or not.
+ */
+const isBorderRadiusDirectionType = (input) => {
+  return (typeof input === 'string' &&
+    ['top', 'right', 'bottom', 'left', 'top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(input));
+};
+/**
+ * The function `isDirectionalBorderRadiusType` checks if the input object conforms to the
+ * `DirectionalBorderRadiusType` type.
+ *
+ * @param {unknown} input - The `input` parameter in the `isDirectionalBorderRadiusType` function is of
+ * type `unknown`, which means it can be any type of value. The function is checking if the input is a
+ * valid `DirectionalBorderRadiusType` by verifying that it is an object, not null,
+ * @returns {boolean} The function `isDirectionalBorderRadiusType` is returning a boolean value.
+ */
+const isDirectionalBorderRadiusType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    Object.keys(input).every(isBorderRadiusDirectionType) &&
+    Object.values(input).every((value) => value in BorderRadius));
+};
+/**
+ * The function `isStateVariantTokenType` checks if the input is an object with keys that are all of
+ * type `CssStatesType`.
+ *
+ * @param {unknown} input - The `input` parameter is a value of type `unknown`, which means it can be
+ * any type of value in TypeScript.
+ * @returns {boolean} The `isStateVariantTokenType` function is returning a boolean value. It checks if the
+ * `input` is an object that is not null and if all the keys of the object pass the `isCssStateType`
+ * check. If these conditions are met, it returns `true`, indicating that the `input` is of type
+ * `StateVariantType<T, CssStatesType>`. Otherwise, it
+ */
+const isStateVariantTokenType = (input) => {
+  return typeof input === 'object' && input !== null && Object.keys(input).every(isCssStateType);
+};
+/**
+ * The function `isCssStateType` checks if the input is a valid CSS state type by verifying if it is a
+ * string and included in a predefined list of CSS states.
+ *
+ * @param {CssStatesType} input - The `input` parameter in the `isCssStateType` function is of type
+ * `CssStatesType`.
+ * @returns {boolean} The function `isCssStateType` is returning a boolean value.
+ */
+const isCssStateType = (input) => {
+  return typeof input === 'string' && ui.CssStates.includes(input);
+};
+/**
+ * Checks that the provided value is a non-null object with at least the
+ * required grouping-model properties (`key` and `label`) and that `label`
+ * is a string.
+ *
+ * @param {unknown} input - Value to test.
+ * @returns {input is VegaTableColumnGroupingModel} True when input matches the grouping model shape.
+ */
+const isVegaTableColumnGroupingModelType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    'key' in input &&
+    'label' in input &&
+    typeof input.label === 'string');
+};
+/**
+ * Check is calendar date type
+ *
+ * @param {unknown} input - Value to test.
+ * @returns {input is CalendarDate} True when input matches the calendar date type.
+ */
+const isCalendarDateType = (input) => {
+  return input instanceof CalendarDate;
+};
+/**
+ * Type guard to check if the provided instance implements the VegaEATriggerStrategy interface
+ *
+ * @param {unknown} instance - The instance to check.
+ * @returns {instance is VegaEATriggerStrategy} True if the instance implements VegaEATriggerStrategy.
+ */
+const isEATriggerStrategy = (instance) => {
+  return (!!instance &&
+    typeof instance.evaluate === 'function' &&
+    typeof instance.canEvaluate === 'function');
+};
+
+exports.AmexRegex = AmexRegex;
+exports.BackgroundColorMap = BackgroundColorMap;
+exports.BackgroundColors = BackgroundColors;
+exports.BorderColorMap = BorderColorMap;
+exports.BorderColors = BorderColors;
+exports.BorderMap = BorderMap;
+exports.BorderRadius = BorderRadius;
+exports.Borders = Borders;
+exports.CalendarDate = CalendarDate;
+exports.CalendarDateTime = CalendarDateTime;
+exports.CalendarTime = CalendarTime;
+exports.Colors = Colors;
+exports.DayPeriod = DayPeriod;
+exports.DiscoverRegex = DiscoverRegex;
+exports.FillBackgroundColors = FillBackgroundColors;
+exports.MasterCardRegex = MasterCardRegex;
+exports.MonthPeriod = MonthPeriod;
+exports.ShadowMap = ShadowMap;
+exports.Shadows = Shadows;
+exports.Spacing = Spacing;
+exports.StateBackgroundColorFormatter = StateBackgroundColorFormatter$1;
+exports.StateVariantFormatter = StateVariantFormatter;
+exports.StrokeBackgroundColors = StrokeBackgroundColors;
+exports.TextColorMap = TextColorMap;
+exports.TextColors = TextColors;
+exports.VisaRegex = VisaRegex;
+exports.WEEKDAYS_SHORT = WEEKDAYS_SHORT;
+exports.WeekPeriod = WeekPeriod;
+exports.buildDatePickerAnnouncement = buildDatePickerAnnouncement;
+exports.compareIsAfter = compareIsAfter;
+exports.compareIsBefore = compareIsBefore;
+exports.compareIsSameOrBefore = compareIsSameOrBefore;
+exports.convert12HourTo24HourFormat = convert12HourTo24HourFormat;
+exports.getCalendarEventSlotName = getCalendarEventSlotName;
+exports.getClosestWorkday = getClosestWorkday;
+exports.getEventStatusBgColorStyle = getEventStatusBgColorStyle;
+exports.getSystemTimezone = getSystemTimezone;
+exports.getTimeIndex = getTimeIndex;
+exports.getWeekdays = getWeekdays;
+exports.isAccordionObserverPayload = isAccordionObserverPayload;
+exports.isArrayOfType = isArrayOfType;
+exports.isBackgroundColorTokenType = isBackgroundColorTokenType;
+exports.isBorderColorTokenType = isBorderColorTokenType;
+exports.isBorderRadiusTokenType = isBorderRadiusTokenType;
+exports.isBorderStyleType = isBorderStyleType;
+exports.isBorderTokenType = isBorderTokenType;
+exports.isBoxDisplayType = isBoxDisplayType;
+exports.isBreakpointsForPrefixType = isBreakpointsForPrefixType;
+exports.isBreakpointsTokenType = isBreakpointsTokenType;
+exports.isCalendarDateType = isCalendarDateType;
+exports.isDateStr = isDateStr;
+exports.isDirectionalBorderRadiusType = isDirectionalBorderRadiusType;
+exports.isDirectionalSpacingType = isDirectionalSpacingType;
+exports.isDropdownSourceItemType = isDropdownSourceItemType;
+exports.isEATriggerStrategy = isEATriggerStrategy;
+exports.isFlexAlignItemType = isFlexAlignItemType;
+exports.isFlexDirectionType = isFlexDirectionType;
+exports.isFlexJustifyContentType = isFlexJustifyContentType;
+exports.isFlexWrapType = isFlexWrapType;
+exports.isGridColumnsType = isGridColumnsType;
+exports.isGridJustifyItemsType = isGridJustifyItemsType;
+exports.isGridRowsType = isGridRowsType;
+exports.isNonNullable = isNonNullable;
+exports.isResponsiveType = isResponsiveType;
+exports.isSelectSourceItemType = isSelectSourceItemType;
+exports.isShadowsTokenType = isShadowsTokenType;
+exports.isSpacingTokenType = isSpacingTokenType;
+exports.isTextAlignType = isTextAlignType;
+exports.isTextColorTokenType = isTextColorTokenType;
+exports.isTimeStr = isTimeStr;
+exports.isTranslocationType = isTranslocationType;
+exports.isTypographyTokenType = isTypographyTokenType;
+exports.isVegaTableColumnGroupingModelType = isVegaTableColumnGroupingModelType;
+exports.pad = pad;