@ctlyst.id/internal-ui 3.3.7 → 3.3.9

package/dist/index.mjs

@@ -1218,14 +1218,7 @@ var DataTable = React5.forwardRef((props, ref) => {
 var data_table_default = DataTable;
 
 // src/components/datepicker/components/datepicker.tsx
-import {
-  FormControl as FormControl3,
-  FormErrorMessage as FormErrorMessage3,
-  FormHelperText as FormHelperText3,
-  IconButton as IconButton4,
-  InputGroup as InputGroup4,
-  InputRightElement as InputRightElement3
-} from "@chakra-ui/react";
+import { FormControl as FormControl3, FormErrorMessage as FormErrorMessage3, FormHelperText as FormHelperText3, IconButton as IconButton4 } from "@chakra-ui/react";
 import { cx as cx8 } from "@chakra-ui/shared-utils";
 import { Calendar, Close as Close3 } from "@ctlyst.id/internal-icon";
 import ReactDatePicker from "react-datepicker";
@@ -2162,7 +2155,33 @@ var Datepicker = ({
         id,
         name,
         selected,
-        customInput: /* @__PURE__ */ jsx27(input_field_default, { label, isRequired, autoComplete: "off", isError }),
+        customInput: /* @__PURE__ */ jsx27(
+          input_field_default,
+          {
+            label,
+            isRequired,
+            autoComplete: "off",
+            isError,
+            addOnRight: /* @__PURE__ */ jsxs10(InputRightElement, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
+              /* @__PURE__ */ jsx27(Calendar, { size: 4, color: "neutral.400" }),
+              value && /* @__PURE__ */ jsx27(
+                IconButton4,
+                {
+                  "data-test-id": "H0rseVCzGIaqoLho-EPbu",
+                  display: "flex",
+                  alignItems: "center",
+                  variant: "unstyled",
+                  "aria-label": "Remove",
+                  onClick: onClear,
+                  cursor: "pointer",
+                  size: "sm",
+                  minW: "unset",
+                  icon: /* @__PURE__ */ jsx27(Close3, { size: 4, color: "neutral.600" })
+                }
+              )
+            ] })
+          }
+        ),
         showPopperArrow: false,
         calendarClassName: cx8({ inline: props.inline }),
         dropdownMode: "select",
@@ -2180,27 +2199,7 @@ var Datepicker = ({
     return component;
   }
   return /* @__PURE__ */ jsxs10(FormControl3, { "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
-    /* @__PURE__ */ jsxs10(InputGroup4, { children: [
-      component,
-      /* @__PURE__ */ jsxs10(InputRightElement3, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
-        /* @__PURE__ */ jsx27(Calendar, { size: 4, color: "neutral.400" }),
-        value && /* @__PURE__ */ jsx27(
-          IconButton4,
-          {
-            "data-test-id": "H0rseVCzGIaqoLho-EPbu",
-            display: "flex",
-            alignItems: "center",
-            variant: "unstyled",
-            "aria-label": "Remove",
-            onClick: onClear,
-            cursor: "pointer",
-            size: "sm",
-            minW: "unset",
-            icon: /* @__PURE__ */ jsx27(Close3, { size: 4, color: "neutral.600" })
-          }
-        )
-      ] })
-    ] }),
+    component,
     !isError ? /* @__PURE__ */ jsx27(FormHelperText3, { fontSize: "text.xs", mt: 1, children: helperText }) : /* @__PURE__ */ jsx27(FormErrorMessage3, { fontSize: "text.xs", mt: 1, children: error })
   ] });
 };
@@ -4642,7 +4641,7 @@ import {
 import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text17, TextProps } from "@chakra-ui/react";
 
 // src/components/time-input/components/index.tsx
-import { Box as Box29, Flex as Flex17, forwardRef as forwardRef12, Input as Input3, InputGroup as InputGroup5 } from "@chakra-ui/react";
+import { Box as Box29, Flex as Flex17, forwardRef as forwardRef12, Input as Input3, InputGroup as InputGroup4 } from "@chakra-ui/react";
 import { Clock } from "@ctlyst.id/internal-icon";
 import { useEffect as useEffect3, useImperativeHandle as useImperativeHandle2 } from "react";
 
@@ -4745,9 +4744,10 @@ var InputTimeArea = forwardRef12((props, ref) => {
         bg: "neutral.300"
       },
       boxSizing: "content-box",
-      height: "24px",
+      height: "22px",
       ref,
-      p: "2px",
+      px: "2px",
+      py: 0,
       sx: {
         fontVariantNumeric: "tabular-nums"
       },
@@ -4830,7 +4830,7 @@ var TimeInput2 = forwardRef12(
               borderColor: focusColor
             },
             children: /* @__PURE__ */ jsxs29(
-              InputGroup5,
+              InputGroup4,
               {
                 borderRadius: "sm",
                 backgroundColor: isDisabled ? "neutral.300" : "white.high",
@@ -4838,7 +4838,7 @@ var TimeInput2 = forwardRef12(
                 alignItems: "center",
                 gap: 3,
                 children: [
-                  /* @__PURE__ */ jsxs29(Flex17, { gap: 1, width: "100%", alignItems: "center", pl: 2, children: [
+                  /* @__PURE__ */ jsxs29(Flex17, { gap: "1px", width: "100%", alignItems: "center", pl: 2, children: [
                     /* @__PURE__ */ jsx63(InputTimeArea, { ...hoursProps }),
                     /* @__PURE__ */ jsx63("span", { children: ":" }),
                     /* @__PURE__ */ jsx63(InputTimeArea, { ...getInputProps("minutes") }),
@@ -4848,7 +4848,7 @@ var TimeInput2 = forwardRef12(
                     ] }),
                     options.hour12 && /* @__PURE__ */ jsx63(Input3, { p: 0, ...getInputProps("am/pm") })
                   ] }),
-                  /* @__PURE__ */ jsx63(Clock, { color: "neutral.400" }),
+                  /* @__PURE__ */ jsx63(Clock, { color: "neutral.400", size: 4 }),
                   addOnRight
                 ]
               }