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

package/dist/Message/components/AgentContent.js

@@ -1,14 +1,18 @@
-import { MarkdownProcessor } from "../../MarkdownProcessor/MarkdownProcessor.js";
 import { LoadingSkeleton } from "./LoadingSkeleton.js";
+import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Message/components/AgentContent.tsx
+const MarkdownProcessor = lazy(async () => ({ default: (await import("../../MarkdownProcessor/MarkdownProcessor.js")).MarkdownProcessor }));
 /**
 * Component that renders the message content for the agent.
 */
 const AgentContent = ({ content, isLoading = false }) => {
 	if (isLoading) return /* @__PURE__ */ jsx(LoadingSkeleton, {});
-	return /* @__PURE__ */ jsx(MarkdownProcessor, { content });
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(LoadingSkeleton, {}),
+		children: /* @__PURE__ */ jsx(MarkdownProcessor, { content })
+	});
 };
 
 //#endregion

package/dist/Message/components/LinkButton.cjs

@@ -1,8 +1,8 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_CustomIcon = require('../../utils/CustomIcon.cjs');
 const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
-const require_CustomIcon = require('../../utils/CustomIcon.cjs');
 const require_useGetLinkButtonProperties = require('../hooks/useGetLinkButtonProperties.cjs');
 const require_useGetLinkButtonIconProperties = require('../hooks/useGetLinkButtonIconProperties.cjs');
 const require_openUrlInNewTab = require('../utils/openUrlInNewTab.cjs');
@@ -15,7 +15,7 @@ __envive_ai_react_icons_VectorUpRight = require_rolldown_runtime.__toESM(__enviv
 * Component that renders an external link with an icon.
 * Uses an inline span with button role for better accessibility and inline text flow.
 */
-const LinkButton = ({ url, text }) => {
+const LinkButton = ({ url, text, typographyColor }) => {
 	const { containerClasses } = require_useGetLinkButtonProperties.useGetLinkButtonProperties();
 	const { iconContainerClasses } = require_useGetLinkButtonIconProperties.useGetLinkButtonIconProperties();
 	const handleClick = () => {
@@ -32,7 +32,7 @@ const LinkButton = ({ url, text }) => {
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography.Typography, {
 			variant: require_index.TypographyVariant.B3_MD,
-			color: require_index.TypographyColor.TEXT_PRIMARY,
+			color: typographyColor ?? require_index.TypographyColor.TEXT_PRIMARY,
 			className: "envive-tw-inline",
 			children: [
 				text,

package/dist/Message/components/LinkButton.d.cts

@@ -1,7 +1,10 @@
+import { TypographyColor } from "../../Typography/types/index.cjs";
+
 //#region src/components/Message/components/LinkButton.d.ts
 type LinkButtonProps = {
   url: string;
   text: string;
+  typographyColor?: TypographyColor;
 };
 /**
  * Component that renders an external link with an icon.
@@ -9,7 +12,8 @@ type LinkButtonProps = {
  */
 declare const LinkButton: ({
   url,
-  text
+  text,
+  typographyColor
 }: LinkButtonProps) => React.ReactNode;
 //#endregion
 export { LinkButton };

package/dist/Message/components/LinkButton.d.ts

@@ -1,7 +1,10 @@
+import { TypographyColor } from "../../Typography/types/index.js";
+
 //#region src/components/Message/components/LinkButton.d.ts
 type LinkButtonProps = {
   url: string;
   text: string;
+  typographyColor?: TypographyColor;
 };
 /**
  * Component that renders an external link with an icon.
@@ -9,7 +12,8 @@ type LinkButtonProps = {
  */
 declare const LinkButton: ({
   url,
-  text
+  text,
+  typographyColor
 }: LinkButtonProps) => React.ReactNode;
 //#endregion
 export { LinkButton };

package/dist/Message/components/LinkButton.js

@@ -1,7 +1,7 @@
+import { CustomIcon } from "../../utils/CustomIcon.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
-import { CustomIcon } from "../../utils/CustomIcon.js";
 import { useGetLinkButtonProperties } from "../hooks/useGetLinkButtonProperties.js";
 import { useGetLinkButtonIconProperties } from "../hooks/useGetLinkButtonIconProperties.js";
 import { openUrlInNewTab } from "../utils/openUrlInNewTab.js";
@@ -13,7 +13,7 @@ import VectorUpRight from "@envive-ai/react-icons/VectorUpRight";
 * Component that renders an external link with an icon.
 * Uses an inline span with button role for better accessibility and inline text flow.
 */
-const LinkButton = ({ url, text }) => {
+const LinkButton = ({ url, text, typographyColor }) => {
 	const { containerClasses } = useGetLinkButtonProperties();
 	const { iconContainerClasses } = useGetLinkButtonIconProperties();
 	const handleClick = () => {
@@ -30,7 +30,7 @@ const LinkButton = ({ url, text }) => {
 		},
 		children: /* @__PURE__ */ jsxs(Typography, {
 			variant: TypographyVariant.B3_MD,
-			color: TypographyColor.TEXT_PRIMARY,
+			color: typographyColor ?? TypographyColor.TEXT_PRIMARY,
 			className: "envive-tw-inline",
 			children: [
 				text,

package/dist/Message/hooks/useGetLinkButtonProperties.cjs

@@ -7,7 +7,7 @@ let react = require("react");
 */
 const useGetLinkButtonProperties = () => {
 	return { containerClasses: (0, react.useMemo)(() => {
-		return `envive-tw-inline envive-tw-align-middle envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group envive-tw-transition-all envive-tw-duration-200`;
+		return `envive-tw-inline envive-tw-align-top envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group envive-tw-transition-all envive-tw-duration-200`;
 	}, []) };
 };
 

package/dist/Message/hooks/useGetLinkButtonProperties.js

@@ -6,7 +6,7 @@ import { useMemo } from "react";
 */
 const useGetLinkButtonProperties = () => {
 	return { containerClasses: useMemo(() => {
-		return `envive-tw-inline envive-tw-align-middle envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group envive-tw-transition-all envive-tw-duration-200`;
+		return `envive-tw-inline envive-tw-align-top envive-tw-cursor-pointer hover:envive-tw-underline envive-tw-group envive-tw-transition-all envive-tw-duration-200`;
 	}, []) };
 };
 

package/dist/OrderLookupCard/OrderLookupCard.cjs

@@ -1,8 +1,8 @@
 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_Stack = require('../Stack/Stack.cjs');
 require('../Stack/index.cjs');
-const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_useGetImageBorderRadiusProperties = require('./hooks/useGetImageBorderRadiusProperties.cjs');
 const require_index = require('./components/index.cjs');
 const require_useGetContainerProperties = require('./hooks/useGetContainerProperties.cjs');

package/dist/OrderLookupCard/OrderLookupCard.js

@@ -1,7 +1,7 @@
-import { Theme } from "../tokens/theme/theme.js";
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
+import { resolveTheme } from "../utils/resolveTheme.js";
 import { Stack } from "../Stack/Stack.js";
 import "../Stack/index.js";
-import { resolveTheme } from "../utils/resolveTheme.js";
 import { useGetImageBorderRadiusProperties } from "./hooks/useGetImageBorderRadiusProperties.js";
 import { OrderLookupCardComponents } from "./components/index.js";
 import { useGetContainerProperties } from "./hooks/useGetContainerProperties.js";

package/dist/OrderLookupCard/hooks/useGetContainerProperties.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 
 //#region src/components/OrderLookupCard/hooks/useGetContainerProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetContainerProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/OrderLookupCard/hooks/useGetContainerProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetImageBorderRadiusProperties.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 
 //#region src/components/OrderLookupCard/hooks/useGetImageBorderRadiusProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetImageBorderRadiusProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/OrderLookupCard/hooks/useGetImageBorderRadiusProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetStatusLabelProperties.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 
 //#region src/components/OrderLookupCard/hooks/useGetStatusLabelProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetStatusLabelProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/OrderLookupCard/hooks/useGetStatusLabelProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetTrackOrderLinkProperties.cjs

@@ -1,4 +1,4 @@
-const require_theme = require('../../tokens/theme/theme.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 
 //#region src/components/OrderLookupCard/hooks/useGetTrackOrderLinkProperties.ts
 /**

package/dist/OrderLookupCard/hooks/useGetTrackOrderLinkProperties.js

@@ -1,4 +1,4 @@
-import { Theme } from "../../tokens/theme/theme.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/OrderLookupCard/hooks/useGetTrackOrderLinkProperties.ts
 /**

package/dist/OrderLookupCard/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/OrderLookupCard/types/index.d.ts
 

package/dist/ProductCard/ProductCard.cjs

@@ -0,0 +1,43 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
+require('../Tokens/index.cjs');
+const require_resolveTheme = require('../utils/resolveTheme.cjs');
+const require_WidgetTextField = require('../WidgetTextField/WidgetTextField.cjs');
+require('../WidgetTextField/index.cjs');
+const require_index = require('./components/index.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ProductCard/ProductCard.tsx
+const ProductCard = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, imageSrc, headline, italicizeHeadline, animatedText, prompts, promptButtonType, carouselId, fallbackColor, placeholder, textTypingDuration, textTransition, loop, onSelect, onInputClick }) => {
+	const resolvedTheme = require_resolveTheme.resolveTheme(theme);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_index.ProductCardWidgetComponents.Poster, {
+		imageSrc,
+		fallbackColor,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ProductCardWidgetComponents.Header, {
+				headline,
+				italicizeHeadline,
+				animatedText,
+				textTypingDuration,
+				textTransition,
+				loop
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ProductCardWidgetComponents.Carousel, {
+				theme: resolvedTheme,
+				carouselId,
+				prompts,
+				promptButtonType,
+				onSelect
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
+				theme: resolvedTheme,
+				placeholder,
+				onClick: onInputClick,
+				className: "envive-tw-bg-background-light"
+			})
+		]
+	});
+};
+
+//#endregion
+exports.ProductCard = ProductCard;

package/dist/ProductCard/ProductCard.d.cts

@@ -0,0 +1,23 @@
+import { ProductCardProps } from "./types/index.cjs";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
+
+//#region src/components/ProductCard/ProductCard.d.ts
+declare const ProductCard: ({
+  theme,
+  imageSrc,
+  headline,
+  italicizeHeadline,
+  animatedText,
+  prompts,
+  promptButtonType,
+  carouselId,
+  fallbackColor,
+  placeholder,
+  textTypingDuration,
+  textTransition,
+  loop,
+  onSelect,
+  onInputClick
+}: ProductCardProps) => react_jsx_runtime24.JSX.Element;
+//#endregion
+export { ProductCard };

package/dist/ProductCard/ProductCard.d.ts

@@ -0,0 +1,23 @@
+import { ProductCardProps } from "./types/index.js";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/components/ProductCard/ProductCard.d.ts
+declare const ProductCard: ({
+  theme,
+  imageSrc,
+  headline,
+  italicizeHeadline,
+  animatedText,
+  prompts,
+  promptButtonType,
+  carouselId,
+  fallbackColor,
+  placeholder,
+  textTypingDuration,
+  textTransition,
+  loop,
+  onSelect,
+  onInputClick
+}: ProductCardProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+export { ProductCard };

package/dist/ProductCard/ProductCard.js

@@ -0,0 +1,42 @@
+import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
+import "../Tokens/index.js";
+import { resolveTheme } from "../utils/resolveTheme.js";
+import { WidgetTextField } from "../WidgetTextField/WidgetTextField.js";
+import "../WidgetTextField/index.js";
+import { ProductCardWidgetComponents } from "./components/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ProductCard/ProductCard.tsx
+const ProductCard = ({ theme = Theme.GLOBAL_CUSTOM, imageSrc, headline, italicizeHeadline, animatedText, prompts, promptButtonType, carouselId, fallbackColor, placeholder, textTypingDuration, textTransition, loop, onSelect, onInputClick }) => {
+	const resolvedTheme = resolveTheme(theme);
+	return /* @__PURE__ */ jsxs(ProductCardWidgetComponents.Poster, {
+		imageSrc,
+		fallbackColor,
+		children: [
+			/* @__PURE__ */ jsx(ProductCardWidgetComponents.Header, {
+				headline,
+				italicizeHeadline,
+				animatedText,
+				textTypingDuration,
+				textTransition,
+				loop
+			}),
+			/* @__PURE__ */ jsx(ProductCardWidgetComponents.Carousel, {
+				theme: resolvedTheme,
+				carouselId,
+				prompts,
+				promptButtonType,
+				onSelect
+			}),
+			/* @__PURE__ */ jsx(WidgetTextField, {
+				theme: resolvedTheme,
+				placeholder,
+				onClick: onInputClick,
+				className: "envive-tw-bg-background-light"
+			})
+		]
+	});
+};
+
+//#endregion
+export { ProductCard };

package/dist/ProductCard/components/Carousel.cjs

@@ -0,0 +1,25 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
+const require_PromptCarousel_types_types = require('../../PromptCarousel/types/types.cjs');
+const require_PromptCarousel = require('../../PromptCarousel/PromptCarousel.cjs');
+require('../../PromptCarousel/index.cjs');
+const require_useGetCarouselProperties = require('../hooks/useGetCarouselProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ProductCard/components/Carousel.tsx
+const Carousel = ({ theme, carouselId, prompts, promptButtonType, onSelect }) => {
+	const resolvedTheme = require_resolveTheme.resolveTheme(theme);
+	const { carouselClasses } = require_useGetCarouselProperties.useGetCarouselProperties();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PromptCarousel.PromptCarousel, {
+		className: carouselClasses,
+		handleButtonClick: onSelect,
+		id: carouselId,
+		promptCarouselRows: require_PromptCarousel_types_types.PromptCarouselRows.ALWAYS_TWO,
+		theme: resolvedTheme,
+		promptButtonType,
+		promptButtonTexts: prompts
+	});
+};
+
+//#endregion
+exports.Carousel = Carousel;

package/dist/ProductCard/components/Carousel.js

@@ -0,0 +1,24 @@
+import { resolveTheme } from "../../utils/resolveTheme.js";
+import { PromptCarouselRows } from "../../PromptCarousel/types/types.js";
+import { PromptCarousel } from "../../PromptCarousel/PromptCarousel.js";
+import "../../PromptCarousel/index.js";
+import { useGetCarouselProperties } from "../hooks/useGetCarouselProperties.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ProductCard/components/Carousel.tsx
+const Carousel = ({ theme, carouselId, prompts, promptButtonType, onSelect }) => {
+	const resolvedTheme = resolveTheme(theme);
+	const { carouselClasses } = useGetCarouselProperties();
+	return /* @__PURE__ */ jsx(PromptCarousel, {
+		className: carouselClasses,
+		handleButtonClick: onSelect,
+		id: carouselId,
+		promptCarouselRows: PromptCarouselRows.ALWAYS_TWO,
+		theme: resolvedTheme,
+		promptButtonType,
+		promptButtonTexts: prompts
+	});
+};
+
+//#endregion
+export { Carousel };

package/dist/ProductCard/components/Header.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_AnimatedText = require('../../AnimatedText/AnimatedText.cjs');
+require('../../AnimatedText/index.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
+const require_index = require('../../Typography/types/index.cjs');
+const require_Typography = require('../../Typography/Typography.cjs');
+require('../../Typography/index.cjs');
+const require_useGetHeaderProperties = require('../hooks/useGetHeaderProperties.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ProductCard/components/Header.tsx
+const Header = ({ headline, italicizeHeadline, animatedText, textTypingDuration, textTransition, loop }) => {
+	const { stackClasses, headlineClasses } = require_useGetHeaderProperties.useGetHeaderProperties(italicizeHeadline);
+	const animatedTextWrapper = (0, react.useCallback)((text) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		variant: require_index.TypographyVariant.B3_MD,
+		color: require_index.TypographyColor.TEXT_LIGHT,
+		numberOfLines: 2,
+		children: text
+	}), []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+		gap: 1,
+		className: stackClasses,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+			variant: require_index.TypographyVariant.B1_MD,
+			color: require_index.TypographyColor.TEXT_LIGHT,
+			className: headlineClasses,
+			numberOfLines: 2,
+			children: headline
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AnimatedText.AnimatedText, {
+			sequence: animatedText,
+			getNodeWrapper: animatedTextWrapper,
+			typingDuration: textTypingDuration,
+			transition: textTransition,
+			loop
+		})]
+	});
+};
+
+//#endregion
+exports.Header = Header;

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 { useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#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.B1_MD,
+			color: TypographyColor.TEXT_LIGHT,
+			className: headlineClasses,
+			numberOfLines: 2,
+			children: headline
+		}), /* @__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;