@lets-events/react 6.1.0 → 7.0.1

package/dist/index.mjs

@@ -1594,6 +1594,10 @@ function Text(_a) {
 // src/components/Button/styledComponents.ts
 import { Button as ButtonRadix } from "@radix-ui/themes";
 var ButtonStyled = styled(ButtonRadix, {
+  $$buttonColor: "inherit",
+  $$buttonBgColor: "$colors$grey50",
+  $$buttonBorderColor: "inherit",
+  $$buttonOutlinedColor: "inherit",
   fontFamily: "$default",
   letterSpacing: 0,
   border: 0,
@@ -1612,332 +1616,223 @@ var ButtonStyled = styled(ButtonRadix, {
   },
   variants: {
     color: {
-      brand: {},
-      neutral: {},
-      purple: {}
-    },
-    variant: {
-      text: {
-        backgroundColor: "transparent",
-        boxShadow: "none",
-        padding: 0,
-        border: 0
-      },
-      contained: {
+      brand: {
+        $$buttonColor: "$colors$brand500",
+        $$buttonBorderColor: "$colors$brand600",
+        $$buttonOutlinedColor: "$$buttonColor",
         "&:hover": {
-          borderWidth: "1px",
-          borderStyle: "solid"
+          $$buttonColor: "$colors$brand600",
+          $$buttonBorderColor: "$colors$brand700"
         },
-        "&:active": {
-          borderWidth: "2px"
+        "&:focus": {
+          $$buttonColor: "$colors$brand400",
+          $$buttonBorderColor: "$colors$brand300",
+          $$buttonBgColor: "$colors$grey200"
         },
-        "&:disabled": {
-          boxShadow: "none"
+        "&:active": {
+          $$buttonColor: "$colors$brand500",
+          $$buttonBorderColor: "$colors$brand700",
+          $$buttonBgColor: "$colors$grey200"
         }
       },
-      outlined: {
-        borderWidth: "1px",
-        borderStyle: "solid",
-        "&:disabled": {
-          color: "$neutral400",
-          boxShadow: "none"
-        }
-      }
-    },
-    typography: typographyButtonValues,
-    fontWeight: {
-      regular: { fontWeight: "$regular" },
-      medium: { fontWeight: "$medium" },
-      semibold: { fontWeight: "$semibold" },
-      bold: { fontWeight: "$bold" }
-    },
-    outlinedBgColor: {
-      neutral: {},
-      transparent: {}
-    },
-    radii: {
-      "full": {
-        borderRadius: "$full"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "contained",
-    typography: "buttonMedium",
-    color: "brand"
-  },
-  compoundVariants: [
-    {
-      variant: "text",
-      color: "brand",
-      css: {
-        color: "$brand500",
-        "&:hover": { color: "$brand600" },
-        "&:focus": { color: "$brand700" },
-        "&:active": { color: "$brand500" },
-        "&:disabled": { color: "$dark400" }
-      }
-    },
-    {
-      variant: "text",
-      color: "neutral",
-      css: {
-        color: "$neutral600",
-        "&:hover": { color: "$neutral700" },
-        "&:focus": { color: "$neutral800" },
-        "&:active": { color: "$neutral500" },
-        "&:disabled": { color: "$dark400" }
-      }
-    },
-    {
-      variant: "text",
-      color: "purple",
-      css: {
-        color: "$purple500",
-        "&:hover": { color: "$purple600" },
-        "&:focus": { color: "$purple700" },
-        "&:active": { color: "$purple500" },
-        "&:disabled": { color: "$dark400" }
-      }
-    },
-    {
-      variant: "text",
-      color: "green",
-      css: {
-        color: "$green500",
-        "&:hover": { color: "$green600" },
-        "&:focus": { color: "$green700" },
-        "&:active": { color: "$green500" },
-        "&:disabled": { color: "$dark400" }
-      }
-    },
-    {
-      variant: "text",
-      color: "blue",
-      css: {
-        color: "$blue500",
-        "&:hover": { color: "$blue600" },
-        "&:focus": { color: "$blue700" },
-        "&:active": { color: "$blue500" },
-        "&:disabled": { color: "$dark400" }
-      }
-    },
-    {
-      variant: "text",
-      color: "red",
-      css: {
-        color: "$red500",
-        "&:hover": { color: "$red600" },
-        "&:focus": { color: "$red700" },
-        "&:active": { color: "$red500" },
-        "&:disabled": { color: "$dark400" }
-      }
-    },
-    // contained
-    {
-      variant: "contained",
-      color: "brand",
-      css: {
-        color: "$grey50",
-        backgroundColor: "$brand500",
-        borderWidth: "2px",
-        borderStyle: "solid",
-        borderColor: "transparent",
+      purple: {
+        $$buttonColor: "$colors$purple500",
+        $$buttonBorderColor: "$colors$purple300",
+        $$buttonOutlinedColor: "$$buttonColor",
         "&:hover": {
-          borderColor: "$brand700",
-          backgroundColor: "$blue600"
+          $$buttonColor: "$colors$purple600",
+          $$buttonBorderColor: "$colors$purple700",
+          $$buttonOutlinedColor: "$colors$purple500",
+          $$buttonBgColor: "$colors$purple50"
         },
         "&:focus": {
-          backgroundColor: "$blue700"
+          $$buttonColor: "$colors$purple700",
+          $$buttonOutlinedColor: "$colors$purple500",
+          $$buttonBgColor: "$colors$purple200",
+          $$buttonBorderColor: "$colors$purple400"
         },
         "&:active": {
-          borderColor: "$brand300",
-          backgroundColor: "$blue500"
-        },
-        "&:disabled": {
-          borderColor: "$brand50",
-          backgroundColor: "$brand50",
-          color: "$neutral400"
+          $$buttonColor: "$colors$purple500",
+          $$buttonOutlinedColor: "$colors$purple500",
+          $$buttonBgColor: "$colors$purple100",
+          $$buttonBorderColor: "$colors$purple300"
         }
-      }
-    },
-    {
-      variant: "contained",
-      color: "neutral",
-      css: {
-        backgroundColor: "$neutral600",
-        color: "$grey50",
+      },
+      error: {
+        $$buttonColor: "$colors$error600",
+        $$buttonBorderColor: "$colors$error500",
+        $$buttonOutlinedColor: " $colors$error500",
         "&:hover": {
-          backgroundColor: "$neutral700",
-          borderColor: "$neutral800"
+          $$buttonColor: "$colors$error600",
+          $$buttonBorderColor: "$colors$error700",
+          $$buttonBgColor: "$colors$error50"
         },
         "&:focus": {
-          backgroundColor: "$neutral800"
+          $$buttonColor: "$colors$error400",
+          $$buttonBorderColor: "$colors$error300",
+          $$buttonBgColor: "$colors$error200"
         },
         "&:active": {
-          backgroundColor: "$neutral500",
-          borderColor: "$neutral400"
-        },
-        "&:disabled": {
-          backgroundColor: "$neutral50",
-          borderColor: "$neutral200",
-          color: "$neutral400"
+          $$buttonColor: "$colors$error700",
+          $$buttonBorderColor: "$colors$error700",
+          $$buttonBgColor: "$colors$re1050"
         }
-      }
-    },
-    {
-      variant: "contained",
-      color: "purple",
-      css: {
-        backgroundColor: "$purple500",
-        color: "$grey50",
+      },
+      info: {
+        $$buttonColor: "$colors$info500",
+        $$buttonBorderColor: "$colors$info600",
+        $$buttonOutlinedColor: "$$buttonColor",
         "&:hover": {
-          backgroundColor: "$purple600",
-          borderColor: "$purple700"
+          $$buttonColor: "$colors$info600",
+          $$buttonBorderColor: "$colors$info700",
+          $$buttonBgColor: "$colors$info50"
         },
         "&:focus": {
-          backgroundColor: "$purple700"
+          $$buttonColor: "$colors$info400",
+          $$buttonBorderColor: "$colors$info600",
+          $$buttonBgColor: "$colors$info200"
         },
         "&:active": {
-          borderColor: "$purple300",
-          backgroundColor: "$purple500"
-        },
-        "&:disabled": {
-          borderColor: "$purple200",
-          backgroundColor: "$purple200",
-          color: "$neutral400"
+          $$buttonColor: "$colors$info700",
+          $$buttonBorderColor: "$colors$info700",
+          $$buttonBgColor: "$colors$info100"
         }
-      }
-    },
-    // outlined
-    {
-      variant: "outlined",
-      color: "brand",
-      outlinedBgColor: "neutral",
-      css: {
-        color: "$brand500",
-        border: "1px solid $brand300",
-        backgroundColor: "$grey50",
+      },
+      success: {
+        $$buttonColor: "$colors$success500",
+        $$buttonBorderColor: "$colors$success600",
+        $$buttonOutlinedColor: "$$buttonColor",
         "&:hover": {
-          borderColor: "$brand400",
-          backgroundColor: "$brand50"
+          $$buttonColor: "$colors$success600",
+          $$buttonBorderColor: "$colors$success700",
+          $$buttonBgColor: "$colors$success50"
         },
         "&:focus": {
-          borderColor: "$brand400",
-          backgroundColor: "$brand50"
+          $$buttonColor: "$colors$success400",
+          $$buttonBorderColor: "$colors$success600",
+          $$buttonBgColor: "$colors$success200"
         },
-        "&:disabled": {
-          borderColor: "$brand200",
-          backgroundColor: "$neutral200"
+        "&:active": {
+          $$buttonColor: "$colors$success700",
+          $$buttonBorderColor: "$colors$success700",
+          $$buttonBgColor: "$colors$success100"
         }
-      }
-    },
-    {
-      variant: "outlined",
-      color: "neutral",
-      outlinedBgColor: "neutral",
-      css: {
-        color: "$neutral600",
-        border: "1px solid $neutral300",
-        backgroundColor: "$grey50",
+      },
+      warning: {
+        $$buttonColor: "$colors$warning500",
+        $$buttonBorderColor: "$colors$warning600",
+        $$buttonOutlinedColor: "$$buttonColor",
         "&:hover": {
-          borderColor: "$neutral400",
-          backgroundColor: "$grey100"
+          $$buttonColor: "$colors$warning600",
+          $$buttonBorderColor: "$colors$warning700",
+          $$buttonBgColor: "$colors$warning50"
         },
         "&:focus": {
-          borderColor: "$neutral400",
-          backgroundColor: "$grey100"
+          $$buttonColor: "$colors$warning400",
+          $$buttonBorderColor: "$colors$warning600",
+          $$buttonBgColor: "$colors$warning200"
         },
-        "&:disabled": {
-          borderColor: "$neutral200",
-          backgroundColor: "$neutral200"
+        "&:active": {
+          $$buttonColor: "$colors$warning700",
+          $$buttonBorderColor: "$colors$warning700",
+          $$buttonBgColor: "$colors$warning100"
         }
-      }
-    },
-    {
-      variant: "outlined",
-      color: "purple",
-      outlinedBgColor: "neutral",
-      css: {
-        color: "$purple500",
-        backgroundColor: "$grey50",
-        border: "1px solid $purple300",
+      },
+      neutral: {
+        $$buttonColor: "$colors$neutral600",
+        $$buttonBorderColor: "$colors$neutral300",
+        $$buttonOutlinedColor: "$$buttonColor",
         "&:hover": {
-          borderColor: "$purple400",
-          backgroundColor: "$purple50"
+          $$buttonColor: "$colors$neutral700",
+          $$buttonBgColor: "$colors$neutral100",
+          $$buttonBorderColor: "$colors$neutral300"
         },
         "&:focus": {
-          borderColor: "$purple400",
-          backgroundColor: "$purple50"
+          $$buttonColor: "$colors$neutral800",
+          $$buttonBgColor: "$colors$neutral300",
+          $$buttonBorderColor: "$colors$neutral400"
         },
-        "&:disabled": {
-          borderColor: "$purple200",
-          backgroundColor: "$neutral200"
+        "&:active": {
+          $$buttonColor: "$colors$neutral500",
+          $$buttonBgColor: "$colors$neutral300",
+          $$buttonBorderColor: "$colors$neutral400"
         }
-      }
-    },
-    // outlined transparent
-    {
-      variant: "outlined",
-      color: "brand",
-      outlinedBgColor: "transparent",
-      css: {
-        color: "$brand500",
-        border: "1px solid $brand300",
-        backgroundColor: "transparent",
+      },
+      white: {
+        $$buttonColor: "$colors$neutral50",
+        $$buttonBorderColor: "$colors$neutral300",
+        $$buttonOutlinedColor: "$colors$neutral50",
         "&:hover": {
-          borderColor: "$brand400",
-          opacity: "0.8"
+          $$buttonColor: "$colors$neutral100",
+          $$buttonBorderColor: "$colors$neutral300",
+          $$buttonBgColor: "$colors$neutral100"
         },
         "&:focus": {
-          borderColor: "$brand400"
+          $$buttonBorderColor: "$colors$neutral400",
+          $$buttonColor: "$colors$neutral300",
+          $$buttonBgColor: "$colors$neutral200"
         },
-        "&:disabled": {
-          borderColor: "$brand200"
+        "&:active": {
+          $$buttonColor: "$colors$neutral400",
+          $$buttonBorderColor: "$colors$neutral500",
+          $$buttonBgColor: "$colors$neutral300"
         }
       }
     },
-    {
-      variant: "outlined",
-      color: "neutral",
-      outlinedBgColor: "transparent",
-      css: {
-        color: "$neutral600",
-        border: "1px solid $neutral300",
+    variant: {
+      text: {
         backgroundColor: "transparent",
-        "&:hover": {
-          borderColor: "$neutral400",
-          opacity: "0.8"
-        },
-        "&:focus": {
-          borderColor: "$neutral400"
-        },
+        boxShadow: "none",
+        padding: 0,
+        border: 0,
+        color: "$$buttonColor"
+      },
+      contained: {
+        color: "$grey50",
+        backgroundColor: "$$buttonColor",
+        border: "1px solid $$buttonBorderColor",
         "&:disabled": {
-          borderColor: "$neutral200"
+          boxShadow: "none",
+          color: "$neutral400",
+          backgroundColor: "$neutral200",
+          $$buttonBorderColor: "$colors$neutral100"
         }
-      }
-    },
-    {
-      variant: "outlined",
-      color: "purple",
-      outlinedBgColor: "transparent",
-      css: {
-        color: "$purple500",
-        backgroundColor: "transparent",
-        border: "1px solid $purple300",
-        "&:hover": {
-          borderColor: "$purple400",
-          opacity: "0.8"
-        },
-        "&:focus": {
-          borderColor: "$purple400"
-        },
+      },
+      outlined: {
+        color: "$$buttonOutlinedColor",
+        border: "1px solid $$buttonOutlinedColor",
+        backgroundColor: "$$buttonBgColor",
         "&:disabled": {
-          borderColor: "$purple200"
+          boxShadow: "none",
+          borderColor: "$colors$neutral100",
+          $$buttonColor: "$colors$neutral300"
         }
       }
+    },
+    typography: typographyButtonValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" }
+    },
+    outlinedBgColor: {
+      neutral: {},
+      transparent: {
+        backgroundColor: "transparent"
+      }
+    },
+    radii: {
+      "full": {
+        borderRadius: "$full"
+      }
     }
-  ]
+  },
+  defaultVariants: {
+    variant: "contained",
+    typography: "buttonMedium",
+    color: "brand"
+  }
 });
 
 // src/components/Button/index.tsx
@@ -2476,26 +2371,139 @@ function Avatar(_a) {
 
 // src/components/TextField.tsx
 import { TextField as TextFieldRadix } from "@radix-ui/themes";
-import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+
+// 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 { jsx as jsx7, jsxs } from "react/jsx-runtime";
 var TextFieldStyled = styled(TextFieldRadix.Root, {
   height: "$40",
   fontFamily: "$default",
-  padding: "$12 $14",
+  padding: "0",
   borderRadius: "$sm",
   boxSizing: "border-box",
   color: "$dark500",
   border: "1px solid $dark300",
   position: "relative",
   display: "flex",
+  width: "100%",
+  alignItems: "center",
   "input": {
     order: 1,
-    border: "none",
     outline: "none",
-    padding: 0,
+    border: "none",
     margin: 0,
     width: "100%",
     font: "inherit",
-    textAlign: "inherit"
+    textAlign: "left",
+    padding: "0 $14"
   },
   "&:has(input:focus)": {
     border: "2px solid $brand300"
@@ -2617,6 +2625,18 @@ var TextFieldSlotStyled = styled(TextFieldRadix.Slot, {
     }
   }
 });
+var InputAddon = styled(TextStyle, {
+  boxSizing: "border-box",
+  border: "1px solid $dark300",
+  height: "$40",
+  padding: "0",
+  color: "$dark600",
+  borderRadius: "$sm 0px 0px $sm",
+  borderRightWidth: "0px",
+  margin: "auto 0",
+  display: "flex",
+  alignItems: "center"
+});
 function TextField(_a) {
   var _b = _a, {
     children,
@@ -2625,6 +2645,7 @@ function TextField(_a) {
     color,
     typography,
     fontWeight,
+    addon,
     textAlign = "right"
   } = _b, props = __objRest(_b, [
     "children",
@@ -2633,35 +2654,40 @@ function TextField(_a) {
     "color",
     "typography",
     "fontWeight",
+    "addon",
     "textAlign"
   ]);
-  return /* @__PURE__ */ jsxs(
-    TextFieldStyled,
-    __spreadProps(__spreadValues({
-      color,
-      isValid: isValid2,
-      name,
-      typography,
-      fontWeight,
-      textAlign
-    }, props), {
-      children: [
-        children,
-        isValid2 && /* @__PURE__ */ jsx6(
-          TextFieldSlot,
-          {
-            position: "flex-end",
-            name,
-            color,
-            typography,
-            fontWeight,
-            textAlign,
-            children: /* @__PURE__ */ jsx6(Icon_default, { name: "check" })
-          }
-        )
-      ]
-    })
-  );
+  return /* @__PURE__ */ jsxs(Flex2, { gap: "0", css: { width: "100%" }, children: [
+    !!addon && /* @__PURE__ */ jsx7(InputAddon, { typography: "labelSmall", children: addon }),
+    /* @__PURE__ */ jsxs(
+      TextFieldStyled,
+      __spreadProps(__spreadValues({
+        color,
+        isValid: isValid2,
+        name,
+        typography,
+        fontWeight,
+        textAlign,
+        style: !!addon ? { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" } : void 0
+      }, props), {
+        children: [
+          children,
+          isValid2 && /* @__PURE__ */ jsx7(
+            TextFieldSlot,
+            {
+              position: "flex-end",
+              name,
+              color,
+              typography,
+              fontWeight,
+              textAlign,
+              children: /* @__PURE__ */ jsx7(Icon_default, { name: "check" })
+            }
+          )
+        ]
+      })
+    )
+  ] });
 }
 function TextFieldSlot(_a) {
   var _b = _a, {
@@ -2686,7 +2712,7 @@ function TextFieldSlot(_a) {
   }, props), {
     color: void 0
   });
-  return !!onClick ? /* @__PURE__ */ jsx6(
+  return !!onClick ? /* @__PURE__ */ jsx7(
     TextFieldSlotStyled,
     __spreadProps(__spreadValues({}, sharedStyles), {
       style: {
@@ -2702,7 +2728,7 @@ function TextFieldSlot(_a) {
       onClick: () => onClick(),
       children
     })
-  ) : /* @__PURE__ */ jsx6(
+  ) : /* @__PURE__ */ jsx7(
     TextFieldSlotStyled,
     __spreadProps(__spreadValues({}, sharedStyles), {
       style: {
@@ -2719,7 +2745,7 @@ function TextFieldSlot(_a) {
 
 // src/components/RadioGroup.tsx
 import { RadioGroup as RadioGroupRadix } from "@radix-ui/themes";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var RadioGroupStyled = styled(RadioGroupRadix.Root, {
   fontFamily: "$default",
   "label": {
@@ -2889,7 +2915,7 @@ function RadioGroup(_a) {
     "children",
     "disabled"
   ]);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     RadioGroupStyled,
     __spreadProps(__spreadValues({
       disabled
@@ -2904,12 +2930,12 @@ function RadioItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx7(RadioGroupRadix.Item, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx8(RadioGroupRadix.Item, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/CheckboxGroup.tsx
 import { CheckboxGroup as CheckboxGroupRadix } from "@radix-ui/themes";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
   fontFamily: "$default",
   "svg": {
@@ -3079,7 +3105,7 @@ function CheckboxGroup(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx8(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx9(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 function CheckboxItem(_a) {
   var _b = _a, {
@@ -3087,12 +3113,12 @@ function CheckboxItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx8(CheckboxGroupRadix.Item, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx9(CheckboxGroupRadix.Item, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Filter.tsx
 import { Theme, DropdownMenu } from "@radix-ui/themes";
-import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
 var FilterContentStyled = styled(DropdownMenu.Content, {
   background: "white",
   padding: "$8 $12",
@@ -3202,13 +3228,13 @@ function Filter(_a) {
     "typography",
     "fontWeight"
   ]);
-  return /* @__PURE__ */ jsx9(Theme, { children: /* @__PURE__ */ jsx9(DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs2(FilterStyled, { typography, fontWeight, children: [
-    /* @__PURE__ */ jsx9(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs2("button", { "aria-label": placeholder || "Fitrar", children: [
-      /* @__PURE__ */ jsx9(Icon, { name: "filter" }),
-      /* @__PURE__ */ jsx9("span", { children: placeholder || "Fitrar" }),
-      /* @__PURE__ */ jsx9(DropdownMenu.TriggerIcon, {})
+  return /* @__PURE__ */ jsx10(Theme, { children: /* @__PURE__ */ jsx10(DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs2(FilterStyled, { typography, fontWeight, children: [
+    /* @__PURE__ */ jsx10(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsxs2("button", { "aria-label": placeholder || "Fitrar", children: [
+      /* @__PURE__ */ jsx10(Icon, { name: "filter" }),
+      /* @__PURE__ */ jsx10("span", { children: placeholder || "Fitrar" }),
+      /* @__PURE__ */ jsx10(DropdownMenu.TriggerIcon, {})
     ] }) }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       FilterContentStyled,
       {
         avoidCollisions: false,
@@ -3216,7 +3242,7 @@ function Filter(_a) {
         alignOffset: -14,
         typography,
         fontWeight,
-        children: /* @__PURE__ */ jsx9(CheckboxGroup, { children })
+        children: /* @__PURE__ */ jsx10(CheckboxGroup, { children })
       }
     )
   ] }) })) });
@@ -3227,12 +3253,12 @@ function FilterItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ jsx9(CheckboxItem, __spreadProps(__spreadValues({}, props), { style: { padding: "8px 12px" }, children }));
+  return /* @__PURE__ */ jsx10(CheckboxItem, __spreadProps(__spreadValues({}, props), { style: { padding: "8px 12px" }, children }));
 }
 
 // src/components/Dropdown.tsx
 import { Theme as Theme2, DropdownMenu as DropdownMenuRadix } from "@radix-ui/themes";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
   fontFamily: "$default",
   color: "$dark600",
@@ -3337,18 +3363,18 @@ function DropdownMenu2(_a) {
     "typography",
     "fontWeight"
   ]);
-  return /* @__PURE__ */ jsx10(Theme2, { children: /* @__PURE__ */ jsx10(DropdownMenuRadix.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs3(DropdownMenuStyled, { typography, fontWeight, children: [
-    /* @__PURE__ */ jsx10(DropdownMenuRadix.Trigger, { children: /* @__PURE__ */ jsxs3("button", { "aria-label": placeholder || "Filtrar", children: [
-      /* @__PURE__ */ jsx10("span", { children: placeholder || "Filtrar" }),
-      /* @__PURE__ */ jsx10(DropdownMenuRadix.TriggerIcon, {})
+  return /* @__PURE__ */ jsx11(Theme2, { children: /* @__PURE__ */ jsx11(DropdownMenuRadix.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs3(DropdownMenuStyled, { typography, fontWeight, children: [
+    /* @__PURE__ */ jsx11(DropdownMenuRadix.Trigger, { children: /* @__PURE__ */ jsxs3("button", { "aria-label": placeholder || "Filtrar", children: [
+      /* @__PURE__ */ jsx11("span", { children: placeholder || "Filtrar" }),
+      /* @__PURE__ */ jsx11(DropdownMenuRadix.TriggerIcon, {})
     ] }) }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       DropdownMenuContentStyled,
       {
         avoidCollisions: false,
         align: "start",
         alignOffset: -14,
-        children: /* @__PURE__ */ jsx10(DropdownMenuRadix.Group, { children })
+        children: /* @__PURE__ */ jsx11(DropdownMenuRadix.Group, { children })
       }
     )
   ] }) })) });
@@ -3363,7 +3389,7 @@ function DropdownMenuItem(_a) {
     "typography",
     "fontWeight"
   ]);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuItemStyled,
     __spreadProps(__spreadValues({
       typography,
@@ -3377,7 +3403,7 @@ function DropdownMenuItem(_a) {
 // src/components/Badge.tsx
 import React from "react";
 import { Badge as BadgeRadix } from "@radix-ui/themes";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var BadgeStyled = styled(BadgeRadix, {
   fontFamily: "$default",
   borderRadius: "$sm",
@@ -3482,7 +3508,7 @@ var BadgeStyled = styled(BadgeRadix, {
 });
 function Badge(_a) {
   var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
-  return /* @__PURE__ */ jsx11(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: React.Children.map(children, (child) => {
+  return /* @__PURE__ */ jsx12(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       return React.cloneElement(child, { size: props.size });
     }
@@ -3497,114 +3523,6 @@ import { Dialog as ModalRadix } from "@radix-ui/themes";
 import { Box as BoxRadix } from "@radix-ui/themes";
 var Box = BoxRadix;
 
-// src/components/Flex.tsx
-import { Flex as FlexRadix } from "@radix-ui/themes";
-import { jsx as jsx12 } 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: {
-      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__ */ jsx12(FlexStyled, __spreadProps(__spreadValues({}, props), { children }));
-}
-
 // src/components/Modal.tsx
 import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var ModalStyled = styled("div", {
@@ -7574,6 +7492,9 @@ var CalendarStyled = styled("div", {
   maxWidth: "200px",
   borderRadius: "$sm"
 });
+var CalendarTitleStyled = styled(Calendaradix.Title, {
+  display: "none"
+});
 var CalendarContentStyled = styled(Calendaradix.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -7813,6 +7734,7 @@ function Calendar(_a) {
       }
     ) }),
     /* @__PURE__ */ jsxs5(CalendarContentStyled, { children: [
+      /* @__PURE__ */ jsx14(CalendarTitleStyled, { children: "Calend\xE1rio" }),
       /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx14(
         DayPicker,
         {
@@ -7853,6 +7775,9 @@ var TimePickerStyled = styled("div", {
   maxWidth: "200px",
   borderRadius: "$sm"
 });
+var TimePickerTitleStyled = styled(TimePickerRadix.Title, {
+  display: "none"
+});
 var TimePickerDialogStyled = styled(TimePickerRadix.Content, {
   width: "100%",
   maxWidth: "8.875rem",
@@ -7881,42 +7806,144 @@ function TimePicker({ selected, setSelected }) {
   const [hours, setHours] = useState2("00");
   const [minutes, setMinutes] = useState2("00");
   const pad = (num) => String(num).padStart(2, "0");
-  const handleInputValue = useCallback((time) => {
-    setSelected(time);
-  }, [setSelected]);
-  const handleIncrement = useCallback((type) => {
-    if (type === "hours") {
-      const next = (parseInt(hours) + 1) % 24;
-      setHours(pad(next));
-    } else {
-      const next = (parseInt(minutes) + 1) % 60;
-      setMinutes(pad(next));
-    }
-  }, [hours, minutes]);
-  const handleDecrement = useCallback((type) => {
-    if (type === "hours") {
-      const prev = (parseInt(hours) - 1 + 24) % 24;
-      setHours(pad(prev));
-    } else {
-      const prev = (parseInt(minutes) - 1 + 60) % 60;
-      setMinutes(pad(prev));
-    }
-  }, [hours, minutes]);
+  const handleInputValue = useCallback(
+    (time) => {
+      setSelected(time);
+    },
+    [setSelected]
+  );
+  const handleIncrement = useCallback(
+    (type) => {
+      if (type === "hours") {
+        const next = (parseInt(hours) + 1) % 24;
+        setHours(pad(next));
+      } else {
+        const next = (parseInt(minutes) + 1) % 60;
+        setMinutes(pad(next));
+      }
+    },
+    [hours, minutes]
+  );
+  const handleDecrement = useCallback(
+    (type) => {
+      if (type === "hours") {
+        const prev = (parseInt(hours) - 1 + 24) % 24;
+        setHours(pad(prev));
+      } else {
+        const prev = (parseInt(minutes) - 1 + 60) % 60;
+        setMinutes(pad(prev));
+      }
+    },
+    [hours, minutes]
+  );
   return /* @__PURE__ */ jsx15(TimePickerRadix.Root, { children: /* @__PURE__ */ jsxs6(TimePickerStyled, { children: [
-    /* @__PURE__ */ jsx15(TimePickerRadix.Trigger, { children: /* @__PURE__ */ jsx15(TextField, { value: selected, readOnly: true, type: "text", placeholder: "00:00", typography: "labelSmall", fontWeight: "regular", children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "clock", size: "xl" }) }) }) }),
+    /* @__PURE__ */ jsx15(TimePickerRadix.Trigger, { children: /* @__PURE__ */ jsx15(
+      TextField,
+      {
+        value: selected,
+        readOnly: true,
+        type: "text",
+        placeholder: "00:00",
+        typography: "labelSmall",
+        fontWeight: "regular",
+        children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "clock", size: "xl" }) })
+      }
+    ) }),
     /* @__PURE__ */ jsxs6(TimePickerDialogStyled, { children: [
+      /* @__PURE__ */ jsx15(TimePickerTitleStyled, { children: "Hor\xE1rio" }),
       /* @__PURE__ */ jsxs6(TimerPickerContentStyled, { children: [
-        ["hours", "minutes"].map((unit) => /* @__PURE__ */ jsxs6(Box, { style: { display: "flex", alignItems: "center", flexDirection: "column" }, children: [
-          /* @__PURE__ */ jsx15(Button, { variant: "text", onClick: () => handleIncrement(unit), children: /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", children: [
-            /* @__PURE__ */ jsx15("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z", fill: "white" }),
-            /* @__PURE__ */ jsx15("path", { d: "M16.7063 12.2937C16.3157 11.9031 15.6813 11.9031 15.2907 12.2937L10.2907 17.2937C9.9001 17.6843 9.9001 18.3187 10.2907 18.7093C10.6813 19.1 11.3157 19.1 11.7063 18.7093L16.0001 14.4156L20.2938 18.7062C20.6845 19.0968 21.3188 19.0968 21.7095 18.7062C22.1001 18.3156 22.1001 17.6812 21.7095 17.2906L16.7095 12.2906L16.7063 12.2937Z", fill: "#808289" })
-          ] }) }),
-          /* @__PURE__ */ jsx15(TextField, { value: unit === "hours" ? hours : minutes, onChange: (e) => handleInputValue(e.target.value), type: "text", placeholder: "00", typography: "labelSmall", fontWeight: "regular", textAlign: "center", style: { padding: "4px" } }),
-          /* @__PURE__ */ jsx15(Button, { variant: "text", onClick: () => handleDecrement(unit), children: /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", children: [
-            /* @__PURE__ */ jsx15("path", { d: "M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z", fill: "white" }),
-            /* @__PURE__ */ jsx15("path", { d: "M15.2937 19.7063C15.6843 20.0969 16.3187 20.0969 16.7093 19.7063L21.7093 14.7063C22.0999 14.3157 22.0999 13.6813 21.7093 13.2907C21.3187 12.9 20.6843 12.9 20.2937 13.2907L15.9999 17.5844L11.7062 13.2938C11.3155 12.9032 10.6812 12.9032 10.2905 13.2938C9.8999 13.6844 9.8999 14.3188 10.2905 14.7094L15.2905 19.7094L15.2937 19.7063Z", fill: "#808289" })
-          ] }) })
-        ] }, unit)),
+        ["hours", "minutes"].map((unit) => /* @__PURE__ */ jsxs6(
+          Box,
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              flexDirection: "column"
+            },
+            children: [
+              /* @__PURE__ */ jsx15(
+                Button,
+                {
+                  variant: "text",
+                  onClick: () => handleIncrement(unit),
+                  children: /* @__PURE__ */ jsxs6(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "32",
+                      height: "32",
+                      viewBox: "0 0 32 32",
+                      fill: "none",
+                      children: [
+                        /* @__PURE__ */ jsx15(
+                          "path",
+                          {
+                            d: "M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z",
+                            fill: "white"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx15(
+                          "path",
+                          {
+                            d: "M16.7063 12.2937C16.3157 11.9031 15.6813 11.9031 15.2907 12.2937L10.2907 17.2937C9.9001 17.6843 9.9001 18.3187 10.2907 18.7093C10.6813 19.1 11.3157 19.1 11.7063 18.7093L16.0001 14.4156L20.2938 18.7062C20.6845 19.0968 21.3188 19.0968 21.7095 18.7062C22.1001 18.3156 22.1001 17.6812 21.7095 17.2906L16.7095 12.2906L16.7063 12.2937Z",
+                            fill: "#808289"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                TextField,
+                {
+                  value: unit === "hours" ? hours : minutes,
+                  onChange: (e) => handleInputValue(e.target.value),
+                  type: "text",
+                  placeholder: "00",
+                  typography: "labelSmall",
+                  fontWeight: "regular",
+                  textAlign: "center",
+                  style: { padding: "4px" }
+                }
+              ),
+              /* @__PURE__ */ jsx15(
+                Button,
+                {
+                  variant: "text",
+                  onClick: () => handleDecrement(unit),
+                  children: /* @__PURE__ */ jsxs6(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "32",
+                      height: "32",
+                      viewBox: "0 0 32 32",
+                      fill: "none",
+                      children: [
+                        /* @__PURE__ */ jsx15(
+                          "path",
+                          {
+                            d: "M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z",
+                            fill: "white"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx15(
+                          "path",
+                          {
+                            d: "M15.2937 19.7063C15.6843 20.0969 16.3187 20.0969 16.7093 19.7063L21.7093 14.7063C22.0999 14.3157 22.0999 13.6813 21.7093 13.2907C21.3187 12.9 20.6843 12.9 20.2937 13.2907L15.9999 17.5844L11.7062 13.2938C11.3155 12.9032 10.6812 12.9032 10.2905 13.2938C9.8999 13.6844 9.8999 14.3188 10.2905 14.7094L15.2905 19.7094L15.2937 19.7063Z",
+                            fill: "#808289"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          unit
+        )),
         /* @__PURE__ */ jsx15(Text, { children: ":" })
       ] }),
       /* @__PURE__ */ jsx15(TimePickerFooterStyled, { children: /* @__PURE__ */ jsx15(TimePickerRadix.Close, { children: /* @__PURE__ */ jsx15(
@@ -8549,6 +8576,7 @@ export {
   TimePickerDialogStyled,
   TimePickerFooterStyled,
   TimePickerStyled,
+  TimePickerTitleStyled,
   TimerPickerContentStyled
 };
 /*! Bundled license information: