@asdp/ferryui 0.1.22-dev.8633 → 0.1.22-dev.8641

package/dist/index.mjs

@@ -12,6 +12,77 @@ import moment from 'moment';
 import { Range } from 'react-range';
 import { SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
 
+// src/components/ModalIllustration/ModalIllustration.constants.ts
+var DEFAULT_LABELS = {
+  id: {
+    defaultImageAlt: "Ilustrasi",
+    defaultTitle: "Informasi",
+    defaultButtonText: "Tutup"
+  },
+  en: {
+    defaultImageAlt: "Illustration",
+    defaultTitle: "Information",
+    defaultButtonText: "Close"
+  }
+};
+var PRESET_CONTENT = {
+  RADIUS: {
+    id: {
+      title: "Anda berada di luar area pemesanan",
+      message: "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.",
+      imageSrc: "/assets/images/illustrations/radius.svg",
+      imageAlt: "Radius Limitation Illustration"
+    },
+    en: {
+      title: "You are outside the booking area",
+      message: "Ticket booking cannot be done from your current location. Location restriction feature is active to prevent unauthorized booking.",
+      imageSrc: "/assets/images/illustrations/radius.svg",
+      imageAlt: "Radius Limitation Illustration"
+    }
+  },
+  SESSION_EXPIRED: {
+    id: {
+      title: "Sesi anda telah berakhir",
+      message: "Waktu sesi Anda telah habis untuk alasan keamanan. Silakan klik tombol dibawah untuk masuk kembali.",
+      imageSrc: "/assets/images/illustrations/sessionexp.svg",
+      imageAlt: "Session Expired Illustration"
+    },
+    en: {
+      title: "Your session has expired",
+      message: "Your session time has run out for security reasons. Please click the button below to sign in again.",
+      imageSrc: "/assets/images/illustrations/sessionexp.svg",
+      imageAlt: "Session Expired Illustration"
+    }
+  },
+  PURCHASE_PERIOD_EXPIRED: {
+    id: {
+      title: "Waktu pembelian telah berakhir",
+      message: "Pemesanan tiket ditutup 1 jam sebelum jadwal keberangkatan. Silakan pilih jadwal keberangkatan lain yang masih tersedia.",
+      imageSrc: "/assets/images/illustrations/pay.svg",
+      imageAlt: "Purchase Period Expired Illustration"
+    },
+    en: {
+      title: "Purchase period has expired",
+      message: "Ticket booking closes 1 hour before departure schedule. Please choose another available departure schedule.",
+      imageSrc: "/assets/images/illustrations/pay.svg",
+      imageAlt: "Purchase Period Expired Illustration"
+    }
+  },
+  TRANSACTION_LIMIT: {
+    id: {
+      title: "Anda mencapai batas transaksi tertunda",
+      message: "Anda telah mencapai batas transaksi tertunda. Pemesanan dapat dilakukan kembali setelah transaksi sebelumnya diselesaikan.",
+      imageSrc: "/assets/images/illustrations/mobile-pay.svg",
+      imageAlt: "Transaction Limit Illustration"
+    },
+    en: {
+      title: "Pending transaction limit reached",
+      message: "You have reached the pending transaction limit. Booking can be done again after the previous transaction is completed.",
+      imageSrc: "/assets/images/illustrations/mobile-pay.svg",
+      imageAlt: "Transaction Limit Illustration"
+    }
+  }
+};
 var useStyles = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -42,96 +113,82 @@ var ModalIllustration = ({
   title,
   message,
   imageSrc = "/assets/images/illustrations/radius.svg",
-  imageAlt = "Illustration",
+  imageAlt,
   imageWidth = 361,
   imageHeight = 203,
   primaryButton,
-  secondaryButton
+  secondaryButton,
+  language = "id",
+  labels
 }) => {
   const styles = useStyles();
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => !data.open && onClose(), modalType: "modal", children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-    /* @__PURE__ */ jsx(DialogTitle, { children: title }),
-    /* @__PURE__ */ jsxs(DialogContent, { children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.iconContainer, children: [
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: imageSrc,
-            alt: imageAlt,
-            width: imageWidth,
-            height: imageHeight,
-            className: styles.image
-          }
-        ),
-        typeof message === "string" ? /* @__PURE__ */ jsx(Body1, { style: { textAlign: "center" }, children: message }) : message
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.buttonContainer, children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            style: { width: "100%" },
-            type: "button",
-            appearance: primaryButton.appearance || "primary",
-            onClick: primaryButton.onClick,
-            children: primaryButton.text
-          }
-        ),
-        secondaryButton && /* @__PURE__ */ jsx(
-          Button,
-          {
-            style: { width: "100%" },
-            type: "button",
-            appearance: secondaryButton.appearance || "outline",
-            onClick: secondaryButton.onClick,
-            children: secondaryButton.text
-          }
-        )
-      ] })
-    ] })
-  ] }) }) });
+  const mergedLabels = { ...DEFAULT_LABELS[language], ...labels };
+  const displayImageAlt = imageAlt || mergedLabels.defaultImageAlt;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => !data.open && onClose(),
+      modalType: "modal",
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.iconContainer, children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imageSrc,
+                alt: displayImageAlt,
+                width: imageWidth,
+                height: imageHeight,
+                className: styles.image
+              }
+            ),
+            typeof message === "string" ? /* @__PURE__ */ jsx(Body1, { style: { textAlign: "center" }, children: message }) : message
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.buttonContainer, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                style: { width: "100%" },
+                type: "button",
+                appearance: primaryButton.appearance || "primary",
+                onClick: primaryButton.onClick,
+                children: primaryButton.text
+              }
+            ),
+            secondaryButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                style: { width: "100%" },
+                type: "button",
+                appearance: secondaryButton.appearance || "outline",
+                onClick: secondaryButton.onClick,
+                children: secondaryButton.text
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
 };
 
 // src/components/ModalIllustration/presets.ts
-var MODAL_PRESETS = {
-  /**
-   * Modal for radius/location restriction
-   */
-  RADIUS: {
-    title: "Anda berada di luar area pemesanan",
-    message: "Pemesanan tiket tidak dapat dilakukan dari lokasi Anda saat ini. Fitur pembatasan wilayah sedang aktif untuk mencegah pemesanan tidak sah.",
-    imageSrc: "/assets/images/illustrations/radius.svg",
-    imageAlt: "Radius Limitation Illustration"
-  },
-  /**
-   * Modal for expired session
-   */
-  SESSION_EXPIRED: {
-    title: "Sesi anda telah berakhir",
-    message: "Waktu sesi Anda telah habis untuk alasan keamanan. Silakan klik tombol dibawah untuk masuk kembali.",
-    imageSrc: "/assets/images/illustrations/sessionexp.svg",
-    imageAlt: "Session Expired Illustration"
-  },
-  /**
-   * Modal for purchase period expired
-   */
-  PURCHASE_PERIOD_EXPIRED: {
-    title: "Waktu pembelian telah berakhir",
-    message: "Pemesanan tiket ditutup 1 jam sebelum jadwal keberangkatan. Silakan pilih jadwal keberangkatan lain yang masih tersedia.",
-    imageSrc: "/assets/images/illustrations/pay.svg",
-    imageAlt: "Purchase Period Expired Illustration"
-  },
-  /**
-   * Modal for transaction limit reached
-   */
-  TRANSACTION_LIMIT: {
-    title: "Anda mencapai batas transaksi tertunda",
-    message: "Anda telah mencapai batas transaksi tertunda. Pemesanan dapat dilakukan kembali setelah transaksi sebelumnya diselesaikan.",
-    imageSrc: "/assets/images/illustrations/mobile-pay.svg",
-    imageAlt: "Transaction Limit Illustration"
-  }
+var getModalPreset = (presetKey, language = "id") => {
+  const content = PRESET_CONTENT[presetKey][language];
+  return {
+    title: content.title,
+    message: content.message,
+    imageSrc: content.imageSrc,
+    imageAlt: content.imageAlt
+  };
 };
-var getModalPreset = (presetKey) => {
-  return MODAL_PRESETS[presetKey];
+var MODAL_PRESETS = {
+  RADIUS: getModalPreset("RADIUS", "id"),
+  SESSION_EXPIRED: getModalPreset("SESSION_EXPIRED", "id"),
+  PURCHASE_PERIOD_EXPIRED: getModalPreset("PURCHASE_PERIOD_EXPIRED", "id"),
+  TRANSACTION_LIMIT: getModalPreset("TRANSACTION_LIMIT", "id")
 };
 var useStyles2 = makeStyles({
   carousel: {},
@@ -254,7 +311,7 @@ var CarouselWithCustomNav = ({
 };
 
 // src/components/CardPromo/CardPromo.constants.ts
-var DEFAULT_LABELS = {
+var DEFAULT_LABELS2 = {
   id: {
     defaultImageAlt: "Gambar Promo",
     defaultButtonText: "Lihat Detail"
@@ -365,7 +422,7 @@ var CardPromo = ({
   labels
 }) => {
   const classes = useStyles3();
-  const mergedLabels = { ...DEFAULT_LABELS[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS2[language], ...labels };
   const displayImageAlt = imageAlt || mergedLabels.defaultImageAlt;
   const displayButtonText = buttonText || mergedLabels.defaultButtonText;
   const ariaLabel = totalCards ? `Card ${index + 1} of ${totalCards}` : `Promo card ${index + 1}`;
@@ -464,6 +521,20 @@ var CardPromo = ({
     }
   );
 };
+
+// src/components/CardBanner/CardBanner.constants.ts
+var DEFAULT_LABELS3 = {
+  id: {
+    bannerAriaLabel: "Banner {index} dari {total}",
+    bannerAriaLabelSingle: "Banner {index}",
+    loadingBanner: "Memuat banner"
+  },
+  en: {
+    bannerAriaLabel: "Banner {index} of {total}",
+    bannerAriaLabelSingle: "Banner {index}",
+    loadingBanner: "Loading banner"
+  }
+};
 var useStyles4 = makeStyles({
   bannerCard: {
     overflow: "hidden",
@@ -491,41 +562,50 @@ var CardBanner = ({
   index = 0,
   totalBanners,
   onClick,
-  isLoading = false
+  isLoading = false,
+  language = "id",
+  labels
 }) => {
   const classes = useStyles4();
-  const ariaLabel = totalBanners ? `Banner ${index + 1} of ${totalBanners}` : `Banner ${index + 1}`;
+  const mergedLabels = {
+    ...DEFAULT_LABELS3[language],
+    ...labels
+  };
+  const ariaLabel = totalBanners ? mergedLabels.bannerAriaLabel.replace("{index}", (index + 1).toString()).replace("{total}", totalBanners.toString()) : mergedLabels.bannerAriaLabelSingle.replace(
+    "{index}",
+    (index + 1).toString()
+  );
   if (isLoading) {
-    return /* @__PURE__ */ jsx(CarouselCard, { className: classes.bannerCard, children: /* @__PURE__ */ jsx(Skeleton, { "aria-label": "Loading banner", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
-      SkeletonItem,
+    return /* @__PURE__ */ jsx(CarouselCard, { className: classes.bannerCard, children: /* @__PURE__ */ jsx(
+      Skeleton,
       {
-        shape: "rectangle",
-        style: {
-          width: "100%",
-          height: "100%",
-          borderRadius: tokens.borderRadiusXLarge
-        }
+        "aria-label": mergedLabels.loadingBanner,
+        style: { width: "100%", height: "100%" },
+        children: /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            shape: "rectangle",
+            style: {
+              width: "100%",
+              height: "100%",
+              borderRadius: tokens.borderRadiusXLarge
+            }
+          }
+        )
       }
-    ) }) });
+    ) });
   }
-  return /* @__PURE__ */ jsx(
-    CarouselCard,
+  return /* @__PURE__ */ jsx(CarouselCard, { className: classes.bannerCard, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(
+    "img",
     {
-      className: classes.bannerCard,
-      "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          className: classes.bannerImage,
-          src: imageUrl,
-          alt,
-          role: "presentation",
-          onClick,
-          style: { cursor: onClick ? "pointer" : "default" }
-        }
-      )
+      className: classes.bannerImage,
+      src: imageUrl,
+      alt,
+      role: "presentation",
+      onClick,
+      style: { cursor: onClick ? "pointer" : "default" }
     }
-  );
+  ) });
 };
 function useWindowSize() {
   const [windowSize, setWindowSize] = useState({
@@ -671,7 +751,7 @@ var extendedTokens = {
   colorBrandForegroundLinkSelected: customBrand[110]});
 
 // src/components/CardTicket/CardTicket.constants.ts
-var DEFAULT_LABELS2 = {
+var DEFAULT_LABELS4 = {
   id: {
     availableSeatsLabel: "Tersedia",
     estimationPrefix: "Estimasi",
@@ -913,7 +993,7 @@ var CardTicket = ({
 }) => {
   const styles = useStyles5();
   const { width } = useWindowSize();
-  const mergedLabels = { ...DEFAULT_LABELS2[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS4[language], ...labels };
   const getCircularVerticalConfig = () => {
     if (width <= 1600) return { count: 6, spacing: 60, top: 10 };
     return { count: 5, spacing: 60, top: 18 };
@@ -1417,6 +1497,56 @@ var BackgroundTicketCardVertical = (props) => /* @__PURE__ */ jsxs(
   }
 );
 var BackgroundTicketCardVertical_default = BackgroundTicketCardVertical;
+
+// src/components/CardServiceMenu/CardServiceMenu.constants.ts
+var DEFAULT_LABELS5 = {
+  id: {
+    ferryLabel: "Ferry",
+    ferryDescription: "Layanan penyeberangan ferry ASDP",
+    ifcsLabel: "IFCS",
+    ifcsDescription: "Integrated Ferry Control System",
+    skptLabel: "SKPT",
+    skptDescription: "Sistem Karcis Penumpang Terpadu",
+    hotelLabel: "Hotel",
+    hotelDescription: "Layanan pemesanan hotel",
+    otherLabel: "Lainnya",
+    otherDescription: "Layanan lainnya"
+  },
+  en: {
+    ferryLabel: "Ferry",
+    ferryDescription: "ASDP Ferry Crossing Service",
+    ifcsLabel: "IFCS",
+    ifcsDescription: "Integrated Ferry Control System",
+    skptLabel: "SKPT",
+    skptDescription: "Integrated Passenger Ticketing System",
+    hotelLabel: "Hotel",
+    hotelDescription: "Hotel Booking Service",
+    otherLabel: "Other",
+    otherDescription: "Other Services"
+  }
+};
+var ALIAS_MENU_ITEMS = {
+  ferry: {
+    id: "ferry",
+    logo: "/assets/images/icons/ferry.svg"
+  },
+  ifcs: {
+    id: "ifcs",
+    logo: "/assets/logo/asdp-default.svg"
+  },
+  skpt: {
+    id: "skpt",
+    logo: "/assets/logo/asdp-default.svg"
+  },
+  hotel: {
+    id: "hotel",
+    logo: "/assets/images/icons/hotel.svg"
+  },
+  other: {
+    id: "other",
+    logo: "/assets/images/icons/other.svg"
+  }
+};
 var useStyles6 = makeStyles({
   card: {
     width: "100%",
@@ -1509,66 +1639,26 @@ var useStyles6 = makeStyles({
     }
   }
 });
-var SERVICE_MENU_ITEMS = {
-  ferry: {
-    id: "ferry",
-    logo: "/assets/images/icons/ferry.svg",
-    labels: {
-      id: { label: "Ferry", description: "Layanan penyeberangan ferry ASDP" },
-      en: { label: "Ferry", description: "ASDP Ferry Crossing Service" }
-    }
-  },
-  ifcs: {
-    id: "ifcs",
-    logo: "/assets/logo/asdp-default.svg",
-    labels: {
-      id: { label: "IFCS", description: "Integrated Ferry Control System" },
-      en: { label: "IFCS", description: "Integrated Ferry Control System" }
-    }
-  },
-  skpt: {
-    id: "skpt",
-    logo: "/assets/logo/asdp-default.svg",
-    labels: {
-      id: { label: "SKPT", description: "Sistem Karcis Penumpang Terpadu" },
-      en: { label: "SKPT", description: "Integrated Passenger Ticketing System" }
-    }
-  },
-  hotel: {
-    id: "hotel",
-    logo: "/assets/images/icons/hotel.svg",
-    labels: {
-      id: { label: "Hotel", description: "Layanan pemesanan hotel" },
-      en: { label: "Hotel", description: "Hotel Booking Service" }
-    }
-  },
-  other: {
-    id: "other",
-    logo: "/assets/images/icons/other.svg",
-    labels: {
-      id: { label: "Lainnya", description: "Layanan lainnya" },
-      en: { label: "Other", description: "Other Services" }
-    }
-  }
-};
 var CardServiceMenu = ({
   activeServiceId = "ferry",
   language = "id",
   onServiceClick,
   showDescriptions = true,
-  className
+  className,
+  labels
 }) => {
   const styles = useStyles6();
+  const mergedLabels = { ...DEFAULT_LABELS5[language], ...labels };
   const getMenuItemClass = (serviceId) => {
     const isActive = activeServiceId === serviceId;
-    return mergeClasses(
-      styles.menuItem,
-      isActive && styles.menuItemActive
-    );
+    return mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
   };
-  const menuItems = Object.values(SERVICE_MENU_ITEMS);
+  const menuItems = Object.values(ALIAS_MENU_ITEMS);
   return /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsx("div", { className: styles.menuList, children: menuItems.map((item, index) => {
-    const { label, description } = item.labels[language];
+    const labelKey = `${item.id}Label`;
+    const descriptionKey = `${item.id}Description`;
+    const label = mergedLabels[labelKey];
+    const description = mergedLabels[descriptionKey];
     return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         Button,
@@ -1576,14 +1666,7 @@ var CardServiceMenu = ({
           className: getMenuItemClass(item.id),
           onClick: () => onServiceClick?.(item.id),
           children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: item.logo,
-                alt: label,
-                className: styles.logo
-              }
-            ),
+            /* @__PURE__ */ jsx("img", { src: item.logo, alt: label, className: styles.logo }),
             /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
               /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
               showDescriptions && /* @__PURE__ */ jsx("span", { className: styles.description, children: description })
@@ -1689,6 +1772,26 @@ var DatePickerInput = forwardRef(
 );
 DatePickerInput.displayName = "DatePickerInput";
 var DatePickerInput_default = DatePickerInput;
+
+// src/components/InputDynamic/InputDynamic.constants.ts
+var DEFAULT_LABELS6 = {
+  id: {
+    emailOrPhonePlaceholder: "Email atau Nomor HP",
+    emailPlaceholder: "Email",
+    phonePlaceholder: "Nomor HP",
+    identityPlaceholder: "Email, KTP, SIM, Passport, atau Nomor Telepon",
+    identityPhonePlaceholder: "Nomor telepon",
+    identityIdPlaceholder: "KTP, SIM, atau Passport"
+  },
+  en: {
+    emailOrPhonePlaceholder: "Email or Phone Number",
+    emailPlaceholder: "Email",
+    phonePlaceholder: "Phone Number",
+    identityPlaceholder: "Email, ID Card, Driving License, Passport, or Phone Number",
+    identityPhonePlaceholder: "Phone Number",
+    identityIdPlaceholder: "ID Card, Driving License, or Passport"
+  }
+};
 var PhoneInput = PhoneInputComponent.default || PhoneInputComponent;
 var useStyles7 = makeStyles({
   field: {
@@ -1931,13 +2034,18 @@ var InputDynamic = ({
   autoComplete,
   onInput,
   contentAfter,
-  onChange
+  onChange,
+  language = "id",
+  labels
 }) => {
   const styles = useStyles7();
+  const mergedLabels = { ...DEFAULT_LABELS6[language], ...labels };
   const [showPassword, setShowPassword] = useState(false);
   const [isPhoneMode, setIsPhoneMode] = useState(false);
   const [emailOrPhoneType, setEmailOrPhoneType] = useState("none");
-  const [identityType, setIdentityType] = useState("id");
+  const [identityType, setIdentityType] = useState(
+    "id"
+  );
   const [lastPhoneValue, setLastPhoneValue] = useState("");
   const [lastEmailOrPhoneValue, setLastEmailOrPhoneValue] = useState("");
   const inputRef = useRef(null);
@@ -2102,13 +2210,13 @@ var InputDynamic = ({
       updateEmailOrPhoneType(field.value);
       const stringValue = typeof field.value === "string" ? field.value : "";
       let inputType = "text";
-      let inputPlaceholder = placeholder || "Email atau Nomor HP";
+      let inputPlaceholder = placeholder || mergedLabels.emailOrPhonePlaceholder;
       if (emailOrPhoneType === "email") {
         inputType = "email";
-        inputPlaceholder = placeholder || "Email";
+        inputPlaceholder = placeholder || mergedLabels.emailPlaceholder;
       } else if (emailOrPhoneType === "phone") {
         inputType = "tel";
-        inputPlaceholder = placeholder || "Nomor HP";
+        inputPlaceholder = placeholder || mergedLabels.phonePlaceholder;
       }
       const normalizePhoneNumber = (val) => {
         if (!val) return val;
@@ -2209,16 +2317,16 @@ var InputDynamic = ({
       updateIdentityType(field.value);
       const stringValue = typeof field.value === "string" ? field.value : "";
       let inputType = "text";
-      let inputPlaceholder = placeholder || "Email, KTP, SIM, Passport, atau Nomor Telepon";
+      let inputPlaceholder = placeholder || mergedLabels.identityPlaceholder;
       if (identityType === "email") {
         inputType = "email";
-        inputPlaceholder = placeholder || "Email";
+        inputPlaceholder = placeholder || mergedLabels.emailPlaceholder;
       } else if (identityType === "phone") {
         inputType = "tel";
-        inputPlaceholder = placeholder || "Nomor telepon";
+        inputPlaceholder = placeholder || mergedLabels.identityPhonePlaceholder;
       } else if (identityType === "id") {
         inputType = "text";
-        inputPlaceholder = placeholder || "KTP, SIM, atau Passport";
+        inputPlaceholder = placeholder || mergedLabels.identityIdPlaceholder;
       }
       const cleanPhoneValue = (val) => {
         if (!val) return val;
@@ -2324,7 +2432,9 @@ var InputDynamic = ({
               autoCapitalize: "off",
               spellCheck: "false"
             },
-            value: isMultiSelect ? options.filter((option) => field.value?.includes(option.value)) : options.find((option) => option.value === field.value) || null,
+            value: isMultiSelect ? options.filter(
+              (option) => field.value?.includes(option.value)
+            ) : options.find((option) => option.value === field.value) || null,
             onChange: (selectedOption) => {
               if (isMultiSelect) {
                 const values = selectedOption ? selectedOption.map((opt) => opt.value) : [];
@@ -2349,21 +2459,27 @@ var InputDynamic = ({
           return stringVal;
         };
         const cleanedFieldValue = cleanPhoneValue(field.value || "");
-        return /* @__PURE__ */ jsx("div", { className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`, children: /* @__PURE__ */ jsx(
-          PhoneInput,
+        return /* @__PURE__ */ jsx(
+          "div",
           {
-            country: defaultCountry.toLowerCase(),
-            value: cleanedFieldValue,
-            onChange: (value, data) => {
-              const cleanedValue = cleanPhoneValue(value || "");
-              field.onChange(cleanedValue);
-            },
-            placeholder: placeholder || "Nomor telepon",
-            disabled,
-            enableSearch: true,
-            disableSearchIcon: true
+            className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`,
+            children: /* @__PURE__ */ jsx(
+              PhoneInput,
+              {
+                country: defaultCountry.toLowerCase(),
+                value: cleanedFieldValue,
+                onChange: (value, data) => {
+                  const cleanedValue = cleanPhoneValue(value || "");
+                  field.onChange(cleanedValue);
+                },
+                placeholder: placeholder || "Nomor telepon",
+                disabled,
+                enableSearch: true,
+                disableSearchIcon: true
+              }
+            )
           }
-        ) });
+        );
       }
       case "file":
         return /* @__PURE__ */ jsx(
@@ -2408,15 +2524,23 @@ var InputDynamic = ({
         );
       }
       case "radio":
-        return /* @__PURE__ */ jsx(RadioGroup, { ...field, disabled, layout: layout ?? "vertical", children: options.map((option) => /* @__PURE__ */ jsx(
-          Radio,
+        return /* @__PURE__ */ jsx(
+          RadioGroup,
           {
-            value: option.value,
-            label: option.label,
-            disabled: option.disabled
-          },
-          option.value
-        )) });
+            ...field,
+            disabled,
+            layout: layout ?? "vertical",
+            children: options.map((option) => /* @__PURE__ */ jsx(
+              Radio,
+              {
+                value: option.value,
+                label: option.label,
+                disabled: option.disabled
+              },
+              option.value
+            ))
+          }
+        );
       case "radiobutton":
         return /* @__PURE__ */ jsx(
           RadioGroup,
@@ -2551,7 +2675,9 @@ var InputDynamic = ({
           if (otpIndex2) {
             let lastFilledIndex = 0;
             for (let i = 1; i <= 6; i++) {
-              const input = document.querySelector(`[data-otp-index="${i}"]`);
+              const input = document.querySelector(
+                `[data-otp-index="${i}"]`
+              );
               if (input && input.value) {
                 lastFilledIndex = i;
               } else {
@@ -2751,7 +2877,15 @@ var InputDynamic = ({
           children: [
             label && type !== "checkbox" && /* @__PURE__ */ jsx(Label, { required, children: label }),
             renderInput(field, error?.message),
-            helperText && !error && /* @__PURE__ */ jsx(Text, { size: 200, style: { textAlign: "left" }, className: styles.helperText, children: helperText })
+            helperText && !error && /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: 200,
+                style: { textAlign: "left" },
+                className: styles.helperText,
+                children: helperText
+              }
+            )
           ]
         }
       )
@@ -3003,7 +3137,7 @@ var DEFAULT_COUNTRY_CODES = [
 ];
 
 // src/components/CardTicketSearch/CardTicketSearch.constants.ts
-var DEFAULT_LABELS3 = {
+var DEFAULT_LABELS7 = {
   id: {
     fromLabel: "Dari",
     toLabel: "Ke",
@@ -3179,7 +3313,7 @@ var CardTicketSearch = ({
 }) => {
   const styles = useStyles8();
   const labels = React5.useMemo(
-    () => ({ ...DEFAULT_LABELS3[language], ...customLabels }),
+    () => ({ ...DEFAULT_LABELS7[language], ...customLabels }),
     [language, customLabels]
   );
   const { control, setValue, getValues, handleSubmit } = useForm({
@@ -3565,7 +3699,7 @@ var CardTicketSearch = ({
 };
 
 // src/components/CardTicketSearchSummary/CardTicketSearchSummary.constants.ts
-var DEFAULT_LABELS4 = {
+var DEFAULT_LABELS8 = {
   id: {
     originHarbor: "Pelabuhan Keberangkatan",
     destinationHarbor: "Pelabuhan Tujuan",
@@ -3666,7 +3800,7 @@ var CardTicketSearchSummary = ({
   children
 }) => {
   const styles = useStyles9();
-  const mergedLabels = { ...DEFAULT_LABELS4[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS8[language], ...labels };
   const { width } = useWindowSize();
   const getCircularConfig = () => {
     if (width <= parseInt(extendedTokens.breakpointXs))
@@ -3991,7 +4125,7 @@ var CardTicketSearchSummary = ({
 };
 
 // src/components/ModalSearchHarbor/ModalSearchHarbor.constants.ts
-var DEFAULT_LABELS5 = {
+var DEFAULT_LABELS9 = {
   id: {
     title: "Pilih Pelabuhan",
     searchPlaceholder: "Cari Pelabuhan...",
@@ -4143,7 +4277,7 @@ var ModalSearchHarbor = ({
   onClearLastSearched
 }) => {
   const styles = useStyles10();
-  const mergedLabels = { ...DEFAULT_LABELS5[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS9[language], ...labels };
   const handleSelect = (harbor) => {
     onAddLastSearched(harbor);
     onSelectHarbor(harbor);
@@ -4291,7 +4425,7 @@ var ModalSearchHarbor = ({
 };
 
 // src/components/ModalSelectDate/ModalSelectDate.constants.ts
-var DEFAULT_LABELS6 = {
+var DEFAULT_LABELS10 = {
   id: {
     title: "Pilih Tanggal",
     oneWay: "Sekali Jalan",
@@ -4424,7 +4558,7 @@ var ModalSelectDate = ({
   showRoundtrip = true
 }) => {
   const styles = useStyles11();
-  const mergedLabels = { ...DEFAULT_LABELS6[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
   useEffect(() => {
     moment.locale(language === "id" ? "id" : "en");
   }, [language]);
@@ -4645,6 +4779,24 @@ var ModalSelectDate = ({
     }
   );
 };
+
+// src/components/ModalService/ModalService.constants.ts
+var DEFAULT_LABELS11 = {
+  id: {
+    title: "Pilih Kelas Layanan",
+    loading: "Memuat...",
+    error: "Gagal memuat layanan",
+    selectAll: "Pilih Semua",
+    saveButton: "Simpan"
+  },
+  en: {
+    title: "Select Service Class",
+    loading: "Loading...",
+    error: "Error loading services",
+    selectAll: "Select All",
+    saveButton: "Save"
+  }
+};
 var useStyles12 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -4719,9 +4871,11 @@ var useStyles12 = makeStyles({
   }
 });
 var ModalService = ({
+  language = "id",
+  labels,
   open,
   onClose,
-  title = "Pilih Kelas Layanan",
+  title,
   services,
   selectedServiceIds,
   onSave,
@@ -4729,6 +4883,8 @@ var ModalService = ({
   isError = false
 }) => {
   const styles = useStyles12();
+  const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
+  const displayTitle = title || mergedLabels.title;
   const [selectedServices, setSelectedServices] = useState(selectedServiceIds);
   useEffect(() => {
     if (open) {
@@ -4760,85 +4916,80 @@ var ModalService = ({
     }
   };
   const handleSave = () => {
-    const selectedServiceItems = services.filter((s) => selectedServices.includes(s.id));
+    const selectedServiceItems = services.filter(
+      (s) => selectedServices.includes(s.id)
+    );
     onSave(selectedServiceItems);
   };
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open,
-      onOpenChange: (_, data) => !data.open && onClose(),
-      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-        /* @__PURE__ */ jsx(
-          DialogTitle,
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => !data.open && onClose(), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+    /* @__PURE__ */ jsx(
+      DialogTitle,
+      {
+        action: /* @__PURE__ */ jsx(
+          Button,
           {
-            action: /* @__PURE__ */ jsx(
-              Button,
-              {
-                appearance: "subtle",
-                "aria-label": "close",
-                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
-                onClick: handleClose,
-                className: styles.closeButton
-              }
-            ),
-            children: title
+            appearance: "subtle",
+            "aria-label": "close",
+            icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
+            onClick: handleClose,
+            className: styles.closeButton
           }
         ),
-        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsx(Body1, { children: "Loading..." }) : isError ? /* @__PURE__ */ jsx(Body1, { children: "Error loading services" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: styles.serviceList, children: [
-            /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
-              /* @__PURE__ */ jsx(Body1, { children: "Pilih Semua" }),
+        children: displayTitle
+      }
+    ),
+    /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsx(Body1, { children: mergedLabels.loading }) : isError ? /* @__PURE__ */ jsx(Body1, { children: mergedLabels.error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.serviceList, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+          /* @__PURE__ */ jsx(Body1, { children: mergedLabels.selectAll }),
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selectedServices.length === services.length,
+              onChange: handleToggleAll
+            }
+          )
+        ] }),
+        services.map((service) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.serviceItem,
+            onClick: () => handleToggleService(service.id),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.serviceContent, children: [
+                /* @__PURE__ */ jsx(Body1, { className: styles.serviceName, children: service.serviceTypeName }),
+                /* @__PURE__ */ jsx(Caption1, { className: styles.serviceType, children: service.serviceTypeCode }),
+                /* @__PURE__ */ jsx(Caption1, { className: styles.serviceDescription, children: service.serviceDescription })
+              ] }),
               /* @__PURE__ */ jsx(
                 Checkbox,
                 {
-                  checked: selectedServices.length === services.length,
-                  onChange: handleToggleAll
+                  checked: selectedServices.includes(service.id),
+                  onChange: () => handleToggleService(service.id)
                 }
               )
-            ] }),
-            services.map((service) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: styles.serviceItem,
-                onClick: () => handleToggleService(service.id),
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: styles.serviceContent, children: [
-                    /* @__PURE__ */ jsx(Body1, { className: styles.serviceName, children: service.serviceTypeName }),
-                    /* @__PURE__ */ jsx(Caption1, { className: styles.serviceType, children: service.serviceTypeCode }),
-                    /* @__PURE__ */ jsx(Caption1, { className: styles.serviceDescription, children: service.serviceDescription })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    Checkbox,
-                    {
-                      checked: selectedServices.includes(service.id),
-                      onChange: () => handleToggleService(service.id)
-                    }
-                  )
-                ]
-              },
-              service.id
-            ))
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              appearance: "primary",
-              size: "medium",
-              className: styles.saveButton,
-              onClick: handleSave,
-              disabled: selectedServices.length === 0,
-              children: "Simpan"
-            }
-          ) })
-        ] }) })
-      ] }) })
-    }
-  );
+            ]
+          },
+          service.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.footer, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "primary",
+          size: "medium",
+          className: styles.saveButton,
+          onClick: handleSave,
+          disabled: selectedServices.length === 0,
+          children: mergedLabels.saveButton
+        }
+      ) })
+    ] }) })
+  ] }) }) });
 };
 
 // src/components/ModalTotalPassengers/ModalTotalPassengers.constants.ts
-var DEFAULT_LABELS7 = {
+var DEFAULT_LABELS12 = {
   id: {
     title: "Pilih Jumlah Penumpang",
     infoMessage: "Anda dapat menambahkan hingga {maxPassengers} penumpang pada golongan kendaraan ini.",
@@ -4945,7 +5096,7 @@ var ModalTotalPassengers = ({
   infoMessage
 }) => {
   const styles = useStyles13();
-  const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
   const [passengers, setPassengers] = useState([]);
   const [openItems, setOpenItems] = useState([]);
   const defaultInfoMessage = mergedLabels.infoMessage.replace(
@@ -5210,7 +5361,7 @@ var ModalTotalPassengers = ({
 };
 
 // src/components/ModalTypeOfService/ModalTypeOfService.constants.ts
-var DEFAULT_LABELS8 = {
+var DEFAULT_LABELS13 = {
   id: {
     title: "Pilih Tipe Layanan",
     cancelButton: "Batal",
@@ -5291,7 +5442,7 @@ var ModalTypeOfService = ({
   renderImage
 }) => {
   const styles = useStyles14();
-  const mergedLabels = { ...DEFAULT_LABELS8[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
   const [selectedServiceTitle, setSelectedServiceTitle] = useState(
     selectedService?.title || ""
   );
@@ -5644,7 +5795,7 @@ var SortMenu = ({
 };
 
 // src/components/ModalFilterTicket/ModalFilterTicket.constants.ts
-var DEFAULT_LABELS9 = {
+var DEFAULT_LABELS14 = {
   id: {
     title: "Filter dengan",
     serviceTypeLabel: "Jenis Layanan",
@@ -5809,7 +5960,7 @@ var ModalFilterTicket = ({
   maxDuration = DEFAULT_DURATION_RANGE.max
 }) => {
   const styles = useStyles16();
-  const mergedLabels = { ...DEFAULT_LABELS9[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
   const [rangeReady, setRangeReady] = useState(false);
   useEffect(() => {
     if (open) {
@@ -6115,7 +6266,7 @@ var ModalFilterTicket = ({
 };
 
 // src/components/DateFilter/DateFilter.constants.ts
-var DEFAULT_LABELS10 = {
+var DEFAULT_LABELS15 = {
   prevButtonAriaLabel: "Previous dates",
   nextButtonAriaLabel: "Next dates",
   calendarButtonAriaLabel: "Open calendar"
@@ -6204,7 +6355,7 @@ var DateFilter = ({
 }) => {
   const styles = useStyles17();
   const scrollRef = useRef(null);
-  const mergedLabels = { ...DEFAULT_LABELS10, ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS15, ...labels };
   const handlePrev = () => {
     scrollRef.current?.scrollBy({ left: -scrollAmount, behavior: "smooth" });
   };
@@ -6262,7 +6413,7 @@ var DateFilter = ({
 };
 
 // src/components/ModalSearchTicket/ModalSearchTicket.constants.ts
-var DEFAULT_LABELS11 = {
+var DEFAULT_LABELS16 = {
   id: {
     title: "Cari Jadwal Lainnya",
     fromLabel: "Dari",
@@ -6423,7 +6574,7 @@ var ModalSearchTicket = ({
   ...props
 }) => {
   const styles = useStyles18();
-  const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
   const { control, setValue, handleSubmit, watch } = useForm({
     defaultValues: {
       ...DEFAULT_FORM_VALUES,
@@ -6858,6 +7009,18 @@ var ModalSearchTicket = ({
     }
   );
 };
+
+// src/components/Stepper/Stepper.constants.ts
+var DEFAULT_LABELS17 = {
+  id: {
+    stepperBackgroundAlt: "Latar Belakang Stepper",
+    ferryIconAlt: "Ikon Kapal"
+  },
+  en: {
+    stepperBackgroundAlt: "Stepper Background",
+    ferryIconAlt: "Ferry Icon"
+  }
+};
 var useStyles19 = makeStyles({
   stepperWrapper: {
     position: "relative",
@@ -6979,9 +7142,12 @@ var useStyles19 = makeStyles({
 var Stepper = ({
   steps,
   currentStep,
-  className
+  className,
+  language = "id",
+  labels
 }) => {
   const styles = useStyles19();
+  const mergedLabels = { ...DEFAULT_LABELS17[language], ...labels };
   const currentStepIndex = useMemo(() => {
     if (typeof currentStep === "number") {
       return steps.findIndex((step) => step.number === currentStep);
@@ -7000,7 +7166,8 @@ var Stepper = ({
     const status = getStepStatus(stepNumber);
     const baseClass = styles.stepCircle;
     if (status === "active") return `${baseClass} ${styles.stepCircleActive}`;
-    if (status === "completed") return `${baseClass} ${styles.stepCircleCompleted}`;
+    if (status === "completed")
+      return `${baseClass} ${styles.stepCircleCompleted}`;
     return `${baseClass} ${styles.stepCircleInactive}`;
   };
   const getConnectorClass = (currentStepNumber) => {
@@ -7014,7 +7181,7 @@ var Stepper = ({
       "img",
       {
         src: "/assets/images/reservation/stepper_bg.svg",
-        alt: "Stepper Background",
+        alt: mergedLabels.stepperBackgroundAlt,
         className: styles.stepperBackground
       }
     ),
@@ -7024,7 +7191,7 @@ var Stepper = ({
           "img",
           {
             src: "/assets/images/reservation/ferry_step.svg",
-            alt: "Ferry",
+            alt: mergedLabels.ferryIconAlt,
             className: styles.ferryIcon
           }
         ) : /* @__PURE__ */ jsx("div", { className: getCircleClass(step.number), children: step.number }),
@@ -7036,7 +7203,7 @@ var Stepper = ({
 };
 
 // src/components/CardOrdererInfo/CardOrdererInfo.constants.ts
-var DEFAULT_LABELS12 = {
+var DEFAULT_LABELS18 = {
   id: {
     title: "Informasi Pemesan",
     ordererName: "Nama Pemesan",
@@ -7081,7 +7248,7 @@ var CardOrdererInfo = ({
   className
 }) => {
   const styles = useStyles20();
-  const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS18[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsx(Title3, { children: mergedLabels.title }),
     /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
@@ -7100,6 +7267,24 @@ var CardOrdererInfo = ({
     ] })
   ] });
 };
+
+// src/components/ModalListPassenger/ModalListPassenger.constants.ts
+var DEFAULT_LABELS19 = {
+  id: {
+    title: "Detail Penumpang",
+    sameAsOrderer: "Sama Dengan Pemesan",
+    searchPlaceholder: "Cari Penumpang",
+    addPassengerButton: "Tambah Penumpang",
+    cancelButton: "Batal"
+  },
+  en: {
+    title: "Passenger Details",
+    sameAsOrderer: "Same as Orderer",
+    searchPlaceholder: "Search Passenger",
+    addPassengerButton: "Add Passenger",
+    cancelButton: "Cancel"
+  }
+};
 var useStyles21 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -7141,9 +7326,11 @@ var useStyles21 = makeStyles({
   }
 });
 var ModalListPassenger = ({
+  language = "id",
+  labels,
   open,
   onClose,
-  title = "Detail Penumpang",
+  title,
   passengers,
   searchQuery,
   onSearchChange,
@@ -7154,6 +7341,8 @@ var ModalListPassenger = ({
   onSameAsOrdererChange
 }) => {
   const styles = useStyles21();
+  const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
+  const displayTitle = title || mergedLabels.title;
   const handleClose = () => {
     onClose();
     onSearchChange("");
@@ -7165,7 +7354,7 @@ var ModalListPassenger = ({
   const filteredPassengers = passengers.filter((passenger) => {
     if (!searchQuery) return true;
     const query = searchQuery.toLowerCase();
-    return passenger.name?.toLowerCase().includes(query) || passenger.category?.toLowerCase().includes(query);
+    return passenger.name && passenger.name.toLowerCase().includes(query) || passenger.category && passenger.category.toLowerCase().includes(query);
   });
   return /* @__PURE__ */ jsx(
     Dialog,
@@ -7183,12 +7372,12 @@ var ModalListPassenger = ({
             action: /* @__PURE__ */ jsx(
               Switch,
               {
-                label: "Sama Dengan Pemesan",
+                label: mergedLabels.sameAsOrderer,
                 checked: sameAsOrderer,
                 onChange: (_, data) => onSameAsOrdererChange(data.checked)
               }
             ),
-            children: /* @__PURE__ */ jsx(Subtitle1, { children: title })
+            children: /* @__PURE__ */ jsx(Subtitle1, { children: displayTitle })
           }
         ),
         /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
@@ -7197,7 +7386,7 @@ var ModalListPassenger = ({
             {
               className: styles.searchInput,
               contentBefore: /* @__PURE__ */ jsx(Icon, { icon: "fluent:search-24-regular" }),
-              placeholder: "Cari Penumpang",
+              placeholder: mergedLabels.searchPlaceholder,
               value: searchQuery,
               onChange: (_, data) => onSearchChange(data.value),
               size: "large"
@@ -7248,7 +7437,7 @@ var ModalListPassenger = ({
                 size: "large",
                 shape: "circular",
                 onClick: onAddPassenger,
-                children: "Tambah Penumpang"
+                children: mergedLabels.addPassengerButton
               }
             ),
             /* @__PURE__ */ jsx(
@@ -7258,7 +7447,7 @@ var ModalListPassenger = ({
                 size: "large",
                 shape: "circular",
                 onClick: handleClose,
-                children: "Batal"
+                children: mergedLabels.cancelButton
               }
             )
           ] })
@@ -7267,6 +7456,76 @@ var ModalListPassenger = ({
     }
   );
 };
+
+// src/components/ModalPassengerForm/ModalPassengerForm.constants.ts
+var DEFAULT_LABELS20 = {
+  id: {
+    title: "Detail Penumpang",
+    titleLabel: "Title",
+    titlePlaceholder: "Pilih",
+    nameLabel: "Nama Lengkap",
+    namePlaceholder: "Masukkan Nama",
+    idTypeLabel: "Jenis ID",
+    idTypePlaceholder: "Pilih",
+    idNumberLabel: "Nomor Identitas",
+    idNumberPlaceholder: "Masukkan Nomor Identitas",
+    ageLabel: "Usia",
+    agePlaceholder: "Masukkan Usia",
+    dateLabel: "Tanggal Lahir",
+    datePlaceholder: "Masukkan Tanggal Lahir",
+    cityLabel: "Kota Kabupaten",
+    cityPlaceholder: "Masukkan Nama Kota/Kabupaten",
+    ticketClassLabel: "Kelas penumpang",
+    saveButton: "Simpan",
+    cancelButton: "Batal",
+    errors: {
+      requiredTitle: "Title harus dipilih",
+      requiredName: "Nama lengkap harus diisi",
+      minLengthName: "Nama minimal 3 karakter",
+      requiredIdType: "Jenis ID harus dipilih",
+      requiredIdNumber: "Nomor identitas harus diisi",
+      minLengthIdNumber: "Nomor identitas minimal 6 karakter",
+      requiredAge: "Usia harus diisi",
+      minAge: "Usia minimal 1 tahun",
+      maxAge: "Usia maksimal 150 tahun",
+      requiredDate: "Tanggal lahir harus diisi",
+      requiredCity: "Kota/Kabupaten harus diisi"
+    }
+  },
+  en: {
+    title: "Passenger Details",
+    titleLabel: "Title",
+    titlePlaceholder: "Select",
+    nameLabel: "Full Name",
+    namePlaceholder: "Enter Name",
+    idTypeLabel: "ID Type",
+    idTypePlaceholder: "Select",
+    idNumberLabel: "Identity Number",
+    idNumberPlaceholder: "Enter Identity Number",
+    ageLabel: "Age",
+    agePlaceholder: "Enter Age",
+    dateLabel: "Date of Birth",
+    datePlaceholder: "Enter Date of Birth",
+    cityLabel: "City/Regency",
+    cityPlaceholder: "Enter City/Regency Name",
+    ticketClassLabel: "Passenger Class",
+    saveButton: "Save",
+    cancelButton: "Cancel",
+    errors: {
+      requiredTitle: "Title is required",
+      requiredName: "Full name is required",
+      minLengthName: "Name must be at least 3 characters",
+      requiredIdType: "ID type is required",
+      requiredIdNumber: "Identity number is required",
+      minLengthIdNumber: "Identity number must be at least 6 characters",
+      requiredAge: "Age is required",
+      minAge: "Age must be at least 1 year",
+      maxAge: "Age must be at most 150 years",
+      requiredDate: "Date of birth is required",
+      requiredCity: "City/Regency is required"
+    }
+  }
+};
 var useStyles22 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -7286,9 +7545,11 @@ var useStyles22 = makeStyles({
   }
 });
 var ModalPassengerForm = ({
+  language = "id",
+  labels,
   open,
   onClose,
-  title = "Detail Penumpang",
+  title,
   onSubmit,
   defaultValues,
   isAdultForm = true,
@@ -7298,6 +7559,12 @@ var ModalPassengerForm = ({
   ticketClassOptions
 }) => {
   const styles = useStyles22();
+  const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
+  const mergedErrors = {
+    ...DEFAULT_LABELS20[language].errors,
+    ...labels?.errors
+  };
+  const displayTitle = title || mergedLabels.title;
   const { control, handleSubmit, reset } = useForm({
     defaultValues
   });
@@ -7322,7 +7589,7 @@ var ModalPassengerForm = ({
         }
       },
       children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx(Subtitle1, { children: title }) }),
+        /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx(Subtitle1, { children: displayTitle }) }),
         /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), children: [
           /* @__PURE__ */ jsx(
             InputDynamic_default,
@@ -7330,13 +7597,13 @@ var ModalPassengerForm = ({
               name: "title",
               control,
               type: "select",
-              label: "Title",
-              placeholder: "Pilih",
+              label: mergedLabels.titleLabel,
+              placeholder: mergedLabels.titlePlaceholder,
               options: titleOptions,
               size: "large",
               required: true,
               validationRules: {
-                required: "Title harus dipilih"
+                required: mergedErrors.requiredTitle
               }
             }
           ),
@@ -7346,15 +7613,15 @@ var ModalPassengerForm = ({
               name: "name",
               control,
               type: "text",
-              label: "Nama Lengkap",
-              placeholder: "Masukkan Nama",
+              label: mergedLabels.nameLabel,
+              placeholder: mergedLabels.namePlaceholder,
               size: "large",
               required: true,
               validationRules: {
-                required: "Nama lengkap harus diisi",
+                required: mergedErrors.requiredName,
                 minLength: {
                   value: 3,
-                  message: "Nama minimal 3 karakter"
+                  message: mergedErrors.minLengthName
                 }
               }
             }
@@ -7366,13 +7633,13 @@ var ModalPassengerForm = ({
                 name: "idType",
                 control,
                 type: "select",
-                label: "Jenis ID",
-                placeholder: "Pilih",
+                label: mergedLabels.idTypeLabel,
+                placeholder: mergedLabels.idTypePlaceholder,
                 options: idTypeOptions,
                 size: "large",
                 required: true,
                 validationRules: {
-                  required: "Jenis ID harus dipilih"
+                  required: mergedErrors.requiredIdType
                 }
               }
             ),
@@ -7382,15 +7649,15 @@ var ModalPassengerForm = ({
                 name: "idNumber",
                 control,
                 type: "text",
-                label: "Nomor Identitas",
-                placeholder: "Masukkan Nomor Identitas",
+                label: mergedLabels.idNumberLabel,
+                placeholder: mergedLabels.idNumberPlaceholder,
                 size: "large",
                 required: true,
                 validationRules: {
-                  required: "Nomor identitas harus diisi",
+                  required: mergedErrors.requiredIdNumber,
                   minLength: {
                     value: 6,
-                    message: "Nomor identitas minimal 6 karakter"
+                    message: mergedErrors.minLengthIdNumber
                   }
                 }
               }
@@ -7401,19 +7668,19 @@ var ModalPassengerForm = ({
                 name: "age",
                 control,
                 type: "number",
-                label: "Usia",
-                placeholder: "Masukkan Usia",
+                label: mergedLabels.ageLabel,
+                placeholder: mergedLabels.agePlaceholder,
                 size: "large",
                 required: true,
                 validationRules: {
-                  required: "Usia harus diisi",
+                  required: mergedErrors.requiredAge,
                   min: {
                     value: 1,
-                    message: "Usia minimal 1 tahun"
+                    message: mergedErrors.minAge
                   },
                   max: {
                     value: 150,
-                    message: "Usia maksimal 150 tahun"
+                    message: mergedErrors.maxAge
                   }
                 }
               }
@@ -7424,12 +7691,12 @@ var ModalPassengerForm = ({
               name: "date",
               control,
               type: "date",
-              label: "Tanggal Lahir",
-              placeholder: "Masukkan Tanggal Lahir",
+              label: mergedLabels.dateLabel,
+              placeholder: mergedLabels.datePlaceholder,
               size: "large",
               required: true,
               validationRules: {
-                required: "Tanggal lahir harus diisi"
+                required: mergedErrors.requiredDate
               }
             }
           ) }),
@@ -7439,13 +7706,13 @@ var ModalPassengerForm = ({
               name: "cityId",
               control,
               type: "select",
-              label: "Kota Kabupaten",
+              label: mergedLabels.cityLabel,
               options: cityOptions,
-              placeholder: "Masukkan Nama Kota/Kabupaten",
+              placeholder: mergedLabels.cityPlaceholder,
               size: "large",
               required: true,
               validationRules: {
-                required: "Kota/Kabupaten harus diisi"
+                required: mergedErrors.requiredCity
               }
             }
           ),
@@ -7458,14 +7725,23 @@ var ModalPassengerForm = ({
               name: "ticketClass",
               control,
               type: "radiobutton",
-              label: "Kelas penumpang",
+              label: mergedLabels.ticketClassLabel,
               options: ticketClassOptions,
               required: true,
               disabled: true
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
-            /* @__PURE__ */ jsx(Button, { appearance: "primary", size: "large", shape: "circular", type: "submit", children: "Simpan" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "primary",
+                size: "large",
+                shape: "circular",
+                type: "submit",
+                children: mergedLabels.saveButton
+              }
+            ),
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -7474,7 +7750,7 @@ var ModalPassengerForm = ({
                 shape: "circular",
                 type: "button",
                 onClick: handleClose,
-                children: "Batal"
+                children: mergedLabels.cancelButton
               }
             )
           ] })
@@ -7485,7 +7761,7 @@ var ModalPassengerForm = ({
 };
 
 // src/components/CardPassengerList/CardPassengerList.constants.ts
-var DEFAULT_LABELS13 = {
+var DEFAULT_LABELS21 = {
   id: {
     defaultTitle: "Data Penumpang",
     passengerPrefix: "Penumpang"
@@ -7607,7 +7883,7 @@ var CardPassengerList = ({
   className
 }) => {
   const styles = useStyles23();
-  const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
@@ -7678,6 +7954,26 @@ var CardPassengerList = ({
     }) })
   ] });
 };
+
+// src/components/CardVehicleDetail/CardVehicleDetail.constants.ts
+var DEFAULT_LABELS22 = {
+  id: {
+    title: "Detail Kendaraan",
+    vehicleNumberLabel: "Nomor Kendaraan",
+    vehicleNumberPlaceholder: "Contoh: B1234CD",
+    hasLoadLabel: "Apakah kendaraan membawa muatan?",
+    yesLabel: "Ya",
+    noLabel: "Tidak"
+  },
+  en: {
+    title: "Vehicle Details",
+    vehicleNumberLabel: "Vehicle Number",
+    vehicleNumberPlaceholder: "Example: B1234CD",
+    hasLoadLabel: "Does the vehicle carry a load?",
+    yesLabel: "Yes",
+    noLabel: "No"
+  }
+};
 var useStyles24 = makeStyles({
   card: {
     padding: "1.5rem",
@@ -7713,14 +8009,27 @@ var CardVehicleDetail = ({
   vehicleNumberName = "vehicleNumber",
   showLoadOption = false,
   hasLoad,
-  onHasLoadChange
+  onHasLoadChange,
+  language = "id",
+  labels
 }) => {
   const styles = useStyles24();
+  const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(Subtitle1, { className: styles.headerTitle, children: "Detail Kendaraan" }),
-      /* @__PURE__ */ jsx("div", { style: { flex: 1, marginLeft: "1rem" }, children: /* @__PURE__ */ jsx(Divider, {}) })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Subtitle1, { className: styles.headerTitle, children: mergedLabels.title }),
+          /* @__PURE__ */ jsx("div", { style: { flex: 1, marginLeft: "1rem" }, children: /* @__PURE__ */ jsx(Divider, {}) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: styles.vehicleType, children: [
       /* @__PURE__ */ jsx(
         "img",
@@ -7735,19 +8044,19 @@ var CardVehicleDetail = ({
       /* @__PURE__ */ jsx(Body1Strong, { children: serviceTitle })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
-      /* @__PURE__ */ jsx(Body1, { style: { color: tokens.colorNeutralForeground1 }, children: "Nomor Kendaraan" }),
+      /* @__PURE__ */ jsx(Body1, { style: { color: tokens.colorNeutralForeground1 }, children: mergedLabels.vehicleNumberLabel }),
       /* @__PURE__ */ jsx(
         InputDynamic_default,
         {
           control,
           name: vehicleNumberName,
-          placeholder: "Contoh: B1234CD",
+          placeholder: mergedLabels.vehicleNumberPlaceholder,
           type: "text"
         }
       )
     ] }),
     showLoadOption && /* @__PURE__ */ jsxs("div", { className: styles.radioGroup, children: [
-      /* @__PURE__ */ jsx(Body1, { className: styles.question, children: "Apakah kendaraan membawa muatan?" }),
+      /* @__PURE__ */ jsx(Body1, { className: styles.question, children: mergedLabels.hasLoadLabel }),
       /* @__PURE__ */ jsxs(
         RadioGroup,
         {
@@ -7755,14 +8064,112 @@ var CardVehicleDetail = ({
           onChange: (_, data) => onHasLoadChange?.(data.value),
           layout: "horizontal",
           children: [
-            /* @__PURE__ */ jsx(Radio, { value: "true", label: "Ya" }),
-            /* @__PURE__ */ jsx(Radio, { value: "false", label: "Tidak" })
+            /* @__PURE__ */ jsx(Radio, { value: "true", label: mergedLabels.yesLabel }),
+            /* @__PURE__ */ jsx(Radio, { value: "false", label: mergedLabels.noLabel })
           ]
         }
       )
     ] })
   ] });
 };
+
+// src/components/CardVehicleOwnerForm/CardVehicleOwnerForm.constants.ts
+var DEFAULT_LABELS23 = {
+  id: {
+    title: "Informasi Pemilik & Muatan",
+    addOwnerButton: "Tambah Pemilik",
+    ownerInfoTitle: "Informasi Pemilik {index}",
+    senderNameLabel: "Nama Pengirim",
+    senderTypeCompany: "Perusahaan",
+    senderTypeIndividual: "Perseorangan",
+    selectCompanyPlaceholder: "Pilih Nama Perusahaan",
+    inputSenderNamePlaceholder: "Masukkan Nama Pengirim",
+    estimatedWeightLabel: "Data Estimasi Berat Muatan dan Kendaraan (Ton)",
+    inputNumberPlaceholder: "Masukkan Angka",
+    originCityLabel: "Kota Asal",
+    destinationCityLabel: "Kota Tujuan",
+    selectPlaceholder: "Pilih",
+    cargoOwnerTitle: "Nama Perusahaan Pemilik Barang",
+    cargoOwnerCompanyPlaceholder: "Pilih Nama Perusahaan Pemilik Barang",
+    cargoOwnerIndividualPlaceholder: "Masukkan Nama Pemilik Barang",
+    otherCompanyHelperText: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan',
+    logisticsCompanyTitle: "Nama Perusahaan Logistik",
+    logisticsCompanyPlaceholder: "Pilih Nama Perusahaan Logistik",
+    logisticsIndividualPlaceholder: "Masukkan Nama Logistik",
+    cargoReceiverTitle: "Nama Perusahaan Penerima Barang",
+    cargoReceiverCompanyPlaceholder: "Pilih Nama Perusahaan Penerima Barang",
+    cargoReceiverIndividualPlaceholder: "Masukkan Nama Penerima Barang",
+    totalWeightLabel: "Berat Muatan dan Kendaraan (Ton)",
+    cargoListTitle: "Daftar Muatan",
+    cargoItemTitle: "Muatan {index}",
+    commodityLabel: "Data Komoditas",
+    commodityHelperTextPrefix: "Pahami definisi, jenis dan contoh komoditas",
+    hereLinkText: "disini",
+    cargoTypeLabel: "Data Jenis Muatan",
+    cargoTypeHelperText: 'Apabila jenis muatan belum tersedia dapat memilih "Lainnya" dan silakan isi jenis muatannya.',
+    cargoQuantityLabel: "Jumlah Muatan",
+    priceLabel: "Harga",
+    industryTypeLabel: "Data Jenis Industri",
+    industryTypeHelperText: 'Apabila jenis industri belum tersedia dapat memilih "Lainnya" dan silakan isi jenis muatannya.',
+    cargoCategoryLabel: "Kategori Muatan",
+    cargoCategoryHelperTextPrefix: "Pahami definisi, jenis dan contoh kategori muatan",
+    deleteCargoButton: "Hapus Muatan",
+    addCargoButton: "Tambah Muatan",
+    cargoTypeOptions: {
+      karung: "Karung",
+      kg: "Kg",
+      ton: "Ton",
+      unit: "Unit"
+    }
+  },
+  en: {
+    title: "Owner & Cargo Information",
+    addOwnerButton: "Add Owner",
+    ownerInfoTitle: "Owner Information {index}",
+    senderNameLabel: "Sender Name",
+    senderTypeCompany: "Company",
+    senderTypeIndividual: "Individual",
+    selectCompanyPlaceholder: "Select Company Name",
+    inputSenderNamePlaceholder: "Enter Sender Name",
+    estimatedWeightLabel: "Estimated Cargo & Vehicle Weight (Ton)",
+    inputNumberPlaceholder: "Enter Number",
+    originCityLabel: "Origin City",
+    destinationCityLabel: "Destination City",
+    selectPlaceholder: "Select",
+    cargoOwnerTitle: "Cargo Owner Company Name",
+    cargoOwnerCompanyPlaceholder: "Select Cargo Owner Company",
+    cargoOwnerIndividualPlaceholder: "Enter Cargo Owner Name",
+    otherCompanyHelperText: 'If the company name is not available, select "Other" and enter the company name',
+    logisticsCompanyTitle: "Logistics Company Name",
+    logisticsCompanyPlaceholder: "Select Logistics Company",
+    logisticsIndividualPlaceholder: "Enter Logistics Name",
+    cargoReceiverTitle: "Cargo Receiver Company Name",
+    cargoReceiverCompanyPlaceholder: "Select Cargo Receiver Company",
+    cargoReceiverIndividualPlaceholder: "Enter Cargo Receiver Name",
+    totalWeightLabel: "Cargo & Vehicle Weight (Ton)",
+    cargoListTitle: "Cargo List",
+    cargoItemTitle: "Cargo {index}",
+    commodityLabel: "Commodity Data",
+    commodityHelperTextPrefix: "Understand definition, types and examples of commodities",
+    hereLinkText: "here",
+    cargoTypeLabel: "Cargo Type Data",
+    cargoTypeHelperText: 'If the cargo type is not available, select "Other" and enter the cargo type.',
+    cargoQuantityLabel: "Cargo Quantity",
+    priceLabel: "Price",
+    industryTypeLabel: "Industry Type Data",
+    industryTypeHelperText: 'If the industry type is not available, select "Other" and enter the industry type.',
+    cargoCategoryLabel: "Cargo Category",
+    cargoCategoryHelperTextPrefix: "Understand definition, types and examples of cargo categories",
+    deleteCargoButton: "Delete Cargo",
+    addCargoButton: "Add Cargo",
+    cargoTypeOptions: {
+      karung: "Sack",
+      kg: "Kg",
+      ton: "Ton",
+      unit: "Unit"
+    }
+  }
+};
 var useStyles25 = makeStyles({
   card: {
     padding: "1.5rem",
@@ -7818,13 +8225,16 @@ var CardVehicleOwnerForm = ({
   onDeleteCargo,
   onUpdateCargoQuantity,
   companyOptions = [],
-  cityOptions = []
+  cityOptions = [],
+  language = "id",
+  labels
 }) => {
   const styles = useStyles25();
+  const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
-        /* @__PURE__ */ jsx(Title3, { style: { marginRight: "1rem" }, children: "Informasi Pemilik & Muatan" }),
+        /* @__PURE__ */ jsx(Title3, { style: { marginRight: "1rem" }, children: mergedLabels.title }),
         /* @__PURE__ */ jsx(Divider, { style: { flex: 1 } })
       ] }),
       /* @__PURE__ */ jsx(
@@ -7834,639 +8244,768 @@ var CardVehicleOwnerForm = ({
           icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-24-regular" }),
           style: { color: tokens.colorNeutralForeground2 },
           onClick: onAddOwner,
-          children: "Tambah Pemilik"
+          children: mergedLabels.addOwnerButton
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(Accordion, { collapsible: true, defaultOpenItems: owners.map((o) => String(o.id)), multiple: true, children: owners.map((owner, index) => /* @__PURE__ */ jsxs(
-      AccordionItem,
+    /* @__PURE__ */ jsx(
+      Accordion,
       {
-        value: String(owner.id),
-        className: styles.accordion,
-        children: [
-          /* @__PURE__ */ jsx(AccordionHeader, { className: styles.accordionHeader, expandIconPosition: "end", children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                width: "100%"
-              },
-              children: [
-                /* @__PURE__ */ jsxs(Body1Strong, { children: [
-                  "Informasi Pemilik ",
-                  index + 1
-                ] }),
-                owners.length > 1 && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    appearance: "transparent",
-                    icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onDeleteOwner(owner.id);
-                    },
-                    style: { color: tokens.colorPaletteRedForeground1 }
-                  }
-                )
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsxs("div", { className: styles.form, children: [
-            /* @__PURE__ */ jsxs(Row, { children: [
-              /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: "Nama Pengirim" }) }),
-              /* @__PURE__ */ jsxs(Col, { lg: 6, children: [
-                /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "2rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs(
-                  RadioGroup,
-                  {
-                    layout: "horizontal",
-                    value: owner.senderType,
-                    onChange: (_, data) => onUpdateOwner(owner.id, {
-                      senderType: data.value
-                    }),
-                    children: [
-                      /* @__PURE__ */ jsx(Radio, { value: "Perusahaan", label: "Perusahaan" }),
-                      /* @__PURE__ */ jsx(Radio, { value: "Perseorangan", label: "Perseorangan" })
-                    ]
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  InputDynamic_default,
-                  {
-                    control,
-                    name: `owners.${index}.senderName`,
-                    placeholder: owner.senderType === "Perusahaan" ? "Pilih Nama Perusahaan" : "Masukkan Nama Pengirim",
-                    size: "large",
-                    type: owner.senderType === "Perusahaan" ? "select" : "text",
-                    options: owner.senderType === "Perusahaan" ? companyOptions : []
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(Col, { lg: 6, children: [
-                /* @__PURE__ */ jsx("div", { style: { height: "1rem" } }),
-                /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
-                  "Data Estimasi Berat Muatan dan Kendaraan (Ton)",
-                  " ",
-                  /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  InputDynamic_default,
-                  {
-                    control,
-                    name: `owners.${index}.estimatedWeight`,
-                    placeholder: "Masukkan Angka",
-                    size: "large",
-                    type: "number"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs(Row, { children: [
-              /* @__PURE__ */ jsxs(Col, { children: [
-                /* @__PURE__ */ jsx(Body1, { className: styles.label, children: "Kota Asal" }),
-                /* @__PURE__ */ jsx(
-                  InputDynamic_default,
-                  {
-                    control,
-                    name: `looseCargoOwners.${index}.originCity`,
-                    placeholder: "Pilih",
-                    type: "select",
-                    options: cityOptions
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(Col, { children: [
-                /* @__PURE__ */ jsx(Body1, { className: styles.label, children: "Kota Tujuan" }),
-                /* @__PURE__ */ jsx(
-                  InputDynamic_default,
-                  {
-                    control,
-                    name: `looseCargoOwners.${index}.destinationCity`,
-                    placeholder: "Pilih",
-                    type: "select",
-                    options: cityOptions
-                  }
-                )
-              ] })
-            ] }),
-            hasLoad && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(Row, { children: [
-                /* @__PURE__ */ jsxs(Col, { children: [
-                  /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
-                    "Nama Perusahaan Pemilik Barang ",
-                    /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "2rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs(
-                    RadioGroup,
-                    {
-                      layout: "horizontal",
-                      value: owner.cargoOwnerType || "Perusahaan",
-                      onChange: (_, data) => onUpdateOwner(owner.id, {
-                        cargoOwnerType: data.value
-                      }),
-                      children: [
-                        /* @__PURE__ */ jsx(Radio, { value: "Perusahaan", label: "Perusahaan" }),
-                        /* @__PURE__ */ jsx(Radio, { value: "Perseorangan", label: "Perseorangan" })
-                      ]
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    InputDynamic_default,
-                    {
-                      control,
-                      name: `looseCargoOwners.${index}.cargoOwnerName`,
-                      placeholder: owner.cargoOwnerType === "Perusahaan" ? "Pilih Nama Perusahaan Pemilik Barang" : "Masukkan Nama Pemilik Barang",
-                      size: "large",
-                      type: owner.cargoOwnerType === "Perusahaan" ? "select" : "text",
-                      options: owner.cargoOwnerType === "Perusahaan" ? companyOptions : []
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Caption1,
+        collapsible: true,
+        defaultOpenItems: owners.map((o) => String(o.id)),
+        multiple: true,
+        children: owners.map((owner, index) => /* @__PURE__ */ jsxs(
+          AccordionItem,
+          {
+            value: String(owner.id),
+            className: styles.accordion,
+            children: [
+              /* @__PURE__ */ jsx(
+                AccordionHeader,
+                {
+                  className: styles.accordionHeader,
+                  expandIconPosition: "end",
+                  children: /* @__PURE__ */ jsxs(
+                    "div",
                     {
                       style: {
-                        color: tokens.colorNeutralForeground3,
-                        marginTop: "0.25rem"
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        width: "100%"
                       },
-                      children: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan'
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(Col, { children: [
-                  /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
-                    "Nama Perusahaan Logistik ",
-                    /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "2rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs(
-                    RadioGroup,
-                    {
-                      layout: "horizontal",
-                      value: owner.logisticsCompanyType || "Perseorangan",
-                      onChange: (_, data) => onUpdateOwner(owner.id, {
-                        logisticsCompanyType: data.value
-                      }),
                       children: [
-                        /* @__PURE__ */ jsx(Radio, { value: "Perusahaan", label: "Perusahaan" }),
-                        /* @__PURE__ */ jsx(Radio, { value: "Perseorangan", label: "Perseorangan" })
+                        /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.ownerInfoTitle.replace(
+                          "{index}",
+                          (index + 1).toString()
+                        ) }),
+                        owners.length > 1 && /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            appearance: "transparent",
+                            icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              onDeleteOwner(owner.id);
+                            },
+                            style: { color: tokens.colorPaletteRedForeground1 }
+                          }
+                        )
                       ]
                     }
-                  ) }),
-                  /* @__PURE__ */ jsx(
-                    InputDynamic_default,
-                    {
-                      control,
-                      name: `looseCargoOwners.${index}.logisticsCompanyName`,
-                      placeholder: owner.logisticsCompanyType === "Perusahaan" ? "Pilih Nama Perusahaan Logistik" : "Masukkan Nama Logistik",
-                      size: "large",
-                      type: owner.logisticsCompanyType === "Perusahaan" ? "select" : "text",
-                      options: owner.logisticsCompanyType === "Perusahaan" ? companyOptions : []
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Caption1,
-                    {
-                      style: {
-                        color: tokens.colorNeutralForeground3,
-                        marginTop: "0.25rem"
-                      },
-                      children: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan'
-                    }
                   )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs(Row, { children: [
-                /* @__PURE__ */ jsx(Col, { xs: 12, md: 12, lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: "Nama Perusahaan Penerima Barang" }) }),
-                /* @__PURE__ */ jsxs(Col, { children: [
-                  /* @__PURE__ */ jsxs(
-                    RadioGroup,
-                    {
-                      layout: "horizontal",
-                      value: owner.cargoReceiverType || "Perusahaan",
-                      onChange: (_, data) => onUpdateOwner(owner.id, {
-                        cargoReceiverType: data.value
-                      }),
-                      children: [
-                        /* @__PURE__ */ jsx(Radio, { value: "Perusahaan", label: "Perusahaan" }),
-                        /* @__PURE__ */ jsx(Radio, { value: "Perseorangan", label: "Perseorangan" })
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    InputDynamic_default,
-                    {
-                      control,
-                      name: `looseCargoOwners.${index}.cargoReceiverName`,
-                      placeholder: owner.cargoReceiverType === "Perusahaan" ? "Pilih Nama Perusahaan Penerima Barang" : "Masukkan Nama Penerima Barang",
-                      size: "large",
-                      type: owner.cargoReceiverType === "Perusahaan" ? "select" : "text",
-                      options: owner.cargoReceiverType === "Perusahaan" ? companyOptions : []
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Caption1,
-                    {
-                      style: {
-                        color: tokens.colorNeutralForeground3,
-                        marginTop: "0.25rem"
-                      },
-                      children: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan'
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs(Col, { children: [
-                  /* @__PURE__ */ jsx("div", { style: { height: ".5rem" } }),
-                  /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
-                    "Berat Muatan dan Kendaraan (Ton)",
-                    " ",
-                    /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    InputDynamic_default,
-                    {
-                      control,
-                      name: `looseCargoOwners.${index}.cargoWeight`,
-                      placeholder: "Masukkan Angka",
-                      type: "number",
-                      size: "large"
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: "Daftar Muatan" }) }) }),
-              /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { xs: 12, children: [
-                /* @__PURE__ */ jsx(
-                  Accordion,
-                  {
-                    collapsible: true,
-                    defaultOpenItems: owner.cargoItems?.map((cargo) => `cargo-${cargo.id}`) || [],
-                    multiple: true,
-                    children: owner.cargoItems?.map((cargo, cargoIndex) => /* @__PURE__ */ jsxs(
-                      AccordionItem,
+                }
+              ),
+              /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsxs("div", { className: styles.form, children: [
+                /* @__PURE__ */ jsxs(Row, { children: [
+                  /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.senderNameLabel }) }),
+                  /* @__PURE__ */ jsxs(Col, { lg: 6, children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
                       {
-                        value: `cargo-${cargo.id}`,
-                        className: styles.accordion,
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            AccordionHeader,
-                            {
-                              className: styles.accordionHeader,
-                              expandIconPosition: "end",
-                              children: /* @__PURE__ */ jsx(
-                                "div",
+                        style: {
+                          display: "flex",
+                          gap: "2rem",
+                          marginBottom: "0.5rem"
+                        },
+                        children: /* @__PURE__ */ jsxs(
+                          RadioGroup,
+                          {
+                            layout: "horizontal",
+                            value: owner.senderType,
+                            onChange: (_, data) => onUpdateOwner(owner.id, {
+                              senderType: data.value
+                            }),
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                Radio,
                                 {
-                                  style: {
-                                    display: "flex",
-                                    justifyContent: "space-between",
-                                    alignItems: "center",
-                                    width: "100%"
-                                  },
-                                  children: /* @__PURE__ */ jsxs(Body1Strong, { children: [
-                                    "Muatan ",
-                                    cargoIndex + 1
-                                  ] })
+                                  value: "Perusahaan",
+                                  label: mergedLabels.senderTypeCompany
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                Radio,
+                                {
+                                  value: "Perseorangan",
+                                  label: mergedLabels.senderTypeIndividual
                                 }
                               )
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsxs("div", { className: styles.form, children: [
-                            /* @__PURE__ */ jsxs(Row, { children: [
-                              /* @__PURE__ */ jsxs(Col, { md: 3, children: [
-                                /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
-                                  "Data Komoditas ",
-                                  /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
-                                ] }),
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      InputDynamic_default,
+                      {
+                        control,
+                        name: `owners.${index}.senderName`,
+                        placeholder: owner.senderType === "Perusahaan" ? mergedLabels.selectCompanyPlaceholder : mergedLabels.inputSenderNamePlaceholder,
+                        size: "large",
+                        type: owner.senderType === "Perusahaan" ? "select" : "text",
+                        options: owner.senderType === "Perusahaan" ? companyOptions : []
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Col, { lg: 6, children: [
+                    /* @__PURE__ */ jsx("div", { style: { height: "1rem" } }),
+                    /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
+                      mergedLabels.estimatedWeightLabel,
+                      " ",
+                      /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      InputDynamic_default,
+                      {
+                        control,
+                        name: `owners.${index}.estimatedWeight`,
+                        placeholder: mergedLabels.inputNumberPlaceholder,
+                        size: "large",
+                        type: "number"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Row, { children: [
+                  /* @__PURE__ */ jsxs(Col, { children: [
+                    /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.originCityLabel }),
+                    /* @__PURE__ */ jsx(
+                      InputDynamic_default,
+                      {
+                        control,
+                        name: `looseCargoOwners.${index}.originCity`,
+                        placeholder: mergedLabels.selectPlaceholder,
+                        type: "select",
+                        options: cityOptions
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs(Col, { children: [
+                    /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.destinationCityLabel }),
+                    /* @__PURE__ */ jsx(
+                      InputDynamic_default,
+                      {
+                        control,
+                        name: `looseCargoOwners.${index}.destinationCity`,
+                        placeholder: mergedLabels.selectPlaceholder,
+                        type: "select",
+                        options: cityOptions
+                      }
+                    )
+                  ] })
+                ] }),
+                hasLoad && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(Row, { children: [
+                    /* @__PURE__ */ jsxs(Col, { children: [
+                      /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
+                        mergedLabels.cargoOwnerTitle,
+                        " ",
+                        /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            gap: "2rem",
+                            marginBottom: "0.5rem"
+                          },
+                          children: /* @__PURE__ */ jsxs(
+                            RadioGroup,
+                            {
+                              layout: "horizontal",
+                              value: owner.cargoOwnerType || "Perusahaan",
+                              onChange: (_, data) => onUpdateOwner(owner.id, {
+                                cargoOwnerType: data.value
+                              }),
+                              children: [
                                 /* @__PURE__ */ jsx(
-                                  InputDynamic_default,
+                                  Radio,
                                   {
-                                    control,
-                                    name: `looseCargoOwners.${index}.cargo.${cargoIndex}.commodity`,
-                                    placeholder: "Pilih",
-                                    type: "select",
-                                    options: []
+                                    value: "Perusahaan",
+                                    label: mergedLabels.senderTypeCompany
                                   }
                                 ),
-                                /* @__PURE__ */ jsxs(
-                                  Caption1,
+                                /* @__PURE__ */ jsx(
+                                  Radio,
                                   {
-                                    style: {
-                                      color: tokens.colorNeutralForeground3,
-                                      marginTop: "0.25rem"
-                                    },
-                                    children: [
-                                      "Pahami definisi, jenis dan contoh komoditas",
-                                      " ",
-                                      /* @__PURE__ */ jsx("a", { href: "#", className: styles.link, children: "disini" })
-                                    ]
+                                    value: "Perseorangan",
+                                    label: mergedLabels.senderTypeIndividual
                                   }
                                 )
-                              ] }),
-                              /* @__PURE__ */ jsxs(Col, { md: 3, children: [
-                                /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
-                                  "Data Jenis Muatan",
-                                  " ",
-                                  /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
-                                ] }),
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        InputDynamic_default,
+                        {
+                          control,
+                          name: `looseCargoOwners.${index}.cargoOwnerName`,
+                          placeholder: owner.cargoOwnerType === "Perusahaan" ? mergedLabels.cargoOwnerCompanyPlaceholder : mergedLabels.cargoOwnerIndividualPlaceholder,
+                          size: "large",
+                          type: owner.cargoOwnerType === "Perusahaan" ? "select" : "text",
+                          options: owner.cargoOwnerType === "Perusahaan" ? companyOptions : []
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Caption1,
+                        {
+                          style: {
+                            color: tokens.colorNeutralForeground3,
+                            marginTop: "0.25rem"
+                          },
+                          children: mergedLabels.otherCompanyHelperText
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(Col, { children: [
+                      /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
+                        mergedLabels.logisticsCompanyTitle,
+                        " ",
+                        /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            gap: "2rem",
+                            marginBottom: "0.5rem"
+                          },
+                          children: /* @__PURE__ */ jsxs(
+                            RadioGroup,
+                            {
+                              layout: "horizontal",
+                              value: owner.logisticsCompanyType || "Perseorangan",
+                              onChange: (_, data) => onUpdateOwner(owner.id, {
+                                logisticsCompanyType: data.value
+                              }),
+                              children: [
                                 /* @__PURE__ */ jsx(
-                                  InputDynamic_default,
+                                  Radio,
                                   {
-                                    control,
-                                    name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoType`,
-                                    placeholder: "Pilih",
-                                    type: "select",
-                                    options: [
-                                      { value: "karung", label: "Karung" },
-                                      { value: "kg", label: "Kg" },
-                                      { value: "ton", label: "Ton" },
-                                      { value: "unit", label: "Unit" }
-                                    ]
+                                    value: "Perusahaan",
+                                    label: mergedLabels.senderTypeCompany
                                   }
                                 ),
                                 /* @__PURE__ */ jsx(
-                                  Caption1,
+                                  Radio,
                                   {
-                                    style: {
-                                      color: tokens.colorNeutralForeground3,
-                                      marginTop: "0.25rem"
-                                    },
-                                    children: 'Apabila jenis muatan belum tersedia dapat memilih "Lainnya" dan silakan isi jenis muatannya.'
+                                    value: "Perseorangan",
+                                    label: mergedLabels.senderTypeIndividual
                                   }
                                 )
-                              ] }),
-                              /* @__PURE__ */ jsxs(Col, { md: 3, children: [
-                                /* @__PURE__ */ jsx(Body1, { className: styles.label, children: "Jumlah Muatan" }),
-                                /* @__PURE__ */ jsxs(
-                                  "div",
-                                  {
-                                    style: {
-                                      display: "flex",
-                                      alignItems: "center",
-                                      border: `1px solid ${tokens.colorNeutralStroke1}`,
-                                      borderRadius: tokens.borderRadiusMedium,
-                                      height: "40px",
-                                      padding: "0 12px",
-                                      backgroundColor: tokens.colorNeutralBackground1
-                                    },
-                                    children: [
-                                      /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
-                                      /* @__PURE__ */ jsxs(
-                                        "div",
-                                        {
-                                          style: {
-                                            display: "flex",
-                                            alignItems: "center",
-                                            gap: "12px"
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        InputDynamic_default,
+                        {
+                          control,
+                          name: `looseCargoOwners.${index}.logisticsCompanyName`,
+                          placeholder: owner.logisticsCompanyType === "Perusahaan" ? mergedLabels.logisticsCompanyPlaceholder : mergedLabels.logisticsIndividualPlaceholder,
+                          size: "large",
+                          type: owner.logisticsCompanyType === "Perusahaan" ? "select" : "text",
+                          options: owner.logisticsCompanyType === "Perusahaan" ? companyOptions : []
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Caption1,
+                        {
+                          style: {
+                            color: tokens.colorNeutralForeground3,
+                            marginTop: "0.25rem"
+                          },
+                          children: mergedLabels.otherCompanyHelperText
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Row, { children: [
+                    /* @__PURE__ */ jsx(Col, { xs: 12, md: 12, lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoReceiverTitle }) }),
+                    /* @__PURE__ */ jsxs(Col, { children: [
+                      /* @__PURE__ */ jsxs(
+                        RadioGroup,
+                        {
+                          layout: "horizontal",
+                          value: owner.cargoReceiverType || "Perusahaan",
+                          onChange: (_, data) => onUpdateOwner(owner.id, {
+                            cargoReceiverType: data.value
+                          }),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Radio,
+                              {
+                                value: "Perusahaan",
+                                label: mergedLabels.senderTypeCompany
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Radio,
+                              {
+                                value: "Perseorangan",
+                                label: mergedLabels.senderTypeIndividual
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        InputDynamic_default,
+                        {
+                          control,
+                          name: `looseCargoOwners.${index}.cargoReceiverName`,
+                          placeholder: owner.cargoReceiverType === "Perusahaan" ? mergedLabels.cargoReceiverCompanyPlaceholder : mergedLabels.cargoReceiverIndividualPlaceholder,
+                          size: "large",
+                          type: owner.cargoReceiverType === "Perusahaan" ? "select" : "text",
+                          options: owner.cargoReceiverType === "Perusahaan" ? companyOptions : []
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Caption1,
+                        {
+                          style: {
+                            color: tokens.colorNeutralForeground3,
+                            marginTop: "0.25rem"
+                          },
+                          children: mergedLabels.otherCompanyHelperText
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(Col, { children: [
+                      /* @__PURE__ */ jsx("div", { style: { height: ".5rem" } }),
+                      /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
+                        mergedLabels.totalWeightLabel,
+                        " ",
+                        /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        InputDynamic_default,
+                        {
+                          control,
+                          name: `looseCargoOwners.${index}.cargoWeight`,
+                          placeholder: mergedLabels.inputNumberPlaceholder,
+                          type: "number",
+                          size: "large"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoListTitle }) }) }),
+                  /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { xs: 12, children: [
+                    /* @__PURE__ */ jsx(
+                      Accordion,
+                      {
+                        collapsible: true,
+                        defaultOpenItems: owner.cargoItems?.map(
+                          (cargo) => `cargo-${cargo.id}`
+                        ) || [],
+                        multiple: true,
+                        children: owner.cargoItems?.map((cargo, cargoIndex) => /* @__PURE__ */ jsxs(
+                          AccordionItem,
+                          {
+                            value: `cargo-${cargo.id}`,
+                            className: styles.accordion,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                AccordionHeader,
+                                {
+                                  className: styles.accordionHeader,
+                                  expandIconPosition: "end",
+                                  children: /* @__PURE__ */ jsx(
+                                    "div",
+                                    {
+                                      style: {
+                                        display: "flex",
+                                        justifyContent: "space-between",
+                                        alignItems: "center",
+                                        width: "100%"
+                                      },
+                                      children: /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.cargoItemTitle.replace(
+                                        "{index}",
+                                        (cargoIndex + 1).toString()
+                                      ) })
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(AccordionPanel, { children: /* @__PURE__ */ jsxs("div", { className: styles.form, children: [
+                                /* @__PURE__ */ jsxs(Row, { children: [
+                                  /* @__PURE__ */ jsxs(Col, { md: 3, children: [
+                                    /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
+                                      mergedLabels.commodityLabel,
+                                      " ",
+                                      /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                                    ] }),
+                                    /* @__PURE__ */ jsx(
+                                      InputDynamic_default,
+                                      {
+                                        control,
+                                        name: `looseCargoOwners.${index}.cargo.${cargoIndex}.commodity`,
+                                        placeholder: mergedLabels.selectPlaceholder,
+                                        type: "select",
+                                        options: []
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxs(
+                                      Caption1,
+                                      {
+                                        style: {
+                                          color: tokens.colorNeutralForeground3,
+                                          marginTop: "0.25rem"
+                                        },
+                                        children: [
+                                          mergedLabels.commodityHelperTextPrefix,
+                                          " ",
+                                          /* @__PURE__ */ jsx("a", { href: "#", className: styles.link, children: mergedLabels.hereLinkText })
+                                        ]
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsxs(Col, { md: 3, children: [
+                                    /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
+                                      mergedLabels.cargoTypeLabel,
+                                      " ",
+                                      /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                                    ] }),
+                                    /* @__PURE__ */ jsx(
+                                      InputDynamic_default,
+                                      {
+                                        control,
+                                        name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoType`,
+                                        placeholder: mergedLabels.selectPlaceholder,
+                                        type: "select",
+                                        options: [
+                                          {
+                                            value: "karung",
+                                            label: mergedLabels.cargoTypeOptions.karung
+                                          },
+                                          {
+                                            value: "kg",
+                                            label: mergedLabels.cargoTypeOptions.kg
+                                          },
+                                          {
+                                            value: "ton",
+                                            label: mergedLabels.cargoTypeOptions.ton
                                           },
-                                          children: [
-                                            /* @__PURE__ */ jsx(
-                                              Button,
-                                              {
-                                                appearance: "transparent",
-                                                icon: /* @__PURE__ */ jsx(
-                                                  Icon,
+                                          {
+                                            value: "unit",
+                                            label: mergedLabels.cargoTypeOptions.unit
+                                          }
+                                        ]
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx(
+                                      Caption1,
+                                      {
+                                        style: {
+                                          color: tokens.colorNeutralForeground3,
+                                          marginTop: "0.25rem"
+                                        },
+                                        children: mergedLabels.cargoTypeHelperText
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsxs(Col, { md: 3, children: [
+                                    /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.cargoQuantityLabel }),
+                                    /* @__PURE__ */ jsxs(
+                                      "div",
+                                      {
+                                        style: {
+                                          display: "flex",
+                                          alignItems: "center",
+                                          border: `1px solid ${tokens.colorNeutralStroke1}`,
+                                          borderRadius: tokens.borderRadiusMedium,
+                                          height: "40px",
+                                          padding: "0 12px",
+                                          backgroundColor: tokens.colorNeutralBackground1
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
+                                          /* @__PURE__ */ jsxs(
+                                            "div",
+                                            {
+                                              style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                gap: "12px"
+                                              },
+                                              children: [
+                                                /* @__PURE__ */ jsx(
+                                                  Button,
                                                   {
-                                                    icon: "fluent:subtract-circle-24-regular",
+                                                    appearance: "transparent",
+                                                    icon: /* @__PURE__ */ jsx(
+                                                      Icon,
+                                                      {
+                                                        icon: "fluent:subtract-circle-24-regular",
+                                                        style: {
+                                                          fontSize: "24px",
+                                                          color: tokens.colorNeutralForeground4
+                                                        }
+                                                      }
+                                                    ),
+                                                    size: "small",
+                                                    onClick: () => {
+                                                      const currentVal = getValues(
+                                                        `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`
+                                                      ) || 0;
+                                                      const currentQty = Number(currentVal);
+                                                      if (currentQty > 0) {
+                                                        const newVal = currentQty - 1;
+                                                        setValue(
+                                                          `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
+                                                          newVal
+                                                        );
+                                                        onUpdateCargoQuantity(
+                                                          owner.id,
+                                                          cargo.id,
+                                                          newVal
+                                                        );
+                                                      }
+                                                    },
                                                     style: {
-                                                      fontSize: "24px",
-                                                      color: tokens.colorNeutralForeground4
+                                                      minWidth: "32px",
+                                                      padding: "0"
                                                     }
                                                   }
                                                 ),
-                                                size: "small",
-                                                onClick: () => {
-                                                  const currentVal = getValues(
-                                                    `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`
-                                                  ) || 0;
-                                                  const currentQty = Number(currentVal);
-                                                  if (currentQty > 0) {
-                                                    const newVal = currentQty - 1;
-                                                    setValue(
-                                                      `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
-                                                      newVal
-                                                    );
-                                                    onUpdateCargoQuantity(owner.id, cargo.id, newVal);
-                                                  }
-                                                },
-                                                style: { minWidth: "32px", padding: "0" }
-                                              }
-                                            ),
-                                            /* @__PURE__ */ jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsx(
-                                              Controller,
-                                              {
-                                                name: `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
-                                                control,
-                                                render: ({ field }) => /* @__PURE__ */ jsx(
-                                                  "input",
+                                                /* @__PURE__ */ jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsx(
+                                                  Controller,
                                                   {
-                                                    ...field,
-                                                    type: "number",
-                                                    style: {
-                                                      border: "none",
-                                                      width: "100%",
-                                                      textAlign: "center",
-                                                      outline: "none",
-                                                      backgroundColor: "transparent",
-                                                      color: tokens.colorNeutralForeground1,
-                                                      fontSize: tokens.fontSizeBase400,
-                                                      fontFamily: tokens.fontFamilyBase
-                                                    },
-                                                    onWheel: (e) => e.target.blur()
+                                                    name: `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
+                                                    control,
+                                                    render: ({ field }) => /* @__PURE__ */ jsx(
+                                                      "input",
+                                                      {
+                                                        ...field,
+                                                        type: "number",
+                                                        style: {
+                                                          border: "none",
+                                                          width: "100%",
+                                                          textAlign: "center",
+                                                          outline: "none",
+                                                          backgroundColor: "transparent",
+                                                          color: tokens.colorNeutralForeground1,
+                                                          fontSize: tokens.fontSizeBase400,
+                                                          fontFamily: tokens.fontFamilyBase
+                                                        },
+                                                        onWheel: (e) => e.target.blur()
+                                                      }
+                                                    )
                                                   }
-                                                )
-                                              }
-                                            ) }),
-                                            /* @__PURE__ */ jsx(
-                                              Button,
-                                              {
-                                                appearance: "transparent",
-                                                icon: /* @__PURE__ */ jsx(
-                                                  Icon,
+                                                ) }),
+                                                /* @__PURE__ */ jsx(
+                                                  Button,
                                                   {
-                                                    icon: "fluent:add-circle-24-regular",
+                                                    appearance: "transparent",
+                                                    icon: /* @__PURE__ */ jsx(
+                                                      Icon,
+                                                      {
+                                                        icon: "fluent:add-circle-24-regular",
+                                                        style: {
+                                                          fontSize: "24px",
+                                                          color: tokens.colorBrandStroke1
+                                                        }
+                                                      }
+                                                    ),
+                                                    size: "small",
+                                                    onClick: () => {
+                                                      const currentVal = getValues(
+                                                        `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`
+                                                      ) || 0;
+                                                      const currentQty = Number(currentVal);
+                                                      const newVal = currentQty + 1;
+                                                      setValue(
+                                                        `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
+                                                        newVal
+                                                      );
+                                                      onUpdateCargoQuantity(
+                                                        owner.id,
+                                                        cargo.id,
+                                                        newVal
+                                                      );
+                                                    },
                                                     style: {
-                                                      fontSize: "24px",
-                                                      color: tokens.colorBrandStroke1
+                                                      minWidth: "32px",
+                                                      padding: "0"
                                                     }
                                                   }
-                                                ),
-                                                size: "small",
-                                                onClick: () => {
-                                                  const currentVal = getValues(
-                                                    `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`
-                                                  ) || 0;
-                                                  const currentQty = Number(currentVal);
-                                                  const newVal = currentQty + 1;
-                                                  setValue(
-                                                    `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
-                                                    newVal
-                                                  );
-                                                  onUpdateCargoQuantity(owner.id, cargo.id, newVal);
-                                                },
-                                                style: { minWidth: "32px", padding: "0" }
-                                              }
-                                            )
-                                          ]
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx(
-                                        "div",
-                                        {
-                                          style: {
-                                            flex: 1,
-                                            textAlign: "left",
-                                            color: tokens.colorNeutralForeground1,
-                                            fontSize: tokens.fontSizeBase300,
-                                            paddingRight: "8px"
-                                          },
-                                          children: (() => {
-                                            const type = watch(
-                                              `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoType`
-                                            );
-                                            if (type === "karung") return "Karung";
-                                            if (type === "kg") return "Kg";
-                                            if (type === "ton") return "Ton";
-                                            if (type === "unit") return "Unit";
-                                            return "";
-                                          })()
-                                        }
-                                      )
-                                    ]
-                                  }
-                                )
-                              ] }),
-                              /* @__PURE__ */ jsxs(Col, { md: 3, children: [
-                                /* @__PURE__ */ jsx(Body1, { className: styles.label, children: "Harga" }),
-                                /* @__PURE__ */ jsx(
-                                  InputDynamic_default,
-                                  {
-                                    control,
-                                    name: `owners.${index}.price`,
-                                    placeholder: "Rp. 0",
-                                    disabled: true,
-                                    size: "large",
-                                    type: "text"
-                                  }
-                                )
-                              ] })
-                            ] }),
-                            /* @__PURE__ */ jsxs(Row, { children: [
-                              /* @__PURE__ */ jsxs(Col, { md: 6, children: [
-                                /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
-                                  "Data Jenis Industri",
-                                  " ",
-                                  /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                                                )
+                                              ]
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsx(
+                                            "div",
+                                            {
+                                              style: {
+                                                flex: 1,
+                                                textAlign: "left",
+                                                color: tokens.colorNeutralForeground1,
+                                                fontSize: tokens.fontSizeBase300,
+                                                paddingRight: "8px"
+                                              },
+                                              children: (() => {
+                                                const type = watch(
+                                                  `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoType`
+                                                );
+                                                if (type === "karung")
+                                                  return mergedLabels.cargoTypeOptions.karung;
+                                                if (type === "kg")
+                                                  return mergedLabels.cargoTypeOptions.kg;
+                                                if (type === "ton")
+                                                  return mergedLabels.cargoTypeOptions.ton;
+                                                if (type === "unit")
+                                                  return mergedLabels.cargoTypeOptions.unit;
+                                                return "";
+                                              })()
+                                            }
+                                          )
+                                        ]
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsxs(Col, { md: 3, children: [
+                                    /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.priceLabel }),
+                                    /* @__PURE__ */ jsx(
+                                      InputDynamic_default,
+                                      {
+                                        control,
+                                        name: `owners.${index}.price`,
+                                        placeholder: "Rp. 0",
+                                        disabled: true,
+                                        size: "large",
+                                        type: "text"
+                                      }
+                                    )
+                                  ] })
                                 ] }),
-                                /* @__PURE__ */ jsx(
-                                  InputDynamic_default,
-                                  {
-                                    control,
-                                    name: `looseCargoOwners.${index}.cargo.${cargoIndex}.industryType`,
-                                    placeholder: "Pilih",
-                                    type: "select",
-                                    options: []
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx(
-                                  Caption1,
-                                  {
-                                    style: {
-                                      color: tokens.colorNeutralForeground3,
-                                      marginTop: "0.25rem"
-                                    },
-                                    children: 'Apabila jenis industri belum tersedia dapat memilih "Lainnya" dan silakan isi jenis muatannya.'
-                                  }
-                                )
-                              ] }),
-                              /* @__PURE__ */ jsxs(Col, { md: 6, children: [
-                                /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
-                                  "Kategori Muatan ",
-                                  /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                                /* @__PURE__ */ jsxs(Row, { children: [
+                                  /* @__PURE__ */ jsxs(Col, { md: 6, children: [
+                                    /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
+                                      mergedLabels.industryTypeLabel,
+                                      " ",
+                                      /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                                    ] }),
+                                    /* @__PURE__ */ jsx(
+                                      InputDynamic_default,
+                                      {
+                                        control,
+                                        name: `looseCargoOwners.${index}.cargo.${cargoIndex}.industryType`,
+                                        placeholder: mergedLabels.selectPlaceholder,
+                                        type: "select",
+                                        options: []
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx(
+                                      Caption1,
+                                      {
+                                        style: {
+                                          color: tokens.colorNeutralForeground3,
+                                          marginTop: "0.25rem"
+                                        },
+                                        children: mergedLabels.industryTypeHelperText
+                                      }
+                                    )
+                                  ] }),
+                                  /* @__PURE__ */ jsxs(Col, { md: 6, children: [
+                                    /* @__PURE__ */ jsxs(Body1, { className: styles.label, children: [
+                                      mergedLabels.cargoCategoryLabel,
+                                      " ",
+                                      /* @__PURE__ */ jsx("span", { style: { color: "red" }, children: "*" })
+                                    ] }),
+                                    /* @__PURE__ */ jsx(
+                                      InputDynamic_default,
+                                      {
+                                        control,
+                                        name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoCategory`,
+                                        placeholder: mergedLabels.selectPlaceholder,
+                                        type: "select",
+                                        options: []
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsxs(
+                                      Caption1,
+                                      {
+                                        style: {
+                                          color: tokens.colorNeutralForeground3,
+                                          marginTop: "0.25rem"
+                                        },
+                                        children: [
+                                          mergedLabels.cargoCategoryHelperTextPrefix,
+                                          " ",
+                                          /* @__PURE__ */ jsx("a", { href: "#", className: styles.link, children: mergedLabels.hereLinkText })
+                                        ]
+                                      }
+                                    )
+                                  ] })
                                 ] }),
-                                /* @__PURE__ */ jsx(
-                                  InputDynamic_default,
-                                  {
-                                    control,
-                                    name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoCategory`,
-                                    placeholder: "Pilih",
-                                    type: "select",
-                                    options: []
-                                  }
-                                ),
-                                /* @__PURE__ */ jsxs(
-                                  Caption1,
+                                /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { children: (owner.cargoItems?.length || 0) > 1 && /* @__PURE__ */ jsx(
+                                  Button,
                                   {
+                                    icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
+                                    onClick: (e) => {
+                                      e.stopPropagation();
+                                      onDeleteCargo(owner.id, cargo.id);
+                                    },
+                                    onKeyDown: (e) => {
+                                      if (e.key === "Enter" || e.key === " ") {
+                                        e.stopPropagation();
+                                        onDeleteCargo(owner.id, cargo.id);
+                                      }
+                                    },
+                                    size: "medium",
+                                    shape: "circular",
                                     style: {
-                                      color: tokens.colorNeutralForeground3,
-                                      marginTop: "0.25rem"
+                                      border: `1px solid ${tokens.colorPaletteRedForeground1}`,
+                                      color: tokens.colorPaletteRedForeground1,
+                                      width: "100%"
                                     },
-                                    children: [
-                                      "Pahami definisi, jenis dan contoh kategori muatan",
-                                      " ",
-                                      /* @__PURE__ */ jsx("a", { href: "#", className: styles.link, children: "disini" })
-                                    ]
-                                  }
-                                )
-                              ] })
-                            ] }),
-                            /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { children: (owner.cargoItems?.length || 0) > 1 && /* @__PURE__ */ jsx(
-                              Button,
-                              {
-                                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
-                                onClick: (e) => {
-                                  e.stopPropagation();
-                                  onDeleteCargo(owner.id, cargo.id);
-                                },
-                                onKeyDown: (e) => {
-                                  if (e.key === "Enter" || e.key === " ") {
-                                    e.stopPropagation();
-                                    onDeleteCargo(owner.id, cargo.id);
+                                    children: mergedLabels.deleteCargoButton
                                   }
-                                },
-                                size: "medium",
-                                shape: "circular",
-                                style: {
-                                  border: `1px solid ${tokens.colorPaletteRedForeground1}`,
-                                  color: tokens.colorPaletteRedForeground1,
-                                  width: "100%"
-                                },
-                                children: "Hapus Muatan"
-                              }
-                            ) }) })
-                          ] }) })
-                        ]
-                      },
-                      cargo.id
-                    ))
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    appearance: "secondary",
-                    icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-24-regular" }),
-                    shape: "circular",
-                    style: {
-                      borderColor: tokens.colorBrandStroke1,
-                      color: tokens.colorBrandBackground,
-                      marginTop: "1rem",
-                      width: "100%"
-                    },
-                    onClick: () => onAddCargo(owner.id),
-                    children: "Tambah Muatan"
-                  }
-                )
+                                ) }) })
+                              ] }) })
+                            ]
+                          },
+                          cargo.id
+                        ))
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        appearance: "secondary",
+                        icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-24-regular" }),
+                        shape: "circular",
+                        style: {
+                          borderColor: tokens.colorBrandStroke1,
+                          color: tokens.colorBrandBackground,
+                          marginTop: "1rem",
+                          width: "100%"
+                        },
+                        onClick: () => onAddCargo(owner.id),
+                        children: mergedLabels.addCargoButton
+                      }
+                    )
+                  ] }) })
+                ] })
               ] }) })
-            ] })
-          ] }) })
-        ]
-      },
-      owner.id
-    )) })
+            ]
+          },
+          owner.id
+        ))
+      }
+    )
   ] });
 };
 
 // src/components/CardBookingTicket/CardBookingTicket.constants.ts
-var DEFAULT_LABELS14 = {
+var DEFAULT_LABELS24 = {
   id: {
     bookingDetails: "Booking Details",
     routeTitle: "Rute Perjalanan",
@@ -8623,7 +9162,7 @@ var CardBookingTicket = ({
   className
 }) => {
   const styles = useStyles26();
-  const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxs(Card, { className: styles.bookingDetailTop, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.bookingDetails }),
@@ -8760,14 +9299,60 @@ var CardBookingTicket = ({
 };
 
 // src/components/CardFAQ/CardFAQ.constants.ts
-var DEFAULT_LABELS15 = {
+var DEFAULT_LABELS25 = {
   id: {
-    title: "FAQ"
+    title: "Pertanyaan yang sering diajukan"
   },
   en: {
-    title: "FAQ"
+    title: "Frequently Asked Questions"
   }
 };
+var DEFAULT_FAQ_ITEMS = {
+  id: [
+    {
+      value: "1",
+      question: "Bagaimana cara memesan tiket?",
+      answer: "Anda dapat memesan tiket melalui halaman pencarian tiket dengan memilih pelabuhan asal, tujuan, dan tanggal keberangkatan."
+    },
+    {
+      value: "2",
+      question: "Apakah bisa mengajukan refund?",
+      answer: "Ya, pengajuan refund dapat dilakukan melalui menu Riwayat Pesanan sesuai dengan syarat dan ketentuan yang berlaku."
+    },
+    {
+      value: "3",
+      question: "Metode pembayaran apa saja yang tersedia?",
+      answer: "Kami mendukung berbagai metode pembayaran termasuk Virtual Account, E-Wallet, dan Kartu Kredit/Debit."
+    },
+    {
+      value: "4",
+      question: "Apakah tiket perlu dicetak?",
+      answer: "Tidak perlu. Anda dapat menunjukkan E-Tiket atau QR Code pada saat check-in di pelabuhan."
+    }
+  ],
+  en: [
+    {
+      value: "1",
+      question: "How to book a ticket?",
+      answer: "You can book tickets through the ticket search page by selecting origin, destination, and departure date."
+    },
+    {
+      value: "2",
+      question: "Can I request a refund?",
+      answer: "Yes, refund requests can be made via the Order History menu subject to applicable terms and conditions."
+    },
+    {
+      value: "3",
+      question: "What payment methods are available?",
+      answer: "We support various payment methods including Virtual Account, E-Wallet, and Credit/Debit Cards."
+    },
+    {
+      value: "4",
+      question: "Do I need to print the ticket?",
+      answer: "No physically printed ticket needed. You can show your E-Ticket or QR Code during check-in at the port."
+    }
+  ]
+};
 var useStyles27 = makeStyles({
   faqSection: {
     // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
@@ -8786,38 +9371,18 @@ var useStyles27 = makeStyles({
     fontWeight: tokens.fontWeightBold
   }
 });
-var FAQ_ITEMS = [
-  {
-    value: "1",
-    question: "FAQ 1",
-    answer: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus saepe repudiandae dolore pariatur veniam! Aliquam nesciunt saepe, optio inventore fuga quam dignissimos possimus, dolorem alias, blanditiis veniam voluptatibus eaque ex?"
-  },
-  {
-    value: "2",
-    question: "FAQ 2",
-    answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolor consequatur, sit facere ex, ullam quos natus sapiente nihil cum libero velit, labore necessitatibus rem? Tenetur omnis tempora alias totam."
-  },
-  {
-    value: "3",
-    question: "FAQ 3",
-    answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae officiis modi quaerat eum illo, consectetur aperiam atque? Corrupti cupiditate sequi iusto reiciendis dignissimos, eius, nihil temporibus eaque delectus, saepe ullam!"
-  },
-  {
-    value: "4",
-    question: "FAQ 4",
-    answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint maiores debitis, earum animi dolorum unde asperiores accusantium nemo consectetur nulla reiciendis eveniet pariatur autem rerum adipisci sequi officia vero ipsam!"
-  }
-];
 var CardFAQ = ({
   language = "id",
   labels,
+  items,
   className
 }) => {
   const styles = useStyles27();
-  const mergedLabels = { ...DEFAULT_LABELS15[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
+  const faqItems = items || DEFAULT_FAQ_ITEMS[language];
   return /* @__PURE__ */ jsxs(Card, { className: styles.faqCard, children: [
     /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.title }),
-    /* @__PURE__ */ jsx(Accordion, { collapsible: true, children: FAQ_ITEMS.map((item) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Accordion, { collapsible: true, children: faqItems.map((item) => /* @__PURE__ */ jsxs(
       AccordionItem,
       {
         value: item.value,
@@ -8850,7 +9415,7 @@ var CardFAQ = ({
 };
 
 // src/components/CardAddon/CardAddon.constants.ts
-var DEFAULT_LABELS16 = {
+var DEFAULT_LABELS26 = {
   id: {
     viewDetail: "Lihat detail",
     totalPrice: "Total Harga",
@@ -9038,7 +9603,7 @@ var CardAddon = ({
   className
 }) => {
   const styles = useStyles28();
-  const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
   return /* @__PURE__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.gapRow, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.titleDivider, children: [
       /* @__PURE__ */ jsx(Title3, { className: styles.textTitle, children: title }),
@@ -9230,7 +9795,7 @@ var CardAddon = ({
 };
 
 // src/components/CardMealCatalog/CardMealCatalog.constants.ts
-var DEFAULT_LABELS17 = {
+var DEFAULT_LABELS27 = {
   id: {
     addButton: "Tambah"
   },
@@ -9378,7 +9943,7 @@ var CardMealCatalog = ({
   className
 }) => {
   const styles = useStyles29();
-  const mergedLabels = { ...DEFAULT_LABELS17[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.banner, children: [
       /* @__PURE__ */ jsx("div", { className: styles.bannerOverlay }),
@@ -9468,7 +10033,7 @@ var CardMealCatalog = ({
 };
 
 // src/components/CardReview/CardReview.constants.ts
-var DEFAULT_LABELS18 = {
+var DEFAULT_LABELS28 = {
   id: {},
   en: {}
 };
@@ -9524,7 +10089,7 @@ var CardReview = ({
   headerAction
 }) => {
   const styles = useStyles30();
-  ({ ...DEFAULT_LABELS18[language], ...labels });
+  ({ ...DEFAULT_LABELS28[language], ...labels });
   return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
       /* @__PURE__ */ jsx(Subtitle1, { className: styles.headerTitle, children: title }),
@@ -9571,7 +10136,7 @@ var CardReview = ({
 };
 
 // src/components/CardReviewPassenger/CardReviewPassenger.constants.ts
-var DEFAULT_LABELS19 = {
+var DEFAULT_LABELS29 = {
   id: {
     title: "Penumpang",
     idNumber: "Nomor ID"
@@ -9680,7 +10245,7 @@ var CardReviewPassenger = ({
   className
 }) => {
   const styles = useStyles31();
-  const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
@@ -9723,7 +10288,7 @@ var CardReviewPassenger = ({
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts
-var DEFAULT_LABELS20 = {
+var DEFAULT_LABELS30 = {
   id: {
     defaultTitle: "Rincian Harga",
     totalPayment: "Total Pembayaran",
@@ -9738,7 +10303,8 @@ var DEFAULT_LABELS20 = {
     agreementLinkFerizy: "Syarat & Ketentuan",
     agreementCovidInfo: "Ketentuan persyaratan menyeberang sesuai dengan\xA0",
     agreementCovidLink: "Surat Edaran Satgas Covid-19 Nomor 23 Tahun 2022.",
-    agreementFinal: "Bahwa apabila saya didapati tidak memenuhi ketentuan persyaratan menyeberang pada butir 2 (dua) diatas yang mengakibatkan saya terlambat atau tidak dapat melakukan Check-In di pelabuhan tepat waktu, maka saya menerima dan menyetujui untuk diproses sesuai dengan Syarat & Ketentuan Ferizy sebagaimana tersebut pada butir 1 (satu) di atas."
+    agreementFinal: "Bahwa apabila saya didapati tidak memenuhi ketentuan persyaratan menyeberang pada butir 2 (dua) diatas yang mengakibatkan saya terlambat atau tidak dapat melakukan Check-In di pelabuhan tepat waktu, maka saya menerima dan menyetujui untuk diproses sesuai dengan Syarat & Ketentuan Ferizy sebagaimana tersebut pada butir 1 (satu) di atas.",
+    currencyPrefix: "Rp. "
   },
   en: {
     defaultTitle: "Price Details",
@@ -9754,7 +10320,8 @@ var DEFAULT_LABELS20 = {
     agreementLinkFerizy: "Ferizy Terms & Conditions",
     agreementCovidInfo: "Crossing requirement provisions in accordance with\xA0",
     agreementCovidLink: "Covid-19 Task Force Circular Letter Number 23 of 2022.",
-    agreementFinal: "That if I am found not to meet the crossing requirement provisions in point 2 (two) above which results in me being late or unable to Check-In at the port on time, then I accept and agree to be processed in accordance with the Ferizy Terms & Conditions as mentioned in point 1 (one) above."
+    agreementFinal: "That if I am found not to meet the crossing requirement provisions in point 2 (two) above which results in me being late or unable to Check-In at the port on time, then I accept and agree to be processed in accordance with the Ferizy Terms & Conditions as mentioned in point 1 (one) above.",
+    currencyPrefix: "Rp. "
   }
 };
 var useStyles32 = makeStyles({
@@ -9776,11 +10343,11 @@ var useStyles32 = makeStyles({
   }
 });
 var PriceDetailsTerms = ({
-  language = "id"
+  language = "id",
+  labels
 }) => {
   const styles = useStyles32();
   const linkColor = tokens.colorBrandBackground;
-  const labels = DEFAULT_LABELS20[language];
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
     /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -9880,7 +10447,7 @@ var CardPriceDetails = ({
   labels
 }) => {
   const styles = useStyles33();
-  const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   const getVariantClass = (variant) => {
     switch (variant) {
@@ -9899,10 +10466,10 @@ var CardPriceDetails = ({
       /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
         isTaxLike ? /* @__PURE__ */ jsx(Body1Strong, { className: variantClass, children: item.name }) : /* @__PURE__ */ jsx(Caption1, { className: mergeClasses(styles.label, variantClass), children: item.name }),
         isTaxLike ? /* @__PURE__ */ jsxs(Body1Strong, { className: mergeClasses(styles.value, variantClass), children: [
-          "Rp. ",
+          mergedLabels.currencyPrefix,
           item.price.toLocaleString("id-ID")
         ] }) : /* @__PURE__ */ jsxs(Body1, { className: mergeClasses(styles.value, variantClass), children: [
-          item.isRedeem ? "-" : "Rp. ",
+          item.isRedeem ? "-" : mergedLabels.currencyPrefix,
           item.price.toLocaleString("id-ID")
         ] })
       ] }),
@@ -9928,18 +10495,18 @@ var CardPriceDetails = ({
       /* @__PURE__ */ jsxs("div", { className: styles.totalRow, children: [
         /* @__PURE__ */ jsx(Subtitle1, { className: styles.totalLabel, children: mergedLabels.totalPayment }),
         /* @__PURE__ */ jsxs(Subtitle1, { className: styles.totalValue, children: [
-          "Rp. ",
+          mergedLabels.currencyPrefix,
           total.toLocaleString("id-ID")
         ] })
       ] }),
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsx(PriceDetailsTerms, { language })
+      /* @__PURE__ */ jsx(PriceDetailsTerms, { language, labels: mergedLabels })
     ] })
   ] });
 };
 
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
-var DEFAULT_LABELS21 = {
+var DEFAULT_LABELS31 = {
   id: {},
   en: {}
 };
@@ -10004,7 +10571,7 @@ var CardPaymentMethodList = ({
   onSelect
 }) => {
   const styles = useStyles34();
-  ({ ...DEFAULT_LABELS21[language], ...labels });
+  ({ ...DEFAULT_LABELS31[language], ...labels });
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
     index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
     /* @__PURE__ */ jsx(Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: category.value, children: [
@@ -10051,7 +10618,7 @@ var CardPaymentMethodList = ({
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
-var DEFAULT_LABELS22 = {
+var DEFAULT_LABELS32 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -10097,7 +10664,7 @@ var CardPaymentGuide = ({
   className
 }) => {
   const styles = useStyles35();
-  const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     title && /* @__PURE__ */ jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsx(Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -10116,7 +10683,7 @@ var CardPaymentGuide = ({
 };
 
 // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
-var DEFAULT_LABELS23 = {
+var DEFAULT_LABELS33 = {
   id: {
     expiryPrefix: "Kode virtual akun berlaku sampai",
     copyCodeButton: "Salin Kode",
@@ -10215,7 +10782,7 @@ var CardPaymentInfo = ({
   onCheckStatus
 }) => {
   const styles = useStyles36();
-  const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.expiryPrefix }),
@@ -10276,7 +10843,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS24 = {
+var DEFAULT_LABELS34 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -10375,7 +10942,7 @@ var CardStatusOrder = ({
   className
 }) => {
   const styles = useStyles37();
-  const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
   const displayStatus = statusLabel || mergedLabels.defaultStatus;
   const displayTitle = title || mergedLabels.defaultTitle;
   const displayDescription = description || mergedLabels.defaultDescription;
@@ -10470,6 +11037,32 @@ var CardStatusOrder = ({
     ) }) })
   ] }) });
 };
+
+// src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
+var DEFAULT_LABELS35 = {
+  id: {
+    title: "Rincian Harga",
+    addonHeader: "Add On",
+    subTotalLabel: "Sub Tagihan",
+    totalTagihanLabel: "Total Tagihan",
+    ppnLabel: "PPN (Pajak Pertambahan Nilai) 11%",
+    ppnNote: "*PPN 11% dikenakan untuk biaya layanan dan biaya admin",
+    grandTotalLabel: "Total Pembayaran",
+    currencyPrefix: "Rp.",
+    currencyCode: "IDR."
+  },
+  en: {
+    title: "Price Details",
+    addonHeader: "Add On",
+    subTotalLabel: "Sub Total",
+    totalTagihanLabel: "Total Bill",
+    ppnLabel: "VAT (Value Added Tax) 11%",
+    ppnNote: "*VAT 11% is charged for service fees and admin fees",
+    grandTotalLabel: "Total Payment",
+    currencyPrefix: "Rp.",
+    currencyCode: "IDR."
+  }
+};
 var useStyles38 = makeStyles({
   surface: {
     width: "680px",
@@ -10486,7 +11079,10 @@ var useStyles38 = makeStyles({
   card: {
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.border("1px", "solid", tokens.colorNeutralStroke2),
-    ...shorthands.padding(tokens.spacingVerticalXXL, tokens.spacingHorizontalXXL),
+    ...shorthands.padding(
+      tokens.spacingVerticalXXL,
+      tokens.spacingHorizontalXXL
+    ),
     boxShadow: "none"
   },
   content: {
@@ -10583,6 +11179,8 @@ var useStyles38 = makeStyles({
   }
 });
 var ModalPriceDetail = ({
+  language = "id",
+  labels,
   isOpen,
   onOpenChange,
   detailItems,
@@ -10593,99 +11191,133 @@ var ModalPriceDetail = ({
   ...props
 }) => {
   const styles = useStyles38();
-  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (_, data) => onOpenChange(data.open), ...props, children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-    /* @__PURE__ */ jsx(
-      DialogTitle,
-      {
-        className: styles.dialogTitle,
-        action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
-          Button,
+  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: isOpen,
+      onOpenChange: (_, data) => onOpenChange(data.open),
+      ...props,
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(
+          DialogTitle,
           {
-            appearance: "subtle",
-            "aria-label": "close",
-            icon: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
-              "path",
+            className: styles.dialogTitle,
+            action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
+              Button,
               {
-                d: "M18 6L6 18M6 6L18 18",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M18 6L6 18M6 6L18 18",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                ) })
               }
-            ) })
+            ) }),
+            children: mergedLabels.title
           }
-        ) }),
-        children: "Rincian Harga"
-      }
-    ),
-    /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx(Card, { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
-      detailItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx("span", { className: styles.vehicleTitle, children: item.label }),
-            item.badge && /* @__PURE__ */ jsx(Badge, { size: "medium", shape: "rounded", className: styles.badge, children: item.badge })
+        ),
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx(Card, { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
+          detailItems.map((item) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.vehicleTitle, children: item.label }),
+                item.badge && /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    size: "medium",
+                    shape: "rounded",
+                    className: styles.badge,
+                    children: item.badge
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: styles.priceValue, children: [
+                mergedLabels.currencyPrefix,
+                " ",
+                item.price.toLocaleString("id-ID")
+              ] })
+            ] }),
+            item.list && item.list.map((subItem) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: styles.passengerDetail,
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: subItem.label }),
+                  /* @__PURE__ */ jsxs("span", { style: { float: "right" }, children: [
+                    mergedLabels.currencyCode,
+                    " ",
+                    item.price.toLocaleString("id-ID")
+                  ] })
+                ]
+              },
+              subItem.key
+            ))
+          ] }, item.key)),
+          addonItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: styles.addonHeader, children: mergedLabels.addonHeader }),
+            addonItems.map((item) => /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.itemLabel, children: item.label }),
+              /* @__PURE__ */ jsxs("span", { className: styles.priceValue, children: [
+                mergedLabels.currencyCode,
+                " ",
+                item.price.toLocaleString("id-ID")
+              ] })
+            ] }, item.key))
           ] }),
-          /* @__PURE__ */ jsxs("span", { className: styles.priceValue, children: [
-            "Rp. ",
-            item.price.toLocaleString("id-ID")
-          ] })
-        ] }),
-        item.list && item.list.map((subItem) => /* @__PURE__ */ jsxs("div", { className: styles.passengerDetail, children: [
-          /* @__PURE__ */ jsx("span", { children: subItem.label }),
-          /* @__PURE__ */ jsxs("span", { style: { float: "right" }, children: [
-            "IDR. ",
-            item.price.toLocaleString("id-ID")
-          ] })
-        ] }, subItem.key))
-      ] }, item.key)),
-      addonItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: styles.addonHeader, children: "Add On" }),
-        addonItems.map((item) => /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.itemLabel, children: item.label }),
-          /* @__PURE__ */ jsxs("span", { className: styles.priceValue, children: [
-            "IDR. ",
-            item.price.toLocaleString("id-ID")
-          ] })
-        ] }, item.key))
-      ] }),
-      /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
-      /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.totalLabel, children: "Sub Tagihan" }),
-        /* @__PURE__ */ jsxs("span", { className: styles.totalValue, children: [
-          "IDR.",
-          subTotal.toLocaleString("id-ID")
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.totalTagihanLabel, children: "Total Tagihan" }),
-        /* @__PURE__ */ jsxs("span", { className: styles.totalTagihanValue, children: [
-          "IDR.",
-          subTotal.toLocaleString("id-ID")
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacingVerticalL }, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.ppnLabel, children: "PPN (Pajak Pertambahan Nilai) 11%" }),
-          /* @__PURE__ */ jsxs("span", { className: styles.ppnValue, children: [
-            "IDR.",
-            taxAmount.toLocaleString("id-ID")
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: styles.ppnNote, children: "*PPN 11% dikenakan untuk biaya layanan dan biaya admin" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.row, style: { marginTop: tokens.spacingVerticalXXL }, children: [
-        /* @__PURE__ */ jsx("span", { className: styles.grandTotalLabel, children: "Total Pembayaran" }),
-        /* @__PURE__ */ jsxs("span", { className: styles.grandTotalValue, children: [
-          "Rp.",
-          grandTotal.toLocaleString("id-ID")
-        ] })
-      ] })
-    ] }) }) })
-  ] }) }) });
+          /* @__PURE__ */ jsx(Divider, { className: styles.divider }),
+          /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.totalLabel, children: mergedLabels.subTotalLabel }),
+            /* @__PURE__ */ jsxs("span", { className: styles.totalValue, children: [
+              mergedLabels.currencyCode,
+              subTotal.toLocaleString("id-ID")
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.totalTagihanLabel, children: mergedLabels.totalTagihanLabel }),
+            /* @__PURE__ */ jsxs("span", { className: styles.totalTagihanValue, children: [
+              mergedLabels.currencyCode,
+              subTotal.toLocaleString("id-ID")
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacingVerticalL }, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.row, children: [
+              /* @__PURE__ */ jsx("span", { className: styles.ppnLabel, children: mergedLabels.ppnLabel }),
+              /* @__PURE__ */ jsxs("span", { className: styles.ppnValue, children: [
+                mergedLabels.currencyCode,
+                taxAmount.toLocaleString("id-ID")
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.ppnNote, children: mergedLabels.ppnNote })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: styles.row,
+              style: { marginTop: tokens.spacingVerticalXXL },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: styles.grandTotalLabel, children: mergedLabels.grandTotalLabel }),
+                /* @__PURE__ */ jsxs("span", { className: styles.grandTotalValue, children: [
+                  mergedLabels.currencyPrefix,
+                  grandTotal.toLocaleString("id-ID")
+                ] })
+              ]
+            }
+          )
+        ] }) }) })
+      ] }) })
+    }
+  );
 };
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS25 = {
+var DEFAULT_LABELS36 = {
   id: {},
   en: {}
 };
@@ -10748,7 +11380,7 @@ var CardProfileMenu = ({
   onTabSelect
 }) => {
   const styles = useStyles39();
-  ({ ...DEFAULT_LABELS25[language], ...labels });
+  ({ ...DEFAULT_LABELS36[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
   };
@@ -10777,6 +11409,6 @@ var CardProfileMenu = ({
   ) });
 };
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS3 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS4 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS10 as DateFilterDefaultLabels, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS9 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
+export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS7 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS8 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_COUNTRY_CODES, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_CLASSES, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS15 as DateFilterDefaultLabels, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS14 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map