@envive-ai/react-toolkit 0.2.2 → 0.2.4

package/dist/SearchFilter-t9or-lnj.cjs

@@ -0,0 +1,307 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Typography = require('./Typography-CFNWgbM5.cjs');
+const require_Accordion = require('./Accordion-RpyCFs2a.cjs');
+const require_ButtonBase = require('./ButtonBase-AU23oGQr.cjs');
+const require_ModalSheet = require('./ModalSheet-CcthFeMD.cjs');
+const require_RadioButtonGroup = require('./RadioButtonGroup-3t2kqSFA.cjs');
+const require_ToggleButton = require('./ToggleButton-CJ74eu-N.cjs');
+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);
+
+//#region src/components/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_Typography.Typography, {
+			variant: "body2",
+			className: "spiffy-tw-font-medium",
+			children: [
+				"Filters (",
+				productCount,
+				")"
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			onClick: closeModal,
+			className: "spiffy-tw-p-2",
+			type: "button",
+			"aria-label": "Open Filter Menu",
+			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
+//#region src/components/SearchFilter/useHasFilterStateChanged.tsx
+const useHasFilterStateChanged = (filters, isOpen) => {
+	const [initialFilterStates, setInitialFilterStates] = (0, react.useState)({});
+	const currentFilterStates = (0, react.useMemo)(() => {
+		const states = {};
+		filters.forEach((filter) => {
+			filter.items.forEach((item) => {
+				states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
+			});
+		});
+		return states;
+	}, [filters]);
+	const hasFiltersChanged = (0, react.useMemo)(() => {
+		if (Object.keys(initialFilterStates).length === 0) return false;
+		return Object.keys(currentFilterStates).some((key) => currentFilterStates[key] !== initialFilterStates[key]);
+	}, [currentFilterStates, initialFilterStates]);
+	(0, react.useEffect)(() => {
+		if (isOpen) setInitialFilterStates(currentFilterStates);
+	}, [isOpen]);
+	return hasFiltersChanged;
+};
+
+//#endregion
+//#region src/components/SearchFilter/utils.ts
+const getSelectedFilterItemsCount = (filter) => filter.items.filter((item) => item.isSelected).length;
+const getTotalSelectedFilterItemsCount = (filters) => filters.reduce((acc, filter) => {
+	if (filter.filterId === "sort") return acc;
+	return acc + getSelectedFilterItemsCount(filter);
+}, 0);
+
+//#endregion
+//#region src/components/SearchFilter/SearchFilterFooter.tsx
+const SearchFilterFooter = ({ closeModal, clearAllFilters, filterCount, applyFiltersUnchangedClasses, applyFiltersChangedClasses, hasFiltersChanged }) => {
+	const clearAllButtonEnabled = filterCount > 0;
+	const footerWrapperClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-border-t": true,
+		"spiffy-tw-border-t-[--spiffy-colors-border-light]": true,
+		"spiffy-tw-p-[16px]": true,
+		"spiffy-tw-gap-[16px]": true
+	});
+	const applyFilterButtonClassName = (0, classnames.default)("spiffy-tw-flex spiffy-tw-flex-row spiffy-tw-justify-center spiffy-tw-rounded-[8px] spiffy-tw-w-full", hasFiltersChanged ? applyFiltersChangedClasses : applyFiltersUnchangedClasses);
+	const clearAllButtonClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-row": true,
+		"spiffy-tw-justify-center": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": clearAllButtonEnabled,
+		"spiffy-tw-text-[--spiffy-colors-text-secondary]": !clearAllButtonEnabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: footerWrapperClassName,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+			isDisabled: !hasFiltersChanged,
+			buttonClass: applyFilterButtonClassName,
+			text: "Apply Filters",
+			onClick: closeModal
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+			isDisabled: !clearAllButtonEnabled,
+			buttonClass: clearAllButtonClassName,
+			text: "Clear All",
+			onClick: clearAllFilters
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/SearchFilter/SearchFilter.tsx
+const SortFilter = ({ filter, selectFilterItem, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor }) => {
+	const filterTitle = filter.displayName;
+	const options = filter.items.map((item) => ({
+		label: item.displayName,
+		value: item.filterItemId,
+		isSelected: item.isSelected
+	}));
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RadioButtonGroup.RadioButtonGroup, {
+		options,
+		name: filterTitle,
+		onChange: (value) => {
+			const selectedItem = filter.items.find((item) => item.filterItemId === value);
+			selectFilterItem({
+				filterId: filter.filterId,
+				filterItemId: value,
+				isSelected: true,
+				displayName: selectedItem?.displayName || value
+			});
+		},
+		gap: "large",
+		textButtonGap: "large",
+		value: filter.items.find((item) => item.isSelected)?.filterItemId,
+		fillColor: radioButtonFillColor,
+		hoverColor: radioButtonHoverColor,
+		uncheckedBorderColor: radioButtonUncheckedBorderColor
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
+		title: filterTitle,
+		content
+	});
+};
+const FilterItem = ({ filterId, filterItem, selectFilterItem }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleButton.ToggleButton, {
+	label: filterItem.displayName,
+	secondaryLabel: `(${filterItem.productCount})`,
+	isSelected: filterItem.isSelected,
+	onClick: () => selectFilterItem({
+		filterId,
+		filterItemId: filterItem.filterItemId,
+		isSelected: !filterItem.isSelected,
+		displayName: filterItem.displayName
+	}),
+	variant: "default"
+});
+const Filter = ({ filter, selectFilterItem }) => {
+	const filterContentClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-wrap": true,
+		"spiffy-tw-gap-[8px]": true,
+		"spiffy-tw-pb-[1px]": true
+	});
+	const selectedFilterItems = getSelectedFilterItemsCount(filter);
+	const filterTitle = selectedFilterItems > 0 ? `${filter.displayName} (${selectedFilterItems})` : filter.displayName;
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: filterContentClassName,
+		children: filter.items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterItem, {
+			filterId: filter.filterId,
+			filterItem: item,
+			selectFilterItem
+		}, item.filterItemId))
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {
+		title: filterTitle,
+		content
+	});
+};
+const SearchFilter = ({ filters, productCount, selectFilterItem, clearAllFilters, isOpen, setIsOpen, applyFiltersUnchangedClasses, applyFiltersChangedClasses, headerContent, footerContent, headerClassName, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant }) => {
+	const closeModal = (0, react.useCallback)(() => setIsOpen(false), [setIsOpen]);
+	const filterCount = getTotalSelectedFilterItemsCount(filters);
+	const hasFiltersChanged = useHasFilterStateChanged(filters, isOpen);
+	const filterWrapperClassName = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-gap-[16px]": true,
+		"spiffy-tw-px-[24px]": true,
+		"spiffy-tw-py-[16px]": true,
+		"spiffy-tw-max-h-screen": true,
+		"spiffy-tw-overflow-y-auto": true
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalSheet.ModalSheet, {
+		isOpen,
+		closeModal,
+		headerProps: {
+			headerContent: headerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchFilterHeader, {
+				closeModal,
+				productCount,
+				headerClassName: headerClassName ?? "",
+				filterCloseIconVariant
+			}),
+			chevronColor: "#000"
+		},
+		footerProps: { footerContent: footerContent || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchFilterFooter, {
+			closeModal,
+			clearAllFilters,
+			filterCount,
+			hasFiltersChanged,
+			applyFiltersUnchangedClasses,
+			applyFiltersChangedClasses
+		}) },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: filterWrapperClassName,
+			children: filters.filter((filter) => filter.displayName !== "").map((filter) => {
+				if (filter.filterId === "sort") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortFilter, {
+					filter,
+					selectFilterItem,
+					radioButtonFillColor,
+					radioButtonHoverColor,
+					radioButtonUncheckedBorderColor
+				}, filter.filterId);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Filter, {
+					filter,
+					selectFilterItem
+				}, filter.filterId);
+			})
+		})
+	});
+};
+
+//#endregion
+//#region src/components/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)("button", {
+		type: "button",
+		role: "option",
+		"aria-selected": isSelected,
+		className: "spiffy-tw-flex spiffy-tw-items-center spiffy-tw-justify-between spiffy-tw-py-2",
+		onClick: () => onSelectFilterItem(filterItem),
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				onSelectFilterItem(filterItem);
+			}
+		},
+		onKeyUp: (event) => {
+			if (event.key === " ") event.preventDefault();
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+			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, 'SearchFilter', {
+  enumerable: true,
+  get: function () {
+    return SearchFilter;
+  }
+});
+Object.defineProperty(exports, 'SearchFilterFooter', {
+  enumerable: true,
+  get: function () {
+    return SearchFilterFooter;
+  }
+});
+Object.defineProperty(exports, 'SearchFilterHeader', {
+  enumerable: true,
+  get: function () {
+    return SearchFilterHeader;
+  }
+});
+Object.defineProperty(exports, 'SearchFilterItem', {
+  enumerable: true,
+  get: function () {
+    return SearchFilterItem;
+  }
+});
+Object.defineProperty(exports, 'getSelectedFilterItemsCount', {
+  enumerable: true,
+  get: function () {
+    return getSelectedFilterItemsCount;
+  }
+});
+Object.defineProperty(exports, 'getTotalSelectedFilterItemsCount', {
+  enumerable: true,
+  get: function () {
+    return getTotalSelectedFilterItemsCount;
+  }
+});

package/dist/SearchInput/index.cjs

@@ -0,0 +1,8 @@
+require('../Typography-CFNWgbM5.cjs');
+const require_SearchInput = require('../SearchInput-CO1poiit.cjs');
+require('../SettingsVariant-BsBbdjV5.cjs');
+require('../TextInput-iAKCKHwT.cjs');
+require('../colorsConfig-D-MZuBvt.cjs');
+
+exports.SearchInput = require_SearchInput.SearchInput;
+exports.searchInputVariantClasses = require_SearchInput.searchInputVariantClasses;

package/dist/SearchInput/index.d.cts

@@ -0,0 +1,34 @@
+import { SearchInputVariant as SearchInputVariant$1 } from "../types-BhGjnuWx.cjs";
+import { TypographyVariantMap } from "../typographyVariantClasses-DTSltxPN.cjs";
+import React from "react";
+import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
+
+//#region src/components/SearchInput/SearchInput.d.ts
+interface SearchInputProps {
+  searchInputVariant?: SearchInputVariant;
+  value: string;
+  placeholder?: string;
+  suggestions?: string[];
+  className?: string;
+  dataTestId?: string;
+  ariaActivedescendant?: string;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (newValue: string) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/SearchInput/searchInputVariants.d.ts
+type SearchInputVariantClasses = {
+  searchInputIconColor: string;
+  searchInputBorderColor: string;
+  searchInputCloseIconClasses: string;
+  searchInputActiveStarClasses: string;
+  autocompleteIconColor: string;
+  searchInputClasses: string;
+  placeholderVariant: keyof typeof TypographyVariantMap;
+};
+declare const searchInputVariantClasses: Record<SearchInputVariant$1, SearchInputVariantClasses>;
+//#endregion
+export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput/index.d.ts

@@ -0,0 +1,34 @@
+import { SearchInputVariant as SearchInputVariant$1 } from "../types-CGRog8XL.js";
+import { TypographyVariantMap } from "../typographyVariantClasses-COmQXqcN.js";
+import React from "react";
+import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
+
+//#region src/components/SearchInput/SearchInput.d.ts
+interface SearchInputProps {
+  searchInputVariant?: SearchInputVariant;
+  value: string;
+  placeholder?: string;
+  suggestions?: string[];
+  className?: string;
+  dataTestId?: string;
+  ariaActivedescendant?: string;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (newValue: string) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/components/SearchInput/searchInputVariants.d.ts
+type SearchInputVariantClasses = {
+  searchInputIconColor: string;
+  searchInputBorderColor: string;
+  searchInputCloseIconClasses: string;
+  searchInputActiveStarClasses: string;
+  autocompleteIconColor: string;
+  searchInputClasses: string;
+  placeholderVariant: keyof typeof TypographyVariantMap;
+};
+declare const searchInputVariantClasses: Record<SearchInputVariant$1, SearchInputVariantClasses>;
+//#endregion
+export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput/index.js

@@ -0,0 +1,7 @@
+import "../Typography-D3vDkBMS.js";
+import { SearchInput, searchInputVariantClasses } from "../SearchInput-BaiWd0_O.js";
+import "../SettingsVariant-CUSFlJEu.js";
+import "../TextInput-B_4Bu2vf.js";
+import "../colorsConfig-DEfiLHH0.js";
+
+export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput-BaiWd0_O.js

@@ -0,0 +1,108 @@
+import { TextInput } from "./TextInput-B_4Bu2vf.js";
+import { ColorNames, colorVar } from "./colorsConfig-DEfiLHH0.js";
+import React, { useImperativeHandle, useRef } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import MagnifyingGlassStarVariant from "@envive-ai/react-icons/MagnifyingGlassStarVariant";
+
+//#region ../icons/src/IconClose.tsx
+const SvgIconClose = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	fill: "none",
+	...props,
+	children: [/* @__PURE__ */ jsx("circle", {
+		cx: 12,
+		cy: 12,
+		r: 12,
+		fill: "#FCFCF9"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M16.167 6 11.5 10.667 6.833 6 5 7.833 9.667 12.5 5 17.167 6.833 19l4.667-4.667L16.167 19 18 17.167 13.333 12.5 18 7.833z"
+	})]
+});
+var IconClose_default = SvgIconClose;
+
+//#endregion
+//#region src/components/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/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(IconClose_default, { className: closeButtonIconClassName })
+			})
+		]
+	});
+});
+
+//#endregion
+export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput-CO1poiit.cjs

@@ -0,0 +1,124 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_TextInput = require('./TextInput-iAKCKHwT.cjs');
+const require_colorsConfig = require('./colorsConfig-D-MZuBvt.cjs');
+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_MagnifyingGlassStarVariant = require("@envive-ai/react-icons/MagnifyingGlassStarVariant");
+__envive_ai_react_icons_MagnifyingGlassStarVariant = require_chunk.__toESM(__envive_ai_react_icons_MagnifyingGlassStarVariant);
+
+//#region ../icons/src/IconClose.tsx
+const SvgIconClose = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	fill: "none",
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: 12,
+		cy: 12,
+		r: 12,
+		fill: "#FCFCF9"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+		fill: "currentColor",
+		d: "M16.167 6 11.5 10.667 6.833 6 5 7.833 9.667 12.5 5 17.167 6.833 19l4.667-4.667L16.167 19 18 17.167 13.333 12.5 18 7.833z"
+	})]
+});
+var IconClose_default = SvgIconClose;
+
+//#endregion
+//#region src/components/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/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_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)(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/SearchInputForm/index.cjs

@@ -0,0 +1,40 @@
+const require_chunk = require('../chunk-CUT6urMc.cjs');
+require('../Typography-CFNWgbM5.cjs');
+const require_SearchAutocomplete = require('../SearchAutocomplete-TX8UTczp.cjs');
+const require_SearchInput = require('../SearchInput-CO1poiit.cjs');
+require('../SettingsVariant-BsBbdjV5.cjs');
+require('../TextInput-iAKCKHwT.cjs');
+require('../colorsConfig-D-MZuBvt.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/components/SearchInputForm/SearchInputForm.tsx
+const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, isDirty, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, searchInputDataTestId }) => {
+	const { searchInputIconColor } = require_SearchInput.searchInputVariantClasses[searchInputVariant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+		onSubmit: (e) => {
+			e.preventDefault();
+			onSearchSubmit();
+		},
+		className: "spiffy-tw-grow",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchInput.SearchInput, {
+			value: searchText,
+			placeholder: searchBoxPlaceholder,
+			suggestions: autocompleteResults,
+			ariaActivedescendant: focusedOptionId,
+			searchInputVariant,
+			dataTestId: searchInputDataTestId,
+			onKeyDown,
+			onChange: onSearchInputChange
+		})
+	}), isDirty && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchAutocomplete.SearchAutocomplete, {
+		id: "autocomplete-results",
+		results: autocompleteResults,
+		focusedIndex,
+		iconColor: searchInputIconColor,
+		onSuggestionSelect: onAutocompleteSelect
+	})] });
+};
+
+//#endregion
+exports.SearchInputForm = SearchInputForm;