@ctlyst.id/internal-ui 2.2.0 → 2.2.1

package/dist/index.mjs

@@ -2655,12 +2655,56 @@ 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 jsx40 } from "react/jsx-runtime";
+var NavItem = ({ children, isActive, isChild, isDisabled, ...props }) => {
+  return /* @__PURE__ */ jsx40(
+    Link2,
+    {
+      "data-test-id": "7quRuVrffI7_tnCF4jUSV",
+      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
+};
+
 // src/components/navigation/components/navigation.tsx
 import {
   Box as Box21,
   Button as Button2,
   Flex as Flex6,
-  Link as Link2,
+  Link as Link3,
   Popover as Popover2,
   PopoverContent as PopoverContent2,
   PopoverTrigger as PopoverTrigger2,
@@ -2673,26 +2717,26 @@ import { css as css3 } from "@emotion/react";
 
 // src/components/navigation/components/mapping-icon.tsx
 import * as Icon2 from "@ctlyst.id/internal-icon";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var mappingIcon = /* @__PURE__ */ new Map([
-  ["Order", /* @__PURE__ */ jsx40(Icon2.ShoppingBag, { size: 4, color: "inherit" }, "order")],
-  ["Fulfillment", /* @__PURE__ */ jsx40(Icon2.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
-  ["Transfer Stock", /* @__PURE__ */ jsx40(Icon2.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
-  ["Stock", /* @__PURE__ */ jsx40(Icon2.Box, { size: 4, color: "inherit" }, "stock")],
-  ["Product Database", /* @__PURE__ */ jsx40(Icon2.Layers, { size: 4, color: "inherit" }, "product-database")],
-  ["Purchasing", /* @__PURE__ */ jsx40(Icon2.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
-  ["Reseller", /* @__PURE__ */ jsx40(Icon2.Users, { size: 4, color: "inherit" }, "reseller")],
-  ["Retur", /* @__PURE__ */ jsx40(Icon2.RotateCcw, { size: 4, color: "inherit" }, "retur")],
-  ["Other", /* @__PURE__ */ jsx40(Icon2.Settings, { size: 4, color: "inherit" }, "other")],
-  ["Content", /* @__PURE__ */ jsx40(Icon2.Layout, { size: 4, color: "inherit" }, "content")],
-  ["Customer", /* @__PURE__ */ jsx40(Icon2.HelpCircle, { size: 4, color: "inherit" }, "content")],
-  ["Voucher", /* @__PURE__ */ jsx40(Icon2.Gift, { size: 4, color: "inherit" }, "content")]
+  ["Order", /* @__PURE__ */ jsx41(Icon2.ShoppingBag, { size: 4, color: "inherit" }, "order")],
+  ["Fulfillment", /* @__PURE__ */ jsx41(Icon2.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
+  ["Transfer Stock", /* @__PURE__ */ jsx41(Icon2.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
+  ["Stock", /* @__PURE__ */ jsx41(Icon2.Box, { size: 4, color: "inherit" }, "stock")],
+  ["Product Database", /* @__PURE__ */ jsx41(Icon2.Layers, { size: 4, color: "inherit" }, "product-database")],
+  ["Purchasing", /* @__PURE__ */ jsx41(Icon2.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
+  ["Reseller", /* @__PURE__ */ jsx41(Icon2.Users, { size: 4, color: "inherit" }, "reseller")],
+  ["Retur", /* @__PURE__ */ jsx41(Icon2.RotateCcw, { size: 4, color: "inherit" }, "retur")],
+  ["Other", /* @__PURE__ */ jsx41(Icon2.Settings, { size: 4, color: "inherit" }, "other")],
+  ["Content", /* @__PURE__ */ jsx41(Icon2.Layout, { size: 4, color: "inherit" }, "content")],
+  ["Customer", /* @__PURE__ */ jsx41(Icon2.HelpCircle, { size: 4, color: "inherit" }, "content")],
+  ["Voucher", /* @__PURE__ */ jsx41(Icon2.Gift, { size: 4, color: "inherit" }, "content")]
 ]);
 
 // src/components/navigation/components/navigation.tsx
-import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
 var Navigation = ({ navigations, activePath, as, host, ...props }) => {
-  return /* @__PURE__ */ jsx41(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx42(
     Flex6,
     {
       bg: "white",
@@ -2707,8 +2751,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__ */ jsx41(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-          /* @__PURE__ */ jsx41(PopoverTrigger2, { children: /* @__PURE__ */ jsx41(
+        return /* @__PURE__ */ jsx42(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
+          /* @__PURE__ */ jsx42(PopoverTrigger2, { children: /* @__PURE__ */ jsx42(
             Button2,
             {
               h: 7.5,
@@ -2722,11 +2766,11 @@ 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__ */ jsx41(Icon3.ChevronDown, { size: 4, color: "inherit" }),
+              rightIcon: /* @__PURE__ */ jsx42(Icon3.ChevronDown, { size: 4, color: "inherit" }),
               children: navigation.title
             }
           ) }),
-          navigation.children && /* @__PURE__ */ jsx41(Portal, { children: /* @__PURE__ */ jsx41(Box21, { zIndex: "popover", children: /* @__PURE__ */ jsx41(
+          navigation.children && /* @__PURE__ */ jsx42(Portal, { children: /* @__PURE__ */ jsx42(Box21, { zIndex: "popover", children: /* @__PURE__ */ jsx42(
             PopoverContent2,
             {
               bg: useColorModeValue8("white", "ebony-clay.800"),
@@ -2738,8 +2782,8 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                 const link = navHost ? `${navHost}${navLink}` : navLink;
                 const isLocalLink = host === navHost;
                 const isActiveSub = activePath === navLink;
-                return /* @__PURE__ */ jsx41(
-                  Link2,
+                return /* @__PURE__ */ jsx42(
+                  Link3,
                   {
                     as: isLocalLink ? as : void 0,
                     href: link,
@@ -2770,8 +2814,8 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         py: 4,
                         children: [
                           mappingIcon.get(navigation.title),
-                          /* @__PURE__ */ jsx41(Text8, { fontSize: "text.sm", ml: 3, children: title }),
-                          isActiveSub && /* @__PURE__ */ jsx41(
+                          /* @__PURE__ */ jsx42(Text8, { fontSize: "text.sm", ml: 3, children: title }),
+                          isActiveSub && /* @__PURE__ */ jsx42(
                             Box21,
                             {
                               width: 0.5,
@@ -2805,9 +2849,9 @@ Navigation.defaultProps = {
 var navigation_default = Navigation;
 
 // src/components/navigation/components/navigation-bar.tsx
-import { Box as Box22, Button as Button3, Flex as Flex7, Link as Link3, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text9 } from "@chakra-ui/react";
+import { Box as Box22, Button as Button3, Flex as Flex7, Link as Link4, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text9 } from "@chakra-ui/react";
 import * as Icon4 from "@ctlyst.id/internal-icon";
-import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
 var NavigationBar = ({
   navigations,
   isFetched,
@@ -2822,7 +2866,7 @@ var NavigationBar = ({
     }
     return subMenu.navHost + subMenu.navLink;
   };
-  return /* @__PURE__ */ jsx42(Box22, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(Box22, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx43(
     Flex7,
     {
       bg: "white",
@@ -2839,8 +2883,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__ */ jsx42(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
-          /* @__PURE__ */ jsx42(PopoverTrigger3, { children: /* @__PURE__ */ jsx42(
+        return /* @__PURE__ */ jsx43(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          /* @__PURE__ */ jsx43(PopoverTrigger3, { children: /* @__PURE__ */ jsx43(
             Button3,
             {
               h: 7.5,
@@ -2854,12 +2898,12 @@ var NavigationBar = ({
               backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
               color: isActive ? "primary.50" : "black.high",
               leftIcon: mappingIcon2.get(item.title),
-              rightIcon: /* @__PURE__ */ jsx42(Icon4.ChevronDown, { size: 4, color: "inherit" }),
+              rightIcon: /* @__PURE__ */ jsx43(Icon4.ChevronDown, { size: 4, color: "inherit" }),
               children: item.title
             }
           ) }),
-          item.children && /* @__PURE__ */ jsx42(PopoverContent3, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
-            Link3,
+          item.children && /* @__PURE__ */ jsx43(PopoverContent3, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
+            Link4,
             {
               href: urlMenu(subMenu),
               display: "flex",
@@ -2876,7 +2920,7 @@ var NavigationBar = ({
               "data-test-id": `CT_component_navigation_link-${item.id}`,
               children: [
                 mappingIcon2.get(item.title),
-                /* @__PURE__ */ jsx42(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
+                /* @__PURE__ */ jsx43(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
               ]
             },
             subMenu.id
@@ -2897,13 +2941,13 @@ import { Box as Box23, Text as Text10, useColorModeValue as useColorModeValue10
 
 // src/components/pagination/components/pagination-button.tsx
 import { Button as Button4, forwardRef as forwardRef12, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } 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__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     Button4,
     {
       "data-test-id": "Pagination-Button",
@@ -2942,7 +2986,7 @@ var pagination_button_default = PaginationButton;
 
 // src/components/pagination/components/pagination-button-trigger.tsx
 import { VisuallyHidden } from "@chakra-ui/react";
-import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
 var PaginationButtonTrigger = ({
   color,
   isDisabled,
@@ -2950,7 +2994,7 @@ var PaginationButtonTrigger = ({
   visuallyHidden,
   icon
 }) => /* @__PURE__ */ jsxs19(pagination_button_default, { "data-test-id": "DLVCc_fBK35spHm5WxjcJ", color, isDisabled, onClick, children: [
-  /* @__PURE__ */ jsx44(VisuallyHidden, { children: visuallyHidden }),
+  /* @__PURE__ */ jsx45(VisuallyHidden, { children: visuallyHidden }),
   icon
 ] });
 PaginationButtonTrigger.defaultProps = {
@@ -2963,7 +3007,7 @@ PaginationButtonTrigger.defaultProps = {
 var pagination_button_trigger_default = PaginationButtonTrigger;
 
 // src/components/pagination/components/pagination.tsx
-import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx46, 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");
@@ -2994,7 +3038,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
     return pageButtons;
   };
   return /* @__PURE__ */ jsxs20(Box23, { className, display: "inline-flex", alignItems: "center", children: [
-    /* @__PURE__ */ jsx45(Box23, { mr: 1, children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(Box23, { mr: 1, children: /* @__PURE__ */ jsx46(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3002,11 +3046,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledPrevious,
         onClick: () => handleSelectPage(1),
         visuallyHidden: "First Page",
-        icon: /* @__PURE__ */ jsx45(ArrowLeftIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx46(ArrowLeftIcon, { width: 2 })
       }
     ) }),
     /* @__PURE__ */ jsxs20(Box23, { bg: "neutral.300", borderRadius: "full", children: [
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx46(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3014,22 +3058,22 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledPrevious,
           onClick: () => handleSelectPage(current - 1),
           visuallyHidden: "Previous Page",
-          icon: /* @__PURE__ */ jsx45(ChevronLeftIcon2, {})
+          icon: /* @__PURE__ */ jsx46(ChevronLeftIcon2, {})
         }
       ),
       generatePages().map((page) => {
-        return /* @__PURE__ */ jsx45(
+        return /* @__PURE__ */ jsx46(
           pagination_button_default,
           {
             "data-test-id": "Pagination-Button",
             isActive: page === current,
             onClick: () => typeof page === "number" ? handleSelectPage(page) : null,
-            children: /* @__PURE__ */ jsx45(Text10, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
+            children: /* @__PURE__ */ jsx46(Text10, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
           },
           page
         );
       }),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx46(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3037,11 +3081,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledNext,
           onClick: () => handleSelectPage(current + 1),
           visuallyHidden: "Next Page",
-          icon: /* @__PURE__ */ jsx45(ChevronRightIcon, {})
+          icon: /* @__PURE__ */ jsx46(ChevronRightIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx45(Box23, { ml: 1, children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(Box23, { ml: 1, children: /* @__PURE__ */ jsx46(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3049,7 +3093,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledNext,
         onClick: () => handleSelectPage(total),
         visuallyHidden: "Last Page",
-        icon: /* @__PURE__ */ jsx45(ArrowRightIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx46(ArrowRightIcon, { width: 2 })
       }
     ) })
   ] });
@@ -3063,7 +3107,7 @@ var pagination_default = Pagination;
 
 // src/components/pagination/components/pagination-detail.tsx
 import { Text as Text11 } from "@chakra-ui/react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var PaginationDetail = ({
   page,
   limit,
@@ -3073,7 +3117,7 @@ var PaginationDetail = ({
   lineHeight = 18,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx46(Text11, { scale, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
+  return /* @__PURE__ */ jsx47(Text11, { scale, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
 };
 var pagination_detail_default = PaginationDetail;
 
@@ -3081,7 +3125,7 @@ var pagination_detail_default = PaginationDetail;
 import { Box as Box24, Select, Text as Text12, useColorModeValue as useColorModeValue11 } from "@chakra-ui/react";
 import * as React13 from "react";
 import { FiChevronDown } from "react-icons/fi";
-import { jsx as jsx47, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs21 } from "react/jsx-runtime";
 var PaginationFilter = ({
   limit,
   label = "Baris per halaman:",
@@ -3091,8 +3135,8 @@ var PaginationFilter = ({
 }) => {
   const [value, setValue] = React13.useState(limit);
   return /* @__PURE__ */ jsxs21(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
-    /* @__PURE__ */ jsx47(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue11("neutral.900", "white"), ...rest, children: label }),
-    /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx48(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue11("neutral.900", "white"), ...rest, children: label }),
+    /* @__PURE__ */ jsx48(
       Select,
       {
         textAlign: "center",
@@ -3101,7 +3145,7 @@ var PaginationFilter = ({
         border: "none",
         boxShadow: "none",
         width: 18,
-        icon: /* @__PURE__ */ jsx47(FiChevronDown, {}),
+        icon: /* @__PURE__ */ jsx48(FiChevronDown, {}),
         _focusVisible: { boxShadow: "none" },
         onChange: (e) => {
           const numberValue = Number(e.target.value);
@@ -3110,7 +3154,7 @@ var PaginationFilter = ({
         },
         value,
         children: items.map((item) => {
-          return /* @__PURE__ */ jsx47("option", { value: item, children: item }, item);
+          return /* @__PURE__ */ jsx48("option", { value: item, children: item }, item);
         })
       }
     )
@@ -3145,7 +3189,7 @@ import {
 
 // src/components/radio/components/radio.tsx
 import { Box as Box25, Radio as ChakraRadio, Text as Text13 } from "@chakra-ui/react";
-import { jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
 var Radio = ({
   isError = false,
   helpText = "",
@@ -3156,8 +3200,8 @@ var Radio = ({
 }) => {
   const variant = isError ? "errors" : "unstyled";
   return /* @__PURE__ */ jsxs22(Box25, { children: [
-    /* @__PURE__ */ jsx48(Box25, { display: "flex", children: /* @__PURE__ */ jsx48(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-    /* @__PURE__ */ jsx48(Box25, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
+    /* @__PURE__ */ jsx49(Box25, { display: "flex", children: /* @__PURE__ */ jsx49(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx49(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+    /* @__PURE__ */ jsx49(Box25, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx49(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx49(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
   ] });
 };
 Radio.displayName = "Radio";
@@ -3169,7 +3213,7 @@ Radio.defaultProps = {
 
 // src/components/radio/components/radio-group.tsx
 import { Box as Box26, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var RadioGroup = ({
   children,
   label,
@@ -3178,7 +3222,7 @@ var RadioGroup = ({
   errorMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx49(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx49(Box26, { mt: "12px", children: /* @__PURE__ */ jsx49(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx49(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
+  return /* @__PURE__ */ jsx50(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx50(Box26, { mt: "12px", children: /* @__PURE__ */ jsx50(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx50(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 };
 RadioGroup.displayName = "RadioGroup";
 RadioGroup.defaultProps = {
@@ -3201,9 +3245,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 jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var Rating = ({ value }) => {
-  return /* @__PURE__ */ jsx50(Grid2, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx50(RatingIcon, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
+  return /* @__PURE__ */ jsx51(Grid2, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx51(RatingIcon, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
 };
 var rating_default = Rating;
 
@@ -3559,14 +3603,14 @@ var themeSelect = (theme6) => {
 };
 
 // src/components/select/components/select.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function Select2({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode3();
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     ReactSelect,
     {
       classNamePrefix: "react-select",
@@ -3581,14 +3625,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 jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function SelectAsync({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode4();
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     AsyncPaginate,
     {
       classNamePrefix: "react-select",
@@ -3603,10 +3647,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 jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode5();
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     ReactSelectAsyncCreatable,
     {
       classNamePrefix: "react-select",
@@ -3620,10 +3664,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 jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function SelectCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode6();
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     ReactSelectCreatable,
     {
       classNamePrefix: "react-select",
@@ -3638,7 +3682,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 import { Checkbox as Checkbox3, Flex as Flex8, Text as Text14 } 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 jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs23 } from "react/jsx-runtime";
 var CHECKBOX_STATE = {
   UNCHECKED: 0,
   INDETERMINATE: 1,
@@ -3686,7 +3730,7 @@ var InputOption = ({
     style
   };
   return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       ComponentRS.Option,
       {
         isMulti: true,
@@ -3707,7 +3751,7 @@ var InputOption = ({
             "data-test-id": "CT_component_select-checkbox_options",
             cursor: isDisabled ? "not-allowed" : "default",
             children: [
-              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx55(
+              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx56(
                 Checkbox3,
                 {
                   isChecked: checkedState === CHECKBOX_STATE.CHECKED,
@@ -3715,14 +3759,14 @@ var InputOption = ({
                   isDisabled,
                   "data-test-id": "CT_component_select-checkbox_select-all-option"
                 }
-              ) : /* @__PURE__ */ jsx55(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
-              /* @__PURE__ */ jsx55(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+              ) : /* @__PURE__ */ jsx56(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
+              /* @__PURE__ */ jsx56(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
             ]
           }
         )
       }
     ),
-    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx55("hr", {}) : null
+    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx56("hr", {}) : null
   ] });
 };
 var SelectWithCheckboxBase = ({
@@ -3732,7 +3776,7 @@ var SelectWithCheckboxBase = ({
   ...rest
 }) => {
   const { colorMode } = useColorMode7();
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     ReactSelect2,
     {
       classNamePrefix: "react-select",
@@ -3751,7 +3795,7 @@ var SelectWithCheckboxBase = ({
 var SelectCheckbox = (props) => {
   const { isMulti, options, value, ...rest } = props;
   const selectValue = value || [];
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     SelectWithCheckboxBase,
     {
       isMulti,
@@ -3762,7 +3806,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__ */ jsx55(InputOption, { ...optionProps, checkedState });
+          return /* @__PURE__ */ jsx56(InputOption, { ...optionProps, checkedState });
         }
       },
       ...rest
@@ -3773,10 +3817,10 @@ var select_with_checkbox_default = SelectCheckbox;
 
 // src/components/switch/components/switch.tsx
 import { chakra as chakra6, Flex as Flex9, forwardRef as forwardRef13, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox2, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
-import { cx as cx9, dataAttr } from "@chakra-ui/shared-utils";
+import { cx as cx10, dataAttr } from "@chakra-ui/shared-utils";
 import { Check, Close as Close4 } from "@ctlyst.id/internal-icon";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs24 } from "react/jsx-runtime";
 var Switch = forwardRef13(function Switch2(props, ref) {
   const styles = useMultiStyleConfig2("Switch", props);
   const { spacing: spacing2 = "0.5rem", children, ...ownProps } = omitThemingProps2(props);
@@ -3825,16 +3869,16 @@ var Switch = forwardRef13(function Switch2(props, ref) {
       ...getRootProps(),
       display: "flex",
       alignItems: "center",
-      className: cx9("chakra-switch", props.className),
+      className: cx10("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ jsx56("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ jsx57("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
         /* @__PURE__ */ jsxs24(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
           /* @__PURE__ */ jsxs24(Flex9, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ jsx56(Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx56(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+            /* @__PURE__ */ jsx57(Check, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ jsx57(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx57(
             chakra6.span,
             {
               __css: styles.thumb,
@@ -3844,7 +3888,7 @@ var Switch = forwardRef13(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx56(
+        children && /* @__PURE__ */ jsx57(
           chakra6.span,
           {
             className: "chakra-switch__label",
@@ -3881,13 +3925,13 @@ import {
 
 // src/components/tabs/components/tab.tsx
 import { Button as Button5, Flex as Flex10, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
 var Tab = forwardRef14((props, ref) => {
   var _a, _b;
   const tabProps = useTab({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Button5,
     {
       "data-test-id": props["data-test-id"],
@@ -3959,7 +4003,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/text/index.ts
-import { Code, CodeProps, Heading, HeadingProps, Link as Link4, LinkProps, Text as Text15, TextProps } from "@chakra-ui/react";
+import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text15, TextProps } from "@chakra-ui/react";
 
 // src/components/tooltip/index.ts
 import { Tooltip, TooltipProps } from "@chakra-ui/react";
@@ -3979,7 +4023,7 @@ var messages = {
 };
 
 // src/components/uploader/components/uploader.tsx
-import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs26 } from "react/jsx-runtime";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -4040,11 +4084,11 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          /* @__PURE__ */ jsx58("input", { ...getInputProps() }),
-          isDragActive ? /* @__PURE__ */ jsx58(Text16, { children: messages.dragActive }) : /* @__PURE__ */ jsxs26(Flex11, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
-            !multiple && isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
-            !isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
-            isSelected ? /* @__PURE__ */ jsx58(Text16, { children: messages.dragReplace }) : /* @__PURE__ */ jsx58(Text16, { children: messages.dragInActive })
+          /* @__PURE__ */ jsx59("input", { ...getInputProps() }),
+          isDragActive ? /* @__PURE__ */ jsx59(Text16, { children: messages.dragActive }) : /* @__PURE__ */ jsxs26(Flex11, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
+            !multiple && isSelected && /* @__PURE__ */ jsx59(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
+            !isSelected && /* @__PURE__ */ jsx59(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
+            isSelected ? /* @__PURE__ */ jsx59(Text16, { children: messages.dragReplace }) : /* @__PURE__ */ jsx59(Text16, { children: messages.dragInActive })
           ] })
         ]
       }
@@ -4836,7 +4880,7 @@ var baseStyle5 = definePartsStyle4({
     minWidth: 0,
     outline: 0,
     px: 2,
-    py: 2.5,
+    py: 2,
     paddingInlineStart: 2,
     paddingInlineEnd: 2,
     position: "relative",
@@ -5651,7 +5695,7 @@ import { useMemo as useMemo7 } from "react";
 import axios from "axios";
 import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo6, useRef as useRef2 } from "react";
 import { ToastContainer } from "react-toastify";
-import { jsx as jsx59, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs27 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
   instance: void 0
 });
@@ -5671,7 +5715,7 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo6(() => ({ instance: instanceRef.current }), []);
   return /* @__PURE__ */ jsxs27(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx59(ToastContainer, {}),
+    /* @__PURE__ */ jsx60(ToastContainer, {}),
     children
   ] });
 };
@@ -5857,7 +5901,7 @@ export {
   InputRightAddonProps,
   InputRightElement2 as InputRightElement,
   InputRightElementProps,
-  Link4 as Link,
+  Link5 as Link,
   LinkProps,
   List,
   ListIcon,
@@ -5883,6 +5927,7 @@ export {
   ModalOverlayProps,
   ModalProps,
   multi_datepicker_month_default as MultiDatePickerMonth,
+  NavItem,
   navigation_bar_default as NavigationBar,
   OrderedList,
   pagination_default as Pagination,