/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-29d58ba | Cube Dev Team */
import { extractStyles } from "../../../tasty/utils/styles.js";
import { mergeStyles } from "../../../tasty/utils/merge-styles.js";
import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
import { tasty } from "../../../tasty/tasty.js";
import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
import { LayoutContextReset } from "./LayoutContext.js";
import { forwardRef, useMemo } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/content/Layout/LayoutContainer.tsx
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",
		border: {
			"": 0,
			"!:last-child": "($layout-border-size, 1bw) solid #border bottom"
		},
		Inner: {
			$: ">",
			placeSelf: "center",
			display: "flex",
			flow: "column",
			boxSizing: "border-box",
			width: "40x 100% 120x",
			flexGrow: 1,
			"$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 /* @__PURE__ */ jsx(ContainerElement, {
		ref,
		...filterBaseProps(otherProps, { eventProps: true }),
		styles: finalStyles,
		children: /* @__PURE__ */ jsx("div", {
			ref: combinedInnerRef,
			"data-element": "Inner",
			...innerProps,
			children: /* @__PURE__ */ jsx(LayoutContextReset, { children })
		})
	});
}
const _LayoutContainer = forwardRef(LayoutContainer);
_LayoutContainer.displayName = "Layout.Container";

//#endregion
export { _LayoutContainer };
//# sourceMappingURL=LayoutContainer.js.map