@asdp/ferryui 0.1.22-dev.8463 → 0.1.22-dev.8523

package/dist/index.js

@@ -12,6 +12,7 @@ var Select = require('react-select');
 var reactCalendarCompat = require('@fluentui/react-calendar-compat');
 var moment = require('moment');
 var reactRange = require('react-range');
+var reactIcons = require('@fluentui/react-icons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -545,6 +546,7 @@ var sharedColors = {
   "Shared_Red_Primary": "#d13438",
   "Shared_Green_Primary": "#107c10"};
 var lightModeColors2 = {
+  "Neutral_Foreground_Disabled_Rest": "#bdbdbd",
   "Brand_Stroke_1_Rest": "#00B3BD"};
 var tokensV2_default = {
   lightModeColors: lightModeColors2};
@@ -6429,17 +6431,3331 @@ var ModalSearchTicket = ({
     }
   );
 };
+var useStyles18 = reactComponents.makeStyles({
+  stepperWrapper: {
+    position: "relative",
+    width: "100%",
+    maxWidth: "988px",
+    margin: "0 auto",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      maxWidth: "100%"
+    }
+  },
+  stepperContainer: {
+    position: "relative",
+    width: "100%",
+    height: "78px",
+    display: "flex",
+    flexDirection: "column",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      height: "60px"
+    }
+  },
+  stepperBackground: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    zIndex: 0,
+    pointerEvents: "none"
+  },
+  stepsRow: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-around",
+    padding: "0 60px",
+    height: "50%",
+    zIndex: 2,
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      padding: "0 30px"
+    }
+  },
+  stepCircleWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    position: "relative",
+    zIndex: 3
+  },
+  stepCircle: {
+    width: "24px",
+    height: "24px",
+    borderRadius: "25%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "16px",
+    fontWeight: "bold",
+    transition: "all 0.3s ease",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      width: "16px",
+      height: "16px",
+      fontSize: "14px"
+    }
+  },
+  stepCircleActive: {
+    backgroundColor: "#FFFFFF",
+    color: "#00AEEF",
+    boxShadow: "0 2px 8px rgba(0, 174, 239, 0.3)"
+  },
+  stepCircleCompleted: {
+    backgroundColor: "#8DC63F",
+    color: "#FFFFFF",
+    border: "none"
+  },
+  stepCircleInactive: {
+    backgroundColor: "#FFFFFF",
+    color: "#999999"
+  },
+  stepLabel: {
+    position: "absolute",
+    top: "50%",
+    marginTop: "28px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    fontSize: "12px",
+    fontWeight: "600",
+    textAlign: "center",
+    whiteSpace: "nowrap",
+    color: "#FFFFFF",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      marginTop: "20px",
+      fontSize: "9px"
+    }
+  },
+  ferryIcon: {
+    width: "40px",
+    height: "40px",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      width: "30px",
+      height: "30px"
+    }
+  },
+  stepConnector: {
+    flex: 1,
+    height: "4px",
+    backgroundColor: "#CCCCCC",
+    margin: "0 8px",
+    alignSelf: "center",
+    [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
+      height: "3px",
+      margin: "0 4px"
+    }
+  },
+  stepConnectorCompleted: {
+    backgroundColor: "#8DC63F"
+  }
+});
+var Stepper = ({
+  steps,
+  currentStep,
+  className
+}) => {
+  const styles = useStyles18();
+  const currentStepIndex = React5.useMemo(() => {
+    if (typeof currentStep === "number") {
+      return steps.findIndex((step) => step.number === currentStep);
+    }
+    return steps.findIndex((step) => step.id === currentStep);
+  }, [steps, currentStep]);
+  const activeStepNumber = React5.useMemo(() => {
+    return currentStepIndex >= 0 ? steps[currentStepIndex].number : 1;
+  }, [currentStepIndex, steps]);
+  const getStepStatus = (stepNumber) => {
+    if (stepNumber < activeStepNumber) return "completed";
+    if (stepNumber === activeStepNumber) return "active";
+    return "inactive";
+  };
+  const getCircleClass = (stepNumber) => {
+    const status = getStepStatus(stepNumber);
+    const baseClass = styles.stepCircle;
+    if (status === "active") return `${baseClass} ${styles.stepCircleActive}`;
+    if (status === "completed") return `${baseClass} ${styles.stepCircleCompleted}`;
+    return `${baseClass} ${styles.stepCircleInactive}`;
+  };
+  const getConnectorClass = (currentStepNumber) => {
+    if (currentStepNumber < activeStepNumber) {
+      return `${styles.stepConnector} ${styles.stepConnectorCompleted}`;
+    }
+    return styles.stepConnector;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reactComponents.mergeClasses(styles.stepperWrapper, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.stepperContainer, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: "/assets/images/reservation/stepper_bg.svg",
+        alt: "Stepper Background",
+        className: styles.stepperBackground
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.stepsRow, children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.stepCircleWrapper, children: [
+        getStepStatus(step.number) === "active" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: "/assets/images/reservation/ferry_step.svg",
+            alt: "Ferry",
+            className: styles.ferryIcon
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: getCircleClass(step.number), children: step.number }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.stepLabel, children: step.label })
+      ] }),
+      index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getConnectorClass(step.number) })
+    ] }, step.id)) })
+  ] }) });
+};
+var useStyles19 = reactComponents.makeStyles({
+  card: {
+    padding: "1.5rem",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4,
+    zIndex: 3
+  },
+  container: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "1rem"
+  },
+  fieldGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem"
+  },
+  label: {
+    color: reactComponents.tokens.colorNeutralForeground2
+  },
+  value: {
+    color: tokensV2_default.lightModeColors.Neutral_Foreground_Disabled_Rest
+  }
+});
+var CardOrdererInfo = ({
+  orderer,
+  className
+}) => {
+  const styles = useStyles19();
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { children: "Informasi Pemesan" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.label, children: "Nama Pemesan" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.value, children: orderer?.name || "-" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.label, children: "Nomor Handphone" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.value, children: orderer?.phoneNumber || "-" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldGroup, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.label, children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.value, children: orderer?.email || "-" })
+      ] })
+    ] })
+  ] });
+};
+var useStyles20 = reactComponents.makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1.5rem",
+    padding: "1.5rem"
+  },
+  searchInput: {
+    width: "100%"
+  },
+  passengerList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5rem"
+  },
+  passengerItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem",
+    borderRadius: reactComponents.tokens.borderRadiusMedium,
+    border: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
+    cursor: "pointer",
+    transition: "all 0.2s ease",
+    ":hover": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
+    }
+  },
+  actions: {
+    display: "flex",
+    gap: "1rem",
+    justifyContent: "flex-end",
+    marginTop: "1rem"
+  }
+});
+var ModalListPassenger = ({
+  open,
+  onClose,
+  title = "Detail Penumpang",
+  passengers,
+  searchQuery,
+  onSearchChange,
+  onSelectPassenger,
+  onEditPassenger,
+  onAddPassenger,
+  sameAsOrderer,
+  onSameAsOrdererChange
+}) => {
+  const styles = useStyles20();
+  const handleClose = () => {
+    onClose();
+    onSearchChange("");
+  };
+  const handleSelectPassenger = (passenger) => {
+    onSelectPassenger(passenger);
+    handleClose();
+  };
+  const filteredPassengers = passengers.filter((passenger) => {
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    return passenger.name?.toLowerCase().includes(query) || passenger.category?.toLowerCase().includes(query);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => {
+        if (!data.open) {
+          handleClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.DialogTitle,
+          {
+            action: /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Switch,
+              {
+                label: "Sama Dengan Pemesan",
+                checked: sameAsOrderer,
+                onChange: (_, data) => onSameAsOrdererChange(data.checked)
+              }
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: title })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { className: styles.content, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Input,
+            {
+              className: styles.searchInput,
+              contentBefore: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:search-24-regular" }),
+              placeholder: "Cari Penumpang",
+              value: searchQuery,
+              onChange: (_, data) => onSearchChange(data.value),
+              size: "large"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.passengerList, children: filteredPassengers.map((passenger, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: styles.passengerItem,
+              onClick: () => handleSelectPassenger(passenger),
+              role: "button",
+              tabIndex: 0,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelectPassenger(passenger);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
+                  passenger.name,
+                  " (",
+                  passenger.category,
+                  ")"
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Icon,
+                  {
+                    icon: "fluent:chevron-right-24-regular",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onEditPassenger(passenger);
+                    },
+                    width: 20,
+                    height: 20
+                  }
+                )
+              ]
+            },
+            passenger.id || `passenger-${index}`
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actions, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "primary",
+                size: "large",
+                shape: "circular",
+                onClick: onAddPassenger,
+                children: "Tambah Penumpang"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "secondary",
+                size: "large",
+                shape: "circular",
+                onClick: handleClose,
+                children: "Batal"
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    }
+  );
+};
+var useStyles21 = reactComponents.makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1.5rem"
+  },
+  actions: {
+    display: "flex",
+    gap: "1rem",
+    justifyContent: "flex-end",
+    marginTop: "1rem"
+  }
+});
+var ModalPassengerForm = ({
+  open,
+  onClose,
+  title = "Detail Penumpang",
+  onSubmit,
+  defaultValues,
+  isAdultForm = true,
+  titleOptions,
+  idTypeOptions,
+  cityOptions,
+  ticketClassOptions
+}) => {
+  const styles = useStyles21();
+  const { control, handleSubmit, reset } = reactHookForm.useForm({
+    defaultValues
+  });
+  React5.useEffect(() => {
+    reset(defaultValues);
+  }, [defaultValues, reset]);
+  const handleFormSubmit = (data) => {
+    onSubmit(data);
+    reset();
+  };
+  const handleClose = () => {
+    onClose();
+    reset();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactComponents.Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => {
+        if (!data.open) {
+          handleClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: title }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit(handleFormSubmit), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputDynamic_default,
+            {
+              name: "title",
+              control,
+              type: "select",
+              label: "Title",
+              placeholder: "Pilih",
+              options: titleOptions,
+              size: "large",
+              required: true,
+              validationRules: {
+                required: "Title harus dipilih"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputDynamic_default,
+            {
+              name: "name",
+              control,
+              type: "text",
+              label: "Nama Lengkap",
+              placeholder: "Masukkan Nama",
+              size: "large",
+              required: true,
+              validationRules: {
+                required: "Nama lengkap harus diisi",
+                minLength: {
+                  value: 3,
+                  message: "Nama minimal 3 karakter"
+                }
+              }
+            }
+          ),
+          isAdultForm ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InputDynamic_default,
+              {
+                name: "idType",
+                control,
+                type: "select",
+                label: "Jenis ID",
+                placeholder: "Pilih",
+                options: idTypeOptions,
+                size: "large",
+                required: true,
+                validationRules: {
+                  required: "Jenis ID harus dipilih"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InputDynamic_default,
+              {
+                name: "idNumber",
+                control,
+                type: "text",
+                label: "Nomor Identitas",
+                placeholder: "Masukkan Nomor Identitas",
+                size: "large",
+                required: true,
+                validationRules: {
+                  required: "Nomor identitas harus diisi",
+                  minLength: {
+                    value: 6,
+                    message: "Nomor identitas minimal 6 karakter"
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InputDynamic_default,
+              {
+                name: "age",
+                control,
+                type: "number",
+                label: "Usia",
+                placeholder: "Masukkan Usia",
+                size: "large",
+                required: true,
+                validationRules: {
+                  required: "Usia harus diisi",
+                  min: {
+                    value: 1,
+                    message: "Usia minimal 1 tahun"
+                  },
+                  max: {
+                    value: 150,
+                    message: "Usia maksimal 150 tahun"
+                  }
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            InputDynamic_default,
+            {
+              name: "date",
+              control,
+              type: "date",
+              label: "Tanggal Lahir",
+              placeholder: "Masukkan Tanggal Lahir",
+              size: "large",
+              required: true,
+              validationRules: {
+                required: "Tanggal lahir harus diisi"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputDynamic_default,
+            {
+              name: "cityId",
+              control,
+              type: "select",
+              label: "Kota Kabupaten",
+              options: cityOptions,
+              placeholder: "Masukkan Nama Kota/Kabupaten",
+              size: "large",
+              required: true,
+              validationRules: {
+                required: "Kota/Kabupaten harus diisi"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputDynamic_default,
+            {
+              name: "ticketClass",
+              control,
+              type: "radiobutton",
+              label: "Kelas penumpang",
+              options: ticketClassOptions,
+              required: true,
+              disabled: true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.actions, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "primary", size: "large", shape: "circular", type: "submit", children: "Simpan" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "secondary",
+                size: "large",
+                shape: "circular",
+                type: "button",
+                onClick: handleClose,
+                children: "Batal"
+              }
+            )
+          ] })
+        ] }) })
+      ] }) })
+    }
+  );
+};
+var getBadgeConfig = (ticketClass) => {
+  const normalizedClass = ticketClass?.toUpperCase();
+  switch (normalizedClass) {
+    case "EKONOMI":
+    case "ECONOMY":
+      return {
+        color: "#A74109",
+        icon: "/assets/images/class/shield_badge_ekonomi.svg"
+      };
+    case "BISNIS":
+    case "BUSINESS":
+      return {
+        color: "#859599",
+        icon: "/assets/images/class/ribbon_badge_bisnis.svg"
+      };
+    case "EKSEKUTIF":
+    case "EXECUTIVE":
+      return {
+        color: "#C19C00",
+        icon: "/assets/images/class/crown_badge_eksekutif.svg"
+      };
+    default:
+      return {
+        color: reactComponents.tokens.colorNeutralBackground3,
+        icon: ""
+      };
+  }
+};
+var useStyles22 = reactComponents.makeStyles({
+  card: {
+    padding: "1.5rem",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4,
+    zIndex: 3
+  },
+  headerContainer: {
+    display: "flex",
+    alignItems: "center",
+    marginBottom: "1rem",
+    gap: "1rem"
+  },
+  headerTitle: {
+    whiteSpace: "nowrap"
+  },
+  headerLine: {
+    height: "1px",
+    flexGrow: 1,
+    backgroundColor: reactComponents.tokens.colorNeutralStroke2
+  },
+  passengerList: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  passengerItem: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "1rem 0",
+    cursor: "pointer",
+    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
+    ":last-child": {
+      borderBottom: "none"
+    },
+    ":hover": {
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
+      paddingLeft: "0.5rem",
+      paddingRight: "0.5rem",
+      margin: "0 -0.5rem"
+    },
+    transition: "all 0.2s ease"
+  },
+  passengerInfo: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem"
+  },
+  passengerText: {
+    color: "#00B8D4"
+  },
+  badgeContainer: {
+    display: "flex",
+    alignItems: "center",
+    position: "relative"
+  },
+  badgeContent: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0.25rem 0.75rem 0.25rem 1.5rem",
+    borderTopRightRadius: "9999px",
+    borderBottomRightRadius: "9999px",
+    color: "white",
+    fontSize: reactComponents.tokens.fontSizeBase200,
+    fontWeight: reactComponents.tokens.fontWeightMedium,
+    marginLeft: "-14px",
+    minHeight: "24px"
+  },
+  badgeIcon: {
+    width: "28px",
+    height: "32px",
+    zIndex: 1,
+    filter: "drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))"
+  }
+});
+var CardPassengerList = ({
+  title = "Data Penumpang",
+  passengers,
+  onPassengerClick,
+  className
+}) => {
+  const styles = useStyles22();
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { className: styles.headerTitle, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerLine })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.passengerList, children: passengers.map((passenger, index) => {
+      const badgeConfig = getBadgeConfig(passenger.serviceName);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: styles.passengerItem,
+          onClick: () => onPassengerClick(passenger),
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onPassengerClick(passenger);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.passengerInfo, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { className: styles.passengerText, children: [
+              passenger.name || `Penumpang ${index + 1}`,
+              " (",
+              passenger.passengerType,
+              ")"
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "1rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.badgeContainer, children: [
+                badgeConfig.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: badgeConfig.icon,
+                    alt: passenger.serviceName,
+                    className: styles.badgeIcon
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: styles.badgeContent,
+                    style: { backgroundColor: badgeConfig.color },
+                    children: passenger.serviceName
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-right-24-regular", width: 20, height: 20 })
+            ] })
+          ]
+        },
+        passenger.id || `passenger-${index}`
+      );
+    }) })
+  ] });
+};
+var useStyles23 = reactComponents.makeStyles({
+  card: {
+    padding: "1.5rem",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4,
+    zIndex: 3,
+    width: "100%"
+  },
+  vehicleType: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.75rem",
+    marginTop: "1rem",
+    marginBottom: "1.5rem"
+  },
+  radioGroup: {
+    marginTop: "1rem"
+  },
+  question: {
+    color: reactComponents.tokens.colorNeutralForeground1,
+    marginBottom: "0.5rem"
+  },
+  headerTitle: {
+    color: reactComponents.tokens.colorNeutralForeground3,
+    fontWeight: "500",
+    width: "250px"
+  }
+});
+var CardVehicleDetail = ({
+  serviceTitle,
+  serviceImage,
+  control,
+  vehicleNumberName = "vehicleNumber",
+  showLoadOption = false,
+  hasLoad,
+  onHasLoadChange
+}) => {
+  const styles = useStyles23();
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: "Detail Kendaraan" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, marginLeft: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.vehicleType, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          alt: serviceTitle,
+          src: serviceImage,
+          height: 75,
+          width: 75,
+          style: { objectFit: "contain" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: serviceTitle })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { style: { color: reactComponents.tokens.colorNeutralForeground1 }, children: "Nomor Kendaraan" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        InputDynamic_default,
+        {
+          control,
+          name: vehicleNumberName,
+          placeholder: "Contoh: B1234CD",
+          type: "text"
+        }
+      )
+    ] }),
+    showLoadOption && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.radioGroup, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.question, children: "Apakah kendaraan membawa muatan?" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        reactComponents.RadioGroup,
+        {
+          value: hasLoad,
+          onChange: (_, data) => onHasLoadChange?.(data.value),
+          layout: "horizontal",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "true", label: "Ya" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "false", label: "Tidak" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var useStyles24 = reactComponents.makeStyles({
+  card: {
+    padding: "1.5rem",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4,
+    zIndex: 3,
+    marginTop: "1.5rem"
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "1rem"
+  },
+  accordion: {
+    ...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.colorNeutralStroke1),
+    borderRadius: reactComponents.tokens.borderRadiusLarge,
+    marginTop: "1rem"
+  },
+  accordionHeader: {
+    backgroundColor: reactComponents.tokens.colorNeutralBackground2
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1rem",
+    padding: "1rem"
+  },
+  label: {
+    color: reactComponents.tokens.colorNeutralForeground2,
+    marginBottom: "0.25rem",
+    display: "block"
+  },
+  link: {
+    color: reactComponents.tokens.colorBrandForeground1,
+    textDecorationLine: "none",
+    ":hover": {
+      textDecorationLine: "underline"
+    }
+  }
+});
+var CardVehicleOwnerForm = ({
+  owners,
+  hasLoad,
+  control,
+  watch,
+  setValue,
+  getValues,
+  onAddOwner,
+  onDeleteOwner,
+  onUpdateOwner,
+  onAddCargo,
+  onDeleteCargo,
+  onUpdateCargoQuantity,
+  companyOptions = [],
+  cityOptions = []
+}) => {
+  const styles = useStyles24();
+  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: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { style: { marginRight: "1rem" }, children: "Informasi Pemilik & Muatan" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { flex: 1 } })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Button,
+        {
+          appearance: "transparent",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:add-24-regular" }),
+          style: { color: reactComponents.tokens.colorNeutralForeground2 },
+          onClick: onAddOwner,
+          children: "Tambah Pemilik"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { collapsible: true, defaultOpenItems: owners.map((o) => String(o.id)), multiple: true, children: owners.map((owner, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      reactComponents.AccordionItem,
+      {
+        value: String(owner.id),
+        className: styles.accordion,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionHeader, { className: styles.accordionHeader, expandIconPosition: "end", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { children: [
+                  "Informasi Pemilik ",
+                  index + 1
+                ] }),
+                owners.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.Button,
+                  {
+                    appearance: "transparent",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:delete-24-regular" }),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onDeleteOwner(owner.id);
+                    },
+                    style: { color: reactComponents.tokens.colorPaletteRedForeground1 }
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.form, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Nama Pengirim" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 6, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "2rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactComponents.RadioGroup,
+                  {
+                    layout: "horizontal",
+                    value: owner.senderType,
+                    onChange: (_, data) => onUpdateOwner(owner.id, {
+                      senderType: data.value
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perusahaan", label: "Perusahaan" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perseorangan", label: "Perseorangan" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  InputDynamic_default,
+                  {
+                    control,
+                    name: `owners.${index}.senderName`,
+                    placeholder: owner.senderType === "Perusahaan" ? "Pilih Nama Perusahaan" : "Masukkan Nama Pengirim",
+                    size: "large",
+                    type: owner.senderType === "Perusahaan" ? "select" : "text",
+                    options: owner.senderType === "Perusahaan" ? companyOptions : []
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { lg: 6, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "1rem" } }),
+                /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
+                  "Data Estimasi Berat Muatan dan Kendaraan (Ton)",
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  InputDynamic_default,
+                  {
+                    control,
+                    name: `owners.${index}.estimatedWeight`,
+                    placeholder: "Masukkan Angka",
+                    size: "large",
+                    type: "number"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Kota Asal" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  InputDynamic_default,
+                  {
+                    control,
+                    name: `looseCargoOwners.${index}.originCity`,
+                    placeholder: "Pilih",
+                    type: "select",
+                    options: cityOptions
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Kota Tujuan" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  InputDynamic_default,
+                  {
+                    control,
+                    name: `looseCargoOwners.${index}.destinationCity`,
+                    placeholder: "Pilih",
+                    type: "select",
+                    options: cityOptions
+                  }
+                )
+              ] })
+            ] }),
+            hasLoad && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
+                    "Nama Perusahaan Pemilik Barang ",
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "2rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactComponents.RadioGroup,
+                    {
+                      layout: "horizontal",
+                      value: owner.cargoOwnerType || "Perusahaan",
+                      onChange: (_, data) => onUpdateOwner(owner.id, {
+                        cargoOwnerType: data.value
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perusahaan", label: "Perusahaan" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perseorangan", label: "Perseorangan" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    InputDynamic_default,
+                    {
+                      control,
+                      name: `looseCargoOwners.${index}.cargoOwnerName`,
+                      placeholder: owner.cargoOwnerType === "Perusahaan" ? "Pilih Nama Perusahaan Pemilik Barang" : "Masukkan Nama Pemilik Barang",
+                      size: "large",
+                      type: owner.cargoOwnerType === "Perusahaan" ? "select" : "text",
+                      options: owner.cargoOwnerType === "Perusahaan" ? companyOptions : []
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Caption1,
+                    {
+                      style: {
+                        color: reactComponents.tokens.colorNeutralForeground3,
+                        marginTop: "0.25rem"
+                      },
+                      children: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan'
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
+                    "Nama Perusahaan Logistik ",
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "2rem", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactComponents.RadioGroup,
+                    {
+                      layout: "horizontal",
+                      value: owner.logisticsCompanyType || "Perseorangan",
+                      onChange: (_, data) => onUpdateOwner(owner.id, {
+                        logisticsCompanyType: data.value
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perusahaan", label: "Perusahaan" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perseorangan", label: "Perseorangan" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    InputDynamic_default,
+                    {
+                      control,
+                      name: `looseCargoOwners.${index}.logisticsCompanyName`,
+                      placeholder: owner.logisticsCompanyType === "Perusahaan" ? "Pilih Nama Perusahaan Logistik" : "Masukkan Nama Logistik",
+                      size: "large",
+                      type: owner.logisticsCompanyType === "Perusahaan" ? "select" : "text",
+                      options: owner.logisticsCompanyType === "Perusahaan" ? companyOptions : []
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Caption1,
+                    {
+                      style: {
+                        color: reactComponents.tokens.colorNeutralForeground3,
+                        marginTop: "0.25rem"
+                      },
+                      children: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan'
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, md: 12, lg: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Nama Perusahaan Penerima Barang" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactComponents.RadioGroup,
+                    {
+                      layout: "horizontal",
+                      value: owner.cargoReceiverType || "Perusahaan",
+                      onChange: (_, data) => onUpdateOwner(owner.id, {
+                        cargoReceiverType: data.value
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perusahaan", label: "Perusahaan" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: "Perseorangan", label: "Perseorangan" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    InputDynamic_default,
+                    {
+                      control,
+                      name: `looseCargoOwners.${index}.cargoReceiverName`,
+                      placeholder: owner.cargoReceiverType === "Perusahaan" ? "Pilih Nama Perusahaan Penerima Barang" : "Masukkan Nama Penerima Barang",
+                      size: "large",
+                      type: owner.cargoReceiverType === "Perusahaan" ? "select" : "text",
+                      options: owner.cargoReceiverType === "Perusahaan" ? companyOptions : []
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Caption1,
+                    {
+                      style: {
+                        color: reactComponents.tokens.colorNeutralForeground3,
+                        marginTop: "0.25rem"
+                      },
+                      children: 'Apabila nama perusahaan belum tersedia dapat memilih "Lainnya" dan silakan isi nama perusahaan'
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ".5rem" } }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
+                    "Berat Muatan dan Kendaraan (Ton)",
+                    " ",
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    InputDynamic_default,
+                    {
+                      control,
+                      name: `looseCargoOwners.${index}.cargoWeight`,
+                      placeholder: "Masukkan Angka",
+                      type: "number",
+                      size: "large"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Daftar Muatan" }) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { xs: 12, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.Accordion,
+                  {
+                    collapsible: true,
+                    defaultOpenItems: owner.cargoItems?.map((cargo) => `cargo-${cargo.id}`) || [],
+                    multiple: true,
+                    children: owner.cargoItems?.map((cargo, cargoIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      reactComponents.AccordionItem,
+                      {
+                        value: `cargo-${cargo.id}`,
+                        className: styles.accordion,
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            reactComponents.AccordionHeader,
+                            {
+                              className: styles.accordionHeader,
+                              expandIconPosition: "end",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    justifyContent: "space-between",
+                                    alignItems: "center",
+                                    width: "100%"
+                                  },
+                                  children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Strong, { children: [
+                                    "Muatan ",
+                                    cargoIndex + 1
+                                  ] })
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.form, children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+                              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
+                                /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
+                                  "Data Komoditas ",
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
+                                ] }),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  InputDynamic_default,
+                                  {
+                                    control,
+                                    name: `looseCargoOwners.${index}.cargo.${cargoIndex}.commodity`,
+                                    placeholder: "Pilih",
+                                    type: "select",
+                                    options: []
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsxs(
+                                  reactComponents.Caption1,
+                                  {
+                                    style: {
+                                      color: reactComponents.tokens.colorNeutralForeground3,
+                                      marginTop: "0.25rem"
+                                    },
+                                    children: [
+                                      "Pahami definisi, jenis dan contoh komoditas",
+                                      " ",
+                                      /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: styles.link, children: "disini" })
+                                    ]
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
+                                /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
+                                  "Data Jenis Muatan",
+                                  " ",
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
+                                ] }),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  InputDynamic_default,
+                                  {
+                                    control,
+                                    name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoType`,
+                                    placeholder: "Pilih",
+                                    type: "select",
+                                    options: [
+                                      { value: "karung", label: "Karung" },
+                                      { value: "kg", label: "Kg" },
+                                      { value: "ton", label: "Ton" },
+                                      { value: "unit", label: "Unit" }
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  reactComponents.Caption1,
+                                  {
+                                    style: {
+                                      color: reactComponents.tokens.colorNeutralForeground3,
+                                      marginTop: "0.25rem"
+                                    },
+                                    children: 'Apabila jenis muatan belum tersedia dapat memilih "Lainnya" dan silakan isi jenis muatannya.'
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Jumlah Muatan" }),
+                                /* @__PURE__ */ jsxRuntime.jsxs(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+                                      borderRadius: reactComponents.tokens.borderRadiusMedium,
+                                      height: "40px",
+                                      padding: "0 12px",
+                                      backgroundColor: reactComponents.tokens.colorNeutralBackground1
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 0.5 } }),
+                                      /* @__PURE__ */ jsxRuntime.jsxs(
+                                        "div",
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "12px"
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsxRuntime.jsx(
+                                              reactComponents.Button,
+                                              {
+                                                appearance: "transparent",
+                                                icon: /* @__PURE__ */ jsxRuntime.jsx(
+                                                  react.Icon,
+                                                  {
+                                                    icon: "fluent:subtract-circle-24-regular",
+                                                    style: {
+                                                      fontSize: "24px",
+                                                      color: reactComponents.tokens.colorNeutralForeground4
+                                                    }
+                                                  }
+                                                ),
+                                                size: "small",
+                                                onClick: () => {
+                                                  const currentVal = getValues(
+                                                    `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`
+                                                  ) || 0;
+                                                  const currentQty = Number(currentVal);
+                                                  if (currentQty > 0) {
+                                                    const newVal = currentQty - 1;
+                                                    setValue(
+                                                      `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
+                                                      newVal
+                                                    );
+                                                    onUpdateCargoQuantity(owner.id, cargo.id, newVal);
+                                                  }
+                                                },
+                                                style: { minWidth: "32px", padding: "0" }
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                              reactHookForm.Controller,
+                                              {
+                                                name: `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
+                                                control,
+                                                render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
+                                                  "input",
+                                                  {
+                                                    ...field,
+                                                    type: "number",
+                                                    style: {
+                                                      border: "none",
+                                                      width: "100%",
+                                                      textAlign: "center",
+                                                      outline: "none",
+                                                      backgroundColor: "transparent",
+                                                      color: reactComponents.tokens.colorNeutralForeground1,
+                                                      fontSize: reactComponents.tokens.fontSizeBase400,
+                                                      fontFamily: reactComponents.tokens.fontFamilyBase
+                                                    },
+                                                    onWheel: (e) => e.target.blur()
+                                                  }
+                                                )
+                                              }
+                                            ) }),
+                                            /* @__PURE__ */ jsxRuntime.jsx(
+                                              reactComponents.Button,
+                                              {
+                                                appearance: "transparent",
+                                                icon: /* @__PURE__ */ jsxRuntime.jsx(
+                                                  react.Icon,
+                                                  {
+                                                    icon: "fluent:add-circle-24-regular",
+                                                    style: {
+                                                      fontSize: "24px",
+                                                      color: reactComponents.tokens.colorBrandStroke1
+                                                    }
+                                                  }
+                                                ),
+                                                size: "small",
+                                                onClick: () => {
+                                                  const currentVal = getValues(
+                                                    `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`
+                                                  ) || 0;
+                                                  const currentQty = Number(currentVal);
+                                                  const newVal = currentQty + 1;
+                                                  setValue(
+                                                    `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
+                                                    newVal
+                                                  );
+                                                  onUpdateCargoQuantity(owner.id, cargo.id, newVal);
+                                                },
+                                                style: { minWidth: "32px", padding: "0" }
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        "div",
+                                        {
+                                          style: {
+                                            flex: 1,
+                                            textAlign: "left",
+                                            color: reactComponents.tokens.colorNeutralForeground1,
+                                            fontSize: reactComponents.tokens.fontSizeBase300,
+                                            paddingRight: "8px"
+                                          },
+                                          children: (() => {
+                                            const type = watch(
+                                              `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoType`
+                                            );
+                                            if (type === "karung") return "Karung";
+                                            if (type === "kg") return "Kg";
+                                            if (type === "ton") return "Ton";
+                                            if (type === "unit") return "Unit";
+                                            return "";
+                                          })()
+                                        }
+                                      )
+                                    ]
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 3, children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.label, children: "Harga" }),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  InputDynamic_default,
+                                  {
+                                    control,
+                                    name: `owners.${index}.price`,
+                                    placeholder: "Rp. 0",
+                                    disabled: true,
+                                    size: "large",
+                                    type: "text"
+                                  }
+                                )
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+                              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
+                                /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
+                                  "Data Jenis Industri",
+                                  " ",
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
+                                ] }),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  InputDynamic_default,
+                                  {
+                                    control,
+                                    name: `looseCargoOwners.${index}.cargo.${cargoIndex}.industryType`,
+                                    placeholder: "Pilih",
+                                    type: "select",
+                                    options: []
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  reactComponents.Caption1,
+                                  {
+                                    style: {
+                                      color: reactComponents.tokens.colorNeutralForeground3,
+                                      marginTop: "0.25rem"
+                                    },
+                                    children: 'Apabila jenis industri belum tersedia dapat memilih "Lainnya" dan silakan isi jenis muatannya.'
+                                  }
+                                )
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Col, { md: 6, children: [
+                                /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.label, children: [
+                                  "Kategori Muatan ",
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "red" }, children: "*" })
+                                ] }),
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  InputDynamic_default,
+                                  {
+                                    control,
+                                    name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoCategory`,
+                                    placeholder: "Pilih",
+                                    type: "select",
+                                    options: []
+                                  }
+                                ),
+                                /* @__PURE__ */ jsxRuntime.jsxs(
+                                  reactComponents.Caption1,
+                                  {
+                                    style: {
+                                      color: reactComponents.tokens.colorNeutralForeground3,
+                                      marginTop: "0.25rem"
+                                    },
+                                    children: [
+                                      "Pahami definisi, jenis dan contoh kategori muatan",
+                                      " ",
+                                      /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", className: styles.link, children: "disini" })
+                                    ]
+                                  }
+                                )
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: (owner.cargoItems?.length || 0) > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+                              reactComponents.Button,
+                              {
+                                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:delete-24-regular" }),
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  onDeleteCargo(owner.id, cargo.id);
+                                },
+                                onKeyDown: (e) => {
+                                  if (e.key === "Enter" || e.key === " ") {
+                                    e.stopPropagation();
+                                    onDeleteCargo(owner.id, cargo.id);
+                                  }
+                                },
+                                size: "medium",
+                                shape: "circular",
+                                style: {
+                                  border: `1px solid ${reactComponents.tokens.colorPaletteRedForeground1}`,
+                                  color: reactComponents.tokens.colorPaletteRedForeground1,
+                                  width: "100%"
+                                },
+                                children: "Hapus Muatan"
+                              }
+                            ) }) })
+                          ] }) })
+                        ]
+                      },
+                      cargo.id
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.Button,
+                  {
+                    appearance: "secondary",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:add-24-regular" }),
+                    shape: "circular",
+                    style: {
+                      borderColor: reactComponents.tokens.colorBrandStroke1,
+                      color: reactComponents.tokens.colorBrandBackground,
+                      marginTop: "1rem",
+                      width: "100%"
+                    },
+                    onClick: () => onAddCargo(owner.id),
+                    children: "Tambah Muatan"
+                  }
+                )
+              ] }) })
+            ] })
+          ] }) })
+        ]
+      },
+      owner.id
+    )) })
+  ] });
+};
+var useStyles25 = 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: "100px",
+    height: "50px",
+    borderRadius: "50%",
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
+    left: "-50px",
+    bottom: "-30px",
+    zIndex: 2,
+    boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  circularRight: {
+    position: "absolute",
+    width: "100px",
+    height: "50px",
+    borderRadius: "50%",
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
+    right: "-50px",
+    bottom: "-30px",
+    zIndex: 2,
+    boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
+  },
+  headerBookingDetail: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  shipInfo: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    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
+  },
+  secondaryButton: {
+    border: "1px solid " + reactComponents.tokens.colorBrandStroke1,
+    color: reactComponents.tokens.colorBrandBackground,
+    width: "100%"
+  }
+});
+var CardBookingTicket = ({
+  shipName = "KMP PORTLINK",
+  shipType = "Water Taxi",
+  shipTypeColor = "success",
+  departureDay = "Kamis, 25 Sep",
+  departureTime = "18:15",
+  departureLocation = "Merak, Banten",
+  arrivalDay = "Jumat, 26 Sep",
+  arrivalTime = "19:25",
+  arrivalLocation = "Bakauheni, Lampung",
+  duration = "1 jam 10 menit",
+  totalPrice,
+  reservationStep,
+  paymentStep,
+  onPriceDetailClick,
+  onNext,
+  onPrevious,
+  className
+}) => {
+  const styles = useStyles25();
+  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: "Booking Details" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerBookingDetail, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.shipInfo, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/assets/logo/asdp-default.svg", width: 81, height: 54, alt: "asdp" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: shipName })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Badge,
+          {
+            size: "extra-large",
+            appearance: "filled",
+            color: shipTypeColor,
+            iconPosition: "before",
+            shape: "rounded",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:info-24-regular" }),
+            children: shipType
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: "Rute Perjalanan" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketInfo, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: departureDay }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Stronger, { children: [
+            departureTime,
+            " WIB"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: departureLocation })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketDuration, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:vehicle-ship-24-regular" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption2, { children: [
+            "Estimasi ",
+            duration
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: arrivalDay }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1Stronger, { children: [
+            arrivalTime,
+            " WIB"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption2, { children: arrivalLocation })
+        ] })
+      ] }) }),
+      /* @__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: "Total Harga" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title3, { className: styles.priceText, children: [
+          "IDR ",
+          totalPrice
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Icon,
+          {
+            icon: "fluent:chevron-down-24-filled",
+            onClick: onPriceDetailClick,
+            style: { cursor: "pointer" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapButton, children: [
+        !(paymentStep === "pay") && /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "primary",
+            onClick: onNext,
+            shape: "circular",
+            size: "large",
+            style: { width: "100%" },
+            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-right-20-regular" }),
+            iconPosition: "after",
+            children: "Lanjutkan"
+          }
+        ),
+        ["addon", "meals", "review", "payment", "eticket"].includes(reservationStep) && !["pay"].includes(paymentStep) && /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "secondary",
+            onClick: onPrevious,
+            shape: "circular",
+            size: "large",
+            className: styles.secondaryButton,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-left-20-regular" }),
+            iconPosition: "before",
+            children: "Sebelumnya"
+          }
+        )
+      ] }),
+      paymentStep === "pay" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapButton, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "primary",
+            shape: "circular",
+            size: "large",
+            style: { width: "100%" },
+            onClick: onNext,
+            children: "Lihat Pemesanan"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "secondary",
+            shape: "circular",
+            size: "large",
+            className: styles.secondaryButton,
+            onClick: onPrevious,
+            children: "Ubah Metode Pembayaran"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+var useStyles26 = reactComponents.makeStyles({
+  faqSection: {
+    // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
+  },
+  faqCard: {
+    padding: "2rem",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4
+  },
+  accordionItem: {
+    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
+    padding: reactComponents.tokens.spacingVerticalS
+  },
+  accordionHeader: {
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightBold
+  }
+});
+var FAQ_ITEMS = [
+  {
+    value: "1",
+    question: "FAQ 1",
+    answer: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus saepe repudiandae dolore pariatur veniam! Aliquam nesciunt saepe, optio inventore fuga quam dignissimos possimus, dolorem alias, blanditiis veniam voluptatibus eaque ex?"
+  },
+  {
+    value: "2",
+    question: "FAQ 2",
+    answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolor consequatur, sit facere ex, ullam quos natus sapiente nihil cum libero velit, labore necessitatibus rem? Tenetur omnis tempora alias totam."
+  },
+  {
+    value: "3",
+    question: "FAQ 3",
+    answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae officiis modi quaerat eum illo, consectetur aperiam atque? Corrupti cupiditate sequi iusto reiciendis dignissimos, eius, nihil temporibus eaque delectus, saepe ullam!"
+  },
+  {
+    value: "4",
+    question: "FAQ 4",
+    answer: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint maiores debitis, earum animi dolorum unde asperiores accusantium nemo consectetur nulla reiciendis eveniet pariatur autem rerum adipisci sequi officia vero ipsam!"
+  }
+];
+var CardFAQ = ({ className }) => {
+  const styles = useStyles26();
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.faqCard, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: "FAQ" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { collapsible: true, children: FAQ_ITEMS.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: item.value, className: styles.accordionItem, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionHeader, { className: styles.accordionHeader, expandIconPosition: "end", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Icon,
+          {
+            icon: "fluent:question-circle-28-regular",
+            style: { marginRight: "5px" }
+          }
+        ),
+        " ",
+        item.question
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: item.answer })
+    ] }, item.value)) })
+  ] });
+};
+var useStyles27 = reactComponents.makeStyles({
+  card: {
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+    boxShadow: reactComponents.tokens.shadow4,
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalL, reactComponents.tokens.spacingHorizontalXXL),
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    zIndex: 3
+  },
+  gapRow: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: reactComponents.tokens.spacingVerticalXXL
+  },
+  titleDivider: {
+    display: "flex",
+    alignItems: "center",
+    width: "100%"
+  },
+  textTitle: {
+    fontWeight: reactComponents.tokens.fontWeightRegular,
+    whiteSpace: "nowrap",
+    marginRight: reactComponents.tokens.spacingHorizontalM
+  },
+  sizeDivider: {
+    flexGrow: 1
+  },
+  card1: {
+    display: "flex",
+    flexDirection: "column",
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingHorizontalL, reactComponents.tokens.spacingVerticalL),
+    rowGap: reactComponents.tokens.spacingHorizontalM
+  },
+  horizontalContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  itemFlexCard1: {
+    display: "flex",
+    columnGap: reactComponents.tokens.spacingHorizontalM,
+    alignItems: "center"
+  },
+  textContainerCard1: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  img: {
+    objectFit: "contain"
+  },
+  // Footer
+  footerContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%"
+  },
+  footerColRight: {
+    display: "flex",
+    alignItems: "center"
+  },
+  detailToogle: {
+    color: reactComponents.tokens.colorBrandForeground1
+  },
+  // Assurance Styles
+  badge: {
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalNone, reactComponents.tokens.spacingHorizontalL),
+    backgroundColor: reactComponents.tokens.colorPaletteBlueBackground2,
+    // Approximate for Shared_Dark_blue_Primary if not avail
+    color: reactComponents.tokens.colorNeutralForegroundOnBrand,
+    width: "fit-content"
+  },
+  breakdownContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalM
+  },
+  breakdownRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  // Meal Styles
+  mealListContainer: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: reactComponents.tokens.spacingVerticalXL,
+    marginTop: reactComponents.tokens.spacingVerticalM
+  },
+  mealItem: {
+    display: "flex",
+    alignItems: "flex-start",
+    columnGap: reactComponents.tokens.spacingHorizontalL,
+    gap: "12px",
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalS, 0)
+  },
+  mealImage: {
+    borderRadius: reactComponents.tokens.borderRadiusMedium,
+    objectFit: "cover",
+    flexShrink: 0
+  },
+  mealContent: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    rowGap: reactComponents.tokens.spacingVerticalXS
+  },
+  mealDescription: {
+    color: reactComponents.tokens.colorNeutralForeground3,
+    display: "-webkit-box",
+    WebkitLineClamp: "2",
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden"
+  },
+  mealPriceInfo: {
+    color: reactComponents.tokens.colorBrandBackground
+  },
+  mealActions: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+    rowGap: reactComponents.tokens.spacingVerticalM,
+    flexShrink: 0
+  },
+  qtySelector: {
+    display: "flex",
+    alignItems: "center",
+    columnGap: reactComponents.tokens.spacingHorizontalM
+  },
+  qtyButton: {
+    minWidth: "32px",
+    height: "32px",
+    ...reactComponents.shorthands.padding(0)
+  },
+  deleteMealButton: {
+    display: "flex",
+    alignItems: "center",
+    columnGap: reactComponents.tokens.spacingHorizontalS,
+    color: reactComponents.tokens.colorPaletteRedForeground1,
+    ...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.colorPaletteRedForeground1),
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalXS, reactComponents.tokens.spacingHorizontalS),
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    ":hover": {
+      backgroundColor: reactComponents.tokens.colorPaletteRedBackground1
+    }
+  },
+  totalContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: reactComponents.tokens.spacingVerticalL,
+    paddingTop: reactComponents.tokens.spacingVerticalM
+  }
+});
+var CardAddon = ({
+  title,
+  itemTitle,
+  itemSubtitle,
+  iconUrl,
+  description,
+  rightAction,
+  footerData,
+  assuranceData,
+  mealData,
+  children,
+  className
+}) => {
+  const styles = useStyles27();
+  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 }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.sizeDivider })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.card1, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.horizontalContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemFlexCard1, children: [
+          iconUrl && /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: iconUrl,
+              alt: "icon",
+              width: 81,
+              height: 56,
+              className: styles.img
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContainerCard1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: itemTitle }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: itemSubtitle })
+          ] })
+        ] }),
+        rightAction
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingRight: "20%" }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: description }) }),
+      footerData && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: footerData.actionType === "detail-link" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.footerContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1, { children: [
+          footerData.priceLabel,
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1Stronger, { children: [
+            "Rp",
+            footerData.price.toLocaleString("id-ID"),
+            footerData.priceUnit
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.footerColRight, children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "transparent",
+            size: "small",
+            style: {
+              color: reactComponents.tokens.colorBrandForeground1
+            },
+            onClick: footerData.onActionClick,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:chevron-down-12-regular" }),
+            iconPosition: "after",
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.detailToogle, children: footerData.actionLabel || "Lihat detail" })
+          }
+        ) })
+      ] }) }),
+      assuranceData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          reactComponents.Badge,
+          {
+            size: "large",
+            appearance: "filled",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-16-regular" }),
+            iconPosition: "after",
+            className: styles.badge,
+            style: { backgroundColor: "rgb(30, 57, 141)" },
+            children: [
+              assuranceData.totalPassenger,
+              " Asuransi Penumpang"
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.breakdownContainer, children: [
+          assuranceData.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.breakdownRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
+              item.label,
+              " (",
+              item.priceDetails,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
+              "Rp",
+              item.totalPrice.toLocaleString("id-ID")
+            ] })
+          ] }, idx)),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.breakdownRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: "Total Harga" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
+              "Rp",
+              assuranceData.totalPrice.toLocaleString("id-ID")
+            ] })
+          ] })
+        ] })
+      ] }),
+      mealData && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.mealListContainer, children: mealData.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mealItem, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: item.image,
+            alt: item.name,
+            width: 119,
+            height: 119,
+            className: styles.mealImage
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mealContent, children: [
+          /* @__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 ",
+            item.quantity,
+            " = Rp",
+            (item.price * item.quantity).toLocaleString("id-ID")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.mealActions, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.qtySelector, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "subtle",
+                shape: "circular",
+                className: styles.qtyButton,
+                disabled: item.quantity <= 1,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SubtractRegular, {}),
+                onClick: () => mealData.onUpdateQuantity(item.id, -1),
+                style: {
+                  border: `1px solid ${item.quantity <= 1 ? reactComponents.tokens.colorNeutralForegroundDisabled : reactComponents.tokens.colorBrandBackground}`,
+                  color: item.quantity <= 1 ? reactComponents.tokens.colorNeutralForegroundDisabled : reactComponents.tokens.colorBrandBackground
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.quantity }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "subtle",
+                className: styles.qtyButton,
+                shape: "circular",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}),
+                onClick: () => mealData.onUpdateQuantity(item.id, 1),
+                style: {
+                  border: `1px solid ${reactComponents.tokens.colorBrandBackground}`,
+                  color: reactComponents.tokens.colorBrandBackground
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactComponents.Button,
+            {
+              appearance: "subtle",
+              className: styles.deleteMealButton,
+              shape: "rounded",
+              onClick: () => mealData.onDelete(item.id),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DeleteRegular, { fontSize: 18 }),
+                "Hapus Pesanan"
+              ]
+            }
+          )
+        ] })
+      ] }, item.id)) }) }),
+      footerData && footerData.actionType === "primary-button" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__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")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "secondary",
+            shape: "circular",
+            onClick: footerData.onActionClick,
+            style: {
+              width: "100%",
+              borderColor: reactComponents.tokens.colorBrandStroke1,
+              color: reactComponents.tokens.colorBrandBackground
+            },
+            children: footerData.actionLabel
+          }
+        ) })
+      ] }),
+      children
+    ] })
+  ] }) });
+};
+var useStyles28 = reactComponents.makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalXXL
+  },
+  banner: {
+    position: "relative",
+    height: "240px",
+    width: "100%",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    color: "white",
+    textAlign: "center",
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalXXL)
+  },
+  bannerOverlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.4)",
+    zIndex: 1
+  },
+  bannerBg: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    objectFit: "cover",
+    zIndex: 0,
+    width: "100%",
+    height: "100%"
+  },
+  bannerContent: {
+    position: "relative",
+    zIndex: 2
+  },
+  bannerTitle: {
+    fontSize: "48px",
+    fontWeight: reactComponents.tokens.fontWeightBold,
+    marginBottom: reactComponents.tokens.spacingVerticalS,
+    color: "white"
+    // Ensure text is white on banner
+  },
+  bannerSubtitle: {
+    color: "white"
+  },
+  disclaimer: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalS,
+    backgroundColor: reactComponents.tokens.colorNeutralBackground2,
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalS, reactComponents.tokens.spacingHorizontalM),
+    ...reactComponents.shorthands.border("1px", "solid", reactComponents.tokens.colorNeutralStroke2),
+    borderRadius: reactComponents.tokens.borderRadiusMedium
+  },
+  sectionTitle: {
+    marginBottom: reactComponents.tokens.spacingVerticalL
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+    columnGap: reactComponents.tokens.spacingHorizontalL,
+    rowGap: reactComponents.tokens.spacingVerticalL
+  },
+  productCard: {
+    display: "flex",
+    flexDirection: "row",
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalM),
+    gap: reactComponents.tokens.spacingHorizontalM,
+    height: "100%"
+  },
+  productImage: {
+    width: "100px",
+    height: "100px",
+    borderRadius: reactComponents.tokens.borderRadiusMedium,
+    objectFit: "cover",
+    flexShrink: 0
+  },
+  productInfo: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+    flexGrow: 1
+  },
+  productDescription: {
+    color: reactComponents.tokens.colorNeutralForeground3,
+    display: "-webkit-box",
+    WebkitLineClamp: "2",
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    marginBottom: reactComponents.tokens.spacingVerticalS
+  },
+  productFooter: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: "auto"
+  },
+  price: {
+    color: "#D13438",
+    // Or use a token if available/consistent
+    fontWeight: reactComponents.tokens.fontWeightSemibold
+  },
+  quantitySelector: {
+    display: "flex",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingHorizontalS
+  },
+  addButton: {
+    // We'll use color="brand" or similar from Fluent v9 if possible, or fallback to custom styles
+    // ...shorthands.border('1px', 'solid', tokens.colorBrandStroke1),
+    // color: tokens.colorBrandForeground1,
+  },
+  // Replicating the custom add button style from original
+  customAddButton: {
+    border: "1px solid rgb(30, 57, 141)",
+    // tokensV2.lightModeColors.Brand_Stroke_1_Rest
+    color: "rgb(30, 57, 141)"
+    // tokensV2.lightModeColors.Brand_Foreground_1_Rest
+  }
+});
+var CardMealCatalog = ({
+  banner,
+  disclaimerText,
+  categories,
+  onAdd,
+  onUpdateQuantity,
+  className
+}) => {
+  const styles = useStyles28();
+  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 }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: banner.imageUrl,
+          alt: banner.title,
+          className: styles.bannerBg
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bannerContent, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Display, { className: styles.bannerTitle, children: banner.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title2, { className: styles.bannerSubtitle, children: banner.subtitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.disclaimer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactIcons.InfoRegular, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: disclaimerText })
+    ] }),
+    categories.map((cat, index) => /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { className: styles.sectionTitle, style: { textTransform: "capitalize" }, children: cat.category }),
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.grid, children: cat.list.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.productCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Image, { src: item.image, alt: item.name, className: styles.productImage }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.productInfo, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: item.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.productDescription, children: item.description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.productFooter, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: styles.price, children: [
+              "Rp",
+              item.price.toLocaleString("id-ID")
+            ] }),
+            item.quantity > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.quantitySelector, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.Button,
+                {
+                  size: "small",
+                  shape: "circular",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SubtractRegular, {}),
+                  onClick: () => onUpdateQuantity(item.id, -1)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: item.quantity }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.Button,
+                {
+                  size: "small",
+                  shape: "circular",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.AddRegular, {}),
+                  onClick: () => onUpdateQuantity(item.id, 1)
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                size: "small",
+                shape: "rounded",
+                className: styles.customAddButton,
+                onClick: () => onAdd(item),
+                children: "Tambah"
+              }
+            )
+          ] })
+        ] })
+      ] }, item.id)) })
+    ] }, index))
+  ] });
+};
+var useStyles29 = reactComponents.makeStyles({
+  card: {
+    padding: "1.5rem",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4,
+    zIndex: 3
+  },
+  headerContainer: {
+    display: "flex",
+    alignItems: "center",
+    marginBottom: "1rem",
+    gap: "1rem"
+  },
+  headerTitle: {
+    whiteSpace: "nowrap",
+    fontWeight: reactComponents.tokens.fontWeightSemibold
+  },
+  headerLine: {
+    height: "1px",
+    flexGrow: 1,
+    backgroundColor: reactComponents.tokens.colorNeutralStroke2
+  },
+  contentContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalM
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  defaultLabel: {
+    color: reactComponents.tokens.colorNeutralForeground2
+  },
+  defaultValue: {
+    // color: tokens.colorNeutralForegroundDisabled, // In ferizy: tokensV2.lightModeColors.Neutral_Foreground_Disabled_Rest
+    color: "#bdbdbd",
+    // Approximate fallback or use token if available in ferryui context
+    textAlign: "right"
+  }
+});
+var CardReview = ({
+  title,
+  items,
+  children,
+  className,
+  headerAction
+}) => {
+  const styles = useStyles29();
+  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("div", { className: styles.headerLine }),
+      headerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { children: headerAction })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.contentContainer, children: [
+      items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.row} ${item.className || ""}`, children: [
+        typeof item.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: `${styles.defaultLabel} ${item.labelClassName || ""}`, children: item.label }) : (
+          // Clone element to append className if it's a valid React element
+          React5__default.default.isValidElement(item.label) ? React5__default.default.cloneElement(item.label, {
+            className: `${styles.defaultLabel} ${item.labelClassName || ""}${item.label.props.className ? " " + item.label.props.className : ""}`
+          }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.defaultLabel} ${item.labelClassName || ""}`, children: item.label })
+        ),
+        typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: `${styles.defaultValue} ${item.valueClassName || ""}`, children: item.value }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.defaultValue} ${item.valueClassName || ""}`, children: item.value })
+      ] }, index)),
+      children
+    ] })
+  ] });
+};
+var getBadgeConfig2 = (ticketClass) => {
+  const normalizedClass = ticketClass?.toUpperCase();
+  switch (normalizedClass) {
+    case "EKONOMI":
+    case "ECONOMY":
+      return {
+        color: "#A74109",
+        icon: "/assets/images/class/shield_badge_ekonomi.svg"
+      };
+    case "BISNIS":
+    case "BUSINESS":
+      return {
+        color: "#859599",
+        icon: "/assets/images/class/ribbon_badge_bisnis.svg"
+      };
+    case "EKSEKUTIF":
+    case "EXECUTIVE":
+      return {
+        color: "#C19C00",
+        icon: "/assets/images/class/crown_badge_eksekutif.svg"
+      };
+    default:
+      return {
+        color: reactComponents.tokens.colorNeutralBackground3,
+        icon: ""
+      };
+  }
+};
+var useStyles30 = reactComponents.makeStyles({
+  card: {
+    padding: "1.5rem",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4,
+    zIndex: 3
+  },
+  headerContainer: {
+    display: "flex",
+    alignItems: "center",
+    marginBottom: "1rem",
+    gap: "1rem"
+  },
+  headerTitle: {
+    whiteSpace: "nowrap",
+    fontWeight: reactComponents.tokens.fontWeightSemibold
+  },
+  headerLine: {
+    height: "1px",
+    flexGrow: 1,
+    backgroundColor: reactComponents.tokens.colorNeutralStroke2
+  },
+  contentContainer: {
+    display: "flex",
+    flexDirection: "column"
+  },
+  passengerItem: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalS,
+    paddingBottom: reactComponents.tokens.spacingVerticalL,
+    paddingTop: reactComponents.tokens.spacingVerticalM,
+    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
+    ":last-child": {
+      borderBottom: "none",
+      paddingBottom: 0
+    }
+    // Matches styles.passengerItem in Review.tsx
+  },
+  itemHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: reactComponents.tokens.spacingVerticalS
+  },
+  name: {
+    color: "#00B8D4",
+    // Cyan color from design
+    fontSize: reactComponents.tokens.fontSizeBase400
+  },
+  // Badge Styles
+  badgeContainer: {
+    display: "flex",
+    alignItems: "center",
+    position: "relative"
+  },
+  badgeContent: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0.25rem 0.75rem 0.25rem 1.5rem",
+    // Extra left padding for the icon overlap
+    borderRadius: "0 4px 4px 0",
+    borderTopRightRadius: "9999px",
+    borderBottomRightRadius: "9999px",
+    color: "white",
+    fontSize: reactComponents.tokens.fontSizeBase200,
+    fontWeight: reactComponents.tokens.fontWeightMedium,
+    marginLeft: "-14px",
+    // Pull the text container under the icon
+    minHeight: "24px"
+  },
+  badgeIcon: {
+    width: "28px",
+    height: "32px",
+    zIndex: 1,
+    filter: "drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1))"
+  },
+  fields: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: reactComponents.tokens.spacingHorizontalL
+  },
+  inputBox: {
+    border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
+    borderRadius: reactComponents.tokens.borderRadiusMedium,
+    padding: `${reactComponents.tokens.spacingVerticalS} ${reactComponents.tokens.spacingHorizontalM}`,
+    display: "flex",
+    alignItems: "center",
+    height: "32px"
+  }
+});
+var CardReviewPassenger = ({
+  title = "Penumpang",
+  passengers,
+  className
+}) => {
+  const styles = useStyles30();
+  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("div", { className: styles.headerLine })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.contentContainer, children: passengers.map((passenger, index) => {
+      const badgeConfig = getBadgeConfig2(passenger.serviceClass);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerItem, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemHeader, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.name, children: passenger.name }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.badgeContainer, children: [
+            badgeConfig.icon && /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Image,
+              {
+                src: badgeConfig.icon,
+                alt: passenger.ticketClass,
+                className: styles.badgeIcon,
+                height: 28,
+                width: 24
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: styles.badgeContent,
+                style: { backgroundColor: badgeConfig.color },
+                children: passenger.ticketClass
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fields, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Nomor ID", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.inputBox, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: passenger.identityNumber }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Field,
+            {
+              label: passenger.ageLabel,
+              size: "small",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.inputBox, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: passenger.ageValue }) })
+            }
+          )
+        ] })
+      ] }, passenger.id || index);
+    }) })
+  ] });
+};
+var useStyles31 = reactComponents.makeStyles({
+  list: {
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    counterReset: "list-counter"
+  },
+  listItem: {
+    counterIncrement: "list-counter",
+    display: "flex",
+    marginBottom: reactComponents.tokens.spacingVerticalS,
+    "&::before": {
+      content: 'counter(list-counter) "."',
+      marginRight: reactComponents.tokens.spacingHorizontalS,
+      fontWeight: reactComponents.tokens.fontWeightRegular
+    }
+  }
+});
+var PriceDetailsTerms = () => {
+  const styles = useStyles31();
+  const linkColor = reactComponents.tokens.colorBrandBackground;
+  const bookingTerms = [
+    "Transaksi booking akan dibatalkan secara otomatis apabila Anda tidak menyelesaikan pembayaran pada periode waktu yang telah ditentukan.",
+    "Setelah pembyaran berhasil, dikumen E-Tiket dapat di unduh melailui E-Mail atau menu \u201CPesanan Saya\u201D di Web Reservation atau Mobile Application Ferizy.",
+    "Dokumen E-Tiket wajib ditunjukan saat melakukan proses Masuk Pelabuhan (Check-In)",
+    "Anda sudah dapat Masuk Pelabuhan (Check-In) mulai dari 2 (dua) jam sebelum jadwal masukpelabuhan yang Anda pilih.",
+    "Tiket akan hangus (expired) apabila Anda belum Masuk Pelabuhan (Check-In) hingga melewati batas waktu jadwal Masuk Pelabuhan yang Anda pilih."
+  ];
+  const agreementTerms = [
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Link, { href: "/terms-and-conditions", style: { color: linkColor }, children: "Syarat & Ketentuan" }),
+      "\xA0Ferizy."
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "Ketentuan persyaratan menyeberang sesuai dengan\xA0",
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Link, { href: "/surat-edaran-satgas-covid-19", style: { color: linkColor }, children: "Surat Edaran Satgas Covid-19 Nomor 23 Tahun 2002." })
+    ] }),
+    "Bahwa apabila saya didapati tidak memenuhi ketentuan persyaratan menyeberang pada butir 2 (dua) diatas yang mengakibatkan saya terlambat atau tidaj 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."
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles.list, children: bookingTerms.map((term, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.listItem, children: term }, index)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
+      "Dengan menekan tombol \u201CLanjutkan Pembayaran\u201D, maka saya telah membaca dan menyetujuii :",
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles.list, children: agreementTerms.map((term, index) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.listItem, children: term }, index)) })
+    ] })
+  ] });
+};
+var useStyles32 = reactComponents.makeStyles({
+  card: {
+    padding: "1.5rem",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    boxShadow: reactComponents.tokens.shadow4,
+    zIndex: 3
+  },
+  headerContainer: {
+    display: "flex",
+    alignItems: "center",
+    marginBottom: "1rem",
+    gap: "1rem"
+  },
+  headerTitle: {
+    whiteSpace: "nowrap",
+    fontWeight: reactComponents.tokens.fontWeightSemibold
+  },
+  headerLine: {
+    height: "1px",
+    flexGrow: 1,
+    backgroundColor: reactComponents.tokens.colorNeutralStroke2
+  },
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalM
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  label: {
+    color: reactComponents.tokens.colorNeutralForeground2
+  },
+  value: {
+    // Standard value color - using token or fallback
+    color: "#bdbdbd",
+    textAlign: "right"
+  },
+  textCritical: {
+    color: reactComponents.tokens.colorPaletteRedBackground3
+  },
+  textMuted: {
+    color: reactComponents.tokens.colorNeutralForegroundDisabled
+  },
+  subSection: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalS,
+    marginTop: reactComponents.tokens.spacingVerticalS
+  },
+  totalRow: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: reactComponents.tokens.spacingVerticalM,
+    color: reactComponents.tokens.colorPaletteRedBackground3
+  },
+  totalLabel: {
+    // Standard color for total label if needed
+  },
+  totalValue: {
+    // Standard color for total value if needed
+  },
+  description: {
+    color: reactComponents.tokens.colorNeutralForeground4,
+    marginTop: "-8px"
+  }
+});
+var CardPriceDetails = ({
+  title = "Rincian Harga",
+  sections,
+  total
+}) => {
+  const styles = useStyles32();
+  const getVariantClass = (variant) => {
+    switch (variant) {
+      case "danger":
+        return styles.textCritical;
+      case "muted":
+        return styles.textMuted;
+      default:
+        return "";
+    }
+  };
+  const renderItem = (item, key) => {
+    const variantClass = getVariantClass(item.variant);
+    const isTaxLike = item.variant === "danger";
+    return /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.row, children: [
+        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: [
+          "Rp. ",
+          item.price.toLocaleString("id-ID")
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { className: reactComponents.mergeClasses(styles.value, variantClass), children: [
+          item.isRedeem ? "-" : "Rp. ",
+          item.price.toLocaleString("id-ID")
+        ] })
+      ] }),
+      item.description && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { className: styles.description, children: item.description })
+    ] }, key);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerLine })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
+      sections.map((section, index) => {
+        if (section.title) {
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.subSection, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: section.title }),
+            section.detail.map((item, i) => renderItem(item, i))
+          ] }, index);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React5__default.default.Fragment, { children: section.detail.map((item, i) => renderItem(item, i)) }, index);
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.totalRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.totalLabel, children: "Total Pembayaran" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle1, { className: styles.totalValue, children: [
+          "Rp. ",
+          total.toLocaleString("id-ID")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(PriceDetailsTerms, {})
+    ] })
+  ] });
+};
+var useStyles33 = reactComponents.makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    rowGap: reactComponents.tokens.spacingHorizontalXXL
+  },
+  dividerContainer: {
+    marginBottom: reactComponents.tokens.spacingHorizontalXXL
+  },
+  title: {
+    paddingLeft: reactComponents.tokens.spacingHorizontalSNudge,
+    paddingRight: reactComponents.tokens.spacingHorizontalSNudge
+  },
+  itemContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingHorizontalXXL,
+    width: "100%"
+  },
+  optionContainer: {
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%",
+    cursor: "pointer",
+    alignItems: "center"
+  },
+  codeImage: {
+    display: "flex",
+    gap: reactComponents.tokens.spacingHorizontalL,
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center"
+  },
+  optionLabel: {
+    color: reactComponents.tokens.colorNeutralForeground2
+  },
+  image: {
+    width: "40px",
+    height: "40px",
+    objectFit: "contain"
+  },
+  card: {
+    position: "relative",
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingHorizontalXL, reactComponents.tokens.spacingVerticalXXL),
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+    zIndex: 3
+  }
+});
+var CardPaymentMethodList = ({
+  methods,
+  selectedValue,
+  onSelect
+}) => {
+  const styles = useStyles33();
+  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: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.AccordionHeader,
+        {
+          expandIconPosition: "end",
+          className: styles.title,
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: category.title || category.value })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.itemContainer, children: category.options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: styles.optionContainer,
+          onClick: () => onSelect(option.value),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.codeImage, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: option.image,
+                  alt: option.label,
+                  className: styles.image
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { className: styles.optionLabel, children: option.label })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Radio,
+              {
+                checked: selectedValue === option.value,
+                onChange: () => onSelect(option.value),
+                value: option.value,
+                name: "payment-method"
+              }
+            )
+          ]
+        },
+        option.value
+      )) }) })
+    ] }) })
+  ] }, category.value || index)) }) });
+};
+var useStyles34 = reactComponents.makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%"
+  },
+  titleContainer: {
+    marginBottom: reactComponents.tokens.spacingVerticalM
+  },
+  title: {
+    color: reactComponents.tokens.colorNeutralForeground2
+    // Neutral_Stroke_Accessible_Rest based on Review.tsx usually
+  },
+  list: {
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    counterReset: "guide-counter"
+  },
+  listItem: {
+    counterIncrement: "guide-counter",
+    display: "flex",
+    marginBottom: reactComponents.tokens.spacingVerticalS,
+    "&::before": {
+      content: 'counter(guide-counter) "."',
+      marginRight: reactComponents.tokens.spacingHorizontalS,
+      fontWeight: reactComponents.tokens.fontWeightRegular
+    }
+  }
+});
+var CardPaymentGuide = ({
+  title = "Cara Pembayaran",
+  guides,
+  className
+}) => {
+  const styles = useStyles34();
+  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: title }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { collapsible: true, multiple: true, children: guides.map((guide, index) => /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: guide.value || String(index), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionHeader, { expandIconPosition: "end", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: guide.title }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles.list, children: guide.steps.map((step, stepIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles.listItem, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: step }) }, stepIndex)) }) })
+    ] }, guide.value || index)) })
+  ] });
+};
+var useStyles35 = reactComponents.makeStyles({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingHorizontalXXL,
+    width: "100%"
+  },
+  headerRow: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: reactComponents.tokens.spacingHorizontalXXL,
+    textAlign: "center"
+  },
+  expiryTitle: {
+    fontSize: reactComponents.tokens.fontSizeBase500,
+    // 19px approx/mapping
+    color: reactComponents.tokens.colorPaletteRedBackground3
+    // Foundation_Danger_error
+  },
+  infoCard: {
+    border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    // 12px -> XLarge/Large depending on token map
+    padding: reactComponents.tokens.spacingHorizontalXXL,
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalXXL
+  },
+  codeCard: {
+    borderRadius: reactComponents.tokens.borderRadiusMedium,
+    padding: reactComponents.tokens.spacingHorizontalL,
+    backgroundColor: reactComponents.tokens.colorNeutralBackground3,
+    // Neutral_Background_2_Rest
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingHorizontalL,
+    alignItems: "center"
+  },
+  bankRow: {
+    display: "flex",
+    gap: reactComponents.tokens.spacingHorizontalM,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  vaRow: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingHorizontalXXXL,
+    alignItems: "center"
+  },
+  input: {
+    backgroundColor: reactComponents.tokens.colorNeutralBackground3
+  },
+  checkStatusButton: {
+    width: "100%",
+    border: `1px solid ${reactComponents.tokens.colorBrandBackground}`,
+    color: reactComponents.tokens.colorBrandBackground
+  },
+  card: {
+    position: "relative",
+    ...reactComponents.shorthands.padding(
+      reactComponents.tokens.spacingHorizontalXL,
+      reactComponents.tokens.spacingHorizontalXXL
+    ),
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+    boxShadow: reactComponents.tokens.shadow4,
+    zIndex: 3
+  }
+});
+var CardPaymentInfo = ({
+  expiryDate,
+  bank,
+  virtualAccount,
+  totalAmount,
+  guides,
+  onCopyVA,
+  onCheckStatus
+}) => {
+  const styles = useStyles35();
+  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: "Kode virtual akun berlaku sampai" }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title2, { className: styles.expiryTitle, children: expiryDate })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.infoCard, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.codeCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bankRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("img", { src: bank.icon, alt: bank.name, width: 40, height: 40 }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: bank.name })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.vaRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title1, { children: virtualAccount }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              appearance: "primary",
+              size: "large",
+              shape: "circular",
+              onClick: onCopyVA,
+              children: "Salin Kode"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Field,
+        {
+          size: "large",
+          label: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { style: { color: reactComponents.tokens.colorNeutralForeground1 }, children: "Total Pembayaran" }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Input,
+            {
+              disabled: true,
+              value: `Rp. ${totalAmount.toLocaleString("id-ID")}`,
+              className: styles.input
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: reactComponents.tokens.spacingVerticalM }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { style: { color: reactComponents.tokens.colorNeutralForeground2 }, children: "Klik tombol dibawah ini jika sudah melakukan pembayaran" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Button,
+        {
+          appearance: "secondary",
+          size: "large",
+          shape: "circular",
+          className: styles.checkStatusButton,
+          onClick: onCheckStatus,
+          children: "Cek Status Pembayaran"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CardPaymentGuide, { guides })
+  ] }) });
+};
+var useStyles36 = reactComponents.makeStyles({
+  activeCard: {
+    width: "100%",
+    // padding: tokens.spacingHorizontalNone, // default
+    color: reactComponents.tokens.colorNeutralStrokeAccessible
+  },
+  colGap: {
+    gap: "58px"
+    // approx spacing['580']
+  },
+  cardInfo: {
+    border: `${reactComponents.tokens.strokeWidthThin} solid ${reactComponents.tokens.colorNeutralStroke1}`,
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+    borderRadius: reactComponents.tokens.borderRadiusXLarge,
+    // borderRadius[120] -> XLarge approx
+    padding: reactComponents.tokens.spacingHorizontalXXL
+  },
+  rowGap: {
+    rowGap: "22px"
+    // spacing[220]
+  },
+  gapdetail: {
+    rowGap: reactComponents.tokens.spacingVerticalL
+  },
+  itemDetail: {
+    display: "flex",
+    justifyContent: "space-between"
+  },
+  divider: {
+    "::before": {
+      ...reactComponents.shorthands.borderColor(reactComponents.tokens.colorBrandBackground)
+      // brandColors[80]
+    }
+  },
+  titleDivider: {
+    display: "flex",
+    gap: "18px"
+    // spacing[180]
+  },
+  centerContent: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column"
+  }
+});
+var CardStatusOrder = ({
+  bookingCode,
+  departureDate,
+  departureTime,
+  arrivalDate,
+  arrivalTime,
+  origin,
+  destination,
+  duration = "-",
+  vehicleClass,
+  serviceType,
+  vehicleNumber,
+  shipType,
+  statusLabel = "Sudah Dibayar",
+  statusIcon,
+  statusColor = "success",
+  illustrationUrl = "/assets/images/illustrations/ticket.svg",
+  title = "Pembayaran berhasil",
+  description = "Tiket Anda aktif dan siap digunakan.",
+  onClickViewTicket,
+  className
+}) => {
+  const styles = useStyles36();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.activeCard} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, className: styles.colGap, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", nogutter: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: illustrationUrl,
+          alt: "E-Ticket",
+          width: 406,
+          height: 266
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", justify: "center", align: "center", nogutter: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: title }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: description }) })
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.cardInfo, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactGridSystem.Row,
+      {
+        direction: "column",
+        justify: "center",
+        align: "center",
+        nogutter: true,
+        className: styles.rowGap,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleDivider, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: "Detail Pemesanan" }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { style: { width: 0 } })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { justify: "center", align: "center", nogutter: true, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: "Status" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Badge,
+              {
+                color: statusColor,
+                size: "extra-large",
+                appearance: "filled",
+                shape: "rounded",
+                icon: statusIcon || /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:checkmark-circle-20-regular" }),
+                children: statusLabel
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { direction: "column", nogutter: true, className: styles.gapdetail, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Kode Booking" }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: bookingCode })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Jadwal Masuk Pelabuhan" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1, { children: [
+                departureDate,
+                ", ",
+                departureTime
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Rute" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption1, { children: [
+                origin,
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:arrow-right-20-regular" }),
+                " ",
+                destination
+              ] })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Jenis Pengguna Jasa" }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: vehicleClass })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.itemDetail, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Stronger, { children: "Layanan" }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: shipType || serviceType })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              appearance: "primary",
+              size: "large",
+              style: { width: "100%" },
+              shape: "circular",
+              onClick: onClickViewTicket,
+              children: "Lihat E-Tiket"
+            }
+          ) })
+        ]
+      }
+    ) }) })
+  ] }) });
+};
 
 exports.BackgroundTicketCard = BackgroundTicketCard_default;
 exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
+exports.CardAddon = CardAddon;
 exports.CardBanner = CardBanner;
+exports.CardBookingTicket = CardBookingTicket;
+exports.CardFAQ = CardFAQ;
+exports.CardMealCatalog = CardMealCatalog;
+exports.CardOrdererInfo = CardOrdererInfo;
+exports.CardPassengerList = CardPassengerList;
+exports.CardPaymentGuide = CardPaymentGuide;
+exports.CardPaymentInfo = CardPaymentInfo;
+exports.CardPaymentMethodList = CardPaymentMethodList;
+exports.CardPriceDetails = CardPriceDetails;
 exports.CardPromo = CardPromo;
+exports.CardReview = CardReview;
+exports.CardReviewPassenger = CardReviewPassenger;
 exports.CardServiceMenu = CardServiceMenu;
+exports.CardStatusOrder = CardStatusOrder;
 exports.CardTicket = CardTicket;
 exports.CardTicketSearch = CardTicketSearch;
 exports.CardTicketSearchDefaultLabels = DEFAULT_LABELS;
 exports.CardTicketSearchSummary = CardTicketSearchSummary;
 exports.CardTicketSearchSummaryDefaultLabels = DEFAULT_LABELS2;
+exports.CardVehicleDetail = CardVehicleDetail;
+exports.CardVehicleOwnerForm = CardVehicleOwnerForm;
 exports.CarouselWithCustomNav = CarouselWithCustomNav;
 exports.DEFAULT_COUNTRY_CODES = DEFAULT_COUNTRY_CODES;
 exports.DEFAULT_DURATION_RANGE = DEFAULT_DURATION_RANGE;
@@ -6457,13 +9773,18 @@ exports.MODAL_PRESETS = MODAL_PRESETS;
 exports.ModalFilterTicket = ModalFilterTicket;
 exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS3;
 exports.ModalIllustration = ModalIllustration;
+exports.ModalListPassenger = ModalListPassenger;
+exports.ModalPassengerForm = ModalPassengerForm;
 exports.ModalSearchHarbor = ModalSearchHarbor;
 exports.ModalSearchTicket = ModalSearchTicket;
 exports.ModalSelectDate = ModalSelectDate;
 exports.ModalService = ModalService;
 exports.ModalTotalPassengers = ModalTotalPassengers;
 exports.ModalTypeOfService = ModalTypeOfService;
+exports.PriceDetailsTerms = PriceDetailsTerms;
 exports.SortMenu = SortMenu;
+exports.Stepper = Stepper;
+exports.getBadgeConfig = getBadgeConfig;
 exports.getModalPreset = getModalPreset;
 exports.getSortLabel = getSortLabel;
 //# sourceMappingURL=index.js.map