@lets-events/react 12.10.17 → 12.11.0

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 Fragment7 = REACT_FRAGMENT_TYPE;
+        var Fragment8 = 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 = Fragment7;
+        exports.Fragment = Fragment8;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -3768,13 +3768,21 @@ function Modal(_a) {
     title,
     trigger,
     zIndex,
-    maxWidth
+    maxWidth,
+    maxHeight,
+    height,
+    preventAutoFocus = false,
+    fitContent = false
   } = _b, props = __objRest(_b, [
     "children",
     "title",
     "trigger",
     "zIndex",
-    "maxWidth"
+    "maxWidth",
+    "maxHeight",
+    "height",
+    "preventAutoFocus",
+    "fitContent"
   ]);
   const { onOpenChange } = props;
   return /* @__PURE__ */ jsxs5(ModalRadix.Root, __spreadProps(__spreadValues({}, props), { children: [
@@ -3788,9 +3796,14 @@ function Modal(_a) {
         children: /* @__PURE__ */ jsxs5(
           ModalContentStyled,
           {
-            css: {
-              maxWidth
+            onOpenAutoFocus: (event) => {
+              if (preventAutoFocus) {
+                event.preventDefault();
+              }
             },
+            css: __spreadValues(__spreadValues(__spreadValues({
+              maxWidth
+            }, maxHeight !== void 0 && { maxHeight }), height !== void 0 && { height }), fitContent && height === void 0 && { height: "fit-content" }),
             children: [
               title && /* @__PURE__ */ jsxs5(ModalHeaderStyled, { children: [
                 /* @__PURE__ */ jsx13(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ jsx13(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
@@ -9969,7 +9982,7 @@ function Tooltip({
 }
 
 // src/components/MultiSelect/index.tsx
-import React10, { useCallback as useCallback2, useRef as useRef8, useState as useState9 } from "react";
+import React10, { useCallback as useCallback2, useRef as useRef8, useState as useState10 } from "react";
 import { DropdownMenu as DropdownMenu4, Theme as Theme3 } from "@radix-ui/themes";
 import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
@@ -9979,6 +9992,22 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { useMemo as useMemo2 } from "react";
 
+// src/hooks/useMediaQuery.ts
+import { useEffect as useEffect8, useState as useState9 } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState9(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  useEffect8(() => {
+    const media = window.matchMedia(query);
+    const listener = (event) => setMatches(event.matches);
+    setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+}
+
 // src/components/MultiSelect/styledComponents.ts
 import { DropdownMenu as DropdownMenu3 } from "@radix-ui/themes";
 var StyledContent = styled(DropdownMenu3.Content, {
@@ -10090,6 +10119,19 @@ var StyledText = styled(Text, {
   whiteSpace: "nowrap",
   textOverflow: "ellipsis"
 });
+var StyledSectionDivider = styled("div", {
+  borderBottom: "1px solid #CFCFCF",
+  margin: "0 16px"
+});
+var StyledSectionTitle = styled(Text, {
+  padding: "$8 $16 $4"
+});
+var StyledModalOptionsWrapper = styled("div", {
+  overflowY: "auto",
+  padding: "$16 0",
+  width: "100%",
+  boxSizing: "border-box"
+});
 var ButtonSelectAllStyled = styled("button", {
   display: "flex !important",
   alignItems: "center",
@@ -10126,13 +10168,17 @@ var ButtonSelectAllStyled = styled("button", {
 });
 
 // src/components/MultiSelect/index.tsx
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+var MOBILE_MODAL_MAX_HEIGHT = "90vh";
+var MOBILE_MODAL_HEADER_OFFSET = "65px";
+var MOBILE_BREAKPOINT = "(max-width: 840px)";
 var MultiSelect = React10.forwardRef(
   ({
     placeholder,
     value: selectedValues = [],
     onValueChange,
-    options,
+    options = [],
+    optionsBySection,
     color,
     width = "100%",
     zIndex = "auto",
@@ -10146,18 +10192,30 @@ var MultiSelect = React10.forwardRef(
     selectedScroll = false,
     showMoreButton = false,
     showMoreButtonLabel = "Carregar mais",
-    showMoreButtonOnClick
+    showMoreButtonOnClick,
+    helperTextAfterField = ""
   }, fowardedRef) => {
-    const [isOpen, setIsOpen] = useState9(false);
+    const [isOpen, setIsOpen] = useState10(false);
     const triggerRef = useRef8(null);
-    const [allOptionsSelected, setAllOptionsSelected] = useState9(false);
+    const [allOptionsSelected, setAllOptionsSelected] = useState10(false);
+    const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+    const hasSections = !!(optionsBySection == null ? void 0 : optionsBySection.length);
+    const resolvedOptions = useMemo2(() => {
+      if (hasSections) {
+        return optionsBySection.reduce(
+          (acc, section) => acc.concat(section.options),
+          []
+        );
+      }
+      return options;
+    }, [hasSections, options, optionsBySection]);
     const labelByValue = useMemo2(() => {
-      return options.reduce((prev, curr) => {
+      return resolvedOptions.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
           [curr.value]: curr.label
         });
       }, {});
-    }, [options]);
+    }, [resolvedOptions]);
     const handleRemove = useCallback2(
       (value) => {
         const newValue = selectedValues.filter((v) => v !== value);
@@ -10169,16 +10227,16 @@ var MultiSelect = React10.forwardRef(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
-        const allSelected = selectedValues.length === options.length;
+        const allSelected = selectedValues.length === resolvedOptions.length;
         if (allSelected) {
           onValueChange == null ? void 0 : onValueChange([]);
           setAllOptionsSelected(false);
         } else {
-          onValueChange == null ? void 0 : onValueChange(options.map((o) => o.value));
+          onValueChange == null ? void 0 : onValueChange(resolvedOptions.map((o) => o.value));
           setAllOptionsSelected(true);
         }
       },
-      [selectedValues, options, onValueChange]
+      [selectedValues, resolvedOptions, onValueChange]
     );
     const text = useMemo2(() => {
       if (selectedValues.length > 0 && singleSelect) {
@@ -10186,7 +10244,7 @@ var MultiSelect = React10.forwardRef(
         return labelByValue[value];
       }
       return placeholder != null ? placeholder : "Selecione";
-    }, [selectedValues, placeholder, singleSelect]);
+    }, [selectedValues, placeholder, singleSelect, labelByValue]);
     const handleItemClick = (v) => {
       onValueChange == null ? void 0 : onValueChange([v]);
       setIsOpen(false);
@@ -10200,43 +10258,153 @@ var MultiSelect = React10.forwardRef(
       },
       [disabled]
     );
-    return /* @__PURE__ */ jsxs16(Theme3, { style: width !== "100%" ? { width } : void 0, children: [
-      /* @__PURE__ */ jsxs16(DropdownMenu4.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
-        /* @__PURE__ */ jsx27(DropdownMenu4.Trigger, { children: /* @__PURE__ */ jsxs16(
-          StyledTrigger,
+    const triggerElement = /* @__PURE__ */ jsxs16(
+      StyledTrigger,
+      {
+        ref: (r) => {
+          if (!r) return;
+          triggerRef.current = r;
+          if (fowardedRef) {
+            if (typeof fowardedRef === "function") fowardedRef(r);
+            else fowardedRef.current = r;
+          }
+        },
+        color,
+        disabled,
+        style: width !== "100%" ? { width } : void 0,
+        onClick: !isMobile ? handleToggle : void 0,
+        children: [
+          /* @__PURE__ */ jsx27(
+            StyledText,
+            {
+              typography: "labelMedium",
+              color: disabled ? "dark400" : void 0,
+              children: text
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            FontAwesomeIcon3,
+            {
+              icon: isOpen ? faChevronUp2 : faChevronDown2,
+              size: "sm",
+              color: disabled ? colors.dark400 : colors.dark600
+            }
+          )
+        ]
+      }
+    );
+    const selectAllBlock = selectedAllOptions && /* @__PURE__ */ jsxs16(Fragment3, { children: [
+      /* @__PURE__ */ jsxs16(
+        ButtonSelectAllStyled,
+        {
+          css: itemStyle,
+          onClick: (e) => {
+            handleSelectAll(e);
+            setIsOpen(false);
+          },
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx27("div", { className: allOptionsSelected ? "checked" : "" }),
+            /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: selectedAllText ? selectedAllText : "Selecionar Todos" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx27(StyledSectionDivider, {})
+    ] });
+    const showMoreButtonBlock = showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx27(
+      Button,
+      {
+        variant: "menuDropdownItem",
+        color: "brand",
+        onClick: showMoreButtonOnClick,
+        fontWeight: "semibold",
+        type: "button",
+        css: {
+          justifyContent: "flex-start",
+          color: "var(--colors-brand500)!important"
+        },
+        children: showMoreButtonLabel
+      }
+    );
+    const renderCheckboxOptions = () => {
+      if (hasSections) {
+        return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(React10.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}`))
+        ] }, section.name));
+      }
+      return resolvedOptions.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i));
+    };
+    const renderSingleSelectOptions = () => {
+      if (hasSections) {
+        return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ jsxs16(React10.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}`))
+        ] }, section.name));
+      }
+      return resolvedOptions.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i));
+    };
+    const optionsContent = !singleSelect ? /* @__PURE__ */ jsx27(
+      CheckboxGroup,
+      {
+        value: selectedValues,
+        onValueChange: (v) => {
+          onValueChange == null ? void 0 : onValueChange(v);
+          setAllOptionsSelected((v || []).length === resolvedOptions.length);
+        },
+        children: /* @__PURE__ */ jsxs16(
+          StyledFlexWithMaxHeight,
           {
-            ref: (r) => {
-              if (!r) return;
-              triggerRef.current = r;
-              if (fowardedRef) {
-                if (typeof fowardedRef === "function") fowardedRef(r);
-                else fowardedRef.current = r;
-              }
-            },
-            color,
-            disabled,
-            style: width !== "100%" ? { width } : void 0,
-            onClick: handleToggle,
+            direction: "column",
+            gap: 8,
+            hasMaxHeight: !!maxHeight && !isMobile,
+            style: maxHeight && !isMobile ? { maxHeight } : void 0,
             children: [
-              /* @__PURE__ */ jsx27(
-                StyledText,
-                {
-                  typography: "labelMedium",
-                  color: disabled ? "dark400" : void 0,
-                  children: text
-                }
-              ),
-              /* @__PURE__ */ jsx27(
-                FontAwesomeIcon3,
-                {
-                  icon: isOpen ? faChevronUp2 : faChevronDown2,
-                  size: "sm",
-                  color: disabled ? colors.dark400 : colors.dark600
-                }
-              )
+              selectAllBlock,
+              renderCheckboxOptions(),
+              showMoreButtonBlock
             ]
           }
-        ) }),
+        )
+      }
+    ) : /* @__PURE__ */ jsxs16(
+      StyledFlexWithMaxHeight,
+      {
+        direction: "column",
+        gap: 8,
+        hasMaxHeight: !!maxHeight && !isMobile,
+        style: maxHeight && !isMobile ? { maxHeight } : void 0,
+        children: [
+          renderSingleSelectOptions(),
+          showMoreButtonBlock
+        ]
+      }
+    );
+    const modalZIndex = zIndex === "auto" ? void 0 : Number(zIndex);
+    return /* @__PURE__ */ jsxs16(Theme3, { style: width !== "100%" ? { width } : void 0, children: [
+      isMobile ? /* @__PURE__ */ jsx27(
+        Modal,
+        {
+          open: disabled ? false : isOpen,
+          onOpenChange: (open) => !disabled && setIsOpen(open),
+          trigger: triggerElement,
+          title: placeholder != null ? placeholder : "Selecione",
+          maxHeight: MOBILE_MODAL_MAX_HEIGHT,
+          zIndex: modalZIndex,
+          preventAutoFocus: true,
+          fitContent: true,
+          children: /* @__PURE__ */ jsx27(
+            StyledModalOptionsWrapper,
+            {
+              css: { maxHeight: `calc(${MOBILE_MODAL_MAX_HEIGHT} - ${MOBILE_MODAL_HEADER_OFFSET})` },
+              children: optionsContent
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsxs16(DropdownMenu4.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+        /* @__PURE__ */ jsx27(DropdownMenu4.Trigger, { children: triggerElement }),
         /* @__PURE__ */ jsx27(
           StyledContent,
           {
@@ -10244,158 +10412,85 @@ var MultiSelect = React10.forwardRef(
               width: "100%",
               zIndex: zIndex === "auto" ? 999999 : zIndex
             },
-            children: !singleSelect ? /* @__PURE__ */ jsx27(
-              CheckboxGroup,
-              {
-                value: selectedValues,
-                onValueChange: (v) => {
-                  onValueChange == null ? void 0 : onValueChange(v);
-                  setAllOptionsSelected((v || []).length === options.length);
-                },
-                children: /* @__PURE__ */ jsxs16(
-                  StyledFlexWithMaxHeight,
-                  {
-                    direction: "column",
-                    gap: 8,
-                    hasMaxHeight: !!maxHeight,
-                    style: maxHeight ? { maxHeight } : void 0,
-                    children: [
-                      selectedAllOptions && /* @__PURE__ */ jsxs16(
-                        ButtonSelectAllStyled,
-                        {
-                          css: itemStyle,
-                          onClick: (e) => {
-                            handleSelectAll(e), setIsOpen(false);
-                          },
-                          type: "button",
-                          children: [
-                            /* @__PURE__ */ jsx27("div", { className: allOptionsSelected ? "checked" : "" }),
-                            /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: selectedAllText ? selectedAllText : "Selecionar Todos" })
-                          ]
-                        }
-                      ),
-                      options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i)),
-                      showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx27(
-                        Button,
-                        {
-                          variant: "menuDropdownItem",
-                          color: "brand",
-                          onClick: showMoreButtonOnClick,
-                          fontWeight: "semibold",
-                          type: "button",
-                          css: {
-                            justifyContent: "flex-start",
-                            color: "var(--colors-brand500)!important"
-                          },
-                          children: showMoreButtonLabel
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            ) : /* @__PURE__ */ jsxs16(
-              StyledFlexWithMaxHeight,
+            children: optionsContent
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { style: { padding: "4px 8px 0 0" }, children: [
+        helperTextAfterField && /* @__PURE__ */ jsx27(Text, { typography: "captionMedium", fontWeight: "regular", color: "dark600", children: helperTextAfterField }),
+        selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ jsx27(
+          StyledFlexSelectedItems,
+          {
+            direction: selectedOrientation,
+            gap: 8,
+            align: selectedOrientation === "column" ? "start" : "center",
+            justify: "start",
+            css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
+            children: allOptionsSelected ? /* @__PURE__ */ jsxs16(
+              Flex,
               {
-                direction: "column",
-                gap: 8,
-                hasMaxHeight: !!maxHeight,
-                style: maxHeight ? { maxHeight } : void 0,
+                gap: 4,
+                align: "center",
+                css: { flexWrap: "wrap" },
                 children: [
-                  options.map(({ value, label }, i) => /* @__PURE__ */ jsx27(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ jsx27(Text, { typography: "labelSmall", children: label }) }, i)),
-                  showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ jsx27(
-                    Button,
+                  /* @__PURE__ */ jsx27(
+                    CloseBtnStyled,
                     {
-                      variant: "menuDropdownItem",
-                      color: "brand",
-                      onClick: showMoreButtonOnClick,
-                      fontWeight: "semibold",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onValueChange == null ? void 0 : onValueChange([]);
+                        setAllOptionsSelected(false);
+                      },
                       type: "button",
-                      css: {
-                        justifyContent: "flex-start",
-                        color: "var(--colors-brand500)!important"
+                      children: /* @__PURE__ */ jsx27(FontAwesomeIcon3, { icon: faSquareXmark, size: "sm" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx27(
+                    Text,
+                    {
+                      typography: "captionMedium",
+                      fontWeight: "regular",
+                      color: "dark600",
+                      children: "Todos selecionados"
+                    }
+                  )
+                ]
+              },
+              "all-selected"
+            ) : selectedValues.map((value) => /* @__PURE__ */ jsxs16(
+              Flex,
+              {
+                gap: 4,
+                align: "center",
+                css: { flexWrap: "wrap" },
+                children: [
+                  /* @__PURE__ */ jsx27(
+                    CloseBtnStyled,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleRemove(value);
                       },
-                      children: showMoreButtonLabel
+                      type: "button",
+                      children: /* @__PURE__ */ jsx27(FontAwesomeIcon3, { icon: faSquareXmark, size: "sm" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx27(
+                    Text,
+                    {
+                      typography: "captionMedium",
+                      fontWeight: "regular",
+                      color: "dark600",
+                      children: labelByValue[value]
                     }
                   )
                 ]
-              }
-            )
+              },
+              value
+            ))
           }
         )
-      ] }),
-      selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ jsx27(
-        StyledFlexSelectedItems,
-        {
-          direction: selectedOrientation,
-          gap: 8,
-          align: selectedOrientation === "column" ? "start" : "center",
-          justify: "start",
-          css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
-          children: allOptionsSelected ? /* @__PURE__ */ jsxs16(
-            Flex,
-            {
-              gap: 4,
-              align: "center",
-              css: { flexWrap: "wrap" },
-              children: [
-                /* @__PURE__ */ jsx27(
-                  CloseBtnStyled,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onValueChange == null ? void 0 : onValueChange([]);
-                      setAllOptionsSelected(false);
-                    },
-                    type: "button",
-                    children: /* @__PURE__ */ jsx27(FontAwesomeIcon3, { icon: faSquareXmark, size: "sm" })
-                  }
-                ),
-                /* @__PURE__ */ jsx27(
-                  Text,
-                  {
-                    typography: "captionMedium",
-                    fontWeight: "regular",
-                    color: "dark600",
-                    children: "Todos selecionados"
-                  }
-                )
-              ]
-            },
-            "all-selected"
-          ) : selectedValues.map((value) => /* @__PURE__ */ jsxs16(
-            Flex,
-            {
-              gap: 4,
-              align: "center",
-              css: { flexWrap: "wrap" },
-              children: [
-                /* @__PURE__ */ jsx27(
-                  CloseBtnStyled,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      handleRemove(value);
-                    },
-                    type: "button",
-                    children: /* @__PURE__ */ jsx27(FontAwesomeIcon3, { icon: faSquareXmark, size: "sm" })
-                  }
-                ),
-                /* @__PURE__ */ jsx27(
-                  Text,
-                  {
-                    typography: "captionMedium",
-                    fontWeight: "regular",
-                    color: "dark600",
-                    children: labelByValue[value]
-                  }
-                )
-              ]
-            },
-            value
-          ))
-        }
-      )
+      ] })
     ] });
   }
 );
@@ -10408,8 +10503,8 @@ var Divider = styled("div", {
 });
 
 // src/components/ToggleElement/index.tsx
-import { useState as useState10 } from "react";
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function ToggleElement({
   children,
   label,
@@ -10420,7 +10515,7 @@ function ToggleElement({
   buttonProps,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = useState10(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState11(defaultOpen);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
   const handleClick = () => {
@@ -10430,7 +10525,7 @@ function ToggleElement({
     }
     onOpenChange == null ? void 0 : onOpenChange(nextOpen);
   };
-  return /* @__PURE__ */ jsxs17(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
     (!isOpen || !hideButtonWhenOpen) && /* @__PURE__ */ jsxs17(
       Button,
       __spreadProps(__spreadValues({
@@ -11385,14 +11480,14 @@ var brazilianStates = [
 ];
 
 // src/components/FormFields/AddressFormFields/StateFormField.tsx
-import { Fragment as Fragment4, jsx as jsx46 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx46 } from "react/jsx-runtime";
 function StateFormField({
   name,
   label,
   required,
   isBrazil
 }) {
-  return /* @__PURE__ */ jsx46(Fragment4, { children: isBrazil ? /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx46(Fragment5, { children: isBrazil ? /* @__PURE__ */ jsx46(
     SelectFormField,
     {
       name,
@@ -11404,9 +11499,9 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-import { useEffect as useEffect8, useState as useState11 } from "react";
+import { useEffect as useEffect9, useState as useState12 } from "react";
 import { useFormContext as useFormContext5, Controller as Controller2 } from "react-hook-form";
-import { Fragment as Fragment5, jsx as jsx47 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx47 } from "react/jsx-runtime";
 function CityFormField({
   name,
   label,
@@ -11417,9 +11512,9 @@ function CityFormField({
 }) {
   const { control, watch } = useFormContext5();
   const selectedState = watch(stateName);
-  const [cities, setCities] = useState11([]);
-  const [loading, setLoading] = useState11(false);
-  useEffect8(() => {
+  const [cities, setCities] = useState12([]);
+  const [loading, setLoading] = useState12(false);
+  useEffect9(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -11458,7 +11553,7 @@ function CityFormField({
     }
     fetchCities();
   }, [selectedState, isBrazil]);
-  return /* @__PURE__ */ jsx47(Fragment5, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx47(Fragment6, { children: isBrazil && cities.length > 0 ? /* @__PURE__ */ jsx47(
     Controller2,
     {
       name,
@@ -11805,10 +11900,10 @@ var EmailFormField = ({
 import { useController as useController3 } from "react-hook-form";
 
 // src/components/RichEditor/RichEditor.tsx
-import { useEffect as useEffect10, useState as useState13 } from "react";
+import { useEffect as useEffect11, useState as useState14 } from "react";
 
 // src/components/RichEditor/QuillComponent.tsx
-import { useState as useState12, useRef as useRef9, useEffect as useEffect9, useCallback as useCallback4 } from "react";
+import { useState as useState13, useRef as useRef9, useEffect as useEffect10, useCallback as useCallback4 } from "react";
 import { useQuill } from "react-quilljs";
 
 // src/utils/uploadService.ts
@@ -13011,10 +13106,10 @@ var QuillComponent = ({
   onCharacterCountChange,
   maxLength
 }) => {
-  const [showVideoModal, setShowVideoModal] = useState12(false);
-  const [videoUrl, setVideoUrl] = useState12("");
-  const [showLinkModal, setShowLinkModal] = useState12(false);
-  const [linkUrl, setLinkUrl] = useState12("");
+  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 { addToast, removeToast } = useToast();
@@ -13067,7 +13162,7 @@ var QuillComponent = ({
     }),
     [disabled, quill, addToast, removeToast, uploadConfig, onChange]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (!quill) return;
     if (value !== void 0 && value !== null) {
       const currentContent = quill.root.innerHTML;
@@ -13083,7 +13178,7 @@ var QuillComponent = ({
     }
     onCharacterCountChange == null ? void 0 : onCharacterCountChange(quill.getText().trim().length);
   }, [quill, value, onCharacterCountChange]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
         if (source === "user") {
@@ -13144,7 +13239,7 @@ var QuillComponent = ({
       }, 2e3);
     }
   }, [quill, onChange, handleImageUpload, onCharacterCountChange, formats]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (quill) {
       quill.enable(!disabled);
       if (!disabled) {
@@ -13211,7 +13306,7 @@ var QuillComponent = ({
     setVideoUrl("");
     setShowVideoModal(false);
   }, [videoUrl, quill]);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleClickOutside = (event) => {
       if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
         handleVideoCancel();
@@ -13373,8 +13468,8 @@ var QuillComponent_default = QuillComponent;
 // src/components/RichEditor/RichEditor.tsx
 import { jsx as jsx54 } from "react/jsx-runtime";
 var RichEditor = (props) => {
-  const [isClient, setIsClient] = useState13(false);
-  useEffect10(() => {
+  const [isClient, setIsClient] = useState14(false);
+  useEffect11(() => {
     setIsClient(typeof window !== "undefined");
   }, []);
   if (!isClient) return null;
@@ -13396,8 +13491,8 @@ var RichTextPresenter = ({ richText }) => {
 var RichTextPresenter_default = RichTextPresenter;
 
 // src/components/FormFields/RichEditorFormField.tsx
-import { useEffect as useEffect11, useState as useState14 } from "react";
-import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useEffect as useEffect12, useState as useState15 } from "react";
+import { Fragment as Fragment7, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 var getPlainTextLengthFromHtml = (html) => {
   var _a, _b;
   if (!html.trim()) return 0;
@@ -13445,7 +13540,7 @@ var RichEditorFormField = (_a) => {
       }
     }
   });
-  const [caracterQuantity, setCaracterQuantity] = useState14(
+  const [caracterQuantity, setCaracterQuantity] = useState15(
     () => getRemainingCharacters(maxLength, field.value)
   );
   const handleCharacterCountChange = (count) => {
@@ -13453,7 +13548,7 @@ var RichEditorFormField = (_a) => {
       setCaracterQuantity(Math.max(0, maxLength - count));
     }
   };
-  useEffect11(() => {
+  useEffect12(() => {
     setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
   }, [field.value, maxLength]);
   const fieldError = fieldState.error;
@@ -13471,7 +13566,7 @@ var RichEditorFormField = (_a) => {
         }
       ),
       /* @__PURE__ */ jsx56(Badge, { color: "grey", size: "xs", children: caracterQuantity })
-    ] }) : /* @__PURE__ */ jsx56(Fragment6, { children: label && /* @__PURE__ */ jsx56(
+    ] }) : /* @__PURE__ */ jsx56(Fragment7, { children: label && /* @__PURE__ */ jsx56(
       FormLabel,
       {
         name,
@@ -13727,7 +13822,7 @@ var TimePickerFormField = (_a) => {
 
 // src/components/FormFields/DateAndTimeFormField.tsx
 import { useController as useController7 } from "react-hook-form";
-import { useCallback as useCallback8, useEffect as useEffect12, useMemo as useMemo4, useState as useState15 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect13, useMemo as useMemo4, useState as useState16 } from "react";
 import { jsx as jsx60, jsxs as jsxs34 } from "react/jsx-runtime";
 var DateAndTimeFormField = (_a) => {
   var _b = _a, {
@@ -13815,9 +13910,9 @@ var DateAndTimeFormField = (_a) => {
       return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     }
   }, [isoValue]);
-  const [draftDate, setDraftDate] = useState15(selectedDateFromIso);
-  const [draftTime, setDraftTime] = useState15(selectedTimeFromIso);
-  useEffect12(() => {
+  const [draftDate, setDraftDate] = useState16(selectedDateFromIso);
+  const [draftTime, setDraftTime] = useState16(selectedTimeFromIso);
+  useEffect13(() => {
     setDraftDate(selectedDateFromIso);
     setDraftTime(selectedTimeFromIso);
   }, [selectedDateFromIso, selectedTimeFromIso]);
@@ -13908,11 +14003,11 @@ var DateAndTimeFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-import { useState as useState16, useCallback as useCallback9 } from "react";
+import { useState as useState17, useCallback as useCallback9 } from "react";
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = useState16(false);
-  const [progress, setProgress] = useState16(null);
-  const [error, setError] = useState16(null);
+  const [isUploading, setIsUploading] = useState17(false);
+  const [progress, setProgress] = useState17(null);
+  const [error, setError] = useState17(null);
   const {
     onSuccess,
     onError,