@ctlyst.id/internal-ui 2.1.11 → 2.1.14

package/dist/index.mjs

@@ -5,13 +5,29 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// src/components/accordion/components/accordion-indicator.tsx
-import { Box, useAccordionItemState } from "@chakra-ui/react";
+// src/components/accordion/components/accordion-eye.tsx
+import { Box } from "@chakra-ui/react";
+import { Eye } from "@ctlyst.id/internal-icon";
 import { jsx } from "react/jsx-runtime";
+var AccordionEye = ({ position = "left" }) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "eye-icon",
+      backgroundColor: "white",
+      ...position === "right" ? { position: "absolute", right: 4, zIndex: 2 } : {},
+      children: /* @__PURE__ */ jsx(Eye, { size: 4 })
+    }
+  );
+};
+
+// src/components/accordion/components/accordion-indicator.tsx
+import { Box as Box2, useAccordionItemState } from "@chakra-ui/react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var AccordionIndicator = () => {
   const { isOpen } = useAccordionItemState();
   if (isOpen) {
-    return /* @__PURE__ */ jsx(Box, { position: "absolute", left: 0, width: "2px", height: "100%", bg: "primary.500" });
+    return /* @__PURE__ */ jsx2(Box2, { position: "absolute", left: 0, width: "2px", height: "100%", bg: "primary.500" });
   }
   return null;
 };
@@ -49,15 +65,15 @@ import { createContext } from "@chakra-ui/react-context";
 
 // src/components/alert/components/icons.tsx
 import { AlertTriangle, CheckCircle, Info } from "@ctlyst.id/internal-icon";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function CheckIcon() {
-  return /* @__PURE__ */ jsx2(CheckCircle, { color: "inherit", size: 4 });
+  return /* @__PURE__ */ jsx3(CheckCircle, { color: "inherit", size: 4 });
 }
 function InfoIcon() {
-  return /* @__PURE__ */ jsx2(Info, { color: "inherit", size: 4 });
+  return /* @__PURE__ */ jsx3(Info, { color: "inherit", size: 4 });
 }
 function WarningIcon() {
-  return /* @__PURE__ */ jsx2(AlertTriangle, { color: "inherit", size: 4 });
+  return /* @__PURE__ */ jsx3(AlertTriangle, { color: "inherit", size: 4 });
 }
 
 // src/components/alert/components/alert-context.ts
@@ -86,7 +102,7 @@ function getStatusIcon(status) {
 }
 
 // src/components/alert/components/alert.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Alert = forwardRef(function Alert2(props, ref) {
   var _a;
   const { status = "info", addRole = true, children, ...rest } = omitThemingProps(props);
@@ -101,7 +117,7 @@ var Alert = forwardRef(function Alert2(props, ref) {
     overflow: "hidden",
     ...styles.container
   };
-  return /* @__PURE__ */ jsx3(AlertProvider, { value: { status }, children: /* @__PURE__ */ jsx3(AlertStylesProvider, { value: styles, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(AlertProvider, { value: { status }, children: /* @__PURE__ */ jsx4(AlertStylesProvider, { value: styles, children: /* @__PURE__ */ jsx4(
     chakra.div,
     {
       "data-status": status,
@@ -123,11 +139,11 @@ import { cx as cx2 } from "@chakra-ui/shared-utils";
 import { Button as ButtonChakra, forwardRef as forwardRef3 } from "@chakra-ui/react";
 
 // src/components/loader/components/loader.tsx
-import { Box as Box2, forwardRef as forwardRef2, useStyleConfig } from "@chakra-ui/react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { Box as Box3, forwardRef as forwardRef2, useStyleConfig } from "@chakra-ui/react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Loader = forwardRef2((props, ref) => {
   const styles = useStyleConfig("LoaderStyle", props);
-  return /* @__PURE__ */ jsx4(Box2, { ref, __css: styles });
+  return /* @__PURE__ */ jsx5(Box3, { ref, __css: styles });
 });
 Loader.defaultProps = {
   size: "md"
@@ -138,7 +154,7 @@ var loader_default = Loader;
 import { Skeleton } from "@chakra-ui/react";
 
 // src/components/button/components/button.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var Button = forwardRef3((props, ref) => {
   const { children, variant, size: size2, ...rest } = props;
   const getLoaderSize = () => {
@@ -151,12 +167,12 @@ var Button = forwardRef3((props, ref) => {
     if (variant === "outline-danger") return "danger";
     return "primary";
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     ButtonChakra,
     {
       size: size2,
       variant,
-      spinner: /* @__PURE__ */ jsx5(loader_default, { size: getLoaderSize(), color: getLoaderColor2() }),
+      spinner: /* @__PURE__ */ jsx6(loader_default, { size: getLoaderSize(), color: getLoaderColor2() }),
       ref,
       ...rest,
       children
@@ -166,11 +182,11 @@ var Button = forwardRef3((props, ref) => {
 var button_default = Button;
 
 // src/components/alert/components/alert-action.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function AlertAction({ children, className }) {
   const styles = useAlertStyles();
   const css4 = styles.action;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     button_default,
     {
       "data-test-id": "alert-action",
@@ -188,11 +204,11 @@ AlertAction.displayName = "AlertAction";
 import { cx as cx3 } from "@chakra-ui/shared-utils";
 import { chakra as chakra2 } from "@chakra-ui/system";
 import { Close } from "@ctlyst.id/internal-icon";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function AlertClose({ className, children, ...rest }) {
   const styles = useAlertStyles();
   const css4 = styles.close;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     chakra2.span,
     {
       display: "inherit",
@@ -200,7 +216,7 @@ function AlertClose({ className, children, ...rest }) {
       ...rest,
       className: cx3("chakra-alert__close", className),
       __css: css4,
-      children: children || /* @__PURE__ */ jsx7(Close, { color: "inherit", size: 4 })
+      children: children || /* @__PURE__ */ jsx8(Close, { color: "inherit", size: 4 })
     }
   );
 }
@@ -209,7 +225,7 @@ AlertClose.displayName = "AlertClose";
 // src/components/alert/components/alert-description.tsx
 import { cx as cx4 } from "@chakra-ui/shared-utils";
 import { chakra as chakra3, forwardRef as forwardRef4 } from "@chakra-ui/system";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var AlertDescription = forwardRef4(function AlertDescription2(props, ref) {
   const styles = useAlertStyles();
   const { status } = useAlertContext();
@@ -217,7 +233,7 @@ var AlertDescription = forwardRef4(function AlertDescription2(props, ref) {
     display: "inline",
     ...styles.description
   };
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     chakra3.div,
     {
       ref,
@@ -233,13 +249,13 @@ AlertDescription.displayName = "AlertDescription";
 // src/components/alert/components/alert-icon.tsx
 import { cx as cx5 } from "@chakra-ui/shared-utils";
 import { chakra as chakra4 } from "@chakra-ui/system";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function AlertIcon({ className, children, ...rest }) {
   const { status } = useAlertContext();
   const BaseIcon = getStatusIcon(status);
   const styles = useAlertStyles();
   const css4 = styles.icon;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     chakra4.span,
     {
       display: "inherit",
@@ -247,7 +263,7 @@ function AlertIcon({ className, children, ...rest }) {
       ...rest,
       className: cx5("chakra-alert__icon", className),
       __css: css4,
-      children: children || /* @__PURE__ */ jsx9(BaseIcon, {})
+      children: children || /* @__PURE__ */ jsx10(BaseIcon, {})
     }
   );
 }
@@ -256,11 +272,11 @@ AlertIcon.displayName = "AlertIcon";
 // src/components/alert/components/alert-title.tsx
 import { cx as cx6 } from "@chakra-ui/shared-utils";
 import { chakra as chakra5, forwardRef as forwardRef5 } from "@chakra-ui/system";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var AlertTitle = forwardRef5(function AlertTitle2(props, ref) {
   const styles = useAlertStyles();
   const { status } = useAlertContext();
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     chakra5.div,
     {
       ref,
@@ -312,10 +328,10 @@ Anchor.defaultProps = {
 
 // src/components/badge/components/badge.tsx
 import { Badge as BadgeChakra } from "@chakra-ui/react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Badge = (props) => {
   const { children, pill, ...rest } = props;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     BadgeChakra,
     {
       borderRadius: pill ? "xl" : "sm",
@@ -334,7 +350,7 @@ Badge.defaultProps = {
 var badge_default = Badge;
 
 // src/components/breadcrumb/components/bread-crumb.tsx
-import { Box as Box3, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Text, theme, useToken } from "@chakra-ui/react";
+import { Box as Box4, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Text, theme, useToken } from "@chakra-ui/react";
 import { FiChevronLeft, FiChevronsRight, FiHome } from "react-icons/fi";
 
 // src/components/button/index.ts
@@ -348,12 +364,12 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/breadcrumb/components/bread-crumb.tsx
-import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
 var BreadCrumb = (props) => {
   const { title, children, parents, className, disableHome, spacing: spacing2 = 2, backButton } = props;
   const [neutral600, primary500] = useToken("colors", ["neutral.600", "primary.500"]);
   return /* @__PURE__ */ jsxs2(
-    Box3,
+    Box4,
     {
       "data-test-id": "CT_component_breadcrumb_breadcrumb",
       className,
@@ -362,14 +378,14 @@ var BreadCrumb = (props) => {
       alignItems: "center",
       paddingY: 2,
       children: [
-        /* @__PURE__ */ jsxs2(Box3, { display: "flex", alignItems: "center", children: [
-          backButton && /* @__PURE__ */ jsx12(button_default, { variant: "icon", "data-test-id": "button", size: "md", mr: "2", onClick: backButton, children: /* @__PURE__ */ jsx12(FiChevronLeft, { size: theme.sizes[5] }) }),
-          /* @__PURE__ */ jsx12(Text, { pr: "2", textStyle: "heading.6", color: "neutral.700", children: title }),
-          /* @__PURE__ */ jsx12(Box3, { h: "5.5", borderLeft: "1px solid", borderColor: neutral600 }),
+        /* @__PURE__ */ jsxs2(Box4, { display: "flex", alignItems: "center", children: [
+          backButton && /* @__PURE__ */ jsx13(button_default, { variant: "icon", "data-test-id": "button", size: "md", mr: "2", onClick: backButton, children: /* @__PURE__ */ jsx13(FiChevronLeft, { size: theme.sizes[5] }) }),
+          /* @__PURE__ */ jsx13(Text, { pr: "2", textStyle: "heading.6", color: "neutral.700", children: title }),
+          /* @__PURE__ */ jsx13(Box4, { h: "5.5", borderLeft: "1px solid", borderColor: neutral600 }),
           /* @__PURE__ */ jsxs2(
             Breadcrumb,
             {
-              separator: /* @__PURE__ */ jsx12(FiChevronsRight, { color: neutral600, size: theme.sizes["3.5"] }),
+              separator: /* @__PURE__ */ jsx13(FiChevronsRight, { color: neutral600, size: theme.sizes["3.5"] }),
               pl: "2",
               pr: "4",
               spacing: spacing2,
@@ -378,8 +394,8 @@ var BreadCrumb = (props) => {
               alignItems: "center",
               className: "breadcrumb-wrapper",
               children: [
-                /* @__PURE__ */ jsx12(BreadcrumbItem, { children: /* @__PURE__ */ jsx12(BreadcrumbLink, { href: !disableHome ? "/" : void 0, style: { ...disableHome && { cursor: "default" } }, children: /* @__PURE__ */ jsx12(FiHome, { className: "align-top", size: theme.sizes["3.5"], color: primary500 }) }) }),
-                parents == null ? void 0 : parents.map((val) => /* @__PURE__ */ jsx12(BreadcrumbItem, { children: /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx13(BreadcrumbItem, { children: /* @__PURE__ */ jsx13(BreadcrumbLink, { href: !disableHome ? "/" : void 0, style: { ...disableHome && { cursor: "default" } }, children: /* @__PURE__ */ jsx13(FiHome, { className: "align-top", size: theme.sizes["3.5"], color: primary500 }) }) }),
+                parents == null ? void 0 : parents.map((val) => /* @__PURE__ */ jsx13(BreadcrumbItem, { children: /* @__PURE__ */ jsx13(
                   BreadcrumbLink,
                   {
                     "data-test-id": "iadKcMAul3QAdvmfIQjRE",
@@ -391,15 +407,15 @@ var BreadCrumb = (props) => {
                       }
                     },
                     _hover: { textDecoration: "none" },
-                    children: /* @__PURE__ */ jsx12(Text, { color: val.disable ? neutral600 : primary500, textStyle: "text.sm", children: val.name })
+                    children: /* @__PURE__ */ jsx13(Text, { color: val.disable ? neutral600 : primary500, textStyle: "text.sm", children: val.name })
                   }
                 ) }, val.name)),
-                /* @__PURE__ */ jsx12(BreadcrumbItem, { children: /* @__PURE__ */ jsx12(BreadcrumbLink, { _hover: { textDecor: "none", cursor: "default" }, children: /* @__PURE__ */ jsx12(Text, { color: "neutral.600", textStyle: "text.sm", children: title }) }) })
+                /* @__PURE__ */ jsx13(BreadcrumbItem, { children: /* @__PURE__ */ jsx13(BreadcrumbLink, { _hover: { textDecor: "none", cursor: "default" }, children: /* @__PURE__ */ jsx13(Text, { color: "neutral.600", textStyle: "text.sm", children: title }) }) })
               ]
             }
           )
         ] }),
-        children && /* @__PURE__ */ jsx12(Box3, { children })
+        children && /* @__PURE__ */ jsx13(Box4, { children })
       ]
     }
   );
@@ -417,10 +433,10 @@ var bread_crumb_default = BreadCrumb;
 // src/components/card/components/card.tsx
 import { Card, useStyleConfig as useStyleConfig2 } from "@chakra-ui/react";
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var CardCustom = forwardRef6(({ children, ...rest }, ref) => {
   const styles = useStyleConfig2("Card", rest);
-  return /* @__PURE__ */ jsx13(Card, { __css: styles, backgroundColor: "white.high", ref, ...rest, children });
+  return /* @__PURE__ */ jsx14(Card, { __css: styles, backgroundColor: "white.high", ref, ...rest, children });
 });
 CardCustom.defaultProps = {
   withShadow: true,
@@ -429,14 +445,14 @@ CardCustom.defaultProps = {
 var card_default = CardCustom;
 
 // src/components/checkbox/components/checkbox.tsx
-import { Box as Box4, Checkbox, forwardRef as forwardRef7, Text as Text2 } from "@chakra-ui/react";
-import { jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box as Box5, Checkbox, forwardRef as forwardRef7, Text as Text2 } from "@chakra-ui/react";
+import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
 var CheckboxComponent = forwardRef7(
   ({ isError = false, helpText = "", errorText = "", boxProps, children, isDisabled, ...rest }, ref) => {
     const variant = isError ? "errors" : "unstyled";
-    return /* @__PURE__ */ jsxs3(Box4, { ...boxProps, children: [
-      /* @__PURE__ */ jsx14(Box4, { display: "flex", children: /* @__PURE__ */ jsx14(Checkbox, { variant, ref, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx14(Text2, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-      (isError || helpText) && /* @__PURE__ */ jsx14(Box4, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx14(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx14(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
+    return /* @__PURE__ */ jsxs3(Box5, { ...boxProps, children: [
+      /* @__PURE__ */ jsx15(Box5, { display: "flex", children: /* @__PURE__ */ jsx15(Checkbox, { variant, ref, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx15(Text2, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+      (isError || helpText) && /* @__PURE__ */ jsx15(Box5, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx15(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx15(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
     ] });
   }
 );
@@ -449,11 +465,11 @@ CheckboxComponent.defaultProps = {
 var checkbox_default = CheckboxComponent;
 
 // src/components/checkbox/components/checkbox-group.tsx
-import { Box as Box6, CheckboxGroup, Stack } from "@chakra-ui/react";
+import { Box as Box7, CheckboxGroup, Stack } from "@chakra-ui/react";
 
 // src/components/field/components/field.tsx
-import { Box as Box5, FormControl, FormErrorMessage, FormHelperText, FormLabel } from "@chakra-ui/react";
-import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Box as Box6, FormControl, FormErrorMessage, FormHelperText, FormLabel } from "@chakra-ui/react";
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 var Field = (props) => {
   const {
     label,
@@ -479,13 +495,13 @@ var Field = (props) => {
   const justifyHelper = getJustifyContentHelper();
   return /* @__PURE__ */ jsxs4(FormControl, { isInvalid: isError, ...boxProps, children: [
     label && (typeof label === "string" ? /* @__PURE__ */ jsxs4(FormLabel, { mb: 1, fontSize: "text.sm", requiredIndicator: void 0, children: [
-      isRequired && /* @__PURE__ */ jsx15(Box5, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
+      isRequired && /* @__PURE__ */ jsx16(Box6, { as: "span", color: "danger.500", ml: 0, mr: 1, children: "*" }),
       label
     ] }) : label),
     children,
-    (isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ jsxs4(Box5, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
-      !isError ? leftHelperText && (typeof leftHelperText === "string" ? /* @__PURE__ */ jsx15(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: leftHelperText }) : leftHelperText) : typeof errorMessage === "string" ? /* @__PURE__ */ jsx15(FormErrorMessage, { fontSize: "text.xs", color: "danger.500", mt: 1, children: errorMessage }) : errorMessage,
-      rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ jsx15(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
+    (isError && errorMessage || leftHelperText || rightHelperText) && /* @__PURE__ */ jsxs4(Box6, { display: "flex", width: "full", justifyContent: justifyHelper, children: [
+      !isError ? leftHelperText && (typeof leftHelperText === "string" ? /* @__PURE__ */ jsx16(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: leftHelperText }) : leftHelperText) : typeof errorMessage === "string" ? /* @__PURE__ */ jsx16(FormErrorMessage, { fontSize: "text.xs", color: "danger.500", mt: 1, children: errorMessage }) : errorMessage,
+      rightHelperText && (typeof rightHelperText === "string" ? /* @__PURE__ */ jsx16(FormHelperText, { fontSize: "text.xs", color: helperColor, mt: 1, children: rightHelperText }) : rightHelperText)
     ] })
   ] });
 };
@@ -502,10 +518,10 @@ Field.defaultProps = {
 var field_default = Field;
 
 // src/components/checkbox/components/checkbox-group.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function CheckboxGroupComponent(props) {
   const { children, label, helpText, isError, errorMessage, ...rest } = props;
-  return /* @__PURE__ */ jsx16(field_default, { ...rest, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx16(Box6, { mt: "12px", children: /* @__PURE__ */ jsx16(CheckboxGroup, { ...rest, children: /* @__PURE__ */ jsx16(Stack, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
+  return /* @__PURE__ */ jsx17(field_default, { ...rest, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx17(Box7, { mt: "12px", children: /* @__PURE__ */ jsx17(CheckboxGroup, { ...rest, children: /* @__PURE__ */ jsx17(Stack, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 }
 CheckboxGroupComponent.defaultProps = {
   helpText: "",
@@ -530,10 +546,10 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/chips/components/chips.tsx
-import { Box as Box7, useStyleConfig as useStyleConfig3 } from "@chakra-ui/react";
+import { Box as Box8, useStyleConfig as useStyleConfig3 } from "@chakra-ui/react";
 import { Close as Close2 } from "@ctlyst.id/internal-icon";
 import { useMemo } from "react";
-import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
 var Chips = ({ children, ...rest }) => {
   const { isActive, isDisabled, onClose } = rest;
   const styles = useStyleConfig3("Chips", rest);
@@ -542,10 +558,10 @@ var Chips = ({ children, ...rest }) => {
     if (isDisabled) return "black.low";
     return "primary.500";
   }, [isActive, isDisabled]);
-  return /* @__PURE__ */ jsxs5(Box7, { __css: styles, display: "inline-flex", alignItems: "center", justifyContent: "center", ...rest, children: [
+  return /* @__PURE__ */ jsxs5(Box8, { __css: styles, display: "inline-flex", alignItems: "center", justifyContent: "center", ...rest, children: [
     children,
-    onClose && /* @__PURE__ */ jsx17(
-      Box7,
+    onClose && /* @__PURE__ */ jsx18(
+      Box8,
       {
         onClick: isDisabled ? void 0 : onClose,
         cursor: isDisabled ? "not-allowed" : "pointer",
@@ -553,7 +569,7 @@ var Chips = ({ children, ...rest }) => {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        children: /* @__PURE__ */ jsx17(Close2, { color: closeColor, size: 4 })
+        children: /* @__PURE__ */ jsx18(Close2, { color: closeColor, size: 4 })
       }
     )
   ] });
@@ -568,17 +584,17 @@ Chips.defaultProps = {
 var chips_default = Chips;
 
 // src/components/counter/components/counter.tsx
-import { Box as Box10, HStack, IconButton as IconButton2, Text as Text3 } from "@chakra-ui/react";
+import { Box as Box11, HStack, IconButton as IconButton2, Text as Text3 } from "@chakra-ui/react";
 import { FiMinus, FiPlus } from "react-icons/fi";
 
 // src/components/form/components/input-addon.tsx
 import { InputLeftAddon, InputRightAddon } from "@chakra-ui/react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var InputAddonLeft = ({ children }) => {
-  return /* @__PURE__ */ jsx18(InputLeftAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineEnd: 0 }, children });
+  return /* @__PURE__ */ jsx19(InputLeftAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineEnd: 0 }, children });
 };
 var InputAddonRight = ({ children }) => {
-  return /* @__PURE__ */ jsx18(InputRightAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineStart: 0 }, children });
+  return /* @__PURE__ */ jsx19(InputRightAddon, { backgroundColor: "neutral.200", px: 3, py: 2.5, style: { border: 0, marginInlineStart: 0 }, children });
 };
 
 // src/components/form/components/input-element.tsx
@@ -586,8 +602,8 @@ import { InputLeftElement } from "@chakra-ui/react";
 import { InputRightElement } from "@chakra-ui/react";
 
 // src/components/form/components/input-field.tsx
-import { Box as Box8, Input as ChakraInput, InputGroup } from "@chakra-ui/react";
-import { Close as Close3, Eye, EyeOff } from "@ctlyst.id/internal-icon";
+import { Box as Box9, Input as ChakraInput, InputGroup } from "@chakra-ui/react";
+import { Close as Close3, Eye as Eye2, EyeOff } from "@ctlyst.id/internal-icon";
 import React3, { useMemo as useMemo2, useState } from "react";
 
 // src/components/form/styles/input-field.ts
@@ -623,7 +639,7 @@ var getWrapperStyle = (props) => {
 var input_field_default = getWrapperStyle;
 
 // src/components/form/components/input-field.tsx
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 var InputField = React3.forwardRef((props, ref) => {
   const {
     value,
@@ -658,7 +674,7 @@ var InputField = React3.forwardRef((props, ref) => {
   const iconColor = useMemo2(() => {
     return isDisabled ? "black.low" : "black.medium";
   }, [isDisabled]);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     field_default,
     {
       label,
@@ -668,7 +684,7 @@ var InputField = React3.forwardRef((props, ref) => {
       leftHelperText,
       rightHelperText,
       isRequired,
-      children: /* @__PURE__ */ jsx19(Box8, { __css: wrapperStyle, children: /* @__PURE__ */ jsxs6(
+      children: /* @__PURE__ */ jsx20(Box9, { __css: wrapperStyle, children: /* @__PURE__ */ jsxs6(
         InputGroup,
         {
           size: size2,
@@ -677,7 +693,7 @@ var InputField = React3.forwardRef((props, ref) => {
           cursor: isDisabled ? "not-allowed" : "default",
           children: [
             addOnLeft,
-            /* @__PURE__ */ jsx19(
+            /* @__PURE__ */ jsx20(
               ChakraInput,
               {
                 ref,
@@ -690,7 +706,7 @@ var InputField = React3.forwardRef((props, ref) => {
               }
             ),
             (withClear || isLoading || type === "password") && /* @__PURE__ */ jsxs6(
-              Box8,
+              Box9,
               {
                 "data-test-id": "CT_Component_ClearInput",
                 display: "flex",
@@ -699,18 +715,18 @@ var InputField = React3.forwardRef((props, ref) => {
                 width: "16px",
                 mr: "10px",
                 children: [
-                  withClear && !isLoading && /* @__PURE__ */ jsx19(
-                    Box8,
+                  withClear && !isLoading && /* @__PURE__ */ jsx20(
+                    Box9,
                     {
                       display: "flex",
                       justifyContent: "center",
                       onClick: !isDisabled ? onClear : void 0,
                       cursor: isDisabled ? "not-allowed" : "pointer",
-                      children: /* @__PURE__ */ jsx19(Close3, { size: 4, color: iconColor })
+                      children: /* @__PURE__ */ jsx20(Close3, { size: 4, color: iconColor })
                     }
                   ),
-                  type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx19(
-                    Box8,
+                  type === "password" && !isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
+                    Box9,
                     {
                       "data-test-id": "q2Bj2G4FlamXyHuRKMZ1Q",
                       onClick: () => {
@@ -719,11 +735,11 @@ var InputField = React3.forwardRef((props, ref) => {
                       cursor: isDisabled ? "not-allowed" : "pointer",
                       display: "flex",
                       justifyContent: "center",
-                      children: /* @__PURE__ */ jsx19(EyeOff, { size: 4, color: iconColor })
+                      children: /* @__PURE__ */ jsx20(EyeOff, { size: 4, color: iconColor })
                     }
                   ),
-                  type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx19(
-                    Box8,
+                  type === "password" && isShowPassword && !isLoading && /* @__PURE__ */ jsx20(
+                    Box9,
                     {
                       "data-test-id": "sfc2388bmeXBmdla45Ibk",
                       onClick: () => {
@@ -732,10 +748,10 @@ var InputField = React3.forwardRef((props, ref) => {
                       cursor: isDisabled ? "not-allowed" : "pointer",
                       display: "flex",
                       justifyContent: "center",
-                      children: /* @__PURE__ */ jsx19(Eye, { size: 4, color: iconColor })
+                      children: /* @__PURE__ */ jsx20(Eye2, { size: 4, color: iconColor })
                     }
                   ),
-                  isLoading && /* @__PURE__ */ jsx19(loader_default, { size: "sm" })
+                  isLoading && /* @__PURE__ */ jsx20(loader_default, { size: "sm" })
                 ]
               }
             ),
@@ -756,14 +772,14 @@ InputField.defaultProps = {
 var input_field_default2 = InputField;
 
 // src/components/form/components/textarea.tsx
-import { Box as Box9, Textarea as ChakraTextarea } from "@chakra-ui/react";
+import { Box as Box10, Textarea as ChakraTextarea } from "@chakra-ui/react";
 import React4 from "react";
-import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
 var TextareaField = React4.forwardRef((props, ref) => {
   const { value, isLoading, ...inputProps } = props;
-  return /* @__PURE__ */ jsx20(field_default, { ...inputProps, children: /* @__PURE__ */ jsxs7(Box9, { position: "relative", children: [
-    /* @__PURE__ */ jsx20(ChakraTextarea, { ref, value, ...inputProps }),
-    isLoading && /* @__PURE__ */ jsx20(Box9, { zIndex: 999, top: 2, right: 2, position: "absolute", children: /* @__PURE__ */ jsx20(loader_default, { size: "sm" }) })
+  return /* @__PURE__ */ jsx21(field_default, { ...inputProps, children: /* @__PURE__ */ jsxs7(Box10, { position: "relative", children: [
+    /* @__PURE__ */ jsx21(ChakraTextarea, { ref, value, ...inputProps }),
+    isLoading && /* @__PURE__ */ jsx21(Box10, { zIndex: 999, top: 2, right: 2, position: "absolute", children: /* @__PURE__ */ jsx21(loader_default, { size: "sm" }) })
   ] }) });
 });
 TextareaField.defaultProps = {
@@ -795,7 +811,7 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/counter/components/counter.tsx
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var Counter = ({
   value,
   size: size2 = "xs",
@@ -823,9 +839,9 @@ var Counter = ({
   const handleChange = (e) => {
     onChange(+e.target.value);
   };
-  return /* @__PURE__ */ jsxs8(Box10, { children: [
-    /* @__PURE__ */ jsxs8(HStack, { children: [
-      /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs8(Box11, { children: [
+    /* @__PURE__ */ jsxs8(HStack, { gap: "1", children: [
+      /* @__PURE__ */ jsx22(
         IconButton2,
         {
           "aria-label": "minus",
@@ -833,10 +849,10 @@ var Counter = ({
           onClick: decrement,
           isDisabled: disabled || +value <= min,
           size: size2,
-          icon: /* @__PURE__ */ jsx21(FiMinus, {})
+          icon: /* @__PURE__ */ jsx22(FiMinus, {})
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         input_field_default2,
         {
           "data-test-id": "CT_Component_Counter_input",
@@ -850,10 +866,11 @@ var Counter = ({
           onChange: handleChange,
           isReadOnly,
           width: 12,
-          type: "number"
+          type: "number",
+          borderColor: "neutral.200"
         }
       ),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         IconButton2,
         {
           "aria-label": "plus",
@@ -861,11 +878,11 @@ var Counter = ({
           onClick: increment,
           isDisabled: disabled || +value >= max,
           size: size2,
-          icon: /* @__PURE__ */ jsx21(FiPlus, {})
+          icon: /* @__PURE__ */ jsx22(FiPlus, {})
         }
       )
     ] }),
-    !isError ? /* @__PURE__ */ jsx21(Text3, { mt: 1, color: "black.medium", children: helperText }) : /* @__PURE__ */ jsx21(Text3, { mt: 1, color: "danger.500", children: error })
+    !isError ? /* @__PURE__ */ jsx22(Text3, { mt: 1, color: "black.medium", textStyle: "text.xs", children: helperText }) : /* @__PURE__ */ jsx22(Text3, { mt: 1, color: "danger.500", textStyle: "text.xs", children: error })
   ] });
 };
 var counter_default = Counter;
@@ -873,7 +890,7 @@ var counter_default = Counter;
 // src/components/data-table/components/data-table.tsx
 import { ChevronDownIcon, ChevronUpIcon, UpDownIcon } from "@chakra-ui/icons";
 import {
-  Box as Box11,
+  Box as Box12,
   Checkbox as Checkbox2,
   Flex,
   Skeleton as Skeleton2,
@@ -890,20 +907,46 @@ import { css } from "@emotion/react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import * as React5 from "react";
 import { useRef } from "react";
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 var getCommonPinningStyles = (column) => {
   const isPinned = column.getIsPinned();
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   return {
-    // eslint-disable-next-line no-nested-ternary
-    boxShadow: isLastLeftPinnedColumn ? "-4px 0 4px -4px gray inset" : isFirstRightPinnedColumn ? "4px 0 4px -4px gray inset" : void 0,
     left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
-    opacity: isPinned ? 0.95 : 1,
     position: isPinned ? "sticky" : "relative",
     width: column.getSize(),
-    zIndex: isPinned ? 1 : 0
+    zIndex: isPinned ? 1 : 0,
+    backgroundColor: "white",
+    ...isLastLeftPinnedColumn ? {
+      padding: 0,
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "20%",
+        height: "100%",
+        right: "0px",
+        top: 0,
+        zIndex: -1,
+        boxShadow: "-10px 0px 20px 10px #00000010",
+        clipPath: "inset(0px -38px 0px 0px)"
+      }
+    } : {},
+    ...isFirstRightPinnedColumn ? {
+      padding: "0px 0px 0px 8px",
+      "&:after": {
+        content: "''",
+        position: "absolute",
+        width: "20%",
+        height: "100%",
+        left: "0%",
+        top: 0,
+        zIndex: -1,
+        boxShadow: "10px 0px 20px 10px #00000010",
+        clipPath: "inset(0px 0px 0px -38px )"
+      }
+    } : {}
   };
 };
 var useDataTable = ({
@@ -926,7 +969,7 @@ var useDataTable = ({
       {
         id: "select",
         size: 32,
-        header: ({ table: table2 }) => /* @__PURE__ */ jsx22(
+        header: ({ table: table2 }) => /* @__PURE__ */ jsx23(
           Checkbox2,
           {
             "data-test-id": "select-header-data-table",
@@ -937,7 +980,7 @@ var useDataTable = ({
             }
           }
         ),
-        cell: ({ row }) => /* @__PURE__ */ jsx22(
+        cell: ({ row }) => /* @__PURE__ */ jsx23(
           Checkbox2,
           {
             "data-test-id": `select-data-table-${row.index}`,
@@ -1000,20 +1043,20 @@ var useDataTable = ({
   };
 };
 var DataTable = React5.forwardRef((props, ref) => {
-  const { isLoading, styles, headerSticky, onRowClick } = props;
+  const { isLoading, styles, headerSticky, onRowClick, container } = props;
   const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
   React5.useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
   }));
-  return /* @__PURE__ */ jsxs9(Box11, { ...props, children: [
+  return /* @__PURE__ */ jsxs9(Box12, { overflowX: "auto", position: "relative", maxW: "100%", minH: 400, w: "full", ...container, children: [
     isLoading && /* @__PURE__ */ jsxs9(Table, { ...styles == null ? void 0 : styles.table, children: [
-      /* @__PURE__ */ jsx22(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx22(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx23(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx23(
         Th,
         {
           colSpan: header.colSpan,
           width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
           ...styles == null ? void 0 : styles.tableColumnHeader,
-          children: /* @__PURE__ */ jsx22(
+          children: /* @__PURE__ */ jsx23(
             Flex,
             {
               "data-test-id": "CT_component_data-table_loader",
@@ -1026,39 +1069,41 @@ var DataTable = React5.forwardRef((props, ref) => {
         },
         header.id
       )) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx22(Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ jsx22(Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx22(Td, { width: 210, children: /* @__PURE__ */ jsx22(Skeleton2, { startColor: "gray.50", endColor: "gray.100", h: "30px", w: "100%" }, i) }, i)) }, num)) })
+      /* @__PURE__ */ jsx23(Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ jsx23(Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx23(Td, { width: 210, children: /* @__PURE__ */ jsx23(Skeleton2, { startColor: "gray.50", endColor: "gray.100", h: "30px", w: "100%" }, i) }, i)) }, num)) })
     ] }),
     /* @__PURE__ */ jsxs9(Table, { ...styles == null ? void 0 : styles.table, children: [
-      /* @__PURE__ */ jsx22(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx22(Tr, { bg: useColorModeValue("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
+      /* @__PURE__ */ jsx23(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx23(Tr, { bg: useColorModeValue("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
         var _a;
-        return /* @__PURE__ */ jsx22(
+        return /* @__PURE__ */ jsx23(
           Th,
           {
             colSpan: header.colSpan,
             width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
-            style: { ...getCommonPinningStyles(header.column) },
+            sx: getCommonPinningStyles(header.column),
             ...styles == null ? void 0 : styles.tableColumnHeader,
             children: /* @__PURE__ */ jsxs9(
               Flex,
               {
+                backgroundColor: "white",
+                height: "100%",
                 "data-test-id": `CT_Container_TableHeader_${header.id}`,
                 textTransform: "capitalize",
                 userSelect: "none",
                 align: "center",
                 gap: 2,
                 children: [
-                  /* @__PURE__ */ jsx22(Text4, { children: flexRender(header.column.columnDef.header, header.getContext()) }),
-                  /* @__PURE__ */ jsx22(
-                    Box11,
+                  /* @__PURE__ */ jsx23(Text4, { children: flexRender(header.column.columnDef.header, header.getContext()) }),
+                  /* @__PURE__ */ jsx23(
+                    Box12,
                     {
                       as: "span",
                       cursor: header.column.getCanSort() ? "pointer" : "default",
                       "data-test-id": `CT_Container_SortingIcon_${header.id}`,
                       onClick: header.column.getToggleSortingHandler(),
                       children: (_a = header.column.getCanSort() && {
-                        asc: /* @__PURE__ */ jsx22(ChevronUpIcon, {}),
-                        desc: /* @__PURE__ */ jsx22(ChevronDownIcon, {})
-                      }[header.column.getIsSorted()]) != null ? _a : /* @__PURE__ */ jsx22(UpDownIcon, { h: 2 })
+                        asc: /* @__PURE__ */ jsx23(ChevronUpIcon, {}),
+                        desc: /* @__PURE__ */ jsx23(ChevronDownIcon, {})
+                      }[header.column.getIsSorted()]) != null ? _a : /* @__PURE__ */ jsx23(UpDownIcon, { h: 2 })
                     }
                   )
                 ]
@@ -1068,9 +1113,9 @@ var DataTable = React5.forwardRef((props, ref) => {
           header.id
         );
       }) }, headerGroup.id)) }),
-      /* @__PURE__ */ jsx22(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
+      /* @__PURE__ */ jsx23(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
         const trRef = useRef();
-        return /* @__PURE__ */ jsx22(
+        return /* @__PURE__ */ jsx23(
           Tr,
           {
             "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
@@ -1097,16 +1142,16 @@ var DataTable = React5.forwardRef((props, ref) => {
                 onRowClick(row.original);
               }
             },
-            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx22(
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx23(
               Td,
               {
                 "data-test-id": `CT_Component_TableCell_${cell.id}`,
                 fontSize: "text.sm",
                 color: useColorModeValue("dark.800", "dark.300"),
-                style: { ...getCommonPinningStyles(cell.column) },
+                sx: getCommonPinningStyles(cell.column),
                 ...styles == null ? void 0 : styles.tableCell,
-                children: /* @__PURE__ */ jsx22(
-                  Box11,
+                children: /* @__PURE__ */ jsx23(Flex, { height: "100%", backgroundColor: "white", align: "center", children: /* @__PURE__ */ jsx23(
+                  Box12,
                   {
                     tabIndex: 0,
                     display: "inline-block",
@@ -1119,7 +1164,7 @@ var DataTable = React5.forwardRef((props, ref) => {
                     },
                     children: flexRender(cell.column.columnDef.cell, cell.getContext())
                   }
-                )
+                ) })
               },
               cell.id
             ))
@@ -1131,12 +1176,8 @@ var DataTable = React5.forwardRef((props, ref) => {
   ] });
 });
 DataTable.defaultProps = {
+  container: void 0,
   withSelectedRow: false,
-  overflowX: "scroll",
-  pos: "relative",
-  maxW: "100%",
-  minH: 400,
-  w: "full",
   styles: void 0,
   isLoading: void 0,
   onSelectedRow: void 0,
@@ -1167,10 +1208,10 @@ import { FiCalendar, FiX } from "react-icons/fi";
 // src/components/datepicker/components/styles.tsx
 import { useColorMode } from "@chakra-ui/system";
 import { Global } from "@emotion/react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Styles = () => {
   const { colorMode } = useColorMode();
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Global,
     {
       styles: `
@@ -1984,7 +2025,7 @@ var styles_default = Styles;
 // src/components/datepicker/components/time-input.tsx
 import { Flex as Flex2, Input, InputGroup as InputGroup3, InputRightAddon as InputRightAddon3, Text as Text5 } from "@chakra-ui/react";
 import React6 from "react";
-import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
 var TimeInput = ({ value, onChange, label, rightAddon }) => {
   const [time, setTime] = React6.useState(value || "00:00");
   const handleChange = (e) => {
@@ -1993,10 +2034,10 @@ var TimeInput = ({ value, onChange, label, rightAddon }) => {
     if (onChange) onChange(((_b = e.target) == null ? void 0 : _b.value) || "00:00");
   };
   return /* @__PURE__ */ jsxs10(Flex2, { flexDir: "column", alignItems: "center", justifyContent: "center", p: 4, pt: 0, children: [
-    /* @__PURE__ */ jsx24(Text5, { mb: 2, children: label }),
+    /* @__PURE__ */ jsx25(Text5, { mb: 2, children: label }),
     /* @__PURE__ */ jsxs10(InputGroup3, { alignItems: "center", justifyContent: "center", children: [
-      /* @__PURE__ */ jsx24(Input, { onChange: handleChange, type: "time", value: time, "data-test-id": "CT_Component_datepicker_input_time" }),
-      rightAddon && /* @__PURE__ */ jsx24(InputRightAddon3, { children: rightAddon })
+      /* @__PURE__ */ jsx25(Input, { onChange: handleChange, type: "time", value: time, "data-test-id": "CT_Component_datepicker_input_time" }),
+      rightAddon && /* @__PURE__ */ jsx25(InputRightAddon3, { children: rightAddon })
     ] })
   ] });
 };
@@ -2010,7 +2051,7 @@ TimeInput.defaultProps = {
 var time_input_default = TimeInput;
 
 // src/components/datepicker/components/datepicker.tsx
-import { Fragment, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
 var Datepicker = ({
   id,
   label,
@@ -2035,18 +2076,18 @@ var Datepicker = ({
     return {
       timeInputLabel: "",
       showTimeInput: true,
-      customTimeInput: /* @__PURE__ */ jsx25(time_input_default, {})
+      customTimeInput: /* @__PURE__ */ jsx26(time_input_default, {})
     };
   };
   const component = /* @__PURE__ */ jsxs11(Fragment, { children: [
-    /* @__PURE__ */ jsx25(styles_default, {}),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(styles_default, {}),
+    /* @__PURE__ */ jsx26(
       ReactDatePicker,
       {
         id,
         name,
         selected,
-        customInput: /* @__PURE__ */ jsx25(Input2, { autoComplete: "off", ...wrapperStyle }),
+        customInput: /* @__PURE__ */ jsx26(Input2, { autoComplete: "off", ...wrapperStyle }),
         dateFormat,
         showPopperArrow: false,
         calendarClassName: cx8({ inline: props.inline }),
@@ -2061,15 +2102,15 @@ var Datepicker = ({
     return component;
   }
   return /* @__PURE__ */ jsxs11(FormControl3, { isRequired, "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
-    label && /* @__PURE__ */ jsx25(FormLabel3, { fontSize: "text.sm", children: label }),
+    label && /* @__PURE__ */ jsx26(FormLabel3, { fontSize: "text.sm", children: label }),
     /* @__PURE__ */ jsxs11(InputGroup4, { children: [
       component,
       /* @__PURE__ */ jsxs11(InputRightElement3, { children: [
-        !value && /* @__PURE__ */ jsx25(FiCalendar, {}),
-        value && /* @__PURE__ */ jsx25(FiX, { "data-test-id": "bcpJJyCP0z_RIAGZXDU6s", onClick: onClear, cursor: "pointer" })
+        !value && /* @__PURE__ */ jsx26(FiCalendar, {}),
+        value && /* @__PURE__ */ jsx26(FiX, { "data-test-id": "bcpJJyCP0z_RIAGZXDU6s", onClick: onClear, cursor: "pointer" })
       ] })
     ] }),
-    !isError ? /* @__PURE__ */ jsx25(FormHelperText3, { fontSize: "text.xs", mt: 1, children: helperText }) : /* @__PURE__ */ jsx25(FormErrorMessage3, { fontSize: "text.xs", mt: 1, children: error })
+    !isError ? /* @__PURE__ */ jsx26(FormHelperText3, { fontSize: "text.xs", mt: 1, children: helperText }) : /* @__PURE__ */ jsx26(FormErrorMessage3, { fontSize: "text.xs", mt: 1, children: error })
   ] });
 };
 Datepicker.defaultProps = {
@@ -2087,14 +2128,14 @@ Datepicker.defaultProps = {
 var datepicker_default = Datepicker;
 
 // src/components/datepicker/components/datepicker-month/datepicker-month.tsx
-import { Box as Box12, Input as Input3 } from "@chakra-ui/react";
+import { Box as Box13, Input as Input3 } from "@chakra-ui/react";
 import { css as css2 } from "@emotion/react";
 import React7 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var DatePickerMonth = ({ onChange, min, max, ...props }) => {
   const [date, setDate] = React7.useState(null);
-  return /* @__PURE__ */ jsx26(
-    Box12,
+  return /* @__PURE__ */ jsx27(
+    Box13,
     {
       fontSize: "12px",
       lineHeight: "18px",
@@ -2108,7 +2149,7 @@ var DatePickerMonth = ({ onChange, min, max, ...props }) => {
           width: 58px;
         }
       `,
-      children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx27(
         Input3,
         {
           "data-test-id": props["data-test-id"],
@@ -2146,11 +2187,11 @@ DatePickerMonth.defaultProps = {
 var datepicker_month_default = DatePickerMonth;
 
 // src/components/datepicker/components/datepicker-month/multi-datepicker-month.tsx
-import { Box as Box13 } from "@chakra-ui/react";
+import { Box as Box14 } from "@chakra-ui/react";
 import styled from "@emotion/styled";
 import React8 from "react";
-import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
-var MultiDateWrapper = styled(Box13)`
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+var MultiDateWrapper = styled(Box14)`
   display: flex;
   align-items: center;
   width: fit-content;
@@ -2167,7 +2208,7 @@ var MultiDatePickerMonth = ({
 }) => {
   const [date, setDate] = React8.useState([null, null]);
   return /* @__PURE__ */ jsxs12(MultiDateWrapper, { isError, children: [
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(
       datepicker_month_default,
       {
         "data-test-id": "CT_DatePickerMonth_StartDate",
@@ -2179,8 +2220,8 @@ var MultiDatePickerMonth = ({
         max
       }
     ),
-    /* @__PURE__ */ jsx27(Box13, { children: "-" }),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx28(Box14, { children: "-" }),
+    /* @__PURE__ */ jsx28(
       datepicker_month_default,
       {
         "data-test-id": "CT_DatePickerMonth_EndDate",
@@ -2203,7 +2244,7 @@ var multi_datepicker_month_default = MultiDatePickerMonth;
 
 // src/components/dialog/components/dialog.tsx
 import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text as Text6 } from "@chakra-ui/react";
-import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 var Dialog = ({
   title,
   content,
@@ -2214,11 +2255,11 @@ var Dialog = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs13(Modal, { ...props, children: [
-    isModalOverlay && /* @__PURE__ */ jsx28(ModalOverlay, { pointerEvents: isOverlayClickable ? "auto" : "none" }),
-    /* @__PURE__ */ jsxs13(ModalContent, { bgColor: "neutral.50", fontFamily: "Poppins", width, children: [
-      /* @__PURE__ */ jsx28(ModalHeader, { bgColor: "neutral.200", py: 2, px: 4, borderTopRadius: "sm", children: /* @__PURE__ */ jsx28(Text6, { textStyle: "text.lg", fontWeight: "normal", children: title }) }),
-      /* @__PURE__ */ jsx28(ModalBody, { p: 4, textStyle: "text.md", children: content }),
-      /* @__PURE__ */ jsx28(ModalFooter, { bgColor: "neutral.200", p: 4, borderBottomRadius: "sm", children: footer })
+    isModalOverlay && /* @__PURE__ */ jsx29(ModalOverlay, { pointerEvents: isOverlayClickable ? "auto" : "none" }),
+    /* @__PURE__ */ jsxs13(ModalContent, { bgColor: "neutral.50", fontFamily: "Poppins", width, minW: "400px", children: [
+      /* @__PURE__ */ jsx29(ModalHeader, { bgColor: "neutral.200", py: 2, px: 4, borderTopRadius: "sm", children: /* @__PURE__ */ jsx29(Text6, { textStyle: "text.lg", fontWeight: "normal", children: title }) }),
+      /* @__PURE__ */ jsx29(ModalBody, { p: 4, textStyle: "text.md", children: content }),
+      /* @__PURE__ */ jsx29(ModalFooter, { bgColor: "neutral.200", p: 4, borderBottomRadius: "sm", children: footer })
     ] })
   ] });
 };
@@ -2233,12 +2274,12 @@ var dialog_default = Dialog;
 import { Flex as Flex4, HStack as HStack3 } from "@chakra-ui/react";
 
 // src/components/header/components/logo.tsx
-import { Box as Box14, Image, useColorModeValue as useColorModeValue2 } from "@chakra-ui/react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { Box as Box15, Image, useColorModeValue as useColorModeValue2 } from "@chakra-ui/react";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Logo = ({ url, imageUrl, height }) => {
   if (url)
-    return /* @__PURE__ */ jsx29(Box14, { as: "a", href: url, cursor: "pointer", target: "_self", children: /* @__PURE__ */ jsx29(Image, { w: "100%", h: height != null ? height : 9, maxH: height != null ? height : 9, src: imageUrl, alt: imageUrl }) });
-  return /* @__PURE__ */ jsx29(Image, { w: "100%", h: height != null ? height : 9, maxH: height != null ? height : 9, src: imageUrl, alt: imageUrl });
+    return /* @__PURE__ */ jsx30(Box15, { as: "a", href: url, cursor: "pointer", target: "_self", children: /* @__PURE__ */ jsx30(Image, { w: "100%", h: height != null ? height : 9, maxH: height != null ? height : 9, src: imageUrl, alt: imageUrl }) });
+  return /* @__PURE__ */ jsx30(Image, { w: "100%", h: height != null ? height : 9, maxH: height != null ? height : 9, src: imageUrl, alt: imageUrl });
 };
 Logo.defaultProps = {
   url: void 0,
@@ -2248,7 +2289,7 @@ Logo.defaultProps = {
 // src/components/header/components/profile.tsx
 import {
   Avatar,
-  Box as Box15,
+  Box as Box16,
   Flex as Flex3,
   HStack as HStack2,
   Popover,
@@ -2262,13 +2303,13 @@ import {
   VStack
 } from "@chakra-ui/react";
 import { FiPower } from "react-icons/fi";
-import { Fragment as Fragment2, jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
 var Profile = ({ color, brandColor, data, onLogout }) => {
   var _a;
   const { isOpen, onToggle, onClose } = useDisclosure();
   return /* @__PURE__ */ jsxs14(Popover, { placement: "bottom-end", isOpen, onClose, children: [
-    /* @__PURE__ */ jsx30(
-      Box15,
+    /* @__PURE__ */ jsx31(
+      Box16,
       {
         "data-test-id": "WE0UYbA93LOZy6S09IhDO",
         as: "button",
@@ -2280,20 +2321,20 @@ var Profile = ({ color, brandColor, data, onLogout }) => {
         color,
         children: /* @__PURE__ */ jsxs14(HStack2, { children: [
           /* @__PURE__ */ jsxs14(VStack, { alignItems: "flex-end", spacing: 0, ml: "2", color, children: [
-            /* @__PURE__ */ jsx30(Text7, { textStyle: "text.xs", mb: 1, children: data == null ? void 0 : data.email }),
+            /* @__PURE__ */ jsx31(Text7, { textStyle: "text.xs", mb: 1, children: data == null ? void 0 : data.email }),
             /* @__PURE__ */ jsxs14(Flex3, { alignItems: "center", children: [
-              (data == null ? void 0 : data.userRole) && /* @__PURE__ */ jsx30(Text7, { textStyle: "text.xs", children: (data == null ? void 0 : data.userRole) || "user" }),
-              /* @__PURE__ */ jsx30(Box15, { h: "3", mx: "1", borderLeft: "1px solid", borderColor: "neutral.400" }),
+              (data == null ? void 0 : data.userRole) && /* @__PURE__ */ jsx31(Text7, { textStyle: "text.xs", children: (data == null ? void 0 : data.userRole) || "user" }),
+              /* @__PURE__ */ jsx31(Box16, { h: "3", mx: "1", borderLeft: "1px solid", borderColor: "neutral.400" }),
               typeof (data == null ? void 0 : data.office) === "object" ? /* @__PURE__ */ jsxs14(Fragment2, { children: [
-                /* @__PURE__ */ jsx30(Text7, { textStyle: "text.xs", children: data.office[0] }),
+                /* @__PURE__ */ jsx31(Text7, { textStyle: "text.xs", children: data.office[0] }),
                 data.office.length > 1 && /* @__PURE__ */ jsxs14(badge_default, { ml: "1", pill: true, variant: "neutral-light", children: [
                   data.office.length - 1,
                   "+"
                 ] })
-              ] }) : /* @__PURE__ */ jsx30(Text7, { textStyle: "text.xs", children: (data == null ? void 0 : data.office) || "office" })
+              ] }) : /* @__PURE__ */ jsx31(Text7, { textStyle: "text.xs", children: (data == null ? void 0 : data.office) || "office" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx30(PopoverTrigger, { children: /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31(PopoverTrigger, { children: /* @__PURE__ */ jsx31(
             Avatar,
             {
               size: "sm",
@@ -2310,8 +2351,8 @@ var Profile = ({ color, brandColor, data, onLogout }) => {
       }
     ),
     /* @__PURE__ */ jsxs14(PopoverContent, { bg: "white", maxW: 200, children: [
-      /* @__PURE__ */ jsx30(PopoverArrow, { bg: "white" }),
-      /* @__PURE__ */ jsx30(PopoverBody, { p: 1, children: /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsx31(PopoverArrow, { bg: "white" }),
+      /* @__PURE__ */ jsx31(PopoverBody, { p: 1, children: /* @__PURE__ */ jsxs14(
         Flex3,
         {
           "data-test-id": "gA7F9pucPX_Q3_dkgXIYZ",
@@ -2324,8 +2365,8 @@ var Profile = ({ color, brandColor, data, onLogout }) => {
           onClick: onLogout,
           textStyle: "text.xs",
           children: [
-            /* @__PURE__ */ jsx30(FiPower, {}),
-            /* @__PURE__ */ jsx30(Text7, { ml: 2, children: "Logout" })
+            /* @__PURE__ */ jsx31(FiPower, {}),
+            /* @__PURE__ */ jsx31(Text7, { ml: 2, children: "Logout" })
           ]
         }
       ) })
@@ -2341,17 +2382,17 @@ Profile.defaultProps = {
 var profile_default = Profile;
 
 // src/components/header/components/switch-mode.tsx
-import { Box as Box16, useColorMode as useColorMode2 } from "@chakra-ui/react";
+import { Box as Box17, useColorMode as useColorMode2 } from "@chakra-ui/react";
 import { FiMoon, FiSun } from "react-icons/fi";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var SwitchMode = () => {
   const { colorMode, toggleColorMode } = useColorMode2();
-  return /* @__PURE__ */ jsx31(Box16, { "data-test-id": "rhYuTDCiWkFqr96upiEEh", mx: 5, onClick: toggleColorMode, cursor: "pointer", children: colorMode === "light" ? /* @__PURE__ */ jsx31(FiMoon, { size: 20 }) : /* @__PURE__ */ jsx31(FiSun, { size: 20 }) });
+  return /* @__PURE__ */ jsx32(Box17, { "data-test-id": "rhYuTDCiWkFqr96upiEEh", mx: 5, onClick: toggleColorMode, cursor: "pointer", children: colorMode === "light" ? /* @__PURE__ */ jsx32(FiMoon, { size: 20 }) : /* @__PURE__ */ jsx32(FiSun, { size: 20 }) });
 };
 var switch_mode_default = SwitchMode;
 
 // src/components/header/components/version.tsx
-import { Box as Box17 } from "@chakra-ui/react";
+import { Box as Box18 } from "@chakra-ui/react";
 
 // src/components/header/utils/formatter.ts
 function environmentName(env) {
@@ -2366,9 +2407,9 @@ function environmentName(env) {
 }
 
 // src/components/header/components/version.tsx
-import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
-  version && /* @__PURE__ */ jsx32(
+  version && /* @__PURE__ */ jsx33(
     badge_default,
     {
       fontSize: "8px",
@@ -2379,8 +2420,8 @@ var Version = ({ hideEnv, version, environment, onOpenModalRelease }) => /* @__P
       children: version
     }
   ),
-  !hideEnv && environmentName(environment) !== null && version && /* @__PURE__ */ jsx32(
-    Box17,
+  !hideEnv && environmentName(environment) !== null && version && /* @__PURE__ */ jsx33(
+    Box18,
     {
       background: "primary.50",
       color: "primary.500",
@@ -2402,7 +2443,7 @@ Version.defaultProps = {
 var version_default = Version;
 
 // src/components/header/components/header.tsx
-import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 var Header = ({
   brandColor,
   data,
@@ -2419,14 +2460,14 @@ var Header = ({
   profile,
   bg = "white",
   ...props
-}) => /* @__PURE__ */ jsx33(Flex4, { minH: 15, bg, shadow: "raised", px: 6, py: 3, alignItems: "center", ...props, children: /* @__PURE__ */ jsxs16(Flex4, { h: "auto", w: "full", alignItems: "center", justifyContent: profile ? "flex-end" : "space-between", pos: "relative", children: [
+}) => /* @__PURE__ */ jsx34(Flex4, { minH: 15, bg, shadow: "raised", px: 6, py: 3, alignItems: "center", ...props, children: /* @__PURE__ */ jsxs16(Flex4, { h: "auto", w: "full", alignItems: "center", justifyContent: profile ? "flex-end" : "space-between", pos: "relative", children: [
   mainLogo && /* @__PURE__ */ jsxs16(Flex4, { alignItems: "center", children: [
-    /* @__PURE__ */ jsx33(Logo, { url: urlLogo, imageUrl: mainLogo, height: mainLogoSize }),
+    /* @__PURE__ */ jsx34(Logo, { url: urlLogo, imageUrl: mainLogo, height: mainLogoSize }),
     children && children
   ] }),
   centerLogo && /* @__PURE__ */ jsxs16(HStack3, { w: "fit-content", spacing: 2, alignItems: "center", pos: "absolute", left: "50%", transform: "translate(-50%,0)", children: [
-    /* @__PURE__ */ jsx33(Logo, { url: urlLogo, imageUrl: centerLogo, height: centerLogoSize }),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(Logo, { url: urlLogo, imageUrl: centerLogo, height: centerLogoSize }),
+    /* @__PURE__ */ jsx34(
       version_default,
       {
         hideEnv,
@@ -2437,8 +2478,8 @@ var Header = ({
     )
   ] }),
   profile || /* @__PURE__ */ jsxs16(Flex4, { alignItems: "center", children: [
-    !hideSwitchMode && /* @__PURE__ */ jsx33(switch_mode_default, {}),
-    /* @__PURE__ */ jsx33(profile_default, { color: props.color, brandColor, data, onLogout })
+    !hideSwitchMode && /* @__PURE__ */ jsx34(switch_mode_default, {}),
+    /* @__PURE__ */ jsx34(profile_default, { color: props.color, brandColor, data, onLogout })
   ] })
 ] }) });
 Header.defaultProps = {
@@ -2462,7 +2503,7 @@ import { Icon, IconProps, Image as Image2, ImageProps } from "@chakra-ui/react";
 
 // src/components/layouting/index.ts
 import {
-  Box as Box18,
+  Box as Box19,
   BoxProps,
   Center,
   Container,
@@ -2493,12 +2534,12 @@ import { List, ListIcon, ListItem, ListItemProps, ListProps, OrderedList, Unorde
 // src/components/modal/components/modal-back-button.tsx
 import { ChevronLeftIcon } from "@chakra-ui/icons";
 import { IconButton as IconButton3 } from "@chakra-ui/react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var ModalBackButton = ({ onClick }) => {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     IconButton3,
     {
-      icon: /* @__PURE__ */ jsx34(ChevronLeftIcon, { w: "4.5", h: "4.5" }),
+      icon: /* @__PURE__ */ jsx35(ChevronLeftIcon, { w: "4.5", h: "4.5" }),
       size: "sm",
       minW: "6",
       h: "6",
@@ -2518,18 +2559,18 @@ var modal_back_button_default = ModalBackButton;
 // src/components/modal/components/modal-body.tsx
 import { ModalBody as ChakraModalBody, useColorModeValue as useColorModeValue4 } from "@chakra-ui/react";
 import React9 from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var ModalBody2 = React9.forwardRef(({ children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx35(ChakraModalBody, { px: 4, py: 2, ref, background: useColorModeValue4("white", "mirage.900"), ...rest, children });
+  return /* @__PURE__ */ jsx36(ChakraModalBody, { px: 4, py: 2, ref, background: useColorModeValue4("white", "mirage.900"), ...rest, children });
 });
 var modal_body_default = ModalBody2;
 
 // src/components/modal/components/modal-close-button.tsx
 import { ModalCloseButton as ChakraModalCloseButton, useColorModeValue as useColorModeValue5 } from "@chakra-ui/react";
 import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var ModalCloseButton = forwardRef9((props, ref) => {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     ChakraModalCloseButton,
     {
       ref,
@@ -2547,9 +2588,9 @@ var modal_close_button_default = ModalCloseButton;
 // src/components/modal/components/modal-footer.tsx
 import { ModalFooter as ChakraModalFooter, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
 import { forwardRef as forwardRef10 } from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var ModalFooter2 = forwardRef10(({ children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     ChakraModalFooter,
     {
       ref,
@@ -2565,9 +2606,9 @@ var modal_footer_default = ModalFooter2;
 // src/components/modal/components/modal-header.tsx
 import { ModalHeader as ChakraModalHeader, useColorModeValue as useColorModeValue7 } from "@chakra-ui/react";
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var ModalHeader2 = forwardRef11(({ children, ...rest }, ref) => {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     ChakraModalHeader,
     {
       ref,
@@ -2625,7 +2666,7 @@ import {
 // src/components/navigation/components/navigation.tsx
 import { ChevronDownIcon as ChevronDownIcon2 } from "@chakra-ui/icons";
 import {
-  Box as Box19,
+  Box as Box20,
   Flex as Flex6,
   HStack as HStack5,
   Icon as Icon2,
@@ -2656,12 +2697,12 @@ import {
 
 // src/components/navigation/components/customer-icon.tsx
 import { createIcon } from "@chakra-ui/react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var CustomerIcon = createIcon({
   displayName: "CustomerIcon",
   viewBox: "0 0 16 16",
   path: [
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       "path",
       {
         fill: "currentColor",
@@ -2670,14 +2711,14 @@ var CustomerIcon = createIcon({
         clipRule: "inherit"
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       "path",
       {
         fill: "currentColor",
         d: "M12.416 12.698a1.997 1.997 0 0 0-1.75-1.031H5.334a2 2 0 0 0-1.864 1.277 7.722 7.722 0 0 1-.943-1.074 3.329 3.329 0 0 1 2.807-1.537h5.334a3.333 3.333 0 0 1 2.703 1.384c-.275.325-.594.66-.954.98Z"
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       "path",
       {
         fill: "currentColor",
@@ -2707,22 +2748,22 @@ var mappingIcon = /* @__PURE__ */ new Map([
 ]);
 
 // src/components/navigation/components/navigation.tsx
-import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 var Navigation = ({ navigations, activePath, as, host, ...props }) => {
-  return /* @__PURE__ */ jsx40(
-    Box19,
+  return /* @__PURE__ */ jsx41(
+    Box20,
     {
       bg: useColorModeValue8("white", "ebony-clay.800"),
       boxShadow: "0 4px 20px 0 rgb(0 0 0 / 5%)",
       borderRadius: "md",
       overflowX: "auto",
       ...props,
-      children: /* @__PURE__ */ jsx40(Flex6, { alignItems: "center", p: 2, children: /* @__PURE__ */ jsx40(HStack5, { spacing: 2, children: navigations == null ? void 0 : navigations.map((navigation) => {
+      children: /* @__PURE__ */ jsx41(Flex6, { alignItems: "center", p: 2, children: /* @__PURE__ */ jsx41(HStack5, { spacing: 2, children: navigations == null ? void 0 : navigations.map((navigation) => {
         const isActive = activePath.startsWith(navigation.navLink || "");
         const activeBg = isActive ? "primary.500" : void 0;
-        return /* @__PURE__ */ jsx40(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-          /* @__PURE__ */ jsx40(PopoverTrigger2, { children: /* @__PURE__ */ jsxs17(
-            Box19,
+        return /* @__PURE__ */ jsx41(Popover2, { trigger: "hover", placement: "bottom-start", children: ({ isOpen }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
+          /* @__PURE__ */ jsx41(PopoverTrigger2, { children: /* @__PURE__ */ jsxs17(
+            Box20,
             {
               display: "flex",
               alignItems: "center",
@@ -2735,13 +2776,13 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
               color: isActive ? "white" : "inherit",
               p: 2,
               children: [
-                /* @__PURE__ */ jsx40(Icon2, { as: mappingIcon.get(navigation.title), mr: 2 }),
-                /* @__PURE__ */ jsx40(Text8, { whiteSpace: "nowrap", fontSize: "text.sm", fontWeight: 400, children: navigation.title }),
-                /* @__PURE__ */ jsx40(ChevronDownIcon2, { ml: 2 })
+                /* @__PURE__ */ jsx41(Icon2, { as: mappingIcon.get(navigation.title), mr: 2 }),
+                /* @__PURE__ */ jsx41(Text8, { whiteSpace: "nowrap", fontSize: "text.sm", fontWeight: 400, children: navigation.title }),
+                /* @__PURE__ */ jsx41(ChevronDownIcon2, { ml: 2 })
               ]
             }
           ) }),
-          navigation.children && /* @__PURE__ */ jsx40(Portal, { children: /* @__PURE__ */ jsx40(Box19, { zIndex: "popover", children: /* @__PURE__ */ jsx40(
+          navigation.children && /* @__PURE__ */ jsx41(Portal, { children: /* @__PURE__ */ jsx41(Box20, { zIndex: "popover", children: /* @__PURE__ */ jsx41(
             PopoverContent2,
             {
               bg: useColorModeValue8("white", "ebony-clay.800"),
@@ -2753,7 +2794,7 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                 const link = navHost ? `${navHost}${navLink}` : navLink;
                 const isLocalLink = host === navHost;
                 const isActiveSub = activePath === navLink;
-                return /* @__PURE__ */ jsx40(
+                return /* @__PURE__ */ jsx41(
                   Link2,
                   {
                     as: isLocalLink ? as : void 0,
@@ -2762,7 +2803,7 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                       textDecoration: "none"
                     },
                     children: /* @__PURE__ */ jsxs17(
-                      Box19,
+                      Box20,
                       {
                         display: "flex",
                         position: "relative",
@@ -2784,10 +2825,10 @@ var Navigation = ({ navigations, activePath, as, host, ...props }) => {
                         px: 6,
                         py: 4,
                         children: [
-                          /* @__PURE__ */ jsx40(Icon2, { as: mappingIcon.get(navigation.title), mr: 3 }),
-                          /* @__PURE__ */ jsx40(Text8, { fontSize: "text.sm", children: title }),
-                          isActiveSub && /* @__PURE__ */ jsx40(
-                            Box19,
+                          /* @__PURE__ */ jsx41(Icon2, { as: mappingIcon.get(navigation.title), mr: 3 }),
+                          /* @__PURE__ */ jsx41(Text8, { fontSize: "text.sm", children: title }),
+                          isActiveSub && /* @__PURE__ */ jsx41(
+                            Box20,
                             {
                               width: 0.5,
                               height: 8,
@@ -2820,9 +2861,9 @@ Navigation.defaultProps = {
 var navigation_default = Navigation;
 
 // src/components/navigation/components/navigation-bar.tsx
-import { Box as Box20, Button as Button2, Flex as Flex7, Link as Link3, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text9 } from "@chakra-ui/react";
+import { Box as Box21, Button as Button2, Flex as Flex7, Link as Link3, Popover as Popover3, PopoverContent as PopoverContent3, PopoverTrigger as PopoverTrigger3, Text as Text9 } from "@chakra-ui/react";
 import * as Icon3 from "@ctlyst.id/internal-icon";
-import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var NavigationBar = ({
   navigations,
   isFetched,
@@ -2837,14 +2878,14 @@ var NavigationBar = ({
     }
     return subMenu.navHost + subMenu.navLink;
   };
-  return /* @__PURE__ */ jsx41(
-    Box20,
+  return /* @__PURE__ */ jsx42(
+    Box21,
     {
       hidden: isFetched && navigations === void 0,
       backgroundRepeat: "repeat-x",
       "data-test-id": "CT_component_navigation_cms",
       ...props,
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx42(
         Flex7,
         {
           bg: "white",
@@ -2861,8 +2902,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__ */ jsx41(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
-              /* @__PURE__ */ jsx41(PopoverTrigger3, { children: /* @__PURE__ */ jsx41(
+            return /* @__PURE__ */ jsx42(Popover3, { isLazy: true, trigger: "hover", placement: "bottom-start", openDelay: 100, closeDelay: 100, children: ({ isOpen, onClose }) => /* @__PURE__ */ jsxs18(Fragment5, { children: [
+              /* @__PURE__ */ jsx42(PopoverTrigger3, { children: /* @__PURE__ */ jsx42(
                 Button2,
                 {
                   h: 7.5,
@@ -2876,11 +2917,11 @@ var NavigationBar = ({
                   backgroundColor: isOpen && !isActive ? "neutral.400" : activeBg,
                   color: isActive ? "primary.50" : "black.high",
                   leftIcon: mappingIcon2.get(item.title),
-                  rightIcon: /* @__PURE__ */ jsx41(Icon3.ChevronDown, { size: 4, color: "inherit" }),
+                  rightIcon: /* @__PURE__ */ jsx42(Icon3.ChevronDown, { size: 4, color: "inherit" }),
                   children: item.title
                 }
               ) }),
-              item.children && /* @__PURE__ */ jsx41(PopoverContent3, { border: "none", shadow: "raised", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
+              item.children && /* @__PURE__ */ jsx42(PopoverContent3, { border: "none", shadow: "raised", py: 1, width: 240, children: item.children.map((subMenu) => /* @__PURE__ */ jsxs18(
                 Link3,
                 {
                   href: urlMenu(subMenu),
@@ -2900,7 +2941,7 @@ var NavigationBar = ({
                   "data-test-id": `CT_component_navigation_link-${item.id}`,
                   children: [
                     mappingIcon2.get(item.title),
-                    /* @__PURE__ */ jsx41(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
+                    /* @__PURE__ */ jsx42(Text9, { textStyle: "text-sm", ml: 3, children: subMenu.title })
                   ]
                 },
                 subMenu.id
@@ -2919,17 +2960,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 Box21, Text as Text10, useColorModeValue as useColorModeValue10 } from "@chakra-ui/react";
+import { Box as Box22, Text as Text10, useColorModeValue as useColorModeValue10 } from "@chakra-ui/react";
 
 // src/components/pagination/components/pagination-button.tsx
 import { Button as Button3, forwardRef as forwardRef12, useColorModeValue as useColorModeValue9 } from "@chakra-ui/react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var PaginationButton = forwardRef12(({ className, style, isActive, children, ...rest }, ref) => {
   const btnBg = useColorModeValue9("neutral.300", "mirage.900");
   const btnColor = useColorModeValue9("black.high", "primary.300");
   const btnNotActiveBg = useColorModeValue9("secondary.50", "primary.500");
   const btnNotActiveColor = useColorModeValue9("primary.500", "white");
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     Button3,
     {
       "data-test-id": "Pagination-Button",
@@ -2968,7 +3009,7 @@ var pagination_button_default = PaginationButton;
 
 // src/components/pagination/components/pagination-button-trigger.tsx
 import { VisuallyHidden } from "@chakra-ui/react";
-import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
 var PaginationButtonTrigger = ({
   color,
   isDisabled,
@@ -2976,7 +3017,7 @@ var PaginationButtonTrigger = ({
   visuallyHidden,
   icon
 }) => /* @__PURE__ */ jsxs19(pagination_button_default, { "data-test-id": "DLVCc_fBK35spHm5WxjcJ", color, isDisabled, onClick, children: [
-  /* @__PURE__ */ jsx43(VisuallyHidden, { children: visuallyHidden }),
+  /* @__PURE__ */ jsx44(VisuallyHidden, { children: visuallyHidden }),
   icon
 ] });
 PaginationButtonTrigger.defaultProps = {
@@ -2989,7 +3030,7 @@ PaginationButtonTrigger.defaultProps = {
 var pagination_button_trigger_default = PaginationButtonTrigger;
 
 // src/components/pagination/components/pagination.tsx
-import { jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
 var Pagination = ({ className, current, total, onSelect }) => {
   const btnColorDisabled = useColorModeValue10("secondary.100", "primary.500");
   const btnColor = useColorModeValue10("primary.500", "secondary.100");
@@ -3019,8 +3060,8 @@ var Pagination = ({ className, current, total, onSelect }) => {
     }
     return pageButtons;
   };
-  return /* @__PURE__ */ jsxs20(Box21, { className, display: "inline-flex", alignItems: "center", children: [
-    /* @__PURE__ */ jsx44(Box21, { mr: 1, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs20(Box22, { className, display: "inline-flex", alignItems: "center", children: [
+    /* @__PURE__ */ jsx45(Box22, { mr: 1, children: /* @__PURE__ */ jsx45(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3028,11 +3069,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledPrevious,
         onClick: () => handleSelectPage(1),
         visuallyHidden: "First Page",
-        icon: /* @__PURE__ */ jsx44(ArrowLeftIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx45(ArrowLeftIcon, { width: 2 })
       }
     ) }),
-    /* @__PURE__ */ jsxs20(Box21, { bg: "neutral.300", borderRadius: "full", children: [
-      /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsxs20(Box22, { bg: "neutral.300", borderRadius: "full", children: [
+      /* @__PURE__ */ jsx45(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3040,22 +3081,22 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledPrevious,
           onClick: () => handleSelectPage(current - 1),
           visuallyHidden: "Previous Page",
-          icon: /* @__PURE__ */ jsx44(ChevronLeftIcon2, {})
+          icon: /* @__PURE__ */ jsx45(ChevronLeftIcon2, {})
         }
       ),
       generatePages().map((page) => {
-        return /* @__PURE__ */ jsx44(
+        return /* @__PURE__ */ jsx45(
           pagination_button_default,
           {
             "data-test-id": "Pagination-Button",
             isActive: page === current,
             onClick: () => typeof page === "number" ? handleSelectPage(page) : null,
-            children: /* @__PURE__ */ jsx44(Text10, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
+            children: /* @__PURE__ */ jsx45(Text10, { scale: 300, fontSize: "text.sm", lineHeight: 18, fontWeight: 500, children: page })
           },
           page
         );
       }),
-      /* @__PURE__ */ jsx44(
+      /* @__PURE__ */ jsx45(
         pagination_button_trigger_default,
         {
           "data-test-id": "Pagination-Button",
@@ -3063,11 +3104,11 @@ var Pagination = ({ className, current, total, onSelect }) => {
           isDisabled: disabledNext,
           onClick: () => handleSelectPage(current + 1),
           visuallyHidden: "Next Page",
-          icon: /* @__PURE__ */ jsx44(ChevronRightIcon, {})
+          icon: /* @__PURE__ */ jsx45(ChevronRightIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx44(Box21, { ml: 1, children: /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45(Box22, { ml: 1, children: /* @__PURE__ */ jsx45(
       pagination_button_trigger_default,
       {
         "data-test-id": "Pagination-Button",
@@ -3075,7 +3116,7 @@ var Pagination = ({ className, current, total, onSelect }) => {
         isDisabled: disabledNext,
         onClick: () => handleSelectPage(total),
         visuallyHidden: "Last Page",
-        icon: /* @__PURE__ */ jsx44(ArrowRightIcon, { width: 2 })
+        icon: /* @__PURE__ */ jsx45(ArrowRightIcon, { width: 2 })
       }
     ) })
   ] });
@@ -3089,7 +3130,7 @@ var pagination_default = Pagination;
 
 // src/components/pagination/components/pagination-detail.tsx
 import { Text as Text11 } from "@chakra-ui/react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var PaginationDetail = ({
   page,
   limit,
@@ -3099,15 +3140,15 @@ var PaginationDetail = ({
   lineHeight = 18,
   ...rest
 }) => {
-  return /* @__PURE__ */ jsx45(Text11, { scale, fontSize, lineHeight, ...rest, children: `${(page - 1) * limit + 1}-${limit * page < length ? limit * page : length} dari ${length} item` });
+  return /* @__PURE__ */ jsx46(Text11, { scale, 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 Box22, Select, Text as Text12, useColorModeValue as useColorModeValue11 } from "@chakra-ui/react";
+import { Box as Box23, Select, Text as Text12, useColorModeValue as useColorModeValue11 } from "@chakra-ui/react";
 import * as React13 from "react";
 import { FiChevronDown } from "react-icons/fi";
-import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs21 } from "react/jsx-runtime";
 var PaginationFilter = ({
   limit,
   label = "Baris per halaman:",
@@ -3116,9 +3157,9 @@ var PaginationFilter = ({
   ...rest
 }) => {
   const [value, setValue] = React13.useState(limit);
-  return /* @__PURE__ */ jsxs21(Box22, { display: "flex", flexDirection: "row", alignItems: "center", children: [
-    /* @__PURE__ */ jsx46(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue11("neutral.900", "white"), ...rest, children: label }),
-    /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs21(Box23, { display: "flex", flexDirection: "row", alignItems: "center", children: [
+    /* @__PURE__ */ jsx47(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue11("neutral.900", "white"), ...rest, children: label }),
+    /* @__PURE__ */ jsx47(
       Select,
       {
         textAlign: "center",
@@ -3127,7 +3168,7 @@ var PaginationFilter = ({
         border: "none",
         boxShadow: "none",
         width: 18,
-        icon: /* @__PURE__ */ jsx46(FiChevronDown, {}),
+        icon: /* @__PURE__ */ jsx47(FiChevronDown, {}),
         _focusVisible: { boxShadow: "none" },
         onChange: (e) => {
           const numberValue = Number(e.target.value);
@@ -3136,7 +3177,7 @@ var PaginationFilter = ({
         },
         value,
         children: items.map((item) => {
-          return /* @__PURE__ */ jsx46("option", { value: item, children: item }, item);
+          return /* @__PURE__ */ jsx47("option", { value: item, children: item }, item);
         })
       }
     )
@@ -3170,8 +3211,8 @@ import {
 } from "@chakra-ui/react";
 
 // src/components/radio/components/radio.tsx
-import { Box as Box23, Radio as ChakraRadio, Text as Text13 } from "@chakra-ui/react";
-import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Box as Box24, Radio as ChakraRadio, Text as Text13 } from "@chakra-ui/react";
+import { jsx as jsx48, jsxs as jsxs22 } from "react/jsx-runtime";
 var Radio = ({
   isError = false,
   helpText = "",
@@ -3181,9 +3222,9 @@ var Radio = ({
   ...rest
 }) => {
   const variant = isError ? "errors" : "unstyled";
-  return /* @__PURE__ */ jsxs22(Box23, { children: [
-    /* @__PURE__ */ jsx47(Box23, { display: "flex", children: /* @__PURE__ */ jsx47(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx47(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
-    /* @__PURE__ */ jsx47(Box23, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx47(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx47(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
+  return /* @__PURE__ */ jsxs22(Box24, { children: [
+    /* @__PURE__ */ jsx48(Box24, { display: "flex", children: /* @__PURE__ */ jsx48(ChakraRadio, { variant, ...rest, isDisabled, children: children && /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
+    /* @__PURE__ */ jsx48(Box24, { mt: "5px", ml: "24px", children: isError ? /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx48(Text13, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
   ] });
 };
 Radio.displayName = "Radio";
@@ -3194,8 +3235,8 @@ Radio.defaultProps = {
 };
 
 // src/components/radio/components/radio-group.tsx
-import { Box as Box24, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { Box as Box25, RadioGroup as ChakraRadioGroup, Stack as Stack3 } from "@chakra-ui/react";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var RadioGroup = ({
   children,
   label,
@@ -3204,7 +3245,7 @@ var RadioGroup = ({
   errorMessage,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx48(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx48(Box24, { mt: "12px", children: /* @__PURE__ */ jsx48(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx48(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
+  return /* @__PURE__ */ jsx49(field_default, { ...props, label, leftHelperText: helpText, isError, errorMessage, children: /* @__PURE__ */ jsx49(Box25, { mt: "12px", children: /* @__PURE__ */ jsx49(ChakraRadioGroup, { ...props, children: /* @__PURE__ */ jsx49(Stack3, { spacing: [1, "16px"], direction: ["column", "row"], children }) }) }) });
 };
 RadioGroup.displayName = "RadioGroup";
 RadioGroup.defaultProps = {
@@ -3227,9 +3268,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 jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var Rating = ({ value }) => {
-  return /* @__PURE__ */ jsx49(Grid2, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx49(RatingIcon, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
+  return /* @__PURE__ */ jsx50(Grid2, { gap: "4px", display: "flex", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx50(RatingIcon, { color: i < value ? "#FFA230" : "#E0E0E0", size: 24 })) });
 };
 var rating_default = Rating;
 
@@ -3237,17 +3278,6 @@ var rating_default = Rating;
 import { useColorMode as useColorMode3 } from "@chakra-ui/system";
 import ReactSelect from "react-select";
 
-// src/components/select/components/select-wrapper.tsx
-import { Box as Box25 } from "@chakra-ui/react";
-import { jsx as jsx50 } from "react/jsx-runtime";
-var SelectWrapper = ({ children }) => {
-  return /* @__PURE__ */ jsx50(Box25, { children });
-};
-SelectWrapper.defaultProps = {
-  isError: false
-};
-var select_wrapper_default = SelectWrapper;
-
 // src/config/theme/foundations/shadows.ts
 import { theme as theme2 } from "@chakra-ui/react";
 var shadows = {
@@ -3513,37 +3543,32 @@ var selectStyle = {
   lineHeight: styleMd.lineHeight,
   letterSpacing: 0
 };
-var boxShadow = (color) => `0 0 0 1px ${color}`;
 function selectStyles(colorMode, _isError) {
-  const boxShadowLight = (isFocused = false, isError = false) => {
-    if (isError && isFocused || isError) {
-      return boxShadow("danger.500");
-    }
-    if (isFocused) {
-      return boxShadow("primary.500");
-    }
-    return boxShadow("neutral.400");
-  };
   return {
-    control: (base, state) => colorMode === "dark" ? {
-      ...base,
-      ...selectStyle,
-      background: "transparent",
-      color: "primary.300",
-      borderColor: "secondary.500",
-      boxShadow: state.isFocused ? "none" : `inherit`
-    } : {
-      ...base,
-      ...selectStyle,
-      borderWidth: 0,
-      boxShadow: boxShadowLight(state.isFocused, _isError)
+    control: (base, { isDisabled, isFocused }) => {
+      const style = {
+        ...base,
+        flexWrap: "nowrap",
+        borderColor: isFocused ? "var(--chakra-colors-primary-500)" : "var(--chakra-colors-neutral-400)",
+        boxShadow: "none",
+        color: isDisabled ? "var(--chakra-colors-black-low)" : "var(--chakra-colors-black-high)",
+        "&:hover": {
+          borderColor: _isError ? "" : isFocused ? "var(--chakra-colors-primary-500)" : "var(--chakra-colors-neutral-500)"
+        }
+      };
+      if (_isError) {
+        return {
+          ...style,
+          borderColor: "var(--chakra-colors-danger-500)"
+        };
+      }
+      return style;
     },
-    option: (base, { isSelected }) => colorMode === "dark" ? {
+    option: (base) => ({
       ...base,
       ...selectStyle,
-      background: isSelected ? "primary.700" : "dark.800",
-      color: "white"
-    } : { ...base, ...selectStyle },
+      color: "var(--chakra-colors-neutral-900)"
+    }),
     menu: (base) => colorMode === "dark" ? {
       ...base,
       ...selectStyle,
@@ -3568,10 +3593,10 @@ var themeSelect = (theme6) => {
     ...theme6,
     colors: {
       ...theme6.colors,
-      primary: "primary.500",
-      primary25: "primary.50",
-      primary50: "primary.100",
-      primary75: "primary.200"
+      primary: "var(--chakra-colors-primary-100)",
+      primary25: "var(--chakra-colors-primary-50)",
+      primary50: "var(--chakra-colors-primary-100)",
+      primary75: "var(--chakra-colors-primary-200)"
     }
   };
 };
@@ -3584,7 +3609,7 @@ function Select2({
   ...rest
 }) {
   const { colorMode } = useColorMode3();
-  return /* @__PURE__ */ jsx51(select_wrapper_default, { isError, children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx51(
     ReactSelect,
     {
       classNamePrefix: "react-select",
@@ -3592,7 +3617,7 @@ function Select2({
       styles: { ...selectStyles(colorMode, isError) },
       theme: themeSelect
     }
-  ) });
+  );
 }
 var select_default = Select2;
 
@@ -3606,7 +3631,7 @@ function SelectAsync({
   ...rest
 }) {
   const { colorMode } = useColorMode4();
-  return /* @__PURE__ */ jsx52(select_wrapper_default, { isError, children: /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx52(
     AsyncPaginate,
     {
       classNamePrefix: "react-select",
@@ -3614,7 +3639,7 @@ function SelectAsync({
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
     }
-  ) });
+  );
 }
 var select_async_default = SelectAsync;
 
@@ -3624,7 +3649,7 @@ import ReactSelectAsyncCreatable from "react-select/async-creatable";
 import { jsx as jsx53 } from "react/jsx-runtime";
 function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode5();
-  return /* @__PURE__ */ jsx53(select_wrapper_default, { isError, children: /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx53(
     ReactSelectAsyncCreatable,
     {
       classNamePrefix: "react-select",
@@ -3632,7 +3657,7 @@ function SelectAsyncCreatable({ styles, isError = false, ...rest }) {
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
     }
-  ) });
+  );
 }
 
 // src/components/select/components/select-creatable.tsx
@@ -3641,7 +3666,7 @@ import ReactSelectCreatable from "react-select/creatable";
 import { jsx as jsx54 } from "react/jsx-runtime";
 function SelectCreatable({ styles, isError = false, ...rest }) {
   const { colorMode } = useColorMode6();
-  return /* @__PURE__ */ jsx54(select_wrapper_default, { isError, children: /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx54(
     ReactSelectCreatable,
     {
       classNamePrefix: "react-select",
@@ -3649,7 +3674,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
       styles: { ...selectStyles(colorMode, isError), ...styles },
       theme: themeSelect
     }
-  ) });
+  );
 }
 
 // src/components/switch/components/switch.tsx
@@ -4031,7 +4056,12 @@ var baseStyleButton = defineStyle2({
     bg: "neutral.100"
   },
   _hover: {
-    bg: "neutral.100"
+    bg: "neutral.100",
+    ".eye-icon": {
+      display: "block",
+      opacity: 1,
+      visibility: "visible"
+    }
   },
   _disabled: {
     opacity: 0.4,
@@ -4039,7 +4069,10 @@ var baseStyleButton = defineStyle2({
   },
   py: 2,
   px: 4,
-  position: "relative"
+  position: "relative",
+  ".eye-icon": {
+    visibility: "hidden"
+  }
 });
 var baseStylePanel = defineStyle2({
   pt: "2",
@@ -5552,6 +5585,7 @@ export {
   Accordion,
   AccordionButton,
   AccordionButtonProps,
+  AccordionEye,
   AccordionIcon,
   AccordionIconProps,
   AccordionIndicator,
@@ -5583,7 +5617,7 @@ export {
   AvatarGroupProps,
   AvatarProps,
   badge_default as Badge,
-  Box18 as Box,
+  Box19 as Box,
   BoxProps,
   bread_crumb_default as BreadCrumb,
   button_default as Button,