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

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_runtime7 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_runtime7.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_runtime18 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_runtime18.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 };

package/dist/components/SearchFilter/SearchFilterFooter.cjs

@@ -0,0 +1,48 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ButtonBase = require('../ButtonBase/ButtonBase.cjs');
+require('../ButtonBase/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/SearchFilter/SearchFilterFooter.tsx
+const SearchFilterFooter = ({ closeModal, clearAllFilters, filterCount, applyFiltersUnchangedClasses, applyFiltersChangedClasses, hasFiltersChanged }) => {
+	const clearAllButtonEnabled = filterCount > 0;
+	const footerWrapperClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-border-t": true,
+		"spiffy-tw-border-t-[--spiffy-colors-border-light]": true,
+		"spiffy-tw-p-[16px]": true,
+		"spiffy-tw-gap-[16px]": true
+	});
+	const applyFilterButtonClassName = (0, classnames.default)("spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-justify-center spiffy-tw-rounded-[8px] spiffy-tw-w-full", hasFiltersChanged ? applyFiltersChangedClasses : applyFiltersUnchangedClasses);
+	const clearAllButtonClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-row": true,
+		"spiffy-tw-justify-center": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": clearAllButtonEnabled,
+		"spiffy-tw-text-[--spiffy-colors-text-secondary]": !clearAllButtonEnabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: footerWrapperClassName,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+			isDisabled: !hasFiltersChanged,
+			buttonClass: applyFilterButtonClassName,
+			text: "Apply Filters",
+			onClick: closeModal
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+			isDisabled: !clearAllButtonEnabled,
+			buttonClass: clearAllButtonClassName,
+			text: "Clear All",
+			onClick: clearAllFilters
+		})]
+	});
+};
+
+//#endregion
+exports.SearchFilterFooter = SearchFilterFooter;

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime9 from "react/jsx-runtime";
+import { FilterFooterProps } from "@envive-ai/react-hooks/types";
+
+//#region src/components/SearchFilter/SearchFilterFooter.d.ts
+declare const SearchFilterFooter: ({
+  closeModal,
+  clearAllFilters,
+  filterCount,
+  applyFiltersUnchangedClasses,
+  applyFiltersChangedClasses,
+  hasFiltersChanged
+}: FilterFooterProps) => react_jsx_runtime9.JSX.Element;
+//#endregion
+export { SearchFilterFooter };

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

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime19 from "react/jsx-runtime";
+import { FilterFooterProps } from "@envive-ai/react-hooks/types";
+
+//#region src/components/SearchFilter/SearchFilterFooter.d.ts
+declare const SearchFilterFooter: ({
+  closeModal,
+  clearAllFilters,
+  filterCount,
+  applyFiltersUnchangedClasses,
+  applyFiltersChangedClasses,
+  hasFiltersChanged
+}: FilterFooterProps) => react_jsx_runtime19.JSX.Element;
+//#endregion
+export { SearchFilterFooter };

package/dist/components/SearchFilter/SearchFilterFooter.js

@@ -0,0 +1,46 @@
+import { ButtonBase } from "../ButtonBase/ButtonBase.js";
+import "../ButtonBase/index.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/SearchFilterFooter.tsx
+const SearchFilterFooter = ({ closeModal, clearAllFilters, filterCount, applyFiltersUnchangedClasses, applyFiltersChangedClasses, hasFiltersChanged }) => {
+	const clearAllButtonEnabled = filterCount > 0;
+	const footerWrapperClassName = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-border-t": true,
+		"spiffy-tw-border-t-[--spiffy-colors-border-light]": true,
+		"spiffy-tw-p-[16px]": true,
+		"spiffy-tw-gap-[16px]": true
+	});
+	const applyFilterButtonClassName = classNames("spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-justify-center spiffy-tw-rounded-[8px] spiffy-tw-w-full", hasFiltersChanged ? applyFiltersChangedClasses : applyFiltersUnchangedClasses);
+	const clearAllButtonClassName = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-row": true,
+		"spiffy-tw-justify-center": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": clearAllButtonEnabled,
+		"spiffy-tw-text-[--spiffy-colors-text-secondary]": !clearAllButtonEnabled
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: footerWrapperClassName,
+		children: [/* @__PURE__ */ jsx(ButtonBase, {
+			isDisabled: !hasFiltersChanged,
+			buttonClass: applyFilterButtonClassName,
+			text: "Apply Filters",
+			onClick: closeModal
+		}), /* @__PURE__ */ jsx(ButtonBase, {
+			isDisabled: !clearAllButtonEnabled,
+			buttonClass: clearAllButtonClassName,
+			text: "Clear All",
+			onClick: clearAllFilters
+		})]
+	});
+};
+
+//#endregion
+export { SearchFilterFooter };

package/dist/components/SearchFilter/SearchFilterHeader.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#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_Typography.Typography, {
+			variant: "body2",
+			className: "spiffy-tw-font-medium",
+			children: [
+				"Filters (",
+				productCount,
+				")"
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			onClick: closeModal,
+			className: "spiffy-tw-p-2",
+			type: "button",
+			"aria-label": "Open Filter Menu",
+			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
+exports.SearchFilterHeader = SearchFilterHeader;

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

@@ -0,0 +1,12 @@
+import { SearchFilterHeaderProps } from "./types.cjs";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/SearchFilterHeader.d.ts
+declare const SearchFilterHeader: ({
+  closeModal,
+  productCount,
+  headerClassName,
+  filterCloseIconVariant
+}: SearchFilterHeaderProps) => react_jsx_runtime8.JSX.Element;
+//#endregion
+export { SearchFilterHeader };

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

@@ -0,0 +1,12 @@
+import { SearchFilterHeaderProps } from "./types.js";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/SearchFilterHeader.d.ts
+declare const SearchFilterHeader: ({
+  closeModal,
+  productCount,
+  headerClassName,
+  filterCloseIconVariant
+}: SearchFilterHeaderProps) => react_jsx_runtime16.JSX.Element;
+//#endregion
+export { SearchFilterHeader };

package/dist/components/SearchFilter/SearchFilterHeader.js

@@ -0,0 +1,40 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#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(Typography, {
+			variant: "body2",
+			className: "spiffy-tw-font-medium",
+			children: [
+				"Filters (",
+				productCount,
+				")"
+			]
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: closeModal,
+			className: "spiffy-tw-p-2",
+			type: "button",
+			"aria-label": "Open Filter Menu",
+			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 { SearchFilterHeader };

package/dist/components/SearchFilter/SearchFilterItem.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("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)("button", {
+		type: "button",
+		role: "option",
+		"aria-selected": isSelected,
+		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2",
+		onClick: () => onSelectFilterItem(filterItem),
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				onSelectFilterItem(filterItem);
+			}
+		},
+		onKeyUp: (event) => {
+			if (event.key === " ") event.preventDefault();
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+			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-h-2 spiffy-tw-w-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
+exports.SearchFilterItem = SearchFilterItem;

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

@@ -0,0 +1,13 @@
+import { SearchFilterItemProps } from "./types.cjs";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/SearchFilterItem.d.ts
+declare const SearchFilterItem: ({
+  filterItem,
+  onSelectFilterItem,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor
+}: SearchFilterItemProps) => react_jsx_runtime10.JSX.Element;
+//#endregion
+export { SearchFilterItem };

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

@@ -0,0 +1,13 @@
+import { SearchFilterItemProps } from "./types.js";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
+
+//#region src/components/SearchFilter/SearchFilterItem.d.ts
+declare const SearchFilterItem: ({
+  filterItem,
+  onSelectFilterItem,
+  radioButtonFillColor,
+  radioButtonHoverColor,
+  radioButtonUncheckedBorderColor
+}: SearchFilterItemProps) => react_jsx_runtime17.JSX.Element;
+//#endregion
+export { SearchFilterItem };

package/dist/components/SearchFilter/SearchFilterItem.js

@@ -0,0 +1,39 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.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("button", {
+		type: "button",
+		role: "option",
+		"aria-selected": isSelected,
+		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2",
+		onClick: () => onSelectFilterItem(filterItem),
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				onSelectFilterItem(filterItem);
+			}
+		},
+		onKeyUp: (event) => {
+			if (event.key === " ") event.preventDefault();
+		},
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "body3",
+			children: displayName
+		}), /* @__PURE__ */ jsx("div", {
+			className: radioClasses,
+			children: isSelected && /* @__PURE__ */ jsx("div", { className: classNames("spiffy-tw-h-2 spiffy-tw-w-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
+export { SearchFilterItem };