@ctlyst.id/internal-ui 2.1.19 → 2.2.0

package/dist/index.mjs

@@ -920,13 +920,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 ? {
@@ -934,13 +933,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"
       }
     } : {}
   };
@@ -3480,13 +3478,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)"
         }
@@ -3504,23 +3502,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) => {
@@ -3612,12 +3634,149 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
   );
 }
 
+// src/components/select/components/select-with-checkbox.tsx
+import { Checkbox as Checkbox3, Flex as Flex8, Text as Text14 } from "@chakra-ui/react";
+import { useColorMode as useColorMode7 } from "@chakra-ui/system";
+import ReactSelect2, { components as ComponentRS } from "react-select";
+import { Fragment as Fragment6, jsx as jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
+var CHECKBOX_STATE = {
+  UNCHECKED: 0,
+  INDETERMINATE: 1,
+  CHECKED: 2
+};
+var getSelectAllCheckboxState = (totalSelected, totalOption) => {
+  if (totalSelected < 0 || totalOption < 0) {
+    throw new Error("value less than 0");
+  }
+  if (totalSelected > totalOption) {
+    throw new Error("totalSelected couldn't be more than totalOption");
+  }
+  if (totalSelected === 0) {
+    return CHECKBOX_STATE.UNCHECKED;
+  }
+  if (totalSelected < totalOption) {
+    return CHECKBOX_STATE.INDETERMINATE;
+  }
+  if (totalSelected === totalOption) {
+    return CHECKBOX_STATE.CHECKED;
+  }
+  return CHECKBOX_STATE.UNCHECKED;
+};
+var InputOption = ({
+  getStyles,
+  isDisabled,
+  isFocused,
+  isSelected,
+  children,
+  innerProps,
+  data,
+  checkedState,
+  isMulti,
+  ...rest
+}) => {
+  const style = {
+    alignItems: "center",
+    color: "inherit",
+    display: "flex "
+  };
+  const props = {
+    ...innerProps,
+    "aria-disabled": isDisabled,
+    onClick: isDisabled ? void 0 : innerProps.onClick,
+    style
+  };
+  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
+    /* @__PURE__ */ jsx55(
+      ComponentRS.Option,
+      {
+        isMulti: true,
+        data,
+        isDisabled,
+        isFocused,
+        isSelected,
+        getStyles,
+        innerProps: props,
+        ...rest,
+        children: /* @__PURE__ */ jsxs23(
+          Flex8,
+          {
+            alignItems: "center",
+            width: "100%",
+            mb: "3px",
+            gap: 2,
+            "data-test-id": "CT_component_select-checkbox_options",
+            cursor: isDisabled ? "not-allowed" : "default",
+            children: [
+              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx55(
+                Checkbox3,
+                {
+                  isChecked: checkedState === CHECKBOX_STATE.CHECKED,
+                  isIndeterminate: checkedState === CHECKBOX_STATE.INDETERMINATE,
+                  isDisabled,
+                  "data-test-id": "CT_component_select-checkbox_select-all-option"
+                }
+              ) : /* @__PURE__ */ jsx55(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
+              /* @__PURE__ */ jsx55(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+            ]
+          }
+        )
+      }
+    ),
+    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx55("hr", {}) : null
+  ] });
+};
+var SelectWithCheckboxBase = ({
+  isError = false,
+  components,
+  options,
+  ...rest
+}) => {
+  const { colorMode } = useColorMode7();
+  return /* @__PURE__ */ jsx55(
+    ReactSelect2,
+    {
+      classNamePrefix: "react-select",
+      options,
+      styles: { ...selectStyles(colorMode, !!isError) },
+      theme: themeSelect,
+      closeMenuOnSelect: false,
+      hideSelectedOptions: false,
+      components: {
+        ...components
+      },
+      ...rest
+    }
+  );
+};
+var SelectCheckbox = (props) => {
+  const { isMulti, options, value, ...rest } = props;
+  const selectValue = value || [];
+  return /* @__PURE__ */ jsx55(
+    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__ */ jsx55(InputOption, { ...optionProps, checkedState });
+        }
+      },
+      ...rest
+    }
+  );
+};
+var select_with_checkbox_default = SelectCheckbox;
+
 // src/components/switch/components/switch.tsx
-import { chakra as chakra6, Flex as Flex8, forwardRef as forwardRef13, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox2, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
+import { chakra as chakra6, Flex as Flex9, forwardRef as forwardRef13, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox2, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
 import { cx as cx9, dataAttr } from "@chakra-ui/shared-utils";
 import { Check, Close as Close4 } from "@ctlyst.id/internal-icon";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
 var Switch = forwardRef13(function Switch2(props, ref) {
   const styles = useMultiStyleConfig2("Switch", props);
   const { spacing: spacing2 = "0.5rem", children, ...ownProps } = omitThemingProps2(props);
@@ -3660,7 +3819,7 @@ var Switch = forwardRef13(function Switch2(props, ref) {
     };
     return iconSize[value];
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     chakra6.label,
     {
       ...getRootProps(),
@@ -3669,13 +3828,13 @@ var Switch = forwardRef13(function Switch2(props, ref) {
       className: cx9("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ jsx55("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
-        /* @__PURE__ */ jsxs23(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
-          /* @__PURE__ */ jsxs23(Flex8, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ jsx55(Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx55(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+        /* @__PURE__ */ jsx56("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ jsxs24(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
+          /* @__PURE__ */ jsxs24(Flex9, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
+            /* @__PURE__ */ jsx56(Check, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ jsx56(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx56(
             chakra6.span,
             {
               __css: styles.thumb,
@@ -3685,7 +3844,7 @@ var Switch = forwardRef13(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx55(
+        children && /* @__PURE__ */ jsx56(
           chakra6.span,
           {
             className: "chakra-switch__label",
@@ -3721,14 +3880,14 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/tabs/components/tab.tsx
-import { Button as Button5, Flex as Flex9, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Button as Button5, Flex as Flex10, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
+import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
 var Tab = forwardRef14((props, ref) => {
   var _a, _b;
   const tabProps = useTab({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Button5,
     {
       "data-test-id": props["data-test-id"],
@@ -3754,7 +3913,7 @@ var Tab = forwardRef14((props, ref) => {
       },
       __css: styles.tab,
       ...tabProps,
-      children: /* @__PURE__ */ jsxs24(Flex9, { alignItems: "center", children: [
+      children: /* @__PURE__ */ jsxs25(Flex10, { alignItems: "center", children: [
         (_a = props.leftAddon) == null ? void 0 : _a.call(props, { isSelected }),
         tabProps.children,
         (_b = props.rightAddon) == null ? void 0 : _b.call(props, { isSelected })
@@ -3800,13 +3959,13 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/text/index.ts
-import { Code, CodeProps, Heading, HeadingProps, Link as Link4, LinkProps, Text as Text14, TextProps } from "@chakra-ui/react";
+import { Code, CodeProps, Heading, HeadingProps, Link as Link4, LinkProps, Text as Text15, TextProps } from "@chakra-ui/react";
 
 // src/components/tooltip/index.ts
 import { Tooltip, TooltipProps } from "@chakra-ui/react";
 
 // src/components/uploader/components/uploader.tsx
-import { Flex as Flex10, Heading as Heading2, Stack as Stack4, Text as Text15 } from "@chakra-ui/react";
+import { Flex as Flex11, Heading as Heading2, Stack as Stack4, Text as Text16 } from "@chakra-ui/react";
 import * as React15 from "react";
 import { useDropzone } from "react-dropzone";
 
@@ -3820,7 +3979,7 @@ var messages = {
 };
 
 // src/components/uploader/components/uploader.tsx
-import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -3868,9 +4027,9 @@ var Uploader = ({
   React15.useEffect(() => {
     setIsSelected(selected != null ? selected : false);
   }, [selected]);
-  return /* @__PURE__ */ jsxs25(Stack4, { direction: "column", children: [
-    /* @__PURE__ */ jsxs25(
-      Flex10,
+  return /* @__PURE__ */ jsxs26(Stack4, { direction: "column", children: [
+    /* @__PURE__ */ jsxs26(
+      Flex11,
       {
         minH: 200,
         border: "1px dashed",
@@ -3881,11 +4040,11 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          /* @__PURE__ */ jsx57("input", { ...getInputProps() }),
-          isDragActive ? /* @__PURE__ */ jsx57(Text15, { children: messages.dragActive }) : /* @__PURE__ */ jsxs25(Flex10, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
-            !multiple && isSelected && /* @__PURE__ */ jsx57(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
-            !isSelected && /* @__PURE__ */ jsx57(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
-            isSelected ? /* @__PURE__ */ jsx57(Text15, { children: messages.dragReplace }) : /* @__PURE__ */ jsx57(Text15, { children: messages.dragInActive })
+          /* @__PURE__ */ jsx58("input", { ...getInputProps() }),
+          isDragActive ? /* @__PURE__ */ jsx58(Text16, { children: messages.dragActive }) : /* @__PURE__ */ jsxs26(Flex11, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
+            !multiple && isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
+            !isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
+            isSelected ? /* @__PURE__ */ jsx58(Text16, { children: messages.dragReplace }) : /* @__PURE__ */ jsx58(Text16, { children: messages.dragInActive })
           ] })
         ]
       }
@@ -3965,6 +4124,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,
@@ -4582,14 +4742,14 @@ var variants2 = {
   errors,
   unstyled
 };
-var Checkbox3 = defineMultiStyleConfig3({
+var Checkbox4 = defineMultiStyleConfig3({
   baseStyle: baseStyle3,
   variants: variants2,
   defaultProps: {
     variant: "unstyled"
   }
 });
-var checkbox_default2 = Checkbox3;
+var checkbox_default2 = Checkbox4;
 
 // src/config/theme/components/chips.ts
 import { defineStyleConfig as defineStyleConfig3 } from "@chakra-ui/styled-system";
@@ -4905,11 +5065,23 @@ var Modal3 = defineStyleConfig6({
 });
 var modal_default = Modal3;
 
-// src/config/theme/components/radio.ts
-import { radioAnatomy } from "@chakra-ui/anatomy";
+// src/config/theme/components/popover.ts
+import { popoverAnatomy as parts4 } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers5 } from "@chakra-ui/react";
-var { definePartsStyle: definePartsStyle5, defineMultiStyleConfig: defineMultiStyleConfig5 } = createMultiStyleConfigHelpers5(radioAnatomy.keys);
+var { definePartsStyle: definePartsStyle5, defineMultiStyleConfig: defineMultiStyleConfig5 } = createMultiStyleConfigHelpers5(parts4.keys);
 var baseStyle6 = definePartsStyle5({
+  content: {
+    bg: "white"
+  }
+});
+var popoverTheme = defineMultiStyleConfig5({ baseStyle: baseStyle6 });
+var popover_default = popoverTheme;
+
+// src/config/theme/components/radio.ts
+import { radioAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6 } from "@chakra-ui/react";
+var { definePartsStyle: definePartsStyle6, defineMultiStyleConfig: defineMultiStyleConfig6 } = createMultiStyleConfigHelpers6(radioAnatomy.keys);
+var baseStyle7 = definePartsStyle6({
   control: {
     border: "1px solid",
     width: "16px",
@@ -4925,7 +5097,7 @@ var baseStyle6 = definePartsStyle5({
     }
   }
 });
-var errors2 = definePartsStyle5({
+var errors2 = definePartsStyle6({
   control: {
     borderColor: "danger.500",
     _checked: {
@@ -4960,7 +5132,7 @@ var errors2 = definePartsStyle5({
     fontSize: "12px"
   }
 });
-var unstyled3 = definePartsStyle5({
+var unstyled3 = definePartsStyle6({
   control: {
     borderColor: "neutral.600",
     _checked: {
@@ -4999,8 +5171,8 @@ var variants4 = {
   errors: errors2,
   unstyled: unstyled3
 };
-var Radio2 = defineMultiStyleConfig5({
-  baseStyle: baseStyle6,
+var Radio2 = defineMultiStyleConfig6({
+  baseStyle: baseStyle7,
   variants: variants4,
   defaultProps: {
     variant: "unstyled"
@@ -5009,10 +5181,10 @@ var Radio2 = defineMultiStyleConfig5({
 var radio_default = Radio2;
 
 // src/config/theme/components/switch.ts
-import { switchAnatomy as parts4 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
+import { switchAnatomy as parts5 } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
 import { calc, cssVar as cssVar2 } from "@chakra-ui/theme-tools";
-var { defineMultiStyleConfig: defineMultiStyleConfig6, definePartsStyle: definePartsStyle6 } = createMultiStyleConfigHelpers6(parts4.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig7, definePartsStyle: definePartsStyle7 } = createMultiStyleConfigHelpers7(parts5.keys);
 var $width = cssVar2("switch-track-width");
 var $height = cssVar2("switch-track-height");
 var $diff = cssVar2("switch-track-diff");
@@ -5029,7 +5201,7 @@ var baseStyleThumb = defineStyle4({
     transform: `translateX(${$translateX.reference})`
   }
 });
-var baseStyle7 = definePartsStyle6(() => ({
+var baseStyle8 = definePartsStyle7(() => ({
   container: {
     [$diff.variable]: diffValue,
     [$translateX.variable]: $diff.reference,
@@ -5054,7 +5226,7 @@ var baseStyle7 = definePartsStyle6(() => ({
   thumb: baseStyleThumb
 }));
 var sizes3 = {
-  sm: definePartsStyle6({
+  sm: definePartsStyle7({
     container: {
       [$width.variable]: "1.875rem",
       [$height.variable]: "0.75rem"
@@ -5064,7 +5236,7 @@ var sizes3 = {
       [$height.variable]: "0.75rem"
     }
   }),
-  md: definePartsStyle6({
+  md: definePartsStyle7({
     container: {
       [$width.variable]: "2.375rem",
       [$height.variable]: "1rem"
@@ -5074,7 +5246,7 @@ var sizes3 = {
       [$height.variable]: "1rem"
     }
   }),
-  lg: definePartsStyle6({
+  lg: definePartsStyle7({
     container: {
       [$width.variable]: "3.25rem",
       [$height.variable]: "1.375rem"
@@ -5085,8 +5257,8 @@ var sizes3 = {
     }
   })
 };
-var Switch3 = defineMultiStyleConfig6({
-  baseStyle: baseStyle7,
+var Switch3 = defineMultiStyleConfig7({
+  baseStyle: baseStyle8,
   sizes: sizes3,
   defaultProps: {
     size: "md"
@@ -5095,14 +5267,15 @@ var Switch3 = defineMultiStyleConfig6({
 var switch_default2 = Switch3;
 
 // src/config/theme/components/table.ts
-import { tableAnatomy as parts5 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
+import { tableAnatomy as parts6 } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers8, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
 import { mode as mode2 } from "@chakra-ui/theme-tools";
-var { defineMultiStyleConfig: defineMultiStyleConfig7, definePartsStyle: definePartsStyle7 } = createMultiStyleConfigHelpers7(parts5.keys);
-var baseStyle8 = definePartsStyle7({
+var { defineMultiStyleConfig: defineMultiStyleConfig8, definePartsStyle: definePartsStyle8 } = createMultiStyleConfigHelpers8(parts6.keys);
+var baseStyle9 = definePartsStyle8({
   table: {
     fontVariantNumeric: "lining-nums tabular-nums",
-    borderCollapse: "collapse",
+    borderCollapse: "separate",
+    borderSpacing: 0,
     width: "full",
     tableLayout: "fixed"
   },
@@ -5128,15 +5301,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": {
@@ -5161,7 +5344,7 @@ var numericStyles = defineStyle5({
     textAlign: "end"
   }
 });
-var variantSimple = definePartsStyle7((props) => {
+var variantSimple = definePartsStyle8((props) => {
   const { colorScheme: c } = props;
   return {
     th: {
@@ -5187,7 +5370,7 @@ var variantSimple = definePartsStyle7((props) => {
     }
   };
 });
-var variantStripe = definePartsStyle7((props) => {
+var variantStripe = definePartsStyle8((props) => {
   const { colorScheme: c } = props;
   return {
     th: {
@@ -5232,7 +5415,7 @@ var variants5 = {
   unstyled: defineStyle5({})
 };
 var sizes4 = {
-  sm: definePartsStyle7({
+  sm: definePartsStyle8({
     th: {
       px: "2",
       py: "4",
@@ -5251,7 +5434,7 @@ var sizes4 = {
       fontSize: "xs"
     }
   }),
-  md: definePartsStyle7({
+  md: definePartsStyle8({
     th: {
       px: "2",
       py: "4",
@@ -5269,7 +5452,7 @@ var sizes4 = {
       fontSize: "sm"
     }
   }),
-  lg: definePartsStyle7({
+  lg: definePartsStyle8({
     th: {
       px: "2",
       py: "4",
@@ -5288,8 +5471,8 @@ var sizes4 = {
     }
   })
 };
-var tableTheme = defineMultiStyleConfig7({
-  baseStyle: baseStyle8,
+var tableTheme = defineMultiStyleConfig8({
+  baseStyle: baseStyle9,
   variants: variants5,
   sizes: sizes4,
   defaultProps: {
@@ -5301,10 +5484,10 @@ var tableTheme = defineMultiStyleConfig7({
 var table_default = tableTheme;
 
 // src/config/theme/components/tabs.ts
-import { tabsAnatomy as parts6 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers8 } from "@chakra-ui/styled-system";
-var { defineMultiStyleConfig: defineMultiStyleConfig8, definePartsStyle: definePartsStyle8 } = createMultiStyleConfigHelpers8(parts6.keys);
-var variantLine = definePartsStyle8((props) => {
+import { tabsAnatomy as parts7 } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers9 } from "@chakra-ui/styled-system";
+var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = createMultiStyleConfigHelpers9(parts7.keys);
+var variantLine = definePartsStyle9((props) => {
   const { orientation } = props;
   const isVertical = orientation === "vertical";
   const borderProp = isVertical ? "borderStart" : "borderBottom";
@@ -5321,12 +5504,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",
@@ -5411,12 +5594,12 @@ var textarea_default2 = Textarea;
 // src/config/theme/components/tooltip.ts
 import { cssVar as cssVar3, defineStyleConfig as defineStyleConfig8 } from "@chakra-ui/react";
 var $arrowBg = cssVar3("popper-arrow-bg");
-var baseStyle9 = {
+var baseStyle10 = {
   bg: "neutral.700",
   fontSize: "text.sm",
   [$arrowBg.variable]: "var(--chakra-colors-neutral-700)"
 };
-var Tooltip2 = defineStyleConfig8({ baseStyle: baseStyle9 });
+var Tooltip2 = defineStyleConfig8({ baseStyle: baseStyle10 });
 var tooltip_default = Tooltip2;
 
 // src/config/theme/themeConfiguration.ts
@@ -5468,7 +5651,7 @@ import { useMemo as useMemo7 } from "react";
 import axios from "axios";
 import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo6, useRef as useRef2 } from "react";
 import { ToastContainer } from "react-toastify";
-import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs27 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
   instance: void 0
 });
@@ -5487,8 +5670,8 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
     });
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo6(() => ({ instance: instanceRef.current }), []);
-  return /* @__PURE__ */ jsxs26(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx58(ToastContainer, {}),
+  return /* @__PURE__ */ jsxs27(ProviderContext.Provider, { value: provider, children: [
+    /* @__PURE__ */ jsx59(ToastContainer, {}),
     children
   ] });
 };
@@ -5530,7 +5713,7 @@ function useFetcher() {
 import {
   useBoolean,
   useClipboard,
-  useColorMode as useColorMode7,
+  useColorMode as useColorMode8,
   useColorModeValue as useColorModeValue12,
   useConst,
   useControllableProp,
@@ -5588,6 +5771,7 @@ export {
   button_default as Button,
   ButtonGroup,
   ButtonGroupProps,
+  CHECKBOX_STATE,
   card_default as Card,
   Center,
   ChakraProvider,
@@ -5734,6 +5918,7 @@ export {
   select_default as Select,
   select_async_default as SelectAsync,
   SelectAsyncCreatable,
+  select_with_checkbox_default as SelectCheckBox,
   SelectCreatable,
   Show,
   ShowProps,
@@ -5778,7 +5963,7 @@ export {
   TabsProvider,
   Tbody2 as Tbody,
   Td2 as Td,
-  Text14 as Text,
+  Text15 as Text,
   TextProps,
   textarea_default as TextareaField,
   Th2 as Th,
@@ -5824,6 +6009,7 @@ export {
   WrapProps,
   extendTheme2 as extendTheme,
   forwardRef15 as forwardRef,
+  getSelectAllCheckboxState,
   getTheme,
   theme5 as theme,
   useAccordion,
@@ -5837,7 +6023,7 @@ export {
   useCheckbox,
   useCheckboxGroup,
   useClipboard,
-  useColorMode7 as useColorMode,
+  useColorMode8 as useColorMode,
   useColorModePreference,
   useColorModeValue12 as useColorModeValue,
   useConst,