npm - @ctlyst.id/internal-ui - Versions diffs - 2.1.11 → 2.1.14 - Mend

@ctlyst.id/internal-ui 2.1.11 → 2.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.mjs CHANGED Viewed

@@ -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,