@ctlyst.id/internal-ui 2.1.19 → 2.2.0

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_react84.Avatar,
+  AvatarBadge: () => import_react84.AvatarBadge,
+  AvatarBadgeProps: () => import_react84.AvatarBadgeProps,
+  AvatarGroup: () => import_react84.AvatarGroup,
+  AvatarGroupProps: () => import_react84.AvatarGroupProps,
+  AvatarProps: () => import_react84.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_react91.ChakraProvider,
-  ChakraProviderProps: () => import_react91.ChakraProviderProps,
-  ChakraTable: () => import_react77.Table,
+  ChakraProvider: () => import_react93.ChakraProvider,
+  ChakraProviderProps: () => import_react93.ChakraProviderProps,
+  ChakraTable: () => import_react78.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_react91.ColorMode,
-  ColorModeScript: () => import_react91.ColorModeScript,
-  ColorModeScriptProps: () => import_react91.ColorModeScriptProps,
+  Code: () => import_react81.Code,
+  CodeProps: () => import_react81.CodeProps,
+  Collapse: () => import_react84.Collapse,
+  CollapseProps: () => import_react84.CollapseProps,
+  ColorMode: () => import_react93.ColorMode,
+  ColorModeScript: () => import_react93.ColorModeScript,
+  ColorModeScriptProps: () => import_react93.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_react84.Fade,
+  FadeProps: () => import_react84.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_react81.Heading,
+  HeadingProps: () => import_react81.HeadingProps,
+  Hide: () => import_react84.Hide,
+  HideProps: () => import_react84.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_react84.Img,
+  ImgProps: () => import_react84.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_react81.Link,
+  LinkProps: () => import_react81.LinkProps,
   List: () => import_react48.List,
   ListIcon: () => import_react48.ListIcon,
   ListItem: () => import_react48.ListItem,
@@ -213,101 +214,103 @@ __export(src_exports, {
   Rating: () => rating_default,
   RequiredIndicator: () => import_react26.RequiredIndicator,
   RequiredIndicatorProps: () => import_react26.RequiredIndicatorProps,
-  ScaleFade: () => import_react83.ScaleFade,
-  ScaleFadeProps: () => import_react83.ScaleFadeProps,
+  ScaleFade: () => import_react84.ScaleFade,
+  ScaleFadeProps: () => import_react84.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_react84.Show,
+  ShowProps: () => import_react84.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_react84.Slide,
+  SlideFade: () => import_react84.SlideFade,
+  SlideFadeProps: () => import_react84.SlideFadeProps,
+  SlideProps: () => import_react84.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_react84.Step,
+  StepDescription: () => import_react84.StepDescription,
+  StepIcon: () => import_react84.StepIcon,
+  StepIndicator: () => import_react84.StepIndicator,
+  StepNumber: () => import_react84.StepNumber,
+  StepSeparator: () => import_react84.StepSeparator,
+  StepStatus: () => import_react84.StepStatus,
+  StepTitle: () => import_react84.StepTitle,
+  Stepper: () => import_react84.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_react80.TabIndicator,
+  TabIndicatorProps: () => import_react80.TabIndicatorProps,
+  TabList: () => import_react80.TabList,
+  TabListProps: () => import_react80.TabListProps,
+  TabPanel: () => import_react80.TabPanel,
+  TabPanelProps: () => import_react80.TabPanelProps,
+  TabPanels: () => import_react80.TabPanels,
+  TabPanelsProps: () => import_react80.TabPanelsProps,
+  TabProps: () => import_react80.TabProps,
+  TableBodyProps: () => import_react78.TableBodyProps,
+  TableCellProps: () => import_react78.TableCellProps,
+  TableColumnHeaderProps: () => import_react78.TableColumnHeaderProps,
+  TableHeadProps: () => import_react78.TableHeadProps,
+  TableProps: () => import_react78.TableProps,
+  TableRowProps: () => import_react78.TableRowProps,
+  Tabs: () => import_react80.Tabs,
+  TabsDescendantsProvider: () => import_react80.TabsDescendantsProvider,
+  TabsProps: () => import_react80.TabsProps,
+  TabsProvider: () => import_react80.TabsProvider,
+  Tbody: () => import_react78.Tbody,
+  Td: () => import_react78.Td,
+  Text: () => import_react81.Text,
+  TextProps: () => import_react81.TextProps,
   TextareaField: () => textarea_default,
-  Th: () => import_react77.Th,
-  Thead: () => import_react77.Thead,
+  Th: () => import_react78.Th,
+  Thead: () => import_react78.Thead,
   ThemeTypings: () => import_styled_system13.ThemeTypings,
-  Tooltip: () => import_react81.Tooltip,
-  TooltipProps: () => import_react81.TooltipProps,
-  Tr: () => import_react77.Tr,
+  Tooltip: () => import_react82.Tooltip,
+  TooltipProps: () => import_react82.TooltipProps,
+  Tr: () => import_react78.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_react84.UseBreakpointOptions,
   UseCheckboxGroupProps: () => import_react16.UseCheckboxGroupProps,
   UseCheckboxGroupReturn: () => import_react16.UseCheckboxGroupReturn,
   UseCheckboxProps: () => import_react16.UseCheckboxProps,
   UseCheckboxReturn: () => import_react16.UseCheckboxReturn,
-  UseDisclosureProps: () => import_react93.UseDisclosureProps,
-  UseImageProps: () => import_react83.UseImageProps,
-  UseImageReturn: () => import_react83.UseImageReturn,
-  UseMediaQueryOptions: () => import_react83.UseMediaQueryOptions,
+  UseDisclosureProps: () => import_react95.UseDisclosureProps,
+  UseImageProps: () => import_react84.UseImageProps,
+  UseImageReturn: () => import_react84.UseImageReturn,
+  UseMediaQueryOptions: () => import_react84.UseMediaQueryOptions,
   UseModalProps: () => import_react58.UseModalProps,
   UseModalReturn: () => import_react58.UseModalReturn,
-  UseQueryProps: () => import_react83.UseQueryProps,
+  UseQueryProps: () => import_react84.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,
+  UseTabListProps: () => import_react80.UseTabListProps,
+  UseTabListReturn: () => import_react80.UseTabListReturn,
+  UseTabOptions: () => import_react80.UseTabOptions,
+  UseTabPanelsProps: () => import_react80.UseTabPanelsProps,
+  UseTabProps: () => import_react80.UseTabProps,
+  UseTabsProps: () => import_react80.UseTabsProps,
+  UseTabsReturn: () => import_react80.UseTabsReturn,
   VStack: () => import_react47.VStack,
-  VisuallyHidden: () => import_react83.VisuallyHidden,
-  VisuallyHiddenInput: () => import_react83.VisuallyHiddenInput,
+  VisuallyHidden: () => import_react84.VisuallyHidden,
+  VisuallyHiddenInput: () => import_react84.VisuallyHiddenInput,
   Wrap: () => import_react47.Wrap,
   WrapItem: () => import_react47.WrapItem,
   WrapItemProps: () => import_react47.WrapItemProps,
   WrapProps: () => import_react47.WrapProps,
-  extendTheme: () => import_react94.extendTheme,
-  forwardRef: () => import_react94.forwardRef,
+  extendTheme: () => import_react96.extendTheme,
+  forwardRef: () => import_react96.forwardRef,
+  getSelectAllCheckboxState: () => getSelectAllCheckboxState,
   getTheme: () => getTheme,
   theme: () => theme5,
   useAccordion: () => import_react3.useAccordion,
@@ -316,47 +319,47 @@ __export(src_exports, {
   useAccordionItemState: () => import_react3.useAccordionItemState,
   useAccordionStyles: () => import_react3.useAccordionStyles,
   useAlertStyles: () => useAlertStyles,
-  useBoolean: () => import_react93.useBoolean,
-  useBreakpoint: () => import_react83.useBreakpoint,
+  useBoolean: () => import_react95.useBoolean,
+  useBreakpoint: () => import_react84.useBreakpoint,
   useCheckbox: () => import_react16.useCheckbox,
   useCheckboxGroup: () => import_react16.useCheckboxGroup,
-  useClipboard: () => import_react93.useClipboard,
-  useColorMode: () => import_react93.useColorMode,
-  useColorModePreference: () => import_react83.useColorModePreference,
-  useColorModeValue: () => import_react93.useColorModeValue,
-  useConst: () => import_react93.useConst,
-  useControllableProp: () => import_react93.useControllableProp,
-  useControllableState: () => import_react93.useControllableState,
+  useClipboard: () => import_react95.useClipboard,
+  useColorMode: () => import_react95.useColorMode,
+  useColorModePreference: () => import_react84.useColorModePreference,
+  useColorModeValue: () => import_react95.useColorModeValue,
+  useConst: () => import_react95.useConst,
+  useControllableProp: () => import_react95.useControllableProp,
+  useControllableState: () => import_react95.useControllableState,
   useDataTable: () => useDataTable,
-  useDimensions: () => import_react93.useDimensions,
-  useDisclosure: () => import_react93.useDisclosure,
+  useDimensions: () => import_react95.useDimensions,
+  useDisclosure: () => import_react95.useDisclosure,
   useDrawerContext: () => import_react58.useDrawerContext,
   useFetcher: () => useFetcher,
-  useImage: () => import_react83.useImage,
+  useImage: () => import_react84.useImage,
   useInternalUI: () => useInternalUI,
-  useMergeRefs: () => import_react93.useMergeRefs,
+  useMergeRefs: () => import_react95.useMergeRefs,
   useModal: () => import_react58.useModal,
   useModalContext: () => import_react58.useModalContext,
   useModalStyles: () => import_react58.useModalStyles,
-  useOutsideClick: () => import_react93.useOutsideClick,
-  useQuery: () => import_react83.useQuery,
+  useOutsideClick: () => import_react95.useOutsideClick,
+  useQuery: () => import_react84.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_react93.useTheme,
-  useToken: () => import_react93.useToken
+  useSteps: () => import_react84.useSteps,
+  useTab: () => import_react80.useTab,
+  useTabIndicator: () => import_react80.useTabIndicator,
+  useTabList: () => import_react80.useTabList,
+  useTabPanel: () => import_react80.useTabPanel,
+  useTabPanels: () => import_react80.useTabPanels,
+  useTabs: () => import_react80.useTabs,
+  useTabsContext: () => import_react80.useTabsContext,
+  useTabsDescendant: () => import_react80.useTabsDescendant,
+  useTabsDescendants: () => import_react80.useTabsDescendants,
+  useTabsDescendantsContext: () => import_react80.useTabsDescendantsContext,
+  useTabsStyles: () => import_react80.useTabsStyles,
+  useTheme: () => import_react95.useTheme,
+  useToken: () => import_react95.useToken
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -1202,13 +1205,12 @@ var getCommonPinningStyles = (column) => {
       "&:after": {
         content: "''",
         position: "absolute",
-        width: "20%",
-        height: "100%",
+        width: "30px",
         right: "0px",
+        bottom: "-1px",
         top: 0,
-        zIndex: -1,
-        boxShadow: "-10px 0px 20px 10px #00000010",
-        clipPath: "inset(0px -38px 0px 0px)"
+        transform: "translateX(100%)",
+        boxShadow: "inset 14px 0px 20px -10px #00000010"
       }
     } : {},
     ...isFirstRightPinnedColumn ? {
@@ -1216,13 +1218,12 @@ var getCommonPinningStyles = (column) => {
       "&:after": {
         content: "''",
         position: "absolute",
-        width: "20%",
-        height: "100%",
+        width: "30px",
         left: "0%",
         top: 0,
-        zIndex: -1,
-        boxShadow: "10px 0px 20px 10px #00000010",
-        clipPath: "inset(0px 0px 0px -38px )"
+        bottom: "-1px",
+        transform: "translateX(-100%)",
+        boxShadow: "inset -14px 0px 20px -10px #00000010"
       }
     } : {}
   };
@@ -3645,13 +3646,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)"
         }
@@ -3669,23 +3670,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) => {
@@ -3777,17 +3802,154 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
   );
 }
 
-// src/components/switch/components/switch.tsx
+// src/components/select/components/select-with-checkbox.tsx
 var import_react75 = require("@chakra-ui/react");
+var import_system11 = require("@chakra-ui/system");
+var import_react_select2 = __toESM(require("react-select"));
+var import_jsx_runtime56 = 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_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      import_react_select2.components.Option,
+      {
+        isMulti: true,
+        data,
+        isDisabled,
+        isFocused,
+        isSelected,
+        getStyles,
+        innerProps: props,
+        ...rest,
+        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+          import_react75.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_runtime56.jsx)(
+                import_react75.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_runtime56.jsx)(import_react75.Checkbox, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react75.Text, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+            ]
+          }
+        )
+      }
+    ),
+    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("hr", {}) : null
+  ] });
+};
+var SelectWithCheckboxBase = ({
+  isError = false,
+  components,
+  options,
+  ...rest
+}) => {
+  const { colorMode } = (0, import_system11.useColorMode)();
+  return /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.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_runtime56.jsx)(InputOption, { ...optionProps, checkedState });
+        }
+      },
+      ...rest
+    }
+  );
+};
+var select_with_checkbox_default = SelectCheckbox;
+
+// src/components/switch/components/switch.tsx
+var import_react76 = require("@chakra-ui/react");
 var import_shared_utils9 = 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_react77 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var Switch = (0, import_react76.forwardRef)(function Switch2(props, ref) {
+  const styles = (0, import_react76.useMultiStyleConfig)("Switch", props);
+  const { spacing: spacing2 = "0.5rem", children, ...ownProps } = (0, import_react76.omitThemingProps)(props);
+  const { state, getInputProps, getCheckboxProps, getRootProps, getLabelProps } = (0, import_react76.useCheckbox)(ownProps);
+  const containerStyles = (0, import_react77.useMemo)(
     () => ({
       display: "inline-block",
       position: "relative",
@@ -3797,7 +3959,7 @@ var Switch = (0, import_react75.forwardRef)(function Switch2(props, ref) {
     }),
     [styles.container]
   );
-  const trackStyles = (0, import_react76.useMemo)(
+  const trackStyles = (0, import_react77.useMemo)(
     () => ({
       display: "inline-flex",
       flexShrink: 0,
@@ -3809,7 +3971,7 @@ var Switch = (0, import_react75.forwardRef)(function Switch2(props, ref) {
     }),
     [styles.track]
   );
-  const labelStyles = (0, import_react76.useMemo)(
+  const labelStyles = (0, import_react77.useMemo)(
     () => ({
       userSelect: "none",
       marginStart: spacing2,
@@ -3825,8 +3987,8 @@ 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_runtime57.jsxs)(
+    import_react76.chakra.label,
     {
       ...getRootProps(),
       display: "flex",
@@ -3834,14 +3996,14 @@ var Switch = (0, import_react75.forwardRef)(function Switch2(props, ref) {
       className: (0, import_shared_utils9.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_runtime57.jsx)("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react76.chakra.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react76.Flex, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_internal_icon7.Check, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)(
+            import_react76.chakra.span,
             {
               __css: styles.thumb,
               className: "chakra-switch__thumb",
@@ -3850,8 +4012,8 @@ var Switch = (0, import_react75.forwardRef)(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-          import_react75.chakra.span,
+        children && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          import_react76.chakra.span,
           {
             className: "chakra-switch__label",
             color: state.isDisabled ? "black.low" : "black.high",
@@ -3870,18 +4032,18 @@ Switch.defaultProps = {
 var switch_default = Switch;
 
 // src/components/table/index.tsx
-var import_react77 = require("@chakra-ui/react");
+var import_react78 = 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_react79 = require("@chakra-ui/react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var Tab = (0, import_react79.forwardRef)((props, ref) => {
   var _a, _b;
-  const tabProps = (0, import_react78.useTab)({ ...props, ref });
+  const tabProps = (0, import_react79.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_react79.useMultiStyleConfig)("Tabs", tabProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    import_react79.Button,
     {
       "data-test-id": props["data-test-id"],
       p: 4,
@@ -3906,7 +4068,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_runtime58.jsxs)(import_react79.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 })
@@ -3917,16 +4079,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_react80 = require("@chakra-ui/react");
 
 // src/components/text/index.ts
-var import_react80 = require("@chakra-ui/react");
+var import_react81 = require("@chakra-ui/react");
 
 // src/components/tooltip/index.ts
-var import_react81 = require("@chakra-ui/react");
+var import_react82 = require("@chakra-ui/react");
 
 // src/components/uploader/components/uploader.tsx
-var import_react82 = require("@chakra-ui/react");
+var import_react83 = require("@chakra-ui/react");
 var React15 = __toESM(require("react"));
 var import_react_dropzone = require("react-dropzone");
 
@@ -3940,7 +4102,7 @@ var messages = {
 };
 
 // src/components/uploader/components/uploader.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -3988,9 +4150,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_runtime59.jsxs)(import_react83.Stack, { direction: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      import_react83.Flex,
       {
         minH: 200,
         border: "1px dashed",
@@ -4001,11 +4163,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_runtime59.jsx)("input", { ...getInputProps() }),
+          isDragActive ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react83.Text, { children: messages.dragActive }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react83.Flex, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
+            !multiple && isSelected && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react83.Heading, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
+            !isSelected && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react83.Heading, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
+            isSelected ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react83.Text, { children: messages.dragReplace }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react83.Text, { children: messages.dragInActive })
           ] })
         ]
       }
@@ -4022,10 +4184,10 @@ Uploader.defaultProps = {
 var uploader_default = Uploader;
 
 // src/components/index.ts
-var import_react83 = require("@chakra-ui/react");
+var import_react84 = require("@chakra-ui/react");
 
 // src/config/theme/themeConfiguration.ts
-var import_react89 = require("@chakra-ui/react");
+var import_react91 = require("@chakra-ui/react");
 
 // src/config/theme/components/index.ts
 var components_exports = {};
@@ -4041,6 +4203,7 @@ __export(components_exports, {
   Input: () => input_default,
   LoaderStyle: () => loader_default2,
   Modal: () => modal_default,
+  Popover: () => popover_default,
   Radio: () => radio_default,
   Switch: () => switch_default2,
   Table: () => table_default,
@@ -4567,8 +4730,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_react85 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle3, defineMultiStyleConfig: defineMultiStyleConfig3 } = (0, import_react85.createMultiStyleConfigHelpers)(import_anatomy3.checkboxAnatomy.keys);
 var baseStyle3 = definePartsStyle3({
   control: {
     borderRadius: "sm",
@@ -4658,14 +4821,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");
@@ -4852,8 +5015,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_react86 = require("@emotion/react");
+var rotate = (0, import_react86.keyframes)({
   "0%": {
     transform: "rotate(0deg)"
   },
@@ -4981,11 +5144,23 @@ var Modal3 = (0, import_styled_system9.defineStyleConfig)({
 });
 var modal_default = Modal3;
 
-// src/config/theme/components/radio.ts
+// 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.radioAnatomy.keys);
+var import_react87 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle5, defineMultiStyleConfig: defineMultiStyleConfig5 } = (0, import_react87.createMultiStyleConfigHelpers)(import_anatomy5.popoverAnatomy.keys);
 var baseStyle6 = definePartsStyle5({
+  content: {
+    bg: "white"
+  }
+});
+var popoverTheme = defineMultiStyleConfig5({ baseStyle: baseStyle6 });
+var popover_default = popoverTheme;
+
+// src/config/theme/components/radio.ts
+var import_anatomy6 = require("@chakra-ui/anatomy");
+var import_react88 = require("@chakra-ui/react");
+var { definePartsStyle: definePartsStyle6, defineMultiStyleConfig: defineMultiStyleConfig6 } = (0, import_react88.createMultiStyleConfigHelpers)(import_anatomy6.radioAnatomy.keys);
+var baseStyle7 = definePartsStyle6({
   control: {
     border: "1px solid",
     width: "16px",
@@ -5001,7 +5176,7 @@ var baseStyle6 = definePartsStyle5({
     }
   }
 });
-var errors2 = definePartsStyle5({
+var errors2 = definePartsStyle6({
   control: {
     borderColor: "danger.500",
     _checked: {
@@ -5036,7 +5211,7 @@ var errors2 = definePartsStyle5({
     fontSize: "12px"
   }
 });
-var unstyled3 = definePartsStyle5({
+var unstyled3 = definePartsStyle6({
   control: {
     borderColor: "neutral.600",
     _checked: {
@@ -5075,8 +5250,8 @@ var variants4 = {
   errors: errors2,
   unstyled: unstyled3
 };
-var Radio2 = defineMultiStyleConfig5({
-  baseStyle: baseStyle6,
+var Radio2 = defineMultiStyleConfig6({
+  baseStyle: baseStyle7,
   variants: variants4,
   defaultProps: {
     variant: "unstyled"
@@ -5085,10 +5260,10 @@ var Radio2 = defineMultiStyleConfig5({
 var radio_default = Radio2;
 
 // src/config/theme/components/switch.ts
-var import_anatomy6 = require("@chakra-ui/anatomy");
+var import_anatomy7 = require("@chakra-ui/anatomy");
 var import_styled_system10 = require("@chakra-ui/styled-system");
 var import_theme_tools2 = require("@chakra-ui/theme-tools");
-var { defineMultiStyleConfig: defineMultiStyleConfig6, definePartsStyle: definePartsStyle6 } = (0, import_styled_system10.createMultiStyleConfigHelpers)(import_anatomy6.switchAnatomy.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig7, definePartsStyle: definePartsStyle7 } = (0, import_styled_system10.createMultiStyleConfigHelpers)(import_anatomy7.switchAnatomy.keys);
 var $width = (0, import_theme_tools2.cssVar)("switch-track-width");
 var $height = (0, import_theme_tools2.cssVar)("switch-track-height");
 var $diff = (0, import_theme_tools2.cssVar)("switch-track-diff");
@@ -5105,7 +5280,7 @@ var baseStyleThumb = (0, import_styled_system10.defineStyle)({
     transform: `translateX(${$translateX.reference})`
   }
 });
-var baseStyle7 = definePartsStyle6(() => ({
+var baseStyle8 = definePartsStyle7(() => ({
   container: {
     [$diff.variable]: diffValue,
     [$translateX.variable]: $diff.reference,
@@ -5130,7 +5305,7 @@ var baseStyle7 = definePartsStyle6(() => ({
   thumb: baseStyleThumb
 }));
 var sizes3 = {
-  sm: definePartsStyle6({
+  sm: definePartsStyle7({
     container: {
       [$width.variable]: "1.875rem",
       [$height.variable]: "0.75rem"
@@ -5140,7 +5315,7 @@ var sizes3 = {
       [$height.variable]: "0.75rem"
     }
   }),
-  md: definePartsStyle6({
+  md: definePartsStyle7({
     container: {
       [$width.variable]: "2.375rem",
       [$height.variable]: "1rem"
@@ -5150,7 +5325,7 @@ var sizes3 = {
       [$height.variable]: "1rem"
     }
   }),
-  lg: definePartsStyle6({
+  lg: definePartsStyle7({
     container: {
       [$width.variable]: "3.25rem",
       [$height.variable]: "1.375rem"
@@ -5161,8 +5336,8 @@ var sizes3 = {
     }
   })
 };
-var Switch3 = defineMultiStyleConfig6({
-  baseStyle: baseStyle7,
+var Switch3 = defineMultiStyleConfig7({
+  baseStyle: baseStyle8,
   sizes: sizes3,
   defaultProps: {
     size: "md"
@@ -5171,14 +5346,15 @@ var Switch3 = defineMultiStyleConfig6({
 var switch_default2 = Switch3;
 
 // src/config/theme/components/table.ts
-var import_anatomy7 = require("@chakra-ui/anatomy");
+var import_anatomy8 = require("@chakra-ui/anatomy");
 var import_styled_system11 = require("@chakra-ui/styled-system");
 var import_theme_tools3 = require("@chakra-ui/theme-tools");
-var { defineMultiStyleConfig: defineMultiStyleConfig7, definePartsStyle: definePartsStyle7 } = (0, import_styled_system11.createMultiStyleConfigHelpers)(import_anatomy7.tableAnatomy.keys);
-var baseStyle8 = definePartsStyle7({
+var { defineMultiStyleConfig: defineMultiStyleConfig8, definePartsStyle: definePartsStyle8 } = (0, import_styled_system11.createMultiStyleConfigHelpers)(import_anatomy8.tableAnatomy.keys);
+var baseStyle9 = definePartsStyle8({
   table: {
     fontVariantNumeric: "lining-nums tabular-nums",
-    borderCollapse: "collapse",
+    borderCollapse: "separate",
+    borderSpacing: 0,
     width: "full",
     tableLayout: "fixed"
   },
@@ -5204,15 +5380,25 @@ var baseStyle8 = definePartsStyle7({
     tr: {
       cursor: "pointer",
       _hover: {
-        backgroundColor: "neutral.200"
+        td: {
+          backgroundColor: "neutral.200",
+          "&>div": {
+            backgroundColor: "neutral.200"
+          }
+        }
       },
       '&[data-active="true"]': {
-        backgroundColor: "neutral.100"
+        td: {
+          backgroundColor: "neutral.100",
+          "&>div": {
+            backgroundColor: "neutral.200"
+          }
+        }
       }
     }
   },
   td: {
-    backgroundColor: "neutral.50",
+    // backgroundColor: 'neutral.50',
     textAlign: "start",
     height: "56px",
     "&:first-of-type": {
@@ -5237,7 +5423,7 @@ var numericStyles = (0, import_styled_system11.defineStyle)({
     textAlign: "end"
   }
 });
-var variantSimple = definePartsStyle7((props) => {
+var variantSimple = definePartsStyle8((props) => {
   const { colorScheme: c } = props;
   return {
     th: {
@@ -5263,7 +5449,7 @@ var variantSimple = definePartsStyle7((props) => {
     }
   };
 });
-var variantStripe = definePartsStyle7((props) => {
+var variantStripe = definePartsStyle8((props) => {
   const { colorScheme: c } = props;
   return {
     th: {
@@ -5308,7 +5494,7 @@ var variants5 = {
   unstyled: (0, import_styled_system11.defineStyle)({})
 };
 var sizes4 = {
-  sm: definePartsStyle7({
+  sm: definePartsStyle8({
     th: {
       px: "2",
       py: "4",
@@ -5327,7 +5513,7 @@ var sizes4 = {
       fontSize: "xs"
     }
   }),
-  md: definePartsStyle7({
+  md: definePartsStyle8({
     th: {
       px: "2",
       py: "4",
@@ -5345,7 +5531,7 @@ var sizes4 = {
       fontSize: "sm"
     }
   }),
-  lg: definePartsStyle7({
+  lg: definePartsStyle8({
     th: {
       px: "2",
       py: "4",
@@ -5364,8 +5550,8 @@ var sizes4 = {
     }
   })
 };
-var tableTheme = defineMultiStyleConfig7({
-  baseStyle: baseStyle8,
+var tableTheme = defineMultiStyleConfig8({
+  baseStyle: baseStyle9,
   variants: variants5,
   sizes: sizes4,
   defaultProps: {
@@ -5377,10 +5563,10 @@ var tableTheme = defineMultiStyleConfig7({
 var table_default = tableTheme;
 
 // src/config/theme/components/tabs.ts
-var import_anatomy8 = require("@chakra-ui/anatomy");
+var import_anatomy9 = require("@chakra-ui/anatomy");
 var import_styled_system12 = require("@chakra-ui/styled-system");
-var { defineMultiStyleConfig: defineMultiStyleConfig8, definePartsStyle: definePartsStyle8 } = (0, import_styled_system12.createMultiStyleConfigHelpers)(import_anatomy8.tabsAnatomy.keys);
-var variantLine = definePartsStyle8((props) => {
+var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = (0, import_styled_system12.createMultiStyleConfigHelpers)(import_anatomy9.tabsAnatomy.keys);
+var variantLine = definePartsStyle9((props) => {
   const { orientation } = props;
   const isVertical = orientation === "vertical";
   const borderProp = isVertical ? "borderStart" : "borderBottom";
@@ -5397,12 +5583,12 @@ var variantLine = definePartsStyle8((props) => {
     }
   };
 });
-var variantUnstyled = definePartsStyle8({});
+var variantUnstyled = definePartsStyle9({});
 var variants6 = {
   line: variantLine,
   unstyled: variantUnstyled
 };
-var tabsTheme = defineMultiStyleConfig8({
+var tabsTheme = defineMultiStyleConfig9({
   variants: variants6,
   defaultProps: {
     size: "md",
@@ -5412,7 +5598,7 @@ var tabsTheme = defineMultiStyleConfig8({
 var tabs_default = tabsTheme;
 
 // src/config/theme/components/textarea.ts
-var import_react87 = require("@chakra-ui/react");
+var import_react89 = require("@chakra-ui/react");
 var getProps = (props) => {
   const { isError, isSuccess, isDisabled } = props;
   let borderColor = "neutral.400";
@@ -5432,7 +5618,7 @@ var getProps = (props) => {
     borderColor
   };
 };
-var outline2 = (0, import_react87.defineStyle)((props) => {
+var outline2 = (0, import_react89.defineStyle)((props) => {
   const { focusBorderColor, borderColor } = getProps(props);
   return {
     background: "white.high",
@@ -5476,7 +5662,7 @@ var outline2 = (0, import_react87.defineStyle)((props) => {
     }
   };
 });
-var Textarea = (0, import_react87.defineStyleConfig)({
+var Textarea = (0, import_react89.defineStyleConfig)({
   variants: { outline: outline2 },
   defaultProps: {
     variant: "outline"
@@ -5485,14 +5671,14 @@ var Textarea = (0, import_react87.defineStyleConfig)({
 var textarea_default2 = Textarea;
 
 // src/config/theme/components/tooltip.ts
-var import_react88 = require("@chakra-ui/react");
-var $arrowBg = (0, import_react88.cssVar)("popper-arrow-bg");
-var baseStyle9 = {
+var import_react90 = require("@chakra-ui/react");
+var $arrowBg = (0, import_react90.cssVar)("popper-arrow-bg");
+var baseStyle10 = {
   bg: "neutral.700",
   fontSize: "text.sm",
   [$arrowBg.variable]: "var(--chakra-colors-neutral-700)"
 };
-var Tooltip2 = (0, import_react88.defineStyleConfig)({ baseStyle: baseStyle9 });
+var Tooltip2 = (0, import_react90.defineStyleConfig)({ baseStyle: baseStyle10 });
 var tooltip_default = Tooltip2;
 
 // src/config/theme/themeConfiguration.ts
@@ -5502,7 +5688,7 @@ var config = {
   useSystemColorMode: false
 };
 var getTheme = (foundations) => {
-  return (0, import_react89.extendTheme)({
+  return (0, import_react91.extendTheme)({
     ...foundations,
     components: {
       ...components_exports
@@ -5518,7 +5704,7 @@ var getTheme = (foundations) => {
     config
   });
 };
-var theme5 = (0, import_react89.extendTheme)({
+var theme5 = (0, import_react91.extendTheme)({
   components: {
     ...components_exports
   },
@@ -5538,23 +5724,23 @@ var theme5 = (0, import_react89.extendTheme)({
 
 // src/hooks/useFetcher.ts
 var import_axios2 = __toESM(require("axios"));
-var import_react92 = require("react");
+var import_react94 = require("react");
 
 // src/provider/components/provider.tsx
 var import_axios = __toESM(require("axios"));
-var import_react90 = require("react");
+var import_react92 = require("react");
 var import_react_toastify = require("react-toastify");
-var import_jsx_runtime59 = require("react/jsx-runtime");
-var ProviderContext = (0, import_react90.createContext)({
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var ProviderContext = (0, import_react92.createContext)({
   instance: void 0
 });
 var useInternalUI = () => {
-  const { instance } = (0, import_react90.useContext)(ProviderContext);
+  const { instance } = (0, import_react92.useContext)(ProviderContext);
   return { instance };
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
-  const instanceRef = (0, import_react90.useRef)(import_axios.default.create(config2));
-  (0, import_react90.useEffect)(() => {
+  const instanceRef = (0, import_react92.useRef)(import_axios.default.create(config2));
+  (0, import_react92.useEffect)(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
     });
@@ -5562,9 +5748,9 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
       instanceRef.current.interceptors.response.use(interceptor);
     });
   }, [requestInterceptors, responseInterceptors]);
-  const provider = (0, import_react90.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_react92.useMemo)(() => ({ instance: instanceRef.current }), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(ProviderContext.Provider, { value: provider, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_toastify.ToastContainer, {}),
     children
   ] });
 };
@@ -5572,12 +5758,12 @@ Provider.displayName = "Provider";
 var provider_default = Provider;
 
 // src/provider/index.ts
-var import_react91 = require("@chakra-ui/react");
+var import_react93 = require("@chakra-ui/react");
 
 // src/hooks/useFetcher.ts
 function useFetcher() {
   const { instance } = useInternalUI();
-  const axiosInstance = (0, import_react92.useMemo)(() => instance || import_axios2.default, [instance]);
+  const axiosInstance = (0, import_react94.useMemo)(() => instance || import_axios2.default, [instance]);
   const fetcher = async ({ url, data, method, headers, ...config2 }) => {
     const response = await axiosInstance.request({
       data,
@@ -5597,10 +5783,10 @@ function useFetcher() {
 }
 
 // src/hooks/index.ts
-var import_react93 = require("@chakra-ui/react");
+var import_react95 = require("@chakra-ui/react");
 
 // src/index.ts
-var import_react94 = require("@chakra-ui/react");
+var import_react96 = require("@chakra-ui/react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -5644,6 +5830,7 @@ var import_react94 = require("@chakra-ui/react");
   Button,
   ButtonGroup,
   ButtonGroupProps,
+  CHECKBOX_STATE,
   Card,
   Center,
   ChakraProvider,
@@ -5790,6 +5977,7 @@ var import_react94 = require("@chakra-ui/react");
   Select,
   SelectAsync,
   SelectAsyncCreatable,
+  SelectCheckBox,
   SelectCreatable,
   Show,
   ShowProps,
@@ -5880,6 +6068,7 @@ var import_react94 = require("@chakra-ui/react");
   WrapProps,
   extendTheme,
   forwardRef,
+  getSelectAllCheckboxState,
   getTheme,
   theme,
   useAccordion,