@envive-ai/react-toolkit 0.2.11 → 0.2.12

package/dist/RecommendedProducts-LalI8aVC.js

@@ -0,0 +1,49 @@
+import { t as Typography } from "./Typography-xehJH05l.js";
+import { t as ProductGrid } from "./ProductGrid-DmtSXfyE.js";
+import { motion } from "framer-motion";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/RecommendedProducts/RecommendedProducts.tsx
+const RecommendedProducts = ({ retrievedProducts, merchantShortName, productCardConfig = {
+	variant: "minimal",
+	hoverVariant: "none",
+	layoutVariant: "square"
+}, productGridVariant = "square", heading, onProductClick }) => {
+	const containerClasses = classNames("spiffy-tw-justify-center", "spiffy-tw-overflow-hidden", "spiffy-tw-bg-white", "spiffy-tw-relative", "spiffy-tw-px-[24px]", "spiffy-tw-py-[16px]", "sm:spiffy-tw-px-[41px]", "sm:spiffy-tw-py-[40px]");
+	const titleContainerClasses = classNames("spiffy-tw-w-full", "spiffy-tw-border-b", "spiffy-tw-border-solid", "spiffy-tw-border-b-[--spiffy-colors-text-accent]", "spiffy-tw-pb-[8px]", "spiffy-tw-mb-[16px]");
+	const productGridClasses = classNames("spiffy-tw-grid", "spiffy-tw-justify-items-stretch", "spiffy-tw-grid-cols-2", "md:spiffy-tw-grid-cols-3", "lg:spiffy-tw-grid-cols-4", "spiffy-tw-gap-x-[4px]", "spiffy-tw-gap-y-[24px]", "spiffy-tw-h-full", "spiffy-tw-w-full", "spiffy-tw-items-stretch");
+	if (retrievedProducts == null || retrievedProducts.length === 0) return null;
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: containerClasses,
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		style: {
+			left: "50%",
+			right: "50%",
+			marginLeft: "-50vw",
+			marginRight: "-50vw",
+			width: "100vw"
+		},
+		children: [heading && /* @__PURE__ */ jsx("div", {
+			className: titleContainerClasses,
+			children: /* @__PURE__ */ jsx(Typography, {
+				variant: "h1",
+				className: "spiffy-tw-text-[--spiffy-colors-text-accent]",
+				children: heading
+			})
+		}), /* @__PURE__ */ jsx(ProductGrid, {
+			productList: retrievedProducts,
+			productGridVariant,
+			productGridClasses,
+			productCardConfig,
+			merchantShortName,
+			onProductClick
+		})]
+	});
+};
+
+//#endregion
+export { RecommendedProducts as t };

package/dist/{SearchAutocomplete-bbMvWWjI.cjs → SearchAutocomplete-A3HXkHwK.cjs}

@@ -1,13 +1,11 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-let framer_motion = require("framer-motion");
-framer_motion = require_chunk.__toESM(framer_motion);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 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");
 let __envive_ai_react_icons_OutlinedStar = require("@envive-ai/react-icons/OutlinedStar");
 __envive_ai_react_icons_OutlinedStar = require_chunk.__toESM(__envive_ai_react_icons_OutlinedStar);
 
@@ -21,10 +19,9 @@ const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSugg
 		});
 		const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 		const regex = new RegExp(`(${escapedQuery})`, "gi");
-		const parts = text.split(regex);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 			variant: "body3",
-			children: parts.map((part, index) => {
+			children: text.split(regex).map((part, index) => {
 				return part.toLowerCase() === searchQuery.toLowerCase() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
 					className: "spiffy-tw-font-bold",
 					children: part

package/dist/{SearchAutocomplete-CjjL2_lm.js → SearchAutocomplete-Rza3A-gs.js}

@@ -1,8 +1,8 @@
-import { Typography } from "./Typography-C3QmJzFK.js";
-import { motion } from "framer-motion";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as Typography } from "./Typography-xehJH05l.js";
 import React from "react";
+import { motion } from "framer-motion";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 import OutlinedStar from "@envive-ai/react-icons/OutlinedStar";
 
 //#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
@@ -15,10 +15,9 @@ const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSugg
 		});
 		const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 		const regex = new RegExp(`(${escapedQuery})`, "gi");
-		const parts = text.split(regex);
 		return /* @__PURE__ */ jsx(Typography, {
 			variant: "body3",
-			children: parts.map((part, index) => {
+			children: text.split(regex).map((part, index) => {
 				return part.toLowerCase() === searchQuery.toLowerCase() ? /* @__PURE__ */ jsx("strong", {
 					className: "spiffy-tw-font-bold",
 					children: part
@@ -66,4 +65,4 @@ const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSugg
 };
 
 //#endregion
-export { SearchAutocomplete };
+export { SearchAutocomplete as t };

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

@@ -1,12 +1,12 @@
-import { Typography } from "./Typography-C3QmJzFK.js";
-import { Accordion } from "./Accordion-B8aUlf0q.js";
-import { ButtonBase } from "./ButtonBase-Bpc7nOpz.js";
-import { ModalSheet } from "./ModalSheet-DFva7krP.js";
-import { RadioButtonGroup } from "./RadioButtonGroup-Ce8cKqYw.js";
-import { ToggleButton } from "./ToggleButton-V9Qsaks7.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+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";
 
 //#region src/components/SearchFilter/SearchFilterHeader.tsx
 const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
@@ -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-BLi6E9Wx.cjs → SearchFilter-DxrQOLx0.cjs}

@@ -1,16 +1,14 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-const require_Accordion = require('./Accordion-FyCFBOen.cjs');
-const require_ButtonBase = require('./ButtonBase-B6vDKbGQ.cjs');
-const require_ModalSheet = require('./ModalSheet-BvM2PJbH.cjs');
-const require_RadioButtonGroup = require('./RadioButtonGroup-CJPWfAaA.cjs');
-const require_ToggleButton = require('./ToggleButton-CvxNLMe_.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+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");
 
 //#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-BA6bepV_.cjs → SearchInput-3ppsm2Ke.cjs}

@@ -1,18 +1,15 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_TextInput = require('./TextInput-CYTko3-n.cjs');
-const require_colorVar = require('./colorVar-B5CLhSof.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+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");
 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");
 __envive_ai_react_icons_IconClose = require_chunk.__toESM(__envive_ai_react_icons_IconClose);
-let __envive_ai_types = require("@envive-ai/types");
-__envive_ai_types = require_chunk.__toESM(__envive_ai_types);
 
 //#region src/components/SearchInput/searchInputVariants.ts
 const searchInputVariantClasses = { standard: {
@@ -20,7 +17,7 @@ const searchInputVariantClasses = { standard: {
 	searchInputBorderColor: "spiffy-tw-border-[--spiffy-colors-border-medium]",
 	searchInputCloseIconClasses: "[&>circle]:spiffy-tw-fill-[--spiffy-colors-text-secondary] [&>path]:spiffy-tw-fill-[#fff]",
 	searchInputActiveStarClasses: `first:[&>path]:spiffy-tw-stroke-[--spiffy-colors-accent-primary] first:[&>path]:spiffy-tw-fill-[--spiffy-colors-accent-primary]`,
-	autocompleteIconColor: require_colorVar.colorVar(__envive_ai_types.ColorNames.BackgroundPrimary),
+	autocompleteIconColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundPrimary),
 	searchInputClasses: "spiffy-tw-text-[--spiffy-colors-text-primary] placeholder:spiffy-tw-text-[--spiffy-colors-text-secondary] spiffy-tw-text-[16px] spiffy-tw-font-normal spiffy-tw-leading-[148%] placeholder:spiffy-tw-font-medium placeholder:spiffy-tw-leading-[124%]",
 	placeholderVariant: "h2"
 } };

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

@@ -1,11 +1,10 @@
-import { TextInput } from "./TextInput-CmxnphaT.js";
-import { colorVar } from "./colorVar-BJve0Z4_.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+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";
 import MagnifyingGlassStarVariant from "@envive-ai/react-icons/MagnifyingGlassStarVariant";
 import IconClose from "@envive-ai/react-icons/IconClose";
-import { ColorNames } from "@envive-ai/types";
 
 //#region src/components/SearchInput/searchInputVariants.ts
 const searchInputVariantClasses = { standard: {
@@ -87,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-Ds4gfOJz.cjs');
-const require_SearchAutocomplete = require('../SearchAutocomplete-bbMvWWjI.cjs');
-require('../TextInput-CYTko3-n.cjs');
-require('../colorVar-B5CLhSof.cjs');
-const require_SearchInput = require('../SearchInput-BA6bepV_.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+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");
 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,10 +1,7 @@
-import "../Typography-C3QmJzFK.js";
-import { SearchAutocomplete } from "../SearchAutocomplete-CjjL2_lm.js";
-import "../TextInput-CmxnphaT.js";
-import "../colorVar-BJve0Z4_.js";
-import { SearchInput, searchInputVariantClasses } from "../SearchInput-C3nNkmBm.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+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";
 
 //#region src/components/SearchInputForm/SearchInputForm.tsx
@@ -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,17 +1,8 @@
-import "../AnimatedChevron-Dee6Pe81.js";
-import "../Typography-C3QmJzFK.js";
-import "../Accordion-B8aUlf0q.js";
-import { ButtonBase } from "../ButtonBase-Bpc7nOpz.js";
-import "../ButtonBase-C_uKnl48.js";
-import "../ModalSheet-DFva7krP.js";
-import "../RadioButton-CQ6qOvBl.js";
-import "../RadioButtonGroup-Ce8cKqYw.js";
-import { SearchFilter, SearchFilterHeader } from "../SearchFilter-wHwOym_n.js";
-import "../ToggleButton-V9Qsaks7.js";
-import "../colorVar-BJve0Z4_.js";
-import { searchFilterSidebarVariantClasses } from "../searchFilterSidebarVariants-C_rWIcxf.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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";
 
 //#region ../icons/src/SettingsVariant.tsx
 const SvgSettingsVariant = (props) => /* @__PURE__ */ jsxs("svg", {
@@ -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('../AnimatedChevron-wpcAHp6d.cjs');
-require('../Typography-Ds4gfOJz.cjs');
-require('../Accordion-FyCFBOen.cjs');
-const require_ButtonBase = require('../ButtonBase-B6vDKbGQ.cjs');
-require('../ButtonBase-DbWQ25n-.cjs');
-require('../ModalSheet-BvM2PJbH.cjs');
-require('../RadioButton-DP-qs5cy.cjs');
-require('../RadioButtonGroup-CJPWfAaA.cjs');
-const require_SearchFilter = require('../SearchFilter-BLi6E9Wx.cjs');
-require('../ToggleButton-CvxNLMe_.cjs');
-require('../colorVar-B5CLhSof.cjs');
-const require_searchFilterSidebarVariants = require('../searchFilterSidebarVariants-BQ7OC862.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+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");
 
 //#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-C-8fh8B9.cjs → SearchResultsStates-D37wFr9h.cjs}

@@ -1,40 +1,65 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-const require_DynamicFiltersScrollbar = require('./DynamicFiltersScrollbar-DIwHWq6v.cjs');
-const require_ProductCard = require('./ProductCard-C2KvH4MN.cjs');
-const require_ProductGrid = require('./ProductGrid-DkOyRAEg.cjs');
-const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants-BQ7OC862.cjs');
-const require_SparkleAnimation = require('./SparkleAnimation-BFAj73CF.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 react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("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
 			})
 		]
 	});