@lets-events/react 12.6.1 → 12.6.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@12.6.1 build
+> @lets-events/react@12.6.2 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
-ESM dist\index.mjs 389.01 KB
-ESM ⚡️ Build success in 203ms
-CJS dist\index.js 404.02 KB
-CJS ⚡️ Build success in 203ms
+ESM dist\index.mjs 389.19 KB
+ESM ⚡️ Build success in 252ms
+CJS dist\index.js 404.20 KB
+CJS ⚡️ Build success in 253ms
 DTS Build start
-DTS ⚡️ Build success in 4551ms
-DTS dist\index.d.mts 402.83 KB
-DTS dist\index.d.ts  402.83 KB
+DTS ⚡️ Build success in 4784ms
+DTS dist\index.d.mts 402.87 KB
+DTS dist\index.d.ts  402.87 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 12.6.2
+
+### Patch Changes
+
+- fix button
+
 ## 12.6.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -422,6 +422,7 @@ declare const ButtonStyled: _stitches_react_types_styled_component.StyledCompone
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     outlinedBgColor?: "transparent" | "neutral" | undefined;
     radii?: "full" | undefined;
+    isCircle?: boolean | "true" | undefined;
 }, {
     md: "(max-width: 690px)";
 }, _stitches_react_types_css_util.CSS<{

package/dist/index.d.ts

@@ -422,6 +422,7 @@ declare const ButtonStyled: _stitches_react_types_styled_component.StyledCompone
     fontWeight?: "bold" | "medium" | "regular" | "semibold" | undefined;
     outlinedBgColor?: "transparent" | "neutral" | undefined;
     radii?: "full" | undefined;
+    isCircle?: boolean | "true" | undefined;
 }, {
     md: "(max-width: 690px)";
 }, _stitches_react_types_css_util.CSS<{

package/dist/index.js

@@ -905,7 +905,7 @@ __export(index_exports, {
   ErrorFormMessage: () => ErrorFormMessage,
   Filter: () => Filter,
   FilterItem: () => FilterItem,
-  Flex: () => Flex2,
+  Flex: () => Flex,
   FlexStyled: () => FlexStyled,
   Form: () => Form,
   FormLabel: () => FormLabel,
@@ -1830,6 +1830,13 @@ var ButtonStyled = styled(import_themes2.Button, {
       full: {
         borderRadius: "$full"
       }
+    },
+    isCircle: {
+      true: {
+        borderRadius: "$full",
+        padding: 0,
+        aspectRatio: "1"
+      }
     }
   },
   compoundVariants: [
@@ -1862,11 +1869,122 @@ var SpinningDiv = styled("div", {
 });
 
 // src/components/Button/index.tsx
+var import_themes4 = require("@radix-ui/themes");
+
+// src/components/Flex.tsx
 var import_themes3 = require("@radix-ui/themes");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var FlexStyled = styled(import_themes3.Flex, {
+  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__ */ (0, import_jsx_runtime3.jsx)(FlexStyled, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/Button/index.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Button(_a) {
   var _b = _a, { asChild, children, loading } = _b, props = __objRest(_b, ["asChild", "children", "loading"]);
-  const Component = asChild ? import_themes3.Button : "button";
+  const Component = asChild ? import_themes4.Button : "button";
   const { size, disabled } = props;
   const spinnerSize = (0, import_react2.useMemo)(() => {
     switch (size) {
@@ -1882,9 +2000,17 @@ function Button(_a) {
         return "md";
     }
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { visibility: loading ? "hidden" : void 0 }, children }),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonStyled, __spreadProps(__spreadValues({ as: Component }, props), { disabled: disabled || loading, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Flex,
+      {
+        justify: "center",
+        align: "center",
+        css: { visibility: loading ? "hidden" : void 0 },
+        children
+      }
+    ),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "div",
       {
         style: {
@@ -1893,16 +2019,16 @@ function Button(_a) {
           left: "50%",
           transform: "translate(-50%, -50%)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SpinningDiv, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "circle-notch", size: spinnerSize }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SpinningDiv, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "circle-notch", size: spinnerSize }) })
       }
     )
   ] }) }));
 }
 
 // src/components/ButtonGroup.tsx
-var import_themes4 = require("@radix-ui/themes");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var ButtonItemStyled = styled(import_themes4.Button, {
+var import_themes5 = require("@radix-ui/themes");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ButtonItemStyled = styled(import_themes5.Button, {
   fontFamily: "$default",
   letterSpacing: 0,
   border: 0,
@@ -1915,7 +2041,7 @@ var ButtonItemStyled = styled(import_themes4.Button, {
     }
   }
 });
-var ButtonGroupStyled = styled(import_themes4.Flex, {
+var ButtonGroupStyled = styled(import_themes5.Flex, {
   display: "flex",
   borderRadius: "$md",
   overflow: "hidden",
@@ -2367,17 +2493,17 @@ var ButtonGroupStyled = styled(import_themes4.Flex, {
 });
 function ButtonItem(_a) {
   var _b = _a, { children, active } = _b, props = __objRest(_b, ["children", "active"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonItemStyled, __spreadProps(__spreadValues({ className: active ? "active" : "" }, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonItemStyled, __spreadProps(__spreadValues({ className: active ? "active" : "" }, props), { children }));
 }
 function ButtonGroup(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ButtonGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ButtonGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Avatar.tsx
-var import_themes5 = require("@radix-ui/themes");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var AvatarStyled = styled(import_themes5.Avatar, {
+var import_themes6 = require("@radix-ui/themes");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var AvatarStyled = styled(import_themes6.Avatar, {
   fontFamily: "$default",
   color: "$gray100",
   letterSpacing: "0px",
@@ -2421,123 +2547,12 @@ var AvatarStyled = styled(import_themes5.Avatar, {
 });
 function Avatar(_a) {
   var _b = _a, { asChild } = _b, props = __objRest(_b, ["asChild"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AvatarStyled, __spreadValues({ as: import_themes5.Avatar }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AvatarStyled, __spreadValues({ as: import_themes6.Avatar }, props));
 }
 
 // src/components/TextField.tsx
 var import_react3 = __toESM(require("react"));
 var import_themes7 = require("@radix-ui/themes");
-
-// src/components/Flex.tsx
-var import_themes6 = require("@radix-ui/themes");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var FlexStyled = styled(import_themes6.Flex, {
-  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__ */ (0, import_jsx_runtime6.jsx)(FlexStyled, __spreadProps(__spreadValues({}, props), { children }));
-}
-
-// src/components/TextField.tsx
 var import_mask = require("@react-input/mask");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var TextFieldStyled = styled(import_themes7.TextField.Root, {
@@ -2771,8 +2786,8 @@ var TextField = import_react3.default.forwardRef(
       updateCharCountBadge();
       (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex2, { direction: "column", css: { width: "100%", position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex2, { gap: "0", css: { width: "100%" }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { direction: "column", css: { width: "100%", position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { gap: "0", css: { width: "100%" }, children: [
         !!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           InputAddon,
           {
@@ -8452,7 +8467,7 @@ function Drawer({
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DrawerHeaderDiv, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex2, { gap: 8, align: "center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Flex, { gap: 8, align: "center", children: [
                   goBackIcon && goBackIcon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
                   /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DrawerHeaderTitle, { children: title })
                 ] }),
@@ -9020,7 +9035,7 @@ function Alert(_a) {
           ] })
         ] }),
         completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialoghrStyled, {}) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex2, { gap: "10", justify: "end", width: "100%", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Flex, { gap: "10", justify: "end", width: "100%", children: [
           completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_themes13.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Button,
             {
@@ -9399,7 +9414,7 @@ var TextareaField = import_react13.default.forwardRef((_a, forwardedRef) => {
     }
     (_a2 = props.onInput) == null ? void 0 : _a2.call(props, e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Flex2, { direction: "column", align: "end", style: { position: "relative" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Flex, { direction: "column", align: "end", style: { position: "relative" }, children: [
     maxLength && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge, { size: "sm", color: "grey", style: { position: "absolute", right: 0, top: "-1.75rem" }, children: remaining }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TextareaContainer, { color, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       TextareaFieldStyle,
@@ -9749,7 +9764,7 @@ var CloseBtnStyled = styled("button", {
   background: "none",
   border: "none"
 });
-var StyledFlexWithMaxHeight = styled(Flex2, {
+var StyledFlexWithMaxHeight = styled(Flex, {
   variants: {
     hasMaxHeight: {
       true: {
@@ -9775,7 +9790,7 @@ var StyledFlexWithMaxHeight = styled(Flex2, {
     hasMaxHeight: false
   }
 });
-var StyledFlexSelectedItems = styled(Flex2, {
+var StyledFlexSelectedItems = styled(Flex, {
   overflowY: "auto",
   margin: "8px 0",
   "&::-webkit-scrollbar": {
@@ -10007,7 +10022,7 @@ var MultiSelect = import_react18.default.forwardRef(
           justify: "start",
           css: __spreadValues({}, selectedScroll && { maxHeight: maxHeight || "400px" }),
           children: allOptionsSelected ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-            Flex2,
+            Flex,
             {
               gap: 4,
               align: "center",
@@ -10038,7 +10053,7 @@ var MultiSelect = import_react18.default.forwardRef(
             },
             "all-selected"
           ) : selectedValues.map((value) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
-            Flex2,
+            Flex,
             {
               gap: 4,
               align: "center",
@@ -10281,7 +10296,7 @@ var ErrorFormMessage = ({ message: message2 }) => {
   if (typeof message2 !== "string") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex2, { justify: "start", align: "center", gap: 6, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { justify: "start", align: "center", gap: 6, children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_fontawesome4.FontAwesomeIcon, { icon: import_free_solid_svg_icons4.faXmarkCircle, color: colors.error600, size: "1x" }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { typography: "bodyXS", fontWeight: "medium", color: "error600", children: message2 })
   ] });
@@ -10298,7 +10313,7 @@ var FormLabel = ({
   required
 }) => {
   if (!label) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex2, { align: "start", gap: 6, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { align: "start", gap: 6, children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Text,
       {
@@ -10347,7 +10362,7 @@ var TextAreaFormField = (_a) => {
     required: required ? validationErrorMessage : false,
     validate
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex, { direction: "column", children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       FormLabel,
       {
@@ -10430,7 +10445,7 @@ var TextFormField = (_a) => {
     if (valueFormatter) value = valueFormatter.unformat(value);
     formChange(value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Flex, { direction: "column", children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       FormLabel,
       {
@@ -10510,7 +10525,7 @@ var MultiSelectFormField = (_a) => {
   const handleChange = (v) => {
     onChange(v);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { direction: "column", children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       FormLabel,
       {
@@ -10612,7 +10627,7 @@ var CPFFormField = ({
 }) => {
   const { control, setValue } = (0, import_react_hook_form5.useFormContext)();
   const foreigner = (0, import_react_hook_form5.useWatch)({ name: "foreigner", control });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(Flex, { direction: "column", children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       TextFormField,
       {
@@ -10836,7 +10851,7 @@ var SelectFormField = ({
   const validationRules = __spreadValues({
     required: required ? validationErrorMessage : false
   }, validation);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Flex, { direction: "column", children: [
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       FormLabel,
       {
@@ -10919,7 +10934,7 @@ function CountryFormField({
   language = "pt-BR"
 }) {
   const countries2 = useCountries(language);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex2, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Flex, { direction: "column", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     SelectFormField,
     {
       label,
@@ -11250,7 +11265,7 @@ var RadioGroupFormField = ({
   const validationRules = {
     required: required ? validationErrorMessage : false
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Flex, { direction: "column", children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       FormLabel,
       {
@@ -11275,7 +11290,7 @@ var RadioGroupFormField = ({
             color: haveError ? "error" : color,
             fontWeight,
             disabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Flex2, { direction: "column", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RadioItem, { value: option.value, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { typography: "labelSmall", children: option.label }) }, option.value)) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Flex, { direction: "column", children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(RadioItem, { value: option.value, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { typography: "labelSmall", children: option.label }) }, option.value)) })
           }
         )
       }
@@ -11309,7 +11324,7 @@ var CheckboxGroupFormField = ({
     required: required ? validationErrorMessage : false,
     validate: required ? (value) => (value == null ? void 0 : value.length) > 0 || validationErrorMessage : void 0
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex2, { direction: "column", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Flex, { direction: "column", children: [
     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       FormLabel,
       {
@@ -11368,7 +11383,7 @@ var SwitchFormField = ({
   if (watch) {
     watchForm(name);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex2, { justify: "between", style: { margin: "1rem 0" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Flex, { justify: "between", style: { margin: "1rem 0" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { typography: "labelMedium", fontWeight: "regular", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       import_react_hook_form11.Controller,
@@ -12753,7 +12768,7 @@ var QuillComponent = ({
           zIndex: 1e3,
           width: "fit-content"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Flex2, { gap: 8, align: "center", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Flex, { gap: 8, align: "center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             Text,
             {
@@ -12823,7 +12838,7 @@ var QuillComponent = ({
           zIndex: 1e3,
           width: "fit-content"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Flex2, { gap: 8, align: "center", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Flex, { gap: 8, align: "center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             Text,
             {
@@ -12938,8 +12953,8 @@ var RichEditorFormField = (_a) => {
   const fieldError = fieldState.error;
   const haveError = !!fieldError;
   const errorMsg = fieldError == null ? void 0 : fieldError.message;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex2, { direction: "column", children: [
-    maxLength ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex2, { direction: "row", justify: "between", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex, { direction: "column", children: [
+    maxLength ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Flex, { direction: "row", justify: "between", children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         FormLabel,
         {
@@ -13027,7 +13042,7 @@ var CalendarFormField = (_a) => {
   const handleCalendarChange = (date) => {
     setSelected(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       FormLabel,
       {
@@ -13106,7 +13121,7 @@ var DoubleCalendarFormField = (_a) => {
   const handleCalendarChange = (range) => {
     setSelected(range);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(FormLabel, { name, label, required, haveError }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       DoubleCalendar,
@@ -13172,7 +13187,7 @@ var TimePickerFormField = (_a) => {
   const handleTimePickerChange = (time) => {
     setSelected(time);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex2, { direction: "column", style: { flex: "1" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Flex, { direction: "column", style: { flex: "1" }, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       FormLabel,
       {

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,
@@ -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.2",
   "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: [