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

package/dist/components/SparkleAnimation/{index-BFqUibyY.d.ts → index-BMrS1PDU.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/components/SparkleAnimation/SparkleAnimation.d.ts
 interface SparkleAnimationProps {
@@ -10,7 +10,7 @@ declare const SparkleAnimation: ({
   color,
   className,
   animate
-}: SparkleAnimationProps) => react_jsx_runtime26.JSX.Element;
+}: SparkleAnimationProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
 //#region src/components/SparkleAnimation/types.d.ts
 declare enum SparkleAnimationOverride {

package/dist/components/SparkleAnimation/index.cjs

@@ -1,6 +1,4 @@
-require('../../jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
-require('../../FourPointStar-AQ9OSu0S.cjs');
-const require_SparkleAnimation = require('../../SparkleAnimation-BikAiAmb.cjs');
+const require_SparkleAnimation = require('../../SparkleAnimation-Bg5qax1t.cjs');
 
 exports.SparkleAnimation = require_SparkleAnimation.SparkleAnimation;
 exports.SparkleAnimationOverride = require_SparkleAnimation.SparkleAnimationOverride;

package/dist/components/SparkleAnimation/index.js

@@ -1,5 +1,3 @@
-import "../../jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
-import "../../FourPointStar-3DqnYmfN.js";
-import { n as SparkleAnimationOverride, t as SparkleAnimation } from "../../SparkleAnimation-szzXiTam.js";
+import { n as SparkleAnimationOverride, t as SparkleAnimation } from "../../SparkleAnimation-HY4cgwE3.js";
 
 export { SparkleAnimation, SparkleAnimationOverride };

package/dist/components/Spinner/{index-TKsPifGM.d.ts → index-C876igqb.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/Spinner/Spinner.d.ts
 type SpinnerProps = {
@@ -6,6 +6,6 @@ type SpinnerProps = {
 };
 declare const Spinner: ({
   className
-}: SpinnerProps) => react_jsx_runtime23.JSX.Element;
+}: SpinnerProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { Spinner };

package/dist/components/Spinner/index.cjs

@@ -1,3 +1,3 @@
-const require_Spinner = require('../../Spinner-7HblFCja.cjs');
+const require_Spinner = require('../../Spinner-CUrXDajS.cjs');
 
 exports.Spinner = require_Spinner.Spinner;

package/dist/components/Spinner/index.js

@@ -1,3 +1,3 @@
-import { t as Spinner } from "../../Spinner-OFbXMms8.js";
+import { t as Spinner } from "../../Spinner-CDDFWySo.js";
 
 export { Spinner };

package/dist/components/SuggestionButton/{index-BioM3QHW.d.ts → index-DfQRQGev.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SuggestionButton/types.d.ts
@@ -30,6 +30,6 @@ declare const SuggestionButton: ({
   dataAttributes,
   dataTestId,
   onClick
-}: SuggestionButtonProps) => react_jsx_runtime2.JSX.Element;
+}: SuggestionButtonProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS, SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS, SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS, SuggestionButton, SuggestionButtonVariant };

package/dist/components/SuggestionButton/index.cjs

@@ -1,12 +1,13 @@
-const require_chunk = require('../../chunk-CUT6urMc.cjs');
-require('../../Typography-Ds4gfOJz.cjs');
-require('../../jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
-const require_ButtonBase = require('../../ButtonBase-C44g6llb.cjs');
-const require_OutlinedStar = require('../../OutlinedStar-CC0V_jAK.cjs');
-const require_FourPointStar = require('../../FourPointStar-AQ9OSu0S.cjs');
+const require_chunk = require('../../chunk-CbDLau6x.cjs');
+require('../../Typography-Csg-nd_w.cjs');
+const require_ButtonBase = require('../../ButtonBase-Bm_QOyM1.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
 let react_jsx_runtime = require("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);
+let __envive_ai_react_icons_FourPointStar = require("@envive-ai/react-icons/FourPointStar");
+__envive_ai_react_icons_FourPointStar = require_chunk.__toESM(__envive_ai_react_icons_FourPointStar);
 
 //#region src/components/SuggestionButton/SuggestionButton.tsx
 const SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = "spiffy-suggestion-button-question-class";
@@ -169,8 +170,8 @@ const SuggestionButton = ({ variant, hoverVariant, isDisabled, content, boldText
 	].join(" ")}`;
 	const getIcon = () => {
 		if (isAnswer) return void 0;
-		if (variant === "transparentDark") return require_OutlinedStar.OutlinedStar_default;
-		return require_FourPointStar.FourPointStar_default;
+		if (variant === "transparentDark") return __envive_ai_react_icons_OutlinedStar.default;
+		return __envive_ai_react_icons_FourPointStar.default;
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
 		text: content,

package/dist/components/SuggestionButton/index.js

@@ -1,10 +1,9 @@
 import "../../Typography-xehJH05l.js";
-import "../../jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
-import { t as ButtonBase } from "../../ButtonBase-Cjo-fBg2.js";
-import { t as OutlinedStar_default } from "../../OutlinedStar-WWs3gRwt.js";
-import { t as FourPointStar_default } from "../../FourPointStar-3DqnYmfN.js";
+import { t as ButtonBase } from "../../ButtonBase-CT397aT3.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
+import OutlinedStar from "@envive-ai/react-icons/OutlinedStar";
+import FourPointStar from "@envive-ai/react-icons/FourPointStar";
 
 //#region src/components/SuggestionButton/SuggestionButton.tsx
 const SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = "spiffy-suggestion-button-question-class";
@@ -167,8 +166,8 @@ const SuggestionButton = ({ variant, hoverVariant, isDisabled, content, boldText
 	].join(" ")}`;
 	const getIcon = () => {
 		if (isAnswer) return void 0;
-		if (variant === "transparentDark") return OutlinedStar_default;
-		return FourPointStar_default;
+		if (variant === "transparentDark") return OutlinedStar;
+		return FourPointStar;
 	};
 	return /* @__PURE__ */ jsx(ButtonBase, {
 		text: content,

package/dist/components/TextInput/{index-DAhxej1K.d.ts → index-CkQtHiR9.d.ts}

@@ -1,5 +1,5 @@
-import { r as TypographyVariantMap } from "../../typographyVariantClasses-_oNpv-aN.js";
-import "../../index-DXGw5Z56.js";
+import { r as TypographyVariantMap } from "../../typographyVariantClasses-CrT5OfVw.js";
+import "../../index-Cr8VXccr.js";
 import React from "react";
 
 //#region src/components/TextInput/TextInput.d.ts

package/dist/components/TextInput/index.cjs

@@ -1,4 +1,4 @@
-require('../../Typography-Ds4gfOJz.cjs');
-const require_TextInput = require('../../TextInput-CaynCoDf.cjs');
+require('../../Typography-Csg-nd_w.cjs');
+const require_TextInput = require('../../TextInput-DfCocKVm.cjs');
 
 exports.TextInput = require_TextInput.TextInput;

package/dist/components/TextInput/index.js

@@ -1,4 +1,4 @@
 import "../../Typography-xehJH05l.js";
-import { t as TextInput } from "../../TextInput-CsdOvLBQ.js";
+import { t as TextInput } from "../../TextInput-PtrUXoZo.js";
 
 export { TextInput };

package/dist/components/ToggleButton/{index-eLDrp4ic.d.cts → index-CpURpMq5.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime16 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_runtime12.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime16.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/components/ToggleButton/{index-pFQuGdoj.d.ts → index-DFz4kch0.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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_runtime5.JSX.Element;
+}: ToggleButtonProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ToggleButton, ToggleButtonProps, ToggleButtonVariant };

package/dist/components/ToggleButton/index.cjs

@@ -1,4 +1,4 @@
-require('../../Typography-Ds4gfOJz.cjs');
-const require_ToggleButton = require('../../ToggleButton-Dxk3U1hR.cjs');
+require('../../Typography-Csg-nd_w.cjs');
+const require_ToggleButton = require('../../ToggleButton-BhBEOjxO.cjs');
 
 exports.ToggleButton = require_ToggleButton.ToggleButton;

package/dist/components/ToggleButton/index.js

@@ -1,4 +1,4 @@
 import "../../Typography-xehJH05l.js";
-import { t as ToggleButton } from "../../ToggleButton-D8--AKKK.js";
+import { t as ToggleButton } from "../../ToggleButton-BTz_zIdc.js";
 
 export { ToggleButton };

package/dist/components/Typography/{index-ymH7f3jB.d.ts → index-DE1Nhjra.d.ts}

@@ -1,3 +1,3 @@
-import { i as getVariantPlaceholderClassNames, n as TypographyDomVariantMap, r as TypographyVariantMap, t as ElementTypes } from "../../typographyVariantClasses-_oNpv-aN.js";
-import { n as TypographyProps, t as Typography } from "../../index-DXGw5Z56.js";
+import { i as getVariantPlaceholderClassNames, n as TypographyDomVariantMap, r as TypographyVariantMap, t as ElementTypes } from "../../typographyVariantClasses-CrT5OfVw.js";
+import { n as TypographyProps, t as Typography } from "../../index-Cr8VXccr.js";
 export { ElementTypes, Typography, TypographyDomVariantMap, TypographyProps, TypographyVariantMap, getVariantPlaceholderClassNames };

package/dist/components/Typography/index.cjs

@@ -1,4 +1,4 @@
-const require_Typography = require('../../Typography-Ds4gfOJz.cjs');
+const require_Typography = require('../../Typography-Csg-nd_w.cjs');
 
 exports.Typography = require_Typography.Typography;
 exports.TypographyDomVariantMap = require_Typography.TypographyDomVariantMap;

package/dist/{index-BCBtAzCc.d.ts → index-1GZFptEC.d.cts}

@@ -1,6 +1,6 @@
-import { FC } from "react";
-import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
+import { FC } from "react";
 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_runtime29.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime7.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime29.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime7.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -308,7 +308,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   onClick
-}: ProductCardProps) => react_jsx_runtime29.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime7.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-BiKhzraQ.d.cts → index-CBI4Lqsm.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
@@ -41,6 +41,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime22.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { SearchFilterSidebarVariant as a, CloseIconVariant$1 as i, SearchResultsFilterProps as n, searchFilterSidebarVariantClasses as r, SearchResultsFilter as t };

package/dist/{index-DXGw5Z56.d.ts → index-Cr8VXccr.d.ts}

@@ -1,4 +1,4 @@
-import { r as TypographyVariantMap, t as ElementTypes } from "./typographyVariantClasses-_oNpv-aN.js";
+import { r as TypographyVariantMap, t as ElementTypes } from "./typographyVariantClasses-CrT5OfVw.js";
 import React from "react";
 
 //#region src/components/Typography/Typography.d.ts

package/dist/{index-DK0xpfMg.d.ts → index-pZZXXUG_.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
@@ -41,6 +41,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime11.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { SearchFilterSidebarVariant as a, CloseIconVariant$1 as i, SearchResultsFilterProps as n, searchFilterSidebarVariantClasses as r, SearchResultsFilter as t };

package/dist/{index-CzbumwVZ.d.cts → index-yDKT5Bem.d.ts}

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime25 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/react-hooks/types";
 import { FC } from "react";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
+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_runtime25.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime17.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime25.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime17.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -308,7 +308,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   onClick
-}: ProductCardProps) => react_jsx_runtime25.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime17.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{searchFilterSidebarVariants-CjyRGKK_.cjs → searchFilterSidebarVariants-C61Byr1S.cjs}

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

package/dist/{searchFilterSidebarVariants-gkgkflXx.js → searchFilterSidebarVariants-DcwlBfvY.js}

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

package/dist/util/index.cjs

@@ -1,4 +1,4 @@
-const require_chunk = require('../chunk-CUT6urMc.cjs');
+const require_chunk = require('../chunk-CbDLau6x.cjs');
 const require_formatPrice = require('../formatPrice-CyfkjZ3R.cjs');
 let react = require("react");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.2.13-arthur-1",
+  "version": "0.2.13",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -31,7 +31,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.8",
+    "@envive-ai/react-hooks": "0.2.9",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "react-icons": "^5.0.1",
@@ -45,16 +45,29 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
     "@spiffy-ai/commerce-api-client": "^1.1.0-SNAPSHOT.202510160819",
+    "@storybook/addon-a11y": "^9.1.4",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-vitest": "^9.1.10",
     "@storybook/react-vite": "^9.1.4",
     "@types/node": "^24.3.2",
     "@types/react": "^19.1.12",
+    "@vitejs/plugin-react": "^5.0.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "autoprefixer": "^10.4.21",
+    "playwright": "^1.56.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "tsdown": "^0.14.2",
     "tsx": "^4.20.6",
     "typescript": "^5.4.3",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4"
   },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "*"
+  },
   "exports": {
     "./Accordion": {
       "import": "./dist/components/Accordion/index.js",

package/src/components/Accordion/Accordion.tsx

@@ -46,7 +46,10 @@ export const Accordion = ({ title, content }: AccordionProps) => {
         className={titleWrapperClasses}
         onClick={() => setIsOpen(!isOpen)}
       >
-        <Typography variant="body4" className={titleClasses}>
+        <Typography
+          variant="body4"
+          className={titleClasses}
+        >
           {title}
         </Typography>
         <motion.div

package/src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx

@@ -37,8 +37,11 @@ export const AppliedFiltersScrollbar = ({
   const iconColor = 'currentColor'; // match with text color
 
   return (
-    <ScrollContainer className={filterBarClassNames} hideScrollbars>
-      {selectedFilterOptions.map((filter) => (
+    <ScrollContainer
+      className={filterBarClassNames}
+      hideScrollbars
+    >
+      {selectedFilterOptions.map(filter => (
         <button
           key={filter.id}
           className={buttonClasses}

package/src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx

@@ -23,7 +23,10 @@ export const DynamicFiltersScrollbar = ({
   filterHoverClasses,
   onToggleDynamicFilter,
 }: DynamicFiltersScrollbarProps) => (
-  <ScrollContainer className={filterBarClassNames} hideScrollbars>
+  <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 ',

package/src/components/FilterScrollbar/AppliedFiltersScrollbar.tsx

@@ -37,8 +37,11 @@ export const AppliedFiltersScrollbar = ({
   const iconColor = 'currentColor'; // match with text color
 
   return (
-    <ScrollContainer className={filterBarClassNames} hideScrollbars>
-      {selectedFilterOptions.map((filter) => (
+    <ScrollContainer
+      className={filterBarClassNames}
+      hideScrollbars
+    >
+      {selectedFilterOptions.map(filter => (
         <button
           key={filter.id}
           className={buttonClasses}

package/src/components/FilterScrollbar/DynamicFiltersScrollbar.tsx

@@ -23,7 +23,10 @@ export const DynamicFiltersScrollbar = ({
   filterHoverClasses,
   onToggleDynamicFilter,
 }: DynamicFiltersScrollbarProps) => (
-  <ScrollContainer className={filterBarClassNames} hideScrollbars>
+  <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 ',

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

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

package/src/components/ModalSheet/desktop/index.tsx

@@ -97,7 +97,7 @@ export const ModalSheetDesktop = ({
           exit={{ right, display: isHidden }}
           transition={{ duration: animationDuration, ease: 'easeIn' }}
           style={{ width: desktopWidth }}
-          onClick={(e) => e.stopPropagation()}
+          onClick={e => e.stopPropagation()}
         >
           <div className={contentClassNames}>
             <div className={headerClassNames}>

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

@@ -94,7 +94,7 @@ export const ModalSheetMobile = ({
           animate={{ bottom, display: isHidden }}
           exit={{ bottom, display: isHidden }}
           transition={{ duration: animationDuration, ease: 'easeIn' }}
-          onClick={(e) => e.stopPropagation()}
+          onClick={e => e.stopPropagation()}
         >
           <div className={contentClassNames}>
             <div className={headerClassNames}>

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

@@ -35,7 +35,10 @@ export const ModalSheetMobileHeader = ({
       onTouchStart={handleHeaderClick}
       onMouseDown={handleHeaderClick}
     >
-      <AnimatedChevron animationKey={animationKey} chevronColor={chevronColor} />
+      <AnimatedChevron
+        animationKey={animationKey}
+        chevronColor={chevronColor}
+      />
       {headerContent}
     </motion.div>
   );

package/src/components/ProductCard/ProductCard.tsx

@@ -7,18 +7,18 @@ import { TestProps } from '@envive-ai/react-hooks/types';
 import { useImageResolver } from '@envive-ai/react-hooks/hooks/ImageResolver';
 import { PRODUCT_CARD_TESTID } from '@envive-ai/react-hooks/config';
 import {
+  productCardLayoutVariantClasses,
   variantClassMap,
   variantHoverClassMap,
-  productCardLayoutVariantClasses,
   variantTitleColorMap,
 } from './productCardVariants';
 import { ImageWithFallback } from '../ImageWithFallback';
 import { Spinner } from '../Spinner';
 import {
   ProductCardConfig,
-  ProductCardVariant,
   ProductCardHoverVariant,
   ProductCardLayoutVariant,
+  ProductCardVariant,
 } from './types';
 
 const formatReviews = (stars: number) =>
@@ -213,11 +213,11 @@ export const ProductCard = ({
     linkClassnames,
     zoomOnHover
       ? [
-        'spiffy-tw-transition-transform',
-        'spiffy-tw-duration-200',
-        'spiffy-tw-origin-top',
-        'hover:spiffy-tw-scale-105',
-      ]
+          'spiffy-tw-transition-transform',
+          'spiffy-tw-duration-200',
+          'spiffy-tw-origin-top',
+          'hover:spiffy-tw-scale-105',
+        ]
       : [],
   );
 
@@ -264,8 +264,16 @@ export const ProductCard = ({
   );
 
   return (
-    <div className={containerClassnames} data-testid={dataTestId ?? PRODUCT_CARD_TESTID}>
-      <a href={url} onClick={() => handleClick()} target="_self" draggable={false}>
+    <div
+      className={containerClassnames}
+      data-testid={dataTestId ?? PRODUCT_CARD_TESTID}
+    >
+      <a
+        href={url}
+        onClick={() => handleClick()}
+        target="_self"
+        draggable={false}
+      >
         <div className={verticalContainerClassnames}>
           <div className={imageClipContainerClassnames}>
             <div className={imageContainerClassnames}>
@@ -273,14 +281,17 @@ export const ProductCard = ({
                 <ImageWithFallback
                   src={resolve(imageUrl, layoutVariant === 'tall' ? 300 : 178)}
                   alt={title}
-                  fallback={<Spinner className="spiffy-tw-w-6 spiffy-tw-h-6" />}
+                  fallback={<Spinner className="spiffy-tw-h-6 spiffy-tw-w-6" />}
                   imageClassnames={imageClassnames}
                 />
               )}
             </div>
           </div>
           <div className={contentClassnames}>
-            <Typography variant="h4" className={productTitleClassnames}>
+            <Typography
+              variant="h4"
+              className={productTitleClassnames}
+            >
               {title}
             </Typography>
             <div className={priceAndRatingContainerClassnames}>
@@ -292,7 +303,10 @@ export const ProductCard = ({
                 />
               )}
               {averageRating && numberReviews && (
-                <RatingSummary stars={averageRating} reviewCount={numberReviews} />
+                <RatingSummary
+                  stars={averageRating}
+                  reviewCount={numberReviews}
+                />
               )}
             </div>
           </div>

package/src/components/ProductCard/productCardVariants.ts

@@ -1,7 +1,7 @@
 import type {
-  ProductCardVariant,
   ProductCardHoverVariant,
   ProductCardLayoutVariant,
+  ProductCardVariant,
 } from './types';
 
 /**

package/src/components/ProductGrid/ProductGrid.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { SearchResponseProductAttributes } from '@envive-ai/react-hooks/application/models';
 import { productGridVariantClasses } from './productGridVariants';
-import { ProductGridVariant, ProductCardConfig, ProductCard } from '../ProductCard';
+import { ProductCard, ProductCardConfig, ProductGridVariant } from '../ProductCard';
 
 interface ProductGridProps {
   productList: SearchResponseProductAttributes['attributes'][];
@@ -38,7 +38,10 @@ export const ProductGrid = ({
   return (
     <div className={productGridClasses}>
       {productList.map((product: (typeof productList)[0], index: number) => (
-        <div key={product.id} className={cardContainerClasses}>
+        <div
+          key={product.id}
+          className={cardContainerClasses}
+        >
           <ProductCard
             productCardConfig={productCardConfig}
             merchantShortName={merchantShortName}