@faststore/components 2.0.87-alpha.0 → 2.0.88-alpha.0

package/dist/assets/MagnifyingGlass.d.ts

@@ -1,3 +1,4 @@
-import type { FC } from 'react';
-declare const MagnifyingGlass: FC;
+/// <reference types="react" />
+import { IconProps } from './IconProps';
+declare const MagnifyingGlass: ({ size }: IconProps) => JSX.Element;
 export default MagnifyingGlass;

package/dist/assets/MagnifyingGlass.js

@@ -1,8 +1,7 @@
 import React from 'react';
 // Icon from Phosphor Icons
-const MagnifyingGlass = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 256 256", strokeWidth: "16", width: 24, height: 24 },
-    React.createElement("rect", { width: "256", height: "256", fill: "none" }),
-    React.createElement("circle", { cx: "116", cy: "116", r: "84", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }),
-    React.createElement("line", { x1: "175.4", y1: "175.4", x2: "224", y2: "224", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" })));
+const MagnifyingGlass = ({ size = 24 }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    React.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+    React.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })));
 export default MagnifyingGlass;
 //# sourceMappingURL=MagnifyingGlass.js.map

package/dist/assets/MagnifyingGlass.js.map

@@ -1 +1 @@
-{"version":3,"file":"MagnifyingGlass.js","sourceRoot":"","sources":["../../src/assets/MagnifyingGlass.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,eAAe,GAAO,GAAG,EAAE,CAAC,CAChC,6BACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,aAAa,EACrB,WAAW,EAAC,IAAI,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE;IAEV,8BAAM,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,GAAQ;IAClD,gCACE,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACR;IACV,8BACE,EAAE,EAAC,OAAO,EACV,EAAE,EAAC,OAAO,EACV,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAC,IAAI,GACV,CACJ,CACP,CAAA;AAED,eAAe,eAAe,CAAA"}
+{"version":3,"file":"MagnifyingGlass.js","sourceRoot":"","sources":["../../src/assets/MagnifyingGlass.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,2BAA2B;AAC3B,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAa,EAAE,EAAE,CAAC,CACpD,6BACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO;IAEtB,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG;IAChC,8BAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,GAAG,CAC1C,CACP,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { default as UIProvider, Toast as ToastProps, useUI } from './UIProvider';
 export { useFadeEffect } from './useFadeEffect';
 export { useTrapFocus } from './useTrapFocus';
+export { useSearch } from './useSearch';

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
 export { default as UIProvider, useUI } from './UIProvider';
 export { useFadeEffect } from './useFadeEffect';
 export { useTrapFocus } from './useTrapFocus';
+export { useSearch } from './useSearch';
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAuB,KAAK,EAAE,MAAM,cAAc,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAuB,KAAK,EAAE,MAAM,cAAc,CAAA;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/hooks/useSearch.d.ts

@@ -0,0 +1,7 @@
+export declare const useSearch: () => {
+    inContext: false;
+    values?: undefined;
+} | {
+    inContext: true;
+    values: import("../molecules/SearchProvider/SearchProvider").SearchProviderContextValue;
+};

package/dist/hooks/useSearch.js

@@ -0,0 +1,10 @@
+import { SearchContext } from "../molecules/SearchProvider/SearchProvider";
+import { useContext } from "react";
+export const useSearch = () => {
+    const context = useContext(SearchContext);
+    if (!context) {
+        return { inContext: false };
+    }
+    return { inContext: true, values: context };
+};
+//# sourceMappingURL=useSearch.js.map

package/dist/hooks/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearch.js","sourceRoot":"","sources":["../../src/hooks/useSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAA;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC1B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IAEzC,IAAI,CAAC,OAAO,EAAE;QACV,OAAO,EAAE,SAAS,EAAE,KAAc,EAAE,CAAA;KACvC;IAED,OAAO,EAAE,SAAS,EAAE,IAAa,EAAE,MAAM,EAAE,OAAO,EAAE,CAAA;AACxD,CAAC,CAAA"}

package/dist/index.d.ts

@@ -66,8 +66,13 @@ export { default as RadioGroup, RadioOption } from './molecules/RadioGroup';
 export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup';
 export { default as Rating } from './molecules/Rating';
 export type { RatingProps } from './molecules/Rating';
+export { default as SearchProvider } from './molecules/SearchProvider';
+export type { SearchProviderContextValue, } from './molecules/SearchProvider';
+export { default as SearchInputField } from './molecules/SearchInputField';
+export type { SearchInputFieldProps, SearchInputFieldRef, } from './molecules/SearchInputField';
 export { default as SearchAutoComplete, SearchAutoCompleteTerm, } from './molecules/SearchAutoComplete';
 export type { SearchAutoCompleteProps, SearchAutoCompleteTermProps, } from './molecules/SearchAutoComplete';
+export { default as SearchDropdown, SearchDropdownProps, } from './molecules/SearchDropdown';
 export { default as SearchHistory, SearchHistoryTerm, } from './molecules/SearchHistory';
 export type { SearchHistoryProps, SearchHistoryTermProps, } from './molecules/SearchHistory';
 export { default as SearchProducts, SearchProductItem, SearchProductItemImage, SearchProductItemContent, } from './molecules/SearchProducts';
@@ -95,5 +100,7 @@ export { default as PaymentMethods } from './organisms/PaymentMethods';
 export type { PaymentMethodsProps } from './organisms/PaymentMethods';
 export { default as PriceRange } from './organisms/PriceRange';
 export type { PriceRangeProps } from './organisms/PriceRange';
+export { default as SearchInput } from './organisms/SearchInput';
+export type { SearchInputProps } from './organisms/SearchInput';
 export { default as SlideOver, SlideOverHeader } from './organisms/SlideOver';
 export type { SlideOverProps, SlideOverHeaderProps, } from './organisms/SlideOver';

package/dist/index.js

@@ -38,7 +38,10 @@ export { default as ProductTitle } from './molecules/ProductTitle';
 export { default as RadioField } from './molecules/RadioField';
 export { default as RadioGroup, RadioOption } from './molecules/RadioGroup';
 export { default as Rating } from './molecules/Rating';
+export { default as SearchProvider } from './molecules/SearchProvider';
+export { default as SearchInputField } from './molecules/SearchInputField';
 export { default as SearchAutoComplete, SearchAutoCompleteTerm, } from './molecules/SearchAutoComplete';
+export { default as SearchDropdown, } from './molecules/SearchDropdown';
 export { default as SearchHistory, SearchHistoryTerm, } from './molecules/SearchHistory';
 export { default as SearchProducts, SearchProductItem, SearchProductItemImage, SearchProductItemContent, } from './molecules/SearchProducts';
 export { default as SearchTop, SearchTopTerm } from './molecules/SearchTop';
@@ -54,5 +57,6 @@ export { default as QuantitySelector } from './molecules/QuantitySelector';
 export { default as Hero, HeroImage, HeroHeader } from './organisms/Hero';
 export { default as PaymentMethods } from './organisms/PaymentMethods';
 export { default as PriceRange } from './organisms/PriceRange';
+export { default as SearchInput } from './organisms/SearchInput';
 export { default as SlideOver, SlideOverHeader } from './organisms/SlideOver';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/molecules/SearchAutoComplete/SearchAutoComplete.d.ts

@@ -5,5 +5,5 @@ export interface SearchAutoCompleteProps extends HTMLAttributes<HTMLDivElement>
      */
     testId?: string;
 }
-declare const SearchAutoComplete: ({ testId, children, ...otherProps }: SearchAutoCompleteProps) => JSX.Element;
+declare const SearchAutoComplete: ({ testId, children, ...otherProps }: SearchAutoCompleteProps) => JSX.Element | null;
 export default SearchAutoComplete;

package/dist/molecules/SearchAutoComplete/SearchAutoComplete.js

@@ -1,6 +1,10 @@
 import React from 'react';
-import { List } from '../..';
+import { List, useSearch } from '../..';
 const SearchAutoComplete = ({ testId = 'fs-search-auto-complete', children, ...otherProps }) => {
+    const { inContext, values } = useSearch();
+    if (inContext && (values.terms.length <= 0 || values.term.length <= 0)) {
+        return null;
+    }
     return (React.createElement("section", { "data-testid": testId, "data-fs-search-auto-complete": true, ...otherProps },
         React.createElement(List, { as: "ol" }, children)));
 };

package/dist/molecules/SearchAutoComplete/SearchAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchAutoComplete.js","sourceRoot":"","sources":["../../../src/molecules/SearchAutoComplete/SearchAutoComplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAU5B,MAAM,kBAAkB,GAAG,CAAC,EAC1B,MAAM,GAAG,yBAAyB,EAClC,QAAQ,EACR,GAAG,UAAU,EACW,EAAE,EAAE;IAC5B,OAAO,CACL,gDAAsB,MAAM,2CAAmC,UAAU;QACvE,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,IAAE,QAAQ,CAAQ,CACvB,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"SearchAutoComplete.js","sourceRoot":"","sources":["../../../src/molecules/SearchAutoComplete/SearchAutoComplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUvC,MAAM,kBAAkB,GAAG,CAAC,EAC1B,MAAM,GAAG,yBAAyB,EAClC,QAAQ,EACR,GAAG,UAAU,EACW,EAAE,EAAE;IAE5B,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAA;IAEzC,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,EAAE;QACtE,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,gDAAsB,MAAM,2CAAmC,UAAU;QACvE,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,IAAE,QAAQ,CAAQ,CACvB,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/dist/molecules/SearchDropdown/SearchDropdown.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import React from 'react';
+export interface SearchDropdownProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    children?: ReactNode;
+}
+declare const SearchDropdown: React.ForwardRefExoticComponent<SearchDropdownProps & {
+    children?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SearchDropdown;

package/dist/molecules/SearchDropdown/SearchDropdown.js

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+import { useSearch } from '../../hooks';
+const SearchLoading = () => {
+    const { inContext, values } = useSearch();
+    return (React.createElement(React.Fragment, null, (inContext && values.isLoading) && React.createElement("p", { "data-fs-search-dropdown-loading-text": true }, "Loading...")));
+};
+const SearchDropdown = forwardRef(function SearchDropdown({ testId = 'fs-search-dropdown', children, ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-search-dropdown": true, "data-testid": testId, ...otherProps },
+        React.createElement("section", null,
+            React.createElement(SearchLoading, null),
+            children)));
+});
+export default SearchDropdown;
+//# sourceMappingURL=SearchDropdown.js.map

package/dist/molecules/SearchDropdown/SearchDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchDropdown.js","sourceRoot":"","sources":["../../../src/molecules/SearchDropdown/SearchDropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAWvC,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAA;IAEzC,OAAO,CACL,0CACI,CAAC,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,IAAI,wFAAsD,CAC1F,CACJ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,cAAc,GAAG,UAAU,CAG/B,SAAS,cAAc,CACvB,EACE,MAAM,GAAG,oBAAoB,EAC7B,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,kDAAuC,MAAM,KAAM,UAAU;QACxE;YACE,oBAAC,aAAa,OAAE;YACf,QAAQ,CACD,CACN,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/molecules/SearchDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchDropdown';
+export type { SearchDropdownProps } from './SearchDropdown';

package/dist/molecules/SearchDropdown/index.js

@@ -0,0 +1,2 @@
+export { default } from './SearchDropdown';
+//# sourceMappingURL=index.js.map

package/dist/molecules/SearchDropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/SearchDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/molecules/SearchHistory/SearchHistory.d.ts

@@ -17,5 +17,5 @@ export interface SearchHistoryProps extends HTMLAttributes<HTMLDivElement> {
      */
     onClear?: () => void;
 }
-declare const SearchHistory: ({ testId, title, clearLabel, onClear, children, ...otherProps }: SearchHistoryProps) => JSX.Element;
+declare const SearchHistory: ({ testId, title, clearLabel, onClear, children, ...otherProps }: SearchHistoryProps) => JSX.Element | null;
 export default SearchHistory;

package/dist/molecules/SearchHistory/SearchHistory.js

@@ -1,6 +1,10 @@
 import React from 'react';
-import { List, Button } from '../..';
+import { List, Button, useSearch } from '../..';
 const SearchHistory = ({ testId = 'fs-search-history', title = 'History', clearLabel = 'Clear History', onClear, children, ...otherProps }) => {
+    const { inContext, values } = useSearch();
+    if (inContext && (values.term.length !== 0 || values.isLoading)) {
+        return null;
+    }
     return (React.createElement("section", { "data-testid": testId, "data-fs-search-history": true, ...otherProps },
         React.createElement("header", { "data-fs-search-history-header": true },
             React.createElement("p", { "data-fs-search-history-title": true }, title),

package/dist/molecules/SearchHistory/SearchHistory.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchHistory.js","sourceRoot":"","sources":["../../../src/molecules/SearchHistory/SearchHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAqBpC,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,GAAG,mBAAmB,EAC5B,KAAK,GAAG,SAAS,EACjB,UAAU,GAAG,eAAe,EAC5B,OAAO,EACP,QAAQ,EACR,GAAG,UAAU,EACM,EAAE,EAAE;IACvB,OAAO,CACL,gDAAsB,MAAM,qCAA6B,UAAU;QACjE;YACE,mEAAiC,KAAK,CAAK;YAC3C,oBAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,IACtD,UAAU,CACJ,CACF;QACT,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,IAAE,QAAQ,CAAQ,CACvB,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"SearchHistory.js","sourceRoot":"","sources":["../../../src/molecules/SearchHistory/SearchHistory.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAqB/C,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,GAAG,mBAAmB,EAC5B,KAAK,GAAG,SAAS,EACjB,UAAU,GAAG,eAAe,EAC5B,OAAO,EACP,QAAQ,EACR,GAAG,UAAU,EACM,EAAE,EAAE;IAEvB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAA;IAEzC,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QAC/D,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,gDAAsB,MAAM,qCAA6B,UAAU;QACjE;YACE,mEAAiC,KAAK,CAAK;YAC3C,oBAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,IACtD,UAAU,CACJ,CACF;QACT,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,IAAE,QAAQ,CAAQ,CACvB,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/molecules/SearchInputField/SearchInputField.d.ts

@@ -0,0 +1,36 @@
+import type { AriaAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import React from 'react';
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>;
+type ButtonProps = {
+    onClick?: () => void;
+    testId?: string;
+};
+export interface SearchInputFieldProps extends InputProps {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+    /**
+     * Props for the submit button inside the input.
+     */
+    buttonProps?: ButtonProps;
+    /**
+     * A React component that will be rendered as an icon (submit button).
+     * @default <MagnifyingGlass />
+     */
+    buttonIcon?: ReactNode;
+    /**
+     * Custom aria-label for input and button.
+     */
+    'aria-label'?: AriaAttributes['aria-label'];
+    /**
+     * Callback function when submitted.
+     */
+    onSubmit: (value: string) => void;
+}
+export interface SearchInputFieldRef {
+    inputRef?: HTMLInputElement | null;
+    formRef?: HTMLFormElement | null;
+}
+declare const SearchInputField: React.ForwardRefExoticComponent<SearchInputFieldProps & React.RefAttributes<SearchInputFieldRef | null>>;
+export default SearchInputField;

package/dist/molecules/SearchInputField/SearchInputField.js

@@ -0,0 +1,21 @@
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { IconButton, Input, MagnifyingGlass } from '../..';
+const SearchInputField = forwardRef(function SearchInputField({ onSubmit, buttonIcon, 'aria-label': ariaLabel = 'search', testId = 'fs-search-input', buttonProps, ...otherProps }, ref) {
+    const inputRef = useRef(null);
+    const formRef = useRef(null);
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (inputRef.current?.value !== '') {
+            onSubmit(inputRef.current.value);
+        }
+    };
+    useImperativeHandle(ref, () => ({
+        inputRef: inputRef.current,
+        formRef: formRef.current,
+    }));
+    return (React.createElement("form", { ref: formRef, "data-fs-search-input-field": true, "data-testid": testId, onSubmit: handleSubmit, role: "search" },
+        React.createElement(Input, { ref: inputRef, "aria-label": ariaLabel, "data-fs-search-input-field-input": true, ...otherProps }),
+        React.createElement(IconButton, { type: "submit", "aria-label": "Submit Search", icon: buttonIcon ?? React.createElement(MagnifyingGlass, null), ...buttonProps })));
+});
+export default SearchInputField;
+//# sourceMappingURL=SearchInputField.js.map

package/dist/molecules/SearchInputField/SearchInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInputField.js","sourceRoot":"","sources":["../../../src/molecules/SearchInputField/SearchInputField.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAqC1D,MAAM,gBAAgB,GAAG,UAAU,CAGjC,SAAS,gBAAgB,CACzB,EACE,QAAQ,EACR,UAAU,EACV,YAAY,EAAE,SAAS,GAAG,QAAQ,EAClC,MAAM,GAAG,iBAAiB,EAC1B,WAAW,EACX,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAC/C,MAAM,OAAO,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAA;IAE7C,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,EAAE;QACxC,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,QAAQ,CAAC,OAAO,EAAE,KAAK,KAAK,EAAE,EAAE;YAClC,QAAQ,CAAC,QAAQ,CAAC,OAAQ,CAAC,KAAK,CAAC,CAAA;SAClC;IACH,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,QAAQ,EAAE,QAAQ,CAAC,OAAO;QAC1B,OAAO,EAAE,OAAO,CAAC,OAAO;KACzB,CAAC,CAAC,CAAA;IAEH,OAAO,CACL,8BACE,GAAG,EAAE,OAAO,qDAEC,MAAM,EACnB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,QAAQ;QAEb,oBAAC,KAAK,IACJ,GAAG,EAAE,QAAQ,gBACD,SAAS,+CAEjB,UAAU,GACd;QACF,oBAAC,UAAU,IACT,IAAI,EAAC,QAAQ,gBACF,eAAe,EAC1B,IAAI,EAAE,UAAU,IAAI,oBAAC,eAAe,OAAG,KACnC,WAAW,GACf,CACG,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,gBAAgB,CAAA"}

package/dist/molecules/SearchInputField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchInputField';
+export type { SearchInputFieldProps, SearchInputFieldRef, } from './SearchInputField';

package/dist/molecules/SearchInputField/index.js

@@ -0,0 +1,2 @@
+export { default } from './SearchInputField';
+//# sourceMappingURL=index.js.map

package/dist/molecules/SearchInputField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/SearchInputField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/molecules/SearchProducts/SearchProductItemContent.d.ts

@@ -6,7 +6,7 @@ interface Price {
     listPrice: number;
     formatter: PriceFormatter;
 }
-export type SearchProductItemContentProps = {
+export interface SearchProductItemContentProps {
     /**
      * Specifies the product's title.
      */
@@ -15,6 +15,6 @@ export type SearchProductItemContentProps = {
      * Specifies product's prices.
      */
     price: Price;
-};
+}
 declare const SearchProductItemContent: React.ForwardRefExoticComponent<SearchProductItemContentProps & React.RefAttributes<HTMLElement>>;
 export default SearchProductItemContent;

package/dist/molecules/SearchProducts/SearchProducts.d.ts

@@ -9,5 +9,5 @@ export interface SearchProductsProps extends HTMLAttributes<HTMLDivElement> {
      */
     title?: string;
 }
-declare const SearchProductsProps: ({ testId, title, children, ...otherProps }: SearchProductsProps) => JSX.Element;
+declare const SearchProductsProps: ({ testId, title, children, ...otherProps }: SearchProductsProps) => JSX.Element | null;
 export default SearchProductsProps;

package/dist/molecules/SearchProducts/SearchProducts.js

@@ -1,6 +1,10 @@
 import React from 'react';
-import { List } from '../..';
+import { List, useSearch } from '../..';
 const SearchProductsProps = ({ testId = 'fs-search-products', title = 'Suggested Products', children, ...otherProps }) => {
+    const { inContext, values } = useSearch();
+    if (inContext && (values.products.length <= 0)) {
+        return null;
+    }
     return (React.createElement("section", { "data-testid": testId, "data-fs-search-products": true, ...otherProps },
         React.createElement("header", { "data-fs-search-products-header": true },
             React.createElement("p", { "data-fs-search-products-title": true }, title)),

package/dist/molecules/SearchProducts/SearchProducts.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchProducts.js","sourceRoot":"","sources":["../../../src/molecules/SearchProducts/SearchProducts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAa5B,MAAM,mBAAmB,GAAG,CAAC,EAC3B,MAAM,GAAG,oBAAoB,EAC7B,KAAK,GAAG,oBAAoB,EAC5B,QAAQ,EACR,GAAG,UAAU,EACO,EAAE,EAAE;IACxB,OAAO,CACL,gDAAsB,MAAM,sCAA8B,UAAU;QAClE;YACE,oEAAkC,KAAK,CAAK,CACrC;QACT,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,IAAE,QAAQ,CAAQ,CACvB,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"SearchProducts.js","sourceRoot":"","sources":["../../../src/molecules/SearchProducts/SearchProducts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAavC,MAAM,mBAAmB,GAAG,CAAC,EAC3B,MAAM,GAAG,oBAAoB,EAC7B,KAAK,GAAG,oBAAoB,EAC5B,QAAQ,EACR,GAAG,UAAU,EACO,EAAE,EAAE;IACxB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAA;IAEzC,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,CAAC,EAAE;QAC9C,OAAO,IAAI,CAAA;KACZ;IACD,OAAO,CACL,gDAAsB,MAAM,sCAA8B,UAAU;QAClE;YACE,oEAAkC,KAAK,CAAK,CACrC;QACT,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,IAAE,QAAQ,CAAQ,CACvB,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/molecules/SearchProvider/SearchProvider.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+export interface SearchProviderContextValue {
+    /**
+     * Term to be researched.
+     */
+    term: string;
+    /**
+     * Enables a loading state.
+     */
+    isLoading: boolean;
+    /**
+     * List of Suggestion terms.
+     */
+    terms: Array<{
+        value: string;
+    }>;
+    /**
+     * List of Suggested products.
+     */
+    products: {}[];
+    /**
+     * Callback function when a search term is selected.
+     */
+    onSearchSelection?: (term: string, path: string) => void;
+}
+export declare const SearchContext: React.Context<SearchProviderContextValue | null>;
+declare function SearchProvider({ onSearchSelection, children, term, terms, products, isLoading, }: PropsWithChildren<SearchProviderContextValue>): JSX.Element;
+export default SearchProvider;

package/dist/molecules/SearchProvider/SearchProvider.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createContext } from 'react';
+export const SearchContext = createContext(null);
+function SearchProvider({ onSearchSelection, children, term, terms, products, isLoading, }) {
+    return (React.createElement(SearchContext.Provider, { value: { onSearchSelection, term, terms, products, isLoading } }, children));
+}
+export default SearchProvider;
+//# sourceMappingURL=SearchProvider.js.map

package/dist/molecules/SearchProvider/SearchProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchProvider.js","sourceRoot":"","sources":["../../../src/molecules/SearchProvider/SearchProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAyBrC,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CACxC,IAAI,CACL,CAAA;AAED,SAAS,cAAc,CAAC,EACtB,iBAAiB,EACjB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,GACqC;IAC9C,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAE7D,QAAQ,CACc,CAC1B,CAAA;AACH,CAAC;AAED,eAAe,cAAc,CAAA"}

package/dist/molecules/SearchProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchProvider';
+export type { SearchProviderContextValue } from './SearchProvider';

package/dist/molecules/SearchProvider/index.js

@@ -0,0 +1,2 @@
+export { default } from './SearchProvider';
+//# sourceMappingURL=index.js.map

package/dist/molecules/SearchProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/molecules/SearchProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/molecules/SearchTop/SearchTop.d.ts

@@ -9,14 +9,6 @@ export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
      * Title attribute for the <section> tag rendered by this component.
      */
     title: string;
-    /**
-     * Defines the the message displayed while loading.
-     */
-    loadingMessage?: string;
-    /**
-     * Enables a loading state.
-     */
-    isLoading?: boolean;
 }
 declare const SearchTop: React.ForwardRefExoticComponent<SearchTopProps & React.RefAttributes<HTMLDivElement>>;
 export default SearchTop;

package/dist/molecules/SearchTop/SearchTop.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import { forwardRef } from 'react';
-import { List } from '../../';
-const SearchTop = forwardRef(function SearchTop({ testId = 'fs-top-search', title = 'Top Search', loadingMessage = 'Loading...', isLoading, children, ...otherProps }, ref) {
-    return (React.createElement("section", { ref: ref, "data-testid": testId, "data-fs-search-top": true, ...otherProps }, isLoading ? (React.createElement("p", { "data-fs-search-top-input-loading-text": true }, loadingMessage)) : (React.createElement(React.Fragment, null,
+import { List, useSearch } from '../../';
+const SearchTop = forwardRef(function SearchTop({ testId = 'fs-top-search', title = 'Top Search', children, ...otherProps }, ref) {
+    const { inContext, values } = useSearch();
+    if (inContext && (values.term.length !== 0 || values.isLoading)) {
+        return null;
+    }
+    return (React.createElement("section", { ref: ref, "data-testid": testId, "data-fs-search-top": true, ...otherProps },
         React.createElement("header", { "data-fs-search-top-header": true },
             React.createElement("p", { "data-fs-search-top-title": true }, title)),
-        React.createElement(List, { as: "ol" }, children)))));
+        React.createElement(List, { as: "ol" }, children)));
 });
 export default SearchTop;
 //# sourceMappingURL=SearchTop.js.map

package/dist/molecules/SearchTop/SearchTop.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchTop.js","sourceRoot":"","sources":["../../../src/molecules/SearchTop/SearchTop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGlC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAqB7B,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EACE,MAAM,GAAG,eAAe,EACxB,KAAK,GAAG,YAAY,EACpB,cAAc,GAAG,YAAY,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,iCAAS,GAAG,EAAE,GAAG,iBAAe,MAAM,iCAAyB,UAAU,IACtE,SAAS,CAAC,CAAC,CAAC,CACX,4EAA0C,cAAc,CAAK,CAC9D,CAAC,CAAC,CAAC,CACF;QACE;YACE,+DAA6B,KAAK,CAAK,CAChC;QACT,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,IAAE,QAAQ,CAAQ,CAC9B,CACJ,CACO,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"SearchTop.js","sourceRoot":"","sources":["../../../src/molecules/SearchTop/SearchTop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGlC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAaxC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EACE,MAAM,GAAG,eAAe,EACxB,KAAK,GAAG,YAAY,EACpB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAGH,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAA;IAEzC,IAAI,SAAS,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QAC/D,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,iCAAS,GAAG,EAAE,GAAG,iBAAe,MAAM,iCAAyB,UAAU;QACrE;YACE,+DAA6B,KAAK,CAAK,CAChC;QACT,oBAAC,IAAI,IAAC,EAAE,EAAC,IAAI,IAAE,QAAQ,CAAQ,CACzB,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/organisms/SearchInput/SearchInput.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import { SearchProviderContextValue } from '../../molecules/SearchProvider';
+export type SearchInputProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * The current status of the Search Dropdown.
+     */
+    visibleDropdown: boolean;
+} & HTMLAttributes<HTMLDivElement> & SearchProviderContextValue;
+declare const SearchInput: React.ForwardRefExoticComponent<{
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string | undefined;
+    /**
+     * The current status of the Search Dropdown.
+     */
+    visibleDropdown: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & SearchProviderContextValue & React.RefAttributes<HTMLDivElement>>;
+export default SearchInput;

package/dist/organisms/SearchInput/SearchInput.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import SearchProvider from '../../molecules/SearchProvider';
+const SearchInput = forwardRef(function SearchInput({ children, visibleDropdown = false, testId = 'fs-search-input', isLoading, products, term, terms, onSearchSelection, ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-search-input": true, "data-fs-search-input-dropdown-visible": visibleDropdown, "data-testid": testId, ...otherProps },
+        React.createElement(SearchProvider, { onSearchSelection: onSearchSelection, isLoading: isLoading, term: term, products: products, terms: terms }, children)));
+});
+export default SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/dist/organisms/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/organisms/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,cAA8C,MAAM,gCAAgC,CAAA;AAe3F,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,MAAM,GAAG,iBAAiB,EAC1B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,iBAAiB,EACjB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,yEAE+B,eAAe,iBACzC,MAAM,KACf,UAAU;QAEd,oBAAC,cAAc,IACb,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,IAEX,QAAQ,CACM,CACb,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

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

@@ -0,0 +1,2 @@
+export { default } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';

package/dist/organisms/SearchInput/index.js

@@ -0,0 +1,2 @@
+export { default } from './SearchInput';
+//# sourceMappingURL=index.js.map

package/dist/organisms/SearchInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.87-alpha.0",
+  "version": "2.0.88-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "b3bf59d620318b0bd4511eb4731eb716006c0fb4"
+  "gitHead": "a9aa7a6572c08e0bd26e384bb66464e633f1ad84"
 }

package/src/assets/MagnifyingGlass.tsx

@@ -1,38 +1,21 @@
 import React from 'react'
-import type { FC } from 'react'
+import { IconProps } from './IconProps'
 
 // Icon from Phosphor Icons
-const MagnifyingGlass: FC = () => (
+const MagnifyingGlass = ({ size = 24 }: IconProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    viewBox="0 0 256 256"
-    strokeWidth="16"
-    width={24}
-    height={24}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
   >
-    <rect width="256" height="256" fill="none"></rect>
-    <circle
-      cx="116"
-      cy="116"
-      r="84"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="16"
-    ></circle>
-    <line
-      x1="175.4"
-      y1="175.4"
-      x2="224"
-      y2="224"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="16"
-    ></line>
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
   </svg>
 )
 

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { default as UIProvider, Toast as ToastProps, useUI } from './UIProvider'
 export { useFadeEffect } from './useFadeEffect'
 export { useTrapFocus } from './useTrapFocus'
+export { useSearch } from './useSearch'

package/src/hooks/useSearch.ts

@@ -0,0 +1,12 @@
+import { SearchContext } from "../molecules/SearchProvider/SearchProvider"
+import { useContext } from "react"
+
+export const useSearch = () => {
+    const context = useContext(SearchContext)
+
+    if (!context) {
+        return { inContext: false as const }
+    }
+
+    return { inContext: true as const, values: context }
+}

package/src/index.ts

@@ -116,6 +116,17 @@ export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
 export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
 export { default as Rating } from './molecules/Rating'
 export type { RatingProps } from './molecules/Rating'
+
+export { default as SearchProvider } from './molecules/SearchProvider'
+export type {
+  SearchProviderContextValue,
+} from './molecules/SearchProvider'
+
+export { default as SearchInputField } from './molecules/SearchInputField'
+export type {
+  SearchInputFieldProps,
+  SearchInputFieldRef,
+} from './molecules/SearchInputField'
 export {
   default as SearchAutoComplete,
   SearchAutoCompleteTerm,
@@ -124,6 +135,10 @@ export type {
   SearchAutoCompleteProps,
   SearchAutoCompleteTermProps,
 } from './molecules/SearchAutoComplete'
+export {
+  default as SearchDropdown,
+  SearchDropdownProps,
+} from './molecules/SearchDropdown'
 export {
   default as SearchHistory,
   SearchHistoryTerm,
@@ -190,6 +205,9 @@ export type { PaymentMethodsProps } from './organisms/PaymentMethods'
 export { default as PriceRange } from './organisms/PriceRange'
 export type { PriceRangeProps } from './organisms/PriceRange'
 
+export { default as SearchInput } from './organisms/SearchInput'
+export type { SearchInputProps } from './organisms/SearchInput'
+
 export { default as SlideOver, SlideOverHeader } from './organisms/SlideOver'
 export type {
   SlideOverProps,

package/src/molecules/SearchAutoComplete/SearchAutoComplete.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { List } from '../..'
+import { List, useSearch } from '../..'
 
 export interface SearchAutoCompleteProps
   extends HTMLAttributes<HTMLDivElement> {
@@ -14,6 +14,13 @@ const SearchAutoComplete = ({
   children,
   ...otherProps
 }: SearchAutoCompleteProps) => {
+
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.terms.length <= 0 || values.term.length <= 0)) {
+    return null
+  }
+
   return (
     <section data-testid={testId} data-fs-search-auto-complete {...otherProps}>
       <List as="ol">{children}</List>

package/src/molecules/SearchDropdown/SearchDropdown.tsx

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode, PropsWithChildren } from 'react'
+import React, { forwardRef } from 'react'
+import { useSearch } from '../../hooks'
+
+export interface SearchDropdownProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  children?: ReactNode
+}
+
+const SearchLoading = () => {
+  const { inContext, values } = useSearch()
+
+  return (
+    <>
+      { (inContext && values.isLoading) && <p data-fs-search-dropdown-loading-text>Loading...</p> }
+    </>
+  )
+}
+
+const SearchDropdown = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<SearchDropdownProps>
+>(function SearchDropdown(
+  {
+    testId = 'fs-search-dropdown',
+    children,
+    ...otherProps
+  },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-search-dropdown data-testid={testId} {...otherProps}>
+      <section>
+        <SearchLoading/>
+        {children}
+      </section>
+    </div>
+  )
+})
+
+export default SearchDropdown

package/src/molecules/SearchDropdown/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchDropdown'
+export type { SearchDropdownProps } from './SearchDropdown'

package/src/molecules/SearchHistory/SearchHistory.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { List, Button } from '../..'
+import { List, Button, useSearch } from '../..'
 
 export interface SearchHistoryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -28,6 +28,13 @@ const SearchHistory = ({
   children,
   ...otherProps
 }: SearchHistoryProps) => {
+
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.term.length !== 0 || values.isLoading)) {
+    return null
+  }
+
   return (
     <section data-testid={testId} data-fs-search-history {...otherProps}>
       <header data-fs-search-history-header>

package/src/molecules/SearchInputField/SearchInputField.tsx

@@ -0,0 +1,100 @@
+import type {
+  AriaAttributes,
+  FormEvent,
+  InputHTMLAttributes,
+  ReactNode,
+} from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+
+import { IconButton, Input, MagnifyingGlass } from '../..'
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>
+
+type ButtonProps = {
+  onClick?: () => void
+  testId?: string
+}
+export interface SearchInputFieldProps extends InputProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Props for the submit button inside the input.
+   */
+  buttonProps?: ButtonProps
+  /**
+   * A React component that will be rendered as an icon (submit button).
+   * @default <MagnifyingGlass />
+   */
+  buttonIcon?: ReactNode
+  /**
+   * Custom aria-label for input and button.
+   */
+  'aria-label'?: AriaAttributes['aria-label']
+  /**
+   * Callback function when submitted.
+   */
+  onSubmit: (value: string) => void
+}
+
+export interface SearchInputFieldRef {
+  inputRef?: HTMLInputElement | null
+  formRef?: HTMLFormElement | null
+}
+
+const SearchInputField = forwardRef<
+  SearchInputFieldRef | null,
+  SearchInputFieldProps
+>(function SearchInputField(
+  {
+    onSubmit,
+    buttonIcon,
+    'aria-label': ariaLabel = 'search',
+    testId = 'fs-search-input',
+    buttonProps,
+    ...otherProps
+  },
+  ref
+) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const formRef = useRef<HTMLFormElement>(null)
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault()
+
+    if (inputRef.current?.value !== '') {
+      onSubmit(inputRef.current!.value)
+    }
+  }
+
+  useImperativeHandle(ref, () => ({
+    inputRef: inputRef.current,
+    formRef: formRef.current,
+  }))
+
+  return (
+    <form
+      ref={formRef}
+      data-fs-search-input-field
+      data-testid={testId}
+      onSubmit={handleSubmit}
+      role="search"
+    >
+      <Input
+        ref={inputRef}
+        aria-label={ariaLabel}
+        data-fs-search-input-field-input
+        {...otherProps}
+      />
+      <IconButton
+        type="submit"
+        aria-label="Submit Search"
+        icon={buttonIcon ?? <MagnifyingGlass />}
+        {...buttonProps}
+      />
+    </form>
+  )
+})
+
+export default SearchInputField

package/src/molecules/SearchInputField/index.ts

@@ -0,0 +1,5 @@
+export { default } from './SearchInputField'
+export type {
+  SearchInputFieldProps,
+  SearchInputFieldRef,
+} from './SearchInputField'

package/src/molecules/SearchProducts/SearchProductItemContent.tsx

@@ -8,7 +8,7 @@ interface Price {
   formatter: PriceFormatter
 }
 
-export type SearchProductItemContentProps = {
+export interface SearchProductItemContentProps {
   /**
    * Specifies the product's title.
    */

package/src/molecules/SearchProducts/SearchProducts.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { List } from '../..'
+import { List, useSearch } from '../..'
 
 export interface SearchProductsProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -18,6 +18,11 @@ const SearchProductsProps = ({
   children,
   ...otherProps
 }: SearchProductsProps) => {
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.products.length <= 0)) {
+    return null
+  }
   return (
     <section data-testid={testId} data-fs-search-products {...otherProps}>
       <header data-fs-search-products-header>

package/src/molecules/SearchProvider/SearchProvider.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { createContext } from 'react'
+
+export interface SearchProviderContextValue {
+  /**
+   * Term to be researched.
+   */
+  term: string
+  /**
+   * Enables a loading state.
+   */
+  isLoading: boolean
+  /**
+   * List of Suggestion terms.
+   */
+  terms: Array<{ value: string }>
+  /**
+   * List of Suggested products.
+   */
+  products: {}[]
+  /**
+   * Callback function when a search term is selected.
+   */
+  onSearchSelection?: (term: string, path: string) => void
+}
+
+export const SearchContext = createContext<SearchProviderContextValue | null>(
+  null
+)
+
+function SearchProvider({
+  onSearchSelection,
+  children,
+  term,
+  terms,
+  products,
+  isLoading,
+}: PropsWithChildren<SearchProviderContextValue>) {
+  return (
+    <SearchContext.Provider
+      value={{ onSearchSelection, term, terms, products, isLoading }}
+    >
+      {children}
+    </SearchContext.Provider>
+  )
+}
+
+export default SearchProvider

package/src/molecules/SearchProvider/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchProvider'
+export type { SearchProviderContextValue } from './SearchProvider'

package/src/molecules/SearchTop/SearchTop.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { forwardRef } from 'react'
 import type { HTMLAttributes } from 'react'
 
-import { List } from '../../'
+import { List, useSearch } from '../../'
 
 export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -13,39 +13,30 @@ export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
    * Title attribute for the <section> tag rendered by this component.
    */
   title: string
-  /**
-   * Defines the the message displayed while loading.
-   */
-  loadingMessage?: string
-  /**
-   * Enables a loading state.
-   */
-  isLoading?: boolean
 }
 
 const SearchTop = forwardRef<HTMLDivElement, SearchTopProps>(function SearchTop(
   {
     testId = 'fs-top-search',
     title = 'Top Search',
-    loadingMessage = 'Loading...',
-    isLoading,
     children,
     ...otherProps
   },
   ref
 ) {
+
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.term.length !== 0 || values.isLoading)) {
+    return null
+  }
+
   return (
     <section ref={ref} data-testid={testId} data-fs-search-top {...otherProps}>
-      {isLoading ? (
-        <p data-fs-search-top-input-loading-text>{loadingMessage}</p>
-      ) : (
-        <>
-          <header data-fs-search-top-header>
-            <p data-fs-search-top-title>{title}</p>
-          </header>
-          <List as="ol">{children}</List>
-        </>
-      )}
+        <header data-fs-search-top-header>
+          <p data-fs-search-top-title>{title}</p>
+        </header>
+        <List as="ol">{children}</List>
     </section>
   )
 })

package/src/organisms/SearchInput/SearchInput.tsx

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+import SearchProvider, { SearchProviderContextValue } from '../../molecules/SearchProvider'
+
+
+export type SearchInputProps = {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * The current status of the Search Dropdown.
+   */
+  visibleDropdown: boolean
+} & HTMLAttributes<HTMLDivElement> & SearchProviderContextValue
+
+const SearchInput = forwardRef<HTMLDivElement, SearchInputProps>(
+  function SearchInput(
+    {
+      children,
+      visibleDropdown = false,
+      testId = 'fs-search-input',
+      isLoading,
+      products,
+      term,
+      terms,
+      onSearchSelection,
+      ...otherProps
+    },
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        data-fs-search-input
+        data-fs-search-input-dropdown-visible={visibleDropdown}
+        data-testid={testId}
+        {...otherProps}
+      >
+        <SearchProvider 
+          onSearchSelection={onSearchSelection} 
+          isLoading={isLoading} 
+          term={term} 
+          products={products} 
+          terms={terms}
+        >
+          {children}
+        </SearchProvider>
+      </div>
+    )
+  }
+)
+
+export default SearchInput

package/src/organisms/SearchInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchInput'
+export type { SearchInputProps } from './SearchInput'