@ctlyst.id/internal-ui 2.2.0 → 2.2.2

package/dist/index.mjs

@@ -673,89 +673,94 @@ var InputField = React3.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      children: /* @__PURE__ */ jsx20(Box9, { children: /* @__PURE__ */ jsxs6(
-        InputGroup,
+      children: /* @__PURE__ */ jsx20(
+        Box9,
         {
-          size: size2,
+          transition: "all 0.15s",
+          boxShadow: "none",
           borderRadius: "sm",
-          backgroundColor: isDisabled ? "neutral.300" : "white.high",
-          cursor: isDisabled ? "not-allowed" : "default",
-          children: [
-            addOnLeft,
-            /* @__PURE__ */ jsx20(
-              ChakraInput,
-              {
-                ref,
-                type: inputType,
-                value,
-                isDisabled,
-                isSuccess,
-                transition: "all 0.15s",
-                boxShadow: "none",
-                borderRadius: "sm",
-                border: "1px solid",
-                borderColor: outlineColor,
-                _focusWithin: {
-                  borderColor: focusColor
-                },
-                ...inputProps,
-                fontSize
-              }
-            ),
-            (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs6(
-              Box9,
-              {
-                "data-test-id": "CT_Component_ClearInput",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "16px",
-                mr: "10px",
-                children: [
-                  withClear && !isLoading && /* @__PURE__ */ jsx20(
-                    Box9,
-                    {
-                      display: "flex",
-                      justifyContent: "center",
-                      onClick: !isDisabled ? onClear : void 0,
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      children: /* @__PURE__ */ jsx20(Close3, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
-                    Box9,
-                    {
-                      "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(true);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ jsx20(EyeOff, { size: 4, color: iconColor })
-                    }
-                  ),
-                  type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
-                    Box9,
-                    {
-                      "data-test-id": "sfc2388bmeXBmdla45Ibk",
-                      onClick: () => {
-                        if (!isDisabled) setIsShowPassword(false);
-                      },
-                      cursor: isDisabled ? "not-allowed" : "pointer",
-                      display: "flex",
-                      justifyContent: "center",
-                      children: /* @__PURE__ */ jsx20(Eye2, { size: 4, color: iconColor })
-                    }
-                  ),
-                  isLoading && /* @__PURE__ */ jsx20(loader_default, { size: "sm" })
-                ]
-              }
-            ),
-            addOnRight
-          ]
+          border: "1px solid",
+          borderColor: outlineColor,
+          _focusWithin: {
+            borderColor: focusColor
+          },
+          children: /* @__PURE__ */ jsxs6(
+            InputGroup,
+            {
+              size: size2,
+              borderRadius: "sm",
+              backgroundColor: isDisabled ? "neutral.300" : "white.high",
+              cursor: isDisabled ? "not-allowed" : "default",
+              children: [
+                addOnLeft,
+                /* @__PURE__ */ jsx20(
+                  ChakraInput,
+                  {
+                    ref,
+                    type: inputType,
+                    value,
+                    isDisabled,
+                    isSuccess,
+                    ...inputProps,
+                    fontSize
+                  }
+                ),
+                (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs6(
+                  Box9,
+                  {
+                    "data-test-id": "CT_Component_ClearInput",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "16px",
+                    mr: "10px",
+                    children: [
+                      withClear && !isLoading && /* @__PURE__ */ jsx20(
+                        Box9,
+                        {
+                          display: "flex",
+                          justifyContent: "center",
+                          onClick: !isDisabled ? onClear : void 0,
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          children: /* @__PURE__ */ jsx20(Close3, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
+                        Box9,
+                        {
+                          "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(true);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ jsx20(EyeOff, { size: 4, color: iconColor })
+                        }
+                      ),
+                      type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
+                        Box9,
+                        {
+                          "data-test-id": "sfc2388bmeXBmdla45Ibk",
+                          onClick: () => {
+                            if (!isDisabled) setIsShowPassword(false);
+                          },
+                          cursor: isDisabled ? "not-allowed" : "pointer",
+                          display: "flex",
+                          justifyContent: "center",
+                          children: /* @__PURE__ */ jsx20(Eye2, { size: 4, color: iconColor })
+                        }
+                      ),
+                      isLoading && /* @__PURE__ */ jsx20(loader_default, { size: "sm" })
+                    ]
+                  }
+                ),
+                addOnRight
+              ]
+            }
+          )
         }
-      ) })
+      )
     }
   );
 });
@@ -822,12 +827,6 @@ var Counter = ({
   helperText = "",
   isReadOnly = false
 }) => {
-  const getFieldSize = () => {
-    if (size2 === "xl") return "lg";
-    if (size2 === "lg") return "md";
-    if (size2 === "md") return "sm";
-    return "xs";
-  };
   const decrement = () => {
     onChange(value - 1);
   };
@@ -858,7 +857,7 @@ var Counter = ({
           isError,
           isDisabled: disabled || max === 0,
           textAlign: "center",
-          size: getFieldSize(),
+          size: size2,
           min,
           max,
           onChange: handleChange,
@@ -2400,7 +2399,7 @@ function environmentName(env) {
 
 // src/components/header/components/version.tsx
 import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
-var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
+var Version = ({ hideEnv, version, environment, onOpenModalRelease, versionStyle }) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
   version && /* @__PURE__ */ jsx33(
     badge_default,
     {
@@ -2409,6 +2408,7 @@ var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__P
       variant: "neutral-light",
       onClick: onOpenModalRelease,
       cursor: onOpenModalRelease ? "pointer" : "auto",
+      ...versionStyle,
       children: version
     }
   ),
@@ -2430,7 +2430,8 @@ Version.defaultProps = {
   hideEnv: false,
   environment: void 0,
   version: void 0,
-  onOpenModalRelease: void 0
+  onOpenModalRelease: void 0,
+  versionStyle: void 0
 };
 var version_default = Version;
 
@@ -2451,6 +2452,7 @@ var Header = ({
   children,
   profile,
   bg = "white",
+  versionStyle,
   ...props
 }) => /* @__PURE__ */ jsx34(Flex4, { minH: 15, bg, shadow: "raised", px: 6, py: 3, alignItems: "center", ...props, children: /* @__PURE__ */ jsxs16(Flex4, { h: "auto", w: "full", alignItems: "center", justifyContent: profile ? "flex-end" : "space-between", pos: "relative", children: [
   mainLogo && /* @__PURE__ */ jsxs16(Flex4, { alignItems: "center", children: [
@@ -2465,7 +2467,8 @@ var Header = ({
         hideEnv,
         version: data == null ? void 0 : data.version,
         environment: data == null ? void 0 : data.environment,
-        onOpenModalRelease
+        onOpenModalRelease,
+        versionStyle
       }
     )
   ] }),
@@ -2486,7 +2489,8 @@ Header.defaultProps = {
   centerLogoSize: void 0,
   hideEnv: false,
   urlLogo: void 0,
-  profile: void 0
+  profile: void 0,
+  versionStyle: void 0
 };
 var header_default = Header;
 
@@ -2655,12 +2659,56 @@ import {
   useModalStyles
 } from "@chakra-ui/react";
 
+// src/components/nav-item/components/nav-item.tsx
+import { Link as Link2 } from "@chakra-ui/react";
+import { cx as cx9 } from "@chakra-ui/shared-utils";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var NavItem = ({ children, isActive, isChild, isDisabled, ...props }) => {
+  return /* @__PURE__ */ jsx40(
+    Link2,
+    {
+      "data-test-id": "7quRuVrffI7_tnCF4jUSV",
+      opacity: isDisabled ? "0.3" : "initial",
+      cursor: isDisabled ? "not-allowed" : "pointer",
+      h: "7.5",
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      w: "full",
+      p: "2",
+      pl: isChild ? "7" : "2",
+      color: isActive ? "primary.500" : "black.high",
+      bg: isActive ? "primary.100" : "white",
+      className: cx9("catalyst-nav-item", props.className),
+      textStyle: "text.xs",
+      fontWeight: isActive ? "semibold" : "regular",
+      rounded: "sm",
+      _active: isDisabled ? {} : {
+        bg: "primary.100"
+      },
+      _hover: isDisabled ? {} : {
+        textDecoration: "none",
+        bg: isActive ? "primary.100" : "primary.50"
+      },
+      ...props,
+      onClick: isDisabled ? void 0 : props.onClick,
+      children
+    }
+  );
+};
+NavItem.displayName = "NavItem";
+NavItem.defaultProps = {
+  isActive: false,
+  isChild: false,
+  isDisabled: false
+};
+
 // src/components/navigation/components/navigation.tsx
 import {
   Box as Box21,
   Button as Button2,
   Flex as Flex6,
-  Link as Link2,
+  Link as Link3,
   Popover as Popover2,
   PopoverContent as PopoverContent2,
   PopoverTrigger as PopoverTrigger2,
@@ -2673,26 +2721,26 @@ import { css as css3 } from "@emotion/react";
 
 // src/components/navigation/components/mapping-icon.tsx
 import * as Icon2 from "@ctlyst.id/internal-icon";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var mappingIcon = /* @__PURE__ */ new Map([
-  ["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")]
+  ["Order", /* @__PURE__ */ jsx41(Icon2.ShoppingBag, { size: 4, color: "inherit" }, "order")],
+  ["Fulfillment", /* @__PURE__ */ jsx41(Icon2.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
+  ["Transfer Stock", /* @__PURE__ */ jsx41(Icon2.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
+  ["Stock", /* @__PURE__ */ jsx41(Icon2.Box, { size: 4, color: "inherit" }, "stock")],
+  ["Product Database", /* @__PURE__ */ jsx41(Icon2.Layers, { size: 4, color: "inherit" }, "product-database")],
+  ["Purchasing", /* @__PURE__ */ jsx41(Icon2.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
+  ["Reseller", /* @__PURE__ */ jsx41(Icon2.Users, { size: 4, color: "inherit" }, "reseller")],
+  ["Retur", /* @__PURE__ */ jsx41(Icon2.RotateCcw, { size: 4, color: "inherit" }, "retur")],
+  ["Other", /* @__PURE__ */ jsx41(Icon2.Settings, { size: 4, color: "inherit" }, "other")],
+  ["Content", /* @__PURE__ */ jsx41(Icon2.Layout, { size: 4, color: "inherit" }, "content")],
+  ["Customer", /* @__PURE__ */ jsx41(Icon2.HelpCircle, { size: 4, color: "inherit" }, "content")],
+  ["Voucher", /* @__PURE__ */ jsx41(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";
+import { Fragment as Fragment4, jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
 var Navigation = ({ navigations, activePath, as, host, ...props }) => {
-  return /* @__PURE__ */ jsx41(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx42(
     Flex6,
     {
       bg: "white",
@@ -2707,8 +2755,8 @@ 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__ */ jsx41(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-          /* @__PURE__ */ jsx41(PopoverTrigger2, { children: /* @__PURE__ */ jsx41(
+        return /* @__PURE__ */ jsx42(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
+          /* @__PURE__ */ jsx42(PopoverTrigger2, { children: /* @__PURE__ */ jsx42(
             Button2,
             {
               h: 7.5,
@@ -2722,11 +2770,11 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
               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" }),
+              rightIcon: /* @__PURE__ */ jsx42(Icon3.ChevronDown, { size: 4, color: "inherit" }),
               children: navigation.title
             }
           ) }),
-          navigation.children && /* @__PURE__ */ jsx41(Portal, { children: /* @__PURE__ */ jsx41(Box21, { zIndex: "popover", children: /* @__PURE__ */ jsx41(
+          navigation.children && /* @__PURE__ */ jsx42(Portal, { children: /* @__PURE__ */ jsx42(Box21, { zIndex: "popover", children: /* @__PURE__ */ jsx42(
             PopoverContent2,
             {
               bg: useColorModeValue8("white", "ebony-clay.800"),
@@ -2738,8 +2786,8 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                 const link = navHost ? `${navHost}${navLink}` : navLink;
                 const isLocalLink = host === navHost;
                 const isActiveSub = activePath === navLink;
-                return /* @__PURE__ */ jsx41(
-                  Link2,
+                return /* @__PURE__ */ jsx42(
+                  Link3,
                   {
                     as: isLocalLink ? as : void 0,
                     href: link,
@@ -2770,8 +2818,8 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         py: 4,
                         children: [
                           mappingIcon.get(navigation.title),
-                          /* @__PURE__ */ jsx41(Text8, { fontSize: "text.sm", ml: 3, children: title }),
-                          isActiveSub && /* @__PURE__ */ jsx41(
+                          /* @__PURE__ */ jsx42(Text8, { fontSize: "text.sm", ml: 3, children: title }),
+                          isActiveSub && /* @__PURE__ */ jsx42(
                             Box21,
                             {
                               width: 0.5,
@@ -2805,9 +2853,9 @@ Navigation.defaultProps = {
 var navigation_default = Navigation;
 
 // src/components/navigation/components/navigation-bar.tsx
-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 { Box as Box22, Button as Button3, Flex as Flex7, Link as Link4, 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";
+import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
 var NavigationBar = ({
   navigations,
   isFetched,
@@ -2822,7 +2870,7 @@ var NavigationBar = ({
     }
     return subMenu.navHost + subMenu.navLink;
   };
-  return /* @__PURE__ */ jsx42(Box22, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(Box22, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx43(
     Flex7,
     {
       bg: "white",
@@ -2839,8 +2887,8 @@ 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__ */ 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(
+        return /* @__PURE__ */ jsx43(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
+          /* @__PURE__ */ jsx43(PopoverTrigger3, { children: /* @__PURE__ */ jsx43(
             Button3,
             {
               h: 7.5,
@@ -2854,12 +2902,12 @@ var NavigationBar = ({
               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" }),
+              rightIcon: /* @__PURE__ */ jsx43(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,
+          item.children && /* @__PURE__ */ jsx43(PopoverContent3, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
+            Link4,
             {
               href: urlMenu(subMenu),
               display: "flex",
@@ -2876,7 +2924,7 @@ var NavigationBar = ({
               "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 })
+                /* @__PURE__ */ jsx43(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
               ]
             },
             subMenu.id
@@ -2897,13 +2945,13 @@ import { Box as Box23, Text as Text10, useColorModeValue as useColorModeValue10
 
 // src/components/pagination/components/pagination-button.tsx
 import { Button as Button4, forwardRef as forwardRef12, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var PaginationButton = forwardRef12(({ className, style, isActive, children, ...rest }, ref) => {
   const btnBg = useColorModeValue9("neutral.300", "mirage.900");
   const btnColor = useColorModeValue9("black.high", "primary.300");
   const btnNotActiveBg = useColorModeValue9("secondary.50", "primary.500");
   const btnNotActiveColor = useColorModeValue9("primary.500", "white");
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     Button4,
     {
       "data-test-id": "Pagination-Button",
@@ -2942,7 +2990,7 @@ var pagination_button_default = PaginationButton;
 
 // src/components/pagination/components/pagination-button-trigger.tsx
 import { VisuallyHidden } from "@chakra-ui/react";
-import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
 var PaginationButtonTrigger = ({
   color,
   isDisabled,
@@ -2950,7 +2998,7 @@ var PaginationButtonTrigger = ({
   visuallyHidden,
   icon
 }) => /* @__PURE__ */ jsxs19(pagination_button_default, { "data-test-id": "DLVCc_fBK35spHm5WxjcJ", color, isDisabled, onClick, children: [
-  /* @__PURE__ */ jsx44(VisuallyHidden, { children: visuallyHidden }),
+  /* @__PURE__ */ jsx45(VisuallyHidden, { children: visuallyHidden }),
   icon
 ] });
 PaginationButtonTrigger.defaultProps = {
@@ -2963,7 +3011,7 @@ PaginationButtonTrigger.defaultProps = {
 var pagination_button_trigger_default = PaginationButtonTrigger;
 
 // src/components/pagination/components/pagination.tsx
-import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs20 } from "react/jsx-runtime";
 var Pagination = ({ className, current, total, onSelect }) => {
   const btnColorDisabled = useColorModeValue10("secondary.100", "primary.500");
   const btnColor = useColorModeValue10("primary.500", "secondary.100");
@@ -2994,7 +3042,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
     return pageButtons;
   };
   return /* @__PURE__ */ jsxs20(Box23, { className, display: "inline-flex", alignItems: "center", children: [
-    /* @__PURE__ */ jsx45(Box23, { mr: 1, children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(Box23, { mr: 1, children: /* @__PURE__ */ jsx46(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3002,11 +3050,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledPrevious,
         onClick: () => handleSelectPage(1),
         visuallyHidden: "First Page",
-        icon: /* @__PURE__ */ jsx45(ArrowLeftIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx46(ArrowLeftIcon, { width: 2 })
       }
     ) }),
     /* @__PURE__ */ jsxs20(Box23, { bg: "neutral.300", borderRadius: "full", children: [
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx46(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3014,22 +3062,22 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledPrevious,
           onClick: () => handleSelectPage(current - 1),
           visuallyHidden: "Previous Page",
-          icon: /* @__PURE__ */ jsx45(ChevronLeftIcon2, {})
+          icon: /* @__PURE__ */ jsx46(ChevronLeftIcon2, {})
         }
       ),
       generatePages().map((page) => {
-        return /* @__PURE__ */ jsx45(
+        return /* @__PURE__ */ jsx46(
           pagination_button_default,
           {
             "data-test-id": "Pagination-Button",
             isActive: page === current,
             onClick: () => typeof page === "number" ? handleSelectPage(page) : null,
-            children: /* @__PURE__ */ jsx45(Text10, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
+            children: /* @__PURE__ */ jsx46(Text10, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
           },
           page
         );
       }),
-      /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx46(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3037,11 +3085,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledNext,
           onClick: () => handleSelectPage(current + 1),
           visuallyHidden: "Next Page",
-          icon: /* @__PURE__ */ jsx45(ChevronRightIcon, {})
+          icon: /* @__PURE__ */ jsx46(ChevronRightIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx45(Box23, { ml: 1, children: /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(Box23, { ml: 1, children: /* @__PURE__ */ jsx46(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3049,7 +3097,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledNext,
         onClick: () => handleSelectPage(total),
         visuallyHidden: "Last Page",
-        icon: /* @__PURE__ */ jsx45(ArrowRightIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx46(ArrowRightIcon, { width: 2 })
       }
     ) })
   ] });
@@ -3063,7 +3111,7 @@ var pagination_default = Pagination;
 
 // src/components/pagination/components/pagination-detail.tsx
 import { Text as Text11 } from "@chakra-ui/react";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var PaginationDetail = ({
   page,
   limit,
@@ -3073,7 +3121,7 @@ var PaginationDetail = ({
   lineHeight = 18,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx46(Text11, { scale, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
+  return /* @__PURE__ */ jsx47(Text11, { scale, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
 };
 var pagination_detail_default = PaginationDetail;
 
@@ -3081,7 +3129,7 @@ var pagination_detail_default = PaginationDetail;
 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";
+import { jsx as jsx48, jsxs as jsxs21 } from "react/jsx-runtime";
 var PaginationFilter = ({
   limit,
   label = "Baris per halaman:",
@@ -3091,8 +3139,8 @@ var PaginationFilter = ({
 }) => {
   const [value, setValue] = React13.useState(limit);
   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(
+    /* @__PURE__ */ jsx48(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue11("neutral.900", "white"), ...rest, children: label }),
+    /* @__PURE__ */ jsx48(
       Select,
       {
         textAlign: "center",
@@ -3101,7 +3149,7 @@ var PaginationFilter = ({
         border: "none",
         boxShadow: "none",
         width: 18,
-        icon: /* @__PURE__ */ jsx47(FiChevronDown, {}),
+        icon: /* @__PURE__ */ jsx48(FiChevronDown, {}),
         _focusVisible: { boxShadow: "none" },
         onChange: (e) => {
           const numberValue = Number(e.target.value);
@@ -3110,7 +3158,7 @@ var PaginationFilter = ({
         },
         value,
         children: items.map((item) => {
-          return /* @__PURE__ */ jsx47("option", { value: item, children: item }, item);
+          return /* @__PURE__ */ jsx48("option", { value: item, children: item }, item);
         })
       }
     )
@@ -3145,7 +3193,7 @@ import {
 
 // src/components/radio/components/radio.tsx
 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";
+import { jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
 var Radio = ({
   isError = false,
   helpText = "",
@@ -3156,8 +3204,8 @@ var Radio = ({
 }) => {
   const variant = isError ? "errors" : "unstyled";
   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 }) })
+    /* @__PURE__ */ jsx49(Box25, { display: "flex", children: /* @__PURE__ */ jsx49(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx49(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+    /* @__PURE__ */ jsx49(Box25, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx49(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx49(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
   ] });
 };
 Radio.displayName = "Radio";
@@ -3169,7 +3217,7 @@ Radio.defaultProps = {
 
 // src/components/radio/components/radio-group.tsx
 import { Box as Box26, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var RadioGroup = ({
   children,
   label,
@@ -3178,7 +3226,7 @@ var RadioGroup = ({
   errorMessage,
   ...props
 }) => {
-  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 }) }) }) });
+  return /* @__PURE__ */ jsx50(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx50(Box26, { mt: "12px", children: /* @__PURE__ */ jsx50(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx50(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 };
 RadioGroup.displayName = "RadioGroup";
 RadioGroup.defaultProps = {
@@ -3201,9 +3249,9 @@ import {
 // src/components/rating/components/rating.tsx
 import { Grid as Grid2 } from "@chakra-ui/react";
 import { Rating as RatingIcon } from "@ctlyst.id/internal-icon";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var Rating = ({ value }) => {
-  return /* @__PURE__ */ jsx50(Grid2, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx50(RatingIcon, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
+  return /* @__PURE__ */ jsx51(Grid2, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx51(RatingIcon, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
 };
 var rating_default = Rating;
 
@@ -3559,14 +3607,14 @@ var themeSelect = (theme6) => {
 };
 
 // src/components/select/components/select.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function Select2({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode3();
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     ReactSelect,
     {
       classNamePrefix: "react-select",
@@ -3581,14 +3629,14 @@ var select_default = Select2;
 // src/components/select/components/select-async.tsx
 import { useColorMode as useColorMode4 } from "@chakra-ui/system";
 import { AsyncPaginate } from "react-select-async-paginate";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function SelectAsync({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode4();
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     AsyncPaginate,
     {
       classNamePrefix: "react-select",
@@ -3603,10 +3651,10 @@ var select_async_default = SelectAsync;
 // src/components/select/components/select-async-creatable.tsx
 import { useColorMode as useColorMode5 } from "@chakra-ui/system";
 import ReactSelectAsyncCreatable from "react-select/async-creatable";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode5();
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     ReactSelectAsyncCreatable,
     {
       classNamePrefix: "react-select",
@@ -3620,10 +3668,10 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
 // src/components/select/components/select-creatable.tsx
 import { useColorMode as useColorMode6 } from "@chakra-ui/system";
 import ReactSelectCreatable from "react-select/creatable";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function SelectCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode6();
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     ReactSelectCreatable,
     {
       classNamePrefix: "react-select",
@@ -3638,7 +3686,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 import { Checkbox as Checkbox3, Flex as Flex8, Text as Text14 } from "@chakra-ui/react";
 import { useColorMode as useColorMode7 } from "@chakra-ui/system";
 import ReactSelect2, { components as ComponentRS } from "react-select";
-import { Fragment as Fragment6, jsx as jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs23 } from "react/jsx-runtime";
 var CHECKBOX_STATE = {
   UNCHECKED: 0,
   INDETERMINATE: 1,
@@ -3686,7 +3734,7 @@ var InputOption = ({
     style
   };
   return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       ComponentRS.Option,
       {
         isMulti: true,
@@ -3707,7 +3755,7 @@ var InputOption = ({
             "data-test-id": "CT_component_select-checkbox_options",
             cursor: isDisabled ? "not-allowed" : "default",
             children: [
-              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx55(
+              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx56(
                 Checkbox3,
                 {
                   isChecked: checkedState === CHECKBOX_STATE.CHECKED,
@@ -3715,14 +3763,14 @@ var InputOption = ({
                   isDisabled,
                   "data-test-id": "CT_component_select-checkbox_select-all-option"
                 }
-              ) : /* @__PURE__ */ jsx55(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
-              /* @__PURE__ */ jsx55(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
+              ) : /* @__PURE__ */ jsx56(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
+              /* @__PURE__ */ jsx56(Text14, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
             ]
           }
         )
       }
     ),
-    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx55("hr", {}) : null
+    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx56("hr", {}) : null
   ] });
 };
 var SelectWithCheckboxBase = ({
@@ -3732,7 +3780,7 @@ var SelectWithCheckboxBase = ({
   ...rest
 }) => {
   const { colorMode } = useColorMode7();
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     ReactSelect2,
     {
       classNamePrefix: "react-select",
@@ -3751,7 +3799,7 @@ var SelectWithCheckboxBase = ({
 var SelectCheckbox = (props) => {
   const { isMulti, options, value, ...rest } = props;
   const selectValue = value || [];
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     SelectWithCheckboxBase,
     {
       isMulti,
@@ -3762,7 +3810,7 @@ var SelectCheckbox = (props) => {
           const optionLength = (options == null ? void 0 : options.length) ? options.length - 1 : 0;
           const selectedValue = isSelected ? CHECKBOX_STATE.CHECKED : CHECKBOX_STATE.UNCHECKED;
           const checkedState = data.selectAllCheckbox ? getSelectAllCheckboxState(selectValue == null ? void 0 : selectValue.length, optionLength) : selectedValue;
-          return /* @__PURE__ */ jsx55(InputOption, { ...optionProps, checkedState });
+          return /* @__PURE__ */ jsx56(InputOption, { ...optionProps, checkedState });
         }
       },
       ...rest
@@ -3773,10 +3821,10 @@ var select_with_checkbox_default = SelectCheckbox;
 
 // src/components/switch/components/switch.tsx
 import { chakra as chakra6, Flex as Flex9, forwardRef as forwardRef13, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox2, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
-import { cx as cx9, dataAttr } from "@chakra-ui/shared-utils";
+import { cx as cx10, dataAttr } from "@chakra-ui/shared-utils";
 import { Check, Close as Close4 } from "@ctlyst.id/internal-icon";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx56, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs24 } from "react/jsx-runtime";
 var Switch = forwardRef13(function Switch2(props, ref) {
   const styles = useMultiStyleConfig2("Switch", props);
   const { spacing: spacing2 = "0.5rem", children, ...ownProps } = omitThemingProps2(props);
@@ -3825,16 +3873,16 @@ var Switch = forwardRef13(function Switch2(props, ref) {
       ...getRootProps(),
       display: "flex",
       alignItems: "center",
-      className: cx9("chakra-switch", props.className),
+      className: cx10("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ jsx56("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ jsx57("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
         /* @__PURE__ */ jsxs24(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
           /* @__PURE__ */ jsxs24(Flex9, { gap: 2, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ jsx56(Check, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx56(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+            /* @__PURE__ */ jsx57(Check, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ jsx57(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx57(
             chakra6.span,
             {
               __css: styles.thumb,
@@ -3844,7 +3892,7 @@ var Switch = forwardRef13(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx56(
+        children && /* @__PURE__ */ jsx57(
           chakra6.span,
           {
             className: "chakra-switch__label",
@@ -3881,13 +3929,13 @@ import {
 
 // src/components/tabs/components/tab.tsx
 import { Button as Button5, Flex as Flex10, forwardRef as forwardRef14, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx57, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
 var Tab = forwardRef14((props, ref) => {
   var _a, _b;
   const tabProps = useTab({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Button5,
     {
       "data-test-id": props["data-test-id"],
@@ -3959,7 +4007,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/text/index.ts
-import { Code, CodeProps, Heading, HeadingProps, Link as Link4, LinkProps, Text as Text15, TextProps } from "@chakra-ui/react";
+import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text as Text15, TextProps } from "@chakra-ui/react";
 
 // src/components/tooltip/index.ts
 import { Tooltip, TooltipProps } from "@chakra-ui/react";
@@ -3979,7 +4027,7 @@ var messages = {
 };
 
 // src/components/uploader/components/uploader.tsx
-import { jsx as jsx58, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs26 } from "react/jsx-runtime";
 var Uploader = ({
   onHandleUploadFile,
   onHandleRejections,
@@ -4040,11 +4088,11 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          /* @__PURE__ */ jsx58("input", { ...getInputProps() }),
-          isDragActive ? /* @__PURE__ */ jsx58(Text16, { children: messages.dragActive }) : /* @__PURE__ */ jsxs26(Flex11, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
-            !multiple && isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
-            !isSelected && /* @__PURE__ */ jsx58(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
-            isSelected ? /* @__PURE__ */ jsx58(Text16, { children: messages.dragReplace }) : /* @__PURE__ */ jsx58(Text16, { children: messages.dragInActive })
+          /* @__PURE__ */ jsx59("input", { ...getInputProps() }),
+          isDragActive ? /* @__PURE__ */ jsx59(Text16, { children: messages.dragActive }) : /* @__PURE__ */ jsxs26(Flex11, { flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : "primary.500", children: [
+            !multiple && isSelected && /* @__PURE__ */ jsx59(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, color: "black.high", mb: 2, children: selectedFirstFile == null ? void 0 : selectedFirstFile.name }),
+            !isSelected && /* @__PURE__ */ jsx59(Heading2, { fontWeight: 400, fontSize: "18px", lineHeight: 28, mb: 2, children: messages.uploadFile }),
+            isSelected ? /* @__PURE__ */ jsx59(Text16, { children: messages.dragReplace }) : /* @__PURE__ */ jsx59(Text16, { children: messages.dragInActive })
           ] })
         ]
       }
@@ -4836,7 +4884,7 @@ var baseStyle5 = definePartsStyle4({
     minWidth: 0,
     outline: 0,
     px: 2,
-    py: 2.5,
+    py: 2,
     paddingInlineStart: 2,
     paddingInlineEnd: 2,
     position: "relative",
@@ -4857,19 +4905,25 @@ var baseStyle5 = definePartsStyle4({
 });
 var size = {
   lg: defineStyle3({
-    fontSize: "text.lg",
+    textStyle: "text.lg",
     h: 12,
     borderRadius: "sm"
   }),
   md: defineStyle3({
-    fontSize: "text.md",
+    textStyle: "text.md",
     h: 10,
     borderRadius: "sm"
   }),
   sm: defineStyle3({
-    fontSize: "text.sm",
+    textStyle: "text.sm",
     h: 9.5,
     borderRadius: "sm"
+  }),
+  xs: defineStyle3({
+    textStyle: "text.sm",
+    p: 1,
+    h: 5.5,
+    borderRadius: "sm"
   })
 };
 var sizes2 = {
@@ -4884,6 +4938,10 @@ var sizes2 = {
   sm: definePartsStyle4({
     field: size.sm,
     addon: size.sm
+  }),
+  xs: definePartsStyle4({
+    field: size.xs,
+    addon: size.xs
   })
 };
 var outline = definePartsStyle4((props) => {
@@ -5651,7 +5709,7 @@ import { useMemo as useMemo7 } from "react";
 import axios from "axios";
 import { createContext as createContext2, useContext, useEffect as useEffect3, useMemo as useMemo6, useRef as useRef2 } from "react";
 import { ToastContainer } from "react-toastify";
-import { jsx as jsx59, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs27 } from "react/jsx-runtime";
 var ProviderContext = createContext2({
   instance: void 0
 });
@@ -5671,7 +5729,7 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo6(() => ({ instance: instanceRef.current }), []);
   return /* @__PURE__ */ jsxs27(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx59(ToastContainer, {}),
+    /* @__PURE__ */ jsx60(ToastContainer, {}),
     children
   ] });
 };
@@ -5857,7 +5915,7 @@ export {
   InputRightAddonProps,
   InputRightElement2 as InputRightElement,
   InputRightElementProps,
-  Link4 as Link,
+  Link5 as Link,
   LinkProps,
   List,
   ListIcon,
@@ -5883,6 +5941,7 @@ export {
   ModalOverlayProps,
   ModalProps,
   multi_datepicker_month_default as MultiDatePickerMonth,
+  NavItem,
   navigation_bar_default as NavigationBar,
   OrderedList,
   pagination_default as Pagination,