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

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

@@ -2,12 +2,15 @@ import '@testing-library/jest-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { SocialProof } from '../SocialProof';
-import { DynamicLayout } from '../types/types';
+import { DynamicLayout, PageVariant } from '../types/types';
 import { ImageGalleryLayout } from '../../ImageGallery/types/types';
 import { PromptButtonVariant } from '../../PromptButton/types';
 import { PromptCarouselRows } from '../../PromptCarousel/types/types';
 import { WidgetWrapperVariant } from '../../WidgetWrapper/types/types';
 import { Theme } from '../../Tokens';
+import { SOCIAL_PROOF_COUNT_KEY } from '../hooks';
+
+const COUNT_KEY_MOCK = 'test-social-proof';
 
 const mockUseCheckIsMobile = vi.fn(() => ({ isMobile: false, viewportWidth: 1024 }));
 vi.mock('../../utils/useCheckIsMobile', () => ({
@@ -26,12 +29,35 @@ vi.mock('src/components/utils/useGetContentSize', () => ({
   }),
 }));
 
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => {
+      store[key] = value.toString();
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      store = {};
+    },
+  };
+})();
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock,
+});
+
 describe('SocialProof', () => {
   const defaultProps = {
-    baseProps: {},
+    baseProps: {
+      id: 'test-social-proof',
+      pageVariant: PageVariant.PageVisit,
+      countKey: COUNT_KEY_MOCK,
+    },
     widgetContentProps: {
       titleLabel: 'Shopping Assistant',
-      numberOfCustomersText: '114 customers',
       customerQueryText: 'asked which products are best for gifting...',
       primaryButtonText: 'This is a prompt button',
       secondaryButtonTitleText: 'What else are customers asking?',
@@ -61,14 +87,37 @@ describe('SocialProof', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     mockUseCheckIsMobile.mockReturnValue({ isMobile: false, viewportWidth: 1024 });
+    localStorageMock.clear();
   });
 
   describe('Basic rendering', () => {
-    it('should render with default props', () => {
+    it('should render with default props', async () => {
       render(<SocialProof {...defaultProps} />);
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      // Customer count should be between 100-200 and formatted as "{number} customers"
+      const customerCountText = screen.getByText(/\d+ customers/);
+      expect(customerCountText).toBeInTheDocument();
+      const match = customerCountText.textContent?.match(/(\d+)/);
+      if (match) {
+        const count = parseInt(match[1], 10);
+        expect(count).toBeGreaterThanOrEqual(100);
+        expect(count).toBeLessThanOrEqual(200);
+      }
       expect(screen.getByText('asked which products are best for gifting...')).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
+
+      // Verify persistence of customer count in localStorage:
+      await waitFor(() => {
+        const storedData = localStorageMock.getItem(SOCIAL_PROOF_COUNT_KEY);
+        expect(storedData).not.toBeNull();
+        if (storedData) {
+          const customerCountMap = JSON.parse(storedData);
+          expect(customerCountMap).toHaveProperty(PageVariant.PageVisit);
+          expect(customerCountMap[PageVariant.PageVisit]).toHaveProperty(COUNT_KEY_MOCK);
+          const storedCount = customerCountMap[PageVariant.PageVisit][COUNT_KEY_MOCK];
+          expect(storedCount).toBeGreaterThanOrEqual(100);
+          expect(storedCount).toBeLessThanOrEqual(200);
+        }
+      });
     });
 
     it('should apply id attribute when provided', () => {
@@ -124,7 +173,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
 
@@ -135,7 +184,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ imageGalleryLayout: ImageGalleryLayout.FOUR_HORIZONTAL }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
 
@@ -146,7 +195,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ imageGalleryLayout: ImageGalleryLayout.SINGLE }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
 
@@ -158,7 +207,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
 
@@ -172,7 +221,7 @@ describe('SocialProof', () => {
           }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
       expect(screen.getByText('This is a prompt button')).toBeInTheDocument();
     });
   });
@@ -199,7 +248,7 @@ describe('SocialProof', () => {
           widgetStyleProps={{ hideImage: false, imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
 
     it('should hide textfield when hideTextField is true', () => {
@@ -311,7 +360,7 @@ describe('SocialProof', () => {
             widgetStyleProps={{ theme, imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
           />,
         );
-        expect(screen.getByText('114 customers')).toBeInTheDocument();
+        expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
         unmount();
       });
     });
@@ -331,7 +380,7 @@ describe('SocialProof', () => {
             widgetStyleProps={{ variant, imageGalleryLayout: ImageGalleryLayout.FOUR_GRID }}
           />,
         );
-        expect(screen.getByText('114 customers')).toBeInTheDocument();
+        expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
         unmount();
       });
     });
@@ -416,7 +465,7 @@ describe('SocialProof', () => {
           }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
 
     it('should render with dynamicLayout WIDE', () => {
@@ -429,7 +478,7 @@ describe('SocialProof', () => {
           }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
   });
 
@@ -450,7 +499,7 @@ describe('SocialProof', () => {
           widgetEventProps={{ handleTextFieldClick: vi.fn() }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
 
     it('should render with empty secondaryButtonTexts array', () => {
@@ -463,7 +512,7 @@ describe('SocialProof', () => {
           }}
         />,
       );
-      expect(screen.getByText('114 customers')).toBeInTheDocument();
+      expect(screen.getByText(/\d+ customers/)).toBeInTheDocument();
     });
   });
 });

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/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useSocialProofCount } from './useSocialProofCount';
+export { SOCIAL_PROOF_COUNT_KEY } from './useSocialProofCount';

package/src/components/SocialProof/hooks/useSocialProofCount.ts

@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import { PageVariant } from '../types/types';
+
+const RANDOM_NUMBER_MIN = 100;
+const RANDOM_NUMBER_MAX = 200;
+export const SOCIAL_PROOF_COUNT_KEY = 'v3_social_proof_values';
+
+type SocialProofCount = Record<string, Record<string, number>>;
+
+interface UseSocialProofCountParams {
+  pageVariant?: PageVariant;
+  countKey?: string;
+  id?: string;
+}
+
+export const useSocialProofCount = ({
+  pageVariant,
+  countKey,
+  id,
+}: UseSocialProofCountParams): string => {
+  const [customerCount, setCustomerCount] = useState<number>(() =>
+    Math.floor(Math.random() * (RANDOM_NUMBER_MAX - RANDOM_NUMBER_MIN + 1) + RANDOM_NUMBER_MIN),
+  );
+
+  useEffect(() => {
+    const variant = pageVariant || PageVariant.PageVisit;
+    const key = countKey || id || 'default';
+
+    try {
+      const storedData = localStorage.getItem(SOCIAL_PROOF_COUNT_KEY);
+      let customerCountMap: SocialProofCount = {};
+
+      if (storedData) {
+        try {
+          customerCountMap = JSON.parse(storedData) as SocialProofCount;
+        } catch (parseError) {
+          console.warn('Failed to parse social proof count from localStorage:', parseError);
+          return;
+        }
+      }
+
+      if (customerCountMap[variant]?.[key]) {
+        setCustomerCount(customerCountMap[variant][key]);
+      } else {
+        const randomCount = Math.floor(
+          Math.random() * (RANDOM_NUMBER_MAX - RANDOM_NUMBER_MIN + 1) + RANDOM_NUMBER_MIN,
+        );
+
+        if (!customerCountMap[variant]) {
+          customerCountMap[variant] = {};
+        }
+        customerCountMap[variant][key] = randomCount;
+
+        try {
+          localStorage.setItem(SOCIAL_PROOF_COUNT_KEY, JSON.stringify(customerCountMap));
+          setCustomerCount(randomCount);
+        } catch (storageError) {
+          console.warn('Failed to save social proof count to localStorage:', storageError);
+        }
+      }
+    } catch (error) {
+      console.warn('Error managing social proof count:', error);
+    }
+  }, [pageVariant, countKey, id]);
+
+  return `${customerCount} customers`;
+};

package/src/components/SocialProof/index.ts

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

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

@@ -9,6 +9,17 @@ export enum DynamicLayout {
   WIDE = 'wide',
 }
 
+export enum PageVariant {
+  PLP = 'PLP',
+  PDP = 'PDP',
+  PageVisit = 'PageVisit',
+}
+
+export enum WidgetKind {
+  STATIC = 'static',
+  DYNAMIC = 'dynamic',
+}
+
 /**
  * Base props for the SocialProof component container.
  *
@@ -34,6 +45,18 @@ export type BaseProps = {
    * Inline styles to apply to the container.
    */
   style?: React.CSSProperties;
+
+  /**
+   * Page variant for localStorage persistence of customer counts (PLP, PDP, or PageVisit).
+   */
+  pageVariant?: PageVariant;
+
+  /**
+   * Specific identifier for the pageVariant (e.g., productId for PDP, plpId for PLP, category for PageVisit).
+   * Used as the key for localStorage persistence.
+   * Falls back to the `id` prop if not provided.
+   */
+  countKey?: string;
 };
 
 /**
@@ -53,12 +76,6 @@ export type WidgetContentProps = {
    */
   titleLabel: string;
 
-  /**
-   * Text displaying the number of customers (e.g., "114 customers").
-   * Displayed in the headline section.
-   */
-  numberOfCustomersText?: string;
-
   /**
    * Text displaying what customers asked (e.g., "asked which products are best for gifting...").
    * Displayed in the headline section alongside the customer count.
@@ -120,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;

package/src/components/WidgetTextField/WidgetTextField.tsx

@@ -1,7 +1,7 @@
 import { Theme } from '../../../tokens/theme/theme';
 import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextFieldComponents } from './components';
-import { type WidgetTextFieldProps } from './types/types';
+import { IconVariant, type WidgetTextFieldProps } from './types/types';
 
 export const WidgetTextField = ({
   id,
@@ -9,6 +9,7 @@ export const WidgetTextField = ({
   style,
   className,
   theme = Theme.GLOBAL_CUSTOM,
+  iconVariant = IconVariant.DEFAULT,
   placeholder,
   ariaLabel,
   disabled,
@@ -31,7 +32,12 @@ export const WidgetTextField = ({
       theme={resolvedTheme}
       disabled={disabled}
       ariaLabel={ariaLabel}
-      icon={<WidgetTextFieldComponents.Icon theme={resolvedTheme} />}
+      icon={
+        <WidgetTextFieldComponents.Icon
+          variant={iconVariant}
+          theme={resolvedTheme}
+        />
+      }
       text={<WidgetTextFieldComponents.FakeTextInput placeholder={placeholder} />}
     />
   );

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

@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { WidgetTextField } from '../WidgetTextField';
 import { Theme } from '../../../../tokens/theme/theme';
+import { IconVariant } from '../types/types';
 
 describe('WidgetTextField', () => {
   describe('Basic rendering', () => {
@@ -292,6 +293,59 @@ describe('WidgetTextField', () => {
     });
   });
 
+  describe('Icon variants', () => {
+    it('should render with DEFAULT icon variant', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          iconVariant={IconVariant.DEFAULT}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should render with SEARCH icon variant', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          iconVariant={IconVariant.SEARCH}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should default to DEFAULT icon variant when not provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should work with iconVariant across different themes', () => {
+      const themes = [Theme.STANDARD, Theme.MODERN, Theme.MINIMAL, Theme.GLOBAL_CUSTOM];
+      themes.forEach(theme => {
+        const { container, unmount } = render(
+          <WidgetTextField
+            placeholder="Test"
+            theme={theme}
+            iconVariant={IconVariant.SEARCH}
+          />,
+        );
+        const svg = container.querySelector('svg');
+        expect(svg).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
   describe('Component structure', () => {
     it('should render Container with correct props', () => {
       const { container } = render(

package/src/components/WidgetTextField/components/Container.tsx

@@ -58,8 +58,8 @@ export const Container = ({
         justify="between"
         gap="2"
       >
-        {text}
-        {icon}
+        <div className="envive-tw-min-w-0 envive-tw-flex-1 envive-tw-overflow-hidden">{text}</div>
+        <div className="envive-tw-flex-shrink-0">{icon}</div>
       </Stack>
     </ContainerComponent>
   );

package/src/components/WidgetTextField/components/Icon.tsx

@@ -1,45 +1,88 @@
+import SvgSendStandard from '@envive-ai/react-icons/MagnifyingGlass';
+import SvgSendModern from '@envive-ai/react-icons/MagnifyingThin';
+import SendMinimalist from '@envive-ai/react-icons/SendMinimalist';
 import SendModern from '@envive-ai/react-icons/SendModern';
 import SendStandard from '@envive-ai/react-icons/SendStandard';
-import SendMinimalist from '@envive-ai/react-icons/SendMinimalist';
 import { Theme } from '../../../../tokens/theme/theme';
 import { CustomIcon } from '../../utils/CustomIcon';
+import { IconVariant } from '../types/types';
 
 type IconProps = {
   theme: Theme;
+  variant: IconVariant;
 };
 
-export const Icon = ({ theme }: IconProps) => {
+export const Icon = ({ variant, theme }: IconProps) => {
   if (theme === Theme.STANDARD) {
+    if (variant === IconVariant.DEFAULT) {
+      return (
+        <CustomIcon
+          IconComponent={<SendStandard />}
+          className="envive-tw-h-6 envive-tw-w-6"
+          fill="var(--envive-colors-border-medium)"
+        />
+      );
+    }
     return (
       <CustomIcon
-        IconComponent={<SendStandard />}
+        IconComponent={<SvgSendStandard />}
         className="envive-tw-h-6 envive-tw-w-6"
         fill="var(--envive-colors-border-medium)"
       />
     );
   }
+
   if (theme === Theme.MODERN) {
+    if (variant === IconVariant.DEFAULT) {
+      return (
+        <CustomIcon
+          IconComponent={<SendModern />}
+          className="envive-tw-h-6 envive-tw-w-6"
+          fill="var(--envive-colors-border-medium)"
+        />
+      );
+    }
     return (
       <CustomIcon
-        IconComponent={<SendModern />}
+        IconComponent={<SvgSendModern />}
         className="envive-tw-h-6 envive-tw-w-6"
-        fill="var(--envive-colors-border-medium)"
+        stroke="var(--envive-colors-border-medium)"
       />
     );
   }
+
   if (theme === Theme.MINIMAL) {
+    if (variant === IconVariant.DEFAULT) {
+      return (
+        <CustomIcon
+          IconComponent={<SendMinimalist />}
+          className="envive-tw-h-6 envive-tw-w-6"
+          stroke="var(--envive-colors-text-secondary)"
+        />
+      );
+    }
     return (
       <CustomIcon
         IconComponent={<SendMinimalist />}
         className="envive-tw-h-6 envive-tw-w-6"
-        stroke="var(--envive-colors-text-secondary)"
+        stroke="var(--envive-colors-text-light)"
+      />
+    );
+  }
+
+  if (variant === IconVariant.DEFAULT) {
+    return (
+      <CustomIcon
+        IconComponent={<SendStandard />}
+        className="envive-tw-h-6 envive-tw-w-6"
+        fill="var(--envive-colors-border-medium)"
       />
     );
   }
 
   return (
     <CustomIcon
-      IconComponent={<SendStandard />}
+      IconComponent={<SvgSendStandard />}
       className="envive-tw-h-6 envive-tw-w-6"
       fill="var(--envive-colors-border-medium)"
     />

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

@@ -7,12 +7,14 @@ export type UseGetContainerPropertiesProps = {
 
 export const useGetContainerProperties = ({ theme }: UseGetContainerPropertiesProps) => {
   const baseClassName =
-    'envive-tw-cursor-text envive-tw-border-[1px] envive-tw-border-solid envive-tw-border-border-light envive-tw-px-4 envive-tw-py-2';
+    'envive-tw-cursor-text envive-tw-border-solid envive-tw-px-4 envive-tw-py-2';
 
   const themeContainerClassName = useMemo(() => {
     const themeCotainerMap = {
-      [Theme.STANDARD]: 'envive-tw-rounded-global-custom',
-      [Theme.MODERN]: 'envive-tw-rounded-4',
+      [Theme.STANDARD]:
+        'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-global-custom',
+      [Theme.MODERN]: 'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-4',
+      [Theme.MINIMAL]: 'envive-tw-border-b-[1px] envive-tw-border-text-light',
     };
     return themeCotainerMap[theme] ?? '';
   }, [theme]);