@ctlyst.id/internal-ui 3.1.4 → 3.1.6

package/dist/index.mjs

@@ -1083,7 +1083,7 @@ var DataTable = React5.forwardRef(
     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: [
+    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,
         {
@@ -1103,49 +1103,56 @@ var DataTable = React5.forwardRef(
         },
         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__ */ 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, { ...(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,
+      /* @__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,
               {
-                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)) }),
+                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" }) })
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              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(
@@ -2557,33 +2564,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 } = 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,
       textStyle,
       width,
-      ml: 1,
       placeItems: "center",
-      borderRadius: props.borderRadius,
+      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,
@@ -2618,7 +2637,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,
@@ -2645,18 +2664,19 @@ var Profile = ({
                     ] }),
                     textAlign: "left",
                     placement: "bottom-end",
+                    cursor: "text",
+                    portal: true,
                     popoverProps: {
                       offset: [10, 8]
                     },
-                    width: 186,
+                    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,
@@ -2717,14 +2737,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,
     {
@@ -2988,7 +3008,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,
@@ -3005,7 +3025,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,
             {
@@ -3105,7 +3125,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,
@@ -3137,7 +3157,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,
             {
@@ -3527,8 +3547,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";
@@ -3835,10 +3857,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)" };
@@ -3853,13 +3875,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"
       }
     })
   };
@@ -3879,19 +3903,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
     }
   );
 }
@@ -3911,6 +3956,10 @@ function SelectAsync({
     AsyncPaginate,
     {
       classNamePrefix: "react-select",
+      components: {
+        DropdownIndicator,
+        ClearIndicator
+      },
       ...rest,
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
@@ -3929,6 +3978,10 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
     ReactSelectAsyncCreatable,
     {
       classNamePrefix: "react-select",
+      components: {
+        DropdownIndicator,
+        ClearIndicator
+      },
       ...rest,
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
@@ -3946,6 +3999,10 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
     ReactSelectCreatable,
     {
       classNamePrefix: "react-select",
+      components: {
+        DropdownIndicator,
+        ClearIndicator
+      },
       ...rest,
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
@@ -3954,10 +4011,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,
@@ -4004,7 +4061,7 @@ var InputOption = ({
     onClick: isDisabled ? void 0 : innerProps.onClick,
     style
   };
-  return /* @__PURE__ */ jsxs24(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs24(Fragment8, { children: [
     /* @__PURE__ */ jsx57(
       ComponentRS.Option,
       {
@@ -4017,7 +4074,7 @@ var InputOption = ({
         innerProps: props,
         ...rest,
         children: /* @__PURE__ */ jsxs24(
-          Flex11,
+          Flex12,
           {
             alignItems: "center",
             width: "100%",
@@ -4068,7 +4125,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,
@@ -4076,6 +4133,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;
@@ -4091,13 +4153,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,
@@ -4117,7 +4179,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";
@@ -4133,7 +4195,7 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
         color: "primary.500"
       },
       children: /* @__PURE__ */ jsxs25(
-        Flex13,
+        Flex14,
         {
           "data-test-id": "nLkz69YipW818FioeAxVI",
           direction: "row",
@@ -4195,9 +4257,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);
@@ -4205,12 +4267,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,
               {
@@ -4252,7 +4314,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 })
                               }
                             )
                           ]
@@ -4331,9 +4393,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) {
@@ -4389,9 +4451,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,
@@ -4440,7 +4502,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;
@@ -4473,7 +4535,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 })
@@ -4522,7 +4584,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
@@ -4561,7 +4623,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,
@@ -4592,10 +4654,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 })
         ] }),
@@ -4681,7 +4743,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,
@@ -4722,7 +4784,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,
@@ -4841,13 +4903,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",
@@ -4883,7 +4945,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}` : ""}`,
@@ -4900,7 +4962,7 @@ var Uploader = ({
               )
             }
           ) }),
-          !filePreview && /* @__PURE__ */ jsxs30(Fragment10, { children: [
+          !filePreview && /* @__PURE__ */ jsxs30(Fragment11, { children: [
             /* @__PURE__ */ jsx65(
               "input",
               {
@@ -4908,7 +4970,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(
@@ -4928,7 +4990,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",
         {
@@ -5212,7 +5274,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",
@@ -5286,7 +5348,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";
@@ -6776,6 +6838,7 @@ export {
   CheckboxIconProps,
   CheckboxState,
   chips_default as Chips,
+  ClearIndicator,
   CloseButton,
   CloseButtonProps,
   Code,
@@ -6803,6 +6866,7 @@ export {
   ModalHeader3 as DrawerHeader,
   ModalOverlay3 as DrawerOverlay,
   DrawerProps,
+  DropdownIndicator,
   empty_state_default as EmptyState,
   Fade,
   FadeProps,
@@ -6876,6 +6940,8 @@ export {
   ModalOverlayProps,
   ModalProps,
   multi_datepicker_month_default as MultiDatePickerMonth,
+  MultiValue,
+  MultiValueRemove,
   NavItem,
   Navbar,
   navigation_bar_default as NavigationBar,