@lets-events/react 12.6.0 → 12.6.2

package/dist/index.mjs

@@ -1712,6 +1712,13 @@ var ButtonStyled = styled(ButtonRadix, {
       full: {
         borderRadius: "$full"
       }
+    },
+    isCircle: {
+      true: {
+        borderRadius: "$full",
+        padding: 0,
+        aspectRatio: "1"
+      }
     }
   },
   compoundVariants: [
@@ -1745,7 +1752,118 @@ var SpinningDiv = styled("div", {
 
 // src/components/Button/index.tsx
 import { Button as ButtonRadix2 } from "@radix-ui/themes";
+
+// src/components/Flex.tsx
+import { Flex as FlexRadix } from "@radix-ui/themes";
 import { jsx as jsx3 } from "react/jsx-runtime";
+var FlexStyled = styled(FlexRadix, {
+  variants: {
+    display: {
+      "flex": { display: "flex" },
+      "inline-flex": { display: "inline-flex" }
+    },
+    align: {
+      start: { alignItems: "flex-start" },
+      center: { alignItems: "center" },
+      end: { alignItems: "flex-end" },
+      stretch: { alignItems: "stretch" },
+      baseline: { alignItems: "baseline" }
+    },
+    justify: {
+      start: { justifyContent: "flex-start" },
+      center: { justifyContent: "center" },
+      end: { justifyContent: "flex-end" },
+      between: { justifyContent: "space-between" },
+      around: { justifyContent: "space-around" },
+      evenly: { justifyContent: "space-evenly" }
+    },
+    direction: {
+      row: { flexDirection: "row" },
+      column: { flexDirection: "column" },
+      "row-reverse": { flexDirection: "row-reverse" },
+      "column-reverse": { flexDirection: "column-reverse" }
+    },
+    gap: {
+      0: { gap: "0px" },
+      2: { gap: "$2" },
+      4: { gap: "$4" },
+      6: { gap: "$6" },
+      8: { gap: "$8" },
+      10: { gap: "$10" },
+      12: { gap: "$12" },
+      14: { gap: "$14" },
+      16: { gap: "$16" },
+      20: { gap: "$20" },
+      22: { gap: "$22" },
+      24: { gap: "$24" },
+      32: { gap: "$32" },
+      36: { gap: "$36" },
+      40: { gap: "$40" },
+      48: { gap: "$48" },
+      56: { gap: "$56" },
+      64: { gap: "$64" },
+      72: { gap: "$72" },
+      80: { gap: "$80" },
+      full: { gap: "$full" }
+    },
+    gapY: {
+      2: { gap: "$2" },
+      4: { gap: "$4" },
+      6: { gap: "$6" },
+      8: { gap: "$8" },
+      10: { gap: "$10" },
+      12: { gap: "$12" },
+      14: { gap: "$14" },
+      16: { gap: "$16" },
+      20: { gap: "$20" },
+      22: { gap: "$22" },
+      24: { gap: "$24" },
+      32: { gap: "$32" },
+      36: { gap: "$36" },
+      40: { gap: "$40" },
+      48: { gap: "$48" },
+      56: { gap: "$56" },
+      64: { gap: "$64" },
+      72: { gap: "$72" },
+      80: { gap: "$80" },
+      full: { gap: "$full" }
+    },
+    gapX: {
+      2: { gap: "$2" },
+      4: { gap: "$4" },
+      6: { gap: "$6" },
+      8: { gap: "$8" },
+      10: { gap: "$10" },
+      12: { gap: "$12" },
+      14: { gap: "$14" },
+      16: { gap: "$16" },
+      20: { gap: "$20" },
+      22: { gap: "$22" },
+      24: { gap: "$24" },
+      32: { gap: "$32" },
+      36: { gap: "$36" },
+      40: { gap: "$40" },
+      48: { gap: "$48" },
+      56: { gap: "$56" },
+      64: { gap: "$64" },
+      72: { gap: "$72" },
+      80: { gap: "$80" },
+      full: { gap: "$full" }
+    }
+  },
+  defaultVariants: {
+    display: "flex",
+    direction: "row",
+    gap: 10
+  }
+});
+function Flex(_a) {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx3(FlexStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Button/index.tsx
+import { jsx as jsx4, 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,12 +1882,34 @@ 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__ */ jsx4(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx4(
+      Flex,
+      {
+        justify: "center",
+        align: "center",
+        css: { visibility: loading ? "hidden" : void 0 },
+        children
+      }
+    ),
+    loading && /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)"
+        },
+        children: /* @__PURE__ */ jsx4(SpinningDiv, { children: /* @__PURE__ */ jsx4(Icon_default, { name: "circle-notch", size: spinnerSize }) })
+      }
+    )
+  ] }) }));
 }
 
 // src/components/ButtonGroup.tsx
-import { Button as Button2, Flex } from "@radix-ui/themes";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { Button as Button2, Flex as Flex2 } from "@radix-ui/themes";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var ButtonItemStyled = styled(Button2, {
   fontFamily: "$default",
   letterSpacing: 0,
@@ -1783,7 +1923,7 @@ var ButtonItemStyled = styled(Button2, {
     }
   }
 });
-var ButtonGroupStyled = styled(Flex, {
+var ButtonGroupStyled = styled(Flex2, {
   display: "flex",
   borderRadius: "$md",
   overflow: "hidden",
@@ -2235,16 +2375,16 @@ var ButtonGroupStyled = styled(Flex, {
 });
 function ButtonItem(_a) {
   var _b = _a, { children, active } = _b, props = __objRest(_b, ["children", "active"]);
-  return /* @__PURE__ */ jsx4(ButtonItemStyled, __spreadProps(__spreadValues({ className: active ? "active" : "" }, props), { children }));
+  return /* @__PURE__ */ jsx5(ButtonItemStyled, __spreadProps(__spreadValues({ className: active ? "active" : "" }, props), { children }));
 }
 function ButtonGroup(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx4(ButtonGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx5(ButtonGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Avatar.tsx
 import { Avatar as AvatarRadix } from "@radix-ui/themes";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var AvatarStyled = styled(AvatarRadix, {
   fontFamily: "$default",
   color: "$gray100",
@@ -2289,125 +2429,14 @@ var AvatarStyled = styled(AvatarRadix, {
 });
 function Avatar(_a) {
   var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
-  return /* @__PURE__ */ jsx5(AvatarStyled, __spreadValues({ as: AvatarRadix }, props));
+  return /* @__PURE__ */ jsx6(AvatarStyled, __spreadValues({ as: AvatarRadix }, props));
 }
 
 // src/components/TextField.tsx
 import React from "react";
 import { TextField as TextFieldRadix } from "@radix-ui/themes";
-
-// src/components/Flex.tsx
-import { Flex as FlexRadix } from "@radix-ui/themes";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var FlexStyled = styled(FlexRadix, {
-  variants: {
-    display: {
-      "flex": { display: "flex" },
-      "inline-flex": { display: "inline-flex" }
-    },
-    align: {
-      start: { alignItems: "flex-start" },
-      center: { alignItems: "center" },
-      end: { alignItems: "flex-end" },
-      stretch: { alignItems: "stretch" },
-      baseline: { alignItems: "baseline" }
-    },
-    justify: {
-      start: { justifyContent: "flex-start" },
-      center: { justifyContent: "center" },
-      end: { justifyContent: "flex-end" },
-      between: { justifyContent: "space-between" },
-      around: { justifyContent: "space-around" },
-      evenly: { justifyContent: "space-evenly" }
-    },
-    direction: {
-      row: { flexDirection: "row" },
-      column: { flexDirection: "column" },
-      "row-reverse": { flexDirection: "row-reverse" },
-      "column-reverse": { flexDirection: "column-reverse" }
-    },
-    gap: {
-      0: { gap: "0px" },
-      2: { gap: "$2" },
-      4: { gap: "$4" },
-      6: { gap: "$6" },
-      8: { gap: "$8" },
-      10: { gap: "$10" },
-      12: { gap: "$12" },
-      14: { gap: "$14" },
-      16: { gap: "$16" },
-      20: { gap: "$20" },
-      22: { gap: "$22" },
-      24: { gap: "$24" },
-      32: { gap: "$32" },
-      36: { gap: "$36" },
-      40: { gap: "$40" },
-      48: { gap: "$48" },
-      56: { gap: "$56" },
-      64: { gap: "$64" },
-      72: { gap: "$72" },
-      80: { gap: "$80" },
-      full: { gap: "$full" }
-    },
-    gapY: {
-      2: { gap: "$2" },
-      4: { gap: "$4" },
-      6: { gap: "$6" },
-      8: { gap: "$8" },
-      10: { gap: "$10" },
-      12: { gap: "$12" },
-      14: { gap: "$14" },
-      16: { gap: "$16" },
-      20: { gap: "$20" },
-      22: { gap: "$22" },
-      24: { gap: "$24" },
-      32: { gap: "$32" },
-      36: { gap: "$36" },
-      40: { gap: "$40" },
-      48: { gap: "$48" },
-      56: { gap: "$56" },
-      64: { gap: "$64" },
-      72: { gap: "$72" },
-      80: { gap: "$80" },
-      full: { gap: "$full" }
-    },
-    gapX: {
-      2: { gap: "$2" },
-      4: { gap: "$4" },
-      6: { gap: "$6" },
-      8: { gap: "$8" },
-      10: { gap: "$10" },
-      12: { gap: "$12" },
-      14: { gap: "$14" },
-      16: { gap: "$16" },
-      20: { gap: "$20" },
-      22: { gap: "$22" },
-      24: { gap: "$24" },
-      32: { gap: "$32" },
-      36: { gap: "$36" },
-      40: { gap: "$40" },
-      48: { gap: "$48" },
-      56: { gap: "$56" },
-      64: { gap: "$64" },
-      72: { gap: "$72" },
-      80: { gap: "$80" },
-      full: { gap: "$full" }
-    }
-  },
-  defaultVariants: {
-    display: "flex",
-    direction: "row",
-    gap: 10
-  }
-});
-function Flex2(_a) {
-  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx6(FlexStyled, __spreadProps(__spreadValues({}, props), { children }));
-}
-
-// 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 +2668,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(Flex, { direction: "column", css: { width: "100%", position: "relative" }, children: [
+      /* @__PURE__ */ jsxs2(Flex, { gap: "0", css: { width: "100%" }, children: [
         !!addon && /* @__PURE__ */ jsx7(
           InputAddon,
           {
@@ -2649,7 +2678,7 @@ var TextField = React.forwardRef(
             children: addon
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs2(
           TextFieldStyled,
           __spreadProps(__spreadValues({
             color: hasError ? "error" : color || "default",
@@ -3081,7 +3110,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 +3220,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 +3256,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 +3421,7 @@ function DropdownMenu2(_a) {
       document.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     DropdownMenuStyled,
     __spreadProps(__spreadValues({
       ref: dropdownRef,
@@ -3401,7 +3430,7 @@ function DropdownMenu2(_a) {
       color
     }, props), {
       children: [
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs4(
           "button",
           {
             "aria-label": placeholder || "Filtrar",
@@ -3605,7 +3634,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 +3695,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 +3703,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 +3791,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 +3801,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 +7951,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 +8012,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 +8034,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 +8070,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 +8119,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 +8147,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 +8163,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 +8297,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 +8324,7 @@ function Drawer({
       document.body.style.paddingRight = "";
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
     /* @__PURE__ */ jsx17(
       DrawerOverlayStyled,
       {
@@ -8315,7 +8344,7 @@ function Drawer({
           maxWidth: "100%"
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs8(
+        children: /* @__PURE__ */ jsxs9(
           DrawerContainerStyled,
           {
             open: isOpen,
@@ -8323,8 +8352,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(Flex, { gap: 8, align: "center", children: [
                   goBackIcon && goBackIcon && /* @__PURE__ */ jsx17(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
                   /* @__PURE__ */ jsx17(DrawerHeaderTitle, { children: title })
                 ] }),
@@ -8341,7 +8370,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 +8527,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 +8549,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 +8570,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 +8642,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 +8699,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 +8813,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 +8845,7 @@ function Alert(_a) {
               ]
             }
           ),
-          color === "error" && /* @__PURE__ */ jsxs10(
+          color === "error" && /* @__PURE__ */ jsxs11(
             "svg",
             {
               width: "56",
@@ -8836,7 +8865,7 @@ function Alert(_a) {
               ]
             }
           ),
-          color === "warning" && /* @__PURE__ */ jsxs10(
+          color === "warning" && /* @__PURE__ */ jsxs11(
             "svg",
             {
               width: "56",
@@ -8856,7 +8885,7 @@ function Alert(_a) {
               ]
             }
           ),
-          color === "info" && /* @__PURE__ */ jsxs10(
+          color === "info" && /* @__PURE__ */ jsxs11(
             "svg",
             {
               width: "40",
@@ -8877,7 +8906,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 +8921,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(Flex, { gap: "10", justify: "end", width: "100%", children: [
           completAlert.onAction && /* @__PURE__ */ jsx19(AlertDialog.Action, { children: /* @__PURE__ */ jsx19(
             Button,
             {
@@ -9204,7 +9233,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 +9300,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(Flex, { 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 +9448,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 +9460,7 @@ function ToastItem({
       onRemove(toast.id);
     }
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     ToastRoot,
     {
       type: toast.type,
@@ -9450,7 +9479,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 +9515,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 +9534,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 +9573,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, {})
     ] })
@@ -9625,7 +9654,7 @@ var CloseBtnStyled = styled("button", {
   background: "none",
   border: "none"
 });
-var StyledFlexWithMaxHeight = styled(Flex2, {
+var StyledFlexWithMaxHeight = styled(Flex, {
   variants: {
     hasMaxHeight: {
       true: {
@@ -9651,7 +9680,7 @@ var StyledFlexWithMaxHeight = styled(Flex2, {
     hasMaxHeight: false
   }
 });
-var StyledFlexSelectedItems = styled(Flex2, {
+var StyledFlexSelectedItems = styled(Flex, {
   overflowY: "auto",
   margin: "8px 0",
   "&::-webkit-scrollbar": {
@@ -9711,7 +9740,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 +9811,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 +9863,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 +9871,7 @@ var MultiSelect = React10.forwardRef(
                     hasMaxHeight: !!maxHeight,
                     style: maxHeight ? { maxHeight } : void 0,
                     children: [
-                      selectedAllOptions && /* @__PURE__ */ jsxs15(
+                      selectedAllOptions && /* @__PURE__ */ jsxs16(
                         ButtonSelectAllStyled,
                         {
                           css: itemStyle,
@@ -9882,8 +9911,8 @@ var MultiSelect = React10.forwardRef(
           align: selectedOrientation === "column" ? "start" : "center",
           justify: "start",
           css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
-          children: allOptionsSelected ? /* @__PURE__ */ jsxs15(
-            Flex2,
+          children: allOptionsSelected ? /* @__PURE__ */ jsxs16(
+            Flex,
             {
               gap: 4,
               align: "center",
@@ -9913,8 +9942,8 @@ var MultiSelect = React10.forwardRef(
               ]
             },
             "all-selected"
-          ) : selectedValues.map((value) => /* @__PURE__ */ jsxs15(
-            Flex2,
+          ) : selectedValues.map((value) => /* @__PURE__ */ jsxs16(
+            Flex,
             {
               gap: 4,
               align: "center",
@@ -10151,20 +10180,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(Flex, { 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 +10203,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(Flex, { 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 +10252,7 @@ var TextAreaFormField = (_a) => {
     required: required ? validationErrorMessage : false,
     validate
   };
-  return /* @__PURE__ */ jsxs18(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs19(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx33(
       FormLabel,
       {
@@ -10251,7 +10282,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 +10337,7 @@ var TextFormField = (_a) => {
     if (valueFormatter) value = valueFormatter.unformat(value);
     formChange(value);
   };
-  return /* @__PURE__ */ jsxs19(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs20(Flex, { direction: "column", children: [
     label && /* @__PURE__ */ jsx34(
       FormLabel,
       {
@@ -10358,7 +10389,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 +10420,7 @@ var MultiSelectFormField = (_a) => {
   const handleChange = (v) => {
     onChange(v);
   };
-  return /* @__PURE__ */ jsxs20(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs21(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx36(
       FormLabel,
       {
@@ -10465,7 +10496,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 +10522,7 @@ var CPFFormField = ({
 }) => {
   const { control, setValue } = useFormContext3();
   const foreigner = useWatch({ name: "foreigner", control });
-  return /* @__PURE__ */ jsxs21(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs22(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx38(
       TextFormField,
       {
@@ -10694,7 +10725,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 +10746,7 @@ var SelectFormField = ({
   const validationRules = __spreadValues({
     required: required ? validationErrorMessage : false
   }, validation);
-  return /* @__PURE__ */ jsxs22(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs23(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx42(
       FormLabel,
       {
@@ -10798,7 +10829,7 @@ function CountryFormField({
   language = "pt-BR"
 }) {
   const countries2 = useCountries(language);
-  return /* @__PURE__ */ jsx43(Flex2, { direction: "column", children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx43(Flex, { direction: "column", children: /* @__PURE__ */ jsx43(
     SelectFormField,
     {
       label,
@@ -10978,7 +11009,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 +11059,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 +11138,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 +11160,7 @@ var RadioGroupFormField = ({
   const validationRules = {
     required: required ? validationErrorMessage : false
   };
-  return /* @__PURE__ */ jsxs24(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs25(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx48(
       FormLabel,
       {
@@ -11154,10 +11185,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(Flex, { 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 +11196,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 +11219,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(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx49(
       FormLabel,
       {
@@ -11236,7 +11264,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 +11278,7 @@ var SwitchFormField = ({
   if (watch) {
     watchForm(name);
   }
-  return /* @__PURE__ */ jsxs26(Flex2, { justify: "between", style: { margin: "1rem 0" }, children: [
+  return /* @__PURE__ */ jsxs27(Flex, { justify: "between", style: { margin: "1rem 0" }, children: [
     /* @__PURE__ */ jsx50(Text, { typography: "labelMedium", fontWeight: "regular", children: label }),
     /* @__PURE__ */ jsx50(
       Controller5,
@@ -12354,7 +12382,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 +12644,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 +12663,7 @@ var QuillComponent = ({
           zIndex: 1e3,
           width: "fit-content"
         },
-        children: /* @__PURE__ */ jsxs27(Flex2, { gap: 8, align: "center", children: [
+        children: /* @__PURE__ */ jsxs28(Flex, { gap: 8, align: "center", children: [
           /* @__PURE__ */ jsx52(
             Text,
             {
@@ -12705,7 +12733,7 @@ var QuillComponent = ({
           zIndex: 1e3,
           width: "fit-content"
         },
-        children: /* @__PURE__ */ jsxs27(Flex2, { gap: 8, align: "center", children: [
+        children: /* @__PURE__ */ jsxs28(Flex, { gap: 8, align: "center", children: [
           /* @__PURE__ */ jsx52(
             Text,
             {
@@ -12777,7 +12805,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 +12848,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(Flex, { direction: "column", children: [
+    maxLength ? /* @__PURE__ */ jsxs29(Flex, { direction: "row", justify: "between", children: [
       label && /* @__PURE__ */ jsx54(
         FormLabel,
         {
@@ -12860,7 +12888,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 +12937,7 @@ var CalendarFormField = (_a) => {
   const handleCalendarChange = (date) => {
     setSelected(date);
   };
-  return /* @__PURE__ */ jsxs29(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ jsxs30(Flex, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ jsx55(
       FormLabel,
       {
@@ -12939,7 +12967,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 +13016,7 @@ var DoubleCalendarFormField = (_a) => {
   const handleCalendarChange = (range) => {
     setSelected(range);
   };
-  return /* @__PURE__ */ jsxs30(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ jsxs31(Flex, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ jsx56(FormLabel, { name, label, required, haveError }),
     /* @__PURE__ */ jsx56(
       DoubleCalendar,
@@ -13011,7 +13039,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 +13082,7 @@ var TimePickerFormField = (_a) => {
   const handleTimePickerChange = (time) => {
     setSelected(time);
   };
-  return /* @__PURE__ */ jsxs31(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ jsxs32(Flex, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ jsx57(
       FormLabel,
       {
@@ -13222,7 +13250,7 @@ export {
   ErrorFormMessage,
   Filter,
   FilterItem,
-  Flex2 as Flex,
+  Flex,
   FlexStyled,
   Form,
   FormLabel,