@envive-ai/react-toolkit 0.2.3 → 0.2.5

package/dist/SearchAutocomplete-DEY_Cmf6.js

@@ -0,0 +1,69 @@
+import { Typography } from "./Typography-D3vDkBMS.js";
+import { motion } from "framer-motion";
+import React from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import OutlinedStar from "@envive-ai/react-icons/OutlinedStar";
+
+//#region src/components/SearchAutocomplete/SearchAutocomplete.tsx
+const SearchAutocomplete = ({ id, results, focusedIndex, searchText = "", onSuggestionSelect, iconColor }) => {
+	if (results.length === 0) return null;
+	const highlightMatchingText = (text, searchQuery) => {
+		if (!searchQuery.trim()) return /* @__PURE__ */ jsx(Typography, {
+			variant: "body3",
+			children: text
+		});
+		const escapedQuery = searchQuery.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		const regex = new RegExp(`(${escapedQuery})`, "gi");
+		const parts = text.split(regex);
+		return /* @__PURE__ */ jsx(Typography, {
+			variant: "body3",
+			children: parts.map((part, index) => {
+				return part.toLowerCase() === searchQuery.toLowerCase() ? /* @__PURE__ */ jsx("strong", {
+					className: "spiffy-tw-font-bold",
+					children: part
+				}, index) : /* @__PURE__ */ jsx("span", { children: part }, index);
+			})
+		});
+	};
+	const containerClasses = classNames("spiffy-tw-mt-[16px]", "spiffy-tw-mb-[8px]");
+	const getListElementClasses = (index) => classNames("spiffy-tw-flex", "spiffy-tw-items-center", "spiffy-tw-cursor-pointer", "spiffy-tw-py-[8px]", "spiffy-tw-pl-[16px]", "spiffy-tw-text-[--spiffy-colors-text-primary]", "hover:spiffy-tw-bg-neutral-100", { "spiffy-tw-bg-neutral-200": focusedIndex === index });
+	return /* @__PURE__ */ jsx(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__ */ jsx("ul", {
+			id,
+			role: "listbox",
+			className: containerClasses,
+			children: results.map((result, index) => /* @__PURE__ */ jsxs("li", {
+				id: `option-${index}`,
+				role: "option",
+				"aria-selected": index === focusedIndex,
+				className: getListElementClasses(index),
+				onClick: () => onSuggestionSelect(result, index),
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.keyCode === 13) onSuggestionSelect(result, index);
+				},
+				children: [/* @__PURE__ */ jsx(OutlinedStar, {
+					className: "spiffy-tw-w-[16px] spiffy-tw-h-[16px] spiffy-tw-mr-[16px]",
+					fill: iconColor
+				}), highlightMatchingText(result, searchText)]
+			}, index))
+		})
+	});
+};
+
+//#endregion
+export { SearchAutocomplete };

package/dist/SearchFilter/index.cjs

@@ -6,8 +6,8 @@ require('../ButtonBase-DbWQ25n-.cjs');
 require('../ModalSheet-CcthFeMD.cjs');
 require('../RadioButton-DG0PgZbz.cjs');
 require('../RadioButtonGroup-3t2kqSFA.cjs');
-const require_SearchFilter = require('../SearchFilter-t9or-lnj.cjs');
-require('../ToggleButton-CJ74eu-N.cjs');
+const require_SearchFilter = require('../SearchFilter-aSgPzPq-.cjs');
+require('../ToggleButton-DCiR4sB5.cjs');
 
 exports.SearchFilter = require_SearchFilter.SearchFilter;
 exports.SearchFilterFooter = require_SearchFilter.SearchFilterFooter;

package/dist/SearchFilter/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
 import { CloseIconVariant, FilterFooterProps, SearchFilterDatum, SearchFilterItemDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchFilter/types.d.ts
@@ -55,7 +55,7 @@ declare const SearchFilter: ({
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor,
   filterCloseIconVariant
-}: SearchFilterProps) => react_jsx_runtime10.JSX.Element;
+}: SearchFilterProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterHeader.d.ts
 declare const SearchFilterHeader: ({
@@ -63,7 +63,7 @@ declare const SearchFilterHeader: ({
   productCount,
   headerClassName,
   filterCloseIconVariant
-}: SearchFilterHeaderProps) => react_jsx_runtime10.JSX.Element;
+}: SearchFilterHeaderProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterFooter.d.ts
 declare const SearchFilterFooter: ({
@@ -73,7 +73,7 @@ declare const SearchFilterFooter: ({
   applyFiltersUnchangedClasses,
   applyFiltersChangedClasses,
   hasFiltersChanged
-}: FilterFooterProps) => react_jsx_runtime10.JSX.Element;
+}: FilterFooterProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterItem.d.ts
 declare const SearchFilterItem: ({
@@ -82,7 +82,7 @@ declare const SearchFilterItem: ({
   radioButtonFillColor,
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor
-}: SearchFilterItemProps) => react_jsx_runtime10.JSX.Element;
+}: SearchFilterItemProps) => react_jsx_runtime23.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/utils.d.ts
 declare const getSelectedFilterItemsCount: (filter: SearchFilterDatum) => number;

package/dist/SearchFilter/index.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { CloseIconVariant, FilterFooterProps, SearchFilterDatum, SearchFilterItemDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchFilter/types.d.ts
@@ -55,7 +55,7 @@ declare const SearchFilter: ({
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor,
   filterCloseIconVariant
-}: SearchFilterProps) => react_jsx_runtime11.JSX.Element;
+}: SearchFilterProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterHeader.d.ts
 declare const SearchFilterHeader: ({
@@ -63,7 +63,7 @@ declare const SearchFilterHeader: ({
   productCount,
   headerClassName,
   filterCloseIconVariant
-}: SearchFilterHeaderProps) => react_jsx_runtime11.JSX.Element;
+}: SearchFilterHeaderProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterFooter.d.ts
 declare const SearchFilterFooter: ({
@@ -73,7 +73,7 @@ declare const SearchFilterFooter: ({
   applyFiltersUnchangedClasses,
   applyFiltersChangedClasses,
   hasFiltersChanged
-}: FilterFooterProps) => react_jsx_runtime11.JSX.Element;
+}: FilterFooterProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/SearchFilterItem.d.ts
 declare const SearchFilterItem: ({
@@ -82,7 +82,7 @@ declare const SearchFilterItem: ({
   radioButtonFillColor,
   radioButtonHoverColor,
   radioButtonUncheckedBorderColor
-}: SearchFilterItemProps) => react_jsx_runtime11.JSX.Element;
+}: SearchFilterItemProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/SearchFilter/utils.d.ts
 declare const getSelectedFilterItemsCount: (filter: SearchFilterDatum) => number;

package/dist/SearchFilter/index.js

@@ -6,7 +6,7 @@ import "../ButtonBase-C_uKnl48.js";
 import "../ModalSheet-BSj_g9JF.js";
 import "../RadioButton-C_soBi7w.js";
 import "../RadioButtonGroup-DMbVgPQH.js";
-import { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from "../SearchFilter-BQW4o3Xf.js";
-import "../ToggleButton-Br6MgjiG.js";
+import { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from "../SearchFilter-B0ICGnqG.js";
+import "../ToggleButton-8P9eNKy1.js";
 
 export { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };

package/dist/{SearchFilter-BQW4o3Xf.js → SearchFilter-B0ICGnqG.js}

@@ -3,7 +3,7 @@ import { Accordion } from "./Accordion-DxtXK__u.js";
 import { ButtonBase } from "./ButtonBase-6wjsZ1tU.js";
 import { ModalSheet } from "./ModalSheet-BSj_g9JF.js";
 import { RadioButtonGroup } from "./RadioButtonGroup-DMbVgPQH.js";
-import { ToggleButton } from "./ToggleButton-Br6MgjiG.js";
+import { ToggleButton } from "./ToggleButton-8P9eNKy1.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{SearchFilter-t9or-lnj.cjs → SearchFilter-aSgPzPq-.cjs}

@@ -4,7 +4,7 @@ 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');
+const require_ToggleButton = require('./ToggleButton-DCiR4sB5.cjs');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");

package/dist/SearchInput/index.cjs

@@ -1,8 +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');
+const require_SearchInput = require('../SearchInput-DkGDEb66.cjs');
+require('../SettingsVariant-BzZSQvrw.cjs');
+require('../TextInput-BKNorxPl.cjs');
+require('../colorsConfig-CRxY3SQ_.cjs');
 
 exports.SearchInput = require_SearchInput.SearchInput;
 exports.searchInputVariantClasses = require_SearchInput.searchInputVariantClasses;

package/dist/SearchInput/index.js

@@ -1,7 +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";
+import { SearchInput, searchInputVariantClasses } from "../SearchInput-DY2g3Bra.js";
+import "../SettingsVariant-DMgNg4dw.js";
+import "../TextInput-NKOORtYu.js";
+import "../colorsConfig-D_IPWAUL.js";
 
 export { SearchInput, searchInputVariantClasses };

package/dist/{SearchInput-BaiWd0_O.js → SearchInput-DY2g3Bra.js}

@@ -1,5 +1,5 @@
-import { TextInput } from "./TextInput-B_4Bu2vf.js";
-import { ColorNames, colorVar } from "./colorsConfig-DEfiLHH0.js";
+import { TextInput } from "./TextInput-NKOORtYu.js";
+import { ColorNames, colorVar } from "./colorsConfig-D_IPWAUL.js";
 import React, { useImperativeHandle, useRef } from "react";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{SearchInput-CO1poiit.cjs → SearchInput-DkGDEb66.cjs}

@@ -1,6 +1,6 @@
 const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_TextInput = require('./TextInput-iAKCKHwT.cjs');
-const require_colorsConfig = require('./colorsConfig-D-MZuBvt.cjs');
+const require_TextInput = require('./TextInput-BKNorxPl.cjs');
+const require_colorsConfig = require('./colorsConfig-CRxY3SQ_.cjs');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");

package/dist/SearchInputForm/index.cjs

@@ -1,39 +1,59 @@
 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');
+const require_SearchInput = require('../SearchInput-DkGDEb66.cjs');
+require('../SettingsVariant-BzZSQvrw.cjs');
+require('../TextInput-BKNorxPl.cjs');
+require('../colorsConfig-CRxY3SQ_.cjs');
+const require_SearchAutocomplete = require('../SearchAutocomplete-BBBIDGP_.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);
+let __envive_ai_react_hooks_config_locators_components_search = require("@envive-ai/react-hooks/config/locators/components/search");
+__envive_ai_react_hooks_config_locators_components_search = require_chunk.__toESM(__envive_ai_react_hooks_config_locators_components_search);
 
 //#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
-	})] });
+const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, shouldShowAutocomplete, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, onSearchInputFocus, onSearchInputBlur }) => {
+	const { autocompleteIconColor } = require_SearchInput.searchInputVariantClasses[searchInputVariant];
+	const containerClasses = (0, classnames.default)("spiffy-tw-relative", "spiffy-tw-w-full");
+	const formClasses = (0, classnames.default)({
+		"spiffy-tw-grow": true,
+		"spiffy-tw-relative": true,
+		"spiffy-tw-z-20": shouldShowAutocomplete
+	});
+	const autocompleteContainerClasses = (0, classnames.default)("spiffy-tw-absolute", "spiffy-tw-top-1/2", "spiffy-tw-z-10", "spiffy-tw-left-0", "spiffy-tw-right-0", "spiffy-tw-bg-white", "spiffy-tw-w-full", "spiffy-tw-rounded-b-lg", "spiffy-tw-border", "spiffy-tw-border-t-0", "spiffy-tw-pt-4");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClasses,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("form", {
+			onSubmit: (e) => {
+				e.preventDefault();
+				onSearchSubmit();
+			},
+			className: formClasses,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchInput.SearchInput, {
+				value: searchText,
+				placeholder: searchBoxPlaceholder,
+				suggestions: autocompleteResults,
+				ariaActivedescendant: focusedOptionId,
+				searchInputVariant,
+				dataTestId: __envive_ai_react_hooks_config_locators_components_search.SEARCH_INPUT_TESTID,
+				onKeyDown,
+				onChange: onSearchInputChange,
+				onFocus: onSearchInputFocus,
+				onBlur: onSearchInputBlur
+			})
+		}), shouldShowAutocomplete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: autocompleteContainerClasses,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchAutocomplete.SearchAutocomplete, {
+				id: "autocomplete-results",
+				results: autocompleteResults,
+				focusedIndex,
+				searchText,
+				iconColor: autocompleteIconColor,
+				onSuggestionSelect: onAutocompleteSelect
+			})
+		})]
+	});
 };
 
 //#endregion

package/dist/SearchInputForm/index.d.cts

@@ -1,5 +1,5 @@
 import { SearchInputVariant } from "../types-BhGjnuWx.cjs";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/SearchInputForm.d.ts
 interface SearchInputFormProps {
@@ -8,13 +8,14 @@ interface SearchInputFormProps {
   autocompleteResults: string[];
   searchBoxPlaceholder: string;
   focusedOptionId: string | undefined;
-  isDirty: boolean;
   focusedIndex: number;
   onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onAutocompleteSelect: (suggestion: string) => void;
+  onAutocompleteSelect: (suggestion: string, rankPosition?: number) => void;
   onSearchInputChange: (value: string) => void;
   onSearchSubmit: () => void;
-  searchInputDataTestId?: string;
+  onSearchInputFocus: () => void;
+  onSearchInputBlur: () => void;
+  shouldShowAutocomplete: boolean;
 }
 declare const SearchInputForm: ({
   searchInputVariant,
@@ -22,13 +23,14 @@ declare const SearchInputForm: ({
   autocompleteResults,
   searchBoxPlaceholder,
   focusedOptionId,
-  isDirty,
+  shouldShowAutocomplete,
   focusedIndex,
   onKeyDown,
   onAutocompleteSelect,
   onSearchInputChange,
   onSearchSubmit,
-  searchInputDataTestId
-}: SearchInputFormProps) => react_jsx_runtime2.JSX.Element;
+  onSearchInputFocus,
+  onSearchInputBlur
+}: SearchInputFormProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SearchInputForm };

package/dist/SearchInputForm/index.d.ts

@@ -1,5 +1,5 @@
 import { SearchInputVariant } from "../types-CGRog8XL.js";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/SearchInputForm.d.ts
 interface SearchInputFormProps {
@@ -8,13 +8,14 @@ interface SearchInputFormProps {
   autocompleteResults: string[];
   searchBoxPlaceholder: string;
   focusedOptionId: string | undefined;
-  isDirty: boolean;
   focusedIndex: number;
   onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-  onAutocompleteSelect: (suggestion: string) => void;
+  onAutocompleteSelect: (suggestion: string, rankPosition?: number) => void;
   onSearchInputChange: (value: string) => void;
   onSearchSubmit: () => void;
-  searchInputDataTestId?: string;
+  onSearchInputFocus: () => void;
+  onSearchInputBlur: () => void;
+  shouldShowAutocomplete: boolean;
 }
 declare const SearchInputForm: ({
   searchInputVariant,
@@ -22,13 +23,14 @@ declare const SearchInputForm: ({
   autocompleteResults,
   searchBoxPlaceholder,
   focusedOptionId,
-  isDirty,
+  shouldShowAutocomplete,
   focusedIndex,
   onKeyDown,
   onAutocompleteSelect,
   onSearchInputChange,
   onSearchSubmit,
-  searchInputDataTestId
-}: SearchInputFormProps) => react_jsx_runtime17.JSX.Element;
+  onSearchInputFocus,
+  onSearchInputBlur
+}: SearchInputFormProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { SearchInputForm };

package/dist/SearchInputForm/index.js

@@ -1,37 +1,55 @@
 import "../Typography-D3vDkBMS.js";
-import { SearchAutocomplete } from "../SearchAutocomplete-obO19yzL.js";
-import { SearchInput, searchInputVariantClasses } from "../SearchInput-BaiWd0_O.js";
-import "../SettingsVariant-CUSFlJEu.js";
-import "../TextInput-B_4Bu2vf.js";
-import "../colorsConfig-DEfiLHH0.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { SearchInput, searchInputVariantClasses } from "../SearchInput-DY2g3Bra.js";
+import "../SettingsVariant-DMgNg4dw.js";
+import "../TextInput-NKOORtYu.js";
+import "../colorsConfig-D_IPWAUL.js";
+import { SearchAutocomplete } from "../SearchAutocomplete-DEY_Cmf6.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SEARCH_INPUT_TESTID } from "@envive-ai/react-hooks/config/locators/components/search";
 
 //#region src/components/SearchInputForm/SearchInputForm.tsx
-const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, isDirty, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, searchInputDataTestId }) => {
-	const { searchInputIconColor } = searchInputVariantClasses[searchInputVariant];
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("form", {
-		onSubmit: (e) => {
-			e.preventDefault();
-			onSearchSubmit();
-		},
-		className: "spiffy-tw-grow",
-		children: /* @__PURE__ */ jsx(SearchInput, {
-			value: searchText,
-			placeholder: searchBoxPlaceholder,
-			suggestions: autocompleteResults,
-			ariaActivedescendant: focusedOptionId,
-			searchInputVariant,
-			dataTestId: searchInputDataTestId,
-			onKeyDown,
-			onChange: onSearchInputChange
-		})
-	}), isDirty && /* @__PURE__ */ jsx(SearchAutocomplete, {
-		id: "autocomplete-results",
-		results: autocompleteResults,
-		focusedIndex,
-		iconColor: searchInputIconColor,
-		onSuggestionSelect: onAutocompleteSelect
-	})] });
+const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, shouldShowAutocomplete, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, onSearchInputFocus, onSearchInputBlur }) => {
+	const { autocompleteIconColor } = searchInputVariantClasses[searchInputVariant];
+	const containerClasses = classNames("spiffy-tw-relative", "spiffy-tw-w-full");
+	const formClasses = classNames({
+		"spiffy-tw-grow": true,
+		"spiffy-tw-relative": true,
+		"spiffy-tw-z-20": shouldShowAutocomplete
+	});
+	const autocompleteContainerClasses = classNames("spiffy-tw-absolute", "spiffy-tw-top-1/2", "spiffy-tw-z-10", "spiffy-tw-left-0", "spiffy-tw-right-0", "spiffy-tw-bg-white", "spiffy-tw-w-full", "spiffy-tw-rounded-b-lg", "spiffy-tw-border", "spiffy-tw-border-t-0", "spiffy-tw-pt-4");
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClasses,
+		children: [/* @__PURE__ */ jsx("form", {
+			onSubmit: (e) => {
+				e.preventDefault();
+				onSearchSubmit();
+			},
+			className: formClasses,
+			children: /* @__PURE__ */ jsx(SearchInput, {
+				value: searchText,
+				placeholder: searchBoxPlaceholder,
+				suggestions: autocompleteResults,
+				ariaActivedescendant: focusedOptionId,
+				searchInputVariant,
+				dataTestId: SEARCH_INPUT_TESTID,
+				onKeyDown,
+				onChange: onSearchInputChange,
+				onFocus: onSearchInputFocus,
+				onBlur: onSearchInputBlur
+			})
+		}), shouldShowAutocomplete && /* @__PURE__ */ jsx("div", {
+			className: autocompleteContainerClasses,
+			children: /* @__PURE__ */ jsx(SearchAutocomplete, {
+				id: "autocomplete-results",
+				results: autocompleteResults,
+				focusedIndex,
+				searchText,
+				iconColor: autocompleteIconColor,
+				onSuggestionSelect: onAutocompleteSelect
+			})
+		})]
+	});
 };
 
 //#endregion

package/dist/SearchResultsContent/index.cjs

@@ -2,12 +2,12 @@ const require_chunk = require('../chunk-CUT6urMc.cjs');
 require('../Typography-CFNWgbM5.cjs');
 require('../DynamicFiltersScrollbar-50i_InZz.cjs');
 require('../ImageWithFallback-1LqhQK1q.cjs');
-require('../ProductGrid-Dcy7JxVN.cjs');
-require('../ProductCard-D1F9A8Rw.cjs');
-require('../Spinner-B1IEMa00.cjs');
-require('../colorsConfig-D-MZuBvt.cjs');
-const require_SearchResultsStates = require('../SearchResultsStates-DQlstrHd.cjs');
-require('../searchFilterSidebarVariants-DXabOauB.cjs');
+require('../ProductCard-CByKIsUN.cjs');
+require('../Spinner-DjK8ts9E.cjs');
+require('../ProductGrid-BeFeluHo.cjs');
+require('../colorsConfig-CRxY3SQ_.cjs');
+const require_SearchResultsStates = require('../SearchResultsStates-e5W9Ok19.cjs');
+require('../searchFilterSidebarVariants-CjDvgxxT.cjs');
 require('../SparkleAnimation-Bm3fk2FJ.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);

package/dist/SearchResultsContent/index.d.cts

@@ -1,6 +1,6 @@
-import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-cx3r6TgQ.cjs";
-import { SearchFilterSidebarVariant } from "../index-B-5pBFE7.cjs";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-DWTTeC2a.cjs";
+import { SearchFilterSidebarVariant } from "../index-BQVJifDf.cjs";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
 import { SearchResultsState } from "@envive-ai/react-hooks/hooks/utils";
 
@@ -43,6 +43,6 @@ declare const SearchResultsContent: ({
   onRemoveFilter,
   onToggleDynamicFilter,
   noResultsFoundText
-}: SearchResultsContentProps) => react_jsx_runtime9.JSX.Element;
+}: SearchResultsContentProps) => react_jsx_runtime3.JSX.Element;
 //#endregion
 export { SearchResultsContent };

package/dist/SearchResultsContent/index.d.ts

@@ -1,6 +1,6 @@
-import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-BzY_al-V.js";
-import { SearchFilterSidebarVariant } from "../index-BcvJf9Sr.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-BdNJ2gwC.js";
+import { SearchFilterSidebarVariant } from "../index-fXyRC79n.js";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 import { SearchResultsState } from "@envive-ai/react-hooks/hooks/utils";
 import { SelectedFilterOption } from "@envive-ai/react-hooks/atoms/search";
 
@@ -43,6 +43,6 @@ declare const SearchResultsContent: ({
   onRemoveFilter,
   onToggleDynamicFilter,
   noResultsFoundText
-}: SearchResultsContentProps) => react_jsx_runtime6.JSX.Element;
+}: SearchResultsContentProps) => react_jsx_runtime28.JSX.Element;
 //#endregion
 export { SearchResultsContent };

package/dist/SearchResultsContent/index.js

@@ -1,12 +1,12 @@
 import "../Typography-D3vDkBMS.js";
 import "../DynamicFiltersScrollbar-AhyHehrB.js";
 import "../ImageWithFallback-Ckwsmd8P.js";
-import "../ProductGrid-NtuMrOtp.js";
-import "../ProductCard-2aPkjS8z.js";
-import "../Spinner-BrHoB-Zg.js";
-import "../colorsConfig-DEfiLHH0.js";
-import { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid } from "../SearchResultsStates-CalOf6QP.js";
-import "../searchFilterSidebarVariants-BD4SYugF.js";
+import "../ProductCard-BIlnM2nV.js";
+import "../Spinner-BqTt55uu.js";
+import "../ProductGrid-Cgkb4vNf.js";
+import "../colorsConfig-D_IPWAUL.js";
+import { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid } from "../SearchResultsStates-DzNMYUKh.js";
+import "../searchFilterSidebarVariants-Clm9ddD5.js";
 import "../SparkleAnimation-D1QjYho_.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SearchResultsState } from "@envive-ai/react-hooks/hooks/utils";

package/dist/SearchResultsFilterSidebar/index.cjs

@@ -7,11 +7,11 @@ require('../ButtonBase-DbWQ25n-.cjs');
 require('../ModalSheet-CcthFeMD.cjs');
 require('../RadioButton-DG0PgZbz.cjs');
 require('../RadioButtonGroup-3t2kqSFA.cjs');
-const require_SearchFilter = require('../SearchFilter-t9or-lnj.cjs');
-require('../ToggleButton-CJ74eu-N.cjs');
-const require_SettingsVariant = require('../SettingsVariant-BsBbdjV5.cjs');
-require('../colorsConfig-D-MZuBvt.cjs');
-const require_searchFilterSidebarVariants = require('../searchFilterSidebarVariants-DXabOauB.cjs');
+const require_SettingsVariant = require('../SettingsVariant-BzZSQvrw.cjs');
+require('../colorsConfig-CRxY3SQ_.cjs');
+const require_SearchFilter = require('../SearchFilter-aSgPzPq-.cjs');
+require('../ToggleButton-DCiR4sB5.cjs');
+const require_searchFilterSidebarVariants = require('../searchFilterSidebarVariants-CjDvgxxT.cjs');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/SearchResultsFilterSidebar/index.d.cts

@@ -1,2 +1,2 @@
-import { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses } from "../index-B-5pBFE7.cjs";
+import { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses } from "../index-BQVJifDf.cjs";
 export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/SearchResultsFilterSidebar/index.d.ts

@@ -1,2 +1,2 @@
-import { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses } from "../index-BcvJf9Sr.js";
+import { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses } from "../index-fXyRC79n.js";
 export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/SearchResultsFilterSidebar/index.js

@@ -6,11 +6,11 @@ import "../ButtonBase-C_uKnl48.js";
 import "../ModalSheet-BSj_g9JF.js";
 import "../RadioButton-C_soBi7w.js";
 import "../RadioButtonGroup-DMbVgPQH.js";
-import { SearchFilter, SearchFilterHeader } from "../SearchFilter-BQW4o3Xf.js";
-import "../ToggleButton-Br6MgjiG.js";
-import { SettingsVariant_default } from "../SettingsVariant-CUSFlJEu.js";
-import "../colorsConfig-DEfiLHH0.js";
-import { searchFilterSidebarVariantClasses } from "../searchFilterSidebarVariants-BD4SYugF.js";
+import { SettingsVariant_default } from "../SettingsVariant-DMgNg4dw.js";
+import "../colorsConfig-D_IPWAUL.js";
+import { SearchFilter, SearchFilterHeader } from "../SearchFilter-B0ICGnqG.js";
+import "../ToggleButton-8P9eNKy1.js";
+import { searchFilterSidebarVariantClasses } from "../searchFilterSidebarVariants-Clm9ddD5.js";
 import { useCallback } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";