@envive-ai/react-toolkit 0.1.7 → 0.1.9

package/dist/{index-ByucvlTy.d.ts → index-C5sr5-A0.d.cts}

@@ -1,31 +1,8 @@
-import { TestProps } from "./types-C0UWKVvw.js";
-import { FC } from "react";
 import * as react_jsx_runtime20 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
+import { FC } from "react";
 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/util/trim.d.ts
 /**
  * Remove spaces from the left side.
@@ -248,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;
@@ -259,7 +236,7 @@ interface SearchResponseProductAttributes {
   category: ResponseCategory.Product;
   attributes: CamelCasedPropertiesDeep<SearchResponseProduct>;
 }
-interface ProductCardSkeletonProps$1 {
+interface ProductCardSkeletonProps {
   layoutVariant: ProductCardLayoutVariant;
   aspectRatio: ProductCardImageAspectRatio;
   growWithContainer?: boolean;
@@ -302,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;
@@ -338,11 +315,6 @@ declare const ProductCard: ({
 }: ProductCardProps) => react_jsx_runtime20.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
@@ -354,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-BFdFh46m.d.cts → index-CC5ru80z.d.ts}

@@ -1,20 +1,9 @@
-import { SelectFilterItem } from "./index-DlvTcfAg.cjs";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime1 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_runtime23.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilter, SearchFilterItem, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-14eDYe9f.d.ts → index-ozZ5JSZp.d.cts}

@@ -1,20 +1,9 @@
-import { SelectFilterItem } from "./index-DLbdcczl.js";
 import * as react_jsx_runtime11 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;
@@ -55,4 +44,4 @@ declare const SearchResultsFilter: ({
   filterButtonText
 }: SearchResultsFilterProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilter, SearchFilterItem, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-B3iEVxkL.d.cts → index-vrOLXtJO.d.ts}

@@ -1,31 +1,8 @@
-import { TestProps } from "./types-D2xCS4y9.cjs";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
 import { FC } from "react";
+import * as react_jsx_runtime19 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/util/trim.d.ts
 /**
  * Remove spaces from the left side.
@@ -248,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;
@@ -259,7 +236,7 @@ interface SearchResponseProductAttributes {
   category: ResponseCategory.Product;
   attributes: CamelCasedPropertiesDeep<SearchResponseProduct>;
 }
-interface ProductCardSkeletonProps$1 {
+interface ProductCardSkeletonProps {
   layoutVariant: ProductCardLayoutVariant;
   aspectRatio: ProductCardImageAspectRatio;
   growWithContainer?: boolean;
@@ -302,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;
@@ -338,11 +315,6 @@ declare const ProductCard: ({
 }: ProductCardProps) => react_jsx_runtime19.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
@@ -354,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -24,8 +24,9 @@
     "prepublish": "npm run build"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "^0.1.1",
+    "@envive-ai/react-hooks": "^0.1.4",
     "@envive-ai/react-icons": "0.1.1",
+    "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
     "react-icons": "^5.0.1",
@@ -36,6 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@types/react": "^19.1.12",
     "tsdown": "^0.14.2",
     "typescript": "~5.8.3"
   },

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/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/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;
+};

package/src/components/SearchResultsContent/SearchResultsContent.tsx

@@ -1,4 +1,4 @@
-import { SelectedFilterOption } from 'src/atoms/search/types';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 import {
   ProductCardConfig,
   ProductGridVariant,

package/src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx

@@ -3,14 +3,15 @@ import { useCallback } from 'react';
 import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
 import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
 import { ButtonBase } from '../ButtonBase';
-import { SelectFilterItem, SearchFilter, SearchFilterHeader } from '../SearchFilter';
-import { SearchFilterSidebarVariant, type SearchFilter as SearchFilterType } from './types';
+import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
+import { SearchFilterSidebarVariant } from './types';
+import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
 
 export type SearchResultsFilterProps = {
   productCount: number;
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
-  searchFilters: SearchFilterType[];
+  searchFilters: SearchFilterDatum[];
   searchFilterSidebarVariant: SearchFilterSidebarVariant;
   searchText: string;
   onSelectFilterItem: SelectFilterItem;
@@ -57,7 +58,7 @@ export const SearchResultsFilter = ({
         radioButtonFillColor={radioButtonFillColor}
         radioButtonHoverColor={radioButtonHoverColor}
         radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
-        filterCloseIconVariant={filterCloseIconVariant}
+        // filterCloseIconVariant={filterCloseIconVariant}
         headerContent={
           <SearchFilterHeader
             closeModal={() => setIsOpen(false)}

package/src/components/SearchResultsFilterSidebar/types.ts

@@ -1,15 +1,2 @@
 export type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
 export type CloseIconVariant = 'light' | 'tertiary' | 'dark';
-
-export type SearchFilter = {
-  id: string;
-  displayName: string;
-  items: SearchFilterItem[];
-};
-
-export type SearchFilterItem = {
-  id: string;
-  displayName: string;
-  value: string;
-  isSelected: boolean;
-};

package/src/components/SearchResultsStates/SearchResultsGrid.tsx

@@ -5,10 +5,10 @@ import { motion } from 'framer-motion';
 import { searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar/searchFilterSidebarVariants';
 import classNames from 'classnames';
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
-import { SelectedFilterOption } from 'src/atoms/search/types';
 import { ProductCardConfig, ProductGridVariant } from '../ProductCard';
 import { ProductGrid } from '../ProductGrid';
 import { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 
 interface SearchResultsGridProps {
   productList: SearchResponseProduct[];
@@ -101,6 +101,7 @@ export const SearchResultsGrid = ({
         productCardConfig={productCardConfig}
         merchantShortName={merchantShortName}
         searchResponseId={searchResponseId}
+        cardDisplayLocation=""
       />
     </motion.div>
   );

package/src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx

@@ -2,7 +2,7 @@ import { motion } from 'framer-motion';
 import { ProductGridVariant, ProductCardSkeleton } from '../ProductCard';
 import { productGridVariantClasses } from '../ProductGrid';
 import { SparkleAnimation } from '../SparkleAnimation';
-import { Text } from '@envive-ai/react-toolkit/Text';
+import { Text } from 'src/components/Text';
 
 export const SearchResultsLoadingGrid = ({
   productGridVariant,

package/src/components/SparkleAnimation/SparkleAnimation.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { type Transition, motion } from 'framer-motion';
 import classNames from 'classnames';
 
-import FourPointStar from '@envive-ai/react-icons/src/FourPointStar';
+import FourPointStar from '@envive-ai/react-icons/FourPointStar';
 import { SparkleAnimationOverride } from './types';
 
 // Animation timing constants

package/src/components/SuggestionButton/SuggestionButton.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import OutlinedStar from '@envive-ai/react-icons/src/OutlinedStar';
-import FourPointStar from '@envive-ai/react-icons/src/FourPointStar';
+import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
+import FourPointStar from '@envive-ai/react-icons/FourPointStar';
 import type { SuggestionButtonVariant } from './types';
 import { ButtonBase } from '../ButtonBase/ButtonBase';
-import { TestProps } from '../../test/types';
+import { TestProps } from '@envive-ai/react-hooks/types';
 
 export const SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = 'spiffy-suggestion-button-question-class';
 export const SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS = 'spiffy-suggestion-button-answer-class';