@envive-ai/react-toolkit 0.2.13 → 0.2.14

package/dist/util/internal.d.cts

@@ -0,0 +1,22 @@
+import { Trim } from "./trim.cjs";
+
+//#region src/util/internal.d.ts
+
+/**
+ * Returns a boolean for whether the string is numeric.
+ *
+ * This type is a workaround for [Microsoft/TypeScript#46109](https://github.com/microsoft/TypeScript/issues/46109#issuecomment-930307987).
+ */
+type IsNumeric<T extends string> = T extends `${number}` ? Trim<T> extends T ? true : false : false;
+/**
+ * Returns a boolean for whether the string is lowercased.
+ */
+type IsLowerCase<T extends string> = T extends Lowercase<T> ? true : false;
+/**
+ * Returns a boolean for whether the string is upper-cased.
+ */
+type IsUpperCase<T extends string> = T extends Uppercase<T> ? true : false;
+type WordSeparators = '-' | '_' | Whitespace;
+type Whitespace = '\u{9}' | '\u{A}' | '\u{B}' | '\u{C}' | '\u{D}' | '\u{20}' | '\u{85}' | '\u{A0}' | '\u{1680}' | '\u{2000}' | '\u{2001}' | '\u{2002}' | '\u{2003}' | '\u{2004}' | '\u{2005}' | '\u{2006}' | '\u{2007}' | '\u{2008}' | '\u{2009}' | '\u{200A}' | '\u{2028}' | '\u{2029}' | '\u{202F}' | '\u{205F}' | '\u{3000}' | '\u{FEFF}';
+//#endregion
+export { IsLowerCase, IsNumeric, IsUpperCase, Whitespace, WordSeparators };

package/dist/util/internal.d.ts

@@ -0,0 +1,22 @@
+import { Trim } from "./trim.js";
+
+//#region src/util/internal.d.ts
+
+/**
+ * Returns a boolean for whether the string is numeric.
+ *
+ * This type is a workaround for [Microsoft/TypeScript#46109](https://github.com/microsoft/TypeScript/issues/46109#issuecomment-930307987).
+ */
+type IsNumeric<T extends string> = T extends `${number}` ? Trim<T> extends T ? true : false : false;
+/**
+ * Returns a boolean for whether the string is lowercased.
+ */
+type IsLowerCase<T extends string> = T extends Lowercase<T> ? true : false;
+/**
+ * Returns a boolean for whether the string is upper-cased.
+ */
+type IsUpperCase<T extends string> = T extends Uppercase<T> ? true : false;
+type WordSeparators = '-' | '_' | Whitespace;
+type Whitespace = '\u{9}' | '\u{A}' | '\u{B}' | '\u{C}' | '\u{D}' | '\u{20}' | '\u{85}' | '\u{A0}' | '\u{1680}' | '\u{2000}' | '\u{2001}' | '\u{2002}' | '\u{2003}' | '\u{2004}' | '\u{2005}' | '\u{2006}' | '\u{2007}' | '\u{2008}' | '\u{2009}' | '\u{200A}' | '\u{2028}' | '\u{2029}' | '\u{202F}' | '\u{205F}' | '\u{3000}' | '\u{FEFF}';
+//#endregion
+export { IsLowerCase, IsNumeric, IsUpperCase, Whitespace, WordSeparators };

package/dist/util/splitWords.d.cts

@@ -0,0 +1,28 @@
+import { IsLowerCase, IsNumeric, IsUpperCase, WordSeparators } from "./internal.cjs";
+
+//#region src/util/splitWords.d.ts
+type SkipEmptyWord<Word extends string> = Word extends '' ? [] : [Word];
+type RemoveLastCharacter<Sentence extends string, Character extends string> = Sentence extends `${infer LeftSide}${Character}` ? SkipEmptyWord<LeftSide> : never;
+/**
+ * Split a string (almost) like Lodash's `_.words()` function.
+ *
+ * - Split on each word that begins with a capital letter.
+ * - Split on each {@link WordSeparators}.
+ * - Split on numeric sequence.
+ *
+ * @example
+ * ```
+ * type Words0 = SplitWords<'helloWorld'>; // ['hello', 'World']
+ * type Words1 = SplitWords<'helloWORLD'>; // ['hello', 'WORLD']
+ * type Words2 = SplitWords<'hello-world'>; // ['hello', 'world']
+ * type Words3 = SplitWords<'--hello the_world'>; // ['hello', 'the', 'world']
+ * type Words4 = SplitWords<'lifeIs42'>; // ['life', 'Is', '42']
+ * ```
+ *
+ * @internal
+ * @category Change case
+ * @category Template literal
+ */
+type SplitWords<Sentence extends string, LastCharacter extends string = '', CurrentWord extends string = ''> = Sentence extends `${infer FirstCharacter}${infer RemainingCharacters}` ? FirstCharacter extends WordSeparators ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters>] : LastCharacter extends '' ? SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter> : [false, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, false] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [true, true] extends [IsLowerCase<LastCharacter>, IsUpperCase<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsUpperCase<LastCharacter>, IsLowerCase<FirstCharacter>] ? [...RemoveLastCharacter<CurrentWord, LastCharacter>, ...SplitWords<RemainingCharacters, FirstCharacter, `${LastCharacter}${FirstCharacter}`>] : SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [...SkipEmptyWord<CurrentWord>];
+//#endregion
+export { SplitWords };

package/dist/util/splitWords.d.ts

@@ -0,0 +1,28 @@
+import { IsLowerCase, IsNumeric, IsUpperCase, WordSeparators } from "./internal.js";
+
+//#region src/util/splitWords.d.ts
+type SkipEmptyWord<Word extends string> = Word extends '' ? [] : [Word];
+type RemoveLastCharacter<Sentence extends string, Character extends string> = Sentence extends `${infer LeftSide}${Character}` ? SkipEmptyWord<LeftSide> : never;
+/**
+ * Split a string (almost) like Lodash's `_.words()` function.
+ *
+ * - Split on each word that begins with a capital letter.
+ * - Split on each {@link WordSeparators}.
+ * - Split on numeric sequence.
+ *
+ * @example
+ * ```
+ * type Words0 = SplitWords<'helloWorld'>; // ['hello', 'World']
+ * type Words1 = SplitWords<'helloWORLD'>; // ['hello', 'WORLD']
+ * type Words2 = SplitWords<'hello-world'>; // ['hello', 'world']
+ * type Words3 = SplitWords<'--hello the_world'>; // ['hello', 'the', 'world']
+ * type Words4 = SplitWords<'lifeIs42'>; // ['life', 'Is', '42']
+ * ```
+ *
+ * @internal
+ * @category Change case
+ * @category Template literal
+ */
+type SplitWords<Sentence extends string, LastCharacter extends string = '', CurrentWord extends string = ''> = Sentence extends `${infer FirstCharacter}${infer RemainingCharacters}` ? FirstCharacter extends WordSeparators ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters>] : LastCharacter extends '' ? SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter> : [false, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, false] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsNumeric<LastCharacter>, IsNumeric<FirstCharacter>] ? SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [true, true] extends [IsLowerCase<LastCharacter>, IsUpperCase<FirstCharacter>] ? [...SkipEmptyWord<CurrentWord>, ...SplitWords<RemainingCharacters, FirstCharacter, FirstCharacter>] : [true, true] extends [IsUpperCase<LastCharacter>, IsLowerCase<FirstCharacter>] ? [...RemoveLastCharacter<CurrentWord, LastCharacter>, ...SplitWords<RemainingCharacters, FirstCharacter, `${LastCharacter}${FirstCharacter}`>] : SplitWords<RemainingCharacters, FirstCharacter, `${CurrentWord}${FirstCharacter}`> : [...SkipEmptyWord<CurrentWord>];
+//#endregion
+export { SplitWords };

package/dist/util/trim.d.cts

@@ -0,0 +1,28 @@
+import { Whitespace } from "./internal.cjs";
+
+//#region src/util/trim.d.ts
+
+/**
+ * Remove spaces from the left side.
+ */
+type TrimLeft<V extends string> = V extends `${Whitespace}${infer R}` ? TrimLeft<R> : V;
+/**
+ * Remove spaces from the right side.
+ */
+type TrimRight<V extends string> = V extends `${infer R}${Whitespace}` ? TrimRight<R> : V;
+/**
+ * Remove leading and trailing spaces from a string.
+ * @example
+ * ```
+ * import type {Trim} from 'type-fest';
+ *
+ * Trim<' foo '>
+ * //=> 'foo'
+ * ```
+ *
+ * @category String
+ * @category Template literal
+ */
+type Trim<V extends string> = TrimLeft<TrimRight<V>>;
+//#endregion
+export { Trim };

package/dist/util/trim.d.ts

@@ -0,0 +1,28 @@
+import { Whitespace } from "./internal.js";
+
+//#region src/util/trim.d.ts
+
+/**
+ * Remove spaces from the left side.
+ */
+type TrimLeft<V extends string> = V extends `${Whitespace}${infer R}` ? TrimLeft<R> : V;
+/**
+ * Remove spaces from the right side.
+ */
+type TrimRight<V extends string> = V extends `${infer R}${Whitespace}` ? TrimRight<R> : V;
+/**
+ * Remove leading and trailing spaces from a string.
+ * @example
+ * ```
+ * import type {Trim} from 'type-fest';
+ *
+ * Trim<' foo '>
+ * //=> 'foo'
+ * ```
+ *
+ * @category String
+ * @category Template literal
+ */
+type Trim<V extends string> = TrimLeft<TrimRight<V>>;
+//#endregion
+export { Trim };

package/dist/util/unknownArray.d.cts

@@ -0,0 +1,28 @@
+//#region src/util/unknownArray.d.ts
+/**
+ * Represents an array with `unknown` value.
+ *
+ * Use case: You want a type that all arrays can be assigned to, but you don't care about the value.
+ *
+ * @example
+ * ```
+ * import type {UnknownArray} from 'type-fest';
+ *
+ * type IsArray<T> = T extends UnknownArray ? true : false;
+ *
+ * type A = IsArray<['foo']>;
+ * //=> true
+ *
+ * type B = IsArray<readonly number[]>;
+ * //=> true
+ *
+ * type C = IsArray<string>;
+ * //=> false
+ * ```
+ *
+ * @category Type
+ * @category Array
+ */
+type UnknownArray = readonly unknown[];
+//#endregion
+export { UnknownArray };

package/dist/util/unknownArray.d.ts

@@ -0,0 +1,28 @@
+//#region src/util/unknownArray.d.ts
+/**
+ * Represents an array with `unknown` value.
+ *
+ * Use case: You want a type that all arrays can be assigned to, but you don't care about the value.
+ *
+ * @example
+ * ```
+ * import type {UnknownArray} from 'type-fest';
+ *
+ * type IsArray<T> = T extends UnknownArray ? true : false;
+ *
+ * type A = IsArray<['foo']>;
+ * //=> true
+ *
+ * type B = IsArray<readonly number[]>;
+ * //=> true
+ *
+ * type C = IsArray<string>;
+ * //=> false
+ * ```
+ *
+ * @category Type
+ * @category Array
+ */
+type UnknownArray = readonly unknown[];
+//#endregion
+export { UnknownArray };

package/dist/util/useScrollDirection.cjs

@@ -0,0 +1,39 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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
+exports.useScrollDirection = useScrollDirection;

package/dist/util/useScrollDirection.d.cts

@@ -0,0 +1,5 @@
+//#region src/util/useScrollDirection.d.ts
+type ScrollDirection = 'up' | 'down';
+declare const useScrollDirection: (scrollContainerRef?: React.RefObject<HTMLElement>) => ScrollDirection;
+//#endregion
+export { ScrollDirection, useScrollDirection };

package/dist/util/useScrollDirection.d.ts

@@ -0,0 +1,5 @@
+//#region src/util/useScrollDirection.d.ts
+type ScrollDirection = 'up' | 'down';
+declare const useScrollDirection: (scrollContainerRef?: React.RefObject<HTMLElement>) => ScrollDirection;
+//#endregion
+export { ScrollDirection, useScrollDirection };

package/dist/util/useScrollDirection.js

@@ -0,0 +1,38 @@
+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
+export { useScrollDirection };

package/dist/util/useStickyVisibility.cjs

@@ -0,0 +1,38 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_useScrollDirection = require('./useScrollDirection.cjs');
+let react = require("react");
+
+//#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 = require_useScrollDirection.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
+exports.useStickyVisibility = useStickyVisibility;

package/dist/util/useStickyVisibility.d.cts

@@ -0,0 +1,10 @@
+import * as react0 from "react";
+
+//#region src/util/useStickyVisibility.d.ts
+declare const useStickyVisibility: () => {
+  toolbarRef: react0.RefObject<HTMLDivElement>;
+  isVisible: boolean;
+  toolbarHeight: number;
+};
+//#endregion
+export { useStickyVisibility };

package/dist/util/useStickyVisibility.d.ts

@@ -0,0 +1,10 @@
+import * as react0 from "react";
+
+//#region src/util/useStickyVisibility.d.ts
+declare const useStickyVisibility: () => {
+  toolbarRef: react0.RefObject<HTMLDivElement>;
+  isVisible: boolean;
+  toolbarHeight: number;
+};
+//#endregion
+export { useStickyVisibility };

package/dist/util/useStickyVisibility.js

@@ -0,0 +1,37 @@
+import { useScrollDirection } from "./useScrollDirection.js";
+import { useEffect, useRef, useState } from "react";
+
+//#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
+export { useStickyVisibility };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -31,7 +31,6 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.9",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "react-icons": "^5.0.1",

package/src/components/ButtonBase/ButtonBase.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { createElement, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { ButtonBaseOverrides, ButtonBaseProps } from './types';
 import { Typography } from '../Typography';
 
@@ -15,6 +15,7 @@ export const ButtonBase = ({
   onClick,
   disablePadding = false,
 }: ButtonBaseProps) => {
+  const RenderedIcon = () => icon;
   const buttonRef = useRef<HTMLButtonElement | null>(null);
 
   const buttonClassName = classNames({
@@ -59,10 +60,7 @@ export const ButtonBase = ({
       data-testid={dataTestId}
       onClick={onClick}
     >
-      {icon &&
-        createElement(icon, {
-          className: iconClassName,
-        })}
+      {icon && <RenderedIcon />}
       <Typography className={textClassName}>{text}</Typography>
     </button>
   );

package/src/components/ButtonBase/types.ts

@@ -1,4 +1,3 @@
-import { TestProps } from '@envive-ai/react-hooks/types';
 import { ButtonHTMLAttributes, CSSProperties } from 'react';
 
 export interface ButtonHoverStyles extends CSSProperties {
@@ -6,17 +5,18 @@ export interface ButtonHoverStyles extends CSSProperties {
   color?: string;
 }
 
-export interface ButtonBaseProps extends TestProps {
+export interface ButtonBaseProps {
   type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
   isDisabled?: boolean;
   dataAttributes?: Record<string, string>;
   buttonClass?: string;
   text: string;
   textClass?: string;
-  icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  icon?: React.ReactNode;
   iconClass?: string;
   onClick?: () => void;
   disablePadding?: boolean;
+  dataTestId?: string;
 }
 
 export enum ButtonBaseOverrides {

package/src/components/ModalSheet/common/closeIcon.tsx

@@ -1,7 +1,5 @@
-import { useMemo } from 'react';
 import classNames from 'classnames';
-import { GrFormClose } from 'react-icons/gr';
-import { IconContext } from 'react-icons/lib';
+import IconCloseVariant from '@envive-ai/react-icons/IconCloseVariant';
 import { ModalSheetCloseIconProps } from '../types';
 
 const closeIconVariantMapping = {
@@ -21,7 +19,7 @@ const closeIconVariantMapping = {
 
 export const ModalSheetCloseIcon = ({
   closeIconVariant = 'tertiary',
-  closeIcon = <GrFormClose />,
+  closeIcon = <IconCloseVariant />,
   iconSize = '20px',
   closeModal,
 }: ModalSheetCloseIconProps) => {
@@ -31,14 +29,13 @@ export const ModalSheetCloseIcon = ({
     ...closeIconVariantMapping[closeIconVariant],
   });
 
-  const closeIconContextValue = useMemo(() => ({ size: iconSize }), [iconSize]);
   return (
     <button
       type="button"
       className={closeIconClassNames}
       onClick={closeModal}
     >
-      <IconContext.Provider value={closeIconContextValue}>{closeIcon}</IconContext.Provider>
+      {closeIcon || <IconCloseVariant style={{ width: iconSize, height: iconSize }} />}
     </button>
   );
 };

package/src/components/ProductCard/ProductCard.tsx

@@ -3,7 +3,6 @@ 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 { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
 import { PRODUCT_CARD_TESTID } from '@envive-ai/react-hooks/config';
 import {
@@ -97,7 +96,7 @@ export const PriceSection = ({ originalPrice, salePrice, pricePrefix }: PriceSec
   );
 };
 
-interface ProductCardProps extends TestProps {
+interface ProductCardProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
   title: string;
@@ -114,6 +113,7 @@ interface ProductCardProps extends TestProps {
   aspectRatio?: '3:4' | 'square' | 'none';
   growWithContainer?: boolean;
   onClick?: () => void;
+  dataTestId?: string;
 }
 
 export const ProductCard = ({

package/src/components/SearchFilter/types.ts

@@ -8,6 +8,8 @@ import {
 export interface SearchFilterItem extends SearchFilterItemDatum {
   filterId: string;
   filterItemId: string;
+  displayName: string;
+  isSelected: boolean;
 }
 
 export interface SearchFilterItemProps {

package/src/components/SearchResultsFilterButton/SearchResultsFilterButton.tsx

@@ -19,7 +19,7 @@ export const SearchResultsFilterButton = ({
   return (
     <ButtonBase
       onClick={openFilter}
-      icon={SettingsVariant}
+      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"

package/src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
-import SettingsVariant from '@envive-ai/react-icons/src/SettingsVariant.js';
+import SettingsVariant from '@envive-ai/react-icons/SettingsVariant';
 import { searchFilterSidebarVariantClasses } from './searchFilterSidebarVariants';
 import { ButtonBase } from '../ButtonBase';
 import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
@@ -69,7 +69,7 @@ export const SearchResultsFilter = ({
       />
       <ButtonBase
         onClick={openFilter}
-        icon={SettingsVariant}
+        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"

package/src/components/SuggestionButton/SuggestionButton.tsx

@@ -1,7 +1,6 @@
 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 type { SuggestionButtonVariant } from './types';
 import { ButtonBase } from '../ButtonBase/ButtonBase';
 
@@ -163,7 +162,16 @@ const variantClassMap = new Map<SuggestionButtonVariant, string[]>([
   ],
 ]);
 
-interface SuggestionButtonProps extends TestProps {
+// Choose icon based on variant to match legacy exactly
+const Icon = ({ isAnswer, variant }: { isAnswer: boolean; variant: SuggestionButtonVariant }) => {
+  if (isAnswer) return undefined;
+  if (variant === 'transparentDark') {
+    return <OutlinedStar />;
+  }
+  return <FourPointStar />;
+};
+
+interface SuggestionButtonProps {
   variant: SuggestionButtonVariant;
   hoverVariant: SuggestionButtonVariant;
   isDisabled: boolean;
@@ -173,6 +181,7 @@ interface SuggestionButtonProps extends TestProps {
   isAnswer?: boolean;
   dataAttributes?: Record<string, string>;
   onClick: () => void;
+  dataTestId?: string;
 }
 
 const borderedVariants = [
@@ -247,15 +256,6 @@ export const SuggestionButton = ({
 
   const buttonClass = `${buttonClassName} ${variantClasses.join(' ')}`;
 
-  // Choose icon based on variant to match legacy exactly
-  const getIcon = () => {
-    if (isAnswer) return undefined;
-    if (variant === 'transparentDark') {
-      return OutlinedStar;
-    }
-    return FourPointStar;
-  };
-
   return (
     <ButtonBase
       text={content}
@@ -263,7 +263,12 @@ export const SuggestionButton = ({
       dataTestId={dataTestId}
       isDisabled={isDisabled}
       // we may want to support custom icons in the future
-      icon={getIcon()}
+      icon={
+        <Icon
+          isAnswer={isAnswer}
+          variant={variant}
+        />
+      }
       iconClass={isAnswer ? undefined : iconClass}
       textClass={`${SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS} ${textClassName}`}
       buttonClass={buttonClass}

package/src/stories/ButtonBase.stories.tsx

@@ -42,7 +42,7 @@ export const Primary: Story = {
 export const WithIcon: Story = {
   args: {
     text: 'Settings',
-    icon: SettingsVariant,
+    icon: <SettingsVariant />,
   },
 };