@envive-ai/react-toolkit 0.1.12 → 0.2.0

package/dist/{TextInput-DoM41M53.js → TextInput-BeHPlVHT.js}

@@ -1,4 +1,4 @@
-import { TextStyleVariantMap, getVariantPlaceholderClassNames } from "./textVariantClasses-D77TGEy1.js";
+import { TextStyleVariantMap, getVariantPlaceholderClassNames } from "./textVariantClasses-CRrTb43V.js";
 import React from "react";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";

package/dist/{TextInput-B3dTeD3q.cjs → TextInput-CGs4BY1q.cjs}

@@ -1,5 +1,5 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_textVariantClasses = require('./textVariantClasses-Dgz7Zaql.cjs');
+const require_textVariantClasses = require('./textVariantClasses-CBre7vXv.cjs');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");

package/dist/ToggleButton/index.cjs

@@ -1,6 +1,6 @@
-require('../textVariantClasses-Dgz7Zaql.cjs');
-require('../Text-MQjxqgZZ.cjs');
+require('../textVariantClasses-CBre7vXv.cjs');
+require('../Text-DllCE9_D.cjs');
 require('../Text-C8t_iEj6.cjs');
-const require_ToggleButton = require('../ToggleButton-CK_vkMvt.cjs');
+const require_ToggleButton = require('../ToggleButton-DfJZ8POQ.cjs');
 
 exports.ToggleButton = require_ToggleButton.ToggleButton;

package/dist/ToggleButton/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime27.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/ToggleButton/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.d.ts
 type ToggleButtonProps = {
@@ -25,6 +25,6 @@ declare const ToggleButton: ({
   icon,
   iconClassName,
   variant
-}: ToggleButtonProps) => react_jsx_runtime0.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/ToggleButton/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 { ToggleButton } from "../ToggleButton-GIVd2-Z4.js";
+import { ToggleButton } from "../ToggleButton-CRiPqTCb.js";
 
 export { ToggleButton };

package/dist/{ToggleButton-GIVd2-Z4.js → ToggleButton-CRiPqTCb.js}

@@ -1,4 +1,4 @@
-import { Text } from "./Text-Bod4OMPk.js";
+import { Text } from "./Text-BLzNhX4H.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/{ToggleButton-CK_vkMvt.cjs → ToggleButton-DfJZ8POQ.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 classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/{index-CFH3KUVw.d.cts → index-B9WeFNlO.d.cts}

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 import { FC } from "react";
+import { TestProps } from "@envive-ai/react-hooks/types";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
 //#region src/util/trim.d.ts
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime6.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime22.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,15 +271,12 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime6.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime22.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
   title: string;
   url: string;
-  searchResponseId?: string;
-  productResponseId?: string;
-  cardDisplayLocation: string;
   imageUrl?: string;
   originalPrice?: number;
   averageRating?: number;
@@ -290,7 +287,6 @@ interface ProductCardProps extends TestProps {
   layoutVariant?: ProductCardLayoutVariant;
   zoomOnHover?: boolean;
   aspectRatio?: '3:4' | 'square' | 'none';
-  clickPosition?: number | null;
   growWithContainer?: boolean;
   handleClick?: (clickedUrl: string) => void;
 }
@@ -312,7 +308,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime6.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime22.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-B8l3muO3.d.ts → index-CLGe_Pam.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime11 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_runtime5.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-Vck3pox6.d.ts → index-CeECGrFM.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime16.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime7.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,15 +271,12 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime16.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime7.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
   title: string;
   url: string;
-  searchResponseId?: string;
-  productResponseId?: string;
-  cardDisplayLocation: string;
   imageUrl?: string;
   originalPrice?: number;
   averageRating?: number;
@@ -290,7 +287,6 @@ interface ProductCardProps extends TestProps {
   layoutVariant?: ProductCardLayoutVariant;
   zoomOnHover?: boolean;
   aspectRatio?: '3:4' | 'square' | 'none';
-  clickPosition?: number | null;
   growWithContainer?: boolean;
   handleClick?: (clickedUrl: string) => void;
 }
@@ -312,7 +308,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime16.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime7.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime23 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_runtime23.JSX.Element;
 //#endregion
 export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

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

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

package/dist/{searchFilterSidebarVariants-DFfOTqjc.cjs → searchFilterSidebarVariants-NQhqq-NT.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-D-MZuBvt.cjs');
+const require_colorsConfig = require('./colorsConfig-CqCKftuM.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/dist/types-BhGjnuWx.d.cts

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

package/dist/types-CTOdb0G0.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -21,7 +21,7 @@
     "tailwind-preset.js"
   ],
   "scripts": {
-    "build": "tsdown",
+    "build": "npm run typecheck && tsdown",
     "build:watch": "tsdown --watch",
     "prepublish": "npm run build",
     "typecheck": "tsc"
@@ -45,13 +45,17 @@
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "tsdown": "^0.14.2",
-    "typescript": "~5.8.3"
+    "typescript": "^5.4.3"
   },
   "exports": {
     "./Accordion": {
       "import": "./dist/Accordion/index.js",
       "require": "./dist/Accordion/index.cjs"
     },
+    "./AnimatedChevron": {
+      "import": "./dist/AnimatedChevron/index.js",
+      "require": "./dist/AnimatedChevron/index.cjs"
+    },
     "./AppliedFiltersScrollbar": {
       "import": "./dist/AppliedFiltersScrollbar/index.js",
       "require": "./dist/AppliedFiltersScrollbar/index.cjs"
@@ -132,10 +136,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/atoms/search/types.ts

@@ -1,5 +1 @@
-export type SelectedFilterOption = {
-  id: string;
-  displayName: string;
-  value: string;
-};
+export type SearchInputVariant = 'standard';

package/src/components/AnimatedChevron/index.ts

@@ -0,0 +1 @@
+export * from './AnimatedChevron';

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: {