@envive-ai/react-toolkit 0.1.13 → 0.2.1

package/dist/SearchFilter-BcLc0TMq.cjs

@@ -1,289 +0,0 @@
-const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Text = require('./Text-DllCE9_D.cjs');
-const require_Accordion = require('./Accordion-D9gO9_y3.cjs');
-const require_ButtonBase = require('./ButtonBase-DrIwVGTR.cjs');
-const require_ModalSheet = require('./ModalSheet-Csz8HIxs.cjs');
-const require_RadioButtonGroup = require('./RadioButtonGroup-TAJMA1j_.cjs');
-const require_ToggleButton = require('./ToggleButton-DblAj4Cd.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");
-react_jsx_runtime = require_chunk.__toESM(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_Text.Text, {
-			variant: "body2",
-			className: "spiffy-tw-font-medium",
-			children: [
-				"Filters (",
-				productCount,
-				")"
-			]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-			onClick: closeModal,
-			className: "spiffy-tw-p-2",
-			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;
-	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
-	});
-};
-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);
-	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
-	});
-};
-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_Text.Text, {
-			variant: "body3",
-			children: displayName
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: radioClasses,
-			children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
-				"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
-				"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
-			}) })
-		})]
-	});
-};
-
-//#endregion
-Object.defineProperty(exports, 'SearchFilter', {
-  enumerable: true,
-  get: function () {
-    return SearchFilter;
-  }
-});
-Object.defineProperty(exports, 'SearchFilterHeader', {
-  enumerable: true,
-  get: function () {
-    return SearchFilterHeader;
-  }
-});
-Object.defineProperty(exports, 'SearchFilterItem', {
-  enumerable: true,
-  get: function () {
-    return SearchFilterItem;
-  }
-});

package/dist/SearchFilter-w-0s2YVu.js

@@ -1,268 +0,0 @@
-import { Text } from "./Text-BLzNhX4H.js";
-import { Accordion } from "./Accordion-ZEdp99Ph.js";
-import { ButtonBase } from "./ButtonBase-DgRupM53.js";
-import { ModalSheet } from "./ModalSheet-01pxpy_K.js";
-import { RadioButtonGroup } from "./RadioButtonGroup-BipNsoHL.js";
-import { ToggleButton } from "./ToggleButton-r7Y7Kzzo.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 }) => {
-	const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
-	return /* @__PURE__ */ jsxs("div", {
-		className: classNames("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
-		children: [/* @__PURE__ */ jsxs(Text, {
-			variant: "body2",
-			className: "spiffy-tw-font-medium",
-			children: [
-				"Filters (",
-				productCount,
-				")"
-			]
-		}), /* @__PURE__ */ jsx("button", {
-			onClick: closeModal,
-			className: "spiffy-tw-p-2",
-			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
-//#region src/components/SearchFilter/useHasFilterStateChanged.tsx
-const useHasFilterStateChanged = (filters, isOpen) => {
-	const [initialFilterStates, setInitialFilterStates] = useState({});
-	const currentFilterStates = useMemo(() => {
-		const states = {};
-		filters.forEach((filter) => {
-			filter.items.forEach((item) => {
-				states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
-			});
-		});
-		return states;
-	}, [filters]);
-	const hasFiltersChanged = useMemo(() => {
-		if (Object.keys(initialFilterStates).length === 0) return false;
-		return Object.keys(currentFilterStates).some((key) => currentFilterStates[key] !== initialFilterStates[key]);
-	}, [currentFilterStates, initialFilterStates]);
-	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 = 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
-//#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
-	});
-};
-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);
-	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
-	});
-};
-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
-//#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(Text, {
-			variant: "body3",
-			children: displayName
-		}), /* @__PURE__ */ jsx("div", {
-			className: radioClasses,
-			children: isSelected && /* @__PURE__ */ jsx("div", { className: classNames("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
-				"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
-				"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
-			}) })
-		})]
-	});
-};
-
-//#endregion
-export { SearchFilter, SearchFilterHeader, SearchFilterItem };

package/dist/SearchInput/index.cjs

@@ -1,97 +0,0 @@
-const require_chunk = require('../chunk-CUT6urMc.cjs');
-require('../textVariantClasses-CBre7vXv.cjs');
-const require_TextInput = require('../TextInput-HMW0hxLI.cjs');
-const require_colorsConfig = require('../colorsConfig-B3-SMUSx.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");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
-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_src_index_js = require("@envive-ai/react-icons/src/index.js");
-__envive_ai_react_icons_src_index_js = require_chunk.__toESM(__envive_ai_react_icons_src_index_js);
-
-//#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_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"
-} };
-
-//#endregion
-//#region src/components/SearchInput/SearchInput.tsx
-const SearchInput = react.default.forwardRef(({ searchInputVariant = "standard", value, placeholder, suggestions, className, dataTestId, ariaActivedescendant, onKeyDown, onChange, onFocus, onBlur }, ref) => {
-	const localInputRef = (0, react.useRef)(null);
-	const { searchInputClasses: inputClassName, searchInputIconColor: iconColor, searchInputBorderColor: borderColor, searchInputCloseIconClasses: closeIconClasses, searchInputActiveStarClasses, placeholderVariant } = searchInputVariantClasses[searchInputVariant];
-	(0, react.useImperativeHandle)(ref, () => localInputRef.current, []);
-	const magnifyingGlassClassesBase = [
-		"spiffy-tw-w-[24px]",
-		"spiffy-tw-h-[32px]",
-		"spiffy-tw-stroke-width-1",
-		"sm:spiffy-tw-w-[32px]"
-	];
-	const magnifyingGlassClassesInactive = (0, classnames.default)(magnifyingGlassClassesBase);
-	const magnifyingGlassClassesActive = (0, classnames.default)([...magnifyingGlassClassesBase, searchInputActiveStarClasses]);
-	const containerClasses = (0, classnames.default)("spiffy-global-search-input-container", "spiffy-tw-relative spiffy-tw-flex spiffy-tw-items-center", className);
-	const inputClasses = (0, classnames.default)("spiffy-global-search-input", "spiffy-tw-flex-grow spiffy-tw-p-2 spiffy-tw-px-[42px] sm:spiffy-tw-p-3 sm:spiffy-tw-px-[48px]", "spiffy-tw-border", "spiffy-tw-text-base", inputClassName);
-	const closeButtonIconClassName = (0, classnames.default)([
-		"spiffy-tw-w-[16px]",
-		"spiffy-tw-h-[16px]",
-		"sm:spiffy-tw-w-[24px]",
-		"sm:spiffy-tw-h-[24px]",
-		"spiffy-tw-cursor-pointer",
-		closeIconClasses
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: containerClasses,
-		"data-testid": dataTestId,
-		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, {
-					className: value.length > 0 ? magnifyingGlassClassesActive : magnifyingGlassClassesInactive,
-					stroke: iconColor,
-					strokeWidth: "1px"
-				})
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextInput.TextInput, {
-				value,
-				onChange: (event) => onChange(event.target.value),
-				onFocus,
-				onBlur,
-				onKeyDown,
-				placeholder,
-				className: inputClasses,
-				placeholderVariant,
-				"aria-label": "Search",
-				"aria-autocomplete": "list",
-				"aria-expanded": !!suggestions && suggestions.length > 0,
-				"aria-controls": "autocomplete-results",
-				"aria-activedescendant": ariaActivedescendant,
-				borderRadius: "xl",
-				borderColorClass: borderColor,
-				ref: localInputRef
-			}),
-			value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				onClick: () => {
-					onChange("");
-					localInputRef.current?.focus();
-				},
-				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_src_index_js.IconClose, { className: closeButtonIconClassName })
-			})
-		]
-	});
-});
-
-//#endregion
-exports.SearchInput = SearchInput;
-exports.searchInputVariantClasses = searchInputVariantClasses;

package/dist/SearchInput/index.d.cts

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