import React from 'react';
import { BorderColor, Responsive, SpacingScale } from '../types';
export declare const spacingMap: Record<SpacingScale, string>;
export declare const borderWidthMap: {
    none: string;
    thin: string;
    medium: string;
};
export declare const lineStylesMap: {
    solid: string;
    dotted: string;
};
export type Element = 'div' | 'span' | 'section' | 'legend' | 'ul' | 'li';
export type LineStyles = 'solid' | 'dotted';
export type BorderWidth = 'none' | 'thin' | 'medium';
export interface PHXBoxProps {
    children?: React.ReactNode;
    as?: Element;
    p?: Responsive<SpacingScale>;
    pt?: Responsive<SpacingScale>;
    pb?: Responsive<SpacingScale>;
    pl?: Responsive<SpacingScale>;
    pr?: Responsive<SpacingScale>;
    m?: Responsive<SpacingScale>;
    mt?: Responsive<SpacingScale>;
    mb?: Responsive<SpacingScale>;
    ml?: Responsive<SpacingScale>;
    mr?: Responsive<SpacingScale>;
    fullWidth?: boolean;
    maxWidth?: number;
    borderStyle?: LineStyles;
    borderWidth?: BorderWidth;
    /** Vertical start border width */
    borderTop?: BorderWidth;
    /** Vertical end border width */
    borderBottom?: BorderWidth;
    /** Horizontal start border width */
    borderLeft?: BorderWidth;
    /** Horizontal end border width */
    borderRight?: BorderWidth;
    borderColor?: BorderColor;
    cursor?: 'pointer' | 'default';
    widthFitContent?: boolean;
}
export declare const PHXBox: ({ children, p, pt, pb, pl, pr, m, mt, mb, ml, mr, fullWidth, borderStyle, borderWidth, maxWidth, as, borderTop, borderBottom, borderLeft, borderRight, borderColor, cursor, widthFitContent, }: PHXBoxProps) => React.JSX.Element;