spotlibs-components 0.1.14 → 0.1.17

package/dist/index.d.mts

@@ -1,282 +1,66 @@
+export { A as AnalisisRisikoKreditNasabahIcon, a as AppendixIcon, B as BgBuilding, b as BgPerson, C as ChecklistDokumenPaketKreditIcon, c as CreditRiskRatingIcon, D as DefaultAvatarIcon, d as DefaultImageIcon, e as DokumenPenjagaanIcon, F as FilePdfIcon, I as InformasiKursIcon, f as InformasiNasabahIcon, M as MatriksRiskDanMitigationIcon, N as NotulenRapatPraKomiteIcon, O as OfferingLetterIcon, P as PengajuanDanFasilitasKreditIcon, g as ProfitabilitasDanHubunganNasabahIcon, R as RekeningEscrowIcon, h as RekeningOprasionalIcon, i as RekeningTujuanIcon, j as RekomendasiPutusanIcon, k as RingkasanEksekutifIcon } from './rekening-tujuan-icon-BfSXbixN.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-export { AnalisisRisikoKreditNasabahIcon, AppendixIcon, BgBuilding, BgPerson, ChecklistDokumenPaketKreditIcon, CreditRiskRatingIcon, DefaultAvatarIcon, DefaultImageIcon, DokumenPenjagaanIcon, EmptyDataIcon, ErrorHero, FilePdfIcon, IconFileCSV, IconFileDocx, IconFileDrive, IconFileJPG, IconFilePDF, IconFileXls, IconOnProcess, InformasiKursIcon, InformasiNasabahIcon, InformationIcon, MatriksRiskDanMitigationIcon, NoInternetIcon as NoInternetConnectionIcon, NotulenRapatPraKomiteIcon, OfferingLetterIcon, PengajuanDanFasilitasKreditIcon, ProfitabilitasDanHubunganNasabahIcon, RekeningEscrowIcon, RekeningOprasionalIcon, RekeningTujuanIcon, RekomendasiPutusanIcon, RingkasanEksekutifIcon, SentSuccessfullyHero, SuccessHero, ThumbOnProgress, ThumbSendFailed, Thumblock, WarningHero, WarningOutlineHero } from './atoms/icons/index.mjs';
-export { B as BaseAlert, a as BaseButton, b as BaseCard, c as BaseCheckbox, d as BaseDatatable, e as BaseDatePicker, f as BaseDropdown, g as BaseDropzone, h as BaseModal, i as BaseModalAlert, j as BaseModalAlertDialog, k as BaseModalAlertProvider, l as BaseModalLoading, m as BaseModalLoadingDialog, n as BaseModalLoadingProvider, o as BaseModalOTP, p as BaseModalPopup, q as BaseModalStepper, r as BaseRadioButton, s as BaseSkeleton, t as BaseSnackbar, u as BaseStepper, v as BaseSwitch, w as BaseTextArea, x as BaseTextField, y as BaseTypography, C as CONTENT_SPACING_TOKENS, z as ContentSpacing, D as DerivedColor, P as PrimitiveColor, R as Radius, A as RadiusToken, S as Shadow, E as ShadowToken, F as Spacing, G as SpacingToken, T as TextFieldUpload, V as VariantStyles } from './types-BtwscYRX.mjs';
-import '@tabler/icons-react';
-import 'react';
-import '@mui/material/styles';
-import 'react-hook-form';
-
-declare function ArrowLeft({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconAdd({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowRight(color: any): react_jsx_runtime.JSX.Element;
-
-declare function AuctionHammerIcon({ color, outline }: {
-    color: any;
-    outline: any;
-}): react_jsx_runtime.JSX.Element;
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+import { Control, RegisterOptions, UseFormReturn } from 'react-hook-form';
+export { AppHeader, AppSidebar, Backdrop, LayoutShell, SidebarProvider, parseAccessMenu, useSidebar } from './layout/index.mjs';
 
 declare function IconBiometricScan({ color }: {
     color: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconBrokenImage({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CalculatorIcon(color: any): react_jsx_runtime.JSX.Element;
-
-declare function IconCalendar({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function CapsLockOn({ color }: {
     color: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconCardOrange({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CashIcon({ color, outline }: {
-    color: any;
-    outline: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CheckboxBorder({ disabled, color, size, }: {
-    disabled: any;
-    color: any;
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CheckboxChecked({ disabled, color, size, }: {
-    disabled: any;
-    color: any;
-    size?: number;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ChecklistGreen(): react_jsx_runtime.JSX.Element;
-
-declare function IconChevronLeft({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconChevronRight({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CircleCheck({ color, width, height, }: {
-    color?: string;
-    width?: string;
-    height?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CircleCross({ color, width, height, }: {
-    color?: string;
-    width?: string;
-    height?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function CommentBuble(): react_jsx_runtime.JSX.Element;
-
-declare function IconConfeti({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconCrossLine({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconCross({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function Dashboard(color: any): react_jsx_runtime.JSX.Element;
-
-declare function IconDeleteBin({ color, isSmall }: {
-    color: any;
-    isSmall: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconDocumentAddOutline({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function IconDocumentAdd({ color }: {
     color: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function DocumentNotFound(): react_jsx_runtime.JSX.Element;
-
-declare function IconDocumentSleve({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconDocument({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function DownloadDocumentIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function DownloadIconSmall(color: any): react_jsx_runtime.JSX.Element;
-
-declare function IconDownloadOutline({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function DownloadIconLarge({ color, width, height, }: {
     color?: string;
     width?: string;
     height?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconDuplicate({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function IconEdit({ color, isSmall }: {
     color: any;
     isSmall: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconExclamation({ size, color, }: {
-    size?: number;
-    color?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function FileOutlineCustom(props: any): react_jsx_runtime.JSX.Element;
-
-declare function IconFileOutline({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconFileSleve({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function IconFile({ color }: {
     color: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconFingerScan({ color, isBordered }: {
-    color: any;
-    isBordered?: boolean;
-}): react_jsx_runtime.JSX.Element;
-
-declare function GenerateDocumentIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function IconGradingRounded({ color, width, height }: {
     color: any;
     width: any;
     height: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function HandstopSign({ color, width, height, }: {
-    color?: string;
-    width?: string;
-    height?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function HomeAssetIcon({ color, outline }: {
-    color: any;
-    outline: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconHomeOutlined(): react_jsx_runtime.JSX.Element;
-
-declare function IconImage({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconInfoBgPutih({ isSmall }: {
-    isSmall: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconInfoHover(color: any): react_jsx_runtime.JSX.Element;
-
-declare function IconInfo({ color, isSmall }: {
-    color: any;
-    isSmall: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function IconListDocument({ color }: {
     color: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconModalClose({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function MoneyIcon({ color, width, height }: {
     color: any;
     width: any;
     height: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconMoneyOne({ width, height }: {
-    width: any;
-    height: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconMoneyTwo({ width, height }: {
-    width: any;
-    height: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function IconMoney({ color, width, height }: {
     color: any;
     width: any;
     height: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconNoData({ width, height }: {
-    width: any;
-    height: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function NotFoundIcon({ width, height }: {
-    width: any;
-    height: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconPeopleGroup(): react_jsx_runtime.JSX.Element;
-
-declare function IconPeople(): react_jsx_runtime.JSX.Element;
-
-declare function PersonIcon({ color, outline }: {
-    color: any;
-    outline: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconPhone({ color, width, height }: {
-    color: any;
-    width: any;
-    height: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconPlus({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function IconProgress({ width, height, color }: {
     width: any;
     height: any;
     color: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconRecycle({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function IconReset({ color }: {
     color: any;
 }): react_jsx_runtime.JSX.Element;
@@ -291,47 +75,10 @@ declare function IconSave({ color, width, height }: {
     height?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconSearch({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconSendBlue(): react_jsx_runtime.JSX.Element;
-
-declare function IconSendOrange(): react_jsx_runtime.JSX.Element;
-
 declare function IconSendWhiteFull(color: any): react_jsx_runtime.JSX.Element;
 
 declare function IconSendWhite(color: any): react_jsx_runtime.JSX.Element;
 
-declare function IconShuffle({ width, height, color, }: {
-    width?: string;
-    height?: string;
-    color?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function StepOnProgress(): react_jsx_runtime.JSX.Element;
-
-declare function TargetDartIcon({ color, outline }: {
-    color: any;
-    outline: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ThumbsUp({ color, width, height, }: {
-    color?: string;
-    width?: string;
-    height?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconTrashOutline({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconTrash({ color, width, height }: {
-    color: any;
-    width?: string;
-    height?: string;
-}): react_jsx_runtime.JSX.Element;
-
 declare function IconUpload({ color }: {
     color: any;
 }): react_jsx_runtime.JSX.Element;
@@ -340,110 +87,1403 @@ declare function IconUserScan({ color }: {
     color: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconUser({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
 declare function UsersIcon(): react_jsx_runtime.JSX.Element;
 
 declare function IconVerification({ color }: {
     color: any;
 }): react_jsx_runtime.JSX.Element;
 
-declare function IconWallet({ width, height, color }: {
-    width: any;
-    height: any;
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconWarningTriangle({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function LoaderIcon({ color, width, height, }: {
-    color?: string;
-    width?: string;
-    height?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function UploadIcon({ color, width, height, }: {
-    color?: string;
-    width?: string;
-    height?: string;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowUpDown({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function MaximizeIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function MinimizeIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function SuffleIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function RefreshIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ReloadIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function LogoutIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconChevronDown({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function IconChevronUp({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowStandardDownIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowStandardLeftIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowStandardRightIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowStandardUpRightIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowStandardUpIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowFrameOutlineUpIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowFrameOutlineRightIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowFrameOutlineDownIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
-
-declare function ArrowFrameOutlineLeftIcon({ color }: {
-    color: any;
-}): react_jsx_runtime.JSX.Element;
+interface BaseAlertProps {
+  /** Alert color variant */
+  variant?: "default" | "error" | "info" | "success" | "warning";
+  /** MUI Alert variant type */
+  type?: "standard" | "filled" | "outlined";
+  /** Alert title */
+  title?: string;
+  /** Alert content */
+  children?: React.ReactNode;
+  /** Icon element or component. If not provided, no icon is shown. */
+  icon?: React.ReactNode | React.ComponentType<any>;
+  /** Custom background color override */
+  color?: string;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  /** Close handler. If provided, close button is shown. */
+  onClose?: () => void;
+  /** sx overrides for children wrapper */
+  childrenSx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseAlert(props: BaseAlertProps): React.ReactElement;
+
+interface PrimitiveColorType {
+  color_overlay: string;
+
+  color_neutral_900: string;
+  color_neutral_700: string;
+  color_neutral_600: string;
+  color_neutral_500: string;
+  color_neutral_400: string;
+  color_neutral_300: string;
+  color_neutral_200: string;
+  color_neutral_100: string;
+  color_neutral_50: string;
+
+  color_blue_cakrawala_900: string;
+  color_blue_cakrawala_800: string;
+  color_blue_cakrawala_700: string;
+  color_blue_cakrawala_600: string;
+  color_blue_cakrawala_500: string;
+  color_blue_cakrawala_400: string;
+  color_blue_cakrawala_300: string;
+  color_blue_cakrawala_200: string;
+  color_blue_cakrawala_100: string;
+
+  color_blue_mentari_900: string;
+  color_blue_mentari_700: string;
+  color_blue_mentari_600: string;
+  color_blue_mentari_500: string;
+  color_blue_mentari_400: string;
+  color_blue_mentari_300: string;
+  color_blue_mentari_100: string;
+
+  color_blue_neon_900: string;
+  color_blue_neon_700: string;
+  color_blue_neon_600: string;
+  color_blue_neon_500: string;
+  color_blue_neon_400: string;
+  color_blue_neon_300: string;
+  color_blue_neon_100: string;
+
+  color_blue_sky_900: string;
+  color_blue_sky_700: string;
+  color_blue_sky_600: string;
+  color_blue_sky_500: string;
+  color_blue_sky_400: string;
+  color_blue_sky_300: string;
+  color_blue_sky_100: string;
+
+  color_green_900: string;
+  color_green_700: string;
+  color_green_600: string;
+  color_green_500: string;
+  color_green_400: string;
+  color_green_300: string;
+  color_green_100: string;
+
+  color_red_900: string;
+  color_red_700: string;
+  color_red_600: string;
+  color_red_500: string;
+  color_red_400: string;
+  color_red_300: string;
+  color_red_100: string;
+
+  color_yellow_900: string;
+  color_yellow_700: string;
+  color_yellow_600: string;
+  color_yellow_500: string;
+  color_yellow_400: string;
+  color_yellow_300: string;
+  color_yellow_100: string;
+
+  color_briva_900: string;
+  color_briva_700: string;
+  color_briva_600: string;
+  color_briva_500: string;
+  color_briva_400: string;
+  color_briva_300: string;
+  color_briva_100: string;
+
+  color_brizzi_900: string;
+  color_brizzi_700: string;
+  color_brizzi_600: string;
+  color_brizzi_500: string;
+  color_brizzi_400: string;
+  color_brizzi_300: string;
+  color_brizzi_100: string;
+
+  [key: string]: string;
+}
+
+declare const PrimitiveColor: PrimitiveColorType;
+
+interface DerivedColorType {
+  /* Background */
+  color_bg_page: string;
+  color_bg_surface: string;
+  color_bg_inverse: string;
+  color_bg_disabled: string;
+
+  color_bg_brand_primary_strong: string;
+  color_bg_brand_primary: string;
+  color_bg_brand_primary_subtle: string;
+  color_bg_brand_secondary_strong: string;
+  color_bg_brand_secondary: string;
+  color_bg_brand_secondary_subtle: string;
+
+  color_bg_success_strong: string;
+  color_bg_success: string;
+  color_bg_success_subtle: string;
+
+  color_bg_danger_strong: string;
+  color_bg_danger: string;
+  color_bg_danger_subtle: string;
+
+  color_bg_warning_strong: string;
+  color_bg_warning: string;
+  color_bg_warning_subtle: string;
+
+  /* Border */
+  color_border_default: string;
+  color_border_strong: string;
+  color_border_inverse: string;
+  color_border_brand_primary: string;
+  color_border_brand_secondary: string;
+  color_border_success: string;
+  color_border_danger: string;
+  color_border_warning: string;
+
+  /* Text */
+  color_text_default: string;
+  color_text_subtle: string;
+  color_text_disabled: string;
+  color_text_placeholder: string;
+  color_text_inverse: string;
+  color_text_brand_primary: string;
+  color_text_brand_secondary: string;
+  color_text_success: string;
+  color_text_danger: string;
+  color_text_warning: string;
+
+  /* Icon */
+  color_icon_subtle: string;
+  color_icon_strong: string;
+  color_icon_disabled: string;
+  color_icon_inverse: string;
+  color_icon_brand_primary: string;
+  color_icon_brand_secondary: string;
+  color_icon_success: string;
+  color_icon_danger: string;
+  color_icon_warning: string;
+}
+
+declare const DerivedColor: DerivedColorType;
+
+type TypographyVariant =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "header1_regular"
+  | "header1_semibold"
+  | "header1_bold"
+  | "header2_regular"
+  | "header2_semibold"
+  | "header2_bold"
+  | "body1_regular"
+  | "body1_semibold"
+  | "body2_regular"
+  | "body2_semibold"
+  | "caption_regular";
+
+type TypographyColor =
+  | "default"
+  | "subtle"
+  | "disabled"
+  | "placeholder"
+  | "inverse"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "warning";
+
+interface VariantStyleEntry {
+  fontSize: string;
+  fontWeight: number;
+}
+
+declare const VariantStyles: Record<TypographyVariant, VariantStyleEntry>;
+
+interface TypographyProps {
+  /** Format: "variant.color" e.g. "body1_regular.default" */
+  variant?: `${TypographyVariant}.${TypographyColor}` | TypographyVariant;
+  /** Content */
+  children?: React.ReactNode;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseTypography(props: TypographyProps): React.ReactElement | null;
+
+declare const SpacingToken: {
+  spacing0: string;
+  spacing1: string;
+  spacing2: string;
+  spacing3: string;
+  spacing4: string;
+  spacing5: string;
+  spacing6: string;
+  spacing7: string;
+  spacing8: string;
+  spacing9: string;
+  spacing10: string;
+};
+
+declare const CONTENT_SPACING_TOKENS: {
+  spacing_1: {
+    mobile: string;
+    tablet: string;
+    web: string;
+  };
+  spacing_2: {
+    mobile: string;
+    tablet: string;
+    web: string;
+  };
+  spacing_3: {
+    mobile: string;
+    tablet: string;
+    web: string;
+  };
+};
+
+interface ResponsiveSpacingValue {
+  mobile?: string;
+  tablet?: string;
+  web?: string;
+  [key: string]: string | undefined;
+}
+
+type SpacingSizeValue = keyof typeof SpacingToken | string | number;
+
+type ContentSpacingSizeValue =
+  | keyof typeof CONTENT_SPACING_TOKENS
+  | ResponsiveSpacingValue;
+
+interface SpacingProps {
+  size?: SpacingSizeValue;
+  axis?: "vertical" | "horizontal";
+  as?: React.ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}
+
+interface ContentSpacingProps {
+  size?: ContentSpacingSizeValue;
+  breakpoint?: "mobile" | "tablet" | "web";
+  as?: React.ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}
+
+declare const Spacing: React.FC<SpacingProps>;
+
+declare const ContentSpacing: React.FC<ContentSpacingProps>;
+
+interface ShadowElevation {
+  shadow: string;
+  surface: string;
+}
+
+interface ShadowMap {
+  elevation_0: ShadowElevation;
+  elevation_1: ShadowElevation;
+  elevation_2: ShadowElevation;
+  elevation_3: ShadowElevation;
+  elevation_4: ShadowElevation;
+}
+
+declare const Shadow: ShadowMap;
+
+type ShadowLevel = keyof ShadowMap;
+
+interface ShadowTokenProps {
+  /** Elevation level */
+  level?: ShadowLevel;
+  /** Content */
+  children?: React.ReactNode;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function ShadowToken(props: ShadowTokenProps): React.ReactElement;
+
+interface RadiusMap {
+  radius_0: string;
+  radius_1: string;
+  radius_2: string;
+  radius_3: string;
+  radius_4: string;
+  radius_x: string;
+}
+
+declare const Radius: RadiusMap;
+
+type RadiusLevel = keyof RadiusMap;
+
+interface RadiusTokenProps {
+  /** Radius level */
+  radius?: RadiusLevel;
+  /** Content */
+  children?: React.ReactNode;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function RadiusToken(props: RadiusTokenProps): React.ReactElement;
+
+interface BaseButtonProps {
+  /** Click handler */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Button content */
+  children?: React.ReactNode;
+  /** Visual style variant */
+  variant?: "fill" | "outline" | "text" | "fab" | "ellipse-fill" | "ellipse-outline";
+  /** Semantic color preset */
+  color?: "primary" | "secondary" | "success" | "warning" | "danger";
+  /** Custom color key from PrimitiveColor. Overrides `color` prop when set. */
+  customColor?: keyof typeof PrimitiveColor | null;
+  /** Button size */
+  size?: "large" | "small";
+  /** Disabled state */
+  disabled?: boolean;
+  /** Icon element rendered before children */
+  startIcon?: React.ReactNode;
+  /** Icon element rendered after children */
+  endIcon?: React.ReactNode;
+  /** Button width */
+  width?: string;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseButton(props: BaseButtonProps): React.ReactElement;
+
+interface BaseSkeletonProps {
+  /**
+   * Skeleton shape variant.
+   * - `text` — single line of text placeholder
+   * - `rectangular` — rectangle block placeholder
+   * - `rounded` — rectangle with border-radius
+   * - `circular` — circle placeholder (avatar, icon)
+   */
+  variant?: "text" | "rectangular" | "rounded" | "circular";
+  /**
+   * Animation type.
+   * - `pulse` — fading animation (default)
+   * - `wave` — wave sweep animation
+   * - `none` — no animation (static)
+   */
+  animation?: "pulse" | "wave" | "none";
+  /** Width of the skeleton. Accepts number (px) or string (e.g. "100%", "200px") */
+  width?: number | string;
+  /** Height of the skeleton. Accepts number (px) or string (e.g. "40px", "1.2em") */
+  height?: number | string;
+  /** Number of skeleton lines to render. If > 1, renders stacked skeletons. */
+  count?: number;
+  /** Gap between stacked skeletons when count > 1. Default is SpacingToken.spacing2 */
+  gap?: string | number;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseSkeleton(props: BaseSkeletonProps): React.ReactElement;
+
+interface BaseSwitchProps {
+  /** Current switch state */
+  status?: boolean;
+  /** Label text or element */
+  label?: React.ReactNode;
+  /** Label position relative to the switch */
+  labelPlacement?: "start" | "end" | "top" | "bottom";
+  /** Disabled state */
+  isDisabled?: boolean;
+  /** Change handler */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+declare function BaseSwitch(props: BaseSwitchProps): React.ReactElement;
+
+interface BaseChipProps {
+  /** Chip label text */
+  label?: string;
+  /** Semantic type for preset colors */
+  type?: "default" | "success" | "danger" | "warning" | "info";
+  /** Chip visual variant */
+  variant?: "filled" | "outlined";
+  /** Icon before label */
+  startIcon?: React.ReactNode;
+  /** Delete handler — shows delete icon when provided */
+  onDelete?: () => void;
+  /** Click handler */
+  onClick?: () => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Full width mode — chip takes 100% width of parent */
+  fullWidth?: boolean;
+  /** Show/hide the type icon (default: true). When false, no icon is displayed unless startIcon is used */
+  showIcon?: boolean;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseChip(props: BaseChipProps): React.ReactElement;
+
+interface BaseCardProps {
+  /** 
+   * Card variant type. Supports typography suffix: "with-header.header1_bold"
+   * Default typography: header1_semibold
+   * Examples: "default", "with-header", "with-header.header1_bold", "with-header-footer.body1_regular"
+   */
+  variant?: "default" | "with-header" | "with-header-footer" | (string & {});
+  /** Card body content */
+  children?: React.ReactNode;
+  /** Header background color preset */
+  color?: "primary" | "secondary" | "success" | "warning" | "danger" | "clean";
+  /** Header title text */
+  title?: string;
+  /** Header subtitle text */
+  subtitle?: string;
+  /** Typography variant for subtitle (e.g. "body2_regular.subtle"). Overrides boldSubtitle/fontSize when set. */
+  subtitleVariant?: string;
+  /** Bold the title */
+  boldTitle?: boolean;
+  /** Bold the subtitle */
+  boldSubtitle?: boolean;
+  /** Show/hide subtitle */
+  showSubtitle?: boolean;
+  /** Enable collapse/expand on header click */
+  isCollapsible?: boolean;
+  /** Icon element before title in header */
+  startIcon?: React.ReactNode;
+  /** Icon element after title in header */
+  endIcon?: React.ReactNode;
+  /** Show/hide startIcon */
+  showStartIcon?: boolean;
+  /** Show/hide endIcon */
+  showEndIcon?: boolean;
+  /** Footer content (only for with-header-footer variant) */
+  footer?: React.ReactNode;
+  /** Enable watermark overlay on content area */
+  isWatermark?: boolean;
+  /** Watermark text (e.g. "12345678 / Brispot Web") */
+  watermarkText?: string;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseCard(props: BaseCardProps): React.ReactElement;
+
+interface BaseSnackbarPosition {
+  vertical: "top" | "bottom";
+  horizontal: "left" | "center" | "right";
+}
+
+interface BaseSnackbarProps {
+  /** Whether the snackbar is open */
+  open?: boolean;
+  /** Close handler */
+  onClose?: (event?: React.SyntheticEvent | Event, reason?: string) => void;
+  /** Snackbar message content */
+  message?: string;
+  /** Color variant */
+  variant?: "success" | "error" | "info" | "warning" | "default";
+  /** Auto hide duration in milliseconds */
+  duration?: number;
+  /** Anchor origin position */
+  position?: BaseSnackbarPosition;
+  /** Icon element or component. If not provided, no icon is shown. */
+  icon?: React.ReactNode | React.ComponentType<any>;
+  /** MUI sx overrides */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseSnackbar(props: BaseSnackbarProps): React.ReactElement;
+
+interface BaseCheckboxOption {
+  /** Label yang ditampilkan */
+  label: React.ReactNode;
+  /** Nilai opsi */
+  value: string;
+  /** Nonaktifkan opsi ini */
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+interface BaseCheckboxSharedProps {
+  /** Daftar opsi checkbox (untuk mode group) */
+  options: BaseCheckboxOption[];
+  /** Label untuk mode single checkbox */
+  label?: React.ReactNode;
+  /** Nonaktifkan semua checkbox */
+  disabled?: boolean;
+  /** Posisi label relatif terhadap checkbox */
+  labelPlacement?: "top" | "bottom" | "start" | "end";
+  /** Tampilkan checkbox secara horizontal */
+  isHorizontal?: boolean;
+  /** Custom styles via MUI sx prop */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+interface BaseCheckboxSingleProps extends Omit<BaseCheckboxSharedProps, "options"> {
+  options?: undefined;
+  /** Nilai checked untuk single checkbox */
+  checked?: boolean;
+  /** Callback ketika nilai berubah (single mode) */
+  onChange?: (checked: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+interface BaseCheckboxGroupProps extends BaseCheckboxSharedProps {
+  options: BaseCheckboxOption[];
+  /** Array nilai yang dipilih (group mode) */
+  checked?: string[];
+  /** Callback ketika nilai berubah (group mode) */
+  onChange?: (newValue: string[]) => void;
+}
+
+type BaseCheckboxProps =
+  | BaseCheckboxSingleProps
+  | BaseCheckboxGroupProps;
+
+declare function BaseCheckbox(
+  props: BaseCheckboxProps,
+): React.ReactElement | null;
+
+type BaseDatatableAlign =
+  | "left"
+  | "center"
+  | "right"
+  | "justify"
+  | "inherit"
+  | (string & {});
+
+interface BaseDatatableColumn<T = Record<string, any>> {
+  id?: string;
+  key?: string;
+  field?: string;
+  sortField?: string;
+  label?: ReactNode;
+  header?: ReactNode;
+  accessorKey?: string;
+  accessorFn?: (row: T) => any;
+  align?: BaseDatatableAlign;
+  headerAlign?: BaseDatatableAlign;
+  width?: number;
+  minWidth?: number;
+  sticky?: "left" | "right";
+  sortable?: boolean;
+  noWrap?: boolean;
+  cellBg?: string;
+  cellText?: string;
+  cellSx?: SxProps;
+  renderCell?: (context: {
+    value: any;
+    row: T;
+    rowIndex: number;
+    column: BaseDatatableColumn<T>;
+    columnIndex: number;
+    checked?: boolean;
+  }) => ReactNode;
+}
+
+interface BaseDatatableHeaderCell {
+  id?: string;
+  key?: string;
+  label: ReactNode;
+  align?: BaseDatatableAlign;
+  colSpan?: number;
+  rowSpan?: number;
+  colspan?: number;
+  rowspan?: number;
+  sortKey?: string;
+  width?: number;
+  minWidth?: number;
+  sticky?: "left" | "right";
+  sx?: SxProps;
+}
+
+interface BaseDatatableFeatures {
+  sorting?: boolean;
+  sortingMode?: "client" | "server";
+  defaultSort?: BaseDatatableSortState | null;
+  sortState?: BaseDatatableSortState | null;
+  resetPageOnSort?: boolean;
+  onSortChange?: (
+    payload: BaseDatatableSortPayload,
+    column: BaseDatatableColumn,
+    cell: BaseDatatableHeaderCell,
+  ) => void;
+  headerInteractive?: boolean;
+}
+
+interface BaseDatatableSortState {
+  key: string;
+  direction: "asc" | "desc";
+}
+
+interface BaseDatatableSortPayload {
+  orderBy: string;
+  order: "asc" | "desc";
+  page: number;
+  rowsPerPage: number;
+}
+
+interface BaseDatatableLayout {
+  stickyHeader?: boolean;
+  stickyOffset?: number;
+  freezeLeft?: number;
+  freezeRight?: number;
+  maxHeight?: number;
+}
+
+interface BaseDatatableSelection<T = Record<string, any>> {
+  enabled?: boolean;
+  position?: "left" | "right";
+  selectRowOnClick?: boolean;
+  selectedRowIds?: Array<string | number>;
+  defaultSelectedRowIds?: Array<string | number>;
+  onChange?: (selectedRowIds: Array<string | number>) => void;
+  isRowSelectable?: (row: T, rowIndex: number) => boolean;
+}
+
+interface BaseDatatablePagination {
+  enabled?: boolean;
+  serverSide?: boolean;
+  /** Pagination variant. "default" uses MUI TablePagination (serverside arrows), "numbered" uses custom page buttons from Figma. Default: "default" */
+  variant?: "default" | "numbered";
+  /** (numbered only) Show total count "dari 100 data" after the range. Default: false. "Menampilkan 1-10" always shows. */
+  showTotalCount?: boolean;
+  count?: number;
+  page?: number;
+  rowsPerPage?: number;
+  rowsPerPageOptions?: number[];
+  labelRowsPerPage?: ReactNode;
+  onPageChange?: (event: unknown, nextPage: number) => void;
+  onRowsPerPageChange?: (event: unknown, nextRowsPerPage: number) => void;
+}
+
+interface BaseDatatableCellOverrides {
+  rowSpan?: number;
+  colSpan?: number;
+  content?: ReactNode;
+  sx?: SxProps;
+}
+
+interface BaseDatatableRenderRowContext<T = Record<string, any>> {
+  row: T;
+  rowIndex: number;
+  rowId: string | number;
+  rowActive: boolean;
+  columns: BaseDatatableColumn<T>[];
+  dataColumns: BaseDatatableColumn<T>[];
+  selectedRowIds: Array<string | number>;
+  renderCell: (
+    column: BaseDatatableColumn<T>,
+    row: T,
+    rowIndex: number,
+    columnIndex: number,
+    rowId: string | number,
+    rowActive: boolean,
+    cellOverrides?: BaseDatatableCellOverrides,
+  ) => ReactNode;
+}
+
+interface BaseDatatableProps<T = Record<string, any>> {
+  columns?: Array<BaseDatatableColumn<T> | string>;
+  data?: T[];
+  header?: BaseDatatableHeaderCell[][];
+  features?: BaseDatatableFeatures;
+  layout?: BaseDatatableLayout;
+  selection?: BaseDatatableSelection<T>;
+  pagination?: BaseDatatablePagination;
+  renderRow?: (context: BaseDatatableRenderRowContext<T>) => ReactNode;
+  onRowClick?: (row: T, rowIndex: number) => void;
+  getRowId?: (row: T, rowIndex: number) => string | number;
+  emptyState?: ReactNode;
+  loading?: boolean;
+  loadingText?: ReactNode;
+  rowHover?: boolean;
+  activeRowId?: string | number | null;
+  containerSx?: SxProps;
+  tableSx?: SxProps;
+}
+
+declare function BaseDatatable<T = Record<string, any>>(
+  props: BaseDatatableProps<T>,
+): ReactNode;
 
 declare function ServerSidePaginationActions(props: any): react_jsx_runtime.JSX.Element;
 
-export { ArrowFrameOutlineDownIcon, ArrowFrameOutlineLeftIcon, ArrowFrameOutlineRightIcon, ArrowFrameOutlineUpIcon, ArrowLeft, ArrowRight, ArrowStandardDownIcon, ArrowStandardLeftIcon, ArrowStandardRightIcon, ArrowStandardUpIcon, ArrowStandardUpRightIcon, ArrowUpDown, AuctionHammerIcon, CalculatorIcon, CapsLockOn, CashIcon, CheckboxBorder, CheckboxChecked, ChecklistGreen, CircleCheck, CircleCross, CommentBuble, Dashboard, 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, RefreshIcon, ReloadIcon, ServerSidePaginationActions, StepOnProgress, SuffleIcon, TargetDartIcon, ThumbsUp, UploadIcon, UsersIcon };
+declare function DatatablePagination({ variant, showTotalCount, page, rowsPerPage, count, onPageChange, onRowsPerPageChange, rowsPerPageOptions, labelRowsPerPage, serverSide, currentPageDataLength, }: {
+    variant?: string;
+    showTotalCount?: boolean;
+    page?: number;
+    rowsPerPage?: number;
+    count?: number;
+    onPageChange: any;
+    onRowsPerPageChange: any;
+    rowsPerPageOptions?: number[];
+    labelRowsPerPage: any;
+    serverSide?: boolean;
+    currentPageDataLength?: number;
+}): react_jsx_runtime.JSX.Element;
+
+interface BaseDatePickerProps {
+  /** Picker mode */
+  type?: "single" | "day" | "datetime" | "range" | "month" | "year" | "time";
+  /** Field name for React Hook Form */
+  name: string;
+  /** Control object from react-hook-form */
+  control: any;
+  /** Default selected value */
+  defaultValue?: any;
+  /** Label title above input */
+  title?: string;
+  /** Optional subtitle */
+  subtitle?: string;
+  /** Input placeholder text */
+  placeholder?: string;
+  /** Minimum selectable date */
+  minDate?: Date | string;
+  /** Maximum selectable date */
+  maxDate?: Date | string;
+  /** Disable picker interaction */
+  isDisabled?: boolean;
+  /** Allow user to clear selected value */
+  clearable?: boolean;
+  /** Allow manual input editing (range only) */
+  editableDateInputs?: boolean;
+  /** Display format for value */
+  format?: string;
+  /** How the calendar popup is triggered */
+  openBy?: "field" | "icon" | "both";
+  /** MUI sx overrides for the wrapper */
+  sx?: SxProps;
+  /** Custom onChange handler */
+  onChange?: (value: any) => void;
+  [key: string]: any;
+}
+
+declare function BaseDatePicker(
+  props: BaseDatePickerProps,
+): React.ReactElement | null;
+
+interface DropdownOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  [key: string]: any;
+}
+
+interface BaseDropdownProps {
+  /** Field name for react-hook-form */
+  name: string;
+  /** Control object from react-hook-form */
+  control: any;
+  /** Static options list */
+  options?: DropdownOption[];
+  /** Async options loader function */
+  loadOptions?: (inputValue: string) => Promise<DropdownOption[]>;
+  /** Enable multi select mode */
+  isMulti?: boolean;
+  /** Enable search input */
+  isSearchable?: boolean;
+  /** Show selected values as chips (multi only) */
+  showChip?: boolean;
+  /** Show Select All checkbox (multi only) */
+  showSelectAll?: boolean;
+  /** Label title */
+  title?: string;
+  /** Subtitle text */
+  subtitle?: string;
+  /** Default selected value */
+  defaultValue?: any;
+  /** Disable dropdown */
+  isDisabled?: boolean;
+  /** Allow clearing value */
+  isClearable?: boolean;
+  /** Limit max height with scroll */
+  preventOverflow?: boolean;
+  /** Colors for multi-value tags */
+  optionColors?: string[];
+  /** Dropdown variant */
+  variant?: "select" | "checkbox";
+  /** MUI sx overrides for wrapper */
+  sx?: SxProps;
+  /** Custom onChange handler */
+  onChange?: (value: any) => void;
+  [key: string]: any;
+}
+
+declare function BaseDropdown(
+  props: BaseDropdownProps,
+): React.ReactElement;
+
+interface BaseDropzoneSettings {
+  /** Ekstensi file yang diizinkan (format react-dropzone accept) */
+  allowedExtensions?: Record<string, string[]>;
+  /** Ukuran maksimal file dalam MB */
+  maxSize?: number;
+  /** Jumlah maksimal file yang dapat diupload */
+  maxFiles?: number;
+  /** Tampilkan preview gambar */
+  isImagePreview?: boolean;
+  /** Tipe tampilan preview */
+  previewType?: "grid" | "list";
+}
+
+interface BaseDropzoneLabels {
+  /** Label judul di atas dropzone */
+  title?: React.ReactNode;
+  /** Teks utama di dalam area dropzone */
+  dropzoneTitle?: string;
+  /** Label pada tombol pilih file */
+  titleButton?: string;
+  /** Teks keterangan format file yang diizinkan */
+  allowedFileLabel?: string;
+}
+
+interface BaseDropzoneCallbacks {
+  /** Callback ketika file berhasil diupload */
+  uploadFile?: (files: Array<{ source: string; originName: string; type: string; size: number }>) => void;
+  /** Callback ketika file dihapus */
+  removeFile?: (fileName: string) => void;
+  /** Pesan error kustom dari luar komponen */
+  customError?: string | null;
+}
+
+interface BaseDropzoneProps {
+  /** Upload otomatis setelah file dipilih */
+  autoUpload?: boolean;
+  /** Pengaturan dropzone */
+  settings?: BaseDropzoneSettings;
+  /** Label-label yang ditampilkan */
+  labels?: BaseDropzoneLabels;
+  /** Callback functions */
+  callbacks?: BaseDropzoneCallbacks;
+}
+
+declare function BaseDropzone(
+  props: BaseDropzoneProps,
+): React.ReactElement;
+
+interface BaseRadioOption {
+  label: React.ReactNode;
+  value: any;
+  isDisabled?: boolean;
+  [key: string]: any;
+}
+
+interface BaseRadioButtonProps {
+  /** Nama field untuk react-hook-form */
+  name?: string;
+  /** Control dari useForm() */
+  control?: any;
+  /** Nilai awal yang dipilih */
+  defaultValue?: any;
+  /** Label di atas radio group */
+  label?: React.ReactNode;
+  /** Daftar opsi radio */
+  options?: BaseRadioOption[];
+  /** Variant typography untuk label */
+  labelVariant?: string;
+  /** Variant typography untuk pesan error */
+  errorVariant?: string;
+  /** Orientasi layout radio group */
+  orientation?: "vertical" | "horizontal";
+  /** Token warna untuk radio yang dipilih */
+  radioColorToken?: string;
+  /** Nonaktifkan semua opsi */
+  isDisabled?: boolean;
+  /** Gunakan error state helper untuk nested field names */
+  useErrorStateHelper?: boolean;
+  /** Custom styles via MUI sx prop */
+  sx?: SxProps;
+
+  [key: string]: any;
+}
+
+declare function BaseRadioButton(
+  props: BaseRadioButtonProps,
+): React.ReactElement | null;
+
+interface BaseStepperSimpleStep {
+  /** Step status text (e.g. "Completed", "In Progress") */
+  status?: string;
+  /** Step label/description */
+  label?: string;
+}
+
+interface BaseStepperDashboardSublist {
+  sublist_title?: string;
+  is_done?: 0 | 1;
+}
+
+interface BaseStepperDashboardStep {
+  title?: string;
+  sublist?: BaseStepperDashboardSublist[];
+  is_done?: 0 | 1;
+}
+
+interface BaseStepperProps {
+  /** Array of step objects */
+  steps?: BaseStepperSimpleStep[] | BaseStepperDashboardStep[];
+  /** Currently active step index (for simple variant) */
+  activeStep?: number;
+  /** Layout orientation */
+  orientation?: "horizontal" | "vertical";
+  /** Stepper visual variant */
+  variant?: "simple" | "dashboard";
+  /** MUI sx overrides for wrapper */
+  sx?: SxProps;
+}
+
+declare function BaseStepper(props: BaseStepperProps): React.ReactElement;
+
+interface BaseTextFieldProps {
+  /** Field name for react-hook-form binding */
+  name: string;
+  /** Control object from react-hook-form */
+  control: any;
+  /** Default value for the field */
+  defaultValue?: any;
+  /** Label title displayed above the input */
+  title?: string;
+  /** Maximum character length */
+  maxLength?: number;
+  /** Show "Maksimal X Karakter" helper text */
+  showLength?: boolean;
+  /** Show character counter (e.g. 5/20) */
+  showCountHelper?: boolean;
+  /** Only allow numeric input (0-9) */
+  isNumericOnly?: boolean;
+  /** Only allow alphanumeric input (a-z, A-Z, 0-9) */
+  isAlphaNumericOnly?: boolean;
+  /** Only allow alphabetic input (a-z, A-Z) */
+  isAlphaOnly?: boolean;
+  /** Additional special characters to allow */
+  allowedSpecialCharacters?: string;
+  /** Special characters to disallow */
+  dontAllowedSpecialCharacters?: string;
+  /** Disable the input */
+  isDisabled?: boolean;
+  /** Prevent paste action */
+  isCantPaste?: boolean;
+  /** Result text shown below the input */
+  result?: React.ReactNode;
+  /** Color for the result text */
+  resultColor?: string;
+  /** Disallow spaces */
+  noSpaceAllowed?: boolean;
+  /** Input mask pattern (use 'x' for editable slots, e.g. "0xxx-xxxx-xxxx") */
+  textMask?: string;
+  /** MUI InputProps (startAdornment, endAdornment, sx, etc.) */
+  InputProps?: Record<string, any>;
+  /** Native input props (min, max, step, etc.) */
+  inputProps?: Record<string, any>;
+  /** MUI sx overrides for the wrapper Box */
+  sx?: SxProps;
+  /** Input placeholder text */
+  placeholder?: string;
+  /** Input type (text, password, email, etc.) */
+  type?: string;
+  [key: string]: any;
+}
+
+declare function BaseTextField(
+  props: BaseTextFieldProps,
+): React.ReactElement | null;
+
+interface TextFieldUploadProps {
+  /** Nama field untuk react-hook-form */
+  name?: string;
+  /** Control dari useForm() */
+  control?: any;
+  /** Nilai awal field */
+  defaultValue?: string;
+  /** Label di atas field */
+  title?: React.ReactNode;
+  /** Ekstensi file yang diterima (contoh: ".pdf,.jpg") */
+  accept?: string;
+  /** Ukuran maksimal file dalam MB */
+  maxSize?: number;
+  /** Nonaktifkan field */
+  isDisabled?: boolean;
+  /** Label pada tombol upload */
+  buttonLabel?: string;
+  /** Posisi tombol upload relatif terhadap input */
+  buttonPosition?: "start" | "end";
+  /** Callback ketika file dipilih */
+  uploadFile?: (fileName: string, file: File | null) => void;
+  /** Posisi ikon pada tombol upload */
+  iconPosition?: "start" | "end";
+}
+
+declare function TextFieldUpload(
+  props: TextFieldUploadProps,
+): React.ReactElement | null;
+
+interface TinyMCEInitConfig {
+  /** Placeholder text di area editor */
+  placeholder?: string;
+  /** Prefix URL untuk image upload */
+  prefixUrl?: string;
+  [key: string]: any;
+}
+
+interface BaseTextAreaProps {
+  /** Nama field untuk react-hook-form */
+  name?: string;
+  /** Control dari useForm() */
+  control?: Control<any>;
+  /** Nilai awal (bisa HTML string jika useRichText aktif) */
+  defaultValue?: string;
+  /** Teks bantuan di bawah field (tampil jika tidak ada error) */
+  helperText?: React.ReactNode;
+  /** Validasi rules react-hook-form */
+  rules?: RegisterOptions;
+  /** Harus tepat N karakter (override min/maxLength) */
+  exactLength?: number;
+  /** Batas maksimal karakter */
+  maxLength?: number;
+  /** Label di atas field */
+  title?: string;
+  /** Nonaktifkan field */
+  isDisabled?: boolean;
+  /** Aktifkan TinyMCE rich-text editor (default: plain MUI textarea) */
+  useRichText?: boolean;
+  /** Override konfigurasi TinyMCE (placeholder, prefixUrl, dll) */
+  init?: TinyMCEInitConfig;
+  /** Callback file_picker_callback untuk upload gambar di rich text mode */
+  handleImageUpload?: (
+    callback: (url: string, meta?: Record<string, string>) => void,
+    value: string,
+    meta: Record<string, string>,
+  ) => void;
+  /** Custom styles via MUI sx prop */
+  sx?: SxProps;
+
+  [key: string]: any;
+}
+
+declare function BaseTextArea(
+  props: BaseTextAreaProps,
+): React.ReactElement | null;
+
+interface BaseModalAlertShowOptions {
+  /** Icon type preset or custom image path */
+  icon?: "success" | "error" | "info" | "warning" | "confirm" | string;
+  /** Modal title text */
+  title?: string;
+  /** Modal description text */
+  description?: string;
+  /** Cancel button text. Default: "Batal" */
+  cancelBtnText?: string;
+  /** Confirm button text. Default: "Ya" */
+  confirmBtnText?: string;
+  /** Cancel button action. Default: closes modal. Can be custom function. */
+  cancelBtnProps?: () => void;
+  /** Confirm button action. Called on confirm click. */
+  confirmBtnProps?: () => void;
+  /** Show cancel button. Default: true */
+  showCancelBtn?: boolean;
+  /** Show confirm button. Default: true */
+  showConfirmBtn?: boolean;
+}
+
+interface BaseModalAlertDialogProps extends BaseModalAlertShowOptions {
+  /** Whether the modal is open */
+  open?: boolean;
+  /** Close handler */
+  onClose?: () => void;
+}
+
+/**
+ * Imperative BaseModalAlert API.
+ *
+ * Usage:
+ * ```jsx
+ * import { BaseModalAlert } from 'spotlibs-components';
+ *
+ * BaseModalAlert.show({
+ *   icon: 'success',
+ *   title: 'Berhasil!',
+ *   description: 'Data berhasil disimpan.',
+ *   confirmBtnText: 'OK',
+ *   showCancelBtn: false,
+ *   confirmBtnProps: () => console.log('confirmed'),
+ * });
+ *
+ * BaseModalAlert.hide();
+ * ```
+ */
+declare const BaseModalAlert: {
+  /** Show the modal alert with given options */
+  show: (options: BaseModalAlertShowOptions) => void;
+  /** Hide the modal alert */
+  hide: () => void;
+  /** Internal: set modal ref (used by BaseModalAlertProvider) */
+  setModalRef: (ref: React.RefObject<any>) => void;
+};
+
+/**
+ * Provider component. Mount once at app root to enable BaseModalAlert.show()/hide().
+ *
+ * ```jsx
+ * import { BaseModalAlertProvider } from 'spotlibs-components';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <BaseModalAlertProvider />
+ *       <YourApp />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function BaseModalAlertProvider(): React.ReactElement;
+
+/**
+ * Controlled dialog component for direct usage without imperative API.
+ */
+declare function BaseModalAlertDialog(props: BaseModalAlertDialogProps): React.ReactElement;
+
+interface BaseModalLoadingDialogProps {
+  /** Whether the loading modal is open */
+  open?: boolean;
+  /** Loading message text. Default: "Mohon tunggu..." */
+  message?: string;
+}
+
+/**
+ * Imperative BaseModalLoading API.
+ *
+ * Usage:
+ * ```jsx
+ * import { BaseModalLoading } from 'spotlibs-components';
+ *
+ * BaseModalLoading.show(); // default message
+ * BaseModalLoading.show("Sedang memproses data...");
+ * BaseModalLoading.hide();
+ * ```
+ */
+declare const BaseModalLoading: {
+  /** Show the loading modal. Optionally pass a custom message. */
+  show: (message?: string) => void;
+  /** Hide the loading modal */
+  hide: () => void;
+  /** Internal: set modal ref (used by BaseModalLoadingProvider) */
+  setModalRef: (ref: React.RefObject<any>) => void;
+};
+
+/**
+ * Provider component. Mount once at app root to enable BaseModalLoading.show()/hide().
+ *
+ * ```jsx
+ * import { BaseModalLoadingProvider } from 'spotlibs-components';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <BaseModalLoadingProvider />
+ *       <YourApp />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function BaseModalLoadingProvider(): React.ReactElement;
+
+/**
+ * Controlled loading dialog component for direct usage without imperative API.
+ */
+declare function BaseModalLoadingDialog(props: BaseModalLoadingDialogProps): React.ReactElement;
+
+interface BaseModalPopupProps {
+  /** Whether the modal is open */
+  open?: boolean;
+  /** Close handler */
+  onClose?: () => void;
+  /** Modal variant type */
+  variant?: "default" | "with-header" | "with-header-footer";
+  /** Header background color preset */
+  color?: "primary" | "secondary" | "success" | "warning" | "danger";
+  /** Header title text */
+  title?: string;
+  /** Header subtitle text */
+  subtitle?: string;
+  /** Icon element before title in header */
+  startIcon?: React.ReactNode;
+  /** Modal body content */
+  children?: React.ReactNode;
+  /** Footer content (only for with-header-footer variant) */
+  footer?: React.ReactNode;
+  /** MUI Dialog maxWidth. Default: "sm" */
+  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
+  /** Whether dialog takes full width of maxWidth. Default: true */
+  fullWidth?: boolean;
+  /** Enable watermark overlay on content area */
+  isWatermark?: boolean;
+  /** Watermark text (e.g. "12345678 / Brispot Web") */
+  watermarkText?: string;
+  /** MUI sx overrides for Dialog */
+  sx?: SxProps;
+  [key: string]: any;
+}
+
+declare function BaseModalPopup(props: BaseModalPopupProps): React.ReactElement;
+
+interface BaseModalStepperStep {
+  label?: string;
+  description?: string;
+  responseCode?: string;
+  responseDesc?: string;
+  responseTime?: number;
+}
+
+interface BaseModalStepperProps {
+  open: boolean;
+
+  onClose: (event?: any, reason?: any) => void;
+
+  title?: string;
+
+  stepper?: BaseModalStepperStep[];
+
+  navState?: string | number | null;
+
+  lengthUpload?: number;
+
+  id_pengajuan?: number | null;
+
+  showFooter?: boolean;
+
+  children?: React.ReactNode;
+
+  modalWidth?: string;
+
+  [key: string]: any;
+}
+
+declare function BaseModalStepper(
+  props: BaseModalStepperProps,
+): React.ReactElement | null;
+
+interface BaseModalOTPProps {
+  isOpen?: boolean;
+
+  phone?: string;
+
+  setIsOpen?: (open: boolean) => void;
+
+  otpLength?: number;
+
+  onValidateOtp?: (otp: string) => void;
+
+  onRequestOtp?: () => void;
+
+  [key: string]: any;
+}
+
+declare function BaseModalOTP(
+  props: BaseModalOTPProps,
+): React.ReactElement | null;
+
+declare const FORM_TYPE: {
+  TEXT_FIELD: "text-field";
+  TEXT_AREA: "text-area";
+  TEXT_FIELD_UPLOAD: "text-field-upload";
+  DATE_PICKER: "date-picker";
+  DATETIME_PICKER: "datetime-picker";
+  TIME_PICKER: "time-picker";
+  YEAR_PICKER: "year-picker";
+  MONTH_PICKER: "month-picker";
+  DAY_PICKER: "day-picker";
+  DATE_RANGE: "date-range";
+  DROPDOWN: "dropdown";
+  DROPDOWN_ASYNC: "dropdown-async";
+  CHECKBOX: "checkbox";
+  RADIO: "radio";
+  CUSTOM: "custom";
+};
+
+interface FormBuilderFieldConfig {
+  type: string;
+  name?: string;
+  title?: string;
+  /** Per-field layout override */
+  layout?: "vertical" | "horizontal";
+  /** Per-field label width override */
+  labelWidth?: string;
+  /** Per-field divider override */
+  divider?: boolean;
+  [key: string]: any;
+}
+
+interface FormBuilderProps<T = any> {
+  /** MUI sx overrides for form element */
+  sx?: SxProps;
+  /** Array of field configurations */
+  fields?: FormBuilderFieldConfig[];
+  /** react-hook-form methods */
+  methods?: UseFormReturn<T>;
+  /** Form submit handler */
+  onSubmit?: (data: T) => void;
+  /** Gap between fields in px. Default: 16 */
+  gap?: number;
+  /** Number of grid columns. Default: 1 */
+  columns?: number;
+  /** Field layout direction. Default: "vertical" */
+  layout?: "vertical" | "horizontal";
+  /** Label width for horizontal layout. Default: "30%" */
+  labelWidth?: string;
+  /** Show border-bottom between fields. Default: false */
+  divider?: boolean;
+  /** CSS class for form element */
+  className?: string;
+  [key: string]: any;
+}
+
+interface SubFormBuilderProps<T = any> {
+  /** MUI sx overrides */
+  sx?: SxProps;
+  /** Array of field configurations */
+  fields?: FormBuilderFieldConfig[];
+  /** react-hook-form methods */
+  methods?: UseFormReturn<T>;
+  /** Gap between fields in px. Default: 16 */
+  gap?: number;
+  /** Number of grid columns. Default: 1 */
+  columns?: number;
+  /** Field layout direction. Default: "vertical" */
+  layout?: "vertical" | "horizontal";
+  /** Label width for horizontal layout. Default: "30%" */
+  labelWidth?: string;
+  /** Show border-bottom between fields. Default: false */
+  divider?: boolean;
+  [key: string]: any;
+}
+
+declare function FormBuilder<T = any>(props: FormBuilderProps<T>): React.ReactElement;
+declare function SubFormBuilder<T = any>(props: SubFormBuilderProps<T>): React.ReactElement;
+
+export { BaseAlert, BaseButton, BaseCard, BaseCheckbox, BaseChip, BaseDatatable, BaseDatePicker, BaseDropdown, BaseDropzone, BaseModalAlert, BaseModalAlertDialog, BaseModalAlertProvider, BaseModalLoading, BaseModalLoadingDialog, BaseModalLoadingProvider, BaseModalOTP, BaseModalPopup, BaseModalStepper, BaseRadioButton, BaseSkeleton, BaseSnackbar, BaseStepper, BaseSwitch, BaseTextArea, BaseTextField, BaseTypography, CONTENT_SPACING_TOKENS, CapsLockOn, ContentSpacing, DatatablePagination, DerivedColor, DownloadIconLarge, FORM_TYPE, FormBuilder, IconBiometricScan, IconDocumentAdd, IconEdit, IconFile, IconGradingRounded, IconListDocument, IconMoney, IconProgress, IconReset, IconSave, IconSaveOutlined, IconSendWhite, IconSendWhiteFull, IconUpload, IconUserScan, IconVerification, MoneyIcon, PrimitiveColor, Radius, RadiusToken, ServerSidePaginationActions, Shadow, ShadowToken, Spacing, SpacingToken, SubFormBuilder, TextFieldUpload, UsersIcon, VariantStyles };