@envive-ai/react-toolkit 0.2.13 → 0.3.0

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

@@ -0,0 +1,2 @@
+import { RadioButton } from "./RadioButton.cjs";
+export { RadioButton };

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

@@ -0,0 +1,2 @@
+import { RadioButton } from "./RadioButton.js";
+export { RadioButton };

package/dist/components/RadioButton/index.js

@@ -1,4 +1,3 @@
-import "../../Typography-xehJH05l.js";
-import { t as RadioButton } from "../../RadioButton-C1w7N40t.js";
+import { RadioButton } from "./RadioButton.js";
 
 export { RadioButton };

package/dist/{RadioButtonGroup-BhZloLH6.cjs → components/RadioButtonGroup/RadioButtonGroup.cjs}

@@ -1,7 +1,8 @@
-const require_chunk = require('./chunk-CbDLau6x.cjs');
-const require_RadioButton = require('./RadioButton-D4TPq1Aa.cjs');
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_RadioButton = require('../RadioButton/RadioButton.cjs');
+require('../RadioButton/index.cjs');
 let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -37,15 +38,5 @@ const RadioButtonGroup = ({ name, options, fillColor, hoverColor, uncheckedBorde
 };
 
 //#endregion
-Object.defineProperty(exports, 'RadioButtonGroup', {
-  enumerable: true,
-  get: function () {
-    return RadioButtonGroup;
-  }
-});
-Object.defineProperty(exports, 'SPIFFY_RADIO_BUTTON_GROUP_CLASS', {
-  enumerable: true,
-  get: function () {
-    return SPIFFY_RADIO_BUTTON_GROUP_CLASS;
-  }
-});
+exports.RadioButtonGroup = RadioButtonGroup;
+exports.SPIFFY_RADIO_BUTTON_GROUP_CLASS = SPIFFY_RADIO_BUTTON_GROUP_CLASS;

package/dist/components/RadioButtonGroup/{index-CiljmnzJ.d.cts → RadioButtonGroup.d.cts}

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
+import { TestProps } from "../../hooks/dist/types/test-types.cjs";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.d.ts
 declare const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";
@@ -31,6 +31,6 @@ declare const RadioButtonGroup: ({
   gap,
   textButtonGap,
   onChange
-}: RadioButtonGroupProps) => react_jsx_runtime6.JSX.Element;
+}: RadioButtonGroupProps) => react_jsx_runtime31.JSX.Element;
 //#endregion
 export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/components/RadioButtonGroup/{index-DdyMuFCX.d.ts → RadioButtonGroup.d.ts}

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime21 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
+import { TestProps } from "../../hooks/dist/types/test-types.js";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.d.ts
 declare const SPIFFY_RADIO_BUTTON_GROUP_CLASS = "spiffy-radio-button-group-class";
@@ -31,6 +31,6 @@ declare const RadioButtonGroup: ({
   gap,
   textButtonGap,
   onChange
-}: RadioButtonGroupProps) => react_jsx_runtime21.JSX.Element;
+}: RadioButtonGroupProps) => react_jsx_runtime25.JSX.Element;
 //#endregion
 export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/{RadioButtonGroup-BWQ4-m2M.js → components/RadioButtonGroup/RadioButtonGroup.js}

@@ -1,4 +1,5 @@
-import { t as RadioButton } from "./RadioButton-C1w7N40t.js";
+import { RadioButton } from "../RadioButton/RadioButton.js";
+import "../RadioButton/index.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 
@@ -35,4 +36,4 @@ const RadioButtonGroup = ({ name, options, fillColor, hoverColor, uncheckedBorde
 };
 
 //#endregion
-export { SPIFFY_RADIO_BUTTON_GROUP_CLASS as n, RadioButtonGroup as t };
+export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/components/RadioButtonGroup/index.cjs

@@ -1,6 +1,4 @@
-require('../../Typography-Csg-nd_w.cjs');
-require('../../RadioButton-D4TPq1Aa.cjs');
-const require_RadioButtonGroup = require('../../RadioButtonGroup-BhZloLH6.cjs');
+const require_RadioButtonGroup = require('./RadioButtonGroup.cjs');
 
 exports.RadioButtonGroup = require_RadioButtonGroup.RadioButtonGroup;
 exports.SPIFFY_RADIO_BUTTON_GROUP_CLASS = require_RadioButtonGroup.SPIFFY_RADIO_BUTTON_GROUP_CLASS;

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

@@ -0,0 +1,2 @@
+import { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS } from "./RadioButtonGroup.cjs";
+export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

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

@@ -0,0 +1,2 @@
+import { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS } from "./RadioButtonGroup.js";
+export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/components/RadioButtonGroup/index.js

@@ -1,5 +1,3 @@
-import "../../Typography-xehJH05l.js";
-import "../../RadioButton-C1w7N40t.js";
-import { n as SPIFFY_RADIO_BUTTON_GROUP_CLASS, t as RadioButtonGroup } from "../../RadioButtonGroup-BWQ4-m2M.js";
+import { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS } from "./RadioButtonGroup.js";
 
 export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/{RecommendedProducts-Cy-1szYc.cjs → components/RecommendedProducts/RecommendedProducts.cjs}

@@ -1,9 +1,11 @@
-const require_chunk = require('./chunk-CbDLau6x.cjs');
-const require_Typography = require('./Typography-Csg-nd_w.cjs');
-const require_ProductGrid = require('./ProductGrid-Ct2DvLGf.cjs');
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+const require_ProductGrid = require('../ProductGrid/ProductGrid.cjs');
+require('../ProductGrid/index.cjs');
 let framer_motion = require("framer-motion");
 let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/RecommendedProducts/RecommendedProducts.tsx
@@ -48,9 +50,4 @@ const RecommendedProducts = ({ retrievedProducts, merchantShortName, productCard
 };
 
 //#endregion
-Object.defineProperty(exports, 'RecommendedProducts', {
-  enumerable: true,
-  get: function () {
-    return RecommendedProducts;
-  }
-});
+exports.RecommendedProducts = RecommendedProducts;

package/dist/components/RecommendedProducts/{index-DlbCfGof.d.ts → RecommendedProducts.d.cts}

@@ -1,5 +1,5 @@
-import { SearchResponseProductAttributes } from "@envive-ai/react-hooks/application/models";
-import { ProductCardConfig, ProductGridVariant } from "@envive-ai/react-hooks/contexts/types";
+import { SearchResponseProductAttributes } from "../../hooks/dist/application/models/api/response.cjs";
+import { ProductCardConfig, ProductGridVariant } from "../../hooks/dist/contexts/types.cjs";
 
 //#region src/components/RecommendedProducts/RecommendedProducts.d.ts
 interface RecommendedProductsProps {

package/dist/components/RecommendedProducts/{index-BFM83Qu3.d.cts → RecommendedProducts.d.ts}

@@ -1,5 +1,5 @@
-import { SearchResponseProductAttributes } from "@envive-ai/react-hooks/application/models";
-import { ProductCardConfig, ProductGridVariant } from "@envive-ai/react-hooks/contexts/types";
+import { SearchResponseProductAttributes } from "../../hooks/dist/application/models/api/response.js";
+import { ProductCardConfig, ProductGridVariant } from "../../hooks/dist/contexts/types.js";
 
 //#region src/components/RecommendedProducts/RecommendedProducts.d.ts
 interface RecommendedProductsProps {

package/dist/{RecommendedProducts-DooGvLFT.js → components/RecommendedProducts/RecommendedProducts.js}

@@ -1,5 +1,7 @@
-import { t as Typography } from "./Typography-xehJH05l.js";
-import { t as ProductGrid } from "./ProductGrid-DukHo_KY.js";
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { ProductGrid } from "../ProductGrid/ProductGrid.js";
+import "../ProductGrid/index.js";
 import { motion } from "framer-motion";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -46,4 +48,4 @@ const RecommendedProducts = ({ retrievedProducts, merchantShortName, productCard
 };
 
 //#endregion
-export { RecommendedProducts as t };
+export { RecommendedProducts };

package/dist/components/RecommendedProducts/index.cjs

@@ -1,11 +1,5 @@
 'use client';
 
-require('../../formatPrice-CyfkjZ3R.cjs');
-require('../../Typography-Csg-nd_w.cjs');
-require('../../ImageWithFallback-BiBjNK-9.cjs');
-require('../../ProductCard-C3seoFWE.cjs');
-require('../../Spinner-CUrXDajS.cjs');
-require('../../ProductGrid-Ct2DvLGf.cjs');
-const require_RecommendedProducts = require('../../RecommendedProducts-Cy-1szYc.cjs');
+const require_RecommendedProducts = require('./RecommendedProducts.cjs');
 
 exports.RecommendedProducts = require_RecommendedProducts.RecommendedProducts;

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

@@ -0,0 +1,2 @@
+import { RecommendedProducts } from "./RecommendedProducts.cjs";
+export { RecommendedProducts };

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

@@ -0,0 +1,2 @@
+import { RecommendedProducts } from "./RecommendedProducts.js";
+export { RecommendedProducts };

package/dist/components/RecommendedProducts/index.js

@@ -1,11 +1,5 @@
 'use client';
 
-import "../../formatPrice-DexQu2aZ.js";
-import "../../Typography-xehJH05l.js";
-import "../../ImageWithFallback-_QZT0EKI.js";
-import "../../ProductCard-ChitHvuc.js";
-import "../../Spinner-CDDFWySo.js";
-import "../../ProductGrid-DukHo_KY.js";
-import { t as RecommendedProducts } from "../../RecommendedProducts-DooGvLFT.js";
+import { RecommendedProducts } from "./RecommendedProducts.js";
 
 export { RecommendedProducts };

package/dist/{SearchAutocomplete-C1XH39Xx.cjs → components/SearchAutocomplete/SearchAutocomplete.cjs}

@@ -1,13 +1,14 @@
-const require_chunk = require('./chunk-CbDLau6x.cjs');
-const require_Typography = require('./Typography-Csg-nd_w.cjs');
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
 let react = require("react");
-react = require_chunk.__toESM(react);
+react = require_rolldown_runtime.__toESM(react);
 let framer_motion = require("framer-motion");
 let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_icons_OutlinedStar = require("@envive-ai/react-icons/OutlinedStar");
-__envive_ai_react_icons_OutlinedStar = require_chunk.__toESM(__envive_ai_react_icons_OutlinedStar);
+__envive_ai_react_icons_OutlinedStar = require_rolldown_runtime.__toESM(__envive_ai_react_icons_OutlinedStar);
 
 //#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
 const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSuggestionSelect, iconColor }) => {
@@ -69,9 +70,4 @@ const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSugg
 };
 
 //#endregion
-Object.defineProperty(exports, 'SearchAutocomplete', {
-  enumerable: true,
-  get: function () {
-    return SearchAutocomplete;
-  }
-});
+exports.SearchAutocomplete = SearchAutocomplete;

package/dist/components/SearchAutocomplete/{index-OVMqT8K4.d.cts → SearchAutocomplete.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/components/SearchAutocomplete/SearchAutocomplete.d.ts
 interface GlobalSearchAutocompleteProps {
@@ -16,6 +16,6 @@ declare const SearchAutocomplete: ({
   searchText,
   onSuggestionSelect,
   iconColor
-}: GlobalSearchAutocompleteProps) => react_jsx_runtime10.JSX.Element;
+}: GlobalSearchAutocompleteProps) => react_jsx_runtime4.JSX.Element;
 //#endregion
 export { SearchAutocomplete };

package/dist/components/SearchAutocomplete/{index-BBUrFTl5.d.ts → SearchAutocomplete.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/components/SearchAutocomplete/SearchAutocomplete.d.ts
 interface GlobalSearchAutocompleteProps {
@@ -16,6 +16,6 @@ declare const SearchAutocomplete: ({
   searchText,
   onSuggestionSelect,
   iconColor
-}: GlobalSearchAutocompleteProps) => react_jsx_runtime14.JSX.Element;
+}: GlobalSearchAutocompleteProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 export { SearchAutocomplete };

package/dist/{SearchAutocomplete-CuuN0cDu.js → components/SearchAutocomplete/SearchAutocomplete.js}

@@ -1,4 +1,5 @@
-import { t as Typography } from "./Typography-xehJH05l.js";
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
 import React from "react";
 import { motion } from "framer-motion";
 import classNames from "classnames";
@@ -65,4 +66,4 @@ const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSugg
 };
 
 //#endregion
-export { SearchAutocomplete as t };
+export { SearchAutocomplete };

package/dist/components/SearchAutocomplete/index.cjs

@@ -1,4 +1,3 @@
-require('../../Typography-Csg-nd_w.cjs');
-const require_SearchAutocomplete = require('../../SearchAutocomplete-C1XH39Xx.cjs');
+const require_SearchAutocomplete = require('./SearchAutocomplete.cjs');
 
 exports.SearchAutocomplete = require_SearchAutocomplete.SearchAutocomplete;

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

@@ -0,0 +1,2 @@
+import { SearchAutocomplete } from "./SearchAutocomplete.cjs";
+export { SearchAutocomplete };

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

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

package/dist/components/SearchAutocomplete/index.js

@@ -1,4 +1,3 @@
-import "../../Typography-xehJH05l.js";
-import { t as SearchAutocomplete } from "../../SearchAutocomplete-CuuN0cDu.js";
+import { SearchAutocomplete } from "./SearchAutocomplete.js";
 
 export { SearchAutocomplete };

package/dist/components/SearchFilter/SearchFilter.cjs

@@ -0,0 +1,134 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Accordion = require('../Accordion/Accordion.cjs');
+require('../Accordion/index.cjs');
+const require_ModalSheet = require('../ModalSheet/ModalSheet.cjs');
+require('../ModalSheet/index.cjs');
+const require_RadioButtonGroup = require('../RadioButtonGroup/RadioButtonGroup.cjs');
+require('../RadioButtonGroup/index.cjs');
+const require_SearchFilterHeader = require('./SearchFilterHeader.cjs');
+const require_useHasFilterStateChanged = require('./useHasFilterStateChanged.cjs');
+const require_utils = require('./utils.cjs');
+const require_ToggleButton = require('../ToggleButton/ToggleButton.cjs');
+require('../ToggleButton/index.cjs');
+const require_SearchFilterFooter = require('./SearchFilterFooter.cjs');
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/SearchFilter/SearchFilter.tsx
+const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
+	const filterTitle = filter.displayName;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
+		title: filterTitle,
+		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, {
+	label: filterItem.displayName,
+	secondaryLabel: `(${filterItem.productCount})`,
+	isSelected: filterItem.isSelected,
+	onClick: () => selectFilterItem({
+		filterId,
+		filterItemId: filterItem.filterItemId,
+		isSelected: !filterItem.isSelected,
+		displayName: filterItem.displayName
+	}),
+	variant: "default"
+});
+const Filter = ({ filter, selectFilterItem }) => {
+	const filterContentClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-wrap": true,
+		"spiffy-tw-gap-[8px]": true,
+		"spiffy-tw-pb-[1px]": true
+	});
+	const selectedFilterItems = require_utils.getSelectedFilterItemsCount(filter);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
+		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 }) => {
+	const closeModal = (0, react.useCallback)(() => setIsOpen(false), [setIsOpen]);
+	const filterCount = require_utils.getTotalSelectedFilterItemsCount(filters);
+	const hasFiltersChanged = require_useHasFilterStateChanged.useHasFilterStateChanged(filters, isOpen);
+	const filterWrapperClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-gap-[16px]": true,
+		"spiffy-tw-px-[24px]": true,
+		"spiffy-tw-py-[16px]": true,
+		"spiffy-tw-max-h-screen": true,
+		"spiffy-tw-overflow-y-auto": true
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalSheet.ModalSheet, {
+		isOpen,
+		closeModal,
+		headerProps: {
+			headerContent: headerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchFilterHeader.SearchFilterHeader, {
+				closeModal,
+				productCount,
+				headerClassName: headerClassName ?? "",
+				filterCloseIconVariant
+			}),
+			chevronColor: "#000"
+		},
+		footerProps: { footerContent: footerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchFilterFooter.SearchFilterFooter, {
+			closeModal,
+			clearAllFilters,
+			filterCount,
+			hasFiltersChanged,
+			applyFiltersUnchangedClasses,
+			applyFiltersChangedClasses
+		}) },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: filterWrapperClassName,
+			children: filters.filter((filter) => filter.displayName !== "").map((filter) => {
+				if (filter.filterId === "sort") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortFilter, {
+					filter,
+					selectFilterItem,
+					radioButtonFillColor,
+					radioButtonHoverColor,
+					radioButtonUncheckedBorderColor
+				}, filter.filterId);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Filter, {
+					filter,
+					selectFilterItem
+				}, filter.filterId);
+			})
+		})
+	});
+};
+
+//#endregion
+exports.SearchFilter = SearchFilter;

package/dist/components/SearchFilter/SearchFilter.d.cts

@@ -0,0 +1,23 @@
+import { SearchFilterProps } from "./types.cjs";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/SearchFilter.d.ts
+declare const SearchFilter: ({
+  filters,
+  productCount,
+  selectFilterItem,
+  clearAllFilters,
+  isOpen,
+  setIsOpen,
+  applyFiltersUnchangedClasses,
+  applyFiltersChangedClasses,
+  headerContent,
+  footerContent,
+  headerClassName,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor,
+  filterCloseIconVariant
+}: SearchFilterProps) => react_jsx_runtime22.JSX.Element;
+//#endregion
+export { SearchFilter };

package/dist/components/SearchFilter/SearchFilter.d.ts

@@ -0,0 +1,23 @@
+import { SearchFilterProps } from "./types.js";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/SearchFilter.d.ts
+declare const SearchFilter: ({
+  filters,
+  productCount,
+  selectFilterItem,
+  clearAllFilters,
+  isOpen,
+  setIsOpen,
+  applyFiltersUnchangedClasses,
+  applyFiltersChangedClasses,
+  headerContent,
+  footerContent,
+  headerClassName,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor,
+  filterCloseIconVariant
+}: SearchFilterProps) => react_jsx_runtime3.JSX.Element;
+//#endregion
+export { SearchFilter };

package/dist/components/SearchFilter/SearchFilter.js

@@ -0,0 +1,132 @@
+import { Accordion } from "../Accordion/Accordion.js";
+import "../Accordion/index.js";
+import { ModalSheet } from "../ModalSheet/ModalSheet.js";
+import "../ModalSheet/index.js";
+import { RadioButtonGroup } from "../RadioButtonGroup/RadioButtonGroup.js";
+import "../RadioButtonGroup/index.js";
+import { SearchFilterHeader } from "./SearchFilterHeader.js";
+import { useHasFilterStateChanged } from "./useHasFilterStateChanged.js";
+import { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from "./utils.js";
+import { ToggleButton } from "../ToggleButton/ToggleButton.js";
+import "../ToggleButton/index.js";
+import { SearchFilterFooter } from "./SearchFilterFooter.js";
+import { useCallback } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/SearchFilter.tsx
+const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
+	const filterTitle = filter.displayName;
+	return /* @__PURE__ */ jsx(Accordion, {
+		title: filterTitle,
+		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, {
+	label: filterItem.displayName,
+	secondaryLabel: `(${filterItem.productCount})`,
+	isSelected: filterItem.isSelected,
+	onClick: () => selectFilterItem({
+		filterId,
+		filterItemId: filterItem.filterItemId,
+		isSelected: !filterItem.isSelected,
+		displayName: filterItem.displayName
+	}),
+	variant: "default"
+});
+const Filter = ({ filter, selectFilterItem }) => {
+	const filterContentClassName = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-wrap": true,
+		"spiffy-tw-gap-[8px]": true,
+		"spiffy-tw-pb-[1px]": true
+	});
+	const selectedFilterItems = getSelectedFilterItemsCount(filter);
+	return /* @__PURE__ */ jsx(Accordion, {
+		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 }) => {
+	const closeModal = useCallback(() => setIsOpen(false), [setIsOpen]);
+	const filterCount = getTotalSelectedFilterItemsCount(filters);
+	const hasFiltersChanged = useHasFilterStateChanged(filters, isOpen);
+	const filterWrapperClassName = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-gap-[16px]": true,
+		"spiffy-tw-px-[24px]": true,
+		"spiffy-tw-py-[16px]": true,
+		"spiffy-tw-max-h-screen": true,
+		"spiffy-tw-overflow-y-auto": true
+	});
+	return /* @__PURE__ */ jsx(ModalSheet, {
+		isOpen,
+		closeModal,
+		headerProps: {
+			headerContent: headerContent || /* @__PURE__ */ jsx(SearchFilterHeader, {
+				closeModal,
+				productCount,
+				headerClassName: headerClassName ?? "",
+				filterCloseIconVariant
+			}),
+			chevronColor: "#000"
+		},
+		footerProps: { footerContent: footerContent || /* @__PURE__ */ jsx(SearchFilterFooter, {
+			closeModal,
+			clearAllFilters,
+			filterCount,
+			hasFiltersChanged,
+			applyFiltersUnchangedClasses,
+			applyFiltersChangedClasses
+		}) },
+		children: /* @__PURE__ */ jsx("div", {
+			className: filterWrapperClassName,
+			children: filters.filter((filter) => filter.displayName !== "").map((filter) => {
+				if (filter.filterId === "sort") return /* @__PURE__ */ jsx(SortFilter, {
+					filter,
+					selectFilterItem,
+					radioButtonFillColor,
+					radioButtonHoverColor,
+					radioButtonUncheckedBorderColor
+				}, filter.filterId);
+				return /* @__PURE__ */ jsx(Filter, {
+					filter,
+					selectFilterItem
+				}, filter.filterId);
+			})
+		})
+	});
+};
+
+//#endregion
+export { SearchFilter };