@envive-ai/react-toolkit 0.1.4 → 0.1.6

package/dist/{ProductGrid-DZgwGPSQ.cjs → ProductGrid-BSSmPr7K.cjs}

@@ -1,6 +1,5 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_ProductCard = require('./ProductCard-C7WUShhN.cjs');
-const require_productGridVariants = require('./productGridVariants-CsNV0ACt.cjs');
+const require_ProductCard = require('./ProductCard-DZZKutY-.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -31,40 +30,61 @@ let ChatElementDisplayLocation = /* @__PURE__ */ function(ChatElementDisplayLoca
 }({});
 
 //#endregion
-//#region src/components/common/ProductGrid/ProductGrid.tsx
-const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, searchResponseId, cardsGrowWithContainer = true, handleClick }) => {
-	const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = require_productGridVariants.productGridVariantClasses[productGridVariant];
+//#region src/components/ProductGrid/productGridVariants.ts
+const productGridVariantClasses = {
+	standard: {
+		productCardVariant: "minimal",
+		productCardHoverVariant: "backgroundDark",
+		productCardLayoutVariant: "tall",
+		productCardImageAspectRatio: "3:4",
+		zoomOnHover: true
+	},
+	square: {
+		productCardVariant: "minimal",
+		productCardHoverVariant: "backgroundDark",
+		productCardLayoutVariant: "square",
+		productCardImageAspectRatio: "square",
+		zoomOnHover: true
+	}
+};
+
+//#endregion
+//#region src/components/ProductGrid/ProductGrid.tsx
+const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, searchResponseId, cardsGrowWithContainer = true }) => {
+	const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
 	const cardContainerClasses = (0, classnames.default)({
 		"spiffy-tw-w-full": cardsGrowWithContainer,
 		"spiffy-tw-h-full": cardsGrowWithContainer
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: productGridClasses,
-		children: productList.map((product, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cardContainerClasses,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductCard.ProductCard, {
-				productCardConfig,
-				merchantShortName,
-				imageUrl: product.imageUrl,
-				searchResponseId,
-				productResponseId: product.responseId,
-				title: product.title,
-				url: product.url,
-				originalPrice: product.originalPrice,
-				salePrice: product.salePrice,
-				averageRating: product.averageRating,
-				numberReviews: product.numberReviews,
-				cardDisplayLocation: ChatElementDisplayLocation.PRODUCT_GRID,
-				layoutVariant: productCardLayoutVariant,
-				variant: productCardVariant,
-				hoverVariant: productCardHoverVariant,
-				zoomOnHover,
-				aspectRatio: productCardImageAspectRatio,
-				clickPosition: index,
-				growWithContainer: cardsGrowWithContainer,
-				handleClick
-			}, product.id)
-		}, product.id))
+		children: productList.map((product, index) => {
+			const camelCasedProduct = product;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cardContainerClasses,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductCard.ProductCard, {
+					productCardConfig,
+					merchantShortName,
+					imageUrl: camelCasedProduct.imageUrl,
+					searchResponseId,
+					productResponseId: camelCasedProduct.responseId,
+					title: camelCasedProduct.title,
+					url: camelCasedProduct.url,
+					originalPrice: camelCasedProduct.originalPrice,
+					salePrice: camelCasedProduct.salePrice,
+					averageRating: camelCasedProduct.averageRating,
+					numberReviews: camelCasedProduct.numberReviews,
+					cardDisplayLocation: ChatElementDisplayLocation.PRODUCT_GRID,
+					layoutVariant: productCardLayoutVariant,
+					variant: productCardVariant,
+					hoverVariant: productCardHoverVariant,
+					zoomOnHover,
+					aspectRatio: productCardImageAspectRatio,
+					clickPosition: index,
+					growWithContainer: cardsGrowWithContainer
+				}, camelCasedProduct.id)
+			}, camelCasedProduct.id);
+		})
 	});
 };
 
@@ -74,4 +94,10 @@ Object.defineProperty(exports, 'ProductGrid', {
   get: function () {
     return ProductGrid;
   }
+});
+Object.defineProperty(exports, 'productGridVariantClasses', {
+  enumerable: true,
+  get: function () {
+    return productGridVariantClasses;
+  }
 });

package/dist/{ProductGrid-wnSc9bXT.js → ProductGrid-DTUhH219.js}

@@ -1,5 +1,4 @@
-import { ProductCard } from "./ProductCard-B5wnOeR9.js";
-import { productGridVariantClasses } from "./productGridVariants-BNX4YlRK.js";
+import { ProductCard } from "./ProductCard-SF8-lXlT.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 
@@ -28,8 +27,27 @@ let ChatElementDisplayLocation = /* @__PURE__ */ function(ChatElementDisplayLoca
 }({});
 
 //#endregion
-//#region src/components/common/ProductGrid/ProductGrid.tsx
-const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, searchResponseId, cardsGrowWithContainer = true, handleClick }) => {
+//#region src/components/ProductGrid/productGridVariants.ts
+const productGridVariantClasses = {
+	standard: {
+		productCardVariant: "minimal",
+		productCardHoverVariant: "backgroundDark",
+		productCardLayoutVariant: "tall",
+		productCardImageAspectRatio: "3:4",
+		zoomOnHover: true
+	},
+	square: {
+		productCardVariant: "minimal",
+		productCardHoverVariant: "backgroundDark",
+		productCardLayoutVariant: "square",
+		productCardImageAspectRatio: "square",
+		zoomOnHover: true
+	}
+};
+
+//#endregion
+//#region src/components/ProductGrid/ProductGrid.tsx
+const ProductGrid = ({ productList, productGridVariant, productGridClasses, productCardConfig, merchantShortName, searchResponseId, cardsGrowWithContainer = true }) => {
 	const { productCardVariant, productCardHoverVariant, productCardLayoutVariant, productCardImageAspectRatio, zoomOnHover } = productGridVariantClasses[productGridVariant];
 	const cardContainerClasses = classNames({
 		"spiffy-tw-w-full": cardsGrowWithContainer,
@@ -37,33 +55,35 @@ const ProductGrid = ({ productList, productGridVariant, productGridClasses, prod
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: productGridClasses,
-		children: productList.map((product, index) => /* @__PURE__ */ jsx("div", {
-			className: cardContainerClasses,
-			children: /* @__PURE__ */ jsx(ProductCard, {
-				productCardConfig,
-				merchantShortName,
-				imageUrl: product.imageUrl,
-				searchResponseId,
-				productResponseId: product.responseId,
-				title: product.title,
-				url: product.url,
-				originalPrice: product.originalPrice,
-				salePrice: product.salePrice,
-				averageRating: product.averageRating,
-				numberReviews: product.numberReviews,
-				cardDisplayLocation: ChatElementDisplayLocation.PRODUCT_GRID,
-				layoutVariant: productCardLayoutVariant,
-				variant: productCardVariant,
-				hoverVariant: productCardHoverVariant,
-				zoomOnHover,
-				aspectRatio: productCardImageAspectRatio,
-				clickPosition: index,
-				growWithContainer: cardsGrowWithContainer,
-				handleClick
-			}, product.id)
-		}, product.id))
+		children: productList.map((product, index) => {
+			const camelCasedProduct = product;
+			return /* @__PURE__ */ jsx("div", {
+				className: cardContainerClasses,
+				children: /* @__PURE__ */ jsx(ProductCard, {
+					productCardConfig,
+					merchantShortName,
+					imageUrl: camelCasedProduct.imageUrl,
+					searchResponseId,
+					productResponseId: camelCasedProduct.responseId,
+					title: camelCasedProduct.title,
+					url: camelCasedProduct.url,
+					originalPrice: camelCasedProduct.originalPrice,
+					salePrice: camelCasedProduct.salePrice,
+					averageRating: camelCasedProduct.averageRating,
+					numberReviews: camelCasedProduct.numberReviews,
+					cardDisplayLocation: ChatElementDisplayLocation.PRODUCT_GRID,
+					layoutVariant: productCardLayoutVariant,
+					variant: productCardVariant,
+					hoverVariant: productCardHoverVariant,
+					zoomOnHover,
+					aspectRatio: productCardImageAspectRatio,
+					clickPosition: index,
+					growWithContainer: cardsGrowWithContainer
+				}, camelCasedProduct.id)
+			}, camelCasedProduct.id);
+		})
 	});
 };
 
 //#endregion
-export { ProductGrid };
+export { ProductGrid, productGridVariantClasses };

package/dist/SearchAutocomplete/index.cjs

@@ -0,0 +1,3 @@
+const require_SearchAutocomplete = require('../SearchAutocomplete-BzaEXmRQ.cjs');
+
+exports.SearchAutocomplete = require_SearchAutocomplete.SearchAutocomplete;

package/dist/{search/SearchInputAutocomplete/SearchAutocomplete.d.cts → SearchAutocomplete/index.d.cts}

@@ -1,6 +1,6 @@
 import React from "react";
 
-//#region src/components/search/SearchInputAutocomplete/SearchAutocomplete.d.ts
+//#region src/components/SearchAutocomplete/SearchAutocomplete.d.ts
 interface GlobalSearchAutocompleteProps {
   id: string;
   results: string[];

package/dist/{search/SearchInputAutocomplete/SearchAutocomplete.d.ts → SearchAutocomplete/index.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
 
-//#region src/components/search/SearchInputAutocomplete/SearchAutocomplete.d.ts
+//#region src/components/SearchAutocomplete/SearchAutocomplete.d.ts
 interface GlobalSearchAutocompleteProps {
   id: string;
   results: string[];

package/dist/SearchAutocomplete/index.js

@@ -0,0 +1,3 @@
+import { SearchAutocomplete } from "../SearchAutocomplete-BPjlo6qq.js";
+
+export { SearchAutocomplete };

package/dist/{SearchAutocomplete-B8mO03Rr.js → SearchAutocomplete-BPjlo6qq.js}

@@ -1,10 +1,10 @@
-import classNames from "classnames";
+import { motion } from "framer-motion";
 import React from "react";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import OutlinedStar from "@envive-ai/react-icons/src/OutlinedStar";
+import OutlinedStar from "@envive-ai/react-icons/OutlinedStar";
 
-//#region src/components/search/SearchInputAutocomplete/SearchAutocomplete.tsx
+//#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
 const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, iconColor }) => {
 	if (results.length === 0) return null;
 	return /* @__PURE__ */ jsx(motion.div, {

package/dist/{SearchAutocomplete-BrF2SMoZ.cjs → SearchAutocomplete-BzaEXmRQ.cjs}

@@ -1,16 +1,16 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+let framer_motion = require("framer-motion");
+framer_motion = require_chunk.__toESM(framer_motion);
 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 framer_motion = require("framer-motion");
-framer_motion = require_chunk.__toESM(framer_motion);
-let __envive_ai_react_icons_src_OutlinedStar = require("@envive-ai/react-icons/src/OutlinedStar");
-__envive_ai_react_icons_src_OutlinedStar = require_chunk.__toESM(__envive_ai_react_icons_src_OutlinedStar);
+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);
 
-//#region src/components/search/SearchInputAutocomplete/SearchAutocomplete.tsx
+//#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
 const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, iconColor }) => {
 	if (results.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
@@ -41,7 +41,7 @@ const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, ico
 				onKeyDown: (event) => {
 					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
 				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_src_OutlinedStar.default, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_OutlinedStar.default, {
 					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2",
 					fill: iconColor
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {

package/dist/SearchFilter/index.cjs

@@ -0,0 +1,8 @@
+require('../ButtonBase-DcyxOe2v.cjs');
+require('../textVariantClasses-BnV4wXaw.cjs');
+require('../Text-CgOYTs8D.cjs');
+const require_SearchFilter = require('../SearchFilter-B15tybnV.cjs');
+
+exports.SearchFilter = require_SearchFilter.SearchFilter;
+exports.SearchFilterHeader = require_SearchFilter.SearchFilterHeader;
+exports.SearchFilterItem = require_SearchFilter.SearchFilterItem;

package/dist/SearchFilter/index.d.cts

@@ -0,0 +1,2 @@
+import { SearchFilter, SearchFilterHeader, SearchFilterHeaderProps, SearchFilterItem, SearchFilterItemProps, SearchFilterProps, SelectFilterItem } from "../index-B125udRj.cjs";
+export { SearchFilter, SearchFilterHeader, SearchFilterHeaderProps, SearchFilterItem, SearchFilterItemProps, SearchFilterProps, SelectFilterItem };

package/dist/SearchFilter/index.d.ts

@@ -0,0 +1,2 @@
+import { SearchFilter, SearchFilterHeader, SearchFilterHeaderProps, SearchFilterItem, SearchFilterItemProps, SearchFilterProps, SelectFilterItem } from "../index-DMXTg_9L.js";
+export { SearchFilter, SearchFilterHeader, SearchFilterHeaderProps, SearchFilterItem, SearchFilterItemProps, SearchFilterProps, SelectFilterItem };

package/dist/SearchFilter/index.js

@@ -0,0 +1,6 @@
+import "../ButtonBase-BIAu5fIG.js";
+import "../textVariantClasses-CnjwO2Fv.js";
+import "../Text-BMg3d10t.js";
+import { SearchFilter, SearchFilterHeader, SearchFilterItem } from "../SearchFilter-D427M2UE.js";
+
+export { SearchFilter, SearchFilterHeader, SearchFilterItem };

package/dist/SearchFilter-B15tybnV.cjs

@@ -0,0 +1,134 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_ButtonBase = require('./ButtonBase-DcyxOe2v.cjs');
+const require_Text = require('./Text-CgOYTs8D.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/SearchFilter/SearchFilterItem.tsx
+const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
+	const { displayName, isSelected } = filterItem;
+	const radioClasses = (0, classnames.default)("spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2", "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center", radioButtonUncheckedBorderColor, radioButtonHoverColor, { [radioButtonFillColor]: isSelected });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer",
+		onClick: () => onSelectFilterItem(filterItem),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+			variant: "body3",
+			children: displayName
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: radioClasses,
+			children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
+				"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
+				"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
+			}) })
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/SearchFilter/SearchFilter.tsx
+const SearchFilter = ({ isOpen, setIsOpen, filters, selectFilterItem, clearAllFilters, filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, headerContent }) => {
+	const modalClasses = (0, classnames.default)("spiffy-tw-fixed spiffy-tw-inset-0 spiffy-tw-z-50 spiffy-tw-flex spiffy-tw-transform spiffy-tw-transition-all", {
+		"spiffy-tw-translate-x-full": !isOpen,
+		"spiffy-tw-translate-x-0": isOpen
+	});
+	const overlayClasses = (0, classnames.default)("spiffy-tw-absolute spiffy-tw-inset-0 spiffy-tw-bg-black spiffy-tw-bg-opacity-50", {
+		"spiffy-tw-opacity-0": !isOpen,
+		"spiffy-tw-opacity-100": isOpen
+	});
+	const sidebarClasses = (0, classnames.default)("spiffy-tw-relative spiffy-tw-ml-auto spiffy-tw-flex spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-max-w-xs spiffy-tw-flex-col spiffy-tw-overflow-y-auto spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-py-4 spiffy-tw-shadow-xl");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: modalClasses,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: overlayClasses,
+			onClick: () => setIsOpen(false)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: sidebarClasses,
+			children: [
+				headerContent,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6",
+					children: filters.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "spiffy-tw-mb-6",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+							variant: "body2",
+							className: "spiffy-tw-font-medium spiffy-tw-mb-3",
+							children: filter.displayName
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: filter.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchFilterItem, {
+							filterItem: item,
+							onSelectFilterItem: selectFilterItem,
+							radioButtonFillColor,
+							radioButtonHoverColor,
+							radioButtonUncheckedBorderColor
+						}, item.id)) })]
+					}, filter.id))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+						onClick: clearAllFilters,
+						text: "Clear All",
+						buttonClass: "spiffy-tw-w-full spiffy-tw-mb-2"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+						onClick: () => setIsOpen(false),
+						text: filterButtonText,
+						buttonClass: "spiffy-tw-w-full"
+					})]
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/SearchFilter/SearchFilterHeader.tsx
+const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
+	const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
+			variant: "body2",
+			className: "spiffy-tw-font-medium",
+			children: [
+				"Filters (",
+				productCount,
+				")"
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			onClick: closeModal,
+			className: "spiffy-tw-p-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "14",
+				height: "14",
+				viewBox: "0 0 14 14",
+				fill: "none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z",
+					fill: closeIconColor
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'SearchFilter', {
+  enumerable: true,
+  get: function () {
+    return SearchFilter;
+  }
+});
+Object.defineProperty(exports, 'SearchFilterHeader', {
+  enumerable: true,
+  get: function () {
+    return SearchFilterHeader;
+  }
+});
+Object.defineProperty(exports, 'SearchFilterItem', {
+  enumerable: true,
+  get: function () {
+    return SearchFilterItem;
+  }
+});

package/dist/SearchFilter-D427M2UE.js

@@ -0,0 +1,114 @@
+import { ButtonBase } from "./ButtonBase-BIAu5fIG.js";
+import { Text } from "./Text-BMg3d10t.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/SearchFilterItem.tsx
+const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
+	const { displayName, isSelected } = filterItem;
+	const radioClasses = classNames("spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2", "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center", radioButtonUncheckedBorderColor, radioButtonHoverColor, { [radioButtonFillColor]: isSelected });
+	return /* @__PURE__ */ jsxs("li", {
+		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer",
+		onClick: () => onSelectFilterItem(filterItem),
+		children: [/* @__PURE__ */ jsx(Text, {
+			variant: "body3",
+			children: displayName
+		}), /* @__PURE__ */ jsx("div", {
+			className: radioClasses,
+			children: isSelected && /* @__PURE__ */ jsx("div", { className: classNames("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
+				"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
+				"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
+			}) })
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/SearchFilter/SearchFilter.tsx
+const SearchFilter = ({ isOpen, setIsOpen, filters, selectFilterItem, clearAllFilters, filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, headerContent }) => {
+	const modalClasses = classNames("spiffy-tw-fixed spiffy-tw-inset-0 spiffy-tw-z-50 spiffy-tw-flex spiffy-tw-transform spiffy-tw-transition-all", {
+		"spiffy-tw-translate-x-full": !isOpen,
+		"spiffy-tw-translate-x-0": isOpen
+	});
+	const overlayClasses = classNames("spiffy-tw-absolute spiffy-tw-inset-0 spiffy-tw-bg-black spiffy-tw-bg-opacity-50", {
+		"spiffy-tw-opacity-0": !isOpen,
+		"spiffy-tw-opacity-100": isOpen
+	});
+	const sidebarClasses = classNames("spiffy-tw-relative spiffy-tw-ml-auto spiffy-tw-flex spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-max-w-xs spiffy-tw-flex-col spiffy-tw-overflow-y-auto spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-py-4 spiffy-tw-shadow-xl");
+	return /* @__PURE__ */ jsxs("div", {
+		className: modalClasses,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: overlayClasses,
+			onClick: () => setIsOpen(false)
+		}), /* @__PURE__ */ jsxs("div", {
+			className: sidebarClasses,
+			children: [
+				headerContent,
+				/* @__PURE__ */ jsx("div", {
+					className: "spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6",
+					children: filters.map((filter) => /* @__PURE__ */ jsxs("div", {
+						className: "spiffy-tw-mb-6",
+						children: [/* @__PURE__ */ jsx(Text, {
+							variant: "body2",
+							className: "spiffy-tw-font-medium spiffy-tw-mb-3",
+							children: filter.displayName
+						}), /* @__PURE__ */ jsx("ul", { children: filter.items.map((item) => /* @__PURE__ */ jsx(SearchFilterItem, {
+							filterItem: item,
+							onSelectFilterItem: selectFilterItem,
+							radioButtonFillColor,
+							radioButtonHoverColor,
+							radioButtonUncheckedBorderColor
+						}, item.id)) })]
+					}, filter.id))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3",
+					children: [/* @__PURE__ */ jsx(ButtonBase, {
+						onClick: clearAllFilters,
+						text: "Clear All",
+						buttonClass: "spiffy-tw-w-full spiffy-tw-mb-2"
+					}), /* @__PURE__ */ jsx(ButtonBase, {
+						onClick: () => setIsOpen(false),
+						text: filterButtonText,
+						buttonClass: "spiffy-tw-w-full"
+					})]
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/SearchFilter/SearchFilterHeader.tsx
+const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
+	const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
+		children: [/* @__PURE__ */ jsxs(Text, {
+			variant: "body2",
+			className: "spiffy-tw-font-medium",
+			children: [
+				"Filters (",
+				productCount,
+				")"
+			]
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: closeModal,
+			className: "spiffy-tw-p-2",
+			children: /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "14",
+				height: "14",
+				viewBox: "0 0 14 14",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z",
+					fill: closeIconColor
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+export { SearchFilter, SearchFilterHeader, SearchFilterItem };

package/dist/SearchInput/index.cjs

@@ -0,0 +1,7 @@
+require('../textVariantClasses-BnV4wXaw.cjs');
+require('../TextInput-C6fF9cSB.cjs');
+require('../colorsConfig-DCvy_dV4.cjs');
+const require_SearchInput = require('../SearchInput-D6UW79wT.cjs');
+
+exports.SearchInput = require_SearchInput.SearchInput;
+exports.searchInputVariantClasses = require_SearchInput.searchInputVariantClasses;

package/dist/SearchInput/index.d.cts

@@ -0,0 +1,33 @@
+import { SearchInputVariant } from "../index-BNCrvswP.cjs";
+import React from "react";
+import { TextStyleVariantMap } from "dist/textVariantClasses-sT9E8Uty";
+
+//#region src/components/SearchInput/SearchInput.d.ts
+interface SearchInputProps {
+  searchInputVariant?: SearchInputVariant;
+  value: string;
+  placeholder?: string;
+  suggestions?: string[];
+  className?: string;
+  dataTestId?: string;
+  ariaActivedescendant?: string;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (newValue: string) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/SearchInput/searchInputVariants.d.ts
+interface SearchInputVariantClasses {
+  searchInputIconColor: string;
+  searchInputBorderColor: string;
+  searchInputCloseIconClasses: string;
+  searchInputActiveStarClasses: string;
+  autocompleteIconColor: string;
+  searchInputClasses: string;
+  placeholderVariant: keyof typeof TextStyleVariantMap;
+}
+declare const searchInputVariantClasses: Record<SearchInputVariant, SearchInputVariantClasses>;
+//#endregion
+export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput/index.d.ts

@@ -0,0 +1,33 @@
+import { SearchInputVariant } from "../index-BHNzU-Pc.js";
+import React from "react";
+import { TextStyleVariantMap } from "dist/textVariantClasses-sT9E8Uty";
+
+//#region src/components/SearchInput/SearchInput.d.ts
+interface SearchInputProps {
+  searchInputVariant?: SearchInputVariant;
+  value: string;
+  placeholder?: string;
+  suggestions?: string[];
+  className?: string;
+  dataTestId?: string;
+  ariaActivedescendant?: string;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (newValue: string) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/SearchInput/searchInputVariants.d.ts
+interface SearchInputVariantClasses {
+  searchInputIconColor: string;
+  searchInputBorderColor: string;
+  searchInputCloseIconClasses: string;
+  searchInputActiveStarClasses: string;
+  autocompleteIconColor: string;
+  searchInputClasses: string;
+  placeholderVariant: keyof typeof TextStyleVariantMap;
+}
+declare const searchInputVariantClasses: Record<SearchInputVariant, SearchInputVariantClasses>;
+//#endregion
+export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput/index.js

@@ -0,0 +1,6 @@
+import "../textVariantClasses-CnjwO2Fv.js";
+import "../TextInput-CRMqBW3X.js";
+import "../colorsConfig-BQlaCfxi.js";
+import { SearchInput, searchInputVariantClasses } from "../SearchInput-C0wB4hSV.js";
+
+export { SearchInput, searchInputVariantClasses };