@envive-ai/react-toolkit 0.1.1 → 0.1.2

package/dist/SearchAutocomplete-wr18dJ8L.cjs

@@ -0,0 +1,62 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+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);
+let framer_motion = require("framer-motion");
+framer_motion = require_chunk.__toESM(framer_motion);
+let __envive_ai_react_icons_src_OutlinedStar = require("@envive-ai/react-icons/src/OutlinedStar");
+__envive_ai_react_icons_src_OutlinedStar = require_chunk.__toESM(__envive_ai_react_icons_src_OutlinedStar);
+
+//#region src/components/search/SearchInputAutocomplete/SearchAutocomplete.tsx
+const SearchAutocomplete = ({ id, results, focusedIndex, onSuggestionSelect, iconColor }) => {
+	if (results.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		className: "spiffy-tw-h-full",
+		initial: {
+			opacity: 0,
+			y: -10
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -10
+		},
+		transition: { duration: .2 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			id,
+			role: "listbox",
+			className: "spiffy-tw-mt-4 spiffy-tw-space-y-2",
+			children: results.map((result, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				id: `option-${index}`,
+				role: "option",
+				"aria-selected": index === focusedIndex,
+				className: (0, classnames.default)("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-cursor-pointer spiffy-tw-py-1", { "spiffy-tw-bg-neutral-200": index === focusedIndex }, "hover:spiffy-tw-bg-neutral-100"),
+				onClick: () => onSuggestionSelect(result, index),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_src_OutlinedStar.default, {
+					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-2",
+					fill: iconColor
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "spiffy-tw-font-bold",
+					children: result
+				})]
+			}, index))
+		})
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'SearchAutocomplete', {
+  enumerable: true,
+  get: function () {
+    return SearchAutocomplete;
+  }
+});

package/dist/SearchFilter-D-2IdBKS.js

@@ -0,0 +1,62 @@
+import { ButtonBase } from "./ButtonBase-C1rsL9gO.js";
+import { Text } from "./Text-Bdv7F5-u.js";
+import { SearchFilterItem } from "./SearchFilterItem-BodtWLoP.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/search/SearchFilter/SearchFilter.tsx
+const SearchFilter = ({ isOpen, setIsOpen, filters, selectFilterItem, clearAllFilters, filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, headerContent }) => {
+	const modalClasses = classNames("spiffy-tw-fixed spiffy-tw-inset-0 spiffy-tw-z-50 spiffy-tw-flex spiffy-tw-transform spiffy-tw-transition-all", {
+		"spiffy-tw-translate-x-full": !isOpen,
+		"spiffy-tw-translate-x-0": isOpen
+	});
+	const overlayClasses = classNames("spiffy-tw-absolute spiffy-tw-inset-0 spiffy-tw-bg-black spiffy-tw-bg-opacity-50", {
+		"spiffy-tw-opacity-0": !isOpen,
+		"spiffy-tw-opacity-100": isOpen
+	});
+	const sidebarClasses = classNames("spiffy-tw-relative spiffy-tw-ml-auto spiffy-tw-flex spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-max-w-xs spiffy-tw-flex-col spiffy-tw-overflow-y-auto spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-py-4 spiffy-tw-shadow-xl");
+	return /* @__PURE__ */ jsxs("div", {
+		className: modalClasses,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: overlayClasses,
+			onClick: () => setIsOpen(false)
+		}), /* @__PURE__ */ jsxs("div", {
+			className: sidebarClasses,
+			children: [
+				headerContent,
+				/* @__PURE__ */ jsx("div", {
+					className: "spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6",
+					children: filters.map((filter) => /* @__PURE__ */ jsxs("div", {
+						className: "spiffy-tw-mb-6",
+						children: [/* @__PURE__ */ jsx(Text, {
+							variant: "body2",
+							className: "spiffy-tw-font-medium spiffy-tw-mb-3",
+							children: filter.displayName
+						}), /* @__PURE__ */ jsx("ul", { children: filter.items.map((item) => /* @__PURE__ */ jsx(SearchFilterItem, {
+							filterItem: item,
+							onSelectFilterItem: selectFilterItem,
+							radioButtonFillColor,
+							radioButtonHoverColor,
+							radioButtonUncheckedBorderColor
+						}, item.id)) })]
+					}, filter.id))
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3",
+					children: [/* @__PURE__ */ jsx(ButtonBase, {
+						onClick: clearAllFilters,
+						text: "Clear All",
+						buttonClass: "spiffy-tw-w-full spiffy-tw-mb-2"
+					}), /* @__PURE__ */ jsx(ButtonBase, {
+						onClick: () => setIsOpen(false),
+						text: filterButtonText,
+						buttonClass: "spiffy-tw-w-full"
+					})]
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+export { SearchFilter };

package/dist/SearchFilter-D0IzBlG5.cjs

@@ -0,0 +1,70 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_ButtonBase = require('./ButtonBase-a8uj6c2f.cjs');
+const require_Text = require('./Text-C04c4Z93.cjs');
+const require_SearchFilterItem = require('./SearchFilterItem-DmMkiqNC.cjs');
+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);
+
+//#region src/components/search/SearchFilter/SearchFilter.tsx
+const SearchFilter = ({ isOpen, setIsOpen, filters, selectFilterItem, clearAllFilters, filterButtonText, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, headerContent }) => {
+	const modalClasses = (0, classnames.default)("spiffy-tw-fixed spiffy-tw-inset-0 spiffy-tw-z-50 spiffy-tw-flex spiffy-tw-transform spiffy-tw-transition-all", {
+		"spiffy-tw-translate-x-full": !isOpen,
+		"spiffy-tw-translate-x-0": isOpen
+	});
+	const overlayClasses = (0, classnames.default)("spiffy-tw-absolute spiffy-tw-inset-0 spiffy-tw-bg-black spiffy-tw-bg-opacity-50", {
+		"spiffy-tw-opacity-0": !isOpen,
+		"spiffy-tw-opacity-100": isOpen
+	});
+	const sidebarClasses = (0, classnames.default)("spiffy-tw-relative spiffy-tw-ml-auto spiffy-tw-flex spiffy-tw-h-full spiffy-tw-w-full spiffy-tw-max-w-xs spiffy-tw-flex-col spiffy-tw-overflow-y-auto spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-py-4 spiffy-tw-shadow-xl");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: modalClasses,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: overlayClasses,
+			onClick: () => setIsOpen(false)
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: sidebarClasses,
+			children: [
+				headerContent,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "spiffy-tw-flex-1 spiffy-tw-px-4 spiffy-tw-py-6",
+					children: filters.map((filter) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "spiffy-tw-mb-6",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+							variant: "body2",
+							className: "spiffy-tw-font-medium spiffy-tw-mb-3",
+							children: filter.displayName
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", { children: filter.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchFilterItem.SearchFilterItem, {
+							filterItem: item,
+							onSelectFilterItem: selectFilterItem,
+							radioButtonFillColor,
+							radioButtonHoverColor,
+							radioButtonUncheckedBorderColor
+						}, item.id)) })]
+					}, filter.id))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "spiffy-tw-border-t spiffy-tw-border-[--spiffy-colors-border-light] spiffy-tw-px-4 spiffy-tw-py-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+						onClick: clearAllFilters,
+						text: "Clear All",
+						buttonClass: "spiffy-tw-w-full spiffy-tw-mb-2"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+						onClick: () => setIsOpen(false),
+						text: filterButtonText,
+						buttonClass: "spiffy-tw-w-full"
+					})]
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'SearchFilter', {
+  enumerable: true,
+  get: function () {
+    return SearchFilter;
+  }
+});

package/dist/SearchFilterHeader-BQT0-ssS.js

@@ -0,0 +1,37 @@
+import { Text } from "./Text-Bdv7F5-u.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/search/SearchFilter/SearchFilterHeader.tsx
+const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
+	const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
+		children: [/* @__PURE__ */ jsxs(Text, {
+			variant: "body2",
+			className: "spiffy-tw-font-medium",
+			children: [
+				"Filters (",
+				productCount,
+				")"
+			]
+		}), /* @__PURE__ */ jsx("button", {
+			onClick: closeModal,
+			className: "spiffy-tw-p-2",
+			children: /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "14",
+				height: "14",
+				viewBox: "0 0 14 14",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z",
+					fill: closeIconColor
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+export { SearchFilterHeader };

package/dist/SearchFilterHeader-C3EklfoO.cjs

@@ -0,0 +1,45 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Text = require('./Text-C04c4Z93.cjs');
+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);
+
+//#region src/components/search/SearchFilter/SearchFilterHeader.tsx
+const SearchFilterHeader = ({ closeModal, productCount, headerClassName, filterCloseIconVariant }) => {
+	const closeIconColor = filterCloseIconVariant === "dark" ? "var(--spiffy-colors-text-primary)" : "var(--spiffy-colors-text-light)";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)("spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-px-4 spiffy-tw-py-3", headerClassName),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
+			variant: "body2",
+			className: "spiffy-tw-font-medium",
+			children: [
+				"Filters (",
+				productCount,
+				")"
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			onClick: closeModal,
+			className: "spiffy-tw-p-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "14",
+				height: "14",
+				viewBox: "0 0 14 14",
+				fill: "none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711Z",
+					fill: closeIconColor
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'SearchFilterHeader', {
+  enumerable: true,
+  get: function () {
+    return SearchFilterHeader;
+  }
+});

package/dist/SearchFilterItem-BodtWLoP.js

@@ -0,0 +1,26 @@
+import { Text } from "./Text-Bdv7F5-u.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/search/SearchFilter/SearchFilterItem.tsx
+const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
+	const { displayName, isSelected } = filterItem;
+	const radioClasses = classNames("spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2", "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center", radioButtonUncheckedBorderColor, radioButtonHoverColor, { [radioButtonFillColor]: isSelected });
+	return /* @__PURE__ */ jsxs("li", {
+		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer",
+		onClick: () => onSelectFilterItem(filterItem),
+		children: [/* @__PURE__ */ jsx(Text, {
+			variant: "body3",
+			children: displayName
+		}), /* @__PURE__ */ jsx("div", {
+			className: radioClasses,
+			children: isSelected && /* @__PURE__ */ jsx("div", { className: classNames("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
+				"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
+				"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
+			}) })
+		})]
+	});
+};
+
+//#endregion
+export { SearchFilterItem };

package/dist/SearchFilterItem-DmMkiqNC.cjs

@@ -0,0 +1,34 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Text = require('./Text-C04c4Z93.cjs');
+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);
+
+//#region src/components/search/SearchFilter/SearchFilterItem.tsx
+const SearchFilterItem = ({ filterItem, onSelectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
+	const { displayName, isSelected } = filterItem;
+	const radioClasses = (0, classnames.default)("spiffy-tw-w-4 spiffy-tw-h-4 spiffy-tw-rounded-full spiffy-tw-border-2", "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-center", radioButtonUncheckedBorderColor, radioButtonHoverColor, { [radioButtonFillColor]: isSelected });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2 spiffy-tw-cursor-pointer",
+		onClick: () => onSelectFilterItem(filterItem),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+			variant: "body3",
+			children: displayName
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: radioClasses,
+			children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, classnames.default)("spiffy-tw-w-2 spiffy-tw-h-2 spiffy-tw-rounded-full", {
+				"spiffy-tw-bg-white": radioButtonFillColor.includes("spiffy-tw-bg-"),
+				"spiffy-tw-bg-black": radioButtonFillColor.includes("spiffy-tw-bg-white")
+			}) })
+		})]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'SearchFilterItem', {
+  enumerable: true,
+  get: function () {
+    return SearchFilterItem;
+  }
+});

package/dist/SearchInput-BrcAgcvI.js

@@ -0,0 +1,89 @@
+import { TextInput } from "./TextInput-CEGWfdPC.js";
+import { ColorNames, colorVar } from "./colorsConfig-l0ODUVhu.js";
+import classNames from "classnames";
+import React, { useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import MagnifyingGlassStarVariant from "@envive-ai/react-icons/src/MagnifyingGlassStarVariant";
+import CloseIcon from "@envive-ai/react-icons/src/IconClose";
+
+//#region src/components/search/SearchInput/searchInputVariants.ts
+const searchInputVariantClasses = { standard: {
+	searchInputIconColor: "transparent",
+	searchInputBorderColor: "spiffy-tw-border-[--spiffy-colors-border-medium]",
+	searchInputCloseIconClasses: "[&>circle]:spiffy-tw-fill-[--spiffy-colors-text-secondary] [&>path]:spiffy-tw-fill-[#fff]",
+	searchInputActiveStarClasses: `first:[&>path]:spiffy-tw-stroke-[--spiffy-colors-accent-primary] first:[&>path]:spiffy-tw-fill-[--spiffy-colors-accent-primary]`,
+	autocompleteIconColor: colorVar(ColorNames.BackgroundPrimary),
+	searchInputClasses: "spiffy-tw-text-[--spiffy-colors-text-primary] placeholder:spiffy-tw-text-[--spiffy-colors-text-secondary] spiffy-tw-text-[16px] spiffy-tw-font-normal spiffy-tw-leading-[148%] placeholder:spiffy-tw-font-medium placeholder:spiffy-tw-leading-[124%]",
+	placeholderVariant: "h2"
+} };
+
+//#endregion
+//#region src/components/search/SearchInput/SearchInput.tsx
+const SearchInput = React.forwardRef(({ searchInputVariant = "standard", value, placeholder, suggestions, className, dataTestId, ariaActivedescendant, onKeyDown, onChange, onFocus, onBlur }, ref) => {
+	const localInputRef = useRef(null);
+	const { searchInputClasses: inputClassName, searchInputIconColor: iconColor, searchInputBorderColor: borderColor, searchInputCloseIconClasses: closeIconClasses, searchInputActiveStarClasses, placeholderVariant } = searchInputVariantClasses[searchInputVariant];
+	useImperativeHandle(ref, () => localInputRef.current, []);
+	const magnifyingGlassClassesBase = [
+		"spiffy-tw-w-[24px]",
+		"spiffy-tw-h-[32px]",
+		"spiffy-tw-stroke-width-1",
+		"sm:spiffy-tw-w-[32px]"
+	];
+	const magnifyingGlassClassesInactive = classNames(magnifyingGlassClassesBase);
+	const magnifyingGlassClassesActive = classNames([...magnifyingGlassClassesBase, searchInputActiveStarClasses]);
+	const containerClasses = classNames("spiffy-global-search-input-container", "spiffy-tw-relative spiffy-tw-flex spiffy-tw-items-center", className);
+	const inputClasses = classNames("spiffy-global-search-input", "spiffy-tw-flex-grow spiffy-tw-p-2 spiffy-tw-px-[42px] sm:spiffy-tw-p-3 sm:spiffy-tw-px-[48px]", "spiffy-tw-border", "spiffy-tw-text-base", inputClassName);
+	const closeButtonIconClassName = classNames([
+		"spiffy-tw-w-[16px]",
+		"spiffy-tw-h-[16px]",
+		"sm:spiffy-tw-w-[24px]",
+		"sm:spiffy-tw-h-[24px]",
+		"spiffy-tw-cursor-pointer",
+		closeIconClasses
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClasses,
+		"data-testid": dataTestId,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "spiffy-tw-absolute spiffy-tw-left-3 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2",
+				children: /* @__PURE__ */ jsx(MagnifyingGlassStarVariant, {
+					className: value.length > 0 ? magnifyingGlassClassesActive : magnifyingGlassClassesInactive,
+					stroke: iconColor,
+					strokeWidth: "1px"
+				})
+			}),
+			/* @__PURE__ */ jsx(TextInput, {
+				value,
+				onChange: (event) => onChange(event.target.value),
+				onFocus,
+				onBlur,
+				onKeyDown,
+				placeholder,
+				className: inputClasses,
+				placeholderVariant,
+				"aria-label": "Search",
+				"aria-autocomplete": "list",
+				"aria-expanded": !!suggestions && suggestions.length > 0,
+				"aria-controls": "autocomplete-results",
+				"aria-activedescendant": ariaActivedescendant,
+				borderRadius: "xl",
+				borderColorClass: borderColor,
+				ref: localInputRef
+			}),
+			value && /* @__PURE__ */ jsx("button", {
+				onClick: () => {
+					onChange("");
+					localInputRef.current?.focus();
+				},
+				className: "spiffy-tw-absolute spiffy-tw-right-5 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2 spiffy-tw-text-neutral-500 hover:spiffy-tw-text-neutral-700",
+				"aria-label": "Clear search input",
+				type: "button",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: closeButtonIconClassName })
+			})
+		]
+	});
+});
+
+//#endregion
+export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput-DSB9CwIq.cjs

@@ -0,0 +1,106 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_TextInput = require('./TextInput-BO80ixsV.cjs');
+const require_colorsConfig = require('./colorsConfig-TCONYTQ7.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+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);
+let __envive_ai_react_icons_src_MagnifyingGlassStarVariant = require("@envive-ai/react-icons/src/MagnifyingGlassStarVariant");
+__envive_ai_react_icons_src_MagnifyingGlassStarVariant = require_chunk.__toESM(__envive_ai_react_icons_src_MagnifyingGlassStarVariant);
+let __envive_ai_react_icons_src_IconClose = require("@envive-ai/react-icons/src/IconClose");
+__envive_ai_react_icons_src_IconClose = require_chunk.__toESM(__envive_ai_react_icons_src_IconClose);
+
+//#region src/components/search/SearchInput/searchInputVariants.ts
+const searchInputVariantClasses = { standard: {
+	searchInputIconColor: "transparent",
+	searchInputBorderColor: "spiffy-tw-border-[--spiffy-colors-border-medium]",
+	searchInputCloseIconClasses: "[&>circle]:spiffy-tw-fill-[--spiffy-colors-text-secondary] [&>path]:spiffy-tw-fill-[#fff]",
+	searchInputActiveStarClasses: `first:[&>path]:spiffy-tw-stroke-[--spiffy-colors-accent-primary] first:[&>path]:spiffy-tw-fill-[--spiffy-colors-accent-primary]`,
+	autocompleteIconColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundPrimary),
+	searchInputClasses: "spiffy-tw-text-[--spiffy-colors-text-primary] placeholder:spiffy-tw-text-[--spiffy-colors-text-secondary] spiffy-tw-text-[16px] spiffy-tw-font-normal spiffy-tw-leading-[148%] placeholder:spiffy-tw-font-medium placeholder:spiffy-tw-leading-[124%]",
+	placeholderVariant: "h2"
+} };
+
+//#endregion
+//#region src/components/search/SearchInput/SearchInput.tsx
+const SearchInput = react.default.forwardRef(({ searchInputVariant = "standard", value, placeholder, suggestions, className, dataTestId, ariaActivedescendant, onKeyDown, onChange, onFocus, onBlur }, ref) => {
+	const localInputRef = (0, react.useRef)(null);
+	const { searchInputClasses: inputClassName, searchInputIconColor: iconColor, searchInputBorderColor: borderColor, searchInputCloseIconClasses: closeIconClasses, searchInputActiveStarClasses, placeholderVariant } = searchInputVariantClasses[searchInputVariant];
+	(0, react.useImperativeHandle)(ref, () => localInputRef.current, []);
+	const magnifyingGlassClassesBase = [
+		"spiffy-tw-w-[24px]",
+		"spiffy-tw-h-[32px]",
+		"spiffy-tw-stroke-width-1",
+		"sm:spiffy-tw-w-[32px]"
+	];
+	const magnifyingGlassClassesInactive = (0, classnames.default)(magnifyingGlassClassesBase);
+	const magnifyingGlassClassesActive = (0, classnames.default)([...magnifyingGlassClassesBase, searchInputActiveStarClasses]);
+	const containerClasses = (0, classnames.default)("spiffy-global-search-input-container", "spiffy-tw-relative spiffy-tw-flex spiffy-tw-items-center", className);
+	const inputClasses = (0, classnames.default)("spiffy-global-search-input", "spiffy-tw-flex-grow spiffy-tw-p-2 spiffy-tw-px-[42px] sm:spiffy-tw-p-3 sm:spiffy-tw-px-[48px]", "spiffy-tw-border", "spiffy-tw-text-base", inputClassName);
+	const closeButtonIconClassName = (0, classnames.default)([
+		"spiffy-tw-w-[16px]",
+		"spiffy-tw-h-[16px]",
+		"sm:spiffy-tw-w-[24px]",
+		"sm:spiffy-tw-h-[24px]",
+		"spiffy-tw-cursor-pointer",
+		closeIconClasses
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClasses,
+		"data-testid": dataTestId,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "spiffy-tw-absolute spiffy-tw-left-3 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_src_MagnifyingGlassStarVariant.default, {
+					className: value.length > 0 ? magnifyingGlassClassesActive : magnifyingGlassClassesInactive,
+					stroke: iconColor,
+					strokeWidth: "1px"
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextInput.TextInput, {
+				value,
+				onChange: (event) => onChange(event.target.value),
+				onFocus,
+				onBlur,
+				onKeyDown,
+				placeholder,
+				className: inputClasses,
+				placeholderVariant,
+				"aria-label": "Search",
+				"aria-autocomplete": "list",
+				"aria-expanded": !!suggestions && suggestions.length > 0,
+				"aria-controls": "autocomplete-results",
+				"aria-activedescendant": ariaActivedescendant,
+				borderRadius: "xl",
+				borderColorClass: borderColor,
+				ref: localInputRef
+			}),
+			value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				onClick: () => {
+					onChange("");
+					localInputRef.current?.focus();
+				},
+				className: "spiffy-tw-absolute spiffy-tw-right-5 spiffy-tw-top-1/2 spiffy-tw--translate-y-1/2 spiffy-tw-text-neutral-500 hover:spiffy-tw-text-neutral-700",
+				"aria-label": "Clear search input",
+				type: "button",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_src_IconClose.default, { className: closeButtonIconClassName })
+			})
+		]
+	});
+});
+
+//#endregion
+Object.defineProperty(exports, 'SearchInput', {
+  enumerable: true,
+  get: function () {
+    return SearchInput;
+  }
+});
+Object.defineProperty(exports, 'searchInputVariantClasses', {
+  enumerable: true,
+  get: function () {
+    return searchInputVariantClasses;
+  }
+});

package/dist/SparkleAnimation-BpLwrEqM.cjs

@@ -0,0 +1,96 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+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);
+let framer_motion = require("framer-motion");
+framer_motion = require_chunk.__toESM(framer_motion);
+let __envive_ai_react_icons_src_FourPointStar = require("@envive-ai/react-icons/src/FourPointStar");
+__envive_ai_react_icons_src_FourPointStar = require_chunk.__toESM(__envive_ai_react_icons_src_FourPointStar);
+
+//#region src/components/common/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/common/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);
+			return;
+		}
+	}, [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_src_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_src_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_src_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;
+  }
+});