@envive-ai/react-toolkit-v3 0.3.7 → 0.3.8

package/src/components/ProductCard/__tests__/ProductCard.test.tsx

@@ -0,0 +1,191 @@
+import '@testing-library/jest-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Theme } from '../../../../tokens/theme/theme';
+import { PromptButtonVariant } from '../../PromptButton';
+import { ProductCard } from '../ProductCard';
+
+vi.mock('../../../utils/resolveTheme', () => ({
+  resolveTheme: vi.fn((theme: Theme) => theme),
+}));
+
+vi.mock('../../DesignTokens/components/utils', () => ({
+  getComputedCSSVariable: vi.fn(() => 'standard'),
+}));
+
+const defaultProps = {
+  theme: Theme.STANDARD,
+  imageSrc:
+    'https://www.bandolierstyle.com/cdn/shop/files/Lily17_Black_Gold_Chrome_MOD_Dec25_6.jpg?v=1765844272',
+  headline: 'Test Product',
+  italicizeHeadline: false,
+  animatedText: ['Description 1', 'Description 2'],
+  prompts: ['Prompt 1', 'Prompt 2'],
+  promptButtonType: PromptButtonVariant.LIGHT,
+  carouselId: 'test-carousel-id',
+  placeholder: 'Ask me anything...',
+  onSelect: vi.fn(),
+  onInputClick: vi.fn(),
+};
+
+describe('ProductCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Basic rendering', () => {
+    it('should render with all required props', () => {
+      render(<ProductCard {...defaultProps} />);
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render headline text', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          headline="Custom Headline"
+        />,
+      );
+
+      expect(screen.getByText('Custom Headline')).toBeInTheDocument();
+    });
+
+    it('should render with different themes', () => {
+      const { rerender } = render(
+        <ProductCard
+          {...defaultProps}
+          theme={Theme.STANDARD}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          theme={Theme.MODERN}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+  });
+
+  describe('Callback handlers', () => {
+    it('should call onInputClick when input is clicked', () => {
+      const handleInputClick = vi.fn();
+      render(
+        <ProductCard
+          {...defaultProps}
+          onInputClick={handleInputClick}
+        />,
+      );
+
+      const input = screen.getByText('Ask me anything...');
+      input.click();
+
+      expect(handleInputClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render prompts in carousel', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          prompts={['Prompt 1', 'Prompt 2']}
+        />,
+      );
+
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 2')).toBeInTheDocument();
+    });
+  });
+
+  describe('Optional props', () => {
+    it('should render with custom placeholder', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          placeholder="Custom placeholder"
+        />,
+      );
+
+      expect(screen.getByText('Custom placeholder')).toBeInTheDocument();
+    });
+
+    it('should render with fallbackColor', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          fallbackColor="#FF0000"
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with italicizeHeadline set to true', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          italicizeHeadline
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with italicizeHeadline set to false', () => {
+      render(
+        <ProductCard
+          {...defaultProps}
+          italicizeHeadline={false}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+    });
+
+    it('should render with different promptButtonType variants', () => {
+      const { rerender } = render(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.LIGHT}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.DARK}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.GHOST}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+
+      rerender(
+        <ProductCard
+          {...defaultProps}
+          promptButtonType={PromptButtonVariant.SUGGESTED_RESPONSE}
+        />,
+      );
+
+      expect(screen.getByText('Test Product')).toBeInTheDocument();
+      expect(screen.getByText('Prompt 1')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/ProductCard/components/Carousel.tsx

@@ -0,0 +1,26 @@
+import { PromptCarousel, PromptCarouselRows } from '../../PromptCarousel';
+import { resolveTheme } from '../../utils/resolveTheme';
+import { useGetCarouselProperties } from '../hooks/useGetCarouselProperties';
+import { CarouselProps } from '../types';
+
+export const Carousel = ({
+  theme,
+  carouselId,
+  prompts,
+  promptButtonType,
+  onSelect,
+}: CarouselProps) => {
+  const resolvedTheme = resolveTheme(theme);
+  const { carouselClasses } = useGetCarouselProperties();
+  return (
+    <PromptCarousel
+      className={carouselClasses}
+      handleButtonClick={onSelect}
+      id={carouselId}
+      promptCarouselRows={PromptCarouselRows.ALWAYS_TWO}
+      theme={resolvedTheme}
+      promptButtonType={promptButtonType}
+      promptButtonTexts={prompts}
+    />
+  );
+};

package/src/components/ProductCard/components/Header.tsx

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import { AnimatedText } from '../../AnimatedText';
+import { Stack } from '../../Stack';
+import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
+import { useGetHeaderProperties } from '../hooks/useGetHeaderProperties';
+import { HeaderProps } from '../types';
+
+export const Header = ({
+  headline,
+  italicizeHeadline,
+  animatedText,
+  textTypingDuration,
+  textTransition,
+  loop,
+}: HeaderProps) => {
+  const { stackClasses, headlineClasses } = useGetHeaderProperties(italicizeHeadline);
+
+  const animatedTextWrapper = useCallback(
+    (text: string) => (
+      <Typography
+        variant={TypographyVariant.B3_MD}
+        color={TypographyColor.TEXT_LIGHT}
+        numberOfLines={2}
+      >
+        {text}
+      </Typography>
+    ),
+    [],
+  );
+
+  return (
+    <Stack
+      gap={1}
+      className={stackClasses}
+    >
+      <Typography
+        variant={TypographyVariant.B1_MD}
+        color={TypographyColor.TEXT_LIGHT}
+        className={headlineClasses}
+        numberOfLines={2}
+      >
+        {headline}
+      </Typography>
+      <AnimatedText
+        sequence={animatedText}
+        getNodeWrapper={animatedTextWrapper}
+        typingDuration={textTypingDuration}
+        transition={textTransition}
+        loop={loop}
+      />
+    </Stack>
+  );
+};

package/src/components/ProductCard/components/Poster.tsx

@@ -0,0 +1,15 @@
+import { Container } from '../../Container';
+import { useGetPosterProperties } from '../hooks/useGetPosterProperties';
+import { PosterProps } from '../types';
+
+export const Poster = ({ children, imageSrc, fallbackColor }: PosterProps) => {
+  const { containerStyles, containerClasses } = useGetPosterProperties(imageSrc, fallbackColor);
+  return (
+    <Container
+      className={containerClasses}
+      style={containerStyles}
+    >
+      {children}
+    </Container>
+  );
+};

package/src/components/ProductCard/components/index.ts

@@ -0,0 +1,9 @@
+import { Carousel } from './Carousel';
+import { Header } from './Header';
+import { Poster } from './Poster';
+
+export const ProductCardWidgetComponents = {
+  Poster,
+  Header,
+  Carousel,
+};

package/src/components/ProductCard/hooks/useGetCarouselProperties.ts

@@ -0,0 +1,7 @@
+export const useGetCarouselProperties = () => {
+  const carouselClasses = 'envive-tw-mb-4';
+
+  return {
+    carouselClasses,
+  };
+};

package/src/components/ProductCard/hooks/useGetHeaderProperties.ts

@@ -0,0 +1,9 @@
+export const useGetHeaderProperties = (italicizeHeadline: boolean) => {
+  const stackClasses = 'envive-tw-mb-6';
+  const headlineClasses = italicizeHeadline ? 'envive-tw-italic' : '';
+
+  return {
+    stackClasses,
+    headlineClasses,
+  };
+};

package/src/components/ProductCard/hooks/useGetInputProperties.ts

@@ -0,0 +1,22 @@
+import { Theme } from '../../../../tokens/theme/theme';
+import { TypographyColor } from '../../Typography';
+
+const inputContainer = {
+  [Theme.STANDARD]: 'envive-tw-bg-background-light',
+  [Theme.MODERN]: 'envive-tw-bg-background-light !envive-tw-rounded-0',
+};
+
+const inputPlaceholder = {
+  [Theme.STANDARD]: TypographyColor.TEXT_SECONDARY,
+  [Theme.MODERN]: TypographyColor.TEXT_SECONDARY,
+  [Theme.MINIMAL]: TypographyColor.TEXT_LIGHT,
+};
+
+export const useGetInputProperties = (theme: Theme) => {
+  const containerClasses = inputContainer[theme];
+  const placeholderClasses = inputPlaceholder[theme];
+  return {
+    containerClasses,
+    placeholderClasses,
+  };
+};

package/src/components/ProductCard/hooks/useGetPosterProperties.ts

@@ -0,0 +1,19 @@
+const OVERLAY_OPACITY = '60'; // 60%
+
+export const useGetPosterProperties = (imageSrc: string, fallbackColor: string) => {
+  const overlayColor = `#000000${OVERLAY_OPACITY}`;
+  const bgColor = fallbackColor || 'black';
+  const containerStyles: React.CSSProperties = {
+    background: imageSrc
+      ? `linear-gradient(${overlayColor}, ${overlayColor}) 0% 0%/cover, url('${imageSrc}') 50% 0%/cover`
+      : bgColor,
+  };
+
+  const containerClasses =
+    'envive-tw-px-4 envive-tw-py-10 envive-tw-w-full envive-tw-h-full envive-tw-flex envive-tw-flex-col envive-tw-justify-center';
+
+  return {
+    containerStyles,
+    containerClasses,
+  };
+};

package/src/components/ProductCard/index.ts

@@ -0,0 +1,2 @@
+export { ProductCard } from './ProductCard';
+export type { ProductCardProps } from './types';

package/src/components/ProductCard/types/index.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Theme } from '../../../../tokens/theme/theme';
+import { PromptButtonVariant } from '../../PromptButton';
+
+/**
+ * Props for the Carousel component.
+ */
+export interface CarouselProps {
+  /** Visual theme configuration for styling the carousel. */
+  theme: Theme;
+  /** Array of prompt strings to display in the carousel. */
+  prompts: string[];
+  /** Visual variant/style of the prompt buttons. */
+  promptButtonType: PromptButtonVariant;
+  /** Unique identifier for the carousel instance. */
+  carouselId: string;
+  /**
+   * Callback function invoked when a prompt is selected.
+   */
+  onSelect: (prompt: string) => void;
+}
+
+/**
+ * Props for the Header component.
+ */
+export interface HeaderProps {
+  /** Main headline text to display. */
+  headline: string;
+  /** Whether to apply italic styling to the headline. */
+  italicizeHeadline?: boolean;
+  /** Array of text strings to animate/type. */
+  animatedText: string[];
+  /** Duration in milliseconds for the typing animation. */
+  textTypingDuration?: number;
+  /** Duration in milliseconds for text transitions. */
+  textTransition?: number;
+  /** Whether the animation should loop continuously. */
+  loop?: boolean;
+}
+
+/**
+ * Props for the Poster component.
+ */
+export interface PosterProps {
+  /** React node(s) to render as children. */
+  children?: React.ReactNode;
+  /** Source URL or path for the poster image. */
+  imageSrc: string;
+  /** Fallback background color to display if the image fails to load. */
+  fallbackColor?: string;
+}
+
+/**
+ * Props for the Input component.
+ */
+export interface InputProps {
+  /** Visual theme configuration for styling the input. */
+  theme: Theme;
+  /** Callback function invoked when the input is clicked. */
+  onInputClick: () => void;
+  /** Placeholder text displayed in the input field. */
+  placeholder?: string;
+}
+
+/**
+ * Props for the InputIcon component.
+ */
+export interface InputIconProps {
+  /** Visual theme configuration for styling the input icon. */
+  theme: Theme;
+}
+
+/**
+ * Props for the ProductCard component.
+ * Combines props from Input, Carousel, Header, and Poster components.
+ * Excludes the 'children' prop from PosterProps.
+ */
+export interface ProductCardProps
+  extends InputProps, CarouselProps, HeaderProps, Omit<PosterProps, 'children'> {}

package/src/components/PromptCarousel/hooks/useCarouselRefs.ts

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
 
 interface UseCarouselRefsProps {
   shouldShowTwoRows: boolean;
@@ -11,9 +11,10 @@ export const useCarouselRefs = ({ shouldShowTwoRows }: UseCarouselRefsProps) =>
   const blockScrollRef = useRef<HTMLDivElement>(null);
   const blockFirstRowStackRef = useRef<HTMLDivElement>(null);
 
-  const scrollRefs = shouldShowTwoRows
-    ? [firstRowScrollRef, secondRowScrollRef]
-    : [firstRowScrollRef];
+  const scrollRefs = useMemo(
+    () => (shouldShowTwoRows ? [firstRowScrollRef, secondRowScrollRef] : [firstRowScrollRef]),
+    [shouldShowTwoRows],
+  );
 
   return {
     firstRowScrollRef,

package/src/components/SocialProof/SocialProof.tsx

@@ -2,13 +2,14 @@ import { ImageGalleryLayout } from '../ImageGallery/types/types';
 import { useCheckIsMobile } from '../utils/useCheckIsMobile';
 import { SocialProofComponents } from './components';
 import { resolveTheme } from '../utils/resolveTheme';
-import { SocialProofProps } from './types/types';
+import { SocialProofProps, WidgetKind } from './types/types';
 import { Theme } from '../Tokens';
 import { WidgetWrapperVariant } from '../WidgetWrapper';
 import { PromptCarouselRows } from '../PromptCarousel';
 import { PromptButtonVariant } from '../PromptButton';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle/WidgetWrapperWithTitle';
 import { useSocialProofCount } from './hooks';
+import { IconVariant } from '../WidgetTextField/types/types';
 
 export const SocialProof = ({
   baseProps,
@@ -21,6 +22,7 @@ export const SocialProof = ({
   const {
     theme = Theme.GLOBAL_CUSTOM,
     variant = WidgetWrapperVariant.CARD_WITH_BORDER,
+    kind = WidgetKind.STATIC,
     hexCardColor,
     promptCarouselRows = PromptCarouselRows.TWO_ON_MOBILE_ONE_ON_DESKTOP,
     hideImage,
@@ -56,7 +58,17 @@ export const SocialProof = ({
 
   const { isMobile } = useCheckIsMobile('sm');
 
-  const hasDynamicLayout = dynamicLayout !== undefined;
+  const hasDynamicLayout = kind === WidgetKind.DYNAMIC || dynamicLayout !== undefined;
+
+  const hideImageGallery = hideImage || !images || images.length === 0;
+
+  const isFourGridLayout =
+    !isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID && !hasDynamicLayout;
+
+  const isFourHorizontalLayout =
+    (imageGalleryLayout === ImageGalleryLayout.FOUR_HORIZONTAL ||
+      (isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID)) &&
+    !hasDynamicLayout;
 
   const headline = (
     <SocialProofComponents.Headline
@@ -85,12 +97,11 @@ export const SocialProof = ({
       theme={finalTheme}
       placeholder={textFieldPlaceholderText}
       handleTextFieldClick={handleTextFieldClick}
+      iconVariant={hasDynamicLayout ? IconVariant.DEFAULT : IconVariant.SEARCH}
     />
   );
 
-  const hideImageGallery = hideImage || !images || images.length === 0;
-
-  if (!isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID && !hasDynamicLayout) {
+  if (isFourGridLayout) {
     return (
       <WidgetWrapperWithTitle
         id={id}
@@ -114,11 +125,7 @@ export const SocialProof = ({
     );
   }
 
-  if (
-    (imageGalleryLayout === ImageGalleryLayout.FOUR_HORIZONTAL ||
-      (isMobile && imageGalleryLayout === ImageGalleryLayout.FOUR_GRID)) &&
-    !hasDynamicLayout
-  ) {
+  if (isFourHorizontalLayout) {
     return (
       <WidgetWrapperWithTitle
         id={id}

package/src/components/SocialProof/components/Textfield.tsx

@@ -1,17 +1,20 @@
 import { WidgetTextField } from '../../WidgetTextField';
 import { resolveTheme } from '../../utils/resolveTheme';
 import { Theme } from '../../../../tokens/theme/theme';
+import { IconVariant } from '../../WidgetTextField/types/types';
 
 export type TextfieldProps = {
   theme: Theme;
   placeholder: string;
   handleTextFieldClick: (text: string) => void;
+  iconVariant?: IconVariant;
 };
 
 export const Textfield = ({
   theme = Theme.GLOBAL_CUSTOM,
   placeholder,
   handleTextFieldClick,
+  iconVariant = IconVariant.DEFAULT,
 }: TextfieldProps) => {
   const finalTheme = resolveTheme(theme);
 
@@ -19,6 +22,7 @@ export const Textfield = ({
     <WidgetTextField
       theme={finalTheme}
       placeholder={placeholder}
+      iconVariant={iconVariant}
       onClick={() => handleTextFieldClick(placeholder)}
     />
   );

package/src/components/SocialProof/index.ts

@@ -1,4 +1,4 @@
 export { SocialProof } from './SocialProof';
 export type { SocialProofProps } from './types/types';
-export { DynamicLayout, PageVariant } from './types/types';
+export { DynamicLayout, PageVariant, WidgetKind } from './types/types';
 export { useSocialProofCount } from './hooks';

package/src/components/SocialProof/types/types.ts

@@ -15,6 +15,11 @@ export enum PageVariant {
   PageVisit = 'PageVisit',
 }
 
+export enum WidgetKind {
+  STATIC = 'static',
+  DYNAMIC = 'dynamic',
+}
+
 /**
  * Base props for the SocialProof component container.
  *
@@ -132,6 +137,13 @@ export type WidgetStyleProps = {
    */
   variant?: WidgetWrapperVariant;
 
+  /**
+   * Kind of the social proof widget.
+   *
+   * @default WidgetKind.STATIC
+   */
+  kind?: WidgetKind;
+
   /**
    * Custom hex color for the card background (e.g., "#FF5733").
    * Overrides theme colors when provided.

package/src/components/TextField/components/Input.tsx

@@ -49,7 +49,12 @@ export const Input = ({
       onFocus={onFocus}
       onBlur={onBlur}
       disabled={disabled}
-      className={classNames(inputClasses, className, disabled && 'envive-tw-cursor-not-allowed')}
+      className={classNames(
+        inputClasses,
+        'focus-visible:envive-tw-shadow-none focus-visible:envive-tw-outline-none',
+        className,
+        disabled && 'envive-tw-cursor-not-allowed',
+      )}
       style={style}
       aria-label={ariaLabel}
       aria-disabled={disabled}

package/src/components/TextField/hooks/useGetContainerProperties.ts

@@ -22,7 +22,7 @@ export const useGetContainerProperties = ({
     const containerClassesMap: Record<Theme, ContainerProperties> = {
       [Theme.STANDARD]: {
         containerLayoutClasses:
-          'envive-tw-flex envive-tw-min-w-[358px] envive-tw-h-[40px] envive-tw-py-2 envive-tw-px-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
+          'envive-tw-flex envive-tw-h-[40px] envive-tw-py-2 envive-tw-px-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
         containerDefaultClasses:
           'envive-tw-border envive-tw-border-solid envive-tw-bg-background-light envive-tw-rounded-global-custom',
         containerBorderClasses: 'envive-tw-border-border-light',
@@ -33,7 +33,7 @@ export const useGetContainerProperties = ({
       },
       [Theme.MODERN]: {
         containerLayoutClasses:
-          'envive-tw-flex envive-tw-min-w-[358px] envive-tw-h-[40px] envive-tw-py-2 envive-tw-pr-2 envive-tw-pl-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
+          'envive-tw-flex envive-tw-h-[40px] envive-tw-py-2 envive-tw-pr-2 envive-tw-pl-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
         containerDefaultClasses:
           'envive-tw-border envive-tw-border-solid envive-tw-bg-background-light envive-tw-rounded-[4px]',
         containerBorderClasses: 'envive-tw-border-border-light',
@@ -44,7 +44,7 @@ export const useGetContainerProperties = ({
       },
       [Theme.MINIMAL]: {
         containerLayoutClasses:
-          'envive-tw-flex envive-tw-min-w-[358px] envive-tw-h-[40px] envive-tw-py-2 envive-tw-pr-2 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
+          'envive-tw-flex envive-tw-h-[40px] envive-tw-py-2 envive-tw-pr-2 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
         containerDefaultClasses:
           'envive-tw-border-b envive-tw-border-solid envive-tw-bg-background-light',
         containerBorderClasses: 'envive-tw-border-b-border-medium',
@@ -55,7 +55,7 @@ export const useGetContainerProperties = ({
       },
       [Theme.GLOBAL_CUSTOM]: {
         containerLayoutClasses:
-          'envive-tw-flex envive-tw-min-w-[358px] envive-tw-h-[40px] envive-tw-py-2 envive-tw-px-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
+          'envive-tw-flex envive-tw-h-[40px] envive-tw-py-2 envive-tw-px-4 envive-tw-justify-between envive-tw-items-center envive-tw-flex-shrink-0',
         containerDefaultClasses:
           'envive-tw-border envive-tw-border-solid envive-tw-bg-background-light envive-tw-rounded-global-custom',
         containerBorderClasses: 'envive-tw-border-border-light',

package/src/components/WelcomeMessage/hooks/useGetSparkleIconProperties.ts

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { extractColorNameFromCssVar } from 'tokens/utils';
 import { SparkleIconColor } from '../types/types';
 
 export type UseGetSparkleIconPropertiesProps = {
@@ -9,7 +10,9 @@ export const useGetSparkleIconProperties = ({
   sparkleIconColor,
 }: UseGetSparkleIconPropertiesProps) => {
   const sparkleIconStyle = useMemo(() => {
-    const sparkleIconStyleMap: Record<SparkleIconColor, { fill: string; stroke: string }> = {
+    const colorName = extractColorNameFromCssVar(sparkleIconColor);
+
+    const sparkleIconStyleMap: Record<string, { fill: string; stroke: string }> = {
       [SparkleIconColor.ACCENT_PRIMARY]: {
         fill: 'var(--envive-colors-accent-primary)',
         stroke: 'var(--envive-colors-accent-primary)',
@@ -28,7 +31,7 @@ export const useGetSparkleIconProperties = ({
       },
     };
 
-    return sparkleIconStyleMap[sparkleIconColor] ?? { fill: '' };
+    return sparkleIconStyleMap[colorName] ?? { fill: '' };
   }, [sparkleIconColor]);
 
   return sparkleIconStyle;