import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { ChevronDownIcon } from "@chakra-ui/icons";
import { useDisclosure, VStack, HStack, Box, Icon, Collapse, Text, } from "@chakra-ui/react";
export default function PropsGroup(props) {
    const collapseDisclosure = useDisclosure({ defaultIsOpen: true });
    return (_jsxs(VStack, Object.assign({ width: "full", px: "16px", borderBottom: "1px", style: props.style, borderColor: "gray.300" }, { children: [_jsxs(HStack, Object.assign({ width: "full", py: 3 }, { children: [_jsx(Text, Object.assign({ fontWeight: "semibold" }, { children: props.name })), _jsx(Box, { flex: 1 }), _jsx(Icon, { boxSize: 5, as: ChevronDownIcon, cursor: "pointer", transition: "all 300ms ease-out", transform: `rotate(${collapseDisclosure.isOpen ? 0 : -90}deg)`, onClick: collapseDisclosure.onToggle })] })), _jsx(Box, Object.assign({ width: "full", m: "0 !important" }, { children: _jsx(Collapse, Object.assign({ style: { overflow: "revert" }, in: collapseDisclosure.isOpen }, { children: props.children })) }))] })));
}
//# sourceMappingURL=PropsGroup.js.map