import { Responsive } from './util';

declare const flexGrowValues: readonly [{
    readonly key: "0";
    readonly value: "0";
}, {
    readonly key: "1";
    readonly value: "1";
}];
declare const flexShrinkValues: readonly [{
    readonly key: "0";
    readonly value: "0";
}, {
    readonly key: "1";
    readonly value: "1";
}];
declare const flexBasisValues: readonly [{
    readonly key: "0";
    readonly value: "var(--teddy-spacing-0)";
}, {
    readonly key: "10";
    readonly value: "var(--teddy-spacing-10)";
}, {
    readonly key: "25";
    readonly value: "var(--teddy-spacing-25)";
}, {
    readonly key: "50";
    readonly value: "var(--teddy-spacing-50)";
}, {
    readonly key: "100";
    readonly value: "var(--teddy-spacing-100)";
}, {
    readonly key: "150";
    readonly value: "var(--teddy-spacing-150)";
}, {
    readonly key: "200";
    readonly value: "var(--teddy-spacing-200)";
}, {
    readonly key: "250";
    readonly value: "var(--teddy-spacing-250)";
}, {
    readonly key: "300";
    readonly value: "var(--teddy-spacing-300)";
}, {
    readonly key: "400";
    readonly value: "var(--teddy-spacing-400)";
}, {
    readonly key: "600";
    readonly value: "var(--teddy-spacing-600)";
}, {
    readonly key: "800";
    readonly value: "var(--teddy-spacing-800)";
}, {
    readonly key: "1000";
    readonly value: "var(--teddy-spacing-1000)";
}, {
    readonly key: "1200";
    readonly value: "var(--teddy-spacing-1200)";
}, {
    readonly key: "1600";
    readonly value: "var(--teddy-spacing-1600)";
}, {
    readonly key: "gutter-sm";
    readonly value: "var(--teddy-spacing-gutter-sm)";
}, {
    readonly key: "gutter-md";
    readonly value: "var(--teddy-spacing-gutter-md)";
}, {
    readonly key: "gutter-lg";
    readonly value: "var(--teddy-spacing-gutter-lg)";
}, {
    readonly key: "gutter-xl";
    readonly value: "var(--teddy-spacing-gutter-xl)";
}, {
    readonly key: "page-padding-sm";
    readonly value: "var(--teddy-spacing-page-padding-sm)";
}, {
    readonly key: "page-padding-md";
    readonly value: "var(--teddy-spacing-page-padding-md)";
}, {
    readonly key: "page-padding-lg";
    readonly value: "var(--teddy-spacing-page-padding-lg)";
}, {
    readonly key: "page-padding-xl";
    readonly value: "var(--teddy-spacing-page-padding-xl)";
}, {
    readonly key: "auto";
    readonly value: "auto";
}, {
    readonly key: "full";
    readonly value: "100%";
}, {
    readonly key: "1/2";
    readonly value: "50%";
}];
declare const flexDirectionValues: readonly [{
    readonly key: "row";
    readonly value: "row";
}, {
    readonly key: "row-reverse";
    readonly value: "row-reverse";
}, {
    readonly key: "column";
    readonly value: "column";
}, {
    readonly key: "column-reverse";
    readonly value: "column-reverse";
}];
export declare const displayFlexValues: readonly [{
    readonly key: "none";
    readonly value: "none";
}, {
    readonly key: "inline-flex";
    readonly value: "inline-flex";
}, {
    readonly key: "flex";
    readonly value: "flex";
}];
declare const flexWrapValues: readonly [{
    readonly key: "nowrap";
    readonly value: "nowrap";
}, {
    readonly key: "wrap";
    readonly value: "wrap";
}, {
    readonly key: "wrap-reverse";
    readonly value: "wrap-reverse";
}];
export declare const flexLayout: readonly [{
    readonly key: "display";
    readonly className: "teddy-display";
    readonly values: readonly [{
        readonly key: "none";
        readonly value: "none";
    }, {
        readonly key: "inline-flex";
        readonly value: "inline-flex";
    }, {
        readonly key: "flex";
        readonly value: "flex";
    }];
}, {
    readonly key: "wrap";
    readonly className: "teddy-fw";
    readonly values: readonly [{
        readonly key: "nowrap";
        readonly value: "nowrap";
    }, {
        readonly key: "wrap";
        readonly value: "wrap";
    }, {
        readonly key: "wrap-reverse";
        readonly value: "wrap-reverse";
    }];
}, {
    readonly key: "direction";
    readonly className: "teddy-fd";
    readonly values: readonly [{
        readonly key: "row";
        readonly value: "row";
    }, {
        readonly key: "row-reverse";
        readonly value: "row-reverse";
    }, {
        readonly key: "column";
        readonly value: "column";
    }, {
        readonly key: "column-reverse";
        readonly value: "column-reverse";
    }];
}];
export declare const flexChildren: readonly [{
    readonly key: "flexGrow";
    readonly className: "teddy-fg";
    readonly values: readonly [{
        readonly key: "0";
        readonly value: "0";
    }, {
        readonly key: "1";
        readonly value: "1";
    }];
}, {
    readonly key: "flexShrink";
    readonly className: "teddy-fs";
    readonly values: readonly [{
        readonly key: "0";
        readonly value: "0";
    }, {
        readonly key: "1";
        readonly value: "1";
    }];
}, {
    readonly key: "flexBasis";
    readonly className: "teddy-fb";
    readonly values: readonly [{
        readonly key: "0";
        readonly value: "var(--teddy-spacing-0)";
    }, {
        readonly key: "10";
        readonly value: "var(--teddy-spacing-10)";
    }, {
        readonly key: "25";
        readonly value: "var(--teddy-spacing-25)";
    }, {
        readonly key: "50";
        readonly value: "var(--teddy-spacing-50)";
    }, {
        readonly key: "100";
        readonly value: "var(--teddy-spacing-100)";
    }, {
        readonly key: "150";
        readonly value: "var(--teddy-spacing-150)";
    }, {
        readonly key: "200";
        readonly value: "var(--teddy-spacing-200)";
    }, {
        readonly key: "250";
        readonly value: "var(--teddy-spacing-250)";
    }, {
        readonly key: "300";
        readonly value: "var(--teddy-spacing-300)";
    }, {
        readonly key: "400";
        readonly value: "var(--teddy-spacing-400)";
    }, {
        readonly key: "600";
        readonly value: "var(--teddy-spacing-600)";
    }, {
        readonly key: "800";
        readonly value: "var(--teddy-spacing-800)";
    }, {
        readonly key: "1000";
        readonly value: "var(--teddy-spacing-1000)";
    }, {
        readonly key: "1200";
        readonly value: "var(--teddy-spacing-1200)";
    }, {
        readonly key: "1600";
        readonly value: "var(--teddy-spacing-1600)";
    }, {
        readonly key: "gutter-sm";
        readonly value: "var(--teddy-spacing-gutter-sm)";
    }, {
        readonly key: "gutter-md";
        readonly value: "var(--teddy-spacing-gutter-md)";
    }, {
        readonly key: "gutter-lg";
        readonly value: "var(--teddy-spacing-gutter-lg)";
    }, {
        readonly key: "gutter-xl";
        readonly value: "var(--teddy-spacing-gutter-xl)";
    }, {
        readonly key: "page-padding-sm";
        readonly value: "var(--teddy-spacing-page-padding-sm)";
    }, {
        readonly key: "page-padding-md";
        readonly value: "var(--teddy-spacing-page-padding-md)";
    }, {
        readonly key: "page-padding-lg";
        readonly value: "var(--teddy-spacing-page-padding-lg)";
    }, {
        readonly key: "page-padding-xl";
        readonly value: "var(--teddy-spacing-page-padding-xl)";
    }, {
        readonly key: "auto";
        readonly value: "auto";
    }, {
        readonly key: "full";
        readonly value: "100%";
    }, {
        readonly key: "1/2";
        readonly value: "50%";
    }];
}];
export type FlexLayout = {
    /**
     * The display of the flex. It can be 'none', 'inline-flex', 'flex' or a responsive value.
     * @default 'flex'
     */
    display?: Responsive<(typeof displayFlexValues)[number]['key']>;
    direction?: Responsive<(typeof flexDirectionValues)[number]['key']>;
    wrap?: Responsive<(typeof flexWrapValues)[number]['key']>;
};
export type FlexChildren = {
    flexBasis?: Responsive<(typeof flexBasisValues)[number]['key']>;
    flexGrow?: Responsive<(typeof flexGrowValues)[number]['key']>;
    flexShrink?: Responsive<(typeof flexShrinkValues)[number]['key']>;
};
export {};
/**
 * The direction of the flex items. It can be 'row', 'column', 'row-reverse', 'column-reverse' or a responsive value.
 * A responsive value is an object with the keys 'sm', 'md', 'lg', 'xl' and a value for the corresponding breakpoint.
 * @example direction={{ sm: 'row', md: 'column' }}
 */