@ctlyst.id/internal-ui 3.1.6 → 3.1.8

package/dist/index.mjs

@@ -926,25 +926,18 @@ 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) {
+    return row.disabled[cellId];
+  }
+  return false;
+};
 var getCommonPinningStyles = (column) => {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
@@ -1076,148 +1069,145 @@ var useDataTable = ({
     generateColumn
   };
 };
-var DataTable = React5.forwardRef(
-  (props, ref) => {
-    const { isLoading, styles, headerSticky, onRowClick, container } = props;
-    const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
-    React5.useImperativeHandle(ref, () => ({
-      toggleAllRowsSelected
-    }));
-    return /* @__PURE__ */ jsx24(Box11, { overflowX: "auto", position: "relative", maxW: "100%", w: "full", ...container, children: isLoading ? /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
-      /* @__PURE__ */ jsx24(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx24(
-        Th,
-        {
-          colSpan: header.colSpan,
-          width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
-          ...styles == null ? void 0 : styles.tableColumnHeader,
-          children: /* @__PURE__ */ jsx24(
-            Flex2,
+var DataTable = React5.forwardRef((props, ref) => {
+  const { isLoading, styles, headerSticky, onRowClick, container } = props;
+  const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
+  React5.useImperativeHandle(ref, () => ({
+    toggleAllRowsSelected
+  }));
+  return /* @__PURE__ */ jsx24(Box11, { overflowX: "auto", position: "relative", maxW: "100%", w: "full", ...container, children: isLoading ? /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
+    /* @__PURE__ */ jsx24(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx24(
+      Th,
+      {
+        colSpan: header.colSpan,
+        width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
+        ...styles == null ? void 0 : styles.tableColumnHeader,
+        children: /* @__PURE__ */ jsx24(
+          Flex2,
+          {
+            "data-test-id": "CT_component_data-table_loader",
+            textTransform: "capitalize",
+            align: "center",
+            gap: 2,
+            children: flexRender(header.column.columnDef.header, header.getContext())
+          }
+        )
+      },
+      header.id
+    )) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx24(Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ jsx24(Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx24(Td, { width: 210, children: /* @__PURE__ */ jsx24(Skeleton2, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i) }, i)) }, num)) })
+  ] }) : /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, children: [
+    /* @__PURE__ */ jsx24(
+      Thead,
+      {
+        maxH: "50px",
+        ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}),
+        children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { bg: useColorModeValue("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
+          var _a;
+          return /* @__PURE__ */ jsx24(
+            Th,
             {
-              "data-test-id": "CT_component_data-table_loader",
-              textTransform: "capitalize",
-              align: "center",
-              gap: 2,
-              children: flexRender(header.column.columnDef.header, header.getContext())
-            }
-          )
-        },
-        header.id
-      )) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx24(Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ jsx24(Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx24(Td, { width: 210, children: /* @__PURE__ */ jsx24(Skeleton2, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i) }, i)) }, num)) })
-    ] }) : /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, children: [
-      /* @__PURE__ */ jsx24(
-        Thead,
+              colSpan: header.colSpan,
+              sx: getCommonPinningStyles(header.column),
+              width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
+              ...styles == null ? void 0 : styles.tableColumnHeader,
+              children: /* @__PURE__ */ jsxs8(
+                Flex2,
+                {
+                  backgroundColor: "white",
+                  height: "100%",
+                  "data-test-id": `CT_Container_TableHeader_${header.id}`,
+                  textTransform: "capitalize",
+                  userSelect: "none",
+                  align: "center",
+                  gap: 2,
+                  children: [
+                    flexRender(header.column.columnDef.header, header.getContext()),
+                    /* @__PURE__ */ jsx24(
+                      Box11,
+                      {
+                        as: "span",
+                        cursor: header.column.getCanSort() ? "pointer" : "default",
+                        "data-test-id": `CT_Container_SortingIcon_${header.id}`,
+                        onClick: header.column.getToggleSortingHandler(),
+                        children: (_a = header.column.getCanSort() && {
+                          asc: /* @__PURE__ */ jsx24(ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
+                          desc: /* @__PURE__ */ jsx24(ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
+                        }[header.column.getIsSorted()]) != null ? _a : /* @__PURE__ */ jsx24(Box11, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ jsx24(UpDownIcon, { color: "neutral.500" }) })
+                      }
+                    )
+                  ]
+                }
+              )
+            },
+            header.id
+          );
+        }) }, headerGroup.id))
+      }
+    ),
+    /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
+      const trRef = useRef();
+      return /* @__PURE__ */ jsx24(
+        Tr,
         {
-          maxH: "50px",
-          ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}),
-          children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { bg: useColorModeValue("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
+          "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
+          tabindex: "0",
+          ref: trRef,
+          ...styles == null ? void 0 : styles.tableRow,
+          css: css`
+                    &:last-child {
+                      td {
+                        border-bottom: none;
+                      }
+                    }
+                  `,
+          onMouseDown: () => {
             var _a;
+            (_a = trRef.current) == null ? void 0 : _a.setAttribute("data-active", "true");
+          },
+          onMouseUp: () => {
+            var _a;
+            (_a = trRef.current) == null ? void 0 : _a.removeAttribute("data-active");
+          },
+          onClick: () => {
+            if (onRowClick) {
+              onRowClick(row.original);
+            }
+          },
+          children: row.getVisibleCells().map((cell) => {
+            const isDisabled = isCellDisabled(row.original, cell.column.id);
             return /* @__PURE__ */ jsx24(
-              Th,
+              Td,
               {
-                colSpan: header.colSpan,
-                sx: getCommonPinningStyles(header.column),
-                width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
-                ...styles == null ? void 0 : styles.tableColumnHeader,
-                children: /* @__PURE__ */ jsxs8(
+                "data-test-id": `CT_Component_TableCell_${cell.id}`,
+                fontSize: "text.sm",
+                sx: getCommonPinningStyles(cell.column),
+                ...styles == null ? void 0 : styles.tableCell,
+                children: /* @__PURE__ */ jsx24(Flex2, { height: "100%", align: "center", opacity: isDisabled ? 0.5 : 1, children: /* @__PURE__ */ jsx24(
                   Flex2,
                   {
-                    backgroundColor: "white",
-                    height: "100%",
-                    "data-test-id": `CT_Container_TableHeader_${header.id}`,
-                    textTransform: "capitalize",
-                    userSelect: "none",
-                    align: "center",
-                    gap: 2,
-                    children: [
-                      /* @__PURE__ */ jsx24(Text4, { children: flexRender(header.column.columnDef.header, header.getContext()) }),
-                      /* @__PURE__ */ jsx24(
-                        Box11,
-                        {
-                          as: "span",
-                          cursor: header.column.getCanSort() ? "pointer" : "default",
-                          "data-test-id": `CT_Container_SortingIcon_${header.id}`,
-                          onClick: header.column.getToggleSortingHandler(),
-                          children: (_a = header.column.getCanSort() && {
-                            asc: /* @__PURE__ */ jsx24(ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
-                            desc: /* @__PURE__ */ jsx24(ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
-                          }[header.column.getIsSorted()]) != null ? _a : /* @__PURE__ */ jsx24(Box11, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ jsx24(UpDownIcon, { color: "neutral.500" }) })
-                        }
-                      )
-                    ]
+                    tabIndex: 0,
+                    display: "inline-flex",
+                    cursor: "auto",
+                    "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
+                    onMouseUp: (e) => e.stopPropagation(),
+                    onMouseDown: (e) => e.stopPropagation(),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    },
+                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
                   }
-                )
+                ) })
               },
-              header.id
+              cell.id
             );
-          }) }, headerGroup.id))
-        }
-      ),
-      /* @__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 {
-                        td {
-                          border-bottom: none;
-                        }
-                      }
-                    `,
-            onMouseDown: () => {
-              var _a;
-              (_a = trRef.current) == null ? void 0 : _a.setAttribute("data-active", "true");
-            },
-            onMouseUp: () => {
-              var _a;
-              (_a = trRef.current) == null ? void 0 : _a.removeAttribute("data-active");
-            },
-            onClick: () => {
-              if (onRowClick) {
-                onRowClick(row.original);
-              }
-            },
-            children: row.getVisibleCells().map((cell) => {
-              var _a, _b;
-              const isDisabled = (_b = (_a = cell.row.original) == null ? void 0 : _a.disabled) == null ? void 0 : _b[cell.column.id];
-              return /* @__PURE__ */ jsx24(
-                Td,
-                {
-                  "data-test-id": `CT_Component_TableCell_${cell.id}`,
-                  fontSize: "text.sm",
-                  sx: getCommonPinningStyles(cell.column),
-                  ...styles == null ? void 0 : styles.tableCell,
-                  children: /* @__PURE__ */ jsx24(Flex2, { height: "100%", align: "center", opacity: isDisabled ? 0.5 : 1, children: /* @__PURE__ */ jsx24(
-                    Flex2,
-                    {
-                      tabIndex: 0,
-                      display: "inline-flex",
-                      cursor: "auto",
-                      "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
-                      onMouseUp: (e) => e.stopPropagation(),
-                      onMouseDown: (e) => e.stopPropagation(),
-                      onClick: (e) => {
-                        e.stopPropagation();
-                      },
-                      children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                    }
-                  ) })
-                },
-                cell.id
-              );
-            })
-          },
-          row.id
-        );
-      }) })
-    ] }) });
-  }
-);
+          })
+        },
+        row.id
+      );
+    }) })
+  ] }) });
+});
 var data_table_default = DataTable;
 
 // src/components/datepicker/components/datepicker.tsx
@@ -2087,7 +2077,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 }) => {
@@ -2098,7 +2088,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,
@@ -2339,7 +2329,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,
@@ -2353,7 +2343,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 })
     ] })
@@ -2370,7 +2360,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;
@@ -2382,8 +2372,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 }) })
   ] }) });
@@ -2503,7 +2493,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";
@@ -2635,10 +2625,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,
                   {
@@ -2651,7 +2641,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,
                   {
@@ -2659,8 +2649,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",
@@ -2688,7 +2678,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 }) }) })
@@ -2699,7 +2689,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" })
       ] }) }) })
     ] })
   ] });
@@ -2983,7 +2973,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";
@@ -3088,7 +3078,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,
                             {
@@ -3123,7 +3113,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 = ({
@@ -3194,7 +3184,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
@@ -3211,7 +3201,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";
@@ -3342,7 +3332,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
         );
@@ -3380,7 +3370,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,
@@ -3391,12 +3381,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";
@@ -3409,7 +3399,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,
       {
@@ -3490,13 +3480,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";
@@ -4011,7 +4001,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";
@@ -4092,7 +4082,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 })
             ]
           }
         )
@@ -4179,7 +4169,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";
@@ -4217,7 +4207,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",
@@ -4255,7 +4245,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";
@@ -4306,7 +4296,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,
                               {
@@ -4362,7 +4352,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
@@ -4581,7 +4571,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";
@@ -4750,7 +4740,7 @@ 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";
@@ -4877,7 +4867,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);
@@ -4970,7 +4960,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(
@@ -4983,7 +4973,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 })
               ] })
             ] })
           ] })
@@ -7041,7 +7031,7 @@ export {
   TabsProvider,
   Tbody2 as Tbody,
   Td2 as Td,
-  Text18 as Text,
+  Text17 as Text,
   TextProps,
   textarea_default as TextareaField,
   Th2 as Th,
@@ -7095,7 +7085,10 @@ export {
   forwardRef12 as forwardRef,
   getSelectAllCheckboxState,
   getTheme,
+  isCellDisabled,
+  selectStyles,
   theme4 as theme,
+  themeSelect,
   useAccordion,
   useAccordionContext,
   useAccordionItem,