@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

package/dist/cjs/{subStateObserverSlimmer-63b053eb.js → subStateObserverSlimmer-96ca747f.js}

@@ -1,10 +1,49 @@
 'use strict';
 
-const vegaSlimmer = require('./vega-slimmer-281f0079.js');
-const mapToComponentMethod = require('./map-to-component-method-ec6546f1.js');
-const observer = require('./observer-126f19d0.js');
-const changeManager = require('./changeManager-91f1f24a.js');
-const ui = require('./ui-97068bc7.js');
+require('./global-slimmer-registry-58eee093.js');
+const dynamicSlimmer = require('./dynamic-slimmer-c718b7d9.js');
+const vegaSlimmer = require('./vega-slimmer-af488dc3.js');
+const changeManager = require('./changeManager-1dd5ac2a.js');
+const staticSubjectTitle = require('./staticSubjectTitle-b02c917c.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-f0546f9d.js');
+const ui = require('./ui-23cd9abb.js');
+
+/**
+ * Sub state notify slimmer
+ */
+class SubStateNotifySlimmerBase extends vegaSlimmer.VegaSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor({ propName }) {
+    super();
+    this.propName = propName;
+  }
+  /**
+   * Notify the children component which prop has been changed in the parent component
+   */
+  subStateNotify() {
+    changeManager.ChangeManager.notify(staticSubjectTitle.SUB_STATE_CHANGE, {
+      host: this.host,
+      stateName: this.propName,
+      value: this.host[this.propName],
+    });
+  }
+}
+
+/**
+ * Create dynamic subState notify slimmer
+ *
+ * @param {ClassPrototype} mapFromClass - It represents the class that you want to map from.
+ * @param {string} propName - The parent component prop name
+ * @param {string} watchMethodName - The watch method name of prop change
+ * @returns {SubStateNotifySlimmerBase} - SubState notify slimmer
+ */
+function createSubStateNotifySlimmer(mapFromClass, propName, watchMethodName) {
+  return dynamicSlimmer.createDynamicSlimmer(mapFromClass, SubStateNotifySlimmerBase, [{ mapFrom: 'host', mapTo: 'host' }], [{ mapFrom: watchMethodName, mapTo: 'subStateNotify' }], [
+    {
+      propName: propName,
+    },
+  ]);
+}
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -37,7 +76,7 @@ class SubStateObserverSlimmer extends vegaSlimmer.VegaSlimmer {
    */
   connectedCallback() {
     const { subStates } = this.observerEntry;
-    this.subStateObserver = new observer.Observer(this.isAcceptableObserverPayload, (payload) => {
+    this.subStateObserver = new eventEmitSlimmer.Observer(this.isAcceptableObserverPayload, (payload) => {
       const subState = subStates.find((subState) => subState.parentStateName === payload.stateName);
       if (subState === null || subState === void 0 ? void 0 : subState.callback) {
         subState.callback(payload.value);
@@ -46,13 +85,13 @@ class SubStateObserverSlimmer extends vegaSlimmer.VegaSlimmer {
         this[subState.subStateName] = payload.value;
       }
     });
-    changeManager.ChangeManager.register(changeManager.SUB_STATE_CHANGE, this.subStateObserver);
+    changeManager.ChangeManager.register(staticSubjectTitle.SUB_STATE_CHANGE, this.subStateObserver);
   }
   /**
    * Unregister the observer when disconnectedCallback
    */
   disconnectedCallback() {
-    changeManager.ChangeManager.unregister(changeManager.SUB_STATE_CHANGE, this.subStateObserver);
+    changeManager.ChangeManager.unregister(staticSubjectTitle.SUB_STATE_CHANGE, this.subStateObserver);
   }
   /**
    * Fetch the parent props when componentWillLoad
@@ -88,13 +127,14 @@ __decorate([
   vegaSlimmer.MapToComponentField()
 ], SubStateObserverSlimmer.prototype, "host", void 0);
 __decorate([
-  mapToComponentMethod.MapToComponentMethod('connectedCallback')
+  vegaSlimmer.MapToComponentMethod('connectedCallback')
 ], SubStateObserverSlimmer.prototype, "connectedCallback", null);
 __decorate([
-  mapToComponentMethod.MapToComponentMethod('disconnectedCallback')
+  vegaSlimmer.MapToComponentMethod('disconnectedCallback')
 ], SubStateObserverSlimmer.prototype, "disconnectedCallback", null);
 __decorate([
-  mapToComponentMethod.MapToComponentMethod('componentWillLoad')
+  vegaSlimmer.MapToComponentMethod('componentWillLoad')
 ], SubStateObserverSlimmer.prototype, "componentWillLoad", null);
 
 exports.SubStateObserverSlimmer = SubStateObserverSlimmer;
+exports.createSubStateNotifySlimmer = createSubStateNotifySlimmer;

package/dist/cjs/{typeGuard-447fb5bd.js → typeGuard-70b919b6.js}

@@ -1,23 +1,24 @@
 'use strict';
 
-const breakpoints = require('./breakpoints-b5eab9c2.js');
-const typography = require('./typography-358013af.js');
+const breakpoints = require('./breakpoints-97c1f5c8.js');
+const ui = require('./ui-ef822fe1.js');
+const typography = require('./typography-3d2ba97d.js');
 
 /* This file is generated by vega-design 2.0.71 */
 /* eslint-disable */
 /* tslint:disable */
 // prettier-ignore
 const BorderRadius = {
-  "2": 2,
-  "4": 4,
-  "8": 8,
-  "12": 12,
-  "16": 16,
-  "24": 24,
-  "32": 32,
-  "48": 48,
-  "none": 0,
-  "full": 9999
+  "rounded-none": 0,
+  "rounded-full": 9999,
+  "rounded-2": 2,
+  "rounded-4": 4,
+  "rounded-8": 8,
+  "rounded-12": 12,
+  "rounded-16": 16,
+  "rounded-24": 24,
+  "rounded-32": 32,
+  "rounded-48": 48
 };
 
 /* This file is generated by vega-design 2.0.71 */
@@ -35,6 +36,188 @@ const StrokeBackgroundColors = ["stroke-bg-brand", "stroke-bg-page", "stroke-bg-
 const TextColors = ["text-primary", "text-secondary", "text-inverted-primary", "text-inverted-secondary", "text-link", "text-link-hover", "text-link-active", "text-link-focus", "text-link-visited", "text-danger-link", "text-danger-link-hover", "text-danger-link-active", "text-danger-link-focus", "text-danger-link-visited", "text-success", "text-error", "text-black", "text-white", "text-disabled", "text-input-disabled", "text-sidebar-link", "text-sidebar-link-hover", "text-sidebar-link-selected", "text-input-placeholder", "text-accent1-primary", "text-accent2-primary", "text-accent3-primary", "text-accent4-primary", "text-accent5-primary", "text-accent6-primary", "text-accent7-primary", "text-accent8-primary", "text-accent9-primary", "text-accent10-primary", "text-site-footer-link", "text-site-footer-link-hover", "text-site-footer-link-active", "text-brand", "text-on-action", "text-on-danger", "text-on-disabled"];
 // prettier-ignore
 const BorderColors = ["border-color-action", "border-color-action-hover", "border-color-action-active", "border-color-danger", "border-color-danger-hover", "border-color-danger-active", "border-color-input-field", "border-color-input-field-hover", "border-color-input-field-focus", "border-color-input-field-danger", "border-color-input-field-danger-hover", "border-color-input-field-danger-focus", "border-color-input-field-disabled", "border-color-sidebar-item-focus", "border-color-success", "border-color-secondary-btn-disabled", "border-color-chip", "border-color-divider", "border-color-divider-secondary", "border-color-tile-selected", "border-color-tile-selected-hover", "border-color-table-divider", "border-color-slider-handle"];
+// prettier-ignore
+const TextColorMap = {
+  'text-primary': 'rgba(var(--v-text-primary, 32, 54, 69, 1))',
+  'text-secondary': 'rgba(var(--v-text-secondary, 107, 116, 125, 1))',
+  'text-inverted-primary': 'rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))',
+  'text-inverted-secondary': 'rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1))',
+  'text-link': 'rgba(var(--v-text-link, 19, 98, 226, 1))',
+  'text-link-hover': 'rgba(var(--v-text-link-hover, 4, 112, 236, 1))',
+  'text-link-active': 'rgba(var(--v-text-link-active, 29, 65, 195, 1))',
+  'text-link-focus': 'rgba(var(--v-text-link-focus, 4, 112, 236, 1))',
+  'text-link-visited': 'rgba(var(--v-text-link-visited, 95, 56, 206, 1))',
+  'text-danger-link': 'rgba(var(--v-text-danger-link, 230, 50, 87, 1))',
+  'text-danger-link-hover': 'rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))',
+  'text-danger-link-active': 'rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))',
+  'text-danger-link-focus': 'rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))',
+  'text-danger-link-visited': 'rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))',
+  'text-success': 'rgba(var(--v-text-success, 1, 128, 31, 1))',
+  'text-error': 'rgba(var(--v-text-error, 189, 41, 71, 1))',
+  'text-black': 'rgba(var(--v-text-black, 32, 54, 69, 1))',
+  'text-white': 'rgba(var(--v-text-white, 252, 252, 252, 1))',
+  'text-disabled': 'rgba(var(--v-text-disabled, 176, 180, 181, 1))',
+  'text-input-disabled': 'rgba(var(--v-text-input-disabled, 107, 116, 125, 1))',
+  'text-sidebar-link': 'rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))',
+  'text-sidebar-link-hover': 'rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))',
+  'text-sidebar-link-selected': 'rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))',
+  'text-input-placeholder': 'rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))',
+  'text-accent1-primary': 'rgba(var(--v-text-accent1-primary, 115, 230, 220, 1))',
+  'text-accent2-primary': 'rgba(var(--v-text-accent2-primary, 128, 107, 255, 1))',
+  'text-accent3-primary': 'rgba(var(--v-text-accent3-primary, 255, 220, 131, 1))',
+  'text-accent4-primary': 'rgba(var(--v-text-accent4-primary, 255, 149, 113, 1))',
+  'text-accent5-primary': 'rgba(var(--v-text-accent5-primary, 0, 187, 255, 1))',
+  'text-accent6-primary': 'rgba(var(--v-text-accent6-primary, 240, 52, 91, 1))',
+  'text-accent7-primary': 'rgba(var(--v-text-accent7-primary, 37, 159, 159, 1))',
+  'text-accent8-primary': 'rgba(var(--v-text-accent8-primary, 86, 61, 130, 1))',
+  'text-accent9-primary': 'rgba(var(--v-text-accent9-primary, 255, 191, 63, 1))',
+  'text-accent10-primary': 'rgba(var(--v-text-accent10-primary, 237, 122, 35, 1))',
+  'text-site-footer-link': 'rgba(var(--v-text-site-footer-link, 171, 198, 216, 1))',
+  'text-site-footer-link-hover': 'rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1))',
+  'text-site-footer-link-active': 'rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1))',
+  'text-brand': 'rgba(var(--v-text-brand, 89, 96, 99, 1))',
+  'text-on-action': 'rgba(var(--v-text-on-action, 252, 252, 252, 1))',
+  'text-on-danger': 'rgba(var(--v-text-on-danger, 252, 252, 252, 1))',
+  'text-on-disabled': 'rgba(var(--v-text-on-disabled, 252, 252, 252, 1))'
+};
+// prettier-ignore
+const BackgroundColorMap = {
+  'bg-brand': 'rgba(var(--v-bg-brand, 89, 96, 99, 1))',
+  'bg-page': 'rgba(var(--v-bg-page, 240, 243, 247, 1))',
+  'bg-transparent': 'rgba(var(--v-bg-transparent, 0, 0, 0, 0))',
+  'bg-primary': 'rgba(var(--v-bg-primary, 252, 252, 252, 1))',
+  'bg-secondary': 'rgba(var(--v-bg-secondary, 245, 247, 247, 1))',
+  'bg-tertiary': 'rgba(var(--v-bg-tertiary, 240, 243, 247, 1))',
+  'bg-quaternary': 'rgba(var(--v-bg-quaternary, 241, 248, 251, 1))',
+  'bg-inverted-primary': 'rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))',
+  'bg-inverted-secondary': 'rgba(var(--v-bg-inverted-secondary, 18, 18, 39, 1))',
+  'bg-inverted-tertiary': 'rgba(var(--v-bg-inverted-tertiary, 24, 24, 48, 1))',
+  'bg-inverted-quaternary': 'rgba(var(--v-bg-inverted-quaternary, 70, 71, 101, 1))',
+  'bg-selected': 'rgba(var(--v-bg-selected, 0, 151, 255, 0.3))',
+  'bg-action': 'rgba(var(--v-bg-action, 19, 98, 226, 1))',
+  'bg-action-hover': 'rgba(var(--v-bg-action-hover, 4, 112, 236, 1))',
+  'bg-action-focus': 'rgba(var(--v-bg-action-focus, 0, 151, 255, 1))',
+  'bg-action-active': 'rgba(var(--v-bg-action-active, 29, 65, 195, 1))',
+  'bg-action-secondary': 'rgba(var(--v-bg-action-secondary, 252, 252, 252, 1))',
+  'bg-action-tertiary': 'rgba(var(--v-bg-action-tertiary, 0, 0, 0, 0))',
+  'bg-action-tertiary-hover': 'rgba(var(--v-bg-action-tertiary-hover, 4, 4, 28, 0.05))',
+  'bg-action-tertiary-active': 'rgba(var(--v-bg-action-tertiary-active, 4, 4, 28, 0.1))',
+  'bg-action-quaternary': 'rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))',
+  'bg-action-quaternary-hover': 'rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1))',
+  'bg-action-quaternary-active': 'rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1))',
+  'bg-danger': 'rgba(var(--v-bg-danger, 230, 50, 87, 1))',
+  'bg-danger-hover': 'rgba(var(--v-bg-danger-hover, 255, 87, 114, 1))',
+  'bg-danger-focus': 'rgba(var(--v-bg-danger-focus, 240, 52, 91, 1))',
+  'bg-danger-active': 'rgba(var(--v-bg-danger-active, 189, 41, 71, 1))',
+  'bg-danger-tertiary': 'rgba(var(--v-bg-danger-tertiary, 0, 0, 0, 0))',
+  'bg-danger-tertiary-hover': 'rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2))',
+  'bg-danger-tertiary-active': 'rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2))',
+  'bg-status-success': 'rgba(var(--v-bg-status-success, 160, 233, 167, 1))',
+  'bg-status-warning': 'rgba(var(--v-bg-status-warning, 255, 220, 131, 1))',
+  'bg-status-info': 'rgba(var(--v-bg-status-info, 205, 209, 211, 1))',
+  'bg-status-error': 'rgba(var(--v-bg-status-error, 255, 110, 139, 1))',
+  'bg-sidebar': 'rgba(var(--v-bg-sidebar, 18, 18, 39, 1))',
+  'bg-sidebar-item-hover': 'rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1))',
+  'bg-sidebar-item-selected': 'rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4))',
+  'bg-sidebar-icon': 'rgba(var(--v-bg-sidebar-icon, 188, 186, 213, 1))',
+  'bg-sidebar-icon-hover': 'rgba(var(--v-bg-sidebar-icon-hover, 18, 18, 39, 1))',
+  'bg-sidebar-icon-selected': 'rgba(var(--v-bg-sidebar-icon-selected, 252, 252, 252, 1))',
+  'bg-backdrop-popover': 'rgba(var(--v-bg-backdrop-popover, 32, 54, 69, 0.16))',
+  'bg-backdrop-modal': 'rgba(var(--v-bg-backdrop-modal, 18, 18, 39, 0.85))',
+  'bg-backdrop-sidebar': 'rgba(var(--v-bg-backdrop-sidebar, 18, 18, 39, 0.85))',
+  'bg-accent1-primary': 'rgba(var(--v-bg-accent1-primary, 115, 230, 220, 1))',
+  'bg-accent1-secondary': 'rgba(var(--v-bg-accent1-secondary, 193, 244, 239, 1))',
+  'bg-accent1-tertiary': 'rgba(var(--v-bg-accent1-tertiary, 224, 249, 247, 1))',
+  'bg-accent2-primary': 'rgba(var(--v-bg-accent2-primary, 128, 107, 255, 1))',
+  'bg-accent2-secondary': 'rgba(var(--v-bg-accent2-secondary, 199, 189, 255, 1))',
+  'bg-accent2-tertiary': 'rgba(var(--v-bg-accent2-tertiary, 227, 222, 255, 1))',
+  'bg-accent3-primary': 'rgba(var(--v-bg-accent3-primary, 255, 220, 131, 1))',
+  'bg-accent3-secondary': 'rgba(var(--v-bg-accent3-secondary, 255, 239, 200, 1))',
+  'bg-accent3-tertiary': 'rgba(var(--v-bg-accent3-tertiary, 255, 247, 227, 1))',
+  'bg-accent4-primary': 'rgba(var(--v-bg-accent4-primary, 255, 149, 113, 1))',
+  'bg-accent4-secondary': 'rgba(var(--v-bg-accent4-secondary, 255, 208, 192, 1))',
+  'bg-accent4-tertiary': 'rgba(var(--v-bg-accent4-tertiary, 255, 231, 223, 1))',
+  'bg-accent5-primary': 'rgba(var(--v-bg-accent5-primary, 0, 187, 255, 1))',
+  'bg-accent5-secondary': 'rgba(var(--v-bg-accent5-secondary, 142, 223, 249, 1))',
+  'bg-accent5-tertiary': 'rgba(var(--v-bg-accent5-tertiary, 227, 247, 253, 1))',
+  'bg-accent6-primary': 'rgba(var(--v-bg-accent6-primary, 255, 130, 201, 1))',
+  'bg-accent6-secondary': 'rgba(var(--v-bg-accent6-secondary, 255, 199, 231, 1))',
+  'bg-accent6-tertiary': 'rgba(var(--v-bg-accent6-tertiary, 255, 227, 243, 1))',
+  'bg-accent7-primary': 'rgba(var(--v-bg-accent7-primary, 37, 159, 159, 1))',
+  'bg-accent7-secondary': 'rgba(var(--v-bg-accent7-secondary, 155, 212, 214, 1))',
+  'bg-accent7-tertiary': 'rgba(var(--v-bg-accent7-tertiary, 208, 239, 239, 1))',
+  'bg-accent8-primary': 'rgba(var(--v-bg-accent8-primary, 86, 61, 130, 1))',
+  'bg-accent8-secondary': 'rgba(var(--v-bg-accent8-secondary, 199, 162, 204, 1))',
+  'bg-accent8-tertiary': 'rgba(var(--v-bg-accent8-tertiary, 230, 214, 234, 1))',
+  'bg-accent9-primary': 'rgba(var(--v-bg-accent9-primary, 255, 191, 63, 1))',
+  'bg-accent9-secondary': 'rgba(var(--v-bg-accent9-secondary, 254, 215, 142, 1))',
+  'bg-accent9-tertiary': 'rgba(var(--v-bg-accent9-tertiary, 251, 226, 185, 1))',
+  'bg-accent10-primary': 'rgba(var(--v-bg-accent10-primary, 237, 122, 35, 1))',
+  'bg-accent10-secondary': 'rgba(var(--v-bg-accent10-secondary, 241, 146, 85, 1))',
+  'bg-accent10-tertiary': 'rgba(var(--v-bg-accent10-tertiary, 245, 187, 148, 1))',
+  'bg-divider': 'rgba(var(--v-bg-divider, 171, 198, 216, 1))',
+  'bg-divider-secondary': 'rgba(var(--v-bg-divider-secondary, 199, 217, 229, 1))',
+  'bg-disabled': 'rgba(var(--v-bg-disabled, 176, 180, 181, 1))',
+  'bg-tab': 'rgba(var(--v-bg-tab, 240, 243, 247, 1))',
+  'bg-tab-hover': 'rgba(var(--v-bg-tab-hover, 245, 247, 247, 1))',
+  'bg-tab-selected': 'rgba(var(--v-bg-tab-selected, 32, 54, 69, 1))',
+  'bg-table-header': 'rgba(var(--v-bg-table-header, 240, 243, 247, 1))',
+  'bg-table-alt-row': 'rgba(var(--v-bg-table-alt-row, 245, 247, 247, 1))',
+  'bg-table-selected-row': 'rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))',
+  'bg-site-footer': 'rgba(var(--v-bg-site-footer, 51, 57, 61, 1))',
+  'bg-site-footer-action': 'rgba(var(--v-bg-site-footer-action, 171, 198, 216, 1))',
+  'bg-site-footer-action-hover': 'rgba(var(--v-bg-site-footer-action-hover, 199, 217, 229, 1))',
+  'bg-site-footer-action-active': 'rgba(var(--v-bg-site-footer-action-active, 143, 179, 203, 1))',
+  'bg-site-footer-field': 'rgba(var(--v-bg-site-footer-field, 89, 96, 99, 1))',
+  'bg-textarea-count': 'rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))',
+  'bg-table-row-hover': 'rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))',
+  'bg-table-row-selected-expanded': 'rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))',
+  'bg-app-header': 'rgba(var(--v-bg-app-header, 240, 243, 247, 0.88))',
+  'bg-selection-tile': 'rgba(var(--v-bg-selection-tile, 252, 252, 252, 1))',
+  'bg-selection-tile-hover': 'rgba(var(--v-bg-selection-tile-hover, 247, 247, 247, 1))',
+  'bg-selection-tile-selected': 'rgba(var(--v-bg-selection-tile-selected, 242, 247, 255, 1))',
+  'bg-selection-tile-selected-hover': 'rgba(var(--v-bg-selection-tile-selected-hover, 229, 239, 255, 1))',
+  'bg-loading-track': 'rgba(var(--v-bg-loading-track, 229, 239, 255, 1))',
+  'bg-loading-progress': 'rgba(var(--v-bg-loading-progress, 153, 192, 255, 1))',
+  'bg-toggle-switch': 'rgba(var(--v-bg-toggle-switch, 107, 116, 125, 0.7))',
+  'bg-toggle-switch-hover': 'rgba(var(--v-bg-toggle-switch-hover, 107, 116, 125, 1))',
+  'bg-toggle-switch-selected-disabled': 'rgba(var(--v-bg-toggle-switch-selected-disabled, 153, 192, 255, 1))',
+  'bg-segment-control': 'rgba(var(--v-bg-segment-control, 89, 96, 99, 0.1))',
+  'bg-segment-hover': 'rgba(var(--v-bg-segment-hover, 205, 209, 211, 1))',
+  'bg-slider-handle': 'rgba(var(--v-bg-slider-handle, 252, 252, 252, 1))',
+  'bg-chip': 'rgba(var(--v-bg-chip, 32, 54, 69, 0.06))',
+  'bg-chip-hover': 'rgba(var(--v-bg-chip-hover, 32, 54, 69, 0.12))',
+  'bg-chip-active': 'rgba(var(--v-bg-chip-active, 32, 54, 69, 0.2))',
+  'bg-keypad-btn-active': 'rgba(var(--v-bg-keypad-btn-active, 229, 239, 255, 1))',
+  'bg-action-secondary-hover': 'rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))',
+  'bg-action-secondary-active': 'rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))'
+};
+// prettier-ignore
+const BorderColorMap = {
+  'border-color-action': 'rgba(var(--v-border-color-action, 19, 98, 226, 1))',
+  'border-color-action-hover': 'rgba(var(--v-border-color-action-hover, 4, 112, 236, 1))',
+  'border-color-action-active': 'rgba(var(--v-border-color-action-active, 29, 65, 195, 1))',
+  'border-color-danger': 'rgba(var(--v-border-color-danger, 230, 50, 87, 1))',
+  'border-color-danger-hover': 'rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))',
+  'border-color-danger-active': 'rgba(var(--v-border-color-danger-active, 189, 41, 71, 1))',
+  'border-color-input-field': 'rgba(var(--v-border-color-input-field, 171, 198, 216, 1))',
+  'border-color-input-field-hover': 'rgba(var(--v-border-color-input-field-hover, 115, 160, 190, 1))',
+  'border-color-input-field-focus': 'rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))',
+  'border-color-input-field-danger': 'rgba(var(--v-border-color-input-field-danger, 230, 50, 87, 1))',
+  'border-color-input-field-danger-hover': 'rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1))',
+  'border-color-input-field-danger-focus': 'rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))',
+  'border-color-input-field-disabled': 'rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1))',
+  'border-color-sidebar-item-focus': 'rgba(var(--v-border-color-sidebar-item-focus, 19, 98, 226, 1))',
+  'border-color-success': 'rgba(var(--v-border-color-success, 1, 128, 31, 1))',
+  'border-color-secondary-btn-disabled': 'rgba(var(--v-border-color-secondary-btn-disabled, 176, 180, 181, 1))',
+  'border-color-chip': 'rgba(var(--v-border-color-chip, 205, 209, 211, 1))',
+  'border-color-divider': 'rgba(var(--v-border-color-divider, 171, 198, 216, 1))',
+  'border-color-divider-secondary': 'rgba(var(--v-border-color-divider-secondary, 199, 217, 229, 1))',
+  'border-color-tile-selected': 'rgba(var(--v-border-color-tile-selected, 19, 98, 226, 1))',
+  'border-color-tile-selected-hover': 'rgba(var(--v-border-color-tile-selected-hover, 4, 112, 236, 1))',
+  'border-color-table-divider': 'rgba(var(--v-border-color-table-divider, 171, 198, 216, 1))',
+  'border-color-slider-handle': 'rgba(var(--v-border-color-slider-handle, 199, 217, 229, 1))'
+};
 
 /* This file is generated by vega-design 2.0.71 */
 /* eslint-disable */
@@ -63,10 +246,54 @@ const Spacing = {
 /* tslint:disable */
 // prettier-ignore
 const Shadows = ["shadow-card", "shadow-modal", "shadow-popover", "shadow-form-field", "shadow-dropdown-menu", "shadow-app-header", "shadow-modal-header", "shadow-modal-footer", "shadow-modal-footer-no-scroll"];
+// prettier-ignore
+const ShadowMap = {
+  'shadow-card': 'var(--v-shadow-card, 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.02))',
+  'shadow-modal': 'var(--v-shadow-modal, 0px 6px 40px 0px rgba(2, 2, 15, 0.04), 0px 4px 24px 0px rgba(2, 2, 15, 0.08), 0px 8px 80px 0px rgba(2, 2, 15, 0.16))',
+  'shadow-popover': 'var(--v-shadow-popover, 0px 0px 88px 0px rgba(2, 2, 15, 0.01), 0px 0px 32px 0px rgba(2, 2, 15, 0.02), 0px 4px 72px 0px rgba(2, 2, 15, 0.06))',
+  'shadow-form-field': 'var(--v-shadow-form-field, 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.1))',
+  'shadow-dropdown-menu': 'var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1))',
+  'shadow-app-header': 'var(--v-shadow-app-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-header': 'var(--v-shadow-modal-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-footer': 'var(--v-shadow-modal-footer, 0px -2px 8px 0px rgba(45, 76, 97, 0.2), 0px -1px 0px 0px rgba(45, 76, 97, 0.15))',
+  'shadow-modal-footer-no-scroll': 'var(--v-shadow-modal-footer-no-scroll, 0px -1px 0px 0px rgba(45, 76, 97, 0.15))'
+};
 
 const GridRowRegex = new RegExp(/^([1-9]|1[0-2])(-auto)?$/);
 const GridColumnRegex = new RegExp(/^([1-9]|1[0-2])(-auto)?$/);
 
+/* This file is generated by vega-design 2.0.71 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+const Borders = ["border-secondary-btn", "border-secondary-btn-hover", "border-secondary-danger-btn", "border-secondary-btn-active", "border-secondary-danger-btn-hover", "border-secondary-danger-btn-active", "border-input-field", "border-input-field-hover", "border-input-field-focus", "border-input-field-danger", "border-input-field-danger-hover", "border-input-field-danger-focus", "border-sidebar-item-focus", "border-input-field-disabled", "border-success", "border-secondary-btn-disabled", "border-chip", "border-divider", "border-divider-secondary", "border-selection-tile-selected", "border-selection-tile-selected-hover", "border-table-divider", "border-slider-handle"];
+// prettier-ignore
+const BorderMap = {
+  'border-secondary-btn': '2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))',
+  'border-secondary-btn-hover': '2px solid rgba(var(--v-border-secondary-btn-hover, 4, 112, 236, 1))',
+  'border-secondary-danger-btn': '2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1))',
+  'border-secondary-btn-active': '2px solid rgba(var(--v-border-secondary-btn-active, 29, 65, 195, 1))',
+  'border-secondary-danger-btn-hover': '2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1))',
+  'border-secondary-danger-btn-active': '2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1))',
+  'border-input-field': '1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))',
+  'border-input-field-hover': '1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))',
+  'border-input-field-focus': '1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1))',
+  'border-input-field-danger': '1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))',
+  'border-input-field-danger-hover': '1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))',
+  'border-input-field-danger-focus': '1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1))',
+  'border-sidebar-item-focus': '2px solid rgba(var(--v-border-sidebar-item-focus, 19, 98, 226, 1))',
+  'border-input-field-disabled': '1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))',
+  'border-success': '2px solid rgba(var(--v-border-success, 1, 128, 31, 1))',
+  'border-secondary-btn-disabled': '2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1))',
+  'border-chip': '1px solid rgba(var(--v-border-chip, 205, 209, 211, 1))',
+  'border-divider': '1px solid rgba(var(--v-border-divider, 171, 198, 216, 1))',
+  'border-divider-secondary': '1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1))',
+  'border-selection-tile-selected': '2px solid rgba(var(--v-border-selection-tile-selected, 19, 98, 226, 1))',
+  'border-selection-tile-selected-hover': '2px solid rgba(var(--v-border-selection-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))'
+};
+
 /**
  * Returns true if the input is a string that is one of the four directions.
  *
@@ -98,15 +325,6 @@ const isDirectionalSpacingType = (input) => {
     Object.keys(input).every(isSpacingDirection) &&
     Object.values(input).every((paddingValue) => paddingValue in Spacing));
 };
-/**
- * `isHTMLVegaSidenavLinkElement` returns `true` if the input is an `HTMLVegaSidenavLinkElement` and `false` otherwise
- *
- * @param {unknown} input - The input to check.
- * @returns {boolean} indicating if the input is type of {@link HTMLVegaSidenavLinkElement}
- */
-const isHTMLVegaSidenavLinkElement = (input) => {
-  return input instanceof HTMLElement && input['tagName'] === 'VEGA-SIDENAV-LINK';
-};
 /**
  * `isResponsiveType` returns true if the input is an object with a `default` property and all other properties are valid
  * breakpoints
@@ -146,13 +364,22 @@ const isColorTokenType = (input) => {
   return typeof input === 'string' && Colors.includes(input);
 };
 /**
- * It returns true if the input is a string that starts with 'border-' and is a valid color token type.
+ * It returns true if the input is a string that starts with 'border-color-' and is a valid color token type.
  *
  * @param {unknown} input - The value to be tested.
  * @returns {boolean} indicating if the input is {@link BorderColorsTokenType}
  */
 const isBorderColorTokenType = (input) => {
-  return isColorTokenType(input) && /^border-.+$/.test(input);
+  return isColorTokenType(input) && /^border-color-.+$/.test(input);
+};
+/**
+ * If the input is a string and it's in the Borders array, then it's a BordersTokenType.
+ *
+ * @param {unknown} input - unknown - This is the input that we're checking.
+ * @returns {boolean} indicating if the input is type of {@link BordersTokenType}
+ */
+const isBorderTokenType = (input) => {
+  return typeof input === 'string' && Borders.includes(input);
 };
 /**
  * It returns true if the input is a string that starts with `bg-` and is a valid color token type.
@@ -246,7 +473,7 @@ const isAccordionObserverPayload = (input) => {
  * @returns {boolean} A function that takes an unknown input and returns a boolean.
  */
 const isFlexDirectionType = (input) => {
-  return typeof input === 'string' && breakpoints.FlexDirections.includes(input);
+  return typeof input === 'string' && ui.FlexDirections.includes(input);
 };
 /**
  * This TypeScript function checks if an input is a valid FlexAlignItemType.
@@ -261,7 +488,7 @@ const isFlexDirectionType = (input) => {
  * returns `false`.
  */
 const isFlexAlignItemType = (input) => {
-  return typeof input === 'string' && breakpoints.FlexAlignItem.includes(input);
+  return typeof input === 'string' && ui.FlexAlignItem.includes(input);
 };
 /**
  * This TypeScript function checks if an input is a valid FlexJustifyContentType.
@@ -274,7 +501,7 @@ const isFlexAlignItemType = (input) => {
  * is of type `FlexJustifyContentType`. If either condition is not met, the function returns `false`.
  */
 const isFlexJustifyContentType = (input) => {
-  return typeof input === 'string' && breakpoints.FlexJustifyContent.includes(input);
+  return typeof input === 'string' && ui.FlexJustifyContent.includes(input);
 };
 /**
  * It takes an array of unknowns and a type guard function, and returns a type guard function that
@@ -316,7 +543,7 @@ const isSelectSourceItemType = (input) => {
  * @returns {boolean} a boolean value.
  */
 const isBoxDisplayType = (input) => {
-  return typeof input === 'string' && breakpoints.BoxDisplay.includes(input);
+  return typeof input === 'string' && ui.BoxDisplay.includes(input);
 };
 /**
  * Check if the input is not null and undefined
@@ -336,24 +563,85 @@ const isNonNullable = (input) => {
 const isTypographyTokenType = (input) => {
   return typeof input === 'string' && typography.TypographyKeys.includes(input);
 };
+/**
+ * The function `isBorderRadiusDirectionType` checks if the input is a valid `BorderRadiusDirection` type.
+ *
+ * @param {unknown} input - The `input` parameter in the `isBorderRadiusDirectionType` function is of
+ * type `unknown`, which means it can be any type of value. The function checks if the input is a
+ * string and if it matches one of the specified values in the array ['top', 'left', 'right
+ * @returns {boolean} The function `isBorderRadiusDirectionType` is returning a boolean value indicating whether
+ * the `input` is of type `BorderRadiusDirection` or not.
+ */
+const isBorderRadiusDirectionType = (input) => {
+  return (typeof input === 'string' &&
+    ['top', 'right', 'bottom', 'left', 'top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(input));
+};
+/**
+ * The function `isDirectionalBorderRadiusType` checks if the input object conforms to the
+ * `DirectionalBorderRadiusType` type.
+ *
+ * @param {unknown} input - The `input` parameter in the `isDirectionalBorderRadiusType` function is of
+ * type `unknown`, which means it can be any type of value. The function is checking if the input is a
+ * valid `DirectionalBorderRadiusType` by verifying that it is an object, not null,
+ * @returns {boolean} The function `isDirectionalBorderRadiusType` is returning a boolean value.
+ */
+const isDirectionalBorderRadiusType = (input) => {
+  return (typeof input === 'object' &&
+    input !== null &&
+    Object.keys(input).every(isBorderRadiusDirectionType) &&
+    Object.values(input).every((value) => value in BorderRadius));
+};
+/**
+ * The function `isStateVariantTokenType` checks if the input is an object with keys that are all of
+ * type `CssStatesType`.
+ *
+ * @param {unknown} input - The `input` parameter is a value of type `unknown`, which means it can be
+ * any type of value in TypeScript.
+ * @returns {boolean} The `isStateVariantTokenType` function is returning a boolean value. It checks if the
+ * `input` is an object that is not null and if all the keys of the object pass the `isCssStateType`
+ * check. If these conditions are met, it returns `true`, indicating that the `input` is of type
+ * `StateVariantType<T, CssStatesType>`. Otherwise, it
+ */
+const isStateVariantTokenType = (input) => {
+  return typeof input === 'object' && input !== null && Object.keys(input).every(isCssStateType);
+};
+/**
+ * The function `isCssStateType` checks if the input is a valid CSS state type by verifying if it is a
+ * string and included in a predefined list of CSS states.
+ *
+ * @param {CssStatesType} input - The `input` parameter in the `isCssStateType` function is of type
+ * `CssStatesType`.
+ * @returns {boolean} The function `isCssStateType` is returning a boolean value.
+ */
+const isCssStateType = (input) => {
+  return typeof input === 'string' && ui.CssStates.includes(input);
+};
 
+exports.BackgroundColorMap = BackgroundColorMap;
 exports.BackgroundColors = BackgroundColors;
+exports.BorderColorMap = BorderColorMap;
 exports.BorderColors = BorderColors;
+exports.BorderMap = BorderMap;
 exports.BorderRadius = BorderRadius;
+exports.Borders = Borders;
 exports.Colors = Colors;
 exports.FillBackgroundColors = FillBackgroundColors;
+exports.ShadowMap = ShadowMap;
 exports.Shadows = Shadows;
 exports.Spacing = Spacing;
 exports.StrokeBackgroundColors = StrokeBackgroundColors;
+exports.TextColorMap = TextColorMap;
 exports.TextColors = TextColors;
 exports.isAccordionObserverPayload = isAccordionObserverPayload;
 exports.isArrayOfType = isArrayOfType;
 exports.isBackgroundColorTokenType = isBackgroundColorTokenType;
 exports.isBorderColorTokenType = isBorderColorTokenType;
 exports.isBorderRadiusTokenType = isBorderRadiusTokenType;
+exports.isBorderTokenType = isBorderTokenType;
 exports.isBoxDisplayType = isBoxDisplayType;
 exports.isBreakpointsForPrefixType = isBreakpointsForPrefixType;
 exports.isBreakpointsTokenType = isBreakpointsTokenType;
+exports.isDirectionalBorderRadiusType = isDirectionalBorderRadiusType;
 exports.isDirectionalSpacingType = isDirectionalSpacingType;
 exports.isDropdownSourceItemType = isDropdownSourceItemType;
 exports.isFlexAlignItemType = isFlexAlignItemType;
@@ -361,12 +649,12 @@ exports.isFlexDirectionType = isFlexDirectionType;
 exports.isFlexJustifyContentType = isFlexJustifyContentType;
 exports.isGridColumnType = isGridColumnType;
 exports.isGridRowType = isGridRowType;
-exports.isHTMLVegaSidenavLinkElement = isHTMLVegaSidenavLinkElement;
 exports.isNonNullable = isNonNullable;
 exports.isResponsiveType = isResponsiveType;
 exports.isSelectSourceItemType = isSelectSourceItemType;
 exports.isShadowsTokenType = isShadowsTokenType;
 exports.isSpacingTokenType = isSpacingTokenType;
+exports.isStateVariantTokenType = isStateVariantTokenType;
 exports.isTextColorTokenType = isTextColorTokenType;
 exports.isTranslocationType = isTranslocationType;
 exports.isTypographyTokenType = isTypographyTokenType;

package/dist/cjs/{typography-358013af.js → typography-3d2ba97d.js}

@@ -1012,6 +1012,17 @@ const Typography = {
 };
 // prettier-ignore
 const TypographyKeys = ["font-h1", "font-h2", "font-h3", "font-h4", "font-h5", "font-h6", "font-p1-short", "font-p1-long", "font-p2-short", "font-p2-long", "font-btn-label", "font-btn-label-lg", "font-btn-label-sm", "font-btn-link-label", "font-btn-link-label-lg", "font-btn-link-label-sm", "font-field-label", "font-field-label-sm", "font-field-label-xs", "font-field-label-lg", "font-field-label-em", "font-field-label-sm-em", "font-field-label-xs-em", "font-field-label-lg-em", "font-field-value", "font-field-value-sm", "font-field-value-em", "font-field-value-disabled", "font-sidebar-link", "font-sidebar-link-em", "font-footnote1-short", "font-footnote1-long", "font-footnote2-short", "font-footnote2-long", "font-h-modal", "font-keypad-label", "font-keypad-label-large"];
+const TypographyUrls = {
+  'inter': {
+    name: 'Inter',
+    url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap',
+  },
+  'roboto-mono': {
+    name: 'Roboto Mono',
+    url: 'https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap',
+  },
+};
 
 exports.Typography = Typography;
 exports.TypographyKeys = TypographyKeys;
+exports.TypographyUrls = TypographyUrls;

package/dist/cjs/{ui-97068bc7.js → ui-23cd9abb.js}

@@ -25,7 +25,7 @@ exports.DeviceType = void 0;
 function findParent(el, selector) {
   if (!el)
     return null;
-  const parent = el.parentElement;
+  const parent = el.parentElement || el.getRootNode()['host'];
   return (parent === null || parent === void 0 ? void 0 : parent.matches(selector)) ? parent : findParent(parent, selector);
 }
 /**
@@ -67,14 +67,11 @@ const arrayToClassString = (classes) => {
  * @returns {boolean} A boolean value.
  */
 function isParent(element, target) {
+  if (!element || !target)
+    return false;
   if (element === target)
     return true;
-  if (element) {
-    return isParent(element.parentElement, target);
-  }
-  else {
-    return false;
-  }
+  return isParent(element.parentElement || element.getRootNode()['host'], target);
 }
 /**
  * "Scroll the container to the item."
@@ -173,11 +170,27 @@ function isTextWrapped(element) {
 function getElementComputedStyle(element, styleName) {
   return window.getComputedStyle(element).getPropertyValue(styleName);
 }
+/**
+ * Get the deep active element in shadow component
+ *
+ * @param {Document | ShadowRoot} root the root element
+ * @returns {HTMLElement|null} active element
+ */
+function getDeepActiveElementInShadow(root = document) {
+  const activeEl = root.activeElement;
+  if (activeEl && activeEl.shadowRoot) {
+    return getDeepActiveElementInShadow(activeEl.shadowRoot);
+  }
+  else {
+    return activeEl;
+  }
+}
 
 exports.arrayToClassString = arrayToClassString;
 exports.containerScrollToItem = containerScrollToItem;
 exports.extractNumberFromString = extractNumberFromString;
 exports.findParent = findParent;
+exports.getDeepActiveElementInShadow = getDeepActiveElementInShadow;
 exports.getDeviceType = getDeviceType;
 exports.getElementComputedStyle = getElementComputedStyle;
 exports.getHexFromShorthand = getHexFromShorthand;