@envive-ai/react-toolkit 0.2.11 → 0.2.13-arthur-1

package/dist/{ProductGrid-B1RtE58G.js → ProductGrid-DAwc9dKV.js}

@@ -1,6 +1,6 @@
-import { ProductCard } from "./ProductCard-BiWAcPO4.js";
-import { jsx } from "react/jsx-runtime";
+import { a as ProductCard } from "./ProductCard-GxpFxjh0.js";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/ProductGrid/productGridVariants.ts
 const productGridVariantClasses = {
@@ -55,4 +55,4 @@ const ProductGrid = ({ productList, productGridVariant, productGridClasses, prod
 };
 
 //#endregion
-export { ProductGrid, productGridVariantClasses };
+export { productGridVariantClasses as n, ProductGrid as t };

package/dist/{RadioButton-CQ6qOvBl.js → RadioButton-DOc8g47U.js}

@@ -1,7 +1,7 @@
-import { Typography } from "./Typography-C3QmJzFK.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as Typography } from "./Typography-xehJH05l.js";
 import { useState } from "react";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/RadioButton/RadioButton.tsx
 const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange, id }) => {
@@ -68,4 +68,4 @@ const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "
 };
 
 //#endregion
-export { RadioButton };
+export { RadioButton as t };

package/dist/{RadioButton-DP-qs5cy.cjs → RadioButton-DpF1wymL.cjs}

@@ -1,11 +1,9 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-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 classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/RadioButton/RadioButton.tsx
 const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange, id }) => {

package/dist/{RadioButtonGroup-CJPWfAaA.cjs → RadioButtonGroup-ByzTXNAb.cjs}

@@ -1,9 +1,8 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_RadioButton = require('./RadioButton-DP-qs5cy.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+const require_RadioButton = require('./RadioButton-DpF1wymL.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
 const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";

package/dist/{RadioButtonGroup-Ce8cKqYw.js → RadioButtonGroup-YQIxmR7j.js}

@@ -1,6 +1,6 @@
-import { RadioButton } from "./RadioButton-CQ6qOvBl.js";
-import { jsx } from "react/jsx-runtime";
+import { t as RadioButton } from "./RadioButton-DOc8g47U.js";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
 const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";
@@ -35,4 +35,4 @@ const RadioButtonGroup = ({ name, options, fillColor, hoverColor, uncheckedBorde
 };
 
 //#endregion
-export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };
+export { SPIFFY_RADIO_BUTTON_GROUP_CLASS as n, RadioButtonGroup as t };

package/dist/RecommendedProducts-C6dLpLPP.js

@@ -0,0 +1,49 @@
+import { t as Typography } from "./Typography-xehJH05l.js";
+import { t as ProductGrid } from "./ProductGrid-DAwc9dKV.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/RecommendedProducts-qkPxXVJn.cjs

@@ -0,0 +1,56 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Typography = require('./Typography-Ds4gfOJz.cjs');
+const require_ProductGrid = require('./ProductGrid-0A8vml2y.cjs');
+let framer_motion = require("framer-motion");
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("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 = (0, classnames.default)("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 = (0, classnames.default)("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 = (0, classnames.default)("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__ */ (0, react_jsx_runtime.jsxs)(framer_motion.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__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: titleContainerClasses,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "h1",
+				className: "spiffy-tw-text-[--spiffy-colors-text-accent]",
+				children: heading
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductGrid.ProductGrid, {
+			productList: retrievedProducts,
+			productGridVariant,
+			productGridClasses,
+			productCardConfig,
+			merchantShortName,
+			onProductClick
+		})]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'RecommendedProducts', {
+  enumerable: true,
+  get: function () {
+    return RecommendedProducts;
+  }
+});

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

@@ -1,15 +1,12 @@
 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);
+const require_OutlinedStar = require('./OutlinedStar-CC0V_jAK.cjs');
 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 __envive_ai_react_icons_OutlinedStar = require("@envive-ai/react-icons/OutlinedStar");
-__envive_ai_react_icons_OutlinedStar = require_chunk.__toESM(__envive_ai_react_icons_OutlinedStar);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
 const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSuggestionSelect, iconColor }) => {
@@ -21,10 +18,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
@@ -62,7 +58,7 @@ const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSugg
 				onKeyDown: (event) => {
 					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
 				},
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_OutlinedStar.default, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OutlinedStar.OutlinedStar_default, {
 					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-[16px]",
 					fill: iconColor
 				}), highlightMatchingText(result, searchText)]

package/dist/{SearchAutocomplete-CjjL2_lm.js → SearchAutocomplete-DNe193EV.js}

@@ -1,9 +1,9 @@
-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 { t as OutlinedStar_default } from "./OutlinedStar-WWs3gRwt.js";
 import React from "react";
+import { motion } from "framer-motion";
 import classNames from "classnames";
-import OutlinedStar from "@envive-ai/react-icons/OutlinedStar";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
 const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSuggestionSelect, iconColor }) => {
@@ -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
@@ -56,7 +55,7 @@ const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSugg
 				onKeyDown: (event) => {
 					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
 				},
-				children: [/* @__PURE__ */ jsx(OutlinedStar, {
+				children: [/* @__PURE__ */ jsx(OutlinedStar_default, {
 					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-[16px]",
 					fill: iconColor
 				}), highlightMatchingText(result, searchText)]
@@ -66,4 +65,4 @@ const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSugg
 };
 
 //#endregion
-export { SearchAutocomplete };
+export { SearchAutocomplete as t };

package/dist/{SearchFilter-BLi6E9Wx.cjs → SearchFilter-BRtCSuAn.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-DPUaEXiE.cjs');
+const require_ButtonBase = require('./ButtonBase-C44g6llb.cjs');
+const require_ModalSheet = require('./ModalSheet-JZerJZ1T.cjs');
+const require_RadioButtonGroup = require('./RadioButtonGroup-ByzTXNAb.cjs');
+const require_ToggleButton = require('./ToggleButton-Dxk3U1hR.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/{SearchFilter-wHwOym_n.js → SearchFilter-DvJx0b0W.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-8zFBEEaN.js";
+import { t as ButtonBase } from "./ButtonBase-Cjo-fBg2.js";
+import { t as ModalSheet } from "./ModalSheet-C5f5abw1.js";
+import { t as RadioButtonGroup } from "./RadioButtonGroup-YQIxmR7j.js";
+import { t as ToggleButton } from "./ToggleButton-D8--AKKK.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/{SearchInput-BA6bepV_.cjs → SearchInput-CImlqrau.cjs}

@@ -1,26 +1,77 @@
 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_jsx_runtime_Dg2m6dxZ = require('./jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
+const require_TextInput = require('./TextInput-CaynCoDf.cjs');
+const require_colorsConfig = require('./colorsConfig-Dp7w5LPb.cjs');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
-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);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../icons/dist/MagnifyingGlassStarVariant.js
+var import_jsx_runtime$1 = require_jsx_runtime_Dg2m6dxZ.require_jsx_runtime();
+const SvgMagnifyingGlassStarVariant = (props) => /* @__PURE__ */ (0, import_jsx_runtime$1.jsxs)("svg", {
+	width: 23,
+	height: 21,
+	viewBox: "0 0 23 21",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ (0, import_jsx_runtime$1.jsx)("path", {
+			d: "M16.9017 1.07275L17.6915 3.12627C17.82 3.46022 17.8842 3.62719 17.984 3.76764C18.0726 3.89211 18.1813 4.00087 18.3058 4.08938C18.4462 4.18925 18.6132 4.25347 18.9472 4.38191L21.0007 5.17172L18.9472 5.96154C18.6132 6.08998 18.4462 6.1542 18.3058 6.25406C18.1813 6.34257 18.0726 6.45133 17.984 6.57581C17.8842 6.71625 17.82 6.88323 17.6915 7.21717L16.9017 9.27069L16.1119 7.21717C15.9834 6.88323 15.9192 6.71625 15.8194 6.57581C15.7308 6.45133 15.6221 6.34257 15.4976 6.25406C15.3572 6.1542 15.1902 6.08998 14.8563 5.96154L12.8027 5.17172L14.8563 4.38191C15.1902 4.25347 15.3572 4.18925 15.4976 4.08938C15.6221 4.00087 15.7308 3.89211 15.8194 3.76764C15.9192 3.62719 15.9834 3.46022 16.1119 3.12627L16.9017 1.07275Z",
+			fill: "#595959",
+			stroke: "#595959",
+			strokeWidth: .910882,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime$1.jsx)("path", {
+			d: "M11.5954 2.64387C10.5786 1.97247 9.36711 1.56895 8.05921 1.53651C4.34389 1.44434 1.25732 4.38149 1.16515 8.09681C1.07299 11.8121 4.01013 14.8987 7.72546 14.9909C10.9196 15.0701 13.6491 12.9102 14.4105 9.94181",
+			stroke: "#595959",
+			strokeWidth: 1.5,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime$1.jsx)("path", {
+			d: "M13.75 15.7759L16.9274 19.2557",
+			stroke: "#595959",
+			strokeWidth: 1.5,
+			strokeLinecap: "round"
+		})
+	]
+});
+var MagnifyingGlassStarVariant_default = SvgMagnifyingGlassStarVariant;
 
+//#endregion
+//#region ../icons/dist/IconClose.js
+var import_jsx_runtime = require_jsx_runtime_Dg2m6dxZ.require_jsx_runtime();
+const SvgIconClose = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+		cx: 12,
+		cy: 12,
+		r: 12,
+		fill: "#FCFCF9"
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+		d: "M16.167 6L11.5 10.667L6.833 6L5 7.833L9.667 12.5L5 17.167L6.833 19L11.5 14.333L16.167 19L18 17.167L13.333 12.5L18 7.833L16.167 6Z",
+		fill: "currentColor"
+	})]
+});
+var IconClose_default = SvgIconClose;
+
+//#endregion
 //#region src/components/SearchInput/searchInputVariants.ts
 const searchInputVariantClasses = { standard: {
 	searchInputIconColor: "transparent",
 	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"
 } };
@@ -55,7 +106,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_MagnifyingGlassStarVariant.default, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MagnifyingGlassStarVariant_default, {
 					className: value.length > 0 ? magnifyingGlassClassesActive : magnifyingGlassClassesInactive,
 					stroke: iconColor,
 					strokeWidth: "1px"
@@ -87,7 +138,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_IconClose.default, { className: closeButtonIconClassName })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconClose_default, { className: closeButtonIconClassName })
 			})
 		]
 	});