'use strict';

const staticSubjectTitle = require('./static-subject-title-5829a298.js');
const changeManager = require('./change-manager-72f643de.js');
const observer = require('./observer-f49483e8.js');
const tinycolorPolyfill = require('./tinycolor-polyfill-502efaa8.js');
const vegaNonceManager = require('./vega-nonce-manager-55854929.js');
const index = require('./index-592b4052.js');

/* This file is generated by vega-design 2.0.80 */
const DarkModeColorTokens$1 = {
  'bg-brand': '176, 180, 181, 1',
  'bg-page': '24, 24, 48, 1',
  'bg-primary': '4, 4, 28, 1',
  'bg-secondary': '18, 18, 39, 1',
  'bg-tertiary': '24, 24, 48, 1',
  'bg-quaternary': '70, 71, 101, 1',
  'bg-inverted-primary': '252, 252, 252, 1',
  'bg-inverted-secondary': '247, 247, 247, 1',
  'bg-inverted-tertiary': '240, 243, 247, 1',
  'bg-inverted-quaternary': '241, 248, 251, 1',
  'bg-action': '28, 171, 255, 1',
  'bg-action-hover': '76, 190, 255, 1',
  'bg-action-focus': '28, 171, 255, 1',
  'bg-action-active': '15, 167, 255, 1',
  'bg-action-quaternary': '51, 57, 61, 1',
  'bg-action-quaternary-hover': '89, 96, 99, 1',
  'bg-action-quaternary-active': '24, 24, 48, 1',
  'bg-action-secondary': '0, 0, 0, 0',
  'bg-action-secondary-hover': '76, 190, 255, 0.2',
  'bg-action-secondary-active': '15, 167, 255, 0.2',
  'bg-action-tertiary': '0, 0, 0, 0',
  'bg-action-tertiary-hover': '252, 252, 252, 0.2',
  'bg-action-tertiary-active': '252, 252, 252, 0.1',
  'bg-app-header': '24, 24, 48, 0.92',
  'bg-backdrop-modal': '70, 71, 101, 0.8',
  'bg-backdrop-popover': '70, 71, 101, 0.56',
  'bg-backdrop-sidebar': '70, 71, 101, 0.8',
  'bg-chip': '252, 252, 252, 0.1',
  'bg-chip-hover': '252, 252, 252, 0.2',
  'bg-chip-active': '252, 252, 252, 0.06',
  'bg-danger': '255, 56, 97, 1',
  'bg-danger-hover': '255, 71, 123, 1',
  'bg-danger-focus': '255, 56, 97, 1',
  'bg-danger-active': '230, 50, 87, 1',
  'bg-danger-tertiary': '0, 0, 0, 0',
  'bg-danger-tertiary-hover': '255, 71, 123, 0.2',
  'bg-danger-tertiary-active': '230, 50, 87, 0.2',
  'bg-disabled': '70, 71, 101, 1',
  'bg-divider': '32, 54, 69, 1',
  'bg-divider-secondary': '51, 57, 61, 1',
  'bg-keypad-btn-active': '45, 76, 97, 1',
  'bg-loading-progress': '4, 165, 245, 1',
  'bg-loading-track': '142, 223, 249, 1',
  'bg-segment-hover': '70, 71, 101, 1',
  'bg-segment-control': '210, 208, 223, 0.1',
  'bg-selected': '85, 218, 255, 0.3',
  'bg-sidebar': '18, 18, 39, 1',
  'bg-sidebar-icon': '188, 186, 213, 1',
  'bg-sidebar-icon-hover': '18, 18, 39, 1',
  'bg-sidebar-icon-selected': '252, 252, 252, 1',
  'bg-sidebar-item-hover': '252, 252, 252, 1',
  'bg-sidebar-item-selected': '0, 187, 255, 0.4',
  'bg-site-footer': '51, 57, 61, 1',
  'bg-site-footer-action': '171, 198, 216, 1',
  'bg-site-footer-action-hover': '199, 217, 229, 1',
  'bg-site-footer-action-active': '143, 179, 203, 1',
  'bg-site-footer-field': '89, 96, 99, 1',
  'bg-slider-handle': '252, 252, 252, 1',
  'bg-status-error': '189, 41, 71, 1',
  'bg-status-info': '252, 252, 252, 1',
  'bg-status-success': '123, 242, 151, 1',
  'bg-status-warning': '255, 212, 105, 1',
  'bg-tab': '51, 57, 61, 1',
  'bg-tab-hover': '89, 96, 99, 1',
  'bg-tab-selected': '240, 243, 247, 1',
  'bg-table-alt-row': '18, 18, 39, 1',
  'bg-table-header': '24, 24, 48, 1',
  'bg-table-row-hover': '70, 71, 101, 1',
  'bg-table-row-selected-expanded': '32, 54, 69, 1',
  'bg-table-selected-row': '45, 76, 97, 1',
  'bg-textarea-count': '252, 252, 252, 0.5',
  'bg-tile': '4, 4, 28, 1',
  'bg-tile-hover': '24, 24, 48, 1',
  'bg-tile-selected': '32, 54, 69, 1',
  'bg-tile-selected-hover': '45, 76, 97, 1',
  'bg-toggle-switch': '210, 208, 223, 1',
  'bg-toggle-switch-hover': '188, 186, 213, 1',
  'bg-toggle-switch-selected-disabled': '0, 75, 128, 1',
  'bg-transparent': '0, 0, 0, 0',
  'bg-accent1-primary': '109, 217, 202, 1',
  'bg-accent1-secondary': '174, 234, 226, 1',
  'bg-accent1-tertiary': '223, 247, 243, 1',
  'bg-accent2-primary': '95, 56, 206, 1',
  'bg-accent2-secondary': '184, 167, 233, 1',
  'bg-accent2-tertiary': '219, 211, 244, 1',
  'bg-accent3-primary': '255, 203, 105, 1',
  'bg-accent3-secondary': '251, 226, 185, 1',
  'bg-accent3-tertiary': '255, 243, 222, 1',
  'bg-accent4-primary': '255, 129, 87, 1',
  'bg-accent4-secondary': '255, 185, 162, 1',
  'bg-accent4-tertiary': '255, 227, 218, 1',
  'bg-accent5-primary': '4, 165, 245, 1',
  'bg-accent5-secondary': '85, 218, 255, 1',
  'bg-accent5-tertiary': '227, 247, 253, 1',
  'bg-accent6-primary': '255, 84, 165, 1',
  'bg-accent6-secondary': '255, 179, 215, 1',
  'bg-accent6-tertiary': '255, 217, 235, 1',
  'bg-accent7-primary': '37, 159, 159, 1',
  'bg-accent7-secondary': '155, 212, 214, 1',
  'bg-accent7-tertiary': '208, 239, 239, 1',
  'bg-accent8-primary': '86, 61, 130, 1',
  'bg-accent8-secondary': '199, 162, 204, 1',
  'bg-accent8-tertiary': '230, 214, 234, 1',
  'bg-accent9-primary': '255, 191, 63, 1',
  'bg-accent9-secondary': '254, 215, 142, 1',
  'bg-accent9-tertiary': '251, 226, 185, 1',
  'bg-accent10-primary': '237, 122, 35, 1',
  'bg-accent10-secondary': '241, 146, 85, 1',
  'bg-accent10-tertiary': '245, 187, 148, 1',
  'bg-date-picker-range': '32, 54, 69, 1',
  'text-primary': '252, 252, 254, 0.9',
  'text-secondary': '252, 252, 254, 0.64',
  'text-inverted-primary': '4, 4, 28, 0.95',
  'text-inverted-secondary': '4, 4, 28, 0.64',
  'text-black': '4, 4, 28, 0.95',
  'text-white': '252, 252, 254, 0.9',
  'text-brand': '176, 180, 181, 1',
  'text-danger-link': '255, 56, 97, 1',
  'text-danger-link-hover': '255, 71, 123, 1',
  'text-danger-link-active': '230, 50, 87, 1',
  'text-danger-link-focus': '255, 82, 136, 1',
  'text-danger-link-visited': '255, 56, 97, 1',
  'text-disabled': '252, 252, 254, 0.38',
  'text-error': '255, 56, 97, 1',
  'text-input-disabled': '252, 252, 254, 0.38',
  'text-input-placeholder': '252, 252, 254, 0.5',
  'text-link': '28, 171, 255, 1',
  'text-link-hover': '76, 190, 255, 1',
  'text-link-active': '15, 167, 255, 1',
  'text-link-focus': '28, 171, 255, 1',
  'text-link-visited': '128, 107, 255, 1',
  'text-on-action': '4, 4, 28, 0.95',
  'text-on-danger': '4, 4, 28, 0.95',
  'text-on-disabled': '4, 4, 28, 0.95',
  'text-sidebar-link': '188, 186, 213, 1',
  'text-sidebar-link-hover': '18, 18, 39, 1',
  'text-sidebar-link-selected': '252, 252, 252, 1',
  'text-site-footer-link': '171, 198, 216, 1',
  'text-site-footer-link-hover': '199, 217, 229, 1',
  'text-site-footer-link-active': '143, 179, 203, 1',
  'text-success': '89, 217, 119, 1',
  'text-inverted-success': '1, 128, 31, 1',
  'text-accent1-primary': '109, 217, 202, 1',
  'text-accent2-primary': '95, 56, 206, 1',
  'text-accent3-primary': '255, 203, 105, 1',
  'text-accent4-primary': '255, 129, 87, 1',
  'text-accent5-primary': '4, 165, 245, 1',
  'text-accent6-primary': '255, 71, 123, 1',
  'text-accent7-primary': '37, 159, 159, 1',
  'text-accent8-primary': '86, 61, 130, 1',
  'text-accent9-primary': '255, 191, 63, 1',
  'text-accent10-primary': '237, 122, 35, 1',
  'border-color-action': '28, 171, 255, 1',
  'border-color-action-hover': '76, 190, 255, 1',
  'border-color-action-active': '15, 167, 255, 1',
  'border-color-chip': '107, 116, 125, 1',
  'border-color-danger': '255, 56, 97, 1',
  'border-color-danger-hover': '255, 71, 123, 1',
  'border-color-danger-active': '230, 50, 87, 1',
  'border-color-divider': '32, 54, 69, 1',
  'border-color-divider-secondary': '51, 57, 61, 1',
  'border-color-input-field': '32, 54, 69, 1',
  'border-color-input-field-hover': '58, 98, 125, 1',
  'border-color-input-field-focus': '28, 171, 255, 1',
  'border-color-input-field-danger': '255, 56, 97, 1',
  'border-color-input-field-danger-hover': '255, 71, 123, 1',
  'border-color-input-field-danger-focus': '255, 56, 97, 1',
  'border-color-input-field-disabled': '4, 4, 28, 1',
  'border-color-secondary-btn-disabled': '70, 71, 101, 1',
  'border-color-sidebar-item-focus': '28, 171, 255, 1',
  'border-color-slider-handle': '107, 116, 125, 1',
  'border-color-success': '89, 217, 119, 1',
  'border-color-table-divider': '32, 54, 69, 1',
  'border-color-tile': '32, 54, 69, 1',
  'border-color-tile-hover': '58, 98, 125, 1',
  'border-color-tile-focus': '28, 171, 255, 1',
  'border-color-tile-selected-focus': '28, 171, 255, 1',
  'border-color-tile-selected': '28, 171, 255, 1',
  'border-color-tile-selected-hover': '76, 190, 255, 1',
  'border-color-notification-btn': '252, 252, 252, 1',
  'border-color-notification-btn-dark': '32, 54, 69, 1',
};

/* This file is generated by vega-design 2.0.80 */
const DarkModeBorderTokens$1 = {
  'border-secondary-btn': '28, 171, 255, 1',
  'border-secondary-btn-hover': '76, 190, 255, 1',
  'border-secondary-danger-btn': '255, 56, 97, 1',
  'border-secondary-btn-active': '15, 167, 255, 1',
  'border-secondary-danger-btn-hover': '255, 71, 123, 1',
  'border-secondary-danger-btn-active': '230, 50, 87, 1',
  'border-input-field': '32, 54, 69, 1',
  'border-input-field-hover': '58, 98, 125, 1',
  'border-input-field-focus': '28, 171, 255, 1',
  'border-input-field-danger': '255, 56, 97, 1',
  'border-input-field-danger-hover': '255, 71, 123, 1',
  'border-input-field-danger-focus': '255, 56, 97, 1',
  'border-sidebar-item-focus': '28, 171, 255, 1',
  'border-input-field-disabled': '4, 4, 28, 1',
  'border-success': '89, 217, 119, 1',
  'border-secondary-btn-disabled': '70, 71, 101, 1',
  'border-chip': '107, 116, 125, 1',
  'border-divider': '32, 54, 69, 1',
  'border-divider-secondary': '51, 57, 61, 1',
  'border-tile-selected': '28, 171, 255, 1',
  'border-tile-selected-hover': '76, 190, 255, 1',
  'border-table-divider': '32, 54, 69, 1',
  'border-slider-handle': '107, 116, 125, 1',
  'border-tile': '32, 54, 69, 1',
  'border-tile-hover': '58, 98, 125, 1',
  'border-tile-focus': '28, 171, 255, 1',
  'border-tile-selected-focus': '28, 171, 255, 1',
  'border-notification-btn': '252, 252, 252, 1',
  'border-notification-btn-black': '32, 54, 69, 1',
};

/* This file is generated by vega-design 2.0.80 */
const DarkModeShadowTokens$1 = {
  'shadow-card': '0px 2px 10px 0px rgba(0, 0, 0, 0.18), 0px 2px 4px 0px rgba(0, 0, 0, 0.1)',
  'shadow-modal': '0px 6px 40px 0px rgba(2, 2, 15, 0.14), 0px 4px 24px 0px rgba(2, 2, 15, 0.28), 0px 8px 80px 0px rgba(2, 2, 15, 0.26)',
  'shadow-popover': '0px 0px 88px 0px rgba(2, 2, 15, 0.08), 0px 0px 32px 0px rgba(2, 2, 15, 0.1), 0px 4px 72px 0px rgba(2, 2, 15, 0.16)',
  'shadow-form-field': '0px 1px 2px 0px rgba(170, 170, 170, 0.06), 0px 1px 3px 0px rgba(170, 170, 170, 0.1)',
  'shadow-dropdown-menu': '0px 2px 4px -2px rgba(0, 0, 0, 0.14), 0px 4px 6px -1px rgba(0, 0, 0, 0.16)',
  'shadow-app-header': '0px 1px 0px 0px rgba(188, 186, 213, 0.25)',
  'shadow-modal-header': '0px 1px 0px 0px rgba(188, 186, 213, 0.25)',
  'shadow-modal-footer': '0px -2px 8px 0px rgba(188, 186, 213, 0.4), 0px -1px 0px 0px rgba(188, 186, 213, 0.25)',
  'shadow-modal-footer-no-scroll': '0px -1px 0px 0px rgba(188, 186, 213, 0.25)',
};

/* This file is generated by vega-design 2.0.80 */
const DarkModeRingTokens$1 = {
  'ring-input-focus': '0, 187, 255, 0.25',
  'ring-input-danger-focus': '255, 56, 97, 0.25',
  'ring-action-focus': '0, 187, 255, 0.25',
  'ring-action-danger-focus': '255, 56, 97, 0.25',
};

/* This file is generated by vega-design 2.0.77 */
const DarkModeColorTokens = {
  'bg-brand': '176, 180, 181, 1',
  'bg-page': '24, 24, 48, 1',
  'bg-primary': '4, 4, 28, 1',
  'bg-secondary': '18, 18, 39, 1',
  'bg-tertiary': '24, 24, 48, 1',
  'bg-quaternary': '70, 71, 101, 1',
  'bg-inverted-primary': '252, 252, 252, 1',
  'bg-inverted-secondary': '247, 247, 247, 1',
  'bg-inverted-tertiary': '240, 243, 247, 1',
  'bg-inverted-quaternary': '241, 248, 251, 1',
  'bg-action': '0, 187, 255, 1',
  'bg-action-hover': '0, 204, 255, 1',
  'bg-action-focus': '0, 187, 255, 1',
  'bg-action-active': '4, 165, 245, 1',
  'bg-action-quaternary': '51, 57, 61, 1',
  'bg-action-quaternary-hover': '89, 96, 99, 1',
  'bg-action-quaternary-active': '24, 24, 48, 1',
  'bg-action-secondary': '0, 0, 0, 0',
  'bg-action-secondary-hover': '0, 204, 255, 0.2',
  'bg-action-secondary-active': '4, 165, 245, 0.2',
  'bg-action-tertiary': '0, 0, 0, 0',
  'bg-action-tertiary-hover': '252, 252, 252, 0.2',
  'bg-action-tertiary-active': '252, 252, 252, 0.1',
  'bg-app-header': '24, 24, 48, 0.92',
  'bg-backdrop-modal': '70, 71, 101, 0.8',
  'bg-backdrop-popover': '70, 71, 101, 0.56',
  'bg-backdrop-sidebar': '70, 71, 101, 0.8',
  'bg-chip': '252, 252, 252, 0.1',
  'bg-chip-hover': '252, 252, 252, 0.2',
  'bg-chip-active': '252, 252, 252, 0.06',
  'bg-danger': '255, 56, 97, 1',
  'bg-danger-hover': '255, 71, 123, 1',
  'bg-danger-focus': '255, 56, 97, 1',
  'bg-danger-active': '230, 50, 87, 1',
  'bg-danger-tertiary': '0, 0, 0, 0',
  'bg-danger-tertiary-hover': '255, 71, 123, 0.2',
  'bg-danger-tertiary-active': '230, 50, 87, 0.2',
  'bg-disabled': '70, 71, 101, 1',
  'bg-divider': '32, 54, 69, 1',
  'bg-divider-secondary': '51, 57, 61, 1',
  'bg-keypad-btn-active': '45, 76, 97, 1',
  'bg-loading-progress': '4, 165, 245, 1',
  'bg-loading-track': '142, 223, 249, 1',
  'bg-segment-hover': '70, 71, 101, 1',
  'bg-segment-control': '210, 208, 223, 0.1',
  'bg-selected': '85, 218, 255, 0.3',
  'bg-sidebar': '18, 18, 39, 1',
  'bg-sidebar-icon': '188, 186, 213, 1',
  'bg-sidebar-icon-hover': '18, 18, 39, 1',
  'bg-sidebar-icon-selected': '252, 252, 252, 1',
  'bg-sidebar-item-hover': '252, 252, 252, 1',
  'bg-sidebar-item-selected': '0, 187, 255, 0.4',
  'bg-site-footer': '51, 57, 61, 1',
  'bg-site-footer-action': '171, 198, 216, 1',
  'bg-site-footer-action-hover': '199, 217, 229, 1',
  'bg-site-footer-action-active': '143, 179, 203, 1',
  'bg-site-footer-field': '89, 96, 99, 1',
  'bg-slider-handle': '252, 252, 252, 1',
  'bg-status-error': '189, 41, 71, 1',
  'bg-status-info': '252, 252, 252, 1',
  'bg-status-success': '123, 242, 151, 1',
  'bg-status-warning': '255, 212, 105, 1',
  'bg-tab': '51, 57, 61, 1',
  'bg-tab-hover': '89, 96, 99, 1',
  'bg-tab-selected': '240, 243, 247, 1',
  'bg-table-alt-row': '18, 18, 39, 1',
  'bg-table-header': '24, 24, 48, 1',
  'bg-table-row-hover': '70, 71, 101, 1',
  'bg-table-row-selected-expanded': '32, 54, 69, 1',
  'bg-table-selected-row': '45, 76, 97, 1',
  'bg-textarea-count': '252, 252, 252, 0.5',
  'bg-tile': '4, 4, 28, 1',
  'bg-tile-hover': '24, 24, 48, 1',
  'bg-tile-selected': '32, 54, 69, 1',
  'bg-tile-selected-hover': '45, 76, 97, 1',
  'bg-toggle-switch': '210, 208, 223, 1',
  'bg-toggle-switch-hover': '188, 186, 213, 1',
  'bg-toggle-switch-selected-disabled': '0, 75, 128, 1',
  'bg-transparent': '0, 0, 0, 0',
  'bg-accent1-primary': '109, 217, 202, 1',
  'bg-accent1-secondary': '174, 234, 226, 1',
  'bg-accent1-tertiary': '223, 247, 243, 1',
  'bg-accent2-primary': '95, 56, 206, 1',
  'bg-accent2-secondary': '184, 167, 233, 1',
  'bg-accent2-tertiary': '219, 211, 244, 1',
  'bg-accent3-primary': '255, 203, 105, 1',
  'bg-accent3-secondary': '251, 226, 185, 1',
  'bg-accent3-tertiary': '255, 243, 222, 1',
  'bg-accent4-primary': '255, 129, 87, 1',
  'bg-accent4-secondary': '255, 185, 162, 1',
  'bg-accent4-tertiary': '255, 227, 218, 1',
  'bg-accent5-primary': '4, 165, 245, 1',
  'bg-accent5-secondary': '85, 218, 255, 1',
  'bg-accent5-tertiary': '227, 247, 253, 1',
  'bg-accent6-primary': '255, 84, 165, 1',
  'bg-accent6-secondary': '255, 179, 215, 1',
  'bg-accent6-tertiary': '255, 217, 235, 1',
  'bg-accent7-primary': '37, 159, 159, 1',
  'bg-accent7-secondary': '155, 212, 214, 1',
  'bg-accent7-tertiary': '208, 239, 239, 1',
  'bg-accent8-primary': '86, 61, 130, 1',
  'bg-accent8-secondary': '199, 162, 204, 1',
  'bg-accent8-tertiary': '230, 214, 234, 1',
  'bg-accent9-primary': '255, 191, 63, 1',
  'bg-accent9-secondary': '254, 215, 142, 1',
  'bg-accent9-tertiary': '251, 226, 185, 1',
  'bg-accent10-primary': '237, 122, 35, 1',
  'bg-accent10-secondary': '241, 146, 85, 1',
  'bg-accent10-tertiary': '245, 187, 148, 1',
  'bg-date-picker-range': '32, 54, 69, 1',
  'text-primary': '252, 252, 252, 1',
  'text-secondary': '188, 186, 213, 1',
  'text-inverted-primary': '4, 4, 28, 1',
  'text-inverted-secondary': '107, 116, 125, 1',
  'text-black': '32, 54, 69, 1',
  'text-white': '252, 252, 252, 1',
  'text-brand': '176, 180, 181, 1',
  'text-danger-link': '255, 56, 97, 1',
  'text-danger-link-hover': '255, 71, 123, 1',
  'text-danger-link-active': '230, 50, 87, 1',
  'text-danger-link-focus': '255, 82, 136, 1',
  'text-danger-link-visited': '255, 56, 97, 1',
  'text-disabled': '70, 71, 101, 1',
  'text-error': '255, 56, 97, 1',
  'text-input-disabled': '176, 180, 181, 1',
  'text-input-placeholder': '89, 96, 99, 1',
  'text-link': '0, 187, 255, 1',
  'text-link-hover': '0, 204, 255, 1',
  'text-link-active': '4, 165, 245, 1',
  'text-link-focus': '0, 204, 255, 1',
  'text-link-visited': '128, 107, 255, 1',
  'text-on-action': '4, 4, 28, 1',
  'text-on-danger': '4, 4, 28, 1',
  'text-on-disabled': '4, 4, 28, 1',
  'text-sidebar-link': '188, 186, 213, 1',
  'text-sidebar-link-hover': '18, 18, 39, 1',
  'text-sidebar-link-selected': '252, 252, 252, 1',
  'text-site-footer-link': '171, 198, 216, 1',
  'text-site-footer-link-hover': '199, 217, 229, 1',
  'text-site-footer-link-active': '143, 179, 203, 1',
  'text-success': '89, 217, 119, 1',
  'text-inverted-success': '1, 128, 31, 1',
  'text-accent1-primary': '109, 217, 202, 1',
  'text-accent2-primary': '95, 56, 206, 1',
  'text-accent3-primary': '255, 203, 105, 1',
  'text-accent4-primary': '255, 129, 87, 1',
  'text-accent5-primary': '4, 165, 245, 1',
  'text-accent6-primary': '255, 71, 123, 1',
  'text-accent7-primary': '37, 159, 159, 1',
  'text-accent8-primary': '86, 61, 130, 1',
  'text-accent9-primary': '255, 191, 63, 1',
  'text-accent10-primary': '237, 122, 35, 1',
  'border-color-action': '0, 187, 255, 1',
  'border-color-action-hover': '0, 204, 255, 1',
  'border-color-action-active': '4, 165, 245, 1',
  'border-color-chip': '107, 116, 125, 1',
  'border-color-danger': '255, 56, 97, 1',
  'border-color-danger-hover': '255, 71, 123, 1',
  'border-color-danger-active': '230, 50, 87, 1',
  'border-color-divider': '32, 54, 69, 1',
  'border-color-divider-secondary': '51, 57, 61, 1',
  'border-color-input-field': '32, 54, 69, 1',
  'border-color-input-field-hover': '58, 98, 125, 1',
  'border-color-input-field-focus': '0, 187, 255, 1',
  'border-color-input-field-danger': '255, 56, 97, 1',
  'border-color-input-field-danger-hover': '255, 71, 123, 1',
  'border-color-input-field-danger-focus': '255, 56, 97, 1',
  'border-color-input-field-disabled': '4, 4, 28, 1',
  'border-color-secondary-btn-disabled': '70, 71, 101, 1',
  'border-color-sidebar-item-focus': '0, 187, 255, 1',
  'border-color-slider-handle': '107, 116, 125, 1',
  'border-color-success': '89, 217, 119, 1',
  'border-color-table-divider': '32, 54, 69, 1',
  'border-color-tile': '32, 54, 69, 1',
  'border-color-tile-hover': '58, 98, 125, 1',
  'border-color-tile-focus': '0, 187, 255, 1',
  'border-color-tile-selected-focus': '153, 192, 255, 1',
  'border-color-tile-selected': '153, 192, 255, 1',
  'border-color-tile-selected-hover': '178, 208, 255, 1',
  'border-color-notification-btn': '252, 252, 252, 1',
  'border-color-notification-btn-dark': '32, 54, 69, 1',
};

/* This file is generated by vega-design 2.0.77 */
const DarkModeBorderTokens = {
  'border-secondary-btn': '0, 187, 255, 1',
  'border-secondary-btn-hover': '0, 204, 255, 1',
  'border-secondary-danger-btn': '255, 56, 97, 1',
  'border-secondary-btn-active': '4, 165, 245, 1',
  'border-secondary-danger-btn-hover': '255, 71, 123, 1',
  'border-secondary-danger-btn-active': '230, 50, 87, 1',
  'border-input-field': '32, 54, 69, 1',
  'border-input-field-hover': '58, 98, 125, 1',
  'border-input-field-focus': '0, 187, 255, 1',
  'border-input-field-danger': '255, 56, 97, 1',
  'border-input-field-danger-hover': '255, 71, 123, 1',
  'border-input-field-danger-focus': '255, 56, 97, 1',
  'border-sidebar-item-focus': '0, 187, 255, 1',
  'border-input-field-disabled': '4, 4, 28, 1',
  'border-success': '89, 217, 119, 1',
  'border-secondary-btn-disabled': '70, 71, 101, 1',
  'border-chip': '107, 116, 125, 1',
  'border-divider': '32, 54, 69, 1',
  'border-divider-secondary': '51, 57, 61, 1',
  'border-tile-selected': '153, 192, 255, 1',
  'border-tile-selected-hover': '178, 208, 255, 1',
  'border-table-divider': '32, 54, 69, 1',
  'border-slider-handle': '107, 116, 125, 1',
  'border-tile': '32, 54, 69, 1',
  'border-tile-hover': '58, 98, 125, 1',
  'border-tile-focus': '0, 187, 255, 1',
  'border-tile-selected-focus': '153, 192, 255, 1',
  'border-notification-btn': '252, 252, 252, 1',
  'border-notification-btn-black': '32, 54, 69, 1',
};

/* This file is generated by vega-design 2.0.77 */
const DarkModeShadowTokens = {
  'shadow-card': '0px 2px 10px 0px rgba(0, 0, 0, 0.18), 0px 2px 4px 0px rgba(0, 0, 0, 0.1)',
  'shadow-modal': '0px 6px 40px 0px rgba(2, 2, 15, 0.14), 0px 4px 24px 0px rgba(2, 2, 15, 0.28), 0px 8px 80px 0px rgba(2, 2, 15, 0.26)',
  'shadow-popover': '0px 0px 88px 0px rgba(2, 2, 15, 0.08), 0px 0px 32px 0px rgba(2, 2, 15, 0.1), 0px 4px 72px 0px rgba(2, 2, 15, 0.16)',
  'shadow-form-field': '0px 1px 2px 0px rgba(170, 170, 170, 0.06), 0px 1px 3px 0px rgba(170, 170, 170, 0.1)',
  'shadow-dropdown-menu': '0px 2px 4px -2px rgba(0, 0, 0, 0.14), 0px 4px 6px -1px rgba(0, 0, 0, 0.16)',
  'shadow-app-header': '0px 1px 0px 0px rgba(188, 186, 213, 0.25)',
  'shadow-modal-header': '0px 1px 0px 0px rgba(188, 186, 213, 0.25)',
  'shadow-modal-footer': '0px -2px 8px 0px rgba(188, 186, 213, 0.4), 0px -1px 0px 0px rgba(188, 186, 213, 0.25)',
  'shadow-modal-footer-no-scroll': '0px -1px 0px 0px rgba(188, 186, 213, 0.25)',
};

/* This file is generated by vega-design 2.0.77 */
const DarkModeRingTokens = {
  'ring-input-focus': '0, 187, 255, 0.25',
  'ring-input-danger-focus': '255, 56, 97, 0.25',
  'ring-action-focus': '0, 187, 255, 0.25',
  'ring-action-danger-focus': '255, 56, 97, 0.25',
};

const formatValue$2 = (tinyColor) => {
  if (!tinyColor) {
    return '';
  }
  const { r, g, b, a } = tinyColor.toRgb();
  return `${r} ${g} ${b} / ${a}`;
};
const OverridableColorTokens = [
  {
    name: 'bg-action',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-action',
  },
  {
    name: 'bg-action-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-action-hover',
  },
  {
    name: 'bg-action-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-action-focus',
  },
  {
    name: 'bg-action-active',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-action-active',
  },
  {
    name: 'bg-action-secondary-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.15);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-action-secondary-hover',
  },
  {
    name: 'bg-action-secondary-active',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(20);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-20);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.15);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-action-secondary-active',
  },
  {
    name: 'bg-divider',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-divider',
  },
  {
    name: 'bg-keypad-btn-active',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.3);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-keypad-btn-active',
  },
  {
    name: 'bg-selected',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.25);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-selected',
  },
  {
    name: 'bg-sidebar',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['sidebarColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-sidebar',
  },
  {
    name: 'bg-sidebar-item-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['sidebarColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
      }
      else {
        value = tinycolor({ a: 0.86, r: 15, b: 15, g: 15 });
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-sidebar-item-hover',
  },
  {
    name: 'bg-sidebar-item-selected',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.4);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-sidebar-item-selected',
  },
  {
    name: 'bg-table-selected-row',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.2);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-table-selected-row',
  },
  {
    name: 'bg-toggle-switch-selected-disabled',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.5);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-toggle-switch-selected-disabled',
  },
  {
    name: 'bg-date-picker-range',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.15);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-bg-date-picker-range',
  },
  {
    name: 'text-link',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-text-link',
  },
  {
    name: 'text-link-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-text-link-hover',
  },
  {
    name: 'text-link-active',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-text-link-active',
  },
  {
    name: 'text-link-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-text-link-focus',
  },
  {
    name: 'text-link-visited',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(20);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-22);
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-text-link-visited',
  },
  {
    name: 'text-sidebar-link',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['sidebarColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = tinycolor({ a: 0.9, b: 255, r: 255, g: 255 });
      }
      else {
        value = tinycolor({ a: 0.86, b: 15, r: 15, g: 15 });
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-text-sidebar-link',
  },
  {
    name: 'text-sidebar-link-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['sidebarColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = tinycolor({ a: 0.86, r: 15, b: 15, g: 15 });
      }
      else {
        value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-text-sidebar-link-hover',
  },
  {
    name: 'text-sidebar-link-selected',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['sidebarColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = tinycolor({ a: 0.9, r: 255, b: 255, g: 255 });
      }
      else {
        value = tinycolor({ a: 0.86, b: 15, r: 15, g: 15 });
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-text-sidebar-link-selected',
  },
  {
    name: 'border-color-action',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-action',
  },
  {
    name: 'border-color-action-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-action-hover',
  },
  {
    name: 'border-color-action-active',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-action-active',
  },
  {
    name: 'border-color-divider',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-divider',
  },
  {
    name: 'border-color-divider-secondary',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.4);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-divider-secondary',
  },
  {
    name: 'border-color-input-field',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-input-field',
  },
  {
    name: 'border-color-input-field-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-input-field-hover',
  },
  {
    name: 'border-color-input-field-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-input-field-focus',
  },
  {
    name: 'border-color-input-field-disabled',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = tinycolor({ a: 0.2, r: 15, b: 15, g: 15 });
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-input-field-disabled',
  },
  {
    name: 'border-color-tile-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-tile-focus',
  },
  {
    name: 'border-color-tile-selected-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-tile-selected-focus',
  },
  {
    name: 'border-color-tile-selected',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-tile-selected',
  },
  {
    name: 'border-color-tile-selected-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      return formatValue$2(value);
    },
  },
  {
    name: 'dark-border-color-tile-selected-hover',
  },
];

const formatValue$1 = (tinyColor) => {
  if (!tinyColor) {
    return '';
  }
  const { r, g, b, a } = tinyColor.toRgb();
  return `${r} ${g} ${b} / ${a}`;
};
const OverridableBorderTokens = [
  {
    name: 'border-secondary-btn',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-secondary-btn',
  },
  {
    name: 'border-secondary-btn-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-secondary-btn-hover',
  },
  {
    name: 'border-secondary-btn-active',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-secondary-btn-active',
  },
  {
    name: 'border-input-field',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-input-field',
  },
  {
    name: 'border-input-field-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-input-field-hover',
  },
  {
    name: 'border-input-field-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-input-field-focus',
  },
  {
    name: 'border-input-field-disabled',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = tinycolor({ a: 0.2, r: 15, b: 15, g: 15 });
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-input-field-disabled',
  },
  {
    name: 'border-divider',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-divider',
  },
  {
    name: 'border-divider-secondary',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.4);
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-divider-secondary',
  },
  {
    name: 'border-tile-selected',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-tile-selected',
  },
  {
    name: 'border-tile-selected-hover',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(10);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-10);
      }
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-tile-selected-hover',
  },
  {
    name: 'border-tile-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-tile-focus',
  },
  {
    name: 'border-tile-selected-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      if (baseColor === null || baseColor === void 0 ? void 0 : baseColor.isDark()) {
        value = value === null || value === void 0 ? void 0 : value.lighten(15);
      }
      else {
        value = value === null || value === void 0 ? void 0 : value.lighten(-15);
      }
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.6);
      return formatValue$1(value);
    },
  },
  {
    name: 'dark-border-tile-selected-focus',
  },
];

const formatValue = (tinyColor) => {
  if (!tinyColor) {
    return '';
  }
  const { r, g, b, a } = tinyColor.toRgb();
  return `${r} ${g} ${b} / ${a}`;
};
const OverridableRingTokens = [
  {
    name: 'ring-input-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.25);
      return formatValue(value);
    },
  },
  {
    name: 'dark-ring-input-focus',
  },
  {
    name: 'ring-action-focus',
    overrideGetter: (overrideColors, tinycolor) => {
      const overrideBaseColor = overrideColors['actionColor'];
      if (!overrideBaseColor) {
        return '';
      }
      const baseColor = overrideBaseColor
        ? tinycolor(overrideBaseColor)
        : undefined;
      let value = baseColor
        ? baseColor.clone()
        : undefined;
      value = value === null || value === void 0 ? void 0 : value.setAlpha(0.25);
      return formatValue(value);
    },
  },
  {
    name: 'dark-ring-action-focus',
  },
];

/**
 * Vega components color override controller
 */
class ColorSchemaOverridingController {
  /**
   * It takes a color and generates a bunch of other colors based on that color
   *
   * @param {VegaThemeOverrideColors} overrideColors - OverrideColors - This is the object that is passed in from the user.
   * @returns {OverrideColor[]} Parsed action colors
   */
  generateOverrideThemes(overrideColors) {
    return this.getOverridableTokens().map((item) => {
      return {
        name: item.name,
        value: this.parseCssVarValue(item, overrideColors),
      };
    });
  }
  /**
   * Set the custom override theme colors to customOverrideThemeStyleContainer
   *
   * @param {OverrideColor[]} overrideThemes Parsed custom override colors
   */
  applyTheme(overrideThemes) {
    const styleString = `
		:root {
		\t\t${overrideThemes
      .filter((item) => {
      return !!item.value;
    })
      .map((item) => `--v-${item.name}: ${item.value};`)
      .join('\n\t\t')}
		}
						`;
    this.getOverrideThemeContainer().innerHTML = index.htmlSanitizer.sanitize(styleString, index.styleSanitizeStrategy);
  }
  /* eslint-disable no-restricted-globals */
  /**
   * It creates a customOverrideTheme style tag in the head of the document if it doesn't exist, and returns it
   *
   * @returns {Element} The customOverrideThemeStyleContainer is being returned.
   */
  getOverrideThemeContainer() {
    let customOverrideThemeStyleContainer = document.head.querySelector(`#vegaCustomOverrideTheme`);
    if (!customOverrideThemeStyleContainer) {
      customOverrideThemeStyleContainer = document.createElement('style');
      customOverrideThemeStyleContainer.id = 'vegaCustomOverrideTheme';
      if (vegaNonceManager.vegaNonceManager.nonce) {
        customOverrideThemeStyleContainer.setAttribute('nonce', vegaNonceManager.vegaNonceManager.nonce);
      }
      document.head.append(customOverrideThemeStyleContainer);
    }
    return customOverrideThemeStyleContainer;
  }
  /* eslint-enable no-restricted-globals */
  /**
   * Get the overridable color tokens from design token
   *
   * @returns {OverridableToken[]} overridable action color token array
   */
  getOverridableTokens() {
    return [...OverridableColorTokens, ...OverridableBorderTokens, ...OverridableRingTokens];
  }
  /**
   * Calculate and parse color to css var value
   *
   * @param {OverridableToken} overrideColorToken The token will be overridden
   * @param {VegaThemeOverrideColors} overrideColors the payload of override colors
   * @returns {Nullable<string>} The css var value
   */
  parseCssVarValue(overrideColorToken, overrideColors) {
    var _a;
    return (_a = overrideColorToken.overrideGetter) === null || _a === void 0 ? void 0 : _a.call(overrideColorToken, overrideColors, tinycolorPolyfill.tinycolor);
  }
}
const VegaColorSchemaOverridingController = new ColorSchemaOverridingController();

/* This file is generated by vega-design 2.0.80 */
const LightModeBorderTokens = {
  'border-secondary-btn': '38, 42, 255, 1',
  'border-secondary-btn-hover': '61, 64, 255, 1',
  'border-secondary-danger-btn': '230, 50, 87, 1',
  'border-secondary-btn-active': '23, 26, 232, 1',
  'border-secondary-danger-btn-hover': '255, 87, 114, 1',
  'border-secondary-danger-btn-active': '189, 41, 71, 1',
  'border-input-field': '171, 198, 216, 1',
  'border-input-field-hover': '115, 160, 190, 1',
  'border-input-field-focus': '38, 42, 255, 1',
  'border-input-field-danger': '230, 50, 87, 1',
  'border-input-field-danger-hover': '255, 87, 114, 1',
  'border-input-field-danger-focus': '233, 71, 104, 1',
  'border-sidebar-item-focus': '38, 42, 255, 1',
  'border-input-field-disabled': '222, 225, 227, 1',
  'border-success': '1, 128, 31, 1',
  'border-secondary-btn-disabled': '176, 180, 181, 1',
  'border-chip': '205, 209, 211, 1',
  'border-divider': '171, 198, 216, 1',
  'border-divider-secondary': '199, 217, 229, 1',
  'border-tile-selected': '38, 42, 255, 1',
  'border-tile-selected-hover': '61, 64, 255, 1',
  'border-table-divider': '171, 198, 216, 1',
  'border-slider-handle': '199, 217, 229, 1',
  'border-tile': '171, 198, 216, 1',
  'border-tile-hover': '115, 160, 190, 1',
  'border-tile-focus': '38, 42, 255, 1',
  'border-tile-selected-focus': '38, 42, 255, 1',
  'border-notification-btn': '32, 54, 69, 1',
  'border-notification-btn-black': '32, 54, 69, 1',
};

/* This file is generated by vega-design 2.0.80 */
const LightModeShadowTokens = {
  'shadow-card': '0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.02)',
  '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': '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': '0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.1)',
  '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': '0px 1px 0px 0px rgba(45, 76, 97, 0.15)',
  'shadow-modal-header': '0px 1px 0px 0px rgba(45, 76, 97, 0.15)',
  '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': '0px -1px 0px 0px rgba(45, 76, 97, 0.15)',
};

/* This file is generated by vega-design 2.0.80 */
const LightModeColorTokens = {
  'bg-brand': '51, 57, 61, 1',
  'bg-page': '240, 243, 247, 1',
  'bg-primary': '252, 252, 252, 1',
  'bg-secondary': '245, 247, 247, 1',
  'bg-tertiary': '240, 243, 247, 1',
  'bg-quaternary': '241, 248, 251, 1',
  'bg-inverted-primary': '4, 4, 28, 1',
  'bg-inverted-secondary': '18, 18, 39, 1',
  'bg-inverted-tertiary': '24, 24, 48, 1',
  'bg-inverted-quaternary': '70, 71, 101, 1',
  'bg-action': '38, 42, 255, 1',
  'bg-action-hover': '61, 64, 255, 1',
  'bg-action-focus': '38, 42, 255, 1',
  'bg-action-active': '23, 26, 232, 1',
  'bg-action-quaternary': '222, 225, 227, 1',
  'bg-action-quaternary-hover': '239, 239, 239, 1',
  'bg-action-quaternary-active': '205, 209, 211, 1',
  'bg-action-secondary': '252, 252, 252, 1',
  'bg-action-secondary-hover': '235, 235, 255, 1',
  'bg-action-secondary-active': '219, 220, 255, 1',
  'bg-action-tertiary': '0, 0, 0, 0',
  'bg-action-tertiary-hover': '4, 4, 28, 0.05',
  'bg-action-tertiary-active': '4, 4, 28, 0.1',
  'bg-app-header': '240, 243, 247, 0.88',
  'bg-backdrop-modal': '18, 18, 39, 0.85',
  'bg-backdrop-popover': '32, 54, 69, 0.16',
  'bg-backdrop-sidebar': '18, 18, 39, 0.85',
  'bg-chip': '32, 54, 69, 0.06',
  'bg-chip-hover': '32, 54, 69, 0.12',
  'bg-chip-active': '32, 54, 69, 0.2',
  'bg-danger': '189, 41, 71, 1',
  'bg-danger-hover': '233, 71, 104, 1',
  'bg-danger-focus': '189, 41, 71, 1',
  'bg-danger-active': '230, 50, 87, 1',
  'bg-danger-tertiary': '0, 0, 0, 0',
  'bg-danger-tertiary-hover': '255, 87, 114, 0.2',
  'bg-danger-tertiary-active': '189, 41, 71, 0.2',
  'bg-disabled': '176, 180, 181, 1',
  'bg-divider': '171, 198, 216, 1',
  'bg-divider-secondary': '199, 217, 229, 1',
  'bg-keypad-btn-active': '229, 239, 255, 1',
  'bg-loading-progress': '153, 192, 255, 1',
  'bg-loading-track': '229, 239, 255, 1',
  'bg-segment-hover': '205, 209, 211, 1',
  'bg-segment-control': '89, 96, 99, 0.1',
  'bg-selected': '0, 151, 255, 0.3',
  'bg-sidebar': '18, 18, 39, 1',
  'bg-sidebar-icon': '188, 186, 213, 1',
  'bg-sidebar-icon-hover': '18, 18, 39, 1',
  'bg-sidebar-icon-selected': '252, 252, 252, 1',
  'bg-sidebar-item-hover': '252, 252, 252, 1',
  'bg-sidebar-item-selected': '19, 98, 226, 0.4',
  'bg-site-footer': '51, 57, 61, 1',
  'bg-site-footer-action': '171, 198, 216, 1',
  'bg-site-footer-action-hover': '199, 217, 229, 1',
  'bg-site-footer-action-active': '143, 179, 203, 1',
  'bg-site-footer-field': '89, 96, 99, 1',
  'bg-slider-handle': '252, 252, 252, 1',
  'bg-status-error': '255, 110, 139, 1',
  'bg-status-info': '205, 209, 211, 1',
  'bg-status-success': '160, 233, 167, 1',
  'bg-status-warning': '255, 220, 131, 1',
  'bg-tab': '240, 243, 247, 1',
  'bg-tab-hover': '245, 247, 247, 1',
  'bg-tab-selected': '32, 54, 69, 1',
  'bg-table-alt-row': '245, 247, 247, 1',
  'bg-table-header': '240, 243, 247, 1',
  'bg-table-row-hover': '241, 248, 251, 1',
  'bg-table-row-selected-expanded': '229, 239, 255, 1',
  'bg-table-selected-row': '204, 223, 255, 1',
  'bg-textarea-count': '4, 4, 28, 0.6',
  'bg-tile': '252, 252, 252, 1',
  'bg-tile-hover': '245, 247, 247, 1',
  'bg-tile-selected': '242, 247, 255, 1',
  'bg-tile-selected-hover': '229, 239, 255, 1',
  'bg-toggle-switch': '107, 116, 125, 0.7',
  'bg-toggle-switch-hover': '107, 116, 125, 1',
  'bg-toggle-switch-selected-disabled': '153, 192, 255, 1',
  'bg-transparent': '0, 0, 0, 0',
  'bg-accent1-primary': '115, 230, 220, 1',
  'bg-accent1-secondary': '193, 244, 239, 1',
  'bg-accent1-tertiary': '224, 249, 247, 1',
  'bg-accent2-primary': '128, 107, 255, 1',
  'bg-accent2-secondary': '199, 189, 255, 1',
  'bg-accent2-tertiary': '227, 222, 255, 1',
  'bg-accent3-primary': '255, 220, 131, 1',
  'bg-accent3-secondary': '255, 239, 200, 1',
  'bg-accent3-tertiary': '255, 247, 227, 1',
  'bg-accent4-primary': '255, 149, 113, 1',
  'bg-accent4-secondary': '255, 208, 192, 1',
  'bg-accent4-tertiary': '255, 231, 223, 1',
  'bg-accent5-primary': '0, 187, 255, 1',
  'bg-accent5-secondary': '142, 223, 249, 1',
  'bg-accent5-tertiary': '227, 247, 253, 1',
  'bg-accent6-primary': '255, 130, 201, 1',
  'bg-accent6-secondary': '255, 199, 231, 1',
  'bg-accent6-tertiary': '255, 227, 243, 1',
  'bg-accent7-primary': '37, 159, 159, 1',
  'bg-accent7-secondary': '155, 212, 214, 1',
  'bg-accent7-tertiary': '208, 239, 239, 1',
  'bg-accent8-primary': '86, 61, 130, 1',
  'bg-accent8-secondary': '199, 162, 204, 1',
  'bg-accent8-tertiary': '230, 214, 234, 1',
  'bg-accent9-primary': '255, 191, 63, 1',
  'bg-accent9-secondary': '254, 215, 142, 1',
  'bg-accent9-tertiary': '251, 226, 185, 1',
  'bg-accent10-primary': '237, 122, 35, 1',
  'bg-accent10-secondary': '241, 146, 85, 1',
  'bg-accent10-tertiary': '245, 187, 148, 1',
  'bg-date-picker-range': '229, 239, 255, 1',
  'text-primary': '4, 4, 28, 0.95',
  'text-secondary': '4, 4, 28, 0.64',
  'text-inverted-primary': '252, 252, 254, 0.9',
  'text-inverted-secondary': '252, 252, 254, 0.64',
  'text-black': '4, 4, 28, 0.95',
  'text-white': '252, 252, 254, 0.9',
  'text-brand': '51, 57, 61, 1',
  'text-danger-link': '230, 50, 87, 1',
  'text-danger-link-hover': '233, 71, 104, 1',
  'text-danger-link-active': '189, 41, 71, 1',
  'text-danger-link-focus': '240, 52, 91, 1',
  'text-danger-link-visited': '230, 50, 87, 1',
  'text-disabled': '4, 4, 28, 0.35',
  'text-error': '189, 41, 71, 1',
  'text-input-disabled': '4, 4, 28, 0.35',
  'text-input-placeholder': '4, 4, 28, 0.58',
  'text-link': '38, 42, 255, 1',
  'text-link-hover': '61, 64, 255, 1',
  'text-link-active': '23, 26, 232, 1',
  'text-link-focus': '38, 42, 255, 1',
  'text-link-visited': '95, 56, 206, 1',
  'text-on-action': '252, 252, 254, 0.9',
  'text-on-danger': '252, 252, 254, 0.9',
  'text-on-disabled': '252, 252, 254, 0.9',
  'text-sidebar-link': '188, 186, 213, 1',
  'text-sidebar-link-hover': '18, 18, 39, 1',
  'text-sidebar-link-selected': '252, 252, 252, 1',
  'text-site-footer-link': '171, 198, 216, 1',
  'text-site-footer-link-hover': '199, 217, 229, 1',
  'text-site-footer-link-active': '143, 179, 203, 1',
  'text-success': '1, 128, 31, 1',
  'text-inverted-success': '89, 217, 119, 1',
  'text-accent1-primary': '115, 230, 220, 1',
  'text-accent2-primary': '128, 107, 255, 1',
  'text-accent3-primary': '255, 220, 131, 1',
  'text-accent4-primary': '255, 149, 113, 1',
  'text-accent5-primary': '0, 187, 255, 1',
  'text-accent6-primary': '240, 52, 91, 1',
  'text-accent7-primary': '37, 159, 159, 1',
  'text-accent8-primary': '86, 61, 130, 1',
  'text-accent9-primary': '255, 191, 63, 1',
  'text-accent10-primary': '237, 122, 35, 1',
  'border-color-action': '38, 42, 255, 1',
  'border-color-action-hover': '61, 64, 255, 1',
  'border-color-action-active': '23, 26, 232, 1',
  'border-color-chip': '205, 209, 211, 1',
  'border-color-danger': '230, 50, 87, 1',
  'border-color-danger-hover': '255, 87, 114, 1',
  'border-color-danger-active': '189, 41, 71, 1',
  'border-color-divider': '171, 198, 216, 1',
  'border-color-divider-secondary': '199, 217, 229, 1',
  'border-color-input-field': '171, 198, 216, 1',
  'border-color-input-field-hover': '115, 160, 190, 1',
  'border-color-input-field-focus': '38, 42, 255, 1',
  'border-color-input-field-danger': '230, 50, 87, 1',
  'border-color-input-field-danger-hover': '255, 87, 114, 1',
  'border-color-input-field-danger-focus': '233, 71, 104, 1',
  'border-color-input-field-disabled': '222, 225, 227, 1',
  'border-color-secondary-btn-disabled': '176, 180, 181, 1',
  'border-color-sidebar-item-focus': '38, 42, 255, 1',
  'border-color-slider-handle': '199, 217, 229, 1',
  'border-color-success': '1, 128, 31, 1',
  'border-color-table-divider': '171, 198, 216, 1',
  'border-color-tile': '171, 198, 216, 1',
  'border-color-tile-hover': '115, 160, 190, 1',
  'border-color-tile-focus': '38, 42, 255, 1',
  'border-color-tile-selected-focus': '38, 42, 255, 1',
  'border-color-tile-selected': '38, 42, 255, 1',
  'border-color-tile-selected-hover': '61, 64, 255, 1',
  'border-color-notification-btn': '32, 54, 69, 1',
  'border-color-notification-btn-dark': '32, 54, 69, 1',
};

/**
 * StyleController Abstract class control the theme style controller
 */
class StyleControllerAbstract {
  /* eslint-disable no-restricted-globals */
  /**
   * It creates a style tag in the head of the document if it doesn't exist, and returns it.
   *
   * @param {string} themeStyleContainerKey - custom dark mode color
   * @returns {Element} The style element is being returned.
   */
  getStyleContainer(themeStyleContainerKey) {
    let vegaThemeStyleContainer = document.head.querySelector(`#${themeStyleContainerKey}`);
    if (!vegaThemeStyleContainer) {
      vegaThemeStyleContainer = document.createElement('style');
      vegaThemeStyleContainer.id = themeStyleContainerKey;
      if (vegaNonceManager.vegaNonceManager.nonce) {
        vegaThemeStyleContainer.setAttribute('nonce', vegaNonceManager.vegaNonceManager.nonce);
      }
      document.head.append(vegaThemeStyleContainer);
    }
    return vegaThemeStyleContainer;
  }
  /* eslint-enable no-restricted-globals */
  /**
   * Remove the style element.
   *
   * @param {string} themeStyleContainerKey - theme style container key.
   */
  reset(themeStyleContainerKey) {
    // eslint-disable-next-line no-restricted-globals
    const vegaThemeStyleContainer = document.head.querySelector(`#${themeStyleContainerKey}`);
    if (vegaThemeStyleContainer) {
      vegaThemeStyleContainer.remove();
    }
  }
}

/**
 * Vega components brand style controller
 */
class BrandStyleController extends StyleControllerAbstract {
  constructor() {
    super();
    this.tokens = {};
    this.themeStyleContainerKey = 'vega-brand-theme';
    this.observer = new observer.Observer(this.isAcceptObserver.bind(this), (options) => {
      if (options === 'heartland') {
        this.reset(this.themeStyleContainerKey);
      }
      else {
        this.generateThemeStyle();
      }
      const isDarkMode = VegaInternalThemeManager.isDarkMode();
      if (isDarkMode) {
        changeManager.ChangeManager.notify(staticSubjectTitle.DARK_MODE_CHANGE, isDarkMode);
      }
    });
    changeManager.ChangeManager.register(staticSubjectTitle.GP_BRAND_CHANGE, this.observer);
  }
  /**
   * It generates a CSS style for light mode to override the style.
   */
  generateThemeStyle() {
    this.tokens = Object.assign(LightModeColorTokens, LightModeBorderTokens, LightModeShadowTokens);
    const keys = Object.keys(this.tokens);
    const styleString = `
:root {
\t\t${keys.map((key) => `--v-${key}: ${this.tokens[key]};`).join('\n\t\t')}}`;
    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = index.htmlSanitizer.sanitize(styleString, index.styleSanitizeStrategy);
  }
  /**
   * Determines whether the observer should accept changes.
   *
   * @returns {boolean} Always returns true in the current implementation.
   */
  isAcceptObserver() {
    return true;
  }
}
new BrandStyleController();

/**
 * Vega components controller to control the internal theme manager
 */
class InternalThemeManager {
  constructor() {
    this.currentBranding = 'heartland';
  }
  /**
   * It takes the colors you passed in, parses them into the correct format, and then applies them to the theme
   *
   * @param {VegaThemeOverrideColors} overrideColors - OverrideColors - This is the object that you pass to the function.
   */
  overrideColors(overrideColors) {
    const overrideThemes = VegaColorSchemaOverridingController.generateOverrideThemes(overrideColors);
    VegaColorSchemaOverridingController.applyTheme(overrideThemes);
  }
  /**
   * It removes all the custom override theme styles from the DOM
   */
  reset() {
    VegaColorSchemaOverridingController.getOverrideThemeContainer().innerHTML = index.htmlSanitizer.sanitize('', index.emptySanitizeStrategy);
  }
  /* eslint-disable no-restricted-globals */
  /**
   * This function toggles the dark mode of a webpage by adding or removing a 'dark' class to the HTML element.
   *
   * @param {boolean | undefined} darkMode - A boolean or undefined value that determines whether to enable or disable dark mode.
   * If it is true, dark mode is enabled.
   * If it is false, dark mode is disabled.
   */
  toggleDarkMode(darkMode) {
    if (darkMode) {
      document.documentElement.classList.add('dark');
    }
    else {
      document.documentElement.classList.remove('dark');
    }
    changeManager.ChangeManager.notify(staticSubjectTitle.DARK_MODE_CHANGE, darkMode);
  }
  /* eslint-enable no-restricted-globals */
  /**
   * The function checks if the HTML element has a class of "dark" and returns a boolean value accordingly.
   *
   * @returns {boolean} A boolean value indicating whether the HTML element has a class of "dark", which is
   * typically used to indicate that the website is in dark mode.
   */
  isDarkMode() {
    // eslint-disable-next-line no-restricted-globals
    return document.documentElement.classList.contains('dark');
  }
  /**
   * This function return the new brand name.
   *
   * @returns {BrandOptions} return the new brand options.
   */
  getBranding() {
    return this.currentBranding;
  }
  /**
   * This function switches the Vega theme to a brand theme based on the provided options.
   *
   * @param {BrandOptions} options - The options includes 'gp', 'genius' and 'heartland' options
   */
  applyBranding(options) {
    this.currentBranding = options;
    changeManager.ChangeManager.notify(staticSubjectTitle.GP_BRAND_CHANGE, options);
  }
}
const VegaInternalThemeManager = new InternalThemeManager();

// TODO: Remove this after the token add in vega design.
const CustomDarkModeColorTokens = {
  'bg-backdrop-loading': '0, 0, 0, 0.5',
  'text-page-notification-content': DarkModeColorTokens['text-inverted-primary'],
  'bg-textarea-counter-exceed-max-length': '255, 87, 114',
  'bg-date-picker-range': '32, 54, 69, 1',
  'regular-credit-card-bg': '252, 252, 252, 1',
  'regular-credit-card-top': '4, 4, 28, 1',
  'regular-credit-card-bottom': '255, 255, 255, 1',
};
/**
 * Vega components dark mode style controller
 */
class DarkModeStyleController extends StyleControllerAbstract {
  constructor() {
    super();
    this.dynamicCustomDarkModeColor = {};
    this.themeStyleContainerKey = 'vegaDarkModeStyle';
    this.darkModeColorAllTokens = {};
    this.observer = new observer.Observer(this.isAcceptObserver.bind(this), (isDark) => {
      if (isDark) {
        this.generateThemeStyle();
      }
      else {
        this.reset(this.themeStyleContainerKey);
      }
    });
    changeManager.ChangeManager.register(staticSubjectTitle.DARK_MODE_CHANGE, this.observer);
  }
  /**
   * This method dynamically registers a custom dark color.
   *
   * @param {Record<string, string>} customDarkModeColor - custom dark mode color
   */
  registerCustomDarkModeColor(customDarkModeColor) {
    this.dynamicCustomDarkModeColor = Object.assign(Object.assign({}, this.dynamicCustomDarkModeColor), customDarkModeColor);
    this.generateThemeStyle();
  }
  /**
   * It generates a CSS style for dark mode to override the style.
   */
  generateThemeStyle() {
    const newBrandTokens = Object.assign(DarkModeColorTokens$1, DarkModeBorderTokens$1, DarkModeShadowTokens$1, DarkModeRingTokens$1);
    const oldTokens = Object.assign(DarkModeColorTokens, DarkModeBorderTokens, DarkModeRingTokens, DarkModeShadowTokens);
    this.darkModeColorAllTokens = Object.assign(VegaInternalThemeManager.getBranding() === 'heartland' ? oldTokens : newBrandTokens, CustomDarkModeColorTokens, this.dynamicCustomDarkModeColor);
    const keys = Object.keys(this.darkModeColorAllTokens);
    const styleString = `
html.dark {
\t\t${keys.map((key) => `--v-${key}: ${this.darkModeColorAllTokens[key]};`).join('\n\t\t')}}`;
    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = index.htmlSanitizer.sanitize(styleString, index.styleSanitizeStrategy);
  }
  /**
   * Determines whether the observer should accept changes.
   *
   * @returns {boolean} Always returns true in the current implementation.
   */
  isAcceptObserver() {
    return true;
  }
}
const VegaDarkModeStyleController = new DarkModeStyleController();

exports.VegaDarkModeStyleController = VegaDarkModeStyleController;
exports.VegaInternalThemeManager = VegaInternalThemeManager;
