@ctlyst.id/internal-ui 5.5.7 → 5.6.1

package/dist/index.mjs

@@ -1328,16 +1328,7 @@ var DataTable = React5.forwardRef((props, ref) => {
             _first: { paddingLeft: `${paddingRowX + 8}px` },
             _last: { paddingRight: `${paddingRowX + 8}px` },
             ...styles == null ? void 0 : styles.tableColumnHeader,
-            children: /* @__PURE__ */ jsx24(
-              Flex2,
-              {
-                "data-test-id": "CT_component_data-table_loader",
-                textTransform: "capitalize",
-                align: "center",
-                gap: 2,
-                children: flexRender(header.column.columnDef.header, header.getContext())
-              }
-            )
+            children: /* @__PURE__ */ jsx24(Flex2, { "data-test-id": "CT_component_data-table_loader", align: "center", gap: 2, children: flexRender(header.column.columnDef.header, header.getContext()) })
           },
           header.id
         )) }, headerGroup.id)) }),
@@ -1377,7 +1368,6 @@ var DataTable = React5.forwardRef((props, ref) => {
                       backgroundColor: "white",
                       height: "100%",
                       "data-test-id": `CT_Container_TableHeader_${header.id}`,
-                      textTransform: "capitalize",
                       userSelect: "none",
                       align: "center",
                       gap: 2,
@@ -4411,6 +4401,60 @@ import { useColorMode as useColorMode2 } from "@chakra-ui/system";
 import * as Icon7 from "@ctlyst.id/internal-icon";
 import ReactSelect, { components as componentRS } from "react-select";
 
+// src/components/select/components/menu-list-virtualized.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef as useRef3 } from "react";
+import { jsx as jsx54 } from "react/jsx-runtime";
+var MenuListVirtualized = (props) => {
+  const { children, estimateSize, overscan, ...virtualizerProps } = props;
+  const childrenArr = Array.isArray(children) ? children : [children];
+  const itemCount = childrenArr.length;
+  const parentRef = useRef3(null);
+  const rowVirtualizer = useVirtualizer({
+    count: itemCount,
+    getScrollElement: () => parentRef.current,
+    estimateSize: estimateSize || (() => 42),
+    overscan: overscan || 5,
+    ...virtualizerProps
+  });
+  return /* @__PURE__ */ jsx54(
+    "div",
+    {
+      ref: parentRef,
+      style: {
+        height: `300px`,
+        width: `100%`,
+        overflow: "auto"
+      },
+      children: /* @__PURE__ */ jsx54(
+        "div",
+        {
+          style: {
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative"
+          },
+          children: rowVirtualizer.getVirtualItems().map((virtualRow) => /* @__PURE__ */ jsx54(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${virtualRow.size}px`,
+                transform: `translateY(${virtualRow.start}px)`
+              },
+              children: childrenArr[virtualRow.index]
+            },
+            virtualRow.index
+          ))
+        }
+      )
+    }
+  );
+};
+
 // src/config/theme/foundations/shadows.ts
 import { theme } from "@chakra-ui/react";
 var shadows = {
@@ -4783,22 +4827,22 @@ var themeSelect = (theme5) => {
 };
 
 // src/components/select/components/select.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function DropdownIndicator(props) {
-  return /* @__PURE__ */ jsx54(componentRS.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx54(Icon7.ChevronDown, { size: 4, color: "neutral.400" }) });
+  return /* @__PURE__ */ jsx55(componentRS.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx55(Icon7.ChevronDown, { size: 4, color: "neutral.400" }) });
 }
 function ClearIndicator(props) {
   const { hasValue } = props;
-  return /* @__PURE__ */ jsx54(componentRS.ClearIndicator, { ...props, children: /* @__PURE__ */ jsx54(Icon7.Close, { size: 4, color: hasValue ? "black.medium" : "neutral.400" }) });
+  return /* @__PURE__ */ jsx55(componentRS.ClearIndicator, { ...props, children: /* @__PURE__ */ jsx55(Icon7.Close, { size: 4, color: hasValue ? "black.medium" : "neutral.400" }) });
 }
 function MultiValue(props) {
-  return /* @__PURE__ */ jsx54(componentRS.MultiValue, { ...props, children: /* @__PURE__ */ jsx54(Badge2, { pr: 0, variant: "neutral-light", children: props == null ? void 0 : props.data.label }) });
+  return /* @__PURE__ */ jsx55(componentRS.MultiValue, { ...props, children: /* @__PURE__ */ jsx55(Badge2, { pr: 0, variant: "neutral-light", children: props == null ? void 0 : props.data.label }) });
 }
 function MultiValueRemove(props) {
-  return /* @__PURE__ */ jsx54(componentRS.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx54(Flex11, { align: "center", justify: "center", children: /* @__PURE__ */ jsx54(Icon7.Close, { size: 2.5, color: "inherit" }) }) });
+  return /* @__PURE__ */ jsx55(componentRS.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx55(Flex11, { align: "center", justify: "center", children: /* @__PURE__ */ jsx55(Icon7.Close, { size: 2.5, color: "inherit" }) }) });
 }
 function NoOptionsMessage(props) {
-  return /* @__PURE__ */ jsx54(Center2, { textStyle: "text.xs", py: "1.5", color: "black.medium", children: (props == null ? void 0 : props.options.length) === 0 ? "Opsi tidak tersedia" : "Hasil tidak ditemukan" });
+  return /* @__PURE__ */ jsx55(Center2, { textStyle: "text.xs", py: "1.5", color: "black.medium", children: (props == null ? void 0 : props.options.length) === 0 ? "Opsi tidak tersedia" : "Hasil tidak ditemukan" });
 }
 function Select2({
   styles,
@@ -4806,8 +4850,9 @@ function Select2({
   ...rest
 }) {
   const { colorMode } = useColorMode2();
-  const { components, value, onChange } = rest;
-  return /* @__PURE__ */ jsx54(
+  const { components, value, onChange, virtualized } = rest;
+  const renderMenuListVirtualized = (menuProps) => /* @__PURE__ */ jsx55(MenuListVirtualized, { ...menuProps, ...rest.virtualizerProps });
+  return /* @__PURE__ */ jsx55(
     ReactSelect,
     {
       "data-test-id": "",
@@ -4818,6 +4863,9 @@ function Select2({
         MultiValue,
         MultiValueRemove,
         NoOptionsMessage,
+        ...virtualized ? {
+          MenuList: renderMenuListVirtualized
+        } : {},
         ...components
       },
       value,
@@ -4834,7 +4882,7 @@ var select_default = Select2;
 // src/components/select/components/select-async.tsx
 import { useColorMode as useColorMode3 } from "@chakra-ui/system";
 import { AsyncPaginate } from "react-select-async-paginate";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function SelectAsync({
   styles,
   isError = false,
@@ -4842,7 +4890,7 @@ function SelectAsync({
 }) {
   const { colorMode } = useColorMode3();
   const { components } = rest;
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     AsyncPaginate,
     {
       classNamePrefix: "react-select",
@@ -4864,10 +4912,10 @@ var select_async_default = SelectAsync;
 // src/components/select/components/select-async-creatable.tsx
 import { useColorMode as useColorMode4 } from "@chakra-ui/system";
 import ReactSelectAsyncCreatable from "react-select/async-creatable";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode4();
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     ReactSelectAsyncCreatable,
     {
       classNamePrefix: "react-select",
@@ -4887,10 +4935,10 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
 // src/components/select/components/select-creatable.tsx
 import { useColorMode as useColorMode5 } from "@chakra-ui/system";
 import ReactSelectCreatable from "react-select/creatable";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function SelectCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode5();
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     ReactSelectCreatable,
     {
       classNamePrefix: "react-select",
@@ -4911,7 +4959,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 import { Checkbox as Checkbox2, Flex as Flex12, Text as Text14 } from "@chakra-ui/react";
 import { useColorMode as useColorMode6 } from "@chakra-ui/system";
 import ReactSelect2, { components as ComponentRS } from "react-select";
-import { Fragment as Fragment8, jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
 var CHECKBOX_STATE = {
   UNCHECKED: 0,
   INDETERMINATE: 1,
@@ -4959,7 +5007,7 @@ var InputOption = ({
     style
   };
   return /* @__PURE__ */ jsxs24(Fragment8, { children: [
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx59(
       ComponentRS.Option,
       {
         isMulti: true,
@@ -4979,7 +5027,7 @@ var InputOption = ({
             "data-test-id": "CT_component_select-checkbox_options",
             cursor: isDisabled ? "not-allowed" : "default",
             children: [
-              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx58(
+              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx59(
                 Checkbox2,
                 {
                   isChecked: checkedState === CHECKBOX_STATE.CHECKED,
@@ -4989,7 +5037,7 @@ var InputOption = ({
                   "data-test-id": "CT_component_select-checkbox_select-all-option",
                   isInvalid: false
                 }
-              ) : /* @__PURE__ */ jsx58(
+              ) : /* @__PURE__ */ jsx59(
                 Checkbox2,
                 {
                   pointerEvents: "none",
@@ -4998,13 +5046,13 @@ var InputOption = ({
                   isInvalid: false
                 }
               ),
-              /* @__PURE__ */ jsx58(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+              /* @__PURE__ */ jsx59(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
             ]
           }
         )
       }
     ),
-    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx58("hr", {}) : null
+    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx59("hr", {}) : null
   ] });
 };
 var SelectWithCheckboxBase = ({
@@ -5017,7 +5065,7 @@ var SelectWithCheckboxBase = ({
   ...rest
 }) => {
   const { colorMode } = useColorMode6();
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     ReactSelect2,
     {
       "data-test-id": "",
@@ -5036,8 +5084,9 @@ var SelectWithCheckboxBase = ({
   );
 };
 var SelectCheckbox = (props) => {
-  const { isMulti, options, value, components, ...rest } = props;
+  const { isMulti, options, value, components, virtualized, ...rest } = props;
   const selectValue = value || [];
+  const renderMenuListVirtualized = (menuProps) => /* @__PURE__ */ jsx59(MenuListVirtualized, { ...menuProps, ...rest.virtualizerProps });
   const defaultComponents = {
     DropdownIndicator,
     ClearIndicator,
@@ -5049,10 +5098,10 @@ var SelectCheckbox = (props) => {
       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__ */ jsx58(InputOption, { ...optionProps, checkedState });
+      return /* @__PURE__ */ jsx59(InputOption, { ...optionProps, checkedState });
     }
   };
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     SelectWithCheckboxBase,
     {
       "data-test-id": "",
@@ -5061,6 +5110,9 @@ var SelectCheckbox = (props) => {
       value,
       components: {
         ...defaultComponents,
+        ...virtualized ? {
+          MenuList: renderMenuListVirtualized
+        } : {},
         ...components
       },
       ...rest
@@ -5072,10 +5124,10 @@ var select_with_checkbox_default = SelectCheckbox;
 // src/components/sidebar/components/sidebar.tsx
 import { Flex as Flex13 } from "@chakra-ui/react";
 import { motion } from "framer-motion";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var Sidebar = ({ isCollapse, children, ...props }) => {
   const { width = "220px" } = props;
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Flex13,
     {
       position: "relative",
@@ -5099,9 +5151,9 @@ Sidebar.displayName = "Sidebar";
 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 jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
 var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     Box27,
     {
       px: "2",
@@ -5121,7 +5173,7 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
           onClick: () => setCollapse(!isCollapse),
           cursor: "pointer",
           children: [
-            /* @__PURE__ */ jsx60(
+            /* @__PURE__ */ jsx61(
               Box27,
               {
                 as: motion2.div,
@@ -5130,10 +5182,10 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
                 animate: { rotate: isCollapse ? 0 : -180, x: isCollapse ? 8 : 0 },
                 transitionTimingFunction: "linear",
                 "aria-label": "toggle sidebar",
-                children: /* @__PURE__ */ jsx60(ArrowRight, { size: 4, color: "inherit" })
+                children: /* @__PURE__ */ jsx61(ArrowRight, { size: 4, color: "inherit" })
               }
             ),
-            /* @__PURE__ */ jsx60(AnimatePresence, { children: !isCollapse && /* @__PURE__ */ jsx60(Box27, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx60(
+            /* @__PURE__ */ jsx61(AnimatePresence, { children: !isCollapse && /* @__PURE__ */ jsx61(Box27, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx61(
               Text15,
               {
                 as: motion2.div,
@@ -5177,28 +5229,28 @@ import {
 } from "@chakra-ui/react";
 import * as Icon8 from "@ctlyst.id/internal-icon";
 import { motion as motion3 } from "framer-motion";
-import { Fragment as Fragment9, jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs26 } from "react/jsx-runtime";
 var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, setActive, active }) => {
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     Box28,
     {
       as: motion3.div,
       transitionTimingFunction: "linear",
       initial: { padding: "8px" },
       animate: { padding: isCollapse ? "8px 16px" : "8px" },
-      children: /* @__PURE__ */ jsx61(Accordion2, { index: menu.findIndex((item) => item.children.some((child) => child.navLink === active)), children: menu.map((item) => {
+      children: /* @__PURE__ */ jsx62(Accordion2, { index: menu.findIndex((item) => item.children.some((child) => child.navLink === active)), children: menu.map((item) => {
         const isActive = active == null ? void 0 : active.includes(item.navLink);
-        return /* @__PURE__ */ jsx61(AccordionItem2, { mt: "4", children: ({ isExpanded }) => {
+        return /* @__PURE__ */ jsx62(AccordionItem2, { mt: "4", children: ({ isExpanded }) => {
           const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
           const noChild = !item.children.length;
           const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
           return /* @__PURE__ */ jsxs26(Fragment9, { children: [
-            /* @__PURE__ */ jsx61(Popover6, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
+            /* @__PURE__ */ jsx62(Popover6, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
               const activeOption = isOpen ? "primary.50" : "white";
               const backgroundColor = isOpen && !isActive ? "primary.50" : "primary.100";
               const activeParent = isActive ? backgroundColor : activeOption;
               return /* @__PURE__ */ jsxs26(Fragment9, { children: [
-                /* @__PURE__ */ jsx61(PopoverTrigger6, { children: /* @__PURE__ */ jsx61(
+                /* @__PURE__ */ jsx62(PopoverTrigger6, { children: /* @__PURE__ */ jsx62(
                   AccordionButton2,
                   {
                     "data-test-id": `CTA_button-accordion-${item.title}`,
@@ -5217,7 +5269,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                         position: "relative",
                         ...itemStyles,
                         children: [
-                          mappingIcon2 && /* @__PURE__ */ jsx61(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
+                          mappingIcon2 && /* @__PURE__ */ jsx62(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
                           !isCollapse && /* @__PURE__ */ jsxs26(
                             Box28,
                             {
@@ -5233,8 +5285,8 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                               animate: { opacity: 1, x: 0 },
                               exit: { opacity: 0, x: 16 },
                               children: [
-                                /* @__PURE__ */ jsx61(Box28, { h: "3.5", position: "relative", children: /* @__PURE__ */ jsx61(Text16, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
-                                !!item.children.length && /* @__PURE__ */ jsx61(
+                                /* @__PURE__ */ jsx62(Box28, { h: "3.5", position: "relative", children: /* @__PURE__ */ jsx62(Text16, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
+                                !!item.children.length && /* @__PURE__ */ jsx62(
                                   Box28,
                                   {
                                     display: "flex",
@@ -5242,7 +5294,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                                     as: motion3.div,
                                     transitionTimingFunction: "linear",
                                     animate: { transform: isExpanded ? "rotate(-180deg)" : "rotate(0)" },
-                                    children: /* @__PURE__ */ jsx61(Icon8.ChevronDown, { size: 3 })
+                                    children: /* @__PURE__ */ jsx62(Icon8.ChevronDown, { size: 3 })
                                   }
                                 )
                               ]
@@ -5255,12 +5307,12 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                   },
                   item.id
                 ) }, item.id),
-                isOpenOptions && /* @__PURE__ */ jsx61(Portal4, { children: item.children.length > 0 ? /* @__PURE__ */ jsxs26(PopoverContent6, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
-                  /* @__PURE__ */ jsx61(PopoverHeader2, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ jsxs26(Box28, { display: "flex", alignItems: "center", children: [
+                isOpenOptions && /* @__PURE__ */ jsx62(Portal4, { children: item.children.length > 0 ? /* @__PURE__ */ jsxs26(PopoverContent6, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
+                  /* @__PURE__ */ jsx62(PopoverHeader2, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ jsxs26(Box28, { display: "flex", alignItems: "center", children: [
                     mappingIcon2.get(item.icon || ""),
-                    /* @__PURE__ */ jsx61(Box28, { as: "span", ml: "2", children: item.title })
+                    /* @__PURE__ */ jsx62(Box28, { as: "span", ml: "2", children: item.title })
                   ] }) }),
-                  !!item.children.length && /* @__PURE__ */ jsx61(PopoverBody4, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx61(
+                  !!item.children.length && /* @__PURE__ */ jsx62(PopoverBody4, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx62(
                     NavItem,
                     {
                       "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
@@ -5276,7 +5328,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                     },
                     submenu.id
                   )) })
-                ] }) : isCollapse && /* @__PURE__ */ jsx61(PopoverContent6, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ jsx61(PopoverBody4, { py: "1", px: "0", children: /* @__PURE__ */ jsxs26(
+                ] }) : isCollapse && /* @__PURE__ */ jsx62(PopoverContent6, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ jsx62(PopoverBody4, { py: "1", px: "0", children: /* @__PURE__ */ jsxs26(
                   NavItem,
                   {
                     "data-test-id": `CTA_Sidebar-popover-item-${item.id}`,
@@ -5289,22 +5341,22 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                     rounded: "none",
                     ...itemStyles,
                     children: [
-                      mappingIcon2 && /* @__PURE__ */ jsx61(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
-                      /* @__PURE__ */ jsx61(Box28, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx61(Text16, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
+                      mappingIcon2 && /* @__PURE__ */ jsx62(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
+                      /* @__PURE__ */ jsx62(Box28, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx62(Text16, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
                     ]
                   },
                   item.id
                 ) }) }) })
               ] });
             } }, item.id),
-            !isCollapse && /* @__PURE__ */ jsx61(
+            !isCollapse && /* @__PURE__ */ jsx62(
               Fade,
               {
                 in: true,
                 transition: {
                   enter: { duration: 0.5 }
                 },
-                children: /* @__PURE__ */ jsx61(AccordionPanel2, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx61(
+                children: /* @__PURE__ */ jsx62(AccordionPanel2, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx62(
                   NavItem,
                   {
                     mt: "1",
@@ -5336,7 +5388,7 @@ import { chakra as chakra6, Flex as Flex15, forwardRef as forwardRef11, omitThem
 import { cx as cx10, dataAttr } from "@chakra-ui/shared-utils";
 import { Check as Check2, Close as Close5 } from "@ctlyst.id/internal-icon";
 import { useMemo as useMemo3 } from "react";
-import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs27 } from "react/jsx-runtime";
 var Switch = forwardRef11(function Switch2(props, ref) {
   const styles = useMultiStyleConfig2("Switch", props);
   const { spacing: spacing2 = "0.5rem", children, ...ownProps } = omitThemingProps2(props);
@@ -5388,13 +5440,13 @@ var Switch = forwardRef11(function Switch2(props, ref) {
       className: cx10("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ jsx62("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ jsx63("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
         /* @__PURE__ */ jsxs27(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
           /* @__PURE__ */ jsxs27(Flex15, { gap: 1, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ jsx62(Check2, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx62(Close5, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+            /* @__PURE__ */ jsx63(Check2, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ jsx63(Close5, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx63(
             chakra6.span,
             {
               __css: styles.thumb,
@@ -5404,7 +5456,7 @@ var Switch = forwardRef11(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx62(
+        children && /* @__PURE__ */ jsx63(
           chakra6.span,
           {
             className: "chakra-switch__label",
@@ -5442,13 +5494,13 @@ import {
 
 // src/components/tabs/components/tab.tsx
 import { Button as Button6, Flex as Flex16, forwardRef as forwardRef12, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs28 } from "react/jsx-runtime";
 var Tab = forwardRef12((props, ref) => {
   var _a, _b;
   const tabProps = useTab({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     Button6,
     {
       "data-test-id": props["data-test-id"],
@@ -5533,14 +5585,14 @@ import { marry } from "@zamiru/timescape";
 import {
   useEffect as useEffect2,
   useLayoutEffect,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState4
 } from "react";
 var useTimescape = (options = {}) => {
   var _a;
   const { date, onChangeDate, ...rest } = options;
   const [manager] = useState4(() => new TimescapeManager(date, rest));
-  const onChangeDateRef = useRef3(onChangeDate);
+  const onChangeDateRef = useRef4(onChangeDate);
   useLayoutEffect(() => {
     onChangeDateRef.current = onChangeDate;
   }, [onChangeDate]);
@@ -5604,7 +5656,7 @@ var useTimescape = (options = {}) => {
 };
 
 // src/components/time-input/components/index.tsx
-import { Fragment as Fragment10, jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs29 } from "react/jsx-runtime";
 var timeDigitFormat = (number) => {
   if (number.toString().length === 1) {
     return `0${number}`;
@@ -5629,7 +5681,7 @@ var timeFromString = (timeString) => {
   return new Time(Number(hours), Number(minutes), Number(seconds));
 };
 var InputTimeArea = forwardRef13((props, ref) => {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     Input3,
     {
       _focusWithin: {
@@ -5705,7 +5757,7 @@ var TimeInput2 = forwardRef13(
       };
     };
     const { outlineColor, focusColor } = getProperties();
-    return /* @__PURE__ */ jsx64(Box29, { ...boxProps, ...rootProps, children: /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx65(Box29, { ...boxProps, ...rootProps, children: /* @__PURE__ */ jsx65(
       field_default,
       {
         isError,
@@ -5714,7 +5766,7 @@ var TimeInput2 = forwardRef13(
         errorMessage,
         isDisabled,
         isSuccess,
-        children: /* @__PURE__ */ jsx64(
+        children: /* @__PURE__ */ jsx65(
           Box29,
           {
             transition: "all 0.15s",
@@ -5736,16 +5788,16 @@ var TimeInput2 = forwardRef13(
                 "data-test-id": `CT_Component_TimeInput${name ? `_${name}` : ""}`,
                 children: [
                   /* @__PURE__ */ jsxs29(Flex17, { gap: "1px", width: "100%", alignItems: "center", pl: 2, children: [
-                    /* @__PURE__ */ jsx64(InputTimeArea, { "data-test-id": "start-time", ...hoursProps }),
-                    /* @__PURE__ */ jsx64("span", { children: ":" }),
-                    /* @__PURE__ */ jsx64(InputTimeArea, { "data-test-id": "end-time", ...getInputProps("minutes") }),
+                    /* @__PURE__ */ jsx65(InputTimeArea, { "data-test-id": "start-time", ...hoursProps }),
+                    /* @__PURE__ */ jsx65("span", { children: ":" }),
+                    /* @__PURE__ */ jsx65(InputTimeArea, { "data-test-id": "end-time", ...getInputProps("minutes") }),
                     seconds && /* @__PURE__ */ jsxs29(Fragment10, { children: [
-                      /* @__PURE__ */ jsx64("span", { children: ":" }),
-                      /* @__PURE__ */ jsx64(InputTimeArea, { ...getInputProps("seconds") })
+                      /* @__PURE__ */ jsx65("span", { children: ":" }),
+                      /* @__PURE__ */ jsx65(InputTimeArea, { ...getInputProps("seconds") })
                     ] }),
-                    options.hour12 && /* @__PURE__ */ jsx64(Input3, { p: 0, ...getInputProps("am/pm") })
+                    options.hour12 && /* @__PURE__ */ jsx65(Input3, { p: 0, ...getInputProps("am/pm") })
                   ] }),
-                  /* @__PURE__ */ jsx64(Clock, { color: "neutral.400", size: 4 }),
+                  /* @__PURE__ */ jsx65(Clock, { color: "neutral.400", size: 4 }),
                   addOnRight
                 ]
               }
@@ -5764,9 +5816,9 @@ import { Bounce, toast } from "react-toastify";
 
 // src/components/toast/components/styles.tsx
 import { Global as Global2 } from "@emotion/react";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var Styles2 = () => {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     Global2,
     {
       styles: `
@@ -5801,10 +5853,10 @@ var Styles2 = () => {
 var styles_default2 = Styles2;
 
 // src/components/toast/components/toast.tsx
-import { Fragment as Fragment11, jsx as jsx66, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx67, jsxs as jsxs30 } from "react/jsx-runtime";
 var CustomCloseButton = (props) => {
   const { closeToast } = props;
-  return /* @__PURE__ */ jsx66(Box30, { p: 2, mb: 1, alignItems: "center", display: "flex", "data-test-id": "", cursor: "pointer", onClick: () => closeToast(), children: /* @__PURE__ */ jsx66(Close6, { size: 4, color: "white" }) });
+  return /* @__PURE__ */ jsx67(Box30, { p: 2, mb: 1, alignItems: "center", display: "flex", "data-test-id": "", cursor: "pointer", onClick: () => closeToast(), children: /* @__PURE__ */ jsx67(Close6, { size: 4, color: "white" }) });
 };
 var DEFAULT_OPTIONS = {
   position: "top-right",
@@ -5837,13 +5889,13 @@ var useToast = () => {
   ]);
   const content = (icon, message, link) => {
     return /* @__PURE__ */ jsxs30(Fragment11, { children: [
-      /* @__PURE__ */ jsx66(styles_default2, {}),
+      /* @__PURE__ */ jsx67(styles_default2, {}),
       /* @__PURE__ */ jsxs30(Flex18, { justifyContent: "space-between", alignItems: "center", gap: 4, mb: 1, flex: 1, children: [
         /* @__PURE__ */ jsxs30(Flex18, { alignItems: "center", children: [
-          icon && /* @__PURE__ */ jsx66(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
-          /* @__PURE__ */ jsx66(chakra7.span, { noOfLines: 2, children: message })
+          icon && /* @__PURE__ */ jsx67(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
+          /* @__PURE__ */ jsx67(chakra7.span, { noOfLines: 2, children: message })
         ] }),
-        link && /* @__PURE__ */ jsx66(
+        link && /* @__PURE__ */ jsx67(
           Link6,
           {
             as: link.as,
@@ -6025,7 +6077,7 @@ var defaultOnHandleRejections = (fileRejection, config2, handleRejection) => {
 };
 
 // src/components/uploader/components/uploader.tsx
-import { Fragment as Fragment12, jsx as jsx67, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx68, jsxs as jsxs31 } from "react/jsx-runtime";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -6158,20 +6210,20 @@ var Uploader = ({
   });
   const renderHelperText = () => {
     if (Array.isArray(helperText)) {
-      return /* @__PURE__ */ jsx67(
+      return /* @__PURE__ */ jsx68(
         UnorderedList2,
         {
           pl: 2,
           fontSize: 12,
           color: "black.medium",
           "data-test-id": "CT_component_base-image-uploader_helperText",
-          children: helperText.map((text2) => /* @__PURE__ */ jsx67(ListItem2, { children: text2 }, text2))
+          children: helperText.map((text2) => /* @__PURE__ */ jsx68(ListItem2, { children: text2 }, text2))
         }
       );
     }
     return helperText;
   };
-  const renderErrorText = (text2) => /* @__PURE__ */ jsx67(Box31, { mb: 2, children: /* @__PURE__ */ jsx67(Text18, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
+  const renderErrorText = (text2) => /* @__PURE__ */ jsx68(Box31, { mb: 2, children: /* @__PURE__ */ jsx68(Text18, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
   const handleRemove = (e) => {
     e.stopPropagation();
     setFilePreview(void 0);
@@ -6205,8 +6257,8 @@ var Uploader = ({
   return /* @__PURE__ */ jsxs31(FormControl4, { isRequired, children: [
     label && typeof label === "string" ? (
       // eslint-disable-next-line react/jsx-no-useless-fragment
-      /* @__PURE__ */ jsxs31(FormLabel3, { requiredIndicator: /* @__PURE__ */ jsx67(Fragment12, {}), fontSize: "text.sm", children: [
-        isRequired && /* @__PURE__ */ jsx67(RequiredIndicator2, { mr: 1, ml: 0 }),
+      /* @__PURE__ */ jsxs31(FormLabel3, { requiredIndicator: /* @__PURE__ */ jsx68(Fragment12, {}), fontSize: "text.sm", children: [
+        isRequired && /* @__PURE__ */ jsx68(RequiredIndicator2, { mr: 1, ml: 0 }),
         label
       ] })
     ) : label,
@@ -6228,7 +6280,7 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          filePreview && isShowCloseButton && /* @__PURE__ */ jsx67(Box31, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ jsx67(
+          filePreview && isShowCloseButton && /* @__PURE__ */ jsx68(Box31, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ jsx68(
             Button7,
             {
               "data-test-id": `CT_component_base-image-uploader_remove-image${testId ? `_${testId}` : ""}`,
@@ -6243,17 +6295,17 @@ var Uploader = ({
               border: "none",
               zIndex: 1,
               onClick: handleRemove,
-              children: /* @__PURE__ */ jsx67(X, { size: 3, color: "white" })
+              children: /* @__PURE__ */ jsx68(X, { size: 3, color: "white" })
             }
           ) }),
-          filePreview && /* @__PURE__ */ jsx67(Box31, { w: "full", children: /* @__PURE__ */ jsx67(
+          filePreview && /* @__PURE__ */ jsx68(Box31, { w: "full", children: /* @__PURE__ */ jsx68(
             Flex19,
             {
               position: "relative",
               "data-test-id": `CT_component_base-image-uploader_image-preview${testId ? `_${testId}` : ""}`,
               justify: "center",
               align: "center",
-              children: filePreview.includes("blob") && acceptFile.some(([type]) => typeof type === "string" && type.includes("image/")) ? /* @__PURE__ */ jsx67(
+              children: filePreview.includes("blob") && acceptFile.some(([type]) => typeof type === "string" && type.includes("image/")) ? /* @__PURE__ */ jsx68(
                 ChakraImage,
                 {
                   h: size2 === "lg" ? "120" : "100",
@@ -6261,13 +6313,13 @@ var Uploader = ({
                   alt: "uploader-preview",
                   objectFit: "contain"
                 }
-              ) : /* @__PURE__ */ jsx67(Text18, { noOfLines: 3, mx: 2, textAlign: "center", children: filePreview })
+              ) : /* @__PURE__ */ jsx68(Text18, { noOfLines: 3, mx: 2, textAlign: "center", children: filePreview })
             }
           ) }),
-          !filePreview && /* @__PURE__ */ jsx67(Fragment12, { children: isDragActive ? /* @__PURE__ */ jsx67(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs31(Flex19, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
-            size2 === "sm" && /* @__PURE__ */ jsx67(Plus, { size: 6, color }),
+          !filePreview && /* @__PURE__ */ jsx68(Fragment12, { children: isDragActive ? /* @__PURE__ */ jsx68(Text18, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs31(Flex19, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
+            size2 === "sm" && /* @__PURE__ */ jsx68(Plus, { size: 6, color }),
             /* @__PURE__ */ jsxs31(Box31, { children: [
-              !filePreview && /* @__PURE__ */ jsx67(
+              !filePreview && /* @__PURE__ */ jsx68(
                 Heading2,
                 {
                   fontWeight: "400",
@@ -6277,20 +6329,20 @@ var Uploader = ({
                   children: uploadFileText && size2 === "lg" ? uploadFileText : "Upload"
                 }
               ),
-              size2 === "lg" && /* @__PURE__ */ jsx67(Text18, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
+              size2 === "lg" && /* @__PURE__ */ jsx68(Text18, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
             ] })
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx68(
       "input",
       {
         ...getInputProps(),
         "data-test-id": `CT_component_base-image-uploader_change-img${testId ? `_${testId}` : ""}`
       }
     ),
-    filePreview && !isSmall && /* @__PURE__ */ jsx67(Flex19, { align: "center", justify: "center", my: 2, children: isShowReupload && /* @__PURE__ */ jsx67(
+    filePreview && !isSmall && /* @__PURE__ */ jsx68(Flex19, { align: "center", justify: "center", my: 2, children: isShowReupload && /* @__PURE__ */ jsx68(
       Button7,
       {
         "data-test-id": `CT_component_base-image-uploader_change-img-btn${testId ? `_${testId}` : ""}`,
@@ -7671,7 +7723,7 @@ var baseStyle11 = definePartsStyle10({
   th: {
     fontFamily: "heading",
     fontWeight: "semibold",
-    textTransform: "uppercase",
+    textTransform: "capitalize",
     letterSpacing: "normal",
     textAlign: "start",
     height: "50px",
@@ -8031,9 +8083,9 @@ import { useMemo as useMemo5 } from "react";
 
 // src/provider/components/provider.tsx
 import axios from "axios";
-import { createContext as createContext2, useContext, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4 } from "react";
+import { createContext as createContext2, useContext, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef5 } from "react";
 import { ToastContainer as ToastContainer2 } from "react-toastify";
-import { jsx as jsx68, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs32 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
   instance: void 0
 });
@@ -8042,7 +8094,7 @@ var useInternalUI = () => {
   return { instance };
 };
 var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
-  const instanceRef = useRef4(axios.create(config2));
+  const instanceRef = useRef5(axios.create(config2));
   useEffect5(() => {
     requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
       instanceRef.current.interceptors.request.use(interceptor);
@@ -8053,7 +8105,7 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo4(() => ({ instance: instanceRef.current }), []);
   return /* @__PURE__ */ jsxs32(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx68(ToastContainer2, {}),
+    /* @__PURE__ */ jsx69(ToastContainer2, {}),
     children
   ] });
 };