@lets-events/react 12.3.2 → 12.3.4

package/dist/index.mjs

@@ -143,7 +143,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment5 = REACT_FRAGMENT_TYPE;
+        var Fragment6 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -202,7 +202,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment5;
+        exports.Fragment = Fragment6;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -1236,6 +1236,9 @@ var {
     lineHeights,
     radii,
     space
+  },
+  media: {
+    md: "(max-width: 690px)"
   }
 });
 
@@ -8026,9 +8029,6 @@ function Calendar(_a) {
   ] })) });
 }
 
-// src/components/Drawer/index.tsx
-import { useRef as useRef4 } from "react";
-
 // src/components/Drawer/styledComponents.ts
 var DrawerOverlayStyled = styled("div", {
   position: "fixed",
@@ -8037,27 +8037,69 @@ var DrawerOverlayStyled = styled("div", {
   width: "100vw",
   height: "100vh",
   background: "rgba(0, 0, 0, 0.4)",
-  zIndex: 1e3
+  transition: "opacity 200ms ease",
+  variants: {
+    open: {
+      true: {
+        opacity: "1"
+      },
+      false: {
+        pointerEvents: "none",
+        opacity: "0"
+      }
+    }
+  }
+});
+var DrawerWrapper = styled("div", {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  height: "100vh",
+  overflow: "hidden",
+  variants: {
+    open: {
+      true: {},
+      false: {
+        pointerEvents: "none"
+      }
+    }
+  }
 });
 var DrawerContainerStyled = styled("div", {
   position: "absolute",
   top: 0,
   right: 0,
-  maxWidth: "calc(100% - 2rem)",
-  height: "100%",
+  height: "100vh",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",
   boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.2)",
-  padding: "1.5rem 0",
-  overflowY: "auto"
+  overflowY: "auto",
+  width: "100%",
+  boxSizing: "border-box",
+  "@md": {
+    minWidth: "100vw",
+    maxWidth: "100vw"
+  },
+  transition: "transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1)",
+  paddingBottom: "1.5rem",
+  variants: {
+    open: {
+      true: {
+        transform: "translateX(0) scale(1)"
+      },
+      false: {
+        transform: "translateX(110%) scale(0.98)"
+      }
+    }
+  }
 });
 var DrawerHeaderDiv = styled("div", {
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
   borderBottom: "1px solid $neutral300",
-  padding: "0 1.5rem 1rem",
+  padding: "1.5rem 1rem",
   position: "relative"
 });
 var DrawerHeaderTitle = styled("h2", {
@@ -8080,7 +8122,7 @@ var GoBackButtonStyled = styled("button", {
 });
 
 // src/components/Drawer/index.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function Drawer({
   isOpen,
   onClose,
@@ -8090,82 +8132,59 @@ function Drawer({
   children,
   goBackIcon,
   goBackAction,
-  zIndex
+  zIndex = 1e3
 }) {
-  if (!isOpen) return null;
-  const drawerContainerRef = useRef4(null);
-  useOnClickOutside(drawerContainerRef, (event) => {
-    var _a;
-    if (!event || !drawerContainerRef.current) {
-      return;
-    }
-    let target = event.target;
-    if (target.tagName === "HTML" || target.tagName === "BODY") {
-      if (event instanceof MouseEvent) {
-        const actualElement = document.elementFromPoint(
-          event.clientX,
-          event.clientY
-        );
-        if (actualElement) {
-          target = actualElement;
-        }
-      }
-    }
-    let currentElement = target;
-    let hierarchy = [];
-    while (currentElement && currentElement !== document.body) {
-      hierarchy.push({
-        tagName: currentElement.tagName,
-        className: currentElement.className,
-        id: currentElement.id,
-        attributes: Array.from(currentElement.attributes || []).map((attr) => ({
-          name: attr.name,
-          value: attr.value
-        }))
-      });
-      currentElement = currentElement.parentElement;
-    }
-    if ((_a = drawerContainerRef.current) == null ? void 0 : _a.contains(target)) {
-      return;
-    }
-    const isDropdownOpen = target.closest("[data-radix-popper-content-wrapper]") || target.closest('[role="dialog"]') || target.closest('[data-state="open"]') || target.closest("[data-radix-dropdown-menu-content]") || target.closest("[data-radix-dropdown-menu-root]") || target.closest("[data-radix-dropdown-menu-trigger]") || target.closest("[data-radix-dropdown-menu-portal]") || target.closest("[data-radix-dropdown-menu-item]") || target.closest("[data-radix-dropdown-menu-checkbox-item]") || target.closest("[data-radix-dropdown-menu-radio-item]") || target.closest("[data-radix-dropdown-menu-separator]") || target.closest("[data-radix-dropdown-menu-label]") || target.closest("[data-radix-dropdown-menu-group]") || target.closest("[data-radix-dropdown-menu-sub]") || target.closest("[data-radix-dropdown-menu-sub-trigger]") || target.closest("[data-radix-dropdown-menu-sub-content]") || target.closest("[data-radix-dropdown-menu-radio-group]");
-    const shouldPreventClose = isDropdownOpen || target.closest("[data-radix-dropdown-menu-root]") || target.closest("[data-radix-dropdown-menu-trigger]") || target.closest("[data-radix-dropdown-menu-content]") || target.closest("[data-radix-dropdown-menu-portal]") || target.closest("[data-radix-dropdown-menu-item]") || target.closest("[data-radix-dropdown-menu-checkbox-item]") || target.closest("[data-radix-dropdown-menu-radio-item]") || target.closest("[data-radix-dropdown-menu-separator]") || target.closest("[data-radix-dropdown-menu-label]") || target.closest("[data-radix-dropdown-menu-group]") || target.closest("[data-radix-dropdown-menu-sub]") || target.closest("[data-radix-dropdown-menu-sub-trigger]") || target.closest("[data-radix-dropdown-menu-sub-content]") || target.closest("[data-radix-dropdown-menu-radio-group]");
-    if (!shouldPreventClose) {
-      onClose == null ? void 0 : onClose();
-    }
-  });
-  return /* @__PURE__ */ jsx16(
-    DrawerOverlayStyled,
-    {
-      css: {
-        zIndex
-      },
-      children: /* @__PURE__ */ jsxs7(
-        DrawerContainerStyled,
-        {
-          ref: drawerContainerRef,
-          style: {
-            width: width != null ? width : "34.25rem",
-            backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
-          },
-          children: [
-            /* @__PURE__ */ jsxs7(DrawerHeaderDiv, { children: [
-              /* @__PURE__ */ jsxs7(Flex2, { gap: 8, align: "center", children: [
-                goBackIcon && goBackIcon && /* @__PURE__ */ jsx16(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
-                /* @__PURE__ */ jsx16(DrawerHeaderTitle, { children: title })
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx16(
+      DrawerOverlayStyled,
+      {
+        css: {
+          zIndex
+        },
+        onClick: onClose,
+        open: isOpen
+      }
+    ),
+    /* @__PURE__ */ jsx16(
+      DrawerWrapper,
+      {
+        css: {
+          zIndex: zIndex + 1,
+          width: width != null ? width : "34.25rem"
+        },
+        children: /* @__PURE__ */ jsxs7(
+          DrawerContainerStyled,
+          {
+            open: isOpen,
+            css: {
+              backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
+            },
+            children: [
+              /* @__PURE__ */ jsxs7(DrawerHeaderDiv, { children: [
+                /* @__PURE__ */ jsxs7(Flex2, { gap: 8, align: "center", children: [
+                  goBackIcon && goBackIcon && /* @__PURE__ */ jsx16(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
+                  /* @__PURE__ */ jsx16(DrawerHeaderTitle, { children: title })
+                ] }),
+                /* @__PURE__ */ jsx16(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx16(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
               ] }),
-              /* @__PURE__ */ jsx16(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx16(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
-            ] }),
-            children
-          ]
-        }
-      )
-    }
-  );
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null,
+              isOpen ? children : null
+            ]
+          }
+        )
+      }
+    )
+  ] });
 }
 
 // src/components/TimePicker.tsx
-import { useCallback, useRef as useRef5, useState as useState3 } from "react";
+import { useCallback, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
@@ -8293,7 +8312,7 @@ function TimePicker({
   const [rawHours, setRawHours] = useState3("00");
   const [rawMinutes, setRawMinutes] = useState3("00");
   const [isOpen, setIsOpen] = useState3(false);
-  const dropdownRef = useRef5(null);
+  const dropdownRef = useRef4(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
   const handleIncrement = useCallback(
     (type) => {
@@ -8495,7 +8514,7 @@ function TimePicker({
 
 // src/components/Alert.tsx
 import { Theme as Theme2, AlertDialog } from "@radix-ui/themes";
-import { Fragment, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var AlertDialogSimpleStyled = styled(AlertDialog.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -8609,10 +8628,10 @@ function Alert(_a) {
     "completAlert",
     "simpleAlert"
   ]);
-  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
     simpleAlert && /* @__PURE__ */ jsx18(Theme2, { children: /* @__PURE__ */ jsxs9(AlertDialog.Root, { children: [
       /* @__PURE__ */ jsx18(AlertDialog.Trigger, { children: trigger }),
-      /* @__PURE__ */ jsx18(Fragment, { children: /* @__PURE__ */ jsxs9(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
+      /* @__PURE__ */ jsx18(Fragment2, { children: /* @__PURE__ */ jsxs9(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
         /* @__PURE__ */ jsx18(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
         simpleAlert.cancel && /* @__PURE__ */ jsx18(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx18(Button, { variant: "text", children: /* @__PURE__ */ jsx18(Icon_default, { name: "close" }) }) })
       ] })) })
@@ -9006,13 +9025,23 @@ var CardStyled = styled(CardRadix, {
   }
 });
 function Card(_a) {
-  var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
-  return /* @__PURE__ */ jsx21(CardStyled, __spreadProps(__spreadValues({}, props), { children }));
+  var _b = _a, {
+    asChild,
+    children,
+    padding,
+    radius
+  } = _b, props = __objRest(_b, [
+    "asChild",
+    "children",
+    "padding",
+    "radius"
+  ]);
+  return /* @__PURE__ */ jsx21(CardStyled, __spreadProps(__spreadValues({}, props), { css: { padding, borderRadius: radius }, children }));
 }
 
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
-import React8, { useRef as useRef6, useState as useState4, useEffect as useEffect4 } from "react";
+import React8, { useRef as useRef5, useState as useState4, useEffect as useEffect4 } from "react";
 import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
@@ -9079,7 +9108,7 @@ var TextareaLimitIndicator = styled("div", {
 });
 var TextareaField = React8.forwardRef((_a, forwardedRef) => {
   var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
-  const inputRef = useRef6(null);
+  const inputRef = useRef5(null);
   const [remaining, setRemaining] = useState4(maxLength);
   useEffect4(() => {
     var _a2;
@@ -9377,7 +9406,7 @@ function Tooltip({
 }
 
 // src/components/MultiSelect/index.tsx
-import React9, { useCallback as useCallback2, useRef as useRef7, useState as useState7 } from "react";
+import React9, { useCallback as useCallback2, useRef as useRef6, useState as useState7 } from "react";
 import { DropdownMenu as DropdownMenu4, Theme as Theme3 } from "@radix-ui/themes";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
@@ -9554,7 +9583,7 @@ var MultiSelect = React9.forwardRef(
     selectedScroll = false
   }, fowardedRef) => {
     const [isOpen, setIsOpen] = useState7(false);
-    const triggerRef = useRef7(null);
+    const triggerRef = useRef6(null);
     const [allOptionsSelected, setAllOptionsSelected] = useState7(false);
     const labelByValue = useMemo2(() => {
       return options.reduce((prev, curr) => {
@@ -10661,14 +10690,14 @@ var brazilianStates = [
 ];
 
 // src/components/FormFields/AddressFormFields/StateFormField.tsx
-import { Fragment as Fragment2, jsx as jsx44 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx44 } from "react/jsx-runtime";
 function StateFormField({
   name,
   label,
   required,
   isBrazil
 }) {
-  return /* @__PURE__ */ jsx44(Fragment2, { children: isBrazil ? /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx44(Fragment3, { children: isBrazil ? /* @__PURE__ */ jsx44(
     SelectFormField,
     {
       name,
@@ -10682,7 +10711,7 @@ function StateFormField({
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
 import { useEffect as useEffect5, useState as useState8 } from "react";
 import { useFormContext as useFormContext5, Controller as Controller2 } from "react-hook-form";
-import { Fragment as Fragment3, jsx as jsx45 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx45 } from "react/jsx-runtime";
 function CityFormField({
   name,
   label,
@@ -10734,7 +10763,7 @@ function CityFormField({
     }
     fetchCities();
   }, [selectedState, isBrazil]);
-  return /* @__PURE__ */ jsx45(Fragment3, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx45(Fragment4, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ jsx45(
     Controller2,
     {
       name,
@@ -11086,7 +11115,7 @@ import { useController as useController3 } from "react-hook-form";
 import { useEffect as useEffect7, useState as useState10 } from "react";
 
 // src/components/RichEditor/QuillComponent.tsx
-import { useState as useState9, useRef as useRef8, useEffect as useEffect6, useCallback as useCallback4 } from "react";
+import { useState as useState9, useRef as useRef7, useEffect as useEffect6, useCallback as useCallback4 } from "react";
 import { useQuill } from "react-quilljs";
 
 // src/utils/uploadService.ts
@@ -12159,8 +12188,8 @@ var QuillComponent = ({
   const [videoUrl, setVideoUrl] = useState9("");
   const [showLinkModal, setShowLinkModal] = useState9(false);
   const [linkUrl, setLinkUrl] = useState9("");
-  const videoModalRef = useRef8(null);
-  const linkModalRef = useRef8(null);
+  const videoModalRef = useRef7(null);
+  const linkModalRef = useRef7(null);
   const { addToast, removeToast } = useToast();
   const formatHTML = (html) => {
     const parser = new DOMParser();
@@ -12565,7 +12594,7 @@ var RichEditor_default = RichEditor;
 
 // src/components/FormFields/RichEditorFormField.tsx
 import { useState as useState11 } from "react";
-import { Fragment as Fragment4, jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx53, jsxs as jsxs27 } from "react/jsx-runtime";
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12620,7 +12649,7 @@ var RichEditorFormField = (_a) => {
         }
       ),
       /* @__PURE__ */ jsx53(Badge, { color: "grey", size: "xs", children: caracterQuantity })
-    ] }) : /* @__PURE__ */ jsx53(Fragment4, { children: label && /* @__PURE__ */ jsx53(
+    ] }) : /* @__PURE__ */ jsx53(Fragment5, { children: label && /* @__PURE__ */ jsx53(
       FormLabel,
       {
         name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.3.2",
+  "version": "12.3.4",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Card.tsx

@@ -45,8 +45,20 @@ export const CardStyled = styled(CardRadix, {
 export type CardProps = ComponentProps<typeof CardStyled> & {
   children: React.ReactNode;
   as?: ElementType;
+  padding?: string;
+  radius?: string;
 };
 
-export function Card({ asChild, children, ...props }: CardProps) {
-  return <CardStyled {...props}>{children}</CardStyled>;
+export function Card({
+  asChild,
+  children,
+  padding,
+  radius,
+  ...props
+}: CardProps) {
+  return (
+    <CardStyled {...props} css={{ padding, borderRadius: radius }}>
+      {children}
+    </CardStyled>
+  );
 }

package/src/components/Drawer/index.tsx

@@ -8,6 +8,7 @@ import {
   DrawerHeaderTitle,
   DrawerHeaderCloseButton,
   GoBackButtonStyled,
+  DrawerWrapper,
 } from "./styledComponents";
 import { useOnClickOutside } from "../../hooks/useOnClickOutside";
 import { Flex } from "../Flex";
@@ -33,116 +34,52 @@ export function Drawer({
   children,
   goBackIcon,
   goBackAction,
-  zIndex,
+  zIndex = 1000,
 }: DrawerProps) {
-  if (!isOpen) return null;
-  const drawerContainerRef = useRef<HTMLDivElement>(null);
-
-  useOnClickOutside(drawerContainerRef, (event?: MouseEvent | TouchEvent) => {
-    if (!event || !drawerContainerRef.current) {
-      return;
-    }
-
-    let target = event.target as Element;
-
-    if (target.tagName === "HTML" || target.tagName === "BODY") {
-      if (event instanceof MouseEvent) {
-        const actualElement = document.elementFromPoint(
-          event.clientX,
-          event.clientY
-        );
-        if (actualElement) {
-          target = actualElement;
-        }
-      }
-    }
-
-    let currentElement: Element | null = target;
-    let hierarchy = [];
-    while (currentElement && currentElement !== document.body) {
-      hierarchy.push({
-        tagName: currentElement.tagName,
-        className: currentElement.className,
-        id: currentElement.id,
-        attributes: Array.from(currentElement.attributes || []).map((attr) => ({
-          name: attr.name,
-          value: attr.value,
-        })),
-      });
-      currentElement = currentElement.parentElement;
-    }
-
-    if (drawerContainerRef.current?.contains(target)) {
-      return;
-    }
-    const isDropdownOpen =
-      target.closest("[data-radix-popper-content-wrapper]") ||
-      target.closest('[role="dialog"]') ||
-      target.closest('[data-state="open"]') ||
-      target.closest("[data-radix-dropdown-menu-content]") ||
-      target.closest("[data-radix-dropdown-menu-root]") ||
-      target.closest("[data-radix-dropdown-menu-trigger]") ||
-      target.closest("[data-radix-dropdown-menu-portal]") ||
-      target.closest("[data-radix-dropdown-menu-item]") ||
-      target.closest("[data-radix-dropdown-menu-checkbox-item]") ||
-      target.closest("[data-radix-dropdown-menu-radio-item]") ||
-      target.closest("[data-radix-dropdown-menu-separator]") ||
-      target.closest("[data-radix-dropdown-menu-label]") ||
-      target.closest("[data-radix-dropdown-menu-group]") ||
-      target.closest("[data-radix-dropdown-menu-sub]") ||
-      target.closest("[data-radix-dropdown-menu-sub-trigger]") ||
-      target.closest("[data-radix-dropdown-menu-sub-content]") ||
-      target.closest("[data-radix-dropdown-menu-radio-group]");
-
-    const shouldPreventClose =
-      isDropdownOpen ||
-      target.closest("[data-radix-dropdown-menu-root]") ||
-      target.closest("[data-radix-dropdown-menu-trigger]") ||
-      target.closest("[data-radix-dropdown-menu-content]") ||
-      target.closest("[data-radix-dropdown-menu-portal]") ||
-      target.closest("[data-radix-dropdown-menu-item]") ||
-      target.closest("[data-radix-dropdown-menu-checkbox-item]") ||
-      target.closest("[data-radix-dropdown-menu-radio-item]") ||
-      target.closest("[data-radix-dropdown-menu-separator]") ||
-      target.closest("[data-radix-dropdown-menu-label]") ||
-      target.closest("[data-radix-dropdown-menu-group]") ||
-      target.closest("[data-radix-dropdown-menu-sub]") ||
-      target.closest("[data-radix-dropdown-menu-sub-trigger]") ||
-      target.closest("[data-radix-dropdown-menu-sub-content]") ||
-      target.closest("[data-radix-dropdown-menu-radio-group]");
-
-    if (!shouldPreventClose) {
-      onClose?.();
-    }
-  });
   return (
-    <DrawerOverlayStyled
-      css={{
-        zIndex,
-      }}
-    >
-      <DrawerContainerStyled
-        ref={drawerContainerRef}
-        style={{
+    <>
+      <DrawerOverlayStyled
+        css={{
+          zIndex,
+        }}
+        onClick={onClose}
+        open={isOpen}
+      />
+      <DrawerWrapper
+        css={{
+          zIndex: zIndex + 1,
           width: width ?? "34.25rem",
-          backgroundColor: colors[backgroundColor ?? "neutral50"],
         }}
       >
-        <DrawerHeaderDiv>
-          <Flex gap={8} align="center">
-            {goBackIcon && goBackIcon && (
-              <GoBackButtonStyled type="button" onClick={goBackAction}>
-                {goBackIcon}
-              </GoBackButtonStyled>
-            )}
-            <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
-          </Flex>
-          <DrawerHeaderCloseButton onClick={onClose}>
-            <Icon size={"xl"} color="$dark600" name="xmark" />
-          </DrawerHeaderCloseButton>
-        </DrawerHeaderDiv>
-        {children}
-      </DrawerContainerStyled>
-    </DrawerOverlayStyled>
+        <DrawerContainerStyled
+          open={isOpen}
+          css={{
+            backgroundColor: colors[backgroundColor ?? "neutral50"],
+          }}
+        >
+          <DrawerHeaderDiv>
+            <Flex gap={8} align="center">
+              {goBackIcon && goBackIcon && (
+                <GoBackButtonStyled type="button" onClick={goBackAction}>
+                  {goBackIcon}
+                </GoBackButtonStyled>
+              )}
+              <DrawerHeaderTitle>{title}</DrawerHeaderTitle>
+            </Flex>
+            <DrawerHeaderCloseButton onClick={onClose}>
+              <Icon size={"xl"} color="$dark600" name="xmark" />
+            </DrawerHeaderCloseButton>
+          </DrawerHeaderDiv>
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+          {isOpen ? children : null}
+        </DrawerContainerStyled>
+      </DrawerWrapper>
+    </>
   );
 }