@asdp/ferryui 0.1.22-dev.9214 → 0.1.22-dev.9319

package/dist/index.js

@@ -494,7 +494,7 @@ var useStyles2 = reactComponents.makeStyles({
     display: "flex",
     gap: `${spacing2[360]}px`,
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "start",
     [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
       gap: reactComponents.tokens.spacingVerticalXS
     }
@@ -502,7 +502,7 @@ var useStyles2 = reactComponents.makeStyles({
   carouselContainerNoNav: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "start"
   },
   customCarouselNav: {
     display: "flex",
@@ -590,6 +590,29 @@ var useStyles2 = reactComponents.makeStyles({
         height: "10px"
       }
     }
+  },
+  singleIndicatorWrapper: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: reactComponents.tokens.spacingVerticalXXL,
+    ...reactComponents.shorthands.padding(reactComponents.tokens.spacingVerticalS, reactComponents.tokens.spacingVerticalM),
+    borderRadius: reactComponents.tokens.borderRadiusCircular
+  },
+  singleIndicatorDot: {
+    backgroundImage: "linear-gradient(to right,#00B3BD, #8DC63F)",
+    display: "inline-block",
+    width: "55px",
+    height: "16px",
+    borderRadius: reactComponents.tokens.borderRadiusCircular,
+    "@media (max-width: 768px)": {
+      width: "35px",
+      height: "13px"
+    },
+    "@media (max-width: 425px)": {
+      width: "25px",
+      height: "10px"
+    }
   }
 });
 var CarouselWithCustomNav = ({
@@ -615,6 +638,8 @@ var CarouselWithCustomNav = ({
 }) => {
   const styles = useStyles2();
   const [internalIndex, setInternalIndex] = React.useState(0);
+  const totalSlides = React__default.default.Children.count(children);
+  const isSingleSlide = totalSlides === 1;
   const labels = React__default.default.useMemo(
     () => ({
       ...DEFAULT_LABELS2[language],
@@ -623,20 +648,19 @@ var CarouselWithCustomNav = ({
     }),
     [language, customLabels, deprecatedAriaLabel]
   );
-  const activeIndex = controlledIndex !== void 0 ? controlledIndex : internalIndex;
+  const activeIndex = isSingleSlide ? 0 : controlledIndex !== void 0 ? controlledIndex : internalIndex;
   const handleIndexChange = React.useCallback(
     (index) => {
+      if (isSingleSlide) return;
       if (controlledIndex === void 0) {
         setInternalIndex(index);
       }
       onActiveIndexChange?.(index);
     },
-    [controlledIndex, onActiveIndexChange]
+    [controlledIndex, onActiveIndexChange, isSingleSlide]
   );
   React__default.default.useEffect(() => {
-    if (!autoPlay) return;
-    const totalSlides = React__default.default.Children.count(children);
-    if (totalSlides <= 1) return;
+    if (!autoPlay || isSingleSlide) return;
     const intervalId = setInterval(() => {
       let nextIndex = activeIndex + 1;
       if (nextIndex >= totalSlides) {
@@ -653,15 +677,16 @@ var CarouselWithCustomNav = ({
   }, [
     autoPlay,
     autoPlayInterval,
-    children,
+    totalSlides,
     circular,
     activeIndex,
     controlledIndex,
-    onActiveIndexChange
+    onActiveIndexChange,
+    isSingleSlide
   ]);
   const defaultAnnouncement = React.useCallback(
-    (index, totalSlides) => {
-      return labels.announcementTemplate.replace("{index}", (index + 1).toString()).replace("{total}", totalSlides.toString());
+    (index, totalSlides2) => {
+      return labels.announcementTemplate.replace("{index}", (index + 1).toString()).replace("{total}", totalSlides2.toString());
     },
     [labels.announcementTemplate]
   );
@@ -669,7 +694,7 @@ var CarouselWithCustomNav = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactComponents.Carousel,
     {
-      circular,
+      circular: isSingleSlide ? true : circular,
       draggable,
       align,
       className: reactComponents.mergeClasses(styles.carousel, className),
@@ -678,53 +703,73 @@ var CarouselWithCustomNav = ({
       activeIndex,
       onActiveIndexChange: (_, data) => handleIndexChange(data.index),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: showNavButtons ? styles.carouselContainer : styles.carouselContainerNoNav, children: [
-          showNavButtons && /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.CarouselButton,
-            {
-              navType: "prev",
-              "aria-label": labels.prevButtonAriaLabel,
-              className: styles.customeCarouselButton
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.CarouselViewport, { style: { overflow: "hidden", paddingBottom: "10px" }, children: [
-            showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Button,
-              {
-                icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DismissRegular, {}),
-                shape: "circular",
-                onClick: onCloseClick,
-                "aria-label": labels.closeButtonAriaLabel,
-                className: reactComponents.mergeClasses(
-                  styles.closeButton,
-                  showNavButtons ? styles.closeButtonWithNav : styles.closeButtonWithoutNav
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: showNavButtons ? styles.carouselContainer : styles.carouselContainerNoNav,
+            children: [
+              showNavButtons && !isSingleSlide && /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.CarouselButton,
+                {
+                  navType: "prev",
+                  "aria-label": labels.prevButtonAriaLabel,
+                  className: styles.customeCarouselButton
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.CarouselViewport, { style: { overflow: "hidden", paddingBottom: "10px" }, children: [
+                showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.Button,
+                  {
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DismissRegular, {}),
+                    shape: "circular",
+                    onClick: onCloseClick,
+                    "aria-label": labels.closeButtonAriaLabel,
+                    className: reactComponents.mergeClasses(
+                      styles.closeButton,
+                      showNavButtons ? styles.closeButtonWithNav : styles.closeButtonWithoutNav
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.CarouselSlider,
+                  {
+                    cardFocus,
+                    "aria-label": labels.carouselAriaLabel,
+                    children: isSingleSlide ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      children,
+                      children
+                    ] }) : children
+                  }
                 )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.CarouselSlider,
-              {
-                cardFocus,
-                "aria-label": labels.carouselAriaLabel,
-                children
-              }
-            )
-          ] }),
-          showNavButtons && /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.CarouselButton,
-            {
-              navType: "next",
-              "aria-label": labels.nextButtonAriaLabel,
-              className: styles.customeCarouselButton
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+              ] }),
+              showNavButtons && !isSingleSlide && /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.CarouselButton,
+                {
+                  navType: "next",
+                  "aria-label": labels.nextButtonAriaLabel,
+                  className: styles.customeCarouselButton
+                }
+              )
+            ]
+          }
+        ),
+        isSingleSlide ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles.singleIndicatorWrapper,
+            style: {
+              backgroundColor: darkNavBackground ? reactComponents.tokens.colorSubtleBackgroundInverted : reactComponents.tokens.colorSubtleBackground,
+              justifyContent: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.singleIndicatorDot })
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           reactComponents.CarouselNav,
           {
             style: {
               backgroundColor: darkNavBackground ? reactComponents.tokens.colorSubtleBackgroundInverted : reactComponents.tokens.colorSubtleBackground,
-              marginTop: reactComponents.tokens.spacingVerticalXXL
+              marginTop: reactComponents.tokens.spacingVerticalXXL,
+              justifyContent: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center"
             },
             appearance: "brand",
             className: styles.carouselNavButton,
@@ -2477,7 +2522,9 @@ var DatePickerInput = React.forwardRef(
     contentBefore,
     onClick,
     style,
+    min,
     max,
+    disablePastDates = false,
     ...restProps
   }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
@@ -2506,6 +2553,12 @@ var DatePickerInput = React.forwardRef(
       }
       onClick?.(e);
     };
+    const getStartOfToday = () => {
+      const today = /* @__PURE__ */ new Date();
+      today.setHours(0, 0, 0, 0);
+      return today;
+    };
+    const minDate = min ? new Date(min) : disablePastDates ? getStartOfToday() : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactComponents.Popover,
       {
@@ -2556,6 +2609,7 @@ var DatePickerInput = React.forwardRef(
               showGoToToday: true,
               highlightSelectedMonth: true,
               showMonthPickerAsOverlay: false,
+              minDate,
               maxDate: max ? new Date(max) : void 0
             }
           ) })
@@ -3138,7 +3192,8 @@ var InputDynamic = ({
   onChange,
   language = "id",
   labels,
-  menuPlacement
+  menuPlacement,
+  disablePastDates = false
 }) => {
   const styles = useStyles8();
   const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
@@ -3350,7 +3405,8 @@ var InputDynamic = ({
     const getPhoneAppearanceClass = () => {
       if (appearance === "underline") return styles.phoneInputUnderline;
       if (appearance === "filled-darker") return styles.phoneInputFilledDarker;
-      if (appearance === "filled-lighter") return styles.phoneInputFilledLighter;
+      if (appearance === "filled-lighter")
+        return styles.phoneInputFilledLighter;
       return "";
     };
     const phoneAppearanceClass = getPhoneAppearanceClass();
@@ -3383,9 +3439,21 @@ var InputDynamic = ({
     const fontSizeValuePhoneInput = size == "small" ? reactComponents.tokens.fontSizeBase200 : size === "medium" ? reactComponents.tokens.fontSizeBase300 : reactComponents.tokens.fontSizeBase400;
     const phoneInputSizeStyle = {
       fontSize: fontSizeValuePhoneInput,
-      ...size === "small" && { minHeight: "26px", height: "26px", padding: `0 ${reactComponents.tokens.spacingHorizontalS} 0 48px` },
-      ...size === "medium" && { minHeight: "34px", height: "34px", padding: `${reactComponents.tokens.spacingVerticalXXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXXS} 48px` },
-      ...size === "large" && { minHeight: "40px", height: "40px", padding: `${reactComponents.tokens.spacingVerticalXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXS} 48px` }
+      ...size === "small" && {
+        minHeight: "26px",
+        height: "26px",
+        padding: `0 ${reactComponents.tokens.spacingHorizontalS} 0 48px`
+      },
+      ...size === "medium" && {
+        minHeight: "34px",
+        height: "34px",
+        padding: `${reactComponents.tokens.spacingVerticalXXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXXS} 48px`
+      },
+      ...size === "large" && {
+        minHeight: "40px",
+        height: "40px",
+        padding: `${reactComponents.tokens.spacingVerticalXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXS} 48px`
+      }
     };
     if (type === "emailOrPhone") {
       updateEmailOrPhoneType(field.value);
@@ -3422,10 +3490,15 @@ var InputDynamic = ({
         "div",
         {
           ref: emailOrPhoneInputRef,
-          className: reactComponents.mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
+          className: reactComponents.mergeClasses(
+            styles.phoneInputWrapper,
+            phoneAppearanceClass,
+            error ? styles.phoneInputError : ""
+          ),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             PhoneInput,
             {
+              countryCodeEditable: false,
               inputStyle: phoneInputSizeStyle,
               country: defaultCountry.toLowerCase(),
               value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
@@ -3525,10 +3598,15 @@ var InputDynamic = ({
         "div",
         {
           ref: phoneInputRef,
-          className: reactComponents.mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
+          className: reactComponents.mergeClasses(
+            styles.phoneInputWrapper,
+            phoneAppearanceClass,
+            error ? styles.phoneInputError : ""
+          ),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             PhoneInput,
             {
+              countryCodeEditable: false,
               country: defaultCountry.toLowerCase(),
               value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
               onChange: (value, data) => {
@@ -3660,7 +3738,9 @@ var InputDynamic = ({
               autoCapitalize: "off",
               spellCheck: "false"
             },
-            value: (options && options.length > 0 ? options : COUNTRIES).find((country) => country.value === field.value) || null,
+            value: (options && options.length > 0 ? options : COUNTRIES).find(
+              (country) => country.value === field.value
+            ) || null,
             onChange: (selectedOption) => {
               field.onChange(selectedOption ? selectedOption.value : "");
               if (onChange) {
@@ -3718,12 +3798,16 @@ var InputDynamic = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: reactComponents.mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
+            className: reactComponents.mergeClasses(
+              styles.phoneInputWrapper,
+              phoneAppearanceClass,
+              error ? styles.phoneInputError : ""
+            ),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               PhoneInput,
               {
+                countryCodeEditable: false,
                 ...phoneInputProps,
-                onlyCountries,
                 country: defaultCountry.toLowerCase(),
                 disabled,
                 disableSearchIcon: true,
@@ -3778,7 +3862,9 @@ var InputDynamic = ({
             size,
             onClick,
             style: inputStyle,
-            max: max ? String(max) : void 0
+            max: max ? String(max) : void 0,
+            min: min ? String(min) : void 0,
+            disablePastDates
           }
         );
       }
@@ -4085,7 +4171,9 @@ var InputDynamic = ({
         if (!stringValue) return true;
         const detectedType = detectEmailOrPhoneStrict(stringValue);
         if (detectedType === "email") {
-          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(stringValue)) {
+          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(
+            stringValue
+          )) {
             return mergedLabels.invalidEmailFormatError;
           }
         } else if (detectedType === "phone") {
@@ -4114,7 +4202,9 @@ var InputDynamic = ({
         if (!stringValue) return true;
         const detectedType = detectIdentityType(stringValue);
         if (detectedType === "email") {
-          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(stringValue)) {
+          if (!/^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$/i.test(
+            stringValue
+          )) {
             return mergedLabels.invalidEmailFormatError;
           }
         } else if (detectedType === "phone") {
@@ -4161,29 +4251,40 @@ var InputDynamic = ({
               }
             ),
             renderInput(field, error?.message),
-            helperText && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "4px", marginTop: "4px" }, children: [
-              helperIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                react.Icon,
-                {
-                  icon: helperIcon,
-                  style: {
-                    color: reactComponents.tokens.colorNeutralForeground3,
-                    flexShrink: 0
-                  },
-                  width: 16,
-                  height: 16
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                reactComponents.Text,
-                {
-                  size: 200,
-                  style: { textAlign: "left" },
-                  className: styles.helperText,
-                  children: helperText
-                }
-              )
-            ] })
+            helperText && !error && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "flex-start",
+                  gap: "4px",
+                  marginTop: "4px"
+                },
+                children: [
+                  helperIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                    react.Icon,
+                    {
+                      icon: helperIcon,
+                      style: {
+                        color: reactComponents.tokens.colorNeutralForeground3,
+                        flexShrink: 0
+                      },
+                      width: 16,
+                      height: 16
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Text,
+                    {
+                      size: 200,
+                      style: { textAlign: "left" },
+                      className: styles.helperText,
+                      children: helperText
+                    }
+                  )
+                ]
+              }
+            )
           ]
         }
       )
@@ -5298,7 +5399,8 @@ var DEFAULT_LABELS10 = {
     loadingData: "Memuat data...",
     harborNotFound: "Pelabuhan tidak ditemukan",
     closeAriaLabel: "Tutup",
-    popularHarborHeader: "Pelabuhan Populer"
+    popularHarborHeader: "Pelabuhan Populer",
+    favoriteHeader: "Favorit"
   },
   en: {
     title: "Select Harbor",
@@ -5309,7 +5411,8 @@ var DEFAULT_LABELS10 = {
     loadingData: "Loading data...",
     harborNotFound: "Harbor not found",
     closeAriaLabel: "Close",
-    popularHarborHeader: "Popular Harbor"
+    popularHarborHeader: "Popular Harbor",
+    favoriteHeader: "Favorite"
   }
 };
 var useStyles11 = reactComponents.makeStyles({
@@ -5378,10 +5481,20 @@ var useStyles11 = reactComponents.makeStyles({
     display: "flex",
     gap: "1rem",
     marginBottom: "1rem",
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    marginTop: "1rem"
   },
   circularButton: {
-    borderRadius: reactComponents.tokens.borderRadiusCircular
+    borderRadius: reactComponents.tokens.borderRadius3XLarge,
+    border: `1px solid ${reactComponents.tokens.colorBrandBackground}`,
+    backgroundColor: brandColors2["140"],
+    gap: "5px"
+  },
+  buttonContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
   },
   headerRow: {
     display: "flex",
@@ -5395,11 +5508,13 @@ var useStyles11 = reactComponents.makeStyles({
   historyItem: {
     display: "flex",
     justifyContent: "space-between",
+    alignItems: "center",
     marginTop: "1rem",
     marginBottom: "1rem"
   },
   iconMargin: {
-    marginRight: "0.5rem"
+    marginRight: "1rem"
+    // fontSize: tokens.fontSizeBase400
   },
   cursorPointer: {
     cursor: "pointer"
@@ -5416,14 +5531,51 @@ var useStyles11 = reactComponents.makeStyles({
   },
   harborItem: {
     display: "flex",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   emptyState: {
     textAlign: "center",
     padding: "32px",
     color: reactComponents.tokens.colorNeutralForeground3
+  },
+  listContent: {
+    cursor: "pointer",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
   }
 });
+var HarborListItem = ({
+  harbor,
+  onSelect,
+  trailingIcon,
+  showDivider,
+  containerClassName
+}) => {
+  const styles = useStyles11();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.listContent, onClick: () => onSelect(harbor), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.Icon,
+          {
+            icon: "fluent:vehicle-ship-24-regular",
+            fontSize: 20,
+            className: styles.iconMargin
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "left" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: harbor.portName }),
+          /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: harbor.branchName })
+        ] })
+      ] }),
+      trailingIcon
+    ] }),
+    showDivider && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
+  ] });
+};
 var ModalSearchHarbor = ({
   language = "id",
   labels,
@@ -5442,6 +5594,7 @@ var ModalSearchHarbor = ({
   onAddLastSearched,
   onRemoveLastSearched,
   onClearLastSearched,
+  onClearFavorite,
   popularHarbors,
   showButtonFavorite = true
 }) => {
@@ -5500,119 +5653,169 @@ var ModalSearchHarbor = ({
               size: "large"
             }
           ) }),
-          favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.Button,
-            {
-              onClick: () => handleSelect(harbor),
-              size: "medium",
-              appearance: "outline",
-              iconPosition: "before",
-              className: styles.circularButton,
-              icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ribbon-20-filled" }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: harbor.portName + ", " + harbor.branchName })
-            },
-            harbor.portId
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.resultList, children: [
-            lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.lastSearchedHeader }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.favoriteHeader }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   reactComponents.Caption1,
                   {
-                    className: `${styles.dangerText} ${styles.cursorPointer}`,
-                    onClick: onClearLastSearched,
+                    className: reactComponents.mergeClasses(
+                      styles.dangerText,
+                      styles.cursorPointer
+                    ),
+                    onClick: onClearFavorite,
                     children: mergedLabels.clearAllButton
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.historyItem, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    style: { cursor: "pointer" },
-                    onClick: () => handleSelect(harbor),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        react.Icon,
-                        {
-                          icon: "fluent:vehicle-ship-24-regular",
-                          className: styles.iconMargin
-                        }
-                      ),
-                      harbor.portName + ", " + harbor.branchName
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  react.Icon,
-                  {
-                    onClick: () => onRemoveLastSearched(harbor),
-                    icon: "fluent:dismiss-24-regular",
-                    color: reactComponents.tokens.colorStatusDangerForeground1,
-                    className: styles.cursorPointer
-                  }
-                )
-              ] }, harbor.portId)) }),
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
-            ] }),
-            popularHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.historyItem, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
+              favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsxs(
+                reactComponents.Button,
                 {
-                  style: { cursor: "pointer" },
                   onClick: () => handleSelect(harbor),
+                  size: "medium",
+                  appearance: "subtle",
+                  iconPosition: "before",
+                  className: styles.circularButton,
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(
+                    react.Icon,
+                    {
+                      icon: "fluent:vehicle-ship-20-regular",
+                      fontSize: 20,
+                      color: reactComponents.tokens.colorBrandBackground
+                    }
+                  ),
                   children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.buttonContent, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: harbor.portName }),
+                      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: harbor.branchName })
+                    ] }),
                     /* @__PURE__ */ jsxRuntime.jsx(
                       react.Icon,
                       {
-                        icon: "fluent:vehicle-ship-24-regular",
-                        className: styles.iconMargin
+                        icon: "fluent:star-24-filled",
+                        fontSize: 20,
+                        color: reactComponents.tokens.colorBrandBackground,
+                        style: { marginLeft: 5 }
                       }
-                    ),
-                    harbor.portName + ", " + harbor.branchName
+                    )
                   ]
-                }
-              ) }, harbor.portId)) }),
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
+                },
+                harbor.portId
+              )) })
+            ] }),
+            lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.lastSearchedHeader }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.Caption1,
+                  {
+                    className: reactComponents.mergeClasses(
+                      styles.dangerText,
+                      styles.cursorPointer
+                    ),
+                    onClick: onClearLastSearched,
+                    children: mergedLabels.clearAllButton
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
+                HarborListItem,
+                {
+                  harbor,
+                  onSelect: handleSelect,
+                  containerClassName: styles.historyItem,
+                  trailingIcon: /* @__PURE__ */ jsxRuntime.jsx(
+                    react.Icon,
+                    {
+                      onClick: () => onRemoveLastSearched(harbor),
+                      icon: "fluent:dismiss-24-regular",
+                      fontSize: 20,
+                      className: styles.cursorPointer
+                    }
+                  ),
+                  showDivider: true
+                },
+                harbor.portId
+              )) })
+            ] }),
+            popularHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
+                HarborListItem,
+                {
+                  harbor,
+                  onSelect: handleSelect,
+                  containerClassName: styles.historyItem,
+                  showDivider: true
+                },
+                harbor.portId
+              )) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [1, 2, 3, 4, 5].map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Skeleton, { style: { display: "flex", alignItems: "center", gap: "0.5rem", width: "70%" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }),
-                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "100%", height: "20px", borderRadius: "4px" } })
-              ] }),
-              showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }) })
-            ] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
+                reactComponents.Skeleton,
                 {
-                  className: styles.cursorPointer,
-                  onClick: () => handleSelect(harbor),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    width: "70%"
+                  },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      react.Icon,
+                      reactComponents.SkeletonItem,
                       {
-                        icon: "fluent:vehicle-ship-24-regular",
-                        className: styles.iconMargin
+                        style: {
+                          width: "24px",
+                          height: "24px",
+                          borderRadius: "4px"
+                        }
                       }
                     ),
-                    harbor.portName + ", " + harbor.branchName
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      reactComponents.SkeletonItem,
+                      {
+                        style: {
+                          width: "100%",
+                          height: "20px",
+                          borderRadius: "4px"
+                        }
+                      }
+                    )
                   ]
                 }
               ),
-              showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(
-                react.Icon,
+              showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactComponents.SkeletonItem,
                 {
-                  icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
-                  color: reactComponents.tokens.colorBrandBackground,
-                  className: styles.cursorPointer,
-                  onClick: () => onToggleFavorite(harbor)
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                    borderRadius: "4px"
+                  }
                 }
-              )
-            ] }, index)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
+              ) })
+            ] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              HarborListItem,
+              {
+                harbor,
+                onSelect: handleSelect,
+                containerClassName: styles.harborItem,
+                trailingIcon: showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(
+                  react.Icon,
+                  {
+                    icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
+                    color: reactComponents.tokens.colorBrandBackground,
+                    className: styles.cursorPointer,
+                    onClick: () => onToggleFavorite(harbor)
+                  }
+                ),
+                showDivider: index !== harbors.length - 1
+              },
+              harbor.portId || index
+            )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
           ] })
         ] })
       ] }) })
@@ -8712,12 +8915,34 @@ var ModalListPassenger = ({
                 }
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
-                  passenger.fullName,
-                  " (",
-                  passenger.ageLabel,
-                  " )"
-                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
+                    passenger.fullName,
+                    " ",
+                    passenger.isAccountOwner && /* @__PURE__ */ jsxRuntime.jsx(
+                      reactComponents.Caption2Strong,
+                      {
+                        style: {
+                          backgroundColor: "#F3F9FD",
+                          border: `1px solid #A9D3F2`,
+                          borderRadius: "1em",
+                          display: "inline-block",
+                          color: "#0078D4",
+                          padding: ".4em .9em"
+                        },
+                        children: "Pemilik Akun"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Body1, { children: [
+                    passenger.ageLabel,
+                    " \xB7 ",
+                    passenger.identityTypeCode,
+                    " ",
+                    passenger.identityId
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   reactComponents.Button,
                   {
@@ -8775,8 +9000,10 @@ var DEFAULT_LABELS22 = {
     idTypePlaceholder: "Pilih",
     idNumberLabel: "Nomor Identitas",
     idNumberPlaceholder: "Masukkan Nomor Identitas",
-    ageLabel: "Usia",
-    agePlaceholder: "Masukkan Usia",
+    age: "Usia",
+    agePlaceholder: "0 Tahun 0 Bulan",
+    yearLabel: "tahun",
+    monthLabel: "bulan",
     dateLabel: "Tanggal Lahir",
     datePlaceholder: "Masukkan Tanggal Lahir",
     cityLabel: "Kota Kabupaten",
@@ -8821,6 +9048,7 @@ var DEFAULT_LABELS22 = {
       minAge: "Usia minimal 1 tahun",
       maxAge: "Usia maksimal 150 tahun",
       requiredDate: "Tanggal lahir harus diisi",
+      birthDateFuture: "Tanggal lahir tidak boleh di masa depan",
       requiredCity: "Kota/Kabupaten harus diisi",
       requiredCountry: "Negara harus diisi",
       requiredPhoneNumber: "Nomor telepon harus diisi",
@@ -8838,8 +9066,10 @@ var DEFAULT_LABELS22 = {
     idTypePlaceholder: "Select",
     idNumberLabel: "Identity Number",
     idNumberPlaceholder: "Enter Identity Number",
-    ageLabel: "Age",
-    agePlaceholder: "Enter Age",
+    age: "Age",
+    agePlaceholder: "0 Year 0 Month",
+    yearLabel: "year(s)",
+    monthLabel: "month(s)",
     dateLabel: "Date of Birth",
     datePlaceholder: "Enter Date of Birth",
     cityLabel: "City/Regency",
@@ -8884,6 +9114,7 @@ var DEFAULT_LABELS22 = {
       minAge: "Age must be at least 1 year",
       maxAge: "Age must be at most 150 years",
       requiredDate: "Date of birth is required",
+      birthDateFuture: "Date of birth cannot be in the future",
       requiredCity: "City/Regency is required",
       requiredCountry: "Country is required",
       requiredPhoneNumber: "Phone number is required",
@@ -8892,24 +9123,23 @@ var DEFAULT_LABELS22 = {
     }
   }
 };
-var TYPE_OPTIONS = [
-  {
-    label: "KTP",
-    value: "ktp"
-  },
-  {
-    label: "SIM",
-    value: "sim"
-  },
-  {
-    label: "Paspor",
-    value: "paspor"
-  },
-  {
-    label: "Lainnya",
-    value: "lainnya"
+
+// src/utils/date.ts
+var calculateAge = (birthDate) => {
+  const today = /* @__PURE__ */ new Date();
+  const birth = new Date(birthDate);
+  if (isNaN(birth.getTime())) return { years: 0, months: 0 };
+  let years = today.getFullYear() - birth.getFullYear();
+  let months = today.getMonth() - birth.getMonth();
+  if (today.getDate() < birth.getDate()) {
+    months--;
   }
-];
+  if (months < 0) {
+    years--;
+    months += 12;
+  }
+  return { years: Math.max(0, years), months: Math.max(0, months) };
+};
 var useStyles23 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -9075,16 +9305,18 @@ var useStyles23 = reactComponents.makeStyles({
   }
 });
 var ModalPassengerForm = ({
+  defaultValues,
   language = "id",
   labels,
   open,
+  onChange,
   onClose,
-  title,
   onSubmit,
-  defaultValues,
-  isAdultForm = true,
+  title,
   titleOptions,
+  countryOptions,
   cityOptions,
+  idTypeOptions,
   ticketClassOptions,
   onScanComplete
 }) => {
@@ -9095,7 +9327,6 @@ var ModalPassengerForm = ({
     ...labels?.errors
   };
   const displayTitle = title || mergedLabels.title;
-  const idTypes = ["KTP", "SIM", "Paspor"];
   const [isModalSelectIdTypeOpen, setIsModalSelectIdTypeOpen] = React.useState(false);
   const [isModalScanOpen, setIsModalScanOpen] = React.useState(false);
   const [scannedIdType, setScannedIdType] = React.useState(null);
@@ -9107,20 +9338,46 @@ var ModalPassengerForm = ({
   const { control, handleSubmit, reset, watch, setValue } = reactHookForm.useForm({
     defaultValues
   });
-  const idType = watch("idType");
-  const watchPassportCountry = watch("country");
+  watch();
+  const watchIdentityTypeId = watch("identityTypeId");
+  const watchPassportCountryId = watch("countryId");
+  const watchBirthdate = watch("birthdate");
+  React.useEffect(() => {
+    const subscription = watch((value, { name, type }) => {
+      console.log("Changed field:", name);
+      console.log("Change type:", type);
+      onChange(value);
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, onChange]);
   React.useEffect(() => {
     reset(defaultValues);
   }, [defaultValues, reset]);
   React.useEffect(() => {
-    if (idType) {
-      setValue("idNumber", "");
-    }
-  }, [idType, watchPassportCountry, setValue]);
-  const stopCamera = React.useCallback(() => {
-    if (stream) {
-      stream.getTracks().forEach((track) => track.stop());
-      setStream(null);
+    if (watchIdentityTypeId) {
+      setValue("identityId", "");
+    }
+  }, [watchIdentityTypeId, watchPassportCountryId, setValue]);
+  React.useEffect(() => {
+    if (watchBirthdate) {
+      const { years, months } = calculateAge(watchBirthdate);
+      setValue(
+        "age",
+        `${years} ${mergedLabels.yearLabel} ${months} ${mergedLabels.monthLabel}`
+      );
+    } else {
+      setValue("age", "");
+    }
+  }, [
+    watchBirthdate,
+    setValue,
+    mergedLabels.yearLabel,
+    mergedLabels.monthLabel
+  ]);
+  const stopCamera = React.useCallback(() => {
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop());
+      setStream(null);
     }
     if (videoRef.current) {
       videoRef.current.pause();
@@ -9152,7 +9409,7 @@ var ModalPassengerForm = ({
         ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
         setCapturedImage(canvas.toDataURL("image/jpeg"));
         stopCamera();
-        if (scannedIdType === "KTP") {
+        if (scannedIdType === IDENTITY_TYPE.KTP) {
           setScanStatus("reading");
         } else {
           setScanStatus("error");
@@ -9225,14 +9482,14 @@ var ModalPassengerForm = ({
         }
         stopCamera();
         if (name) {
-          setValue("name", name, {
+          setValue("fullName", name, {
             shouldValidate: true,
             shouldDirty: true
           });
         }
         if (idNumber && scannedIdType) {
-          setValue("idType", scannedIdType.toLowerCase());
-          setValue("idNumber", idNumber);
+          setValue("identityTypeId", scannedIdType.toString());
+          setValue("identityId", idNumber);
         }
         onScanComplete?.({ name, idNumber, city });
         setScanStatus("success");
@@ -9314,22 +9571,22 @@ var ModalPassengerForm = ({
             children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.selectIdTypeTitle })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.idTypeList, children: idTypes.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.idTypeList, children: idTypeOptions.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: styles.idTypeItem,
-            onClick: () => handleSelectIdType(type),
+            onClick: () => handleSelectIdType(Number(type.value)),
             onKeyDown: (e) => {
               if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
-                handleSelectIdType(type);
+                handleSelectIdType(Number(type.value));
               }
             },
             role: "button",
             tabIndex: 0,
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.idTypeText, children: type })
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.idTypeText, children: type.label })
           },
-          type
+          type.value
         )) }) })
       ] }) })
     }
@@ -9596,7 +9853,7 @@ var ModalPassengerForm = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 InputDynamic_default,
                 {
-                  name: "title",
+                  name: "titleId",
                   control,
                   type: "select",
                   label: mergedLabels.titleLabel,
@@ -9612,7 +9869,7 @@ var ModalPassengerForm = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 InputDynamic_default,
                 {
-                  name: "name",
+                  name: "fullName",
                   control,
                   type: "text",
                   label: mergedLabels.nameLabel,
@@ -9631,22 +9888,23 @@ var ModalPassengerForm = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 InputDynamic_default,
                 {
-                  name: "age",
+                  name: "birthdate",
                   control,
-                  type: "number",
-                  label: mergedLabels.ageLabel,
-                  placeholder: mergedLabels.agePlaceholder,
+                  type: "date",
+                  label: mergedLabels.dateLabel,
+                  placeholder: mergedLabels.datePlaceholder,
                   size: "large",
                   required: true,
                   validationRules: {
-                    required: mergedErrors.requiredAge,
-                    min: {
-                      value: 1,
-                      message: mergedErrors.minAge
-                    },
-                    max: {
-                      value: 150,
-                      message: mergedErrors.maxAge
+                    required: mergedErrors.requiredDate,
+                    validate: (value) => {
+                      const selectedDate = new Date(value);
+                      const today = /* @__PURE__ */ new Date();
+                      today.setHours(0, 0, 0, 0);
+                      if (selectedDate > today) {
+                        return mergedErrors.birthDateFuture;
+                      }
+                      return true;
                     }
                   }
                 }
@@ -9654,110 +9912,107 @@ var ModalPassengerForm = ({
               /* @__PURE__ */ jsxRuntime.jsx(
                 InputDynamic_default,
                 {
-                  name: "cityId",
+                  name: "age",
+                  control,
+                  type: "text",
+                  disabled: true,
+                  label: mergedLabels.age,
+                  placeholder: mergedLabels.agePlaceholder,
+                  size: "large"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                InputDynamic_default,
+                {
+                  name: "identityTypeId",
                   control,
                   type: "select",
-                  label: mergedLabels.cityLabel,
-                  options: cityOptions,
-                  placeholder: mergedLabels.cityPlaceholder,
+                  label: mergedLabels.idTypeLabel,
+                  placeholder: mergedLabels.idTypePlaceholder,
+                  options: idTypeOptions,
                   size: "large",
                   required: true,
                   validationRules: {
-                    required: mergedErrors.requiredCity
+                    required: mergedErrors.requiredIdType
                   }
                 }
               ),
-              isAdultForm ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
+              watchIdentityTypeId ? watchIdentityTypeId === "lainnya" ? /* @__PURE__ */ jsxRuntime.jsx(
+                InputDynamic_default,
+                {
+                  name: "identityId",
+                  control,
+                  type: "date",
+                  label: mergedLabels.idTypeOtherLabel,
+                  placeholder: mergedLabels.idTypeOtherPlaceholder,
+                  size: "large",
+                  required: true,
+                  max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
+                  validationRules: {
+                    required: mergedErrors.requiredDate
+                  }
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                watchIdentityTypeId === IDENTITY_TYPE.PSP.toString() && /* @__PURE__ */ jsxRuntime.jsx(
                   InputDynamic_default,
                   {
-                    name: "idType",
+                    menuPlacement: "top",
+                    name: "countryId",
                     control,
+                    options: countryOptions,
                     type: "select",
-                    label: mergedLabels.idTypeLabel,
-                    placeholder: mergedLabels.idTypePlaceholder,
-                    options: TYPE_OPTIONS,
+                    label: mergedLabels.countryLabel,
+                    placeholder: mergedLabels.countryPlaceholder,
                     size: "large",
                     required: true,
                     validationRules: {
-                      required: mergedErrors.requiredIdType
+                      required: mergedErrors.requiredCountry
                     }
                   }
                 ),
-                idType ? idType === "lainnya" ? /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   InputDynamic_default,
                   {
-                    name: "idNumber",
+                    name: "identityId",
                     control,
-                    type: "date",
-                    label: mergedLabels.idTypeOtherLabel,
-                    placeholder: mergedLabels.idTypeOtherPlaceholder,
+                    type: watchIdentityTypeId === IDENTITY_TYPE.KTP.toString() ? "number" : "text",
+                    label: mergedLabels.idNumberLabel,
+                    placeholder: mergedLabels.idNumberPlaceholder,
                     size: "large",
                     required: true,
-                    max: (/* @__PURE__ */ new Date()).toISOString().split("T")[0],
                     validationRules: {
-                      required: mergedErrors.requiredDate
-                    }
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  idType === "paspor" && /* @__PURE__ */ jsxRuntime.jsx(
-                    InputDynamic_default,
-                    {
-                      menuPlacement: "top",
-                      name: "country",
-                      control,
-                      type: "country",
-                      label: mergedLabels.countryLabel,
-                      placeholder: mergedLabels.countryPlaceholder,
-                      size: "large",
-                      required: true,
-                      validationRules: {
-                        required: mergedErrors.requiredCountry
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    InputDynamic_default,
-                    {
-                      name: "idNumber",
-                      control,
-                      type: idType === "ktp" ? "number" : "text",
-                      label: mergedLabels.idNumberLabel,
-                      placeholder: mergedLabels.idNumberPlaceholder,
-                      size: "large",
-                      required: true,
-                      validationRules: {
-                        required: mergedErrors.requiredIdNumber,
-                        minLength: {
-                          value: 6,
-                          message: mergedErrors.minLengthIdNumber
-                        }
+                      required: mergedErrors.requiredIdNumber,
+                      minLength: {
+                        value: 6,
+                        message: mergedErrors.minLengthIdNumber
                       }
                     }
-                  )
-                ] }) : null
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
                 InputDynamic_default,
                 {
-                  name: "date",
+                  name: "regencyId",
                   control,
-                  type: "date",
-                  label: mergedLabels.dateLabel,
-                  placeholder: mergedLabels.datePlaceholder,
+                  type: "select",
+                  label: mergedLabels.cityLabel,
+                  options: cityOptions,
+                  placeholder: mergedLabels.cityPlaceholder,
                   size: "large",
                   required: true,
                   validationRules: {
-                    required: mergedErrors.requiredDate
+                    required: mergedErrors.requiredCity
                   }
                 }
-              ) }),
+              ),
               /* @__PURE__ */ jsxRuntime.jsx("br", {}),
               /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
               /* @__PURE__ */ jsxRuntime.jsx("br", {}),
               /* @__PURE__ */ jsxRuntime.jsx(
                 InputDynamic_default,
                 {
-                  name: "ticketClass",
+                  name: "passengerClassId",
                   control,
                   type: "radiobutton",
                   label: mergedLabels.ticketClassLabel,
@@ -11093,11 +11348,16 @@ var DEFAULT_LABELS26 = {
     estimationPrefix: "Estimasi",
     totalPriceLabel: "Total Harga",
     nextButton: "Lanjutkan",
+    cancelButton: "Batalkan Pesanan",
     previousButton: "Sebelumnya",
     viewBookingButton: "Lihat Pemesanan",
     changePaymentButton: "Ubah Metode Pembayaran",
     timezoneLabel: "WIB",
-    currencySymbol: "IDR"
+    currencySymbol: "IDR",
+    cancelDialogTitle: "Buang perubahan?",
+    cancelDialogBody: "Perubahan belum disimpan dan akan hilang jika Anda melanjutkan.",
+    cancelDialogConfirm: "Buang Perubahan",
+    cancelDialogDismiss: "Batal"
   },
   en: {
     bookingDetails: "Booking Details",
@@ -11105,11 +11365,16 @@ var DEFAULT_LABELS26 = {
     estimationPrefix: "Estimation",
     totalPriceLabel: "Total Price",
     nextButton: "Continue",
+    cancelButton: "Cancel Booking",
     previousButton: "Previous",
     viewBookingButton: "View Booking",
     changePaymentButton: "Change Payment Method",
     timezoneLabel: "WIB",
-    currencySymbol: "IDR"
+    currencySymbol: "IDR",
+    cancelDialogTitle: "Discard changes?",
+    cancelDialogBody: "Changes have not been saved and will be lost if you continue.",
+    cancelDialogConfirm: "Discard Changes",
+    cancelDialogDismiss: "Cancel"
   }
 };
 var useStyles27 = reactComponents.makeStyles({
@@ -11221,6 +11486,35 @@ var useStyles27 = reactComponents.makeStyles({
     border: "1px solid " + reactComponents.tokens.colorBrandStroke1,
     color: reactComponents.tokens.colorBrandBackground,
     width: "100%"
+  },
+  cancelButton: {
+    border: "1px solid #D13438",
+    color: "#D13438",
+    width: "100%"
+  },
+  dialogDismissButton: {
+    border: "1px solid " + reactComponents.tokens.colorBrandStroke1,
+    color: reactComponents.tokens.colorBrandBackground,
+    borderRadius: reactComponents.tokens.borderRadiusCircular,
+    marginTop: "1em",
+    marginBottom: ".5em",
+    width: "100%"
+  },
+  dialogConfirmButton: {
+    backgroundColor: "#D13438",
+    color: reactComponents.tokens.colorNeutralForegroundOnBrand,
+    width: "100%",
+    borderRadius: reactComponents.tokens.borderRadiusCircular,
+    border: "none",
+    "&:hover": {
+      backgroundColor: "#b02020"
+    }
+  },
+  dialogActions: {
+    display: "flex",
+    flexDirection: "column",
+    gap: reactComponents.tokens.spacingVerticalS,
+    width: "100%"
   }
 });
 var CardBookingTicket = ({
@@ -11233,6 +11527,7 @@ var CardBookingTicket = ({
   departureDay,
   departureTime,
   departureLocation,
+  disableNextButton,
   arrivalDay,
   arrivalTime,
   arrivalLocation,
@@ -11241,12 +11536,14 @@ var CardBookingTicket = ({
   reservationStep,
   paymentStep,
   onPriceDetailClick,
+  onCancel,
   onNext,
   onPrevious,
   className
 }) => {
   const styles = useStyles27();
   const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
+  const [cancelDialogOpen, setCancelDialogOpen] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailTop, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.bookingDetails }),
@@ -11330,6 +11627,7 @@ var CardBookingTicket = ({
           reactComponents.Button,
           {
             appearance: "primary",
+            disabled: disableNextButton,
             onClick: onNext,
             shape: "circular",
             size: "large",
@@ -11353,31 +11651,93 @@ var CardBookingTicket = ({
             iconPosition: "before",
             children: mergedLabels.previousButton
           }
-        )
-      ] }),
-      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: mergedLabels.viewBookingButton
-          }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Button,
-          {
-            appearance: "secondary",
-            shape: "circular",
-            size: "large",
-            className: styles.secondaryButton,
-            onClick: onPrevious,
-            children: mergedLabels.changePaymentButton
-          }
-        )
+        paymentStep === "pay" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              appearance: "primary",
+              disabled: disableNextButton,
+              onClick: onNext,
+              shape: "circular",
+              size: "large",
+              style: { width: "100%" },
+              children: mergedLabels.viewBookingButton
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              appearance: "secondary",
+              shape: "circular",
+              size: "large",
+              className: styles.secondaryButton,
+              onClick: onPrevious,
+              children: mergedLabels.changePaymentButton
+            }
+          )
+        ] }),
+        reservationStep === "manifest" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              appearance: "outline",
+              onClick: () => setCancelDialogOpen(true),
+              shape: "circular",
+              size: "large",
+              className: styles.cancelButton,
+              iconPosition: "before",
+              children: mergedLabels.cancelButton
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Dialog,
+            {
+              open: cancelDialogOpen,
+              onOpenChange: (_, data) => setCancelDialogOpen(data.open),
+              children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { style: { maxWidth: "479px", width: "479px" }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.DialogTitle,
+                  {
+                    action: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { action: "close", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      reactComponents.Button,
+                      {
+                        appearance: "subtle",
+                        "aria-label": "close",
+                        icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" })
+                      }
+                    ) }),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.cancelDialogTitle })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.cancelDialogBody }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Button,
+                    {
+                      className: styles.dialogDismissButton,
+                      size: "large",
+                      onClick: () => setCancelDialogOpen(false),
+                      children: mergedLabels.cancelDialogDismiss
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Button,
+                    {
+                      className: styles.dialogConfirmButton,
+                      size: "large",
+                      onClick: () => {
+                        setCancelDialogOpen(false);
+                        onCancel();
+                      },
+                      children: mergedLabels.cancelDialogConfirm
+                    }
+                  )
+                ] })
+              ] }) })
+            }
+          )
+        ] })
       ] })
     ] })
   ] }) });
@@ -13483,14 +13843,16 @@ var DEFAULT_LABELS38 = {
     maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
     sizeLabel: "Ukuran",
     preview: "Pratinjau",
-    requiredError: "wajib diisi"
+    requiredError: "wajib diisi",
+    downloadTemplateDocument: "Download Template Dokumen"
   },
   en: {
     placeholder: "Tap to select a file",
     maxSizeWarning: "Maximum {maxSize}MB per file in PDF, JPG, JPEG, PNG format.",
     sizeLabel: "Size",
     preview: "Preview",
-    requiredError: "is required"
+    requiredError: "is required",
+    downloadTemplateDocument: "Download Template Document"
   }
 };
 var useStyles40 = reactComponents.makeStyles({
@@ -13630,7 +13992,8 @@ var FileUpload = React__default.default.forwardRef(
     disabled = false,
     language = "id",
     labels: customLabels,
-    pdfIcon
+    pdfIcon,
+    downloadTemplateDocument = false
   }, ref) => {
     const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
     const styles = uploadStyles();
@@ -13715,6 +14078,20 @@ var FileUpload = React__default.default.forwardRef(
         }
       }
     };
+    const handleDownloadFile = (e, file) => {
+      e.stopPropagation();
+      if (!(file instanceof File)) {
+        return;
+      }
+      const fileUrl = URL.createObjectURL(file);
+      const link = document.createElement("a");
+      link.href = fileUrl;
+      link.download = file.name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(fileUrl);
+    };
     const getContainerStyle = (hasFile, hasError) => {
       if (disabled && hasFile) return styles.containerDisabled;
       if (hasError) return styles.containerError;
@@ -13824,202 +14201,216 @@ var FileUpload = React__default.default.forwardRef(
               }
             );
           }
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            reactComponents.Field,
-            {
-              ref,
-              required,
-              label: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: label }),
-              className: styles.fieldContainer,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  reactGridSystem.Container,
-                  {
-                    className: getContainerStyle(!!displayFile, !!(error && (value || currentFile)) || !!sizeError),
-                    onClick: handleClick,
-                    onDrop: (e) => handleDrop(e, onChange),
-                    onDragOver: handleDragOver,
-                    onDragLeave: handleDragLeave,
-                    fluid: true,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        reactGridSystem.Row,
-                        {
-                          nogutter: true,
-                          style: { gap: reactComponents.tokens.spacingVerticalL },
-                          justify: "center",
-                          align: "center",
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.uploadIcon, children: sizeError ? /* @__PURE__ */ jsxRuntime.jsx(
-                              react.Icon,
-                              {
-                                icon: "fluent:warning-32-regular",
-                                style: {
-                                  color: reactComponents.tokens.colorStatusWarningBackground3,
-                                  maxWidth: "32px",
-                                  width: "32px",
-                                  maxHeight: "32px",
-                                  height: "32px"
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              reactComponents.Field,
+              {
+                ref,
+                required,
+                label: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: label }),
+                className: styles.fieldContainer,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactGridSystem.Container,
+                    {
+                      className: getContainerStyle(!!displayFile, !!(error && (value || currentFile)) || !!sizeError),
+                      onClick: handleClick,
+                      onDrop: (e) => handleDrop(e, onChange),
+                      onDragOver: handleDragOver,
+                      onDragLeave: handleDragLeave,
+                      fluid: true,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          reactGridSystem.Row,
+                          {
+                            nogutter: true,
+                            style: { gap: reactComponents.tokens.spacingVerticalL },
+                            justify: "center",
+                            align: "center",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.uploadIcon, children: sizeError ? /* @__PURE__ */ jsxRuntime.jsx(
+                                react.Icon,
+                                {
+                                  icon: "fluent:warning-32-regular",
+                                  style: {
+                                    color: reactComponents.tokens.colorStatusWarningBackground3,
+                                    maxWidth: "32px",
+                                    width: "32px",
+                                    maxHeight: "32px",
+                                    height: "32px"
+                                  }
                                 }
-                              }
-                            ) : /* @__PURE__ */ jsxRuntime.jsx(
-                              react.Icon,
-                              {
-                                icon: "fluent:arrow-upload-32-filled",
-                                style: {
-                                  color: brandColors2[80],
-                                  maxWidth: "32px",
-                                  width: "32px",
-                                  maxHeight: "32px",
-                                  height: "32px"
+                              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                                react.Icon,
+                                {
+                                  icon: "fluent:arrow-upload-32-filled",
+                                  style: {
+                                    color: brandColors2[80],
+                                    maxWidth: "32px",
+                                    width: "32px",
+                                    maxHeight: "32px",
+                                    height: "32px"
+                                  }
                                 }
-                              }
-                            ) }) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                              reactGridSystem.Row,
-                              {
-                                direction: "column",
-                                nogutter: true,
-                                style: { rowGap: reactComponents.tokens.spacingVerticalXS },
-                                children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: placeholderProp || mergedLabels.placeholder }) }),
-                                  displayFile instanceof File ? /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingHorizontalS }, children: [
-                                    /* @__PURE__ */ jsxRuntime.jsx(
-                                      reactGridSystem.Col,
-                                      {
-                                        xs: "content",
-                                        style: {
-                                          display: "flex",
-                                          justifyContent: "center",
-                                          alignItems: "center",
-                                          width: "max-content"
-                                        },
-                                        children: isImageFile(displayFile) && previewUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-                                          "img",
-                                          {
-                                            src: previewUrl,
-                                            alt: "preview",
-                                            className: styles.filePreviewImage
-                                          }
-                                        ) : pdfIcon ? /* @__PURE__ */ jsxRuntime.jsx(
-                                          "img",
-                                          {
-                                            src: pdfIcon,
-                                            alt: "PDF Icon",
-                                            width: 32,
-                                            height: 32,
-                                            style: { flexShrink: 0 }
-                                          }
-                                        ) : /* @__PURE__ */ jsxRuntime.jsx(
-                                          react.Icon,
-                                          {
-                                            icon: "fluent:document-pdf-32-regular",
-                                            width: 32,
-                                            height: 32,
-                                            style: { flexShrink: 0, color: brandColors2[80] }
-                                          }
-                                        )
-                                      }
-                                    ),
-                                    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                                      "div",
-                                      {
-                                        style: { display: "flex", flexDirection: "column" },
-                                        children: [
-                                          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Strong, { children: getDisplayFileName(displayFile) }),
-                                          /* @__PURE__ */ jsxRuntime.jsxs(
-                                            reactComponents.Caption2,
+                              ) }) }),
+                              /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                                reactGridSystem.Row,
+                                {
+                                  direction: "column",
+                                  nogutter: true,
+                                  style: { rowGap: reactComponents.tokens.spacingVerticalXS },
+                                  children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: placeholderProp || mergedLabels.placeholder }) }),
+                                    displayFile instanceof File ? /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { nogutter: true, style: { gap: reactComponents.tokens.spacingHorizontalS }, children: [
+                                      /* @__PURE__ */ jsxRuntime.jsx(
+                                        reactGridSystem.Col,
+                                        {
+                                          xs: "content",
+                                          style: {
+                                            display: "flex",
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            width: "max-content"
+                                          },
+                                          children: isImageFile(displayFile) && previewUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                                            "img",
                                             {
-                                              style: { color: reactComponents.tokens.colorNeutralForeground3 },
-                                              children: [
-                                                mergedLabels.sizeLabel,
-                                                ": ",
-                                                formatFileSize(displayFile.size),
-                                                (error || sizeError) && /* @__PURE__ */ jsxRuntime.jsxs(
-                                                  "span",
-                                                  {
-                                                    style: {
-                                                      color: reactComponents.tokens.colorStatusWarningForeground1,
-                                                      marginLeft: reactComponents.tokens.spacingHorizontalXS
-                                                    },
-                                                    children: [
-                                                      "(",
-                                                      sizeError || error?.message,
-                                                      ")"
-                                                    ]
-                                                  }
-                                                )
-                                              ]
+                                              src: previewUrl,
+                                              alt: "preview",
+                                              className: styles.filePreviewImage
                                             }
-                                          )
-                                        ]
-                                      }
-                                    ) }),
-                                    /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                                      "div",
-                                      {
-                                        style: {
-                                          display: "flex",
-                                          gap: reactComponents.tokens.spacingVerticalS,
-                                          justifyContent: "center",
-                                          alignItems: "center",
-                                          width: "max-content",
-                                          height: "100%"
-                                        },
-                                        children: [
-                                          /* @__PURE__ */ jsxRuntime.jsx(
-                                            reactComponents.Button,
+                                          ) : pdfIcon ? /* @__PURE__ */ jsxRuntime.jsx(
+                                            "img",
                                             {
-                                              appearance: "transparent",
-                                              size: "small",
-                                              style: { color: brandColors2[80] },
-                                              onClick: (e) => handlePreview(e, displayFile),
-                                              children: mergedLabels.preview
+                                              src: pdfIcon,
+                                              alt: "PDF Icon",
+                                              width: 32,
+                                              height: 32,
+                                              style: { flexShrink: 0 }
                                             }
-                                          ),
-                                          /* @__PURE__ */ jsxRuntime.jsx(
-                                            reactComponents.Button,
+                                          ) : /* @__PURE__ */ jsxRuntime.jsx(
+                                            react.Icon,
                                             {
-                                              appearance: "transparent",
-                                              size: "small",
-                                              onClick: (e) => handleRemoveFile(e, onChange),
-                                              icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-16-regular" })
+                                              icon: "fluent:document-pdf-32-regular",
+                                              width: 32,
+                                              height: 32,
+                                              style: { flexShrink: 0, color: brandColors2[80] }
                                             }
                                           )
-                                        ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                                        "div",
+                                        {
+                                          style: { display: "flex", flexDirection: "column" },
+                                          children: [
+                                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Strong, { children: getDisplayFileName(displayFile) }),
+                                            /* @__PURE__ */ jsxRuntime.jsxs(
+                                              reactComponents.Caption2,
+                                              {
+                                                style: { color: reactComponents.tokens.colorNeutralForeground3 },
+                                                children: [
+                                                  mergedLabels.sizeLabel,
+                                                  ": ",
+                                                  formatFileSize(displayFile.size),
+                                                  (error || sizeError) && /* @__PURE__ */ jsxRuntime.jsxs(
+                                                    "span",
+                                                    {
+                                                      style: {
+                                                        color: reactComponents.tokens.colorStatusWarningForeground1,
+                                                        marginLeft: reactComponents.tokens.spacingHorizontalXS
+                                                      },
+                                                      children: [
+                                                        "(",
+                                                        sizeError || error?.message,
+                                                        ")"
+                                                      ]
+                                                    }
+                                                  )
+                                                ]
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ) }),
+                                      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                                        "div",
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            gap: reactComponents.tokens.spacingVerticalS,
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            width: "max-content",
+                                            height: "100%"
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsxRuntime.jsx(
+                                              reactComponents.Button,
+                                              {
+                                                appearance: "transparent",
+                                                size: "small",
+                                                style: { color: brandColors2[80] },
+                                                onClick: (e) => handlePreview(e, displayFile),
+                                                children: mergedLabels.preview
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsxRuntime.jsx(
+                                              reactComponents.Button,
+                                              {
+                                                appearance: "transparent",
+                                                size: "small",
+                                                onClick: (e) => handleRemoveFile(e, onChange),
+                                                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-16-regular" })
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ) })
+                                    ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
+                                      reactComponents.Caption1,
+                                      {
+                                        style: { color: reactComponents.tokens.colorNeutralForeground3 },
+                                        children: mergedLabels.maxSizeWarning.replace("{maxSize}", String(maxSize))
                                       }
                                     ) })
-                                  ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
-                                    reactComponents.Caption1,
-                                    {
-                                      style: { color: reactComponents.tokens.colorNeutralForeground3 },
-                                      children: mergedLabels.maxSizeWarning.replace("{maxSize}", String(maxSize))
-                                    }
-                                  ) })
-                                ]
-                              }
-                            ) })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "input",
-                        {
-                          ref: fileInputRef,
-                          type: "file",
-                          accept,
-                          onChange: (e) => handleFileSelect(e.target.files, onChange),
-                          className: styles.hiddenInput,
-                          disabled
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(ModalPreviewImage, { imageUrl: previewUrl, open: isPreviewOpen, onOpenChange: setIsPreviewOpen })
-              ]
-            }
-          );
+                                  ]
+                                }
+                              ) })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "input",
+                          {
+                            ref: fileInputRef,
+                            type: "file",
+                            accept,
+                            onChange: (e) => handleFileSelect(e.target.files, onChange),
+                            className: styles.hiddenInput,
+                            disabled
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(ModalPreviewImage, { imageUrl: previewUrl, open: isPreviewOpen, onOpenChange: setIsPreviewOpen })
+                ]
+              }
+            ),
+            downloadTemplateDocument && /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "transparent",
+                size: "small",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowDownloadRegular, {}),
+                style: { display: "flex", justifyContent: "end", color: brandColors2[80], width: "100%" },
+                onClick: (e) => handleDownloadFile(e, displayFile),
+                disabled: !(displayFile instanceof File),
+                children: mergedLabels.downloadTemplateDocument
+              }
+            )
+          ] });
         }
       }
     );
@@ -14028,6 +14419,19 @@ var FileUpload = React__default.default.forwardRef(
 FileUpload.displayName = "FileUpload";
 var FileUpload_default = FileUpload;
 
+// src/utils/color.ts
+function hexToRgba(hex, alpha = 1) {
+  hex = hex.replace("#", "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((c) => c + c).join("");
+  }
+  const bigint = parseInt(hex, 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
 var DEFAULT_LABELS39 = {
   id: {},
@@ -14189,8 +14593,10 @@ exports.ModalTypeOfService = ModalTypeOfService;
 exports.PASSENGER_TYPE = PASSENGER_TYPE;
 exports.SortMenu = SortMenu;
 exports.Stepper = Stepper;
+exports.calculateAge = calculateAge;
 exports.getBadgeConfig = getBadgeConfig;
 exports.getModalPreset = getModalPreset;
 exports.getSortLabel = getSortLabel;
+exports.hexToRgba = hexToRgba;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map