@ctlyst.id/internal-ui 2.1.15 → 2.1.17

package/dist/index.mjs

@@ -590,11 +590,21 @@ import { FiMinus, FiPlus } from "react-icons/fi";
 // src/components/form/components/input-addon.tsx
 import { InputLeftAddon, InputRightAddon } from "@chakra-ui/react";
 import { jsx as jsx19 } from "react/jsx-runtime";
-var InputAddonLeft = ({ children }) => {
-  return /* @__PURE__ */ jsx19(InputLeftAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineEnd: 0 }, children });
+var InputAddonLeft = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx19(InputLeftAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineEnd: 0 }, ...props, children });
 };
-var InputAddonRight = ({ children }) => {
-  return /* @__PURE__ */ jsx19(InputRightAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineStart: 0 }, children });
+var InputAddonRight = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx19(
+    InputRightAddon,
+    {
+      backgroundColor: "neutral.200",
+      px: 3,
+      py: 2.5,
+      style: { border: 0, marginInlineStart: 0 },
+      ...props,
+      children
+    }
+  );
 };
 
 // src/components/form/components/input-element.tsx
@@ -605,40 +615,6 @@ import { InputRightElement } from "@chakra-ui/react";
 import { Box as Box9, Input as ChakraInput, InputGroup } from "@chakra-ui/react";
 import { Close as Close3, Eye as Eye2, EyeOff } from "@ctlyst.id/internal-icon";
 import React3, { useMemo as useMemo2, useState } from "react";
-
-// src/components/form/styles/input-field.ts
-import { defineStyle } from "@chakra-ui/react";
-var getProperties = (props) => {
-  const { isError, isDisabled, isSuccess } = props;
-  let outlineColor = "neutral.400";
-  let focusColor = "primary.500";
-  if (isError || isDisabled || isSuccess) {
-    if (isError) outlineColor = "danger.500";
-    else if (isSuccess) outlineColor = "success.500";
-    focusColor = outlineColor;
-  }
-  return {
-    outlineColor,
-    focusColor
-  };
-};
-var getWrapperStyle = (props) => {
-  const { outlineColor, focusColor } = getProperties(props);
-  const style = {
-    border: "1px solid",
-    borderColor: outlineColor,
-    borderRadius: "sm",
-    transition: "all 0.15s",
-    boxShadow: "none",
-    _focusWithin: {
-      borderColor: focusColor
-    }
-  };
-  return defineStyle(style);
-};
-var input_field_default = getWrapperStyle;
-
-// src/components/form/components/input-field.tsx
 import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 var InputField = React3.forwardRef((props, ref) => {
   const {
@@ -660,7 +636,19 @@ var InputField = React3.forwardRef((props, ref) => {
     isLoading,
     ...inputProps
   } = props;
-  const wrapperStyle = input_field_default(props);
+  const getProperties = () => {
+    let outlineColor2 = "neutral.400";
+    let focusColor2 = "primary.500";
+    if (isError || isDisabled || isSuccess) {
+      if (isError) outlineColor2 = "danger.500";
+      else if (isSuccess) outlineColor2 = "success.500";
+      focusColor2 = outlineColor2;
+    }
+    return {
+      outlineColor: outlineColor2,
+      focusColor: focusColor2
+    };
+  };
   const [isShowPassword, setIsShowPassword] = useState(false);
   const inputType = useMemo2(() => {
     return type === "password" && isShowPassword ? "text" : type;
@@ -674,6 +662,7 @@ var InputField = React3.forwardRef((props, ref) => {
   const iconColor = useMemo2(() => {
     return isDisabled ? "black.low" : "black.medium";
   }, [isDisabled]);
+  const { outlineColor, focusColor } = getProperties();
   return /* @__PURE__ */ jsx20(
     field_default,
     {
@@ -684,7 +673,7 @@ var InputField = React3.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      children: /* @__PURE__ */ jsx20(Box9, { __css: wrapperStyle, children: /* @__PURE__ */ jsxs6(
+      children: /* @__PURE__ */ jsx20(Box9, { children: /* @__PURE__ */ jsxs6(
         InputGroup,
         {
           size: size2,
@@ -701,6 +690,14 @@ var InputField = React3.forwardRef((props, ref) => {
                 value,
                 isDisabled,
                 isSuccess,
+                transition: "all 0.15s",
+                boxShadow: "none",
+                borderRadius: "sm",
+                border: "1px solid",
+                borderColor: outlineColor,
+                _focusWithin: {
+                  borderColor: focusColor
+                },
                 ...inputProps,
                 fontSize
               }
@@ -762,6 +759,7 @@ var InputField = React3.forwardRef((props, ref) => {
     }
   );
 });
+InputField.displayName = "InputField";
 InputField.defaultProps = {
   addOnLeft: void 0,
   addOnRight: void 0,
@@ -769,7 +767,7 @@ InputField.defaultProps = {
   isLoading: void 0,
   onClear: void 0
 };
-var input_field_default2 = InputField;
+var input_field_default = InputField;
 
 // src/components/form/components/textarea.tsx
 import { Box as Box10, Textarea as ChakraTextarea } from "@chakra-ui/react";
@@ -853,7 +851,7 @@ var Counter = ({
         }
       ),
       /* @__PURE__ */ jsx22(
-        input_field_default2,
+        input_field_default,
         {
           "data-test-id": "CT_Component_Counter_input",
           value,
@@ -866,8 +864,7 @@ var Counter = ({
           onChange: handleChange,
           isReadOnly,
           width: 12,
-          type: "number",
-          borderColor: isError ? "danger.500" : "neutral.200"
+          type: "number"
         }
       ),
       /* @__PURE__ */ jsx22(
@@ -916,7 +913,6 @@ var getCommonPinningStyles = (column) => {
     left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     position: isPinned ? "sticky" : "relative",
-    width: column.getSize(),
     zIndex: isPinned ? 1 : 0,
     backgroundColor: "white",
     ...isLastLeftPinnedColumn ? {
@@ -1078,8 +1074,8 @@ var DataTable = React5.forwardRef((props, ref) => {
           Th,
           {
             colSpan: header.colSpan,
-            width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
             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__ */ jsxs9(
               Flex,
@@ -1197,7 +1193,6 @@ import {
   FormErrorMessage as FormErrorMessage3,
   FormHelperText as FormHelperText3,
   FormLabel as FormLabel3,
-  Input as Input2,
   InputGroup as InputGroup4,
   InputRightElement as InputRightElement3
 } from "@chakra-ui/react";
@@ -2070,7 +2065,6 @@ var Datepicker = ({
   var _a;
   const selected = value ? new Date(value) : void 0;
   const dateFormat = ((_a = props.dateFormat) != null ? _a : withTime) ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd";
-  const wrapperStyle = input_field_default({});
   const getTimeProps = () => {
     if (!withTime) return {};
     return {
@@ -2087,7 +2081,7 @@ var Datepicker = ({
         id,
         name,
         selected,
-        customInput: /* @__PURE__ */ jsx26(Input2, { autoComplete: "off", ...wrapperStyle }),
+        customInput: /* @__PURE__ */ jsx26(input_field_default, { autoComplete: "off" }),
         dateFormat,
         showPopperArrow: false,
         calendarClassName: cx8({ inline: props.inline }),
@@ -2128,7 +2122,7 @@ Datepicker.defaultProps = {
 var datepicker_default = Datepicker;
 
 // src/components/datepicker/components/datepicker-month/datepicker-month.tsx
-import { Box as Box13, Input as Input3 } from "@chakra-ui/react";
+import { Box as Box13, Input as Input2 } from "@chakra-ui/react";
 import { css as css2 } from "@emotion/react";
 import React7 from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
@@ -2150,7 +2144,7 @@ var DatePickerMonth = ({ onChange, min, max, ...props }) => {
         }
       `,
       children: /* @__PURE__ */ jsx27(
-        Input3,
+        Input2,
         {
           "data-test-id": props["data-test-id"],
           type: "date",
@@ -2664,12 +2658,10 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/navigation/components/navigation.tsx
-import { ChevronDownIcon as ChevronDownIcon2 } from "@chakra-ui/icons";
 import {
-  Box as Box20,
+  Box as Box21,
+  Button as Button2,
   Flex as Flex6,
-  HStack as HStack5,
-  Icon as Icon2,
   Link as Link2,
   Popover as Popover2,
   PopoverContent as PopoverContent2,
@@ -2678,111 +2670,65 @@ import {
   Text as Text8,
   useColorModeValue as useColorModeValue8
 } from "@chakra-ui/react";
+import * as Icon3 from "@ctlyst.id/internal-icon";
 import { css as css3 } from "@emotion/react";
 
-// src/components/navigation/components/mapping-icon.ts
-import {
-  FiBox,
-  FiDollarSign,
-  FiGift,
-  FiLayers,
-  FiLayout,
-  FiRepeat,
-  FiRotateCcw,
-  FiSettings,
-  FiShoppingBag,
-  FiShoppingCart,
-  FiUsers
-} from "react-icons/fi";
-
-// src/components/navigation/components/customer-icon.tsx
-import { createIcon } from "@chakra-ui/react";
+// src/components/navigation/components/mapping-icon.tsx
+import * as Icon2 from "@ctlyst.id/internal-icon";
 import { jsx as jsx40 } from "react/jsx-runtime";
-var CustomerIcon = createIcon({
-  displayName: "CustomerIcon",
-  viewBox: "0 0 16 16",
-  path: [
-    /* @__PURE__ */ jsx40(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "inherit",
-        d: "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8Z",
-        clipRule: "inherit"
-      }
-    ),
-    /* @__PURE__ */ jsx40(
-      "path",
-      {
-        fill: "currentColor",
-        d: "M12.416 12.698a1.997 1.997 0 0 0-1.75-1.031H5.334a2 2 0 0 0-1.864 1.277 7.722 7.722 0 0 1-.943-1.074 3.329 3.329 0 0 1 2.807-1.537h5.334a3.333 3.333 0 0 1 2.703 1.384c-.275.325-.594.66-.954.98Z"
-      }
-    ),
-    /* @__PURE__ */ jsx40(
-      "path",
-      {
-        fill: "currentColor",
-        fillRule: "inherit",
-        d: "M8 5.333A1.333 1.333 0 1 0 8 8a1.333 1.333 0 0 0 0-2.667ZM5.333 6.667a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Z",
-        clipRule: "inherit"
-      }
-    )
-  ]
-});
-var customer_icon_default = CustomerIcon;
-
-// src/components/navigation/components/mapping-icon.ts
 var mappingIcon = /* @__PURE__ */ new Map([
-  ["Order", FiShoppingBag],
-  ["Fulfillment", FiShoppingCart],
-  ["Transfer Stock", FiRepeat],
-  ["Stock", FiBox],
-  ["Product Database", FiLayers],
-  ["Purchasing", FiDollarSign],
-  ["Reseller", FiUsers],
-  ["Retur", FiRotateCcw],
-  ["Other", FiSettings],
-  ["Content", FiLayout],
-  ["Voucher", FiGift],
-  ["Customer", customer_icon_default]
+  ["Order", /* @__PURE__ */ jsx40(Icon2.ShoppingBag, { size: 4, color: "inherit" }, "order")],
+  ["Fulfillment", /* @__PURE__ */ jsx40(Icon2.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
+  ["Transfer Stock", /* @__PURE__ */ jsx40(Icon2.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
+  ["Stock", /* @__PURE__ */ jsx40(Icon2.Box, { size: 4, color: "inherit" }, "stock")],
+  ["Product Database", /* @__PURE__ */ jsx40(Icon2.Layers, { size: 4, color: "inherit" }, "product-database")],
+  ["Purchasing", /* @__PURE__ */ jsx40(Icon2.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
+  ["Reseller", /* @__PURE__ */ jsx40(Icon2.Users, { size: 4, color: "inherit" }, "reseller")],
+  ["Retur", /* @__PURE__ */ jsx40(Icon2.RotateCcw, { size: 4, color: "inherit" }, "retur")],
+  ["Other", /* @__PURE__ */ jsx40(Icon2.Settings, { size: 4, color: "inherit" }, "other")],
+  ["Content", /* @__PURE__ */ jsx40(Icon2.Layout, { size: 4, color: "inherit" }, "content")],
+  ["Customer", /* @__PURE__ */ jsx40(Icon2.HelpCircle, { size: 4, color: "inherit" }, "content")],
+  ["Voucher", /* @__PURE__ */ jsx40(Icon2.Gift, { size: 4, color: "inherit" }, "content")]
 ]);
 
 // src/components/navigation/components/navigation.tsx
 import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 var Navigation = ({ navigations, activePath, as, host, ...props }) => {
-  return /* @__PURE__ */ jsx41(
-    Box20,
+  return /* @__PURE__ */ jsx41(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx41(
+    Flex6,
     {
-      bg: useColorModeValue8("white", "ebony-clay.800"),
-      boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
-      borderRadius: "md",
-      overflowX: "auto",
-      ...props,
-      children: /* @__PURE__ */ jsx41(Flex6, { alignItems: "center", p: 2, children: /* @__PURE__ */ jsx41(HStack5, { spacing: 2, children: navigations == null ? void 0 : navigations.map((navigation) => {
+      bg: "white",
+      w: "full",
+      rounded: "md",
+      flexWrap: "wrap",
+      alignItems: "center",
+      shadow: "raised",
+      gap: 1,
+      px: 4,
+      py: 2,
+      children: navigations == null ? void 0 : navigations.map((navigation) => {
         const isActive = activePath.startsWith(navigation.navLink || "");
         const activeBg = isActive ? "primary.500" : void 0;
         return /* @__PURE__ */ jsx41(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-          /* @__PURE__ */ jsx41(PopoverTrigger2, { children: /* @__PURE__ */ jsxs17(
-            Box20,
+          /* @__PURE__ */ jsx41(PopoverTrigger2, { children: /* @__PURE__ */ jsx41(
+            Button2,
             {
-              display: "flex",
-              alignItems: "center",
-              borderRadius: "md",
-              cursor: "pointer",
+              h: 7.5,
+              p: 2,
+              size: "sm",
+              variant: "ghost",
+              "data-test-id": `CT_component_navigation_button-${navigation.title}${isActive ? "-active" : ""}`,
               _hover: {
-                backgroundColor: !isActive ? useColorModeValue8("dove-gray.50", "transparent") : activeBg
+                backgroundColor: !isActive ? "neutral.400" : activeBg
               },
-              backgroundColor: isOpen && !isActive ? useColorModeValue8("dove-gray.50", "transparent") : activeBg,
-              color: isActive ? "white" : "inherit",
-              p: 2,
-              children: [
-                /* @__PURE__ */ jsx41(Icon2, { as: mappingIcon.get(navigation.title), mr: 2 }),
-                /* @__PURE__ */ jsx41(Text8, { whiteSpace: "nowrap", fontSize: "text.sm", fontWeight: 400, children: navigation.title }),
-                /* @__PURE__ */ jsx41(ChevronDownIcon2, { ml: 2 })
-              ]
+              backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
+              color: isActive ? "primary.50" : "black.high",
+              leftIcon: mappingIcon.get(navigation.title),
+              rightIcon: /* @__PURE__ */ jsx41(Icon3.ChevronDown, { size: 4, color: "inherit" }),
+              children: navigation.title
             }
           ) }),
-          navigation.children && /* @__PURE__ */ jsx41(Portal, { children: /* @__PURE__ */ jsx41(Box20, { zIndex: "popover", children: /* @__PURE__ */ jsx41(
+          navigation.children && /* @__PURE__ */ jsx41(Portal, { children: /* @__PURE__ */ jsx41(Box21, { zIndex: "popover", children: /* @__PURE__ */ jsx41(
             PopoverContent2,
             {
               bg: useColorModeValue8("white", "ebony-clay.800"),
@@ -2803,7 +2749,7 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                       textDecoration: "none"
                     },
                     children: /* @__PURE__ */ jsxs17(
-                      Box20,
+                      Box21,
                       {
                         display: "flex",
                         position: "relative",
@@ -2820,15 +2766,15 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         },
                         color: isActiveSub ? "primary.500" : "inherit",
                         css: css3`
-                                      border-spacing: 4px;
-                                    `,
+                                    border-spacing: 4px;
+                                  `,
                         px: 6,
                         py: 4,
                         children: [
-                          /* @__PURE__ */ jsx41(Icon2, { as: mappingIcon.get(navigation.title), mr: 3 }),
-                          /* @__PURE__ */ jsx41(Text8, { fontSize: "text.sm", children: title }),
+                          mappingIcon.get(navigation.title),
+                          /* @__PURE__ */ jsx41(Text8, { fontSize: "text.sm", ml: 3, children: title }),
                           isActiveSub && /* @__PURE__ */ jsx41(
-                            Box20,
+                            Box21,
                             {
                               width: 0.5,
                               height: 8,
@@ -2849,9 +2795,9 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
             navigation.title
           ) }) })
         ] }) }, navigation.title);
-      }) }) })
+      })
     }
-  );
+  ) });
 };
 Navigation.defaultProps = {
   navigations: void 0,
@@ -2861,8 +2807,8 @@ Navigation.defaultProps = {
 var navigation_default = Navigation;
 
 // src/components/navigation/components/navigation-bar.tsx
-import { Box as Box21, Button as Button2, Flex as Flex7, Link as Link3, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text9 } from "@chakra-ui/react";
-import * as Icon3 from "@ctlyst.id/internal-icon";
+import { Box as Box22, Button as Button3, Flex as Flex7, Link as Link3, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text9 } from "@chakra-ui/react";
+import * as Icon4 from "@ctlyst.id/internal-icon";
 import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var NavigationBar = ({
   navigations,
@@ -2878,80 +2824,69 @@ var NavigationBar = ({
     }
     return subMenu.navHost + subMenu.navLink;
   };
-  return /* @__PURE__ */ jsx42(
-    Box21,
+  return /* @__PURE__ */ jsx42(Box22, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx42(
+    Flex7,
     {
-      hidden: isFetched && navigations === void 0,
-      backgroundRepeat: "repeat-x",
-      "data-test-id": "CT_component_navigation_cms",
-      ...props,
-      children: /* @__PURE__ */ jsx42(
-        Flex7,
-        {
-          bg: "white",
-          w: "full",
-          rounded: "md",
-          flexWrap: "wrap",
-          alignItems: "center",
-          shadow: "raised",
-          gap: 1,
-          px: 4,
-          py: 2,
-          children: navigations == null ? void 0 : navigations.map((item) => {
-            var _a;
-            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__ */ jsx42(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
-              /* @__PURE__ */ jsx42(PopoverTrigger3, { children: /* @__PURE__ */ jsx42(
-                Button2,
-                {
-                  h: 7.5,
-                  p: 2,
-                  size: "sm",
-                  variant: "ghost",
-                  "data-test-id": `CT_component_navigation_button-${item.title}${isActive ? "-active" : ""}`,
-                  _hover: {
-                    backgroundColor: !isActive ? "neutral.400" : activeBg
-                  },
-                  backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
-                  color: isActive ? "primary.50" : "black.high",
-                  leftIcon: mappingIcon2.get(item.title),
-                  rightIcon: /* @__PURE__ */ jsx42(Icon3.ChevronDown, { size: 4, color: "inherit" }),
-                  children: item.title
-                }
-              ) }),
-              item.children && /* @__PURE__ */ jsx42(PopoverContent3, { border: "none", shadow: "raised", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
-                Link3,
-                {
-                  href: urlMenu(subMenu),
-                  display: "flex",
-                  alignItems: "center",
-                  transition: "padding 0.35s ease 0s",
-                  _hover: {
-                    pl: 6
-                  },
-                  _first: { borderTopRadius: "md" },
-                  _last: { borderBottomRadius: "md" },
-                  py: 3,
-                  px: 4,
-                  color: (pathname == null ? void 0 : pathname.startsWith(subMenu.navLink)) ? "primary.800" : "black.high",
-                  onClick: onClose,
-                  background: (pathname == null ? void 0 : pathname.startsWith(subMenu.navLink)) ? "primary.50" : "transparent",
-                  "data-test-id": `CT_component_navigation_link-${item.id}`,
-                  children: [
-                    mappingIcon2.get(item.title),
-                    /* @__PURE__ */ jsx42(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
-                  ]
-                },
-                subMenu.id
-              )) })
-            ] }) }, item.id);
-          })
-        }
-      )
+      bg: "white",
+      w: "full",
+      rounded: "md",
+      flexWrap: "wrap",
+      alignItems: "center",
+      shadow: "raised",
+      gap: 1,
+      px: 4,
+      py: 2,
+      children: navigations == null ? void 0 : navigations.map((item) => {
+        var _a;
+        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__ */ jsx42(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          /* @__PURE__ */ jsx42(PopoverTrigger3, { children: /* @__PURE__ */ jsx42(
+            Button3,
+            {
+              h: 7.5,
+              p: 2,
+              size: "sm",
+              variant: "ghost",
+              "data-test-id": `CT_component_navigation_button-${item.title}${isActive ? "-active" : ""}`,
+              _hover: {
+                backgroundColor: !isActive ? "neutral.400" : activeBg
+              },
+              backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
+              color: isActive ? "primary.50" : "black.high",
+              leftIcon: mappingIcon2.get(item.title),
+              rightIcon: /* @__PURE__ */ jsx42(Icon4.ChevronDown, { size: 4, color: "inherit" }),
+              children: item.title
+            }
+          ) }),
+          item.children && /* @__PURE__ */ jsx42(PopoverContent3, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
+            Link3,
+            {
+              href: urlMenu(subMenu),
+              display: "flex",
+              alignItems: "center",
+              transition: "padding 0.35s ease 0s",
+              _hover: {
+                pl: 6
+              },
+              py: 3,
+              px: 4,
+              color: (pathname == null ? void 0 : pathname.startsWith(subMenu.navLink)) ? "primary.800" : "black.high",
+              onClick: onClose,
+              background: (pathname == null ? void 0 : pathname.startsWith(subMenu.navLink)) ? "primary.50" : "transparent",
+              "data-test-id": `CT_component_navigation_link-${item.id}`,
+              children: [
+                mappingIcon2.get(item.title),
+                /* @__PURE__ */ jsx42(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
+              ]
+            },
+            subMenu.id
+          )) })
+        ] }) }, item.id);
+      })
     }
-  );
+  ) });
 };
 NavigationBar.defaultProps = {
   navigations: void 0
@@ -2960,10 +2895,10 @@ 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 Box22, Text as Text10, useColorModeValue as useColorModeValue10 } from "@chakra-ui/react";
+import { Box as Box23, Text as Text10, useColorModeValue as useColorModeValue10 } from "@chakra-ui/react";
 
 // src/components/pagination/components/pagination-button.tsx
-import { Button as Button3, forwardRef as forwardRef12, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
+import { Button as Button4, forwardRef as forwardRef12, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
 import { jsx as jsx43 } from "react/jsx-runtime";
 var PaginationButton = forwardRef12(({ className, style, isActive, children, ...rest }, ref) => {
   const btnBg = useColorModeValue9("neutral.300", "mirage.900");
@@ -2971,7 +2906,7 @@ var PaginationButton = forwardRef12(({ className, style, isActive, children, ...
   const btnNotActiveBg = useColorModeValue9("secondary.50", "primary.500");
   const btnNotActiveColor = useColorModeValue9("primary.500", "white");
   return /* @__PURE__ */ jsx43(
-    Button3,
+    Button4,
     {
       "data-test-id": "Pagination-Button",
       ref,
@@ -3060,8 +2995,8 @@ var Pagination = ({ className, current, total, onSelect }) => {
     }
     return pageButtons;
   };
-  return /* @__PURE__ */ jsxs20(Box22, { className, display: "inline-flex", alignItems: "center", children: [
-    /* @__PURE__ */ jsx45(Box22, { mr: 1, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs20(Box23, { className, display: "inline-flex", alignItems: "center", children: [
+    /* @__PURE__ */ jsx45(Box23, { mr: 1, children: /* @__PURE__ */ jsx45(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3072,7 +3007,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         icon: /* @__PURE__ */ jsx45(ArrowLeftIcon, { width: 2 })
       }
     ) }),
-    /* @__PURE__ */ jsxs20(Box22, { bg: "neutral.300", borderRadius: "full", children: [
+    /* @__PURE__ */ jsxs20(Box23, { bg: "neutral.300", borderRadius: "full", children: [
       /* @__PURE__ */ jsx45(
         pagination_button_trigger_default,
         {
@@ -3108,7 +3043,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx45(Box22, { ml: 1, children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx45(Box23, { ml: 1, children: /* @__PURE__ */ jsx45(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3145,7 +3080,7 @@ var PaginationDetail = ({
 var pagination_detail_default = PaginationDetail;
 
 // src/components/pagination/components/pagination-filter.tsx
-import { Box as Box23, Select, Text as Text12, useColorModeValue as useColorModeValue11 } from "@chakra-ui/react";
+import { Box as Box24, Select, Text as Text12, useColorModeValue as useColorModeValue11 } from "@chakra-ui/react";
 import * as React13 from "react";
 import { FiChevronDown } from "react-icons/fi";
 import { jsx as jsx47, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -3157,7 +3092,7 @@ var PaginationFilter = ({
   ...rest
 }) => {
   const [value, setValue] = React13.useState(limit);
-  return /* @__PURE__ */ jsxs21(Box23, { display: "flex", flexDirection: "row", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs21(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
     /* @__PURE__ */ jsx47(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue11("neutral.900", "white"), ...rest, children: label }),
     /* @__PURE__ */ jsx47(
       Select,
@@ -3211,7 +3146,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/radio/components/radio.tsx
-import { Box as Box24, Radio as ChakraRadio, Text as Text13 } from "@chakra-ui/react";
+import { Box as Box25, Radio as ChakraRadio, Text as Text13 } from "@chakra-ui/react";
 import { jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
 var Radio = ({
   isError = false,
@@ -3222,9 +3157,9 @@ var Radio = ({
   ...rest
 }) => {
   const variant = isError ? "errors" : "unstyled";
-  return /* @__PURE__ */ jsxs22(Box24, { children: [
-    /* @__PURE__ */ jsx48(Box24, { display: "flex", children: /* @__PURE__ */ jsx48(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-    /* @__PURE__ */ jsx48(Box24, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
+  return /* @__PURE__ */ jsxs22(Box25, { children: [
+    /* @__PURE__ */ jsx48(Box25, { display: "flex", children: /* @__PURE__ */ jsx48(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+    /* @__PURE__ */ jsx48(Box25, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
   ] });
 };
 Radio.displayName = "Radio";
@@ -3235,7 +3170,7 @@ Radio.defaultProps = {
 };
 
 // src/components/radio/components/radio-group.tsx
-import { Box as Box25, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
+import { Box as Box26, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
 import { jsx as jsx49 } from "react/jsx-runtime";
 var RadioGroup = ({
   children,
@@ -3245,7 +3180,7 @@ var RadioGroup = ({
   errorMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx49(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx49(Box25, { mt: "12px", children: /* @__PURE__ */ jsx49(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx49(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
+  return /* @__PURE__ */ jsx49(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx49(Box26, { mt: "12px", children: /* @__PURE__ */ jsx49(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx49(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 };
 RadioGroup.displayName = "RadioGroup";
 RadioGroup.defaultProps = {
@@ -3786,7 +3721,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/tabs/components/tab.tsx
-import { Button as Button4, Flex as Flex9, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
+import { Button as Button5, Flex as Flex9, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
 import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
 var Tab = forwardRef14((props, ref) => {
   var _a, _b;
@@ -3794,7 +3729,7 @@ var Tab = forwardRef14((props, ref) => {
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
   return /* @__PURE__ */ jsx56(
-    Button4,
+    Button5,
     {
       "data-test-id": props["data-test-id"],
       p: 4,
@@ -4040,12 +3975,12 @@ __export(components_exports, {
 
 // src/config/theme/components/accordion.ts
 import { accordionAnatomy as parts } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers, defineStyle as defineStyle2 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/styled-system";
 var { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys);
-var baseStyleContainer = defineStyle2({
+var baseStyleContainer = defineStyle({
   border: "none"
 });
-var baseStyleButton = defineStyle2({
+var baseStyleButton = defineStyle({
   height: 14,
   transitionProperty: "common",
   transitionDuration: "normal",
@@ -4074,12 +4009,12 @@ var baseStyleButton = defineStyle2({
     visibility: "hidden"
   }
 });
-var baseStylePanel = defineStyle2({
+var baseStylePanel = defineStyle({
   pt: "2",
   px: "4",
   pb: "5"
 });
-var baseStyleIcon = defineStyle2({
+var baseStyleIcon = defineStyle({
   fontSize: "1.25em"
 });
 var baseStyle = definePartsStyle({
@@ -4088,14 +4023,14 @@ var baseStyle = definePartsStyle({
   panel: baseStylePanel,
   icon: baseStyleIcon
 });
-var collapseStyleButton = defineStyle2({
+var collapseStyleButton = defineStyle({
   height: 13,
   borderRadius: "sm",
   borderWidth: "1px",
   borderStyle: "solid",
   borderColor: "neutral.300"
 });
-var collapseStylePanel = defineStyle2({
+var collapseStylePanel = defineStyle({
   py: 0,
   pr: 0,
   pl: 12,
@@ -4285,7 +4220,7 @@ var badge_default2 = Badge2;
 
 // src/config/theme/components/button.ts
 import { defineStyleConfig } from "@chakra-ui/styled-system";
-var Button5 = defineStyleConfig({
+var Button6 = defineStyleConfig({
   // The styles all button have in common
   baseStyle: {
     fontSize: "body.1",
@@ -4540,7 +4475,7 @@ var Button5 = defineStyleConfig({
     colorScheme: "primary"
   }
 });
-var button_default2 = Button5;
+var button_default2 = Button6;
 
 // src/config/theme/components/card.ts
 import { defineStyleConfig as defineStyleConfig2 } from "@chakra-ui/styled-system";
@@ -4718,8 +4653,8 @@ var Chips2 = defineStyleConfig3({
 var chips_default2 = Chips2;
 
 // src/config/theme/components/form-label.ts
-import { defineStyle as defineStyle3, defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/styled-system";
-var baseStyle4 = defineStyle3({
+import { defineStyle as defineStyle2, defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/styled-system";
+var baseStyle4 = defineStyle2({
   fontSize: "field.sm",
   fontWeight: "normal",
   marginEnd: 1,
@@ -4732,7 +4667,7 @@ var form_label_default = FormLabel4;
 
 // src/config/theme/components/input.ts
 import { inputAnatomy as parts3 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers4, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers4, defineStyle as defineStyle3 } from "@chakra-ui/styled-system";
 import { mode } from "@chakra-ui/theme-tools";
 var { definePartsStyle: definePartsStyle4, defineMultiStyleConfig: defineMultiStyleConfig4 } = createMultiStyleConfigHelpers4(parts3.keys);
 var baseStyle5 = definePartsStyle4({
@@ -4761,19 +4696,19 @@ var baseStyle5 = definePartsStyle4({
   }
 });
 var size = {
-  lg: defineStyle4({
+  lg: defineStyle3({
     fontSize: "text.lg",
     h: 12,
     borderRadius: "sm"
   }),
-  md: defineStyle4({
+  md: defineStyle3({
     fontSize: "text.md",
     h: 10,
     borderRadius: "sm"
   }),
-  sm: defineStyle4({
+  sm: defineStyle3({
     fontSize: "text.sm",
-    h: 9,
+    h: 9.5,
     borderRadius: "sm"
   })
 };
@@ -4797,6 +4732,9 @@ var outline = definePartsStyle4((props) => {
     outline: 0,
     bg: mode("white", "inherit")(props),
     color: mode("inherit", "white")(props),
+    _hover: {
+      borderColor: mode("neutral.400", "inherit")(props)
+    },
     _invalid: {
       boxShadow: "none"
     },
@@ -4825,7 +4763,7 @@ var variants3 = {
   outline,
   unstyled: unstyled2
 };
-var Input4 = defineMultiStyleConfig4({
+var Input3 = defineMultiStyleConfig4({
   baseStyle: baseStyle5,
   sizes: sizes2,
   variants: variants3,
@@ -4834,7 +4772,7 @@ var Input4 = defineMultiStyleConfig4({
     variant: "outline"
   }
 });
-var input_default = Input4;
+var input_default = Input3;
 
 // src/config/theme/components/loader.ts
 import { defineStyleConfig as defineStyleConfig5 } from "@chakra-ui/styled-system";
@@ -5072,7 +5010,7 @@ var radio_default = Radio2;
 
 // src/config/theme/components/switch.ts
 import { switchAnatomy as parts4 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
 import { calc, cssVar as cssVar2 } from "@chakra-ui/theme-tools";
 var { defineMultiStyleConfig: defineMultiStyleConfig6, definePartsStyle: definePartsStyle6 } = createMultiStyleConfigHelpers6(parts4.keys);
 var $width = cssVar2("switch-track-width");
@@ -5080,7 +5018,7 @@ var $height = cssVar2("switch-track-height");
 var $diff = cssVar2("switch-track-diff");
 var diffValue = calc.subtract($width, $height);
 var $translateX = cssVar2("switch-thumb-x");
-var baseStyleThumb = defineStyle5({
+var baseStyleThumb = defineStyle4({
   bg: "white",
   transitionProperty: "transform",
   transitionDuration: "normal",
@@ -5158,7 +5096,7 @@ var switch_default2 = Switch3;
 
 // src/config/theme/components/table.ts
 import { tableAnatomy as parts5 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7, defineStyle as defineStyle6 } from "@chakra-ui/styled-system";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
 import { mode as mode2 } from "@chakra-ui/theme-tools";
 var { defineMultiStyleConfig: defineMultiStyleConfig7, definePartsStyle: definePartsStyle7 } = createMultiStyleConfigHelpers7(parts5.keys);
 var baseStyle8 = definePartsStyle7({
@@ -5218,7 +5156,7 @@ var baseStyle8 = definePartsStyle7({
     fontWeight: "medium"
   }
 });
-var numericStyles = defineStyle6({
+var numericStyles = defineStyle5({
   "&[data-is-numeric=true]": {
     textAlign: "end"
   }
@@ -5291,7 +5229,7 @@ var variantStripe = definePartsStyle7((props) => {
 var variants5 = {
   simple: variantSimple,
   striped: variantStripe,
-  unstyled: defineStyle6({})
+  unstyled: defineStyle5({})
 };
 var sizes4 = {
   sm: definePartsStyle7({
@@ -5398,7 +5336,7 @@ var tabsTheme = defineMultiStyleConfig8({
 var tabs_default = tabsTheme;
 
 // src/config/theme/components/textarea.ts
-import { defineStyle as defineStyle7, defineStyleConfig as defineStyleConfig7 } from "@chakra-ui/react";
+import { defineStyle as defineStyle6, defineStyleConfig as defineStyleConfig7 } from "@chakra-ui/react";
 var getProps = (props) => {
   const { isError, isSuccess, isDisabled } = props;
   let borderColor = "neutral.400";
@@ -5418,7 +5356,7 @@ var getProps = (props) => {
     borderColor
   };
 };
-var outline2 = defineStyle7((props) => {
+var outline2 = defineStyle6((props) => {
   const { focusBorderColor, borderColor } = getProps(props);
   return {
     background: "white.high",
@@ -5723,7 +5661,7 @@ export {
   InputAddonRight,
   InputLeftElement as InputElementLeft,
   InputRightElement as InputElementRight,
-  input_field_default2 as InputField,
+  input_field_default as InputField,
   InputGroup2 as InputGroup,
   InputGroupProps,
   InputLeftAddon2 as InputLeftAddon,