@envive-ai/react-toolkit-v3 0.3.15-beta.1 → 0.3.16

package/dist/FloatingChat/hooks/useSnapControl.cjs

@@ -0,0 +1,83 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_snapConstants = require('../snapConstants.cjs');
+const require_useSnapCalculator = require('./useSnapCalculator.cjs');
+let react = require("react");
+let framer_motion = require("framer-motion");
+
+//#region src/components/FloatingChat/hooks/useSnapControl.ts
+const useSnapControl = ({ animationKey, animation, height, unit, snaps, initSnap, onSnapComplete, overlayOpacity }) => {
+	const [scope, animate] = (0, framer_motion.useAnimate)();
+	const defaultAnimationKey = (0, framer_motion.useMotionValue)(-1);
+	const animatedY = animationKey || defaultAnimationKey;
+	const { swipeviewHeightPx, snapsToPixels, getPixelToSnap, getSnapToPixel } = require_useSnapCalculator.useSnapCalculator(snaps, height, unit);
+	const contentHeight = (0, framer_motion.useTransform)(animatedY, [0, swipeviewHeightPx], [swipeviewHeightPx, 0]);
+	const snapOverlayReference = (0, react.useMemo)(() => {
+		if (snaps.length === 1) return [0, swipeviewHeightPx];
+		return [getSnapToPixel(snaps[require_snapConstants.HIDDEN_SNAP_INDEX]), getSnapToPixel(snaps[require_snapConstants.FULL_SNAP_INDEX])];
+	}, [
+		getSnapToPixel,
+		snaps,
+		swipeviewHeightPx
+	]);
+	const displayOverlay = (0, framer_motion.useTransform)(() => {
+		if (animatedY.get() === -1) return "none";
+		return (0, framer_motion.transform)(animatedY.get(), snapOverlayReference, ["none", "block"]);
+	});
+	const opacityOverlay = (0, framer_motion.useTransform)(() => {
+		if (animatedY.get() === -1) return 0;
+		return (0, framer_motion.transform)(animatedY.get(), snapOverlayReference, [0, overlayOpacity]);
+	});
+	const initSnapInPixels = snapsToPixels?.[initSnap];
+	const getInitSnap = () => snaps?.[initSnap];
+	const [currentSnap, setCurrentSnap] = (0, react.useState)(getInitSnap());
+	const defineNextSnapByPosition = () => {
+		const currentY = animatedY.get();
+		let closestSnap = snapsToPixels[0];
+		let minDistance = Math.abs(currentY - snapsToPixels[0]);
+		snapsToPixels.forEach((snapPx) => {
+			const distance = Math.abs(currentY - snapPx);
+			if (distance < minDistance) {
+				minDistance = distance;
+				closestSnap = snapPx;
+			}
+		});
+		return closestSnap;
+	};
+	const jumpTo = (snapPx) => {
+		const collapsed = snapPx === swipeviewHeightPx;
+		const nextSnap = getPixelToSnap(snapPx);
+		animate(scope.current, { y: snapPx }, {
+			...animation,
+			onComplete: () => {
+				onSnapComplete(currentSnap, nextSnap, collapsed);
+				setCurrentSnap(nextSnap);
+			}
+		});
+		return {
+			nextSnap,
+			collapsed
+		};
+	};
+	const resetControls = () => {
+		setCurrentSnap(getInitSnap());
+		return 0;
+	};
+	return {
+		scope,
+		animatedY,
+		animate,
+		swipeviewHeightPx,
+		initSnapInPixels,
+		contentHeight,
+		currentSnap,
+		displayOverlay,
+		opacityOverlay,
+		getSnapToPixel,
+		jumpTo,
+		defineNextSnapByPosition,
+		resetControls
+	};
+};
+
+//#endregion
+exports.useSnapControl = useSnapControl;

package/dist/FloatingChat/hooks/useSnapControl.js

@@ -0,0 +1,82 @@
+import { FULL_SNAP_INDEX, HIDDEN_SNAP_INDEX } from "../snapConstants.js";
+import { useSnapCalculator } from "./useSnapCalculator.js";
+import { useMemo, useState } from "react";
+import { transform, useAnimate, useMotionValue, useTransform } from "framer-motion";
+
+//#region src/components/FloatingChat/hooks/useSnapControl.ts
+const useSnapControl = ({ animationKey, animation, height, unit, snaps, initSnap, onSnapComplete, overlayOpacity }) => {
+	const [scope, animate] = useAnimate();
+	const defaultAnimationKey = useMotionValue(-1);
+	const animatedY = animationKey || defaultAnimationKey;
+	const { swipeviewHeightPx, snapsToPixels, getPixelToSnap, getSnapToPixel } = useSnapCalculator(snaps, height, unit);
+	const contentHeight = useTransform(animatedY, [0, swipeviewHeightPx], [swipeviewHeightPx, 0]);
+	const snapOverlayReference = useMemo(() => {
+		if (snaps.length === 1) return [0, swipeviewHeightPx];
+		return [getSnapToPixel(snaps[HIDDEN_SNAP_INDEX]), getSnapToPixel(snaps[FULL_SNAP_INDEX])];
+	}, [
+		getSnapToPixel,
+		snaps,
+		swipeviewHeightPx
+	]);
+	const displayOverlay = useTransform(() => {
+		if (animatedY.get() === -1) return "none";
+		return transform(animatedY.get(), snapOverlayReference, ["none", "block"]);
+	});
+	const opacityOverlay = useTransform(() => {
+		if (animatedY.get() === -1) return 0;
+		return transform(animatedY.get(), snapOverlayReference, [0, overlayOpacity]);
+	});
+	const initSnapInPixels = snapsToPixels?.[initSnap];
+	const getInitSnap = () => snaps?.[initSnap];
+	const [currentSnap, setCurrentSnap] = useState(getInitSnap());
+	const defineNextSnapByPosition = () => {
+		const currentY = animatedY.get();
+		let closestSnap = snapsToPixels[0];
+		let minDistance = Math.abs(currentY - snapsToPixels[0]);
+		snapsToPixels.forEach((snapPx) => {
+			const distance = Math.abs(currentY - snapPx);
+			if (distance < minDistance) {
+				minDistance = distance;
+				closestSnap = snapPx;
+			}
+		});
+		return closestSnap;
+	};
+	const jumpTo = (snapPx) => {
+		const collapsed = snapPx === swipeviewHeightPx;
+		const nextSnap = getPixelToSnap(snapPx);
+		animate(scope.current, { y: snapPx }, {
+			...animation,
+			onComplete: () => {
+				onSnapComplete(currentSnap, nextSnap, collapsed);
+				setCurrentSnap(nextSnap);
+			}
+		});
+		return {
+			nextSnap,
+			collapsed
+		};
+	};
+	const resetControls = () => {
+		setCurrentSnap(getInitSnap());
+		return 0;
+	};
+	return {
+		scope,
+		animatedY,
+		animate,
+		swipeviewHeightPx,
+		initSnapInPixels,
+		contentHeight,
+		currentSnap,
+		displayOverlay,
+		opacityOverlay,
+		getSnapToPixel,
+		jumpTo,
+		defineNextSnapByPosition,
+		resetControls
+	};
+};
+
+//#endregion
+export { useSnapControl };

package/dist/FloatingChat/hooks/useSnapSetup.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
+const require_snapConstants = require('../snapConstants.cjs');
+let react = require("react");
+let framer_motion = require("framer-motion");
+
+//#region src/components/FloatingChat/hooks/useSnapSetup.ts
+const SNAPS_NO_AUTO_EXPAND = [0, 100];
+const useSnapSetup = ({ isFloatingChatOpen }) => {
+	const maxSwipeableViewHeight = require_snapConstants.MAX_SWIPEABLE_VIEW_HEIGHT;
+	const modalSheetControl = (0, react.useRef)(null);
+	const { viewportWidth } = require_useCheckIsMobile.useCheckIsMobile();
+	const isMobile = viewportWidth !== void 0 && viewportWidth < 512;
+	const shouldAutoExpand = Boolean(isMobile && window?._spiffy?.selectedCustomizeOption);
+	const snaps = shouldAutoExpand ? [100] : SNAPS_NO_AUTO_EXPAND;
+	const initialSnap = shouldAutoExpand ? 0 : 1;
+	const [currentSnapPercentage, setCurrentSnapPercentage] = (0, react.useState)(snaps[initialSnap] ?? 100);
+	const animationKey = (0, framer_motion.useMotionValue)(0);
+	const mobileHeaderHeight = (0, framer_motion.useTransform)(animationKey, [0, Math.floor((typeof window !== "undefined" ? window.innerHeight : 0) * (maxSwipeableViewHeight / 100))], [56, 0]);
+	const isFullView = isMobile && currentSnapPercentage === 100;
+	const handleSnapChange = (snapPercentage) => {
+		setCurrentSnapPercentage(snapPercentage);
+	};
+	return {
+		modalSheetControl,
+		maxSwipeableViewHeight,
+		isOpen: window?._spiffy?.selectedCustomizeOption === "SalesAgent" ? true : Boolean(isFloatingChatOpen),
+		isMobile,
+		snaps,
+		initialSnap,
+		shouldAutoExpand,
+		currentSnapPercentage,
+		handleSnapChange,
+		animationKey,
+		mobileHeaderHeight,
+		isFullView
+	};
+};
+
+//#endregion
+exports.useSnapSetup = useSnapSetup;

package/dist/FloatingChat/hooks/useSnapSetup.js

@@ -0,0 +1,40 @@
+import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
+import { FULL_SNAP_INDEX, HIDDEN_SNAP_INDEX, MAX_SWIPEABLE_VIEW_HEIGHT } from "../snapConstants.js";
+import { useRef, useState } from "react";
+import { useMotionValue, useTransform } from "framer-motion";
+
+//#region src/components/FloatingChat/hooks/useSnapSetup.ts
+const SNAPS_NO_AUTO_EXPAND = [0, 100];
+const useSnapSetup = ({ isFloatingChatOpen }) => {
+	const maxSwipeableViewHeight = MAX_SWIPEABLE_VIEW_HEIGHT;
+	const modalSheetControl = useRef(null);
+	const { viewportWidth } = useCheckIsMobile();
+	const isMobile = viewportWidth !== void 0 && viewportWidth < 512;
+	const shouldAutoExpand = Boolean(isMobile && window?._spiffy?.selectedCustomizeOption);
+	const snaps = shouldAutoExpand ? [100] : SNAPS_NO_AUTO_EXPAND;
+	const initialSnap = shouldAutoExpand ? 0 : 1;
+	const [currentSnapPercentage, setCurrentSnapPercentage] = useState(snaps[initialSnap] ?? 100);
+	const animationKey = useMotionValue(0);
+	const mobileHeaderHeight = useTransform(animationKey, [0, Math.floor((typeof window !== "undefined" ? window.innerHeight : 0) * (maxSwipeableViewHeight / 100))], [56, 0]);
+	const isFullView = isMobile && currentSnapPercentage === 100;
+	const handleSnapChange = (snapPercentage) => {
+		setCurrentSnapPercentage(snapPercentage);
+	};
+	return {
+		modalSheetControl,
+		maxSwipeableViewHeight,
+		isOpen: window?._spiffy?.selectedCustomizeOption === "SalesAgent" ? true : Boolean(isFloatingChatOpen),
+		isMobile,
+		snaps,
+		initialSnap,
+		shouldAutoExpand,
+		currentSnapPercentage,
+		handleSnapChange,
+		animationKey,
+		mobileHeaderHeight,
+		isFullView
+	};
+};
+
+//#endregion
+export { useSnapSetup };

package/dist/FloatingChat/snapConstants.cjs

@@ -0,0 +1,10 @@
+
+//#region src/components/FloatingChat/snapConstants.ts
+const MAX_SWIPEABLE_VIEW_HEIGHT = 89;
+const HIDDEN_SNAP_INDEX = 0;
+const FULL_SNAP_INDEX = 1;
+
+//#endregion
+exports.FULL_SNAP_INDEX = FULL_SNAP_INDEX;
+exports.HIDDEN_SNAP_INDEX = HIDDEN_SNAP_INDEX;
+exports.MAX_SWIPEABLE_VIEW_HEIGHT = MAX_SWIPEABLE_VIEW_HEIGHT;

package/dist/FloatingChat/snapConstants.js

@@ -0,0 +1,7 @@
+//#region src/components/FloatingChat/snapConstants.ts
+const MAX_SWIPEABLE_VIEW_HEIGHT = 89;
+const HIDDEN_SNAP_INDEX = 0;
+const FULL_SNAP_INDEX = 1;
+
+//#endregion
+export { FULL_SNAP_INDEX, HIDDEN_SNAP_INDEX, MAX_SWIPEABLE_VIEW_HEIGHT };

package/dist/FloatingChat/types/types.d.cts

@@ -0,0 +1,76 @@
+import { Theme } from "../../tokens/theme/theme.cjs";
+import { SalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
+import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
+import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
+
+//#region src/components/FloatingChat/types/types.d.ts
+
+/**
+ * Props for the FloatingChat component.
+ * Provides a floating chat interface for AI-powered sales assistance.
+ */
+interface FloatingChatProps {
+  /**
+   * Unique identifier for the component.
+   */
+  id?: string;
+  /**
+   * Additional CSS classes to apply to the component.
+   */
+  className?: string;
+  /**
+   * Inline styles to apply to the component.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Test identifier for testing utilities.
+   */
+  testId?: string;
+  /**
+   * Theme variant to apply to the chat interface.
+   * @default Theme.GLOBAL_CUSTOM
+   */
+  theme?: Theme;
+  /**
+   * Sales agent data containing messages, suggestions, and interaction handlers.
+   */
+  salesAgentData: SalesAgent;
+  /**
+   * Configuration for the floating chat behavior and appearance.
+   */
+  floatingChatConfig: FloatingChatConfig;
+  /**
+   * Look and feel configuration including branding and styling options.
+   */
+  lookAndFeelConfig: LookAndFeelConfig;
+  /**
+   * Callback function invoked when the user closes the chat.
+   */
+  onClose: () => void;
+  /**
+   * Callback function invoked when the user closes the chat via a swipe gesture.
+   */
+  onSwipeClose?: () => void;
+  /**
+   * Callback function invoked when the user toggles the CX button.
+   */
+  onToggleCXButton?: () => void;
+  /**
+   * Whether the CX button switch is enabled.
+   */
+  isCXButtonSwitchEnabled: boolean;
+  /**
+   * Whether the chat is open.
+   */
+  isFloatingChatOpen: boolean;
+  /**
+   * Hardcopy content to display in the chat.
+   */
+  hardcopyContent: HardcopyResponse;
+  /**
+   * Debug bar to display in the chat.
+   */
+  debugBar?: React.ReactNode;
+}
+//#endregion
+export { FloatingChatProps };

package/dist/FloatingChat/types/types.d.ts

@@ -0,0 +1,76 @@
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { SalesAgent } from "@envive-ai/react-hooks/contexts/salesAgentContext";
+import { FloatingChatConfig, LookAndFeelConfig } from "@envive-ai/react-hooks/contexts/typesV3";
+import { HardcopyResponse } from "@envive-ai/react-hooks/contexts/hardcopyContext";
+
+//#region src/components/FloatingChat/types/types.d.ts
+
+/**
+ * Props for the FloatingChat component.
+ * Provides a floating chat interface for AI-powered sales assistance.
+ */
+interface FloatingChatProps {
+  /**
+   * Unique identifier for the component.
+   */
+  id?: string;
+  /**
+   * Additional CSS classes to apply to the component.
+   */
+  className?: string;
+  /**
+   * Inline styles to apply to the component.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Test identifier for testing utilities.
+   */
+  testId?: string;
+  /**
+   * Theme variant to apply to the chat interface.
+   * @default Theme.GLOBAL_CUSTOM
+   */
+  theme?: Theme;
+  /**
+   * Sales agent data containing messages, suggestions, and interaction handlers.
+   */
+  salesAgentData: SalesAgent;
+  /**
+   * Configuration for the floating chat behavior and appearance.
+   */
+  floatingChatConfig: FloatingChatConfig;
+  /**
+   * Look and feel configuration including branding and styling options.
+   */
+  lookAndFeelConfig: LookAndFeelConfig;
+  /**
+   * Callback function invoked when the user closes the chat.
+   */
+  onClose: () => void;
+  /**
+   * Callback function invoked when the user closes the chat via a swipe gesture.
+   */
+  onSwipeClose?: () => void;
+  /**
+   * Callback function invoked when the user toggles the CX button.
+   */
+  onToggleCXButton?: () => void;
+  /**
+   * Whether the CX button switch is enabled.
+   */
+  isCXButtonSwitchEnabled: boolean;
+  /**
+   * Whether the chat is open.
+   */
+  isFloatingChatOpen: boolean;
+  /**
+   * Hardcopy content to display in the chat.
+   */
+  hardcopyContent: HardcopyResponse;
+  /**
+   * Debug bar to display in the chat.
+   */
+  debugBar?: React.ReactNode;
+}
+//#endregion
+export { FloatingChatProps };

package/dist/FloatingChat/utils/functions.cjs

@@ -0,0 +1,86 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+
+//#region src/components/FloatingChat/utils/functions.ts
+const groupableMessageTypes = new Set([
+	__envive_ai_react_hooks_application_models.MessageType.Product,
+	__envive_ai_react_hooks_application_models.MessageType.Review,
+	__envive_ai_react_hooks_application_models.MessageType.Page,
+	__envive_ai_react_hooks_application_models.MessageType.Form
+]);
+const getGroupableMessages = (message) => {
+	return message.reduce((acc, msg) => {
+		if (groupableMessageTypes.has(msg.type)) {
+			const existingGroup = acc.find(([type]) => type === msg.type);
+			if (existingGroup) existingGroup[1].push(msg);
+			else acc.push([msg.type, [msg]]);
+		} else acc.push([msg.type, [msg]]);
+		return acc;
+	}, []);
+};
+const checkIfHideAgentName = (messages) => {
+	return messages.some((msg) => msg.role === __envive_ai_react_hooks_application_models.MessageRole.Assistant && msg.type !== __envive_ai_react_hooks_application_models.MessageType.Separator);
+};
+const getCleanProducts = (messages) => {
+	return messages.map((msg) => {
+		if (msg.type === __envive_ai_react_hooks_application_models.MessageType.Product && !msg.metadata.isForGrid) return {
+			productName: msg.metadata.title,
+			currentPrice: msg.metadata.salePrice,
+			previousPrice: msg.metadata.originalPrice,
+			pricePrefix: "$",
+			rate: msg.metadata.averageRating,
+			numberOfReviews: msg.metadata.numberReviews,
+			url: msg.metadata.url,
+			image: {
+				src: msg.metadata.imageUrl,
+				alt: `${msg.metadata.title} image`
+			}
+		};
+		return null;
+	}).filter((product) => product !== null);
+};
+const getCleanReviews = (messages) => {
+	return messages.map((msg) => {
+		if (msg.type === __envive_ai_react_hooks_application_models.MessageType.Review && msg.metadata.review && msg.metadata.reviewer) return {
+			id: msg.id,
+			name: msg.metadata.reviewer,
+			rating: msg.metadata.stars,
+			reviewText: msg.metadata.review
+		};
+		return null;
+	}).filter((review) => review !== null);
+};
+const getCleanDocuments = (messages) => {
+	return messages.map((msg) => {
+		if (msg.type === __envive_ai_react_hooks_application_models.MessageType.Page && msg.metadata?.url) return {
+			title: msg.metadata?.title,
+			description: msg.metadata?.description,
+			articleUrl: msg.metadata?.url
+		};
+		return null;
+	}).filter((document) => document !== null);
+};
+const getCleanOrders = (messages) => {
+	const order = messages.find((msg) => msg.type === __envive_ai_react_hooks_application_models.MessageType.Order);
+	const lineItems = order?.metadata.lineItems ?? [];
+	if (!order || lineItems.length === 0) return null;
+	return lineItems.map((item) => {
+		if (item.image && item.orderItemId && order.createdAt) return {
+			id: item.orderItemId,
+			productImages: [item.image],
+			orderStatus: item.fulfillmentDisplayStatus,
+			orderNumber: order.metadata.orderNumber,
+			orderDate: order.createdAt,
+			trackOrderUrl: item.trackingUrl
+		};
+		return null;
+	}).filter((o) => o !== null);
+};
+
+//#endregion
+exports.checkIfHideAgentName = checkIfHideAgentName;
+exports.getCleanDocuments = getCleanDocuments;
+exports.getCleanOrders = getCleanOrders;
+exports.getCleanProducts = getCleanProducts;
+exports.getCleanReviews = getCleanReviews;
+exports.getGroupableMessages = getGroupableMessages;

package/dist/Form/Form.cjs

@@ -0,0 +1,53 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_index = require('./components/index.cjs');
+const require_useFormsTextFieldValues = require('./hooks/useFormsTextFieldValues.cjs');
+const require_buildSubmitButtonElement = require('./utils/buildSubmitButtonElement.cjs');
+const require_handleFormsSubmit = require('./utils/handleFormsSubmit.cjs');
+const require_mapTextFields = require('./utils/mapTextFields.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region src/components/Form/Form.tsx
+/**
+* Renders a form with multiple text inputs and a submit button.
+*/
+const Form = ({ textFields, submitButton, onSubmit, ariaLabel, id, testId, className, style }) => {
+	const { values, handleChange } = require_useFormsTextFieldValues.useFormsTextFieldValues({ textFields });
+	const [fieldErrors, setFieldErrors] = (0, react.useState)({});
+	const submitButtonElement = require_buildSubmitButtonElement.buildSubmitButtonElement(submitButton);
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		if (submitButton.isDisabled) return;
+		const validation = require_handleFormsSubmit.handleFormsSubmit({
+			textFields,
+			values,
+			onSubmit
+		});
+		if (!validation.isValid) setFieldErrors(validation.fieldErrors);
+		else setFieldErrors({});
+	};
+	const handleFieldChange = (index, value) => {
+		handleChange(index, value);
+		if (fieldErrors[index]) setFieldErrors((prev) => {
+			const next = { ...prev };
+			delete next[index];
+			return next;
+		});
+	};
+	const textFieldNodes = require_mapTextFields.mapTextFields(textFields, values, handleFieldChange, fieldErrors);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FormsComponents.Layout, {
+		id,
+		testId,
+		className: (0, classnames.default)(className),
+		style,
+		ariaLabel,
+		onSubmit: handleSubmit,
+		textFields: textFieldNodes,
+		submitButton: submitButtonElement
+	});
+};
+
+//#endregion
+exports.Form = Form;

package/dist/Form/components/Layout.cjs

@@ -0,0 +1,35 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region src/components/Form/components/Layout.tsx
+const Layout = ({ textFields, submitButton, onSubmit, ariaLabel, id, testId, className, style }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+		id,
+		"data-testid": testId,
+		className: (0, classnames.default)("envive-tw-w-full", className),
+		style,
+		onSubmit,
+		"aria-label": ariaLabel,
+		noValidate: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+			direction: "column",
+			align: "stretch",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Stack.Stack, {
+				direction: "column",
+				gap: 4,
+				align: "stretch",
+				children: textFields
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "envive-tw-mt-6",
+				children: submitButton
+			})]
+		})
+	});
+};
+
+//#endregion
+exports.Layout = Layout;

package/dist/Form/components/SubmitButtonItem.cjs

@@ -0,0 +1,24 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useGetButtonProperties = require('../hooks/useGetButtonProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region src/components/Form/components/SubmitButtonItem.tsx
+const SubmitButtonItem = ({ label, isDisabled = false, ariaLabel, id, testId, className, style }) => {
+	const { buttonLayoutClasses, buttonDefaultClasses, buttonHoverClasses, buttonDisabledClasses, buttonContentClasses } = require_useGetButtonProperties.useGetButtonProperties();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		id,
+		"data-testid": testId,
+		type: "submit",
+		disabled: isDisabled,
+		className: (0, classnames.default)(buttonLayoutClasses, buttonDefaultClasses, !isDisabled && buttonHoverClasses, buttonDisabledClasses, buttonContentClasses, className),
+		style,
+		"aria-label": ariaLabel,
+		"aria-disabled": isDisabled,
+		children: label
+	});
+};
+
+//#endregion
+exports.SubmitButtonItem = SubmitButtonItem;

package/dist/Form/components/TextFieldItem.cjs

@@ -0,0 +1,43 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useGetTextFieldProperties = require('../hooks/useGetTextFieldProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region src/components/Form/components/TextFieldItem.tsx
+const TextFieldItem = ({ label, value, onChange, type, error, ariaLabel, id, testId, className, style }) => {
+	const hasValue = value.trim().length > 0;
+	const hasError = !!error;
+	const { wrapperLayoutClasses, wrapperDefaultClasses, wrapperBorderClasses, wrapperFocusWithinClasses, inputBaseClasses, inputPlaceholderClasses, inputActiveClasses, floatingLabelClasses, errorMessageClasses } = require_useGetTextFieldProperties.useGetTextFieldProperties({ hasError });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "envive-tw-w-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			id,
+			"data-testid": testId,
+			className: (0, classnames.default)(wrapperLayoutClasses, "envive-tw-relative", wrapperDefaultClasses, wrapperBorderClasses, wrapperFocusWithinClasses, className),
+			style,
+			children: [hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				className: floatingLabelClasses,
+				htmlFor: id,
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type,
+				placeholder: label,
+				value,
+				onChange: (event) => onChange(event.target.value),
+				"aria-label": ariaLabel,
+				"aria-invalid": hasError,
+				"aria-describedby": hasError ? `${id}-error` : void 0,
+				className: (0, classnames.default)(inputBaseClasses, inputPlaceholderClasses, hasValue && inputActiveClasses)
+			})]
+		}), hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: id ? `${id}-error` : void 0,
+			className: errorMessageClasses,
+			role: "alert",
+			children: error
+		})]
+	});
+};
+
+//#endregion
+exports.TextFieldItem = TextFieldItem;