import type { CSSProp } from 'styled-components';
import type { StylableProps } from '~/types/component';
import type { ColorToken } from '~/types/tokens';
import type { OpaqueResponsive, ValueOrResponsive } from '~/utilities/opaque-responsive';
export type Border = boolean | string;
type Element = 'address' | 'article' | 'aside' | 'div' | 'footer' | 'header' | 'main' | 'nav' | 'section' | 'li';
type CornerRadius = 'none' | 'small' | 'default' | 'imageDefault' | 'circle';
type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
type AlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
type BorderStyle = 'none' | 'solid' | 'dashed' | 'dotted';
type Display = 'block' | 'flex' | 'grid' | 'inherit' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline' | 'none';
type FlexBasis = number | string | 'auto';
type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
type MaxHeight = 'none' | 'fill-available' | 'fit-content' | 'max-content' | 'min-content';
type MaxWidth = 'none' | 'fit-content' | 'max-content' | 'min-content';
type MinHeight = 'none' | 'fill-available' | 'fit-content' | 'max-content' | 'min-content';
type MinWidth = 'none' | 'fit-content' | 'max-content' | 'min-content';
type Overflow = 'visible' | 'hidden' | 'scroll' | 'auto';
type Position = 'static' | 'relative' | 'absolute' | 'fixed';
type TextAlign = 'left' | 'center' | 'right';
type VerticalAlign = 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom';
type Height = 'auto' | 'fit-content' | '100%' | 'inherit' | 'max-content' | 'min-content';
type Width = 'auto' | 'fit-content' | '100%' | 'inherit' | 'max-content' | 'min-content';
/**
 * @deprecated Use styled.div`` instead. If you need responsive properties, use the `mediaForBreakpoint` utility
 */
export interface BoxProps extends React.AriaAttributes, StylableProps {
    /**
     * See flexbox section below
     */
    alignContent?: ValueOrResponsive<AlignContent>;
    /**
     * See flexbox section below
     */
    alignItems?: ValueOrResponsive<AlignItems>;
    /**
     * See flexbox section below
     */
    alignSelf?: ValueOrResponsive<AlignSelf>;
    /**
     * See border section below
     */
    b?: ValueOrResponsive<Border>;
    /**
     * See border section below
     */
    bb?: ValueOrResponsive<Border>;
    /**
     * See border section below
     */
    bl?: ValueOrResponsive<Border>;
    /**
     * See border section below
     */
    br?: ValueOrResponsive<Border>;
    /**
     * See border section below
     */
    bt?: ValueOrResponsive<Border>;
    /**
     * Accepts token value
     */
    backgroundColor?: ValueOrResponsive<ColorToken>;
    /**
     * Accepts an token value
     * @default tokens.global.border.action.default
     */
    borderColor?: ColorToken;
    /**
     * See border section below
     */
    borderStrokeWidth?: string;
    /**
     * See border section below
     * @default "solid"
     */
    borderStyle?: BorderStyle;
    /**
     * Accepts any React node
     */
    children?: React.ReactNode;
    /**
     * Corner/border radius, using theme keywords
     */
    cornerRadius?: ValueOrResponsive<CornerRadius>;
    /**
     * Custom css (via styled-components/css)
     */
    css?: CSSProp;
    /**
     *  String descriptor for testing
     */
    'data-tag'?: string;
    /**
     * CSS [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display). Accepts `<Responsive>` values. Keyword values are `none`, `block`, `flex`, `inline-block`, `inline-flex`, `inline`, and `inherit`. `<div>` (default element) defaults to `block`.
     */
    display?: ValueOrResponsive<Display>;
    /**
     * The HTML element the `<Box>` is rendered as.
     * @default "div"
     */
    el?: Element;
    /**
     * See flexbox section below
     */
    flexBasis?: ValueOrResponsive<FlexBasis>;
    /**
     * See flexbox section below
     */
    flexDirection?: ValueOrResponsive<FlexDirection>;
    /**
     * See flexbox section below
     */
    flexGrow?: ValueOrResponsive<number>;
    /**
     * See flexbox section below
     */
    flexShrink?: ValueOrResponsive<number>;
    /**
     * See flexbox section below
     */
    flexWrap?: ValueOrResponsive<FlexWrap>;
    /**
     * Sets `height: 100%`
     */
    fluidHeight?: ValueOrResponsive<boolean>;
    /**
     * Sets `width: 100%`
     */
    fluidWidth?: ValueOrResponsive<boolean>;
    /**
     * CSS [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height). Accepts `<Responsive>` values.
     */
    height?: ValueOrResponsive<number | string | Height>;
    /**
     * HTML id property.
     */
    id?: string;
    /**
     * See flexbox section below
     */
    justifyContent?: ValueOrResponsive<JustifyContent>;
    /**
     * See margin & padding section below
     */
    m?: ValueOrResponsive<number>;
    /**
     * CSS [max-height](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height). Accepts `<Responsive>` values.
     */
    maxHeight?: ValueOrResponsive<number | string | MaxHeight>;
    /**
     * CSS [max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). Accepts `<Responsive>` values.
     */
    maxWidth?: ValueOrResponsive<number | string | MaxWidth>;
    /**
     * See margin & padding section below
     */
    mb?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    mh?: ValueOrResponsive<number>;
    /**
     * CSS [min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height). Accepts `<Responsive>` values.
     */
    minHeight?: ValueOrResponsive<number | string | MinHeight>;
    /**
     * CSS [min-width](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width). Accepts `<Responsive>` values.
     */
    minWidth?: ValueOrResponsive<number | string | MinWidth>;
    /**
     * See margin & padding section below
     */
    ml?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    mr?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    mt?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    mv?: ValueOrResponsive<number>;
    /**
     * Callback function for Box click.
     */
    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
    /**
     * Callback function for Box mouseEnter.
     */
    onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void;
    /**
     * Callback function for Box mouseLeave.
     */
    onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void;
    /**
     * See flexbox section below
     */
    order?: ValueOrResponsive<number>;
    /**
     * CSS [overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). Accepts `<Responsive>` values.
     */
    overflow?: ValueOrResponsive<Overflow>;
    /**
     * See margin & padding section below
     */
    p?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    pl?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    pr?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    pt?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    pb?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    pv?: ValueOrResponsive<number>;
    /**
     * See margin & padding section below
     */
    ph?: ValueOrResponsive<number>;
    /**
     * CSS [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position). Accepts `<Responsive>` values.
     */
    position?: ValueOrResponsive<Position>;
    /**
     * Horizontal alignment of an inline or table-cell box. `<Text>` should still be used to compose text.
     * See [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) for more info.
     * Accepts `<Responsive>` values.
     */
    textAlign?: ValueOrResponsive<TextAlign>;
    /**
     * Vertical alignment of an inline or table-cell box.
     * See [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) for more info.
     * Accepts `<Responsive>` values.
     */
    verticalAlign?: ValueOrResponsive<VerticalAlign>;
    /**
     * CSS [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width). Accepts `<Responsive>` values.
     */
    width?: ValueOrResponsive<number | string | Width>;
}
export type StyledProps = Required<Pick<BoxProps, 'borderColor' | 'borderStyle'>> & Pick<BoxProps, 'borderStrokeWidth' | 'css' | 'children' | 'data-tag' | 'el' | 'id' | 'onClick' | 'onMouseEnter' | 'onMouseLeave'> & {
    alignContent: OpaqueResponsive<AlignContent>;
    alignItems: OpaqueResponsive<AlignItems>;
    alignSelf: OpaqueResponsive<AlignSelf>;
    backgroundColor: OpaqueResponsive<ColorToken>;
    cornerRadius: OpaqueResponsive<CornerRadius>;
    display: OpaqueResponsive<Display>;
    flexBasis: OpaqueResponsive<FlexBasis>;
    flexDirection: OpaqueResponsive<FlexDirection>;
    flexGrow: OpaqueResponsive<number>;
    flexShrink: OpaqueResponsive<number>;
    flexWrap: OpaqueResponsive<FlexWrap>;
    fluidHeight: OpaqueResponsive<boolean>;
    fluidWidth: OpaqueResponsive<boolean>;
    height: OpaqueResponsive<number | string | Height>;
    justifyContent: OpaqueResponsive<JustifyContent>;
    maxHeight: OpaqueResponsive<number | string | MaxHeight>;
    maxWidth: OpaqueResponsive<number | string | MaxWidth>;
    minHeight: OpaqueResponsive<number | string | MinHeight>;
    minWidth: OpaqueResponsive<number | string | MinWidth>;
    order: OpaqueResponsive<number>;
    overflow: OpaqueResponsive<Overflow>;
    position: OpaqueResponsive<Position>;
    textAlign: OpaqueResponsive<TextAlign>;
    verticalAlign: OpaqueResponsive<VerticalAlign>;
    width: OpaqueResponsive<number | string | Width>;
    b: OpaqueResponsive<Border>;
    bt: OpaqueResponsive<Border>;
    br: OpaqueResponsive<Border>;
    bb: OpaqueResponsive<Border>;
    bl: OpaqueResponsive<Border>;
    p: OpaqueResponsive<number>;
    pv: OpaqueResponsive<number>;
    ph: OpaqueResponsive<number>;
    pt: OpaqueResponsive<number>;
    pr: OpaqueResponsive<number>;
    pb: OpaqueResponsive<number>;
    pl: OpaqueResponsive<number>;
    m: OpaqueResponsive<number>;
    mv: OpaqueResponsive<number>;
    mh: OpaqueResponsive<number>;
    mt: OpaqueResponsive<number>;
    mr: OpaqueResponsive<number>;
    mb: OpaqueResponsive<number>;
    ml: OpaqueResponsive<number>;
};
export {};