@envive-ai/react-toolkit 0.1.12 → 0.1.13

package/dist/RadioButton/index.js

@@ -1,6 +1,6 @@
-import "../textVariantClasses-D77TGEy1.js";
-import "../Text-Bod4OMPk.js";
+import "../textVariantClasses-CRrTb43V.js";
+import "../Text-BLzNhX4H.js";
 import "../Text-BMsncrpY.js";
-import { RadioButton } from "../RadioButton-Bf68dZl7.js";
+import { RadioButton } from "../RadioButton-S5dALI2f.js";
 
 export { RadioButton };

package/dist/{RadioButton-DZ6QXkrN.cjs → RadioButton-BdKJRzLM.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Text = require('./Text-MQjxqgZZ.cjs');
+const require_Text = require('./Text-DllCE9_D.cjs');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");
@@ -8,7 +8,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 
 //#region src/components/RadioButton/RadioButton.tsx
-const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange }) => {
+const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange, id }) => {
 	const [isHovered, setIsHovered] = (0, react.useState)(false);
 	const containerClassName = (0, classnames.default)({
 		"spiffy-tw-flex": true,
@@ -28,14 +28,20 @@ const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "
 	const handleChange = () => {
 		if (!isDisabled) onChange(value);
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-		className: containerClassName,
-		onMouseEnter: () => !isDisabled && setIsHovered(true),
-		onMouseLeave: () => setIsHovered(false),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+			className: containerClassName,
+			onMouseEnter: () => !isDisabled && setIsHovered(true),
+			onMouseLeave: () => setIsHovered(false),
+			"aria-label": label,
+			htmlFor: id,
+			children: label
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "spiffy-tw-relative",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				type: "radio",
+				id,
 				name,
 				value,
 				checked,
@@ -61,11 +67,12 @@ const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "
 					fill: getFillColor()
 				})]
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
 			variant: "body3",
 			children: label
-		})]
-	});
+		})
+	] });
 };
 
 //#endregion

package/dist/{RadioButton-Bf68dZl7.js → RadioButton-S5dALI2f.js}

@@ -1,10 +1,10 @@
-import { Text } from "./Text-Bod4OMPk.js";
+import { Text } from "./Text-BLzNhX4H.js";
 import { useState } from "react";
 import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/RadioButton/RadioButton.tsx
-const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange }) => {
+const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "medium", fillColor, hoverColor, uncheckedBorderColor, checked = false, onChange, id }) => {
 	const [isHovered, setIsHovered] = useState(false);
 	const containerClassName = classNames({
 		"spiffy-tw-flex": true,
@@ -24,14 +24,20 @@ const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "
 	const handleChange = () => {
 		if (!isDisabled) onChange(value);
 	};
-	return /* @__PURE__ */ jsxs("label", {
-		className: containerClassName,
-		onMouseEnter: () => !isDisabled && setIsHovered(true),
-		onMouseLeave: () => setIsHovered(false),
-		children: [/* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("label", {
+			className: containerClassName,
+			onMouseEnter: () => !isDisabled && setIsHovered(true),
+			onMouseLeave: () => setIsHovered(false),
+			"aria-label": label,
+			htmlFor: id,
+			children: label
+		}),
+		/* @__PURE__ */ jsxs("div", {
 			className: "spiffy-tw-relative",
 			children: [/* @__PURE__ */ jsx("input", {
 				type: "radio",
+				id,
 				name,
 				value,
 				checked,
@@ -57,11 +63,12 @@ const RadioButton = ({ isDisabled = false, label, name, value, textButtonGap = "
 					fill: getFillColor()
 				})]
 			})]
-		}), /* @__PURE__ */ jsx(Text, {
+		}),
+		/* @__PURE__ */ jsx(Text, {
 			variant: "body3",
 			children: label
-		})]
-	});
+		})
+	] });
 };
 
 //#endregion

package/dist/RadioButtonGroup/index.cjs

@@ -1,8 +1,8 @@
-require('../textVariantClasses-Dgz7Zaql.cjs');
-require('../Text-MQjxqgZZ.cjs');
+require('../textVariantClasses-CBre7vXv.cjs');
+require('../Text-DllCE9_D.cjs');
 require('../Text-C8t_iEj6.cjs');
-require('../RadioButton-DZ6QXkrN.cjs');
-const require_RadioButtonGroup = require('../RadioButtonGroup-Dc_n5amh.cjs');
+require('../RadioButton-BdKJRzLM.cjs');
+const require_RadioButtonGroup = require('../RadioButtonGroup-TAJMA1j_.cjs');
 
 exports.RadioButtonGroup = require_RadioButtonGroup.RadioButtonGroup;
 exports.SPIFFY_RADIO_BUTTON_GROUP_CLASS = require_RadioButtonGroup.SPIFFY_RADIO_BUTTON_GROUP_CLASS;

package/dist/RadioButtonGroup/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.d.ts
@@ -31,6 +31,6 @@ declare const RadioButtonGroup: ({
   gap,
   textButtonGap,
   onChange
-}: RadioButtonGroupProps) => react_jsx_runtime12.JSX.Element;
+}: RadioButtonGroupProps) => react_jsx_runtime10.JSX.Element;
 //#endregion
 export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/RadioButtonGroup/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 
 //#region src/components/RadioButtonGroup/RadioButtonGroup.d.ts
@@ -31,6 +31,6 @@ declare const RadioButtonGroup: ({
   gap,
   textButtonGap,
   onChange
-}: RadioButtonGroupProps) => react_jsx_runtime23.JSX.Element;
+}: RadioButtonGroupProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/RadioButtonGroup/index.js

@@ -1,7 +1,7 @@
-import "../textVariantClasses-D77TGEy1.js";
-import "../Text-Bod4OMPk.js";
+import "../textVariantClasses-CRrTb43V.js";
+import "../Text-BLzNhX4H.js";
 import "../Text-BMsncrpY.js";
-import "../RadioButton-Bf68dZl7.js";
-import { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS } from "../RadioButtonGroup-8k7hkJYB.js";
+import "../RadioButton-S5dALI2f.js";
+import { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS } from "../RadioButtonGroup-BipNsoHL.js";
 
 export { RadioButtonGroup, SPIFFY_RADIO_BUTTON_GROUP_CLASS };

package/dist/{RadioButtonGroup-8k7hkJYB.js → RadioButtonGroup-BipNsoHL.js}

@@ -1,4 +1,4 @@
-import { RadioButton } from "./RadioButton-Bf68dZl7.js";
+import { RadioButton } from "./RadioButton-S5dALI2f.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 
@@ -19,6 +19,7 @@ const RadioButtonGroup = ({ name, options, fillColor, hoverColor, uncheckedBorde
 	return /* @__PURE__ */ jsx("div", {
 		className: groupClassName,
 		children: options.map((option) => /* @__PURE__ */ jsx(RadioButton, {
+			id: option.value,
 			name,
 			value: option.value,
 			fillColor,

package/dist/{RadioButtonGroup-Dc_n5amh.cjs → RadioButtonGroup-TAJMA1j_.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_RadioButton = require('./RadioButton-DZ6QXkrN.cjs');
+const require_RadioButton = require('./RadioButton-BdKJRzLM.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -22,6 +22,7 @@ const RadioButtonGroup = ({ name, options, fillColor, hoverColor, uncheckedBorde
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: groupClassName,
 		children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RadioButton.RadioButton, {
+			id: option.value,
 			name,
 			value: option.value,
 			fillColor,

package/dist/SearchAutocomplete/index.cjs

@@ -1,3 +1,57 @@
-const require_SearchAutocomplete = require('../SearchAutocomplete-DIEhLT4C.cjs');
+const require_chunk = require('../chunk-CUT6urMc.cjs');
+let framer_motion = require("framer-motion");
+framer_motion = require_chunk.__toESM(framer_motion);
+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_OutlinedStar = require("@envive-ai/react-icons/OutlinedStar");
+__envive_ai_react_icons_OutlinedStar = require_chunk.__toESM(__envive_ai_react_icons_OutlinedStar);
 
-exports.SearchAutocomplete = require_SearchAutocomplete.SearchAutocomplete;
+//#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
+const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, iconColor }) => {
+	if (results.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		className: "spiffy-tw-h-full",
+		initial: {
+			opacity: 0,
+			y: -10
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -10
+		},
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			id,
+			role: "listbox",
+			className: "spiffy-tw-mt-4 spiffy-tw-space-y-2",
+			children: results.map((result, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				id: `option-${index}`,
+				role: "option",
+				"aria-selected": index === focusedIndex,
+				className: (0, classnames.default)("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-cursor-pointer spiffy-tw-py-1", { "spiffy-tw-bg-neutral-200": index === focusedIndex }, "hover:spiffy-tw-bg-neutral-100"),
+				onClick: () => onSuggestionSelect(result, index),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_OutlinedStar.default, {
+					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2",
+					fill: iconColor
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "spiffy-tw-font-bold",
+					children: result
+				})]
+			}, index))
+		})
+	});
+};
+
+//#endregion
+exports.SearchAutocomplete = SearchAutocomplete;

package/dist/SearchAutocomplete/index.js

@@ -1,3 +1,51 @@
-import { SearchAutocomplete } from "../SearchAutocomplete-BlpII8Xs.js";
+import { motion } from "framer-motion";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import OutlinedStar from "@envive-ai/react-icons/OutlinedStar";
 
+//#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
+const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, iconColor }) => {
+	if (results.length === 0) return null;
+	return /* @__PURE__ */ jsx(motion.div, {
+		className: "spiffy-tw-h-full",
+		initial: {
+			opacity: 0,
+			y: -10
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -10
+		},
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ jsx("ul", {
+			id,
+			role: "listbox",
+			className: "spiffy-tw-mt-4 spiffy-tw-space-y-2",
+			children: results.map((result, index) => /* @__PURE__ */ jsxs("li", {
+				id: `option-${index}`,
+				role: "option",
+				"aria-selected": index === focusedIndex,
+				className: classNames("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-cursor-pointer spiffy-tw-py-1", { "spiffy-tw-bg-neutral-200": index === focusedIndex }, "hover:spiffy-tw-bg-neutral-100"),
+				onClick: () => onSuggestionSelect(result, index),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
+				},
+				children: [/* @__PURE__ */ jsx(OutlinedStar, {
+					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2",
+					fill: iconColor
+				}), /* @__PURE__ */ jsx("span", {
+					className: "spiffy-tw-font-bold",
+					children: result
+				})]
+			}, index))
+		})
+	});
+};
+
+//#endregion
 export { SearchAutocomplete };

package/dist/SearchFilter/index.cjs

@@ -1,14 +1,14 @@
-require('../textVariantClasses-Dgz7Zaql.cjs');
-require('../Text-MQjxqgZZ.cjs');
+require('../textVariantClasses-CBre7vXv.cjs');
+require('../Text-DllCE9_D.cjs');
 require('../Text-C8t_iEj6.cjs');
-require('../Accordion-DBZpiQe7.cjs');
-require('../ButtonBase-Do88ndKa.cjs');
+require('../Accordion-D9gO9_y3.cjs');
+require('../ButtonBase-DrIwVGTR.cjs');
 require('../ButtonBase-BIXx56hq.cjs');
 require('../ModalSheet-Csz8HIxs.cjs');
-require('../RadioButton-DZ6QXkrN.cjs');
-require('../RadioButtonGroup-Dc_n5amh.cjs');
-const require_SearchFilter = require('../SearchFilter-CTVBi5s3.cjs');
-require('../ToggleButton-CK_vkMvt.cjs');
+require('../RadioButton-BdKJRzLM.cjs');
+require('../RadioButtonGroup-TAJMA1j_.cjs');
+const require_SearchFilter = require('../SearchFilter-BcLc0TMq.cjs');
+require('../ToggleButton-DblAj4Cd.cjs');
 
 exports.SearchFilter = require_SearchFilter.SearchFilter;
 exports.SearchFilterHeader = require_SearchFilter.SearchFilterHeader;

package/dist/SearchFilter/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import { CloseIconVariant, SearchFilterDatum, SearchFilterItemDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchFilter/types.d.ts
@@ -55,7 +55,7 @@ declare const SearchFilter: ({
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor,
   filterCloseIconVariant
-}: SearchFilterProps) => react_jsx_runtime16.JSX.Element;
+}: SearchFilterProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterHeader.d.ts
 declare const SearchFilterHeader: ({
@@ -63,7 +63,7 @@ declare const SearchFilterHeader: ({
   productCount,
   headerClassName,
   filterCloseIconVariant
-}: SearchFilterHeaderProps) => react_jsx_runtime16.JSX.Element;
+}: SearchFilterHeaderProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterItem.d.ts
 declare const SearchFilterItem: ({
@@ -72,6 +72,6 @@ declare const SearchFilterItem: ({
   radioButtonFillColor,
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor
-}: SearchFilterItemProps) => react_jsx_runtime16.JSX.Element;
+}: SearchFilterItemProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { SearchFilter, SearchFilterHeader, SearchFilterItem };

package/dist/SearchFilter/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 import { CloseIconVariant, SearchFilterDatum, SearchFilterItemDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchFilter/types.d.ts
@@ -55,7 +55,7 @@ declare const SearchFilter: ({
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor,
   filterCloseIconVariant
-}: SearchFilterProps) => react_jsx_runtime12.JSX.Element;
+}: SearchFilterProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterHeader.d.ts
 declare const SearchFilterHeader: ({
@@ -63,7 +63,7 @@ declare const SearchFilterHeader: ({
   productCount,
   headerClassName,
   filterCloseIconVariant
-}: SearchFilterHeaderProps) => react_jsx_runtime12.JSX.Element;
+}: SearchFilterHeaderProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterItem.d.ts
 declare const SearchFilterItem: ({
@@ -72,6 +72,6 @@ declare const SearchFilterItem: ({
   radioButtonFillColor,
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor
-}: SearchFilterItemProps) => react_jsx_runtime12.JSX.Element;
+}: SearchFilterItemProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { SearchFilter, SearchFilterHeader, SearchFilterItem };

package/dist/SearchFilter/index.js

@@ -1,13 +1,13 @@
-import "../textVariantClasses-D77TGEy1.js";
-import "../Text-Bod4OMPk.js";
+import "../textVariantClasses-CRrTb43V.js";
+import "../Text-BLzNhX4H.js";
 import "../Text-BMsncrpY.js";
-import "../Accordion-Cp3Hx2zm.js";
-import "../ButtonBase-BAf-nlCm.js";
+import "../Accordion-ZEdp99Ph.js";
+import "../ButtonBase-DgRupM53.js";
 import "../ButtonBase-0NN6wmX-.js";
 import "../ModalSheet-01pxpy_K.js";
-import "../RadioButton-Bf68dZl7.js";
-import "../RadioButtonGroup-8k7hkJYB.js";
-import { SearchFilter, SearchFilterHeader, SearchFilterItem } from "../SearchFilter-DvqBIXa1.js";
-import "../ToggleButton-GIVd2-Z4.js";
+import "../RadioButton-S5dALI2f.js";
+import "../RadioButtonGroup-BipNsoHL.js";
+import { SearchFilter, SearchFilterHeader, SearchFilterItem } from "../SearchFilter-w-0s2YVu.js";
+import "../ToggleButton-r7Y7Kzzo.js";
 
 export { SearchFilter, SearchFilterHeader, SearchFilterItem };

package/dist/{SearchFilter-CTVBi5s3.cjs → SearchFilter-BcLc0TMq.cjs}

@@ -1,10 +1,10 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_Text = require('./Text-MQjxqgZZ.cjs');
-const require_Accordion = require('./Accordion-DBZpiQe7.cjs');
-const require_ButtonBase = require('./ButtonBase-Do88ndKa.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-Dc_n5amh.cjs');
-const require_ToggleButton = require('./ToggleButton-CK_vkMvt.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");
@@ -28,6 +28,8 @@ const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterC
 		}), /* @__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",
@@ -68,15 +70,11 @@ const useHasFilterStateChanged = (filters, isOpen) => {
 
 //#endregion
 //#region src/components/SearchFilter/utils.ts
-const getSelectedFilterItemsCount = (filter) => {
-	return filter.items.filter((item) => item.isSelected).length;
-};
-const getTotalSelectedFilterItemsCount = (filters) => {
-	return filters.reduce((acc, filter) => {
-		if (filter.filterId === "sort") return acc;
-		return acc + getSelectedFilterItemsCount(filter);
-	}, 0);
-};
+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
@@ -242,9 +240,21 @@ const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters
 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)("li", {
-		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer",
+	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

package/dist/{SearchFilter-DvqBIXa1.js → SearchFilter-w-0s2YVu.js}

@@ -1,9 +1,9 @@
-import { Text } from "./Text-Bod4OMPk.js";
-import { Accordion } from "./Accordion-Cp3Hx2zm.js";
-import { ButtonBase } from "./ButtonBase-BAf-nlCm.js";
+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-8k7hkJYB.js";
-import { ToggleButton } from "./ToggleButton-GIVd2-Z4.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";
@@ -24,6 +24,8 @@ const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterC
 		}), /* @__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",
@@ -64,15 +66,11 @@ const useHasFilterStateChanged = (filters, isOpen) => {
 
 //#endregion
 //#region src/components/SearchFilter/utils.ts
-const getSelectedFilterItemsCount = (filter) => {
-	return filter.items.filter((item) => item.isSelected).length;
-};
-const getTotalSelectedFilterItemsCount = (filters) => {
-	return filters.reduce((acc, filter) => {
-		if (filter.filterId === "sort") return acc;
-		return acc + getSelectedFilterItemsCount(filter);
-	}, 0);
-};
+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
@@ -238,9 +236,21 @@ const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters
 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("li", {
-		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer",
+	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