feat: add zIndex property (#78)

#### What problem is this solving?

We have a situation where more than one Drawer needs to be opened and we
need to be able to define which one is on top.

#### How to test it?
<!--- Don't forget to add a link to a Workspace where this branch is
linked -->

[Workspace](https://dpfacets2--fulfillmentqa.myvtex.com/main-category-1)

#### Screenshots or example usage:


https://github.com/user-attachments/assets/42d352e3-75f8-4159-8ca8-ebc13325d569


<!--- Add some images or gifs to showcase changes in behaviour or
layout. Example: before and after images -->

#### Describe alternatives you've considered, if any.

<!--- Optional -->

#### Related to / Depends on

<!--- Optional -->

#### How does this PR make you feel? [:link:](http://giphy.com/)

<!-- Go to http://giphy.com/ and pick a gif that represents how this PR
makes you feel -->

![](put .gif link here - can be found under "advanced" on giphy)

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Add `zIndex` as a property argument to control the drawer's z-index
+
 ## [0.17.2] - 2024-08-13
 
 ### Added

react/Drawer.tsx

@@ -64,6 +64,7 @@ interface Props {
   customPixelEventId?: PixelData['id']
   customPixelEventName?: PixelData['event']
   onVisibilityChanged?: (visible: boolean) => void
+  zIndex?: number
 }
 
 function menuReducer(state: MenuState, action: MenuAction) {
@@ -128,6 +129,7 @@ function Drawer(props: Props) {
     customPixelEventId,
     customPixelEventName,
     onVisibilityChanged,
+    zIndex = 999,
   } = props
   const handles = useCssHandles(CSS_HANDLES)
   const backdropMode = useResponsiveValue(backdropModeProp)
@@ -203,7 +205,7 @@ function Drawer(props: Props) {
         )}
       </div>
       <Portal>
-        <Overlay visible={overlayVisible} onClick={closeMenu} />
+        <Overlay visible={overlayVisible} onClick={closeMenu} zIndex={zIndex} />
         <Suspense fallback={<React.Fragment />}>
           <Swipable
             {...{
@@ -225,6 +227,7 @@ function Drawer(props: Props) {
               maxWidth,
               minWidth: 280,
               pointerEvents: isMenuOpen ? 'auto' : 'none',
+              zIndex,
             }}
           >
             <div

react/Overlay.tsx

@@ -4,12 +4,13 @@ import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 interface Props {
   visible: boolean
   onClick(event: React.MouseEvent | React.TouchEvent): void
+  zIndex?: number
 }
 
 const CSS_HANDLES = ['overlay'] as const
 
 const Overlay: RefForwardingComponent<HTMLDivElement, Props> = (
-  { visible, onClick }: Props,
+  { visible, onClick, zIndex = 999 }: Props,
   ref
 ) => {
   const handles = useCssHandles(CSS_HANDLES)
@@ -23,6 +24,7 @@ const Overlay: RefForwardingComponent<HTMLDivElement, Props> = (
       style={{
         opacity: visible ? 0.5 : 0,
         pointerEvents: visible ? 'auto' : 'none',
+        zIndex,
       }}
       className={`${applyModifiers(
         handles.overlay,