import { jsx, jsxs } from 'react/jsx-runtime';
import React__default from 'react';
import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import styles from './side-panel.module.css.js';
import { Flex } from '../flex/flex.js';
import { Text } from '../text/text.js';

const sidePanelRoot = cva(styles["side-panel"], {
    variants: {
        side: {
            left: styles["side-panel-left"],
            right: styles["side-panel-right"],
        },
    },
    defaultVariants: {
        side: "right",
    },
});
const SidePanelRoot = ({ children, side = "right", className, }) => {
    return (jsx("aside", { className: sidePanelRoot({ side, className }), children: children }));
};
const SidePanelHeader = ({ title, icon, actions = [], description, }) => {
    return (jsxs("div", { className: styles["side-panel-header"], children: [jsxs(Flex, { gap: 3, justify: "between", align: "center", children: [jsxs(Flex, { gap: 3, children: [icon, jsx(Text, { size: 5, weight: 500, children: title })] }), jsx(Flex, { gap: 3, children: actions?.map((action, index) => (jsx(React__default.Fragment, { children: action }, index))) })] }), description ? jsx(Text, { size: 2, children: description }) : null] }));
};
const SidePanelSection = ({ children }) => {
    return jsx("div", { className: styles["side-panel-section"], children: children });
};
const SidePanel = Object.assign(SidePanelRoot, {
    Header: SidePanelHeader,
    Section: SidePanelSection,
});

export { SidePanel };
//# sourceMappingURL=side-panel.js.map
