@envive-ai/react-toolkit 0.2.10 → 0.2.12

package/dist/{SearchFilter-Bi0zqO3-.js → SearchFilter-CYY5sNXV.js}

@@ -1,9 +1,9 @@
-import { Typography } from "./Typography-D3vDkBMS.js";
-import { Accordion } from "./Accordion-DxtXK__u.js";
-import { ButtonBase } from "./ButtonBase-6wjsZ1tU.js";
-import { ModalSheet } from "./ModalSheet-BSj_g9JF.js";
-import { RadioButtonGroup } from "./RadioButtonGroup-DLLleeDX.js";
-import { ToggleButton } from "./ToggleButton-Br6MgjiG.js";
+import { t as Typography } from "./Typography-xehJH05l.js";
+import { t as Accordion } from "./Accordion-D8Vm8J1y.js";
+import { t as ButtonBase } from "./ButtonBase-CT397aT3.js";
+import { t as ModalSheet } from "./ModalSheet-DVrY7Mw0.js";
+import { t as RadioButtonGroup } from "./RadioButtonGroup-hme7gSiQ.js";
+import { t as ToggleButton } from "./ToggleButton-BTz_zIdc.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -116,33 +116,31 @@ const SearchFilterFooter = ({ closeModal, clearAllFilters, filterCount, applyFil
 //#region src/components/SearchFilter/SearchFilter.tsx
 const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
 	const filterTitle = filter.displayName;
-	const options = filter.items.map((item) => ({
-		label: item.displayName,
-		value: item.filterItemId,
-		isSelected: item.isSelected
-	}));
-	const content = /* @__PURE__ */ jsx(RadioButtonGroup, {
-		options,
-		name: filterTitle,
-		onChange: (value) => {
-			const selectedItem = filter.items.find((item) => item.filterItemId === value);
-			selectFilterItem({
-				filterId: filter.filterId,
-				filterItemId: value,
-				isSelected: true,
-				displayName: selectedItem?.displayName || value
-			});
-		},
-		gap: "large",
-		textButtonGap: "large",
-		value: filter.items.find((item) => item.isSelected)?.filterItemId,
-		fillColor: radioButtonFillColor,
-		hoverColor: radioButtonHoverColor,
-		uncheckedBorderColor: radioButtonUncheckedBorderColor
-	});
 	return /* @__PURE__ */ jsx(Accordion, {
 		title: filterTitle,
-		content
+		content: /* @__PURE__ */ jsx(RadioButtonGroup, {
+			options: filter.items.map((item) => ({
+				label: item.displayName,
+				value: item.filterItemId,
+				isSelected: item.isSelected
+			})),
+			name: filterTitle,
+			onChange: (value) => {
+				const selectedItem = filter.items.find((item) => item.filterItemId === value);
+				selectFilterItem({
+					filterId: filter.filterId,
+					filterItemId: value,
+					isSelected: true,
+					displayName: selectedItem?.displayName || value
+				});
+			},
+			gap: "large",
+			textButtonGap: "large",
+			value: filter.items.find((item) => item.isSelected)?.filterItemId,
+			fillColor: radioButtonFillColor,
+			hoverColor: radioButtonHoverColor,
+			uncheckedBorderColor: radioButtonUncheckedBorderColor
+		})
 	});
 };
 const FilterItem = ({ filterId, filterItem, selectFilterItem }) => /* @__PURE__ */ jsx(ToggleButton, {
@@ -165,18 +163,16 @@ const Filter = ({ filter, selectFilterItem }) => {
 		"spiffy-tw-pb-[1px]": true
 	});
 	const selectedFilterItems = getSelectedFilterItemsCount(filter);
-	const filterTitle = selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
-	const content = /* @__PURE__ */ jsx("div", {
-		className: filterContentClassName,
-		children: filter.items.map((item) => /* @__PURE__ */ jsx(FilterItem, {
-			filterId: filter.filterId,
-			filterItem: item,
-			selectFilterItem
-		}, item.filterItemId))
-	});
 	return /* @__PURE__ */ jsx(Accordion, {
-		title: filterTitle,
-		content
+		title: selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName,
+		content: /* @__PURE__ */ jsx("div", {
+			className: filterContentClassName,
+			children: filter.items.map((item) => /* @__PURE__ */ jsx(FilterItem, {
+				filterId: filter.filterId,
+				filterItem: item,
+				selectFilterItem
+			}, item.filterItemId))
+		})
 	});
 };
 const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters, isOpen, setIsOpen, applyFiltersUnchangedClasses, applyFiltersChangedClasses, headerContent, footerContent, headerClassName, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant }) => {
@@ -265,4 +261,4 @@ const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor
 };
 
 //#endregion
-export { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };
+export { getTotalSelectedFilterItemsCount as a, getSelectedFilterItemsCount as i, SearchFilter as n, SearchFilterHeader as o, SearchFilterFooter as r, SearchFilterItem as t };

package/dist/{SearchFilter-ylBowO7T.cjs → SearchFilter-DxrQOLx0.cjs}

@@ -1,16 +1,14 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Typography = require('./Typography-CFNWgbM5.cjs');
-const require_Accordion = require('./Accordion-RpyCFs2a.cjs');
-const require_ButtonBase = require('./ButtonBase-AU23oGQr.cjs');
-const require_ModalSheet = require('./ModalSheet-CcthFeMD.cjs');
-const require_RadioButtonGroup = require('./RadioButtonGroup-DxOtcIdO.cjs');
-const require_ToggleButton = require('./ToggleButton-CJ74eu-N.cjs');
+const require_Typography = require('./Typography-Ds4gfOJz.cjs');
+const require_Accordion = require('./Accordion-B0TzPN3m.cjs');
+const require_ButtonBase = require('./ButtonBase-BMEAmPnS.cjs');
+const require_ModalSheet = require('./ModalSheet-Be7-bkXK.cjs');
+const require_RadioButtonGroup = require('./RadioButtonGroup-BnnMx8sE.cjs');
+const require_ToggleButton = require('./ToggleButton-CmxTz-ou.cjs');
 let react = require("react");
-react = require_chunk.__toESM(react);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 
 //#region src/components/SearchFilter/SearchFilterHeader.tsx
 const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
@@ -120,33 +118,31 @@ const SearchFilterFooter = ({ closeModal, clearAllFilters, filterCount, applyFil
 //#region src/components/SearchFilter/SearchFilter.tsx
 const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
 	const filterTitle = filter.displayName;
-	const options = filter.items.map((item) => ({
-		label: item.displayName,
-		value: item.filterItemId,
-		isSelected: item.isSelected
-	}));
-	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RadioButtonGroup.RadioButtonGroup, {
-		options,
-		name: filterTitle,
-		onChange: (value) => {
-			const selectedItem = filter.items.find((item) => item.filterItemId === value);
-			selectFilterItem({
-				filterId: filter.filterId,
-				filterItemId: value,
-				isSelected: true,
-				displayName: selectedItem?.displayName || value
-			});
-		},
-		gap: "large",
-		textButtonGap: "large",
-		value: filter.items.find((item) => item.isSelected)?.filterItemId,
-		fillColor: radioButtonFillColor,
-		hoverColor: radioButtonHoverColor,
-		uncheckedBorderColor: radioButtonUncheckedBorderColor
-	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
 		title: filterTitle,
-		content
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RadioButtonGroup.RadioButtonGroup, {
+			options: filter.items.map((item) => ({
+				label: item.displayName,
+				value: item.filterItemId,
+				isSelected: item.isSelected
+			})),
+			name: filterTitle,
+			onChange: (value) => {
+				const selectedItem = filter.items.find((item) => item.filterItemId === value);
+				selectFilterItem({
+					filterId: filter.filterId,
+					filterItemId: value,
+					isSelected: true,
+					displayName: selectedItem?.displayName || value
+				});
+			},
+			gap: "large",
+			textButtonGap: "large",
+			value: filter.items.find((item) => item.isSelected)?.filterItemId,
+			fillColor: radioButtonFillColor,
+			hoverColor: radioButtonHoverColor,
+			uncheckedBorderColor: radioButtonUncheckedBorderColor
+		})
 	});
 };
 const FilterItem = ({ filterId, filterItem, selectFilterItem }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
@@ -169,18 +165,16 @@ const Filter = ({ filter, selectFilterItem }) => {
 		"spiffy-tw-pb-[1px]": true
 	});
 	const selectedFilterItems = getSelectedFilterItemsCount(filter);
-	const filterTitle = selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
-	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: filterContentClassName,
-		children: filter.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
-			filterId: filter.filterId,
-			filterItem: item,
-			selectFilterItem
-		}, item.filterItemId))
-	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
-		title: filterTitle,
-		content
+		title: selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName,
+		content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: filterContentClassName,
+			children: filter.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
+				filterId: filter.filterId,
+				filterItem: item,
+				selectFilterItem
+			}, item.filterItemId))
+		})
 	});
 };
 const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters, isOpen, setIsOpen, applyFiltersUnchangedClasses, applyFiltersChangedClasses, headerContent, footerContent, headerClassName, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant }) => {

package/dist/{SearchInput-Yy6NIiSk.cjs → SearchInput-3ppsm2Ke.cjs}

@@ -1,12 +1,11 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_TextInput = require('./TextInput-B70n36-J.cjs');
-const require_colorsConfig = require('./colorsConfig-B3-SMUSx.cjs');
+const require_TextInput = require('./TextInput-Do5-j1V_.cjs');
+const require_colorsConfig = require('./colorsConfig-D-MZuBvt.cjs');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let __envive_ai_react_icons_MagnifyingGlassStarVariant = require("@envive-ai/react-icons/MagnifyingGlassStarVariant");
 __envive_ai_react_icons_MagnifyingGlassStarVariant = require_chunk.__toESM(__envive_ai_react_icons_MagnifyingGlassStarVariant);
 let __envive_ai_react_icons_IconClose = require("@envive-ai/react-icons/IconClose");

package/dist/{SearchInput-Q3knp7tj.js → SearchInput-DE9Iz7A8.js}

@@ -1,5 +1,5 @@
-import { TextInput } from "./TextInput-y6nNxaTI.js";
-import { ColorNames, colorVar } from "./colorsConfig-DZ-GSPWy.js";
+import { t as TextInput } from "./TextInput-PtrUXoZo.js";
+import { n as colorVar, t as ColorNames } from "./colorsConfig-BjdoRtRK.js";
 import React, { useImperativeHandle, useRef } from "react";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -86,4 +86,4 @@ const SearchInput = React.forwardRef(({ searchInputVariant = "standard", value,
 });
 
 //#endregion
-export { SearchInput, searchInputVariantClasses };
+export { searchInputVariantClasses as n, SearchInput as t };

package/dist/{SearchInputForm/index.cjs → SearchInputForm-CZz62rOX.cjs}

@@ -1,15 +1,10 @@
-const require_chunk = require('../chunk-CUT6urMc.cjs');
-require('../Typography-CFNWgbM5.cjs');
-const require_SearchAutocomplete = require('../SearchAutocomplete-DAEDHeqr.cjs');
-require('../TextInput-B70n36-J.cjs');
-require('../colorsConfig-B3-SMUSx.cjs');
-const require_SearchInput = require('../SearchInput-Yy6NIiSk.cjs');
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_SearchAutocomplete = require('./SearchAutocomplete-A3HXkHwK.cjs');
+const require_SearchInput = require('./SearchInput-3ppsm2Ke.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let __envive_ai_react_hooks_config_locators_components_search = require("@envive-ai/react-hooks/config/locators/components/search");
-__envive_ai_react_hooks_config_locators_components_search = require_chunk.__toESM(__envive_ai_react_hooks_config_locators_components_search);
 
 //#region src/components/SearchInputForm/SearchInputForm.tsx
 const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, shouldShowAutocomplete, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, onSearchInputFocus, onSearchInputBlur }) => {
@@ -56,4 +51,9 @@ const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults,
 };
 
 //#endregion
-exports.SearchInputForm = SearchInputForm;
+Object.defineProperty(exports, 'SearchInputForm', {
+  enumerable: true,
+  get: function () {
+    return SearchInputForm;
+  }
+});

package/dist/{SearchInputForm/index.js → SearchInputForm-DrI4WHDt.js}

@@ -1,8 +1,5 @@
-import "../Typography-D3vDkBMS.js";
-import { SearchAutocomplete } from "../SearchAutocomplete-B690CIZB.js";
-import "../TextInput-y6nNxaTI.js";
-import "../colorsConfig-DZ-GSPWy.js";
-import { SearchInput, searchInputVariantClasses } from "../SearchInput-Q3knp7tj.js";
+import { t as SearchAutocomplete } from "./SearchAutocomplete-Rza3A-gs.js";
+import { n as searchInputVariantClasses, t as SearchInput } from "./SearchInput-DE9Iz7A8.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SEARCH_INPUT_TESTID } from "@envive-ai/react-hooks/config/locators/components/search";
@@ -52,4 +49,4 @@ const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults,
 };
 
 //#endregion
-export { SearchInputForm };
+export { SearchInputForm as t };

package/dist/SearchResultsFilterButton-BedTofz5.cjs

@@ -0,0 +1,29 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_ButtonBase = require('./ButtonBase-BMEAmPnS.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __envive_ai_react_icons_SettingsVariant = require("@envive-ai/react-icons/SettingsVariant");
+__envive_ai_react_icons_SettingsVariant = require_chunk.__toESM(__envive_ai_react_icons_SettingsVariant);
+
+//#region src/components/SearchResultsFilterButton/SearchResultsFilterButton.tsx
+const SearchResultsFilterButton = ({ setIsOpen, filterButtonText }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+		onClick: (0, react.useCallback)(() => {
+			setIsOpen(true);
+		}, [setIsOpen]),
+		icon: __envive_ai_react_icons_SettingsVariant.default,
+		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",
+		buttonClass: "spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]",
+		disablePadding: true
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'SearchResultsFilterButton', {
+  enumerable: true,
+  get: function () {
+    return SearchResultsFilterButton;
+  }
+});

package/dist/SearchResultsFilterButton-CV11UTGi.js

@@ -0,0 +1,22 @@
+import { t as ButtonBase } from "./ButtonBase-CT397aT3.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import SettingsVariant from "@envive-ai/react-icons/SettingsVariant";
+
+//#region src/components/SearchResultsFilterButton/SearchResultsFilterButton.tsx
+const SearchResultsFilterButton = ({ setIsOpen, filterButtonText }) => {
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		onClick: useCallback(() => {
+			setIsOpen(true);
+		}, [setIsOpen]),
+		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",
+		buttonClass: "spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]",
+		disablePadding: true
+	});
+};
+
+//#endregion
+export { SearchResultsFilterButton as t };

package/dist/{SearchResultsFilterSidebar/index.js → SearchResultsFilterSidebar-Bvpk7Uoo.js}

@@ -1,15 +1,6 @@
-import "../Typography-D3vDkBMS.js";
-import "../Accordion-DxtXK__u.js";
-import "../AnimatedChevron-Bik7GMSe.js";
-import { ButtonBase } from "../ButtonBase-6wjsZ1tU.js";
-import "../ButtonBase-C_uKnl48.js";
-import "../ModalSheet-BSj_g9JF.js";
-import "../RadioButton-gnFz0TWN.js";
-import "../RadioButtonGroup-DLLleeDX.js";
-import { SearchFilter, SearchFilterHeader } from "../SearchFilter-Bi0zqO3-.js";
-import "../ToggleButton-Br6MgjiG.js";
-import "../colorsConfig-DZ-GSPWy.js";
-import { searchFilterSidebarVariantClasses } from "../searchFilterSidebarVariants-f9PS9fl6.js";
+import { t as ButtonBase } from "./ButtonBase-CT397aT3.js";
+import { n as SearchFilter, o as SearchFilterHeader } from "./SearchFilter-CYY5sNXV.js";
+import { t as searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-DcwlBfvY.js";
 import { useCallback } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
@@ -118,4 +109,4 @@ const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, s
 };
 
 //#endregion
-export { SearchResultsFilter, searchFilterSidebarVariantClasses };
+export { SearchResultsFilter as t };

package/dist/{SearchResultsFilterSidebar/index.cjs → SearchResultsFilterSidebar-Dgz98oyD.cjs}

@@ -1,20 +1,9 @@
-const require_chunk = require('../chunk-CUT6urMc.cjs');
-require('../Typography-CFNWgbM5.cjs');
-require('../Accordion-RpyCFs2a.cjs');
-require('../AnimatedChevron-Q96FneFy.cjs');
-const require_ButtonBase = require('../ButtonBase-AU23oGQr.cjs');
-require('../ButtonBase-DbWQ25n-.cjs');
-require('../ModalSheet-CcthFeMD.cjs');
-require('../RadioButton-BBc1b5vX.cjs');
-require('../RadioButtonGroup-DxOtcIdO.cjs');
-const require_SearchFilter = require('../SearchFilter-ylBowO7T.cjs');
-require('../ToggleButton-CJ74eu-N.cjs');
-require('../colorsConfig-B3-SMUSx.cjs');
-const require_searchFilterSidebarVariants = require('../searchFilterSidebarVariants-DzCf_sfh.cjs');
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_ButtonBase = require('./ButtonBase-BMEAmPnS.cjs');
+const require_SearchFilter = require('./SearchFilter-DxrQOLx0.cjs');
+const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants-C61Byr1S.cjs');
 let react = require("react");
-react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 
 //#region ../icons/src/SettingsVariant.tsx
 const SvgSettingsVariant = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
@@ -121,5 +110,9 @@ const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, s
 };
 
 //#endregion
-exports.SearchResultsFilter = SearchResultsFilter;
-exports.searchFilterSidebarVariantClasses = require_searchFilterSidebarVariants.searchFilterSidebarVariantClasses;
+Object.defineProperty(exports, 'SearchResultsFilter', {
+  enumerable: true,
+  get: function () {
+    return SearchResultsFilter;
+  }
+});

package/dist/{SearchResultsStates-BjFB9Qo9.cjs → SearchResultsStates-D37wFr9h.cjs}

@@ -1,40 +1,65 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Typography = require('./Typography-CFNWgbM5.cjs');
-const require_DynamicFiltersScrollbar = require('./DynamicFiltersScrollbar-DgS9gpdg.cjs');
-const require_ProductCard = require('./ProductCard-C-8ie9Lf.cjs');
-const require_ProductGrid = require('./ProductGrid-Ba2tUgmC.cjs');
-const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants-DzCf_sfh.cjs');
-const require_SparkleAnimation = require('./SparkleAnimation-CvGlWUqv.cjs');
+const require_Typography = require('./Typography-Ds4gfOJz.cjs');
+const require_DynamicFiltersScrollbar = require('./DynamicFiltersScrollbar-DqIydLJu.cjs');
+const require_ProductCard = require('./ProductCard-BeY85PBf.cjs');
+const require_ProductGrid = require('./ProductGrid-CxKK7w_X.cjs');
+const require_RecommendedProducts = require('./RecommendedProducts-C2eNVrLo.cjs');
+const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants-C61Byr1S.cjs');
+const require_SparkleAnimation = require('./SparkleAnimation-B5A_NCuy.cjs');
 let framer_motion = require("framer-motion");
-framer_motion = require_chunk.__toESM(framer_motion);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let __envive_ai_react_icons_Sparkles = require("@envive-ai/react-icons/Sparkles");
 __envive_ai_react_icons_Sparkles = require_chunk.__toESM(__envive_ai_react_icons_Sparkles);
 
 //#region src/components/SearchResultsStates/NoSearchResultsFound.tsx
-const NoSearchResultsFound = ({ containerPaddingClasses, includeBottomMargin = false, noResultsFoundText, sparkleIconColor = "var(--spiffy-colors-accent-primary)" }) => {
-	const containerClasses = (0, classnames.default)(containerPaddingClasses, includeBottomMargin ? "spiffy-tw-mb-[100vh]" : "", "spiffy-tw-mt-6");
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const NoSearchResultsFound = ({ containerPaddingClasses, noResultsFoundText, sparkleIconColor = "var(--spiffy-colors-accent-primary)", recommendedProducts, searchText, merchantShortName, productGridVariant }) => {
+	const containerClasses = (0, classnames.default)(containerPaddingClasses, "spiffy-tw-mt-6", { "spiffy-tw-mb-[100vh]": recommendedProducts.length === 0 });
+	let textPrompt;
+	if (recommendedProducts.length > 0) textPrompt = noResultsFoundText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: noResultsFoundText }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}".`]
+		}),
+		" Try changing your filters or adjusting your search query. In the meantime, explore some of our top-selling products below."
+	] });
+	else textPrompt = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}."`]
+		}),
+		" Try changing your filters or adjusting your search query."
+	] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: containerClasses,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_Sparkles.default, {
 				className: "spiffy-tw-w-[24px] spiffy-tw-h-[24px]",
 				style: { color: sparkleIconColor }
 			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 				variant: "body2",
-				children: noResultsFoundText || "I'm sorry, I wasn't able to find an exact match. Try changing your filters or adjusting your search query."
+				children: textPrompt
 			})]
-		})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RecommendedProducts.RecommendedProducts, {
+			retrievedProducts: recommendedProducts,
+			merchantShortName,
+			productCardConfig: {
+				variant: "minimal",
+				hoverVariant: "none",
+				layoutVariant: "square"
+			},
+			productGridVariant
+		})]
 	});
 };
 
 //#endregion
 //#region src/components/SearchResultsStates/SearchResultsGrid.tsx
-const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter }) => {
+const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter, onProductClick }) => {
 	const sharedFilterBarClasses = (0, classnames.default)("spiffy-suggestion-bar", "spiffy-tw-no-scrollbar", "spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-gap-2", "spiffy-tw-mb-[16px]", "spiffy-tw-overflow-x-scroll", containerXPaddingClasses);
 	const filterBarClasses = (0, classnames.default)(sharedFilterBarClasses, "spiffy-tw-mt-[24px]");
 	const appliedFilterBarClasses = (0, classnames.default)(sharedFilterBarClasses, "spiffy-tw-mb-[32px]", "spiffy-tw-mt-[8px]");
@@ -66,7 +91,8 @@ const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName,
 				productGridVariant,
 				productGridClasses,
 				productCardConfig,
-				merchantShortName
+				merchantShortName,
+				onProductClick
 			})
 		]
 	});

package/dist/{SearchResultsStates-D8Uz39yp.js → SearchResultsStates-DrGtw0pM.js}

@@ -1,35 +1,62 @@
-import { Typography } from "./Typography-D3vDkBMS.js";
-import { AppliedFiltersScrollbar, DynamicFiltersScrollbar } from "./DynamicFiltersScrollbar-CJG4K0PH.js";
-import { ProductCardSkeleton } from "./ProductCard-n-PAth5m.js";
-import { ProductGrid, productGridVariantClasses } from "./ProductGrid-xXkWzvR2.js";
-import { searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-f9PS9fl6.js";
-import { SparkleAnimation } from "./SparkleAnimation-paLhSu5E.js";
+import { t as Typography } from "./Typography-xehJH05l.js";
+import { n as AppliedFiltersScrollbar, t as DynamicFiltersScrollbar } from "./DynamicFiltersScrollbar-CibstqNd.js";
+import { t as ProductCardSkeleton } from "./ProductCard-BoyYu6mI.js";
+import { n as productGridVariantClasses, t as ProductGrid } from "./ProductGrid-DmtSXfyE.js";
+import { t as RecommendedProducts } from "./RecommendedProducts-LalI8aVC.js";
+import { t as searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-DcwlBfvY.js";
+import { t as SparkleAnimation } from "./SparkleAnimation-BSI_34HX.js";
 import { motion } from "framer-motion";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Sparkles from "@envive-ai/react-icons/Sparkles";
 
 //#region src/components/SearchResultsStates/NoSearchResultsFound.tsx
-const NoSearchResultsFound = ({ containerPaddingClasses, includeBottomMargin = false, noResultsFoundText, sparkleIconColor = "var(--spiffy-colors-accent-primary)" }) => {
-	const containerClasses = classNames(containerPaddingClasses, includeBottomMargin ? "spiffy-tw-mb-[100vh]" : "", "spiffy-tw-mt-6");
-	return /* @__PURE__ */ jsx("div", {
+const NoSearchResultsFound = ({ containerPaddingClasses, noResultsFoundText, sparkleIconColor = "var(--spiffy-colors-accent-primary)", recommendedProducts, searchText, merchantShortName, productGridVariant }) => {
+	const containerClasses = classNames(containerPaddingClasses, "spiffy-tw-mt-6", { "spiffy-tw-mb-[100vh]": recommendedProducts.length === 0 });
+	let textPrompt;
+	if (recommendedProducts.length > 0) textPrompt = noResultsFoundText ? /* @__PURE__ */ jsx("span", { children: noResultsFoundText }) : /* @__PURE__ */ jsxs("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ jsxs("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}".`]
+		}),
+		" Try changing your filters or adjusting your search query. In the meantime, explore some of our top-selling products below."
+	] });
+	else textPrompt = /* @__PURE__ */ jsxs("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ jsxs("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}."`]
+		}),
+		" Try changing your filters or adjusting your search query."
+	] });
+	return /* @__PURE__ */ jsxs("div", {
 		className: containerClasses,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: "spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2",
 			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Sparkles, {
 				className: "spiffy-tw-w-[24px] spiffy-tw-h-[24px]",
 				style: { color: sparkleIconColor }
 			}) }), /* @__PURE__ */ jsx(Typography, {
 				variant: "body2",
-				children: noResultsFoundText || "I'm sorry, I wasn't able to find an exact match. Try changing your filters or adjusting your search query."
+				children: textPrompt
 			})]
-		})
+		}), /* @__PURE__ */ jsx(RecommendedProducts, {
+			retrievedProducts: recommendedProducts,
+			merchantShortName,
+			productCardConfig: {
+				variant: "minimal",
+				hoverVariant: "none",
+				layoutVariant: "square"
+			},
+			productGridVariant
+		})]
 	});
 };
 
 //#endregion
 //#region src/components/SearchResultsStates/SearchResultsGrid.tsx
-const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter }) => {
+const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter, onProductClick }) => {
 	const sharedFilterBarClasses = classNames("spiffy-suggestion-bar", "spiffy-tw-no-scrollbar", "spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-gap-2", "spiffy-tw-mb-[16px]", "spiffy-tw-overflow-x-scroll", containerXPaddingClasses);
 	const filterBarClasses = classNames(sharedFilterBarClasses, "spiffy-tw-mt-[24px]");
 	const appliedFilterBarClasses = classNames(sharedFilterBarClasses, "spiffy-tw-mb-[32px]", "spiffy-tw-mt-[8px]");
@@ -61,7 +88,8 @@ const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName,
 				productGridVariant,
 				productGridClasses,
 				productCardConfig,
-				merchantShortName
+				merchantShortName,
+				onProductClick
 			})
 		]
 	});
@@ -107,4 +135,4 @@ const SearchResultsLoadingGrid = ({ productGridVariant, productGridClasses, spar
 };
 
 //#endregion
-export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };
+export { SearchResultsGrid as n, NoSearchResultsFound as r, SearchResultsLoadingGrid as t };

package/dist/{SparkleAnimation-CvGlWUqv.cjs → SparkleAnimation-B5A_NCuy.cjs}

@@ -1,12 +1,9 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-let framer_motion = require("framer-motion");
-framer_motion = require_chunk.__toESM(framer_motion);
 let react = require("react");
-react = require_chunk.__toESM(react);
+let framer_motion = require("framer-motion");
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let __envive_ai_react_icons_FourPointStar = require("@envive-ai/react-icons/FourPointStar");
 __envive_ai_react_icons_FourPointStar = require_chunk.__toESM(__envive_ai_react_icons_FourPointStar);
 

package/dist/{SparkleAnimation-paLhSu5E.js → SparkleAnimation-BSI_34HX.js}

@@ -1,5 +1,5 @@
-import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import FourPointStar from "@envive-ai/react-icons/FourPointStar";
@@ -81,4 +81,4 @@ const SparkleAnimation = ({ color, className, animate = true }) => {
 };
 
 //#endregion
-export { SparkleAnimation, SparkleAnimationOverride };
+export { SparkleAnimationOverride as n, SparkleAnimation as t };

package/dist/{Spinner-BqTt55uu.js → Spinner-CDDFWySo.js}

@@ -35,4 +35,4 @@ const Spinner = ({ className }) => {
 };
 
 //#endregion
-export { Spinner };
+export { Spinner as t };

package/dist/{Spinner-DjK8ts9E.cjs → Spinner-FQpy5bGu.cjs}

@@ -2,7 +2,6 @@ const require_chunk = require('./chunk-CUT6urMc.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 
 //#region src/components/Spinner/Spinner.tsx
 const Spinner = ({ className }) => {