@asdp/ferryui 0.1.22-dev.9233 → 0.1.22-dev.9336

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, Body2, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
-import { Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
+import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
 import { Container, Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
@@ -485,7 +485,7 @@ var useStyles2 = makeStyles({
     display: "flex",
     gap: `${spacing2[360]}px`,
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "start",
     [`@media (max-width: ${extendedTokens.breakpointMd})`]: {
       gap: tokens.spacingVerticalXS
     }
@@ -493,7 +493,7 @@ var useStyles2 = makeStyles({
   carouselContainerNoNav: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "start"
   },
   customCarouselNav: {
     display: "flex",
@@ -581,6 +581,29 @@ var useStyles2 = makeStyles({
         height: "10px"
       }
     }
+  },
+  singleIndicatorWrapper: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: tokens.spacingVerticalXXL,
+    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingVerticalM),
+    borderRadius: tokens.borderRadiusCircular
+  },
+  singleIndicatorDot: {
+    backgroundImage: "linear-gradient(to right,#00B3BD, #8DC63F)",
+    display: "inline-block",
+    width: "55px",
+    height: "16px",
+    borderRadius: tokens.borderRadiusCircular,
+    "@media (max-width: 768px)": {
+      width: "35px",
+      height: "13px"
+    },
+    "@media (max-width: 425px)": {
+      width: "25px",
+      height: "10px"
+    }
   }
 });
 var CarouselWithCustomNav = ({
@@ -606,6 +629,8 @@ var CarouselWithCustomNav = ({
 }) => {
   const styles = useStyles2();
   const [internalIndex, setInternalIndex] = useState(0);
+  const totalSlides = React.Children.count(children);
+  const isSingleSlide = totalSlides === 1;
   const labels = React.useMemo(
     () => ({
       ...DEFAULT_LABELS2[language],
@@ -622,15 +647,14 @@ var CarouselWithCustomNav = ({
       }
       onActiveIndexChange?.(index);
     },
-    [controlledIndex, onActiveIndexChange]
+    [controlledIndex, onActiveIndexChange, isSingleSlide]
   );
   React.useEffect(() => {
     if (!autoPlay) return;
-    const totalSlides = React.Children.count(children);
-    if (totalSlides <= 1) return;
+    const effectiveTotalSlides = isSingleSlide ? 2 : totalSlides;
     const intervalId = setInterval(() => {
       let nextIndex = activeIndex + 1;
-      if (nextIndex >= totalSlides) {
+      if (nextIndex >= effectiveTotalSlides) {
         nextIndex = circular ? 0 : activeIndex;
       }
       if (nextIndex !== activeIndex) {
@@ -644,15 +668,16 @@ var CarouselWithCustomNav = ({
   }, [
     autoPlay,
     autoPlayInterval,
-    children,
+    totalSlides,
     circular,
     activeIndex,
     controlledIndex,
-    onActiveIndexChange
+    onActiveIndexChange,
+    isSingleSlide
   ]);
   const defaultAnnouncement = 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]
   );
@@ -660,7 +685,7 @@ var CarouselWithCustomNav = ({
   return /* @__PURE__ */ jsxs(
     Carousel,
     {
-      circular,
+      circular: isSingleSlide ? true : circular,
       draggable,
       align,
       className: mergeClasses(styles.carousel, className),
@@ -669,53 +694,73 @@ var CarouselWithCustomNav = ({
       activeIndex,
       onActiveIndexChange: (_, data) => handleIndexChange(data.index),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: showNavButtons ? styles.carouselContainer : styles.carouselContainerNoNav, children: [
-          showNavButtons && /* @__PURE__ */ jsx(
-            CarouselButton,
-            {
-              navType: "prev",
-              "aria-label": labels.prevButtonAriaLabel,
-              className: styles.customeCarouselButton
-            }
-          ),
-          /* @__PURE__ */ jsxs(CarouselViewport, { style: { overflow: "hidden", paddingBottom: "10px" }, children: [
-            showCloseButton && /* @__PURE__ */ jsx(
-              Button,
-              {
-                icon: /* @__PURE__ */ jsx(DismissRegular, {}),
-                shape: "circular",
-                onClick: onCloseClick,
-                "aria-label": labels.closeButtonAriaLabel,
-                className: mergeClasses(
-                  styles.closeButton,
-                  showNavButtons ? styles.closeButtonWithNav : styles.closeButtonWithoutNav
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: showNavButtons ? styles.carouselContainer : styles.carouselContainerNoNav,
+            children: [
+              showNavButtons && !isSingleSlide && /* @__PURE__ */ jsx(
+                CarouselButton,
+                {
+                  navType: "prev",
+                  "aria-label": labels.prevButtonAriaLabel,
+                  className: styles.customeCarouselButton
+                }
+              ),
+              /* @__PURE__ */ jsxs(CarouselViewport, { style: { overflow: "hidden", paddingBottom: "10px" }, children: [
+                showCloseButton && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: /* @__PURE__ */ jsx(DismissRegular, {}),
+                    shape: "circular",
+                    onClick: onCloseClick,
+                    "aria-label": labels.closeButtonAriaLabel,
+                    className: mergeClasses(
+                      styles.closeButton,
+                      showNavButtons ? styles.closeButtonWithNav : styles.closeButtonWithoutNav
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CarouselSlider,
+                  {
+                    cardFocus,
+                    "aria-label": labels.carouselAriaLabel,
+                    children: isSingleSlide ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      children,
+                      children
+                    ] }) : children
+                  }
                 )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              CarouselSlider,
-              {
-                cardFocus,
-                "aria-label": labels.carouselAriaLabel,
-                children
-              }
-            )
-          ] }),
-          showNavButtons && /* @__PURE__ */ jsx(
-            CarouselButton,
-            {
-              navType: "next",
-              "aria-label": labels.nextButtonAriaLabel,
-              className: styles.customeCarouselButton
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
+              ] }),
+              showNavButtons && !isSingleSlide && /* @__PURE__ */ jsx(
+                CarouselButton,
+                {
+                  navType: "next",
+                  "aria-label": labels.nextButtonAriaLabel,
+                  className: styles.customeCarouselButton
+                }
+              )
+            ]
+          }
+        ),
+        isSingleSlide ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles.singleIndicatorWrapper,
+            style: {
+              backgroundColor: darkNavBackground ? tokens.colorSubtleBackgroundInverted : tokens.colorSubtleBackground,
+              justifyContent: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center"
+            },
+            children: /* @__PURE__ */ jsx("span", { className: styles.singleIndicatorDot })
+          }
+        ) : /* @__PURE__ */ jsx(
           CarouselNav,
           {
             style: {
               backgroundColor: darkNavBackground ? tokens.colorSubtleBackgroundInverted : tokens.colorSubtleBackground,
-              marginTop: tokens.spacingVerticalXXL
+              marginTop: tokens.spacingVerticalXXL,
+              justifyContent: align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center"
             },
             appearance: "brand",
             className: styles.carouselNavButton,
@@ -2468,7 +2513,9 @@ var DatePickerInput = forwardRef(
     contentBefore,
     onClick,
     style,
+    min,
     max,
+    disablePastDates = false,
     ...restProps
   }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -2497,6 +2544,12 @@ var DatePickerInput = 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__ */ jsxs(
       Popover,
       {
@@ -2547,6 +2600,7 @@ var DatePickerInput = forwardRef(
               showGoToToday: true,
               highlightSelectedMonth: true,
               showMonthPickerAsOverlay: false,
+              minDate,
               maxDate: max ? new Date(max) : void 0
             }
           ) })
@@ -3129,7 +3183,8 @@ var InputDynamic = ({
   onChange,
   language = "id",
   labels,
-  menuPlacement
+  menuPlacement,
+  disablePastDates = false
 }) => {
   const styles = useStyles8();
   const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
@@ -3434,6 +3489,7 @@ var InputDynamic = ({
           children: /* @__PURE__ */ jsx(
             PhoneInput,
             {
+              countryCodeEditable: false,
               inputStyle: phoneInputSizeStyle,
               country: defaultCountry.toLowerCase(),
               value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
@@ -3541,6 +3597,7 @@ var InputDynamic = ({
           children: /* @__PURE__ */ jsx(
             PhoneInput,
             {
+              countryCodeEditable: false,
               country: defaultCountry.toLowerCase(),
               value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
               onChange: (value, data) => {
@@ -3740,6 +3797,7 @@ var InputDynamic = ({
             children: /* @__PURE__ */ jsx(
               PhoneInput,
               {
+                countryCodeEditable: false,
                 ...phoneInputProps,
                 country: defaultCountry.toLowerCase(),
                 disabled,
@@ -3795,7 +3853,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
           }
         );
       }
@@ -5330,7 +5390,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",
@@ -5341,7 +5402,8 @@ var DEFAULT_LABELS10 = {
     loadingData: "Loading data...",
     harborNotFound: "Harbor not found",
     closeAriaLabel: "Close",
-    popularHarborHeader: "Popular Harbor"
+    popularHarborHeader: "Popular Harbor",
+    favoriteHeader: "Favorite"
   }
 };
 var useStyles11 = makeStyles({
@@ -5410,10 +5472,20 @@ var useStyles11 = makeStyles({
     display: "flex",
     gap: "1rem",
     marginBottom: "1rem",
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    marginTop: "1rem"
   },
   circularButton: {
-    borderRadius: tokens.borderRadiusCircular
+    borderRadius: tokens.borderRadius3XLarge,
+    border: `1px solid ${tokens.colorBrandBackground}`,
+    backgroundColor: brandColors2["140"],
+    gap: "5px"
+  },
+  buttonContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
   },
   headerRow: {
     display: "flex",
@@ -5427,11 +5499,13 @@ var useStyles11 = 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"
@@ -5448,14 +5522,51 @@ var useStyles11 = makeStyles({
   },
   harborItem: {
     display: "flex",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   emptyState: {
     textAlign: "center",
     padding: "32px",
     color: tokens.colorNeutralForeground3
+  },
+  listContent: {
+    cursor: "pointer",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
   }
 });
+var HarborListItem = ({
+  harbor,
+  onSelect,
+  trailingIcon,
+  showDivider,
+  containerClassName
+}) => {
+  const styles = useStyles11();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.listContent, onClick: () => onSelect(harbor), children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "fluent:vehicle-ship-24-regular",
+            fontSize: 20,
+            className: styles.iconMargin
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { textAlign: "left" }, children: [
+          /* @__PURE__ */ jsx(Body1, { children: harbor.portName }),
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsx(Caption1, { children: harbor.branchName })
+        ] })
+      ] }),
+      trailingIcon
+    ] }),
+    showDivider && /* @__PURE__ */ jsx(Divider, {})
+  ] });
+};
 var ModalSearchHarbor = ({
   language = "id",
   labels,
@@ -5474,6 +5585,7 @@ var ModalSearchHarbor = ({
   onAddLastSearched,
   onRemoveLastSearched,
   onClearLastSearched,
+  onClearFavorite,
   popularHarbors,
   showButtonFavorite = true
 }) => {
@@ -5532,119 +5644,169 @@ var ModalSearchHarbor = ({
               size: "large"
             }
           ) }),
-          favoriteHarbors.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsx(
-            Button,
-            {
-              onClick: () => handleSelect(harbor),
-              size: "medium",
-              appearance: "outline",
-              iconPosition: "before",
-              className: styles.circularButton,
-              icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:ribbon-20-filled" }),
-              children: /* @__PURE__ */ jsx(Body1, { children: harbor.portName + ", " + harbor.branchName })
-            },
-            harbor.portId
-          )) }),
-          /* @__PURE__ */ jsx(Divider, {}),
           /* @__PURE__ */ jsxs("div", { className: styles.resultList, children: [
-            lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            favoriteHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
-                /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.lastSearchedHeader }),
+                /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.favoriteHeader }),
                 /* @__PURE__ */ jsx(
                   Caption1,
                   {
-                    className: `${styles.dangerText} ${styles.cursorPointer}`,
-                    onClick: onClearLastSearched,
+                    className: mergeClasses(
+                      styles.dangerText,
+                      styles.cursorPointer
+                    ),
+                    onClick: onClearFavorite,
                     children: mergedLabels.clearAllButton
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsxs("div", { className: styles.historyItem, children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: { cursor: "pointer" },
-                    onClick: () => handleSelect(harbor),
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        Icon,
-                        {
-                          icon: "fluent:vehicle-ship-24-regular",
-                          className: styles.iconMargin
-                        }
-                      ),
-                      harbor.portName + ", " + harbor.branchName
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    onClick: () => onRemoveLastSearched(harbor),
-                    icon: "fluent:dismiss-24-regular",
-                    color: tokens.colorStatusDangerForeground1,
-                    className: styles.cursorPointer
-                  }
-                )
-              ] }, harbor.portId)) }),
-              /* @__PURE__ */ jsx(Divider, {})
-            ] }),
-            popularHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
-              /* @__PURE__ */ jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsx("div", { className: styles.historyItem, children: /* @__PURE__ */ jsxs(
-                "div",
+              favoriteHarbors.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxs(
+                Button,
                 {
-                  style: { cursor: "pointer" },
                   onClick: () => handleSelect(harbor),
+                  size: "medium",
+                  appearance: "subtle",
+                  iconPosition: "before",
+                  className: styles.circularButton,
+                  icon: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      icon: "fluent:vehicle-ship-20-regular",
+                      fontSize: 20,
+                      color: tokens.colorBrandBackground
+                    }
+                  ),
                   children: [
+                    /* @__PURE__ */ jsxs("div", { className: styles.buttonContent, children: [
+                      /* @__PURE__ */ jsx(Body1, { children: harbor.portName }),
+                      /* @__PURE__ */ jsx(Caption1, { children: harbor.branchName })
+                    ] }),
                     /* @__PURE__ */ jsx(
                       Icon,
                       {
-                        icon: "fluent:vehicle-ship-24-regular",
-                        className: styles.iconMargin
+                        icon: "fluent:star-24-filled",
+                        fontSize: 20,
+                        color: tokens.colorBrandBackground,
+                        style: { marginLeft: 5 }
                       }
-                    ),
-                    harbor.portName + ", " + harbor.branchName
+                    )
                   ]
-                }
-              ) }, harbor.portId)) }),
-              /* @__PURE__ */ jsx(Divider, {})
+                },
+                harbor.portId
+              )) })
+            ] }),
+            lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+                /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.lastSearchedHeader }),
+                /* @__PURE__ */ jsx(
+                  Caption1,
+                  {
+                    className: mergeClasses(
+                      styles.dangerText,
+                      styles.cursorPointer
+                    ),
+                    onClick: onClearLastSearched,
+                    children: mergedLabels.clearAllButton
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsx(
+                HarborListItem,
+                {
+                  harbor,
+                  onSelect: handleSelect,
+                  containerClassName: styles.historyItem,
+                  trailingIcon: /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      onClick: () => onRemoveLastSearched(harbor),
+                      icon: "fluent:dismiss-24-regular",
+                      fontSize: 20,
+                      className: styles.cursorPointer
+                    }
+                  ),
+                  showDivider: true
+                },
+                harbor.portId
+              )) })
+            ] }),
+            popularHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
+              /* @__PURE__ */ jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsx(
+                HarborListItem,
+                {
+                  harbor,
+                  onSelect: handleSelect,
+                  containerClassName: styles.historyItem,
+                  showDivider: true
+                },
+                harbor.portId
+              )) })
             ] }),
             /* @__PURE__ */ jsx(Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
             /* @__PURE__ */ jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3, 4, 5].map((item) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
-              /* @__PURE__ */ jsxs(Skeleton, { style: { display: "flex", alignItems: "center", gap: "0.5rem", width: "70%" }, children: [
-                /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }),
-                /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "100%", height: "20px", borderRadius: "4px" } })
-              ] }),
-              showButtonFavorite && /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "24px", height: "24px", borderRadius: "4px" } }) })
-            ] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
               /* @__PURE__ */ jsxs(
-                "div",
+                Skeleton,
                 {
-                  className: styles.cursorPointer,
-                  onClick: () => handleSelect(harbor),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    width: "70%"
+                  },
                   children: [
                     /* @__PURE__ */ jsx(
-                      Icon,
+                      SkeletonItem,
                       {
-                        icon: "fluent:vehicle-ship-24-regular",
-                        className: styles.iconMargin
+                        style: {
+                          width: "24px",
+                          height: "24px",
+                          borderRadius: "4px"
+                        }
                       }
                     ),
-                    harbor.portName + ", " + harbor.branchName
+                    /* @__PURE__ */ jsx(
+                      SkeletonItem,
+                      {
+                        style: {
+                          width: "100%",
+                          height: "20px",
+                          borderRadius: "4px"
+                        }
+                      }
+                    )
                   ]
                 }
               ),
-              showButtonFavorite && /* @__PURE__ */ jsx(
-                Icon,
+              showButtonFavorite && /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+                SkeletonItem,
                 {
-                  icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
-                  color: tokens.colorBrandBackground,
-                  className: styles.cursorPointer,
-                  onClick: () => onToggleFavorite(harbor)
+                  style: {
+                    width: "24px",
+                    height: "24px",
+                    borderRadius: "4px"
+                  }
                 }
-              )
-            ] }, index)) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
+              ) })
+            ] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsx(
+              HarborListItem,
+              {
+                harbor,
+                onSelect: handleSelect,
+                containerClassName: styles.harborItem,
+                trailingIcon: showButtonFavorite && /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
+                    color: tokens.colorBrandBackground,
+                    className: styles.cursorPointer,
+                    onClick: () => onToggleFavorite(harbor)
+                  }
+                ),
+                showDivider: index !== harbors.length - 1
+              },
+              harbor.portId || index
+            )) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
           ] })
         ] })
       ] }) })
@@ -8744,12 +8906,34 @@ var ModalListPassenger = ({
                 }
               },
               children: [
-                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Subtitle2, { children: [
-                  passenger.fullName,
-                  " (",
-                  passenger.ageLabel,
-                  " )"
-                ] }) }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs(Subtitle2, { children: [
+                    passenger.fullName,
+                    " ",
+                    passenger.isAccountOwner && /* @__PURE__ */ jsx(
+                      Caption2Strong,
+                      {
+                        style: {
+                          backgroundColor: "#F3F9FD",
+                          border: `1px solid #A9D3F2`,
+                          borderRadius: "1em",
+                          display: "inline-block",
+                          color: "#0078D4",
+                          padding: ".4em .9em"
+                        },
+                        children: "Pemilik Akun"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("br", {}),
+                  /* @__PURE__ */ jsxs(Body1, { children: [
+                    passenger.ageLabel,
+                    " \xB7 ",
+                    passenger.identityTypeCode,
+                    " ",
+                    passenger.identityId
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -8807,8 +8991,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",
@@ -8853,6 +9039,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",
@@ -8870,8 +9057,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",
@@ -8916,6 +9105,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",
@@ -8924,24 +9114,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 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
@@ -9107,16 +9296,18 @@ var useStyles23 = makeStyles({
   }
 });
 var ModalPassengerForm = ({
+  defaultValues,
   language = "id",
   labels,
   open,
+  onChange,
   onClose,
-  title,
   onSubmit,
-  defaultValues,
-  isAdultForm = true,
+  title,
   titleOptions,
+  countryOptions,
   cityOptions,
+  idTypeOptions,
   ticketClassOptions,
   onScanComplete
 }) => {
@@ -9127,7 +9318,6 @@ var ModalPassengerForm = ({
     ...labels?.errors
   };
   const displayTitle = title || mergedLabels.title;
-  const idTypes = ["KTP", "SIM", "Paspor"];
   const [isModalSelectIdTypeOpen, setIsModalSelectIdTypeOpen] = useState(false);
   const [isModalScanOpen, setIsModalScanOpen] = useState(false);
   const [scannedIdType, setScannedIdType] = useState(null);
@@ -9139,16 +9329,42 @@ var ModalPassengerForm = ({
   const { control, handleSubmit, reset, watch, setValue } = useForm({
     defaultValues
   });
-  const idType = watch("idType");
-  const watchPassportCountry = watch("country");
+  watch();
+  const watchIdentityTypeId = watch("identityTypeId");
+  const watchPassportCountryId = watch("countryId");
+  const watchBirthdate = watch("birthdate");
+  useEffect(() => {
+    const subscription = watch((value, { name, type }) => {
+      console.log("Changed field:", name);
+      console.log("Change type:", type);
+      onChange(value);
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, onChange]);
   useEffect(() => {
     reset(defaultValues);
   }, [defaultValues, reset]);
   useEffect(() => {
-    if (idType) {
-      setValue("idNumber", "");
+    if (watchIdentityTypeId) {
+      setValue("identityId", "");
     }
-  }, [idType, watchPassportCountry, setValue]);
+  }, [watchIdentityTypeId, watchPassportCountryId, setValue]);
+  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 = useCallback(() => {
     if (stream) {
       stream.getTracks().forEach((track) => track.stop());
@@ -9184,7 +9400,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");
@@ -9257,14 +9473,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");
@@ -9346,22 +9562,22 @@ var ModalPassengerForm = ({
             children: /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.selectIdTypeTitle })
           }
         ),
-        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx("div", { className: styles.idTypeList, children: idTypes.map((type) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx("div", { className: styles.idTypeList, children: idTypeOptions.map((type) => /* @__PURE__ */ 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__ */ jsx("span", { className: styles.idTypeText, children: type })
+            children: /* @__PURE__ */ jsx("span", { className: styles.idTypeText, children: type.label })
           },
-          type
+          type.value
         )) }) })
       ] }) })
     }
@@ -9628,7 +9844,7 @@ var ModalPassengerForm = ({
               /* @__PURE__ */ jsx(
                 InputDynamic_default,
                 {
-                  name: "title",
+                  name: "titleId",
                   control,
                   type: "select",
                   label: mergedLabels.titleLabel,
@@ -9644,7 +9860,7 @@ var ModalPassengerForm = ({
               /* @__PURE__ */ jsx(
                 InputDynamic_default,
                 {
-                  name: "name",
+                  name: "fullName",
                   control,
                   type: "text",
                   label: mergedLabels.nameLabel,
@@ -9663,22 +9879,23 @@ var ModalPassengerForm = ({
               /* @__PURE__ */ 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;
                     }
                   }
                 }
@@ -9686,110 +9903,107 @@ var ModalPassengerForm = ({
               /* @__PURE__ */ jsx(
                 InputDynamic_default,
                 {
-                  name: "cityId",
+                  name: "age",
+                  control,
+                  type: "text",
+                  disabled: true,
+                  label: mergedLabels.age,
+                  placeholder: mergedLabels.agePlaceholder,
+                  size: "large"
+                }
+              ),
+              /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
+              watchIdentityTypeId ? watchIdentityTypeId === "lainnya" ? /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+                watchIdentityTypeId === IDENTITY_TYPE.PSP.toString() && /* @__PURE__ */ 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__ */ jsx(
+                /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
-                  idType === "paspor" && /* @__PURE__ */ jsx(
-                    InputDynamic_default,
-                    {
-                      menuPlacement: "top",
-                      name: "country",
-                      control,
-                      type: "country",
-                      label: mergedLabels.countryLabel,
-                      placeholder: mergedLabels.countryPlaceholder,
-                      size: "large",
-                      required: true,
-                      validationRules: {
-                        required: mergedErrors.requiredCountry
+                      required: mergedErrors.requiredIdNumber,
+                      minLength: {
+                        value: 6,
+                        message: mergedErrors.minLengthIdNumber
                       }
                     }
-                  ),
-                  /* @__PURE__ */ 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
-                        }
-                      }
-                    }
-                  )
-                ] }) : null
-              ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                  }
+                )
+              ] }) : null,
+              /* @__PURE__ */ 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__ */ jsx("br", {}),
               /* @__PURE__ */ jsx(Divider, {}),
               /* @__PURE__ */ jsx("br", {}),
               /* @__PURE__ */ jsx(
                 InputDynamic_default,
                 {
-                  name: "ticketClass",
+                  name: "passengerClassId",
                   control,
                   type: "radiobutton",
                   label: mergedLabels.ticketClassLabel,
@@ -11125,11 +11339,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",
@@ -11137,11 +11356,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 = makeStyles({
@@ -11253,6 +11477,35 @@ var useStyles27 = makeStyles({
     border: "1px solid " + tokens.colorBrandStroke1,
     color: tokens.colorBrandBackground,
     width: "100%"
+  },
+  cancelButton: {
+    border: "1px solid #D13438",
+    color: "#D13438",
+    width: "100%"
+  },
+  dialogDismissButton: {
+    border: "1px solid " + tokens.colorBrandStroke1,
+    color: tokens.colorBrandBackground,
+    borderRadius: tokens.borderRadiusCircular,
+    marginTop: "1em",
+    marginBottom: ".5em",
+    width: "100%"
+  },
+  dialogConfirmButton: {
+    backgroundColor: "#D13438",
+    color: tokens.colorNeutralForegroundOnBrand,
+    width: "100%",
+    borderRadius: tokens.borderRadiusCircular,
+    border: "none",
+    "&:hover": {
+      backgroundColor: "#b02020"
+    }
+  },
+  dialogActions: {
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacingVerticalS,
+    width: "100%"
   }
 });
 var CardBookingTicket = ({
@@ -11265,6 +11518,7 @@ var CardBookingTicket = ({
   departureDay,
   departureTime,
   departureLocation,
+  disableNextButton,
   arrivalDay,
   arrivalTime,
   arrivalLocation,
@@ -11273,12 +11527,14 @@ var CardBookingTicket = ({
   reservationStep,
   paymentStep,
   onPriceDetailClick,
+  onCancel,
   onNext,
   onPrevious,
   className
 }) => {
   const styles = useStyles27();
   const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
   return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxs(Card, { className: styles.bookingDetailTop, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.bookingDetails }),
@@ -11362,6 +11618,7 @@ var CardBookingTicket = ({
           Button,
           {
             appearance: "primary",
+            disabled: disableNextButton,
             onClick: onNext,
             shape: "circular",
             size: "large",
@@ -11385,31 +11642,93 @@ var CardBookingTicket = ({
             iconPosition: "before",
             children: mergedLabels.previousButton
           }
-        )
-      ] }),
-      paymentStep === "pay" && /* @__PURE__ */ jsxs("div", { className: styles.gapButton, children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "primary",
-            shape: "circular",
-            size: "large",
-            style: { width: "100%" },
-            onClick: onNext,
-            children: mergedLabels.viewBookingButton
-          }
         ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "secondary",
-            shape: "circular",
-            size: "large",
-            className: styles.secondaryButton,
-            onClick: onPrevious,
-            children: mergedLabels.changePaymentButton
-          }
-        )
+        paymentStep === "pay" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              disabled: disableNextButton,
+              onClick: onNext,
+              shape: "circular",
+              size: "large",
+              style: { width: "100%" },
+              children: mergedLabels.viewBookingButton
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "secondary",
+              shape: "circular",
+              size: "large",
+              className: styles.secondaryButton,
+              onClick: onPrevious,
+              children: mergedLabels.changePaymentButton
+            }
+          )
+        ] }),
+        reservationStep === "manifest" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "outline",
+              onClick: () => setCancelDialogOpen(true),
+              shape: "circular",
+              size: "large",
+              className: styles.cancelButton,
+              iconPosition: "before",
+              children: mergedLabels.cancelButton
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Dialog,
+            {
+              open: cancelDialogOpen,
+              onOpenChange: (_, data) => setCancelDialogOpen(data.open),
+              children: /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: "479px", width: "479px" }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+                /* @__PURE__ */ jsx(
+                  DialogTitle,
+                  {
+                    action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        appearance: "subtle",
+                        "aria-label": "close",
+                        icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" })
+                      }
+                    ) }),
+                    children: /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.cancelDialogTitle })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(DialogContent, { children: [
+                  /* @__PURE__ */ jsx(Body1, { children: mergedLabels.cancelDialogBody }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      className: styles.dialogDismissButton,
+                      size: "large",
+                      onClick: () => setCancelDialogOpen(false),
+                      children: mergedLabels.cancelDialogDismiss
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      className: styles.dialogConfirmButton,
+                      size: "large",
+                      onClick: () => {
+                        setCancelDialogOpen(false);
+                        onCancel();
+                      },
+                      children: mergedLabels.cancelDialogConfirm
+                    }
+                  )
+                ] })
+              ] }) })
+            }
+          )
+        ] })
       ] })
     ] })
   ] }) });
@@ -13515,14 +13834,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 = makeStyles({
@@ -13662,7 +13983,8 @@ var FileUpload = React.forwardRef(
     disabled = false,
     language = "id",
     labels: customLabels,
-    pdfIcon
+    pdfIcon,
+    downloadTemplateDocument = false
   }, ref) => {
     const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
     const styles = uploadStyles();
@@ -13747,6 +14069,20 @@ var FileUpload = React.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;
@@ -13856,202 +14192,216 @@ var FileUpload = React.forwardRef(
               }
             );
           }
-          return /* @__PURE__ */ jsxs(
-            Field,
-            {
-              ref,
-              required,
-              label: /* @__PURE__ */ jsx(Body1, { children: label }),
-              className: styles.fieldContainer,
-              children: [
-                /* @__PURE__ */ jsxs(
-                  Container,
-                  {
-                    className: getContainerStyle(!!displayFile, !!(error && (value || currentFile)) || !!sizeError),
-                    onClick: handleClick,
-                    onDrop: (e) => handleDrop(e, onChange),
-                    onDragOver: handleDragOver,
-                    onDragLeave: handleDragLeave,
-                    fluid: true,
-                    children: [
-                      /* @__PURE__ */ jsxs(
-                        Row,
-                        {
-                          nogutter: true,
-                          style: { gap: tokens.spacingVerticalL },
-                          justify: "center",
-                          align: "center",
-                          children: [
-                            /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx("div", { className: styles.uploadIcon, children: sizeError ? /* @__PURE__ */ jsx(
-                              Icon,
-                              {
-                                icon: "fluent:warning-32-regular",
-                                style: {
-                                  color: tokens.colorStatusWarningBackground3,
-                                  maxWidth: "32px",
-                                  width: "32px",
-                                  maxHeight: "32px",
-                                  height: "32px"
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              Field,
+              {
+                ref,
+                required,
+                label: /* @__PURE__ */ jsx(Body1, { children: label }),
+                className: styles.fieldContainer,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Container,
+                    {
+                      className: getContainerStyle(!!displayFile, !!(error && (value || currentFile)) || !!sizeError),
+                      onClick: handleClick,
+                      onDrop: (e) => handleDrop(e, onChange),
+                      onDragOver: handleDragOver,
+                      onDragLeave: handleDragLeave,
+                      fluid: true,
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          Row,
+                          {
+                            nogutter: true,
+                            style: { gap: tokens.spacingVerticalL },
+                            justify: "center",
+                            align: "center",
+                            children: [
+                              /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx("div", { className: styles.uploadIcon, children: sizeError ? /* @__PURE__ */ jsx(
+                                Icon,
+                                {
+                                  icon: "fluent:warning-32-regular",
+                                  style: {
+                                    color: tokens.colorStatusWarningBackground3,
+                                    maxWidth: "32px",
+                                    width: "32px",
+                                    maxHeight: "32px",
+                                    height: "32px"
+                                  }
                                 }
-                              }
-                            ) : /* @__PURE__ */ jsx(
-                              Icon,
-                              {
-                                icon: "fluent:arrow-upload-32-filled",
-                                style: {
-                                  color: brandColors2[80],
-                                  maxWidth: "32px",
-                                  width: "32px",
-                                  maxHeight: "32px",
-                                  height: "32px"
+                              ) : /* @__PURE__ */ jsx(
+                                Icon,
+                                {
+                                  icon: "fluent:arrow-upload-32-filled",
+                                  style: {
+                                    color: brandColors2[80],
+                                    maxWidth: "32px",
+                                    width: "32px",
+                                    maxHeight: "32px",
+                                    height: "32px"
+                                  }
                                 }
-                              }
-                            ) }) }),
-                            /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(
-                              Row,
-                              {
-                                direction: "column",
-                                nogutter: true,
-                                style: { rowGap: tokens.spacingVerticalXS },
-                                children: [
-                                  /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(Body1Strong, { children: placeholderProp || mergedLabels.placeholder }) }),
-                                  displayFile instanceof File ? /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingHorizontalS }, children: [
-                                    /* @__PURE__ */ jsx(
-                                      Col,
-                                      {
-                                        xs: "content",
-                                        style: {
-                                          display: "flex",
-                                          justifyContent: "center",
-                                          alignItems: "center",
-                                          width: "max-content"
-                                        },
-                                        children: isImageFile(displayFile) && previewUrl ? /* @__PURE__ */ jsx(
-                                          "img",
-                                          {
-                                            src: previewUrl,
-                                            alt: "preview",
-                                            className: styles.filePreviewImage
-                                          }
-                                        ) : pdfIcon ? /* @__PURE__ */ jsx(
-                                          "img",
-                                          {
-                                            src: pdfIcon,
-                                            alt: "PDF Icon",
-                                            width: 32,
-                                            height: 32,
-                                            style: { flexShrink: 0 }
-                                          }
-                                        ) : /* @__PURE__ */ jsx(
-                                          Icon,
-                                          {
-                                            icon: "fluent:document-pdf-32-regular",
-                                            width: 32,
-                                            height: 32,
-                                            style: { flexShrink: 0, color: brandColors2[80] }
-                                          }
-                                        )
-                                      }
-                                    ),
-                                    /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(
-                                      "div",
-                                      {
-                                        style: { display: "flex", flexDirection: "column" },
-                                        children: [
-                                          /* @__PURE__ */ jsx(Caption1Strong, { children: getDisplayFileName(displayFile) }),
-                                          /* @__PURE__ */ jsxs(
-                                            Caption2,
+                              ) }) }),
+                              /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(
+                                Row,
+                                {
+                                  direction: "column",
+                                  nogutter: true,
+                                  style: { rowGap: tokens.spacingVerticalXS },
+                                  children: [
+                                    /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsx(Body1Strong, { children: placeholderProp || mergedLabels.placeholder }) }),
+                                    displayFile instanceof File ? /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsxs(Row, { nogutter: true, style: { gap: tokens.spacingHorizontalS }, children: [
+                                      /* @__PURE__ */ jsx(
+                                        Col,
+                                        {
+                                          xs: "content",
+                                          style: {
+                                            display: "flex",
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            width: "max-content"
+                                          },
+                                          children: isImageFile(displayFile) && previewUrl ? /* @__PURE__ */ jsx(
+                                            "img",
                                             {
-                                              style: { color: tokens.colorNeutralForeground3 },
-                                              children: [
-                                                mergedLabels.sizeLabel,
-                                                ": ",
-                                                formatFileSize(displayFile.size),
-                                                (error || sizeError) && /* @__PURE__ */ jsxs(
-                                                  "span",
-                                                  {
-                                                    style: {
-                                                      color: tokens.colorStatusWarningForeground1,
-                                                      marginLeft: tokens.spacingHorizontalXS
-                                                    },
-                                                    children: [
-                                                      "(",
-                                                      sizeError || error?.message,
-                                                      ")"
-                                                    ]
-                                                  }
-                                                )
-                                              ]
+                                              src: previewUrl,
+                                              alt: "preview",
+                                              className: styles.filePreviewImage
                                             }
-                                          )
-                                        ]
-                                      }
-                                    ) }),
-                                    /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsxs(
-                                      "div",
-                                      {
-                                        style: {
-                                          display: "flex",
-                                          gap: tokens.spacingVerticalS,
-                                          justifyContent: "center",
-                                          alignItems: "center",
-                                          width: "max-content",
-                                          height: "100%"
-                                        },
-                                        children: [
-                                          /* @__PURE__ */ jsx(
-                                            Button,
+                                          ) : pdfIcon ? /* @__PURE__ */ 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__ */ jsx(
-                                            Button,
+                                          ) : /* @__PURE__ */ jsx(
+                                            Icon,
                                             {
-                                              appearance: "transparent",
-                                              size: "small",
-                                              onClick: (e) => handleRemoveFile(e, onChange),
-                                              icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-16-regular" })
+                                              icon: "fluent:document-pdf-32-regular",
+                                              width: 32,
+                                              height: 32,
+                                              style: { flexShrink: 0, color: brandColors2[80] }
                                             }
                                           )
-                                        ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs(
+                                        "div",
+                                        {
+                                          style: { display: "flex", flexDirection: "column" },
+                                          children: [
+                                            /* @__PURE__ */ jsx(Caption1Strong, { children: getDisplayFileName(displayFile) }),
+                                            /* @__PURE__ */ jsxs(
+                                              Caption2,
+                                              {
+                                                style: { color: tokens.colorNeutralForeground3 },
+                                                children: [
+                                                  mergedLabels.sizeLabel,
+                                                  ": ",
+                                                  formatFileSize(displayFile.size),
+                                                  (error || sizeError) && /* @__PURE__ */ jsxs(
+                                                    "span",
+                                                    {
+                                                      style: {
+                                                        color: tokens.colorStatusWarningForeground1,
+                                                        marginLeft: tokens.spacingHorizontalXS
+                                                      },
+                                                      children: [
+                                                        "(",
+                                                        sizeError || error?.message,
+                                                        ")"
+                                                      ]
+                                                    }
+                                                  )
+                                                ]
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ) }),
+                                      /* @__PURE__ */ jsx(Col, { xs: "content", children: /* @__PURE__ */ jsxs(
+                                        "div",
+                                        {
+                                          style: {
+                                            display: "flex",
+                                            gap: tokens.spacingVerticalS,
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            width: "max-content",
+                                            height: "100%"
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsx(
+                                              Button,
+                                              {
+                                                appearance: "transparent",
+                                                size: "small",
+                                                style: { color: brandColors2[80] },
+                                                onClick: (e) => handlePreview(e, displayFile),
+                                                children: mergedLabels.preview
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsx(
+                                              Button,
+                                              {
+                                                appearance: "transparent",
+                                                size: "small",
+                                                onClick: (e) => handleRemoveFile(e, onChange),
+                                                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-16-regular" })
+                                              }
+                                            )
+                                          ]
+                                        }
+                                      ) })
+                                    ] }) }) : /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
+                                      Caption1,
+                                      {
+                                        style: { color: tokens.colorNeutralForeground3 },
+                                        children: mergedLabels.maxSizeWarning.replace("{maxSize}", String(maxSize))
                                       }
                                     ) })
-                                  ] }) }) : /* @__PURE__ */ jsx(Col, { xs: 12, children: /* @__PURE__ */ jsx(
-                                    Caption1,
-                                    {
-                                      style: { color: tokens.colorNeutralForeground3 },
-                                      children: mergedLabels.maxSizeWarning.replace("{maxSize}", String(maxSize))
-                                    }
-                                  ) })
-                                ]
-                              }
-                            ) })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          ref: fileInputRef,
-                          type: "file",
-                          accept,
-                          onChange: (e) => handleFileSelect(e.target.files, onChange),
-                          className: styles.hiddenInput,
-                          disabled
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx(ModalPreviewImage, { imageUrl: previewUrl, open: isPreviewOpen, onOpenChange: setIsPreviewOpen })
-              ]
-            }
-          );
+                                  ]
+                                }
+                              ) })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            ref: fileInputRef,
+                            type: "file",
+                            accept,
+                            onChange: (e) => handleFileSelect(e.target.files, onChange),
+                            className: styles.hiddenInput,
+                            disabled
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ModalPreviewImage, { imageUrl: previewUrl, open: isPreviewOpen, onOpenChange: setIsPreviewOpen })
+                ]
+              }
+            ),
+            downloadTemplateDocument && /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "transparent",
+                size: "small",
+                icon: /* @__PURE__ */ jsx(ArrowDownloadRegular, {}),
+                style: { display: "flex", justifyContent: "end", color: brandColors2[80], width: "100%" },
+                onClick: (e) => handleDownloadFile(e, displayFile),
+                disabled: !(displayFile instanceof File),
+                children: mergedLabels.downloadTemplateDocument
+              }
+            )
+          ] });
         }
       }
     );
@@ -14060,6 +14410,19 @@ var FileUpload = React.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: {},
@@ -14155,6 +14518,6 @@ var CardProfileMenu = ({
   ) });
 };
 
-export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, FileUpload_default as FileUpload, GENDER, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListMenuService, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
+export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, FileUpload_default as FileUpload, GENDER, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListMenuService, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, calculateAge, getBadgeConfig, getModalPreset, getSortLabel, hexToRgba };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map