@ctlyst.id/internal-ui 3.1.5 → 3.1.7

package/dist/index.js

@@ -59,12 +59,12 @@ __export(src_exports, {
   AlertIcon: () => AlertIcon,
   AlertTitle: () => AlertTitle,
   Anchor: () => Anchor,
-  Avatar: () => import_react88.Avatar,
-  AvatarBadge: () => import_react88.AvatarBadge,
-  AvatarBadgeProps: () => import_react88.AvatarBadgeProps,
-  AvatarGroup: () => import_react88.AvatarGroup,
-  AvatarGroupProps: () => import_react88.AvatarGroupProps,
-  AvatarProps: () => import_react88.AvatarProps,
+  Avatar: () => import_react89.Avatar,
+  AvatarBadge: () => import_react89.AvatarBadge,
+  AvatarBadgeProps: () => import_react89.AvatarBadgeProps,
+  AvatarGroup: () => import_react89.AvatarGroup,
+  AvatarGroupProps: () => import_react89.AvatarGroupProps,
+  AvatarProps: () => import_react89.AvatarProps,
   Badge: () => badge_default,
   Box: () => import_react51.Box,
   BoxProps: () => import_react51.BoxProps,
@@ -75,9 +75,9 @@ __export(src_exports, {
   CHECKBOX_STATE: () => CHECKBOX_STATE,
   Card: () => card_default,
   Center: () => import_react51.Center,
-  ChakraProvider: () => import_react98.ChakraProvider,
-  ChakraProviderProps: () => import_react98.ChakraProviderProps,
-  ChakraTable: () => import_react79.Table,
+  ChakraProvider: () => import_react99.ChakraProvider,
+  ChakraProviderProps: () => import_react99.ChakraProviderProps,
+  ChakraTable: () => import_react80.Table,
   Checkbox: () => checkbox_default,
   CheckboxGroup: () => checkbox_group_default,
   CheckboxGroupContext: () => import_react16.CheckboxGroupContext,
@@ -86,15 +86,16 @@ __export(src_exports, {
   CheckboxIconProps: () => import_react16.CheckboxIconProps,
   CheckboxState: () => import_react16.CheckboxState,
   Chips: () => chips_default,
+  ClearIndicator: () => ClearIndicator,
   CloseButton: () => import_react10.CloseButton,
   CloseButtonProps: () => import_react10.CloseButtonProps,
-  Code: () => import_react82.Code,
-  CodeProps: () => import_react82.CodeProps,
-  Collapse: () => import_react88.Collapse,
-  CollapseProps: () => import_react88.CollapseProps,
-  ColorMode: () => import_react98.ColorMode,
-  ColorModeScript: () => import_react98.ColorModeScript,
-  ColorModeScriptProps: () => import_react98.ColorModeScriptProps,
+  Code: () => import_react83.Code,
+  CodeProps: () => import_react83.CodeProps,
+  Collapse: () => import_react89.Collapse,
+  CollapseProps: () => import_react89.CollapseProps,
+  ColorMode: () => import_react99.ColorMode,
+  ColorModeScript: () => import_react99.ColorModeScript,
+  ColorModeScriptProps: () => import_react99.ColorModeScriptProps,
   Container: () => import_react51.Container,
   ContainerProps: () => import_react51.ContainerProps,
   Counter: () => counter_default,
@@ -113,9 +114,10 @@ __export(src_exports, {
   DrawerHeader: () => import_react54.ModalHeader,
   DrawerOverlay: () => import_react54.ModalOverlay,
   DrawerProps: () => import_react54.DrawerProps,
+  DropdownIndicator: () => DropdownIndicator,
   EmptyState: () => empty_state_default,
-  Fade: () => import_react88.Fade,
-  FadeProps: () => import_react88.FadeProps,
+  Fade: () => import_react89.Fade,
+  FadeProps: () => import_react89.FadeProps,
   Field: () => field_default,
   Flex: () => import_react51.Flex,
   FlexProps: () => import_react51.FlexProps,
@@ -131,18 +133,18 @@ __export(src_exports, {
   GridProps: () => import_react51.GridProps,
   HStack: () => import_react51.HStack,
   Header: () => Header,
-  Heading: () => import_react82.Heading,
-  HeadingProps: () => import_react82.HeadingProps,
-  Hide: () => import_react88.Hide,
-  HideProps: () => import_react88.HideProps,
+  Heading: () => import_react83.Heading,
+  HeadingProps: () => import_react83.HeadingProps,
+  Hide: () => import_react89.Hide,
+  HideProps: () => import_react89.HideProps,
   Icon: () => import_react50.Icon,
   IconButton: () => import_react10.IconButton,
   IconButtonProps: () => import_react10.IconButtonProps,
   IconProps: () => import_react50.IconProps,
   Image: () => import_react50.Image,
   ImageProps: () => import_react50.ImageProps,
-  Img: () => import_react88.Img,
-  ImgProps: () => import_react88.ImgProps,
+  Img: () => import_react89.Img,
+  ImgProps: () => import_react89.ImgProps,
   InputAddonLeft: () => InputAddonLeft,
   InputAddonRight: () => InputAddonRight,
   InputElementLeft: () => import_react19.InputLeftElement,
@@ -159,8 +161,8 @@ __export(src_exports, {
   InputRightAddonProps: () => import_react25.InputRightAddonProps,
   InputRightElement: () => import_react25.InputRightElement,
   InputRightElementProps: () => import_react25.InputRightElementProps,
-  Link: () => import_react82.Link,
-  LinkProps: () => import_react82.LinkProps,
+  Link: () => import_react83.Link,
+  LinkProps: () => import_react83.LinkProps,
   List: () => import_react52.List,
   ListIcon: () => import_react52.ListIcon,
   ListItem: () => import_react52.ListItem,
@@ -186,6 +188,8 @@ __export(src_exports, {
   ModalOverlayProps: () => import_react54.ModalOverlayProps,
   ModalProps: () => import_react54.ModalProps,
   MultiDatePickerMonth: () => multi_datepicker_month_default,
+  MultiValue: () => MultiValue,
+  MultiValueRemove: () => MultiValueRemove,
   NavItem: () => NavItem,
   Navbar: () => Navbar,
   NavigationBar: () => navigation_bar_default,
@@ -232,166 +236,169 @@ __export(src_exports, {
   Rating: () => rating_default,
   RequiredIndicator: () => import_react25.RequiredIndicator,
   RequiredIndicatorProps: () => import_react25.RequiredIndicatorProps,
-  ScaleFade: () => import_react88.ScaleFade,
-  ScaleFadeProps: () => import_react88.ScaleFadeProps,
+  ScaleFade: () => import_react89.ScaleFade,
+  ScaleFadeProps: () => import_react89.ScaleFadeProps,
   Select: () => select_default,
   SelectAsync: () => select_async_default,
   SelectAsyncCreatable: () => SelectAsyncCreatable,
   SelectCheckBox: () => select_with_checkbox_default,
   SelectCreatable: () => SelectCreatable,
-  Show: () => import_react88.Show,
-  ShowProps: () => import_react88.ShowProps,
+  Show: () => import_react89.Show,
+  ShowProps: () => import_react89.ShowProps,
   Sidebar: () => Sidebar,
   SidebarHeader: () => SidebarHeader,
   SidebarMenu: () => SidebarMenu,
   SimpleGrid: () => import_react51.SimpleGrid,
   Skeleton: () => import_react5.Skeleton,
-  Slide: () => import_react88.Slide,
-  SlideFade: () => import_react88.SlideFade,
-  SlideFadeProps: () => import_react88.SlideFadeProps,
-  SlideProps: () => import_react88.SlideProps,
+  Slide: () => import_react89.Slide,
+  SlideFade: () => import_react89.SlideFade,
+  SlideFadeProps: () => import_react89.SlideFadeProps,
+  SlideProps: () => import_react89.SlideProps,
   Spacer: () => import_react51.Spacer,
   Stack: () => import_react51.Stack,
   StackProps: () => import_react51.StackProps,
-  Step: () => import_react88.Step,
-  StepDescription: () => import_react88.StepDescription,
-  StepIcon: () => import_react88.StepIcon,
-  StepIndicator: () => import_react88.StepIndicator,
-  StepNumber: () => import_react88.StepNumber,
-  StepSeparator: () => import_react88.StepSeparator,
-  StepStatus: () => import_react88.StepStatus,
-  StepTitle: () => import_react88.StepTitle,
-  Stepper: () => import_react88.Stepper,
+  Step: () => import_react89.Step,
+  StepDescription: () => import_react89.StepDescription,
+  StepIcon: () => import_react89.StepIcon,
+  StepIndicator: () => import_react89.StepIndicator,
+  StepNumber: () => import_react89.StepNumber,
+  StepSeparator: () => import_react89.StepSeparator,
+  StepStatus: () => import_react89.StepStatus,
+  StepTitle: () => import_react89.StepTitle,
+  Stepper: () => import_react89.Stepper,
   Switch: () => switch_default,
   Tab: () => tab_default,
-  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,
+  TabIndicator: () => import_react82.TabIndicator,
+  TabIndicatorProps: () => import_react82.TabIndicatorProps,
+  TabList: () => import_react82.TabList,
+  TabListProps: () => import_react82.TabListProps,
+  TabPanel: () => import_react82.TabPanel,
+  TabPanelProps: () => import_react82.TabPanelProps,
+  TabPanels: () => import_react82.TabPanels,
+  TabPanelsProps: () => import_react82.TabPanelsProps,
+  TabProps: () => import_react82.TabProps,
+  TableBodyProps: () => import_react80.TableBodyProps,
+  TableCellProps: () => import_react80.TableCellProps,
+  TableColumnHeaderProps: () => import_react80.TableColumnHeaderProps,
+  TableHeadProps: () => import_react80.TableHeadProps,
+  TableProps: () => import_react80.TableProps,
+  TableRowProps: () => import_react80.TableRowProps,
+  Tabs: () => import_react82.Tabs,
+  TabsDescendantsProvider: () => import_react82.TabsDescendantsProvider,
+  TabsProps: () => import_react82.TabsProps,
+  TabsProvider: () => import_react82.TabsProvider,
+  Tbody: () => import_react80.Tbody,
+  Td: () => import_react80.Td,
+  Text: () => import_react83.Text,
+  TextProps: () => import_react83.TextProps,
   TextareaField: () => textarea_default,
-  Th: () => import_react79.Th,
-  Thead: () => import_react79.Thead,
+  Th: () => import_react80.Th,
+  Thead: () => import_react80.Thead,
   ThemeTypings: () => import_styled_system12.ThemeTypings,
   ToastContainer: () => import_react_toastify2.ToastContainer,
   Tooltip: () => Tooltip,
-  Tr: () => import_react79.Tr,
+  Tr: () => import_react80.Tr,
   UnorderedList: () => import_react52.UnorderedList,
   Uploader: () => uploader_default,
   UseAccordionItemProps: () => import_react3.UseAccordionItemProps,
   UseAccordionItemReturn: () => import_react3.UseAccordionItemReturn,
   UseAccordionProps: () => import_react3.UseAccordionProps,
   UseAccordionReturn: () => import_react3.UseAccordionReturn,
-  UseBreakpointOptions: () => import_react88.UseBreakpointOptions,
+  UseBreakpointOptions: () => import_react89.UseBreakpointOptions,
   UseCheckboxGroupProps: () => import_react16.UseCheckboxGroupProps,
   UseCheckboxGroupReturn: () => import_react16.UseCheckboxGroupReturn,
   UseCheckboxProps: () => import_react16.UseCheckboxProps,
   UseCheckboxReturn: () => import_react16.UseCheckboxReturn,
-  UseDisclosureProps: () => import_react100.UseDisclosureProps,
-  UseImageProps: () => import_react88.UseImageProps,
-  UseImageReturn: () => import_react88.UseImageReturn,
-  UseMediaQueryOptions: () => import_react88.UseMediaQueryOptions,
+  UseDisclosureProps: () => import_react101.UseDisclosureProps,
+  UseImageProps: () => import_react89.UseImageProps,
+  UseImageReturn: () => import_react89.UseImageReturn,
+  UseMediaQueryOptions: () => import_react89.UseMediaQueryOptions,
   UseModalProps: () => import_react54.UseModalProps,
   UseModalReturn: () => import_react54.UseModalReturn,
   UsePinInputFieldProps: () => import_react63.UsePinInputFieldProps,
   UsePinInputProps: () => import_react63.UsePinInputProps,
   UsePinInputReturn: () => import_react63.UsePinInputReturn,
-  UseQueryProps: () => import_react88.UseQueryProps,
+  UseQueryProps: () => import_react89.UseQueryProps,
   UseRadioGroupReturn: () => import_react68.UseRadioGroupReturn,
   UseRadioProps: () => import_react68.UseRadioProps,
   UseRadioReturn: () => import_react68.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,
+  UseTabListProps: () => import_react82.UseTabListProps,
+  UseTabListReturn: () => import_react82.UseTabListReturn,
+  UseTabOptions: () => import_react82.UseTabOptions,
+  UseTabPanelsProps: () => import_react82.UseTabPanelsProps,
+  UseTabProps: () => import_react82.UseTabProps,
+  UseTabsProps: () => import_react82.UseTabsProps,
+  UseTabsReturn: () => import_react82.UseTabsReturn,
   VStack: () => import_react51.VStack,
   Version: () => Version,
-  VisuallyHidden: () => import_react88.VisuallyHidden,
-  VisuallyHiddenInput: () => import_react88.VisuallyHiddenInput,
+  VisuallyHidden: () => import_react89.VisuallyHidden,
+  VisuallyHiddenInput: () => import_react89.VisuallyHiddenInput,
   VoilaLogo: () => VoilaLogo,
   Wrap: () => import_react51.Wrap,
   WrapItem: () => import_react51.WrapItem,
   WrapItemProps: () => import_react51.WrapItemProps,
   WrapProps: () => import_react51.WrapProps,
   XMSLogo: () => XMSLogo,
-  extendTheme: () => import_react101.extendTheme,
-  forwardRef: () => import_react101.forwardRef,
+  extendTheme: () => import_react102.extendTheme,
+  forwardRef: () => import_react102.forwardRef,
   getSelectAllCheckboxState: () => getSelectAllCheckboxState,
   getTheme: () => getTheme,
+  isCellDisabled: () => isCellDisabled,
+  selectStyles: () => selectStyles,
   theme: () => theme4,
+  themeSelect: () => themeSelect,
   useAccordion: () => import_react3.useAccordion,
   useAccordionContext: () => import_react3.useAccordionContext,
   useAccordionItem: () => import_react3.useAccordionItem,
   useAccordionItemState: () => import_react3.useAccordionItemState,
   useAccordionStyles: () => import_react3.useAccordionStyles,
   useAlertStyles: () => useAlertStyles,
-  useBoolean: () => import_react100.useBoolean,
-  useBreakpoint: () => import_react88.useBreakpoint,
+  useBoolean: () => import_react101.useBoolean,
+  useBreakpoint: () => import_react89.useBreakpoint,
   useCheckbox: () => import_react16.useCheckbox,
   useCheckboxGroup: () => import_react16.useCheckboxGroup,
-  useClipboard: () => import_react100.useClipboard,
-  useColorMode: () => import_react100.useColorMode,
-  useColorModePreference: () => import_react88.useColorModePreference,
-  useColorModeValue: () => import_react100.useColorModeValue,
-  useConst: () => import_react100.useConst,
-  useControllableProp: () => import_react100.useControllableProp,
-  useControllableState: () => import_react100.useControllableState,
+  useClipboard: () => import_react101.useClipboard,
+  useColorMode: () => import_react101.useColorMode,
+  useColorModePreference: () => import_react89.useColorModePreference,
+  useColorModeValue: () => import_react101.useColorModeValue,
+  useConst: () => import_react101.useConst,
+  useControllableProp: () => import_react101.useControllableProp,
+  useControllableState: () => import_react101.useControllableState,
   useDataTable: () => useDataTable,
-  useDimensions: () => import_react100.useDimensions,
-  useDisclosure: () => import_react100.useDisclosure,
+  useDimensions: () => import_react101.useDimensions,
+  useDisclosure: () => import_react101.useDisclosure,
   useDrawerContext: () => import_react54.useDrawerContext,
   useFetcher: () => useFetcher,
-  useImage: () => import_react88.useImage,
+  useImage: () => import_react89.useImage,
   useInternalUI: () => useInternalUI,
-  useMergeRefs: () => import_react100.useMergeRefs,
+  useMergeRefs: () => import_react101.useMergeRefs,
   useModal: () => import_react54.useModal,
   useModalContext: () => import_react54.useModalContext,
   useModalStyles: () => import_react54.useModalStyles,
-  useOutsideClick: () => import_react100.useOutsideClick,
+  useOutsideClick: () => import_react101.useOutsideClick,
   usePinInput: () => import_react63.usePinInput,
   usePinInputContext: () => import_react63.usePinInputContext,
   usePinInputField: () => import_react63.usePinInputField,
   useProgressStyles: () => import_react65.useProgressStyles,
-  useQuery: () => import_react88.useQuery,
+  useQuery: () => import_react89.useQuery,
   useRadio: () => import_react68.useRadio,
   useRadioGroup: () => import_react68.useRadioGroup,
   useRadioGroupContext: () => import_react68.useRadioGroupContext,
-  useSteps: () => import_react88.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_react100.useTheme,
+  useSteps: () => import_react89.useSteps,
+  useTab: () => import_react82.useTab,
+  useTabIndicator: () => import_react82.useTabIndicator,
+  useTabList: () => import_react82.useTabList,
+  useTabPanel: () => import_react82.useTabPanel,
+  useTabPanels: () => import_react82.useTabPanels,
+  useTabs: () => import_react82.useTabs,
+  useTabsContext: () => import_react82.useTabsContext,
+  useTabsDescendant: () => import_react82.useTabsDescendant,
+  useTabsDescendants: () => import_react82.useTabsDescendants,
+  useTabsDescendantsContext: () => import_react82.useTabsDescendantsContext,
+  useTabsStyles: () => import_react82.useTabsStyles,
+  useTheme: () => import_react101.useTheme,
   useToast: () => useToast,
-  useToken: () => import_react100.useToken
+  useToken: () => import_react101.useToken
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -1262,6 +1269,12 @@ var import_react_table = require("@tanstack/react-table");
 var React5 = __toESM(require("react"));
 var import_react30 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var isCellDisabled = (row, cellId) => {
+  if (row.disabled) {
+    return row.disabled[cellId];
+  }
+  return false;
+};
 var getCommonPinningStyles = (column) => {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
@@ -1393,141 +1406,145 @@ var useDataTable = ({
     generateColumn
   };
 };
-var DataTable = React5.forwardRef(
-  (props, ref) => {
-    const { isLoading, styles, headerSticky, onRowClick, container } = props;
-    const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
-    React5.useImperativeHandle(ref, () => ({
-      toggleAllRowsSelected
-    }));
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { overflowX: "auto", position: "relative", maxW: "100%", minH: 400, w: "full", ...container, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-        import_react28.Th,
-        {
-          colSpan: header.colSpan,
-          width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
-          ...styles == null ? void 0 : styles.tableColumnHeader,
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            import_react28.Flex,
-            {
-              "data-test-id": "CT_component_data-table_loader",
-              textTransform: "capitalize",
-              align: "center",
-              gap: 2,
-              children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
-            }
-          )
-        },
-        header.id
-      )) }, headerGroup.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Td, { width: 210, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Skeleton, { startColor: "gray.50", endColor: "gray.100", h: "30px", w: "100%" }, i) }, i)) }, num)) })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { bg: (0, import_react28.useColorModeValue)("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
-        var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_react28.Th,
-          {
-            colSpan: header.colSpan,
-            sx: getCommonPinningStyles(header.column),
-            width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
-            ...styles == null ? void 0 : styles.tableColumnHeader,
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-              import_react28.Flex,
-              {
-                backgroundColor: "white",
-                height: "100%",
-                "data-test-id": `CT_Container_TableHeader_${header.id}`,
-                textTransform: "capitalize",
-                userSelect: "none",
-                align: "center",
-                gap: 2,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Text, { children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                    import_react28.Box,
-                    {
-                      as: "span",
-                      cursor: header.column.getCanSort() ? "pointer" : "default",
-                      "data-test-id": `CT_Container_SortingIcon_${header.id}`,
-                      onClick: header.column.getToggleSortingHandler(),
-                      children: (_a = header.column.getCanSort() && {
-                        asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
-                        desc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
-                      }[header.column.getIsSorted()]) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { h: 4, w: 4, color: "neutral.500" })
-                    }
-                  )
-                ]
-              }
-            )
-          },
-          header.id
-        );
-      }) }, headerGroup.id)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
-        const trRef = (0, import_react30.useRef)();
-        return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          import_react28.Tr,
+var DataTable = React5.forwardRef((props, ref) => {
+  const { isLoading, styles, headerSticky, onRowClick, container } = props;
+  const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
+  React5.useImperativeHandle(ref, () => ({
+    toggleAllRowsSelected
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { overflowX: "auto", position: "relative", maxW: "100%", w: "full", ...container, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      import_react28.Th,
+      {
+        colSpan: header.colSpan,
+        width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
+        ...styles == null ? void 0 : styles.tableColumnHeader,
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_react28.Flex,
           {
-            "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
-            tabindex: "0",
-            ref: trRef,
-            ...styles == null ? void 0 : styles.tableRow,
-            css: import_react29.css`
-                      &:last-child {
-                        td {
-                          border-bottom: none;
-                        }
+            "data-test-id": "CT_component_data-table_loader",
+            textTransform: "capitalize",
+            align: "center",
+            gap: 2,
+            children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+          }
+        )
+      },
+      header.id
+    )) }, headerGroup.id)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Td, { width: 210, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Skeleton, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i) }, i)) }, num)) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      import_react28.Thead,
+      {
+        maxH: "50px",
+        ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}),
+        children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { bg: (0, import_react28.useColorModeValue)("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            import_react28.Th,
+            {
+              colSpan: header.colSpan,
+              sx: getCommonPinningStyles(header.column),
+              width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
+              ...styles == null ? void 0 : styles.tableColumnHeader,
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                import_react28.Flex,
+                {
+                  backgroundColor: "white",
+                  height: "100%",
+                  "data-test-id": `CT_Container_TableHeader_${header.id}`,
+                  textTransform: "capitalize",
+                  userSelect: "none",
+                  align: "center",
+                  gap: 2,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Text, { children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      import_react28.Box,
+                      {
+                        as: "span",
+                        cursor: header.column.getCanSort() ? "pointer" : "default",
+                        "data-test-id": `CT_Container_SortingIcon_${header.id}`,
+                        onClick: header.column.getToggleSortingHandler(),
+                        children: (_a = header.column.getCanSort() && {
+                          asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
+                          desc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
+                        }[header.column.getIsSorted()]) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { color: "neutral.500" }) })
                       }
-                    `,
-            onMouseDown: () => {
-              var _a;
-              (_a = trRef.current) == null ? void 0 : _a.setAttribute("data-active", "true");
-            },
-            onMouseUp: () => {
-              var _a;
-              (_a = trRef.current) == null ? void 0 : _a.removeAttribute("data-active");
-            },
-            onClick: () => {
-              if (onRowClick) {
-                onRowClick(row.original);
-              }
+                    )
+                  ]
+                }
+              )
             },
-            children: row.getVisibleCells().map((cell) => {
-              var _a, _b;
-              const isDisabled = (_b = (_a = cell.row.original) == null ? void 0 : _a.disabled) == null ? void 0 : _b[cell.column.id];
-              return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                import_react28.Td,
-                {
-                  "data-test-id": `CT_Component_TableCell_${cell.id}`,
-                  fontSize: "text.sm",
-                  sx: getCommonPinningStyles(cell.column),
-                  ...styles == null ? void 0 : styles.tableCell,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Flex, { height: "100%", align: "center", opacity: isDisabled ? 0.5 : 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                    import_react28.Flex,
-                    {
-                      tabIndex: 0,
-                      display: "inline-flex",
-                      cursor: "auto",
-                      "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
-                      onMouseUp: (e) => e.stopPropagation(),
-                      onMouseDown: (e) => e.stopPropagation(),
-                      onClick: (e) => {
-                        e.stopPropagation();
-                      },
-                      children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+            header.id
+          );
+        }) }, headerGroup.id))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
+      const trRef = (0, import_react30.useRef)();
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        import_react28.Tr,
+        {
+          "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
+          tabindex: "0",
+          ref: trRef,
+          ...styles == null ? void 0 : styles.tableRow,
+          css: import_react29.css`
+                    &:last-child {
+                      td {
+                        border-bottom: none;
+                      }
                     }
-                  ) })
-                },
-                cell.id
-              );
-            })
+                  `,
+          onMouseDown: () => {
+            var _a;
+            (_a = trRef.current) == null ? void 0 : _a.setAttribute("data-active", "true");
           },
-          row.id
-        );
-      }) })
-    ] }) });
-  }
-);
+          onMouseUp: () => {
+            var _a;
+            (_a = trRef.current) == null ? void 0 : _a.removeAttribute("data-active");
+          },
+          onClick: () => {
+            if (onRowClick) {
+              onRowClick(row.original);
+            }
+          },
+          children: row.getVisibleCells().map((cell) => {
+            const isDisabled = isCellDisabled(row.original, cell.column.id);
+            return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              import_react28.Td,
+              {
+                "data-test-id": `CT_Component_TableCell_${cell.id}`,
+                fontSize: "text.sm",
+                sx: getCommonPinningStyles(cell.column),
+                ...styles == null ? void 0 : styles.tableCell,
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Flex, { height: "100%", align: "center", opacity: isDisabled ? 0.5 : 1, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  import_react28.Flex,
+                  {
+                    tabIndex: 0,
+                    display: "inline-flex",
+                    cursor: "auto",
+                    "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
+                    onMouseUp: (e) => e.stopPropagation(),
+                    onMouseDown: (e) => e.stopPropagation(),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    },
+                    children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                  }
+                ) })
+              },
+              cell.id
+            );
+          })
+        },
+        row.id
+      );
+    }) })
+  ] }) });
+});
 var data_table_default = DataTable;
 
 // src/components/datepicker/components/datepicker.tsx
@@ -2847,30 +2864,39 @@ NavItem.defaultProps = {
 var import_react44 = require("@chakra-ui/react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var Tooltip = (props) => {
-  const { children, bg = "neutral.700", textStyle = "text.sm", color = "white", width, rounded = 4 } = props;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  const {
+    children,
+    bg = "neutral.700",
+    textStyle = "text.sm",
+    color = "white",
+    width,
+    borderRadius = 4,
+    fontWeight = "400"
+  } = props;
+  const content = ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     import_react44.PopoverContent,
     {
       "data-test-id": "",
       border: "none",
       bg,
-      rounded,
-      ml: 1,
       textStyle,
       width,
       placeItems: "center",
-      borderRadius: props.borderRadius,
-      onClick: (e) => e.stopPropagation(),
+      borderRadius,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
       children: [
         props.hasArrow && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.PopoverArrow, { color, bg, shadow: "none" }),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.PopoverBody, { color, ...props, children: props.label })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.PopoverBody, { color, ...props, fontWeight, children: props.label })
       ]
     }
   );
-  return props.isInteractive === true ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react44.Popover, { trigger: "hover", placement: props.placement, ...props.popoverProps, children: [
+  return props.isInteractive === true ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.Popover, { trigger: "hover", placement: props.placement, ...props.popoverProps, children: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.PopoverTrigger, { children }),
-    props.portal ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.Portal, { children: content }) : content
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.Tooltip, { ...props, children });
+    props.portal ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.Portal, { children: content({ onClose }) }) : content({ onClose })
+  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.Tooltip, { ...props, children });
 };
 
 // src/components/header/components/profile.tsx
@@ -2936,18 +2962,19 @@ var Profile = ({
                     ] }),
                     textAlign: "left",
                     placement: "bottom-end",
+                    cursor: "text",
+                    portal: true,
                     popoverProps: {
                       offset: [10, 8]
                     },
                     width: 300,
                     ...officeContainer,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react45.Box, { display: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react45.Box, { ml: 1, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                       badge_default,
                       {
-                        ml: "1",
-                        pill: true,
+                        rounded: "full",
                         variant: "neutral-light",
-                        boxSize: "4.5",
+                        boxSize: "5",
                         justifyContent: "center",
                         p: "0.5",
                         ...badgeStyle,
@@ -3696,7 +3723,9 @@ var Rating = ({ value }) => {
 var rating_default = Rating;
 
 // src/components/select/components/select.tsx
+var import_react73 = require("@chakra-ui/react");
 var import_system7 = require("@chakra-ui/system");
+var Icon7 = __toESM(require("@ctlyst.id/internal-icon"));
 var import_react_select = __toESM(require("react-select"));
 
 // src/config/theme/foundations/shadows.ts
@@ -4004,10 +4033,10 @@ function selectStyles(colorMode, _isError) {
       return { ...base, ...selectStyle };
     },
     dropdownIndicator: (base) => {
-      return { ...base, ...selectStyle };
+      return { ...base, ...selectStyle, color: "var(--chakra-colors-neutral-400)" };
     },
     indicatorSeparator: (base) => {
-      return { ...base, ...selectStyle };
+      return { ...base, background: "var(--chakra-colors-neutral-400)", borderRadius: 10 };
     },
     placeholder: (base) => {
       return { ...base, ...selectStyle, color: "var(--chakra-colors-black-low)" };
@@ -4022,13 +4051,15 @@ function selectStyles(colorMode, _isError) {
     multiValueLabel: (base) => ({
       ...base,
       borderRadius: 4,
-      fontWeight: "bold"
+      fontWeight: "bold",
+      padding: 0,
+      paddingLeft: 0
     }),
     multiValueRemove: (base) => ({
       ...base,
       color: "var(--chakra-colors-neutral-900)",
       ":hover": {
-        backgroundColor: "var(--chakra-colors-neutral-300)"
+        backgroundColor: "transparent"
       }
     })
   };
@@ -4048,19 +4079,40 @@ var themeSelect = (theme5) => {
 
 // src/components/select/components/select.tsx
 var import_jsx_runtime53 = require("react/jsx-runtime");
+function DropdownIndicator(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_select.components.DropdownIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon7.ChevronDown, { size: 4, color: "neutral.400" }) });
+}
+function ClearIndicator(props) {
+  const { hasValue } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_select.components.ClearIndicator, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon7.Close, { size: 4, color: hasValue ? "black.medium" : "neutral.400" }) });
+}
+function MultiValue(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_select.components.MultiValue, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react73.Badge, { pr: 0, variant: "neutral-light", children: props == null ? void 0 : props.data.label }) });
+}
+function MultiValueRemove(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_select.components.MultiValueRemove, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react73.Flex, { align: "center", justify: "center", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon7.Close, { size: 2.5, color: "inherit" }) }) });
+}
 function Select2({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = (0, import_system7.useColorMode)();
+  const { components } = rest;
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_react_select.default,
     {
       classNamePrefix: "react-select",
-      ...rest,
+      components: {
+        DropdownIndicator,
+        ClearIndicator,
+        MultiValue,
+        MultiValueRemove,
+        ...components
+      },
       styles: { ...selectStyles(colorMode, isError) },
-      theme: themeSelect
+      theme: themeSelect,
+      ...rest
     }
   );
 }
@@ -4080,6 +4132,10 @@ function SelectAsync({
     import_react_select_async_paginate.AsyncPaginate,
     {
       classNamePrefix: "react-select",
+      components: {
+        DropdownIndicator,
+        ClearIndicator
+      },
       ...rest,
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
@@ -4098,6 +4154,10 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
     import_async_creatable.default,
     {
       classNamePrefix: "react-select",
+      components: {
+        DropdownIndicator,
+        ClearIndicator
+      },
       ...rest,
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
@@ -4115,6 +4175,10 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
     import_creatable.default,
     {
       classNamePrefix: "react-select",
+      components: {
+        DropdownIndicator,
+        ClearIndicator
+      },
       ...rest,
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
@@ -4123,7 +4187,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 }
 
 // src/components/select/components/select-with-checkbox.tsx
-var import_react73 = require("@chakra-ui/react");
+var import_react74 = 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");
@@ -4186,7 +4250,7 @@ var InputOption = ({
         innerProps: props,
         ...rest,
         children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-          import_react73.Flex,
+          import_react74.Flex,
           {
             alignItems: "center",
             width: "100%",
@@ -4196,15 +4260,15 @@ var InputOption = ({
             cursor: isDisabled ? "not-allowed" : "default",
             children: [
               (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                import_react73.Checkbox,
+                import_react74.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_react73.Checkbox, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
-              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react73.Text, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+              ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react74.Checkbox, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react74.Text, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
             ]
           }
         )
@@ -4237,7 +4301,7 @@ var SelectWithCheckboxBase = ({
   );
 };
 var SelectCheckbox = (props) => {
-  const { isMulti, options, value, ...rest } = props;
+  const { isMulti, options, value, components, ...rest } = props;
   const selectValue = value || [];
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     SelectWithCheckboxBase,
@@ -4245,6 +4309,11 @@ var SelectCheckbox = (props) => {
       isMulti,
       options,
       components: {
+        DropdownIndicator,
+        ClearIndicator,
+        MultiValue,
+        MultiValueRemove,
+        ...components,
         Option: (optionProps) => {
           const { isSelected, data } = optionProps;
           const optionLength = (options == null ? void 0 : options.length) ? options.length - 1 : 0;
@@ -4260,13 +4329,13 @@ var SelectCheckbox = (props) => {
 var select_with_checkbox_default = SelectCheckbox;
 
 // src/components/sidebar/components/sidebar.tsx
-var import_react74 = require("@chakra-ui/react");
+var import_react75 = require("@chakra-ui/react");
 var import_framer_motion = require("framer-motion");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var Sidebar = ({ isCollapse, children, ...props }) => {
   const { width = "220px" } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-    import_react74.Flex,
+    import_react75.Flex,
     {
       position: "relative",
       as: import_framer_motion.motion.div,
@@ -4286,13 +4355,13 @@ var Sidebar = ({ isCollapse, children, ...props }) => {
 Sidebar.displayName = "Sidebar";
 
 // src/components/sidebar/components/sidebar-header.tsx
-var import_react75 = require("@chakra-ui/react");
+var import_react76 = require("@chakra-ui/react");
 var import_internal_icon8 = require("@ctlyst.id/internal-icon");
 var import_framer_motion2 = require("framer-motion");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-    import_react75.Box,
+    import_react76.Box,
     {
       px: "2",
       color: "neutral.900",
@@ -4302,7 +4371,7 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
         color: "primary.500"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-        import_react75.Flex,
+        import_react76.Flex,
         {
           "data-test-id": "nLkz69YipW818FioeAxVI",
           direction: "row",
@@ -4312,7 +4381,7 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
           cursor: "pointer",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-              import_react75.Box,
+              import_react76.Box,
               {
                 as: import_framer_motion2.motion.div,
                 boxSize: "4",
@@ -4323,8 +4392,8 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
                 children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_internal_icon8.ArrowRight, { size: 4, color: "inherit" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_framer_motion2.AnimatePresence, { children: !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react75.Box, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-              import_react75.Text,
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_framer_motion2.AnimatePresence, { children: !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react76.Box, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              import_react76.Text,
               {
                 as: import_framer_motion2.motion.div,
                 w: "max-content",
@@ -4350,25 +4419,25 @@ SidebarHeader.defaultProps = {
 };
 
 // src/components/sidebar/components/sidebar-menu.tsx
-var import_react76 = require("@chakra-ui/react");
-var Icon7 = __toESM(require("@ctlyst.id/internal-icon"));
+var import_react77 = require("@chakra-ui/react");
+var Icon8 = __toESM(require("@ctlyst.id/internal-icon"));
 var import_framer_motion3 = require("framer-motion");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, setActive, active }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { as: import_framer_motion3.motion.div, animate: { padding: isCollapse ? "8px 16px" : "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Accordion, { index: menu.findIndex((item) => item.children.some((child) => child.navLink === active)), children: menu.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Box, { as: import_framer_motion3.motion.div, animate: { padding: isCollapse ? "8px 16px" : "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Accordion, { index: menu.findIndex((item) => item.children.some((child) => child.navLink === active)), children: menu.map((item) => {
     const isActive = active == null ? void 0 : active.includes(item.navLink);
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.AccordionItem, { mt: "4", children: ({ isExpanded }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.AccordionItem, { mt: "4", children: ({ isExpanded }) => {
       const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
       const noChild = !item.children.length;
       const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
       return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Popover, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Popover, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
           const activeOption = isOpen ? "primary.50" : "white";
           const backgroundColor = isOpen && !isActive ? "primary.50" : "primary.100";
           const activeParent = isActive ? backgroundColor : activeOption;
           return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-              import_react76.AccordionButton,
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.PopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              import_react77.AccordionButton,
               {
                 "data-test-id": `CTA_button-accordion-${item.title}`,
                 p: "0",
@@ -4385,9 +4454,9 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                     position: "relative",
                     ...itemStyles,
                     children: [
-                      mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
+                      mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
                       !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-                        import_react76.Box,
+                        import_react77.Box,
                         {
                           display: "flex",
                           w: "full",
@@ -4400,15 +4469,15 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                           animate: { opacity: 1, x: 0 },
                           exit: { opacity: 0, x: 16 },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { h: "3.5", position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Text, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Box, { h: "3.5", position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Text, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
                             !!item.children.length && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                              import_react76.Box,
+                              import_react77.Box,
                               {
                                 display: "flex",
                                 boxSize: "3",
                                 as: import_framer_motion3.motion.div,
                                 animate: { transform: isExpanded ? "rotate(-180deg)" : "rotate(0)" },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon7.ChevronDown, { size: 3 })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon8.ChevronDown, { size: 3 })
                               }
                             )
                           ]
@@ -4421,12 +4490,12 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
               },
               item.id
             ) }, item.id),
-            isOpenOptions && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Portal, { children: item.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react76.PopoverContent, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverHeader, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react76.Box, { display: "flex", alignItems: "center", children: [
+            isOpenOptions && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Portal, { children: item.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react77.PopoverContent, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.PopoverHeader, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react77.Box, { display: "flex", alignItems: "center", children: [
                 mappingIcon2.get(item.icon || ""),
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { as: "span", ml: "2", children: item.title })
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Box, { as: "span", ml: "2", children: item.title })
               ] }) }),
-              !!item.children.length && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverBody, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              !!item.children.length && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.PopoverBody, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 NavItem,
                 {
                   "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
@@ -4442,7 +4511,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                 },
                 submenu.id
               )) })
-            ] }) : isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverContent, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.PopoverBody, { py: "1", px: "0", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+            ] }) : isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.PopoverContent, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.PopoverBody, { py: "1", px: "0", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
               NavItem,
               {
                 "data-test-id": `CTA_Sidebar-popover-item-${item.id}`,
@@ -4455,15 +4524,15 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                 rounded: "none",
                 ...itemStyles,
                 children: [
-                  mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
-                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Box, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.Text, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
+                  mappingIcon2 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Box, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Box, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.Text, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
                 ]
               },
               item.id
             ) }) }) })
           ] });
         } }, item.id),
-        !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react76.AccordionPanel, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        !isCollapse && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react77.AccordionPanel, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           NavItem,
           {
             mt: "1",
@@ -4487,16 +4556,16 @@ SidebarMenu.defaultProps = {
 };
 
 // src/components/switch/components/switch.tsx
-var import_react77 = require("@chakra-ui/react");
+var import_react78 = require("@chakra-ui/react");
 var import_shared_utils10 = require("@chakra-ui/shared-utils");
 var import_internal_icon9 = require("@ctlyst.id/internal-icon");
-var import_react78 = require("react");
+var import_react79 = require("react");
 var import_jsx_runtime61 = 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)(
+var Switch = (0, import_react78.forwardRef)(function Switch2(props, ref) {
+  const styles = (0, import_react78.useMultiStyleConfig)("Switch", props);
+  const { spacing: spacing2 = "0.5rem", children, ...ownProps } = (0, import_react78.omitThemingProps)(props);
+  const { state, getInputProps, getCheckboxProps, getRootProps, getLabelProps } = (0, import_react78.useCheckbox)(ownProps);
+  const containerStyles = (0, import_react79.useMemo)(
     () => ({
       display: "inline-block",
       position: "relative",
@@ -4506,7 +4575,7 @@ var Switch = (0, import_react77.forwardRef)(function Switch2(props, ref) {
     }),
     [styles.container]
   );
-  const trackStyles = (0, import_react78.useMemo)(
+  const trackStyles = (0, import_react79.useMemo)(
     () => ({
       display: "inline-flex",
       flexShrink: 0,
@@ -4518,7 +4587,7 @@ var Switch = (0, import_react77.forwardRef)(function Switch2(props, ref) {
     }),
     [styles.track]
   );
-  const labelStyles = (0, import_react78.useMemo)(
+  const labelStyles = (0, import_react79.useMemo)(
     () => ({
       userSelect: "none",
       marginStart: spacing2,
@@ -4535,7 +4604,7 @@ var Switch = (0, import_react77.forwardRef)(function Switch2(props, ref) {
     return iconSize[value];
   };
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
-    import_react77.chakra.label,
+    import_react78.chakra.label,
     {
       ...getRootProps(),
       display: "flex",
@@ -4544,13 +4613,13 @@ var Switch = (0, import_react77.forwardRef)(function Switch2(props, ref) {
       __css: containerStyles,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react77.chakra.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react77.Flex, { gap: 1, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react78.chakra.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react78.Flex, { gap: 1, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_internal_icon9.Check, { color: "white", size: getIconSize(props.size) }),
             /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_internal_icon9.Close, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-            import_react77.chakra.span,
+            import_react78.chakra.span,
             {
               __css: styles.thumb,
               className: "chakra-switch__thumb",
@@ -4560,7 +4629,7 @@ var Switch = (0, import_react77.forwardRef)(function Switch2(props, ref) {
           )
         ] }),
         children && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-          import_react77.chakra.span,
+          import_react78.chakra.span,
           {
             className: "chakra-switch__label",
             color: state.isDisabled ? "black.low" : "black.high",
@@ -4580,18 +4649,18 @@ Switch.defaultProps = {
 var switch_default = Switch;
 
 // src/components/table/index.tsx
-var import_react79 = require("@chakra-ui/react");
+var import_react80 = require("@chakra-ui/react");
 
 // src/components/tabs/components/tab.tsx
-var import_react80 = require("@chakra-ui/react");
+var import_react81 = require("@chakra-ui/react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var Tab = (0, import_react80.forwardRef)((props, ref) => {
+var Tab = (0, import_react81.forwardRef)((props, ref) => {
   var _a, _b;
-  const tabProps = (0, import_react80.useTab)({ ...props, ref });
+  const tabProps = (0, import_react81.useTab)({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
-  const styles = (0, import_react80.useMultiStyleConfig)("Tabs", tabProps);
+  const styles = (0, import_react81.useMultiStyleConfig)("Tabs", tabProps);
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-    import_react80.Button,
+    import_react81.Button,
     {
       "data-test-id": props["data-test-id"],
       p: 4,
@@ -4616,7 +4685,7 @@ var Tab = (0, import_react80.forwardRef)((props, ref) => {
       },
       __css: styles.tab,
       ...tabProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react80.Flex, { alignItems: "center", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_react81.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 })
@@ -4627,21 +4696,21 @@ var Tab = (0, import_react80.forwardRef)((props, ref) => {
 var tab_default = Tab;
 
 // src/components/tabs/index.ts
-var import_react81 = require("@chakra-ui/react");
+var import_react82 = require("@chakra-ui/react");
 
 // src/components/text/index.ts
-var import_react82 = require("@chakra-ui/react");
+var import_react83 = require("@chakra-ui/react");
 
 // src/components/toast/components/toast.tsx
-var import_react84 = require("@chakra-ui/react");
+var import_react85 = require("@chakra-ui/react");
 var import_react_toastify = require("react-toastify");
 
 // src/components/toast/components/styles.tsx
-var import_react83 = require("@emotion/react");
+var import_react84 = require("@emotion/react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var Styles2 = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-    import_react83.Global,
+    import_react84.Global,
     {
       styles: `
         .Toastify__toast-container {
@@ -4694,7 +4763,7 @@ var renderIcon = (icon, type) => {
   return icon;
 };
 var useToast = () => {
-  const [primary500, neutral500, info500, danger500, warning500, success500] = (0, import_react84.useToken)("colors", [
+  const [primary500, neutral500, info500, danger500, warning500, success500] = (0, import_react85.useToken)("colors", [
     "primary.500",
     "neutral.500",
     "info.500",
@@ -4705,13 +4774,13 @@ var useToast = () => {
   const content = (icon, message, link) => {
     return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(styles_default2, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react84.Flex, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react84.Flex, { alignItems: "center", children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react84.chakra.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react84.chakra.span, { noOfLines: 2, children: message })
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react85.Flex, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react85.Flex, { alignItems: "center", children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react85.chakra.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react85.chakra.span, { noOfLines: 2, children: message })
         ] }),
         link && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-          import_react84.Link,
+          import_react85.Link,
           {
             href: link.url,
             textDecoration: "underline",
@@ -4789,9 +4858,9 @@ var useToast = () => {
 var import_react_toastify2 = require("react-toastify");
 
 // src/components/uploader/components/uploader.tsx
-var import_react85 = require("@chakra-ui/react");
+var import_react86 = require("@chakra-ui/react");
 var import_internal_icon10 = require("@ctlyst.id/internal-icon");
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_react_dropzone = require("react-dropzone");
 
 // src/components/uploader/constants.ts
@@ -4822,7 +4891,7 @@ var formatValidationMessage = (extension) => `Foto harus dalam format ${concatLi
 
 // src/components/uploader/components/uploader.tsx
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var import_react87 = require("react");
+var import_react88 = require("react");
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -4851,10 +4920,10 @@ var Uploader = ({
   size: size2 = "lg",
   ...props
 }) => {
-  const inputRef = (0, import_react86.useRef)(null);
-  const [filePreview, setFilePreview] = (0, import_react86.useState)();
+  const inputRef = (0, import_react87.useRef)(null);
+  const [filePreview, setFilePreview] = (0, import_react87.useState)();
   const toast2 = useToast();
-  const handleRejection = (0, import_react86.useCallback)(
+  const handleRejection = (0, import_react87.useCallback)(
     (message, file, image) => {
       if (onHandleRejections) {
         onHandleRejections(file, image);
@@ -4866,7 +4935,7 @@ var Uploader = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [onHandleRejections]
   );
-  const onDrop = (0, import_react86.useCallback)(
+  const onDrop = (0, import_react87.useCallback)(
     (files) => {
       var _a;
       const file = files[0];
@@ -4910,18 +4979,18 @@ var Uploader = ({
   });
   const renderHelperText = () => {
     if (Array.isArray(helperText)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react85.UnorderedList, { pl: 2, fontSize: 12, color: "gray.600", "data-test-id": "CT_component_base-image-uploader_helperText", children: helperText.map((text2) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react85.ListItem, { children: text2 }, text2)) });
+      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react86.UnorderedList, { pl: 2, fontSize: 12, color: "gray.600", "data-test-id": "CT_component_base-image-uploader_helperText", children: helperText.map((text2) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react86.ListItem, { children: text2 }, text2)) });
     }
     return helperText;
   };
-  const renderErrorText = (text2) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react85.Box, { mb: 2, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react85.Text, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
+  const renderErrorText = (text2) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react86.Box, { mb: 2, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react86.Text, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
   const handleRemove = (e) => {
     e.stopPropagation();
     setFilePreview(void 0);
     onHandleUploadFile == null ? void 0 : onHandleUploadFile(null, null);
     acceptedFiles.pop();
   };
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     if (value) {
       if (typeof value === "string") {
         setFilePreview(value);
@@ -4937,16 +5006,16 @@ var Uploader = ({
   const color = isDisabled ? "neutral.500" : "primary.500";
   const containerHeight = !isSmall ? "160px" : "120px";
   const cursorType = filePreview ? "initial" : "pointer";
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react85.FormControl, { isRequired, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react86.FormControl, { isRequired, children: [
     label && typeof label === "string" ? (
       // eslint-disable-next-line react/jsx-no-useless-fragment
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react85.FormLabel, { requiredIndicator: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_jsx_runtime65.Fragment, {}), fontSize: "text.sm", children: [
-        isRequired && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react85.RequiredIndicator, { mr: 1, ml: 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react86.FormLabel, { requiredIndicator: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_jsx_runtime65.Fragment, {}), fontSize: "text.sm", children: [
+        isRequired && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react86.RequiredIndicator, { mr: 1, ml: 0 }),
         label
       ] })
     ) : label,
     /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
-      import_react85.Flex,
+      import_react86.Flex,
       {
         minH: containerHeight,
         maxW: !isSmall ? "full" : "120px",
@@ -4963,8 +5032,8 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          filePreview && isShowCloseButton && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react85.Box, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-            import_react85.Button,
+          filePreview && isShowCloseButton && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react86.Box, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            import_react86.Button,
             {
               "data-test-id": `CT_component_base-image-uploader_remove-image${testId ? `_${testId}` : ""}`,
               "aria-label": "remove-image",
@@ -4981,15 +5050,15 @@ var Uploader = ({
               children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_internal_icon10.Close, { size: 3, color: "white" })
             }
           ) }),
-          filePreview && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react85.Box, { w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-            import_react85.Flex,
+          filePreview && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react86.Box, { w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            import_react86.Flex,
             {
               position: "relative",
               "data-test-id": `CT_component_base-image-uploader_image-preview${testId ? `_${testId}` : ""}`,
               justify: "center",
               align: "center",
               children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                import_react85.Image,
+                import_react86.Image,
                 {
                   h: size2 === "lg" ? "120" : "100",
                   src: filePreview,
@@ -5007,11 +5076,11 @@ var Uploader = ({
                 ...getInputProps()
               }
             ),
-            isDragActive ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react85.Text, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react85.Flex, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
+            isDragActive ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react86.Text, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react86.Flex, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
               size2 === "sm" && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_internal_icon10.Plus, { size: 6, color }),
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react85.Box, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react86.Box, { children: [
                 !filePreview && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                  import_react85.Heading,
+                  import_react86.Heading,
                   {
                     fontWeight: "400",
                     fontSize: size2 === "sm" ? "text.md" : "text.xl",
@@ -5020,15 +5089,15 @@ var Uploader = ({
                     children: uploadFileText && size2 === "lg" ? messages.uploadFile : "Upload"
                   }
                 ),
-                size2 === "lg" && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react85.Text, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
+                size2 === "lg" && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react86.Text, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
               ] })
             ] })
           ] })
         ]
       }
     ),
-    filePreview && !isSmall && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react85.Flex, { align: "center", justify: "center", my: 2, children: [
-      /* @__PURE__ */ (0, import_react87.createElement)(
+    filePreview && !isSmall && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react86.Flex, { align: "center", justify: "center", my: 2, children: [
+      /* @__PURE__ */ (0, import_react88.createElement)(
         "input",
         {
           ...getInputProps(),
@@ -5039,7 +5108,7 @@ var Uploader = ({
         }
       ),
       isShowReupload && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-        import_react85.Button,
+        import_react86.Button,
         {
           "data-test-id": `CT_component_base-image-uploader_change-img-btn${testId ? `_${testId}` : ""}`,
           type: "button",
@@ -5060,10 +5129,10 @@ var Uploader = ({
 var uploader_default = Uploader;
 
 // src/components/index.ts
-var import_react88 = require("@chakra-ui/react");
+var import_react89 = require("@chakra-ui/react");
 
 // src/config/theme/themeConfiguration.ts
-var import_react96 = require("@chakra-ui/react");
+var import_react97 = require("@chakra-ui/react");
 
 // src/config/theme/components/index.ts
 var components_exports = {};
@@ -5267,7 +5336,7 @@ var alertTheme = defineMultiStyleConfig2({
 var alert_default = alertTheme;
 
 // src/config/theme/components/badge.ts
-var Badge2 = {
+var Badge3 = {
   baseStyle: {
     h: "fit-content",
     display: "inline-block",
@@ -5341,7 +5410,7 @@ var Badge2 = {
     variant: "primary-solid"
   }
 };
-var badge_default2 = Badge2;
+var badge_default2 = Badge3;
 
 // src/config/theme/components/button.ts
 var import_styled_system3 = require("@chakra-ui/styled-system");
@@ -5620,8 +5689,8 @@ var card_default2 = CardStyle;
 
 // src/config/theme/components/checkbox.ts
 var import_anatomy3 = require("@chakra-ui/anatomy");
-var import_react89 = require("@chakra-ui/react");
-var { definePartsStyle: definePartsStyle3, defineMultiStyleConfig: defineMultiStyleConfig3 } = (0, import_react89.createMultiStyleConfigHelpers)(import_anatomy3.checkboxAnatomy.keys);
+var import_react90 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle3, defineMultiStyleConfig: defineMultiStyleConfig3 } = (0, import_react90.createMultiStyleConfigHelpers)(import_anatomy3.checkboxAnatomy.keys);
 var baseStyle3 = definePartsStyle3({
   control: {
     borderRadius: "sm",
@@ -5722,8 +5791,8 @@ var checkbox_default2 = Checkbox4;
 
 // src/config/theme/components/chips.ts
 var import_anatomy4 = require("@chakra-ui/anatomy");
-var import_react90 = require("@chakra-ui/react");
-var { definePartsStyle: definePartsStyle4, defineMultiStyleConfig: defineMultiStyleConfig4 } = (0, import_react90.createMultiStyleConfigHelpers)(import_anatomy4.tagAnatomy.keys);
+var import_react91 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle4, defineMultiStyleConfig: defineMultiStyleConfig4 } = (0, import_react91.createMultiStyleConfigHelpers)(import_anatomy4.tagAnatomy.keys);
 var baseStyle4 = definePartsStyle4({
   container: {
     px: 3,
@@ -5932,8 +6001,8 @@ var input_default = Input3;
 
 // src/config/theme/components/loader.ts
 var import_styled_system7 = require("@chakra-ui/styled-system");
-var import_react91 = require("@emotion/react");
-var rotate = (0, import_react91.keyframes)({
+var import_react92 = require("@emotion/react");
+var rotate = (0, import_react92.keyframes)({
   "0%": {
     transform: "rotate(0deg)"
   },
@@ -6115,8 +6184,8 @@ var modal_default = modalTheme;
 
 // src/config/theme/components/popover.ts
 var import_anatomy7 = require("@chakra-ui/anatomy");
-var import_react92 = require("@chakra-ui/react");
-var { definePartsStyle: definePartsStyle7, defineMultiStyleConfig: defineMultiStyleConfig7 } = (0, import_react92.createMultiStyleConfigHelpers)(import_anatomy7.popoverAnatomy.keys);
+var import_react93 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle7, defineMultiStyleConfig: defineMultiStyleConfig7 } = (0, import_react93.createMultiStyleConfigHelpers)(import_anatomy7.popoverAnatomy.keys);
 var baseStyle8 = definePartsStyle7({
   content: {
     bg: "white"
@@ -6127,8 +6196,8 @@ var popover_default = popoverTheme;
 
 // src/config/theme/components/radio.ts
 var import_anatomy8 = require("@chakra-ui/anatomy");
-var import_react93 = require("@chakra-ui/react");
-var { definePartsStyle: definePartsStyle8, defineMultiStyleConfig: defineMultiStyleConfig8 } = (0, import_react93.createMultiStyleConfigHelpers)(import_anatomy8.radioAnatomy.keys);
+var import_react94 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle8, defineMultiStyleConfig: defineMultiStyleConfig8 } = (0, import_react94.createMultiStyleConfigHelpers)(import_anatomy8.radioAnatomy.keys);
 var baseStyle9 = definePartsStyle8({
   control: {
     border: "1px solid",
@@ -6563,7 +6632,7 @@ var tabsTheme = defineMultiStyleConfig11({
 var tabs_default = tabsTheme;
 
 // src/config/theme/components/textarea.ts
-var import_react94 = require("@chakra-ui/react");
+var import_react95 = require("@chakra-ui/react");
 var getProps = (props) => {
   const { isError, isSuccess, isDisabled } = props;
   let borderColor = "neutral.400";
@@ -6583,7 +6652,7 @@ var getProps = (props) => {
     borderColor
   };
 };
-var outline3 = (0, import_react94.defineStyle)((props) => {
+var outline3 = (0, import_react95.defineStyle)((props) => {
   const { focusBorderColor, borderColor } = getProps(props);
   return {
     background: "white.high",
@@ -6627,7 +6696,7 @@ var outline3 = (0, import_react94.defineStyle)((props) => {
     }
   };
 });
-var Textarea = (0, import_react94.defineStyleConfig)({
+var Textarea = (0, import_react95.defineStyleConfig)({
   variants: { outline: outline3 },
   defaultProps: {
     variant: "outline"
@@ -6636,15 +6705,15 @@ var Textarea = (0, import_react94.defineStyleConfig)({
 var textarea_default2 = Textarea;
 
 // src/config/theme/components/tooltip.ts
-var import_react95 = require("@chakra-ui/react");
-var $arrowBg = (0, import_react95.cssVar)("popper-arrow-bg");
+var import_react96 = require("@chakra-ui/react");
+var $arrowBg = (0, import_react96.cssVar)("popper-arrow-bg");
 var baseStyle12 = {
   bg: "neutral.700",
   textStyle: "text.sm",
   fontSize: "text.sm",
   [$arrowBg.variable]: "var(--chakra-colors-neutral-700)"
 };
-var Tooltip2 = (0, import_react95.defineStyleConfig)({ baseStyle: baseStyle12 });
+var Tooltip2 = (0, import_react96.defineStyleConfig)({ baseStyle: baseStyle12 });
 var tooltip_default = Tooltip2;
 
 // src/config/theme/themeConfiguration.ts
@@ -6654,7 +6723,7 @@ var config = {
   useSystemColorMode: false
 };
 var getTheme = (foundations) => {
-  return (0, import_react96.extendTheme)({
+  return (0, import_react97.extendTheme)({
     ...foundations,
     components: {
       ...components_exports
@@ -6671,7 +6740,7 @@ var getTheme = (foundations) => {
     config
   });
 };
-var theme4 = (0, import_react96.extendTheme)({
+var theme4 = (0, import_react97.extendTheme)({
   components: {
     ...components_exports
   },
@@ -6691,23 +6760,23 @@ var theme4 = (0, import_react96.extendTheme)({
 
 // src/hooks/useFetcher.ts
 var import_axios2 = __toESM(require("axios"));
-var import_react99 = require("react");
+var import_react100 = require("react");
 
 // src/provider/components/provider.tsx
 var import_axios = __toESM(require("axios"));
-var import_react97 = require("react");
+var import_react98 = require("react");
 var import_react_toastify3 = require("react-toastify");
 var import_jsx_runtime66 = require("react/jsx-runtime");
-var ProviderContext = (0, import_react97.createContext)({
+var ProviderContext = (0, import_react98.createContext)({
   instance: void 0
 });
 var useInternalUI = () => {
-  const { instance } = (0, import_react97.useContext)(ProviderContext);
+  const { instance } = (0, import_react98.useContext)(ProviderContext);
   return { instance };
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
-  const instanceRef = (0, import_react97.useRef)(import_axios.default.create(config2));
-  (0, import_react97.useEffect)(() => {
+  const instanceRef = (0, import_react98.useRef)(import_axios.default.create(config2));
+  (0, import_react98.useEffect)(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
     });
@@ -6715,7 +6784,7 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
       instanceRef.current.interceptors.response.use(interceptor);
     });
   }, [requestInterceptors, responseInterceptors]);
-  const provider = (0, import_react97.useMemo)(() => ({ instance: instanceRef.current }), []);
+  const provider = (0, import_react98.useMemo)(() => ({ instance: instanceRef.current }), []);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(ProviderContext.Provider, { value: provider, children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_toastify3.ToastContainer, {}),
     children
@@ -6725,12 +6794,12 @@ Provider.displayName = "Provider";
 var provider_default = Provider;
 
 // src/provider/index.ts
-var import_react98 = require("@chakra-ui/react");
+var import_react99 = require("@chakra-ui/react");
 
 // src/hooks/useFetcher.ts
 function useFetcher() {
   const { instance } = useInternalUI();
-  const axiosInstance = (0, import_react99.useMemo)(() => instance || import_axios2.default, [instance]);
+  const axiosInstance = (0, import_react100.useMemo)(() => instance || import_axios2.default, [instance]);
   const fetcher = async ({ url, data, method, headers, ...config2 }) => {
     const response = await axiosInstance.request({
       data,
@@ -6750,10 +6819,10 @@ function useFetcher() {
 }
 
 // src/hooks/index.ts
-var import_react100 = require("@chakra-ui/react");
+var import_react101 = require("@chakra-ui/react");
 
 // src/index.ts
-var import_react101 = require("@chakra-ui/react");
+var import_react102 = require("@chakra-ui/react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -6811,6 +6880,7 @@ var import_react101 = require("@chakra-ui/react");
   CheckboxIconProps,
   CheckboxState,
   Chips,
+  ClearIndicator,
   CloseButton,
   CloseButtonProps,
   Code,
@@ -6838,6 +6908,7 @@ var import_react101 = require("@chakra-ui/react");
   DrawerHeader,
   DrawerOverlay,
   DrawerProps,
+  DropdownIndicator,
   EmptyState,
   Fade,
   FadeProps,
@@ -6911,6 +6982,8 @@ var import_react101 = require("@chakra-ui/react");
   ModalOverlayProps,
   ModalProps,
   MultiDatePickerMonth,
+  MultiValue,
+  MultiValueRemove,
   NavItem,
   Navbar,
   NavigationBar,
@@ -7064,7 +7137,10 @@ var import_react101 = require("@chakra-ui/react");
   forwardRef,
   getSelectAllCheckboxState,
   getTheme,
+  isCellDisabled,
+  selectStyles,
   theme,
+  themeSelect,
   useAccordion,
   useAccordionContext,
   useAccordionItem,