@lets-events/react 12.11.0 → 12.11.1

package/dist/index.mjs

@@ -420,7 +420,7 @@ var require_factoryWithTypeCheckers = __commonJS({
     function emptyFunctionThatReturnsNull() {
       return null;
     }
-    module.exports = function(isValidElement, throwOnDirectAccess) {
+    module.exports = function(isValidElement2, throwOnDirectAccess) {
       var ITERATOR_SYMBOL = typeof Symbol === "function" && Symbol.iterator;
       var FAUX_ITERATOR_SYMBOL = "@@iterator";
       function getIteratorFn(maybeIterable) {
@@ -548,7 +548,7 @@ var require_factoryWithTypeCheckers = __commonJS({
       function createElementTypeChecker() {
         function validate(props, propName, componentName, location, propFullName) {
           var propValue = props[propName];
-          if (!isValidElement(propValue)) {
+          if (!isValidElement2(propValue)) {
             var propType = getPropType(propValue);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + propType + "` supplied to `" + componentName + "`, expected a single ReactElement."));
           }
@@ -736,7 +736,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             if (Array.isArray(propValue)) {
               return propValue.every(isNode);
             }
-            if (propValue === null || isValidElement(propValue)) {
+            if (propValue === null || isValidElement2(propValue)) {
               return true;
             }
             var iteratorFn = getIteratorFn(propValue);
@@ -3760,7 +3760,8 @@ var ModalTitleStyled = styled(ModalRadix.Title, {
   fontSize: "$18",
   fontWeight: "medium",
   fontStyle: "normal",
-  textTransform: "uppercase"
+  textTransform: "uppercase",
+  width: "calc(100% - 48px)"
 });
 function Modal(_a) {
   var _b = _a, {
@@ -9932,7 +9933,26 @@ var useToast = () => {
 };
 
 // src/components/Tooltip/index.tsx
+import * as React10 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+// src/hooks/useHasHover.ts
+import { useEffect as useEffect8, useState as useState9 } from "react";
+function useHasHover() {
+  const [hasHover, setHasHover] = useState9(true);
+  useEffect8(() => {
+    const media = window.matchMedia("(hover: hover)");
+    setHasHover(media.matches);
+    const listener = (event) => {
+      setHasHover(event.matches);
+    };
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, []);
+  return hasHover;
+}
+
+// src/components/Tooltip/index.tsx
 import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
@@ -9966,23 +9986,66 @@ var TooltipContent = styled(TooltipPrimitive.Content, {
 var TooltipArrow = styled(TooltipPrimitive.Arrow, {
   fill: "$dark800"
 });
+function mergeTouchTriggerProps(child, onToggle) {
+  return React10.cloneElement(child, {
+    onClick: (event) => {
+      var _a, _b;
+      (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, event);
+      if (!event.defaultPrevented) {
+        onToggle();
+      }
+    }
+  });
+}
 function Tooltip({
   children,
   content,
   delayDuration = 200,
-  side = "top"
+  side = "top",
+  supportMobileTap = true
 }) {
-  return /* @__PURE__ */ jsx26(TooltipProvider, { children: /* @__PURE__ */ jsxs15(TooltipRoot, { delayDuration, children: [
-    /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxs15(TooltipContent, { side, sideOffset: 5, children: [
-      typeof content === "string" ? /* @__PURE__ */ jsx26(Text, { typography: "tooltip", color: "grey50", children: content }) : content,
-      /* @__PURE__ */ jsx26(TooltipArrow, {})
-    ] })
-  ] }) });
+  const hasHover = useHasHover();
+  const [open, setOpen] = React10.useState(false);
+  const isTouchToggleRef = React10.useRef(false);
+  const useTouchBehavior = supportMobileTap && !hasHover;
+  const handleTouchOpenChange = React10.useCallback((nextOpen) => {
+    if (isTouchToggleRef.current) {
+      isTouchToggleRef.current = false;
+      return;
+    }
+    setOpen(nextOpen);
+  }, []);
+  const triggerChild = React10.useMemo(() => {
+    if (!useTouchBehavior || !React10.isValidElement(children)) {
+      return children;
+    }
+    return mergeTouchTriggerProps(
+      children,
+      () => {
+        isTouchToggleRef.current = true;
+        setOpen((prev) => !prev);
+      }
+    );
+  }, [children, useTouchBehavior]);
+  const tooltipContent = typeof content === "string" ? /* @__PURE__ */ jsx26(Text, { typography: "tooltip", color: "grey50", children: content }) : content;
+  return /* @__PURE__ */ jsx26(TooltipProvider, { children: /* @__PURE__ */ jsxs15(
+    TooltipRoot,
+    __spreadProps(__spreadValues({
+      delayDuration: useTouchBehavior ? 0 : delayDuration
+    }, useTouchBehavior ? { open, onOpenChange: handleTouchOpenChange } : {}), {
+      children: [
+        /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children: triggerChild }),
+        /* @__PURE__ */ jsxs15(TooltipContent, { side, sideOffset: 5, children: [
+          tooltipContent,
+          /* @__PURE__ */ jsx26(TooltipArrow, {})
+        ] })
+      ]
+    })
+  ) });
 }
 
 // src/components/MultiSelect/index.tsx
-import React10, { useCallback as useCallback2, useRef as useRef8, useState as useState10 } from "react";
+import React11, { useCallback as useCallback3, useRef as useRef9, useState as useState12 } from "react";
 import { DropdownMenu as DropdownMenu4, Theme as Theme3 } from "@radix-ui/themes";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
@@ -9990,15 +10053,15 @@ import {
   faChevronUp as faChevronUp2,
   faSquareXmark
 } from "@fortawesome/free-solid-svg-icons";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 
 // src/hooks/useMediaQuery.ts
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 function useMediaQuery(query) {
-  const [matches, setMatches] = useState9(
+  const [matches, setMatches] = useState11(
     () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
   );
-  useEffect8(() => {
+  useEffect9(() => {
     const media = window.matchMedia(query);
     const listener = (event) => setMatches(event.matches);
     setMatches(media.matches);
@@ -10172,7 +10235,7 @@ import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-r
 var MOBILE_MODAL_MAX_HEIGHT = "90vh";
 var MOBILE_MODAL_HEADER_OFFSET = "65px";
 var MOBILE_BREAKPOINT = "(max-width: 840px)";
-var MultiSelect = React10.forwardRef(
+var MultiSelect = React11.forwardRef(
   ({
     placeholder,
     value: selectedValues = [],
@@ -10195,12 +10258,12 @@ var MultiSelect = React10.forwardRef(
     showMoreButtonOnClick,
     helperTextAfterField = ""
   }, fowardedRef) => {
-    const [isOpen, setIsOpen] = useState10(false);
-    const triggerRef = useRef8(null);
-    const [allOptionsSelected, setAllOptionsSelected] = useState10(false);
+    const [isOpen, setIsOpen] = useState12(false);
+    const triggerRef = useRef9(null);
+    const [allOptionsSelected, setAllOptionsSelected] = useState12(false);
     const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
     const hasSections = !!(optionsBySection == null ? void 0 : optionsBySection.length);
-    const resolvedOptions = useMemo2(() => {
+    const resolvedOptions = useMemo3(() => {
       if (hasSections) {
         return optionsBySection.reduce(
           (acc, section) => acc.concat(section.options),
@@ -10209,21 +10272,21 @@ var MultiSelect = React10.forwardRef(
       }
       return options;
     }, [hasSections, options, optionsBySection]);
-    const labelByValue = useMemo2(() => {
+    const labelByValue = useMemo3(() => {
       return resolvedOptions.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
           [curr.value]: curr.label
         });
       }, {});
     }, [resolvedOptions]);
-    const handleRemove = useCallback2(
+    const handleRemove = useCallback3(
       (value) => {
         const newValue = selectedValues.filter((v) => v !== value);
         onValueChange == null ? void 0 : onValueChange(newValue);
       },
       [selectedValues, onValueChange]
     );
-    const handleSelectAll = useCallback2(
+    const handleSelectAll = useCallback3(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -10238,7 +10301,7 @@ var MultiSelect = React10.forwardRef(
       },
       [selectedValues, resolvedOptions, onValueChange]
     );
-    const text = useMemo2(() => {
+    const text = useMemo3(() => {
       if (selectedValues.length > 0 && singleSelect) {
         const value = selectedValues[0];
         return labelByValue[value];
@@ -10249,7 +10312,7 @@ var MultiSelect = React10.forwardRef(
       onValueChange == null ? void 0 : onValueChange([v]);
       setIsOpen(false);
     };
-    const handleToggle = useCallback2(
+    const handleToggle = useCallback3(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -10328,7 +10391,7 @@ var MultiSelect = React10.forwardRef(
     );
     const renderCheckboxOptions = () => {
       if (hasSections) {
-        return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(React10.Fragment, { children: [
+        return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(React11.Fragment, { children: [
           sectionIndex > 0 && /* @__PURE__ */ jsx27(StyledSectionDivider, {}),
           /* @__PURE__ */ jsx27(StyledSectionTitle, { typography: "labelSmall", fontWeight: "semibold", color: "dark600", children: section.name }),
           section.options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, `${section.name}-${i}`))
@@ -10338,7 +10401,7 @@ var MultiSelect = React10.forwardRef(
     };
     const renderSingleSelectOptions = () => {
       if (hasSections) {
-        return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(React10.Fragment, { children: [
+        return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(React11.Fragment, { children: [
           sectionIndex > 0 && /* @__PURE__ */ jsx27(StyledSectionDivider, {}),
           /* @__PURE__ */ jsx27(StyledSectionTitle, { typography: "labelSmall", fontWeight: "semibold", color: "dark600", children: section.name }),
           section.options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, `${section.name}-${i}`))
@@ -10503,7 +10566,7 @@ var Divider = styled("div", {
 });
 
 // src/components/ToggleElement/index.tsx
-import { useState as useState11 } from "react";
+import { useState as useState13 } from "react";
 import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function ToggleElement({
   children,
@@ -10515,7 +10578,7 @@ function ToggleElement({
   buttonProps,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = useState11(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState13(defaultOpen);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
   const handleClick = () => {
@@ -10839,7 +10902,7 @@ var TextAreaFormField = (_a) => {
 import {
   useController
 } from "react-hook-form";
-import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo4 } from "react";
 import { format as format3, unformat as unformat2 } from "@react-input/mask";
 import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var TextFormField = (_a) => {
@@ -10862,7 +10925,7 @@ var TextFormField = (_a) => {
     "onChange",
     "valueFormatter"
   ]);
-  const handleValidate = useCallback3(
+  const handleValidate = useCallback4(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || !required && value.trim() === "")
@@ -10884,7 +10947,7 @@ var TextFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: formValue, onChange: formChange } = field;
-  const formattedValue = useMemo3(() => {
+  const formattedValue = useMemo4(() => {
     let value = formValue;
     if (valueFormatter) value = valueFormatter.format(value);
     if (mask) value = format3(value != null ? value : "", mask);
@@ -11499,7 +11562,7 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-import { useEffect as useEffect9, useState as useState12 } from "react";
+import { useEffect as useEffect10, useState as useState14 } from "react";
 import { useFormContext as useFormContext5, Controller as Controller2 } from "react-hook-form";
 import { Fragment as Fragment6, jsx as jsx47 } from "react/jsx-runtime";
 function CityFormField({
@@ -11512,9 +11575,9 @@ function CityFormField({
 }) {
   const { control, watch } = useFormContext5();
   const selectedState = watch(stateName);
-  const [cities, setCities] = useState12([]);
-  const [loading, setLoading] = useState12(false);
-  useEffect9(() => {
+  const [cities, setCities] = useState14([]);
+  const [loading, setLoading] = useState14(false);
+  useEffect10(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -11900,10 +11963,10 @@ var EmailFormField = ({
 import { useController as useController3 } from "react-hook-form";
 
 // src/components/RichEditor/RichEditor.tsx
-import { useEffect as useEffect11, useState as useState14 } from "react";
+import { useEffect as useEffect12, useState as useState16 } from "react";
 
 // src/components/RichEditor/QuillComponent.tsx
-import { useState as useState13, useRef as useRef9, useEffect as useEffect10, useCallback as useCallback4 } from "react";
+import { useState as useState15, useRef as useRef10, useEffect as useEffect11, useCallback as useCallback5 } from "react";
 import { useQuill } from "react-quilljs";
 
 // src/utils/uploadService.ts
@@ -13106,12 +13169,12 @@ var QuillComponent = ({
   onCharacterCountChange,
   maxLength
 }) => {
-  const [showVideoModal, setShowVideoModal] = useState13(false);
-  const [videoUrl, setVideoUrl] = useState13("");
-  const [showLinkModal, setShowLinkModal] = useState13(false);
-  const [linkUrl, setLinkUrl] = useState13("");
-  const videoModalRef = useRef9(null);
-  const linkModalRef = useRef9(null);
+  const [showVideoModal, setShowVideoModal] = useState15(false);
+  const [videoUrl, setVideoUrl] = useState15("");
+  const [showLinkModal, setShowLinkModal] = useState15(false);
+  const [linkUrl, setLinkUrl] = useState15("");
+  const videoModalRef = useRef10(null);
+  const linkModalRef = useRef10(null);
   const { addToast, removeToast } = useToast();
   const formatHTML = (html) => {
     const parser = new DOMParser();
@@ -13130,7 +13193,7 @@ var QuillComponent = ({
     placeholder,
     readOnly: disabled
   });
-  const handleImageUpload = useCallback4(
+  const handleImageUpload = useCallback5(
     (file) => __async(null, null, function* () {
       if (disabled || !quill || !uploadConfig) return;
       try {
@@ -13162,7 +13225,7 @@ var QuillComponent = ({
     }),
     [disabled, quill, addToast, removeToast, uploadConfig, onChange]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (!quill) return;
     if (value !== void 0 && value !== null) {
       const currentContent = quill.root.innerHTML;
@@ -13178,7 +13241,7 @@ var QuillComponent = ({
     }
     onCharacterCountChange == null ? void 0 : onCharacterCountChange(quill.getText().trim().length);
   }, [quill, value, onCharacterCountChange]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
         if (source === "user") {
@@ -13239,7 +13302,7 @@ var QuillComponent = ({
       }, 2e3);
     }
   }, [quill, onChange, handleImageUpload, onCharacterCountChange, formats]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (quill) {
       quill.enable(!disabled);
       if (!disabled) {
@@ -13250,11 +13313,11 @@ var QuillComponent = ({
       }
     }
   }, [quill, disabled]);
-  const handleLinkCancel = useCallback4(() => {
+  const handleLinkCancel = useCallback5(() => {
     setLinkUrl("");
     setShowLinkModal(false);
   }, []);
-  const handleLinkSubmit = useCallback4(() => {
+  const handleLinkSubmit = useCallback5(() => {
     if (!linkUrl.trim() || !quill) return;
     const url = linkUrl.trim();
     const selection = quill.getSelection();
@@ -13269,11 +13332,11 @@ var QuillComponent = ({
     setLinkUrl("");
     setShowLinkModal(false);
   }, [linkUrl, quill]);
-  const handleVideoCancel = useCallback4(() => {
+  const handleVideoCancel = useCallback5(() => {
     setVideoUrl("");
     setShowVideoModal(false);
   }, []);
-  const handleVideoSubmit = useCallback4(() => {
+  const handleVideoSubmit = useCallback5(() => {
     var _a, _b;
     if (!videoUrl.trim() || !quill) return;
     let processedUrl = videoUrl.trim();
@@ -13306,7 +13369,7 @@ var QuillComponent = ({
     setVideoUrl("");
     setShowVideoModal(false);
   }, [videoUrl, quill]);
-  useEffect10(() => {
+  useEffect11(() => {
     const handleClickOutside = (event) => {
       if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
         handleVideoCancel();
@@ -13468,8 +13531,8 @@ var QuillComponent_default = QuillComponent;
 // src/components/RichEditor/RichEditor.tsx
 import { jsx as jsx54 } from "react/jsx-runtime";
 var RichEditor = (props) => {
-  const [isClient, setIsClient] = useState14(false);
-  useEffect11(() => {
+  const [isClient, setIsClient] = useState16(false);
+  useEffect12(() => {
     setIsClient(typeof window !== "undefined");
   }, []);
   if (!isClient) return null;
@@ -13491,7 +13554,7 @@ var RichTextPresenter = ({ richText }) => {
 var RichTextPresenter_default = RichTextPresenter;
 
 // src/components/FormFields/RichEditorFormField.tsx
-import { useEffect as useEffect12, useState as useState15 } from "react";
+import { useEffect as useEffect13, useState as useState17 } from "react";
 import { Fragment as Fragment7, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 var getPlainTextLengthFromHtml = (html) => {
   var _a, _b;
@@ -13540,7 +13603,7 @@ var RichEditorFormField = (_a) => {
       }
     }
   });
-  const [caracterQuantity, setCaracterQuantity] = useState15(
+  const [caracterQuantity, setCaracterQuantity] = useState17(
     () => getRemainingCharacters(maxLength, field.value)
   );
   const handleCharacterCountChange = (count) => {
@@ -13548,7 +13611,7 @@ var RichEditorFormField = (_a) => {
       setCaracterQuantity(Math.max(0, maxLength - count));
     }
   };
-  useEffect12(() => {
+  useEffect13(() => {
     setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
   }, [field.value, maxLength]);
   const fieldError = fieldState.error;
@@ -13594,7 +13657,7 @@ var RichEditorFormField = (_a) => {
 
 // src/components/FormFields/CalendarFormField.tsx
 import { useController as useController4 } from "react-hook-form";
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 var CalendarFormField = (_a) => {
   var _b = _a, {
@@ -13620,7 +13683,7 @@ var CalendarFormField = (_a) => {
     "maxYearsFromNow",
     "maxDate"
   ]);
-  const handleValidate = useCallback5(
+  const handleValidate = useCallback6(
     (value) => {
       var _a2;
       if (value === void 0 || value === null) {
@@ -13675,7 +13738,7 @@ var CalendarFormField = (_a) => {
 };
 
 // src/components/FormFields/DoubleCalendarFormField.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 import { useController as useController5 } from "react-hook-form";
 import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
 var DoubleCalendarFormField = (_a) => {
@@ -13702,7 +13765,7 @@ var DoubleCalendarFormField = (_a) => {
     "maxDate",
     "disabled"
   ]);
-  const handleValidate = useCallback6(
+  const handleValidate = useCallback7(
     (value) => {
       var _a2;
       if (value === void 0 || value === null) {
@@ -13751,7 +13814,7 @@ var DoubleCalendarFormField = (_a) => {
 
 // src/components/FormFields/TimePickerFormField.tsx
 import { useController as useController6 } from "react-hook-form";
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback8 } from "react";
 import { jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
 var TimePickerFormField = (_a) => {
   var _b = _a, {
@@ -13769,7 +13832,7 @@ var TimePickerFormField = (_a) => {
     "validationErrorMessage",
     "rules"
   ]);
-  const handleValidate = useCallback7(
+  const handleValidate = useCallback8(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || value === "") {
@@ -13822,7 +13885,7 @@ var TimePickerFormField = (_a) => {
 
 // src/components/FormFields/DateAndTimeFormField.tsx
 import { useController as useController7 } from "react-hook-form";
-import { useCallback as useCallback8, useEffect as useEffect13, useMemo as useMemo4, useState as useState16 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect14, useMemo as useMemo5, useState as useState18 } from "react";
 import { jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
 var DateAndTimeFormField = (_a) => {
   var _b = _a, {
@@ -13851,7 +13914,7 @@ var DateAndTimeFormField = (_a) => {
     "maxDate"
   ]);
   const { addToast } = useToast();
-  const handleDisabledClick = useCallback8(
+  const handleDisabledClick = useCallback9(
     (event) => {
       if (!disabled) return;
       event.preventDefault();
@@ -13864,7 +13927,7 @@ var DateAndTimeFormField = (_a) => {
     },
     [addToast, disabled, disabledInfo]
   );
-  const handleDisabledMouseDown = useCallback8(
+  const handleDisabledMouseDown = useCallback9(
     (event) => {
       if (!disabled) return;
       event.preventDefault();
@@ -13872,7 +13935,7 @@ var DateAndTimeFormField = (_a) => {
     },
     [disabled]
   );
-  const handleValidate = useCallback8(
+  const handleValidate = useCallback9(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || value === "") {
@@ -13895,7 +13958,7 @@ var DateAndTimeFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: isoValue, onChange: setIsoValue } = field;
-  const { selectedDateFromIso, selectedTimeFromIso } = useMemo4(() => {
+  const { selectedDateFromIso, selectedTimeFromIso } = useMemo5(() => {
     if (!isoValue) return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     try {
       const date = new Date(isoValue);
@@ -13910,13 +13973,13 @@ var DateAndTimeFormField = (_a) => {
       return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     }
   }, [isoValue]);
-  const [draftDate, setDraftDate] = useState16(selectedDateFromIso);
-  const [draftTime, setDraftTime] = useState16(selectedTimeFromIso);
-  useEffect13(() => {
+  const [draftDate, setDraftDate] = useState18(selectedDateFromIso);
+  const [draftTime, setDraftTime] = useState18(selectedTimeFromIso);
+  useEffect14(() => {
     setDraftDate(selectedDateFromIso);
     setDraftTime(selectedTimeFromIso);
   }, [selectedDateFromIso, selectedTimeFromIso]);
-  const combineDateTime = useCallback8(
+  const combineDateTime = useCallback9(
     (date, time) => {
       if (!date) {
         setIsoValue("");
@@ -14003,11 +14066,11 @@ var DateAndTimeFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-import { useState as useState17, useCallback as useCallback9 } from "react";
+import { useState as useState19, useCallback as useCallback10 } from "react";
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = useState17(false);
-  const [progress, setProgress] = useState17(null);
-  const [error, setError] = useState17(null);
+  const [isUploading, setIsUploading] = useState19(false);
+  const [progress, setProgress] = useState19(null);
+  const [error, setError] = useState19(null);
   const {
     onSuccess,
     onError,
@@ -14017,7 +14080,7 @@ var useImageUpload = (options) => {
     allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
     uploadConfig
   } = options;
-  const validateFile = useCallback9(
+  const validateFile = useCallback10(
     (file) => {
       if (!allowedTypes.includes(file.type)) {
         const errorMsg = "Tipo de arquivo n\xE3o suportado";
@@ -14035,7 +14098,7 @@ var useImageUpload = (options) => {
     },
     [allowedTypes, maxFileSize, onError]
   );
-  const uploadFile = useCallback9(
+  const uploadFile = useCallback10(
     (file) => __async(null, null, function* () {
       if (!validateFile(file)) {
         return null;
@@ -14088,7 +14151,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = useCallback9(() => {
+  const reset = useCallback10(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);

package/package.json

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

package/src/components/Modal.tsx

@@ -58,6 +58,7 @@ const ModalTitleStyled = styled(ModalRadix.Title, {
   fontWeight: "medium",
   fontStyle: "normal",
   textTransform: "uppercase",
+  width: "calc(100% - 48px)",
 });
 
 export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {