/**
 * Copied and adapted from @types/styled-system__css
 * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/028c46f833ffbbb0328a28ae6177923998fcf0cc/types/styled-system__css/index.d.ts
 */
import * as CSS from 'csstype';
declare type StandardCSSProperties = CSS.PropertiesFallback<number | string>;
/**
 * The `css` function accepts arrays as values for mobile-first responsive styles.
 * Note that this extends to non-theme values also. For example `display=['none', 'block']`
 * will also works.
 *
 * For more information see: https://styled-system.com/responsive-styles
 */
export declare type ResponsiveStyleValue<T> = T | Array<T | null>;
/**
 * All non-vendor-prefixed CSS properties. (Allow `number` to support CSS-in-JS libs,
 * since they are converted to pixels)
 */
export interface CSSProperties extends CSS.StandardProperties<number | string>, CSS.SvgProperties<number | string> {
}
/**
 * Map of all CSS pseudo selectors (`:hover`, `:focus`, ...)
 */
export declare type CSSPseudoSelectorProps = {
    [K in CSS.Pseudos]?: SystemStyleObject;
};
/**
 * CSS as POJO that is compatible with CSS-in-JS libaries.
 * Copied directly from [emotion](https://github.com/emotion-js/emotion/blob/ca3ad1c1dcabf78a95b55cc2dc94cad1998a3196/packages/serialize/types/index.d.ts#L45) types
 */
export interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudosForCSSObject, CSSOthersObjectForCSSObject {
}
declare type CSSPropertiesWithMultiValues = {
    [K in keyof CSSProperties]: CSSProperties[K];
};
declare type CSSPseudosForCSSObject = {
    [K in CSS.Pseudos]?: CSSObject;
};
declare type CSSInterpolation = undefined | number | string | CSSObject;
interface CSSOthersObjectForCSSObject {
    [propertiesName: string]: CSSInterpolation;
}
/**
 * Map all nested selectors
 */
interface CSSSelectorObject {
    [cssSelector: string]: SystemStyleObject;
}
interface AliasesCSSProperties {
    /**
     * The **`background-color`** CSS property sets the background color of an element.
     *
     * **Initial value**: `transparent`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/background-color
     */
    bg?: StandardCSSProperties['backgroundColor'];
    /**
     * The **`margin`** CSS property sets the margin area on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin
     */
    m?: StandardCSSProperties['margin'];
    /**
     * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
     */
    mt?: StandardCSSProperties['marginTop'];
    /**
     * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
     */
    mr?: StandardCSSProperties['marginRight'];
    /**
     * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
     */
    mb?: StandardCSSProperties['marginBottom'];
    /**
     * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
     */
    ml?: StandardCSSProperties['marginLeft'];
    /**
     * The **`mx`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value placesit
     * farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://styled-system.com/#margin-props
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
     */
    mx?: StandardCSSProperties['marginLeft'];
    /**
     * The **`marginX`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value
     * places it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://styled-system.com/#margin-props
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-left
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-right
     */
    marginX?: StandardCSSProperties['marginLeft'];
    /**
     * The **`my`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places it
     * farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://styled-system.com/#margin-props
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
     */
    my?: StandardCSSProperties['marginTop'];
    /**
     * The **`marginY`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places
     * it farther from its neighbors, while a negative value places it closer.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://styled-system.com/#margin-props
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-top
     * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom
     */
    marginY?: StandardCSSProperties['marginTop'];
    /**
     * The **`padding`** CSS property sets the padding area on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding
     */
    p?: StandardCSSProperties['padding'];
    /**
     * The **`padding-top`** padding area on the top of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
     */
    pt?: StandardCSSProperties['paddingTop'];
    /**
     * The **`padding-right`** CSS property sets the width of the padding area on the right side of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
     */
    pr?: StandardCSSProperties['paddingRight'];
    /**
     * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
     */
    pb?: StandardCSSProperties['paddingBottom'];
    /**
     * The **`padding-left`** CSS property sets the width of the padding area on the left side of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
     */
    pl?: StandardCSSProperties['paddingLeft'];
    /**
     * The **`px`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://styled-system.com/#padding-props
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
     */
    px?: StandardCSSProperties['paddingLeft'];
    /**
     * The **`paddingX`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://styled-system.com/#padding-props
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-left
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-right
     */
    paddingX?: StandardCSSProperties['paddingLeft'];
    /**
     * The **`py`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://styled-system.com/#padding-props
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
     */
    py?: StandardCSSProperties['paddingTop'];
    /**
     * The **`paddingY`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.
     *
     * **Initial value**: `0`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://styled-system.com/#padding-props
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-top
     * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom
     */
    paddingY?: StandardCSSProperties['paddingTop'];
}
interface OverwriteCSSProperties {
    /**
     * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the
     * element, blur and spread radii, and color.
     *
     * **Initial value**: `none`
     *
     * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
     * | :-----: | :-----: | :-----: | :----: | :---: |
     * | **10**  |  **4**  | **5.1** | **12** | **9** |
     * | 1 _-x-_ |         | 3 _-x-_ |        |       |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow
     */
    boxShadow?: CSS.BoxShadowProperty | number;
    /**
     * The **`font-weight`** CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the `font-family` you are using. Some fonts are only
     * available in `normal` and `bold`.
     *
     * **Initial value**: `normal`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **2**  |  **1**  | **1**  | **12** | **3** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/font-weight
     */
    fontWeight?: CSS.FontWeightProperty | string;
    /**
     * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
     *
     * **Initial value**: `none`
     *
     * | Chrome | Firefox | Safari |  Edge  |   IE    |
     * | :----: | :-----: | :----: | :----: | :-----: |
     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-top-style
     */
    borderTopStyle?: CSS.BorderTopStyleProperty | string;
    /**
     * The **`border-top-width`** CSS property sets the width of the top border of an element.
     *
     * **Initial value**: `medium`
     *
     * | Chrome | Firefox | Safari |  Edge  |  IE   |
     * | :----: | :-----: | :----: | :----: | :---: |
     * | **1**  |  **1**  | **1**  | **12** | **4** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-top-width
     */
    borderTopWidth?: CSS.BorderTopWidthProperty<never> | string;
    /**
     * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
     *
     * **Initial value**: `none`
     *
     * | Chrome | Firefox | Safari |  Edge  |   IE    |
     * | :----: | :-----: | :----: | :----: | :-----: |
     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-bottom-style
     */
    borderBottomStyle?: CSS.BorderBottomStyleProperty | string;
    /**
     * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
     *
     * **Initial value**: `none`
     *
     * | Chrome | Firefox | Safari |  Edge  |   IE    |
     * | :----: | :-----: | :----: | :----: | :-----: |
     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-right-style
     */
    borderRightStyle?: CSS.BorderRightStyleProperty | string;
    /**
     * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
     *
     * **Initial value**: `none`
     *
     * | Chrome | Firefox | Safari |  Edge  |   IE    |
     * | :----: | :-----: | :----: | :----: | :-----: |
     * | **1**  |  **1**  | **1**  | **12** | **5.5** |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-left-style
     */
    borderLeftStyle?: CSS.BorderLeftStyleProperty | string;
    /**
     * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
     *
     * | Chrome  | Firefox | Safari  |  Edge  |  IE   |
     * | :-----: | :-----: | :-----: | :----: | :---: |
     * |  **4**  |  **4**  |  **5**  | **12** | **9** |
     * | 1 _-x-_ |         | 3 _-x-_ |        |       |
     *
     * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
     */
    borderRadius?: CSS.BorderRadiusProperty<string | number>;
}
/**
 * Map of all available CSS properties (including aliases) and their raw value.
 * Only used internally to map CCS properties to input types (responsive value,
 * theme function or nested) in `SystemCssProperties`.
 */
interface AllSystemCSSProperties extends Omit<CSSProperties, keyof OverwriteCSSProperties>, AliasesCSSProperties, OverwriteCSSProperties {
}
export declare type SystemCssProperties = {
    [K in keyof AllSystemCSSProperties]: ResponsiveStyleValue<AllSystemCSSProperties[K]> | ((theme: any) => ResponsiveStyleValue<AllSystemCSSProperties[K]>) | SystemStyleObject;
};
interface VariantProperty {
    /**
     * **`Variants`** can be useful for applying complex styles to a component based on a single prop.
     *
     * @example
     * const theme = {
     *   buttons: {
     *     primary: {
     *       p: 3,
     *       fontWeight: 'bold',
     *       color: 'white',
     *       bg: 'primary',
     *       borderRadius: 2,
     *     },
     *   },
     * }
     * const result = css({
     *   variant: 'buttons.primary',
     * })(theme)
     *
     * @see https://styled-system.com/variants
     */
    variant: string;
}
export interface UseThemeFunction {
    (theme: any): Exclude<SystemStyleObject, UseThemeFunction>;
}
/**
 * The `SystemStyleObject` extends [style props](https://emotion.sh/docs/object-styles)
 * such that properties that are part of the `Theme` will be transformed to
 * their corresponding values. Other valid CSS properties are also allowed.
 */
export declare type SystemStyleObject = SystemCssProperties | CSSPseudoSelectorProps | CSSSelectorObject | VariantProperty | UseThemeFunction;
declare type ObjectOrArray<T> = T[] | {
    [K: string]: T | ObjectOrArray<T>;
};
export declare type TLengthStyledSystem = string | 0 | number;
/**
 * To use Theme UI color modes, color scales should include at least a text
 * and background color. These values are used in the ColorMode component to
 * set body foreground and background colors. Color modes should be defined as
 * nested objects within a theme.colors.modes object. Each key in this object
 * should correspond to a color mode name, where the name can be anything, but
 * typically light and dark are used for applications with a dark mode. The
 * initialColorModeName key is required to enable color modes and will be used as
 * the name for the root color palette.
 */
export declare type ColorMode = {
    [k: string]: CSS.ColorProperty | ObjectOrArray<CSS.ColorProperty>;
} & {
    /**
     * Body background color
     */
    background: CSS.ColorProperty;
    /**
     * Body foreground color
     */
    text: CSS.ColorProperty;
    /**
     * Primary brand color for links, buttons, etc.
     */
    primary?: CSS.ColorProperty;
    /**
     * A secondary brand color for alternative styling
     */
    secondary?: CSS.ColorProperty;
    /**
     * A faint color for backgrounds, borders, and accents that do not require
     * high contrast with the background color
     */
    muted?: CSS.ColorProperty;
    /**
     * A contrast color for emphasizing UI
     */
    accent?: CSS.ColorProperty;
};
export interface Theme {
    breakpoints?: Array<string>;
    mediaQueries?: {
        [size: string]: string;
    };
    space?: ObjectOrArray<CSS.MarginProperty<number | string>>;
    fontSizes?: ObjectOrArray<CSS.FontSizeProperty<number>>;
    fonts?: ObjectOrArray<CSS.FontFamilyProperty>;
    fontWeights?: ObjectOrArray<CSS.FontWeightProperty>;
    lineHeights?: ObjectOrArray<CSS.LineHeightProperty<TLengthStyledSystem>>;
    letterSpacings?: ObjectOrArray<CSS.LetterSpacingProperty<TLengthStyledSystem>>;
    sizes?: ObjectOrArray<CSS.HeightProperty<{}> | CSS.WidthProperty<{}>>;
    borders?: ObjectOrArray<CSS.BorderProperty<{}>>;
    borderStyles?: ObjectOrArray<CSS.BorderProperty<{}>>;
    borderWidths?: ObjectOrArray<CSS.BorderWidthProperty<TLengthStyledSystem>>;
    radii?: ObjectOrArray<CSS.BorderRadiusProperty<TLengthStyledSystem>>;
    shadows?: ObjectOrArray<CSS.BoxShadowProperty>;
    zIndices?: ObjectOrArray<CSS.ZIndexProperty>;
    buttons?: ObjectOrArray<SystemCssProperties>;
    colorStyles?: ObjectOrArray<SystemCssProperties>;
    textStyles?: ObjectOrArray<SystemCssProperties>;
    text?: ObjectOrArray<SystemCssProperties>;
    /**
     * Enable/disable custom CSS properties/variables if lower browser
     * support is required (for eg. IE 11).
     *
     * References: https://theme-ui.com/color-modes/#turn-off-custom-properties
     */
    useCustomProperties?: boolean;
    /**
     * Provide a value here to enable color modes
     */
    initialColorModeName?: string;
    /**
     * Adds styles defined in theme.styles.root to the <body> element along with color and background-color
     */
    useBodyStyles?: boolean;
    /**
     * Initializes the color mode based on the prefers-color-scheme media query
     */
    useColorSchemeMediaQuery?: boolean;
    /**
     * Adds a global box-sizing: border-box style
     */
    useBoxSizing?: boolean;
    /**
     * Define the colors that are available through this theme
     */
    colors?: ColorMode & {
        /**
         * Nested color modes can provide overrides when used in conjunction with
         * `Theme.initialColorModeName and `useColorMode()`
         */
        modes?: {
            [k: string]: ColorMode;
        };
    };
    /**
     * Styles for elements rendered in MDX can be added to the theme.styles
     * object. This is the primary, low-level way to control typographic and
     * other styles in markdown content. Styles within this object are processed
     * with @styled-system/css and have access to base theme values like colors,
     * fonts, etc.
     */
    styles?: {
        [P in StyledTags]?: SystemStyleObject;
    };
}
declare type StyledTags = 'tr' | 'th' | 'td' | 'em' | 'strong' | 'div' | 'p' | 'b' | 'i' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'img' | 'pre' | 'code' | 'ol' | 'ul' | 'li' | 'blockquote' | 'hr' | 'table' | 'delete' | 'inlineCode' | 'thematicBreak' | 'root';
export {};