@envive-ai/react-toolkit-v3 0.3.31 → 0.3.33

package/src/components/CSSVariablesEditor/hooks/useHandleUpdateCssVars.ts

@@ -32,23 +32,38 @@ export const useHandleUpdateCssVars = () => {
         --${FontSizeCSSVar.L1}: ${variables['font-size-l1']} !important;
         --${FontSizeCSSVar.L2}: ${variables['font-size-l2']} !important;
 
-        --${FontWeightCSSVar.RG}: ${variables['font-weight-rg']} !important;
-        --${FontWeightCSSVar.MD}: ${variables['font-weight-md']} !important;
-        --${FontWeightCSSVar.SB}: ${variables['font-weight-sb']} !important;
+        --${FontWeightCSSVar.Title}: ${variables['font-weight-title']} !important;
+        --${FontWeightCSSVar.Header}: ${variables['font-weight-header']} !important;
+        --${FontWeightCSSVar.BodyEmphasis}: ${variables['font-weight-body-emphasis']} !important;
+        --${FontWeightCSSVar.BodyStandard}: ${variables['font-weight-body-standard']} !important;
 
-        --${LineHeightCSSVar.LineHeight124}: ${convertPercentageTolineHeight(variables['line-height-124'])} !important;
-        --${LineHeightCSSVar.LineHeight120}: ${convertPercentageTolineHeight(variables['line-height-120'])} !important;
-        --${LineHeightCSSVar.LineHeight118}: ${convertPercentageTolineHeight(variables['line-height-118'])} !important;
-        --${LineHeightCSSVar.LineHeight116}: ${convertPercentageTolineHeight(variables['line-height-116'])} !important;
-        --${LineHeightCSSVar.LineHeight114}: ${convertPercentageTolineHeight(variables['line-height-114'])} !important;
-        --${LineHeightCSSVar.LineHeight148}: ${convertPercentageTolineHeight(variables['line-height-148'])} !important;
-        --${LineHeightCSSVar.LineHeight140}: ${convertPercentageTolineHeight(variables['line-height-140'])} !important;
-        --${LineHeightCSSVar.LineHeight128}: ${convertPercentageTolineHeight(variables['line-height-128'])} !important;
-        --${LineHeightCSSVar.LineHeight130}: ${convertPercentageTolineHeight(variables['line-height-130'])} !important;
-        --${LineHeightCSSVar.LineHeight133}: ${convertPercentageTolineHeight(variables['line-height-133'])} !important;
+        --${LineHeightCSSVar.T1}: ${convertPercentageTolineHeight(variables['line-height-t1'])} !important;
+        --${LineHeightCSSVar.T2}: ${convertPercentageTolineHeight(variables['line-height-t2'])} !important;
+        --${LineHeightCSSVar.T3}: ${convertPercentageTolineHeight(variables['line-height-t3'])} !important;
+        --${LineHeightCSSVar.H1}: ${convertPercentageTolineHeight(variables['line-height-h1'])} !important;
+        --${LineHeightCSSVar.H2}: ${convertPercentageTolineHeight(variables['line-height-h2'])} !important;
+        --${LineHeightCSSVar.H3}: ${convertPercentageTolineHeight(variables['line-height-h3'])} !important;
+        --${LineHeightCSSVar.B1}: ${convertPercentageTolineHeight(variables['line-height-b1'])} !important;
+        --${LineHeightCSSVar.B2}: ${convertPercentageTolineHeight(variables['line-height-b2'])} !important;
+        --${LineHeightCSSVar.B3}: ${convertPercentageTolineHeight(variables['line-height-b3'])} !important;
+        --${LineHeightCSSVar.B4}: ${convertPercentageTolineHeight(variables['line-height-b4'])} !important;
+        --${LineHeightCSSVar.B5}: ${convertPercentageTolineHeight(variables['line-height-b5'])} !important;
+        --${LineHeightCSSVar.L1}: ${convertPercentageTolineHeight(variables['line-height-l1'])} !important;
+        --${LineHeightCSSVar.L2}: ${convertPercentageTolineHeight(variables['line-height-l2'])} !important;
 
-        --${LetterSpacingCSSVar.Tight0}: ${variables['letter-spacing-tight-0']} !important;
-        --${LetterSpacingCSSVar.Wide1}: ${variables['letter-spacing-wide-1']} !important;
+        --${LetterSpacingCSSVar.T1}: ${variables['letter-spacing-t1']} !important;
+        --${LetterSpacingCSSVar.T2}: ${variables['letter-spacing-t2']} !important;
+        --${LetterSpacingCSSVar.T3}: ${variables['letter-spacing-t3']} !important;
+        --${LetterSpacingCSSVar.H1}: ${variables['letter-spacing-h1']} !important;
+        --${LetterSpacingCSSVar.H2}: ${variables['letter-spacing-h2']} !important;
+        --${LetterSpacingCSSVar.H3}: ${variables['letter-spacing-h3']} !important;
+        --${LetterSpacingCSSVar.B1}: ${variables['letter-spacing-b1']} !important;
+        --${LetterSpacingCSSVar.B2}: ${variables['letter-spacing-b2']} !important;
+        --${LetterSpacingCSSVar.B3}: ${variables['letter-spacing-b3']} !important;
+        --${LetterSpacingCSSVar.B4}: ${variables['letter-spacing-b4']} !important;
+        --${LetterSpacingCSSVar.B5}: ${variables['letter-spacing-b5']} !important;
+        --${LetterSpacingCSSVar.L1}: ${variables['letter-spacing-l1']} !important;
+        --${LetterSpacingCSSVar.L2}: ${variables['letter-spacing-l2']} !important;
 
         --${FontFamilyCSSVar.Title}: ${variables['font-family-title']} !important;
         --${FontFamilyCSSVar.Header}: ${variables['font-family-header']} !important;

package/src/components/DesignTokens/components/FontWeight.tsx

@@ -7,9 +7,10 @@ type FontWeightProps = {
 
 export const FontWeight = ({ fontWeightTokens }: FontWeightProps) => {
   const fontWeightTwMap = {
-    rg: 'envive-tw-font-rg',
-    md: 'envive-tw-font-md',
-    sb: 'envive-tw-font-sb',
+    title: 'envive-tw-font-title',
+    header: 'envive-tw-font-header',
+    body_emphasis: 'envive-tw-font-body_emphasis',
+    body_standard: 'envive-tw-font-body_standard',
   };
 
   return (

package/src/components/DesignTokens/components/LetterSpacing.tsx

@@ -7,7 +7,19 @@ type LetterSpacingProps = {
 
 export const LetterSpacing = ({ letterSpacingTokens }: LetterSpacingProps) => {
   const letterSpacingTwMap = {
-    tight0: 'envive-tw-tracking-tight0',
+    t1: 'envive-tw-tracking-t1',
+    t2: 'envive-tw-tracking-t2',
+    t3: 'envive-tw-tracking-t3',
+    h1: 'envive-tw-tracking-h1',
+    h2: 'envive-tw-tracking-h2',
+    h3: 'envive-tw-tracking-h3',
+    b1: 'envive-tw-tracking-b1',
+    b2: 'envive-tw-tracking-b2',
+    b3: 'envive-tw-tracking-b3',
+    b4: 'envive-tw-tracking-b4',
+    b5: 'envive-tw-tracking-b5',
+    l1: 'envive-tw-tracking-l1',
+    l2: 'envive-tw-tracking-l2',
   };
 
   return (

package/src/components/DesignTokens/components/LineHeight.tsx

@@ -7,14 +7,19 @@ type LineHeightProps = {
 
 export const LineHeight = ({ lineHeightTokens }: LineHeightProps) => {
   const lineHeightTwMap = {
-    '124': 'envive-tw-leading-124',
-    '120': 'envive-tw-leading-120',
-    '118': 'envive-tw-leading-118',
-    '116': 'envive-tw-leading-116',
-    '114': 'envive-tw-leading-114',
-    '148': 'envive-tw-leading-148',
-    '140': 'envive-tw-leading-140',
-    '130': 'envive-tw-leading-130',
+    t1: 'envive-tw-leading-t1',
+    t2: 'envive-tw-leading-t2',
+    t3: 'envive-tw-leading-t3',
+    h1: 'envive-tw-leading-h1',
+    h2: 'envive-tw-leading-h2',
+    h3: 'envive-tw-leading-h3',
+    b1: 'envive-tw-leading-b1',
+    b2: 'envive-tw-leading-b2',
+    b3: 'envive-tw-leading-b3',
+    b4: 'envive-tw-leading-b4',
+    b5: 'envive-tw-leading-b5',
+    l1: 'envive-tw-leading-l1',
+    l2: 'envive-tw-leading-l2',
   };
   return (
     <section>

package/src/components/FloatingChat/components/SalesAgentBadgeContent.tsx

@@ -59,6 +59,7 @@ export interface GetBadgeContentAndLabelParams {
   onExploreAllResults?: () => void;
   displayLimit?: number;
   hideBadgeCount?: boolean;
+  isMobile?: boolean;
 }
 
 export interface BadgeContentAndLabel {
@@ -72,6 +73,7 @@ export const getBadgeContentAndLabel = ({
   onExploreAllResults,
   hideBadgeCount,
   displayLimit = MOST_RELEVANT_DISPLAY_LIMIT,
+  isMobile = false,
 }: GetBadgeContentAndLabelParams): BadgeContentAndLabel => {
   if (hideBadgeCount) {
     return {
@@ -83,12 +85,16 @@ export const getBadgeContentAndLabel = ({
     <SalesAgentBadgeContent
       totalProducts={totalProducts}
       displayLimit={displayLimit}
-      onExploreAllResults={onExploreAllResults}
+      onExploreAllResults={onExploreAllResults ?? (() => {})}
     />
   ) : null;
 
+  // Desktop: show count badge when totalProducts >= 4; Mobile: show when totalProducts >= 3
+  const badgeMinThreshold = isMobile ? 3 : 4;
   const badgeLabel =
-    !areProductsMoreThanDisplayLimit && totalProducts > 1 ? `${totalProducts} Products` : null;
+    !areProductsMoreThanDisplayLimit && totalProducts >= badgeMinThreshold
+      ? `${totalProducts} Products`
+      : null;
 
   return { badgeContent, badgeLabel };
 };

package/src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx

@@ -6,6 +6,7 @@ import {
   SalesAgentProductCardVariant,
 } from '../../SalesAgentProductCard/types/types';
 import { resolveTheme } from '../../utils/resolveTheme';
+import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
 import { getProductCarouselDisplayInfo } from '../utils/functions';
 import { getBadgeContentAndLabel } from './SalesAgentBadgeContent';
 
@@ -32,6 +33,7 @@ export const SalesAgentProductCardsCarousel = ({
   onExploreAllResults,
 }: SalesAgentProductCardsCarouselProps) => {
   const finalTheme = resolveTheme(theme);
+  const { isMobile } = useCheckIsMobile('md');
   const { totalProducts, areProductsMoreThanDisplayLimit, displayedProducts } =
     getProductCarouselDisplayInfo(products, numberOfProducts);
 
@@ -44,13 +46,14 @@ export const SalesAgentProductCardsCarousel = ({
     totalProducts,
     areProductsMoreThanDisplayLimit,
     onExploreAllResults,
+    isMobile,
   });
 
   return (
     <Carousel
       hideNavigation={hideNavigation}
       badgeContent={badgeContent}
-      badgeLabel={badgeLabel}
+      badgeLabel={badgeLabel ?? undefined}
       elements={displayedProducts.map((product, index) => (
         <SalesAgentProductCard
           key={product.id ?? `product-${index}`}
@@ -66,7 +69,7 @@ export const SalesAgentProductCardsCarousel = ({
           url={product.url}
           target="_blank"
           theme={finalTheme}
-          onClick={() => onProductCardClick(product)}
+          onClick={() => onProductCardClick?.(product)}
         />
       ))}
       theme={finalTheme}

package/src/components/FloatingChat/utils/functions.ts

@@ -169,8 +169,7 @@ export const getProductCarouselDisplayInfo = <T>(
 } => {
   const totalProducts = numberOfProducts ?? products.length;
   const areProductsMoreThanDisplayLimit = totalProducts > displayLimit;
-  const displayedProducts = areProductsMoreThanDisplayLimit
-    ? products.slice(0, displayLimit)
-    : products;
+  const maxDisplayed = areProductsMoreThanDisplayLimit ? displayLimit : totalProducts;
+  const displayedProducts = products.slice(0, maxDisplayed);
   return { totalProducts, areProductsMoreThanDisplayLimit, displayedProducts };
 };

package/src/components/ProductCard/ProductCard.tsx

@@ -4,10 +4,11 @@ import { TypographyColor } from '../Typography/types';
 import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextField } from '../WidgetTextField';
 import { ProductCardWidgetComponents } from './components';
-import { ProductCardProps } from './types';
+import { ProductCardProps, ProductCardVariant } from './types';
 
 export const ProductCard = ({
   theme = Theme.GLOBAL_CUSTOM,
+  variant = ProductCardVariant.DARK,
   imageSrc,
   headline,
   italicizeHeadline,
@@ -33,11 +34,14 @@ export const ProductCard = ({
   onTranscriptionCompleted,
 }: ProductCardProps) => {
   const resolvedTheme = resolveTheme(theme);
+  const isLight = variant === ProductCardVariant.LIGHT;
+  const minimalTextColor = isLight ? TypographyColor.TEXT_PRIMARY : TypographyColor.TEXT_LIGHT;
 
   return (
     <ProductCardWidgetComponents.Poster
       imageSrc={imageSrc}
       fallbackColor={fallbackColor}
+      variant={variant}
     >
       <ProductCardWidgetComponents.Header
         headline={headline}
@@ -46,6 +50,7 @@ export const ProductCard = ({
         textTypingDuration={textTypingDuration}
         textTransition={textTransition}
         loop={loop}
+        variant={variant}
       />
       <ProductCardWidgetComponents.Carousel
         theme={resolvedTheme}
@@ -63,15 +68,14 @@ export const ProductCard = ({
       <WidgetTextField
         theme={resolvedTheme}
         minimalFrame={resolvedTheme === Theme.MINIMAL ? 'bottom-only' : 'full'}
+        minimalBorderVariant={isLight ? 'primary' : 'light'}
         placeholder={placeholder}
         onClick={onInputClick}
         enableVoiceInput={voiceInputEnabled}
         onTranscriptionStarted={onTranscriptionStarted}
         onTranscriptionCompleted={onTranscriptionCompleted}
         textColor={
-          resolvedTheme === Theme.MINIMAL
-            ? TypographyColor.TEXT_LIGHT
-            : TypographyColor.TEXT_SECONDARY
+          resolvedTheme === Theme.MINIMAL ? minimalTextColor : TypographyColor.TEXT_SECONDARY
         }
         className={classNames(
           resolvedTheme === Theme.MINIMAL

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

@@ -4,7 +4,7 @@ import { Stack } from '../../Stack';
 import { Typography, TypographyColor, TypographyVariant } from '../../Typography';
 import { useAnimatedTextMinHeight } from '../../utils/useAnimatedTextMinHeight';
 import { useGetHeaderProperties } from '../hooks/useGetHeaderProperties';
-import { HeaderProps } from '../types';
+import { HeaderProps, ProductCardVariant } from '../types';
 
 export const Header = ({
   headline,
@@ -13,10 +13,16 @@ export const Header = ({
   textTypingDuration,
   textTransition,
   loop,
+  variant = ProductCardVariant.DARK,
 }: HeaderProps) => {
   const { stackClasses, headlineClasses } = useGetHeaderProperties(italicizeHeadline);
   const { measuringRef, minHeight } = useAnimatedTextMinHeight(animatedText);
 
+  const textColor =
+    variant === ProductCardVariant.LIGHT
+      ? TypographyColor.TEXT_PRIMARY
+      : TypographyColor.TEXT_LIGHT;
+
   const biggestText = useMemo(() => {
     return animatedText.reduce((maxText, currText) => {
       return currText.length > maxText.length ? currText : maxText;
@@ -27,12 +33,12 @@ export const Header = ({
     (text: string) => (
       <Typography
         variant={TypographyVariant.B3_MD}
-        color={TypographyColor.TEXT_LIGHT}
+        color={textColor}
       >
         {text}
       </Typography>
     ),
-    [],
+    [textColor],
   );
 
   return (
@@ -42,7 +48,7 @@ export const Header = ({
     >
       <Typography
         variant={TypographyVariant.H1_MD}
-        color={TypographyColor.TEXT_LIGHT}
+        color={textColor}
         className={headlineClasses}
         numberOfLines={2}
       >
@@ -63,7 +69,7 @@ export const Header = ({
             <div>
               <Typography
                 variant={TypographyVariant.B3_MD}
-                color={TypographyColor.TEXT_LIGHT}
+                color={textColor}
               >
                 {biggestText}
               </Typography>

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

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

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

@@ -1,7 +1,19 @@
-const OVERLAY_OPACITY = '60'; // 60%
+import { ProductCardVariant } from '../types';
 
-export const useGetPosterProperties = (imageSrc: string, fallbackColor: string) => {
-  const overlayColor = `#000000${OVERLAY_OPACITY}`;
+const DARK_OVERLAY_OPACITY = '60'; // ~38% opacity
+const LIGHT_OVERLAY_OPACITY = 'CC'; // 80% opacity
+
+export const useGetPosterProperties = (
+  imageSrc: string,
+  fallbackColor: string,
+  variant: ProductCardVariant = ProductCardVariant.DARK,
+) => {
+  const defaultOverlayColor =
+    variant === ProductCardVariant.LIGHT
+      ? `#FFFFFF${LIGHT_OVERLAY_OPACITY}`
+      : `#000000${DARK_OVERLAY_OPACITY}`;
+  // CSS variable allows external overrides (e.g. admin preview panel)
+  const overlayColor = `var(--envive-product-card-overlay, ${defaultOverlayColor})`;
   const bgColor = fallbackColor || 'black';
   const containerStyles: React.CSSProperties = {
     background: imageSrc

package/src/components/ProductCard/index.ts

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

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

@@ -2,6 +2,11 @@ import React from 'react';
 import { Theme } from '../../../../tokens/theme/theme';
 import { PromptButtonVariant } from '../../PromptButton';
 
+export enum ProductCardVariant {
+  DARK = 'dark',
+  LIGHT = 'light',
+}
+
 /**
  * Props for the Carousel component.
  */
@@ -70,6 +75,8 @@ export interface HeaderProps {
   textTransition?: number;
   /** Whether the animation should loop continuously. */
   loop?: boolean;
+  /** Controls text color: dark uses text-light (white), light uses text-primary. */
+  variant?: ProductCardVariant;
 }
 
 /**
@@ -82,6 +89,8 @@ export interface PosterProps {
   imageSrc: string;
   /** Fallback background color to display if the image fails to load. */
   fallbackColor?: string;
+  /** Controls overlay color on the image: dark uses black overlay, light uses white overlay. */
+  variant?: ProductCardVariant;
 }
 
 /**
@@ -116,4 +125,7 @@ export interface InputIconProps {
  * Excludes the 'children' prop from PosterProps.
  */
 export interface ProductCardProps
-  extends InputProps, CarouselProps, HeaderProps, Omit<PosterProps, 'children'> {}
+  extends InputProps, CarouselProps, HeaderProps, Omit<PosterProps, 'children'> {
+  /** Controls text color: dark uses text-light (white), light uses text-primary. Defaults to dark. */
+  variant?: ProductCardVariant;
+}

package/src/components/SocialProof/components/Headline.tsx

@@ -11,7 +11,7 @@ export type HeadlineProps = {
   theme: Theme;
   isLoading?: boolean;
   className?: string;
-  socialProofCounter: string;
+  socialProofCounter: string | string[];
   socialProofHeadline: string;
   primaryPromptButtonText: string;
   primaryPromptButtonVariant: PromptButtonVariant;

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

@@ -67,8 +67,11 @@ export const useSocialProofCount = ({
   }, [pageVariant, countKey, id]);
 
   // For safety ensure that the replacement string occurs in the string for now
-  const finalCustomerText = numberOfCustomersText.includes('{count}')
-    ? numberOfCustomersText
+  const numberOfCustomerString = Array.isArray(numberOfCustomersText)
+    ? numberOfCustomersText[0]
+    : numberOfCustomersText;
+  const finalCustomerText = numberOfCustomerString.includes('{count}')
+    ? numberOfCustomerString
     : DEFAULT_CUSTOMER_TEXT;
   return finalCustomerText.replace('{count}', customerCount.toString());
 };

package/src/components/WidgetTextField/WidgetTextField.tsx

@@ -19,6 +19,7 @@ export const WidgetTextField = ({
   voiceInputClassName,
   theme = Theme.GLOBAL_CUSTOM,
   minimalFrame = 'full',
+  minimalBorderVariant,
   iconVariant = IconVariant.DEFAULT,
   textColor = TypographyColor.TEXT_SECONDARY,
   placeholder,
@@ -80,6 +81,7 @@ export const WidgetTextField = ({
       className={className}
       theme={resolvedTheme}
       minimalFrame={minimalFrame}
+      minimalBorderVariant={minimalBorderVariant}
       disabled={disabled}
       ariaLabel={ariaLabel}
       icon={

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

@@ -12,6 +12,7 @@ type ContainerProps = {
   className?: string;
   theme: Theme;
   minimalFrame?: 'full' | 'bottom-only';
+  minimalBorderVariant?: 'light' | 'primary';
   ariaLabel?: string;
   icon: React.ReactNode;
   text: React.ReactNode;
@@ -27,6 +28,7 @@ export const Container = ({
   className,
   theme,
   minimalFrame,
+  minimalBorderVariant,
   ariaLabel,
   icon,
   text,
@@ -38,6 +40,7 @@ export const Container = ({
     useGetContainerProperties({
       theme,
       minimalFrame,
+      minimalBorderVariant,
     });
 
   const { handleKeyDown } = useHandleKeyboard({ onClick });

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

@@ -4,19 +4,25 @@ import { Theme } from '../../../../tokens/theme/theme';
 export type UseGetContainerPropertiesProps = {
   theme: Theme;
   minimalFrame?: 'full' | 'bottom-only';
+  minimalBorderVariant?: 'light' | 'primary';
 };
 
 export const useGetContainerProperties = ({
   theme,
   minimalFrame = 'full',
+  minimalBorderVariant = 'light',
 }: UseGetContainerPropertiesProps) => {
   const baseClassName =
     'envive-tw-cursor-text envive-tw-border-solid envive-tw-px-4 envive-tw-py-2 envive-tw-bg-[--envive-colors-background-light]';
 
   const themeContainerClassName = useMemo(() => {
+    const borderColorClass =
+      minimalBorderVariant === 'primary'
+        ? 'envive-tw-border-text-primary'
+        : 'envive-tw-border-text-light';
     const minimalBorderClass =
       minimalFrame === 'bottom-only'
-        ? 'envive-tw-border-b-[1px] envive-tw-border-text-light'
+        ? `envive-tw-border-b-[1px] ${borderColorClass}`
         : 'envive-tw-border-[1px] envive-tw-border-border-light';
 
     const themeCotainerMap = {
@@ -27,7 +33,7 @@ export const useGetContainerProperties = ({
       [Theme.GLOBAL_CUSTOM]: '',
     };
     return themeCotainerMap[theme] ?? '';
-  }, [theme, minimalFrame]);
+  }, [theme, minimalFrame, minimalBorderVariant]);
 
   const containerWrapperClassName =
     'envive-tw-gap-4 envive-tw-flex envive-tw-w-full envive-tw-flex-row';

package/src/components/WidgetTextField/types/types.ts

@@ -36,6 +36,8 @@ export type WidgetTextFieldProps = {
    * @default 'full'
    */
   minimalFrame?: 'full' | 'bottom-only';
+  /** Border color for the bottom-only minimal frame. `light` = text-light (white), `primary` = text-primary. @default 'light' */
+  minimalBorderVariant?: 'light' | 'primary';
   /** Placeholder text displayed in the text field. */
   placeholder?: string;
   /** Accessible label for screen readers. If not provided, the placeholder will be used. */