/// <reference types="react" />
import { ThemeColor } from '.';
export type BasicElement = BasicTag & States;
export type BasicTag = {
    className?: string;
    id?: string;
    componentID?: string;
};
export type FreeCSS = React.CSSProperties;
export type PropsNFreeCSS = Properties & {
    freeCSS?: FreeCSS;
};
export type States = Properties & {
    freeCSS?: FreeCSS;
    UnderBreakPointStyles?: Properties;
};
export declare namespace Pargins {
    type States = {
        margin?: Group;
        marginTop?: Unit;
        marginRight?: Unit;
        marginBottom?: Unit;
        marginLeft?: Unit;
        padding?: Group;
        paddingTop?: Unit;
        paddingRight?: Unit;
        paddingBottom?: Unit;
        paddingLeft?: Unit;
    };
    type Unit = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 1 | 1.5 | 2 | 2.5 | 3 | 4 | 6 | 'auto' | 'safeAreaTop' | 'safeAreaBottom';
    type Group = Unit | [Unit, Unit] | [Unit, Unit, Unit, Unit];
}
export declare namespace Borders {
    type States = {
        border?: Border;
        borderTop?: Border;
        borderRight?: Border;
        borderBottom?: Border;
        borderLeft?: Border;
        borderWidth?: Width;
        borderColor?: Color;
        borderStyle?: Style;
        borderRadius?: Radius;
        borderTopLeftRadius?: Radius;
        borderTopRightRadius?: Radius;
        borderBottomLeftRadius?: Radius;
        borderBottomRightRadius?: Radius;
    };
    type Border = boolean | '0.trans' | '1.thin' | '2.normal' | '3.thick' | 'unset';
    type Width = 0 | 1 | 2 | 3 | 4;
    type Color = UniColors | LayerColors | '0.trans' | '1.thin' | '2.normal' | '3.thick';
    type Style = 'solid' | 'dashed' | 'double' | 'dotted' | 'none';
    type Radius = 0 | '1/3' | '2/3' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 'sphere' | 'inherit' | '1.tone.primary' | '2.tone.secondary' | '3.tone.tertiary';
}
export declare namespace FlexGrids {
    type States = {
        flexSizing?: 'none' | 'auto' | 0;
        flexWrap?: boolean;
        flexCenter?: boolean;
        flexType?: Type;
        flexChilds?: 'even' | 'auto' | 'none' | 'unset';
        flexGrid?: Grid;
        flexNewLine?: boolean;
        verticalAlign?: VerticalAlign;
        horizontalAlign?: HorizontalAlign;
        gridCenter?: boolean;
        gridCols?: GridCols;
    };
    type Type = 'row' | 'row-r' | 'col' | 'col-r';
    type VerticalAlign = 'center' | 'top' | 'bottom' | 'baseline' | 'unset';
    type HorizontalAlign = 'center' | 'left' | 'right' | 'between' | 'around' | 'even' | 'unset';
    type Grid = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'unset';
    type GridCols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
}
export declare namespace Fonts {
    type States = {
        fontColor?: Color;
        fontSize?: Size;
        fontWeight?: Weight;
        fontHeight?: LineHeight;
        isLightFont?: boolean;
        isSemiBoldFont?: boolean;
        isBoldFont?: boolean;
        textAlign?: 'left' | 'center' | 'right';
        textDecoration?: 'none' | 'underline' | 'line-through';
    };
    type Weight = '0.thin' | '1.light' | '2.normal' | '3.semiBold' | '4.bold' | '5.extraBold' | 'inherit' | 'lighter' | 'bolder';
    type Color = UniColors | '1.clear' | '2.normal' | '3.blur' | '4.thin' | '5.translucent' | '6.clear' | 'mono.potivite' | 'mono.negative' | 'logo' | 'trans';
    type LineHeight = 1 | 1.2 | 1.5 | 2 | 'inherit';
    type Size = '0.xs' | '1.mini' | '2.normal' | '3.paragraph' | '4.thirdTitle' | '5.subTitle' | '6.title' | '7.landing' | '8.xl' | 'inherit';
}
export declare namespace Sizes {
    type States = {
        maxHeight?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'unset';
        minHeight?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'unset';
        minWidth?: 0 | 1 | 'viewWidth' | 'contentWidth' | 'sideNavigationWidth' | 'unset';
        maxWidth?: 0 | 1 | 'viewWidth' | 'contentWidth' | 'sideNavigationWidth' | 'unset';
        unitWidth?: Size;
        unitHeight?: Size;
        width?: 0 | 1 | 'viewWidth' | 'contentWidth' | 'sideNavigationWidth' | 'auto';
        height?: 0 | 1 | 'viewHeight' | 'topNavigationHeight' | 'footerNavigationHeight' | 'sideNavigationHeight' | 'contentHeight' | 'auto';
    };
    type Size = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 6 | 8 | 12 | 'unset';
}
export declare namespace StyleSets {
    type States = {
        ssCardBox?: boolean | 'border' | 'plain' | 'cloud' | 'shadow';
        ssPushable?: boolean;
        ssSphere?: Sizes.Size;
        ssSquare?: Sizes.Size;
        ssAbsoluteCovered?: boolean;
        ssTextEllipsis?: boolean;
        ssEffectsOnActive?: EffectsOnActive | EffectsOnActive[] | false;
        ssLastChildLossBorder?: 'bottom' | 'right' | false;
        isRounded?: boolean | number;
        isSquare?: boolean;
    };
}
export type gapUnit = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 1 | 1.5 | 2 | 2.5 | 3 | 4;
export type gap = gapUnit | [gapUnit, gapUnit];
export type overflowUnit = 'auto' | 'hidden' | 'scroll' | 'visible' | 'unset';
export type overflow = overflowUnit | [overflowUnit, overflowUnit];
export type UniColors = 'inherit' | 'theme' | 'posi' | 'nega' | 'warn' | 'white' | 'black' | 'dark' | ThemeColor;
export type LayerColors = 'layer.0' | 'layer.1' | 'layer.2' | 'layer.3' | 'layer.4' | 'layer.5' | 'layer.6';
export type BackgroundColor = UniColors | LayerColors | 'layer.0.opa.few' | 'layer.0.opa.low' | 'layer.0.opa.middle' | 'layer.0.opa.high' | 'layer.1.opa.few' | 'layer.1.opa.low' | 'layer.1.opa.middle' | 'layer.1.opa.high' | 'layer.4.opa.few' | 'layer.4.opa.low' | 'layer.4.opa.middle' | 'layer.4.opa.high' | 'theme.opa.few' | 'theme.opa.low' | 'theme.opa.middle' | 'theme.opa.high' | 'theme.lighten' | 'theme.lighter' | 'theme.lightest' | 'theme.darken' | 'theme.darker' | 'theme.darkest' | 'nega.opa.low' | 'nega.opa.middle' | 'posi.opa.low' | 'posi.opa.middle' | 'mono.positive' | 'mono.negative' | 'cloud' | 'gray' | 'trans' | 'none';
export type TRBL = 0 | '1/12' | '1/6' | '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 1 | 2 | 3 | 4 | '50%' | '100%';
export type EffectsOnActive = 'ripple.white' | 'ripple.cloud' | 'ripple.theme' | 'push' | 'expand' | 'shrink' | 'pudding' | 'fade' | 'none';
export type Properties = Pargins.States & Fonts.States & Borders.States & FlexGrids.States & Sizes.States & StyleSets.States & {
    backgroundColor?: BackgroundColor;
    gradients?: {
        deg: number;
        colors: string[];
    };
    boxShadow?: '3.min.inset' | '3.normal.inset' | '3.remark.inset' | '3.max.inset' | '2.min.inset' | '2.normal.inset' | '2.remark.inset' | '2.max.inset' | '1.min.inset' | '1.normal.inset' | '1.remark.inset' | '1.max.inset' | '0.min.inset' | '0.normal.inset' | '0.remark.inset' | '0.max.inset' | '0.min' | '0.normal' | '0.remark' | '0.max' | '1.min' | '1.normal' | '1.remark' | '1.max' | '2.min' | '2.normal' | '2.remark' | '2.max' | '3.min' | '3.normal' | '3.remark' | '3.max' | '4.min' | '4.normal' | '4.remark' | '4.max' | '5.min' | '5.normal' | '5.remark' | '5.max' | 'none';
    display?: 'block' | 'none' | 'flex' | 'grid' | 'inlineBlock' | 'inlineFlex' | 'inline';
    gap?: gap;
    overflow?: overflow;
    position?: 'relative' | 'absolute' | 'fixed' | 'sticky' | 'static';
    top?: TRBL | 'topBase' | 'topNavigationHeight';
    right?: TRBL;
    bottom?: TRBL | 'footerNavigationHeight';
    left?: TRBL;
    opacity?: 'trans' | 'min' | 'low' | 'middle' | 'high' | 'max';
    transition?: 'none' | 'short' | 'middle' | 'long';
};