@envive-ai/react-toolkit 0.1.13 → 0.2.0

package/dist/SearchInput/index.cjs

@@ -1,97 +1,7 @@
-const require_chunk = require('../chunk-CUT6urMc.cjs');
 require('../textVariantClasses-CBre7vXv.cjs');
-const require_TextInput = require('../TextInput-HMW0hxLI.cjs');
-const require_colorsConfig = require('../colorsConfig-B3-SMUSx.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);
-let __envive_ai_react_icons_src_index_js = require("@envive-ai/react-icons/src/index.js");
-__envive_ai_react_icons_src_index_js = require_chunk.__toESM(__envive_ai_react_icons_src_index_js);
+require('../TextInput-CGs4BY1q.cjs');
+require('../colorsConfig-CqCKftuM.cjs');
+const require_SearchInput = require('../SearchInput--x9NTMTb.cjs');
 
-//#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)(__envive_ai_react_icons_src_index_js.IconClose, { className: closeButtonIconClassName })
-			})
-		]
-	});
-});
-
-//#endregion
-exports.SearchInput = SearchInput;
-exports.searchInputVariantClasses = searchInputVariantClasses;
+exports.SearchInput = require_SearchInput.SearchInput;
+exports.searchInputVariantClasses = require_SearchInput.searchInputVariantClasses;

package/dist/SearchInput/index.d.cts

@@ -1,6 +1,7 @@
-import { SearchInputVariant } from "../index-W1wCDiw_.cjs";
+import { SearchInputVariant as SearchInputVariant$1 } from "../types-BhGjnuWx.cjs";
 import { TextStyleVariantMap } from "../textVariantClasses-B0gNjzl4.cjs";
 import React from "react";
+import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
 
 //#region src/components/SearchInput/SearchInput.d.ts
 interface SearchInputProps {
@@ -28,6 +29,6 @@ type SearchInputVariantClasses = {
   searchInputClasses: string;
   placeholderVariant: keyof typeof TextStyleVariantMap;
 };
-declare const searchInputVariantClasses: Record<SearchInputVariant, SearchInputVariantClasses>;
+declare const searchInputVariantClasses: Record<SearchInputVariant$1, SearchInputVariantClasses>;
 //#endregion
 export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput/index.d.ts

@@ -1,6 +1,7 @@
-import { SearchInputVariant } from "../index-BKvXn5sj.js";
-import { TextStyleVariantMap } from "../textVariantClasses-C8OCWZAw.js";
+import { SearchInputVariant as SearchInputVariant$1 } from "../types-CTOdb0G0.js";
+import { TextStyleVariantMap } from "../textVariantClasses-Bl8SAGwZ.js";
 import React from "react";
+import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
 
 //#region src/components/SearchInput/SearchInput.d.ts
 interface SearchInputProps {
@@ -28,6 +29,6 @@ type SearchInputVariantClasses = {
   searchInputClasses: string;
   placeholderVariant: keyof typeof TextStyleVariantMap;
 };
-declare const searchInputVariantClasses: Record<SearchInputVariant, SearchInputVariantClasses>;
+declare const searchInputVariantClasses: Record<SearchInputVariant$1, SearchInputVariantClasses>;
 //#endregion
 export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput/index.js

@@ -1,90 +1,6 @@
 import "../textVariantClasses-CRrTb43V.js";
-import { TextInput } from "../TextInput-DmsOxxPN.js";
-import { ColorNames, colorVar } from "../colorsConfig-DZ-GSPWy.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/src/index.js";
+import "../TextInput-BeHPlVHT.js";
+import "../colorsConfig-Ck2jeqWe.js";
+import { SearchInput, searchInputVariantClasses } from "../SearchInput-IBq83nqF.js";
 
-//#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, { className: closeButtonIconClassName })
-			})
-		]
-	});
-});
-
-//#endregion
 export { SearchInput, searchInputVariantClasses };

package/dist/SearchInput--x9NTMTb.cjs

@@ -0,0 +1,106 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_TextInput = require('./TextInput-CGs4BY1q.cjs');
+const require_colorsConfig = require('./colorsConfig-CqCKftuM.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);
+let __envive_ai_react_icons_src_index_js = require("@envive-ai/react-icons/src/index.js");
+__envive_ai_react_icons_src_index_js = require_chunk.__toESM(__envive_ai_react_icons_src_index_js);
+
+//#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)(__envive_ai_react_icons_src_index_js.IconClose, { 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/SearchInput-IBq83nqF.js

@@ -0,0 +1,89 @@
+import { TextInput } from "./TextInput-BeHPlVHT.js";
+import { ColorNames, colorVar } from "./colorsConfig-Ck2jeqWe.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/src/index.js";
+
+//#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, { className: closeButtonIconClassName })
+			})
+		]
+	});
+});
+
+//#endregion
+export { SearchInput, searchInputVariantClasses };

package/dist/SearchInputForm/index.cjs

@@ -0,0 +1,39 @@
+const require_chunk = require('../chunk-CUT6urMc.cjs');
+require('../textVariantClasses-CBre7vXv.cjs');
+const require_SearchAutocomplete = require('../SearchAutocomplete-BmHdijOv.cjs');
+require('../TextInput-CGs4BY1q.cjs');
+require('../colorsConfig-CqCKftuM.cjs');
+const require_SearchInput = require('../SearchInput--x9NTMTb.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;

package/dist/SearchInputForm/index.d.cts

@@ -1,2 +1,34 @@
-import { SearchInputVariant } from "../index-W1wCDiw_.cjs";
-export { SearchInputVariant };
+import { SearchInputVariant } from "../types-BhGjnuWx.cjs";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/components/SearchInputForm/SearchInputForm.d.ts
+interface SearchInputFormProps {
+  searchInputVariant: SearchInputVariant;
+  searchText: string;
+  autocompleteResults: string[];
+  searchBoxPlaceholder: string;
+  focusedOptionId: string | undefined;
+  isDirty: boolean;
+  focusedIndex: number;
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onAutocompleteSelect: (suggestion: string) => void;
+  onSearchInputChange: (value: string) => void;
+  onSearchSubmit: () => void;
+  searchInputDataTestId?: string;
+}
+declare const SearchInputForm: ({
+  searchInputVariant,
+  searchText,
+  autocompleteResults,
+  searchBoxPlaceholder,
+  focusedOptionId,
+  isDirty,
+  focusedIndex,
+  onKeyDown,
+  onAutocompleteSelect,
+  onSearchInputChange,
+  onSearchSubmit,
+  searchInputDataTestId
+}: SearchInputFormProps) => react_jsx_runtime1.JSX.Element;
+//#endregion
+export { SearchInputForm };

package/dist/SearchInputForm/index.d.ts

@@ -1,2 +1,34 @@
-import { SearchInputVariant } from "../index-BKvXn5sj.js";
-export { SearchInputVariant };
+import { SearchInputVariant } from "../types-CTOdb0G0.js";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+
+//#region src/components/SearchInputForm/SearchInputForm.d.ts
+interface SearchInputFormProps {
+  searchInputVariant: SearchInputVariant;
+  searchText: string;
+  autocompleteResults: string[];
+  searchBoxPlaceholder: string;
+  focusedOptionId: string | undefined;
+  isDirty: boolean;
+  focusedIndex: number;
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onAutocompleteSelect: (suggestion: string) => void;
+  onSearchInputChange: (value: string) => void;
+  onSearchSubmit: () => void;
+  searchInputDataTestId?: string;
+}
+declare const SearchInputForm: ({
+  searchInputVariant,
+  searchText,
+  autocompleteResults,
+  searchBoxPlaceholder,
+  focusedOptionId,
+  isDirty,
+  focusedIndex,
+  onKeyDown,
+  onAutocompleteSelect,
+  onSearchInputChange,
+  onSearchSubmit,
+  searchInputDataTestId
+}: SearchInputFormProps) => react_jsx_runtime1.JSX.Element;
+//#endregion
+export { SearchInputForm };

package/dist/SearchInputForm/index.js

@@ -1 +1,37 @@
-export {  };
+import "../textVariantClasses-CRrTb43V.js";
+import { SearchAutocomplete } from "../SearchAutocomplete-BMNYZiJL.js";
+import "../TextInput-BeHPlVHT.js";
+import "../colorsConfig-Ck2jeqWe.js";
+import { SearchInput, searchInputVariantClasses } from "../SearchInput-IBq83nqF.js";
+import { Fragment, jsx, jsxs } from "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 } = 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
+	})] });
+};
+
+//#endregion
+export { SearchInputForm };

package/dist/SearchResultsContent/index.cjs

@@ -2,16 +2,16 @@ const require_chunk = require('../chunk-CUT6urMc.cjs');
 require('../textVariantClasses-CBre7vXv.cjs');
 require('../Text-DllCE9_D.cjs');
 require('../Text-C8t_iEj6.cjs');
-require('../DynamicFiltersScrollbar-B1j53y2q.cjs');
-require('../Headline-Cp79THVF.cjs');
-require('../ImageWithFallback-Cx-KNi-D.cjs');
-require('../ProductCard-EmdDy2af.cjs');
-require('../Spinner-DFor2Szi.cjs');
-require('../colorsConfig-B3-SMUSx.cjs');
-const require_SearchResultsStates = require('../SearchResultsStates-DwcPrsdd.cjs');
-require('../searchFilterSidebarVariants-kkTjYEIF.cjs');
-require('../ProductGrid-CMoomZLc.cjs');
-require('../SparkleAnimation-CvGlWUqv.cjs');
+require('../DynamicFiltersScrollbar-HCYZjI14.cjs');
+require('../Headline-CKJmd2w4.cjs');
+require('../ImageWithFallback-Km9h16Vz.cjs');
+require('../ProductCard-BDz80MCQ.cjs');
+require('../Spinner-rcWX566W.cjs');
+require('../ProductGrid-RRcdkY5J.cjs');
+require('../colorsConfig-CqCKftuM.cjs');
+const require_SearchResultsStates = require('../SearchResultsStates-nlaPbkj3.cjs');
+require('../searchFilterSidebarVariants-NQhqq-NT.cjs');
+require('../SparkleAnimation-D1aZE-7A.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 { SearchFilterSidebarVariant } from "../index-Br1B7Jta.cjs";
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-B9WeFNlO.cjs";
+import { SearchFilterSidebarVariant } from "../index-CLGe_Pam.cjs";
+import * as react_jsx_runtime12 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_runtime17.JSX.Element;
+}: SearchResultsContentProps) => react_jsx_runtime12.JSX.Element;
 //#endregion
 export { SearchResultsContent };

package/dist/SearchResultsContent/index.d.ts

@@ -1,6 +1,6 @@
-import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-DADHwW6M.js";
-import { SearchFilterSidebarVariant } from "../index-Dh8rcWev.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import { ProductCardConfig, ProductGridVariant, SearchResponseProductAttributes } from "../index-CeECGrFM.js";
+import { SearchFilterSidebarVariant } from "../index-PSzeHU2s.js";
+import * as react_jsx_runtime13 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_runtime2.JSX.Element;
+}: SearchResultsContentProps) => react_jsx_runtime13.JSX.Element;
 //#endregion
 export { SearchResultsContent };