@envive-ai/react-toolkit 0.2.11 → 0.2.12

package/dist/{SearchResultsStates-D62WbDTD.js → SearchResultsStates-DrGtw0pM.js}

@@ -1,35 +1,62 @@
-import { Typography } from "./Typography-C3QmJzFK.js";
-import { AppliedFiltersScrollbar, DynamicFiltersScrollbar } from "./DynamicFiltersScrollbar-D8OqC4DA.js";
-import { ProductCardSkeleton } from "./ProductCard-BiWAcPO4.js";
-import { ProductGrid, productGridVariantClasses } from "./ProductGrid-B1RtE58G.js";
-import { searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-C_rWIcxf.js";
-import { SparkleAnimation } from "./SparkleAnimation-BYDUEqWX.js";
+import { t as Typography } from "./Typography-xehJH05l.js";
+import { n as AppliedFiltersScrollbar, t as DynamicFiltersScrollbar } from "./DynamicFiltersScrollbar-CibstqNd.js";
+import { t as ProductCardSkeleton } from "./ProductCard-BoyYu6mI.js";
+import { n as productGridVariantClasses, t as ProductGrid } from "./ProductGrid-DmtSXfyE.js";
+import { t as RecommendedProducts } from "./RecommendedProducts-LalI8aVC.js";
+import { t as searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-DcwlBfvY.js";
+import { t as SparkleAnimation } from "./SparkleAnimation-BSI_34HX.js";
 import { motion } from "framer-motion";
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 import Sparkles from "@envive-ai/react-icons/Sparkles";
 
 //#region src/components/SearchResultsStates/NoSearchResultsFound.tsx
-const NoSearchResultsFound = ({ containerPaddingClasses, includeBottomMargin = false, noResultsFoundText, sparkleIconColor = "var(--spiffy-colors-accent-primary)" }) => {
-	const containerClasses = classNames(containerPaddingClasses, includeBottomMargin ? "spiffy-tw-mb-[100vh]" : "", "spiffy-tw-mt-6");
-	return /* @__PURE__ */ jsx("div", {
+const NoSearchResultsFound = ({ containerPaddingClasses, noResultsFoundText, sparkleIconColor = "var(--spiffy-colors-accent-primary)", recommendedProducts, searchText, merchantShortName, productGridVariant }) => {
+	const containerClasses = classNames(containerPaddingClasses, "spiffy-tw-mt-6", { "spiffy-tw-mb-[100vh]": recommendedProducts.length === 0 });
+	let textPrompt;
+	if (recommendedProducts.length > 0) textPrompt = noResultsFoundText ? /* @__PURE__ */ jsx("span", { children: noResultsFoundText }) : /* @__PURE__ */ jsxs("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ jsxs("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}".`]
+		}),
+		" Try changing your filters or adjusting your search query. In the meantime, explore some of our top-selling products below."
+	] });
+	else textPrompt = /* @__PURE__ */ jsxs("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ jsxs("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}."`]
+		}),
+		" Try changing your filters or adjusting your search query."
+	] });
+	return /* @__PURE__ */ jsxs("div", {
 		className: containerClasses,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
 			className: "spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2",
 			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Sparkles, {
 				className: "spiffy-tw-w-[24px] spiffy-tw-h-[24px]",
 				style: { color: sparkleIconColor }
 			}) }), /* @__PURE__ */ jsx(Typography, {
 				variant: "body2",
-				children: noResultsFoundText || "I'm sorry, I wasn't able to find an exact match. Try changing your filters or adjusting your search query."
+				children: textPrompt
 			})]
-		})
+		}), /* @__PURE__ */ jsx(RecommendedProducts, {
+			retrievedProducts: recommendedProducts,
+			merchantShortName,
+			productCardConfig: {
+				variant: "minimal",
+				hoverVariant: "none",
+				layoutVariant: "square"
+			},
+			productGridVariant
+		})]
 	});
 };
 
 //#endregion
 //#region src/components/SearchResultsStates/SearchResultsGrid.tsx
-const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter }) => {
+const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter, onProductClick }) => {
 	const sharedFilterBarClasses = classNames("spiffy-suggestion-bar", "spiffy-tw-no-scrollbar", "spiffy-tw-flex", "spiffy-tw-flex-row", "spiffy-tw-gap-2", "spiffy-tw-mb-[16px]", "spiffy-tw-overflow-x-scroll", containerXPaddingClasses);
 	const filterBarClasses = classNames(sharedFilterBarClasses, "spiffy-tw-mt-[24px]");
 	const appliedFilterBarClasses = classNames(sharedFilterBarClasses, "spiffy-tw-mb-[32px]", "spiffy-tw-mt-[8px]");
@@ -61,7 +88,8 @@ const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName,
 				productGridVariant,
 				productGridClasses,
 				productCardConfig,
-				merchantShortName
+				merchantShortName,
+				onProductClick
 			})
 		]
 	});
@@ -107,4 +135,4 @@ const SearchResultsLoadingGrid = ({ productGridVariant, productGridClasses, spar
 };
 
 //#endregion
-export { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };
+export { SearchResultsGrid as n, NoSearchResultsFound as r, SearchResultsLoadingGrid as t };

package/dist/{SparkleAnimation-BFAj73CF.cjs → SparkleAnimation-B5A_NCuy.cjs}

@@ -1,25 +1,25 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-let framer_motion = require("framer-motion");
-framer_motion = require_chunk.__toESM(framer_motion);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let react = require("react");
-react = require_chunk.__toESM(react);
+let framer_motion = require("framer-motion");
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 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/SparkleAnimation/SparkleAnimation.tsx
-const ANIMATION_CYCLE_TIME = 1e3;
-const STAR_DELAY_OFFSET = 250;
-var SparkleAnimationOverride = /* @__PURE__ */ function(SparkleAnimationOverride$1) {
+//#region src/components/SparkleAnimation/types.ts
+let SparkleAnimationOverride = /* @__PURE__ */ function(SparkleAnimationOverride$1) {
 	SparkleAnimationOverride$1["CONTAINER"] = "spiffy-sparkle-animation-container";
 	SparkleAnimationOverride$1["STAR_ONE_CONTAINER"] = "spiffy-sparkle-animation-star-one-container";
 	SparkleAnimationOverride$1["STAR_TWO_CONTAINER"] = "spiffy-sparkle-animation-star-two-container";
 	SparkleAnimationOverride$1["STAR_THREE_CONTAINER"] = "spiffy-sparkle-animation-star-three-container";
 	return SparkleAnimationOverride$1;
-}(SparkleAnimationOverride || {});
+}({});
+
+//#endregion
+//#region src/components/SparkleAnimation/SparkleAnimation.tsx
+const ANIMATION_CYCLE_TIME = 1e3;
+const STAR_DELAY_OFFSET = 250;
 const SparkleAnimation = ({ color, className, animate = true }) => {
 	const [mainStarScale, setMainStarScale] = (0, react.useState)(animate ? 0 : 1);
 	const [smallStar1Scale, setSmallStar1Scale] = (0, react.useState)(animate ? 0 : 1);
@@ -89,4 +89,10 @@ Object.defineProperty(exports, 'SparkleAnimation', {
   get: function () {
     return SparkleAnimation;
   }
+});
+Object.defineProperty(exports, 'SparkleAnimationOverride', {
+  enumerable: true,
+  get: function () {
+    return SparkleAnimationOverride;
+  }
 });

package/dist/{SparkleAnimation-BYDUEqWX.js → SparkleAnimation-BSI_34HX.js}

@@ -1,19 +1,22 @@
-import { motion } from "framer-motion";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 import FourPointStar from "@envive-ai/react-icons/FourPointStar";
 
-//#region src/components/SparkleAnimation/SparkleAnimation.tsx
-const ANIMATION_CYCLE_TIME = 1e3;
-const STAR_DELAY_OFFSET = 250;
-var SparkleAnimationOverride = /* @__PURE__ */ function(SparkleAnimationOverride$1) {
+//#region src/components/SparkleAnimation/types.ts
+let SparkleAnimationOverride = /* @__PURE__ */ function(SparkleAnimationOverride$1) {
 	SparkleAnimationOverride$1["CONTAINER"] = "spiffy-sparkle-animation-container";
 	SparkleAnimationOverride$1["STAR_ONE_CONTAINER"] = "spiffy-sparkle-animation-star-one-container";
 	SparkleAnimationOverride$1["STAR_TWO_CONTAINER"] = "spiffy-sparkle-animation-star-two-container";
 	SparkleAnimationOverride$1["STAR_THREE_CONTAINER"] = "spiffy-sparkle-animation-star-three-container";
 	return SparkleAnimationOverride$1;
-}(SparkleAnimationOverride || {});
+}({});
+
+//#endregion
+//#region src/components/SparkleAnimation/SparkleAnimation.tsx
+const ANIMATION_CYCLE_TIME = 1e3;
+const STAR_DELAY_OFFSET = 250;
 const SparkleAnimation = ({ color, className, animate = true }) => {
 	const [mainStarScale, setMainStarScale] = useState(animate ? 0 : 1);
 	const [smallStar1Scale, setSmallStar1Scale] = useState(animate ? 0 : 1);
@@ -78,4 +81,4 @@ const SparkleAnimation = ({ color, className, animate = true }) => {
 };
 
 //#endregion
-export { SparkleAnimation };
+export { SparkleAnimationOverride as n, SparkleAnimation as t };

package/dist/{Spinner-D2HbRsuw.js → Spinner-CDDFWySo.js}

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Spinner/Spinner.tsx
 const Spinner = ({ className }) => {
@@ -35,4 +35,4 @@ const Spinner = ({ className }) => {
 };
 
 //#endregion
-export { Spinner };
+export { Spinner as t };

package/dist/{Spinner-Ccy6VFEp.cjs → Spinner-FQpy5bGu.cjs}

@@ -1,8 +1,7 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Spinner/Spinner.tsx
 const Spinner = ({ className }) => {

package/dist/{TextInput-CYTko3-n.cjs → TextInput-Do5-j1V_.cjs}

@@ -1,16 +1,14 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 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");
 
 //#region src/components/TextInput/TextInput.tsx
-const TextInput = react.default.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant,...rest }, ref) => {
-	const variantClassNames = placeholderVariant ? require_Typography.TypographyVariantMap[placeholderVariant] : {};
-	const placeholderVariantClassNames = require_Typography.getVariantPlaceholderClassNames(variantClassNames);
+const TextInput = react.default.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant, ...rest }, ref) => {
+	const placeholderVariantClassNames = require_Typography.getVariantPlaceholderClassNames(placeholderVariant ? require_Typography.TypographyVariantMap[placeholderVariant] : {});
 	const inputClasses = (0, classnames.default)([
 		{
 			"spiffy-text-input": true,

package/dist/{TextInput-CmxnphaT.js → TextInput-PtrUXoZo.js}

@@ -1,12 +1,11 @@
-import { TypographyVariantMap, getVariantPlaceholderClassNames } from "./Typography-C3QmJzFK.js";
-import { jsx } from "react/jsx-runtime";
+import { i as getVariantPlaceholderClassNames, r as TypographyVariantMap } from "./Typography-xehJH05l.js";
 import React from "react";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/TextInput/TextInput.tsx
-const TextInput = React.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant,...rest }, ref) => {
-	const variantClassNames = placeholderVariant ? TypographyVariantMap[placeholderVariant] : {};
-	const placeholderVariantClassNames = getVariantPlaceholderClassNames(variantClassNames);
+const TextInput = React.forwardRef(({ className, borderRadius, borderColorClass, placeholderVariant, ...rest }, ref) => {
+	const placeholderVariantClassNames = getVariantPlaceholderClassNames(placeholderVariant ? TypographyVariantMap[placeholderVariant] : {});
 	const inputClasses = classNames([
 		{
 			"spiffy-text-input": true,
@@ -28,4 +27,4 @@ const TextInput = React.forwardRef(({ className, borderRadius, borderColorClass,
 });
 
 //#endregion
-export { TextInput };
+export { TextInput as t };

package/dist/{ToggleButton-V9Qsaks7.js → ToggleButton-BTz_zIdc.js}

@@ -1,6 +1,6 @@
-import { Typography } from "./Typography-C3QmJzFK.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as Typography } from "./Typography-xehJH05l.js";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ToggleButton/ToggleButton.tsx
 const toggleButtonVariants = { default: {
@@ -57,4 +57,4 @@ const ToggleButton = ({ isSelected, onClick, label, buttonClassName, labelClassN
 };
 
 //#endregion
-export { ToggleButton };
+export { ToggleButton as t };

package/dist/{ToggleButton-CvxNLMe_.cjs → ToggleButton-CmxTz-ou.cjs}

@@ -1,9 +1,8 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
 const require_Typography = require('./Typography-Ds4gfOJz.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ToggleButton/ToggleButton.tsx
 const toggleButtonVariants = { default: {

package/dist/{Typography-C3QmJzFK.js → Typography-xehJH05l.js}

@@ -147,4 +147,4 @@ const Typography = ({ children, className, style, noOfLines, testId, elementType
 };
 
 //#endregion
-export { Typography, TypographyDomVariantMap, TypographyVariantMap, getVariantPlaceholderClassNames };
+export { getVariantPlaceholderClassNames as i, TypographyDomVariantMap as n, TypographyVariantMap as r, Typography as t };

package/dist/colorsConfig-BjdoRtRK.js

@@ -0,0 +1,26 @@
+//#region src/models/colorsConfig.ts
+var ColorNames = /* @__PURE__ */ function(ColorNames$1) {
+	ColorNames$1["TextPrimary"] = "text-primary";
+	ColorNames$1["TextSecondary"] = "text-secondary";
+	ColorNames$1["TextAccent"] = "text-accent";
+	ColorNames$1["TextLink"] = "text-link";
+	ColorNames$1["TextLight"] = "text-light";
+	ColorNames$1["BackgroundPrimary"] = "background-primary";
+	ColorNames$1["BackgroundSecondary"] = "background-secondary";
+	ColorNames$1["BackgroundSecondaryDark"] = "background-secondary-dark";
+	ColorNames$1["BackgroundTertiary"] = "background-tertiary";
+	ColorNames$1["BackgroundDark"] = "background-dark";
+	ColorNames$1["BackgroundLight"] = "background-light";
+	ColorNames$1["BackgroundSaturated"] = "background-saturated";
+	ColorNames$1["BorderLight"] = "border-light";
+	ColorNames$1["BorderMedium"] = "border-medium";
+	ColorNames$1["BorderDark"] = "border-dark";
+	ColorNames$1["BorderOutline"] = "border-outline";
+	ColorNames$1["AccentPrimary"] = "accent-primary";
+	ColorNames$1["AccentSecondary"] = "accent-secondary";
+	return ColorNames$1;
+}(ColorNames || {});
+const colorVar = (color) => `var(--spiffy-colors-${color})`;
+
+//#endregion
+export { colorVar as n, ColorNames as t };

package/dist/colorsConfig-D-MZuBvt.cjs

@@ -0,0 +1,38 @@
+
+//#region src/models/colorsConfig.ts
+var ColorNames = /* @__PURE__ */ function(ColorNames$1) {
+	ColorNames$1["TextPrimary"] = "text-primary";
+	ColorNames$1["TextSecondary"] = "text-secondary";
+	ColorNames$1["TextAccent"] = "text-accent";
+	ColorNames$1["TextLink"] = "text-link";
+	ColorNames$1["TextLight"] = "text-light";
+	ColorNames$1["BackgroundPrimary"] = "background-primary";
+	ColorNames$1["BackgroundSecondary"] = "background-secondary";
+	ColorNames$1["BackgroundSecondaryDark"] = "background-secondary-dark";
+	ColorNames$1["BackgroundTertiary"] = "background-tertiary";
+	ColorNames$1["BackgroundDark"] = "background-dark";
+	ColorNames$1["BackgroundLight"] = "background-light";
+	ColorNames$1["BackgroundSaturated"] = "background-saturated";
+	ColorNames$1["BorderLight"] = "border-light";
+	ColorNames$1["BorderMedium"] = "border-medium";
+	ColorNames$1["BorderDark"] = "border-dark";
+	ColorNames$1["BorderOutline"] = "border-outline";
+	ColorNames$1["AccentPrimary"] = "accent-primary";
+	ColorNames$1["AccentSecondary"] = "accent-secondary";
+	return ColorNames$1;
+}(ColorNames || {});
+const colorVar = (color) => `var(--spiffy-colors-${color})`;
+
+//#endregion
+Object.defineProperty(exports, 'ColorNames', {
+  enumerable: true,
+  get: function () {
+    return ColorNames;
+  }
+});
+Object.defineProperty(exports, 'colorVar', {
+  enumerable: true,
+  get: function () {
+    return colorVar;
+  }
+});

package/dist/{Accordion/index.d.ts → components/Accordion/index-BPofgdcd.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/components/Accordion/Accordion.d.ts
 interface AccordionProps {
@@ -8,6 +8,6 @@ interface AccordionProps {
 declare const Accordion: ({
   title,
   content
-}: AccordionProps) => react_jsx_runtime25.JSX.Element;
+}: AccordionProps) => react_jsx_runtime27.JSX.Element;
 //#endregion
 export { Accordion };

package/dist/components/Accordion/index.cjs

@@ -0,0 +1,4 @@
+require('../../Typography-Ds4gfOJz.cjs');
+const require_Accordion = require('../../Accordion-B0TzPN3m.cjs');
+
+exports.Accordion = require_Accordion.Accordion;

package/dist/components/Accordion/index.js

@@ -0,0 +1,4 @@
+import "../../Typography-xehJH05l.js";
+import { t as Accordion } from "../../Accordion-D8Vm8J1y.js";
+
+export { Accordion };

package/dist/{AnimatedChevron/index.d.cts → components/AnimatedChevron/index-Bvff3AGS.d.ts}

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime23 from "react/jsx-runtime";
 import { MotionValue } from "framer-motion";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/AnimatedChevron/AnimatedChevron.d.ts
 interface AnimatedChevronProps {
@@ -9,6 +9,6 @@ interface AnimatedChevronProps {
 declare const AnimatedChevron: ({
   animationKey,
   chevronColor
-}: AnimatedChevronProps) => react_jsx_runtime23.JSX.Element;
+}: AnimatedChevronProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
 export { AnimatedChevron };

package/dist/{AnimatedChevron/index.d.ts → components/AnimatedChevron/index-BwQ6tJL8.d.cts}

@@ -1,5 +1,5 @@
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 import { MotionValue } from "framer-motion";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/components/AnimatedChevron/AnimatedChevron.d.ts
 interface AnimatedChevronProps {
@@ -9,6 +9,6 @@ interface AnimatedChevronProps {
 declare const AnimatedChevron: ({
   animationKey,
   chevronColor
-}: AnimatedChevronProps) => react_jsx_runtime27.JSX.Element;
+}: AnimatedChevronProps) => react_jsx_runtime24.JSX.Element;
 //#endregion
 export { AnimatedChevron };

package/dist/components/AnimatedChevron/index.cjs

@@ -0,0 +1,3 @@
+const require_AnimatedChevron = require('../../AnimatedChevron-9xf90bpP.cjs');
+
+exports.AnimatedChevron = require_AnimatedChevron.AnimatedChevron;

package/dist/components/AnimatedChevron/index.js

@@ -0,0 +1,3 @@
+import { t as AnimatedChevron } from "../../AnimatedChevron-DghLnmlM.js";
+
+export { AnimatedChevron };

package/dist/{AppliedFiltersScrollbar/index.d.ts → components/AppliedFiltersScrollbar/index-BKNoroAl.d.ts}

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
-import { SelectedFilterOption } from "@envive-ai/types";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
+import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
 
 //#region src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.d.ts
 interface AppliedFiltersScrollbarProps {
@@ -17,6 +17,6 @@ declare const AppliedFiltersScrollbar: ({
   filterHoverClasses,
   appliedFilterBackgroundClasses,
   onRemoveFilter
-}: AppliedFiltersScrollbarProps) => react_jsx_runtime15.JSX.Element;
+}: AppliedFiltersScrollbarProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { AppliedFiltersScrollbar };

package/dist/{AppliedFiltersScrollbar/index.d.cts → components/AppliedFiltersScrollbar/index-DADY550R.d.cts}

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime21 from "react/jsx-runtime";
-import { SelectedFilterOption } from "@envive-ai/types";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
 
 //#region src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.d.ts
 interface AppliedFiltersScrollbarProps {
@@ -17,6 +17,6 @@ declare const AppliedFiltersScrollbar: ({
   filterHoverClasses,
   appliedFilterBackgroundClasses,
   onRemoveFilter
-}: AppliedFiltersScrollbarProps) => react_jsx_runtime21.JSX.Element;
+}: AppliedFiltersScrollbarProps) => react_jsx_runtime13.JSX.Element;
 //#endregion
 export { AppliedFiltersScrollbar };

package/dist/{AppliedFiltersScrollbar → components/AppliedFiltersScrollbar}/index.cjs

@@ -1,17 +1,15 @@
-const require_chunk = require('../chunk-CUT6urMc.cjs');
-const require_Typography = require('../Typography-Ds4gfOJz.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+const require_chunk = require('../../chunk-CUT6urMc.cjs');
+const require_Typography = require('../../Typography-Ds4gfOJz.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 let react_indiana_drag_scroll = require("react-indiana-drag-scroll");
 react_indiana_drag_scroll = require_chunk.__toESM(react_indiana_drag_scroll);
 
 //#region src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx
 const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter }) => {
 	if (selectedFilterOptions.length === 0) return null;
-	const filterDefaultWithoutBg = filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim();
-	const buttonClasses = (0, classnames.default)(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultWithoutBg, appliedFilterBackgroundClasses);
+	const buttonClasses = (0, classnames.default)(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim(), appliedFilterBackgroundClasses);
 	const iconColor = "currentColor";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_indiana_drag_scroll.default, {
 		className: filterBarClassNames,

package/dist/{AppliedFiltersScrollbar → components/AppliedFiltersScrollbar}/index.js

@@ -1,13 +1,12 @@
-import { Typography } from "../Typography-C3QmJzFK.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as Typography } from "../../Typography-xehJH05l.js";
 import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
 import ScrollContainer from "react-indiana-drag-scroll";
 
 //#region src/components/AppliedFiltersScrollbar/AppliedFiltersScrollbar.tsx
 const AppliedFiltersScrollbar = ({ selectedFilterOptions, filterBarClassNames, filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses, onRemoveFilter }) => {
 	if (selectedFilterOptions.length === 0) return null;
-	const filterDefaultWithoutBg = filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim();
-	const buttonClasses = classNames(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultWithoutBg, appliedFilterBackgroundClasses);
+	const buttonClasses = classNames(" spiffy-tw-flex spiffy-tw-items-center spiffy-tw-rounded-full spiffy-tw-px-[8px] spiffy-tw-py-[4px] spiffy-tw-whitespace-nowrap", filterHoverClasses, filterDefaultClasses.replace(/spiffy-tw-bg-\[--spiffy-colors-[^\]]+\]/g, "").trim(), appliedFilterBackgroundClasses);
 	const iconColor = "currentColor";
 	return /* @__PURE__ */ jsx(ScrollContainer, {
 		className: filterBarClassNames,

package/dist/{ButtonBase/index.d.ts → components/ButtonBase/index-BCw2WQ-2.d.ts}

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
 import { ButtonHTMLAttributes, CSSProperties } from "react";
-import { TestProps } from "@envive-ai/types";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
 
 //#region src/components/ButtonBase/types.d.ts
 interface ButtonHoverStyles extends CSSProperties {
@@ -37,6 +37,6 @@ declare const ButtonBase: ({
   dataTestId,
   onClick,
   disablePadding
-}: ButtonBaseProps) => react_jsx_runtime4.JSX.Element;
+}: ButtonBaseProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { ButtonBase, ButtonBaseOverrides, ButtonBaseProps, ButtonHoverStyles };

package/dist/{ButtonBase/index.d.cts → components/ButtonBase/index-pBSmWoqg.d.cts}

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
-import { TestProps } from "@envive-ai/types";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
+import { TestProps } from "@envive-ai/react-hooks/types";
 import { ButtonHTMLAttributes, CSSProperties } from "react";
 
 //#region src/components/ButtonBase/types.d.ts
@@ -37,6 +37,6 @@ declare const ButtonBase: ({
   dataTestId,
   onClick,
   disablePadding
-}: ButtonBaseProps) => react_jsx_runtime20.JSX.Element;
+}: ButtonBaseProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { ButtonBase, ButtonBaseOverrides, ButtonBaseProps, ButtonHoverStyles };

package/dist/components/ButtonBase/index.cjs

@@ -0,0 +1,6 @@
+require('../../Typography-Ds4gfOJz.cjs');
+const require_ButtonBase = require('../../ButtonBase-BMEAmPnS.cjs');
+require('../../ButtonBase-BIXx56hq.cjs');
+
+exports.ButtonBase = require_ButtonBase.ButtonBase;
+exports.ButtonBaseOverrides = require_ButtonBase.ButtonBaseOverrides;

package/dist/components/ButtonBase/index.js

@@ -0,0 +1,5 @@
+import "../../Typography-xehJH05l.js";
+import { n as ButtonBaseOverrides, t as ButtonBase } from "../../ButtonBase-CT397aT3.js";
+import "../../ButtonBase-C9fn-c5h.js";
+
+export { ButtonBase, ButtonBaseOverrides };

package/dist/{DynamicFiltersScrollbar/index.d.cts → components/DynamicFiltersScrollbar/index-BvAT64cX.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 
 //#region src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.d.ts
 interface DynamicFiltersScrollbarProps {
@@ -23,6 +23,6 @@ declare const DynamicFiltersScrollbar: ({
   filterDefaultClasses,
   filterHoverClasses,
   onToggleDynamicFilter
-}: DynamicFiltersScrollbarProps) => react_jsx_runtime12.JSX.Element;
+}: DynamicFiltersScrollbarProps) => react_jsx_runtime25.JSX.Element;
 //#endregion
 export { DynamicFiltersScrollbar };

package/dist/{DynamicFiltersScrollbar/index.d.ts → components/DynamicFiltersScrollbar/index-X--ALCSa.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime26 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.d.ts
 interface DynamicFiltersScrollbarProps {
@@ -23,6 +23,6 @@ declare const DynamicFiltersScrollbar: ({
   filterDefaultClasses,
   filterHoverClasses,
   onToggleDynamicFilter
-}: DynamicFiltersScrollbarProps) => react_jsx_runtime26.JSX.Element;
+}: DynamicFiltersScrollbarProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 export { DynamicFiltersScrollbar };

package/dist/{DynamicFiltersScrollbar → components/DynamicFiltersScrollbar}/index.cjs

@@ -1,9 +1,8 @@
-const require_chunk = require('../chunk-CUT6urMc.cjs');
-const require_Typography = require('../Typography-Ds4gfOJz.cjs');
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+const require_chunk = require('../../chunk-CUT6urMc.cjs');
+const require_Typography = require('../../Typography-Ds4gfOJz.cjs');
 let classnames = require("classnames");
 classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
 let react_indiana_drag_scroll = require("react-indiana-drag-scroll");
 react_indiana_drag_scroll = require_chunk.__toESM(react_indiana_drag_scroll);
 
@@ -12,10 +11,9 @@ const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames,
 	className: filterBarClassNames,
 	hideScrollbars: true,
 	children: availableDynamicFilters.map(({ name, displayName }) => {
-		const buttonClasses = (0, classnames.default)("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			className: buttonClasses,
+			className: (0, classnames.default)("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses),
 			onClick: () => {
 				onToggleDynamicFilter({
 					filter: name,

package/dist/{DynamicFiltersScrollbar → components/DynamicFiltersScrollbar}/index.js

@@ -1,6 +1,6 @@
-import { Typography } from "../Typography-C3QmJzFK.js";
-import { jsx } from "react/jsx-runtime";
+import { t as Typography } from "../../Typography-xehJH05l.js";
 import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
 import ScrollContainer from "react-indiana-drag-scroll";
 
 //#region src/components/DynamicFiltersScrollbar/DynamicFiltersScrollbar.tsx
@@ -8,10 +8,9 @@ const DynamicFiltersScrollbar = ({ availableDynamicFilters, filterBarClassNames,
 	className: filterBarClassNames,
 	hideScrollbars: true,
 	children: 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 /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: buttonClasses,
+			className: classNames("spiffy-tw-px-[12px] spiffy-tw-py-2 spiffy-tw-rounded-full spiffy-tw-border spiffy-tw-whitespace-nowrap ", filterHoverClasses, filterDefaultClasses),
 			onClick: () => {
 				onToggleDynamicFilter({
 					filter: name,