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

package/dist/esm/vega-font.entry.js

@@ -1,22 +1,22 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3e41c219.js';
-import { s as sanitizeVegaComponent } from './component-ff56c5f5.js';
-import { I as InjectVegaSlimmer } from './global-slimmer-registry-f1dec4a2.js';
-import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-0e6dd982.js';
-import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-ee15d7fd.js';
-import { g as getCurrentBreakpoint } from './breakpoints-3152fa9c.js';
+import { h, r as registerInstance, H as Host, g as getElement } from './index-c3505689.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
+import { s as slotPlaceholder } from './placeholder-bf562081.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-b476bb1f.js';
+import { g as getCurrentBreakpoint } from './breakpoints-900a4c99.js';
 import { C as ComponentLoadRequired } from './componentLoadRequired-ec47331b.js';
-import { M as MapToComponentField, V as VegaSlimmer } from './vega-slimmer-d63e92d9.js';
-import { R as ResponsiveFormatFacade } from './responsiveFormatFacade-949f8957.js';
-import { M as MapToComponentMethod } from './map-to-component-method-4e36ea1f.js';
+import { a as MapToComponentField, V as VegaSlimmer } from './vega-slimmer-ce2e45d1.js';
+import { R as ResponsiveFormatFacade } from './responsiveFormatFacade-e91e14ac.js';
 import { L as LogUtility } from './log-a824be80.js';
-import { a as arrayToClassString } from './ui-608b4032.js';
-import { j as formatAndValidTypographyToken, i as formatAndValidTextColor } from './designToken-0b38620e.js';
-import './featureFlagController-5d7e64f1.js';
-import './typeGuard-b2943363.js';
+import { a as arrayToClassString } from './ui-6e5294cb.js';
+import { l as formatAndValidTypographyToken, i as formatAndValidTextColor } from './designToken-9b27a244.js';
+import './ui-535c5fb3.js';
+import './typeGuard-5e282437.js';
 import './typography-03d285b4.js';
 import './number-400b3bf2.js';
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (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;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -33,14 +33,14 @@ class VegaFontVariantController extends VegaSlimmer {
     return ResponsiveFormatFacade.formatCustom(this.variant);
   }
 }
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaFontVariantController.prototype, "variant", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaFontVariantController.prototype, "currentBreakpoint", void 0);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (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;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -67,102 +67,24 @@ const VEGA_FONT_AS_SAFE_LIST = [
 ];
 /** The `VegaFontAsController` class is a TypeScript class that extends `VegaSlimmer` and provides methods for rendering and updating an extra node based on a specified `as` property. */
 class VegaFontAsController extends VegaSlimmer {
-  /**
-   * check should render the extra node
-   */
-  checkAndRenderExtraNode() {
-    const tagName = this.getTagNameFromPropAs(this.as);
-    if (tagName) {
-      this.renderSlotContent(tagName);
-    }
-  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-font-responsive-as}
    */
   /* istanbul ignore next */
   /**
-   * update the extra node className
-   */
-  updateAsNodeClassNameOrTagName() {
-    const tagName = this.getTagNameFromPropAs(this.as);
-    const asNode = this.getAsNode();
-    if ((tagName && asNode && asNode.tagName.toLowerCase() !== tagName) ||
-      (!tagName && asNode) ||
-      (tagName && !asNode)) {
-      this.renderSlotContent(tagName);
-    }
-    else if (asNode) {
-      asNode.className = this.getAsNodeClassName();
-    }
-  }
-  /**
-   * update the extra node when prop as change
-   *
-   * @param {ResponsiveType<VegaFontAs>} newValue the new value
-   */
-  updateExtraNode(newValue) {
-    const newTagName = this.getTagNameFromPropAs(newValue);
-    this.renderSlotContent(newTagName);
-  }
-  /**
-   * The function `getSlotContent` returns a list of child nodes based on the as node.
-   *
-   * @returns {NodeListOf<ChildNode>} a NodeListOf<ChildNode>.
-   */
-  getSlotContent() {
-    const asNode = this.getAsNode();
-    if (asNode) {
-      return asNode.childNodes;
-    }
-    else {
-      return this.host.childNodes;
-    }
-  }
-  /**
-   * The function renders the content of a slot by creating a new element and appending the content to it, then replacing the existing element with the new one.
+   * The function `getTagNameFromPropAs` returns a `VegaFontAs` value based on the input
+   * `ResponsiveType<VegaFontAs>`.
    *
-   * @param {VegaFontAs} as - The "as" parameter is a string that represents the type of element to create. It is used to create a new element using the document.createElement() method.
+   * @returns {VegaFontAs} a value of type `VegaFontAs`.
    */
-  renderSlotContent(as) {
-    if (!this.isSafeAs(as)) {
-      LogUtility.warn(`The as value ${as} is invalid, it must be a value of: `, VEGA_FONT_AS_SAFE_LIST);
-    }
-    else {
-      const content = this.getSlotContent();
-      let extraNode = null;
-      try {
-        if (as) {
-          extraNode = document.createElement(as);
-          extraNode.className = this.getAsNodeClassName();
-        }
-        // eslint-disable-next-line no-empty
-      }
-      catch (e) { }
-      const nodeLength = content.length;
-      for (let i = 0; i < nodeLength; i++) {
-        if (extraNode) {
-          extraNode.appendChild(content[0]);
-        }
-        else {
-          this.host.appendChild(content[0]);
-        }
-      }
-      if (extraNode) {
-        if (this.host.childNodes.length > 0 && this.host.firstElementChild) {
-          this.host.replaceChild(extraNode, this.host.firstElementChild);
-        }
-        else {
-          this.host.appendChild(extraNode);
-        }
-      }
-      else {
-        const oldAsNode = this.getAsNode();
-        if (oldAsNode) {
-          oldAsNode.remove();
-        }
-      }
+  getTagNameFromPropAs() {
+    const result = ResponsiveFormatFacade.formatCustom(this.as) || '';
+    if (!this.isSafeAs(result)) {
+      LogUtility.warn(`The as value ${result} is invalid, it must be a value of: `, VEGA_FONT_AS_SAFE_LIST);
+      return '';
     }
+    return result;
   }
   /**
    * The function checks if a given value is safe to use as a VegaFontAs.
@@ -177,64 +99,12 @@ class VegaFontAsController extends VegaSlimmer {
     }
     return false;
   }
-  /**
-   * The function returns the first element with the class "vega-font-as-node" as an HTMLElement or null if no such element exists.
-   *
-   * @returns {Nullable<HTMLElement>} The method is returning a Nullable<HTMLElement> object.
-   */
-  getAsNode() {
-    return this.host.querySelector('.vega-font-as-node');
-  }
-  /**
-   * The function returns a string that combines the class name from a classesController with the string "vega-font-as-node".
-   *
-   * @returns {string} The method is returning a string that is the concatenation of the result of the
-   * `getClassName()` method from the `classesController` object and the string "vega-font-as-node".
-   */
-  getAsNodeClassName() {
-    return `${this.classesController.getClassName()} vega-font-as-node`;
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-font-responsive-as}
-   */
-  /* istanbul ignore next */
-  /**
-   * The function `getTagNameFromPropAs` returns a `VegaFontAs` value based on the input
-   * `ResponsiveType<VegaFontAs>`.
-   *
-   * @param {ResponsiveType<VegaFontAs>} input - The input parameter is of type ResponsiveType<VegaFontAs>. It represents the font as
-   * a string or an object with breakpoints. The VegaFontAs type is a string type that represents the
-   * font name or alias.
-   * @returns {VegaFontAs} a value of type `VegaFontAs`.
-   */
-  getTagNameFromPropAs(input) {
-    return ResponsiveFormatFacade.formatCustom(input) || '';
-  }
 }
-__decorate$2([
-  MapToComponentField()
-], VegaFontAsController.prototype, "host", void 0);
-__decorate$2([
+__decorate$3([
   MapToComponentField()
 ], VegaFontAsController.prototype, "as", void 0);
-__decorate$2([
-  MapToComponentField()
-], VegaFontAsController.prototype, "currentBreakpoint", void 0);
-__decorate$2([
-  MapToComponentField()
-], VegaFontAsController.prototype, "classesController", void 0);
-__decorate$2([
-  MapToComponentMethod('componentDidLoad')
-], VegaFontAsController.prototype, "checkAndRenderExtraNode", null);
-__decorate$2([
-  MapToComponentMethod('componentDidUpdate')
-], VegaFontAsController.prototype, "updateAsNodeClassNameOrTagName", null);
-__decorate$2([
-  MapToComponentMethod('watchAsChange')
-], VegaFontAsController.prototype, "updateExtraNode", null);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (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;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -262,16 +132,33 @@ class VegaFontClassesController extends VegaSlimmer {
     return arrayToClassString(hostClasses);
   }
 }
-__decorate$1([
+__decorate$2([
   MapToComponentField()
 ], VegaFontClassesController.prototype, "color", void 0);
-__decorate$1([
+__decorate$2([
   MapToComponentField()
 ], VegaFontClassesController.prototype, "disableResponsive", void 0);
-__decorate$1([
+__decorate$2([
   MapToComponentField()
 ], VegaFontClassesController.prototype, "variantController", void 0);
 
+var __decorate$1 = (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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* The `VegaFontRenderer` class in TypeScript React extends `VegaSlimmer` and renders an HTML element based on specified properties. */
+class VegaFontRenderer extends VegaSlimmer {
+  render(hostClasses) {
+    const tagName = this.asController.getTagNameFromPropAs();
+    return tagName ? h(tagName, { className: hostClasses }, [h("slot", null)]) : h("slot", null);
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaFontRenderer.prototype, "asController", void 0);
+
 const vegaFontCss = ":host(.v-text-primary),.v-text-primary{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host(.v-text-secondary),.v-text-secondary{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host(.v-text-inverted-primary),.v-text-inverted-primary{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host(.v-text-inverted-secondary),.v-text-inverted-secondary{color:rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1))}:host(.v-text-link),.v-text-link{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host(.v-text-link-hover),.v-text-link-hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(.v-text-link-active),.v-text-link-active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host(.v-text-link-focus),.v-text-link-focus{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}:host(.v-text-link-visited),.v-text-link-visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}:host(.v-text-danger-link),.v-text-danger-link{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host(.v-text-danger-link-hover),.v-text-danger-link-hover{color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}:host(.v-text-danger-link-active),.v-text-danger-link-active{color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))}:host(.v-text-danger-link-focus),.v-text-danger-link-focus{color:rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))}:host(.v-text-danger-link-visited),.v-text-danger-link-visited{color:rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))}:host(.v-text-success),.v-text-success{color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.v-text-error),.v-text-error{color:rgba(var(--v-text-error, 189, 41, 71, 1))}:host(.v-text-black),.v-text-black{color:rgba(var(--v-text-black, 32, 54, 69, 1))}:host(.v-text-white),.v-text-white{color:rgba(var(--v-text-white, 252, 252, 252, 1))}:host(.v-text-disabled),.v-text-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.v-text-input-disabled),.v-text-input-disabled{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host(.v-text-sidebar-link),.v-text-sidebar-link{color:rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))}:host(.v-text-sidebar-link-hover),.v-text-sidebar-link-hover{color:rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))}:host(.v-text-sidebar-link-selected),.v-text-sidebar-link-selected{color:rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))}:host(.v-text-input-placeholder),.v-text-input-placeholder{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}:host(.v-text-accent1-primary),.v-text-accent1-primary{color:rgba(var(--v-text-accent1-primary, 115, 230, 220, 1))}:host(.v-text-accent2-primary),.v-text-accent2-primary{color:rgba(var(--v-text-accent2-primary, 128, 107, 255, 1))}:host(.v-text-accent3-primary),.v-text-accent3-primary{color:rgba(var(--v-text-accent3-primary, 255, 220, 131, 1))}:host(.v-text-accent4-primary),.v-text-accent4-primary{color:rgba(var(--v-text-accent4-primary, 255, 149, 113, 1))}:host(.v-text-accent5-primary),.v-text-accent5-primary{color:rgba(var(--v-text-accent5-primary, 0, 187, 255, 1))}:host(.v-text-accent6-primary),.v-text-accent6-primary{color:rgba(var(--v-text-accent6-primary, 240, 52, 91, 1))}:host(.v-text-accent7-primary),.v-text-accent7-primary{color:rgba(var(--v-text-accent7-primary, 37, 159, 159, 1))}:host(.v-text-accent8-primary),.v-text-accent8-primary{color:rgba(var(--v-text-accent8-primary, 86, 61, 130, 1))}:host(.v-text-accent9-primary),.v-text-accent9-primary{color:rgba(var(--v-text-accent9-primary, 255, 191, 63, 1))}:host(.v-text-accent10-primary),.v-text-accent10-primary{color:rgba(var(--v-text-accent10-primary, 237, 122, 35, 1))}:host(.v-text-site-footer-link),.v-text-site-footer-link{color:rgba(var(--v-text-site-footer-link, 171, 198, 216, 1))}:host(.v-text-site-footer-link-hover),.v-text-site-footer-link-hover{color:rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1))}:host(.v-text-site-footer-link-active),.v-text-site-footer-link-active{color:rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1))}:host(.v-text-brand),.v-text-brand{color:rgba(var(--v-text-brand, 89, 96, 99, 1))}:host(.v-text-on-action),.v-text-on-action{color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}:host(.v-text-on-danger),.v-text-on-danger{color:rgba(var(--v-text-on-danger, 252, 252, 252, 1))}:host(.v-text-on-disabled),.v-text-on-disabled{color:rgba(var(--v-text-on-disabled, 252, 252, 252, 1))}:host(.v-font-h1),.v-font-h1{font-family:\"Inter\", sans-serif;font-size:42px;font-weight:700;line-height:50px;letter-spacing:0.42px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-h1:not(.disable-responsive)),.v-font-h1:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:42px;font-weight:700;line-height:50px;letter-spacing:2.52px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-h1:not(.disable-responsive)),.v-font-h1:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:48px;font-weight:700;line-height:56px;letter-spacing:0.96px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-h1:not(.disable-responsive)),.v-font-h1:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:60px;font-weight:700;line-height:70px;letter-spacing:1.8px}}:host(.v-font-h2),.v-font-h2{font-family:\"Inter\", sans-serif;font-size:32px;font-weight:700;line-height:40px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-h2:not(.disable-responsive)),.v-font-h2:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:32px;font-weight:700;line-height:40px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-h2:not(.disable-responsive)),.v-font-h2:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:36px;font-weight:700;line-height:44px;letter-spacing:1.8px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-h2:not(.disable-responsive)),.v-font-h2:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:42px;font-weight:700;line-height:52px;letter-spacing:0.42px}}:host(.v-font-h3),.v-font-h3{font-family:\"Inter\", sans-serif;font-size:28px;font-weight:500;line-height:36px;letter-spacing:0.28px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-h3:not(.disable-responsive)),.v-font-h3:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:28px;font-weight:500;line-height:36px;letter-spacing:0.28px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-h3:not(.disable-responsive)),.v-font-h3:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:28px;font-weight:500;line-height:36px;letter-spacing:0.28px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-h3:not(.disable-responsive)),.v-font-h3:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:32px;font-weight:500;line-height:44px;letter-spacing:0.32px}}:host(.v-font-h4),.v-font-h4{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-h4:not(.disable-responsive)),.v-font-h4:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-h4:not(.disable-responsive)),.v-font-h4:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-h4:not(.disable-responsive)),.v-font-h4:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:28px;font-weight:700;line-height:36px;letter-spacing:0px}}:host(.v-font-h5),.v-font-h5{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-h5:not(.disable-responsive)),.v-font-h5:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-h5:not(.disable-responsive)),.v-font-h5:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-h5:not(.disable-responsive)),.v-font-h5:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:28px;letter-spacing:0px}}:host(.v-font-h6),.v-font-h6{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-h6:not(.disable-responsive)),.v-font-h6:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-h6:not(.disable-responsive)),.v-font-h6:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-h6:not(.disable-responsive)),.v-font-h6:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:25px;letter-spacing:0px}}:host(.v-font-p1-short),.v-font-p1-short{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:28px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-p1-short:not(.disable-responsive)),.v-font-p1-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:27px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-p1-short:not(.disable-responsive)),.v-font-p1-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:27px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-p1-short:not(.disable-responsive)),.v-font-p1-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:27px;letter-spacing:0px}}:host(.v-font-p1-long),.v-font-p1-long{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:32px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-p1-long:not(.disable-responsive)),.v-font-p1-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:30px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-p1-long:not(.disable-responsive)),.v-font-p1-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:30px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-p1-long:not(.disable-responsive)),.v-font-p1-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:30px;letter-spacing:0px}}:host(.v-font-p2-short),.v-font-p2-short{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:500;line-height:28px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-p2-short:not(.disable-responsive)),.v-font-p2-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-p2-short:not(.disable-responsive)),.v-font-p2-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-p2-short:not(.disable-responsive)),.v-font-p2-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host(.v-font-p2-long),.v-font-p2-long{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:500;line-height:30px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-p2-long:not(.disable-responsive)),.v-font-p2-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-p2-long:not(.disable-responsive)),.v-font-p2-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-p2-long:not(.disable-responsive)),.v-font-p2-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}:host(.v-font-btn-label),.v-font-btn-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-btn-label:not(.disable-responsive)),.v-font-btn-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-btn-label:not(.disable-responsive)),.v-font-btn-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-btn-label:not(.disable-responsive)),.v-font-btn-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.v-font-btn-label-lg),.v-font-btn-label-lg{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-btn-label-lg:not(.disable-responsive)),.v-font-btn-label-lg:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-btn-label-lg:not(.disable-responsive)),.v-font-btn-label-lg:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-btn-label-lg:not(.disable-responsive)),.v-font-btn-label-lg:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.v-font-btn-label-sm),.v-font-btn-label-sm{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-btn-label-sm:not(.disable-responsive)),.v-font-btn-label-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-btn-label-sm:not(.disable-responsive)),.v-font-btn-label-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-btn-label-sm:not(.disable-responsive)),.v-font-btn-label-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}:host(.v-font-btn-link-label),.v-font-btn-link-label{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-btn-link-label:not(.disable-responsive)),.v-font-btn-link-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-btn-link-label:not(.disable-responsive)),.v-font-btn-link-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-btn-link-label:not(.disable-responsive)),.v-font-btn-link-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}:host(.v-font-btn-link-label-lg),.v-font-btn-link-label-lg{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-btn-link-label-lg:not(.disable-responsive)),.v-font-btn-link-label-lg:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-btn-link-label-lg:not(.disable-responsive)),.v-font-btn-link-label-lg:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-btn-link-label-lg:not(.disable-responsive)),.v-font-btn-link-label-lg:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:22px;letter-spacing:0px}}:host(.v-font-btn-link-label-sm),.v-font-btn-link-label-sm{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-btn-link-label-sm:not(.disable-responsive)),.v-font-btn-link-label-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-btn-link-label-sm:not(.disable-responsive)),.v-font-btn-link-label-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-btn-link-label-sm:not(.disable-responsive)),.v-font-btn-link-label-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;letter-spacing:0px}}:host(.v-font-field-label),.v-font-field-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-label:not(.disable-responsive)),.v-font-field-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-label:not(.disable-responsive)),.v-font-field-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-label:not(.disable-responsive)),.v-font-field-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host(.v-font-field-label-sm),.v-font-field-label-sm{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-label-sm:not(.disable-responsive)),.v-font-field-label-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-label-sm:not(.disable-responsive)),.v-font-field-label-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-label-sm:not(.disable-responsive)),.v-font-field-label-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}:host(.v-font-field-label-xs),.v-font-field-label-xs{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-label-xs:not(.disable-responsive)),.v-font-field-label-xs:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-label-xs:not(.disable-responsive)),.v-font-field-label-xs:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-label-xs:not(.disable-responsive)),.v-font-field-label-xs:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.v-font-field-label-lg),.v-font-field-label-lg{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-label-lg:not(.disable-responsive)),.v-font-field-label-lg:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-label-lg:not(.disable-responsive)),.v-font-field-label-lg:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-label-lg:not(.disable-responsive)),.v-font-field-label-lg:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}:host(.v-font-field-label-em),.v-font-field-label-em{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-label-em:not(.disable-responsive)),.v-font-field-label-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-label-em:not(.disable-responsive)),.v-font-field-label-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-label-em:not(.disable-responsive)),.v-font-field-label-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}:host(.v-font-field-label-sm-em),.v-font-field-label-sm-em{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-label-sm-em:not(.disable-responsive)),.v-font-field-label-sm-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-label-sm-em:not(.disable-responsive)),.v-font-field-label-sm-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-label-sm-em:not(.disable-responsive)),.v-font-field-label-sm-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.v-font-field-label-xs-em),.v-font-field-label-xs-em{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-label-xs-em:not(.disable-responsive)),.v-font-field-label-xs-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-label-xs-em:not(.disable-responsive)),.v-font-field-label-xs-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-label-xs-em:not(.disable-responsive)),.v-font-field-label-xs-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.v-font-field-label-lg-em),.v-font-field-label-lg-em{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-label-lg-em:not(.disable-responsive)),.v-font-field-label-lg-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-label-lg-em:not(.disable-responsive)),.v-font-field-label-lg-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-label-lg-em:not(.disable-responsive)),.v-font-field-label-lg-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.v-font-field-value),.v-font-field-value{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-value:not(.disable-responsive)),.v-font-field-value:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-value:not(.disable-responsive)),.v-font-field-value:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-value:not(.disable-responsive)),.v-font-field-value:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.v-font-field-value-sm),.v-font-field-value-sm{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-value-sm:not(.disable-responsive)),.v-font-field-value-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-value-sm:not(.disable-responsive)),.v-font-field-value-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-value-sm:not(.disable-responsive)),.v-font-field-value-sm:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}}:host(.v-font-field-value-em),.v-font-field-value-em{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-value-em:not(.disable-responsive)),.v-font-field-value-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-value-em:not(.disable-responsive)),.v-font-field-value-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-value-em:not(.disable-responsive)),.v-font-field-value-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:22px;letter-spacing:0px}}:host(.v-font-field-value-disabled),.v-font-field-value-disabled{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-field-value-disabled:not(.disable-responsive)),.v-font-field-value-disabled:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-field-value-disabled:not(.disable-responsive)),.v-font-field-value-disabled:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-field-value-disabled:not(.disable-responsive)),.v-font-field-value-disabled:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.v-font-sidebar-link),.v-font-sidebar-link{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-sidebar-link:not(.disable-responsive)),.v-font-sidebar-link:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-sidebar-link:not(.disable-responsive)),.v-font-sidebar-link:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-sidebar-link:not(.disable-responsive)),.v-font-sidebar-link:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:24px;letter-spacing:0px}}:host(.v-font-sidebar-link-em),.v-font-sidebar-link-em{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-sidebar-link-em:not(.disable-responsive)),.v-font-sidebar-link-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-sidebar-link-em:not(.disable-responsive)),.v-font-sidebar-link-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-sidebar-link-em:not(.disable-responsive)),.v-font-sidebar-link-em:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.v-font-footnote1-short),.v-font-footnote1-short{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-footnote1-short:not(.disable-responsive)),.v-font-footnote1-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-footnote1-short:not(.disable-responsive)),.v-font-footnote1-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-footnote1-short:not(.disable-responsive)),.v-font-footnote1-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host(.v-font-footnote1-long),.v-font-footnote1-long{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-footnote1-long:not(.disable-responsive)),.v-font-footnote1-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-footnote1-long:not(.disable-responsive)),.v-font-footnote1-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-footnote1-long:not(.disable-responsive)),.v-font-footnote1-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px}}:host(.v-font-footnote2-short),.v-font-footnote2-short{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-footnote2-short:not(.disable-responsive)),.v-font-footnote2-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-footnote2-short:not(.disable-responsive)),.v-font-footnote2-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-footnote2-short:not(.disable-responsive)),.v-font-footnote2-short:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px}}:host(.v-font-footnote2-long),.v-font-footnote2-long{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:20px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-footnote2-long:not(.disable-responsive)),.v-font-footnote2-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-footnote2-long:not(.disable-responsive)),.v-font-footnote2-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-footnote2-long:not(.disable-responsive)),.v-font-footnote2-long:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:18px;letter-spacing:0px}}:host(.v-font-h-modal),.v-font-h-modal{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-h-modal:not(.disable-responsive)),.v-font-h-modal:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-h-modal:not(.disable-responsive)),.v-font-h-modal:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-h-modal:not(.disable-responsive)),.v-font-h-modal:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px}}:host(.v-font-keypad-label),.v-font-keypad-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-keypad-label:not(.disable-responsive)),.v-font-keypad-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-keypad-label:not(.disable-responsive)),.v-font-keypad-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-keypad-label:not(.disable-responsive)),.v-font-keypad-label:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}:host(.v-font-keypad-label-large),.v-font-keypad-label-large{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.v-font-keypad-label-large:not(.disable-responsive)),.v-font-keypad-label-large:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.v-font-keypad-label-large:not(.disable-responsive)),.v-font-keypad-label-large:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.v-font-keypad-label-large:not(.disable-responsive)),.v-font-keypad-label-large:not(.disable-responsive){font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px}}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -292,6 +179,7 @@ const VegaFont = class {
     this.variantController = new VegaFontVariantController();
     this.asController = new VegaFontAsController();
     this.classesController = new VegaFontClassesController();
+    this.renderer = new VegaFontRenderer();
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Specifies the typography token used for styling the text within this component. A typography token includes values for font size and line height.
@@ -320,7 +208,8 @@ const VegaFont = class {
   }
   render() {
     const hostClasses = this.classesController.getClassName();
-    return sanitizeVegaComponent(h(Host, { class: hostClasses }, h("slot", null)), this.host);
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, { class: hostClasses }, this.renderer.render(hostClasses)), this.host);
   }
   get host() { return getElement(this); }
   static get watchers() { return {
@@ -342,6 +231,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaFont.prototype, "classesController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFont.prototype, "renderer", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaFont.prototype, "watchAsChange", null);

package/dist/esm/vega-form.entry.js

@@ -1,29 +1,25 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3e41c219.js';
-import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-4b2250b8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-c3505689.js';
+import { F as FormFieldControllerSlimmer, V as VegaInternalValid } from './formFieldControllerSlimmer-862c5c79.js';
 import { C as ChangeManager } from './changeManager-935d420b.js';
-import { O as Observer } from './observer-3959f9dd.js';
-import { m as FORM_ELEMENT_VALIDATE, c as FORM_ELEMENT_VALUE_CHANGE, j as FORM_FIELD_ELEMENT_DISCONNECTED, i as FORM_FIELD_PENDING_VALID_CHANGE, k as FORM_RESET_OPERATION_TRIGGERED, F as FORM_SUBMIT, a as FORM_RESET } from './staticSubjectTitle-ba738b9d.js';
-import { e as isObjectArrayLike } from './array-195d7d64.js';
-import { s as sanitizeVegaComponent } from './component-ff56c5f5.js';
-import { f as findParent, i as isElementVisible, b as isParent } from './ui-608b4032.js';
-import { I as InjectVegaSlimmer } from './global-slimmer-registry-f1dec4a2.js';
-import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-0e6dd982.js';
-import { c as createEventEmitSlimmer } from './eventEmitSlimmer-da1fd54e.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-7229b70d.js';
-import { k as VegaFormSubmit, l as VegaFormReset, m as VegaValidate } from './vegaEventId-78665c18.js';
-import { C as ChildNodesNotifyObserverSlimmer } from './childNodesNotifyObserverSlimmer-616bfa28.js';
-import './vega-slimmer-d63e92d9.js';
-import './map-to-component-method-4e36ea1f.js';
-import './featureFlagController-5d7e64f1.js';
-import './log-a824be80.js';
+import { c as createEventEmitSlimmer, O as Observer, d as domNodeSubjectFactory } from './eventEmitSlimmer-d605ac81.js';
+import { g as FORM_ELEMENT_VALIDATE, b as FORM_ELEMENT_VALUE_CHANGE, d as FORM_FIELD_ELEMENT_DISCONNECTED, c as FORM_FIELD_PENDING_VALID_CHANGE, e as FORM_RESET_OPERATION_TRIGGERED, F as FORM_SUBMIT, a as FORM_RESET } from './staticSubjectTitle-bb1e9570.js';
+import { i as isObjectArrayLike } from './array-e1522673.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { f as findParent, i as isElementVisible, c as isParent } from './ui-6e5294cb.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-65a53b20.js';
+import { k as VegaFormSubmit, l as VegaFormReset, m as VegaValidate } from './internalVegaEventManager-efa77ebb.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './childNodesNotifyObserverSlimmer-0d2eac09.js';
+import './vega-slimmer-ce2e45d1.js';
 import './string-be824360.js';
-import './misc-9fdbcfbb.js';
-import './dynamic-slimmer-16826d2b.js';
-import './pageResizeObserverSlimmer-ee15d7fd.js';
-import './breakpoints-3152fa9c.js';
+import './misc-c21a85c9.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './pageResizeObserverSlimmer-b476bb1f.js';
+import './breakpoints-900a4c99.js';
+import './ui-535c5fb3.js';
+import './log-a824be80.js';
 import './number-400b3bf2.js';
-import './domNodeSubjectObserverFactory-8aeac4b6.js';
-import './internalVegaEventManager-4ab886bc.js';
 
 /** The `ImmutableMap` class is a TypeScript implementation of an immutable map data structure that allows for mutation through a `withMutation` method. */
 class ImmutableMap {
@@ -166,14 +162,6 @@ const VegaForm = class {
         e.stopPropagation();
       },
     });
-    this.childValidateEventPrevent = new ChildNodesEventPreventSlimmer([VegaValidate], () => this.host, {
-      useCapture: true,
-      customPreventHandle: (e) => {
-        if (e.target['tagName'] !== 'VEGA-FORM') {
-          e.stopPropagation();
-        }
-      },
-    });
     this.childNotifyObserver = new ChildNodesNotifyObserverSlimmer(FORM_ELEMENT_VALIDATE, (input) => this.updateInternalValidStatus(input));
     this.childNodeValueChangeObserver = new ChildNodesNotifyObserverSlimmer(FORM_ELEMENT_VALUE_CHANGE, () => this.updateInternalTouchedStatus());
     this.invalidFieldPathMap = new ImmutableMap(new Map(), (newMap) => {
@@ -280,15 +268,16 @@ const VegaForm = class {
   async valid(showError = true) {
     const result = { isValid: true, invalidFields: [] };
     await this.navigateVegaFormChildren(async (element, isForm) => {
-      if (typeof element['valid'] === 'function') {
-        if (isForm) {
-          const nestedFormValidationResult = await element.valid(showError);
-          if (!nestedFormValidationResult.isValid) {
-            result.isValid = false;
-            result.invalidFields.push(...nestedFormValidationResult.invalidFields);
-          }
+      if (typeof element['valid'] === 'function' && isForm) {
+        const nestedFormValidationResult = await element.valid(showError);
+        if (!nestedFormValidationResult.isValid) {
+          result.isValid = false;
+          result.invalidFields.push(...nestedFormValidationResult.invalidFields);
         }
-        else if (!(await element['valid'](showError))) {
+      }
+      else {
+        const isValid = await this.handleChildFormFieldElementValid(element, showError);
+        if (!isValid) {
           result.isValid = false;
           result.invalidFields.push(this.getFormFieldName(element));
         }
@@ -525,6 +514,22 @@ const VegaForm = class {
   isElementInCurrentForm(element) {
     return this.invalidFieldPathMap.has(element) || isParent(element, this.host);
   }
+  async handleChildFormFieldElementValid(element, showError) {
+    const subject = domNodeSubjectFactory.getSubject(element, VegaInternalValid);
+    const isValid = await new Promise((resolve) => {
+      //This setTimeout method here to avoid the dom node subject observer not existing and blocks the promise status
+      const timerId = setTimeout(() => {
+        resolve(true);
+      }, 2000);
+      ChangeManager.notify(subject, {
+        host: element,
+        message: showError,
+        promiseResolve: resolve,
+        timerId,
+      });
+    });
+    return isValid;
+  }
   get host() { return getElement(this); }
   static get watchers() { return {
     "isValid": ["watchIsValid"]
@@ -548,9 +553,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaForm.prototype, "childFormValidateEventPrevent", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaForm.prototype, "childValidateEventPrevent", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaForm.prototype, "childNotifyObserver", void 0);

package/dist/esm/vega-grid.entry.js

@@ -0,0 +1,85 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-c3505689.js';
+import { f as formatAndValidResponsiveToken } from './designToken-9b27a244.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { a as arrayToClassString } from './ui-6e5294cb.js';
+import './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import './typeGuard-5e282437.js';
+import './breakpoints-900a4c99.js';
+import './ui-535c5fb3.js';
+import './typography-03d285b4.js';
+import './log-a824be80.js';
+import './responsiveFormatFacade-e91e14ac.js';
+import './number-400b3bf2.js';
+
+const vegaGridCss = ":host(.v-gap-0),.v-gap-0{gap:0px}:host(.v-gap-size-0),.v-gap-size-0{gap:0px}:host(.v-gap-size-4),.v-gap-size-4{gap:4px}:host(.v-gap-size-8),.v-gap-size-8{gap:8px}:host(.v-gap-size-12),.v-gap-size-12{gap:12px}:host(.v-gap-size-16),.v-gap-size-16{gap:16px}:host(.v-gap-size-20),.v-gap-size-20{gap:20px}:host(.v-gap-size-24),.v-gap-size-24{gap:24px}:host(.v-gap-size-32),.v-gap-size-32{gap:32px}:host(.v-gap-size-40),.v-gap-size-40{gap:40px}:host(.v-gap-size-48),.v-gap-size-48{gap:48px}:host(.v-gap-size-64),.v-gap-size-64{gap:64px}:host(.v-gap-size-72),.v-gap-size-72{gap:72px}:host(.v-gap-size-80),.v-gap-size-80{gap:80px}:host(.v-gap-size-112),.v-gap-size-112{gap:112px}:host(.v-gap-size-2),.v-gap-size-2{gap:2px}@media (min-width: 320px){:host(.S\\:v-gap-0),.S\\:v-gap-0{gap:0px}:host(.S\\:v-gap-size-0),.S\\:v-gap-size-0{gap:0px}:host(.S\\:v-gap-size-4),.S\\:v-gap-size-4{gap:4px}:host(.S\\:v-gap-size-8),.S\\:v-gap-size-8{gap:8px}:host(.S\\:v-gap-size-12),.S\\:v-gap-size-12{gap:12px}:host(.S\\:v-gap-size-16),.S\\:v-gap-size-16{gap:16px}:host(.S\\:v-gap-size-20),.S\\:v-gap-size-20{gap:20px}:host(.S\\:v-gap-size-24),.S\\:v-gap-size-24{gap:24px}:host(.S\\:v-gap-size-32),.S\\:v-gap-size-32{gap:32px}:host(.S\\:v-gap-size-40),.S\\:v-gap-size-40{gap:40px}:host(.S\\:v-gap-size-48),.S\\:v-gap-size-48{gap:48px}:host(.S\\:v-gap-size-64),.S\\:v-gap-size-64{gap:64px}:host(.S\\:v-gap-size-72),.S\\:v-gap-size-72{gap:72px}:host(.S\\:v-gap-size-80),.S\\:v-gap-size-80{gap:80px}:host(.S\\:v-gap-size-112),.S\\:v-gap-size-112{gap:112px}:host(.S\\:v-gap-size-2),.S\\:v-gap-size-2{gap:2px}}@media (min-width: 768px){:host(.M\\:v-gap-0),.M\\:v-gap-0{gap:0px}:host(.M\\:v-gap-size-0),.M\\:v-gap-size-0{gap:0px}:host(.M\\:v-gap-size-4),.M\\:v-gap-size-4{gap:4px}:host(.M\\:v-gap-size-8),.M\\:v-gap-size-8{gap:8px}:host(.M\\:v-gap-size-12),.M\\:v-gap-size-12{gap:12px}:host(.M\\:v-gap-size-16),.M\\:v-gap-size-16{gap:16px}:host(.M\\:v-gap-size-20),.M\\:v-gap-size-20{gap:20px}:host(.M\\:v-gap-size-24),.M\\:v-gap-size-24{gap:24px}:host(.M\\:v-gap-size-32),.M\\:v-gap-size-32{gap:32px}:host(.M\\:v-gap-size-40),.M\\:v-gap-size-40{gap:40px}:host(.M\\:v-gap-size-48),.M\\:v-gap-size-48{gap:48px}:host(.M\\:v-gap-size-64),.M\\:v-gap-size-64{gap:64px}:host(.M\\:v-gap-size-72),.M\\:v-gap-size-72{gap:72px}:host(.M\\:v-gap-size-80),.M\\:v-gap-size-80{gap:80px}:host(.M\\:v-gap-size-112),.M\\:v-gap-size-112{gap:112px}:host(.M\\:v-gap-size-2),.M\\:v-gap-size-2{gap:2px}}@media (min-width: 1024px){:host(.L\\:v-gap-0),.L\\:v-gap-0{gap:0px}:host(.L\\:v-gap-size-0),.L\\:v-gap-size-0{gap:0px}:host(.L\\:v-gap-size-4),.L\\:v-gap-size-4{gap:4px}:host(.L\\:v-gap-size-8),.L\\:v-gap-size-8{gap:8px}:host(.L\\:v-gap-size-12),.L\\:v-gap-size-12{gap:12px}:host(.L\\:v-gap-size-16),.L\\:v-gap-size-16{gap:16px}:host(.L\\:v-gap-size-20),.L\\:v-gap-size-20{gap:20px}:host(.L\\:v-gap-size-24),.L\\:v-gap-size-24{gap:24px}:host(.L\\:v-gap-size-32),.L\\:v-gap-size-32{gap:32px}:host(.L\\:v-gap-size-40),.L\\:v-gap-size-40{gap:40px}:host(.L\\:v-gap-size-48),.L\\:v-gap-size-48{gap:48px}:host(.L\\:v-gap-size-64),.L\\:v-gap-size-64{gap:64px}:host(.L\\:v-gap-size-72),.L\\:v-gap-size-72{gap:72px}:host(.L\\:v-gap-size-80),.L\\:v-gap-size-80{gap:80px}:host(.L\\:v-gap-size-112),.L\\:v-gap-size-112{gap:112px}:host(.L\\:v-gap-size-2),.L\\:v-gap-size-2{gap:2px}}@media (min-width: 1440px){:host(.XL\\:v-gap-0),.XL\\:v-gap-0{gap:0px}:host(.XL\\:v-gap-size-0),.XL\\:v-gap-size-0{gap:0px}:host(.XL\\:v-gap-size-4),.XL\\:v-gap-size-4{gap:4px}:host(.XL\\:v-gap-size-8),.XL\\:v-gap-size-8{gap:8px}:host(.XL\\:v-gap-size-12),.XL\\:v-gap-size-12{gap:12px}:host(.XL\\:v-gap-size-16),.XL\\:v-gap-size-16{gap:16px}:host(.XL\\:v-gap-size-20),.XL\\:v-gap-size-20{gap:20px}:host(.XL\\:v-gap-size-24),.XL\\:v-gap-size-24{gap:24px}:host(.XL\\:v-gap-size-32),.XL\\:v-gap-size-32{gap:32px}:host(.XL\\:v-gap-size-40),.XL\\:v-gap-size-40{gap:40px}:host(.XL\\:v-gap-size-48),.XL\\:v-gap-size-48{gap:48px}:host(.XL\\:v-gap-size-64),.XL\\:v-gap-size-64{gap:64px}:host(.XL\\:v-gap-size-72),.XL\\:v-gap-size-72{gap:72px}:host(.XL\\:v-gap-size-80),.XL\\:v-gap-size-80{gap:80px}:host(.XL\\:v-gap-size-112),.XL\\:v-gap-size-112{gap:112px}:host(.XL\\:v-gap-size-2),.XL\\:v-gap-size-2{gap:2px}}:host{display:grid}:host(.v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}:host(.v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}@media (min-width: 320px){:host(.S\\:v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.S\\:v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.S\\:v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.S\\:v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.S\\:v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.S\\:v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.S\\:v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.S\\:v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.S\\:v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.S\\:v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.S\\:v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.S\\:v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.S\\:v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.S\\:v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.S\\:v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.S\\:v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.S\\:v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.S\\:v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.S\\:v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.S\\:v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.S\\:v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.S\\:v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.S\\:v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.S\\:v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}}@media (min-width: 768px){:host(.M\\:v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.M\\:v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.M\\:v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.M\\:v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.M\\:v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.M\\:v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.M\\:v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.M\\:v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.M\\:v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.M\\:v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.M\\:v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.M\\:v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.M\\:v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.M\\:v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.M\\:v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.M\\:v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.M\\:v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.M\\:v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.M\\:v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.M\\:v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.M\\:v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.M\\:v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.M\\:v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.M\\:v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}}@media (min-width: 1024px){:host(.L\\:v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.L\\:v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.L\\:v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.L\\:v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.L\\:v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.L\\:v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.L\\:v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.L\\:v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.L\\:v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.L\\:v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.L\\:v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.L\\:v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.L\\:v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.L\\:v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.L\\:v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.L\\:v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.L\\:v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.L\\:v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.L\\:v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.L\\:v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.L\\:v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.L\\:v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.L\\:v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.L\\:v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}}@media (min-width: 1440px){:host(.XL\\:v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.XL\\:v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.XL\\:v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.XL\\:v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.XL\\:v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.XL\\:v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.XL\\:v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.XL\\:v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.XL\\:v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.XL\\:v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.XL\\:v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.XL\\:v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}}@media (min-width: 320px){:host(.S\\:v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.S\\:v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.S\\:v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.S\\:v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.S\\:v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.S\\:v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.S\\:v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.S\\:v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.S\\:v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.S\\:v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.S\\:v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.S\\:v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.S\\:v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.S\\:v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.S\\:v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.S\\:v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.S\\:v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.S\\:v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.S\\:v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.S\\:v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.S\\:v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.S\\:v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.S\\:v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.S\\:v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}}@media (min-width: 768px){:host(.M\\:v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.M\\:v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.M\\:v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.M\\:v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.M\\:v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.M\\:v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.M\\:v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.M\\:v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.M\\:v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.M\\:v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.M\\:v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.M\\:v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.M\\:v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.M\\:v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.M\\:v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.M\\:v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.M\\:v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.M\\:v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.M\\:v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.M\\:v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.M\\:v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.M\\:v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.M\\:v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.M\\:v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}}@media (min-width: 1024px){:host(.L\\:v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.L\\:v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.L\\:v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.L\\:v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.L\\:v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.L\\:v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.L\\:v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.L\\:v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.L\\:v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.L\\:v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.L\\:v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.L\\:v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.L\\:v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.L\\:v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.L\\:v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.L\\:v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.L\\:v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.L\\:v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.L\\:v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.L\\:v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.L\\:v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.L\\:v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.L\\:v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.L\\:v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}}@media (min-width: 1440px){:host(.XL\\:v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.XL\\:v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.XL\\:v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.XL\\:v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.XL\\:v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.XL\\:v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.XL\\:v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.XL\\:v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.XL\\:v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.XL\\:v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.XL\\:v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.XL\\:v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    /**
+     * Determines the configuration of the grid columns.
+     *    It can be provided as an integer, string, or a responsive map
+     *    using key-value pairs.
+     *
+     * If provided as an integer from 1 to 12, each column will have the same width.
+     *    The CSS for this configuration is `grid-template-columns: repeat(number, minmax(0, 1fr))`.
+     *
+     * If provided as a string in the format of n-auto
+     *    (e.g., `1-auto`, `2-auto`, ..., `12-auto`),
+     *    each column will have auto width. The CSS for this configuration is
+     *    `grid-template-columns: repeat(number, auto)`.
+     *
+     * Alternatively, you can use a responsive map to define different column configurations
+     *    for various breakpoints. The keys in the map should represent the breakpoints,
+     *    such as `default` or `L`, and the values can be integers or strings following the
+     *    same patterns mentioned above.
+     */
+    this.column = 1;
+    /**
+     * Determines the configuration of the grid rows.
+     *    It can be provided as an integer, string, or a responsive map
+     *    using key-value pairs.
+     *
+     * If provided as an integer from 1 to 6, each row will have the same height.
+     *    The CSS for this configuration is `grid-template-rows: repeat(number, minmax(0, 1fr))`.
+     *
+     * If provided as a string in the format of n-auto
+     *    (e.g., `1-auto`, `2-auto`, ..., `6-auto`),
+     *    each row will have auto height. The CSS for this configuration is
+     *    `grid-template-rows: repeat(number, auto)`.
+     *
+     * Alternatively, you can use a responsive map to define different row configurations
+     *    for various breakpoints. The keys in the map should represent the breakpoints,
+     *    such as `default` or `L`, and the values can be integers or strings following the
+     *    same patterns mentioned above.
+     */
+    this.row = 1;
+  }
+  render() {
+    const classNames = [
+      formatAndValidResponsiveToken(this.column, 'gridColumn'),
+      formatAndValidResponsiveToken(this.row, 'gridRow'),
+      formatAndValidResponsiveToken(this.gap, 'gap'),
+    ];
+    return sanitizeVegaComponent(h(Host, { class: arrayToClassString(classNames) }, h("slot", null)), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaGrid.prototype, "globalSlimmers", void 0);
+VegaGrid.style = vegaGridCss;
+
+export { VegaGrid as vega_grid };