import type { ClassValue } from 'clsx'
import { AllHTMLAttributes, ElementType } from 'react'
import { Atoms, Space } from '../../css/atoms/atoms'
import { DataAttributes } from '../../hooks/useDataAttributes'
import type { ResponsiveProp } from '../../library/props/responsiveProp'
export declare type ResponsiveSpace = ResponsiveProp<Space>
export interface BoxDataAttribute {
    dataAttributes?: DataAttributes
    dataTest?: string
}
export interface BoxBaseProps extends Omit<Atoms, 'reset'> {
    className?: ClassValue
}
export declare const boxPaddingNames: readonly [
    'padding',
    'paddingX',
    'paddingY',
    'paddingTop',
    'paddingBottom',
    'paddingLeft',
    'paddingRight'
]
export declare type BoxPaddingNames = typeof boxPaddingNames[number]
export declare type BoxPadding = Pick<BoxBaseProps, BoxPaddingNames>
export declare const boxMarginNames: readonly [
    'margin',
    'marginX',
    'marginY',
    'marginTop',
    'marginBottom',
    'marginLeft',
    'marginRight'
]
export declare type BoxMarginNames = typeof boxMarginNames[number]
export declare type BoxMargin = Pick<BoxBaseProps, BoxMarginNames>
export interface BoxProps
    extends BoxBaseProps,
        Omit<AllHTMLAttributes<HTMLElement>, 'width' | 'height' | 'className'>,
        BoxDataAttribute {
    component?: ElementType
    debugName?: string
}
export declare const Box: import('react').ForwardRefExoticComponent<
    BoxProps & import('react').RefAttributes<HTMLElement>
>