import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { registerComponent } from "../interfaces";
import FlexComponent from "../components/Flex";
const Flex = registerComponent("Flex", {
    type: "none",
    icon: "Flex",
    group: "layout",
    kind: "layout",
    hidden: true,
    experimental: true,
    defaultProps: {
        padding: "2",
        gap: "2",
        align: "stretch",
    },
    propDefinition: {
        padding: {
            group: "Design",
            type: "string",
            options: {
                format: "select",
                options: [
                    { label: "Extra Large", value: "16" },
                    { label: "Large", value: "8" },
                    { label: "Medium", value: "4" },
                    { label: "Small", value: "2" },
                    { label: "Extra Small", value: "1" },
                    { label: "None", value: "0" },
                ],
            },
        },
        gap: {
            group: "Design",
            type: "string",
            options: {
                format: "select",
                options: [
                    { label: "Large", value: "6" },
                    { label: "Medium", value: "4" },
                    { label: "Small", value: "2" },
                    { label: "None", value: "0" },
                ],
            },
        },
        align: {
            group: "Design",
            type: "string",
            options: {
                format: "select",
                options: [
                    { label: "Stretch", value: "stretch" },
                    { label: "Start", value: "start" },
                    { label: "Center", value: "center" },
                    { label: "End", value: "end" },
                ],
            },
        },
    },
    Component: (props) => _jsx(FlexComponent, Object.assign({}, props)),
});
export default Flex;
//# sourceMappingURL=buildFlex.js.map