@asdp/ferryui 0.1.22-dev.0 → 0.1.22-dev.10038

package/dist/index.d.ts

@@ -1,8 +1,16 @@
 import React$1, { ReactNode } from 'react';
-import { CarouselAnnouncerFunction } from '@fluentui/react-components';
+import { CarouselAnnouncerFunction, DialogProps } from '@fluentui/react-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FieldValues, Path } from 'react-hook-form';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, Path, Control, UseFormWatch, UseFormSetValue, UseFormGetValues } from 'react-hook-form';
 
+type Language = 'id' | 'en';
+
+interface ModalIllustrationLabels {
+    defaultImageAlt: string;
+    defaultTitle: string;
+    defaultButtonText: string;
+}
 interface ModalIllustrationButton {
     /**
      * Button text
@@ -69,60 +77,145 @@ interface ModalIllustrationProps {
      * If provided, buttons will be displayed side by side
      */
     secondaryButton?: ModalIllustrationButton;
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalIllustrationLabels>;
 }
+
 declare const ModalIllustration: React$1.FC<ModalIllustrationProps>;
 
-/**
- * Preset configurations for common modal use cases
- */
-declare const MODAL_PRESETS: {
-    /**
-     * Modal for radius/location restriction
-     */
+declare const PRESET_CONTENT: {
     readonly RADIUS: {
-        readonly title: "Anda berada di luar area pemesanan";
-        readonly message: "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.";
-        readonly imageSrc: "/assets/images/illustrations/radius.svg";
-        readonly imageAlt: "Radius Limitation Illustration";
+        readonly id: {
+            readonly title: "Anda berada di luar area pemesanan";
+            readonly message: "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.";
+            readonly imageSrc: "/assets/images/illustrations/radius.svg";
+            readonly imageAlt: "Radius Limitation Illustration";
+        };
+        readonly en: {
+            readonly title: "You are outside the booking area";
+            readonly message: "Ticket booking cannot be done from your current location. Location restriction feature is active to prevent unauthorized booking.";
+            readonly imageSrc: "/assets/images/illustrations/radius.svg";
+            readonly imageAlt: "Radius Limitation Illustration";
+        };
     };
-    /**
-     * Modal for expired session
-     */
     readonly SESSION_EXPIRED: {
-        readonly title: "Sesi anda telah berakhir";
-        readonly message: "Waktu sesi Anda telah habis untuk alasan keamanan. Silakan klik tombol dibawah untuk masuk kembali.";
-        readonly imageSrc: "/assets/images/illustrations/sessionexp.svg";
-        readonly imageAlt: "Session Expired Illustration";
+        readonly id: {
+            readonly title: "Sesi anda telah berakhir";
+            readonly message: "Waktu sesi Anda telah habis untuk alasan keamanan. Silakan klik tombol dibawah untuk masuk kembali.";
+            readonly imageSrc: "/assets/images/illustrations/sessionexp.svg";
+            readonly imageAlt: "Session Expired Illustration";
+        };
+        readonly en: {
+            readonly title: "Your session has expired";
+            readonly message: "Your session time has run out for security reasons. Please click the button below to sign in again.";
+            readonly imageSrc: "/assets/images/illustrations/sessionexp.svg";
+            readonly imageAlt: "Session Expired Illustration";
+        };
     };
-    /**
-     * Modal for purchase period expired
-     */
     readonly PURCHASE_PERIOD_EXPIRED: {
-        readonly title: "Waktu pembelian telah berakhir";
-        readonly message: "Pemesanan tiket ditutup 1 jam sebelum jadwal keberangkatan. Silakan pilih jadwal keberangkatan lain yang masih tersedia.";
-        readonly imageSrc: "/assets/images/illustrations/pay.svg";
-        readonly imageAlt: "Purchase Period Expired Illustration";
+        readonly id: {
+            readonly title: "Waktu pembelian telah berakhir";
+            readonly message: "Pemesanan tiket ditutup 1 jam sebelum jadwal keberangkatan. Silakan pilih jadwal keberangkatan lain yang masih tersedia.";
+            readonly imageSrc: "/assets/images/illustrations/pay.svg";
+            readonly imageAlt: "Purchase Period Expired Illustration";
+        };
+        readonly en: {
+            readonly title: "Purchase period has expired";
+            readonly message: "Ticket booking closes 1 hour before departure schedule. Please choose another available departure schedule.";
+            readonly imageSrc: "/assets/images/illustrations/pay.svg";
+            readonly imageAlt: "Purchase Period Expired Illustration";
+        };
     };
-    /**
-     * Modal for transaction limit reached
-     */
     readonly TRANSACTION_LIMIT: {
-        readonly title: "Anda mencapai batas transaksi tertunda";
-        readonly message: "Anda telah mencapai batas transaksi tertunda. Pemesanan dapat dilakukan kembali setelah transaksi sebelumnya diselesaikan.";
-        readonly imageSrc: "/assets/images/illustrations/mobile-pay.svg";
-        readonly imageAlt: "Transaction Limit Illustration";
+        readonly id: {
+            readonly title: "Anda mencapai batas transaksi tertunda";
+            readonly message: "Anda telah mencapai batas transaksi tertunda. Pemesanan dapat dilakukan kembali setelah transaksi sebelumnya diselesaikan.";
+            readonly imageSrc: "/assets/images/illustrations/mobile-pay.svg";
+            readonly imageAlt: "Transaction Limit Illustration";
+        };
+        readonly en: {
+            readonly title: "Pending transaction limit reached";
+            readonly message: "You have reached the pending transaction limit. Booking can be done again after the previous transaction is completed.";
+            readonly imageSrc: "/assets/images/illustrations/mobile-pay.svg";
+            readonly imageAlt: "Transaction Limit Illustration";
+        };
+    };
+    readonly UNAUTHENTICATED: {
+        readonly id: {
+            readonly title: "Masuk untuk melanjutkan pemesanan";
+            readonly message: "Untuk memesan tiket dan mengisi manifest penumpang, Anda perlu masuk terlebih dahulu. Pilihan jadwal Anda akan tetap tersimpan.";
+            readonly imageSrc: "/assets/images/illustrations/auth.svg";
+            readonly imageAlt: "Unauthenticated Illustration";
+        };
+        readonly en: {
+            readonly title: "Sign in to continue booking";
+            readonly message: "To book tickets and fill in the passenger manifest, you need to sign in first. Your schedule selection will be saved.";
+            readonly imageSrc: "/assets/images/illustrations/auth.svg";
+            readonly imageAlt: "Unauthenticated Illustration";
+        };
+    };
+    readonly PROFILE_NOT_COMPLETE: {
+        readonly id: {
+            readonly title: "Profil Belum Lengkap";
+            readonly message: "Untuk melanjutkan pemesanan tiket, kami memerlukan data profil yang lengkap sesuai ketentuan ASDP. Lengkapi profil Anda terlebih dahulu agar dapat melanjutkan ke pengisian manifest.";
+            readonly imageSrc: "/assets/images/illustrations/profile.svg";
+            readonly imageAlt: "Profile Not Complete Illustration";
+        };
+        readonly en: {
+            readonly title: "Profile Not Complete";
+            readonly message: "To continue booking tickets, we need complete profile data according to ASDP provisions. Please complete your profile first to proceed to manifest filling.";
+            readonly imageSrc: "/assets/images/illustrations/profile.svg";
+            readonly imageAlt: "Profile Not Complete Illustration";
+        };
     };
 };
+
 /**
  * Type for preset keys
  */
-type ModalPresetKey = keyof typeof MODAL_PRESETS;
+type ModalPresetKey = keyof typeof PRESET_CONTENT;
 /**
  * Helper function to get preset configuration
  */
-declare const getModalPreset: (presetKey: ModalPresetKey) => Partial<ModalIllustrationProps>;
+declare const getModalPreset: (presetKey: ModalPresetKey, language?: Language) => Partial<ModalIllustrationProps>;
+/**
+ * @deprecated Use getModalPreset instead
+ * Preset configurations for common modal use cases (defaults to ID)
+ */
+declare const MODAL_PRESETS: {
+    readonly RADIUS: Partial<ModalIllustrationProps>;
+    readonly SESSION_EXPIRED: Partial<ModalIllustrationProps>;
+    readonly PURCHASE_PERIOD_EXPIRED: Partial<ModalIllustrationProps>;
+    readonly TRANSACTION_LIMIT: Partial<ModalIllustrationProps>;
+    readonly UNAUTHENTICATED: Partial<ModalIllustrationProps>;
+    readonly PROFILE_NOT_COMPLETE: Partial<ModalIllustrationProps>;
+};
 
+interface CarouselWithCustomNavLabels {
+    carouselAriaLabel: string;
+    slideAriaLabel: string;
+    announcementTemplate: string;
+    prevButtonAriaLabel: string;
+    nextButtonAriaLabel: string;
+    closeButtonAriaLabel: string;
+}
 interface CarouselWithCustomNavProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CarouselWithCustomNavLabels>;
     /**
      * Carousel items/children
      */
@@ -162,6 +255,7 @@ interface CarouselWithCustomNavProps {
     /**
      * ARIA label for the carousel slider
      * @default "Carousel"
+     * @deprecated Use labels
      */
     ariaLabel?: string;
     /**
@@ -178,10 +272,47 @@ interface CarouselWithCustomNavProps {
      * @default false
      */
     cardFocus?: boolean;
+    /**
+     * Whether to show navigation arrows (prev/next buttons)
+     * @default false
+     */
+    showNavButtons?: boolean;
+    /**
+     * Whether to show the close/dismiss button
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Callback when close button is clicked
+     */
+    onCloseClick?: () => void;
+    /**
+     * Whether the carousel should auto play
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * Interval for auto play in milliseconds
+     * @default 5000
+     */
+    autoPlayInterval?: number;
 }
+
 declare const CarouselWithCustomNav: React$1.FC<CarouselWithCustomNavProps>;
 
+interface CardPromoLabels {
+    defaultImageAlt: string;
+    defaultButtonText: string;
+    promoAriaLabel: string;
+    promoAriaLabelSingle: string;
+    loadingContent: string;
+}
 interface CardPromoProps {
+    /**
+     * Language for labels (Indonesian or English)
+     * @default 'id'
+     */
+    language?: Language;
     /**
      * Image URL for the promo
      */
@@ -193,7 +324,7 @@ interface CardPromoProps {
     /**
      * Promo description/subtitle
      */
-    description: string;
+    description: string | React.ReactNode;
     /**
      * Image alt text
      * @default "Promo image"
@@ -239,9 +370,20 @@ interface CardPromoProps {
      * Image Only
      */
     imageOnly?: boolean;
+    /**
+     * Custom labels override (optional)
+     * If not provided, default labels based on language will be used
+     */
+    labels?: Partial<CardPromoLabels>;
 }
+
 declare const CardPromo: React$1.FC<CardPromoProps>;
 
+interface CardBannerLabels {
+    bannerAriaLabel: string;
+    bannerAriaLabelSingle: string;
+    loadingBanner: string;
+}
 interface CardBannerProps {
     /**
      * Banner image URL
@@ -267,84 +409,132 @@ interface CardBannerProps {
      * Loading state
      */
     isLoading?: boolean;
+    /**
+     * Language for accessibility labels
+     * @default 'id'
+     */
+    language?: 'id' | 'en';
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardBannerLabels>;
 }
+
 declare const CardBanner: React$1.FC<CardBannerProps>;
 
-interface CardTicketButton {
-    label: string;
-    icon?: JSX.Element;
-    onClick?: () => void;
+interface CardTicketLabels {
+    availableSeatsLabel: string;
+    estimationPrefix: string;
+    priceDetailsButton: string;
+    policyButton: string;
+    totalPriceLabel: string;
+    facilitiesLabel: string;
+    selectTicketButton: string;
+    timezoneLabel: string;
+    currencySymbol: string;
+    logoAlt: string;
+    verifyingTicketButton: string;
 }
 interface CardTicketProps {
     /**
-     * Ship type badge configuration
-     */
-    shipType: {
-        label: string;
-        color: 'brand' | 'danger' | 'important' | 'informative' | 'severe' | 'subtle' | 'success' | 'warning';
-        tooltip?: string;
-    };
-    /**
-     * Logo image source
-     * @default "/assets/logo/asdp-default.svg"
-     */
-    logoSrc?: string;
-    /**
-     * Ship name
-     */
-    shipName: string;
-    /**
-     * Available seats configuration
+     * Route item
      */
-    availableSeats: {
-        count: number;
-        threshold?: number;
-    };
+    routeItem: RouteItem;
     /**
-     * Departure information
+     * Departure item
      */
-    departure: {
-        day: string;
-        time: string;
-        location: string;
-    };
+    departureItem: DepartureItem;
     /**
-     * Arrival information
+     * Language for labels
+     * @default 'id'
      */
-    arrival: {
-        day: string;
-        time: string;
-        location: string;
-    };
+    language?: Language;
     /**
-     * Duration text
+     * Custom labels override
      */
-    duration: string;
+    labels?: Partial<CardTicketLabels>;
     /**
-     * Middle section action buttons (max 2)
+     * Button text for selecting ticket
      */
-    actionButtons?: CardTicketButton[];
+    buttonText?: string;
     /**
-     * Price display (formatted string)
+     * Callback when price detail button is clicked
      */
-    price: string;
+    onPriceDetailClick: (billingDetail: BillingDetail, provider: Provider) => void;
     /**
-     * Primary button configuration
+     * Callback when policy button is clicked
      */
-    primaryButton: CardTicketButton;
+    onPolicyClick?: () => void;
     /**
-     * List of facilities
+     * Callback when select ticket button is clicked
      */
+    onSelectTicket?: () => void;
+    isLoading?: boolean;
+    isVerifyingTicket?: boolean;
+}
+interface DepartureItem {
+    departureDay: string;
+    departureId: string;
+    departureTime: string;
+    arrivedTime: string;
+    arrivedDay: string;
+    estimatedSailingMinute: number;
+    availableTicket: number;
+    provider: Provider;
+    currency: string;
+    total: PriceSummary;
+    billingDetail: BillingDetail;
+    routeDetail?: RouteItem;
+    prices: {
+        passengerTypeId: number;
+        passengerTypeName: string;
+        passengerServiceId: number;
+        passengerServiceName: string;
+        price: number;
+    }[];
+    shipType: string;
+    arrivalLocation: string;
+    departureLocation: string;
+}
+interface Provider {
+    code: string;
+    name: string;
+    service: string;
+    logo: string;
+    shipService: string;
+    serviceColor: string;
+    description: string;
     facilities: string[];
-    /**
-     * Custom icon for ship indicator
-     */
-    shipIcon?: JSX.Element;
-    /**
-     * Custom icon for facilities checkmark
-     */
-    facilityIcon?: JSX.Element;
 }
+interface PriceSummary {
+    value: number;
+    formatted: string;
+}
+interface BillingDetail {
+    items: BillingItem[];
+    subtotal: PriceSummary;
+    discount: PriceSummary;
+    total: PriceSummary;
+}
+interface BillingItem {
+    category: 'vehicle' | 'passenger' | string;
+    title: string;
+    subtitle: string;
+    quantity: number;
+    unitPrice: number;
+    formattedUnitPrice: string;
+    subTotal: number;
+    formattedSubTotal: string;
+}
+interface RouteItem {
+    id: string;
+    name: string;
+    portFrom: string;
+    portTo: string;
+    branchFrom: string;
+    branchTo: string;
+}
+
 declare const CardTicket: React$1.FC<CardTicketProps>;
 
 /**
@@ -359,87 +549,27 @@ declare const BackgroundTicketCard: (props: React$1.SVGProps<SVGSVGElement>) =>
  */
 declare const BackgroundTicketCardVertical: (props: React$1.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
 
-type Language = 'id' | 'en';
-
-declare const SERVICE_MENU_ITEMS: {
-    readonly ferry: {
-        readonly id: "ferry";
-        readonly logo: "/assets/images/icons/ferry.svg";
-        readonly labels: {
-            readonly id: {
-                readonly label: "Ferry";
-                readonly description: "Layanan penyeberangan ferry ASDP";
-            };
-            readonly en: {
-                readonly label: "Ferry";
-                readonly description: "ASDP Ferry Crossing Service";
-            };
-        };
-    };
-    readonly ifcs: {
-        readonly id: "ifcs";
-        readonly logo: "/assets/logo/asdp-default.svg";
-        readonly labels: {
-            readonly id: {
-                readonly label: "IFCS";
-                readonly description: "Integrated Ferry Control System";
-            };
-            readonly en: {
-                readonly label: "IFCS";
-                readonly description: "Integrated Ferry Control System";
-            };
-        };
-    };
-    readonly skpt: {
-        readonly id: "skpt";
-        readonly logo: "/assets/logo/asdp-default.svg";
-        readonly labels: {
-            readonly id: {
-                readonly label: "SKPT";
-                readonly description: "Sistem Karcis Penumpang Terpadu";
-            };
-            readonly en: {
-                readonly label: "SKPT";
-                readonly description: "Integrated Passenger Ticketing System";
-            };
-        };
-    };
-    readonly hotel: {
-        readonly id: "hotel";
-        readonly logo: "/assets/images/icons/hotel.svg";
-        readonly labels: {
-            readonly id: {
-                readonly label: "Hotel";
-                readonly description: "Layanan pemesanan hotel";
-            };
-            readonly en: {
-                readonly label: "Hotel";
-                readonly description: "Hotel Booking Service";
-            };
-        };
-    };
-    readonly other: {
-        readonly id: "other";
-        readonly logo: "/assets/images/icons/other.svg";
-        readonly labels: {
-            readonly id: {
-                readonly label: "Lainnya";
-                readonly description: "Layanan lainnya";
-            };
-            readonly en: {
-                readonly label: "Other";
-                readonly description: "Other Services";
-            };
-        };
-    };
-};
-type ServiceId = keyof typeof SERVICE_MENU_ITEMS;
+type ServiceId = 'ferry' | 'ifcs' | 'skpt' | 'hotel' | 'other';
+interface CardServiceMenuLabels {
+    ferryLabel: string;
+    ferryDescription: string;
+    ifcsLabel: string;
+    ifcsDescription: string;
+    skptLabel: string;
+    skptDescription: string;
+    hotelLabel: string;
+    hotelDescription: string;
+    otherLabel: string;
+    otherDescription: string;
+    modalTitle: string;
+    serviceAriaLabel: string;
+}
 interface CardServiceMenuProps {
     /**
      * Currently active service ID
-     * @default 'ferry'
+     * @default 1
      */
-    activeServiceId?: ServiceId;
+    activeServiceId?: number;
     /**
      * Language for labels (Indonesian or English)
      * @default 'id'
@@ -448,7 +578,7 @@ interface CardServiceMenuProps {
     /**
      * Callback when a service is clicked
      */
-    onServiceClick?: (serviceId: ServiceId) => void;
+    onServiceClick?: (serviceId: number) => void;
     /**
      * Whether to show descriptions on desktop
      * @default true
@@ -458,7 +588,34 @@ interface CardServiceMenuProps {
      * Custom className for the card
      */
     className?: string;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardServiceMenuLabels>;
+    /**
+     * Menu items
+     */
+    menuItems?: CardServiceMenuItem[];
+    /**
+     * Whether the menu is in a loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton items to display while loading
+     * @default 4
+     */
+    skeletonCount?: number;
+}
+interface CardServiceMenuItem {
+    id: number;
+    description: string;
+    imageUrl: string;
+    linkUrl: string;
+    name: string;
+    sortOrder: number;
 }
+
 declare const CardServiceMenu: React$1.FC<CardServiceMenuProps>;
 
 interface ServiceMenuItem {
@@ -488,12 +645,22 @@ interface CardTicketSearchLabels {
     roundTripLabel: string;
     searchButton: string;
     placeholderPort: string;
+    ferryDescription: string;
+    ifcsDescription: string;
+    skptDescription: string;
+    hotelDescription: string;
+    otherDescription: string;
     placeholderDestinationPort: string;
     placeholderDepartureDate: string;
     placeholderReturnDate: string;
     placeholderTypeClass: string;
     placeholderTypeService: string;
     placeholderPassenger: string;
+    errorOriginRequired: string;
+    errorDestinationRequired: string;
+    errorDepartureDateRequired: string;
+    errorReturnDateRequired: string;
+    switchAriaLabel: string;
 }
 interface CardTicketSearchProps {
     /**
@@ -536,11 +703,12 @@ interface CardTicketSearchProps {
     onSwitchClick?: () => void;
     onRoundTripChange?: (value: boolean) => void;
     onSubmit?: (data: CardTicketSearchFormData) => void;
+    onServiceClick?: (serviceId: number) => void;
     /**
      * Active service ID
-     * @default 'ferry'
+     * @default 1
      */
-    activeServiceId?: ServiceId;
+    activeServiceId?: number;
     /**
      * Custom labels override (optional)
      * If not provided, default labels based on locale will be used
@@ -556,13 +724,93 @@ interface CardTicketSearchProps {
     isRotating?: boolean;
     showPassengerField?: boolean;
     showRoundTrip?: boolean;
+    menuItems?: CardServiceMenuItem[];
+    isLoadingServiceMenu?: boolean;
 }
 
 declare const CardTicketSearch: React$1.FC<CardTicketSearchProps>;
 
-declare const DEFAULT_LABELS: Record<Language, CardTicketSearchLabels>;
+declare const DEFAULT_LABELS$4: Record<Language, CardTicketSearchLabels>;
+
+interface SearchSummaryField {
+    /**
+     * Field label
+     */
+    label: string;
+    /**
+     * Field value
+     */
+    value: string;
+    /**
+     * Icon name from iconify
+     */
+    icon?: string;
+}
+interface CardTicketSearchSummaryLabels {
+    originHarbor: string;
+    destinationHarbor: string;
+    departureDate: string;
+    serviceClass: string;
+    typeOfService: string;
+    totalPassengers: string;
+    changeSearchButton: string;
+    swapAriaLabel: string;
+}
+interface CardTicketSearchSummaryProps {
+    /**
+     * Language for labels (Indonesian or English)
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Origin harbor name
+     */
+    originHarbor: string;
+    /**
+     * Destination harbor name
+     */
+    destinationHarbor: string;
+    /**
+     * Departure date
+     */
+    departureDate: string;
+    /**
+     * Service type text (e.g., "3 Service Types")
+     */
+    serviceClass: string;
+    /**
+     * Type of service (e.g., "Penumpang", "Kendaraan")
+     */
+    typeOfService: string;
+    /**
+     * Total passengers text (e.g., "2 Penumpang")
+     */
+    totalPassengers: string;
+    /**
+     * Callback when change search button is clicked
+     */
+    onChangeSearch: () => void;
+    /**
+     * Custom field labels override (optional)
+     * If not provided, default labels based on language will be used
+     */
+    labels?: Partial<CardTicketSearchSummaryLabels>;
+    /**
+     * Show swap button between origin and destination
+     * @default false
+     */
+    showSwapButton?: boolean;
+    /**
+     * Children to render below the search fields (e.g., SortMenu)
+     */
+    children?: React.ReactNode;
+}
+
+declare const CardTicketSearchSummary: React$1.FC<CardTicketSearchSummaryProps>;
+
+declare const DEFAULT_LABELS$3: Record<Language, CardTicketSearchSummaryLabels>;
 
-type InputType = 'checkbox' | 'date' | 'datetime-local' | 'email' | 'file' | 'identity' | 'emailOrPhone' | 'number' | 'otp' | 'passport' | 'password' | 'phone' | 'radio' | 'radiobutton' | 'select' | 'switch' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
+type InputType = 'checkbox' | 'country' | 'date' | 'datetime-local' | 'email' | 'file' | 'identity' | 'emailOrPhone' | 'number' | 'otp' | 'passport' | 'password' | 'phone' | 'radio' | 'radiobutton' | 'select' | 'switch' | 'tel' | 'text' | 'textarea' | 'time' | 'url';
 interface SelectOption {
     value: string;
     label: string;
@@ -594,6 +842,7 @@ interface InputDynamicProps<T extends FieldValues = FieldValues> {
     rows?: number;
     min?: number | string;
     max?: number | string;
+    onlyCountries?: string[];
     step?: number | string;
     isMultiSelect?: boolean;
     selectScrollbarColor?: string;
@@ -624,6 +873,7 @@ interface InputDynamicProps<T extends FieldValues = FieldValues> {
         validate?: (value: any) => string | boolean;
     };
     helperText?: string;
+    helperIcon?: string;
     className?: string;
     layout?: 'horizontal' | 'vertical';
     size?: 'small' | 'medium' | 'large';
@@ -639,70 +889,244 @@ interface InputDynamicProps<T extends FieldValues = FieldValues> {
     onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
     contentAfter?: React.ReactNode;
     onChange?: (value: any) => void;
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: 'id' | 'en';
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<InputDynamicLabels>;
+    menuPlacement?: 'top' | 'bottom' | 'auto';
+    /**
+     * Disable selecting past dates for type "date"
+     * @default false
+     */
+    disablePastDates?: boolean;
+    disableFutureDates?: boolean;
+}
+interface InputDynamicLabels {
+    emailOrPhonePlaceholder: string;
+    emailPlaceholder: string;
+    phonePlaceholder: string;
+    identityPlaceholder: string;
+    identityPhonePlaceholder: string;
+    identityIdPlaceholder: string;
+    showPasswordAriaLabel: string;
+    hidePasswordAriaLabel: string;
+    datePickerPlaceholder: string;
+    phoneDefaultPlaceholder: string;
+    requiredFieldError: string;
+    invalidEmailError: string;
+    emailOrPhoneRequiredError: string;
+    invalidEmailFormatError: string;
+    phoneMustStartWithPlusError: string;
+    phoneMustBeOnlyDigitsError: string;
+    phoneMinDigitsError: string;
+    invalidEmailOrPhoneError: string;
+    identityPhoneMustStartWithPlusError: string;
+    identityPhoneMustBeOnlyDigitsError: string;
+    phoneInvalidLengthError: string;
 }
 
 declare const InputDynamic: React$1.FC<InputDynamicProps>;
 
-declare const DEFAULT_COUNTRY_CODES: CountryCode[];
-
+interface CountryOption {
+    value: string;
+    label: string;
+    flag: string;
+}
 /**
- * Harbor item interface
+ * List of countries with their ISO codes and flag icons
+ * Flag icons use Iconify's twemoji flags
  */
-interface HarborItem {
+declare const COUNTRIES: CountryOption[];
+
+interface EmptyContentLabels {
+    defaultImageAlt: string;
+    defaultTitle: string;
+    defaultMessage: string;
+    defaultButtonText: string;
+}
+interface EmptyContentButton {
     /**
-     * Unique identifier for the harbor
+     * Button text
      */
-    id: number;
+    text: string;
     /**
-     * Display name of the harbor
+     * Button click handler
      */
-    name: string;
-}
-/**
- * Props for ModalSearchHarbor component
- */
-interface ModalSearchHarborProps {
+    onClick: () => void;
     /**
-     * Whether the modal is open
+     * Button appearance
+     * @default "primary"
      */
-    open: boolean;
+    appearance?: 'primary' | 'outline' | 'secondary' | 'subtle' | 'transparent';
+}
+interface EmptyContentProps {
     /**
-     * Callback when modal should close
+     * Title for the empty state
+     * If not provided, falls back to the default label for the given language
      */
-    onClose: () => void;
+    title?: ReactNode | string;
     /**
-     * Modal title
-     * @default "Pilih Pelabuhan"
+     * Dynamic content name to replace `{konten}` or `{content}` placeholder in the default title
      */
-    title?: string;
+    content?: string;
     /**
-     * Type of modal - origin or destination
-     * @default "origin"
+     * Message content for the empty state
+     * Can be a string or React node for more complex content
+     * If not provided, falls back to the default label for the given language
      */
-    modalType?: 'origin' | 'destination';
+    message?: string | ReactNode;
     /**
-     * List of harbors to display
+     * Image source URL
+     * @default "/assets/images/illustrations/no-content.svg"
+     * @remarks
+     * When using this component in your application, ensure the asset is available at this path
+     * in your public directory, or provide a custom imageSrc prop pointing to your own image.
      */
-    harbors: HarborItem[];
+    imageSrc?: string;
     /**
-     * List of favorite harbors
+     * Image alt text
+     * If not provided, falls back to the default label for the given language
      */
-    favoriteHarbors: HarborItem[];
+    imageAlt?: string;
     /**
-     * List of last searched harbors
+     * Image width
+     * @default 240
      */
-    lastSearchedHarbors: HarborItem[];
+    imageWidth?: number;
     /**
-     * Loading state
-     * @default false
+     * Image height
+     * @default 180
      */
-    isLoading?: boolean;
+    imageHeight?: number;
     /**
-     * Current search query value
+     * Optional action button configuration
+     * If not provided, no button will be displayed
      */
-    searchQuery: string;
+    actionButton?: EmptyContentButton;
     /**
-     * Callback when search query changes
+     * Language for default labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<EmptyContentLabels>;
+    /**
+     * Additional class name for root element
+     */
+    className?: string;
+}
+
+declare const EmptyContent: React$1.FC<EmptyContentProps>;
+
+declare const DEFAULT_LABELS$2: Record<Language, EmptyContentLabels>;
+
+/**
+ * Harbor item interface
+ */
+interface HarborItem {
+    branchId: number;
+    branchName: string;
+    branchCode: string;
+    cityId: number;
+    cityName: string;
+    timezone: string;
+    portId: number;
+    portName: string;
+    portCode: string;
+    rowNum: number;
+    isFavorite: boolean;
+    routeId?: number;
+}
+/**
+ * Labels for ModalSearchHarbor component
+ */
+interface ModalSearchHarborLabels {
+    title: string;
+    searchPlaceholder: string;
+    lastSearchedHeader: string;
+    clearAllButton: string;
+    allHarborsHeader: string;
+    loadingData: string;
+    harborNotFound: string;
+    closeAriaLabel: string;
+    popularHarborHeader: string;
+    favoriteHeader: string;
+    emptyContent: string;
+    travelPlanHeader: string;
+}
+/**
+ * Props for ModalSearchHarbor component
+ */
+interface ModalSearchHarborProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalSearchHarborLabels>;
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     */
+    title?: string;
+    /**
+     * Type of modal - origin or destination
+     * @default "origin"
+     */
+    modalType?: 'origin' | 'destination';
+    /**
+     * List of harbors to display
+     */
+    harbors: HarborItem[];
+    /**
+     * List of favorite harbors
+     */
+    favoriteHarbors: HarborItem[];
+    /**
+     * List of last searched harbors
+     */
+    lastSearchedHarbors: HarborItem[];
+    /**
+     * List of popular harbors
+     */
+    popularHarbors: HarborItem[];
+    /**
+     * Loading state port
+     * @default false
+     */
+    isLoadingPort?: boolean;
+    /**
+     * Loading state travel plan
+     * @default false
+     */
+    isLoadingTravelPlan?: boolean;
+    /**
+     * Current search query value
+     */
+    searchQuery: string;
+    /**
+     * Show button favorite
+     */
+    showButtonFavorite?: boolean;
+    /**
+     * Callback when search query changes
      */
     onSearchChange: (query: string) => void;
     /**
@@ -720,12 +1144,43 @@ interface ModalSearchHarborProps {
     /**
      * Callback when removing from last searched
      */
-    onRemoveLastSearched: (harborId: number) => void;
+    onRemoveLastSearched?: (harborId: HarborItem) => void;
     /**
      * Callback when clearing all last searched
      */
     onClearLastSearched: () => void;
+    /**
+     * Callback when clearing all favorite
+     */
+    onClearFavorite: () => void;
+    /**
+     * Reload button for port
+     */
+    reloadButtonPort?: EmptyContentButton;
+    /**
+     * Reload button for travel plan
+     */
+    reloadButtonTravelPlan?: EmptyContentButton;
+    /**
+     * Reload button for all
+     */
+    reloadButtonAll?: EmptyContentButton;
+    /**
+     * Image source for empty state
+     */
+    emptyImageSrc?: string;
+    /**
+     * Error state for travel plan
+     * @default false
+     */
+    isErrorTravelPlan?: boolean;
+    /**
+     * Error state for port
+     * @default false
+     */
+    isErrorPort?: boolean;
 }
+
 /**
  * ModalSearchHarbor - A reusable modal component for searching and selecting harbors
  *
@@ -760,10 +1215,28 @@ declare const ModalSearchHarbor: React$1.FC<ModalSearchHarborProps>;
  * Tab type for trip selection
  */
 type TabType = 'one-way' | 'round-trip';
+/**
+ * Labels for ModalSelectDate component
+ */
+interface ModalSelectDateLabels {
+    title: string;
+    oneWay: string;
+    roundTrip: string;
+    closeAriaLabel: string;
+}
 /**
  * Props for ModalSelectDate component
  */
 interface ModalSelectDateProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalSelectDateLabels>;
     /**
      * Whether the modal is open
      */
@@ -774,7 +1247,6 @@ interface ModalSelectDateProps {
     onClose: () => void;
     /**
      * Modal title
-     * @default "Pilih Tanggal"
      */
     title?: string;
     /**
@@ -821,7 +1293,13 @@ interface ModalSelectDateProps {
      * @default "DD MMMM YYYY"
      */
     dateFormat?: string;
+    /**
+     * Show Roundtrip
+     * @default true
+     */
+    showRoundtrip?: boolean;
 }
+
 /**
  * ModalSelectDate - A reusable modal component for selecting dates
  *
@@ -852,9 +1330,9 @@ declare const ModalSelectDate: React$1.FC<ModalSelectDateProps>;
  */
 interface ServiceItem {
     /**
-     * Unique identifier for the service
+     * Unique identifier for the service type
      */
-    id: number;
+    serviceTypeId: number;
     /**
      * Display name of the service type
      */
@@ -867,6 +1345,23 @@ interface ServiceItem {
      * Detailed description of the service
      */
     serviceDescription: string;
+    /**
+     * Color code for the service type
+     */
+    serviceTypeColor: string;
+    /**
+     * Short description of the service
+     */
+    serviceShortDescription: string;
+}
+interface ModalServiceLabels {
+    title: string;
+    loading: string;
+    error: string;
+    selectAll: string;
+    saveButton: string;
+    closeAriaLabel: string;
+    emptyContent: string;
 }
 /**
  * Props for ModalService component
@@ -882,7 +1377,7 @@ interface ModalServiceProps {
     onClose: () => void;
     /**
      * Modal title
-     * @default "Pilih Kelas Layanan"
+     * @default "Pilih Jenis Layanan"
      */
     title?: string;
     /**
@@ -908,7 +1403,25 @@ interface ModalServiceProps {
      * @default false
      */
     isError?: boolean;
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalServiceLabels>;
+    /**
+     * Reload button for error state
+     */
+    reloadButton?: EmptyContentButton;
+    /**
+     * Image source for empty state
+     */
+    emptyImageSrc?: string;
 }
+
 /**
  * ModalService - A reusable modal component for selecting service classes
  *
@@ -923,7 +1436,7 @@ interface ModalServiceProps {
  * <ModalService
  *   open={isOpen}
  *   onClose={() => setIsOpen(false)}
- *   title="Pilih Kelas Layanan"
+ *   title="Pilih Jenis Layanan"
  *   services={servicesList}
  *   selectedServiceIds={selectedIds}
  *   onSave={handleSave}
@@ -935,35 +1448,70 @@ interface ModalServiceProps {
 declare const ModalService: React$1.FC<ModalServiceProps>;
 
 /**
- * Service class codes for passenger services
+ * Passenger class from API (e.g. EKONOMI, Bisnis, Eksekutive)
  */
-type PassengerServiceCode = 'ECONOMY' | 'BUSINESS' | 'EXECUTIVE';
-/**
- * Service class data structure
- */
-interface ServiceClass {
+interface PassengerClass {
     id: number;
-    name: string;
-    key: string;
-    serviceName: PassengerServiceCode;
+    classCode: string;
+    className: string;
+    classDescription: string;
+    maxCapacity: number;
+    count?: number;
+    passengers?: Passenger[];
 }
 /**
- * Default service classes available
+ * Labels for ModalTotalPassengers component
  */
-declare const DEFAULT_SERVICE_CLASSES: ServiceClass[];
-
+interface ModalTotalPassengersLabels {
+    title: string;
+    infoMessage: string;
+    loading: string;
+    saveButton: string;
+    closeAriaLabel: string;
+    emptyContent: string;
+}
 /**
  * Passenger object structure
  */
 interface Passenger {
-    [key: string]: any;
+    id?: number;
+    isAccountOwner?: boolean;
+    titleId?: number;
+    titleName?: string;
+    fullName?: string;
+    identityTypeId?: number;
+    countryId?: number;
+    countryName?: string;
+    identityTypeCode?: keyof typeof IDENTITY_TYPE | string;
+    identityId?: number;
+    ageId?: number;
+    ageLabel?: keyof typeof PASSENGER_TYPE | string;
+    birthdate?: string;
+    age?: number;
+    category?: string;
+    ticketClass?: string;
+    regencyId?: number;
+    regencyName?: string;
+    phoneNumber?: string;
+    email?: string;
+    passengerType?: string;
+    serviceName?: string;
+    _indices?: {
+        i0: number;
+        i1: number;
+        i2: number;
+        passengerAgeId: number;
+        passengerAgeLabel: string;
+        passengerClassId: number;
+        passengerClassLabel: string;
+    };
 }
 /**
  * Service with passenger count
  */
 interface PassengerService {
-    serviceId: number;
-    serviceName: PassengerServiceCode;
+    serviceId?: number;
+    serviceName: string;
     count: number;
     passengers: Passenger[];
 }
@@ -972,22 +1520,40 @@ interface PassengerService {
  */
 interface PassengerType {
     id: number;
-    passengerTypeCode: string;
-    passengerTypeName: string;
+    passengerAgeCode: string;
+    passengerAgeName: string;
+    passengerAgeDescription: string;
+    minAge: number;
+    maxAge: number;
+    isActive: number;
+    sortOrder: number;
+    requiresId: number;
+    maxCapacity: number;
+    minCapacity: number;
+    classes: PassengerClass[];
 }
 /**
  * Selected passenger item structure
  */
 interface SelectedPassengerItem {
     passengerTypeId: number;
-    passengerTypeCode: string;
-    passengerTypeName: string;
+    passengerAgeCode: string;
+    passengerAgeName: string;
     services: PassengerService[];
 }
 /**
  * Props for ModalTotalPassengers component
  */
 interface ModalTotalPassengersProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalTotalPassengersLabels>;
     /**
      * Whether the modal is open
      */
@@ -998,26 +1564,20 @@ interface ModalTotalPassengersProps {
     onClose: () => void;
     /**
      * Modal title
-     * @default "Pilih Jumlah Penumpang"
      */
     title?: string;
     /**
      * Array of passenger types from API
      */
     passengerTypes: PassengerType[];
-    /**
-     * Array of service classes
-     * @default DEFAULT_SERVICE_CLASSES
-     */
-    serviceClasses?: ServiceClass[];
     /**
      * Currently selected passengers
      */
-    selectedPassengers: SelectedPassengerItem[];
+    selectedPassengers: PassengerType[];
     /**
      * Callback when save button is clicked
      */
-    onSave: (passengers: SelectedPassengerItem[]) => void;
+    onSave: (passengers: PassengerType[]) => void;
     /**
      * Loading state
      * @default false
@@ -1030,16 +1590,29 @@ interface ModalTotalPassengersProps {
     maxPassengers?: number;
     /**
      * Message to display in the info bar
-     * @default "Anda dapat menambahkan hingga {maxPassengers} penumpang pada golongan kendaraan ini."
      */
     infoMessage?: string;
+    /**
+     * Error state
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Reload button for error state
+     */
+    reloadButton?: EmptyContentButton;
+    /**
+     * Image source for empty state
+     */
+    emptyImageSrc?: string;
 }
+
 /**
  * ModalTotalPassengers - A reusable modal component for selecting passenger counts
  *
  * This component provides a passenger selection modal with features like:
  * - Accordion for each passenger type
- * - Counter for each service class (Economy, Business, Executive)
+ * - Counter for each service class (dynamic from API)
  * - Automatic default selection (1 adult economy)
  * - Validation and save functionality
  *
@@ -1057,25 +1630,218 @@ interface ModalTotalPassengersProps {
  */
 declare const ModalTotalPassengers: React$1.FC<ModalTotalPassengersProps>;
 
+declare const API_ENDPOINTS: {
+    readonly PORTS: {
+        readonly ORIGIN: "/v1/surrounding/catalog/ports/list/origin";
+        readonly DESTINATION: "/v1/surrounding/catalog/ports/list/destination";
+    };
+    readonly SERVICES: {
+        readonly LIST: "/v1/surrounding/catalog/service-types";
+    };
+    readonly PASSENGERS: {
+        readonly LIST: "/v1/surrounding/catalog/passenger-types";
+    };
+    readonly AUTH: {
+        readonly LOGIN: "/v1/surrounding/auth/login";
+        readonly REGISTER: "/auth/register";
+        readonly LOGOUT: "/auth/logout";
+        readonly REFRESH: "/auth/refresh";
+        readonly PROFILE: "/auth/profile";
+        readonly UPDATE_PROFILE: "/auth/profile";
+        readonly CHANGE_PASSWORD: "/auth/change-password";
+        readonly FORGOT_PASSWORD: "/auth/forgot-password";
+        readonly RESET_PASSWORD: "/auth/reset-password";
+        readonly VERIFY_EMAIL: "/auth/verify-email";
+    };
+    readonly USERS: {
+        readonly LIST: "/users";
+        readonly CREATE: "/users";
+        readonly DETAIL: (id: string) => string;
+        readonly UPDATE: (id: string) => string;
+        readonly DELETE: (id: string) => string;
+        readonly AVATAR: (id: string) => string;
+    };
+    readonly FILES: {
+        readonly UPLOAD: "/files/upload";
+        readonly DOWNLOAD: (id: string) => string;
+        readonly DELETE: (id: string) => string;
+        readonly LIST: "/files";
+    };
+    readonly DASHBOARD: {
+        readonly STATS: "/dashboard/stats";
+        readonly CHART_DATA: "/dashboard/chart-data";
+        readonly RECENT_ACTIVITIES: "/dashboard/recent-activities";
+    };
+    readonly NOTIFICATIONS: {
+        readonly LIST: "/notifications";
+        readonly MARK_READ: (id: string) => string;
+        readonly MARK_ALL_READ: "/notifications/read-all";
+        readonly DELETE: (id: string) => string;
+        readonly SETTINGS: "/notifications/settings";
+    };
+    readonly SETTINGS: {
+        readonly GENERAL: "/settings/general";
+        readonly SECURITY: "/settings/security";
+        readonly PREFERENCES: "/settings/preferences";
+    };
+};
+declare const API_CONFIG: {
+    readonly TIMEOUT: 30000;
+    readonly RETRY_ATTEMPTS: 3;
+    readonly RETRY_DELAY: 1000;
+    readonly CACHE_TIME: number;
+    readonly STALE_TIME: number;
+};
+declare const API_ERROR_MESSAGES: {
+    readonly NETWORK_ERROR: "Network error occurred. Please check your connection.";
+    readonly TIMEOUT_ERROR: "Request timeout. Please try again.";
+    readonly UNAUTHORIZED: "You are not authorized to perform this action.";
+    readonly FORBIDDEN: "Access denied.";
+    readonly NOT_FOUND: "Resource not found.";
+    readonly SERVER_ERROR: "Internal server error. Please try again later.";
+    readonly VALIDATION_ERROR: "Please check your input and try again.";
+    readonly TOKEN_EXPIRED: "Your session has expired. Please login again.";
+    readonly RATE_LIMIT: "Too many requests. Please try again later.";
+};
+declare const HTTP_STATUS: {
+    readonly OK: 200;
+    readonly CREATED: 201;
+    readonly NO_CONTENT: 204;
+    readonly BAD_REQUEST: 400;
+    readonly UNAUTHORIZED: 401;
+    readonly FORBIDDEN: 403;
+    readonly NOT_FOUND: 404;
+    readonly CONFLICT: 409;
+    readonly UNPROCESSABLE_ENTITY: 422;
+    readonly TOO_MANY_REQUESTS: 429;
+    readonly INTERNAL_SERVER_ERROR: 500;
+    readonly BAD_GATEWAY: 502;
+    readonly SERVICE_UNAVAILABLE: 503;
+};
+declare const PASSENGER_TYPE: {
+    readonly ADULT: 1;
+    readonly CHILD: 2;
+    readonly INFANT: 3;
+    readonly ELDERLY: 5;
+};
+type PASSENGER_TYPE_TYPE = typeof PASSENGER_TYPE[keyof typeof PASSENGER_TYPE];
+declare const IDENTITY_TYPE: {
+    readonly KTP: 1;
+    readonly SIM: 2;
+    readonly PSP: 3;
+    readonly TGL: 4;
+};
+type IDENTITY_TYPE_TYPE = typeof IDENTITY_TYPE[keyof typeof IDENTITY_TYPE];
+declare const LOAD_TYPE: {
+    readonly PEDESTRIAN: 1;
+    readonly MOTORBIKE: 2;
+    readonly PASSENGER_VEHICLE: 3;
+    readonly GOODS_VEHICLE: 4;
+    readonly LOOSE_LOAD_WITH_VEHICLE: 5;
+    readonly LOOSE_LOAD_WITHOUT_VEHICLE: 6;
+};
+type LOAD_TYPE_TYPE = typeof LOAD_TYPE[keyof typeof LOAD_TYPE];
+declare const GENDER: {
+    readonly MALE: "M";
+    readonly FEMALE: "F";
+};
+type GENDER_TYPE = typeof GENDER[keyof typeof GENDER];
+declare const MY_TICKET_TAB: {
+    readonly WAITING: 1;
+    readonly ACTIVE: 2;
+    readonly COMPLETED: 3;
+    readonly FAILED: 4;
+    readonly RETURNED: 5;
+};
+type MY_TICKET_TAB_TYPE = typeof MY_TICKET_TAB[keyof typeof MY_TICKET_TAB];
+declare const MY_TICKET_STATUS: {
+    readonly DRAFT: 1;
+    readonly NOT_YET_PAID: 2;
+    readonly PAID: 3;
+    readonly CHECKIN: 4;
+    readonly BOARDING: 5;
+    readonly NEED_ACTION: 6;
+    readonly COMPLETED: 7;
+    readonly EXPIRED_CHECKIN: 8;
+    readonly EXPIRED_PAYMENT: 9;
+    readonly EXPIRED_BOARDING: 10;
+    readonly REFUND: 11;
+};
+type MY_TICKET_STATUS_TYPE = typeof MY_TICKET_STATUS[keyof typeof MY_TICKET_STATUS];
+declare const MANIFEST_ENTITY: {
+    readonly COMPANY: "company";
+    readonly INDIVIDUAL: "individual";
+};
+type MANIFEST_ENTITY_TYPE = typeof MANIFEST_ENTITY[keyof typeof MANIFEST_ENTITY];
+declare const HARDCODED_ID: {
+    readonly FAQ_ID_PEMESANAN_TIKET: 1;
+    readonly COMPANY_ID_LAINNYA: "999999";
+    readonly LOAD_TYPE_ID_LAINNYA: 87;
+};
+interface LoadType {
+    id: number;
+    name: string;
+    price: number;
+    currency: string;
+    formattedPrice: string;
+    unit?: {
+        id: string;
+        name: string;
+    };
+}
+interface IdentityType {
+    id: number;
+    code: string;
+    name: string;
+    rule: string;
+}
+
+interface TypeOfServiceChild {
+    id: number;
+    loadType: LOAD_TYPE_TYPE;
+    group: number;
+    title: string;
+    info: string;
+    image: string;
+    capacity: number | null;
+}
 /**
  * Service type item structure
  */
 interface TypeOfService {
     id: number;
-    image: string;
+    loadType: LOAD_TYPE_TYPE;
+    group: number;
     title: string;
     info: string;
-    price: number;
-    type: string;
-    parentId?: number;
-    parentTitle?: string;
-    child: TypeOfService[];
-    typeOfPassanger: string;
+    image: string;
+    children: TypeOfServiceChild[];
+    capacity?: number | null;
+}
+/**
+ * Labels for ModalTypeOfService component
+ */
+interface ModalTypeOfServiceLabels {
+    title: string;
+    cancelButton: string;
+    saveButton: string;
+    vehiclesAlt: string;
+    closeAriaLabel: string;
+    emptyContent: string;
 }
 /**
  * Props for ModalTypeOfService component
  */
 interface ModalTypeOfServiceProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalTypeOfServiceLabels>;
     /**
      * Whether the modal is open
      */
@@ -1086,7 +1852,6 @@ interface ModalTypeOfServiceProps {
     onClose: () => void;
     /**
      * Modal title
-     * @default "Pilih Tipe Layanan"
      */
     title?: string;
     /**
@@ -1111,7 +1876,26 @@ interface ModalTypeOfServiceProps {
         width: number;
         height: number;
     }) => ReactNode;
+    /**
+     * Loading state for service types data
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Error state for service types data
+     * @default false
+     */
+    isError?: boolean;
+    /**
+     * Reload button for error state
+     */
+    reloadButton?: EmptyContentButton;
+    /**
+     * Image source for empty state
+     */
+    emptyImageSrc?: string;
 }
+
 /**
  * ModalTypeOfService - A reusable modal component for selecting service types
  *
@@ -1153,4 +1937,1990 @@ declare const DEFAULT_VEHICLE_ICONS: {
     readonly looseLoad: "/assets/images/icons/loose-load.webp";
 };
 
-export { BackgroundTicketCard, BackgroundTicketCardVertical, CardBanner, type CardBannerProps, CardPromo, type CardPromoProps, CardServiceMenu, type CardServiceMenuProps, CardTicket, type CardTicketButton, type CardTicketProps, CardTicketSearch, DEFAULT_LABELS as CardTicketSearchDefaultLabels, type CardTicketSearchFormData, type CardTicketSearchLabels, type CardTicketSearchProps, type ServiceMenuItem as CardTicketSearchServiceMenuItem, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryCode, DEFAULT_COUNTRY_CODES, DEFAULT_SERVICE_CLASSES, DEFAULT_VEHICLE_ICONS, type HarborItem, InputDynamic, type InputDynamicProps, type InputType, MODAL_PRESETS, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, type ModalPresetKey, ModalSearchHarbor, type ModalSearchHarborProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, ModalTypeOfService, type ModalTypeOfServiceProps, type Passenger, type PassengerService, type PassengerServiceCode, type PassengerType, type RadioOption, type SelectOption, type SelectedPassengerItem, type ServiceClass, type ServiceId, type ServiceItem, type TabType, type TypeOfService, getModalPreset };
+interface SortOption {
+    label: string;
+    value: string;
+    sortBy: string;
+    sortDir: string;
+}
+interface FilterCount {
+    typeService?: number;
+    timeDeparture?: number;
+    timeArrival?: number;
+    priceRange?: number;
+    durationRange?: number;
+}
+interface SortMenuLabels {
+    filterButtonText: string;
+    sortButtonText: string;
+    clearFiltersText: string;
+    recommendation: string;
+    highestPrice: string;
+    lowestPrice: string;
+    earliestDeparture: string;
+    latestDeparture: string;
+    resetSortAriaLabel: string;
+}
+interface SortMenuProps {
+    /**
+     * Language for labels (Indonesian or English)
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override (optional)
+     */
+    labels?: Partial<SortMenuLabels>;
+    /**
+     * Current sort value
+     */
+    value: string;
+    /**
+     * Callback when sort value changes — receives full SortOption object
+     */
+    onChange: (option: SortOption) => void;
+    /**
+     * Total active filter categories
+     * @default 0
+     */
+    totalActiveFilters?: number;
+    /**
+     * Callback when filter button is clicked
+     */
+    onFilterClick?: () => void;
+    /**
+     * Callback when clear filters button is clicked
+     */
+    onClearFilters?: () => void;
+    /**
+     * Custom sort options
+     * @default Default ferry sort options
+     */
+    sortOptions?: SortOption[];
+    /**
+     * Filter button text
+     * @default "Filter"
+     * @deprecated Use labels
+     */
+    filterButtonText?: string;
+    /**
+     * Sort button text
+     * @default "Urutkan Berdasarkan"
+     * @deprecated Use labels
+     */
+    sortButtonText?: string;
+    /**
+     * Clear filters button text template
+     * @default "{count} Filter Dipilih"
+     * @deprecated Use labels
+     */
+    clearFiltersText?: string;
+}
+
+declare const SortMenu: React$1.FC<SortMenuProps>;
+
+/**
+ * @deprecated Use getSortOptions and find the label from there
+ */
+declare const DEFAULT_SORT_OPTIONS: SortOption[];
+/**
+ * @deprecated Use labels directly
+ */
+declare const getSortLabel: (value: string) => string;
+
+interface ModalFilterTicketProps {
+    /**
+     * Language for labels (Indonesian or English)
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Selected service types as objects with id and label
+     */
+    selectedServiceTypes: Array<{
+        id: number;
+        label: string;
+    }>;
+    /**
+     * Callback when service types change
+     */
+    onServiceTypesChange: (serviceTypes: Array<{
+        id: number;
+        label: string;
+    }>) => void;
+    /**
+     * Selected departure time slots
+     */
+    departureTime: string[];
+    /**
+     * Callback when departure time changes
+     */
+    onDepartureTimeChange: (time: string[]) => void;
+    /**
+     * Selected arrival time slots
+     */
+    arrivalTime: string[];
+    /**
+     * Callback when arrival time changes
+     */
+    onArrivalTimeChange: (time: string[]) => void;
+    /**
+     * Price range [min, max]
+     */
+    priceRange: [number, number];
+    /**
+     * Callback when price range changes
+     */
+    onPriceRangeChange: (range: [number, number]) => void;
+    /**
+     * Duration range [min, max] in minutes
+     */
+    durationRange: [number, number];
+    /**
+     * Callback when duration range changes
+     */
+    onDurationRangeChange: (range: [number, number]) => void;
+    /**
+     * Callback when reset button is clicked
+     */
+    onReset: () => void;
+    /**
+     * Callback when apply button is clicked
+     */
+    onApply: () => void;
+    /**
+     * Optional custom labels
+     */
+    labels?: Partial<ModalFilterTicketLabels>;
+    /**
+     * Service types list (from API data)
+     */
+    serviceTypes?: Array<{
+        value: number;
+        label: string;
+    }>;
+    /**
+     * Time slots list (from API/Redux data)
+     */
+    timeSlots?: Array<{
+        value: string;
+        label: string;
+    }>;
+    /**
+     * Min price for range slider
+     * @default 0
+     */
+    minPrice?: number;
+    /**
+     * Max price for range slider
+     * @default 0
+     */
+    maxPrice?: number;
+    /**
+     * Min duration for range slider (minutes)
+     * @default 0
+     */
+    minDuration?: number;
+    /**
+     * Max duration for range slider (minutes)
+     * @default 0
+     */
+    maxDuration?: number;
+    /**
+     * Step value for duration range slider
+     * @default 1
+     */
+    durationStep?: number;
+    /**
+     * Whether the filter data is still loading (shows skeleton)
+     * @default false
+     */
+    isLoading?: boolean;
+}
+interface ModalFilterTicketLabels {
+    title: string;
+    serviceTypeLabel: string;
+    departureTimeLabel: string;
+    arrivalTimeLabel: string;
+    priceLabel: string;
+    priceRangeText: (min: number, max: number) => string;
+    durationLabel: string;
+    durationRangeText: (min: number, max: number) => string;
+    resetButton: string;
+    applyButton: string;
+    hourUnit: string;
+    minuteUnit: string;
+    currencySymbol: string;
+    closeAriaLabel: string;
+}
+
+declare const ModalFilterTicket: React$1.FC<ModalFilterTicketProps>;
+
+declare const DEFAULT_LABELS$1: Record<Language, ModalFilterTicketLabels>;
+declare const DEFAULT_SERVICE_TYPES: {
+    value: string;
+    label: string;
+}[];
+declare const DEFAULT_TIME_SLOTS: {
+    value: string;
+    label: string;
+}[];
+declare const DEFAULT_PRICE_RANGE: {
+    min: number;
+    max: number;
+};
+declare const DEFAULT_DURATION_RANGE: {
+    min: number;
+    max: number;
+};
+
+interface DateItem {
+    /**
+     * Formatted date label (e.g., "Kam, 06 Nov 2025")
+     */
+    label: string;
+    /**
+     * Price for this date
+     */
+    price: string;
+    /**
+     * Optional raw date value
+     */
+    value?: Date | string;
+}
+interface DateFilterProps {
+    /**
+     * Array of date items to display
+     */
+    dates: DateItem[];
+    /**
+     * Currently selected date label
+     */
+    selectedDate: string;
+    /**
+     * Language for localization
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Callback when a date is clicked
+     */
+    onDateClick: (dateLabel: string) => void;
+    /**
+     * Callback when calendar button is clicked
+     */
+    onCalendarClick: () => void;
+    /**
+     * Show navigation arrows
+     * @default true
+     */
+    showNavigation?: boolean;
+    /**
+     * Show calendar button
+     * @default true
+     */
+    showCalendarButton?: boolean;
+    /**
+     * Scroll amount in pixels for navigation
+     * @default 150
+     */
+    scrollAmount?: number;
+    /**
+     * Optional custom labels
+     */
+    labels?: Partial<DateFilterLabels>;
+    isLoading?: boolean;
+}
+interface DateFilterLabels {
+    prevButtonAriaLabel: string;
+    nextButtonAriaLabel: string;
+    calendarButtonAriaLabel: string;
+}
+
+declare const DateFilter: React$1.FC<DateFilterProps>;
+
+declare const DEFAULT_LABELS: Record<Language, DateFilterLabels>;
+declare const DEFAULT_SCROLL_AMOUNT = 150;
+
+/**
+ * Labels for ModalSearchTicket component
+ */
+interface ModalSearchTicketLabels {
+    title: string;
+    fromLabel: string;
+    fromPlaceholder: string;
+    fromRequired: string;
+    toLabel: string;
+    toPlaceholder: string;
+    toRequired: string;
+    departureDateLabel: string;
+    departureDatePlaceholder: string;
+    departureDateRequired: string;
+    roundTripLabel: string;
+    returnDateLabel: string;
+    returnDatePlaceholder: string;
+    returnDateRequired: string;
+    serviceClassLabel: string;
+    serviceClassPlaceholder: string;
+    typeOfServiceLabel: string;
+    typeOfServicePlaceholder: string;
+    passengerLabel: string;
+    passengerPlaceholder: string;
+    searchButton: string;
+    closeAriaLabel: string;
+}
+/**
+ * Form data structure for search ticket modal
+ */
+interface SearchTicketFormData {
+    /**
+     * Origin harbor name
+     */
+    from: string;
+    /**
+     * Destination harbor name
+     */
+    to: string;
+    /**
+     * Departure date
+     */
+    startDate: string;
+    /**
+     * Whether this is a round trip
+     * @default false
+     */
+    roundTrip: boolean;
+    /**
+     * Return date (required if roundTrip is true)
+     */
+    endDate: string;
+    /**
+     * Selected service class display text
+     */
+    serviceClass: string;
+    /**
+     * Selected type of service display text
+     */
+    typeOfService: string;
+    /**
+     * Passenger count display text
+     */
+    passenger: string;
+}
+/**
+ * Props for ModalSearchTicket component
+ */
+interface ModalSearchTicketProps extends Partial<DialogProps> {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalSearchTicketLabels>;
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Default values for the form fields
+     */
+    defaultValues?: Partial<SearchTicketFormData>;
+    /**
+     * Callback when origin harbor field is clicked
+     */
+    onSelectOrigin?: () => void;
+    /**
+     * Callback when destination harbor field is clicked
+     */
+    onSelectDestination?: () => void;
+    /**
+     * Callback when origin harbor value changes
+     * Typically used to clear destination when origin changes
+     */
+    onFromChange?: () => void;
+    /**
+     * Callback when departure date field is clicked
+     */
+    onSelectDepartureDate?: () => void;
+    /**
+     * Callback when return date field is clicked
+     */
+    onSelectReturnDate?: () => void;
+    /**
+     * Callback when service class field is clicked
+     */
+    onSelectServiceClass?: () => void;
+    /**
+     * Callback when type of service field is clicked
+     */
+    onSelectTypeOfService?: () => void;
+    /**
+     * Callback when passenger field is clicked
+     */
+    onSelectPassenger?: () => void;
+    /**
+     * Callback when switch harbor button is clicked
+     * @deprecated Use onSwitchClick instead
+     */
+    onSwitchHarbor?: () => void;
+    /**
+     * Callback when switch harbor button is clicked
+     */
+    onSwitchClick?: () => void;
+    /**
+     * Callback when round trip toggle changes
+     */
+    onRoundTripChange?: (value: boolean) => void;
+    /**
+     * Callback when form is submitted
+     */
+    onSubmit?: (data: SearchTicketFormData) => void;
+    /**
+     * Disabled states for each field
+     */
+    toDisabled?: boolean;
+    endDateDisabled?: boolean;
+    serviceClassDisabled?: boolean;
+    typeOfServiceDisabled?: boolean;
+    roundTripDisabled?: boolean;
+    /**
+     * Whether the submit button should be disabled
+     * @default false
+     */
+    isSubmitDisabled?: boolean;
+    /**
+     * Whether the switch harbor button should be disabled
+     * @default false
+     */
+    switchDisabled?: boolean;
+    /**
+     * Whether the switch harbor button should be rotating
+     * @default false
+     */
+    isRotating?: boolean;
+    /**
+     * Whether to show the passenger field
+     * @default false
+     */
+    showPassengerField?: boolean;
+    /**
+     * Whether to show the round trip toggle
+     * @default true
+     */
+    showRoundTrip?: boolean;
+}
+
+/**
+ * ModalSearchTicket - A reusable modal component for searching ferry tickets
+ *
+ * This component provides a comprehensive form interface for searching ferry tickets with features like:
+ * - Origin and destination harbor selection
+ * - Departure and return date selection
+ * - Round trip toggle
+ * - Service class selection
+ * - Type of service selection
+ * - Passenger count selection
+ * - Harbor switching functionality
+ *
+ * @example
+ * ```tsx
+ * <ModalSearchTicket
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   defaultValues={{
+ *     from: 'Merak',
+ *     to: 'Bakauheni',
+ *     startDate: '12 Januari 2026',
+ *     roundTrip: false,
+ *     endDate: '',
+ *     serviceClass: '2 Jenis Layanan',
+ *     typeOfService: 'Pejalan Kaki',
+ *     passenger: '2 Penumpang',
+ *   }}
+ *   onSelectOrigin={() => openOriginModal()}
+ *   onSelectDestination={() => openDestinationModal()}
+ *   onSelectDepartureDate={() => openDateModal()}
+ *   onSelectReturnDate={() => openReturnDateModal()}
+ *   onSelectServiceClass={() => openServiceClassModal()}
+ *   onSelectTypeOfService={() => openTypeOfServiceModal()}
+ *   onSelectPassenger={() => openPassengerModal()}
+ *   onSwitchHarbor={() => switchHarbors()}
+ *   onSubmit={(data) => handleSearch(data)}
+ *   isSubmitDisabled={!isFormValid}
+ * />
+ * ```
+ */
+declare const ModalSearchTicket: React$1.FC<ModalSearchTicketProps>;
+
+interface StepperStep {
+    id: string;
+    label: string;
+    number: number;
+}
+interface StepperProps {
+    /**
+     * Array of steps to display
+     */
+    steps: StepperStep[];
+    /**
+     * Current active step (can be step id or step number)
+     */
+    currentStep: string | number;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Custom colors for stepper elements
+     */
+    colors?: {
+        active?: string;
+        completed?: string;
+        inactive?: string;
+        activeBackground?: string;
+        completedBackground?: string;
+        inactiveBackground?: string;
+        label?: string;
+        connectorDefault?: string;
+        connectorCompleted?: string;
+        connectorActive?: string;
+    };
+    /**
+     * Custom dimensions for stepper elements
+     */
+    dimensions?: {
+        height?: string;
+        mobileHeight?: string;
+        circleSize?: string;
+        mobileCircleSize?: string;
+        ferryIconWidth?: string;
+        ferryIconHeight?: string;
+        mobileFerryIconWidth?: string;
+        mobileFerryIconHeight?: string;
+    };
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: 'id' | 'en';
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<StepperLabels>;
+}
+interface StepperLabels {
+    stepperBackgroundAlt: string;
+    ferryIconAlt: string;
+}
+type StepStatus = 'completed' | 'active' | 'inactive';
+
+declare const Stepper: React$1.FC<StepperProps>;
+
+interface Orderer {
+    name?: string;
+    phoneNumber?: string;
+    email?: string;
+}
+interface CardOrdererInfoLabels {
+    title: string;
+    ordererName: string;
+    phoneNumber: string;
+    email: string;
+}
+interface CardOrdererInfoProps {
+    /**
+     * Language for labels (Indonesian or English)
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Orderer information
+     */
+    orderer?: Orderer;
+    /**
+     * Custom labels override (optional)
+     * If not provided, default labels based on language will be used
+     */
+    labels?: Partial<CardOrdererInfoLabels>;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+
+declare const CardOrdererInfo: React$1.FC<CardOrdererInfoProps>;
+
+interface ModalListPassengerLabels {
+    title: string;
+    searchPlaceholder: string;
+    addPassengerButton: string;
+    cancelButton: string;
+    editPassengerAriaLabel: string;
+    categories: {
+        adult: string;
+        child: string;
+        infant: string;
+        elderly: string;
+    };
+}
+interface ModalListPassengerProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     * @default "Detail Penumpang"
+     */
+    title?: string;
+    /**
+     * List of available passengers to display
+     */
+    passengers: Passenger[];
+    passengerAgeId: number;
+    /**
+     * Current search query value
+     */
+    searchQuery: string;
+    /**
+     * Callback when search query changes
+     */
+    onSearchChange: (query: string) => void;
+    /**
+     * Callback when a passenger is selected
+     */
+    onSelectPassenger: (passenger: Passenger) => void;
+    /**
+     * Callback when edit button is clicked for a passenger
+     */
+    onEditPassenger: (passenger: Passenger) => void;
+    /**
+     * Callback when "Tambah Penumpang" button is clicked
+     */
+    onAddPassenger: () => void;
+    /**
+     * Whether "Sama Dengan Pemesan" is checked
+     */
+    /**
+     * Callback when "Sama Dengan Pemesan" switch changes
+     */
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalListPassengerLabels>;
+}
+
+/**
+ * ModalListPassenger - A reusable modal component for selecting passengers from a list
+ *
+ * This component provides a modal interface for selecting passengers with features like:
+ * - Search functionality
+ * - "Sama Dengan Pemesan" toggle
+ * - Edit passenger option
+ * - Add new passenger option
+ *
+ * @example
+ * ```tsx
+ * <ModalListPassenger
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   passengers={passengerList}
+ *   searchQuery={search}
+ *   onSearchChange={setSearch}
+ *   onSelectPassenger={handleSelect}
+ *   onEditPassenger={handleEdit}
+ *   onAddPassenger={handleAdd}
+ * />
+ * ```
+ */
+declare const ModalListPassenger: React$1.FC<ModalListPassengerProps>;
+
+interface ScannedData {
+    title?: string;
+    name?: string;
+    idNumber?: string;
+    city?: string;
+    age?: number;
+}
+interface ModalPassengerFormLabels {
+    title: string;
+    titleLabel: string;
+    titlePlaceholder: string;
+    nameLabel: string;
+    namePlaceholder: string;
+    idTypeLabel: string;
+    idTypePlaceholder: string;
+    idNumberLabel: string;
+    idNumberPlaceholder: string;
+    age: string;
+    agePlaceholder: string;
+    yearLabel: string;
+    monthLabel: string;
+    dateLabel: string;
+    datePlaceholder: string;
+    cityLabel: string;
+    cityPlaceholder: string;
+    ticketClassLabel: string;
+    saveButton: string;
+    cancelButton: string;
+    idTypeOtherLabel: string;
+    idTypeOtherPlaceholder: string;
+    countryLabel: string;
+    countryPlaceholder: string;
+    autofill: string;
+    phoneNumberLabel: string;
+    phoneNumberPlaceholder: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    selectIdTypeTitle: string;
+    scanIdentityTitle: string;
+    scanInstructions1: string;
+    scanInstructions2: string;
+    readingData: string;
+    nameRead: string;
+    idNumberRead: string;
+    cityRead: string;
+    scanUnreadable: string;
+    photoNotClear: string;
+    retakeAdvice: string;
+    retakeButton: string;
+    manualInputButton: string;
+    cancelScanButton: string;
+    savePhotoButton: string;
+    cameraPermissionError: string;
+    errors: {
+        requiredTitle: string;
+        requiredName: string;
+        minLengthName: string;
+        requiredIdType: string;
+        requiredIdNumber: string;
+        lengthIdNumber: string;
+        requiredAge: string;
+        minAge: string;
+        maxAge: string;
+        requiredDate: string;
+        birthDateFuture: string;
+        requiredCity: string;
+        requiredCountry: string;
+        requiredPhoneNumber: string;
+        minLengthPhoneNumber: string;
+        invalidEmail: string;
+        invalidName: string;
+        invalidIdNumber: string;
+    };
+}
+interface PassengerFormData {
+    /**
+     * Passenger ID (for edit mode)
+     */
+    id?: number;
+    /**
+     * title id
+     */
+    titleId?: string;
+    /**
+     * Full name
+     */
+    fullName?: string;
+    /**
+     * Birth date
+     */
+    birthdate?: string;
+    /**
+     * Age (display string, auto-calculated from birthdate)
+     */
+    ageLabel?: string;
+    /**
+     * Age (auto-calculated display value, e.g. "25 tahun 3 bulan")
+     */
+    age?: string;
+    /**
+     * identityTypeId
+     */
+    identityTypeId?: string;
+    /**
+     * Country Id - for passport holders
+     */
+    countryId?: string;
+    /**
+     * identityId
+     */
+    identityId?: string;
+    /**
+     * Regency ID
+     */
+    regencyId?: string;
+    /**
+     * Email
+     */
+    email?: string;
+    /**
+     * Phone Number
+     */
+    phoneNumber?: string;
+    /**
+     * Is Account Owner
+     */
+    isAccountOwner?: boolean;
+    /**
+     * Ticket class
+     */
+    passengerClassId?: string;
+}
+interface ModalPassengerFormProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Callback when form is changed
+     */
+    onChange: (data: PassengerFormData) => void;
+    /**
+     * Modal title
+     * @default "Detail Penumpang"
+     */
+    title?: string;
+    /**
+     * Callback when form is submitted
+     */
+    onSubmit: (data: PassengerFormData) => void;
+    /**
+     * Default values for the form
+     */
+    defaultValues?: PassengerFormData;
+    /**
+     * Options for title select field
+     */
+    titleOptions: SelectOption[];
+    /**
+     * Options for identity type select field
+     */
+    idTypes: IdentityType[];
+    /**
+     * Options for country select field
+     */
+    countryOptions: SelectOption[];
+    /**
+     * Options for city select field
+     */
+    cityOptions: SelectOption[];
+    /**
+     * Options for ticket class radio field
+     */
+    ticketClassOptions: RadioOption[];
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalPassengerFormLabels>;
+    /**
+     * Callback when scan identity completes successfully
+     * Receives the scanned data for external processing
+     */
+    onScanComplete?: (data: ScannedData) => void;
+    /**
+     * Whether the form is currently submitting
+     */
+    isLoading?: boolean;
+}
+
+declare const ModalPassengerForm: React$1.FC<ModalPassengerFormProps>;
+
+interface CardPassengerListLabels {
+    defaultTitle: string;
+    passengerPrefix: string;
+}
+interface CardPassengerListProps {
+    /**
+     * Language for labels (Indonesian or English)
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Card title
+     * @default "Data Penumpang"
+     */
+    title?: string;
+    /**
+     * List of passengers to display
+     */
+    passengers: Passenger[];
+    /**
+     * Callback when a passenger is clicked
+     */
+    onPassengerClick: (passenger: Passenger) => void;
+    /**
+     * Custom labels override (optional)
+     * If not provided, default labels based on language will be used
+     */
+    labels?: Partial<CardPassengerListLabels>;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+
+/**
+ * CardPassengerList - A reusable card component for displaying passenger list
+ *
+ * This component provides a card interface for showing passengers with features like:
+ * - Header with title and divider line
+ * - List of passengers with service class badges
+ * - Clickable passenger items
+ * - Badge with overlapping icon design
+ *
+ * @example
+ * ```tsx
+ * <CardPassengerList
+ *   title="Data Penumpang"
+ *   passengers={passengerList}
+ *   onPassengerClick={handleClick}
+ * />
+ * ```
+ */
+declare const CardPassengerList: React$1.FC<CardPassengerListProps>;
+
+interface CardVehicleDetailLabels {
+    title: string;
+    vehicleNumberLabel: string;
+    vehicleNumberPlaceholder: string;
+    hasLoadLabel: string;
+    yesLabel: string;
+    noLabel: string;
+    vehicleNumberFormatError: string;
+}
+interface CardVehicleDetailProps {
+    /**
+     * Title of the vehicle service type
+     */
+    serviceTitle: string;
+    /**
+     * Image URL for the vehicle service
+     */
+    serviceImage: string;
+    /**
+     * React Hook Form control
+     */
+    control: Control<any>;
+    /**
+     * Disable edit vehicle detail
+    */
+    disabled: boolean;
+    /**
+     * Name of the form field for vehicle number
+     * @default "vehicleNumber"
+     */
+    vehicleNumberName?: string;
+    /**
+     * Whether to show the "Has Load" radio option
+     * @default false
+     */
+    showLoadOption?: boolean;
+    /**
+     * Current value of "Has Load" option
+     */
+    hasLoad?: 'true' | 'false';
+    /**
+     * Has Load Change Handler
+     */
+    onHasLoadChange?: (value: 'true' | 'false') => void;
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardVehicleDetailLabels>;
+}
+
+declare const CardVehicleDetail: React$1.FC<CardVehicleDetailProps>;
+
+interface CargoItem {
+    id: number;
+    commodity: string;
+    cargoType: string;
+    quantity: number | string;
+    industryType: string;
+    cargoCategory: string;
+}
+interface VehicleOwner {
+    id: number;
+    cargoOwnerEntityType: MANIFEST_ENTITY_TYPE;
+    cargoOwnerEntity: string;
+    cargoOwnerEntityOther: string;
+    logisticsEntityType: MANIFEST_ENTITY_TYPE;
+    logisticsEntity: string;
+    logisticsEntityOther: string;
+    cargoReceiverEntityType: MANIFEST_ENTITY_TYPE;
+    cargoReceiverEntity: string;
+    cargoReceiverEntityOther: string;
+    cargoWeight: string;
+    estimatedWeight: string;
+    originCity: string;
+    destinationCity: string;
+    cargoItems: CargoItem[];
+}
+interface CardVehicleOwnerFormProps {
+    /**
+     * List of owners to display
+     */
+    owners: VehicleOwner[];
+    /**
+     * Whether the vehicle has load/cargo
+     */
+    hasLoad: boolean;
+    /**
+     * React Hook Form control
+     */
+    control: Control<any>;
+    /**
+     * Disable edit
+    */
+    disabled: boolean;
+    /**
+     * React Hook Form watch function
+     */
+    watch: UseFormWatch<any>;
+    /**
+     * React Hook Form setValue function
+     */
+    setValue: UseFormSetValue<any>;
+    /**
+     * React Hook Form getValues function
+     */
+    getValues: UseFormGetValues<any>;
+    /**
+     * Callback to add a new owner
+     */
+    onAddOwner: () => void;
+    /**
+     * Callback to delete an owner
+     */
+    onDeleteOwner: (id: number) => void;
+    /**
+     * Callback to update an owner's data
+     */
+    onUpdateOwner: (id: number, data: Partial<VehicleOwner>) => void;
+    /**
+     * Callback to add a cargo item to an owner
+     */
+    onAddCargo: (ownerId: number) => void;
+    /**
+     * Callback to delete a cargo item
+     */
+    onDeleteCargo: (ownerId: number, cargoId: number) => void;
+    /**
+     * Callback to update cargo quantity
+     */
+    onUpdateCargoQuantity: (ownerId: number, cargoId: number, quantity: number) => void;
+    /**
+     * Options for company owner select inputs
+     */
+    companyOwnerOptions?: SelectOption[];
+    /**
+     * Options for company logistics select inputs
+     */
+    companyLogisticsOptions?: SelectOption[];
+    /**
+     * Options for company receiver select inputs
+     */
+    companyReceiverOptions?: SelectOption[];
+    /**
+     * Options for city select inputs
+     */
+    cityOriginOptions?: SelectOption[];
+    /**
+     * Options for city select inputs
+     */
+    cityDestinationOptions?: SelectOption[];
+    /**
+     * Options for commodity select inputs
+     */
+    commodityOptions?: SelectOption[];
+    /**
+     * Options for load type select inputs (raw, used as fallback)
+     */
+    loadTypeOptions?: (LoadType & {
+        commodityId?: number;
+    })[];
+    loadTypes?: (LoadType & {
+        commodityId?: number;
+    })[];
+    /**
+     * Map of commodityId -> SelectOption[] fetched from backend per cargo commodity.
+     * When provided, each cargo's cargoType dropdown will use the matching entry.
+     */
+    loadTypeOptionsByCommodityId?: Record<string, SelectOption[]>;
+    /**
+     * Options for industry select inputs
+     */
+    industryOptions?: SelectOption[];
+    /**
+     * Options for load category select inputs
+     */
+    loadCategoryOptions?: SelectOption[];
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: 'id' | 'en';
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardVehicleOwnerFormLabels>;
+}
+interface CardVehicleOwnerFormLabels {
+    title: string;
+    addOwnerButton: string;
+    ownerInfoTitle: string;
+    entityTypeCompany: string;
+    entityTypeIndividual: string;
+    selectCompanyPlaceholder: string;
+    inputSenderNamePlaceholder: string;
+    estimatedWeightLabel: string;
+    inputNumberPlaceholder: string;
+    originCityLabel: string;
+    destinationCityLabel: string;
+    selectPlaceholder: string;
+    cargoOwnerTitle: string;
+    cargoOwnerCompanyPlaceholder: string;
+    cargoOwnerIndividualPlaceholder: string;
+    otherCompanyHelperText: string;
+    logisticsCompanyTitle: string;
+    logisticsCompanyPlaceholder: string;
+    logisticsIndividualPlaceholder: string;
+    cargoReceiverTitle: string;
+    cargoReceiverCompanyPlaceholder: string;
+    cargoReceiverIndividualPlaceholder: string;
+    totalWeightLabel: string;
+    commentLabel: string;
+    cargoListTitle: string;
+    cargoItemTitle: string;
+    commodityLabel: string;
+    commodityHelperTextPrefix: string;
+    hereLinkText: string;
+    cargoTypeLabel: string;
+    cargoTypeHelperText: string;
+    cargoQuantityLabel: string;
+    priceLabel: string;
+    industryTypeLabel: string;
+    industryTypeHelperText: string;
+    cargoCategoryLabel: string;
+    cargoCategoryHelperTextPrefix: string;
+    deleteCargoButton: string;
+    addCargoButton: string;
+    cargoTypeOptions: {
+        karung: string;
+        kg: string;
+        ton: string;
+        unit: string;
+    };
+    pricePlaceholder: string;
+    currencySymbol: string;
+    deleteOwnerAriaLabel: string;
+    decrementQuantityAriaLabel: string;
+    incrementQuantityAriaLabel: string;
+}
+
+declare const CardVehicleOwnerForm: React$1.FC<CardVehicleOwnerFormProps>;
+
+type ReservationStep = 'manifest' | 'addon' | 'meals' | 'review' | 'payment' | 'eticket' | string;
+type PaymentStep = 'method' | 'pay' | string;
+interface CardBookingTicketLabels {
+    bookingDetails: string;
+    routeTitle: string;
+    estimationPrefix: string;
+    totalPriceLabel: string;
+    nextButton: string;
+    cancelButton: string;
+    previousButton: string;
+    viewBookingButton: string;
+    changePaymentButton: string;
+    timezoneLabel: string;
+    currencySymbol: string;
+    cancelDialogTitle: string;
+    cancelDialogBody: string;
+    cancelDialogConfirm: string;
+    cancelDialogDismiss: string;
+}
+interface CardBookingTicketProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardBookingTicketLabels>;
+    /**
+     * Provider Logo
+     */
+    providerLogo?: string;
+    /**
+     * Ship Name (e.g. KMP PORTLINK)
+     */
+    shipName?: string;
+    /**
+     * Service Title (e.g. Kendaraan Roda Dua • Mobil Penumpang)
+     */
+    serviceTitle?: string;
+    /**
+     * Ship Type (e.g. Executive, Reguler)
+     */
+    shipType?: string;
+    /**
+     * Badge color for ship type
+     */
+    shipTypeColor?: string;
+    /**
+     * Departure Day (e.g. Kamis, 25 Sep)
+     */
+    departureDay?: string;
+    /**
+     * Departure Time (e.g. 18:15)
+     */
+    departureTime?: string;
+    /**
+     * Departure Location (e.g. Merak, Banten)
+     */
+    departureLocation?: string;
+    /**
+     * Arrival Day (e.g. Jumat, 26 Sep)
+     */
+    arrivalDay?: string;
+    /**
+     * Arrival Time (e.g. 19:25)
+     */
+    arrivalTime?: string;
+    /**
+     * Arrival Location (e.g. Bakauheni, Lampung)
+     */
+    arrivalLocation?: string;
+    /**
+     * Duration string (e.g. 1 jam 10 menit)
+     */
+    duration?: number;
+    /**
+     * Disable Next button
+     */
+    disableNextButton?: boolean;
+    /**
+     * Total price formatted string (e.g. 50.000)
+     */
+    totalPrice: string;
+    /**
+     * Current Reservation Step
+     */
+    reservationStep: ReservationStep;
+    /**
+     * Current Payment Step
+     */
+    paymentStep: PaymentStep;
+    /**
+     * Callback for price detail click
+     */
+    onPriceDetailClick: () => void;
+    onCancel: () => void;
+    /**
+     * Callback for Next button (Lanjutkan / Lihat Pemesanan)
+     */
+    onNext: () => void;
+    /**
+     * Callback for Previous button (Sebelumnya / Ubah Metode Pembayaran)
+     */
+    onPrevious: () => void;
+    /**
+     * Whether to show or hide the card (though usually handled by parent)
+     */
+    className?: string;
+}
+
+declare const CardBookingTicket: React$1.FC<CardBookingTicketProps>;
+
+interface FAQItem {
+    id: number;
+    question: string;
+    answer: string;
+}
+interface CardFAQLabels {
+    title: string;
+}
+interface CardFAQProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardFAQLabels>;
+    /**
+     * List of FAQ items
+     * If not provided, default items will be shown
+     */
+    items?: FAQItem[];
+    /**
+     * Optional class name for the container
+     */
+    className?: string;
+}
+
+declare const CardFAQ: React$1.FC<CardFAQProps>;
+
+interface AddonFooterData {
+    priceLabel: string;
+    price: number;
+    priceUnit?: string;
+    actionLabel?: string;
+    onActionClick?: () => void;
+    actionType: 'detail-link' | 'primary-button';
+}
+interface AssuranceItem {
+    label: string;
+    priceDetails: string;
+    totalPrice: number;
+}
+interface AssuranceData {
+    totalPassenger: number;
+    items: AssuranceItem[];
+    totalPrice: number;
+}
+interface MealItem$1 {
+    id: number;
+    name: string;
+    image: string;
+    description: string;
+    price: number;
+    quantity: number;
+}
+interface MealData {
+    items: MealItem$1[];
+    onUpdateQuantity: (id: number, delta: number) => void;
+    onDelete: (id: number) => void;
+}
+interface CardAddonLabels {
+    viewDetail: string;
+    totalPrice: string;
+    passengerInsurance: string;
+    removeOrder: string;
+    currencySymbol: string;
+}
+interface CardAddonProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardAddonLabels>;
+    /**
+     * Main title of the card header
+     */
+    title: string;
+    /**
+     * Title of the content item
+     */
+    itemTitle: string;
+    /**
+     * Subtitle of the content item
+     */
+    itemSubtitle: string;
+    /**
+     * URL of the icon image
+     */
+    iconUrl?: string;
+    /**
+     * Description text displayed below the item content
+     */
+    description?: string;
+    /**
+     * Action element displayed on the right side of the item content (e.g. Switch)
+     */
+    rightAction?: React$1.ReactNode;
+    /**
+     * Data driven footer configuration
+     */
+    footerData?: AddonFooterData;
+    /**
+     * Data for Assurance breakdown view
+     */
+    assuranceData?: AssuranceData;
+    /**
+     * Data for Meal list view
+     */
+    mealData?: MealData;
+    /**
+     * Optional custom children (fallback)
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Optional class name
+     */
+    className?: string;
+}
+
+declare const CardAddon: React$1.FC<CardAddonProps>;
+
+interface CardMealCatalogLabels {
+    addButton: string;
+    currencySymbol: string;
+    decrementAriaLabel: string;
+    incrementAriaLabel: string;
+    searchPlaceholder: string;
+}
+interface MealItem {
+    id: number;
+    name: string;
+    description?: string;
+    price: number;
+    image: string;
+    quantity: number;
+    [key: string]: any;
+}
+interface MealCategory {
+    category: string;
+    list: MealItem[];
+}
+interface CardMealCatalogProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardMealCatalogLabels>;
+    /**
+     * Configuration for the top banner
+     */
+    banner: {
+        imageUrl: string;
+        title: string;
+        subtitle: string;
+    };
+    /**
+     * Text displayed in the disclaimer box
+     */
+    disclaimerText: string;
+    /**
+     * List of meal categories and their items
+     */
+    categories: MealCategory[];
+    /**
+     * Callback when "Tambah" button is clicked
+     */
+    onAdd: (item: MealItem) => void;
+    /**
+     * Callback when quantity is updated (+ or -)
+     */
+    onUpdateQuantity: (itemId: number, delta: number) => void;
+    /**
+     * Optional class name
+     */
+    className?: string;
+    /**
+     * Current search value
+     */
+    searchValue?: string;
+    /**
+     * Callback when search value changes
+     */
+    onSearchChange?: (value: string) => void;
+}
+
+declare const CardMealCatalog: React$1.FC<CardMealCatalogProps>;
+
+interface ReviewItem {
+    label: React$1.ReactNode;
+    value: React$1.ReactNode;
+    /**
+     * Optional class name for the row container
+     */
+    className?: string;
+    /**
+     * Optional class name for the label
+     */
+    labelClassName?: string;
+    /**
+     * Optional class name for the value
+     */
+    valueClassName?: string;
+}
+interface CardReviewLabels {
+    defaultTitle: string;
+}
+interface CardReviewProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardReviewLabels>;
+    /**
+     * Title of the section (e.g. "Detail Pemesan")
+     */
+    title: string;
+    /**
+     * Optional items to display as list rows
+     */
+    items?: ReviewItem[];
+    /**
+     * Custom children content (will be rendered after items if both exist)
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Optional class name for the card
+     */
+    className?: string;
+    /**
+     * Optional action in the header (e.g. Ubah button) - though not present in current designs, good for extensibility
+     */
+    headerAction?: React$1.ReactNode;
+}
+
+declare const CardReview: React$1.FC<CardReviewProps>;
+
+interface ReviewPassengerItem {
+    id: string | number;
+    name: string;
+    identityNumber: string;
+    ageLabel: string;
+    ageValue: string;
+    ticketClass: string;
+    serviceClass?: string;
+}
+interface CardReviewPassengerLabels {
+    title: string;
+    idNumber: string;
+}
+interface CardReviewPassengerProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardReviewPassengerLabels>;
+    /**
+     * Title of the card section, defaults to "Penumpang"
+     */
+    title?: string;
+    /**
+     * List of passengers to display
+     */
+    passengers: ReviewPassengerItem[];
+    /**
+     * Optional class name
+     */
+    className?: string;
+}
+
+declare const CardReviewPassenger: React$1.FC<CardReviewPassengerProps>;
+
+interface PriceItem {
+    name: string;
+    price: number;
+    /**
+     * If true, the value will be displayed with a minus sign or specific style (e.g. discount)
+     */
+    isRedeem?: boolean;
+    /**
+     * Variant for the text color
+     */
+    variant?: 'default' | 'danger' | 'muted';
+    /**
+     * Optional description helper text (e.g. for tax explanation)
+     */
+    description?: string;
+}
+interface PriceSection {
+    category?: string;
+    title?: string;
+    detail: PriceItem[];
+}
+interface CardPriceDetailsLabels {
+    defaultTitle: string;
+    totalPayment: string;
+    bookingTerms: string[];
+    agreementInfo: string;
+    agreementLinkFerizy: string;
+    agreementCovidInfo: string;
+    agreementCovidLink: string;
+    agreementFinal: string;
+    currencyPrefix: string;
+}
+interface CardPriceDetailsProps {
+    /**
+     * Language for labels (Indonesian or English)
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Title of the card, defaults to "Rincian Harga"
+     */
+    title?: string;
+    /**
+     * Sections of price details
+     */
+    sections: PriceSection[];
+    /**
+     * Total payment details
+     */
+    total: number;
+    /**
+     * Custom labels override (optional)
+     * If not provided, default labels based on language will be used
+     */
+    labels?: Partial<CardPriceDetailsLabels>;
+}
+
+declare const CardPriceDetails: React$1.FC<CardPriceDetailsProps>;
+
+interface PaymentOption {
+    label: string;
+    value: string;
+    image: string;
+    disabled?: boolean;
+}
+interface PaymentMethodCategory {
+    title: string;
+    value: string;
+    options: PaymentOption[];
+}
+interface CardPaymentMethodListLabels {
+    selectAriaLabel: string;
+}
+interface CardPaymentMethodListProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardPaymentMethodListLabels>;
+    methods: PaymentMethodCategory[];
+    selectedValue?: string;
+    onSelect: (value: string) => void;
+}
+
+declare const CardPaymentMethodList: React$1.FC<CardPaymentMethodListProps>;
+
+interface PaymentGuideStep {
+    title: string;
+    value: string;
+    steps: string[];
+}
+interface CardPaymentGuideLabels {
+    title: string;
+}
+interface CardPaymentGuideProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardPaymentGuideLabels>;
+    title?: string;
+    guides: PaymentGuideStep[];
+    className?: string;
+}
+
+declare const CardPaymentGuide: React$1.FC<CardPaymentGuideProps>;
+
+interface BankInfo {
+    name: string;
+    icon: string;
+}
+interface CardPaymentInfoLabels {
+    expiryPrefix: string;
+    copyCodeButton: string;
+    totalPayment: string;
+    checkStatusInfo: string;
+    checkStatusButton: string;
+    currencySymbol: string;
+    changePayment: string;
+}
+interface CardPaymentInfoProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardPaymentInfoLabels>;
+    expiryDate: string;
+    bank: BankInfo;
+    virtualAccount: string;
+    totalAmount: number;
+    guides: PaymentGuideStep[];
+    onCopyVA?: () => void;
+    onCheckStatus?: () => void;
+    onChangePayment?: () => void;
+}
+
+declare const CardPaymentInfo: React$1.FC<CardPaymentInfoProps>;
+
+interface CardStatusOrderLabels {
+    detailTitle: string;
+    statusLabel: string;
+    bookingCodeLabel: string;
+    scheduleLabel: string;
+    routeLabel: string;
+    userTypeLabel: string;
+    serviceLabel: string;
+    viewTicketButton: string;
+    defaultStatus: string;
+    defaultTitle: string;
+    defaultDescription: string;
+    illustrationAlt: string;
+}
+interface CardStatusOrderProps {
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<CardStatusOrderLabels>;
+    bookingCode: string;
+    departureDate: string;
+    departureTime: string;
+    arrivalDate: string;
+    arrivalTime: string;
+    origin: string;
+    destination: string;
+    duration?: string;
+    vehicleClass: string;
+    serviceType: string;
+    vehicleNumber?: string;
+    shipType?: string;
+    statusLabel?: string;
+    statusIcon?: JSX.Element;
+    statusColor?: 'success' | 'danger' | 'warning' | 'brand' | 'important' | 'informative' | 'severe' | 'subtle';
+    illustrationUrl?: string;
+    title?: string;
+    description?: string;
+    onClickViewTicket?: () => void;
+    isLoading?: boolean;
+    className?: string;
+}
+
+declare const CardStatusOrder: React$1.FC<CardStatusOrderProps>;
+
+interface ModalPriceDetailLabels {
+    title: string;
+    addonHeader: string;
+    subTotalLabel: string;
+    totalTagihanLabel: string;
+    ppnLabel: string;
+    ppnNote: string;
+    grandTotalLabel: string;
+    currencyPrefix: string;
+    currencyCode: string;
+    closeAriaLabel: string;
+}
+interface PriceDetailItem {
+    key: string;
+    label: string | React.ReactNode;
+    price: number;
+    badge?: string;
+    list?: PriceDetailItem[];
+}
+interface ModalPriceDetailProps {
+    isOpen: boolean;
+    onOpenChange: (open: boolean) => void;
+    detailItems: PriceDetailItem[];
+    addonItems: PriceDetailItem[];
+    subTotal: number;
+    taxAmount: number;
+    grandTotal: number;
+    /**
+     * Language for labels
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override
+     */
+    labels?: Partial<ModalPriceDetailLabels>;
+}
+
+declare const ModalPriceDetail: React$1.FC<ModalPriceDetailProps>;
+
+interface FileUploadLabels {
+    placeholder: string;
+    maxSizeWarning: string;
+    sizeLabel: string;
+    preview: string;
+    requiredError: string;
+    downloadTemplateDocument: string;
+}
+interface FileUploadProps<T extends FieldValues = FieldValues> {
+    name: Path<T>;
+    control: Control<any>;
+    label: string;
+    required?: boolean;
+    accept?: string;
+    maxSize?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    language?: Language;
+    labels?: Partial<FileUploadLabels>;
+    /**
+     * URL or path for the PDF icon image.
+     * This should be provided by the consumer app.
+     * Example: '/assets/images/icons/pdficon.svg'
+     */
+    pdfIcon?: string;
+    downloadTemplateDocument?: boolean;
+    /**
+     * Optional info label text to display with an info icon next to the label.
+     * When not provided, no info label is displayed.
+     * Example: 'Maximum file size is 10MB'
+     */
+    infoLabel?: string;
+}
+
+declare const FileUpload: React$1.ForwardRefExoticComponent<FileUploadProps<react_hook_form.FieldValues> & React$1.RefAttributes<HTMLDivElement>>;
+
+interface BadgeConfig {
+    code: string;
+    color: string;
+    icon: string;
+}
+/**
+ * Get badge configuration based on ticket class
+ * @param ticketClass - The ticket class (ECONOMY, BUSINESS, EXECUTIVE)
+ * @returns Badge configuration with color and icon path
+ */
+declare const getBadgeConfig: (ticketClass?: string) => BadgeConfig;
+
+/**
+ * Menghitung usia (tahun dan bulan) berdasarkan tanggal lahir
+ * @param {string | Date} birthDate - Tanggal lahir
+ * @returns {{ years: number, months: number }} Object berisi years dan months
+ */
+declare const calculateAge: (birthDate: string | Date) => {
+    years: number;
+    months: number;
+};
+
+declare function hexToRgba(hex: string, alpha?: number): string;
+
+interface ProfileMenuTab {
+    label: string;
+    value: string;
+    icon: string;
+    href?: string;
+}
+interface ProfileMenuSection {
+    sectionLabel: string;
+    tabs: ProfileMenuTab[];
+}
+interface CardProfileMenuLabels {
+}
+interface CardProfileMenuProps {
+    /**
+     * Language for labels (Indonesian or English)
+     * @default 'id'
+     */
+    language?: Language;
+    /**
+     * Custom labels override (optional)
+     */
+    labels?: Partial<CardProfileMenuLabels>;
+    /**
+     * List of menu sections with tabs
+     */
+    sections: ProfileMenuSection[];
+    /**
+     * Currently selected tab value
+     */
+    selectedValue?: string;
+    /**
+     * Callback when a tab is selected
+     */
+    onTabSelect: (value: string) => void;
+}
+
+declare const CardProfileMenu: React$1.FC<CardProfileMenuProps>;
+
+interface ModalPreviewImageProps {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Callback when the modal open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** The image URL to preview */
+    imageUrl: string | null;
+    /** Alt text for the preview image */
+    alt?: string;
+}
+
+declare const ModalPreviewImage: React$1.FC<ModalPreviewImageProps>;
+
+interface ModalListMenuServiceProps {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+    menuItems?: CardServiceMenuItem[];
+    onItemClick?: (item: CardServiceMenuItem) => void;
+    showDescriptions?: boolean;
+}
+
+declare const ModalListMenuService: React$1.FC<ModalListMenuServiceProps>;
+
+export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard, BackgroundTicketCardVertical, type BadgeConfig, type BillingDetail, COUNTRIES, CardAddon, type CardAddonProps, CardBanner, type CardBannerProps, CardBookingTicket, type CardBookingTicketProps, CardFAQ, type CardFAQProps, CardMealCatalog, type CardMealCatalogProps, CardOrdererInfo, type CardOrdererInfoProps, CardPassengerList, type CardPassengerListProps, CardPaymentGuide, type CardPaymentGuideProps, CardPaymentInfo, type CardPaymentInfoProps, CardPaymentMethodList, type CardPaymentMethodListProps, CardPriceDetails, type CardPriceDetailsProps, CardProfileMenu, type CardProfileMenuLabels, type CardProfileMenuProps, CardPromo, type CardPromoProps, CardReview, CardReviewPassenger, type CardReviewPassengerProps, type CardReviewProps, CardServiceMenu, type CardServiceMenuProps, CardStatusOrder, type CardStatusOrderProps, CardTicket, type CardTicketProps, CardTicketSearch, DEFAULT_LABELS$4 as CardTicketSearchDefaultLabels, type CardTicketSearchFormData, type CardTicketSearchLabels, type CardTicketSearchProps, type ServiceMenuItem as CardTicketSearchServiceMenuItem, CardTicketSearchSummary, DEFAULT_LABELS$3 as CardTicketSearchSummaryDefaultLabels, type CardTicketSearchSummaryProps, CardVehicleDetail, type CardVehicleDetailProps, CardVehicleOwnerForm, type CardVehicleOwnerFormProps, type CargoItem, CarouselWithCustomNav, type CarouselWithCustomNavProps, type CountryOption, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS as DateFilterDefaultLabels, type DateFilterLabels, type DateFilterProps, type DateItem, type DepartureItem, EmptyContent, type EmptyContentButton, DEFAULT_LABELS$2 as EmptyContentDefaultLabels, type EmptyContentLabels, type EmptyContentProps, FileUpload, type FileUploadProps, type FilterCount, GENDER, type GENDER_TYPE, HARDCODED_ID, HTTP_STATUS, type HarborItem, IDENTITY_TYPE, type IDENTITY_TYPE_TYPE, type IdentityType, InputDynamic, type InputDynamicProps, type InputType, LOAD_TYPE, type LOAD_TYPE_TYPE, type LoadType, MANIFEST_ENTITY, type MANIFEST_ENTITY_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, type MY_TICKET_STATUS_TYPE, MY_TICKET_TAB, type MY_TICKET_TAB_TYPE, type MealCategory, type MealItem, ModalFilterTicket, DEFAULT_LABELS$1 as ModalFilterTicketDefaultLabels, type ModalFilterTicketLabels, type ModalFilterTicketProps, ModalIllustration, type ModalIllustrationButton, type ModalIllustrationProps, ModalListMenuService, type ModalListMenuServiceProps, ModalListPassenger, type ModalListPassengerProps, ModalPassengerForm, type ModalPassengerFormProps, type ModalPresetKey, ModalPreviewImage, type ModalPreviewImageProps, ModalPriceDetail, type ModalPriceDetailProps, ModalSearchHarbor, type ModalSearchHarborProps, ModalSearchTicket, type ModalSearchTicketProps, ModalSelectDate, type ModalSelectDateProps, ModalService, type CardServiceMenuItem as ModalServiceItem, type ModalServiceProps, ModalTotalPassengers, type ModalTotalPassengersProps, ModalTypeOfService, type ModalTypeOfServiceProps, PASSENGER_TYPE, type PASSENGER_TYPE_TYPE, type Passenger, type PassengerClass, type PassengerFormData, type PassengerService, type PassengerType, type PaymentGuideStep, type PaymentMethodCategory, type PaymentStep, type PriceDetailItem, type ProfileMenuSection, type ProfileMenuTab, type Provider, type RadioOption, type ReservationStep, type ReviewPassengerItem, type RouteItem, type SearchSummaryField, type SearchTicketFormData, type SelectOption, type SelectedPassengerItem, type ServiceId, type ServiceItem, SortMenu, type SortMenuProps, type SortOption, type StepStatus, Stepper, type StepperProps, type StepperStep, type TabType, type TypeOfService, type VehicleOwner, calculateAge, getBadgeConfig, getModalPreset, getSortLabel, hexToRgba };