@asdp/ferryui 0.1.22-dev.9182 → 0.1.22-dev.9197

package/dist/index.mjs

@@ -153,6 +153,7 @@ var ModalIllustration = ({
                 type: "button",
                 appearance: primaryButton.appearance || "primary",
                 onClick: primaryButton.onClick,
+                shape: "circular",
                 children: primaryButton.text
               }
             ),
@@ -163,6 +164,7 @@ var ModalIllustration = ({
                 type: "button",
                 appearance: secondaryButton.appearance || "outline",
                 onClick: secondaryButton.onClick,
+                shape: "circular",
                 children: secondaryButton.text
               }
             )
@@ -1877,7 +1879,8 @@ var DEFAULT_LABELS6 = {
     hotelLabel: "Hotel",
     hotelDescription: "Layanan pemesanan hotel",
     otherLabel: "Lainnya",
-    otherDescription: "Layanan lainnya",
+    otherDescription: "Akses fitur tambahan dan pengaturan.",
+    modalTitle: "Daftar Menu",
     serviceAriaLabel: "Layanan"
   },
   en: {
@@ -1889,8 +1892,9 @@ var DEFAULT_LABELS6 = {
     skptDescription: "Integrated Passenger Ticketing System",
     hotelLabel: "Hotel",
     hotelDescription: "Hotel Booking Service",
-    otherLabel: "Other",
-    otherDescription: "Other Services",
+    otherLabel: "More",
+    otherDescription: "Access additional features and settings.",
+    modalTitle: "Service List",
     serviceAriaLabel: "Service"
   }
 };
@@ -1931,12 +1935,191 @@ var ALIAS_MENU_ITEMS = [
 var BP_TABLET = `max-width: ${extendedTokens.breakpointXl}`;
 var BP_MOBILE = `max-width: ${extendedTokens.breakpointMd}`;
 var useStyles6 = makeStyles({
+  dialogSurface: {
+    maxWidth: "900px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  content: {
+    paddingTop: "8px",
+    paddingBottom: "16px"
+  },
+  // Horizontal row layout: icon left, text right — same as CardServiceMenu desktop
+  menuItem: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    padding: "12px 16px",
+    borderRadius: tokens.borderRadiusMedium,
+    cursor: "pointer",
+    textAlign: "left",
+    transition: "background-color 0.2s ease",
+    color: tokens.colorNeutralForeground1,
+    backgroundColor: tokens.colorNeutralBackground1,
+    border: "none",
+    gap: "12px",
+    width: "100%",
+    "&:hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover
+    },
+    [`@media (${BP_TABLET})`]: {
+      padding: "10px 10px",
+      gap: "8px"
+    },
+    [`@media (${BP_MOBILE})`]: {
+      flexDirection: "column",
+      alignItems: "center",
+      textAlign: "center",
+      padding: "8px 6px",
+      gap: "4px"
+    }
+  },
+  logoWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  logo: {
+    height: "32px",
+    width: "32px",
+    flexShrink: 0,
+    objectFit: "contain",
+    [`@media (${BP_TABLET})`]: {
+      height: "28px",
+      width: "28px"
+    },
+    [`@media (${BP_MOBILE})`]: {
+      height: "24px",
+      width: "24px"
+    }
+  },
+  textContent: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    minWidth: 0,
+    width: "100%",
+    [`@media (${BP_MOBILE})`]: {
+      alignItems: "center"
+    }
+  },
+  label: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    lineHeight: "1.2",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    width: "100%",
+    [`@media (${BP_TABLET})`]: {
+      fontSize: tokens.fontSizeBase200
+    },
+    [`@media (${BP_MOBILE})`]: {
+      fontSize: tokens.fontSizeBase100,
+      textAlign: "center"
+    }
+  },
+  description: {
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground2,
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    lineHeight: "1.4",
+    [`@media (${BP_TABLET})`]: {
+      fontSize: tokens.fontSizeBase100,
+      WebkitLineClamp: 1
+    },
+    [`@media (${BP_MOBILE})`]: {
+      display: "none"
+    }
+  }
+});
+var ModalListMenuService = ({
+  open = false,
+  onClose = () => {
+  },
+  title = "",
+  menuItems = ALIAS_MENU_ITEMS,
+  onItemClick,
+  showDescriptions = true
+}) => {
+  const styles = useStyles6();
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => {
+        if (!data.open) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+        /* @__PURE__ */ jsx(
+          DialogTitle,
+          {
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: onClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx(Row, { gutterWidth: 0, children: menuItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 6, sm: 6, md: 3, lg: 3, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: styles.menuItem,
+            onClick: () => onItemClick?.(item),
+            "aria-label": item.name,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: item.imageUrl,
+                  alt: item.name,
+                  className: styles.logo
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
+                showDescriptions && /* @__PURE__ */ jsx(
+                  MenuItemDescription,
+                  {
+                    description: item.description,
+                    className: styles.description
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }, item.id)) }) })
+      ] }) })
+    }
+  );
+};
+var BP_TABLET2 = `max-width: ${extendedTokens.breakpointXl}`;
+var BP_MOBILE2 = `max-width: ${extendedTokens.breakpointMd}`;
+var useStyles7 = makeStyles({
   card: {
     width: "100%",
     boxSizing: "border-box",
     padding: "0px",
     borderRadius: tokens.borderRadiusXLarge,
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       borderRadius: tokens.borderRadiusLarge
     }
   },
@@ -1946,7 +2129,7 @@ var useStyles6 = makeStyles({
     flexDirection: "column",
     justifyContent: "space-around",
     // Tablet + Mobile: horizontal scroll row
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       flexDirection: "row",
       overflowX: "auto",
       overflowY: "visible",
@@ -1956,7 +2139,7 @@ var useStyles6 = makeStyles({
       // Thin scrollbar on tablet, hidden on mobile
       scrollbarWidth: "thin"
     },
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       scrollbarWidth: "none"
     }
   },
@@ -1980,7 +2163,7 @@ var useStyles6 = makeStyles({
       backgroundColor: tokens.colorNeutralBackground1Hover
     },
     // Tablet: compact column, fixed width, description visible (1 line)
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       flexDirection: "column",
       alignItems: "center",
       textAlign: "center",
@@ -1992,7 +2175,7 @@ var useStyles6 = makeStyles({
       scrollSnapAlign: "start"
     },
     // Mobile: even tighter, no description
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       padding: "8px 6px",
       width: "72px",
       gap: "4px"
@@ -2012,16 +2195,32 @@ var useStyles6 = makeStyles({
     justifyContent: "center",
     flexShrink: 0
   },
+  moreIconOuter: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%",
+    width: "32px",
+    height: "32px",
+    [`@media (${BP_TABLET2})`]: {
+      width: "28px",
+      height: "28px"
+    },
+    [`@media (${BP_MOBILE2})`]: {
+      width: "24px",
+      height: "24px"
+    }
+  },
   logo: {
     height: "32px",
     width: "32px",
     flexShrink: 0,
     objectFit: "contain",
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       height: "28px",
       width: "28px"
     },
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       height: "24px",
       width: "24px"
     }
@@ -2033,7 +2232,7 @@ var useStyles6 = makeStyles({
     minWidth: 0,
     width: "100%",
     // allow ellipsis to work
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       alignItems: "center",
       gap: "2px"
     }
@@ -2042,7 +2241,7 @@ var useStyles6 = makeStyles({
     fontSize: tokens.fontSizeBase300,
     fontWeight: tokens.fontWeightSemibold,
     lineHeight: "1.2",
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       fontSize: tokens.fontSizeBase200,
       whiteSpace: "nowrap",
       overflow: "hidden",
@@ -2050,7 +2249,7 @@ var useStyles6 = makeStyles({
       width: "100%",
       textAlign: "center"
     },
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       fontSize: tokens.fontSizeBase100
     }
   },
@@ -2066,7 +2265,7 @@ var useStyles6 = makeStyles({
     textOverflow: "ellipsis",
     lineHeight: "1.4",
     // Tablet: 1-line clamp, compact
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       fontSize: tokens.fontSizeBase100,
       WebkitLineClamp: 1,
       whiteSpace: "nowrap",
@@ -2074,7 +2273,7 @@ var useStyles6 = makeStyles({
       textAlign: "center"
     },
     // Mobile: hide description entirely
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       display: "none"
     }
   },
@@ -2091,13 +2290,13 @@ var useStyles6 = makeStyles({
     [`@media (min-width: ${extendedTokens.breakpointXl})`]: {
       display: "none"
     },
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       display: "none"
     }
   },
   dividerHorizontal: {
     // Only visible on desktop (vertical layout)
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       display: "none"
     }
   }
@@ -2113,60 +2312,110 @@ var CardServiceMenu = ({
   isLoading = false,
   skeletonCount = 4
 }) => {
-  const styles = useStyles6();
-  ({ ...DEFAULT_LABELS6[language], ...labels });
+  const styles = useStyles7();
+  const mergedLabels = { ...DEFAULT_LABELS6[language], ...labels };
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const getMenuItemClass = (serviceId) => {
-    const isActive = activeServiceId === serviceId;
+    const isActive = serviceId !== void 0 && activeServiceId === serviceId;
     return mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
   };
-  return /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsx("div", { className: styles.menuList, children: isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
-      /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
-      /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
-        /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
-        showDescriptions && /* @__PURE__ */ jsx(Skeleton, { className: styles.description, children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
-      ] })
-    ] }),
-    index < skeletonCount - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
-      /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
-    ] })
-  ] }, `skeleton-${index}`)) : menuItems.map((item, index) => {
-    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      /* @__PURE__ */ jsxs(
+  const MAX_ITEMS = 5;
+  const isOverflow = menuItems.length > MAX_ITEMS;
+  const displayItems = isOverflow ? menuItems.slice(0, MAX_ITEMS - 1) : menuItems;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Card, { className: mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxs("div", { className: styles.menuList, children: [
+      isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
+          /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
+            /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
+            showDescriptions && /* @__PURE__ */ jsx(Skeleton, { className: styles.description, children: /* @__PURE__ */ jsx(SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
+          ] })
+        ] }),
+        index < skeletonCount - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
+          /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
+        ] })
+      ] }, `skeleton-${index}`)) : displayItems.map((item, index) => {
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: getMenuItemClass(item.id),
+              onClick: () => onServiceClick?.(item.id),
+              "aria-label": item.name,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: item.imageUrl,
+                    alt: item.name,
+                    className: styles.logo
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
+                  showDescriptions && /* @__PURE__ */ jsx(
+                    MenuItemDescription,
+                    {
+                      description: item.description,
+                      className: styles.description
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          (index < displayItems.length - 1 || isOverflow) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
+            /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
+          ] })
+        ] }, item.id);
+      }),
+      !isLoading && isOverflow && /* @__PURE__ */ jsxs(
         Button,
         {
-          className: getMenuItemClass(item.id),
-          onClick: () => onServiceClick?.(item.id),
-          "aria-label": item.name,
+          className: getMenuItemClass(),
+          onClick: () => setIsModalOpen(true),
+          "aria-label": mergedLabels.otherLabel,
           children: [
-            /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
-              "img",
+            /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx("div", { className: styles.moreIconOuter, children: /* @__PURE__ */ jsx(
+              Icon,
               {
-                src: item.imageUrl,
-                alt: item.name,
-                className: styles.logo
+                icon: "fluent:apps-24-regular",
+                fontSize: "32px",
+                color: tokens.colorNeutralForeground1
               }
-            ) }),
+            ) }) }),
             /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
-              /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
+              /* @__PURE__ */ jsx("span", { className: styles.label, children: mergedLabels.otherLabel }),
               showDescriptions && /* @__PURE__ */ jsx(
                 MenuItemDescription,
                 {
-                  description: item.description,
+                  description: mergedLabels.otherDescription,
                   className: styles.description
                 }
               )
             ] })
           ]
         }
-      ),
-      index < menuItems.length - 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Divider, { className: styles.dividerHorizontal }),
-        /* @__PURE__ */ jsx(Divider, { vertical: true, className: styles.dividerVertical })
-      ] })
-    ] }, item.id);
-  }) }) });
+      )
+    ] }) }),
+    !isLoading && isOverflow && /* @__PURE__ */ jsx(
+      ModalListMenuService,
+      {
+        open: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        title: mergedLabels.modalTitle,
+        menuItems,
+        onItemClick: (item) => {
+          setIsModalOpen(false);
+          onServiceClick?.(item.id);
+        },
+        showDescriptions
+      }
+    )
+  ] });
 };
 var MenuItemDescription = ({ description, className }) => {
   const ref = useRef(null);
@@ -2420,7 +2669,7 @@ var COUNTRIES = [
   { value: "PG", label: "Papua New Guinea", flag: "twemoji:flag-papua-new-guinea" }
 ];
 var PhoneInput = PhoneInputComponent.default || PhoneInputComponent;
-var useStyles7 = makeStyles({
+var useStyles8 = makeStyles({
   field: {
     display: "flex",
     flexDirection: "column",
@@ -2758,7 +3007,7 @@ var InputDynamic = ({
   labels,
   menuPlacement
 }) => {
-  const styles = useStyles7();
+  const styles = useStyles8();
   const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
   const [showPassword, setShowPassword] = useState(false);
   const [isPhoneMode, setIsPhoneMode] = useState(false);
@@ -3832,7 +4081,7 @@ var DEFAULT_LABELS8 = {
     otherDescription: "Other Services"
   }
 };
-var useStyles8 = makeStyles({
+var useStyles9 = makeStyles({
   card: {
     position: "relative",
     width: "100%",
@@ -3970,7 +4219,7 @@ var CardTicketSearch = ({
   menuItems,
   isLoadingServiceMenu
 }) => {
-  const styles = useStyles8();
+  const styles = useStyles9();
   const labels = React.useMemo(
     () => ({ ...DEFAULT_LABELS8[language], ...customLabels }),
     [language, customLabels]
@@ -4482,7 +4731,7 @@ var DEFAULT_LABELS9 = {
     swapAriaLabel: "Swap origin and destination"
   }
 };
-var useStyles9 = makeStyles({
+var useStyles10 = makeStyles({
   cardSearchTicket: {
     borderRadius: "32px",
     // borderBottomLeftRadius: '0',
@@ -4564,7 +4813,7 @@ var CardTicketSearchSummary = ({
   showSwapButton = false,
   children
 }) => {
-  const styles = useStyles9();
+  const styles = useStyles10();
   const mergedLabels = { ...DEFAULT_LABELS9[language], ...labels };
   const { width } = useWindowSize();
   const getCircularConfig = () => {
@@ -4893,7 +5142,7 @@ var DEFAULT_LABELS10 = {
     popularHarborHeader: "Popular Harbor"
   }
 };
-var useStyles10 = makeStyles({
+var useStyles11 = makeStyles({
   dialogTitle: {
     display: "flex",
     justifyContent: "space-between",
@@ -5026,7 +5275,7 @@ var ModalSearchHarbor = ({
   popularHarbors,
   showButtonFavorite = true
 }) => {
-  const styles = useStyles10();
+  const styles = useStyles11();
   const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
   const handleSelect = (harbor) => {
     onAddLastSearched(harbor);
@@ -5216,7 +5465,7 @@ var DEFAULT_LABELS11 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles11 = makeStyles({
+var useStyles12 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -5336,7 +5585,7 @@ var ModalSelectDate = ({
   dateFormat = "DD MMMM YYYY",
   showRoundtrip = true
 }) => {
-  const styles = useStyles11();
+  const styles = useStyles12();
   const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
   useEffect(() => {
     moment.locale(language === "id" ? "id" : "en");
@@ -5578,7 +5827,7 @@ var DEFAULT_LABELS12 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles12 = makeStyles({
+var useStyles13 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -5663,7 +5912,7 @@ var ModalService = ({
   isLoading = false,
   isError = false
 }) => {
-  const styles = useStyles12();
+  const styles = useStyles13();
   const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   const [selectedServices, setSelectedServices] = useState(selectedServiceIds);
@@ -5785,7 +6034,7 @@ var DEFAULT_LABELS13 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles13 = makeStyles({
+var useStyles14 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -5865,7 +6114,7 @@ var ModalTotalPassengers = ({
   maxPassengers = 10,
   infoMessage
 }) => {
-  const styles = useStyles13();
+  const styles = useStyles14();
   const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
   const [passengers, setPassengers] = useState([]);
   const [openItems, setOpenItems] = useState([]);
@@ -6162,7 +6411,7 @@ var DEFAULT_VEHICLE_ICONS = {
   bigTruck: "/assets/images/icons/big-truck.webp",
   looseLoad: "/assets/images/icons/loose-load.webp"
 };
-var useStyles14 = makeStyles({
+var useStyles15 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6216,7 +6465,7 @@ var ModalTypeOfService = ({
   onSave,
   renderImage
 }) => {
-  const styles = useStyles14();
+  const styles = useStyles15();
   const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
   const [selectedServiceId, setSelectedServiceId] = useState(
     selectedService?.id || 0
@@ -6497,7 +6746,7 @@ var getSortLabel = (value) => {
   const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
   return option?.label || "Rekomendasi";
 };
-var useStyles15 = makeStyles({
+var useStyles16 = makeStyles({
   container: {
     display: "flex",
     width: "100%",
@@ -6533,7 +6782,7 @@ var SortMenu = ({
   sortButtonText: deprecatedSortButtonText,
   clearFiltersText: deprecatedClearFiltersText
 }) => {
-  const styles = useStyles15();
+  const styles = useStyles16();
   const labels = React.useMemo(
     () => ({
       ...DEFAULT_LABELS15[language],
@@ -6709,7 +6958,7 @@ var DEFAULT_DURATION_RANGE = {
   min: 0,
   max: 8
 };
-var useStyles16 = makeStyles({
+var useStyles17 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6819,7 +7068,7 @@ var ModalFilterTicket = ({
   minDuration = DEFAULT_DURATION_RANGE.min,
   maxDuration = DEFAULT_DURATION_RANGE.max
 }) => {
-  const styles = useStyles16();
+  const styles = useStyles17();
   const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
   const [rangeReady, setRangeReady] = useState(false);
   useEffect(() => {
@@ -7143,7 +7392,7 @@ var DEFAULT_LABELS17 = {
   }
 };
 var DEFAULT_SCROLL_AMOUNT = 150;
-var useStyles17 = makeStyles({
+var useStyles18 = makeStyles({
   container: {
     display: "flex",
     alignItems: "stretch",
@@ -7226,7 +7475,7 @@ var DateFilter = ({
   labels,
   isLoading = false
 }) => {
-  const styles = useStyles17();
+  const styles = useStyles18();
   const scrollRef = useRef(null);
   const mergedLabels = {
     ...DEFAULT_LABELS17[language],
@@ -7352,7 +7601,7 @@ var DEFAULT_FORM_VALUES = {
   typeOfService: "",
   passenger: ""
 };
-var useStyles18 = makeStyles({
+var useStyles19 = makeStyles({
   dialogSurface: {
     maxWidth: "900px",
     width: "100%"
@@ -7454,7 +7703,7 @@ var ModalSearchTicket = ({
   showRoundTrip = true,
   ...props
 }) => {
-  const styles = useStyles18();
+  const styles = useStyles19();
   const mergedLabels = { ...DEFAULT_LABELS18[language], ...labels };
   const { control, setValue, handleSubmit, watch } = useForm({
     defaultValues: {
@@ -7902,7 +8151,7 @@ var DEFAULT_LABELS19 = {
     ferryIconAlt: "Ferry Icon"
   }
 };
-var useStyles19 = makeStyles({
+var useStyles20 = makeStyles({
   stepperWrapper: {
     position: "relative",
     width: "100%",
@@ -8027,7 +8276,7 @@ var Stepper = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles19();
+  const styles = useStyles20();
   const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
   const currentStepIndex = useMemo(() => {
     if (typeof currentStep === "number") {
@@ -8098,7 +8347,7 @@ var DEFAULT_LABELS20 = {
     email: "Email"
   }
 };
-var useStyles20 = makeStyles({
+var useStyles21 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -8128,7 +8377,7 @@ var CardOrdererInfo = ({
   labels,
   className
 }) => {
-  const styles = useStyles20();
+  const styles = useStyles21();
   const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsx(Title3, { children: mergedLabels.title }),
@@ -8180,7 +8429,7 @@ var DEFAULT_LABELS21 = {
     }
   }
 };
-var useStyles21 = makeStyles({
+var useStyles22 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -8235,7 +8484,7 @@ var ModalListPassenger = ({
   // sameAsOrderer,
   // onSameAsOrdererChange,
 }) => {
-  const styles = useStyles21();
+  const styles = useStyles22();
   const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   const handleClose = () => {
@@ -8491,7 +8740,7 @@ var TYPE_OPTIONS = [
     value: "lainnya"
   }
 ];
-var useStyles22 = makeStyles({
+var useStyles23 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -8669,7 +8918,7 @@ var ModalPassengerForm = ({
   ticketClassOptions,
   onScanComplete
 }) => {
-  const styles = useStyles22();
+  const styles = useStyles23();
   const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
   const mergedErrors = {
     ...DEFAULT_LABELS22[language].errors,
@@ -9424,7 +9673,7 @@ var getBadgeConfig = (ticketClass) => {
       };
   }
 };
-var useStyles23 = makeStyles({
+var useStyles24 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -9507,7 +9756,7 @@ var CardPassengerList = ({
   labels,
   className
 }) => {
-  const styles = useStyles23();
+  const styles = useStyles24();
   const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
@@ -9599,7 +9848,7 @@ var DEFAULT_LABELS24 = {
     noLabel: "No"
   }
 };
-var useStyles24 = makeStyles({
+var useStyles25 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -9639,7 +9888,7 @@ var CardVehicleDetail = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles24();
+  const styles = useStyles25();
   const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxs(
@@ -9810,7 +10059,7 @@ var DEFAULT_LABELS25 = {
     incrementQuantityAriaLabel: "Increase quantity"
   }
 };
-var useStyles25 = makeStyles({
+var useStyles26 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -9878,7 +10127,7 @@ var CardVehicleOwnerForm = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles25();
+  const styles = useStyles26();
   const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
@@ -10693,7 +10942,7 @@ var DEFAULT_LABELS26 = {
     currencySymbol: "IDR"
   }
 };
-var useStyles26 = makeStyles({
+var useStyles27 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -10826,7 +11075,7 @@ var CardBookingTicket = ({
   onPrevious,
   className
 }) => {
-  const styles = useStyles26();
+  const styles = useStyles27();
   const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxs(Card, { className: styles.bookingDetailTop, children: [
@@ -11019,7 +11268,7 @@ var DEFAULT_FAQ_ITEMS = {
     }
   ]
 };
-var useStyles27 = makeStyles({
+var useStyles28 = makeStyles({
   faqSection: {
     // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
   },
@@ -11043,7 +11292,7 @@ var CardFAQ = ({
   items,
   className
 }) => {
-  const styles = useStyles27();
+  const styles = useStyles28();
   const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
   const faqItems = items || DEFAULT_FAQ_ITEMS[language];
   return /* @__PURE__ */ jsxs(Card, { className: styles.faqCard, children: [
@@ -11097,7 +11346,7 @@ var DEFAULT_LABELS28 = {
     currencySymbol: "Rp"
   }
 };
-var useStyles28 = makeStyles({
+var useStyles29 = makeStyles({
   card: {
     backgroundColor: tokens.colorNeutralBackground1,
     boxShadow: tokens.shadow4,
@@ -11270,7 +11519,7 @@ var CardAddon = ({
   children,
   className
 }) => {
-  const styles = useStyles28();
+  const styles = useStyles29();
   const mergedLabels = { ...DEFAULT_LABELS28[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: [
@@ -11498,7 +11747,7 @@ var DEFAULT_LABELS29 = {
     searchPlaceholder: "Search for food or drinks you want"
   }
 };
-var useStyles29 = makeStyles({
+var useStyles30 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -11642,7 +11891,7 @@ var CardMealCatalog = ({
   searchValue,
   onSearchChange
 }) => {
-  const styles = useStyles29();
+  const styles = useStyles30();
   const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.banner, children: [
@@ -11756,7 +12005,7 @@ var DEFAULT_LABELS30 = {
     defaultTitle: "Review"
   }
 };
-var useStyles30 = makeStyles({
+var useStyles31 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -11807,7 +12056,7 @@ var CardReview = ({
   className,
   headerAction
 }) => {
-  const styles = useStyles30();
+  const styles = useStyles31();
   const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
@@ -11865,7 +12114,7 @@ var DEFAULT_LABELS31 = {
     idNumber: "ID Number"
   }
 };
-var useStyles31 = makeStyles({
+var useStyles32 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -11963,7 +12212,7 @@ var CardReviewPassenger = ({
   passengers,
   className
 }) => {
-  const styles = useStyles31();
+  const styles = useStyles32();
   const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
@@ -12043,7 +12292,7 @@ var DEFAULT_LABELS32 = {
     currencyPrefix: "Rp. "
   }
 };
-var useStyles32 = makeStyles({
+var useStyles33 = makeStyles({
   list: {
     margin: 0,
     padding: 0,
@@ -12065,7 +12314,7 @@ var PriceDetailsTerms = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles32();
+  const styles = useStyles33();
   const linkColor = tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
@@ -12085,7 +12334,7 @@ var PriceDetailsTerms = ({
     ] })
   ] });
 };
-var useStyles33 = makeStyles({
+var useStyles34 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -12162,7 +12411,7 @@ var CardPriceDetails = ({
   total,
   labels
 }) => {
-  const styles = useStyles33();
+  const styles = useStyles34();
   const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   const getVariantClass = (variant) => {
@@ -12230,7 +12479,7 @@ var DEFAULT_LABELS33 = {
     selectAriaLabel: "Select payment method"
   }
 };
-var useStyles34 = makeStyles({
+var useStyles35 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -12290,7 +12539,7 @@ var CardPaymentMethodList = ({
   selectedValue,
   onSelect
 }) => {
-  const styles = useStyles34();
+  const styles = useStyles35();
   const mergedLabels = { ...DEFAULT_LABELS33[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, {}) }),
@@ -12348,7 +12597,7 @@ var DEFAULT_LABELS34 = {
     title: "Payment Method"
   }
 };
-var useStyles35 = makeStyles({
+var useStyles36 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -12385,7 +12634,7 @@ var CardPaymentGuide = ({
   guides,
   className
 }) => {
-  const styles = useStyles35();
+  const styles = useStyles36();
   const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
@@ -12423,7 +12672,7 @@ var DEFAULT_LABELS35 = {
     currencySymbol: "Rp."
   }
 };
-var useStyles36 = makeStyles({
+var useStyles37 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -12505,7 +12754,7 @@ var CardPaymentInfo = ({
   onCopyVA,
   onCheckStatus
 }) => {
-  const styles = useStyles36();
+  const styles = useStyles37();
   const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
@@ -12594,7 +12843,7 @@ var DEFAULT_LABELS36 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles37 = makeStyles({
+var useStyles38 = makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -12664,7 +12913,7 @@ var CardStatusOrder = ({
   onClickViewTicket,
   className
 }) => {
-  const styles = useStyles37();
+  const styles = useStyles38();
   const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   const displayStatus = statusLabel || mergedLabels.defaultStatus;
   const displayTitle = title || mergedLabels.defaultTitle;
@@ -12788,7 +13037,7 @@ var DEFAULT_LABELS37 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles38 = makeStyles({
+var useStyles39 = makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -12915,7 +13164,7 @@ var ModalPriceDetail = ({
   grandTotal,
   ...props
 }) => {
-  const styles = useStyles38();
+  const styles = useStyles39();
   const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
   return /* @__PURE__ */ jsx(
     Dialog,
@@ -13074,7 +13323,7 @@ var DEFAULT_LABELS38 = {
     requiredError: "is required"
   }
 };
-var useStyles39 = makeStyles({
+var useStyles40 = makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -13101,7 +13350,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles39();
+  const styles = useStyles40();
   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,
@@ -13614,7 +13863,7 @@ var DEFAULT_LABELS39 = {
   id: {},
   en: {}
 };
-var useStyles40 = makeStyles({
+var useStyles41 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13674,7 +13923,7 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles40();
+  const styles = useStyles41();
   ({ ...DEFAULT_LABELS39[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
@@ -13703,185 +13952,6 @@ var CardProfileMenu = ({
     }
   ) });
 };
-var BP_TABLET2 = `max-width: ${extendedTokens.breakpointXl}`;
-var BP_MOBILE2 = `max-width: ${extendedTokens.breakpointMd}`;
-var useStyles41 = makeStyles({
-  dialogSurface: {
-    maxWidth: "900px",
-    width: "100%"
-  },
-  closeButton: {
-    minWidth: "32px",
-    minHeight: "32px"
-  },
-  content: {
-    paddingTop: "8px",
-    paddingBottom: "16px"
-  },
-  // Horizontal row layout: icon left, text right — same as CardServiceMenu desktop
-  menuItem: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "flex-start",
-    padding: "12px 16px",
-    borderRadius: tokens.borderRadiusMedium,
-    cursor: "pointer",
-    textAlign: "left",
-    transition: "background-color 0.2s ease",
-    color: tokens.colorNeutralForeground1,
-    backgroundColor: tokens.colorNeutralBackground1,
-    border: "none",
-    gap: "12px",
-    width: "100%",
-    "&:hover": {
-      backgroundColor: tokens.colorNeutralBackground1Hover
-    },
-    [`@media (${BP_TABLET2})`]: {
-      padding: "10px 10px",
-      gap: "8px"
-    },
-    [`@media (${BP_MOBILE2})`]: {
-      flexDirection: "column",
-      alignItems: "center",
-      textAlign: "center",
-      padding: "8px 6px",
-      gap: "4px"
-    }
-  },
-  logoWrapper: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0
-  },
-  logo: {
-    height: "32px",
-    width: "32px",
-    flexShrink: 0,
-    objectFit: "contain",
-    [`@media (${BP_TABLET2})`]: {
-      height: "28px",
-      width: "28px"
-    },
-    [`@media (${BP_MOBILE2})`]: {
-      height: "24px",
-      width: "24px"
-    }
-  },
-  textContent: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "2px",
-    minWidth: 0,
-    width: "100%",
-    [`@media (${BP_MOBILE2})`]: {
-      alignItems: "center"
-    }
-  },
-  label: {
-    fontSize: tokens.fontSizeBase300,
-    fontWeight: tokens.fontWeightSemibold,
-    lineHeight: "1.2",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    width: "100%",
-    [`@media (${BP_TABLET2})`]: {
-      fontSize: tokens.fontSizeBase200
-    },
-    [`@media (${BP_MOBILE2})`]: {
-      fontSize: tokens.fontSizeBase100,
-      textAlign: "center"
-    }
-  },
-  description: {
-    fontSize: tokens.fontSizeBase200,
-    fontWeight: tokens.fontWeightRegular,
-    color: tokens.colorNeutralForeground2,
-    display: "-webkit-box",
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: "vertical",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    lineHeight: "1.4",
-    [`@media (${BP_TABLET2})`]: {
-      fontSize: tokens.fontSizeBase100,
-      WebkitLineClamp: 1
-    },
-    [`@media (${BP_MOBILE2})`]: {
-      display: "none"
-    }
-  }
-});
-var ModalListMenuService = ({
-  open = false,
-  onClose = () => {
-  },
-  title = "",
-  menuItems = ALIAS_MENU_ITEMS,
-  onItemClick,
-  showDescriptions = true
-}) => {
-  const styles = useStyles41();
-  return /* @__PURE__ */ jsx(
-    Dialog,
-    {
-      open,
-      onOpenChange: (_, data) => {
-        if (!data.open) {
-          onClose();
-        }
-      },
-      children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-        /* @__PURE__ */ jsx(
-          DialogTitle,
-          {
-            action: /* @__PURE__ */ jsx(
-              Button,
-              {
-                appearance: "subtle",
-                "aria-label": "close",
-                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:dismiss-24-regular" }),
-                onClick: onClose,
-                className: styles.closeButton
-              }
-            ),
-            children: title
-          }
-        ),
-        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: /* @__PURE__ */ jsx(Row, { gutterWidth: 0, children: menuItems.map((item) => /* @__PURE__ */ jsx(Col, { xs: 6, sm: 6, md: 3, lg: 3, children: /* @__PURE__ */ jsxs(
-          Button,
-          {
-            className: styles.menuItem,
-            onClick: () => onItemClick?.(item),
-            "aria-label": item.name,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: item.imageUrl,
-                  alt: item.name,
-                  className: styles.logo
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
-                /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
-                showDescriptions && /* @__PURE__ */ jsx(
-                  MenuItemDescription,
-                  {
-                    description: item.description,
-                    className: styles.description
-                  }
-                )
-              ] })
-            ]
-          }
-        ) }, item.id)) }) })
-      ] }) })
-    }
-  );
-};
 
 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 };
 //# sourceMappingURL=index.mjs.map