@lets-events/react 12.11.2 → 12.11.4

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 
 
-> @lets-events/react@12.11.2 build
+> @lets-events/react@12.11.4 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist/index.js 438.04 KB
-CJS ⚡️ Build success in 304ms
-ESM dist/index.mjs 421.97 KB
-ESM ⚡️ Build success in 306ms
+CJS dist/index.js 439.40 KB
+CJS ⚡️ Build success in 524ms
+ESM dist/index.mjs 423.28 KB
+ESM ⚡️ Build success in 525ms
 DTS Build start
-DTS ⚡️ Build success in 6512ms
+DTS ⚡️ Build success in 11253ms
 DTS dist/index.d.mts 411.19 KB
 DTS dist/index.d.ts  411.19 KB
 ⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.11.4
+
+### Patch Changes
+
+- Drawer height
+
+## 12.11.3
+
+### Patch Changes
+
+- mobile calendar
+
 ## 12.11.2
 
 ### Patch Changes

package/dist/index.js

@@ -7936,6 +7936,27 @@ var CalendarStyled = styled("div", {
     }
   }
 });
+var calendarMobileCentered = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  right: "auto",
+  bottom: "auto",
+  transform: "translate(-50%, -50%)",
+  maxWidth: "calc(100vw - 32px)",
+  maxHeight: "90vh",
+  overflowY: "auto"
+};
+var CalendarOverlayStyled = styled("div", {
+  display: "none",
+  "@media (max-width: 748px)": {
+    display: "block",
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999998
+  }
+});
 var CalendarButtonStyled = styled("button", {
   backgroundColor: "transparent",
   border: "none",
@@ -7969,23 +7990,28 @@ var CalendarContentStyled = styled("div", {
   position: "absolute",
   backgroundColor: "$neutral50",
   zIndex: "999999",
+  "@media (max-width: 748px)": calendarMobileCentered,
   variants: {
     position: {
       top: {
         bottom: "110%",
-        left: "0"
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       bottom: {
         top: "110%",
-        left: "0"
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       "top-right": {
         bottom: "110%",
-        right: "0"
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       "bottom-right": {
         top: "110%",
-        right: "0"
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       }
     }
   }
@@ -8463,60 +8489,63 @@ function Calendar(_a) {
       console.warn("Data inv\xE1lida inserida no input:", masked);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      CalendarButtonStyled,
-      {
-        expand,
-        type: "button",
-        onClick: () => setShowCalendar((prev) => !prev),
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-          TextField,
-          {
-            placeholder: "00/00/0000",
-            type: "text",
-            value: inputValue,
-            onChange: handleInputChange,
-            inputMode: "numeric",
-            textAlign: "right",
-            color: hasError ? "error" : "default",
-            disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
-          }
-        )
-      }
-    ),
-    showContainer && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DayPickerWrapperStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        import_react_day_picker.DayPicker,
-        {
-          mode: "single",
-          captionLayout: calendarLayout,
-          selected,
-          onSelect: setSelected,
-          required: true,
-          locale: ptBR,
-          disabled: disabledDays.length > 0 ? disabledDays : void 0,
-          startMonth: allowPastDates ? void 0 : today,
-          endMonth: resolvedMaxDate
-        }
-      ) }) }),
-      action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
+    showContainer && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarOverlayStyled, { onClick: () => setShowCalendar(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        CalendarButtonStyled,
         {
-          variant: "text",
-          color: "brand",
+          expand,
           type: "button",
-          onClick: () => {
-            setShowCalendar(false);
-          },
-          size: "medium",
-          fontWeight: "medium",
-          children: actionText != null ? actionText : "Aplicar"
+          onClick: () => setShowCalendar((prev) => !prev),
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            TextField,
+            {
+              placeholder: "00/00/0000",
+              type: "text",
+              value: inputValue,
+              onChange: handleInputChange,
+              inputMode: "numeric",
+              textAlign: "right",
+              color: hasError ? "error" : "default",
+              disabled,
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
+            }
+          )
         }
-      ) })
-    ] })
-  ] })) });
+      ),
+      showContainer && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(CalendarContentStyled, { position, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DayPickerWrapperStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          import_react_day_picker.DayPicker,
+          {
+            mode: "single",
+            captionLayout: calendarLayout,
+            selected,
+            onSelect: setSelected,
+            required: true,
+            locale: ptBR,
+            disabled: disabledDays.length > 0 ? disabledDays : void 0,
+            startMonth: allowPastDates ? void 0 : today,
+            endMonth: resolvedMaxDate
+          }
+        ) }) }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          Button,
+          {
+            variant: "text",
+            color: "brand",
+            type: "button",
+            onClick: () => {
+              setShowCalendar(false);
+            },
+            size: "medium",
+            fontWeight: "medium",
+            children: actionText != null ? actionText : "Aplicar"
+          }
+        ) })
+      ] })
+    ] }))
+  ] });
 }
 
 // src/components/DoubleCalendar/index.tsx
@@ -8582,89 +8611,71 @@ function DoubleCalendar(_a) {
       setEndValue("");
     }
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      CalendarButtonStyled,
-      {
-        expand,
-        type: "button",
-        onClick: () => setShowCalendar((prev) => {
-          const next = !prev;
-          if (!prev) initialSelectedRef.current = selected;
-          return next;
-        }),
-        disabled,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", gap: "8px", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          TextField,
-          {
-            placeholder: "00/00/0000 - 00/00/0000",
-            type: "text",
-            value: `${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`,
-            readOnly: true,
-            inputMode: "numeric",
-            textAlign: "right",
-            color: hasError ? "error" : "default",
-            disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
-          }
-        ) })
-      }
-    ),
-    showContainer && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_react_day_picker2.DayPicker,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+    showContainer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CalendarOverlayStyled, { onClick: () => setShowCalendar(false) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        CalendarButtonStyled,
         {
-          mode: "range",
-          numberOfMonths: 2,
-          captionLayout: calendarLayout,
-          selected,
-          onSelect: setSelected,
-          required: true,
-          locale: ptBR,
-          disabled: disabledDays.length > 0 ? disabledDays : void 0,
-          fromMonth: allowPastDates ? void 0 : today,
-          toMonth: resolvedMaxDate
-        }
-      ) }) }),
-      action && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarFooterStyled, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { textAlign: "center", padding: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: `${(selected == null ? void 0 : selected.from) ? format2(selected.from, "dd/MM/yyyy") : "00/00/0000"} \u2014 ${(selected == null ? void 0 : selected.to) ? format2(selected.to, "dd/MM/yyyy") : "00/00/0000"}` }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          Button,
+          expand,
+          type: "button",
+          onClick: () => setShowCalendar((prev) => {
+            const next = !prev;
+            if (!prev) initialSelectedRef.current = selected;
+            return next;
+          }),
+          disabled,
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { display: "flex", gap: "8px", width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            TextField,
+            {
+              placeholder: "00/00/0000 - 00/00/0000",
+              type: "text",
+              value: `${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`,
+              readOnly: true,
+              inputMode: "numeric",
+              textAlign: "right",
+              color: hasError ? "error" : "default",
+              disabled,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
+            }
+          ) })
+        }
+      ),
+      showContainer && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarContentStyled, { position, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_day_picker2.DayPicker,
           {
-            style: { margin: "0 0.5rem" },
-            variant: "text",
-            color: "neutral",
-            type: "button",
-            onClick: () => {
-              setSelected(initialSelectedRef.current);
-              setShowCalendar(false);
-            },
-            size: "medium",
-            fontWeight: "regular",
-            children: "Cancelar"
+            mode: "range",
+            numberOfMonths: 2,
+            captionLayout: calendarLayout,
+            selected,
+            onSelect: setSelected,
+            required: true,
+            locale: ptBR,
+            disabled: disabledDays.length > 0 ? disabledDays : void 0,
+            fromMonth: allowPastDates ? void 0 : today,
+            toMonth: resolvedMaxDate
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          Button,
-          {
-            style: { margin: "0 0.5rem" },
-            variant: "text",
-            color: "brand",
-            type: "button",
-            onClick: () => {
-              setShowCalendar(false);
-            },
-            size: "medium",
-            fontWeight: "medium",
-            children: actionText != null ? actionText : "Aplicar"
-          }
-        )
-      ] }),
-      simpleAction && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CalendarFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "div",
-        {
-          style: { display: "flex", justifyContent: "center", padding: "1rem", width: "100%" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        ) }) }),
+        action && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(CalendarFooterStyled, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { textAlign: "center", padding: "1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: `${(selected == null ? void 0 : selected.from) ? format2(selected.from, "dd/MM/yyyy") : "00/00/0000"} \u2014 ${(selected == null ? void 0 : selected.to) ? format2(selected.to, "dd/MM/yyyy") : "00/00/0000"}` }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Button,
+            {
+              style: { margin: "0 0.5rem" },
+              variant: "text",
+              color: "neutral",
+              type: "button",
+              onClick: () => {
+                setSelected(initialSelectedRef.current);
+                setShowCalendar(false);
+              },
+              size: "medium",
+              fontWeight: "regular",
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             Button,
             {
               style: { margin: "0 0.5rem" },
@@ -8679,10 +8690,31 @@ function DoubleCalendar(_a) {
               children: actionText != null ? actionText : "Aplicar"
             }
           )
-        }
-      ) })
-    ] })
-  ] })) });
+        ] }),
+        simpleAction && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CalendarFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            style: { display: "flex", justifyContent: "center", padding: "1rem", width: "100%" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              Button,
+              {
+                style: { margin: "0 0.5rem" },
+                variant: "text",
+                color: "brand",
+                type: "button",
+                onClick: () => {
+                  setShowCalendar(false);
+                },
+                size: "medium",
+                fontWeight: "medium",
+                children: actionText != null ? actionText : "Aplicar"
+              }
+            )
+          }
+        ) })
+      ] })
+    ] }))
+  ] });
 }
 
 // src/components/Drawer/index.tsx
@@ -8714,6 +8746,7 @@ var DrawerWrapper = styled("div", {
   top: 0,
   right: 0,
   height: "100dvh",
+  minHeight: "100vh",
   overflow: "hidden",
   variants: {
     open: {
@@ -8729,6 +8762,7 @@ var DrawerContainerStyled = styled("div", {
   top: 0,
   right: 0,
   height: "100dvh",
+  minHeight: "100vh",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",

package/dist/index.mjs

@@ -7819,6 +7819,27 @@ var CalendarStyled = styled("div", {
     }
   }
 });
+var calendarMobileCentered = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  right: "auto",
+  bottom: "auto",
+  transform: "translate(-50%, -50%)",
+  maxWidth: "calc(100vw - 32px)",
+  maxHeight: "90vh",
+  overflowY: "auto"
+};
+var CalendarOverlayStyled = styled("div", {
+  display: "none",
+  "@media (max-width: 748px)": {
+    display: "block",
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999998
+  }
+});
 var CalendarButtonStyled = styled("button", {
   backgroundColor: "transparent",
   border: "none",
@@ -7852,23 +7873,28 @@ var CalendarContentStyled = styled("div", {
   position: "absolute",
   backgroundColor: "$neutral50",
   zIndex: "999999",
+  "@media (max-width: 748px)": calendarMobileCentered,
   variants: {
     position: {
       top: {
         bottom: "110%",
-        left: "0"
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       bottom: {
         top: "110%",
-        left: "0"
+        left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       "top-right": {
         bottom: "110%",
-        right: "0"
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       },
       "bottom-right": {
         top: "110%",
-        right: "0"
+        right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered
       }
     }
   }
@@ -8346,60 +8372,63 @@ function Calendar(_a) {
       console.warn("Data inv\xE1lida inserida no input:", masked);
     }
   };
-  return /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs7(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx15(
-      CalendarButtonStyled,
-      {
-        expand,
-        type: "button",
-        onClick: () => setShowCalendar((prev) => !prev),
-        children: /* @__PURE__ */ jsx15(
-          TextField,
-          {
-            placeholder: "00/00/0000",
-            type: "text",
-            value: inputValue,
-            onChange: handleInputChange,
-            inputMode: "numeric",
-            textAlign: "right",
-            color: hasError ? "error" : "default",
-            disabled,
-            children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
-          }
-        )
-      }
-    ),
-    showContainer && /* @__PURE__ */ jsxs7(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx15(
-        DayPicker,
-        {
-          mode: "single",
-          captionLayout: calendarLayout,
-          selected,
-          onSelect: setSelected,
-          required: true,
-          locale: ptBR,
-          disabled: disabledDays.length > 0 ? disabledDays : void 0,
-          startMonth: allowPastDates ? void 0 : today,
-          endMonth: resolvedMaxDate
-        }
-      ) }) }),
-      action && /* @__PURE__ */ jsx15(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ jsx15(
-        Button,
+  return /* @__PURE__ */ jsxs7("div", { children: [
+    showContainer && /* @__PURE__ */ jsx15(CalendarOverlayStyled, { onClick: () => setShowCalendar(false) }),
+    /* @__PURE__ */ jsxs7(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+      /* @__PURE__ */ jsx15(
+        CalendarButtonStyled,
         {
-          variant: "text",
-          color: "brand",
+          expand,
           type: "button",
-          onClick: () => {
-            setShowCalendar(false);
-          },
-          size: "medium",
-          fontWeight: "medium",
-          children: actionText != null ? actionText : "Aplicar"
+          onClick: () => setShowCalendar((prev) => !prev),
+          children: /* @__PURE__ */ jsx15(
+            TextField,
+            {
+              placeholder: "00/00/0000",
+              type: "text",
+              value: inputValue,
+              onChange: handleInputChange,
+              inputMode: "numeric",
+              textAlign: "right",
+              color: hasError ? "error" : "default",
+              disabled,
+              children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
+            }
+          )
         }
-      ) })
-    ] })
-  ] })) });
+      ),
+      showContainer && /* @__PURE__ */ jsxs7(CalendarContentStyled, { position, children: [
+        /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx15(
+          DayPicker,
+          {
+            mode: "single",
+            captionLayout: calendarLayout,
+            selected,
+            onSelect: setSelected,
+            required: true,
+            locale: ptBR,
+            disabled: disabledDays.length > 0 ? disabledDays : void 0,
+            startMonth: allowPastDates ? void 0 : today,
+            endMonth: resolvedMaxDate
+          }
+        ) }) }),
+        action && /* @__PURE__ */ jsx15(CalendarFooterStyled, { actionAlign, children: /* @__PURE__ */ jsx15(
+          Button,
+          {
+            variant: "text",
+            color: "brand",
+            type: "button",
+            onClick: () => {
+              setShowCalendar(false);
+            },
+            size: "medium",
+            fontWeight: "medium",
+            children: actionText != null ? actionText : "Aplicar"
+          }
+        ) })
+      ] })
+    ] }))
+  ] });
 }
 
 // src/components/DoubleCalendar/index.tsx
@@ -8465,89 +8494,71 @@ function DoubleCalendar(_a) {
       setEndValue("");
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsxs8(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx16(
-      CalendarButtonStyled,
-      {
-        expand,
-        type: "button",
-        onClick: () => setShowCalendar((prev) => {
-          const next = !prev;
-          if (!prev) initialSelectedRef.current = selected;
-          return next;
-        }),
-        disabled,
-        children: /* @__PURE__ */ jsx16("div", { style: { display: "flex", gap: "8px", width: "100%" }, children: /* @__PURE__ */ jsx16(
-          TextField,
-          {
-            placeholder: "00/00/0000 - 00/00/0000",
-            type: "text",
-            value: `${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`,
-            readOnly: true,
-            inputMode: "numeric",
-            textAlign: "right",
-            color: hasError ? "error" : "default",
-            disabled,
-            children: /* @__PURE__ */ jsx16(TextFieldSlot, { children: /* @__PURE__ */ jsx16(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
-          }
-        ) })
-      }
-    ),
-    showContainer && /* @__PURE__ */ jsxs8(CalendarContentStyled, { position, children: [
-      /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ jsx16(
-        DayPicker2,
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    showContainer && /* @__PURE__ */ jsx16(CalendarOverlayStyled, { onClick: () => setShowCalendar(false) }),
+    /* @__PURE__ */ jsxs8(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+      /* @__PURE__ */ jsx16(
+        CalendarButtonStyled,
         {
-          mode: "range",
-          numberOfMonths: 2,
-          captionLayout: calendarLayout,
-          selected,
-          onSelect: setSelected,
-          required: true,
-          locale: ptBR,
-          disabled: disabledDays.length > 0 ? disabledDays : void 0,
-          fromMonth: allowPastDates ? void 0 : today,
-          toMonth: resolvedMaxDate
-        }
-      ) }) }),
-      action && /* @__PURE__ */ jsxs8(CalendarFooterStyled, { children: [
-        /* @__PURE__ */ jsx16("div", { style: { textAlign: "center", padding: "1rem" }, children: /* @__PURE__ */ jsx16("span", { children: `${(selected == null ? void 0 : selected.from) ? format2(selected.from, "dd/MM/yyyy") : "00/00/0000"} \u2014 ${(selected == null ? void 0 : selected.to) ? format2(selected.to, "dd/MM/yyyy") : "00/00/0000"}` }) }),
-        /* @__PURE__ */ jsx16(
-          Button,
+          expand,
+          type: "button",
+          onClick: () => setShowCalendar((prev) => {
+            const next = !prev;
+            if (!prev) initialSelectedRef.current = selected;
+            return next;
+          }),
+          disabled,
+          children: /* @__PURE__ */ jsx16("div", { style: { display: "flex", gap: "8px", width: "100%" }, children: /* @__PURE__ */ jsx16(
+            TextField,
+            {
+              placeholder: "00/00/0000 - 00/00/0000",
+              type: "text",
+              value: `${startValue || "00/00/0000"} - ${endValue || "00/00/0000"}`,
+              readOnly: true,
+              inputMode: "numeric",
+              textAlign: "right",
+              color: hasError ? "error" : "default",
+              disabled,
+              children: /* @__PURE__ */ jsx16(TextFieldSlot, { children: /* @__PURE__ */ jsx16(Icon_default, { name: "calendar", size: "xl", color: "#4C4F54" }) })
+            }
+          ) })
+        }
+      ),
+      showContainer && /* @__PURE__ */ jsxs8(CalendarContentStyled, { position, children: [
+        /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(DayPickerWrapperStyledToDoubleCalendar, { children: /* @__PURE__ */ jsx16(
+          DayPicker2,
           {
-            style: { margin: "0 0.5rem" },
-            variant: "text",
-            color: "neutral",
-            type: "button",
-            onClick: () => {
-              setSelected(initialSelectedRef.current);
-              setShowCalendar(false);
-            },
-            size: "medium",
-            fontWeight: "regular",
-            children: "Cancelar"
+            mode: "range",
+            numberOfMonths: 2,
+            captionLayout: calendarLayout,
+            selected,
+            onSelect: setSelected,
+            required: true,
+            locale: ptBR,
+            disabled: disabledDays.length > 0 ? disabledDays : void 0,
+            fromMonth: allowPastDates ? void 0 : today,
+            toMonth: resolvedMaxDate
           }
-        ),
-        /* @__PURE__ */ jsx16(
-          Button,
-          {
-            style: { margin: "0 0.5rem" },
-            variant: "text",
-            color: "brand",
-            type: "button",
-            onClick: () => {
-              setShowCalendar(false);
-            },
-            size: "medium",
-            fontWeight: "medium",
-            children: actionText != null ? actionText : "Aplicar"
-          }
-        )
-      ] }),
-      simpleAction && /* @__PURE__ */ jsx16(CalendarFooterStyled, { children: /* @__PURE__ */ jsx16(
-        "div",
-        {
-          style: { display: "flex", justifyContent: "center", padding: "1rem", width: "100%" },
-          children: /* @__PURE__ */ jsx16(
+        ) }) }),
+        action && /* @__PURE__ */ jsxs8(CalendarFooterStyled, { children: [
+          /* @__PURE__ */ jsx16("div", { style: { textAlign: "center", padding: "1rem" }, children: /* @__PURE__ */ jsx16("span", { children: `${(selected == null ? void 0 : selected.from) ? format2(selected.from, "dd/MM/yyyy") : "00/00/0000"} \u2014 ${(selected == null ? void 0 : selected.to) ? format2(selected.to, "dd/MM/yyyy") : "00/00/0000"}` }) }),
+          /* @__PURE__ */ jsx16(
+            Button,
+            {
+              style: { margin: "0 0.5rem" },
+              variant: "text",
+              color: "neutral",
+              type: "button",
+              onClick: () => {
+                setSelected(initialSelectedRef.current);
+                setShowCalendar(false);
+              },
+              size: "medium",
+              fontWeight: "regular",
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ jsx16(
             Button,
             {
               style: { margin: "0 0.5rem" },
@@ -8562,10 +8573,31 @@ function DoubleCalendar(_a) {
               children: actionText != null ? actionText : "Aplicar"
             }
           )
-        }
-      ) })
-    ] })
-  ] })) });
+        ] }),
+        simpleAction && /* @__PURE__ */ jsx16(CalendarFooterStyled, { children: /* @__PURE__ */ jsx16(
+          "div",
+          {
+            style: { display: "flex", justifyContent: "center", padding: "1rem", width: "100%" },
+            children: /* @__PURE__ */ jsx16(
+              Button,
+              {
+                style: { margin: "0 0.5rem" },
+                variant: "text",
+                color: "brand",
+                type: "button",
+                onClick: () => {
+                  setShowCalendar(false);
+                },
+                size: "medium",
+                fontWeight: "medium",
+                children: actionText != null ? actionText : "Aplicar"
+              }
+            )
+          }
+        ) })
+      ] })
+    ] }))
+  ] });
 }
 
 // src/components/Drawer/index.tsx
@@ -8597,6 +8629,7 @@ var DrawerWrapper = styled("div", {
   top: 0,
   right: 0,
   height: "100dvh",
+  minHeight: "100vh",
   overflow: "hidden",
   variants: {
     open: {
@@ -8612,6 +8645,7 @@ var DrawerContainerStyled = styled("div", {
   top: 0,
   right: 0,
   height: "100dvh",
+  minHeight: "100vh",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",

package/package.json

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

package/src/components/Calendar/index.tsx

@@ -10,6 +10,7 @@ import Icon from "../Icon";
 import {
   CalendarContentStyled,
   CalendarFooterStyled,
+  CalendarOverlayStyled,
   CalendarStyled,
   DayPickerWrapperStyled,
   CalendarButtonStyled,
@@ -105,6 +106,9 @@ export function Calendar({
 
   return (
     <div>
+      {showContainer && (
+        <CalendarOverlayStyled onClick={() => setShowCalendar(false)} />
+      )}
       <CalendarStyled {...props} expand={expand} ref={dropdownRef}>
         <CalendarButtonStyled
           expand={expand}

package/src/components/Calendar/styledComponents.ts

@@ -17,6 +17,29 @@ export const CalendarStyled = styled("div", {
     },
   },
 });
+const calendarMobileCentered = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  right: "auto",
+  bottom: "auto",
+  transform: "translate(-50%, -50%)",
+  maxWidth: "calc(100vw - 32px)",
+  maxHeight: "90vh",
+  overflowY: "auto",
+};
+
+export const CalendarOverlayStyled = styled("div", {
+  display: "none",
+  "@media (max-width: 748px)": {
+    display: "block",
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 999998,
+  },
+});
+
 export const CalendarButtonStyled = styled("button", {
   backgroundColor: "transparent",
   border: "none",
@@ -50,23 +73,28 @@ export const CalendarContentStyled = styled("div", {
   position: "absolute",
   backgroundColor: "$neutral50",
   zIndex: "999999",
+  "@media (max-width: 748px)": calendarMobileCentered,
   variants: {
     position: {
       top: {
         bottom: "110%",
         left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered,
       },
       bottom: {
         top: "110%",
         left: "0",
+        "@media (max-width: 748px)": calendarMobileCentered,
       },
       "top-right": {
         bottom: "110%",
         right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered,
       },
       "bottom-right": {
         top: "110%",
         right: "0",
+        "@media (max-width: 748px)": calendarMobileCentered,
       },
     },
   },

package/src/components/DoubleCalendar/index.tsx

@@ -10,6 +10,7 @@ import Icon from "../Icon";
 import {
     CalendarContentStyled,
     CalendarFooterStyled,
+    CalendarOverlayStyled,
     CalendarStyled,
     DayPickerWrapperStyledToDoubleCalendar,
     CalendarButtonStyled,
@@ -88,6 +89,9 @@ export function DoubleCalendar({
 
     return (
         <div>
+            {showContainer && (
+                <CalendarOverlayStyled onClick={() => setShowCalendar(false)} />
+            )}
             <CalendarStyled {...props} expand={expand} ref={dropdownRef}>
                 <CalendarButtonStyled
                     expand={expand}

package/src/components/Drawer/styledComponents.ts

@@ -28,6 +28,7 @@ export const DrawerWrapper = styled("div", {
   top: 0,
   right: 0,
   height: "100dvh",
+  minHeight: "100vh",
   overflow: "hidden",
 
   variants: {
@@ -45,6 +46,7 @@ export const DrawerContainerStyled = styled("div", {
   top: 0,
   right: 0,
   height: "100dvh",
+  minHeight: "100vh",
   background: "$neutral50",
   display: "flex",
   flexDirection: "column",