import type { ResponsiveProp, SparkTheme } from '@spark-web/theme';
type ValidGapKeys = keyof Omit<SparkTheme['spacing'], 'none' | 'full'>;
type ResponsiveSpacing = ResponsiveProp<keyof SparkTheme['spacing']>;
type ResponsiveSizing = ResponsiveProp<keyof SparkTheme['sizing']>;
export type ResponsiveBoxProps = {
    /**
     * The `margin` shorthand property sets the margin area on all four sides of
     * an element at once.
     */
    margin?: ResponsiveSpacing;
    /**
     * The `marginTop` property sets the margin area on the top side of an
     * element.
     */
    marginTop?: ResponsiveSpacing;
    /**
     * The `marginRight` property sets the margin area on the right side of an
     * element.
     */
    marginRight?: ResponsiveSpacing;
    /**
     * The `marginBottom` property sets the margin area on the bottom side of an
     * element.
     */
    marginBottom?: ResponsiveSpacing;
    /**
     * The `marginLeft` property sets the margin area on the left side of an
     * element.
     */
    marginLeft?: ResponsiveSpacing;
    /**
     * The `marginY` shorthand property sets the margin area on the top and
     * bottom of the element.
     */
    marginY?: ResponsiveSpacing;
    /**
     * The `marginY` shorthand property sets the margin area on the left and
     * right of the element.
     */
    marginX?: ResponsiveSpacing;
    /**
     * The `padding` shorthand property sets the padding area on all four sides
     * of an element at once.
     */
    padding?: ResponsiveSpacing;
    /**
     * The `paddingTop` property sets the height of the padding area on the top
     * of an element.
     */
    paddingTop?: ResponsiveSpacing;
    /**
     * The `paddingRight` property sets the width of the padding area on the
     * right of an element.
     */
    paddingRight?: ResponsiveSpacing;
    /**
     * The `paddingBottom` property sets the height of the padding area on the
     * bottom of an element.
     */
    paddingBottom?: ResponsiveSpacing;
    /**
     * The `paddingLeft` property sets the width of the padding area on the left
     * of an element.
     */
    paddingLeft?: ResponsiveSpacing;
    /**
     * The `paddingY` shorthand property sets the padding area on the top and
     * bottom of the element.
     */
    paddingY?: ResponsiveSpacing;
    /**
     * The `paddingX` shorthand property sets the padding area on the left and
     * right of the element.
     */
    paddingX?: ResponsiveSpacing;
    /** The `border` property sets the color of an element's border. */
    border?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
    /** The `border` property sets the color of an element's border on the top side. */
    borderTop?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
    /** The `border` property sets the color of an element's border on the bottom side. */
    borderBottom?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
    /** The `border` property sets the color of an element's border on the left side. */
    borderLeft?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
    /** The `border` property sets the color of an element's border on the right side. */
    borderRight?: ResponsiveProp<keyof SparkTheme['border']['color'] | string>;
    /**
     * The `borderRadius` property rounds the corners of an element's outer
     * border edge.
     */
    borderRadius?: ResponsiveProp<keyof SparkTheme['border']['radius']> | number;
    /**
     * The `borderWidth` property sets the width of an element's border.
     */
    borderWidth?: ResponsiveProp<keyof SparkTheme['border']['width']>;
    /** Sets the element's height. */
    height?: ResponsiveSizing;
    /** Sets the element's width. */
    width?: ResponsiveSizing;
    /** Controls the alignment of items on the cross axis. */
    alignItems?: ResponsiveProp<keyof typeof flexMap.alignItems>;
    /** The size of the gap between each child element. */
    gap?: ResponsiveProp<ValidGapKeys>;
    /** Defines the main axis, or how the children are placed. */
    flexDirection?: ResponsiveProp<keyof typeof flexMap.flexDirection>;
    /**
     * defines how the browser distributes space between and around content items
     * along the main-axis.
     */
    justifyContent?: ResponsiveProp<keyof typeof flexMap.justifyContent>;
    /** Allow flex items to flow onto multiple lines. */
    flexWrap?: ResponsiveProp<'nowrap' | 'wrap'>;
    /**
     * Overrides the parent's `align-items` value. Controls the alignment of
     * item's on the cross axis.
     */
    alignSelf?: ResponsiveProp<keyof typeof flexMap.alignItems>;
    /**
     * The `flex` shorthand property sets how a flex item will grow or shrink to
     * fit the space available in its flex container.
     */
    flex?: ResponsiveProp<0 | 1>;
    /** The `flexGrow` property sets the flex grow factor of a flex item main size. */
    flexGrow?: ResponsiveProp<0 | 1>;
    /**
     * The `flexShrink` property sets the flex shrink factor of a flex item. If
     * the size of all flex items is larger than the flex container, items shrink
     * to fit according to `flex-shrink`.
     */
    flexShrink?: ResponsiveProp<0 | 1>;
    /**
     * The `position` property sets how an element is positioned in a document.
     * The `top`, `right`, `bottom`, and `left` properties determine the final
     * location of positioned elements.
     */
    position?: ResponsiveProp<'absolute' | 'fixed' | 'relative' | 'sticky'>;
    /**
     * The `top` property participates in specifying the vertical position of a
     * positioned element. It has no effect on non-positioned elements.
     */
    top?: ResponsiveProp<number>;
    /**
     * The `right` property participates in specifying the horizontal position of
     * a positioned element. It has no effect on non-positioned elements.
     */
    right?: ResponsiveProp<number>;
    /**
     * The `bottom` property participates in setting the vertical position of a
     * positioned element. It has no effect on non-positioned elements.
     */
    bottom?: ResponsiveProp<number>;
    /**
     * The `left` property participates in specifying the horizontal position of a
     * positioned element. It has no effect on non-positioned elements.
     */
    left?: ResponsiveProp<number>;
    /**
     * The `zIndex` property sets the "z-order" of a positioned element and its
     * descendants or flex items. Overlapping elements with a larger z-index cover
     * those with a smaller one.
     */
    zIndex?: ResponsiveProp<keyof SparkTheme['elevation']>;
    /**
     * Sets whether an element is treated as a block or inline element and the
     * layout used for its children.
     */
    display?: ResponsiveProp<'block' | 'flex' | 'inline' | 'inline-block' | 'inline-flex' | 'none'>;
    /**
     * Sets the opacity of the element. Opacity is the degree to which content
     * behind an element is hidden, and is the opposite of transparency.
     */
    opacity?: ResponsiveProp<number>;
};
type UnresponsiveBoxProps = {
    /** The `background` property sets the background color of an element. */
    background?: keyof SparkTheme['color']['background'];
    /**
     * The `cursor` property sets the type of mouse cursor, if any, to show when
     * the mouse pointer is over an element.
     */
    cursor?: 'default' | 'pointer';
    /**
     * The `minHeight` property sets the minimum height of an element. It prevents
     * the used value of the height property from becoming smaller than the value
     * specified for `minHeight`.
     */
    minHeight?: 0;
    /**
     * The `minWidth` property sets the minimum width of an element. It prevents
     * the used value of the width property from becoming smaller than the value
     * specified for `minWidth`.
     */
    minWidth?: 0;
    /**
     * The `overflow` shorthand property sets the desired behavior for an
     * element's overflow — i.e. when an element's content is too big to fit in
     * its block formatting context — in both directions.
     */
    overflow?: 'hidden' | 'scroll' | 'visible' | 'auto';
    /** The `boxShadow` property adds shadow effects around an element's frame. */
    shadow?: keyof SparkTheme['shadow'] | string | null;
    /** The `userSelect` property controls whether the user can select text. */
    userSelect?: 'none';
};
export type BoxStyleProps = UnresponsiveBoxProps & ResponsiveBoxProps;
export declare const useBoxStyles: ({ alignItems, alignSelf, background, border, borderTop, borderBottom, borderLeft, borderRight, borderRadius, borderWidth, bottom, cursor, display, flex, flexDirection, flexGrow, flexShrink, flexWrap, gap, height, justifyContent, left, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, minHeight, minWidth, opacity, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, position, right, shadow, top, userSelect, width, zIndex, }: BoxStyleProps) => import("facepaint").DynamicStyle[];
declare const flexMap: {
    readonly alignItems: {
        readonly start: "flex-start";
        readonly center: "center";
        readonly end: "flex-end";
        readonly stretch: "stretch";
    };
    readonly justifyContent: {
        readonly start: "flex-start";
        readonly center: "center";
        readonly end: "flex-end";
        readonly spaceBetween: "space-between";
        readonly stretch: "stretch";
    };
    readonly flexDirection: {
        readonly row: "row";
        readonly rowReverse: "row-reverse";
        readonly column: "column";
        readonly columnReverse: "column-reverse";
    };
};
export {};