@faststore/components 2.0.114-alpha.0 → 2.0.122-alpha.0

package/dist/organisms/NavbarSlider/NavbarSliderHeader.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { SlideOverHeaderProps } from '../..';
+export interface NavbarSliderHeaderProps extends SlideOverHeaderProps {
+    /**
+     * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+     */
+    testId?: string;
+}
+declare function NavbarSliderHeader({ children, testId, ...otherProps }: NavbarSliderHeaderProps): JSX.Element;
+export default NavbarSliderHeader;

package/dist/organisms/NavbarSlider/NavbarSliderHeader.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SlideOverHeader } from '../..';
+function NavbarSliderHeader({ children, testId = 'fs-navbar-slider-header', ...otherProps }) {
+    return (React.createElement(SlideOverHeader, { "data-fs-navbar-slider-header": true, "data-testid": testId, ...otherProps }, children));
+}
+export default NavbarSliderHeader;
+//# sourceMappingURL=NavbarSliderHeader.js.map

package/dist/organisms/NavbarSlider/NavbarSliderHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavbarSliderHeader.js","sourceRoot":"","sources":["../../../src/organisms/NavbarSlider/NavbarSliderHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAUvC,SAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,MAAM,GAAG,yBAAyB,EAClC,GAAG,UAAU,EACW;IACxB,OAAO,CACL,oBAAC,eAAe,yDAED,MAAM,KACf,UAAU,IAEb,QAAQ,CACO,CACnB,CAAA;AACH,CAAC;AAED,eAAe,kBAAkB,CAAA"}

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

@@ -0,0 +1,8 @@
+export { default } from './NavbarSlider';
+export type { NavbarSliderProps } from './NavbarSlider';
+export { default as NavbarSliderHeader } from './NavbarSliderHeader';
+export type { NavbarSliderHeaderProps } from './NavbarSliderHeader';
+export { default as NavbarSliderContent } from './NavbarSliderContent';
+export type { NavbarSliderContentProps } from './NavbarSliderContent';
+export { default as NavbarSliderFooter } from './NavbarSliderFooter';
+export type { NavbarSliderFooterProps } from './NavbarSliderFooter';

package/dist/organisms/NavbarSlider/index.js

@@ -0,0 +1,5 @@
+export { default } from './NavbarSlider';
+export { default as NavbarSliderHeader } from './NavbarSliderHeader';
+export { default as NavbarSliderContent } from './NavbarSliderContent';
+export { default as NavbarSliderFooter } from './NavbarSliderFooter';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/NavbarSlider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAGpE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAGtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/organisms/RegionModal/RegionModal.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MutableRefObject } from 'react';
-import type { ModalProps, LinkProps, LinkElementType } from '../../';
+import type { LinkElementType, LinkProps, ModalProps, OverlayProps } from '../../';
 export interface RegionModalProps extends Omit<ModalProps, 'children'> {
     /**
      * ID to find this component in testing tools (e.g.: cypress,
@@ -39,6 +39,10 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
      * Enables fadeOut effect on modal after onSubmit function
      */
     fadeOutOnSubmit?: boolean;
+    /**
+     * Props forwarded to the `Overlay` component.
+     */
+    overlayProps?: OverlayProps;
     /**
      * Function called when Close button is clicked.
      */
@@ -56,5 +60,5 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
      */
     onClear?: () => void;
 }
-declare function RegionModal({ testId, title, description, idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, fadeOutOnSubmit, onClose, onInput, onSubmit, onClear, ...otherProps }: RegionModalProps): JSX.Element;
+declare function RegionModal({ testId, title, description, idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }: RegionModalProps): JSX.Element;
 export default RegionModal;

package/dist/organisms/RegionModal/RegionModal.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Icon, InputField, Link, Modal, ModalHeader, ModalBody } from '../..';
-function RegionModal({ testId = 'fs-region-modal', title = 'Set your location', description = 'Prices, offers and availability may vary according to your location.', idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, fadeOutOnSubmit, onClose, onInput, onSubmit, onClear, ...otherProps }) {
-    return (React.createElement(Modal, { "data-fs-region-modal": true, testId: testId, ...otherProps }, ({ fadeOut }) => (React.createElement(React.Fragment, null,
+import { Icon, InputField, Link, Modal, ModalBody, ModalHeader } from '../..';
+function RegionModal({ testId = 'fs-region-modal', title = 'Set your location', description = 'Prices, offers and availability may vary according to your location.', idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }) {
+    return (React.createElement(Modal, { "data-fs-region-modal": true, testId: testId, overlayProps: overlayProps, ...otherProps }, ({ fadeOut }) => (React.createElement(React.Fragment, null,
         React.createElement(ModalHeader, { onClose: () => {
                 fadeOut();
                 onClose?.();

package/dist/organisms/RegionModal/RegionModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegionModal.js","sourceRoot":"","sources":["../../../src/organisms/RegionModal/RegionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AA0D7E,SAAS,WAAW,CAAC,EACnB,MAAM,GAAG,iBAAiB,EAC1B,KAAK,GAAG,mBAAmB,EAC3B,WAAW,GAAG,sEAAsE,EACpF,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACI;IACjB,OAAO,CACL,oBAAC,KAAK,kCAAsB,MAAM,EAAE,MAAM,KAAM,UAAU,IACvD,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB;QACE,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,CAAA;gBACT,OAAO,EAAE,EAAE,CAAA;YACb,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE;gBACb,YAAY,EAAE,oBAAoB;aACnC,GACD;QACF,oBAAC,SAAS;YACR,oBAAC,UAAU,wCAET,EAAE,EAAE,GAAG,MAAM,cAAc,EAC3B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,aAAa,EACnB,UAAU,QACV,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,QAAQ,EAAE,EAAE,CAAA;oBACZ,eAAe,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;gBACpC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAC1B,KAAK,EAAE,YAAY,GACnB;YAEF,oBAAC,IAAI,0CAA+B,sBAAsB,IACvD,sBAAsB,EAAE,QAAQ,IAAI,CACnC;gBACG,6BAA6B;gBAC9B,oBAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACpD,CACJ,CACI,CACG,CACX,CACJ,CACK,CACT,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"RegionModal.js","sourceRoot":"","sources":["../../../src/organisms/RegionModal/RegionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAoE7E,SAAS,WAAW,CAAC,EACnB,MAAM,GAAG,iBAAiB,EAC1B,KAAK,GAAG,mBAAmB,EAC3B,WAAW,GAAG,sEAAsE,EACpF,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,YAAY,EACZ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACI;IACjB,OAAO,CACL,oBAAC,KAAK,kCAEJ,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,KACtB,UAAU,IAEb,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB;QACE,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,CAAA;gBACT,OAAO,EAAE,EAAE,CAAA;YACb,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE;gBACb,YAAY,EAAE,oBAAoB;aACnC,GACD;QACF,oBAAC,SAAS;YACR,oBAAC,UAAU,wCAET,EAAE,EAAE,GAAG,MAAM,cAAc,EAC3B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,aAAa,EACnB,UAAU,QACV,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,QAAQ,EAAE,EAAE,CAAA;oBACZ,eAAe,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;gBACpC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAC1B,KAAK,EAAE,YAAY,GACnB;YAEF,oBAAC,IAAI,0CAA+B,sBAAsB,IACvD,sBAAsB,EAAE,QAAQ,IAAI,CACnC;gBACG,6BAA6B;gBAC9B,oBAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACpD,CACJ,CACI,CACG,CACX,CACJ,CACK,CACT,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}

package/dist/organisms/SlideOver/SlideOver.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { ModalProps } from '../../';
+import type { ModalProps, OverlayProps } from '../../';
 export type Direction = 'leftSide' | 'rightSide';
 export type WidthSize = 'full' | 'partial';
 export interface SlideOverProps extends Omit<ModalProps, 'title'> {
@@ -24,11 +24,15 @@ export interface SlideOverProps extends Omit<ModalProps, 'title'> {
      */
     fade: 'in' | 'out';
     children: ReactNode;
+    /**
+     * Props forwarded to the `Overlay` component.
+     */
+    overlayProps?: OverlayProps;
     /**
      * This function is called whenever the user clicks outside.
      * the modal content
      */
     onDismiss?: () => void;
 }
-declare function SlideOver({ isOpen, direction, size, fade, children, onDismiss, testId, ...otherProps }: SlideOverProps): JSX.Element;
+declare function SlideOver({ testId, isOpen, direction, size, fade, children, overlayProps, onDismiss, ...otherProps }: SlideOverProps): JSX.Element;
 export default SlideOver;

package/dist/organisms/SlideOver/SlideOver.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal } from '../../';
-function SlideOver({ isOpen, direction = 'leftSide', size = 'full', fade = 'out', children, onDismiss, testId = 'fs-slide-over', ...otherProps }) {
-    return (React.createElement(Modal, { "data-fs-modal": null, "data-fs-slide-over": true, "data-fs-slide-over-direction": direction, "data-fs-slide-over-size": size, "data-fs-slide-over-state": fade, isOpen: isOpen, onDismiss: onDismiss, testId: testId, ...otherProps }, children));
+function SlideOver({ testId = 'fs-slide-over', isOpen, direction = 'leftSide', size = 'full', fade = 'out', children, overlayProps, onDismiss, ...otherProps }) {
+    return (React.createElement(Modal, { "data-fs-modal": null, "data-fs-slide-over": true, "data-fs-slide-over-direction": direction, "data-fs-slide-over-size": size, "data-fs-slide-over-state": fade, isOpen: isOpen, onDismiss: onDismiss, testId: testId, overlayProps: overlayProps, ...otherProps }, children));
 }
 export default SlideOver;
 //# sourceMappingURL=SlideOver.js.map

package/dist/organisms/SlideOver/SlideOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlideOver.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOver.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAkC9B,SAAS,SAAS,CAAC,EACjB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,eAAe,EACxB,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,KAAK,qBACW,IAAI,8DAEW,SAAS,6BACd,IAAI,8BACH,IAAI,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,KACV,UAAU,IAEb,QAAQ,CACH,CACT,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"SlideOver.js","sourceRoot":"","sources":["../../../src/organisms/SlideOver/SlideOver.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAsC9B,SAAS,SAAS,CAAC,EACjB,MAAM,GAAG,eAAe,EACxB,MAAM,EACN,SAAS,GAAG,UAAU,EACtB,IAAI,GAAG,MAAM,EACb,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,KAAK,qBACW,IAAI,8DAEW,SAAS,6BACd,IAAI,8BACH,IAAI,EAC9B,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,KACtB,UAAU,IAEb,QAAQ,CACH,CACT,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.114-alpha.0",
+  "version": "2.0.122-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": "3d49923a96682db78955fcf81e6f134161de0d40"
+  "gitHead": "253c09ebb08354e8c7fead371d64e97cdf0b204b"
 }

package/src/hooks/index.ts

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

package/src/hooks/useScrollDirection.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState, useTransition } from 'react'
+
+export const useScrollDirection = () => {
+  const [scrollDirection, setScrollDirection] = useState<string>('')
+  const [isPending, startTransition] = useTransition()
+
+  useEffect(() => {
+    let lastScrollY = window.scrollY
+
+    const updateScrollDirection = () => {
+      const { scrollY } = window
+      const direction = scrollY > lastScrollY ? 'down' : 'up'
+
+      if (
+        !isPending &&
+        direction !== scrollDirection &&
+        (scrollY - lastScrollY > 10 || scrollY - lastScrollY < -10)
+      ) {
+        startTransition(() => setScrollDirection(direction))
+      }
+
+      lastScrollY = scrollY > 0 ? scrollY : 0
+    }
+
+    window.addEventListener('scroll', updateScrollDirection)
+
+    return () => window.removeEventListener('scroll', updateScrollDirection)
+  }, [isPending, scrollDirection])
+
+  return scrollDirection
+}

package/src/hooks/useSearch.ts

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

package/src/index.ts

@@ -95,6 +95,16 @@ export { default as LinkButton } from './molecules/LinkButton'
 export type { LinkButtonProps } from './molecules/LinkButton'
 export { default as Modal, ModalHeader, ModalBody } from './molecules/Modal'
 export type { ModalProps, ModalHeaderProps } from './molecules/Modal'
+export {
+  default as NavbarLinks,
+  NavbarLinksList,
+  NavbarLinksListItem,
+} from './molecules/NavbarLinks'
+export type {
+  NavbarLinksProps,
+  NavbarLinksListProps,
+  NavbarLinksListItemProps,
+} from './molecules/NavbarLinks'
 export { default as OrderSummary } from './molecules/OrderSummary'
 export type { OrderSummaryProps } from './molecules/OrderSummary'
 export {
@@ -236,6 +246,32 @@ export type {
   ImageZoomProps,
 } from './organisms/ImageGallery'
 
+export {
+  default as Navbar,
+  NavbarHeader,
+  NavbarRow,
+  NavbarButtons,
+} from './organisms/Navbar'
+export type {
+  NavbarProps,
+  NavbarHeaderProps,
+  NavbarRowProps,
+  NavbarButtonsProps,
+} from './organisms/Navbar'
+
+export {
+  default as NavbarSlider,
+  NavbarSliderHeader,
+  NavbarSliderContent,
+  NavbarSliderFooter,
+} from './organisms/NavbarSlider'
+export type {
+  NavbarSliderProps,
+  NavbarSliderHeaderProps,
+  NavbarSliderContentProps,
+  NavbarSliderFooterProps,
+} from './organisms/NavbarSlider'
+
 export { default as OutOfStock } from './organisms/OutOfStock'
 export type { OutOfStockProps } from './organisms/OutOfStock'
 

package/src/molecules/Modal/Modal.tsx

@@ -7,7 +7,7 @@ import type {
 import React from 'react'
 import { createPortal } from 'react-dom'
 
-import { Overlay } from '../..'
+import { Overlay, OverlayProps } from '../..'
 import { useFadeEffect, useUI } from '../../hooks'
 import type { ModalContentProps } from './ModalContent'
 import ModalContent from './ModalContent'
@@ -38,6 +38,10 @@ export interface ModalProps extends Omit<ModalContentProps, 'children'> {
    * Event emitted when the modal is closed
    */
   onDismiss?: () => void
+  /**
+   * Props forwarded to the `Overlay` component
+   */
+  overlayProps?: OverlayProps
   /**
    * Children or function as a children
    */
@@ -55,6 +59,7 @@ const Modal = ({
   testId = 'fs-modal',
   isOpen = true,
   onDismiss,
+  overlayProps,
   ...otherProps
 }: ModalProps) => {
   const { closeModal } = useUI()
@@ -85,6 +90,7 @@ const Modal = ({
         <Overlay
           onClick={handleBackdropClick}
           onKeyDown={handleBackdropKeyDown}
+          {...overlayProps}
         >
           <ModalContent
             onTransitionEnd={() => fade === 'out' && closeModal()}

package/src/molecules/NavbarLinks/NavbarLinks.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface NavbarLinksProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NavbarLinks = forwardRef<HTMLDivElement, NavbarLinksProps>(
+  function NavbarLinks(
+    { children, testId = 'fs-navbar-links', ...otherProps },
+    ref
+  ) {
+    return (
+      <nav data-fs-navbar-links ref={ref} data-testid={testId} {...otherProps}>
+        {children}
+      </nav>
+    )
+  }
+)
+
+export default NavbarLinks

package/src/molecules/NavbarLinks/NavbarLinksList.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react'
+
+import { List } from '../..'
+import type { ListProps } from '../..'
+
+export interface NavbarLinksListProps extends ListProps {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NavbarLinksList = forwardRef<HTMLUListElement, NavbarLinksListProps>(
+  function NavbarLinksList(
+    { children, testId = 'fs-navbar-links-list', ...otherProps },
+    ref
+  ) {
+    return (
+      <List
+        data-fs-navbar-links-list
+        ref={ref}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </List>
+    )
+  }
+)
+
+export default NavbarLinksList

package/src/molecules/NavbarLinks/NavbarLinksListItem.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface NavbarLinksListItemProps
+  extends HTMLAttributes<HTMLLIElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NavbarLinksListItem = forwardRef<HTMLLIElement, NavbarLinksListItemProps>(
+  function NavbarLinksListItem(
+    { children, testId = 'fs-navbar-links-list-item', ...otherProps },
+    ref
+  ) {
+    return (
+      <li
+        data-fs-navbar-links-list-item
+        ref={ref}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </li>
+    )
+  }
+)
+
+export default NavbarLinksListItem

package/src/molecules/NavbarLinks/index.ts

@@ -0,0 +1,8 @@
+export { default } from './NavbarLinks'
+export type { NavbarLinksProps } from './NavbarLinks'
+
+export { default as NavbarLinksList } from './NavbarLinksList'
+export type { NavbarLinksListProps } from './NavbarLinksList'
+
+export { default as NavbarLinksListItem } from './NavbarLinksListItem'
+export type { NavbarLinksListItemProps } from './NavbarLinksListItem'

package/src/organisms/CartSidebar/CartSidebar.tsx

@@ -1,9 +1,10 @@
+import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
 import React from 'react'
-import type { PropsWithChildren, ReactNode } from 'react'
 
 import {
   Alert,
   Badge,
+  OverlayProps,
   SlideOver,
   SlideOverHeader,
   useFadeEffect,
@@ -12,7 +13,7 @@ import {
 
 import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
 
-export interface CartSidebarProps {
+export interface CartSidebarProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * ID to find this component in testing tools (e.g.: cypress,
    * testing-library, and jest).
@@ -42,6 +43,10 @@ export interface CartSidebarProps {
    * The content for Alert component.
    */
   alertText?: string
+  /**
+   * Props forwarded to the `Overlay` component.
+   */
+  overlayProps?: OverlayProps
   /**
    * Function called when Close Button is clicked.
    */
@@ -57,7 +62,9 @@ function CartSidebar({
   children,
   alertIcon,
   alertText,
+  overlayProps,
   onClose,
+  ...otherProps
 }: PropsWithChildren<CartSidebarProps>) {
   const { fade, fadeOut } = useFadeEffect()
   const { closeCart } = useUI()
@@ -72,6 +79,8 @@ function CartSidebar({
       direction={direction}
       onTransitionEnd={() => fade === 'out' && closeCart()}
       testId={testId}
+      overlayProps={overlayProps}
+      {...otherProps}
     >
       <SlideOverHeader
         closeBtnProps={{ testId: 'fs-cart-sidebar-button-close' }}

package/src/organisms/Filter/FilterSlider.tsx

@@ -1,8 +1,10 @@
-import React, { PropsWithChildren } from 'react'
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+import React from 'react'
 
 import {
   Button,
   ButtonProps,
+  OverlayProps,
   SlideOver,
   SlideOverHeader,
   useFadeEffect,
@@ -11,7 +13,7 @@ import {
 
 import { SlideOverDirection, SlideOverWidthSize } from '../SlideOver'
 
-export interface FilterSliderProps {
+export interface FilterSliderProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Title for the FilterSlider component.
    */
@@ -32,6 +34,10 @@ export interface FilterSliderProps {
    * Props for the Clear Button from FilterSlider component.
    */
   clearBtnProps?: Partial<ButtonProps>
+  /**
+   * Props forwarded to the `Overlay` component.
+   */
+  overlayProps?: OverlayProps
   /**
    * Function called when Close Button is clicked.
    */
@@ -45,7 +51,9 @@ function FilterSlider({
   children,
   applyBtnProps,
   clearBtnProps,
+  overlayProps,
   onClose,
+  ...otherProps
 }: PropsWithChildren<FilterSliderProps>) {
   const { fade, fadeOut } = useFadeEffect()
   const { closeFilter } = useUI()
@@ -59,6 +67,8 @@ function FilterSlider({
       size={size}
       direction={direction}
       onTransitionEnd={() => fade === 'out' && closeFilter()}
+      overlayProps={overlayProps}
+      {...otherProps}
     >
       <div data-fs-filter-slider-content>
         <SlideOverHeader

package/src/organisms/Navbar/Navbar.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface NavbarProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+  /**
+   * Specifies the scroll direction. This value can be achieved using the `useScrollDirection` hook.
+   */
+  scrollDirection: string
+}
+
+const Navbar = forwardRef<HTMLDivElement, NavbarProps>(function Navbar(
+  { children, scrollDirection, testId = 'fs-navbar', ...otherProps },
+  ref
+) {
+  return (
+    <section
+      data-fs-navbar
+      ref={ref}
+      data-testid={testId}
+      data-fs-navbar-scroll={scrollDirection}
+      {...otherProps}
+    >
+      {children}
+    </section>
+  )
+})
+
+export default Navbar

package/src/organisms/Navbar/NavbarButtons.tsx

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface NavbarButtonsProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+  /**
+   * Specifies whether the Search Input is expanded or not.
+   */
+  searchExpanded: boolean
+}
+
+const NavbarButtons = forwardRef<HTMLDivElement, NavbarButtonsProps>(
+  function NavbarButtons(
+    { children, searchExpanded, testId = 'fs-navbar-buttons', ...otherProps },
+    ref
+  ) {
+    return (
+      <div
+        data-fs-navbar-buttons
+        ref={ref}
+        data-testid={testId}
+        data-fs-navbar-search-expanded={searchExpanded}
+        {...otherProps}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+export default NavbarButtons

package/src/organisms/Navbar/NavbarHeader.tsx

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface NavbarHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NavbarHeader = forwardRef<HTMLDivElement, NavbarHeaderProps>(
+  function NavbarHeader(
+    { children, testId = 'fs-navbar-header', ...otherProps },
+    ref
+  ) {
+    return (
+      <section
+        data-fs-navbar-header
+        ref={ref}
+        data-testid={testId}
+        {...otherProps}
+      >
+        {children}
+      </section>
+    )
+  }
+)
+
+export default NavbarHeader

package/src/organisms/Navbar/NavbarRow.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface NavbarRowProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const NavbarRow = forwardRef<HTMLDivElement, NavbarRowProps>(function NavbarRow(
+  { children, testId = 'fs-navbar-row', ...otherProps },
+  ref
+) {
+  return (
+    <div data-fs-navbar-row ref={ref} data-testid={testId} {...otherProps}>
+      {children}
+    </div>
+  )
+})
+
+export default NavbarRow

package/src/organisms/Navbar/index.ts

@@ -0,0 +1,11 @@
+export { default } from './Navbar'
+export type { NavbarProps } from './Navbar'
+
+export { default as NavbarHeader } from './NavbarHeader'
+export type { NavbarHeaderProps } from './NavbarHeader'
+
+export { default as NavbarRow } from './NavbarRow'
+export type { NavbarRowProps } from './NavbarRow'
+
+export { default as NavbarButtons } from './NavbarButtons'
+export type { NavbarButtonsProps } from './NavbarButtons'