@envive-ai/react-toolkit 0.2.1 → 0.2.3

package/dist/SearchResultsStates-CalOf6QP.js

@@ -0,0 +1,110 @@
+import { Typography } from "./Typography-D3vDkBMS.js";
+import { AppliedFiltersScrollbar, DynamicFiltersScrollbar } from "./DynamicFiltersScrollbar-AhyHehrB.js";
+import { ProductGrid, productGridVariantClasses } from "./ProductGrid-NtuMrOtp.js";
+import { ProductCardSkeleton } from "./ProductCard-2aPkjS8z.js";
+import { searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants-BD4SYugF.js";
+import { SparkleAnimation } from "./SparkleAnimation-D1QjYho_.js";
+import { motion } from "framer-motion";
+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", {
+		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, {
+				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."
+			})]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsGrid.tsx
+const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter }) => {
+	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
+			})
+		]
+	});
+};
+
+//#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 { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid };

package/dist/SearchResultsStates-DQlstrHd.cjs

@@ -0,0 +1,132 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Typography = require('./Typography-CFNWgbM5.cjs');
+const require_DynamicFiltersScrollbar = require('./DynamicFiltersScrollbar-50i_InZz.cjs');
+const require_ProductGrid = require('./ProductGrid-Dcy7JxVN.cjs');
+const require_ProductCard = require('./ProductCard-D1F9A8Rw.cjs');
+const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants-DXabOauB.cjs');
+const require_SparkleAnimation = require('./SparkleAnimation-Bm3fk2FJ.cjs');
+let framer_motion = require("framer-motion");
+framer_motion = require_chunk.__toESM(framer_motion);
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let __envive_ai_react_icons_Sparkles = require("@envive-ai/react-icons/Sparkles");
+__envive_ai_react_icons_Sparkles = require_chunk.__toESM(__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 = (0, classnames.default)(containerPaddingClasses, includeBottomMargin ? "spiffy-tw-mb-[100vh]" : "", "spiffy-tw-mt-6");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: containerClasses,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_Sparkles.default, {
+				className: "spiffy-tw-w-[24px] spiffy-tw-h-[24px]",
+				style: { color: sparkleIconColor }
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.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."
+			})]
+		})
+	});
+};
+
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsGrid.tsx
+const SearchResultsGrid = ({ productList, productCardConfig, merchantShortName, availableDynamicFilters, searchFilterSidebarVariant, productGridVariant, selectedFilterOptions, containerXPaddingClasses, productGridClasses, onRemoveFilter, onToggleDynamicFilter }) => {
+	const sharedFilterBarClasses = (0, classnames.default)("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 = (0, classnames.default)(sharedFilterBarClasses, "spiffy-tw-mt-[24px]");
+	const appliedFilterBarClasses = (0, classnames.default)(sharedFilterBarClasses, "spiffy-tw-mb-[32px]", "spiffy-tw-mt-[8px]");
+	const { filterDefaultClasses, filterHoverClasses, appliedFilterBackgroundClasses } = require_searchFilterSidebarVariants.searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.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__ */ (0, react_jsx_runtime.jsx)(require_DynamicFiltersScrollbar.AppliedFiltersScrollbar, {
+				selectedFilterOptions,
+				filterBarClassNames: appliedFilterBarClasses,
+				filterDefaultClasses,
+				filterHoverClasses,
+				appliedFilterBackgroundClasses,
+				onRemoveFilter
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DynamicFiltersScrollbar.DynamicFiltersScrollbar, {
+				availableDynamicFilters,
+				filterBarClassNames: filterBarClasses,
+				filterDefaultClasses,
+				filterHoverClasses,
+				onToggleDynamicFilter
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductGrid.ProductGrid, {
+				productList,
+				productGridVariant,
+				productGridClasses,
+				productCardConfig,
+				merchantShortName
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/components/SearchResultsStates/SearchResultsLoadingGrid.tsx
+const SearchResultsLoadingGrid = ({ productGridVariant, productGridClasses, sparkleIconColor = "var(--spiffy-colors-accent-primary)" }) => {
+	const { productCardLayoutVariant, productCardImageAspectRatio } = require_ProductGrid.productGridVariantClasses[productGridVariant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "spiffy-tw-mt-6 spiffy-tw-w-full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-mb-4",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "spiffy-tw-width-[24px]",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SparkleAnimation.SparkleAnimation, {
+							color: sparkleIconColor,
+							animate: true
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+						variant: "body2",
+						children: "Finding the best options for you..."
+					})]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: productGridClasses,
+				children: Array.from({ length: 8 }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ProductCard.ProductCardSkeleton, {
+					layoutVariant: productCardLayoutVariant,
+					aspectRatio: productCardImageAspectRatio,
+					growWithContainer: true
+				}, index))
+			})]
+		})
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'NoSearchResultsFound', {
+  enumerable: true,
+  get: function () {
+    return NoSearchResultsFound;
+  }
+});
+Object.defineProperty(exports, 'SearchResultsGrid', {
+  enumerable: true,
+  get: function () {
+    return SearchResultsGrid;
+  }
+});
+Object.defineProperty(exports, 'SearchResultsLoadingGrid', {
+  enumerable: true,
+  get: function () {
+    return SearchResultsLoadingGrid;
+  }
+});

package/dist/SettingsVariant-BsBbdjV5.cjs

@@ -0,0 +1,63 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region ../icons/src/SettingsVariant.tsx
+const SvgSettingsVariant = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 28,
+	height: 28,
+	fill: "none",
+	...props,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 3.5,
+			cy: 3.5,
+			r: 3.033,
+			stroke: "#767676",
+			strokeWidth: .933,
+			transform: "matrix(-1 0 0 1 22.4 0)"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			stroke: "#767676",
+			strokeWidth: .933,
+			d: "M14 3.5H0M28 3.5h-4.5"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 9.1,
+			cy: 13.5,
+			r: 3.033,
+			stroke: "#767676",
+			strokeWidth: .933
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			stroke: "#767676",
+			strokeWidth: .933,
+			d: "M14 13.5h14M0 13.5h4.5"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: 3.5,
+			cy: 3.5,
+			r: 3.033,
+			stroke: "#767676",
+			strokeWidth: .933,
+			transform: "matrix(-1 0 0 1 22.4 20)"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			stroke: "#767676",
+			strokeWidth: .933,
+			d: "M14 23.5H0M28 23.5h-4.5"
+		})
+	]
+});
+var SettingsVariant_default = SvgSettingsVariant;
+
+//#endregion
+Object.defineProperty(exports, 'SettingsVariant_default', {
+  enumerable: true,
+  get: function () {
+    return SettingsVariant_default;
+  }
+});

package/dist/SettingsVariant-CUSFlJEu.js

@@ -0,0 +1,55 @@
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../icons/src/SettingsVariant.tsx
+const SvgSettingsVariant = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 28,
+	height: 28,
+	fill: "none",
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: 3.5,
+			cy: 3.5,
+			r: 3.033,
+			stroke: "#767676",
+			strokeWidth: .933,
+			transform: "matrix(-1 0 0 1 22.4 0)"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			stroke: "#767676",
+			strokeWidth: .933,
+			d: "M14 3.5H0M28 3.5h-4.5"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: 9.1,
+			cy: 13.5,
+			r: 3.033,
+			stroke: "#767676",
+			strokeWidth: .933
+		}),
+		/* @__PURE__ */ jsx("path", {
+			stroke: "#767676",
+			strokeWidth: .933,
+			d: "M14 13.5h14M0 13.5h4.5"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: 3.5,
+			cy: 3.5,
+			r: 3.033,
+			stroke: "#767676",
+			strokeWidth: .933,
+			transform: "matrix(-1 0 0 1 22.4 20)"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			stroke: "#767676",
+			strokeWidth: .933,
+			d: "M14 23.5H0M28 23.5h-4.5"
+		})
+	]
+});
+var SettingsVariant_default = SvgSettingsVariant;
+
+//#endregion
+export { SettingsVariant_default };

package/dist/SparkleAnimation/index.cjs

@@ -0,0 +1,4 @@
+const require_SparkleAnimation = require('../SparkleAnimation-Bm3fk2FJ.cjs');
+
+exports.SparkleAnimation = require_SparkleAnimation.SparkleAnimation;
+exports.SparkleAnimationOverride = require_SparkleAnimation.SparkleAnimationOverride;

package/dist/SparkleAnimation/index.d.cts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/components/SparkleAnimation/SparkleAnimation.d.ts
+interface SparkleAnimationProps {
+  color: string;
+  className?: string;
+  animate?: boolean;
+}
+declare const SparkleAnimation: ({
+  color,
+  className,
+  animate
+}: SparkleAnimationProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/SparkleAnimation/types.d.ts
+declare enum SparkleAnimationOverride {
+  CONTAINER = "spiffy-sparkle-animation-container",
+  STAR_ONE_CONTAINER = "spiffy-sparkle-animation-star-one-container",
+  STAR_TWO_CONTAINER = "spiffy-sparkle-animation-star-two-container",
+  STAR_THREE_CONTAINER = "spiffy-sparkle-animation-star-three-container",
+}
+//#endregion
+export { SparkleAnimation, SparkleAnimationOverride };

package/dist/SparkleAnimation/index.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/components/SparkleAnimation/SparkleAnimation.d.ts
+interface SparkleAnimationProps {
+  color: string;
+  className?: string;
+  animate?: boolean;
+}
+declare const SparkleAnimation: ({
+  color,
+  className,
+  animate
+}: SparkleAnimationProps) => react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/components/SparkleAnimation/types.d.ts
+declare enum SparkleAnimationOverride {
+  CONTAINER = "spiffy-sparkle-animation-container",
+  STAR_ONE_CONTAINER = "spiffy-sparkle-animation-star-one-container",
+  STAR_TWO_CONTAINER = "spiffy-sparkle-animation-star-two-container",
+  STAR_THREE_CONTAINER = "spiffy-sparkle-animation-star-three-container",
+}
+//#endregion
+export { SparkleAnimation, SparkleAnimationOverride };

package/dist/SparkleAnimation/index.js

@@ -0,0 +1,3 @@
+import { SparkleAnimation, SparkleAnimationOverride } from "../SparkleAnimation-D1QjYho_.js";
+
+export { SparkleAnimation, SparkleAnimationOverride };

package/dist/SparkleAnimation-Bm3fk2FJ.cjs

@@ -0,0 +1,101 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+let framer_motion = require("framer-motion");
+framer_motion = require_chunk.__toESM(framer_motion);
+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");
+react_jsx_runtime = require_chunk.__toESM(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/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;
+}({});
+
+//#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);
+	const [smallStar2Scale, setSmallStar2Scale] = (0, react.useState)(animate ? 0 : 1);
+	const containerClasses = (0, classnames.default)(SparkleAnimationOverride.CONTAINER, "spiffy-tw-w-6 spiffy-tw-h-6 spiffy-tw-relative", className);
+	(0, react.useEffect)(() => {
+		if (!animate) {
+			setMainStarScale(1);
+			setSmallStar1Scale(1);
+			setSmallStar2Scale(1);
+		}
+	}, [animate]);
+	(0, react.useEffect)(() => {
+		if (!animate) return;
+		const newScale = mainStarScale === 1 ? 0 : 1;
+		setTimeout(() => setMainStarScale(newScale), ANIMATION_CYCLE_TIME);
+		setTimeout(() => setSmallStar1Scale(newScale), ANIMATION_CYCLE_TIME + STAR_DELAY_OFFSET);
+		setTimeout(() => setSmallStar2Scale(newScale), ANIMATION_CYCLE_TIME + 2 * STAR_DELAY_OFFSET);
+	}, [mainStarScale, animate]);
+	const starTransition = {
+		duration: .3,
+		ease: "easeOut"
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClasses,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)(SparkleAnimationOverride.STAR_ONE_CONTAINER, "spiffy-tw-absolute -spiffy-tw-top-[2px] spiffy-tw-left-0"),
+				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, {
+						fill: color,
+						className: "spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-inline-block"
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)(SparkleAnimationOverride.STAR_TWO_CONTAINER, "spiffy-tw-absolute -spiffy-tw-top-[7px] spiffy-tw-left-[10px]"),
+				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, {
+						fill: color,
+						className: "spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, classnames.default)(SparkleAnimationOverride.STAR_THREE_CONTAINER, "spiffy-tw-absolute spiffy-tw-top-[1px] spiffy-tw-left-[12px]"),
+				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, {
+						fill: color,
+						className: "spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
+					})
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'SparkleAnimation', {
+  enumerable: true,
+  get: function () {
+    return SparkleAnimation;
+  }
+});
+Object.defineProperty(exports, 'SparkleAnimationOverride', {
+  enumerable: true,
+  get: function () {
+    return SparkleAnimationOverride;
+  }
+});

package/dist/SparkleAnimation-D1QjYho_.js

@@ -0,0 +1,84 @@
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import FourPointStar from "@envive-ai/react-icons/FourPointStar";
+
+//#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;
+}({});
+
+//#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);
+	const [smallStar2Scale, setSmallStar2Scale] = useState(animate ? 0 : 1);
+	const containerClasses = classNames(SparkleAnimationOverride.CONTAINER, "spiffy-tw-w-6 spiffy-tw-h-6 spiffy-tw-relative", className);
+	useEffect(() => {
+		if (!animate) {
+			setMainStarScale(1);
+			setSmallStar1Scale(1);
+			setSmallStar2Scale(1);
+		}
+	}, [animate]);
+	useEffect(() => {
+		if (!animate) return;
+		const newScale = mainStarScale === 1 ? 0 : 1;
+		setTimeout(() => setMainStarScale(newScale), ANIMATION_CYCLE_TIME);
+		setTimeout(() => setSmallStar1Scale(newScale), ANIMATION_CYCLE_TIME + STAR_DELAY_OFFSET);
+		setTimeout(() => setSmallStar2Scale(newScale), ANIMATION_CYCLE_TIME + 2 * STAR_DELAY_OFFSET);
+	}, [mainStarScale, animate]);
+	const starTransition = {
+		duration: .3,
+		ease: "easeOut"
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClasses,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: classNames(SparkleAnimationOverride.STAR_ONE_CONTAINER, "spiffy-tw-absolute -spiffy-tw-top-[2px] spiffy-tw-left-0"),
+				children: /* @__PURE__ */ jsx(motion.div, {
+					animate: { scale: mainStarScale },
+					transition: starTransition,
+					children: /* @__PURE__ */ jsx(FourPointStar, {
+						fill: color,
+						className: "spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-inline-block"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: classNames(SparkleAnimationOverride.STAR_TWO_CONTAINER, "spiffy-tw-absolute -spiffy-tw-top-[7px] spiffy-tw-left-[10px]"),
+				children: /* @__PURE__ */ jsx(motion.div, {
+					animate: { scale: smallStar1Scale },
+					transition: starTransition,
+					children: /* @__PURE__ */ jsx(FourPointStar, {
+						fill: color,
+						className: "spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: classNames(SparkleAnimationOverride.STAR_THREE_CONTAINER, "spiffy-tw-absolute spiffy-tw-top-[1px] spiffy-tw-left-[12px]"),
+				children: /* @__PURE__ */ jsx(motion.div, {
+					animate: { scale: smallStar2Scale },
+					transition: starTransition,
+					children: /* @__PURE__ */ jsx(FourPointStar, {
+						fill: color,
+						className: "spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-inline-block"
+					})
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+export { SparkleAnimation, SparkleAnimationOverride };

package/dist/Spinner/index.cjs

@@ -0,0 +1,3 @@
+const require_Spinner = require('../Spinner-B1IEMa00.cjs');
+
+exports.Spinner = require_Spinner.Spinner;

package/dist/Spinner/index.d.cts

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

package/dist/Spinner/index.d.ts

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

package/dist/Spinner/index.js

@@ -0,0 +1,3 @@
+import { Spinner } from "../Spinner-BrHoB-Zg.js";
+
+export { Spinner };