@envive-ai/react-toolkit 0.2.4 → 0.2.6

package/dist/SearchFilter/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime6 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_runtime24.JSX.Element;
+}: SearchFilterProps) => react_jsx_runtime6.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_runtime24.JSX.Element;
+}: SearchFilterHeaderProps) => react_jsx_runtime6.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_runtime24.JSX.Element;
+}: FilterFooterProps) => react_jsx_runtime6.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_runtime24.JSX.Element;
+}: SearchFilterItemProps) => react_jsx_runtime6.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_runtime13 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_runtime13.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_runtime13.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_runtime13.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_runtime13.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

@@ -4,9 +4,9 @@ import "../AnimatedChevron-Bik7GMSe.js";
 import "../ButtonBase-6wjsZ1tU.js";
 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 "../RadioButton-BYq1JQtD.js";
+import "../RadioButtonGroup-Dgt2ub6s.js";
+import { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from "../SearchFilter-DWii-Y_g.js";
+import "../ToggleButton-8P9eNKy1.js";
 
 export { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };

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

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

package/dist/{SearchFilter-BQW4o3Xf.js → SearchFilter-DWii-Y_g.js}

@@ -2,8 +2,8 @@ import { Typography } from "./Typography-D3vDkBMS.js";
 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 { RadioButtonGroup } from "./RadioButtonGroup-Dgt2ub6s.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/SearchInput/index.cjs

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

package/dist/SearchInput/index.d.ts

@@ -1,5 +1,5 @@
-import { SearchInputVariant as SearchInputVariant$1 } from "../types-CGRog8XL.js";
-import { TypographyVariantMap } from "../typographyVariantClasses-COmQXqcN.js";
+import { SearchInputVariant as SearchInputVariant$1 } from "../types-DlqhqT_S.js";
+import { TypographyVariantMap } from "../typographyVariantClasses-B6wiawat.js";
 import React from "react";
 import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
 

package/dist/SearchInput/index.js

@@ -1,7 +1,6 @@
 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 "../TextInput-BfUhaQUc.js";
+import "../colorsConfig-E7w6Ol6W.js";
+import { SearchInput, searchInputVariantClasses } from "../SearchInput-DFoKyqJV.js";
 
 export { SearchInput, searchInputVariantClasses };

package/dist/{SearchInput-CO1poiit.cjs → SearchInput-Bn6wD39s.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-BTTG_drp.cjs');
+const require_colorsConfig = require('./colorsConfig-BjmNL7s7.cjs');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let classnames = require("classnames");
@@ -9,27 +9,9 @@ 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);
+let __envive_ai_react_icons_IconClose = require("@envive-ai/react-icons/IconClose");
+__envive_ai_react_icons_IconClose = require_chunk.__toESM(__envive_ai_react_icons_IconClose);
 
-//#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",
@@ -103,7 +85,7 @@ const SearchInput = react.default.forwardRef(({ searchInputVariant = "standard",
 				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 })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_icons_IconClose.default, { className: closeButtonIconClassName })
 			})
 		]
 	});

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

@@ -1,30 +1,11 @@
-import { TextInput } from "./TextInput-B_4Bu2vf.js";
-import { ColorNames, colorVar } from "./colorsConfig-DEfiLHH0.js";
+import { TextInput } from "./TextInput-BfUhaQUc.js";
+import { ColorNames, colorVar } from "./colorsConfig-E7w6Ol6W.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";
+import IconClose from "@envive-ai/react-icons/IconClose";
 
-//#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",
@@ -98,7 +79,7 @@ const SearchInput = React.forwardRef(({ searchInputVariant = "standard", value,
 				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 })
+				children: /* @__PURE__ */ jsx(IconClose, { className: closeButtonIconClassName })
 			})
 		]
 	});

package/dist/SearchInputForm/index.cjs

@@ -1,39 +1,58 @@
 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_SearchAutocomplete = require('../SearchAutocomplete-DAEDHeqr.cjs');
+require('../TextInput-BTTG_drp.cjs');
+require('../colorsConfig-BjmNL7s7.cjs');
+const require_SearchInput = require('../SearchInput-Bn6wD39s.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_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime11 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_runtime0.JSX.Element;
+  onSearchInputFocus,
+  onSearchInputBlur
+}: SearchInputFormProps) => react_jsx_runtime11.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_runtime7 from "react/jsx-runtime";
+import { SearchInputVariant } from "../types-DlqhqT_S.js";
+import * as react_jsx_runtime6 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_runtime7.JSX.Element;
+  onSearchInputFocus,
+  onSearchInputBlur
+}: SearchInputFormProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { SearchInputForm };

package/dist/SearchInputForm/index.js

@@ -1,37 +1,54 @@
 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 { SearchAutocomplete } from "../SearchAutocomplete-B690CIZB.js";
+import "../TextInput-BfUhaQUc.js";
+import "../colorsConfig-E7w6Ol6W.js";
+import { SearchInput, searchInputVariantClasses } from "../SearchInput-DFoKyqJV.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

@@ -4,11 +4,11 @@ require('../DynamicFiltersScrollbar-50i_InZz.cjs');
 require('../ImageWithFallback-1LqhQK1q.cjs');
 require('../ProductCard-CByKIsUN.cjs');
 require('../Spinner-DjK8ts9E.cjs');
-require('../ProductGrid-BeFeluHo.cjs');
-require('../colorsConfig-D-MZuBvt.cjs');
-const require_SearchResultsStates = require('../SearchResultsStates-Bv5NyxPn.cjs');
-require('../searchFilterSidebarVariants-DXabOauB.cjs');
-require('../SparkleAnimation-Bm3fk2FJ.cjs');
+require('../ProductGrid-BfgnDGUq.cjs');
+require('../colorsConfig-BjmNL7s7.cjs');
+const require_SearchResultsStates = require('../SearchResultsStates-BJPkHdXG.cjs');
+require('../searchFilterSidebarVariants-B1P8YS86.cjs');
+require('../SparkleAnimation-CvGlWUqv.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let __envive_ai_react_hooks_hooks_utils = require("@envive-ai/react-hooks/hooks/utils");

package/dist/SearchResultsContent/index.d.cts

@@ -1,6 +1,6 @@
-import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-DDp-fLgm.cjs";
+import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-4oRWfY5a.cjs";
 import { SearchFilterSidebarVariant } from "../index-Dfe_lkL2.cjs";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime13 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_runtime7.JSX.Element;
+}: SearchResultsContentProps) => react_jsx_runtime13.JSX.Element;
 //#endregion
 export { SearchResultsContent };

package/dist/SearchResultsContent/index.d.ts

@@ -1,6 +1,6 @@
-import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-B5p2z61Y.js";
-import { SearchFilterSidebarVariant } from "../index-BcvJf9Sr.js";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-DGfkVcQx.js";
+import { SearchFilterSidebarVariant } from "../index--SpI4Sdw.js";
+import * as react_jsx_runtime2 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_runtime16.JSX.Element;
+}: SearchResultsContentProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { SearchResultsContent };

package/dist/SearchResultsContent/index.js

@@ -3,11 +3,11 @@ import "../DynamicFiltersScrollbar-AhyHehrB.js";
 import "../ImageWithFallback-Ckwsmd8P.js";
 import "../ProductCard-BIlnM2nV.js";
 import "../Spinner-BqTt55uu.js";
-import "../ProductGrid-Cgkb4vNf.js";
-import "../colorsConfig-DEfiLHH0.js";
-import { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid } from "../SearchResultsStates-DUG-117h.js";
-import "../searchFilterSidebarVariants-BD4SYugF.js";
-import "../SparkleAnimation-D1QjYho_.js";
+import "../ProductGrid-BFFojT9P.js";
+import "../colorsConfig-E7w6Ol6W.js";
+import { NoSearchResultsFound, SearchResultsGrid, SearchResultsLoadingGrid } from "../SearchResultsStates-BiVIsfIe.js";
+import "../searchFilterSidebarVariants-CN9_kzJ8.js";
+import "../SparkleAnimation-paLhSu5E.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SearchResultsState } from "@envive-ai/react-hooks/hooks/utils";