@lets-events/react 12.6.0 → 12.6.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@12.6.0 build
+> @lets-events/react@12.6.1 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,16 +9,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist\index.js 403.16 KB
-CJS ⚡️ Build success in 1079ms
-ESM dist\index.mjs 388.31 KB
-ESM ⚡️ Build success in 1080ms
+ESM dist\index.mjs 389.01 KB
+ESM ⚡️ Build success in 203ms
+CJS dist\index.js 404.02 KB
+CJS ⚡️ Build success in 203ms
 DTS Build start
-DTS ⚡️ Build success in 9868ms
+DTS ⚡️ Build success in 4551ms
 DTS dist\index.d.mts 402.83 KB
 DTS dist\index.d.ts  402.83 KB
-npm notice
-npm notice New minor version of npm available! 11.5.1 -> 11.7.0
-npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.7.0
-npm notice To update run: npm install -g npm@11.7.0
-npm notice

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 12.6.1
+
+### Patch Changes
+
+- fix textformfield label
+
 ## 12.6.0
 
 ### Minor Changes

package/dist/index.js

@@ -1882,7 +1882,21 @@ function Button(_a) {
         return "md";
     }
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpinningDiv, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "circle-notch", size: spinnerSize }) }) : children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { visibility: loading ? "hidden" : void 0 }, children }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpinningDiv, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "circle-notch", size: spinnerSize }) })
+      }
+    )
+  ] }) }));
 }
 
 // src/components/ButtonGroup.tsx
@@ -10274,6 +10288,8 @@ var ErrorFormMessage = ({ message: message2 }) => {
 };
 
 // src/components/FormFields/subComponents/FormLabel.tsx
+var import_react_fontawesome5 = require("@fortawesome/react-fontawesome");
+var import_free_solid_svg_icons5 = require("@fortawesome/free-solid-svg-icons");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var FormLabel = ({
   name,
@@ -10282,19 +10298,19 @@ var FormLabel = ({
   required
 }) => {
   if (!label) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    Text,
-    {
-      typography: "labelMedium",
-      fontWeight: "medium",
-      color: haveError ? "error600" : "dark700",
-      id: `${name}-label`,
-      children: [
-        label,
-        !required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { color: "dark500", children: " (opcional)" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex2, { align: "start", gap: 6, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      Text,
+      {
+        typography: "labelMedium",
+        fontWeight: "medium",
+        color: haveError ? "error600" : "dark700",
+        id: `${name}-label`,
+        children: label
+      }
+    ),
+    required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_fontawesome5.FontAwesomeIcon, { icon: import_free_solid_svg_icons5.faAsterisk, fontSize: "8px", color: "#AD1F2B" })
+  ] });
 };
 
 // src/components/FormFields/TextAreaFormField.tsx
@@ -11259,10 +11275,7 @@ var RadioGroupFormField = ({
             color: haveError ? "error" : color,
             fontWeight,
             disabled,
-            children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("label", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RadioItem, { value: option.value }),
-              option.label
-            ] }, option.value))
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Flex2, { direction: "column", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RadioItem, { value: option.value, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { typography: "labelSmall", children: option.label }) }, option.value)) })
           }
         )
       }

package/dist/index.mjs

@@ -1745,7 +1745,7 @@ var SpinningDiv = styled("div", {
 
 // src/components/Button/index.tsx
 import { Button as ButtonRadix2 } from "@radix-ui/themes";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function Button(_a) {
   var _b = _a, { asChild, children, loading } = _b, props = __objRest(_b, ["asChild", "children", "loading"]);
   const Component = asChild ? ButtonRadix2 : "button";
@@ -1764,7 +1764,21 @@ function Button(_a) {
         return "md";
     }
   }, [size]);
-  return /* @__PURE__ */ jsx3(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: loading ? /* @__PURE__ */ jsx3(SpinningDiv, { children: /* @__PURE__ */ jsx3(Icon_default, { name: "circle-notch", size: spinnerSize }) }) : children }));
+  return /* @__PURE__ */ jsx3(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx3("div", { style: { visibility: loading ? "hidden" : void 0 }, children }),
+    loading && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)"
+        },
+        children: /* @__PURE__ */ jsx3(SpinningDiv, { children: /* @__PURE__ */ jsx3(Icon_default, { name: "circle-notch", size: spinnerSize }) })
+      }
+    )
+  ] }) }));
 }
 
 // src/components/ButtonGroup.tsx
@@ -2407,7 +2421,7 @@ function Flex2(_a) {
 
 // src/components/TextField.tsx
 import { format, useMask, unformat } from "@react-input/mask";
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var TextFieldStyled = styled(TextFieldRadix.Root, {
   height: "$40",
   fontFamily: "$default",
@@ -2639,8 +2653,8 @@ var TextField = React.forwardRef(
       updateCharCountBadge();
       (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
     };
-    return /* @__PURE__ */ jsxs(Flex2, { direction: "column", css: { width: "100%", position: "relative" }, children: [
-      /* @__PURE__ */ jsxs(Flex2, { gap: "0", css: { width: "100%" }, children: [
+    return /* @__PURE__ */ jsxs2(Flex2, { direction: "column", css: { width: "100%", position: "relative" }, children: [
+      /* @__PURE__ */ jsxs2(Flex2, { gap: "0", css: { width: "100%" }, children: [
         !!addon && /* @__PURE__ */ jsx7(
           InputAddon,
           {
@@ -2649,7 +2663,7 @@ var TextField = React.forwardRef(
             children: addon
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           TextFieldStyled,
           __spreadProps(__spreadValues({
             color: hasError ? "error" : color || "default",
@@ -3081,7 +3095,7 @@ function CheckboxItem(_a) {
 
 // src/components/Filter.tsx
 import { Theme, DropdownMenu } from "@radix-ui/themes";
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var FilterContentStyled = styled(DropdownMenu.Content, {
   background: "white",
   padding: "$8 $12",
@@ -3191,8 +3205,8 @@ function Filter(_a) {
     "typography",
     "fontWeight"
   ]);
-  return /* @__PURE__ */ jsx10(Theme, { children: /* @__PURE__ */ jsx10(DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs2(FilterStyled, { typography, fontWeight, children: [
-    /* @__PURE__ */ jsx10(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs2("button", { "aria-label": placeholder || "Fitrar", children: [
+  return /* @__PURE__ */ jsx10(Theme, { children: /* @__PURE__ */ jsx10(DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs3(FilterStyled, { typography, fontWeight, children: [
+    /* @__PURE__ */ jsx10(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs3("button", { "aria-label": placeholder || "Fitrar", children: [
       /* @__PURE__ */ jsx10(Icon, { name: "filter" }),
       /* @__PURE__ */ jsx10("span", { children: placeholder || "Fitrar" }),
       /* @__PURE__ */ jsx10(DropdownMenu.TriggerIcon, {})
@@ -3227,7 +3241,7 @@ import React2, {
 } from "react";
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var DropdownMenuItemStyled = styled("div", {
   fontFamily: "$default",
   color: "$dark600",
@@ -3392,7 +3406,7 @@ function DropdownMenu2(_a) {
       document.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     DropdownMenuStyled,
     __spreadProps(__spreadValues({
       ref: dropdownRef,
@@ -3401,7 +3415,7 @@ function DropdownMenu2(_a) {
       color
     }, props), {
       children: [
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           "button",
           {
             "aria-label": placeholder || "Filtrar",
@@ -3605,7 +3619,7 @@ import { Box as BoxRadix } from "@radix-ui/themes";
 var Box = BoxRadix;
 
 // src/components/Modal.tsx
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 var ModalContentStyled = styled(ModalRadix.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -3666,7 +3680,7 @@ function Modal(_a) {
     "maxWidth"
   ]);
   const { onOpenChange } = props;
-  return /* @__PURE__ */ jsxs4(ModalRadix.Root, __spreadProps(__spreadValues({}, props), { children: [
+  return /* @__PURE__ */ jsxs5(ModalRadix.Root, __spreadProps(__spreadValues({}, props), { children: [
     trigger && /* @__PURE__ */ jsx13(ModalRadix.Trigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx13(ModalRadix.Portal, { children: /* @__PURE__ */ jsx13(
       ModalOverlay,
@@ -3674,14 +3688,14 @@ function Modal(_a) {
         css: {
           zIndex
         },
-        children: /* @__PURE__ */ jsxs4(
+        children: /* @__PURE__ */ jsxs5(
           ModalContentStyled,
           {
             css: {
               maxWidth
             },
             children: [
-              title && /* @__PURE__ */ jsxs4(ModalHeaderStyled, { children: [
+              title && /* @__PURE__ */ jsxs5(ModalHeaderStyled, { children: [
                 /* @__PURE__ */ jsx13(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ jsx13(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
                 (onOpenChange || trigger) && /* @__PURE__ */ jsx13(ModalRadix.Close, { asChild: true, children: /* @__PURE__ */ jsx13(ModalIconClose, { name: "close", size: "xl" }) })
               ] }),
@@ -3762,7 +3776,7 @@ function useOnClickOutside(ref, handler) {
 }
 
 // src/components/MenuDropdown/index.tsx
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function MenuDropdown({
   children,
   isOpen,
@@ -3772,7 +3786,7 @@ function MenuDropdown({
   useOnClickOutside(dropdownItemsContainerRef, () => {
     setIsOpen(false);
   });
-  return /* @__PURE__ */ jsxs5(MenuDropdownContainerStyled, { children: [
+  return /* @__PURE__ */ jsxs6(MenuDropdownContainerStyled, { children: [
     /* @__PURE__ */ jsx14(TriggerButtonStyled, { onClick: () => setIsOpen(!isOpen), children: /* @__PURE__ */ jsx14(Icon_default, { name: "ellipsis", size: "xl", color: "#FFFFFF" }) }),
     isOpen && /* @__PURE__ */ jsx14(MenuItemsContainerStyled, { ref: dropdownItemsContainerRef, children })
   ] });
@@ -7922,7 +7936,7 @@ var DayPickerWrapperStyled = styled("div", {
 });
 
 // src/components/Calendar/index.tsx
-import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function formatToDateMask(value) {
   const numeric = value.replace(/\D/g, "").slice(0, 8);
   const parts = numeric.match(/^(\d{0,2})(\d{0,2})(\d{0,4})$/);
@@ -7983,7 +7997,7 @@ function Calendar(_a) {
       console.warn("Data inv\xE1lida inserida no input:", masked);
     }
   };
-  return /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs6(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsx15("div", { children: /* @__PURE__ */ jsxs7(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
     /* @__PURE__ */ jsx15(
       CalendarButtonStyled,
       {
@@ -8005,7 +8019,7 @@ function Calendar(_a) {
         )
       }
     ),
-    showContainer && /* @__PURE__ */ jsxs6(CalendarContentStyled, { position, children: [
+    showContainer && /* @__PURE__ */ jsxs7(CalendarContentStyled, { position, children: [
       /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx15(
         DayPicker,
         {
@@ -8041,7 +8055,7 @@ function Calendar(_a) {
 // src/components/DoubleCalendar/index.tsx
 import { useRef as useRef4, useEffect as useEffect4, useState as useState3 } from "react";
 import { DayPicker as DayPicker2 } from "react-day-picker";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function DoubleCalendar(_a) {
   var _b = _a, {
     action,
@@ -8090,7 +8104,7 @@ function DoubleCalendar(_a) {
       setEndValue("");
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsxs7(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsxs8(CalendarStyled, __spreadProps(__spreadValues({}, props), { expand, ref: dropdownRef, children: [
     /* @__PURE__ */ jsx16(
       CalendarButtonStyled,
       {
@@ -8118,7 +8132,7 @@ function DoubleCalendar(_a) {
         ) })
       }
     ),
-    showContainer && /* @__PURE__ */ jsxs7(CalendarContentStyled, { position, children: [
+    showContainer && /* @__PURE__ */ jsxs8(CalendarContentStyled, { position, children: [
       /* @__PURE__ */ jsx16(Box, { children: /* @__PURE__ */ jsx16(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx16(
         DayPicker2,
         {
@@ -8134,7 +8148,7 @@ function DoubleCalendar(_a) {
           toMonth: maxDate
         }
       ) }) }),
-      action && /* @__PURE__ */ jsxs7(CalendarFooterStyled, { children: [
+      action && /* @__PURE__ */ jsxs8(CalendarFooterStyled, { children: [
         /* @__PURE__ */ jsx16("div", { style: { textAlign: "center", padding: "1rem" }, children: /* @__PURE__ */ jsx16("span", { children: `${(selected == null ? void 0 : selected.from) ? format2(selected.from, "dd/MM/yyyy") : "00/00/0000"} \u2014 ${(selected == null ? void 0 : selected.to) ? format2(selected.to, "dd/MM/yyyy") : "00/00/0000"}` }) }),
         /* @__PURE__ */ jsx16(
           Button,
@@ -8268,7 +8282,7 @@ var GoBackButtonStyled = styled("button", {
 });
 
 // src/components/Drawer/index.tsx
-import { Fragment, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function Drawer({
   isOpen,
   onClose,
@@ -8295,7 +8309,7 @@ function Drawer({
       document.body.style.paddingRight = "";
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
     /* @__PURE__ */ jsx17(
       DrawerOverlayStyled,
       {
@@ -8315,7 +8329,7 @@ function Drawer({
           maxWidth: "100%"
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs8(
+        children: /* @__PURE__ */ jsxs9(
           DrawerContainerStyled,
           {
             open: isOpen,
@@ -8323,8 +8337,8 @@ function Drawer({
               backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
             },
             children: [
-              /* @__PURE__ */ jsxs8(DrawerHeaderDiv, { children: [
-                /* @__PURE__ */ jsxs8(Flex2, { gap: 8, align: "center", children: [
+              /* @__PURE__ */ jsxs9(DrawerHeaderDiv, { children: [
+                /* @__PURE__ */ jsxs9(Flex2, { gap: 8, align: "center", children: [
                   goBackIcon && goBackIcon && /* @__PURE__ */ jsx17(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
                   /* @__PURE__ */ jsx17(DrawerHeaderTitle, { children: title })
                 ] }),
@@ -8341,7 +8355,7 @@ function Drawer({
 
 // src/components/TimePicker.tsx
 import { useCallback, useRef as useRef6, useState as useState4 } from "react";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
   position: "relative",
   width: "fit-content",
@@ -8498,7 +8512,7 @@ function TimePicker({
     },
     [hours, minutes]
   );
-  return /* @__PURE__ */ jsxs9(TimePickerStyled, { ref: dropdownRef, expand, children: [
+  return /* @__PURE__ */ jsxs10(TimePickerStyled, { ref: dropdownRef, expand, children: [
     /* @__PURE__ */ jsx18(
       TimePickerButtonStyled,
       {
@@ -8520,13 +8534,13 @@ function TimePicker({
         )
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs9(
+    isOpen && /* @__PURE__ */ jsxs10(
       TimePickerDropdownStyled,
       {
         style: position === "top" ? { bottom: "110%", left: "0" } : position === "top-right" ? { bottom: "110%", right: "0" } : position === "bottom-right" ? { top: "110%", right: "0" } : { top: "110%", left: "0" },
         children: [
-          /* @__PURE__ */ jsxs9(TimerPickerContentStyled, { children: [
-            ["hours", "minutes"].map((unit) => /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs10(TimerPickerContentStyled, { children: [
+            ["hours", "minutes"].map((unit) => /* @__PURE__ */ jsxs10(
               Box,
               {
                 style: {
@@ -8541,7 +8555,7 @@ function TimePicker({
                       type: "button",
                       variant: "text",
                       onClick: () => handleIncrement(unit),
-                      children: /* @__PURE__ */ jsxs9(
+                      children: /* @__PURE__ */ jsxs10(
                         "svg",
                         {
                           xmlns: "http://www.w3.org/2000/svg",
@@ -8613,7 +8627,7 @@ function TimePicker({
                       type: "button",
                       variant: "text",
                       onClick: () => handleDecrement(unit),
-                      children: /* @__PURE__ */ jsxs9(
+                      children: /* @__PURE__ */ jsxs10(
                         "svg",
                         {
                           xmlns: "http://www.w3.org/2000/svg",
@@ -8670,7 +8684,7 @@ function TimePicker({
 
 // src/components/Alert.tsx
 import { Theme as Theme2, AlertDialog } from "@radix-ui/themes";
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var AlertDialogSimpleStyled = styled(AlertDialog.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -8784,19 +8798,19 @@ function Alert(_a) {
     "completAlert",
     "simpleAlert"
   ]);
-  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    simpleAlert && /* @__PURE__ */ jsx19(Theme2, { children: /* @__PURE__ */ jsxs10(AlertDialog.Root, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    simpleAlert && /* @__PURE__ */ jsx19(Theme2, { children: /* @__PURE__ */ jsxs11(AlertDialog.Root, { children: [
       /* @__PURE__ */ jsx19(AlertDialog.Trigger, { children: trigger }),
-      /* @__PURE__ */ jsx19(Fragment2, { children: /* @__PURE__ */ jsxs10(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
+      /* @__PURE__ */ jsx19(Fragment2, { children: /* @__PURE__ */ jsxs11(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
         /* @__PURE__ */ jsx19(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
         simpleAlert.cancel && /* @__PURE__ */ jsx19(AlertDialog.Cancel, { children: /* @__PURE__ */ jsx19(Button, { variant: "text", children: /* @__PURE__ */ jsx19(Icon_default, { name: "close" }) }) })
       ] })) })
     ] }) }),
-    completAlert && /* @__PURE__ */ jsx19(Theme2, { children: /* @__PURE__ */ jsxs10(AlertDialog.Root, { children: [
+    completAlert && /* @__PURE__ */ jsx19(Theme2, { children: /* @__PURE__ */ jsxs11(AlertDialog.Root, { children: [
       /* @__PURE__ */ jsx19(AlertDialog.Trigger, { children: trigger }),
-      /* @__PURE__ */ jsxs10(AlertDialogCompleteStyled, { children: [
-        /* @__PURE__ */ jsxs10(AlertDialogRowStyled, { className: "le-alert-dialog-row", children: [
-          color === "success" && /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11(AlertDialogCompleteStyled, { children: [
+        /* @__PURE__ */ jsxs11(AlertDialogRowStyled, { className: "le-alert-dialog-row", children: [
+          color === "success" && /* @__PURE__ */ jsxs11(
             "svg",
             {
               width: "56",
@@ -8816,7 +8830,7 @@ function Alert(_a) {
               ]
             }
           ),
-          color === "error" && /* @__PURE__ */ jsxs10(
+          color === "error" && /* @__PURE__ */ jsxs11(
             "svg",
             {
               width: "56",
@@ -8836,7 +8850,7 @@ function Alert(_a) {
               ]
             }
           ),
-          color === "warning" && /* @__PURE__ */ jsxs10(
+          color === "warning" && /* @__PURE__ */ jsxs11(
             "svg",
             {
               width: "56",
@@ -8856,7 +8870,7 @@ function Alert(_a) {
               ]
             }
           ),
-          color === "info" && /* @__PURE__ */ jsxs10(
+          color === "info" && /* @__PURE__ */ jsxs11(
             "svg",
             {
               width: "40",
@@ -8877,7 +8891,7 @@ function Alert(_a) {
             }
           ),
           completAlert.title && /* @__PURE__ */ jsx19(AlertDialogTitleStyled, { children: completAlert.title }),
-          /* @__PURE__ */ jsxs10(AlertDialogDescriptionStyled, { children: [
+          /* @__PURE__ */ jsxs11(AlertDialogDescriptionStyled, { children: [
             completAlert.subtitle && /* @__PURE__ */ jsx19(
               Text,
               {
@@ -8892,7 +8906,7 @@ function Alert(_a) {
           ] })
         ] }),
         completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ jsx19(AlertDialoghrStyled, {}) : null,
-        /* @__PURE__ */ jsx19(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs10(Flex2, { gap: "10", justify: "end", width: "100%", children: [
+        /* @__PURE__ */ jsx19(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs11(Flex2, { gap: "10", justify: "end", width: "100%", children: [
           completAlert.onAction && /* @__PURE__ */ jsx19(AlertDialog.Action, { children: /* @__PURE__ */ jsx19(
             Button,
             {
@@ -9204,7 +9218,7 @@ function Card(_a) {
 // src/components/TextareaField.tsx
 import { TextArea as TextAreaRadix } from "@radix-ui/themes";
 import React9, { useRef as useRef7, useState as useState5, useEffect as useEffect6 } from "react";
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var TextareaFieldStyle = styled(TextAreaRadix, {
   display: "flex",
   flex: 1,
@@ -9271,7 +9285,7 @@ var TextareaField = React9.forwardRef((_a, forwardedRef) => {
     }
     (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ jsxs11(Flex2, { direction: "column", align: "end", style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsxs12(Flex2, { direction: "column", align: "end", style: { position: "relative" }, children: [
     maxLength && /* @__PURE__ */ jsx23(Badge, { size: "sm", color: "grey", style: { position: "absolute", right: 0, top: "-1.75rem" }, children: remaining }),
     /* @__PURE__ */ jsx23(TextareaContainer, { color, children: /* @__PURE__ */ jsx23(
       TextareaFieldStyle,
@@ -9419,7 +9433,7 @@ var ToastClose = styled(ToastPrimitive.Close, {
 });
 
 // src/components/Toast/components/ToastItem.tsx
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function ToastItem({
   toast,
   onRemove
@@ -9431,7 +9445,7 @@ function ToastItem({
       onRemove(toast.id);
     }
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     ToastRoot,
     {
       type: toast.type,
@@ -9450,7 +9464,7 @@ function ToastItem({
 // src/components/Toast/components/ToastProvider.tsx
 import { createContext, useState as useState7 } from "react";
 import * as ToastPrimitive2 from "@radix-ui/react-toast";
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
 function ToastProvider({
   children,
@@ -9486,7 +9500,7 @@ function ToastProvider({
     removeToast,
     removeAllToasts
   };
-  return /* @__PURE__ */ jsx25(ToastContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs13(ToastPrimitive2.Provider, { swipeDirection, children: [
+  return /* @__PURE__ */ jsx25(ToastContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs14(ToastPrimitive2.Provider, { swipeDirection, children: [
     children,
     toasts.map((toast) => /* @__PURE__ */ jsx25(ToastItem, { toast, onRemove: removeToast }, toast.id)),
     /* @__PURE__ */ jsx25(ToastViewport, {})
@@ -9505,7 +9519,7 @@ var useToast = () => {
 
 // src/components/Tooltip/index.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -9544,9 +9558,9 @@ function Tooltip({
   delayDuration = 200,
   side = "top"
 }) {
-  return /* @__PURE__ */ jsx26(TooltipProvider, { children: /* @__PURE__ */ jsxs14(TooltipRoot, { delayDuration, children: [
+  return /* @__PURE__ */ jsx26(TooltipProvider, { children: /* @__PURE__ */ jsxs15(TooltipRoot, { delayDuration, children: [
     /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxs14(TooltipContent, { side, sideOffset: 5, children: [
+    /* @__PURE__ */ jsxs15(TooltipContent, { side, sideOffset: 5, children: [
       typeof content === "string" ? /* @__PURE__ */ jsx26(Text, { typography: "tooltip", children: content }) : content,
       /* @__PURE__ */ jsx26(TooltipArrow, {})
     ] })
@@ -9711,7 +9725,7 @@ var ButtonSelectAllStyled = styled("button", {
 });
 
 // src/components/MultiSelect/index.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var MultiSelect = React10.forwardRef(
   ({
     placeholder,
@@ -9782,9 +9796,9 @@ var MultiSelect = React10.forwardRef(
       },
       [disabled]
     );
-    return /* @__PURE__ */ jsxs15(Theme3, { style: width !== "100%" ? { width } : void 0, children: [
-      /* @__PURE__ */ jsxs15(DropdownMenu4.Root, { open: isOpen, onOpenChange: setIsOpen, children: [
-        /* @__PURE__ */ jsx27(DropdownMenu4.Trigger, { children: /* @__PURE__ */ jsxs15(
+    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,
           {
             ref: (r) => {
@@ -9834,7 +9848,7 @@ var MultiSelect = React10.forwardRef(
                   onValueChange == null ? void 0 : onValueChange(v);
                   setAllOptionsSelected((v || []).length === options.length);
                 },
-                children: /* @__PURE__ */ jsxs15(
+                children: /* @__PURE__ */ jsxs16(
                   StyledFlexWithMaxHeight,
                   {
                     direction: "column",
@@ -9842,7 +9856,7 @@ var MultiSelect = React10.forwardRef(
                     hasMaxHeight: !!maxHeight,
                     style: maxHeight ? { maxHeight } : void 0,
                     children: [
-                      selectedAllOptions && /* @__PURE__ */ jsxs15(
+                      selectedAllOptions && /* @__PURE__ */ jsxs16(
                         ButtonSelectAllStyled,
                         {
                           css: itemStyle,
@@ -9882,7 +9896,7 @@ var MultiSelect = React10.forwardRef(
           align: selectedOrientation === "column" ? "start" : "center",
           justify: "start",
           css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
-          children: allOptionsSelected ? /* @__PURE__ */ jsxs15(
+          children: allOptionsSelected ? /* @__PURE__ */ jsxs16(
             Flex2,
             {
               gap: 4,
@@ -9913,7 +9927,7 @@ var MultiSelect = React10.forwardRef(
               ]
             },
             "all-selected"
-          ) : selectedValues.map((value) => /* @__PURE__ */ jsxs15(
+          ) : selectedValues.map((value) => /* @__PURE__ */ jsxs16(
             Flex2,
             {
               gap: 4,
@@ -10151,20 +10165,22 @@ function Section(_a) {
 // src/components/FormFields/subComponents/ErrorFormMessage.tsx
 import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as FontAwesomeIcon4 } from "@fortawesome/react-fontawesome";
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var ErrorFormMessage = ({ message: message2 }) => {
   if (!message2) return null;
   if (typeof message2 !== "string") {
     return null;
   }
-  return /* @__PURE__ */ jsxs16(Flex2, { justify: "start", align: "center", gap: 6, children: [
+  return /* @__PURE__ */ jsxs17(Flex2, { justify: "start", align: "center", gap: 6, children: [
     /* @__PURE__ */ jsx31(FontAwesomeIcon4, { icon: faXmarkCircle, color: colors.error600, size: "1x" }),
     /* @__PURE__ */ jsx31(Text, { typography: "bodyXS", fontWeight: "medium", color: "error600", children: message2 })
   ] });
 };
 
 // src/components/FormFields/subComponents/FormLabel.tsx
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { FontAwesomeIcon as FontAwesomeIcon5 } from "@fortawesome/react-fontawesome";
+import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var FormLabel = ({
   name,
   label,
@@ -10172,24 +10188,24 @@ var FormLabel = ({
   required
 }) => {
   if (!label) return null;
-  return /* @__PURE__ */ jsxs17(
-    Text,
-    {
-      typography: "labelMedium",
-      fontWeight: "medium",
-      color: haveError ? "error600" : "dark700",
-      id: `${name}-label`,
-      children: [
-        label,
-        !required && /* @__PURE__ */ jsx32(Text, { color: "dark500", children: " (opcional)" })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs18(Flex2, { align: "start", gap: 6, children: [
+    /* @__PURE__ */ jsx32(
+      Text,
+      {
+        typography: "labelMedium",
+        fontWeight: "medium",
+        color: haveError ? "error600" : "dark700",
+        id: `${name}-label`,
+        children: label
+      }
+    ),
+    required && /* @__PURE__ */ jsx32(FontAwesomeIcon5, { icon: faAsterisk, fontSize: "8px", color: "#AD1F2B" })
+  ] });
 };
 
 // src/components/FormFields/TextAreaFormField.tsx
 import { useFormContext } from "react-hook-form";
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var TextAreaFormField = (_a) => {
   var _b = _a, {
     name,
@@ -10221,7 +10237,7 @@ var TextAreaFormField = (_a) => {
     required: required ? validationErrorMessage : false,
     validate
   };
-  return /* @__PURE__ */ jsxs18(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs19(Flex2, { direction: "column", children: [
     /* @__PURE__ */ jsx33(
       FormLabel,
       {
@@ -10251,7 +10267,7 @@ import {
 } from "react-hook-form";
 import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
 import { format as format3, unformat as unformat2 } from "@react-input/mask";
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var TextFormField = (_a) => {
   var _b = _a, {
     name,
@@ -10306,7 +10322,7 @@ var TextFormField = (_a) => {
     if (valueFormatter) value = valueFormatter.unformat(value);
     formChange(value);
   };
-  return /* @__PURE__ */ jsxs19(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs20(Flex2, { direction: "column", children: [
     label && /* @__PURE__ */ jsx34(
       FormLabel,
       {
@@ -10358,7 +10374,7 @@ var Form = (_a) => {
 
 // src/components/FormFields/MultiSelectFormField.tsx
 import { useController as useController2 } from "react-hook-form";
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 var MultiSelectFormField = (_a) => {
   var _b = _a, {
     name,
@@ -10389,7 +10405,7 @@ var MultiSelectFormField = (_a) => {
   const handleChange = (v) => {
     onChange(v);
   };
-  return /* @__PURE__ */ jsxs20(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs21(Flex2, { direction: "column", children: [
     /* @__PURE__ */ jsx36(
       FormLabel,
       {
@@ -10465,7 +10481,7 @@ var PhoneFormField = ({
 
 // src/components/FormFields/CPFFormField.tsx
 import { useFormContext as useFormContext3, useWatch } from "react-hook-form";
-import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var isValidCPF = (cpf) => {
   cpf = cpf.replace(/[^\d]+/g, "");
   if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) return false;
@@ -10491,7 +10507,7 @@ var CPFFormField = ({
 }) => {
   const { control, setValue } = useFormContext3();
   const foreigner = useWatch({ name: "foreigner", control });
-  return /* @__PURE__ */ jsxs21(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs22(Flex2, { direction: "column", children: [
     /* @__PURE__ */ jsx38(
       TextFormField,
       {
@@ -10694,7 +10710,7 @@ function getNestedValue(obj, path) {
 }
 
 // src/components/FormFields/SelectFormField.tsx
-import { jsx as jsx42, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
 var SelectFormField = ({
   name,
   label,
@@ -10715,7 +10731,7 @@ var SelectFormField = ({
   const validationRules = __spreadValues({
     required: required ? validationErrorMessage : false
   }, validation);
-  return /* @__PURE__ */ jsxs22(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs23(Flex2, { direction: "column", children: [
     /* @__PURE__ */ jsx42(
       FormLabel,
       {
@@ -10978,7 +10994,7 @@ function CityFormField({
 }
 
 // src/components/FormFields/AddressFormFields/index.tsx
-import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs24 } from "react/jsx-runtime";
 function getNestedValue2(obj, path) {
   return path.split(".").reduce((acc, key) => acc == null ? void 0 : acc[key], obj);
 }
@@ -11028,7 +11044,7 @@ function AddressFormFields({
       console.error("Erro ao buscar CEP");
     });
   };
-  return /* @__PURE__ */ jsxs23(AddressContainerStyled, { layout, children: [
+  return /* @__PURE__ */ jsxs24(AddressContainerStyled, { layout, children: [
     /* @__PURE__ */ jsx47(
       FormLabel,
       {
@@ -11107,7 +11123,7 @@ function AddressFormFields({
 
 // src/components/FormFields/RadioGroupFormField.tsx
 import { Controller as Controller3, useFormContext as useFormContext7 } from "react-hook-form";
-import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 var RadioGroupFormField = ({
   name,
   label,
@@ -11129,7 +11145,7 @@ var RadioGroupFormField = ({
   const validationRules = {
     required: required ? validationErrorMessage : false
   };
-  return /* @__PURE__ */ jsxs24(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs25(Flex2, { direction: "column", children: [
     /* @__PURE__ */ jsx48(
       FormLabel,
       {
@@ -11154,10 +11170,7 @@ var RadioGroupFormField = ({
             color: haveError ? "error" : color,
             fontWeight,
             disabled,
-            children: options.map((option) => /* @__PURE__ */ jsxs24("label", { children: [
-              /* @__PURE__ */ jsx48(RadioItem, { value: option.value }),
-              option.label
-            ] }, option.value))
+            children: /* @__PURE__ */ jsx48(Flex2, { direction: "column", children: options.map((option) => /* @__PURE__ */ jsx48(RadioItem, { value: option.value, children: /* @__PURE__ */ jsx48(Text, { typography: "labelSmall", children: option.label }) }, option.value)) })
           }
         )
       }
@@ -11168,7 +11181,7 @@ var RadioGroupFormField = ({
 
 // src/components/FormFields/CheckboxGroupFormField.tsx
 import { Controller as Controller4, useFormContext as useFormContext8 } from "react-hook-form";
-import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
 var CheckboxGroupFormField = ({
   name,
   label,
@@ -11191,7 +11204,7 @@ var CheckboxGroupFormField = ({
     required: required ? validationErrorMessage : false,
     validate: required ? (value) => (value == null ? void 0 : value.length) > 0 || validationErrorMessage : void 0
   };
-  return /* @__PURE__ */ jsxs25(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs26(Flex2, { direction: "column", children: [
     /* @__PURE__ */ jsx49(
       FormLabel,
       {
@@ -11236,7 +11249,7 @@ var CheckboxGroupFormField = ({
 
 // src/components/FormFields/SwitchFormField.tsx
 import { useFormContext as useFormContext9, Controller as Controller5 } from "react-hook-form";
-import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs27 } from "react/jsx-runtime";
 var SwitchFormField = ({
   name,
   label,
@@ -11250,7 +11263,7 @@ var SwitchFormField = ({
   if (watch) {
     watchForm(name);
   }
-  return /* @__PURE__ */ jsxs26(Flex2, { justify: "between", style: { margin: "1rem 0" }, children: [
+  return /* @__PURE__ */ jsxs27(Flex2, { justify: "between", style: { margin: "1rem 0" }, children: [
     /* @__PURE__ */ jsx50(Text, { typography: "labelMedium", fontWeight: "regular", children: label }),
     /* @__PURE__ */ jsx50(
       Controller5,
@@ -12354,7 +12367,7 @@ var QuillEditor = styled("div", {
 });
 
 // src/components/RichEditor/QuillComponent.tsx
-import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
 var QuillComponent = ({
   value = "",
   onChange,
@@ -12616,7 +12629,7 @@ var QuillComponent = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [showVideoModal, showLinkModal, handleVideoCancel, handleLinkCancel]);
-  return /* @__PURE__ */ jsx52(QuillContainer, { className, children: /* @__PURE__ */ jsxs27(QuillEditor, { style: { position: "relative" }, children: [
+  return /* @__PURE__ */ jsx52(QuillContainer, { className, children: /* @__PURE__ */ jsxs28(QuillEditor, { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsx52("div", { ref: quillRef }),
     showVideoModal && /* @__PURE__ */ jsx52(
       "div",
@@ -12635,7 +12648,7 @@ var QuillComponent = ({
           zIndex: 1e3,
           width: "fit-content"
         },
-        children: /* @__PURE__ */ jsxs27(Flex2, { gap: 8, align: "center", children: [
+        children: /* @__PURE__ */ jsxs28(Flex2, { gap: 8, align: "center", children: [
           /* @__PURE__ */ jsx52(
             Text,
             {
@@ -12705,7 +12718,7 @@ var QuillComponent = ({
           zIndex: 1e3,
           width: "fit-content"
         },
-        children: /* @__PURE__ */ jsxs27(Flex2, { gap: 8, align: "center", children: [
+        children: /* @__PURE__ */ jsxs28(Flex2, { gap: 8, align: "center", children: [
           /* @__PURE__ */ jsx52(
             Text,
             {
@@ -12777,7 +12790,7 @@ var RichEditor_default = RichEditor;
 
 // src/components/FormFields/RichEditorFormField.tsx
 import { useState as useState12 } from "react";
-import { Fragment as Fragment5, jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
 var RichEditorFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12820,8 +12833,8 @@ var RichEditorFormField = (_a) => {
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
-  return /* @__PURE__ */ jsxs28(Flex2, { direction: "column", children: [
-    maxLength ? /* @__PURE__ */ jsxs28(Flex2, { direction: "row", justify: "between", children: [
+  return /* @__PURE__ */ jsxs29(Flex2, { direction: "column", children: [
+    maxLength ? /* @__PURE__ */ jsxs29(Flex2, { direction: "row", justify: "between", children: [
       label && /* @__PURE__ */ jsx54(
         FormLabel,
         {
@@ -12860,7 +12873,7 @@ var RichEditorFormField = (_a) => {
 // src/components/FormFields/CalendarFormField.tsx
 import { useController as useController4 } from "react-hook-form";
 import { useCallback as useCallback5 } from "react";
-import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
 var CalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12909,7 +12922,7 @@ var CalendarFormField = (_a) => {
   const handleCalendarChange = (date) => {
     setSelected(date);
   };
-  return /* @__PURE__ */ jsxs29(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ jsxs30(Flex2, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ jsx55(
       FormLabel,
       {
@@ -12939,7 +12952,7 @@ var CalendarFormField = (_a) => {
 // src/components/FormFields/DoubleCalendarFormField.tsx
 import { useCallback as useCallback6 } from "react";
 import { useController as useController5 } from "react-hook-form";
-import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
 var DoubleCalendarFormField = (_a) => {
   var _b = _a, {
     name,
@@ -12988,7 +13001,7 @@ var DoubleCalendarFormField = (_a) => {
   const handleCalendarChange = (range) => {
     setSelected(range);
   };
-  return /* @__PURE__ */ jsxs30(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ jsxs31(Flex2, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ jsx56(FormLabel, { name, label, required, haveError }),
     /* @__PURE__ */ jsx56(
       DoubleCalendar,
@@ -13011,7 +13024,7 @@ var DoubleCalendarFormField = (_a) => {
 // src/components/FormFields/TimePickerFormField.tsx
 import { useController as useController6 } from "react-hook-form";
 import { useCallback as useCallback7 } from "react";
-import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
 var TimePickerFormField = (_a) => {
   var _b = _a, {
     name,
@@ -13054,7 +13067,7 @@ var TimePickerFormField = (_a) => {
   const handleTimePickerChange = (time) => {
     setSelected(time);
   };
-  return /* @__PURE__ */ jsxs31(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ jsxs32(Flex2, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ jsx57(
       FormLabel,
       {

package/package.json

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

package/src/components/Button/index.tsx

@@ -33,13 +33,25 @@ export function Button({ asChild, children, loading, ...props }: ButtonProps) {
 
   return (
     <ButtonStyled as={Component} {...props} disabled={disabled || loading}>
-      {loading ? (
-        <SpinningDiv>
-          <Icon name="circle-notch" size={spinnerSize} />
-        </SpinningDiv>
-      ) : (
-        children
-      )}
+      <div style={{ position: "relative" }}>
+        <div style={{ visibility: loading ? "hidden" : undefined }}>
+          {children}
+        </div>
+        {loading && (
+          <div
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+            }}
+          >
+            <SpinningDiv>
+              <Icon name="circle-notch" size={spinnerSize} />
+            </SpinningDiv>
+          </div>
+        )}
+      </div>
     </ButtonStyled>
   );
 }

package/src/components/FormFields/RadioGroupFormField.tsx

@@ -4,6 +4,7 @@ import { FormLabel } from "./subComponents/FormLabel";
 import { ErrorFormMessage } from "./subComponents/ErrorFormMessage";
 import { RadioGroup, RadioItem } from "../RadioGroup";
 import { getNestedValue } from "../../utils/getNestedValue";
+import { Text } from "../Text";
 
 type Option = {
   label: string;
@@ -68,12 +69,13 @@ export const RadioGroupFormField = ({
             fontWeight={fontWeight}
             disabled={disabled}
           >
-            {options.map((option) => (
-              <label key={option.value}>
-                <RadioItem value={option.value} />
-                {option.label}
-              </label>
-            ))}
+            <Flex direction="column">
+              {options.map((option) => (
+                <RadioItem key={option.value} value={option.value}>
+                  <Text typography={"labelSmall"}>{option.label}</Text>
+                </RadioItem>
+              ))}
+            </Flex>
           </RadioGroup>
         )}
       />

package/src/components/FormFields/subComponents/FormLabel.tsx

@@ -1,4 +1,7 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Text } from "../../Text";
+import { faAsterisk } from "@fortawesome/free-solid-svg-icons";
+import { Flex } from "../../Flex";
 
 export type FormLabelProps = {
   name: string;
@@ -16,14 +19,18 @@ export const FormLabel = ({
   if (!label) return null;
 
   return (
-    <Text
-      typography={"labelMedium"}
-      fontWeight={"medium"}
-      color={haveError ? "error600" : "dark700"}
-      id={`${name}-label`}
-    >
-      {label}
-      {!required && <Text color="dark500"> (opcional)</Text>}
-    </Text>
+    <Flex align={"start"} gap={6}>
+      <Text
+        typography={"labelMedium"}
+        fontWeight={"medium"}
+        color={haveError ? "error600" : "dark700"}
+        id={`${name}-label`}
+      >
+        {label}
+      </Text>
+      {required && (
+        <FontAwesomeIcon icon={faAsterisk} fontSize={"8px"} color="#AD1F2B" />
+      )}
+    </Flex>
   );
 };