import * as _xstyled_system from '@xstyled/system';
import { ITheme as ITheme$1, Screens, Colors, system, StyleGenerator, ThemeGetter, ThemeGetterType, CSSScalar } from '@xstyled/system';
import * as React from 'react';

declare function useThemeScreens(theme: ITheme$1): Screens;
declare function useViewportWidth(): number | null;
declare function useThemeBreakpoint(theme: ITheme$1): string | null;
declare function useThemeUp(theme: ITheme$1, key: string | number): boolean;
declare function useThemeDown(theme: ITheme$1, key: string | number): boolean;

type ColorModeState = [string | null, (mode: string | null) => void];
interface ColorModes {
    [key: string]: Colors;
}
interface ITheme {
    useCustomProperties?: boolean;
    useColorSchemeMediaQuery?: boolean;
    initialColorModeName?: string;
    defaultColorModeName?: string;
    colors?: Colors & {
        modes?: ColorModes;
    };
}
declare function createColorStyles(theme: ITheme, { targetSelector }?: {
    targetSelector?: string | undefined;
}): string | null;
declare function useColorModeState(theme: ITheme, { target }?: {
    target?: Element;
}): ColorModeState;
declare function useColorModeTheme(theme: ITheme, mode: string | null): ITheme | null;
declare const ColorModeContext: React.Context<ColorModeState | null>;
declare function useColorMode(): ColorModeState;
interface ColorModeProviderProps {
    children: React.ReactNode;
    target?: Element;
    targetSelector?: string;
}
declare function createColorModeProvider({ ThemeContext, ThemeProvider, ColorModeStyle, }: {
    ThemeContext: React.Context<any>;
    ThemeProvider: React.ComponentType<any>;
    ColorModeStyle: React.ComponentType<any>;
}): React.FC<ColorModeProviderProps>;
interface GetInitScriptOptions {
    target?: string;
}
declare function getColorModeInitScriptElement(options?: GetInitScriptOptions): JSX.Element;
declare function getColorModeInitScriptTag(options?: GetInitScriptOptions): string;

declare function createBox(): (string | typeof system)[];
declare namespace createBox {
    var meta: {
        props: string[];
        cssGetters: {
            [key: string]: _xstyled_system.ThemeGetter<any>;
        };
        getStyle: _xstyled_system.StyleGenerator<_xstyled_system.SystemProps<_xstyled_system.Theme>>;
        generators?: _xstyled_system.StyleGenerator<{}>[] | undefined;
    };
}

declare const createTransform: (generator: StyleGenerator) => (rawValue: any) => any;

declare const createUseGetter: <T extends ThemeGetter<any>>(getter: T, useTheme: () => object) => (value: ThemeGetterType<T>, defaultValue?: CSSScalar) => CSSScalar;

interface BoxElements {
    aBox: 'a';
    abbrBox: 'abbr';
    addressBox: 'address';
    areaBox: 'area';
    articleBox: 'article';
    asideBox: 'aside';
    audioBox: 'audio';
    bBox: 'b';
    baseBox: 'base';
    bdiBox: 'bdi';
    bdoBox: 'bdo';
    bigBox: 'big';
    blockquoteBox: 'blockquote';
    bodyBox: 'body';
    brBox: 'br';
    buttonBox: 'button';
    canvasBox: 'canvas';
    captionBox: 'caption';
    citeBox: 'cite';
    codeBox: 'code';
    colBox: 'col';
    colgroupBox: 'colgroup';
    dataBox: 'data';
    datalistBox: 'datalist';
    ddBox: 'dd';
    delBox: 'del';
    detailsBox: 'details';
    dfnBox: 'dfn';
    dialogBox: 'dialog';
    box: 'div';
    divBox: 'div';
    dlBox: 'dl';
    dtBox: 'dt';
    emBox: 'em';
    embedBox: 'embed';
    fieldsetBox: 'fieldset';
    figcaptionBox: 'figcaption';
    figureBox: 'figure';
    footerBox: 'footer';
    formBox: 'form';
    h1Box: 'h1';
    h2Box: 'h2';
    h3Box: 'h3';
    h4Box: 'h4';
    h5Box: 'h5';
    h6Box: 'h6';
    headBox: 'head';
    headerBox: 'header';
    hgroupBox: 'hgroup';
    hrBox: 'hr';
    htmlBox: 'html';
    iBox: 'i';
    iframeBox: 'iframe';
    imgBox: 'img';
    inputBox: 'input';
    insBox: 'ins';
    kbdBox: 'kbd';
    keygenBox: 'keygen';
    labelBox: 'label';
    legendBox: 'legend';
    liBox: 'li';
    linkBox: 'link';
    mainBox: 'main';
    mapBox: 'map';
    markBox: 'mark';
    menuBox: 'menu';
    menuitemBox: 'menuitem';
    metaBox: 'meta';
    meterBox: 'meter';
    navBox: 'nav';
    noindexBox: 'noindex';
    noscriptBox: 'noscript';
    objectBox: 'object';
    olBox: 'ol';
    optgroupBox: 'optgroup';
    optionBox: 'option';
    outputBox: 'output';
    pBox: 'p';
    paramBox: 'param';
    pictureBox: 'picture';
    preBox: 'pre';
    progressBox: 'progress';
    qBox: 'q';
    rpBox: 'rp';
    rtBox: 'rt';
    rubyBox: 'ruby';
    sBox: 's';
    sampBox: 'samp';
    slotBox: 'slot';
    scriptBox: 'script';
    sectionBox: 'section';
    selectBox: 'select';
    smallBox: 'small';
    sourceBox: 'source';
    spanBox: 'span';
    strongBox: 'strong';
    styleBox: 'style';
    subBox: 'sub';
    summaryBox: 'summary';
    supBox: 'sup';
    tableBox: 'table';
    templateBox: 'template';
    tbodyBox: 'tbody';
    tdBox: 'td';
    textareaBox: 'textarea';
    tfootBox: 'tfoot';
    thBox: 'th';
    theadBox: 'thead';
    timeBox: 'time';
    titleBox: 'title';
    trBox: 'tr';
    trackBox: 'track';
    uBox: 'u';
    ulBox: 'ul';
    varBox: 'var';
    videoBox: 'video';
    wbrBox: 'wbr';
    webviewBox: 'webview';
    svgBox: 'svg';
    animateBox: 'animate';
    animateMotionBox: 'animateMotion';
    animateTransformBox: 'animateTransform';
    circleBox: 'circle';
    clipPathBox: 'clipPath';
    defsBox: 'defs';
    descBox: 'desc';
    ellipseBox: 'ellipse';
    feBlendBox: 'feBlend';
    feColorMatrixBox: 'feColorMatrix';
    feComponentTransferBox: 'feComponentTransfer';
    feCompositeBox: 'feComposite';
    feConvolveMatrixBox: 'feConvolveMatrix';
    feDiffuseLightingBox: 'feDiffuseLighting';
    feDisplacementMapBox: 'feDisplacementMap';
    feDistantLightBox: 'feDistantLight';
    feDropShadowBox: 'feDropShadow';
    feFloodBox: 'feFlood';
    feFuncABox: 'feFuncA';
    feFuncBBox: 'feFuncB';
    feFuncGBox: 'feFuncG';
    feFuncRBox: 'feFuncR';
    feGaussianBlurBox: 'feGaussianBlur';
    feImageBox: 'feImage';
    feMergeBox: 'feMerge';
    feMergeNodeBox: 'feMergeNode';
    feMorphologyBox: 'feMorphology';
    feOffsetBox: 'feOffset';
    fePointLightBox: 'fePointLight';
    feSpecularLightingBox: 'feSpecularLighting';
    feSpotLightBox: 'feSpotLight';
    feTileBox: 'feTile';
    feTurbulenceBox: 'feTurbulence';
    filterBox: 'filter';
    foreignObjectBox: 'foreignObject';
    gBox: 'g';
    imageBox: 'image';
    lineBox: 'line';
    linearGradientBox: 'linearGradient';
    markerBox: 'marker';
    maskBox: 'mask';
    metadataBox: 'metadata';
    mpathBox: 'mpath';
    pathBox: 'path';
    patternBox: 'pattern';
    polygonBox: 'polygon';
    polylineBox: 'polyline';
    radialGradientBox: 'radialGradient';
    rectBox: 'rect';
    stopBox: 'stop';
    switchBox: 'switch';
    symbolBox: 'symbol';
    textBox: 'text';
    textPathBox: 'textPath';
    tspanBox: 'tspan';
    useBox: 'use';
    viewBox: 'view';
}

export { BoxElements, ColorModeContext, ColorModeProviderProps, createBox, createColorModeProvider, createColorStyles, createTransform, createUseGetter, getColorModeInitScriptElement, getColorModeInitScriptTag, useColorMode, useColorModeState, useColorModeTheme, useThemeBreakpoint, useThemeDown, useThemeScreens, useThemeUp, useViewportWidth };