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

package/dist/ProductCard/components/Header.js

@@ -0,0 +1,41 @@
+import { AnimatedText } from "../../AnimatedText/AnimatedText.js";
+import "../../AnimatedText/index.js";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
+import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
+import { Typography } from "../../Typography/Typography.js";
+import "../../Typography/index.js";
+import { useGetHeaderProperties } from "../hooks/useGetHeaderProperties.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+
+//#region src/components/ProductCard/components/Header.tsx
+const Header = ({ headline, italicizeHeadline, animatedText, textTypingDuration, textTransition, loop }) => {
+	const { stackClasses, headlineClasses } = useGetHeaderProperties(italicizeHeadline);
+	const animatedTextWrapper = useCallback((text) => /* @__PURE__ */ jsx(Typography, {
+		variant: TypographyVariant.B3_MD,
+		color: TypographyColor.TEXT_LIGHT,
+		numberOfLines: 2,
+		children: text
+	}), []);
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: 1,
+		className: stackClasses,
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: TypographyVariant.H1_MD,
+			color: TypographyColor.TEXT_LIGHT,
+			className: headlineClasses,
+			numberOfLines: 2,
+			children: headline
+		}), animatedText.length > 0 && /* @__PURE__ */ jsx(AnimatedText, {
+			sequence: animatedText,
+			getNodeWrapper: animatedTextWrapper,
+			typingDuration: textTypingDuration,
+			transition: textTransition,
+			loop
+		})]
+	});
+};
+
+//#endregion
+export { Header };

package/dist/ProductCard/components/Poster.cjs

@@ -0,0 +1,18 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Container = require('../../Container/Container.cjs');
+require('../../Container/index.cjs');
+const require_useGetPosterProperties = require('../hooks/useGetPosterProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ProductCard/components/Poster.tsx
+const Poster = ({ children, imageSrc, fallbackColor }) => {
+	const { containerStyles, containerClasses } = require_useGetPosterProperties.useGetPosterProperties(imageSrc, fallbackColor);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Container.Container, {
+		className: containerClasses,
+		style: containerStyles,
+		children
+	});
+};
+
+//#endregion
+exports.Poster = Poster;

package/dist/ProductCard/components/Poster.js

@@ -0,0 +1,17 @@
+import { Container } from "../../Container/Container.js";
+import "../../Container/index.js";
+import { useGetPosterProperties } from "../hooks/useGetPosterProperties.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ProductCard/components/Poster.tsx
+const Poster = ({ children, imageSrc, fallbackColor }) => {
+	const { containerStyles, containerClasses } = useGetPosterProperties(imageSrc, fallbackColor);
+	return /* @__PURE__ */ jsx(Container, {
+		className: containerClasses,
+		style: containerStyles,
+		children
+	});
+};
+
+//#endregion
+export { Poster };

package/dist/ProductCard/components/index.cjs

@@ -0,0 +1,13 @@
+const require_Carousel = require('./Carousel.cjs');
+const require_Header = require('./Header.cjs');
+const require_Poster = require('./Poster.cjs');
+
+//#region src/components/ProductCard/components/index.ts
+const ProductCardWidgetComponents = {
+	Poster: require_Poster.Poster,
+	Header: require_Header.Header,
+	Carousel: require_Carousel.Carousel
+};
+
+//#endregion
+exports.ProductCardWidgetComponents = ProductCardWidgetComponents;

package/dist/ProductCard/components/index.js

@@ -0,0 +1,13 @@
+import { Carousel } from "./Carousel.js";
+import { Header } from "./Header.js";
+import { Poster } from "./Poster.js";
+
+//#region src/components/ProductCard/components/index.ts
+const ProductCardWidgetComponents = {
+	Poster,
+	Header,
+	Carousel
+};
+
+//#endregion
+export { ProductCardWidgetComponents };

package/dist/ProductCard/hooks/useGetCarouselProperties.cjs

@@ -0,0 +1,8 @@
+
+//#region src/components/ProductCard/hooks/useGetCarouselProperties.ts
+const useGetCarouselProperties = () => {
+	return { carouselClasses: "envive-tw-mb-4" };
+};
+
+//#endregion
+exports.useGetCarouselProperties = useGetCarouselProperties;

package/dist/ProductCard/hooks/useGetCarouselProperties.js

@@ -0,0 +1,7 @@
+//#region src/components/ProductCard/hooks/useGetCarouselProperties.ts
+const useGetCarouselProperties = () => {
+	return { carouselClasses: "envive-tw-mb-4" };
+};
+
+//#endregion
+export { useGetCarouselProperties };

package/dist/ProductCard/hooks/useGetHeaderProperties.cjs

@@ -0,0 +1,11 @@
+
+//#region src/components/ProductCard/hooks/useGetHeaderProperties.ts
+const useGetHeaderProperties = (italicizeHeadline) => {
+	return {
+		stackClasses: "envive-tw-mb-6",
+		headlineClasses: italicizeHeadline ? "envive-tw-italic" : ""
+	};
+};
+
+//#endregion
+exports.useGetHeaderProperties = useGetHeaderProperties;

package/dist/ProductCard/hooks/useGetHeaderProperties.js

@@ -0,0 +1,10 @@
+//#region src/components/ProductCard/hooks/useGetHeaderProperties.ts
+const useGetHeaderProperties = (italicizeHeadline) => {
+	return {
+		stackClasses: "envive-tw-mb-6",
+		headlineClasses: italicizeHeadline ? "envive-tw-italic" : ""
+	};
+};
+
+//#endregion
+export { useGetHeaderProperties };

package/dist/ProductCard/hooks/useGetPosterProperties.cjs

@@ -0,0 +1,13 @@
+
+//#region src/components/ProductCard/hooks/useGetPosterProperties.ts
+const OVERLAY_OPACITY = "60";
+const useGetPosterProperties = (imageSrc, fallbackColor) => {
+	const overlayColor = `#000000${OVERLAY_OPACITY}`;
+	return {
+		containerStyles: { background: imageSrc ? `linear-gradient(${overlayColor}, ${overlayColor}) 0% 0%/cover, url('${imageSrc}') 50% 0%/cover` : fallbackColor || "black" },
+		containerClasses: "envive-tw-px-4 envive-tw-py-10 envive-tw-w-full envive-tw-h-full envive-tw-flex envive-tw-flex-col envive-tw-justify-center"
+	};
+};
+
+//#endregion
+exports.useGetPosterProperties = useGetPosterProperties;

package/dist/ProductCard/hooks/useGetPosterProperties.js

@@ -0,0 +1,12 @@
+//#region src/components/ProductCard/hooks/useGetPosterProperties.ts
+const OVERLAY_OPACITY = "60";
+const useGetPosterProperties = (imageSrc, fallbackColor) => {
+	const overlayColor = `#000000${OVERLAY_OPACITY}`;
+	return {
+		containerStyles: { background: imageSrc ? `linear-gradient(${overlayColor}, ${overlayColor}) 0% 0%/cover, url('${imageSrc}') 50% 0%/cover` : fallbackColor || "black" },
+		containerClasses: "envive-tw-px-4 envive-tw-py-10 envive-tw-w-full envive-tw-h-full envive-tw-flex envive-tw-flex-col envive-tw-justify-center"
+	};
+};
+
+//#endregion
+export { useGetPosterProperties };

package/dist/ProductCard/index.cjs

@@ -0,0 +1,3 @@
+const require_ProductCard = require('./ProductCard.cjs');
+
+exports.ProductCard = require_ProductCard.ProductCard;

package/dist/ProductCard/index.d.cts

@@ -0,0 +1,3 @@
+import { ProductCardProps } from "./types/index.cjs";
+import { ProductCard } from "./ProductCard.cjs";
+export { ProductCard, type ProductCardProps };

package/dist/ProductCard/index.d.ts

@@ -0,0 +1,3 @@
+import { ProductCardProps } from "./types/index.js";
+import { ProductCard } from "./ProductCard.js";
+export { ProductCard, type ProductCardProps };

package/dist/ProductCard/index.js

@@ -0,0 +1,3 @@
+import { ProductCard } from "./ProductCard.js";
+
+export { ProductCard };

package/dist/ProductCard/types/index.d.cts

@@ -0,0 +1,74 @@
+import { Theme } from "../../tokens/theme/theme.cjs";
+import { PromptButtonVariant } from "../../PromptButton/types/index.cjs";
+import React from "react";
+
+//#region src/components/ProductCard/types/index.d.ts
+
+/**
+ * Props for the Carousel component.
+ */
+interface CarouselProps {
+  /** Visual theme configuration for styling the carousel. */
+  theme: Theme;
+  /** Array of prompt strings to display in the carousel. */
+  prompts: string[];
+  /** Visual variant/style of the prompt buttons. */
+  promptButtonType: PromptButtonVariant;
+  /** Unique identifier for the carousel instance. */
+  carouselId: string;
+  /**
+   * Callback function invoked when a prompt is selected.
+   */
+  onSelect: (prompt: string) => void;
+}
+/**
+ * Props for the Header component.
+ */
+interface HeaderProps {
+  /** Main headline text to display. */
+  headline: string;
+  /** Whether to apply italic styling to the headline. */
+  italicizeHeadline?: boolean;
+  /** Array of text strings to animate/type. */
+  animatedText: string[];
+  /** Duration in milliseconds for the typing animation. */
+  textTypingDuration?: number;
+  /** Duration in milliseconds for text transitions. */
+  textTransition?: number;
+  /** Whether the animation should loop continuously. */
+  loop?: boolean;
+}
+/**
+ * Props for the Poster component.
+ */
+interface PosterProps {
+  /** React node(s) to render as children. */
+  children?: React.ReactNode;
+  /** Source URL or path for the poster image. */
+  imageSrc: string;
+  /** Fallback background color to display if the image fails to load. */
+  fallbackColor?: string;
+}
+/**
+ * Props for the Input component.
+ */
+interface InputProps {
+  /** Visual theme configuration for styling the input. */
+  theme: Theme;
+  /** Callback function invoked when the input is clicked. */
+  onInputClick: () => void;
+  /** Placeholder text displayed in the input field. */
+  placeholder?: string;
+}
+/**
+ * Props for the InputIcon component.
+ */
+
+/**
+ * Props for the ProductCard component.
+ * Combines props from Input, Carousel, Header, and Poster components.
+ * Excludes the 'children' prop from PosterProps.
+ */
+interface ProductCardProps extends InputProps, CarouselProps, HeaderProps, Omit<PosterProps, 'children'> {}
+//#endregion
+export { ProductCardProps };

package/dist/ProductCard/types/index.d.ts

@@ -0,0 +1,74 @@
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { PromptButtonVariant } from "../../PromptButton/types/index.js";
+import React from "react";
+
+//#region src/components/ProductCard/types/index.d.ts
+
+/**
+ * Props for the Carousel component.
+ */
+interface CarouselProps {
+  /** Visual theme configuration for styling the carousel. */
+  theme: Theme;
+  /** Array of prompt strings to display in the carousel. */
+  prompts: string[];
+  /** Visual variant/style of the prompt buttons. */
+  promptButtonType: PromptButtonVariant;
+  /** Unique identifier for the carousel instance. */
+  carouselId: string;
+  /**
+   * Callback function invoked when a prompt is selected.
+   */
+  onSelect: (prompt: string) => void;
+}
+/**
+ * Props for the Header component.
+ */
+interface HeaderProps {
+  /** Main headline text to display. */
+  headline: string;
+  /** Whether to apply italic styling to the headline. */
+  italicizeHeadline?: boolean;
+  /** Array of text strings to animate/type. */
+  animatedText: string[];
+  /** Duration in milliseconds for the typing animation. */
+  textTypingDuration?: number;
+  /** Duration in milliseconds for text transitions. */
+  textTransition?: number;
+  /** Whether the animation should loop continuously. */
+  loop?: boolean;
+}
+/**
+ * Props for the Poster component.
+ */
+interface PosterProps {
+  /** React node(s) to render as children. */
+  children?: React.ReactNode;
+  /** Source URL or path for the poster image. */
+  imageSrc: string;
+  /** Fallback background color to display if the image fails to load. */
+  fallbackColor?: string;
+}
+/**
+ * Props for the Input component.
+ */
+interface InputProps {
+  /** Visual theme configuration for styling the input. */
+  theme: Theme;
+  /** Callback function invoked when the input is clicked. */
+  onInputClick: () => void;
+  /** Placeholder text displayed in the input field. */
+  placeholder?: string;
+}
+/**
+ * Props for the InputIcon component.
+ */
+
+/**
+ * Props for the ProductCard component.
+ * Combines props from Input, Carousel, Header, and Poster components.
+ * Excludes the 'children' prop from PosterProps.
+ */
+interface ProductCardProps extends InputProps, CarouselProps, HeaderProps, Omit<PosterProps, 'children'> {}
+//#endregion
+export { ProductCardProps };

package/dist/PromptButton/PromptButton.cjs

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../tokens/theme/theme.cjs');
+const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
 const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_index = require('./components/index.cjs');
 const require_functions = require('./utils/functions.cjs');

package/dist/PromptButton/PromptButton.d.cts

@@ -1,5 +1,5 @@
 import { PromptButtonProps } from "./types/index.cjs";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/components/PromptButton/PromptButton.d.ts
 declare const PromptButton: ({
@@ -16,6 +16,6 @@ declare const PromptButton: ({
   onClick,
   ariaLabel,
   ariaDescribedBy
-}: PromptButtonProps) => react_jsx_runtime17.JSX.Element;
+}: PromptButtonProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 export { PromptButton };

package/dist/PromptButton/PromptButton.d.ts

@@ -1,5 +1,5 @@
 import { PromptButtonProps } from "./types/index.js";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/components/PromptButton/PromptButton.d.ts
 declare const PromptButton: ({
@@ -16,6 +16,6 @@ declare const PromptButton: ({
   onClick,
   ariaLabel,
   ariaDescribedBy
-}: PromptButtonProps) => react_jsx_runtime14.JSX.Element;
+}: PromptButtonProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 export { PromptButton };

package/dist/PromptButton/PromptButton.js

@@ -1,4 +1,4 @@
-import { Theme } from "../tokens/theme/theme.js";
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
 import { PromptButtonComponents } from "./components/index.js";
 import { shouldShowIcon } from "./utils/functions.js";

package/dist/PromptButton/hooks/useGetIconColorsProperties.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_PromptButton_types_index = require('../types/index.cjs');
 

package/dist/PromptButton/hooks/useGetIconColorsProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../../utils/resolveTheme.js";
 import { PromptButtonVariant } from "../types/index.js";
 

package/dist/PromptButton/types/index.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/PromptButton/types/index.d.ts
 

package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.cjs

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../tokens/theme/theme.cjs');
+const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
 const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_index = require('./components/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -7,7 +7,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.tsx
 const PromptButtonCarouselWithImage = ({ id, testId, className, style, theme = require_theme.Theme.GLOBAL_CUSTOM, imageSrc, alt, isLoading, hideTextField, title, promptButtonsTexts, promptButtonType, handlePromptButtonClick, textFieldPlaceholder, handleTextFieldClick }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
-	if (promptButtonsTexts && promptButtonsTexts?.length !== 3) throw new Error("PromptButtonsCarouselWithImage: promptButtonsTexts must be equal to 3");
+	if (promptButtonsTexts && promptButtonsTexts?.length < 3) throw new Error("PromptButtonsCarouselWithImage: promptButtonsTexts must have at least 3 items");
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.PromptButtonCarouselWithImageComponents.Layout, {
 		id,
 		testId,
@@ -17,6 +17,7 @@ const PromptButtonCarouselWithImage = ({ id, testId, className, style, theme = r
 		textField: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.PromptButtonCarouselWithImageComponents.TextField, {
 			isLoading,
 			placeholder: textFieldPlaceholder,
+			className: finalTheme === require_theme.Theme.MINIMAL ? "!envive-tw-border-border-medium" : void 0,
 			onClick: () => handleTextFieldClick(textFieldPlaceholder),
 			theme: finalTheme
 		}),
@@ -28,7 +29,7 @@ const PromptButtonCarouselWithImage = ({ id, testId, className, style, theme = r
 		promptButtons: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.PromptButtonCarouselWithImageComponents.PromptButtonsCarousel, {
 			theme: finalTheme,
 			isLoading,
-			promptButtonsTexts,
+			promptButtonsTexts: promptButtonsTexts || [],
 			promptButtonType,
 			handlePromptButtonClick
 		}),

package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.cts

@@ -1,5 +1,5 @@
 import { PromptButtonCarouselWithImageProps } from "./types/types.cjs";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.ts
 declare const PromptButtonCarouselWithImage: ({
@@ -18,6 +18,6 @@ declare const PromptButtonCarouselWithImage: ({
   handlePromptButtonClick,
   textFieldPlaceholder,
   handleTextFieldClick
-}: PromptButtonCarouselWithImageProps) => react_jsx_runtime12.JSX.Element;
+}: PromptButtonCarouselWithImageProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 export { PromptButtonCarouselWithImage };

package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.ts

@@ -1,5 +1,5 @@
 import { PromptButtonCarouselWithImageProps } from "./types/types.js";
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.d.ts
 declare const PromptButtonCarouselWithImage: ({
@@ -18,6 +18,6 @@ declare const PromptButtonCarouselWithImage: ({
   handlePromptButtonClick,
   textFieldPlaceholder,
   handleTextFieldClick
-}: PromptButtonCarouselWithImageProps) => react_jsx_runtime18.JSX.Element;
+}: PromptButtonCarouselWithImageProps) => react_jsx_runtime9.JSX.Element;
 //#endregion
 export { PromptButtonCarouselWithImage };

package/dist/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.js

@@ -1,4 +1,4 @@
-import { Theme } from "../tokens/theme/theme.js";
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
 import { PromptButtonCarouselWithImageComponents } from "./components/index.js";
 import { jsx } from "react/jsx-runtime";
@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/PromptButtonCarouselWithImage/PromptButtonCarouselWithImage.tsx
 const PromptButtonCarouselWithImage = ({ id, testId, className, style, theme = Theme.GLOBAL_CUSTOM, imageSrc, alt, isLoading, hideTextField, title, promptButtonsTexts, promptButtonType, handlePromptButtonClick, textFieldPlaceholder, handleTextFieldClick }) => {
 	const finalTheme = resolveTheme(theme);
-	if (promptButtonsTexts && promptButtonsTexts?.length !== 3) throw new Error("PromptButtonsCarouselWithImage: promptButtonsTexts must be equal to 3");
+	if (promptButtonsTexts && promptButtonsTexts?.length < 3) throw new Error("PromptButtonsCarouselWithImage: promptButtonsTexts must have at least 3 items");
 	return /* @__PURE__ */ jsx(PromptButtonCarouselWithImageComponents.Layout, {
 		id,
 		testId,
@@ -16,6 +16,7 @@ const PromptButtonCarouselWithImage = ({ id, testId, className, style, theme = T
 		textField: /* @__PURE__ */ jsx(PromptButtonCarouselWithImageComponents.TextField, {
 			isLoading,
 			placeholder: textFieldPlaceholder,
+			className: finalTheme === Theme.MINIMAL ? "!envive-tw-border-border-medium" : void 0,
 			onClick: () => handleTextFieldClick(textFieldPlaceholder),
 			theme: finalTheme
 		}),
@@ -27,7 +28,7 @@ const PromptButtonCarouselWithImage = ({ id, testId, className, style, theme = T
 		promptButtons: /* @__PURE__ */ jsx(PromptButtonCarouselWithImageComponents.PromptButtonsCarousel, {
 			theme: finalTheme,
 			isLoading,
-			promptButtonsTexts,
+			promptButtonsTexts: promptButtonsTexts || [],
 			promptButtonType,
 			handlePromptButtonClick
 		}),

package/dist/PromptButtonCarouselWithImage/components/Layout.cjs

@@ -5,8 +5,9 @@ const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 const require_useGetContentSize = require('../../utils/useGetContentSize.cjs');
 const require_functions = require('../../SocialProof/utils/functions.cjs');
 const require_useHorizontalWheelScroll = require('../../utils/useHorizontalWheelScroll.cjs');
-let react = require("react");
+const require_useDragToScroll = require('../../utils/useDragToScroll.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 
@@ -15,6 +16,10 @@ const Layout = ({ id, testId, className, style, title, promptButtons, image, tex
 	const { isMobile } = require_useCheckIsMobile.useCheckIsMobile();
 	const { height, ref: contentSizeRef } = require_useGetContentSize.useGetContentSize({ heightDefault: 245 });
 	const wheelScrollRef = require_useHorizontalWheelScroll.useHorizontalWheelScroll(!isMobile);
+	require_useDragToScroll.useDragToScroll(wheelScrollRef, {
+		direction: isMobile ? "y" : "x",
+		isEnabled: true
+	});
 	const combinedRef = (node) => {
 		contentSizeRef.current = node;
 		wheelScrollRef.current = node;
@@ -41,10 +46,10 @@ const Layout = ({ id, testId, className, style, title, promptButtons, image, tex
 						scrollbarWidth: "none"
 					},
 					gap: 4,
-					className: (0, classnames.default)("[&::-webkit-scrollbar]:hidden envive-tw-h-fit envive-tw-scroll-smooth", isMobile ? "envive-tw-w-full envive-tw-overflow-y-auto" : "envive-tw-overflow-x-auto", isMobile || hideTextField ? "envive-tw-w-full" : "envive-tw-max-w-[300px] md:envive-tw-max-w-[450px] lg:envive-tw-max-w-[700px]"),
+					className: (0, classnames.default)("[&::-webkit-scrollbar]:hidden envive-tw-h-fit", isMobile ? "envive-tw-w-full envive-tw-overflow-y-auto" : "envive-tw-overflow-x-auto", isMobile || hideTextField ? "envive-tw-w-full" : "envive-tw-max-w-[300px] md:envive-tw-max-w-[450px] lg:envive-tw-max-w-[900px]"),
 					children: promptButtons
 				})]
-			}), !hideTextField && (0, react.cloneElement)(textField, { className: isMobile ? "envive-tw-w-full" : "envive-tw-min-w-[276px]" })]
+			}), !hideTextField && (0, react.isValidElement)(textField) && (0, react.cloneElement)(textField, { className: (0, classnames.default)(isMobile ? "envive-tw-w-full" : "envive-tw-min-w-[276px]", textField.props.className) })]
 		})]
 	});
 };

package/dist/PromptButtonCarouselWithImage/components/Layout.js

@@ -4,8 +4,9 @@ import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
 import { useGetContentSize } from "../../utils/useGetContentSize.js";
 import { calculateWidthImageGallery } from "../../SocialProof/utils/functions.js";
 import { useHorizontalWheelScroll } from "../../utils/useHorizontalWheelScroll.js";
-import { cloneElement } from "react";
+import { useDragToScroll } from "../../utils/useDragToScroll.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
 import classNames from "classnames";
 
 //#region src/components/PromptButtonCarouselWithImage/components/Layout.tsx
@@ -13,6 +14,10 @@ const Layout = ({ id, testId, className, style, title, promptButtons, image, tex
 	const { isMobile } = useCheckIsMobile();
 	const { height, ref: contentSizeRef } = useGetContentSize({ heightDefault: 245 });
 	const wheelScrollRef = useHorizontalWheelScroll(!isMobile);
+	useDragToScroll(wheelScrollRef, {
+		direction: isMobile ? "y" : "x",
+		isEnabled: true
+	});
 	const combinedRef = (node) => {
 		contentSizeRef.current = node;
 		wheelScrollRef.current = node;
@@ -39,10 +44,10 @@ const Layout = ({ id, testId, className, style, title, promptButtons, image, tex
 						scrollbarWidth: "none"
 					},
 					gap: 4,
-					className: classNames("[&::-webkit-scrollbar]:hidden envive-tw-h-fit envive-tw-scroll-smooth", isMobile ? "envive-tw-w-full envive-tw-overflow-y-auto" : "envive-tw-overflow-x-auto", isMobile || hideTextField ? "envive-tw-w-full" : "envive-tw-max-w-[300px] md:envive-tw-max-w-[450px] lg:envive-tw-max-w-[700px]"),
+					className: classNames("[&::-webkit-scrollbar]:hidden envive-tw-h-fit", isMobile ? "envive-tw-w-full envive-tw-overflow-y-auto" : "envive-tw-overflow-x-auto", isMobile || hideTextField ? "envive-tw-w-full" : "envive-tw-max-w-[300px] md:envive-tw-max-w-[450px] lg:envive-tw-max-w-[900px]"),
 					children: promptButtons
 				})]
-			}), !hideTextField && cloneElement(textField, { className: isMobile ? "envive-tw-w-full" : "envive-tw-min-w-[276px]" })]
+			}), !hideTextField && isValidElement(textField) && cloneElement(textField, { className: classNames(isMobile ? "envive-tw-w-full" : "envive-tw-min-w-[276px]", textField.props.className) })]
 		})]
 	});
 };