@envive-ai/react-toolkit 0.2.13-arthur-1 → 0.2.14

package/dist/components/SearchFilter/index.cjs

@@ -1,18 +1,12 @@
-require('../../Typography-Ds4gfOJz.cjs');
-require('../../jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
-require('../../Accordion-DPUaEXiE.cjs');
-require('../../AnimatedChevron-CPW5KPLr.cjs');
-require('../../ButtonBase-C44g6llb.cjs');
-require('../../ButtonBase-Cb6Iec6f.cjs');
-require('../../ModalSheet-JZerJZ1T.cjs');
-require('../../RadioButton-DpF1wymL.cjs');
-require('../../RadioButtonGroup-ByzTXNAb.cjs');
-const require_SearchFilter = require('../../SearchFilter-BRtCSuAn.cjs');
-require('../../ToggleButton-Dxk3U1hR.cjs');
+const require_SearchFilterHeader = require('./SearchFilterHeader.cjs');
+const require_utils = require('./utils.cjs');
+const require_SearchFilterFooter = require('./SearchFilterFooter.cjs');
+const require_SearchFilter = require('./SearchFilter.cjs');
+const require_SearchFilterItem = require('./SearchFilterItem.cjs');
 
 exports.SearchFilter = require_SearchFilter.SearchFilter;
-exports.SearchFilterFooter = require_SearchFilter.SearchFilterFooter;
-exports.SearchFilterHeader = require_SearchFilter.SearchFilterHeader;
-exports.SearchFilterItem = require_SearchFilter.SearchFilterItem;
-exports.getSelectedFilterItemsCount = require_SearchFilter.getSelectedFilterItemsCount;
-exports.getTotalSelectedFilterItemsCount = require_SearchFilter.getTotalSelectedFilterItemsCount;
+exports.SearchFilterFooter = require_SearchFilterFooter.SearchFilterFooter;
+exports.SearchFilterHeader = require_SearchFilterHeader.SearchFilterHeader;
+exports.SearchFilterItem = require_SearchFilterItem.SearchFilterItem;
+exports.getSelectedFilterItemsCount = require_utils.getSelectedFilterItemsCount;
+exports.getTotalSelectedFilterItemsCount = require_utils.getTotalSelectedFilterItemsCount;

package/dist/components/SearchFilter/index.d.cts

@@ -0,0 +1,6 @@
+import { SearchFilter } from "./SearchFilter.cjs";
+import { SearchFilterHeader } from "./SearchFilterHeader.cjs";
+import { SearchFilterFooter } from "./SearchFilterFooter.cjs";
+import { SearchFilterItem } from "./SearchFilterItem.cjs";
+import { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from "./utils.cjs";
+export { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };

package/dist/components/SearchFilter/index.d.ts

@@ -0,0 +1,6 @@
+import { SearchFilter } from "./SearchFilter.js";
+import { SearchFilterHeader } from "./SearchFilterHeader.js";
+import { SearchFilterFooter } from "./SearchFilterFooter.js";
+import { SearchFilterItem } from "./SearchFilterItem.js";
+import { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from "./utils.js";
+export { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };

package/dist/components/SearchFilter/index.js

@@ -1,13 +1,7 @@
-import "../../Typography-xehJH05l.js";
-import "../../jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
-import "../../Accordion-8zFBEEaN.js";
-import "../../AnimatedChevron-DO_jcnJg.js";
-import "../../ButtonBase-Cjo-fBg2.js";
-import "../../ButtonBase-D2eXuapk.js";
-import "../../ModalSheet-C5f5abw1.js";
-import "../../RadioButton-DOc8g47U.js";
-import "../../RadioButtonGroup-YQIxmR7j.js";
-import { a as getTotalSelectedFilterItemsCount, i as getSelectedFilterItemsCount, n as SearchFilter, o as SearchFilterHeader, r as SearchFilterFooter, t as SearchFilterItem } from "../../SearchFilter-DvJx0b0W.js";
-import "../../ToggleButton-D8--AKKK.js";
+import { SearchFilterHeader } from "./SearchFilterHeader.js";
+import { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount } from "./utils.js";
+import { SearchFilterFooter } from "./SearchFilterFooter.js";
+import { SearchFilter } from "./SearchFilter.js";
+import { SearchFilterItem } from "./SearchFilterItem.js";
 
 export { SearchFilter, SearchFilterFooter, SearchFilterHeader, SearchFilterItem, getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };

package/dist/components/SearchFilter/types.d.cts

@@ -0,0 +1,42 @@
+import { CloseIconVariant, SearchFilterDatum, SearchFilterItemDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
+
+//#region src/components/SearchFilter/types.d.ts
+interface SearchFilterItem extends SearchFilterItemDatum {
+  filterId: string;
+  filterItemId: string;
+  displayName: string;
+  isSelected: boolean;
+}
+interface SearchFilterItemProps {
+  filterItem: SearchFilterItem;
+  onSelectFilterItem: SelectFilterItem;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+}
+interface SearchFilterHeaderProps {
+  closeModal: () => void;
+  productCount: number;
+  headerClassName: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+}
+type SearchFilterProps = {
+  filters: SearchFilterDatum[];
+  selectFilterItem: SelectFilterItem;
+  clearAllFilters: () => void;
+  productCount: number;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+  headerContent?: React.ReactNode;
+  footerContent?: React.ReactNode;
+  filterButtonText?: string;
+  headerClassName?: string;
+  radioButtonFillColor: string;
+  radioButtonHoverColor?: string;
+  radioButtonUncheckedBorderColor?: string;
+  filterCloseIconVariant: CloseIconVariant;
+};
+//#endregion
+export { SearchFilterHeaderProps, SearchFilterItemProps, SearchFilterProps };

package/dist/components/SearchFilter/types.d.ts

@@ -0,0 +1,42 @@
+import { CloseIconVariant, SearchFilterDatum, SearchFilterItemDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
+
+//#region src/components/SearchFilter/types.d.ts
+interface SearchFilterItem extends SearchFilterItemDatum {
+  filterId: string;
+  filterItemId: string;
+  displayName: string;
+  isSelected: boolean;
+}
+interface SearchFilterItemProps {
+  filterItem: SearchFilterItem;
+  onSelectFilterItem: SelectFilterItem;
+  radioButtonFillColor: string;
+  radioButtonHoverColor: string;
+  radioButtonUncheckedBorderColor: string;
+}
+interface SearchFilterHeaderProps {
+  closeModal: () => void;
+  productCount: number;
+  headerClassName: string;
+  filterCloseIconVariant: 'dark' | 'light' | 'tertiary';
+}
+type SearchFilterProps = {
+  filters: SearchFilterDatum[];
+  selectFilterItem: SelectFilterItem;
+  clearAllFilters: () => void;
+  productCount: number;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  applyFiltersUnchangedClasses: string;
+  applyFiltersChangedClasses: string;
+  headerContent?: React.ReactNode;
+  footerContent?: React.ReactNode;
+  filterButtonText?: string;
+  headerClassName?: string;
+  radioButtonFillColor: string;
+  radioButtonHoverColor?: string;
+  radioButtonUncheckedBorderColor?: string;
+  filterCloseIconVariant: CloseIconVariant;
+};
+//#endregion
+export { SearchFilterHeaderProps, SearchFilterItemProps, SearchFilterProps };

package/dist/components/SearchFilter/useHasFilterStateChanged.cjs

@@ -0,0 +1,27 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#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
+exports.useHasFilterStateChanged = useHasFilterStateChanged;

package/dist/components/SearchFilter/useHasFilterStateChanged.js

@@ -0,0 +1,26 @@
+import { useEffect, useMemo, useState } from "react";
+
+//#region src/components/SearchFilter/useHasFilterStateChanged.tsx
+const useHasFilterStateChanged = (filters, isOpen) => {
+	const [initialFilterStates, setInitialFilterStates] = useState({});
+	const currentFilterStates = useMemo(() => {
+		const states = {};
+		filters.forEach((filter) => {
+			filter.items.forEach((item) => {
+				states[`${filter.filterId}-${item.filterItemId}`] = item.isSelected;
+			});
+		});
+		return states;
+	}, [filters]);
+	const hasFiltersChanged = useMemo(() => {
+		if (Object.keys(initialFilterStates).length === 0) return false;
+		return Object.keys(currentFilterStates).some((key) => currentFilterStates[key] !== initialFilterStates[key]);
+	}, [currentFilterStates, initialFilterStates]);
+	useEffect(() => {
+		if (isOpen) setInitialFilterStates(currentFilterStates);
+	}, [isOpen]);
+	return hasFiltersChanged;
+};
+
+//#endregion
+export { useHasFilterStateChanged };

package/dist/components/SearchFilter/utils.cjs

@@ -0,0 +1,11 @@
+
+//#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
+exports.getSelectedFilterItemsCount = getSelectedFilterItemsCount;
+exports.getTotalSelectedFilterItemsCount = getTotalSelectedFilterItemsCount;

package/dist/components/SearchFilter/utils.d.cts

@@ -0,0 +1,7 @@
+import { SearchFilterDatum } from "@envive-ai/react-hooks/types";
+
+//#region src/components/SearchFilter/utils.d.ts
+declare const getSelectedFilterItemsCount: (filter: SearchFilterDatum) => any;
+declare const getTotalSelectedFilterItemsCount: (filters: SearchFilterDatum[]) => SearchFilterDatum;
+//#endregion
+export { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };

package/dist/components/SearchFilter/utils.d.ts

@@ -0,0 +1,7 @@
+import { SearchFilterDatum } from "@envive-ai/react-hooks/types";
+
+//#region src/components/SearchFilter/utils.d.ts
+declare const getSelectedFilterItemsCount: (filter: SearchFilterDatum) => any;
+declare const getTotalSelectedFilterItemsCount: (filters: SearchFilterDatum[]) => SearchFilterDatum;
+//#endregion
+export { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };

package/dist/components/SearchFilter/utils.js

@@ -0,0 +1,9 @@
+//#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
+export { getSelectedFilterItemsCount, getTotalSelectedFilterItemsCount };

package/dist/components/SearchInput/SearchInput.cjs

@@ -0,0 +1,83 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_TextInput = require('../TextInput/TextInput.cjs');
+require('../TextInput/index.cjs');
+const require_searchInputVariants = require('./searchInputVariants.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __envive_ai_react_icons_MagnifyingGlassStarVariant = require("@envive-ai/react-icons/MagnifyingGlassStarVariant");
+__envive_ai_react_icons_MagnifyingGlassStarVariant = require_rolldown_runtime.__toESM(__envive_ai_react_icons_MagnifyingGlassStarVariant);
+let __envive_ai_react_icons_IconClose = require("@envive-ai/react-icons/IconClose");
+__envive_ai_react_icons_IconClose = require_rolldown_runtime.__toESM(__envive_ai_react_icons_IconClose);
+
+//#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 } = require_searchInputVariants.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_IconClose.default, { className: closeButtonIconClassName })
+			})
+		]
+	});
+});
+
+//#endregion
+exports.SearchInput = SearchInput;

package/dist/components/SearchInput/{index-C0H51Flv.d.ts → SearchInput.d.cts}

@@ -1,5 +1,3 @@
-import { t as SearchInputVariant$1 } from "../../types-D6fl4HOx.js";
-import { r as TypographyVariantMap } from "../../typographyVariantClasses-_oNpv-aN.js";
 import React from "react";
 import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
 
@@ -19,16 +17,4 @@ interface SearchInputProps {
 }
 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 };
+export { SearchInput };

package/dist/components/SearchInput/{index-rFDdhvqg.d.cts → SearchInput.d.ts}

@@ -1,5 +1,3 @@
-import { t as SearchInputVariant$1 } from "../../types--eyQnaEA.cjs";
-import { r as TypographyVariantMap } from "../../typographyVariantClasses-CoRhazCU.cjs";
 import React from "react";
 import { SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
 
@@ -19,16 +17,4 @@ interface SearchInputProps {
 }
 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 };
+export { SearchInput };

package/dist/components/SearchInput/SearchInput.js

@@ -0,0 +1,78 @@
+import { TextInput } from "../TextInput/TextInput.js";
+import "../TextInput/index.js";
+import { searchInputVariantClasses } from "./searchInputVariants.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 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 };

package/dist/components/SearchInput/index.cjs

@@ -1,8 +1,5 @@
-require('../../Typography-Ds4gfOJz.cjs');
-require('../../jsx-runtime-Dg2m6dxZ-B-pkyyHT.cjs');
-const require_SearchInput = require('../../SearchInput-CImlqrau.cjs');
-require('../../TextInput-CaynCoDf.cjs');
-require('../../colorsConfig-Dp7w5LPb.cjs');
+const require_searchInputVariants = require('./searchInputVariants.cjs');
+const require_SearchInput = require('./SearchInput.cjs');
 
 exports.SearchInput = require_SearchInput.SearchInput;
-exports.searchInputVariantClasses = require_SearchInput.searchInputVariantClasses;
+exports.searchInputVariantClasses = require_searchInputVariants.searchInputVariantClasses;

package/dist/components/SearchInput/index.d.cts

@@ -0,0 +1,3 @@
+import { SearchInput } from "./SearchInput.cjs";
+import { searchInputVariantClasses } from "./searchInputVariants.cjs";
+export { SearchInput, searchInputVariantClasses };

package/dist/components/SearchInput/index.d.ts

@@ -0,0 +1,3 @@
+import { SearchInput } from "./SearchInput.js";
+import { searchInputVariantClasses } from "./searchInputVariants.js";
+export { SearchInput, searchInputVariantClasses };

package/dist/components/SearchInput/index.js

@@ -1,7 +1,4 @@
-import "../../Typography-xehJH05l.js";
-import "../../jsx-runtime-Dg2m6dxZ-CU_SzTu4.js";
-import { n as searchInputVariantClasses, t as SearchInput } from "../../SearchInput-kLhxkpgq.js";
-import "../../TextInput-CsdOvLBQ.js";
-import "../../colorsConfig-CFI1KN8R.js";
+import { searchInputVariantClasses } from "./searchInputVariants.js";
+import { SearchInput } from "./SearchInput.js";
 
 export { SearchInput, searchInputVariantClasses };

package/dist/components/SearchInput/searchInputVariants.cjs

@@ -0,0 +1,15 @@
+const require_colorsConfig = require('../../models/colorsConfig.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
+exports.searchInputVariantClasses = searchInputVariantClasses;

package/dist/components/SearchInput/searchInputVariants.d.cts

@@ -0,0 +1,16 @@
+import { SearchInputVariant } from "../../atoms/search/types.cjs";
+import { TypographyVariantMap } from "../Typography/typographyVariantClasses.cjs";
+
+//#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, SearchInputVariantClasses>;
+//#endregion
+export { searchInputVariantClasses };

package/dist/components/SearchInput/searchInputVariants.d.ts

@@ -0,0 +1,16 @@
+import { SearchInputVariant } from "../../atoms/search/types.js";
+import { TypographyVariantMap } from "../Typography/typographyVariantClasses.js";
+
+//#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, SearchInputVariantClasses>;
+//#endregion
+export { searchInputVariantClasses };

package/dist/components/SearchInput/searchInputVariants.js

@@ -0,0 +1,15 @@
+import { ColorNames, colorVar } from "../../models/colorsConfig.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
+export { searchInputVariantClasses };

package/dist/{SearchInputForm-ZgNNEX6E.cjs → components/SearchInputForm/SearchInputForm.cjs}

@@ -1,14 +1,16 @@
-const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_SearchAutocomplete = require('./SearchAutocomplete-BdTWETDB.cjs');
-const require_SearchInput = require('./SearchInput-CImlqrau.cjs');
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_SearchAutocomplete = require('../SearchAutocomplete/SearchAutocomplete.cjs');
+require('../SearchAutocomplete/index.cjs');
+const require_searchInputVariants = require('../SearchInput/searchInputVariants.cjs');
+const require_SearchInput = require('../SearchInput/SearchInput.cjs');
 let classnames = require("classnames");
-classnames = require_chunk.__toESM(classnames);
+classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
 let __envive_ai_react_hooks_config_locators_components_search = require("@envive-ai/react-hooks/config/locators/components/search");
 
 //#region src/components/SearchInputForm/SearchInputForm.tsx
 const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, shouldShowAutocomplete, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, onSearchInputFocus, onSearchInputBlur, searchInputRef }) => {
-	const { autocompleteIconColor } = require_SearchInput.searchInputVariantClasses[searchInputVariant];
+	const { autocompleteIconColor } = require_searchInputVariants.searchInputVariantClasses[searchInputVariant];
 	const containerClasses = (0, classnames.default)("spiffy-tw-relative", "spiffy-tw-w-full");
 	const formClasses = (0, classnames.default)({
 		"spiffy-tw-grow": true,
@@ -52,9 +54,4 @@ const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults,
 };
 
 //#endregion
-Object.defineProperty(exports, 'SearchInputForm', {
-  enumerable: true,
-  get: function () {
-    return SearchInputForm;
-  }
-});
+exports.SearchInputForm = SearchInputForm;

package/dist/components/SearchInputForm/{index-DjjoY7MQ.d.ts → SearchInputForm.d.cts}

@@ -1,5 +1,5 @@
-import { t as SearchInputVariant } from "../../types-D6fl4HOx.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import { SearchInputVariant } from "../../atoms/search/types.cjs";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/SearchInputForm.d.ts
 interface SearchInputFormProps {
@@ -33,6 +33,6 @@ declare const SearchInputForm: ({
   onSearchInputFocus,
   onSearchInputBlur,
   searchInputRef
-}: SearchInputFormProps) => react_jsx_runtime12.JSX.Element;
+}: SearchInputFormProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { SearchInputForm };

package/dist/components/SearchInputForm/{index-Cleto06d.d.cts → SearchInputForm.d.ts}

@@ -1,4 +1,4 @@
-import { t as SearchInputVariant } from "../../types--eyQnaEA.cjs";
+import { SearchInputVariant } from "../../atoms/search/types.js";
 import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/SearchInputForm.d.ts

package/dist/{SearchInputForm-CFm_hUvX.js → components/SearchInputForm/SearchInputForm.js}

@@ -1,5 +1,7 @@
-import { t as SearchAutocomplete } from "./SearchAutocomplete-DNe193EV.js";
-import { n as searchInputVariantClasses, t as SearchInput } from "./SearchInput-kLhxkpgq.js";
+import { SearchAutocomplete } from "../SearchAutocomplete/SearchAutocomplete.js";
+import "../SearchAutocomplete/index.js";
+import { searchInputVariantClasses } from "../SearchInput/searchInputVariants.js";
+import { SearchInput } from "../SearchInput/SearchInput.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";
@@ -50,4 +52,4 @@ const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults,
 };
 
 //#endregion
-export { SearchInputForm as t };
+export { SearchInputForm };