@ctlyst.id/internal-ui 2.1.20 → 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;
 
@@ -3478,13 +3522,13 @@ var selectStyle = {
 };
 function selectStyles(colorMode, _isError) {
   return {
-    control: (base, { isDisabled, isFocused }) => {
+    control: (base, { isFocused }) => {
       const style = {
         ...base,
         flexWrap: "nowrap",
         borderColor: isFocused ? "var(--chakra-colors-primary-500)" : "var(--chakra-colors-neutral-400)",
         boxShadow: "none",
-        color: isDisabled ? "var(--chakra-colors-black-low)" : "var(--chakra-colors-black-high)",
+        color: "var(--chakra-colors-black-low)",
         "&:hover": {
           borderColor: _isError ? "" : isFocused ? "var(--chakra-colors-primary-500)" : "var(--chakra-colors-neutral-500)"
         }
@@ -3502,23 +3546,47 @@ function selectStyles(colorMode, _isError) {
       ...selectStyle,
       color: "var(--chakra-colors-neutral-900)"
     }),
-    menu: (base) => colorMode === "dark" ? {
-      ...base,
-      ...selectStyle,
-      background: "dark.800",
-      zIndex: 5
-    } : {
-      ...base,
-      ...selectStyle,
-      zIndex: 5
+    menu: (base) => {
+      return {
+        ...base,
+        ...selectStyle,
+        zIndex: 5
+      };
+    },
+    singleValue: (base) => {
+      return { ...base, ...selectStyle };
+    },
+    input: (base) => {
+      return { ...base, ...selectStyle };
+    },
+    dropdownIndicator: (base) => {
+      return { ...base, ...selectStyle };
+    },
+    indicatorSeparator: (base) => {
+      return { ...base, ...selectStyle };
     },
-    singleValue: (base) => colorMode === "dark" ? { ...base, ...selectStyle, color: "white" } : { ...base, ...selectStyle },
-    input: (base) => colorMode === "dark" ? { ...base, ...selectStyle, color: "white" } : { ...base, ...selectStyle },
-    dropdownIndicator: (base) => colorMode === "dark" ? { ...base, ...selectStyle, color: "secondary.500" } : { ...base, ...selectStyle },
-    indicatorSeparator: (base) => colorMode === "dark" ? { ...base, ...selectStyle, backgroundColor: "secondary.500" } : { ...base, ...selectStyle },
     placeholder: (base) => {
-      return { ...base, ...selectStyle, color: "black.low" };
-    }
+      return { ...base, ...selectStyle, color: "var(--chakra-colors-black-low)" };
+    },
+    multiValue: (base) => {
+      return {
+        ...base,
+        borderRadius: 4,
+        backgroundColor: "var(--chakra-colors-neutral-200)"
+      };
+    },
+    multiValueLabel: (base) => ({
+      ...base,
+      borderRadius: 4,
+      fontWeight: "bold"
+    }),
+    multiValueRemove: (base) => ({
+      ...base,
+      color: "var(--chakra-colors-neutral-900)",
+      ":hover": {
+        backgroundColor: "var(--chakra-colors-neutral-300)"
+      }
+    })
   };
 }
 var themeSelect = (theme6) => {
@@ -3535,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",
@@ -3557,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",
@@ -3579,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",
@@ -3596,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",
@@ -3610,12 +3678,149 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
   );
 }
 
+// src/components/select/components/select-with-checkbox.tsx
+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 jsx56, jsxs as jsxs23 } from "react/jsx-runtime";
+var CHECKBOX_STATE = {
+  UNCHECKED: 0,
+  INDETERMINATE: 1,
+  CHECKED: 2
+};
+var getSelectAllCheckboxState = (totalSelected, totalOption) => {
+  if (totalSelected < 0 || totalOption < 0) {
+    throw new Error("value less than 0");
+  }
+  if (totalSelected > totalOption) {
+    throw new Error("totalSelected couldn't be more than totalOption");
+  }
+  if (totalSelected === 0) {
+    return CHECKBOX_STATE.UNCHECKED;
+  }
+  if (totalSelected < totalOption) {
+    return CHECKBOX_STATE.INDETERMINATE;
+  }
+  if (totalSelected === totalOption) {
+    return CHECKBOX_STATE.CHECKED;
+  }
+  return CHECKBOX_STATE.UNCHECKED;
+};
+var InputOption = ({
+  getStyles,
+  isDisabled,
+  isFocused,
+  isSelected,
+  children,
+  innerProps,
+  data,
+  checkedState,
+  isMulti,
+  ...rest
+}) => {
+  const style = {
+    alignItems: "center",
+    color: "inherit",
+    display: "flex "
+  };
+  const props = {
+    ...innerProps,
+    "aria-disabled": isDisabled,
+    onClick: isDisabled ? void 0 : innerProps.onClick,
+    style
+  };
+  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
+    /* @__PURE__ */ jsx56(
+      ComponentRS.Option,
+      {
+        isMulti: true,
+        data,
+        isDisabled,
+        isFocused,
+        isSelected,
+        getStyles,
+        innerProps: props,
+        ...rest,
+        children: /* @__PURE__ */ jsxs23(
+          Flex8,
+          {
+            alignItems: "center",
+            width: "100%",
+            mb: "3px",
+            gap: 2,
+            "data-test-id": "CT_component_select-checkbox_options",
+            cursor: isDisabled ? "not-allowed" : "default",
+            children: [
+              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx56(
+                Checkbox3,
+                {
+                  isChecked: checkedState === CHECKBOX_STATE.CHECKED,
+                  isIndeterminate: checkedState === CHECKBOX_STATE.INDETERMINATE,
+                  isDisabled,
+                  "data-test-id": "CT_component_select-checkbox_select-all-option"
+                }
+              ) : /* @__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__ */ jsx56("hr", {}) : null
+  ] });
+};
+var SelectWithCheckboxBase = ({
+  isError = false,
+  components,
+  options,
+  ...rest
+}) => {
+  const { colorMode } = useColorMode7();
+  return /* @__PURE__ */ jsx56(
+    ReactSelect2,
+    {
+      classNamePrefix: "react-select",
+      options,
+      styles: { ...selectStyles(colorMode, !!isError) },
+      theme: themeSelect,
+      closeMenuOnSelect: false,
+      hideSelectedOptions: false,
+      components: {
+        ...components
+      },
+      ...rest
+    }
+  );
+};
+var SelectCheckbox = (props) => {
+  const { isMulti, options, value, ...rest } = props;
+  const selectValue = value || [];
+  return /* @__PURE__ */ jsx56(
+    SelectWithCheckboxBase,
+    {
+      isMulti,
+      options,
+      components: {
+        Option: (optionProps) => {
+          const { isSelected, data } = optionProps;
+          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__ */ jsx56(InputOption, { ...optionProps, checkedState });
+        }
+      },
+      ...rest
+    }
+  );
+};
+var select_with_checkbox_default = SelectCheckbox;
+
 // src/components/switch/components/switch.tsx
-import { chakra as chakra6, Flex as Flex8, 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 { 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 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 jsx55, jsxs as jsxs23 } 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);
@@ -3658,22 +3863,22 @@ var Switch = forwardRef13(function Switch2(props, ref) {
     };
     return iconSize[value];
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     chakra6.label,
     {
       ...getRootProps(),
       display: "flex",
       alignItems: "center",
-      className: cx9("chakra-switch", props.className),
+      className: cx10("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ jsx55("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
-        /* @__PURE__ */ jsxs23(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
-          /* @__PURE__ */ jsxs23(Flex8, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ jsx55(Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx55(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+        /* @__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__ */ jsx57(Check, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ jsx57(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx57(
             chakra6.span,
             {
               __css: styles.thumb,
@@ -3683,7 +3888,7 @@ var Switch = forwardRef13(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx55(
+        children && /* @__PURE__ */ jsx57(
           chakra6.span,
           {
             className: "chakra-switch__label",
@@ -3719,14 +3924,14 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/tabs/components/tab.tsx
-import { Button as Button5, Flex as Flex9, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Button as Button5, Flex as Flex10, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
+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__ */ jsx56(
+  return /* @__PURE__ */ jsx58(
     Button5,
     {
       "data-test-id": props["data-test-id"],
@@ -3752,7 +3957,7 @@ var Tab = forwardRef14((props, ref) => {
       },
       __css: styles.tab,
       ...tabProps,
-      children: /* @__PURE__ */ jsxs24(Flex9, { alignItems: "center", children: [
+      children: /* @__PURE__ */ jsxs25(Flex10, { 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 })
@@ -3798,13 +4003,13 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/text/index.ts
-import { Code, CodeProps, Heading, HeadingProps, Link as Link4, LinkProps, Text as Text14, 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";
 
 // src/components/uploader/components/uploader.tsx
-import { Flex as Flex10, Heading as Heading2, Stack as Stack4, Text as Text15 } from "@chakra-ui/react";
+import { Flex as Flex11, Heading as Heading2, Stack as Stack4, Text as Text16 } from "@chakra-ui/react";
 import * as React15 from "react";
 import { useDropzone } from "react-dropzone";
 
@@ -3818,7 +4023,7 @@ var messages = {
 };
 
 // src/components/uploader/components/uploader.tsx
-import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs26 } from "react/jsx-runtime";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -3866,9 +4071,9 @@ var Uploader = ({
   React15.useEffect(() => {
     setIsSelected(selected != null ? selected : false);
   }, [selected]);
-  return /* @__PURE__ */ jsxs25(Stack4, { direction: "column", children: [
-    /* @__PURE__ */ jsxs25(
-      Flex10,
+  return /* @__PURE__ */ jsxs26(Stack4, { direction: "column", children: [
+    /* @__PURE__ */ jsxs26(
+      Flex11,
       {
         minH: 200,
         border: "1px dashed",
@@ -3879,11 +4084,11 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          /* @__PURE__ */ jsx57("input", { ...getInputProps() }),
-          isDragActive ? /* @__PURE__ */ jsx57(Text15, { children: messages.dragActive }) : /* @__PURE__ */ jsxs25(Flex10, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
-            !multiple && isSelected && /* @__PURE__ */ jsx57(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
-            !isSelected && /* @__PURE__ */ jsx57(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
-            isSelected ? /* @__PURE__ */ jsx57(Text15, { children: messages.dragReplace }) : /* @__PURE__ */ jsx57(Text15, { 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 })
           ] })
         ]
       }
@@ -4581,14 +4786,14 @@ var variants2 = {
   errors,
   unstyled
 };
-var Checkbox3 = defineMultiStyleConfig3({
+var Checkbox4 = defineMultiStyleConfig3({
   baseStyle: baseStyle3,
   variants: variants2,
   defaultProps: {
     variant: "unstyled"
   }
 });
-var checkbox_default2 = Checkbox3;
+var checkbox_default2 = Checkbox4;
 
 // src/config/theme/components/chips.ts
 import { defineStyleConfig as defineStyleConfig3 } from "@chakra-ui/styled-system";
@@ -4675,7 +4880,7 @@ var baseStyle5 = definePartsStyle4({
     minWidth: 0,
     outline: 0,
     px: 2,
-    py: 2.5,
+    py: 2,
     paddingInlineStart: 2,
     paddingInlineEnd: 2,
     position: "relative",
@@ -5490,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 jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs27 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
   instance: void 0
 });
@@ -5509,8 +5714,8 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
     });
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo6(() => ({ instance: instanceRef.current }), []);
-  return /* @__PURE__ */ jsxs26(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx58(ToastContainer, {}),
+  return /* @__PURE__ */ jsxs27(ProviderContext.Provider, { value: provider, children: [
+    /* @__PURE__ */ jsx60(ToastContainer, {}),
     children
   ] });
 };
@@ -5552,7 +5757,7 @@ function useFetcher() {
 import {
   useBoolean,
   useClipboard,
-  useColorMode as useColorMode7,
+  useColorMode as useColorMode8,
   useColorModeValue as useColorModeValue12,
   useConst,
   useControllableProp,
@@ -5610,6 +5815,7 @@ export {
   button_default as Button,
   ButtonGroup,
   ButtonGroupProps,
+  CHECKBOX_STATE,
   card_default as Card,
   Center,
   ChakraProvider,
@@ -5695,7 +5901,7 @@ export {
   InputRightAddonProps,
   InputRightElement2 as InputRightElement,
   InputRightElementProps,
-  Link4 as Link,
+  Link5 as Link,
   LinkProps,
   List,
   ListIcon,
@@ -5721,6 +5927,7 @@ export {
   ModalOverlayProps,
   ModalProps,
   multi_datepicker_month_default as MultiDatePickerMonth,
+  NavItem,
   navigation_bar_default as NavigationBar,
   OrderedList,
   pagination_default as Pagination,
@@ -5756,6 +5963,7 @@ export {
   select_default as Select,
   select_async_default as SelectAsync,
   SelectAsyncCreatable,
+  select_with_checkbox_default as SelectCheckBox,
   SelectCreatable,
   Show,
   ShowProps,
@@ -5800,7 +6008,7 @@ export {
   TabsProvider,
   Tbody2 as Tbody,
   Td2 as Td,
-  Text14 as Text,
+  Text15 as Text,
   TextProps,
   textarea_default as TextareaField,
   Th2 as Th,
@@ -5846,6 +6054,7 @@ export {
   WrapProps,
   extendTheme2 as extendTheme,
   forwardRef15 as forwardRef,
+  getSelectAllCheckboxState,
   getTheme,
   theme5 as theme,
   useAccordion,
@@ -5859,7 +6068,7 @@ export {
   useCheckbox,
   useCheckboxGroup,
   useClipboard,
-  useColorMode7 as useColorMode,
+  useColorMode8 as useColorMode,
   useColorModePreference,
   useColorModeValue12 as useColorModeValue,
   useConst,