@heartlandone/vega 2.71.0-RTE-table-preview → 2.72.0

package/dist/esm/type-guard-b48aec98.js

@@ -0,0 +1,1894 @@
+import { B as Breakpoints } from './breakpoints-d9faf11c.js';
+import { B as BorderStyle, C as CssStates, F as FlexDirections, a as FlexAlignItem, b as FlexJustifyContent, c as FlexWrap, d as BoxDisplay, T as TextAlign } from './ui-28fd4193.js';
+import { a as TypographyKeys } from './typography-396de03f.js';
+import { V as VegaInternalTranslation } from './translation-96e5debd.js';
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.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);
+};
+var WeekdayLongNames;
+(function (WeekdayLongNames) {
+  WeekdayLongNames["sun"] = "Sunday";
+  WeekdayLongNames["mon"] = "Monday";
+  WeekdayLongNames["tue"] = "Tuesday";
+  WeekdayLongNames["wed"] = "Wednesday";
+  WeekdayLongNames["thu"] = "Thursday";
+  WeekdayLongNames["fri"] = "Friday";
+  WeekdayLongNames["sat"] = "Saturday";
+})(WeekdayLongNames || (WeekdayLongNames = {}));
+/**
+ * Get the system timezone identifier
+ *
+ * @returns {string} - The system timezone identifier (e.g., "America/New_York")
+ */
+const getSystemTimezone = () => {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+};
+
+/**
+ * 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} ${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) {
+      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 {
+    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;
+};
+
+// 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 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 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 {
+      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 || 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());
+};
+/**
+ * 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).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' && 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' && 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' && 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' && 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' && 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' && 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' && 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' && 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' && 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;
+};
+
+export { compareIsAfter as $, AmexRegex as A, BorderRadius as B, Colors as C, DiscoverRegex as D, isGridColumnsType as E, FillBackgroundColors as F, isGridRowsType as G, isTranslocationType as H, isFlexDirectionType as I, isFlexAlignItemType as J, isFlexJustifyContentType as K, isFlexWrapType as L, MasterCardRegex as M, isBoxDisplayType as N, isDirectionalBorderRadiusType as O, isTextAlignType as P, isDateStr as Q, isTimeStr as R, StrokeBackgroundColors as S, TextColors as T, isAccordionObserverPayload as U, VisaRegex as V, isArrayOfType as W, isDropdownSourceItemType as X, isSelectSourceItemType as Y, compareIsSameOrBefore as Z, compareIsBefore as _, BackgroundColors as a, CalendarDate as a0, MonthPeriod as a1, isCalendarDateType as a2, getWeekdays as a3, pad as a4, convert12HourTo24HourFormat as a5, getClosestWorkday as a6, DayPeriod as a7, WeekPeriod as a8, WeekdayLongNames as a9, getSystemTimezone as aa, CalendarTime as ab, CalendarDateTime as ac, getCalendarEventSlotName as ad, getTimeIndex as ae, getEventStatusBgColorStyle as af, isVegaTableColumnGroupingModelType as ag, BorderColors as b, TextColorMap as c, BackgroundColorMap as d, BorderColorMap as e, Shadows as f, ShadowMap as g, Spacing as h, isNonNullable as i, StateVariantFormatter as j, isBorderColorTokenType as k, isShadowsTokenType as l, isBorderTokenType as m, Borders as n, BorderMap as o, StateBackgroundColorFormatter$1 as p, isSpacingTokenType as q, isBorderRadiusTokenType as r, isBackgroundColorTokenType as s, isTextColorTokenType as t, isBreakpointsTokenType as u, isBorderStyleType as v, isTypographyTokenType as w, isResponsiveType as x, isBreakpointsForPrefixType as y, isDirectionalSpacingType as z };