import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Grid, GridItem, HStack, Icon, Text, Tooltip } from "@chakra-ui/react";
import { Information } from "@feedloop/icon";
export const ComponentPropertyEditorContainer = ({ title, description, children, titleSpan, propertySpan }) => {
    return (_jsxs(Grid, Object.assign({ templateColumns: "repeat(12, 1fr)", py: "10px", gap: 2 }, { children: [_jsx(GridItem, Object.assign({ colSpan: titleSpan || 3, maxW: "full", display: "flex" }, { children: _jsxs(HStack, Object.assign({ alignItems: "center" }, { children: [_jsx(Text, Object.assign({ color: "#6F809A", textTransform: "capitalize" }, { children: title })), !!description && (_jsx(Tooltip, Object.assign({ hasArrow: true, label: description }, { children: _jsx("span", { children: _jsx(Icon, { as: Information, color: "#6F809A", fontSize: "md" }) }) })))] })) })), _jsx(GridItem, Object.assign({ colSpan: propertySpan || 9, maxW: "full", alignItems: "center", justifyContent: "flex-end" }, { children: children }))] })));
};
//# sourceMappingURL=ComponentPropertyEditorContainer.js.map