@ctlyst.id/internal-ui 2.3.0 → 3.0.0

package/dist/index.mjs

@@ -65,9 +65,9 @@ var AccordionEye = ({ position = "left" }) => {
   return /* @__PURE__ */ jsx(
     Box,
     {
+      boxSize: 4,
       className: "eye-icon",
-      backgroundColor: "white",
-      ...position === "right" ? { position: "absolute", right: 4, zIndex: 2 } : {},
+      ...position === "right" ? { position: "relative", zIndex: 2, display: "none" } : {},
       children: /* @__PURE__ */ jsx(Eye, { size: 4 })
     }
   );
@@ -245,6 +245,7 @@ function AlertAction({ children, className }) {
       className: cx2("chakra-alert__action", className),
       variant: "link",
       fontWeight: "semibold",
+      textStyle: "text.xs",
       __css: css4,
       children
     }
@@ -344,14 +345,15 @@ AlertTitle.displayName = "AlertTitle";
 // src/components/anchor/components/anchor.tsx
 import { Link } from "@chakra-ui/react";
 import { cx as cx7 } from "@chakra-ui/shared-utils";
-import { jsxs } from "react/jsx-runtime";
-var Anchor = ({ children, leftIcon, rightIcon, isActive, isChild, ...props }) => {
-  return /* @__PURE__ */ jsxs(
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Anchor = ({ children, isActive, isChild, ...props }) => {
+  return /* @__PURE__ */ jsx12(
     Link,
     {
       display: "inline-block",
       w: "full",
       p: "4",
+      textStyle: "text.md",
       pl: isChild ? "10" : "4",
       borderLeft: "1px solid",
       borderLeftColor: isActive ? "primary.500" : "neutral.400",
@@ -362,28 +364,22 @@ var Anchor = ({ children, leftIcon, rightIcon, isActive, isChild, ...props }) =>
         textDecoration: "none"
       },
       ...props,
-      children: [
-        leftIcon && leftIcon,
-        children,
-        rightIcon && rightIcon
-      ]
+      children
     }
   );
 };
 Anchor.displayName = "Anchor";
 Anchor.defaultProps = {
-  leftIcon: void 0,
-  rightIcon: void 0,
   isActive: false,
   isChild: false
 };
 
 // src/components/badge/components/badge.tsx
 import { Badge as BadgeChakra } from "@chakra-ui/react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var Badge = (props) => {
   const { children, pill, ...rest } = props;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     BadgeChakra,
     {
       borderRadius: pill ? "xl" : "sm",
@@ -402,55 +398,63 @@ Badge.defaultProps = {
 var badge_default = Badge;
 
 // src/components/breadcrumb/components/bread-crumb.tsx
-import { Box as Box4, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Text, theme, useToken } from "@chakra-ui/react";
-import { FiChevronLeft, FiChevronsRight, FiHome } from "react-icons/fi";
-
-// src/components/button/index.ts
-import {
-  ButtonGroup,
-  ButtonGroupProps,
-  CloseButton,
-  CloseButtonProps,
-  IconButton,
-  IconButtonProps
-} from "@chakra-ui/react";
-
-// src/components/breadcrumb/components/bread-crumb.tsx
-import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Box as Box4, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, IconButton, Text } from "@chakra-ui/react";
+import { ChevronLeft, ChevronsRight, Home } from "@ctlyst.id/internal-icon";
+import { jsx as jsx14, jsxs } from "react/jsx-runtime";
 var BreadCrumb = (props) => {
   const { title, children, parents, className, disableHome, spacing: spacing2 = 2, backButton } = props;
-  const [neutral600, primary500] = useToken("colors", ["neutral.600", "primary.500"]);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     Box4,
     {
-      "data-test-id": "CT_component_breadcrumb_breadcrumb",
+      "data-test-id": "CT_component_breadcrumb",
       className,
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       paddingY: 2,
       children: [
-        /* @__PURE__ */ jsxs2(Box4, { display: "flex", alignItems: "center", children: [
-          backButton && /* @__PURE__ */ jsx13(button_default, { variant: "icon", "data-test-id": "button", size: "md", mr: "2", onClick: backButton, children: /* @__PURE__ */ jsx13(FiChevronLeft, { size: theme.sizes[5] }) }),
-          /* @__PURE__ */ jsx13(Text, { pr: "2", textStyle: "heading.6", color: "neutral.700", children: title }),
-          /* @__PURE__ */ jsx13(Box4, { h: "5.5", borderLeft: "1px solid", borderColor: neutral600 }),
-          /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs(Box4, { display: "flex", alignItems: "center", children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "center", children: [
+            backButton && /* @__PURE__ */ jsx14(
+              IconButton,
+              {
+                "data-test-id": "",
+                border: "1px solid",
+                borderColor: "neutral.100",
+                size: "sm",
+                minH: "9",
+                minW: "9",
+                bg: "white",
+                variant: "ghost",
+                "aria-label": "Edit",
+                icon: /* @__PURE__ */ jsx14(ChevronLeft, { size: 5 })
+              }
+            ),
+            /* @__PURE__ */ jsx14(Text, { pr: "2", textStyle: "heading.6", color: "neutral.700", children: title })
+          ] }),
+          /* @__PURE__ */ jsx14(Box4, { h: "5.5", borderLeft: "1px solid", borderColor: "neutral.600" }),
+          /* @__PURE__ */ jsxs(
             Breadcrumb,
             {
-              separator: /* @__PURE__ */ jsx13(FiChevronsRight, { color: neutral600, size: theme.sizes["3.5"] }),
+              alignItems: "center",
+              separator: /* @__PURE__ */ jsx14(Box4, { boxSize: "3.5", children: /* @__PURE__ */ jsx14(ChevronsRight, { color: "neutral.600", size: 3.5 }) }),
               pl: "2",
               pr: "4",
               spacing: spacing2,
-              sx: { ol: { display: "flex", alignItems: "center" } },
-              display: "flex",
-              alignItems: "center",
-              className: "breadcrumb-wrapper",
               children: [
-                /* @__PURE__ */ jsx13(BreadcrumbItem, { children: /* @__PURE__ */ jsx13(BreadcrumbLink, { href: !disableHome ? "/" : void 0, style: { ...disableHome && { cursor: "default" } }, children: /* @__PURE__ */ jsx13(FiHome, { className: "align-top", size: theme.sizes["3.5"], color: primary500 }) }) }),
-                parents == null ? void 0 : parents.map((val) => /* @__PURE__ */ jsx13(BreadcrumbItem, { children: /* @__PURE__ */ jsx13(
+                /* @__PURE__ */ jsx14(BreadcrumbItem, { children: /* @__PURE__ */ jsx14(
+                  BreadcrumbLink,
+                  {
+                    alignItems: "center",
+                    href: !disableHome ? "/" : void 0,
+                    style: { ...disableHome && { cursor: "default" } },
+                    children: /* @__PURE__ */ jsx14(Box4, { boxSize: "3.5", children: /* @__PURE__ */ jsx14(Home, { size: 3.5, color: "primary.500" }) })
+                  }
+                ) }),
+                parents == null ? void 0 : parents.map((val) => /* @__PURE__ */ jsx14(BreadcrumbItem, { children: /* @__PURE__ */ jsx14(
                   BreadcrumbLink,
                   {
-                    "data-test-id": "iadKcMAul3QAdvmfIQjRE",
+                    "data-test-id": "",
                     href: !val.disable ? val.link : void 0,
                     onClick: val.onClick,
                     style: {
@@ -459,15 +463,15 @@ var BreadCrumb = (props) => {
                       }
                     },
                     _hover: { textDecoration: "none" },
-                    children: /* @__PURE__ */ jsx13(Text, { color: val.disable ? neutral600 : primary500, textStyle: "text.sm", children: val.name })
+                    children: /* @__PURE__ */ jsx14(Text, { color: val.disable ? "neutral.600" : "primary.500", textStyle: "text.sm", children: val.name })
                   }
                 ) }, val.name)),
-                /* @__PURE__ */ jsx13(BreadcrumbItem, { children: /* @__PURE__ */ jsx13(BreadcrumbLink, { _hover: { textDecor: "none", cursor: "default" }, children: /* @__PURE__ */ jsx13(Text, { color: "neutral.600", textStyle: "text.sm", children: title }) }) })
+                /* @__PURE__ */ jsx14(BreadcrumbItem, { children: /* @__PURE__ */ jsx14(BreadcrumbLink, { _hover: { textDecor: "none", cursor: "default" }, children: /* @__PURE__ */ jsx14(Text, { color: "neutral.600", textStyle: "text.sm", children: title }) }) })
               ]
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx13(Box4, { children })
+        children && /* @__PURE__ */ jsx14(Box4, { children })
       ]
     }
   );
@@ -482,13 +486,23 @@ BreadCrumb.defaultProps = {
 };
 var bread_crumb_default = BreadCrumb;
 
+// src/components/button/index.ts
+import {
+  ButtonGroup,
+  ButtonGroupProps,
+  CloseButton,
+  CloseButtonProps,
+  IconButton as IconButton2,
+  IconButtonProps
+} from "@chakra-ui/react";
+
 // src/components/card/components/card.tsx
 import { Card, useStyleConfig as useStyleConfig2 } from "@chakra-ui/react";
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var CardCustom = forwardRef6(({ children, ...rest }, ref) => {
   const styles = useStyleConfig2("Card", rest);
-  return /* @__PURE__ */ jsx14(Card, { __css: styles, backgroundColor: "white.high", ref, ...rest, children });
+  return /* @__PURE__ */ jsx15(Card, { __css: styles, backgroundColor: "white.high", ref, ...rest, children });
 });
 CardCustom.defaultProps = {
   withShadow: true,
@@ -497,22 +511,36 @@ CardCustom.defaultProps = {
 var card_default = CardCustom;
 
 // src/components/checkbox/components/checkbox.tsx
-import { Box as Box5, Checkbox, forwardRef as forwardRef7, Text as Text2 } from "@chakra-ui/react";
-import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box as Box5, Checkbox, forwardRef as forwardRef7, Text as Text2, useCheckbox } from "@chakra-ui/react";
+import * as Icon from "@ctlyst.id/internal-icon";
+import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 var CheckboxComponent = forwardRef7(
-  ({ isError = false, helpText = "", errorText = "", boxProps, children, isDisabled, ...rest }, ref) => {
+  ({ isError = false, helpText, errorText, boxProps, children, isDisabled, ...rest }, ref) => {
+    const { state } = useCheckbox(rest);
     const variant = isError ? "errors" : "unstyled";
-    return /* @__PURE__ */ jsxs3(Box5, { ...boxProps, children: [
-      /* @__PURE__ */ jsx15(Box5, { display: "flex", children: /* @__PURE__ */ jsx15(Checkbox, { variant, ref, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx15(Text2, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-      (isError || helpText) && /* @__PURE__ */ jsx15(Box5, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx15(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx15(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
+    return /* @__PURE__ */ jsxs2(Box5, { children: [
+      /* @__PURE__ */ jsx16(Box5, { display: "flex", ...boxProps, children: /* @__PURE__ */ jsx16(
+        Checkbox,
+        {
+          variant,
+          ref,
+          ...rest,
+          isDisabled,
+          color: "white",
+          icon: state.isIndeterminate ? /* @__PURE__ */ jsx16(Icon.MinusLine, { size: 3, color: "inherit" }) : /* @__PURE__ */ jsx16(Icon.Check, { size: 3, color: "inherit" }),
+          children: children && /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children })
+        }
+      ) }),
+      (isError && errorText || helpText) && /* @__PURE__ */ jsx16(Box5, { mt: "1", ml: "6", children: isError ? /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
     ] });
   }
 );
+CheckboxComponent.displayName = "Checkbox";
 CheckboxComponent.defaultProps = {
   isError: false,
-  helpText: "",
-  errorText: "",
-  boxProps: {}
+  helpText: void 0,
+  errorText: void 0,
+  boxProps: void 0
 };
 var checkbox_default = CheckboxComponent;
 
@@ -521,7 +549,7 @@ import { Box as Box7, CheckboxGroup, Stack } from "@chakra-ui/react";
 
 // src/components/field/components/field.tsx
 import { Box as Box6, FormControl, FormErrorMessage, FormHelperText, FormLabel } from "@chakra-ui/react";
-import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs3 } from "react/jsx-runtime";
 var Field = (props) => {
   const {
     label,
@@ -545,15 +573,15 @@ var Field = (props) => {
   };
   const helperColor = getHelperColor();
   const justifyHelper = getJustifyContentHelper();
-  return /* @__PURE__ */ jsxs4(FormControl, { isInvalid: isError, ...boxProps, children: [
-    label && (typeof label === "string" ? /* @__PURE__ */ jsxs4(FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
-      isRequired && /* @__PURE__ */ jsx16(Box6, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
+  return /* @__PURE__ */ jsxs3(FormControl, { isInvalid: isError, ...boxProps, children: [
+    label && (typeof label === "string" ? /* @__PURE__ */ jsxs3(FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
+      isRequired && /* @__PURE__ */ jsx17(Box6, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
       label
     ] }) : label),
     children,
-    (isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ jsxs4(Box6, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
-      !isError ? leftHelperText && (typeof leftHelperText === "string" ? /* @__PURE__ */ jsx16(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: leftHelperText }) : leftHelperText) : typeof errorMessage === "string" ? /* @__PURE__ */ jsx16(FormErrorMessage, { fontSize: "text.xs", color: "danger.500", mt: 1, children: errorMessage }) : errorMessage,
-      rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ jsx16(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
+    (isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ jsxs3(Box6, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
+      !isError ? leftHelperText && (typeof leftHelperText === "string" ? /* @__PURE__ */ jsx17(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: leftHelperText }) : leftHelperText) : typeof errorMessage === "string" ? /* @__PURE__ */ jsx17(FormErrorMessage, { fontSize: "text.xs", color: "danger.500", mt: 1, children: errorMessage }) : errorMessage,
+      rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ jsx17(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
     ] })
   ] });
 };
@@ -570,10 +598,10 @@ Field.defaultProps = {
 var field_default = Field;
 
 // src/components/checkbox/components/checkbox-group.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function CheckboxGroupComponent(props) {
   const { children, label, helpText, isError, errorMessage, ...rest } = props;
-  return /* @__PURE__ */ jsx17(field_default, { ...rest, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx17(Box7, { mt: "12px", children: /* @__PURE__ */ jsx17(CheckboxGroup, { ...rest, children: /* @__PURE__ */ jsx17(Stack, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
+  return /* @__PURE__ */ jsx18(field_default, { ...rest, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx18(Box7, { mt: "2", mb: "1", children: /* @__PURE__ */ jsx18(CheckboxGroup, { ...rest, children: /* @__PURE__ */ jsx18(Stack, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 }
 CheckboxGroupComponent.defaultProps = {
   helpText: "",
@@ -589,7 +617,7 @@ import {
   CheckboxIcon,
   CheckboxIconProps,
   CheckboxState,
-  useCheckbox,
+  useCheckbox as useCheckbox2,
   useCheckboxGroup,
   UseCheckboxGroupProps,
   UseCheckboxGroupReturn,
@@ -598,55 +626,55 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/chips/components/chips.tsx
-import { Box as Box8, useStyleConfig as useStyleConfig3 } from "@chakra-ui/react";
-import { Close as Close2 } from "@ctlyst.id/internal-icon";
-import { useMemo } from "react";
-import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
-var Chips = ({ children, ...rest }) => {
+import { Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
+import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
+var Chips = ({ label, size: size2, onClick, ...rest }) => {
   const { isActive, isDisabled, onClose } = rest;
-  const styles = useStyleConfig3("Chips", rest);
-  const closeColor = useMemo(() => {
-    if (isActive) return "white.high";
-    if (isDisabled) return "black.low";
-    return "primary.500";
-  }, [isActive, isDisabled]);
-  return /* @__PURE__ */ jsxs5(Box8, { __css: styles, display: "inline-flex", alignItems: "center", justifyContent: "center", ...rest, children: [
-    children,
-    onClose && /* @__PURE__ */ jsx18(
-      Box8,
-      {
-        onClick: isDisabled ? void 0 : onClose,
-        cursor: isDisabled ? "not-allowed" : "pointer",
-        ml: 2,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        children: /* @__PURE__ */ jsx18(Close2, { color: closeColor, size: 4 })
-      }
-    )
-  ] });
+  const variant = isDisabled ? "disabled" : "outline";
+  const handleClose = (e) => {
+    if (onClose) {
+      e.stopPropagation();
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    Tag,
+    {
+      "data-test-id": "",
+      onClick,
+      size: size2,
+      borderRadius: "full",
+      variant: isActive ? "solid" : variant,
+      children: [
+        /* @__PURE__ */ jsx19(TagLabel, { children: label }),
+        onClose && /* @__PURE__ */ jsx19(TagCloseButton, { "data-test-id": "", onClick: handleClose })
+      ]
+    },
+    size2
+  );
 };
 Chips.defaultProps = {
   isDisabled: false,
   isActive: false,
   onClose: void 0,
-  children: void 0,
+  label: void 0,
   size: "sm"
 };
 var chips_default = Chips;
 
 // src/components/counter/components/counter.tsx
-import { Box as Box11, HStack, IconButton as IconButton2, Text as Text3 } from "@chakra-ui/react";
+import { Box as Box10, HStack, IconButton as IconButton3, Text as Text3 } from "@chakra-ui/react";
+import { useCallback } from "react";
 import { FiMinus, FiPlus } from "react-icons/fi";
 
 // src/components/form/components/input-addon.tsx
 import { InputLeftAddon, InputRightAddon } from "@chakra-ui/react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var InputAddonLeft = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx19(InputLeftAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineEnd: 0 }, ...props, children });
+  return /* @__PURE__ */ jsx20(InputLeftAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineEnd: 0 }, ...props, children });
 };
 var InputAddonRight = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     InputRightAddon,
     {
       backgroundColor: "neutral.200",
@@ -664,11 +692,11 @@ import { InputLeftElement } from "@chakra-ui/react";
 import { InputRightElement } from "@chakra-ui/react";
 
 // src/components/form/components/input-field.tsx
-import { Box as Box9, Input as ChakraInput, InputGroup } from "@chakra-ui/react";
-import { Close as Close3, Eye as Eye2, EyeOff } from "@ctlyst.id/internal-icon";
-import React3, { useMemo as useMemo2, useState } from "react";
-import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
-var InputField = React3.forwardRef((props, ref) => {
+import { Box as Box8, Input as ChakraInput, InputGroup } from "@chakra-ui/react";
+import { Close as Close2, Eye as Eye2, EyeOff } from "@ctlyst.id/internal-icon";
+import React2, { useMemo, useState } from "react";
+import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
+var InputField = React2.forwardRef((props, ref) => {
   const {
     value,
     type,
@@ -702,20 +730,20 @@ var InputField = React3.forwardRef((props, ref) => {
     };
   };
   const [isShowPassword, setIsShowPassword] = useState(false);
-  const inputType = useMemo2(() => {
+  const inputType = useMemo(() => {
     return type === "password" && isShowPassword ? "text" : type;
   }, [isShowPassword, type]);
-  const fontSize = useMemo2(() => {
+  const fontSize = useMemo(() => {
     if (type === "password") {
       if (!isShowPassword && value) return "text.xl";
     }
     return "text.sm";
   }, [isShowPassword, type, value]);
-  const iconColor = useMemo2(() => {
+  const iconColor = useMemo(() => {
     return isDisabled ? "black.low" : "black.medium";
   }, [isDisabled]);
   const { outlineColor, focusColor } = getProperties();
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     field_default,
     {
       label,
@@ -725,8 +753,8 @@ var InputField = React3.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      children: /* @__PURE__ */ jsx20(
-        Box9,
+      children: /* @__PURE__ */ jsx21(
+        Box8,
         {
           transition: "all 0.15s",
           boxShadow: "none",
@@ -736,7 +764,7 @@ var InputField = React3.forwardRef((props, ref) => {
           _focusWithin: {
             borderColor: focusColor
           },
-          children: /* @__PURE__ */ jsxs6(
+          children: /* @__PURE__ */ jsxs5(
             InputGroup,
             {
               size: size2,
@@ -745,7 +773,7 @@ var InputField = React3.forwardRef((props, ref) => {
               cursor: isDisabled ? "not-allowed" : "default",
               children: [
                 addOnLeft,
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx21(
                   ChakraInput,
                   {
                     ref,
@@ -757,8 +785,8 @@ var InputField = React3.forwardRef((props, ref) => {
                     fontSize
                   }
                 ),
-                (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs6(
-                  Box9,
+                (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs5(
+                  Box8,
                   {
                     "data-test-id": "CT_Component_ClearInput",
                     display: "flex",
@@ -767,18 +795,18 @@ var InputField = React3.forwardRef((props, ref) => {
                     width: "16px",
                     mr: "10px",
                     children: [
-                      withClear && !isLoading && /* @__PURE__ */ jsx20(
-                        Box9,
+                      withClear && !isLoading && /* @__PURE__ */ jsx21(
+                        Box8,
                         {
                           display: "flex",
                           justifyContent: "center",
                           onClick: !isDisabled ? onClear : void 0,
                           cursor: isDisabled ? "not-allowed" : "pointer",
-                          children: /* @__PURE__ */ jsx20(Close3, { size: 4, color: iconColor })
+                          children: /* @__PURE__ */ jsx21(Close2, { size: 4, color: iconColor })
                         }
                       ),
-                      type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
-                        Box9,
+                      type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
+                        Box8,
                         {
                           "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
                           onClick: () => {
@@ -787,11 +815,11 @@ var InputField = React3.forwardRef((props, ref) => {
                           cursor: isDisabled ? "not-allowed" : "pointer",
                           display: "flex",
                           justifyContent: "center",
-                          children: /* @__PURE__ */ jsx20(EyeOff, { size: 4, color: iconColor })
+                          children: /* @__PURE__ */ jsx21(EyeOff, { size: 4, color: iconColor })
                         }
                       ),
-                      type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
-                        Box9,
+                      type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx21(
+                        Box8,
                         {
                           "data-test-id": "sfc2388bmeXBmdla45Ibk",
                           onClick: () => {
@@ -800,10 +828,10 @@ var InputField = React3.forwardRef((props, ref) => {
                           cursor: isDisabled ? "not-allowed" : "pointer",
                           display: "flex",
                           justifyContent: "center",
-                          children: /* @__PURE__ */ jsx20(Eye2, { size: 4, color: iconColor })
+                          children: /* @__PURE__ */ jsx21(Eye2, { size: 4, color: iconColor })
                         }
                       ),
-                      isLoading && /* @__PURE__ */ jsx20(loader_default, { size: "sm" })
+                      isLoading && /* @__PURE__ */ jsx21(loader_default, { size: "sm" })
                     ]
                   }
                 ),
@@ -827,14 +855,14 @@ InputField.defaultProps = {
 var input_field_default = InputField;
 
 // src/components/form/components/textarea.tsx
-import { Box as Box10, Textarea as ChakraTextarea } from "@chakra-ui/react";
-import React4 from "react";
-import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
-var TextareaField = React4.forwardRef((props, ref) => {
+import { Box as Box9, Textarea as ChakraTextarea } from "@chakra-ui/react";
+import React3 from "react";
+import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
+var TextareaField = React3.forwardRef((props, ref) => {
   const { value, isLoading, ...inputProps } = props;
-  return /* @__PURE__ */ jsx21(field_default, { ...inputProps, children: /* @__PURE__ */ jsxs7(Box10, { position: "relative", children: [
-    /* @__PURE__ */ jsx21(ChakraTextarea, { ref, value, ...inputProps }),
-    isLoading && /* @__PURE__ */ jsx21(Box10, { zIndex: 999, top: 2, right: 2, position: "absolute", children: /* @__PURE__ */ jsx21(loader_default, { size: "sm" }) })
+  return /* @__PURE__ */ jsx22(field_default, { ...inputProps, children: /* @__PURE__ */ jsxs6(Box9, { position: "relative", children: [
+    /* @__PURE__ */ jsx22(ChakraTextarea, { ref, value, ...inputProps }),
+    isLoading && /* @__PURE__ */ jsx22(Box9, { zIndex: 999, top: 2, right: 2, position: "absolute", children: /* @__PURE__ */ jsx22(loader_default, { size: "sm" }) })
   ] }) });
 });
 TextareaField.defaultProps = {
@@ -866,7 +894,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/counter/components/counter.tsx
-import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
 var Counter = ({
   value,
   size: size2 = "xs",
@@ -874,7 +902,7 @@ var Counter = ({
   max = 9999,
   onChange,
   isError = false,
-  disabled = false,
+  disabled: disabled2 = false,
   error = "",
   helperText = "",
   isReadOnly = false
@@ -885,52 +913,62 @@ var Counter = ({
   const increment = () => {
     onChange(value + 1);
   };
-  const handleChange = (e) => {
-    onChange(+e.target.value);
-  };
-  return /* @__PURE__ */ jsxs8(Box11, { children: [
-    /* @__PURE__ */ jsxs8(HStack, { gap: "1", children: [
-      /* @__PURE__ */ jsx22(
-        IconButton2,
+  const handleChangeInput = useCallback(
+    (e) => {
+      const inputValue = e.target.value;
+      const cleanedInputValue = inputValue.replace(/^0+/, "") || "0";
+      const parsedValue = parseInt(cleanedInputValue, 10);
+      const newValue = Math.max(Math.min(parsedValue, max), min);
+      e.target.value = newValue.toString();
+      onChange(newValue);
+    },
+    [onChange, max, min]
+  );
+  return /* @__PURE__ */ jsxs7(Box10, { children: [
+    /* @__PURE__ */ jsxs7(HStack, { gap: "1", children: [
+      /* @__PURE__ */ jsx23(
+        IconButton3,
         {
           "aria-label": "minus",
           "data-test-id": "CT_Component_Counter_decrement",
           onClick: decrement,
-          isDisabled: disabled || +value <= min,
+          isDisabled: disabled2 || +value <= min,
           size: size2,
-          icon: /* @__PURE__ */ jsx22(FiMinus, {})
+          icon: /* @__PURE__ */ jsx23(FiMinus, {})
         }
       ),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         input_field_default,
         {
           "data-test-id": "CT_Component_Counter_input",
           value,
           isError,
-          isDisabled: disabled || max === 0,
+          isDisabled: disabled2 || max === 0,
           textAlign: "center",
           size: size2,
           min,
           max,
-          onChange: handleChange,
+          onChange: handleChangeInput,
           isReadOnly,
-          width: 12,
-          type: "number"
+          width: 11.5,
+          type: "number",
+          onFocus: (e) => e.target.select(),
+          borderColor: isError ? "danger.500" : "neutral.400"
         }
       ),
-      /* @__PURE__ */ jsx22(
-        IconButton2,
+      /* @__PURE__ */ jsx23(
+        IconButton3,
         {
           "aria-label": "plus",
           "data-test-id": "CT_Component_Counter_decrement",
           onClick: increment,
-          isDisabled: disabled || +value >= max,
+          isDisabled: disabled2 || +value >= max,
           size: size2,
-          icon: /* @__PURE__ */ jsx22(FiPlus, {})
+          icon: /* @__PURE__ */ jsx23(FiPlus, {})
         }
       )
     ] }),
-    !isError ? /* @__PURE__ */ jsx22(Text3, { mt: 1, color: "black.medium", textStyle: "text.xs", children: helperText }) : /* @__PURE__ */ jsx22(Text3, { mt: 1, color: "danger.500", textStyle: "text.xs", children: error })
+    !isError ? /* @__PURE__ */ jsx23(Text3, { mt: 1, color: "black.medium", textStyle: "text.xs", children: helperText }) : /* @__PURE__ */ jsx23(Text3, { mt: 1, color: "danger.500", textStyle: "text.xs", children: error })
   ] });
 };
 var counter_default = Counter;
@@ -938,9 +976,9 @@ var counter_default = Counter;
 // src/components/data-table/components/data-table.tsx
 import { ChevronDownIcon, ChevronUpIcon, UpDownIcon } from "@chakra-ui/icons";
 import {
-  Box as Box12,
+  Box as Box11,
   Checkbox as Checkbox2,
-  Flex,
+  Flex as Flex2,
   Skeleton as Skeleton2,
   Table,
   Tbody,
@@ -955,7 +993,7 @@ import { css } from "@emotion/react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import * as React5 from "react";
 import { useRef } from "react";
-import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
 var getCommonPinningStyles = (column) => {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
@@ -1014,7 +1052,7 @@ var useDataTable = ({
       {
         id: "select",
         size: 32,
-        header: ({ table: table2 }) => /* @__PURE__ */ jsx23(
+        header: ({ table: table2 }) => /* @__PURE__ */ jsx24(
           Checkbox2,
           {
             "data-test-id": "select-header-data-table",
@@ -1025,7 +1063,7 @@ var useDataTable = ({
             }
           }
         ),
-        cell: ({ row }) => /* @__PURE__ */ jsx23(
+        cell: ({ row }) => /* @__PURE__ */ jsx24(
           Checkbox2,
           {
             "data-test-id": `select-data-table-${row.index}`,
@@ -1087,22 +1125,22 @@ var useDataTable = ({
     generateColumn
   };
 };
-var DataTable = React5.forwardRef((props, ref) => {
-  const { isLoading, styles, headerSticky, onRowClick, container } = props;
-  const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
-  React5.useImperativeHandle(ref, () => ({
-    toggleAllRowsSelected
-  }));
-  return /* @__PURE__ */ jsxs9(Box12, { overflowX: "auto", position: "relative", maxW: "100%", minH: 400, w: "full", ...container, children: [
-    isLoading && /* @__PURE__ */ jsxs9(Table, { ...styles == null ? void 0 : styles.table, children: [
-      /* @__PURE__ */ jsx23(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx23(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index2) => /* @__PURE__ */ jsx23(
+var DataTable = React5.forwardRef(
+  (props, ref) => {
+    const { isLoading, styles, headerSticky, onRowClick, container } = props;
+    const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
+    React5.useImperativeHandle(ref, () => ({
+      toggleAllRowsSelected
+    }));
+    return /* @__PURE__ */ jsx24(Box11, { overflowX: "auto", position: "relative", maxW: "100%", minH: 400, w: "full", ...container, children: isLoading ? /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
+      /* @__PURE__ */ jsx24(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index2) => /* @__PURE__ */ jsx24(
         Th,
         {
           colSpan: header.colSpan,
           width: `${header.getSize() + (index2 === 0 || index2 === headerGroup.headers.length - 1 ? 16 : 0)}px`,
           ...styles == null ? void 0 : styles.tableColumnHeader,
-          children: /* @__PURE__ */ jsx23(
-            Flex,
+          children: /* @__PURE__ */ jsx24(
+            Flex2,
             {
               "data-test-id": "CT_component_data-table_loader",
               textTransform: "capitalize",
@@ -1114,20 +1152,19 @@ var DataTable = React5.forwardRef((props, ref) => {
         },
         header.id
       )) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx23(Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ jsx23(Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx23(Td, { width: 210, children: /* @__PURE__ */ jsx23(Skeleton2, { startColor: "gray.50", endColor: "gray.100", h: "30px", w: "100%" }, i) }, i)) }, num)) })
-    ] }),
-    /* @__PURE__ */ jsxs9(Table, { ...styles == null ? void 0 : styles.table, children: [
-      /* @__PURE__ */ jsx23(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx23(Tr, { bg: useColorModeValue("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index2) => {
+      /* @__PURE__ */ jsx24(Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ jsx24(Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx24(Td, { width: 210, children: /* @__PURE__ */ jsx24(Skeleton2, { startColor: "gray.50", endColor: "gray.100", h: "30px", w: "100%" }, i) }, i)) }, num)) })
+    ] }) : /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, children: [
+      /* @__PURE__ */ jsx24(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { bg: useColorModeValue("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index2) => {
         var _a;
-        return /* @__PURE__ */ jsx23(
+        return /* @__PURE__ */ jsx24(
           Th,
           {
             colSpan: header.colSpan,
             sx: getCommonPinningStyles(header.column),
             width: `${header.getSize() + (index2 === 0 || index2 === headerGroup.headers.length - 1 ? 16 : 0)}px`,
             ...styles == null ? void 0 : styles.tableColumnHeader,
-            children: /* @__PURE__ */ jsxs9(
-              Flex,
+            children: /* @__PURE__ */ jsxs8(
+              Flex2,
               {
                 backgroundColor: "white",
                 height: "100%",
@@ -1137,18 +1174,18 @@ var DataTable = React5.forwardRef((props, ref) => {
                 align: "center",
                 gap: 2,
                 children: [
-                  /* @__PURE__ */ jsx23(Text4, { children: flexRender(header.column.columnDef.header, header.getContext()) }),
-                  /* @__PURE__ */ jsx23(
-                    Box12,
+                  /* @__PURE__ */ jsx24(Text4, { children: flexRender(header.column.columnDef.header, header.getContext()) }),
+                  /* @__PURE__ */ jsx24(
+                    Box11,
                     {
                       as: "span",
                       cursor: header.column.getCanSort() ? "pointer" : "default",
                       "data-test-id": `CT_Container_SortingIcon_${header.id}`,
                       onClick: header.column.getToggleSortingHandler(),
                       children: (_a = header.column.getCanSort() && {
-                        asc: /* @__PURE__ */ jsx23(ChevronUpIcon, {}),
-                        desc: /* @__PURE__ */ jsx23(ChevronDownIcon, {})
-                      }[header.column.getIsSorted()]) != null ? _a : /* @__PURE__ */ jsx23(UpDownIcon, { h: 2 })
+                        asc: /* @__PURE__ */ jsx24(ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
+                        desc: /* @__PURE__ */ jsx24(ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
+                      }[header.column.getIsSorted()]) != null ? _a : /* @__PURE__ */ jsx24(UpDownIcon, { h: 4, w: 4, color: "neutral.500" })
                     }
                   )
                 ]
@@ -1158,9 +1195,9 @@ var DataTable = React5.forwardRef((props, ref) => {
           header.id
         );
       }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx23(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
+      /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
         const trRef = useRef();
-        return /* @__PURE__ */ jsx23(
+        return /* @__PURE__ */ jsx24(
           Tr,
           {
             "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
@@ -1168,12 +1205,12 @@ var DataTable = React5.forwardRef((props, ref) => {
             ref: trRef,
             ...styles == null ? void 0 : styles.tableRow,
             css: css`
-                  &:last-child {
-                    td {
-                      border-bottom: none;
-                    }
-                  }
-                `,
+                      &:last-child {
+                        td {
+                          border-bottom: none;
+                        }
+                      }
+                    `,
             onMouseDown: () => {
               var _a;
               (_a = trRef.current) == null ? void 0 : _a.setAttribute("data-active", "true");
@@ -1187,53 +1224,42 @@ var DataTable = React5.forwardRef((props, ref) => {
                 onRowClick(row.original);
               }
             },
-            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx23(
-              Td,
-              {
-                "data-test-id": `CT_Component_TableCell_${cell.id}`,
-                fontSize: "text.sm",
-                color: useColorModeValue("dark.800", "dark.300"),
-                sx: getCommonPinningStyles(cell.column),
-                ...styles == null ? void 0 : styles.tableCell,
-                children: /* @__PURE__ */ jsx23(Flex, { height: "100%", backgroundColor: "white", align: "center", children: /* @__PURE__ */ jsx23(
-                  Box12,
-                  {
-                    tabIndex: 0,
-                    display: "inline-block",
-                    cursor: "auto",
-                    "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
-                    onMouseUp: (e) => e.stopPropagation(),
-                    onMouseDown: (e) => e.stopPropagation(),
-                    onClick: (e) => {
-                      e.stopPropagation();
-                    },
-                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                  }
-                ) })
-              },
-              cell.id
-            ))
+            children: row.getVisibleCells().map((cell) => {
+              var _a, _b;
+              const isDisabled = (_b = (_a = cell.row.original) == null ? void 0 : _a.disabled) == null ? void 0 : _b[cell.column.id];
+              return /* @__PURE__ */ jsx24(
+                Td,
+                {
+                  "data-test-id": `CT_Component_TableCell_${cell.id}`,
+                  fontSize: "text.sm",
+                  sx: getCommonPinningStyles(cell.column),
+                  ...styles == null ? void 0 : styles.tableCell,
+                  children: /* @__PURE__ */ jsx24(Flex2, { height: "100%", align: "center", opacity: isDisabled ? 0.5 : 1, children: /* @__PURE__ */ jsx24(
+                    Flex2,
+                    {
+                      tabIndex: 0,
+                      display: "inline-flex",
+                      cursor: "auto",
+                      "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
+                      onMouseUp: (e) => e.stopPropagation(),
+                      onMouseDown: (e) => e.stopPropagation(),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                      },
+                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                    }
+                  ) })
+                },
+                cell.id
+              );
+            })
           },
           row.id
         );
       }) })
-    ] })
-  ] });
-});
-DataTable.defaultProps = {
-  container: void 0,
-  withSelectedRow: false,
-  styles: void 0,
-  isLoading: void 0,
-  onSelectedRow: void 0,
-  onSort: void 0,
-  manualSorting: false,
-  sortingState: [],
-  sortDescFirst: false,
-  headerSticky: false,
-  onRowClick: void 0,
-  columnPinning: void 0
-};
+    ] }) });
+  }
+);
 var data_table_default = DataTable;
 
 // src/components/datepicker/components/datepicker.tsx
@@ -1242,20 +1268,21 @@ import {
   FormErrorMessage as FormErrorMessage3,
   FormHelperText as FormHelperText3,
   FormLabel as FormLabel3,
+  IconButton as IconButton4,
   InputGroup as InputGroup4,
   InputRightElement as InputRightElement3
 } 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";
-import { FiCalendar, FiX } from "react-icons/fi";
 
 // src/components/datepicker/components/styles.tsx
 import { useColorMode } from "@chakra-ui/system";
 import { Global } from "@emotion/react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var Styles = () => {
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Styles = ({ showHeader }) => {
   const { colorMode } = useColorMode();
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Global,
     {
       styles: `
@@ -1333,8 +1360,7 @@ var Styles = () => {
       }
 
       .react-datepicker {
-        font-family: "inherit", helvetica, arial, sans-serif;
-        font-size: 0.75;
+        font-family: Poppins;
         background-color: ${colorMode === "light" ? "#ffffff" : "#283046"};
         color: ${colorMode === "light" ? "#000" : "#d0d1d2"};
         filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.08));
@@ -1394,9 +1420,9 @@ var Styles = () => {
 
       .react-datepicker__header {
         text-align: center;
-        background-color: ${colorMode === "light" ? "#ffffff" : "#131620"};
+        background-color: '#ffffff';
         border-top-left-radius: 0.3rem;
-        padding: 8px 0;
+        padding-top:16px;
         position: relative;
       }
       .react-datepicker__header--time {
@@ -1429,9 +1455,11 @@ var Styles = () => {
       .react-datepicker__current-month,
       .react-datepicker-time__header,
       .react-datepicker-year-header {
+        display:${showHeader ? "block" : "none"};
         margin-top: 0;
         color: ${colorMode === "light" ? "#111111" : "#d0d1d2"};
-        font-size: 0.75;
+        font-size:14px;
+        font-weight:600;
       }
 
       .react-datepicker-time__header {
@@ -1448,7 +1476,7 @@ var Styles = () => {
         text-align: center;
         cursor: pointer;
         position: absolute;
-        top: 2px;
+        top: 10px;
         padding: 0;
         border: none;
         z-index: 1;
@@ -1458,10 +1486,14 @@ var Styles = () => {
         overflow: hidden;
       }
       .react-datepicker__navigation--previous {
-        left: 2px;
+        left: 22px;
+        border:1px solid var(--chakra-colors-neutral-400);
+        border-radius:4px;
       }
       .react-datepicker__navigation--next {
-        right: 2px;
+        right: 22px;
+        border:1px solid var(--chakra-colors-neutral-400);
+        border-radius:4px;
       }
       .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
         right: 85px;
@@ -1494,14 +1526,14 @@ var Styles = () => {
       }
       .react-datepicker__navigation-icon--next::before {
         transform: rotate(45deg);
-        left: -7px;
+        left: -4px;
       }
       .react-datepicker__navigation-icon--previous {
         right: -2px;
       }
       .react-datepicker__navigation-icon--previous::before {
         transform: rotate(225deg);
-        right: -7px;
+        right: -4px;
       }
 
       .react-datepicker__month-container {
@@ -1525,7 +1557,7 @@ var Styles = () => {
       }
 
       .react-datepicker__month {
-        margin: 0.4rem;
+        padding: 0 1rem 1rem 1rem;
         text-align: center;
       }
       .react-datepicker__month .react-datepicker__month-text,
@@ -1649,17 +1681,20 @@ var Styles = () => {
 
       .react-datepicker__day-names {
         margin-bottom: 0px;
+        margin-top: 8px;
       }
 
       .react-datepicker__day-name,
       .react-datepicker__day,
       .react-datepicker__time-name {
-        color: ${colorMode === "light" ? "#000" : "#d0d1d2"};
+        colors: #000;
         display: inline-block;
-        width: 1.7rem;
-        line-height: 1.7rem;
+        width: 2.25rem;
+        line-height: 2.25rem;
         text-align: center;
-        padding: 0.166rem;
+      }
+      .react-datepicker__day-name{
+        color:var(--chakra-colors-black-medium)
       }
 
       .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
@@ -1697,8 +1732,8 @@ var Styles = () => {
       .react-datepicker__month-text:hover,
       .react-datepicker__quarter-text:hover,
       .react-datepicker__year-text:hover {
-        border-radius: 0.3rem;
-        background-color: ${colorMode === "light" ? "#f0f0f0" : "#131620"};
+        border-radius: 2rem;
+        background-color: var(--chakra-colors-neutral-200);
       }
       .react-datepicker__day--highlighted,
       .react-datepicker__month-text--highlighted,
@@ -1736,8 +1771,8 @@ var Styles = () => {
       .react-datepicker__year-text--selected,
       .react-datepicker__year-text--in-selecting-range,
       .react-datepicker__year-text--in-range {
-        border-radius: 0.3rem;
-        background-color: ${colorMode === "light" ? "#12784A" : "#131620"};
+        border-radius: var(--chakra-radii-2xl);
+        background-color: var(--chakra-colors-primary-500);
         color: #fff;
       }
       .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
@@ -1750,13 +1785,13 @@ var Styles = () => {
       .react-datepicker__year-text--selected:hover,
       .react-datepicker__year-text--in-selecting-range:hover,
       .react-datepicker__year-text--in-range:hover {
-        background-color: ${colorMode === "light" ? "#075331" : "#131620"};
+        background-color: var(--chakra-colors-primary-500);
       }
       .react-datepicker__day--keyboard-selected,
       .react-datepicker__month-text--keyboard-selected,
       .react-datepicker__quarter-text--keyboard-selected,
       .react-datepicker__year-text--keyboard-selected {
-        border-radius: 0.3rem;
+        border-radius: 2rem;
         background-color: ${colorMode === "light" ? "#075331" : "#131620"};
         color: #fff;
       }
@@ -1782,7 +1817,7 @@ var Styles = () => {
       .react-datepicker__month-text--in-range,
       .react-datepicker__quarter-text--in-range,
       .react-datepicker__year-text--in-range) {
-        background-color: rgba(18, 120, 74, 0.1);
+        background-color: var(--chakra-colors-primary-50);
         color: ${colorMode === "light" ? "#000" : "#d0d1d2"};
       }
       .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
@@ -1868,7 +1903,7 @@ var Styles = () => {
 
       }
       .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
-        background: ${colorMode === "light" ? "#F5F5F5" : "inherit"} ;
+        background:var(--chakra-colors-neutral-50);
 
         border-top-left-radius: 8px;
         border-top-right-radius: 8px;
@@ -2022,12 +2057,12 @@ var Styles = () => {
       }
       .react-datepicker__day.react-datepicker__day--in-range {
         border-radius: 0;
-        background: rgba(18, 120, 74, 0.1);
-        color: #12784A;
+        background: var(--chakra-colors-primary-50);
+        color: #111111;
       }
       .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range,
       .react-datepicker__day.react-datepicker__day--range-end.react-datepicker__day--in-range {
-        background: #12784A;
+        background: var(--chakra-colors-primary-500);
         color: #fff;
       }
       .react-datepicker__day.react-datepicker__day--range-start.react-datepicker__day--in-range {
@@ -2047,18 +2082,45 @@ var Styles = () => {
         background-color: inherit;
       }
       .react-datepicker__day--keyboard-selected, .react-datepicker__day--keyboard-selected:hover {
-        background-color: inherit;
+        background-color: var(--chakra-colors-primary-50);
         color: inherit;
       }
       .react-datepicker__day--today, .react-datepicker__day--today:hover {
-        color: #D82F23;
+        border-radius: 2rem;
+        border-color: var(--chakra-colors-primary-500);
+        border-width: 1px;
+        line-height: 34px;
       }
-      .react-datepicker__day--today:hover {
-        background: #f0f0f0;
+      .react-datepicker__day--today:hover:not(.react-datepicker__day--in-range) {
+        background: var(--chakra-colors-neutral-200);
+        border-color:transparent;
+        color:var(--chakra-colors-black-high);
       }
       .react-datepicker__day--selected.react-datepicker__day--today {
         color: white;
-        background: #12784A;
+        background: var(--chakra-colors-primary-500);
+      }
+      .react-datepicker__aria-live {
+        position: absolute;
+        clip-path: circle(0);
+        border: 0;
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        width: 1px;
+        white-space: nowrap;
+      }
+      .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--today{
+        border-radius:0px;
+        border-color:transparent;
+        background-color:var(--chakra-colors-primary-50);
+      }
+      .react-datepicker__month-select,.react-datepicker__year-select {
+        background-color:transparent;
+        font-size:14px;
+        font-weight:600;
+        text-align:center;
       }
     `
     }
@@ -2067,9 +2129,9 @@ var Styles = () => {
 var styles_default = Styles;
 
 // src/components/datepicker/components/time-input.tsx
-import { Flex as Flex2, Input, InputGroup as InputGroup3, InputRightAddon as InputRightAddon3, Text as Text5 } from "@chakra-ui/react";
+import { Flex as Flex3, Input, InputGroup as InputGroup3, InputRightAddon as InputRightAddon3, Text as Text5 } from "@chakra-ui/react";
 import React6 from "react";
-import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var TimeInput = ({ value, onChange, label, rightAddon }) => {
   const [time, setTime] = React6.useState(value || "00:00");
   const handleChange = (e) => {
@@ -2077,11 +2139,26 @@ var TimeInput = ({ value, onChange, label, rightAddon }) => {
     setTime(((_a = e.target) == null ? void 0 : _a.value) || "00:00");
     if (onChange) onChange(((_b = e.target) == null ? void 0 : _b.value) || "00:00");
   };
-  return /* @__PURE__ */ jsxs10(Flex2, { flexDir: "column", alignItems: "center", justifyContent: "center", p: 4, pt: 0, children: [
-    /* @__PURE__ */ jsx25(Text5, { mb: 2, children: label }),
-    /* @__PURE__ */ jsxs10(InputGroup3, { alignItems: "center", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx25(Input, { onChange: handleChange, type: "time", value: time, "data-test-id": "CT_Component_datepicker_input_time" }),
-      rightAddon && /* @__PURE__ */ jsx25(InputRightAddon3, { children: rightAddon })
+  return /* @__PURE__ */ jsxs9(Flex3, { flexDir: "column", p: 4, pt: 0, children: [
+    /* @__PURE__ */ jsx26(Text5, { mb: 2, children: label }),
+    /* @__PURE__ */ jsxs9(InputGroup3, { alignItems: "center", borderColor: "neutral.400", children: [
+      /* @__PURE__ */ jsx26(
+        Input,
+        {
+          onChange: handleChange,
+          type: "time",
+          value: time,
+          "data-test-id": "CT_Component_datepicker_input_time",
+          flex: 1,
+          borderRadius: "sm",
+          border: "1px solid",
+          borderColor: "inherit",
+          _focusWithin: {
+            borderColor: "primary.500"
+          }
+        }
+      ),
+      rightAddon && /* @__PURE__ */ jsx26(InputRightAddon3, { children: rightAddon })
     ] })
   ] });
 };
@@ -2095,7 +2172,7 @@ TimeInput.defaultProps = {
 var time_input_default = TimeInput;
 
 // src/components/datepicker/components/datepicker.tsx
-import { Fragment, jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 var Datepicker = ({
   id: id2,
   label,
@@ -2111,31 +2188,35 @@ var Datepicker = ({
   shortMonth,
   ...props
 }) => {
-  var _a;
+  var _a, _b;
   const selected = value ? new Date(value) : void 0;
-  const dateFormat = ((_a = props.dateFormat) != null ? _a : withTime) ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd";
+  const dateFormat = ((_a = props.dateFormat) != null ? _a : withTime) ? "dd MMMM yyyy, HH:mm" : "dd MMMM yyyy";
   const getTimeProps = () => {
     if (!withTime) return {};
     return {
       timeInputLabel: "",
       showTimeInput: true,
-      customTimeInput: /* @__PURE__ */ jsx26(time_input_default, {})
+      customTimeInput: /* @__PURE__ */ jsx27(time_input_default, {})
     };
   };
-  const component = /* @__PURE__ */ jsxs11(Fragment, { children: [
-    /* @__PURE__ */ jsx26(styles_default, {}),
-    /* @__PURE__ */ jsx26(
+  const hasMultipleMonthShow = ((_b = props == null ? void 0 : props.monthsShown) != null ? _b : 1) < 2;
+  const component = /* @__PURE__ */ jsxs10(Fragment, { children: [
+    /* @__PURE__ */ jsx27(styles_default, { showHeader: !hasMultipleMonthShow }),
+    /* @__PURE__ */ jsx27(
       ReactDatePicker,
       {
         id: id2,
         name,
         selected,
-        customInput: /* @__PURE__ */ jsx26(input_field_default, { autoComplete: "off" }),
-        dateFormat,
+        customInput: /* @__PURE__ */ jsx27(input_field_default, { autoComplete: "off" }),
         showPopperArrow: false,
         calendarClassName: cx8({ inline: props.inline }),
-        showMonthDropdown: showMonth,
+        dropdownMode: "select",
+        showMonthDropdown: hasMultipleMonthShow,
+        showYearDropdown: hasMultipleMonthShow,
+        shouldCloseOnSelect: !(props.selectsRange || withTime),
         useShortMonthInDropdown: showMonth ? shortMonth : false,
+        dateFormat,
         ...getTimeProps(),
         ...props
       }
@@ -2144,16 +2225,30 @@ var Datepicker = ({
   if (props.inline) {
     return component;
   }
-  return /* @__PURE__ */ jsxs11(FormControl3, { isRequired, "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
-    label && /* @__PURE__ */ jsx26(FormLabel3, { fontSize: "text.sm", children: label }),
-    /* @__PURE__ */ jsxs11(InputGroup4, { children: [
+  return /* @__PURE__ */ jsxs10(FormControl3, { isRequired, "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
+    label && /* @__PURE__ */ jsx27(FormLabel3, { fontSize: "text.sm", children: label }),
+    /* @__PURE__ */ jsxs10(InputGroup4, { children: [
       component,
-      /* @__PURE__ */ jsxs11(InputRightElement3, { children: [
-        !value && /* @__PURE__ */ jsx26(FiCalendar, {}),
-        value && /* @__PURE__ */ jsx26(FiX, { "data-test-id": "bcpJJyCP0z_RIAGZXDU6s", onClick: onClear, cursor: "pointer" })
+      /* @__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" })
+          }
+        )
       ] })
     ] }),
-    !isError ? /* @__PURE__ */ jsx26(FormHelperText3, { fontSize: "text.xs", mt: 1, children: helperText }) : /* @__PURE__ */ jsx26(FormErrorMessage3, { fontSize: "text.xs", mt: 1, children: error })
+    !isError ? /* @__PURE__ */ jsx27(FormHelperText3, { fontSize: "text.xs", mt: 1, children: helperText }) : /* @__PURE__ */ jsx27(FormErrorMessage3, { fontSize: "text.xs", mt: 1, children: error })
   ] });
 };
 Datepicker.defaultProps = {
@@ -2171,14 +2266,14 @@ Datepicker.defaultProps = {
 var datepicker_default = Datepicker;
 
 // src/components/datepicker/components/datepicker-month/datepicker-month.tsx
-import { Box as Box13, Input as Input2 } from "@chakra-ui/react";
+import { Box as Box12, Input as Input2 } from "@chakra-ui/react";
 import { css as css2 } from "@emotion/react";
 import React7 from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var DatePickerMonth = ({ onChange, min, max, ...props }) => {
   const [date, setDate] = React7.useState(null);
-  return /* @__PURE__ */ jsx27(
-    Box13,
+  return /* @__PURE__ */ jsx28(
+    Box12,
     {
       fontSize: "12px",
       lineHeight: "18px",
@@ -2192,7 +2287,7 @@ var DatePickerMonth = ({ onChange, min, max, ...props }) => {
           width: 58px;
         }
       `,
-      children: /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx28(
         Input2,
         {
           "data-test-id": props["data-test-id"],
@@ -2230,11 +2325,11 @@ DatePickerMonth.defaultProps = {
 var datepicker_month_default = DatePickerMonth;
 
 // src/components/datepicker/components/datepicker-month/multi-datepicker-month.tsx
-import { Box as Box14 } from "@chakra-ui/react";
+import { Box as Box13 } from "@chakra-ui/react";
 import styled from "@emotion/styled";
 import React8 from "react";
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
-var MultiDateWrapper = styled(Box14)`
+import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
+var MultiDateWrapper = styled(Box13)`
   display: flex;
   align-items: center;
   width: fit-content;
@@ -2250,8 +2345,8 @@ var MultiDatePickerMonth = ({
   max = "2020-12-31"
 }) => {
   const [date, setDate] = React8.useState([null, null]);
-  return /* @__PURE__ */ jsxs12(MultiDateWrapper, { isError, children: [
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs11(MultiDateWrapper, { isError, children: [
+    /* @__PURE__ */ jsx29(
       datepicker_month_default,
       {
         "data-test-id": "CT_DatePickerMonth_StartDate",
@@ -2263,8 +2358,8 @@ var MultiDatePickerMonth = ({
         max
       }
     ),
-    /* @__PURE__ */ jsx28(Box14, { children: "-" }),
-    /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(Box13, { children: "-" }),
+    /* @__PURE__ */ jsx29(
       datepicker_month_default,
       {
         "data-test-id": "CT_DatePickerMonth_EndDate",
@@ -2287,7 +2382,7 @@ var multi_datepicker_month_default = MultiDatePickerMonth;
 
 // src/components/dialog/components/dialog.tsx
 import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text as Text6 } from "@chakra-ui/react";
-import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
 var Dialog = ({
   title,
   content,
@@ -2297,12 +2392,12 @@ var Dialog = ({
   isOverlayClickable,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs13(Modal, { ...props, children: [
-    isModalOverlay && /* @__PURE__ */ jsx29(ModalOverlay, { pointerEvents: isOverlayClickable ? "auto" : "none" }),
-    /* @__PURE__ */ jsxs13(ModalContent, { bgColor: "neutral.50", fontFamily: "Poppins", width, minW: "400px", children: [
-      /* @__PURE__ */ jsx29(ModalHeader, { bgColor: "neutral.200", py: 2, px: 4, borderTopRadius: "sm", children: /* @__PURE__ */ jsx29(Text6, { textStyle: "text.lg", fontWeight: "normal", children: title }) }),
-      /* @__PURE__ */ jsx29(ModalBody, { p: 4, textStyle: "text.md", children: content }),
-      /* @__PURE__ */ jsx29(ModalFooter, { bgColor: "neutral.200", p: 4, borderBottomRadius: "sm", children: footer })
+  return /* @__PURE__ */ jsxs12(Modal, { ...props, children: [
+    isModalOverlay && /* @__PURE__ */ jsx30(ModalOverlay, { pointerEvents: isOverlayClickable ? "auto" : "none" }),
+    /* @__PURE__ */ jsxs12(ModalContent, { bgColor: "neutral.50", fontFamily: "Poppins", width, minW: "400px", children: [
+      /* @__PURE__ */ jsx30(ModalHeader, { bgColor: "neutral.200", py: 2, px: 4, borderTopRadius: "sm", children: /* @__PURE__ */ jsx30(Text6, { textStyle: "text.lg", fontWeight: "normal", children: title }) }),
+      /* @__PURE__ */ jsx30(ModalBody, { p: 4, textStyle: "text.md", children: content }),
+      /* @__PURE__ */ jsx30(ModalFooter, { bgColor: "neutral.200", p: 4, borderBottomRadius: "sm", children: footer })
     ] })
   ] });
 };
@@ -2314,133 +2409,125 @@ Dialog.defaultProps = {
 var dialog_default = Dialog;
 
 // src/components/empty-state/components/empty-state.tsx
-import * as Icon from "@ctlyst.id/internal-icon";
+import * as Icon2 from "@ctlyst.id/internal-icon";
 
 // src/components/empty-state/components/layout.tsx
-import { Box as Box15, Button as Button2, Flex as Flex3, Text as Text7, VStack } from "@chakra-ui/react";
-import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
-var EmptyStateLayout = ({
-  icon,
-  title,
-  description,
-  buttonText,
-  maxW = 320,
-  onClick
-}) => {
+import { Box as Box14, Button as Button2, Flex as Flex4, Text as Text7, VStack } from "@chakra-ui/react";
+import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+var EmptyState = (props) => {
+  const { icon, title, description, buttonText, onClick } = props;
   const handleClick = () => {
     if (onClick) {
       onClick();
     }
   };
-  return /* @__PURE__ */ jsx30(Flex3, { align: "center", justify: "center", children: /* @__PURE__ */ jsxs14(VStack, { textAlign: "center", children: [
+  return /* @__PURE__ */ jsx31(Flex4, { align: "center", justify: "center", children: /* @__PURE__ */ jsxs13(VStack, { textAlign: "center", children: [
     icon,
-    /* @__PURE__ */ jsxs14(VStack, { spacing: 2, textAlign: "center", maxW, mt: 3, children: [
-      /* @__PURE__ */ jsx30(Text7, { textStyle: "text.lg", fontWeight: "bold", children: title }),
-      /* @__PURE__ */ jsx30(Text7, { textStyle: "text.md", color: "black.medium", children: description })
+    /* @__PURE__ */ jsxs13(VStack, { spacing: 2, textAlign: "center", mt: 3, children: [
+      /* @__PURE__ */ jsx31(Text7, { textStyle: "text.lg", fontWeight: "bold", children: title }),
+      /* @__PURE__ */ jsx31(Text7, { textStyle: "text.md", color: "black.medium", whiteSpace: "pre-wrap", children: description })
     ] }),
-    buttonText && /* @__PURE__ */ jsx30(Box15, { mt: 3, children: /* @__PURE__ */ jsx30(Button2, { size: "lg", "data-test-id": "CT_component-action-button", onClick: handleClick, children: buttonText }) })
+    buttonText && /* @__PURE__ */ jsx31(Box14, { mt: 3, children: /* @__PURE__ */ jsx31(Button2, { size: "lg", "data-test-id": "CT_component-action-button", onClick: handleClick, children: buttonText }) })
   ] }) });
 };
-var layout_default = EmptyStateLayout;
+var layout_default = EmptyState;
 
 // src/components/empty-state/components/empty-state.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-var EmptyState = () => {
-  return /* @__PURE__ */ jsx31(
-    layout_default,
-    {
-      title: "Belum ada data",
-      description: "Jika data tersedia, akan tampil di sini.",
-      icon: /* @__PURE__ */ jsx31(Icon.Folder, { size: 110 })
-    }
-  );
-};
-var EmptyStatePage = () => {
-  return /* @__PURE__ */ jsx31(
-    layout_default,
-    {
-      title: "Halaman tidak ditemukan",
-      description: "Halaman yang dituju mungkin telah berubah atau dihapus.",
-      icon: /* @__PURE__ */ jsx31(Icon.Img404, { size: 110 }),
-      buttonText: "Kembali ke Home",
-      maxW: 220
-    }
-  );
+import { jsx as jsx32 } from "react/jsx-runtime";
+var EmptyStateData = ({
+  title = "Belum ada data",
+  description = "Jika data tersedia, akan tampil di sini.",
+  icon = /* @__PURE__ */ jsx32(Icon2.ImgFolder, { size: 110 }),
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx32(layout_default, { title, description, icon, ...rest });
 };
-var EmptyStateFilter = () => {
-  return /* @__PURE__ */ jsx31(
-    layout_default,
-    {
-      title: "Halaman filter ditemukan",
-      description: "Coba ubah atau reset filter.",
-      icon: /* @__PURE__ */ jsx31(Icon.ImgNotFound, { size: 110 })
-    }
-  );
+var EmptyStatePage = ({
+  title = "Halaman tidak ditemukan",
+  description = "Halaman yang dituju mungkin\n telah berubah atau dihapus.",
+  icon = /* @__PURE__ */ jsx32(Icon2.Img404, { size: 110 }),
+  buttonText = "Kembali ke Home",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx32(layout_default, { title, description, icon, buttonText, ...rest });
 };
-var EmptyStateSearch = () => {
-  return /* @__PURE__ */ jsx31(
-    layout_default,
-    {
-      title: "Pencarian tidak ditemukan",
-      description: "Keyword yang dicari tidak ditemukan. Coba gunakan keyword lainnya.",
-      icon: /* @__PURE__ */ jsx31(Icon.ImgNotFound, { size: 110 }),
-      maxW: 300
-    }
-  );
+var EmptyStateFilter = ({
+  title = "Halaman filter tidak ditemukan",
+  description = "Coba ubah atau reset filter.",
+  icon = /* @__PURE__ */ jsx32(Icon2.ImgNotFound, { size: 110 }),
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx32(layout_default, { title, description, icon, ...rest });
 };
-var EmptyStateConnection = () => {
-  return /* @__PURE__ */ jsx31(
-    layout_default,
-    {
-      title: "Koneksi terputus",
-      description: "Silakan cek koneksi internet Anda dan coba lagi.",
-      icon: /* @__PURE__ */ jsx31(Icon.ImgLostConnection, { size: 110 }),
-      buttonText: "Coba Lagi",
-      maxW: 250
-    }
-  );
+var EmptyStateSearch = ({
+  title = "Pencarian tidak ditemukan",
+  description = "Keyword yang dicari tidak ditemukan.\n Coba gunakan keyword lainnya.",
+  icon = /* @__PURE__ */ jsx32(Icon2.ImgNotFound, { size: 110 }),
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx32(layout_default, { title, description, icon, ...rest });
 };
-var EmptyStateMaintenance = () => {
-  return /* @__PURE__ */ jsx31(
-    layout_default,
-    {
-      title: "Under maintenance",
-      description: "Maaf, sistem kami sedang dalam perbaikan. Kami akan segera kembali.",
-      icon: /* @__PURE__ */ jsx31(Icon.ImgWarning, { size: 110 })
-    }
-  );
+var EmptyStateNoConnection = ({
+  title = "Koneksi terputus",
+  description = "Silakan cek koneksi internet Anda\n dan coba lagi.",
+  icon = /* @__PURE__ */ jsx32(Icon2.ImgLostConnection, { size: 110 }),
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx32(layout_default, { title, description, icon, ...rest });
 };
-var EmptyStateNotAuthorize = () => {
-  return /* @__PURE__ */ jsx31(
-    layout_default,
-    {
-      title: "Halaman tidak dapat diakses",
-      description: "Anda tidak memiliki izin untuk mengakses halaman ini.",
-      icon: /* @__PURE__ */ jsx31(Icon.ImgWarning, { size: 110 }),
-      maxW: 400,
-      buttonText: "Kembali ke Home"
-    }
-  );
+var EmptyStateMaintenance = ({
+  title = "Sistem sedang dalam perbaikan",
+  description = "Maaf, sistem kami sedang dalam perbaikan.\n Kami akan segera kembali.",
+  icon = /* @__PURE__ */ jsx32(Icon2.ImgWarning, { size: 110 }),
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx32(layout_default, { title, description, icon, ...rest });
 };
-EmptyState.Page = EmptyStatePage;
-EmptyState.Filter = EmptyStateFilter;
-EmptyState.Search = EmptyStateSearch;
-EmptyState.Connection = EmptyStateConnection;
-EmptyState.Maintenance = EmptyStateMaintenance;
-EmptyState.NotAuthorize = EmptyStateNotAuthorize;
-var empty_state_default = EmptyState;
+var EmptyStateNotAuthorize = ({
+  title = "Halaman tidak dapat diakses",
+  description = "Anda tidak memiliki izin untuk mengakses halaman ini.",
+  icon = /* @__PURE__ */ jsx32(Icon2.ImgWarning, { size: 110 }),
+  buttonText = "Kembali ke Home",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx32(layout_default, { title, description, icon, ...rest, buttonText });
+};
+var EmptyState2 = layout_default;
+EmptyState2.Data = EmptyStateData;
+EmptyState2.Page = EmptyStatePage;
+EmptyState2.Filter = EmptyStateFilter;
+EmptyState2.Search = EmptyStateSearch;
+EmptyState2.NoConnection = EmptyStateNoConnection;
+EmptyState2.Maintenance = EmptyStateMaintenance;
+EmptyState2.NotAuthorize = EmptyStateNotAuthorize;
+var empty_state_default = EmptyState2;
 
 // src/components/header/components/header.tsx
-import { Flex as Flex5, HStack as HStack3 } from "@chakra-ui/react";
+import { Flex as Flex6, HStack as HStack3 } from "@chakra-ui/react";
 
 // src/components/header/components/logo.tsx
-import { Box as Box16, Image, useColorModeValue as useColorModeValue2 } from "@chakra-ui/react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { Box as Box15, Image as Image2, useColorModeValue as useColorModeValue2 } from "@chakra-ui/react";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Logo = ({ url, imageUrl, height }) => {
   if (url)
-    return /* @__PURE__ */ jsx32(Box16, { as: "a", href: url, cursor: "pointer", target: "_self", children: /* @__PURE__ */ jsx32(Image, { w: "100%", h: height != null ? height : 9, maxH: height != null ? height : 9, src: imageUrl, alt: imageUrl }) });
-  return /* @__PURE__ */ jsx32(Image, { w: "100%", h: height != null ? height : 9, maxH: height != null ? height : 9, src: imageUrl, alt: imageUrl });
+    return /* @__PURE__ */ jsx33(Box15, { as: "a", href: url, cursor: "pointer", target: "_self", children: /* @__PURE__ */ jsx33(Image2, { w: "100%", h: height != null ? height : 9, maxH: height != null ? height : 9, src: imageUrl, alt: imageUrl }) });
+  return /* @__PURE__ */ jsx33(Image2, { w: "100%", h: height != null ? height : 9, maxH: height != null ? height : 9, src: imageUrl, alt: imageUrl });
 };
+var XMSLogo = () => /* @__PURE__ */ jsx33(
+  Image2,
+  {
+    height: 8,
+    src: useColorModeValue2("https://assets.voila.id/xms/logo-xms.jpg", "https://assets.voila.id/xms/logo-xms-dark.png")
+  }
+);
+var VoilaLogo = () => /* @__PURE__ */ jsx33(
+  Image2,
+  {
+    src: "https://assets.voila.id/xms/logo-voila-black.png?v=1",
+    filter: useColorModeValue2("none", "invert(1)"),
+    maxW: 24
+  }
+);
 Logo.defaultProps = {
   url: void 0,
   height: void 0
@@ -2449,8 +2536,8 @@ Logo.defaultProps = {
 // src/components/header/components/profile.tsx
 import {
   Avatar,
-  Box as Box17,
-  Flex as Flex4,
+  Box as Box16,
+  Flex as Flex5,
   HStack as HStack2,
   Popover,
   PopoverArrow,
@@ -2458,78 +2545,127 @@ import {
   PopoverContent,
   PopoverTrigger,
   Text as Text8,
-  useColorModeValue as useColorModeValue3,
   useDisclosure,
   VStack as VStack2
 } from "@chakra-ui/react";
 import { FiPower } from "react-icons/fi";
-import { Fragment as Fragment2, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
-var Profile = ({ color: color2, brandColor, data, onLogout }) => {
+
+// src/components/nav-item/components/nav-item.tsx
+import { Link as Link2 } from "@chakra-ui/react";
+import { cx as cx9 } from "@chakra-ui/shared-utils";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var NavItem = ({ children, isActive, isChild, isDisabled, ...props }) => {
+  return /* @__PURE__ */ jsx34(
+    Link2,
+    {
+      "data-test-id": props["data-test-id"],
+      opacity: isDisabled ? "0.3" : "initial",
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      h: "7.5",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      w: "full",
+      p: "2",
+      pl: isChild ? "7" : "2",
+      color: isActive ? "primary.500" : "black.high",
+      bg: isActive ? "primary.100" : "white",
+      className: cx9("catalyst-nav-item", props.className),
+      textStyle: "text.xs",
+      fontWeight: isActive ? "semibold" : "regular",
+      rounded: "sm",
+      _active: isDisabled ? {} : {
+        bg: "primary.100"
+      },
+      _hover: isDisabled ? {} : {
+        textDecoration: "none",
+        bg: isActive ? "primary.100" : "primary.50"
+      },
+      ...props,
+      onClick: isDisabled ? void 0 : props.onClick,
+      children
+    }
+  );
+};
+NavItem.displayName = "NavItem";
+NavItem.defaultProps = {
+  isActive: false,
+  isChild: false,
+  isDisabled: false,
+  "data-test-id": void 0
+};
+
+// src/components/header/components/profile.tsx
+import { Fragment as Fragment2, jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+var Profile = ({ color: color2, brandColor, data, badgeStyle, children, onLogout, ...props }) => {
   var _a;
   const { isOpen, onToggle, onClose } = useDisclosure();
-  return /* @__PURE__ */ jsxs15(Popover, { placement: "bottom-end", isOpen, onClose, children: [
-    /* @__PURE__ */ jsx33(
-      Box17,
+  return /* @__PURE__ */ jsxs14(Popover, { placement: "bottom-end", isOpen, onClose, children: [
+    /* @__PURE__ */ jsx35(
+      Box16,
       {
-        "data-test-id": "WE0UYbA93LOZy6S09IhDO",
+        "data-test-id": "CTA_Navbar_Profile_wrapper",
         as: "button",
         cursor: "pointer",
-        minW: 0,
-        _hover: { textDecor: "none" },
-        m: 0,
+        w: "fit-content",
+        _hover: {
+          textDecor: "none",
+          ".catalyst-header-avatar": {
+            border: "2px solid",
+            borderColor: "primary.100"
+          }
+        },
         onClick: onToggle,
         color: color2,
-        children: /* @__PURE__ */ jsxs15(HStack2, { children: [
-          /* @__PURE__ */ jsxs15(VStack2, { alignItems: "flex-end", spacing: 0, ml: "2", color: color2, children: [
-            /* @__PURE__ */ jsx33(Text8, { textStyle: "text.xs", mb: 1, children: data == null ? void 0 : data.email }),
-            /* @__PURE__ */ jsxs15(Flex4, { alignItems: "center", children: [
-              (data == null ? void 0 : data.userRole) && /* @__PURE__ */ jsx33(Text8, { textStyle: "text.xs", children: (data == null ? void 0 : data.userRole) || "user" }),
-              /* @__PURE__ */ jsx33(Box17, { h: "3", mx: "1", borderLeft: "1px solid", borderColor: "neutral.400" }),
-              typeof (data == null ? void 0 : data.office) === "object" ? /* @__PURE__ */ jsxs15(Fragment2, { children: [
-                /* @__PURE__ */ jsx33(Text8, { textStyle: "text.xs", children: data.office[0] }),
-                data.office.length > 1 && /* @__PURE__ */ jsxs15(badge_default, { ml: "1", pill: true, variant: "neutral-light", children: [
-                  data.office.length - 1,
-                  "+"
-                ] })
-              ] }) : /* @__PURE__ */ jsx33(Text8, { textStyle: "text.xs", children: (data == null ? void 0 : data.office) || "office" })
+        ...props,
+        children: /* @__PURE__ */ jsxs14(HStack2, { children: [
+          /* @__PURE__ */ jsxs14(VStack2, { alignItems: "flex-end", spacing: "0", ml: "2", color: color2, children: [
+            /* @__PURE__ */ jsx35(Text8, { textStyle: "text.xs", mb: "1", children: data == null ? void 0 : data.email }),
+            /* @__PURE__ */ jsxs14(Flex5, { alignItems: "center", children: [
+              (data == null ? void 0 : data.userRole) && /* @__PURE__ */ jsxs14(Fragment2, { children: [
+                /* @__PURE__ */ jsx35(Text8, { textStyle: "text.xs", children: (data == null ? void 0 : data.userRole) || "user" }),
+                /* @__PURE__ */ jsx35(
+                  Box16,
+                  {
+                    className: "catalyst_header-profile-divider",
+                    h: "3",
+                    mx: "1",
+                    borderLeft: "1px solid",
+                    borderColor: "neutral.400"
+                  }
+                )
+              ] }),
+              typeof (data == null ? void 0 : data.office) === "object" ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
+                /* @__PURE__ */ jsx35(Text8, { textStyle: "text.xs", children: data.office[0] }),
+                data.office.length > 1 && /* @__PURE__ */ jsxs14(
+                  badge_default,
+                  {
+                    ml: "1",
+                    pill: true,
+                    variant: "neutral-light",
+                    boxSize: "4.5",
+                    justifyContent: "center",
+                    p: "0.5",
+                    ...badgeStyle,
+                    children: [
+                      data.office.length - 1,
+                      "+"
+                    ]
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx35(Text8, { textStyle: "text.xs", children: (data == null ? void 0 : data.office) || "office" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx33(PopoverTrigger, { children: /* @__PURE__ */ jsx33(
-            Avatar,
-            {
-              size: "sm",
-              bg: brandColor,
-              color: "white",
-              name: (_a = data == null ? void 0 : data.name) != null ? _a : data == null ? void 0 : data.email,
-              border: "2px solid",
-              _hover: {
-                borderColor: "primary.50"
-              }
-            }
-          ) })
+          /* @__PURE__ */ jsx35(PopoverTrigger, { children: /* @__PURE__ */ jsx35(Box16, { border: "2px solid", borderColor: "transparent", className: "catalyst-header-avatar", rounded: "full", children: /* @__PURE__ */ jsx35(Avatar, { size: "sm", bg: brandColor, color: "white", name: (_a = data == null ? void 0 : data.name) != null ? _a : data == null ? void 0 : data.email }) }) })
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs15(PopoverContent, { bg: "white", maxW: 200, children: [
-      /* @__PURE__ */ jsx33(PopoverArrow, { bg: "white" }),
-      /* @__PURE__ */ jsx33(PopoverBody, { p: 1, children: /* @__PURE__ */ jsxs15(
-        Flex4,
-        {
-          "data-test-id": "gA7F9pucPX_Q3_dkgXIYZ",
-          alignItems: "center",
-          px: 3,
-          py: 2,
-          borderRadius: "sm",
-          cursor: "pointer",
-          _hover: { bg: useColorModeValue3("primary.500", "mirage.900"), color: "white" },
-          onClick: onLogout,
-          textStyle: "text.xs",
-          children: [
-            /* @__PURE__ */ jsx33(FiPower, {}),
-            /* @__PURE__ */ jsx33(Text8, { ml: 2, children: "Logout" })
-          ]
-        }
-      ) })
+    children || /* @__PURE__ */ jsxs14(PopoverContent, { bg: "white", maxW: 200, children: [
+      /* @__PURE__ */ jsx35(PopoverArrow, { bg: "white" }),
+      /* @__PURE__ */ jsx35(PopoverBody, { py: "1", px: "0", children: /* @__PURE__ */ jsx35(NavItem, { "data-test-id": "CTA_Navbar_logout-button", onClick: onLogout, rounded: "none", px: "4", children: /* @__PURE__ */ jsxs14(Box16, { display: "flex", alignItems: "center", children: [
+        /* @__PURE__ */ jsx35(FiPower, {}),
+        /* @__PURE__ */ jsx35(Text8, { ml: "2", children: "Logout" })
+      ] }) }) })
     ] })
   ] });
 };
@@ -2537,22 +2673,21 @@ Profile.defaultProps = {
   brandColor: "primary.500",
   data: void 0,
   onLogout: void 0,
-  color: void 0
+  badgeStyle: void 0
 };
-var profile_default = Profile;
 
 // src/components/header/components/switch-mode.tsx
-import { Box as Box18, useColorMode as useColorMode2 } from "@chakra-ui/react";
+import { Box as Box17, useColorMode as useColorMode2 } from "@chakra-ui/react";
 import { FiMoon, FiSun } from "react-icons/fi";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var SwitchMode = () => {
   const { colorMode, toggleColorMode } = useColorMode2();
-  return /* @__PURE__ */ jsx34(Box18, { "data-test-id": "rhYuTDCiWkFqr96upiEEh", mx: 5, onClick: toggleColorMode, cursor: "pointer", children: colorMode === "light" ? /* @__PURE__ */ jsx34(FiMoon, { size: 20 }) : /* @__PURE__ */ jsx34(FiSun, { size: 20 }) });
+  return /* @__PURE__ */ jsx36(Box17, { "data-test-id": "rhYuTDCiWkFqr96upiEEh", mx: 5, onClick: toggleColorMode, cursor: "pointer", children: colorMode === "light" ? /* @__PURE__ */ jsx36(FiMoon, { size: 20 }) : /* @__PURE__ */ jsx36(FiSun, { size: 20 }) });
 };
 var switch_mode_default = SwitchMode;
 
 // src/components/header/components/version.tsx
-import { Box as Box19 } from "@chakra-ui/react";
+import { Box as Box18 } from "@chakra-ui/react";
 
 // src/components/header/utils/formatter.ts
 function environmentName(env2) {
@@ -2567,22 +2702,30 @@ function environmentName(env2) {
 }
 
 // src/components/header/components/version.tsx
-import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
-var Version = ({ hideEnv, version, environment, onOpenModalRelease, versionStyle }) => /* @__PURE__ */ jsxs16(Fragment3, { children: [
-  version && /* @__PURE__ */ jsx35(
+import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+var Version = ({
+  hideEnv,
+  version,
+  environment,
+  onOpenModalRelease,
+  versionStyle
+}) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
+  typeof version === "string" ? /* @__PURE__ */ jsx37(
     badge_default,
     {
+      "data-test-id": "CTA_header-version-badge",
       fontSize: "8px",
-      "data-test-id": "dzl3esjhCphobaaIXpiUE",
       variant: "neutral-light",
+      px: "2",
+      py: "px",
       onClick: onOpenModalRelease,
       cursor: onOpenModalRelease ? "pointer" : "auto",
       ...versionStyle,
       children: version
     }
-  ),
-  !hideEnv && environmentName(environment) !== null && version && /* @__PURE__ */ jsx35(
-    Box19,
+  ) : version,
+  !hideEnv && environmentName(environment) !== null && version && /* @__PURE__ */ jsx37(
+    Box18,
     {
       background: "primary.50",
       color: "primary.500",
@@ -2602,10 +2745,9 @@ Version.defaultProps = {
   onOpenModalRelease: void 0,
   versionStyle: void 0
 };
-var version_default = Version;
 
 // src/components/header/components/header.tsx
-import { jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var Header = ({
   brandColor,
   data,
@@ -2623,8 +2765,8 @@ var Header = ({
   bg = "white",
   versionStyle,
   ...props
-}) => /* @__PURE__ */ jsx36(Flex5, { minH: 15, bg, shadow: "raised", px: 6, py: 3, alignItems: "center", ...props, children: /* @__PURE__ */ jsxs17(
-  Flex5,
+}) => /* @__PURE__ */ jsx38(Flex6, { minH: 15, bg, shadow: "raised", px: 6, py: 3, alignItems: "center", ...props, children: /* @__PURE__ */ jsxs16(
+  Flex6,
   {
     h: "auto",
     w: "full",
@@ -2632,14 +2774,14 @@ var Header = ({
     justifyContent: !mainLogo ? "flex-end" : "space-between",
     pos: "relative",
     children: [
-      mainLogo && /* @__PURE__ */ jsxs17(Flex5, { alignItems: "center", children: [
-        /* @__PURE__ */ jsx36(Logo, { url: urlLogo, imageUrl: mainLogo, height: mainLogoSize }),
+      mainLogo && /* @__PURE__ */ jsxs16(Flex6, { alignItems: "center", children: [
+        /* @__PURE__ */ jsx38(Logo, { url: urlLogo, imageUrl: mainLogo, height: mainLogoSize }),
         children && children
       ] }),
-      centerLogo && /* @__PURE__ */ jsxs17(HStack3, { w: "fit-content", spacing: 2, alignItems: "center", pos: "absolute", left: "50%", transform: "translate(-50%,0)", children: [
-        /* @__PURE__ */ jsx36(Logo, { url: urlLogo, imageUrl: centerLogo, height: centerLogoSize }),
-        /* @__PURE__ */ jsx36(
-          version_default,
+      centerLogo && /* @__PURE__ */ jsxs16(HStack3, { w: "fit-content", spacing: 2, alignItems: "center", pos: "absolute", left: "50%", transform: "translate(-50%,0)", children: [
+        /* @__PURE__ */ jsx38(Logo, { url: urlLogo, imageUrl: centerLogo, height: centerLogoSize }),
+        /* @__PURE__ */ jsx38(
+          Version,
           {
             hideEnv,
             version: data == null ? void 0 : data.version,
@@ -2649,9 +2791,9 @@ var Header = ({
           }
         )
       ] }),
-      profile || /* @__PURE__ */ jsxs17(Flex5, { alignItems: "center", children: [
-        !hideSwitchMode && /* @__PURE__ */ jsx36(switch_mode_default, {}),
-        /* @__PURE__ */ jsx36(profile_default, { color: props.color, brandColor, data, onLogout })
+      profile || /* @__PURE__ */ jsxs16(Flex6, { alignItems: "center", children: [
+        !hideSwitchMode && /* @__PURE__ */ jsx38(switch_mode_default, {}),
+        /* @__PURE__ */ jsx38(Profile, { color: props.color, brandColor, data, onLogout })
       ] })
     ]
   }
@@ -2671,21 +2813,44 @@ Header.defaultProps = {
   profile: void 0,
   versionStyle: void 0
 };
-var header_default = Header;
+
+// src/components/header/components/navbar.tsx
+import { Flex as Flex7 } from "@chakra-ui/react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+var Navbar = ({ bg = "white", children, ...props }) => {
+  return /* @__PURE__ */ jsx39(
+    Flex7,
+    {
+      minH: "15",
+      h: "15",
+      w: "full",
+      bg,
+      shadow: "raised",
+      px: 6,
+      py: 2,
+      alignItems: "center",
+      position: "relative",
+      justifyContent: "space-between",
+      ...props,
+      children
+    }
+  );
+};
+Navbar.displayName = "Navbar";
 
 // src/components/image/index.ts
-import { Icon as Icon2, IconProps, Image as Image2, ImageProps } from "@chakra-ui/react";
+import { Icon as Icon3, IconProps, Image as Image3, ImageProps } from "@chakra-ui/react";
 
 // src/components/layouting/index.ts
 import {
-  Box as Box20,
+  Box as Box19,
   BoxProps,
   Center,
   Container,
   ContainerProps,
   Divider,
   DividerProps,
-  Flex as Flex6,
+  Flex as Flex8,
   FlexProps,
   Grid,
   GridItem,
@@ -2708,13 +2873,13 @@ import { List, ListIcon, ListItem, ListItemProps, ListProps, OrderedList, Unorde
 
 // src/components/modal/components/modal-back-button.tsx
 import { ChevronLeftIcon } from "@chakra-ui/icons";
-import { IconButton as IconButton3 } from "@chakra-ui/react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { IconButton as IconButton5 } from "@chakra-ui/react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var ModalBackButton = ({ onClick }) => {
-  return /* @__PURE__ */ jsx37(
-    IconButton3,
+  return /* @__PURE__ */ jsx40(
+    IconButton5,
     {
-      icon: /* @__PURE__ */ jsx37(ChevronLeftIcon, { w: "4.5", h: "4.5" }),
+      icon: /* @__PURE__ */ jsx40(ChevronLeftIcon, { w: "4.5", h: "4.5" }),
       size: "sm",
       minW: "6",
       h: "6",
@@ -2732,20 +2897,20 @@ var ModalBackButton = ({ onClick }) => {
 var modal_back_button_default = ModalBackButton;
 
 // src/components/modal/components/modal-body.tsx
-import { ModalBody as ChakraModalBody, useColorModeValue as useColorModeValue4 } from "@chakra-ui/react";
+import { ModalBody as ChakraModalBody, useColorModeValue as useColorModeValue3 } from "@chakra-ui/react";
 import React9 from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var ModalBody2 = React9.forwardRef(({ children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx38(ChakraModalBody, { px: 4, py: 2, ref, background: useColorModeValue4("white", "mirage.900"), ...rest, children });
+  return /* @__PURE__ */ jsx41(ChakraModalBody, { px: 4, py: 2, ref, background: useColorModeValue3("white", "mirage.900"), ...rest, children });
 });
 var modal_body_default = ModalBody2;
 
 // src/components/modal/components/modal-close-button.tsx
-import { ModalCloseButton as ChakraModalCloseButton, useColorModeValue as useColorModeValue5 } from "@chakra-ui/react";
+import { ModalCloseButton as ChakraModalCloseButton, useColorModeValue as useColorModeValue4 } from "@chakra-ui/react";
 import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var ModalCloseButton = forwardRef9((props, ref) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx42(
     ChakraModalCloseButton,
     {
       ref,
@@ -2753,7 +2918,7 @@ var ModalCloseButton = forwardRef9((props, ref) => {
       right: 2,
       size: "sm",
       "data-test-id": "modal-close-button",
-      background: useColorModeValue5("neutral.50", "mirage.900"),
+      background: useColorModeValue4("neutral.50", "mirage.900"),
       ...props
     }
   );
@@ -2761,15 +2926,15 @@ var ModalCloseButton = forwardRef9((props, ref) => {
 var modal_close_button_default = ModalCloseButton;
 
 // src/components/modal/components/modal-footer.tsx
-import { ModalFooter as ChakraModalFooter, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
+import { ModalFooter as ChakraModalFooter, useColorModeValue as useColorModeValue5 } from "@chakra-ui/react";
 import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var ModalFooter2 = forwardRef10(({ children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx43(
     ChakraModalFooter,
     {
       ref,
-      background: useColorModeValue6("neutral.200", "mirage.900"),
+      background: useColorModeValue5("neutral.200", "mirage.900"),
       borderBottomRadius: "sm",
       ...rest,
       children
@@ -2779,15 +2944,15 @@ var ModalFooter2 = forwardRef10(({ children, ...rest }, ref) => {
 var modal_footer_default = ModalFooter2;
 
 // src/components/modal/components/modal-header.tsx
-import { ModalHeader as ChakraModalHeader, useColorModeValue as useColorModeValue7 } from "@chakra-ui/react";
+import { ModalHeader as ChakraModalHeader, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var ModalHeader2 = forwardRef11(({ children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx44(
     ChakraModalHeader,
     {
       ref,
-      background: useColorModeValue7("neutral.200", "mirage.900"),
+      background: useColorModeValue6("neutral.200", "mirage.900"),
       borderTopRadius: "sm",
       fontSize: "text.lg",
       fontWeight: "400",
@@ -2838,90 +3003,45 @@ import {
   useModalStyles
 } from "@chakra-ui/react";
 
-// src/components/nav-item/components/nav-item.tsx
-import { Link as Link2 } from "@chakra-ui/react";
-import { cx as cx9 } from "@chakra-ui/shared-utils";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var NavItem = ({ children, isActive, isChild, isDisabled, ...props }) => {
-  return /* @__PURE__ */ jsx42(
-    Link2,
-    {
-      "data-test-id": props["data-test-id"],
-      opacity: isDisabled ? "0.3" : "initial",
-      cursor: isDisabled ? "not-allowed" : "pointer",
-      h: "7.5",
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      w: "full",
-      p: "2",
-      pl: isChild ? "7" : "2",
-      color: isActive ? "primary.500" : "black.high",
-      bg: isActive ? "primary.100" : "white",
-      className: cx9("catalyst-nav-item", props.className),
-      textStyle: "text.xs",
-      fontWeight: isActive ? "semibold" : "regular",
-      rounded: "sm",
-      _active: isDisabled ? {} : {
-        bg: "primary.100"
-      },
-      _hover: isDisabled ? {} : {
-        textDecoration: "none",
-        bg: isActive ? "primary.100" : "primary.50"
-      },
-      ...props,
-      onClick: isDisabled ? void 0 : props.onClick,
-      children
-    }
-  );
-};
-NavItem.displayName = "NavItem";
-NavItem.defaultProps = {
-  isActive: false,
-  isChild: false,
-  isDisabled: false,
-  "data-test-id": void 0
-};
-
 // src/components/navigation/components/navigation.tsx
 import {
-  Box as Box22,
+  Box as Box21,
   Button as Button3,
-  Flex as Flex7,
+  Flex as Flex9,
   Link as Link3,
   Popover as Popover2,
   PopoverContent as PopoverContent2,
   PopoverTrigger as PopoverTrigger2,
   Portal,
   Text as Text9,
-  useColorModeValue as useColorModeValue8
+  useColorModeValue as useColorModeValue7
 } from "@chakra-ui/react";
-import * as Icon4 from "@ctlyst.id/internal-icon";
+import * as Icon5 from "@ctlyst.id/internal-icon";
 import { css as css3 } from "@emotion/react";
 
 // src/components/navigation/components/mapping-icon.tsx
-import * as Icon3 from "@ctlyst.id/internal-icon";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import * as Icon4 from "@ctlyst.id/internal-icon";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var mappingIcon = /* @__PURE__ */ new Map([
-  ["Order", /* @__PURE__ */ jsx43(Icon3.ShoppingBag, { size: 4, color: "inherit" }, "order")],
-  ["Fulfillment", /* @__PURE__ */ jsx43(Icon3.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
-  ["Transfer Stock", /* @__PURE__ */ jsx43(Icon3.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
-  ["Stock", /* @__PURE__ */ jsx43(Icon3.Box, { size: 4, color: "inherit" }, "stock")],
-  ["Product Database", /* @__PURE__ */ jsx43(Icon3.Layers, { size: 4, color: "inherit" }, "product-database")],
-  ["Purchasing", /* @__PURE__ */ jsx43(Icon3.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
-  ["Reseller", /* @__PURE__ */ jsx43(Icon3.Users, { size: 4, color: "inherit" }, "reseller")],
-  ["Retur", /* @__PURE__ */ jsx43(Icon3.RotateCcw, { size: 4, color: "inherit" }, "retur")],
-  ["Other", /* @__PURE__ */ jsx43(Icon3.Settings, { size: 4, color: "inherit" }, "other")],
-  ["Content", /* @__PURE__ */ jsx43(Icon3.Layout, { size: 4, color: "inherit" }, "content")],
-  ["Customer", /* @__PURE__ */ jsx43(Icon3.HelpCircle, { size: 4, color: "inherit" }, "content")],
-  ["Voucher", /* @__PURE__ */ jsx43(Icon3.Gift, { size: 4, color: "inherit" }, "content")]
+  ["Order", /* @__PURE__ */ jsx45(Icon4.ShoppingBag, { size: 4, color: "inherit" }, "order")],
+  ["Fulfillment", /* @__PURE__ */ jsx45(Icon4.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
+  ["Transfer Stock", /* @__PURE__ */ jsx45(Icon4.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
+  ["Stock", /* @__PURE__ */ jsx45(Icon4.Box, { size: 4, color: "inherit" }, "stock")],
+  ["Product Database", /* @__PURE__ */ jsx45(Icon4.Layers, { size: 4, color: "inherit" }, "product-database")],
+  ["Purchasing", /* @__PURE__ */ jsx45(Icon4.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
+  ["Reseller", /* @__PURE__ */ jsx45(Icon4.Users, { size: 4, color: "inherit" }, "reseller")],
+  ["Retur", /* @__PURE__ */ jsx45(Icon4.RotateCcw, { size: 4, color: "inherit" }, "retur")],
+  ["Other", /* @__PURE__ */ jsx45(Icon4.Settings, { size: 4, color: "inherit" }, "other")],
+  ["Content", /* @__PURE__ */ jsx45(Icon4.Layout, { size: 4, color: "inherit" }, "content")],
+  ["Customer", /* @__PURE__ */ jsx45(Icon4.HelpCircle, { size: 4, color: "inherit" }, "content")],
+  ["Voucher", /* @__PURE__ */ jsx45(Icon4.Gift, { size: 4, color: "inherit" }, "content")]
 ]);
 
 // src/components/navigation/components/navigation.tsx
-import { Fragment as Fragment4, jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
 var Navigation = ({ navigations, activePath, as, host, ...props }) => {
-  return /* @__PURE__ */ jsx44(Box22, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx44(
-    Flex7,
+  return /* @__PURE__ */ jsx46(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx46(
+    Flex9,
     {
       bg: "white",
       w: "full",
@@ -2935,8 +3055,8 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
       children: navigations == null ? void 0 : navigations.map((navigation) => {
         const isActive = activePath.startsWith(navigation.navLink || "");
         const activeBg = isActive ? "primary.500" : void 0;
-        return /* @__PURE__ */ jsx44(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs18(Fragment4, { children: [
-          /* @__PURE__ */ jsx44(PopoverTrigger2, { children: /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx46(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
+          /* @__PURE__ */ jsx46(PopoverTrigger2, { children: /* @__PURE__ */ jsx46(
             Button3,
             {
               h: 7.5,
@@ -2950,14 +3070,14 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
               backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
               color: isActive ? "primary.50" : "black.high",
               leftIcon: mappingIcon.get(navigation.title),
-              rightIcon: /* @__PURE__ */ jsx44(Icon4.ChevronDown, { size: 4, color: "inherit" }),
+              rightIcon: /* @__PURE__ */ jsx46(Icon5.ChevronDown, { size: 4, color: "inherit" }),
               children: navigation.title
             }
           ) }),
-          navigation.children && /* @__PURE__ */ jsx44(Portal, { children: /* @__PURE__ */ jsx44(Box22, { zIndex: "popover", children: /* @__PURE__ */ jsx44(
+          navigation.children && /* @__PURE__ */ jsx46(Portal, { children: /* @__PURE__ */ jsx46(Box21, { zIndex: "popover", children: /* @__PURE__ */ jsx46(
             PopoverContent2,
             {
-              bg: useColorModeValue8("white", "ebony-clay.800"),
+              bg: useColorModeValue7("white", "ebony-clay.800"),
               maxW: 250,
               border: "none",
               borderRadius: "md",
@@ -2966,7 +3086,7 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                 const link = navHost ? `${navHost}${navLink}` : navLink;
                 const isLocalLink = host === navHost;
                 const isActiveSub = activePath === navLink;
-                return /* @__PURE__ */ jsx44(
+                return /* @__PURE__ */ jsx46(
                   Link3,
                   {
                     as: isLocalLink ? as : void 0,
@@ -2974,8 +3094,8 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                     _hover: {
                       textDecoration: "none"
                     },
-                    children: /* @__PURE__ */ jsxs18(
-                      Box22,
+                    children: /* @__PURE__ */ jsxs17(
+                      Box21,
                       {
                         display: "flex",
                         position: "relative",
@@ -2983,8 +3103,8 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         cursor: "pointer",
                         transition: "padding 0.35s ease 0s",
                         _hover: {
-                          backgroundColor: useColorModeValue8("dove-gray.50", "mirage.900"),
-                          color: useColorModeValue8("primary.500", "dove-gray.600"),
+                          backgroundColor: useColorModeValue7("dove-gray.50", "mirage.900"),
+                          color: useColorModeValue7("primary.500", "dove-gray.600"),
                           px: 5,
                           py: 4,
                           _first: { borderTopRadius: "md" },
@@ -2998,9 +3118,9 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         py: 4,
                         children: [
                           mappingIcon.get(navigation.title),
-                          /* @__PURE__ */ jsx44(Text9, { fontSize: "text.sm", ml: 3, children: title }),
-                          isActiveSub && /* @__PURE__ */ jsx44(
-                            Box22,
+                          /* @__PURE__ */ jsx46(Text9, { fontSize: "text.sm", ml: 3, children: title }),
+                          isActiveSub && /* @__PURE__ */ jsx46(
+                            Box21,
                             {
                               width: 0.5,
                               height: 8,
@@ -3033,9 +3153,9 @@ Navigation.defaultProps = {
 var navigation_default = Navigation;
 
 // src/components/navigation/components/navigation-bar.tsx
-import { Box as Box23, Button as Button4, Flex as Flex8, Link as Link4, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text10 } from "@chakra-ui/react";
-import * as Icon5 from "@ctlyst.id/internal-icon";
-import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Box as Box22, Button as Button4, Flex as Flex10, Link as Link4, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text10 } from "@chakra-ui/react";
+import * as Icon6 from "@ctlyst.id/internal-icon";
+import { Fragment as Fragment5, jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
 var NavigationBar = ({
   navigations,
   isFetched,
@@ -3050,8 +3170,8 @@ var NavigationBar = ({
     }
     return subMenu.navHost + subMenu.navLink;
   };
-  return /* @__PURE__ */ jsx45(Box23, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx45(
-    Flex8,
+  return /* @__PURE__ */ jsx47(Box22, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx47(
+    Flex10,
     {
       bg: "white",
       w: "full",
@@ -3067,8 +3187,8 @@ var NavigationBar = ({
         const childMenu = item.children.filter((subMenu) => asPath == null ? void 0 : asPath.includes(subMenu.navLink));
         const isActive = pathname == null ? void 0 : pathname.startsWith((_a = childMenu[0]) == null ? void 0 : _a.navLink);
         const activeBg = isActive ? "primary.500" : void 0;
-        return /* @__PURE__ */ jsx45(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs19(Fragment5, { children: [
-          /* @__PURE__ */ jsx45(PopoverTrigger3, { children: /* @__PURE__ */ jsx45(
+        return /* @__PURE__ */ jsx47(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          /* @__PURE__ */ jsx47(PopoverTrigger3, { children: /* @__PURE__ */ jsx47(
             Button4,
             {
               h: 7.5,
@@ -3082,11 +3202,11 @@ var NavigationBar = ({
               backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
               color: isActive ? "primary.50" : "black.high",
               leftIcon: mappingIcon2.get(item.title),
-              rightIcon: /* @__PURE__ */ jsx45(Icon5.ChevronDown, { size: 4, color: "inherit" }),
+              rightIcon: /* @__PURE__ */ jsx47(Icon6.ChevronDown, { size: 4, color: "inherit" }),
               children: item.title
             }
           ) }),
-          item.children && /* @__PURE__ */ jsx45(PopoverContent3, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs19(
+          item.children && /* @__PURE__ */ jsx47(PopoverContent3, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
             Link4,
             {
               href: urlMenu(subMenu),
@@ -3104,7 +3224,7 @@ var NavigationBar = ({
               "data-test-id": `CT_component_navigation_link-${item.id}`,
               children: [
                 mappingIcon2.get(item.title),
-                /* @__PURE__ */ jsx45(Text10, { textStyle: "text-sm", ml: 3, children: subMenu.title })
+                /* @__PURE__ */ jsx47(Text10, { textStyle: "text-sm", ml: 3, children: subMenu.title })
               ]
             },
             subMenu.id
@@ -3121,17 +3241,17 @@ var navigation_bar_default = NavigationBar;
 
 // src/components/pagination/components/pagination.tsx
 import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon } from "@chakra-ui/icons";
-import { Box as Box24, Text as Text11, useColorModeValue as useColorModeValue10 } from "@chakra-ui/react";
+import { Box as Box23, Text as Text11, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
 
 // src/components/pagination/components/pagination-button.tsx
-import { Button as Button5, forwardRef as forwardRef12, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { Button as Button5, forwardRef as forwardRef12, useColorModeValue as useColorModeValue8 } from "@chakra-ui/react";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var PaginationButton = forwardRef12(({ className, style, isActive, children, ...rest }, ref) => {
-  const btnBg = useColorModeValue9("neutral.300", "mirage.900");
-  const btnColor = useColorModeValue9("black.high", "primary.300");
-  const btnNotActiveBg = useColorModeValue9("secondary.50", "primary.500");
-  const btnNotActiveColor = useColorModeValue9("primary.500", "white");
-  return /* @__PURE__ */ jsx46(
+  const btnBg = useColorModeValue8("neutral.300", "mirage.900");
+  const btnColor = useColorModeValue8("black.high", "primary.300");
+  const btnNotActiveBg = useColorModeValue8("secondary.50", "primary.500");
+  const btnNotActiveColor = useColorModeValue8("primary.500", "white");
+  return /* @__PURE__ */ jsx48(
     Button5,
     {
       "data-test-id": "Pagination-Button",
@@ -3153,7 +3273,7 @@ var PaginationButton = forwardRef12(({ className, style, isActive, children, ...
         color: btnNotActiveColor
       } : {},
       _disabled: {
-        background: useColorModeValue9("neutral.300", "mirage.900"),
+        background: useColorModeValue8("neutral.300", "mirage.900"),
         color: "neutral.600",
         pointerEvents: "none"
       },
@@ -3170,15 +3290,15 @@ var pagination_button_default = PaginationButton;
 
 // src/components/pagination/components/pagination-button-trigger.tsx
 import { VisuallyHidden } from "@chakra-ui/react";
-import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs19 } from "react/jsx-runtime";
 var PaginationButtonTrigger = ({
   color: color2,
   isDisabled,
   onClick,
   visuallyHidden,
   icon
-}) => /* @__PURE__ */ jsxs20(pagination_button_default, { "data-test-id": "DLVCc_fBK35spHm5WxjcJ", color: color2, isDisabled, onClick, children: [
-  /* @__PURE__ */ jsx47(VisuallyHidden, { children: visuallyHidden }),
+}) => /* @__PURE__ */ jsxs19(pagination_button_default, { "data-test-id": "DLVCc_fBK35spHm5WxjcJ", color: color2, isDisabled, onClick, children: [
+  /* @__PURE__ */ jsx49(VisuallyHidden, { children: visuallyHidden }),
   icon
 ] });
 PaginationButtonTrigger.defaultProps = {
@@ -3191,10 +3311,10 @@ PaginationButtonTrigger.defaultProps = {
 var pagination_button_trigger_default = PaginationButtonTrigger;
 
 // src/components/pagination/components/pagination.tsx
-import { jsx as jsx48, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs20 } from "react/jsx-runtime";
 var Pagination = ({ className, current, total, onSelect }) => {
-  const btnColorDisabled = useColorModeValue10("secondary.100", "primary.500");
-  const btnColor = useColorModeValue10("primary.500", "secondary.100");
+  const btnColorDisabled = useColorModeValue9("secondary.100", "primary.500");
+  const btnColor = useColorModeValue9("primary.500", "secondary.100");
   const disabledPrevious = current === 1;
   const previousButtonColor = disabledPrevious ? btnColorDisabled : btnColor;
   const disabledNext = current === total;
@@ -3221,8 +3341,8 @@ var Pagination = ({ className, current, total, onSelect }) => {
     }
     return pageButtons;
   };
-  return /* @__PURE__ */ jsxs21(Box24, { className, display: "inline-flex", alignItems: "center", children: [
-    /* @__PURE__ */ jsx48(Box24, { mr: 1, children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs20(Box23, { className, display: "inline-flex", alignItems: "center", children: [
+    /* @__PURE__ */ jsx50(Box23, { mr: 1, children: /* @__PURE__ */ jsx50(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3230,11 +3350,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledPrevious,
         onClick: () => handleSelectPage(1),
         visuallyHidden: "First Page",
-        icon: /* @__PURE__ */ jsx48(ArrowLeftIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx50(ArrowLeftIcon, { width: 2 })
       }
     ) }),
-    /* @__PURE__ */ jsxs21(Box24, { bg: "neutral.300", borderRadius: "full", children: [
-      /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsxs20(Box23, { bg: "neutral.300", borderRadius: "full", children: [
+      /* @__PURE__ */ jsx50(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3242,22 +3362,22 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledPrevious,
           onClick: () => handleSelectPage(current - 1),
           visuallyHidden: "Previous Page",
-          icon: /* @__PURE__ */ jsx48(ChevronLeftIcon2, {})
+          icon: /* @__PURE__ */ jsx50(ChevronLeftIcon2, {})
         }
       ),
       generatePages().map((page) => {
-        return /* @__PURE__ */ jsx48(
+        return /* @__PURE__ */ jsx50(
           pagination_button_default,
           {
             "data-test-id": "Pagination-Button",
             isActive: page === current,
             onClick: () => typeof page === "number" ? handleSelectPage(page) : null,
-            children: /* @__PURE__ */ jsx48(Text11, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
+            children: /* @__PURE__ */ jsx50(Text11, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
           },
           page
         );
       }),
-      /* @__PURE__ */ jsx48(
+      /* @__PURE__ */ jsx50(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3265,11 +3385,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledNext,
           onClick: () => handleSelectPage(current + 1),
           visuallyHidden: "Next Page",
-          icon: /* @__PURE__ */ jsx48(ChevronRightIcon, {})
+          icon: /* @__PURE__ */ jsx50(ChevronRightIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx48(Box24, { ml: 1, children: /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx50(Box23, { ml: 1, children: /* @__PURE__ */ jsx50(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3277,7 +3397,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledNext,
         onClick: () => handleSelectPage(total),
         visuallyHidden: "Last Page",
-        icon: /* @__PURE__ */ jsx48(ArrowRightIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx50(ArrowRightIcon, { width: 2 })
       }
     ) })
   ] });
@@ -3291,7 +3411,7 @@ var pagination_default = Pagination;
 
 // src/components/pagination/components/pagination-detail.tsx
 import { Text as Text12 } from "@chakra-ui/react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var PaginationDetail = ({
   page,
   limit,
@@ -3301,15 +3421,15 @@ var PaginationDetail = ({
   lineHeight = 18,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx49(Text12, { scale: scale2, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
+  return /* @__PURE__ */ jsx51(Text12, { scale: scale2, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
 };
 var pagination_detail_default = PaginationDetail;
 
 // src/components/pagination/components/pagination-filter.tsx
-import { Box as Box25, Select, Text as Text13, useColorModeValue as useColorModeValue11 } from "@chakra-ui/react";
+import { Box as Box24, Select, Text as Text13, useColorModeValue as useColorModeValue10 } from "@chakra-ui/react";
 import * as React13 from "react";
 import { FiChevronDown } from "react-icons/fi";
-import { jsx as jsx50, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs21 } from "react/jsx-runtime";
 var PaginationFilter = ({
   limit,
   label = "Baris per halaman:",
@@ -3318,9 +3438,9 @@ var PaginationFilter = ({
   ...rest
 }) => {
   const [value, setValue] = React13.useState(limit);
-  return /* @__PURE__ */ jsxs22(Box25, { display: "flex", flexDirection: "row", alignItems: "center", children: [
-    /* @__PURE__ */ jsx50(Text13, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue11("neutral.900", "white"), ...rest, children: label }),
-    /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs21(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
+    /* @__PURE__ */ jsx52(Text13, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue10("neutral.900", "white"), ...rest, children: label }),
+    /* @__PURE__ */ jsx52(
       Select,
       {
         textAlign: "center",
@@ -3329,7 +3449,7 @@ var PaginationFilter = ({
         border: "none",
         boxShadow: "none",
         width: 18,
-        icon: /* @__PURE__ */ jsx50(FiChevronDown, {}),
+        icon: /* @__PURE__ */ jsx52(FiChevronDown, {}),
         _focusVisible: { boxShadow: "none" },
         onChange: (e) => {
           const numberValue = Number(e.target.value);
@@ -3338,7 +3458,7 @@ var PaginationFilter = ({
         },
         value,
         children: items.map((item) => {
-          return /* @__PURE__ */ jsx50("option", { value: item, children: item }, item);
+          return /* @__PURE__ */ jsx52("option", { value: item, children: item }, item);
         })
       }
     )
@@ -3372,32 +3492,25 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/radio/components/radio.tsx
-import { Box as Box26, Radio as ChakraRadio, Text as Text14 } from "@chakra-ui/react";
-import { jsx as jsx51, jsxs as jsxs23 } from "react/jsx-runtime";
-var Radio = ({
-  isError = false,
-  helpText = "",
-  errorText = "",
-  children,
-  isDisabled,
-  ...rest
-}) => {
+import { Box as Box25, Radio as ChakraRadio, Text as Text14 } from "@chakra-ui/react";
+import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
+var Radio = ({ isError = false, helpText, errorText, children, isDisabled, ...rest }) => {
   const variant = isError ? "errors" : "unstyled";
-  return /* @__PURE__ */ jsxs23(Box26, { children: [
-    /* @__PURE__ */ jsx51(Box26, { display: "flex", children: /* @__PURE__ */ jsx51(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx51(Text14, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-    /* @__PURE__ */ jsx51(Box26, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx51(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx51(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
+  return /* @__PURE__ */ jsxs22(Box25, { children: [
+    /* @__PURE__ */ jsx53(Box25, { display: "flex", children: /* @__PURE__ */ jsx53(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx53(Text14, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+    isError && errorText ? /* @__PURE__ */ jsx53(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx53(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) }) : helpText ? /* @__PURE__ */ jsx53(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx53(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) }) : null
   ] });
 };
 Radio.displayName = "Radio";
 Radio.defaultProps = {
   isError: false,
-  helpText: "",
-  errorText: ""
+  helpText: void 0,
+  errorText: void 0
 };
 
 // src/components/radio/components/radio-group.tsx
-import { Box as Box27, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { Box as Box26, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var RadioGroup = ({
   children,
   label,
@@ -3406,7 +3519,7 @@ var RadioGroup = ({
   errorMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx52(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx52(Box27, { mt: "12px", children: /* @__PURE__ */ jsx52(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx52(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
+  return /* @__PURE__ */ jsx54(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx54(Box26, { mt: "2", mb: "1", children: /* @__PURE__ */ jsx54(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx54(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 };
 RadioGroup.displayName = "RadioGroup";
 RadioGroup.defaultProps = {
@@ -3429,9 +3542,9 @@ import {
 // src/components/rating/components/rating.tsx
 import { Grid as Grid2 } from "@chakra-ui/react";
 import { Rating as RatingIcon } from "@ctlyst.id/internal-icon";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var Rating = ({ value }) => {
-  return /* @__PURE__ */ jsx53(Grid2, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx53(RatingIcon, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
+  return /* @__PURE__ */ jsx55(Grid2, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx55(RatingIcon, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
 };
 var rating_default = Rating;
 
@@ -3440,16 +3553,16 @@ import { useColorMode as useColorMode3 } from "@chakra-ui/system";
 import ReactSelect from "react-select";
 
 // src/config/theme/foundations/shadows.ts
-import { theme as theme2 } from "@chakra-ui/react";
+import { theme } from "@chakra-ui/react";
 var shadows = {
-  ...theme2.shadows,
+  ...theme.shadows,
   raised: "0px 4px 20px rgba(0, 0, 0, 0.05)"
 };
 
 // src/config/theme/foundations/sizes.ts
-import { theme as theme3 } from "@chakra-ui/react";
+import { theme as theme2 } from "@chakra-ui/react";
 var sizes = {
-  ...theme3.sizes,
+  ...theme2.sizes,
   4.5: "1.125rem",
   9.5: "2.375rem",
   18: "4.5rem",
@@ -3459,9 +3572,9 @@ var sizes = {
 };
 
 // src/config/theme/foundations/spacing.ts
-import { theme as theme4 } from "@chakra-ui/react";
+import { theme as theme3 } from "@chakra-ui/react";
 var spacing = {
-  ...theme4.space,
+  ...theme3.space,
   4.5: "1.125rem",
   9.5: "2.375rem",
   18: "4.5rem",
@@ -3773,11 +3886,11 @@ function selectStyles(colorMode, _isError) {
     })
   };
 }
-var themeSelect = (theme6) => {
+var themeSelect = (theme5) => {
   return {
-    ...theme6,
+    ...theme5,
     colors: {
-      ...theme6.colors,
+      ...theme5.colors,
       primary: "var(--chakra-colors-primary-100)",
       primary25: "var(--chakra-colors-primary-50)",
       primary50: "var(--chakra-colors-primary-100)",
@@ -3787,14 +3900,14 @@ var themeSelect = (theme6) => {
 };
 
 // src/components/select/components/select.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function Select2({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode3();
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx56(
     ReactSelect,
     {
       classNamePrefix: "react-select",
@@ -3809,14 +3922,14 @@ var select_default = Select2;
 // src/components/select/components/select-async.tsx
 import { useColorMode as useColorMode4 } from "@chakra-ui/system";
 import { AsyncPaginate } from "react-select-async-paginate";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function SelectAsync({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode4();
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx57(
     AsyncPaginate,
     {
       classNamePrefix: "react-select",
@@ -3831,10 +3944,10 @@ var select_async_default = SelectAsync;
 // src/components/select/components/select-async-creatable.tsx
 import { useColorMode as useColorMode5 } from "@chakra-ui/system";
 import ReactSelectAsyncCreatable from "react-select/async-creatable";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode5();
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx58(
     ReactSelectAsyncCreatable,
     {
       classNamePrefix: "react-select",
@@ -3848,10 +3961,10 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
 // src/components/select/components/select-creatable.tsx
 import { useColorMode as useColorMode6 } from "@chakra-ui/system";
 import ReactSelectCreatable from "react-select/creatable";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function SelectCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode6();
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx59(
     ReactSelectCreatable,
     {
       classNamePrefix: "react-select",
@@ -3863,10 +3976,10 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 }
 
 // src/components/select/components/select-with-checkbox.tsx
-import { Checkbox as Checkbox3, Flex as Flex9, Text as Text15 } from "@chakra-ui/react";
+import { Checkbox as Checkbox3, Flex as Flex11, Text as Text15 } from "@chakra-ui/react";
 import { useColorMode as useColorMode7 } from "@chakra-ui/system";
 import ReactSelect2, { components as ComponentRS } from "react-select";
-import { Fragment as Fragment6, jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx60, jsxs as jsxs23 } from "react/jsx-runtime";
 var CHECKBOX_STATE = {
   UNCHECKED: 0,
   INDETERMINATE: 1,
@@ -3913,8 +4026,8 @@ var InputOption = ({
     onClick: isDisabled ? void 0 : innerProps.onClick,
     style
   };
-  return /* @__PURE__ */ jsxs24(Fragment6, { children: [
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
+    /* @__PURE__ */ jsx60(
       ComponentRS.Option,
       {
         isMulti: true,
@@ -3925,8 +4038,8 @@ var InputOption = ({
         getStyles,
         innerProps: props,
         ...rest,
-        children: /* @__PURE__ */ jsxs24(
-          Flex9,
+        children: /* @__PURE__ */ jsxs23(
+          Flex11,
           {
             alignItems: "center",
             width: "100%",
@@ -3935,7 +4048,7 @@ var InputOption = ({
             "data-test-id": "CT_component_select-checkbox_options",
             cursor: isDisabled ? "not-allowed" : "default",
             children: [
-              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx58(
+              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx60(
                 Checkbox3,
                 {
                   isChecked: checkedState === CHECKBOX_STATE.CHECKED,
@@ -3943,14 +4056,14 @@ var InputOption = ({
                   isDisabled,
                   "data-test-id": "CT_component_select-checkbox_select-all-option"
                 }
-              ) : /* @__PURE__ */ jsx58(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
-              /* @__PURE__ */ jsx58(Text15, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+              ) : /* @__PURE__ */ jsx60(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
+              /* @__PURE__ */ jsx60(Text15, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
             ]
           }
         )
       }
     ),
-    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx58("hr", {}) : null
+    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx60("hr", {}) : null
   ] });
 };
 var SelectWithCheckboxBase = ({
@@ -3960,7 +4073,7 @@ var SelectWithCheckboxBase = ({
   ...rest
 }) => {
   const { colorMode } = useColorMode7();
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx60(
     ReactSelect2,
     {
       classNamePrefix: "react-select",
@@ -3979,7 +4092,7 @@ var SelectWithCheckboxBase = ({
 var SelectCheckbox = (props) => {
   const { isMulti, options, value, ...rest } = props;
   const selectValue = value || [];
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx60(
     SelectWithCheckboxBase,
     {
       isMulti,
@@ -3990,7 +4103,7 @@ var SelectCheckbox = (props) => {
           const optionLength = (options == null ? void 0 : options.length) ? options.length - 1 : 0;
           const selectedValue = isSelected ? CHECKBOX_STATE.CHECKED : CHECKBOX_STATE.UNCHECKED;
           const checkedState = data.selectAllCheckbox ? getSelectAllCheckboxState(selectValue == null ? void 0 : selectValue.length, optionLength) : selectedValue;
-          return /* @__PURE__ */ jsx58(InputOption, { ...optionProps, checkedState });
+          return /* @__PURE__ */ jsx60(InputOption, { ...optionProps, checkedState });
         }
       },
       ...rest
@@ -4000,7 +4113,7 @@ var SelectCheckbox = (props) => {
 var select_with_checkbox_default = SelectCheckbox;
 
 // src/components/sidebar/components/sidebar.tsx
-import { Flex as Flex10 } from "@chakra-ui/react";
+import { Flex as Flex12 } from "@chakra-ui/react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/dom/motion.mjs
 import { __assign as __assign25 } from "tslib";
@@ -4219,7 +4332,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
 }
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
-import { useCallback } from "react";
+import { useCallback as useCallback2 } from "react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/utils/is-ref-object.mjs
 function isRefObject(ref) {
@@ -4228,7 +4341,7 @@ function isRefObject(ref) {
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs
 function useMotionRef(visualState, visualElement2, externalRef) {
-  return useCallback(
+  return useCallback2(
     function(instance) {
       var _a;
       instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));
@@ -4253,7 +4366,7 @@ function useMotionRef(visualState, visualElement2, externalRef) {
 }
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
-import { useMemo as useMemo4, useContext as useContext5 } from "react";
+import { useMemo as useMemo3, useContext as useContext5 } from "react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/utils/variants.mjs
 function isVariantLabels(v) {
@@ -4322,7 +4435,7 @@ function getCurrentTreeVariants(props, context) {
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/context/MotionContext/create.mjs
 function useCreateMotionContext(props) {
   var _a = getCurrentTreeVariants(props, useContext5(MotionContext)), initial = _a.initial, animate3 = _a.animate;
-  return useMemo4(function() {
+  return useMemo3(function() {
     return { initial, animate: animate3 };
   }, [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate3)]);
 }
@@ -4558,7 +4671,7 @@ import { createElement as createElement3 } from "react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/html/use-props.mjs
 import { __assign as __assign4 } from "tslib";
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs
 var scaleCorrectors = {};
@@ -4966,7 +5079,7 @@ function copyRawValuesOnly(target, source, props) {
 }
 function useInitialMotionValues(_a, visualState, isStatic) {
   var transformTemplate = _a.transformTemplate;
-  return useMemo5(function() {
+  return useMemo4(function() {
     var state = createHtmlRenderState();
     buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
     var vars = state.vars, style = state.style;
@@ -5086,7 +5199,7 @@ function filterProps(props, isDom, forwardMotionProps) {
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/svg/use-props.mjs
 import { __assign as __assign6 } from "tslib";
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo5 } from "react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs
 import { __rest } from "tslib";
@@ -5160,7 +5273,7 @@ var createSvgRenderState = function() {
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/svg/use-props.mjs
 function useSVGProps(props, visualState) {
-  var visualProps = useMemo6(function() {
+  var visualProps = useMemo5(function() {
     var state = createSvgRenderState();
     buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
     return __assign6(__assign6({}, state.attrs), { style: __assign6({}, state.style) });
@@ -10693,7 +10806,7 @@ import { useContext as useContext13, useRef as useRef8, cloneElement, Children,
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/utils/use-force-update.mjs
 import { __read as __read19 } from "tslib";
-import { useState as useState5, useCallback as useCallback2 } from "react";
+import { useState as useState5, useCallback as useCallback3 } from "react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs
 import { useRef as useRef7 } from "react";
@@ -10712,10 +10825,10 @@ function useIsMounted() {
 function useForceUpdate() {
   var isMounted = useIsMounted();
   var _a = __read19(useState5(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-  var forceRender = useCallback2(function() {
+  var forceRender = useCallback3(function() {
     isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
   }, [forcedRenderCount]);
-  var deferredForceRender = useCallback2(function() {
+  var deferredForceRender = useCallback3(function() {
     return es_default.postRender(forceRender);
   }, [forceRender]);
   return [deferredForceRender, forcedRenderCount];
@@ -10724,12 +10837,12 @@ function useForceUpdate() {
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
 import { __values } from "tslib";
 import * as React16 from "react";
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo6 } from "react";
 var PresenceChild = function(_a) {
   var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
   var presenceChildren = useConstant(newChildrenMap);
   var id2 = useId();
-  var context = useMemo7(
+  var context = useMemo6(
     function() {
       return {
         id: id2,
@@ -10771,7 +10884,7 @@ var PresenceChild = function(_a) {
      */
     presenceAffectsLayout ? void 0 : [isPresent]
   );
-  useMemo7(function() {
+  useMemo6(function() {
     presenceChildren.forEach(function(_, key) {
       return presenceChildren.set(key, false);
     });
@@ -10881,10 +10994,10 @@ var AnimatePresence = function(_a) {
 };
 
 // src/components/sidebar/components/sidebar.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var Sidebar = ({ isCollapse, children, ...props }) => {
-  return /* @__PURE__ */ jsx59(
-    Flex10,
+  return /* @__PURE__ */ jsx61(
+    Flex12,
     {
       position: "relative",
       as: motion.div,
@@ -10904,12 +11017,12 @@ var Sidebar = ({ isCollapse, children, ...props }) => {
 Sidebar.displayName = "Sidebar";
 
 // src/components/sidebar/components/sidebar-header.tsx
-import { Box as Box28, Flex as Flex11, Text as Text16 } from "@chakra-ui/react";
+import { Box as Box27, Flex as Flex13, Text as Text16 } from "@chakra-ui/react";
 import { ArrowRight } from "@ctlyst.id/internal-icon";
-import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
-var SidebarHeader = ({ isCollapse, setCollapse }) => {
-  return /* @__PURE__ */ jsx60(
-    Box28,
+import { jsx as jsx62, jsxs as jsxs24 } from "react/jsx-runtime";
+var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
+  return /* @__PURE__ */ jsx62(
+    Box27,
     {
       px: "2",
       color: "neutral.900",
@@ -10918,8 +11031,8 @@ var SidebarHeader = ({ isCollapse, setCollapse }) => {
       _hover: {
         color: "primary.500"
       },
-      children: /* @__PURE__ */ jsxs25(
-        Flex11,
+      children: /* @__PURE__ */ jsxs24(
+        Flex13,
         {
           "data-test-id": "nLkz69YipW818FioeAxVI",
           direction: "row",
@@ -10928,20 +11041,19 @@ var SidebarHeader = ({ isCollapse, setCollapse }) => {
           onClick: () => setCollapse(!isCollapse),
           cursor: "pointer",
           children: [
-            /* @__PURE__ */ jsx60(
-              Box28,
+            /* @__PURE__ */ jsx62(
+              Box27,
               {
                 as: motion.div,
                 boxSize: "4",
                 animate: { rotate: isCollapse ? 0 : -180, x: isCollapse ? 8 : 0 },
                 transition: "ease-in-out",
                 transitionDuration: "1ms",
-                "data-test-id": "SWqE2JTMkS4Pj_2tdwy8O",
                 "aria-label": "toggle sidebar",
-                children: /* @__PURE__ */ jsx60(ArrowRight, { size: 4, color: "inherit" })
+                children: /* @__PURE__ */ jsx62(ArrowRight, { size: 4, color: "inherit" })
               }
             ),
-            /* @__PURE__ */ jsx60(AnimatePresence, { children: !isCollapse && /* @__PURE__ */ jsx60(Box28, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx60(
+            /* @__PURE__ */ jsx62(AnimatePresence, { children: !isCollapse && /* @__PURE__ */ jsx62(Box27, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx62(
               Text16,
               {
                 as: motion.div,
@@ -10952,7 +11064,7 @@ var SidebarHeader = ({ isCollapse, setCollapse }) => {
                 animate: { opacity: 1, x: 0 },
                 exit: { opacity: 0, x: 16 },
                 transition: "10ms linear",
-                children: "Sembunyikan menu"
+                children: title
               }
             ) }) })
           ]
@@ -10961,15 +11073,18 @@ var SidebarHeader = ({ isCollapse, setCollapse }) => {
     }
   );
 };
+SidebarHeader.displayName = "SidebarHeader";
+SidebarHeader.defaultProps = {
+  title: "Sembunyikan menu"
+};
 
 // src/components/sidebar/components/sidebar-menu.tsx
 import {
   Accordion as Accordion2,
   AccordionButton as AccordionButton2,
-  AccordionIcon as AccordionIcon2,
   AccordionItem as AccordionItem2,
   AccordionPanel as AccordionPanel2,
-  Box as Box29,
+  Box as Box28,
   Popover as Popover5,
   PopoverBody as PopoverBody3,
   PopoverContent as PopoverContent5,
@@ -10978,118 +11093,122 @@ import {
   Portal as Portal3,
   Text as Text17
 } from "@chakra-ui/react";
-import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+import * as Icon7 from "@ctlyst.id/internal-icon";
+import { Fragment as Fragment8, jsx as jsx63, jsxs as jsxs25 } from "react/jsx-runtime";
 var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, setActive, active }) => {
-  return /* @__PURE__ */ jsx61(Box29, { as: motion.div, animate: { padding: isCollapse ? "8px 16px" : "8px" }, children: /* @__PURE__ */ jsx61(Accordion2, { index: menu.findIndex((item) => item.children.some((child) => child.navLink === active)), children: menu.map((item) => /* @__PURE__ */ jsx61(AccordionItem2, { mt: "4", children: ({ isExpanded }) => /* @__PURE__ */ jsxs26(Fragment8, { children: [
-    /* @__PURE__ */ jsx61(Popover5, { trigger: "hover", placement: "right-start", offset: [-4, 8], children: ({ isOpen, onClose }) => {
-      const isActive = active == null ? void 0 : active.includes(item.navLink);
-      const activeOption = isOpen ? "primary.50" : "white";
-      const backgroundColor = isOpen ? "primary.50" : "primary.100";
-      const activeParent = isActive ? backgroundColor : activeOption;
+  return /* @__PURE__ */ jsx63(Box28, { as: motion.div, animate: { padding: isCollapse ? "8px 16px" : "8px" }, children: /* @__PURE__ */ jsx63(Accordion2, { index: menu.findIndex((item) => item.children.some((child) => child.navLink === active)), children: menu.map((item) => {
+    const isActive = active == null ? void 0 : active.includes(item.navLink);
+    return /* @__PURE__ */ jsx63(AccordionItem2, { mt: "4", children: ({ isExpanded }) => {
       const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
-      return /* @__PURE__ */ jsxs26(Fragment8, { children: [
-        /* @__PURE__ */ jsx61(PopoverTrigger5, { children: /* @__PURE__ */ jsx61(
-          AccordionButton2,
-          {
-            "data-test-id": `CTA_button-accordion-${item.title}`,
-            p: "0",
-            h: "fit-content",
-            children: /* @__PURE__ */ jsxs26(
+      const noChild = !item.children.length;
+      const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
+      return /* @__PURE__ */ jsxs25(Fragment8, { children: [
+        /* @__PURE__ */ jsx63(Popover5, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
+          const activeOption = isOpen ? "primary.50" : "white";
+          const backgroundColor = isOpen && !isActive ? "primary.50" : "primary.100";
+          const activeParent = isActive ? backgroundColor : activeOption;
+          return /* @__PURE__ */ jsxs25(Fragment8, { children: [
+            /* @__PURE__ */ jsx63(PopoverTrigger5, { children: /* @__PURE__ */ jsx63(
+              AccordionButton2,
+              {
+                "data-test-id": `CTA_button-accordion-${item.title}`,
+                p: "0",
+                h: "fit-content",
+                children: /* @__PURE__ */ jsxs25(
+                  NavItem,
+                  {
+                    as: motion.div,
+                    justifyContent: isCollapse ? "center" : "space-between",
+                    isActive,
+                    bg: activeParent,
+                    "data-test-id": `CTA_nav-item-${item.title}`,
+                    onClick: () => setActive(item.children.length > 0 ? item.children[0].navLink : item.navLink),
+                    position: "relative",
+                    ...itemStyles,
+                    children: [
+                      mappingIcon2 && /* @__PURE__ */ jsx63(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
+                      !isCollapse && /* @__PURE__ */ jsxs25(
+                        Box28,
+                        {
+                          display: "flex",
+                          w: "full",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          ml: "2",
+                          as: motion.div,
+                          transition: "20ms ease-in",
+                          initial: { opacity: 0, x: 24 },
+                          animate: { opacity: 1, x: 0 },
+                          exit: { opacity: 0, x: 16 },
+                          children: [
+                            /* @__PURE__ */ jsx63(Box28, { h: "3.5", position: "relative", children: /* @__PURE__ */ jsx63(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
+                            !!item.children.length && /* @__PURE__ */ jsx63(
+                              Box28,
+                              {
+                                display: "flex",
+                                boxSize: "3",
+                                as: motion.div,
+                                animate: { transform: isExpanded ? "rotate(-180deg)" : "rotate(0)" },
+                                children: /* @__PURE__ */ jsx63(Icon7.ChevronDown, { size: 3 })
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  item.id
+                )
+              },
+              item.id
+            ) }, item.id),
+            isOpenOptions && /* @__PURE__ */ jsx63(Portal3, { children: item.children.length > 0 ? /* @__PURE__ */ jsxs25(PopoverContent5, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
+              /* @__PURE__ */ jsx63(PopoverHeader2, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ jsxs25(Box28, { display: "flex", alignItems: "center", children: [
+                mappingIcon2.get(item.icon || ""),
+                /* @__PURE__ */ jsx63(Box28, { as: "span", ml: "2", children: item.title })
+              ] }) }),
+              !!item.children.length && /* @__PURE__ */ jsx63(PopoverBody3, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx63(
+                NavItem,
+                {
+                  "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
+                  isChild: true,
+                  isActive: active === submenu.navLink,
+                  onClick: () => {
+                    setActive(submenu.navLink);
+                    onClose();
+                  },
+                  rounded: "none",
+                  ...itemStyles,
+                  children: submenu.title
+                },
+                submenu.id
+              )) })
+            ] }) : isCollapse && /* @__PURE__ */ jsx63(PopoverContent5, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ jsx63(PopoverBody3, { py: "1", px: "0", children: /* @__PURE__ */ jsxs25(
               NavItem,
               {
-                as: motion.div,
-                justifyContent: isCollapse ? "center" : "space-between",
-                isActive,
-                bg: activeParent,
-                "data-test-id": `CTA_nav-item-${item.title}`,
-                onClick: () => setActive(item.children.length > 0 ? item.children[0].navLink : item.navLink),
-                position: "relative",
+                "data-test-id": `CTA_Sidebar-popover-item-${item.id}`,
+                justifyContent: "flex-start",
+                isActive: active === item.navLink,
+                onClick: () => {
+                  setActive(item.navLink);
+                  onClose();
+                },
+                rounded: "none",
                 ...itemStyles,
                 children: [
-                  mappingIcon2 && /* @__PURE__ */ jsx61(Box29, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
-                  !isCollapse && /* @__PURE__ */ jsxs26(
-                    Box29,
-                    {
-                      display: "flex",
-                      w: "full",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      ml: "2",
-                      as: motion.div,
-                      transition: "20ms ease-in",
-                      initial: { opacity: 0, x: 24 },
-                      animate: { opacity: 1, x: 0 },
-                      exit: { opacity: 0, x: 16 },
-                      children: [
-                        /* @__PURE__ */ jsx61(Box29, { h: "3.5", position: "relative", children: /* @__PURE__ */ jsx61(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
-                        !!item.children.length && /* @__PURE__ */ jsx61(Box29, { children: /* @__PURE__ */ jsx61(AccordionIcon2, { boxSize: "3.5" }) })
-                      ]
-                    }
-                  )
+                  mappingIcon2 && /* @__PURE__ */ jsx63(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
+                  /* @__PURE__ */ jsx63(Box28, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx63(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
                 ]
               },
               item.id
-            )
-          },
-          item.id
-        ) }, item.id),
-        isOpenOptions && /* @__PURE__ */ jsx61(Portal3, { children: item.children.length > 0 ? /* @__PURE__ */ jsxs26(PopoverContent5, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
-          /* @__PURE__ */ jsx61(PopoverHeader2, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ jsxs26(Box29, { display: "flex", alignItems: "center", children: [
-            mappingIcon2.get(item.icon || ""),
-            /* @__PURE__ */ jsx61(Box29, { as: "span", ml: "2", children: item.title })
-          ] }) }),
-          !!item.children.length && /* @__PURE__ */ jsx61(PopoverBody3, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx61(
-            NavItem,
-            {
-              "data-test-id": "2vqeuJQ2ml0uLZJ0xNNn-",
-              isChild: true,
-              isActive: active === submenu.navLink,
-              onClick: () => {
-                setActive(submenu.navLink);
-                onClose();
-              },
-              rounded: "none",
-              ...itemStyles,
-              children: submenu.title
-            },
-            submenu.id
-          )) })
-        ] }) : isCollapse && /* @__PURE__ */ jsx61(PopoverContent5, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ jsx61(PopoverBody3, { py: "1", px: "0", children: /* @__PURE__ */ jsxs26(
-          NavItem,
-          {
-            "data-test-id": "2vqeuJQ2ml0uLZJ0xNNn-",
-            justifyContent: "flex-start",
-            isActive: active === item.navLink,
-            onClick: () => {
-              setActive(item.navLink);
-              onClose();
-            },
-            rounded: "none",
-            ...itemStyles,
-            children: [
-              mappingIcon2 && /* @__PURE__ */ jsx61(Box29, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
-              /* @__PURE__ */ jsx61(Box29, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx61(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
-            ]
-          },
-          item.id
-        ) }) }) })
-      ] });
-    } }, item.id),
-    !isCollapse && /* @__PURE__ */ jsx61(
-      AccordionPanel2,
-      {
-        mt: "1",
-        p: "0",
-        as: motion.div,
-        transition: "50ms linear 100s",
-        initial: { opacity: 0, y: 60 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: 16 },
-        children: item.children.map((submenu) => /* @__PURE__ */ jsx61(
+            ) }) }) })
+          ] });
+        } }, item.id),
+        !isCollapse && /* @__PURE__ */ jsx63(AccordionPanel2, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx63(
           NavItem,
           {
             mt: "1",
-            "data-test-id": "8BmArEFEyzyZkSHEn8qnP",
+            "data-test-id": `CTA_Sidebar-accordion-item-${submenu.id}`,
             isActive: active === submenu.navLink,
             isChild: true,
             ...itemStyles,
@@ -11097,10 +11216,10 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
             children: submenu.title
           },
           submenu.id
-        ))
-      }
-    )
-  ] }) }, item.id)) }) });
+        )) })
+      ] });
+    } }, item.id);
+  }) }) });
 };
 SidebarMenu.displayName = "SidebarMenu";
 SidebarMenu.defaultProps = {
@@ -11109,16 +11228,16 @@ SidebarMenu.defaultProps = {
 };
 
 // src/components/switch/components/switch.tsx
-import { chakra as chakra6, Flex as Flex12, forwardRef as forwardRef14, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox2, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
+import { chakra as chakra6, Flex as Flex14, forwardRef as forwardRef14, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox3, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
 import { cx as cx10, dataAttr } from "@chakra-ui/shared-utils";
-import { Check, Close as Close4 } from "@ctlyst.id/internal-icon";
-import { useMemo as useMemo8 } from "react";
-import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Check as Check2, Close as Close4 } from "@ctlyst.id/internal-icon";
+import { useMemo as useMemo7 } from "react";
+import { jsx as jsx64, jsxs as jsxs26 } from "react/jsx-runtime";
 var Switch = forwardRef14(function Switch2(props, ref) {
   const styles = useMultiStyleConfig2("Switch", props);
   const { spacing: spacing2 = "0.5rem", children, ...ownProps } = omitThemingProps2(props);
-  const { state, getInputProps, getCheckboxProps, getRootProps, getLabelProps } = useCheckbox2(ownProps);
-  const containerStyles = useMemo8(
+  const { state, getInputProps, getCheckboxProps, getRootProps, getLabelProps } = useCheckbox3(ownProps);
+  const containerStyles = useMemo7(
     () => ({
       display: "inline-block",
       position: "relative",
@@ -11128,7 +11247,7 @@ var Switch = forwardRef14(function Switch2(props, ref) {
     }),
     [styles.container]
   );
-  const trackStyles = useMemo8(
+  const trackStyles = useMemo7(
     () => ({
       display: "inline-flex",
       flexShrink: 0,
@@ -11140,7 +11259,7 @@ var Switch = forwardRef14(function Switch2(props, ref) {
     }),
     [styles.track]
   );
-  const labelStyles = useMemo8(
+  const labelStyles = useMemo7(
     () => ({
       userSelect: "none",
       marginStart: spacing2,
@@ -11156,7 +11275,7 @@ var Switch = forwardRef14(function Switch2(props, ref) {
     };
     return iconSize[value];
   };
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     chakra6.label,
     {
       ...getRootProps(),
@@ -11165,13 +11284,13 @@ var Switch = forwardRef14(function Switch2(props, ref) {
       className: cx10("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ jsx62("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
-        /* @__PURE__ */ jsxs27(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
-          /* @__PURE__ */ jsxs27(Flex12, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ jsx62(Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx62(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+        /* @__PURE__ */ jsx64("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ jsxs26(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
+          /* @__PURE__ */ jsxs26(Flex14, { gap: 1, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
+            /* @__PURE__ */ jsx64(Check2, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ jsx64(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx64(
             chakra6.span,
             {
               __css: styles.thumb,
@@ -11181,11 +11300,12 @@ var Switch = forwardRef14(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx62(
+        children && /* @__PURE__ */ jsx64(
           chakra6.span,
           {
             className: "chakra-switch__label",
             color: state.isDisabled ? "black.low" : "black.high",
+            cursor: "pointer",
             ...getLabelProps(),
             __css: labelStyles,
             children
@@ -11217,14 +11337,14 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/tabs/components/tab.tsx
-import { Button as Button6, Flex as Flex13, forwardRef as forwardRef15, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Button as Button6, Flex as Flex15, forwardRef as forwardRef15, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
+import { jsx as jsx65, jsxs as jsxs27 } from "react/jsx-runtime";
 var Tab = forwardRef15((props, ref) => {
   var _a, _b;
   const tabProps = useTab({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx65(
     Button6,
     {
       "data-test-id": props["data-test-id"],
@@ -11250,7 +11370,7 @@ var Tab = forwardRef15((props, ref) => {
       },
       __css: styles.tab,
       ...tabProps,
-      children: /* @__PURE__ */ jsxs28(Flex13, { alignItems: "center", children: [
+      children: /* @__PURE__ */ jsxs27(Flex15, { alignItems: "center", children: [
         (_a = props.leftAddon) == null ? void 0 : _a.call(props, { isSelected }),
         tabProps.children,
         (_b = props.rightAddon) == null ? void 0 : _b.call(props, { isSelected })
@@ -11298,12 +11418,188 @@ import {
 // src/components/text/index.ts
 import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text18, TextProps } from "@chakra-ui/react";
 
-// src/components/tooltip/index.ts
-import { Tooltip, TooltipProps } from "@chakra-ui/react";
+// src/components/toast/components/toast.tsx
+import "react-toastify/dist/ReactToastify.css";
+import { chakra as chakra7, Flex as Flex16, Link as Link6, useToken } from "@chakra-ui/react";
+import { Bounce, toast } from "react-toastify";
+import { jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
+var toastStyles = `
+  .Toastify__toast-container {
+    width: 380px;
+  }
+
+  .container-toast {
+    height: 64px;
+    width: 380px;
+    border-radius: 4px;
+    font-family: Poppins;
+  }
+
+  @media (max-width: 480px) {
+    .container-toast {
+      margin: 16px !important;
+      width: calc(100% - 32px); /* Adjust width to fit within the margin */
+    }
+
+    .Toastify__toast-container {
+      width: 100%;
+    }
+  }
+`;
+var styleSheet = document.createElement("style");
+styleSheet.innerText = toastStyles;
+document.head.appendChild(styleSheet);
+var DEFAULT_OPTIONS = {
+  position: "top-right",
+  autoClose: 5e3,
+  hideProgressBar: false,
+  closeOnClick: true,
+  pauseOnHover: true,
+  draggable: true,
+  icon: false,
+  theme: "colored",
+  closeButton: false,
+  className: "container-toast",
+  transition: Bounce
+};
+var renderIcon = (icon, type) => {
+  const iconProps = { theme: "colored", type };
+  if (typeof icon === "function") {
+    return icon(iconProps);
+  }
+  return icon;
+};
+var useToast = () => {
+  const [primary500, neutral500, info500, danger500, warning500, success500] = useToken("colors", [
+    "primary.500",
+    "neutral.500",
+    "info.500",
+    "danger.500",
+    "warning.500",
+    "success.500"
+  ]);
+  const content = (icon, message, link) => {
+    return /* @__PURE__ */ jsxs28(Flex16, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
+      /* @__PURE__ */ jsxs28(Flex16, { alignItems: "center", children: [
+        icon && /* @__PURE__ */ jsx66(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
+        /* @__PURE__ */ jsx66(chakra7.span, { noOfLines: 2, children: message })
+      ] }),
+      link && /* @__PURE__ */ jsx66(
+        Link6,
+        {
+          href: link.url,
+          textDecoration: "underline",
+          minW: "max-content",
+          textAlign: "right",
+          textStyle: "text.sm",
+          fontWeight: "semibold",
+          children: link.label
+        }
+      )
+    ] });
+  };
+  return {
+    primary: (message, options) => {
+      const { icon, link, ...restOptions } = options || {};
+      toast.success(content(icon, message, link), {
+        ...DEFAULT_OPTIONS,
+        ...restOptions,
+        style: { backgroundColor: primary500 }
+      });
+    },
+    neutral: (message, options) => {
+      const { icon, link, ...restOptions } = options || {};
+      toast.success(content(icon, message, link), {
+        ...DEFAULT_OPTIONS,
+        ...restOptions,
+        style: { backgroundColor: neutral500 }
+      });
+    },
+    success: (message, options) => {
+      const { icon, link, ...restOptions } = options || {};
+      toast.success(content(icon, message, link), {
+        ...DEFAULT_OPTIONS,
+        ...restOptions,
+        style: { backgroundColor: success500 }
+      });
+    },
+    error: (message, options) => {
+      const { icon, link, ...restOptions } = options || {};
+      toast.error(content(icon, message, link), {
+        ...DEFAULT_OPTIONS,
+        ...restOptions,
+        style: { backgroundColor: danger500 }
+      });
+    },
+    warning: (message, options) => {
+      const { icon, link, ...restOptions } = options || {};
+      toast.warning(content(icon, message, link), {
+        ...DEFAULT_OPTIONS,
+        ...restOptions,
+        style: { backgroundColor: warning500 }
+      });
+    },
+    info: (message, options) => {
+      const { icon, link, ...restOptions } = options || {};
+      toast.info(content(icon, message, link), {
+        ...DEFAULT_OPTIONS,
+        ...restOptions,
+        style: { backgroundColor: info500 }
+      });
+    },
+    custom: (message, options) => {
+      const { icon, link, style, ...restOptions } = options || {};
+      toast.info(content(icon, message, link), {
+        ...DEFAULT_OPTIONS,
+        ...restOptions,
+        style: { backgroundColor: style == null ? void 0 : style.backgroundColor, color: style == null ? void 0 : style.color }
+      });
+    }
+  };
+};
+
+// src/components/toast/index.ts
+import { ToastContainer } from "react-toastify";
+
+// src/components/tooltip/components/tooltip.tsx
+import {
+  Popover as Popover6,
+  PopoverArrow as PopoverArrow3,
+  PopoverBody as PopoverBody4,
+  PopoverContent as PopoverContent6,
+  PopoverTrigger as PopoverTrigger6,
+  Portal as Portal4,
+  Tooltip as ChakraTooltip
+} from "@chakra-ui/react";
+import { jsx as jsx67, jsxs as jsxs29 } from "react/jsx-runtime";
+var Tooltip = (props) => {
+  const { children, bg = "neutral.700", textStyle = "text.sm", color: color2 = "white" } = props;
+  const content = /* @__PURE__ */ jsxs29(PopoverContent6, { border: "none", bg, textStyle, borderRadius: props.borderRadius, children: [
+    props.hasArrow && /* @__PURE__ */ jsx67(PopoverArrow3, { color: color2, bg }),
+    /* @__PURE__ */ jsx67(PopoverBody4, { color: color2, ...props, children: props.label })
+  ] });
+  return props.isInteractive === true ? /* @__PURE__ */ jsxs29(Popover6, { trigger: "hover", placement: props.placement, children: [
+    /* @__PURE__ */ jsx67(PopoverTrigger6, { children }),
+    props.portal ? /* @__PURE__ */ jsx67(Portal4, { children: content }) : content
+  ] }) : /* @__PURE__ */ jsx67(ChakraTooltip, { ...props, children });
+};
 
 // src/components/uploader/components/uploader.tsx
-import { Flex as Flex14, Heading as Heading2, Stack as Stack4, Text as Text19 } from "@chakra-ui/react";
-import * as React19 from "react";
+import {
+  Box as Box29,
+  Button as Button7,
+  Flex as Flex17,
+  FormControl as FormControl4,
+  FormLabel as FormLabel4,
+  Heading as Heading2,
+  Image as ChakraImage,
+  ListItem as ListItem2,
+  RequiredIndicator as RequiredIndicator2,
+  Text as Text19,
+  UnorderedList as UnorderedList2
+} from "@chakra-ui/react";
+import { Close as X, Plus } from "@ctlyst.id/internal-icon";
+import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef9, useState as useState6 } from "react";
 import { useDropzone } from "react-dropzone";
 
 // src/components/uploader/constants.ts
@@ -11314,87 +11610,261 @@ var messages = {
   replaceFile: "Ganti File",
   uploadFile: "Upload File"
 };
+var IMG_EXT = {
+  jpg: "jpg",
+  jpeg: "jpeg",
+  png: "png",
+  gif: "gif"
+};
+var DEFAULT_IMAGE_MIME_TYPE = [IMG_EXT.jpg, IMG_EXT.jpeg, IMG_EXT.png, IMG_EXT.gif];
+var concatList = (list) => {
+  let _concatedList = "";
+  if (list.length > 1) {
+    _concatedList = `${list.slice(0, -1).join(", ")} dan ${list[list.length - 1]}`;
+  } else {
+    _concatedList = list[0];
+  }
+  return _concatedList;
+};
+var formatValidationMessage = (extension) => `Foto harus dalam format ${concatList(extension.map((ext) => `.${ext}`))}.`;
 
 // src/components/uploader/components/uploader.tsx
-import { jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx68, jsxs as jsxs30 } from "react/jsx-runtime";
+import { createElement as createElement6 } from "react";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
-  accept,
-  multiple,
-  selected,
-  maxFiles = 1,
-  renderError,
-  validator,
+  dragActiveText,
+  dragInActiveText,
+  dragReplaceText,
+  changeFileText,
+  uploadFileText,
+  helperText,
+  label,
+  isRequired,
+  isDisabled,
+  dimension,
+  acceptFormat = {
+    validate: DEFAULT_IMAGE_MIME_TYPE
+  },
+  maxFileSize,
+  customValidation,
+  value,
+  isShowCloseButton = true,
+  isClosableToast,
+  testId,
+  isError,
+  errorText,
+  isShowReupload = true,
+  size: size2 = "lg",
   ...props
 }) => {
-  const [selectedFirstFile, setSelectedFirstFile] = React19.useState();
-  const [isSelected, setIsSelected] = React19.useState(selected || false);
-  const onDrop = React19.useCallback(
-    (acceptedFiles) => {
-      if (acceptedFiles.length > 0) {
-        onHandleUploadFile == null ? void 0 : onHandleUploadFile(acceptedFiles);
-        if (!multiple) {
-          setIsSelected(true);
-          setSelectedFirstFile(acceptedFiles[0]);
+  const inputRef = useRef9(null);
+  const [filePreview, setFilePreview] = useState6();
+  const toast2 = useToast();
+  const handleRejection = useCallback4(
+    (message, file, image) => {
+      if (onHandleRejections) {
+        onHandleRejections(file, image);
+      }
+      return toast2.error(message, {
+        closeButton: isClosableToast
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onHandleRejections]
+  );
+  const onDrop = useCallback4(
+    (files) => {
+      var _a;
+      const file = files[0];
+      const fileFormat = file.name.split(".").pop();
+      if (!(acceptFormat == null ? void 0 : acceptFormat.validate.includes(fileFormat))) {
+        return handleRejection((_a = acceptFormat.message) != null ? _a : formatValidationMessage(acceptFormat.validate), file, null);
+      }
+      const imageUrl = URL.createObjectURL(file);
+      const img = new Image();
+      img.src = imageUrl;
+      img.onload = () => {
+        var _a2;
+        const imgWidth = img.width;
+        const imgheight = img.height;
+        if (customValidation && customValidation(file, img) !== null) {
+          return handleRejection(customValidation(file, img), file, img);
         }
-      }
+        if (!acceptFormat.validate.includes(fileFormat)) {
+          return handleRejection((_a2 = acceptFormat.message) != null ? _a2 : formatValidationMessage(acceptFormat.validate), file, img);
+        }
+        if (dimension && (imgWidth !== dimension.validate[0] || imgheight !== dimension.validate[1])) {
+          return handleRejection(dimension.message, file, img);
+        }
+        if (maxFileSize && file.size > maxFileSize.validate) {
+          return handleRejection(maxFileSize.message, file, null);
+        }
+        onHandleUploadFile == null ? void 0 : onHandleUploadFile(file, img);
+        setFilePreview(URL.createObjectURL(file));
+        return null;
+      };
+      return null;
     },
-    [multiple, onHandleUploadFile]
+    [acceptFormat, customValidation, dimension, handleRejection, maxFileSize, onHandleUploadFile]
   );
-  const { getRootProps, getInputProps, isDragActive: isDragActive2, fileRejections } = useDropzone({
+  const { getRootProps, getInputProps, isDragActive: isDragActive2, acceptedFiles } = useDropzone({
     onDrop,
-    accept,
-    maxFiles,
-    multiple,
-    validator
+    maxFiles: 1,
+    noClick: isDisabled,
+    disabled: !!filePreview,
+    noDrag: isDisabled
   });
-  React19.useEffect(() => {
-    if (fileRejections.length > 0 && onHandleRejections) {
-      onHandleRejections(fileRejections);
-    }
-  }, [fileRejections, onHandleRejections]);
-  const isError = React19.useMemo(() => {
-    const error = fileRejections.length > 0;
-    if (error) {
-      setIsSelected(false);
-    }
-    return error;
-  }, [fileRejections]);
-  React19.useEffect(() => {
-    setIsSelected(selected != null ? selected : false);
-  }, [selected]);
-  return /* @__PURE__ */ jsxs29(Stack4, { direction: "column", children: [
-    /* @__PURE__ */ jsxs29(
-      Flex14,
+  const renderHelperText = () => {
+    if (Array.isArray(helperText)) {
+      return /* @__PURE__ */ jsx68(UnorderedList2, { pl: 2, fontSize: 12, color: "gray.600", "data-test-id": "CT_component_base-image-uploader_helperText", children: helperText.map((text2) => /* @__PURE__ */ jsx68(ListItem2, { children: text2 }, text2)) });
+    }
+    return helperText;
+  };
+  const renderErrorText = (text2) => /* @__PURE__ */ jsx68(Box29, { mb: 2, children: /* @__PURE__ */ jsx68(Text19, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    setFilePreview(void 0);
+    onHandleUploadFile == null ? void 0 : onHandleUploadFile(null, null);
+    acceptedFiles.pop();
+  };
+  useEffect12(() => {
+    if (value) {
+      if (typeof value === "string") {
+        setFilePreview(value);
+      } else {
+        setFilePreview(URL.createObjectURL(value));
+      }
+    } else {
+      setFilePreview(void 0);
+      acceptedFiles.pop();
+    }
+  }, [value]);
+  const isSmall = size2 === "sm";
+  const color2 = isDisabled ? "neutral.500" : "primary.500";
+  const containerHeight = !isSmall ? "160px" : "120px";
+  const cursorType = filePreview ? "initial" : "pointer";
+  return /* @__PURE__ */ jsxs30(FormControl4, { isRequired, children: [
+    label && typeof label === "string" ? (
+      // eslint-disable-next-line react/jsx-no-useless-fragment
+      /* @__PURE__ */ jsxs30(FormLabel4, { requiredIndicator: /* @__PURE__ */ jsx68(Fragment9, {}), fontSize: "text.sm", children: [
+        isRequired && /* @__PURE__ */ jsx68(RequiredIndicator2, { mr: 1, ml: 0 }),
+        label
+      ] })
+    ) : label,
+    /* @__PURE__ */ jsxs30(
+      Flex17,
       {
-        minH: 200,
+        minH: containerHeight,
+        maxW: !isSmall ? "full" : "120px",
+        mb: 2,
+        bg: "white",
         border: "1px dashed",
-        borderColor: isError ? "danger.500" : "primary.500",
+        rounded: "sm",
+        borderColor: isError ? "danger.500" : color2,
         alignItems: "center",
         justifyContent: "center",
-        cursor: "pointer",
+        cursor: isDisabled ? "not-allowed" : cursorType,
+        pos: "relative",
+        _hover: { bg: !filePreview && !isDisabled ? "primary.50" : "" },
         ...props,
         ...getRootProps(),
         children: [
-          /* @__PURE__ */ jsx64("input", { ...getInputProps() }),
-          isDragActive2 ? /* @__PURE__ */ jsx64(Text19, { children: messages.dragActive }) : /* @__PURE__ */ jsxs29(Flex14, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
-            !multiple && isSelected && /* @__PURE__ */ jsx64(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
-            !isSelected && /* @__PURE__ */ jsx64(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
-            isSelected ? /* @__PURE__ */ jsx64(Text19, { children: messages.dragReplace }) : /* @__PURE__ */ jsx64(Text19, { children: messages.dragInActive })
+          filePreview && isShowCloseButton && /* @__PURE__ */ jsx68(Box29, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ jsx68(
+            Button7,
+            {
+              "data-test-id": `CT_component_base-image-uploader_remove-image${testId ? `_${testId}` : ""}`,
+              "aria-label": "remove-image",
+              rounded: "full",
+              variant: "icon",
+              bg: "neutral.600",
+              _hover: { bg: "neutral.700" },
+              size: "sm",
+              h: "20px",
+              w: "20px",
+              border: "none",
+              zIndex: 1,
+              onClick: handleRemove,
+              children: /* @__PURE__ */ jsx68(X, { size: 3, color: "white" })
+            }
+          ) }),
+          filePreview && /* @__PURE__ */ jsx68(Box29, { w: "full", children: /* @__PURE__ */ jsx68(
+            Flex17,
+            {
+              position: "relative",
+              "data-test-id": `CT_component_base-image-uploader_image-preview${testId ? `_${testId}` : ""}`,
+              justify: "center",
+              align: "center",
+              children: /* @__PURE__ */ jsx68(
+                ChakraImage,
+                {
+                  h: size2 === "lg" ? "120" : "100",
+                  src: filePreview,
+                  alt: "uploader-preview",
+                  objectFit: "contain"
+                }
+              )
+            }
+          ) }),
+          !filePreview && /* @__PURE__ */ jsxs30(Fragment9, { children: [
+            /* @__PURE__ */ jsx68(
+              "input",
+              {
+                "data-test-id": `CT_component_base-image-uploader_input-file${testId ? `_${testId}` : ""}`,
+                ...getInputProps()
+              }
+            ),
+            isDragActive2 ? /* @__PURE__ */ jsx68(Text19, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs30(Flex17, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color2, children: [
+              size2 === "sm" && /* @__PURE__ */ jsx68(Plus, { size: 6, color: color2 }),
+              /* @__PURE__ */ jsxs30(Box29, { children: [
+                !filePreview && /* @__PURE__ */ jsx68(
+                  Heading2,
+                  {
+                    fontWeight: "400",
+                    fontSize: size2 === "sm" ? "text.md" : "text.xl",
+                    mb: size2 === "sm" ? "0" : "2",
+                    textAlign: "center",
+                    children: uploadFileText && size2 === "lg" ? messages.uploadFile : "Upload"
+                  }
+                ),
+                size2 === "lg" && /* @__PURE__ */ jsx68(Text19, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
+              ] })
+            ] })
           ] })
         ]
       }
     ),
-    renderError == null ? void 0 : renderError(fileRejections)
+    filePreview && !isSmall && /* @__PURE__ */ jsxs30(Flex17, { align: "center", justify: "center", my: 2, children: [
+      /* @__PURE__ */ createElement6(
+        "input",
+        {
+          ...getInputProps(),
+          key: Math.random(),
+          ref: inputRef,
+          accept: "image/*",
+          "data-test-id": `CT_component_base-image-uploader_change-img${testId ? `_${testId}` : ""}`
+        }
+      ),
+      isShowReupload && /* @__PURE__ */ jsx68(
+        Button7,
+        {
+          "data-test-id": `CT_component_base-image-uploader_change-img-btn${testId ? `_${testId}` : ""}`,
+          type: "button",
+          size: "sm",
+          variant: "outline",
+          onClick: () => {
+            var _a;
+            (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.click();
+          },
+          children: "Ubah Foto"
+        }
+      )
+    ] }),
+    renderErrorText(errorText),
+    renderHelperText()
   ] });
 };
-Uploader.defaultProps = {
-  onHandleUploadFile: void 0,
-  onHandleRejections: void 0,
-  renderError: void 0,
-  selected: false
-};
 var uploader_default = Uploader;
 
 // src/components/index.ts
@@ -11456,7 +11926,6 @@ __export(components_exports, {
   Button: () => button_default2,
   Card: () => card_default2,
   Checkbox: () => checkbox_default2,
-  Chips: () => chips_default2,
   FormLabel: () => form_label_default,
   Input: () => input_default,
   LoaderStyle: () => loader_default2,
@@ -11466,6 +11935,7 @@ __export(components_exports, {
   Switch: () => switch_default2,
   Table: () => table_default,
   Tabs: () => tabs_default,
+  Tag: () => chips_default2,
   Textarea: () => textarea_default2,
   Tooltip: () => tooltip_default
 });
@@ -11484,6 +11954,9 @@ var baseStyleButton = defineStyle({
   gap: 4,
   fontSize: "text.md",
   bg: "neutral.50",
+  _expanded: {
+    bg: "neutral.100"
+  },
   _focusVisible: {
     bg: "neutral.100"
   },
@@ -11512,7 +11985,9 @@ var baseStylePanel = defineStyle({
   pb: "5"
 });
 var baseStyleIcon = defineStyle({
-  fontSize: "1.25em"
+  fontSize: "1.25em",
+  boxSize: 6,
+  p: 1
 });
 var baseStyle = definePartsStyle({
   container: baseStyleContainer,
@@ -11525,7 +12000,11 @@ var collapseStyleButton = defineStyle({
   borderRadius: "sm",
   borderWidth: "1px",
   borderStyle: "solid",
-  borderColor: "neutral.300"
+  borderColor: "neutral.300",
+  bg: "neutral.50",
+  _expanded: {
+    bg: "neutral.50"
+  }
 });
 var collapseStylePanel = defineStyle({
   py: 0,
@@ -11602,7 +12081,7 @@ var baseStyle2 = definePartsStyle2((props) => {
 function getBg(props) {
   const { colorScheme: c2 } = props;
   return {
-    light: c2 === "neutral" ? `colors.${c2}.300` : `colors.${c2}.50`
+    light: c2 === "neutral" ? `colors.${c2}.200` : `colors.${c2}.50`
   };
 }
 var variantLight = definePartsStyle2((props) => {
@@ -11610,7 +12089,7 @@ var variantLight = definePartsStyle2((props) => {
   const bg = getBg(props);
   return {
     container: {
-      [$fg.variable]: `colors.${c2}.700`,
+      [$fg.variable]: c2 === "neutral" ? `colors.black.high` : `colors.${c2}.700`,
       [$bg.variable]: bg.light,
       color: $fg.reference
     }
@@ -11642,6 +12121,7 @@ var alert_default = alertTheme;
 // src/config/theme/components/badge.ts
 var Badge2 = {
   baseStyle: {
+    h: "fit-content",
     display: "inline-block",
     fontSize: "text.xs",
     fontWeight: "semibold",
@@ -11717,7 +12197,7 @@ var badge_default2 = Badge2;
 
 // src/config/theme/components/button.ts
 import { defineStyleConfig } from "@chakra-ui/styled-system";
-var Button7 = defineStyleConfig({
+var Button8 = defineStyleConfig({
   // The styles all button have in common
   baseStyle: {
     fontSize: "body.1",
@@ -11972,7 +12452,7 @@ var Button7 = defineStyleConfig({
     colorScheme: "primary"
   }
 });
-var button_default2 = Button7;
+var button_default2 = Button8;
 
 // src/config/theme/components/card.ts
 import { defineStyleConfig as defineStyleConfig2 } from "@chakra-ui/styled-system";
@@ -12089,85 +12569,102 @@ var Checkbox4 = defineMultiStyleConfig3({
 var checkbox_default2 = Checkbox4;
 
 // src/config/theme/components/chips.ts
-import { defineStyleConfig as defineStyleConfig3 } from "@chakra-ui/styled-system";
-var Chips2 = defineStyleConfig3({
-  baseStyle: (props) => {
-    const { isDisabled, isActive } = props;
-    const defaultProps = {
-      color: "primary.500",
-      textStyle: "text.sm",
-      borderRadius: "2xl",
-      borderWidth: "1px",
-      borderColor: "primary.500",
-      bg: "white.high",
-      px: 3,
-      py: 1,
-      cursor: "default",
-      _hover: {
-        bg: "primary.50"
-      }
-    };
-    let chipsProps = { ...defaultProps };
-    if (isActive) {
-      const isActiveProps = {
-        bg: "primary.500",
-        color: "white.high",
-        _hover: {
-          bg: "primary.500"
-        }
-      };
-      chipsProps = { ...chipsProps, ...isActiveProps };
-    }
-    if (isDisabled) {
-      const isDisabledProps = {
-        bg: "neutral.200",
-        color: "black.low",
-        borderColor: "neutral.200",
-        cursor: "not-allowed",
-        _hover: {
-          bg: "neutral.200"
-        }
-      };
-      chipsProps = { ...chipsProps, ...isDisabledProps };
+import { tagAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers4 } from "@chakra-ui/react";
+var { definePartsStyle: definePartsStyle4, defineMultiStyleConfig: defineMultiStyleConfig4 } = createMultiStyleConfigHelpers4(tagAnatomy.keys);
+var baseStyle4 = definePartsStyle4({
+  container: {
+    px: 3,
+    py: 1,
+    color: "primary.500",
+    userSelect: "none",
+    boxShadow: "none",
+    border: "1px solid",
+    borderColor: "primary.500",
+    bg: "transparent",
+    cursor: "pointer",
+    fontWeight: 400
+  }
+});
+var solid = definePartsStyle4({
+  container: {
+    bg: "primary.500",
+    color: "white"
+  },
+  closeButton: {
+    color: "white",
+    opacity: 1
+  }
+});
+var outline = definePartsStyle4({
+  container: {
+    bg: "transparent",
+    _hover: {
+      bg: "primary.50"
+    }
+  },
+  closeButton: {
+    color: "primary.500",
+    opacity: 1
+  }
+});
+var disabled = definePartsStyle4({
+  container: {
+    bg: "neutral.200",
+    color: "black.low",
+    borderColor: "neutral.200",
+    cursor: "not-allowed",
+    _hover: {
+      bg: "neutral.200"
     }
-    return {
-      ...chipsProps
-    };
   },
+  closeButton: {
+    color: "neutral.500",
+    opacity: 1
+  }
+});
+var Tag2 = defineMultiStyleConfig4({
+  baseStyle: baseStyle4,
   sizes: {
     sm: {
-      textStyle: "text.sm"
+      container: {
+        textStyle: "text.sm"
+      }
     },
     md: {
-      textStyle: "text.md",
-      py: 2
+      container: {
+        textStyle: "text.md",
+        py: 2
+      }
     }
   },
-  defaultProps: {
-    size: "sm"
+  variants: {
+    solid,
+    outline,
+    disabled
   }
 });
-var chips_default2 = Chips2;
+var chips_default2 = Tag2;
 
 // src/config/theme/components/form-label.ts
-import { defineStyle as defineStyle2, defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/styled-system";
-var baseStyle4 = defineStyle2({
+import { defineStyle as defineStyle2, defineStyleConfig as defineStyleConfig3 } from "@chakra-ui/styled-system";
+var baseStyle5 = defineStyle2({
   fontSize: "field.sm",
   fontWeight: "normal",
   marginEnd: 1,
   mb: 1
 });
-var FormLabel4 = defineStyleConfig4({
-  baseStyle: baseStyle4
+var FormLabel5 = defineStyleConfig3({
+  baseStyle: baseStyle5
 });
-var form_label_default = FormLabel4;
+var form_label_default = FormLabel5;
 
 // src/config/theme/components/input.ts
 import { inputAnatomy as parts3 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers4, defineStyle as defineStyle3 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers5, defineStyle as defineStyle3 } from "@chakra-ui/styled-system";
 import { mode } from "@chakra-ui/theme-tools";
-var { definePartsStyle: definePartsStyle4, defineMultiStyleConfig: defineMultiStyleConfig4 } = createMultiStyleConfigHelpers4(parts3.keys);
-var baseStyle5 = definePartsStyle4({
+var { definePartsStyle: definePartsStyle5, defineMultiStyleConfig: defineMultiStyleConfig5 } = createMultiStyleConfigHelpers5(parts3.keys);
+var baseStyle6 = definePartsStyle5({
   field: {
     width: "100%",
     minWidth: 0,
@@ -12216,24 +12713,24 @@ var size = {
   })
 };
 var sizes2 = {
-  lg: definePartsStyle4({
+  lg: definePartsStyle5({
     field: size.lg,
     addon: size.lg
   }),
-  md: definePartsStyle4({
+  md: definePartsStyle5({
     field: size.md,
     addon: size.md
   }),
-  sm: definePartsStyle4({
+  sm: definePartsStyle5({
     field: size.sm,
     addon: size.sm
   }),
-  xs: definePartsStyle4({
+  xs: definePartsStyle5({
     field: size.xs,
     addon: size.xs
   })
 };
-var outline = definePartsStyle4((props) => {
+var outline2 = definePartsStyle5((props) => {
   const field2 = {
     border: 0,
     outline: 0,
@@ -12254,7 +12751,7 @@ var outline = definePartsStyle4((props) => {
     field: field2
   };
 });
-var unstyled2 = definePartsStyle4({
+var unstyled2 = definePartsStyle5({
   field: {
     bg: "transparent",
     px: "0",
@@ -12267,11 +12764,11 @@ var unstyled2 = definePartsStyle4({
   }
 });
 var variants3 = {
-  outline,
+  outline: outline2,
   unstyled: unstyled2
 };
-var Input3 = defineMultiStyleConfig4({
-  baseStyle: baseStyle5,
+var Input3 = defineMultiStyleConfig5({
+  baseStyle: baseStyle6,
   sizes: sizes2,
   variants: variants3,
   defaultProps: {
@@ -12282,7 +12779,7 @@ var Input3 = defineMultiStyleConfig4({
 var input_default = Input3;
 
 // src/config/theme/components/loader.ts
-import { defineStyleConfig as defineStyleConfig5 } from "@chakra-ui/styled-system";
+import { defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/styled-system";
 import { keyframes as keyframes3 } from "@emotion/react";
 var rotate = keyframes3({
   "0%": {
@@ -12314,7 +12811,7 @@ var getLoaderColor = (color2) => {
   if (color2 === "warning") return "var(--chakra-colors-warning-700)";
   return backgroundColor;
 };
-var LoaderStyle = defineStyleConfig5({
+var LoaderStyle = defineStyleConfig4({
   baseStyle: (props) => {
     const colors = getLoaderColor(props.color);
     return {
@@ -12399,8 +12896,8 @@ var LoaderStyle = defineStyleConfig5({
 var loader_default2 = LoaderStyle;
 
 // src/config/theme/components/modal.ts
-import { defineStyleConfig as defineStyleConfig6 } from "@chakra-ui/styled-system";
-var Modal3 = defineStyleConfig6({
+import { defineStyleConfig as defineStyleConfig5 } from "@chakra-ui/styled-system";
+var Modal3 = defineStyleConfig5({
   sizes: {
     sm: { dialog: { minW: 400 } },
     md: { dialog: { minW: 600 } },
@@ -12414,28 +12911,28 @@ var modal_default = Modal3;
 
 // src/config/theme/components/popover.ts
 import { popoverAnatomy as parts4 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers5 } from "@chakra-ui/react";
-var { definePartsStyle: definePartsStyle5, defineMultiStyleConfig: defineMultiStyleConfig5 } = createMultiStyleConfigHelpers5(parts4.keys);
-var baseStyle6 = definePartsStyle5({
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6 } from "@chakra-ui/react";
+var { definePartsStyle: definePartsStyle6, defineMultiStyleConfig: defineMultiStyleConfig6 } = createMultiStyleConfigHelpers6(parts4.keys);
+var baseStyle7 = definePartsStyle6({
   content: {
     bg: "white"
   }
 });
-var popoverTheme = defineMultiStyleConfig5({ baseStyle: baseStyle6 });
+var popoverTheme = defineMultiStyleConfig6({ baseStyle: baseStyle7 });
 var popover_default = popoverTheme;
 
 // src/config/theme/components/radio.ts
 import { radioAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6 } from "@chakra-ui/react";
-var { definePartsStyle: definePartsStyle6, defineMultiStyleConfig: defineMultiStyleConfig6 } = createMultiStyleConfigHelpers6(radioAnatomy.keys);
-var baseStyle7 = definePartsStyle6({
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7 } from "@chakra-ui/react";
+var { definePartsStyle: definePartsStyle7, defineMultiStyleConfig: defineMultiStyleConfig7 } = createMultiStyleConfigHelpers7(radioAnatomy.keys);
+var baseStyle8 = definePartsStyle7({
   control: {
     border: "1px solid",
-    width: "16px",
-    height: "16px"
+    width: 4,
+    height: 4
   },
   label: {
-    marginLeft: "8px",
+    marginLeft: 2,
     textStyle: "text.sm",
     color: "black.high",
     _disabled: {
@@ -12444,15 +12941,15 @@ var baseStyle7 = definePartsStyle6({
     }
   }
 });
-var errors2 = definePartsStyle6({
+var errors2 = definePartsStyle7({
   control: {
     borderColor: "danger.500",
     _checked: {
       borderColor: "danger.500",
       bg: "white",
       _before: {
-        h: "10px",
-        w: "10px",
+        h: 2.5,
+        w: 2.5,
         bg: "danger.500"
       },
       _hover: {
@@ -12463,8 +12960,8 @@ var errors2 = definePartsStyle6({
         borderColor: "danger.500",
         bg: "white.high",
         _before: {
-          h: "10px",
-          w: "10px",
+          h: 2.5,
+          w: 2.5,
           bg: "primary.500",
           opacity: 0.3
         }
@@ -12476,31 +12973,31 @@ var errors2 = definePartsStyle6({
     }
   },
   label: {
-    fontSize: "12px"
+    textStyle: "text.sm"
   }
 });
-var unstyled3 = definePartsStyle6({
+var unstyled3 = definePartsStyle7({
   control: {
     borderColor: "neutral.600",
     _checked: {
       borderColor: "primary.500",
       bg: "white",
       _before: {
-        h: "10px",
-        w: "10px",
+        h: 2.5,
+        w: 2.5,
         bg: "primary.500"
       },
       _hover: {
         borderColor: "primary.500",
-        bg: "gray.200"
+        bg: "transparent"
       },
       _disabled: {
         borderColor: "primary.500",
         bg: "white.high",
         opacity: 0.3,
         _before: {
-          h: "10px",
-          w: "10px",
+          h: 2.5,
+          w: 2.5,
           bg: "primary.500"
         }
       }
@@ -12511,15 +13008,15 @@ var unstyled3 = definePartsStyle6({
     }
   },
   label: {
-    fontSize: "12px"
+    textStyle: "text.sm"
   }
 });
 var variants4 = {
   errors: errors2,
   unstyled: unstyled3
 };
-var Radio2 = defineMultiStyleConfig6({
-  baseStyle: baseStyle7,
+var Radio2 = defineMultiStyleConfig7({
+  baseStyle: baseStyle8,
   variants: variants4,
   defaultProps: {
     variant: "unstyled"
@@ -12529,9 +13026,9 @@ var radio_default = Radio2;
 
 // src/config/theme/components/switch.ts
 import { switchAnatomy as parts5 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers8, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
 import { calc, cssVar as cssVar2 } from "@chakra-ui/theme-tools";
-var { defineMultiStyleConfig: defineMultiStyleConfig7, definePartsStyle: definePartsStyle7 } = createMultiStyleConfigHelpers7(parts5.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig8, definePartsStyle: definePartsStyle8 } = createMultiStyleConfigHelpers8(parts5.keys);
 var $width = cssVar2("switch-track-width");
 var $height = cssVar2("switch-track-height");
 var $diff = cssVar2("switch-track-diff");
@@ -12548,7 +13045,7 @@ var baseStyleThumb = defineStyle4({
     transform: `translateX(${$translateX.reference})`
   }
 });
-var baseStyle8 = definePartsStyle7(() => ({
+var baseStyle9 = definePartsStyle8(() => ({
   container: {
     [$diff.variable]: diffValue,
     [$translateX.variable]: $diff.reference,
@@ -12573,17 +13070,17 @@ var baseStyle8 = definePartsStyle7(() => ({
   thumb: baseStyleThumb
 }));
 var sizes3 = {
-  sm: definePartsStyle7({
+  sm: definePartsStyle8({
     container: {
       [$width.variable]: "1.875rem",
-      [$height.variable]: "0.75rem"
+      [$height.variable]: "0.8rem"
     },
     thumb: {
-      [$width.variable]: "0.75rem",
-      [$height.variable]: "0.75rem"
+      [$width.variable]: "0.8rem",
+      [$height.variable]: "0.8rem"
     }
   }),
-  md: definePartsStyle7({
+  md: definePartsStyle8({
     container: {
       [$width.variable]: "2.375rem",
       [$height.variable]: "1rem"
@@ -12593,7 +13090,7 @@ var sizes3 = {
       [$height.variable]: "1rem"
     }
   }),
-  lg: definePartsStyle7({
+  lg: definePartsStyle8({
     container: {
       [$width.variable]: "3.25rem",
       [$height.variable]: "1.375rem"
@@ -12604,8 +13101,8 @@ var sizes3 = {
     }
   })
 };
-var Switch3 = defineMultiStyleConfig7({
-  baseStyle: baseStyle8,
+var Switch3 = defineMultiStyleConfig8({
+  baseStyle: baseStyle9,
   sizes: sizes3,
   defaultProps: {
     size: "md"
@@ -12615,16 +13112,33 @@ var switch_default2 = Switch3;
 
 // src/config/theme/components/table.ts
 import { tableAnatomy as parts6 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers8, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers9, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
 import { mode as mode2 } from "@chakra-ui/theme-tools";
-var { defineMultiStyleConfig: defineMultiStyleConfig8, definePartsStyle: definePartsStyle8 } = createMultiStyleConfigHelpers8(parts6.keys);
-var baseStyle9 = definePartsStyle8({
+var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = createMultiStyleConfigHelpers9(parts6.keys);
+var baseStyle10 = definePartsStyle9({
   table: {
     fontVariantNumeric: "lining-nums tabular-nums",
     borderCollapse: "separate",
     borderSpacing: 0,
     width: "full",
-    tableLayout: "fixed"
+    tableLayout: "fixed",
+    "&:not([data-loading=true])": {
+      tbody: {
+        tr: {
+          cursor: "pointer",
+          _hover: {
+            td: {
+              backgroundColor: "neutral.200"
+            }
+          },
+          '&[data-active="true"]': {
+            td: {
+              backgroundColor: "neutral.100"
+            }
+          }
+        }
+      }
+    }
   },
   th: {
     fontFamily: "heading",
@@ -12633,7 +13147,7 @@ var baseStyle9 = definePartsStyle8({
     letterSpacing: "normal",
     textAlign: "start",
     height: "50px",
-    color: mode2("neutral.900", "white"),
+    color: "black.high",
     fontSize: "text.sm",
     lineHeight: "18px",
     backgroundColor: "neutral.50",
@@ -12644,27 +13158,6 @@ var baseStyle9 = definePartsStyle8({
       pr: 6
     }
   },
-  tbody: {
-    tr: {
-      cursor: "pointer",
-      _hover: {
-        td: {
-          backgroundColor: "neutral.200",
-          "&>div": {
-            backgroundColor: "neutral.200"
-          }
-        }
-      },
-      '&[data-active="true"]': {
-        td: {
-          backgroundColor: "neutral.100",
-          "&>div": {
-            backgroundColor: "neutral.200"
-          }
-        }
-      }
-    }
-  },
   td: {
     // backgroundColor: 'neutral.50',
     textAlign: "start",
@@ -12691,11 +13184,11 @@ var numericStyles = defineStyle5({
     textAlign: "end"
   }
 });
-var variantSimple = definePartsStyle8((props) => {
+var variantSimple = definePartsStyle9((props) => {
   const { colorScheme: c2 } = props;
   return {
     th: {
-      color: mode2("gray.600", "gray.400")(props),
+      color: "black.high",
       borderBottom: "1px",
       borderColor: mode2(`${c2}.100`, `${c2}.700`)(props),
       ...numericStyles
@@ -12717,11 +13210,11 @@ var variantSimple = definePartsStyle8((props) => {
     }
   };
 });
-var variantStripe = definePartsStyle8((props) => {
+var variantStripe = definePartsStyle9((props) => {
   const { colorScheme: c2 } = props;
   return {
     th: {
-      color: mode2("gray.600", "gray.400")(props),
+      color: "black.high",
       borderBottom: "1px",
       borderColor: mode2(`${c2}.100`, `${c2}.700`)(props),
       ...numericStyles
@@ -12762,7 +13255,7 @@ var variants5 = {
   unstyled: defineStyle5({})
 };
 var sizes4 = {
-  sm: definePartsStyle8({
+  sm: definePartsStyle9({
     th: {
       px: "2",
       py: "4",
@@ -12781,7 +13274,7 @@ var sizes4 = {
       fontSize: "xs"
     }
   }),
-  md: definePartsStyle8({
+  md: definePartsStyle9({
     th: {
       px: "2",
       py: "4",
@@ -12799,7 +13292,7 @@ var sizes4 = {
       fontSize: "sm"
     }
   }),
-  lg: definePartsStyle8({
+  lg: definePartsStyle9({
     th: {
       px: "2",
       py: "4",
@@ -12818,8 +13311,8 @@ var sizes4 = {
     }
   })
 };
-var tableTheme = defineMultiStyleConfig8({
-  baseStyle: baseStyle9,
+var tableTheme = defineMultiStyleConfig9({
+  baseStyle: baseStyle10,
   variants: variants5,
   sizes: sizes4,
   defaultProps: {
@@ -12832,9 +13325,9 @@ var table_default = tableTheme;
 
 // src/config/theme/components/tabs.ts
 import { tabsAnatomy as parts7 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers9 } from "@chakra-ui/styled-system";
-var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = createMultiStyleConfigHelpers9(parts7.keys);
-var variantLine = definePartsStyle9((props) => {
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers10 } from "@chakra-ui/styled-system";
+var { defineMultiStyleConfig: defineMultiStyleConfig10, definePartsStyle: definePartsStyle10 } = createMultiStyleConfigHelpers10(parts7.keys);
+var variantLine = definePartsStyle10((props) => {
   const { orientation } = props;
   const isVertical = orientation === "vertical";
   const borderProp = isVertical ? "borderStart" : "borderBottom";
@@ -12846,17 +13339,17 @@ var variantLine = definePartsStyle9((props) => {
     },
     tab: {
       [borderProp]: "1px solid",
-      borderColor: "transparent",
+      borderColor: "neutral.400",
       [marginProp]: "-1px"
     }
   };
 });
-var variantUnstyled = definePartsStyle9({});
+var variantUnstyled = definePartsStyle10({});
 var variants6 = {
   line: variantLine,
   unstyled: variantUnstyled
 };
-var tabsTheme = defineMultiStyleConfig9({
+var tabsTheme = defineMultiStyleConfig10({
   variants: variants6,
   defaultProps: {
     size: "md",
@@ -12866,7 +13359,7 @@ var tabsTheme = defineMultiStyleConfig9({
 var tabs_default = tabsTheme;
 
 // src/config/theme/components/textarea.ts
-import { defineStyle as defineStyle6, defineStyleConfig as defineStyleConfig7 } from "@chakra-ui/react";
+import { defineStyle as defineStyle6, defineStyleConfig as defineStyleConfig6 } from "@chakra-ui/react";
 var getProps = (props) => {
   const { isError, isSuccess, isDisabled } = props;
   let borderColor = "neutral.400";
@@ -12886,7 +13379,7 @@ var getProps = (props) => {
     borderColor
   };
 };
-var outline2 = defineStyle6((props) => {
+var outline3 = defineStyle6((props) => {
   const { focusBorderColor, borderColor } = getProps(props);
   return {
     background: "white.high",
@@ -12930,8 +13423,8 @@ var outline2 = defineStyle6((props) => {
     }
   };
 });
-var Textarea = defineStyleConfig7({
-  variants: { outline: outline2 },
+var Textarea = defineStyleConfig6({
+  variants: { outline: outline3 },
   defaultProps: {
     variant: "outline"
   }
@@ -12939,14 +13432,15 @@ var Textarea = defineStyleConfig7({
 var textarea_default2 = Textarea;
 
 // src/config/theme/components/tooltip.ts
-import { cssVar as cssVar3, defineStyleConfig as defineStyleConfig8 } from "@chakra-ui/react";
+import { cssVar as cssVar3, defineStyleConfig as defineStyleConfig7 } from "@chakra-ui/react";
 var $arrowBg = cssVar3("popper-arrow-bg");
-var baseStyle10 = {
+var baseStyle11 = {
   bg: "neutral.700",
+  textStyle: "text.sm",
   fontSize: "text.sm",
   [$arrowBg.variable]: "var(--chakra-colors-neutral-700)"
 };
-var Tooltip2 = defineStyleConfig8({ baseStyle: baseStyle10 });
+var Tooltip2 = defineStyleConfig7({ baseStyle: baseStyle11 });
 var tooltip_default = Tooltip2;
 
 // src/config/theme/themeConfiguration.ts
@@ -12972,7 +13466,7 @@ var getTheme = (foundations) => {
     config
   });
 };
-var theme5 = extendTheme({
+var theme4 = extendTheme({
   components: {
     ...components_exports
   },
@@ -12992,13 +13486,13 @@ var theme5 = extendTheme({
 
 // src/hooks/useFetcher.ts
 import axios2 from "axios";
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo9 } from "react";
 
 // src/provider/components/provider.tsx
 import axios from "axios";
-import { createContext as createContext8, useContext as useContext14, useEffect as useEffect13, useMemo as useMemo10, useRef as useRef9 } from "react";
-import { ToastContainer } from "react-toastify";
-import { jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
+import { createContext as createContext8, useContext as useContext14, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef10 } from "react";
+import { ToastContainer as ToastContainer2 } from "react-toastify";
+import { jsx as jsx69, jsxs as jsxs31 } from "react/jsx-runtime";
 var ProviderContext = createContext8({
   instance: void 0
 });
@@ -13007,7 +13501,7 @@ var useInternalUI = () => {
   return { instance };
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
-  const instanceRef = useRef9(axios.create(config2));
+  const instanceRef = useRef10(axios.create(config2));
   useEffect13(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
@@ -13016,9 +13510,9 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
       instanceRef.current.interceptors.response.use(interceptor);
     });
   }, [requestInterceptors, responseInterceptors]);
-  const provider = useMemo10(() => ({ instance: instanceRef.current }), []);
-  return /* @__PURE__ */ jsxs30(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx65(ToastContainer, {}),
+  const provider = useMemo8(() => ({ instance: instanceRef.current }), []);
+  return /* @__PURE__ */ jsxs31(ProviderContext.Provider, { value: provider, children: [
+    /* @__PURE__ */ jsx69(ToastContainer2, {}),
     children
   ] });
 };
@@ -13037,7 +13531,7 @@ import {
 // src/hooks/useFetcher.ts
 function useFetcher() {
   const { instance } = useInternalUI();
-  const axiosInstance = useMemo11(() => instance || axios2, [instance]);
+  const axiosInstance = useMemo9(() => instance || axios2, [instance]);
   const fetcher = async ({ url, data, method, headers, ...config2 }) => {
     const response = await axiosInstance.request({
       data,
@@ -13061,7 +13555,7 @@ import {
   useBoolean,
   useClipboard,
   useColorMode as useColorMode8,
-  useColorModeValue as useColorModeValue12,
+  useColorModeValue as useColorModeValue11,
   useConst,
   useControllableProp,
   useControllableState,
@@ -13112,7 +13606,7 @@ export {
   AvatarGroupProps,
   AvatarProps,
   badge_default as Badge,
-  Box20 as Box,
+  Box19 as Box,
   BoxProps,
   bread_crumb_default as BreadCrumb,
   button_default as Button,
@@ -13160,11 +13654,10 @@ export {
   ModalOverlay3 as DrawerOverlay,
   DrawerProps,
   empty_state_default as EmptyState,
-  layout_default as EmptyStateLayout,
   Fade,
   FadeProps,
   field_default as Field,
-  Flex6 as Flex,
+  Flex8 as Flex,
   FlexProps,
   FormControl2 as FormControl,
   FormControlProps,
@@ -13177,16 +13670,16 @@ export {
   GridItemProps,
   GridProps,
   HStack4 as HStack,
-  header_default as Header,
+  Header,
   Heading,
   HeadingProps,
   Hide,
   HideProps,
-  Icon2 as Icon,
-  IconButton,
+  Icon3 as Icon,
+  IconButton2 as IconButton,
   IconButtonProps,
   IconProps,
-  Image2 as Image,
+  Image3 as Image,
   ImageProps,
   Img,
   ImgProps,
@@ -13214,6 +13707,7 @@ export {
   ListItemProps,
   ListProps,
   loader_default as Loader,
+  Logo,
   navigation_default as MainMenu,
   Modal2 as Modal,
   modal_back_button_default as ModalBackButton,
@@ -13233,6 +13727,7 @@ export {
   ModalProps,
   multi_datepicker_month_default as MultiDatePickerMonth,
   NavItem,
+  Navbar,
   navigation_bar_default as NavigationBar,
   OrderedList,
   pagination_default as Pagination,
@@ -13255,6 +13750,7 @@ export {
   PopoverTrigger4 as PopoverTrigger,
   Portal2 as Portal,
   PortalProps,
+  Profile,
   provider_default as Provider,
   ProviderContext,
   Radio,
@@ -13322,8 +13818,8 @@ export {
   Th2 as Th,
   Thead2 as Thead,
   ThemeTypings,
+  ToastContainer,
   Tooltip,
-  TooltipProps,
   Tr2 as Tr,
   UnorderedList,
   uploader_default as Uploader,
@@ -13354,17 +13850,20 @@ export {
   UseTabsProps,
   UseTabsReturn,
   VStack3 as VStack,
+  Version,
   VisuallyHidden2 as VisuallyHidden,
   VisuallyHiddenInput,
+  VoilaLogo,
   Wrap,
   WrapItem,
   WrapItemProps,
   WrapProps,
+  XMSLogo,
   extendTheme2 as extendTheme,
   forwardRef16 as forwardRef,
   getSelectAllCheckboxState,
   getTheme,
-  theme5 as theme,
+  theme4 as theme,
   useAccordion,
   useAccordionContext,
   useAccordionItem,
@@ -13373,12 +13872,12 @@ export {
   useAlertStyles,
   useBoolean,
   useBreakpoint,
-  useCheckbox,
+  useCheckbox2 as useCheckbox,
   useCheckboxGroup,
   useClipboard,
   useColorMode8 as useColorMode,
   useColorModePreference,
-  useColorModeValue12 as useColorModeValue,
+  useColorModeValue11 as useColorModeValue,
   useConst,
   useControllableProp,
   useControllableState,
@@ -13411,6 +13910,7 @@ export {
   useTabsDescendantsContext,
   useTabsStyles,
   useTheme,
+  useToast,
   useToken2 as useToken
 };
 //# sourceMappingURL=index.mjs.map