import { jsx } from 'react/jsx-runtime';
import React__default, { useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { separatorTheme } from './Separator.theme.js';

const Separator = React__default.forwardRef(({ vertical = false, margin = 'md', className, theme: customTheme = {}, ...props }, ref) => {
    const theme = useMemo(() => {
        var _a, _b;
        return ({
            ...separatorTheme,
            ...customTheme,
            margins: {
                horizontal: {
                    ...separatorTheme.margins.horizontal,
                    ...(_a = customTheme.margins) === null || _a === void 0 ? void 0 : _a.horizontal,
                },
                vertical: {
                    ...separatorTheme.margins.vertical,
                    ...(_b = customTheme.margins) === null || _b === void 0 ? void 0 : _b.vertical,
                },
            },
        });
    }, [customTheme]);
    const marginStyle = vertical
        ? theme.margins.vertical[margin] || ''
        : theme.margins.horizontal[margin] || '';
    const orientationStyle = vertical ? theme.vertical : theme.horizontal;
    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, orientationStyle, marginStyle, className), role: "separator", "aria-orientation": vertical ? 'vertical' : 'horizontal', ...props }));
});
Separator.displayName = 'Separator';

export { Separator };
