@lets-events/react 6.1.0 → 7.0.0

package/dist/index.js

@@ -1071,6 +1071,7 @@ __export(index_exports, {
   TimePickerDialogStyled: () => TimePickerDialogStyled,
   TimePickerFooterStyled: () => TimePickerFooterStyled,
   TimePickerStyled: () => TimePickerStyled,
+  TimePickerTitleStyled: () => TimePickerTitleStyled,
   TimerPickerContentStyled: () => TimerPickerContentStyled
 });
 module.exports = __toCommonJS(index_exports);
@@ -1667,6 +1668,10 @@ function Text(_a) {
 // src/components/Button/styledComponents.ts
 var import_themes2 = require("@radix-ui/themes");
 var ButtonStyled = styled(import_themes2.Button, {
+  $$buttonColor: "inherit",
+  $$buttonBgColor: "$colors$grey50",
+  $$buttonBorderColor: "inherit",
+  $$buttonOutlinedColor: "inherit",
   fontFamily: "$default",
   letterSpacing: 0,
   border: 0,
@@ -1685,332 +1690,223 @@ var ButtonStyled = styled(import_themes2.Button, {
   },
   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
@@ -2548,27 +2444,140 @@ function Avatar(_a) {
 }
 
 // src/components/TextField.tsx
+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 TextFieldStyled = styled(import_themes6.TextField.Root, {
+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_jsx_runtime7 = require("react/jsx-runtime");
+var TextFieldStyled = styled(import_themes7.TextField.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"
@@ -2671,7 +2680,7 @@ var TextFieldStyled = styled(import_themes6.TextField.Root, {
     }
   ]
 });
-var TextFieldSlotStyled = styled(import_themes6.TextField.Slot, {
+var TextFieldSlotStyled = styled(import_themes7.TextField.Slot, {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
@@ -2690,6 +2699,18 @@ var TextFieldSlotStyled = styled(import_themes6.TextField.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,
@@ -2698,6 +2719,7 @@ function TextField(_a) {
     color,
     typography,
     fontWeight,
+    addon,
     textAlign = "right"
   } = _b, props = __objRest(_b, [
     "children",
@@ -2706,35 +2728,40 @@ function TextField(_a) {
     "color",
     "typography",
     "fontWeight",
+    "addon",
     "textAlign"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    TextFieldStyled,
-    __spreadProps(__spreadValues({
-      color,
-      isValid: isValid2,
-      name,
-      typography,
-      fontWeight,
-      textAlign
-    }, props), {
-      children: [
-        children,
-        isValid2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          TextFieldSlot,
-          {
-            position: "flex-end",
-            name,
-            color,
-            typography,
-            fontWeight,
-            textAlign,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon_default, { name: "check" })
-          }
-        )
-      ]
-    })
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex2, { gap: "0", css: { width: "100%" }, children: [
+    !!addon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputAddon, { typography: "labelSmall", children: addon }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      TextFieldStyled,
+      __spreadProps(__spreadValues({
+        color,
+        isValid: isValid2,
+        name,
+        typography,
+        fontWeight,
+        textAlign,
+        style: !!addon ? { borderTopLeftRadius: "0px", borderBottomLeftRadius: "0px" } : void 0
+      }, props), {
+        children: [
+          children,
+          isValid2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            TextFieldSlot,
+            {
+              position: "flex-end",
+              name,
+              color,
+              typography,
+              fontWeight,
+              textAlign,
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon_default, { name: "check" })
+            }
+          )
+        ]
+      })
+    )
+  ] });
 }
 function TextFieldSlot(_a) {
   var _b = _a, {
@@ -2759,7 +2786,7 @@ function TextFieldSlot(_a) {
   }, props), {
     color: void 0
   });
-  return !!onClick ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return !!onClick ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     TextFieldSlotStyled,
     __spreadProps(__spreadValues({}, sharedStyles), {
       style: {
@@ -2775,7 +2802,7 @@ function TextFieldSlot(_a) {
       onClick: () => onClick(),
       children
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     TextFieldSlotStyled,
     __spreadProps(__spreadValues({}, sharedStyles), {
       style: {
@@ -2791,9 +2818,9 @@ function TextFieldSlot(_a) {
 }
 
 // src/components/RadioGroup.tsx
-var import_themes7 = require("@radix-ui/themes");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var RadioGroupStyled = styled(import_themes7.RadioGroup.Root, {
+var import_themes8 = require("@radix-ui/themes");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var RadioGroupStyled = styled(import_themes8.RadioGroup.Root, {
   fontFamily: "$default",
   "label": {
     display: "flex",
@@ -2962,7 +2989,7 @@ function RadioGroup(_a) {
     "children",
     "disabled"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     RadioGroupStyled,
     __spreadProps(__spreadValues({
       disabled
@@ -2977,13 +3004,13 @@ function RadioItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes7.RadioGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.RadioGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/CheckboxGroup.tsx
-var import_themes8 = require("@radix-ui/themes");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var CheckboxGroupStyled = styled(import_themes8.CheckboxGroup.Root, {
+var import_themes9 = require("@radix-ui/themes");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
   fontFamily: "$default",
   "svg": {
     display: "none"
@@ -3152,7 +3179,7 @@ function CheckboxGroup(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 function CheckboxItem(_a) {
   var _b = _a, {
@@ -3160,13 +3187,13 @@ function CheckboxItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes8.CheckboxGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.CheckboxGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Filter.tsx
-var import_themes9 = require("@radix-ui/themes");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var FilterContentStyled = styled(import_themes9.DropdownMenu.Content, {
+var import_themes10 = require("@radix-ui/themes");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var FilterContentStyled = styled(import_themes10.DropdownMenu.Content, {
   background: "white",
   padding: "$8 $12",
   border: "1px solid $dark300",
@@ -3275,13 +3302,13 @@ function Filter(_a) {
     "typography",
     "fontWeight"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FilterStyled, { typography, fontWeight, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { "aria-label": placeholder || "Fitrar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "filter" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: placeholder || "Fitrar" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.DropdownMenu.TriggerIcon, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes10.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes10.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(FilterStyled, { typography, fontWeight, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes10.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { "aria-label": placeholder || "Fitrar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "filter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: placeholder || "Fitrar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes10.DropdownMenu.TriggerIcon, {})
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       FilterContentStyled,
       {
         avoidCollisions: false,
@@ -3289,7 +3316,7 @@ function Filter(_a) {
         alignOffset: -14,
         typography,
         fontWeight,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxGroup, { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroup, { children })
       }
     )
   ] }) })) });
@@ -3300,13 +3327,13 @@ function FilterItem(_a) {
   } = _b, props = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxItem, __spreadProps(__spreadValues({}, props), { style: { padding: "8px 12px" }, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxItem, __spreadProps(__spreadValues({}, props), { style: { padding: "8px 12px" }, children }));
 }
 
 // src/components/Dropdown.tsx
-var import_themes10 = require("@radix-ui/themes");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var DropdownMenuItemStyled = styled(import_themes10.DropdownMenu.Item, {
+var import_themes11 = require("@radix-ui/themes");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DropdownMenuItemStyled = styled(import_themes11.DropdownMenu.Item, {
   fontFamily: "$default",
   color: "$dark600",
   letterSpacing: "0px",
@@ -3388,7 +3415,7 @@ var DropdownMenuStyled = styled("div", {
     }
   }
 });
-var DropdownMenuContentStyled = styled(import_themes10.DropdownMenu.Content, {
+var DropdownMenuContentStyled = styled(import_themes11.DropdownMenu.Content, {
   background: "white",
   padding: "$8 $12",
   border: "1px solid $dark300",
@@ -3410,18 +3437,18 @@ function DropdownMenu2(_a) {
     "typography",
     "fontWeight"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes10.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes10.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenuStyled, { typography, fontWeight, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes10.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { "aria-label": placeholder || "Filtrar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: placeholder || "Filtrar" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes10.DropdownMenu.TriggerIcon, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.DropdownMenu.Root, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropdownMenuStyled, { typography, fontWeight, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.DropdownMenu.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { "aria-label": placeholder || "Filtrar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: placeholder || "Filtrar" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.DropdownMenu.TriggerIcon, {})
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       DropdownMenuContentStyled,
       {
         avoidCollisions: false,
         align: "start",
         alignOffset: -14,
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes10.DropdownMenu.Group, { children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes11.DropdownMenu.Group, { children })
       }
     )
   ] }) })) });
@@ -3436,7 +3463,7 @@ function DropdownMenuItem(_a) {
     "typography",
     "fontWeight"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     DropdownMenuItemStyled,
     __spreadProps(__spreadValues({
       typography,
@@ -3449,9 +3476,9 @@ function DropdownMenuItem(_a) {
 
 // src/components/Badge.tsx
 var import_react2 = __toESM(require("react"));
-var import_themes11 = require("@radix-ui/themes");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var BadgeStyled = styled(import_themes11.Badge, {
+var import_themes12 = require("@radix-ui/themes");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var BadgeStyled = styled(import_themes12.Badge, {
   fontFamily: "$default",
   borderRadius: "$sm",
   verticalAlign: "middle",
@@ -3555,7 +3582,7 @@ var BadgeStyled = styled(import_themes11.Badge, {
 });
 function Badge(_a) {
   var _b = _a, { asChild, children } = _b, props = __objRest(_b, ["asChild", "children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: import_react2.default.Children.map(children, (child) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BadgeStyled, __spreadProps(__spreadValues({}, props), { children: import_react2.default.Children.map(children, (child) => {
     if (import_react2.default.isValidElement(child)) {
       return import_react2.default.cloneElement(child, { size: props.size });
     }
@@ -3567,116 +3594,8 @@ function Badge(_a) {
 var import_themes14 = require("@radix-ui/themes");
 
 // src/components/Box.tsx
-var import_themes12 = require("@radix-ui/themes");
-var Box = import_themes12.Box;
-
-// src/components/Flex.tsx
 var import_themes13 = require("@radix-ui/themes");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var FlexStyled = styled(import_themes13.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: {
-      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_runtime12.jsx)(FlexStyled, __spreadProps(__spreadValues({}, props), { children }));
-}
+var Box = import_themes13.Box;
 
 // src/components/Modal.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -7647,6 +7566,9 @@ var CalendarStyled = styled("div", {
   maxWidth: "200px",
   borderRadius: "$sm"
 });
+var CalendarTitleStyled = styled(import_themes15.Dialog.Title, {
+  display: "none"
+});
 var CalendarContentStyled = styled(import_themes15.Dialog.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -7886,6 +7808,7 @@ function Calendar(_a) {
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CalendarContentStyled, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CalendarTitleStyled, { children: "Calend\xE1rio" }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DayPickerWrapperStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         import_react_day_picker.DayPicker,
         {
@@ -7926,6 +7849,9 @@ var TimePickerStyled = styled("div", {
   maxWidth: "200px",
   borderRadius: "$sm"
 });
+var TimePickerTitleStyled = styled(import_themes17.Dialog.Title, {
+  display: "none"
+});
 var TimePickerDialogStyled = styled(import_themes17.Dialog.Content, {
   width: "100%",
   maxWidth: "8.875rem",
@@ -7954,42 +7880,144 @@ function TimePicker({ selected, setSelected }) {
   const [hours, setHours] = (0, import_react4.useState)("00");
   const [minutes, setMinutes] = (0, import_react4.useState)("00");
   const pad = (num) => String(num).padStart(2, "0");
-  const handleInputValue = (0, import_react4.useCallback)((time) => {
-    setSelected(time);
-  }, [setSelected]);
-  const handleIncrement = (0, import_react4.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 = (0, import_react4.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 = (0, import_react4.useCallback)(
+    (time) => {
+      setSelected(time);
+    },
+    [setSelected]
+  );
+  const handleIncrement = (0, import_react4.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 = (0, import_react4.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__ */ (0, import_jsx_runtime15.jsx)(import_themes17.Dialog.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TimePickerStyled, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes17.Dialog.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextField, { value: selected, readOnly: true, type: "text", placeholder: "00:00", typography: "labelSmall", fontWeight: "regular", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "clock", size: "xl" }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes17.Dialog.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      TextField,
+      {
+        value: selected,
+        readOnly: true,
+        type: "text",
+        placeholder: "00:00",
+        typography: "labelSmall",
+        fontWeight: "regular",
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "clock", size: "xl" }) })
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TimePickerDialogStyled, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TimePickerTitleStyled, { children: "Hor\xE1rio" }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TimerPickerContentStyled, { children: [
-        ["hours", "minutes"].map((unit) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Box, { style: { display: "flex", alignItems: "center", flexDirection: "column" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "text", onClick: () => handleIncrement(unit), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)(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__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "text", onClick: () => handleDecrement(unit), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)(
+          Box,
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              flexDirection: "column"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                Button,
+                {
+                  variant: "text",
+                  onClick: () => handleIncrement(unit),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "32",
+                      height: "32",
+                      viewBox: "0 0 32 32",
+                      fill: "none",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                          "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__ */ (0, import_jsx_runtime15.jsx)(
+                          "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__ */ (0, import_jsx_runtime15.jsx)(
+                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__ */ (0, import_jsx_runtime15.jsx)(
+                Button,
+                {
+                  variant: "text",
+                  onClick: () => handleDecrement(unit),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "32",
+                      height: "32",
+                      viewBox: "0 0 32 32",
+                      fill: "none",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                          "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__ */ (0, import_jsx_runtime15.jsx)(
+                          "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__ */ (0, import_jsx_runtime15.jsx)(Text, { children: ":" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TimePickerFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes17.Dialog.Close, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -8623,6 +8651,7 @@ function Section(_a) {
   TimePickerDialogStyled,
   TimePickerFooterStyled,
   TimePickerStyled,
+  TimePickerTitleStyled,
   TimerPickerContentStyled
 });
 /*! Bundled license information: