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 { Host, h } 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/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; } | { 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\"; 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\"; 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\"; 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\"; 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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "PaddingType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::PaddingType",
                            "referenceLocation": "PaddingType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "padding"
            },
            "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; } | { top?: MarginValueType; left?: MarginValueType; bottom?: MarginValueType; right?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "MarginType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::MarginType",
                            "referenceLocation": "MarginType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "margin"
            },
            "display": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ResponsiveType<BoxDisplayType>",
                    "resolved": "\"block\" | \"inline-block\" | \"none\" | { S?: \"block\" | \"inline-block\" | \"none\"; M?: \"block\" | \"inline-block\" | \"none\"; L?: \"block\" | \"inline-block\" | \"none\"; XL?: \"block\" | \"inline-block\" | \"none\"; default?: \"block\" | \"inline-block\" | \"none\"; }",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "BoxDisplayType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::BoxDisplayType",
                            "referenceLocation": "BoxDisplayType"
                        }
                    }
                },
                "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`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "display"
            },
            "border": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "StateVariantType<BordersTokenType, CssStatesType>",
                    "resolved": "\"active\" | \"border-chip\" | \"border-divider\" | \"border-divider-secondary\" | \"border-input-field\" | \"border-input-field-danger\" | \"border-input-field-danger-focus\" | \"border-input-field-danger-hover\" | \"border-input-field-disabled\" | \"border-input-field-focus\" | \"border-input-field-hover\" | \"border-notification-btn\" | \"border-notification-btn-black\" | \"border-secondary-btn\" | \"border-secondary-btn-active\" | \"border-secondary-btn-disabled\" | \"border-secondary-btn-hover\" | \"border-secondary-danger-btn\" | \"border-secondary-danger-btn-active\" | \"border-secondary-danger-btn-hover\" | \"border-sidebar-item-focus\" | \"border-slider-handle\" | \"border-success\" | \"border-table-divider\" | \"border-tile\" | \"border-tile-focus\" | \"border-tile-hover\" | \"border-tile-selected\" | \"border-tile-selected-focus\" | \"border-tile-selected-hover\" | \"default\" | \"focus-visible\" | \"hover\"",
                    "references": {
                        "StateVariantType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::StateVariantType",
                            "referenceLocation": "StateVariantType"
                        },
                        "BordersTokenType": {
                            "location": "import",
                            "path": "../../types/design-token.type",
                            "id": "src/types/design-token.type.ts::BordersTokenType",
                            "referenceLocation": "BordersTokenType"
                        },
                        "CssStatesType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::CssStatesType",
                            "referenceLocation": "CssStatesType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "border"
            },
            "borderStyle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BorderStyleType",
                    "resolved": "\"dashed\" | \"dotted\" | \"double\" | \"none\" | \"solid\"",
                    "references": {
                        "BorderStyleType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::BorderStyleType",
                            "referenceLocation": "BorderStyleType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "vegaVersion",
                            "text": "2.7.0"
                        }],
                    "text": "Specifies the line style of the box border. *"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "border-style"
            },
            "shadow": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "StateVariantType<ShadowsTokenType, 'default' | 'focus-visible' | 'hover'>",
                    "resolved": "\"default\" | \"focus-visible\" | \"hover\" | \"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\"",
                    "references": {
                        "StateVariantType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::StateVariantType",
                            "referenceLocation": "StateVariantType"
                        },
                        "ShadowsTokenType": {
                            "location": "import",
                            "path": "../../types/design-token.type",
                            "id": "src/types/design-token.type.ts::ShadowsTokenType",
                            "referenceLocation": "ShadowsTokenType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shadow"
            },
            "borderColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "StateVariantType<BorderColorsTokenType, CssStatesType>",
                    "resolved": "\"active\" | \"border-color-action\" | \"border-color-action-active\" | \"border-color-action-hover\" | \"border-color-chip\" | \"border-color-danger\" | \"border-color-danger-active\" | \"border-color-danger-hover\" | \"border-color-divider\" | \"border-color-divider-secondary\" | \"border-color-input-field\" | \"border-color-input-field-danger\" | \"border-color-input-field-danger-focus\" | \"border-color-input-field-danger-hover\" | \"border-color-input-field-disabled\" | \"border-color-input-field-focus\" | \"border-color-input-field-hover\" | \"border-color-notification-btn\" | \"border-color-notification-btn-dark\" | \"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-focus\" | \"border-color-tile-hover\" | \"border-color-tile-selected\" | \"border-color-tile-selected-focus\" | \"border-color-tile-selected-hover\" | \"default\" | \"focus-visible\" | \"hover\"",
                    "references": {
                        "StateVariantType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::StateVariantType",
                            "referenceLocation": "StateVariantType"
                        },
                        "BorderColorsTokenType": {
                            "location": "import",
                            "path": "../../types/design-token.type",
                            "id": "src/types/design-token.type.ts::BorderColorsTokenType",
                            "referenceLocation": "BorderColorsTokenType"
                        },
                        "CssStatesType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::CssStatesType",
                            "referenceLocation": "CssStatesType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "border-color"
            },
            "backgroundColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "StateVariantType<BackgroundColorsTokenType, CssStatesType>",
                    "resolved": "\"active\" | \"bg-accent1-primary\" | \"bg-accent1-secondary\" | \"bg-accent1-tertiary\" | \"bg-accent10-primary\" | \"bg-accent10-secondary\" | \"bg-accent10-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-action\" | \"bg-action-active\" | \"bg-action-focus\" | \"bg-action-hover\" | \"bg-action-quaternary\" | \"bg-action-quaternary-active\" | \"bg-action-quaternary-hover\" | \"bg-action-secondary\" | \"bg-action-secondary-active\" | \"bg-action-secondary-hover\" | \"bg-action-tertiary\" | \"bg-action-tertiary-active\" | \"bg-action-tertiary-hover\" | \"bg-app-header\" | \"bg-backdrop-modal\" | \"bg-backdrop-popover\" | \"bg-backdrop-sidebar\" | \"bg-brand\" | \"bg-chip\" | \"bg-chip-active\" | \"bg-chip-hover\" | \"bg-danger\" | \"bg-danger-active\" | \"bg-danger-focus\" | \"bg-danger-hover\" | \"bg-danger-tertiary\" | \"bg-danger-tertiary-active\" | \"bg-danger-tertiary-hover\" | \"bg-date-picker-range\" | \"bg-disabled\" | \"bg-divider\" | \"bg-divider-secondary\" | \"bg-inverted-primary\" | \"bg-inverted-quaternary\" | \"bg-inverted-secondary\" | \"bg-inverted-tertiary\" | \"bg-keypad-btn-active\" | \"bg-loading-progress\" | \"bg-loading-track\" | \"bg-page\" | \"bg-primary\" | \"bg-quaternary\" | \"bg-secondary\" | \"bg-segment-control\" | \"bg-segment-hover\" | \"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-active\" | \"bg-site-footer-action-hover\" | \"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-tertiary\" | \"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\" | \"default\" | \"focus-visible\" | \"hover\"",
                    "references": {
                        "StateVariantType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::StateVariantType",
                            "referenceLocation": "StateVariantType"
                        },
                        "BackgroundColorsTokenType": {
                            "location": "import",
                            "path": "../../types/design-token.type",
                            "id": "src/types/design-token.type.ts::BackgroundColorsTokenType",
                            "referenceLocation": "BackgroundColorsTokenType"
                        },
                        "CssStatesType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::CssStatesType",
                            "referenceLocation": "CssStatesType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "background-color"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "WidthType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::WidthType",
                            "referenceLocation": "WidthType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "width"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "HeightType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::HeightType",
                            "referenceLocation": "HeightType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "height"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "MinHeightType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::MinHeightType",
                            "referenceLocation": "MinHeightType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "min-height"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "MaxHeightType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::MaxHeightType",
                            "referenceLocation": "MaxHeightType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-height"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "vegaVersion",
                            "text": "2.0.0"
                        }],
                    "text": "Defines the custom class name of the box."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "responsive-class"
            },
            "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; } | { top?: \"rounded-none\" | \"rounded-full\" | \"rounded-2\" | \"rounded-4\" | \"rounded-8\" | \"rounded-12\" | \"rounded-16\" | \"rounded-24\" | \"rounded-32\" | \"rounded-48\"; left?: \"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\"; right?: \"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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "CornersType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::CornersType",
                            "referenceLocation": "CornersType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "corners"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexBasisType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::FlexBasisType",
                            "referenceLocation": "FlexBasisType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex-basis"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexGrowType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::FlexGrowType",
                            "referenceLocation": "FlexGrowType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex-grow"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexShrinkType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::FlexShrinkType",
                            "referenceLocation": "FlexShrinkType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex-shrink"
            },
            "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",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "OrderType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::OrderType",
                            "referenceLocation": "OrderType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "order"
            },
            "flex": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "ResponsiveType<FlexType>",
                    "resolved": "\"auto\" | \"inherit auto\" | \"inherit content\" | \"inherit fit-content\" | \"inherit fix-content\" | \"inherit inherit auto\" | \"inherit inherit content\" | \"inherit inherit fit-content\" | \"inherit inherit fix-content\" | \"inherit inherit inherit\" | \"inherit inherit initial\" | \"inherit inherit max-content\" | \"inherit inherit min-content\" | \"inherit inherit revert\" | \"inherit inherit revert-layer\" | \"inherit inherit unset\" | \"inherit inherit\" | \"inherit initial auto\" | \"inherit initial content\" | \"inherit initial fit-content\" | \"inherit initial fix-content\" | \"inherit initial inherit\" | \"inherit initial initial\" | \"inherit initial max-content\" | \"inherit initial min-content\" | \"inherit initial revert\" | \"inherit initial revert-layer\" | \"inherit initial unset\" | \"inherit initial\" | \"inherit max-content\" | \"inherit min-content\" | \"inherit revert auto\" | \"inherit revert content\" | \"inherit revert fit-content\" | \"inherit revert fix-content\" | \"inherit revert inherit\" | \"inherit revert initial\" | \"inherit revert max-content\" | \"inherit revert min-content\" | \"inherit revert revert\" | \"inherit revert revert-layer\" | \"inherit revert unset\" | \"inherit revert\" | \"inherit revert-layer auto\" | \"inherit revert-layer content\" | \"inherit revert-layer fit-content\" | \"inherit revert-layer fix-content\" | \"inherit revert-layer inherit\" | \"inherit revert-layer initial\" | \"inherit revert-layer max-content\" | \"inherit revert-layer min-content\" | \"inherit revert-layer revert\" | \"inherit revert-layer revert-layer\" | \"inherit revert-layer unset\" | \"inherit revert-layer\" | \"inherit unset auto\" | \"inherit unset content\" | \"inherit unset fit-content\" | \"inherit unset fix-content\" | \"inherit unset inherit\" | \"inherit unset initial\" | \"inherit unset max-content\" | \"inherit unset min-content\" | \"inherit unset revert\" | \"inherit unset revert-layer\" | \"inherit unset unset\" | \"inherit unset\" | \"inherit\" | \"initial auto\" | \"initial content\" | \"initial fit-content\" | \"initial fix-content\" | \"initial inherit auto\" | \"initial inherit content\" | \"initial inherit fit-content\" | \"initial inherit fix-content\" | \"initial inherit inherit\" | \"initial inherit initial\" | \"initial inherit max-content\" | \"initial inherit min-content\" | \"initial inherit revert\" | \"initial inherit revert-layer\" | \"initial inherit unset\" | \"initial inherit\" | \"initial initial auto\" | \"initial initial content\" | \"initial initial fit-content\" | \"initial initial fix-content\" | \"initial initial inherit\" | \"initial initial initial\" | \"initial initial max-content\" | \"initial initial min-content\" | \"initial initial revert\" | \"initial initial revert-layer\" | \"initial initial unset\" | \"initial initial\" | \"initial max-content\" | \"initial min-content\" | \"initial revert auto\" | \"initial revert content\" | \"initial revert fit-content\" | \"initial revert fix-content\" | \"initial revert inherit\" | \"initial revert initial\" | \"initial revert max-content\" | \"initial revert min-content\" | \"initial revert revert\" | \"initial revert revert-layer\" | \"initial revert unset\" | \"initial revert\" | \"initial revert-layer auto\" | \"initial revert-layer content\" | \"initial revert-layer fit-content\" | \"initial revert-layer fix-content\" | \"initial revert-layer inherit\" | \"initial revert-layer initial\" | \"initial revert-layer max-content\" | \"initial revert-layer min-content\" | \"initial revert-layer revert\" | \"initial revert-layer revert-layer\" | \"initial revert-layer unset\" | \"initial revert-layer\" | \"initial unset auto\" | \"initial unset content\" | \"initial unset fit-content\" | \"initial unset fix-content\" | \"initial unset inherit\" | \"initial unset initial\" | \"initial unset max-content\" | \"initial unset min-content\" | \"initial unset revert\" | \"initial unset revert-layer\" | \"initial unset unset\" | \"initial unset\" | \"initial\" | \"min-content\" | \"none\" | \"revert auto\" | \"revert content\" | \"revert fit-content\" | \"revert fix-content\" | \"revert inherit auto\" | \"revert inherit content\" | \"revert inherit fit-content\" | \"revert inherit fix-content\" | \"revert inherit inherit\" | \"revert inherit initial\" | \"revert inherit max-content\" | \"revert inherit min-content\" | \"revert inherit revert\" | \"revert inherit revert-layer\" | \"revert inherit unset\" | \"revert inherit\" | \"revert initial auto\" | \"revert initial content\" | \"revert initial fit-content\" | \"revert initial fix-content\" | \"revert initial inherit\" | \"revert initial initial\" | \"revert initial max-content\" | \"revert initial min-content\" | \"revert initial revert\" | \"revert initial revert-layer\" | \"revert initial unset\" | \"revert initial\" | \"revert max-content\" | \"revert min-content\" | \"revert revert auto\" | \"revert revert content\" | \"revert revert fit-content\" | \"revert revert fix-content\" | \"revert revert inherit\" | \"revert revert initial\" | \"revert revert max-content\" | \"revert revert min-content\" | \"revert revert revert\" | \"revert revert revert-layer\" | \"revert revert unset\" | \"revert revert\" | \"revert revert-layer auto\" | \"revert revert-layer content\" | \"revert revert-layer fit-content\" | \"revert revert-layer fix-content\" | \"revert revert-layer inherit\" | \"revert revert-layer initial\" | \"revert revert-layer max-content\" | \"revert revert-layer min-content\" | \"revert revert-layer revert\" | \"revert revert-layer revert-layer\" | \"revert revert-layer unset\" | \"revert revert-layer\" | \"revert unset auto\" | \"revert unset content\" | \"revert unset fit-content\" | \"revert unset fix-content\" | \"revert unset inherit\" | \"revert unset initial\" | \"revert unset max-content\" | \"revert unset min-content\" | \"revert unset revert\" | \"revert unset revert-layer\" | \"revert unset unset\" | \"revert unset\" | \"revert\" | \"revert-layer auto\" | \"revert-layer content\" | \"revert-layer fit-content\" | \"revert-layer fix-content\" | \"revert-layer inherit auto\" | \"revert-layer inherit content\" | \"revert-layer inherit fit-content\" | \"revert-layer inherit fix-content\" | \"revert-layer inherit inherit\" | \"revert-layer inherit initial\" | \"revert-layer inherit max-content\" | \"revert-layer inherit min-content\" | \"revert-layer inherit revert\" | \"revert-layer inherit revert-layer\" | \"revert-layer inherit unset\" | \"revert-layer inherit\" | \"revert-layer initial auto\" | \"revert-layer initial content\" | \"revert-layer initial fit-content\" | \"revert-layer initial fix-content\" | \"revert-layer initial inherit\" | \"revert-layer initial initial\" | \"revert-layer initial max-content\" | \"revert-layer initial min-content\" | \"revert-layer initial revert\" | \"revert-layer initial revert-layer\" | \"revert-layer initial unset\" | \"revert-layer initial\" | \"revert-layer max-content\" | \"revert-layer min-content\" | \"revert-layer revert auto\" | \"revert-layer revert content\" | \"revert-layer revert fit-content\" | \"revert-layer revert fix-content\" | \"revert-layer revert inherit\" | \"revert-layer revert initial\" | \"revert-layer revert max-content\" | \"revert-layer revert min-content\" | \"revert-layer revert revert\" | \"revert-layer revert revert-layer\" | \"revert-layer revert unset\" | \"revert-layer revert\" | \"revert-layer revert-layer auto\" | \"revert-layer revert-layer content\" | \"revert-layer revert-layer fit-content\" | \"revert-layer revert-layer fix-content\" | \"revert-layer revert-layer inherit\" | \"revert-layer revert-layer initial\" | \"revert-layer revert-layer max-content\" | \"revert-layer revert-layer min-content\" | \"revert-layer revert-layer revert\" | \"revert-layer revert-layer revert-layer\" | \"revert-layer revert-layer unset\" | \"revert-layer revert-layer\" | \"revert-layer unset auto\" | \"revert-layer unset content\" | \"revert-layer unset fit-content\" | \"revert-layer unset fix-content\" | \"revert-layer unset inherit\" | \"revert-layer unset initial\" | \"revert-layer unset max-content\" | \"revert-layer unset min-content\" | \"revert-layer unset revert\" | \"revert-layer unset revert-layer\" | \"revert-layer unset unset\" | \"revert-layer unset\" | \"revert-layer\" | \"unset auto\" | \"unset content\" | \"unset fit-content\" | \"unset fix-content\" | \"unset inherit auto\" | \"unset inherit content\" | \"unset inherit fit-content\" | \"unset inherit fix-content\" | \"unset inherit inherit\" | \"unset inherit initial\" | \"unset inherit max-content\" | \"unset inherit min-content\" | \"unset inherit revert\" | \"unset inherit revert-layer\" | \"unset inherit unset\" | \"unset inherit\" | \"unset initial auto\" | \"unset initial content\" | \"unset initial fit-content\" | \"unset initial fix-content\" | \"unset initial inherit\" | \"unset initial initial\" | \"unset initial max-content\" | \"unset initial min-content\" | \"unset initial revert\" | \"unset initial revert-layer\" | \"unset initial unset\" | \"unset initial\" | \"unset max-content\" | \"unset min-content\" | \"unset revert auto\" | \"unset revert content\" | \"unset revert fit-content\" | \"unset revert fix-content\" | \"unset revert inherit\" | \"unset revert initial\" | \"unset revert max-content\" | \"unset revert min-content\" | \"unset revert revert\" | \"unset revert revert-layer\" | \"unset revert unset\" | \"unset revert\" | \"unset revert-layer auto\" | \"unset revert-layer content\" | \"unset revert-layer fit-content\" | \"unset revert-layer fix-content\" | \"unset revert-layer inherit\" | \"unset revert-layer initial\" | \"unset revert-layer max-content\" | \"unset revert-layer min-content\" | \"unset revert-layer revert\" | \"unset revert-layer revert-layer\" | \"unset revert-layer unset\" | \"unset revert-layer\" | \"unset unset auto\" | \"unset unset content\" | \"unset unset fit-content\" | \"unset unset fix-content\" | \"unset unset inherit\" | \"unset unset initial\" | \"unset unset max-content\" | \"unset unset min-content\" | \"unset unset revert\" | \"unset unset revert-layer\" | \"unset unset unset\" | \"unset unset\" | \"unset\" | `${number} ${number} ${number}%` | `${number} ${number} ${number}em` | `${number} ${number} ${number}px` | `${number} ${number} auto` | `${number} ${number} content` | `${number} ${number} fit-content` | `${number} ${number} fix-content` | `${number} ${number} inherit` | `${number} ${number} initial` | `${number} ${number} max-content` | `${number} ${number} min-content` | `${number} ${number} revert-layer` | `${number} ${number} revert` | `${number} ${number} unset` | `${number} ${number}%` | `${number} ${number}` | `${number} ${number}em` | `${number} ${number}px` | `${number} auto` | `${number} content` | `${number} fit-content` | `${number} fix-content` | `${number} inherit ${number}%` | `${number} inherit ${number}em` | `${number} inherit ${number}px` | `${number} inherit auto` | `${number} inherit content` | `${number} inherit fit-content` | `${number} inherit fix-content` | `${number} inherit inherit` | `${number} inherit initial` | `${number} inherit max-content` | `${number} inherit min-content` | `${number} inherit revert-layer` | `${number} inherit revert` | `${number} inherit unset` | `${number} inherit` | `${number} initial ${number}%` | `${number} initial ${number}em` | `${number} initial ${number}px` | `${number} initial auto` | `${number} initial content` | `${number} initial fit-content` | `${number} initial fix-content` | `${number} initial inherit` | `${number} initial initial` | `${number} initial max-content` | `${number} initial min-content` | `${number} initial revert-layer` | `${number} initial revert` | `${number} initial unset` | `${number} initial` | `${number} max-content` | `${number} min-content` | `${number} revert ${number}%` | `${number} revert ${number}em` | `${number} revert ${number}px` | `${number} revert auto` | `${number} revert content` | `${number} revert fit-content` | `${number} revert fix-content` | `${number} revert inherit` | `${number} revert initial` | `${number} revert max-content` | `${number} revert min-content` | `${number} revert revert-layer` | `${number} revert revert` | `${number} revert unset` | `${number} revert-layer ${number}%` | `${number} revert-layer ${number}em` | `${number} revert-layer ${number}px` | `${number} revert-layer auto` | `${number} revert-layer content` | `${number} revert-layer fit-content` | `${number} revert-layer fix-content` | `${number} revert-layer inherit` | `${number} revert-layer initial` | `${number} revert-layer max-content` | `${number} revert-layer min-content` | `${number} revert-layer revert-layer` | `${number} revert-layer revert` | `${number} revert-layer unset` | `${number} revert-layer` | `${number} revert` | `${number} unset ${number}%` | `${number} unset ${number}em` | `${number} unset ${number}px` | `${number} unset auto` | `${number} unset content` | `${number} unset fit-content` | `${number} unset fix-content` | `${number} unset inherit` | `${number} unset initial` | `${number} unset max-content` | `${number} unset min-content` | `${number} unset revert-layer` | `${number} unset revert` | `${number} unset unset` | `${number} unset` | `${number}%` | `${number}em` | `${number}px` | `inherit ${number} ${number}%` | `inherit ${number} ${number}em` | `inherit ${number} ${number}px` | `inherit ${number} auto` | `inherit ${number} content` | `inherit ${number} fit-content` | `inherit ${number} fix-content` | `inherit ${number} inherit` | `inherit ${number} initial` | `inherit ${number} max-content` | `inherit ${number} min-content` | `inherit ${number} revert-layer` | `inherit ${number} revert` | `inherit ${number} unset` | `inherit ${number}%` | `inherit ${number}` | `inherit ${number}em` | `inherit ${number}px` | `inherit inherit ${number}%` | `inherit inherit ${number}em` | `inherit inherit ${number}px` | `inherit initial ${number}%` | `inherit initial ${number}em` | `inherit initial ${number}px` | `inherit revert ${number}%` | `inherit revert ${number}em` | `inherit revert ${number}px` | `inherit revert-layer ${number}%` | `inherit revert-layer ${number}em` | `inherit revert-layer ${number}px` | `inherit unset ${number}%` | `inherit unset ${number}em` | `inherit unset ${number}px` | `initial ${number} ${number}%` | `initial ${number} ${number}em` | `initial ${number} ${number}px` | `initial ${number} auto` | `initial ${number} content` | `initial ${number} fit-content` | `initial ${number} fix-content` | `initial ${number} inherit` | `initial ${number} initial` | `initial ${number} max-content` | `initial ${number} min-content` | `initial ${number} revert-layer` | `initial ${number} revert` | `initial ${number} unset` | `initial ${number}%` | `initial ${number}` | `initial ${number}em` | `initial ${number}px` | `initial inherit ${number}%` | `initial inherit ${number}em` | `initial inherit ${number}px` | `initial initial ${number}%` | `initial initial ${number}em` | `initial initial ${number}px` | `initial revert ${number}%` | `initial revert ${number}em` | `initial revert ${number}px` | `initial revert-layer ${number}%` | `initial revert-layer ${number}em` | `initial revert-layer ${number}px` | `initial unset ${number}%` | `initial unset ${number}em` | `initial unset ${number}px` | `revert ${number} ${number}%` | `revert ${number} ${number}em` | `revert ${number} ${number}px` | `revert ${number} auto` | `revert ${number} content` | `revert ${number} fit-content` | `revert ${number} fix-content` | `revert ${number} inherit` | `revert ${number} initial` | `revert ${number} max-content` | `revert ${number} min-content` | `revert ${number} revert-layer` | `revert ${number} revert` | `revert ${number} unset` | `revert ${number}%` | `revert ${number}` | `revert ${number}em` | `revert ${number}px` | `revert inherit ${number}%` | `revert inherit ${number}em` | `revert inherit ${number}px` | `revert initial ${number}%` | `revert initial ${number}em` | `revert initial ${number}px` | `revert revert ${number}%` | `revert revert ${number}em` | `revert revert ${number}px` | `revert revert-layer ${number}%` | `revert revert-layer ${number}em` | `revert revert-layer ${number}px` | `revert unset ${number}%` | `revert unset ${number}em` | `revert unset ${number}px` | `revert-layer ${number} ${number}%` | `revert-layer ${number} ${number}em` | `revert-layer ${number} ${number}px` | `revert-layer ${number} auto` | `revert-layer ${number} content` | `revert-layer ${number} fit-content` | `revert-layer ${number} fix-content` | `revert-layer ${number} inherit` | `revert-layer ${number} initial` | `revert-layer ${number} max-content` | `revert-layer ${number} min-content` | `revert-layer ${number} revert-layer` | `revert-layer ${number} revert` | `revert-layer ${number} unset` | `revert-layer ${number}%` | `revert-layer ${number}` | `revert-layer ${number}em` | `revert-layer ${number}px` | `revert-layer inherit ${number}%` | `revert-layer inherit ${number}em` | `revert-layer inherit ${number}px` | `revert-layer initial ${number}%` | `revert-layer initial ${number}em` | `revert-layer initial ${number}px` | `revert-layer revert ${number}%` | `revert-layer revert ${number}em` | `revert-layer revert ${number}px` | `revert-layer revert-layer ${number}%` | `revert-layer revert-layer ${number}em` | `revert-layer revert-layer ${number}px` | `revert-layer unset ${number}%` | `revert-layer unset ${number}em` | `revert-layer unset ${number}px` | `unset ${number} ${number}%` | `unset ${number} ${number}em` | `unset ${number} ${number}px` | `unset ${number} auto` | `unset ${number} content` | `unset ${number} fit-content` | `unset ${number} fix-content` | `unset ${number} inherit` | `unset ${number} initial` | `unset ${number} max-content` | `unset ${number} min-content` | `unset ${number} revert-layer` | `unset ${number} revert` | `unset ${number} unset` | `unset ${number}%` | `unset ${number}` | `unset ${number}em` | `unset ${number}px` | `unset inherit ${number}%` | `unset inherit ${number}em` | `unset inherit ${number}px` | `unset initial ${number}%` | `unset initial ${number}em` | `unset initial ${number}px` | `unset revert ${number}%` | `unset revert ${number}em` | `unset revert ${number}px` | `unset revert-layer ${number}%` | `unset revert-layer ${number}em` | `unset revert-layer ${number}px` | `unset unset ${number}%` | `unset unset ${number}em` | `unset unset ${number}px` | number | { S?: FlexType; M?: FlexType; L?: FlexType; XL?: FlexType; default?: FlexType; }",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "FlexType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::FlexType",
                            "referenceLocation": "FlexType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex"
            },
            "alignSelf": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ResponsiveType<AlignSelfType>",
                    "resolved": "\"auto\" | \"baseline\" | \"center\" | \"end\" | \"first baseline\" | \"flex-end\" | \"flex-start\" | \"inherit\" | \"initial\" | \"last baseline\" | \"left\" | \"normal\" | \"revert\" | \"revert-layer\" | \"right\" | \"safe center\" | \"self-end\" | \"self-start\" | \"start\" | \"stretch\" | \"unsafe center\" | \"unset\" | { S?: AlignSelfType; M?: AlignSelfType; L?: AlignSelfType; XL?: AlignSelfType; default?: AlignSelfType; }",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "AlignSelfType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::AlignSelfType",
                            "referenceLocation": "AlignSelfType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "align-self"
            },
            "justifySelf": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ResponsiveType<JustifySelfType>",
                    "resolved": "\"auto\" | \"baseline\" | \"center\" | \"end\" | \"first baseline\" | \"flex-end\" | \"flex-start\" | \"inherit\" | \"initial\" | \"last baseline\" | \"left\" | \"normal\" | \"revert\" | \"revert-layer\" | \"right\" | \"safe center\" | \"self-end\" | \"self-start\" | \"start\" | \"stretch\" | \"unsafe center\" | \"unset\" | { S?: JustifySelfType; M?: JustifySelfType; L?: JustifySelfType; XL?: JustifySelfType; default?: JustifySelfType; }",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "JustifySelfType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::JustifySelfType",
                            "referenceLocation": "JustifySelfType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "justify-self"
            },
            "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; } | ({ readonly [x: number]: string; [Symbol.iterator]: () => StringIterator<string>; link: (url: string) => string; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; 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; (that: string, locales?: LocalesArgument, 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; }; 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; (locales?: LocalesArgument): string; }; toUpperCase: () => string; toLocaleUpperCase: { (locales?: string | string[]): string; (locales?: LocalesArgument): string; }; trim: () => string; readonly length: number; substr: (from: number, length?: number) => 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; small: () => 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) => RegExpStringIterator<RegExpExecArray>; at: (index: number) => string; toString: () => string; valueOf: () => string; })",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "GridColumnType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::GridColumnType",
                            "referenceLocation": "GridColumnType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "grid-column"
            },
            "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; } | ({ readonly [x: number]: string; [Symbol.iterator]: () => StringIterator<string>; link: (url: string) => string; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; 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; (that: string, locales?: LocalesArgument, 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; }; 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; (locales?: LocalesArgument): string; }; toUpperCase: () => string; toLocaleUpperCase: { (locales?: string | string[]): string; (locales?: LocalesArgument): string; }; trim: () => string; readonly length: number; substr: (from: number, length?: number) => 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; small: () => 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) => RegExpStringIterator<RegExpExecArray>; at: (index: number) => string; toString: () => string; valueOf: () => string; })",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "GridRowType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::GridRowType",
                            "referenceLocation": "GridRowType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "grid-row"
            },
            "gridArea": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "ResponsiveType<GridAreaType>",
                    "resolved": "\"auto / auto / auto / auto\" | \"auto / auto / auto\" | \"auto / auto\" | \"auto\" | `${number} / ${number} / ${number} / ${number}` | `${number} / ${number} / ${number} / auto` | `${number} / ${number} / ${number} / span ${number}` | `${number} / ${number} / ${number}` | `${number} / ${number} / auto / ${number}` | `${number} / ${number} / auto / auto` | `${number} / ${number} / auto / span ${number}` | `${number} / ${number} / auto` | `${number} / ${number} / span ${number} / ${number}` | `${number} / ${number} / span ${number} / auto` | `${number} / ${number} / span ${number} / span ${number}` | `${number} / ${number} / span ${number}` | `${number} / ${number}` | `${number} / auto / ${number} / ${number}` | `${number} / auto / ${number} / auto` | `${number} / auto / ${number} / span ${number}` | `${number} / auto / ${number}` | `${number} / auto / auto / ${number}` | `${number} / auto / auto / auto` | `${number} / auto / auto / span ${number}` | `${number} / auto / auto` | `${number} / auto / span ${number} / ${number}` | `${number} / auto / span ${number} / auto` | `${number} / auto / span ${number} / span ${number}` | `${number} / auto / span ${number}` | `${number} / auto` | `${number} / span ${number} / ${number} / ${number}` | `${number} / span ${number} / ${number} / auto` | `${number} / span ${number} / ${number} / span ${number}` | `${number} / span ${number} / ${number}` | `${number} / span ${number} / auto / ${number}` | `${number} / span ${number} / auto / auto` | `${number} / span ${number} / auto / span ${number}` | `${number} / span ${number} / auto` | `${number} / span ${number} / span ${number} / ${number}` | `${number} / span ${number} / span ${number} / auto` | `${number} / span ${number} / span ${number} / span ${number}` | `${number} / span ${number} / span ${number}` | `${number} / span ${number}` | `auto / ${number} / ${number} / ${number}` | `auto / ${number} / ${number} / auto` | `auto / ${number} / ${number} / span ${number}` | `auto / ${number} / ${number}` | `auto / ${number} / auto / ${number}` | `auto / ${number} / auto / auto` | `auto / ${number} / auto / span ${number}` | `auto / ${number} / auto` | `auto / ${number} / span ${number} / ${number}` | `auto / ${number} / span ${number} / auto` | `auto / ${number} / span ${number} / span ${number}` | `auto / ${number} / span ${number}` | `auto / ${number}` | `auto / auto / ${number} / ${number}` | `auto / auto / ${number} / auto` | `auto / auto / ${number} / span ${number}` | `auto / auto / ${number}` | `auto / auto / auto / ${number}` | `auto / auto / auto / span ${number}` | `auto / auto / span ${number} / ${number}` | `auto / auto / span ${number} / auto` | `auto / auto / span ${number} / span ${number}` | `auto / auto / span ${number}` | `auto / span ${number} / ${number} / ${number}` | `auto / span ${number} / ${number} / auto` | `auto / span ${number} / ${number} / span ${number}` | `auto / span ${number} / ${number}` | `auto / span ${number} / auto / ${number}` | `auto / span ${number} / auto / auto` | `auto / span ${number} / auto / span ${number}` | `auto / span ${number} / auto` | `auto / span ${number} / span ${number} / ${number}` | `auto / span ${number} / span ${number} / auto` | `auto / span ${number} / span ${number} / span ${number}` | `auto / span ${number} / span ${number}` | `auto / span ${number}` | `span ${number} / ${number} / ${number} / ${number}` | `span ${number} / ${number} / ${number} / auto` | `span ${number} / ${number} / ${number} / span ${number}` | `span ${number} / ${number} / ${number}` | `span ${number} / ${number} / auto / ${number}` | `span ${number} / ${number} / auto / auto` | `span ${number} / ${number} / auto / span ${number}` | `span ${number} / ${number} / auto` | `span ${number} / ${number} / span ${number} / ${number}` | `span ${number} / ${number} / span ${number} / auto` | `span ${number} / ${number} / span ${number} / span ${number}` | `span ${number} / ${number} / span ${number}` | `span ${number} / ${number}` | `span ${number} / auto / ${number} / ${number}` | `span ${number} / auto / ${number} / auto` | `span ${number} / auto / ${number} / span ${number}` | `span ${number} / auto / ${number}` | `span ${number} / auto / auto / ${number}` | `span ${number} / auto / auto / auto` | `span ${number} / auto / auto / span ${number}` | `span ${number} / auto / auto` | `span ${number} / auto / span ${number} / ${number}` | `span ${number} / auto / span ${number} / auto` | `span ${number} / auto / span ${number} / span ${number}` | `span ${number} / auto / span ${number}` | `span ${number} / auto` | `span ${number} / span ${number} / ${number} / ${number}` | `span ${number} / span ${number} / ${number} / auto` | `span ${number} / span ${number} / ${number} / span ${number}` | `span ${number} / span ${number} / ${number}` | `span ${number} / span ${number} / auto / ${number}` | `span ${number} / span ${number} / auto / auto` | `span ${number} / span ${number} / auto / span ${number}` | `span ${number} / span ${number} / auto` | `span ${number} / span ${number} / span ${number} / ${number}` | `span ${number} / span ${number} / span ${number} / auto` | `span ${number} / span ${number} / span ${number} / span ${number}` | `span ${number} / span ${number} / span ${number}` | `span ${number} / span ${number}` | `span ${number}` | number | { S?: GridAreaType; M?: GridAreaType; L?: GridAreaType; XL?: GridAreaType; default?: GridAreaType; } | ({ readonly [x: number]: string; [Symbol.iterator]: () => StringIterator<string>; link: (url: string) => string; search: { (regexp: string | RegExp): number; (searcher: { [Symbol.search](string: string): number; }): number; }; 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; (that: string, locales?: LocalesArgument, 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; }; 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; (locales?: LocalesArgument): string; }; toUpperCase: () => string; toLocaleUpperCase: { (locales?: string | string[]): string; (locales?: LocalesArgument): string; }; trim: () => string; readonly length: number; substr: (from: number, length?: number) => 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; small: () => 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) => RegExpStringIterator<RegExpExecArray>; at: (index: number) => string; toString: () => string; valueOf: () => string; })",
                    "references": {
                        "ResponsiveType": {
                            "location": "import",
                            "path": "../../types/ui.type",
                            "id": "src/types/ui.type.ts::ResponsiveType",
                            "referenceLocation": "ResponsiveType"
                        },
                        "GridAreaType": {
                            "location": "import",
                            "path": "./interface",
                            "id": "src/components/vega-box/interface.ts::GridAreaType",
                            "referenceLocation": "GridAreaType"
                        }
                    }
                },
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "grid-area"
            }
        };
    }
    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);
