@lets-events/react 12.6.1 → 12.6.3

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";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+
+// 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,9 +1882,17 @@ function Button(_a) {
         return "md";
     }
   }, [size]);
-  return /* @__PURE__ */ jsx3(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx3("div", { style: { visibility: loading ? "hidden" : void 0 }, children }),
-    loading && /* @__PURE__ */ jsx3(
+  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: {
@@ -1775,15 +1901,15 @@ function Button(_a) {
           left: "50%",
           transform: "translate(-50%, -50%)"
         },
-        children: /* @__PURE__ */ jsx3(SpinningDiv, { children: /* @__PURE__ */ jsx3(Icon_default, { name: "circle-notch", size: spinnerSize }) })
+        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,
@@ -1797,7 +1923,7 @@ var ButtonItemStyled = styled(Button2, {
     }
   }
 });
-var ButtonGroupStyled = styled(Flex, {
+var ButtonGroupStyled = styled(Flex2, {
   display: "flex",
   borderRadius: "$md",
   overflow: "hidden",
@@ -2249,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",
@@ -2303,123 +2429,12 @@ 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 as jsxs2 } from "react/jsx-runtime";
 var TextFieldStyled = styled(TextFieldRadix.Root, {
@@ -2653,8 +2668,8 @@ var TextField = React.forwardRef(
       updateCharCountBadge();
       (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
     };
-    return /* @__PURE__ */ jsxs2(Flex2, { direction: "column", css: { width: "100%", position: "relative" }, children: [
-      /* @__PURE__ */ jsxs2(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,
           {
@@ -8338,7 +8353,7 @@ function Drawer({
             },
             children: [
               /* @__PURE__ */ jsxs9(DrawerHeaderDiv, { children: [
-                /* @__PURE__ */ jsxs9(Flex2, { gap: 8, align: "center", 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 })
                 ] }),
@@ -8906,7 +8921,7 @@ function Alert(_a) {
           ] })
         ] }),
         completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ jsx19(AlertDialoghrStyled, {}) : null,
-        /* @__PURE__ */ jsx19(AlertDialogRowStyled, { children: /* @__PURE__ */ jsxs11(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,
             {
@@ -9285,7 +9300,7 @@ var TextareaField = React9.forwardRef((_a, forwardedRef) => {
     }
     (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ jsxs12(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,
@@ -9561,7 +9576,7 @@ function Tooltip({
   return /* @__PURE__ */ jsx26(TooltipProvider, { children: /* @__PURE__ */ jsxs15(TooltipRoot, { delayDuration, children: [
     /* @__PURE__ */ jsx26(TooltipTrigger, { asChild: true, children }),
     /* @__PURE__ */ jsxs15(TooltipContent, { side, sideOffset: 5, children: [
-      typeof content === "string" ? /* @__PURE__ */ jsx26(Text, { typography: "tooltip", children: content }) : content,
+      typeof content === "string" ? /* @__PURE__ */ jsx26(Text, { typography: "tooltip", color: "grey50", children: content }) : content,
       /* @__PURE__ */ jsx26(TooltipArrow, {})
     ] })
   ] }) });
@@ -9639,7 +9654,7 @@ var CloseBtnStyled = styled("button", {
   background: "none",
   border: "none"
 });
-var StyledFlexWithMaxHeight = styled(Flex2, {
+var StyledFlexWithMaxHeight = styled(Flex, {
   variants: {
     hasMaxHeight: {
       true: {
@@ -9665,7 +9680,7 @@ var StyledFlexWithMaxHeight = styled(Flex2, {
     hasMaxHeight: false
   }
 });
-var StyledFlexSelectedItems = styled(Flex2, {
+var StyledFlexSelectedItems = styled(Flex, {
   overflowY: "auto",
   margin: "8px 0",
   "&::-webkit-scrollbar": {
@@ -9897,7 +9912,7 @@ var MultiSelect = React10.forwardRef(
           justify: "start",
           css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
           children: allOptionsSelected ? /* @__PURE__ */ jsxs16(
-            Flex2,
+            Flex,
             {
               gap: 4,
               align: "center",
@@ -9928,7 +9943,7 @@ var MultiSelect = React10.forwardRef(
             },
             "all-selected"
           ) : selectedValues.map((value) => /* @__PURE__ */ jsxs16(
-            Flex2,
+            Flex,
             {
               gap: 4,
               align: "center",
@@ -10171,7 +10186,7 @@ var ErrorFormMessage = ({ message: message2 }) => {
   if (typeof message2 !== "string") {
     return null;
   }
-  return /* @__PURE__ */ jsxs17(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 })
   ] });
@@ -10188,7 +10203,7 @@ var FormLabel = ({
   required
 }) => {
   if (!label) return null;
-  return /* @__PURE__ */ jsxs18(Flex2, { align: "start", gap: 6, children: [
+  return /* @__PURE__ */ jsxs18(Flex, { align: "start", gap: 6, children: [
     /* @__PURE__ */ jsx32(
       Text,
       {
@@ -10237,7 +10252,7 @@ var TextAreaFormField = (_a) => {
     required: required ? validationErrorMessage : false,
     validate
   };
-  return /* @__PURE__ */ jsxs19(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs19(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx33(
       FormLabel,
       {
@@ -10322,7 +10337,7 @@ var TextFormField = (_a) => {
     if (valueFormatter) value = valueFormatter.unformat(value);
     formChange(value);
   };
-  return /* @__PURE__ */ jsxs20(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs20(Flex, { direction: "column", children: [
     label && /* @__PURE__ */ jsx34(
       FormLabel,
       {
@@ -10405,7 +10420,7 @@ var MultiSelectFormField = (_a) => {
   const handleChange = (v) => {
     onChange(v);
   };
-  return /* @__PURE__ */ jsxs21(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs21(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx36(
       FormLabel,
       {
@@ -10507,7 +10522,7 @@ var CPFFormField = ({
 }) => {
   const { control, setValue } = useFormContext3();
   const foreigner = useWatch({ name: "foreigner", control });
-  return /* @__PURE__ */ jsxs22(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs22(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx38(
       TextFormField,
       {
@@ -10731,7 +10746,7 @@ var SelectFormField = ({
   const validationRules = __spreadValues({
     required: required ? validationErrorMessage : false
   }, validation);
-  return /* @__PURE__ */ jsxs23(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs23(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx42(
       FormLabel,
       {
@@ -10814,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,
@@ -11145,7 +11160,7 @@ var RadioGroupFormField = ({
   const validationRules = {
     required: required ? validationErrorMessage : false
   };
-  return /* @__PURE__ */ jsxs25(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs25(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx48(
       FormLabel,
       {
@@ -11170,7 +11185,7 @@ var RadioGroupFormField = ({
             color: haveError ? "error" : color,
             fontWeight,
             disabled,
-            children: /* @__PURE__ */ jsx48(Flex2, { direction: "column", children: options.map((option) => /* @__PURE__ */ jsx48(RadioItem, { value: option.value, children: /* @__PURE__ */ jsx48(Text, { typography: "labelSmall", children: option.label }) }, option.value)) })
+            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)) })
           }
         )
       }
@@ -11204,7 +11219,7 @@ var CheckboxGroupFormField = ({
     required: required ? validationErrorMessage : false,
     validate: required ? (value) => (value == null ? void 0 : value.length) > 0 || validationErrorMessage : void 0
   };
-  return /* @__PURE__ */ jsxs26(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ jsxs26(Flex, { direction: "column", children: [
     /* @__PURE__ */ jsx49(
       FormLabel,
       {
@@ -11263,7 +11278,7 @@ var SwitchFormField = ({
   if (watch) {
     watchForm(name);
   }
-  return /* @__PURE__ */ jsxs27(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,
@@ -12648,7 +12663,7 @@ var QuillComponent = ({
           zIndex: 1e3,
           width: "fit-content"
         },
-        children: /* @__PURE__ */ jsxs28(Flex2, { gap: 8, align: "center", children: [
+        children: /* @__PURE__ */ jsxs28(Flex, { gap: 8, align: "center", children: [
           /* @__PURE__ */ jsx52(
             Text,
             {
@@ -12718,7 +12733,7 @@ var QuillComponent = ({
           zIndex: 1e3,
           width: "fit-content"
         },
-        children: /* @__PURE__ */ jsxs28(Flex2, { gap: 8, align: "center", children: [
+        children: /* @__PURE__ */ jsxs28(Flex, { gap: 8, align: "center", children: [
           /* @__PURE__ */ jsx52(
             Text,
             {
@@ -12833,8 +12848,8 @@ var RichEditorFormField = (_a) => {
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
-  return /* @__PURE__ */ jsxs29(Flex2, { direction: "column", children: [
-    maxLength ? /* @__PURE__ */ jsxs29(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,
         {
@@ -12922,7 +12937,7 @@ var CalendarFormField = (_a) => {
   const handleCalendarChange = (date) => {
     setSelected(date);
   };
-  return /* @__PURE__ */ jsxs30(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ jsxs30(Flex, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ jsx55(
       FormLabel,
       {
@@ -13001,7 +13016,7 @@ var DoubleCalendarFormField = (_a) => {
   const handleCalendarChange = (range) => {
     setSelected(range);
   };
-  return /* @__PURE__ */ jsxs31(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,
@@ -13067,7 +13082,7 @@ var TimePickerFormField = (_a) => {
   const handleTimePickerChange = (time) => {
     setSelected(time);
   };
-  return /* @__PURE__ */ jsxs32(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ jsxs32(Flex, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ jsx57(
       FormLabel,
       {
@@ -13235,7 +13250,7 @@ export {
   ErrorFormMessage,
   Filter,
   FilterItem,
-  Flex2 as Flex,
+  Flex,
   FlexStyled,
   Form,
   FormLabel,

package/package.json

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

package/src/components/Button/index.tsx

@@ -3,6 +3,7 @@ import { ButtonStyled, SpinningDiv } from "./styledComponents";
 import { Button as ButtonRadix } from "@radix-ui/themes";
 import type { VariantProps } from "@stitches/react";
 import Icon, { IconProps } from "../Icon";
+import { Flex } from "../Flex";
 
 type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
 export interface ButtonProps
@@ -34,9 +35,13 @@ export function Button({ asChild, children, loading, ...props }: ButtonProps) {
   return (
     <ButtonStyled as={Component} {...props} disabled={disabled || loading}>
       <div style={{ position: "relative" }}>
-        <div style={{ visibility: loading ? "hidden" : undefined }}>
+        <Flex
+          justify={"center"}
+          align={"center"}
+          css={{ visibility: loading ? "hidden" : undefined }}
+        >
           {children}
-        </div>
+        </Flex>
         {loading && (
           <div
             style={{

package/src/components/Button/styledComponents.ts

@@ -278,6 +278,13 @@ export const ButtonStyled = styled(ButtonRadix, {
         borderRadius: "$full",
       },
     },
+    isCircle: {
+      true: {
+        borderRadius: "$full",
+        padding: 0,
+        aspectRatio: "1",
+      },
+    },
   },
 
   compoundVariants: [