@envive-ai/react-toolkit 0.1.4 → 0.1.6

package/dist/{SearchInput-CzVUsUSb.js → SearchInput-C0wB4hSV.js}

@@ -1,12 +1,12 @@
-import { TextInput } from "./TextInput-CEGWfdPC.js";
-import { ColorNames, colorVar } from "./colorsConfig-BKBZfFq1.js";
-import classNames from "classnames";
+import { TextInput } from "./TextInput-CRMqBW3X.js";
+import { ColorNames, colorVar } from "./colorsConfig-BQlaCfxi.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/src/MagnifyingGlassStarVariant";
-import CloseIcon from "@envive-ai/react-icons/src/IconClose";
+import MagnifyingGlassStarVariant from "@envive-ai/react-icons/MagnifyingGlassStarVariant";
+import { IconClose } from "@envive-ai/react-icons/src/index.js";
 
-//#region src/components/search/SearchInput/searchInputVariants.ts
+//#region src/components/SearchInput/searchInputVariants.ts
 const searchInputVariantClasses = { standard: {
 	searchInputIconColor: "transparent",
 	searchInputBorderColor: "spiffy-tw-border-[--spiffy-colors-border-medium]",
@@ -18,7 +18,7 @@ const searchInputVariantClasses = { standard: {
 } };
 
 //#endregion
-//#region src/components/search/SearchInput/SearchInput.tsx
+//#region src/components/SearchInput/SearchInput.tsx
 const SearchInput = React.forwardRef(({ searchInputVariant = "standard", value, placeholder, suggestions, className, dataTestId, ariaActivedescendant, onKeyDown, onChange, onFocus, onBlur }, ref) => {
 	const localInputRef = useRef(null);
 	const { searchInputClasses: inputClassName, searchInputIconColor: iconColor, searchInputBorderColor: borderColor, searchInputCloseIconClasses: closeIconClasses, searchInputActiveStarClasses, placeholderVariant } = searchInputVariantClasses[searchInputVariant];
@@ -79,7 +79,7 @@ const SearchInput = React.forwardRef(({ searchInputVariant = "standard", value,
 				className: "spiffy-tw-absolute spiffy-tw-right-5 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2 spiffy-tw-text-neutral-500 hover:spiffy-tw-text-neutral-700",
 				"aria-label": "Clear search input",
 				type: "button",
-				children: /* @__PURE__ */ jsx(CloseIcon, { className: closeButtonIconClassName })
+				children: /* @__PURE__ */ jsx(IconClose, { className: closeButtonIconClassName })
 			})
 		]
 	});

package/dist/{SearchInput-mLPisqFO.cjs → SearchInput-D6UW79wT.cjs}

@@ -1,18 +1,18 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_TextInput = require('./TextInput-BO80ixsV.cjs');
-const require_colorsConfig = require('./colorsConfig-vunsVTFC.cjs');
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+const require_TextInput = require('./TextInput-C6fF9cSB.cjs');
+const require_colorsConfig = require('./colorsConfig-DCvy_dV4.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_src_MagnifyingGlassStarVariant = require("@envive-ai/react-icons/src/MagnifyingGlassStarVariant");
-__envive_ai_react_icons_src_MagnifyingGlassStarVariant = require_chunk.__toESM(__envive_ai_react_icons_src_MagnifyingGlassStarVariant);
-let __envive_ai_react_icons_src_IconClose = require("@envive-ai/react-icons/src/IconClose");
-__envive_ai_react_icons_src_IconClose = require_chunk.__toESM(__envive_ai_react_icons_src_IconClose);
+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_src_index_js = require("@envive-ai/react-icons/src/index.js");
+__envive_ai_react_icons_src_index_js = require_chunk.__toESM(__envive_ai_react_icons_src_index_js);
 
-//#region src/components/search/SearchInput/searchInputVariants.ts
+//#region src/components/SearchInput/searchInputVariants.ts
 const searchInputVariantClasses = { standard: {
 	searchInputIconColor: "transparent",
 	searchInputBorderColor: "spiffy-tw-border-[--spiffy-colors-border-medium]",
@@ -24,7 +24,7 @@ const searchInputVariantClasses = { standard: {
 } };
 
 //#endregion
-//#region src/components/search/SearchInput/SearchInput.tsx
+//#region src/components/SearchInput/SearchInput.tsx
 const SearchInput = react.default.forwardRef(({ searchInputVariant = "standard", value, placeholder, suggestions, className, dataTestId, ariaActivedescendant, onKeyDown, onChange, onFocus, onBlur }, ref) => {
 	const localInputRef = (0, react.useRef)(null);
 	const { searchInputClasses: inputClassName, searchInputIconColor: iconColor, searchInputBorderColor: borderColor, searchInputCloseIconClasses: closeIconClasses, searchInputActiveStarClasses, placeholderVariant } = searchInputVariantClasses[searchInputVariant];
@@ -53,7 +53,7 @@ const SearchInput = react.default.forwardRef(({ searchInputVariant = "standard",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "spiffy-tw-absolute spiffy-tw-left-3 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_src_MagnifyingGlassStarVariant.default, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_MagnifyingGlassStarVariant.default, {
 					className: value.length > 0 ? magnifyingGlassClassesActive : magnifyingGlassClassesInactive,
 					stroke: iconColor,
 					strokeWidth: "1px"
@@ -85,7 +85,7 @@ const SearchInput = react.default.forwardRef(({ searchInputVariant = "standard",
 				className: "spiffy-tw-absolute spiffy-tw-right-5 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2 spiffy-tw-text-neutral-500 hover:spiffy-tw-text-neutral-700",
 				"aria-label": "Clear search input",
 				type: "button",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_src_IconClose.default, { className: closeButtonIconClassName })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_src_index_js.IconClose, { className: closeButtonIconClassName })
 			})
 		]
 	});

package/dist/{search/SearchInputForm/SearchInputForm.cjs → SearchInputForm/index.cjs}

@@ -1,14 +1,14 @@
-const require_chunk = require('../../chunk-CUT6urMc.cjs');
-require('../../textVariantClasses-Bhf4VY5z.cjs');
-require('../../TextInput-BO80ixsV.cjs');
-require('../../colorsConfig-vunsVTFC.cjs');
-const require_SearchInput = require('../../SearchInput-mLPisqFO.cjs');
-const require_SearchAutocomplete = require('../../SearchAutocomplete-BrF2SMoZ.cjs');
+const require_chunk = require('../chunk-CUT6urMc.cjs');
+require('../textVariantClasses-BnV4wXaw.cjs');
+const require_SearchAutocomplete = require('../SearchAutocomplete-BzaEXmRQ.cjs');
+require('../TextInput-C6fF9cSB.cjs');
+require('../colorsConfig-DCvy_dV4.cjs');
+const require_SearchInput = require('../SearchInput-D6UW79wT.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 
-//#region src/components/search/SearchInputForm/SearchInputForm.tsx
-const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, isDirty, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit }) => {
+//#region src/components/SearchInputForm/SearchInputForm.tsx
+const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, isDirty, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, searchInputDataTestId }) => {
 	const { searchInputIconColor } = require_SearchInput.searchInputVariantClasses[searchInputVariant];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
 		onSubmit: (e) => {
@@ -22,6 +22,7 @@ const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults,
 			suggestions: autocompleteResults,
 			ariaActivedescendant: focusedOptionId,
 			searchInputVariant,
+			dataTestId: searchInputDataTestId,
 			onKeyDown,
 			onChange: onSearchInputChange
 		})

package/dist/SearchInputForm/index.d.cts

@@ -0,0 +1,2 @@
+import { SearchInputForm, SearchInputVariant } from "../index-BNCrvswP.cjs";
+export { SearchInputForm, SearchInputVariant };

package/dist/SearchInputForm/index.d.ts

@@ -0,0 +1,2 @@
+import { SearchInputForm, SearchInputVariant } from "../index-BHNzU-Pc.js";
+export { SearchInputForm, SearchInputVariant };

package/dist/{search/SearchInputForm/SearchInputForm.js → SearchInputForm/index.js}

@@ -1,12 +1,12 @@
-import "../../textVariantClasses-5t3OricK.js";
-import "../../TextInput-CEGWfdPC.js";
-import "../../colorsConfig-BKBZfFq1.js";
-import { SearchInput, searchInputVariantClasses } from "../../SearchInput-CzVUsUSb.js";
-import { SearchAutocomplete } from "../../SearchAutocomplete-B8mO03Rr.js";
+import "../textVariantClasses-CnjwO2Fv.js";
+import { SearchAutocomplete } from "../SearchAutocomplete-BPjlo6qq.js";
+import "../TextInput-CRMqBW3X.js";
+import "../colorsConfig-BQlaCfxi.js";
+import { SearchInput, searchInputVariantClasses } from "../SearchInput-C0wB4hSV.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/components/search/SearchInputForm/SearchInputForm.tsx
-const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, isDirty, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit }) => {
+//#region src/components/SearchInputForm/SearchInputForm.tsx
+const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, isDirty, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, searchInputDataTestId }) => {
 	const { searchInputIconColor } = searchInputVariantClasses[searchInputVariant];
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("form", {
 		onSubmit: (e) => {
@@ -20,6 +20,7 @@ const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults,
 			suggestions: autocompleteResults,
 			ariaActivedescendant: focusedOptionId,
 			searchInputVariant,
+			dataTestId: searchInputDataTestId,
 			onKeyDown,
 			onChange: onSearchInputChange
 		})

package/dist/{search/SearchResultsFilterSidebar/SearchResultsFilter.cjs → SearchResultsFilterSidebar/index.cjs}

@@ -1,18 +1,19 @@
-const require_chunk = require('../../chunk-CUT6urMc.cjs');
-const require_ButtonBase = require('../../ButtonBase-a8uj6c2f.cjs');
-require('../../textVariantClasses-Bhf4VY5z.cjs');
-require('../../Text-C04c4Z93.cjs');
-require('../../SearchFilterItem-DmMkiqNC.cjs');
-const require_SearchFilter = require('../../SearchFilter-D0IzBlG5.cjs');
-const require_SearchFilterHeader = require('../../SearchFilterHeader-C3EklfoO.cjs');
-require('../../colorsConfig-vunsVTFC.cjs');
-const require_searchFilterSidebarVariants = require('../../searchFilterSidebarVariants-L1rn5Ift.cjs');
+const require_chunk = require('../chunk-CUT6urMc.cjs');
+const require_ButtonBase = require('../ButtonBase-DcyxOe2v.cjs');
+require('../textVariantClasses-BnV4wXaw.cjs');
+require('../Text-CgOYTs8D.cjs');
+require('../ButtonBase-BleAVeo-.cjs');
+const require_SearchFilter = require('../SearchFilter-B15tybnV.cjs');
+require('../colorsConfig-DCvy_dV4.cjs');
+const require_searchFilterSidebarVariants = require('../searchFilterSidebarVariants-D08jyA7U.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);
+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/search/SearchResultsFilterSidebar/SearchResultsFilter.tsx
+//#region src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx
 const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, searchFilterSidebarVariant, onSelectFilterItem, onClearAllFilters, filterButtonText }) => {
 	const { applyFiltersUnchangedClasses, applyFiltersChangedClasses, searchFilterHeaderClasses, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant } = require_searchFilterSidebarVariants.searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
 	const openFilter = (0, react.useCallback)(() => {
@@ -32,7 +33,7 @@ const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, s
 		radioButtonHoverColor,
 		radioButtonUncheckedBorderColor,
 		filterCloseIconVariant,
-		headerContent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchFilterHeader.SearchFilterHeader, {
+		headerContent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchFilter.SearchFilterHeader, {
 			closeModal: () => setIsOpen(false),
 			productCount,
 			headerClassName: searchFilterHeaderClasses,
@@ -40,6 +41,7 @@ const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, s
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
 		onClick: openFilter,
+		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",
@@ -49,4 +51,5 @@ const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, s
 };
 
 //#endregion
-exports.SearchResultsFilter = SearchResultsFilter;
+exports.SearchResultsFilter = SearchResultsFilter;
+exports.searchFilterSidebarVariantClasses = require_searchFilterSidebarVariants.searchFilterSidebarVariantClasses;

package/dist/SearchResultsFilterSidebar/index.d.cts

@@ -0,0 +1,3 @@
+import "../index-B125udRj.cjs";
+import { CloseIconVariant, SearchFilter, SearchFilterItem, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses } from "../index-CQlBDGTL.cjs";
+export { CloseIconVariant, SearchFilter, SearchFilterItem, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/SearchResultsFilterSidebar/index.d.ts

@@ -0,0 +1,3 @@
+import "../index-DMXTg_9L.js";
+import { CloseIconVariant, SearchFilter, SearchFilterItem, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses } from "../index-B0oln9VD.js";
+export { CloseIconVariant, SearchFilter, SearchFilterItem, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{search/SearchResultsFilterSidebar/SearchResultsFilter.js → SearchResultsFilterSidebar/index.js}

@@ -1,15 +1,15 @@
-import { ButtonBase } from "../../ButtonBase-C1rsL9gO.js";
-import "../../textVariantClasses-5t3OricK.js";
-import "../../Text-Bdv7F5-u.js";
-import "../../SearchFilterItem-BodtWLoP.js";
-import { SearchFilter } from "../../SearchFilter-D-2IdBKS.js";
-import { SearchFilterHeader } from "../../SearchFilterHeader-BQT0-ssS.js";
-import "../../colorsConfig-BKBZfFq1.js";
-import { searchFilterSidebarVariantClasses } from "../../searchFilterSidebarVariants-eoyfoWA8.js";
+import { ButtonBase } from "../ButtonBase-BIAu5fIG.js";
+import "../textVariantClasses-CnjwO2Fv.js";
+import "../Text-BMg3d10t.js";
+import "../ButtonBase-BRfuPPzN.js";
+import { SearchFilter, SearchFilterHeader } from "../SearchFilter-D427M2UE.js";
+import "../colorsConfig-BQlaCfxi.js";
+import { searchFilterSidebarVariantClasses } from "../searchFilterSidebarVariants-BWQyiKwS.js";
 import { useCallback } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import SettingsVariant from "@envive-ai/react-icons/SettingsVariant";
 
-//#region src/components/search/SearchResultsFilterSidebar/SearchResultsFilter.tsx
+//#region src/components/SearchResultsFilterSidebar/SearchResultsFilter.tsx
 const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, searchFilterSidebarVariant, onSelectFilterItem, onClearAllFilters, filterButtonText }) => {
 	const { applyFiltersUnchangedClasses, applyFiltersChangedClasses, searchFilterHeaderClasses, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
 	const openFilter = useCallback(() => {
@@ -37,6 +37,7 @@ const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, s
 		})
 	}), /* @__PURE__ */ jsx(ButtonBase, {
 		onClick: openFilter,
+		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",
@@ -46,4 +47,4 @@ const SearchResultsFilter = ({ productCount, isOpen, setIsOpen, searchFilters, s
 };
 
 //#endregion
-export { SearchResultsFilter };
+export { SearchResultsFilter, searchFilterSidebarVariantClasses };

package/dist/SearchResultsStates/index.cjs

@@ -0,0 +1,126 @@
+const require_chunk = require('../chunk-CUT6urMc.cjs');
+require('../textVariantClasses-BnV4wXaw.cjs');
+const require_Text = require('../Text-CgOYTs8D.cjs');
+const require_DynamicFiltersScrollbar = require('../DynamicFiltersScrollbar-BTopFhyl.cjs');
+require('../Headline-iP_MckEO.cjs');
+require('../ImageWithFallback-1LqhQK1q.cjs');
+const require_ProductCard = require('../ProductCard-DZZKutY-.cjs');
+require('../Spinner-DzdIkS6t.cjs');
+const require_ProductGrid = require('../ProductGrid-BSSmPr7K.cjs');
+require('../colorsConfig-DCvy_dV4.cjs');
+const require_searchFilterSidebarVariants = require('../searchFilterSidebarVariants-D08jyA7U.cjs');
+const require_SparkleAnimation = require('../SparkleAnimation-BhyeL26m.cjs');
+require('../Text-DDT3sqY1.cjs');
+let framer_motion = require("framer-motion");
+framer_motion = require_chunk.__toESM(framer_motion);
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let __envive_ai_react_toolkit_Text = require("@envive-ai/react-toolkit/Text");
+__envive_ai_react_toolkit_Text = require_chunk.__toESM(__envive_ai_react_toolkit_Text);
+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", {
+		className: containerClasses,
+		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_Text.Text, {
+				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."
+			})]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsGrid.tsx
+const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, searchResponseId, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter }) => {
+	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]");
+	const { filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses } = require_searchFilterSidebarVariants.searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+		className: "spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DynamicFiltersScrollbar.AppliedFiltersScrollbar, {
+				selectedFilterOptions,
+				filterBarClassNames: appliedFilterBarClasses,
+				filterDefaultClasses,
+				filterHoverClasses,
+				appliedFilterBackgroundClasses,
+				onRemoveFilter
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DynamicFiltersScrollbar.DynamicFiltersScrollbar, {
+				availableDynamicFilters,
+				filterBarClassNames: filterBarClasses,
+				filterDefaultClasses,
+				filterHoverClasses,
+				onToggleDynamicFilter
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductGrid.ProductGrid, {
+				productList,
+				productGridVariant,
+				productGridClasses,
+				productCardConfig,
+				merchantShortName,
+				searchResponseId
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx
+const SearchResultsLoadingGrid = ({ productGridVariant, productGridClasses, sparkleIconColor = "var(--spiffy-colors-accent-primary)" }) => {
+	const { productCardLayoutVariant, productCardImageAspectRatio } = require_ProductGrid.productGridVariantClasses[productGridVariant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		className: "spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "spiffy-tw-mt-6 spiffy-tw-w-full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-mb-4",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-2 spiffy-tw-ml-[16px] md:spiffy-tw-ml-[80px]",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "spiffy-tw-width-[24px]",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SparkleAnimation.SparkleAnimation, {
+							color: sparkleIconColor,
+							animate: true
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_Text.Text, {
+						variant: "body2",
+						children: "Finding the best options for you..."
+					})]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: productGridClasses,
+				children: Array.from({ length: 8 }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductCard.ProductCardSkeleton, {
+					layoutVariant: productCardLayoutVariant,
+					aspectRatio: productCardImageAspectRatio,
+					growWithContainer: true
+				}, index))
+			})]
+		})
+	});
+};
+
+//#endregion
+exports.NoSearchResultsFound = NoSearchResultsFound;
+exports.SearchResultsGrid = SearchResultsGrid;
+exports.SearchResultsLoadingGrid = SearchResultsLoadingGrid;

package/dist/SearchResultsStates/index.d.cts

@@ -0,0 +1,73 @@
+import "../types-BQYpWDJ4.cjs";
+import { SelectedFilterOption } from "../types-C-Jrlw5Z.cjs";
+import { ProductCardConfig, ProductGridVariant } from "../index-wYn2mEDm.cjs";
+import "../index-B125udRj.cjs";
+import { SearchFilterSidebarVariant } from "../index-CQlBDGTL.cjs";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
+
+//#region src/components/SearchResultsStates/NoSearchResultsFound.d.ts
+interface NoSearchResultsFoundProps {
+  containerPaddingClasses: string;
+  includeBottomMargin?: boolean;
+  noResultsFoundText?: string;
+  sparkleIconColor?: string;
+}
+declare const NoSearchResultsFound: ({
+  containerPaddingClasses,
+  includeBottomMargin,
+  noResultsFoundText,
+  sparkleIconColor
+}: NoSearchResultsFoundProps) => react_jsx_runtime8.JSX.Element;
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsGrid.d.ts
+interface SearchResultsGridProps {
+  productList: SearchResponseProduct[];
+  productCardConfig: ProductCardConfig;
+  merchantShortName: string;
+  availableDynamicFilters: {
+    name: string;
+    displayName: string;
+  }[];
+  searchFilterSidebarVariant: SearchFilterSidebarVariant;
+  productGridVariant: ProductGridVariant;
+  selectedFilterOptions: SelectedFilterOption[];
+  searchResponseId: string;
+  containerXPaddingClasses: string;
+  productGridClasses: string;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+}
+declare const SearchResultsGrid: ({
+  productList,
+  productCardConfig,
+  merchantShortName,
+  availableDynamicFilters,
+  searchFilterSidebarVariant,
+  productGridVariant,
+  selectedFilterOptions,
+  searchResponseId,
+  containerXPaddingClasses,
+  productGridClasses,
+  onRemoveFilter,
+  onToggleDynamicFilter
+}: SearchResultsGridProps) => react_jsx_runtime8.JSX.Element;
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsLoadingGrid.d.ts
+declare const SearchResultsLoadingGrid: ({
+  productGridVariant,
+  productGridClasses,
+  sparkleIconColor
+}: {
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  sparkleIconColor?: string;
+}) => react_jsx_runtime8.JSX.Element;
+//#endregion
+export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/SearchResultsStates/index.d.ts

@@ -0,0 +1,73 @@
+import "../types-BruEHw-X.js";
+import { SelectedFilterOption } from "../types-Bm-qQyO3.js";
+import { ProductCardConfig, ProductGridVariant } from "../index-CcnuEYQN.js";
+import "../index-DMXTg_9L.js";
+import { SearchFilterSidebarVariant } from "../index-B0oln9VD.js";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
+
+//#region src/components/SearchResultsStates/NoSearchResultsFound.d.ts
+interface NoSearchResultsFoundProps {
+  containerPaddingClasses: string;
+  includeBottomMargin?: boolean;
+  noResultsFoundText?: string;
+  sparkleIconColor?: string;
+}
+declare const NoSearchResultsFound: ({
+  containerPaddingClasses,
+  includeBottomMargin,
+  noResultsFoundText,
+  sparkleIconColor
+}: NoSearchResultsFoundProps) => react_jsx_runtime14.JSX.Element;
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsGrid.d.ts
+interface SearchResultsGridProps {
+  productList: SearchResponseProduct[];
+  productCardConfig: ProductCardConfig;
+  merchantShortName: string;
+  availableDynamicFilters: {
+    name: string;
+    displayName: string;
+  }[];
+  searchFilterSidebarVariant: SearchFilterSidebarVariant;
+  productGridVariant: ProductGridVariant;
+  selectedFilterOptions: SelectedFilterOption[];
+  searchResponseId: string;
+  containerXPaddingClasses: string;
+  productGridClasses: string;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+}
+declare const SearchResultsGrid: ({
+  productList,
+  productCardConfig,
+  merchantShortName,
+  availableDynamicFilters,
+  searchFilterSidebarVariant,
+  productGridVariant,
+  selectedFilterOptions,
+  searchResponseId,
+  containerXPaddingClasses,
+  productGridClasses,
+  onRemoveFilter,
+  onToggleDynamicFilter
+}: SearchResultsGridProps) => react_jsx_runtime14.JSX.Element;
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsLoadingGrid.d.ts
+declare const SearchResultsLoadingGrid: ({
+  productGridVariant,
+  productGridClasses,
+  sparkleIconColor
+}: {
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  sparkleIconColor?: string;
+}) => react_jsx_runtime14.JSX.Element;
+//#endregion
+export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };