@lets-events/react 12.3.1 → 12.3.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@12.3.1 build
+> @lets-events/react@12.3.3 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,11 +9,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist\index.mjs 381.68 KB
-ESM ⚡️ Build success in 235ms
-CJS dist\index.js 395.71 KB
-CJS ⚡️ Build success in 236ms
+ESM dist\index.mjs 378.86 KB
+ESM ⚡️ Build success in 225ms
+CJS dist\index.js 392.90 KB
+CJS ⚡️ Build success in 226ms
 DTS Build start
-DTS ⚡️ Build success in 4578ms
-DTS dist\index.d.mts 398.68 KB
-DTS dist\index.d.ts  398.68 KB
+DTS ⚡️ Build success in 4529ms
+DTS dist\index.d.mts 398.74 KB
+DTS dist\index.d.ts  398.74 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.3.3
+
+### Patch Changes
+
+- fix: drawer click outside
+
+## 12.3.2
+
+### Patch Changes
+
+- fix button loading state
+
 ## 12.3.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -11428,8 +11428,10 @@ declare const CardStyled: _stitches_react_types_styled_component.StyledComponent
 type CardProps = ComponentProps<typeof CardStyled> & {
     children: React__default.ReactNode;
     as?: ElementType;
+    padding?: string;
+    radius?: string;
 };
-declare function Card({ asChild, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ asChild, children, padding, radius, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledComponent<React__default.ForwardRefExoticComponent<_radix_ui_themes.TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;

package/dist/index.d.ts

@@ -11428,8 +11428,10 @@ declare const CardStyled: _stitches_react_types_styled_component.StyledComponent
 type CardProps = ComponentProps<typeof CardStyled> & {
     children: React__default.ReactNode;
     as?: ElementType;
+    padding?: string;
+    radius?: string;
 };
-declare function Card({ asChild, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ asChild, children, padding, radius, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 declare const TextareaFieldStyle: _stitches_react_types_styled_component.StyledComponent<React__default.ForwardRefExoticComponent<_radix_ui_themes.TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>>, {
     typography?: "tooltip" | "displayLarge" | "displayMedium" | "displaySmall" | "headline1" | "headline2" | "headline3" | "headline4" | "headline5" | "headline6" | "headline7" | "headline8" | "bodyXL" | "bodyL" | "bodyM" | "bodyS" | "bodyXS" | "bodyXXS" | "badgeLarge" | "badgeMedium" | "badgeSmall" | "badgeExtraSmall" | "popoversRegular" | "captionLarge" | "captionMedium" | "captionSmall" | "buttonLarge" | "buttonMedium" | "buttonSmall" | "buttonExtraSmall" | "labelLarge" | "labelMedium" | "labelSmall" | "labelExtraSmall" | undefined;

package/dist/index.js

@@ -149,7 +149,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;
@@ -208,7 +208,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment5;
+        exports2.Fragment = Fragment6;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -1877,7 +1877,7 @@ function Button(_a) {
         return "md";
     }
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonStyled, __spreadProps(__spreadValues({ as: Component, disabled: disabled || loading }, props), { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpinningDiv, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "circle-notch", size: spinnerSize }) }) : children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpinningDiv, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "circle-notch", size: spinnerSize }) }) : children }));
 }
 
 // src/components/ButtonGroup.tsx
@@ -8138,9 +8138,6 @@ function Calendar(_a) {
   ] })) });
 }
 
-// src/components/Drawer/index.tsx
-var import_react9 = require("react");
-
 // src/components/Drawer/styledComponents.ts
 var DrawerOverlayStyled = styled("div", {
   position: "fixed",
@@ -8148,8 +8145,7 @@ var DrawerOverlayStyled = styled("div", {
   right: 0,
   width: "100vw",
   height: "100vh",
-  background: "rgba(0, 0, 0, 0.4)",
-  zIndex: 1e3
+  background: "rgba(0, 0, 0, 0.4)"
 });
 var DrawerContainerStyled = styled("div", {
   position: "absolute",
@@ -8202,82 +8198,44 @@ function Drawer({
   children,
   goBackIcon,
   goBackAction,
-  zIndex
+  zIndex = 1e3
 }) {
   if (!isOpen) return null;
-  const drawerContainerRef = (0, import_react9.useRef)(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__ */ (0, import_jsx_runtime16.jsx)(
-    DrawerOverlayStyled,
-    {
-      css: {
-        zIndex
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        DrawerContainerStyled,
-        {
-          ref: drawerContainerRef,
-          style: {
-            width: width != null ? width : "34.25rem",
-            backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
-          },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DrawerHeaderDiv, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex2, { gap: 8, align: "center", children: [
-                goBackIcon && goBackIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderTitle, { children: title })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      DrawerOverlayStyled,
+      {
+        css: {
+          zIndex
+        },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      DrawerContainerStyled,
+      {
+        style: {
+          width: width != null ? width : "34.25rem",
+          backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"],
+          zIndex: zIndex + 1
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(DrawerHeaderDiv, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex2, { gap: 8, align: "center", children: [
+              goBackIcon && goBackIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderTitle, { children: title })
             ] }),
-            children
-          ]
-        }
-      )
-    }
-  );
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
+          ] }),
+          children
+        ]
+      }
+    )
+  ] });
 }
 
 // src/components/TimePicker.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var TimePickerStyled = styled("div", {
   position: "relative",
@@ -8400,14 +8358,14 @@ function TimePicker({
   hasError,
   expand = false
 }) {
-  const [hours, setHours] = (0, import_react10.useState)("00");
-  const [minutes, setMinutes] = (0, import_react10.useState)("00");
-  const [rawHours, setRawHours] = (0, import_react10.useState)("00");
-  const [rawMinutes, setRawMinutes] = (0, import_react10.useState)("00");
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const dropdownRef = (0, import_react10.useRef)(null);
+  const [hours, setHours] = (0, import_react9.useState)("00");
+  const [minutes, setMinutes] = (0, import_react9.useState)("00");
+  const [rawHours, setRawHours] = (0, import_react9.useState)("00");
+  const [rawMinutes, setRawMinutes] = (0, import_react9.useState)("00");
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+  const dropdownRef = (0, import_react9.useRef)(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
-  const handleIncrement = (0, import_react10.useCallback)(
+  const handleIncrement = (0, import_react9.useCallback)(
     (type) => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
@@ -8421,7 +8379,7 @@ function TimePicker({
     },
     [hours, minutes]
   );
-  const handleDecrement = (0, import_react10.useCallback)(
+  const handleDecrement = (0, import_react9.useCallback)(
     (type) => {
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
@@ -8945,7 +8903,7 @@ function Switch(props) {
 }
 
 // src/components/Step.tsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_themes15 = require("@radix-ui/themes");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var StepStyled = styled("div", {
@@ -9061,9 +9019,9 @@ function StepList(_a) {
     "children",
     "currentStep"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children: import_react11.default.Children.map(children, (child) => {
-    if (import_react11.default.isValidElement(child) && child.type === StepTrigger) {
-      return import_react11.default.cloneElement(child, { currentStep });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children: import_react10.default.Children.map(children, (child) => {
+    if (import_react10.default.isValidElement(child) && child.type === StepTrigger) {
+      return import_react10.default.cloneElement(child, { currentStep });
     }
     return child;
   }) }));
@@ -9118,13 +9076,23 @@ var CardStyled = styled(import_themes16.Card, {
   }
 });
 function Card(_a) {
-  var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardStyled, __spreadProps(__spreadValues({}, props), { children }));
+  var _b = _a, {
+    asChild,
+    children,
+    padding,
+    radius
+  } = _b, props = __objRest(_b, [
+    "asChild",
+    "children",
+    "padding",
+    "radius"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CardStyled, __spreadProps(__spreadValues({}, props), { css: { padding, borderRadius: radius }, children }));
 }
 
 // src/components/TextareaField.tsx
 var import_themes17 = require("@radix-ui/themes");
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var TextareaFieldStyle = styled(import_themes17.TextArea, {
   display: "flex",
@@ -9189,11 +9157,11 @@ var TextareaLimitIndicator = styled("div", {
     padding: "$4"
   }
 });
-var TextareaField = import_react12.default.forwardRef((_a, forwardedRef) => {
+var TextareaField = import_react11.default.forwardRef((_a, forwardedRef) => {
   var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
-  const inputRef = (0, import_react12.useRef)(null);
-  const [remaining, setRemaining] = (0, import_react12.useState)(maxLength);
-  (0, import_react12.useEffect)(() => {
+  const inputRef = (0, import_react11.useRef)(null);
+  const [remaining, setRemaining] = (0, import_react11.useState)(maxLength);
+  (0, import_react11.useEffect)(() => {
     var _a2;
     if (maxLength && inputRef.current) {
       setRemaining(maxLength - ((_a2 = inputRef.current.value.length) != null ? _a2 : 0));
@@ -9228,12 +9196,12 @@ var TextareaField = import_react12.default.forwardRef((_a, forwardedRef) => {
 });
 
 // src/components/Toast/components/ToastItem.tsx
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/components/Toast/styles/index.ts
-var import_react13 = require("@stitches/react");
+var import_react12 = require("@stitches/react");
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
-var slideIn = (0, import_react13.keyframes)({
+var slideIn = (0, import_react12.keyframes)({
   from: {
     transform: "translateX(calc(100% + 25px))",
     opacity: 0
@@ -9243,7 +9211,7 @@ var slideIn = (0, import_react13.keyframes)({
     opacity: 1
   }
 });
-var slideOut = (0, import_react13.keyframes)({
+var slideOut = (0, import_react12.keyframes)({
   from: {
     transform: "translateX(0)",
     opacity: 1
@@ -9253,7 +9221,7 @@ var slideOut = (0, import_react13.keyframes)({
     opacity: 0
   }
 });
-var swipeOut = (0, import_react13.keyframes)({
+var swipeOut = (0, import_react12.keyframes)({
   from: {
     transform: "translateX(var(--radix-toast-swipe-end-x))",
     opacity: 1
@@ -9359,7 +9327,7 @@ function ToastItem({
   toast,
   onRemove
 }) {
-  const [open, setOpen] = (0, import_react14.useState)(true);
+  const [open, setOpen] = (0, import_react13.useState)(true);
   const handleOpenChange = (open2) => {
     setOpen(open2);
     if (!open2) {
@@ -9383,17 +9351,17 @@ function ToastItem({
 }
 
 // src/components/Toast/components/ToastProvider.tsx
-var import_react15 = require("react");
+var import_react14 = require("react");
 var ToastPrimitive2 = __toESM(require("@radix-ui/react-toast"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var ToastContext = (0, import_react15.createContext)(null);
+var ToastContext = (0, import_react14.createContext)(null);
 function ToastProvider({
   children,
   defaultDuration = 5e3,
   maxToasts = 5,
   swipeDirection = "right"
 }) {
-  const [toasts, setToasts] = (0, import_react15.useState)([]);
+  const [toasts, setToasts] = (0, import_react14.useState)([]);
   const addToast = (toastData) => {
     const id = Math.random().toString(36).substr(2, 9);
     const newToast = __spreadProps(__spreadValues({
@@ -9429,9 +9397,9 @@ function ToastProvider({
 }
 
 // src/components/Toast/hooks/useToast.ts
-var import_react16 = require("react");
+var import_react15 = require("react");
 var useToast = () => {
-  const context = (0, import_react16.useContext)(ToastContext);
+  const context = (0, import_react15.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast deve ser usado dentro de um ToastProvider");
   }
@@ -9489,11 +9457,11 @@ function Tooltip({
 }
 
 // src/components/MultiSelect/index.tsx
-var import_react17 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_themes19 = require("@radix-ui/themes");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
-var import_react18 = require("react");
+var import_react17 = require("react");
 
 // src/components/MultiSelect/styledComponents.ts
 var import_themes18 = require("@radix-ui/themes");
@@ -9643,7 +9611,7 @@ var ButtonSelectAllStyled = styled("button", {
 
 // src/components/MultiSelect/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var MultiSelect = import_react17.default.forwardRef(
+var MultiSelect = import_react16.default.forwardRef(
   ({
     placeholder,
     value: selectedValues = [],
@@ -9661,24 +9629,24 @@ var MultiSelect = import_react17.default.forwardRef(
     selectedAllText,
     selectedScroll = false
   }, fowardedRef) => {
-    const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
-    const triggerRef = (0, import_react17.useRef)(null);
-    const [allOptionsSelected, setAllOptionsSelected] = (0, import_react17.useState)(false);
-    const labelByValue = (0, import_react18.useMemo)(() => {
+    const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
+    const triggerRef = (0, import_react16.useRef)(null);
+    const [allOptionsSelected, setAllOptionsSelected] = (0, import_react16.useState)(false);
+    const labelByValue = (0, import_react17.useMemo)(() => {
       return options.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
           [curr.value]: curr.label
         });
       }, {});
     }, [options]);
-    const handleRemove = (0, import_react17.useCallback)(
+    const handleRemove = (0, import_react16.useCallback)(
       (value) => {
         const newValue = selectedValues.filter((v) => v !== value);
         onValueChange == null ? void 0 : onValueChange(newValue);
       },
       [selectedValues, onValueChange]
     );
-    const handleSelectAll = (0, import_react17.useCallback)(
+    const handleSelectAll = (0, import_react16.useCallback)(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -9693,7 +9661,7 @@ var MultiSelect = import_react17.default.forwardRef(
       },
       [selectedValues, options, onValueChange]
     );
-    const text = (0, import_react18.useMemo)(() => {
+    const text = (0, import_react17.useMemo)(() => {
       if (selectedValues.length > 0 && singleSelect) {
         const value = selectedValues[0];
         return labelByValue[value];
@@ -9704,7 +9672,7 @@ var MultiSelect = import_react17.default.forwardRef(
       onValueChange == null ? void 0 : onValueChange([v]);
       setIsOpen(false);
     };
-    const handleToggle = (0, import_react17.useCallback)(
+    const handleToggle = (0, import_react16.useCallback)(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -10143,7 +10111,7 @@ var TextAreaFormField = (_a) => {
 
 // src/components/FormFields/TextFormField.tsx
 var import_react_hook_form2 = require("react-hook-form");
-var import_react19 = require("react");
+var import_react18 = require("react");
 var import_mask2 = require("@react-input/mask");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var TextFormField = (_a) => {
@@ -10166,7 +10134,7 @@ var TextFormField = (_a) => {
     "onChange",
     "valueFormatter"
   ]);
-  const handleValidate = (0, import_react19.useCallback)(
+  const handleValidate = (0, import_react18.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || !required && value.trim() === "")
@@ -10188,7 +10156,7 @@ var TextFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: formValue, onChange: formChange } = field;
-  const formattedValue = (0, import_react19.useMemo)(() => {
+  const formattedValue = (0, import_react18.useMemo)(() => {
     let value = formValue;
     if (valueFormatter) value = valueFormatter.format(value);
     if (mask) value = (0, import_mask2.format)(value != null ? value : "", mask);
@@ -10783,7 +10751,7 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-var import_react20 = require("react");
+var import_react19 = require("react");
 var import_react_hook_form7 = require("react-hook-form");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function CityFormField({
@@ -10796,9 +10764,9 @@ function CityFormField({
 }) {
   const { control, watch } = (0, import_react_hook_form7.useFormContext)();
   const selectedState = watch(stateName);
-  const [cities, setCities] = (0, import_react20.useState)([]);
-  const [loading, setLoading] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
+  const [cities, setCities] = (0, import_react19.useState)([]);
+  const [loading, setLoading] = (0, import_react19.useState)(false);
+  (0, import_react19.useEffect)(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -11186,10 +11154,10 @@ var EmailFormField = ({
 var import_react_hook_form12 = require("react-hook-form");
 
 // src/components/RichEditor/RichEditor.tsx
-var import_react22 = require("react");
+var import_react21 = require("react");
 
 // src/components/RichEditor/QuillComponent.tsx
-var import_react21 = require("react");
+var import_react20 = require("react");
 var import_react_quilljs = require("react-quilljs");
 
 // src/utils/uploadService.ts
@@ -12258,12 +12226,12 @@ var QuillComponent = ({
   onCharacterCountChange,
   maxLength
 }) => {
-  const [showVideoModal, setShowVideoModal] = (0, import_react21.useState)(false);
-  const [videoUrl, setVideoUrl] = (0, import_react21.useState)("");
-  const [showLinkModal, setShowLinkModal] = (0, import_react21.useState)(false);
-  const [linkUrl, setLinkUrl] = (0, import_react21.useState)("");
-  const videoModalRef = (0, import_react21.useRef)(null);
-  const linkModalRef = (0, import_react21.useRef)(null);
+  const [showVideoModal, setShowVideoModal] = (0, import_react20.useState)(false);
+  const [videoUrl, setVideoUrl] = (0, import_react20.useState)("");
+  const [showLinkModal, setShowLinkModal] = (0, import_react20.useState)(false);
+  const [linkUrl, setLinkUrl] = (0, import_react20.useState)("");
+  const videoModalRef = (0, import_react20.useRef)(null);
+  const linkModalRef = (0, import_react20.useRef)(null);
   const { addToast, removeToast } = useToast();
   const formatHTML = (html) => {
     const parser = new DOMParser();
@@ -12327,7 +12295,7 @@ var QuillComponent = ({
     placeholder,
     readOnly: disabled
   });
-  const handleImageUpload = (0, import_react21.useCallback)(
+  const handleImageUpload = (0, import_react20.useCallback)(
     (file) => __async(null, null, function* () {
       if (disabled || !quill || !uploadConfig) return;
       try {
@@ -12359,7 +12327,7 @@ var QuillComponent = ({
     }),
     [disabled, quill, addToast, removeToast, uploadConfig, onChange]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (quill && value) {
       const currentContent = quill.root.innerHTML;
       if (currentContent !== value) {
@@ -12373,7 +12341,7 @@ var QuillComponent = ({
       }
     }
   }, [quill, value]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
         if (source === "user") {
@@ -12428,7 +12396,7 @@ var QuillComponent = ({
       }, 2e3);
     }
   }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (quill) {
       quill.enable(!disabled);
       if (!disabled) {
@@ -12439,11 +12407,11 @@ var QuillComponent = ({
       }
     }
   }, [quill, disabled]);
-  const handleLinkCancel = (0, import_react21.useCallback)(() => {
+  const handleLinkCancel = (0, import_react20.useCallback)(() => {
     setLinkUrl("");
     setShowLinkModal(false);
   }, []);
-  const handleLinkSubmit = (0, import_react21.useCallback)(() => {
+  const handleLinkSubmit = (0, import_react20.useCallback)(() => {
     if (!linkUrl.trim() || !quill) return;
     const url = linkUrl.trim();
     const selection = quill.getSelection();
@@ -12458,11 +12426,11 @@ var QuillComponent = ({
     setLinkUrl("");
     setShowLinkModal(false);
   }, [linkUrl, quill]);
-  const handleVideoCancel = (0, import_react21.useCallback)(() => {
+  const handleVideoCancel = (0, import_react20.useCallback)(() => {
     setVideoUrl("");
     setShowVideoModal(false);
   }, []);
-  const handleVideoSubmit = (0, import_react21.useCallback)(() => {
+  const handleVideoSubmit = (0, import_react20.useCallback)(() => {
     var _a, _b;
     if (!videoUrl.trim() || !quill) return;
     let processedUrl = videoUrl.trim();
@@ -12495,7 +12463,7 @@ var QuillComponent = ({
     setVideoUrl("");
     setShowVideoModal(false);
   }, [videoUrl, quill]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
         handleVideoCancel();
@@ -12657,8 +12625,8 @@ var QuillComponent_default = QuillComponent;
 // src/components/RichEditor/RichEditor.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var RichEditor = (props) => {
-  const [isClient, setIsClient] = (0, import_react22.useState)(false);
-  (0, import_react22.useEffect)(() => {
+  const [isClient, setIsClient] = (0, import_react21.useState)(false);
+  (0, import_react21.useEffect)(() => {
     setIsClient(typeof window !== "undefined");
   }, []);
   if (!isClient) return null;
@@ -12667,7 +12635,7 @@ var RichEditor = (props) => {
 var RichEditor_default = RichEditor;
 
 // src/components/FormFields/RichEditorFormField.tsx
-var import_react23 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var RichEditorFormField = (_a) => {
   var _b = _a, {
@@ -12702,7 +12670,7 @@ var RichEditorFormField = (_a) => {
     },
     defaultValue: ""
   });
-  const [caracterQuantity, setCaracterQuantity] = (0, import_react23.useState)(maxLength);
+  const [caracterQuantity, setCaracterQuantity] = (0, import_react22.useState)(maxLength);
   const handleCharacterCountChange = (count) => {
     if (maxLength !== void 0) {
       setCaracterQuantity(Math.max(0, maxLength - count));
@@ -12750,7 +12718,7 @@ var RichEditorFormField = (_a) => {
 
 // src/components/FormFields/CalendarFormField.tsx
 var import_react_hook_form13 = require("react-hook-form");
-var import_react24 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var CalendarFormField = (_a) => {
   var _b = _a, {
@@ -12774,7 +12742,7 @@ var CalendarFormField = (_a) => {
     "allowPastDates",
     "maxYearsFromNow"
   ]);
-  const handleValidate = (0, import_react24.useCallback)(
+  const handleValidate = (0, import_react23.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null) {
@@ -12829,7 +12797,7 @@ var CalendarFormField = (_a) => {
 
 // src/components/FormFields/TimePickerFormField.tsx
 var import_react_hook_form14 = require("react-hook-form");
-var import_react25 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var TimePickerFormField = (_a) => {
   var _b = _a, {
@@ -12847,7 +12815,7 @@ var TimePickerFormField = (_a) => {
     "validationErrorMessage",
     "rules"
   ]);
-  const handleValidate = (0, import_react25.useCallback)(
+  const handleValidate = (0, import_react24.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || value === "") {
@@ -12899,11 +12867,11 @@ var TimePickerFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-var import_react26 = require("react");
+var import_react25 = require("react");
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = (0, import_react26.useState)(false);
-  const [progress, setProgress] = (0, import_react26.useState)(null);
-  const [error, setError] = (0, import_react26.useState)(null);
+  const [isUploading, setIsUploading] = (0, import_react25.useState)(false);
+  const [progress, setProgress] = (0, import_react25.useState)(null);
+  const [error, setError] = (0, import_react25.useState)(null);
   const {
     onSuccess,
     onError,
@@ -12913,7 +12881,7 @@ var useImageUpload = (options) => {
     allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
     uploadConfig
   } = options;
-  const validateFile = (0, import_react26.useCallback)(
+  const validateFile = (0, import_react25.useCallback)(
     (file) => {
       if (!allowedTypes.includes(file.type)) {
         const errorMsg = "Tipo de arquivo n\xE3o suportado";
@@ -12931,7 +12899,7 @@ var useImageUpload = (options) => {
     },
     [allowedTypes, maxFileSize, onError]
   );
-  const uploadFile = (0, import_react26.useCallback)(
+  const uploadFile = (0, import_react25.useCallback)(
     (file) => __async(null, null, function* () {
       if (!validateFile(file)) {
         return null;
@@ -12984,7 +12952,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = (0, import_react26.useCallback)(() => {
+  const reset = (0, import_react25.useCallback)(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);

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;
@@ -1761,7 +1761,7 @@ function Button(_a) {
         return "md";
     }
   }, [size]);
-  return /* @__PURE__ */ jsx3(ButtonStyled, __spreadProps(__spreadValues({ as: Component, disabled: disabled || loading }, props), { children: loading ? /* @__PURE__ */ jsx3(SpinningDiv, { children: /* @__PURE__ */ jsx3(Icon_default, { name: "circle-notch", size: spinnerSize }) }) : children }));
+  return /* @__PURE__ */ jsx3(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: loading ? /* @__PURE__ */ jsx3(SpinningDiv, { children: /* @__PURE__ */ jsx3(Icon_default, { name: "circle-notch", size: spinnerSize }) }) : children }));
 }
 
 // src/components/ButtonGroup.tsx
@@ -8026,9 +8026,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",
@@ -8036,8 +8033,7 @@ var DrawerOverlayStyled = styled("div", {
   right: 0,
   width: "100vw",
   height: "100vh",
-  background: "rgba(0, 0, 0, 0.4)",
-  zIndex: 1e3
+  background: "rgba(0, 0, 0, 0.4)"
 });
 var DrawerContainerStyled = styled("div", {
   position: "absolute",
@@ -8080,7 +8076,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 +8086,44 @@ 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 })
-              ] }),
-              /* @__PURE__ */ jsx16(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx16(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx16(
+      DrawerOverlayStyled,
+      {
+        css: {
+          zIndex
+        },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs7(
+      DrawerContainerStyled,
+      {
+        style: {
+          width: width != null ? width : "34.25rem",
+          backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"],
+          zIndex: zIndex + 1
+        },
+        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 })
             ] }),
-            children
-          ]
-        }
-      )
-    }
-  );
+            /* @__PURE__ */ jsx16(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx16(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
+          ] }),
+          children
+        ]
+      }
+    )
+  ] });
 }
 
 // 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 +8251,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 +8453,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 +8567,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 +8964,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 +9047,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 +9345,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 +9522,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 +10629,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 +10650,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 +10702,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 +11054,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 +12127,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 +12533,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 +12588,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.1",
+  "version": "12.3.3",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/Button/index.tsx

@@ -32,7 +32,7 @@ export function Button({ asChild, children, loading, ...props }: ButtonProps) {
   }, [size]);
 
   return (
-    <ButtonStyled as={Component} disabled={disabled || loading} {...props}>
+    <ButtonStyled as={Component} {...props} disabled={disabled || loading}>
       {loading ? (
         <SpinningDiv>
           <Icon name="circle-notch" size={spinnerSize} />

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

@@ -33,99 +33,23 @@ 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,
-      }}
-    >
+    <>
+      <DrawerOverlayStyled
+        css={{
+          zIndex,
+        }}
+        onClick={onClose}
+      />
       <DrawerContainerStyled
-        ref={drawerContainerRef}
         style={{
           width: width ?? "34.25rem",
           backgroundColor: colors[backgroundColor ?? "neutral50"],
+          zIndex: zIndex + 1,
         }}
       >
         <DrawerHeaderDiv>
@@ -143,6 +67,6 @@ export function Drawer({
         </DrawerHeaderDiv>
         {children}
       </DrawerContainerStyled>
-    </DrawerOverlayStyled>
+    </>
   );
 }

package/src/components/Drawer/styledComponents.ts

@@ -7,7 +7,6 @@ export const DrawerOverlayStyled = styled("div", {
   width: "100vw",
   height: "100vh",
   background: "rgba(0, 0, 0, 0.4)",
-  zIndex: 1000,
 });
 
 export const DrawerContainerStyled = styled("div", {