@asdp/ferryui 0.1.22-dev.10171 → 0.1.22-dev.10189

package/dist/index.js

@@ -7931,7 +7931,9 @@ var DEFAULT_LABELS14 = {
     loading: "Memuat...",
     saveButton: "Simpan",
     closeAriaLabel: "Tutup",
-    emptyContent: "Kelas Penumpang"
+    emptyContent: "Kelas Penumpang",
+    childCompanionWarning: "Anak harus didampingi minimal 1 dewasa atau lansia.",
+    infantCompanionWarning: "Bayi harus didampingi minimal 1 dewasa atau lansia."
   },
   en: {
     title: "Select Total Passengers",
@@ -7939,7 +7941,9 @@ var DEFAULT_LABELS14 = {
     loading: "Loading...",
     saveButton: "Save",
     closeAriaLabel: "Close",
-    emptyContent: "Passengers Class"
+    emptyContent: "Passengers Class",
+    childCompanionWarning: "Children must be accompanied by at least 1 adult or elderly.",
+    infantCompanionWarning: "Infants must be accompanied by at least 1 adult or elderly."
   }
 };
 var useStyles15 = reactComponents.makeStyles({
@@ -8012,6 +8016,14 @@ var useStyles15 = reactComponents.makeStyles({
   },
   accordionPanel: {
     margin: 0
+  },
+  warningText: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    marginBottom: "1rem",
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    color: "#E87511"
   }
 });
 var TotalPassengersListSkeleton = ({
@@ -8090,6 +8102,9 @@ var ModalTotalPassengers = ({
   const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
   const [passengers, setPassengers] = React.useState([]);
   const [openItems, setOpenItems] = React.useState([]);
+  const [companionWarnings, setCompanionWarnings] = React.useState(
+    /* @__PURE__ */ new Set()
+  );
   const defaultInfoMessage = mergedLabels.infoMessage.replace(
     "{maxPassengers}",
     String(maxPassengers)
@@ -8147,13 +8162,6 @@ var ModalTotalPassengers = ({
     const cls = passenger.classes.find((c) => c.classCode === classCode);
     return cls?.count ?? 0;
   };
-  const getTotalCountForType = (passengerAgeCode) => {
-    const passenger = passengers.find(
-      (p) => p.passengerAgeCode === passengerAgeCode
-    );
-    if (!passenger) return 0;
-    return passenger.classes.reduce((sum, cls) => sum + (cls.count ?? 0), 0);
-  };
   const getTotalForType = (passengerAgeCode) => {
     const passenger = passengers.find(
       (p) => p.passengerAgeCode === passengerAgeCode
@@ -8172,6 +8180,20 @@ var ModalTotalPassengers = ({
     (total, passenger) => total + passenger.classes.reduce((sum, cls) => sum + (cls.count ?? 0), 0),
     0
   );
+  React.useEffect(() => {
+    const warnings = /* @__PURE__ */ new Set();
+    const hasAdultOrElderly = passengers.some(
+      (p) => (p.passengerAgeCode === "ADULT" || p.passengerAgeCode === "ELDERLY") && p.classes.some((cls) => (cls.count ?? 0) > 0)
+    );
+    if (!hasAdultOrElderly) {
+      passengers.forEach((p) => {
+        if ((p.passengerAgeCode === "CHILD" || p.passengerAgeCode === "INFANT") && p.classes.some((cls) => (cls.count ?? 0) > 0)) {
+          warnings.add(p.passengerAgeCode);
+        }
+      });
+    }
+    setCompanionWarnings(warnings);
+  }, [passengers]);
   const handleIncrement = (passengerAgeCode, classCode) => {
     setPassengers(
       (prev) => prev.map((passenger) => {
@@ -8266,80 +8288,96 @@ var ModalTotalPassengers = ({
           className: styles.passengerSection,
           children: passengerTypes.map((passengerType) => {
             const classes = passengerType.classes || [];
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              reactComponents.AccordionItem,
-              {
-                value: String(passengerType.id),
-                className: styles.accordionItem,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    reactComponents.AccordionHeader,
-                    {
-                      className: styles.accordionHeader,
-                      expandIconPosition: "end",
-                      children: [
-                        passengerType.passengerAgeName,
-                        " (",
-                        getTotalForType(passengerType.passengerAgeCode),
-                        ")"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nestedRow, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: (cls?.className || "")?.toUpperCase() }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerCount, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        reactComponents.Button,
-                        {
-                          appearance: "outline",
-                          className: styles.counterButton,
-                          size: "small",
-                          icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:subtract-12-regular" }),
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            handleDecrement(
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                reactComponents.AccordionItem,
+                {
+                  value: String(passengerType.id),
+                  className: styles.accordionItem,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      reactComponents.AccordionHeader,
+                      {
+                        className: styles.accordionHeader,
+                        expandIconPosition: "end",
+                        children: [
+                          passengerType.passengerAgeName,
+                          " (",
+                          getTotalForType(passengerType.passengerAgeCode),
+                          ")"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nestedRow, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: (cls?.className || "")?.toUpperCase() }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerCount, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          reactComponents.Button,
+                          {
+                            appearance: "outline",
+                            className: styles.counterButton,
+                            size: "small",
+                            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:subtract-12-regular" }),
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleDecrement(
+                                passengerType.passengerAgeCode,
+                                cls.classCode
+                              );
+                            },
+                            disabled: getServiceCount(
                               passengerType.passengerAgeCode,
                               cls.classCode
-                            );
-                          },
-                          disabled: getServiceCount(
-                            passengerType.passengerAgeCode,
-                            cls.classCode
-                          ) === 0 || getTotalCountForType(
-                            passengerType.passengerAgeCode
-                          ) <= passengerType.minCapacity
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.countText, children: getServiceCount(
-                        passengerType.passengerAgeCode,
-                        cls.classCode
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        reactComponents.Button,
-                        {
-                          appearance: "outline",
-                          className: styles.counterButton,
-                          size: "small",
-                          icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:add-12-regular" }),
-                          disabled: getServiceCount(
-                            passengerType.passengerAgeCode,
-                            cls.classCode
-                          ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            handleIncrement(
+                            ) === 0
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.countText, children: getServiceCount(
+                          passengerType.passengerAgeCode,
+                          cls.classCode
+                        ) }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          reactComponents.Button,
+                          {
+                            appearance: "outline",
+                            className: styles.counterButton,
+                            size: "small",
+                            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:add-12-regular" }),
+                            disabled: getServiceCount(
                               passengerType.passengerAgeCode,
                               cls.classCode
-                            );
+                            ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleIncrement(
+                                passengerType.passengerAgeCode,
+                                cls.classCode
+                              );
+                            }
                           }
-                        }
-                      )
-                    ] })
-                  ] }, cls.id)) }) })
-                ]
-              },
-              passengerType.id
-            );
+                        )
+                      ] })
+                    ] }, cls.id)) }) })
+                  ]
+                },
+                passengerType.id
+              ),
+              companionWarnings.has(
+                passengerType.passengerAgeCode
+              ) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.warningText, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Icon,
+                  {
+                    icon: "fluent:warning-12-filled",
+                    style: {
+                      fontSize: "16px",
+                      color: "#E87511",
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                passengerType.passengerAgeCode === "CHILD" ? mergedLabels.childCompanionWarning : mergedLabels.infantCompanionWarning
+              ] })
+            ] });
           })
         }
       ),
@@ -8350,6 +8388,7 @@ var ModalTotalPassengers = ({
           size: "medium",
           className: styles.submitButton,
           onClick: handleSave,
+          disabled: totalPassengerCount === 0,
           children: mergedLabels.saveButton
         }
       )
@@ -13605,7 +13644,7 @@ var CardVehicleOwnerForm = ({
 // src/components/CardBookingTicket/CardBookingTicket.constants.ts
 var DEFAULT_LABELS27 = {
   id: {
-    bookingDetails: "Booking Details",
+    bookingDetails: "Ringkasan Pemesanan",
     routeTitle: "Rute Perjalanan",
     estimationPrefix: "Estimasi",
     totalPriceLabel: "Total Harga",
@@ -14023,8 +14062,250 @@ var CardBookingTicket = ({
   ] }) });
 };
 
-// src/components/CardFAQ/CardFAQ.constants.ts
+// src/components/CardBookingAddOn/CardBookingAddOn.constants.ts
 var DEFAULT_LABELS28 = {
+  id: {
+    bookingDetails: "Ringkasan",
+    totalPriceLabel: "Total Add On",
+    currencySymbol: "IDR",
+    notIncludedLabel: "Belum termasuk tiket",
+    backToReviewButton: "Kembali Ke Review Pemesanan",
+    changeAddOnButton: "Ubah Layanan Tambahan",
+    loungeLabel: "Akses Lounge",
+    assuranceLabel: "Asuransi Perjalanan",
+    mealLabel: "Makanan",
+    addOnPrice: "IDR. 125,000"
+  },
+  en: {
+    bookingDetails: "Summary",
+    totalPriceLabel: "Total Add On",
+    currencySymbol: "IDR",
+    notIncludedLabel: "Not including ticket fare",
+    backToReviewButton: "Back To Booking Review",
+    changeAddOnButton: "Change Additional Services",
+    loungeLabel: "Lounge Access",
+    assuranceLabel: "Travel Insurance",
+    mealLabel: "Meal",
+    addOnPrice: "IDR. 125,000"
+  }
+};
+var useStyles29 = reactComponents.makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2rem"
+  },
+  bookingDetail: {
+    overflow: "visible",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4
+  },
+  bookingDetailTop: {
+    padding: "2rem",
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    boxShadow: "none",
+    borderTopLeftRadius: reactComponents.tokens.borderRadiusXLarge,
+    borderTopRightRadius: reactComponents.tokens.borderRadiusXLarge,
+    borderBottom: "0.7em dashed " + reactComponents.tokens.colorNeutralBackground1Hover,
+    overflow: "visible",
+    paddingBottom: "4rem",
+    position: "relative"
+  },
+  bookingDetailBottom: {
+    padding: "2rem",
+    paddingTop: "4rem",
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    boxShadow: "none",
+    borderBottomLeftRadius: reactComponents.tokens.borderRadiusXLarge,
+    borderBottomRightRadius: reactComponents.tokens.borderRadiusXLarge,
+    overflow: "visible",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "1.5rem"
+  },
+  circularLeft: {
+    position: "absolute",
+    width: "75px",
+    height: "75px",
+    borderRadius: "50%",
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
+    left: "-37px",
+    bottom: "-42px",
+    zIndex: 2,
+    boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  circularRight: {
+    position: "absolute",
+    width: "75px",
+    height: "75px",
+    borderRadius: "50%",
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
+    right: "-37px",
+    bottom: "-42px",
+    zIndex: 2,
+    boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  headerBookingDetail: {
+    rowGap: reactComponents.tokens.spacingHorizontalXXL
+  },
+  shipInfo: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    gap: "1rem"
+  },
+  ticketInfo: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: "0.5em"
+  },
+  ticketTime: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "start",
+    gap: "0.5em"
+  },
+  ticketDuration: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem"
+  },
+  totalPrice: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "1rem",
+    width: "100%"
+  },
+  gapButton: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingHorizontalM
+  },
+  priceText: {
+    color: reactComponents.tokens.colorPaletteRedForeground1
+  },
+  notIncluded: {
+    textAlign: "right",
+    width: "100%"
+  },
+  secondaryButton: {
+    border: "1px solid " + reactComponents.tokens.colorBrandStroke1,
+    color: reactComponents.tokens.colorBrandBackground,
+    width: "100%"
+  }
+});
+var CardBookingAddOn = ({
+  language = "id",
+  labels,
+  addOnData,
+  totalPrice,
+  onPriceDetailClick,
+  onBackToReviewClick,
+  onChangeAddOnClick,
+  className
+}) => {
+  const styles = useStyles29();
+  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
+  const addOnRows = [
+    {
+      key: "lounge",
+      label: addOnData?.lounge?.label || mergedLabels.loungeLabel,
+      price: addOnData?.lounge?.price || mergedLabels.addOnPrice
+    },
+    {
+      key: "assurance",
+      label: addOnData?.assurance?.label || mergedLabels.assuranceLabel,
+      price: addOnData?.assurance?.price || mergedLabels.addOnPrice
+    },
+    {
+      key: "meal",
+      label: addOnData?.meal?.label || mergedLabels.mealLabel,
+      price: addOnData?.meal?.price || mergedLabels.addOnPrice
+    }
+  ];
+  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 }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactGridSystem.Row,
+        {
+          direction: "column",
+          nogutter: true,
+          className: styles.headerBookingDetail,
+          children: addOnRows.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, align: "center", justify: "between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.price })
+          ] }) }, item.key))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.circularLeft }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.circularRight })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailBottom, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalPrice, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.totalPriceLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: reactComponents.tokens.spacingHorizontalL,
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title3, { className: styles.priceText, children: [
+                mergedLabels.currencySymbol,
+                " ",
+                totalPrice
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Icon,
+                {
+                  icon: "fluent:chevron-down-24-filled",
+                  onClick: onPriceDetailClick,
+                  style: { cursor: "pointer" }
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.notIncluded, children: mergedLabels.notIncludedLabel }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapButton, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            shape: "circular",
+            appearance: "primary",
+            onClick: onBackToReviewClick,
+            children: mergedLabels.backToReviewButton
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            shape: "circular",
+            appearance: "outline",
+            className: styles.secondaryButton,
+            onClick: onChangeAddOnClick,
+            children: mergedLabels.changeAddOnButton
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+
+// src/components/CardFAQ/CardFAQ.constants.ts
+var DEFAULT_LABELS29 = {
   id: {
     title: "Pertanyaan yang sering diajukan"
   },
@@ -14078,7 +14359,7 @@ var DEFAULT_FAQ_ITEMS = {
     }
   ]
 };
-var useStyles29 = reactComponents.makeStyles({
+var useStyles30 = reactComponents.makeStyles({
   faqSection: {
     // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
   },
@@ -14102,8 +14383,8 @@ var CardFAQ = ({
   items,
   className
 }) => {
-  const styles = useStyles29();
-  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
+  const styles = useStyles30();
+  const mergedLabels = { ...DEFAULT_LABELS29[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 }),
@@ -14140,7 +14421,7 @@ var CardFAQ = ({
 };
 
 // src/components/CardAddon/CardAddon.constants.ts
-var DEFAULT_LABELS29 = {
+var DEFAULT_LABELS30 = {
   id: {
     viewDetail: "Lihat detail",
     totalPrice: "Total Harga",
@@ -14156,7 +14437,7 @@ var DEFAULT_LABELS29 = {
     currencySymbol: "Rp"
   }
 };
-var useStyles30 = reactComponents.makeStyles({
+var useStyles31 = reactComponents.makeStyles({
   card: {
     backgroundColor: reactComponents.tokens.colorNeutralBackground1,
     boxShadow: reactComponents.tokens.shadow4,
@@ -14329,8 +14610,8 @@ var CardAddon = ({
   children,
   className
 }) => {
-  const styles = useStyles30();
-  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
+  const styles = useStyles31();
+  const mergedLabels = { ...DEFAULT_LABELS30[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 }),
@@ -14541,7 +14822,7 @@ var CardAddon = ({
 };
 
 // src/components/CardMealCatalog/CardMealCatalog.constants.ts
-var DEFAULT_LABELS30 = {
+var DEFAULT_LABELS31 = {
   id: {
     addButton: "Tambah",
     currencySymbol: "Rp",
@@ -14557,7 +14838,7 @@ var DEFAULT_LABELS30 = {
     searchPlaceholder: "Search for food or drinks you want"
   }
 };
-var useStyles31 = reactComponents.makeStyles({
+var useStyles32 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -14701,8 +14982,8 @@ var CardMealCatalog = ({
   searchValue,
   onSearchChange
 }) => {
-  const styles = useStyles31();
-  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
+  const styles = useStyles32();
+  const mergedLabels = { ...DEFAULT_LABELS31[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 }),
@@ -14807,7 +15088,7 @@ var CardMealCatalog = ({
 };
 
 // src/components/CardReview/CardReview.constants.ts
-var DEFAULT_LABELS31 = {
+var DEFAULT_LABELS32 = {
   id: {
     defaultTitle: "Tinjauan"
   },
@@ -14815,7 +15096,7 @@ var DEFAULT_LABELS31 = {
     defaultTitle: "Review"
   }
 };
-var useStyles32 = reactComponents.makeStyles({
+var useStyles33 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -14867,8 +15148,8 @@ var CardReview = ({
   className,
   headerAction
 }) => {
-  const styles = useStyles32();
-  const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
+  const styles = useStyles33();
+  const mergedLabels = { ...DEFAULT_LABELS32[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 || mergedLabels.defaultTitle }),
@@ -14915,17 +15196,17 @@ var CardReview = ({
 };
 
 // src/components/CardReviewPassenger/CardReviewPassenger.constants.ts
-var DEFAULT_LABELS32 = {
+var DEFAULT_LABELS33 = {
   id: {
     title: "Penumpang",
-    idNumber: "Nomor ID"
+    idNumber: "ID"
   },
   en: {
     title: "Passenger",
-    idNumber: "ID Number"
+    idNumber: "ID"
   }
 };
-var useStyles33 = reactComponents.makeStyles({
+var useStyles34 = reactComponents.makeStyles({
   card: {
     boxShadow: "none",
     border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
@@ -14999,8 +15280,8 @@ var CardReviewPassenger = ({
   passengers,
   className
 }) => {
-  const styles = useStyles33();
-  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
+  const styles = useStyles34();
+  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", nogutter: true, className: styles.list, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.titleRow, children: [
@@ -15039,7 +15320,7 @@ var CardReviewPassenger = ({
 };
 
 // src/components/CardReviewDetail/CardReviewDetail.constants.ts
-var DEFAULT_LABELS33 = {
+var DEFAULT_LABELS34 = {
   id: {
     title: "Detail Pemesanan",
     fromLabel: "Dari",
@@ -15048,7 +15329,9 @@ var DEFAULT_LABELS33 = {
     bookingNameLabel: "Nama Pemesanan",
     passengerTypeLabel: "Jenis Penumpang",
     addOnLabel: "Add On",
-    viewDetail: "Lihat Detail"
+    viewDetail: "Lihat Detail",
+    noAddOnsLabel: "Tidak ada layanan",
+    serviceLabel: "Layanan"
   },
   en: {
     title: "Booking Details",
@@ -15058,10 +15341,12 @@ var DEFAULT_LABELS33 = {
     bookingNameLabel: "Booking Name",
     passengerTypeLabel: "Passenger Type",
     addOnLabel: "Add On",
-    viewDetail: "View Details"
+    viewDetail: "View Details",
+    noAddOnsLabel: "No services",
+    serviceLabel: "Service"
   }
 };
-var useStyles34 = reactComponents.makeStyles({
+var useStyles35 = reactComponents.makeStyles({
   card: {
     boxShadow: "none",
     border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
@@ -15074,9 +15359,7 @@ var useStyles34 = reactComponents.makeStyles({
     gap: reactComponents.tokens.spacingHorizontalS
   },
   fieldRow: {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: reactComponents.tokens.spacingHorizontalL
+    rowGap: reactComponents.tokens.spacingHorizontalL
   },
   addOnRow: {
     display: "flex",
@@ -15097,45 +15380,49 @@ var CardReviewDetail = ({
   onViewAddOns,
   className
 }) => {
-  const styles = useStyles34();
-  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
-  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, direction: "column", style: { gap: reactComponents.tokens.spacingHorizontalL }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.titleRow, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.title }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { width: 0 } })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.fieldRow, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.fromLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: from }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.toLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: to }) }) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.fieldRow, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.scheduleLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: scheduleTime }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.bookingNameLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: bookingName }) }) })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.fieldRow, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.passengerTypeLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: passengerType }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.addOnLabel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.addOnRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { children: [
-          addOnsCount,
-          " ",
-          addOnsCount === 1 ? "Layanan" : "Layanan"
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Button,
-          {
-            appearance: "transparent",
-            onClick: onViewAddOns,
-            style: { color: brandColors[80] },
-            children: mergedLabels.viewDetail
-          }
-        )
-      ] }) }) })
-    ] }) })
-  ] }) });
+  const styles = useStyles35();
+  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
+  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactGridSystem.Row,
+    {
+      nogutter: true,
+      direction: "column",
+      style: { gap: reactComponents.tokens.spacingHorizontalL },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.titleRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { width: 0 } })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.fieldRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.fromLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: from }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.toLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: to }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.fieldRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.scheduleLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: scheduleTime }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.bookingNameLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: bookingName }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.fieldRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.passengerTypeLabel, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: passengerType }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: mergedLabels.addOnLabel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.addOnRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: addOnsCount === 0 ? mergedLabels.noAddOnsLabel : `${addOnsCount} ${addOnsCount === 1 ? mergedLabels.serviceLabel : mergedLabels.serviceLabel}` }),
+            addOnsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "transparent",
+                onClick: onViewAddOns,
+                style: { color: brandColors[80] },
+                children: mergedLabels.viewDetail
+              }
+            )
+          ] }) }) })
+        ] }) })
+      ]
+    }
+  ) });
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts
-var DEFAULT_LABELS34 = {
+var DEFAULT_LABELS35 = {
   id: {
     defaultTitle: "Rincian Harga",
     totalPayment: "Total Pembayaran",
@@ -15171,7 +15458,7 @@ var DEFAULT_LABELS34 = {
     currencyPrefix: "Rp. "
   }
 };
-var useStyles35 = reactComponents.makeStyles({
+var useStyles36 = reactComponents.makeStyles({
   list: {
     margin: 0,
     padding: 0,
@@ -15193,7 +15480,7 @@ var PriceDetailsTerms = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles35();
+  const styles = useStyles36();
   const linkColor = reactComponents.tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
@@ -15213,7 +15500,7 @@ var PriceDetailsTerms = ({
     ] })
   ] });
 };
-var useStyles36 = reactComponents.makeStyles({
+var useStyles37 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -15290,8 +15577,8 @@ var CardPriceDetails = ({
   total,
   labels
 }) => {
-  const styles = useStyles36();
-  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
+  const styles = useStyles37();
+  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   const getVariantClass = (variant) => {
     switch (variant) {
@@ -15350,7 +15637,7 @@ var CardPriceDetails = ({
 };
 
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
-var DEFAULT_LABELS35 = {
+var DEFAULT_LABELS36 = {
   id: {
     selectAriaLabel: "Pilih metode pembayaran"
   },
@@ -15358,7 +15645,7 @@ var DEFAULT_LABELS35 = {
     selectAriaLabel: "Select payment method"
   }
 };
-var useStyles37 = reactComponents.makeStyles({
+var useStyles38 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15418,8 +15705,8 @@ var CardPaymentMethodList = ({
   selectedValue,
   onSelect
 }) => {
-  const styles = useStyles37();
-  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
+  const styles = useStyles38();
+  const mergedLabels = { ...DEFAULT_LABELS36[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: [
@@ -15468,7 +15755,7 @@ var CardPaymentMethodList = ({
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
-var DEFAULT_LABELS36 = {
+var DEFAULT_LABELS37 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -15476,7 +15763,7 @@ var DEFAULT_LABELS36 = {
     title: "Payment Method"
   }
 };
-var useStyles38 = reactComponents.makeStyles({
+var useStyles39 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15512,8 +15799,8 @@ var CardPaymentGuide = ({
   guides,
   className
 }) => {
-  const styles = useStyles38();
-  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
+  const styles = useStyles39();
+  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     displayTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -15532,7 +15819,7 @@ var CardPaymentGuide = ({
 };
 
 // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
-var DEFAULT_LABELS37 = {
+var DEFAULT_LABELS38 = {
   id: {
     expiryPrefix: "Kode virtual akun berlaku sampai",
     copyCodeButton: "Salin Kode",
@@ -15552,7 +15839,7 @@ var DEFAULT_LABELS37 = {
     changePayment: "Change Payment Method"
   }
 };
-var useStyles39 = reactComponents.makeStyles({
+var useStyles40 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -15644,8 +15931,8 @@ var CardPaymentInfo = ({
   onCheckStatus,
   onChangePayment
 }) => {
-  const styles = useStyles39();
-  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
+  const styles = useStyles40();
+  const mergedLabels = { ...DEFAULT_LABELS38[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 }),
@@ -15717,7 +16004,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS38 = {
+var DEFAULT_LABELS39 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -15747,7 +16034,7 @@ var DEFAULT_LABELS38 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles40 = reactComponents.makeStyles({
+var useStyles41 = reactComponents.makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -15817,8 +16104,8 @@ var CardStatusOrder = ({
   onClickViewTicket,
   className
 }) => {
-  const styles = useStyles40();
-  const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
+  const styles = useStyles41();
+  const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
   const displayStatus = statusLabel || mergedLabels.defaultStatus;
   const displayTitle = title || mergedLabels.defaultTitle;
   const displayDescription = description || mergedLabels.defaultDescription;
@@ -15915,7 +16202,7 @@ var CardStatusOrder = ({
 };
 
 // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
-var DEFAULT_LABELS39 = {
+var DEFAULT_LABELS40 = {
   id: {
     title: "Rincian Harga",
     addonHeader: "Add On",
@@ -15941,7 +16228,7 @@ var DEFAULT_LABELS39 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles41 = reactComponents.makeStyles({
+var useStyles42 = reactComponents.makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -16068,8 +16355,8 @@ var ModalPriceDetail = ({
   grandTotal,
   ...props
 }) => {
-  const styles = useStyles41();
-  const mergedLabels = { ...DEFAULT_LABELS39[language], ...labels };
+  const styles = useStyles42();
+  const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactComponents.Dialog,
     {
@@ -16211,7 +16498,7 @@ var ModalPriceDetail = ({
 // src/components/FileUpload/FileUpload.constants.ts
 var ACCEPTED_FILES = ".pdf,.jpg,.jpeg,.png";
 var MAX_FILE_SIZE_MB = 10;
-var DEFAULT_LABELS40 = {
+var DEFAULT_LABELS41 = {
   id: {
     placeholder: "Ketuk untuk pilih file",
     maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
@@ -16229,7 +16516,7 @@ var DEFAULT_LABELS40 = {
     downloadTemplateDocument: "Download Template Document"
   }
 };
-var useStyles42 = reactComponents.makeStyles({
+var useStyles43 = reactComponents.makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -16256,7 +16543,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles42();
+  const styles = useStyles43();
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactComponents.DialogTitle,
@@ -16382,7 +16669,7 @@ var FileUpload = React__default.default.forwardRef(
     downloadTemplateDocument = false,
     infoLabel
   }, ref) => {
-    const mergedLabels = { ...DEFAULT_LABELS40[language], ...customLabels };
+    const mergedLabels = { ...DEFAULT_LABELS41[language], ...customLabels };
     const styles = uploadStyles();
     const fileInputRef = React.useRef(null);
     const [, setIsDragOver] = React.useState(false);
@@ -16819,11 +17106,11 @@ function hexToRgba(hex, alpha = 1) {
 }
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS41 = {
+var DEFAULT_LABELS42 = {
   id: {},
   en: {}
 };
-var useStyles43 = reactComponents.makeStyles({
+var useStyles44 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -16883,8 +17170,8 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles43();
-  ({ ...DEFAULT_LABELS41[language], ...labels });
+  const styles = useStyles44();
+  ({ ...DEFAULT_LABELS42[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
   };
@@ -16921,6 +17208,7 @@ exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
 exports.COUNTRIES = COUNTRIES;
 exports.CardAddon = CardAddon;
 exports.CardBanner = CardBanner;
+exports.CardBookingAddOn = CardBookingAddOn;
 exports.CardBookingTicket = CardBookingTicket;
 exports.CardFAQ = CardFAQ;
 exports.CardMealCatalog = CardMealCatalog;