/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.108.1
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo } from 'react';
import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, DIMENSION_STYLES, OUTER_STYLES, tasty, } from '../../tasty/index.js';
const PanelElement = tasty({
    as: 'section',
    qa: 'Panel',
    styles: {
        position: {
            '': 'relative',
            'stretched | floating': 'absolute',
        },
        inset: {
            '': 'initial',
            stretched: true,
        },
        display: 'block',
        radius: {
            '': '0',
            card: '1r',
        },
        border: {
            '': '0',
            card: '1bw',
        },
        flexGrow: 1,
        placeSelf: 'stretch',
    },
});
const PanelInnerElement = tasty({
    styles: {
        position: 'absolute',
        display: {
            '': 'grid',
            flex: 'flex',
        },
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        overflow: 'auto',
        scrollbar: 'thin #dark.2',
        gridColumns: 'minmax(100%, 100%)',
        gridRows: {
            '': 'initial',
            stretched: 'minmax(0, 1fr)',
        },
        radius: {
            '': '0',
            card: '(1r - 1bw)',
        },
        flow: 'row',
        placeContent: 'start stretch',
    },
    styleProps: [...OUTER_STYLES, ...BASE_STYLES, ...COLOR_STYLES],
});
const STYLES = [
    'placeContent',
    'placeItems',
    'gridColumns',
    'gridRows',
    'flow',
    'gap',
    'padding',
    'overflow',
    'fill',
    'color',
    'preset',
];
function Panel(props, ref) {
    let { qa, mods, isStretched, isFloating, isCard, isFlex, styles, innerStyles, children, extra, style, ...otherProps } = props;
    STYLES.forEach((style) => {
        if (props[style]) {
            innerStyles = { ...innerStyles, [style]: props[style] };
            delete otherProps[style];
        }
    });
    [
        ...OUTER_STYLES,
        ...BASE_STYLES,
        ...BLOCK_STYLES,
        ...COLOR_STYLES,
        ...DIMENSION_STYLES,
    ].forEach((style) => {
        if (style in otherProps) {
            styles = { ...styles, [style]: otherProps[style] };
            delete otherProps[style];
        }
    });
    const appliedMods = useMemo(() => ({
        floating: isFloating,
        stretched: isStretched,
        card: isCard,
        flex: isFlex,
        ...mods,
    }), [isStretched, isCard, mods]);
    return (_jsxs(PanelElement, { ref: ref, qa: qa, mods: appliedMods, styles: styles, style: style, ...otherProps, children: [_jsx(PanelInnerElement, { mods: appliedMods, styles: innerStyles, children: children }), extra] }));
}
const _Panel = forwardRef(Panel);
_Panel.displayName = 'Panel';
export { _Panel as Panel };

        