@ctlyst.id/internal-ui 3.0.1 → 3.1.0

package/dist/index.mjs

@@ -400,9 +400,9 @@ var badge_default = Badge;
 // src/components/breadcrumb/components/bread-crumb.tsx
 import { Box as Box4, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, IconButton, Text } from "@chakra-ui/react";
 import { ChevronLeft, ChevronsRight, Home } from "@ctlyst.id/internal-icon";
-import { jsx as jsx14, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx14, jsxs } from "react/jsx-runtime";
 var BreadCrumb = (props) => {
-  const { title, children, parents, className, disableHome, spacing: spacing2 = 2, backButton } = props;
+  const { title, children, parents, className, disableHome, spacing: spacing2 = 2, backButton, hideTitle } = props;
   return /* @__PURE__ */ jsxs(
     Box4,
     {
@@ -414,25 +414,27 @@ var BreadCrumb = (props) => {
       paddingY: 2,
       children: [
         /* @__PURE__ */ jsxs(Box4, { display: "flex", alignItems: "center", children: [
-          /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "center", children: [
-            backButton && /* @__PURE__ */ jsx14(
-              IconButton,
-              {
-                "data-test-id": "",
-                border: "1px solid",
-                borderColor: "neutral.100",
-                size: "sm",
-                minH: "9",
-                minW: "9",
-                bg: "white",
-                variant: "ghost",
-                "aria-label": "Edit",
-                icon: /* @__PURE__ */ jsx14(ChevronLeft, { size: 5 })
-              }
-            ),
-            /* @__PURE__ */ jsx14(Text, { pr: "2", textStyle: "heading.6", color: "neutral.700", children: title })
+          !hideTitle && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "center", children: [
+              backButton && /* @__PURE__ */ jsx14(
+                IconButton,
+                {
+                  "data-test-id": "",
+                  border: "1px solid",
+                  borderColor: "neutral.100",
+                  size: "sm",
+                  minH: "9",
+                  minW: "9",
+                  bg: "white",
+                  variant: "ghost",
+                  "aria-label": "Edit",
+                  icon: /* @__PURE__ */ jsx14(ChevronLeft, { size: 5 })
+                }
+              ),
+              /* @__PURE__ */ jsx14(Text, { pr: "2", textStyle: "heading.6", color: "neutral.700", children: title })
+            ] }),
+            /* @__PURE__ */ jsx14(Box4, { h: "5.5", borderLeft: "1px solid", borderColor: "neutral.600" })
           ] }),
-          /* @__PURE__ */ jsx14(Box4, { h: "5.5", borderLeft: "1px solid", borderColor: "neutral.600" }),
           /* @__PURE__ */ jsxs(
             Breadcrumb,
             {
@@ -482,7 +484,8 @@ BreadCrumb.defaultProps = {
   className: void 0,
   disableHome: void 0,
   spacing: 2,
-  backButton: void 0
+  backButton: void 0,
+  hideTitle: false
 };
 var bread_crumb_default = BreadCrumb;
 
@@ -2172,7 +2175,7 @@ TimeInput.defaultProps = {
 var time_input_default = TimeInput;
 
 // src/components/datepicker/components/datepicker.tsx
-import { Fragment, jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 var Datepicker = ({
   id: id2,
   label,
@@ -2200,7 +2203,7 @@ var Datepicker = ({
     };
   };
   const hasMultipleMonthShow = ((_b = props == null ? void 0 : props.monthsShown) != null ? _b : 1) < 2;
-  const component = /* @__PURE__ */ jsxs10(Fragment, { children: [
+  const component = /* @__PURE__ */ jsxs10(Fragment2, { children: [
     /* @__PURE__ */ jsx27(styles_default, { showHeader: !hasMultipleMonthShow }),
     /* @__PURE__ */ jsx27(
       ReactDatePicker,
@@ -2596,7 +2599,7 @@ NavItem.defaultProps = {
 };
 
 // src/components/header/components/profile.tsx
-import { Fragment as Fragment2, 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 Profile = ({ color: color2, brandColor, data, badgeStyle, children, onLogout, ...props }) => {
   var _a;
   const { isOpen, onToggle, onClose } = useDisclosure();
@@ -2622,7 +2625,7 @@ var Profile = ({ color: color2, brandColor, data, badgeStyle, children, onLogout
           /* @__PURE__ */ jsxs14(VStack2, { alignItems: "flex-end", spacing: "0", ml: "2", color: color2, children: [
             /* @__PURE__ */ jsx35(Text8, { textStyle: "text.xs", mb: "1", children: data == null ? void 0 : data.email }),
             /* @__PURE__ */ jsxs14(Flex5, { alignItems: "center", children: [
-              (data == null ? void 0 : data.userRole) && /* @__PURE__ */ jsxs14(Fragment2, { children: [
+              (data == null ? void 0 : data.userRole) && /* @__PURE__ */ jsxs14(Fragment3, { children: [
                 /* @__PURE__ */ jsx35(Text8, { textStyle: "text.xs", children: (data == null ? void 0 : data.userRole) || "user" }),
                 /* @__PURE__ */ jsx35(
                   Box16,
@@ -2635,7 +2638,7 @@ var Profile = ({ color: color2, brandColor, data, badgeStyle, children, onLogout
                   }
                 )
               ] }),
-              typeof (data == null ? void 0 : data.office) === "object" ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
+              typeof (data == null ? void 0 : data.office) === "object" ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
                 /* @__PURE__ */ jsx35(Text8, { textStyle: "text.xs", children: data.office[0] }),
                 data.office.length > 1 && /* @__PURE__ */ jsxs14(
                   badge_default,
@@ -2702,14 +2705,14 @@ function environmentName(env2) {
 }
 
 // src/components/header/components/version.tsx
-import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var Version = ({
   hideEnv,
   version,
   environment,
   onOpenModalRelease,
   versionStyle
-}) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
+}) => /* @__PURE__ */ jsxs15(Fragment4, { children: [
   typeof version === "string" ? /* @__PURE__ */ jsx37(
     badge_default,
     {
@@ -2896,101 +2899,36 @@ var ModalBackButton = ({ onClick }) => {
 };
 var modal_back_button_default = ModalBackButton;
 
-// src/components/modal/components/modal-body.tsx
-import { ModalBody as ChakraModalBody, useColorModeValue as useColorModeValue3 } from "@chakra-ui/react";
-import React9 from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
-var ModalBody2 = React9.forwardRef(({ children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx41(ChakraModalBody, { px: 4, py: 2, ref, background: useColorModeValue3("white", "mirage.900"), ...rest, children });
-});
-var modal_body_default = ModalBody2;
-
-// src/components/modal/components/modal-close-button.tsx
-import { ModalCloseButton as ChakraModalCloseButton, useColorModeValue as useColorModeValue4 } from "@chakra-ui/react";
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var ModalCloseButton = forwardRef9((props, ref) => {
-  return /* @__PURE__ */ jsx42(
-    ChakraModalCloseButton,
-    {
-      ref,
-      top: 2,
-      right: 2,
-      size: "sm",
-      "data-test-id": "modal-close-button",
-      background: useColorModeValue4("neutral.50", "mirage.900"),
-      ...props
-    }
-  );
-});
-var modal_close_button_default = ModalCloseButton;
-
-// src/components/modal/components/modal-footer.tsx
-import { ModalFooter as ChakraModalFooter, useColorModeValue as useColorModeValue5 } from "@chakra-ui/react";
-import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
-var ModalFooter2 = forwardRef10(({ children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx43(
-    ChakraModalFooter,
-    {
-      ref,
-      background: useColorModeValue5("neutral.200", "mirage.900"),
-      borderBottomRadius: "sm",
-      ...rest,
-      children
-    }
-  );
-});
-var modal_footer_default = ModalFooter2;
-
-// src/components/modal/components/modal-header.tsx
-import { ModalHeader as ChakraModalHeader, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
-import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
-var ModalHeader2 = forwardRef11(({ children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx44(
-    ChakraModalHeader,
-    {
-      ref,
-      background: useColorModeValue6("neutral.200", "mirage.900"),
-      borderTopRadius: "sm",
-      fontSize: "text.lg",
-      fontWeight: "400",
-      px: 4,
-      py: 2,
-      ...rest,
-      children
-    }
-  );
-});
-var modal_header_default = ModalHeader2;
-
 // src/components/modal/index.ts
 import {
   AlertDialog,
-  ModalBody as ModalBody3,
-  ModalCloseButton as ModalCloseButton2,
+  ModalBody as ModalBody2,
+  ModalCloseButton,
   AlertDialogContent,
-  ModalFooter as ModalFooter3,
-  ModalHeader as ModalHeader3,
+  ModalFooter as ModalFooter2,
+  ModalHeader as ModalHeader2,
   ModalOverlay as ModalOverlay2,
   AlertDialogProps,
   Drawer,
-  ModalBody as ModalBody4,
-  ModalCloseButton as ModalCloseButton3,
+  ModalBody as ModalBody3,
+  ModalCloseButton as ModalCloseButton2,
   DrawerContent,
   DrawerContentProps,
-  ModalFooter as ModalFooter4,
-  ModalHeader as ModalHeader4,
+  ModalFooter as ModalFooter3,
+  ModalHeader as ModalHeader3,
   ModalOverlay as ModalOverlay3,
   DrawerProps,
   Modal as Modal2,
+  ModalBody as ModalBody4,
   ModalBodyProps,
+  ModalCloseButton as ModalCloseButton3,
   ModalContent as ModalContent2,
   ModalContentProps,
   ModalContextProvider,
   ModalFocusScope,
+  ModalFooter as ModalFooter4,
   ModalFooterProps,
+  ModalHeader as ModalHeader4,
   ModalHeaderProps,
   ModalOverlay as ModalOverlay4,
   ModalOverlayProps,
@@ -3014,33 +2952,33 @@ import {
   PopoverTrigger as PopoverTrigger2,
   Portal,
   Text as Text9,
-  useColorModeValue as useColorModeValue7
+  useColorModeValue as useColorModeValue3
 } from "@chakra-ui/react";
 import * as Icon5 from "@ctlyst.id/internal-icon";
 import { css as css3 } from "@emotion/react";
 
 // src/components/navigation/components/mapping-icon.tsx
 import * as Icon4 from "@ctlyst.id/internal-icon";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var mappingIcon = /* @__PURE__ */ new Map([
-  ["Order", /* @__PURE__ */ jsx45(Icon4.ShoppingBag, { size: 4, color: "inherit" }, "order")],
-  ["Fulfillment", /* @__PURE__ */ jsx45(Icon4.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
-  ["Transfer Stock", /* @__PURE__ */ jsx45(Icon4.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
-  ["Stock", /* @__PURE__ */ jsx45(Icon4.Box, { size: 4, color: "inherit" }, "stock")],
-  ["Product Database", /* @__PURE__ */ jsx45(Icon4.Layers, { size: 4, color: "inherit" }, "product-database")],
-  ["Purchasing", /* @__PURE__ */ jsx45(Icon4.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
-  ["Reseller", /* @__PURE__ */ jsx45(Icon4.Users, { size: 4, color: "inherit" }, "reseller")],
-  ["Retur", /* @__PURE__ */ jsx45(Icon4.RotateCcw, { size: 4, color: "inherit" }, "retur")],
-  ["Other", /* @__PURE__ */ jsx45(Icon4.Settings, { size: 4, color: "inherit" }, "other")],
-  ["Content", /* @__PURE__ */ jsx45(Icon4.Layout, { size: 4, color: "inherit" }, "content")],
-  ["Customer", /* @__PURE__ */ jsx45(Icon4.HelpCircle, { size: 4, color: "inherit" }, "content")],
-  ["Voucher", /* @__PURE__ */ jsx45(Icon4.Gift, { size: 4, color: "inherit" }, "content")]
+  ["Order", /* @__PURE__ */ jsx41(Icon4.ShoppingBag, { size: 4, color: "inherit" }, "order")],
+  ["Fulfillment", /* @__PURE__ */ jsx41(Icon4.ShoppingCart, { size: 4, color: "inherit" }, "fullfilment")],
+  ["Transfer Stock", /* @__PURE__ */ jsx41(Icon4.Repeat, { size: 4, color: "inherit" }, "transfer-stock")],
+  ["Stock", /* @__PURE__ */ jsx41(Icon4.Box, { size: 4, color: "inherit" }, "stock")],
+  ["Product Database", /* @__PURE__ */ jsx41(Icon4.Layers, { size: 4, color: "inherit" }, "product-database")],
+  ["Purchasing", /* @__PURE__ */ jsx41(Icon4.DollarSign, { size: 4, color: "inherit" }, "purchasing")],
+  ["Reseller", /* @__PURE__ */ jsx41(Icon4.Users, { size: 4, color: "inherit" }, "reseller")],
+  ["Retur", /* @__PURE__ */ jsx41(Icon4.RotateCcw, { size: 4, color: "inherit" }, "retur")],
+  ["Other", /* @__PURE__ */ jsx41(Icon4.Settings, { size: 4, color: "inherit" }, "other")],
+  ["Content", /* @__PURE__ */ jsx41(Icon4.Layout, { size: 4, color: "inherit" }, "content")],
+  ["Customer", /* @__PURE__ */ jsx41(Icon4.HelpCircle, { size: 4, color: "inherit" }, "content")],
+  ["Voucher", /* @__PURE__ */ jsx41(Icon4.Gift, { size: 4, color: "inherit" }, "content")]
 ]);
 
 // src/components/navigation/components/navigation.tsx
-import { Fragment as Fragment4, jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
 var Navigation = ({ navigations, activePath, as, host, ...props }) => {
-  return /* @__PURE__ */ jsx46(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx42(Box21, { borderRadius: "md", overflowX: "auto", ...props, children: /* @__PURE__ */ jsx42(
     Flex9,
     {
       bg: "white",
@@ -3055,8 +2993,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__ */ jsx46(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-          /* @__PURE__ */ jsx46(PopoverTrigger2, { children: /* @__PURE__ */ jsx46(
+        return /* @__PURE__ */ jsx42(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment5, { children: [
+          /* @__PURE__ */ jsx42(PopoverTrigger2, { children: /* @__PURE__ */ jsx42(
             Button3,
             {
               h: 7.5,
@@ -3070,14 +3008,14 @@ 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__ */ jsx46(Icon5.ChevronDown, { size: 4, color: "inherit" }),
+              rightIcon: /* @__PURE__ */ jsx42(Icon5.ChevronDown, { size: 4, color: "inherit" }),
               children: navigation.title
             }
           ) }),
-          navigation.children && /* @__PURE__ */ jsx46(Portal, { children: /* @__PURE__ */ jsx46(Box21, { zIndex: "popover", children: /* @__PURE__ */ jsx46(
+          navigation.children && /* @__PURE__ */ jsx42(Portal, { children: /* @__PURE__ */ jsx42(Box21, { zIndex: "popover", children: /* @__PURE__ */ jsx42(
             PopoverContent2,
             {
-              bg: useColorModeValue7("white", "ebony-clay.800"),
+              bg: useColorModeValue3("white", "ebony-clay.800"),
               maxW: 250,
               border: "none",
               borderRadius: "md",
@@ -3086,7 +3024,7 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                 const link = navHost ? `${navHost}${navLink}` : navLink;
                 const isLocalLink = host === navHost;
                 const isActiveSub = activePath === navLink;
-                return /* @__PURE__ */ jsx46(
+                return /* @__PURE__ */ jsx42(
                   Link3,
                   {
                     as: isLocalLink ? as : void 0,
@@ -3103,8 +3041,8 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         cursor: "pointer",
                         transition: "padding 0.35s ease 0s",
                         _hover: {
-                          backgroundColor: useColorModeValue7("dove-gray.50", "mirage.900"),
-                          color: useColorModeValue7("primary.500", "dove-gray.600"),
+                          backgroundColor: useColorModeValue3("dove-gray.50", "mirage.900"),
+                          color: useColorModeValue3("primary.500", "dove-gray.600"),
                           px: 5,
                           py: 4,
                           _first: { borderTopRadius: "md" },
@@ -3118,8 +3056,8 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         py: 4,
                         children: [
                           mappingIcon.get(navigation.title),
-                          /* @__PURE__ */ jsx46(Text9, { fontSize: "text.sm", ml: 3, children: title }),
-                          isActiveSub && /* @__PURE__ */ jsx46(
+                          /* @__PURE__ */ jsx42(Text9, { fontSize: "text.sm", ml: 3, children: title }),
+                          isActiveSub && /* @__PURE__ */ jsx42(
                             Box21,
                             {
                               width: 0.5,
@@ -3155,7 +3093,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 Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text10 } from "@chakra-ui/react";
 import * as Icon6 from "@ctlyst.id/internal-icon";
-import { Fragment as Fragment5, jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
 var NavigationBar = ({
   navigations,
   isFetched,
@@ -3170,7 +3108,7 @@ var NavigationBar = ({
     }
     return subMenu.navHost + subMenu.navLink;
   };
-  return /* @__PURE__ */ jsx47(Box22, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx43(Box22, { hidden: isFetched && navigations === void 0, "data-test-id": "CT_component_navigation_cms", ...props, children: /* @__PURE__ */ jsx43(
     Flex10,
     {
       bg: "white",
@@ -3187,8 +3125,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__ */ jsx47(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
-          /* @__PURE__ */ jsx47(PopoverTrigger3, { children: /* @__PURE__ */ jsx47(
+        return /* @__PURE__ */ jsx43(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment6, { children: [
+          /* @__PURE__ */ jsx43(PopoverTrigger3, { children: /* @__PURE__ */ jsx43(
             Button4,
             {
               h: 7.5,
@@ -3202,11 +3140,11 @@ var NavigationBar = ({
               backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
               color: isActive ? "primary.50" : "black.high",
               leftIcon: mappingIcon2.get(item.title),
-              rightIcon: /* @__PURE__ */ jsx47(Icon6.ChevronDown, { size: 4, color: "inherit" }),
+              rightIcon: /* @__PURE__ */ jsx43(Icon6.ChevronDown, { size: 4, color: "inherit" }),
               children: item.title
             }
           ) }),
-          item.children && /* @__PURE__ */ jsx47(PopoverContent3, { bg: "white", boxShadow: "raised", borderRadius: "md", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
+          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),
@@ -3224,7 +3162,7 @@ var NavigationBar = ({
               "data-test-id": `CT_component_navigation_link-${item.id}`,
               children: [
                 mappingIcon2.get(item.title),
-                /* @__PURE__ */ jsx47(Text10, { textStyle: "text-sm", ml: 3, children: subMenu.title })
+                /* @__PURE__ */ jsx43(Text10, { textStyle: "text-sm", ml: 3, children: subMenu.title })
               ]
             },
             subMenu.id
@@ -3241,17 +3179,17 @@ var navigation_bar_default = NavigationBar;
 
 // src/components/pagination/components/pagination.tsx
 import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon } from "@chakra-ui/icons";
-import { Box as Box23, Text as Text11, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
+import { Box as Box23, Text as Text11, useColorModeValue as useColorModeValue5 } from "@chakra-ui/react";
 
 // src/components/pagination/components/pagination-button.tsx
-import { Button as Button5, forwardRef as forwardRef12, useColorModeValue as useColorModeValue8 } from "@chakra-ui/react";
-import { jsx as jsx48 } from "react/jsx-runtime";
-var PaginationButton = forwardRef12(({ className, style, isActive, children, ...rest }, ref) => {
-  const btnBg = useColorModeValue8("neutral.300", "mirage.900");
-  const btnColor = useColorModeValue8("black.high", "primary.300");
-  const btnNotActiveBg = useColorModeValue8("secondary.50", "primary.500");
-  const btnNotActiveColor = useColorModeValue8("primary.500", "white");
-  return /* @__PURE__ */ jsx48(
+import { Button as Button5, forwardRef as forwardRef9, useColorModeValue as useColorModeValue4 } from "@chakra-ui/react";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var PaginationButton = forwardRef9(({ className, style, isActive, children, ...rest }, ref) => {
+  const btnBg = useColorModeValue4("neutral.300", "mirage.900");
+  const btnColor = useColorModeValue4("black.high", "primary.300");
+  const btnNotActiveBg = useColorModeValue4("secondary.50", "primary.500");
+  const btnNotActiveColor = useColorModeValue4("primary.500", "white");
+  return /* @__PURE__ */ jsx44(
     Button5,
     {
       "data-test-id": "Pagination-Button",
@@ -3273,7 +3211,7 @@ var PaginationButton = forwardRef12(({ className, style, isActive, children, ...
         color: btnNotActiveColor
       } : {},
       _disabled: {
-        background: useColorModeValue8("neutral.300", "mirage.900"),
+        background: useColorModeValue4("neutral.300", "mirage.900"),
         color: "neutral.600",
         pointerEvents: "none"
       },
@@ -3290,7 +3228,7 @@ var pagination_button_default = PaginationButton;
 
 // src/components/pagination/components/pagination-button-trigger.tsx
 import { VisuallyHidden } from "@chakra-ui/react";
-import { jsx as jsx49, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
 var PaginationButtonTrigger = ({
   color: color2,
   isDisabled,
@@ -3298,7 +3236,7 @@ var PaginationButtonTrigger = ({
   visuallyHidden,
   icon
 }) => /* @__PURE__ */ jsxs19(pagination_button_default, { "data-test-id": "DLVCc_fBK35spHm5WxjcJ", color: color2, isDisabled, onClick, children: [
-  /* @__PURE__ */ jsx49(VisuallyHidden, { children: visuallyHidden }),
+  /* @__PURE__ */ jsx45(VisuallyHidden, { children: visuallyHidden }),
   icon
 ] });
 PaginationButtonTrigger.defaultProps = {
@@ -3311,10 +3249,10 @@ PaginationButtonTrigger.defaultProps = {
 var pagination_button_trigger_default = PaginationButtonTrigger;
 
 // src/components/pagination/components/pagination.tsx
-import { jsx as jsx50, 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 = useColorModeValue9("secondary.100", "primary.500");
-  const btnColor = useColorModeValue9("primary.500", "secondary.100");
+  const btnColorDisabled = useColorModeValue5("secondary.100", "primary.500");
+  const btnColor = useColorModeValue5("primary.500", "secondary.100");
   const disabledPrevious = current === 1;
   const previousButtonColor = disabledPrevious ? btnColorDisabled : btnColor;
   const disabledNext = current === total;
@@ -3342,7 +3280,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
     return pageButtons;
   };
   return /* @__PURE__ */ jsxs20(Box23, { className, display: "inline-flex", alignItems: "center", children: [
-    /* @__PURE__ */ jsx50(Box23, { mr: 1, children: /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx46(Box23, { mr: 1, children: /* @__PURE__ */ jsx46(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3350,11 +3288,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledPrevious,
         onClick: () => handleSelectPage(1),
         visuallyHidden: "First Page",
-        icon: /* @__PURE__ */ jsx50(ArrowLeftIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx46(ArrowLeftIcon, { width: 2 })
       }
     ) }),
     /* @__PURE__ */ jsxs20(Box23, { bg: "neutral.300", borderRadius: "full", children: [
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx46(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3362,22 +3300,22 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledPrevious,
           onClick: () => handleSelectPage(current - 1),
           visuallyHidden: "Previous Page",
-          icon: /* @__PURE__ */ jsx50(ChevronLeftIcon2, {})
+          icon: /* @__PURE__ */ jsx46(ChevronLeftIcon2, {})
         }
       ),
       generatePages().map((page) => {
-        return /* @__PURE__ */ jsx50(
+        return /* @__PURE__ */ jsx46(
           pagination_button_default,
           {
             "data-test-id": "Pagination-Button",
             isActive: page === current,
             onClick: () => typeof page === "number" ? handleSelectPage(page) : null,
-            children: /* @__PURE__ */ jsx50(Text11, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
+            children: /* @__PURE__ */ jsx46(Text11, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
           },
           page
         );
       }),
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx46(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3385,11 +3323,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledNext,
           onClick: () => handleSelectPage(current + 1),
           visuallyHidden: "Next Page",
-          icon: /* @__PURE__ */ jsx50(ChevronRightIcon, {})
+          icon: /* @__PURE__ */ jsx46(ChevronRightIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx50(Box23, { ml: 1, children: /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx46(Box23, { ml: 1, children: /* @__PURE__ */ jsx46(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3397,7 +3335,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledNext,
         onClick: () => handleSelectPage(total),
         visuallyHidden: "Last Page",
-        icon: /* @__PURE__ */ jsx50(ArrowRightIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx46(ArrowRightIcon, { width: 2 })
       }
     ) })
   ] });
@@ -3411,7 +3349,7 @@ var pagination_default = Pagination;
 
 // src/components/pagination/components/pagination-detail.tsx
 import { Text as Text12 } from "@chakra-ui/react";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var PaginationDetail = ({
   page,
   limit,
@@ -3421,15 +3359,15 @@ var PaginationDetail = ({
   lineHeight = 18,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx51(Text12, { scale: scale2, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
+  return /* @__PURE__ */ jsx47(Text12, { scale: scale2, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
 };
 var pagination_detail_default = PaginationDetail;
 
 // src/components/pagination/components/pagination-filter.tsx
-import { Box as Box24, Select, Text as Text13, useColorModeValue as useColorModeValue10 } from "@chakra-ui/react";
-import * as React13 from "react";
+import { Box as Box24, Select, Text as Text13, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
+import * as React9 from "react";
 import { FiChevronDown } from "react-icons/fi";
-import { jsx as jsx52, 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:",
@@ -3437,10 +3375,10 @@ var PaginationFilter = ({
   onChange,
   ...rest
 }) => {
-  const [value, setValue] = React13.useState(limit);
+  const [value, setValue] = React9.useState(limit);
   return /* @__PURE__ */ jsxs21(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
-    /* @__PURE__ */ jsx52(Text13, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue10("neutral.900", "white"), ...rest, children: label }),
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx48(Text13, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue6("neutral.900", "white"), ...rest, children: label }),
+    /* @__PURE__ */ jsx48(
       Select,
       {
         textAlign: "center",
@@ -3449,7 +3387,7 @@ var PaginationFilter = ({
         border: "none",
         boxShadow: "none",
         width: 18,
-        icon: /* @__PURE__ */ jsx52(FiChevronDown, {}),
+        icon: /* @__PURE__ */ jsx48(FiChevronDown, {}),
         _focusVisible: { boxShadow: "none" },
         onChange: (e) => {
           const numberValue = Number(e.target.value);
@@ -3458,7 +3396,7 @@ var PaginationFilter = ({
         },
         value,
         children: items.map((item) => {
-          return /* @__PURE__ */ jsx52("option", { value: item, children: item }, item);
+          return /* @__PURE__ */ jsx48("option", { value: item, children: item }, item);
         })
       }
     )
@@ -3470,6 +3408,23 @@ PaginationFilter.defaultProps = {
 };
 var pagination_filter_default = PaginationFilter;
 
+// src/components/pin-input/index.ts
+import {
+  PinInput,
+  PinInputContext,
+  PinInputDescendantsProvider,
+  PinInputField,
+  PinInputFieldProps,
+  PinInputProps,
+  PinInputProvider,
+  usePinInput,
+  usePinInputContext,
+  usePinInputField,
+  UsePinInputFieldProps,
+  UsePinInputProps,
+  UsePinInputReturn
+} from "@chakra-ui/react";
+
 // src/components/popover/index.ts
 import {
   Popover as Popover4,
@@ -3491,14 +3446,25 @@ import {
   PortalProps
 } from "@chakra-ui/react";
 
+// src/components/progress/index.ts
+import {
+  Progress,
+  ProgressFilledTrackProps,
+  ProgressLabel,
+  ProgressLabelProps,
+  ProgressProps,
+  ProgressTrackProps,
+  useProgressStyles
+} from "@chakra-ui/react";
+
 // src/components/radio/components/radio.tsx
 import { Box as Box25, Radio as ChakraRadio, Text as Text14 } from "@chakra-ui/react";
-import { jsx as jsx53, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
 var Radio = ({ isError = false, helpText, errorText, children, isDisabled, ...rest }) => {
   const variant = isError ? "errors" : "unstyled";
   return /* @__PURE__ */ jsxs22(Box25, { children: [
-    /* @__PURE__ */ jsx53(Box25, { display: "flex", children: /* @__PURE__ */ jsx53(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx53(Text14, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-    isError && errorText ? /* @__PURE__ */ jsx53(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx53(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) }) : helpText ? /* @__PURE__ */ jsx53(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx53(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) }) : null
+    /* @__PURE__ */ jsx49(Box25, { display: "flex", children: /* @__PURE__ */ jsx49(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx49(Text14, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+    isError && errorText ? /* @__PURE__ */ jsx49(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx49(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) }) : helpText ? /* @__PURE__ */ jsx49(Box25, { mt: "2", ml: "6", children: /* @__PURE__ */ jsx49(Text14, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) }) : null
   ] });
 };
 Radio.displayName = "Radio";
@@ -3510,7 +3476,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 jsx54 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var RadioGroup = ({
   children,
   label,
@@ -3519,7 +3485,7 @@ var RadioGroup = ({
   errorMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx54(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx54(Box26, { mt: "2", mb: "1", children: /* @__PURE__ */ jsx54(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx54(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
+  return /* @__PURE__ */ jsx50(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx50(Box26, { mt: "2", mb: "1", children: /* @__PURE__ */ jsx50(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx50(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 };
 RadioGroup.displayName = "RadioGroup";
 RadioGroup.defaultProps = {
@@ -3542,9 +3508,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 jsx55 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var Rating = ({ value }) => {
-  return /* @__PURE__ */ jsx55(Grid2, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx55(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;
 
@@ -3900,14 +3866,14 @@ var themeSelect = (theme5) => {
 };
 
 // src/components/select/components/select.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function Select2({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode3();
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx52(
     ReactSelect,
     {
       classNamePrefix: "react-select",
@@ -3922,14 +3888,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 jsx57 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function SelectAsync({
   styles,
   isError = false,
   ...rest
 }) {
   const { colorMode } = useColorMode4();
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx53(
     AsyncPaginate,
     {
       classNamePrefix: "react-select",
@@ -3944,10 +3910,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 jsx58 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode5();
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx54(
     ReactSelectAsyncCreatable,
     {
       classNamePrefix: "react-select",
@@ -3961,10 +3927,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 jsx59 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 function SelectCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode6();
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx55(
     ReactSelectCreatable,
     {
       classNamePrefix: "react-select",
@@ -3979,7 +3945,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
 import { Checkbox as Checkbox3, Flex as Flex11, 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 Fragment6, jsx as jsx60, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx56, jsxs as jsxs23 } from "react/jsx-runtime";
 var CHECKBOX_STATE = {
   UNCHECKED: 0,
   INDETERMINATE: 1,
@@ -4026,8 +3992,8 @@ var InputOption = ({
     onClick: isDisabled ? void 0 : innerProps.onClick,
     style
   };
-  return /* @__PURE__ */ jsxs23(Fragment6, { children: [
-    /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
+    /* @__PURE__ */ jsx56(
       ComponentRS.Option,
       {
         isMulti: true,
@@ -4048,7 +4014,7 @@ var InputOption = ({
             "data-test-id": "CT_component_select-checkbox_options",
             cursor: isDisabled ? "not-allowed" : "default",
             children: [
-              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx60(
+              (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx56(
                 Checkbox3,
                 {
                   isChecked: checkedState === CHECKBOX_STATE.CHECKED,
@@ -4056,14 +4022,14 @@ var InputOption = ({
                   isDisabled,
                   "data-test-id": "CT_component_select-checkbox_select-all-option"
                 }
-              ) : /* @__PURE__ */ jsx60(Checkbox3, { isChecked: isSelected, "data-test-id": "CT_component_select-checkbox_option-checkbox" }),
-              /* @__PURE__ */ jsx60(Text15, { 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(Text15, { textStyle: "text.sm", "data-test-id": `select-checkbox-option-label-${data.value}`, children })
             ]
           }
         )
       }
     ),
-    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx60("hr", {}) : null
+    (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx56("hr", {}) : null
   ] });
 };
 var SelectWithCheckboxBase = ({
@@ -4073,7 +4039,7 @@ var SelectWithCheckboxBase = ({
   ...rest
 }) => {
   const { colorMode } = useColorMode7();
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx56(
     ReactSelect2,
     {
       classNamePrefix: "react-select",
@@ -4092,7 +4058,7 @@ var SelectWithCheckboxBase = ({
 var SelectCheckbox = (props) => {
   const { isMulti, options, value, ...rest } = props;
   const selectValue = value || [];
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx56(
     SelectWithCheckboxBase,
     {
       isMulti,
@@ -4103,7 +4069,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__ */ jsx60(InputOption, { ...optionProps, checkedState });
+          return /* @__PURE__ */ jsx56(InputOption, { ...optionProps, checkedState });
         }
       },
       ...rest
@@ -4120,12 +4086,12 @@ import { __assign as __assign25 } from "tslib";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/motion/index.mjs
 import { __assign as __assign2 } from "tslib";
-import * as React15 from "react";
-import { forwardRef as forwardRef13, useContext as useContext7 } from "react";
+import * as React11 from "react";
+import { forwardRef as forwardRef10, useContext as useContext7 } from "react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/motion/features/use-features.mjs
 import { __assign } from "tslib";
-import * as React14 from "react";
+import * as React10 from "react";
 import { useContext } from "react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/utils/process.mjs
@@ -4220,7 +4186,7 @@ function useFeatures(props, visualElement2, preloadedFeatures) {
     var name_1 = featureNames[i];
     var _a = featureDefinitions[name_1], isEnabled = _a.isEnabled, Component = _a.Component;
     if (isEnabled(props) && Component) {
-      features.push(React14.createElement(Component, __assign({ key: name_1 }, props, { visualElement: visualElement2 })));
+      features.push(React10.createElement(Component, __assign({ key: name_1 }, props, { visualElement: visualElement2 })));
     }
   }
   return features;
@@ -4563,14 +4529,14 @@ function createMotionComponent(_a) {
       useProjection(projectionId, props, context.visualElement, projectionNodeConstructor || featureDefinitions.projectionNodeConstructor);
       features = useFeatures(props, context.visualElement, preloadedFeatures);
     }
-    return React15.createElement(
+    return React11.createElement(
       VisualElementHandler,
       { visualElement: context.visualElement, props: __assign2(__assign2({}, config2), props) },
       features,
-      React15.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config2.isStatic, context.visualElement))
+      React11.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config2.isStatic, context.visualElement))
     );
   }
-  return forwardRef13(MotionComponent);
+  return forwardRef10(MotionComponent);
 }
 function useLayoutId(_a) {
   var _b;
@@ -10801,7 +10767,7 @@ var motion = /* @__PURE__ */ createMotionProxy(function(Component, config2) {
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
 import { __read as __read20, __spreadArray as __spreadArray8 } from "tslib";
-import * as React17 from "react";
+import * as React13 from "react";
 import { useContext as useContext13, useRef as useRef8, cloneElement, Children, isValidElement } from "react";
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/utils/use-force-update.mjs
@@ -10836,7 +10802,7 @@ function useForceUpdate() {
 
 // ../../node_modules/.pnpm/framer-motion@6.5.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs
 import { __values } from "tslib";
-import * as React16 from "react";
+import * as React12 from "react";
 import { useMemo as useMemo6 } from "react";
 var PresenceChild = function(_a) {
   var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
@@ -10889,10 +10855,10 @@ var PresenceChild = function(_a) {
       return presenceChildren.set(key, false);
     });
   }, [isPresent]);
-  React16.useEffect(function() {
+  React12.useEffect(function() {
     !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
   }, [isPresent]);
-  return React16.createElement(PresenceContext.Provider, { value: context }, children);
+  return React12.createElement(PresenceContext.Provider, { value: context }, children);
 };
 function newChildrenMap() {
   return /* @__PURE__ */ new Map();
@@ -10940,8 +10906,8 @@ var AnimatePresence = function(_a) {
     exiting.clear();
   });
   if (isInitialRender.current) {
-    return React17.createElement(React17.Fragment, null, childrenToRender.map(function(child) {
-      return React17.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? void 0 : false, presenceAffectsLayout }, child);
+    return React13.createElement(React13.Fragment, null, childrenToRender.map(function(child) {
+      return React13.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? void 0 : false, presenceAffectsLayout }, child);
     }));
   }
   childrenToRender = __spreadArray8([], __read20(childrenToRender), false);
@@ -10979,35 +10945,36 @@ var AnimatePresence = function(_a) {
         onExitComplete && onExitComplete();
       }
     };
-    childrenToRender.splice(insertionIndex, 0, React17.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom, presenceAffectsLayout }, child));
+    childrenToRender.splice(insertionIndex, 0, React13.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom, presenceAffectsLayout }, child));
   });
   childrenToRender = childrenToRender.map(function(child) {
     var key2 = child.key;
-    return exiting.has(key2) ? child : React17.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout }, child);
+    return exiting.has(key2) ? child : React13.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout }, child);
   });
   if (env !== "production" && exitBeforeEnter && childrenToRender.length > 1) {
     console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
   }
-  return React17.createElement(React17.Fragment, null, exiting.size ? childrenToRender : childrenToRender.map(function(child) {
+  return React13.createElement(React13.Fragment, null, exiting.size ? childrenToRender : childrenToRender.map(function(child) {
     return cloneElement(child);
   }));
 };
 
 // src/components/sidebar/components/sidebar.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var Sidebar = ({ isCollapse, children, ...props }) => {
-  return /* @__PURE__ */ jsx61(
+  const { width = "220px" } = props;
+  return /* @__PURE__ */ jsx57(
     Flex12,
     {
       position: "relative",
       as: motion.div,
-      w: "174px",
+      w: width,
       bg: "pureWhite",
       h: props.h,
       flexDirection: "column",
       overflow: "hidden",
       shadow: "raised",
-      animate: { width: isCollapse ? "62px" : "174px" },
+      animate: { width: isCollapse ? "62px" : width },
       transition: "10ms linear",
       ...props,
       children
@@ -11019,9 +10986,9 @@ 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 { ArrowRight } from "@ctlyst.id/internal-icon";
-import { jsx as jsx62, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
 var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx58(
     Box27,
     {
       px: "2",
@@ -11041,7 +11008,7 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
           onClick: () => setCollapse(!isCollapse),
           cursor: "pointer",
           children: [
-            /* @__PURE__ */ jsx62(
+            /* @__PURE__ */ jsx58(
               Box27,
               {
                 as: motion.div,
@@ -11050,10 +11017,10 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
                 transition: "ease-in-out",
                 transitionDuration: "1ms",
                 "aria-label": "toggle sidebar",
-                children: /* @__PURE__ */ jsx62(ArrowRight, { size: 4, color: "inherit" })
+                children: /* @__PURE__ */ jsx58(ArrowRight, { size: 4, color: "inherit" })
               }
             ),
-            /* @__PURE__ */ jsx62(AnimatePresence, { children: !isCollapse && /* @__PURE__ */ jsx62(Box27, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx62(
+            /* @__PURE__ */ jsx58(AnimatePresence, { children: !isCollapse && /* @__PURE__ */ jsx58(Box27, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx58(
               Text16,
               {
                 as: motion.div,
@@ -11064,6 +11031,7 @@ var SidebarHeader = ({ isCollapse, setCollapse, title }) => {
                 animate: { opacity: 1, x: 0 },
                 exit: { opacity: 0, x: 16 },
                 transition: "10ms linear",
+                userSelect: "none",
                 children: title
               }
             ) }) })
@@ -11094,21 +11062,26 @@ import {
   Text as Text17
 } from "@chakra-ui/react";
 import * as Icon7 from "@ctlyst.id/internal-icon";
-import { Fragment as Fragment8, jsx as jsx63, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx59, jsxs as jsxs25 } from "react/jsx-runtime";
 var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, setActive, active }) => {
-  return /* @__PURE__ */ jsx63(Box28, { as: motion.div, animate: { padding: isCollapse ? "8px 16px" : "8px" }, children: /* @__PURE__ */ jsx63(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);
-    return /* @__PURE__ */ jsx63(AccordionItem2, { mt: "4", children: ({ isExpanded }) => {
+  return /* @__PURE__ */ jsx59(Box28, { as: motion.div, animate: { padding: isCollapse ? "8px 16px" : "8px" }, children: /* @__PURE__ */ jsx59(Accordion2, { index: menu.findIndex((item) => item.children.some((child) => child.navLink === active)), children: menu.map((item) => {
+    let isActive;
+    if (item.navLink.includes("/")) {
+      isActive = item.navLink === active;
+    } else {
+      isActive = active == null ? void 0 : active.includes(item.navLink);
+    }
+    return /* @__PURE__ */ jsx59(AccordionItem2, { mt: "4", children: ({ isExpanded }) => {
       const isOpenOptions = isCollapse || !isCollapse && !isExpanded;
       const noChild = !item.children.length;
       const offsetStyle = isCollapse ? noChild ? [-5, 16] : [-1, 16] : [-1, 8];
-      return /* @__PURE__ */ jsxs25(Fragment8, { children: [
-        /* @__PURE__ */ jsx63(Popover5, { trigger: "hover", placement: "right-start", offset: offsetStyle, children: ({ isOpen, onClose }) => {
+      return /* @__PURE__ */ jsxs25(Fragment9, { children: [
+        /* @__PURE__ */ jsx59(Popover5, { 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__ */ jsxs25(Fragment8, { children: [
-            /* @__PURE__ */ jsx63(PopoverTrigger5, { children: /* @__PURE__ */ jsx63(
+          return /* @__PURE__ */ jsxs25(Fragment9, { children: [
+            /* @__PURE__ */ jsx59(PopoverTrigger5, { children: /* @__PURE__ */ jsx59(
               AccordionButton2,
               {
                 "data-test-id": `CTA_button-accordion-${item.title}`,
@@ -11126,7 +11099,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                     position: "relative",
                     ...itemStyles,
                     children: [
-                      mappingIcon2 && /* @__PURE__ */ jsx63(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
+                      mappingIcon2 && /* @__PURE__ */ jsx59(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
                       !isCollapse && /* @__PURE__ */ jsxs25(
                         Box28,
                         {
@@ -11141,15 +11114,15 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                           animate: { opacity: 1, x: 0 },
                           exit: { opacity: 0, x: 16 },
                           children: [
-                            /* @__PURE__ */ jsx63(Box28, { h: "3.5", position: "relative", children: /* @__PURE__ */ jsx63(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
-                            !!item.children.length && /* @__PURE__ */ jsx63(
+                            /* @__PURE__ */ jsx59(Box28, { h: "3.5", position: "relative", children: /* @__PURE__ */ jsx59(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) }),
+                            !!item.children.length && /* @__PURE__ */ jsx59(
                               Box28,
                               {
                                 display: "flex",
                                 boxSize: "3",
                                 as: motion.div,
                                 animate: { transform: isExpanded ? "rotate(-180deg)" : "rotate(0)" },
-                                children: /* @__PURE__ */ jsx63(Icon7.ChevronDown, { size: 3 })
+                                children: /* @__PURE__ */ jsx59(Icon7.ChevronDown, { size: 3 })
                               }
                             )
                           ]
@@ -11162,12 +11135,12 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
               },
               item.id
             ) }, item.id),
-            isOpenOptions && /* @__PURE__ */ jsx63(Portal3, { children: item.children.length > 0 ? /* @__PURE__ */ jsxs25(PopoverContent5, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
-              /* @__PURE__ */ jsx63(PopoverHeader2, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ jsxs25(Box28, { display: "flex", alignItems: "center", children: [
+            isOpenOptions && /* @__PURE__ */ jsx59(Portal3, { children: item.children.length > 0 ? /* @__PURE__ */ jsxs25(PopoverContent5, { w: "176px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: [
+              /* @__PURE__ */ jsx59(PopoverHeader2, { borderColor: "neutral.300", textStyle: "text.xs", p: "2", children: mappingIcon2 && /* @__PURE__ */ jsxs25(Box28, { display: "flex", alignItems: "center", children: [
                 mappingIcon2.get(item.icon || ""),
-                /* @__PURE__ */ jsx63(Box28, { as: "span", ml: "2", children: item.title })
+                /* @__PURE__ */ jsx59(Box28, { as: "span", ml: "2", children: item.title })
               ] }) }),
-              !!item.children.length && /* @__PURE__ */ jsx63(PopoverBody3, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx63(
+              !!item.children.length && /* @__PURE__ */ jsx59(PopoverBody3, { pb: "1", px: "0", pt: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx59(
                 NavItem,
                 {
                   "data-test-id": `CTA_Sidebar-popover-item-${submenu.id}`,
@@ -11183,7 +11156,7 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                 },
                 submenu.id
               )) })
-            ] }) : isCollapse && /* @__PURE__ */ jsx63(PopoverContent5, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ jsx63(PopoverBody3, { py: "1", px: "0", children: /* @__PURE__ */ jsxs25(
+            ] }) : isCollapse && /* @__PURE__ */ jsx59(PopoverContent5, { w: "174px", borderColor: "neutral.200", bg: "white", rounded: "sm", children: /* @__PURE__ */ jsx59(PopoverBody3, { py: "1", px: "0", children: /* @__PURE__ */ jsxs25(
               NavItem,
               {
                 "data-test-id": `CTA_Sidebar-popover-item-${item.id}`,
@@ -11196,15 +11169,15 @@ var SidebarMenu = ({ menu, isCollapse, mappingIcon: mappingIcon2, itemStyles, se
                 rounded: "none",
                 ...itemStyles,
                 children: [
-                  mappingIcon2 && /* @__PURE__ */ jsx63(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
-                  /* @__PURE__ */ jsx63(Box28, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx63(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
+                  mappingIcon2 && /* @__PURE__ */ jsx59(Box28, { display: "flex", boxSize: "3", transition: "50ms linear", children: mappingIcon2.get(item.icon || "") }),
+                  /* @__PURE__ */ jsx59(Box28, { h: "3.5", position: "relative", ml: "2", children: /* @__PURE__ */ jsx59(Text17, { textStyle: "text.xs", w: "max-content", position: "absolute", children: item.title }) })
                 ]
               },
               item.id
             ) }) }) })
           ] });
         } }, item.id),
-        !isCollapse && /* @__PURE__ */ jsx63(AccordionPanel2, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx63(
+        !isCollapse && /* @__PURE__ */ jsx59(AccordionPanel2, { mt: "1", p: "0", children: item.children.map((submenu) => /* @__PURE__ */ jsx59(
           NavItem,
           {
             mt: "1",
@@ -11228,12 +11201,12 @@ SidebarMenu.defaultProps = {
 };
 
 // src/components/switch/components/switch.tsx
-import { chakra as chakra6, Flex as Flex14, forwardRef as forwardRef14, omitThemingProps as omitThemingProps2, useCheckbox as useCheckbox3, useMultiStyleConfig as useMultiStyleConfig2 } from "@chakra-ui/react";
+import { chakra as chakra6, Flex as Flex14, forwardRef as forwardRef11, 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 { useMemo as useMemo7 } from "react";
-import { jsx as jsx64, jsxs as jsxs26 } from "react/jsx-runtime";
-var Switch = forwardRef14(function Switch2(props, ref) {
+import { jsx as jsx60, jsxs as jsxs26 } from "react/jsx-runtime";
+var Switch = forwardRef11(function Switch2(props, ref) {
   const styles = useMultiStyleConfig2("Switch", props);
   const { spacing: spacing2 = "0.5rem", children, ...ownProps } = omitThemingProps2(props);
   const { state, getInputProps, getCheckboxProps, getRootProps, getLabelProps } = useCheckbox3(ownProps);
@@ -11284,13 +11257,13 @@ var Switch = forwardRef14(function Switch2(props, ref) {
       className: cx10("chakra-switch", props.className),
       __css: containerStyles,
       children: [
-        /* @__PURE__ */ jsx64("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
+        /* @__PURE__ */ jsx60("input", { "data-test-id": "", className: "chakra-switch__input", ...getInputProps({}, ref) }),
         /* @__PURE__ */ jsxs26(chakra6.span, { ...getCheckboxProps(), className: "chakra-switch__track", pos: "relative", __css: trackStyles, children: [
           /* @__PURE__ */ jsxs26(Flex14, { gap: 1, pos: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", children: [
-            /* @__PURE__ */ jsx64(Check2, { color: "white", size: getIconSize(props.size) }),
-            /* @__PURE__ */ jsx64(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
+            /* @__PURE__ */ jsx60(Check2, { color: "white", size: getIconSize(props.size) }),
+            /* @__PURE__ */ jsx60(Close4, { color: state.isDisabled ? "neutral.600" : "neutral.900", size: getIconSize(props.size) })
           ] }),
-          /* @__PURE__ */ jsx64(
+          /* @__PURE__ */ jsx60(
             chakra6.span,
             {
               __css: styles.thumb,
@@ -11300,7 +11273,7 @@ var Switch = forwardRef14(function Switch2(props, ref) {
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx64(
+        children && /* @__PURE__ */ jsx60(
           chakra6.span,
           {
             className: "chakra-switch__label",
@@ -11337,14 +11310,14 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/tabs/components/tab.tsx
-import { Button as Button6, Flex as Flex15, forwardRef as forwardRef15, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
-import { jsx as jsx65, jsxs as jsxs27 } from "react/jsx-runtime";
-var Tab = forwardRef15((props, ref) => {
+import { Button as Button6, Flex as Flex15, forwardRef as forwardRef12, useMultiStyleConfig as useMultiStyleConfig3, useTab } from "@chakra-ui/react";
+import { jsx as jsx61, jsxs as jsxs27 } from "react/jsx-runtime";
+var Tab = forwardRef12((props, ref) => {
   var _a, _b;
   const tabProps = useTab({ ...props, ref });
   const isSelected = !!tabProps["aria-selected"];
   const styles = useMultiStyleConfig3("Tabs", tabProps);
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx61(
     Button6,
     {
       "data-test-id": props["data-test-id"],
@@ -11421,33 +11394,44 @@ import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text
 // src/components/toast/components/toast.tsx
 import { chakra as chakra7, Flex as Flex16, Link as Link6, useToken } from "@chakra-ui/react";
 import { Bounce, toast } from "react-toastify";
-import { jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
-var toastStyles = `
-  .Toastify__toast-container {
-    width: 380px;
-  }
 
-  .container-toast {
-    height: 64px;
-    width: 380px;
-    border-radius: 4px;
-    font-family: Poppins;
-  }
+// src/components/toast/components/styles.tsx
+import { Global as Global2 } from "@emotion/react";
+import { jsx as jsx62 } from "react/jsx-runtime";
+var Styles2 = () => {
+  return /* @__PURE__ */ jsx62(
+    Global2,
+    {
+      styles: `
+        .Toastify__toast-container {
+          width: 380px;
+        }
 
-  @media (max-width: 480px) {
-    .container-toast {
-      margin: 16px !important;
-      width: calc(100% - 32px); /* Adjust width to fit within the margin */
-    }
+        .container-toast {
+          height: 64px;
+          width: 380px;
+          border-radius: 4px;
+          font-family: Poppins;
+        }
 
-    .Toastify__toast-container {
-      width: 100%;
+        @media (max-width: 480px) {
+          .container-toast {
+            margin: 16px !important;
+            width: calc(100% - 32px); /* Adjust width to fit within the margin */
+          }
+
+          .Toastify__toast-container {
+            width: 100%;
+          }
+        }
+      `
     }
-  }
-`;
-var styleSheet = document.createElement("style");
-styleSheet.innerText = toastStyles;
-document.head.appendChild(styleSheet);
+  );
+};
+var styles_default2 = Styles2;
+
+// src/components/toast/components/toast.tsx
+import { Fragment as Fragment10, jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
 var DEFAULT_OPTIONS = {
   position: "top-right",
   autoClose: 5e3,
@@ -11478,23 +11462,26 @@ var useToast = () => {
     "success.500"
   ]);
   const content = (icon, message, link) => {
-    return /* @__PURE__ */ jsxs28(Flex16, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
-      /* @__PURE__ */ jsxs28(Flex16, { alignItems: "center", children: [
-        icon && /* @__PURE__ */ jsx66(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
-        /* @__PURE__ */ jsx66(chakra7.span, { noOfLines: 2, children: message })
-      ] }),
-      link && /* @__PURE__ */ jsx66(
-        Link6,
-        {
-          href: link.url,
-          textDecoration: "underline",
-          minW: "max-content",
-          textAlign: "right",
-          textStyle: "text.sm",
-          fontWeight: "semibold",
-          children: link.label
-        }
-      )
+    return /* @__PURE__ */ jsxs28(Fragment10, { children: [
+      /* @__PURE__ */ jsx63(styles_default2, {}),
+      /* @__PURE__ */ jsxs28(Flex16, { justifyContent: "space-between", alignItems: "center", gap: 4, children: [
+        /* @__PURE__ */ jsxs28(Flex16, { alignItems: "center", children: [
+          icon && /* @__PURE__ */ jsx63(chakra7.span, { mr: 2, w: 4, h: 4, children: renderIcon(icon, "default") }),
+          /* @__PURE__ */ jsx63(chakra7.span, { noOfLines: 2, children: message })
+        ] }),
+        link && /* @__PURE__ */ jsx63(
+          Link6,
+          {
+            href: link.url,
+            textDecoration: "underline",
+            minW: "max-content",
+            textAlign: "right",
+            textStyle: "text.sm",
+            fontWeight: "semibold",
+            children: link.label
+          }
+        )
+      ] })
     ] });
   };
   return {
@@ -11570,17 +11557,17 @@ import {
   Portal as Portal4,
   Tooltip as ChakraTooltip
 } from "@chakra-ui/react";
-import { jsx as jsx67, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
 var Tooltip = (props) => {
   const { children, bg = "neutral.700", textStyle = "text.sm", color: color2 = "white" } = props;
   const content = /* @__PURE__ */ jsxs29(PopoverContent6, { border: "none", bg, textStyle, borderRadius: props.borderRadius, children: [
-    props.hasArrow && /* @__PURE__ */ jsx67(PopoverArrow3, { color: color2, bg }),
-    /* @__PURE__ */ jsx67(PopoverBody4, { color: color2, ...props, children: props.label })
+    props.hasArrow && /* @__PURE__ */ jsx64(PopoverArrow3, { color: color2, bg }),
+    /* @__PURE__ */ jsx64(PopoverBody4, { color: color2, ...props, children: props.label })
   ] });
   return props.isInteractive === true ? /* @__PURE__ */ jsxs29(Popover6, { trigger: "hover", placement: props.placement, children: [
-    /* @__PURE__ */ jsx67(PopoverTrigger6, { children }),
-    props.portal ? /* @__PURE__ */ jsx67(Portal4, { children: content }) : content
-  ] }) : /* @__PURE__ */ jsx67(ChakraTooltip, { ...props, children });
+    /* @__PURE__ */ jsx64(PopoverTrigger6, { children }),
+    props.portal ? /* @__PURE__ */ jsx64(Portal4, { children: content }) : content
+  ] }) : /* @__PURE__ */ jsx64(ChakraTooltip, { ...props, children });
 };
 
 // src/components/uploader/components/uploader.tsx
@@ -11628,7 +11615,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 Fragment9, jsx as jsx68, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
 import { createElement as createElement6 } from "react";
 var Uploader = ({
   onHandleUploadFile,
@@ -11717,11 +11704,11 @@ var Uploader = ({
   });
   const renderHelperText = () => {
     if (Array.isArray(helperText)) {
-      return /* @__PURE__ */ jsx68(UnorderedList2, { pl: 2, fontSize: 12, color: "gray.600", "data-test-id": "CT_component_base-image-uploader_helperText", children: helperText.map((text2) => /* @__PURE__ */ jsx68(ListItem2, { children: text2 }, text2)) });
+      return /* @__PURE__ */ jsx65(UnorderedList2, { pl: 2, fontSize: 12, color: "gray.600", "data-test-id": "CT_component_base-image-uploader_helperText", children: helperText.map((text2) => /* @__PURE__ */ jsx65(ListItem2, { children: text2 }, text2)) });
     }
     return helperText;
   };
-  const renderErrorText = (text2) => /* @__PURE__ */ jsx68(Box29, { mb: 2, children: /* @__PURE__ */ jsx68(Text19, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
+  const renderErrorText = (text2) => /* @__PURE__ */ jsx65(Box29, { mb: 2, children: /* @__PURE__ */ jsx65(Text19, { textStyle: "text.xs", color: "danger.500", children: text2 }) });
   const handleRemove = (e) => {
     e.stopPropagation();
     setFilePreview(void 0);
@@ -11747,8 +11734,8 @@ 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__ */ jsx68(Fragment9, {}), fontSize: "text.sm", children: [
-        isRequired && /* @__PURE__ */ jsx68(RequiredIndicator2, { mr: 1, ml: 0 }),
+      /* @__PURE__ */ jsxs30(FormLabel4, { requiredIndicator: /* @__PURE__ */ jsx65(Fragment11, {}), fontSize: "text.sm", children: [
+        isRequired && /* @__PURE__ */ jsx65(RequiredIndicator2, { mr: 1, ml: 0 }),
         label
       ] })
     ) : label,
@@ -11770,7 +11757,7 @@ var Uploader = ({
         ...props,
         ...getRootProps(),
         children: [
-          filePreview && isShowCloseButton && /* @__PURE__ */ jsx68(Box29, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ jsx68(
+          filePreview && isShowCloseButton && /* @__PURE__ */ jsx65(Box29, { position: "absolute", top: 1, right: 1, children: /* @__PURE__ */ jsx65(
             Button7,
             {
               "data-test-id": `CT_component_base-image-uploader_remove-image${testId ? `_${testId}` : ""}`,
@@ -11785,17 +11772,17 @@ var Uploader = ({
               border: "none",
               zIndex: 1,
               onClick: handleRemove,
-              children: /* @__PURE__ */ jsx68(X, { size: 3, color: "white" })
+              children: /* @__PURE__ */ jsx65(X, { size: 3, color: "white" })
             }
           ) }),
-          filePreview && /* @__PURE__ */ jsx68(Box29, { w: "full", children: /* @__PURE__ */ jsx68(
+          filePreview && /* @__PURE__ */ jsx65(Box29, { w: "full", children: /* @__PURE__ */ jsx65(
             Flex17,
             {
               position: "relative",
               "data-test-id": `CT_component_base-image-uploader_image-preview${testId ? `_${testId}` : ""}`,
               justify: "center",
               align: "center",
-              children: /* @__PURE__ */ jsx68(
+              children: /* @__PURE__ */ jsx65(
                 ChakraImage,
                 {
                   h: size2 === "lg" ? "120" : "100",
@@ -11806,18 +11793,18 @@ var Uploader = ({
               )
             }
           ) }),
-          !filePreview && /* @__PURE__ */ jsxs30(Fragment9, { children: [
-            /* @__PURE__ */ jsx68(
+          !filePreview && /* @__PURE__ */ jsxs30(Fragment11, { children: [
+            /* @__PURE__ */ jsx65(
               "input",
               {
                 "data-test-id": `CT_component_base-image-uploader_input-file${testId ? `_${testId}` : ""}`,
                 ...getInputProps()
               }
             ),
-            isDragActive2 ? /* @__PURE__ */ jsx68(Text19, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs30(Flex17, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color2, children: [
-              size2 === "sm" && /* @__PURE__ */ jsx68(Plus, { size: 6, color: color2 }),
+            isDragActive2 ? /* @__PURE__ */ jsx65(Text19, { children: dragActiveText != null ? dragActiveText : messages.dragActive }) : /* @__PURE__ */ jsxs30(Flex17, { gap: 2, flexDirection: "column", alignItems: "center", color: isError ? "danger.500" : color2, children: [
+              size2 === "sm" && /* @__PURE__ */ jsx65(Plus, { size: 6, color: color2 }),
               /* @__PURE__ */ jsxs30(Box29, { children: [
-                !filePreview && /* @__PURE__ */ jsx68(
+                !filePreview && /* @__PURE__ */ jsx65(
                   Heading2,
                   {
                     fontWeight: "400",
@@ -11827,7 +11814,7 @@ var Uploader = ({
                     children: uploadFileText && size2 === "lg" ? messages.uploadFile : "Upload"
                   }
                 ),
-                size2 === "lg" && /* @__PURE__ */ jsx68(Text19, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
+                size2 === "lg" && /* @__PURE__ */ jsx65(Text19, { fontSize: 12, children: filePreview ? dragReplaceText != null ? dragReplaceText : messages.dragReplace : dragInActiveText != null ? dragInActiveText : messages.dragInActive })
               ] })
             ] })
           ] })
@@ -11845,7 +11832,7 @@ var Uploader = ({
           "data-test-id": `CT_component_base-image-uploader_change-img${testId ? `_${testId}` : ""}`
         }
       ),
-      isShowReupload && /* @__PURE__ */ jsx68(
+      isShowReupload && /* @__PURE__ */ jsx65(
         Button7,
         {
           "data-test-id": `CT_component_base-image-uploader_change-img-btn${testId ? `_${testId}` : ""}`,
@@ -12238,7 +12225,7 @@ var Button8 = defineStyleConfig({
         fontSize: "text.md",
         h: 9,
         px: 3,
-        py: "7px"
+        py: 2
       };
       const icon = {
         h: 9,
@@ -12421,6 +12408,10 @@ var Button8 = defineStyleConfig({
         }
       }
     },
+    outline: {
+      bg: "transparent",
+      color: "primary.500"
+    },
     icon: {
       bg: "neutral.50",
       minW: 0,
@@ -12895,36 +12886,88 @@ var LoaderStyle = defineStyleConfig4({
 var loader_default2 = LoaderStyle;
 
 // src/config/theme/components/modal.ts
-import { defineStyleConfig as defineStyleConfig5 } from "@chakra-ui/styled-system";
-var Modal3 = defineStyleConfig5({
-  sizes: {
-    sm: { dialog: { minW: 400 } },
-    md: { dialog: { minW: 600 } },
-    lg: { dialog: { minW: 800 } }
+import { modalAnatomy as parts4 } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
+var { defineMultiStyleConfig: defineMultiStyleConfig6, definePartsStyle: definePartsStyle6 } = createMultiStyleConfigHelpers6(parts4.keys);
+var baseStyleHeader = defineStyle4({
+  borderTopRadius: "sm",
+  bg: "neutral.200",
+  px: 4,
+  py: 2,
+  fontSize: "text.lg",
+  fontWeight: "normal",
+  lineHeight: 24,
+  textStyle: "text.lg"
+});
+var baseStyleCloseButton = defineStyle4({
+  p: 1,
+  top: 2,
+  right: 2,
+  bg: "white",
+  fontSize: "9px",
+  w: 6,
+  h: 6,
+  borderRadius: "sm"
+});
+var baseStyleBody = defineStyle4({
+  bg: "white",
+  p: 4
+});
+var baseStyleFooter = defineStyle4({
+  p: 4,
+  bg: "neutral.200",
+  borderBottomRadius: "sm"
+});
+var baseStyle7 = definePartsStyle6({
+  header: baseStyleHeader,
+  closeButton: baseStyleCloseButton,
+  body: baseStyleBody,
+  footer: baseStyleFooter
+});
+var sizes3 = {
+  sm: {
+    dialog: { minW: 400 },
+    closeButton: {
+      size: "sm"
+    }
   },
-  defaultProps: {
-    size: "md"
+  md: {
+    dialog: { minW: 600 },
+    closeButton: {
+      size: "sm"
+    }
+  },
+  lg: {
+    dialog: { minW: 800 },
+    closeButton: {
+      size: "xl"
+    }
   }
+};
+var modalTheme = defineMultiStyleConfig6({
+  baseStyle: baseStyle7,
+  sizes: sizes3,
+  defaultProps: { size: "md" }
 });
-var modal_default = Modal3;
+var modal_default = modalTheme;
 
 // src/config/theme/components/popover.ts
-import { popoverAnatomy as parts4 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6 } from "@chakra-ui/react";
-var { definePartsStyle: definePartsStyle6, defineMultiStyleConfig: defineMultiStyleConfig6 } = createMultiStyleConfigHelpers6(parts4.keys);
-var baseStyle7 = definePartsStyle6({
+import { popoverAnatomy as parts5 } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7 } from "@chakra-ui/react";
+var { definePartsStyle: definePartsStyle7, defineMultiStyleConfig: defineMultiStyleConfig7 } = createMultiStyleConfigHelpers7(parts5.keys);
+var baseStyle8 = definePartsStyle7({
   content: {
     bg: "white"
   }
 });
-var popoverTheme = defineMultiStyleConfig6({ baseStyle: baseStyle7 });
+var popoverTheme = defineMultiStyleConfig7({ baseStyle: baseStyle8 });
 var popover_default = popoverTheme;
 
 // src/config/theme/components/radio.ts
 import { radioAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7 } from "@chakra-ui/react";
-var { definePartsStyle: definePartsStyle7, defineMultiStyleConfig: defineMultiStyleConfig7 } = createMultiStyleConfigHelpers7(radioAnatomy.keys);
-var baseStyle8 = definePartsStyle7({
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers8 } from "@chakra-ui/react";
+var { definePartsStyle: definePartsStyle8, defineMultiStyleConfig: defineMultiStyleConfig8 } = createMultiStyleConfigHelpers8(radioAnatomy.keys);
+var baseStyle9 = definePartsStyle8({
   control: {
     border: "1px solid",
     width: 4,
@@ -12940,7 +12983,7 @@ var baseStyle8 = definePartsStyle7({
     }
   }
 });
-var errors2 = definePartsStyle7({
+var errors2 = definePartsStyle8({
   control: {
     borderColor: "danger.500",
     _checked: {
@@ -12975,7 +13018,7 @@ var errors2 = definePartsStyle7({
     textStyle: "text.sm"
   }
 });
-var unstyled3 = definePartsStyle7({
+var unstyled3 = definePartsStyle8({
   control: {
     borderColor: "neutral.600",
     _checked: {
@@ -13014,8 +13057,8 @@ var variants4 = {
   errors: errors2,
   unstyled: unstyled3
 };
-var Radio2 = defineMultiStyleConfig7({
-  baseStyle: baseStyle8,
+var Radio2 = defineMultiStyleConfig8({
+  baseStyle: baseStyle9,
   variants: variants4,
   defaultProps: {
     variant: "unstyled"
@@ -13024,16 +13067,16 @@ var Radio2 = defineMultiStyleConfig7({
 var radio_default = Radio2;
 
 // src/config/theme/components/switch.ts
-import { switchAnatomy as parts5 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers8, defineStyle as defineStyle4 } from "@chakra-ui/styled-system";
+import { switchAnatomy as parts6 } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers9, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
 import { calc, cssVar as cssVar2 } from "@chakra-ui/theme-tools";
-var { defineMultiStyleConfig: defineMultiStyleConfig8, definePartsStyle: definePartsStyle8 } = createMultiStyleConfigHelpers8(parts5.keys);
+var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = createMultiStyleConfigHelpers9(parts6.keys);
 var $width = cssVar2("switch-track-width");
 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 = defineStyle4({
+var baseStyleThumb = defineStyle5({
   bg: "white",
   transitionProperty: "transform",
   transitionDuration: "normal",
@@ -13044,7 +13087,7 @@ var baseStyleThumb = defineStyle4({
     transform: `translateX(${$translateX.reference})`
   }
 });
-var baseStyle9 = definePartsStyle8(() => ({
+var baseStyle10 = definePartsStyle9(() => ({
   container: {
     [$diff.variable]: diffValue,
     [$translateX.variable]: $diff.reference,
@@ -13068,8 +13111,8 @@ var baseStyle9 = definePartsStyle8(() => ({
   },
   thumb: baseStyleThumb
 }));
-var sizes3 = {
-  sm: definePartsStyle8({
+var sizes4 = {
+  sm: definePartsStyle9({
     container: {
       [$width.variable]: "1.875rem",
       [$height.variable]: "0.8rem"
@@ -13079,7 +13122,7 @@ var sizes3 = {
       [$height.variable]: "0.8rem"
     }
   }),
-  md: definePartsStyle8({
+  md: definePartsStyle9({
     container: {
       [$width.variable]: "2.375rem",
       [$height.variable]: "1rem"
@@ -13089,7 +13132,7 @@ var sizes3 = {
       [$height.variable]: "1rem"
     }
   }),
-  lg: definePartsStyle8({
+  lg: definePartsStyle9({
     container: {
       [$width.variable]: "3.25rem",
       [$height.variable]: "1.375rem"
@@ -13100,9 +13143,9 @@ var sizes3 = {
     }
   })
 };
-var Switch3 = defineMultiStyleConfig8({
-  baseStyle: baseStyle9,
-  sizes: sizes3,
+var Switch3 = defineMultiStyleConfig9({
+  baseStyle: baseStyle10,
+  sizes: sizes4,
   defaultProps: {
     size: "md"
   }
@@ -13110,11 +13153,11 @@ var Switch3 = defineMultiStyleConfig8({
 var switch_default2 = Switch3;
 
 // src/config/theme/components/table.ts
-import { tableAnatomy as parts6 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers9, defineStyle as defineStyle5 } from "@chakra-ui/styled-system";
+import { tableAnatomy as parts7 } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers10, defineStyle as defineStyle6 } from "@chakra-ui/styled-system";
 import { mode as mode2 } from "@chakra-ui/theme-tools";
-var { defineMultiStyleConfig: defineMultiStyleConfig9, definePartsStyle: definePartsStyle9 } = createMultiStyleConfigHelpers9(parts6.keys);
-var baseStyle10 = definePartsStyle9({
+var { defineMultiStyleConfig: defineMultiStyleConfig10, definePartsStyle: definePartsStyle10 } = createMultiStyleConfigHelpers10(parts7.keys);
+var baseStyle11 = definePartsStyle10({
   table: {
     fontVariantNumeric: "lining-nums tabular-nums",
     borderCollapse: "separate",
@@ -13178,12 +13221,12 @@ var baseStyle10 = definePartsStyle9({
     fontWeight: "medium"
   }
 });
-var numericStyles = defineStyle5({
+var numericStyles = defineStyle6({
   "&[data-is-numeric=true]": {
     textAlign: "end"
   }
 });
-var variantSimple = definePartsStyle9((props) => {
+var variantSimple = definePartsStyle10((props) => {
   const { colorScheme: c2 } = props;
   return {
     th: {
@@ -13209,7 +13252,7 @@ var variantSimple = definePartsStyle9((props) => {
     }
   };
 });
-var variantStripe = definePartsStyle9((props) => {
+var variantStripe = definePartsStyle10((props) => {
   const { colorScheme: c2 } = props;
   return {
     th: {
@@ -13251,10 +13294,10 @@ var variantStripe = definePartsStyle9((props) => {
 var variants5 = {
   simple: variantSimple,
   striped: variantStripe,
-  unstyled: defineStyle5({})
+  unstyled: defineStyle6({})
 };
-var sizes4 = {
-  sm: definePartsStyle9({
+var sizes5 = {
+  sm: definePartsStyle10({
     th: {
       px: "2",
       py: "4",
@@ -13273,7 +13316,7 @@ var sizes4 = {
       fontSize: "xs"
     }
   }),
-  md: definePartsStyle9({
+  md: definePartsStyle10({
     th: {
       px: "2",
       py: "4",
@@ -13291,7 +13334,7 @@ var sizes4 = {
       fontSize: "sm"
     }
   }),
-  lg: definePartsStyle9({
+  lg: definePartsStyle10({
     th: {
       px: "2",
       py: "4",
@@ -13310,10 +13353,10 @@ var sizes4 = {
     }
   })
 };
-var tableTheme = defineMultiStyleConfig9({
-  baseStyle: baseStyle10,
+var tableTheme = defineMultiStyleConfig10({
+  baseStyle: baseStyle11,
   variants: variants5,
-  sizes: sizes4,
+  sizes: sizes5,
   defaultProps: {
     variant: "simple",
     size: "md",
@@ -13323,10 +13366,10 @@ var tableTheme = defineMultiStyleConfig9({
 var table_default = tableTheme;
 
 // src/config/theme/components/tabs.ts
-import { tabsAnatomy as parts7 } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers10 } from "@chakra-ui/styled-system";
-var { defineMultiStyleConfig: defineMultiStyleConfig10, definePartsStyle: definePartsStyle10 } = createMultiStyleConfigHelpers10(parts7.keys);
-var variantLine = definePartsStyle10((props) => {
+import { tabsAnatomy as parts8 } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers11 } from "@chakra-ui/styled-system";
+var { defineMultiStyleConfig: defineMultiStyleConfig11, definePartsStyle: definePartsStyle11 } = createMultiStyleConfigHelpers11(parts8.keys);
+var variantLine = definePartsStyle11((props) => {
   const { orientation } = props;
   const isVertical = orientation === "vertical";
   const borderProp = isVertical ? "borderStart" : "borderBottom";
@@ -13343,12 +13386,12 @@ var variantLine = definePartsStyle10((props) => {
     }
   };
 });
-var variantUnstyled = definePartsStyle10({});
+var variantUnstyled = definePartsStyle11({});
 var variants6 = {
   line: variantLine,
   unstyled: variantUnstyled
 };
-var tabsTheme = defineMultiStyleConfig10({
+var tabsTheme = defineMultiStyleConfig11({
   variants: variants6,
   defaultProps: {
     size: "md",
@@ -13358,7 +13401,7 @@ var tabsTheme = defineMultiStyleConfig10({
 var tabs_default = tabsTheme;
 
 // src/config/theme/components/textarea.ts
-import { defineStyle as defineStyle6, defineStyleConfig as defineStyleConfig6 } from "@chakra-ui/react";
+import { defineStyle as defineStyle7, defineStyleConfig as defineStyleConfig5 } from "@chakra-ui/react";
 var getProps = (props) => {
   const { isError, isSuccess, isDisabled } = props;
   let borderColor = "neutral.400";
@@ -13378,7 +13421,7 @@ var getProps = (props) => {
     borderColor
   };
 };
-var outline3 = defineStyle6((props) => {
+var outline3 = defineStyle7((props) => {
   const { focusBorderColor, borderColor } = getProps(props);
   return {
     background: "white.high",
@@ -13422,7 +13465,7 @@ var outline3 = defineStyle6((props) => {
     }
   };
 });
-var Textarea = defineStyleConfig6({
+var Textarea = defineStyleConfig5({
   variants: { outline: outline3 },
   defaultProps: {
     variant: "outline"
@@ -13431,15 +13474,15 @@ var Textarea = defineStyleConfig6({
 var textarea_default2 = Textarea;
 
 // src/config/theme/components/tooltip.ts
-import { cssVar as cssVar3, defineStyleConfig as defineStyleConfig7 } from "@chakra-ui/react";
+import { cssVar as cssVar3, defineStyleConfig as defineStyleConfig6 } from "@chakra-ui/react";
 var $arrowBg = cssVar3("popper-arrow-bg");
-var baseStyle11 = {
+var baseStyle12 = {
   bg: "neutral.700",
   textStyle: "text.sm",
   fontSize: "text.sm",
   [$arrowBg.variable]: "var(--chakra-colors-neutral-700)"
 };
-var Tooltip2 = defineStyleConfig7({ baseStyle: baseStyle11 });
+var Tooltip2 = defineStyleConfig6({ baseStyle: baseStyle12 });
 var tooltip_default = Tooltip2;
 
 // src/config/theme/themeConfiguration.ts
@@ -13455,12 +13498,13 @@ var getTheme = (foundations) => {
       ...components_exports
     },
     styles: {
-      global: {
+      global: () => ({
         body: {
+          background: "bg-default",
           fontSize: "text.sm",
           color: "black.high"
         }
-      }
+      })
     },
     config
   });
@@ -13491,7 +13535,7 @@ import { useMemo as useMemo9 } from "react";
 import axios from "axios";
 import { createContext as createContext8, useContext as useContext14, useEffect as useEffect13, useMemo as useMemo8, useRef as useRef10 } from "react";
 import { ToastContainer as ToastContainer2 } from "react-toastify";
-import { jsx as jsx69, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs31 } from "react/jsx-runtime";
 var ProviderContext = createContext8({
   instance: void 0
 });
@@ -13511,7 +13555,7 @@ var Provider = ({ children, config: config2, requestInterceptors, responseInterc
   }, [requestInterceptors, responseInterceptors]);
   const provider = useMemo8(() => ({ instance: instanceRef.current }), []);
   return /* @__PURE__ */ jsxs31(ProviderContext.Provider, { value: provider, children: [
-    /* @__PURE__ */ jsx69(ToastContainer2, {}),
+    /* @__PURE__ */ jsx66(ToastContainer2, {}),
     children
   ] });
 };
@@ -13554,7 +13598,7 @@ import {
   useBoolean,
   useClipboard,
   useColorMode as useColorMode8,
-  useColorModeValue as useColorModeValue11,
+  useColorModeValue as useColorModeValue7,
   useConst,
   useControllableProp,
   useControllableState,
@@ -13568,7 +13612,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/index.ts
-import { extendTheme as extendTheme2, forwardRef as forwardRef16 } from "@chakra-ui/react";
+import { extendTheme as extendTheme2, forwardRef as forwardRef13 } from "@chakra-ui/react";
 export {
   Accordion,
   AccordionButton,
@@ -13588,11 +13632,11 @@ export {
   AlertClose,
   AlertDescription,
   AlertDialog,
-  ModalBody3 as AlertDialogBody,
-  ModalCloseButton2 as AlertDialogCloseButton,
+  ModalBody2 as AlertDialogBody,
+  ModalCloseButton as AlertDialogCloseButton,
   AlertDialogContent,
-  ModalFooter3 as AlertDialogFooter,
-  ModalHeader3 as AlertDialogHeader,
+  ModalFooter2 as AlertDialogFooter,
+  ModalHeader2 as AlertDialogHeader,
   ModalOverlay2 as AlertDialogOverlay,
   AlertDialogProps,
   AlertIcon,
@@ -13644,12 +13688,12 @@ export {
   Divider,
   DividerProps,
   Drawer,
-  ModalBody4 as DrawerBody,
-  ModalCloseButton3 as DrawerCloseButton,
+  ModalBody3 as DrawerBody,
+  ModalCloseButton2 as DrawerCloseButton,
   DrawerContent,
   DrawerContentProps,
-  ModalFooter4 as DrawerFooter,
-  ModalHeader4 as DrawerHeader,
+  ModalFooter3 as DrawerFooter,
+  ModalHeader3 as DrawerHeader,
   ModalOverlay3 as DrawerOverlay,
   DrawerProps,
   empty_state_default as EmptyState,
@@ -13710,16 +13754,16 @@ export {
   navigation_default as MainMenu,
   Modal2 as Modal,
   modal_back_button_default as ModalBackButton,
-  modal_body_default as ModalBody,
+  ModalBody4 as ModalBody,
   ModalBodyProps,
-  modal_close_button_default as ModalCloseButton,
+  ModalCloseButton3 as ModalCloseButton,
   ModalContent2 as ModalContent,
   ModalContentProps,
   ModalContextProvider,
   ModalFocusScope,
-  modal_footer_default as ModalFooter,
+  ModalFooter4 as ModalFooter,
   ModalFooterProps,
-  modal_header_default as ModalHeader,
+  ModalHeader4 as ModalHeader,
   ModalHeaderProps,
   ModalOverlay4 as ModalOverlay,
   ModalOverlayProps,
@@ -13732,6 +13776,13 @@ export {
   pagination_default as Pagination,
   pagination_detail_default as PaginationDetail,
   pagination_filter_default as PaginationFilter,
+  PinInput,
+  PinInputContext,
+  PinInputDescendantsProvider,
+  PinInputField,
+  PinInputFieldProps,
+  PinInputProps,
+  PinInputProvider,
   Popover4 as Popover,
   PopoverAnchor,
   PopoverArrow2 as PopoverArrow,
@@ -13750,6 +13801,12 @@ export {
   Portal2 as Portal,
   PortalProps,
   Profile,
+  Progress,
+  ProgressFilledTrackProps,
+  ProgressLabel,
+  ProgressLabelProps,
+  ProgressProps,
+  ProgressTrackProps,
   provider_default as Provider,
   ProviderContext,
   Radio,
@@ -13837,6 +13894,9 @@ export {
   UseMediaQueryOptions,
   UseModalProps,
   UseModalReturn,
+  UsePinInputFieldProps,
+  UsePinInputProps,
+  UsePinInputReturn,
   UseQueryProps,
   UseRadioGroupReturn,
   UseRadioProps,
@@ -13859,7 +13919,7 @@ export {
   WrapProps,
   XMSLogo,
   extendTheme2 as extendTheme,
-  forwardRef16 as forwardRef,
+  forwardRef13 as forwardRef,
   getSelectAllCheckboxState,
   getTheme,
   theme4 as theme,
@@ -13876,7 +13936,7 @@ export {
   useClipboard,
   useColorMode8 as useColorMode,
   useColorModePreference,
-  useColorModeValue11 as useColorModeValue,
+  useColorModeValue7 as useColorModeValue,
   useConst,
   useControllableProp,
   useControllableState,
@@ -13892,6 +13952,10 @@ export {
   useModalContext,
   useModalStyles,
   useOutsideClick,
+  usePinInput,
+  usePinInputContext,
+  usePinInputField,
+  useProgressStyles,
   useQuery,
   useRadio,
   useRadioGroup,