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

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

@@ -1,14 +1,11 @@
-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);
+const require_colorsConfig = require('./colorsConfig-Dp7w5LPb.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {
 	darkButton: {
-		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),
+		radioButtonFillColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundDark),
+		radioButtonHoverColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundSecondaryDark),
+		radioButtonUncheckedBorderColor: require_colorsConfig.colorVar(require_colorsConfig.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]",
@@ -19,9 +16,9 @@ const searchFilterSidebarVariantClasses = {
 		filterCloseIconVariant: "light"
 	},
 	lightButton: {
-		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),
+		radioButtonFillColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundDark),
+		radioButtonHoverColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundSecondaryDark),
+		radioButtonUncheckedBorderColor: require_colorsConfig.colorVar(require_colorsConfig.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-C_rWIcxf.js → searchFilterSidebarVariants-gkgkflXx.js}

@@ -1,5 +1,4 @@
-import { colorVar } from "./colorVar-BJve0Z4_.js";
-import { ColorNames } from "@envive-ai/types";
+import { n as colorVar, t as ColorNames } from "./colorsConfig-CFI1KN8R.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {
@@ -32,4 +31,4 @@ const searchFilterSidebarVariantClasses = {
 };
 
 //#endregion
-export { searchFilterSidebarVariantClasses };
+export { searchFilterSidebarVariantClasses as t };

package/dist/types--eyQnaEA.d.cts

@@ -0,0 +1,4 @@
+//#region src/atoms/search/types.d.ts
+type SearchInputVariant = 'standard';
+//#endregion
+export { SearchInputVariant as t };

package/dist/types-D6fl4HOx.d.ts

@@ -0,0 +1,4 @@
+//#region src/atoms/search/types.d.ts
+type SearchInputVariant = 'standard';
+//#endregion
+export { SearchInputVariant as t };

package/dist/{typographyVariantClasses-BFRoEloZ.d.cts → typographyVariantClasses-CoRhazCU.d.cts}

@@ -116,4 +116,4 @@ declare const TypographyVariantMap: {
 };
 declare const getVariantPlaceholderClassNames: (classes: Record<string, boolean>) => Record<string, boolean>;
 //#endregion
-export { ElementTypes, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames };
+export { getVariantPlaceholderClassNames as i, TypographyDomVariantMap as n, TypographyVariantMap as r, ElementTypes as t };

package/dist/{typographyVariantClasses-D7h3ACAj.d.ts → typographyVariantClasses-_oNpv-aN.d.ts}

@@ -116,4 +116,4 @@ declare const TypographyVariantMap: {
 };
 declare const getVariantPlaceholderClassNames: (classes: Record<string, boolean>) => Record<string, boolean>;
 //#endregion
-export { ElementTypes, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames };
+export { getVariantPlaceholderClassNames as i, TypographyDomVariantMap as n, TypographyVariantMap as r, ElementTypes as t };

package/dist/util/index-C2ueYGXh.d.ts

@@ -0,0 +1,21 @@
+import * as react0 from "react";
+import { ColorNames } from "@envive-ai/react-hooks/contexts/types";
+
+//#region src/util/formatPrice.d.ts
+declare const formatPrice: (price?: number, currency?: string) => string;
+//#endregion
+//#region src/util/useScrollDirection.d.ts
+type ScrollDirection = 'up' | 'down';
+declare const useScrollDirection: (scrollContainerRef?: React.RefObject<HTMLElement>) => ScrollDirection;
+//#endregion
+//#region src/util/useStickyVisibility.d.ts
+declare const useStickyVisibility: () => {
+  toolbarRef: react0.RefObject<HTMLDivElement>;
+  isVisible: boolean;
+  toolbarHeight: number;
+};
+//#endregion
+//#region src/util/colorVar.d.ts
+declare const colorVar: (color: ColorNames) => string;
+//#endregion
+export { ScrollDirection, colorVar, formatPrice, useScrollDirection, useStickyVisibility };

package/dist/util/index-DUzbpjPa.d.cts

@@ -0,0 +1,21 @@
+import * as react0 from "react";
+import { ColorNames } from "@envive-ai/react-hooks/contexts/types";
+
+//#region src/util/formatPrice.d.ts
+declare const formatPrice: (price?: number, currency?: string) => string;
+//#endregion
+//#region src/util/useScrollDirection.d.ts
+type ScrollDirection = 'up' | 'down';
+declare const useScrollDirection: (scrollContainerRef?: React.RefObject<HTMLElement>) => ScrollDirection;
+//#endregion
+//#region src/util/useStickyVisibility.d.ts
+declare const useStickyVisibility: () => {
+  toolbarRef: react0.RefObject<HTMLDivElement>;
+  isVisible: boolean;
+  toolbarHeight: number;
+};
+//#endregion
+//#region src/util/colorVar.d.ts
+declare const colorVar: (color: ColorNames) => string;
+//#endregion
+export { ScrollDirection, colorVar, formatPrice, useScrollDirection, useStickyVisibility };

package/dist/util/index.cjs

@@ -0,0 +1,80 @@
+const require_chunk = require('../chunk-CUT6urMc.cjs');
+const require_formatPrice = require('../formatPrice-CyfkjZ3R.cjs');
+let react = require("react");
+
+//#region src/util/useScrollDirection.ts
+const useScrollDirection = (scrollContainerRef) => {
+	const [scrollDirection, setScrollDirection] = (0, react.useState)(null);
+	const touchStartY = (0, react.useRef)(0);
+	(0, react.useEffect)(() => {
+		const container = scrollContainerRef?.current || window;
+		const touchTarget = scrollContainerRef?.current || document;
+		const handleWheel = (e) => {
+			if (e.deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+		};
+		const handleTouchStart = (e) => {
+			touchStartY.current = e.touches[0].clientY;
+		};
+		const handleTouchMove = (e) => {
+			const currentTouchY = e.touches[0].clientY;
+			const deltaY = touchStartY.current - currentTouchY;
+			if (Math.abs(deltaY) < 10) return;
+			if (deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+			touchStartY.current = currentTouchY;
+		};
+		container.addEventListener("wheel", handleWheel, { passive: true });
+		touchTarget.addEventListener("touchstart", handleTouchStart, { passive: true });
+		touchTarget.addEventListener("touchmove", handleTouchMove, { passive: true });
+		return () => {
+			container.removeEventListener("wheel", handleWheel);
+			touchTarget.removeEventListener("touchstart", handleTouchStart);
+			touchTarget.removeEventListener("touchmove", handleTouchMove);
+		};
+	}, [scrollContainerRef]);
+	return scrollDirection;
+};
+
+//#endregion
+//#region src/util/useStickyVisibility.ts
+const useStickyVisibility = () => {
+	const [isVisible, setIsVisible] = (0, react.useState)(true);
+	const toolbarRef = (0, react.useRef)(null);
+	const [toolbarHeight, setToolbarHeight] = (0, react.useState)(0);
+	const [scrollY, setScrollY] = (0, react.useState)(0);
+	const scrollDirection = useScrollDirection();
+	(0, react.useEffect)(() => {
+		const handleScroll = () => {
+			setScrollY(window.scrollY);
+		};
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (toolbarRef.current) setToolbarHeight(toolbarRef.current.offsetHeight);
+	}, []);
+	(0, react.useEffect)(() => {
+		if (scrollDirection === "down" && scrollY > toolbarHeight && toolbarHeight > 0) setIsVisible(false);
+		else setIsVisible(true);
+	}, [
+		scrollDirection,
+		toolbarHeight,
+		scrollY
+	]);
+	return {
+		toolbarRef,
+		isVisible,
+		toolbarHeight
+	};
+};
+
+//#endregion
+//#region src/util/colorVar.ts
+const colorVar = (color) => `var(--spiffy-colors-${color})`;
+
+//#endregion
+exports.colorVar = colorVar;
+exports.formatPrice = require_formatPrice.formatPrice;
+exports.useScrollDirection = useScrollDirection;
+exports.useStickyVisibility = useStickyVisibility;

package/dist/util/index.js

@@ -0,0 +1,76 @@
+import { t as formatPrice } from "../formatPrice-DexQu2aZ.js";
+import { useEffect, useRef, useState } from "react";
+
+//#region src/util/useScrollDirection.ts
+const useScrollDirection = (scrollContainerRef) => {
+	const [scrollDirection, setScrollDirection] = useState(null);
+	const touchStartY = useRef(0);
+	useEffect(() => {
+		const container = scrollContainerRef?.current || window;
+		const touchTarget = scrollContainerRef?.current || document;
+		const handleWheel = (e) => {
+			if (e.deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+		};
+		const handleTouchStart = (e) => {
+			touchStartY.current = e.touches[0].clientY;
+		};
+		const handleTouchMove = (e) => {
+			const currentTouchY = e.touches[0].clientY;
+			const deltaY = touchStartY.current - currentTouchY;
+			if (Math.abs(deltaY) < 10) return;
+			if (deltaY > 0) setScrollDirection("down");
+			else setScrollDirection("up");
+			touchStartY.current = currentTouchY;
+		};
+		container.addEventListener("wheel", handleWheel, { passive: true });
+		touchTarget.addEventListener("touchstart", handleTouchStart, { passive: true });
+		touchTarget.addEventListener("touchmove", handleTouchMove, { passive: true });
+		return () => {
+			container.removeEventListener("wheel", handleWheel);
+			touchTarget.removeEventListener("touchstart", handleTouchStart);
+			touchTarget.removeEventListener("touchmove", handleTouchMove);
+		};
+	}, [scrollContainerRef]);
+	return scrollDirection;
+};
+
+//#endregion
+//#region src/util/useStickyVisibility.ts
+const useStickyVisibility = () => {
+	const [isVisible, setIsVisible] = useState(true);
+	const toolbarRef = useRef(null);
+	const [toolbarHeight, setToolbarHeight] = useState(0);
+	const [scrollY, setScrollY] = useState(0);
+	const scrollDirection = useScrollDirection();
+	useEffect(() => {
+		const handleScroll = () => {
+			setScrollY(window.scrollY);
+		};
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
+	useEffect(() => {
+		if (toolbarRef.current) setToolbarHeight(toolbarRef.current.offsetHeight);
+	}, []);
+	useEffect(() => {
+		if (scrollDirection === "down" && scrollY > toolbarHeight && toolbarHeight > 0) setIsVisible(false);
+		else setIsVisible(true);
+	}, [
+		scrollDirection,
+		toolbarHeight,
+		scrollY
+	]);
+	return {
+		toolbarRef,
+		isVisible,
+		toolbarHeight
+	};
+};
+
+//#endregion
+//#region src/util/colorVar.ts
+const colorVar = (color) => `var(--spiffy-colors-${color})`;
+
+//#endregion
+export { colorVar, formatPrice, useScrollDirection, useStickyVisibility };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.11",
+  "version": "0.2.13-arthur-1",
   "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.8",
     "@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