@envive-ai/react-toolkit-v3 0.3.7 → 0.3.9

package/dist/PromptCarousel/hooks/useButtonScrollPosition.cjs

@@ -1,79 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_PromptCarousel_types_types = require('../types/types.cjs');
-let react = require("react");
-
-//#region src/components/PromptCarousel/hooks/useButtonScrollPosition.ts
-const getElementId = (element) => {
-	if (!element) return null;
-	return element.id?.trim() || null;
-};
-function useButtonScrollPosition(firstRowScrollRef, blockScrollRef, shouldUseRowScroll) {
-	const savedButtonIdRef = (0, react.useRef)(null);
-	const savedButtonPositionRef = (0, react.useRef)(null);
-	const captureButtonUnderMouse = (0, react.useCallback)((mouseX, mouseY) => {
-		const container = firstRowScrollRef.current;
-		if (!container) return;
-		const containerRect = container.getBoundingClientRect();
-		const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
-		const targetButtonId = getElementId(elementUnderMouse);
-		let closestButton = null;
-		if (targetButtonId) {
-			const buttonById = document.querySelector(`#${CSS.escape(targetButtonId)}`);
-			if (buttonById && (elementUnderMouse === buttonById || buttonById.contains(elementUnderMouse))) closestButton = buttonById;
-		}
-		if (!closestButton) {
-			const buttons = Array.from(container.querySelectorAll("button"));
-			let closestDistance = Infinity;
-			for (const button of buttons) {
-				const buttonRect = button.getBoundingClientRect();
-				if (mouseX >= buttonRect.left && mouseX <= buttonRect.right && mouseY >= buttonRect.top && mouseY <= buttonRect.bottom) {
-					closestButton = button;
-					break;
-				}
-				const buttonCenterX = buttonRect.left + buttonRect.width / 2;
-				const buttonCenterY = buttonRect.top + buttonRect.height / 2;
-				const distance = Math.sqrt((mouseX - buttonCenterX) ** 2 + (mouseY - buttonCenterY) ** 2);
-				if (distance < closestDistance) {
-					closestDistance = distance;
-					closestButton = button;
-				}
-			}
-		}
-		if (closestButton) {
-			const id = getElementId(closestButton);
-			if (id) {
-				savedButtonIdRef.current = id;
-				savedButtonPositionRef.current = closestButton.getBoundingClientRect().left - containerRect.left;
-			}
-		}
-	}, [firstRowScrollRef]);
-	(0, react.useEffect)(() => {
-		if (shouldUseRowScroll || !blockScrollRef.current || !savedButtonIdRef.current || savedButtonPositionRef.current === null) return;
-		const container = blockScrollRef.current;
-		const targetId = savedButtonIdRef.current.trim();
-		const targetPosition = savedButtonPositionRef.current;
-		const getScrollId = (id) => {
-			if (id.endsWith(require_PromptCarousel_types_types.RepetitionNumberSuffix.TWO)) return id;
-			if (id.endsWith(require_PromptCarousel_types_types.RepetitionNumberSuffix.THREE)) return `${id.slice(0, -2)}${require_PromptCarousel_types_types.RepetitionNumberSuffix.TWO}`;
-			return `${id}${require_PromptCarousel_types_types.RepetitionNumberSuffix.TWO}`;
-		};
-		const applyScroll = () => {
-			const finalId = getScrollId(targetId);
-			const targetButton = container.querySelector(`#${CSS.escape(`${finalId}`)}`);
-			const scrollableContent = container.firstElementChild;
-			if (!targetButton || !scrollableContent) return;
-			const contentRect = scrollableContent.getBoundingClientRect();
-			const newScrollLeft = targetButton.getBoundingClientRect().left - contentRect.left + container.scrollLeft - targetPosition;
-			container.scrollLeft = Math.max(0, newScrollLeft);
-		};
-		requestAnimationFrame(() => {
-			requestAnimationFrame(() => {
-				requestAnimationFrame(applyScroll);
-			});
-		});
-	}, [shouldUseRowScroll, blockScrollRef]);
-	return { captureButtonUnderMouse };
-}
-
-//#endregion
-exports.useButtonScrollPosition = useButtonScrollPosition;

package/dist/PromptCarousel/hooks/useButtonScrollPosition.js

@@ -1,78 +0,0 @@
-import { RepetitionNumberSuffix } from "../types/types.js";
-import { useCallback, useEffect, useRef } from "react";
-
-//#region src/components/PromptCarousel/hooks/useButtonScrollPosition.ts
-const getElementId = (element) => {
-	if (!element) return null;
-	return element.id?.trim() || null;
-};
-function useButtonScrollPosition(firstRowScrollRef, blockScrollRef, shouldUseRowScroll) {
-	const savedButtonIdRef = useRef(null);
-	const savedButtonPositionRef = useRef(null);
-	const captureButtonUnderMouse = useCallback((mouseX, mouseY) => {
-		const container = firstRowScrollRef.current;
-		if (!container) return;
-		const containerRect = container.getBoundingClientRect();
-		const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
-		const targetButtonId = getElementId(elementUnderMouse);
-		let closestButton = null;
-		if (targetButtonId) {
-			const buttonById = document.querySelector(`#${CSS.escape(targetButtonId)}`);
-			if (buttonById && (elementUnderMouse === buttonById || buttonById.contains(elementUnderMouse))) closestButton = buttonById;
-		}
-		if (!closestButton) {
-			const buttons = Array.from(container.querySelectorAll("button"));
-			let closestDistance = Infinity;
-			for (const button of buttons) {
-				const buttonRect = button.getBoundingClientRect();
-				if (mouseX >= buttonRect.left && mouseX <= buttonRect.right && mouseY >= buttonRect.top && mouseY <= buttonRect.bottom) {
-					closestButton = button;
-					break;
-				}
-				const buttonCenterX = buttonRect.left + buttonRect.width / 2;
-				const buttonCenterY = buttonRect.top + buttonRect.height / 2;
-				const distance = Math.sqrt((mouseX - buttonCenterX) ** 2 + (mouseY - buttonCenterY) ** 2);
-				if (distance < closestDistance) {
-					closestDistance = distance;
-					closestButton = button;
-				}
-			}
-		}
-		if (closestButton) {
-			const id = getElementId(closestButton);
-			if (id) {
-				savedButtonIdRef.current = id;
-				savedButtonPositionRef.current = closestButton.getBoundingClientRect().left - containerRect.left;
-			}
-		}
-	}, [firstRowScrollRef]);
-	useEffect(() => {
-		if (shouldUseRowScroll || !blockScrollRef.current || !savedButtonIdRef.current || savedButtonPositionRef.current === null) return;
-		const container = blockScrollRef.current;
-		const targetId = savedButtonIdRef.current.trim();
-		const targetPosition = savedButtonPositionRef.current;
-		const getScrollId = (id) => {
-			if (id.endsWith(RepetitionNumberSuffix.TWO)) return id;
-			if (id.endsWith(RepetitionNumberSuffix.THREE)) return `${id.slice(0, -2)}${RepetitionNumberSuffix.TWO}`;
-			return `${id}${RepetitionNumberSuffix.TWO}`;
-		};
-		const applyScroll = () => {
-			const finalId = getScrollId(targetId);
-			const targetButton = container.querySelector(`#${CSS.escape(`${finalId}`)}`);
-			const scrollableContent = container.firstElementChild;
-			if (!targetButton || !scrollableContent) return;
-			const contentRect = scrollableContent.getBoundingClientRect();
-			const newScrollLeft = targetButton.getBoundingClientRect().left - contentRect.left + container.scrollLeft - targetPosition;
-			container.scrollLeft = Math.max(0, newScrollLeft);
-		};
-		requestAnimationFrame(() => {
-			requestAnimationFrame(() => {
-				requestAnimationFrame(applyScroll);
-			});
-		});
-	}, [shouldUseRowScroll, blockScrollRef]);
-	return { captureButtonUnderMouse };
-}
-
-//#endregion
-export { useButtonScrollPosition };

package/dist/PromptCarousel/hooks/useCarouselAnimation.cjs

@@ -1,23 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_PromptCarousel_types_types = require('../types/types.cjs');
-const require_useHorizontalScrollAnimation = require('./useHorizontalScrollAnimation.cjs');
-const require_useButtonScrollPosition = require('./useButtonScrollPosition.cjs');
-let react = require("react");
-
-//#region src/components/PromptCarousel/hooks/useCarouselAnimation.ts
-const useCarouselAnimation = ({ firstRowScrollRef, blockScrollRef, scrollRefs, animationSpeed, isAnimated }) => {
-	const [isAnimationStopped, setIsAnimationStopped] = (0, react.useState)(false);
-	const shouldUseRowScroll = isAnimated && !isAnimationStopped;
-	const { captureButtonUnderMouse } = require_useButtonScrollPosition.useButtonScrollPosition(firstRowScrollRef, blockScrollRef, shouldUseRowScroll);
-	require_useHorizontalScrollAnimation.useHorizontalScrollAnimation(scrollRefs, (0, react.useCallback)((mouseX, mouseY) => {
-		if (mouseX !== void 0 && mouseY !== void 0) captureButtonUnderMouse(mouseX, mouseY);
-		setIsAnimationStopped(true);
-	}, [captureButtonUnderMouse]), shouldUseRowScroll ? animationSpeed : require_PromptCarousel_types_types.AnimationSpeed.NONE);
-	return {
-		isAnimationStopped,
-		shouldUseRowScroll
-	};
-};
-
-//#endregion
-exports.useCarouselAnimation = useCarouselAnimation;

package/dist/PromptCarousel/hooks/useCarouselAnimation.js

@@ -1,22 +0,0 @@
-import { AnimationSpeed } from "../types/types.js";
-import { useHorizontalScrollAnimation } from "./useHorizontalScrollAnimation.js";
-import { useButtonScrollPosition } from "./useButtonScrollPosition.js";
-import { useCallback, useState } from "react";
-
-//#region src/components/PromptCarousel/hooks/useCarouselAnimation.ts
-const useCarouselAnimation = ({ firstRowScrollRef, blockScrollRef, scrollRefs, animationSpeed, isAnimated }) => {
-	const [isAnimationStopped, setIsAnimationStopped] = useState(false);
-	const shouldUseRowScroll = isAnimated && !isAnimationStopped;
-	const { captureButtonUnderMouse } = useButtonScrollPosition(firstRowScrollRef, blockScrollRef, shouldUseRowScroll);
-	useHorizontalScrollAnimation(scrollRefs, useCallback((mouseX, mouseY) => {
-		if (mouseX !== void 0 && mouseY !== void 0) captureButtonUnderMouse(mouseX, mouseY);
-		setIsAnimationStopped(true);
-	}, [captureButtonUnderMouse]), shouldUseRowScroll ? animationSpeed : AnimationSpeed.NONE);
-	return {
-		isAnimationStopped,
-		shouldUseRowScroll
-	};
-};
-
-//#endregion
-export { useCarouselAnimation };

package/dist/PromptCarousel/hooks/useCarouselRefs.cjs

@@ -1,20 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-let react = require("react");
-
-//#region src/components/PromptCarousel/hooks/useCarouselRefs.ts
-const useCarouselRefs = ({ shouldShowTwoRows }) => {
-	const firstRowScrollRef = (0, react.useRef)(null);
-	const firstRowStackRef = (0, react.useRef)(null);
-	const secondRowScrollRef = (0, react.useRef)(null);
-	return {
-		firstRowScrollRef,
-		firstRowStackRef,
-		secondRowScrollRef,
-		blockScrollRef: (0, react.useRef)(null),
-		blockFirstRowStackRef: (0, react.useRef)(null),
-		scrollRefs: shouldShowTwoRows ? [firstRowScrollRef, secondRowScrollRef] : [firstRowScrollRef]
-	};
-};
-
-//#endregion
-exports.useCarouselRefs = useCarouselRefs;

package/dist/PromptCarousel/hooks/useCarouselRefs.js

@@ -1,19 +0,0 @@
-import { useRef } from "react";
-
-//#region src/components/PromptCarousel/hooks/useCarouselRefs.ts
-const useCarouselRefs = ({ shouldShowTwoRows }) => {
-	const firstRowScrollRef = useRef(null);
-	const firstRowStackRef = useRef(null);
-	const secondRowScrollRef = useRef(null);
-	return {
-		firstRowScrollRef,
-		firstRowStackRef,
-		secondRowScrollRef,
-		blockScrollRef: useRef(null),
-		blockFirstRowStackRef: useRef(null),
-		scrollRefs: shouldShowTwoRows ? [firstRowScrollRef, secondRowScrollRef] : [firstRowScrollRef]
-	};
-};
-
-//#endregion
-export { useCarouselRefs };

package/dist/PromptCarousel/hooks/useGetScrollProperties.cjs

@@ -1,18 +0,0 @@
-
-//#region src/components/PromptCarousel/hooks/useGetScrollProperties.ts
-const useGetScrollProperties = () => {
-	return {
-		scrollClasses: [
-			"envive-tw-overflow-x-scroll",
-			"envive-tw-overflow-y-hidden",
-			"[&::-webkit-scrollbar]:hidden"
-		],
-		scrollStyle: {
-			scrollbarWidth: "none",
-			msOverflowStyle: "none"
-		}
-	};
-};
-
-//#endregion
-exports.useGetScrollProperties = useGetScrollProperties;

package/dist/PromptCarousel/hooks/useGetScrollProperties.js

@@ -1,17 +0,0 @@
-//#region src/components/PromptCarousel/hooks/useGetScrollProperties.ts
-const useGetScrollProperties = () => {
-	return {
-		scrollClasses: [
-			"envive-tw-overflow-x-scroll",
-			"envive-tw-overflow-y-hidden",
-			"[&::-webkit-scrollbar]:hidden"
-		],
-		scrollStyle: {
-			scrollbarWidth: "none",
-			msOverflowStyle: "none"
-		}
-	};
-};
-
-//#endregion
-export { useGetScrollProperties };

package/dist/PromptCarousel/hooks/useHorizontalScrollAnimation.cjs

@@ -1,78 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_PromptCarousel_types_types = require('../types/types.cjs');
-let react = require("react");
-
-//#region src/components/PromptCarousel/hooks/useHorizontalScrollAnimation.ts
-function useHorizontalScrollAnimation(scrollContainerRefs, onStopAll, animationSpeed = "none") {
-	const animationRefs = (0, react.useRef)([]);
-	const lastTimestampRefs = (0, react.useRef)([]);
-	const accumulatedScrollRefs = (0, react.useRef)([]);
-	const isStoppedRef = (0, react.useRef)(false);
-	(0, react.useEffect)(() => {
-		if (animationSpeed === require_PromptCarousel_types_types.AnimationSpeed.NONE) return;
-		const containers = scrollContainerRefs.map((ref) => ref.current).filter((container) => container !== null);
-		if (containers.length === 0) return;
-		animationRefs.current = containers.map(() => null);
-		lastTimestampRefs.current = containers.map(() => null);
-		accumulatedScrollRefs.current = containers.map(() => 0);
-		const PIXELS_PER_SECOND = animationSpeed === require_PromptCarousel_types_types.AnimationSpeed.FAST ? 60 : 30;
-		const cancelAllAnimations = () => {
-			animationRefs.current.forEach((rafId) => {
-				if (rafId !== null) cancelAnimationFrame(rafId);
-			});
-		};
-		const createAnimationLoop = (index) => {
-			const step = (timestamp) => {
-				if (isStoppedRef.current) return;
-				const container = containers[index];
-				if (!container || container.scrollWidth <= container.clientWidth) {
-					animationRefs.current[index] = requestAnimationFrame(step);
-					return;
-				}
-				if (lastTimestampRefs.current[index] === null) lastTimestampRefs.current[index] = timestamp;
-				const delta = timestamp - lastTimestampRefs.current[index];
-				lastTimestampRefs.current[index] = timestamp;
-				accumulatedScrollRefs.current[index] += PIXELS_PER_SECOND * (delta / 1e3);
-				const pixelsToScroll = Math.floor(accumulatedScrollRefs.current[index]);
-				if (pixelsToScroll > 0) {
-					const newScrollLeft = container.scrollLeft + pixelsToScroll;
-					const maxScroll = container.scrollWidth - container.clientWidth;
-					if (Math.ceil(newScrollLeft) >= maxScroll) {
-						container.scrollLeft = 0;
-						accumulatedScrollRefs.current[index] = 0;
-					} else {
-						container.scrollLeft = newScrollLeft;
-						accumulatedScrollRefs.current[index] -= pixelsToScroll;
-					}
-				}
-				if (!isStoppedRef.current) animationRefs.current[index] = requestAnimationFrame(step);
-			};
-			return step;
-		};
-		containers.forEach((container, index) => {
-			animationRefs.current[index] = requestAnimationFrame(createAnimationLoop(index));
-		});
-		const handleMouseEnter = (event) => {
-			isStoppedRef.current = true;
-			onStopAll(event.clientX, event.clientY);
-			cancelAllAnimations();
-		};
-		containers.forEach((container) => {
-			container.addEventListener("mouseenter", handleMouseEnter);
-		});
-		return () => {
-			isStoppedRef.current = true;
-			cancelAllAnimations();
-			containers.forEach((container) => {
-				container.removeEventListener("mouseenter", handleMouseEnter);
-			});
-		};
-	}, [
-		animationSpeed,
-		scrollContainerRefs,
-		onStopAll
-	]);
-}
-
-//#endregion
-exports.useHorizontalScrollAnimation = useHorizontalScrollAnimation;

package/dist/PromptCarousel/hooks/useHorizontalScrollAnimation.js

@@ -1,77 +0,0 @@
-import { AnimationSpeed } from "../types/types.js";
-import { useEffect, useRef } from "react";
-
-//#region src/components/PromptCarousel/hooks/useHorizontalScrollAnimation.ts
-function useHorizontalScrollAnimation(scrollContainerRefs, onStopAll, animationSpeed = "none") {
-	const animationRefs = useRef([]);
-	const lastTimestampRefs = useRef([]);
-	const accumulatedScrollRefs = useRef([]);
-	const isStoppedRef = useRef(false);
-	useEffect(() => {
-		if (animationSpeed === AnimationSpeed.NONE) return;
-		const containers = scrollContainerRefs.map((ref) => ref.current).filter((container) => container !== null);
-		if (containers.length === 0) return;
-		animationRefs.current = containers.map(() => null);
-		lastTimestampRefs.current = containers.map(() => null);
-		accumulatedScrollRefs.current = containers.map(() => 0);
-		const PIXELS_PER_SECOND = animationSpeed === AnimationSpeed.FAST ? 60 : 30;
-		const cancelAllAnimations = () => {
-			animationRefs.current.forEach((rafId) => {
-				if (rafId !== null) cancelAnimationFrame(rafId);
-			});
-		};
-		const createAnimationLoop = (index) => {
-			const step = (timestamp) => {
-				if (isStoppedRef.current) return;
-				const container = containers[index];
-				if (!container || container.scrollWidth <= container.clientWidth) {
-					animationRefs.current[index] = requestAnimationFrame(step);
-					return;
-				}
-				if (lastTimestampRefs.current[index] === null) lastTimestampRefs.current[index] = timestamp;
-				const delta = timestamp - lastTimestampRefs.current[index];
-				lastTimestampRefs.current[index] = timestamp;
-				accumulatedScrollRefs.current[index] += PIXELS_PER_SECOND * (delta / 1e3);
-				const pixelsToScroll = Math.floor(accumulatedScrollRefs.current[index]);
-				if (pixelsToScroll > 0) {
-					const newScrollLeft = container.scrollLeft + pixelsToScroll;
-					const maxScroll = container.scrollWidth - container.clientWidth;
-					if (Math.ceil(newScrollLeft) >= maxScroll) {
-						container.scrollLeft = 0;
-						accumulatedScrollRefs.current[index] = 0;
-					} else {
-						container.scrollLeft = newScrollLeft;
-						accumulatedScrollRefs.current[index] -= pixelsToScroll;
-					}
-				}
-				if (!isStoppedRef.current) animationRefs.current[index] = requestAnimationFrame(step);
-			};
-			return step;
-		};
-		containers.forEach((container, index) => {
-			animationRefs.current[index] = requestAnimationFrame(createAnimationLoop(index));
-		});
-		const handleMouseEnter = (event) => {
-			isStoppedRef.current = true;
-			onStopAll(event.clientX, event.clientY);
-			cancelAllAnimations();
-		};
-		containers.forEach((container) => {
-			container.addEventListener("mouseenter", handleMouseEnter);
-		});
-		return () => {
-			isStoppedRef.current = true;
-			cancelAllAnimations();
-			containers.forEach((container) => {
-				container.removeEventListener("mouseenter", handleMouseEnter);
-			});
-		};
-	}, [
-		animationSpeed,
-		scrollContainerRefs,
-		onStopAll
-	]);
-}
-
-//#endregion
-export { useHorizontalScrollAnimation };

package/dist/tokens/utils.cjs

@@ -1,6 +0,0 @@
-
-//#region tokens/utils.ts
-const addVar = (varName) => `var(--${varName})`;
-
-//#endregion
-exports.addVar = addVar;

package/dist/tokens/utils.js

@@ -1,5 +0,0 @@
-//#region tokens/utils.ts
-const addVar = (varName) => `var(--${varName})`;
-
-//#endregion
-export { addVar };

package/src/components/PromptCarousel/components/BlockScrollContainer.tsx

@@ -1,34 +0,0 @@
-import classNames from 'classnames';
-import { useGetScrollProperties } from '../hooks/useGetScrollProperties';
-
-interface BlockScrollContainerProps {
-  children: React.ReactNode;
-  scrollRef: React.RefObject<HTMLDivElement>;
-  className?: string;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-}
-
-export const BlockScrollContainer = ({
-  children,
-  scrollRef,
-  className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-}: BlockScrollContainerProps) => {
-  const { scrollStyle, scrollClasses } = useGetScrollProperties();
-
-  return (
-    <div
-      ref={scrollRef}
-      className={classNames(...scrollClasses, className)}
-      style={scrollStyle}
-      role="group"
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      tabIndex={0}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/PromptCarousel/components/ButtonContainerRow.tsx

@@ -1,46 +0,0 @@
-import classNames from 'classnames';
-import { Stack } from '../../Stack';
-import { useGetScrollProperties } from '../hooks/useGetScrollProperties';
-
-export interface ButtonContainerRowProps {
-  children: React.ReactNode;
-  scrollRef?: React.RefObject<HTMLDivElement>;
-  stackRef?: React.RefObject<HTMLDivElement>;
-  className?: string;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-}
-
-export const ButtonContainerRow = ({
-  children,
-  scrollRef,
-  stackRef,
-  className,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-}: ButtonContainerRowProps) => {
-  const { scrollStyle, scrollClasses } = useGetScrollProperties();
-
-  return (
-    <div
-      ref={scrollRef}
-      className={classNames(...scrollClasses, className)}
-      style={scrollStyle}
-      role="group"
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      tabIndex={0}
-    >
-      <div ref={stackRef}>
-        <Stack
-          direction="row"
-          align="center"
-          gap="2"
-          className="envive-tw-h-full envive-tw-w-max envive-tw-whitespace-nowrap"
-        >
-          {children}
-        </Stack>
-      </div>
-    </div>
-  );
-};

package/src/components/PromptCarousel/components/CarouselContentWithBlockScroll.tsx

@@ -1,83 +0,0 @@
-import { Stack } from '../../Stack';
-import { BlockScrollContainer } from './BlockScrollContainer';
-import { RepetitionNumberSuffix } from '../types/types';
-
-export interface CarouselContentWithBlockScrollProps {
-  visibleButtonsFirstRow: string[];
-  visibleButtonsSecondRow: string[];
-  shouldShowTwoRows: boolean;
-  renderButton: (
-    text: string,
-    index: number,
-    repetitionNumber?: `${RepetitionNumberSuffix}`,
-  ) => React.ReactNode;
-  isAnimated: boolean;
-  isAnimationStopped: boolean;
-  blockScrollRef: React.RefObject<HTMLDivElement>;
-  blockFirstRowStackRef: React.RefObject<HTMLDivElement>;
-}
-
-export const CarouselContentWithBlockScroll = ({
-  visibleButtonsFirstRow,
-  visibleButtonsSecondRow,
-  shouldShowTwoRows,
-  renderButton,
-  isAnimated,
-  isAnimationStopped,
-  blockScrollRef,
-  blockFirstRowStackRef,
-}: CarouselContentWithBlockScrollProps) => {
-  const showRepetitions = isAnimated && isAnimationStopped;
-
-  const renderRowButtons = (buttons: string[], startIndex: number) => (
-    <>
-      {buttons.map((text, index) => renderButton(text, startIndex + index))}
-      {showRepetitions &&
-        buttons.map((text, index) =>
-          renderButton(text, startIndex + index, RepetitionNumberSuffix.TWO),
-        )}
-      {showRepetitions &&
-        buttons.map((text, index) =>
-          renderButton(text, startIndex + index, RepetitionNumberSuffix.THREE),
-        )}
-    </>
-  );
-
-  return (
-    <BlockScrollContainer
-      scrollRef={blockScrollRef}
-      aria-label="Scrollable prompt buttons"
-    >
-      <Stack
-        direction="column"
-        gap="2"
-        className="envive-tw-w-max"
-      >
-        <div
-          ref={blockFirstRowStackRef}
-          role={shouldShowTwoRows ? 'group' : undefined}
-          aria-label={shouldShowTwoRows ? 'First row of prompt buttons' : undefined}
-        >
-          <Stack
-            direction="row"
-            gap="2"
-            className="envive-tw-whitespace-nowrap"
-          >
-            {renderRowButtons(visibleButtonsFirstRow, 0)}
-          </Stack>
-        </div>
-
-        {shouldShowTwoRows && visibleButtonsSecondRow.length > 0 && (
-          <Stack
-            direction="row"
-            gap="2"
-            className="envive-tw-whitespace-nowrap"
-            aria-label="Second row of prompt buttons"
-          >
-            {renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)}
-          </Stack>
-        )}
-      </Stack>
-    </BlockScrollContainer>
-  );
-};