@heartlandone/vega-sandbox-pr-1497-57e6afceba354f931d1c319e0452c5f6271848ff 2.27.0

package/dist/collection/constants/runtime-metrics-payload-definition/vega-nav-card/runtime-metrics-payload-definition.js

@@ -0,0 +1,26 @@
+export const VegaNavCardRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the nav card',
+    /**
+     * The function checks if the length `source` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !host.source || host.source.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the nav card',
+    /**
+     * The function checks if the length `source` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => !!host.source && host.source.length > 0,
+  },
+];

package/dist/collection/constants/runtime-metrics-payload-definition/vega-progress-tracker/runtime-metrics-payload-definition.js

@@ -0,0 +1,26 @@
+export const VegaProgressTrackerRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'COMPLETED_STEP_ARRAY_IS_EMPTY',
+    payloadDescription: '@deprecated Specifies an array of completed step titles for the Progress Tracker component.',
+    /**
+     * The function checks if the length of `completedStepArray` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.completedStepArray.length === 0,
+  },
+  {
+    payloadKey: 'COMPLETED_STEP_ARRAY_IS_NOT_EMPTY',
+    payloadDescription: '@deprecated Specifies an array of completed step titles for the Progress Tracker component.',
+    /**
+     * The function checks if the length of `completedStepArray` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.completedStepArray.length > 0,
+  },
+];

package/dist/collection/constants/runtime-metrics-payload-definition/vega-stepper/runtime-metrics-payload-definition.js

@@ -0,0 +1,50 @@
+export const VegaStepperRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for the stepper component',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === true,
+  },
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_FALSE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for the stepper component',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === false,
+  },
+  {
+    payloadKey: 'BUTTON_VARIANT_IS_PRIMARY',
+    payloadDescription: 'Specifies the style variant for the stepper buttons.',
+    /**
+     * The function checks if the `buttonVariant` property of the `host` element is equal to 'primary'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.buttonVariant === 'primary',
+  },
+  {
+    payloadKey: 'BUTTON_VARIANT_IS_SECONDARY',
+    payloadDescription: 'Specifies the style variant for the stepper buttons.',
+    /**
+     * The function checks if the `buttonVariant` property of the `host` element is equal to 'secondary'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.buttonVariant === 'secondary',
+  },
+];

package/dist/collection/constants/runtime-metrics-payload-definition/vega-tab-group/runtime-metrics-payload-definition.js

@@ -0,0 +1,26 @@
+export const VegaTabGroupRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'VARIANT_IS_PRIMARY',
+    payloadDescription: 'Specifies the visual style and prominence of the tab group',
+    /**
+     * The function checks if the `variant` property of the `host` element is equal to 'primary'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.variant === 'primary',
+  },
+  {
+    payloadKey: 'VARIANT_IS_SECONDARY',
+    payloadDescription: 'Specifies the visual style and prominence of the tab group',
+    /**
+     * The function checks if the `variant` property of the `host` element is equal to 'secondary'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.variant === 'secondary',
+  },
+];

package/dist/collection/constants/runtime-metrics-payload-definition/vega-table/runtime-metrics-payload-definition.js

@@ -0,0 +1,26 @@
+export const VegaTableRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the table',
+    /**
+     * The function checks if the length `dataSource` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.dataSource.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the table',
+    /**
+     * The function checks if the length `dataSource` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.dataSource.length > 0,
+  },
+];

package/dist/collection/constants/runtime-metrics-payload-definition/vega-textarea/runtime-metrics-payload-definition.js

@@ -0,0 +1,26 @@
+export const VegaTextareaRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for the text area',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === true,
+  },
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_FALSE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for the text area',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === false,
+  },
+];

package/dist/collection/constants/runtime-metrics-payload-definition/vega-time-picker/runtime-metrics-payload-definition.js

@@ -0,0 +1,50 @@
+export const VegaTimePickerRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for the time picker during user input',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === true,
+  },
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_FALSE',
+    payloadDescription: 'Determines whether automatic validation should be implemented for the time picker during user input',
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === false,
+  },
+  {
+    payloadKey: 'MODE_IS_SINGLE',
+    payloadDescription: 'Specifies the mode for selecting time in the time picker, `single` indicates the ability to select a single time.',
+    /**
+     * The function checks if the `mode` property of the `host` element is equal to 'single'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.mode === 'single',
+  },
+  {
+    payloadKey: 'MODE_IS_RANGE',
+    payloadDescription: 'Specifies the mode for selecting time in the time picker, `range` indicates the ability to select a time range',
+    /**
+     * The function checks if the `mode` property of the `host` element is equal to 'range'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.mode === 'range',
+  },
+];

package/dist/collection/constants/runtime-metrics-payload-definition/vega-tooltip/runtime-metrics-payload-definition.js

@@ -0,0 +1,26 @@
+export const VegaTooltipRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'CONTENT_IS_EMPTY',
+    payloadDescription: '@deprecated Specifies the content that is displayed inside the tooltip.',
+    /**
+     * The function checks if the `content` property of the `host` element is equal to 'undefined' or empty string.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.content === undefined || host.content === '',
+  },
+  {
+    payloadKey: 'CONTENT_IS_NOT_EMPTY',
+    payloadDescription: '@deprecated Specifies the content that is displayed inside the tooltip.',
+    /**
+     * The function checks if the `content` property of the `host` element is not equal to 'undefined' and empty string.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.content !== undefined && host.content !== '',
+  },
+];

package/dist/collection/constants/tests/validator.test.js

@@ -0,0 +1,24 @@
+import { EMAIL_VALIDATION_REGEX } from '../validator';
+describe('validator', () => {
+  it('should work proper while use EMAIL_VALIDATION_REGEX', async () => {
+    expect(EMAIL_VALIDATION_REGEX.test('simple@example.com')).toEqual(true);
+    expect(EMAIL_VALIDATION_REGEX.test('very.common@example.com')).toEqual(true);
+    expect(EMAIL_VALIDATION_REGEX.test('disposable.style.email.with+symbol@example.com')).toEqual(true);
+    expect(EMAIL_VALIDATION_REGEX.test('other.email-with-hyphen@example.com')).toEqual(true);
+    expect(EMAIL_VALIDATION_REGEX.test('fully-qualified-domain@example.com')).toEqual(true);
+    expect(EMAIL_VALIDATION_REGEX.test('user.name+tag+sorting@example.com')).toEqual(true);
+    expect(EMAIL_VALIDATION_REGEX.test('x@example.com')).toEqual(true);
+    expect(EMAIL_VALIDATION_REGEX.test('example-indeed@strange-example.com')).toEqual(true);
+    expect(EMAIL_VALIDATION_REGEX.test('example@s.example')).toEqual(true);
+    expect(EMAIL_VALIDATION_REGEX.test('"john..doe"@example.org')).toEqual(true);
+    // eslint-disable-next-line spellcheck/spell-checker
+    expect(EMAIL_VALIDATION_REGEX.test('Abc.example.com')).toEqual(false);
+    expect(EMAIL_VALIDATION_REGEX.test('A@b@c@example.com')).toEqual(false);
+    expect(EMAIL_VALIDATION_REGEX.test('a"b(c)d,e:f;g<h>i[jk]l@example.com')).toEqual(false);
+    expect(EMAIL_VALIDATION_REGEX.test('just"not"right@example.com')).toEqual(false);
+    expect(EMAIL_VALIDATION_REGEX.test('this is"notallowed@example.com')).toEqual(false);
+    expect(EMAIL_VALIDATION_REGEX.test('this still"not\\allowed@example.com')).toEqual(false);
+    // eslint-disable-next-line spellcheck/spell-checker
+    expect(EMAIL_VALIDATION_REGEX.test('ww+te!st+test??@te-stoa.a(==)')).toEqual(false);
+  });
+});

package/dist/collection/constants/tokens/border-radius.js

@@ -0,0 +1,16 @@
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+export 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
+};

package/dist/collection/constants/tokens/borders.js

@@ -0,0 +1,37 @@
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+export 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
+export 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))'
+};

package/dist/collection/constants/tokens/breakpoints.js

@@ -0,0 +1,10 @@
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+export const Breakpoints = {
+  "S": 320,
+  "M": 768,
+  "L": 1024,
+  "XL": 1440
+};

package/dist/collection/constants/tokens/colors-mapping.js

@@ -0,0 +1,229 @@
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+export const BackgroundColorsMappingLight = {
+  "bg-brand": "#33393D",
+  "bg-page": "#F0F3F7",
+  "bg-primary": "#FCFCFC",
+  "bg-secondary": "#F5F7F7",
+  "bg-tertiary": "#F0F3F7",
+  "bg-quaternary": "#F1F8FB",
+  "bg-inverted-primary": "#04041C",
+  "bg-inverted-secondary": "#121227",
+  "bg-inverted-tertiary": "#181830",
+  "bg-inverted-quaternary": "#464765",
+  "bg-action": "#1362E2",
+  "bg-action-hover": "#0470EC",
+  "bg-action-focus": "#1362E2",
+  "bg-action-active": "#1D41C3",
+  "bg-action-quaternary": "#DEE1E3",
+  "bg-action-quaternary-hover": "#EFEFEF",
+  "bg-action-quaternary-active": "#CDD1D3",
+  "bg-action-secondary": "#FCFCFC",
+  "bg-action-secondary-hover": "#0470EC",
+  "bg-action-secondary-active": "#1D41C3",
+  "bg-action-tertiary": "#000000",
+  "bg-action-tertiary-hover": "#04041C",
+  "bg-action-tertiary-active": "#04041C",
+  "bg-app-header": "#F0F3F7",
+  "bg-backdrop-modal": "#121227",
+  "bg-backdrop-popover": "#203645",
+  "bg-backdrop-sidebar": "#121227",
+  "bg-chip": "#203645",
+  "bg-chip-hover": "#203645",
+  "bg-chip-active": "#203645",
+  "bg-danger": "#BD2947",
+  "bg-danger-hover": "#E94768",
+  "bg-danger-focus": "#BD2947",
+  "bg-danger-active": "#E63257",
+  "bg-danger-tertiary": "#000000",
+  "bg-danger-tertiary-hover": "#FF5772",
+  "bg-danger-tertiary-active": "#BD2947",
+  "bg-disabled": "#B0B4B5",
+  "bg-divider": "#ABC6D8",
+  "bg-divider-secondary": "#C7D9E5",
+  "bg-keypad-btn-active": "#E5EFFF",
+  "bg-loading-progress": "#99C0FF",
+  "bg-loading-track": "#E5EFFF",
+  "bg-segment-hover": "#CDD1D3",
+  "bg-segment-control": "#596063",
+  "bg-selected": "#0097FF",
+  "bg-sidebar": "#121227",
+  "bg-sidebar-icon": "#BCBAD5",
+  "bg-sidebar-icon-hover": "#121227",
+  "bg-sidebar-icon-selected": "#FCFCFC",
+  "bg-sidebar-item-hover": "#FCFCFC",
+  "bg-sidebar-item-selected": "#1362E2",
+  "bg-site-footer": "#33393D",
+  "bg-site-footer-action": "#ABC6D8",
+  "bg-site-footer-action-hover": "#C7D9E5",
+  "bg-site-footer-action-active": "#8FB3CB",
+  "bg-site-footer-field": "#596063",
+  "bg-slider-handle": "#FCFCFC",
+  "bg-status-error": "#FF6E8B",
+  "bg-status-info": "#CDD1D3",
+  "bg-status-success": "#A0E9A7",
+  "bg-status-warning": "#FFDC83",
+  "bg-tab": "#F0F3F7",
+  "bg-tab-hover": "#F5F7F7",
+  "bg-tab-selected": "#203645",
+  "bg-table-alt-row": "#F5F7F7",
+  "bg-table-header": "#F0F3F7",
+  "bg-table-row-hover": "#F1F8FB",
+  "bg-table-row-selected-expanded": "#E5EFFF",
+  "bg-table-selected-row": "#CCDFFF",
+  "bg-textarea-count": "#04041C",
+  "bg-tile": "#FCFCFC",
+  "bg-tile-hover": "#F5F7F7",
+  "bg-tile-selected": "#F2F7FF",
+  "bg-tile-selected-hover": "#E5EFFF",
+  "bg-toggle-switch": "#6B747D",
+  "bg-toggle-switch-hover": "#6B747D",
+  "bg-toggle-switch-selected-disabled": "#99C0FF",
+  "bg-transparent": "#000000",
+  "bg-accent1-primary": "#73E6DC",
+  "bg-accent1-secondary": "#C1F4EF",
+  "bg-accent1-tertiary": "#E0F9F7",
+  "bg-accent2-primary": "#806BFF",
+  "bg-accent2-secondary": "#C7BDFF",
+  "bg-accent2-tertiary": "#E3DEFF",
+  "bg-accent3-primary": "#FFDC83",
+  "bg-accent3-secondary": "#FFEFC8",
+  "bg-accent3-tertiary": "#FFF7E3",
+  "bg-accent4-primary": "#FF9571",
+  "bg-accent4-secondary": "#FFD0C0",
+  "bg-accent4-tertiary": "#FFE7DF",
+  "bg-accent5-primary": "#00BBFF",
+  "bg-accent5-secondary": "#8EDFF9",
+  "bg-accent5-tertiary": "#E3F7FD",
+  "bg-accent6-primary": "#FF82C9",
+  "bg-accent6-secondary": "#FFC7E7",
+  "bg-accent6-tertiary": "#FFE3F3",
+  "bg-accent7-primary": "#259F9F",
+  "bg-accent7-secondary": "#9BD4D6",
+  "bg-accent7-tertiary": "#D0EFEF",
+  "bg-accent8-primary": "#563D82",
+  "bg-accent8-secondary": "#C7A2CC",
+  "bg-accent8-tertiary": "#E6D6EA",
+  "bg-accent9-primary": "#FFBF3F",
+  "bg-accent9-secondary": "#FED78E",
+  "bg-accent9-tertiary": "#FBE2B9",
+  "bg-accent10-primary": "#ED7A23",
+  "bg-accent10-secondary": "#F19255",
+  "bg-accent10-tertiary": "#F5BB94",
+  "bg-date-picker-range": "#E5EFFF"
+};
+// prettier-ignore
+export const BackgroundColorsMappingDark = {
+  "bg-brand": "#B0B4B5",
+  "bg-page": "#181830",
+  "bg-primary": "#04041C",
+  "bg-secondary": "#121227",
+  "bg-tertiary": "#181830",
+  "bg-quaternary": "#464765",
+  "bg-inverted-primary": "#FCFCFC",
+  "bg-inverted-secondary": "#F7F7F7",
+  "bg-inverted-tertiary": "#F0F3F7",
+  "bg-inverted-quaternary": "#F1F8FB",
+  "bg-action": "#00BBFF",
+  "bg-action-hover": "#00CCFF",
+  "bg-action-focus": "#00BBFF",
+  "bg-action-active": "#04A5F5",
+  "bg-action-quaternary": "#33393D",
+  "bg-action-quaternary-hover": "#596063",
+  "bg-action-quaternary-active": "#181830",
+  "bg-action-secondary": "#000000",
+  "bg-action-secondary-hover": "#00CCFF",
+  "bg-action-secondary-active": "#04A5F5",
+  "bg-action-tertiary": "#000000",
+  "bg-action-tertiary-hover": "#FCFCFC",
+  "bg-action-tertiary-active": "#FCFCFC",
+  "bg-app-header": "#181830",
+  "bg-backdrop-modal": "#464765",
+  "bg-backdrop-popover": "#464765",
+  "bg-backdrop-sidebar": "#464765",
+  "bg-chip": "#FCFCFC",
+  "bg-chip-hover": "#FCFCFC",
+  "bg-chip-active": "#FCFCFC",
+  "bg-danger": "#FF3861",
+  "bg-danger-hover": "#FF477B",
+  "bg-danger-focus": "#FF3861",
+  "bg-danger-active": "#E63257",
+  "bg-danger-tertiary": "#000000",
+  "bg-danger-tertiary-hover": "#FF477B",
+  "bg-danger-tertiary-active": "#E63257",
+  "bg-disabled": "#464765",
+  "bg-divider": "#203645",
+  "bg-divider-secondary": "#33393D",
+  "bg-keypad-btn-active": "#2D4C61",
+  "bg-loading-progress": "#04A5F5",
+  "bg-loading-track": "#8EDFF9",
+  "bg-segment-hover": "#464765",
+  "bg-segment-control": "#D2D0DF",
+  "bg-selected": "#55DAFF",
+  "bg-sidebar": "#121227",
+  "bg-sidebar-icon": "#BCBAD5",
+  "bg-sidebar-icon-hover": "#121227",
+  "bg-sidebar-icon-selected": "#FCFCFC",
+  "bg-sidebar-item-hover": "#FCFCFC",
+  "bg-sidebar-item-selected": "#00BBFF",
+  "bg-site-footer": "#33393D",
+  "bg-site-footer-action": "#ABC6D8",
+  "bg-site-footer-action-hover": "#C7D9E5",
+  "bg-site-footer-action-active": "#8FB3CB",
+  "bg-site-footer-field": "#596063",
+  "bg-slider-handle": "#FCFCFC",
+  "bg-status-error": "#BD2947",
+  "bg-status-info": "#FCFCFC",
+  "bg-status-success": "#7BF297",
+  "bg-status-warning": "#FFD469",
+  "bg-tab": "#33393D",
+  "bg-tab-hover": "#596063",
+  "bg-tab-selected": "#F0F3F7",
+  "bg-table-alt-row": "#121227",
+  "bg-table-header": "#181830",
+  "bg-table-row-hover": "#464765",
+  "bg-table-row-selected-expanded": "#203645",
+  "bg-table-selected-row": "#2D4C61",
+  "bg-textarea-count": "#FCFCFC",
+  "bg-tile": "#04041C",
+  "bg-tile-hover": "#181830",
+  "bg-tile-selected": "#203645",
+  "bg-tile-selected-hover": "#2D4C61",
+  "bg-toggle-switch": "#D2D0DF",
+  "bg-toggle-switch-hover": "#BCBAD5",
+  "bg-toggle-switch-selected-disabled": "#004B80",
+  "bg-transparent": "#000000",
+  "bg-accent1-primary": "#6DD9CA",
+  "bg-accent1-secondary": "#AEEAE2",
+  "bg-accent1-tertiary": "#DFF7F3",
+  "bg-accent2-primary": "#5F38CE",
+  "bg-accent2-secondary": "#B8A7E9",
+  "bg-accent2-tertiary": "#DBD3F4",
+  "bg-accent3-primary": "#FFCB69",
+  "bg-accent3-secondary": "#FBE2B9",
+  "bg-accent3-tertiary": "#FFF3DE",
+  "bg-accent4-primary": "#FF8157",
+  "bg-accent4-secondary": "#FFB9A2",
+  "bg-accent4-tertiary": "#FFE3DA",
+  "bg-accent5-primary": "#04A5F5",
+  "bg-accent5-secondary": "#55DAFF",
+  "bg-accent5-tertiary": "#E3F7FD",
+  "bg-accent6-primary": "#FF54A5",
+  "bg-accent6-secondary": "#FFB3D7",
+  "bg-accent6-tertiary": "#FFD9EB",
+  "bg-accent7-primary": "#259F9F",
+  "bg-accent7-secondary": "#9BD4D6",
+  "bg-accent7-tertiary": "#D0EFEF",
+  "bg-accent8-primary": "#563D82",
+  "bg-accent8-secondary": "#C7A2CC",
+  "bg-accent8-tertiary": "#E6D6EA",
+  "bg-accent9-primary": "#FFBF3F",
+  "bg-accent9-secondary": "#FED78E",
+  "bg-accent9-tertiary": "#FBE2B9",
+  "bg-accent10-primary": "#ED7A23",
+  "bg-accent10-secondary": "#F19255",
+  "bg-accent10-tertiary": "#F5BB94",
+  "bg-date-picker-range": "#203645"
+};