@envive-ai/react-toolkit-v3 0.3.5

package/dist/FloatingChat/hooks/useScrollToBottom.cjs

@@ -0,0 +1,50 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/FloatingChat/hooks/useScrollToBottom.ts
+const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30 }) => {
+	const [showScrollButton, setShowScrollButton] = (0, react.useState)(false);
+	const getScrollableContainer = (0, react.useCallback)(() => {
+		return messagesRef.current?.closest(".envive-tw-overflow-y-auto");
+	}, [messagesRef]);
+	const checkIfScrolledToBottom = (0, react.useCallback)(() => {
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return false;
+		const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+		return scrollHeight - scrollTop - clientHeight < scrollThreshold;
+	}, [getScrollableContainer, scrollThreshold]);
+	(0, react.useEffect)(() => {
+		const scrollableContainer = getScrollableContainer();
+		if (scrollableContainer) requestAnimationFrame(() => {
+			scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
+			setShowScrollButton(false);
+		});
+	}, [...autoScrollDependencies, getScrollableContainer]);
+	(0, react.useEffect)(() => {
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return;
+		const handleScroll = () => {
+			setShowScrollButton(!checkIfScrolledToBottom());
+		};
+		scrollableContainer.addEventListener("scroll", handleScroll);
+		handleScroll();
+		return () => {
+			scrollableContainer.removeEventListener("scroll", handleScroll);
+		};
+	}, [getScrollableContainer, checkIfScrolledToBottom]);
+	return {
+		showScrollButton,
+		scrollToBottom: (0, react.useCallback)(() => {
+			const scrollableContainer = getScrollableContainer();
+			if (scrollableContainer) requestAnimationFrame(() => {
+				scrollableContainer.scrollTo({
+					top: scrollableContainer.scrollHeight,
+					behavior: "smooth"
+				});
+			});
+		}, [getScrollableContainer])
+	};
+};
+
+//#endregion
+exports.useScrollToBottom = useScrollToBottom;

package/dist/FloatingChat/hooks/useScrollToBottom.js

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from "react";
+
+//#region src/components/FloatingChat/hooks/useScrollToBottom.ts
+const useScrollToBottom = ({ messagesRef, autoScrollDependencies = [], scrollThreshold = 30 }) => {
+	const [showScrollButton, setShowScrollButton] = useState(false);
+	const getScrollableContainer = useCallback(() => {
+		return messagesRef.current?.closest(".envive-tw-overflow-y-auto");
+	}, [messagesRef]);
+	const checkIfScrolledToBottom = useCallback(() => {
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return false;
+		const { scrollTop, scrollHeight, clientHeight } = scrollableContainer;
+		return scrollHeight - scrollTop - clientHeight < scrollThreshold;
+	}, [getScrollableContainer, scrollThreshold]);
+	useEffect(() => {
+		const scrollableContainer = getScrollableContainer();
+		if (scrollableContainer) requestAnimationFrame(() => {
+			scrollableContainer.scrollTop = scrollableContainer.scrollHeight;
+			setShowScrollButton(false);
+		});
+	}, [...autoScrollDependencies, getScrollableContainer]);
+	useEffect(() => {
+		const scrollableContainer = getScrollableContainer();
+		if (!scrollableContainer) return;
+		const handleScroll = () => {
+			setShowScrollButton(!checkIfScrolledToBottom());
+		};
+		scrollableContainer.addEventListener("scroll", handleScroll);
+		handleScroll();
+		return () => {
+			scrollableContainer.removeEventListener("scroll", handleScroll);
+		};
+	}, [getScrollableContainer, checkIfScrolledToBottom]);
+	return {
+		showScrollButton,
+		scrollToBottom: useCallback(() => {
+			const scrollableContainer = getScrollableContainer();
+			if (scrollableContainer) requestAnimationFrame(() => {
+				scrollableContainer.scrollTo({
+					top: scrollableContainer.scrollHeight,
+					behavior: "smooth"
+				});
+			});
+		}, [getScrollableContainer])
+	};
+};
+
+//#endregion
+export { useScrollToBottom };

package/dist/FloatingChat/index.cjs

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

package/dist/FloatingChat/index.d.cts

@@ -0,0 +1,2 @@
+import { FloatingChat } from "./FloatingChat.cjs";
+export { FloatingChat };

package/dist/FloatingChat/index.d.ts

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

package/dist/FloatingChat/index.js

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

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

@@ -0,0 +1,64 @@
+import { Theme } from "../../components-v3/tokens/theme/theme.cjs";
+import { SalesAgent } from "../../hooks/dist/contexts/salesAgentContext/salesAgentContext.cjs";
+import { FloatingChatConfig, LookAndFeelConfig } from "../../hooks/dist/contexts/typesV3.cjs";
+
+//#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;
+  /**
+   * Whether the chat is in a loading state.
+   * @todo Needs to implement isLoading functionality.
+   */
+  isLoading?: boolean;
+  /**
+   * 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 toggles the CX button.
+   */
+  onToggleCXButton?: () => void;
+  /**
+   * Whether the CX button switch is enabled.
+   */
+  isCXButtonSwitchEnabled: boolean;
+}
+//#endregion
+export { FloatingChatProps };

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

@@ -0,0 +1,65 @@
+import { Theme } from "../../components-v3/tokens/theme/theme.js";
+import { SalesAgent } from "../../hooks/dist/contexts/salesAgentContext/salesAgentContext.js";
+import "../../hooks/dist/contexts/salesAgentContext/index.js";
+import { FloatingChatConfig, LookAndFeelConfig } from "../../hooks/dist/contexts/typesV3.js";
+
+//#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;
+  /**
+   * Whether the chat is in a loading state.
+   * @todo Needs to implement isLoading functionality.
+   */
+  isLoading?: boolean;
+  /**
+   * 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 toggles the CX button.
+   */
+  onToggleCXButton?: () => void;
+  /**
+   * Whether the CX button switch is enabled.
+   */
+  isCXButtonSwitchEnabled: boolean;
+}
+//#endregion
+export { FloatingChatProps };

package/dist/FloatingChat/utils/functions.cjs

@@ -0,0 +1,85 @@
+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 {
+			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/FloatingChat/utils/functions.js

@@ -0,0 +1,79 @@
+import { MessageRole, MessageType } from "@envive-ai/react-hooks/application/models";
+
+//#region src/components/FloatingChat/utils/functions.ts
+const groupableMessageTypes = new Set([
+	MessageType.Product,
+	MessageType.Review,
+	MessageType.Page,
+	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 === MessageRole.Assistant && msg.type !== MessageType.Separator);
+};
+const getCleanProducts = (messages) => {
+	return messages.map((msg) => {
+		if (msg.type === 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 === 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 === 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 === 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 {
+			productImages: [item.image],
+			orderStatus: item.fulfillmentDisplayStatus,
+			orderNumber: order.metadata.orderNumber,
+			orderDate: order.createdAt,
+			trackOrderUrl: item.trackingUrl
+		};
+		return null;
+	}).filter((o) => o !== null);
+};
+
+//#endregion
+export { checkIfHideAgentName, getCleanDocuments, getCleanOrders, getCleanProducts, getCleanReviews, 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/Form.d.cts

@@ -0,0 +1,19 @@
+import { FormProps } from "./types/index.cjs";
+
+//#region src/components/Form/Form.d.ts
+
+/**
+ * Renders a form with multiple text inputs and a submit button.
+ */
+declare const Form: ({
+  textFields,
+  submitButton,
+  onSubmit,
+  ariaLabel,
+  id,
+  testId,
+  className,
+  style
+}: FormProps) => JSX.Element;
+//#endregion
+export { Form };

package/dist/Form/Form.d.ts

@@ -0,0 +1,19 @@
+import { FormProps } from "./types/index.js";
+
+//#region src/components/Form/Form.d.ts
+
+/**
+ * Renders a form with multiple text inputs and a submit button.
+ */
+declare const Form: ({
+  textFields,
+  submitButton,
+  onSubmit,
+  ariaLabel,
+  id,
+  testId,
+  className,
+  style
+}: FormProps) => JSX.Element;
+//#endregion
+export { Form };

package/dist/Form/Form.js

@@ -0,0 +1,51 @@
+import { FormsComponents } from "./components/index.js";
+import { useFormsTextFieldValues } from "./hooks/useFormsTextFieldValues.js";
+import { buildSubmitButtonElement } from "./utils/buildSubmitButtonElement.js";
+import { handleFormsSubmit } from "./utils/handleFormsSubmit.js";
+import { mapTextFields } from "./utils/mapTextFields.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import classNames from "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 } = useFormsTextFieldValues({ textFields });
+	const [fieldErrors, setFieldErrors] = useState({});
+	const submitButtonElement = buildSubmitButtonElement(submitButton);
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		if (submitButton.isDisabled) return;
+		const validation = 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 = mapTextFields(textFields, values, handleFieldChange, fieldErrors);
+	return /* @__PURE__ */ jsx(FormsComponents.Layout, {
+		id,
+		testId,
+		className: classNames(className),
+		style,
+		ariaLabel,
+		onSubmit: handleSubmit,
+		textFields: textFieldNodes,
+		submitButton: submitButtonElement
+	});
+};
+
+//#endregion
+export { 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/Layout.js

@@ -0,0 +1,33 @@
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+
+//#region src/components/Form/components/Layout.tsx
+const Layout = ({ textFields, submitButton, onSubmit, ariaLabel, id, testId, className, style }) => {
+	return /* @__PURE__ */ jsx("form", {
+		id,
+		"data-testid": testId,
+		className: classNames("envive-tw-w-full", className),
+		style,
+		onSubmit,
+		"aria-label": ariaLabel,
+		noValidate: true,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			align: "stretch",
+			children: [/* @__PURE__ */ jsx(Stack, {
+				direction: "column",
+				gap: 4,
+				align: "stretch",
+				children: textFields
+			}), /* @__PURE__ */ jsx("div", {
+				className: "envive-tw-mt-6",
+				children: submitButton
+			})]
+		})
+	});
+};
+
+//#endregion
+export { 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/SubmitButtonItem.js

@@ -0,0 +1,22 @@
+import { useGetButtonProperties } from "../hooks/useGetButtonProperties.js";
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+
+//#region src/components/Form/components/SubmitButtonItem.tsx
+const SubmitButtonItem = ({ label, isDisabled = false, ariaLabel, id, testId, className, style }) => {
+	const { buttonLayoutClasses, buttonDefaultClasses, buttonHoverClasses, buttonDisabledClasses, buttonContentClasses } = useGetButtonProperties();
+	return /* @__PURE__ */ jsx("button", {
+		id,
+		"data-testid": testId,
+		type: "submit",
+		disabled: isDisabled,
+		className: classNames(buttonLayoutClasses, buttonDefaultClasses, !isDisabled && buttonHoverClasses, buttonDisabledClasses, buttonContentClasses, className),
+		style,
+		"aria-label": ariaLabel,
+		"aria-disabled": isDisabled,
+		children: label
+	});
+};
+
+//#endregion
+export { SubmitButtonItem };