@lets-events/react 12.2.14 → 12.3.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@12.2.14 build
+> @lets-events/react@12.3.1 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -9,11 +9,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-CJS dist\index.js 394.71 KB
-CJS ⚡️ Build success in 1146ms
-ESM dist\index.mjs 380.74 KB
-ESM ⚡️ Build success in 1147ms
+ESM dist\index.mjs 381.68 KB
+ESM ⚡️ Build success in 235ms
+CJS dist\index.js 395.71 KB
+CJS ⚡️ Build success in 236ms
 DTS Build start
-DTS ⚡️ Build success in 4863ms
-DTS dist\index.d.mts 398.62 KB
-DTS dist\index.d.ts  398.62 KB
+DTS ⚡️ Build success in 4578ms
+DTS dist\index.d.mts 398.68 KB
+DTS dist\index.d.ts  398.68 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 12.3.1
+
+### Patch Changes
+
+- fix button loading state
+
+## 12.3.0
+
+### Minor Changes
+
+- button loadding state
+
 ## 12.2.14
 
 ### Patch Changes

package/dist/index.d.mts

@@ -792,8 +792,9 @@ declare const ButtonStyled: _stitches_react_types_styled_component.StyledCompone
 type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
 interface ButtonProps extends ComponentProps<typeof ButtonStyled>, ButtonVariantProps {
     asChild?: boolean;
+    loading?: boolean;
 }
-declare function Button({ asChild, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ asChild, children, loading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const ButtonItemStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.ButtonProps & React$1.RefAttributes<HTMLButtonElement>>, {
     active?: boolean | "true" | undefined;
@@ -15202,4 +15203,4 @@ declare const useImageUpload: (options: UseImageUploadOptions) => {
     reset: () => void;
 };
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Divider, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Divider, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.d.ts

@@ -792,8 +792,9 @@ declare const ButtonStyled: _stitches_react_types_styled_component.StyledCompone
 type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
 interface ButtonProps extends ComponentProps<typeof ButtonStyled>, ButtonVariantProps {
     asChild?: boolean;
+    loading?: boolean;
 }
-declare function Button({ asChild, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ asChild, children, loading, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 declare const ButtonItemStyled: _stitches_react_types_styled_component.StyledComponent<React$1.ForwardRefExoticComponent<_radix_ui_themes.ButtonProps & React$1.RefAttributes<HTMLButtonElement>>, {
     active?: boolean | "true" | undefined;
@@ -15202,4 +15203,4 @@ declare const useImageUpload: (options: UseImageUploadOptions) => {
     reset: () => void;
 };
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Divider, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, CalendarFormField, type CalendarFormFieldProps, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Divider, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, type IconProps, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, RichEditor, RichEditorFormField, type RichEditorFormFieldProps, type RichEditorProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, SwitchFormField, type SwitchFormFieldProps, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, TimePickerFormField, type TimePickerFormFieldProps, TimePickerIconButton, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UploadConfig, UploadService, isValidCNPJ, maskFormat, maskUnformat, useImageUpload, useToast };

package/dist/index.js

@@ -1546,6 +1546,9 @@ function Text(_a) {
   );
 }
 
+// src/components/Button/index.tsx
+var import_react2 = require("react");
+
 // src/components/Button/styledComponents.ts
 var import_themes2 = require("@radix-ui/themes");
 var ButtonStyled = styled(import_themes2.Button, {
@@ -1841,14 +1844,40 @@ var ButtonStyled = styled(import_themes2.Button, {
     outlinedBgColor: "transparent"
   }
 });
+var spin = keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "100%": { transform: "rotate(360deg)" }
+});
+var SpinningDiv = styled("div", {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  animation: `${spin} 1s linear infinite`,
+  transformOrigin: "center center"
+});
 
 // src/components/Button/index.tsx
 var import_themes3 = require("@radix-ui/themes");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Button(_a) {
-  var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
+  var _b = _a, { asChild, children, loading } = _b, props = __objRest(_b, ["asChild", "children", "loading"]);
   const Component = asChild ? import_themes3.Button : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonStyled, __spreadValues({ as: Component }, props));
+  const { size, disabled } = props;
+  const spinnerSize = (0, import_react2.useMemo)(() => {
+    switch (size) {
+      case "small":
+        return "sm";
+      case "extraSmall":
+        return "xs";
+      case "medium":
+        return "md";
+      case "large":
+        return "xl";
+      default:
+        return "md";
+    }
+  }, [size]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonStyled, __spreadProps(__spreadValues({ as: Component, disabled: disabled || loading }, props), { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpinningDiv, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "circle-notch", size: spinnerSize }) }) : children }));
 }
 
 // src/components/ButtonGroup.tsx
@@ -2377,7 +2406,7 @@ function Avatar(_a) {
 }
 
 // src/components/TextField.tsx
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_themes7 = require("@radix-ui/themes");
 
 // src/components/Flex.tsx
@@ -2682,7 +2711,7 @@ var TextFieldLimitIndicator = styled("div", {
 });
 var maskFormat = import_mask.format;
 var maskUnformat = import_mask.unformat;
-var TextField = import_react2.default.forwardRef(
+var TextField = import_react3.default.forwardRef(
   (_a, fowardedRef) => {
     var _b = _a, {
       children,
@@ -2710,8 +2739,8 @@ var TextField = import_react2.default.forwardRef(
       "hasError"
     ]);
     const maskRef = mask ? (0, import_mask.useMask)(mask) : void 0;
-    const inputRef = import_react2.default.useRef(null);
-    const badgeRef = import_react2.default.useRef(null);
+    const inputRef = import_react3.default.useRef(null);
+    const badgeRef = import_react3.default.useRef(null);
     const updateCharCountBadge = () => {
       var _a2, _b2;
       if (!maxLength || !badgeRef.current) return;
@@ -3304,7 +3333,7 @@ function FilterItem(_a) {
 }
 
 // src/components/Dropdown.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
 var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -3435,8 +3464,8 @@ function DropdownMenu2(_a) {
     "onOpenChange",
     "defaultOpen"
   ]);
-  const [internalOpen, setInternalOpen] = (0, import_react3.useState)(defaultOpen);
-  const dropdownRef = (0, import_react3.useRef)(null);
+  const [internalOpen, setInternalOpen] = (0, import_react4.useState)(defaultOpen);
+  const dropdownRef = (0, import_react4.useRef)(null);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const handleToggle = () => {
@@ -3452,7 +3481,7 @@ function DropdownMenu2(_a) {
     }
     onOpenChange == null ? void 0 : onOpenChange(false);
   };
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         handleClose();
@@ -3513,7 +3542,7 @@ function DropdownMenu2(_a) {
     })
   );
 }
-var DropdownMenuContext = import_react3.default.createContext(null);
+var DropdownMenuContext = import_react4.default.createContext(null);
 function DropdownMenuProvider({
   children,
   onItemSelect
@@ -3536,7 +3565,7 @@ function DropdownMenuItem(_a) {
     "onSelect",
     "onClick"
   ]);
-  const context = import_react3.default.useContext(DropdownMenuContext);
+  const context = import_react4.default.useContext(DropdownMenuContext);
   const handleClick = (event) => {
     onClick == null ? void 0 : onClick(event);
     onSelect == null ? void 0 : onSelect(value);
@@ -3565,7 +3594,7 @@ function DropdownMenuItem(_a) {
 }
 
 // src/components/Badge.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_themes11 = require("@radix-ui/themes");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var BadgeStyled = styled(import_themes11.Badge, {
@@ -3669,9 +3698,9 @@ var BadgeStyled = styled(import_themes11.Badge, {
 });
 function Badge(_a) {
   var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: import_react4.default.Children.map(children, (child) => {
-    if (import_react4.default.isValidElement(child)) {
-      return import_react4.default.cloneElement(child, { size: props.size });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: import_react5.default.Children.map(children, (child) => {
+    if (import_react5.default.isValidElement(child)) {
+      return import_react5.default.cloneElement(child, { size: props.size });
     }
     return child;
   }) }));
@@ -3775,7 +3804,7 @@ function Modal(_a) {
 }
 
 // src/components/MenuDropdown/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/components/MenuDropdown/styledComponents.ts
 var MenuDropdownContainerStyled = styled("div", {
@@ -3809,9 +3838,9 @@ var MenuItemsContainerStyled = styled("div", {
 });
 
 // src/hooks/useOnClickOutside.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useOnClickOutside(ref, handler) {
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const listener = (event) => {
       if (!(ref == null ? void 0 : ref.current) || !event.target) {
         return;
@@ -3848,7 +3877,7 @@ function MenuDropdown({
   isOpen,
   setIsOpen
 }) {
-  const dropdownItemsContainerRef = (0, import_react6.useRef)(null);
+  const dropdownItemsContainerRef = (0, import_react7.useRef)(null);
   useOnClickOutside(dropdownItemsContainerRef, () => {
     setIsOpen(false);
   });
@@ -3859,7 +3888,7 @@ function MenuDropdown({
 }
 
 // src/components/Calendar/index.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_day_picker = require("react-day-picker");
 
 // ../../node_modules/date-fns/locale/_lib/buildFormatLongFn.js
@@ -8025,15 +8054,15 @@ function Calendar(_a) {
     "allowPastDates",
     "maxYearsFromNow"
   ]);
-  const [inputValue, setInputValue] = (0, import_react7.useState)("");
-  const [showContainer, setShowCalendar] = (0, import_react7.useState)(false);
-  const dropdownRef = (0, import_react7.useRef)(null);
+  const [inputValue, setInputValue] = (0, import_react8.useState)("");
+  const [showContainer, setShowCalendar] = (0, import_react8.useState)(false);
+  const dropdownRef = (0, import_react8.useRef)(null);
   useOnClickOutside(dropdownRef, () => {
     setShowCalendar(false);
   });
   const today = /* @__PURE__ */ new Date();
   const maxDate = addYears(today, maxYearsFromNow);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (selected) {
       setInputValue(format2(selected, "dd/MM/yyyy"));
     } else {
@@ -8110,7 +8139,7 @@ function Calendar(_a) {
 }
 
 // src/components/Drawer/index.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/Drawer/styledComponents.ts
 var DrawerOverlayStyled = styled("div", {
@@ -8176,7 +8205,7 @@ function Drawer({
   zIndex
 }) {
   if (!isOpen) return null;
-  const drawerContainerRef = (0, import_react8.useRef)(null);
+  const drawerContainerRef = (0, import_react9.useRef)(null);
   useOnClickOutside(drawerContainerRef, (event) => {
     var _a;
     if (!event || !drawerContainerRef.current) {
@@ -8248,7 +8277,7 @@ function Drawer({
 }
 
 // src/components/TimePicker.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var TimePickerStyled = styled("div", {
   position: "relative",
@@ -8371,14 +8400,14 @@ function TimePicker({
   hasError,
   expand = false
 }) {
-  const [hours, setHours] = (0, import_react9.useState)("00");
-  const [minutes, setMinutes] = (0, import_react9.useState)("00");
-  const [rawHours, setRawHours] = (0, import_react9.useState)("00");
-  const [rawMinutes, setRawMinutes] = (0, import_react9.useState)("00");
-  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
-  const dropdownRef = (0, import_react9.useRef)(null);
+  const [hours, setHours] = (0, import_react10.useState)("00");
+  const [minutes, setMinutes] = (0, import_react10.useState)("00");
+  const [rawHours, setRawHours] = (0, import_react10.useState)("00");
+  const [rawMinutes, setRawMinutes] = (0, import_react10.useState)("00");
+  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
+  const dropdownRef = (0, import_react10.useRef)(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
-  const handleIncrement = (0, import_react9.useCallback)(
+  const handleIncrement = (0, import_react10.useCallback)(
     (type) => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
@@ -8392,7 +8421,7 @@ function TimePicker({
     },
     [hours, minutes]
   );
-  const handleDecrement = (0, import_react9.useCallback)(
+  const handleDecrement = (0, import_react10.useCallback)(
     (type) => {
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
@@ -8916,7 +8945,7 @@ function Switch(props) {
 }
 
 // src/components/Step.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_themes15 = require("@radix-ui/themes");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var StepStyled = styled("div", {
@@ -9032,9 +9061,9 @@ function StepList(_a) {
     "children",
     "currentStep"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children: import_react10.default.Children.map(children, (child) => {
-    if (import_react10.default.isValidElement(child) && child.type === StepTrigger) {
-      return import_react10.default.cloneElement(child, { currentStep });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children: import_react11.default.Children.map(children, (child) => {
+    if (import_react11.default.isValidElement(child) && child.type === StepTrigger) {
+      return import_react11.default.cloneElement(child, { currentStep });
     }
     return child;
   }) }));
@@ -9095,7 +9124,7 @@ function Card(_a) {
 
 // src/components/TextareaField.tsx
 var import_themes17 = require("@radix-ui/themes");
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var TextareaFieldStyle = styled(import_themes17.TextArea, {
   display: "flex",
@@ -9160,11 +9189,11 @@ var TextareaLimitIndicator = styled("div", {
     padding: "$4"
   }
 });
-var TextareaField = import_react11.default.forwardRef((_a, forwardedRef) => {
+var TextareaField = import_react12.default.forwardRef((_a, forwardedRef) => {
   var _b = _a, { maxLength, color } = _b, props = __objRest(_b, ["maxLength", "color"]);
-  const inputRef = (0, import_react11.useRef)(null);
-  const [remaining, setRemaining] = (0, import_react11.useState)(maxLength);
-  (0, import_react11.useEffect)(() => {
+  const inputRef = (0, import_react12.useRef)(null);
+  const [remaining, setRemaining] = (0, import_react12.useState)(maxLength);
+  (0, import_react12.useEffect)(() => {
     var _a2;
     if (maxLength && inputRef.current) {
       setRemaining(maxLength - ((_a2 = inputRef.current.value.length) != null ? _a2 : 0));
@@ -9199,12 +9228,12 @@ var TextareaField = import_react11.default.forwardRef((_a, forwardedRef) => {
 });
 
 // src/components/Toast/components/ToastItem.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/components/Toast/styles/index.ts
-var import_react12 = require("@stitches/react");
+var import_react13 = require("@stitches/react");
 var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
-var slideIn = (0, import_react12.keyframes)({
+var slideIn = (0, import_react13.keyframes)({
   from: {
     transform: "translateX(calc(100% + 25px))",
     opacity: 0
@@ -9214,7 +9243,7 @@ var slideIn = (0, import_react12.keyframes)({
     opacity: 1
   }
 });
-var slideOut = (0, import_react12.keyframes)({
+var slideOut = (0, import_react13.keyframes)({
   from: {
     transform: "translateX(0)",
     opacity: 1
@@ -9224,7 +9253,7 @@ var slideOut = (0, import_react12.keyframes)({
     opacity: 0
   }
 });
-var swipeOut = (0, import_react12.keyframes)({
+var swipeOut = (0, import_react13.keyframes)({
   from: {
     transform: "translateX(var(--radix-toast-swipe-end-x))",
     opacity: 1
@@ -9330,7 +9359,7 @@ function ToastItem({
   toast,
   onRemove
 }) {
-  const [open, setOpen] = (0, import_react13.useState)(true);
+  const [open, setOpen] = (0, import_react14.useState)(true);
   const handleOpenChange = (open2) => {
     setOpen(open2);
     if (!open2) {
@@ -9354,17 +9383,17 @@ function ToastItem({
 }
 
 // src/components/Toast/components/ToastProvider.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var ToastPrimitive2 = __toESM(require("@radix-ui/react-toast"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var ToastContext = (0, import_react14.createContext)(null);
+var ToastContext = (0, import_react15.createContext)(null);
 function ToastProvider({
   children,
   defaultDuration = 5e3,
   maxToasts = 5,
   swipeDirection = "right"
 }) {
-  const [toasts, setToasts] = (0, import_react14.useState)([]);
+  const [toasts, setToasts] = (0, import_react15.useState)([]);
   const addToast = (toastData) => {
     const id = Math.random().toString(36).substr(2, 9);
     const newToast = __spreadProps(__spreadValues({
@@ -9400,9 +9429,9 @@ function ToastProvider({
 }
 
 // src/components/Toast/hooks/useToast.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var useToast = () => {
-  const context = (0, import_react15.useContext)(ToastContext);
+  const context = (0, import_react16.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast deve ser usado dentro de um ToastProvider");
   }
@@ -9460,11 +9489,11 @@ function Tooltip({
 }
 
 // src/components/MultiSelect/index.tsx
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 var import_themes19 = require("@radix-ui/themes");
 var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/MultiSelect/styledComponents.ts
 var import_themes18 = require("@radix-ui/themes");
@@ -9614,7 +9643,7 @@ var ButtonSelectAllStyled = styled("button", {
 
 // src/components/MultiSelect/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var MultiSelect = import_react16.default.forwardRef(
+var MultiSelect = import_react17.default.forwardRef(
   ({
     placeholder,
     value: selectedValues = [],
@@ -9632,24 +9661,24 @@ var MultiSelect = import_react16.default.forwardRef(
     selectedAllText,
     selectedScroll = false
   }, fowardedRef) => {
-    const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
-    const triggerRef = (0, import_react16.useRef)(null);
-    const [allOptionsSelected, setAllOptionsSelected] = (0, import_react16.useState)(false);
-    const labelByValue = (0, import_react17.useMemo)(() => {
+    const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+    const triggerRef = (0, import_react17.useRef)(null);
+    const [allOptionsSelected, setAllOptionsSelected] = (0, import_react17.useState)(false);
+    const labelByValue = (0, import_react18.useMemo)(() => {
       return options.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
           [curr.value]: curr.label
         });
       }, {});
     }, [options]);
-    const handleRemove = (0, import_react16.useCallback)(
+    const handleRemove = (0, import_react17.useCallback)(
       (value) => {
         const newValue = selectedValues.filter((v) => v !== value);
         onValueChange == null ? void 0 : onValueChange(newValue);
       },
       [selectedValues, onValueChange]
     );
-    const handleSelectAll = (0, import_react16.useCallback)(
+    const handleSelectAll = (0, import_react17.useCallback)(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -9664,7 +9693,7 @@ var MultiSelect = import_react16.default.forwardRef(
       },
       [selectedValues, options, onValueChange]
     );
-    const text = (0, import_react17.useMemo)(() => {
+    const text = (0, import_react18.useMemo)(() => {
       if (selectedValues.length > 0 && singleSelect) {
         const value = selectedValues[0];
         return labelByValue[value];
@@ -9675,7 +9704,7 @@ var MultiSelect = import_react16.default.forwardRef(
       onValueChange == null ? void 0 : onValueChange([v]);
       setIsOpen(false);
     };
-    const handleToggle = (0, import_react16.useCallback)(
+    const handleToggle = (0, import_react17.useCallback)(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -10114,7 +10143,7 @@ var TextAreaFormField = (_a) => {
 
 // src/components/FormFields/TextFormField.tsx
 var import_react_hook_form2 = require("react-hook-form");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_mask2 = require("@react-input/mask");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var TextFormField = (_a) => {
@@ -10137,7 +10166,7 @@ var TextFormField = (_a) => {
     "onChange",
     "valueFormatter"
   ]);
-  const handleValidate = (0, import_react18.useCallback)(
+  const handleValidate = (0, import_react19.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || !required && value.trim() === "")
@@ -10159,7 +10188,7 @@ var TextFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: formValue, onChange: formChange } = field;
-  const formattedValue = (0, import_react18.useMemo)(() => {
+  const formattedValue = (0, import_react19.useMemo)(() => {
     let value = formValue;
     if (valueFormatter) value = valueFormatter.format(value);
     if (mask) value = (0, import_mask2.format)(value != null ? value : "", mask);
@@ -10754,7 +10783,7 @@ function StateFormField({
 }
 
 // src/components/FormFields/AddressFormFields/CityFormField.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_hook_form7 = require("react-hook-form");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function CityFormField({
@@ -10767,9 +10796,9 @@ function CityFormField({
 }) {
   const { control, watch } = (0, import_react_hook_form7.useFormContext)();
   const selectedState = watch(stateName);
-  const [cities, setCities] = (0, import_react19.useState)([]);
-  const [loading, setLoading] = (0, import_react19.useState)(false);
-  (0, import_react19.useEffect)(() => {
+  const [cities, setCities] = (0, import_react20.useState)([]);
+  const [loading, setLoading] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
     if (!isBrazil) {
       setCities([]);
       return;
@@ -11157,10 +11186,10 @@ var EmailFormField = ({
 var import_react_hook_form12 = require("react-hook-form");
 
 // src/components/RichEditor/RichEditor.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/RichEditor/QuillComponent.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_quilljs = require("react-quilljs");
 
 // src/utils/uploadService.ts
@@ -12229,12 +12258,12 @@ var QuillComponent = ({
   onCharacterCountChange,
   maxLength
 }) => {
-  const [showVideoModal, setShowVideoModal] = (0, import_react20.useState)(false);
-  const [videoUrl, setVideoUrl] = (0, import_react20.useState)("");
-  const [showLinkModal, setShowLinkModal] = (0, import_react20.useState)(false);
-  const [linkUrl, setLinkUrl] = (0, import_react20.useState)("");
-  const videoModalRef = (0, import_react20.useRef)(null);
-  const linkModalRef = (0, import_react20.useRef)(null);
+  const [showVideoModal, setShowVideoModal] = (0, import_react21.useState)(false);
+  const [videoUrl, setVideoUrl] = (0, import_react21.useState)("");
+  const [showLinkModal, setShowLinkModal] = (0, import_react21.useState)(false);
+  const [linkUrl, setLinkUrl] = (0, import_react21.useState)("");
+  const videoModalRef = (0, import_react21.useRef)(null);
+  const linkModalRef = (0, import_react21.useRef)(null);
   const { addToast, removeToast } = useToast();
   const formatHTML = (html) => {
     const parser = new DOMParser();
@@ -12298,7 +12327,7 @@ var QuillComponent = ({
     placeholder,
     readOnly: disabled
   });
-  const handleImageUpload = (0, import_react20.useCallback)(
+  const handleImageUpload = (0, import_react21.useCallback)(
     (file) => __async(null, null, function* () {
       if (disabled || !quill || !uploadConfig) return;
       try {
@@ -12330,7 +12359,7 @@ var QuillComponent = ({
     }),
     [disabled, quill, addToast, removeToast, uploadConfig, onChange]
   );
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (quill && value) {
       const currentContent = quill.root.innerHTML;
       if (currentContent !== value) {
@@ -12344,7 +12373,7 @@ var QuillComponent = ({
       }
     }
   }, [quill, value]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (quill) {
       quill.on("text-change", (delta, oldDelta, source) => {
         if (source === "user") {
@@ -12399,7 +12428,7 @@ var QuillComponent = ({
       }, 2e3);
     }
   }, [quill, onChange, handleImageUpload, onCharacterCountChange]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (quill) {
       quill.enable(!disabled);
       if (!disabled) {
@@ -12410,11 +12439,11 @@ var QuillComponent = ({
       }
     }
   }, [quill, disabled]);
-  const handleLinkCancel = (0, import_react20.useCallback)(() => {
+  const handleLinkCancel = (0, import_react21.useCallback)(() => {
     setLinkUrl("");
     setShowLinkModal(false);
   }, []);
-  const handleLinkSubmit = (0, import_react20.useCallback)(() => {
+  const handleLinkSubmit = (0, import_react21.useCallback)(() => {
     if (!linkUrl.trim() || !quill) return;
     const url = linkUrl.trim();
     const selection = quill.getSelection();
@@ -12429,11 +12458,11 @@ var QuillComponent = ({
     setLinkUrl("");
     setShowLinkModal(false);
   }, [linkUrl, quill]);
-  const handleVideoCancel = (0, import_react20.useCallback)(() => {
+  const handleVideoCancel = (0, import_react21.useCallback)(() => {
     setVideoUrl("");
     setShowVideoModal(false);
   }, []);
-  const handleVideoSubmit = (0, import_react20.useCallback)(() => {
+  const handleVideoSubmit = (0, import_react21.useCallback)(() => {
     var _a, _b;
     if (!videoUrl.trim() || !quill) return;
     let processedUrl = videoUrl.trim();
@@ -12466,7 +12495,7 @@ var QuillComponent = ({
     setVideoUrl("");
     setShowVideoModal(false);
   }, [videoUrl, quill]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (showVideoModal && videoModalRef.current && !videoModalRef.current.contains(event.target)) {
         handleVideoCancel();
@@ -12628,8 +12657,8 @@ var QuillComponent_default = QuillComponent;
 // src/components/RichEditor/RichEditor.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var RichEditor = (props) => {
-  const [isClient, setIsClient] = (0, import_react21.useState)(false);
-  (0, import_react21.useEffect)(() => {
+  const [isClient, setIsClient] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
     setIsClient(typeof window !== "undefined");
   }, []);
   if (!isClient) return null;
@@ -12638,7 +12667,7 @@ var RichEditor = (props) => {
 var RichEditor_default = RichEditor;
 
 // src/components/FormFields/RichEditorFormField.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var RichEditorFormField = (_a) => {
   var _b = _a, {
@@ -12673,7 +12702,7 @@ var RichEditorFormField = (_a) => {
     },
     defaultValue: ""
   });
-  const [caracterQuantity, setCaracterQuantity] = (0, import_react22.useState)(maxLength);
+  const [caracterQuantity, setCaracterQuantity] = (0, import_react23.useState)(maxLength);
   const handleCharacterCountChange = (count) => {
     if (maxLength !== void 0) {
       setCaracterQuantity(Math.max(0, maxLength - count));
@@ -12721,7 +12750,7 @@ var RichEditorFormField = (_a) => {
 
 // src/components/FormFields/CalendarFormField.tsx
 var import_react_hook_form13 = require("react-hook-form");
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 var CalendarFormField = (_a) => {
   var _b = _a, {
@@ -12745,7 +12774,7 @@ var CalendarFormField = (_a) => {
     "allowPastDates",
     "maxYearsFromNow"
   ]);
-  const handleValidate = (0, import_react23.useCallback)(
+  const handleValidate = (0, import_react24.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null) {
@@ -12800,7 +12829,7 @@ var CalendarFormField = (_a) => {
 
 // src/components/FormFields/TimePickerFormField.tsx
 var import_react_hook_form14 = require("react-hook-form");
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var TimePickerFormField = (_a) => {
   var _b = _a, {
@@ -12818,7 +12847,7 @@ var TimePickerFormField = (_a) => {
     "validationErrorMessage",
     "rules"
   ]);
-  const handleValidate = (0, import_react24.useCallback)(
+  const handleValidate = (0, import_react25.useCallback)(
     (value) => {
       var _a2;
       if (value === void 0 || value === null || value === "") {
@@ -12870,11 +12899,11 @@ var TimePickerFormField = (_a) => {
 };
 
 // src/hooks/useImageUpload.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 var useImageUpload = (options) => {
-  const [isUploading, setIsUploading] = (0, import_react25.useState)(false);
-  const [progress, setProgress] = (0, import_react25.useState)(null);
-  const [error, setError] = (0, import_react25.useState)(null);
+  const [isUploading, setIsUploading] = (0, import_react26.useState)(false);
+  const [progress, setProgress] = (0, import_react26.useState)(null);
+  const [error, setError] = (0, import_react26.useState)(null);
   const {
     onSuccess,
     onError,
@@ -12884,7 +12913,7 @@ var useImageUpload = (options) => {
     allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"],
     uploadConfig
   } = options;
-  const validateFile = (0, import_react25.useCallback)(
+  const validateFile = (0, import_react26.useCallback)(
     (file) => {
       if (!allowedTypes.includes(file.type)) {
         const errorMsg = "Tipo de arquivo n\xE3o suportado";
@@ -12902,7 +12931,7 @@ var useImageUpload = (options) => {
     },
     [allowedTypes, maxFileSize, onError]
   );
-  const uploadFile = (0, import_react25.useCallback)(
+  const uploadFile = (0, import_react26.useCallback)(
     (file) => __async(null, null, function* () {
       if (!validateFile(file)) {
         return null;
@@ -12955,7 +12984,7 @@ var useImageUpload = (options) => {
     }),
     [validateFile, onSuccess, onError, onProgress]
   );
-  const reset = (0, import_react25.useCallback)(() => {
+  const reset = (0, import_react26.useCallback)(() => {
     setIsUploading(false);
     setProgress(null);
     setError(null);

package/dist/index.mjs

@@ -1430,6 +1430,9 @@ function Text(_a) {
   );
 }
 
+// src/components/Button/index.tsx
+import { useMemo } from "react";
+
 // src/components/Button/styledComponents.ts
 import { Button as ButtonRadix } from "@radix-ui/themes";
 var ButtonStyled = styled(ButtonRadix, {
@@ -1725,14 +1728,40 @@ var ButtonStyled = styled(ButtonRadix, {
     outlinedBgColor: "transparent"
   }
 });
+var spin = keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "100%": { transform: "rotate(360deg)" }
+});
+var SpinningDiv = styled("div", {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  animation: `${spin} 1s linear infinite`,
+  transformOrigin: "center center"
+});
 
 // src/components/Button/index.tsx
 import { Button as ButtonRadix2 } from "@radix-ui/themes";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function Button(_a) {
-  var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
+  var _b = _a, { asChild, children, loading } = _b, props = __objRest(_b, ["asChild", "children", "loading"]);
   const Component = asChild ? ButtonRadix2 : "button";
-  return /* @__PURE__ */ jsx3(ButtonStyled, __spreadValues({ as: Component }, props));
+  const { size, disabled } = props;
+  const spinnerSize = useMemo(() => {
+    switch (size) {
+      case "small":
+        return "sm";
+      case "extraSmall":
+        return "xs";
+      case "medium":
+        return "md";
+      case "large":
+        return "xl";
+      default:
+        return "md";
+    }
+  }, [size]);
+  return /* @__PURE__ */ jsx3(ButtonStyled, __spreadProps(__spreadValues({ as: Component, disabled: disabled || loading }, props), { children: loading ? /* @__PURE__ */ jsx3(SpinningDiv, { children: /* @__PURE__ */ jsx3(Icon_default, { name: "circle-notch", size: spinnerSize }) }) : children }));
 }
 
 // src/components/ButtonGroup.tsx
@@ -9356,7 +9385,7 @@ import {
   faChevronUp as faChevronUp2,
   faSquareXmark
 } from "@fortawesome/free-solid-svg-icons";
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/components/MultiSelect/styledComponents.ts
 import { DropdownMenu as DropdownMenu3 } from "@radix-ui/themes";
@@ -9527,7 +9556,7 @@ var MultiSelect = React9.forwardRef(
     const [isOpen, setIsOpen] = useState7(false);
     const triggerRef = useRef7(null);
     const [allOptionsSelected, setAllOptionsSelected] = useState7(false);
-    const labelByValue = useMemo(() => {
+    const labelByValue = useMemo2(() => {
       return options.reduce((prev, curr) => {
         return __spreadProps(__spreadValues({}, prev), {
           [curr.value]: curr.label
@@ -9556,7 +9585,7 @@ var MultiSelect = React9.forwardRef(
       },
       [selectedValues, options, onValueChange]
     );
-    const text = useMemo(() => {
+    const text = useMemo2(() => {
       if (selectedValues.length > 0 && singleSelect) {
         const value = selectedValues[0];
         return labelByValue[value];
@@ -10008,7 +10037,7 @@ var TextAreaFormField = (_a) => {
 import {
   useController
 } from "react-hook-form";
-import { useCallback as useCallback3, useMemo as useMemo2 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo3 } from "react";
 import { format as format3, unformat as unformat2 } from "@react-input/mask";
 import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var TextFormField = (_a) => {
@@ -10053,7 +10082,7 @@ var TextFormField = (_a) => {
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
   const { value: formValue, onChange: formChange } = field;
-  const formattedValue = useMemo2(() => {
+  const formattedValue = useMemo3(() => {
     let value = formValue;
     if (valueFormatter) value = valueFormatter.format(value);
     if (mask) value = format3(value != null ? value : "", mask);

package/package.json

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

package/src/components/Button/index.tsx

@@ -1,16 +1,45 @@
-import { ComponentProps } from "react";
-import { ButtonStyled } from "./styledComponents";
+import { ComponentProps, useMemo } from "react";
+import { ButtonStyled, SpinningDiv } from "./styledComponents";
 import { Button as ButtonRadix } from "@radix-ui/themes";
 import type { VariantProps } from "@stitches/react";
+import Icon, { IconProps } from "../Icon";
 
 type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
 export interface ButtonProps
   extends ComponentProps<typeof ButtonStyled>,
     ButtonVariantProps {
   asChild?: boolean;
+  loading?: boolean;
 }
 
-export function Button({ asChild, ...props }: ButtonProps) {
+export function Button({ asChild, children, loading, ...props }: ButtonProps) {
   const Component = asChild ? ButtonRadix : "button";
-  return <ButtonStyled as={Component} {...props} />;
+  const { size, disabled } = props;
+
+  const spinnerSize = useMemo((): IconProps["size"] => {
+    switch (size) {
+      case "small":
+        return "sm";
+      case "extraSmall":
+        return "xs";
+      case "medium":
+        return "md";
+      case "large":
+        return "xl";
+      default:
+        return "md";
+    }
+  }, [size]);
+
+  return (
+    <ButtonStyled as={Component} disabled={disabled || loading} {...props}>
+      {loading ? (
+        <SpinningDiv>
+          <Icon name="circle-notch" size={spinnerSize} />
+        </SpinningDiv>
+      ) : (
+        children
+      )}
+    </ButtonStyled>
+  );
 }

package/src/components/Button/styledComponents.ts

@@ -1,6 +1,6 @@
 import { Button as ButtonRadix } from "@radix-ui/themes";
 
-import { styled } from "../../styles";
+import { styled, keyframes } from "../../styles";
 
 export const ButtonStyled = styled(ButtonRadix, {
   $$buttonColor: "inherit",
@@ -298,3 +298,16 @@ export const ButtonStyled = styled(ButtonRadix, {
     outlinedBgColor: "transparent",
   },
 });
+
+const spin = keyframes({
+  "0%": { transform: "rotate(0deg)" },
+  "100%": { transform: "rotate(360deg)" },
+});
+
+export const SpinningDiv = styled("div", {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  animation: `${spin} 1s linear infinite`,
+  transformOrigin: "center center",
+});

package/src/components/Icon.tsx

@@ -9,7 +9,7 @@ import PropTypes from "prop-types";
 
 library.add(fas, far, fab);
 
-interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
+export interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
   name: IconName;
   size?: 'xs' | 'sm' | 'md' | 'xl';
   prefix?: IconPrefix;