@envive-ai/react-widgets 0.1.2-arthur-3 → 0.1.3

package/dist/packages/components/dist/components/SearchInputForm/SearchInputForm.cjs

@@ -0,0 +1,57 @@
+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_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 ../components/dist/components/SearchInputForm/SearchInputForm.js
+const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, shouldShowAutocomplete, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, onSearchInputFocus, onSearchInputBlur, searchInputRef }) => {
+	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,
+		"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,
+				ref: searchInputRef
+			})
+		}), 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
+exports.SearchInputForm = SearchInputForm;

package/dist/packages/components/dist/components/SearchInputForm/SearchInputForm.js

@@ -0,0 +1,55 @@
+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";
+
+//#region ../components/dist/components/SearchInputForm/SearchInputForm.js
+const SearchInputForm = ({ searchInputVariant, searchText, autocompleteResults, searchBoxPlaceholder, focusedOptionId, shouldShowAutocomplete, focusedIndex, onKeyDown, onAutocompleteSelect, onSearchInputChange, onSearchSubmit, onSearchInputFocus, onSearchInputBlur, searchInputRef }) => {
+	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,
+				ref: searchInputRef
+			})
+		}), shouldShowAutocomplete && /* @__PURE__ */ jsx("div", {
+			className: autocompleteContainerClasses,
+			children: /* @__PURE__ */ jsx(SearchAutocomplete, {
+				id: "autocomplete-results",
+				results: autocompleteResults,
+				focusedIndex,
+				searchText,
+				iconColor: autocompleteIconColor,
+				onSuggestionSelect: onAutocompleteSelect
+			})
+		})]
+	});
+};
+
+//#endregion
+export { SearchInputForm };

package/dist/packages/components/dist/components/SearchInputForm/index.cjs

@@ -0,0 +1 @@
+const require_SearchInputForm = require('./SearchInputForm.cjs');

package/dist/packages/components/dist/components/SearchInputForm/index.js

@@ -0,0 +1 @@
+import { SearchInputForm } from "./SearchInputForm.js";

package/dist/packages/components/dist/components/SearchResultsContent/SearchResultsContent.cjs

@@ -0,0 +1,52 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_NoSearchResultsFound = require('../SearchResultsStates/NoSearchResultsFound.cjs');
+const require_SearchResultsGrid = require('../SearchResultsStates/SearchResultsGrid.cjs');
+const require_SearchResultsLoadingGrid = require('../SearchResultsStates/SearchResultsLoadingGrid.cjs');
+require('../SearchResultsStates/index.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let __envive_ai_react_hooks_hooks_utils = require("@envive-ai/react-hooks/hooks/utils");
+
+//#region ../components/dist/components/SearchResultsContent/SearchResultsContent.js
+const SearchResultsContent = ({ searchResultsState, productList, recommendedProducts, productCardConfig, merchantShortName, searchFilterSidebarVariant, productGridVariant, containerXPaddingClasses, selectedFilterOptions, availableDynamicFilters, onProductClick, onRemoveFilter, onToggleDynamicFilter, noResultsFoundText, searchResultsRef, toolbarHeight, query }) => {
+	const productGridClasses = (0, classnames.default)("spiffy-tw-grid", "spiffy-tw-justify-items-stretch", "spiffy-tw-grid-cols-2", "md:spiffy-tw-grid-cols-3", "lg:spiffy-tw-grid-cols-4", "spiffy-tw-gap-x-[4px]", "spiffy-tw-gap-y-[24px]", "spiffy-tw-h-full", "spiffy-tw-w-full", "spiffy-tw-items-stretch", containerXPaddingClasses);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: searchResultsRef,
+		style: {
+			paddingTop: `${toolbarHeight}px`,
+			backgroundColor: "white"
+		},
+		children: [
+			searchResultsState === __envive_ai_react_hooks_hooks_utils.SearchResultsState.NoResults && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NoSearchResultsFound.NoSearchResultsFound, {
+				containerPaddingClasses: containerXPaddingClasses,
+				noResultsFoundText,
+				recommendedProducts,
+				searchText: query,
+				merchantShortName,
+				productGridVariant
+			}),
+			searchResultsState === __envive_ai_react_hooks_hooks_utils.SearchResultsState.Results && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchResultsGrid.SearchResultsGrid, {
+				searchFilterSidebarVariant,
+				productCardConfig,
+				merchantShortName,
+				productList,
+				productGridVariant,
+				productGridClasses,
+				containerXPaddingClasses,
+				selectedFilterOptions,
+				availableDynamicFilters,
+				onRemoveFilter,
+				onProductClick,
+				onToggleDynamicFilter
+			}),
+			searchResultsState === __envive_ai_react_hooks_hooks_utils.SearchResultsState.Loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchResultsLoadingGrid.SearchResultsLoadingGrid, {
+				productGridVariant,
+				productGridClasses
+			})
+		]
+	});
+};
+
+//#endregion
+exports.SearchResultsContent = SearchResultsContent;

package/dist/packages/components/dist/components/SearchResultsContent/SearchResultsContent.js

@@ -0,0 +1,50 @@
+import { NoSearchResultsFound } from "../SearchResultsStates/NoSearchResultsFound.js";
+import { SearchResultsGrid } from "../SearchResultsStates/SearchResultsGrid.js";
+import { SearchResultsLoadingGrid } from "../SearchResultsStates/SearchResultsLoadingGrid.js";
+import "../SearchResultsStates/index.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SearchResultsState } from "@envive-ai/react-hooks/hooks/utils";
+
+//#region ../components/dist/components/SearchResultsContent/SearchResultsContent.js
+const SearchResultsContent = ({ searchResultsState, productList, recommendedProducts, productCardConfig, merchantShortName, searchFilterSidebarVariant, productGridVariant, containerXPaddingClasses, selectedFilterOptions, availableDynamicFilters, onProductClick, onRemoveFilter, onToggleDynamicFilter, noResultsFoundText, searchResultsRef, toolbarHeight, query }) => {
+	const productGridClasses = classNames("spiffy-tw-grid", "spiffy-tw-justify-items-stretch", "spiffy-tw-grid-cols-2", "md:spiffy-tw-grid-cols-3", "lg:spiffy-tw-grid-cols-4", "spiffy-tw-gap-x-[4px]", "spiffy-tw-gap-y-[24px]", "spiffy-tw-h-full", "spiffy-tw-w-full", "spiffy-tw-items-stretch", containerXPaddingClasses);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: searchResultsRef,
+		style: {
+			paddingTop: `${toolbarHeight}px`,
+			backgroundColor: "white"
+		},
+		children: [
+			searchResultsState === SearchResultsState.NoResults && /* @__PURE__ */ jsx(NoSearchResultsFound, {
+				containerPaddingClasses: containerXPaddingClasses,
+				noResultsFoundText,
+				recommendedProducts,
+				searchText: query,
+				merchantShortName,
+				productGridVariant
+			}),
+			searchResultsState === SearchResultsState.Results && /* @__PURE__ */ jsx(SearchResultsGrid, {
+				searchFilterSidebarVariant,
+				productCardConfig,
+				merchantShortName,
+				productList,
+				productGridVariant,
+				productGridClasses,
+				containerXPaddingClasses,
+				selectedFilterOptions,
+				availableDynamicFilters,
+				onRemoveFilter,
+				onProductClick,
+				onToggleDynamicFilter
+			}),
+			searchResultsState === SearchResultsState.Loading && /* @__PURE__ */ jsx(SearchResultsLoadingGrid, {
+				productGridVariant,
+				productGridClasses
+			})
+		]
+	});
+};
+
+//#endregion
+export { SearchResultsContent };

package/dist/packages/components/dist/components/SearchResultsContent/index.cjs

@@ -0,0 +1 @@
+const require_SearchResultsContent = require('./SearchResultsContent.cjs');

package/dist/packages/components/dist/components/SearchResultsContent/index.js

@@ -0,0 +1 @@
+import { SearchResultsContent } from "./SearchResultsContent.js";

package/dist/packages/components/dist/components/SearchResultsFilterButton/SearchResultsFilterButton.cjs

@@ -0,0 +1,24 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_ButtonBase = require('../ButtonBase/ButtonBase.cjs');
+require('../ButtonBase/index.cjs');
+const require_SettingsVariant = require('../../../../icons/dist/SettingsVariant.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/SearchResultsFilterButton/SearchResultsFilterButton.js
+const SearchResultsFilterButton = ({ setIsOpen, filterButtonText }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonBase.ButtonBase, {
+		onClick: (0, react.useCallback)(() => {
+			setIsOpen(true);
+		}, [setIsOpen]),
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SettingsVariant.SettingsVariant_default, {}),
+		iconClass: "spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center",
+		text: filterButtonText,
+		textClass: "spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block",
+		buttonClass: "spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]",
+		disablePadding: true
+	});
+};
+
+//#endregion
+exports.SearchResultsFilterButton = SearchResultsFilterButton;

package/dist/packages/components/dist/components/SearchResultsFilterButton/SearchResultsFilterButton.js

@@ -0,0 +1,23 @@
+import { ButtonBase } from "../ButtonBase/ButtonBase.js";
+import "../ButtonBase/index.js";
+import { SettingsVariant_default } from "../../../../icons/dist/SettingsVariant.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../components/dist/components/SearchResultsFilterButton/SearchResultsFilterButton.js
+const SearchResultsFilterButton = ({ setIsOpen, filterButtonText }) => {
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		onClick: useCallback(() => {
+			setIsOpen(true);
+		}, [setIsOpen]),
+		icon: /* @__PURE__ */ jsx(SettingsVariant_default, {}),
+		iconClass: "spiffy-tw-w-[28px] spiffy-tw-h-[28px] spiffy-tw-object-center",
+		text: filterButtonText,
+		textClass: "spiffy-tw-uppercase spiffy-tw-text-[--spiffy-colors-text-primary] spiffy-tw-hidden md:spiffy-tw-block",
+		buttonClass: "spiffy-tw-flex-row spiffy-tw-pl-[16px] sm:spiffy-tw-pl-0 sm:spiffy-tw-px-4 sm:spiffy-tw-gap-[8px]",
+		disablePadding: true
+	});
+};
+
+//#endregion
+export { SearchResultsFilterButton };

package/dist/packages/components/dist/components/SearchResultsFilterButton/index.cjs

@@ -0,0 +1,3 @@
+'use client';
+
+const require_SearchResultsFilterButton = require('./SearchResultsFilterButton.cjs');

package/dist/packages/components/dist/components/SearchResultsFilterButton/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+import { SearchResultsFilterButton } from "./SearchResultsFilterButton.js";

package/dist/packages/components/dist/components/SearchResultsFilterModal/SearchResultsFilterModal.cjs

@@ -0,0 +1,36 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_searchFilterSidebarVariants = require('../SearchResultsFilterSidebar/searchFilterSidebarVariants.cjs');
+const require_SearchFilterHeader = require('../SearchFilter/SearchFilterHeader.cjs');
+const require_SearchFilter = require('../SearchFilter/SearchFilter.cjs');
+require('../SearchFilter/index.cjs');
+require('../SearchResultsFilterSidebar/index.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/SearchResultsFilterModal/SearchResultsFilterModal.js
+const SearchResultsFilterModal = ({ productCount, isOpen, setIsOpen, searchFilters, searchFilterSidebarVariant, onSelectFilterItem, onClearAllFilters, filterButtonText }) => {
+	const { applyFiltersUnchangedClasses, applyFiltersChangedClasses, searchFilterHeaderClasses, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant } = require_searchFilterSidebarVariants.searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchFilter.SearchFilter, {
+		isOpen,
+		setIsOpen,
+		filters: searchFilters,
+		productCount,
+		selectFilterItem: onSelectFilterItem,
+		clearAllFilters: onClearAllFilters,
+		applyFiltersUnchangedClasses,
+		applyFiltersChangedClasses,
+		filterButtonText,
+		radioButtonFillColor,
+		radioButtonHoverColor,
+		radioButtonUncheckedBorderColor,
+		filterCloseIconVariant,
+		headerContent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SearchFilterHeader.SearchFilterHeader, {
+			closeModal: () => setIsOpen(false),
+			productCount,
+			headerClassName: searchFilterHeaderClasses,
+			filterCloseIconVariant
+		})
+	});
+};
+
+//#endregion
+exports.SearchResultsFilterModal = SearchResultsFilterModal;

package/dist/packages/components/dist/components/SearchResultsFilterModal/SearchResultsFilterModal.js

@@ -0,0 +1,35 @@
+import { searchFilterSidebarVariantClasses } from "../SearchResultsFilterSidebar/searchFilterSidebarVariants.js";
+import { SearchFilterHeader } from "../SearchFilter/SearchFilterHeader.js";
+import { SearchFilter } from "../SearchFilter/SearchFilter.js";
+import "../SearchFilter/index.js";
+import "../SearchResultsFilterSidebar/index.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../components/dist/components/SearchResultsFilterModal/SearchResultsFilterModal.js
+const SearchResultsFilterModal = ({ productCount, isOpen, setIsOpen, searchFilters, searchFilterSidebarVariant, onSelectFilterItem, onClearAllFilters, filterButtonText }) => {
+	const { applyFiltersUnchangedClasses, applyFiltersChangedClasses, searchFilterHeaderClasses, radioButtonFillColor, radioButtonHoverColor, radioButtonUncheckedBorderColor, filterCloseIconVariant } = searchFilterSidebarVariantClasses[searchFilterSidebarVariant];
+	return /* @__PURE__ */ jsx(SearchFilter, {
+		isOpen,
+		setIsOpen,
+		filters: searchFilters,
+		productCount,
+		selectFilterItem: onSelectFilterItem,
+		clearAllFilters: onClearAllFilters,
+		applyFiltersUnchangedClasses,
+		applyFiltersChangedClasses,
+		filterButtonText,
+		radioButtonFillColor,
+		radioButtonHoverColor,
+		radioButtonUncheckedBorderColor,
+		filterCloseIconVariant,
+		headerContent: /* @__PURE__ */ jsx(SearchFilterHeader, {
+			closeModal: () => setIsOpen(false),
+			productCount,
+			headerClassName: searchFilterHeaderClasses,
+			filterCloseIconVariant
+		})
+	});
+};
+
+//#endregion
+export { SearchResultsFilterModal };

package/dist/packages/components/dist/components/SearchResultsFilterModal/index.cjs

@@ -0,0 +1,3 @@
+'use client';
+
+const require_SearchResultsFilterModal = require('./SearchResultsFilterModal.cjs');

package/dist/packages/components/dist/components/SearchResultsFilterModal/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+import { SearchResultsFilterModal } from "./SearchResultsFilterModal.js";

package/dist/packages/components/dist/components/SearchResultsFilterSidebar/SearchResultsFilter.cjs

@@ -0,0 +1,9 @@
+require('../ButtonBase/ButtonBase.cjs');
+require('./searchFilterSidebarVariants.cjs');
+require('../SearchFilter/SearchFilterHeader.cjs');
+require('../ButtonBase/index.cjs');
+require('../SearchFilter/SearchFilter.cjs');
+require('../SearchFilter/index.cjs');
+require('../../../../icons/dist/SettingsVariant.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");

package/dist/packages/components/dist/components/SearchResultsFilterSidebar/SearchResultsFilter.js

@@ -0,0 +1,9 @@
+import "../ButtonBase/ButtonBase.js";
+import "./searchFilterSidebarVariants.js";
+import "../SearchFilter/SearchFilterHeader.js";
+import "../ButtonBase/index.js";
+import "../SearchFilter/SearchFilter.js";
+import "../SearchFilter/index.js";
+import "../../../../icons/dist/SettingsVariant.js";
+import { useCallback } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/packages/components/dist/components/SearchResultsFilterSidebar/index.cjs

@@ -0,0 +1,2 @@
+const require_searchFilterSidebarVariants = require('./searchFilterSidebarVariants.cjs');
+require('./SearchResultsFilter.cjs');

package/dist/packages/components/dist/components/SearchResultsFilterSidebar/index.js

@@ -0,0 +1,2 @@
+import { searchFilterSidebarVariantClasses } from "./searchFilterSidebarVariants.js";
+import "./SearchResultsFilter.js";

package/dist/packages/components/dist/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.cjs

@@ -0,0 +1,34 @@
+const require_colorsConfig = require('../../models/colorsConfig.cjs');
+
+//#region ../components/dist/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.js
+const searchFilterSidebarVariantClasses = {
+	darkButton: {
+		radioButtonFillColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundDark),
+		radioButtonHoverColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundSecondaryDark),
+		radioButtonUncheckedBorderColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BorderMedium),
+		searchFilterHeaderClasses: "spiffy-tw-text-[--spiffy-colors-text-light]",
+		filterDefaultClasses: "spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
+		filterHoverClasses: "hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]",
+		filterActiveClasses: "spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]",
+		appliedFilterBackgroundClasses: "spiffy-tw-bg-[--spiffy-colors-border-light]",
+		applyFiltersUnchangedClasses: "spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
+		applyFiltersChangedClasses: "spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]",
+		filterCloseIconVariant: "light"
+	},
+	lightButton: {
+		radioButtonFillColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundDark),
+		radioButtonHoverColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BackgroundSecondaryDark),
+		radioButtonUncheckedBorderColor: require_colorsConfig.colorVar(require_colorsConfig.ColorNames.BorderMedium),
+		searchFilterHeaderClasses: "spiffy-tw-text-[--spiffy-colors-text-primary]",
+		filterDefaultClasses: "spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
+		filterHoverClasses: "hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]",
+		filterActiveClasses: "spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]",
+		appliedFilterBackgroundClasses: "spiffy-tw-bg-[--spiffy-colors-border-light]",
+		applyFiltersUnchangedClasses: "spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
+		applyFiltersChangedClasses: "spiffy-tw-bg-[--spiffy-colors-background-primary] spiffy-tw-text-[--spiffy-colors-text-link]",
+		filterCloseIconVariant: "dark"
+	}
+};
+
+//#endregion
+exports.searchFilterSidebarVariantClasses = searchFilterSidebarVariantClasses;

package/dist/packages/components/dist/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.js

@@ -0,0 +1,34 @@
+import { ColorNames, colorVar } from "../../models/colorsConfig.js";
+
+//#region ../components/dist/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.js
+const searchFilterSidebarVariantClasses = {
+	darkButton: {
+		radioButtonFillColor: colorVar(ColorNames.BackgroundDark),
+		radioButtonHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+		radioButtonUncheckedBorderColor: colorVar(ColorNames.BorderMedium),
+		searchFilterHeaderClasses: "spiffy-tw-text-[--spiffy-colors-text-light]",
+		filterDefaultClasses: "spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
+		filterHoverClasses: "hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]",
+		filterActiveClasses: "spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]",
+		appliedFilterBackgroundClasses: "spiffy-tw-bg-[--spiffy-colors-border-light]",
+		applyFiltersUnchangedClasses: "spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
+		applyFiltersChangedClasses: "spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]",
+		filterCloseIconVariant: "light"
+	},
+	lightButton: {
+		radioButtonFillColor: colorVar(ColorNames.BackgroundDark),
+		radioButtonHoverColor: colorVar(ColorNames.BackgroundSecondaryDark),
+		radioButtonUncheckedBorderColor: colorVar(ColorNames.BorderMedium),
+		searchFilterHeaderClasses: "spiffy-tw-text-[--spiffy-colors-text-primary]",
+		filterDefaultClasses: "spiffy-tw-border-[--spiffy-colors-border-medium] spiffy-tw-bg-[--spiffy-colors-background-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
+		filterHoverClasses: "hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark] hover:spiffy-tw-text-[--spiffy-colors-text-primary]",
+		filterActiveClasses: "spiffy-tw-border-[--spiffy-colors-border-outline] spiffy-tw-bg-[--spiffy-colors-background-dark] spiffy-tw-text-[--spiffy-colors-text-light]",
+		appliedFilterBackgroundClasses: "spiffy-tw-bg-[--spiffy-colors-border-light]",
+		applyFiltersUnchangedClasses: "spiffy-tw-bg-[--spiffy-colors-border-light] spiffy-tw-text-[--spiffy-colors-text-secondary]",
+		applyFiltersChangedClasses: "spiffy-tw-bg-[--spiffy-colors-background-primary] spiffy-tw-text-[--spiffy-colors-text-link]",
+		filterCloseIconVariant: "dark"
+	}
+};
+
+//#endregion
+export { searchFilterSidebarVariantClasses };

package/dist/packages/components/dist/components/SearchResultsStates/NoSearchResultsFound.cjs

@@ -0,0 +1,56 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.cjs');
+const require_Typography = require('../Typography/Typography.cjs');
+require('../Typography/index.cjs');
+const require_RecommendedProducts = require('../RecommendedProducts/RecommendedProducts.cjs');
+require('../RecommendedProducts/index.cjs');
+const require_Sparkles = require('../../../../icons/dist/Sparkles.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/SearchResultsStates/NoSearchResultsFound.js
+const NoSearchResultsFound = ({ containerPaddingClasses, noResultsFoundText, sparkleIconColor = "var(--spiffy-colors-accent-primary)", recommendedProducts, searchText, merchantShortName, productGridVariant }) => {
+	const containerClasses = (0, classnames.default)(containerPaddingClasses, "spiffy-tw-mt-6", { "spiffy-tw-mb-[100vh]": recommendedProducts.length === 0 });
+	let textPrompt;
+	if (recommendedProducts.length > 0) textPrompt = noResultsFoundText ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: noResultsFoundText }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}".`]
+		}),
+		" Try changing your filters or adjusting your search query. In the meantime, explore some of our top-selling products below."
+	] });
+	else textPrompt = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}."`]
+		}),
+		" Try changing your filters or adjusting your search query."
+	] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClasses,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sparkles.Sparkles_default, {
+				className: "spiffy-tw-h-[24px] spiffy-tw-w-[24px]",
+				style: { color: sparkleIconColor }
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "body2",
+				children: textPrompt
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RecommendedProducts.RecommendedProducts, {
+			retrievedProducts: recommendedProducts,
+			merchantShortName,
+			productCardConfig: {
+				variant: "minimal",
+				hoverVariant: "none",
+				layoutVariant: "square"
+			},
+			productGridVariant
+		})]
+	});
+};
+
+//#endregion
+exports.NoSearchResultsFound = NoSearchResultsFound;

package/dist/packages/components/dist/components/SearchResultsStates/NoSearchResultsFound.js

@@ -0,0 +1,54 @@
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { RecommendedProducts } from "../RecommendedProducts/RecommendedProducts.js";
+import "../RecommendedProducts/index.js";
+import { Sparkles_default } from "../../../../icons/dist/Sparkles.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../components/dist/components/SearchResultsStates/NoSearchResultsFound.js
+const NoSearchResultsFound = ({ containerPaddingClasses, noResultsFoundText, sparkleIconColor = "var(--spiffy-colors-accent-primary)", recommendedProducts, searchText, merchantShortName, productGridVariant }) => {
+	const containerClasses = classNames(containerPaddingClasses, "spiffy-tw-mt-6", { "spiffy-tw-mb-[100vh]": recommendedProducts.length === 0 });
+	let textPrompt;
+	if (recommendedProducts.length > 0) textPrompt = noResultsFoundText ? /* @__PURE__ */ jsx("span", { children: noResultsFoundText }) : /* @__PURE__ */ jsxs("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ jsxs("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}".`]
+		}),
+		" Try changing your filters or adjusting your search query. In the meantime, explore some of our top-selling products below."
+	] });
+	else textPrompt = /* @__PURE__ */ jsxs("span", { children: [
+		"I’m sorry, I wasn’t able to find an exact match for",
+		/* @__PURE__ */ jsxs("strong", {
+			className: "spiffy-tw-font-semibold",
+			children: [" ", `"${searchText}."`]
+		}),
+		" Try changing your filters or adjusting your search query."
+	] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: containerClasses,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "spiffy-tw-flex spiffy-tw-items-start spiffy-tw-gap-2",
+			children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Sparkles_default, {
+				className: "spiffy-tw-h-[24px] spiffy-tw-w-[24px]",
+				style: { color: sparkleIconColor }
+			}) }), /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				children: textPrompt
+			})]
+		}), /* @__PURE__ */ jsx(RecommendedProducts, {
+			retrievedProducts: recommendedProducts,
+			merchantShortName,
+			productCardConfig: {
+				variant: "minimal",
+				hoverVariant: "none",
+				layoutVariant: "square"
+			},
+			productGridVariant
+		})]
+	});
+};
+
+//#endregion
+export { NoSearchResultsFound };