"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { SpringMotionConfig } from "./SpringMotionConfig.js";
import { useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";
import { m } from "motion/react";

//#region src/components/client/AnimateHeightChange.tsx
const AnimateHeightChange = ({ children, reduceMotion, layoutVariant }) => {
	const ref = useRef(null);
	const [height, setHeight] = useState("auto");
	useEffect(() => {
		if (ref.current) {
			const observer = new ResizeObserver((entries) => {
				setHeight(entries[0].contentRect.height);
			});
			observer.observe(ref.current);
			return () => {
				observer.disconnect();
			};
		}
	}, []);
	return /* @__PURE__ */ jsx(SpringMotionConfig, {
		reducedMotion: reduceMotion,
		layoutSpeed: "4",
		layoutVariant,
		children: /* @__PURE__ */ jsx(m.div, {
			className: "overflow-hidden",
			style: {
				height,
				opacity: 0
			},
			animate: {
				height,
				opacity: 1
			},
			children: /* @__PURE__ */ jsx("div", {
				ref,
				children
			})
		})
	});
};
AnimateHeightChange.displayName = "AnimateHeightChange";

//#endregion
export { AnimateHeightChange };