@ctlyst.id/internal-ui 3.1.5 → 3.1.7

package/dist/index.mjs

@@ -945,6 +945,12 @@ import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@
 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,141 +1082,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%", minH: 400, 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: "gray.50", endColor: "gray.100", h: "30px", w: "100%" }, i) }, i)) }, num)) })
-    ] }) : /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, 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, { bg: useColorModeValue("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
-        var _a;
-        return /* @__PURE__ */ jsx24(
-          Th,
-          {
-            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: [
-                  /* @__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(UpDownIcon, { h: 4, w: 4, 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,
+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": "-RU0hNYGRzeVM3HQ4cXHl",
-            tabindex: "0",
-            ref: trRef,
-            ...styles == null ? void 0 : styles.tableRow,
-            css: css`
-                      &:last-child {
-                        td {
-                          border-bottom: none;
-                        }
+            "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,
+            {
+              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: [
+                    /* @__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" }) })
                       }
-                    `,
-            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())
+            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,
+        {
+          "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
+          tabindex: "0",
+          ref: trRef,
+          ...styles == null ? void 0 : styles.tableRow,
+          css: css`
+                    &:last-child {
+                      td {
+                        border-bottom: none;
+                      }
                     }
-                  ) })
-                },
-                cell.id
-              );
-            })
+                  `,
+          onMouseDown: () => {
+            var _a;
+            (_a = trRef.current) == null ? void 0 : _a.setAttribute("data-active", "true");
           },
-          row.id
-        );
-      }) })
-    ] }) });
-  }
-);
+          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(
+              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
+      );
+    }) })
+  ] }) });
+});
 var data_table_default = DataTable;
 
 // src/components/datepicker/components/datepicker.tsx
@@ -2557,36 +2567,45 @@ import {
   Portal,
   Tooltip as ChakraTooltip
 } from "@chakra-ui/react";
-import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
 var Tooltip = (props) => {
-  const { children, bg = "neutral.700", textStyle = "text.sm", color = "white", width, rounded = 4 } = props;
-  const content = /* @__PURE__ */ jsxs14(
+  const {
+    children,
+    bg = "neutral.700",
+    textStyle = "text.sm",
+    color = "white",
+    width,
+    borderRadius = 4,
+    fontWeight = "400"
+  } = props;
+  const content = ({ onClose }) => /* @__PURE__ */ jsxs14(
     PopoverContent,
     {
       "data-test-id": "",
       border: "none",
       bg,
-      rounded,
-      ml: 1,
       textStyle,
       width,
       placeItems: "center",
-      borderRadius: props.borderRadius,
-      onClick: (e) => e.stopPropagation(),
+      borderRadius,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
       children: [
         props.hasArrow && /* @__PURE__ */ jsx35(PopoverArrow, { color, bg, shadow: "none" }),
-        /* @__PURE__ */ jsx35(PopoverBody, { color, ...props, children: props.label })
+        /* @__PURE__ */ jsx35(PopoverBody, { color, ...props, fontWeight, children: props.label })
       ]
     }
   );
-  return props.isInteractive === true ? /* @__PURE__ */ jsxs14(Popover, { trigger: "hover", placement: props.placement, ...props.popoverProps, children: [
+  return props.isInteractive === true ? /* @__PURE__ */ jsx35(Popover, { trigger: "hover", placement: props.placement, ...props.popoverProps, children: ({ onClose }) => /* @__PURE__ */ jsxs14(Fragment3, { children: [
     /* @__PURE__ */ jsx35(PopoverTrigger, { children }),
-    props.portal ? /* @__PURE__ */ jsx35(Portal, { children: content }) : content
-  ] }) : /* @__PURE__ */ jsx35(ChakraTooltip, { ...props, children });
+    props.portal ? /* @__PURE__ */ jsx35(Portal, { children: content({ onClose }) }) : content({ onClose })
+  ] }) }) : /* @__PURE__ */ jsx35(ChakraTooltip, { ...props, children });
 };
 
 // src/components/header/components/profile.tsx
-import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
 var Profile = ({
   color,
   brandColor,
@@ -2621,7 +2640,7 @@ var Profile = ({
           /* @__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__ */ jsxs15(Flex5, { alignItems: "center", children: [
-              (data == null ? void 0 : data.userRole) && /* @__PURE__ */ jsxs15(Fragment3, { 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" }),
                 !!((_a = data.office) == null ? void 0 : _a.length) && /* @__PURE__ */ jsx36(
                   Box16,
@@ -2648,18 +2667,19 @@ var Profile = ({
                     ] }),
                     textAlign: "left",
                     placement: "bottom-end",
+                    cursor: "text",
+                    portal: true,
                     popoverProps: {
                       offset: [10, 8]
                     },
                     width: 300,
                     ...officeContainer,
-                    children: /* @__PURE__ */ jsx36(Box16, { display: "flex", children: /* @__PURE__ */ jsxs15(
+                    children: /* @__PURE__ */ jsx36(Box16, { ml: 1, children: /* @__PURE__ */ jsxs15(
                       badge_default,
                       {
-                        ml: "1",
-                        pill: true,
+                        rounded: "full",
                         variant: "neutral-light",
-                        boxSize: "4.5",
+                        boxSize: "5",
                         justifyContent: "center",
                         p: "0.5",
                         ...badgeStyle,
@@ -2720,14 +2740,14 @@ function environmentName(env) {
 }
 
 // src/components/header/components/version.tsx
-import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var Version = ({
   hideEnv,
   version,
   environment,
   onOpenModalRelease,
   versionStyle
-}) => /* @__PURE__ */ jsxs16(Fragment4, { children: [
+}) => /* @__PURE__ */ jsxs16(Fragment5, { children: [
   typeof version === "string" ? /* @__PURE__ */ jsx38(
     badge_default,
     {
@@ -2991,7 +3011,7 @@ var mappingIcon = /* @__PURE__ */ new Map([
 ]);
 
 // src/components/navigation/components/navigation.tsx
-import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
 var Navigation = ({ navigations, activePath, as, host, ...props }) => {
   return /* @__PURE__ */ jsx43(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx43(
     Flex9,
@@ -3008,7 +3028,7 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
       children: navigations == null ? void 0 : navigations.map((navigation) => {
         const isActive = activePath.startsWith(navigation.navLink || "");
         const activeBg = isActive ? "primary.500" : void 0;
-        return /* @__PURE__ */ jsx43(Popover3, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
+        return /* @__PURE__ */ jsx43(Popover3, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs18(Fragment6, { children: [
           /* @__PURE__ */ jsx43(PopoverTrigger3, { children: /* @__PURE__ */ jsx43(
             Button3,
             {
@@ -3108,7 +3128,7 @@ 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 * as Icon6 from "@ctlyst.id/internal-icon";
-import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
 var NavigationBar = ({
   navigations,
   isFetched,
@@ -3140,7 +3160,7 @@ var NavigationBar = ({
         const childMenu = item.children.filter((subMenu) => asPath == null ? void 0 : asPath.includes(subMenu.navLink));
         const isActive = pathname == null ? void 0 : pathname.startsWith((_a = childMenu[0]) == null ? void 0 : _a.navLink);
         const activeBg = isActive ? "primary.500" : void 0;
-        return /* @__PURE__ */ jsx44(Popover4, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs19(Fragment6, { children: [
+        return /* @__PURE__ */ jsx44(Popover4, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs19(Fragment7, { children: [
           /* @__PURE__ */ jsx44(PopoverTrigger4, { children: /* @__PURE__ */ jsx44(
             Button4,
             {
@@ -3530,8 +3550,10 @@ var Rating = ({ value }) => {
 var rating_default = Rating;
 
 // src/components/select/components/select.tsx
+import { Badge as Badge2, Flex as Flex11 } from "@chakra-ui/react";
 import { useColorMode as useColorMode3 } from "@chakra-ui/system";
-import ReactSelect from "react-select";
+import * as Icon7 from "@ctlyst.id/internal-icon";
+import ReactSelect, { components as componentRS } from "react-select";
 
 // src/config/theme/foundations/shadows.ts
 import { theme } from "@chakra-ui/react";
@@ -3838,10 +3860,10 @@ function selectStyles(colorMode, _isError) {
       return { ...base, ...selectStyle };
     },
     dropdownIndicator: (base) => {
-      return { ...base, ...selectStyle };
+      return { ...base, ...selectStyle, color: "var(--chakra-colors-neutral-400)" };
     },
     indicatorSeparator: (base) => {
-      return { ...base, ...selectStyle };
+      return { ...base, background: "var(--chakra-colors-neutral-400)", borderRadius: 10 };
     },
     placeholder: (base) => {
       return { ...base, ...selectStyle, color: "var(--chakra-colors-black-low)" };
@@ -3856,13 +3878,15 @@ function selectStyles(colorMode, _isError) {
     multiValueLabel: (base) => ({
       ...base,
       borderRadius: 4,
-      fontWeight: "bold"
+      fontWeight: "bold",
+      padding: 0,
+      paddingLeft: 0
     }),
     multiValueRemove: (base) => ({
       ...base,
       color: "var(--chakra-colors-neutral-900)",
       ":hover": {
-        backgroundColor: "var(--chakra-colors-neutral-300)"
+        backgroundColor: "transparent"
       }
     })
   };
@@ -3882,19 +3906,40 @@ var themeSelect = (theme5) => {
 
 // src/components/select/components/select.tsx
 import { jsx as jsx53 } from "react/jsx-runtime";
+function DropdownIndicator(props) {
+  return /* @__PURE__ */ jsx53(componentRS.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx53(Icon7.ChevronDown, { size: 4, color: "neutral.400" }) });
+}
+function ClearIndicator(props) {
+  const { hasValue } = props;
+  return /* @__PURE__ */ jsx53(componentRS.ClearIndicator, { ...props, children: /* @__PURE__ */ jsx53(Icon7.Close, { size: 4, color: hasValue ? "black.medium" : "neutral.400" }) });
+}
+function MultiValue(props) {
+  return /* @__PURE__ */ jsx53(componentRS.MultiValue, { ...props, children: /* @__PURE__ */ jsx53(Badge2, { pr: 0, variant: "neutral-light", children: props == null ? void 0 : props.data.label }) });
+}
+function MultiValueRemove(props) {
+  return /* @__PURE__ */ jsx53(componentRS.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx53(Flex11, { align: "center", justify: "center", children: /* @__PURE__ */ jsx53(Icon7.Close, { size: 2.5, color: "inherit" }) }) });
+}
 function Select2({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode3();
+  const { components } = rest;
   return /* @__PURE__ */ jsx53(
     ReactSelect,
     {
       classNamePrefix: "react-select",
-      ...rest,
+      components: {
+        DropdownIndicator,
+        ClearIndicator,
+        MultiValue,
+        MultiValueRemove,
+        ...components
+      },
       styles: { ...selectStyles(colorMode, isError) },
-      theme: themeSelect
+      theme: themeSelect,
+      ...rest
     }
   );
 }
@@ -3914,6 +3959,10 @@ function SelectAsync({
     AsyncPaginate,
     {
       classNamePrefix: "react-select",
+      components: {
+        DropdownIndicator,
+        ClearIndicator
+      },
       ...rest,
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
@@ -3932,6 +3981,10 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
     ReactSelectAsyncCreatable,
     {
       classNamePrefix: "react-select",
+      components: {
+        DropdownIndicator,
+        ClearIndicator
+      },
       ...rest,
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
@@ -3949,6 +4002,10 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
     ReactSelectCreatable,
     {
       classNamePrefix: "react-select",
+      components: {
+        DropdownIndicator,
+        ClearIndicator
+      },
       ...rest,
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
@@ -3957,10 +4014,10 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 }
 
 // src/components/select/components/select-with-checkbox.tsx
-import { Checkbox as Checkbox3, Flex as Flex11, Text as Text15 } from "@chakra-ui/react";
+import { Checkbox as Checkbox3, Flex as Flex12, Text as Text15 } from "@chakra-ui/react";
 import { useColorMode as useColorMode7 } from "@chakra-ui/system";
 import ReactSelect2, { components as ComponentRS } from "react-select";
-import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs24 } from "react/jsx-runtime";
 var CHECKBOX_STATE = {
   UNCHECKED: 0,
   INDETERMINATE: 1,
@@ -4007,7 +4064,7 @@ var InputOption = ({
     onClick: isDisabled ? void 0 : innerProps.onClick,
     style
   };
-  return /* @__PURE__ */ jsxs24(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment8, { children: [
     /* @__PURE__ */ jsx57(
       ComponentRS.Option,
       {
@@ -4020,7 +4077,7 @@ var InputOption = ({
         innerProps: props,
         ...rest,
         children: /* @__PURE__ */ jsxs24(
-          Flex11,
+          Flex12,
           {
             alignItems: "center",
             width: "100%",
@@ -4071,7 +4128,7 @@ var SelectWithCheckboxBase = ({
   );
 };
 var SelectCheckbox = (props) => {
-  const { isMulti, options, value, ...rest } = props;
+  const { isMulti, options, value, components, ...rest } = props;
   const selectValue = value || [];
   return /* @__PURE__ */ jsx57(
     SelectWithCheckboxBase,
@@ -4079,6 +4136,11 @@ var SelectCheckbox = (props) => {
       isMulti,
       options,
       components: {
+        DropdownIndicator,
+        ClearIndicator,
+        MultiValue,
+        MultiValueRemove,
+        ...components,
         Option: (optionProps) => {
           const { isSelected, data } = optionProps;
           const optionLength = (options == null ? void 0 : options.length) ? options.length - 1 : 0;
@@ -4094,13 +4156,13 @@ var SelectCheckbox = (props) => {
 var select_with_checkbox_default = SelectCheckbox;
 
 // src/components/sidebar/components/sidebar.tsx
-import { Flex as Flex12 } from "@chakra-ui/react";
+import { Flex as Flex13 } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var Sidebar = ({ isCollapse, children, ...props }) => {
   const { width = "220px" } = props;
   return /* @__PURE__ */ jsx58(
-    Flex12,
+    Flex13,
     {
       position: "relative",
       as: motion.div,
@@ -4120,7 +4182,7 @@ var Sidebar = ({ isCollapse, children, ...props }) => {
 Sidebar.displayName = "Sidebar";
 
 // src/components/sidebar/components/sidebar-header.tsx
-import { Box as Box27, Flex as Flex13, Text as Text16 } from "@chakra-ui/react";
+import { Box as Box27, Flex as Flex14, Text as Text16 } 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";
@@ -4136,7 +4198,7 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
         color: "primary.500"
       },
       children: /* @__PURE__ */ jsxs25(
-        Flex13,
+        Flex14,
         {
           "data-test-id": "nLkz69YipW818FioeAxVI",
           direction: "row",
@@ -4198,9 +4260,9 @@ import {
   Portal as Portal4,
   Text as Text17
 } from "@chakra-ui/react";
-import * as Icon7 from "@ctlyst.id/internal-icon";
+import * as Icon8 from "@ctlyst.id/internal-icon";
 import { motion as motion3 } from "framer-motion";
-import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx60, jsxs as jsxs26 } from "react/jsx-runtime";
 var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, setActive, active }) => {
   return /* @__PURE__ */ jsx60(Box28, { as: motion3.div, animate: { padding: isCollapse ? "8px 16px" : "8px" }, children: /* @__PURE__ */ jsx60(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);
@@ -4208,12 +4270,12 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
       const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
       const noChild = !item.children.length;
       const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
-      return /* @__PURE__ */ jsxs26(Fragment8, { children: [
+      return /* @__PURE__ */ jsxs26(Fragment9, { children: [
         /* @__PURE__ */ jsx60(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(Fragment8, { children: [
+          return /* @__PURE__ */ jsxs26(Fragment9, { children: [
             /* @__PURE__ */ jsx60(PopoverTrigger6, { children: /* @__PURE__ */ jsx60(
               AccordionButton2,
               {
@@ -4255,7 +4317,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                                 boxSize: "3",
                                 as: motion3.div,
                                 animate: { transform: isExpanded ? "rotate(-180deg)" : "rotate(0)" },
-                                children: /* @__PURE__ */ jsx60(Icon7.ChevronDown, { size: 3 })
+                                children: /* @__PURE__ */ jsx60(Icon8.ChevronDown, { size: 3 })
                               }
                             )
                           ]
@@ -4334,9 +4396,9 @@ SidebarMenu.defaultProps = {
 };
 
 // src/components/switch/components/switch.tsx
-import { chakra as chakra6, Flex as Flex14, forwardRef as forwardRef10, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox3, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
+import { chakra as chakra6, Flex as Flex15, forwardRef as forwardRef10, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox3, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
 import { cx as cx10, dataAttr } from "@chakra-ui/shared-utils";
-import { Check as Check2, Close as Close4 } from "@ctlyst.id/internal-icon";
+import { Check as Check2, Close as Close5 } from "@ctlyst.id/internal-icon";
 import { useMemo as useMemo3 } from "react";
 import { jsx as jsx61, jsxs as jsxs27 } from "react/jsx-runtime";
 var Switch = forwardRef10(function Switch2(props, ref) {
@@ -4392,9 +4454,9 @@ var Switch = forwardRef10(function Switch2(props, ref) {
       children: [
         /* @__PURE__ */ jsx61("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(Flex14, { gap: 1, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
+          /* @__PURE__ */ jsxs27(Flex15, { gap: 1, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
             /* @__PURE__ */ jsx61(Check2, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx61(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+            /* @__PURE__ */ jsx61(Close5, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
           /* @__PURE__ */ jsx61(
             chakra6.span,
@@ -4443,7 +4505,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/tabs/components/tab.tsx
-import { Button as Button6, Flex as Flex15, forwardRef as forwardRef11, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
+import { Button as Button6, Flex as Flex16, forwardRef as forwardRef11, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
 import { jsx as jsx62, jsxs as jsxs28 } from "react/jsx-runtime";
 var Tab = forwardRef11((props, ref) => {
   var _a, _b;
@@ -4476,7 +4538,7 @@ var Tab = forwardRef11((props, ref) => {
       },
       __css: styles.tab,
       ...tabProps,
-      children: /* @__PURE__ */ jsxs28(Flex15, { alignItems: "center", children: [
+      children: /* @__PURE__ */ jsxs28(Flex16, { alignItems: "center", children: [
         (_a = props.leftAddon) == null ? void 0 : _a.call(props, { isSelected }),
         tabProps.children,
         (_b = props.rightAddon) == null ? void 0 : _b.call(props, { isSelected })
@@ -4525,7 +4587,7 @@ import {
 import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text18, TextProps } from "@chakra-ui/react";
 
 // src/components/toast/components/toast.tsx
-import { chakra as chakra7, Flex as Flex16, Link as Link6, useToken } from "@chakra-ui/react";
+import { chakra as chakra7, Flex as Flex17, Link as Link6, useToken } from "@chakra-ui/react";
 import { Bounce, toast } from "react-toastify";
 
 // src/components/toast/components/styles.tsx
@@ -4564,7 +4626,7 @@ var Styles2 = () => {
 var styles_default2 = Styles2;
 
 // src/components/toast/components/toast.tsx
-import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = {
   position: "top-right",
   autoClose: 5e3,
@@ -4595,10 +4657,10 @@ var useToast = () => {
     "success.500"
   ]);
   const content = (icon, message, link) => {
-    return /* @__PURE__ */ jsxs29(Fragment9, { children: [
+    return /* @__PURE__ */ jsxs29(Fragment10, { children: [
       /* @__PURE__ */ jsx64(styles_default2, {}),
-      /* @__PURE__ */ jsxs29(Flex16, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
-        /* @__PURE__ */ jsxs29(Flex16, { alignItems: "center", children: [
+      /* @__PURE__ */ jsxs29(Flex17, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
+        /* @__PURE__ */ jsxs29(Flex17, { alignItems: "center", children: [
           icon && /* @__PURE__ */ jsx64(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
           /* @__PURE__ */ jsx64(chakra7.span, { noOfLines: 2, children: message })
         ] }),
@@ -4684,7 +4746,7 @@ import { ToastContainer } from "react-toastify";
 import {
   Box as Box29,
   Button as Button7,
-  Flex as Flex17,
+  Flex as Flex18,
   FormControl as FormControl4,
   FormLabel as FormLabel4,
   Heading as Heading2,
@@ -4725,7 +4787,7 @@ var concatList = (list) => {
 var formatValidationMessage = (extension) => `Foto harus dalam format ${concatList(extension.map((ext) => `.${ext}`))}.`;
 
 // src/components/uploader/components/uploader.tsx
-import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
 import { createElement } from "react";
 var Uploader = ({
   onHandleUploadFile,
@@ -4844,13 +4906,13 @@ var Uploader = ({
   return /* @__PURE__ */ jsxs30(FormControl4, { isRequired, children: [
     label && typeof label === "string" ? (
       // eslint-disable-next-line react/jsx-no-useless-fragment
-      /* @__PURE__ */ jsxs30(FormLabel4, { requiredIndicator: /* @__PURE__ */ jsx65(Fragment10, {}), fontSize: "text.sm", children: [
+      /* @__PURE__ */ jsxs30(FormLabel4, { requiredIndicator: /* @__PURE__ */ jsx65(Fragment11, {}), fontSize: "text.sm", children: [
         isRequired && /* @__PURE__ */ jsx65(RequiredIndicator2, { mr: 1, ml: 0 }),
         label
       ] })
     ) : label,
     /* @__PURE__ */ jsxs30(
-      Flex17,
+      Flex18,
       {
         minH: containerHeight,
         maxW: !isSmall ? "full" : "120px",
@@ -4886,7 +4948,7 @@ var Uploader = ({
             }
           ) }),
           filePreview && /* @__PURE__ */ jsx65(Box29, { w: "full", children: /* @__PURE__ */ jsx65(
-            Flex17,
+            Flex18,
             {
               position: "relative",
               "data-test-id": `CT_component_base-image-uploader_image-preview${testId ? `_${testId}` : ""}`,
@@ -4903,7 +4965,7 @@ var Uploader = ({
               )
             }
           ) }),
-          !filePreview && /* @__PURE__ */ jsxs30(Fragment10, { children: [
+          !filePreview && /* @__PURE__ */ jsxs30(Fragment11, { children: [
             /* @__PURE__ */ jsx65(
               "input",
               {
@@ -4911,7 +4973,7 @@ var Uploader = ({
                 ...getInputProps()
               }
             ),
-            isDragActive ? /* @__PURE__ */ jsx65(Text19, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs30(Flex17, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color, children: [
+            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: [
               size2 === "sm" && /* @__PURE__ */ jsx65(Plus, { size: 6, color }),
               /* @__PURE__ */ jsxs30(Box29, { children: [
                 !filePreview && /* @__PURE__ */ jsx65(
@@ -4931,7 +4993,7 @@ var Uploader = ({
         ]
       }
     ),
-    filePreview && !isSmall && /* @__PURE__ */ jsxs30(Flex17, { align: "center", justify: "center", my: 2, children: [
+    filePreview && !isSmall && /* @__PURE__ */ jsxs30(Flex18, { align: "center", justify: "center", my: 2, children: [
       /* @__PURE__ */ createElement(
         "input",
         {
@@ -5215,7 +5277,7 @@ var alertTheme = defineMultiStyleConfig2({
 var alert_default = alertTheme;
 
 // src/config/theme/components/badge.ts
-var Badge2 = {
+var Badge3 = {
   baseStyle: {
     h: "fit-content",
     display: "inline-block",
@@ -5289,7 +5351,7 @@ var Badge2 = {
     variant: "primary-solid"
   }
 };
-var badge_default2 = Badge2;
+var badge_default2 = Badge3;
 
 // src/config/theme/components/button.ts
 import { defineStyleConfig } from "@chakra-ui/styled-system";
@@ -6779,6 +6841,7 @@ export {
   CheckboxIconProps,
   CheckboxState,
   chips_default as Chips,
+  ClearIndicator,
   CloseButton,
   CloseButtonProps,
   Code,
@@ -6806,6 +6869,7 @@ export {
   ModalHeader3 as DrawerHeader,
   ModalOverlay3 as DrawerOverlay,
   DrawerProps,
+  DropdownIndicator,
   empty_state_default as EmptyState,
   Fade,
   FadeProps,
@@ -6879,6 +6943,8 @@ export {
   ModalOverlayProps,
   ModalProps,
   multi_datepicker_month_default as MultiDatePickerMonth,
+  MultiValue,
+  MultiValueRemove,
   NavItem,
   Navbar,
   navigation_bar_default as NavigationBar,
@@ -7032,7 +7098,10 @@ export {
   forwardRef12 as forwardRef,
   getSelectAllCheckboxState,
   getTheme,
+  isCellDisabled,
+  selectStyles,
   theme4 as theme,
+  themeSelect,
   useAccordion,
   useAccordionContext,
   useAccordionItem,