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

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import React from 'react';
 import { motion } from 'framer-motion';
 import classNames from 'classnames';
@@ -39,7 +40,10 @@ export const SearchAutocomplete = ({
         {parts.map((part, index) => {
           const isMatch = part.toLowerCase() === searchQuery.toLowerCase();
           return isMatch ? (
-            <strong key={index} className="spiffy-tw-font-bold">
+            <strong
+              key={index}
+              className="spiffy-tw-font-bold"
+            >
               {part}
             </strong>
           ) : (
@@ -50,21 +54,19 @@ export const SearchAutocomplete = ({
     );
   };
 
-  const containerClasses = classNames(
-    'spiffy-tw-mt-[16px]',
-    'spiffy-tw-mb-[8px]',
-  );
+  const containerClasses = classNames('spiffy-tw-mt-[16px]', 'spiffy-tw-mb-[8px]');
 
-  const getListElementClasses = (index: number) => classNames(
-    'spiffy-tw-flex',
-    'spiffy-tw-items-center',
-    'spiffy-tw-cursor-pointer',
-    'spiffy-tw-py-[8px]',
-    'spiffy-tw-pl-[16px]',
-    'spiffy-tw-text-[--spiffy-colors-text-primary]',
-    'hover:spiffy-tw-bg-neutral-100',
-    { 'spiffy-tw-bg-neutral-200': focusedIndex === index },
-  );
+  const getListElementClasses = (index: number) =>
+    classNames(
+      'spiffy-tw-flex',
+      'spiffy-tw-items-center',
+      'spiffy-tw-cursor-pointer',
+      'spiffy-tw-py-[8px]',
+      'spiffy-tw-pl-[16px]',
+      'spiffy-tw-text-[--spiffy-colors-text-primary]',
+      'hover:spiffy-tw-bg-neutral-100',
+      { 'spiffy-tw-bg-neutral-200': focusedIndex === index },
+    );
 
   return (
     <motion.div
@@ -74,7 +76,11 @@ export const SearchAutocomplete = ({
       exit={{ opacity: 0, y: -10 }}
       transition={{ duration: 0.2 }}
     >
-      <ul id={id} role="listbox" className={containerClasses}>
+      <ul
+        id={id}
+        role="listbox"
+        className={containerClasses}
+      >
         {results.map((result, index) => (
           <li
             key={index}
@@ -83,14 +89,14 @@ export const SearchAutocomplete = ({
             aria-selected={index === focusedIndex}
             className={getListElementClasses(index)}
             onClick={() => onSuggestionSelect(result, index)}
-            onKeyDown={(event) => {
+            onKeyDown={event => {
               if (event.key === 'Enter' || event.keyCode === 13) {
                 onSuggestionSelect(result, index);
               }
             }}
           >
             <OutlinedStar
-              className="spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-[16px]"
+              className="spiffy-tw-mr-[16px] spiffy-tw-h-[16px] spiffy-tw-w-[16px]"
               fill={iconColor}
             />
             {highlightMatchingText(result, searchText)}
@@ -99,4 +105,4 @@ export const SearchAutocomplete = ({
       </ul>
     </motion.div>
   );
-};
+};

package/src/components/SearchFilter/SearchFilter.tsx

@@ -20,7 +20,7 @@ const SortFilter = ({
 }: FilterProps) => {
   const filterTitle = filter.displayName;
 
-  const options = filter.items.map((item) => ({
+  const options = filter.items.map(item => ({
     label: item.displayName,
     value: item.filterItemId,
     isSelected: item.isSelected,
@@ -30,8 +30,8 @@ const SortFilter = ({
     <RadioButtonGroup
       options={options}
       name={filterTitle}
-      onChange={(value) => {
-        const selectedItem = filter.items.find((item) => item.filterItemId === value);
+      onChange={value => {
+        const selectedItem = filter.items.find(item => item.filterItemId === value);
         selectFilterItem({
           filterId: filter.filterId,
           filterItemId: value,
@@ -41,14 +41,19 @@ const SortFilter = ({
       }}
       gap="large"
       textButtonGap="large"
-      value={filter.items.find((item) => item.isSelected)?.filterItemId}
+      value={filter.items.find(item => item.isSelected)?.filterItemId}
       fillColor={radioButtonFillColor}
       hoverColor={radioButtonHoverColor}
       uncheckedBorderColor={radioButtonUncheckedBorderColor}
     />
   );
 
-  return <Accordion title={filterTitle} content={content} />;
+  return (
+    <Accordion
+      title={filterTitle}
+      content={content}
+    />
+  );
 };
 
 const FilterItem = ({ filterId, filterItem, selectFilterItem }: FilterItemProps) => (
@@ -82,7 +87,7 @@ const Filter = ({ filter, selectFilterItem }: FilterProps) => {
     selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
   const content = (
     <div className={filterContentClassName}>
-      {filter.items.map((item) => (
+      {filter.items.map(item => (
         <FilterItem
           key={item.filterItemId}
           filterId={filter.filterId}
@@ -92,7 +97,12 @@ const Filter = ({ filter, selectFilterItem }: FilterProps) => {
       ))}
     </div>
   );
-  return <Accordion title={filterTitle} content={content} />;
+  return (
+    <Accordion
+      title={filterTitle}
+      content={content}
+    />
+  );
 };
 
 export const SearchFilter = ({
@@ -157,8 +167,8 @@ export const SearchFilter = ({
     >
       <div className={filterWrapperClassName}>
         {filters
-          .filter((filter) => filter.displayName !== '')
-          .map((filter) => {
+          .filter(filter => filter.displayName !== '')
+          .map(filter => {
             if (filter.filterId === 'sort') {
               return (
                 <SortFilter
@@ -172,7 +182,11 @@ export const SearchFilter = ({
               );
             }
             return (
-              <Filter key={filter.filterId} filter={filter} selectFilterItem={selectFilterItem} />
+              <Filter
+                key={filter.filterId}
+                filter={filter}
+                selectFilterItem={selectFilterItem}
+              />
             );
           })}
       </div>

package/src/components/SearchFilter/SearchFilterHeader.tsx

@@ -20,7 +20,10 @@ export const SearchFilterHeader = ({
         headerClassName,
       )}
     >
-      <Typography variant="body2" className="spiffy-tw-font-medium">
+      <Typography
+        variant="body2"
+        className="spiffy-tw-font-medium"
+      >
         Filters ({productCount})
       </Typography>
       <button

package/src/components/SearchFilter/SearchFilterItem.tsx

@@ -28,13 +28,13 @@ export const SearchFilterItem = ({
       aria-selected={isSelected}
       className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2"
       onClick={() => onSelectFilterItem(filterItem)}
-      onKeyDown={(event) => {
+      onKeyDown={event => {
         if (event.key === 'Enter' || event.key === ' ') {
           event.preventDefault();
           onSelectFilterItem(filterItem);
         }
       }}
-      onKeyUp={(event) => {
+      onKeyUp={event => {
         if (event.key === ' ') {
           event.preventDefault();
         }
@@ -44,7 +44,7 @@ export const SearchFilterItem = ({
       <div className={radioClasses}>
         {isSelected && (
           <div
-            className={classNames('spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full', {
+            className={classNames('spiffy-tw-h-2 spiffy-tw-w-2 spiffy-tw-rounded-full', {
               'spiffy-tw-bg-white': radioButtonFillColor.includes('spiffy-tw-bg-'),
               'spiffy-tw-bg-black': radioButtonFillColor.includes('spiffy-tw-bg-white'),
             })}

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/SearchFilter/useHasFilterStateChanged.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { SearchFilterDatum } from '@envive-ai/react-hooks/types';
 
 export const useHasFilterStateChanged = (filters: SearchFilterDatum[], isOpen: boolean) => {
@@ -8,8 +8,8 @@ export const useHasFilterStateChanged = (filters: SearchFilterDatum[], isOpen: b
   // Create current filter states map to check for filter changes
   const currentFilterStates = useMemo(() => {
     const states: Record<string, boolean> = {};
-    filters.forEach((filter) => {
-      filter.items.forEach((item) => {
+    filters.forEach(filter => {
+      filter.items.forEach(item => {
         states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
       });
     });
@@ -24,7 +24,7 @@ export const useHasFilterStateChanged = (filters: SearchFilterDatum[], isOpen: b
     }
 
     const changed = Object.keys(currentFilterStates).some(
-      (key) => currentFilterStates[key] !== initialFilterStates[key],
+      key => currentFilterStates[key] !== initialFilterStates[key],
     );
 
     return changed;

package/src/components/SearchInput/SearchInput.tsx

@@ -1,4 +1,5 @@
-import React, { useRef, useImperativeHandle } from 'react';
+/* eslint-disable react/display-name */
+import React, { useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
 import MagnifyingGlassStarVariant from '@envive-ai/react-icons/MagnifyingGlassStarVariant';
 import IconClose from '@envive-ai/react-icons/IconClose';
@@ -87,7 +88,10 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
     ]);
 
     return (
-      <div className={containerClasses} data-testid={dataTestId}>
+      <div
+        className={containerClasses}
+        data-testid={dataTestId}
+      >
         <div className="spiffy-tw-absolute spiffy-tw-left-3 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2">
           <MagnifyingGlassStarVariant
             className={

package/src/components/SearchInput/searchInputVariants.ts

@@ -1,4 +1,4 @@
-import { colorVar, ColorNames } from 'src/models/colorsConfig';
+import { ColorNames, colorVar } from 'src/models/colorsConfig';
 import { SearchInputVariant } from '../../atoms/search/types';
 import { TypographyVariantMap } from '../Typography/typographyVariantClasses';
 

package/src/components/SearchInputForm/SearchInputForm.tsx

@@ -40,15 +40,12 @@ export const SearchInputForm = ({
 }: SearchInputFormProps) => {
   const { autocompleteIconColor } = searchInputVariantClasses[searchInputVariant];
 
-  const containerClasses = classNames(
-    'spiffy-tw-relative',
-    'spiffy-tw-w-full'
-  );
+  const containerClasses = classNames('spiffy-tw-relative', 'spiffy-tw-w-full');
 
   const formClasses = classNames({
     'spiffy-tw-grow': true,
     'spiffy-tw-relative': true,
-    'spiffy-tw-z-20': shouldShowAutocomplete
+    'spiffy-tw-z-20': shouldShowAutocomplete,
   });
 
   const autocompleteContainerClasses = classNames(
@@ -62,13 +59,13 @@ export const SearchInputForm = ({
     'spiffy-tw-rounded-b-lg',
     'spiffy-tw-border',
     'spiffy-tw-border-t-0',
-    'spiffy-tw-pt-4'
+    'spiffy-tw-pt-4',
   );
 
   return (
     <div className={containerClasses}>
       <form
-        onSubmit={(e) => {
+        onSubmit={e => {
           e.preventDefault();
           onSearchSubmit();
         }}

package/src/components/SearchResultsContent/SearchResultsContent.tsx

@@ -112,4 +112,4 @@ export const SearchResultsContent = ({
       )}
     </div>
   );
-};
+};

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/SearchResultsFilterModal/SearchResultsFilterModal.tsx

@@ -1,6 +1,9 @@
 import { SearchFilterDatum, SelectFilterItem } from '@envive-ai/react-hooks/types';
 import { SearchFilter, SearchFilterHeader } from '../SearchFilter';
-import { SearchFilterSidebarVariant, searchFilterSidebarVariantClasses } from '../SearchResultsFilterSidebar';
+import {
+  SearchFilterSidebarVariant,
+  searchFilterSidebarVariantClasses,
+} from '../SearchResultsFilterSidebar';
 
 export type SearchResultsFilterModalProps = {
   productCount: number;

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/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts

@@ -1,5 +1,5 @@
 import { ColorNames, colorVar } from 'src/models/colorsConfig';
-import type { SearchFilterSidebarVariant, CloseIconVariant } from './types';
+import type { CloseIconVariant, SearchFilterSidebarVariant } from './types';
 
 interface SearchFilterSidebarVariantClasses {
   searchFilterHeaderClasses: string;

package/src/components/SearchResultsStates/NoSearchResultsFound.tsx

@@ -56,7 +56,7 @@ export const NoSearchResultsFound = ({
       <div className="spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2">
         <div>
           <Sparkles
-            className="spiffy-tw-w-[24px] spiffy-tw-h-[24px]"
+            className="spiffy-tw-h-[24px] spiffy-tw-w-[24px]"
             style={{ color: sparkleIconColor }}
           />
         </div>
@@ -70,4 +70,4 @@ export const NoSearchResultsFound = ({
       />
     </div>
   );
-};
+};

package/src/components/SearchResultsStates/SearchResultsGrid.tsx

@@ -74,7 +74,7 @@ export const SearchResultsGrid = ({
 
   return (
     <motion.div
-      className="spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden"
+      className="spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
@@ -105,4 +105,4 @@ export const SearchResultsGrid = ({
       />
     </motion.div>
   );
-};
+};

package/src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable react/no-array-index-key */
 import { motion } from 'framer-motion';
 import { Typography } from 'src/components/Typography';
-import { ProductGridVariant, ProductCardSkeleton } from '../ProductCard';
+import { ProductCardSkeleton, ProductGridVariant } from '../ProductCard';
 import { productGridVariantClasses } from '../ProductGrid';
 import { SparkleAnimation } from '../SparkleAnimation';
 
@@ -18,17 +19,20 @@ export const SearchResultsLoadingGrid = ({
 
   return (
     <motion.div
-      className="spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden"
+      className="spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 0.2 }}
     >
       <div className="spiffy-tw-mt-6 spiffy-tw-w-full">
-        <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-mb-4">
-          <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-2 spiffy-tw-ml-[16px] md:spiffy-tw-ml-[80px]">
+        <div className="spiffy-tw-mb-4 spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between">
+          <div className="spiffy-tw-ml-[16px] spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-2 md:spiffy-tw-ml-[80px]">
             <div className="spiffy-tw-width-[24px]">
-              <SparkleAnimation color={sparkleIconColor} animate />
+              <SparkleAnimation
+                color={sparkleIconColor}
+                animate
+              />
             </div>
             <Typography variant="body2">Finding the best options for you...</Typography>
           </div>

package/src/components/SearchResultsToolbar/SearchResultsToolbar.tsx

@@ -1,14 +1,13 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { SearchInputVariant } from '@envive-ai/react-hooks/contexts/types';
 import { SearchResultsFilterButton } from '../SearchResultsFilterButton';
 import { SearchInputForm } from '../SearchInputForm';
 
-
 interface SearchResultsToolbarProps {
   // From widgetConfig
-    searchInputVariant: SearchInputVariant;
-    searchBoxPlaceholder: string;
+  searchInputVariant: SearchInputVariant;
+  searchBoxPlaceholder: string;
   // From search hook
   searchText: string;
   focusedIndex: number;
@@ -59,7 +58,7 @@ export const SearchResultsToolbar = ({
   className,
 }: SearchResultsToolbarProps) => {
   const [hasZIndex, setHasZIndex] = React.useState(false);
-
+  const searchInputRef = useRef<HTMLInputElement>(null);
   // The following is to ensure the z-index is applied after the animation is complete
   // because otherwise the z-index would be applied instantly when the component is mounted
   // which would cause the search toolbar to appear over the top of the merchant header
@@ -84,7 +83,10 @@ export const SearchResultsToolbar = ({
   const contentWrapperClasses = classNames('spiffy-tw-flex', containerXPaddingClasses);
 
   return (
-    <div className={toolbarClasses} ref={toolbarRef}>
+    <div
+      className={toolbarClasses}
+      ref={toolbarRef}
+    >
       <div className={contentWrapperClasses}>
         <SearchInputForm
           searchInputVariant={searchInputVariant}
@@ -100,6 +102,7 @@ export const SearchResultsToolbar = ({
           shouldShowAutocomplete={shouldShowAutocomplete}
           onSearchSubmit={onSubmitSearch}
           onAutocompleteSelect={onAutocompleteSelect}
+          searchInputRef={searchInputRef}
         />
         <SearchResultsFilterButton
           setIsOpen={setIsFilterOpen}
@@ -108,4 +111,4 @@ export const SearchResultsToolbar = ({
       </div>
     </div>
   );
-};
+};

package/src/components/SparkleAnimation/SparkleAnimation.tsx

@@ -59,13 +59,16 @@ export const SparkleAnimation = ({ color, className, animate = true }: SparkleAn
       <div
         className={classNames(
           SparkleAnimationOverride.STAR_ONE_CONTAINER,
-          'spiffy-tw-absolute -spiffy-tw-top-[2px] spiffy-tw-left-0',
+          'spiffy-tw-left-0 spiffy-tw-absolute -spiffy-tw-top-[2px]',
         )}
       >
-        <motion.div animate={{ scale: mainStarScale }} transition={starTransition}>
+        <motion.div
+          animate={{ scale: mainStarScale }}
+          transition={starTransition}
+        >
           <FourPointStar
             fill={color}
-            className="spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-inline-block"
+            className="spiffy-tw-inline-block spiffy-tw-h-4 spiffy-tw-w-4"
           />
         </motion.div>
       </div>
@@ -77,10 +80,13 @@ export const SparkleAnimation = ({ color, className, animate = true }: SparkleAn
           'spiffy-tw-absolute -spiffy-tw-top-[7px] spiffy-tw-left-[10px]',
         )}
       >
-        <motion.div animate={{ scale: smallStar1Scale }} transition={starTransition}>
+        <motion.div
+          animate={{ scale: smallStar1Scale }}
+          transition={starTransition}
+        >
           <FourPointStar
             fill={color}
-            className="spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
+            className="spiffy-tw-inline-block spiffy-tw-h-2 spiffy-tw-w-2"
           />
         </motion.div>
       </div>
@@ -89,13 +95,16 @@ export const SparkleAnimation = ({ color, className, animate = true }: SparkleAn
       <div
         className={classNames(
           SparkleAnimationOverride.STAR_THREE_CONTAINER,
-          'spiffy-tw-absolute spiffy-tw-top-[1px] spiffy-tw-left-[12px]',
+          'spiffy-tw-absolute spiffy-tw-left-[12px] spiffy-tw-top-[1px]',
         )}
       >
-        <motion.div animate={{ scale: smallStar2Scale }} transition={starTransition}>
+        <motion.div
+          animate={{ scale: smallStar2Scale }}
+          transition={starTransition}
+        >
           <FourPointStar
             fill={color}
-            className="spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
+            className="spiffy-tw-inline-block spiffy-tw-h-2 spiffy-tw-w-2"
           />
         </motion.div>
       </div>

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 = [
@@ -193,7 +202,7 @@ const borderedVariants = [
 ];
 
 const hoverTransform = (variantClass: string[]): string[] =>
-  variantClass?.map((className) => `hover:${className}`);
+  variantClass?.map(className => `hover:${className}`);
 
 export const SuggestionButton = ({
   variant,
@@ -233,10 +242,10 @@ export const SuggestionButton = ({
   const hoverClasses = variantClassMap.get(hoverVariant) ?? [];
 
   // Separate border classes for proper cascading
-  const baseBorderClasses = baseClasses.filter((cls) => cls.includes('border'));
-  const baseNonBorderClasses = baseClasses.filter((cls) => !cls.includes('border'));
-  const hoverBorderClasses = hoverClasses.filter((cls) => cls.includes('border'));
-  const hoverNonBorderClasses = hoverClasses.filter((cls) => !cls.includes('border'));
+  const baseBorderClasses = baseClasses.filter(cls => cls.includes('border'));
+  const baseNonBorderClasses = baseClasses.filter(cls => !cls.includes('border'));
+  const hoverBorderClasses = hoverClasses.filter(cls => cls.includes('border'));
+  const hoverNonBorderClasses = hoverClasses.filter(cls => !cls.includes('border'));
 
   const variantClasses = [
     ...baseNonBorderClasses,
@@ -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/components/SuggestionButton/types.ts

@@ -12,4 +12,4 @@ export type SuggestionButtonVariant =
   | 'secondaryAccent'
   | 'transparent'
   | 'transparentDark'
-  | 'lightDark';
+  | 'lightDark';

package/src/components/TextInput/TextInput.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable react/display-name */
 import React from 'react';
 import classNames from 'classnames';
 
-import { getVariantPlaceholderClassNames, TypographyVariantMap } from '../Typography';
+import { TypographyVariantMap, getVariantPlaceholderClassNames } from '../Typography';
 
 export interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   borderRadius: 'sm' | 'md' | 'lg' | 'xl';
@@ -27,6 +28,12 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       className,
     ]);
 
-    return <input ref={ref} {...rest} className={inputClasses} />;
+    return (
+      <input
+        ref={ref}
+        {...rest}
+        className={inputClasses}
+      />
+    );
   },
 );