@envive-ai/react-toolkit 0.1.6 → 0.1.8

package/dist/{index-CcnuEYQN.d.ts → index-BCqBaFxm.d.cts}

@@ -1,53 +1,8 @@
-import { TestProps } from "./types-BruEHw-X.js";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
 import { FC } from "react";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
-//#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",
-}
-interface SearchResponseProduct {
-  id: string;
-  title: string;
-  description?: string;
-  price?: number;
-  currency?: string;
-  imageUrl?: string;
-  brand?: string;
-  category?: string;
-  availability?: string;
-  url: string;
-  responseId?: string;
-  originalPrice?: number;
-  salePrice?: number;
-  averageRating?: number;
-  numberReviews?: number;
-  [key: string]: unknown;
-}
-//#endregion
 //#region src/util/trim.d.ts
 /**
  * Remove spaces from the left side.
@@ -270,7 +225,7 @@ type ProductGridVariant = 'standard' | 'square';
 type ProductCardVariant = 'filled' | 'bordered' | 'minimal' | 'transparentBordered';
 type ProductCardHoverVariant = 'backgroundDark' | 'none';
 type ProductCardLayoutVariant = 'normal' | 'tall' | 'square';
-type ProductCardImageAspectRatio = '1/1' | '4/3' | '3/4' | '16/9' | '9/16';
+type ProductCardImageAspectRatio = '3:4' | 'square' | 'none';
 interface ProductCardConfig {
   variant: ProductCardVariant;
   hoverVariant: ProductCardHoverVariant;
@@ -281,7 +236,7 @@ interface SearchResponseProductAttributes {
   category: ResponseCategory.Product;
   attributes: CamelCasedPropertiesDeep<SearchResponseProduct>;
 }
-interface ProductCardSkeletonProps$1 {
+interface ProductCardSkeletonProps {
   layoutVariant: ProductCardLayoutVariant;
   aspectRatio: ProductCardImageAspectRatio;
   growWithContainer?: boolean;
@@ -306,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime17.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime15.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -316,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime17.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime15.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -324,7 +279,7 @@ interface ProductCardProps extends TestProps {
   url: string;
   searchResponseId?: string;
   productResponseId?: string;
-  cardDisplayLocation: ChatElementDisplayLocation.IN_CHAT | ChatElementDisplayLocation.PRODUCT_GRID;
+  cardDisplayLocation: string;
   imageUrl?: string;
   originalPrice?: number;
   averageRating?: number;
@@ -357,14 +312,9 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime17.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime15.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
@@ -376,4 +326,4 @@ 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 };
+export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, RatingSummaryProps, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/{index-BHNzU-Pc.d.ts → index-B_tehqNH.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/types.d.ts
 type SearchInputVariant = 'standard';
@@ -31,6 +31,6 @@ declare const SearchInputForm: ({
   onSearchInputChange,
   onSearchSubmit,
   searchInputDataTestId
-}: SearchInputFormProps) => react_jsx_runtime6.JSX.Element;
+}: SearchInputFormProps) => react_jsx_runtime9.JSX.Element;
 //#endregion
 export { SearchInputForm, SearchInputVariant };

package/dist/{index-BNCrvswP.d.cts → index-D4n-kZvz.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/types.d.ts
 type SearchInputVariant = 'standard';
@@ -31,6 +31,6 @@ declare const SearchInputForm: ({
   onSearchInputChange,
   onSearchSubmit,
   searchInputDataTestId
-}: SearchInputFormProps) => react_jsx_runtime2.JSX.Element;
+}: SearchInputFormProps) => react_jsx_runtime13.JSX.Element;
 //#endregion
 export { SearchInputForm, SearchInputVariant };

package/dist/{index-B0oln9VD.d.ts → index-D8gHW7ox.d.ts}

@@ -1,20 +1,9 @@
-import { SelectFilterItem } from "./index-DMXTg_9L.js";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
+import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
 type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
 type CloseIconVariant = 'light' | 'tertiary' | 'dark';
-type SearchFilter = {
-  id: string;
-  displayName: string;
-  items: SearchFilterItem[];
-};
-type SearchFilterItem = {
-  id: string;
-  displayName: string;
-  value: string;
-  isSelected: boolean;
-};
 //#endregion
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.d.ts
 interface SearchFilterSidebarVariantClasses {
@@ -37,7 +26,7 @@ type SearchResultsFilterProps = {
   productCount: number;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
-  searchFilters: SearchFilter[];
+  searchFilters: SearchFilterDatum[];
   searchFilterSidebarVariant: SearchFilterSidebarVariant;
   searchText: string;
   onSelectFilterItem: SelectFilterItem;
@@ -53,6 +42,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime3.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime15.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilter, SearchFilterItem, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-wYn2mEDm.d.cts → index-DO4ksBrm.d.ts}

@@ -1,53 +1,8 @@
-import { TestProps } from "./types-BQYpWDJ4.cjs";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
 import { FC } from "react";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
+import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
-//#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",
-}
-interface SearchResponseProduct {
-  id: string;
-  title: string;
-  description?: string;
-  price?: number;
-  currency?: string;
-  imageUrl?: string;
-  brand?: string;
-  category?: string;
-  availability?: string;
-  url: string;
-  responseId?: string;
-  originalPrice?: number;
-  salePrice?: number;
-  averageRating?: number;
-  numberReviews?: number;
-  [key: string]: unknown;
-}
-//#endregion
 //#region src/util/trim.d.ts
 /**
  * Remove spaces from the left side.
@@ -270,7 +225,7 @@ type ProductGridVariant = 'standard' | 'square';
 type ProductCardVariant = 'filled' | 'bordered' | 'minimal' | 'transparentBordered';
 type ProductCardHoverVariant = 'backgroundDark' | 'none';
 type ProductCardLayoutVariant = 'normal' | 'tall' | 'square';
-type ProductCardImageAspectRatio = '1/1' | '4/3' | '3/4' | '16/9' | '9/16';
+type ProductCardImageAspectRatio = '3:4' | 'square' | 'none';
 interface ProductCardConfig {
   variant: ProductCardVariant;
   hoverVariant: ProductCardHoverVariant;
@@ -281,7 +236,7 @@ interface SearchResponseProductAttributes {
   category: ResponseCategory.Product;
   attributes: CamelCasedPropertiesDeep<SearchResponseProduct>;
 }
-interface ProductCardSkeletonProps$1 {
+interface ProductCardSkeletonProps {
   layoutVariant: ProductCardLayoutVariant;
   aspectRatio: ProductCardImageAspectRatio;
   growWithContainer?: boolean;
@@ -306,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime17.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime16.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -316,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime17.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime16.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -324,7 +279,7 @@ interface ProductCardProps extends TestProps {
   url: string;
   searchResponseId?: string;
   productResponseId?: string;
-  cardDisplayLocation: ChatElementDisplayLocation.IN_CHAT | ChatElementDisplayLocation.PRODUCT_GRID;
+  cardDisplayLocation: string;
   imageUrl?: string;
   originalPrice?: number;
   averageRating?: number;
@@ -357,14 +312,9 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime17.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime16.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
@@ -376,4 +326,4 @@ 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 };
+export { AnimatedProductCardOverrides, PriceSection, ProductCard, ProductCardConfig, ProductCardHoverVariant, ProductCardImageAspectRatio, ProductCardLayoutVariant, ProductCardSkeleton, ProductCardSkeletonOverrides, ProductCardSkeletonProps, ProductCardVariant, ProductGridProps, ProductGridVariant, RatingSummary, RatingSummaryProps, SearchResponseProductAttributes, productCardLayoutVariantClasses, variantClassMap, variantHoverClassMap, variantTitleColorMap };

package/dist/{index-CQlBDGTL.d.cts → index-DV2K-9lE.d.cts}

@@ -1,20 +1,9 @@
-import { SelectFilterItem } from "./index-B125udRj.cjs";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
+import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
 type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
 type CloseIconVariant = 'light' | 'tertiary' | 'dark';
-type SearchFilter = {
-  id: string;
-  displayName: string;
-  items: SearchFilterItem[];
-};
-type SearchFilterItem = {
-  id: string;
-  displayName: string;
-  value: string;
-  isSelected: boolean;
-};
 //#endregion
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.d.ts
 interface SearchFilterSidebarVariantClasses {
@@ -37,7 +26,7 @@ type SearchResultsFilterProps = {
   productCount: number;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
-  searchFilters: SearchFilter[];
+  searchFilters: SearchFilterDatum[];
   searchFilterSidebarVariant: SearchFilterSidebarVariant;
   searchText: string;
   onSelectFilterItem: SelectFilterItem;
@@ -53,6 +42,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime16.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilter, SearchFilterItem, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -24,7 +24,7 @@
     "prepublish": "npm run build"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "^0.1.1",
+    "@envive-ai/react-hooks": "^0.1.3",
     "@envive-ai/react-icons": "0.1.1",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
@@ -36,6 +36,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/react": "^19.1.12",
     "tsdown": "^0.14.2",
     "typescript": "~5.8.3"
   },
@@ -44,10 +45,18 @@
       "import": "./dist/Accordion/index.js",
       "require": "./dist/Accordion/index.cjs"
     },
+    "./AppliedFiltersScrollbar": {
+      "import": "./dist/AppliedFiltersScrollbar/index.js",
+      "require": "./dist/AppliedFiltersScrollbar/index.cjs"
+    },
     "./ButtonBase": {
       "import": "./dist/ButtonBase/index.js",
       "require": "./dist/ButtonBase/index.cjs"
     },
+    "./DynamicFiltersScrollbar": {
+      "import": "./dist/DynamicFiltersScrollbar/index.js",
+      "require": "./dist/DynamicFiltersScrollbar/index.cjs"
+    },
     "./FilterScrollbar": {
       "import": "./dist/FilterScrollbar/index.js",
       "require": "./dist/FilterScrollbar/index.cjs"
@@ -84,6 +93,10 @@
       "import": "./dist/SearchInputForm/index.js",
       "require": "./dist/SearchInputForm/index.cjs"
     },
+    "./SearchResultsContent": {
+      "import": "./dist/SearchResultsContent/index.js",
+      "require": "./dist/SearchResultsContent/index.cjs"
+    },
     "./SearchResultsFilterSidebar": {
       "import": "./dist/SearchResultsFilterSidebar/index.js",
       "require": "./dist/SearchResultsFilterSidebar/index.cjs"

package/src/components/Accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion';
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
-import { Text } from '@envive-ai/react-toolkit/Text';
+import { Text } from 'src/components/Text';
 import ChevronDown from '@envive-ai/react-icons/ChevronDown';
 
 interface AccordionProps {

package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx

@@ -1,7 +1,7 @@
 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';
+import { Text } from 'src/components/Text';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 
 interface AppliedFiltersScrollbarProps {
   selectedFilterOptions: SelectedFilterOption[];

package/src/components/AppliedFiltersScrollbar/index.ts

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

package/src/components/ButtonBase/types.ts

@@ -1,5 +1,5 @@
+import { TestProps } from '@envive-ai/react-hooks/types';
 import { ButtonHTMLAttributes, CSSProperties } from 'react';
-import { TestProps } from 'src/test/types';
 
 export interface ButtonHoverStyles extends CSSProperties {
   backgroundColor?: string;

package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
-import { Text } from '@envive-ai/react-toolkit/Text';
+import { Text } from 'src/components/Text';
 
 interface DynamicFiltersScrollbarProps {
   availableDynamicFilters: { name: string; displayName: string }[];

package/src/components/DynamicFiltersScrollbar/index.ts

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

package/src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx

@@ -1,7 +1,7 @@
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
 import { Text } from 'src/components/Text/Text';
-import type { SelectedFilterOption } from 'src/atoms/search/types';
 
 interface AppliedFiltersScrollbarProps {
   selectedFilterOptions: SelectedFilterOption[];

package/src/components/ProductCard/ProductCard.tsx

@@ -6,9 +6,7 @@ import {
   productCardLayoutVariantClasses,
   variantTitleColorMap,
 } from './productCardVariants';
-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';
@@ -21,13 +19,14 @@ import {
 import { Text } from 'src/components/Text/Text';
 import { formatPrice } from 'src/util/formatPrice';
 import { useImageResolver } from '@envive-ai/react-hooks/hooks';
+import { TestProps } from '@envive-ai/react-hooks/types';
 
 const formatReviews = (stars: number) =>
   String(
     Number(stars).toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 }),
   );
 
-interface RatingSummaryProps {
+export interface RatingSummaryProps {
   stars: number;
   reviewCount: number;
   className?: string;
@@ -118,7 +117,7 @@ interface ProductCardProps extends TestProps {
   url: string;
   searchResponseId?: string;
   productResponseId?: string;
-  cardDisplayLocation: ChatElementDisplayLocation.IN_CHAT | ChatElementDisplayLocation.PRODUCT_GRID;
+  cardDisplayLocation: string;
   imageUrl?: string;
   originalPrice?: number;
   averageRating?: number;

package/src/components/ProductCard/ProductCardSkeleton.tsx

@@ -1,14 +1,8 @@
 import type { FC } from 'react';
 import classNames from 'classnames';
-import { ProductCardSkeletonOverrides, type ProductCardLayoutVariant } from './types';
+import { ProductCardSkeletonOverrides, ProductCardSkeletonProps } from './types';
 import { productCardLayoutVariantClasses } from './productCardVariants';
 
-interface ProductCardSkeletonProps {
-  layoutVariant: ProductCardLayoutVariant;
-  aspectRatio?: '3:4' | 'square' | 'none';
-  growWithContainer?: boolean;
-}
-
 export const ProductCardSkeleton: FC<ProductCardSkeletonProps> = ({
   layoutVariant,
   aspectRatio,

package/src/components/ProductCard/types.ts

@@ -18,7 +18,7 @@ export type ProductCardVariant = 'filled' | 'bordered' | 'minimal' | 'transparen
 export type ProductCardHoverVariant = 'backgroundDark' | 'none';
 
 export type ProductCardLayoutVariant = 'normal' | 'tall' | 'square';
-export type ProductCardImageAspectRatio = '1/1' | '4/3' | '3/4' | '16/9' | '9/16';
+export type ProductCardImageAspectRatio = '3:4' | 'square' | 'none';
 
 export interface ProductCardConfig {
   variant: ProductCardVariant;

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,4 +1,3 @@
-import { ChatElementDisplayLocation } from 'src/config/chatElementDisplayLocation';
 import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
 import { productGridVariantClasses } from './productGridVariants';
 import classNames from 'classnames';
@@ -13,6 +12,7 @@ interface ProductGridProps {
   merchantShortName: string;
   searchResponseId: string;
   cardsGrowWithContainer?: boolean;
+  cardDisplayLocation: string;
 }
 
 export const ProductGrid = ({
@@ -23,6 +23,7 @@ export const ProductGrid = ({
   merchantShortName,
   searchResponseId,
   cardsGrowWithContainer = true,
+  cardDisplayLocation,
 }: ProductGridProps) => {
   const {
     productCardVariant,
@@ -56,7 +57,7 @@ export const ProductGrid = ({
               salePrice={camelCasedProduct.salePrice}
               averageRating={camelCasedProduct.averageRating}
               numberReviews={camelCasedProduct.numberReviews}
-              cardDisplayLocation={ChatElementDisplayLocation.PRODUCT_GRID}
+              cardDisplayLocation={cardDisplayLocation}
               layoutVariant={productCardLayoutVariant}
               variant={productCardVariant}
               hoverVariant={productCardHoverVariant}

package/src/components/SearchFilter/SearchFilter.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { SearchFilterItem } from './SearchFilterItem';
-import type { SearchFilterProps } from './types';
 import { Text } from 'src/components/Text/Text';
 import { ButtonBase } from 'src/components/ButtonBase/ButtonBase';
+import { SearchFilterProps } from './types';
 
 export const SearchFilter = ({
   isOpen,
@@ -47,15 +47,15 @@ export const SearchFilter = ({
         {headerContent}
         <div className="spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6">
           {filters.map((filter) => (
-            <div key={filter.id} className="spiffy-tw-mb-6">
+            <div key={filter.filterId} className="spiffy-tw-mb-6">
               <Text variant="body2" className="spiffy-tw-font-medium spiffy-tw-mb-3">
                 {filter.displayName}
               </Text>
               <ul>
                 {filter.items.map((item) => (
                   <SearchFilterItem
-                    key={item.id}
-                    filterItem={item}
+                    key={item.filterItemId}
+                    filterItem={{ ...item, filterId: filter.filterId }}
                     onSelectFilterItem={selectFilterItem}
                     radioButtonFillColor={radioButtonFillColor}
                     radioButtonHoverColor={radioButtonHoverColor}

package/src/components/SearchFilter/index.ts

@@ -1,4 +1,3 @@
 export { SearchFilter } from './SearchFilter';
 export * from './SearchFilterHeader';
 export { SearchFilterItem } from './SearchFilterItem';
-export * from './types';

package/src/components/SearchFilter/types.ts

@@ -1,19 +1,13 @@
-import type { ReactNode } from 'react';
+import {
+  SearchFilterDatum,
+  SearchFilterItemDatum,
+  SelectFilterItem,
+} from '@envive-ai/react-hooks/types';
 
-export type SearchFilterItem = {
-  id: string;
-  displayName: string;
-  value: string;
-  isSelected: boolean;
-};
-
-export type SearchFilter = {
-  id: string;
-  displayName: string;
-  items: SearchFilterItem[];
-};
-
-export type SelectFilterItem = (filterItem: SearchFilterItem) => void;
+export interface SearchFilterItem extends SearchFilterItemDatum {
+  filterId: string;
+  filterItemId: string;
+}
 
 export interface SearchFilterItemProps {
   filterItem: SearchFilterItem;
@@ -30,19 +24,21 @@ export interface SearchFilterHeaderProps {
   filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
 }
 
-export interface SearchFilterProps {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  filters: SearchFilter[];
-  productCount: number;
+export type SearchFilterProps = {
+  filters: SearchFilterDatum[];
   selectFilterItem: SelectFilterItem;
   clearAllFilters: () => void;
+  productCount: number;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
   applyFiltersUnchangedClasses: string;
   applyFiltersChangedClasses: string;
-  filterButtonText: string;
+  headerContent?: React.ReactNode;
+  footerContent?: React.ReactNode;
+  filterButtonText?: string; // New prop for custom button text
+  headerClassName?: string;
   radioButtonFillColor: string;
-  radioButtonHoverColor: string;
-  radioButtonUncheckedBorderColor: string;
-  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
-  headerContent: ReactNode;
-}
+  radioButtonHoverColor?: string;
+  radioButtonUncheckedBorderColor?: string;
+  // filterCloseIconVariant: CloseIconVariant;
+};