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

package/dist/ModalSheet-JZerJZ1T.cjs

@@ -1,308 +0,0 @@
-const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_AnimatedChevron = require('./AnimatedChevron-CPW5KPLr.cjs');
-let react = require("react");
-let framer_motion = require("framer-motion");
-let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
-let __envive_ai_react_hooks_hooks_IsSmallScreen = require("@envive-ai/react-hooks/hooks/IsSmallScreen");
-
-//#region src/components/ModalSheet/mobile/mobileHeader.tsx
-const modalSheetVariants$1 = { primary: {
-	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
-	"spiffy-tw-text-[--spiffy-colors-text-light]": true
-} };
-const ModalSheetMobileHeader = ({ headerVariant = "primary", headerContent, handleHeaderClick, chevronColor }) => {
-	const animationKey = (0, framer_motion.useMotionValue)(-1);
-	const headerClassName = (0, classnames.default)({
-		"spiffy-modal-sheet-header": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-items-center": true,
-		"spiffy-tw-justify-between": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-pt-[16px]": true,
-		"spiffy-tw-shadow-[0px_-8px_16px_0px_#0000001A]": true,
-		...modalSheetVariants$1[headerVariant]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
-		className: headerClassName,
-		onTouchStart: handleHeaderClick,
-		onMouseDown: handleHeaderClick,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AnimatedChevron.AnimatedChevron, {
-			animationKey,
-			chevronColor
-		}), headerContent]
-	});
-};
-
-//#endregion
-//#region src/components/ModalSheet/mobile/index.tsx
-const ModalSheetMobile = ({ children, isOpen, closeModal, mobileFullHeight = 180, animationDuration, headerProps, footerProps }) => {
-	const [isHidden, setIsHidden] = (0, react.useState)(isOpen ? "block" : "none");
-	const [bottom, setBottom] = (0, react.useState)(isOpen ? 0 : 0 - mobileFullHeight);
-	const [overlayOpacity, setOverlayOpacity] = (0, react.useState)(isOpen ? 1 : 0);
-	(0, react.useEffect)(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setBottom(isOpen ? 0 : 0 - mobileFullHeight);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [mobileFullHeight, isOpen]);
-	const overlayClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-overlay": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-inset-0": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-left-[0]": true,
-		"spiffy-tw-right-[0]": true,
-		"spiffy-tw-bg-black/30": true,
-		"spiffy-tw-z-[100]": true
-	});
-	const modalClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet": true,
-		"spiffy-modal-sheet-open": isOpen,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-overflow-y-auto": true,
-		"spiffy-tw-shadow-lg": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-bg-white": true,
-		"spiffy-tw-border-box": true,
-		"spiffy-tw-rounded-t-[16px]": true,
-		"spiffy-tw-h-[89%]": true,
-		"spiffy-tw-max-h-[89%]": true
-	});
-	const contentClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-content": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-w-full": true,
-		"spiffy-tw-h-full": true
-	});
-	const headerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-[0px]": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-bottom-[0px]": true,
-		"spiffy-modal-sheet-footer": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	}, footerClassName);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		className: overlayClassNames,
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-			role: "dialog",
-			className: modalClassNames,
-			initial: {
-				bottom,
-				display: isHidden
-			},
-			animate: {
-				bottom,
-				display: isHidden
-			},
-			exit: {
-				bottom,
-				display: isHidden
-			},
-			transition: {
-				duration: animationDuration,
-				ease: "easeIn"
-			},
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetMobileHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							handleHeaderClick: closeModal,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: footerClassNames,
-						children: footerContent
-					})
-				]
-			})
-		})
-	}) });
-};
-
-//#endregion
-//#region src/components/ModalSheet/desktop/desktopHeader.tsx
-const modalSheetVariants = { primary: {
-	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
-	"spiffy-tw-text-[--spiffy-colors-text-light]": true
-} };
-const ModalSheetDesktopHeader = ({ headerVariant = "primary", headerContent }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, classnames.default)({
-			"spiffy-modal-sheet-header": true,
-			"spiffy-tw-flex": true,
-			"spiffy-tw-items-center": true,
-			"spiffy-tw-justify-between": true,
-			"spiffy-tw-w-full": true,
-			...modalSheetVariants[headerVariant]
-		}),
-		children: headerContent
-	});
-};
-
-//#endregion
-//#region src/components/ModalSheet/desktop/index.tsx
-const ModalSheetDesktop = ({ children, isOpen, closeModal, desktopWidth = 512, animationDuration, headerProps, footerProps, showOverlay = false }) => {
-	const [isHidden, setIsHidden] = (0, react.useState)(isOpen ? "block" : "none");
-	const [right, setRight] = (0, react.useState)(isOpen ? 0 : 0 - desktopWidth);
-	const [overlayOpacity, setOverlayOpacity] = (0, react.useState)(0);
-	(0, react.useEffect)(() => {
-		setIsHidden(isOpen ? "block" : "none");
-		setRight(isOpen ? 0 : 0 - desktopWidth);
-		setOverlayOpacity(isOpen ? 1 : 0);
-	}, [desktopWidth, isOpen]);
-	const overlayClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-overlay": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-inset-0": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-left-[0]": true,
-		"spiffy-tw-right-[0]": true,
-		"spiffy-tw-z-[2147483647]": true,
-		"spiffy-tw-bg-black/30": showOverlay
-	});
-	const modalClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet": true,
-		"spiffy-modal-sheet-open": isOpen,
-		"spiffy-tw-max-h-full": true,
-		"spiffy-tw-h-screen": true,
-		"spiffy-tw-w-[512px]": true,
-		"spiffy-tw-shadow-lg": true,
-		"spiffy-tw-top-[0]": true,
-		"spiffy-tw-bottom-[0]": true,
-		"spiffy-tw-fixed": true,
-		"spiffy-tw-bg-white": true,
-		"spiffy-tw-border-box": true
-	});
-	const contentClassNames = (0, classnames.default)({
-		"spiffy-modal-sheet-content": true,
-		"spiffy-tw-overflow-y-auto": true,
-		"spiffy-tw-overflow-x-hidden": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-h-full": true,
-		"spiffy-tw-w-full": true
-	});
-	const headerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-top-0": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	});
-	const { footerContent, footerClassName } = footerProps || {};
-	const footerClassNames = (0, classnames.default)({
-		"spiffy-tw-sticky": true,
-		"spiffy-tw-bottom-0": true,
-		"spiffy-modal-sheet-footer": true,
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true
-	}, footerClassName);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-		className: overlayClassNames,
-		initial: {
-			opacity: 0,
-			display: "none"
-		},
-		animate: {
-			opacity: overlayOpacity,
-			display: isHidden
-		},
-		onClick: closeModal,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
-			role: "dialog",
-			className: modalClassNames,
-			initial: {
-				right,
-				display: isHidden
-			},
-			animate: {
-				right,
-				display: isHidden
-			},
-			exit: {
-				right,
-				display: isHidden
-			},
-			transition: {
-				duration: animationDuration,
-				ease: "easeIn"
-			},
-			style: { width: desktopWidth },
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: contentClassNames,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: headerClassNames,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetDesktopHeader, {
-							headerContent: headerProps.headerContent,
-							headerVariant: headerProps?.headerVariant,
-							chevronColor: "#000"
-						})
-					}),
-					children,
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "spiffy-tw-flex-grow" }),
-					footerContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: footerClassNames,
-						children: footerContent
-					})
-				]
-			})
-		})
-	}) });
-};
-
-//#endregion
-//#region src/components/ModalSheet/ModalSheet.tsx
-const ANIMATION_DURATION = .3;
-const ModalSheet = ({ children, isOpen, closeModal, animationDuration = ANIMATION_DURATION, desktopWidth = 512, headerProps, footerProps }) => {
-	return (0, __envive_ai_react_hooks_hooks_IsSmallScreen.useIsSmallScreen)() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetMobile, {
-		isOpen,
-		closeModal,
-		desktopWidth,
-		animationDuration,
-		headerProps,
-		footerProps,
-		children
-	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetDesktop, {
-		isOpen,
-		closeModal,
-		desktopWidth,
-		animationDuration,
-		headerProps,
-		footerProps,
-		children
-	});
-};
-
-//#endregion
-Object.defineProperty(exports, 'ModalSheet', {
-  enumerable: true,
-  get: function () {
-    return ModalSheet;
-  }
-});

package/dist/OutlinedStar-CC0V_jAK.cjs

@@ -1,26 +0,0 @@
-const require_jsx_runtime_Dg2m6dxZ = require('./jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
-
-//#region ../icons/dist/OutlinedStar.js
-var import_jsx_runtime = require_jsx_runtime_Dg2m6dxZ.require_jsx_runtime();
-const SvgOutlinedStar = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-	width: 10,
-	height: 10,
-	viewBox: "0 0 10 10",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-		d: "M5 1L5.30785 2.36664C5.56897 3.52576 6.4742 4.43104 7.63336 4.69216L9 5L7.63336 5.30784C6.4742 5.56896 5.56897 6.47416 5.30785 7.63336L5 9L4.69215 7.63336C4.43103 6.47416 3.5258 5.56896 2.36662 5.30784L1 5L2.36662 4.69216C3.5258 4.43104 4.43103 3.52584 4.69215 2.36664L5 1Z",
-		strokeWidth: .75,
-		strokeLinejoin: "round"
-	})
-});
-var OutlinedStar_default = SvgOutlinedStar;
-
-//#endregion
-Object.defineProperty(exports, 'OutlinedStar_default', {
-  enumerable: true,
-  get: function () {
-    return OutlinedStar_default;
-  }
-});

package/dist/OutlinedStar-WWs3gRwt.js

@@ -1,21 +0,0 @@
-import { t as require_jsx_runtime } from "./jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
-
-//#region ../icons/dist/OutlinedStar.js
-var import_jsx_runtime = require_jsx_runtime();
-const SvgOutlinedStar = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
-	width: 10,
-	height: 10,
-	viewBox: "0 0 10 10",
-	fill: "none",
-	xmlns: "http://www.w3.org/2000/svg",
-	...props,
-	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-		d: "M5 1L5.30785 2.36664C5.56897 3.52576 6.4742 4.43104 7.63336 4.69216L9 5L7.63336 5.30784C6.4742 5.56896 5.56897 6.47416 5.30785 7.63336L5 9L4.69215 7.63336C4.43103 6.47416 3.5258 5.56896 2.36662 5.30784L1 5L2.36662 4.69216C3.5258 4.43104 4.43103 3.52584 4.69215 2.36664L5 1Z",
-		strokeWidth: .75,
-		strokeLinejoin: "round"
-	})
-});
-var OutlinedStar_default = SvgOutlinedStar;
-
-//#endregion
-export { OutlinedStar_default as t };

package/dist/SearchFilter-BRtCSuAn.cjs

@@ -1,301 +0,0 @@
-const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-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");
-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 }) => {
-	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
-//#region src/components/SearchFilter/useHasFilterStateChanged.tsx
-const useHasFilterStateChanged = (filters, isOpen) => {
-	const [initialFilterStates, setInitialFilterStates] = (0, react.useState)({});
-	const currentFilterStates = (0, react.useMemo)(() => {
-		const states = {};
-		filters.forEach((filter) => {
-			filter.items.forEach((item) => {
-				states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
-			});
-		});
-		return states;
-	}, [filters]);
-	const hasFiltersChanged = (0, react.useMemo)(() => {
-		if (Object.keys(initialFilterStates).length === 0) return false;
-		return Object.keys(currentFilterStates).some((key) => currentFilterStates[key] !== initialFilterStates[key]);
-	}, [currentFilterStates, initialFilterStates]);
-	(0, react.useEffect)(() => {
-		if (isOpen) setInitialFilterStates(currentFilterStates);
-	}, [isOpen]);
-	return hasFiltersChanged;
-};
-
-//#endregion
-//#region src/components/SearchFilter/utils.ts
-const getSelectedFilterItemsCount = (filter) => filter.items.filter((item) => item.isSelected).length;
-const getTotalSelectedFilterItemsCount = (filters) => filters.reduce((acc, filter) => {
-	if (filter.filterId === "sort") return acc;
-	return acc + getSelectedFilterItemsCount(filter);
-}, 0);
-
-//#endregion
-//#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
-//#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 = 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 = getTotalSelectedFilterItemsCount(filters);
-	const hasFiltersChanged = 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)(SearchFilterHeader, {
-				closeModal,
-				productCount,
-				headerClassName: headerClassName ?? "",
-				filterCloseIconVariant
-			}),
-			chevronColor: "#000"
-		},
-		footerProps: { footerContent: footerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(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
-//#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-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
-Object.defineProperty(exports, 'SearchFilter', {
-  enumerable: true,
-  get: function () {
-    return SearchFilter;
-  }
-});
-Object.defineProperty(exports, 'SearchFilterFooter', {
-  enumerable: true,
-  get: function () {
-    return SearchFilterFooter;
-  }
-});
-Object.defineProperty(exports, 'SearchFilterHeader', {
-  enumerable: true,
-  get: function () {
-    return SearchFilterHeader;
-  }
-});
-Object.defineProperty(exports, 'SearchFilterItem', {
-  enumerable: true,
-  get: function () {
-    return SearchFilterItem;
-  }
-});
-Object.defineProperty(exports, 'getSelectedFilterItemsCount', {
-  enumerable: true,
-  get: function () {
-    return getSelectedFilterItemsCount;
-  }
-});
-Object.defineProperty(exports, 'getTotalSelectedFilterItemsCount', {
-  enumerable: true,
-  get: function () {
-    return getTotalSelectedFilterItemsCount;
-  }
-});