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

package/dist/SearchResultsStates-D7HfsLeZ.js

@@ -0,0 +1,177 @@
+import { t as Typography } from "./Typography-xehJH05l.js";
+import { t as require_jsx_runtime } from "./jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
+import { n as AppliedFiltersScrollbar, t as DynamicFiltersScrollbar } from "./DynamicFiltersScrollbar-s5yfmMau.js";
+import { t as ProductCardSkeleton } from "./ProductCard-GxpFxjh0.js";
+import { n as productGridVariantClasses, t as ProductGrid } from "./ProductGrid-DAwc9dKV.js";
+import { t as RecommendedProducts } from "./RecommendedProducts-C6dLpLPP.js";
+import { t as searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-gkgkflXx.js";
+import { t as SparkleAnimation } from "./SparkleAnimation-szzXiTam.js";
+import { motion } from "framer-motion";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/dist/Sparkles.js
+var import_jsx_runtime = require_jsx_runtime();
+const SvgSparkles = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	xmlns: "http://www.w3.org/2000/svg",
+	...props,
+	children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+			d: "M8.18658 5.99609L9.47499 9.34597C9.68451 9.89072 9.78927 10.1631 9.95218 10.3922C10.0966 10.5953 10.274 10.7727 10.477 10.9171C10.7061 11.08 10.9785 11.1847 11.5233 11.3943L14.8732 12.6827L11.5233 13.9711C10.9785 14.1806 10.7061 14.2854 10.477 14.4483C10.274 14.5927 10.0966 14.7701 9.95218 14.9731C9.78927 15.2022 9.68451 15.4746 9.47499 16.0194L8.18658 19.3693L6.89816 16.0194C6.68864 15.4746 6.58388 15.2022 6.42097 14.9731C6.27659 14.7701 6.09917 14.5927 5.89612 14.4483C5.66701 14.2854 5.39463 14.1806 4.84988 13.9711L1.5 12.6827L4.84987 11.3943C5.39463 11.1847 5.66701 11.08 5.89612 10.9171C6.09917 10.7727 6.27659 10.5953 6.42097 10.3922C6.58388 10.1631 6.68864 9.89072 6.89816 9.34597L8.18658 5.99609Z",
+			fill: "currentColor",
+			stroke: "currentColor",
+			strokeWidth: 1.11443,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+			d: "M19.6402 14.3135L20.2844 15.9884C20.3891 16.2608 20.4415 16.397 20.523 16.5115C20.5952 16.6131 20.6839 16.7018 20.7854 16.774C20.8999 16.8554 21.0361 16.9078 21.3085 17.0126L22.9835 17.6568L21.3085 18.301C21.0361 18.4057 20.8999 18.4581 20.7854 18.5396C20.6839 18.6118 20.5952 18.7005 20.523 18.802C20.4415 18.9166 20.3891 19.0527 20.2844 19.3251L19.6402 21.0001L18.996 19.3251C18.8912 19.0527 18.8388 18.9166 18.7574 18.802C18.6852 18.7005 18.5965 18.6118 18.4949 18.5396C18.3804 18.4581 18.2442 18.4057 17.9718 18.301L16.2969 17.6568L17.9718 17.0126C18.2442 16.9078 18.3804 16.8554 18.4949 16.774C18.5965 16.7018 18.6852 16.6131 18.7574 16.5115C18.8388 16.397 18.8912 16.2608 18.996 15.9884L19.6402 14.3135Z",
+			fill: "currentColor",
+			stroke: "currentColor",
+			strokeWidth: 1.11443,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+			d: "M17.0913 3L17.7355 4.67494C17.8403 4.94732 17.8927 5.0835 17.9741 5.19806C18.0463 5.29959 18.135 5.38829 18.2366 5.46049C18.3511 5.54194 18.4873 5.59432 18.7597 5.69908L20.4346 6.34329L18.7597 6.9875C18.4873 7.09226 18.3511 7.14464 18.2366 7.22609C18.135 7.29829 18.0463 7.38699 17.9741 7.48852C17.8927 7.60308 17.8403 7.73927 17.7355 8.01165L17.0913 9.68658L16.4471 8.01165C16.3424 7.73927 16.29 7.60308 16.2085 7.48852C16.1363 7.38699 16.0476 7.29829 15.9461 7.22609C15.8315 7.14464 15.6954 7.09226 15.423 6.9875L13.748 6.34329L15.423 5.69908C15.6954 5.59432 15.8315 5.54194 15.9461 5.46049C16.0476 5.38829 16.1363 5.29959 16.2085 5.19806C16.29 5.0835 16.3424 4.94731 16.4471 4.67494L17.0913 3Z",
+			fill: "currentColor",
+			stroke: "currentColor",
+			strokeWidth: 1.11443,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	]
+});
+var Sparkles_default = SvgSparkles;
+
+//#endregion
+//#region src/components/SearchResultsStates/NoSearchResultsFound.tsx
+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", {
+			className: "spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2",
+			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Sparkles_default, {
+				className: "spiffy-tw-w-[24px] spiffy-tw-h-[24px]",
+				style: { color: sparkleIconColor }
+			}) }), /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				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, 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]");
+	const { filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: "spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		children: [
+			/* @__PURE__ */ jsx(AppliedFiltersScrollbar, {
+				selectedFilterOptions,
+				filterBarClassNames: appliedFilterBarClasses,
+				filterDefaultClasses,
+				filterHoverClasses,
+				appliedFilterBackgroundClasses,
+				onRemoveFilter
+			}),
+			/* @__PURE__ */ jsx(DynamicFiltersScrollbar, {
+				availableDynamicFilters,
+				filterBarClassNames: filterBarClasses,
+				filterDefaultClasses,
+				filterHoverClasses,
+				onToggleDynamicFilter
+			}),
+			/* @__PURE__ */ jsx(ProductGrid, {
+				productList,
+				productGridVariant,
+				productGridClasses,
+				productCardConfig,
+				merchantShortName,
+				onProductClick
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx
+const SearchResultsLoadingGrid = ({ productGridVariant, productGridClasses, sparkleIconColor = "var(--spiffy-colors-accent-primary)" }) => {
+	const { productCardLayoutVariant, productCardImageAspectRatio } = productGridVariantClasses[productGridVariant];
+	return /* @__PURE__ */ jsx(motion.div, {
+		className: "spiffy-tw-justify-center spiffy-tw-w-full spiffy-tw-overflow-hidden",
+		initial: { opacity: 0 },
+		animate: { opacity: 1 },
+		exit: { opacity: 0 },
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "spiffy-tw-mt-6 spiffy-tw-w-full",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-mb-4",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-gap-2 spiffy-tw-ml-[16px] md:spiffy-tw-ml-[80px]",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "spiffy-tw-width-[24px]",
+						children: /* @__PURE__ */ jsx(SparkleAnimation, {
+							color: sparkleIconColor,
+							animate: true
+						})
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						children: "Finding the best options for you..."
+					})]
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: productGridClasses,
+				children: Array.from({ length: 8 }).map((_, index) => /* @__PURE__ */ jsx(ProductCardSkeleton, {
+					layoutVariant: productCardLayoutVariant,
+					aspectRatio: productCardImageAspectRatio,
+					growWithContainer: true
+				}, index))
+			})]
+		})
+	});
+};
+
+//#endregion
+export { SearchResultsGrid as n, NoSearchResultsFound as r, SearchResultsLoadingGrid as t };

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

@@ -1,25 +1,24 @@
 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);
+const require_FourPointStar = require('./FourPointStar-AQ9OSu0S.cjs');
 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 __envive_ai_react_icons_FourPointStar = require("@envive-ai/react-icons/FourPointStar");
-__envive_ai_react_icons_FourPointStar = require_chunk.__toESM(__envive_ai_react_icons_FourPointStar);
+let react_jsx_runtime = require("react/jsx-runtime");
 
-//#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);
@@ -51,7 +50,7 @@ const SparkleAnimation = ({ color, className, animate = true }) => {
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 					animate: { scale: mainStarScale },
 					transition: starTransition,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_FourPointStar.default, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FourPointStar.FourPointStar_default, {
 						fill: color,
 						className: "spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-inline-block"
 					})
@@ -62,7 +61,7 @@ const SparkleAnimation = ({ color, className, animate = true }) => {
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 					animate: { scale: smallStar1Scale },
 					transition: starTransition,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_FourPointStar.default, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FourPointStar.FourPointStar_default, {
 						fill: color,
 						className: "spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
 					})
@@ -73,7 +72,7 @@ const SparkleAnimation = ({ color, className, animate = true }) => {
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 					animate: { scale: smallStar2Scale },
 					transition: starTransition,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_FourPointStar.default, {
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FourPointStar.FourPointStar_default, {
 						fill: color,
 						className: "spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
 					})
@@ -89,4 +88,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-szzXiTam.js}

@@ -1,19 +1,22 @@
-import { motion } from "framer-motion";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { t as FourPointStar_default } from "./FourPointStar-3DqnYmfN.js";
 import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
 import classNames from "classnames";
-import FourPointStar from "@envive-ai/react-icons/FourPointStar";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-//#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);
@@ -45,7 +48,7 @@ const SparkleAnimation = ({ color, className, animate = true }) => {
 				children: /* @__PURE__ */ jsx(motion.div, {
 					animate: { scale: mainStarScale },
 					transition: starTransition,
-					children: /* @__PURE__ */ jsx(FourPointStar, {
+					children: /* @__PURE__ */ jsx(FourPointStar_default, {
 						fill: color,
 						className: "spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-inline-block"
 					})
@@ -56,7 +59,7 @@ const SparkleAnimation = ({ color, className, animate = true }) => {
 				children: /* @__PURE__ */ jsx(motion.div, {
 					animate: { scale: smallStar1Scale },
 					transition: starTransition,
-					children: /* @__PURE__ */ jsx(FourPointStar, {
+					children: /* @__PURE__ */ jsx(FourPointStar_default, {
 						fill: color,
 						className: "spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
 					})
@@ -67,7 +70,7 @@ const SparkleAnimation = ({ color, className, animate = true }) => {
 				children: /* @__PURE__ */ jsx(motion.div, {
 					animate: { scale: smallStar2Scale },
 					transition: starTransition,
-					children: /* @__PURE__ */ jsx(FourPointStar, {
+					children: /* @__PURE__ */ jsx(FourPointStar_default, {
 						fill: color,
 						className: "spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
 					})
@@ -78,4 +81,4 @@ const SparkleAnimation = ({ color, className, animate = true }) => {
 };
 
 //#endregion
-export { SparkleAnimation };
+export { SparkleAnimationOverride as n, SparkleAnimation as t };

package/dist/{Spinner-Ccy6VFEp.cjs → Spinner-7HblFCja.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/{Spinner-D2HbRsuw.js → Spinner-OFbXMms8.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/{TextInput-CYTko3-n.cjs → TextInput-CaynCoDf.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-CsdOvLBQ.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-D8--AKKK.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-Dxk3U1hR.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-CFI1KN8R.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-Dp7w5LPb.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-D_7-KJa0.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime25 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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_runtime0.JSX.Element;
 //#endregion
 export { Accordion };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime10 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_runtime22.JSX.Element;
+}: AccordionProps) => react_jsx_runtime10.JSX.Element;
 //#endregion
 export { Accordion };

package/dist/components/Accordion/index.cjs

@@ -0,0 +1,5 @@
+require('../../Typography-Ds4gfOJz.cjs');
+require('../../jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
+const require_Accordion = require('../../Accordion-DPUaEXiE.cjs');
+
+exports.Accordion = require_Accordion.Accordion;

package/dist/components/Accordion/index.js

@@ -0,0 +1,5 @@
+import "../../Typography-xehJH05l.js";
+import "../../jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
+import { t as Accordion } from "../../Accordion-8zFBEEaN.js";
+
+export { Accordion };

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

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

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

@@ -1,5 +1,5 @@
 import { MotionValue } from "framer-motion";
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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_runtime0.JSX.Element;
 //#endregion
 export { AnimatedChevron };

package/dist/components/AnimatedChevron/index.cjs

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

package/dist/components/AnimatedChevron/index.js

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

package/dist/{AppliedFiltersScrollbar/index.d.ts → components/AppliedFiltersScrollbar/index-Dcyc-5Bv.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_runtime28 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_runtime28.JSX.Element;
 //#endregion
 export { AppliedFiltersScrollbar };

package/dist/{AppliedFiltersScrollbar/index.d.cts → components/AppliedFiltersScrollbar/index-VbXAIfym.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_runtime20 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_runtime20.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,