/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-f1f3d22 | Cube Dev Team */
import { extractStyles, parseStyle } from "../../tasty/utils/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 { useLayoutEffect as useLayoutEffect$1 } from "../../utils/react/useLayoutEffect.js";
import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/layout/Prefix.tsx
const PrefixElement = tasty({
	element: "Prefix",
	styles: {
		position: "absolute",
		display: "grid",
		placeContent: "stretch",
		placeItems: "center",
		flow: "column",
		gap: 0,
		left: "$prefix-gap",
		top: "$prefix-gap",
		bottom: "$prefix-gap",
		color: "#dark-02",
		height: "(100% - (2 * $prefix-gap))"
	}
});
const Prefix = forwardRef(function Prefix(allProps, outerRef) {
	let { onWidthChange, outerGap = "1bw", children, ...props } = allProps;
	const styles = extractStyles(props, CONTAINER_STYLES);
	const ref = useCombinedRefs(outerRef);
	useLayoutEffect$1(() => {
		if (ref?.current && onWidthChange) onWidthChange(ref.current.offsetWidth);
	}, [
		children,
		ref,
		onWidthChange
	]);
	return /* @__PURE__ */ jsx(PrefixElement, {
		...filterBaseProps(props, { eventProps: true }),
		ref,
		styles,
		style: { "--prefix-gap": parseStyle(outerGap).output },
		children
	});
});

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