@envive-ai/react-toolkit 0.2.9 → 0.2.11

package/dist/{TextInput-BTTG_drp.cjs → TextInput-CYTko3-n.cjs}

@@ -1,11 +1,11 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Typography = require('./Typography-CFNWgbM5.cjs');
+const require_Typography = require('./Typography-Ds4gfOJz.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 
 //#region src/components/TextInput/TextInput.tsx
 const TextInput = react.default.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant,...rest }, ref) => {

package/dist/{TextInput-BfUhaQUc.js → TextInput-CmxnphaT.js}

@@ -1,7 +1,7 @@
-import { TypographyVariantMap, getVariantPlaceholderClassNames } from "./Typography-D3vDkBMS.js";
+import { TypographyVariantMap, getVariantPlaceholderClassNames } from "./Typography-C3QmJzFK.js";
+import { jsx } from "react/jsx-runtime";
 import React from "react";
 import classNames from "classnames";
-import { jsx } from "react/jsx-runtime";
 
 //#region src/components/TextInput/TextInput.tsx
 const TextInput = React.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant,...rest }, ref) => {

package/dist/ToggleButton/index.cjs

@@ -1,4 +1,4 @@
-require('../Typography-CFNWgbM5.cjs');
-const require_ToggleButton = require('../ToggleButton-DCiR4sB5.cjs');
+require('../Typography-Ds4gfOJz.cjs');
+const require_ToggleButton = require('../ToggleButton-CvxNLMe_.cjs');
 
 exports.ToggleButton = require_ToggleButton.ToggleButton;

package/dist/ToggleButton/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime26.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/ToggleButton/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime0.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/ToggleButton/index.js

@@ -1,4 +1,4 @@
-import "../Typography-D3vDkBMS.js";
-import { ToggleButton } from "../ToggleButton-8P9eNKy1.js";
+import "../Typography-C3QmJzFK.js";
+import { ToggleButton } from "../ToggleButton-V9Qsaks7.js";
 
 export { ToggleButton };

package/dist/{ToggleButton-DCiR4sB5.cjs → ToggleButton-CvxNLMe_.cjs}

@@ -1,9 +1,9 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Typography = require('./Typography-CFNWgbM5.cjs');
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+const require_Typography = require('./Typography-Ds4gfOJz.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
 
 //#region src/components/ToggleButton/ToggleButton.tsx
 const toggleButtonVariants = { default: {

package/dist/{ToggleButton-8P9eNKy1.js → ToggleButton-V9Qsaks7.js}

@@ -1,6 +1,6 @@
-import { Typography } from "./Typography-D3vDkBMS.js";
-import classNames from "classnames";
+import { Typography } from "./Typography-C3QmJzFK.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/ToggleButton/ToggleButton.tsx
 const toggleButtonVariants = { default: {

package/dist/Typography/index.cjs

@@ -1,4 +1,4 @@
-const require_Typography = require('../Typography-CFNWgbM5.cjs');
+const require_Typography = require('../Typography-Ds4gfOJz.cjs');
 
 exports.Typography = require_Typography.Typography;
 exports.TypographyDomVariantMap = require_Typography.TypographyDomVariantMap;

package/dist/Typography/index.d.cts

@@ -1,3 +1,3 @@
-import { ElementTypes, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames } from "../typographyVariantClasses-DTSltxPN.cjs";
-import { Typography, TypographyProps } from "../index-BMHF0IWd.cjs";
+import { ElementTypes, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames } from "../typographyVariantClasses-BFRoEloZ.cjs";
+import { Typography, TypographyProps } from "../index-DoTNu3mL.cjs";
 export { ElementTypes, Typography, TypographyDomVariantMap, TypographyProps, TypographyVariantMap, getVariantPlaceholderClassNames };

package/dist/Typography/index.d.ts

@@ -1,3 +1,3 @@
-import { ElementTypes, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames } from "../typographyVariantClasses-B6wiawat.js";
-import { Typography, TypographyProps } from "../index-Qtr26aUO.js";
+import { ElementTypes, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames } from "../typographyVariantClasses-D7h3ACAj.js";
+import { Typography, TypographyProps } from "../index-C5iOTsRG.js";
 export { ElementTypes, Typography, TypographyDomVariantMap, TypographyProps, TypographyVariantMap, getVariantPlaceholderClassNames };

package/dist/Typography/index.js

@@ -1,3 +1,3 @@
-import { Typography, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames } from "../Typography-D3vDkBMS.js";
+import { Typography, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames } from "../Typography-C3QmJzFK.js";
 
 export { Typography, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames };

package/dist/colorVar-B5CLhSof.cjs

@@ -0,0 +1,11 @@
+
+//#region src/util/colorVar.ts
+const colorVar = (color) => `var(--spiffy-colors-${color})`;
+
+//#endregion
+Object.defineProperty(exports, 'colorVar', {
+  enumerable: true,
+  get: function () {
+    return colorVar;
+  }
+});

package/dist/colorVar-BJve0Z4_.js

@@ -0,0 +1,5 @@
+//#region src/util/colorVar.ts
+const colorVar = (color) => `var(--spiffy-colors-${color})`;
+
+//#endregion
+export { colorVar };

package/dist/{index-Qtr26aUO.d.ts → index-C5iOTsRG.d.ts}

@@ -1,4 +1,4 @@
-import { ElementTypes, TypographyVariantMap } from "./typographyVariantClasses-B6wiawat.js";
+import { ElementTypes, TypographyVariantMap } from "./typographyVariantClasses-D7h3ACAj.js";
 import React from "react";
 
 //#region src/components/Typography/Typography.d.ts

package/dist/{index-BMHF0IWd.d.cts → index-DoTNu3mL.d.cts}

@@ -1,4 +1,4 @@
-import { ElementTypes, TypographyVariantMap } from "./typographyVariantClasses-DTSltxPN.cjs";
+import { ElementTypes, TypographyVariantMap } from "./typographyVariantClasses-BFRoEloZ.cjs";
 import React from "react";
 
 //#region src/components/Typography/Typography.d.ts

package/dist/{searchFilterSidebarVariants-B1P8YS86.cjs → searchFilterSidebarVariants-BQ7OC862.cjs}

@@ -1,11 +1,14 @@
-const require_colorsConfig = require('./colorsConfig-BjmNL7s7.cjs');
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_colorVar = require('./colorVar-B5CLhSof.cjs');
+let __envive_ai_types = require("@envive-ai/types");
+__envive_ai_types = require_chunk.__toESM(__envive_ai_types);
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {
 	darkButton: {
-		radioButtonFillColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundDark),
-		radioButtonHoverColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundSecondaryDark),
-		radioButtonUncheckedBorderColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BorderMedium),
+		radioButtonFillColor: require_colorVar.colorVar(__envive_ai_types.ColorNames.BackgroundDark),
+		radioButtonHoverColor: require_colorVar.colorVar(__envive_ai_types.ColorNames.BackgroundSecondaryDark),
+		radioButtonUncheckedBorderColor: require_colorVar.colorVar(__envive_ai_types.ColorNames.BorderMedium),
 		searchFilterHeaderClasses: "spiffy-tw-text-[--spiffy-colors-text-light]",
 		filterDefaultClasses: "spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
 		filterHoverClasses: "hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]",
@@ -16,9 +19,9 @@ const searchFilterSidebarVariantClasses = {
 		filterCloseIconVariant: "light"
 	},
 	lightButton: {
-		radioButtonFillColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundDark),
-		radioButtonHoverColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundSecondaryDark),
-		radioButtonUncheckedBorderColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BorderMedium),
+		radioButtonFillColor: require_colorVar.colorVar(__envive_ai_types.ColorNames.BackgroundDark),
+		radioButtonHoverColor: require_colorVar.colorVar(__envive_ai_types.ColorNames.BackgroundSecondaryDark),
+		radioButtonUncheckedBorderColor: require_colorVar.colorVar(__envive_ai_types.ColorNames.BorderMedium),
 		searchFilterHeaderClasses: "spiffy-tw-text-[--spiffy-colors-text-primary]",
 		filterDefaultClasses: "spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
 		filterHoverClasses: "hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]",

package/dist/{searchFilterSidebarVariants-CN9_kzJ8.js → searchFilterSidebarVariants-C_rWIcxf.js}

@@ -1,4 +1,5 @@
-import { ColorNames, colorVar } from "./colorsConfig-E7w6Ol6W.js";
+import { colorVar } from "./colorVar-BJve0Z4_.js";
+import { ColorNames } from "@envive-ai/types";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@envive-ai/react-hooks": "0.2.5",
+    "@envive-ai/types": "^0.2.1",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "react-icons": "^5.0.1",

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

package/src/components/ButtonBase/types.ts

@@ -1,4 +1,4 @@
-import { TestProps } from '@envive-ai/react-hooks/types';
+import { TestProps } from '@envive-ai/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/react-hooks/atoms/search';
+import { SelectedFilterOption } from '@envive-ai/types';
 import classNames from 'classnames';
 import ScrollContainer from 'react-indiana-drag-scroll';
 import { Typography } from 'src/components/Typography';

package/src/components/ProductCard/ProductCard.tsx

@@ -3,7 +3,13 @@ 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 } from '@envive-ai/react-hooks/types';
+import {
+  TestProps,
+  ProductCardConfig,
+  ProductCardVariant,
+  ProductCardHoverVariant,
+  ProductCardLayoutVariant,
+} from '@envive-ai/types';
 import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
 import { PRODUCT_CARD_TESTID } from '@envive-ai/react-hooks/config';
 import {
@@ -14,12 +20,6 @@ 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,8 +1,20 @@
 import type { FC } from 'react';
 import classNames from 'classnames';
-import { ProductCardSkeletonOverrides, ProductCardSkeletonProps } from './types';
+import { ProductCardLayoutVariant } from '@envive-ai/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,4 +1,3 @@
 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 './types';
+} from '@envive-ai/types';
 
 /**
  * Shared variant mapping configurations for ProductCard components

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,7 +1,11 @@
 import classNames from 'classnames';
-import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
+import {
+  SearchResponseProductAttributes,
+  ProductCardConfig,
+  ProductGridVariant,
+} from '@envive-ai/types';
 import { productGridVariantClasses } from './productGridVariants';
-import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
+import { ProductCard } from '../ProductCard';
 
 interface ProductGridProps {
   productList: SearchResponseProductAttributes['attributes'][];
@@ -10,6 +14,7 @@ interface ProductGridProps {
   productCardConfig: ProductCardConfig;
   merchantShortName: string;
   cardsGrowWithContainer?: boolean;
+  onProductClick?: (product: SearchResponseProductAttributes['attributes'], index: number) => void;
 }
 
 export const ProductGrid = ({
@@ -19,6 +24,7 @@ export const ProductGrid = ({
   productCardConfig,
   merchantShortName,
   cardsGrowWithContainer = true,
+  onProductClick,
 }: ProductGridProps) => {
   const {
     productCardVariant,
@@ -35,7 +41,7 @@ export const ProductGrid = ({
 
   return (
     <div className={productGridClasses}>
-      {productList.map((product: (typeof productList)[0]) => (
+      {productList.map((product: (typeof productList)[0], index: number) => (
         <div key={product.id} className={cardContainerClasses}>
           <ProductCard
             productCardConfig={productCardConfig}
@@ -53,6 +59,7 @@ export const ProductGrid = ({
             zoomOnHover={zoomOnHover}
             aspectRatio={productCardImageAspectRatio}
             growWithContainer={cardsGrowWithContainer}
+            onClick={() => onProductClick?.(product, index)}
           />
         </div>
       ))}

package/src/components/ProductGrid/productGridVariants.ts

@@ -3,7 +3,7 @@ import type {
   ProductCardLayoutVariant,
   ProductCardVariant,
   ProductGridVariant,
-} from '../ProductCard/types';
+} from '@envive-ai/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/react-hooks/types';
+import { TestProps } from '@envive-ai/types';
 import { Typography } from '../Typography';
 
 interface RadioButtonProps extends TestProps {

package/src/components/RadioButtonGroup/RadioButtonGroup.tsx

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

package/src/components/SearchFilter/SearchFilter.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import { useCallback } from 'react';
-import { FilterItemProps, FilterProps } from '@envive-ai/react-hooks/types';
-import { SearchFilterProps } from './types';
+import { FilterItemProps, FilterProps, SearchFilterProps } from '@envive-ai/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/react-hooks/types';
+import { FilterFooterProps } from '@envive-ai/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 './types';
+import type { SearchFilterHeaderProps } from '@envive-ai/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 './types';
+import type { SearchFilterItemProps } from '@envive-ai/types';
 
 export const SearchFilterItem = ({
   filterItem,

package/src/components/SearchFilter/useHasFilterStateChanged.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { SearchFilterDatum } from '@envive-ai/react-hooks/types';
+import { SearchFilterDatum } from '@envive-ai/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/react-hooks/types';
+import { SearchFilterDatum, SearchFilterItemDatum } from '@envive-ai/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/react-hooks/contexts/types';
+import { SearchInputVariant } from '@envive-ai/types';
 import { TextInput } from '../TextInput';
 import { searchInputVariantClasses } from './searchInputVariants';
 

package/src/components/SearchInput/searchInputVariants.ts

@@ -1,5 +1,5 @@
-import { colorVar, ColorNames } from 'src/models/colorsConfig';
-import { SearchInputVariant } from '../../atoms/search/types';
+import { colorVar } from 'src/util/colorVar';
+import { SearchInputVariant, ColorNames } from '@envive-ai/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;
@@ -38,15 +38,12 @@ export const SearchInputForm = ({
 }: 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(
@@ -60,7 +57,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 (

package/src/components/SearchResultsContent/SearchResultsContent.tsx

@@ -1,11 +1,11 @@
-import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
-import { SearchResultsState } from '@envive-ai/react-hooks/hooks/utils';
 import {
+  SearchResultsState,
+  SelectedFilterOption,
   ProductCardConfig,
   ProductGridVariant,
   SearchResponseProductAttributes,
-} from '../ProductCard';
-import { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar';
+  SearchFilterSidebarVariant,
+} from '@envive-ai/types';
 import {
   NoSearchResultsFound,
   SearchResultsGrid,

package/src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx

@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
 
-import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
+import { SearchFilterDatum, SelectFilterItem, SearchFilterSidebarVariant } from '@envive-ai/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,3 +1,2 @@
 export * from './searchFilterSidebarVariants';
 export * from './SearchResultsFilter';
-export * from './types';

package/src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts

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

package/src/components/SearchResultsStates/SearchResultsGrid.tsx

@@ -1,14 +1,17 @@
 import { motion } from 'framer-motion';
 import classNames from 'classnames';
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
-import { SelectedFilterOption } from '@envive-ai/react-hooks/atoms/search';
+import {
+  ProductCardConfig,
+  ProductGridVariant,
+  SearchFilterSidebarVariant,
+  SelectedFilterOption,
+} from '@envive-ai/types';
 import { AppliedFiltersScrollbar } from '../FilterScrollbar/AppliedFiltersScrollbar';
 import { DynamicFiltersScrollbar } from '../FilterScrollbar/DynamicFiltersScrollbar';
 
 import { searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar/searchFilterSidebarVariants';
-import { ProductCardConfig, ProductGridVariant } from '../ProductCard';
 import { ProductGrid } from '../ProductGrid';
-import { SearchFilterSidebarVariant } from '../SearchResultsFilterSidebar';
 
 interface SearchResultsGridProps {
   productList: SearchResponseProduct[];

package/src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx

@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion';
 import { Typography } from 'src/components/Typography';
-import { ProductGridVariant, ProductCardSkeleton } from '../ProductCard';
+import { ProductGridVariant } from '@envive-ai/types';
+import { ProductCardSkeleton } from '../ProductCard';
 import { productGridVariantClasses } from '../ProductGrid';
 import { SparkleAnimation } from '../SparkleAnimation';
 

package/src/components/SparkleAnimation/SparkleAnimation.tsx

@@ -3,12 +3,18 @@ import { type Transition, motion } from 'framer-motion';
 import classNames from 'classnames';
 
 import FourPointStar from '@envive-ai/react-icons/FourPointStar';
-import { SparkleAnimationOverride } from './types';
 
 // Animation timing constants
 const ANIMATION_CYCLE_TIME = 1000; // 1 second between cycles
 const STAR_DELAY_OFFSET = 250; // 250ms delay between each star
 
+enum SparkleAnimationOverride {
+  CONTAINER = 'spiffy-sparkle-animation-container',
+  STAR_ONE_CONTAINER = 'spiffy-sparkle-animation-star-one-container',
+  STAR_TWO_CONTAINER = 'spiffy-sparkle-animation-star-two-container',
+  STAR_THREE_CONTAINER = 'spiffy-sparkle-animation-star-three-container',
+}
+
 interface SparkleAnimationProps {
   color: string;
   className?: string;

package/src/components/SparkleAnimation/index.ts

@@ -1,2 +1 @@
 export * from './SparkleAnimation';
-export * from './types';

package/src/components/SuggestionButton/SuggestionButton.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
 import FourPointStar from '@envive-ai/react-icons/FourPointStar';
-import { TestProps } from '@envive-ai/react-hooks/types';
+import { TestProps } from '@envive-ai/types';
 import type { SuggestionButtonVariant } from './types';
 import { ButtonBase } from '../ButtonBase/ButtonBase';