@patterninc/pattern-ui 0.0.0-main.202610210459.504fff4cf4d3 → 0.0.0-main.202610210503.8535dfd740a5

package/dist/ai-elements/reasoning-stepped/reasoning-stepped.js

@@ -5,28 +5,46 @@ import { cn } from "cn";
 
 //#region src/ai-elements/reasoning-stepped/reasoning-stepped.tsx
 function ReasoningStepped(t0) {
-	const $ = c(6);
+	const $ = c(9);
 	const { className, children, qaTestId: t1 } = t0;
 	const qaTestId = t1 === void 0 ? "reasoning-stepped" : t1;
 	let t2;
 	if ($[0] !== className) {
-		t2 = cn("flex flex-col", className);
+		t2 = cn("relative", className);
 		$[0] = className;
 		$[1] = t2;
 	} else t2 = $[1];
 	let t3;
-	if ($[2] !== children || $[3] !== qaTestId || $[4] !== t2) {
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: "absolute top-3.5 bottom-0 left-3 w-[1.5px] -translate-x-1/2 rounded-full bg-border-soft",
+			"data-slot": "reasoning-spine"
+		});
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== children) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			className: "relative flex flex-col gap-2",
+			children
+		});
+		$[3] = children;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== qaTestId || $[6] !== t2 || $[7] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
 			className: t2,
 			"qa-test-id": qaTestId,
-			children
+			children: [t3, t4]
 		});
-		$[2] = children;
-		$[3] = qaTestId;
-		$[4] = t2;
-		$[5] = t3;
-	} else t3 = $[5];
-	return t3;
+		$[5] = qaTestId;
+		$[6] = t2;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
 }
 function ReasoningStep(t0) {
 	const $ = c(15);
@@ -50,7 +68,7 @@ function ReasoningStep(t0) {
 		t5 = /* @__PURE__ */ jsx(ReasoningTrigger, {
 			status,
 			headerText,
-			className: "py-1"
+			className: "w-full bg-base-inverse py-1"
 		});
 		$[4] = headerText;
 		$[5] = status;

package/dist/ai-elements/thinking/thinking.js

@@ -7,6 +7,7 @@ import { useToggle } from "../../hooks/useToggle/useToggle.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useState } from "react";
+import { useLingui } from "@lingui/react";
 import { cn } from "cn";
 import { motion } from "motion/react";
 
@@ -79,110 +80,133 @@ function Thinking(t0) {
 }
 /** ThinkingTrigger — Clickable trigger that shows the PI logo and timing text. */
 function ThinkingTrigger(t0) {
-	const $ = c(24);
-	const { className, headerText: t1, isThinking: t2, qaTestId: t3 } = t0;
-	const headerText = t1 === void 0 ? "Thought for 4 seconds" : t1;
-	const isThinking = t2 === void 0 ? false : t2;
-	const qaTestId = t3 === void 0 ? "thinking-trigger" : t3;
+	const $ = c(34);
+	const { className, headerText, isThinking: t1, qaTestId: t2 } = t0;
+	const isThinking = t1 === void 0 ? false : t1;
+	const qaTestId = t2 === void 0 ? "thinking-trigger" : t2;
+	const { _: _t } = useLingui();
 	const { isOpen, setIsOpen } = useThinking();
-	let t4;
+	const labelColor = isOpen ? "text-text-sub" : "text-text-soft group-hover:text-text-sub";
+	let t3;
 	if ($[0] !== isOpen || $[1] !== setIsOpen) {
-		t4 = () => setIsOpen(!isOpen);
+		t3 = () => setIsOpen(!isOpen);
 		$[0] = isOpen;
 		$[1] = setIsOpen;
-		$[2] = t4;
-	} else t4 = $[2];
-	let t5;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
 	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = { scale: .95 };
-		$[3] = t5;
-	} else t5 = $[3];
-	let t6;
+		t4 = { scale: .95 };
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
 	if ($[4] !== className) {
-		t6 = cn("pui-text-body-medium-alt group flex items-center gap-2 transition-colors", "cursor-pointer border-none bg-transparent p-0", className);
+		t5 = cn("pui-text-body-medium-alt group flex items-center gap-2 transition-colors", "cursor-pointer border-none bg-transparent p-0", className);
 		$[4] = className;
-		$[5] = t6;
-	} else t6 = $[5];
-	const t7 = useToggle("pi_long_chat_render_perf") ? void 0 : {
+		$[5] = t5;
+	} else t5 = $[5];
+	const t6 = useToggle("pi_long_chat_render_perf") ? void 0 : {
 		transform: "translate3d(0, 0, 0)",
 		backfaceVisibility: "hidden"
 	};
+	let t7;
+	if ($[6] !== labelColor) {
+		t7 = cn("transition-colors", labelColor);
+		$[6] = labelColor;
+		$[7] = t7;
+	} else t7 = $[7];
 	let t8;
-	if ($[6] !== isThinking) {
-		t8 = /* @__PURE__ */ jsx("div", {
-			className: "text-text-soft transition-colors group-hover:text-text-strong",
-			children: /* @__PURE__ */ jsx(AnimatedLogoPI, {
-				isAnimating: isThinking,
-				size: 20
-			})
+	if ($[8] !== isThinking) {
+		t8 = /* @__PURE__ */ jsx(AnimatedLogoPI, {
+			isAnimating: isThinking,
+			size: 20
 		});
-		$[6] = isThinking;
-		$[7] = t8;
-	} else t8 = $[7];
+		$[8] = isThinking;
+		$[9] = t8;
+	} else t8 = $[9];
 	let t9;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = cn("pui-text-body-medium-compact transition-colors", "text-text-soft group-hover:text-text-strong");
-		$[8] = t9;
-	} else t9 = $[8];
-	let t10;
-	if ($[9] !== headerText) {
-		t10 = /* @__PURE__ */ jsx("span", {
-			className: t9,
-			children: headerText
+	if ($[10] !== t7 || $[11] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: t7,
+			children: t8
 		});
-		$[9] = headerText;
-		$[10] = t10;
-	} else t10 = $[10];
-	const t11 = isOpen ? "rotate-90" : "rotate-0";
+		$[10] = t7;
+		$[11] = t8;
+		$[12] = t9;
+	} else t9 = $[12];
+	let t10;
+	if ($[13] !== labelColor) {
+		t10 = cn("pui-text-body-medium-compact transition-colors", labelColor);
+		$[13] = labelColor;
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] !== _t || $[16] !== headerText) {
+		t11 = headerText ?? _t({ id: "-D6jVS" });
+		$[15] = _t;
+		$[16] = headerText;
+		$[17] = t11;
+	} else t11 = $[17];
 	let t12;
-	if ($[11] !== t11) {
-		t12 = cn("text-icon-soft transition-all duration-200 group-hover:text-icon-strong", t11);
-		$[11] = t11;
-		$[12] = t12;
-	} else t12 = $[12];
-	let t13;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = /* @__PURE__ */ jsx(ChevronRightIcon, {
+	if ($[18] !== t10 || $[19] !== t11) {
+		t12 = /* @__PURE__ */ jsx("span", {
+			className: t10,
+			children: t11
+		});
+		$[18] = t10;
+		$[19] = t11;
+		$[20] = t12;
+	} else t12 = $[20];
+	const t13 = isOpen ? "rotate-90" : "rotate-0";
+	let t14;
+	if ($[21] !== t13) {
+		t14 = cn("text-icon-soft transition-all duration-200 group-hover:text-icon-strong", t13);
+		$[21] = t13;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(ChevronRightIcon, {
 			size: 20,
 			color: "currentColor"
 		});
-		$[13] = t13;
-	} else t13 = $[13];
-	let t14;
-	if ($[14] !== t12) {
-		t14 = /* @__PURE__ */ jsx("div", {
-			className: t12,
-			children: t13
+		$[23] = t15;
+	} else t15 = $[23];
+	let t16;
+	if ($[24] !== t14) {
+		t16 = /* @__PURE__ */ jsx("div", {
+			className: t14,
+			children: t15
 		});
-		$[14] = t12;
-		$[15] = t14;
-	} else t14 = $[15];
-	let t15;
-	if ($[16] !== qaTestId || $[17] !== t10 || $[18] !== t14 || $[19] !== t4 || $[20] !== t6 || $[21] !== t7 || $[22] !== t8) {
-		t15 = /* @__PURE__ */ jsxs(motion.button, {
+		$[24] = t14;
+		$[25] = t16;
+	} else t16 = $[25];
+	let t17;
+	if ($[26] !== qaTestId || $[27] !== t12 || $[28] !== t16 || $[29] !== t3 || $[30] !== t5 || $[31] !== t6 || $[32] !== t9) {
+		t17 = /* @__PURE__ */ jsxs(motion.button, {
 			type: "button",
-			onClick: t4,
-			whileTap: t5,
+			onClick: t3,
+			whileTap: t4,
 			transition: springTransition,
-			className: t6,
-			style: t7,
+			className: t5,
+			style: t6,
 			"qa-test-id": qaTestId,
 			children: [
-				t8,
-				t10,
-				t14
+				t9,
+				t12,
+				t16
 			]
 		});
-		$[16] = qaTestId;
-		$[17] = t10;
-		$[18] = t14;
-		$[19] = t4;
-		$[20] = t6;
-		$[21] = t7;
-		$[22] = t8;
-		$[23] = t15;
-	} else t15 = $[23];
-	return t15;
+		$[26] = qaTestId;
+		$[27] = t12;
+		$[28] = t16;
+		$[29] = t3;
+		$[30] = t5;
+		$[31] = t6;
+		$[32] = t9;
+		$[33] = t17;
+	} else t17 = $[33];
+	return t17;
 }
 /** ThinkingContent — Animated expandable panel for thinking text and tags. */
 function ThinkingContent(t0) {
@@ -228,7 +252,7 @@ function ThinkingContent(t0) {
 		className: "flex gap-2",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex w-6 items-center justify-center",
-			children: /* @__PURE__ */ jsx("div", { className: "h-full w-[1.5px] rounded-full bg-border-soft" })
+			children: /* @__PURE__ */ jsx("div", { className: "h-full w-px rounded-full bg-depth-black-4" })
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex-1 space-y-2",
 			children: [/* @__PURE__ */ jsx("div", {
@@ -247,7 +271,7 @@ function ThinkingContent(t0) {
 	if ($[7] !== contentRef || $[8] !== t9) {
 		t10 = /* @__PURE__ */ jsx("div", {
 			ref: contentRef,
-			className: "pt-2 pb-4",
+			className: "py-4",
 			children: t9
 		});
 		$[7] = contentRef;

package/dist/ai-elements/tool-call/tool-call-step.js

@@ -5,9 +5,10 @@ import { useToggle } from "../../hooks/useToggle/useToggle.js";
 import { ToolCallTrigger } from "./tool-call-trigger.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { cn } from "cn";
 import { motion } from "motion/react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 
 //#region src/ai-elements/tool-call/tool-call-step.tsx
 /** Full trigger row (0–ICON_BOTTOM) is the gap; line only runs below trigger. */
@@ -45,7 +46,7 @@ function CurvedTailEnd(t0) {
 	let t3;
 	if ($[3] !== t1) {
 		t3 = /* @__PURE__ */ jsx("svg", {
-			className: "absolute z-0 overflow-visible text-border-soft",
+			className: "absolute z-0 overflow-visible text-depth-black-4",
 			width: CURVE_SVG_WIDTH,
 			height: CURVE_VIEWBOX_HEIGHT,
 			viewBox: "0 0 13 38",
@@ -61,27 +62,75 @@ function CurvedTailEnd(t0) {
 	return t3;
 }
 function ToolCallStep(t0) {
-	const $ = c(47);
-	const { className, status, headerText, suffixProps, onSuffixClick, suffixAriaLabel, prefixProps, tags: t1, children, defaultOpen: t2, _isLast: t3, qaTestId: t4 } = t0;
+	const $ = c(67);
+	let children;
+	let className;
+	let forwardedRef;
+	let headerText;
+	let onSuffixClick;
+	let prefixProps;
+	let props;
+	let status;
+	let suffixAriaLabel;
+	let suffixProps;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== t0) {
+		({className, status, headerText, suffixProps, onSuffixClick, suffixAriaLabel, prefixProps, tags: t1, children, defaultOpen: t2, _isLast: t3, qaTestId: t4, ref: forwardedRef, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = forwardedRef;
+		$[4] = headerText;
+		$[5] = onSuffixClick;
+		$[6] = prefixProps;
+		$[7] = props;
+		$[8] = status;
+		$[9] = suffixAriaLabel;
+		$[10] = suffixProps;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else {
+		children = $[1];
+		className = $[2];
+		forwardedRef = $[3];
+		headerText = $[4];
+		onSuffixClick = $[5];
+		prefixProps = $[6];
+		props = $[7];
+		status = $[8];
+		suffixAriaLabel = $[9];
+		suffixProps = $[10];
+		t1 = $[11];
+		t2 = $[12];
+		t3 = $[13];
+		t4 = $[14];
+	}
 	let t5;
-	if ($[0] !== t1) {
+	if ($[15] !== t1) {
 		t5 = t1 === void 0 ? [] : t1;
-		$[0] = t1;
-		$[1] = t5;
-	} else t5 = $[1];
+		$[15] = t1;
+		$[16] = t5;
+	} else t5 = $[16];
 	const tags = t5;
 	const defaultOpen = t2 === void 0 ? false : t2;
 	const _isLast = t3 === void 0 ? true : t3;
 	const qaTestId = t4 === void 0 ? "tool-call-step" : t4;
+	const contentId = useId();
 	const [isOpen, setIsOpen] = useState(defaultOpen);
 	const [hasOpened, setHasOpened] = useState(defaultOpen);
 	if (isOpen && !hasOpened) setHasOpened(true);
 	const { contentRef, measuredHeight } = useExpandableHeight();
 	const stepRef = useRef(null);
+	const composedRef = useComposedRefs(forwardedRef, stepRef);
 	const [straightHeight, setStraightHeight] = useState(0);
 	const [tailTop, setTailTop] = useState(TRIGGER_ROW_GAP);
 	let t6;
-	if ($[2] !== _isLast || $[3] !== contentRef || $[4] !== isOpen) {
+	if ($[17] !== _isLast || $[18] !== contentRef || $[19] !== isOpen) {
 		t6 = () => {
 			if (!isOpen || !_isLast) return;
 			if (typeof ResizeObserver === "undefined") return;
@@ -103,64 +152,64 @@ function ToolCallStep(t0) {
 				observer.disconnect();
 			};
 		};
-		$[2] = _isLast;
-		$[3] = contentRef;
-		$[4] = isOpen;
-		$[5] = t6;
-	} else t6 = $[5];
+		$[17] = _isLast;
+		$[18] = contentRef;
+		$[19] = isOpen;
+		$[20] = t6;
+	} else t6 = $[20];
 	let t7;
-	if ($[6] !== _isLast || $[7] !== contentRef || $[8] !== isOpen || $[9] !== measuredHeight) {
+	if ($[21] !== _isLast || $[22] !== contentRef || $[23] !== isOpen || $[24] !== measuredHeight) {
 		t7 = [
 			_isLast,
 			contentRef,
 			isOpen,
 			measuredHeight
 		];
-		$[6] = _isLast;
-		$[7] = contentRef;
-		$[8] = isOpen;
-		$[9] = measuredHeight;
-		$[10] = t7;
-	} else t7 = $[10];
+		$[21] = _isLast;
+		$[22] = contentRef;
+		$[23] = isOpen;
+		$[24] = measuredHeight;
+		$[25] = t7;
+	} else t7 = $[25];
 	useEffect(t6, t7);
 	const showLineBelow = !_isLast;
 	const showCurve = _isLast && isOpen;
 	const t8 = isOpen ? measuredHeight : 0;
 	const t9 = isOpen ? 1 : 0;
 	let t10;
-	if ($[11] !== t8 || $[12] !== t9) {
+	if ($[26] !== t8 || $[27] !== t9) {
 		t10 = {
 			height: t8,
 			opacity: t9
 		};
-		$[11] = t8;
-		$[12] = t9;
-		$[13] = t10;
-	} else t10 = $[13];
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = t10;
+	} else t10 = $[28];
 	const contentAnimationValues = t10;
 	let t11;
-	if ($[14] !== className) {
+	if ($[29] !== className) {
 		t11 = cn("group/step relative", className);
-		$[14] = className;
-		$[15] = t11;
-	} else t11 = $[15];
+		$[29] = className;
+		$[30] = t11;
+	} else t11 = $[30];
 	let t12;
-	if ($[16] !== showLineBelow) {
+	if ($[31] !== showLineBelow) {
 		t12 = showLineBelow ? /* @__PURE__ */ jsx("div", {
-			className: "absolute bottom-0 z-0 w-px bg-border-soft",
+			className: "absolute bottom-0 z-0 w-px bg-depth-black-4",
 			style: {
 				left: 11.5,
 				top: TRIGGER_ROW_GAP
 			},
 			"aria-hidden": true
 		}) : null;
-		$[16] = showLineBelow;
-		$[17] = t12;
-	} else t12 = $[17];
+		$[31] = showLineBelow;
+		$[32] = t12;
+	} else t12 = $[32];
 	let t13;
-	if ($[18] !== showCurve || $[19] !== straightHeight || $[20] !== tailTop) {
+	if ($[33] !== showCurve || $[34] !== straightHeight || $[35] !== tailTop) {
 		t13 = showCurve ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-			className: "absolute z-0 w-px bg-border-soft",
+			className: "absolute z-0 w-px bg-depth-black-4",
 			style: {
 				left: 11.5,
 				top: TRIGGER_ROW_GAP,
@@ -168,19 +217,19 @@ function ToolCallStep(t0) {
 			},
 			"aria-hidden": true
 		}), /* @__PURE__ */ jsx(CurvedTailEnd, { top: tailTop })] }) : null;
-		$[18] = showCurve;
-		$[19] = straightHeight;
-		$[20] = tailTop;
-		$[21] = t13;
-	} else t13 = $[21];
+		$[33] = showCurve;
+		$[34] = straightHeight;
+		$[35] = tailTop;
+		$[36] = t13;
+	} else t13 = $[36];
 	let t14;
-	if ($[22] !== isOpen) {
+	if ($[37] !== isOpen) {
 		t14 = () => setIsOpen(!isOpen);
-		$[22] = isOpen;
-		$[23] = t14;
-	} else t14 = $[23];
+		$[37] = isOpen;
+		$[38] = t14;
+	} else t14 = $[38];
 	let t15;
-	if ($[24] !== headerText || $[25] !== isOpen || $[26] !== onSuffixClick || $[27] !== prefixProps || $[28] !== status || $[29] !== suffixAriaLabel || $[30] !== suffixProps || $[31] !== t14) {
+	if ($[39] !== contentId || $[40] !== headerText || $[41] !== isOpen || $[42] !== onSuffixClick || $[43] !== prefixProps || $[44] !== status || $[45] !== suffixAriaLabel || $[46] !== suffixProps || $[47] !== t14) {
 		t15 = /* @__PURE__ */ jsx(ToolCallTrigger, {
 			status,
 			headerText,
@@ -189,25 +238,28 @@ function ToolCallStep(t0) {
 			suffixAriaLabel,
 			prefixProps,
 			isOpen,
+			contentId,
 			onClick: t14,
 			className: "relative z-10 h-8"
 		});
-		$[24] = headerText;
-		$[25] = isOpen;
-		$[26] = onSuffixClick;
-		$[27] = prefixProps;
-		$[28] = status;
-		$[29] = suffixAriaLabel;
-		$[30] = suffixProps;
-		$[31] = t14;
-		$[32] = t15;
-	} else t15 = $[32];
-	const t16 = useToggle("pi_long_chat_render_perf") ? void 0 : {
+		$[39] = contentId;
+		$[40] = headerText;
+		$[41] = isOpen;
+		$[42] = onSuffixClick;
+		$[43] = prefixProps;
+		$[44] = status;
+		$[45] = suffixAriaLabel;
+		$[46] = suffixProps;
+		$[47] = t14;
+		$[48] = t15;
+	} else t15 = $[48];
+	const t16 = !isOpen;
+	const t17 = useToggle("pi_long_chat_render_perf") ? void 0 : {
 		willChange: "height, opacity",
 		transform: "translate3d(0, 0, 0)",
 		backfaceVisibility: "hidden"
 	};
-	const t17 = !useToggle("pi_long_chat_render_perf") || hasOpened ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	const t18 = !useToggle("pi_long_chat_render_perf") || hasOpened ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		className: "py-1",
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("pui-text-body-medium-compact text-text-soft", "wrap-break-word whitespace-pre-wrap"),
@@ -217,54 +269,61 @@ function ToolCallStep(t0) {
 		className: "flex flex-wrap gap-2 py-1",
 		children: tags.map(_temp)
 	}) : null] }) : null;
-	let t18;
-	if ($[33] !== contentRef || $[34] !== t17) {
-		t18 = /* @__PURE__ */ jsx("div", {
+	let t19;
+	if ($[49] !== contentRef || $[50] !== t18) {
+		t19 = /* @__PURE__ */ jsx("div", {
 			ref: contentRef,
 			className: "pt-1 pb-1 pl-8",
-			children: t17
+			children: t18
 		});
-		$[33] = contentRef;
-		$[34] = t17;
-		$[35] = t18;
-	} else t18 = $[35];
-	let t19;
-	if ($[36] !== contentAnimationValues || $[37] !== t16 || $[38] !== t18) {
-		t19 = /* @__PURE__ */ jsx(motion.div, {
+		$[49] = contentRef;
+		$[50] = t18;
+		$[51] = t19;
+	} else t19 = $[51];
+	let t20;
+	if ($[52] !== contentAnimationValues || $[53] !== contentId || $[54] !== t16 || $[55] !== t17 || $[56] !== t19) {
+		t20 = /* @__PURE__ */ jsx(motion.div, {
+			id: contentId,
+			inert: t16,
 			initial: contentAnimationValues,
 			animate: contentAnimationValues,
 			transition: panelTransition,
 			className: "w-full overflow-hidden",
-			style: t16,
-			children: t18
+			style: t17,
+			children: t19
 		});
-		$[36] = contentAnimationValues;
-		$[37] = t16;
-		$[38] = t18;
-		$[39] = t19;
-	} else t19 = $[39];
-	let t20;
-	if ($[40] !== qaTestId || $[41] !== t11 || $[42] !== t12 || $[43] !== t13 || $[44] !== t15 || $[45] !== t19) {
-		t20 = /* @__PURE__ */ jsxs("div", {
-			ref: stepRef,
+		$[52] = contentAnimationValues;
+		$[53] = contentId;
+		$[54] = t16;
+		$[55] = t17;
+		$[56] = t19;
+		$[57] = t20;
+	} else t20 = $[57];
+	let t21;
+	if ($[58] !== composedRef || $[59] !== props || $[60] !== qaTestId || $[61] !== t11 || $[62] !== t12 || $[63] !== t13 || $[64] !== t15 || $[65] !== t20) {
+		t21 = /* @__PURE__ */ jsxs("div", {
+			...props,
+			ref: composedRef,
 			className: t11,
 			"qa-test-id": qaTestId,
 			children: [
 				t12,
 				t13,
 				t15,
-				t19
+				t20
 			]
 		});
-		$[40] = qaTestId;
-		$[41] = t11;
-		$[42] = t12;
-		$[43] = t13;
-		$[44] = t15;
-		$[45] = t19;
-		$[46] = t20;
-	} else t20 = $[46];
-	return t20;
+		$[58] = composedRef;
+		$[59] = props;
+		$[60] = qaTestId;
+		$[61] = t11;
+		$[62] = t12;
+		$[63] = t13;
+		$[64] = t15;
+		$[65] = t20;
+		$[66] = t21;
+	} else t21 = $[66];
+	return t21;
 }
 function _temp(tag, index) {
 	return /* @__PURE__ */ jsx(Tag, {