@ctlyst.id/internal-ui 2.1.20 → 2.2.1

package/dist/index.js

@@ -59,12 +59,12 @@ __export(src_exports, {
   AlertIcon: () => AlertIcon,
   AlertTitle: () => AlertTitle,
   Anchor: () => Anchor,
-  Avatar: () => import_react83.Avatar,
-  AvatarBadge: () => import_react83.AvatarBadge,
-  AvatarBadgeProps: () => import_react83.AvatarBadgeProps,
-  AvatarGroup: () => import_react83.AvatarGroup,
-  AvatarGroupProps: () => import_react83.AvatarGroupProps,
-  AvatarProps: () => import_react83.AvatarProps,
+  Avatar: () => import_react85.Avatar,
+  AvatarBadge: () => import_react85.AvatarBadge,
+  AvatarBadgeProps: () => import_react85.AvatarBadgeProps,
+  AvatarGroup: () => import_react85.AvatarGroup,
+  AvatarGroupProps: () => import_react85.AvatarGroupProps,
+  AvatarProps: () => import_react85.AvatarProps,
   Badge: () => badge_default,
   Box: () => import_react47.Box,
   BoxProps: () => import_react47.BoxProps,
@@ -72,11 +72,12 @@ __export(src_exports, {
   Button: () => button_default,
   ButtonGroup: () => import_react9.ButtonGroup,
   ButtonGroupProps: () => import_react9.ButtonGroupProps,
+  CHECKBOX_STATE: () => CHECKBOX_STATE,
   Card: () => card_default,
   Center: () => import_react47.Center,
-  ChakraProvider: () => import_react92.ChakraProvider,
-  ChakraProviderProps: () => import_react92.ChakraProviderProps,
-  ChakraTable: () => import_react77.Table,
+  ChakraProvider: () => import_react94.ChakraProvider,
+  ChakraProviderProps: () => import_react94.ChakraProviderProps,
+  ChakraTable: () => import_react79.Table,
   Checkbox: () => checkbox_default,
   CheckboxGroup: () => checkbox_group_default,
   CheckboxGroupContext: () => import_react16.CheckboxGroupContext,
@@ -87,13 +88,13 @@ __export(src_exports, {
   Chips: () => chips_default,
   CloseButton: () => import_react9.CloseButton,
   CloseButtonProps: () => import_react9.CloseButtonProps,
-  Code: () => import_react80.Code,
-  CodeProps: () => import_react80.CodeProps,
-  Collapse: () => import_react83.Collapse,
-  CollapseProps: () => import_react83.CollapseProps,
-  ColorMode: () => import_react92.ColorMode,
-  ColorModeScript: () => import_react92.ColorModeScript,
-  ColorModeScriptProps: () => import_react92.ColorModeScriptProps,
+  Code: () => import_react82.Code,
+  CodeProps: () => import_react82.CodeProps,
+  Collapse: () => import_react85.Collapse,
+  CollapseProps: () => import_react85.CollapseProps,
+  ColorMode: () => import_react94.ColorMode,
+  ColorModeScript: () => import_react94.ColorModeScript,
+  ColorModeScriptProps: () => import_react94.ColorModeScriptProps,
   Container: () => import_react47.Container,
   ContainerProps: () => import_react47.ContainerProps,
   Counter: () => counter_default,
@@ -112,8 +113,8 @@ __export(src_exports, {
   DrawerHeader: () => import_react58.ModalHeader,
   DrawerOverlay: () => import_react58.ModalOverlay,
   DrawerProps: () => import_react58.DrawerProps,
-  Fade: () => import_react83.Fade,
-  FadeProps: () => import_react83.FadeProps,
+  Fade: () => import_react85.Fade,
+  FadeProps: () => import_react85.FadeProps,
   Field: () => field_default,
   Flex: () => import_react47.Flex,
   FlexProps: () => import_react47.FlexProps,
@@ -129,18 +130,18 @@ __export(src_exports, {
   GridProps: () => import_react47.GridProps,
   HStack: () => import_react47.HStack,
   Header: () => header_default,
-  Heading: () => import_react80.Heading,
-  HeadingProps: () => import_react80.HeadingProps,
-  Hide: () => import_react83.Hide,
-  HideProps: () => import_react83.HideProps,
+  Heading: () => import_react82.Heading,
+  HeadingProps: () => import_react82.HeadingProps,
+  Hide: () => import_react85.Hide,
+  HideProps: () => import_react85.HideProps,
   Icon: () => import_react46.Icon,
   IconButton: () => import_react9.IconButton,
   IconButtonProps: () => import_react9.IconButtonProps,
   IconProps: () => import_react46.IconProps,
   Image: () => import_react46.Image,
   ImageProps: () => import_react46.ImageProps,
-  Img: () => import_react83.Img,
-  ImgProps: () => import_react83.ImgProps,
+  Img: () => import_react85.Img,
+  ImgProps: () => import_react85.ImgProps,
   InputAddonLeft: () => InputAddonLeft,
   InputAddonRight: () => InputAddonRight,
   InputElementLeft: () => import_react20.InputLeftElement,
@@ -157,8 +158,8 @@ __export(src_exports, {
   InputRightAddonProps: () => import_react26.InputRightAddonProps,
   InputRightElement: () => import_react26.InputRightElement,
   InputRightElementProps: () => import_react26.InputRightElementProps,
-  Link: () => import_react80.Link,
-  LinkProps: () => import_react80.LinkProps,
+  Link: () => import_react82.Link,
+  LinkProps: () => import_react82.LinkProps,
   List: () => import_react48.List,
   ListIcon: () => import_react48.ListIcon,
   ListItem: () => import_react48.ListItem,
@@ -183,131 +184,134 @@ __export(src_exports, {
   ModalOverlayProps: () => import_react58.ModalOverlayProps,
   ModalProps: () => import_react58.ModalProps,
   MultiDatePickerMonth: () => multi_datepicker_month_default,
+  NavItem: () => NavItem,
   NavigationBar: () => navigation_bar_default,
   OrderedList: () => import_react48.OrderedList,
   Pagination: () => pagination_default,
   PaginationDetail: () => pagination_detail_default,
   PaginationFilter: () => pagination_filter_default,
-  Popover: () => import_react67.Popover,
-  PopoverAnchor: () => import_react67.PopoverAnchor,
-  PopoverArrow: () => import_react67.PopoverArrow,
-  PopoverArrowProps: () => import_react67.PopoverArrowProps,
-  PopoverBody: () => import_react67.PopoverBody,
-  PopoverBodyProps: () => import_react67.PopoverBodyProps,
-  PopoverCloseButton: () => import_react67.PopoverCloseButton,
-  PopoverContent: () => import_react67.PopoverContent,
-  PopoverContentProps: () => import_react67.PopoverContentProps,
-  PopoverFooter: () => import_react67.PopoverFooter,
-  PopoverFooterProps: () => import_react67.PopoverFooterProps,
-  PopoverHeader: () => import_react67.PopoverHeader,
-  PopoverHeaderProps: () => import_react67.PopoverHeaderProps,
-  PopoverProps: () => import_react67.PopoverProps,
-  PopoverTrigger: () => import_react67.PopoverTrigger,
-  Portal: () => import_react67.Portal,
-  PortalProps: () => import_react67.PortalProps,
+  Popover: () => import_react68.Popover,
+  PopoverAnchor: () => import_react68.PopoverAnchor,
+  PopoverArrow: () => import_react68.PopoverArrow,
+  PopoverArrowProps: () => import_react68.PopoverArrowProps,
+  PopoverBody: () => import_react68.PopoverBody,
+  PopoverBodyProps: () => import_react68.PopoverBodyProps,
+  PopoverCloseButton: () => import_react68.PopoverCloseButton,
+  PopoverContent: () => import_react68.PopoverContent,
+  PopoverContentProps: () => import_react68.PopoverContentProps,
+  PopoverFooter: () => import_react68.PopoverFooter,
+  PopoverFooterProps: () => import_react68.PopoverFooterProps,
+  PopoverHeader: () => import_react68.PopoverHeader,
+  PopoverHeaderProps: () => import_react68.PopoverHeaderProps,
+  PopoverProps: () => import_react68.PopoverProps,
+  PopoverTrigger: () => import_react68.PopoverTrigger,
+  Portal: () => import_react68.Portal,
+  PortalProps: () => import_react68.PortalProps,
   Provider: () => provider_default,
   ProviderContext: () => ProviderContext,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
-  RadioGroupContext: () => import_react70.RadioGroupContext,
+  RadioGroupContext: () => import_react71.RadioGroupContext,
   Rating: () => rating_default,
   RequiredIndicator: () => import_react26.RequiredIndicator,
   RequiredIndicatorProps: () => import_react26.RequiredIndicatorProps,
-  ScaleFade: () => import_react83.ScaleFade,
-  ScaleFadeProps: () => import_react83.ScaleFadeProps,
+  ScaleFade: () => import_react85.ScaleFade,
+  ScaleFadeProps: () => import_react85.ScaleFadeProps,
   Select: () => select_default,
   SelectAsync: () => select_async_default,
   SelectAsyncCreatable: () => SelectAsyncCreatable,
+  SelectCheckBox: () => select_with_checkbox_default,
   SelectCreatable: () => SelectCreatable,
-  Show: () => import_react83.Show,
-  ShowProps: () => import_react83.ShowProps,
+  Show: () => import_react85.Show,
+  ShowProps: () => import_react85.ShowProps,
   SimpleGrid: () => import_react47.SimpleGrid,
   Skeleton: () => import_react5.Skeleton,
-  Slide: () => import_react83.Slide,
-  SlideFade: () => import_react83.SlideFade,
-  SlideFadeProps: () => import_react83.SlideFadeProps,
-  SlideProps: () => import_react83.SlideProps,
+  Slide: () => import_react85.Slide,
+  SlideFade: () => import_react85.SlideFade,
+  SlideFadeProps: () => import_react85.SlideFadeProps,
+  SlideProps: () => import_react85.SlideProps,
   Spacer: () => import_react47.Spacer,
   Stack: () => import_react47.Stack,
   StackProps: () => import_react47.StackProps,
-  Step: () => import_react83.Step,
-  StepDescription: () => import_react83.StepDescription,
-  StepIcon: () => import_react83.StepIcon,
-  StepIndicator: () => import_react83.StepIndicator,
-  StepNumber: () => import_react83.StepNumber,
-  StepSeparator: () => import_react83.StepSeparator,
-  StepStatus: () => import_react83.StepStatus,
-  StepTitle: () => import_react83.StepTitle,
-  Stepper: () => import_react83.Stepper,
+  Step: () => import_react85.Step,
+  StepDescription: () => import_react85.StepDescription,
+  StepIcon: () => import_react85.StepIcon,
+  StepIndicator: () => import_react85.StepIndicator,
+  StepNumber: () => import_react85.StepNumber,
+  StepSeparator: () => import_react85.StepSeparator,
+  StepStatus: () => import_react85.StepStatus,
+  StepTitle: () => import_react85.StepTitle,
+  Stepper: () => import_react85.Stepper,
   Switch: () => switch_default,
   Tab: () => tab_default,
-  TabIndicator: () => import_react79.TabIndicator,
-  TabIndicatorProps: () => import_react79.TabIndicatorProps,
-  TabList: () => import_react79.TabList,
-  TabListProps: () => import_react79.TabListProps,
-  TabPanel: () => import_react79.TabPanel,
-  TabPanelProps: () => import_react79.TabPanelProps,
-  TabPanels: () => import_react79.TabPanels,
-  TabPanelsProps: () => import_react79.TabPanelsProps,
-  TabProps: () => import_react79.TabProps,
-  TableBodyProps: () => import_react77.TableBodyProps,
-  TableCellProps: () => import_react77.TableCellProps,
-  TableColumnHeaderProps: () => import_react77.TableColumnHeaderProps,
-  TableHeadProps: () => import_react77.TableHeadProps,
-  TableProps: () => import_react77.TableProps,
-  TableRowProps: () => import_react77.TableRowProps,
-  Tabs: () => import_react79.Tabs,
-  TabsDescendantsProvider: () => import_react79.TabsDescendantsProvider,
-  TabsProps: () => import_react79.TabsProps,
-  TabsProvider: () => import_react79.TabsProvider,
-  Tbody: () => import_react77.Tbody,
-  Td: () => import_react77.Td,
-  Text: () => import_react80.Text,
-  TextProps: () => import_react80.TextProps,
+  TabIndicator: () => import_react81.TabIndicator,
+  TabIndicatorProps: () => import_react81.TabIndicatorProps,
+  TabList: () => import_react81.TabList,
+  TabListProps: () => import_react81.TabListProps,
+  TabPanel: () => import_react81.TabPanel,
+  TabPanelProps: () => import_react81.TabPanelProps,
+  TabPanels: () => import_react81.TabPanels,
+  TabPanelsProps: () => import_react81.TabPanelsProps,
+  TabProps: () => import_react81.TabProps,
+  TableBodyProps: () => import_react79.TableBodyProps,
+  TableCellProps: () => import_react79.TableCellProps,
+  TableColumnHeaderProps: () => import_react79.TableColumnHeaderProps,
+  TableHeadProps: () => import_react79.TableHeadProps,
+  TableProps: () => import_react79.TableProps,
+  TableRowProps: () => import_react79.TableRowProps,
+  Tabs: () => import_react81.Tabs,
+  TabsDescendantsProvider: () => import_react81.TabsDescendantsProvider,
+  TabsProps: () => import_react81.TabsProps,
+  TabsProvider: () => import_react81.TabsProvider,
+  Tbody: () => import_react79.Tbody,
+  Td: () => import_react79.Td,
+  Text: () => import_react82.Text,
+  TextProps: () => import_react82.TextProps,
   TextareaField: () => textarea_default,
-  Th: () => import_react77.Th,
-  Thead: () => import_react77.Thead,
+  Th: () => import_react79.Th,
+  Thead: () => import_react79.Thead,
   ThemeTypings: () => import_styled_system13.ThemeTypings,
-  Tooltip: () => import_react81.Tooltip,
-  TooltipProps: () => import_react81.TooltipProps,
-  Tr: () => import_react77.Tr,
+  Tooltip: () => import_react83.Tooltip,
+  TooltipProps: () => import_react83.TooltipProps,
+  Tr: () => import_react79.Tr,
   UnorderedList: () => import_react48.UnorderedList,
   Uploader: () => uploader_default,
   UseAccordionItemProps: () => import_react3.UseAccordionItemProps,
   UseAccordionItemReturn: () => import_react3.UseAccordionItemReturn,
   UseAccordionProps: () => import_react3.UseAccordionProps,
   UseAccordionReturn: () => import_react3.UseAccordionReturn,
-  UseBreakpointOptions: () => import_react83.UseBreakpointOptions,
+  UseBreakpointOptions: () => import_react85.UseBreakpointOptions,
   UseCheckboxGroupProps: () => import_react16.UseCheckboxGroupProps,
   UseCheckboxGroupReturn: () => import_react16.UseCheckboxGroupReturn,
   UseCheckboxProps: () => import_react16.UseCheckboxProps,
   UseCheckboxReturn: () => import_react16.UseCheckboxReturn,
-  UseDisclosureProps: () => import_react94.UseDisclosureProps,
-  UseImageProps: () => import_react83.UseImageProps,
-  UseImageReturn: () => import_react83.UseImageReturn,
-  UseMediaQueryOptions: () => import_react83.UseMediaQueryOptions,
+  UseDisclosureProps: () => import_react96.UseDisclosureProps,
+  UseImageProps: () => import_react85.UseImageProps,
+  UseImageReturn: () => import_react85.UseImageReturn,
+  UseMediaQueryOptions: () => import_react85.UseMediaQueryOptions,
   UseModalProps: () => import_react58.UseModalProps,
   UseModalReturn: () => import_react58.UseModalReturn,
-  UseQueryProps: () => import_react83.UseQueryProps,
-  UseRadioGroupReturn: () => import_react70.UseRadioGroupReturn,
-  UseRadioProps: () => import_react70.UseRadioProps,
-  UseRadioReturn: () => import_react70.UseRadioReturn,
-  UseTabListProps: () => import_react79.UseTabListProps,
-  UseTabListReturn: () => import_react79.UseTabListReturn,
-  UseTabOptions: () => import_react79.UseTabOptions,
-  UseTabPanelsProps: () => import_react79.UseTabPanelsProps,
-  UseTabProps: () => import_react79.UseTabProps,
-  UseTabsProps: () => import_react79.UseTabsProps,
-  UseTabsReturn: () => import_react79.UseTabsReturn,
+  UseQueryProps: () => import_react85.UseQueryProps,
+  UseRadioGroupReturn: () => import_react71.UseRadioGroupReturn,
+  UseRadioProps: () => import_react71.UseRadioProps,
+  UseRadioReturn: () => import_react71.UseRadioReturn,
+  UseTabListProps: () => import_react81.UseTabListProps,
+  UseTabListReturn: () => import_react81.UseTabListReturn,
+  UseTabOptions: () => import_react81.UseTabOptions,
+  UseTabPanelsProps: () => import_react81.UseTabPanelsProps,
+  UseTabProps: () => import_react81.UseTabProps,
+  UseTabsProps: () => import_react81.UseTabsProps,
+  UseTabsReturn: () => import_react81.UseTabsReturn,
   VStack: () => import_react47.VStack,
-  VisuallyHidden: () => import_react83.VisuallyHidden,
-  VisuallyHiddenInput: () => import_react83.VisuallyHiddenInput,
+  VisuallyHidden: () => import_react85.VisuallyHidden,
+  VisuallyHiddenInput: () => import_react85.VisuallyHiddenInput,
   Wrap: () => import_react47.Wrap,
   WrapItem: () => import_react47.WrapItem,
   WrapItemProps: () => import_react47.WrapItemProps,
   WrapProps: () => import_react47.WrapProps,
-  extendTheme: () => import_react95.extendTheme,
-  forwardRef: () => import_react95.forwardRef,
+  extendTheme: () => import_react97.extendTheme,
+  forwardRef: () => import_react97.forwardRef,
+  getSelectAllCheckboxState: () => getSelectAllCheckboxState,
   getTheme: () => getTheme,
   theme: () => theme5,
   useAccordion: () => import_react3.useAccordion,
@@ -316,47 +320,47 @@ __export(src_exports, {
   useAccordionItemState: () => import_react3.useAccordionItemState,
   useAccordionStyles: () => import_react3.useAccordionStyles,
   useAlertStyles: () => useAlertStyles,
-  useBoolean: () => import_react94.useBoolean,
-  useBreakpoint: () => import_react83.useBreakpoint,
+  useBoolean: () => import_react96.useBoolean,
+  useBreakpoint: () => import_react85.useBreakpoint,
   useCheckbox: () => import_react16.useCheckbox,
   useCheckboxGroup: () => import_react16.useCheckboxGroup,
-  useClipboard: () => import_react94.useClipboard,
-  useColorMode: () => import_react94.useColorMode,
-  useColorModePreference: () => import_react83.useColorModePreference,
-  useColorModeValue: () => import_react94.useColorModeValue,
-  useConst: () => import_react94.useConst,
-  useControllableProp: () => import_react94.useControllableProp,
-  useControllableState: () => import_react94.useControllableState,
+  useClipboard: () => import_react96.useClipboard,
+  useColorMode: () => import_react96.useColorMode,
+  useColorModePreference: () => import_react85.useColorModePreference,
+  useColorModeValue: () => import_react96.useColorModeValue,
+  useConst: () => import_react96.useConst,
+  useControllableProp: () => import_react96.useControllableProp,
+  useControllableState: () => import_react96.useControllableState,
   useDataTable: () => useDataTable,
-  useDimensions: () => import_react94.useDimensions,
-  useDisclosure: () => import_react94.useDisclosure,
+  useDimensions: () => import_react96.useDimensions,
+  useDisclosure: () => import_react96.useDisclosure,
   useDrawerContext: () => import_react58.useDrawerContext,
   useFetcher: () => useFetcher,
-  useImage: () => import_react83.useImage,
+  useImage: () => import_react85.useImage,
   useInternalUI: () => useInternalUI,
-  useMergeRefs: () => import_react94.useMergeRefs,
+  useMergeRefs: () => import_react96.useMergeRefs,
   useModal: () => import_react58.useModal,
   useModalContext: () => import_react58.useModalContext,
   useModalStyles: () => import_react58.useModalStyles,
-  useOutsideClick: () => import_react94.useOutsideClick,
-  useQuery: () => import_react83.useQuery,
-  useRadio: () => import_react70.useRadio,
-  useRadioGroup: () => import_react70.useRadioGroup,
-  useRadioGroupContext: () => import_react70.useRadioGroupContext,
-  useSteps: () => import_react83.useSteps,
-  useTab: () => import_react79.useTab,
-  useTabIndicator: () => import_react79.useTabIndicator,
-  useTabList: () => import_react79.useTabList,
-  useTabPanel: () => import_react79.useTabPanel,
-  useTabPanels: () => import_react79.useTabPanels,
-  useTabs: () => import_react79.useTabs,
-  useTabsContext: () => import_react79.useTabsContext,
-  useTabsDescendant: () => import_react79.useTabsDescendant,
-  useTabsDescendants: () => import_react79.useTabsDescendants,
-  useTabsDescendantsContext: () => import_react79.useTabsDescendantsContext,
-  useTabsStyles: () => import_react79.useTabsStyles,
-  useTheme: () => import_react94.useTheme,
-  useToken: () => import_react94.useToken
+  useOutsideClick: () => import_react96.useOutsideClick,
+  useQuery: () => import_react85.useQuery,
+  useRadio: () => import_react71.useRadio,
+  useRadioGroup: () => import_react71.useRadioGroup,
+  useRadioGroupContext: () => import_react71.useRadioGroupContext,
+  useSteps: () => import_react85.useSteps,
+  useTab: () => import_react81.useTab,
+  useTabIndicator: () => import_react81.useTabIndicator,
+  useTabList: () => import_react81.useTabList,
+  useTabPanel: () => import_react81.useTabPanel,
+  useTabPanels: () => import_react81.useTabPanels,
+  useTabs: () => import_react81.useTabs,
+  useTabsContext: () => import_react81.useTabsContext,
+  useTabsDescendant: () => import_react81.useTabsDescendant,
+  useTabsDescendants: () => import_react81.useTabsDescendants,
+  useTabsDescendantsContext: () => import_react81.useTabsDescendantsContext,
+  useTabsStyles: () => import_react81.useTabsStyles,
+  useTheme: () => import_react96.useTheme,
+  useToken: () => import_react96.useToken
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -2857,34 +2861,78 @@ var modal_header_default = ModalHeader2;
 // src/components/modal/index.ts
 var import_react58 = require("@chakra-ui/react");
 
-// src/components/navigation/components/navigation.tsx
+// src/components/nav-item/components/nav-item.tsx
 var import_react59 = require("@chakra-ui/react");
+var import_shared_utils9 = require("@chakra-ui/shared-utils");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var NavItem = ({ children, isActive, isChild, isDisabled, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_react59.Link,
+    {
+      "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: (0, import_shared_utils9.cx)("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
+var import_react60 = require("@chakra-ui/react");
 var Icon3 = __toESM(require("@ctlyst.id/internal-icon"));
-var import_react60 = require("@emotion/react");
+var import_react61 = require("@emotion/react");
 
 // src/components/navigation/components/mapping-icon.tsx
 var Icon2 = __toESM(require("@ctlyst.id/internal-icon"));
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var mappingIcon = /* @__PURE__ */ new Map([
-  ["Order", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.ShoppingBag, { size: 4, color: "inherit" }, "order")],
-  ["Fulfillment", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
-  ["Transfer Stock", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
-  ["Stock", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.Box, { size: 4, color: "inherit" }, "stock")],
-  ["Product Database", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.Layers, { size: 4, color: "inherit" }, "product-database")],
-  ["Purchasing", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
-  ["Reseller", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.Users, { size: 4, color: "inherit" }, "reseller")],
-  ["Retur", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.RotateCcw, { size: 4, color: "inherit" }, "retur")],
-  ["Other", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.Settings, { size: 4, color: "inherit" }, "other")],
-  ["Content", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.Layout, { size: 4, color: "inherit" }, "content")],
-  ["Customer", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.HelpCircle, { size: 4, color: "inherit" }, "content")],
-  ["Voucher", /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2.Gift, { size: 4, color: "inherit" }, "content")]
+  ["Order", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.ShoppingBag, { size: 4, color: "inherit" }, "order")],
+  ["Fulfillment", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
+  ["Transfer Stock", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
+  ["Stock", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.Box, { size: 4, color: "inherit" }, "stock")],
+  ["Product Database", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.Layers, { size: 4, color: "inherit" }, "product-database")],
+  ["Purchasing", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
+  ["Reseller", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.Users, { size: 4, color: "inherit" }, "reseller")],
+  ["Retur", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.RotateCcw, { size: 4, color: "inherit" }, "retur")],
+  ["Other", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.Settings, { size: 4, color: "inherit" }, "other")],
+  ["Content", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.Layout, { size: 4, color: "inherit" }, "content")],
+  ["Customer", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.HelpCircle, { size: 4, color: "inherit" }, "content")],
+  ["Voucher", /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Icon2.Gift, { size: 4, color: "inherit" }, "content")]
 ]);
 
 // src/components/navigation/components/navigation.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var Navigation = ({ navigations, activePath, as, host, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react59.Box, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_react59.Flex,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react60.Box, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_react60.Flex,
     {
       bg: "white",
       w: "full",
@@ -2898,9 +2946,9 @@ 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__ */ (0, import_jsx_runtime42.jsx)(import_react59.Popover, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react59.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            import_react59.Button,
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react60.Popover, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react60.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_react60.Button,
             {
               h: 7.5,
               p: 2,
@@ -2913,14 +2961,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__ */ (0, import_jsx_runtime42.jsx)(Icon3.ChevronDown, { size: 4, color: "inherit" }),
+              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon3.ChevronDown, { size: 4, color: "inherit" }),
               children: navigation.title
             }
           ) }),
-          navigation.children && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react59.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react59.Box, { zIndex: "popover", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-            import_react59.PopoverContent,
+          navigation.children && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react60.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react60.Box, { zIndex: "popover", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_react60.PopoverContent,
             {
-              bg: (0, import_react59.useColorModeValue)("white", "ebony-clay.800"),
+              bg: (0, import_react60.useColorModeValue)("white", "ebony-clay.800"),
               maxW: 250,
               border: "none",
               borderRadius: "md",
@@ -2929,16 +2977,16 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                 const link = navHost ? `${navHost}${navLink}` : navLink;
                 const isLocalLink = host === navHost;
                 const isActiveSub = activePath === navLink;
-                return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                  import_react59.Link,
+                return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  import_react60.Link,
                   {
                     as: isLocalLink ? as : void 0,
                     href: link,
                     _hover: {
                       textDecoration: "none"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-                      import_react59.Box,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      import_react60.Box,
                       {
                         display: "flex",
                         position: "relative",
@@ -2946,24 +2994,24 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         cursor: "pointer",
                         transition: "padding 0.35s ease 0s",
                         _hover: {
-                          backgroundColor: (0, import_react59.useColorModeValue)("dove-gray.50", "mirage.900"),
-                          color: (0, import_react59.useColorModeValue)("primary.500", "dove-gray.600"),
+                          backgroundColor: (0, import_react60.useColorModeValue)("dove-gray.50", "mirage.900"),
+                          color: (0, import_react60.useColorModeValue)("primary.500", "dove-gray.600"),
                           px: 5,
                           py: 4,
                           _first: { borderTopRadius: "md" },
                           _last: { borderBottomRadius: "md" }
                         },
                         color: isActiveSub ? "primary.500" : "inherit",
-                        css: import_react60.css`
+                        css: import_react61.css`
                                     border-spacing: 4px;
                                   `,
                         px: 6,
                         py: 4,
                         children: [
                           mappingIcon.get(navigation.title),
-                          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react59.Text, { fontSize: "text.sm", ml: 3, children: title }),
-                          isActiveSub && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-                            import_react59.Box,
+                          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react60.Text, { fontSize: "text.sm", ml: 3, children: title }),
+                          isActiveSub && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                            import_react60.Box,
                             {
                               width: 0.5,
                               height: 8,
@@ -2996,9 +3044,9 @@ Navigation.defaultProps = {
 var navigation_default = Navigation;
 
 // src/components/navigation/components/navigation-bar.tsx
-var import_react61 = require("@chakra-ui/react");
+var import_react62 = require("@chakra-ui/react");
 var Icon4 = __toESM(require("@ctlyst.id/internal-icon"));
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var NavigationBar = ({
   navigations,
   isFetched,
@@ -3013,8 +3061,8 @@ var NavigationBar = ({
     }
     return subMenu.navHost + subMenu.navLink;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react61.Box, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_react61.Flex,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react62.Box, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_react62.Flex,
     {
       bg: "white",
       w: "full",
@@ -3030,9 +3078,9 @@ 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__ */ (0, import_jsx_runtime43.jsx)(import_react61.Popover, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react61.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_react61.Button,
+        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react62.Popover, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react62.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            import_react62.Button,
             {
               h: 7.5,
               p: 2,
@@ -3045,12 +3093,12 @@ var NavigationBar = ({
               backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
               color: isActive ? "primary.50" : "black.high",
               leftIcon: mappingIcon2.get(item.title),
-              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon4.ChevronDown, { size: 4, color: "inherit" }),
+              rightIcon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon4.ChevronDown, { size: 4, color: "inherit" }),
               children: item.title
             }
           ) }),
-          item.children && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react61.PopoverContent, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-            import_react61.Link,
+          item.children && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react62.PopoverContent, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+            import_react62.Link,
             {
               href: urlMenu(subMenu),
               display: "flex",
@@ -3067,7 +3115,7 @@ var NavigationBar = ({
               "data-test-id": `CT_component_navigation_link-${item.id}`,
               children: [
                 mappingIcon2.get(item.title),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react61.Text, { textStyle: "text-sm", ml: 3, children: subMenu.title })
+                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react62.Text, { textStyle: "text-sm", ml: 3, children: subMenu.title })
               ]
             },
             subMenu.id
@@ -3084,18 +3132,18 @@ var navigation_bar_default = NavigationBar;
 
 // src/components/pagination/components/pagination.tsx
 var import_icons4 = require("@chakra-ui/icons");
-var import_react64 = require("@chakra-ui/react");
+var import_react65 = require("@chakra-ui/react");
 
 // src/components/pagination/components/pagination-button.tsx
-var import_react62 = require("@chakra-ui/react");
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var PaginationButton = (0, import_react62.forwardRef)(({ className, style, isActive, children, ...rest }, ref) => {
-  const btnBg = (0, import_react62.useColorModeValue)("neutral.300", "mirage.900");
-  const btnColor = (0, import_react62.useColorModeValue)("black.high", "primary.300");
-  const btnNotActiveBg = (0, import_react62.useColorModeValue)("secondary.50", "primary.500");
-  const btnNotActiveColor = (0, import_react62.useColorModeValue)("primary.500", "white");
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_react62.Button,
+var import_react63 = require("@chakra-ui/react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var PaginationButton = (0, import_react63.forwardRef)(({ className, style, isActive, children, ...rest }, ref) => {
+  const btnBg = (0, import_react63.useColorModeValue)("neutral.300", "mirage.900");
+  const btnColor = (0, import_react63.useColorModeValue)("black.high", "primary.300");
+  const btnNotActiveBg = (0, import_react63.useColorModeValue)("secondary.50", "primary.500");
+  const btnNotActiveColor = (0, import_react63.useColorModeValue)("primary.500", "white");
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_react63.Button,
     {
       "data-test-id": "Pagination-Button",
       ref,
@@ -3116,7 +3164,7 @@ var PaginationButton = (0, import_react62.forwardRef)(({ className, style, isAct
         color: btnNotActiveColor
       } : {},
       _disabled: {
-        background: (0, import_react62.useColorModeValue)("neutral.300", "mirage.900"),
+        background: (0, import_react63.useColorModeValue)("neutral.300", "mirage.900"),
         color: "neutral.600",
         pointerEvents: "none"
       },
@@ -3132,16 +3180,16 @@ PaginationButton.defaultProps = {
 var pagination_button_default = PaginationButton;
 
 // src/components/pagination/components/pagination-button-trigger.tsx
-var import_react63 = require("@chakra-ui/react");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react64 = require("@chakra-ui/react");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var PaginationButtonTrigger = ({
   color,
   isDisabled,
   onClick,
   visuallyHidden,
   icon
-}) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(pagination_button_default, { "data-test-id": "DLVCc_fBK35spHm5WxjcJ", color, isDisabled, onClick, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react63.VisuallyHidden, { children: visuallyHidden }),
+}) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(pagination_button_default, { "data-test-id": "DLVCc_fBK35spHm5WxjcJ", color, isDisabled, onClick, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react64.VisuallyHidden, { children: visuallyHidden }),
   icon
 ] });
 PaginationButtonTrigger.defaultProps = {
@@ -3154,10 +3202,10 @@ PaginationButtonTrigger.defaultProps = {
 var pagination_button_trigger_default = PaginationButtonTrigger;
 
 // src/components/pagination/components/pagination.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var Pagination = ({ className, current, total, onSelect }) => {
-  const btnColorDisabled = (0, import_react64.useColorModeValue)("secondary.100", "primary.500");
-  const btnColor = (0, import_react64.useColorModeValue)("primary.500", "secondary.100");
+  const btnColorDisabled = (0, import_react65.useColorModeValue)("secondary.100", "primary.500");
+  const btnColor = (0, import_react65.useColorModeValue)("primary.500", "secondary.100");
   const disabledPrevious = current === 1;
   const previousButtonColor = disabledPrevious ? btnColorDisabled : btnColor;
   const disabledNext = current === total;
@@ -3184,8 +3232,8 @@ var Pagination = ({ className, current, total, onSelect }) => {
     }
     return pageButtons;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react64.Box, { className, display: "inline-flex", alignItems: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react64.Box, { mr: 1, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react65.Box, { className, display: "inline-flex", alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react65.Box, { mr: 1, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3193,11 +3241,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledPrevious,
         onClick: () => handleSelectPage(1),
         visuallyHidden: "First Page",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons4.ArrowLeftIcon, { width: 2 })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons4.ArrowLeftIcon, { width: 2 })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react64.Box, { bg: "neutral.300", borderRadius: "full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react65.Box, { bg: "neutral.300", borderRadius: "full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3205,22 +3253,22 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledPrevious,
           onClick: () => handleSelectPage(current - 1),
           visuallyHidden: "Previous Page",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons4.ChevronLeftIcon, {})
+          icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons4.ChevronLeftIcon, {})
         }
       ),
       generatePages().map((page) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           pagination_button_default,
           {
             "data-test-id": "Pagination-Button",
             isActive: page === current,
             onClick: () => typeof page === "number" ? handleSelectPage(page) : null,
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react64.Text, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react65.Text, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
           },
           page
         );
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3228,11 +3276,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledNext,
           onClick: () => handleSelectPage(current + 1),
           visuallyHidden: "Next Page",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons4.ChevronRightIcon, {})
+          icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons4.ChevronRightIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react64.Box, { ml: 1, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react65.Box, { ml: 1, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3240,7 +3288,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledNext,
         onClick: () => handleSelectPage(total),
         visuallyHidden: "Last Page",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons4.ArrowRightIcon, { width: 2 })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons4.ArrowRightIcon, { width: 2 })
       }
     ) })
   ] });
@@ -3253,8 +3301,8 @@ Pagination.displayName = "Pagination";
 var pagination_default = Pagination;
 
 // src/components/pagination/components/pagination-detail.tsx
-var import_react65 = require("@chakra-ui/react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react66 = require("@chakra-ui/react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var PaginationDetail = ({
   page,
   limit,
@@ -3264,15 +3312,15 @@ var PaginationDetail = ({
   lineHeight = 18,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react65.Text, { scale, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react66.Text, { scale, 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
-var import_react66 = require("@chakra-ui/react");
+var import_react67 = require("@chakra-ui/react");
 var React13 = __toESM(require("react"));
 var import_fi6 = require("react-icons/fi");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var PaginationFilter = ({
   limit,
   label = "Baris per halaman:",
@@ -3281,10 +3329,10 @@ var PaginationFilter = ({
   ...rest
 }) => {
   const [value, setValue] = React13.useState(limit);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react66.Box, { display: "flex", flexDirection: "row", alignItems: "center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react66.Text, { fontSize: "text.sm", lineHeight: 18, color: (0, import_react66.useColorModeValue)("neutral.900", "white"), ...rest, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-      import_react66.Select,
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react67.Box, { display: "flex", flexDirection: "row", alignItems: "center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react67.Text, { fontSize: "text.sm", lineHeight: 18, color: (0, import_react67.useColorModeValue)("neutral.900", "white"), ...rest, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_react67.Select,
       {
         textAlign: "center",
         size: "xs",
@@ -3292,7 +3340,7 @@ var PaginationFilter = ({
         border: "none",
         boxShadow: "none",
         width: 18,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_fi6.FiChevronDown, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_fi6.FiChevronDown, {}),
         _focusVisible: { boxShadow: "none" },
         onChange: (e) => {
           const numberValue = Number(e.target.value);
@@ -3301,7 +3349,7 @@ var PaginationFilter = ({
         },
         value,
         children: items.map((item) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("option", { value: item, children: item }, item);
+          return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: item, children: item }, item);
         })
       }
     )
@@ -3314,11 +3362,11 @@ PaginationFilter.defaultProps = {
 var pagination_filter_default = PaginationFilter;
 
 // src/components/popover/index.ts
-var import_react67 = require("@chakra-ui/react");
+var import_react68 = require("@chakra-ui/react");
 
 // src/components/radio/components/radio.tsx
-var import_react68 = require("@chakra-ui/react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_react69 = require("@chakra-ui/react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var Radio = ({
   isError = false,
   helpText = "",
@@ -3328,9 +3376,9 @@ var Radio = ({
   ...rest
 }) => {
   const variant = isError ? "errors" : "unstyled";
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react68.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react68.Box, { display: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react68.Radio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react68.Text, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react68.Box, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react68.Text, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react68.Text, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react69.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react69.Box, { display: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react69.Radio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react69.Text, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react69.Box, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react69.Text, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react69.Text, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
   ] });
 };
 Radio.displayName = "Radio";
@@ -3341,8 +3389,8 @@ Radio.defaultProps = {
 };
 
 // src/components/radio/components/radio-group.tsx
-var import_react69 = require("@chakra-ui/react");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react70 = require("@chakra-ui/react");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var RadioGroup = ({
   children,
   label,
@@ -3351,7 +3399,7 @@ var RadioGroup = ({
   errorMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react69.Box, { mt: "12px", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react69.RadioGroup, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react69.Stack, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react70.Box, { mt: "12px", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react70.RadioGroup, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react70.Stack, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 };
 RadioGroup.displayName = "RadioGroup";
 RadioGroup.defaultProps = {
@@ -3361,14 +3409,14 @@ RadioGroup.defaultProps = {
 };
 
 // src/components/radio/index.ts
-var import_react70 = require("@chakra-ui/react");
+var import_react71 = require("@chakra-ui/react");
 
 // src/components/rating/components/rating.tsx
-var import_react71 = require("@chakra-ui/react");
+var import_react72 = require("@chakra-ui/react");
 var import_internal_icon6 = require("@ctlyst.id/internal-icon");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var Rating = ({ value }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react71.Grid, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_internal_icon6.Rating, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react72.Grid, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_internal_icon6.Rating, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
 };
 var rating_default = Rating;
 
@@ -3377,16 +3425,16 @@ var import_system7 = require("@chakra-ui/system");
 var import_react_select = __toESM(require("react-select"));
 
 // src/config/theme/foundations/shadows.ts
-var import_react72 = require("@chakra-ui/react");
+var import_react73 = require("@chakra-ui/react");
 var shadows = {
-  ...import_react72.theme.shadows,
+  ...import_react73.theme.shadows,
   raised: "0px 4px 20px rgba(0, 0, 0, 0.05)"
 };
 
 // src/config/theme/foundations/sizes.ts
-var import_react73 = require("@chakra-ui/react");
+var import_react74 = require("@chakra-ui/react");
 var sizes = {
-  ...import_react73.theme.sizes,
+  ...import_react74.theme.sizes,
   4.5: "1.125rem",
   9.5: "2.375rem",
   18: "4.5rem",
@@ -3396,9 +3444,9 @@ var sizes = {
 };
 
 // src/config/theme/foundations/spacing.ts
-var import_react74 = require("@chakra-ui/react");
+var import_react75 = require("@chakra-ui/react");
 var spacing = {
-  ...import_react74.theme.space,
+  ...import_react75.theme.space,
   4.5: "1.125rem",
   9.5: "2.375rem",
   18: "4.5rem",
@@ -3643,13 +3691,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)"
         }
@@ -3667,23 +3715,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) => {
@@ -3700,14 +3772,14 @@ var themeSelect = (theme6) => {
 };
 
 // src/components/select/components/select.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Select2({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = (0, import_system7.useColorMode)();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_react_select.default,
     {
       classNamePrefix: "react-select",
@@ -3722,14 +3794,14 @@ var select_default = Select2;
 // src/components/select/components/select-async.tsx
 var import_system8 = require("@chakra-ui/system");
 var import_react_select_async_paginate = require("react-select-async-paginate");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function SelectAsync({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = (0, import_system8.useColorMode)();
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     import_react_select_async_paginate.AsyncPaginate,
     {
       classNamePrefix: "react-select",
@@ -3744,10 +3816,10 @@ var select_async_default = SelectAsync;
 // src/components/select/components/select-async-creatable.tsx
 var import_system9 = require("@chakra-ui/system");
 var import_async_creatable = __toESM(require("react-select/async-creatable"));
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = (0, import_system9.useColorMode)();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_async_creatable.default,
     {
       classNamePrefix: "react-select",
@@ -3761,10 +3833,10 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
 // src/components/select/components/select-creatable.tsx
 var import_system10 = require("@chakra-ui/system");
 var import_creatable = __toESM(require("react-select/creatable"));
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function SelectCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = (0, import_system10.useColorMode)();
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     import_creatable.default,
     {
       classNamePrefix: "react-select",
@@ -3775,17 +3847,154 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
   );
 }
 
+// src/components/select/components/select-with-checkbox.tsx
+var import_react76 = require("@chakra-ui/react");
+var import_system11 = require("@chakra-ui/system");
+var import_react_select2 = __toESM(require("react-select"));
+var import_jsx_runtime57 = require("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__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      import_react_select2.components.Option,
+      {
+        isMulti: true,
+        data,
+        isDisabled,
+        isFocused,
+        isSelected,
+        getStyles,
+        innerProps: props,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+          import_react76.Flex,
+          {
+            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__ */ (0, import_jsx_runtime57.jsx)(
+                import_react76.Checkbox,
+                {
+                  isChecked: checkedState === CHECKBOX_STATE.CHECKED,
+                  isIndeterminate: checkedState === CHECKBOX_STATE.INDETERMINATE,
+                  isDisabled,
+                  "data-test-id": "CT_component_select-checkbox_select-all-option"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react76.Checkbox, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react76.Text, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+            ]
+          }
+        )
+      }
+    ),
+    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("hr", {}) : null
+  ] });
+};
+var SelectWithCheckboxBase = ({
+  isError = false,
+  components,
+  options,
+  ...rest
+}) => {
+  const { colorMode } = (0, import_system11.useColorMode)();
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    import_react_select2.default,
+    {
+      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__ */ (0, import_jsx_runtime57.jsx)(
+    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__ */ (0, import_jsx_runtime57.jsx)(InputOption, { ...optionProps, checkedState });
+        }
+      },
+      ...rest
+    }
+  );
+};
+var select_with_checkbox_default = SelectCheckbox;
+
 // src/components/switch/components/switch.tsx
-var import_react75 = require("@chakra-ui/react");
-var import_shared_utils9 = require("@chakra-ui/shared-utils");
+var import_react77 = require("@chakra-ui/react");
+var import_shared_utils10 = require("@chakra-ui/shared-utils");
 var import_internal_icon7 = require("@ctlyst.id/internal-icon");
-var import_react76 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var Switch = (0, import_react75.forwardRef)(function Switch2(props, ref) {
-  const styles = (0, import_react75.useMultiStyleConfig)("Switch", props);
-  const { spacing: spacing2 = "0.5rem", children, ...ownProps } = (0, import_react75.omitThemingProps)(props);
-  const { state, getInputProps, getCheckboxProps, getRootProps, getLabelProps } = (0, import_react75.useCheckbox)(ownProps);
-  const containerStyles = (0, import_react76.useMemo)(
+var import_react78 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Switch = (0, import_react77.forwardRef)(function Switch2(props, ref) {
+  const styles = (0, import_react77.useMultiStyleConfig)("Switch", props);
+  const { spacing: spacing2 = "0.5rem", children, ...ownProps } = (0, import_react77.omitThemingProps)(props);
+  const { state, getInputProps, getCheckboxProps, getRootProps, getLabelProps } = (0, import_react77.useCheckbox)(ownProps);
+  const containerStyles = (0, import_react78.useMemo)(
     () => ({
       display: "inline-block",
       position: "relative",
@@ -3795,7 +4004,7 @@ var Switch = (0, import_react75.forwardRef)(function Switch2(props, ref) {
     }),
     [styles.container]
   );
-  const trackStyles = (0, import_react76.useMemo)(
+  const trackStyles = (0, import_react78.useMemo)(
     () => ({
       display: "inline-flex",
       flexShrink: 0,
@@ -3807,7 +4016,7 @@ var Switch = (0, import_react75.forwardRef)(function Switch2(props, ref) {
     }),
     [styles.track]
   );
-  const labelStyles = (0, import_react76.useMemo)(
+  const labelStyles = (0, import_react78.useMemo)(
     () => ({
       userSelect: "none",
       marginStart: spacing2,
@@ -3823,33 +4032,33 @@ var Switch = (0, import_react75.forwardRef)(function Switch2(props, ref) {
     };
     return iconSize[value];
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
-    import_react75.chakra.label,
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    import_react77.chakra.label,
     {
       ...getRootProps(),
       display: "flex",
       alignItems: "center",
-      className: (0, import_shared_utils9.cx)("chakra-switch", props.className),
+      className: (0, import_shared_utils10.cx)("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react75.chakra.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react75.Flex, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_internal_icon7.Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_internal_icon7.Close, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react77.chakra.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react77.Flex, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_internal_icon7.Check, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_internal_icon7.Close, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-            import_react75.chakra.span,
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            import_react77.chakra.span,
             {
               __css: styles.thumb,
               className: "chakra-switch__thumb",
-              "data-checked": (0, import_shared_utils9.dataAttr)(state.isChecked),
-              "data-hover": (0, import_shared_utils9.dataAttr)(state.isHovered)
+              "data-checked": (0, import_shared_utils10.dataAttr)(state.isChecked),
+              "data-hover": (0, import_shared_utils10.dataAttr)(state.isHovered)
             }
           )
         ] }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          import_react75.chakra.span,
+        children && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          import_react77.chakra.span,
           {
             className: "chakra-switch__label",
             color: state.isDisabled ? "black.low" : "black.high",
@@ -3868,18 +4077,18 @@ Switch.defaultProps = {
 var switch_default = Switch;
 
 // src/components/table/index.tsx
-var import_react77 = require("@chakra-ui/react");
+var import_react79 = require("@chakra-ui/react");
 
 // src/components/tabs/components/tab.tsx
-var import_react78 = require("@chakra-ui/react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var Tab = (0, import_react78.forwardRef)((props, ref) => {
+var import_react80 = require("@chakra-ui/react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var Tab = (0, import_react80.forwardRef)((props, ref) => {
   var _a, _b;
-  const tabProps = (0, import_react78.useTab)({ ...props, ref });
+  const tabProps = (0, import_react80.useTab)({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
-  const styles = (0, import_react78.useMultiStyleConfig)("Tabs", tabProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    import_react78.Button,
+  const styles = (0, import_react80.useMultiStyleConfig)("Tabs", tabProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    import_react80.Button,
     {
       "data-test-id": props["data-test-id"],
       p: 4,
@@ -3904,7 +4113,7 @@ var Tab = (0, import_react78.forwardRef)((props, ref) => {
       },
       __css: styles.tab,
       ...tabProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react78.Flex, { alignItems: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react80.Flex, { 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 })
@@ -3915,16 +4124,16 @@ var Tab = (0, import_react78.forwardRef)((props, ref) => {
 var tab_default = Tab;
 
 // src/components/tabs/index.ts
-var import_react79 = require("@chakra-ui/react");
+var import_react81 = require("@chakra-ui/react");
 
 // src/components/text/index.ts
-var import_react80 = require("@chakra-ui/react");
+var import_react82 = require("@chakra-ui/react");
 
 // src/components/tooltip/index.ts
-var import_react81 = require("@chakra-ui/react");
+var import_react83 = require("@chakra-ui/react");
 
 // src/components/uploader/components/uploader.tsx
-var import_react82 = require("@chakra-ui/react");
+var import_react84 = require("@chakra-ui/react");
 var React15 = __toESM(require("react"));
 var import_react_dropzone = require("react-dropzone");
 
@@ -3938,7 +4147,7 @@ var messages = {
 };
 
 // src/components/uploader/components/uploader.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -3986,9 +4195,9 @@ var Uploader = ({
   React15.useEffect(() => {
     setIsSelected(selected != null ? selected : false);
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react82.Stack, { direction: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
-      import_react82.Flex,
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react84.Stack, { direction: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+      import_react84.Flex,
       {
         minH: 200,
         border: "1px dashed",
@@ -3999,11 +4208,11 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { ...getInputProps() }),
-          isDragActive ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react82.Text, { children: messages.dragActive }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react82.Flex, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
-            !multiple && isSelected && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react82.Heading, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
-            !isSelected && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react82.Heading, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
-            isSelected ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react82.Text, { children: messages.dragReplace }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react82.Text, { children: messages.dragInActive })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("input", { ...getInputProps() }),
+          isDragActive ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react84.Text, { children: messages.dragActive }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react84.Flex, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
+            !multiple && isSelected && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react84.Heading, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
+            !isSelected && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react84.Heading, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
+            isSelected ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react84.Text, { children: messages.dragReplace }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react84.Text, { children: messages.dragInActive })
           ] })
         ]
       }
@@ -4020,10 +4229,10 @@ Uploader.defaultProps = {
 var uploader_default = Uploader;
 
 // src/components/index.ts
-var import_react83 = require("@chakra-ui/react");
+var import_react85 = require("@chakra-ui/react");
 
 // src/config/theme/themeConfiguration.ts
-var import_react90 = require("@chakra-ui/react");
+var import_react92 = require("@chakra-ui/react");
 
 // src/config/theme/components/index.ts
 var components_exports = {};
@@ -4566,8 +4775,8 @@ var card_default2 = CardStyle;
 
 // src/config/theme/components/checkbox.ts
 var import_anatomy3 = require("@chakra-ui/anatomy");
-var import_react84 = require("@chakra-ui/react");
-var { definePartsStyle: definePartsStyle3, defineMultiStyleConfig: defineMultiStyleConfig3 } = (0, import_react84.createMultiStyleConfigHelpers)(import_anatomy3.checkboxAnatomy.keys);
+var import_react86 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle3, defineMultiStyleConfig: defineMultiStyleConfig3 } = (0, import_react86.createMultiStyleConfigHelpers)(import_anatomy3.checkboxAnatomy.keys);
 var baseStyle3 = definePartsStyle3({
   control: {
     borderRadius: "sm",
@@ -4657,14 +4866,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
 var import_styled_system5 = require("@chakra-ui/styled-system");
@@ -4751,7 +4960,7 @@ var baseStyle5 = definePartsStyle4({
     minWidth: 0,
     outline: 0,
     px: 2,
-    py: 2.5,
+    py: 2,
     paddingInlineStart: 2,
     paddingInlineEnd: 2,
     position: "relative",
@@ -4851,8 +5060,8 @@ var input_default = Input3;
 
 // src/config/theme/components/loader.ts
 var import_styled_system8 = require("@chakra-ui/styled-system");
-var import_react85 = require("@emotion/react");
-var rotate = (0, import_react85.keyframes)({
+var import_react87 = require("@emotion/react");
+var rotate = (0, import_react87.keyframes)({
   "0%": {
     transform: "rotate(0deg)"
   },
@@ -4982,8 +5191,8 @@ var modal_default = Modal3;
 
 // src/config/theme/components/popover.ts
 var import_anatomy5 = require("@chakra-ui/anatomy");
-var import_react86 = require("@chakra-ui/react");
-var { definePartsStyle: definePartsStyle5, defineMultiStyleConfig: defineMultiStyleConfig5 } = (0, import_react86.createMultiStyleConfigHelpers)(import_anatomy5.popoverAnatomy.keys);
+var import_react88 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle5, defineMultiStyleConfig: defineMultiStyleConfig5 } = (0, import_react88.createMultiStyleConfigHelpers)(import_anatomy5.popoverAnatomy.keys);
 var baseStyle6 = definePartsStyle5({
   content: {
     bg: "white"
@@ -4994,8 +5203,8 @@ var popover_default = popoverTheme;
 
 // src/config/theme/components/radio.ts
 var import_anatomy6 = require("@chakra-ui/anatomy");
-var import_react87 = require("@chakra-ui/react");
-var { definePartsStyle: definePartsStyle6, defineMultiStyleConfig: defineMultiStyleConfig6 } = (0, import_react87.createMultiStyleConfigHelpers)(import_anatomy6.radioAnatomy.keys);
+var import_react89 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle6, defineMultiStyleConfig: defineMultiStyleConfig6 } = (0, import_react89.createMultiStyleConfigHelpers)(import_anatomy6.radioAnatomy.keys);
 var baseStyle7 = definePartsStyle6({
   control: {
     border: "1px solid",
@@ -5434,7 +5643,7 @@ var tabsTheme = defineMultiStyleConfig9({
 var tabs_default = tabsTheme;
 
 // src/config/theme/components/textarea.ts
-var import_react88 = require("@chakra-ui/react");
+var import_react90 = require("@chakra-ui/react");
 var getProps = (props) => {
   const { isError, isSuccess, isDisabled } = props;
   let borderColor = "neutral.400";
@@ -5454,7 +5663,7 @@ var getProps = (props) => {
     borderColor
   };
 };
-var outline2 = (0, import_react88.defineStyle)((props) => {
+var outline2 = (0, import_react90.defineStyle)((props) => {
   const { focusBorderColor, borderColor } = getProps(props);
   return {
     background: "white.high",
@@ -5498,7 +5707,7 @@ var outline2 = (0, import_react88.defineStyle)((props) => {
     }
   };
 });
-var Textarea = (0, import_react88.defineStyleConfig)({
+var Textarea = (0, import_react90.defineStyleConfig)({
   variants: { outline: outline2 },
   defaultProps: {
     variant: "outline"
@@ -5507,14 +5716,14 @@ var Textarea = (0, import_react88.defineStyleConfig)({
 var textarea_default2 = Textarea;
 
 // src/config/theme/components/tooltip.ts
-var import_react89 = require("@chakra-ui/react");
-var $arrowBg = (0, import_react89.cssVar)("popper-arrow-bg");
+var import_react91 = require("@chakra-ui/react");
+var $arrowBg = (0, import_react91.cssVar)("popper-arrow-bg");
 var baseStyle10 = {
   bg: "neutral.700",
   fontSize: "text.sm",
   [$arrowBg.variable]: "var(--chakra-colors-neutral-700)"
 };
-var Tooltip2 = (0, import_react89.defineStyleConfig)({ baseStyle: baseStyle10 });
+var Tooltip2 = (0, import_react91.defineStyleConfig)({ baseStyle: baseStyle10 });
 var tooltip_default = Tooltip2;
 
 // src/config/theme/themeConfiguration.ts
@@ -5524,7 +5733,7 @@ var config = {
   useSystemColorMode: false
 };
 var getTheme = (foundations) => {
-  return (0, import_react90.extendTheme)({
+  return (0, import_react92.extendTheme)({
     ...foundations,
     components: {
       ...components_exports
@@ -5540,7 +5749,7 @@ var getTheme = (foundations) => {
     config
   });
 };
-var theme5 = (0, import_react90.extendTheme)({
+var theme5 = (0, import_react92.extendTheme)({
   components: {
     ...components_exports
   },
@@ -5560,23 +5769,23 @@ var theme5 = (0, import_react90.extendTheme)({
 
 // src/hooks/useFetcher.ts
 var import_axios2 = __toESM(require("axios"));
-var import_react93 = require("react");
+var import_react95 = require("react");
 
 // src/provider/components/provider.tsx
 var import_axios = __toESM(require("axios"));
-var import_react91 = require("react");
+var import_react93 = require("react");
 var import_react_toastify = require("react-toastify");
-var import_jsx_runtime59 = require("react/jsx-runtime");
-var ProviderContext = (0, import_react91.createContext)({
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var ProviderContext = (0, import_react93.createContext)({
   instance: void 0
 });
 var useInternalUI = () => {
-  const { instance } = (0, import_react91.useContext)(ProviderContext);
+  const { instance } = (0, import_react93.useContext)(ProviderContext);
   return { instance };
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
-  const instanceRef = (0, import_react91.useRef)(import_axios.default.create(config2));
-  (0, import_react91.useEffect)(() => {
+  const instanceRef = (0, import_react93.useRef)(import_axios.default.create(config2));
+  (0, import_react93.useEffect)(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
     });
@@ -5584,9 +5793,9 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
       instanceRef.current.interceptors.response.use(interceptor);
     });
   }, [requestInterceptors, responseInterceptors]);
-  const provider = (0, import_react91.useMemo)(() => ({ instance: instanceRef.current }), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_toastify.ToastContainer, {}),
+  const provider = (0, import_react93.useMemo)(() => ({ instance: instanceRef.current }), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(ProviderContext.Provider, { value: provider, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_toastify.ToastContainer, {}),
     children
   ] });
 };
@@ -5594,12 +5803,12 @@ Provider.displayName = "Provider";
 var provider_default = Provider;
 
 // src/provider/index.ts
-var import_react92 = require("@chakra-ui/react");
+var import_react94 = require("@chakra-ui/react");
 
 // src/hooks/useFetcher.ts
 function useFetcher() {
   const { instance } = useInternalUI();
-  const axiosInstance = (0, import_react93.useMemo)(() => instance || import_axios2.default, [instance]);
+  const axiosInstance = (0, import_react95.useMemo)(() => instance || import_axios2.default, [instance]);
   const fetcher = async ({ url, data, method, headers, ...config2 }) => {
     const response = await axiosInstance.request({
       data,
@@ -5619,10 +5828,10 @@ function useFetcher() {
 }
 
 // src/hooks/index.ts
-var import_react94 = require("@chakra-ui/react");
+var import_react96 = require("@chakra-ui/react");
 
 // src/index.ts
-var import_react95 = require("@chakra-ui/react");
+var import_react97 = require("@chakra-ui/react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -5666,6 +5875,7 @@ var import_react95 = require("@chakra-ui/react");
   Button,
   ButtonGroup,
   ButtonGroupProps,
+  CHECKBOX_STATE,
   Card,
   Center,
   ChakraProvider,
@@ -5777,6 +5987,7 @@ var import_react95 = require("@chakra-ui/react");
   ModalOverlayProps,
   ModalProps,
   MultiDatePickerMonth,
+  NavItem,
   NavigationBar,
   OrderedList,
   Pagination,
@@ -5812,6 +6023,7 @@ var import_react95 = require("@chakra-ui/react");
   Select,
   SelectAsync,
   SelectAsyncCreatable,
+  SelectCheckBox,
   SelectCreatable,
   Show,
   ShowProps,
@@ -5902,6 +6114,7 @@ var import_react95 = require("@chakra-ui/react");
   WrapProps,
   extendTheme,
   forwardRef,
+  getSelectAllCheckboxState,
   getTheme,
   theme,
   useAccordion,