/// <reference types="react" />
import { ClassValue } from 'classnames/types';
import { ResponsiveSelector } from '../../shared/utils/getResponsiveClasses/getResponsiveClasses';
import { BorderRadiusProps } from './getBorderRadiusClasses';
import { MarginProps } from './getMarginClasses';
import { PaddingProps } from './getPaddingClasses';
import { ArrayElementType } from '../../types/utils/ArrayElementType';
declare type TagName = keyof JSX.IntrinsicElements;
export declare type CommonProps<T extends TagName> = Omit<ElementProps<T>, 'tagName'>;
export declare type ElementProps<T extends TagName> = {
    /** Element class name */
    className?: ClassValue;
    /** HTML tag name: div, span, h1 etc */
    tagName: T;
    /** Margin for the element */
    margin?: MarginProps | false | null;
    /** Padding for the element */
    padding?: PaddingProps;
    /** Color of the text inside the element */
    color?: SupportedColor;
    /** Element hover color */
    hoverColor?: SupportedColor;
    /** Background color of the element */
    backgroundColor?: SupportedColor;
    /** Element background hover color */
    backgroundHoverColor?: SupportedColor;
    /** Set element to be an inline block element */
    inlineBlock?: boolean;
    /** Set element to be a block element */
    block?: boolean;
    /** Show element */
    shown?: boolean;
    /** Hide element */
    hidden?: boolean;
    /** Set element to be a flex item */
    flexItem?: FlexItemProp;
    /** Add different box shadow to element */
    boxShadow?: SupportedBoxShadow;
    /** Element hover box shadow */
    hoverBoxShadow?: SupportedBoxShadow;
    /** Hide element in specific breakpoints */
    responsiveHidden?: ResponsiveHiddenProp;
    /** Occupy vertical space, used with Flex */
    occupyVerticalSpace?: boolean;
    /** Occupy horizontal space, used with Flex */
    occupyHorizontalSpace?: boolean;
    /** Force wrap for element text */
    forceWrap?: boolean;
    /** React ref */
    refElement?: React.Ref<any>;
    /** Stop content from overflowing outside of element */
    hideOverflow?: boolean;
    /** Allow content to overflow outside of element */
    showOverflow?: boolean;
    /** Align text to center */
    alignTextToCenter?: boolean;
    /** Align text to right */
    alignTextToRight?: boolean;
    /** Sets "cursor: pointer" style for the element to indicate the clickability. Is encouraged to use together with hoverColor and backgroundHoverColor props. */
    clickableAppearance?: boolean;
    /** Border radius for element */
    borderRadius?: BorderRadiusProps;
    /** Allow passing fontweight of normal, medium, bold */
    fontWeight?: SupportedFontWeight;
} & Omit<JSX.IntrinsicElements[T], 'color' | 'className' | 'ref' | 'hidden'>;
export default function Element<T extends TagName>({ className, tagName, children, margin, padding, color, hoverColor, backgroundColor, backgroundHoverColor, inlineBlock, block, shown, hidden, flexItem, boxShadow, hoverBoxShadow, responsiveHidden, occupyVerticalSpace, occupyHorizontalSpace, forceWrap, style: explicitStyles, refElement, hideOverflow, showOverflow, alignTextToCenter, alignTextToRight, clickableAppearance, borderRadius, fontWeight, ...props }: ElementProps<T>): import("react").DOMElement<{
    style?: import("react").CSSProperties;
    className: string;
    ref: ((instance: any) => void) | import("react").RefObject<any> | null | undefined;
} & Pick<ElementProps<T>, Exclude<Exclude<keyof JSX.IntrinsicElements[T], "hidden" | "color" | "ref" | "className">, "hidden" | "color" | "style" | "block" | "padding" | "backgroundColor" | "boxShadow" | "fontWeight" | "borderRadius" | "margin" | "children" | "className" | "tagName" | "hoverColor" | "backgroundHoverColor" | "inlineBlock" | "shown" | "flexItem" | "hoverBoxShadow" | "responsiveHidden" | "occupyVerticalSpace" | "occupyHorizontalSpace" | "forceWrap" | "refElement" | "hideOverflow" | "showOverflow" | "alignTextToCenter" | "alignTextToRight" | "clickableAppearance">>, any>;
export declare const supportedColors: readonly ["inherit", "transparent", "overlay", "white", "black", "purple100", "purple200", "purple300", "purple400", "purple500", "purple600", "purple700", "purple800", "purple900", "gray100", "gray200", "gray300", "gray400", "gray500", "gray600", "gray700", "gray800", "gray900", "red100", "red200", "red300", "red400", "red500", "red600", "red700", "red800", "red900", "blue100", "blue200", "blue300", "blue400", "blue500", "blue600", "blue700", "blue800", "blue900", "orange100", "orange200", "orange300", "orange400", "orange500", "orange600", "orange700", "orange800", "orange900", "green100", "green200", "green300", "green400", "green500", "green600", "green700", "green800", "green900"];
export declare type SupportedColor = ArrayElementType<typeof supportedColors>;
export declare const supportedFontWeights: readonly ["normal", "medium", "bold"];
export declare type SupportedFontWeight = ArrayElementType<typeof supportedFontWeights>;
export declare const supportedSizes: readonly ["zero", "xxxs", "xxs", "xs", "sm", "md", "lg", "xlg", "xxlg"];
export declare type SupportedSize = ArrayElementType<typeof supportedSizes>;
export declare const responsiveSupportedSizes: readonly ["xxxs", "xxs", "xs", "sm", "md", "lg", "xlg"];
export declare type ResponsiveSupportedSize = ArrayElementType<typeof responsiveSupportedSizes>;
export declare type SupportedBoxShadow = 'zero' | 'sm' | 'md' | 'lg';
export declare type ResponsiveHiddenProp = false | ResponsiveSelector;
export declare type Color = SupportedColor;
export declare type ElementAttributes = ElementProps<TagName>;
export declare type FontWeights = SupportedFontWeight;
export declare type ShadowSize = SupportedBoxShadow;
export declare type SpacingSize = SupportedSize;
export declare type FlexItemProp = boolean | {
    sizeMultiplier?: number;
    alignSelfTo?: 'bottom';
};
export {};