var __decorate = (this && this.__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;
};
import { Component, Element, Host, h, Prop, Watch, State } from '@stencil/core';
import { sanitizeVegaComponent } from '../../utils/component';
import { formatAndValidBorderStyle, formatAndValidResponsiveToken } from '../../utils/design-token';
import { arrayToClassString } from '../../utils/ui';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
import { VegaBoxStateStylesController } from './slimmers/controllers/vega-box-state-styles-controller';
import responsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
import { formatFlexStyles } from '../../helpers/formatter/style-formatter';
import { VegaBoxResponsiveStyleController } from './slimmers/controllers/vega-box-responsive-style-controller';
/**
 * @vegaVersion 1.27.0
 */
export class VegaBox {
  constructor() {
    this.globalSlimmers = {};
    this.pageResizeSlimmer = new PageResizeObserverSlimmer();
    this.stateStyleController = new VegaBoxStateStylesController();
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    this.responsiveStyleController = new VegaBoxResponsiveStyleController();
  }
  watchPaddingChange() {
    methodPlaceholder();
  }
  watchMarginChange() {
    methodPlaceholder();
  }
  watchBorder() {
    methodPlaceholder();
  }
  watchShadow() {
    methodPlaceholder();
  }
  watchBorderColor() {
    methodPlaceholder();
  }
  watchBackgroundColor() {
    methodPlaceholder();
  }
  watchCornersChange() {
    methodPlaceholder();
  }
  render() {
    const hostClasses = [
      formatAndValidResponsiveToken(this.padding, 'padding'),
      formatAndValidResponsiveToken(this.margin, 'margin'),
      formatAndValidResponsiveToken(this.display, 'boxDisplay'),
      formatAndValidResponsiveToken(this.corners, 'corners'),
      formatAndValidBorderStyle(this.borderStyle),
      responsiveFormatFacade.formatCustom(this.responsiveClass),
    ];
    const styles = Object.assign({ width: formatAndValidResponsiveToken(this.width, 'widthAndHeight'), height: formatAndValidResponsiveToken(this.height, 'widthAndHeight'), minHeight: formatAndValidResponsiveToken(this.minHeight, 'widthAndHeight'), maxHeight: formatAndValidResponsiveToken(this.maxHeight, 'widthAndHeight'), order: this.order && `${responsiveFormatFacade.formatCustom(this.order)}`, alignSelf: this.alignSelf && `${responsiveFormatFacade.formatCustom(this.alignSelf)}`, justifySelf: this.justifySelf && `${responsiveFormatFacade.formatCustom(this.justifySelf)}` }, formatFlexStyles(this.flex, this.flexGrow, this.flexShrink, this.flexBasis));
    if (this.gridArea) {
      styles.gridArea = `${responsiveFormatFacade.formatCustom(this.gridArea)}`;
    }
    else {
      styles.gridColumn = this.gridColumn && `${responsiveFormatFacade.formatCustom(this.gridColumn)}`;
      styles.gridRow = this.gridRow && `${responsiveFormatFacade.formatCustom(this.gridRow)}`;
    }
    return sanitizeVegaComponent(h(Host, { style: styles, class: arrayToClassString(hostClasses) },
      h("slot", null)), this.host);
  }
  static get is() { return "vega-box"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-box.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-box.css"]
  }; }
  static get properties() { return {
    "padding": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<PaddingType>",
        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: PaddingType; M?: PaddingType; L?: PaddingType; XL?: PaddingType; default?: PaddingType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "PaddingType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.27.0"
          }],
        "text": "Determines the spacing between the content and the edges of the box.\n   It can be set as a spacing value, such as `size-16` or `size-24`,\n   to apply the same padding on all sides.\n\nAlternatively, you can set the padding as a responsive map,\n   allowing you to define different padding values for different breakpoints.\n   The responsive map should follow the structure\n   `{default: 'size-12', L: { top: 'size-24', bottom: 'size-24'}}`.\n\nNote that the `default` value is required when using a responsive map\n   to provide a fallback padding value for breakpoints\n   that are not explicitly defined."
      },
      "attribute": "padding",
      "reflect": false
    },
    "margin": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<MarginType>",
        "resolved": "\"0\" | \"auto\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: MarginValueType; right?: MarginValueType; top?: MarginValueType; bottom?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "MarginType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.27.0"
          }],
        "text": "Defines the spacing around the box.\n   You can set it as a single spacing value,\n   such as `size-16` or `size-24`, which will apply\n   the same margin on all sides of the box.\n\nAlternatively, you can set the padding as a responsive map,\n   allowing you to define different margin values for different breakpoints.\n   The responsive map should follow the structure\n   `{default: 'size-12', L: { top: 'size-24', bottom: 'size-24'}}`.\n\nNote that the `default` value is required when using a responsive map\n   to provide a fallback margin value for breakpoints\n   that are not explicitly defined."
      },
      "attribute": "margin",
      "reflect": false
    },
    "display": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<BoxDisplayType>",
        "resolved": "\"block\" | \"inline-block\" | \"none\" | { S?: \"none\" | \"block\" | \"inline-block\"; M?: \"none\" | \"block\" | \"inline-block\"; L?: \"none\" | \"block\" | \"inline-block\"; XL?: \"none\" | \"block\" | \"inline-block\"; default?: \"none\" | \"block\" | \"inline-block\"; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "BoxDisplayType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.38.0"
          }],
        "text": "Defines the display behavior of the box, allowing you to choose from\n   standard display options like `block`, `inline-block` and `none`."
      },
      "attribute": "display",
      "reflect": false
    },
    "border": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "StateVariantType<BordersTokenType, CssStatesType>",
        "resolved": "\"border-secondary-btn\" | \"border-secondary-btn-hover\" | \"border-secondary-danger-btn\" | \"border-secondary-btn-active\" | \"border-secondary-danger-btn-hover\" | \"border-secondary-danger-btn-active\" | \"border-input-field\" | \"border-input-field-hover\" | \"border-input-field-focus\" | \"border-input-field-danger\" | \"border-input-field-danger-hover\" | \"border-input-field-danger-focus\" | \"border-sidebar-item-focus\" | \"border-input-field-disabled\" | \"border-success\" | \"border-secondary-btn-disabled\" | \"border-chip\" | \"border-divider\" | \"border-divider-secondary\" | \"border-tile-selected\" | \"border-tile-selected-hover\" | \"border-table-divider\" | \"border-slider-handle\" | \"border-tile\" | \"border-tile-hover\" | \"border-tile-focus\" | \"border-tile-selected-focus\" | \"border-notification-btn\" | \"border-notification-btn-black\" | Record<\"default\" | \"hover\" | \"active\" | \"focus-visible\", \"border-secondary-btn\" | \"border-secondary-btn-hover\" | \"border-secondary-danger-btn\" | \"border-secondary-btn-active\" | \"border-secondary-danger-btn-hover\" | \"border-secondary-danger-btn-active\" | \"border-input-field\" | \"border-input-field-hover\" | \"border-input-field-focus\" | \"border-input-field-danger\" | \"border-input-field-danger-hover\" | \"border-input-field-danger-focus\" | \"border-sidebar-item-focus\" | \"border-input-field-disabled\" | \"border-success\" | \"border-secondary-btn-disabled\" | \"border-chip\" | \"border-divider\" | \"border-divider-secondary\" | \"border-tile-selected\" | \"border-tile-selected-hover\" | \"border-table-divider\" | \"border-slider-handle\" | \"border-tile\" | \"border-tile-hover\" | \"border-tile-focus\" | \"border-tile-selected-focus\" | \"border-notification-btn\" | \"border-notification-btn-black\">",
        "references": {
          "StateVariantType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "BordersTokenType": {
            "location": "import",
            "path": "../../types/design-token.type"
          },
          "CssStatesType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "Defines the border of the box.\n   It accepts a string value representing a valid\n   border token."
      },
      "attribute": "border",
      "reflect": false
    },
    "borderStyle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "BorderStyleType",
        "resolved": "\"dashed\" | \"dotted\" | \"double\" | \"none\" | \"solid\"",
        "references": {
          "BorderStyleType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.7.0"
          }],
        "text": "Specifies the line style of the box border. *"
      },
      "attribute": "border-style",
      "reflect": false
    },
    "shadow": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "StateVariantType<ShadowsTokenType, 'default' | 'focus-visible' | 'hover'>",
        "resolved": "\"shadow-app-header\" | \"shadow-card\" | \"shadow-dropdown-menu\" | \"shadow-form-field\" | \"shadow-modal\" | \"shadow-modal-footer\" | \"shadow-modal-footer-no-scroll\" | \"shadow-modal-header\" | \"shadow-popover\" | { default: \"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\"; hover: \"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\"; \"focus-visible\": \"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\"; }",
        "references": {
          "StateVariantType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "ShadowsTokenType": {
            "location": "import",
            "path": "../../types/design-token.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "Defines the box shadow of the box.\n   It accepts a string value representing a valid\n   box shadow token."
      },
      "attribute": "shadow",
      "reflect": false
    },
    "borderColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "StateVariantType<BorderColorsTokenType, CssStatesType>",
        "resolved": "\"border-color-action\" | \"border-color-action-hover\" | \"border-color-action-active\" | \"border-color-chip\" | \"border-color-danger\" | \"border-color-danger-hover\" | \"border-color-danger-active\" | \"border-color-divider\" | \"border-color-divider-secondary\" | \"border-color-input-field\" | \"border-color-input-field-hover\" | \"border-color-input-field-focus\" | \"border-color-input-field-danger\" | \"border-color-input-field-danger-hover\" | \"border-color-input-field-danger-focus\" | \"border-color-input-field-disabled\" | \"border-color-secondary-btn-disabled\" | \"border-color-sidebar-item-focus\" | \"border-color-slider-handle\" | \"border-color-success\" | \"border-color-table-divider\" | \"border-color-tile\" | \"border-color-tile-hover\" | \"border-color-tile-focus\" | \"border-color-tile-selected-focus\" | \"border-color-tile-selected\" | \"border-color-tile-selected-hover\" | \"border-color-notification-btn\" | \"border-color-notification-btn-dark\" | Record<\"default\" | \"hover\" | \"active\" | \"focus-visible\", \"border-color-action\" | \"border-color-action-hover\" | \"border-color-action-active\" | \"border-color-chip\" | \"border-color-danger\" | \"border-color-danger-hover\" | \"border-color-danger-active\" | \"border-color-divider\" | \"border-color-divider-secondary\" | \"border-color-input-field\" | \"border-color-input-field-hover\" | \"border-color-input-field-focus\" | \"border-color-input-field-danger\" | \"border-color-input-field-danger-hover\" | \"border-color-input-field-danger-focus\" | \"border-color-input-field-disabled\" | \"border-color-secondary-btn-disabled\" | \"border-color-sidebar-item-focus\" | \"border-color-slider-handle\" | \"border-color-success\" | \"border-color-table-divider\" | \"border-color-tile\" | \"border-color-tile-hover\" | \"border-color-tile-focus\" | \"border-color-tile-selected-focus\" | \"border-color-tile-selected\" | \"border-color-tile-selected-hover\" | \"border-color-notification-btn\" | \"border-color-notification-btn-dark\">",
        "references": {
          "StateVariantType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "BorderColorsTokenType": {
            "location": "import",
            "path": "../../types/design-token.type"
          },
          "CssStatesType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "Defines the border color of the box.\n   It accepts a string value representing a valid\n   border color token."
      },
      "attribute": "border-color",
      "reflect": false
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "StateVariantType<BackgroundColorsTokenType, CssStatesType>",
        "resolved": "\"bg-brand\" | \"bg-page\" | \"bg-primary\" | \"bg-secondary\" | \"bg-tertiary\" | \"bg-quaternary\" | \"bg-inverted-primary\" | \"bg-inverted-secondary\" | \"bg-inverted-tertiary\" | \"bg-inverted-quaternary\" | \"bg-action\" | \"bg-action-hover\" | \"bg-action-focus\" | \"bg-action-active\" | \"bg-action-quaternary\" | \"bg-action-quaternary-hover\" | \"bg-action-quaternary-active\" | \"bg-action-secondary\" | \"bg-action-secondary-hover\" | \"bg-action-secondary-active\" | \"bg-action-tertiary\" | \"bg-action-tertiary-hover\" | \"bg-action-tertiary-active\" | \"bg-app-header\" | \"bg-backdrop-modal\" | \"bg-backdrop-popover\" | \"bg-backdrop-sidebar\" | \"bg-chip\" | \"bg-chip-hover\" | \"bg-chip-active\" | \"bg-danger\" | \"bg-danger-hover\" | \"bg-danger-focus\" | \"bg-danger-active\" | \"bg-danger-tertiary\" | \"bg-danger-tertiary-hover\" | \"bg-danger-tertiary-active\" | \"bg-disabled\" | \"bg-divider\" | \"bg-divider-secondary\" | \"bg-keypad-btn-active\" | \"bg-loading-progress\" | \"bg-loading-track\" | \"bg-segment-hover\" | \"bg-segment-control\" | \"bg-selected\" | \"bg-sidebar\" | \"bg-sidebar-icon\" | \"bg-sidebar-icon-hover\" | \"bg-sidebar-icon-selected\" | \"bg-sidebar-item-hover\" | \"bg-sidebar-item-selected\" | \"bg-site-footer\" | \"bg-site-footer-action\" | \"bg-site-footer-action-hover\" | \"bg-site-footer-action-active\" | \"bg-site-footer-field\" | \"bg-slider-handle\" | \"bg-status-error\" | \"bg-status-info\" | \"bg-status-success\" | \"bg-status-warning\" | \"bg-tab\" | \"bg-tab-hover\" | \"bg-tab-selected\" | \"bg-table-alt-row\" | \"bg-table-header\" | \"bg-table-row-hover\" | \"bg-table-row-selected-expanded\" | \"bg-table-selected-row\" | \"bg-textarea-count\" | \"bg-tile\" | \"bg-tile-hover\" | \"bg-tile-selected\" | \"bg-tile-selected-hover\" | \"bg-toggle-switch\" | \"bg-toggle-switch-hover\" | \"bg-toggle-switch-selected-disabled\" | \"bg-transparent\" | \"bg-accent1-primary\" | \"bg-accent1-secondary\" | \"bg-accent1-tertiary\" | \"bg-accent2-primary\" | \"bg-accent2-secondary\" | \"bg-accent2-tertiary\" | \"bg-accent3-primary\" | \"bg-accent3-secondary\" | \"bg-accent3-tertiary\" | \"bg-accent4-primary\" | \"bg-accent4-secondary\" | \"bg-accent4-tertiary\" | \"bg-accent5-primary\" | \"bg-accent5-secondary\" | \"bg-accent5-tertiary\" | \"bg-accent6-primary\" | \"bg-accent6-secondary\" | \"bg-accent6-tertiary\" | \"bg-accent7-primary\" | \"bg-accent7-secondary\" | \"bg-accent7-tertiary\" | \"bg-accent8-primary\" | \"bg-accent8-secondary\" | \"bg-accent8-tertiary\" | \"bg-accent9-primary\" | \"bg-accent9-secondary\" | \"bg-accent9-tertiary\" | \"bg-accent10-primary\" | \"bg-accent10-secondary\" | \"bg-accent10-tertiary\" | \"bg-date-picker-range\" | Record<\"default\" | \"hover\" | \"active\" | \"focus-visible\", \"bg-brand\" | \"bg-page\" | \"bg-primary\" | \"bg-secondary\" | \"bg-tertiary\" | \"bg-quaternary\" | \"bg-inverted-primary\" | \"bg-inverted-secondary\" | \"bg-inverted-tertiary\" | \"bg-inverted-quaternary\" | \"bg-action\" | \"bg-action-hover\" | \"bg-action-focus\" | \"bg-action-active\" | \"bg-action-quaternary\" | \"bg-action-quaternary-hover\" | \"bg-action-quaternary-active\" | \"bg-action-secondary\" | \"bg-action-secondary-hover\" | \"bg-action-secondary-active\" | \"bg-action-tertiary\" | \"bg-action-tertiary-hover\" | \"bg-action-tertiary-active\" | \"bg-app-header\" | \"bg-backdrop-modal\" | \"bg-backdrop-popover\" | \"bg-backdrop-sidebar\" | \"bg-chip\" | \"bg-chip-hover\" | \"bg-chip-active\" | \"bg-danger\" | \"bg-danger-hover\" | \"bg-danger-focus\" | \"bg-danger-active\" | \"bg-danger-tertiary\" | \"bg-danger-tertiary-hover\" | \"bg-danger-tertiary-active\" | \"bg-disabled\" | \"bg-divider\" | \"bg-divider-secondary\" | \"bg-keypad-btn-active\" | \"bg-loading-progress\" | \"bg-loading-track\" | \"bg-segment-hover\" | \"bg-segment-control\" | \"bg-selected\" | \"bg-sidebar\" | \"bg-sidebar-icon\" | \"bg-sidebar-icon-hover\" | \"bg-sidebar-icon-selected\" | \"bg-sidebar-item-hover\" | \"bg-sidebar-item-selected\" | \"bg-site-footer\" | \"bg-site-footer-action\" | \"bg-site-footer-action-hover\" | \"bg-site-footer-action-active\" | \"bg-site-footer-field\" | \"bg-slider-handle\" | \"bg-status-error\" | \"bg-status-info\" | \"bg-status-success\" | \"bg-status-warning\" | \"bg-tab\" | \"bg-tab-hover\" | \"bg-tab-selected\" | \"bg-table-alt-row\" | \"bg-table-header\" | \"bg-table-row-hover\" | \"bg-table-row-selected-expanded\" | \"bg-table-selected-row\" | \"bg-textarea-count\" | \"bg-tile\" | \"bg-tile-hover\" | \"bg-tile-selected\" | \"bg-tile-selected-hover\" | \"bg-toggle-switch\" | \"bg-toggle-switch-hover\" | \"bg-toggle-switch-selected-disabled\" | \"bg-transparent\" | \"bg-accent1-primary\" | \"bg-accent1-secondary\" | \"bg-accent1-tertiary\" | \"bg-accent2-primary\" | \"bg-accent2-secondary\" | \"bg-accent2-tertiary\" | \"bg-accent3-primary\" | \"bg-accent3-secondary\" | \"bg-accent3-tertiary\" | \"bg-accent4-primary\" | \"bg-accent4-secondary\" | \"bg-accent4-tertiary\" | \"bg-accent5-primary\" | \"bg-accent5-secondary\" | \"bg-accent5-tertiary\" | \"bg-accent6-primary\" | \"bg-accent6-secondary\" | \"bg-accent6-tertiary\" | \"bg-accent7-primary\" | \"bg-accent7-secondary\" | \"bg-accent7-tertiary\" | \"bg-accent8-primary\" | \"bg-accent8-secondary\" | \"bg-accent8-tertiary\" | \"bg-accent9-primary\" | \"bg-accent9-secondary\" | \"bg-accent9-tertiary\" | \"bg-accent10-primary\" | \"bg-accent10-secondary\" | \"bg-accent10-tertiary\" | \"bg-date-picker-range\">",
        "references": {
          "StateVariantType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "BackgroundColorsTokenType": {
            "location": "import",
            "path": "../../types/design-token.type"
          },
          "CssStatesType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "Defines the background color of the box.\n   It accepts a string value representing a valid\n   background color token."
      },
      "attribute": "background-color",
      "reflect": false
    },
    "width": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<WidthType>",
        "resolved": "number | string | { S?: WidthType; M?: WidthType; L?: WidthType; XL?: WidthType; default?: WidthType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "WidthType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "Specifies the width of the box.\nIt accepts values in numeric, string and spacing token formats.\nFor numeric values, use a number to indicate the width\n   in pixels, e.g., 100 will be translated to 100px.\nFor string values, you can use CSS units like '%' or 'calc' expressions.\n   For example, '100%' and 'calc(100vw - 20px)' which allows for more complex calculations to\n   determine the width.\nFor spacing tokens, you can set 'size-2', 'size-16' and etc. Please refer to https://vega.globalpayments.com/tokens/spacing to check the full list of spacing tokens."
      },
      "attribute": "width",
      "reflect": false
    },
    "height": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<HeightType>",
        "resolved": "number | string | { S?: HeightType; M?: HeightType; L?: HeightType; XL?: HeightType; default?: HeightType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "HeightType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "Specifies the height of the box.\nIt accepts values in numeric, string and spacing token formats.\nFor numeric values, use a number to indicate the height\n   in pixels, e.g., 100 will be translated to 100px.\nFor string values, you can use CSS units like '%' or 'calc' expressions.\n   For example, '100%' and 'calc(100vh - 20px)' which allows for more complex calculations to\n   determine the height.\nFor spacing tokens, you can set 'size-2', 'size-16' and etc. Please refer to https://vega.globalpayments.com/tokens/spacing to check the full list of spacing tokens."
      },
      "attribute": "height",
      "reflect": false
    },
    "minHeight": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<MinHeightType>",
        "resolved": "number | string | { S?: MinHeightType; M?: MinHeightType; L?: MinHeightType; XL?: MinHeightType; default?: MinHeightType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "MinHeightType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.7.0"
          }],
        "text": "Specifies the minimum height of the box.\nIt accepts values in numeric, string and spacing token formats.\nNumeric values represent minimum heights in pixels\n   (e.g., 100 translates to 100px).\nString values allow the use of CSS units such as '%'\n   or keyword values like 'max-content'\n   (e.g., '100%' or 'max-content').\nSpacing tokens like 'size-2' or 'size-16' can also be used.\n   Please refer to https://vega.globalpayments.com/tokens/spacing\n   to check the full list of spacing tokens."
      },
      "attribute": "min-height",
      "reflect": false
    },
    "maxHeight": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<MaxHeightType>",
        "resolved": "number | string | { S?: MaxHeightType; M?: MaxHeightType; L?: MaxHeightType; XL?: MaxHeightType; default?: MaxHeightType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "MaxHeightType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.7.0"
          }],
        "text": "Specifies the maximum height of the box.\nIt accepts values in numeric, string and spacing token formats.\nNumeric values represent maximum heights in pixels\n   (e.g., 100 translates to 100px).\nString values allow the use of CSS units such as '%'\n   or keyword values like 'min-content'\n   (e.g., '100%' or 'min-content').\nSpacing tokens like 'size-2' or 'size-16' can also be used.\n   Please refer to https://vega.globalpayments.com/tokens/spacing\n   to check the full list of spacing tokens."
      },
      "attribute": "max-height",
      "reflect": false
    },
    "responsiveClass": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<string>",
        "resolved": "string | { S?: string; M?: string; L?: string; XL?: string; default?: string; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "Defines the custom class name of the box."
      },
      "attribute": "responsive-class",
      "reflect": false
    },
    "corners": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<CornersType>",
        "resolved": "\"rounded-12\" | \"rounded-16\" | \"rounded-2\" | \"rounded-24\" | \"rounded-32\" | \"rounded-4\" | \"rounded-48\" | \"rounded-8\" | \"rounded-full\" | \"rounded-none\" | { S?: CornersType; M?: CornersType; L?: CornersType; XL?: CornersType; default?: CornersType; } | { left?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; right?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; top?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; bottom?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"top-left\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"top-right\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"bottom-left\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; \"bottom-right\"?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "CornersType": {
            "location": "import",
            "path": "../../types/ui.type"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "Defines the corner of the box.\n   It accepts a string value representing a valid\n   border radius token."
      },
      "attribute": "corners",
      "reflect": false
    },
    "flexBasis": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexBasisType>",
        "resolved": "\"auto\" | \"content\" | \"fit-content\" | \"fix-content\" | \"inherit\" | \"initial\" | \"max-content\" | \"min-content\" | \"revert\" | \"revert-layer\" | \"unset\" | `${number}%` | `${number}em` | `${number}px` | { S?: FlexBasisType; M?: FlexBasisType; L?: FlexBasisType; XL?: FlexBasisType; default?: FlexBasisType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexBasisType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.3.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis"
          }],
        "text": "Specifies the base size of the box."
      },
      "attribute": "flex-basis",
      "reflect": false
    },
    "flexGrow": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexGrowType>",
        "resolved": "\"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | number | { S?: FlexGrowType; M?: FlexGrowType; L?: FlexGrowType; XL?: FlexGrowType; default?: FlexGrowType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexGrowType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.3.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow"
          }],
        "text": "Specifies how the box is grow."
      },
      "attribute": "flex-grow",
      "reflect": false
    },
    "flexShrink": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexShrinkType>",
        "resolved": "\"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | number | { S?: FlexShrinkType; M?: FlexShrinkType; L?: FlexShrinkType; XL?: FlexShrinkType; default?: FlexShrinkType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexShrinkType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.3.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink"
          }],
        "text": "Specifies how much the box shrinks."
      },
      "attribute": "flex-shrink",
      "reflect": false
    },
    "order": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<OrderType>",
        "resolved": "\"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | number | { S?: OrderType; M?: OrderType; L?: OrderType; XL?: OrderType; default?: OrderType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "OrderType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.3.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/order"
          }],
        "text": "Specifies the display order of the box."
      },
      "attribute": "order",
      "reflect": false
    },
    "flex": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<FlexType>",
        "resolved": "FlexType | { S?: FlexType; M?: FlexType; L?: FlexType; XL?: FlexType; default?: FlexType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "FlexType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.3.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex"
          }],
        "text": "Specifies how the box adjusts its size, growth, and alignment within a flex container."
      },
      "attribute": "flex",
      "reflect": false
    },
    "alignSelf": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<AlignSelfType>",
        "resolved": "\"auto\" | \"inherit\" | \"initial\" | \"normal\" | \"revert\" | \"revert-layer\" | \"unset\" | { S?: AlignSelfType; M?: AlignSelfType; L?: AlignSelfType; XL?: AlignSelfType; default?: AlignSelfType; } | ({ [x: number]: string; small: () => string; [Symbol.iterator]: () => IterableIterator<string>; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "AlignSelfType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.3.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/align-self"
          }],
        "text": "Specifies how the box aligns itself within its container."
      },
      "attribute": "align-self",
      "reflect": false
    },
    "justifySelf": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<JustifySelfType>",
        "resolved": "JustifySelfType | { S?: JustifySelfType; M?: JustifySelfType; L?: JustifySelfType; XL?: JustifySelfType; default?: JustifySelfType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "JustifySelfType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.3.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self"
          }],
        "text": "Specifies how a single box justifies its content along the main axis within its container."
      },
      "attribute": "justify-self",
      "reflect": false
    },
    "gridColumn": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<GridColumnType>",
        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridColumnType; M?: GridColumnType; L?: GridColumnType; XL?: GridColumnType; default?: GridColumnType; } | ({ [x: number]: string; small: () => string; [Symbol.iterator]: () => IterableIterator<string>; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "GridColumnType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.5.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column"
          }],
        "text": "Determines the placement of the item within the grid along the horizontal axis."
      },
      "attribute": "grid-column",
      "reflect": false
    },
    "gridRow": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<GridRowType>",
        "resolved": "\"auto / auto\" | \"auto\" | `${number} / ${number}` | `${number} / auto` | `${number} / span ${number}` | `auto / ${number}` | `auto / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridRowType; M?: GridRowType; L?: GridRowType; XL?: GridRowType; default?: GridRowType; } | ({ [x: number]: string; small: () => string; [Symbol.iterator]: () => IterableIterator<string>; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?: number) => number; lastIndexOf: (searchString: string, position?: number) => number; localeCompare: { (that: string): number; (that: string, locales?: string | string[], options?: CollatorOptions): number; }; match: { (regexp: string | RegExp): RegExpMatchArray; (matcher: { [Symbol.match](string: string): RegExpMatchArray; }): RegExpMatchArray; }; replace: { (searchValue: string | RegExp, replaceValue: string): string; (searchValue: string | RegExp, replacer: (substring: string, ...args: any[]) => string): string; (searchValue: { [Symbol.replace](string: string, replaceValue: string): string; }, replaceValue: string): string; (searchValue: { [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string; }, replacer: (substring: string, ...args: any[]) => string): string; }; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; slice: (start?: number, end?: number) => string; split: { (separator: string | RegExp, limit?: number): string[]; (splitter: { [Symbol.split](string: string, limit?: number): string[]; }, limit?: number): string[]; }; substring: (start: number, end?: number) => string; toLowerCase: () => string; toLocaleLowerCase: (locales?: string | string[]) => string; toUpperCase: () => string; toLocaleUpperCase: (locales?: string | string[]) => string; trim: () => string; readonly length: number; substr: (from: number, length?: number) => string; valueOf: () => string; codePointAt: (pos: number) => number; includes: (searchString: string, position?: number) => boolean; endsWith: (searchString: string, endPosition?: number) => boolean; normalize: { (form: \"NFC\" | \"NFD\" | \"NFKC\" | \"NFKD\"): string; (form?: string): string; }; repeat: (count: number) => string; startsWith: (searchString: string, position?: number) => boolean; anchor: (name: string) => string; big: () => string; blink: () => string; bold: () => string; fixed: () => string; fontcolor: (color: string) => string; fontsize: { (size: number): string; (size: string): string; }; italics: () => string; link: (url: string) => string; strike: () => string; sub: () => string; sup: () => string; padStart: (maxLength: number, fillString?: string) => string; padEnd: (maxLength: number, fillString?: string) => string; trimEnd: () => string; trimStart: () => string; trimLeft: () => string; trimRight: () => string; matchAll: (regexp: RegExp) => IterableIterator<RegExpMatchArray>; at: (index: number) => string; })",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "GridRowType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.5.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row"
          }],
        "text": "Determines the placement of the item within the grid along the vertical axis."
      },
      "attribute": "grid-row",
      "reflect": false
    },
    "gridArea": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "ResponsiveType<GridAreaType>",
        "resolved": "GridAreaType | { S?: GridAreaType; M?: GridAreaType; L?: GridAreaType; XL?: GridAreaType; default?: GridAreaType; }",
        "references": {
          "ResponsiveType": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "GridAreaType": {
            "location": "import",
            "path": "./interface"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "2.5.0"
          }, {
            "name": "nativeTypeRedirection",
            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area"
          }],
        "text": "Defines the area within the grid occupied by the item. It accepts CSS values and can be set as ResponsiveType."
      },
      "attribute": "grid-area",
      "reflect": false
    }
  }; }
  static get states() { return {
    "currentBreakpoint": {}
  }; }
  static get elementRef() { return "host"; }
  static get watchers() { return [{
      "propName": "padding",
      "methodName": "watchPaddingChange"
    }, {
      "propName": "margin",
      "methodName": "watchMarginChange"
    }, {
      "propName": "border",
      "methodName": "watchBorder"
    }, {
      "propName": "shadow",
      "methodName": "watchShadow"
    }, {
      "propName": "borderColor",
      "methodName": "watchBorderColor"
    }, {
      "propName": "backgroundColor",
      "methodName": "watchBackgroundColor"
    }, {
      "propName": "corners",
      "methodName": "watchCornersChange"
    }]; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaBox.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaBox.prototype, "pageResizeSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaBox.prototype, "stateStyleController", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaBox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaBox.prototype, "responsiveStyleController", void 0);
