@ctlyst.id/internal-ui 3.1.7 → 3.1.9

package/dist/index.mjs

@@ -926,24 +926,10 @@ var counter_default = Counter;
 
 // src/components/data-table/components/data-table.tsx
 import { ChevronDownIcon, ChevronUpIcon, UpDownIcon } from "@chakra-ui/icons";
-import {
-  Box as Box11,
-  Checkbox as Checkbox2,
-  Flex as Flex2,
-  Skeleton as Skeleton2,
-  Table,
-  Tbody,
-  Td,
-  Text as Text4,
-  Th,
-  Thead,
-  Tr,
-  useColorModeValue
-} from "@chakra-ui/react";
+import { Box as Box11, Checkbox as Checkbox2, Flex as Flex2, Skeleton as Skeleton2, Table, Tbody, Td, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
 import { css } from "@emotion/react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import * as React5 from "react";
-import { useRef } from "react";
 import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
 var isCellDisabled = (row, cellId) => {
   if (row.disabled) {
@@ -1135,7 +1121,7 @@ var DataTable = React5.forwardRef((props, ref) => {
                   align: "center",
                   gap: 2,
                   children: [
-                    /* @__PURE__ */ jsx24(Text4, { children: flexRender(header.column.columnDef.header, header.getContext()) }),
+                    flexRender(header.column.columnDef.header, header.getContext()),
                     /* @__PURE__ */ jsx24(
                       Box11,
                       {
@@ -1159,13 +1145,11 @@ var DataTable = React5.forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
-      const trRef = useRef();
       return /* @__PURE__ */ jsx24(
         Tr,
         {
           "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
           tabindex: "0",
-          ref: trRef,
           ...styles == null ? void 0 : styles.tableRow,
           css: css`
                     &:last-child {
@@ -1174,13 +1158,13 @@ var DataTable = React5.forwardRef((props, ref) => {
                       }
                     }
                   `,
-          onMouseDown: () => {
+          onMouseDown: (e) => {
             var _a;
-            (_a = trRef.current) == null ? void 0 : _a.setAttribute("data-active", "true");
+            (_a = e.currentTarget) == null ? void 0 : _a.setAttribute("data-active", "true");
           },
-          onMouseUp: () => {
+          onMouseUp: (e) => {
             var _a;
-            (_a = trRef.current) == null ? void 0 : _a.removeAttribute("data-active");
+            (_a = e.currentTarget) == null ? void 0 : _a.removeAttribute("data-active");
           },
           onClick: () => {
             if (onRowClick) {
@@ -2090,7 +2074,7 @@ var Styles = ({ showHeader }) => {
 var styles_default = Styles;
 
 // src/components/datepicker/components/time-input.tsx
-import { Flex as Flex3, Input, InputGroup as InputGroup3, InputRightAddon as InputRightAddon3, Text as Text5 } from "@chakra-ui/react";
+import { Flex as Flex3, Input, InputGroup as InputGroup3, InputRightAddon as InputRightAddon3, Text as Text4 } from "@chakra-ui/react";
 import React6 from "react";
 import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var TimeInput = ({ value, onChange, label, rightAddon }) => {
@@ -2101,7 +2085,7 @@ var TimeInput = ({ value, onChange, label, rightAddon }) => {
     if (onChange) onChange(((_b = e.target) == null ? void 0 : _b.value) || "00:00");
   };
   return /* @__PURE__ */ jsxs9(Flex3, { flexDir: "column", p: 4, pt: 0, children: [
-    /* @__PURE__ */ jsx26(Text5, { mb: 2, children: label }),
+    /* @__PURE__ */ jsx26(Text4, { mb: 2, children: label }),
     /* @__PURE__ */ jsxs9(InputGroup3, { alignItems: "center", borderColor: "neutral.400", children: [
       /* @__PURE__ */ jsx26(
         Input,
@@ -2342,7 +2326,7 @@ MultiDatePickerMonth.defaultProps = {
 var multi_datepicker_month_default = MultiDatePickerMonth;
 
 // src/components/dialog/components/dialog.tsx
-import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text as Text6 } from "@chakra-ui/react";
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text as Text5 } from "@chakra-ui/react";
 import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
 var Dialog = ({
   title,
@@ -2356,7 +2340,7 @@ var Dialog = ({
   return /* @__PURE__ */ jsxs12(Modal, { ...props, children: [
     isModalOverlay && /* @__PURE__ */ jsx30(ModalOverlay, { pointerEvents: isOverlayClickable ? "auto" : "none" }),
     /* @__PURE__ */ jsxs12(ModalContent, { bgColor: "neutral.50", fontFamily: "Poppins", width, minW: "400px", children: [
-      /* @__PURE__ */ jsx30(ModalHeader, { bgColor: "neutral.200", py: 2, px: 4, borderTopRadius: "sm", children: /* @__PURE__ */ jsx30(Text6, { textStyle: "text.lg", fontWeight: "normal", children: title }) }),
+      /* @__PURE__ */ jsx30(ModalHeader, { bgColor: "neutral.200", py: 2, px: 4, borderTopRadius: "sm", children: /* @__PURE__ */ jsx30(Text5, { textStyle: "text.lg", fontWeight: "normal", children: title }) }),
       /* @__PURE__ */ jsx30(ModalBody, { p: 4, textStyle: "text.md", children: content }),
       /* @__PURE__ */ jsx30(ModalFooter, { bgColor: "neutral.200", p: 4, borderBottomRadius: "sm", children: footer })
     ] })
@@ -2373,7 +2357,7 @@ var dialog_default = Dialog;
 import * as Icon2 from "@ctlyst.id/internal-icon";
 
 // src/components/empty-state/components/layout.tsx
-import { Box as Box14, Button as Button2, Flex as Flex4, Text as Text7, VStack } from "@chakra-ui/react";
+import { Box as Box14, Button as Button2, Flex as Flex4, Text as Text6, VStack } from "@chakra-ui/react";
 import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var EmptyState = (props) => {
   const { icon, title, description, buttonText, onClick } = props;
@@ -2385,8 +2369,8 @@ var EmptyState = (props) => {
   return /* @__PURE__ */ jsx31(Flex4, { align: "center", justify: "center", children: /* @__PURE__ */ jsxs13(VStack, { textAlign: "center", children: [
     icon,
     /* @__PURE__ */ jsxs13(VStack, { spacing: 2, textAlign: "center", mt: 3, children: [
-      /* @__PURE__ */ jsx31(Text7, { textStyle: "text.lg", fontWeight: "bold", children: title }),
-      /* @__PURE__ */ jsx31(Text7, { textStyle: "text.md", color: "black.medium", whiteSpace: "pre-wrap", children: description })
+      /* @__PURE__ */ jsx31(Text6, { textStyle: "text.lg", fontWeight: "bold", children: title }),
+      /* @__PURE__ */ jsx31(Text6, { textStyle: "text.md", color: "black.medium", whiteSpace: "pre-wrap", children: description })
     ] }),
     buttonText && /* @__PURE__ */ jsx31(Box14, { mt: 3, children: /* @__PURE__ */ jsx31(Button2, { size: "lg", "data-test-id": "CT_component-action-button", onClick: handleClick, children: buttonText }) })
   ] }) });
@@ -2506,7 +2490,7 @@ import {
   PopoverBody as PopoverBody2,
   PopoverContent as PopoverContent2,
   PopoverTrigger as PopoverTrigger2,
-  Text as Text8,
+  Text as Text7,
   useDisclosure,
   VStack as VStack2
 } from "@chakra-ui/react";
@@ -2638,10 +2622,10 @@ var Profile = ({
         ...props,
         children: /* @__PURE__ */ jsxs15(HStack2, { children: [
           /* @__PURE__ */ jsxs15(VStack2, { alignItems: "flex-end", spacing: "0", ml: "2", color, children: [
-            /* @__PURE__ */ jsx36(Text8, { textStyle: "text.xs", mb: "1", children: data == null ? void 0 : data.email }),
+            /* @__PURE__ */ jsx36(Text7, { textStyle: "text.xs", mb: "1", children: data == null ? void 0 : data.email }),
             /* @__PURE__ */ jsxs15(Flex5, { alignItems: "center", children: [
               (data == null ? void 0 : data.userRole) && /* @__PURE__ */ jsxs15(Fragment4, { children: [
-                /* @__PURE__ */ jsx36(Text8, { textStyle: "text.xs", children: (data == null ? void 0 : data.userRole) || "user" }),
+                /* @__PURE__ */ jsx36(Text7, { textStyle: "text.xs", children: (data == null ? void 0 : data.userRole) || "user" }),
                 !!((_a = data.office) == null ? void 0 : _a.length) && /* @__PURE__ */ jsx36(
                   Box16,
                   {
@@ -2654,7 +2638,7 @@ var Profile = ({
                 )
               ] }),
               typeof (data == null ? void 0 : data.office) === "object" ? /* @__PURE__ */ jsxs15(Flex5, { align: "center", justify: "center", children: [
-                /* @__PURE__ */ jsx36(Text8, { textStyle: "text.xs", children: data.office[0] }),
+                /* @__PURE__ */ jsx36(Text7, { textStyle: "text.xs", children: data.office[0] }),
                 data.office.length > 1 && /* @__PURE__ */ jsx36(
                   Tooltip,
                   {
@@ -2662,8 +2646,8 @@ var Profile = ({
                     hasArrow: true,
                     p: "2",
                     label: /* @__PURE__ */ jsxs15(Box16, { children: [
-                      /* @__PURE__ */ jsx36(Text8, { children: "Akses Office:" }),
-                      /* @__PURE__ */ jsx36(Text8, { children: data.office.sort().join(", ") })
+                      /* @__PURE__ */ jsx36(Text7, { children: "Akses Office:" }),
+                      /* @__PURE__ */ jsx36(Text7, { children: data.office.sort().join(", ") })
                     ] }),
                     textAlign: "left",
                     placement: "bottom-end",
@@ -2691,7 +2675,7 @@ var Profile = ({
                     ) })
                   }
                 )
-              ] }) : /* @__PURE__ */ jsx36(Text8, { textStyle: "text.xs", children: (data == null ? void 0 : data.office) || "office" })
+              ] }) : /* @__PURE__ */ jsx36(Text7, { textStyle: "text.xs", children: (data == null ? void 0 : data.office) || "office" })
             ] })
           ] }),
           /* @__PURE__ */ jsx36(PopoverTrigger2, { children: /* @__PURE__ */ jsx36(Box16, { border: "2px solid", borderColor: "transparent", className: "catalyst-header-avatar", rounded: "full", children: /* @__PURE__ */ jsx36(Avatar, { size: "sm", bg: brandColor, color: "white", name: (_b = data == null ? void 0 : data.name) != null ? _b : data == null ? void 0 : data.email }) }) })
@@ -2702,7 +2686,7 @@ var Profile = ({
       /* @__PURE__ */ jsx36(PopoverArrow2, { bg: "white" }),
       /* @__PURE__ */ jsx36(PopoverBody2, { py: "1", px: "0", children: /* @__PURE__ */ jsx36(NavItem, { "data-test-id": "CTA_Navbar_logout-button", onClick: onLogout, rounded: "none", px: "4", children: /* @__PURE__ */ jsxs15(Box16, { display: "flex", alignItems: "center", children: [
         /* @__PURE__ */ jsx36(FiPower, {}),
-        /* @__PURE__ */ jsx36(Text8, { ml: "2", children: "Logout" })
+        /* @__PURE__ */ jsx36(Text7, { ml: "2", children: "Logout" })
       ] }) }) })
     ] })
   ] });
@@ -2986,7 +2970,7 @@ import {
   PopoverContent as PopoverContent3,
   PopoverTrigger as PopoverTrigger3,
   Portal as Portal2,
-  Text as Text9,
+  Text as Text8,
   useColorModeValue as useColorModeValue3
 } from "@chakra-ui/react";
 import * as Icon5 from "@ctlyst.id/internal-icon";
@@ -3091,7 +3075,7 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         py: 4,
                         children: [
                           mappingIcon.get(navigation.title),
-                          /* @__PURE__ */ jsx43(Text9, { fontSize: "text.sm", ml: 3, children: title }),
+                          /* @__PURE__ */ jsx43(Text8, { fontSize: "text.sm", ml: 3, children: title }),
                           isActiveSub && /* @__PURE__ */ jsx43(
                             Box21,
                             {
@@ -3126,7 +3110,7 @@ Navigation.defaultProps = {
 var navigation_default = Navigation;
 
 // src/components/navigation/components/navigation-bar.tsx
-import { Box as Box22, Button as Button4, Flex as Flex10, Link as Link4, Popover as Popover4, PopoverContent as PopoverContent4, PopoverTrigger as PopoverTrigger4, Text as Text10 } from "@chakra-ui/react";
+import { Box as Box22, Button as Button4, Flex as Flex10, Link as Link4, Popover as Popover4, PopoverContent as PopoverContent4, PopoverTrigger as PopoverTrigger4, Text as Text9 } from "@chakra-ui/react";
 import * as Icon6 from "@ctlyst.id/internal-icon";
 import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
 var NavigationBar = ({
@@ -3197,7 +3181,7 @@ var NavigationBar = ({
               "data-test-id": `CT_component_navigation_link-${item.id}`,
               children: [
                 mappingIcon2.get(item.title),
-                /* @__PURE__ */ jsx44(Text10, { textStyle: "text-sm", ml: 3, children: subMenu.title })
+                /* @__PURE__ */ jsx44(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
               ]
             },
             subMenu.id
@@ -3214,7 +3198,7 @@ var navigation_bar_default = NavigationBar;
 
 // src/components/pagination/components/pagination.tsx
 import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon } from "@chakra-ui/icons";
-import { Box as Box23, Text as Text11, useColorModeValue as useColorModeValue5 } from "@chakra-ui/react";
+import { Box as Box23, Text as Text10, useColorModeValue as useColorModeValue5 } from "@chakra-ui/react";
 
 // src/components/pagination/components/pagination-button.tsx
 import { Button as Button5, forwardRef as forwardRef9, useColorModeValue as useColorModeValue4 } from "@chakra-ui/react";
@@ -3345,7 +3329,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
             "data-test-id": "Pagination-Button",
             isActive: page === current,
             onClick: () => typeof page === "number" ? handleSelectPage(page) : null,
-            children: /* @__PURE__ */ jsx47(Text11, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
+            children: /* @__PURE__ */ jsx47(Text10, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
           },
           page
         );
@@ -3383,7 +3367,7 @@ Pagination.displayName = "Pagination";
 var pagination_default = Pagination;
 
 // src/components/pagination/components/pagination-detail.tsx
-import { Text as Text12 } from "@chakra-ui/react";
+import { Text as Text11 } from "@chakra-ui/react";
 import { jsx as jsx48 } from "react/jsx-runtime";
 var PaginationDetail = ({
   page,
@@ -3394,12 +3378,12 @@ var PaginationDetail = ({
   lineHeight = 18,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx48(Text12, { scale, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
+  return /* @__PURE__ */ jsx48(Text11, { scale, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
 };
 var pagination_detail_default = PaginationDetail;
 
 // src/components/pagination/components/pagination-filter.tsx
-import { Box as Box24, Select, Text as Text13, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
+import { Box as Box24, Select, Text as Text12, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
 import * as React9 from "react";
 import { FiChevronDown } from "react-icons/fi";
 import { jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -3412,7 +3396,7 @@ var PaginationFilter = ({
 }) => {
   const [value, setValue] = React9.useState(limit);
   return /* @__PURE__ */ jsxs22(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
-    /* @__PURE__ */ jsx49(Text13, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue6("neutral.900", "white"), ...rest, children: label }),
+    /* @__PURE__ */ jsx49(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue6("neutral.900", "white"), ...rest, children: label }),
     /* @__PURE__ */ jsx49(
       Select,
       {
@@ -3493,13 +3477,13 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/radio/components/radio.tsx
-import { Box as Box25, Radio as ChakraRadio, Text as Text14 } from "@chakra-ui/react";
+import { Box as Box25, Radio as ChakraRadio, Text as Text13 } from "@chakra-ui/react";
 import { jsx as jsx50, jsxs as jsxs23 } from "react/jsx-runtime";
 var Radio = ({ isError = false, helpText, errorText, children, isDisabled, ...rest }) => {
   const variant = isError ? "errors" : "unstyled";
   return /* @__PURE__ */ jsxs23(Box25, { children: [
-    /* @__PURE__ */ jsx50(Box25, { display: "flex", children: /* @__PURE__ */ jsx50(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx50(Text14, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-    isError && errorText ? /* @__PURE__ */ jsx50(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx50(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) }) : helpText ? /* @__PURE__ */ jsx50(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx50(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) }) : null
+    /* @__PURE__ */ jsx50(Box25, { display: "flex", children: /* @__PURE__ */ jsx50(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx50(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+    isError && errorText ? /* @__PURE__ */ jsx50(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx50(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) }) : helpText ? /* @__PURE__ */ jsx50(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx50(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) }) : null
   ] });
 };
 Radio.displayName = "Radio";
@@ -3868,6 +3852,9 @@ function selectStyles(colorMode, _isError) {
     placeholder: (base) => {
       return { ...base, ...selectStyle, color: "var(--chakra-colors-black-low)" };
     },
+    clearIndicator: (base) => {
+      return { ...base, cursor: "pointer" };
+    },
     multiValue: (base) => {
       return {
         ...base,
@@ -3925,10 +3912,11 @@ function Select2({
   ...rest
 }) {
   const { colorMode } = useColorMode3();
-  const { components } = rest;
+  const { components, value, onChange } = rest;
   return /* @__PURE__ */ jsx53(
     ReactSelect,
     {
+      "data-test-id": "",
       classNamePrefix: "react-select",
       components: {
         DropdownIndicator,
@@ -3937,6 +3925,8 @@ function Select2({
         MultiValueRemove,
         ...components
       },
+      value,
+      onChange,
       styles: { ...selectStyles(colorMode, isError) },
       theme: themeSelect,
       ...rest
@@ -4014,7 +4004,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 }
 
 // src/components/select/components/select-with-checkbox.tsx
-import { Checkbox as Checkbox3, Flex as Flex12, Text as Text15 } from "@chakra-ui/react";
+import { Checkbox as Checkbox3, Flex as Flex12, 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 Fragment8, jsx as jsx57, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -4095,7 +4085,7 @@ var InputOption = ({
                   "data-test-id": "CT_component_select-checkbox_select-all-option"
                 }
               ) : /* @__PURE__ */ jsx57(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
-              /* @__PURE__ */ jsx57(Text15, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+              /* @__PURE__ */ jsx57(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
             ]
           }
         )
@@ -4108,21 +4098,24 @@ var SelectWithCheckboxBase = ({
   isError = false,
   components,
   options,
+  onChange,
+  value,
   ...rest
 }) => {
   const { colorMode } = useColorMode7();
   return /* @__PURE__ */ jsx57(
     ReactSelect2,
     {
+      "data-test-id": "",
       classNamePrefix: "react-select",
       options,
+      value,
+      onChange,
       styles: { ...selectStyles(colorMode, !!isError) },
       theme: themeSelect,
       closeMenuOnSelect: false,
       hideSelectedOptions: false,
-      components: {
-        ...components
-      },
+      components,
       ...rest
     }
   );
@@ -4130,24 +4123,29 @@ var SelectWithCheckboxBase = ({
 var SelectCheckbox = (props) => {
   const { isMulti, options, value, components, ...rest } = props;
   const selectValue = value || [];
+  const defaultComponents = {
+    DropdownIndicator,
+    ClearIndicator,
+    MultiValue,
+    MultiValueRemove,
+    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__ */ jsx57(InputOption, { ...optionProps, checkedState });
+    }
+  };
   return /* @__PURE__ */ jsx57(
     SelectWithCheckboxBase,
     {
+      "data-test-id": "",
       isMulti,
       options,
+      value,
       components: {
-        DropdownIndicator,
-        ClearIndicator,
-        MultiValue,
-        MultiValueRemove,
-        ...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__ */ jsx57(InputOption, { ...optionProps, checkedState });
-        }
+        ...defaultComponents,
+        ...components
       },
       ...rest
     }
@@ -4182,7 +4180,7 @@ var Sidebar = ({ isCollapse, children, ...props }) => {
 Sidebar.displayName = "Sidebar";
 
 // src/components/sidebar/components/sidebar-header.tsx
-import { Box as Box27, Flex as Flex14, Text as Text16 } from "@chakra-ui/react";
+import { Box as Box27, Flex as Flex14, Text as Text15 } from "@chakra-ui/react";
 import { ArrowRight } from "@ctlyst.id/internal-icon";
 import { AnimatePresence, motion as motion2 } from "framer-motion";
 import { jsx as jsx59, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -4220,7 +4218,7 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
               }
             ),
             /* @__PURE__ */ jsx59(AnimatePresence, { children: !isCollapse && /* @__PURE__ */ jsx59(Box27, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx59(
-              Text16,
+              Text15,
               {
                 as: motion2.div,
                 w: "max-content",
@@ -4258,7 +4256,7 @@ import {
   PopoverHeader as PopoverHeader2,
   PopoverTrigger as PopoverTrigger6,
   Portal as Portal4,
-  Text as Text17
+  Text as Text16
 } from "@chakra-ui/react";
 import * as Icon8 from "@ctlyst.id/internal-icon";
 import { motion as motion3 } from "framer-motion";
@@ -4309,7 +4307,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                           animate: { opacity: 1, x: 0 },
                           exit: { opacity: 0, x: 16 },
                           children: [
-                            /* @__PURE__ */ jsx60(Box28, { h: "3.5", position: "relative", children: /* @__PURE__ */ jsx60(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
+                            /* @__PURE__ */ jsx60(Box28, { h: "3.5", position: "relative", children: /* @__PURE__ */ jsx60(Text16, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
                             !!item.children.length && /* @__PURE__ */ jsx60(
                               Box28,
                               {
@@ -4365,7 +4363,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                 ...itemStyles,
                 children: [
                   mappingIcon2 && /* @__PURE__ */ jsx60(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
-                  /* @__PURE__ */ jsx60(Box28, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx60(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
+                  /* @__PURE__ */ jsx60(Box28, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx60(Text16, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
                 ]
               },
               item.id
@@ -4584,7 +4582,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/text/index.ts
-import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text18, TextProps } from "@chakra-ui/react";
+import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text17, TextProps } from "@chakra-ui/react";
 
 // src/components/toast/components/toast.tsx
 import { chakra as chakra7, Flex as Flex17, Link as Link6, useToken } from "@chakra-ui/react";
@@ -4753,11 +4751,11 @@ import {
   Image as ChakraImage,
   ListItem as ListItem2,
   RequiredIndicator as RequiredIndicator2,
-  Text as Text19,
+  Text as Text18,
   UnorderedList as UnorderedList2
 } from "@chakra-ui/react";
 import { Close as X, Plus } from "@ctlyst.id/internal-icon";
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState4 } from "react";
 import { useDropzone } from "react-dropzone";
 
 // src/components/uploader/constants.ts
@@ -4817,7 +4815,7 @@ var Uploader = ({
   size: size2 = "lg",
   ...props
 }) => {
-  const inputRef = useRef2(null);
+  const inputRef = useRef(null);
   const [filePreview, setFilePreview] = useState4();
   const toast2 = useToast();
   const handleRejection = useCallback2(
@@ -4880,7 +4878,7 @@ var Uploader = ({
     }
     return helperText;
   };
-  const renderErrorText = (text2) => /* @__PURE__ */ jsx65(Box29, { mb: 2, children: /* @__PURE__ */ jsx65(Text19, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
+  const renderErrorText = (text2) => /* @__PURE__ */ jsx65(Box29, { mb: 2, children: /* @__PURE__ */ jsx65(Text18, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
   const handleRemove = (e) => {
     e.stopPropagation();
     setFilePreview(void 0);
@@ -4973,7 +4971,7 @@ var Uploader = ({
                 ...getInputProps()
               }
             ),
-            isDragActive ? /* @__PURE__ */ jsx65(Text19, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs30(Flex18, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
+            isDragActive ? /* @__PURE__ */ jsx65(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs30(Flex18, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
               size2 === "sm" && /* @__PURE__ */ jsx65(Plus, { size: 6, color }),
               /* @__PURE__ */ jsxs30(Box29, { children: [
                 !filePreview && /* @__PURE__ */ jsx65(
@@ -4986,7 +4984,7 @@ var Uploader = ({
                     children: uploadFileText && size2 === "lg" ? messages.uploadFile : "Upload"
                   }
                 ),
-                size2 === "lg" && /* @__PURE__ */ jsx65(Text19, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
+                size2 === "lg" && /* @__PURE__ */ jsx65(Text18, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
               ] })
             ] })
           ] })
@@ -6705,7 +6703,7 @@ import { useMemo as useMemo5 } from "react";
 
 // src/provider/components/provider.tsx
 import axios from "axios";
-import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3 } from "react";
+import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo4, useRef as useRef2 } from "react";
 import { ToastContainer as ToastContainer2 } from "react-toastify";
 import { jsx as jsx66, jsxs as jsxs31 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
@@ -6716,7 +6714,7 @@ var useInternalUI = () => {
   return { instance };
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
-  const instanceRef = useRef3(axios.create(config2));
+  const instanceRef = useRef2(axios.create(config2));
   useEffect3(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
@@ -7044,7 +7042,7 @@ export {
   TabsProvider,
   Tbody2 as Tbody,
   Td2 as Td,
-  Text18 as Text,
+  Text17 as Text,
   TextProps,
   textarea_default as TextareaField,
   Th2 as Th,