/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-c7e2378
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Block, Button, Card, Space, Flex as UIKitFlex, Flow as UIKitFlow, Grid as UIKitGrid, } from '../index.js';
export default {
    title: 'Content/SimpleLayout',
};
export const Flow = {
    render: () => (_jsxs(UIKitFlow, { gap: true, children: [_jsx(Card, { children: "Card 1" }), _jsx(Card, { children: "Card 2" }), _jsx(Card, { children: "Card 3" })] })),
};
export const Flex = {
    render: () => (_jsxs(UIKitFlow, { gap: true, children: [_jsxs(Space, { flow: "row", children: [_jsx(Block, { children: "horizontal space" }), _jsx(Button, { children: "One" }), _jsx(Button, { children: "Two" })] }), _jsxs(Space, { flow: "column", children: [_jsx(Block, { children: "vertical space" }), _jsx(Button, { children: "One" }), _jsx(Button, { children: "Two" })] })] })),
};
export const FlexCustom = {
    render: () => (_jsxs(UIKitFlex, { flow: "row", gap: "4x", placeContent: "space-between", placeItems: "center", children: [_jsx(Button, { children: "One" }), _jsx(Button, { children: "Two" }), _jsx(Button, { children: "Three" }), _jsx(Button, { children: "Four" })] })),
};
export const Grid = {
    render: () => (_jsxs(UIKitGrid, { gridColumns: "200px 1fr", gridRows: "60px 1fr", height: "500px", gap: "1x", children: [_jsx(Card, { gridColumn: "1 / -1", children: "Header" }), _jsx(Card, { children: "Sidebar" }), _jsx(Card, { children: "Content" })] })),
};

        