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

package/src/components/WidgetTextField/__tests__/WidgetTextField.test.tsx

@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { WidgetTextField } from '../WidgetTextField';
 import { Theme } from '../../../../tokens/theme/theme';
+import { IconVariant } from '../types/types';
 
 describe('WidgetTextField', () => {
   describe('Basic rendering', () => {
@@ -292,6 +293,59 @@ describe('WidgetTextField', () => {
     });
   });
 
+  describe('Icon variants', () => {
+    it('should render with DEFAULT icon variant', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          iconVariant={IconVariant.DEFAULT}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should render with SEARCH icon variant', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          iconVariant={IconVariant.SEARCH}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should default to DEFAULT icon variant when not provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should work with iconVariant across different themes', () => {
+      const themes = [Theme.STANDARD, Theme.MODERN, Theme.MINIMAL, Theme.GLOBAL_CUSTOM];
+      themes.forEach(theme => {
+        const { container, unmount } = render(
+          <WidgetTextField
+            placeholder="Test"
+            theme={theme}
+            iconVariant={IconVariant.SEARCH}
+          />,
+        );
+        const svg = container.querySelector('svg');
+        expect(svg).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
   describe('Component structure', () => {
     it('should render Container with correct props', () => {
       const { container } = render(

package/src/components/WidgetTextField/components/Container.tsx

@@ -58,8 +58,8 @@ export const Container = ({
         justify="between"
         gap="2"
       >
-        {text}
-        {icon}
+        <div className="envive-tw-min-w-0 envive-tw-flex-1 envive-tw-overflow-hidden">{text}</div>
+        <div className="envive-tw-flex-shrink-0">{icon}</div>
       </Stack>
     </ContainerComponent>
   );

package/src/components/WidgetTextField/components/FakeTextInput.tsx

@@ -3,13 +3,17 @@ import { TypographyColor, TypographyVariant } from '../../Typography/types';
 
 type FakeTextInputProps = {
   placeholder: string;
+  textColor: TypographyColor;
 };
 
-export const FakeTextInput = ({ placeholder }: FakeTextInputProps) => {
+export const FakeTextInput = ({
+  placeholder,
+  textColor = TypographyColor.TEXT_SECONDARY,
+}: FakeTextInputProps) => {
   return (
     <Typography
       variant={TypographyVariant.B3_RG}
-      color={TypographyColor.TEXT_SECONDARY}
+      color={textColor}
       noWrap
     >
       {placeholder}

package/src/components/WidgetTextField/components/Icon.tsx

@@ -1,47 +1,124 @@
+import SvgSendStandard from '@envive-ai/react-icons/MagnifyingGlass';
+import SvgSendModern from '@envive-ai/react-icons/MagnifyingThin';
+import SendMinimalist from '@envive-ai/react-icons/SendMinimalist';
 import SendModern from '@envive-ai/react-icons/SendModern';
 import SendStandard from '@envive-ai/react-icons/SendStandard';
-import SendMinimalist from '@envive-ai/react-icons/SendMinimalist';
 import { Theme } from '../../../../tokens/theme/theme';
 import { CustomIcon } from '../../utils/CustomIcon';
+import { IconVariant } from '../types/types';
+import { TypographyColor } from '../../Typography/types';
 
 type IconProps = {
   theme: Theme;
+  variant: IconVariant;
+  textColor: TypographyColor;
 };
 
-export const Icon = ({ theme }: IconProps) => {
+export const Icon = ({ variant, theme, textColor }: IconProps) => {
   if (theme === Theme.STANDARD) {
+    if (variant === IconVariant.DEFAULT) {
+      return (
+        <CustomIcon
+          IconComponent={<SendStandard />}
+          className="envive-tw-h-6 envive-tw-w-6"
+          fill={
+            textColor !== TypographyColor.TEXT_SECONDARY
+              ? `var(--envive-colors-${textColor})`
+              : 'var(--envive-colors-border-medium)'
+          }
+        />
+      );
+    }
     return (
       <CustomIcon
-        IconComponent={<SendStandard />}
+        IconComponent={<SvgSendStandard />}
         className="envive-tw-h-6 envive-tw-w-6"
-        fill="var(--envive-colors-border-medium)"
+        fill={
+          textColor !== TypographyColor.TEXT_SECONDARY
+            ? `var(--envive-colors-${textColor})`
+            : 'var(--envive-colors-border-medium)'
+        }
       />
     );
   }
+
   if (theme === Theme.MODERN) {
+    if (variant === IconVariant.DEFAULT) {
+      return (
+        <CustomIcon
+          IconComponent={<SendModern />}
+          className="envive-tw-h-6 envive-tw-w-6"
+          fill={
+            textColor !== TypographyColor.TEXT_SECONDARY
+              ? `var(--envive-colors-${textColor})`
+              : 'var(--envive-colors-border-medium)'
+          }
+        />
+      );
+    }
     return (
       <CustomIcon
-        IconComponent={<SendModern />}
+        IconComponent={<SvgSendModern />}
         className="envive-tw-h-6 envive-tw-w-6"
-        fill="var(--envive-colors-border-medium)"
+        stroke={
+          textColor !== TypographyColor.TEXT_SECONDARY
+            ? `var(--envive-colors-${textColor})`
+            : 'var(--envive-colors-border-medium)'
+        }
       />
     );
   }
+
   if (theme === Theme.MINIMAL) {
+    if (variant === IconVariant.DEFAULT) {
+      return (
+        <CustomIcon
+          IconComponent={<SendMinimalist />}
+          className="envive-tw-h-6 envive-tw-w-6"
+          stroke={
+            textColor !== TypographyColor.TEXT_SECONDARY
+              ? `var(--envive-colors-${textColor})`
+              : 'var(--envive-colors-text-secondary)'
+          }
+        />
+      );
+    }
     return (
       <CustomIcon
         IconComponent={<SendMinimalist />}
         className="envive-tw-h-6 envive-tw-w-6"
-        stroke="var(--envive-colors-text-secondary)"
+        stroke={
+          textColor !== TypographyColor.TEXT_SECONDARY
+            ? `var(--envive-colors-${textColor})`
+            : 'var(--envive-colors-text-light)'
+        }
+      />
+    );
+  }
+
+  if (variant === IconVariant.DEFAULT) {
+    return (
+      <CustomIcon
+        IconComponent={<SendStandard />}
+        className="envive-tw-h-6 envive-tw-w-6"
+        fill={
+          textColor !== TypographyColor.TEXT_SECONDARY
+            ? `var(--envive-colors-${textColor})`
+            : 'var(--envive-colors-border-medium)'
+        }
       />
     );
   }
 
   return (
     <CustomIcon
-      IconComponent={<SendStandard />}
+      IconComponent={<SvgSendStandard />}
       className="envive-tw-h-6 envive-tw-w-6"
-      fill="var(--envive-colors-border-medium)"
+      fill={
+        textColor !== TypographyColor.TEXT_SECONDARY
+          ? `var(--envive-colors-${textColor})`
+          : 'var(--envive-colors-border-medium)'
+      }
     />
   );
 };

package/src/components/WidgetTextField/hooks/useGetContainerProperties.ts

@@ -7,12 +7,14 @@ export type UseGetContainerPropertiesProps = {
 
 export const useGetContainerProperties = ({ theme }: UseGetContainerPropertiesProps) => {
   const baseClassName =
-    'envive-tw-cursor-text envive-tw-border-[1px] envive-tw-border-solid envive-tw-border-border-light envive-tw-px-4 envive-tw-py-2';
+    'envive-tw-cursor-text envive-tw-border-solid envive-tw-px-4 envive-tw-py-2';
 
   const themeContainerClassName = useMemo(() => {
     const themeCotainerMap = {
-      [Theme.STANDARD]: 'envive-tw-rounded-global-custom',
-      [Theme.MODERN]: 'envive-tw-rounded-4',
+      [Theme.STANDARD]:
+        'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-global-custom',
+      [Theme.MODERN]: 'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-4',
+      [Theme.MINIMAL]: 'envive-tw-border-b-[1px] envive-tw-border-text-light',
     };
     return themeCotainerMap[theme] ?? '';
   }, [theme]);

package/src/components/WidgetTextField/types/types.ts

@@ -1,4 +1,5 @@
 import { Theme } from '../../../../tokens/theme/theme';
+import { TypographyColor } from '../../Typography/types';
 
 /**
  * Props for the WidgetTextField component.
@@ -33,10 +34,22 @@ export type WidgetTextFieldProps = {
   placeholder?: string;
   /** Accessible label for screen readers. If not provided, the placeholder will be used. */
   ariaLabel?: string;
+  /** Text color for the text field. */
+  textColor?: TypographyColor;
   /** Whether the text field is disabled. */
   disabled?: boolean;
+  /**
+   * Icon variant to choose whether to render an arrow or a search icon.
+   * @default IconVariant.DEFAULT
+   */
+  iconVariant?: IconVariant;
   /** Whether the text field is in a loading state. When true, displays a skeleton placeholder. */
   isLoading?: boolean;
   /** Callback function invoked when the text field is clicked or activated via keyboard. */
   onClick?: () => void;
 };
+
+export enum IconVariant {
+  DEFAULT = 'default',
+  SEARCH = 'search',
+}

package/src/components/utils/useDragToScroll.ts

@@ -0,0 +1,83 @@
+import { useEffect, useRef } from 'react';
+
+type DragDirection = 'x' | 'y';
+
+type UseDragToScrollOptions = {
+  direction: DragDirection;
+  isEnabled?: boolean;
+};
+
+/**
+ * Hook to enable drag-to-scroll on a container (mouse or touch).
+ * Uses the same ref as the scroll container so it can be composed with useHorizontalWheelScroll.
+ */
+export const useDragToScroll = (
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>,
+  options: UseDragToScrollOptions,
+) => {
+  const { direction, isEnabled = true } = options;
+  const dragRef = useRef({
+    isDragging: false,
+    startX: 0,
+    startY: 0,
+    startScrollLeft: 0,
+    startScrollTop: 0,
+  });
+
+  useEffect(() => {
+    if (!isEnabled || !scrollContainerRef.current) {
+      return undefined;
+    }
+
+    const container = scrollContainerRef.current;
+
+    const handlePointerDown = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      dragRef.current = {
+        isDragging: true,
+        startX: e.clientX,
+        startY: e.clientY,
+        startScrollLeft: container.scrollLeft,
+        startScrollTop: container.scrollTop,
+      };
+      container.setPointerCapture(e.pointerId);
+      container.style.cursor = 'grabbing';
+      container.style.userSelect = 'none';
+    };
+
+    const handlePointerMove = (e: PointerEvent) => {
+      const { isDragging, startX, startY, startScrollLeft, startScrollTop } = dragRef.current;
+      if (!isDragging) return;
+
+      e.preventDefault();
+      if (direction === 'x') {
+        container.scrollLeft = startScrollLeft + (startX - e.clientX);
+      } else {
+        container.scrollTop = startScrollTop + (startY - e.clientY);
+      }
+    };
+
+    const handlePointerUp = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      dragRef.current.isDragging = false;
+      container.releasePointerCapture(e.pointerId);
+      container.style.cursor = 'grab';
+      container.style.userSelect = '';
+    };
+
+    container.style.cursor = 'grab';
+
+    container.addEventListener('pointerdown', handlePointerDown);
+    container.addEventListener('pointermove', handlePointerMove, { passive: false });
+    container.addEventListener('pointerup', handlePointerUp);
+    container.addEventListener('pointercancel', handlePointerUp);
+
+    return () => {
+      container.removeEventListener('pointerdown', handlePointerDown);
+      container.removeEventListener('pointermove', handlePointerMove);
+      container.removeEventListener('pointerup', handlePointerUp);
+      container.removeEventListener('pointercancel', handlePointerUp);
+      container.style.cursor = '';
+    };
+  }, [isEnabled, direction, scrollContainerRef]);
+};

package/dist/PromptCarousel/components/BlockScrollContainer.cjs

@@ -1,23 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_useGetScrollProperties = require('../hooks/useGetScrollProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-
-//#region src/components/PromptCarousel/components/BlockScrollContainer.tsx
-const BlockScrollContainer = ({ children, scrollRef, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
-	const { scrollStyle, scrollClasses } = require_useGetScrollProperties.useGetScrollProperties();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: scrollRef,
-		className: (0, classnames.default)(...scrollClasses, className),
-		style: scrollStyle,
-		role: "group",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		tabIndex: 0,
-		children
-	});
-};
-
-//#endregion
-exports.BlockScrollContainer = BlockScrollContainer;

package/dist/PromptCarousel/components/BlockScrollContainer.js

@@ -1,21 +0,0 @@
-import { useGetScrollProperties } from "../hooks/useGetScrollProperties.js";
-import { jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-
-//#region src/components/PromptCarousel/components/BlockScrollContainer.tsx
-const BlockScrollContainer = ({ children, scrollRef, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
-	const { scrollStyle, scrollClasses } = useGetScrollProperties();
-	return /* @__PURE__ */ jsx("div", {
-		ref: scrollRef,
-		className: classNames(...scrollClasses, className),
-		style: scrollStyle,
-		role: "group",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		tabIndex: 0,
-		children
-	});
-};
-
-//#endregion
-export { BlockScrollContainer };

package/dist/PromptCarousel/components/ButtonContainerRow.cjs

@@ -1,34 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
-const require_useGetScrollProperties = require('../hooks/useGetScrollProperties.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-let classnames = require("classnames");
-classnames = require_rolldown_runtime.__toESM(classnames);
-
-//#region src/components/PromptCarousel/components/ButtonContainerRow.tsx
-const ButtonContainerRow = ({ children, scrollRef, stackRef, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
-	const { scrollStyle, scrollClasses } = require_useGetScrollProperties.useGetScrollProperties();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		ref: scrollRef,
-		className: (0, classnames.default)(...scrollClasses, className),
-		style: scrollStyle,
-		role: "group",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		tabIndex: 0,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			ref: stackRef,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
-				direction: "row",
-				align: "center",
-				gap: "2",
-				className: "envive-tw-h-full envive-tw-w-max envive-tw-whitespace-nowrap",
-				children
-			})
-		})
-	});
-};
-
-//#endregion
-exports.ButtonContainerRow = ButtonContainerRow;

package/dist/PromptCarousel/components/ButtonContainerRow.js

@@ -1,32 +0,0 @@
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
-import { useGetScrollProperties } from "../hooks/useGetScrollProperties.js";
-import { jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-
-//#region src/components/PromptCarousel/components/ButtonContainerRow.tsx
-const ButtonContainerRow = ({ children, scrollRef, stackRef, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
-	const { scrollStyle, scrollClasses } = useGetScrollProperties();
-	return /* @__PURE__ */ jsx("div", {
-		ref: scrollRef,
-		className: classNames(...scrollClasses, className),
-		style: scrollStyle,
-		role: "group",
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		tabIndex: 0,
-		children: /* @__PURE__ */ jsx("div", {
-			ref: stackRef,
-			children: /* @__PURE__ */ jsx(Stack, {
-				direction: "row",
-				align: "center",
-				gap: "2",
-				className: "envive-tw-h-full envive-tw-w-max envive-tw-whitespace-nowrap",
-				children
-			})
-		})
-	});
-};
-
-//#endregion
-export { ButtonContainerRow };

package/dist/PromptCarousel/components/CarouselContentWithBlockScroll.cjs

@@ -1,45 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
-const require_PromptCarousel_types_types = require('../types/types.cjs');
-const require_BlockScrollContainer = require('./BlockScrollContainer.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/components/PromptCarousel/components/CarouselContentWithBlockScroll.tsx
-const CarouselContentWithBlockScroll = ({ visibleButtonsFirstRow, visibleButtonsSecondRow, shouldShowTwoRows, renderButton, isAnimated, isAnimationStopped, blockScrollRef, blockFirstRowStackRef }) => {
-	const showRepetitions = isAnimated && isAnimationStopped;
-	const renderRowButtons = (buttons, startIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		buttons.map((text, index) => renderButton(text, startIndex + index)),
-		showRepetitions && buttons.map((text, index) => renderButton(text, startIndex + index, require_PromptCarousel_types_types.RepetitionNumberSuffix.TWO)),
-		showRepetitions && buttons.map((text, index) => renderButton(text, startIndex + index, require_PromptCarousel_types_types.RepetitionNumberSuffix.THREE))
-	] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BlockScrollContainer.BlockScrollContainer, {
-		scrollRef: blockScrollRef,
-		"aria-label": "Scrollable prompt buttons",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-			direction: "column",
-			gap: "2",
-			className: "envive-tw-w-max",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref: blockFirstRowStackRef,
-				role: shouldShowTwoRows ? "group" : void 0,
-				"aria-label": shouldShowTwoRows ? "First row of prompt buttons" : void 0,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
-					direction: "row",
-					gap: "2",
-					className: "envive-tw-whitespace-nowrap",
-					children: renderRowButtons(visibleButtonsFirstRow, 0)
-				})
-			}), shouldShowTwoRows && visibleButtonsSecondRow.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
-				direction: "row",
-				gap: "2",
-				className: "envive-tw-whitespace-nowrap",
-				"aria-label": "Second row of prompt buttons",
-				children: renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)
-			})]
-		})
-	});
-};
-
-//#endregion
-exports.CarouselContentWithBlockScroll = CarouselContentWithBlockScroll;

package/dist/PromptCarousel/components/CarouselContentWithBlockScroll.js

@@ -1,44 +0,0 @@
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
-import { RepetitionNumberSuffix } from "../types/types.js";
-import { BlockScrollContainer } from "./BlockScrollContainer.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/PromptCarousel/components/CarouselContentWithBlockScroll.tsx
-const CarouselContentWithBlockScroll = ({ visibleButtonsFirstRow, visibleButtonsSecondRow, shouldShowTwoRows, renderButton, isAnimated, isAnimationStopped, blockScrollRef, blockFirstRowStackRef }) => {
-	const showRepetitions = isAnimated && isAnimationStopped;
-	const renderRowButtons = (buttons, startIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
-		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 /* @__PURE__ */ jsx(BlockScrollContainer, {
-		scrollRef: blockScrollRef,
-		"aria-label": "Scrollable prompt buttons",
-		children: /* @__PURE__ */ jsxs(Stack, {
-			direction: "column",
-			gap: "2",
-			className: "envive-tw-w-max",
-			children: [/* @__PURE__ */ jsx("div", {
-				ref: blockFirstRowStackRef,
-				role: shouldShowTwoRows ? "group" : void 0,
-				"aria-label": shouldShowTwoRows ? "First row of prompt buttons" : void 0,
-				children: /* @__PURE__ */ jsx(Stack, {
-					direction: "row",
-					gap: "2",
-					className: "envive-tw-whitespace-nowrap",
-					children: renderRowButtons(visibleButtonsFirstRow, 0)
-				})
-			}), shouldShowTwoRows && visibleButtonsSecondRow.length > 0 && /* @__PURE__ */ jsx(Stack, {
-				direction: "row",
-				gap: "2",
-				className: "envive-tw-whitespace-nowrap",
-				"aria-label": "Second row of prompt buttons",
-				children: renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)
-			})]
-		})
-	});
-};
-
-//#endregion
-export { CarouselContentWithBlockScroll };

package/dist/PromptCarousel/components/CarouselContentWithRowScroll.cjs

@@ -1,33 +0,0 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
-const require_PromptCarousel_types_types = require('../types/types.cjs');
-const require_ButtonContainerRow = require('./ButtonContainerRow.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-
-//#region src/components/PromptCarousel/components/CarouselContentWithRowScroll.tsx
-const CarouselContentWithRowScroll = ({ visibleButtonsFirstRow, visibleButtonsSecondRow, shouldShowTwoRows, isAnimated, isAnimationStopped, renderButton, firstRowScrollRef, firstRowStackRef, secondRowScrollRef }) => {
-	const showRepetitions = isAnimated && !isAnimationStopped;
-	const renderRowButtons = (buttons, startIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-		buttons.map((text, index) => renderButton(text, startIndex + index)),
-		showRepetitions && buttons.map((text, index) => renderButton(text, startIndex + index, require_PromptCarousel_types_types.RepetitionNumberSuffix.TWO)),
-		showRepetitions && buttons.map((text, index) => renderButton(text, startIndex + index, require_PromptCarousel_types_types.RepetitionNumberSuffix.THREE))
-	] });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-		direction: "column",
-		gap: "2",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonContainerRow.ButtonContainerRow, {
-			scrollRef: firstRowScrollRef,
-			stackRef: firstRowStackRef,
-			"aria-label": shouldShowTwoRows ? "First row of prompt buttons" : void 0,
-			children: renderRowButtons(visibleButtonsFirstRow, 0)
-		}), shouldShowTwoRows && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonContainerRow.ButtonContainerRow, {
-			scrollRef: secondRowScrollRef,
-			"aria-label": "Second row of prompt buttons",
-			children: renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)
-		})]
-	});
-};
-
-//#endregion
-exports.CarouselContentWithRowScroll = CarouselContentWithRowScroll;

package/dist/PromptCarousel/components/CarouselContentWithRowScroll.js

@@ -1,32 +0,0 @@
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
-import { RepetitionNumberSuffix } from "../types/types.js";
-import { ButtonContainerRow } from "./ButtonContainerRow.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/PromptCarousel/components/CarouselContentWithRowScroll.tsx
-const CarouselContentWithRowScroll = ({ visibleButtonsFirstRow, visibleButtonsSecondRow, shouldShowTwoRows, isAnimated, isAnimationStopped, renderButton, firstRowScrollRef, firstRowStackRef, secondRowScrollRef }) => {
-	const showRepetitions = isAnimated && !isAnimationStopped;
-	const renderRowButtons = (buttons, startIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
-		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 /* @__PURE__ */ jsxs(Stack, {
-		direction: "column",
-		gap: "2",
-		children: [/* @__PURE__ */ jsx(ButtonContainerRow, {
-			scrollRef: firstRowScrollRef,
-			stackRef: firstRowStackRef,
-			"aria-label": shouldShowTwoRows ? "First row of prompt buttons" : void 0,
-			children: renderRowButtons(visibleButtonsFirstRow, 0)
-		}), shouldShowTwoRows && /* @__PURE__ */ jsx(ButtonContainerRow, {
-			scrollRef: secondRowScrollRef,
-			"aria-label": "Second row of prompt buttons",
-			children: renderRowButtons(visibleButtonsSecondRow, visibleButtonsFirstRow.length)
-		})]
-	});
-};
-
-//#endregion
-export { CarouselContentWithRowScroll };

package/dist/PromptCarousel/components/index.cjs

@@ -1,13 +0,0 @@
-const require_ButtonContainerRow = require('./ButtonContainerRow.cjs');
-const require_CarouselContentWithRowScroll = require('./CarouselContentWithRowScroll.cjs');
-const require_CarouselContentWithBlockScroll = require('./CarouselContentWithBlockScroll.cjs');
-
-//#region src/components/PromptCarousel/components/index.ts
-const PromptCarouselComponents = {
-	CarouselContentWithRowScroll: require_CarouselContentWithRowScroll.CarouselContentWithRowScroll,
-	CarouselContentWithBlockScroll: require_CarouselContentWithBlockScroll.CarouselContentWithBlockScroll,
-	ButtonContainerRow: require_ButtonContainerRow.ButtonContainerRow
-};
-
-//#endregion
-exports.PromptCarouselComponents = PromptCarouselComponents;

package/dist/PromptCarousel/components/index.js

@@ -1,13 +0,0 @@
-import { ButtonContainerRow } from "./ButtonContainerRow.js";
-import { CarouselContentWithRowScroll } from "./CarouselContentWithRowScroll.js";
-import { CarouselContentWithBlockScroll } from "./CarouselContentWithBlockScroll.js";
-
-//#region src/components/PromptCarousel/components/index.ts
-const PromptCarouselComponents = {
-	CarouselContentWithRowScroll,
-	CarouselContentWithBlockScroll,
-	ButtonContainerRow
-};
-
-//#endregion
-export { PromptCarouselComponents };