@lets-events/react 12.10.17 → 12.11.1

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;
@@ -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, {
@@ -3768,13 +3769,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 +3797,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 }) }),
@@ -9919,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;
@@ -9953,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 useState9 } 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 {
@@ -9977,7 +10053,23 @@ 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 useEffect9, useState as useState11 } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState11(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  useEffect9(() => {
+    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";
@@ -10090,6 +10182,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 +10231,17 @@ var ButtonSelectAllStyled = styled("button", {
 });
 
 // src/components/MultiSelect/index.tsx
-import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
-var MultiSelect = React10.forwardRef(
+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 = React11.forwardRef(
   ({
     placeholder,
     value: selectedValues = [],
     onValueChange,
-    options,
+    options = [],
+    optionsBySection,
     color,
     width = "100%",
     zIndex = "auto",
@@ -10146,52 +10255,64 @@ var MultiSelect = React10.forwardRef(
     selectedScroll = false,
     showMoreButton = false,
     showMoreButtonLabel = "Carregar mais",
-    showMoreButtonOnClick
+    showMoreButtonOnClick,
+    helperTextAfterField = ""
   }, fowardedRef) => {
-    const [isOpen, setIsOpen] = useState9(false);
-    const triggerRef = useRef8(null);
-    const [allOptionsSelected, setAllOptionsSelected] = useState9(false);
-    const labelByValue = useMemo2(() => {
-      return options.reduce((prev, curr) => {
+    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 = useMemo3(() => {
+      if (hasSections) {
+        return optionsBySection.reduce(
+          (acc, section) => acc.concat(section.options),
+          []
+        );
+      }
+      return options;
+    }, [hasSections, options, optionsBySection]);
+    const labelByValue = useMemo3(() => {
+      return resolvedOptions.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
           [curr.value]: curr.label
         });
       }, {});
-    }, [options]);
-    const handleRemove = useCallback2(
+    }, [resolvedOptions]);
+    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();
-        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(() => {
+    const text = useMemo3(() => {
       if (selectedValues.length > 0 && singleSelect) {
         const value = selectedValues[0];
         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);
     };
-    const handleToggle = useCallback2(
+    const handleToggle = useCallback3(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -10200,43 +10321,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(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}`))
+        ] }, 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(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}`))
+        ] }, 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 +10475,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 +10566,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 useState13 } from "react";
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 function ToggleElement({
   children,
   label,
@@ -10420,7 +10578,7 @@ function ToggleElement({
   buttonProps,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = useState10(defaultOpen);
+  const [internalOpen, setInternalOpen] = useState13(defaultOpen);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
   const handleClick = () => {
@@ -10430,7 +10588,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({
@@ -10744,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) => {
@@ -10767,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() === "")
@@ -10789,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);
@@ -11385,14 +11543,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 +11562,9 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-import { useEffect as useEffect8, useState as useState11 } 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 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 +11575,9 @@ function CityFormField({
 }) {
   const { control, watch } = useFormContext5();
   const selectedState = watch(stateName);
-  const [cities, setCities] = useState11([]);
-  const [loading, setLoading] = useState11(false);
-  useEffect8(() => {
+  const [cities, setCities] = useState14([]);
+  const [loading, setLoading] = useState14(false);
+  useEffect10(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -11458,7 +11616,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 +11963,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 useEffect12, useState as useState16 } 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 useState15, useRef as useRef10, useEffect as useEffect11, useCallback as useCallback5 } from "react";
 import { useQuill } from "react-quilljs";
 
 // src/utils/uploadService.ts
@@ -13011,12 +13169,12 @@ var QuillComponent = ({
   onCharacterCountChange,
   maxLength
 }) => {
-  const [showVideoModal, setShowVideoModal] = useState12(false);
-  const [videoUrl, setVideoUrl] = useState12("");
-  const [showLinkModal, setShowLinkModal] = useState12(false);
-  const [linkUrl, setLinkUrl] = useState12("");
-  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();
@@ -13035,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 {
@@ -13067,7 +13225,7 @@ var QuillComponent = ({
     }),
     [disabled, quill, addToast, removeToast, uploadConfig, onChange]
   );
-  useEffect9(() => {
+  useEffect11(() => {
     if (!quill) return;
     if (value !== void 0 && value !== null) {
       const currentContent = quill.root.innerHTML;
@@ -13083,7 +13241,7 @@ var QuillComponent = ({
     }
     onCharacterCountChange == null ? void 0 : onCharacterCountChange(quill.getText().trim().length);
   }, [quill, value, onCharacterCountChange]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
         if (source === "user") {
@@ -13144,7 +13302,7 @@ var QuillComponent = ({
       }, 2e3);
     }
   }, [quill, onChange, handleImageUpload, onCharacterCountChange, formats]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (quill) {
       quill.enable(!disabled);
       if (!disabled) {
@@ -13155,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();
@@ -13174,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();
@@ -13211,7 +13369,7 @@ var QuillComponent = ({
     setVideoUrl("");
     setShowVideoModal(false);
   }, [videoUrl, quill]);
-  useEffect9(() => {
+  useEffect11(() => {
     const handleClickOutside = (event) => {
       if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
         handleVideoCancel();
@@ -13373,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] = useState13(false);
-  useEffect10(() => {
+  const [isClient, setIsClient] = useState16(false);
+  useEffect12(() => {
     setIsClient(typeof window !== "undefined");
   }, []);
   if (!isClient) return null;
@@ -13396,8 +13554,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 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;
   if (!html.trim()) return 0;
@@ -13445,7 +13603,7 @@ var RichEditorFormField = (_a) => {
       }
     }
   });
-  const [caracterQuantity, setCaracterQuantity] = useState14(
+  const [caracterQuantity, setCaracterQuantity] = useState17(
     () => getRemainingCharacters(maxLength, field.value)
   );
   const handleCharacterCountChange = (count) => {
@@ -13453,7 +13611,7 @@ var RichEditorFormField = (_a) => {
       setCaracterQuantity(Math.max(0, maxLength - count));
     }
   };
-  useEffect11(() => {
+  useEffect13(() => {
     setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
   }, [field.value, maxLength]);
   const fieldError = fieldState.error;
@@ -13471,7 +13629,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,
@@ -13499,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, {
@@ -13525,7 +13683,7 @@ var CalendarFormField = (_a) => {
     "maxYearsFromNow",
     "maxDate"
   ]);
-  const handleValidate = useCallback5(
+  const handleValidate = useCallback6(
     (value) => {
       var _a2;
       if (value === void 0 || value === null) {
@@ -13580,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) => {
@@ -13607,7 +13765,7 @@ var DoubleCalendarFormField = (_a) => {
     "maxDate",
     "disabled"
   ]);
-  const handleValidate = useCallback6(
+  const handleValidate = useCallback7(
     (value) => {
       var _a2;
       if (value === void 0 || value === null) {
@@ -13656,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, {
@@ -13674,7 +13832,7 @@ var TimePickerFormField = (_a) => {
     "validationErrorMessage",
     "rules"
   ]);
-  const handleValidate = useCallback7(
+  const handleValidate = useCallback8(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || value === "") {
@@ -13727,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 useEffect12, useMemo as useMemo4, useState as useState15 } 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, {
@@ -13756,7 +13914,7 @@ var DateAndTimeFormField = (_a) => {
     "maxDate"
   ]);
   const { addToast } = useToast();
-  const handleDisabledClick = useCallback8(
+  const handleDisabledClick = useCallback9(
     (event) => {
       if (!disabled) return;
       event.preventDefault();
@@ -13769,7 +13927,7 @@ var DateAndTimeFormField = (_a) => {
     },
     [addToast, disabled, disabledInfo]
   );
-  const handleDisabledMouseDown = useCallback8(
+  const handleDisabledMouseDown = useCallback9(
     (event) => {
       if (!disabled) return;
       event.preventDefault();
@@ -13777,7 +13935,7 @@ var DateAndTimeFormField = (_a) => {
     },
     [disabled]
   );
-  const handleValidate = useCallback8(
+  const handleValidate = useCallback9(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || value === "") {
@@ -13800,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);
@@ -13815,13 +13973,13 @@ 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] = 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("");
@@ -13908,11 +14066,11 @@ var DateAndTimeFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-import { useState as useState16, useCallback as useCallback9 } from "react";
+import { useState as useState19, useCallback as useCallback10 } from "react";
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = useState16(false);
-  const [progress, setProgress] = useState16(null);
-  const [error, setError] = useState16(null);
+  const [isUploading, setIsUploading] = useState19(false);
+  const [progress, setProgress] = useState19(null);
+  const [error, setError] = useState19(null);
   const {
     onSuccess,
     onError,
@@ -13922,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";
@@ -13940,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;
@@ -13993,7 +14151,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = useCallback9(() => {
+  const reset = useCallback10(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);