@envive-ai/react-toolkit 0.2.3 → 0.2.5

package/dist/SearchResultsStates/index.cjs

@@ -1,12 +1,12 @@
 require('../Typography-CFNWgbM5.cjs');
 require('../DynamicFiltersScrollbar-50i_InZz.cjs');
 require('../ImageWithFallback-1LqhQK1q.cjs');
-require('../ProductGrid-Dcy7JxVN.cjs');
-require('../ProductCard-D1F9A8Rw.cjs');
-require('../Spinner-B1IEMa00.cjs');
-require('../colorsConfig-D-MZuBvt.cjs');
-const require_SearchResultsStates = require('../SearchResultsStates-DQlstrHd.cjs');
-require('../searchFilterSidebarVariants-DXabOauB.cjs');
+require('../ProductCard-CByKIsUN.cjs');
+require('../Spinner-DjK8ts9E.cjs');
+require('../ProductGrid-BeFeluHo.cjs');
+require('../colorsConfig-CRxY3SQ_.cjs');
+const require_SearchResultsStates = require('../SearchResultsStates-e5W9Ok19.cjs');
+require('../searchFilterSidebarVariants-CjDvgxxT.cjs');
 require('../SparkleAnimation-Bm3fk2FJ.cjs');
 
 exports.NoSearchResultsFound = require_SearchResultsStates.NoSearchResultsFound;

package/dist/SearchResultsStates/index.d.cts

@@ -1,5 +1,5 @@
-import { ProductCardConfig, ProductGridVariant } from "../index-cx3r6TgQ.cjs";
-import { SearchFilterSidebarVariant } from "../index-B-5pBFE7.cjs";
+import { ProductCardConfig, ProductGridVariant } from "../index-DWTTeC2a.cjs";
+import { SearchFilterSidebarVariant } from "../index-BQVJifDf.cjs";
 import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
 import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";

package/dist/SearchResultsStates/index.d.ts

@@ -1,6 +1,6 @@
-import { ProductCardConfig, ProductGridVariant } from "../index-BzY_al-V.js";
-import { SearchFilterSidebarVariant } from "../index-BcvJf9Sr.js";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import { ProductCardConfig, ProductGridVariant } from "../index-BdNJ2gwC.js";
+import { SearchFilterSidebarVariant } from "../index-fXyRC79n.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
 import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
@@ -16,7 +16,7 @@ declare const NoSearchResultsFound: ({
   includeBottomMargin,
   noResultsFoundText,
   sparkleIconColor
-}: NoSearchResultsFoundProps) => react_jsx_runtime7.JSX.Element;
+}: NoSearchResultsFoundProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/SearchResultsStates/SearchResultsGrid.d.ts
 interface SearchResultsGridProps {
@@ -53,7 +53,7 @@ declare const SearchResultsGrid: ({
   productGridClasses,
   onRemoveFilter,
   onToggleDynamicFilter
-}: SearchResultsGridProps) => react_jsx_runtime7.JSX.Element;
+}: SearchResultsGridProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/SearchResultsStates/SearchResultsLoadingGrid.d.ts
 declare const SearchResultsLoadingGrid: ({
@@ -64,6 +64,6 @@ declare const SearchResultsLoadingGrid: ({
   productGridVariant: ProductGridVariant;
   productGridClasses: string;
   sparkleIconColor?: string;
-}) => react_jsx_runtime7.JSX.Element;
+}) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/SearchResultsStates/index.js

@@ -1,12 +1,12 @@
 import "../Typography-D3vDkBMS.js";
 import "../DynamicFiltersScrollbar-AhyHehrB.js";
 import "../ImageWithFallback-Ckwsmd8P.js";
-import "../ProductGrid-NtuMrOtp.js";
-import "../ProductCard-2aPkjS8z.js";
-import "../Spinner-BrHoB-Zg.js";
-import "../colorsConfig-DEfiLHH0.js";
-import { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid } from "../SearchResultsStates-CalOf6QP.js";
-import "../searchFilterSidebarVariants-BD4SYugF.js";
+import "../ProductCard-BIlnM2nV.js";
+import "../Spinner-BqTt55uu.js";
+import "../ProductGrid-Cgkb4vNf.js";
+import "../colorsConfig-D_IPWAUL.js";
+import { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid } from "../SearchResultsStates-DzNMYUKh.js";
+import "../searchFilterSidebarVariants-Clm9ddD5.js";
 import "../SparkleAnimation-D1QjYho_.js";
 
 export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/{SearchResultsStates-CalOf6QP.js → SearchResultsStates-DzNMYUKh.js}

@@ -1,8 +1,8 @@
 import { Typography } from "./Typography-D3vDkBMS.js";
 import { AppliedFiltersScrollbar, DynamicFiltersScrollbar } from "./DynamicFiltersScrollbar-AhyHehrB.js";
-import { ProductGrid, productGridVariantClasses } from "./ProductGrid-NtuMrOtp.js";
-import { ProductCardSkeleton } from "./ProductCard-2aPkjS8z.js";
-import { searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-BD4SYugF.js";
+import { ProductCardSkeleton } from "./ProductCard-BIlnM2nV.js";
+import { ProductGrid, productGridVariantClasses } from "./ProductGrid-Cgkb4vNf.js";
+import { searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-Clm9ddD5.js";
 import { SparkleAnimation } from "./SparkleAnimation-D1QjYho_.js";
 import { motion } from "framer-motion";
 import classNames from "classnames";

package/dist/{SearchResultsStates-DQlstrHd.cjs → SearchResultsStates-e5W9Ok19.cjs}

@@ -1,9 +1,9 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-CFNWgbM5.cjs');
 const require_DynamicFiltersScrollbar = require('./DynamicFiltersScrollbar-50i_InZz.cjs');
-const require_ProductGrid = require('./ProductGrid-Dcy7JxVN.cjs');
-const require_ProductCard = require('./ProductCard-D1F9A8Rw.cjs');
-const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants-DXabOauB.cjs');
+const require_ProductCard = require('./ProductCard-CByKIsUN.cjs');
+const require_ProductGrid = require('./ProductGrid-BeFeluHo.cjs');
+const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants-CjDvgxxT.cjs');
 const require_SparkleAnimation = require('./SparkleAnimation-Bm3fk2FJ.cjs');
 let framer_motion = require("framer-motion");
 framer_motion = require_chunk.__toESM(framer_motion);

package/dist/SparkleAnimation/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/SparkleAnimation/SparkleAnimation.d.ts
 interface SparkleAnimationProps {
@@ -10,7 +10,7 @@ declare const SparkleAnimation: ({
   color,
   className,
   animate
-}: SparkleAnimationProps) => react_jsx_runtime4.JSX.Element;
+}: SparkleAnimationProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/components/SparkleAnimation/types.d.ts
 declare enum SparkleAnimationOverride {

package/dist/SparkleAnimation/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/SparkleAnimation/SparkleAnimation.d.ts
 interface SparkleAnimationProps {
@@ -10,7 +10,7 @@ declare const SparkleAnimation: ({
   color,
   className,
   animate
-}: SparkleAnimationProps) => react_jsx_runtime4.JSX.Element;
+}: SparkleAnimationProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 //#region src/components/SparkleAnimation/types.d.ts
 declare enum SparkleAnimationOverride {

package/dist/Spinner/index.cjs

@@ -1,3 +1,3 @@
-const require_Spinner = require('../Spinner-B1IEMa00.cjs');
+const require_Spinner = require('../Spinner-DjK8ts9E.cjs');
 
 exports.Spinner = require_Spinner.Spinner;

package/dist/Spinner/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/Spinner/Spinner.d.ts
 type SpinnerProps = {
@@ -6,6 +6,6 @@ type SpinnerProps = {
 };
 declare const Spinner: ({
   className
-}: SpinnerProps) => react_jsx_runtime0.JSX.Element;
+}: SpinnerProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Spinner };

package/dist/Spinner/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/Spinner/Spinner.d.ts
 type SpinnerProps = {
@@ -6,6 +6,6 @@ type SpinnerProps = {
 };
 declare const Spinner: ({
   className
-}: SpinnerProps) => react_jsx_runtime3.JSX.Element;
+}: SpinnerProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { Spinner };

package/dist/Spinner/index.js

@@ -1,3 +1,3 @@
-import { Spinner } from "../Spinner-BrHoB-Zg.js";
+import { Spinner } from "../Spinner-BqTt55uu.js";
 
 export { Spinner };

package/dist/SuggestionButton/index.cjs

@@ -78,6 +78,13 @@ const variantClassMap = new Map([
 		"spiffy-tw-stroke-[--spiffy-colors-text-accent]",
 		BORDER_CLASS
 	]],
+	["darkAccentContrast", [
+		...DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		"spiffy-tw-fill-[--spiffy-colors-accent-primary]",
+		"spiffy-tw-stroke-[--spiffy-colors-accent-primary]",
+		BORDER_CLASS
+	]],
 	["transparent", [
 		"spiffy-tw-bg-transparent",
 		"spiffy-tw-border-[--spiffy-colors-background-light]",
@@ -120,6 +127,7 @@ const borderedVariants = [
 	"tertiary",
 	"dark",
 	"darkAccent",
+	"darkAccentContrast",
 	"darkPrimary",
 	"transparent",
 	"transparentDark",

package/dist/SuggestionButton/index.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SuggestionButton/types.d.ts
-type SuggestionButtonVariant = 'outlined' | 'outlinedLight' | 'primary' | 'secondary' | 'tertiary' | 'dark' | 'darkAccent' | 'darkPrimary' | 'secondaryDark' | 'secondaryAccent' | 'transparent' | 'transparentDark' | 'lightDark';
+type SuggestionButtonVariant = 'outlined' | 'outlinedLight' | 'primary' | 'secondary' | 'tertiary' | 'dark' | 'darkAccent' | 'darkAccentContrast' | 'darkPrimary' | 'secondaryDark' | 'secondaryAccent' | 'transparent' | 'transparentDark' | 'lightDark';
 //#endregion
 //#region src/components/SuggestionButton/SuggestionButton.d.ts
 declare const SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = "spiffy-suggestion-button-question-class";
@@ -30,6 +30,6 @@ declare const SuggestionButton: ({
   dataAttributes,
   dataTestId,
   onClick
-}: SuggestionButtonProps) => react_jsx_runtime5.JSX.Element;
+}: SuggestionButtonProps) => react_jsx_runtime22.JSX.Element;
 //#endregion
 export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant };

package/dist/SuggestionButton/index.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SuggestionButton/types.d.ts
-type SuggestionButtonVariant = 'outlined' | 'outlinedLight' | 'primary' | 'secondary' | 'tertiary' | 'dark' | 'darkAccent' | 'darkPrimary' | 'secondaryDark' | 'secondaryAccent' | 'transparent' | 'transparentDark' | 'lightDark';
+type SuggestionButtonVariant = 'outlined' | 'outlinedLight' | 'primary' | 'secondary' | 'tertiary' | 'dark' | 'darkAccent' | 'darkAccentContrast' | 'darkPrimary' | 'secondaryDark' | 'secondaryAccent' | 'transparent' | 'transparentDark' | 'lightDark';
 //#endregion
 //#region src/components/SuggestionButton/SuggestionButton.d.ts
 declare const SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = "spiffy-suggestion-button-question-class";
@@ -30,6 +30,6 @@ declare const SuggestionButton: ({
   dataAttributes,
   dataTestId,
   onClick
-}: SuggestionButtonProps) => react_jsx_runtime2.JSX.Element;
+}: SuggestionButtonProps) => react_jsx_runtime7.JSX.Element;
 //#endregion
 export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant };

package/dist/SuggestionButton/index.js

@@ -73,6 +73,13 @@ const variantClassMap = new Map([
 		"spiffy-tw-stroke-[--spiffy-colors-text-accent]",
 		BORDER_CLASS
 	]],
+	["darkAccentContrast", [
+		...DARK_BACKGROUND_CLASSES,
+		"spiffy-tw-text-[--spiffy-colors-text-light]",
+		"spiffy-tw-fill-[--spiffy-colors-accent-primary]",
+		"spiffy-tw-stroke-[--spiffy-colors-accent-primary]",
+		BORDER_CLASS
+	]],
 	["transparent", [
 		"spiffy-tw-bg-transparent",
 		"spiffy-tw-border-[--spiffy-colors-background-light]",
@@ -115,6 +122,7 @@ const borderedVariants = [
 	"tertiary",
 	"dark",
 	"darkAccent",
+	"darkAccentContrast",
 	"darkPrimary",
 	"transparent",
 	"transparentDark",

package/dist/TextInput/index.cjs

@@ -1,4 +1,4 @@
 require('../Typography-CFNWgbM5.cjs');
-const require_TextInput = require('../TextInput-iAKCKHwT.cjs');
+const require_TextInput = require('../TextInput-BKNorxPl.cjs');
 
 exports.TextInput = require_TextInput.TextInput;

package/dist/TextInput/index.js

@@ -1,4 +1,4 @@
 import "../Typography-D3vDkBMS.js";
-import { TextInput } from "../TextInput-B_4Bu2vf.js";
+import { TextInput } from "../TextInput-NKOORtYu.js";
 
 export { TextInput };

package/dist/ToggleButton/index.cjs

@@ -1,4 +1,4 @@
 require('../Typography-CFNWgbM5.cjs');
-const require_ToggleButton = require('../ToggleButton-CJ74eu-N.cjs');
+const require_ToggleButton = require('../ToggleButton-DCiR4sB5.cjs');
 
 exports.ToggleButton = require_ToggleButton.ToggleButton;

package/dist/ToggleButton/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime0.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime28.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/ToggleButton/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime27.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/ToggleButton/index.js

@@ -1,4 +1,4 @@
 import "../Typography-D3vDkBMS.js";
-import { ToggleButton } from "../ToggleButton-Br6MgjiG.js";
+import { ToggleButton } from "../ToggleButton-8P9eNKy1.js";
 
 export { ToggleButton };

package/dist/{index-B-5pBFE7.d.cts → index-BQVJifDf.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
@@ -41,6 +41,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime15.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime27.JSX.Element;
 //#endregion
 export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-BzY_al-V.d.ts → index-BdNJ2gwC.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime0.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime15.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime0.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime15.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -308,7 +308,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime0.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime15.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-cx3r6TgQ.d.cts → index-DWTTeC2a.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 import { FC } from "react";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime23.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime15.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime23.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime15.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -308,7 +308,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime23.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime15.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-BcvJf9Sr.d.ts → index-fXyRC79n.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
@@ -41,6 +41,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime5.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{searchFilterSidebarVariants-DXabOauB.cjs → searchFilterSidebarVariants-CjDvgxxT.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-D-MZuBvt.cjs');
+const require_colorsConfig = require('./colorsConfig-CRxY3SQ_.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{searchFilterSidebarVariants-BD4SYugF.js → searchFilterSidebarVariants-Clm9ddD5.js}

@@ -1,4 +1,4 @@
-import { ColorNames, colorVar } from "./colorsConfig-DEfiLHH0.js";
+import { ColorNames, colorVar } from "./colorsConfig-D_IPWAUL.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -2,26 +2,70 @@ import React from 'react';
 import { motion } from 'framer-motion';
 import classNames from 'classnames';
 import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
+import { Typography } from '../Typography';
 
 interface GlobalSearchAutocompleteProps {
   id: string;
   results: string[];
   focusedIndex: number;
+  searchText?: string;
   onSuggestionSelect: (suggestion: string, rankPosition: number) => void;
   iconColor?: string;
 }
 
-export const SearchAutocomplete: React.FC<GlobalSearchAutocompleteProps> = ({
+export const SearchAutocomplete = ({
   id,
   results,
   focusedIndex,
+  searchText = '',
   onSuggestionSelect,
   iconColor,
-}) => {
+}: GlobalSearchAutocompleteProps) => {
   if (results.length === 0) {
     return null;
   }
 
+  const highlightMatchingText = (text: string, searchQuery: string) => {
+    if (!searchQuery.trim()) {
+      return <Typography variant="body3">{text}</Typography>;
+    }
+
+    const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedQuery})`, 'gi');
+    const parts = text.split(regex);
+
+    return (
+      <Typography variant="body3">
+        {parts.map((part, index) => {
+          const isMatch = part.toLowerCase() === searchQuery.toLowerCase();
+          return isMatch ? (
+            <strong key={index} className="spiffy-tw-font-bold">
+              {part}
+            </strong>
+          ) : (
+            <span key={index}>{part}</span>
+          );
+        })}
+      </Typography>
+    );
+  };
+
+  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 },
+  );
+
   return (
     <motion.div
       className="spiffy-tw-h-full"
@@ -30,18 +74,14 @@ export const SearchAutocomplete: React.FC<GlobalSearchAutocompleteProps> = ({
       exit={{ opacity: 0, y: -10 }}
       transition={{ duration: 0.2 }}
     >
-      <ul id={id} role="listbox" className="spiffy-tw-mt-4 spiffy-tw-space-y-2">
+      <ul id={id} role="listbox" className={containerClasses}>
         {results.map((result, index) => (
           <li
             key={index}
             id={`option-${index}`}
             role="option"
             aria-selected={index === focusedIndex}
-            className={classNames(
-              'spiffy-tw-flex spiffy-tw-items-center spiffy-tw-cursor-pointer spiffy-tw-py-1',
-              { 'spiffy-tw-bg-neutral-200': index === focusedIndex },
-              'hover:spiffy-tw-bg-neutral-100',
-            )}
+            className={getListElementClasses(index)}
             onClick={() => onSuggestionSelect(result, index)}
             onKeyDown={(event) => {
               if (event.key === 'Enter' || event.keyCode === 13) {
@@ -50,13 +90,13 @@ export const SearchAutocomplete: React.FC<GlobalSearchAutocompleteProps> = ({
             }}
           >
             <OutlinedStar
-              className="spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2"
+              className="spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-[16px]"
               fill={iconColor}
             />
-            <span className="spiffy-tw-font-bold">{result}</span>
+            {highlightMatchingText(result, searchText)}
           </li>
         ))}
       </ul>
     </motion.div>
   );
-};
+};