@envive-ai/react-toolkit 0.1.12 → 0.1.13

package/dist/{index-BMt66uqr.d.cts → index-Dh8rcWev.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
@@ -28,7 +28,6 @@ type SearchResultsFilterProps = {
   setIsOpen: (isOpen: boolean) => void;
   searchFilters: SearchFilterDatum[];
   searchFilterSidebarVariant: SearchFilterSidebarVariant;
-  searchText: string;
   onSelectFilterItem: SelectFilterItem;
   onClearAllFilters: () => void;
   filterButtonText: string;
@@ -42,6 +41,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime10.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime22.JSX.Element;
 //#endregion
 export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/index-W1wCDiw_.d.cts

@@ -0,0 +1,4 @@
+//#region src/components/SearchInputForm/types.d.ts
+type SearchInputVariant = 'standard';
+//#endregion
+export { SearchInputVariant };

package/dist/{searchFilterSidebarVariants-CI782ylo.js → searchFilterSidebarVariants-J0FJ8pck.js}

@@ -1,4 +1,4 @@
-import { ColorNames, colorVar } from "./colorsConfig-DEfiLHH0.js";
+import { ColorNames, colorVar } from "./colorsConfig-DZ-GSPWy.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{searchFilterSidebarVariants-DFfOTqjc.cjs → searchFilterSidebarVariants-kkTjYEIF.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-D-MZuBvt.cjs');
+const require_colorsConfig = require('./colorsConfig-B3-SMUSx.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{textVariantClasses-Dgz7Zaql.cjs → textVariantClasses-CBre7vXv.cjs}

@@ -90,13 +90,11 @@ const TextStyleVariantMap = {
 	...TextVariantMap,
 	...HeadlineVariantMap
 };
-const getVariantPlaceholderClassNames = (classes) => {
-	return Object.keys(classes).reduce((acc, key) => {
-		if (key.includes("spiffy-tw")) acc[`placeholder:${key}`] = classes[key];
-		else acc[`${key}-placeholder`] = classes[key];
-		return acc;
-	}, {});
-};
+const getVariantPlaceholderClassNames = (classes) => Object.keys(classes).reduce((acc, key) => {
+	if (key.includes("spiffy-tw")) acc[`placeholder:${key}`] = classes[key];
+	else acc[`${key}-placeholder`] = classes[key];
+	return acc;
+}, {});
 
 //#endregion
 Object.defineProperty(exports, 'HeadlineVariantMap', {

package/dist/{textVariantClasses-D77TGEy1.js → textVariantClasses-CRrTb43V.js}

@@ -89,13 +89,11 @@ const TextStyleVariantMap = {
 	...TextVariantMap,
 	...HeadlineVariantMap
 };
-const getVariantPlaceholderClassNames = (classes) => {
-	return Object.keys(classes).reduce((acc, key) => {
-		if (key.includes("spiffy-tw")) acc[`placeholder:${key}`] = classes[key];
-		else acc[`${key}-placeholder`] = classes[key];
-		return acc;
-	}, {});
-};
+const getVariantPlaceholderClassNames = (classes) => Object.keys(classes).reduce((acc, key) => {
+	if (key.includes("spiffy-tw")) acc[`placeholder:${key}`] = classes[key];
+	else acc[`${key}-placeholder`] = classes[key];
+	return acc;
+}, {});
 
 //#endregion
 export { HeadlineVariantMap, TextStyleVariantMap, TextVariantMap, getVariantPlaceholderClassNames };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -45,7 +45,7 @@
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "tsdown": "^0.14.2",
-    "typescript": "~5.8.3"
+    "typescript": "^5.4.3"
   },
   "exports": {
     "./Accordion": {
@@ -132,10 +132,6 @@
       "import": "./dist/Spinner/index.js",
       "require": "./dist/Spinner/index.cjs"
     },
-    "./Styles": {
-      "import": "./dist/Styles/index.js",
-      "require": "./dist/Styles/index.cjs"
-    },
     "./SuggestionButton": {
       "import": "./dist/SuggestionButton/index.js",
       "require": "./dist/SuggestionButton/index.cjs"

package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx

@@ -38,33 +38,31 @@ export const AppliedFiltersScrollbar = ({
 
   return (
     <ScrollContainer className={filterBarClassNames} hideScrollbars>
-      {selectedFilterOptions.map((filter) => {
-        return (
-          <button
-            key={filter.id}
-            className={buttonClasses}
-            type="button"
-            onClick={() => onRemoveFilter(filter)}
-            aria-label={`Remove filter: ${filter.displayName}`}
-          >
-            <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]">
-              <Text variant="body3">{filter.displayName}</Text>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="10"
-                height="10"
-                viewBox="0 0 10 10"
-                fill="none"
-              >
-                <path
-                  d="M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z"
-                  fill={iconColor}
-                />
-              </svg>
-            </div>
-          </button>
-        );
-      })}
+      {selectedFilterOptions.map((filter) => (
+        <button
+          key={filter.id}
+          className={buttonClasses}
+          type="button"
+          onClick={() => onRemoveFilter(filter)}
+          aria-label={`Remove filter: ${filter.displayName}`}
+        >
+          <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]">
+            <Text variant="body3">{filter.displayName}</Text>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              fill="none"
+            >
+              <path
+                d="M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z"
+                fill={iconColor}
+              />
+            </svg>
+          </div>
+        </button>
+      ))}
     </ScrollContainer>
   );
 };

package/src/components/ButtonBase/ButtonBase.tsx

@@ -4,7 +4,6 @@ import { ButtonBaseOverrides, ButtonBaseProps } from './types';
 import { Text } from '../Text/Text';
 
 export const ButtonBase = ({
-  type = 'button',
   isDisabled = false,
   dataAttributes,
   buttonClass,
@@ -53,7 +52,7 @@ export const ButtonBase = ({
 
   return (
     <button
-      type={type}
+      type="button"
       ref={buttonRef}
       className={buttonClassName}
       disabled={isDisabled}

package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx

@@ -22,31 +22,29 @@ export const DynamicFiltersScrollbar = ({
   filterDefaultClasses,
   filterHoverClasses,
   onToggleDynamicFilter,
-}: DynamicFiltersScrollbarProps) => {
-  return (
-    <ScrollContainer className={filterBarClassNames} hideScrollbars>
-      {availableDynamicFilters.map(({ name, displayName }) => {
-        const buttonClasses = classNames(
-          'spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ',
-          filterHoverClasses,
-          filterDefaultClasses,
-        );
-        return (
-          <button
-            key={name}
-            type="button"
-            className={buttonClasses}
-            onClick={() => {
-              onToggleDynamicFilter({
-                filter: name,
-                dynamicFilterDisplayName: displayName,
-              });
-            }}
-          >
-            <Text variant="body3">{displayName}</Text>
-          </button>
-        );
-      })}
-    </ScrollContainer>
-  );
-};
+}: DynamicFiltersScrollbarProps) => (
+  <ScrollContainer className={filterBarClassNames} hideScrollbars>
+    {availableDynamicFilters.map(({ name, displayName }) => {
+      const buttonClasses = classNames(
+        'spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ',
+        filterHoverClasses,
+        filterDefaultClasses,
+      );
+      return (
+        <button
+          key={name}
+          type="button"
+          className={buttonClasses}
+          onClick={() => {
+            onToggleDynamicFilter({
+              filter: name,
+              dynamicFilterDisplayName: displayName,
+            });
+          }}
+        >
+          <Text variant="body3">{displayName}</Text>
+        </button>
+      );
+    })}
+  </ScrollContainer>
+);

package/src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx

@@ -38,33 +38,31 @@ export const AppliedFiltersScrollbar = ({
 
   return (
     <ScrollContainer className={filterBarClassNames} hideScrollbars>
-      {selectedFilterOptions.map((filter) => {
-        return (
-          <button
-            key={filter.id}
-            className={buttonClasses}
-            type="button"
-            onClick={() => onRemoveFilter(filter)}
-            aria-label={`Remove filter: ${filter.displayName}`}
-          >
-            <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]">
-              <Text variant="body3">{filter.displayName}</Text>
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="10"
-                height="10"
-                viewBox="0 0 10 10"
-                fill="none"
-              >
-                <path
-                  d="M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z"
-                  fill={iconColor}
-                />
-              </svg>
-            </div>
-          </button>
-        );
-      })}
+      {selectedFilterOptions.map((filter) => (
+        <button
+          key={filter.id}
+          className={buttonClasses}
+          type="button"
+          onClick={() => onRemoveFilter(filter)}
+          aria-label={`Remove filter: ${filter.displayName}`}
+        >
+          <div className="spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-[8px]">
+            <Text variant="body3">{filter.displayName}</Text>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              fill="none"
+            >
+              <path
+                d="M4.59766 4.29297L8.48535 0.405273L9.19238 1.1123L5.30469 5L9.19238 8.8877L8.48535 9.59473L4.59766 5.70703L0.707031 9.59766L0 8.89062L3.89062 5L0 1.10938L0.707031 0.402344L4.59766 4.29297Z"
+                fill={iconColor}
+              />
+            </svg>
+          </div>
+        </button>
+      ))}
     </ScrollContainer>
   );
 };

package/src/components/FilterScrollbar/DynamicFiltersScrollbar.tsx

@@ -22,31 +22,29 @@ export const DynamicFiltersScrollbar = ({
   filterDefaultClasses,
   filterHoverClasses,
   onToggleDynamicFilter,
-}: DynamicFiltersScrollbarProps) => {
-  return (
-    <ScrollContainer className={filterBarClassNames} hideScrollbars>
-      {availableDynamicFilters.map(({ name, displayName }) => {
-        const buttonClasses = classNames(
-          'spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ',
-          filterHoverClasses,
-          filterDefaultClasses,
-        );
-        return (
-          <button
-            key={name}
-            type="button"
-            className={buttonClasses}
-            onClick={() => {
-              onToggleDynamicFilter({
-                filter: name,
-                dynamicFilterDisplayName: displayName,
-              });
-            }}
-          >
-            <Text variant="body3">{displayName}</Text>
-          </button>
-        );
-      })}
-    </ScrollContainer>
-  );
-};
+}: DynamicFiltersScrollbarProps) => (
+  <ScrollContainer className={filterBarClassNames} hideScrollbars>
+    {availableDynamicFilters.map(({ name, displayName }) => {
+      const buttonClasses = classNames(
+        'spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ',
+        filterHoverClasses,
+        filterDefaultClasses,
+      );
+      return (
+        <button
+          key={name}
+          type="button"
+          className={buttonClasses}
+          onClick={() => {
+            onToggleDynamicFilter({
+              filter: name,
+              dynamicFilterDisplayName: displayName,
+            });
+          }}
+        >
+          <Text variant="body3">{displayName}</Text>
+        </button>
+      );
+    })}
+  </ScrollContainer>
+);

package/src/components/ModalSheet/ModalSheet.tsx

@@ -1,7 +1,7 @@
+import { useIsSmallScreen } from '@envive-ai/react-hooks/hooks/IsSmallScreen';
 import { ModalSheetMobile } from './mobile';
 import { ModalSheetDesktop } from './desktop';
 import { ModalSheetProps } from './types';
-import { useIsSmallScreen } from '@envive-ai/react-hooks/hooks/IsSmallScreen';
 
 const ANIMATION_DURATION = 0.3;
 

package/src/components/ModalSheet/common/closeIcon.tsx

@@ -33,8 +33,8 @@ export const ModalSheetCloseIcon = ({
 
   const closeIconContextValue = useMemo(() => ({ size: iconSize }), [iconSize]);
   return (
-    <div className={closeIconClassNames} onClick={closeModal}>
+    <button type="button" className={closeIconClassNames} onClick={closeModal}>
       <IconContext.Provider value={closeIconContextValue}>{closeIcon}</IconContext.Provider>
-    </div>
+    </button>
   );
 };

package/src/components/ModalSheet/mobile/mobileHeader.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { motion, useMotionValue } from 'framer-motion';
-import { ModalSheetHeaderProps } from '../types';
 import { AnimatedChevron } from 'src/components/AnimatedChevron/AnimatedChevron';
+import { ModalSheetHeaderProps } from '../types';
 
 const modalSheetVariants = {
   primary: {

package/src/components/ProductCard/ProductCard.tsx

@@ -1,12 +1,16 @@
 import classNames from 'classnames';
 import { MdStar } from 'react-icons/md';
+import Logger from 'src/logging/logger';
+import { Text } from 'src/components/Text/Text';
+import { formatPrice } from 'src/util/formatPrice';
+import { TestProps } from '@envive-ai/react-hooks/types';
+import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
 import {
   variantClassMap,
   variantHoverClassMap,
   productCardLayoutVariantClasses,
   variantTitleColorMap,
 } from './productCardVariants';
-import Logger from 'src/logging/logger';
 import { Headline } from '../Headline';
 import { ImageWithFallback } from '../ImageWithFallback';
 import { Spinner } from '../Spinner';
@@ -16,10 +20,6 @@ import {
   ProductCardHoverVariant,
   ProductCardLayoutVariant,
 } from './types';
-import { Text } from 'src/components/Text/Text';
-import { formatPrice } from 'src/util/formatPrice';
-import { TestProps } from '@envive-ai/react-hooks/types';
-import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
 
 const formatReviews = (stars: number) =>
   String(
@@ -95,29 +95,11 @@ export const PriceSection = ({ originalPrice, salePrice, pricePrefix }: PriceSec
   );
 };
 
-// export const formatPrice = (price?: number, currency: string = '$'): string => {
-//   if (price == null) {
-//     return '';
-//   }
-
-//   const options: Intl.NumberFormatOptions = {};
-
-//   if (!Number.isInteger(price)) {
-//     options.minimumFractionDigits = 2;
-//     options.maximumFractionDigits = 2;
-//   }
-
-//   return `${currency}${price.toLocaleString('en-US', options)}`;
-// };
-
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
   title: string;
   url: string;
-  searchResponseId?: string;
-  productResponseId?: string;
-  cardDisplayLocation: string;
   imageUrl?: string;
   originalPrice?: number;
   averageRating?: number;
@@ -128,7 +110,6 @@ interface ProductCardProps extends TestProps {
   layoutVariant?: ProductCardLayoutVariant;
   zoomOnHover?: boolean;
   aspectRatio?: '3:4' | 'square' | 'none';
-  clickPosition?: number | null;
   growWithContainer?: boolean;
   handleClick?: (clickedUrl: string) => void;
 }
@@ -139,8 +120,6 @@ export const ProductCard = ({
   imageUrl,
   title,
   url,
-  // searchResponseId,
-  // productResponseId,
   originalPrice,
   averageRating,
   numberReviews,
@@ -149,10 +128,8 @@ export const ProductCard = ({
   hoverVariant,
   dataTestId,
   layoutVariant = 'normal',
-  // cardDisplayLocation,
   zoomOnHover = false,
   aspectRatio = 'none',
-  // clickPosition = null,
   growWithContainer = false,
   handleClick,
 }: ProductCardProps) => {

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,8 +1,8 @@
-import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
-import { productGridVariantClasses } from './productGridVariants';
 import classNames from 'classnames';
 import { SearchResponseProduct } from '@spiffy-ai/commerce-api-client';
 import { CamelCasedPropertiesDeep } from 'src/util/camelCasedPropertiesDeep';
+import { productGridVariantClasses } from './productGridVariants';
+import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
 
 interface ProductGridProps {
   productList: SearchResponseProduct[];
@@ -10,9 +10,7 @@ interface ProductGridProps {
   productGridClasses: string;
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
-  searchResponseId: string;
   cardsGrowWithContainer?: boolean;
-  cardDisplayLocation: string;
 }
 
 export const ProductGrid = ({
@@ -21,9 +19,7 @@ export const ProductGrid = ({
   productGridClasses,
   productCardConfig,
   merchantShortName,
-  searchResponseId,
   cardsGrowWithContainer = true,
-  cardDisplayLocation,
 }: ProductGridProps) => {
   const {
     productCardVariant,
@@ -40,7 +36,7 @@ export const ProductGrid = ({
 
   return (
     <div className={productGridClasses}>
-      {productList.map((product: SearchResponseProduct, index: number) => {
+      {productList.map((product: SearchResponseProduct) => {
         const camelCasedProduct: CamelCasedPropertiesDeep<SearchResponseProduct> = product;
         return (
           <div key={camelCasedProduct.id} className={cardContainerClasses}>
@@ -49,21 +45,17 @@ export const ProductGrid = ({
               merchantShortName={merchantShortName}
               key={camelCasedProduct.id}
               imageUrl={camelCasedProduct.imageUrl}
-              searchResponseId={searchResponseId}
-              productResponseId={camelCasedProduct.responseId}
               title={camelCasedProduct.title}
               url={camelCasedProduct.url}
               originalPrice={camelCasedProduct.originalPrice}
               salePrice={camelCasedProduct.salePrice}
               averageRating={camelCasedProduct.averageRating}
               numberReviews={camelCasedProduct.numberReviews}
-              cardDisplayLocation={cardDisplayLocation}
               layoutVariant={productCardLayoutVariant}
               variant={productCardVariant}
               hoverVariant={productCardHoverVariant}
               zoomOnHover={zoomOnHover}
               aspectRatio={productCardImageAspectRatio}
-              clickPosition={index}
               growWithContainer={cardsGrowWithContainer}
             />
           </div>

package/src/components/RadioButton/RadioButton.tsx

@@ -14,6 +14,7 @@ interface RadioButtonProps extends TestProps {
   uncheckedBorderColor?: string;
   checked?: boolean;
   onChange: (value: string) => void;
+  id;
 }
 
 export const RadioButton = ({
@@ -27,6 +28,7 @@ export const RadioButton = ({
   uncheckedBorderColor,
   checked = false,
   onChange,
+  id,
 }: RadioButtonProps) => {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -54,14 +56,21 @@ export const RadioButton = ({
   };
 
   return (
-    <label
-      className={containerClassName}
-      onMouseEnter={() => !isDisabled && setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
+    <>
+      <label
+        className={containerClassName}
+        onMouseEnter={() => !isDisabled && setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        aria-label={label}
+        htmlFor={id}
+      >
+        {label}
+      </label>
+
       <div className="spiffy-tw-relative">
         <input
           type="radio"
+          id={id}
           name={name}
           value={value}
           checked={checked}
@@ -83,6 +92,6 @@ export const RadioButton = ({
         </svg>
       </div>
       <Text variant="body3">{label}</Text>
-    </label>
+    </>
   );
 };

package/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -55,6 +55,7 @@ export const RadioButtonGroup = ({
       {options.map((option) => (
         <RadioButton
           key={option.value}
+          id={option.value}
           name={name}
           value={option.value}
           fillColor={fillColor}

package/src/components/SearchFilter/SearchFilter.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
-import { SearchFilterProps } from './types';
 import { useCallback } from 'react';
+import { FilterItemProps, FilterProps } from '@envive-ai/react-hooks/types';
+import { SearchFilterProps } from './types';
 import { SearchFilterHeader } from './SearchFilterHeader';
 import { useHasFilterStateChanged } from './useHasFilterStateChanged';
 import { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from './utils';
 import { ModalSheet } from '../ModalSheet';
-import { FilterItemProps, FilterProps } from '@envive-ai/react-hooks/types';
 import { ToggleButton } from '../ToggleButton';
 import { Accordion } from '../Accordion';
 import { RadioButtonGroup } from '../RadioButtonGroup';

package/src/components/SearchFilter/SearchFilterFooter.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { ButtonBase } from '../ButtonBase';
 import { FilterFooterProps } from '@envive-ai/react-hooks/types';
+import { ButtonBase } from '../ButtonBase';
 
 export const SearchFilterFooter = ({
   closeModal,

package/src/components/SearchFilter/SearchFilterHeader.tsx

@@ -23,7 +23,12 @@ export const SearchFilterHeader = ({
       <Text variant="body2" className="spiffy-tw-font-medium">
         Filters ({productCount})
       </Text>
-      <button onClick={closeModal} className="spiffy-tw-p-2">
+      <button
+        onClick={closeModal}
+        className="spiffy-tw-p-2"
+        type="button"
+        aria-label="Open Filter Menu"
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="14"