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

package/dist/index.js

@@ -1886,7 +1886,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: {
@@ -1898,8 +1899,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"
   }
 };
@@ -1940,12 +1942,191 @@ var ALIAS_MENU_ITEMS = [
 var BP_TABLET = `max-width: ${extendedTokens.breakpointXl}`;
 var BP_MOBILE = `max-width: ${extendedTokens.breakpointMd}`;
 var useStyles6 = reactComponents.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: reactComponents.tokens.borderRadiusMedium,
+    cursor: "pointer",
+    textAlign: "left",
+    transition: "background-color 0.2s ease",
+    color: reactComponents.tokens.colorNeutralForeground1,
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+    border: "none",
+    gap: "12px",
+    width: "100%",
+    "&:hover": {
+      backgroundColor: reactComponents.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: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightSemibold,
+    lineHeight: "1.2",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    width: "100%",
+    [`@media (${BP_TABLET})`]: {
+      fontSize: reactComponents.tokens.fontSizeBase200
+    },
+    [`@media (${BP_MOBILE})`]: {
+      fontSize: reactComponents.tokens.fontSizeBase100,
+      textAlign: "center"
+    }
+  },
+  description: {
+    fontSize: reactComponents.tokens.fontSizeBase200,
+    fontWeight: reactComponents.tokens.fontWeightRegular,
+    color: reactComponents.tokens.colorNeutralForeground2,
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    lineHeight: "1.4",
+    [`@media (${BP_TABLET})`]: {
+      fontSize: reactComponents.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__ */ jsxRuntime.jsx(
+    reactComponents.Dialog,
+    {
+      open,
+      onOpenChange: (_, data) => {
+        if (!data.open) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.DialogTitle,
+          {
+            action: /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.Button,
+              {
+                appearance: "subtle",
+                "aria-label": "close",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
+                onClick: onClose,
+                className: styles.closeButton
+              }
+            ),
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { gutterWidth: 0, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 6, sm: 6, md: 3, lg: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          reactComponents.Button,
+          {
+            className: styles.menuItem,
+            onClick: () => onItemClick?.(item),
+            "aria-label": item.name,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: item.imageUrl,
+                  alt: item.name,
+                  className: styles.logo
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
+                showDescriptions && /* @__PURE__ */ jsxRuntime.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 = reactComponents.makeStyles({
   card: {
     width: "100%",
     boxSizing: "border-box",
     padding: "0px",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       borderRadius: reactComponents.tokens.borderRadiusLarge
     }
   },
@@ -1955,7 +2136,7 @@ var useStyles6 = reactComponents.makeStyles({
     flexDirection: "column",
     justifyContent: "space-around",
     // Tablet + Mobile: horizontal scroll row
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       flexDirection: "row",
       overflowX: "auto",
       overflowY: "visible",
@@ -1965,7 +2146,7 @@ var useStyles6 = reactComponents.makeStyles({
       // Thin scrollbar on tablet, hidden on mobile
       scrollbarWidth: "thin"
     },
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       scrollbarWidth: "none"
     }
   },
@@ -1989,7 +2170,7 @@ var useStyles6 = reactComponents.makeStyles({
       backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
     },
     // Tablet: compact column, fixed width, description visible (1 line)
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       flexDirection: "column",
       alignItems: "center",
       textAlign: "center",
@@ -2001,7 +2182,7 @@ var useStyles6 = reactComponents.makeStyles({
       scrollSnapAlign: "start"
     },
     // Mobile: even tighter, no description
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       padding: "8px 6px",
       width: "72px",
       gap: "4px"
@@ -2021,16 +2202,32 @@ var useStyles6 = reactComponents.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"
     }
@@ -2042,7 +2239,7 @@ var useStyles6 = reactComponents.makeStyles({
     minWidth: 0,
     width: "100%",
     // allow ellipsis to work
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       alignItems: "center",
       gap: "2px"
     }
@@ -2051,7 +2248,7 @@ var useStyles6 = reactComponents.makeStyles({
     fontSize: reactComponents.tokens.fontSizeBase300,
     fontWeight: reactComponents.tokens.fontWeightSemibold,
     lineHeight: "1.2",
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       fontSize: reactComponents.tokens.fontSizeBase200,
       whiteSpace: "nowrap",
       overflow: "hidden",
@@ -2059,7 +2256,7 @@ var useStyles6 = reactComponents.makeStyles({
       width: "100%",
       textAlign: "center"
     },
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       fontSize: reactComponents.tokens.fontSizeBase100
     }
   },
@@ -2075,7 +2272,7 @@ var useStyles6 = reactComponents.makeStyles({
     textOverflow: "ellipsis",
     lineHeight: "1.4",
     // Tablet: 1-line clamp, compact
-    [`@media (${BP_TABLET})`]: {
+    [`@media (${BP_TABLET2})`]: {
       fontSize: reactComponents.tokens.fontSizeBase100,
       WebkitLineClamp: 1,
       whiteSpace: "nowrap",
@@ -2083,7 +2280,7 @@ var useStyles6 = reactComponents.makeStyles({
       textAlign: "center"
     },
     // Mobile: hide description entirely
-    [`@media (${BP_MOBILE})`]: {
+    [`@media (${BP_MOBILE2})`]: {
       display: "none"
     }
   },
@@ -2100,13 +2297,13 @@ var useStyles6 = reactComponents.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"
     }
   }
@@ -2122,60 +2319,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] = React.useState(false);
   const getMenuItemClass = (serviceId) => {
-    const isActive = activeServiceId === serviceId;
+    const isActive = serviceId !== void 0 && activeServiceId === serviceId;
     return reactComponents.mergeClasses(styles.menuItem, isActive && styles.menuItemActive);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.menuList, children: isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
-        showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { className: styles.description, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
-      ] })
-    ] }),
-    index < skeletonCount - 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.dividerHorizontal }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.dividerVertical })
-    ] })
-  ] }, `skeleton-${index}`)) : menuItems.map((item, index) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
+  const MAX_ITEMS = 5;
+  const isOverflow = menuItems.length > MAX_ITEMS;
+  const displayItems = isOverflow ? menuItems.slice(0, MAX_ITEMS - 1) : menuItems;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: reactComponents.mergeClasses(styles.card, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.menuList, children: [
+      isLoading ? Array.from({ length: skeletonCount }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses(styles.menuItem, styles.skeletonOverride), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { className: styles.logo, style: { borderRadius: "50%" } }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "60%", height: "16px" } }) }),
+            showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { className: styles.description, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.SkeletonItem, { style: { width: "90%", height: "12px", marginTop: "4px" } }) })
+          ] })
+        ] }),
+        index < skeletonCount - 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.dividerHorizontal }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.dividerVertical })
+        ] })
+      ] }, `skeleton-${index}`)) : displayItems.map((item, index) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            reactComponents.Button,
+            {
+              className: getMenuItemClass(item.id),
+              onClick: () => onServiceClick?.(item.id),
+              "aria-label": item.name,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: item.imageUrl,
+                    alt: item.name,
+                    className: styles.logo
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
+                  showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(
+                    MenuItemDescription,
+                    {
+                      description: item.description,
+                      className: styles.description
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          (index < displayItems.length - 1 || isOverflow) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.dividerHorizontal }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.dividerVertical })
+          ] })
+        ] }, item.id);
+      }),
+      !isLoading && isOverflow && /* @__PURE__ */ jsxRuntime.jsxs(
         reactComponents.Button,
         {
-          className: getMenuItemClass(item.id),
-          onClick: () => onServiceClick?.(item.id),
-          "aria-label": item.name,
+          className: getMenuItemClass(),
+          onClick: () => setIsModalOpen(true),
+          "aria-label": mergedLabels.otherLabel,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.moreIconOuter, children: /* @__PURE__ */ jsxRuntime.jsx(
+              react.Icon,
               {
-                src: item.imageUrl,
-                alt: item.name,
-                className: styles.logo
+                icon: "fluent:apps-24-regular",
+                fontSize: "32px",
+                color: reactComponents.tokens.colorNeutralForeground1
               }
-            ) }),
+            ) }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: mergedLabels.otherLabel }),
               showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(
                 MenuItemDescription,
                 {
-                  description: item.description,
+                  description: mergedLabels.otherDescription,
                   className: styles.description
                 }
               )
             ] })
           ]
         }
-      ),
-      index < menuItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { className: styles.dividerHorizontal }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { vertical: true, className: styles.dividerVertical })
-      ] })
-    ] }, item.id);
-  }) }) });
+      )
+    ] }) }),
+    !isLoading && isOverflow && /* @__PURE__ */ jsxRuntime.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 = React.useRef(null);
@@ -2429,7 +2676,7 @@ var COUNTRIES = [
   { value: "PG", label: "Papua New Guinea", flag: "twemoji:flag-papua-new-guinea" }
 ];
 var PhoneInput = PhoneInputComponent__default.default.default || PhoneInputComponent__default.default;
-var useStyles7 = reactComponents.makeStyles({
+var useStyles8 = reactComponents.makeStyles({
   field: {
     display: "flex",
     flexDirection: "column",
@@ -2767,7 +3014,7 @@ var InputDynamic = ({
   labels,
   menuPlacement
 }) => {
-  const styles = useStyles7();
+  const styles = useStyles8();
   const mergedLabels = { ...DEFAULT_LABELS7[language], ...labels };
   const [showPassword, setShowPassword] = React.useState(false);
   const [isPhoneMode, setIsPhoneMode] = React.useState(false);
@@ -3841,7 +4088,7 @@ var DEFAULT_LABELS8 = {
     otherDescription: "Other Services"
   }
 };
-var useStyles8 = reactComponents.makeStyles({
+var useStyles9 = reactComponents.makeStyles({
   card: {
     position: "relative",
     width: "100%",
@@ -3979,7 +4226,7 @@ var CardTicketSearch = ({
   menuItems,
   isLoadingServiceMenu
 }) => {
-  const styles = useStyles8();
+  const styles = useStyles9();
   const labels = React__default.default.useMemo(
     () => ({ ...DEFAULT_LABELS8[language], ...customLabels }),
     [language, customLabels]
@@ -4491,7 +4738,7 @@ var DEFAULT_LABELS9 = {
     swapAriaLabel: "Swap origin and destination"
   }
 };
-var useStyles9 = reactComponents.makeStyles({
+var useStyles10 = reactComponents.makeStyles({
   cardSearchTicket: {
     borderRadius: "32px",
     // borderBottomLeftRadius: '0',
@@ -4573,7 +4820,7 @@ var CardTicketSearchSummary = ({
   showSwapButton = false,
   children
 }) => {
-  const styles = useStyles9();
+  const styles = useStyles10();
   const mergedLabels = { ...DEFAULT_LABELS9[language], ...labels };
   const { width } = useWindowSize();
   const getCircularConfig = () => {
@@ -4902,7 +5149,7 @@ var DEFAULT_LABELS10 = {
     popularHarborHeader: "Popular Harbor"
   }
 };
-var useStyles10 = reactComponents.makeStyles({
+var useStyles11 = reactComponents.makeStyles({
   dialogTitle: {
     display: "flex",
     justifyContent: "space-between",
@@ -5035,7 +5282,7 @@ var ModalSearchHarbor = ({
   popularHarbors,
   showButtonFavorite = true
 }) => {
-  const styles = useStyles10();
+  const styles = useStyles11();
   const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
   const handleSelect = (harbor) => {
     onAddLastSearched(harbor);
@@ -5225,7 +5472,7 @@ var DEFAULT_LABELS11 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles11 = reactComponents.makeStyles({
+var useStyles12 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -5345,7 +5592,7 @@ var ModalSelectDate = ({
   dateFormat = "DD MMMM YYYY",
   showRoundtrip = true
 }) => {
-  const styles = useStyles11();
+  const styles = useStyles12();
   const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
   React.useEffect(() => {
     moment__default.default.locale(language === "id" ? "id" : "en");
@@ -5587,7 +5834,7 @@ var DEFAULT_LABELS12 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles12 = reactComponents.makeStyles({
+var useStyles13 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -5672,7 +5919,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] = React.useState(selectedServiceIds);
@@ -5794,7 +6041,7 @@ var DEFAULT_LABELS13 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles13 = reactComponents.makeStyles({
+var useStyles14 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -5874,7 +6121,7 @@ var ModalTotalPassengers = ({
   maxPassengers = 10,
   infoMessage
 }) => {
-  const styles = useStyles13();
+  const styles = useStyles14();
   const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
   const [passengers, setPassengers] = React.useState([]);
   const [openItems, setOpenItems] = React.useState([]);
@@ -6171,7 +6418,7 @@ var DEFAULT_VEHICLE_ICONS = {
   bigTruck: "/assets/images/icons/big-truck.webp",
   looseLoad: "/assets/images/icons/loose-load.webp"
 };
-var useStyles14 = reactComponents.makeStyles({
+var useStyles15 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6225,7 +6472,7 @@ var ModalTypeOfService = ({
   onSave,
   renderImage
 }) => {
-  const styles = useStyles14();
+  const styles = useStyles15();
   const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
   const [selectedServiceId, setSelectedServiceId] = React.useState(
     selectedService?.id || 0
@@ -6506,7 +6753,7 @@ var getSortLabel = (value) => {
   const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
   return option?.label || "Rekomendasi";
 };
-var useStyles15 = reactComponents.makeStyles({
+var useStyles16 = reactComponents.makeStyles({
   container: {
     display: "flex",
     width: "100%",
@@ -6542,7 +6789,7 @@ var SortMenu = ({
   sortButtonText: deprecatedSortButtonText,
   clearFiltersText: deprecatedClearFiltersText
 }) => {
-  const styles = useStyles15();
+  const styles = useStyles16();
   const labels = React__default.default.useMemo(
     () => ({
       ...DEFAULT_LABELS15[language],
@@ -6718,7 +6965,7 @@ var DEFAULT_DURATION_RANGE = {
   min: 0,
   max: 8
 };
-var useStyles16 = reactComponents.makeStyles({
+var useStyles17 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6828,7 +7075,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] = React.useState(false);
   React.useEffect(() => {
@@ -7152,7 +7399,7 @@ var DEFAULT_LABELS17 = {
   }
 };
 var DEFAULT_SCROLL_AMOUNT = 150;
-var useStyles17 = reactComponents.makeStyles({
+var useStyles18 = reactComponents.makeStyles({
   container: {
     display: "flex",
     alignItems: "stretch",
@@ -7235,7 +7482,7 @@ var DateFilter = ({
   labels,
   isLoading = false
 }) => {
-  const styles = useStyles17();
+  const styles = useStyles18();
   const scrollRef = React.useRef(null);
   const mergedLabels = {
     ...DEFAULT_LABELS17[language],
@@ -7361,7 +7608,7 @@ var DEFAULT_FORM_VALUES = {
   typeOfService: "",
   passenger: ""
 };
-var useStyles18 = reactComponents.makeStyles({
+var useStyles19 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "900px",
     width: "100%"
@@ -7463,7 +7710,7 @@ var ModalSearchTicket = ({
   showRoundTrip = true,
   ...props
 }) => {
-  const styles = useStyles18();
+  const styles = useStyles19();
   const mergedLabels = { ...DEFAULT_LABELS18[language], ...labels };
   const { control, setValue, handleSubmit, watch } = reactHookForm.useForm({
     defaultValues: {
@@ -7911,7 +8158,7 @@ var DEFAULT_LABELS19 = {
     ferryIconAlt: "Ferry Icon"
   }
 };
-var useStyles19 = reactComponents.makeStyles({
+var useStyles20 = reactComponents.makeStyles({
   stepperWrapper: {
     position: "relative",
     width: "100%",
@@ -8036,7 +8283,7 @@ var Stepper = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles19();
+  const styles = useStyles20();
   const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
   const currentStepIndex = React.useMemo(() => {
     if (typeof currentStep === "number") {
@@ -8107,7 +8354,7 @@ var DEFAULT_LABELS20 = {
     email: "Email"
   }
 };
-var useStyles20 = reactComponents.makeStyles({
+var useStyles21 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -8137,7 +8384,7 @@ var CardOrdererInfo = ({
   labels,
   className
 }) => {
-  const styles = useStyles20();
+  const styles = useStyles21();
   const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { children: mergedLabels.title }),
@@ -8189,7 +8436,7 @@ var DEFAULT_LABELS21 = {
     }
   }
 };
-var useStyles21 = reactComponents.makeStyles({
+var useStyles22 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -8244,7 +8491,7 @@ var ModalListPassenger = ({
   // sameAsOrderer,
   // onSameAsOrdererChange,
 }) => {
-  const styles = useStyles21();
+  const styles = useStyles22();
   const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   const handleClose = () => {
@@ -8500,7 +8747,7 @@ var TYPE_OPTIONS = [
     value: "lainnya"
   }
 ];
-var useStyles22 = reactComponents.makeStyles({
+var useStyles23 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -8678,7 +8925,7 @@ var ModalPassengerForm = ({
   ticketClassOptions,
   onScanComplete
 }) => {
-  const styles = useStyles22();
+  const styles = useStyles23();
   const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
   const mergedErrors = {
     ...DEFAULT_LABELS22[language].errors,
@@ -9433,7 +9680,7 @@ var getBadgeConfig = (ticketClass) => {
       };
   }
 };
-var useStyles23 = reactComponents.makeStyles({
+var useStyles24 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -9516,7 +9763,7 @@ var CardPassengerList = ({
   labels,
   className
 }) => {
-  const styles = useStyles23();
+  const styles = useStyles24();
   const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
@@ -9608,7 +9855,7 @@ var DEFAULT_LABELS24 = {
     noLabel: "No"
   }
 };
-var useStyles24 = reactComponents.makeStyles({
+var useStyles25 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -9648,7 +9895,7 @@ var CardVehicleDetail = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles24();
+  const styles = useStyles25();
   const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9819,7 +10066,7 @@ var DEFAULT_LABELS25 = {
     incrementQuantityAriaLabel: "Increase quantity"
   }
 };
-var useStyles25 = reactComponents.makeStyles({
+var useStyles26 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -9887,7 +10134,7 @@ var CardVehicleOwnerForm = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles25();
+  const styles = useStyles26();
   const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
@@ -10702,7 +10949,7 @@ var DEFAULT_LABELS26 = {
     currencySymbol: "IDR"
   }
 };
-var useStyles26 = reactComponents.makeStyles({
+var useStyles27 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -10835,7 +11082,7 @@ var CardBookingTicket = ({
   onPrevious,
   className
 }) => {
-  const styles = useStyles26();
+  const styles = useStyles27();
   const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailTop, children: [
@@ -11028,7 +11275,7 @@ var DEFAULT_FAQ_ITEMS = {
     }
   ]
 };
-var useStyles27 = reactComponents.makeStyles({
+var useStyles28 = reactComponents.makeStyles({
   faqSection: {
     // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
   },
@@ -11052,7 +11299,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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.faqCard, children: [
@@ -11106,7 +11353,7 @@ var DEFAULT_LABELS28 = {
     currencySymbol: "Rp"
   }
 };
-var useStyles28 = reactComponents.makeStyles({
+var useStyles29 = reactComponents.makeStyles({
   card: {
     backgroundColor: reactComponents.tokens.colorNeutralBackground1,
     boxShadow: reactComponents.tokens.shadow4,
@@ -11279,7 +11526,7 @@ var CardAddon = ({
   children,
   className
 }) => {
-  const styles = useStyles28();
+  const styles = useStyles29();
   const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapRow, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleDivider, children: [
@@ -11507,7 +11754,7 @@ var DEFAULT_LABELS29 = {
     searchPlaceholder: "Search for food or drinks you want"
   }
 };
-var useStyles29 = reactComponents.makeStyles({
+var useStyles30 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -11651,7 +11898,7 @@ var CardMealCatalog = ({
   searchValue,
   onSearchChange
 }) => {
-  const styles = useStyles29();
+  const styles = useStyles30();
   const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.banner, children: [
@@ -11765,7 +12012,7 @@ var DEFAULT_LABELS30 = {
     defaultTitle: "Review"
   }
 };
-var useStyles30 = reactComponents.makeStyles({
+var useStyles31 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -11816,7 +12063,7 @@ var CardReview = ({
   className,
   headerAction
 }) => {
-  const styles = useStyles30();
+  const styles = useStyles31();
   const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
@@ -11874,7 +12121,7 @@ var DEFAULT_LABELS31 = {
     idNumber: "ID Number"
   }
 };
-var useStyles31 = reactComponents.makeStyles({
+var useStyles32 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -11972,7 +12219,7 @@ var CardReviewPassenger = ({
   passengers,
   className
 }) => {
-  const styles = useStyles31();
+  const styles = useStyles32();
   const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
@@ -12052,7 +12299,7 @@ var DEFAULT_LABELS32 = {
     currencyPrefix: "Rp. "
   }
 };
-var useStyles32 = reactComponents.makeStyles({
+var useStyles33 = reactComponents.makeStyles({
   list: {
     margin: 0,
     padding: 0,
@@ -12074,7 +12321,7 @@ var PriceDetailsTerms = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles32();
+  const styles = useStyles33();
   const linkColor = reactComponents.tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
@@ -12094,7 +12341,7 @@ var PriceDetailsTerms = ({
     ] })
   ] });
 };
-var useStyles33 = reactComponents.makeStyles({
+var useStyles34 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -12171,7 +12418,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) => {
@@ -12239,7 +12486,7 @@ var DEFAULT_LABELS33 = {
     selectAriaLabel: "Select payment method"
   }
 };
-var useStyles34 = reactComponents.makeStyles({
+var useStyles35 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -12299,7 +12546,7 @@ var CardPaymentMethodList = ({
   selectedValue,
   onSelect
 }) => {
-  const styles = useStyles34();
+  const styles = useStyles35();
   const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
@@ -12357,7 +12604,7 @@ var DEFAULT_LABELS34 = {
     title: "Payment Method"
   }
 };
-var useStyles35 = reactComponents.makeStyles({
+var useStyles36 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -12394,7 +12641,7 @@ var CardPaymentGuide = ({
   guides,
   className
 }) => {
-  const styles = useStyles35();
+  const styles = useStyles36();
   const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
@@ -12432,7 +12679,7 @@ var DEFAULT_LABELS35 = {
     currencySymbol: "Rp."
   }
 };
-var useStyles36 = reactComponents.makeStyles({
+var useStyles37 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -12514,7 +12761,7 @@ var CardPaymentInfo = ({
   onCopyVA,
   onCheckStatus
 }) => {
-  const styles = useStyles36();
+  const styles = useStyles37();
   const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
@@ -12603,7 +12850,7 @@ var DEFAULT_LABELS36 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles37 = reactComponents.makeStyles({
+var useStyles38 = reactComponents.makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -12673,7 +12920,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;
@@ -12797,7 +13044,7 @@ var DEFAULT_LABELS37 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles38 = reactComponents.makeStyles({
+var useStyles39 = reactComponents.makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -12924,7 +13171,7 @@ var ModalPriceDetail = ({
   grandTotal,
   ...props
 }) => {
-  const styles = useStyles38();
+  const styles = useStyles39();
   const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactComponents.Dialog,
@@ -13083,7 +13330,7 @@ var DEFAULT_LABELS38 = {
     requiredError: "is required"
   }
 };
-var useStyles39 = reactComponents.makeStyles({
+var useStyles40 = reactComponents.makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -13110,7 +13357,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles39();
+  const styles = useStyles40();
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactComponents.DialogTitle,
@@ -13623,7 +13870,7 @@ var DEFAULT_LABELS39 = {
   id: {},
   en: {}
 };
-var useStyles40 = reactComponents.makeStyles({
+var useStyles41 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13683,7 +13930,7 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles40();
+  const styles = useStyles41();
   ({ ...DEFAULT_LABELS39[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
@@ -13712,185 +13959,6 @@ var CardProfileMenu = ({
     }
   ) });
 };
-var BP_TABLET2 = `max-width: ${extendedTokens.breakpointXl}`;
-var BP_MOBILE2 = `max-width: ${extendedTokens.breakpointMd}`;
-var useStyles41 = reactComponents.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: reactComponents.tokens.borderRadiusMedium,
-    cursor: "pointer",
-    textAlign: "left",
-    transition: "background-color 0.2s ease",
-    color: reactComponents.tokens.colorNeutralForeground1,
-    backgroundColor: reactComponents.tokens.colorNeutralBackground1,
-    border: "none",
-    gap: "12px",
-    width: "100%",
-    "&:hover": {
-      backgroundColor: reactComponents.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: reactComponents.tokens.fontSizeBase300,
-    fontWeight: reactComponents.tokens.fontWeightSemibold,
-    lineHeight: "1.2",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    width: "100%",
-    [`@media (${BP_TABLET2})`]: {
-      fontSize: reactComponents.tokens.fontSizeBase200
-    },
-    [`@media (${BP_MOBILE2})`]: {
-      fontSize: reactComponents.tokens.fontSizeBase100,
-      textAlign: "center"
-    }
-  },
-  description: {
-    fontSize: reactComponents.tokens.fontSizeBase200,
-    fontWeight: reactComponents.tokens.fontWeightRegular,
-    color: reactComponents.tokens.colorNeutralForeground2,
-    display: "-webkit-box",
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: "vertical",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    lineHeight: "1.4",
-    [`@media (${BP_TABLET2})`]: {
-      fontSize: reactComponents.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__ */ jsxRuntime.jsx(
-    reactComponents.Dialog,
-    {
-      open,
-      onOpenChange: (_, data) => {
-        if (!data.open) {
-          onClose();
-        }
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.DialogTitle,
-          {
-            action: /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Button,
-              {
-                appearance: "subtle",
-                "aria-label": "close",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:dismiss-24-regular" }),
-                onClick: onClose,
-                className: styles.closeButton
-              }
-            ),
-            children: title
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { gutterWidth: 0, children: menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 6, sm: 6, md: 3, lg: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          reactComponents.Button,
-          {
-            className: styles.menuItem,
-            onClick: () => onItemClick?.(item),
-            "aria-label": item.name,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.logoWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  src: item.imageUrl,
-                  alt: item.name,
-                  className: styles.logo
-                }
-              ) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
-                showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(
-                  MenuItemDescription,
-                  {
-                    description: item.description,
-                    className: styles.description
-                  }
-                )
-              ] })
-            ]
-          }
-        ) }, item.id)) }) })
-      ] }) })
-    }
-  );
-};
 
 exports.API_CONFIG = API_CONFIG;
 exports.API_ENDPOINTS = API_ENDPOINTS;