@envive-ai/react-toolkit 0.1.5 → 0.1.6

package/dist/{types-Dvgr3ZeV.d.cts → index-wYn2mEDm.d.cts}

@@ -1,3 +1,30 @@
+import { TestProps } from "./types-BQYpWDJ4.cjs";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
+import { FC } from "react";
+
+//#region src/config/chatElementDisplayLocation.d.ts
+declare enum ChatElementDisplayLocation {
+  IN_CHAT = "in_chat",
+  CHAT_PREVIEW = "chat_preview",
+  FLOATING_BUTTON = "floating_button",
+  HELP_ME_CHOOSE = "help_me_choose",
+  PLP_IMAGE_BANNER = "plp_image_banner",
+  TOP_REVIEWS_SNIPPET = "top_reviews_snippet",
+  BOTTOM_REVIEWS_SNIPPET = "bottom_reviews_snippet",
+  BLOCK_BACK_BUTTON = "block_back_button",
+  SWITCH_TO_AGENT = "switch_to_agent",
+  CONVERSATIONAL_SEARCH = "conversational_search",
+  GLOBAL_SEARCH_ENTRYPOINT = "global_search_entrypoint",
+  SEARCH_NAV_ENTRYPOINT = "search_nav_entrypoint",
+  SEARCH_PROMPT = "search_prompt",
+  SEARCH_PROMPT_BUTTON = "search_prompt_button",
+  PRODUCT_GRID = "product_grid",
+  UNSPECIFIED = "unspecified",
+  FILTER_MODAL = "filter_modal",
+  PROMPT_CARD = "prompt_card",
+  WINDOW_API_CALL = "window_api_call",
+}
+//#endregion
 //#region src/types/external.d.ts
 declare enum ResponseCategory {
   Product = "product",
@@ -12,7 +39,7 @@ interface SearchResponseProduct {
   brand?: string;
   category?: string;
   availability?: string;
-  url?: string;
+  url: string;
   responseId?: string;
   originalPrice?: number;
   salePrice?: number;
@@ -254,7 +281,7 @@ interface SearchResponseProductAttributes {
   category: ResponseCategory.Product;
   attributes: CamelCasedPropertiesDeep<SearchResponseProduct>;
 }
-interface ProductCardSkeletonProps {
+interface ProductCardSkeletonProps$1 {
   layoutVariant: ProductCardLayoutVariant;
   aspectRatio: ProductCardImageAspectRatio;
   growWithContainer?: boolean;
@@ -269,4 +296,84 @@ interface ProductGridProps {
   cardsGrowWithContainer?: boolean;
 }
 //#endregion
-export { AnimatedProductCardOverrides, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, SearchResponseProduct, SearchResponseProductAttributes };
+//#region src/components/ProductCard/ProductCard.d.ts
+interface RatingSummaryProps {
+  stars: number;
+  reviewCount: number;
+  className?: string;
+}
+declare const RatingSummary: ({
+  stars,
+  reviewCount,
+  className
+}: RatingSummaryProps) => react_jsx_runtime17.JSX.Element;
+interface PriceSectionProps {
+  originalPrice?: string;
+  salePrice?: string;
+  pricePrefix?: string;
+}
+declare const PriceSection: ({
+  originalPrice,
+  salePrice,
+  pricePrefix
+}: PriceSectionProps) => react_jsx_runtime17.JSX.Element;
+interface ProductCardProps extends TestProps {
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  title: string;
+  url: string;
+  searchResponseId?: string;
+  productResponseId?: string;
+  cardDisplayLocation: ChatElementDisplayLocation.IN_CHAT | ChatElementDisplayLocation.PRODUCT_GRID;
+  imageUrl?: string;
+  originalPrice?: number;
+  averageRating?: number;
+  numberReviews?: number;
+  salePrice?: number;
+  variant?: ProductCardVariant;
+  hoverVariant?: ProductCardHoverVariant;
+  layoutVariant?: ProductCardLayoutVariant;
+  zoomOnHover?: boolean;
+  aspectRatio?: '3:4' | 'square' | 'none';
+  clickPosition?: number | null;
+  growWithContainer?: boolean;
+  handleClick?: (clickedUrl: string) => void;
+}
+declare const ProductCard: ({
+  productCardConfig,
+  merchantShortName,
+  imageUrl,
+  title,
+  url,
+  originalPrice,
+  averageRating,
+  numberReviews,
+  salePrice,
+  variant,
+  hoverVariant,
+  dataTestId,
+  layoutVariant,
+  zoomOnHover,
+  aspectRatio,
+  growWithContainer,
+  handleClick
+}: ProductCardProps) => react_jsx_runtime17.JSX.Element;
+//#endregion
+//#region src/components/ProductCard/ProductCardSkeleton.d.ts
+interface ProductCardSkeletonProps {
+  layoutVariant: ProductCardLayoutVariant;
+  aspectRatio?: '3:4' | 'square' | 'none';
+  growWithContainer?: boolean;
+}
+declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;
+//#endregion
+//#region src/components/ProductCard/productCardVariants.d.ts
+/**
+ * Shared variant mapping configurations for ProductCard components
+ */
+declare const variantClassMap: Map<ProductCardVariant, string[]>;
+declare const variantHoverClassMap: Map<ProductCardHoverVariant, string[]>;
+declare const variantTitleColorMap: Map<ProductCardVariant, string>;
+declare const productCardLayoutVariantClasses: Record<ProductCardLayoutVariant, Record<string, string[]>>;
+//#endregion
+export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps$1 as ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/{searchFilterSidebarVariants-C_UTEIpZ.js → searchFilterSidebarVariants-BWQyiKwS.js}

@@ -1,4 +1,4 @@
-import { ColorNames, colorVar } from "./colorsConfig-CKiMYHO_.js";
+import { ColorNames, colorVar } from "./colorsConfig-BQlaCfxi.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{searchFilterSidebarVariants-DcQLi_TT.cjs → searchFilterSidebarVariants-D08jyA7U.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-DulwYRIk.cjs');
+const require_colorsConfig = require('./colorsConfig-DCvy_dV4.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -24,6 +24,7 @@
     "prepublish": "npm run build"
   },
   "dependencies": {
+    "@envive-ai/react-hooks": "^0.1.1",
     "@envive-ai/react-icons": "0.1.1",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
@@ -39,6 +40,10 @@
     "typescript": "~5.8.3"
   },
   "exports": {
+    "./Accordion": {
+      "import": "./dist/Accordion/index.js",
+      "require": "./dist/Accordion/index.cjs"
+    },
     "./ButtonBase": {
       "import": "./dist/ButtonBase/index.js",
       "require": "./dist/ButtonBase/index.cjs"
@@ -63,6 +68,10 @@
       "import": "./dist/ProductGrid/index.js",
       "require": "./dist/ProductGrid/index.cjs"
     },
+    "./SearchAutocomplete": {
+      "import": "./dist/SearchAutocomplete/index.js",
+      "require": "./dist/SearchAutocomplete/index.cjs"
+    },
     "./SearchFilter": {
       "import": "./dist/SearchFilter/index.js",
       "require": "./dist/SearchFilter/index.cjs"
@@ -71,10 +80,6 @@
       "import": "./dist/SearchInput/index.js",
       "require": "./dist/SearchInput/index.cjs"
     },
-    "./SearchInputAutocomplete": {
-      "import": "./dist/SearchInputAutocomplete/index.js",
-      "require": "./dist/SearchInputAutocomplete/index.cjs"
-    },
     "./SearchInputForm": {
       "import": "./dist/SearchInputForm/index.js",
       "require": "./dist/SearchInputForm/index.cjs"

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,90 @@
+import { motion } from 'framer-motion';
+import { useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Text } from '@envive-ai/react-toolkit/Text';
+import ChevronDown from '@envive-ai/react-icons/ChevronDown';
+
+interface AccordionProps {
+  title: string;
+  content: React.ReactNode;
+}
+
+const ANIMATION_DURATION = 0.3;
+
+export const Accordion = ({ title, content }: AccordionProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const titleWrapperClasses = classNames({
+    'spiffy-tw-border-b': true,
+    'spiffy-tw-border-[--spiffy-colors-border-light]': true,
+    'spiffy-tw-pb-2': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-justify-between': true,
+    'spiffy-tw-items-center': true,
+    'spiffy-tw-w-full': true,
+    'spiffy-tw-group': true,
+  });
+
+  const titleClasses = classNames({
+    'spiffy-tw-uppercase': true,
+    'spiffy-tw-text-[--spiffy-colors-text-primary]': true,
+    '!spiffy-tw-font-[400]': true,
+    'group-aria-expanded:!spiffy-tw-font-medium': true,
+  });
+
+  const contentClasses = classNames({
+    'spiffy-tw-overflow-hidden': true,
+  });
+
+  return (
+    <div>
+      <button
+        aria-expanded={isOpen}
+        type="button"
+        className={titleWrapperClasses}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <Text variant="body4" className={titleClasses}>
+          {title}
+        </Text>
+        <motion.div
+          variants={{
+            open: {
+              rotate: 180,
+            },
+            closed: {
+              rotate: 360,
+            },
+          }}
+          animate={isOpen ? 'open' : 'closed'}
+          transition={{ duration: ANIMATION_DURATION, ease: 'easeOut' }}
+        >
+          <ChevronDown />
+        </motion.div>
+      </button>
+      <motion.div
+        variants={{
+          open: {
+            height: 'auto',
+            marginTop: '24px',
+            marginBottom: '24px',
+          },
+          closed: {
+            height: '0px',
+            marginTop: '0px',
+            marginBottom: '0px',
+          },
+        }}
+        className={contentClasses}
+        initial={{ height: 0 }}
+        animate={isOpen ? 'open' : 'closed'}
+        transition={{ duration: ANIMATION_DURATION, ease: 'easeOut' }}
+        ref={contentRef}
+      >
+        {content}
+      </motion.div>
+    </div>
+  );
+};

package/src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx

@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { SelectedFilterOption } from 'src/atoms/search/types';
+import { Text } from '@envive-ai/react-toolkit/Text';
+
+interface AppliedFiltersScrollbarProps {
+  selectedFilterOptions: SelectedFilterOption[];
+  filterBarClassNames: string;
+  filterDefaultClasses: string;
+  filterHoverClasses: string;
+  appliedFilterBackgroundClasses: string;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+}
+
+export const AppliedFiltersScrollbar = ({
+  selectedFilterOptions,
+  filterBarClassNames,
+  filterDefaultClasses,
+  filterHoverClasses,
+  appliedFilterBackgroundClasses,
+  onRemoveFilter,
+}: AppliedFiltersScrollbarProps) => {
+  if (selectedFilterOptions.length === 0) {
+    return null;
+  }
+
+  // Extract border and text classes from filterDefaultClasses, excluding background because everything is shared between filters except for the applied filters background
+  const filterDefaultWithoutBg = filterDefaultClasses
+    .replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, '')
+    .trim();
+  const buttonClasses = classNames(
+    ' spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap',
+    filterHoverClasses,
+    filterDefaultWithoutBg,
+    appliedFilterBackgroundClasses,
+  );
+  const iconColor = 'currentColor'; // match with text color
+
+  return (
+    <ScrollContainer className={filterBarClassNames} hideScrollbars>
+      {selectedFilterOptions.map((filter) => {
+        return (
+          <button
+            key={filter.id}
+            className={buttonClasses}
+            type="button"
+            onClick={() => onRemoveFilter(filter)}
+            aria-label={`Remove filter: ${filter.displayName}`}
+          >
+            <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]">
+              <Text variant="body3">{filter.displayName}</Text>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="10"
+                height="10"
+                viewBox="0 0 10 10"
+                fill="none"
+              >
+                <path
+                  d="M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z"
+                  fill={iconColor}
+                />
+              </svg>
+            </div>
+          </button>
+        );
+      })}
+    </ScrollContainer>
+  );
+};

package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+import ScrollContainer from 'react-indiana-drag-scroll';
+import { Text } from '@envive-ai/react-toolkit/Text';
+
+interface DynamicFiltersScrollbarProps {
+  availableDynamicFilters: { name: string; displayName: string }[];
+  filterBarClassNames: string;
+  filterDefaultClasses: string;
+  filterHoverClasses: string;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName,
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+}
+
+export const DynamicFiltersScrollbar = ({
+  availableDynamicFilters,
+  filterBarClassNames,
+  filterDefaultClasses,
+  filterHoverClasses,
+  onToggleDynamicFilter,
+}: DynamicFiltersScrollbarProps) => {
+  return (
+    <ScrollContainer className={filterBarClassNames} hideScrollbars>
+      {availableDynamicFilters.map(({ name, displayName }) => {
+        const buttonClasses = classNames(
+          'spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ',
+          filterHoverClasses,
+          filterDefaultClasses,
+        );
+        return (
+          <button
+            key={name}
+            type="button"
+            className={buttonClasses}
+            onClick={() => {
+              onToggleDynamicFilter({
+                filter: name,
+                dynamicFilterDisplayName: displayName,
+              });
+            }}
+          >
+            <Text variant="body3">{displayName}</Text>
+          </button>
+        );
+      })}
+    </ScrollContainer>
+  );
+};

package/src/components/ProductCard/ProductCard.tsx

@@ -1,25 +1,26 @@
 import classNames from 'classnames';
 import { MdStar } from 'react-icons/md';
-import { Text } from 'src/components/Text/Text';
 import {
   variantClassMap,
   variantHoverClassMap,
   productCardLayoutVariantClasses,
   variantTitleColorMap,
 } from './productCardVariants';
-import { Headline } from '../Headline/Headline';
-import { ImageWithFallback } from 'src/components/ImageWithFallback/ImageWithFallback';
-import type {
+import { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
+import Logger from 'src/logging/logger';
+import { TestProps } from 'src/test/types';
+import { Headline } from '../Headline';
+import { ImageWithFallback } from '../ImageWithFallback';
+import { Spinner } from '../Spinner';
+import {
   ProductCardConfig,
+  ProductCardVariant,
   ProductCardHoverVariant,
   ProductCardLayoutVariant,
-  ProductCardVariant,
 } from './types';
-import type { TestProps } from 'src/test/types';
-import type { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
-import Logger from 'src/logging/logger';
-import { Spinner } from '../Spinner/Spinner';
+import { Text } from 'src/components/Text/Text';
 import { formatPrice } from 'src/util/formatPrice';
+import { useImageResolver } from '@envive-ai/react-hooks/hooks';
 
 const formatReviews = (stars: number) =>
   String(
@@ -95,11 +96,26 @@ export const PriceSection = ({ originalPrice, salePrice, pricePrefix }: PriceSec
   );
 };
 
+// export const formatPrice = (price?: number, currency: string = '$'): string => {
+//   if (price == null) {
+//     return '';
+//   }
+
+//   const options: Intl.NumberFormatOptions = {};
+
+//   if (!Number.isInteger(price)) {
+//     options.minimumFractionDigits = 2;
+//     options.maximumFractionDigits = 2;
+//   }
+
+//   return `${currency}${price.toLocaleString('en-US', options)}`;
+// };
+
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
   title: string;
-  url?: string;
+  url: string;
   searchResponseId?: string;
   productResponseId?: string;
   cardDisplayLocation: ChatElementDisplayLocation.IN_CHAT | ChatElementDisplayLocation.PRODUCT_GRID;
@@ -115,7 +131,7 @@ interface ProductCardProps extends TestProps {
   aspectRatio?: '3:4' | 'square' | 'none';
   clickPosition?: number | null;
   growWithContainer?: boolean;
-  handleClick: (clickedUrl: string) => void;
+  handleClick?: (clickedUrl: string) => void;
 }
 
 export const ProductCard = ({
@@ -124,6 +140,8 @@ export const ProductCard = ({
   imageUrl,
   title,
   url,
+  // searchResponseId,
+  // productResponseId,
   originalPrice,
   averageRating,
   numberReviews,
@@ -132,13 +150,14 @@ export const ProductCard = ({
   hoverVariant,
   dataTestId,
   layoutVariant = 'normal',
+  // cardDisplayLocation,
   zoomOnHover = false,
   aspectRatio = 'none',
+  // clickPosition = null,
   growWithContainer = false,
   handleClick,
 }: ProductCardProps) => {
-  // const orgUIConfig = useAtomValue(orgUIConfigAtom);
-  // const { productCardConfig } = orgUIConfig;
+  const { resolve } = useImageResolver();
 
   const finalVariant = variant ?? productCardConfig?.variant ?? 'filled';
   const finalHoverVariant = hoverVariant ?? productCardConfig?.hoverVariant ?? 'backgroundDark';
@@ -265,15 +284,13 @@ export const ProductCard = ({
 
   return (
     <div className={containerClassnames} data-testid={dataTestId}>
-      <a href={url} onClick={() => handleClick(url || '')} target="_self" draggable={false}>
+      <a href={url} onClick={() => handleClick(url)} target="_self" draggable={false}>
         <div className={verticalContainerClassnames}>
           <div className={imageClipContainerClassnames}>
             <div className={imageContainerClassnames}>
               {imageUrl && (
                 <ImageWithFallback
-                  // TODO: Fix once
-                  // src={resolve(imageUrl, layoutVariant === 'tall' ? 300 : 178)}
-                  src={imageUrl}
+                  src={resolve(imageUrl, layoutVariant === 'tall' ? 300 : 178)}
                   alt={title}
                   fallback={<Spinner className="spiffy-tw-w-6 spiffy-tw-h-6" />}
                   imageClassnames={imageClassnames}

package/src/components/ProductCard/types.ts

@@ -1,4 +1,4 @@
-import type { ResponseCategory, SearchResponseProduct } from 'src/types/external';
+import { ResponseCategory, SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 import type { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
 
 export enum ProductCardSkeletonOverrides {

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,9 +1,9 @@
-import type { ProductCardConfig, ProductGridVariant } from '../ProductCard/types';
-import { ProductCard } from '../ProductCard/ProductCard';
+import { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
+import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
 import { productGridVariantClasses } from './productGridVariants';
 import classNames from 'classnames';
-import { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
-import { SearchResponseProduct } from 'src/types/external';
+import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+import { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
 
 interface ProductGridProps {
   productList: SearchResponseProduct[];
@@ -13,7 +13,6 @@ interface ProductGridProps {
   merchantShortName: string;
   searchResponseId: string;
   cardsGrowWithContainer?: boolean;
-  handleClick: (clickedUrl: string) => void;
 }
 
 export const ProductGrid = ({
@@ -24,7 +23,6 @@ export const ProductGrid = ({
   merchantShortName,
   searchResponseId,
   cardsGrowWithContainer = true,
-  handleClick,
 }: ProductGridProps) => {
   const {
     productCardVariant,
@@ -41,33 +39,35 @@ export const ProductGrid = ({
 
   return (
     <div className={productGridClasses}>
-      {productList.map((product: (typeof productList)[0], index: number) => (
-        <div key={product.id} className={cardContainerClasses}>
-          <ProductCard
-            productCardConfig={productCardConfig}
-            merchantShortName={merchantShortName}
-            key={product.id}
-            imageUrl={product.imageUrl}
-            searchResponseId={searchResponseId}
-            productResponseId={product.responseId}
-            title={product.title}
-            url={product.url}
-            originalPrice={product.originalPrice}
-            salePrice={product.salePrice}
-            averageRating={product.averageRating}
-            numberReviews={product.numberReviews}
-            cardDisplayLocation={ChatElementDisplayLocation.PRODUCT_GRID}
-            layoutVariant={productCardLayoutVariant}
-            variant={productCardVariant}
-            hoverVariant={productCardHoverVariant}
-            zoomOnHover={zoomOnHover}
-            aspectRatio={productCardImageAspectRatio}
-            clickPosition={index}
-            growWithContainer={cardsGrowWithContainer}
-            handleClick={handleClick}
-          />
-        </div>
-      ))}
+      {productList.map((product: SearchResponseProduct, index: number) => {
+        const camelCasedProduct: CamelCasedPropertiesDeep<SearchResponseProduct> = product;
+        return (
+          <div key={camelCasedProduct.id} className={cardContainerClasses}>
+            <ProductCard
+              productCardConfig={productCardConfig}
+              merchantShortName={merchantShortName}
+              key={camelCasedProduct.id}
+              imageUrl={camelCasedProduct.imageUrl}
+              searchResponseId={searchResponseId}
+              productResponseId={camelCasedProduct.responseId}
+              title={camelCasedProduct.title}
+              url={camelCasedProduct.url}
+              originalPrice={camelCasedProduct.originalPrice}
+              salePrice={camelCasedProduct.salePrice}
+              averageRating={camelCasedProduct.averageRating}
+              numberReviews={camelCasedProduct.numberReviews}
+              cardDisplayLocation={ChatElementDisplayLocation.PRODUCT_GRID}
+              layoutVariant={productCardLayoutVariant}
+              variant={productCardVariant}
+              hoverVariant={productCardHoverVariant}
+              zoomOnHover={zoomOnHover}
+              aspectRatio={productCardImageAspectRatio}
+              clickPosition={index}
+              growWithContainer={cardsGrowWithContainer}
+            />
+          </div>
+        );
+      })}
     </div>
   );
 };

package/src/components/{SearchInputAutocomplete → SearchAutocomplete}/SearchAutocomplete.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import classNames from 'classnames';
-import OutlinedStar from '@envive-ai/react-icons/src/OutlinedStar';
+import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
 
 interface GlobalSearchAutocompleteProps {
   id: string;

package/src/components/SearchInput/SearchInput.tsx

@@ -1,12 +1,12 @@
 import React, { useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
-import MagnifyingGlassStarVariant from '@envive-ai/react-icons/src/MagnifyingGlassStarVariant';
-import CloseIcon from '@envive-ai/react-icons/src/IconClose';
-import { TextInput } from 'src/components/TextInput/TextInput';
+import MagnifyingGlassStarVariant from '@envive-ai/react-icons/MagnifyingGlassStarVariant';
+import { SearchInputVariant } from '../SearchInputForm';
+import { TextInput } from '../TextInput';
 import { searchInputVariantClasses } from './searchInputVariants';
-import type { SearchInputVariant } from '../SearchInputForm/types';
+import { IconClose } from '@envive-ai/react-icons/src/index.js';
 
-export interface SearchInputProps {
+interface SearchInputProps {
   searchInputVariant?: SearchInputVariant;
   value: string;
   placeholder?: string;
@@ -126,7 +126,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
             aria-label="Clear search input"
             type="button"
           >
-            <CloseIcon className={closeButtonIconClassName} />
+            <IconClose className={closeButtonIconClassName} />
           </button>
         )}
       </div>