@asdp/ferryui 0.1.22-dev.9337 → 0.1.22-dev.9360

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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 { 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, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, 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 { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
@@ -4387,13 +4387,16 @@ var useStyles9 = makeStyles({
     display: "flex",
     justifyContent: "center",
     position: "absolute",
-    left: "18px",
+    // left: "1px",
     bottom: "-16px",
-    width: "90%"
+    width: "100%"
   },
   buttonSwitch: {
     background: tokens.colorNeutralBackground1,
-    boxShadow: `0 1px 2px 0 ${tokens.colorNeutralShadowKey}, 0 0 2px 0 ${tokens.colorNeutralShadowAmbient}`
+    boxShadow: `0 1px 2px 0 ${tokens.colorNeutralShadowKey}, 0 0 2px 0 ${tokens.colorNeutralShadowAmbient}`,
+    position: "absolute",
+    right: "1rem",
+    bottom: "-20px"
   },
   switchIcon: {
     display: "inline-flex",
@@ -4424,11 +4427,15 @@ var useStyles9 = makeStyles({
     }
   },
   formContainerCol: {
+    paddingTop: "1rem !important",
+    paddingBottom: "1rem !important",
     [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
       paddingLeft: "20px !important",
       paddingRight: "20px !important",
       marginBottom: "1rem",
-      marginTop: "8rem"
+      marginTop: "8rem",
+      paddingTop: "0px !mportant",
+      paddingBottom: "0px !mportant"
     }
   },
   serviceCol: {
@@ -4606,7 +4613,7 @@ var CardTicketSearch = ({
               className: styles.formContainerCol,
               children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit(handleFormSubmit), children: /* @__PURE__ */ jsxs(Row, { style: { width: "100%" }, className: styles.formInnerRow, children: [
                 /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 6, xxl: 6, xxxl: 6, children: /* @__PURE__ */ jsxs(Row, { style: { gap: "16px" }, className: styles.formFieldRow, children: [
-                  /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { children: [
+                  /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { height: "100%", gap: "16px" }, children: [
                     /* @__PURE__ */ jsxs(
                       Col,
                       {
@@ -4617,6 +4624,9 @@ var CardTicketSearch = ({
                         xl: 12,
                         xxl: 12,
                         xxxl: 12,
+                        style: {
+                          borderBottom: `1px solid ${tokens.colorNeutralStroke1}`
+                        },
                         children: [
                           /* @__PURE__ */ jsx(
                             InputDynamic_default,
@@ -4643,37 +4653,33 @@ var CardTicketSearch = ({
                               required: true
                             }
                           ),
-                          /* @__PURE__ */ jsxs("div", { className: styles.deviderButton, children: [
-                            /* @__PURE__ */ jsx(Divider, {}),
-                            " ",
-                            /* @__PURE__ */ jsx(
-                              Button,
-                              {
-                                onClick: onSwitchClick,
-                                className: styles.buttonSwitch,
-                                shape: "circular",
-                                appearance: "secondary",
-                                size: "large",
-                                disabled: switchDisabled,
-                                "aria-label": labels.switchAriaLabel,
-                                icon: /* @__PURE__ */ jsx(
-                                  "div",
-                                  {
-                                    className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
-                                    children: /* @__PURE__ */ jsx(
-                                      "img",
-                                      {
-                                        src: "/assets/images/icons/switch.svg",
-                                        alt: labels.switchAriaLabel,
-                                        width: 26,
-                                        height: 26
-                                      }
-                                    )
-                                  }
-                                )
-                              }
-                            )
-                          ] })
+                          /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              onClick: onSwitchClick,
+                              className: styles.buttonSwitch,
+                              shape: "circular",
+                              appearance: "secondary",
+                              size: "large",
+                              disabled: switchDisabled,
+                              "aria-label": labels.switchAriaLabel,
+                              icon: /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
+                                  children: /* @__PURE__ */ jsx(
+                                    "img",
+                                    {
+                                      src: "/assets/images/icons/switch.svg",
+                                      alt: labels.switchAriaLabel,
+                                      width: 26,
+                                      height: 26
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          )
                         ]
                       }
                     ),
@@ -4848,6 +4854,40 @@ var CardTicketSearch = ({
                     },
                     className: styles.serviceCol,
                     children: /* @__PURE__ */ jsxs(Row, { style: { height: "100%", gap: "16px" }, children: [
+                      /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsx(Row, { style: { height: "100%", gap: "16px" }, children: /* @__PURE__ */ jsx(
+                        Col,
+                        {
+                          xs: 12,
+                          sm: 12,
+                          md: 12,
+                          lg: 12,
+                          xl: 12,
+                          xxl: 12,
+                          xxxl: 12,
+                          children: /* @__PURE__ */ jsx(
+                            InputDynamic_default,
+                            {
+                              name: "serviceClass",
+                              label: labels.serviceClassLabel,
+                              control,
+                              type: "text",
+                              contentBefore: /* @__PURE__ */ jsx(
+                                Icon,
+                                {
+                                  icon: "fluent:ribbon-star-24-filled",
+                                  color: tokens.colorBrandBackground
+                                }
+                              ),
+                              appearance: "filled-lighter",
+                              size: "large",
+                              placeholder: labels.placeholderTypeClass,
+                              onClick: onServiceClassClick,
+                              required: true,
+                              disabled: serviceClassDisabled
+                            }
+                          )
+                        }
+                      ) }) }) }),
                       /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxs(Row, { style: { height: "100%", gap: "16px" }, children: [
                         /* @__PURE__ */ jsx(
                           Col,
@@ -4859,40 +4899,9 @@ var CardTicketSearch = ({
                             xl: 12,
                             xxl: 12,
                             xxxl: 12,
-                            children: /* @__PURE__ */ jsx(
-                              InputDynamic_default,
-                              {
-                                name: "serviceClass",
-                                label: labels.serviceClassLabel,
-                                control,
-                                type: "text",
-                                contentBefore: /* @__PURE__ */ jsx(
-                                  Icon,
-                                  {
-                                    icon: "fluent:ribbon-star-24-filled",
-                                    color: tokens.colorBrandBackground
-                                  }
-                                ),
-                                appearance: "filled-lighter",
-                                size: "large",
-                                placeholder: labels.placeholderTypeClass,
-                                onClick: onServiceClassClick,
-                                required: true,
-                                disabled: serviceClassDisabled
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          Col,
-                          {
-                            xs: 12,
-                            sm: 12,
-                            md: 12,
-                            lg: 12,
-                            xl: 12,
-                            xxl: 12,
-                            xxxl: 12,
+                            style: {
+                              borderBottom: showPassengerField ? `1px solid ${tokens.colorNeutralStroke1}` : "none"
+                            },
                             children: /* @__PURE__ */ jsx(
                               InputDynamic_default,
                               {
@@ -4918,7 +4927,7 @@ var CardTicketSearch = ({
                             )
                           }
                         ),
-                        showPassengerField && /* @__PURE__ */ jsx(
+                        showPassengerField && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
                           Col,
                           {
                             xs: 12,
@@ -4950,7 +4959,7 @@ var CardTicketSearch = ({
                               }
                             )
                           }
-                        )
+                        ) })
                       ] }) }) }),
                       /* @__PURE__ */ jsx(Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsx(
                         Button,
@@ -5397,7 +5406,9 @@ var DEFAULT_LABELS10 = {
     harborNotFound: "Pelabuhan tidak ditemukan",
     closeAriaLabel: "Tutup",
     popularHarborHeader: "Pelabuhan Populer",
-    favoriteHeader: "Favorit"
+    favoriteHeader: "Favorit",
+    emptyContent: "Pelabuhan",
+    travelPlanHeader: "Rencana Perjalanan"
   },
   en: {
     title: "Select Harbor",
@@ -5409,10 +5420,113 @@ var DEFAULT_LABELS10 = {
     harborNotFound: "Harbor not found",
     closeAriaLabel: "Close",
     popularHarborHeader: "Popular Harbor",
-    favoriteHeader: "Favorite"
+    favoriteHeader: "Favorite",
+    emptyContent: "Harbor",
+    travelPlanHeader: "Travel Plan"
+  }
+};
+
+// src/components/EmptyContent/EmptyContent.constants.ts
+var DEFAULT_LABELS11 = {
+  id: {
+    defaultImageAlt: "Tidak ada konten",
+    defaultTitle: "Data {konten} belum bisa dimuat",
+    defaultMessage: "Silahkan coba muat ulang halaman ini atau cek kembali beberapa saat lagi.",
+    defaultButtonText: "Muat Ulang"
+  },
+  en: {
+    defaultImageAlt: "No content available",
+    defaultTitle: "Data {content} could not be loaded",
+    defaultMessage: "Please try reloading this page or check back in a few moments.",
+    defaultButtonText: "Reload"
   }
 };
+var getFormattedDefaultTitle = (template, content) => {
+  if (content) {
+    return template.replace(/\{(konten|content)\}/g, content);
+  }
+  return template.replace(/\s*\{(konten|content)\}\s*/g, " ").trim();
+};
 var useStyles11 = makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: tokens.spacingVerticalL,
+    textAlign: "center",
+    paddingTop: tokens.spacingVerticalXXL,
+    paddingBottom: tokens.spacingVerticalXXL,
+    paddingLeft: tokens.spacingHorizontalXL,
+    paddingRight: tokens.spacingHorizontalXL,
+    width: "100%"
+  },
+  image: {
+    maxWidth: "100%",
+    height: "auto"
+  },
+  textContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: tokens.spacingVerticalS,
+    maxWidth: "400px"
+  },
+  title: {
+    fontWeight: "600"
+  },
+  message: {
+    color: tokens.colorNeutralForeground3,
+    textAlign: "center"
+  }
+});
+var EmptyContent = ({
+  title,
+  content,
+  message,
+  imageSrc = "/assets/images/illustrations/no-content.svg",
+  imageAlt,
+  imageWidth = 240,
+  imageHeight = 180,
+  actionButton,
+  language = "id",
+  labels,
+  className
+}) => {
+  const styles = useStyles11();
+  const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
+  const displayTitle = title ?? getFormattedDefaultTitle(mergedLabels.defaultTitle, content);
+  const displayMessage = message ?? mergedLabels.defaultMessage;
+  const displayImageAlt = imageAlt ?? mergedLabels.defaultImageAlt;
+  return /* @__PURE__ */ jsxs("div", { className: mergeClasses(styles.root, className), children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageSrc,
+        alt: displayImageAlt,
+        width: imageWidth,
+        height: imageHeight,
+        className: styles.image
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.textContainer, children: [
+      /* @__PURE__ */ jsx(Subtitle1, { className: styles.title, children: displayTitle }),
+      typeof displayMessage === "string" ? /* @__PURE__ */ jsx(Body1, { className: styles.message, children: displayMessage }) : displayMessage
+    ] }),
+    actionButton && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        appearance: actionButton.appearance || "primary",
+        onClick: actionButton.onClick,
+        shape: "circular",
+        style: { width: "100%" },
+        children: actionButton.text
+      }
+    )
+  ] });
+};
+var useStyles12 = makeStyles({
   dialogTitle: {
     display: "flex",
     justifyContent: "space-between",
@@ -5550,7 +5664,7 @@ var HarborListItem = ({
   showDivider,
   containerClassName
 }) => {
-  const styles = useStyles11();
+  const styles = useStyles12();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.listContent, onClick: () => onSelect(harbor), children: [
@@ -5573,6 +5687,57 @@ var HarborListItem = ({
     showDivider && /* @__PURE__ */ jsx(Divider, {})
   ] });
 };
+var HarborListSkeleton = ({
+  count = 5,
+  showFavoriteIcon = false
+}) => {
+  const styles = useStyles12();
+  return /* @__PURE__ */ jsx("div", { className: styles.harborList, children: Array.from({ length: count }).map((_, index) => /* @__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"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    showFavoriteIcon && /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+      SkeletonItem,
+      {
+        style: {
+          width: "24px",
+          height: "24px",
+          borderRadius: "4px"
+        }
+      }
+    ) })
+  ] }, index)) });
+};
 var ModalSearchHarbor = ({
   language = "id",
   labels,
@@ -5583,7 +5748,8 @@ var ModalSearchHarbor = ({
   harbors,
   favoriteHarbors,
   lastSearchedHarbors,
-  isLoading = false,
+  isLoadingPort = false,
+  isLoadingTravelPlan = false,
   searchQuery,
   onSearchChange,
   onSelectHarbor,
@@ -5592,11 +5758,18 @@ var ModalSearchHarbor = ({
   onRemoveLastSearched,
   onClearLastSearched,
   onClearFavorite,
+  reloadButtonPort,
+  reloadButtonTravelPlan,
+  reloadButtonAll,
   popularHarbors,
-  showButtonFavorite = true
+  showButtonFavorite = true,
+  emptyImageSrc = "",
+  isErrorTravelPlan = false,
+  isErrorPort = false
 }) => {
-  const styles = useStyles11();
+  const styles = useStyles12();
   const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
+  const isError = isErrorTravelPlan && isErrorPort;
   const handleSelect = (harbor) => {
     onAddLastSearched(harbor);
     onSelectHarbor(harbor);
@@ -5632,7 +5805,15 @@ var ModalSearchHarbor = ({
             children: title || mergedLabels.title
           }
         ),
-        /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isError ? /* @__PURE__ */ jsx(
+          EmptyContent,
+          {
+            content: mergedLabels.emptyContent,
+            language,
+            actionButton: reloadButtonAll,
+            imageSrc: emptyImageSrc
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
             Input,
             {
@@ -5651,177 +5832,154 @@ var ModalSearchHarbor = ({
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: styles.resultList, children: [
-            favoriteHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
-                /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.favoriteHeader }),
-                /* @__PURE__ */ jsx(
-                  Caption1,
+            isErrorTravelPlan ? /* @__PURE__ */ jsx(Fragment, {}) : isLoadingTravelPlan ? /* @__PURE__ */ jsx(HarborListSkeleton, { count: 3, showFavoriteIcon: false }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              favoriteHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+                  /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.favoriteHeader }),
+                  /* @__PURE__ */ jsx(
+                    Caption1,
+                    {
+                      className: mergeClasses(
+                        styles.dangerText,
+                        styles.cursorPointer
+                      ),
+                      onClick: onClearFavorite,
+                      children: mergedLabels.clearAllButton
+                    }
+                  )
+                ] }),
+                favoriteHarbors.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxs(
+                  Button,
                   {
-                    className: mergeClasses(
-                      styles.dangerText,
-                      styles.cursorPointer
+                    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
+                      }
                     ),
-                    onClick: onClearFavorite,
-                    children: mergedLabels.clearAllButton
-                  }
-                )
+                    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:star-24-filled",
+                          fontSize: 20,
+                          color: tokens.colorBrandBackground,
+                          style: { marginLeft: 5 }
+                        }
+                      )
+                    ]
+                  },
+                  harbor.portId
+                )) })
               ] }),
-              favoriteHarbors.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  onClick: () => handleSelect(harbor),
-                  size: "medium",
-                  appearance: "subtle",
-                  iconPosition: "before",
-                  className: styles.circularButton,
-                  icon: /* @__PURE__ */ jsx(
-                    Icon,
+              lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+                  /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.lastSearchedHeader }),
+                  /* @__PURE__ */ jsx(
+                    Caption1,
                     {
-                      icon: "fluent:vehicle-ship-20-regular",
-                      fontSize: 20,
-                      color: tokens.colorBrandBackground
+                      className: mergeClasses(
+                        styles.dangerText,
+                        styles.cursorPointer
+                      ),
+                      onClick: onClearLastSearched,
+                      children: mergedLabels.clearAllButton
                     }
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: styles.buttonContent, children: [
-                      /* @__PURE__ */ jsx(Body1, { children: harbor.portName }),
-                      /* @__PURE__ */ jsx(Caption1, { children: harbor.branchName })
-                    ] }),
-                    /* @__PURE__ */ jsx(
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsx(
+                  HarborListItem,
+                  {
+                    harbor,
+                    onSelect: handleSelect,
+                    containerClassName: styles.historyItem,
+                    trailingIcon: /* @__PURE__ */ jsx(
                       Icon,
                       {
-                        icon: "fluent:star-24-filled",
+                        onClick: () => onRemoveLastSearched(harbor),
+                        icon: "fluent:dismiss-24-regular",
                         fontSize: 20,
-                        color: tokens.colorBrandBackground,
-                        style: { marginLeft: 5 }
+                        className: styles.cursorPointer
                       }
-                    )
-                  ]
-                },
-                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
-                  }
-                )
+                    showDivider: true
+                  },
+                  harbor.portId
+                )) })
               ] }),
-              /* @__PURE__ */ jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsx(
+              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
+                )) })
+              ] })
+            ] }),
+            isErrorPort ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
+              /* @__PURE__ */ jsx(
+                EmptyContent,
+                {
+                  content: mergedLabels.emptyContent,
+                  language,
+                  actionButton: reloadButtonPort,
+                  imageSrc: emptyImageSrc
+                }
+              )
+            ] }) : isLoadingPort ? /* @__PURE__ */ jsx(
+              HarborListSkeleton,
+              {
+                count: 5,
+                showFavoriteIcon: showButtonFavorite
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
+              /* @__PURE__ */ jsx("div", { className: styles.harborList, children: harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsx(
                 HarborListItem,
                 {
                   harbor,
                   onSelect: handleSelect,
-                  containerClassName: styles.historyItem,
-                  trailingIcon: /* @__PURE__ */ jsx(
+                  containerClassName: styles.harborItem,
+                  trailingIcon: showButtonFavorite && /* @__PURE__ */ jsx(
                     Icon,
                     {
-                      onClick: () => onRemoveLastSearched(harbor),
-                      icon: "fluent:dismiss-24-regular",
-                      fontSize: 20,
-                      className: styles.cursorPointer
+                      icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
+                      color: tokens.colorBrandBackground,
+                      className: styles.cursorPointer,
+                      onClick: () => onToggleFavorite(harbor)
                     }
                   ),
-                  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
+                  showDivider: index !== harbors.length - 1
                 },
-                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__ */ 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 }) })
+                harbor.portId || index
+              )) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
+            ] })
           ] })
-        ] })
+        ] }) })
       ] }) })
     }
   );
 };
 
 // src/components/ModalSelectDate/ModalSelectDate.constants.ts
-var DEFAULT_LABELS11 = {
+var DEFAULT_LABELS12 = {
   id: {
     title: "Pilih Tanggal",
     oneWay: "Sekali Jalan",
@@ -5835,7 +5993,7 @@ var DEFAULT_LABELS11 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles12 = makeStyles({
+var useStyles13 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -5955,8 +6113,8 @@ var ModalSelectDate = ({
   dateFormat = "DD MMMM YYYY",
   showRoundtrip = true
 }) => {
-  const styles = useStyles12();
-  const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
+  const styles = useStyles13();
+  const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
   useEffect(() => {
     moment.locale(language === "id" ? "id" : "en");
   }, [language]);
@@ -6179,14 +6337,15 @@ var ModalSelectDate = ({
 };
 
 // src/components/ModalService/ModalService.constants.ts
-var DEFAULT_LABELS12 = {
+var DEFAULT_LABELS13 = {
   id: {
     title: "Pilih Kelas Layanan",
     loading: "Memuat...",
     error: "Gagal memuat layanan",
     selectAll: "Pilih Semua",
     saveButton: "Simpan",
-    closeAriaLabel: "Tutup"
+    closeAriaLabel: "Tutup",
+    emptyContent: "Kelas Layanan"
   },
   en: {
     title: "Select Service Class",
@@ -6194,10 +6353,11 @@ var DEFAULT_LABELS12 = {
     error: "Error loading services",
     selectAll: "Select All",
     saveButton: "Save",
-    closeAriaLabel: "Close"
+    closeAriaLabel: "Close",
+    emptyContent: "Service Class"
   }
 };
-var useStyles13 = makeStyles({
+var useStyles14 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6270,6 +6430,66 @@ var useStyles13 = makeStyles({
     borderRadius: tokens.borderRadiusCircular
   }
 });
+var ServiceListSkeleton = ({
+  count = 3
+}) => {
+  const styles = useStyles14();
+  return /* @__PURE__ */ jsx("div", { className: styles.serviceList, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: styles.serviceItem, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.serviceContent, children: /* @__PURE__ */ jsxs(
+      Skeleton,
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          width: "80%"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              style: {
+                width: "120px",
+                height: "20px",
+                borderRadius: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              style: {
+                width: "80px",
+                height: "16px",
+                borderRadius: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              style: {
+                width: "100%",
+                height: "16px",
+                borderRadius: "4px"
+              }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+      SkeletonItem,
+      {
+        style: {
+          width: "20px",
+          height: "20px",
+          borderRadius: "4px"
+        }
+      }
+    ) })
+  ] }, index)) });
+};
 var ModalService = ({
   language = "id",
   labels,
@@ -6280,10 +6500,12 @@ var ModalService = ({
   selectedServiceIds,
   onSave,
   isLoading = false,
-  isError = false
+  isError = false,
+  reloadButton,
+  emptyImageSrc = ""
 }) => {
-  const styles = useStyles13();
-  const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
+  const styles = useStyles14();
+  const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   const [selectedServices, setSelectedServices] = useState(selectedServiceIds);
   useEffect(() => {
@@ -6338,7 +6560,15 @@ var ModalService = ({
         children: displayTitle
       }
     ),
-    /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsx(Body1, { children: mergedLabels.loading }) : isError ? /* @__PURE__ */ jsx(Body1, { children: mergedLabels.error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsx(ServiceListSkeleton, {}) : isError ? /* @__PURE__ */ jsx(
+      EmptyContent,
+      {
+        content: mergedLabels.emptyContent,
+        language,
+        actionButton: reloadButton,
+        imageSrc: emptyImageSrc
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: styles.serviceList, children: [
         /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
           /* @__PURE__ */ jsx(Body1, { children: mergedLabels.selectAll }),
@@ -6388,23 +6618,25 @@ var ModalService = ({
 };
 
 // src/components/ModalTotalPassengers/ModalTotalPassengers.constants.ts
-var DEFAULT_LABELS13 = {
+var DEFAULT_LABELS14 = {
   id: {
     title: "Pilih Jumlah Penumpang",
     infoMessage: "Anda dapat menambahkan hingga {maxPassengers} penumpang pada golongan kendaraan ini.",
     loading: "Memuat...",
     saveButton: "Simpan",
-    closeAriaLabel: "Tutup"
+    closeAriaLabel: "Tutup",
+    emptyContent: "Kelas Penumpang"
   },
   en: {
     title: "Select Total Passengers",
     infoMessage: "You can add up to {maxPassengers} passengers in this vehicle category.",
     loading: "Loading...",
     saveButton: "Save",
-    closeAriaLabel: "Close"
+    closeAriaLabel: "Close",
+    emptyContent: "Passengers Class"
   }
 };
-var useStyles14 = makeStyles({
+var useStyles15 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6471,6 +6703,62 @@ var useStyles14 = makeStyles({
     margin: 0
   }
 });
+var TotalPassengersListSkeleton = ({
+  count = 3
+}) => {
+  const styles = useStyles15();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginTop: tokens.spacingHorizontalM
+      },
+      children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.accordionItem,
+          style: { padding: "8px 0" },
+          children: /* @__PURE__ */ jsxs("div", { className: styles.accordionHeader, style: { padding: "0 12px" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", width: "100%" },
+                children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+                  SkeletonItem,
+                  {
+                    style: {
+                      width: "120px",
+                      height: "18px"
+                    }
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { height: "4px" } }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", width: "100%" },
+                children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+                  SkeletonItem,
+                  {
+                    style: {
+                      width: "48px",
+                      height: "14px"
+                    }
+                  }
+                ) })
+              }
+            )
+          ] })
+        },
+        index
+      ))
+    }
+  );
+};
 var ModalTotalPassengers = ({
   language = "id",
   labels,
@@ -6481,11 +6769,14 @@ var ModalTotalPassengers = ({
   selectedPassengers,
   onSave,
   isLoading = false,
+  isError = false,
+  reloadButton,
+  emptyImageSrc,
   maxPassengers = 10,
   infoMessage
 }) => {
-  const styles = useStyles14();
-  const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
+  const styles = useStyles15();
+  const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
   const [passengers, setPassengers] = useState([]);
   const [openItems, setOpenItems] = useState([]);
   const defaultInfoMessage = mergedLabels.infoMessage.replace(
@@ -6542,11 +6833,16 @@ var ModalTotalPassengers = ({
       (p) => p.passengerAgeCode === passengerAgeCode
     );
     if (!passenger) return 0;
-    const cls = passenger.classes.find(
-      (c) => c.classCode === classCode
-    );
+    const cls = passenger.classes.find((c) => c.classCode === classCode);
     return cls?.count ?? 0;
   };
+  const getTotalCountForType = (passengerAgeCode) => {
+    const passenger = passengers.find(
+      (p) => p.passengerAgeCode === passengerAgeCode
+    );
+    if (!passenger) return 0;
+    return passenger.classes.reduce((sum, cls) => sum + (cls.count ?? 0), 0);
+  };
   const getTotalForType = (passengerAgeCode) => {
     const passenger = passengers.find(
       (p) => p.passengerAgeCode === passengerAgeCode
@@ -6601,10 +6897,7 @@ var ModalTotalPassengers = ({
             classes: passenger.classes.map((cls) => {
               if (cls.classCode === classCode && (cls.count ?? 0) > 0) {
                 const newCount = (cls.count ?? 0) - 1;
-                const newPassengers = (cls.passengers || []).slice(
-                  0,
-                  newCount
-                );
+                const newPassengers = (cls.passengers || []).slice(0, newCount);
                 return {
                   ...cls,
                   count: newCount,
@@ -6642,131 +6935,134 @@ var ModalTotalPassengers = ({
         children: title || mergedLabels.title
       }
     ),
-    /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsx(DialogContent, { children: isLoading ? /* @__PURE__ */ jsx(TotalPassengersListSkeleton, {}) : isError ? /* @__PURE__ */ jsx(
+      EmptyContent,
+      {
+        content: mergedLabels.emptyContent,
+        language,
+        actionButton: reloadButton,
+        imageSrc: emptyImageSrc
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(MessageBar, { shape: "rounded", children: /* @__PURE__ */ jsx(MessageBarBody, { children: infoMessage || defaultInfoMessage }) }),
-      isLoading ? /* @__PURE__ */ jsx(Body1, { children: mergedLabels.loading }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Accordion,
-          {
-            collapsible: true,
-            multiple: true,
-            openItems,
-            onToggle: (_, data) => setOpenItems(data.openItems),
-            className: styles.passengerSection,
-            children: passengerTypes.map((passengerType) => {
-              const classes = passengerType.classes || [];
-              return /* @__PURE__ */ jsxs(
-                AccordionItem,
-                {
-                  value: String(passengerType.id),
-                  className: styles.accordionItem,
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      AccordionHeader,
-                      {
-                        className: styles.accordionHeader,
-                        expandIconPosition: "end",
-                        children: [
-                          passengerType.passengerAgeName,
-                          " (",
-                          getTotalForType(passengerType.passengerAgeCode),
-                          ")"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: styles.nestedRow,
-                        children: [
-                          /* @__PURE__ */ jsx(Body1, { children: (cls?.className || "")?.toUpperCase() }),
-                          /* @__PURE__ */ jsxs("div", { className: styles.passengerCount, children: [
-                            /* @__PURE__ */ jsx(
-                              Button,
-                              {
-                                appearance: "outline",
-                                className: styles.counterButton,
-                                size: "small",
-                                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:subtract-12-regular" }),
-                                onClick: (e) => {
-                                  e.stopPropagation();
-                                  handleDecrement(
-                                    passengerType.passengerAgeCode,
-                                    cls.classCode
-                                  );
-                                },
-                                disabled: getServiceCount(
-                                  passengerType.passengerAgeCode,
-                                  cls.classCode
-                                ) === 0
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(Body1, { className: styles.countText, children: getServiceCount(
+      /* @__PURE__ */ jsx(
+        Accordion,
+        {
+          collapsible: true,
+          multiple: true,
+          openItems,
+          onToggle: (_, data) => setOpenItems(data.openItems),
+          className: styles.passengerSection,
+          children: passengerTypes.map((passengerType) => {
+            const classes = passengerType.classes || [];
+            return /* @__PURE__ */ jsxs(
+              AccordionItem,
+              {
+                value: String(passengerType.id),
+                className: styles.accordionItem,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    AccordionHeader,
+                    {
+                      className: styles.accordionHeader,
+                      expandIconPosition: "end",
+                      children: [
+                        passengerType.passengerAgeName,
+                        " (",
+                        getTotalForType(passengerType.passengerAgeCode),
+                        ")"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxs("div", { className: styles.nestedRow, children: [
+                    /* @__PURE__ */ jsx(Body1, { children: (cls?.className || "")?.toUpperCase() }),
+                    /* @__PURE__ */ jsxs("div", { className: styles.passengerCount, children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          appearance: "outline",
+                          className: styles.counterButton,
+                          size: "small",
+                          icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:subtract-12-regular" }),
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleDecrement(
                               passengerType.passengerAgeCode,
                               cls.classCode
-                            ) }),
-                            /* @__PURE__ */ jsx(
-                              Button,
-                              {
-                                appearance: "outline",
-                                className: styles.counterButton,
-                                size: "small",
-                                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-12-regular" }),
-                                disabled: getServiceCount(
-                                  passengerType.passengerAgeCode,
-                                  cls.classCode
-                                ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
-                                onClick: (e) => {
-                                  e.stopPropagation();
-                                  handleIncrement(
-                                    passengerType.passengerAgeCode,
-                                    cls.classCode
-                                  );
-                                }
-                              }
-                            )
-                          ] })
-                        ]
-                      },
-                      cls.id
-                    )) }) })
-                  ]
-                },
-                passengerType.id
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "primary",
-            size: "medium",
-            className: styles.submitButton,
-            onClick: handleSave,
-            children: mergedLabels.saveButton
-          }
-        )
-      ] })
-    ] })
+                            );
+                          },
+                          disabled: getServiceCount(
+                            passengerType.passengerAgeCode,
+                            cls.classCode
+                          ) === 0 || getTotalCountForType(
+                            passengerType.passengerAgeCode
+                          ) <= passengerType.minCapacity
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Body1, { className: styles.countText, children: getServiceCount(
+                        passengerType.passengerAgeCode,
+                        cls.classCode
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          appearance: "outline",
+                          className: styles.counterButton,
+                          size: "small",
+                          icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-12-regular" }),
+                          disabled: getServiceCount(
+                            passengerType.passengerAgeCode,
+                            cls.classCode
+                          ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleIncrement(
+                              passengerType.passengerAgeCode,
+                              cls.classCode
+                            );
+                          }
+                        }
+                      )
+                    ] })
+                  ] }, cls.id)) }) })
+                ]
+              },
+              passengerType.id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "primary",
+          size: "medium",
+          className: styles.submitButton,
+          onClick: handleSave,
+          children: mergedLabels.saveButton
+        }
+      )
+    ] }) })
   ] }) }) });
 };
 
 // src/components/ModalTypeOfService/ModalTypeOfService.constants.ts
-var DEFAULT_LABELS14 = {
+var DEFAULT_LABELS15 = {
   id: {
-    title: "Pilih Tipe Layanan",
+    title: "Pilih Jenis Layanan",
     cancelButton: "Batal",
     saveButton: "Simpan",
     vehiclesAlt: "kendaraan",
-    closeAriaLabel: "Tutup"
+    closeAriaLabel: "Tutup",
+    emptyContent: "Jenis Layanan"
   },
   en: {
     title: "Select Service Type",
     cancelButton: "Cancel",
     saveButton: "Save",
     vehiclesAlt: "vehicles",
-    closeAriaLabel: "Close"
+    closeAriaLabel: "Close",
+    emptyContent: "Service Type"
   }
 };
 var DEFAULT_VEHICLE_ICONS = {
@@ -6781,49 +7077,132 @@ var DEFAULT_VEHICLE_ICONS = {
   bigTruck: "/assets/images/icons/big-truck.webp",
   looseLoad: "/assets/images/icons/loose-load.webp"
 };
-var useStyles15 = makeStyles({
-  dialogSurface: {
-    maxWidth: "600px",
-    width: "100%"
-  },
-  closeButton: {
-    minWidth: "32px",
-    minHeight: "32px"
-  },
-  passengerSection: {
-    marginTop: tokens.spacingHorizontalM,
-    display: "flex",
-    flexDirection: "column"
-  },
-  accordionItem: {
-    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
-    width: "100%"
-  },
-  accordionHeader: {
-    fontSize: tokens.fontSizeBase300,
-    fontWeight: tokens.fontWeightBold,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%"
-  },
-  accordionTitleAndInfo: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "2px",
-    marginLeft: tokens.spacingHorizontalM,
-    flex: 1
-  },
-  accordionBody: {
-    marginLeft: "100px"
-  },
-  footer: {
-    marginTop: tokens.spacingVerticalL,
-    display: "flex",
-    gap: tokens.spacingHorizontalM,
-    justifyContent: "flex-end"
-  }
-});
+var useStyles16 = makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  passengerSection: {
+    marginTop: tokens.spacingHorizontalM,
+    display: "flex",
+    flexDirection: "column"
+  },
+  accordionItem: {
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    width: "100%"
+  },
+  accordionHeader: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightBold,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  accordionTitleAndInfo: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    marginLeft: tokens.spacingHorizontalM,
+    flex: 1
+  },
+  accordionBody: {
+    marginLeft: "100px"
+  },
+  footer: {
+    marginTop: tokens.spacingVerticalL,
+    display: "flex",
+    gap: tokens.spacingHorizontalM,
+    justifyContent: "flex-end"
+  }
+});
+var TypeOfServiceListSkeleton = ({ count = 3 }) => {
+  const styles = useStyles16();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginTop: tokens.spacingHorizontalM
+      },
+      children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.accordionItem,
+          style: { padding: "8px 0" },
+          children: /* @__PURE__ */ jsxs("div", { className: styles.accordionHeader, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", width: "100%" },
+                children: [
+                  /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+                    SkeletonItem,
+                    {
+                      style: {
+                        width: "74px",
+                        height: "74px",
+                        borderRadius: "8px"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: styles.accordionTitleAndInfo, style: { flex: 1 }, children: /* @__PURE__ */ jsxs(
+                    Skeleton,
+                    {
+                      style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "4px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          SkeletonItem,
+                          {
+                            style: {
+                              width: "120px",
+                              height: "20px",
+                              borderRadius: "4px"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          SkeletonItem,
+                          {
+                            style: {
+                              width: "150px",
+                              height: "16px",
+                              borderRadius: "4px"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                style: {
+                  width: "16px",
+                  height: "16px",
+                  borderRadius: "50%"
+                }
+              }
+            ) })
+          ] })
+        },
+        index
+      ))
+    }
+  );
+};
 var ModalTypeOfService = ({
   language = "id",
   labels,
@@ -6833,10 +7212,14 @@ var ModalTypeOfService = ({
   serviceTypes,
   selectedService,
   onSave,
-  renderImage
+  renderImage,
+  isLoading = false,
+  isError = false,
+  reloadButton,
+  emptyImageSrc = ""
 }) => {
-  const styles = useStyles15();
-  const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
+  const styles = useStyles16();
+  const mergedLabels = { ...DEFAULT_LABELS15[language], ...labels };
   const [selectedServiceId, setSelectedServiceId] = useState(
     selectedService?.id || 0
   );
@@ -6949,7 +7332,15 @@ var ModalTypeOfService = ({
         children: title || mergedLabels.title
       }
     ),
-    /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsx(DialogContent, { children: isLoading ? /* @__PURE__ */ jsx(TypeOfServiceListSkeleton, {}) : isError ? /* @__PURE__ */ jsx(
+      EmptyContent,
+      {
+        content: mergedLabels.emptyContent,
+        language,
+        actionButton: reloadButton,
+        imageSrc: emptyImageSrc
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Accordion,
         {
@@ -6996,7 +7387,9 @@ var ModalTypeOfService = ({
                               styles.accordionHeader,
                               styles.accordionItem
                             ),
-                            style: { padding: tokens.spacingHorizontalXS },
+                            style: {
+                              padding: tokens.spacingHorizontalXS
+                            },
                             children: [
                               /* @__PURE__ */ jsx("div", { children: imageRenderer({
                                 src: childItem.image,
@@ -7004,10 +7397,16 @@ var ModalTypeOfService = ({
                                 width: 48,
                                 height: 48
                               }) }),
-                              /* @__PURE__ */ jsxs("div", { className: styles.accordionTitleAndInfo, children: [
-                                /* @__PURE__ */ jsx(Body1, { children: childItem.title }),
-                                /* @__PURE__ */ jsx(Caption1, { children: childItem.info })
-                              ] }),
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  className: styles.accordionTitleAndInfo,
+                                  children: [
+                                    /* @__PURE__ */ jsx(Body1, { children: childItem.title }),
+                                    /* @__PURE__ */ jsx(Caption1, { children: childItem.info })
+                                  ]
+                                }
+                              ),
                               /* @__PURE__ */ jsx(Radio, { value: String(childItem.id) })
                             ]
                           },
@@ -7057,7 +7456,15 @@ var ModalTypeOfService = ({
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
-        /* @__PURE__ */ jsx(Button, { appearance: "secondary", shape: "circular", onClick: onClose, children: mergedLabels.cancelButton }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "secondary",
+            shape: "circular",
+            onClick: onClose,
+            children: mergedLabels.cancelButton
+          }
+        ),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -7069,12 +7476,12 @@ var ModalTypeOfService = ({
           }
         )
       ] })
-    ] })
+    ] }) })
   ] }) }) });
 };
 
 // src/components/SortMenu/SortMenu.constants.ts
-var DEFAULT_LABELS15 = {
+var DEFAULT_LABELS16 = {
   id: {
     filterButtonText: "Filter",
     sortButtonText: "Urutkan Berdasarkan",
@@ -7116,7 +7523,7 @@ var getSortLabel = (value) => {
   const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
   return option?.label || "Rekomendasi";
 };
-var useStyles16 = makeStyles({
+var useStyles17 = makeStyles({
   container: {
     display: "flex",
     width: "100%",
@@ -7152,10 +7559,10 @@ var SortMenu = ({
   sortButtonText: deprecatedSortButtonText,
   clearFiltersText: deprecatedClearFiltersText
 }) => {
-  const styles = useStyles16();
+  const styles = useStyles17();
   const labels = React.useMemo(
     () => ({
-      ...DEFAULT_LABELS15[language],
+      ...DEFAULT_LABELS16[language],
       ...customLabels,
       // Fallback to deprecated props if provided
       ...deprecatedFilterButtonText && {
@@ -7267,7 +7674,7 @@ var SortMenu = ({
 };
 
 // src/components/ModalFilterTicket/ModalFilterTicket.constants.ts
-var DEFAULT_LABELS16 = {
+var DEFAULT_LABELS17 = {
   id: {
     title: "Filter dengan",
     serviceTypeLabel: "Jenis Layanan",
@@ -7328,7 +7735,7 @@ var DEFAULT_DURATION_RANGE = {
   min: 0,
   max: 8
 };
-var useStyles17 = makeStyles({
+var useStyles18 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -7438,8 +7845,8 @@ var ModalFilterTicket = ({
   minDuration = DEFAULT_DURATION_RANGE.min,
   maxDuration = DEFAULT_DURATION_RANGE.max
 }) => {
-  const styles = useStyles17();
-  const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
+  const styles = useStyles18();
+  const mergedLabels = { ...DEFAULT_LABELS17[language], ...labels };
   const [rangeReady, setRangeReady] = useState(false);
   useEffect(() => {
     if (open) {
@@ -7749,7 +8156,7 @@ var ModalFilterTicket = ({
 };
 
 // src/components/DateFilter/DateFilter.constants.ts
-var DEFAULT_LABELS17 = {
+var DEFAULT_LABELS18 = {
   id: {
     prevButtonAriaLabel: "Tanggal sebelumnya",
     nextButtonAriaLabel: "Tanggal berikutnya",
@@ -7762,7 +8169,7 @@ var DEFAULT_LABELS17 = {
   }
 };
 var DEFAULT_SCROLL_AMOUNT = 150;
-var useStyles18 = makeStyles({
+var useStyles19 = makeStyles({
   container: {
     display: "flex",
     alignItems: "stretch",
@@ -7845,10 +8252,10 @@ var DateFilter = ({
   labels,
   isLoading = false
 }) => {
-  const styles = useStyles18();
+  const styles = useStyles19();
   const scrollRef = useRef(null);
   const mergedLabels = {
-    ...DEFAULT_LABELS17[language],
+    ...DEFAULT_LABELS18[language],
     ...labels
   };
   const handlePrev = () => {
@@ -7911,7 +8318,7 @@ var DateFilter = ({
 };
 
 // src/components/ModalSearchTicket/ModalSearchTicket.constants.ts
-var DEFAULT_LABELS18 = {
+var DEFAULT_LABELS19 = {
   id: {
     title: "Cari Jadwal Lainnya",
     fromLabel: "Dari",
@@ -7971,7 +8378,7 @@ var DEFAULT_FORM_VALUES = {
   typeOfService: "",
   passenger: ""
 };
-var useStyles19 = makeStyles({
+var useStyles20 = makeStyles({
   dialogSurface: {
     maxWidth: "900px",
     width: "100%"
@@ -8073,8 +8480,8 @@ var ModalSearchTicket = ({
   showRoundTrip = true,
   ...props
 }) => {
-  const styles = useStyles19();
-  const mergedLabels = { ...DEFAULT_LABELS18[language], ...labels };
+  const styles = useStyles20();
+  const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
   const { control, setValue, handleSubmit, watch } = useForm({
     defaultValues: {
       ...DEFAULT_FORM_VALUES,
@@ -8511,7 +8918,7 @@ var ModalSearchTicket = ({
 };
 
 // src/components/Stepper/Stepper.constants.ts
-var DEFAULT_LABELS19 = {
+var DEFAULT_LABELS20 = {
   id: {
     stepperBackgroundAlt: "Latar Belakang Stepper",
     ferryIconAlt: "Ikon Kapal"
@@ -8521,7 +8928,7 @@ var DEFAULT_LABELS19 = {
     ferryIconAlt: "Ferry Icon"
   }
 };
-var useStyles20 = makeStyles({
+var useStyles21 = makeStyles({
   stepperWrapper: {
     position: "relative",
     width: "100%",
@@ -8646,8 +9053,8 @@ var Stepper = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles20();
-  const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
+  const styles = useStyles21();
+  const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
   const currentStepIndex = useMemo(() => {
     if (typeof currentStep === "number") {
       return steps.findIndex((step) => step.number === currentStep);
@@ -8703,7 +9110,7 @@ var Stepper = ({
 };
 
 // src/components/CardOrdererInfo/CardOrdererInfo.constants.ts
-var DEFAULT_LABELS20 = {
+var DEFAULT_LABELS21 = {
   id: {
     title: "Informasi Pemesan",
     ordererName: "Nama Pemesan",
@@ -8717,7 +9124,7 @@ var DEFAULT_LABELS20 = {
     email: "Email"
   }
 };
-var useStyles21 = makeStyles({
+var useStyles22 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -8747,8 +9154,8 @@ var CardOrdererInfo = ({
   labels,
   className
 }) => {
-  const styles = useStyles21();
-  const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
+  const styles = useStyles22();
+  const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsx(Title3, { children: mergedLabels.title }),
     /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
@@ -8769,7 +9176,7 @@ var CardOrdererInfo = ({
 };
 
 // src/components/ModalListPassenger/ModalListPassenger.constants.ts
-var DEFAULT_LABELS21 = {
+var DEFAULT_LABELS22 = {
   id: {
     title: "Detail Penumpang",
     // sameAsOrderer: 'Sama Dengan Pemesan',
@@ -8799,7 +9206,7 @@ var DEFAULT_LABELS21 = {
     }
   }
 };
-var useStyles22 = makeStyles({
+var useStyles23 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -8854,8 +9261,8 @@ var ModalListPassenger = ({
   // sameAsOrderer,
   // onSameAsOrdererChange,
 }) => {
-  const styles = useStyles22();
-  const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
+  const styles = useStyles23();
+  const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   const handleClose = () => {
     onClose();
@@ -8986,7 +9393,7 @@ var ModalListPassenger = ({
 };
 
 // src/components/ModalPassengerForm/ModalPassengerForm.constants.ts
-var DEFAULT_LABELS22 = {
+var DEFAULT_LABELS23 = {
   id: {
     title: "Detail Penumpang",
     titleLabel: "Title",
@@ -9137,7 +9544,7 @@ var calculateAge = (birthDate) => {
   }
   return { years: Math.max(0, years), months: Math.max(0, months) };
 };
-var useStyles23 = makeStyles({
+var useStyles24 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -9317,10 +9724,10 @@ var ModalPassengerForm = ({
   ticketClassOptions,
   onScanComplete
 }) => {
-  const styles = useStyles23();
-  const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
+  const styles = useStyles24();
+  const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
   const mergedErrors = {
-    ...DEFAULT_LABELS22[language].errors,
+    ...DEFAULT_LABELS23[language].errors,
     ...labels?.errors
   };
   const displayTitle = title || mergedLabels.title;
@@ -10052,7 +10459,7 @@ var ModalPassengerForm = ({
 };
 
 // src/components/CardPassengerList/CardPassengerList.constants.ts
-var DEFAULT_LABELS23 = {
+var DEFAULT_LABELS24 = {
   id: {
     defaultTitle: "Data Penumpang",
     passengerPrefix: "Penumpang"
@@ -10095,7 +10502,7 @@ var getBadgeConfig = (ticketClass) => {
       };
   }
 };
-var useStyles24 = makeStyles({
+var useStyles25 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -10178,8 +10585,8 @@ var CardPassengerList = ({
   labels,
   className
 }) => {
-  const styles = useStyles24();
-  const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
+  const styles = useStyles25();
+  const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
@@ -10252,7 +10659,7 @@ var CardPassengerList = ({
 };
 
 // src/components/CardVehicleDetail/CardVehicleDetail.constants.ts
-var DEFAULT_LABELS24 = {
+var DEFAULT_LABELS25 = {
   id: {
     title: "Detail Kendaraan",
     vehicleNumberLabel: "Nomor Kendaraan",
@@ -10270,7 +10677,7 @@ var DEFAULT_LABELS24 = {
     noLabel: "No"
   }
 };
-var useStyles25 = makeStyles({
+var useStyles26 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -10310,8 +10717,8 @@ var CardVehicleDetail = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles25();
-  const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
+  const styles = useStyles26();
+  const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -10373,7 +10780,7 @@ var CardVehicleDetail = ({
 };
 
 // src/components/CardVehicleOwnerForm/CardVehicleOwnerForm.constants.ts
-var DEFAULT_LABELS25 = {
+var DEFAULT_LABELS26 = {
   id: {
     title: "Informasi Pemilik & Muatan",
     addOwnerButton: "Tambah Pemilik",
@@ -10481,7 +10888,7 @@ var DEFAULT_LABELS25 = {
     incrementQuantityAriaLabel: "Increase quantity"
   }
 };
-var useStyles26 = makeStyles({
+var useStyles27 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -10549,8 +10956,8 @@ var CardVehicleOwnerForm = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles26();
-  const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
+  const styles = useStyles27();
+  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
@@ -11338,7 +11745,7 @@ var CardVehicleOwnerForm = ({
 };
 
 // src/components/CardBookingTicket/CardBookingTicket.constants.ts
-var DEFAULT_LABELS26 = {
+var DEFAULT_LABELS27 = {
   id: {
     bookingDetails: "Booking Details",
     routeTitle: "Rute Perjalanan",
@@ -11374,7 +11781,7 @@ var DEFAULT_LABELS26 = {
     cancelDialogDismiss: "Cancel"
   }
 };
-var useStyles27 = makeStyles({
+var useStyles28 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -11538,8 +11945,8 @@ var CardBookingTicket = ({
   onPrevious,
   className
 }) => {
-  const styles = useStyles27();
-  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
+  const styles = useStyles28();
+  const mergedLabels = { ...DEFAULT_LABELS27[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: [
@@ -11741,7 +12148,7 @@ var CardBookingTicket = ({
 };
 
 // src/components/CardFAQ/CardFAQ.constants.ts
-var DEFAULT_LABELS27 = {
+var DEFAULT_LABELS28 = {
   id: {
     title: "Pertanyaan yang sering diajukan"
   },
@@ -11795,7 +12202,7 @@ var DEFAULT_FAQ_ITEMS = {
     }
   ]
 };
-var useStyles28 = makeStyles({
+var useStyles29 = makeStyles({
   faqSection: {
     // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
   },
@@ -11819,8 +12226,8 @@ var CardFAQ = ({
   items,
   className
 }) => {
-  const styles = useStyles28();
-  const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
+  const styles = useStyles29();
+  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
   const faqItems = items || DEFAULT_FAQ_ITEMS[language];
   return /* @__PURE__ */ jsxs(Card, { className: styles.faqCard, children: [
     /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.title }),
@@ -11857,7 +12264,7 @@ var CardFAQ = ({
 };
 
 // src/components/CardAddon/CardAddon.constants.ts
-var DEFAULT_LABELS28 = {
+var DEFAULT_LABELS29 = {
   id: {
     viewDetail: "Lihat detail",
     totalPrice: "Total Harga",
@@ -11873,7 +12280,7 @@ var DEFAULT_LABELS28 = {
     currencySymbol: "Rp"
   }
 };
-var useStyles29 = makeStyles({
+var useStyles30 = makeStyles({
   card: {
     backgroundColor: tokens.colorNeutralBackground1,
     boxShadow: tokens.shadow4,
@@ -12046,8 +12453,8 @@ var CardAddon = ({
   children,
   className
 }) => {
-  const styles = useStyles29();
-  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
+  const styles = useStyles30();
+  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
   return /* @__PURE__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.gapRow, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.titleDivider, children: [
       /* @__PURE__ */ jsx(Title3, { className: styles.textTitle, children: title }),
@@ -12258,7 +12665,7 @@ var CardAddon = ({
 };
 
 // src/components/CardMealCatalog/CardMealCatalog.constants.ts
-var DEFAULT_LABELS29 = {
+var DEFAULT_LABELS30 = {
   id: {
     addButton: "Tambah",
     currencySymbol: "Rp",
@@ -12274,7 +12681,7 @@ var DEFAULT_LABELS29 = {
     searchPlaceholder: "Search for food or drinks you want"
   }
 };
-var useStyles30 = makeStyles({
+var useStyles31 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -12418,8 +12825,8 @@ var CardMealCatalog = ({
   searchValue,
   onSearchChange
 }) => {
-  const styles = useStyles30();
-  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
+  const styles = useStyles31();
+  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.banner, children: [
       /* @__PURE__ */ jsx("div", { className: styles.bannerOverlay }),
@@ -12524,7 +12931,7 @@ var CardMealCatalog = ({
 };
 
 // src/components/CardReview/CardReview.constants.ts
-var DEFAULT_LABELS30 = {
+var DEFAULT_LABELS31 = {
   id: {
     defaultTitle: "Tinjauan"
   },
@@ -12532,7 +12939,7 @@ var DEFAULT_LABELS30 = {
     defaultTitle: "Review"
   }
 };
-var useStyles31 = makeStyles({
+var useStyles32 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -12583,8 +12990,8 @@ var CardReview = ({
   className,
   headerAction
 }) => {
-  const styles = useStyles31();
-  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
+  const styles = useStyles32();
+  const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
       /* @__PURE__ */ jsx(Subtitle1, { className: styles.headerTitle, children: title || mergedLabels.defaultTitle }),
@@ -12631,7 +13038,7 @@ var CardReview = ({
 };
 
 // src/components/CardReviewPassenger/CardReviewPassenger.constants.ts
-var DEFAULT_LABELS31 = {
+var DEFAULT_LABELS32 = {
   id: {
     title: "Penumpang",
     idNumber: "Nomor ID"
@@ -12641,7 +13048,7 @@ var DEFAULT_LABELS31 = {
     idNumber: "ID Number"
   }
 };
-var useStyles32 = makeStyles({
+var useStyles33 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -12739,8 +13146,8 @@ var CardReviewPassenger = ({
   passengers,
   className
 }) => {
-  const styles = useStyles32();
-  const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
+  const styles = useStyles33();
+  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
@@ -12783,7 +13190,7 @@ var CardReviewPassenger = ({
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts
-var DEFAULT_LABELS32 = {
+var DEFAULT_LABELS33 = {
   id: {
     defaultTitle: "Rincian Harga",
     totalPayment: "Total Pembayaran",
@@ -12819,7 +13226,7 @@ var DEFAULT_LABELS32 = {
     currencyPrefix: "Rp. "
   }
 };
-var useStyles33 = makeStyles({
+var useStyles34 = makeStyles({
   list: {
     margin: 0,
     padding: 0,
@@ -12841,7 +13248,7 @@ var PriceDetailsTerms = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles33();
+  const styles = useStyles34();
   const linkColor = tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
@@ -12861,7 +13268,7 @@ var PriceDetailsTerms = ({
     ] })
   ] });
 };
-var useStyles34 = makeStyles({
+var useStyles35 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -12938,8 +13345,8 @@ var CardPriceDetails = ({
   total,
   labels
 }) => {
-  const styles = useStyles34();
-  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
+  const styles = useStyles35();
+  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   const getVariantClass = (variant) => {
     switch (variant) {
@@ -12998,7 +13405,7 @@ var CardPriceDetails = ({
 };
 
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
-var DEFAULT_LABELS33 = {
+var DEFAULT_LABELS34 = {
   id: {
     selectAriaLabel: "Pilih metode pembayaran"
   },
@@ -13006,7 +13413,7 @@ var DEFAULT_LABELS33 = {
     selectAriaLabel: "Select payment method"
   }
 };
-var useStyles35 = makeStyles({
+var useStyles36 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13066,8 +13473,8 @@ var CardPaymentMethodList = ({
   selectedValue,
   onSelect
 }) => {
-  const styles = useStyles35();
-  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
+  const styles = useStyles36();
+  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
     index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
     /* @__PURE__ */ jsx(Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: category.value, children: [
@@ -13116,7 +13523,7 @@ var CardPaymentMethodList = ({
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
-var DEFAULT_LABELS34 = {
+var DEFAULT_LABELS35 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -13124,7 +13531,7 @@ var DEFAULT_LABELS34 = {
     title: "Payment Method"
   }
 };
-var useStyles36 = makeStyles({
+var useStyles37 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13161,8 +13568,8 @@ var CardPaymentGuide = ({
   guides,
   className
 }) => {
-  const styles = useStyles36();
-  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
+  const styles = useStyles37();
+  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     title && /* @__PURE__ */ jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsx(Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -13181,7 +13588,7 @@ var CardPaymentGuide = ({
 };
 
 // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
-var DEFAULT_LABELS35 = {
+var DEFAULT_LABELS36 = {
   id: {
     expiryPrefix: "Kode virtual akun berlaku sampai",
     copyCodeButton: "Salin Kode",
@@ -13199,7 +13606,7 @@ var DEFAULT_LABELS35 = {
     currencySymbol: "Rp."
   }
 };
-var useStyles37 = makeStyles({
+var useStyles38 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13281,8 +13688,8 @@ var CardPaymentInfo = ({
   onCopyVA,
   onCheckStatus
 }) => {
-  const styles = useStyles37();
-  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
+  const styles = useStyles38();
+  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.expiryPrefix }),
@@ -13340,7 +13747,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS36 = {
+var DEFAULT_LABELS37 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -13370,7 +13777,7 @@ var DEFAULT_LABELS36 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles38 = makeStyles({
+var useStyles39 = makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -13440,8 +13847,8 @@ var CardStatusOrder = ({
   onClickViewTicket,
   className
 }) => {
-  const styles = useStyles38();
-  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
+  const styles = useStyles39();
+  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
   const displayStatus = statusLabel || mergedLabels.defaultStatus;
   const displayTitle = title || mergedLabels.defaultTitle;
   const displayDescription = description || mergedLabels.defaultDescription;
@@ -13538,7 +13945,7 @@ var CardStatusOrder = ({
 };
 
 // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
-var DEFAULT_LABELS37 = {
+var DEFAULT_LABELS38 = {
   id: {
     title: "Rincian Harga",
     addonHeader: "Add On",
@@ -13564,7 +13971,7 @@ var DEFAULT_LABELS37 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles39 = makeStyles({
+var useStyles40 = makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -13691,8 +14098,8 @@ var ModalPriceDetail = ({
   grandTotal,
   ...props
 }) => {
-  const styles = useStyles39();
-  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
+  const styles = useStyles40();
+  const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
   return /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -13834,7 +14241,7 @@ var ModalPriceDetail = ({
 // src/components/FileUpload/FileUpload.constants.ts
 var ACCEPTED_FILES = ".pdf,.jpg,.jpeg,.png";
 var MAX_FILE_SIZE_MB = 10;
-var DEFAULT_LABELS38 = {
+var DEFAULT_LABELS39 = {
   id: {
     placeholder: "Ketuk untuk pilih file",
     maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
@@ -13852,7 +14259,7 @@ var DEFAULT_LABELS38 = {
     downloadTemplateDocument: "Download Template Document"
   }
 };
-var useStyles40 = makeStyles({
+var useStyles41 = makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -13879,7 +14286,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles40();
+  const styles = useStyles41();
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
     /* @__PURE__ */ jsx(
       DialogTitle,
@@ -13992,7 +14399,7 @@ var FileUpload = React.forwardRef(
     pdfIcon,
     downloadTemplateDocument = false
   }, ref) => {
-    const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
+    const mergedLabels = { ...DEFAULT_LABELS39[language], ...customLabels };
     const styles = uploadStyles();
     const fileInputRef = useRef(null);
     const [, setIsDragOver] = useState(false);
@@ -14430,11 +14837,11 @@ function hexToRgba(hex, alpha = 1) {
 }
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS39 = {
+var DEFAULT_LABELS40 = {
   id: {},
   en: {}
 };
-var useStyles41 = makeStyles({
+var useStyles42 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -14494,8 +14901,8 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles41();
-  ({ ...DEFAULT_LABELS39[language], ...labels });
+  const styles = useStyles42();
+  ({ ...DEFAULT_LABELS40[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
   };
@@ -14524,6 +14931,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, calculateAge, getBadgeConfig, getModalPreset, getSortLabel, hexToRgba };
+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_LABELS18 as DateFilterDefaultLabels, EmptyContent, DEFAULT_LABELS11 as EmptyContentDefaultLabels, 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_LABELS17 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