@envive-ai/react-toolkit-v3 0.3.15 → 0.3.16

package/dist/ChatPreview/types/types.d.ts

@@ -113,9 +113,41 @@ type WidgetEventProps = {
    */
   handlePromptButtonClick?: (suggestion: Suggestion) => void;
   /**
-   * Callback function invoked when the text field is clicked.
+   * Callback function invoked when the prompt buttons carousel is dragged.
+   * Useful for tracking drag-to-scroll interactions.
+   */
+  handlePromptButtonDrag?: () => void;
+  /**
+   * Callback function invoked when the user hovers over a prompt button.
+   * Receives the hovered button's text as a parameter.
+   */
+  handlePromptButtonHover?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on a prompt button.
+   * Receives the pressed button's text as a parameter.
+   */
+  handlePromptButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released after pressing a prompt button.
+   */
+  handlePromptButtonMouseUp?: () => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * Receives the touched button's text as a parameter.
+   */
+  handlePromptButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends after touching a prompt button.
+   */
+  handlePromptButtonTouchEnd?: () => void;
+  /**
+   * Callback function invoked when a link inside the widget is clicked.
    *
-   * @param text - The placeholder text of the text field
+   * @param url - The URL of the clicked link
+   */
+  handleLinkClick?: (url: string) => void;
+  /**
+   * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
 };

package/dist/ChatPreviewComparison/ChatPreviewComparison.cjs

@@ -1,15 +1,15 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-const require_resolveTheme = require('../utils/resolveTheme.cjs');
 require('../Tokens/index.cjs');
+const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_PromptButton_types_index = require('../PromptButton/types/index.cjs');
 require('../PromptButton/index.cjs');
 const require_PromptCarousel_types_types = require('../PromptCarousel/types/types.cjs');
 const require_PromptCarousel = require('../PromptCarousel/PromptCarousel.cjs');
 require('../PromptCarousel/index.cjs');
-const require_types = require('../WidgetWrapper/types/types.cjs');
 const require_WidgetTextField = require('../WidgetTextField/WidgetTextField.cjs');
 require('../WidgetTextField/index.cjs');
+const require_types = require('../WidgetWrapper/types/types.cjs');
 const require_WidgetWrapperWithTitle = require('../WidgetWrapperWithTitle/WidgetWrapperWithTitle.cjs');
 const require_index = require('./components/index.cjs');
 let react = require("react");
@@ -20,7 +20,7 @@ const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = require_theme.Theme.GLOBAL_CUSTOM, variant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, hideImage, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
 	const { headlineText, messageText, promptButtons, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
-	const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick } = widgetEventProps ?? {};
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
 	const suggestionTextMap = (0, react.useMemo)(() => {
 		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
@@ -37,13 +37,20 @@ const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps
 	});
 	const message = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.ChatPreviewComparisonComponents.Message, {
 		messageText: messageText ?? "",
-		theme: finalTheme
+		theme: finalTheme,
+		onLinkClick: handleLinkClick
 	});
 	const promptCarousel = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PromptCarousel.PromptCarousel, {
 		promptButtonTexts: promptButtonTexts ?? [],
 		promptButtonType: require_PromptButton_types_index.PromptButtonVariant.SUGGESTED_RESPONSE,
 		promptCarouselRows: require_PromptCarousel_types_types.PromptCarouselRows.ALWAYS_ONE,
-		handleButtonClick: handleSuggestionButtonClick
+		handleButtonClick: handleSuggestionButtonClick,
+		handleButtonDrag: handlePromptButtonDrag,
+		handleButtonHover: (text) => handlePromptButtonHover(suggestionTextMap[text].id),
+		handleButtonMouseDown: (text) => handlePromptButtonMouseDown(suggestionTextMap[text].id),
+		handleButtonMouseUp: handlePromptButtonMouseUp,
+		handleButtonTouchStart: (text) => handlePromptButtonTouchStart(suggestionTextMap[text].id),
+		handleButtonTouchEnd: handlePromptButtonTouchEnd
 	});
 	const widgetTextField = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
 		theme: finalTheme,

package/dist/ChatPreviewComparison/ChatPreviewComparison.d.cts

@@ -1,5 +1,5 @@
 import { ChatPreviewComparisonProps } from "./types/types.cjs";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewComparison/ChatPreviewComparison.d.ts
 declare const ChatPreviewComparison: ({
@@ -7,6 +7,6 @@ declare const ChatPreviewComparison: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: ChatPreviewComparisonProps) => react_jsx_runtime29.JSX.Element;
+}: ChatPreviewComparisonProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 export { ChatPreviewComparison };

package/dist/ChatPreviewComparison/ChatPreviewComparison.d.ts

@@ -1,5 +1,5 @@
 import { ChatPreviewComparisonProps } from "./types/types.js";
-import * as react_jsx_runtime28 from "react/jsx-runtime";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewComparison/ChatPreviewComparison.d.ts
 declare const ChatPreviewComparison: ({
@@ -7,6 +7,6 @@ declare const ChatPreviewComparison: ({
   widgetContentProps,
   widgetStyleProps,
   widgetEventProps
-}: ChatPreviewComparisonProps) => react_jsx_runtime28.JSX.Element;
+}: ChatPreviewComparisonProps) => react_jsx_runtime35.JSX.Element;
 //#endregion
 export { ChatPreviewComparison };

package/dist/ChatPreviewComparison/ChatPreviewComparison.js

@@ -1,14 +1,14 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import { resolveTheme } from "../utils/resolveTheme.js";
 import "../Tokens/index.js";
+import { resolveTheme } from "../utils/resolveTheme.js";
 import { PromptButtonVariant } from "../PromptButton/types/index.js";
 import "../PromptButton/index.js";
 import { PromptCarouselRows } from "../PromptCarousel/types/types.js";
 import { PromptCarousel } from "../PromptCarousel/PromptCarousel.js";
 import "../PromptCarousel/index.js";
-import { WidgetWrapperVariant } from "../WidgetWrapper/types/types.js";
 import { WidgetTextField } from "../WidgetTextField/WidgetTextField.js";
 import "../WidgetTextField/index.js";
+import { WidgetWrapperVariant } from "../WidgetWrapper/types/types.js";
 import { WidgetWrapperWithTitle } from "../WidgetWrapperWithTitle/WidgetWrapperWithTitle.js";
 import { ChatPreviewComparisonComponents } from "./components/index.js";
 import { useCallback, useMemo } from "react";
@@ -19,7 +19,7 @@ const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps
 	const { id, testId, className, style } = baseProps ?? {};
 	const { theme = Theme.GLOBAL_CUSTOM, variant = WidgetWrapperVariant.CARD_WITH_BORDER, hideImage, hideTextField, hideLogo, hexCardColor } = widgetStyleProps ?? {};
 	const { headlineText, messageText, promptButtons, textFieldPlaceholderText, images, logoSrc, titleLabel } = widgetContentProps ?? {};
-	const { handlePromptButtonClick, handleTextFieldClick } = widgetEventProps ?? {};
+	const { handlePromptButtonClick, handlePromptButtonDrag, handlePromptButtonHover, handlePromptButtonMouseDown, handlePromptButtonMouseUp, handlePromptButtonTouchStart, handlePromptButtonTouchEnd, handleLinkClick, handleTextFieldClick } = widgetEventProps ?? {};
 	const finalTheme = resolveTheme(theme);
 	const suggestionTextMap = useMemo(() => {
 		return Object.fromEntries(promptButtons?.map((suggestion) => [suggestion.content, suggestion]) ?? []);
@@ -36,13 +36,20 @@ const ChatPreviewComparison = ({ baseProps, widgetContentProps, widgetStyleProps
 	});
 	const message = /* @__PURE__ */ jsx(ChatPreviewComparisonComponents.Message, {
 		messageText: messageText ?? "",
-		theme: finalTheme
+		theme: finalTheme,
+		onLinkClick: handleLinkClick
 	});
 	const promptCarousel = /* @__PURE__ */ jsx(PromptCarousel, {
 		promptButtonTexts: promptButtonTexts ?? [],
 		promptButtonType: PromptButtonVariant.SUGGESTED_RESPONSE,
 		promptCarouselRows: PromptCarouselRows.ALWAYS_ONE,
-		handleButtonClick: handleSuggestionButtonClick
+		handleButtonClick: handleSuggestionButtonClick,
+		handleButtonDrag: handlePromptButtonDrag,
+		handleButtonHover: (text) => handlePromptButtonHover(suggestionTextMap[text].id),
+		handleButtonMouseDown: (text) => handlePromptButtonMouseDown(suggestionTextMap[text].id),
+		handleButtonMouseUp: handlePromptButtonMouseUp,
+		handleButtonTouchStart: (text) => handlePromptButtonTouchStart(suggestionTextMap[text].id),
+		handleButtonTouchEnd: handlePromptButtonTouchEnd
 	});
 	const widgetTextField = /* @__PURE__ */ jsx(WidgetTextField, {
 		theme: finalTheme,

package/dist/ChatPreviewComparison/components/Headline.cjs

@@ -1,10 +1,10 @@
 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_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-require('../../Tokens/index.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ChatPreviewComparison/components/Headline.tsx

package/dist/ChatPreviewComparison/components/Headline.js

@@ -1,9 +1,9 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import "../../Tokens/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
-import "../../Tokens/index.js";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewComparison/components/Headline.tsx

package/dist/ChatPreviewComparison/components/Layout.cjs

@@ -3,12 +3,12 @@ const require_utils = require('../../DesignTokens/components/utils.cjs');
 const require_aspectRatio = require('../../packages/components-v3/tokens/aspectRatio/aspectRatio.cjs');
 const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_breakpoints = require('../../packages/components-v3/tokens/breakpoints/breakpoints.cjs');
-const require_Stack = require('../../Stack/Stack.cjs');
-require('../../Stack/index.cjs');
+require('../../Tokens/index.cjs');
+const require_resolveTheme = require('../../utils/resolveTheme.cjs');
 const require_Container = require('../../Container/Container.cjs');
 require('../../Container/index.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-require('../../Tokens/index.cjs');
+const require_Stack = require('../../Stack/Stack.cjs');
+require('../../Stack/index.cjs');
 const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 const require_useGetContentSize = require('../../utils/useGetContentSize.cjs');
 const require_types = require('../../ImageGallery/types/types.cjs');

package/dist/ChatPreviewComparison/components/Layout.js

@@ -2,12 +2,12 @@ import { getCSSVariable } from "../../DesignTokens/components/utils.js";
 import { AspectRatioCSSVar } from "../../packages/components-v3/tokens/aspectRatio/aspectRatio.js";
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { screensBreakpointsVariables } from "../../packages/components-v3/tokens/breakpoints/breakpoints.js";
-import { Stack } from "../../Stack/Stack.js";
-import "../../Stack/index.js";
+import "../../Tokens/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
-import "../../Tokens/index.js";
+import { Stack } from "../../Stack/Stack.js";
+import "../../Stack/index.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
 import { useGetContentSize } from "../../utils/useGetContentSize.js";
 import { ImageGalleryLayout } from "../../ImageGallery/types/types.js";

package/dist/ChatPreviewComparison/components/Message.cjs

@@ -1,22 +1,23 @@
 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_index = require('../../Typography/types/index.cjs');
 require('../../Typography/index.cjs');
-const require_resolveTheme = require('../../utils/resolveTheme.cjs');
-require('../../Tokens/index.cjs');
 const require_useCheckIsMobile = require('../../utils/useCheckIsMobile.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ChatPreviewComparison/components/Message.tsx
 const MarkdownProcessor = (0, react.lazy)(async () => ({ default: (await Promise.resolve().then(() => require("../../MarkdownProcessor/MarkdownProcessor.cjs"))).MarkdownProcessor }));
-const Message = ({ messageText, theme = require_theme.Theme.GLOBAL_CUSTOM }) => {
+const Message = ({ messageText, theme = require_theme.Theme.GLOBAL_CUSTOM, onLinkClick }) => {
 	const { isMobile } = require_useCheckIsMobile.useCheckIsMobile();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MarkdownProcessor, {
 		content: messageText,
 		clampParagraphs: require_resolveTheme.resolveTheme(theme) === require_theme.Theme.STANDARD && isMobile ? 7 : 3,
 		textColor: require_index.TypographyColor.TEXT_PRIMARY,
-		textVariant: require_index.TypographyVariant.B3_RG
+		textVariant: require_index.TypographyVariant.B3_RG,
+		onLinkClick
 	}) });
 };
 

package/dist/ChatPreviewComparison/components/Message.js

@@ -1,21 +1,22 @@
 import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import "../../Tokens/index.js";
+import { resolveTheme } from "../../utils/resolveTheme.js";
 import { TypographyColor, TypographyVariant } from "../../Typography/types/index.js";
 import "../../Typography/index.js";
-import { resolveTheme } from "../../utils/resolveTheme.js";
-import "../../Tokens/index.js";
 import { useCheckIsMobile } from "../../utils/useCheckIsMobile.js";
 import { Suspense, lazy } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewComparison/components/Message.tsx
 const MarkdownProcessor = lazy(async () => ({ default: (await import("../../MarkdownProcessor/MarkdownProcessor.js")).MarkdownProcessor }));
-const Message = ({ messageText, theme = Theme.GLOBAL_CUSTOM }) => {
+const Message = ({ messageText, theme = Theme.GLOBAL_CUSTOM, onLinkClick }) => {
 	const { isMobile } = useCheckIsMobile();
 	return /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(MarkdownProcessor, {
 		content: messageText,
 		clampParagraphs: resolveTheme(theme) === Theme.STANDARD && isMobile ? 7 : 3,
 		textColor: TypographyColor.TEXT_PRIMARY,
-		textVariant: TypographyVariant.B3_RG
+		textVariant: TypographyVariant.B3_RG,
+		onLinkClick
 	}) });
 };
 

package/dist/ChatPreviewComparison/types/types.d.cts

@@ -122,8 +122,41 @@ type WidgetEventProps = {
    */
   handlePromptButtonClick?: (suggestion: Suggestion) => void;
   /**
-   * Callback function invoked when the text field is clicked.
+   * Callback function invoked when the prompt buttons carousel is dragged.
+   * Useful for tracking drag-to-scroll interactions.
+   */
+  handlePromptButtonDrag?: () => void;
+  /**
+   * Callback function invoked when the user hovers over a prompt button.
+   * Receives the hovered button's text as a parameter.
+   */
+  handlePromptButtonHover?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on a prompt button.
+   * Receives the pressed button's text as a parameter.
+   */
+  handlePromptButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released after pressing a prompt button.
+   */
+  handlePromptButtonMouseUp?: () => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * Receives the touched button's text as a parameter.
+   */
+  handlePromptButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends after touching a prompt button.
+   */
+  handlePromptButtonTouchEnd?: () => void;
+  /**
+   * Callback function invoked when a link inside the widget is clicked.
    *
+   * @param url - The URL of the clicked link
+   */
+  handleLinkClick?: (url: string) => void;
+  /**
+   * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
 };

package/dist/ChatPreviewComparison/types/types.d.ts

@@ -122,8 +122,41 @@ type WidgetEventProps = {
    */
   handlePromptButtonClick?: (suggestion: Suggestion) => void;
   /**
-   * Callback function invoked when the text field is clicked.
+   * Callback function invoked when the prompt buttons carousel is dragged.
+   * Useful for tracking drag-to-scroll interactions.
+   */
+  handlePromptButtonDrag?: () => void;
+  /**
+   * Callback function invoked when the user hovers over a prompt button.
+   * Receives the hovered button's text as a parameter.
+   */
+  handlePromptButtonHover?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on a prompt button.
+   * Receives the pressed button's text as a parameter.
+   */
+  handlePromptButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released after pressing a prompt button.
+   */
+  handlePromptButtonMouseUp?: () => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * Receives the touched button's text as a parameter.
+   */
+  handlePromptButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends after touching a prompt button.
+   */
+  handlePromptButtonTouchEnd?: () => void;
+  /**
+   * Callback function invoked when a link inside the widget is clicked.
    *
+   * @param url - The URL of the clicked link
+   */
+  handleLinkClick?: (url: string) => void;
+  /**
+   * Callback function invoked when the text field is clicked.
    */
   handleTextFieldClick?: () => void;
 };

package/dist/ChatPreviewLoading/ChatPreviewLoading.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_Stack = require('../Stack/Stack.cjs');
 require('../Stack/index.cjs');
-const require_types = require('../WidgetWrapper/types/types.cjs');
 const require_WidgetTextField = require('../WidgetTextField/WidgetTextField.cjs');
 require('../WidgetTextField/index.cjs');
+const require_types = require('../WidgetWrapper/types/types.cjs');
 require('../WidgetWrapper/index.cjs');
 const require_index = require('./components/index.cjs');
 let react = require("react");

package/dist/ChatPreviewLoading/ChatPreviewLoading.d.cts

@@ -1,5 +1,5 @@
 import { ChatPreviewLoadingProps } from "./types/types.cjs";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewLoading/ChatPreviewLoading.d.ts
 declare const ChatPreviewLoading: ({
@@ -15,6 +15,6 @@ declare const ChatPreviewLoading: ({
   hideLogo,
   logoSrc,
   titleLabel
-}: ChatPreviewLoadingProps) => react_jsx_runtime31.JSX.Element;
+}: ChatPreviewLoadingProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { ChatPreviewLoading };

package/dist/ChatPreviewLoading/ChatPreviewLoading.d.ts

@@ -1,5 +1,5 @@
 import { ChatPreviewLoadingProps } from "./types/types.js";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 
 //#region src/components/ChatPreviewLoading/ChatPreviewLoading.d.ts
 declare const ChatPreviewLoading: ({
@@ -15,6 +15,6 @@ declare const ChatPreviewLoading: ({
   hideLogo,
   logoSrc,
   titleLabel
-}: ChatPreviewLoadingProps) => react_jsx_runtime21.JSX.Element;
+}: ChatPreviewLoadingProps) => react_jsx_runtime28.JSX.Element;
 //#endregion
 export { ChatPreviewLoading };

package/dist/ChatPreviewLoading/ChatPreviewLoading.js

@@ -1,8 +1,8 @@
 import { Stack } from "../Stack/Stack.js";
 import "../Stack/index.js";
-import { WidgetWrapperVariant } from "../WidgetWrapper/types/types.js";
 import { WidgetTextField } from "../WidgetTextField/WidgetTextField.js";
 import "../WidgetTextField/index.js";
+import { WidgetWrapperVariant } from "../WidgetWrapper/types/types.js";
 import "../WidgetWrapper/index.js";
 import { ChatPreviewLoadingComponents } from "./components/index.js";
 import { useMemo } from "react";