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

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useMemo, } from 'react';
import { CONTAINER_STYLES, extractStyles, filterBaseProps, mergeStyles, tasty, } from '../../../tasty/index.js';
import { useCombinedRefs } from '../../../utils/react/index.js';
import { LayoutContextReset } from './LayoutContext.js';
const ContainerElement = tasty({
    as: 'div',
    qa: 'LayoutContainer',
    styles: {
        display: 'flex',
        flow: 'column',
        flexGrow: 1,
        flexShrink: 1,
        placeItems: 'center start',
        placeContent: 'stretch',
        overflow: 'auto',
        scrollbar: 'thin',
        padding: '$content-padding',
        placeSelf: 'stretch',
        width: '100%',
        border: {
            '': 0,
            '!:last-child': '($layout-border-size, 1bw) solid #border bottom',
        },
        Inner: {
            $: '>',
            placeSelf: 'center',
            display: 'flex',
            flow: 'column',
            width: '40x 100% 120x',
            boxSizing: 'border-box',
            '$layout-border-size': '0',
        },
    },
});
function LayoutContainer(props, ref) {
    const { children, styles, innerStyles: innerStylesProp, innerRef: innerRefProp, innerProps, ...otherProps } = props;
    const innerStyles = extractStyles(otherProps, CONTAINER_STYLES, innerStylesProp);
    const hasInnerStyles = Object.keys(innerStyles).length > 0;
    const finalStyles = useMemo(() => {
        return mergeStyles(styles, hasInnerStyles ? { Inner: innerStyles } : null);
    }, [styles, hasInnerStyles, innerStyles]);
    const combinedInnerRef = useCombinedRefs(innerRefProp);
    return (_jsx(ContainerElement, { ref: ref, ...filterBaseProps(otherProps, { eventProps: true }), styles: finalStyles, children: _jsx("div", { ref: combinedInnerRef, "data-element": "Inner", ...innerProps, children: _jsx(LayoutContextReset, { children: children }) }) }));
}
const _LayoutContainer = forwardRef(LayoutContainer);
_LayoutContainer.displayName = 'Layout.Container';
export { _LayoutContainer as LayoutContainer };

        