import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Box, Container, Flex, Text } from "@chakra-ui/react";
const FlexComponent = ({ children, properties }) => {
    return (_jsx(Container, Object.assign({ maxW: "container.lg", p: properties.padding === "0" ? "0" : undefined }, { children: _jsxs(Flex, Object.assign({ py: properties.padding, gap: properties.gap, flex: "1", w: "full", alignItems: properties.align, flexWrap: "wrap" }, { children: [_jsx(Box, Object.assign({ width: "100%" }, { children: children })), children[0] === undefined && (_jsx(Flex, Object.assign({ border: "2px dashed", h: "100px", rounded: "lg", shadow: "xs", flex: "1", p: "4", borderColor: "gray.400", justifyContent: "center", alignItems: "center" }, { children: _jsx(Text, Object.assign({ fontSize: "xs", color: "gray.400" }, { children: "Drop a Container" })) })))] })) })));
};
export default FlexComponent;
//# sourceMappingURL=Flex.js.map