spotlibs-components 0.1.13 → 0.1.14

package/dist/index.mjs

@@ -1,28 +1,30 @@
 "use client";
-import { Thumblock, IconFilePDF, IconFileCSV, IconFileJPG } from './chunk-F6KSEYVB.mjs';
-export { AnalisisRisikoKreditNasabahIcon, AppendixIcon, BgBuilding, BgPerson, ChecklistDokumenPaketKreditIcon, CreditRiskRatingIcon, DefaultAvatarIcon, DefaultImageIcon, DokumenPenjagaanIcon, EmptyDataIcon, FilePdfIcon, IconFileCSV, IconFileDocx, IconFileDrive, IconFileJPG, IconFilePDF, IconFileXls, IconOnProcess, InformasiKursIcon, InformasiNasabahIcon, InformationIcon, MatriksRiskDanMitigationIcon, NoInternetConnectionIcon, NotulenRapatPraKomiteIcon, OfferingLetterIcon, PengajuanDanFasilitasKreditIcon, ProfitabilitasDanHubunganNasabahIcon, RekeningEscrowIcon, RekeningOprasionalIcon, RekeningTujuanIcon, RekomendasiPutusanIcon, RingkasanEksekutifIcon, ThumbDialogConfirm, ThumbDialogSuccess, ThumbDialogWarning, ThumbDialogWarningV2, ThumbModalError, ThumbOnProgress, ThumbSendFailed, ThumbSendSuccess, Thumblock } from './chunk-F6KSEYVB.mjs';
+import { Thumblock, WarningHero, ErrorHero, SuccessHero, IconFilePDF, IconFileCSV, IconFileJPG } from './chunk-WDRSX6IA.mjs';
+export { AnalisisRisikoKreditNasabahIcon, AppendixIcon, BgBuilding, BgPerson, ChecklistDokumenPaketKreditIcon, CreditRiskRatingIcon, DefaultAvatarIcon, DefaultImageIcon, DokumenPenjagaanIcon, EmptyDataIcon, ErrorHero, FilePdfIcon, IconFileCSV, IconFileDocx, IconFileDrive, IconFileJPG, IconFilePDF, IconFileXls, IconOnProcess, InformasiKursIcon, InformasiNasabahIcon, InformationIcon, MatriksRiskDanMitigationIcon, NoInternetConnectionIcon, NotulenRapatPraKomiteIcon, OfferingLetterIcon, PengajuanDanFasilitasKreditIcon, ProfitabilitasDanHubunganNasabahIcon, RekeningEscrowIcon, RekeningOprasionalIcon, RekeningTujuanIcon, RekomendasiPutusanIcon, RingkasanEksekutifIcon, SentSuccessfullyHero, SuccessHero, ThumbOnProgress, ThumbSendFailed, Thumblock, WarningHero, WarningOutlineHero } from './chunk-WDRSX6IA.mjs';
 import { errorState, callAsset } from './chunk-UFE7HFT2.mjs';
 import { __spreadValues, __spreadProps, __objRest } from './chunk-YOSPWY5K.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React4, { useMemo, useState, useCallback, isValidElement, createElement, useEffect, useRef, Fragment as Fragment$1, useId } from 'react';
-import KeyboardArrowRightRaw from '@mui/icons-material/KeyboardArrowRight';
-import KeyboardArrowLeftRaw from '@mui/icons-material/KeyboardArrowLeft';
-import IconButtonRaw from '@mui/material/IconButton';
 import AlertRaw from '@mui/material/Alert';
 import AlertTitleRaw from '@mui/material/AlertTitle';
 import BoxRaw from '@mui/material/Box';
 import MuiTypographyRaw from '@mui/material/Typography';
-import { IconSquareCheckFilled, IconSquare, IconSquareMinusFilled, IconArrowsUpDown, IconArrowUp, IconArrowDown, IconAlertCircle, IconCalendarWeekFilled, IconUpload as IconUpload$1, IconAlertTriangle, IconInfoCircle, IconCircleCheck, IconXboxXFilled, IconTrash as IconTrash$1 } from '@tabler/icons-react';
+import { IconSquareCheckFilled, IconSquare, IconSquareMinusFilled, IconArrowsUpDown, IconArrowUp, IconArrowDown, IconAlertCircle, IconX, IconAlertCircleFilled, IconCalendarWeekFilled, IconUpload as IconUpload$1, IconAlertTriangle, IconCircleCheck, IconInfoCircle, IconXboxXFilled, IconTrash as IconTrash$1, IconHelpCircle } from '@tabler/icons-react';
 import ButtonBaseRaw from '@mui/material/ButtonBase';
+import SkeletonRaw from '@mui/material/Skeleton';
+import SwitchRaw from '@mui/material/Switch';
+import { styled } from '@mui/material/styles';
 import MuiCardRaw from '@mui/material/Card';
 import CollapseRaw from '@mui/material/Collapse';
+import IconButtonRaw from '@mui/material/IconButton';
 import KeyboardArrowDownIconRaw from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIconRaw from '@mui/icons-material/KeyboardArrowUp';
-import SwitchRaw from '@mui/material/Switch';
-import { styled } from '@mui/material/styles';
+import { Watermark } from '@hirohe/react-watermark';
+import SnackbarRaw from '@mui/material/Snackbar';
 import MuiCheckboxRaw from '@mui/material/Checkbox';
 import FormControlLabelRaw from '@mui/material/FormControlLabel';
 import FormGroupRaw from '@mui/material/FormGroup';
+import { useController, useForm } from 'react-hook-form';
 import PropTypes3 from 'prop-types';
 import CircularProgressRaw from '@mui/material/CircularProgress';
 import PaperRaw from '@mui/material/Paper';
@@ -33,7 +35,8 @@ import TableContainerRaw from '@mui/material/TableContainer';
 import TableHeadRaw from '@mui/material/TableHead';
 import TablePaginationRaw from '@mui/material/TablePagination';
 import TableRowRaw from '@mui/material/TableRow';
-import { useController, useForm } from 'react-hook-form';
+import KeyboardArrowRightRaw from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowLeftRaw from '@mui/icons-material/KeyboardArrowLeft';
 import dayjs from 'dayjs';
 import TextFieldRaw from '@mui/material/TextField';
 import PopoverRaw from '@mui/material/Popover';
@@ -2152,32 +2155,6 @@ var ArrowFrameOutlineUpIcon = ({ color }) => /* @__PURE__ */ jsx("svg", { width:
 var ArrowFrameOutlineRightIcon = ({ color }) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M11 9L14 12L11 15M12 3C19.2 3 21 4.8 21 12C21 19.2 19.2 21 12 21C4.8 21 3 19.2 3 12C3 4.8 4.8 3 12 3Z", stroke: color || "#999999", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var ArrowFrameOutlineDownIcon = ({ color }) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M15 11L12 14L9 11M12 3C19.2 3 21 4.8 21 12C21 19.2 19.2 21 12 21C4.8 21 3 19.2 3 12C3 4.8 4.8 3 12 3Z", stroke: color || "#999999", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var ArrowFrameOutlineLeftIcon = ({ color }) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M13 15L10 12L13 9M12 3C19.2 3 21 4.8 21 12C21 19.2 19.2 21 12 21C4.8 21 3 19.2 3 12C3 4.8 4.8 3 12 3Z", stroke: color || "#999999", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var _a, _b;
-var KeyboardArrowRight = (_b = (_a = KeyboardArrowRightRaw) == null ? void 0 : _a.default) != null ? _b : KeyboardArrowRightRaw;
-var _a2, _b2;
-var KeyboardArrowLeft = (_b2 = (_a2 = KeyboardArrowLeftRaw) == null ? void 0 : _a2.default) != null ? _b2 : KeyboardArrowLeftRaw;
-var _a3, _b3;
-var IconButton = (_b3 = (_a3 = IconButtonRaw) == null ? void 0 : _a3.default) != null ? _b3 : IconButtonRaw;
-var ServerSidePaginationActions = (props) => {
-  const { page, onPageChange, rowsPerPage, currentPageData } = props;
-  const handleBackButtonClick = () => {
-    onPageChange(null, page - 1);
-  };
-  const handleNextButtonClick = () => {
-    onPageChange(null, page + 1);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(IconButton, { onClick: handleBackButtonClick, disabled: page === 0, children: /* @__PURE__ */ jsx(KeyboardArrowLeft, {}) }),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        onClick: handleNextButtonClick,
-        disabled: !(currentPageData == null ? void 0 : currentPageData.length) || (currentPageData == null ? void 0 : currentPageData.length) < rowsPerPage,
-        children: /* @__PURE__ */ jsx(KeyboardArrowRight, {})
-      }
-    )
-  ] });
-};
 
 // src/components/atoms/colors/derived/derived.jsx
 var DerivedColor = {
@@ -2232,8 +2209,8 @@ var DerivedColor = {
   color_icon_danger: PrimitiveColor.color_red_500,
   color_icon_warning: PrimitiveColor.color_yellow_600
 };
-var _a4, _b4;
-var Box = (_b4 = (_a4 = BoxRaw) == null ? void 0 : _a4.default) != null ? _b4 : BoxRaw;
+var _a, _b;
+var Box = (_b = (_a = BoxRaw) == null ? void 0 : _a.default) != null ? _b : BoxRaw;
 var Radius = {
   radius_0: "0px",
   radius_1: "4px",
@@ -2242,18 +2219,18 @@ var Radius = {
   radius_4: "16px",
   radius_x: "999px"
 };
-var RadiusToken = (_a107) => {
-  var _b107 = _a107, {
+var RadiusToken = (_a126) => {
+  var _b126 = _a126, {
     radius = "radius_0",
     children,
     sx = {}
-  } = _b107, rest = __objRest(_b107, [
+  } = _b126, rest = __objRest(_b126, [
     "radius",
     "children",
     "sx"
   ]);
-  var _a108;
-  const borderRadius = (_a108 = Radius[radius]) != null ? _a108 : Radius.radius_0;
+  var _a127;
+  const borderRadius = (_a127 = Radius[radius]) != null ? _a127 : Radius.radius_0;
   return /* @__PURE__ */ jsx(
     Box,
     __spreadProps(__spreadValues({
@@ -2271,8 +2248,8 @@ var RadiusToken = (_a107) => {
   );
 };
 var radius_default = RadiusToken;
-var _a5, _b5;
-var MuiTypography = (_b5 = (_a5 = MuiTypographyRaw) == null ? void 0 : _a5.default) != null ? _b5 : MuiTypographyRaw;
+var _a2, _b2;
+var MuiTypography = (_b2 = (_a2 = MuiTypographyRaw) == null ? void 0 : _a2.default) != null ? _b2 : MuiTypographyRaw;
 var BASE_LINE_HEIGHT = 1.4;
 var LETTER_SPACING = "0px";
 var TYPOGRAPHY_COLORS = {
@@ -2394,12 +2371,12 @@ var VariantStyles = {
     fontWeight: 400
   }
 };
-var BaseTypography = (_a107) => {
-  var _b107 = _a107, {
+var BaseTypography = (_a126) => {
+  var _b126 = _a126, {
     variant = "body1_regular.default",
     children,
     sx
-  } = _b107, props = __objRest(_b107, [
+  } = _b126, props = __objRest(_b126, [
     "variant",
     "children",
     "sx"
@@ -2434,8 +2411,8 @@ var BaseTypography = (_a107) => {
     })
   );
 };
-var _a6, _b6;
-var Box2 = (_b6 = (_a6 = BoxRaw) == null ? void 0 : _a6.default) != null ? _b6 : BoxRaw;
+var _a3, _b3;
+var Box2 = (_b3 = (_a3 = BoxRaw) == null ? void 0 : _a3.default) != null ? _b3 : BoxRaw;
 var SpacingToken = {
   spacing0: "0px",
   spacing1: "4px",
@@ -2467,17 +2444,17 @@ var CONTENT_SPACING_TOKENS = {
   }
 };
 var resolveSpacingValue = (value, tokens) => {
-  var _a107;
+  var _a126;
   if (typeof value === "number") return `${value}px`;
-  if (typeof value === "string") return (_a107 = tokens[value]) != null ? _a107 : value;
+  if (typeof value === "string") return (_a126 = tokens[value]) != null ? _a126 : value;
   return 0;
 };
-var Spacing = (_a107) => {
-  var _b107 = _a107, {
+var Spacing = (_a126) => {
+  var _b126 = _a126, {
     size = "spacing2",
     axis = "vertical",
     sx = {}
-  } = _b107, rest = __objRest(_b107, [
+  } = _b126, rest = __objRest(_b126, [
     "size",
     "axis",
     "sx"
@@ -2491,22 +2468,22 @@ var Spacing = (_a107) => {
     }, rest)
   );
 };
-var ContentSpacing = (_a107) => {
-  var _b107 = _a107, {
+var ContentSpacing = (_a126) => {
+  var _b126 = _a126, {
     size = "spacing_2",
     breakpoint = "web",
     children,
     sx = {}
-  } = _b107, rest = __objRest(_b107, [
+  } = _b126, rest = __objRest(_b126, [
     "size",
     "breakpoint",
     "children",
     "sx"
   ]);
-  var _a108;
+  var _a127;
   const token = typeof size === "string" ? CONTENT_SPACING_TOKENS[size] : size;
   if (!token) return null;
-  const value = (_a108 = token[breakpoint]) != null ? _a108 : token.web;
+  const value = (_a127 = token[breakpoint]) != null ? _a127 : token.web;
   return /* @__PURE__ */ jsx(
     Box2,
     __spreadProps(__spreadValues({
@@ -2519,12 +2496,12 @@ var ContentSpacing = (_a107) => {
   );
 };
 var spacing_default = Spacing;
-var _a7, _b7;
-var Alert = (_b7 = (_a7 = AlertRaw) == null ? void 0 : _a7.default) != null ? _b7 : AlertRaw;
-var _a8, _b8;
-var AlertTitle = (_b8 = (_a8 = AlertTitleRaw) == null ? void 0 : _a8.default) != null ? _b8 : AlertTitleRaw;
-var _a9, _b9;
-var Box3 = (_b9 = (_a9 = BoxRaw) == null ? void 0 : _a9.default) != null ? _b9 : BoxRaw;
+var _a4, _b4;
+var Alert = (_b4 = (_a4 = AlertRaw) == null ? void 0 : _a4.default) != null ? _b4 : AlertRaw;
+var _a5, _b5;
+var AlertTitle = (_b5 = (_a5 = AlertTitleRaw) == null ? void 0 : _a5.default) != null ? _b5 : AlertTitleRaw;
+var _a6, _b6;
+var Box3 = (_b6 = (_a6 = BoxRaw) == null ? void 0 : _a6.default) != null ? _b6 : BoxRaw;
 var ALERT_CONFIG = {
   default: {
     bg: PrimitiveColor.color_neutral_200,
@@ -2552,8 +2529,8 @@ var ALERT_CONFIG = {
     defaultIcon: IconAlertTriangle
   }
 };
-var BaseAlert = (_a107) => {
-  var _b107 = _a107, {
+var BaseAlert = (_a126) => {
+  var _b126 = _a126, {
     variant = "default",
     type = "standard",
     title,
@@ -2563,7 +2540,7 @@ var BaseAlert = (_a107) => {
     sx = {},
     onClose,
     childrenSx = {}
-  } = _b107, props = __objRest(_b107, [
+  } = _b126, props = __objRest(_b126, [
     "variant",
     "type",
     "title",
@@ -2574,8 +2551,8 @@ var BaseAlert = (_a107) => {
     "onClose",
     "childrenSx"
   ]);
-  var _a108;
-  const config = (_a108 = ALERT_CONFIG[variant]) != null ? _a108 : ALERT_CONFIG.default;
+  var _a127;
+  const config = (_a127 = ALERT_CONFIG[variant]) != null ? _a127 : ALERT_CONFIG.default;
   const hasChildrenSx = Object.keys(childrenSx).length > 0;
   const renderIcon = useMemo(() => {
     if (!icon) return false;
@@ -2616,8 +2593,8 @@ var BaseAlert = (_a107) => {
     })
   );
 };
-var _a10, _b10;
-var Box4 = (_b10 = (_a10 = BoxRaw) == null ? void 0 : _a10.default) != null ? _b10 : BoxRaw;
+var _a7, _b7;
+var Box4 = (_b7 = (_a7 = BoxRaw) == null ? void 0 : _a7.default) != null ? _b7 : BoxRaw;
 var Shadow = {
   elevation_0: {
     shadow: "none",
@@ -2640,12 +2617,12 @@ var Shadow = {
     surface: "#FFFFFF"
   }
 };
-var ShadowToken = (_a107) => {
-  var _b107 = _a107, {
+var ShadowToken = (_a126) => {
+  var _b126 = _a126, {
     level = "elevation_0",
     children,
     sx = {}
-  } = _b107, rest = __objRest(_b107, [
+  } = _b126, rest = __objRest(_b126, [
     "level",
     "children",
     "sx"
@@ -2664,10 +2641,10 @@ var ShadowToken = (_a107) => {
   );
 };
 var shadow_default = ShadowToken;
-var _a11, _b11;
-var ButtonBase = (_b11 = (_a11 = ButtonBaseRaw) == null ? void 0 : _a11.default) != null ? _b11 : ButtonBaseRaw;
-var _a12, _b12;
-var Box5 = (_b12 = (_a12 = BoxRaw) == null ? void 0 : _a12.default) != null ? _b12 : BoxRaw;
+var _a8, _b8;
+var ButtonBase = (_b8 = (_a8 = ButtonBaseRaw) == null ? void 0 : _a8.default) != null ? _b8 : ButtonBaseRaw;
+var _a9, _b9;
+var Box5 = (_b9 = (_a9 = BoxRaw) == null ? void 0 : _a9.default) != null ? _b9 : BoxRaw;
 var WHITE = DerivedColor.color_text_inverse;
 var SIZE_TYPOGRAPHY = {
   large: "body2_regular",
@@ -2737,8 +2714,8 @@ function getHoverColor(primitiveKey) {
   const hoverKey = `${prefix}_${nextLevel}`;
   return PrimitiveColor[hoverKey] || PrimitiveColor[primitiveKey];
 }
-var BaseButton = (_a107) => {
-  var _b107 = _a107, {
+var BaseButton = (_a126) => {
+  var _b126 = _a126, {
     onClick = () => {
     },
     children = null,
@@ -2751,7 +2728,7 @@ var BaseButton = (_a107) => {
     endIcon = null,
     width = "100%",
     sx = {}
-  } = _b107, rest = __objRest(_b107, [
+  } = _b126, rest = __objRest(_b126, [
     "onClick",
     "children",
     "variant",
@@ -2771,36 +2748,36 @@ var BaseButton = (_a107) => {
   const customColorValue = useCustom ? PrimitiveColor[customColor] : null;
   const customHoverValue = useCustom ? getHoverColor(customColor) : null;
   const getBackgroundColor = () => {
-    var _a108;
+    var _a127;
     if (disabled) return isFill ? DISABLED_BG : "transparent";
     if (useCustom) return isFill ? customColorValue : "transparent";
-    if (isFill) return ((_a108 = FILL_COLORS[color]) == null ? void 0 : _a108.bg) || FILL_COLORS.primary.bg;
+    if (isFill) return ((_a127 = FILL_COLORS[color]) == null ? void 0 : _a127.bg) || FILL_COLORS.primary.bg;
     return "transparent";
   };
   const getTextColor = () => {
-    var _a108, _b108;
+    var _a127, _b127;
     if (disabled) return DISABLED_TEXT;
     if (isFill) return WHITE;
     if (useCustom) return customColorValue;
-    if (isOutline) return ((_a108 = OUTLINE_COLORS[color]) == null ? void 0 : _a108.text) || OUTLINE_COLORS.primary.text;
-    if (isText) return ((_b108 = OUTLINE_COLORS[color]) == null ? void 0 : _b108.text) || OUTLINE_COLORS.primary.text;
+    if (isOutline) return ((_a127 = OUTLINE_COLORS[color]) == null ? void 0 : _a127.text) || OUTLINE_COLORS.primary.text;
+    if (isText) return ((_b127 = OUTLINE_COLORS[color]) == null ? void 0 : _b127.text) || OUTLINE_COLORS.primary.text;
     return DerivedColor.color_text_default;
   };
   const getBorderColor = () => {
-    var _a108;
+    var _a127;
     if (!isOutline) return "none";
     if (disabled) return `1.5px solid ${DISABLED_BG}`;
     if (useCustom) return `1.5px solid ${customColorValue}`;
-    return `1.5px solid ${((_a108 = OUTLINE_COLORS[color]) == null ? void 0 : _a108.border) || OUTLINE_COLORS.primary.border}`;
+    return `1.5px solid ${((_a127 = OUTLINE_COLORS[color]) == null ? void 0 : _a127.border) || OUTLINE_COLORS.primary.border}`;
   };
   const getHoverBg = () => {
-    var _a108, _b108;
+    var _a127, _b127;
     if (disabled) return void 0;
     if (useCustom) {
       return isFill ? customHoverValue : customColorValue + "1A";
     }
-    if (isFill) return ((_a108 = FILL_COLORS[color]) == null ? void 0 : _a108.hover) || FILL_COLORS.primary.hover;
-    if (isOutline) return ((_b108 = OUTLINE_COLORS[color]) == null ? void 0 : _b108.hoverBg) || OUTLINE_COLORS.primary.hoverBg;
+    if (isFill) return ((_a127 = FILL_COLORS[color]) == null ? void 0 : _a127.hover) || FILL_COLORS.primary.hover;
+    if (isOutline) return ((_b127 = OUTLINE_COLORS[color]) == null ? void 0 : _b127.hoverBg) || OUTLINE_COLORS.primary.hoverBg;
     return void 0;
   };
   const getRadius = () => {
@@ -2881,14 +2858,197 @@ var BaseButton = (_a107) => {
     })
   );
 };
+var _a10, _b10;
+var Skeleton = (_b10 = (_a10 = SkeletonRaw) == null ? void 0 : _a10.default) != null ? _b10 : SkeletonRaw;
+var _a11, _b11;
+var Box6 = (_b11 = (_a11 = BoxRaw) == null ? void 0 : _a11.default) != null ? _b11 : BoxRaw;
+var BaseSkeleton = (_a126) => {
+  var _b126 = _a126, {
+    variant = "rectangular",
+    animation = "pulse",
+    width,
+    height,
+    count = 1,
+    gap = SpacingToken.spacing2,
+    sx = {}
+  } = _b126, rest = __objRest(_b126, [
+    "variant",
+    "animation",
+    "width",
+    "height",
+    "count",
+    "gap",
+    "sx"
+  ]);
+  const getRadius = () => {
+    switch (variant) {
+      case "circular":
+        return "50%";
+      case "rounded":
+        return Radius.radius_2;
+      case "text":
+      case "rectangular":
+      default:
+        return Radius.radius_0;
+    }
+  };
+  const getDefaultHeight = () => {
+    switch (variant) {
+      case "text":
+        return "1.2em";
+      case "circular":
+        return width || 40;
+      case "rectangular":
+      case "rounded":
+        return height || 60;
+      default:
+        return height;
+    }
+  };
+  const getDefaultWidth = () => {
+    switch (variant) {
+      case "circular":
+        return height || 40;
+      case "text":
+        return "100%";
+      case "rectangular":
+      case "rounded":
+        return width || "100%";
+      default:
+        return width;
+    }
+  };
+  const skeletonProps = __spreadValues({
+    variant: variant === "rounded" ? "rectangular" : variant,
+    animation: animation === "none" ? false : animation,
+    width: getDefaultWidth(),
+    height: getDefaultHeight(),
+    sx: __spreadValues({
+      borderRadius: getRadius()
+    }, sx)
+  }, rest);
+  if (count <= 1) {
+    return /* @__PURE__ */ jsx(Skeleton, __spreadValues({}, skeletonProps));
+  }
+  return /* @__PURE__ */ jsx(Box6, { sx: { display: "flex", flexDirection: "column", gap }, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, __spreadValues({}, skeletonProps), index)) });
+};
+var _a12, _b12;
+var Switch = (_b12 = (_a12 = SwitchRaw) == null ? void 0 : _a12.default) != null ? _b12 : SwitchRaw;
+var AntSwitch = styled(Switch)(({ theme }) => ({
+  width: "34px",
+  height: "18px",
+  padding: 0,
+  display: "flex",
+  "&:active": {
+    "& .MuiSwitch-thumb": { width: 15 },
+    "& .MuiSwitch-switchBase.Mui-checked": {
+      transform: "translateX(9px)"
+    }
+  },
+  "& .MuiSwitch-switchBase": {
+    padding: SpacingToken.spacing1,
+    "&.Mui-checked": {
+      transform: "translateX(16px)",
+      color: DerivedColor.color_bg_surface,
+      "& + .MuiSwitch-track": {
+        opacity: 1,
+        backgroundColor: DerivedColor.color_bg_brand_primary
+      }
+    }
+  },
+  "& .MuiSwitch-thumb": {
+    boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
+    width: "10px",
+    height: "10px",
+    borderRadius: Radius.radius_x,
+    transition: theme.transitions.create(["width"], { duration: 200 }),
+    backgroundColor: DerivedColor.color_bg_surface
+  },
+  "& .MuiSwitch-track": {
+    borderRadius: Radius.radius_x,
+    opacity: 1,
+    backgroundColor: theme.palette.mode === "dark" ? DerivedColor.color_text_disabled : DerivedColor.color_text_placeholder,
+    boxSizing: "border-box"
+  }
+}));
+var BaseSwitch = ({
+  status = false,
+  label,
+  labelPlacement = "end",
+  // start | end | top | bottom
+  isDisabled = false,
+  onChange
+}) => {
+  const [checked, setChecked] = useState(status);
+  useEffect(() => {
+    setChecked(status);
+  }, [status]);
+  const handleChange = (event) => {
+    setChecked(event.target.checked);
+    onChange == null ? void 0 : onChange(event);
+  };
+  const layoutMap = {
+    start: {
+      gridAutoFlow: "column dense",
+      direction: "rtl"
+    },
+    end: {
+      gridAutoFlow: "column",
+      direction: "ltr"
+    },
+    top: {
+      gridAutoFlow: "row",
+      direction: "ltr"
+    },
+    bottom: {
+      gridAutoFlow: "row dense",
+      direction: "rtl"
+    }
+  };
+  const layout = layoutMap[labelPlacement] || layoutMap.end;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gap: SpacingToken.spacing2,
+        alignItems: "center",
+        justifyItems: "start",
+        gridAutoFlow: layout.gridAutoFlow,
+        direction: layout.direction
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          AntSwitch,
+          {
+            checked,
+            onChange: handleChange,
+            disabled: isDisabled,
+            inputProps: { "aria-label": "controlled" }
+          }
+        ),
+        label ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: __spreadProps(__spreadValues({}, VariantStyles.body1_regular), {
+              color: isDisabled ? DerivedColor.color_text_placeholder : DerivedColor.color_text_default,
+              margin: 0
+            }),
+            children: label
+          }
+        ) : null
+      ]
+    }
+  );
+};
 var _a13, _b13;
 var MuiCard = (_b13 = (_a13 = MuiCardRaw) == null ? void 0 : _a13.default) != null ? _b13 : MuiCardRaw;
 var _a14, _b14;
-var Box6 = (_b14 = (_a14 = BoxRaw) == null ? void 0 : _a14.default) != null ? _b14 : BoxRaw;
+var Box7 = (_b14 = (_a14 = BoxRaw) == null ? void 0 : _a14.default) != null ? _b14 : BoxRaw;
 var _a15, _b15;
 var Collapse = (_b15 = (_a15 = CollapseRaw) == null ? void 0 : _a15.default) != null ? _b15 : CollapseRaw;
 var _a16, _b16;
-var IconButton2 = (_b16 = (_a16 = IconButtonRaw) == null ? void 0 : _a16.default) != null ? _b16 : IconButtonRaw;
+var IconButton = (_b16 = (_a16 = IconButtonRaw) == null ? void 0 : _a16.default) != null ? _b16 : IconButtonRaw;
 var _a17, _b17;
 var KeyboardArrowDownIcon = (_b17 = (_a17 = KeyboardArrowDownIconRaw) == null ? void 0 : _a17.default) != null ? _b17 : KeyboardArrowDownIconRaw;
 var _a18, _b18;
@@ -2900,8 +3060,8 @@ var HEADER_COLORS = {
   warning: DerivedColor.color_bg_warning,
   danger: DerivedColor.color_bg_danger
 };
-var BaseCard = (_a107) => {
-  var _b107 = _a107, {
+var BaseCard = (_a126) => {
+  var _b126 = _a126, {
     variant = "default",
     children = null,
     color = "primary",
@@ -2916,8 +3076,10 @@ var BaseCard = (_a107) => {
     showStartIcon = false,
     showEndIcon = false,
     footer = null,
+    isWatermark = false,
+    watermarkText = "",
     sx = {}
-  } = _b107, rest = __objRest(_b107, [
+  } = _b126, rest = __objRest(_b126, [
     "variant",
     "children",
     "color",
@@ -2932,6 +3094,8 @@ var BaseCard = (_a107) => {
     "showStartIcon",
     "showEndIcon",
     "footer",
+    "isWatermark",
+    "watermarkText",
     "sx"
   ]);
   const [open, setOpen] = useState(true);
@@ -2947,12 +3111,25 @@ var BaseCard = (_a107) => {
           borderRadius: Radius.radius_2,
           backgroundColor: cardBg,
           border: `1px solid ${borderColor}`,
-          overflow: "visible",
+          overflow: "hidden",
           boxShadow: "none",
-          padding: SpacingToken.spacing4
+          padding: SpacingToken.spacing4,
+          position: "relative"
         }, sx)
       }, rest), {
-        children
+        children: isWatermark && watermarkText ? /* @__PURE__ */ jsx(
+          Watermark,
+          {
+            text: watermarkText,
+            textColor: "#000000",
+            textSize: 14,
+            opacity: 0.15,
+            gutter: 20,
+            rotate: -30,
+            wrapperStyle: { minHeight: "100px" },
+            children
+          }
+        ) : children
       })
     );
   }
@@ -2969,7 +3146,7 @@ var BaseCard = (_a107) => {
       }, rest), {
         children: [
           /* @__PURE__ */ jsxs(
-            Box6,
+            Box7,
             {
               onClick: () => isCollapsible && setOpen(!open),
               sx: {
@@ -2983,11 +3160,11 @@ var BaseCard = (_a107) => {
                 borderTopRightRadius: Radius.radius_2
               },
               children: [
-                /* @__PURE__ */ jsxs(Box6, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                  showStartIcon && startIcon && /* @__PURE__ */ jsx(Box6, { sx: { display: "flex", alignItems: "center", lineHeight: 0 }, children: startIcon }),
-                  /* @__PURE__ */ jsxs(Box6, { children: [
+                /* @__PURE__ */ jsxs(Box7, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  showStartIcon && startIcon && /* @__PURE__ */ jsx(Box7, { sx: { display: "flex", alignItems: "center", lineHeight: 0 }, children: startIcon }),
+                  /* @__PURE__ */ jsxs(Box7, { children: [
                     /* @__PURE__ */ jsx(
-                      Box6,
+                      Box7,
                       {
                         component: "span",
                         sx: {
@@ -3000,7 +3177,7 @@ var BaseCard = (_a107) => {
                       }
                     ),
                     showSubtitle && subtitle && /* @__PURE__ */ jsx(
-                      Box6,
+                      Box7,
                       {
                         component: "span",
                         sx: {
@@ -3015,10 +3192,10 @@ var BaseCard = (_a107) => {
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs(Box6, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                  showEndIcon && endIcon && /* @__PURE__ */ jsx(Box6, { sx: { display: "flex", alignItems: "center", lineHeight: 0 }, children: endIcon }),
+                /* @__PURE__ */ jsxs(Box7, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  showEndIcon && endIcon && /* @__PURE__ */ jsx(Box7, { sx: { display: "flex", alignItems: "center", lineHeight: 0 }, children: endIcon }),
                   isCollapsible && /* @__PURE__ */ jsx(
-                    IconButton2,
+                    IconButton,
                     {
                       size: "small",
                       onClick: (e) => {
@@ -3034,13 +3211,25 @@ var BaseCard = (_a107) => {
             }
           ),
           /* @__PURE__ */ jsx(Collapse, { in: !isCollapsible || open, timeout: 300, children: /* @__PURE__ */ jsx(
-            Box6,
+            Box7,
             {
               sx: {
                 padding: SpacingToken.spacing4,
                 backgroundColor: cardBg
               },
-              children
+              children: isWatermark && watermarkText ? /* @__PURE__ */ jsx(
+                Watermark,
+                {
+                  text: watermarkText,
+                  textColor: "#000000",
+                  textSize: 14,
+                  opacity: 0.15,
+                  gutter: 20,
+                  rotate: -30,
+                  wrapperStyle: { minHeight: "100px" },
+                  children
+                }
+              ) : children
             }
           ) })
         ]
@@ -3060,7 +3249,7 @@ var BaseCard = (_a107) => {
       }, rest), {
         children: [
           /* @__PURE__ */ jsxs(
-            Box6,
+            Box7,
             {
               onClick: () => isCollapsible && setOpen(!open),
               sx: {
@@ -3074,11 +3263,11 @@ var BaseCard = (_a107) => {
                 borderTopRightRadius: Radius.radius_2
               },
               children: [
-                /* @__PURE__ */ jsxs(Box6, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                  showStartIcon && startIcon && /* @__PURE__ */ jsx(Box6, { sx: { display: "flex", alignItems: "center", lineHeight: 0 }, children: startIcon }),
-                  /* @__PURE__ */ jsxs(Box6, { children: [
+                /* @__PURE__ */ jsxs(Box7, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  showStartIcon && startIcon && /* @__PURE__ */ jsx(Box7, { sx: { display: "flex", alignItems: "center", lineHeight: 0 }, children: startIcon }),
+                  /* @__PURE__ */ jsxs(Box7, { children: [
                     /* @__PURE__ */ jsx(
-                      Box6,
+                      Box7,
                       {
                         component: "span",
                         sx: {
@@ -3091,7 +3280,7 @@ var BaseCard = (_a107) => {
                       }
                     ),
                     showSubtitle && subtitle && /* @__PURE__ */ jsx(
-                      Box6,
+                      Box7,
                       {
                         component: "span",
                         sx: {
@@ -3106,10 +3295,10 @@ var BaseCard = (_a107) => {
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs(Box6, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                  showEndIcon && endIcon && /* @__PURE__ */ jsx(Box6, { sx: { display: "flex", alignItems: "center", lineHeight: 0 }, children: endIcon }),
+                /* @__PURE__ */ jsxs(Box7, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                  showEndIcon && endIcon && /* @__PURE__ */ jsx(Box7, { sx: { display: "flex", alignItems: "center", lineHeight: 0 }, children: endIcon }),
                   isCollapsible && /* @__PURE__ */ jsx(
-                    IconButton2,
+                    IconButton,
                     {
                       size: "small",
                       onClick: (e) => {
@@ -3125,17 +3314,29 @@ var BaseCard = (_a107) => {
             }
           ),
           /* @__PURE__ */ jsx(Collapse, { in: !isCollapsible || open, timeout: 300, children: /* @__PURE__ */ jsx(
-            Box6,
+            Box7,
             {
               sx: {
                 padding: SpacingToken.spacing4,
                 backgroundColor: cardBg
               },
-              children
+              children: isWatermark && watermarkText ? /* @__PURE__ */ jsx(
+                Watermark,
+                {
+                  text: watermarkText,
+                  textColor: "#000000",
+                  textSize: 14,
+                  opacity: 0.15,
+                  gutter: 20,
+                  rotate: -30,
+                  wrapperStyle: { minHeight: "100px" },
+                  children
+                }
+              ) : children
             }
           ) }),
           footer && /* @__PURE__ */ jsx(
-            Box6,
+            Box7,
             {
               sx: {
                 padding: SpacingToken.spacing4,
@@ -3166,133 +3367,136 @@ var BaseCard = (_a107) => {
   );
 };
 var _a19, _b19;
-var Switch = (_b19 = (_a19 = SwitchRaw) == null ? void 0 : _a19.default) != null ? _b19 : SwitchRaw;
-var AntSwitch = styled(Switch)(({ theme }) => ({
-  width: "34px",
-  height: "18px",
-  padding: 0,
-  display: "flex",
-  "&:active": {
-    "& .MuiSwitch-thumb": { width: 15 },
-    "& .MuiSwitch-switchBase.Mui-checked": {
-      transform: "translateX(9px)"
-    }
+var Snackbar = (_b19 = (_a19 = SnackbarRaw) == null ? void 0 : _a19.default) != null ? _b19 : SnackbarRaw;
+var _a20, _b20;
+var Alert2 = (_b20 = (_a20 = AlertRaw) == null ? void 0 : _a20.default) != null ? _b20 : AlertRaw;
+var _a21, _b21;
+var IconButton2 = (_b21 = (_a21 = IconButtonRaw) == null ? void 0 : _a21.default) != null ? _b21 : IconButtonRaw;
+var VARIANT_CONFIG = {
+  success: {
+    bg: PrimitiveColor.color_green_100,
+    text: PrimitiveColor.color_green_700
   },
-  "& .MuiSwitch-switchBase": {
-    padding: SpacingToken.spacing1,
-    "&.Mui-checked": {
-      transform: "translateX(16px)",
-      color: DerivedColor.color_bg_surface,
-      "& + .MuiSwitch-track": {
-        opacity: 1,
-        backgroundColor: DerivedColor.color_bg_brand_primary
-      }
-    }
+  error: {
+    bg: PrimitiveColor.color_red_100,
+    text: PrimitiveColor.color_red_700
   },
-  "& .MuiSwitch-thumb": {
-    boxShadow: "0 2px 4px 0 rgb(0 35 11 / 20%)",
-    width: "10px",
-    height: "10px",
-    borderRadius: Radius.radius_x,
-    transition: theme.transitions.create(["width"], { duration: 200 }),
-    backgroundColor: DerivedColor.color_bg_surface
+  info: {
+    bg: PrimitiveColor.color_blue_cakrawala_100,
+    text: PrimitiveColor.color_blue_cakrawala_700
   },
-  "& .MuiSwitch-track": {
-    borderRadius: Radius.radius_x,
-    opacity: 1,
-    backgroundColor: theme.palette.mode === "dark" ? DerivedColor.color_text_disabled : DerivedColor.color_text_placeholder,
-    boxSizing: "border-box"
+  warning: {
+    bg: PrimitiveColor.color_yellow_100,
+    text: PrimitiveColor.color_yellow_700
+  },
+  default: {
+    bg: PrimitiveColor.color_neutral_200,
+    text: PrimitiveColor.color_neutral_900
   }
-}));
-var BaseSwitch = ({
-  status = false,
-  label,
-  labelPlacement = "end",
-  // start | end | top | bottom
-  isDisabled = false,
-  onChange
-}) => {
-  const [checked, setChecked] = useState(status);
-  useEffect(() => {
-    setChecked(status);
-  }, [status]);
-  const handleChange = (event) => {
-    setChecked(event.target.checked);
-    onChange == null ? void 0 : onChange(event);
-  };
-  const layoutMap = {
-    start: {
-      gridAutoFlow: "column dense",
-      direction: "rtl"
-    },
-    end: {
-      gridAutoFlow: "column",
-      direction: "ltr"
-    },
-    top: {
-      gridAutoFlow: "row",
-      direction: "ltr"
-    },
-    bottom: {
-      gridAutoFlow: "row dense",
-      direction: "rtl"
-    }
-  };
-  const layout = layoutMap[labelPlacement] || layoutMap.end;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gap: SpacingToken.spacing2,
-        alignItems: "center",
-        justifyItems: "start",
-        gridAutoFlow: layout.gridAutoFlow,
-        direction: layout.direction
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          AntSwitch,
-          {
-            checked,
-            onChange: handleChange,
-            disabled: isDisabled,
-            inputProps: { "aria-label": "controlled" }
-          }
-        ),
-        label ? /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: __spreadProps(__spreadValues({}, VariantStyles.body1_regular), {
-              color: isDisabled ? DerivedColor.color_text_placeholder : DerivedColor.color_text_default,
-              margin: 0
-            }),
-            children: label
-          }
-        ) : null
-      ]
-    }
+};
+var BaseSnackbar = (_a126) => {
+  var _b126 = _a126, {
+    open = false,
+    onClose,
+    message,
+    variant = "info",
+    duration = 3e3,
+    position = { vertical: "top", horizontal: "center" },
+    icon,
+    sx = {}
+  } = _b126, props = __objRest(_b126, [
+    "open",
+    "onClose",
+    "message",
+    "variant",
+    "duration",
+    "position",
+    "icon",
+    "sx"
+  ]);
+  var _a127;
+  const config = (_a127 = VARIANT_CONFIG[variant]) != null ? _a127 : VARIANT_CONFIG.info;
+  const renderIcon = useMemo(() => {
+    if (!icon) return false;
+    if (isValidElement(icon)) return icon;
+    if (typeof icon === "function")
+      return createElement(icon, { size: 20, color: config.text });
+    return false;
+  }, [icon, config]);
+  return /* @__PURE__ */ jsx(
+    Snackbar,
+    __spreadProps(__spreadValues({
+      open,
+      autoHideDuration: duration,
+      onClose,
+      anchorOrigin: position
+    }, props), {
+      children: /* @__PURE__ */ jsx(
+        Alert2,
+        {
+          severity: variant === "default" ? void 0 : variant,
+          variant: "filled",
+          icon: renderIcon,
+          action: onClose ? /* @__PURE__ */ jsx(
+            IconButton2,
+            {
+              "aria-label": "close",
+              onClick: onClose,
+              sx: {
+                color: config.text,
+                p: 0.5
+              },
+              children: /* @__PURE__ */ jsx(IconX, { size: 18 })
+            }
+          ) : null,
+          sx: __spreadValues({
+            backgroundColor: config.bg,
+            color: config.text,
+            borderRadius: Radius.radius_2,
+            boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.15)",
+            alignItems: "center",
+            "& .MuiAlert-icon": {
+              color: config.text
+            },
+            "& .MuiAlert-message": {
+              color: config.text,
+              fontWeight: 500
+            },
+            "& .MuiAlert-action": {
+              pt: 0
+            }
+          }, sx),
+          children: message
+        }
+      )
+    })
   );
 };
-var _a20, _b20;
-var MuiCheckbox = (_b20 = (_a20 = MuiCheckboxRaw) == null ? void 0 : _a20.default) != null ? _b20 : MuiCheckboxRaw;
-var _a21, _b21;
-var FormControlLabel = (_b21 = (_a21 = FormControlLabelRaw) == null ? void 0 : _a21.default) != null ? _b21 : FormControlLabelRaw;
 var _a22, _b22;
-var FormGroup = (_b22 = (_a22 = FormGroupRaw) == null ? void 0 : _a22.default) != null ? _b22 : FormGroupRaw;
-var BaseCheckbox = (_a107) => {
-  var _b107 = _a107, {
-    checked,
-    onChange,
+var MuiCheckbox = (_b22 = (_a22 = MuiCheckboxRaw) == null ? void 0 : _a22.default) != null ? _b22 : MuiCheckboxRaw;
+var _a23, _b23;
+var FormControlLabel = (_b23 = (_a23 = FormControlLabelRaw) == null ? void 0 : _a23.default) != null ? _b23 : FormControlLabelRaw;
+var _a24, _b24;
+var FormGroup = (_b24 = (_a24 = FormGroupRaw) == null ? void 0 : _a24.default) != null ? _b24 : FormGroupRaw;
+var _a25, _b25;
+var Box8 = (_b25 = (_a25 = BoxRaw) == null ? void 0 : _a25.default) != null ? _b25 : BoxRaw;
+var BaseCheckbox = (_a126) => {
+  var _b126 = _a126, {
+    name = "",
+    control = null,
+    defaultValue,
+    title,
     options,
     label,
     disabled = false,
     labelPlacement = "end",
     isHorizontal = false,
     sx
-  } = _b107, restProps = __objRest(_b107, [
-    "checked",
-    "onChange",
+  } = _b126, restProps = __objRest(_b126, [
+    "name",
+    "control",
+    "defaultValue",
+    "title",
     "options",
     "label",
     "disabled",
@@ -3300,88 +3504,165 @@ var BaseCheckbox = (_a107) => {
     "isHorizontal",
     "sx"
   ]);
+  var _a127, _b127, _c;
+  const hookForm = control ? useController({ control, name, defaultValue: defaultValue != null ? defaultValue : [] }) : null;
+  const field = hookForm == null ? void 0 : hookForm.field;
+  const formState = hookForm == null ? void 0 : hookForm.formState;
+  const hasError = !!((_a127 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a127[name]);
+  const checkedValue = field ? field.value : restProps.checked;
+  const handleChange = field ? (newVal) => field.onChange(newVal) : restProps.onChange;
   const isGroup = Array.isArray(options);
   const handleGroupChange = (optionValue, nextChecked) => {
-    let newChecked = checked ? [...checked] : [];
+    let newChecked = checkedValue ? [...checkedValue] : [];
     if (nextChecked) {
       if (!newChecked.includes(optionValue)) newChecked.push(optionValue);
     } else {
       newChecked = newChecked.filter((v) => v !== optionValue);
     }
-    onChange == null ? void 0 : onChange(newChecked);
+    handleChange == null ? void 0 : handleChange(newChecked);
   };
   const handleSingleChange = (e) => {
-    onChange == null ? void 0 : onChange(e.target.checked, e);
+    var _a128;
+    if (field) {
+      field.onChange(e.target.checked);
+    } else {
+      (_a128 = restProps.onChange) == null ? void 0 : _a128.call(restProps, e.target.checked, e);
+    }
   };
+  const errorMessage = (_c = (_b127 = formState == null ? void 0 : formState.errors) == null ? void 0 : _b127[name]) == null ? void 0 : _c.message;
+  const iconColor = hasError ? DerivedColor.color_text_danger : DerivedColor.color_border_default;
+  const checkedIconColor = hasError ? DerivedColor.color_text_danger : DerivedColor.color_bg_brand_primary;
   if (isGroup) {
-    return /* @__PURE__ */ jsx(FormGroup, { row: isHorizontal, sx: { gap: isHorizontal ? 2 : 0 }, children: options.map((option) => {
-      var _a108, _b108;
-      return /* @__PURE__ */ jsx(
-        FormControlLabel,
+    return /* @__PURE__ */ jsxs(Box8, { children: [
+      title && /* @__PURE__ */ jsx(
+        BaseTypography,
         {
-          label: option.label,
-          labelPlacement,
-          control: /* @__PURE__ */ jsx(
-            MuiCheckbox,
-            __spreadValues({
-              checked: (checked || []).includes(option.value),
-              onChange: (e) => handleGroupChange(option.value, e.target.checked),
-              icon: /* @__PURE__ */ jsx(IconSquare, { size: 22, color: DerivedColor.color_border_default }),
-              checkedIcon: /* @__PURE__ */ jsx(IconSquareCheckFilled, { size: 22, color: ((_a108 = option.disabled) != null ? _a108 : disabled) ? DerivedColor.color_bg_disabled : DerivedColor.color_bg_brand_primary }),
-              disabled: (_b108 = option.disabled) != null ? _b108 : disabled,
-              sx: __spreadValues({
-                ":hover": { backgroundColor: "#C0DBF1" }
-              }, sx)
-            }, restProps)
-          )
-        },
-        option.value
-      );
-    }) });
+          variant: "body1_regular.default",
+          sx: {
+            fontWeight: 600,
+            color: hasError ? DerivedColor.color_text_danger : DerivedColor.color_text_default,
+            mb: "4px"
+          },
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsx(FormGroup, { row: isHorizontal, sx: { gap: isHorizontal ? 2 : 0 }, children: options.map((option) => {
+        var _a128, _b128;
+        return /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            label: option.label,
+            labelPlacement,
+            sx: {
+              "& .MuiFormControlLabel-label": { fontSize: "14px" }
+            },
+            control: /* @__PURE__ */ jsx(
+              MuiCheckbox,
+              __spreadValues({
+                checked: (checkedValue || []).includes(option.value),
+                onChange: (e) => handleGroupChange(option.value, e.target.checked),
+                icon: /* @__PURE__ */ jsx(IconSquare, { size: 22, color: iconColor }),
+                checkedIcon: /* @__PURE__ */ jsx(IconSquareCheckFilled, { size: 22, color: ((_a128 = option.disabled) != null ? _a128 : disabled) ? DerivedColor.color_bg_disabled : checkedIconColor }),
+                disabled: (_b128 = option.disabled) != null ? _b128 : disabled,
+                sx: {
+                  ":hover": { backgroundColor: "#C0DBF1" }
+                }
+              }, field ? {} : restProps)
+            )
+          },
+          option.value
+        );
+      }) }),
+      errorMessage && /* @__PURE__ */ jsx(BaseTypography, { variant: "body1_regular.danger", sx: { mt: "4px" }, children: errorMessage })
+    ] });
   }
-  return /* @__PURE__ */ jsx(
-    FormControlLabel,
-    {
-      label,
-      labelPlacement,
-      control: /* @__PURE__ */ jsx(
-        MuiCheckbox,
-        __spreadValues({
-          checked: !!checked,
-          onChange: handleSingleChange,
-          icon: /* @__PURE__ */ jsx(IconSquare, { size: 22, color: DerivedColor.color_border_default }),
-          checkedIcon: /* @__PURE__ */ jsx(IconSquareCheckFilled, { size: 22, color: disabled ? DerivedColor.color_bg_disabled : DerivedColor.color_bg_brand_primary }),
-          disabled,
-          sx: __spreadValues({
-            ":hover": { backgroundColor: "#C0DBF1" }
-          }, sx)
-        }, restProps)
-      )
-    }
-  );
+  return /* @__PURE__ */ jsxs(Box8, { children: [
+    title && /* @__PURE__ */ jsx(
+      BaseTypography,
+      {
+        variant: "body1_regular.default",
+        sx: {
+          fontWeight: 600,
+          color: hasError ? DerivedColor.color_text_danger : DerivedColor.color_text_default,
+          mb: "4px"
+        },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        label,
+        labelPlacement,
+        sx: {
+          "& .MuiFormControlLabel-label": { fontSize: "14px" }
+        },
+        control: /* @__PURE__ */ jsx(
+          MuiCheckbox,
+          __spreadValues({
+            checked: !!checkedValue,
+            onChange: handleSingleChange,
+            icon: /* @__PURE__ */ jsx(IconSquare, { size: 22, color: iconColor }),
+            checkedIcon: /* @__PURE__ */ jsx(IconSquareCheckFilled, { size: 22, color: disabled ? DerivedColor.color_bg_disabled : checkedIconColor }),
+            disabled,
+            sx: __spreadValues({
+              ":hover": { backgroundColor: "#C0DBF1" }
+            }, sx)
+          }, field ? {} : restProps)
+        )
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx(BaseTypography, { variant: "body1_regular.danger", sx: { mt: "4px" }, children: errorMessage })
+  ] });
 };
-var _a23, _b23;
-var Box7 = (_b23 = (_a23 = BoxRaw) == null ? void 0 : _a23.default) != null ? _b23 : BoxRaw;
-var _a24, _b24;
-var Checkbox = (_b24 = (_a24 = MuiCheckboxRaw) == null ? void 0 : _a24.default) != null ? _b24 : MuiCheckboxRaw;
-var _a25, _b25;
-var CircularProgress = (_b25 = (_a25 = CircularProgressRaw) == null ? void 0 : _a25.default) != null ? _b25 : CircularProgressRaw;
 var _a26, _b26;
-var Paper = (_b26 = (_a26 = PaperRaw) == null ? void 0 : _a26.default) != null ? _b26 : PaperRaw;
+var KeyboardArrowRight = (_b26 = (_a26 = KeyboardArrowRightRaw) == null ? void 0 : _a26.default) != null ? _b26 : KeyboardArrowRightRaw;
 var _a27, _b27;
-var Table = (_b27 = (_a27 = TableRaw) == null ? void 0 : _a27.default) != null ? _b27 : TableRaw;
+var KeyboardArrowLeft = (_b27 = (_a27 = KeyboardArrowLeftRaw) == null ? void 0 : _a27.default) != null ? _b27 : KeyboardArrowLeftRaw;
 var _a28, _b28;
-var TableBody = (_b28 = (_a28 = TableBodyRaw) == null ? void 0 : _a28.default) != null ? _b28 : TableBodyRaw;
+var IconButton3 = (_b28 = (_a28 = IconButtonRaw) == null ? void 0 : _a28.default) != null ? _b28 : IconButtonRaw;
+var ServerSidePaginationActions = (props) => {
+  const { page, onPageChange, rowsPerPage, currentPageData } = props;
+  const handleBackButtonClick = () => {
+    onPageChange(null, page - 1);
+  };
+  const handleNextButtonClick = () => {
+    onPageChange(null, page + 1);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(IconButton3, { onClick: handleBackButtonClick, disabled: page === 0, children: /* @__PURE__ */ jsx(KeyboardArrowLeft, {}) }),
+    /* @__PURE__ */ jsx(
+      IconButton3,
+      {
+        onClick: handleNextButtonClick,
+        disabled: !(currentPageData == null ? void 0 : currentPageData.length) || (currentPageData == null ? void 0 : currentPageData.length) < rowsPerPage,
+        children: /* @__PURE__ */ jsx(KeyboardArrowRight, {})
+      }
+    )
+  ] });
+};
 var _a29, _b29;
-var TableCell = (_b29 = (_a29 = TableCellRaw) == null ? void 0 : _a29.default) != null ? _b29 : TableCellRaw;
+var Box9 = (_b29 = (_a29 = BoxRaw) == null ? void 0 : _a29.default) != null ? _b29 : BoxRaw;
 var _a30, _b30;
-var TableContainer = (_b30 = (_a30 = TableContainerRaw) == null ? void 0 : _a30.default) != null ? _b30 : TableContainerRaw;
+var Checkbox = (_b30 = (_a30 = MuiCheckboxRaw) == null ? void 0 : _a30.default) != null ? _b30 : MuiCheckboxRaw;
 var _a31, _b31;
-var TableHead = (_b31 = (_a31 = TableHeadRaw) == null ? void 0 : _a31.default) != null ? _b31 : TableHeadRaw;
+var CircularProgress = (_b31 = (_a31 = CircularProgressRaw) == null ? void 0 : _a31.default) != null ? _b31 : CircularProgressRaw;
 var _a32, _b32;
-var TablePagination = (_b32 = (_a32 = TablePaginationRaw) == null ? void 0 : _a32.default) != null ? _b32 : TablePaginationRaw;
+var Paper = (_b32 = (_a32 = PaperRaw) == null ? void 0 : _a32.default) != null ? _b32 : PaperRaw;
 var _a33, _b33;
-var TableRow = (_b33 = (_a33 = TableRowRaw) == null ? void 0 : _a33.default) != null ? _b33 : TableRowRaw;
+var Table = (_b33 = (_a33 = TableRaw) == null ? void 0 : _a33.default) != null ? _b33 : TableRaw;
+var _a34, _b34;
+var TableBody = (_b34 = (_a34 = TableBodyRaw) == null ? void 0 : _a34.default) != null ? _b34 : TableBodyRaw;
+var _a35, _b35;
+var TableCell = (_b35 = (_a35 = TableCellRaw) == null ? void 0 : _a35.default) != null ? _b35 : TableCellRaw;
+var _a36, _b36;
+var TableContainer = (_b36 = (_a36 = TableContainerRaw) == null ? void 0 : _a36.default) != null ? _b36 : TableContainerRaw;
+var _a37, _b37;
+var TableHead = (_b37 = (_a37 = TableHeadRaw) == null ? void 0 : _a37.default) != null ? _b37 : TableHeadRaw;
+var _a38, _b38;
+var TablePagination = (_b38 = (_a38 = TablePaginationRaw) == null ? void 0 : _a38.default) != null ? _b38 : TablePaginationRaw;
+var _a39, _b39;
+var TableRow = (_b39 = (_a39 = TableRowRaw) == null ? void 0 : _a39.default) != null ? _b39 : TableRowRaw;
 var DEFAULT_COLUMN_WIDTH = 160;
 var HEADER_ROW_HEIGHT = 48;
 var SELECTION_COLUMN_WIDTH = 56;
@@ -3415,13 +3696,13 @@ var compareValue = (a, b) => {
   });
 };
 var getColumnWidth = (column) => {
-  var _a107, _b107;
-  return Number((_b107 = (_a107 = column.width) != null ? _a107 : column.minWidth) != null ? _b107 : DEFAULT_COLUMN_WIDTH);
+  var _a126, _b126;
+  return Number((_b126 = (_a126 = column.width) != null ? _a126 : column.minWidth) != null ? _b126 : DEFAULT_COLUMN_WIDTH);
 };
 var getStickyLeft = (widths, index) => widths.slice(0, index).reduce((sum, width) => sum + width, 0);
 var getStickyRight = (widths, index) => widths.slice(index + 1).reduce((sum, width) => sum + width, 0);
 var normalizeColumn = (column, index, sortingEnabled) => {
-  var _a107, _b107, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a126, _b126, _c, _d, _e, _f, _g, _h, _i, _j;
   if (typeof column === "string") {
     return {
       id: getLastPathSegment(column) || `column-${index}`,
@@ -3434,7 +3715,7 @@ var normalizeColumn = (column, index, sortingEnabled) => {
       headerAlign: "center"
     };
   }
-  const accessorKey = (_c = (_b107 = (_a107 = column.accessorKey) != null ? _a107 : column.key) != null ? _b107 : column.field) != null ? _c : column.id;
+  const accessorKey = (_c = (_b126 = (_a126 = column.accessorKey) != null ? _a126 : column.key) != null ? _b126 : column.field) != null ? _c : column.id;
   const id2 = (_e = (_d = column.id) != null ? _d : getLastPathSegment(accessorKey)) != null ? _e : `column-${index}`;
   return __spreadProps(__spreadValues({
     width: DEFAULT_COLUMN_WIDTH,
@@ -3454,12 +3735,12 @@ var normalizeHeaderRows = (header, columns) => {
   }
   return [
     columns.map((column) => {
-      var _a107, _b107;
+      var _a126, _b126;
       return {
         id: column.id,
         key: column.id,
         label: column.header,
-        align: (_b107 = (_a107 = column.headerAlign) != null ? _a107 : column.align) != null ? _b107 : "center",
+        align: (_b126 = (_a126 = column.headerAlign) != null ? _a126 : column.align) != null ? _b126 : "center",
         rowSpan: 1
       };
     })
@@ -3468,13 +3749,13 @@ var normalizeHeaderRows = (header, columns) => {
 var buildHeaderLayout = (headerRows) => {
   const occupied = [];
   return headerRows.map((row, rowIndex) => {
-    var _a107;
-    (_a107 = occupied[rowIndex]) != null ? _a107 : occupied[rowIndex] = [];
+    var _a126;
+    (_a126 = occupied[rowIndex]) != null ? _a126 : occupied[rowIndex] = [];
     let pointer = 0;
     return row.map((cell, cellIndex) => {
-      var _a108, _b107, _c, _d, _e, _f, _g;
+      var _a127, _b126, _c, _d, _e, _f, _g;
       while (occupied[rowIndex][pointer]) pointer += 1;
-      const colSpan = (_b107 = (_a108 = cell.colSpan) != null ? _a108 : cell.colspan) != null ? _b107 : 1;
+      const colSpan = (_b126 = (_a127 = cell.colSpan) != null ? _a127 : cell.colspan) != null ? _b126 : 1;
       const rowSpan = (_d = (_c = cell.rowSpan) != null ? _c : cell.rowspan) != null ? _d : 1;
       const start = pointer;
       for (let r = rowIndex; r < rowIndex + rowSpan; r += 1) {
@@ -3510,8 +3791,8 @@ var renderSortIcon = (sortKey, sortState) => {
   return sortState.direction === "asc" ? /* @__PURE__ */ jsx(IconArrowUp, { size: 16, color: activeColor }) : /* @__PURE__ */ jsx(IconArrowDown, { size: 16, color: activeColor });
 };
 var getSortField = (column) => {
-  var _a107, _b107, _c;
-  return (_c = (_b107 = (_a107 = column.sortField) != null ? _a107 : column.accessorKey) != null ? _b107 : column.key) != null ? _c : column.id;
+  var _a126, _b126, _c;
+  return (_c = (_b126 = (_a126 = column.sortField) != null ? _a126 : column.accessorKey) != null ? _b126 : column.key) != null ? _c : column.id;
 };
 var BaseDatatable = ({
   columns = EMPTY_ARRAY,
@@ -3532,7 +3813,7 @@ var BaseDatatable = ({
   containerSx = EMPTY_OBJECT,
   tableSx = EMPTY_OBJECT
 }) => {
-  var _a107, _b107, _c, _d, _e;
+  var _a126, _b126, _c, _d, _e;
   const featureConfig = useMemo(
     () => __spreadValues({
       sorting: false,
@@ -3580,7 +3861,7 @@ var BaseDatatable = ({
   const [internalSelectedIds, setInternalSelectedIds] = useState(
     selectionConfig.defaultSelectedRowIds
   );
-  const [internalPage, setInternalPage] = useState((_a107 = paginationConfig.page) != null ? _a107 : 0);
+  const [internalPage, setInternalPage] = useState((_a126 = paginationConfig.page) != null ? _a126 : 0);
   const [internalRowsPerPage, setInternalRowsPerPage] = useState(
     paginationConfig.rowsPerPage
   );
@@ -3589,7 +3870,7 @@ var BaseDatatable = ({
   const isRowSelectable = selectionConfig.isRowSelectable;
   const selectionPosition = selectionConfig.position;
   const selectedIds = controlledSelectedIds != null ? controlledSelectedIds : internalSelectedIds;
-  const sortState = (_b107 = featureConfig.sortState) != null ? _b107 : internalSortState;
+  const sortState = (_b126 = featureConfig.sortState) != null ? _b126 : internalSortState;
   const currentPage = (_c = pagination.page) != null ? _c : internalPage;
   const currentRowsPerPage = (_d = pagination.rowsPerPage) != null ? _d : internalRowsPerPage;
   const isHeaderInteractive = typeof featureConfig.headerInteractive === "boolean" ? featureConfig.headerInteractive : featureConfig.sorting;
@@ -3626,8 +3907,8 @@ var BaseDatatable = ({
   );
   const resolveRowId = useCallback(
     (row, rowIndex) => {
-      var _a108, _b108;
-      return (_b108 = (_a108 = getRowId == null ? void 0 : getRowId(row, rowIndex)) != null ? _a108 : row == null ? void 0 : row.id) != null ? _b108 : rowIndex;
+      var _a127, _b127;
+      return (_b127 = (_a127 = getRowId == null ? void 0 : getRowId(row, rowIndex)) != null ? _a127 : row == null ? void 0 : row.id) != null ? _b127 : rowIndex;
     },
     [getRowId]
   );
@@ -3750,17 +4031,17 @@ var BaseDatatable = ({
   ]);
   const handlePaginationPageChange = useCallback(
     (event, nextPage) => {
-      var _a108;
+      var _a127;
       if (pagination.page === void 0) {
         setInternalPage(nextPage);
       }
-      (_a108 = paginationConfig.onPageChange) == null ? void 0 : _a108.call(paginationConfig, event, nextPage);
+      (_a127 = paginationConfig.onPageChange) == null ? void 0 : _a127.call(paginationConfig, event, nextPage);
     },
     [pagination.page, paginationConfig]
   );
   const handleRowsPerPageChange = useCallback(
     (event) => {
-      var _a108;
+      var _a127;
       const nextRowsPerPage = Number(event.target.value);
       if (pagination.rowsPerPage === void 0) {
         setInternalRowsPerPage(nextRowsPerPage);
@@ -3768,15 +4049,15 @@ var BaseDatatable = ({
       if (pagination.page === void 0) {
         setInternalPage(0);
       }
-      (_a108 = paginationConfig.onRowsPerPageChange) == null ? void 0 : _a108.call(paginationConfig, event, nextRowsPerPage);
+      (_a127 = paginationConfig.onRowsPerPageChange) == null ? void 0 : _a127.call(paginationConfig, event, nextRowsPerPage);
     },
     [pagination.page, pagination.rowsPerPage, paginationConfig]
   );
   const handleSort = useCallback(
     (cell) => {
-      var _a108, _b108, _c2, _d2, _e2, _f;
+      var _a127, _b127, _c2, _d2, _e2, _f;
       if (!featureConfig.sorting) return;
-      if (((_a108 = cell.colSpan) != null ? _a108 : 1) > 1 || ((_b108 = cell.rowSpan) != null ? _b108 : 1) > 1) return;
+      if (((_a127 = cell.colSpan) != null ? _a127 : 1) > 1 || ((_b127 = cell.rowSpan) != null ? _b127 : 1) > 1) return;
       const sortKey = (_d2 = (_c2 = cell.sortKey) != null ? _c2 : cell.key) != null ? _d2 : cell.id;
       const targetColumn = normalizedColumns.find((column) => column.id === sortKey);
       if (!(targetColumn == null ? void 0 : targetColumn.sortable)) return;
@@ -3823,8 +4104,8 @@ var BaseDatatable = ({
   );
   const renderBodyCell = useCallback(
     (column, row, rowIndex, columnIndex, rowId, rowActive, cellOverrides = EMPTY_OBJECT) => {
-      var _a108, _b108, _c2, _d2, _e2;
-      const resolvedColumn = column.isSelection || column.id === selectionColumn.id ? selectionColumn : (_a108 = visibleColumns.find((item) => item.id === column.id)) != null ? _a108 : column;
+      var _a127, _b127, _c2, _d2, _e2;
+      const resolvedColumn = column.isSelection || column.id === selectionColumn.id ? selectionColumn : (_a127 = visibleColumns.find((item) => item.id === column.id)) != null ? _a127 : column;
       if (resolvedColumn.isSelection) {
         const isSelectable = isRowSelectable ? isRowSelectable(row, rowIndex) : true;
         return /* @__PURE__ */ jsx(
@@ -3847,7 +4128,7 @@ var BaseDatatable = ({
               boxShadow: selectionPosition === "left" && columnIndex === stickyLeftCount - 1 ? `2px 0 6px ${COLORS.stickyShadow}` : selectionPosition === "right" && columnIndex === visibleColumns.length - stickyRightCount ? `-2px 0 6px ${COLORS.stickyShadow}` : "none"
             }, cellOverrides.sx),
             children: /* @__PURE__ */ jsx(
-              Box7,
+              Box9,
               {
                 sx: {
                   display: "flex",
@@ -3880,7 +4161,7 @@ var BaseDatatable = ({
       return /* @__PURE__ */ jsx(
         TableCell,
         {
-          align: (_b108 = resolvedColumn.align) != null ? _b108 : "left",
+          align: (_b127 = resolvedColumn.align) != null ? _b127 : "left",
           rowSpan: cellOverrides.rowSpan,
           colSpan: cellOverrides.colSpan,
           sx: __spreadValues(__spreadValues({
@@ -3954,8 +4235,8 @@ var BaseDatatable = ({
                 }, tableSx),
                 children: [
                   /* @__PURE__ */ jsx(TableHead, { children: rowsForHeader.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: row.map((cell) => {
-                    var _a108, _b108, _c2, _d2, _e2, _f, _g, _h, _i;
-                    const sortKey = (_b108 = (_a108 = cell.sortKey) != null ? _a108 : cell.key) != null ? _b108 : cell.id;
+                    var _a127, _b127, _c2, _d2, _e2, _f, _g, _h, _i;
+                    const sortKey = (_b127 = (_a127 = cell.sortKey) != null ? _a127 : cell.key) != null ? _b127 : cell.id;
                     const targetColumn = normalizedColumns.find((column) => column.id === sortKey);
                     const isSortable = featureConfig.sorting && ((_c2 = cell.colSpan) != null ? _c2 : 1) === 1 && ((_d2 = cell.rowSpan) != null ? _d2 : 1) === 1 && (targetColumn == null ? void 0 : targetColumn.sortable);
                     const shouldStickLeft = cell.sticky === "left" || cell.end < stickyLeftCount;
@@ -3996,7 +4277,7 @@ var BaseDatatable = ({
                           } : void 0
                         }),
                         children: /* @__PURE__ */ jsxs(
-                          Box7,
+                          Box9,
                           {
                             sx: {
                               display: "flex",
@@ -4015,7 +4296,7 @@ var BaseDatatable = ({
                     );
                   }) }, `header-${rowIndex}`)) }),
                   /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { align: "center", colSpan: visibleColumns.length, children: /* @__PURE__ */ jsxs(
-                    Box7,
+                    Box9,
                     {
                       sx: {
                         minHeight: 120,
@@ -4129,26 +4410,26 @@ BaseDatatable.propTypes = {
   tableSx: PropTypes3.object
 };
 React4.memo(BaseDatatable);
-var _a34, _b34;
-var TextField = (_b34 = (_a34 = TextFieldRaw) == null ? void 0 : _a34.default) != null ? _b34 : TextFieldRaw;
-var _a35, _b35;
-var Box8 = (_b35 = (_a35 = BoxRaw) == null ? void 0 : _a35.default) != null ? _b35 : BoxRaw;
-var _a36, _b36;
-var Popover = (_b36 = (_a36 = PopoverRaw) == null ? void 0 : _a36.default) != null ? _b36 : PopoverRaw;
-var _a37, _b37;
-var InputAdornment = (_b37 = (_a37 = InputAdornmentRaw) == null ? void 0 : _a37.default) != null ? _b37 : InputAdornmentRaw;
-var _a38, _b38;
-var IconButton3 = (_b38 = (_a38 = IconButtonRaw) == null ? void 0 : _a38.default) != null ? _b38 : IconButtonRaw;
-var _a39, _b39;
-var Typography = (_b39 = (_a39 = MuiTypographyRaw) == null ? void 0 : _a39.default) != null ? _b39 : MuiTypographyRaw;
 var _a40, _b40;
-var DatePicker = (_b40 = (_a40 = DatePicker$1) == null ? void 0 : _a40.default) != null ? _b40 : DatePicker$1;
+var TextField = (_b40 = (_a40 = TextFieldRaw) == null ? void 0 : _a40.default) != null ? _b40 : TextFieldRaw;
 var _a41, _b41;
-var DateTimePicker = (_b41 = (_a41 = DateTimePicker$1) == null ? void 0 : _a41.default) != null ? _b41 : DateTimePicker$1;
+var Box10 = (_b41 = (_a41 = BoxRaw) == null ? void 0 : _a41.default) != null ? _b41 : BoxRaw;
 var _a42, _b42;
-var TimePicker = (_b42 = (_a42 = TimePicker$1) == null ? void 0 : _a42.default) != null ? _b42 : TimePicker$1;
-var BaseDatePicker = (_a107) => {
-  var _b107 = _a107, {
+var Popover = (_b42 = (_a42 = PopoverRaw) == null ? void 0 : _a42.default) != null ? _b42 : PopoverRaw;
+var _a43, _b43;
+var InputAdornment = (_b43 = (_a43 = InputAdornmentRaw) == null ? void 0 : _a43.default) != null ? _b43 : InputAdornmentRaw;
+var _a44, _b44;
+var IconButton4 = (_b44 = (_a44 = IconButtonRaw) == null ? void 0 : _a44.default) != null ? _b44 : IconButtonRaw;
+var _a45, _b45;
+var Typography = (_b45 = (_a45 = MuiTypographyRaw) == null ? void 0 : _a45.default) != null ? _b45 : MuiTypographyRaw;
+var _a46, _b46;
+var DatePicker = (_b46 = (_a46 = DatePicker$1) == null ? void 0 : _a46.default) != null ? _b46 : DatePicker$1;
+var _a47, _b47;
+var DateTimePicker = (_b47 = (_a47 = DateTimePicker$1) == null ? void 0 : _a47.default) != null ? _b47 : DateTimePicker$1;
+var _a48, _b48;
+var TimePicker = (_b48 = (_a48 = TimePicker$1) == null ? void 0 : _a48.default) != null ? _b48 : TimePicker$1;
+var BaseDatePicker = (_a126) => {
+  var _b126 = _a126, {
     type = "single",
     name,
     control,
@@ -4166,7 +4447,7 @@ var BaseDatePicker = (_a107) => {
     sx = {},
     onChange: onChangeCustom = () => {
     }
-  } = _b107, props = __objRest(_b107, [
+  } = _b126, props = __objRest(_b126, [
     "type",
     "name",
     "control",
@@ -4184,13 +4465,13 @@ var BaseDatePicker = (_a107) => {
     "sx",
     "onChange"
   ]);
-  var _a108, _b108, _c, _d, _e, _f;
+  var _a127, _b127, _c, _d, _e, _f;
   const { field, formState } = useController({
     name,
     control,
     defaultValue
   });
-  const errorMessage = (_c = (_b108 = (_a108 = formState.errors) == null ? void 0 : _a108[name]) == null ? void 0 : _b108.message) == null ? void 0 : _c.toString();
+  const errorMessage = (_c = (_b127 = (_a127 = formState.errors) == null ? void 0 : _a127[name]) == null ? void 0 : _b127.message) == null ? void 0 : _c.toString();
   const [open, setOpen] = useState(false);
   const inputRef = useRef(null);
   const [rangeValue, setRangeValue] = useState(
@@ -4256,14 +4537,15 @@ var BaseDatePicker = (_a107) => {
     }
   }, [type, format]);
   const LabelSection = () => {
+    var _a128;
     if (!title && !subtitle) return null;
-    return /* @__PURE__ */ jsxs(Box8, { sx: { display: "flex", gap: SpacingToken.spacing2, px: SpacingToken.spacing2, mb: "4px" }, children: [
-      title && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: DerivedColor.color_text_default }, children: title }),
+    return /* @__PURE__ */ jsxs(Box10, { sx: { display: "flex", gap: SpacingToken.spacing2, mb: "4px" }, children: [
+      title && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 600, color: !!((_a128 = formState.errors) == null ? void 0 : _a128[name]) ? DerivedColor.color_text_danger : DerivedColor.color_text_default }, children: title }),
       subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: DerivedColor.color_text_subtle }, children: subtitle })
     ] });
   };
   if (type === "range") {
-    return /* @__PURE__ */ jsxs(Box8, { sx, children: [
+    return /* @__PURE__ */ jsxs(Box10, { sx, children: [
       /* @__PURE__ */ jsx(LabelSection, {}),
       /* @__PURE__ */ jsx(
         TextField,
@@ -4271,7 +4553,9 @@ var BaseDatePicker = (_a107) => {
           inputRef,
           fullWidth: true,
           size: "small",
-          placeholder,
+          placeholder: placeholder || "DD/MM/YYYY - DD/MM/YYYY",
+          error: !!errorMessage,
+          helperText: errorMessage,
           value: rangeValue.startDate && rangeValue.endDate ? `${dayjs(rangeValue.startDate).format(format)} - ${dayjs(
             rangeValue.endDate
           ).format(format)}` : "",
@@ -4280,24 +4564,51 @@ var BaseDatePicker = (_a107) => {
           sx: {
             "& .MuiOutlinedInput-root": {
               borderRadius: Radius.radius_2,
-              cursor: openBy === "field" || openBy === "both" ? "pointer" : "default"
+              fontSize: 14,
+              backgroundColor: isDisabled ? PrimitiveColor.color_neutral_200 : DerivedColor.color_bg_surface,
+              borderColor: isDisabled ? PrimitiveColor.color_neutral_200 : DerivedColor.color_border_default,
+              cursor: openBy === "field" || openBy === "both" ? "pointer" : "default",
+              "& fieldset": {
+                borderColor: errorMessage ? DerivedColor.color_border_danger : DerivedColor.color_border_default
+              },
+              "&:hover fieldset": {
+                borderColor: errorMessage ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: errorMessage ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary,
+                borderWidth: 2
+              }
+            },
+            "& .MuiInputBase-input": {
+              fontSize: 14,
+              "&::placeholder": {
+                fontSize: 14
+              }
+            },
+            "& .MuiFormHelperText-root": {
+              marginLeft: 0,
+              fontSize: 14,
+              letterSpacing: 0
             }
           },
           InputProps: {
             readOnly: true,
-            endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-              IconButton3,
-              {
-                size: "small",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  if (!isDisabled && (openBy === "icon" || openBy === "both")) setOpen(true);
-                },
-                disabled: isDisabled,
-                sx: { p: "4px" },
-                children: /* @__PURE__ */ jsx(IconCalendarWeekFilled, { size: 20, color: DerivedColor.color_icon_brand_primary })
-              }
-            ) })
+            endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
+              !!errorMessage && /* @__PURE__ */ jsx(IconAlertCircleFilled, { size: 18, color: PrimitiveColor.color_red_500 }),
+              /* @__PURE__ */ jsx(
+                IconButton4,
+                {
+                  size: "small",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (!isDisabled && (openBy === "icon" || openBy === "both")) setOpen(true);
+                  },
+                  disabled: isDisabled,
+                  sx: { p: "4px" },
+                  children: /* @__PURE__ */ jsx(IconCalendarWeekFilled, { size: 20, color: DerivedColor.color_icon_brand_primary })
+                }
+              )
+            ] })
           }
         }
       ),
@@ -4331,7 +4642,7 @@ var BaseDatePicker = (_a107) => {
     ] });
   }
   const PickerComponent = (_e = pickerConfig.component) != null ? _e : DatePicker;
-  return /* @__PURE__ */ jsxs(Box8, { sx, children: [
+  return /* @__PURE__ */ jsxs(Box10, { sx, children: [
     /* @__PURE__ */ jsx(LabelSection, {}),
     /* @__PURE__ */ jsx(
       PickerComponent,
@@ -4350,7 +4661,7 @@ var BaseDatePicker = (_a107) => {
         disableOpenPicker: openBy === "field",
         components: {
           OpenPickerIcon: () => /* @__PURE__ */ jsx(
-            IconButton3,
+            IconButton4,
             {
               size: "small",
               onClick: (e) => {
@@ -4368,7 +4679,7 @@ var BaseDatePicker = (_a107) => {
           onChangeCustom(newValue);
         },
         renderInput: (params) => {
-          var _a109;
+          var _a128;
           return /* @__PURE__ */ jsx(
             TextField,
             __spreadProps(__spreadValues({}, params), {
@@ -4383,31 +4694,38 @@ var BaseDatePicker = (_a107) => {
               sx: {
                 "& .MuiOutlinedInput-root": {
                   borderRadius: Radius.radius_2,
-                  backgroundColor: DerivedColor.color_bg_surface,
+                  fontSize: 14,
+                  backgroundColor: isDisabled ? PrimitiveColor.color_neutral_200 : DerivedColor.color_bg_surface,
                   cursor: openBy === "field" || openBy === "both" ? "pointer" : "default",
                   "& fieldset": {
                     borderColor: errorMessage ? DerivedColor.color_border_danger : DerivedColor.color_border_default
                   },
                   "&:hover fieldset": {
-                    borderColor: DerivedColor.color_border_brand_primary
+                    borderColor: errorMessage ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary
                   },
                   "&.Mui-focused fieldset": {
-                    borderColor: DerivedColor.color_border_brand_primary,
+                    borderColor: errorMessage ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary,
                     borderWidth: 2
                   }
                 },
                 "& .MuiInputBase-input": {
                   padding: `${SpacingToken.spacing2} ${SpacingToken.spacing3}`,
-                  fontSize: "14px"
+                  fontSize: 14,
+                  "&::placeholder": {
+                    fontSize: 14
+                  }
                 },
                 "& .MuiFormHelperText-root": {
-                  marginLeft: 0
+                  marginLeft: 0,
+                  fontSize: 14,
+                  letterSpacing: 0
                 }
               },
               InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
                 endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  !!errorMessage && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconAlertCircleFilled, { size: 18, color: DerivedColor.color_icon_danger }) }),
                   clearable && field.value && /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
-                    IconButton3,
+                    IconButton4,
                     {
                       size: "small",
                       onClick: handleClear,
@@ -4415,7 +4733,7 @@ var BaseDatePicker = (_a107) => {
                       children: /* @__PURE__ */ jsx(CloseIconRaw, { fontSize: "small" })
                     }
                   ) }),
-                  (_a109 = params.InputProps) == null ? void 0 : _a109.endAdornment
+                  (_a128 = params.InputProps) == null ? void 0 : _a128.endAdornment
                 ] })
               })
             })
@@ -4425,12 +4743,12 @@ var BaseDatePicker = (_a107) => {
     )
   ] });
 };
-var _a43, _b43;
-var Box9 = (_b43 = (_a43 = BoxRaw) == null ? void 0 : _a43.default) != null ? _b43 : BoxRaw;
-var _a44, _b44;
-var Chip = (_b44 = (_a44 = ChipRaw) == null ? void 0 : _a44.default) != null ? _b44 : ChipRaw;
-var _a45, _b45;
-var Typography2 = (_b45 = (_a45 = MuiTypographyRaw) == null ? void 0 : _a45.default) != null ? _b45 : MuiTypographyRaw;
+var _a49, _b49;
+var Box11 = (_b49 = (_a49 = BoxRaw) == null ? void 0 : _a49.default) != null ? _b49 : BoxRaw;
+var _a50, _b50;
+var Chip = (_b50 = (_a50 = ChipRaw) == null ? void 0 : _a50.default) != null ? _b50 : ChipRaw;
+var _a51, _b51;
+var Typography2 = (_b51 = (_a51 = MuiTypographyRaw) == null ? void 0 : _a51.default) != null ? _b51 : MuiTypographyRaw;
 var CheckboxOption = (props) => {
   const { isSelected, label, selectOption, data } = props;
   const handleChange = () => {
@@ -4446,8 +4764,8 @@ var CheckboxOption = (props) => {
     }
   ) }));
 };
-var BaseDropdown = (_a107) => {
-  var _b107 = _a107, {
+var BaseDropdown = (_a126) => {
+  var _b126 = _a126, {
     name = "",
     control,
     options = [],
@@ -4471,7 +4789,7 @@ var BaseDropdown = (_a107) => {
     ],
     variant = "select",
     sx = {}
-  } = _b107, props = __objRest(_b107, [
+  } = _b126, props = __objRest(_b126, [
     "name",
     "control",
     "options",
@@ -4490,14 +4808,14 @@ var BaseDropdown = (_a107) => {
     "variant",
     "sx"
   ]);
-  var _a108;
+  var _a127;
   const { field, formState } = useController({
     name,
     control,
     defaultValue: defaultValue != null ? defaultValue : variant === "checkbox" || isMulti ? [] : null
   });
   const SelectComponent = loadOptions ? AsyncSelect : Select;
-  const hasError = !!((_a108 = formState.errors) == null ? void 0 : _a108[name]);
+  const hasError = !!((_a127 = formState.errors) == null ? void 0 : _a127[name]);
   const selectedValues = Array.isArray(field.value) ? field.value : field.value ? [field.value] : [];
   const isCheckboxMode = variant === "checkbox";
   const selectAllChecked = showSelectAll && selectedValues.length === options.length && options.length > 0;
@@ -4506,16 +4824,20 @@ var BaseDropdown = (_a107) => {
     field.onChange(checked ? options : []);
   };
   const handleChange = (val) => {
-    var _a109;
+    var _a128;
     field.onChange(val);
-    (_a109 = props.onChange) == null ? void 0 : _a109.call(props, val);
+    (_a128 = props.onChange) == null ? void 0 : _a128.call(props, val);
   };
   const customStyles = {
     control: (base, state) => __spreadValues(__spreadProps(__spreadValues({}, base), {
       borderRadius: Radius.radius_2,
+      fontSize: 14,
       backgroundColor: isDisabled ? PrimitiveColor.color_neutral_200 : PrimitiveColor.color_neutral_50,
-      border: hasError ? `1px solid ${PrimitiveColor.color_red_500}` : state.isFocused ? `1px solid ${PrimitiveColor.color_blue_cakrawala_500}` : `1px solid ${PrimitiveColor.color_neutral_300}`,
-      boxShadow: "none"
+      border: hasError ? `1px solid ${DerivedColor.color_border_danger}` : state.isFocused ? `2px solid ${DerivedColor.color_border_brand_primary}` : `1px solid ${DerivedColor.color_border_default}`,
+      boxShadow: "none",
+      "&:hover": {
+        borderColor: hasError ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary
+      }
     }), preventOverflow && { maxHeight: 120, overflowY: "auto" }),
     option: (base, state) => __spreadProps(__spreadValues({}, base), {
       display: "flex",
@@ -4534,19 +4856,19 @@ var BaseDropdown = (_a107) => {
     })
   };
   return /* @__PURE__ */ jsxs(
-    Box9,
+    Box11,
     {
       sx: __spreadValues({
-        width: 356,
+        width: "100%",
         display: "flex",
         flexDirection: "column",
         gap: SpacingToken.spacing2
       }, sx),
       children: [
-        (title || subtitle || showSelectAll) && /* @__PURE__ */ jsxs(Box9, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-          /* @__PURE__ */ jsxs(Box9, { sx: { display: "flex", alignItems: "center", gap: SpacingToken.spacing2 }, children: [
-            title && /* @__PURE__ */ jsx(Typography2, { variant: "body2", sx: { fontWeight: 600, color: DerivedColor.color_text_default }, children: title }),
-            subtitle && /* @__PURE__ */ jsx(Typography2, { variant: "body2", sx: { color: DerivedColor.color_text_subtle }, children: subtitle })
+        (title || subtitle || showSelectAll) && /* @__PURE__ */ jsxs(Box11, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxs(Box11, { sx: { display: "flex", alignItems: "center", gap: SpacingToken.spacing2 }, children: [
+            title && /* @__PURE__ */ jsx(Typography2, { variant: "body2", sx: { fontWeight: 600, fontSize: 14, color: hasError ? DerivedColor.color_text_danger : DerivedColor.color_text_default }, children: title }),
+            subtitle && /* @__PURE__ */ jsx(Typography2, { variant: "body2", sx: { fontSize: 14, color: DerivedColor.color_text_subtle }, children: subtitle })
           ] }),
           showSelectAll && /* @__PURE__ */ jsx(
             BaseCheckbox,
@@ -4583,7 +4905,7 @@ var BaseDropdown = (_a107) => {
             }
           })
         ),
-        showChip && isMulti && !isCheckboxMode && /* @__PURE__ */ jsx(Box9, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: 1 }, children: selectedValues.map((option) => /* @__PURE__ */ jsx(
+        showChip && isMulti && !isCheckboxMode && /* @__PURE__ */ jsx(Box11, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mt: 1 }, children: selectedValues.map((option) => /* @__PURE__ */ jsx(
           Chip,
           {
             label: option.label,
@@ -4603,7 +4925,7 @@ var BaseDropdown = (_a107) => {
               Typography2,
               {
                 variant: "caption",
-                sx: { color: DerivedColor.color_text_danger, fontSize: 12 },
+                sx: { color: DerivedColor.color_text_danger, fontSize: 14 },
                 children: message
               }
             )
@@ -4613,8 +4935,8 @@ var BaseDropdown = (_a107) => {
     }
   );
 };
-var _a46, _b46;
-var Box10 = (_b46 = (_a46 = BoxRaw) == null ? void 0 : _a46.default) != null ? _b46 : BoxRaw;
+var _a52, _b52;
+var Box12 = (_b52 = (_a52 = BoxRaw) == null ? void 0 : _a52.default) != null ? _b52 : BoxRaw;
 var BaseDropzone = ({
   autoUpload = false,
   settings = {
@@ -4666,7 +4988,7 @@ var BaseDropzone = ({
         processedCount++;
         if (processedCount === acceptedFiles.length) {
           setFiles((prevFiles) => {
-            var _a107;
+            var _a126;
             let updated;
             if (settings.maxFiles === 1) {
               updated = tempFiles.slice(0, 1);
@@ -4677,7 +4999,7 @@ var BaseDropzone = ({
               );
             }
             if (autoUpload) {
-              (_a107 = callbacks == null ? void 0 : callbacks.uploadFile) == null ? void 0 : _a107.call(callbacks, updated);
+              (_a126 = callbacks == null ? void 0 : callbacks.uploadFile) == null ? void 0 : _a126.call(callbacks, updated);
             }
             return updated;
           });
@@ -4686,8 +5008,8 @@ var BaseDropzone = ({
     });
   };
   const handleRejected = (rejections) => {
-    var _a107, _b107, _c;
-    const error = (_c = (_b107 = (_a107 = rejections == null ? void 0 : rejections[0]) == null ? void 0 : _a107.errors) == null ? void 0 : _b107[0]) == null ? void 0 : _c.code;
+    var _a126, _b126, _c;
+    const error = (_c = (_b126 = (_a126 = rejections == null ? void 0 : rejections[0]) == null ? void 0 : _a126.errors) == null ? void 0 : _b126[0]) == null ? void 0 : _c.code;
     if (error === "file-too-large") {
       setErrorMessage(
         "Ukuran file terlalu besar. Maksimal " + settings.maxSize + "MB."
@@ -4701,12 +5023,12 @@ var BaseDropzone = ({
     }
   };
   const removeFile = (index) => {
-    var _a107, _b107;
+    var _a126, _b126;
     const removedFile = files[index];
     const updated = files.filter((_, i) => i !== index);
     setFiles(updated);
-    (_a107 = callbacks == null ? void 0 : callbacks.removeFile) == null ? void 0 : _a107.call(callbacks, removedFile == null ? void 0 : removedFile.originName);
-    (_b107 = callbacks == null ? void 0 : callbacks.uploadFile) == null ? void 0 : _b107.call(callbacks, updated);
+    (_a126 = callbacks == null ? void 0 : callbacks.removeFile) == null ? void 0 : _a126.call(callbacks, removedFile == null ? void 0 : removedFile.originName);
+    (_b126 = callbacks == null ? void 0 : callbacks.uploadFile) == null ? void 0 : _b126.call(callbacks, updated);
   };
   useEffect(() => {
     if (callbacks == null ? void 0 : callbacks.customError) {
@@ -4714,19 +5036,19 @@ var BaseDropzone = ({
     }
   }, [callbacks == null ? void 0 : callbacks.customError]);
   const renderFileIcon = (file) => {
-    var _a107, _b107, _c;
-    if ((_a107 = file.type) == null ? void 0 : _a107.includes("pdf")) return /* @__PURE__ */ jsx(IconFilePDF, {});
-    if ((_b107 = file.type) == null ? void 0 : _b107.includes("csv")) return /* @__PURE__ */ jsx(IconFileCSV, {});
+    var _a126, _b126, _c;
+    if ((_a126 = file.type) == null ? void 0 : _a126.includes("pdf")) return /* @__PURE__ */ jsx(IconFilePDF, {});
+    if ((_b126 = file.type) == null ? void 0 : _b126.includes("csv")) return /* @__PURE__ */ jsx(IconFileCSV, {});
     if ((_c = file.type) == null ? void 0 : _c.includes("image")) return /* @__PURE__ */ jsx(IconFileJPG, {});
     return /* @__PURE__ */ jsx(IconFileJPG, {});
   };
   const PreviewGrid = () => /* @__PURE__ */ jsx(
-    Box10,
+    Box12,
     {
       sx: { width: "100%", display: "flex", gap: 2, mt: 3, flexWrap: "wrap" },
-      children: files.map((file, index) => /* @__PURE__ */ jsxs(Box10, { sx: { position: "relative", width: 75 }, children: [
+      children: files.map((file, index) => /* @__PURE__ */ jsxs(Box12, { sx: { position: "relative", width: 75 }, children: [
         /* @__PURE__ */ jsx(
-          Box10,
+          Box12,
           {
             sx: {
               position: "absolute",
@@ -4740,7 +5062,7 @@ var BaseDropzone = ({
         ),
         renderFileIcon(file),
         /* @__PURE__ */ jsx(
-          Box10,
+          Box12,
           {
             sx: __spreadProps(__spreadValues({}, VariantStyles.caption_regular), {
               mt: 1,
@@ -4754,8 +5076,8 @@ var BaseDropzone = ({
       ] }, index))
     }
   );
-  const PreviewList = () => /* @__PURE__ */ jsx(Box10, { sx: { mt: 3 }, children: files.map((file, index) => /* @__PURE__ */ jsxs(
-    Box10,
+  const PreviewList = () => /* @__PURE__ */ jsx(Box12, { sx: { mt: 3 }, children: files.map((file, index) => /* @__PURE__ */ jsxs(
+    Box12,
     {
       sx: {
         display: "flex",
@@ -4767,10 +5089,10 @@ var BaseDropzone = ({
         mb: 2
       },
       children: [
-        /* @__PURE__ */ jsxs(Box10, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
+        /* @__PURE__ */ jsxs(Box12, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: [
           renderFileIcon(file),
           /* @__PURE__ */ jsx(
-            Box10,
+            Box12,
             {
               sx: __spreadProps(__spreadValues({}, VariantStyles.body2_regular), {
                 maxWidth: 260,
@@ -4782,30 +5104,37 @@ var BaseDropzone = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx(Box10, { sx: { cursor: "pointer" }, onClick: () => removeFile(index), children: /* @__PURE__ */ jsx(IconTrash$1, { size: 20, color: PrimitiveColor.color_red_500 }) })
+        /* @__PURE__ */ jsx(Box12, { sx: { cursor: "pointer" }, onClick: () => removeFile(index), children: /* @__PURE__ */ jsx(IconTrash$1, { size: 20, color: PrimitiveColor.color_red_500 }) })
       ]
     },
     index
   )) });
-  return /* @__PURE__ */ jsxs(Box10, { children: [
+  return /* @__PURE__ */ jsxs(Box12, { children: [
     labels.title && /* @__PURE__ */ jsx(
-      Box10,
+      Box12,
       {
-        sx: __spreadProps(__spreadValues({}, VariantStyles.body2_semibold), {
+        sx: __spreadProps(__spreadValues({}, VariantStyles.body1_regular), {
+          fontSize: 14,
+          fontWeight: 600,
           mb: 2,
-          width: "100%"
+          width: "100%",
+          color: isError ? DerivedColor.color_text_danger : DerivedColor.color_text_default
         }),
         children: labels.title
       }
     ),
     /* @__PURE__ */ jsx(
-      Box10,
+      Box12,
       {
         sx: {
-          border: `2px ${files.length ? "solid" : "dashed"} ${isError ? PrimitiveColor.color_red_500 : files.length ? PrimitiveColor.color_blue_cakrawala_500 : PrimitiveColor.color_neutral_300}`,
+          border: `2px ${files.length ? "solid" : "dashed"} ${isError ? DerivedColor.color_border_danger : files.length ? DerivedColor.color_border_brand_primary : DerivedColor.color_border_default}`,
           borderRadius: Radius.radius_2,
           padding: SpacingToken.spacing6,
-          textAlign: "center"
+          textAlign: "center",
+          transition: "border-color 0.2s",
+          "&:hover": {
+            borderColor: isError ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary
+          }
         },
         children: /* @__PURE__ */ jsx(
           Dropzone,
@@ -4817,7 +5146,7 @@ var BaseDropzone = ({
             accept: settings.allowedExtensions,
             multiple: !isSingle,
             children: ({ getRootProps, getInputProps }) => /* @__PURE__ */ jsxs(
-              Box10,
+              Box12,
               __spreadProps(__spreadValues({}, getRootProps()), {
                 sx: {
                   cursor: "pointer",
@@ -4831,9 +5160,9 @@ var BaseDropzone = ({
                 children: [
                   /* @__PURE__ */ jsx("input", __spreadValues({}, getInputProps())),
                   /* @__PURE__ */ jsx(IconUpload$1, { size: 32, color: DerivedColor.color_icon_brand_primary }),
-                  /* @__PURE__ */ jsx(Box10, { sx: __spreadProps(__spreadValues({}, VariantStyles.header1_semibold), { mt: 1 }), children: labels.dropzoneTitle }),
+                  /* @__PURE__ */ jsx(Box12, { sx: __spreadProps(__spreadValues({}, VariantStyles.header1_semibold), { mt: 1 }), children: labels.dropzoneTitle }),
                   /* @__PURE__ */ jsx(
-                    Box10,
+                    Box12,
                     {
                       sx: __spreadProps(__spreadValues({}, VariantStyles.body1_regular), {
                         color: PrimitiveColor.color_neutral_600,
@@ -4852,7 +5181,7 @@ var BaseDropzone = ({
                     }
                   ),
                   labels.allowedFileLabel && /* @__PURE__ */ jsx(
-                    Box10,
+                    Box12,
                     {
                       sx: __spreadProps(__spreadValues({}, VariantStyles.caption_regular), {
                         color: PrimitiveColor.color_neutral_600,
@@ -4872,15 +5201,17 @@ var BaseDropzone = ({
     ),
     files.length > 0 && (settings.previewType === "list" ? /* @__PURE__ */ jsx(PreviewList, {}) : /* @__PURE__ */ jsx(PreviewGrid, {})),
     isError && /* @__PURE__ */ jsxs(
-      Box10,
+      Box12,
       {
-        sx: __spreadValues({
+        sx: __spreadProps(__spreadValues({
           display: "flex",
           alignItems: "center",
           gap: 1,
           mt: 2,
-          color: PrimitiveColor.color_red_500
-        }, VariantStyles.caption_regular),
+          color: DerivedColor.color_text_danger
+        }, VariantStyles.caption_regular), {
+          fontSize: 14
+        }),
         children: [
           /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16 }),
           errorMessage
@@ -4889,43 +5220,39 @@ var BaseDropzone = ({
     )
   ] });
 };
-var _a47, _b47;
-var Radio = (_b47 = (_a47 = RadioRaw) == null ? void 0 : _a47.default) != null ? _b47 : RadioRaw;
-var _a48, _b48;
-var RadioGroup = (_b48 = (_a48 = RadioGroupRaw) == null ? void 0 : _a48.default) != null ? _b48 : RadioGroupRaw;
-var _a49, _b49;
-var FormControlLabel2 = (_b49 = (_a49 = FormControlLabelRaw) == null ? void 0 : _a49.default) != null ? _b49 : FormControlLabelRaw;
-var _a50, _b50;
-var FormControl = (_b50 = (_a50 = FormControlRaw) == null ? void 0 : _a50.default) != null ? _b50 : FormControlRaw;
-var _a51, _b51;
-var Box11 = (_b51 = (_a51 = BoxRaw) == null ? void 0 : _a51.default) != null ? _b51 : BoxRaw;
-var BaseRadioButton = (_a107) => {
-  var _b107 = _a107, {
+var _a53, _b53;
+var Radio = (_b53 = (_a53 = RadioRaw) == null ? void 0 : _a53.default) != null ? _b53 : RadioRaw;
+var _a54, _b54;
+var RadioGroup = (_b54 = (_a54 = RadioGroupRaw) == null ? void 0 : _a54.default) != null ? _b54 : RadioGroupRaw;
+var _a55, _b55;
+var FormControlLabel2 = (_b55 = (_a55 = FormControlLabelRaw) == null ? void 0 : _a55.default) != null ? _b55 : FormControlLabelRaw;
+var _a56, _b56;
+var FormControl = (_b56 = (_a56 = FormControlRaw) == null ? void 0 : _a56.default) != null ? _b56 : FormControlRaw;
+var _a57, _b57;
+var Box13 = (_b57 = (_a57 = BoxRaw) == null ? void 0 : _a57.default) != null ? _b57 : BoxRaw;
+var BaseRadioButton = (_a126) => {
+  var _b126 = _a126, {
     name = "",
     control = null,
     defaultValue,
-    label,
+    title,
     options = [],
-    labelVariant: labelVariant = "body2_regular.default",
-    errorVariant = "caption_regular.danger",
+    errorVariant: errorVariant = "body1_regular.danger",
     orientation: orientation = "vertical",
-    radioColorToken: radioColorToken = "color_blue_cakrawala_500",
     isDisabled: isDisabled,
     useErrorStateHelper: useErrorStateHelper = false,
     sx: sx = {}
-  } = _b107, restProps = __objRest(_b107, [
+  } = _b126, restProps = __objRest(_b126, [
     "name",
     "control",
     "defaultValue",
-    "label",
+    "title",
     "options",
     /* ================= TYPOGRAPHY ================= */
-    "labelVariant",
     "errorVariant",
     /* ================= LAYOUT ================= */
     "orientation",
     /* ================= COLOR TOKEN ================= */
-    "radioColorToken",
     /* ================= STATE ================= */
     "isDisabled",
     /* ================= ERROR ================= */
@@ -4933,12 +5260,12 @@ var BaseRadioButton = (_a107) => {
     /* ================= SX ================= */
     "sx"
   ]);
-  var _a108, _b108, _c, _d, _e, _f;
+  var _a127, _b127, _c, _d, _e, _f;
   const { field, formState } = useController({ control, name, defaultValue });
   const errorObject = useErrorStateHelper ? errorState(name, formState.errors) : null;
-  const errorMessage = ((_a108 = errorObject == null ? void 0 : errorObject.message) == null ? void 0 : _a108.toString()) || ((_c = (_b108 = formState.errors) == null ? void 0 : _b108[name]) == null ? void 0 : _c.message);
-  const radioColor = ((_d = PrimitiveColor) == null ? void 0 : _d[radioColorToken]) || PrimitiveColor.color_blue_cakrawala_500;
-  const gapValue = (_e = SpacingToken) == null ? void 0 : _e.spacing0;
+  const errorMessage = ((_a127 = errorObject == null ? void 0 : errorObject.message) == null ? void 0 : _a127.toString()) || ((_c = (_b127 = formState.errors) == null ? void 0 : _b127[name]) == null ? void 0 : _c.message);
+  const radioColor = PrimitiveColor.color_blue_cakrawala_500;
+  const gapValue = (_d = SpacingToken) == null ? void 0 : _d.spacing0;
   const isHorizontal = orientation === "horizontal";
   const radioItemSx = {
     minHeight: "36px",
@@ -4949,76 +5276,90 @@ var BaseRadioButton = (_a107) => {
     py: SpacingToken.spacing0,
     borderRadius: Radius.radius_2
   };
-  return /* @__PURE__ */ jsx(Box11, { sx, children: /* @__PURE__ */ jsxs(FormControl, { error: !!((_f = formState.errors) == null ? void 0 : _f[name]), children: [
-    label && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Box13, { sx, children: [
+    title && /* @__PURE__ */ jsx(
       BaseTypography,
       {
-        variant: labelVariant,
-        sx: { mb: gapValue },
-        children: label
+        variant: "body1_regular.default",
+        sx: {
+          fontWeight: 600,
+          color: !!((_e = formState.errors) == null ? void 0 : _e[name]) ? DerivedColor.color_text_danger : DerivedColor.color_text_default,
+          mb: "4px"
+        },
+        children: title
       }
     ),
-    /* @__PURE__ */ jsx(
-      RadioGroup,
-      __spreadProps(__spreadValues({
-        value: field.value,
-        onChange: field.onChange,
-        row: isHorizontal,
-        sx: { gap: gapValue }
-      }, restProps), {
-        children: options.length > 0 ? options.map((item, index) => /* @__PURE__ */ jsx(
-          FormControlLabel2,
-          __spreadValues({
-            value: item.value,
-            label: item.label,
-            disabled: isDisabled != null ? isDisabled : item.isDisabled,
-            sx: radioItemSx,
-            control: /* @__PURE__ */ jsx(
-              Radio,
-              {
-                sx: {
-                  "&.Mui-checked": {
-                    color: radioColor
-                  },
-                  "&.Mui-disabled": {
-                    color: PrimitiveColor.color_neutral_400
-                  },
-                  "&.Mui-checked.Mui-disabled": {
-                    color: PrimitiveColor.color_neutral_400
+    /* @__PURE__ */ jsxs(FormControl, { error: !!((_f = formState.errors) == null ? void 0 : _f[name]), children: [
+      /* @__PURE__ */ jsx(
+        RadioGroup,
+        __spreadProps(__spreadValues({
+          value: field.value,
+          onChange: field.onChange,
+          row: isHorizontal,
+          sx: { gap: gapValue }
+        }, restProps), {
+          children: options.length > 0 ? options.map((item, index) => {
+            var _a128, _b128;
+            return /* @__PURE__ */ jsx(
+              FormControlLabel2,
+              __spreadValues({
+                value: item.value,
+                label: item.label,
+                disabled: isDisabled != null ? isDisabled : item.isDisabled,
+                sx: __spreadProps(__spreadValues({}, radioItemSx), {
+                  "& .MuiFormControlLabel-label": {
+                    fontSize: "14px"
                   }
-                }
-              }
-            )
-          }, item),
-          `radio-item-${index}`
-        )) : "You must provide options props"
-      })
-    ),
-    errorMessage && /* @__PURE__ */ jsx(BaseTypography, { variant: errorVariant, sx: { mt: gapValue }, children: errorMessage })
-  ] }) });
+                }),
+                control: /* @__PURE__ */ jsx(
+                  Radio,
+                  {
+                    sx: {
+                      "&.Mui-checked": {
+                        color: !!((_a128 = formState.errors) == null ? void 0 : _a128[name]) ? DerivedColor.color_text_danger : radioColor
+                      },
+                      color: !!((_b128 = formState.errors) == null ? void 0 : _b128[name]) ? DerivedColor.color_text_danger : void 0,
+                      "&.Mui-disabled": {
+                        color: PrimitiveColor.color_neutral_400
+                      },
+                      "&.Mui-checked.Mui-disabled": {
+                        color: PrimitiveColor.color_neutral_400
+                      }
+                    }
+                  }
+                )
+              }, item),
+              `radio-item-${index}`
+            );
+          }) : "You must provide options props"
+        })
+      ),
+      errorMessage && /* @__PURE__ */ jsx(BaseTypography, { variant: errorVariant, sx: { mt: gapValue }, children: errorMessage })
+    ] })
+  ] });
 };
-var _a52, _b52;
-var Check = (_b52 = (_a52 = CheckRaw) == null ? void 0 : _a52.default) != null ? _b52 : CheckRaw;
-var _a53, _b53;
-var CheckIcon = (_b53 = (_a53 = CheckRaw) == null ? void 0 : _a53.default) != null ? _b53 : CheckRaw;
-var _a54, _b54;
-var StepLabel = (_b54 = (_a54 = StepLabelRaw) == null ? void 0 : _a54.default) != null ? _b54 : StepLabelRaw;
-var _a55, _b55;
-var StepConnector = (_b55 = (_a55 = StepConnectorRaw) == null ? void 0 : _a55.default) != null ? _b55 : StepConnectorRaw;
-var _a56, _b56;
-var Step = (_b56 = (_a56 = StepRaw) == null ? void 0 : _a56.default) != null ? _b56 : StepRaw;
-var _a57, _b57;
-var Stepper = (_b57 = (_a57 = StepperRaw) == null ? void 0 : _a57.default) != null ? _b57 : StepperRaw;
 var _a58, _b58;
-var Stack = (_b58 = (_a58 = StackRaw) == null ? void 0 : _a58.default) != null ? _b58 : StackRaw;
+var Check = (_b58 = (_a58 = CheckRaw) == null ? void 0 : _a58.default) != null ? _b58 : CheckRaw;
 var _a59, _b59;
-var Box12 = (_b59 = (_a59 = BoxRaw) == null ? void 0 : _a59.default) != null ? _b59 : BoxRaw;
+var CheckIcon = (_b59 = (_a59 = CheckRaw) == null ? void 0 : _a59.default) != null ? _b59 : CheckRaw;
 var _a60, _b60;
-var Typography3 = (_b60 = (_a60 = MuiTypographyRaw) == null ? void 0 : _a60.default) != null ? _b60 : MuiTypographyRaw;
+var StepLabel = (_b60 = (_a60 = StepLabelRaw) == null ? void 0 : _a60.default) != null ? _b60 : StepLabelRaw;
 var _a61, _b61;
-var Button = (_b61 = (_a61 = ButtonRaw) == null ? void 0 : _a61.default) != null ? _b61 : ButtonRaw;
+var StepConnector = (_b61 = (_a61 = StepConnectorRaw) == null ? void 0 : _a61.default) != null ? _b61 : StepConnectorRaw;
 var _a62, _b62;
-var Tooltip = (_b62 = (_a62 = TooltipRaw) == null ? void 0 : _a62.default) != null ? _b62 : TooltipRaw;
+var Step = (_b62 = (_a62 = StepRaw) == null ? void 0 : _a62.default) != null ? _b62 : StepRaw;
+var _a63, _b63;
+var Stepper = (_b63 = (_a63 = StepperRaw) == null ? void 0 : _a63.default) != null ? _b63 : StepperRaw;
+var _a64, _b64;
+var Stack = (_b64 = (_a64 = StackRaw) == null ? void 0 : _a64.default) != null ? _b64 : StackRaw;
+var _a65, _b65;
+var Box14 = (_b65 = (_a65 = BoxRaw) == null ? void 0 : _a65.default) != null ? _b65 : BoxRaw;
+var _a66, _b66;
+var Typography3 = (_b66 = (_a66 = MuiTypographyRaw) == null ? void 0 : _a66.default) != null ? _b66 : MuiTypographyRaw;
+var _a67, _b67;
+var Button = (_b67 = (_a67 = ButtonRaw) == null ? void 0 : _a67.default) != null ? _b67 : ButtonRaw;
+var _a68, _b68;
+var Tooltip = (_b68 = (_a68 = TooltipRaw) == null ? void 0 : _a68.default) != null ? _b68 : TooltipRaw;
 var CustomStepLabel = styled(StepLabel)(({ orientation }) => __spreadValues(__spreadProps(__spreadValues({}, orientation === "vertical" && {
   alignItems: "flex-start",
   "& .MuiStepLabel-labelContainer": {
@@ -5137,8 +5478,8 @@ var CustomProcessIcon = styled(CheckIcon)({
   justifyContent: "center",
   alignItems: "center"
 });
-var HtmlTooltip = styled((_a107) => {
-  var _b107 = _a107, { className } = _b107, props = __objRest(_b107, ["className"]);
+var HtmlTooltip = styled((_a126) => {
+  var _b126 = _a126, { className } = _b126, props = __objRest(_b126, ["className"]);
   return /* @__PURE__ */ jsx(Tooltip, __spreadProps(__spreadValues({}, props), { classes: { popper: className } }));
 })(() => ({
   [`& .${tooltipClasses.tooltip}`]: {
@@ -5166,7 +5507,7 @@ var BaseStepper = ({
         connector: /* @__PURE__ */ jsx(ColorlibConnector, { orientation }),
         orientation,
         children: steps == null ? void 0 : steps.map((step, index) => {
-          var _a107;
+          var _a126;
           return /* @__PURE__ */ jsx(Step, { children: /* @__PURE__ */ jsx(
             StepLabel,
             {
@@ -5176,9 +5517,9 @@ var BaseStepper = ({
                 {
                   title: /* @__PURE__ */ jsxs(Fragment$1, { children: [
                     /* @__PURE__ */ jsx(Typography3, { color: "inherit", children: step == null ? void 0 : step.title }),
-                    (_a107 = step == null ? void 0 : step.sublist) == null ? void 0 : _a107.map((list, subIndex) => /* @__PURE__ */ jsx(Box12, { sx: { display: "grid", gap: 1, mt: 0.5 }, children: /* @__PURE__ */ jsxs(Box12, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
-                      (list == null ? void 0 : list.is_done) === 1 ? /* @__PURE__ */ jsx(Box12, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(CustomCheckIcon, {}) }) : /* @__PURE__ */ jsx(Box12, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(CustomProcessIcon, {}) }),
-                      /* @__PURE__ */ jsx(Box12, { children: list == null ? void 0 : list.sublist_title })
+                    (_a126 = step == null ? void 0 : step.sublist) == null ? void 0 : _a126.map((list, subIndex) => /* @__PURE__ */ jsx(Box14, { sx: { display: "grid", gap: 1, mt: 0.5 }, children: /* @__PURE__ */ jsxs(Box14, { sx: { display: "flex", gap: 1, alignItems: "center" }, children: [
+                      (list == null ? void 0 : list.is_done) === 1 ? /* @__PURE__ */ jsx(Box14, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(CustomCheckIcon, {}) }) : /* @__PURE__ */ jsx(Box14, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(CustomProcessIcon, {}) }),
+                      /* @__PURE__ */ jsx(Box14, { children: list == null ? void 0 : list.sublist_title })
                     ] }) }, subIndex))
                   ] }),
                   children: /* @__PURE__ */ jsx(
@@ -5201,7 +5542,7 @@ var BaseStepper = ({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(Box12, { sx: __spreadValues({ width: "100%" }, sx), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box14, { sx: __spreadValues({ width: "100%" }, sx), children: /* @__PURE__ */ jsx(
     Stepper,
     {
       activeStep,
@@ -5215,7 +5556,7 @@ var BaseStepper = ({
         if (isActive) statusColor = PrimitiveColor.color_blue_cakrawala_500;
         if (isCompleted) statusColor = PrimitiveColor.color_green_500;
         return /* @__PURE__ */ jsx(Step, { children: /* @__PURE__ */ jsx(CustomStepLabel, { orientation, children: /* @__PURE__ */ jsxs(
-          Box12,
+          Box14,
           {
             sx: {
               display: "flex",
@@ -5252,16 +5593,16 @@ BaseStepper.propTypes = {
   variant: PropTypes3.oneOf(["simple", "dashboard"]),
   sx: PropTypes3.object
 };
-var _a63, _b63;
-var InputAdornment2 = (_b63 = (_a63 = InputAdornmentRaw) == null ? void 0 : _a63.default) != null ? _b63 : InputAdornmentRaw;
-var _a64, _b64;
-var TextField2 = (_b64 = (_a64 = TextFieldRaw) == null ? void 0 : _a64.default) != null ? _b64 : TextFieldRaw;
-var _a65, _b65;
-var Box13 = (_b65 = (_a65 = BoxRaw) == null ? void 0 : _a65.default) != null ? _b65 : BoxRaw;
-var _a66, _b66;
-var Typography4 = (_b66 = (_a66 = MuiTypographyRaw) == null ? void 0 : _a66.default) != null ? _b66 : MuiTypographyRaw;
-var BaseTextField = (_a107) => {
-  var _b107 = _a107, {
+var _a69, _b69;
+var InputAdornment2 = (_b69 = (_a69 = InputAdornmentRaw) == null ? void 0 : _a69.default) != null ? _b69 : InputAdornmentRaw;
+var _a70, _b70;
+var TextField2 = (_b70 = (_a70 = TextFieldRaw) == null ? void 0 : _a70.default) != null ? _b70 : TextFieldRaw;
+var _a71, _b71;
+var Box15 = (_b71 = (_a71 = BoxRaw) == null ? void 0 : _a71.default) != null ? _b71 : BoxRaw;
+var _a72, _b72;
+var Typography4 = (_b72 = (_a72 = MuiTypographyRaw) == null ? void 0 : _a72.default) != null ? _b72 : MuiTypographyRaw;
+var BaseTextField = (_a126) => {
+  var _b126 = _a126, {
     name = "",
     control = null,
     defaultValue,
@@ -5282,7 +5623,7 @@ var BaseTextField = (_a107) => {
     InputProps: externalInputProps,
     inputProps: externalInputPropsLower,
     sx = {}
-  } = _b107, props = __objRest(_b107, [
+  } = _b126, props = __objRest(_b126, [
     "name",
     "control",
     "defaultValue",
@@ -5304,7 +5645,7 @@ var BaseTextField = (_a107) => {
     "inputProps",
     "sx"
   ]);
-  var _a108, _b108, _c, _d, _e, _f;
+  var _a127, _b127, _c, _d, _e, _f, _g, _h, _i, _j;
   const { field, formState } = useController({ control, name, defaultValue });
   const inputRef = useRef(null);
   const hasMask = !!textMask;
@@ -5397,12 +5738,12 @@ var BaseTextField = (_a107) => {
     return new RegExp(`^[${allowedPattern}\\s]+$`);
   };
   const handleKeyDown = (e) => {
-    var _a109, _b109, _c2;
+    var _a128, _b128, _c2;
     if (hasMask) {
       const input = e.target;
       const value = input.value || "";
-      const selectionStart = (_a109 = input.selectionStart) != null ? _a109 : value.length;
-      const selectionEnd = (_b109 = input.selectionEnd) != null ? _b109 : value.length;
+      const selectionStart = (_a128 = input.selectionStart) != null ? _a128 : value.length;
+      const selectionEnd = (_b128 = input.selectionEnd) != null ? _b128 : value.length;
       const allowedKeys2 = [
         "Tab",
         "Backspace",
@@ -5548,7 +5889,7 @@ var BaseTextField = (_a107) => {
     }
   };
   const handlePaste = (e) => {
-    var _a109, _b109;
+    var _a128, _b128;
     if (hasMask) {
       if (isCantPaste) {
         e.preventDefault();
@@ -5557,8 +5898,8 @@ var BaseTextField = (_a107) => {
       const pastedData2 = e.clipboardData.getData("Text") || "";
       const cleaned = sanitizeRaw(pastedData2);
       const input = e.target;
-      const selectionStart2 = (_a109 = input.selectionStart) != null ? _a109 : 0;
-      const selectionEnd2 = (_b109 = input.selectionEnd) != null ? _b109 : 0;
+      const selectionStart2 = (_a128 = input.selectionStart) != null ? _a128 : 0;
+      const selectionEnd2 = (_b128 = input.selectionEnd) != null ? _b128 : 0;
       const currentRaw = sanitizeRaw(field.value).slice(0, maskSlots);
       let rawArr = currentRaw.split("");
       const xStart = (textMask.slice(0, selectionStart2).match(/x/gi) || []).length;
@@ -5631,20 +5972,24 @@ var BaseTextField = (_a107) => {
     setDisplayValue(newDisplay);
     field.onChange(raw);
     requestAnimationFrame(() => {
-      var _a109;
+      var _a128;
       try {
         const caret = computeCaretFromRawLen(raw.length, textMask);
-        (_a109 = inputRef.current) == null ? void 0 : _a109.setSelectionRange(caret, caret);
+        (_a128 = inputRef.current) == null ? void 0 : _a128.setSelectionRange(caret, caret);
       } catch (e2) {
       }
     });
   };
-  return /* @__PURE__ */ jsxs(Box13, { sx, children: [
+  return /* @__PURE__ */ jsxs(Box15, { sx, children: [
     props.title && /* @__PURE__ */ jsx(
       Typography4,
       {
         variant: "body2",
-        sx: { fontWeight: 600, color: DerivedColor.color_text_default, mb: "4px" },
+        sx: {
+          fontWeight: 600,
+          color: !!((_a127 = formState.errors) == null ? void 0 : _a127[name]) ? DerivedColor.color_text_danger : DerivedColor.color_text_default,
+          mb: "4px"
+        },
         children: props.title
       }
     ),
@@ -5654,11 +5999,11 @@ var BaseTextField = (_a107) => {
         id: props.id || `field-${name}`,
         variant: "outlined",
         fullWidth: true,
-        error: !!((_a108 = formState.errors) == null ? void 0 : _a108[name]),
+        error: !!((_b127 = formState.errors) == null ? void 0 : _b127[name]),
         helperText: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Box13, { component: "span", children: ((_c = (_b108 = formState.errors) == null ? void 0 : _b108[name]) == null ? void 0 : _c.message) || (maxLength && showLength ? `Maksimal ${maxLength} Karakter` : "") }),
-          maxLength && showCountHelper && /* @__PURE__ */ jsxs(Box13, { component: "span", sx: { ml: "auto" }, children: [
-            ((_d = field.value) == null ? void 0 : _d.length) || 0,
+          /* @__PURE__ */ jsx(Box15, { component: "span", children: ((_d = (_c = formState.errors) == null ? void 0 : _c[name]) == null ? void 0 : _d.message) || (maxLength && showLength ? `Maksimal ${maxLength} Karakter` : "") }),
+          maxLength && showCountHelper && /* @__PURE__ */ jsxs(Box15, { component: "span", sx: { ml: "auto" }, children: [
+            ((_e = field.value) == null ? void 0 : _e.length) || 0,
             "/",
             maxLength
           ] })
@@ -5667,6 +6012,7 @@ var BaseTextField = (_a107) => {
           sx: {
             fontSize: 14,
             ml: 0,
+            letterSpacing: 0,
             display: "flex",
             justifyContent: "space-between"
           }
@@ -5679,19 +6025,37 @@ var BaseTextField = (_a107) => {
         inputProps: __spreadValues({
           maxLength: hasMask ? textMask.length : maxLength
         }, externalInputPropsLower),
+        sx: {
+          "& .MuiOutlinedInput-root": {
+            "& fieldset": {
+              borderColor: !!((_f = formState.errors) == null ? void 0 : _f[name]) ? DerivedColor.color_border_danger : DerivedColor.color_border_default
+            },
+            "&:hover fieldset": {
+              borderColor: !!((_g = formState.errors) == null ? void 0 : _g[name]) ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary
+            },
+            "&.Mui-focused fieldset": {
+              borderColor: !!((_h = formState.errors) == null ? void 0 : _h[name]) ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary,
+              borderWidth: 2
+            }
+          }
+        },
         InputProps: __spreadProps(__spreadValues({}, externalInputProps), {
           sx: __spreadValues({
             borderRadius: Radius.radius_2,
+            fontSize: 14,
             backgroundColor: isDisabled ? PrimitiveColor.color_neutral_200 : PrimitiveColor.color_neutral_50,
-            color: isDisabled ? PrimitiveColor.color_neutral_600 : PrimitiveColor.color_neutral_900
+            color: isDisabled ? PrimitiveColor.color_neutral_600 : PrimitiveColor.color_neutral_900,
+            "& input::placeholder": {
+              fontSize: 14
+            }
           }, externalInputProps == null ? void 0 : externalInputProps.sx),
           startAdornment: externalInputProps == null ? void 0 : externalInputProps.startAdornment,
           endAdornment: /* @__PURE__ */ jsxs(Fragment, { children: [
-            !!((_e = formState.errors) == null ? void 0 : _e[name]) && /* @__PURE__ */ jsx(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx(IconInfoCircle, { size: 18, color: PrimitiveColor.color_red_500 }) }),
+            !!((_i = formState.errors) == null ? void 0 : _i[name]) && /* @__PURE__ */ jsx(InputAdornment2, { position: "end", children: /* @__PURE__ */ jsx(IconAlertCircleFilled, { size: 18, color: DerivedColor.color_icon_danger }) }),
             externalInputProps == null ? void 0 : externalInputProps.endAdornment
           ] })
         }),
-        value: hasMask ? displayValue != null ? displayValue : "" : (_f = field.value) != null ? _f : "",
+        value: hasMask ? displayValue != null ? displayValue : "" : (_j = field.value) != null ? _j : "",
         onChange: hasMask ? handleChangeMasked : field.onChange
       }, props), hasMask ? {} : field)
     ),
@@ -5707,18 +6071,18 @@ var BaseTextField = (_a107) => {
     )
   ] });
 };
-var _a67, _b67;
-var Box14 = (_b67 = (_a67 = BoxRaw) == null ? void 0 : _a67.default) != null ? _b67 : BoxRaw;
-var _a68, _b68;
-var Button2 = (_b68 = (_a68 = ButtonRaw) == null ? void 0 : _a68.default) != null ? _b68 : ButtonRaw;
-var _a69, _b69;
-var Input = (_b69 = (_a69 = InputRaw) == null ? void 0 : _a69.default) != null ? _b69 : InputRaw;
-var _a70, _b70;
-var TextField3 = (_b70 = (_a70 = TextFieldRaw) == null ? void 0 : _a70.default) != null ? _b70 : TextFieldRaw;
-var _a71, _b71;
-var Typography5 = (_b71 = (_a71 = MuiTypographyRaw) == null ? void 0 : _a71.default) != null ? _b71 : MuiTypographyRaw;
-var _a72, _b72;
-var UploadFile = (_b72 = (_a72 = UploadFileRaw) == null ? void 0 : _a72.default) != null ? _b72 : UploadFileRaw;
+var _a73, _b73;
+var Box16 = (_b73 = (_a73 = BoxRaw) == null ? void 0 : _a73.default) != null ? _b73 : BoxRaw;
+var _a74, _b74;
+var Button2 = (_b74 = (_a74 = ButtonRaw) == null ? void 0 : _a74.default) != null ? _b74 : ButtonRaw;
+var _a75, _b75;
+var Input = (_b75 = (_a75 = InputRaw) == null ? void 0 : _a75.default) != null ? _b75 : InputRaw;
+var _a76, _b76;
+var TextField3 = (_b76 = (_a76 = TextFieldRaw) == null ? void 0 : _a76.default) != null ? _b76 : TextFieldRaw;
+var _a77, _b77;
+var Typography5 = (_b77 = (_a77 = MuiTypographyRaw) == null ? void 0 : _a77.default) != null ? _b77 : MuiTypographyRaw;
+var _a78, _b78;
+var UploadFile = (_b78 = (_a78 = UploadFileRaw) == null ? void 0 : _a78.default) != null ? _b78 : UploadFileRaw;
 var TextFieldUpload = ({
   name = "upload",
   control,
@@ -5744,14 +6108,14 @@ var TextFieldUpload = ({
   const [fileSizeError, setFileSizeError] = useState(false);
   const [unsupportedFile, setUnsupportedFile] = useState(false);
   const handleFileChange = (event) => {
-    var _a107, _b107;
-    const file = (_a107 = event.target.files) == null ? void 0 : _a107[0];
+    var _a126, _b126;
+    const file = (_a126 = event.target.files) == null ? void 0 : _a126[0];
     if (!file) {
       field.onChange("");
       uploadFile == null ? void 0 : uploadFile("", null);
       return;
     }
-    const extension = (_b107 = file.name.split(".").pop()) == null ? void 0 : _b107.toLowerCase();
+    const extension = (_b126 = file.name.split(".").pop()) == null ? void 0 : _b126.toLowerCase();
     const acceptedExtensions = accept ? accept.split(",").map((ext) => ext.trim().toLowerCase()) : [];
     if (acceptedExtensions.length > 0 && !acceptedExtensions.includes(`.${extension}`)) {
       setUnsupportedFile(true);
@@ -5772,11 +6136,11 @@ var TextFieldUpload = ({
   };
   const isError = !!fieldState.error || fileSizeError || unsupportedFile;
   const isSuccess = !!field.value && !isError;
-  const borderColor = isError ? PrimitiveColor.color_red_500 : isSuccess ? PrimitiveColor.color_blue_cakrawala_500 : PrimitiveColor.color_neutral_300;
+  isError ? PrimitiveColor.color_red_500 : isSuccess ? PrimitiveColor.color_blue_cakrawala_500 : PrimitiveColor.color_neutral_300;
   const helperText = fileSizeError ? `Ukuran file melebihi ${maxSize} MB` : unsupportedFile ? "Format file tidak didukung" : `Format ${accept || "-"} ukuran maks. ${maxSize} MB`;
   const handleButtonClick = () => {
-    var _a107;
-    (_a107 = inputRef.current) == null ? void 0 : _a107.click();
+    var _a126;
+    (_a126 = inputRef.current) == null ? void 0 : _a126.click();
   };
   const uploadButton = /* @__PURE__ */ jsx(
     Button2,
@@ -5805,29 +6169,30 @@ var TextFieldUpload = ({
         }
       },
       children: /* @__PURE__ */ jsx(
-        Typography5,
+        BaseTypography,
         {
-          sx: __spreadProps(__spreadValues({}, VariantStyles.body2_regular), {
-            fontWeight: 600
-          }),
+          variant: "body1_regular.inverse",
+          sx: { fontWeight: 600 },
           children: buttonLabel
         }
       )
     }
   );
-  return /* @__PURE__ */ jsxs(Box14, { width: "100%", children: [
+  return /* @__PURE__ */ jsxs(Box16, { width: "100%", children: [
     title && /* @__PURE__ */ jsx(
       Typography5,
       {
         sx: __spreadProps(__spreadValues({}, VariantStyles.body2_regular), {
+          fontSize: 14,
           fontWeight: 600,
-          mb: SpacingToken.spacing2
+          mb: SpacingToken.spacing2,
+          color: isError ? DerivedColor.color_text_danger : DerivedColor.color_text_default
         }),
         children: title
       }
     ),
-    /* @__PURE__ */ jsxs(Box14, { width: "100%", children: [
-      /* @__PURE__ */ jsxs(Box14, { display: "flex", width: "100%", children: [
+    /* @__PURE__ */ jsxs(Box16, { width: "100%", children: [
+      /* @__PURE__ */ jsxs(Box16, { display: "flex", width: "100%", children: [
         buttonPosition === "start" && uploadButton,
         /* @__PURE__ */ jsx(
           TextField3,
@@ -5841,24 +6206,30 @@ var TextFieldUpload = ({
               readOnly: true
             },
             sx: {
-              "& .MuiOutlinedInput-root": __spreadValues({
+              "& .MuiOutlinedInput-root": __spreadProps(__spreadValues({
                 borderTopLeftRadius: buttonPosition === "start" ? 0 : Radius.radius_2,
                 borderBottomLeftRadius: buttonPosition === "start" ? 0 : Radius.radius_2,
                 borderTopRightRadius: buttonPosition === "end" ? 0 : Radius.radius_2,
                 borderBottomRightRadius: buttonPosition === "end" ? 0 : Radius.radius_2
               }, isDisabled && {
                 backgroundColor: PrimitiveColor.color_neutral_200
+              }), {
+                "& fieldset": {
+                  borderColor: isError ? DerivedColor.color_border_danger : DerivedColor.color_border_default
+                },
+                "&:hover fieldset": {
+                  borderColor: isError ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary
+                },
+                "&.Mui-focused fieldset": {
+                  borderColor: isError ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary,
+                  borderWidth: 2
+                }
               }),
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderColor
-              },
-              "&:hover .MuiOutlinedInput-notchedOutline": {
-                boxShadows: 0,
-                borderColor
-              },
-              "& .Mui-focused .MuiOutlinedInput-notchedOutline": {
-                borderColor,
-                borderWidth: 1
+              "& .MuiInputBase-input": {
+                fontSize: 14,
+                "&::placeholder": {
+                  fontSize: 14
+                }
               }
             }
           }
@@ -5866,7 +6237,7 @@ var TextFieldUpload = ({
         buttonPosition === "end" && uploadButton
       ] }),
       /* @__PURE__ */ jsxs(
-        Box14,
+        Box16,
         {
           display: "flex",
           alignItems: "center",
@@ -5906,13 +6277,13 @@ function Editor(props) {
   useEffect(() => {
     let cancelled = false;
     async function load() {
-      var _a107, _b107, _c, _d, _e, _f, _g;
+      var _a126, _b126, _c, _d, _e, _f, _g;
       const alreadyLoaded = typeof window !== "undefined" && window.tinymce;
       if (!alreadyLoaded) {
         try {
           const tinymceModule = await import('tinymce/tinymce');
           if (typeof window !== "undefined" && !window.tinymce) {
-            const core = (_a107 = tinymceModule.default) != null ? _a107 : tinymceModule;
+            const core = (_a126 = tinymceModule.default) != null ? _a126 : tinymceModule;
             if (core && typeof core === "object" && core.tinymce) {
               window.tinymce = core.tinymce;
             } else {
@@ -5964,7 +6335,7 @@ function Editor(props) {
             import('tinymce/skins/content/default/content.min.css'),
             import('tinymce/skins/ui/oxide/content.min.css')
           ]);
-          const skinCss = (_b107 = skinMod == null ? void 0 : skinMod.default) != null ? _b107 : "";
+          const skinCss = (_b126 = skinMod == null ? void 0 : skinMod.default) != null ? _b126 : "";
           const contentCss = (_c = contentMod == null ? void 0 : contentMod.default) != null ? _c : "";
           const oxideContentCss = (_d = oxideContentMod == null ? void 0 : oxideContentMod.default) != null ? _d : "";
           const combinedCss = [skinCss, contentCss, oxideContentCss].filter(Boolean).join("\n");
@@ -6004,16 +6375,16 @@ function Editor(props) {
   }
   return /* @__PURE__ */ jsx(TinyEditor, __spreadValues({}, props));
 }
-var _a73, _b73;
-var InputAdornment3 = (_b73 = (_a73 = InputAdornmentRaw) == null ? void 0 : _a73.default) != null ? _b73 : InputAdornmentRaw;
-var _a74, _b74;
-var TextField4 = (_b74 = (_a74 = TextFieldRaw) == null ? void 0 : _a74.default) != null ? _b74 : TextFieldRaw;
-var _a75, _b75;
-var Box15 = (_b75 = (_a75 = BoxRaw) == null ? void 0 : _a75.default) != null ? _b75 : BoxRaw;
-var _a76, _b76;
-var Typography6 = (_b76 = (_a76 = MuiTypographyRaw) == null ? void 0 : _a76.default) != null ? _b76 : MuiTypographyRaw;
-var BaseTextArea = (_a107) => {
-  var _b107 = _a107, {
+var _a79, _b79;
+var InputAdornment3 = (_b79 = (_a79 = InputAdornmentRaw) == null ? void 0 : _a79.default) != null ? _b79 : InputAdornmentRaw;
+var _a80, _b80;
+var TextField4 = (_b80 = (_a80 = TextFieldRaw) == null ? void 0 : _a80.default) != null ? _b80 : TextFieldRaw;
+var _a81, _b81;
+var Box17 = (_b81 = (_a81 = BoxRaw) == null ? void 0 : _a81.default) != null ? _b81 : BoxRaw;
+var _a82, _b82;
+var Typography6 = (_b82 = (_a82 = MuiTypographyRaw) == null ? void 0 : _a82.default) != null ? _b82 : MuiTypographyRaw;
+var BaseTextArea = (_a126) => {
+  var _b126 = _a126, {
     name = "",
     control = null,
     defaultValue = "",
@@ -6027,7 +6398,7 @@ var BaseTextArea = (_a107) => {
     init,
     handleImageUpload,
     sx = {}
-  } = _b107, props = __objRest(_b107, [
+  } = _b126, props = __objRest(_b126, [
     "name",
     "control",
     "defaultValue",
@@ -6042,8 +6413,8 @@ var BaseTextArea = (_a107) => {
     "handleImageUpload",
     "sx"
   ]);
-  var _a108, _b108, _c, _d, _e, _f, _g;
-  const computedMaxLength = (_b108 = exactLength != null ? exactLength : maxLength) != null ? _b108 : (_a108 = rules == null ? void 0 : rules.maxLength) == null ? void 0 : _a108.value;
+  var _a127, _b127, _c, _d, _e, _f, _g;
+  const computedMaxLength = (_b127 = exactLength != null ? exactLength : maxLength) != null ? _b127 : (_a127 = rules == null ? void 0 : rules.maxLength) == null ? void 0 : _a127.value;
   const { field, fieldState } = useController({
     control,
     name,
@@ -6081,16 +6452,28 @@ var BaseTextArea = (_a107) => {
   const baseSx = {
     "& .MuiOutlinedInput-root": {
       borderRadius: Radius.radius_3,
-      backgroundColor: isDisabled ? PrimitiveColor.color_neutral_200 : PrimitiveColor.color_neutral_50
-    },
-    "& .MuiOutlinedInput-notchedOutline": {
-      borderColor: hasError ? PrimitiveColor.color_red_500 : PrimitiveColor.color_neutral_300
+      fontSize: 14,
+      backgroundColor: isDisabled ? PrimitiveColor.color_neutral_200 : PrimitiveColor.color_neutral_50,
+      "& fieldset": {
+        borderColor: hasError ? DerivedColor.color_border_danger : DerivedColor.color_border_default
+      },
+      "&:hover fieldset": {
+        borderColor: hasError ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: hasError ? DerivedColor.color_border_danger : DerivedColor.color_border_brand_primary,
+        borderWidth: 2
+      }
     },
-    "&:hover .MuiOutlinedInput-notchedOutline": {
-      borderColor: hasError ? PrimitiveColor.color_red_500 : PrimitiveColor.color_neutral_600
+    "& .MuiInputBase-input, & .MuiInputBase-inputMultiline": {
+      fontSize: 14,
+      "&::placeholder": {
+        fontSize: 14
+      }
     },
     "& .MuiFormHelperText-root": __spreadProps(__spreadValues({}, VariantStyles.caption_regular), {
-      color: hasError ? PrimitiveColor.color_red_500 : PrimitiveColor.color_neutral_600,
+      fontSize: 14,
+      color: hasError ? DerivedColor.color_text_danger : PrimitiveColor.color_neutral_600,
       marginLeft: 0,
       marginTop: SpacingToken.spacing1
     })
@@ -6100,20 +6483,18 @@ var BaseTextArea = (_a107) => {
   const editorId = (_e = props.id) != null ? _e : `textarea-${name}-${uniqueSuffix}`;
   const wrapperId = `editor-wrap-${uniqueSuffix}`;
   if (useRichText) {
-    return /* @__PURE__ */ jsxs(Box15, { id: wrapperId, sx, children: [
-      title && /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(Box17, { id: wrapperId, sx, children: [
+      title && /* @__PURE__ */ jsx(
         Typography6,
         {
           variant: "body2",
-          sx: { fontWeight: 600, color: DerivedColor.color_text_default, mb: "4px" },
-          children: [
-            title,
-            " ",
-            hasError && /* @__PURE__ */ jsxs(Box15, { component: "small", sx: { color: PrimitiveColor.color_red_500 }, children: [
-              "*",
-              errorMessage
-            ] })
-          ]
+          sx: {
+            fontWeight: 600,
+            fontSize: 14,
+            color: hasError ? DerivedColor.color_text_danger : DerivedColor.color_text_default,
+            mb: "4px"
+          },
+          children: title
         }
       ),
       /* @__PURE__ */ jsx("style", { children: `
@@ -6209,7 +6590,7 @@ var BaseTextArea = (_a107) => {
     ] });
   }
   return /* @__PURE__ */ jsxs(
-    Box15,
+    Box17,
     {
       sx: __spreadValues({
         display: "flex",
@@ -6221,7 +6602,11 @@ var BaseTextArea = (_a107) => {
           Typography6,
           {
             variant: "body2",
-            sx: { fontWeight: 600, color: DerivedColor.color_text_default },
+            sx: {
+              fontWeight: 600,
+              fontSize: 14,
+              color: hasError ? DerivedColor.color_text_danger : DerivedColor.color_text_default
+            },
             children: title
           }
         ),
@@ -6241,7 +6626,7 @@ var BaseTextArea = (_a107) => {
               maxLength: computedMaxLength
             },
             InputProps: {
-              endAdornment: hasError && /* @__PURE__ */ jsx(InputAdornment3, { position: "end", children: /* @__PURE__ */ jsx(IconInfoCircle, { size: 18, color: PrimitiveColor.color_red_500 }) })
+              endAdornment: hasError && /* @__PURE__ */ jsx(InputAdornment3, { position: "end", children: /* @__PURE__ */ jsx(IconAlertCircleFilled, { size: 18, color: PrimitiveColor.color_red_500 }) })
             }
           }, props), field)
         )
@@ -6249,20 +6634,20 @@ var BaseTextArea = (_a107) => {
     }
   );
 };
-var _a77, _b77;
-var CloseIcon2 = (_b77 = (_a77 = CloseIconRaw) == null ? void 0 : _a77.default) != null ? _b77 : CloseIconRaw;
-var _a78, _b78;
-var Dialog = (_b78 = (_a78 = DialogRaw) == null ? void 0 : _a78.default) != null ? _b78 : DialogRaw;
-var _a79, _b79;
-var DialogTitle = (_b79 = (_a79 = DialogTitleRaw) == null ? void 0 : _a79.default) != null ? _b79 : DialogTitleRaw;
-var _a80, _b80;
-var DialogContent = (_b80 = (_a80 = DialogContentRaw) == null ? void 0 : _a80.default) != null ? _b80 : DialogContentRaw;
-var _a81, _b81;
-var DialogActions = (_b81 = (_a81 = DialogActionsRaw) == null ? void 0 : _a81.default) != null ? _b81 : DialogActionsRaw;
-var _a82, _b82;
-var IconButton4 = (_b82 = (_a82 = IconButtonRaw) == null ? void 0 : _a82.default) != null ? _b82 : IconButtonRaw;
-var BaseModal = (_a107) => {
-  var _b107 = _a107, {
+var _a83, _b83;
+var CloseIcon2 = (_b83 = (_a83 = CloseIconRaw) == null ? void 0 : _a83.default) != null ? _b83 : CloseIconRaw;
+var _a84, _b84;
+var Dialog = (_b84 = (_a84 = DialogRaw) == null ? void 0 : _a84.default) != null ? _b84 : DialogRaw;
+var _a85, _b85;
+var DialogTitle = (_b85 = (_a85 = DialogTitleRaw) == null ? void 0 : _a85.default) != null ? _b85 : DialogTitleRaw;
+var _a86, _b86;
+var DialogContent = (_b86 = (_a86 = DialogContentRaw) == null ? void 0 : _a86.default) != null ? _b86 : DialogContentRaw;
+var _a87, _b87;
+var DialogActions = (_b87 = (_a87 = DialogActionsRaw) == null ? void 0 : _a87.default) != null ? _b87 : DialogActionsRaw;
+var _a88, _b88;
+var IconButton5 = (_b88 = (_a88 = IconButtonRaw) == null ? void 0 : _a88.default) != null ? _b88 : IconButtonRaw;
+var BaseModal = (_a126) => {
+  var _b126 = _a126, {
     open,
     onClose,
     onConfirm,
@@ -6285,7 +6670,7 @@ var BaseModal = (_a107) => {
     align = "center",
     modalWidth = "w-[350px]",
     showCloseIcon = true
-  } = _b107, props = __objRest(_b107, [
+  } = _b126, props = __objRest(_b126, [
     "open",
     "onClose",
     "onConfirm",
@@ -6347,7 +6732,7 @@ var BaseModal = (_a107) => {
       PaperProps: { className: modalWidth },
       children: [
         (title || showCloseIcon) && /* @__PURE__ */ jsx(DialogTitle, { sx: { p: SpacingToken.spacing4 }, children: showCloseIcon && /* @__PURE__ */ jsx(
-          IconButton4,
+          IconButton5,
           {
             "aria-label": "close",
             onClick: onClose,
@@ -6439,42 +6824,569 @@ BaseModal.propTypes = {
   modalWidth: PropTypes3.string,
   showCloseIcon: PropTypes3.bool
 };
-var _a83, _b83;
-var CloseIcon3 = (_b83 = (_a83 = CloseIconRaw) == null ? void 0 : _a83.default) != null ? _b83 : CloseIconRaw;
-var _a84, _b84;
-var CheckIcon2 = (_b84 = (_a84 = CheckRaw) == null ? void 0 : _a84.default) != null ? _b84 : CheckRaw;
-var _a85, _b85;
-var FailedIcon = (_b85 = (_a85 = CloseIconRaw) == null ? void 0 : _a85.default) != null ? _b85 : CloseIconRaw;
-var _a86, _b86;
-var InfoIcon = (_b86 = (_a86 = InfoIconRaw) == null ? void 0 : _a86.default) != null ? _b86 : InfoIconRaw;
-var _a87, _b87;
-var Dialog2 = (_b87 = (_a87 = DialogRaw) == null ? void 0 : _a87.default) != null ? _b87 : DialogRaw;
-var _a88, _b88;
-var DialogTitle2 = (_b88 = (_a88 = DialogTitleRaw) == null ? void 0 : _a88.default) != null ? _b88 : DialogTitleRaw;
 var _a89, _b89;
-var DialogContent2 = (_b89 = (_a89 = DialogContentRaw) == null ? void 0 : _a89.default) != null ? _b89 : DialogContentRaw;
+var Dialog2 = (_b89 = (_a89 = DialogRaw) == null ? void 0 : _a89.default) != null ? _b89 : DialogRaw;
 var _a90, _b90;
-var DialogActions2 = (_b90 = (_a90 = DialogActionsRaw) == null ? void 0 : _a90.default) != null ? _b90 : DialogActionsRaw;
+var DialogContent2 = (_b90 = (_a90 = DialogContentRaw) == null ? void 0 : _a90.default) != null ? _b90 : DialogContentRaw;
 var _a91, _b91;
-var IconButton5 = (_b91 = (_a91 = IconButtonRaw) == null ? void 0 : _a91.default) != null ? _b91 : IconButtonRaw;
+var DialogActions2 = (_b91 = (_a91 = DialogActionsRaw) == null ? void 0 : _a91.default) != null ? _b91 : DialogActionsRaw;
 var _a92, _b92;
-var Typography7 = (_b92 = (_a92 = MuiTypographyRaw) == null ? void 0 : _a92.default) != null ? _b92 : MuiTypographyRaw;
+var IconButton6 = (_b92 = (_a92 = IconButtonRaw) == null ? void 0 : _a92.default) != null ? _b92 : IconButtonRaw;
 var _a93, _b93;
-var Box16 = (_b93 = (_a93 = BoxRaw) == null ? void 0 : _a93.default) != null ? _b93 : BoxRaw;
+var Box18 = (_b93 = (_a93 = BoxRaw) == null ? void 0 : _a93.default) != null ? _b93 : BoxRaw;
+var ICON_MAP = {
+  success: {
+    Hero: SuccessHero,
+    FallbackIcon: IconCircleCheck,
+    color: PrimitiveColor.color_green_500
+  },
+  error: {
+    Hero: ErrorHero,
+    FallbackIcon: IconAlertCircle,
+    color: PrimitiveColor.color_red_500
+  },
+  info: {
+    Hero: null,
+    FallbackIcon: IconInfoCircle,
+    color: PrimitiveColor.color_blue_cakrawala_500
+  },
+  warning: {
+    Hero: WarningHero,
+    FallbackIcon: IconAlertTriangle,
+    color: PrimitiveColor.color_yellow_500
+  },
+  confirm: {
+    Hero: null,
+    FallbackIcon: IconHelpCircle,
+    color: PrimitiveColor.color_blue_cakrawala_500
+  }
+};
+var DEFAULT_TITLES = {
+  success: "Success !",
+  error: "Oops !",
+  warning: "Oops !",
+  info: "Information !",
+  confirm: "Confirmation !"
+};
+var ModalAlertDialog = ({
+  open = false,
+  onClose,
+  icon = "info",
+  title = "",
+  description = "",
+  cancelBtnText = "Batal",
+  confirmBtnText = "Ya",
+  cancelBtnProps,
+  confirmBtnProps,
+  showCancelBtn = true,
+  showConfirmBtn = true
+}) => {
+  const resolvedTitle = title || typeof icon === "string" && DEFAULT_TITLES[icon.toLowerCase()] || "";
+  const renderIcon = () => {
+    if (typeof icon === "string" && ICON_MAP[icon.toLowerCase()]) {
+      const { Hero, FallbackIcon, color } = ICON_MAP[icon.toLowerCase()];
+      if (Hero) {
+        return /* @__PURE__ */ jsx(Box18, { sx: { width: 160, height: 130, display: "flex", alignItems: "center", justifyContent: "center", "& svg": { width: "100%", height: "100%" } }, children: /* @__PURE__ */ jsx(Hero, {}) });
+      }
+      return /* @__PURE__ */ jsx(FallbackIcon, { size: 64, color, stroke: 1.5 });
+    }
+    if (typeof icon === "string" && (icon.startsWith("/") || icon.startsWith("http"))) {
+      return /* @__PURE__ */ jsx(
+        Box18,
+        {
+          component: "img",
+          src: icon,
+          alt: "modal-icon",
+          sx: { width: 120, height: 100, objectFit: "contain" }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(IconInfoCircle, { size: 64, color: PrimitiveColor.color_blue_cakrawala_500, stroke: 1.5 });
+  };
+  const handleCancel = () => {
+    if (cancelBtnProps && typeof cancelBtnProps === "function") {
+      cancelBtnProps();
+    } else {
+      onClose == null ? void 0 : onClose();
+    }
+  };
+  const handleConfirm = () => {
+    if (confirmBtnProps && typeof confirmBtnProps === "function") {
+      confirmBtnProps();
+    }
+    onClose == null ? void 0 : onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    Dialog2,
+    {
+      open,
+      onClose,
+      sx: {
+        "& .MuiDialog-container": {
+          "& .MuiPaper-root": {
+            width: "100%",
+            maxWidth: "350px"
+          },
+          "& .MuiDialog-paper": {
+            borderRadius: Radius.radius_3
+          }
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box18, { sx: { position: "absolute", right: 8, top: 8 }, children: /* @__PURE__ */ jsx(IconButton6, { onClick: onClose, sx: { color: DerivedColor.color_text_subtle }, children: /* @__PURE__ */ jsx(IconX, { size: 20 }) }) }),
+        /* @__PURE__ */ jsxs(
+          DialogContent2,
+          {
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              textAlign: "center",
+              pt: SpacingToken.spacing6,
+              px: SpacingToken.spacing5,
+              pb: SpacingToken.spacing3,
+              gap: SpacingToken.spacing3
+            },
+            children: [
+              /* @__PURE__ */ jsx(Box18, { sx: { display: "flex", justifyContent: "center", py: 1 }, children: renderIcon() }),
+              resolvedTitle && /* @__PURE__ */ jsx(BaseTypography, { variant: "header1_bold.default", sx: { fontSize: "18px" }, children: resolvedTitle }),
+              description && /* @__PURE__ */ jsx(BaseTypography, { variant: "body2_regular.default", sx: { textAlign: "center" }, children: description })
+            ]
+          }
+        ),
+        (showCancelBtn || showConfirmBtn) && /* @__PURE__ */ jsxs(
+          DialogActions2,
+          {
+            sx: {
+              justifyContent: "center",
+              gap: SpacingToken.spacing2,
+              px: SpacingToken.spacing5,
+              pb: SpacingToken.spacing5,
+              pt: 0
+            },
+            children: [
+              showCancelBtn && /* @__PURE__ */ jsx(
+                BaseButton,
+                {
+                  variant: "outline",
+                  color: "primary",
+                  onClick: handleCancel,
+                  width: "auto",
+                  sx: { minWidth: "120px", flex: 1 },
+                  children: cancelBtnText
+                }
+              ),
+              showConfirmBtn && /* @__PURE__ */ jsx(
+                BaseButton,
+                {
+                  variant: "fill",
+                  color: "primary",
+                  onClick: handleConfirm,
+                  width: "auto",
+                  sx: { minWidth: "120px", flex: 1 },
+                  children: confirmBtnText
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var _modalRef = null;
+var setModalRef = (ref) => {
+  _modalRef = ref;
+};
+var show = (options = {}) => {
+  var _a126;
+  if ((_a126 = _modalRef == null ? void 0 : _modalRef.current) == null ? void 0 : _a126.show) {
+    _modalRef.current.show(options);
+  }
+};
+var hide = () => {
+  var _a126;
+  if ((_a126 = _modalRef == null ? void 0 : _modalRef.current) == null ? void 0 : _a126.hide) {
+    _modalRef.current.hide();
+  }
+};
+var BaseModalAlert = {
+  show,
+  hide,
+  setModalRef
+};
+var BaseModalAlertProvider = () => {
+  const [state, setState] = useState({ open: false });
+  const ref = useRef();
+  const handleShow = useCallback((options) => {
+    setState(__spreadValues({ open: true }, options));
+  }, []);
+  const handleHide = useCallback(() => {
+    setState((prev) => __spreadProps(__spreadValues({}, prev), { open: false }));
+  }, []);
+  ref.current = { show: handleShow, hide: handleHide };
+  useState(() => {
+    BaseModalAlert.setModalRef(ref);
+  });
+  return /* @__PURE__ */ jsx(
+    BaseModalAlertDialog,
+    {
+      open: state.open,
+      onClose: handleHide,
+      icon: state.icon,
+      title: state.title,
+      description: state.description,
+      cancelBtnText: state.cancelBtnText,
+      confirmBtnText: state.confirmBtnText,
+      cancelBtnProps: state.cancelBtnProps,
+      confirmBtnProps: state.confirmBtnProps,
+      showCancelBtn: state.showCancelBtn !== void 0 ? state.showCancelBtn : true,
+      showConfirmBtn: state.showConfirmBtn !== void 0 ? state.showConfirmBtn : true
+    }
+  );
+};
+var BaseModalAlertDialog = ModalAlertDialog;
+var LoadingDots = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "90",
+    height: "28",
+    viewBox: "0 0 90 28",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "14", cy: "14", r: "6", fill: "#F39C12", children: /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "0 0;0 -8;0 0",
+          dur: "0.8s",
+          begin: "0s",
+          repeatCount: "indefinite"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("circle", { cx: "32", cy: "14", r: "6", fill: "#E67E22", children: /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "0 0;0 -8;0 0",
+          dur: "0.8s",
+          begin: "0.15s",
+          repeatCount: "indefinite"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("circle", { cx: "50", cy: "14", r: "6", fill: "#3498DB", children: /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "0 0;0 -8;0 0",
+          dur: "0.8s",
+          begin: "0.30s",
+          repeatCount: "indefinite"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("circle", { cx: "68", cy: "14", r: "6", fill: "#2E86DE", children: /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "0 0;0 -8;0 0",
+          dur: "0.8s",
+          begin: "0.45s",
+          repeatCount: "indefinite"
+        }
+      ) })
+    ]
+  }
+);
 var _a94, _b94;
-var Stepper2 = (_b94 = (_a94 = StepperRaw) == null ? void 0 : _a94.default) != null ? _b94 : StepperRaw;
+var Dialog3 = (_b94 = (_a94 = DialogRaw) == null ? void 0 : _a94.default) != null ? _b94 : DialogRaw;
 var _a95, _b95;
-var Step2 = (_b95 = (_a95 = StepRaw) == null ? void 0 : _a95.default) != null ? _b95 : StepRaw;
+var DialogContent3 = (_b95 = (_a95 = DialogContentRaw) == null ? void 0 : _a95.default) != null ? _b95 : DialogContentRaw;
 var _a96, _b96;
-var StepLabel2 = (_b96 = (_a96 = StepLabelRaw) == null ? void 0 : _a96.default) != null ? _b96 : StepLabelRaw;
+(_b96 = (_a96 = BoxRaw) == null ? void 0 : _a96.default) != null ? _b96 : BoxRaw;
+var ModalLoadingDialog = ({ open = false }) => {
+  return /* @__PURE__ */ jsx(
+    Dialog3,
+    {
+      open,
+      disableEscapeKeyDown: true,
+      sx: {
+        "& .MuiDialog-container": {
+          "& .MuiPaper-root": {
+            width: "auto",
+            minWidth: "150px"
+          },
+          "& .MuiDialog-paper": {
+            borderRadius: Radius.radius_3
+          }
+        },
+        "& .MuiBackdrop-root": {
+          backgroundColor: "rgba(0, 0, 0, 0.5)"
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        DialogContent3,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            textAlign: "center",
+            py: SpacingToken.spacing6,
+            px: SpacingToken.spacing5,
+            gap: SpacingToken.spacing3
+          },
+          children: [
+            /* @__PURE__ */ jsx(LoadingDots, {}),
+            /* @__PURE__ */ jsx(BaseTypography, { variant: "body2_regular.subtle", sx: { fontWeight: "bold" }, children: "Loading..." })
+          ]
+        }
+      )
+    }
+  );
+};
+var _modalRef2 = null;
+var setModalRef2 = (ref) => {
+  _modalRef2 = ref;
+};
+var show2 = () => {
+  var _a126;
+  if ((_a126 = _modalRef2 == null ? void 0 : _modalRef2.current) == null ? void 0 : _a126.show) {
+    _modalRef2.current.show();
+  }
+};
+var hide2 = () => {
+  var _a126;
+  if ((_a126 = _modalRef2 == null ? void 0 : _modalRef2.current) == null ? void 0 : _a126.hide) {
+    _modalRef2.current.hide();
+  }
+};
+var BaseModalLoading = {
+  show: show2,
+  hide: hide2,
+  setModalRef: setModalRef2
+};
+var BaseModalLoadingProvider = () => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef();
+  const handleShow = useCallback(() => {
+    setOpen(true);
+  }, []);
+  const handleHide = useCallback(() => {
+    setOpen(false);
+  }, []);
+  ref.current = { show: handleShow, hide: handleHide };
+  useState(() => {
+    BaseModalLoading.setModalRef(ref);
+  });
+  return /* @__PURE__ */ jsx(ModalLoadingDialog, { open });
+};
+var BaseModalLoadingDialog = ModalLoadingDialog;
 var _a97, _b97;
-var StepContent = (_b97 = (_a97 = StepContentRaw) == null ? void 0 : _a97.default) != null ? _b97 : StepContentRaw;
+var Dialog4 = (_b97 = (_a97 = DialogRaw) == null ? void 0 : _a97.default) != null ? _b97 : DialogRaw;
 var _a98, _b98;
-var Tooltip2 = (_b98 = (_a98 = TooltipRaw) == null ? void 0 : _a98.default) != null ? _b98 : TooltipRaw;
+var DialogContent4 = (_b98 = (_a98 = DialogContentRaw) == null ? void 0 : _a98.default) != null ? _b98 : DialogContentRaw;
 var _a99, _b99;
-var CircularProgress2 = (_b99 = (_a99 = CircularProgressRaw) == null ? void 0 : _a99.default) != null ? _b99 : CircularProgressRaw;
-var HtmlTooltip2 = styled((_a107) => {
-  var _b107 = _a107, { className } = _b107, props = __objRest(_b107, ["className"]);
+var DialogActions3 = (_b99 = (_a99 = DialogActionsRaw) == null ? void 0 : _a99.default) != null ? _b99 : DialogActionsRaw;
+var _a100, _b100;
+var IconButton7 = (_b100 = (_a100 = IconButtonRaw) == null ? void 0 : _a100.default) != null ? _b100 : IconButtonRaw;
+var _a101, _b101;
+var Box20 = (_b101 = (_a101 = BoxRaw) == null ? void 0 : _a101.default) != null ? _b101 : BoxRaw;
+var HEADER_COLORS2 = {
+  primary: DerivedColor.color_bg_brand_primary,
+  secondary: DerivedColor.color_bg_brand_secondary,
+  success: DerivedColor.color_bg_success,
+  warning: DerivedColor.color_bg_warning,
+  danger: DerivedColor.color_bg_danger
+};
+var BaseModalPopup = (_a126) => {
+  var _b126 = _a126, {
+    open = false,
+    onClose,
+    variant = "default",
+    color = "primary",
+    title = "",
+    subtitle = "",
+    startIcon = null,
+    children = null,
+    footer = null,
+    maxWidth = "sm",
+    fullWidth = true,
+    isWatermark = false,
+    watermarkText = "",
+    sx = {}
+  } = _b126, rest = __objRest(_b126, [
+    "open",
+    "onClose",
+    "variant",
+    "color",
+    "title",
+    "subtitle",
+    "startIcon",
+    "children",
+    "footer",
+    "maxWidth",
+    "fullWidth",
+    "isWatermark",
+    "watermarkText",
+    "sx"
+  ]);
+  const headerBg = HEADER_COLORS2[color] || HEADER_COLORS2.primary;
+  const headerTextColor = DerivedColor.color_text_inverse;
+  const contentBg = DerivedColor.color_bg_surface;
+  const borderColor = DerivedColor.color_border_default;
+  const hasHeader = variant === "with-header" || variant === "with-header-footer";
+  const hasFooter = variant === "with-header-footer";
+  const renderContent = () => {
+    if (isWatermark && watermarkText) {
+      return /* @__PURE__ */ jsx(
+        Watermark,
+        {
+          text: watermarkText,
+          textColor: "#000000",
+          textSize: 14,
+          opacity: 0.15,
+          gutter: 20,
+          rotate: -30,
+          wrapperStyle: { minHeight: "100px" },
+          children
+        }
+      );
+    }
+    return children;
+  };
+  return /* @__PURE__ */ jsxs(
+    Dialog4,
+    __spreadProps(__spreadValues({
+      open,
+      onClose,
+      maxWidth,
+      fullWidth,
+      sx: __spreadValues({
+        "& .MuiDialog-paper": {
+          borderRadius: Radius.radius_3,
+          overflow: "hidden"
+        }
+      }, sx)
+    }, rest), {
+      children: [
+        hasHeader ? /* @__PURE__ */ jsxs(
+          Box20,
+          {
+            sx: {
+              backgroundColor: headerBg,
+              padding: SpacingToken.spacing4,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Box20, { sx: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                startIcon && /* @__PURE__ */ jsx(Box20, { sx: { display: "flex", alignItems: "center", lineHeight: 0, color: headerTextColor }, children: startIcon }),
+                /* @__PURE__ */ jsxs(Box20, { children: [
+                  /* @__PURE__ */ jsx(
+                    Box20,
+                    {
+                      component: "span",
+                      sx: {
+                        color: headerTextColor,
+                        fontWeight: 700,
+                        fontSize: "16px",
+                        display: "block"
+                      },
+                      children: title
+                    }
+                  ),
+                  subtitle && /* @__PURE__ */ jsx(
+                    Box20,
+                    {
+                      component: "span",
+                      sx: {
+                        color: headerTextColor,
+                        fontWeight: 400,
+                        fontSize: "13px",
+                        display: "block",
+                        mt: "2px",
+                        opacity: 0.85
+                      },
+                      children: subtitle
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(IconButton7, { onClick: onClose, sx: { color: headerTextColor }, children: /* @__PURE__ */ jsx(IconX, { size: 20 }) })
+            ]
+          }
+        ) : (
+          /* Default variant: close button top-right only */
+          /* @__PURE__ */ jsx(Box20, { sx: { position: "absolute", right: 8, top: 8, zIndex: 1 }, children: /* @__PURE__ */ jsx(IconButton7, { onClick: onClose, sx: { color: DerivedColor.color_text_subtle }, children: /* @__PURE__ */ jsx(IconX, { size: 20 }) }) })
+        ),
+        /* @__PURE__ */ jsx(
+          DialogContent4,
+          {
+            sx: {
+              backgroundColor: contentBg,
+              padding: SpacingToken.spacing5,
+              pt: hasHeader ? SpacingToken.spacing5 : SpacingToken.spacing6
+            },
+            children: renderContent()
+          }
+        ),
+        hasFooter && footer && /* @__PURE__ */ jsx(
+          DialogActions3,
+          {
+            sx: {
+              backgroundColor: contentBg,
+              borderTop: `1px solid ${borderColor}`,
+              padding: SpacingToken.spacing4,
+              gap: SpacingToken.spacing2
+            },
+            children: footer
+          }
+        )
+      ]
+    })
+  );
+};
+var _a102, _b102;
+var CloseIcon3 = (_b102 = (_a102 = CloseIconRaw) == null ? void 0 : _a102.default) != null ? _b102 : CloseIconRaw;
+var _a103, _b103;
+var CheckIcon2 = (_b103 = (_a103 = CheckRaw) == null ? void 0 : _a103.default) != null ? _b103 : CheckRaw;
+var _a104, _b104;
+var FailedIcon = (_b104 = (_a104 = CloseIconRaw) == null ? void 0 : _a104.default) != null ? _b104 : CloseIconRaw;
+var _a105, _b105;
+var InfoIcon = (_b105 = (_a105 = InfoIconRaw) == null ? void 0 : _a105.default) != null ? _b105 : InfoIconRaw;
+var _a106, _b106;
+var Dialog5 = (_b106 = (_a106 = DialogRaw) == null ? void 0 : _a106.default) != null ? _b106 : DialogRaw;
+var _a107, _b107;
+var DialogTitle2 = (_b107 = (_a107 = DialogTitleRaw) == null ? void 0 : _a107.default) != null ? _b107 : DialogTitleRaw;
+var _a108, _b108;
+var DialogContent5 = (_b108 = (_a108 = DialogContentRaw) == null ? void 0 : _a108.default) != null ? _b108 : DialogContentRaw;
+var _a109, _b109;
+var DialogActions4 = (_b109 = (_a109 = DialogActionsRaw) == null ? void 0 : _a109.default) != null ? _b109 : DialogActionsRaw;
+var _a110, _b110;
+var IconButton8 = (_b110 = (_a110 = IconButtonRaw) == null ? void 0 : _a110.default) != null ? _b110 : IconButtonRaw;
+var _a111, _b111;
+var Typography7 = (_b111 = (_a111 = MuiTypographyRaw) == null ? void 0 : _a111.default) != null ? _b111 : MuiTypographyRaw;
+var _a112, _b112;
+var Box21 = (_b112 = (_a112 = BoxRaw) == null ? void 0 : _a112.default) != null ? _b112 : BoxRaw;
+var _a113, _b113;
+var Stepper2 = (_b113 = (_a113 = StepperRaw) == null ? void 0 : _a113.default) != null ? _b113 : StepperRaw;
+var _a114, _b114;
+var Step2 = (_b114 = (_a114 = StepRaw) == null ? void 0 : _a114.default) != null ? _b114 : StepRaw;
+var _a115, _b115;
+var StepLabel2 = (_b115 = (_a115 = StepLabelRaw) == null ? void 0 : _a115.default) != null ? _b115 : StepLabelRaw;
+var _a116, _b116;
+var StepContent = (_b116 = (_a116 = StepContentRaw) == null ? void 0 : _a116.default) != null ? _b116 : StepContentRaw;
+var _a117, _b117;
+var Tooltip2 = (_b117 = (_a117 = TooltipRaw) == null ? void 0 : _a117.default) != null ? _b117 : TooltipRaw;
+var _a118, _b118;
+var CircularProgress2 = (_b118 = (_a118 = CircularProgressRaw) == null ? void 0 : _a118.default) != null ? _b118 : CircularProgressRaw;
+var HtmlTooltip2 = styled((_a126) => {
+  var _b126 = _a126, { className } = _b126, props = __objRest(_b126, ["className"]);
   return /* @__PURE__ */ jsx(Tooltip2, __spreadProps(__spreadValues({}, props), { classes: { popper: className } }));
 })(({ theme }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
@@ -6521,8 +7433,8 @@ var StepIconWrapper = styled("div")(({ ownerState }) => __spreadValues({
   justifyContent: "center",
   minHeight: ICON_SIZE
 }, ownerState.active && { backgroundColor: "transparent" }));
-var BaseModalStepper = (_a107) => {
-  var _b107 = _a107, {
+var BaseModalStepper = (_a126) => {
+  var _b126 = _a126, {
     open,
     onClose,
     title = "",
@@ -6533,7 +7445,7 @@ var BaseModalStepper = (_a107) => {
     showFooter = true,
     children,
     modalWidth = "max-w-md"
-  } = _b107, props = __objRest(_b107, [
+  } = _b126, props = __objRest(_b126, [
     "open",
     "onClose",
     "title",
@@ -6598,14 +7510,14 @@ var BaseModalStepper = (_a107) => {
     icon: PropTypes3.node
   };
   useEffect(() => {
-    var _a108;
+    var _a127;
     if (!open) {
       setActiveStep(0);
       return;
     }
     if (stepper.length === 0) return;
     const incrementStep = () => setActiveStep((prev) => prev < stepper.length ? prev + 1 : prev);
-    const delay = activeStep > 0 ? ((_a108 = stepper[activeStep - 1]) == null ? void 0 : _a108.responseTime) || 800 : 800;
+    const delay = activeStep > 0 ? ((_a127 = stepper[activeStep - 1]) == null ? void 0 : _a127.responseTime) || 800 : 800;
     const timer = setTimeout(incrementStep, delay);
     return () => clearTimeout(timer);
   }, [activeStep, stepper, open]);
@@ -6638,7 +7550,7 @@ var BaseModalStepper = (_a107) => {
     return href ? /* @__PURE__ */ jsx(Link, { href, children: button }) : button;
   };
   return /* @__PURE__ */ jsxs(
-    Dialog2,
+    Dialog5,
     __spreadProps(__spreadValues({
       open,
       onClose: handleClose,
@@ -6655,7 +7567,7 @@ var BaseModalStepper = (_a107) => {
         /* @__PURE__ */ jsxs(DialogTitle2, { sx: { textAlign: "center", pt: 4 }, children: [
           title && /* @__PURE__ */ jsx(Typography7, { style: VariantStyles.header1_bold, children: title }),
           /* @__PURE__ */ jsx(
-            IconButton5,
+            IconButton8,
             {
               "aria-label": "close",
               onClick: onClose,
@@ -6669,9 +7581,9 @@ var BaseModalStepper = (_a107) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(DialogContent2, { sx: { px: 4, pb: 3 }, children: [
+        /* @__PURE__ */ jsxs(DialogContent5, { sx: { px: 4, pb: 3 }, children: [
           children ? children : /* @__PURE__ */ jsxs(
-            Box16,
+            Box21,
             {
               sx: {
                 display: "flex",
@@ -6696,13 +7608,13 @@ var BaseModalStepper = (_a107) => {
               ]
             }
           ),
-          /* @__PURE__ */ jsx(Box16, { sx: { width: "100%", maxWidth: 500 }, children: /* @__PURE__ */ jsx(Stepper2, { activeStep, orientation: "vertical", children: stepper.map((step) => /* @__PURE__ */ jsxs(Step2, { children: [
+          /* @__PURE__ */ jsx(Box21, { sx: { width: "100%", maxWidth: 500 }, children: /* @__PURE__ */ jsx(Stepper2, { activeStep, orientation: "vertical", children: stepper.map((step) => /* @__PURE__ */ jsxs(Step2, { children: [
             /* @__PURE__ */ jsx(StepLabel2, { StepIconComponent: ColorlibStepIcon2, children: step.label }),
             /* @__PURE__ */ jsx(StepContent, { children: /* @__PURE__ */ jsx(Typography7, { sx: { fontSize: 14 }, children: step.description }) })
           ] }, step.label)) }) })
         ] }),
         /* @__PURE__ */ jsx(
-          DialogActions2,
+          DialogActions4,
           {
             sx: {
               justifyContent: "center",
@@ -6736,25 +7648,25 @@ BaseModalStepper.propTypes = {
 };
 var Countdown = dynamic(
   () => import('react-countdown').then((mod) => {
-    var _a107;
-    return (_a107 = mod.default) != null ? _a107 : mod;
+    var _a126;
+    return (_a126 = mod.default) != null ? _a126 : mod;
   }),
   { ssr: false }
 );
-var _a100, _b100;
-var CloseIcon4 = (_b100 = (_a100 = CloseIconRaw) == null ? void 0 : _a100.default) != null ? _b100 : CloseIconRaw;
-var _a101, _b101;
-var Dialog3 = (_b101 = (_a101 = DialogRaw) == null ? void 0 : _a101.default) != null ? _b101 : DialogRaw;
-var _a102, _b102;
-var DialogContent3 = (_b102 = (_a102 = DialogContentRaw) == null ? void 0 : _a102.default) != null ? _b102 : DialogContentRaw;
-var _a103, _b103;
-var DialogTitle3 = (_b103 = (_a103 = DialogTitleRaw) == null ? void 0 : _a103.default) != null ? _b103 : DialogTitleRaw;
-var _a104, _b104;
-var IconButton6 = (_b104 = (_a104 = IconButtonRaw) == null ? void 0 : _a104.default) != null ? _b104 : IconButtonRaw;
-var _a105, _b105;
-var Box17 = (_b105 = (_a105 = BoxRaw) == null ? void 0 : _a105.default) != null ? _b105 : BoxRaw;
-var _a106, _b106;
-var Typography8 = (_b106 = (_a106 = MuiTypographyRaw) == null ? void 0 : _a106.default) != null ? _b106 : MuiTypographyRaw;
+var _a119, _b119;
+var CloseIcon4 = (_b119 = (_a119 = CloseIconRaw) == null ? void 0 : _a119.default) != null ? _b119 : CloseIconRaw;
+var _a120, _b120;
+var Dialog6 = (_b120 = (_a120 = DialogRaw) == null ? void 0 : _a120.default) != null ? _b120 : DialogRaw;
+var _a121, _b121;
+var DialogContent6 = (_b121 = (_a121 = DialogContentRaw) == null ? void 0 : _a121.default) != null ? _b121 : DialogContentRaw;
+var _a122, _b122;
+var DialogTitle3 = (_b122 = (_a122 = DialogTitleRaw) == null ? void 0 : _a122.default) != null ? _b122 : DialogTitleRaw;
+var _a123, _b123;
+var IconButton9 = (_b123 = (_a123 = IconButtonRaw) == null ? void 0 : _a123.default) != null ? _b123 : IconButtonRaw;
+var _a124, _b124;
+var Box22 = (_b124 = (_a124 = BoxRaw) == null ? void 0 : _a124.default) != null ? _b124 : BoxRaw;
+var _a125, _b125;
+var Typography8 = (_b125 = (_a125 = MuiTypographyRaw) == null ? void 0 : _a125.default) != null ? _b125 : MuiTypographyRaw;
 var otpInputBase = {
   height: 40,
   width: 30,
@@ -6785,7 +7697,7 @@ var NativeOTPInput = ({ value, onChange, numInputs, hasError }) => {
   const digits = value.split("");
   const handleChange = useCallback(
     (index, e) => {
-      var _a107;
+      var _a126;
       const val = e.target.value;
       if (!/^\d*$/.test(val)) return;
       const newDigits = [...digits];
@@ -6794,20 +7706,20 @@ var NativeOTPInput = ({ value, onChange, numInputs, hasError }) => {
       const newValue = newDigits.join("");
       onChange(newValue.slice(0, numInputs));
       if (val && index < numInputs - 1) {
-        (_a107 = inputRefs.current[index + 1]) == null ? void 0 : _a107.focus();
+        (_a126 = inputRefs.current[index + 1]) == null ? void 0 : _a126.focus();
       }
     },
     [digits, numInputs, onChange]
   );
   const handleKeyDown = useCallback(
     (index, e) => {
-      var _a107, _b107, _c;
+      var _a126, _b126, _c;
       if (e.key === "Backspace" && !digits[index] && index > 0) {
-        (_a107 = inputRefs.current[index - 1]) == null ? void 0 : _a107.focus();
+        (_a126 = inputRefs.current[index - 1]) == null ? void 0 : _a126.focus();
       }
       if (e.key === "ArrowLeft" && index > 0) {
         e.preventDefault();
-        (_b107 = inputRefs.current[index - 1]) == null ? void 0 : _b107.focus();
+        (_b126 = inputRefs.current[index - 1]) == null ? void 0 : _b126.focus();
       }
       if (e.key === "ArrowRight" && index < numInputs - 1) {
         e.preventDefault();
@@ -6818,20 +7730,20 @@ var NativeOTPInput = ({ value, onChange, numInputs, hasError }) => {
   );
   const handlePaste = useCallback(
     (e) => {
-      var _a107;
+      var _a126;
       e.preventDefault();
       const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, numInputs);
       if (!pasted) return;
       onChange(pasted);
       const nextIdx = Math.min(pasted.length, numInputs - 1);
-      (_a107 = inputRefs.current[nextIdx]) == null ? void 0 : _a107.focus();
+      (_a126 = inputRefs.current[nextIdx]) == null ? void 0 : _a126.focus();
     },
     [numInputs, onChange]
   );
   useEffect(() => {
     const timer = setTimeout(() => {
-      var _a107;
-      return (_a107 = inputRefs.current[0]) == null ? void 0 : _a107.focus();
+      var _a126;
+      return (_a126 = inputRefs.current[0]) == null ? void 0 : _a126.focus();
     }, 100);
     return () => clearTimeout(timer);
   }, []);
@@ -6903,7 +7815,7 @@ var BaseModalOTP = ({
   };
   const setOff = () => setCountOn("off");
   return /* @__PURE__ */ jsxs(
-    Dialog3,
+    Dialog6,
     {
       open: isOpen,
       onClose: handleClose,
@@ -6918,7 +7830,7 @@ var BaseModalOTP = ({
       },
       children: [
         /* @__PURE__ */ jsx(DialogTitle3, { sx: { p: 0 }, children: /* @__PURE__ */ jsx(
-          IconButton6,
+          IconButton9,
           {
             onClick: handleClose,
             sx: {
@@ -6929,8 +7841,8 @@ var BaseModalOTP = ({
             children: /* @__PURE__ */ jsx(CloseIcon4, {})
           }
         ) }),
-        /* @__PURE__ */ jsx(DialogContent3, { sx: { p: 0 }, children: /* @__PURE__ */ jsxs(
-          Box17,
+        /* @__PURE__ */ jsx(DialogContent6, { sx: { p: 0 }, children: /* @__PURE__ */ jsxs(
+          Box22,
           {
             display: "flex",
             flexDirection: "column",
@@ -6961,7 +7873,7 @@ var BaseModalOTP = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(Box17, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx(Box22, { width: "100%", display: "flex", justifyContent: "center", children: /* @__PURE__ */ jsxs(
                 "form",
                 {
                   autoComplete: "off",
@@ -7048,6 +7960,6 @@ var BaseModalOTP = ({
   );
 };
 
-export { ArrowFrameOutlineDownIcon, ArrowFrameOutlineLeftIcon, ArrowFrameOutlineRightIcon, ArrowFrameOutlineUpIcon, ArrowLeft, ArrowRight, ArrowStandardDownIcon, ArrowStandardLeftIcon, ArrowStandardRightIcon, ArrowStandardUpIcon, ArrowStandardUpRightIcon, ArrowUpDown, AuctionHammerIcon, BaseAlert, BaseButton, BaseCard, BaseCheckbox, BaseDatatable, BaseDatePicker, BaseDropdown, BaseDropzone, BaseModal, BaseModalOTP, BaseModalStepper, BaseRadioButton, BaseStepper, BaseSwitch, BaseTextArea, BaseTextField, BaseTypography, CONTENT_SPACING_TOKENS, CalculatorIcon, CapsLockOn, CashIcon, CheckboxBorder, CheckboxChecked, ChecklistGreen, CircleCheck, CircleCross, CommentBuble, ContentSpacing, Dashboard, DerivedColor, DocumentNotFound, DownloadDocumentIcon, DownloadIconLarge, DownloadIconSmall, FileOutlineCustom, GenerateDocumentIcon, HandstopSign, HomeAssetIcon, IconAdd, IconBiometricScan, IconBrokenImage, IconCalendar, IconCardOrange, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconConfeti, IconCross, IconCrossLine, IconDeleteBin, IconDocument, IconDocumentAdd, IconDocumentAddOutline, IconDocumentSleve, IconDownloadOutline, IconDuplicate, IconEdit, IconExclamation, IconFile, IconFileOutline, IconFileSleve, IconFingerScan, IconGradingRounded, IconHomeOutlined, IconImage, IconInfo, IconInfoBgPutih, IconInfoHover, IconListDocument, IconModalClose, IconMoney, IconMoneyOne, IconMoneyTwo, IconNoData, IconPeople, IconPeopleGroup, IconPhone, IconPlus, IconProgress, IconRecycle, IconReset, IconSave, IconSaveOutlined, IconSearch, IconSendBlue, IconSendOrange, IconSendWhite, IconSendWhiteFull, IconShuffle, IconTrash, IconTrashOutline, IconUpload, IconUser, IconUserScan, IconVerification, IconWallet, IconWarningTriangle, LoaderIcon, LogoutIcon, MaximizeIcon, MinimizeIcon, MoneyIcon, NotFoundIcon, PersonIcon, PrimitiveColor, Radius, radius_default as RadiusToken, RefreshIcon, ReloadIcon, ServerSidePaginationActions, Shadow, shadow_default as ShadowToken, spacing_default as Spacing, SpacingToken, StepOnProgress, SuffleIcon, TargetDartIcon, TextFieldUpload, ThumbsUp, UploadIcon, UsersIcon, VariantStyles };
+export { ArrowFrameOutlineDownIcon, ArrowFrameOutlineLeftIcon, ArrowFrameOutlineRightIcon, ArrowFrameOutlineUpIcon, ArrowLeft, ArrowRight, ArrowStandardDownIcon, ArrowStandardLeftIcon, ArrowStandardRightIcon, ArrowStandardUpIcon, ArrowStandardUpRightIcon, ArrowUpDown, AuctionHammerIcon, BaseAlert, BaseButton, BaseCard, BaseCheckbox, BaseDatatable, BaseDatePicker, BaseDropdown, BaseDropzone, BaseModal, BaseModalAlert, BaseModalAlertDialog, BaseModalAlertProvider, BaseModalLoading, BaseModalLoadingDialog, BaseModalLoadingProvider, BaseModalOTP, BaseModalPopup, BaseModalStepper, BaseRadioButton, BaseSkeleton, BaseSnackbar, BaseStepper, BaseSwitch, BaseTextArea, BaseTextField, BaseTypography, CONTENT_SPACING_TOKENS, CalculatorIcon, CapsLockOn, CashIcon, CheckboxBorder, CheckboxChecked, ChecklistGreen, CircleCheck, CircleCross, CommentBuble, ContentSpacing, Dashboard, DerivedColor, DocumentNotFound, DownloadDocumentIcon, DownloadIconLarge, DownloadIconSmall, FileOutlineCustom, GenerateDocumentIcon, HandstopSign, HomeAssetIcon, IconAdd, IconBiometricScan, IconBrokenImage, IconCalendar, IconCardOrange, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconConfeti, IconCross, IconCrossLine, IconDeleteBin, IconDocument, IconDocumentAdd, IconDocumentAddOutline, IconDocumentSleve, IconDownloadOutline, IconDuplicate, IconEdit, IconExclamation, IconFile, IconFileOutline, IconFileSleve, IconFingerScan, IconGradingRounded, IconHomeOutlined, IconImage, IconInfo, IconInfoBgPutih, IconInfoHover, IconListDocument, IconModalClose, IconMoney, IconMoneyOne, IconMoneyTwo, IconNoData, IconPeople, IconPeopleGroup, IconPhone, IconPlus, IconProgress, IconRecycle, IconReset, IconSave, IconSaveOutlined, IconSearch, IconSendBlue, IconSendOrange, IconSendWhite, IconSendWhiteFull, IconShuffle, IconTrash, IconTrashOutline, IconUpload, IconUser, IconUserScan, IconVerification, IconWallet, IconWarningTriangle, LoaderIcon, LogoutIcon, MaximizeIcon, MinimizeIcon, MoneyIcon, NotFoundIcon, PersonIcon, PrimitiveColor, Radius, radius_default as RadiusToken, RefreshIcon, ReloadIcon, ServerSidePaginationActions, Shadow, shadow_default as ShadowToken, spacing_default as Spacing, SpacingToken, StepOnProgress, SuffleIcon, TargetDartIcon, TextFieldUpload, ThumbsUp, UploadIcon, UsersIcon, VariantStyles };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map