@envive-ai/react-toolkit 0.2.13 → 0.2.14

package/dist/components/SearchResultsStates/NoSearchResultsFound.cjs

@@ -0,0 +1,57 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+const require_RecommendedProducts = require('../RecommendedProducts/RecommendedProducts.cjs');
+require('../RecommendedProducts/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__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_rolldown_runtime.__toESM(__envive_ai_react_icons_Sparkles);
+
+//#region src/components/SearchResultsStates/NoSearchResultsFound.tsx
+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", {
+			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-h-[24px] spiffy-tw-w-[24px]",
+				style: { color: sparkleIconColor }
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "body2",
+				children: textPrompt
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RecommendedProducts.RecommendedProducts, {
+			retrievedProducts: recommendedProducts,
+			merchantShortName,
+			productCardConfig: {
+				variant: "minimal",
+				hoverVariant: "none",
+				layoutVariant: "square"
+			},
+			productGridVariant
+		})]
+	});
+};
+
+//#endregion
+exports.NoSearchResultsFound = NoSearchResultsFound;

package/dist/components/SearchResultsStates/NoSearchResultsFound.d.cts

@@ -0,0 +1,25 @@
+import { ProductGridVariant } from "../ProductCard/types.cjs";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+import { SearchResponseProductAttributes } from "@envive-ai/react-hooks/application/models";
+
+//#region src/components/SearchResultsStates/NoSearchResultsFound.d.ts
+interface NoSearchResultsFoundProps {
+  containerPaddingClasses: string;
+  noResultsFoundText?: string;
+  sparkleIconColor?: string;
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
+  searchText: string;
+  merchantShortName: string;
+  productGridVariant: ProductGridVariant;
+}
+declare const NoSearchResultsFound: ({
+  containerPaddingClasses,
+  noResultsFoundText,
+  sparkleIconColor,
+  recommendedProducts,
+  searchText,
+  merchantShortName,
+  productGridVariant
+}: NoSearchResultsFoundProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+export { NoSearchResultsFound };

package/dist/components/SearchResultsStates/NoSearchResultsFound.d.ts

@@ -0,0 +1,25 @@
+import { ProductGridVariant } from "../ProductCard/types.js";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+import { SearchResponseProductAttributes } from "@envive-ai/react-hooks/application/models";
+
+//#region src/components/SearchResultsStates/NoSearchResultsFound.d.ts
+interface NoSearchResultsFoundProps {
+  containerPaddingClasses: string;
+  noResultsFoundText?: string;
+  sparkleIconColor?: string;
+  recommendedProducts: SearchResponseProductAttributes['attributes'][];
+  searchText: string;
+  merchantShortName: string;
+  productGridVariant: ProductGridVariant;
+}
+declare const NoSearchResultsFound: ({
+  containerPaddingClasses,
+  noResultsFoundText,
+  sparkleIconColor,
+  recommendedProducts,
+  searchText,
+  merchantShortName,
+  productGridVariant
+}: NoSearchResultsFoundProps) => react_jsx_runtime6.JSX.Element;
+//#endregion
+export { NoSearchResultsFound };

package/dist/components/SearchResultsStates/NoSearchResultsFound.js

@@ -0,0 +1,54 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { RecommendedProducts } from "../RecommendedProducts/RecommendedProducts.js";
+import "../RecommendedProducts/index.js";
+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, 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", {
+			className: "spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2",
+			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Sparkles, {
+				className: "spiffy-tw-h-[24px] spiffy-tw-w-[24px]",
+				style: { color: sparkleIconColor }
+			}) }), /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				children: textPrompt
+			})]
+		}), /* @__PURE__ */ jsx(RecommendedProducts, {
+			retrievedProducts: recommendedProducts,
+			merchantShortName,
+			productCardConfig: {
+				variant: "minimal",
+				hoverVariant: "none",
+				layoutVariant: "square"
+			},
+			productGridVariant
+		})]
+	});
+};
+
+//#endregion
+export { NoSearchResultsFound };

package/dist/components/SearchResultsStates/SearchResultsGrid.cjs

@@ -0,0 +1,53 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_AppliedFiltersScrollbar = require('../FilterScrollbar/AppliedFiltersScrollbar.cjs');
+const require_DynamicFiltersScrollbar = require('../FilterScrollbar/DynamicFiltersScrollbar.cjs');
+const require_ProductGrid = require('../ProductGrid/ProductGrid.cjs');
+require('../ProductGrid/index.cjs');
+const require_searchFilterSidebarVariants = require('../SearchResultsFilterSidebar/searchFilterSidebarVariants.cjs');
+let framer_motion = require("framer-motion");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/SearchResultsStates/SearchResultsGrid.tsx
+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]");
+	const { filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses } = require_searchFilterSidebarVariants.searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+		className: "spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AppliedFiltersScrollbar.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,
+				onProductClick
+			})
+		]
+	});
+};
+
+//#endregion
+exports.SearchResultsGrid = SearchResultsGrid;

package/dist/components/SearchResultsStates/SearchResultsGrid.d.cts

@@ -0,0 +1,46 @@
+import { ProductCardConfig, ProductGridVariant } from "../ProductCard/types.cjs";
+import { SearchFilterSidebarVariant } from "../SearchResultsFilterSidebar/types.cjs";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
+
+//#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[];
+  containerXPaddingClasses: string;
+  productGridClasses: string;
+  onProductClick?: () => void;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+}
+declare const SearchResultsGrid: ({
+  productList,
+  productCardConfig,
+  merchantShortName,
+  availableDynamicFilters,
+  searchFilterSidebarVariant,
+  productGridVariant,
+  selectedFilterOptions,
+  containerXPaddingClasses,
+  productGridClasses,
+  onRemoveFilter,
+  onToggleDynamicFilter,
+  onProductClick
+}: SearchResultsGridProps) => react_jsx_runtime5.JSX.Element;
+//#endregion
+export { SearchResultsGrid };

package/dist/components/SearchResultsStates/SearchResultsGrid.d.ts

@@ -0,0 +1,46 @@
+import { ProductCardConfig, ProductGridVariant } from "../ProductCard/types.js";
+import { SearchFilterSidebarVariant } from "../SearchResultsFilterSidebar/types.js";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
+import { SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
+
+//#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[];
+  containerXPaddingClasses: string;
+  productGridClasses: string;
+  onProductClick?: () => void;
+  onRemoveFilter: (filter: SelectedFilterOption) => void;
+  onToggleDynamicFilter: ({
+    filter,
+    dynamicFilterDisplayName
+  }: {
+    filter: string;
+    dynamicFilterDisplayName: string;
+  }) => void;
+}
+declare const SearchResultsGrid: ({
+  productList,
+  productCardConfig,
+  merchantShortName,
+  availableDynamicFilters,
+  searchFilterSidebarVariant,
+  productGridVariant,
+  selectedFilterOptions,
+  containerXPaddingClasses,
+  productGridClasses,
+  onRemoveFilter,
+  onToggleDynamicFilter,
+  onProductClick
+}: SearchResultsGridProps) => react_jsx_runtime8.JSX.Element;
+//#endregion
+export { SearchResultsGrid };

package/dist/components/SearchResultsStates/SearchResultsGrid.js

@@ -0,0 +1,51 @@
+import { AppliedFiltersScrollbar } from "../FilterScrollbar/AppliedFiltersScrollbar.js";
+import { DynamicFiltersScrollbar } from "../FilterScrollbar/DynamicFiltersScrollbar.js";
+import { ProductGrid } from "../ProductGrid/ProductGrid.js";
+import "../ProductGrid/index.js";
+import { searchFilterSidebarVariantClasses } from "../SearchResultsFilterSidebar/searchFilterSidebarVariants.js";
+import { motion } from "framer-motion";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SearchResultsStates/SearchResultsGrid.tsx
+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]");
+	const { filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: "spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		children: [
+			/* @__PURE__ */ jsx(AppliedFiltersScrollbar, {
+				selectedFilterOptions,
+				filterBarClassNames: appliedFilterBarClasses,
+				filterDefaultClasses,
+				filterHoverClasses,
+				appliedFilterBackgroundClasses,
+				onRemoveFilter
+			}),
+			/* @__PURE__ */ jsx(DynamicFiltersScrollbar, {
+				availableDynamicFilters,
+				filterBarClassNames: filterBarClasses,
+				filterDefaultClasses,
+				filterHoverClasses,
+				onToggleDynamicFilter
+			}),
+			/* @__PURE__ */ jsx(ProductGrid, {
+				productList,
+				productGridVariant,
+				productGridClasses,
+				productCardConfig,
+				merchantShortName,
+				onProductClick
+			})
+		]
+	});
+};
+
+//#endregion
+export { SearchResultsGrid };

package/dist/components/SearchResultsStates/SearchResultsLoadingGrid.cjs

@@ -0,0 +1,52 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+const require_ProductCardSkeleton = require('../ProductCard/ProductCardSkeleton.cjs');
+require('../ProductCard/index.cjs');
+const require_productGridVariants = require('../ProductGrid/productGridVariants.cjs');
+require('../ProductGrid/index.cjs');
+const require_SparkleAnimation = require('../SparkleAnimation/SparkleAnimation.cjs');
+require('../SparkleAnimation/index.cjs');
+let framer_motion = require("framer-motion");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx
+const SearchResultsLoadingGrid = ({ productGridVariant, productGridClasses, sparkleIconColor = "var(--spiffy-colors-accent-primary)" }) => {
+	const { productCardLayoutVariant, productCardImageAspectRatio } = require_productGridVariants.productGridVariantClasses[productGridVariant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		className: "spiffy-tw-w-full spiffy-tw-justify-center 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-mb-4 spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "spiffy-tw-ml-[16px] spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-2 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)(require_Typography.Typography, {
+						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_ProductCardSkeleton.ProductCardSkeleton, {
+					layoutVariant: productCardLayoutVariant,
+					aspectRatio: productCardImageAspectRatio,
+					growWithContainer: true
+				}, index))
+			})]
+		})
+	});
+};
+
+//#endregion
+exports.SearchResultsLoadingGrid = SearchResultsLoadingGrid;

package/dist/components/SearchResultsStates/SearchResultsLoadingGrid.d.cts

@@ -0,0 +1,15 @@
+import { ProductGridVariant } from "../ProductCard/types.cjs";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/components/SearchResultsStates/SearchResultsLoadingGrid.d.ts
+declare const SearchResultsLoadingGrid: ({
+  productGridVariant,
+  productGridClasses,
+  sparkleIconColor
+}: {
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  sparkleIconColor?: string;
+}) => react_jsx_runtime6.JSX.Element;
+//#endregion
+export { SearchResultsLoadingGrid };

package/dist/components/SearchResultsStates/SearchResultsLoadingGrid.d.ts

@@ -0,0 +1,15 @@
+import { ProductGridVariant } from "../ProductCard/types.js";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
+
+//#region src/components/SearchResultsStates/SearchResultsLoadingGrid.d.ts
+declare const SearchResultsLoadingGrid: ({
+  productGridVariant,
+  productGridClasses,
+  sparkleIconColor
+}: {
+  productGridVariant: ProductGridVariant;
+  productGridClasses: string;
+  sparkleIconColor?: string;
+}) => react_jsx_runtime7.JSX.Element;
+//#endregion
+export { SearchResultsLoadingGrid };

package/dist/components/SearchResultsStates/SearchResultsLoadingGrid.js

@@ -0,0 +1,51 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { ProductCardSkeleton } from "../ProductCard/ProductCardSkeleton.js";
+import "../ProductCard/index.js";
+import { productGridVariantClasses } from "../ProductGrid/productGridVariants.js";
+import "../ProductGrid/index.js";
+import { SparkleAnimation } from "../SparkleAnimation/SparkleAnimation.js";
+import "../SparkleAnimation/index.js";
+import { motion } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx
+const SearchResultsLoadingGrid = ({ productGridVariant, productGridClasses, sparkleIconColor = "var(--spiffy-colors-accent-primary)" }) => {
+	const { productCardLayoutVariant, productCardImageAspectRatio } = productGridVariantClasses[productGridVariant];
+	return /* @__PURE__ */ jsx(motion.div, {
+		className: "spiffy-tw-w-full spiffy-tw-justify-center spiffy-tw-overflow-hidden",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "spiffy-tw-mt-6 spiffy-tw-w-full",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "spiffy-tw-mb-4 spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "spiffy-tw-ml-[16px] spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-2 md:spiffy-tw-ml-[80px]",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "spiffy-tw-width-[24px]",
+						children: /* @__PURE__ */ jsx(SparkleAnimation, {
+							color: sparkleIconColor,
+							animate: true
+						})
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						children: "Finding the best options for you..."
+					})]
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: productGridClasses,
+				children: Array.from({ length: 8 }).map((_, index) => /* @__PURE__ */ jsx(ProductCardSkeleton, {
+					layoutVariant: productCardLayoutVariant,
+					aspectRatio: productCardImageAspectRatio,
+					growWithContainer: true
+				}, index))
+			})]
+		})
+	});
+};
+
+//#endregion
+export { SearchResultsLoadingGrid };

package/dist/components/SearchResultsStates/index.cjs

@@ -1,16 +1,7 @@
-require('../../formatPrice-CyfkjZ3R.cjs');
-require('../../Typography-Csg-nd_w.cjs');
-require('../../DynamicFiltersScrollbar-bT3VoG-D.cjs');
-require('../../ImageWithFallback-BiBjNK-9.cjs');
-require('../../ProductCard-C3seoFWE.cjs');
-require('../../Spinner-CUrXDajS.cjs');
-require('../../ProductGrid-Ct2DvLGf.cjs');
-require('../../RecommendedProducts-Cy-1szYc.cjs');
-require('../../colorsConfig-D-MZuBvt.cjs');
-const require_SearchResultsStates = require('../../SearchResultsStates-Dp-AsmH8.cjs');
-require('../../searchFilterSidebarVariants-C61Byr1S.cjs');
-require('../../SparkleAnimation-Bg5qax1t.cjs');
+const require_NoSearchResultsFound = require('./NoSearchResultsFound.cjs');
+const require_SearchResultsGrid = require('./SearchResultsGrid.cjs');
+const require_SearchResultsLoadingGrid = require('./SearchResultsLoadingGrid.cjs');
 
-exports.NoSearchResultsFound = require_SearchResultsStates.NoSearchResultsFound;
-exports.SearchResultsGrid = require_SearchResultsStates.SearchResultsGrid;
-exports.SearchResultsLoadingGrid = require_SearchResultsStates.SearchResultsLoadingGrid;
+exports.NoSearchResultsFound = require_NoSearchResultsFound.NoSearchResultsFound;
+exports.SearchResultsGrid = require_SearchResultsGrid.SearchResultsGrid;
+exports.SearchResultsLoadingGrid = require_SearchResultsLoadingGrid.SearchResultsLoadingGrid;

package/dist/components/SearchResultsStates/index.d.cts

@@ -0,0 +1,4 @@
+import { NoSearchResultsFound } from "./NoSearchResultsFound.cjs";
+import { SearchResultsGrid } from "./SearchResultsGrid.cjs";
+import { SearchResultsLoadingGrid } from "./SearchResultsLoadingGrid.cjs";
+export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/components/SearchResultsStates/index.d.ts

@@ -0,0 +1,4 @@
+import { NoSearchResultsFound } from "./NoSearchResultsFound.js";
+import { SearchResultsGrid } from "./SearchResultsGrid.js";
+import { SearchResultsLoadingGrid } from "./SearchResultsLoadingGrid.js";
+export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/components/SearchResultsStates/index.js

@@ -1,14 +1,5 @@
-import "../../formatPrice-DexQu2aZ.js";
-import "../../Typography-xehJH05l.js";
-import "../../DynamicFiltersScrollbar-CibstqNd.js";
-import "../../ImageWithFallback-_QZT0EKI.js";
-import "../../ProductCard-ChitHvuc.js";
-import "../../Spinner-CDDFWySo.js";
-import "../../ProductGrid-DukHo_KY.js";
-import "../../RecommendedProducts-DooGvLFT.js";
-import "../../colorsConfig-BjdoRtRK.js";
-import { n as SearchResultsGrid, r as NoSearchResultsFound, t as SearchResultsLoadingGrid } from "../../SearchResultsStates-BCeqeo9y.js";
-import "../../searchFilterSidebarVariants-DcwlBfvY.js";
-import "../../SparkleAnimation-HY4cgwE3.js";
+import { NoSearchResultsFound } from "./NoSearchResultsFound.js";
+import { SearchResultsGrid } from "./SearchResultsGrid.js";
+import { SearchResultsLoadingGrid } from "./SearchResultsLoadingGrid.js";
 
 export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/components/SearchResultsToolbar/SearchResultsToolbar.cjs

@@ -0,0 +1,60 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_SearchInputForm = require('../SearchInputForm/SearchInputForm.cjs');
+require('../SearchInputForm/index.cjs');
+const require_SearchResultsFilterButton = require('../SearchResultsFilterButton/SearchResultsFilterButton.cjs');
+require('../SearchResultsFilterButton/index.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/SearchResultsToolbar/SearchResultsToolbar.tsx
+const SearchResultsToolbar = ({ searchInputVariant, searchBoxPlaceholder, searchText, focusedIndex, focusedOptionId, autocompleteResults, filterButtonText, onKeyDown, onSearchInputChange, onSubmitSearch, onAutocompleteSelect, onSearchInputFocus, onSearchInputBlur, shouldShowAutocomplete, setIsFilterOpen, containerXPaddingClasses, toolbarRef, isVisible, className }) => {
+	const [hasZIndex, setHasZIndex] = react.default.useState(false);
+	const searchInputRef = (0, react.useRef)(null);
+	react.default.useEffect(() => {
+		let timer;
+		if (isVisible) {
+			timer = setTimeout(() => {
+				setHasZIndex(true);
+			}, 300);
+			return () => clearTimeout(timer);
+		}
+		setHasZIndex(false);
+		return () => clearTimeout(timer);
+	}, [isVisible]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, classnames.default)("spiffy-tw-bg-white", "spiffy-tw-w-full", className, {
+			"spiffy-tw-z-10": hasZIndex,
+			"spiffy-tw-translate-y-0": isVisible,
+			"-spiffy-tw-translate-y-full": !isVisible
+		}),
+		ref: toolbarRef,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)("spiffy-tw-flex", containerXPaddingClasses),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchInputForm.SearchInputForm, {
+				searchInputVariant,
+				searchText,
+				focusedIndex,
+				autocompleteResults,
+				searchBoxPlaceholder,
+				focusedOptionId,
+				onKeyDown,
+				onSearchInputChange,
+				onSearchInputFocus,
+				onSearchInputBlur,
+				shouldShowAutocomplete,
+				onSearchSubmit: onSubmitSearch,
+				onAutocompleteSelect,
+				searchInputRef
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchResultsFilterButton.SearchResultsFilterButton, {
+				setIsOpen: setIsFilterOpen,
+				filterButtonText
+			})]
+		})
+	});
+};
+
+//#endregion
+exports.SearchResultsToolbar = SearchResultsToolbar;

package/dist/components/SearchResultsToolbar/{index-_hxKcDDT.d.ts → SearchResultsToolbar.d.cts}

@@ -1,5 +1,5 @@
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import React from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
 import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
 
 //#region src/components/SearchResultsToolbar/SearchResultsToolbar.d.ts
@@ -44,6 +44,6 @@ declare const SearchResultsToolbar: ({
   toolbarRef,
   isVisible,
   className
-}: SearchResultsToolbarProps) => react_jsx_runtime2.JSX.Element;
+}: SearchResultsToolbarProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 export { SearchResultsToolbar };

package/dist/components/SearchResultsToolbar/{index-M8RkRW3H.d.cts → SearchResultsToolbar.d.ts}

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime28 from "react/jsx-runtime";
 import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
 
 //#region src/components/SearchResultsToolbar/SearchResultsToolbar.d.ts
@@ -44,6 +44,6 @@ declare const SearchResultsToolbar: ({
   toolbarRef,
   isVisible,
   className
-}: SearchResultsToolbarProps) => react_jsx_runtime28.JSX.Element;
+}: SearchResultsToolbarProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SearchResultsToolbar };