@lets-events/react 12.10.17 → 12.11.0

package/dist/index.js

@@ -149,7 +149,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment7 = REACT_FRAGMENT_TYPE;
+        var Fragment8 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -208,7 +208,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment7;
+        exports2.Fragment = Fragment8;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -3885,13 +3885,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__ */ (0, import_jsx_runtime13.jsxs)(import_radix_ui.Dialog.Root, __spreadProps(__spreadValues({}, props), { children: [
@@ -3905,9 +3913,14 @@ function Modal(_a) {
         children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           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__ */ (0, import_jsx_runtime13.jsxs)(ModalHeaderStyled, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
@@ -10086,11 +10099,27 @@ function Tooltip({
 }
 
 // src/components/MultiSelect/index.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_themes19 = require("@radix-ui/themes");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
-var import_react19 = require("react");
+var import_react20 = require("react");
+
+// src/hooks/useMediaQuery.ts
+var import_react18 = require("react");
+function useMediaQuery(query) {
+  const [matches, setMatches] = (0, import_react18.useState)(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  (0, import_react18.useEffect)(() => {
+    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
 var import_themes18 = require("@radix-ui/themes");
@@ -10203,6 +10232,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",
@@ -10240,12 +10282,16 @@ var ButtonSelectAllStyled = styled("button", {
 
 // src/components/MultiSelect/index.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var MultiSelect = import_react18.default.forwardRef(
+var MOBILE_MODAL_MAX_HEIGHT = "90vh";
+var MOBILE_MODAL_HEADER_OFFSET = "65px";
+var MOBILE_BREAKPOINT = "(max-width: 840px)";
+var MultiSelect = import_react19.default.forwardRef(
   ({
     placeholder,
     value: selectedValues = [],
     onValueChange,
-    options,
+    options = [],
+    optionsBySection,
     color,
     width = "100%",
     zIndex = "auto",
@@ -10259,52 +10305,64 @@ var MultiSelect = import_react18.default.forwardRef(
     selectedScroll = false,
     showMoreButton = false,
     showMoreButtonLabel = "Carregar mais",
-    showMoreButtonOnClick
+    showMoreButtonOnClick,
+    helperTextAfterField = ""
   }, fowardedRef) => {
-    const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
-    const triggerRef = (0, import_react18.useRef)(null);
-    const [allOptionsSelected, setAllOptionsSelected] = (0, import_react18.useState)(false);
-    const labelByValue = (0, import_react19.useMemo)(() => {
-      return options.reduce((prev, curr) => {
+    const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+    const triggerRef = (0, import_react19.useRef)(null);
+    const [allOptionsSelected, setAllOptionsSelected] = (0, import_react19.useState)(false);
+    const isMobile = useMediaQuery(MOBILE_BREAKPOINT);
+    const hasSections = !!(optionsBySection == null ? void 0 : optionsBySection.length);
+    const resolvedOptions = (0, import_react20.useMemo)(() => {
+      if (hasSections) {
+        return optionsBySection.reduce(
+          (acc, section) => acc.concat(section.options),
+          []
+        );
+      }
+      return options;
+    }, [hasSections, options, optionsBySection]);
+    const labelByValue = (0, import_react20.useMemo)(() => {
+      return resolvedOptions.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
           [curr.value]: curr.label
         });
       }, {});
-    }, [options]);
-    const handleRemove = (0, import_react18.useCallback)(
+    }, [resolvedOptions]);
+    const handleRemove = (0, import_react19.useCallback)(
       (value) => {
         const newValue = selectedValues.filter((v) => v !== value);
         onValueChange == null ? void 0 : onValueChange(newValue);
       },
       [selectedValues, onValueChange]
     );
-    const handleSelectAll = (0, import_react18.useCallback)(
+    const handleSelectAll = (0, import_react19.useCallback)(
       (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 = (0, import_react19.useMemo)(() => {
+    const text = (0, import_react20.useMemo)(() => {
       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 = (0, import_react18.useCallback)(
+    const handleToggle = (0, import_react19.useCallback)(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -10313,43 +10371,153 @@ var MultiSelect = import_react18.default.forwardRef(
       },
       [disabled]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes19.Theme, { style: width !== "100%" ? { width } : void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes19.DropdownMenu.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes19.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-          StyledTrigger,
+    const triggerElement = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      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__ */ (0, import_jsx_runtime27.jsx)(
+            StyledText,
+            {
+              typography: "labelMedium",
+              color: disabled ? "dark400" : void 0,
+              children: text
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            import_react_fontawesome3.FontAwesomeIcon,
+            {
+              icon: isOpen ? import_free_solid_svg_icons3.faChevronUp : import_free_solid_svg_icons3.faChevronDown,
+              size: "sm",
+              color: disabled ? colors.dark400 : colors.dark600
+            }
+          )
+        ]
+      }
+    );
+    const selectAllBlock = selectedAllOptions && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+        ButtonSelectAllStyled,
+        {
+          css: itemStyle,
+          onClick: (e) => {
+            handleSelectAll(e);
+            setIsOpen(false);
+          },
+          type: "button",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: allOptionsSelected ? "checked" : "" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: selectedAllText ? selectedAllText : "Selecionar Todos" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledSectionDivider, {})
+    ] });
+    const showMoreButtonBlock = showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      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__ */ (0, import_jsx_runtime27.jsxs)(import_react19.default.Fragment, { children: [
+          sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledSectionDivider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledSectionTitle, { typography: "labelSmall", fontWeight: "semibold", color: "dark600", children: section.name }),
+          section.options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, `${section.name}-${i}`))
+        ] }, section.name));
+      }
+      return resolvedOptions.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i));
+    };
+    const renderSingleSelectOptions = () => {
+      if (hasSections) {
+        return optionsBySection.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react19.default.Fragment, { children: [
+          sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledSectionDivider, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledSectionTitle, { typography: "labelSmall", fontWeight: "semibold", color: "dark600", children: section.name }),
+          section.options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, `${section.name}-${i}`))
+        ] }, section.name));
+      }
+      return resolvedOptions.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i));
+    };
+    const optionsContent = !singleSelect ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      CheckboxGroup,
+      {
+        value: selectedValues,
+        onValueChange: (v) => {
+          onValueChange == null ? void 0 : onValueChange(v);
+          setAllOptionsSelected((v || []).length === resolvedOptions.length);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          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__ */ (0, import_jsx_runtime27.jsx)(
-                StyledText,
-                {
-                  typography: "labelMedium",
-                  color: disabled ? "dark400" : void 0,
-                  children: text
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                import_react_fontawesome3.FontAwesomeIcon,
-                {
-                  icon: isOpen ? import_free_solid_svg_icons3.faChevronUp : import_free_solid_svg_icons3.faChevronDown,
-                  size: "sm",
-                  color: disabled ? colors.dark400 : colors.dark600
-                }
-              )
+              selectAllBlock,
+              renderCheckboxOptions(),
+              showMoreButtonBlock
             ]
           }
-        ) }),
+        )
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      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__ */ (0, import_jsx_runtime27.jsxs)(import_themes19.Theme, { style: width !== "100%" ? { width } : void 0, children: [
+      isMobile ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        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__ */ (0, import_jsx_runtime27.jsx)(
+            StyledModalOptionsWrapper,
+            {
+              css: { maxHeight: `calc(${MOBILE_MODAL_MAX_HEIGHT} - ${MOBILE_MODAL_HEADER_OFFSET})` },
+              children: optionsContent
+            }
+          )
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_themes19.DropdownMenu.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_themes19.DropdownMenu.Trigger, { children: triggerElement }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           StyledContent,
           {
@@ -10357,158 +10525,85 @@ var MultiSelect = import_react18.default.forwardRef(
               width: "100%",
               zIndex: zIndex === "auto" ? 999999 : zIndex
             },
-            children: !singleSelect ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-              CheckboxGroup,
-              {
-                value: selectedValues,
-                onValueChange: (v) => {
-                  onValueChange == null ? void 0 : onValueChange(v);
-                  setAllOptionsSelected((v || []).length === options.length);
-                },
-                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-                  StyledFlexWithMaxHeight,
-                  {
-                    direction: "column",
-                    gap: 8,
-                    hasMaxHeight: !!maxHeight,
-                    style: maxHeight ? { maxHeight } : void 0,
-                    children: [
-                      selectedAllOptions && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-                        ButtonSelectAllStyled,
-                        {
-                          css: itemStyle,
-                          onClick: (e) => {
-                            handleSelectAll(e), setIsOpen(false);
-                          },
-                          type: "button",
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: allOptionsSelected ? "checked" : "" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: selectedAllText ? selectedAllText : "Selecionar Todos" })
-                          ]
-                        }
-                      ),
-                      options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i)),
-                      showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                        Button,
-                        {
-                          variant: "menuDropdownItem",
-                          color: "brand",
-                          onClick: showMoreButtonOnClick,
-                          fontWeight: "semibold",
-                          type: "button",
-                          css: {
-                            justifyContent: "flex-start",
-                            color: "var(--colors-brand500)!important"
-                          },
-                          children: showMoreButtonLabel
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-              StyledFlexWithMaxHeight,
+            children: optionsContent
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: { padding: "4px 8px 0 0" }, children: [
+        helperTextAfterField && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "captionMedium", fontWeight: "regular", color: "dark600", children: helperTextAfterField }),
+        selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          StyledFlexSelectedItems,
+          {
+            direction: selectedOrientation,
+            gap: 8,
+            align: selectedOrientation === "column" ? "start" : "center",
+            justify: "start",
+            css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
+            children: allOptionsSelected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              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__ */ (0, import_jsx_runtime27.jsx)(StyledItem2, { onClick: () => handleItemClick(value), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { typography: "labelSmall", children: label }) }, i)),
-                  showMoreButton && showMoreButtonOnClick && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                    Button,
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    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__ */ (0, import_jsx_runtime27.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faSquareXmark, size: "sm" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    Text,
+                    {
+                      typography: "captionMedium",
+                      fontWeight: "regular",
+                      color: "dark600",
+                      children: "Todos selecionados"
+                    }
+                  )
+                ]
+              },
+              "all-selected"
+            ) : selectedValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+              Flex,
+              {
+                gap: 4,
+                align: "center",
+                css: { flexWrap: "wrap" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    CloseBtnStyled,
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleRemove(value);
                       },
-                      children: showMoreButtonLabel
+                      type: "button",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faSquareXmark, size: "sm" })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    Text,
+                    {
+                      typography: "captionMedium",
+                      fontWeight: "regular",
+                      color: "dark600",
+                      children: labelByValue[value]
                     }
                   )
                 ]
-              }
-            )
+              },
+              value
+            ))
           }
         )
-      ] }),
-      selectedValues.length > 0 && showSelectedValues && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-        StyledFlexSelectedItems,
-        {
-          direction: selectedOrientation,
-          gap: 8,
-          align: selectedOrientation === "column" ? "start" : "center",
-          justify: "start",
-          css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
-          children: allOptionsSelected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-            Flex,
-            {
-              gap: 4,
-              align: "center",
-              css: { flexWrap: "wrap" },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  CloseBtnStyled,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onValueChange == null ? void 0 : onValueChange([]);
-                      setAllOptionsSelected(false);
-                    },
-                    type: "button",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faSquareXmark, size: "sm" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  Text,
-                  {
-                    typography: "captionMedium",
-                    fontWeight: "regular",
-                    color: "dark600",
-                    children: "Todos selecionados"
-                  }
-                )
-              ]
-            },
-            "all-selected"
-          ) : selectedValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-            Flex,
-            {
-              gap: 4,
-              align: "center",
-              css: { flexWrap: "wrap" },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  CloseBtnStyled,
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      handleRemove(value);
-                    },
-                    type: "button",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faSquareXmark, size: "sm" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  Text,
-                  {
-                    typography: "captionMedium",
-                    fontWeight: "regular",
-                    color: "dark600",
-                    children: labelByValue[value]
-                  }
-                )
-              ]
-            },
-            value
-          ))
-        }
-      )
+      ] })
     ] });
   }
 );
@@ -10521,7 +10616,7 @@ var Divider = styled("div", {
 });
 
 // src/components/ToggleElement/index.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function ToggleElement({
   children,
@@ -10533,7 +10628,7 @@ function ToggleElement({
   buttonProps,
   onOpenChange
 }) {
-  const [internalOpen, setInternalOpen] = (0, import_react20.useState)(defaultOpen);
+  const [internalOpen, setInternalOpen] = (0, import_react21.useState)(defaultOpen);
   const isControlled = open !== void 0;
   const isOpen = isControlled ? open : internalOpen;
   const handleClick = () => {
@@ -10855,7 +10950,7 @@ var TextAreaFormField = (_a) => {
 
 // src/components/FormFields/TextFormField.tsx
 var import_react_hook_form2 = require("react-hook-form");
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_mask2 = require("@react-input/mask");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var TextFormField = (_a) => {
@@ -10878,7 +10973,7 @@ var TextFormField = (_a) => {
     "onChange",
     "valueFormatter"
   ]);
-  const handleValidate = (0, import_react21.useCallback)(
+  const handleValidate = (0, import_react22.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || !required && value.trim() === "")
@@ -10900,7 +10995,7 @@ var TextFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: formValue, onChange: formChange } = field;
-  const formattedValue = (0, import_react21.useMemo)(() => {
+  const formattedValue = (0, import_react22.useMemo)(() => {
     let value = formValue;
     if (valueFormatter) value = valueFormatter.format(value);
     if (mask) value = (0, import_mask2.format)(value != null ? value : "", mask);
@@ -11512,7 +11607,7 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_react_hook_form7 = require("react-hook-form");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function CityFormField({
@@ -11525,9 +11620,9 @@ function CityFormField({
 }) {
   const { control, watch } = (0, import_react_hook_form7.useFormContext)();
   const selectedState = watch(stateName);
-  const [cities, setCities] = (0, import_react22.useState)([]);
-  const [loading, setLoading] = (0, import_react22.useState)(false);
-  (0, import_react22.useEffect)(() => {
+  const [cities, setCities] = (0, import_react23.useState)([]);
+  const [loading, setLoading] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -11913,10 +12008,10 @@ var EmailFormField = ({
 var import_react_hook_form12 = require("react-hook-form");
 
 // src/components/RichEditor/RichEditor.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/components/RichEditor/QuillComponent.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_quilljs = require("react-quilljs");
 
 // src/utils/uploadService.ts
@@ -13119,12 +13214,12 @@ var QuillComponent = ({
   onCharacterCountChange,
   maxLength
 }) => {
-  const [showVideoModal, setShowVideoModal] = (0, import_react23.useState)(false);
-  const [videoUrl, setVideoUrl] = (0, import_react23.useState)("");
-  const [showLinkModal, setShowLinkModal] = (0, import_react23.useState)(false);
-  const [linkUrl, setLinkUrl] = (0, import_react23.useState)("");
-  const videoModalRef = (0, import_react23.useRef)(null);
-  const linkModalRef = (0, import_react23.useRef)(null);
+  const [showVideoModal, setShowVideoModal] = (0, import_react24.useState)(false);
+  const [videoUrl, setVideoUrl] = (0, import_react24.useState)("");
+  const [showLinkModal, setShowLinkModal] = (0, import_react24.useState)(false);
+  const [linkUrl, setLinkUrl] = (0, import_react24.useState)("");
+  const videoModalRef = (0, import_react24.useRef)(null);
+  const linkModalRef = (0, import_react24.useRef)(null);
   const { addToast, removeToast } = useToast();
   const formatHTML = (html) => {
     const parser = new DOMParser();
@@ -13143,7 +13238,7 @@ var QuillComponent = ({
     placeholder,
     readOnly: disabled
   });
-  const handleImageUpload = (0, import_react23.useCallback)(
+  const handleImageUpload = (0, import_react24.useCallback)(
     (file) => __async(null, null, function* () {
       if (disabled || !quill || !uploadConfig) return;
       try {
@@ -13175,7 +13270,7 @@ var QuillComponent = ({
     }),
     [disabled, quill, addToast, removeToast, uploadConfig, onChange]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!quill) return;
     if (value !== void 0 && value !== null) {
       const currentContent = quill.root.innerHTML;
@@ -13191,7 +13286,7 @@ var QuillComponent = ({
     }
     onCharacterCountChange == null ? void 0 : onCharacterCountChange(quill.getText().trim().length);
   }, [quill, value, onCharacterCountChange]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
         if (source === "user") {
@@ -13252,7 +13347,7 @@ var QuillComponent = ({
       }, 2e3);
     }
   }, [quill, onChange, handleImageUpload, onCharacterCountChange, formats]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (quill) {
       quill.enable(!disabled);
       if (!disabled) {
@@ -13263,11 +13358,11 @@ var QuillComponent = ({
       }
     }
   }, [quill, disabled]);
-  const handleLinkCancel = (0, import_react23.useCallback)(() => {
+  const handleLinkCancel = (0, import_react24.useCallback)(() => {
     setLinkUrl("");
     setShowLinkModal(false);
   }, []);
-  const handleLinkSubmit = (0, import_react23.useCallback)(() => {
+  const handleLinkSubmit = (0, import_react24.useCallback)(() => {
     if (!linkUrl.trim() || !quill) return;
     const url = linkUrl.trim();
     const selection = quill.getSelection();
@@ -13282,11 +13377,11 @@ var QuillComponent = ({
     setLinkUrl("");
     setShowLinkModal(false);
   }, [linkUrl, quill]);
-  const handleVideoCancel = (0, import_react23.useCallback)(() => {
+  const handleVideoCancel = (0, import_react24.useCallback)(() => {
     setVideoUrl("");
     setShowVideoModal(false);
   }, []);
-  const handleVideoSubmit = (0, import_react23.useCallback)(() => {
+  const handleVideoSubmit = (0, import_react24.useCallback)(() => {
     var _a, _b;
     if (!videoUrl.trim() || !quill) return;
     let processedUrl = videoUrl.trim();
@@ -13319,7 +13414,7 @@ var QuillComponent = ({
     setVideoUrl("");
     setShowVideoModal(false);
   }, [videoUrl, quill]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
         handleVideoCancel();
@@ -13481,8 +13576,8 @@ var QuillComponent_default = QuillComponent;
 // src/components/RichEditor/RichEditor.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var RichEditor = (props) => {
-  const [isClient, setIsClient] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(() => {
+  const [isClient, setIsClient] = (0, import_react25.useState)(false);
+  (0, import_react25.useEffect)(() => {
     setIsClient(typeof window !== "undefined");
   }, []);
   if (!isClient) return null;
@@ -13504,7 +13599,7 @@ var RichTextPresenter = ({ richText }) => {
 var RichTextPresenter_default = RichTextPresenter;
 
 // src/components/FormFields/RichEditorFormField.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var getPlainTextLengthFromHtml = (html) => {
   var _a, _b;
@@ -13553,7 +13648,7 @@ var RichEditorFormField = (_a) => {
       }
     }
   });
-  const [caracterQuantity, setCaracterQuantity] = (0, import_react25.useState)(
+  const [caracterQuantity, setCaracterQuantity] = (0, import_react26.useState)(
     () => getRemainingCharacters(maxLength, field.value)
   );
   const handleCharacterCountChange = (count) => {
@@ -13561,7 +13656,7 @@ var RichEditorFormField = (_a) => {
       setCaracterQuantity(Math.max(0, maxLength - count));
     }
   };
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     setCaracterQuantity(getRemainingCharacters(maxLength, field.value));
   }, [field.value, maxLength]);
   const fieldError = fieldState.error;
@@ -13607,7 +13702,7 @@ var RichEditorFormField = (_a) => {
 
 // src/components/FormFields/CalendarFormField.tsx
 var import_react_hook_form13 = require("react-hook-form");
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var CalendarFormField = (_a) => {
   var _b = _a, {
@@ -13633,7 +13728,7 @@ var CalendarFormField = (_a) => {
     "maxYearsFromNow",
     "maxDate"
   ]);
-  const handleValidate = (0, import_react26.useCallback)(
+  const handleValidate = (0, import_react27.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null) {
@@ -13688,7 +13783,7 @@ var CalendarFormField = (_a) => {
 };
 
 // src/components/FormFields/DoubleCalendarFormField.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_hook_form14 = require("react-hook-form");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var DoubleCalendarFormField = (_a) => {
@@ -13715,7 +13810,7 @@ var DoubleCalendarFormField = (_a) => {
     "maxDate",
     "disabled"
   ]);
-  const handleValidate = (0, import_react27.useCallback)(
+  const handleValidate = (0, import_react28.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null) {
@@ -13764,7 +13859,7 @@ var DoubleCalendarFormField = (_a) => {
 
 // src/components/FormFields/TimePickerFormField.tsx
 var import_react_hook_form15 = require("react-hook-form");
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var TimePickerFormField = (_a) => {
   var _b = _a, {
@@ -13782,7 +13877,7 @@ var TimePickerFormField = (_a) => {
     "validationErrorMessage",
     "rules"
   ]);
-  const handleValidate = (0, import_react28.useCallback)(
+  const handleValidate = (0, import_react29.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || value === "") {
@@ -13835,7 +13930,7 @@ var TimePickerFormField = (_a) => {
 
 // src/components/FormFields/DateAndTimeFormField.tsx
 var import_react_hook_form16 = require("react-hook-form");
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var DateAndTimeFormField = (_a) => {
   var _b = _a, {
@@ -13864,7 +13959,7 @@ var DateAndTimeFormField = (_a) => {
     "maxDate"
   ]);
   const { addToast } = useToast();
-  const handleDisabledClick = (0, import_react29.useCallback)(
+  const handleDisabledClick = (0, import_react30.useCallback)(
     (event) => {
       if (!disabled) return;
       event.preventDefault();
@@ -13877,7 +13972,7 @@ var DateAndTimeFormField = (_a) => {
     },
     [addToast, disabled, disabledInfo]
   );
-  const handleDisabledMouseDown = (0, import_react29.useCallback)(
+  const handleDisabledMouseDown = (0, import_react30.useCallback)(
     (event) => {
       if (!disabled) return;
       event.preventDefault();
@@ -13885,7 +13980,7 @@ var DateAndTimeFormField = (_a) => {
     },
     [disabled]
   );
-  const handleValidate = (0, import_react29.useCallback)(
+  const handleValidate = (0, import_react30.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || value === "") {
@@ -13908,7 +14003,7 @@ var DateAndTimeFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: isoValue, onChange: setIsoValue } = field;
-  const { selectedDateFromIso, selectedTimeFromIso } = (0, import_react29.useMemo)(() => {
+  const { selectedDateFromIso, selectedTimeFromIso } = (0, import_react30.useMemo)(() => {
     if (!isoValue) return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     try {
       const date = new Date(isoValue);
@@ -13923,13 +14018,13 @@ var DateAndTimeFormField = (_a) => {
       return { selectedDateFromIso: void 0, selectedTimeFromIso: void 0 };
     }
   }, [isoValue]);
-  const [draftDate, setDraftDate] = (0, import_react29.useState)(selectedDateFromIso);
-  const [draftTime, setDraftTime] = (0, import_react29.useState)(selectedTimeFromIso);
-  (0, import_react29.useEffect)(() => {
+  const [draftDate, setDraftDate] = (0, import_react30.useState)(selectedDateFromIso);
+  const [draftTime, setDraftTime] = (0, import_react30.useState)(selectedTimeFromIso);
+  (0, import_react30.useEffect)(() => {
     setDraftDate(selectedDateFromIso);
     setDraftTime(selectedTimeFromIso);
   }, [selectedDateFromIso, selectedTimeFromIso]);
-  const combineDateTime = (0, import_react29.useCallback)(
+  const combineDateTime = (0, import_react30.useCallback)(
     (date, time) => {
       if (!date) {
         setIsoValue("");
@@ -14016,11 +14111,11 @@ var DateAndTimeFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = (0, import_react30.useState)(false);
-  const [progress, setProgress] = (0, import_react30.useState)(null);
-  const [error, setError] = (0, import_react30.useState)(null);
+  const [isUploading, setIsUploading] = (0, import_react31.useState)(false);
+  const [progress, setProgress] = (0, import_react31.useState)(null);
+  const [error, setError] = (0, import_react31.useState)(null);
   const {
     onSuccess,
     onError,
@@ -14030,7 +14125,7 @@ var useImageUpload = (options) => {
     allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
     uploadConfig
   } = options;
-  const validateFile = (0, import_react30.useCallback)(
+  const validateFile = (0, import_react31.useCallback)(
     (file) => {
       if (!allowedTypes.includes(file.type)) {
         const errorMsg = "Tipo de arquivo n\xE3o suportado";
@@ -14048,7 +14143,7 @@ var useImageUpload = (options) => {
     },
     [allowedTypes, maxFileSize, onError]
   );
-  const uploadFile = (0, import_react30.useCallback)(
+  const uploadFile = (0, import_react31.useCallback)(
     (file) => __async(null, null, function* () {
       if (!validateFile(file)) {
         return null;
@@ -14101,7 +14196,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = (0, import_react30.useCallback)(() => {
+  const reset = (0, import_react31.useCallback)(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);