@asdp/ferryui 0.1.22-dev.8649 → 0.1.22-dev.8661

package/dist/index.js

@@ -199,6 +199,20 @@ var MODAL_PRESETS = {
   PURCHASE_PERIOD_EXPIRED: getModalPreset("PURCHASE_PERIOD_EXPIRED", "id"),
   TRANSACTION_LIMIT: getModalPreset("TRANSACTION_LIMIT", "id")
 };
+
+// src/components/CarouselWithCustomNav/CarouselWithCustomNav.constants.ts
+var DEFAULT_LABELS2 = {
+  id: {
+    carouselAriaLabel: "Carousel",
+    slideAriaLabel: "Slide {index}",
+    announcementTemplate: "Carousel slide {index} dari {total}"
+  },
+  en: {
+    carouselAriaLabel: "Carousel",
+    slideAriaLabel: "Slide {index}",
+    announcementTemplate: "Carousel slide {index} of {total}"
+  }
+};
 var useStyles2 = reactComponents.makeStyles({
   carousel: {},
   customCarouselNav: {
@@ -256,32 +270,49 @@ var useStyles2 = reactComponents.makeStyles({
     }
   }
 });
-var defaultAnnouncement = (index, totalSlides) => {
-  return `Carousel slide ${index + 1} of ${totalSlides}`;
-};
 var CarouselWithCustomNav = ({
+  language = "id",
+  labels: customLabels,
   children,
   circular = true,
   draggable = true,
   align = "start",
   whitespace = false,
-  announcement = defaultAnnouncement,
+  announcement: customAnnouncement,
   activeIndex: controlledIndex,
   onActiveIndexChange,
-  ariaLabel = "Carousel",
+  ariaLabel: deprecatedAriaLabel,
   darkNavBackground = true,
   className,
   cardFocus = false
 }) => {
   const styles = useStyles2();
   const [internalIndex, setInternalIndex] = React5.useState(0);
+  const labels = React5__default.default.useMemo(
+    () => ({
+      ...DEFAULT_LABELS2[language],
+      ...customLabels,
+      ...deprecatedAriaLabel && { carouselAriaLabel: deprecatedAriaLabel }
+    }),
+    [language, customLabels, deprecatedAriaLabel]
+  );
   const activeIndex = controlledIndex !== void 0 ? controlledIndex : internalIndex;
-  const handleIndexChange = React5.useCallback((index) => {
-    if (controlledIndex === void 0) {
-      setInternalIndex(index);
-    }
-    onActiveIndexChange?.(index);
-  }, [controlledIndex, onActiveIndexChange]);
+  const handleIndexChange = React5.useCallback(
+    (index) => {
+      if (controlledIndex === void 0) {
+        setInternalIndex(index);
+      }
+      onActiveIndexChange?.(index);
+    },
+    [controlledIndex, onActiveIndexChange]
+  );
+  const defaultAnnouncement = React5.useCallback(
+    (index, totalSlides) => {
+      return labels.announcementTemplate.replace("{index}", (index + 1).toString()).replace("{total}", totalSlides.toString());
+    },
+    [labels.announcementTemplate]
+  );
+  const announcement = customAnnouncement || defaultAnnouncement;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactComponents.Carousel,
     {
@@ -298,7 +329,7 @@ var CarouselWithCustomNav = ({
           reactComponents.CarouselSlider,
           {
             cardFocus,
-            "aria-label": ariaLabel,
+            "aria-label": labels.carouselAriaLabel,
             children
           }
         ) }),
@@ -311,7 +342,15 @@ var CarouselWithCustomNav = ({
             },
             appearance: "brand",
             className: styles.carouselNavButton,
-            children: (index) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.CarouselNavButton, { "aria-label": `Slide ${index + 1}` })
+            children: (index) => /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.CarouselNavButton,
+              {
+                "aria-label": labels.slideAriaLabel.replace(
+                  "{index}",
+                  (index + 1).toString()
+                )
+              }
+            )
           }
         )
       ]
@@ -320,14 +359,20 @@ var CarouselWithCustomNav = ({
 };
 
 // src/components/CardPromo/CardPromo.constants.ts
-var DEFAULT_LABELS2 = {
+var DEFAULT_LABELS3 = {
   id: {
     defaultImageAlt: "Gambar Promo",
-    defaultButtonText: "Lihat Detail"
+    defaultButtonText: "Lihat Detail",
+    promoAriaLabel: "Promo {index} dari {total}",
+    promoAriaLabelSingle: "Promo {index}",
+    loadingContent: "Memuat konten"
   },
   en: {
     defaultImageAlt: "Promo Image",
-    defaultButtonText: "View Details"
+    defaultButtonText: "View Details",
+    promoAriaLabel: "Promo {index} of {total}",
+    promoAriaLabelSingle: "Promo {index}",
+    loadingContent: "Loading content"
   }
 };
 var useStyles3 = reactComponents.makeStyles({
@@ -431,10 +476,13 @@ var CardPromo = ({
   labels
 }) => {
   const classes = useStyles3();
-  const mergedLabels = { ...DEFAULT_LABELS2[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS3[language], ...labels };
   const displayImageAlt = imageAlt || mergedLabels.defaultImageAlt;
   const displayButtonText = buttonText || mergedLabels.defaultButtonText;
-  const ariaLabel = totalCards ? `Card ${index + 1} of ${totalCards}` : `Promo card ${index + 1}`;
+  const ariaLabel = totalCards ? mergedLabels.promoAriaLabel.replace("{index}", (index + 1).toString()).replace("{total}", totalCards.toString()) : mergedLabels.promoAriaLabelSingle.replace(
+    "{index}",
+    (index + 1).toString()
+  );
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactComponents.CarouselCard,
@@ -442,7 +490,7 @@ var CardPromo = ({
         autoSize: true,
         className: reactComponents.mergeClasses(classes.actionCard, className),
         style: { cursor: "default" },
-        children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { "aria-label": "Loading content", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { "aria-label": mergedLabels.loadingContent, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: reactComponents.mergeClasses(classes.imageContainer, imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
             reactComponents.SkeletonItem,
             {
@@ -532,7 +580,7 @@ var CardPromo = ({
 };
 
 // src/components/CardBanner/CardBanner.constants.ts
-var DEFAULT_LABELS3 = {
+var DEFAULT_LABELS4 = {
   id: {
     bannerAriaLabel: "Banner {index} dari {total}",
     bannerAriaLabelSingle: "Banner {index}",
@@ -577,7 +625,7 @@ var CardBanner = ({
 }) => {
   const classes = useStyles4();
   const mergedLabels = {
-    ...DEFAULT_LABELS3[language],
+    ...DEFAULT_LABELS4[language],
     ...labels
   };
   const ariaLabel = totalBanners ? mergedLabels.bannerAriaLabel.replace("{index}", (index + 1).toString()).replace("{total}", totalBanners.toString()) : mergedLabels.bannerAriaLabelSingle.replace(
@@ -760,7 +808,7 @@ var extendedTokens = {
   colorBrandForegroundLinkSelected: customBrand[110]});
 
 // src/components/CardTicket/CardTicket.constants.ts
-var DEFAULT_LABELS4 = {
+var DEFAULT_LABELS5 = {
   id: {
     availableSeatsLabel: "Tersedia",
     estimationPrefix: "Estimasi",
@@ -769,7 +817,9 @@ var DEFAULT_LABELS4 = {
     totalPriceLabel: "Total harga",
     facilitiesLabel: "Fasilitas",
     selectTicketButton: "Pilih Tiket",
-    timezoneLabel: "WIB"
+    timezoneLabel: "WIB",
+    currencySymbol: "IDR",
+    logoAlt: "Logo ASDP"
   },
   en: {
     availableSeatsLabel: "Available",
@@ -779,7 +829,9 @@ var DEFAULT_LABELS4 = {
     totalPriceLabel: "Total price",
     facilitiesLabel: "Facilities",
     selectTicketButton: "Select Ticket",
-    timezoneLabel: "WIB"
+    timezoneLabel: "WIB",
+    currencySymbol: "IDR",
+    logoAlt: "ASDP Logo"
   }
 };
 var useStyles5 = reactComponents.makeStyles({
@@ -1002,7 +1054,7 @@ var CardTicket = ({
 }) => {
   const styles = useStyles5();
   const { width } = useWindowSize();
-  const mergedLabels = { ...DEFAULT_LABELS4[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS5[language], ...labels };
   const getCircularVerticalConfig = () => {
     if (width <= 1600) return { count: 6, spacing: 60, top: 10 };
     return { count: 5, spacing: 60, top: 18 };
@@ -1079,7 +1131,7 @@ var CardTicket = ({
                   {
                     src: "/assets/logo/asdp-default.svg",
                     className: styles.asdpLogo,
-                    alt: "asdp",
+                    alt: mergedLabels.logoAlt,
                     height: 56,
                     width: 82
                   }
@@ -1284,8 +1336,11 @@ var CardTicket = ({
                         justifyContent: "end"
                       },
                       children: [
-                        "IDR\xA0",
-                        totalPrice.toLocaleString("id-ID")
+                        mergedLabels.currencySymbol,
+                        "\xA0",
+                        totalPrice.toLocaleString(
+                          language === "id" ? "id-ID" : "en-US"
+                        )
                       ]
                     }
                   )
@@ -1508,7 +1563,7 @@ var BackgroundTicketCardVertical = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
 var BackgroundTicketCardVertical_default = BackgroundTicketCardVertical;
 
 // src/components/CardServiceMenu/CardServiceMenu.constants.ts
-var DEFAULT_LABELS5 = {
+var DEFAULT_LABELS6 = {
   id: {
     ferryLabel: "Ferry",
     ferryDescription: "Layanan penyeberangan ferry ASDP",
@@ -1519,7 +1574,8 @@ var DEFAULT_LABELS5 = {
     hotelLabel: "Hotel",
     hotelDescription: "Layanan pemesanan hotel",
     otherLabel: "Lainnya",
-    otherDescription: "Layanan lainnya"
+    otherDescription: "Layanan lainnya",
+    serviceAriaLabel: "Layanan"
   },
   en: {
     ferryLabel: "Ferry",
@@ -1531,7 +1587,8 @@ var DEFAULT_LABELS5 = {
     hotelLabel: "Hotel",
     hotelDescription: "Hotel Booking Service",
     otherLabel: "Other",
-    otherDescription: "Other Services"
+    otherDescription: "Other Services",
+    serviceAriaLabel: "Service"
   }
 };
 var ALIAS_MENU_ITEMS = {
@@ -1657,7 +1714,7 @@ var CardServiceMenu = ({
   labels
 }) => {
   const styles = useStyles6();
-  const mergedLabels = { ...DEFAULT_LABELS5[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS6[language], ...labels };
   const getMenuItemClass = (serviceId) => {
     const isActive = activeServiceId === serviceId;
     return reactComponents.mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
@@ -1674,6 +1731,7 @@ var CardServiceMenu = ({
         {
           className: getMenuItemClass(item.id),
           onClick: () => onServiceClick?.(item.id),
+          "aria-label": `${mergedLabels.serviceAriaLabel} ${label}`,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.logo, alt: label, className: styles.logo }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
@@ -1729,68 +1787,83 @@ var DatePickerInput = React5.forwardRef(
       }
       onClick?.(e);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Popover, { open: isOpen, onOpenChange: (_, data) => setIsOpen(data.open), trapFocus: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactComponents.Input,
-        {
-          ...restProps,
-          value: formatDate(field.value),
-          readOnly: true,
-          placeholder: placeholder || "Pilih tanggal",
-          disabled,
-          appearance,
-          size,
-          contentBefore,
-          onClick: handleInputClick,
-          style: {
-            cursor: disabled ? "not-allowed" : "pointer",
-            ...style
-          },
-          contentAfter: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactComponents.Popover,
+      {
+        open: isOpen,
+        onOpenChange: (_, data) => setIsOpen(data.open),
+        trapFocus: true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.PopoverTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Input,
             {
-              onClick: (e) => {
-                e.stopPropagation();
-                if (!disabled) {
-                  setIsOpen(!isOpen);
-                }
-              },
+              ...restProps,
+              value: formatDate(field.value),
+              readOnly: true,
+              placeholder,
+              disabled,
+              appearance,
+              size,
+              contentBefore,
+              onClick: handleInputClick,
               style: {
                 cursor: disabled ? "not-allowed" : "pointer",
-                display: "flex",
-                alignItems: "center"
+                ...style
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:calendar-24-regular" })
+              contentAfter: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (!disabled) {
+                      setIsOpen(!isOpen);
+                    }
+                  },
+                  style: {
+                    cursor: disabled ? "not-allowed" : "pointer",
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:calendar-24-regular" })
+                }
+              )
             }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.PopoverSurface, { tabIndex: -1, style: { maxWidth: "530px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-        reactCalendarCompat.Calendar,
-        {
-          value: dateValue,
-          onSelectDate,
-          showGoToToday: true,
-          highlightSelectedMonth: true,
-          showMonthPickerAsOverlay: false,
-          maxDate: max ? new Date(max) : void 0
-        }
-      ) })
-    ] });
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.PopoverSurface, { tabIndex: -1, style: { maxWidth: "530px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactCalendarCompat.Calendar,
+            {
+              value: dateValue,
+              onSelectDate,
+              showGoToToday: true,
+              highlightSelectedMonth: true,
+              showMonthPickerAsOverlay: false,
+              maxDate: max ? new Date(max) : void 0
+            }
+          ) })
+        ]
+      }
+    );
   }
 );
 DatePickerInput.displayName = "DatePickerInput";
 var DatePickerInput_default = DatePickerInput;
 
 // src/components/InputDynamic/InputDynamic.constants.ts
-var DEFAULT_LABELS6 = {
+var DEFAULT_LABELS7 = {
   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"
+    identityIdPlaceholder: "KTP, SIM, atau Passport",
+    showPasswordAriaLabel: "Tampilkan kata sandi",
+    hidePasswordAriaLabel: "Sembunyikan kata sandi",
+    datePickerPlaceholder: "Pilih tanggal",
+    phoneDefaultPlaceholder: "Nomor telepon",
+    requiredFieldError: "Field ini wajib diisi",
+    invalidEmailError: "Email tidak valid",
+    emailOrPhoneRequiredError: "Email atau nomor HP wajib diisi"
   },
   en: {
     emailOrPhonePlaceholder: "Email or Phone Number",
@@ -1798,7 +1871,14 @@ var DEFAULT_LABELS6 = {
     phonePlaceholder: "Phone Number",
     identityPlaceholder: "Email, ID Card, Driving License, Passport, or Phone Number",
     identityPhonePlaceholder: "Phone Number",
-    identityIdPlaceholder: "ID Card, Driving License, or Passport"
+    identityIdPlaceholder: "ID Card, Driving License, or Passport",
+    showPasswordAriaLabel: "Show password",
+    hidePasswordAriaLabel: "Hide password",
+    datePickerPlaceholder: "Select date",
+    phoneDefaultPlaceholder: "Phone number",
+    requiredFieldError: "This field is required",
+    invalidEmailError: "Invalid email",
+    emailOrPhoneRequiredError: "Email or phone number is required"
   }
 };
 var PhoneInput = PhoneInputComponent__default.default.default || PhoneInputComponent__default.default;
@@ -2048,7 +2128,7 @@ var InputDynamic = ({
   labels
 }) => {
   const styles = useStyles7();
-  const mergedLabels = { ...DEFAULT_LABELS6[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
   const [showPassword, setShowPassword] = React5.useState(false);
   const [isPhoneMode, setIsPhoneMode] = React5.useState(false);
   const [emailOrPhoneType, setEmailOrPhoneType] = React5.useState("none");
@@ -2481,7 +2561,7 @@ var InputDynamic = ({
                   const cleanedValue = cleanPhoneValue(value || "");
                   field.onChange(cleanedValue);
                 },
-                placeholder: placeholder || "Nomor telepon",
+                placeholder: placeholder || mergedLabels.phoneDefaultPlaceholder,
                 disabled,
                 enableSearch: true,
                 disableSearchIcon: true
@@ -2522,7 +2602,7 @@ var InputDynamic = ({
           DatePickerInput_default,
           {
             field,
-            placeholder,
+            placeholder: placeholder || mergedLabels.datePickerPlaceholder,
             disabled,
             appearance: error ? "outline" : appearance,
             size,
@@ -2617,7 +2697,7 @@ var InputDynamic = ({
               {
                 appearance: "transparent",
                 icon: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:eye-off-24-filled" }) : /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:eye-24-filled" }),
-                "aria-label": showPassword ? "Hide password" : "Show password",
+                "aria-label": showPassword ? mergedLabels.hidePasswordAriaLabel : mergedLabels.showPasswordAriaLabel,
                 onClick: () => setShowPassword(!showPassword),
                 tabIndex: -1,
                 type: "button"
@@ -2782,7 +2862,7 @@ var InputDynamic = ({
   const getValidationRules = () => {
     const rules = {};
     if (required) {
-      rules.required = validationRules?.required || "Field ini wajib diisi";
+      rules.required = validationRules?.required || mergedLabels.requiredFieldError;
     }
     if (validationRules?.minLength) {
       rules.minLength = validationRules.minLength;
@@ -2805,13 +2885,13 @@ var InputDynamic = ({
     if (type === "email") {
       rules.pattern = {
         value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-        message: "Email tidak valid"
+        message: mergedLabels.invalidEmailError
       };
     }
     if (type === "emailOrPhone") {
       rules.validate = (value) => {
         if (required && !value) {
-          return "Email atau nomor HP wajib diisi";
+          return mergedLabels.emailOrPhoneRequiredError;
         }
         const stringValue = typeof value === "string" ? value : "";
         if (!stringValue) return true;
@@ -3146,7 +3226,7 @@ var DEFAULT_COUNTRY_CODES = [
 ];
 
 // src/components/CardTicketSearch/CardTicketSearch.constants.ts
-var DEFAULT_LABELS7 = {
+var DEFAULT_LABELS8 = {
   id: {
     fromLabel: "Dari",
     toLabel: "Ke",
@@ -3163,7 +3243,17 @@ var DEFAULT_LABELS7 = {
     placeholderReturnDate: "Pilih Tanggal Kepulangan",
     placeholderTypeClass: "Pilih Kelas Layanan",
     placeholderTypeService: "Pilih Jenis Layanan",
-    placeholderPassenger: "Pilih Jumlah Penumpang"
+    placeholderPassenger: "Pilih Jumlah Penumpang",
+    errorOriginRequired: "Pelabuhan asal wajib diisi",
+    errorDestinationRequired: "Pelabuhan tujuan wajib diisi",
+    errorDepartureDateRequired: "Tanggal Berangkat wajib diisi",
+    errorReturnDateRequired: "Tanggal Pulang wajib diisi",
+    switchAriaLabel: "Tukar asal dan tujuan",
+    ferryDescription: "Layanan Penyeberangan Ferry ASDP",
+    ifcsDescription: "Sistem Kontrol Ferry Terintegrasi",
+    skptDescription: "Sistem Tiket Penumpang Terintegrasi",
+    hotelDescription: "Layanan Pemesanan Hotel",
+    otherDescription: "Layanan Lainnya"
   },
   en: {
     fromLabel: "From",
@@ -3181,7 +3271,17 @@ var DEFAULT_LABELS7 = {
     placeholderReturnDate: "Select Return Date",
     placeholderTypeClass: "Select Service Class",
     placeholderTypeService: "Select Service Type",
-    placeholderPassenger: "Select Number of Passengers"
+    placeholderPassenger: "Select Number of Passengers",
+    errorOriginRequired: "Origin port is required",
+    errorDestinationRequired: "Destination port is required",
+    errorDepartureDateRequired: "Departure date is required",
+    errorReturnDateRequired: "Return date is required",
+    switchAriaLabel: "Swap origin and destination",
+    ferryDescription: "ASDP Ferry Crossing Service",
+    ifcsDescription: "Integrated Ferry Control System",
+    skptDescription: "Integrated Passenger Ticketing System",
+    hotelDescription: "Hotel Booking Service",
+    otherDescription: "Other Services"
   }
 };
 var useStyles8 = reactComponents.makeStyles({
@@ -3322,7 +3422,7 @@ var CardTicketSearch = ({
 }) => {
   const styles = useStyles8();
   const labels = React5__default.default.useMemo(
-    () => ({ ...DEFAULT_LABELS7[language], ...customLabels }),
+    () => ({ ...DEFAULT_LABELS8[language], ...customLabels }),
     [language, customLabels]
   );
   const { control, setValue, getValues, handleSubmit } = reactHookForm.useForm({
@@ -3351,7 +3451,17 @@ var CardTicketSearch = ({
     setValue("serviceClass", serviceClass);
     setValue("typeOfService", typeOfService);
     setValue("passenger", passenger);
-  }, [from, to, startDate, endDate, roundTrip, serviceClass, typeOfService, passenger, setValue]);
+  }, [
+    from,
+    to,
+    startDate,
+    endDate,
+    roundTrip,
+    serviceClass,
+    typeOfService,
+    passenger,
+    setValue
+  ]);
   React5__default.default.useEffect(() => {
     if (onRoundTripChange) {
       onRoundTripChange(roundTripValue);
@@ -3428,114 +3538,151 @@ var CardTicketSearch = ({
               children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit(handleFormSubmit), children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { width: "100%" }, className: styles.formInnerRow, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 6, xxl: 6, xxxl: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { gap: "16px" }, className: styles.formFieldRow, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        InputDynamic_default,
-                        {
-                          name: "from",
-                          label: labels.fromLabel,
-                          control,
-                          type: "text",
-                          contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                            iconify_js.Icon,
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      reactGridSystem.Col,
+                      {
+                        xs: 12,
+                        sm: 12,
+                        md: 12,
+                        lg: 12,
+                        xl: 12,
+                        xxl: 12,
+                        xxxl: 12,
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            InputDynamic_default,
                             {
-                              icon: "fluent:vehicle-ship-16-filled",
-                              color: reactComponents.tokens.colorBrandBackground
+                              name: "from",
+                              label: labels.fromLabel,
+                              control,
+                              type: "text",
+                              contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                                iconify_js.Icon,
+                                {
+                                  icon: "fluent:vehicle-ship-16-filled",
+                                  color: reactComponents.tokens.colorBrandBackground
+                                }
+                              ),
+                              appearance: "filled-lighter",
+                              size: "medium",
+                              placeholder: labels.placeholderPort,
+                              onClick: onFromClick,
+                              onChange: handleFromChange,
+                              validationRules: {
+                                required: labels.errorOriginRequired
+                              },
+                              required: true
                             }
                           ),
-                          appearance: "filled-lighter",
-                          size: "medium",
-                          placeholder: labels.placeholderPort,
-                          onClick: onFromClick,
-                          onChange: handleFromChange,
-                          validationRules: {
-                            required: "Pelabuhan asal wajib diisi"
-                          },
-                          required: true
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.deviderButton, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-                        " ",
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          reactComponents.Button,
-                          {
-                            onClick: onSwitchClick,
-                            className: styles.buttonSwitch,
-                            shape: "circular",
-                            appearance: "secondary",
-                            size: "large",
-                            disabled: switchDisabled,
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(
-                              "div",
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.deviderButton, children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+                            " ",
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              reactComponents.Button,
                               {
-                                className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
-                                children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  "img",
+                                onClick: onSwitchClick,
+                                className: styles.buttonSwitch,
+                                shape: "circular",
+                                appearance: "secondary",
+                                size: "large",
+                                disabled: switchDisabled,
+                                "aria-label": labels.switchAriaLabel,
+                                icon: /* @__PURE__ */ jsxRuntime.jsx(
+                                  "div",
                                   {
-                                    src: "/assets/images/icons/switch.svg",
-                                    alt: "Switch",
-                                    width: 26,
-                                    height: 26
+                                    className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
+                                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                                      "img",
+                                      {
+                                        src: "/assets/images/icons/switch.svg",
+                                        alt: labels.switchAriaLabel,
+                                        width: 26,
+                                        height: 26
+                                      }
+                                    )
                                   }
                                 )
                               }
                             )
-                          }
-                        )
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      InputDynamic_default,
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactGridSystem.Col,
                       {
-                        name: "to",
-                        label: labels.toLabel,
-                        control,
-                        type: "text",
-                        contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                          iconify_js.Icon,
+                        xs: 12,
+                        sm: 12,
+                        md: 12,
+                        lg: 12,
+                        xl: 12,
+                        xxl: 12,
+                        xxxl: 12,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          InputDynamic_default,
                           {
-                            icon: "fluent:location-24-filled",
-                            color: reactComponents.tokens.colorBrandBackground
+                            name: "to",
+                            label: labels.toLabel,
+                            control,
+                            type: "text",
+                            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                              iconify_js.Icon,
+                              {
+                                icon: "fluent:location-24-filled",
+                                color: reactComponents.tokens.colorBrandBackground
+                              }
+                            ),
+                            disabled: toDisabled,
+                            appearance: "filled-lighter",
+                            size: "medium",
+                            placeholder: labels.placeholderDestinationPort,
+                            onClick: onToClick,
+                            validationRules: {
+                              required: labels.errorDestinationRequired
+                            },
+                            required: true
                           }
-                        ),
-                        disabled: toDisabled,
-                        appearance: "filled-lighter",
-                        size: "medium",
-                        placeholder: labels.placeholderDestinationPort,
-                        onClick: onToClick,
-                        validationRules: {
-                          required: "Pelabuhan tujuan wajib diisi"
-                        },
-                        required: true
+                        )
                       }
-                    ) })
+                    )
                   ] }) }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%" }, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 7, sm: 7, md: 7, lg: 7, xl: 7, xxl: 7, xxxl: 7, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      InputDynamic_default,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactGridSystem.Col,
                       {
-                        name: "startDate",
-                        label: labels.departureDateLabel,
-                        control,
-                        type: "text",
-                        contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                          iconify_js.Icon,
+                        xs: 7,
+                        sm: 7,
+                        md: 7,
+                        lg: 7,
+                        xl: 7,
+                        xxl: 7,
+                        xxxl: 7,
+                        children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", zIndex: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                          InputDynamic_default,
                           {
-                            icon: "fluent:calendar-24-filled",
-                            color: reactComponents.tokens.colorBrandBackground
+                            name: "startDate",
+                            label: labels.departureDateLabel,
+                            control,
+                            type: "text",
+                            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                              iconify_js.Icon,
+                              {
+                                icon: "fluent:calendar-24-filled",
+                                color: reactComponents.tokens.colorBrandBackground
+                              }
+                            ),
+                            appearance: "filled-lighter",
+                            size: "medium",
+                            placeholder: labels.placeholderDepartureDate,
+                            onClick: onStartDateClick,
+                            required: true,
+                            validationRules: {
+                              required: labels.errorDepartureDateRequired
+                            }
                           }
-                        ),
-                        appearance: "filled-lighter",
-                        size: "medium",
-                        placeholder: labels.placeholderDepartureDate,
-                        onClick: onStartDateClick,
-                        required: true,
-                        validationRules: {
-                          required: "Tanggal Berangkat wajib diisi"
-                        }
+                        ) })
                       }
-                    ) }) }),
+                    ),
                     showRoundTrip && /* @__PURE__ */ jsxRuntime.jsx(
                       reactGridSystem.Col,
                       {
@@ -3560,32 +3707,44 @@ var CardTicketSearch = ({
                         )
                       }
                     ),
-                    roundTripValue && /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                      InputDynamic_default,
+                    roundTripValue && /* @__PURE__ */ jsxRuntime.jsx(
+                      reactGridSystem.Col,
                       {
-                        name: "endDate",
-                        label: labels.returnDateLabel,
-                        control,
-                        type: "text",
-                        contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                          iconify_js.Icon,
+                        xs: 12,
+                        sm: 12,
+                        md: 12,
+                        lg: 12,
+                        xl: 12,
+                        xxl: 12,
+                        xxxl: 12,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          InputDynamic_default,
                           {
-                            icon: "fluent:calendar-24-filled",
-                            color: reactComponents.tokens.colorBrandBackground
+                            name: "endDate",
+                            label: labels.returnDateLabel,
+                            control,
+                            type: "text",
+                            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                              iconify_js.Icon,
+                              {
+                                icon: "fluent:calendar-24-filled",
+                                color: reactComponents.tokens.colorBrandBackground
+                              }
+                            ),
+                            appearance: "filled-lighter",
+                            size: "medium",
+                            placeholder: labels.placeholderReturnDate,
+                            onClick: onEndDateClick,
+                            disabled: endDateDisabled,
+                            style: { borderColor: "transparent" },
+                            required: roundTripValue,
+                            validationRules: {
+                              required: labels.errorReturnDateRequired
+                            }
                           }
-                        ),
-                        appearance: "filled-lighter",
-                        size: "medium",
-                        placeholder: labels.placeholderReturnDate,
-                        onClick: onEndDateClick,
-                        disabled: endDateDisabled,
-                        style: { borderColor: "transparent" },
-                        required: roundTripValue,
-                        validationRules: {
-                          required: "Tanggal Pulang wajib diisi"
-                        }
+                        )
                       }
-                    ) })
+                    )
                   ] }) }) })
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Visible, { xl: true, xxl: true, xxxl: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3597,7 +3756,11 @@ var CardTicketSearch = ({
                     xl: 1,
                     xxl: 1,
                     xxxl: 1,
-                    style: { display: "flex", alignItems: "center", justifyContent: "center" },
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
                     children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, style: { height: "100%" } })
                   }
                 ) }),
@@ -3617,71 +3780,107 @@ var CardTicketSearch = ({
                     className: styles.serviceCol,
                     children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
                       /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                          InputDynamic_default,
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          reactGridSystem.Col,
                           {
-                            name: "serviceClass",
-                            label: labels.serviceClassLabel,
-                            control,
-                            type: "text",
-                            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                              iconify_js.Icon,
+                            xs: 12,
+                            sm: 12,
+                            md: 12,
+                            lg: 12,
+                            xl: 12,
+                            xxl: 12,
+                            xxxl: 12,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              InputDynamic_default,
                               {
-                                icon: "fluent:ribbon-star-24-filled",
-                                color: reactComponents.tokens.colorBrandBackground
+                                name: "serviceClass",
+                                label: labels.serviceClassLabel,
+                                control,
+                                type: "text",
+                                contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                                  iconify_js.Icon,
+                                  {
+                                    icon: "fluent:ribbon-star-24-filled",
+                                    color: reactComponents.tokens.colorBrandBackground
+                                  }
+                                ),
+                                appearance: "filled-lighter",
+                                size: "medium",
+                                placeholder: labels.placeholderTypeClass,
+                                onClick: onServiceClassClick,
+                                required: true,
+                                disabled: serviceClassDisabled
                               }
-                            ),
-                            appearance: "filled-lighter",
-                            size: "medium",
-                            placeholder: labels.placeholderTypeClass,
-                            onClick: onServiceClassClick,
-                            required: true,
-                            disabled: serviceClassDisabled
+                            )
                           }
-                        ) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                          InputDynamic_default,
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          reactGridSystem.Col,
                           {
-                            name: "typeOfService",
-                            label: labels.typeOfServiceLabel,
-                            control,
-                            type: "text",
-                            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                              iconify_js.Icon,
+                            xs: 12,
+                            sm: 12,
+                            md: 12,
+                            lg: 12,
+                            xl: 12,
+                            xxl: 12,
+                            xxxl: 12,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              InputDynamic_default,
                               {
-                                icon: "fluent:apps-list-24-filled",
-                                color: reactComponents.tokens.colorBrandBackground
+                                name: "typeOfService",
+                                label: labels.typeOfServiceLabel,
+                                control,
+                                type: "text",
+                                contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                                  iconify_js.Icon,
+                                  {
+                                    icon: "fluent:apps-list-24-filled",
+                                    color: reactComponents.tokens.colorBrandBackground
+                                  }
+                                ),
+                                appearance: "filled-lighter",
+                                size: "medium",
+                                placeholder: labels.placeholderTypeService,
+                                onClick: onTypeOfServiceClick,
+                                required: true,
+                                disabled: typeOfServiceDisabled
                               }
-                            ),
-                            appearance: "filled-lighter",
-                            size: "medium",
-                            placeholder: labels.placeholderTypeService,
-                            onClick: onTypeOfServiceClick,
-                            required: true,
-                            disabled: typeOfServiceDisabled
+                            )
                           }
-                        ) }),
-                        showPassengerField && /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                          InputDynamic_default,
+                        ),
+                        showPassengerField && /* @__PURE__ */ jsxRuntime.jsx(
+                          reactGridSystem.Col,
                           {
-                            required: true,
-                            name: "passenger",
-                            label: labels.passengerLabel,
-                            control,
-                            type: "text",
-                            contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                              iconify_js.Icon,
+                            xs: 12,
+                            sm: 12,
+                            md: 12,
+                            lg: 12,
+                            xl: 12,
+                            xxl: 12,
+                            xxxl: 12,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              InputDynamic_default,
                               {
-                                icon: "fluent:people-24-filled",
-                                color: reactComponents.tokens.colorBrandBackground
+                                required: true,
+                                name: "passenger",
+                                label: labels.passengerLabel,
+                                control,
+                                type: "text",
+                                contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                                  iconify_js.Icon,
+                                  {
+                                    icon: "fluent:people-24-filled",
+                                    color: reactComponents.tokens.colorBrandBackground
+                                  }
+                                ),
+                                appearance: "filled-lighter",
+                                size: "medium",
+                                placeholder: labels.placeholderPassenger,
+                                onClick: onPassengerClick
                               }
-                            ),
-                            appearance: "filled-lighter",
-                            size: "medium",
-                            placeholder: labels.placeholderPassenger,
-                            onClick: onPassengerClick
+                            )
                           }
-                        ) })
+                        )
                       ] }) }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
                         reactComponents.Button,
@@ -3708,7 +3907,7 @@ var CardTicketSearch = ({
 };
 
 // src/components/CardTicketSearchSummary/CardTicketSearchSummary.constants.ts
-var DEFAULT_LABELS8 = {
+var DEFAULT_LABELS9 = {
   id: {
     originHarbor: "Pelabuhan Keberangkatan",
     destinationHarbor: "Pelabuhan Tujuan",
@@ -3716,7 +3915,8 @@ var DEFAULT_LABELS8 = {
     serviceClass: "Kelas Layanan",
     typeOfService: "Jenis Layanan",
     totalPassengers: "Jumlah Penumpang",
-    changeSearchButton: "Ganti Pencarian"
+    changeSearchButton: "Ganti Pencarian",
+    swapAriaLabel: "Tukar asal dan tujuan"
   },
   en: {
     originHarbor: "Departure Port",
@@ -3725,7 +3925,8 @@ var DEFAULT_LABELS8 = {
     serviceClass: "Service Class",
     typeOfService: "Service Type",
     totalPassengers: "Total Passengers",
-    changeSearchButton: "Change Search"
+    changeSearchButton: "Change Search",
+    swapAriaLabel: "Swap origin and destination"
   }
 };
 var useStyles9 = reactComponents.makeStyles({
@@ -3809,7 +4010,7 @@ var CardTicketSearchSummary = ({
   children
 }) => {
   const styles = useStyles9();
-  const mergedLabels = { ...DEFAULT_LABELS8[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS9[language], ...labels };
   const { width } = useWindowSize();
   const getCircularConfig = () => {
     if (width <= parseInt(extendedTokens.breakpointXs))
@@ -3905,7 +4106,8 @@ var CardTicketSearchSummary = ({
                     disabled: true,
                     appearance: "secondary",
                     size: "medium",
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:arrow-swap-24-filled" })
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:arrow-swap-24-filled" }),
+                    "aria-label": mergedLabels.swapAriaLabel
                   }
                 ) })
               }
@@ -4134,7 +4336,7 @@ var CardTicketSearchSummary = ({
 };
 
 // src/components/ModalSearchHarbor/ModalSearchHarbor.constants.ts
-var DEFAULT_LABELS9 = {
+var DEFAULT_LABELS10 = {
   id: {
     title: "Pilih Pelabuhan",
     searchPlaceholder: "Cari Pelabuhan...",
@@ -4142,7 +4344,8 @@ var DEFAULT_LABELS9 = {
     clearAllButton: "Hapus Semua",
     allHarborsHeader: "Semua Pelabuhan",
     loadingData: "Memuat data...",
-    harborNotFound: "Pelabuhan tidak ditemukan"
+    harborNotFound: "Pelabuhan tidak ditemukan",
+    closeAriaLabel: "Tutup"
   },
   en: {
     title: "Select Harbor",
@@ -4151,7 +4354,8 @@ var DEFAULT_LABELS9 = {
     clearAllButton: "Clear All",
     allHarborsHeader: "All Harbors",
     loadingData: "Loading data...",
-    harborNotFound: "Harbor not found"
+    harborNotFound: "Harbor not found",
+    closeAriaLabel: "Close"
   }
 };
 var useStyles10 = reactComponents.makeStyles({
@@ -4286,7 +4490,7 @@ var ModalSearchHarbor = ({
   onClearLastSearched
 }) => {
   const styles = useStyles10();
-  const mergedLabels = { ...DEFAULT_LABELS9[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
   const handleSelect = (harbor) => {
     onAddLastSearched(harbor);
     onSelectHarbor(harbor);
@@ -4313,7 +4517,7 @@ var ModalSearchHarbor = ({
               reactComponents.Button,
               {
                 appearance: "subtle",
-                "aria-label": "close",
+                "aria-label": mergedLabels.closeAriaLabel,
                 icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
                 onClick: handleClose,
                 className: styles.closeButton
@@ -4434,16 +4638,18 @@ var ModalSearchHarbor = ({
 };
 
 // src/components/ModalSelectDate/ModalSelectDate.constants.ts
-var DEFAULT_LABELS10 = {
+var DEFAULT_LABELS11 = {
   id: {
     title: "Pilih Tanggal",
     oneWay: "Sekali Jalan",
-    roundTrip: "Pulang Pergi"
+    roundTrip: "Pulang Pergi",
+    closeAriaLabel: "Tutup"
   },
   en: {
     title: "Select Date",
     oneWay: "One Way",
-    roundTrip: "Round Trip"
+    roundTrip: "Round Trip",
+    closeAriaLabel: "Close"
   }
 };
 var useStyles11 = reactComponents.makeStyles({
@@ -4567,7 +4773,7 @@ var ModalSelectDate = ({
   showRoundtrip = true
 }) => {
   const styles = useStyles11();
-  const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
   React5.useEffect(() => {
     moment__default.default.locale(language === "id" ? "id" : "en");
   }, [language]);
@@ -4731,7 +4937,7 @@ var ModalSelectDate = ({
               reactComponents.Button,
               {
                 appearance: "subtle",
-                "aria-label": "close",
+                "aria-label": mergedLabels.closeAriaLabel,
                 icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
                 onClick: handleClose,
                 className: styles.closeButton
@@ -4790,20 +4996,22 @@ var ModalSelectDate = ({
 };
 
 // src/components/ModalService/ModalService.constants.ts
-var DEFAULT_LABELS11 = {
+var DEFAULT_LABELS12 = {
   id: {
     title: "Pilih Kelas Layanan",
     loading: "Memuat...",
     error: "Gagal memuat layanan",
     selectAll: "Pilih Semua",
-    saveButton: "Simpan"
+    saveButton: "Simpan",
+    closeAriaLabel: "Tutup"
   },
   en: {
     title: "Select Service Class",
     loading: "Loading...",
     error: "Error loading services",
     selectAll: "Select All",
-    saveButton: "Save"
+    saveButton: "Save",
+    closeAriaLabel: "Close"
   }
 };
 var useStyles12 = reactComponents.makeStyles({
@@ -4892,7 +5100,7 @@ var ModalService = ({
   isError = false
 }) => {
   const styles = useStyles12();
-  const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   const [selectedServices, setSelectedServices] = React5.useState(selectedServiceIds);
   React5.useEffect(() => {
@@ -4938,7 +5146,7 @@ var ModalService = ({
           reactComponents.Button,
           {
             appearance: "subtle",
-            "aria-label": "close",
+            "aria-label": mergedLabels.closeAriaLabel,
             icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
             onClick: handleClose,
             className: styles.closeButton
@@ -4998,7 +5206,7 @@ var ModalService = ({
 };
 
 // src/components/ModalTotalPassengers/ModalTotalPassengers.constants.ts
-var DEFAULT_LABELS12 = {
+var DEFAULT_LABELS13 = {
   id: {
     title: "Pilih Jumlah Penumpang",
     infoMessage: "Anda dapat menambahkan hingga {maxPassengers} penumpang pada golongan kendaraan ini.",
@@ -5006,7 +5214,8 @@ var DEFAULT_LABELS12 = {
     saveButton: "Simpan",
     economy: "Ekonomi",
     business: "Bisnis",
-    executive: "Eksekutif"
+    executive: "Eksekutif",
+    closeAriaLabel: "Tutup"
   },
   en: {
     title: "Select Total Passengers",
@@ -5015,7 +5224,8 @@ var DEFAULT_LABELS12 = {
     saveButton: "Save",
     economy: "Economy",
     business: "Business",
-    executive: "Executive"
+    executive: "Executive",
+    closeAriaLabel: "Close"
   }
 };
 var DEFAULT_SERVICE_CLASSES = [
@@ -5105,7 +5315,7 @@ var ModalTotalPassengers = ({
   infoMessage
 }) => {
   const styles = useStyles13();
-  const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
   const [passengers, setPassengers] = React5.useState([]);
   const [openItems, setOpenItems] = React5.useState([]);
   const defaultInfoMessage = mergedLabels.infoMessage.replace(
@@ -5256,7 +5466,7 @@ var ModalTotalPassengers = ({
           reactComponents.Button,
           {
             appearance: "subtle",
-            "aria-label": "close",
+            "aria-label": mergedLabels.closeAriaLabel,
             icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-12-regular" }),
             onClick: onClose
           }
@@ -5370,18 +5580,20 @@ var ModalTotalPassengers = ({
 };
 
 // src/components/ModalTypeOfService/ModalTypeOfService.constants.ts
-var DEFAULT_LABELS13 = {
+var DEFAULT_LABELS14 = {
   id: {
     title: "Pilih Tipe Layanan",
     cancelButton: "Batal",
     saveButton: "Simpan",
-    vehiclesAlt: "kendaraan"
+    vehiclesAlt: "kendaraan",
+    closeAriaLabel: "Tutup"
   },
   en: {
     title: "Select Service Type",
     cancelButton: "Cancel",
     saveButton: "Save",
-    vehiclesAlt: "vehicles"
+    vehiclesAlt: "vehicles",
+    closeAriaLabel: "Close"
   }
 };
 var DEFAULT_VEHICLE_ICONS = {
@@ -5451,7 +5663,7 @@ var ModalTypeOfService = ({
   renderImage
 }) => {
   const styles = useStyles14();
-  const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
   const [selectedServiceTitle, setSelectedServiceTitle] = React5.useState(
     selectedService?.title || ""
   );
@@ -5559,7 +5771,7 @@ var ModalTypeOfService = ({
           reactComponents.Button,
           {
             appearance: "subtle",
-            "aria-label": "close",
+            "aria-label": mergedLabels.closeAriaLabel,
             icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
             onClick: onClose,
             className: styles.closeButton
@@ -5693,6 +5905,37 @@ var ModalTypeOfService = ({
 };
 
 // src/components/SortMenu/SortMenu.constants.ts
+var DEFAULT_LABELS15 = {
+  id: {
+    filterButtonText: "Filter",
+    sortButtonText: "Urutkan Berdasarkan",
+    clearFiltersText: "{count} Filter Dipilih",
+    recommendation: "Rekomendasi",
+    highestPrice: "Harga Tertinggi",
+    lowestPrice: "Harga Terendah",
+    earliestDeparture: "Keberangkatan Paling Awal",
+    latestDeparture: "Keberangkatan Paling Akhir",
+    resetSortAriaLabel: "Hapus pengurutan"
+  },
+  en: {
+    filterButtonText: "Filter",
+    sortButtonText: "Sort By",
+    clearFiltersText: "{count} Filters Selected",
+    recommendation: "Recommendation",
+    highestPrice: "Highest Price",
+    lowestPrice: "Lowest Price",
+    earliestDeparture: "Earliest Departure",
+    latestDeparture: "Latest Departure",
+    resetSortAriaLabel: "Clear sort"
+  }
+};
+var getSortOptions = (labels) => [
+  { value: "rekomendasi", label: labels.recommendation },
+  { value: "harga-tertinggi", label: labels.highestPrice },
+  { value: "harga-terendah", label: labels.lowestPrice },
+  { value: "keberangkatan-paling-awal", label: labels.earliestDeparture },
+  { value: "keberangkatan-paling-akhir", label: labels.latestDeparture }
+];
 var DEFAULT_SORT_OPTIONS = [
   { value: "rekomendasi", label: "Rekomendasi" },
   { value: "harga-tertinggi", label: "Harga Tertinggi" },
@@ -5728,17 +5971,50 @@ var useStyles15 = reactComponents.makeStyles({
   }
 });
 var SortMenu = ({
+  language = "id",
+  labels: customLabels,
   value,
   onChange,
   totalActiveFilters = 0,
   onFilterClick,
   onClearFilters,
-  sortOptions = DEFAULT_SORT_OPTIONS,
-  filterButtonText = "Filter",
-  sortButtonText = "Urutkan Berdasarkan",
-  clearFiltersText = "{count} Filter Dipilih"
+  sortOptions: customSortOptions,
+  filterButtonText: deprecatedFilterButtonText,
+  sortButtonText: deprecatedSortButtonText,
+  clearFiltersText: deprecatedClearFiltersText
 }) => {
   const styles = useStyles15();
+  const labels = React5__default.default.useMemo(
+    () => ({
+      ...DEFAULT_LABELS15[language],
+      ...customLabels,
+      // Fallback to deprecated props if provided
+      ...deprecatedFilterButtonText && {
+        filterButtonText: deprecatedFilterButtonText
+      },
+      ...deprecatedSortButtonText && {
+        sortButtonText: deprecatedSortButtonText
+      },
+      ...deprecatedClearFiltersText && {
+        clearFiltersText: deprecatedClearFiltersText
+      }
+    }),
+    [
+      language,
+      customLabels,
+      deprecatedFilterButtonText,
+      deprecatedSortButtonText,
+      deprecatedClearFiltersText
+    ]
+  );
+  const sortOptions = React5__default.default.useMemo(
+    () => customSortOptions || getSortOptions(labels),
+    [customSortOptions, labels]
+  );
+  const currentSortLabel = React5__default.default.useMemo(
+    () => sortOptions.find((opt) => opt.value === value)?.label || labels.recommendation,
+    [sortOptions, value, labels.recommendation]
+  );
   const handleReset = () => {
     onChange("rekomendasi");
   };
@@ -5753,7 +6029,7 @@ var SortMenu = ({
         shape: "circular",
         className: styles.button,
         onClick: onFilterClick,
-        children: filterButtonText
+        children: labels.filterButtonText
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Menu, { children: [
@@ -5765,10 +6041,24 @@ var SortMenu = ({
           type: "button",
           shape: "circular",
           className: styles.button,
-          children: sortButtonText
+          children: labels.sortButtonText
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuPopover, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuList, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.RadioGroup, { value, onChange: (_, data) => onChange(data.value), children: sortOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: option.value, label: option.label }, option.value)) }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuPopover, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuList, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.RadioGroup,
+        {
+          value,
+          onChange: (_, data) => onChange(data.value),
+          children: sortOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Radio,
+            {
+              value: option.value,
+              label: option.label
+            },
+            option.value
+          ))
+        }
+      ) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.divider }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5781,7 +6071,8 @@ var SortMenu = ({
         type: "button",
         shape: "circular",
         className: styles.button,
-        children: getSortLabel(value)
+        "aria-label": labels.resetSortAriaLabel,
+        children: currentSortLabel
       }
     ),
     totalActiveFilters > 0 && onClearFilters && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -5796,7 +6087,10 @@ var SortMenu = ({
           onClick: onClearFilters,
           shape: "circular",
           className: styles.button,
-          children: clearFiltersText.replace("{count}", totalActiveFilters.toString())
+          children: labels.clearFiltersText.replace(
+            "{count}",
+            totalActiveFilters.toString()
+          )
         }
       )
     ] })
@@ -5804,7 +6098,7 @@ var SortMenu = ({
 };
 
 // src/components/ModalFilterTicket/ModalFilterTicket.constants.ts
-var DEFAULT_LABELS14 = {
+var DEFAULT_LABELS16 = {
   id: {
     title: "Filter dengan",
     serviceTypeLabel: "Jenis Layanan",
@@ -5818,7 +6112,10 @@ var DEFAULT_LABELS14 = {
     durationLabel: "Durasi perjalanan",
     durationRangeText: (min, max) => `Perjalanan ${min} - ${max} jam`,
     resetButton: "Reset",
-    applyButton: "Terapkan"
+    applyButton: "Terapkan",
+    hourUnit: "jam",
+    currencySymbol: "IDR",
+    closeAriaLabel: "Tutup"
   },
   en: {
     title: "Filter by",
@@ -5833,7 +6130,10 @@ var DEFAULT_LABELS14 = {
     durationLabel: "Travel duration",
     durationRangeText: (min, max) => `${min} - ${max} hours trip`,
     resetButton: "Reset",
-    applyButton: "Apply"
+    applyButton: "Apply",
+    hourUnit: "hours",
+    currencySymbol: "IDR",
+    closeAriaLabel: "Close"
   }
 };
 var DEFAULT_SERVICE_TYPES = [
@@ -5969,7 +6269,7 @@ var ModalFilterTicket = ({
   maxDuration = DEFAULT_DURATION_RANGE.max
 }) => {
   const styles = useStyles16();
-  const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
   const [rangeReady, setRangeReady] = React5.useState(false);
   React5.useEffect(() => {
     if (open) {
@@ -6004,7 +6304,9 @@ var ModalFilterTicket = ({
     }
   };
   const formatPrice = (price) => {
-    return new Intl.NumberFormat("id-ID").format(price);
+    return new Intl.NumberFormat(language === "id" ? "id-ID" : "en-US").format(
+      price
+    );
   };
   const renderPriceTrack = React5.useCallback(
     ({ props, children }) => {
@@ -6110,7 +6412,7 @@ var ModalFilterTicket = ({
           reactComponents.Button,
           {
             appearance: "subtle",
-            "aria-label": "close",
+            "aria-label": mergedLabels.closeAriaLabel,
             icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
             className: styles.closeButton,
             onClick: () => onOpenChange(false)
@@ -6248,11 +6550,13 @@ var ModalFilterTicket = ({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sliderValues, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
               minDuration,
-              " jam"
+              " ",
+              mergedLabels.hourUnit
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
               maxDuration,
-              " jam"
+              " ",
+              mergedLabels.hourUnit
             ] })
           ] })
         ] })
@@ -6275,10 +6579,17 @@ var ModalFilterTicket = ({
 };
 
 // src/components/DateFilter/DateFilter.constants.ts
-var DEFAULT_LABELS15 = {
-  prevButtonAriaLabel: "Previous dates",
-  nextButtonAriaLabel: "Next dates",
-  calendarButtonAriaLabel: "Open calendar"
+var DEFAULT_LABELS17 = {
+  id: {
+    prevButtonAriaLabel: "Tanggal sebelumnya",
+    nextButtonAriaLabel: "Tanggal berikutnya",
+    calendarButtonAriaLabel: "Buka kalender"
+  },
+  en: {
+    prevButtonAriaLabel: "Previous dates",
+    nextButtonAriaLabel: "Next dates",
+    calendarButtonAriaLabel: "Open calendar"
+  }
 };
 var DEFAULT_SCROLL_AMOUNT = 150;
 var useStyles17 = reactComponents.makeStyles({
@@ -6360,11 +6671,15 @@ var DateFilter = ({
   showNavigation = true,
   showCalendarButton = true,
   scrollAmount = DEFAULT_SCROLL_AMOUNT,
+  language = "id",
   labels
 }) => {
   const styles = useStyles17();
   const scrollRef = React5.useRef(null);
-  const mergedLabels = { ...DEFAULT_LABELS15, ...labels };
+  const mergedLabels = {
+    ...DEFAULT_LABELS17[language],
+    ...labels
+  };
   const handlePrev = () => {
     scrollRef.current?.scrollBy({ left: -scrollAmount, behavior: "smooth" });
   };
@@ -6422,7 +6737,7 @@ var DateFilter = ({
 };
 
 // src/components/ModalSearchTicket/ModalSearchTicket.constants.ts
-var DEFAULT_LABELS16 = {
+var DEFAULT_LABELS18 = {
   id: {
     title: "Cari Jadwal Lainnya",
     fromLabel: "Dari",
@@ -6444,7 +6759,8 @@ var DEFAULT_LABELS16 = {
     typeOfServicePlaceholder: "Pilih Jenis penumpang",
     passengerLabel: "Penumpang",
     passengerPlaceholder: "Pilih Penumpang",
-    searchButton: "Cari Tiket"
+    searchButton: "Cari Tiket",
+    closeAriaLabel: "Tutup"
   },
   en: {
     title: "Search Other Schedules",
@@ -6467,7 +6783,8 @@ var DEFAULT_LABELS16 = {
     typeOfServicePlaceholder: "Select Type of Passenger",
     passengerLabel: "Passenger",
     passengerPlaceholder: "Select Passenger",
-    searchButton: "Search Ticket"
+    searchButton: "Search Ticket",
+    closeAriaLabel: "Close"
   }
 };
 var DEFAULT_FORM_VALUES = {
@@ -6583,7 +6900,7 @@ var ModalSearchTicket = ({
   ...props
 }) => {
   const styles = useStyles18();
-  const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS18[language], ...labels };
   const { control, setValue, handleSubmit, watch } = reactHookForm.useForm({
     defaultValues: {
       ...DEFAULT_FORM_VALUES,
@@ -6637,7 +6954,7 @@ var ModalSearchTicket = ({
               reactComponents.Button,
               {
                 appearance: "subtle",
-                "aria-label": "close",
+                "aria-label": mergedLabels.closeAriaLabel,
                 className: styles.closeButton,
                 icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
                 onClick: onClose
@@ -7020,7 +7337,7 @@ var ModalSearchTicket = ({
 };
 
 // src/components/Stepper/Stepper.constants.ts
-var DEFAULT_LABELS17 = {
+var DEFAULT_LABELS19 = {
   id: {
     stepperBackgroundAlt: "Latar Belakang Stepper",
     ferryIconAlt: "Ikon Kapal"
@@ -7156,7 +7473,7 @@ var Stepper = ({
   labels
 }) => {
   const styles = useStyles19();
-  const mergedLabels = { ...DEFAULT_LABELS17[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
   const currentStepIndex = React5.useMemo(() => {
     if (typeof currentStep === "number") {
       return steps.findIndex((step) => step.number === currentStep);
@@ -7212,7 +7529,7 @@ var Stepper = ({
 };
 
 // src/components/CardOrdererInfo/CardOrdererInfo.constants.ts
-var DEFAULT_LABELS18 = {
+var DEFAULT_LABELS20 = {
   id: {
     title: "Informasi Pemesan",
     ordererName: "Nama Pemesan",
@@ -7257,7 +7574,7 @@ var CardOrdererInfo = ({
   className
 }) => {
   const styles = useStyles20();
-  const mergedLabels = { ...DEFAULT_LABELS18[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { children: mergedLabels.title }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
@@ -7278,20 +7595,34 @@ var CardOrdererInfo = ({
 };
 
 // src/components/ModalListPassenger/ModalListPassenger.constants.ts
-var DEFAULT_LABELS19 = {
+var DEFAULT_LABELS21 = {
   id: {
     title: "Detail Penumpang",
     sameAsOrderer: "Sama Dengan Pemesan",
     searchPlaceholder: "Cari Penumpang",
     addPassengerButton: "Tambah Penumpang",
-    cancelButton: "Batal"
+    cancelButton: "Batal",
+    editPassengerAriaLabel: "Edit data penumpang",
+    categories: {
+      adult: "Dewasa",
+      child: "Anak",
+      infant: "Bayi",
+      elderly: "Lansia"
+    }
   },
   en: {
     title: "Passenger Details",
     sameAsOrderer: "Same as Orderer",
     searchPlaceholder: "Search Passenger",
     addPassengerButton: "Add Passenger",
-    cancelButton: "Cancel"
+    cancelButton: "Cancel",
+    editPassengerAriaLabel: "Edit passenger data",
+    categories: {
+      adult: "Adult",
+      child: "Child",
+      infant: "Infant",
+      elderly: "Elderly"
+    }
   }
 };
 var useStyles21 = reactComponents.makeStyles({
@@ -7350,7 +7681,7 @@ var ModalListPassenger = ({
   onSameAsOrdererChange
 }) => {
   const styles = useStyles21();
-  const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   const handleClose = () => {
     onClose();
@@ -7418,20 +7749,31 @@ var ModalListPassenger = ({
                 /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
                   passenger.name,
                   " (",
-                  passenger.category,
+                  (() => {
+                    const cat = passenger.category?.toUpperCase();
+                    if (cat === "ADULT")
+                      return mergedLabels.categories.adult;
+                    if (cat === "CHILD")
+                      return mergedLabels.categories.child;
+                    if (cat === "INFANT")
+                      return mergedLabels.categories.infant;
+                    if (cat === "ELDERLY")
+                      return mergedLabels.categories.elderly;
+                    return passenger.category;
+                  })(),
                   ")"
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  react.Icon,
+                  reactComponents.Button,
                   {
-                    icon: "fluent:chevron-right-24-regular",
+                    appearance: "transparent",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-right-24-regular" }),
                     onClick: (e) => {
                       e.preventDefault();
                       e.stopPropagation();
                       onEditPassenger(passenger);
                     },
-                    width: 20,
-                    height: 20
+                    "aria-label": mergedLabels.editPassengerAriaLabel
                   }
                 )
               ]
@@ -7467,7 +7809,7 @@ var ModalListPassenger = ({
 };
 
 // src/components/ModalPassengerForm/ModalPassengerForm.constants.ts
-var DEFAULT_LABELS20 = {
+var DEFAULT_LABELS22 = {
   id: {
     title: "Detail Penumpang",
     titleLabel: "Title",
@@ -7568,9 +7910,9 @@ var ModalPassengerForm = ({
   ticketClassOptions
 }) => {
   const styles = useStyles22();
-  const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
   const mergedErrors = {
-    ...DEFAULT_LABELS20[language].errors,
+    ...DEFAULT_LABELS22[language].errors,
     ...labels?.errors
   };
   const displayTitle = title || mergedLabels.title;
@@ -7770,7 +8112,7 @@ var ModalPassengerForm = ({
 };
 
 // src/components/CardPassengerList/CardPassengerList.constants.ts
-var DEFAULT_LABELS21 = {
+var DEFAULT_LABELS23 = {
   id: {
     defaultTitle: "Data Penumpang",
     passengerPrefix: "Penumpang"
@@ -7892,7 +8234,7 @@ var CardPassengerList = ({
   className
 }) => {
   const styles = useStyles23();
-  const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
@@ -7965,7 +8307,7 @@ var CardPassengerList = ({
 };
 
 // src/components/CardVehicleDetail/CardVehicleDetail.constants.ts
-var DEFAULT_LABELS22 = {
+var DEFAULT_LABELS24 = {
   id: {
     title: "Detail Kendaraan",
     vehicleNumberLabel: "Nomor Kendaraan",
@@ -8023,7 +8365,7 @@ var CardVehicleDetail = ({
   labels
 }) => {
   const styles = useStyles24();
-  const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -8083,7 +8425,7 @@ var CardVehicleDetail = ({
 };
 
 // src/components/CardVehicleOwnerForm/CardVehicleOwnerForm.constants.ts
-var DEFAULT_LABELS23 = {
+var DEFAULT_LABELS25 = {
   id: {
     title: "Informasi Pemilik & Muatan",
     addOwnerButton: "Tambah Pemilik",
@@ -8109,6 +8451,7 @@ var DEFAULT_LABELS23 = {
     cargoReceiverCompanyPlaceholder: "Pilih Nama Perusahaan Penerima Barang",
     cargoReceiverIndividualPlaceholder: "Masukkan Nama Penerima Barang",
     totalWeightLabel: "Berat Muatan dan Kendaraan (Ton)",
+    commentLabel: "Komentar",
     cargoListTitle: "Daftar Muatan",
     cargoItemTitle: "Muatan {index}",
     commodityLabel: "Data Komoditas",
@@ -8129,7 +8472,12 @@ var DEFAULT_LABELS23 = {
       kg: "Kg",
       ton: "Ton",
       unit: "Unit"
-    }
+    },
+    pricePlaceholder: "Rp. 0",
+    currencySymbol: "Rp.",
+    deleteOwnerAriaLabel: "Hapus pemilik",
+    decrementQuantityAriaLabel: "Kurangi jumlah",
+    incrementQuantityAriaLabel: "Tambah jumlah"
   },
   en: {
     title: "Owner & Cargo Information",
@@ -8156,6 +8504,7 @@ var DEFAULT_LABELS23 = {
     cargoReceiverCompanyPlaceholder: "Select Cargo Receiver Company",
     cargoReceiverIndividualPlaceholder: "Enter Cargo Receiver Name",
     totalWeightLabel: "Cargo & Vehicle Weight (Ton)",
+    commentLabel: "Comment",
     cargoListTitle: "Cargo List",
     cargoItemTitle: "Cargo {index}",
     commodityLabel: "Commodity Data",
@@ -8176,7 +8525,12 @@ var DEFAULT_LABELS23 = {
       kg: "Kg",
       ton: "Ton",
       unit: "Unit"
-    }
+    },
+    pricePlaceholder: "Rp. 0",
+    currencySymbol: "Rp.",
+    deleteOwnerAriaLabel: "Delete owner",
+    decrementQuantityAriaLabel: "Decrease quantity",
+    incrementQuantityAriaLabel: "Increase quantity"
   }
 };
 var useStyles25 = reactComponents.makeStyles({
@@ -8239,7 +8593,7 @@ var CardVehicleOwnerForm = ({
   labels
 }) => {
   const styles = useStyles25();
-  const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
@@ -8293,6 +8647,7 @@ var CardVehicleOwnerForm = ({
                           {
                             appearance: "transparent",
                             icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:delete-24-regular" }),
+                            "aria-label": mergedLabels.deleteOwnerAriaLabel,
                             onClick: (e) => {
                               e.stopPropagation();
                               onDeleteOwner(owner.id);
@@ -8759,6 +9114,7 @@ var CardVehicleOwnerForm = ({
                                                         }
                                                       }
                                                     ),
+                                                    "aria-label": mergedLabels.decrementQuantityAriaLabel,
                                                     size: "small",
                                                     onClick: () => {
                                                       const currentVal = getValues(
@@ -8823,6 +9179,7 @@ var CardVehicleOwnerForm = ({
                                                         }
                                                       }
                                                     ),
+                                                    "aria-label": mergedLabels.incrementQuantityAriaLabel,
                                                     size: "small",
                                                     onClick: () => {
                                                       const currentVal = getValues(
@@ -8886,7 +9243,7 @@ var CardVehicleOwnerForm = ({
                                       {
                                         control,
                                         name: `owners.${index}.price`,
-                                        placeholder: "Rp. 0",
+                                        placeholder: mergedLabels.pricePlaceholder,
                                         disabled: true,
                                         size: "large",
                                         type: "text"
@@ -9014,7 +9371,7 @@ var CardVehicleOwnerForm = ({
 };
 
 // src/components/CardBookingTicket/CardBookingTicket.constants.ts
-var DEFAULT_LABELS24 = {
+var DEFAULT_LABELS26 = {
   id: {
     bookingDetails: "Booking Details",
     routeTitle: "Rute Perjalanan",
@@ -9024,7 +9381,8 @@ var DEFAULT_LABELS24 = {
     previousButton: "Sebelumnya",
     viewBookingButton: "Lihat Pemesanan",
     changePaymentButton: "Ubah Metode Pembayaran",
-    timezoneLabel: "WIB"
+    timezoneLabel: "WIB",
+    currencySymbol: "IDR"
   },
   en: {
     bookingDetails: "Booking Details",
@@ -9035,7 +9393,8 @@ var DEFAULT_LABELS24 = {
     previousButton: "Previous",
     viewBookingButton: "View Booking",
     changePaymentButton: "Change Payment Method",
-    timezoneLabel: "WIB"
+    timezoneLabel: "WIB",
+    currencySymbol: "IDR"
   }
 };
 var useStyles26 = reactComponents.makeStyles({
@@ -9171,7 +9530,7 @@ var CardBookingTicket = ({
   className
 }) => {
   const styles = useStyles26();
-  const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailTop, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.bookingDetails }),
@@ -9237,7 +9596,8 @@ var CardBookingTicket = ({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalPrice, children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.totalPriceLabel }),
         /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title3, { className: styles.priceText, children: [
-          "IDR ",
+          mergedLabels.currencySymbol,
+          " ",
           totalPrice
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -9308,7 +9668,7 @@ var CardBookingTicket = ({
 };
 
 // src/components/CardFAQ/CardFAQ.constants.ts
-var DEFAULT_LABELS25 = {
+var DEFAULT_LABELS27 = {
   id: {
     title: "Pertanyaan yang sering diajukan"
   },
@@ -9387,7 +9747,7 @@ var CardFAQ = ({
   className
 }) => {
   const styles = useStyles27();
-  const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
   const faqItems = items || DEFAULT_FAQ_ITEMS[language];
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.faqCard, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.title }),
@@ -9424,18 +9784,20 @@ var CardFAQ = ({
 };
 
 // src/components/CardAddon/CardAddon.constants.ts
-var DEFAULT_LABELS26 = {
+var DEFAULT_LABELS28 = {
   id: {
     viewDetail: "Lihat detail",
     totalPrice: "Total Harga",
     passengerInsurance: "Asuransi Penumpang",
-    removeOrder: "Hapus Pesanan"
+    removeOrder: "Hapus Pesanan",
+    currencySymbol: "Rp"
   },
   en: {
     viewDetail: "View Details",
     totalPrice: "Total Price",
     passengerInsurance: "Passenger Insurance",
-    removeOrder: "Remove Order"
+    removeOrder: "Remove Order",
+    currencySymbol: "Rp"
   }
 };
 var useStyles28 = reactComponents.makeStyles({
@@ -9612,7 +9974,7 @@ var CardAddon = ({
   className
 }) => {
   const styles = useStyles28();
-  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapRow, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleDivider, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { className: styles.textTitle, children: title }),
@@ -9644,8 +10006,11 @@ var CardAddon = ({
           footerData.priceLabel,
           " ",
           /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1Stronger, { children: [
-            "Rp",
-            footerData.price.toLocaleString("id-ID"),
+            mergedLabels.currencySymbol,
+            " ",
+            footerData.price.toLocaleString(
+              language === "id" ? "id-ID" : "en-US"
+            ),
             footerData.priceUnit
           ] })
         ] }) }),
@@ -9690,15 +10055,21 @@ var CardAddon = ({
               ")"
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
-              "Rp",
-              item.totalPrice.toLocaleString("id-ID")
+              mergedLabels.currencySymbol,
+              " ",
+              item.totalPrice.toLocaleString(
+                language === "id" ? "id-ID" : "en-US"
+              )
             ] })
           ] }, idx)),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.breakdownRow, children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.totalPrice }),
             /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
-              "Rp",
-              assuranceData.totalPrice.toLocaleString("id-ID")
+              mergedLabels.currencySymbol,
+              " ",
+              assuranceData.totalPrice.toLocaleString(
+                language === "id" ? "id-ID" : "en-US"
+              )
             ] })
           ] })
         ] })
@@ -9718,13 +10089,20 @@ var CardAddon = ({
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: item.name }),
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.mealDescription, children: item.description }),
           /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { className: styles.mealPriceInfo, children: [
-            "Rp",
-            item.price.toLocaleString("id-ID"),
-            " x ",
+            mergedLabels.currencySymbol,
+            " ",
+            item.price.toLocaleString(
+              language === "id" ? "id-ID" : "en-US"
+            ),
+            " ",
+            "x ",
             item.quantity,
+            " = ",
+            mergedLabels.currencySymbol,
             " ",
-            "= Rp",
-            (item.price * item.quantity).toLocaleString("id-ID")
+            (item.price * item.quantity).toLocaleString(
+              language === "id" ? "id-ID" : "en-US"
+            )
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mealActions, children: [
@@ -9779,8 +10157,11 @@ var CardAddon = ({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalContainer, children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: footerData.priceLabel }),
           /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle1, { style: { fontSize: reactComponents.tokens.fontSizeBase600 }, children: [
-            "Rp. ",
-            footerData.price.toLocaleString("id-ID")
+            mergedLabels.currencySymbol,
+            " ",
+            footerData.price.toLocaleString(
+              language === "id" ? "id-ID" : "en-US"
+            )
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -9804,12 +10185,18 @@ var CardAddon = ({
 };
 
 // src/components/CardMealCatalog/CardMealCatalog.constants.ts
-var DEFAULT_LABELS27 = {
+var DEFAULT_LABELS29 = {
   id: {
-    addButton: "Tambah"
+    addButton: "Tambah",
+    currencySymbol: "Rp",
+    decrementAriaLabel: "Kurangi jumlah",
+    incrementAriaLabel: "Tambah jumlah"
   },
   en: {
-    addButton: "Add"
+    addButton: "Add",
+    currencySymbol: "Rp",
+    decrementAriaLabel: "Decrease quantity",
+    incrementAriaLabel: "Increase quantity"
   }
 };
 var useStyles29 = reactComponents.makeStyles({
@@ -9952,7 +10339,7 @@ var CardMealCatalog = ({
   className
 }) => {
   const styles = useStyles29();
-  const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.banner, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.bannerOverlay }),
@@ -10001,8 +10388,11 @@ var CardMealCatalog = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.productFooter, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.price, children: [
-              "Rp",
-              item.price.toLocaleString("id-ID")
+              mergedLabels.currencySymbol,
+              " ",
+              item.price.toLocaleString(
+                language === "id" ? "id-ID" : "en-US"
+              )
             ] }),
             item.quantity > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.quantitySelector, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -10010,16 +10400,18 @@ var CardMealCatalog = ({
                 {
                   size: "small",
                   shape: "circular",
+                  "aria-label": mergedLabels.decrementAriaLabel,
                   icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SubtractRegular, {}),
                   onClick: () => onUpdateQuantity(item.id, -1)
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.quantity }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { "aria-live": "polite", children: item.quantity }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 reactComponents.Button,
                 {
                   size: "small",
                   shape: "circular",
+                  "aria-label": mergedLabels.incrementAriaLabel,
                   icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}),
                   onClick: () => onUpdateQuantity(item.id, 1)
                 }
@@ -10042,9 +10434,13 @@ var CardMealCatalog = ({
 };
 
 // src/components/CardReview/CardReview.constants.ts
-var DEFAULT_LABELS28 = {
-  id: {},
-  en: {}
+var DEFAULT_LABELS30 = {
+  id: {
+    defaultTitle: "Tinjauan"
+  },
+  en: {
+    defaultTitle: "Review"
+  }
 };
 var useStyles30 = reactComponents.makeStyles({
   card: {
@@ -10098,10 +10494,10 @@ var CardReview = ({
   headerAction
 }) => {
   const styles = useStyles30();
-  ({ ...DEFAULT_LABELS28[language], ...labels });
+  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: title || mergedLabels.defaultTitle }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerLine }),
       headerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerAction })
     ] }),
@@ -10145,7 +10541,7 @@ var CardReview = ({
 };
 
 // src/components/CardReviewPassenger/CardReviewPassenger.constants.ts
-var DEFAULT_LABELS29 = {
+var DEFAULT_LABELS31 = {
   id: {
     title: "Penumpang",
     idNumber: "Nomor ID"
@@ -10254,7 +10650,7 @@ var CardReviewPassenger = ({
   className
 }) => {
   const styles = useStyles31();
-  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
@@ -10297,7 +10693,7 @@ var CardReviewPassenger = ({
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts
-var DEFAULT_LABELS30 = {
+var DEFAULT_LABELS32 = {
   id: {
     defaultTitle: "Rincian Harga",
     totalPayment: "Total Pembayaran",
@@ -10309,7 +10705,7 @@ var DEFAULT_LABELS30 = {
       "Tiket akan hangus (expired) apabila Anda belum Masuk Pelabuhan (Check-In) hingga melewati batas waktu jadwal Masuk Pelabuhan yang Anda pilih."
     ],
     agreementInfo: "Dengan menekan tombol \u201CLanjutkan Pembayaran\u201D, maka saya telah membaca dan menyetujui :",
-    agreementLinkFerizy: "Syarat & Ketentuan",
+    agreementLinkFerizy: "Syarat & Ketentuan Ferizy",
     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.",
@@ -10359,10 +10755,7 @@ var PriceDetailsTerms = ({
   const linkColor = reactComponents.tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
-    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Link, { href: "/terms-and-conditions", style: { color: linkColor }, children: labels.agreementLinkFerizy }),
-      "\xA0Ferizy."
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Link, { href: "/terms-and-conditions", style: { color: linkColor }, children: labels.agreementLinkFerizy }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       labels.agreementCovidInfo,
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Link, { href: "/surat-edaran-satgas-covid-19", style: { color: linkColor }, children: labels.agreementCovidLink })
@@ -10456,7 +10849,7 @@ var CardPriceDetails = ({
   labels
 }) => {
   const styles = useStyles33();
-  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   const getVariantClass = (variant) => {
     switch (variant) {
@@ -10476,10 +10869,10 @@ var CardPriceDetails = ({
         isTaxLike ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: variantClass, children: item.name }) : /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: reactComponents.mergeClasses(styles.label, variantClass), children: item.name }),
         isTaxLike ? /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { className: reactComponents.mergeClasses(styles.value, variantClass), children: [
           mergedLabels.currencyPrefix,
-          item.price.toLocaleString("id-ID")
+          item.price.toLocaleString(language === "id" ? "id-ID" : "en-US")
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: reactComponents.mergeClasses(styles.value, variantClass), children: [
           item.isRedeem ? "-" : mergedLabels.currencyPrefix,
-          item.price.toLocaleString("id-ID")
+          item.price.toLocaleString(language === "id" ? "id-ID" : "en-US")
         ] })
       ] }),
       item.description && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.description, children: item.description })
@@ -10505,7 +10898,7 @@ var CardPriceDetails = ({
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.totalLabel, children: mergedLabels.totalPayment }),
         /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle1, { className: styles.totalValue, children: [
           mergedLabels.currencyPrefix,
-          total.toLocaleString("id-ID")
+          total.toLocaleString(language === "id" ? "id-ID" : "en-US")
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
@@ -10515,9 +10908,13 @@ var CardPriceDetails = ({
 };
 
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
-var DEFAULT_LABELS31 = {
-  id: {},
-  en: {}
+var DEFAULT_LABELS33 = {
+  id: {
+    selectAriaLabel: "Pilih metode pembayaran"
+  },
+  en: {
+    selectAriaLabel: "Select payment method"
+  }
 };
 var useStyles34 = reactComponents.makeStyles({
   container: {
@@ -10580,7 +10977,7 @@ var CardPaymentMethodList = ({
   onSelect
 }) => {
   const styles = useStyles34();
-  ({ ...DEFAULT_LABELS31[language], ...labels });
+  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: category.value, children: [
@@ -10616,7 +11013,8 @@ var CardPaymentMethodList = ({
                 onChange: () => onSelect(option.value),
                 value: option.value,
                 name: "payment-method",
-                disabled: option.disabled
+                disabled: option.disabled,
+                "aria-label": `${mergedLabels.selectAriaLabel} ${option.label}`
               }
             )
           ]
@@ -10628,7 +11026,7 @@ var CardPaymentMethodList = ({
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
-var DEFAULT_LABELS32 = {
+var DEFAULT_LABELS34 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -10674,7 +11072,7 @@ var CardPaymentGuide = ({
   className
 }) => {
   const styles = useStyles35();
-  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -10693,20 +11091,22 @@ var CardPaymentGuide = ({
 };
 
 // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
-var DEFAULT_LABELS33 = {
+var DEFAULT_LABELS35 = {
   id: {
     expiryPrefix: "Kode virtual akun berlaku sampai",
     copyCodeButton: "Salin Kode",
     totalPayment: "Total Pembayaran",
     checkStatusInfo: "Klik tombol dibawah ini jika sudah melakukan pembayaran",
-    checkStatusButton: "Cek Status Pembayaran"
+    checkStatusButton: "Cek Status Pembayaran",
+    currencySymbol: "Rp."
   },
   en: {
     expiryPrefix: "Virtual account code valid until",
     copyCodeButton: "Copy Code",
     totalPayment: "Total Payment",
     checkStatusInfo: "Click the button below if you have made the payment",
-    checkStatusButton: "Check Payment Status"
+    checkStatusButton: "Check Payment Status",
+    currencySymbol: "Rp."
   }
 };
 var useStyles36 = reactComponents.makeStyles({
@@ -10792,7 +11192,7 @@ var CardPaymentInfo = ({
   onCheckStatus
 }) => {
   const styles = useStyles36();
-  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.expiryPrefix }),
@@ -10827,7 +11227,7 @@ var CardPaymentInfo = ({
             reactComponents.Input,
             {
               disabled: true,
-              value: `Rp. ${totalAmount.toLocaleString("id-ID")}`,
+              value: `${mergedLabels.currencySymbol} ${totalAmount.toLocaleString(language === "id" ? "id-ID" : "en-US")}`,
               className: styles.input
             }
           )
@@ -10853,7 +11253,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS34 = {
+var DEFAULT_LABELS36 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -10865,7 +11265,8 @@ var DEFAULT_LABELS34 = {
     viewTicketButton: "Lihat E-Tiket",
     defaultStatus: "Sudah Dibayar",
     defaultTitle: "Pembayaran berhasil",
-    defaultDescription: "Tiket Anda aktif dan siap digunakan."
+    defaultDescription: "Tiket Anda aktif dan siap digunakan.",
+    illustrationAlt: "Ilustrasi E-Tiket"
   },
   en: {
     detailTitle: "Booking Details",
@@ -10878,7 +11279,8 @@ var DEFAULT_LABELS34 = {
     viewTicketButton: "View E-Ticket",
     defaultStatus: "Paid",
     defaultTitle: "Payment successful",
-    defaultDescription: "Your ticket is active and ready to use."
+    defaultDescription: "Your ticket is active and ready to use.",
+    illustrationAlt: "E-Ticket Illustration"
   }
 };
 var useStyles37 = reactComponents.makeStyles({
@@ -10952,7 +11354,7 @@ var CardStatusOrder = ({
   className
 }) => {
   const styles = useStyles37();
-  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   const displayStatus = statusLabel || mergedLabels.defaultStatus;
   const displayTitle = title || mergedLabels.defaultTitle;
   const displayDescription = description || mergedLabels.defaultDescription;
@@ -10962,7 +11364,7 @@ var CardStatusOrder = ({
         "img",
         {
           src: illustrationUrl,
-          alt: "E-Ticket",
+          alt: mergedLabels.illustrationAlt,
           width: 406,
           height: 266
         }
@@ -11049,7 +11451,7 @@ var CardStatusOrder = ({
 };
 
 // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
-var DEFAULT_LABELS35 = {
+var DEFAULT_LABELS37 = {
   id: {
     title: "Rincian Harga",
     addonHeader: "Add On",
@@ -11059,7 +11461,8 @@ var DEFAULT_LABELS35 = {
     ppnNote: "*PPN 11% dikenakan untuk biaya layanan dan biaya admin",
     grandTotalLabel: "Total Pembayaran",
     currencyPrefix: "Rp.",
-    currencyCode: "IDR."
+    currencyCode: "IDR.",
+    closeAriaLabel: "Tutup"
   },
   en: {
     title: "Price Details",
@@ -11070,7 +11473,8 @@ var DEFAULT_LABELS35 = {
     ppnNote: "*VAT 11% is charged for service fees and admin fees",
     grandTotalLabel: "Total Payment",
     currencyPrefix: "Rp.",
-    currencyCode: "IDR."
+    currencyCode: "IDR.",
+    closeAriaLabel: "Close"
   }
 };
 var useStyles38 = reactComponents.makeStyles({
@@ -11201,7 +11605,7 @@ var ModalPriceDetail = ({
   ...props
 }) => {
   const styles = useStyles38();
-  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
+  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactComponents.Dialog,
     {
@@ -11217,7 +11621,7 @@ var ModalPriceDetail = ({
               reactComponents.Button,
               {
                 appearance: "subtle",
-                "aria-label": "close",
+                "aria-label": mergedLabels.closeAriaLabel,
                 icon: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
                   "path",
                   {
@@ -11251,7 +11655,9 @@ var ModalPriceDetail = ({
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceValue, children: [
                 mergedLabels.currencyPrefix,
                 " ",
-                item.price.toLocaleString("id-ID")
+                item.price.toLocaleString(
+                  language === "id" ? "id-ID" : "en-US"
+                )
               ] })
             ] }),
             item.list && item.list.map((subItem) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -11263,7 +11669,9 @@ var ModalPriceDetail = ({
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { float: "right" }, children: [
                     mergedLabels.currencyCode,
                     " ",
-                    item.price.toLocaleString("id-ID")
+                    item.price.toLocaleString(
+                      language === "id" ? "id-ID" : "en-US"
+                    )
                   ] })
                 ]
               },
@@ -11277,7 +11685,9 @@ var ModalPriceDetail = ({
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.priceValue, children: [
                 mergedLabels.currencyCode,
                 " ",
-                item.price.toLocaleString("id-ID")
+                item.price.toLocaleString(
+                  language === "id" ? "id-ID" : "en-US"
+                )
               ] })
             ] }, item.key))
           ] }),
@@ -11286,14 +11696,18 @@ var ModalPriceDetail = ({
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.totalLabel, children: mergedLabels.subTotalLabel }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.totalValue, children: [
               mergedLabels.currencyCode,
-              subTotal.toLocaleString("id-ID")
+              subTotal.toLocaleString(
+                language === "id" ? "id-ID" : "en-US"
+              )
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.totalTagihanLabel, children: mergedLabels.totalTagihanLabel }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.totalTagihanValue, children: [
               mergedLabels.currencyCode,
-              subTotal.toLocaleString("id-ID")
+              subTotal.toLocaleString(
+                language === "id" ? "id-ID" : "en-US"
+              )
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: reactComponents.tokens.spacingVerticalL }, children: [
@@ -11301,7 +11715,9 @@ var ModalPriceDetail = ({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.ppnLabel, children: mergedLabels.ppnLabel }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.ppnValue, children: [
                 mergedLabels.currencyCode,
-                taxAmount.toLocaleString("id-ID")
+                taxAmount.toLocaleString(
+                  language === "id" ? "id-ID" : "en-US"
+                )
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.ppnNote, children: mergedLabels.ppnNote })
@@ -11315,7 +11731,9 @@ var ModalPriceDetail = ({
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.grandTotalLabel, children: mergedLabels.grandTotalLabel }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.grandTotalValue, children: [
                   mergedLabels.currencyPrefix,
-                  grandTotal.toLocaleString("id-ID")
+                  grandTotal.toLocaleString(
+                    language === "id" ? "id-ID" : "en-US"
+                  )
                 ] })
               ]
             }
@@ -11327,7 +11745,7 @@ var ModalPriceDetail = ({
 };
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS36 = {
+var DEFAULT_LABELS38 = {
   id: {},
   en: {}
 };
@@ -11390,7 +11808,7 @@ var CardProfileMenu = ({
   onTabSelect
 }) => {
   const styles = useStyles39();
-  ({ ...DEFAULT_LABELS36[language], ...labels });
+  ({ ...DEFAULT_LABELS38[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
   };
@@ -11440,9 +11858,9 @@ exports.CardServiceMenu = CardServiceMenu;
 exports.CardStatusOrder = CardStatusOrder;
 exports.CardTicket = CardTicket;
 exports.CardTicketSearch = CardTicketSearch;
-exports.CardTicketSearchDefaultLabels = DEFAULT_LABELS7;
+exports.CardTicketSearchDefaultLabels = DEFAULT_LABELS8;
 exports.CardTicketSearchSummary = CardTicketSearchSummary;
-exports.CardTicketSearchSummaryDefaultLabels = DEFAULT_LABELS8;
+exports.CardTicketSearchSummaryDefaultLabels = DEFAULT_LABELS9;
 exports.CardVehicleDetail = CardVehicleDetail;
 exports.CardVehicleOwnerForm = CardVehicleOwnerForm;
 exports.CarouselWithCustomNav = CarouselWithCustomNav;
@@ -11456,11 +11874,11 @@ exports.DEFAULT_SORT_OPTIONS = DEFAULT_SORT_OPTIONS;
 exports.DEFAULT_TIME_SLOTS = DEFAULT_TIME_SLOTS;
 exports.DEFAULT_VEHICLE_ICONS = DEFAULT_VEHICLE_ICONS;
 exports.DateFilter = DateFilter;
-exports.DateFilterDefaultLabels = DEFAULT_LABELS15;
+exports.DateFilterDefaultLabels = DEFAULT_LABELS17;
 exports.InputDynamic = InputDynamic_default;
 exports.MODAL_PRESETS = MODAL_PRESETS;
 exports.ModalFilterTicket = ModalFilterTicket;
-exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS14;
+exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS16;
 exports.ModalIllustration = ModalIllustration;
 exports.ModalListPassenger = ModalListPassenger;
 exports.ModalPassengerForm = ModalPassengerForm;