@envive-ai/react-toolkit 0.2.11 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -24,12 +24,14 @@
     "build": "tsdown",
     "build:watch": "tsdown --watch",
     "prepublish": "npm run build",
+    "storybook": "tsx ./.storybook/getMerchants.ts && storybook dev -p 6006",
+    "storybook:build": "npm run get-merchants && storybook build",
+    "storybook:get-merchants": "tsx ./.storybook/getMerchants.ts",
     "typecheck": "tsc",
     "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.5",
-    "@envive-ai/types": "^0.2.1",
+    "@envive-ai/react-hooks": "0.2.7",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "react-icons": "^5.0.1",
@@ -41,114 +43,138 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@spiffy-ai/commerce-api-client": "^1.1.0-SNAPSHOT.202510160819",
+    "@storybook/react-vite": "^9.1.4",
     "@types/node": "^24.3.2",
     "@types/react": "^19.1.12",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "tsdown": "^0.14.2",
+    "tsx": "^4.20.6",
     "typescript": "^5.4.3",
     "vitest": "^3.2.4"
   },
   "exports": {
     "./Accordion": {
-      "import": "./dist/Accordion/index.js",
-      "require": "./dist/Accordion/index.cjs"
+      "import": "./dist/components/Accordion/index.js",
+      "require": "./dist/components/Accordion/index.cjs"
     },
     "./AnimatedChevron": {
-      "import": "./dist/AnimatedChevron/index.js",
-      "require": "./dist/AnimatedChevron/index.cjs"
+      "import": "./dist/components/AnimatedChevron/index.js",
+      "require": "./dist/components/AnimatedChevron/index.cjs"
     },
     "./AppliedFiltersScrollbar": {
-      "import": "./dist/AppliedFiltersScrollbar/index.js",
-      "require": "./dist/AppliedFiltersScrollbar/index.cjs"
+      "import": "./dist/components/AppliedFiltersScrollbar/index.js",
+      "require": "./dist/components/AppliedFiltersScrollbar/index.cjs"
     },
     "./ButtonBase": {
-      "import": "./dist/ButtonBase/index.js",
-      "require": "./dist/ButtonBase/index.cjs"
+      "import": "./dist/components/ButtonBase/index.js",
+      "require": "./dist/components/ButtonBase/index.cjs"
     },
     "./DynamicFiltersScrollbar": {
-      "import": "./dist/DynamicFiltersScrollbar/index.js",
-      "require": "./dist/DynamicFiltersScrollbar/index.cjs"
+      "import": "./dist/components/DynamicFiltersScrollbar/index.js",
+      "require": "./dist/components/DynamicFiltersScrollbar/index.cjs"
     },
     "./FilterScrollbar": {
-      "import": "./dist/FilterScrollbar/index.js",
-      "require": "./dist/FilterScrollbar/index.cjs"
+      "import": "./dist/components/FilterScrollbar/index.js",
+      "require": "./dist/components/FilterScrollbar/index.cjs"
     },
     "./ImageWithFallback": {
-      "import": "./dist/ImageWithFallback/index.js",
-      "require": "./dist/ImageWithFallback/index.cjs"
+      "import": "./dist/components/ImageWithFallback/index.js",
+      "require": "./dist/components/ImageWithFallback/index.cjs"
     },
     "./ModalSheet": {
-      "import": "./dist/ModalSheet/index.js",
-      "require": "./dist/ModalSheet/index.cjs"
+      "import": "./dist/components/ModalSheet/index.js",
+      "require": "./dist/components/ModalSheet/index.cjs"
     },
     "./ProductCard": {
-      "import": "./dist/ProductCard/index.js",
-      "require": "./dist/ProductCard/index.cjs"
+      "import": "./dist/components/ProductCard/index.js",
+      "require": "./dist/components/ProductCard/index.cjs"
     },
     "./ProductGrid": {
-      "import": "./dist/ProductGrid/index.js",
-      "require": "./dist/ProductGrid/index.cjs"
+      "import": "./dist/components/ProductGrid/index.js",
+      "require": "./dist/components/ProductGrid/index.cjs"
     },
     "./RadioButton": {
-      "import": "./dist/RadioButton/index.js",
-      "require": "./dist/RadioButton/index.cjs"
+      "import": "./dist/components/RadioButton/index.js",
+      "require": "./dist/components/RadioButton/index.cjs"
     },
     "./RadioButtonGroup": {
-      "import": "./dist/RadioButtonGroup/index.js",
-      "require": "./dist/RadioButtonGroup/index.cjs"
+      "import": "./dist/components/RadioButtonGroup/index.js",
+      "require": "./dist/components/RadioButtonGroup/index.cjs"
+    },
+    "./RecommendedProducts": {
+      "import": "./dist/components/RecommendedProducts/index.js",
+      "require": "./dist/components/RecommendedProducts/index.cjs"
     },
     "./SearchAutocomplete": {
-      "import": "./dist/SearchAutocomplete/index.js",
-      "require": "./dist/SearchAutocomplete/index.cjs"
+      "import": "./dist/components/SearchAutocomplete/index.js",
+      "require": "./dist/components/SearchAutocomplete/index.cjs"
     },
     "./SearchFilter": {
-      "import": "./dist/SearchFilter/index.js",
-      "require": "./dist/SearchFilter/index.cjs"
+      "import": "./dist/components/SearchFilter/index.js",
+      "require": "./dist/components/SearchFilter/index.cjs"
     },
     "./SearchInput": {
-      "import": "./dist/SearchInput/index.js",
-      "require": "./dist/SearchInput/index.cjs"
+      "import": "./dist/components/SearchInput/index.js",
+      "require": "./dist/components/SearchInput/index.cjs"
     },
     "./SearchInputForm": {
-      "import": "./dist/SearchInputForm/index.js",
-      "require": "./dist/SearchInputForm/index.cjs"
+      "import": "./dist/components/SearchInputForm/index.js",
+      "require": "./dist/components/SearchInputForm/index.cjs"
     },
     "./SearchResultsContent": {
-      "import": "./dist/SearchResultsContent/index.js",
-      "require": "./dist/SearchResultsContent/index.cjs"
+      "import": "./dist/components/SearchResultsContent/index.js",
+      "require": "./dist/components/SearchResultsContent/index.cjs"
+    },
+    "./SearchResultsFilterButton": {
+      "import": "./dist/components/SearchResultsFilterButton/index.js",
+      "require": "./dist/components/SearchResultsFilterButton/index.cjs"
+    },
+    "./SearchResultsFilterModal": {
+      "import": "./dist/components/SearchResultsFilterModal/index.js",
+      "require": "./dist/components/SearchResultsFilterModal/index.cjs"
     },
     "./SearchResultsFilterSidebar": {
-      "import": "./dist/SearchResultsFilterSidebar/index.js",
-      "require": "./dist/SearchResultsFilterSidebar/index.cjs"
+      "import": "./dist/components/SearchResultsFilterSidebar/index.js",
+      "require": "./dist/components/SearchResultsFilterSidebar/index.cjs"
     },
     "./SearchResultsStates": {
-      "import": "./dist/SearchResultsStates/index.js",
-      "require": "./dist/SearchResultsStates/index.cjs"
+      "import": "./dist/components/SearchResultsStates/index.js",
+      "require": "./dist/components/SearchResultsStates/index.cjs"
+    },
+    "./SearchResultsToolbar": {
+      "import": "./dist/components/SearchResultsToolbar/index.js",
+      "require": "./dist/components/SearchResultsToolbar/index.cjs"
     },
     "./SparkleAnimation": {
-      "import": "./dist/SparkleAnimation/index.js",
-      "require": "./dist/SparkleAnimation/index.cjs"
+      "import": "./dist/components/SparkleAnimation/index.js",
+      "require": "./dist/components/SparkleAnimation/index.cjs"
     },
     "./Spinner": {
-      "import": "./dist/Spinner/index.js",
-      "require": "./dist/Spinner/index.cjs"
+      "import": "./dist/components/Spinner/index.js",
+      "require": "./dist/components/Spinner/index.cjs"
     },
     "./SuggestionButton": {
-      "import": "./dist/SuggestionButton/index.js",
-      "require": "./dist/SuggestionButton/index.cjs"
+      "import": "./dist/components/SuggestionButton/index.js",
+      "require": "./dist/components/SuggestionButton/index.cjs"
     },
     "./TextInput": {
-      "import": "./dist/TextInput/index.js",
-      "require": "./dist/TextInput/index.cjs"
+      "import": "./dist/components/TextInput/index.js",
+      "require": "./dist/components/TextInput/index.cjs"
     },
     "./ToggleButton": {
-      "import": "./dist/ToggleButton/index.js",
-      "require": "./dist/ToggleButton/index.cjs"
+      "import": "./dist/components/ToggleButton/index.js",
+      "require": "./dist/components/ToggleButton/index.cjs"
     },
     "./Typography": {
-      "import": "./dist/Typography/index.js",
-      "require": "./dist/Typography/index.cjs"
+      "import": "./dist/components/Typography/index.js",
+      "require": "./dist/components/Typography/index.cjs"
+    },
+    "./util": {
+      "import": "./dist/util/index.js",
+      "require": "./dist/util/index.cjs"
     },
     "./package.json": "./package.json"
   }

package/src/atoms/search/types.ts

@@ -0,0 +1 @@
+export type SearchInputVariant = 'standard';

package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx

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

package/src/components/ButtonBase/types.ts

@@ -1,4 +1,4 @@
-import { TestProps } from '@envive-ai/types';
+import { TestProps } from '@envive-ai/react-hooks/types';
 import { ButtonHTMLAttributes, CSSProperties } from 'react';
 
 export interface ButtonHoverStyles extends CSSProperties {

package/src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx

@@ -1,4 +1,4 @@
-import { SelectedFilterOption } from '@envive-ai/types';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
 import { Typography } from 'src/components/Typography';

package/src/components/ProductCard/ProductCard.tsx

@@ -3,13 +3,7 @@ import { MdStar } from 'react-icons/md';
 import Logger from 'src/logging/logger';
 import { Typography } from 'src/components/Typography';
 import { formatPrice } from 'src/util/formatPrice';
-import {
-  TestProps,
-  ProductCardConfig,
-  ProductCardVariant,
-  ProductCardHoverVariant,
-  ProductCardLayoutVariant,
-} from '@envive-ai/types';
+import { TestProps } from '@envive-ai/react-hooks/types';
 import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
 import { PRODUCT_CARD_TESTID } from '@envive-ai/react-hooks/config';
 import {
@@ -20,6 +14,12 @@ import {
 } from './productCardVariants';
 import { ImageWithFallback } from '../ImageWithFallback';
 import { Spinner } from '../Spinner';
+import {
+  ProductCardConfig,
+  ProductCardVariant,
+  ProductCardHoverVariant,
+  ProductCardLayoutVariant,
+} from './types';
 
 const formatReviews = (stars: number) =>
   String(
@@ -213,11 +213,11 @@ export const ProductCard = ({
     linkClassnames,
     zoomOnHover
       ? [
-          'spiffy-tw-transition-transform',
-          'spiffy-tw-duration-200',
-          'spiffy-tw-origin-top',
-          'hover:spiffy-tw-scale-105',
-        ]
+        'spiffy-tw-transition-transform',
+        'spiffy-tw-duration-200',
+        'spiffy-tw-origin-top',
+        'hover:spiffy-tw-scale-105',
+      ]
       : [],
   );
 

package/src/components/ProductCard/ProductCardSkeleton.tsx

@@ -1,20 +1,8 @@
 import type { FC } from 'react';
 import classNames from 'classnames';
-import { ProductCardLayoutVariant } from '@envive-ai/types';
+import { ProductCardSkeletonOverrides, ProductCardSkeletonProps } from './types';
 import { productCardLayoutVariantClasses } from './productCardVariants';
 
-enum ProductCardSkeletonOverrides {
-  PRODUCT_CARD_SKELETON_CONTAINER = 'spiffy-product-card-skeleton-container',
-  PRODUCT_CARD_SKELETON = 'spiffy-product-card-skeleton',
-}
-
-type ProductCardImageAspectRatio = '3:4' | 'square' | 'none';
-interface ProductCardSkeletonProps {
-  layoutVariant: ProductCardLayoutVariant;
-  aspectRatio: ProductCardImageAspectRatio;
-  growWithContainer?: boolean;
-}
-
 export const ProductCardSkeleton: FC<ProductCardSkeletonProps> = ({
   layoutVariant,
   aspectRatio,

package/src/components/ProductCard/index.ts

@@ -1,3 +1,4 @@
 export * from './ProductCard';
 export * from './ProductCardSkeleton';
 export * from './productCardVariants';
+export * from './types';

package/src/components/ProductCard/productCardVariants.ts

@@ -2,7 +2,7 @@ import type {
   ProductCardVariant,
   ProductCardHoverVariant,
   ProductCardLayoutVariant,
-} from '@envive-ai/types';
+} from './types';
 
 /**
  * Shared variant mapping configurations for ProductCard components

package/src/components/ProductCard/types.ts

@@ -0,0 +1,49 @@
+import { ResponseCategory, SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+import type { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
+
+export enum ProductCardSkeletonOverrides {
+  PRODUCT_CARD_SKELETON_CONTAINER = 'spiffy-product-card-skeleton-container',
+  PRODUCT_CARD_SKELETON = 'spiffy-product-card-skeleton',
+}
+
+export enum AnimatedProductCardOverrides {
+  PRODUCT_CARD_ANIMATED_CONTAINER = 'spiffy-product-card-animated-container',
+  PRODUCT_CARD_ANIMATED_IMAGE_CONTAINER = 'spiffy-product-card-animated',
+}
+
+export type ProductGridVariant = 'standard' | 'square';
+
+export type ProductCardVariant = 'filled' | 'bordered' | 'minimal' | 'transparentBordered';
+
+export type ProductCardHoverVariant = 'backgroundDark' | 'none';
+
+export type ProductCardLayoutVariant = 'normal' | 'tall' | 'square';
+export type ProductCardImageAspectRatio = '3:4' | 'square' | 'none';
+
+export interface ProductCardConfig {
+  variant: ProductCardVariant;
+  hoverVariant: ProductCardHoverVariant;
+  layoutVariant: ProductCardLayoutVariant;
+  pricePrefix?: string;
+}
+
+export interface SearchResponseProductAttributes {
+  category: ResponseCategory.Product;
+  attributes: CamelCasedPropertiesDeep<SearchResponseProduct>;
+}
+
+export interface ProductCardSkeletonProps {
+  layoutVariant: ProductCardLayoutVariant;
+  aspectRatio: ProductCardImageAspectRatio;
+  growWithContainer?: boolean;
+}
+
+export interface ProductGridProps {
+  productList: SearchResponseProductAttributes['attributes'][];
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  productCardConfig?: ProductCardConfig;
+  merchantShortName: string;
+  searchResponseId: string;
+  cardsGrowWithContainer?: boolean;
+}

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,11 +1,7 @@
 import classNames from 'classnames';
-import {
-  SearchResponseProductAttributes,
-  ProductCardConfig,
-  ProductGridVariant,
-} from '@envive-ai/types';
+import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
 import { productGridVariantClasses } from './productGridVariants';
-import { ProductCard } from '../ProductCard';
+import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
 
 interface ProductGridProps {
   productList: SearchResponseProductAttributes['attributes'][];

package/src/components/ProductGrid/productGridVariants.ts

@@ -3,7 +3,7 @@ import type {
   ProductCardLayoutVariant,
   ProductCardVariant,
   ProductGridVariant,
-} from '@envive-ai/types';
+} from '../ProductCard/types';
 
 interface ProductGridVariantClasses {
   productCardVariant: ProductCardVariant;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { useState } from 'react';
-import { TestProps } from '@envive-ai/types';
+import { TestProps } from '@envive-ai/react-hooks/types';
 import { Typography } from '../Typography';
 
 interface RadioButtonProps extends TestProps {

package/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,4 +1,4 @@
-import { TestProps } from '@envive-ai/types';
+import { TestProps } from '@envive-ai/react-hooks/types';
 import classNames from 'classnames';
 import { RadioButton } from '../RadioButton';
 

package/src/components/RecommendedProducts/RecommendedProducts.tsx

@@ -0,0 +1,97 @@
+import { SearchResponseProductAttributes } from "@envive-ai/react-hooks/application/models";
+import { ProductCardConfig, ProductGridVariant } from "@envive-ai/react-hooks/contexts/types";
+import classNames from "classnames";
+import { motion } from "framer-motion";
+import { ProductGrid } from "../ProductGrid";
+import { Typography } from "../Typography";
+
+
+interface RecommendedProductsProps {
+  retrievedProducts: SearchResponseProductAttributes['attributes'][];
+  merchantShortName: string;
+  productCardConfig?: ProductCardConfig;
+  productGridVariant?: ProductGridVariant;
+  heading?: string;
+  onProductClick?: (product: SearchResponseProductAttributes['attributes'], index: number) => void;
+}
+
+export const RecommendedProducts: React.FC<RecommendedProductsProps> = ({
+  retrievedProducts,
+  merchantShortName,
+  productCardConfig = { variant: 'minimal', hoverVariant: 'none', layoutVariant: 'square' },
+  productGridVariant = 'square',
+  heading,
+  onProductClick,
+}: RecommendedProductsProps) => {
+  const containerClasses = classNames(
+    'spiffy-tw-justify-center',
+    'spiffy-tw-overflow-hidden',
+    'spiffy-tw-bg-white',
+    // Break out of parent container to fill full viewport width using CSS calc
+    'spiffy-tw-relative',
+    'spiffy-tw-px-[24px]',
+    'spiffy-tw-py-[16px]',
+    'sm:spiffy-tw-px-[41px]',
+    'sm:spiffy-tw-py-[40px]',
+  );
+
+  const titleContainerClasses = classNames(
+    'spiffy-tw-w-full',
+    'spiffy-tw-border-b',
+    'spiffy-tw-border-solid',
+    'spiffy-tw-border-b-[--spiffy-colors-text-accent]',
+    'spiffy-tw-pb-[8px]',
+    'spiffy-tw-mb-[16px]',
+  );
+
+  const productGridClasses = classNames(
+    'spiffy-tw-grid',
+    'spiffy-tw-justify-items-stretch',
+    'spiffy-tw-grid-cols-2',
+    'md:spiffy-tw-grid-cols-3',
+    'lg:spiffy-tw-grid-cols-4',
+    'spiffy-tw-gap-x-[4px]',
+    'spiffy-tw-gap-y-[24px]',
+    'spiffy-tw-h-full',
+    'spiffy-tw-w-full',
+    'spiffy-tw-items-stretch',
+  );
+
+  if (retrievedProducts == null || retrievedProducts.length === 0) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      className={containerClasses}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+      style={{
+        // Break out of parent container padding using CSS calc
+        left: '50%',
+        right: '50%',
+        marginLeft: '-50vw',
+        marginRight: '-50vw',
+        width: '100vw',
+      }}
+    >
+      {heading && (
+        <div className={titleContainerClasses}>
+          <Typography variant="h1" className="spiffy-tw-text-[--spiffy-colors-text-accent]">
+            {heading}
+          </Typography>
+        </div>
+      )}
+      <ProductGrid
+        productList={retrievedProducts}
+        productGridVariant={productGridVariant}
+        productGridClasses={productGridClasses}
+        productCardConfig={productCardConfig}
+        merchantShortName={merchantShortName}
+        onProductClick={onProductClick}
+      />
+    </motion.div>
+  );
+};

package/src/components/RecommendedProducts/index.ts

@@ -0,0 +1,3 @@
+'use client';
+
+export * from './RecommendedProducts';

package/src/components/SearchFilter/SearchFilter.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { useCallback } from 'react';
-import { FilterItemProps, FilterProps, SearchFilterProps } from '@envive-ai/types';
+import { FilterItemProps, FilterProps } from '@envive-ai/react-hooks/types';
+import { SearchFilterProps } from './types';
 import { SearchFilterHeader } from './SearchFilterHeader';
 import { useHasFilterStateChanged } from './useHasFilterStateChanged';
 import { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from './utils';

package/src/components/SearchFilter/SearchFilterFooter.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FilterFooterProps } from '@envive-ai/types';
+import { FilterFooterProps } from '@envive-ai/react-hooks/types';
 import { ButtonBase } from '../ButtonBase';
 
 export const SearchFilterFooter = ({

package/src/components/SearchFilter/SearchFilterHeader.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Typography } from 'src/components/Typography';
-import type { SearchFilterHeaderProps } from '@envive-ai/types';
+import type { SearchFilterHeaderProps } from './types';
 
 export const SearchFilterHeader = ({
   closeModal,

package/src/components/SearchFilter/SearchFilterItem.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Typography } from 'src/components/Typography';
-import type { SearchFilterItemProps } from '@envive-ai/types';
+import type { SearchFilterItemProps } from './types';
 
 export const SearchFilterItem = ({
   filterItem,

package/src/components/SearchFilter/types.ts

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

package/src/components/SearchFilter/useHasFilterStateChanged.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { SearchFilterDatum } from '@envive-ai/types';
+import { SearchFilterDatum } from '@envive-ai/react-hooks/types';
 
 export const useHasFilterStateChanged = (filters: SearchFilterDatum[], isOpen: boolean) => {
   // Track initial filter states when modal opens

package/src/components/SearchFilter/utils.ts

@@ -1,4 +1,4 @@
-import { SearchFilterDatum, SearchFilterItemDatum } from '@envive-ai/types';
+import { SearchFilterDatum, SearchFilterItemDatum } from '@envive-ai/react-hooks/types';
 
 export const getSelectedFilterItemsCount = (filter: SearchFilterDatum) =>
   filter.items.filter((item: SearchFilterItemDatum) => item.isSelected).length;

package/src/components/SearchInput/SearchInput.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import MagnifyingGlassStarVariant from '@envive-ai/react-icons/MagnifyingGlassStarVariant';
 import IconClose from '@envive-ai/react-icons/IconClose';
-import { SearchInputVariant } from '@envive-ai/types';
+import { SearchInputVariant } from '@envive-ai/react-hooks/contexts/types';
 import { TextInput } from '../TextInput';
 import { searchInputVariantClasses } from './searchInputVariants';
 

package/src/components/SearchInput/searchInputVariants.ts

@@ -1,5 +1,5 @@
-import { colorVar } from 'src/util/colorVar';
-import { SearchInputVariant, ColorNames } from '@envive-ai/types';
+import { colorVar, ColorNames } from 'src/models/colorsConfig';
+import { SearchInputVariant } from '../../atoms/search/types';
 import { TypographyVariantMap } from '../Typography/typographyVariantClasses';
 
 type SearchInputVariantClasses = {