import { BoxDisplayType, CornersType, HeightType, StateVariantType, CssStatesType, MarginType, PaddingType, ResponsiveType, WidthType, BorderStyleType, MinHeightType, MaxHeightType } from '../../types/ui.type';
import { GlobalSlimmers } from '../../vega-slimmer/vega-slimmer-core';
import { VegaBoxStateStylesController } from './slimmers/controllers/vega-box-state-styles-controller';
import { BackgroundColorsTokenType, BorderColorsTokenType, BordersTokenType, BreakpointsTokenType, ShadowsTokenType } from '../../types/design-token.type';
import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
import { AlignSelfType, FlexBasisType, FlexGrowType, FlexShrinkType, FlexType, JustifySelfType, OrderType, GridAreaType, GridColumnType, GridRowType } from './interface';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
import { VegaBoxResponsiveStyleController } from './slimmers/controllers/vega-box-responsive-style-controller';
/**
 * @vegaVersion 1.27.0
 */
export declare class VegaBox {
  protected readonly globalSlimmers: GlobalSlimmers;
  protected readonly pageResizeSlimmer: PageResizeObserverSlimmer;
  protected readonly stateStyleController: VegaBoxStateStylesController;
  protected vegaComponentUsageRuntimeMetricsSlimmer: VegaComponentUsageRuntimeMetricsSlimmer<HTMLVegaBoxElement>;
  protected responsiveStyleController: VegaBoxResponsiveStyleController;
  host: HTMLVegaBoxElement;
  currentBreakpoint: BreakpointsTokenType;
  /**
   * Determines the spacing between the content and the edges of the box.
   *    It can be set as a spacing value, such as `size-16` or `size-24`,
   *    to apply the same padding on all sides.
   *
   * Alternatively, you can set the padding as a responsive map,
   *    allowing you to define different padding values for different breakpoints.
   *    The responsive map should follow the structure
   *    `{default: 'size-12', L: { top: 'size-24', bottom: 'size-24'}}`.
   *
   * Note that the `default` value is required when using a responsive map
   *    to provide a fallback padding value for breakpoints
   *    that are not explicitly defined.
   *
   * @vegaVersion 1.27.0
   */
  padding: ResponsiveType<PaddingType>;
  watchPaddingChange(): void;
  /**
   * Defines the spacing around the box.
   *    You can set it as a single spacing value,
   *    such as `size-16` or `size-24`, which will apply
   *    the same margin on all sides of the box.
   *
   * Alternatively, you can set the padding as a responsive map,
   *    allowing you to define different margin values for different breakpoints.
   *    The responsive map should follow the structure
   *    `{default: 'size-12', L: { top: 'size-24', bottom: 'size-24'}}`.
   *
   * Note that the `default` value is required when using a responsive map
   *    to provide a fallback margin value for breakpoints
   *    that are not explicitly defined.
   *
   * @vegaVersion 1.27.0
   */
  margin: ResponsiveType<MarginType>;
  watchMarginChange(): void;
  /**
   * Defines the display behavior of the box, allowing you to choose from
   *    standard display options like `block`, `inline-block` and `none`.
   *
   * @vegaVersion 1.38.0
   */
  display: ResponsiveType<BoxDisplayType>;
  /**
   * Defines the border of the box.
   *    It accepts a string value representing a valid
   *    border token.
   *
   * @vegaVersion 2.0.0
   */
  border: StateVariantType<BordersTokenType, CssStatesType>;
  watchBorder(): void;
  /** Specifies the line style of the box border. *
   * @vegaVersion 2.7.0
   */
  borderStyle: BorderStyleType;
  /**
   * Defines the box shadow of the box.
   *    It accepts a string value representing a valid
   *    box shadow token.
   *
   * @vegaVersion 2.0.0
   */
  shadow: StateVariantType<ShadowsTokenType, 'default' | 'focus-visible' | 'hover'>;
  watchShadow(): void;
  /**
   * Defines the border color of the box.
   *    It accepts a string value representing a valid
   *    border color token.
   *
   * @vegaVersion 2.0.0
   */
  borderColor: StateVariantType<BorderColorsTokenType, CssStatesType>;
  watchBorderColor(): void;
  /**
   * Defines the background color of the box.
   *    It accepts a string value representing a valid
   *    background color token.
   *
   * @vegaVersion 2.0.0
   */
  backgroundColor: StateVariantType<BackgroundColorsTokenType, CssStatesType>;
  watchBackgroundColor(): void;
  /**
   * Specifies the width of the box.
   * It accepts values in numeric, string and spacing token formats.
   * For numeric values, use a number to indicate the width
   *    in pixels, e.g., 100 will be translated to 100px.
   * For string values, you can use CSS units like '%' or 'calc' expressions.
   *    For example, '100%' and 'calc(100vw - 20px)' which allows for more complex calculations to
   *    determine the width.
   * For 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.
   *
   * @vegaVersion 2.0.0
   */
  width: ResponsiveType<WidthType>;
  /**
   * Specifies the height of the box.
   * It accepts values in numeric, string and spacing token formats.
   * For numeric values, use a number to indicate the height
   *    in pixels, e.g., 100 will be translated to 100px.
   * For string values, you can use CSS units like '%' or 'calc' expressions.
   *    For example, '100%' and 'calc(100vh - 20px)' which allows for more complex calculations to
   *    determine the height.
   * For 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.
   *
   * @vegaVersion 2.0.0
   */
  height: ResponsiveType<HeightType>;
  /**
   * Specifies the minimum height of the box.
   * It accepts values in numeric, string and spacing token formats.
   * Numeric values represent minimum heights in pixels
   *    (e.g., 100 translates to 100px).
   * String values allow the use of CSS units such as '%'
   *    or keyword values like 'max-content'
   *    (e.g., '100%' or 'max-content').
   * Spacing tokens like 'size-2' or 'size-16' can also be used.
   *    Please refer to https://vega.globalpayments.com/tokens/spacing
   *    to check the full list of spacing tokens.
   *
   * @vegaVersion 2.7.0
   */
  minHeight: ResponsiveType<MinHeightType>;
  /**
   * Specifies the maximum height of the box.
   * It accepts values in numeric, string and spacing token formats.
   * Numeric values represent maximum heights in pixels
   *    (e.g., 100 translates to 100px).
   * String values allow the use of CSS units such as '%'
   *    or keyword values like 'min-content'
   *    (e.g., '100%' or 'min-content').
   * Spacing tokens like 'size-2' or 'size-16' can also be used.
   *    Please refer to https://vega.globalpayments.com/tokens/spacing
   *    to check the full list of spacing tokens.
   *
   * @vegaVersion 2.7.0
   */
  maxHeight: ResponsiveType<MaxHeightType>;
  /**
   * Defines the custom class name of the box.
   *
   * @vegaVersion 2.0.0
   */
  responsiveClass: ResponsiveType<string>;
  /**
   * Defines the corner of the box.
   *    It accepts a string value representing a valid
   *    border radius token.
   *
   * @vegaVersion 2.0.0
   */
  corners: ResponsiveType<CornersType>;
  watchCornersChange(): void;
  /**
   * Specifies the base size of the box.
   *
   * @vegaVersion 2.3.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
   */
  flexBasis: ResponsiveType<FlexBasisType>;
  /**
   * Specifies how the box is grow.
   *
   * @vegaVersion 2.3.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
   */
  flexGrow: ResponsiveType<FlexGrowType>;
  /**
   * Specifies how much the box shrinks.
   *
   * @vegaVersion 2.3.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
   */
  flexShrink: ResponsiveType<FlexShrinkType>;
  /**
   * Specifies the display order of the box.
   *
   * @vegaVersion 2.3.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/order
   */
  order: ResponsiveType<OrderType>;
  /**
   * Specifies how the box adjusts its size, growth, and alignment within a flex container.
   *
   * @vegaVersion 2.3.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/flex
   */
  flex: ResponsiveType<FlexType>;
  /**
   * Specifies how the box aligns itself within its container.
   *
   * @vegaVersion 2.3.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
   */
  alignSelf: ResponsiveType<AlignSelfType>;
  /**
   * Specifies how a single box justifies its content along the main axis within its container.
   *
   * @vegaVersion 2.3.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
   */
  justifySelf: ResponsiveType<JustifySelfType>;
  /**
   * Determines the placement of the item within the grid along the horizontal axis.
   *
   * @vegaVersion 2.5.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
   */
  gridColumn: ResponsiveType<GridColumnType>;
  /**
   * Determines the placement of the item within the grid along the vertical axis.
   *
   * @vegaVersion 2.5.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row
   */
  gridRow: ResponsiveType<GridRowType>;
  /**
   * Defines the area within the grid occupied by the item. It accepts CSS values and can be set as ResponsiveType.
   *
   * @vegaVersion 2.5.0
   * @nativeTypeRedirection https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
   */
  gridArea: ResponsiveType<GridAreaType>;
  render(): VegaBox;
}