import React from 'react';
import { MarginTypes } from "../../Style/Margin";
import { PaddingTypes } from "../../Style/Padding";
export type StyledProps = {
    /**
     * The id of the textfield.
     * @defaultValue ""
     * @optional
     * @type string
     */
    id?: React.HTMLAttributes<HTMLDivElement>['id'];
    /**
     * children of guide box
     */
    children?: React.ReactNode;
    /**
     * tag of guide box
     */
    tag?: string;
    /**
     * show guide box backgroundColor
     */
    show?: boolean;
    /**
     * width of block
     *
     * @default auto
     */
    width?: number | string;
    /**
     * height of block
     *
     * @default auto
     */
    height?: number | string;
    /**
     * background color of guide box
     *
     * @default rgba(240, 240, 240, 0.5)
     */
    fill?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | string;
    /**
     * guide box item direction 'column' (super option)
     */
    column?: boolean;
    /**
     * guide box item direction 'row' (super option)
     */
    row?: boolean;
    /**
     * guide box item direction 'row-reverse' (super option)
     */
    rowReverse?: boolean;
    /**
     * guide box item direction 'column-reverse' (super option)
     */
    columnReverse?: boolean;
    /**
   * guide box item spacing, if not set, use padding value
   */
    spacing?: number;
    /**
     * guide box item center force option (super option)
     */
    center?: boolean;
    horLeft?: boolean;
    /**
     * guide box item align horizontal option 'center' (super option)
     */
    horCenter?: boolean;
    /**
     * guide box item align horizontal option 'right' (super option)
     */
    horRight?: boolean;
    /**
     * guide box item align horizontal option 'space-between' (super option)
     */
    horSpaceBetween?: boolean;
    /**
     * guide box item align veritcal option 'top' (super option)
     */
    verTop?: boolean;
    /**
     * guide box item align veritcal option 'center' (super option)
     */
    verCenter?: boolean;
    /**
     * guide box item align veritcal option 'bottom' (super option)
     */
    verBottom?: boolean;
    /**
     * guide box item align veritcal option 'space-between' (super option)
     */
    verSpaceBetween?: boolean;
    /**
     * guide box opacity option
     */
    opacity?: number;
    /**
     * animation duration (seconds)
     */
    duration?: number;
    /**
     * animation style (pulse)
     */
    pulse?: boolean;
    /**
     * loading option
     */
    loading?: boolean;
    /**
     * overflow option
     *
     * @default visible
     */
    overflow?: 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto';
    /**
     * border radius
     */
    borderRadius?: number | string;
    /**
     * border option
     *
     * @example
     * border="1px solid #000"
     */
    border?: string;
    /**
     * Set a flex grow
     *
     * @example
     * <GuideBox show width="100%" height="100vh">
     * 	<GuideBox show width={150} height={150} />
     * 	<GuideBox show flexGrow={1} height={150} />
     * </GuideBox>
     */
    flexGrow?: number;
    /**
     * onKeyDown Event
     *
     * @example
     * <GuideBox onKeyDown={(e) =>
     * 	if (e.ctrlKey && e.key === 'a) {
     * 		console.log('ctrl + a');
     * 	}
     * } />
     */
    onKeyDown?: (e: React.KeyboardEvent) => void;
} & MarginTypes & PaddingTypes;
export declare const fillColor: (show: StyledProps['show'], fill: StyledProps['fill']) => string;
declare const ThemedComponent: (props: StyledProps) => import("react/jsx-runtime").JSX.Element;
export default ThemedComponent;
//# sourceMappingURL=Styled.d.ts.map