@envive-ai/react-toolkit 0.2.11 → 0.2.13-arthur-1

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 = {

package/src/components/SearchInputForm/SearchInputForm.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { SEARCH_INPUT_TESTID } from '@envive-ai/react-hooks/config/locators/components/search';
-import { SearchInputVariant } from '@envive-ai/types';
 import { SearchAutocomplete } from '../SearchAutocomplete';
 import { SearchInput } from '../SearchInput/SearchInput';
 import { searchInputVariantClasses } from '../SearchInput/searchInputVariants';
+import { SearchInputVariant } from '../../atoms/search/types';
 
 interface SearchInputFormProps {
   searchInputVariant: SearchInputVariant;
@@ -19,6 +19,7 @@ interface SearchInputFormProps {
   onSearchInputFocus: () => void;
   onSearchInputBlur: () => void;
   shouldShowAutocomplete: boolean;
+  searchInputRef: React.RefObject<HTMLInputElement>;
 }
 
 export const SearchInputForm = ({
@@ -35,15 +36,19 @@ export const SearchInputForm = ({
   onSearchSubmit,
   onSearchInputFocus,
   onSearchInputBlur,
+  searchInputRef,
 }: SearchInputFormProps) => {
   const { autocompleteIconColor } = searchInputVariantClasses[searchInputVariant];
 
-  const containerClasses = classNames('spiffy-tw-relative', 'spiffy-tw-w-full');
+  const containerClasses = classNames(
+    'spiffy-tw-relative',
+    'spiffy-tw-w-full'
+  );
 
   const formClasses = classNames({
     'spiffy-tw-grow': true,
     'spiffy-tw-relative': true,
-    'spiffy-tw-z-20': shouldShowAutocomplete,
+    'spiffy-tw-z-20': shouldShowAutocomplete
   });
 
   const autocompleteContainerClasses = classNames(
@@ -57,7 +62,7 @@ export const SearchInputForm = ({
     'spiffy-tw-rounded-b-lg',
     'spiffy-tw-border',
     'spiffy-tw-border-t-0',
-    'spiffy-tw-pt-4',
+    'spiffy-tw-pt-4'
   );
 
   return (
@@ -80,6 +85,7 @@ export const SearchInputForm = ({
           onChange={onSearchInputChange}
           onFocus={onSearchInputFocus}
           onBlur={onSearchInputBlur}
+          ref={searchInputRef}
         />
       </form>
       {shouldShowAutocomplete && (

package/src/components/SearchResultsContent/SearchResultsContent.tsx

@@ -1,11 +1,13 @@
+import classNames from 'classnames';
+import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
+import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
+import { SearchResultsState } from '@envive-ai/react-hooks/hooks/utils';
 import {
-  SearchResultsState,
-  SelectedFilterOption,
   ProductCardConfig,
   ProductGridVariant,
   SearchResponseProductAttributes,
-  SearchFilterSidebarVariant,
-} from '@envive-ai/types';
+} from '../ProductCard';
+import { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar';
 import {
   NoSearchResultsFound,
   SearchResultsGrid,
@@ -14,16 +16,17 @@ import {
 
 interface SearchResultsContentProps {
   searchResultsState: SearchResultsState;
-  productList: SearchResponseProductAttributes['attributes'][];
+  productList: SearchResponseProduct[];
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
   productCardConfig: ProductCardConfig;
   merchantShortName: string;
   searchFilterSidebarVariant: SearchFilterSidebarVariant;
   productGridVariant: ProductGridVariant;
-  productGridClasses: string;
   containerXPaddingClasses: string;
   selectedFilterOptions: SelectedFilterOption[];
   availableDynamicFilters: { name: string; displayName: string }[];
   onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onProductClick?: () => void;
   onToggleDynamicFilter: ({
     filter,
     dynamicFilterDisplayName,
@@ -32,51 +35,81 @@ interface SearchResultsContentProps {
     dynamicFilterDisplayName: string;
   }) => void;
   noResultsFoundText?: string;
+  searchResultsRef: React.RefObject<HTMLDivElement>;
+  toolbarHeight: number;
+  query: string;
 }
 
 export const SearchResultsContent = ({
   searchResultsState,
   productList,
+  recommendedProducts,
   productCardConfig,
   merchantShortName,
   searchFilterSidebarVariant,
   productGridVariant,
-  productGridClasses,
   containerXPaddingClasses,
   selectedFilterOptions,
   availableDynamicFilters,
+  onProductClick,
   onRemoveFilter,
   onToggleDynamicFilter,
   noResultsFoundText,
-}: SearchResultsContentProps) => (
-  <div>
-    {searchResultsState === SearchResultsState.NoResults && (
-      <NoSearchResultsFound
-        containerPaddingClasses={containerXPaddingClasses}
-        includeBottomMargin
-        noResultsFoundText={noResultsFoundText}
-      />
-    )}
-    {searchResultsState === SearchResultsState.Results && (
-      <SearchResultsGrid
-        searchFilterSidebarVariant={searchFilterSidebarVariant}
-        productCardConfig={productCardConfig}
-        merchantShortName={merchantShortName}
-        productList={productList}
-        productGridVariant={productGridVariant}
-        productGridClasses={productGridClasses}
-        containerXPaddingClasses={containerXPaddingClasses}
-        selectedFilterOptions={selectedFilterOptions}
-        availableDynamicFilters={availableDynamicFilters}
-        onRemoveFilter={onRemoveFilter}
-        onToggleDynamicFilter={onToggleDynamicFilter}
-      />
-    )}
-    {searchResultsState === SearchResultsState.Loading && (
-      <SearchResultsLoadingGrid
-        productGridVariant={productGridVariant}
-        productGridClasses={productGridClasses}
-      />
-    )}
-  </div>
-);
+  searchResultsRef,
+  toolbarHeight,
+  query,
+}: SearchResultsContentProps) => {
+  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',
+    containerXPaddingClasses,
+  );
+
+  return (
+    <div
+      ref={searchResultsRef}
+      style={{ paddingTop: `${toolbarHeight}px`, backgroundColor: 'white' }}
+    >
+      {searchResultsState === SearchResultsState.NoResults && (
+        <NoSearchResultsFound
+          containerPaddingClasses={containerXPaddingClasses}
+          noResultsFoundText={noResultsFoundText}
+          recommendedProducts={recommendedProducts}
+          searchText={query}
+          merchantShortName={merchantShortName}
+          productGridVariant={productGridVariant}
+        />
+      )}
+      {searchResultsState === SearchResultsState.Results && (
+        <SearchResultsGrid
+          searchFilterSidebarVariant={searchFilterSidebarVariant}
+          productCardConfig={productCardConfig}
+          merchantShortName={merchantShortName}
+          productList={productList}
+          productGridVariant={productGridVariant}
+          productGridClasses={productGridClasses}
+          containerXPaddingClasses={containerXPaddingClasses}
+          selectedFilterOptions={selectedFilterOptions}
+          availableDynamicFilters={availableDynamicFilters}
+          onRemoveFilter={onRemoveFilter}
+          onProductClick={onProductClick}
+          onToggleDynamicFilter={onToggleDynamicFilter}
+        />
+      )}
+      {searchResultsState === SearchResultsState.Loading && (
+        <SearchResultsLoadingGrid
+          productGridVariant={productGridVariant}
+          productGridClasses={productGridClasses}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/SearchResultsFilterButton/SearchResultsFilterButton.tsx

@@ -0,0 +1,30 @@
+import { useCallback } from 'react';
+
+import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
+import { ButtonBase } from '../ButtonBase';
+
+export type SearchResultsFilterButtonProps = {
+  setIsOpen: (isOpen: boolean) => void;
+  filterButtonText: string;
+};
+
+export const SearchResultsFilterButton = ({
+  setIsOpen,
+  filterButtonText,
+}: SearchResultsFilterButtonProps) => {
+  const openFilter = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
+
+  return (
+    <ButtonBase
+      onClick={openFilter}
+      icon={SettingsVariant}
+      iconClass="spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center"
+      text={filterButtonText}
+      textClass="spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block"
+      buttonClass="spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]"
+      disablePadding
+    />
+  );
+};

package/src/components/SearchResultsFilterButton/index.ts

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

package/src/components/SearchResultsFilterModal/SearchResultsFilterModal.tsx

@@ -0,0 +1,61 @@
+import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
+import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
+import { SearchFilterSidebarVariant, searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar';
+
+export type SearchResultsFilterModalProps = {
+  productCount: number;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  searchFilters: SearchFilterDatum[];
+  searchFilterSidebarVariant: SearchFilterSidebarVariant;
+  onSelectFilterItem: SelectFilterItem;
+  onClearAllFilters: () => void;
+  filterButtonText: string;
+};
+
+export const SearchResultsFilterModal = ({
+  productCount,
+  isOpen,
+  setIsOpen,
+  searchFilters,
+  searchFilterSidebarVariant,
+  onSelectFilterItem,
+  onClearAllFilters,
+  filterButtonText,
+}: SearchResultsFilterModalProps) => {
+  const {
+    applyFiltersUnchangedClasses,
+    applyFiltersChangedClasses,
+    searchFilterHeaderClasses,
+    radioButtonFillColor,
+    radioButtonHoverColor,
+    radioButtonUncheckedBorderColor,
+    filterCloseIconVariant,
+  } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+
+  return (
+    <SearchFilter
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      filters={searchFilters}
+      productCount={productCount}
+      selectFilterItem={onSelectFilterItem}
+      clearAllFilters={onClearAllFilters}
+      applyFiltersUnchangedClasses={applyFiltersUnchangedClasses}
+      applyFiltersChangedClasses={applyFiltersChangedClasses}
+      filterButtonText={filterButtonText}
+      radioButtonFillColor={radioButtonFillColor}
+      radioButtonHoverColor={radioButtonHoverColor}
+      radioButtonUncheckedBorderColor={radioButtonUncheckedBorderColor}
+      filterCloseIconVariant={filterCloseIconVariant}
+      headerContent={
+        <SearchFilterHeader
+          closeModal={() => setIsOpen(false)}
+          productCount={productCount}
+          headerClassName={searchFilterHeaderClasses}
+          filterCloseIconVariant={filterCloseIconVariant}
+        />
+      }
+    />
+  );
+};

package/src/components/SearchResultsFilterModal/index.ts

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

package/src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx

@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
 
-import { SearchFilterDatum, SelectFilterItem, SearchFilterSidebarVariant } from '@envive-ai/types';
+import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
 import SettingsVariant from '@envive-ai/react-icons/src/SettingsVariant.js';
 import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
 import { ButtonBase } from '../ButtonBase';
 import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
+import { SearchFilterSidebarVariant } from './types';
 
 export type SearchResultsFilterProps = {
   productCount: number;

package/src/components/SearchResultsFilterSidebar/index.ts

@@ -1,2 +1,3 @@
 export * from './searchFilterSidebarVariants';
 export * from './SearchResultsFilter';
+export * from './types';

package/src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts

@@ -1,5 +1,5 @@
-import { colorVar } from 'src/util/colorVar';
-import { SearchFilterSidebarVariant, CloseIconVariant, ColorNames } from '@envive-ai/types';
+import { ColorNames, colorVar } from 'src/models/colorsConfig';
+import type { SearchFilterSidebarVariant, CloseIconVariant } from './types';
 
 interface SearchFilterSidebarVariantClasses {
   searchFilterHeaderClasses: string;

package/src/components/SearchResultsFilterSidebar/types.ts

@@ -0,0 +1,2 @@
+export type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
+export type CloseIconVariant = 'light' | 'tertiary' | 'dark';